/* LOOP DUEL — app.css (split from index.html) */
  :root{
    /* the page IS dark — declaring it stops mobile "auto dark mode"
       from force-inverting our light text into unreadable black */
    color-scheme:dark;
    --sea:#0b1b26; --panel:#122733; --panel2:#0e2029; --line:#24404f;
    --foam:#e8f2f5; --dim:#7d97a3;
    --p1:#ff9a62; --p1s:rgba(255,154,98,.16);
    --p2:#6fc3ff; --p2s:rgba(111,195,255,.16);
    --gold:#ffd479;
    /* translucent surfaces — every hard-coded dark lives here so light mode
       can swap them all at once */
    --ink:rgba(7,16,22,.94);       /* full-screen overlays (picker, queue) */
    --ink2:rgba(7,16,22,.55);      /* info line */
    --panelT:rgba(14,32,41,.85);   /* floating round buttons */
    --panelT2:rgba(14,32,41,.7);   /* greeting chips */
    --hudTop:rgba(7,16,22,.85);    /* header gradient start */
    --barBg:rgba(232,242,245,.12); /* loop bar track */
    --goldSel:rgba(255,212,121,.13);
    --goldSelA:rgba(255,212,121,.08);
    --goldBrd:rgba(255,212,121,.5);
    --titleTop:#12303f;
    --chipDiv:rgba(36,64,79,.45);
    --voteSel:rgba(255,255,255,.06);
    --warn:#ffb0a0;
    --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Noto Sans JP",system-ui,sans-serif;
    --serif:"Didot","Bodoni MT",Georgia,serif;
    --mono:"SF Mono",Consolas,monospace;
  }
  /* light mode — the same bones in daylight */
  html[data-theme="light"]{
    --sea:#eaf3f6; --panel:#ffffff; --panel2:#f4f9fb; --line:#b9cdd6;
    --foam:#15303c; --dim:#5b7683;
    --p1:#e06a28; --p1s:rgba(224,106,40,.14);
    --p2:#1f7ac0; --p2s:rgba(31,122,192,.14);
    --gold:#a8790a;
    --ink:rgba(234,243,246,.96);
    --ink2:rgba(255,255,255,.6);
    --panelT:rgba(255,255,255,.85);
    --panelT2:rgba(255,255,255,.75);
    --hudTop:rgba(234,243,246,.9);
    --barBg:rgba(21,48,60,.16);
    --goldSel:rgba(168,121,10,.14);
    --goldSelA:rgba(168,121,10,.08);
    --goldBrd:rgba(168,121,10,.45);
    --titleTop:#d6ebf3;
    --chipDiv:rgba(185,205,214,.5);
    --voteSel:rgba(0,0,0,.05);
    --warn:#b03a20;
    color-scheme:light;
  }
  /* icons drawn as data-URLs need their strokes recolored for daylight */
  html[data-theme="light"] .slot-card.locked1::after,html[data-theme="light"] .slot-card.locked2::after{
    background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2315303c" stroke-width="2.4"><rect x="5" y="11" width="14" height="9" rx="1.5"/><path d="M8 11 V7.5 a4 4 0 0 1 8 0 V11"/></svg>') center/contain no-repeat}
  html[data-theme="light"] .slot-card.battling::after{
    background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="%23a8790a" stroke-width="2.6" stroke-linecap="round"><line x1="5" y1="5" x2="19" y2="19"/><line x1="19" y1="5" x2="5" y2="19"/></svg>') center/contain no-repeat}
  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
  html,body{height:100%}
  body{background:var(--sea); color:var(--foam); font-family:var(--sans); overflow:hidden;
       -webkit-user-select:none; user-select:none; touch-action:manipulation;
       overscroll-behavior:none; -webkit-touch-callout:none}
  button{font-family:var(--sans)}
  .screen{position:fixed; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center}
  .screen.active{display:flex}
  .btn{font-size:15px; font-weight:700; letter-spacing:.12em; color:var(--sea);
    background:var(--foam); border:none; border-radius:999px; padding:14px 44px; cursor:pointer}
  .btn:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
  .btn.ghost{background:transparent; color:var(--foam); border:1px solid var(--line)}
  .btn.small{padding:8px 16px; font-size:12px; letter-spacing:.05em; white-space:nowrap}
  /* deck / per-slot settings — flat segmented rows: no gaps, dividers only */
  #screen-mypage,#screen-settings{gap:10px; padding:18px 14px; overflow-y:auto; justify-content:flex-start}
  #deck-list,#settings-list{display:flex; flex-direction:column; gap:0; width:min(100%,470px);
    border:1px solid var(--line); background:var(--panel2)}
  #settings-list .deck-row{padding:6px 6px 5px}
  .name-input{width:100%; font-size:12px; padding:6px 8px; border:1px solid var(--line);
    background:transparent; color:var(--foam); border-radius:0; outline:none}
  .name-input:focus{border-color:var(--gold)}
  #queue-name{width:min(70vw,260px); text-align:center; font-size:14px; letter-spacing:.06em}
  .deck-row{border-top:1px solid var(--line); padding:3px 6px 2px}
  .deck-row:first-child{border-top:none}
  .deck-row .nm{font-size:11.5px; font-weight:700; margin:1px 0}
  .demo-btn{margin-left:auto; width:32px; height:22px; border:1px solid var(--line); border-radius:0;
    background:transparent; color:var(--dim); display:flex; align-items:center; justify-content:center; cursor:pointer}
  .demo-btn svg{width:11px; height:11px}
  .demo-btn:active{color:var(--gold); border-color:var(--gold)}
  .chip-row{display:flex; gap:0; flex-wrap:nowrap; overflow-x:auto; align-items:stretch;
    margin:0; scrollbar-width:none; border-top:1px solid var(--chipDiv)}
  .chip-row:first-of-type{border-top:none}
  .chip-row::-webkit-scrollbar{display:none}
  .chip-label{font-size:9.5px; color:var(--dim); width:62px; min-width:62px; flex:0 0 auto;
    display:flex; align-items:center; letter-spacing:-.02em}
  .chip{font-size:11px; font-weight:600; padding:5px 4px; border-radius:0; white-space:nowrap;
    flex:1 0 auto; text-align:center; border:none; border-left:1px solid var(--line);
    background:transparent; color:var(--dim); cursor:pointer}
  .chip.sel{color:var(--gold); background:var(--goldSel)}
  .chip:active{color:var(--foam)}
  #slot-cfg{display:none; border:1px solid var(--goldBrd); padding:3px 6px 2px; background:var(--panel2)}
  #slot-cfg.show{display:block}
  #slot-cfg .nm{font-size:11.5px; font-weight:700; margin:1px 0}
  #slot-cfg .nm span{font-weight:400}
  /* ---- THE MAP: one continuous world. Sky above the title, the AI stage
     to the right, the ONLINE venue to the left. The camera travels; every
     destination already exists. Background is ONE gradient — no seams. ---- */
  #screen-title{overflow:hidden; display:none; touch-action:none}
  #screen-title.active{display:block}
  /* 5 columns wide: the stage and the venue sit TWO screens away, with an
     empty screen of open water between — the sideways trip has a journey */
  #map-world{position:absolute; left:0; top:0; width:500%; height:200%;
    transform:translate(-40%,-50%);
    transition:transform 1.02s cubic-bezier(.62,0,.16,1);
    background:linear-gradient(180deg,#03090f 0%, #071520 38%, var(--sea) 52%, var(--titleTop) 100%)}
  html[data-theme="light"] #map-world{
    background:linear-gradient(180deg,#b9d4e2 0%, #d3e6ef 38%, var(--sea) 52%, var(--titleTop) 100%)}
  #map-world.at-story{transform:translate(-40%,0)}
  #map-world.at-ai{transform:translate(-80%,-50%)}
  #map-world.at-online{transform:translate(0,-50%)}
  .map-cell{position:absolute; width:20%; height:50%; overflow:hidden;
    display:flex; flex-direction:column; align-items:center; justify-content:center}
  #cell-story{left:40%; top:0}
  #cell-online{left:0; top:50%}
  #cell-title{left:40%; top:50%}
  #cell-ai{left:80%; top:50%}
  /* soft local accents that BLEND with the shared gradient */
  #cell-ai::before{content:''; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(120% 90% at 50% 110%, rgba(18,48,63,.55) 0%, transparent 60%)}
  #cell-online::before{content:''; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(120% 90% at 50% -10%, rgba(14,44,62,.5) 0%, transparent 55%)}
  .map-top{position:absolute; top:14px; left:14px; z-index:5}
  .map-h2{font-weight:200; letter-spacing:.42em; font-size:19px; margin:6px 0 4px}
  .map-h2 i{font-style:normal; color:var(--gold)}
  #cell-story{justify-content:flex-start; padding-top:20px}
  #story-list{width:min(96%,470px)}
  #cell-ai{gap:22px}
  /* parallax: the title's pieces trail while the camera climbs */
  #cell-title .t-block,#cell-title .t-menu2,#cell-title .t-util{
    transition:transform 1.02s cubic-bezier(.62,0,.16,1)}
  #map-world.at-story #cell-title .t-block{transform:translateY(110px)}
  #map-world.at-story #cell-title .t-menu2{transform:translateY(155px)}
  #map-world.at-story #cell-title .t-util{transform:translateY(195px)}
  /* the menu: hero STORY, then VS AI / live-dotted ONLINE / SOLO as equal
     rectangles — four words, zero captions */
  .t-menu2{display:flex; flex-direction:column; gap:12px; width:min(74vw,280px); margin-top:26px}
  .mb{position:relative; border:1px solid var(--line); background:transparent; color:var(--foam);
    padding:14px 18px; cursor:pointer; text-align:center; font-family:var(--sans)}
  .mb b{font-size:16px; letter-spacing:.24em; font-weight:700}
  .mb.hero{border-color:var(--gold); background:var(--goldSel); padding:19px 18px}
  .mb.hero b{color:var(--gold); font-size:19px}
  .mb.hero::after{content:''; position:absolute; inset:0; border:1px solid var(--goldBrd);
    animation:heroPulse 2.4s ease-in-out infinite; pointer-events:none}
  @keyframes heroPulse{0%,100%{opacity:0;transform:scale(1)}50%{opacity:.8;transform:scale(1.015)}}
  .mb.online b::before{content:'●'; color:var(--p2); font-size:8px; vertical-align:3px; margin-right:8px}
  .t-util{display:flex; gap:18px; margin-top:24px; justify-content:center}
  .t-util button{background:none; border:none; color:var(--dim); font-size:10px;
    letter-spacing:.2em; cursor:pointer; font-family:var(--sans)}
  /* the logo letters cascade in on load */
  .t-line i{opacity:0; transform:translateY(12px); animation:tCas .55s cubic-bezier(.2,.8,.2,1) forwards}
  .t-line:nth-child(1) i:nth-child(1){animation-delay:.05s}
  .t-line:nth-child(1) i:nth-child(2){animation-delay:.11s}
  .t-line:nth-child(1) i:nth-child(3){animation-delay:.17s}
  .t-line:nth-child(1) i:nth-child(4){animation-delay:.23s}
  .t-line:nth-child(2) i:nth-child(1){animation-delay:.31s}
  .t-line:nth-child(2) i:nth-child(2){animation-delay:.37s}
  .t-line:nth-child(2) i:nth-child(3){animation-delay:.43s}
  .t-line:nth-child(2) i:nth-child(4){animation-delay:.49s}
  @keyframes tCas{to{opacity:1;transform:none}}
  /* the first visit: no menu at all — the sky is the only way */
  /* the sky is the destination, but never a cage: BACK stays visible */
  body.first-visit .t-menu2,body.first-visit .t-util{visibility:hidden}
  /* the entrance: ten instrument coins hurled onto the title from offstage —
     the SAME coins the game plays with (dark face, neutral ring, foam icon) */
  #tcoins{position:absolute; inset:0; pointer-events:none; z-index:2}
  .tcoin{position:absolute; width:38px; height:38px; margin:-19px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; color:var(--foam);
    border:2px solid #3b596b;
    background:radial-gradient(circle at 38% 32%, #1c3c4d, #0d2029 78%);
    box-shadow:0 2px 10px rgba(0,0,0,.45), inset 0 0 0 3px rgba(2,7,11,.2);
    transition:transform .4s cubic-bezier(.2,.75,.35,1)}
  html[data-theme="light"] .tcoin{border-color:#8aa3ae; color:var(--sea);
    background:radial-gradient(circle at 38% 32%, #ffffff, #dcebf1 78%)}
  .tcoin svg{width:20px; height:20px}
  /* speed streaks: the same gold stars for every trip — vertical to the
     sky, horizontal along the coast */
  #map-rise,#map-dash{position:absolute; inset:0; overflow:hidden; pointer-events:none;
    z-index:8; opacity:0; transition:opacity .14s}
  #map-rise.go,#map-dash.go{opacity:1}
  #map-rise i{position:absolute; top:-90px; width:2px; border-radius:2px;
    background:linear-gradient(rgba(232,242,245,0),rgba(255,246,200,.7))}
  #map-rise.go i{animation:mrFall linear infinite}
  #map-rise.down i{animation-direction:reverse;
    background:linear-gradient(rgba(255,246,200,.7),rgba(232,242,245,0))}
  @keyframes mrFall{to{transform:translateY(120vh)}}
  #map-dash i{position:absolute; left:-110px; height:2px; border-radius:2px;
    background:linear-gradient(90deg,rgba(232,242,245,0),rgba(255,246,200,.7))}
  #map-dash.go i{animation:mdSweep linear infinite}
  #map-dash.rev i{animation-direction:reverse;
    background:linear-gradient(90deg,rgba(255,246,200,.7),rgba(232,242,245,0))}
  @keyframes mdSweep{to{transform:translateX(130vw)}}
  /* the constellation */
  #story-sky-svg{width:100%; display:block; height:auto;
    max-height:calc(100vh - 130px)} /* short screens: shrink, never spill */
  .stc-star{fill:var(--foam); opacity:.14}
  .stc-star.s1{animation:stcTw 3.6s ease-in-out infinite}
  .stc-star.s2{animation:stcTw 5s 1.4s ease-in-out infinite}
  @keyframes stcTw{0%,100%{opacity:.06}50%{opacity:.4}}
  .stc-e{stroke:var(--line); stroke-width:.35; stroke-dasharray:.2 1.7; stroke-linecap:round}
  .stc-e.lit{stroke:var(--gold); opacity:.6}
  .stc-nd{cursor:pointer}
  .stc-nd.lock{opacity:.35; cursor:default}
  .stc-halo{fill:var(--goldSelA)}
  .stc-nd.open .stc-halo{animation:stcBr 2.6s ease-in-out infinite}
  .stc-nd.done .stc-halo,.stc-nd.lock .stc-halo{fill:none}
  @keyframes stcBr{0%,100%{opacity:.25}50%{opacity:1}}
  .stc-coin{fill:var(--panel2); stroke:var(--line); stroke-width:.45}
  .stc-nd.open .stc-coin{stroke:var(--goldBrd)}
  .stc-nd.done .stc-coin{fill:var(--goldSel); stroke:var(--gold)}
  .stc-nd.lock .stc-coin{stroke-dasharray:.9 1.1}
  .stc-num{font-family:var(--serif); font-size:6.4px; fill:var(--foam); text-anchor:middle}
  .stc-nd.open .stc-num,.stc-nd.done .stc-num{fill:var(--gold)}
  .stc-pip{fill:var(--line)} .stc-pip.on{fill:var(--gold)}
  .stc-nm{font-size:2.8px; fill:var(--dim); text-anchor:middle; letter-spacing:.06em}
  .stc-nd.done .stc-nm{fill:var(--gold)}
  /* level picker: pops at the TAP, three stars in a row */
  #lvl-pop{position:absolute; z-index:12; display:none; gap:6px;
    background:var(--panel2); border:1px solid var(--goldBrd); padding:7px}
  #lvl-pop.show{display:flex}
  #lvl-pop button{min-width:64px; padding:8px 6px; border:1px solid var(--line);
    background:transparent; color:var(--foam); font-size:12px; font-weight:600;
    cursor:pointer; font-family:var(--sans); display:flex; flex-direction:column;
    align-items:center; gap:2px}
  #lvl-pop button .star{font-size:11px; color:var(--line)}
  #lvl-pop button.done{border-color:var(--goldBrd)}
  #lvl-pop button.done .star{color:var(--gold)}
  /* the game-start CUT: ink + a breathing coin while the stage loads */
  /* the load cover is INK, nothing else — no ornaments on a breath-hold */
  #gload{position:fixed; inset:0; z-index:55; background:rgba(5,12,18,.97);
    display:none; opacity:0; transition:opacity .16s}
  #gload.show{display:block; opacity:1}
  /* the ONLINE venue: the crowd's edges only start breathing once the
     camera has settled — no pulse mid-travel */
  .mp-l,.mp-r{position:absolute; top:0; bottom:0; width:46px; pointer-events:none; opacity:0}
  .mp-l{left:0; background:linear-gradient(90deg,rgba(255,212,121,.18),transparent)}
  .mp-r{right:0; background:linear-gradient(-90deg,rgba(255,212,121,.18),transparent)}
  #map-world.at-online .mp-l{animation:mpPulse 2.2s ease-in-out 1.1s infinite}
  #map-world.at-online .mp-r{animation:mpPulse 2.2s ease-in-out 2.2s infinite}
  @keyframes mpPulse{0%,100%{opacity:.25}50%{opacity:1}}
  #queue{position:absolute; inset:0; display:none; z-index:4; background:transparent;
    flex-direction:column; align-items:center; justify-content:center; gap:18px}
  #queue.show{display:flex}
  .q-pulse{width:64px; height:64px; border-radius:50%; border:2px solid var(--p2);
    animation:qp 1.4s ease-out infinite}
  @keyframes qp{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.5);opacity:0}}
  .note{font-size:11px; color:var(--dim)}

  /* ---- title ---- */
  #screen-title{text-align:center}
  .t-eyebrow{font-size:11px; letter-spacing:.5em; color:var(--dim)}
  /* angular, minimal title */
  .t-block{text-align:left}
  /* both words justify to the same left/right edges — a perfect rectangle */
  .t-main{display:inline-flex; flex-direction:column; width:min(62vw,300px);
    font-size:clamp(34px,9vw,64px); font-weight:200; line-height:1.22;
    background:linear-gradient(100deg,var(--p1),var(--gold) 45%,var(--p2)); -webkit-background-clip:text;
    background-clip:text; color:transparent}
  /* 4 letters over 4 letters: each letter lives in an equal column, centered,
     so L/D, O/U, O/E, P/L line up on their center lines exactly */
  .t-line{display:flex}
  .t-line i{font-style:normal; flex:1; text-align:center}
  .t-rule{height:1px; background:var(--gold); margin-top:16px; opacity:.7}
  .btn-sq{font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.22em;
    color:var(--foam); background:transparent; border:1px solid var(--line);
    border-radius:0; padding:15px 18px; text-align:left; cursor:pointer}
  .btn-sq:active{background:var(--goldSelA); color:var(--gold)}
  .btn-sq:focus-visible{outline:1px solid var(--gold); outline-offset:-4px}
  /* help */
  #screen-help{overflow-y:auto; justify-content:flex-start; padding:26px 18px 46px}
  .help-wrap{width:min(100%,780px); display:flex; flex-direction:column; gap:14px}
  .help-title{font-weight:200; letter-spacing:.3em; font-size:20px; color:var(--foam);
    border-bottom:1px solid var(--gold); padding-bottom:12px}
  .help-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px}
  .help-sec{border:1px solid var(--line); background:var(--panel2); padding:14px 16px}
  .help-sec h3{font-size:11px; font-weight:700; letter-spacing:.34em; color:var(--gold)}
  .help-sec .sub{font-size:10.5px; color:var(--dim); letter-spacing:.14em; margin:2px 0 9px}
  .kv{display:flex; gap:10px; font-size:12.5px; line-height:1.85}
  .kv span:first-child{flex:0 0 88px; color:var(--dim); letter-spacing:.02em}
  .kv span:last-child{color:var(--foam)}
  .kv b{font-weight:700}
  .btn-sq.back-top{align-self:flex-start; padding:9px 24px; font-size:11px}

  /* ---- play ---- */
  #screen-play{justify-content:stretch; align-items:stretch}
  /* header stays visible on BOTH screens (play and picker) */
  /* the header is retired: information now washes over the sea itself */
  #hud{display:none}
  /* loop-position bar: always on top (visible over the picker too).
     color = state: 朱 while recording, grey while passing/previewing */
  #loopbar{position:absolute; top:0; left:0; right:0; height:4px; z-index:9;
    background:var(--barBg); pointer-events:none}
  #loopfill{height:100%; width:0%; background:var(--p1); transition:background .3s}
  .hud-row{display:flex; align-items:center; gap:10px; font-size:11.5px; color:var(--dim)}
  .inst-ico{display:flex; align-items:center; color:var(--dim); min-width:18px; min-height:18px}
  .inst-ico svg{width:18px; height:18px}
  .inst-ico.now{color:var(--p1)}
  .mini-label{font-size:8.5px; letter-spacing:.2em; color:var(--dim)}
  #audio-warn{color:var(--warn)}
  #fly1{margin-left:auto}

  /* ---- bottom bar: NOW / NEXT / THEN — press NEXT or THEN and flick
     through the radial menu; each level is a fresh flick from where the
     previous one resolved ---- */
  #bbar{position:absolute; left:50%; transform:translateX(-50%); bottom:84px; z-index:8;
    display:flex; gap:8px}
  .bb-slot{width:54px; padding:5px 0 6px; display:flex; flex-direction:column; align-items:center; gap:2px;
    border:1px solid var(--line); background:var(--panelT); border-radius:8px; touch-action:none;
    user-select:none; cursor:pointer}
  .bb-label{font-size:7.5px; letter-spacing:.18em; color:var(--dim)}
  .bb-ico{min-height:20px; display:flex; align-items:center; color:var(--foam)}
  .bb-ico svg{width:20px; height:20px}
  #bb-now{opacity:.8; cursor:default}
  #bb-now .bb-ico{color:var(--p1)}
  #radial{position:fixed; inset:0; z-index:11; display:none; pointer-events:none}
  #radial .r-item{position:absolute; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; border:1px solid var(--line);
    background:var(--panelT); color:var(--foam)}
  #radial .r-item svg{width:21px; height:21px}
  #radial .r-item.hot{border-color:var(--gold); color:var(--gold); background:var(--goldSel)}

  #strip{position:absolute; top:66px; left:12px; right:12px; height:56px; z-index:5; opacity:.85; pointer-events:none}

  /* the whole screen is the board: opponent bar / shared sea / your bar,
     all drawn on the stage canvas itself */
  #stagewrap{position:absolute; inset:0}
  #stage{position:absolute; inset:0; width:100%; height:100%; touch-action:none}

  #flip-btn{display:none}
  /* floating sheets for the board: settings (coin long-press) and messages */
  .board-sheet{position:absolute; left:50%; transform:translateX(-50%); bottom:70px; z-index:13;
    display:none; flex-wrap:wrap; gap:6px; justify-content:center; max-width:92vw}
  .board-sheet button{font-size:12px; padding:7px 14px; border:1px solid var(--line);
    background:var(--panel); color:var(--foam); border-radius:0; letter-spacing:.06em; cursor:pointer}
  .board-sheet button.warn{border-color:#8a3a2a; background:#2a1613; color:#ffb0a0}
  /* mid-performance instrument settings: a big panel of its own. The CURRENT
     value glows; the saved global default is only a faint underline. */
  #coin-cfg{position:absolute; left:50%; transform:translateX(-50%); bottom:70px; z-index:13;
    display:none; width:min(96vw,560px); border:1px solid var(--goldBrd); background:var(--panel2);
    padding:10px 12px 8px; box-shadow:0 8px 32px rgba(0,0,0,.5);
    max-height:calc(100% - 90px); overflow-y:auto}
  #coin-cfg .nm{font-size:15px; font-weight:700; margin:0 0 6px; display:flex; align-items:center; gap:7px}
  #coin-cfg .nm svg{width:18px; height:18px}
  #coin-cfg .cfg-row{display:flex; align-items:stretch; gap:8px; border-top:1px solid var(--line); padding:2px 0}
  #coin-cfg .cfg-label{flex:0 0 72px; font-size:12px; color:var(--dim); display:flex; align-items:center;
    letter-spacing:-.02em}
  #coin-cfg .cfg-opts{flex:1; display:flex; flex-wrap:wrap; min-width:0}
  #coin-cfg .cfg-chip{flex:1 0 auto; min-width:52px; min-height:44px; font-size:14px; font-weight:600;
    padding:6px 4px; position:relative; border:none; border-left:1px solid var(--line); border-radius:0;
    background:transparent; color:var(--dim); text-align:center; cursor:pointer;
    touch-action:none; user-select:none; -webkit-user-select:none}
  #coin-cfg .cfg-chip.base::after{content:''; position:absolute; left:50%; transform:translateX(-50%);
    bottom:5px; width:16px; height:2px; background:var(--gold); opacity:.3}
  #coin-cfg .cfg-chip.cur{color:var(--gold); background:var(--goldSel); font-weight:800}
  #coin-cfg .cfg-chip.off{opacity:.25}

  /* ---- the bottom BAR — from the right: METRO / NOW / NEXT / THEN / SOLO / ENDING.
     NEXT & THEN open the radial flick menu; SOLO slides up past mid-screen
     to propose; ENDING holds its long-press / fill / exit behaviours ---- */
  /* the DOM bar is RETIRED (the canvas board draws the bars now) but its
     elements stay for the JS that still toggles their classes */
  #bbar{position:absolute; left:0; right:0; bottom:0; height:60px; z-index:9;
    display:none; align-items:stretch; background:var(--panel2); border-top:1px solid var(--line)}
  #bbar>*{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    border:none; border-left:1px solid var(--line); border-radius:0; background:transparent;
    touch-action:none; user-select:none; cursor:pointer; color:var(--foam); position:relative; min-width:0}
  #bbar>*:first-child{border-left:none}
  .bb-label{font-size:8px; letter-spacing:.16em; color:var(--dim); pointer-events:none}
  .bb-ico{display:flex; align-items:center; color:var(--foam); min-height:20px; pointer-events:none}
  .bb-ico svg{width:20px; height:20px}
  .bb-slot.hot{background:var(--goldSel)}
  #bb-now{opacity:.8; cursor:default}
  #bb-now .bb-ico{color:var(--p1)}
  #metro-btn{color:var(--dim)}
  #metro-btn svg{width:22px; height:22px; pointer-events:none}
  #metro-btn.on{color:var(--gold)}
  #metro-btn.on .bb-label{color:var(--gold)}
  #metro-btn.armed{animation:mblink .8s infinite}
  #finish-btn{ /* the hold is visible: an orange fill sweeps left -> right */
    background:linear-gradient(90deg, rgba(255,154,98,.55), rgba(255,154,98,.55)) no-repeat left center transparent;
    background-size:0% 100%;
    transition:background-size .15s ease}
  #finish-btn.arm{background-size:100% 100%; transition:background-size .6s linear}
  #finish-btn.active{background-size:100% 100%; transition:none} /* stays filled until tapped off */
  #finish-btn.arm .bb-label,#finish-btn.active .bb-label{color:var(--foam)}
  /* tryout: the real stage, one instrument, one way home */
  #try-back{position:absolute; left:50%; transform:translateX(-50%); bottom:22px; z-index:8;
    display:none; padding:12px 26px; border-radius:999px; border:1px solid var(--line);
    color:var(--foam); font-size:12px; font-weight:700; letter-spacing:.14em; cursor:pointer;
    background:var(--panelT)}
  @keyframes mblink{0%,100%{color:var(--gold); border-color:var(--gold); opacity:1}50%{opacity:.35}}

  #perf-hint{position:absolute; bottom:20px; left:16px; z-index:6; font-size:11px; color:var(--dim);
    max-width:60%; pointer-events:none; line-height:1.8}
  #perf-hint b{color:var(--foam)}
  #chord-label{position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); z-index:6;
    font-family:var(--serif); font-size:48px; color:var(--foam); opacity:.9; pointer-events:none; display:none}
  #countdown{position:absolute; inset:0; display:none; align-items:center; justify-content:center;
    z-index:12; pointer-events:none; font-family:var(--serif); font-size:clamp(90px,24vw,150px);
    color:var(--foam); text-shadow:0 0 44px rgba(255,212,121,.55)}
  @keyframes cd-pop{from{transform:scale(1.5);opacity:0} 30%{opacity:1} to{transform:scale(1);opacity:.9}}

  /* dedicated single-line information strip */
  #info-line{font-size:11px; min-height:20px; margin-top:4px; color:var(--gold);
    padding:2px 8px; border-left:2px solid var(--line); background:var(--ink2);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  #info-line b{font-family:var(--mono)}
  /* pvp greeting chips — under the instrument cards, count-in only */
  #greet{display:none; flex-wrap:wrap; gap:6px; margin-top:10px; pointer-events:auto}
  #greet span{font-size:10.5px; padding:3px 10px; border:1px solid var(--line);
    color:var(--foam); cursor:pointer; background:var(--panelT2)}
  #greet span:active{color:var(--gold); border-color:var(--gold)}

  /* ---- spec panel (slides over) ---- */
  #spec{position:absolute; inset:0; z-index:7; background:var(--ink); backdrop-filter:blur(4px);
    transform:translateX(100%); transition:transform .22s cubic-bezier(.2,.7,.3,1);
    display:flex; flex-direction:column; padding:78px 16px 16px; gap:10px; overflow-y:auto}
  #spec.open{transform:translateX(0)}
  #spec h2{font-weight:300; letter-spacing:.25em; font-size:16px; color:var(--dim)}
  #spec-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:6px}
  .slot-card{position:relative; border:1px solid var(--line); border-radius:8px; padding:7px 9px 6px;
    background:var(--panel2); cursor:pointer; min-height:58px; text-align:left}
  .nm svg{width:14px; height:14px; flex:0 0 auto}
  .slot-card .nm,#slot-cfg .nm,.deck-row .nm{display:flex; align-items:center; gap:5px}
  .slot-card:focus-visible{outline:2px solid var(--gold)}
  .slot-card .nm{font-size:12.5px; font-weight:700}
  .slot-card .st{font-size:10px; color:var(--dim); margin-top:2px}
  .slot-card.own1{border-color:var(--p1); background:var(--p1s)}
  .slot-card.own2{border-color:var(--p2); background:var(--p2s)}
  .slot-card.sel{outline:2px solid var(--gold)}
  .slot-card.locked1::after,.slot-card.locked2::after{content:''; position:absolute; top:7px; right:9px;
    width:11px; height:11px; background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23e8f2f5" stroke-width="2.4"><rect x="5" y="11" width="14" height="9" rx="1.5"/><path d="M8 11 V7.5 a4 4 0 0 1 8 0 V11"/></svg>') center/contain no-repeat}
  .slot-card.battling::after{content:''; position:absolute; top:7px; right:9px;
    width:12px; height:12px; background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="%23ffd479" stroke-width="2.6" stroke-linecap="round"><line x1="5" y1="5" x2="19" y2="19"/><line x1="19" y1="5" x2="5" y2="19"/></svg>') center/contain no-repeat}
  .slot-card canvas{position:absolute; left:8px; right:8px; bottom:6px; width:calc(100% - 16px); height:10px; opacity:.9}
  .slot-card .vote-row{display:flex; gap:4px; margin:4px 0 12px}
  .vote-chip{flex:1; text-align:center; font-size:10.5px; font-weight:700; padding:5px 2px;
    border:1px solid var(--line); cursor:pointer}
  .vote-chip.v1{color:var(--p1)} .vote-chip.v2{color:var(--p2)}
  .vote-chip.sel{border-color:currentColor; background:var(--voteSel)}
  .spec-actions{display:flex; gap:8px; flex-wrap:wrap}
  .spec-actions button{flex:1; min-width:110px; font-size:12.5px; font-weight:700; padding:12px 8px;
    border-radius:8px; border:1px solid var(--line); background:var(--panel2); color:var(--foam); cursor:pointer}
  .spec-actions #btn-finish{border-color:var(--gold); color:var(--gold)}
  #spec .note{line-height:1.8}

  /* ---- result ---- */
  #screen-result{gap:18px; padding:30px 22px; overflow-y:auto; justify-content:center; z-index:20;
    background:linear-gradient(180deg,var(--titleTop) 0%, var(--sea) 60%)}
  #r-art{position:absolute; inset:0; width:100%; height:100%; opacity:.3; pointer-events:none}
  #screen-result>*:not(#r-art){position:relative; z-index:1}
  .r-eyebrow{font-size:11px; letter-spacing:.5em; color:var(--dim); margin-top:6px}
  #r-winner{font-weight:200; font-size:clamp(30px,8vw,52px); letter-spacing:.12em; text-align:center; line-height:1.3}
  #r-sub{color:var(--dim); font-size:13px}
  /* closing compliments (DUEL): picked from chips, shown to both */
  #r-greet{display:none; gap:6px; flex-wrap:wrap; justify-content:center}
  #r-greet span{font-size:11px; padding:4px 12px; border:1px solid var(--line);
    color:var(--foam); cursor:pointer; background:var(--panelT2)}
  #r-greet span:active{color:var(--gold); border-color:var(--gold)}
  #r-greet-msg{min-height:2px; font-size:12.5px; text-align:center; line-height:1.8}
  .r-table{width:min(100%,400px); border-collapse:collapse; font-size:13px}
  .r-table th,.r-table td{padding:7px 10px; border-bottom:1px solid var(--line); text-align:right; font-variant-numeric:tabular-nums}
  .r-table th{text-align:left; font-weight:500; color:var(--dim)}
  .c1{color:var(--p1)} .c2{color:var(--p2)}
  #r-slots{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; width:min(100%,400px); font-size:11px}
  #r-slots div{border:1px solid var(--line); border-radius:6px; padding:6px 8px}
  @media (prefers-reduced-motion: reduce){ *{animation-duration:.01s !important; transition-duration:.01s !important} }

  /* THE RESULT lives on the board: the piece loops on, coins rest, only
     messages still fly. The title wears the countdown's typeface. */
  #result-bar{position:absolute; left:50%; top:42%; transform:translate(-50%,-50%);
    display:none; flex-direction:column; align-items:center; gap:14px; z-index:11;
    text-align:center; pointer-events:none}
  #rb-title{font-family:var(--serif); font-weight:400; margin:0;
    font-size:clamp(36px,10vw,64px); color:var(--foam);
    text-shadow:0 0 34px rgba(255,212,121,.5);
    animation:cd-pop .8s ease-out}
  #rb-sub{font-size:13px; color:var(--dim)}
  #result-bar .rb-btns{display:flex; gap:10px; pointer-events:auto}

  /* the stage: DUEL levels stacked as wide rectangles (FREE PLAY's shape),
     one tap each. LV4's slot simply doesn't exist until the story grants it */
  #ai-choice{position:relative; z-index:3;
    display:flex; flex-direction:column; align-items:center; gap:10px}
  .ac-lab{font-size:13px; font-weight:700; letter-spacing:.34em; color:var(--gold);
    display:flex; flex-direction:column; align-items:center; gap:3px; margin-bottom:2px}
  .ac-lab span{font-size:10.5px; font-weight:400; letter-spacing:.14em; color:var(--dim)}
  #ai-choice button{width:min(72vw,300px); padding:12px 10px; font-size:15px; font-weight:700;
    letter-spacing:.22em; background:transparent; color:var(--foam); border:1px solid var(--line);
    cursor:pointer; display:flex; align-items:baseline; justify-content:center; gap:12px}
  #ai-choice button span{font-size:10.5px; font-weight:400; letter-spacing:.12em; color:var(--dim)}
  #ai-choice button.sel{border-color:var(--goldBrd); color:var(--gold)}
  #ai-choice .ac-lv.lv4{border-color:var(--gold); color:var(--gold);
    background:var(--goldSelA); box-shadow:0 0 18px rgba(255,212,121,.18)}
  #ai-choice .ac-lv.lv4 span{color:var(--gold); opacity:.75}
  /* the entrance: LV4 lands from below in a burst of gold */
  #ai-choice .ac-lv.reveal{animation:lv4in 1.1s cubic-bezier(.2,.9,.3,1.2) both}
  @keyframes lv4in{
    0%{opacity:0; transform:translateY(26px) scale(.86); box-shadow:0 0 0 rgba(255,212,121,0)}
    55%{opacity:1; box-shadow:0 0 46px rgba(255,212,121,.85)}
    100%{opacity:1; transform:none; box-shadow:0 0 18px rgba(255,212,121,.18)}}
  #ai-choice .ac-free{margin-top:8px; padding:17px 10px;
    font-size:16px; letter-spacing:.3em; flex-direction:column; gap:4px}

  /* ---- LOOP NEGOTIATION (Nego): 拍子/打点/テンポ ---- */
  /* the knobs ARE the game's coins: same face, same ring */
  .ng-coin,.ng-knob{border-radius:50%; border:2px solid #3b596b; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    color:var(--foam); font-weight:700; font-family:var(--sans);
    background:radial-gradient(circle at 38% 32%, #1c3c4d, #0d2029 78%);
    box-shadow:0 2px 10px rgba(0,0,0,.45), inset 0 0 0 3px rgba(2,7,11,.2)}
  html[data-theme="light"] .ng-coin,html[data-theme="light"] .ng-knob{
    border-color:#8aa3ae; color:var(--sea);
    background:radial-gradient(circle at 38% 32%, #ffffff, #dcebf1 78%)}
  .ng-coin.big{width:76px; height:76px; font-size:26px; font-weight:300}
  /* NOT a screen: the negotiation is furniture ON the play area. The board
     stays visible and alive underneath — only the widgets catch touches,
     so the message coin still flies between them. */
  /* the settings room's VEIL lives on the canvas (under bars/coins/words);
     this container only carries the widgets */
  #nego-screen{position:fixed; inset:0; z-index:42; display:none; flex-direction:column;
    background:none; pointer-events:none}
  #nego-screen.show{display:flex}
  #nego-screen .ng-track,#nego-screen .ng-bar{pointer-events:auto}
  .ng-top{padding:8px 16px 0; display:flex; align-items:center; justify-content:flex-end}
  /* the opponent's declaration: a plain gold OK — shown only while it stands */
  #nego-oppok{display:none; font-size:15px; font-weight:700; letter-spacing:.4em;
    color:var(--gold); border:1px solid var(--goldBrd); padding:6px 10px 6px 14px;
    text-shadow:0 0 14px rgba(255,212,121,.6)}
  #nego-score{display:block; width:100%; height:84px}
  .ng-sliders{flex:1; min-height:0; display:flex; justify-content:space-evenly; padding:6px 8px}
  .ng-col{display:flex; flex-direction:column; align-items:center; width:96px;
    background:rgba(7,21,32,.42); border:1px solid var(--line); border-radius:6px;
    padding-bottom:8px; margin:4px 0}
  html[data-theme="light"] .ng-col{background:rgba(220,235,241,.5)}
  .ng-nm{font-size:10px; letter-spacing:.34em; color:var(--dim); padding:6px 0 4px}
  .ng-track{position:relative; flex:1; width:72px; touch-action:none; cursor:pointer; min-height:0}
  .ng-track::before{content:''; position:absolute; top:10px; bottom:10px; left:50%;
    width:1px; background:var(--line)}
  .ng-dot{position:absolute; left:50%; width:3px; height:3px; margin:-1.5px;
    border-radius:50%; background:rgba(232,242,245,.3)}
  .ng-dot.mj{width:5px; height:5px; margin:-2.5px; background:rgba(232,242,245,.5)}
  .ng-lab{position:absolute; left:50%; margin-left:14px; transform:translateY(-50%);
    font-size:10px; color:var(--dim); pointer-events:none; font-variant-numeric:tabular-nums}
  .ng-knob{position:absolute; left:50%; width:46px; height:46px; margin:-23px;
    font-size:15px; z-index:2}
  #nego-screen.locked .ng-track{pointer-events:none}
  #nego-screen.locked .ng-knob{filter:saturate(.4) brightness(.7)}
  .ng-bar{display:flex; align-items:center; margin:6px 14px 10px}
  #nego-ok,.hng-ok{flex:1; height:60px; border:1px solid var(--goldBrd);
    background:rgba(7,21,32,.6);
    color:var(--gold); font-size:18px; font-weight:700; letter-spacing:.5em;
    text-indent:.5em; cursor:pointer; font-family:var(--sans);
    display:flex; align-items:center; justify-content:center}
  html[data-theme="light"] #nego-ok,html[data-theme="light"] .hng-ok{background:rgba(220,235,241,.7)}
  #nego-ok:active{background:var(--goldSelA)}
  #nego-screen.locked #nego-ok{background:var(--goldSelA);
    box-shadow:0 0 22px rgba(255,212,121,.25)}
  /* the REAL sheets (messages AND the exit apologies) surface above the
     negotiation widgets — same layer, same manners */
  body.nego-on #msg-sheet,body.nego-on #exit-sheet{z-index:46}
  /* ...and the big letters (Loop Settings) ride FRONTMOST, like Start! */
  body.nego-on #countdown{z-index:45}
  /* the room's TITLE: the same giant white letters as Start!, truly frontmost
     (its own body-level layer — no stacking-context traps) */
  #nego-title{position:fixed; inset:0; z-index:47; display:none; align-items:center;
    justify-content:center; pointer-events:none; font-family:var(--serif);
    font-size:clamp(38px,10vw,70px); color:var(--foam);
    text-shadow:0 0 44px rgba(255,212,121,.55)}
  #nego-title.show{display:flex; animation:cd-pop .5s ease-out forwards}
  /* opening focus: the three sliders introduce themselves */
  #nego-screen.focus .ng-col{animation:ngFocus 1.2s ease-in-out 2}
  @keyframes ngFocus{0%,100%{border-color:var(--line); box-shadow:none}
    50%{border-color:var(--gold); box-shadow:0 0 18px rgba(255,212,121,.35)}}
  #nego-msgsheet{position:absolute; left:0; right:0; bottom:0; z-index:5;
    background:var(--panelT); border-top:1px solid var(--goldBrd);
    padding:14px 14px calc(18px + env(safe-area-inset-bottom));
    transform:translateY(102%); transition:transform .25s}
  #nego-msgsheet.open{transform:none}
  #nego-msglist{display:grid; grid-template-columns:1fr 1fr; gap:9px}
  #nego-msglist button{border:1px solid var(--line); background:transparent; color:var(--foam);
    font-size:13px; letter-spacing:.04em; padding:13px 8px; cursor:pointer; font-family:var(--sans)}
  #nego-msglist button:active{border-color:var(--goldBrd); color:var(--gold)}

  /* the debug black box — summoned by tapping D,E,D,E on the logo */
  #dbg-box{position:fixed; top:6px; right:6px; z-index:60; max-width:46vw;
    font:9px/1.5 var(--mono); white-space:pre; color:var(--gold);
    background:var(--ink); border:1px solid var(--goldBrd); padding:5px 8px;
    cursor:pointer; pointer-events:auto; opacity:.88}
  #dbg-play{position:fixed; top:84px; right:6px; z-index:60; display:flex;
    flex-direction:column; gap:3px}
  #dbg-play button{font:9px var(--mono); color:var(--gold); background:var(--ink);
    border:1px solid var(--goldBrd); padding:4px 8px; cursor:pointer; opacity:.88}
  #dbg-play button.on{background:var(--goldSel)}

  html{overscroll-behavior:none}
  /* STORY: rectangular focus for DOM targets (e.g. a message choice) */
  .st-rect-focus{outline:2px solid rgba(255,232,154,.9); outline-offset:3px;
    border-radius:6px; animation:stRect 1s ease-in-out infinite}
  @keyframes stRect{0%,100%{outline-color:rgba(255,232,154,.95)}50%{outline-color:rgba(255,232,154,.25)}}

  /* ================= HELP dioramas (js/help.js) =================
     little living replicas of the board, built from the game's own
     proportions and colors. Animations pause off-screen. */
  .hs-wide{grid-column:1/-1}
  .hd{position:relative; overflow:hidden; border:1px solid var(--line); border-radius:6px;
    margin:4px 0 10px; height:150px;
    --hd-s1:hsl(200,45%,14%); --hd-s2:hsl(225,55%,6%); --hc-f1:#1c3c4d; --hc-f2:#0d2029;
    --hgold:#ffd479; --hred:#eb5f5a; --hwhite:rgba(255,255,255,.8);
    background:linear-gradient(180deg,var(--hd-s1),var(--hd-s2))}
  html[data-theme="light"] .hd{--hd-s1:hsl(200,42%,88%); --hd-s2:hsl(225,45%,74%); --hc-f1:#ffffff; --hc-f2:#dcebf1;
    --hgold:#a8790a; --hred:#d24a45; --hwhite:rgba(30,60,75,.7)}
  #screen-help .hd:not(.live) *{animation-play-state:paused!important}
  @media (prefers-reduced-motion:reduce){ #screen-help .hd *{animation:none!important} }
  .hb-stage{position:absolute; inset:0; z-index:2}
  /* --- the bar strip, real slot proportions --- */
  .hd .hbar{position:absolute; left:0; right:0; bottom:0; height:44px; display:flex;
    background:var(--panelT); border-top:1px solid var(--line); z-index:1}
  /* labels sit on the play-space edge (like the game draws them); glyphs
     ride the vertical center of the bar */
  .hd .hslot{position:relative; display:flex; align-items:center; justify-content:center}
  .hd .hslot label{position:absolute; top:3px; font-size:7px; font-weight:700;
    letter-spacing:.08em; color:var(--dim); pointer-events:none; z-index:2}
  .hd .hslot.hs-now label{font-weight:700}
  .hd .hglyph{margin:0; width:16px; height:16px; color:var(--dim)}
  .hd .hglyph svg{width:16px; height:16px}
  .hd .hmag{position:absolute; left:0; top:-30px; width:100%; height:74px;
    pointer-events:none; color:var(--foam)}
  .hd .hmag path{fill:currentColor; fill-opacity:.07; stroke:currentColor;
    stroke-opacity:.25; stroke-width:1; vector-effect:non-scaling-stroke}
  .hd .hslot.hdim label,.hd .hslot.hdim .hglyph{opacity:.3}
  .hd .hslot.hdim .hped{opacity:.4}
  /* pedestal centers sit ON the bar's top edge, real radii: NOW=1.45×coin,
     SOLO/ENDING=1.3×coin — a landed coin centers at exactly the same point */
  .hd .hped{position:absolute; top:-21px; left:50%; transform:translateX(-50%);
    width:42px; height:42px; border-radius:50%; border:1.5px solid}
  .hd .hp-now{width:46px; height:46px; top:-23px;
    border-color:rgba(255,154,98,.6); background:radial-gradient(circle,rgba(255,154,98,.18),transparent 70%)}
  .hd .hp-solo{border-color:rgba(255,212,121,.6); background:radial-gradient(circle,rgba(255,212,121,.18),transparent 70%)}
  .hd .hp-ending{border-color:rgba(235,95,90,.65); background:radial-gradient(circle,rgba(235,95,90,.2),transparent 70%)}
  /* --- coins --- */
  .hcoin{position:absolute; width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle at 35% 30%,var(--hc-f1),var(--hc-f2));
    border:2px solid var(--dim); color:var(--dim); box-shadow:0 1px 4px rgba(0,0,0,.25)}
  .hcoin::before{content:''; position:absolute; inset:2.5px; border-radius:50%;
    border:1px solid rgba(128,158,170,.28)} /* the coin's inner ring, like the game */
  .hcoin svg{width:18px; height:18px}
  .hcoin.r1{border-color:var(--p1); color:var(--p1); box-shadow:0 0 12px var(--p1s)}
  .hcoin.r2{border-color:var(--p2); color:var(--p2); box-shadow:0 0 12px var(--p2s)}
  /* --- fingers / effects --- */
  .hfinger{position:absolute; width:24px; height:24px; border-radius:50%;
    border:2px solid var(--hwhite); box-shadow:0 0 10px rgba(255,255,255,.3); opacity:0}
  /* ---------- BOARD mini (both bars, in full) ---------- */
  #hd-board{height:250px}
  .hb-mini{position:absolute; inset:0; display:flex; flex-direction:column}
  .hb-row{position:relative; height:44px; flex:0 0 44px}
  .hb-sea{position:relative; flex:1}
  .hb-cap{position:absolute; right:8px; font-size:9px; letter-spacing:.1em; color:var(--dim)}
  .hbc-t{top:6px} .hbc-m{top:50%; transform:translateY(-50%)} .hbc-b{bottom:6px}
  /* the opponent's bar: point-symmetric — mirrored order, pedestals DOWN */
  .hbar-opp{flex-direction:row-reverse; border-top:none; border-bottom:1px solid var(--line)}
  .hbar-opp .hslot label{top:auto; bottom:3px}
  .hbar-opp .hped{top:auto; bottom:-21px}
  .hbar-opp .hp-now{top:auto; bottom:-23px}
  .hbar-opp .hmag{top:auto; bottom:-30px; transform:scale(-1,-1)}
  .hb-sea .hcoin.dft1{left:12%; top:34%; animation:hdrift 7s ease-in-out infinite}
  .hb-sea .hcoin.dft2{left:36%; top:56%; animation:hdrift 8s 1.2s ease-in-out infinite}
  .hb-sea .hcoin.dft3{left:58%; top:30%; animation:hdrift 9s 0.6s ease-in-out infinite}
  .hb-sea .hcoin.dft4{left:76%; top:55%; animation:hdrift 7.5s 2s ease-in-out infinite}
  @keyframes hdrift{0%,100%{transform:translate(0,0)}50%{transform:translate(7px,-6px)}}
  /* ---------- BAR conveyor ---------- */
  #hd-bar{height:112px}
  .hb-loop{position:absolute; top:0; left:0; right:0; height:3px; background:var(--panel2)}
  .hb-loop i{display:block; height:100%; background:var(--hgold); animation:hloop 9s linear infinite}
  @keyframes hloop{0%{width:0}46%{width:100%}47%{width:0}93%{width:100%}94%,100%{width:0}}
  .hb-conv .hcoin{bottom:14px}
  .hb-conv .cvB{left:67.1%; transform:translateX(-50%); animation:hcvB 9s ease-in-out infinite}
  @keyframes hcvB{0%,42%{left:67.1%;bottom:14px;opacity:1}48%{left:50%;bottom:28px}
    94%{left:50%;bottom:28px;opacity:1}97%,100%{left:50%;bottom:28px;opacity:0}}
  .hb-conv .cvA{left:80.3%; transform:translateX(-50%); animation:hcvA 9s ease-in-out infinite}
  @keyframes hcvA{0%,42%{left:80.3%;opacity:1}48%{left:67.1%}94%{left:67.1%;opacity:1}97%,100%{left:67.1%;opacity:0}}
  .hrec{position:absolute; left:50%; bottom:24px; transform:translateX(-50%);
    width:40px; height:40px; border-radius:50%; border:2px solid var(--p1);
    opacity:0; animation:hrec 9s ease-in-out infinite}
  @keyframes hrec{0%,49%{opacity:0}55%{opacity:.9}70%{opacity:.4}85%{opacity:.9}93%,100%{opacity:0}}
  .hb-tagA{position:absolute; left:50%; bottom:58px; transform:translateX(-50%);
    font-size:9px; color:var(--p1); letter-spacing:.12em; opacity:0; animation:htag 9s infinite}
  @keyframes htag{0%,50%{opacity:0}56%,88%{opacity:1}94%,100%{opacity:0}}
  /* ---------- PLAY panes ---------- */
  #hd-play{height:auto; background:none; border:none; display:grid;
    grid-template-columns:repeat(3,1fr); gap:8px; overflow:visible}
  .hp-pane{display:flex; flex-direction:column; gap:3px}
  .hp-pane b{font-size:11px; color:var(--foam); margin-top:5px}
  .hp-pane>span{font-size:10px; color:var(--dim); line-height:1.5}
  .hp-sea{position:relative; height:110px; border:1px solid var(--line); border-radius:6px;
    overflow:hidden; background:linear-gradient(180deg,var(--hd-s1),var(--hd-s2))}
  .hp-tap .hfinger{left:50%; top:50%; margin:-12px; animation:htapf 2.2s ease-out infinite}
  @keyframes htapf{0%,8%{opacity:0;transform:scale(1.4)}14%{opacity:1;transform:scale(1)}30%{opacity:0}100%{opacity:0}}
  .hspark{position:absolute; left:50%; top:50%; width:5px; height:5px; margin:-2px;
    border-radius:50%; background:var(--hgold); opacity:0}
  .hp-tap .s1{animation:hsp1 2.2s ease-out infinite}
  .hp-tap .s2{animation:hsp2 2.2s ease-out infinite}
  .hp-tap .s3{animation:hsp3 2.2s ease-out infinite}
  @keyframes hsp1{0%,14%{opacity:0;transform:translate(0,0)}20%{opacity:1}45%{opacity:0;transform:translate(-16px,-20px)}100%{opacity:0}}
  @keyframes hsp2{0%,14%{opacity:0;transform:translate(0,0)}20%{opacity:1}45%{opacity:0;transform:translate(18px,-14px)}100%{opacity:0}}
  @keyframes hsp3{0%,14%{opacity:0;transform:translate(0,0)}20%{opacity:1}45%{opacity:0;transform:translate(2px,22px)}100%{opacity:0}}
  .hp-trace svg{position:absolute; inset:0; width:100%; height:100%}
  .htr-path{fill:none; stroke:rgba(255,236,160,.9); stroke-width:3; stroke-linecap:round;
    stroke-dasharray:210; stroke-dashoffset:210; animation:htr 3.2s ease-in-out infinite;
    filter:drop-shadow(0 0 4px rgba(255,236,160,.6))}
  @keyframes htr{0%,10%{stroke-dashoffset:210}70%{stroke-dashoffset:0}88%,100%{stroke-dashoffset:0;opacity:0}}
  .htr-f{offset-path:path('M14,78 C 48,18 84,96 136,38'); offset-distance:0%;
    animation:htrf 3.2s ease-in-out infinite; margin:-12px}
  @keyframes htrf{0%{offset-distance:0%;opacity:0}10%{opacity:1;offset-distance:0%}70%{offset-distance:100%;opacity:1}80%,100%{offset-distance:100%;opacity:0}}
  .hf-hold{left:50%; top:55%; margin:-12px; animation:hhf 3.5s ease-in-out infinite}
  @keyframes hhf{0%,6%{opacity:0}12%,80%{opacity:1}90%,100%{opacity:0}}
  .hripple{position:absolute; left:50%; top:55%; width:20px; height:20px; margin:-10px;
    border-radius:50%; border:2px solid rgba(255,236,160,.7); opacity:0}
  .rp1{animation:hrip 3.5s ease-out infinite}
  .rp2{animation:hrip 3.5s 1.1s ease-out infinite}
  @keyframes hrip{0%,12%{opacity:0;transform:scale(.4)}22%{opacity:.9}75%{opacity:0;transform:scale(3.4)}100%{opacity:0}}
  /* ---------- MESSAGE ---------- */
  #hd-msg{height:158px}
  .hm-f{animation:hmf 8s ease-in-out infinite}
  @keyframes hmf{0%,5%{opacity:0;left:34.2%;bottom:26px;transform:translateX(-50%)}
    9%{opacity:1}12%{transform:translateX(-50%) scale(.85)}15%{transform:translateX(-50%) scale(1)}
    22%{opacity:0}38%{opacity:0;left:34.2%;bottom:34px}42%{opacity:1}
    47%{bottom:86px;opacity:1}52%,100%{bottom:110px;opacity:0}}
  .hm-sheet{position:absolute; left:14%; bottom:56px; display:flex; gap:6px;
    opacity:0; animation:hmsheet 8s infinite}
  .hm-sheet i{font-style:normal; font-size:10px; padding:5px 10px; border:1px solid var(--line);
    border-radius:14px; background:var(--panelT); color:var(--foam)}
  .hm-sheet i:first-child{border-color:var(--goldBrd); color:var(--hgold)}
  @keyframes hmsheet{0%,15%{opacity:0}20%,30%{opacity:1}36%,100%{opacity:0}}
  .hm-coin{left:34.2%; bottom:28px; transform:translateX(-50%); border-color:var(--hgold);
    color:var(--hgold); opacity:0; animation:hmcoin 8s ease-in infinite}
  @keyframes hmcoin{0%,33%{opacity:0;bottom:28px}37%,42%{opacity:1;bottom:28px}
    50%{bottom:118px;opacity:.9;transform:translateX(-20%)}54%,100%{bottom:150px;opacity:0}}
  .hm-said{position:absolute; top:14px; left:0; right:0; text-align:center;
    font-size:15px; font-weight:200; color:var(--p2); opacity:0; animation:hmsaid 8s infinite}
  @keyframes hmsaid{0%,55%{opacity:0;transform:translateY(8px)}62%,86%{opacity:.95;transform:translateY(0)}94%,100%{opacity:0}}
  /* ---------- SOLO ---------- */
  #hd-solo{height:140px}
  .hso-coin{animation:hsoc 9s ease-in-out infinite}
  @keyframes hsoc{0%,12%{left:38%;top:28px;transform:none}
    20%,70%{left:93.4%;transform:translateX(-50%);top:80px}
    78%,100%{left:38%;top:28px;transform:none}}
  .hso-ring{position:absolute; left:93.4%; bottom:21px; transform:translateX(-50%);
    width:46px; height:46px; border-radius:50%; border:3px solid var(--hgold);
    box-shadow:0 0 14px rgba(255,212,121,.45); opacity:0; animation:hsor 9s infinite}
  @keyframes hsor{0%,20%{opacity:0}24%{opacity:1}27%{opacity:.25}30%{opacity:1}33%{opacity:.25}
    36%,68%{opacity:.95}76%,100%{opacity:0}}
  .hso-label{position:absolute; left:90%; bottom:66px; transform:translateX(-50%);
    font-size:11px; letter-spacing:.3em; color:var(--hgold); opacity:0; animation:hsol 9s infinite}
  @keyframes hsol{0%,34%{opacity:0}40%,66%{opacity:1}74%,100%{opacity:0}}
  /* ---------- ENDING ---------- */
  #hd-end{height:140px}
  .hen-coin{animation:henc 10s ease-in-out infinite}
  @keyframes henc{0%,8%{left:45%;top:26px;transform:none;opacity:1}
    16%,40%{left:9.2%;transform:translateX(-50%);top:80px;opacity:1}
    46%,100%{left:9.2%;transform:translateX(-50%);top:80px;opacity:0}}
  .hen-chip{position:absolute; left:0; right:0; text-align:center; font-weight:200;
    color:var(--foam); opacity:0}
  .hen-last{top:22px; font-size:17px; animation:henl 10s infinite}
  @keyframes henl{0%,20%{opacity:0}26%,42%{opacity:1}48%,100%{opacity:0}}
  .hen-exit{top:22px; font-size:17px; color:var(--hred); animation:hene 10s infinite}
  @keyframes hene{0%,76%{opacity:0}82%,94%{opacity:1}98%,100%{opacity:0}}
  .hen-f{left:9.2%; bottom:32px; margin-left:-12px; animation:henf 10s infinite}
  @keyframes henf{0%,52%{opacity:0}58%,78%{opacity:1}84%,100%{opacity:0}}
  .hen-rim{position:absolute; left:9.2%; bottom:22px; transform:translateX(-50%) rotate(-90deg);
    width:44px; height:44px}
  .hen-rim circle{fill:none; stroke:var(--hred); stroke-width:3.5;
    stroke-dasharray:107; stroke-dashoffset:107; animation:henrim 10s linear infinite}
  @keyframes henrim{0%,55%{stroke-dashoffset:107;opacity:0}58%{opacity:1}
    78%{stroke-dashoffset:0;opacity:1}84%,100%{stroke-dashoffset:0;opacity:0}}
  /* ---------- COINS AWAY (pinch) ---------- */
  #hd-bg{height:168px}
  .hbg-stage .ls{animation-duration:9s; animation-iteration-count:infinite; animation-timing-function:ease-in-out}
  .hbg-stage .dbg1{left:18%; top:22%; animation-name:hbgc}
  .hbg-stage .dbg2{left:44%; top:44%; animation-name:hbgc}
  .hbg-stage .dbg3{left:66%; top:18%; animation-name:hbgc}
  .hbg-stage .dbg4{left:82%; top:48%; animation-name:hbgc}
  @keyframes hbgc{0%,21%{opacity:1}27%,60%{opacity:.14}68%,100%{opacity:1}}
  .hbg-seat1{left:67.1%; bottom:12px; transform:translateX(-50%); top:auto}
  .hbg-seat2{left:80.3%; bottom:12px; transform:translateX(-50%); top:auto}
  .hbg-f1{left:50%; top:42%; margin:-12px 0 0 -18px; animation:hbgf1 9s ease-in-out infinite}
  .hbg-f2{left:50%; top:42%; margin:-12px 0 0 -6px; animation:hbgf2 9s ease-in-out infinite}
  @keyframes hbgf1{0%,13%{opacity:0;transform:translateX(0)}16%{opacity:1}
    21%{opacity:1;transform:translateX(-40px)}26%{opacity:0;transform:translateX(-44px)}
    54%{opacity:0;transform:translateX(-44px)}57%{opacity:1;transform:translateX(-44px)}
    62%{opacity:1;transform:translateX(0)}66%,100%{opacity:0;transform:translateX(0)}}
  @keyframes hbgf2{0%,13%{opacity:0;transform:translateX(0)}16%{opacity:1}
    21%{opacity:1;transform:translateX(40px)}26%{opacity:0;transform:translateX(44px)}
    54%{opacity:0;transform:translateX(44px)}57%{opacity:1;transform:translateX(44px)}
    62%{opacity:1;transform:translateX(0)}66%,100%{opacity:0;transform:translateX(0)}}
  /* ---------- AUDIENCE (the play screen's own anatomy) ---------- */
  #hd-aud{height:215px}
  .hau-glow{position:absolute; top:0; bottom:44px; width:34px; opacity:0;
    animation:hauGlow 12s ease-in-out infinite}
  .hau-glow.gl{left:0; background:linear-gradient(90deg,rgba(255,212,121,.22),rgba(255,212,121,0))}
  .hau-glow.gr{right:0; background:linear-gradient(270deg,rgba(255,212,121,.22),rgba(255,212,121,0))}
  @keyframes hauGlow{0%,6%{opacity:0}12%{opacity:1}22%{opacity:.55}32%{opacity:1}
    42%{opacity:.55}52%{opacity:1}58%,100%{opacity:0}}
  .hau-call{position:absolute; top:22%; left:4%; right:4%; text-align:center;
    font-size:12.5px; font-weight:700; color:var(--hgold); opacity:0;
    animation:hauCall 12s ease-in-out infinite}
  .hau-row{position:absolute; top:42%; left:14%; width:72%; height:26px; opacity:0;
    animation:hauCall 12s ease-in-out infinite}
  .hau-row line{stroke:rgba(255,212,121,.5); stroke-width:1}
  .hau-row circle{fill:var(--hgold); fill-opacity:.9}
  html[data-theme="light"] .hau-row line{stroke:rgba(168,121,10,.55)}
  @keyframes hauCall{0%,6%{opacity:0}11%,54%{opacity:1}59%,100%{opacity:0}}
  .hau-voice{position:absolute; top:7%; left:0; right:0; text-align:center;
    font-size:15px; font-weight:700; color:var(--hgold); opacity:0;
    animation:hauVoice 12s ease-out infinite}
  @keyframes hauVoice{0%,54%{opacity:0}57%,64%{opacity:1}76%,100%{opacity:0}}
  .hau-score{position:absolute; left:58.5%; bottom:47px; width:2em; height:14px;
    font-size:11px; font-weight:700; color:var(--hgold); opacity:.85}
  html[data-theme="light"] .hau-score{color:rgba(21,48,60,.75)}
  .hau-score i{position:absolute; left:0; top:0; font-style:normal}
  .hau-score .s1{animation:hauS1 12s infinite}
  .hau-score .s7{animation:hauS7 12s infinite}
  @keyframes hauS1{0%,56%{opacity:1}58%,100%{opacity:0}}
  @keyframes hauS7{0%,56%{opacity:0}58%,100%{opacity:1}}
  /* ---------- LOOP settings: the real ng-* widgets, miniature ---------- */
  #hd-nego{height:320px}
  .hng-real{position:absolute; inset:0; display:flex; flex-direction:column}
  .hng-score{position:relative; height:44px; flex:0 0 44px; margin-top:6px}
  .hng-sc{position:absolute; inset:0; width:100%; height:100%}
  .hng-sc line{stroke:rgba(255,212,121,.5); stroke-width:1}
  html[data-theme="light"] .hng-sc line{stroke:rgba(168,121,10,.55)}
  .hng-sc .sd{fill:var(--hgold); opacity:.5; animation:hsdp 2.4s linear infinite}
  @keyframes hsdp{0%{opacity:1}9%{opacity:.5}100%{opacity:.5}}
  .hng-sc4{animation:hscA 10s ease-in-out infinite}
  .hng-sc6{animation:hscB 10s ease-in-out infinite}
  @keyframes hscA{0%,38%{opacity:1}44%,84%{opacity:0}92%,100%{opacity:1}}
  @keyframes hscB{0%,38%{opacity:0}44%,84%{opacity:1}92%,100%{opacity:0}}
  #hd-nego .ng-sliders{padding:2px 6px}
  #hd-nego .ng-col{width:88px; pointer-events:none}
  #hd-nego .ng-knob{cursor:default; font-style:normal}
  .hng-prog{position:absolute; left:5%; bottom:2px; height:2px; width:0;
    background:rgba(255,240,180,.5); animation:hngp 2.4s linear infinite}
  @keyframes hngp{0%{width:0}100%{width:90%}}
  .hng-k2{animation:hkn 10s ease-in-out infinite}
  @keyframes hkn{0%,38%{top:var(--t4)}44%,84%{top:var(--t6)}92%,100%{top:var(--t4)}}
  .hng-k2 span{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
  .hng-k2 .k4{animation:hscA 10s ease-in-out infinite}
  .hng-k2 .k6{animation:hscB 10s ease-in-out infinite}
  .hng-ok{pointer-events:none; height:46px}
  #hd-nego .ng-bar{margin:6px 10px 10px}