/* FLUXO / TOKYO — follows the FLUXO Lote 001 design system (codeaustral.com/fluxocoffee DESIGN.md):
   paper / ink / cobalt, Bodoni Moda display + Archivo body, no monospace, no glass blur, no glow. */
:root{
  --paper:oklch(0.97 0 0); --ink:oklch(0.19 0.008 260); --cobalt:oklch(0.42 0.17 272);
  --abyss:oklch(0.22 0.09 272); --slip:oklch(0.15 0.01 260); --ice:oklch(0.93 0.03 260); --caramel:oklch(0.55 0.12 62);
  --hair:oklch(0.19 0.008 260 / .22); --hair-ice:oklch(0.93 0.03 260 / .22);
  --display:'Bodoni Moda',Didot,'Times New Roman',serif; --body:'Archivo',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--slip);color:var(--ice);font:400 14px/1.5 var(--body);overflow:hidden;-webkit-font-smoothing:antialiased}
canvas#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
canvas#scene.dragging{cursor:grabbing}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
.caps{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}

/* loader */
.loader{position:fixed;inset:0;z-index:20;background:var(--paper);color:var(--ink);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);align-items:center;gap:5vw;padding:6vh 7vw;transition:opacity .9s ease}
.loader.out{opacity:0;pointer-events:none}
.loader-card{max-width:520px}
.loader-mark{width:min(220px,50vw);display:block;margin:0 0 34px;mix-blend-mode:multiply}
.loader h1{font:900 clamp(44px,6.4vw,92px)/.95 var(--display);letter-spacing:-.01em;margin:0 0 18px;text-wrap:balance}
.loader h1 em{font-weight:400;color:var(--cobalt)}
.loader .lede{margin:0 0 26px;font-size:16px;line-height:1.55;max-width:42ch;color:oklch(0.32 0.01 260)}
.specs{margin:0 0 26px;padding:0;display:grid}
.specs div{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--hair);padding:8px 0}
.specs dt,.specs dd{margin:0;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.specs dt{color:oklch(0.45 0.01 260)}
.specs div.pending{opacity:0;transform:translateY(4px)}
.specs div{transition:opacity .4s ease,transform .4s ease}
.btn{background:var(--ink);color:var(--paper);border:0;padding:15px 24px;font:600 13px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;display:inline-block}
.btn:disabled{opacity:.4;cursor:progress}
.btn:not(:disabled):hover{background:var(--cobalt)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.fine{margin:18px 0 0;font-size:12px;color:oklch(0.45 0.01 260);max-width:46ch}
.loader-bag{width:100%;max-height:86vh;object-fit:cover;justify-self:center}
@media (max-width:760px){
  .loader{grid-template-columns:1fr;padding:0 16px 28px;align-content:start;overflow:auto;gap:22px}
  .loader-bag{order:-1;width:calc(100% + 32px);margin:0 -16px;max-height:34vh}
  .loader-mark{margin-bottom:20px}
}

/* HUD */
.hud{position:fixed;z-index:5;top:0;left:0;right:0;display:flex;align-items:center;gap:20px;padding:16px 18px;pointer-events:none}
.brand{display:flex;align-items:center;gap:12px;mix-blend-mode:difference;color:#fff}
.brand img{height:16px;display:block}
.brand span{font:italic 400 19px/1 var(--display)}
.status{display:flex;gap:14px;color:var(--ice);opacity:.8}
.hud-actions{margin-left:auto;display:flex;gap:6px;pointer-events:auto}
.chip{background:var(--slip);color:var(--ice);border:0;box-shadow:inset 0 0 0 1px var(--hair-ice);padding:9px 12px}
.chip:hover{background:var(--cobalt)}
@media (max-width:600px){.status{display:none}.hud{padding:14px 16px}}

/* hotspot pins */
.pins{position:fixed;inset:0;z-index:4;pointer-events:none}
.pin{position:absolute;left:0;top:0;pointer-events:auto;display:flex;align-items:center;gap:8px;background:none;border:0;padding:8px;transition:opacity .25s}
.pin b{position:relative;width:12px;height:12px;border-radius:50%;background:var(--cobalt);box-shadow:0 0 0 2px var(--paper);flex:none}
.pin b::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:1px solid var(--paper);animation:ring 2.6s ease-out infinite}
.pin span{background:var(--paper);color:var(--ink);padding:5px 8px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateX(-4px);transition:.2s}
.pin.near span,.pin:hover span,.pin:focus-visible span{opacity:1;transform:none}
@keyframes ring{from{transform:scale(1);opacity:.9}to{transform:scale(2.6);opacity:0}}

.hint{position:fixed;z-index:4;left:50%;bottom:22px;transform:translateX(-50%);margin:0;padding:9px 14px;background:var(--slip);color:var(--ice);box-shadow:inset 0 0 0 1px var(--hair-ice);white-space:nowrap;transition:opacity 1s}
.hint.fade{opacity:0}
@media (max-width:600px){.hint{bottom:auto;top:60px;white-space:normal;width:calc(100% - 32px);text-align:center}}

/* touch joystick */
.stick{position:fixed;z-index:4;left:22px;bottom:calc(26px + env(safe-area-inset-bottom));width:108px;height:108px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--hair-ice);background:oklch(0.15 0.01 260 / .45);touch-action:none}
.stick i{position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:var(--paper)}

/* panel */
.panel{position:fixed;z-index:10;top:66px;right:18px;width:min(390px,calc(100% - 36px));max-height:calc(100% - 86px);overflow:auto;background:var(--paper);color:var(--ink);padding:26px 24px 22px;animation:in .35s cubic-bezier(.2,.8,.2,1)}
@keyframes in{from{opacity:0;transform:translateY(10px)}}
.panel .close{position:absolute;right:6px;top:4px;border:0;background:none;font:400 28px/1 var(--display);padding:6px 10px;color:var(--ink)}
.panel .kicker{margin:0 0 6px;color:var(--cobalt)}
.panel h2{margin:0 0 10px;font:900 40px/.98 var(--display);letter-spacing:-.01em;text-wrap:balance}
.panel h2 em{font-weight:400}
.panel p.prose{margin:0 0 14px;font-size:14.5px;line-height:1.55;color:oklch(0.3 0.01 260)}
.panel .specs{margin:10px 0 0}
.panel .loop{display:flex;gap:3px;margin:12px 0 4px}
.panel .loop i{flex:1;height:6px;background:var(--hair)}
.panel .loop i.on{background:var(--ink)}
.panel .loop i.now{background:var(--caramel)}
.panel .stages{display:flex;justify-content:space-between;font-size:9.5px;font-weight:600;letter-spacing:.06em;color:oklch(0.45 0.01 260)}
.panel .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.panel img.label{width:100%;display:block;margin:4px 0 14px}
.panel .opt{display:grid;margin-top:12px}
.panel .opt button{display:flex;justify-content:space-between;gap:12px;text-align:left;border:0;border-top:1px solid var(--hair);background:none;padding:12px 2px;font-size:14px;color:var(--ink)}
.panel .opt button small{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:oklch(0.45 0.01 260);white-space:nowrap}
.panel .opt button:hover{color:var(--cobalt)}
.panel .opt button[aria-pressed="true"]{font-weight:700}
.panel .opt button[aria-pressed="true"]::before{content:'●';color:var(--cobalt);margin-right:8px;font-size:9px;align-self:center}
.panel .opt button[aria-pressed="true"]{justify-content:flex-start}
.panel .opt button[aria-pressed="true"] small{margin-left:auto}
.panel .note{font-size:12.5px;color:oklch(0.45 0.01 260);margin:16px 0 0;border-top:1px solid var(--hair);padding-top:12px}
@media (max-width:600px){.panel{top:auto;bottom:0;right:0;left:0;width:100%;max-height:64%;padding-bottom:calc(22px + env(safe-area-inset-bottom))}.panel h2{font-size:34px}}
@media (prefers-reduced-motion:reduce){.pin b::after{animation:none}.panel{animation:none}.loader{transition:none}}

/* v2: room fade, toast, wide panel, music cover, chess board */
.fade{position:fixed;inset:0;z-index:8;background:var(--slip);opacity:0;pointer-events:none;transition:opacity .25s ease}
.fade.on{opacity:1}
.toast{position:fixed;z-index:6;left:50%;top:70px;transform:translateX(-50%);margin:0;padding:10px 16px;background:var(--paper);color:var(--ink);white-space:nowrap;transition:opacity .8s}
.toast.fade{opacity:0}
.status #room{color:var(--paper);opacity:1}
.panel.wide{width:min(470px,calc(100% - 36px))}
.panel .now{display:flex;gap:14px;align-items:center;margin:2px 0 6px}
.panel .now img{width:84px;height:84px;object-fit:cover;flex:none;background:var(--ink)}
.panel .now h2{font-size:30px;margin:0 0 4px}
.panel .now .by{margin:0;color:oklch(0.45 0.01 260)}
.panel .opt.tracks{max-height:300px;overflow:auto}
.panel .cboard{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;width:100%;margin:12px 0 10px;box-shadow:0 0 0 1px var(--ink)}
.panel .cboard .sq{appearance:none;border:0;padding:0;display:grid;place-items:center;font-size:clamp(22px,5.4vw,34px);line-height:1;position:relative}
.panel .cboard .sq.l{background:oklch(0.9 0.02 80)}
.panel .cboard .sq.d{background:oklch(0.62 0.05 60)}
.panel .cboard .sq.last{box-shadow:inset 0 0 0 100px oklch(0.42 0.17 272 / .22)}
.panel .cboard .sq.sel{box-shadow:inset 0 0 0 3px var(--cobalt)}
.panel .cboard .sq.tgt::after{content:'';position:absolute;width:26%;height:26%;border-radius:50%;background:oklch(0.42 0.17 272 / .55)}
.panel .cboard .sq span.w{color:#fbfaf6;-webkit-text-stroke:1px oklch(0.19 0.008 260)}
.panel .cboard .sq span.b{color:oklch(0.17 0.01 260)}
.panel .cstatus{margin:0;font:italic 400 19px/1.3 var(--display);text-align:center}
@media (max-width:600px){.toast{top:auto;bottom:150px;white-space:normal;width:calc(100% - 32px);text-align:center}.status{display:none}}