/* リバーシボンバー
   Layout: instruments laid over a live 3D sea. Panels use the brass frame from the UI kit (img/ui/panel-frame.webp),
   the flight instruments are amber (img/ui/hud-*), the radar is teal (img/ui/radar-ring.webp). Line art from the kit is
   used as a CSS mask so it can take any colour. */
:root{
  --hull:#0e151a;
  --hull-a:rgba(13,20,25,.84);
  --hull-b:rgba(13,20,25,.6);
  --line:rgba(232,230,221,.16);
  --bone:#ebe8de;
  --dim:#a3afb3;
  --brass:#d6ab52;
  --brass-hi:#f0cc7a;
  --brass-ink:#1d1506;
  --amber:#ffb000;
  --amber-soft:rgba(255,176,0,.55);
  --hud:#7dff9c;              /* flight HUD lines: green, no shadows (like a real HUD) */
  --hud-soft:rgba(125,255,156,.5);
  --felt:#5fc189;
  --alarm:#f0604a;
  --teal:#36cfd7;
  --f-display:"Big Shoulders Stencil",Impact,"Arial Narrow",sans-serif;
  --f-num:"Archivo Narrow","Arial Narrow","Helvetica Neue",sans-serif;
  --f-jp:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--hull);color:var(--bone)}
body{overflow:hidden;font-family:var(--f-jp);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;overscroll-behavior:none;-webkit-text-size-adjust:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#app{position:fixed;inset:0;overflow:hidden}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation}
button:disabled{cursor:default;opacity:.45}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--brass-hi);outline-offset:2px}
a{color:inherit}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:.01em}
[hidden],.hidden{display:none!important}

/* brass panel: the kit's corner-tab frame as a 9-slice border, a dark glass fill set just inside it */
.frame{--fw:30px;position:relative;isolation:isolate;border:var(--fw) solid transparent}
.frame::before{content:"";position:absolute;inset:calc(var(--fw) * -.73);border-radius:calc(var(--fw) * .4);background:var(--hull-a);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:-1}
/* the frame art is 9-sliced so its corner tabs keep their shape at any size */
.frame::after{content:"";position:absolute;inset:calc(var(--fw) * -1);border:var(--fw) solid transparent;border-image:url(../img/ui/panel-frame.webp) 118 / var(--fw) / 0 stretch;pointer-events:none;z-index:1}
.stone{display:inline-block;width:26px;height:26px;border-radius:50%;flex:none;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),0 1px 2px rgba(0,0,0,.5)}
.stone.b{background:radial-gradient(circle at 35% 30%,#4a4d52,#0c0d0f 62%)}
.stone.w{background:radial-gradient(circle at 35% 30%,#ffffff,#d9d6cc 70%)}
/* line art from the kit, coloured with background-color */
.mask{-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;background:currentColor}

/* ---------- top bar ---------- */
#hud{position:absolute;inset:0;pointer-events:none}
#topbar{position:absolute;left:0;right:0;top:0;padding:calc(var(--sat) + 8px) calc(14px + var(--sar)) 22px calc(14px + var(--sal));display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:8px;background:linear-gradient(rgba(8,13,17,.8),rgba(8,13,17,.45) 60%,rgba(8,13,17,0))}
.sc{display:flex;flex-direction:column;gap:2px;min-width:0}
.sc.white{align-items:flex-end;text-align:right}
.sc .row{display:flex;align-items:center;gap:8px;min-width:0}
.sc.white .row{flex-direction:row-reverse}
.sc .cnt{font-family:var(--f-display);font-weight:800;font-size:40px;line-height:.9;min-width:1.2em;transition:color .3s}
.sc .cnt.up{color:var(--brass-hi)}
.sc .unit{font-size:11px;color:var(--dim);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#clockbox{display:flex;flex-direction:column;align-items:center;gap:6px}
#time{position:relative;font-weight:700;font-size:30px;line-height:1;letter-spacing:.02em;padding:6px 14px 2px;color:var(--bone);background:var(--hull-b);border-bottom:1px solid var(--hud-soft)}
#time::before{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:600 / 95;background:var(--hud);-webkit-mask:url(../img/ui/hud-arc-top.webp) center top/100% auto no-repeat;mask:url(../img/ui/hud-arc-top.webp) center top/100% auto no-repeat;opacity:.8}
#time.low{color:var(--alarm)}
#btn-menu{width:40px;height:30px;display:grid;place-items:center;border:1px solid var(--line);background:var(--hull-b);pointer-events:auto}
#btn-menu svg{width:18px;height:18px}

/* ---------- heading tape (aircraft) ---------- */
#htape{position:absolute;left:50%;top:calc(var(--sat) + 86px);width:240px;height:52px;margin-left:-120px;color:var(--hud);overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
#htape .tape{position:absolute;left:0;right:0;top:12px;height:20px;background:currentColor;-webkit-mask:url(../img/ui/hud-tape-h.webp) 0 0/40px 19.5px repeat-x;mask:url(../img/ui/hud-tape-h.webp) 0 0/40px 19.5px repeat-x;opacity:.85}
#htape .lbls span{position:absolute;top:0;transform:translateX(-50%);font:600 10px/1 var(--f-num);color:var(--hud);letter-spacing:.04em}
#htape .lbls span.c{font-size:11px;font-weight:700;color:#fff}
#htape .ptr{position:absolute;left:50%;top:31px;width:12px;height:9px;margin-left:-6px;--m:url(../img/ui/hud-ptr-h.webp);-webkit-mask:var(--m) top/100% auto no-repeat;mask:var(--m) top/100% auto no-repeat;background:var(--hud)}
#htape .val{position:absolute;left:50%;top:39px;transform:translateX(-50%);font-size:11px;font-weight:700;color:var(--hud)}

/* ---------- radar (minimap) ---------- */
#mini-wrap{position:absolute;right:calc(10px + var(--sar));top:calc(var(--sat) + 86px);width:140px;height:140px}
#mini{position:absolute;inset:9%;width:82%;height:82%;display:block;border-radius:50%}
#mini-wrap .ring{position:absolute;inset:0;background:url(../img/ui/radar-ring.webp) center/100% 100% no-repeat;opacity:.9}

/* ---------- battleship sub-monitor (drawn into the 3D canvas under this frame) ---------- */
#scope{position:absolute;right:calc(16px + var(--sar));top:calc(var(--sat) + 290px);width:220px;height:140px;border:10px solid transparent;border-image:url(../img/ui/corners.webp) 80 / 12px / 2px stretch;color:var(--amber)}
#scope b{position:absolute;left:4px;top:4px;font:700 10px/1 var(--f-jp);letter-spacing:.14em;background:rgba(0,0,0,.55);padding:3px 5px}
#scope span{position:absolute;right:4px;bottom:4px;font-size:11px;font-weight:700;background:rgba(0,0,0,.55);padding:2px 5px}
#scope i{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;--m:url(../img/ui/ret-box.webp);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;background:currentColor;opacity:.8}
#scope.hot{color:#ff6a4a}
#scope.hot b{animation:blink .5s steps(2) infinite}

/* ---------- sights that follow the impact point ---------- */
#marks{position:absolute;inset:0;overflow:hidden}
#sight{position:absolute;left:0;top:0;width:0;height:0;color:var(--hud);opacity:0;transition:opacity .15s;will-change:transform}
#sight.on{opacity:1}
#sight .ret{position:absolute;left:-40px;top:-40px;width:80px;height:80px;--m:url(../img/ui/ret-bomb.webp);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;background:currentColor}
#sight.ship .ret{--m:url(../img/ui/ret-ship.webp);left:-48px;top:-48px;width:96px;height:96px}
#sight.fighter .ret{--m:url(../img/ui/ret-box.webp);left:-30px;top:-30px;width:60px;height:60px;opacity:.75}
#sight .brk{position:absolute;top:-46px;width:22px;height:92px;--m:url(../img/ui/hud-bracket.webp);-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat;background:currentColor;display:none;transition:transform .08s linear}
#sight .brk.l{left:calc(-11px - var(--gap,40px))}
#sight .brk.r{left:calc(-11px + var(--gap,40px));transform:scaleX(-1)}
#sight.fighter .brk{display:block}
#sight .core{position:absolute;left:-26px;top:-26px;width:52px;height:52px;--m:url(../img/ui/ret-lock.webp);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;background:currentColor;display:none}
#sight.locked .core{display:block;animation:lockin .35s ease-out}
#sight.locked{color:#ffc64a}
#sight.wait{color:#9aa4a8}
#sight.no{color:#ff4a3a}
#sight.bridge{color:#ffc64a}
#sight .lab{position:absolute;left:0;top:46px;transform:translateX(-50%);font:700 12px/1 var(--f-num);letter-spacing:.12em;white-space:nowrap;color:currentColor}
@keyframes lockin{from{transform:scale(1.8);opacity:0}to{transform:scale(1);opacity:1}}
#foe,#foe-edge{position:absolute;left:0;top:0;width:0;height:0;color:#ff7a5c;opacity:0;transition:opacity .2s;will-change:transform}
#foe.on,#foe-edge.on{opacity:.95}
#foe i{position:absolute;left:-17px;top:-17px;width:34px;height:34px;--m:url(../img/ui/ret-foe.webp);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;background:currentColor}
#foe b,#foe-edge b{position:absolute;left:0;top:18px;transform:translateX(-50%);font:700 11px/1 var(--f-num);white-space:nowrap}
#foe-edge i{position:absolute;left:-9px;top:-9px;width:18px;height:18px;background:currentColor;clip-path:polygon(100% 50%,0 0,22% 50%,0 100%);transform:rotate(var(--a,0rad))}
#foe-edge b{top:12px}
#arcs i{position:absolute;top:50%;height:min(40vh,260px);aspect-ratio:120 / 788;transform:translateY(-50%);--m:url(../img/ui/hud-arc-side.webp);-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat;background:var(--hud);opacity:.35}
#arcs .l{left:calc(14% + var(--sal))}
#arcs .r{right:calc(14% + var(--sar));transform:translateY(-50%) scaleX(-1)}

/* ---------- pitch ladder and flight-path marker (aircraft): drawn from real directions, so they roll with the horizon ---------- */
#ladder{position:absolute;inset:0;overflow:hidden;pointer-events:none;color:var(--hud)}
#ladder .r{position:absolute;left:0;top:0;width:var(--w,190px);height:12px;margin:-6px 0 0 calc(var(--w,190px) / -2);transform-origin:50% 50%;opacity:.88}
#ladder .r::before,#ladder .r::after{content:"";position:absolute;top:5px;width:calc(50% - 26px);height:2px;background:currentColor}
#ladder .r::before{left:0}
#ladder .r::after{right:0}
#ladder .r.neg::before,#ladder .r.neg::after{background:repeating-linear-gradient(90deg,currentColor 0 7px,transparent 7px 12px)}
#ladder .r.zero{--w:min(70vw,520px);opacity:.55}
#ladder .r.zero::before,#ladder .r.zero::after{width:calc(50% - 40px)}
#ladder .r b{position:absolute;top:-2px;font:700 12px/1 var(--f-num);letter-spacing:.04em}
#ladder .r b.a{left:-22px}
#ladder .r b.b{right:-22px}
#ladder .r.pos i,#ladder .r.neg i{position:absolute;top:5px;width:2px;height:7px;background:currentColor}
#ladder .r.neg i{top:-2px}
#ladder .r i.a{left:0}
#ladder .r i.b{right:0}
#fpm{position:absolute;left:0;top:0;width:34px;height:16px;margin:-8px 0 0 -17px;pointer-events:none;color:var(--hud);opacity:0}
#fpm.on{opacity:.95}
#fpm::before{content:"";position:absolute;left:11px;top:2px;width:10px;height:10px;border:2px solid currentColor;border-radius:50%}
#fpm::after{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:linear-gradient(90deg,currentColor 0 10px,transparent 10px 24px,currentColor 24px)}

/* ---------- messages ---------- */
#banner{position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);padding:4px 22px 6px;text-align:center;max-width:calc(100% - 24px);min-width:220px}
#banner.frame{--fw:16px}
#banner .a{font-weight:700;font-size:22px;letter-spacing:.08em}
#banner .b{font-size:12px;color:var(--dim);margin-top:4px}
#flash{position:absolute;left:50%;top:calc(var(--sat) + 140px);transform:translateX(-50%);display:flex;align-items:baseline;gap:10px;padding:6px 16px;font-weight:700;font-size:14px;letter-spacing:.06em;text-shadow:0 0 2px rgba(0,0,0,.95),0 1px 4px rgba(0,0,0,.8);opacity:0;transition:opacity .25s;white-space:nowrap}
#flash b{font:700 20px/1 var(--f-num);letter-spacing:.2em}
#flash.on{opacity:1}
#flash.bad{color:#ff9a86}
#flash.good{color:var(--felt)}
#aa{position:absolute;left:50%;top:calc(var(--sat) + 172px);transform:translateX(-50%);padding:4px 12px 3px;font:700 14px/1 var(--f-num);letter-spacing:.22em;color:var(--alarm);border:1px solid var(--alarm);background:rgba(60,10,6,.55);opacity:0;transition:opacity .2s}
#aa.on{opacity:1;animation:blink .5s steps(2) infinite}
@keyframes blink{50%{opacity:.45}}
#hint{position:absolute;left:50%;bottom:calc(var(--sab) + 150px);transform:translateX(-50%);width:min(460px,calc(100% - 24px));padding:2px 6px;border:14px solid transparent;border-image:url(../img/ui/corners.webp) 80 / 14px / 0 stretch;background:rgba(13,20,25,.78) padding-box;font-size:12px;line-height:1.75;color:var(--bone);transition:opacity .6s}
#hint b{color:var(--brass-hi)}
/* radio subtitles: short Japanese under the controller's call, like a film */
#sub{position:absolute;left:50%;bottom:calc(var(--sab) + 138px);transform:translateX(-50%);max-width:min(620px,calc(100% - 32px));display:flex;align-items:baseline;gap:10px;padding:6px 14px;font-size:16px;font-weight:700;line-height:1.5;color:#fff;text-shadow:0 0 2px rgba(0,0,0,.95),0 1px 4px rgba(0,0,0,.8);white-space:nowrap}
#sub b{flex:none;text-shadow:none;font:700 11px/1 var(--f-jp);letter-spacing:.12em;color:var(--hull);background:var(--amber);padding:2px calc(6px - .12em) 3.5px 6px}
#sub span{overflow:hidden;text-overflow:ellipsis}
#sub.foe b{background:var(--alarm);color:#fff}
#sub.foe span{color:#ffd9d2}
#hold{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;padding:14px 20px;background:rgba(8,13,17,.85);border:1px solid var(--line);font-size:13px;line-height:1.6}
.spin{display:inline-block;width:28px;height:28px;flex:none;--m:url(../img/ui/spin-ring.webp);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;background:var(--teal);animation:spin 1.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#floats{position:absolute;inset:0;overflow:hidden}
#floats span{position:absolute;transform:translate(-50%,-100%);font:700 15px/1 var(--f-jp);padding:3px 6px;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.8)}
/* battle log: no coloured left rule, a dot for the side and a tint for good or bad news */
#log{position:absolute;left:calc(12px + var(--sal));top:calc(var(--sat) + 86px);width:min(44vw,230px);display:flex;flex-direction:column;gap:3px;pointer-events:none}
#log div{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;line-height:1.3;padding:3px 8px;background:rgba(13,20,25,.6);transition:opacity .5s;text-shadow:0 1px 2px rgba(0,0,0,.6)}
#log div i{width:10px;height:10px;border-radius:50%;flex:none}
#log div i.b{background:#0c0d0f;box-shadow:0 0 0 1px rgba(232,230,221,.5)}
#log div i.w{background:#f1eee6}
#log div.good{background:rgba(30,70,48,.62)}
#log div.bad{background:rgba(80,24,18,.62);color:#ffd2c8}
#log div.miss{color:var(--dim)}
#pull{position:absolute;left:50%;top:58%;transform:translateX(-50%);padding:5px 16px 4px;font:700 20px/1 var(--f-num);letter-spacing:.24em;color:var(--alarm);border:1.5px solid var(--alarm);background:rgba(60,10,6,.5);opacity:0}
#pull.on{opacity:1;animation:blink .35s steps(2) infinite}

/* ---------- controls ---------- */
.zone{position:absolute;bottom:0;top:calc(var(--sat) + 240px);pointer-events:auto;touch-action:none}
#zoneL{left:0;width:50%}
#zoneR{right:0;width:50%}
.stick{position:absolute;width:128px;height:128px;margin:-64px 0 0 -64px;border-radius:50%;border:2px solid rgba(255,176,0,.3);background:radial-gradient(circle,rgba(13,20,25,.35),rgba(13,20,25,.15));pointer-events:none;transition:opacity .2s}
.stick i{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(255,176,0,.28);border:2px solid var(--amber)}
.stick.idle{opacity:.45}
.stick .lab{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:6px;font-size:11px;color:var(--dim);white-space:nowrap}
#act{position:absolute;right:calc(18px + var(--sar));bottom:calc(var(--sab) + 22px);width:108px;height:108px;border-radius:50%;pointer-events:auto;touch-action:none;display:grid;place-items:center;font-weight:700;font-size:21px;letter-spacing:.1em;color:var(--brass-hi);background:radial-gradient(circle,rgba(214,171,82,.22),rgba(13,20,25,.86) 70%)}
#act .gauge{position:absolute;inset:-10px;--m:url(../img/ui/gauge-ring.webp);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;background:var(--brass);opacity:.28;transition:opacity .2s}
#act.ready .gauge{opacity:.6;animation:spin 8s linear infinite}
#act svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
#act .ring-bg{fill:none;stroke:rgba(232,230,221,.18);stroke-width:5}
#act .ring{fill:none;stroke:var(--brass-hi);stroke-width:5;stroke-linecap:butt}
#act.ready{color:#fff;background:radial-gradient(circle,rgba(240,204,122,.5),rgba(214,171,82,.25) 70%)}
#act.stun{color:var(--alarm)}
#act .pips{position:absolute;top:22px;left:0;right:0;display:flex;justify-content:center;gap:5px}
#act .pips i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--brass-hi);background:transparent}
#act .pips i.on{background:var(--brass-hi)}
#act .sub{position:absolute;bottom:20px;left:0;right:0;text-align:center;font-size:10px;letter-spacing:.04em;font-weight:700}
/* altitude tape (aircraft): the kit's ruler scrolls past a fixed pointer */
#altg{position:absolute;left:calc(14px + var(--sal));bottom:calc(var(--sab) + 190px);width:76px;height:150px;pointer-events:none;color:var(--hud)}
#altg .tape{position:absolute;left:0;top:0;width:20px;height:100%;background:currentColor;-webkit-mask:url(../img/ui/hud-tape-v.webp) 0 0/20px 41px repeat-y,linear-gradient(transparent,#000 18%,#000 82%,transparent);-webkit-mask-composite:source-in;mask:url(../img/ui/hud-tape-v.webp) 0 0/20px 41px repeat-y,linear-gradient(transparent,#000 18%,#000 82%,transparent);mask-composite:intersect;opacity:.85}
#altg .ptr{position:absolute;left:20px;top:50%;width:54px;height:24px;margin-top:-12px;--m:url(../img/ui/hud-ptr-v.webp);background:none}
#altg .ptr::before{content:"";position:absolute;inset:0;-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat;background:var(--hud)}
#altg .ptr span{position:absolute;left:17px;right:2px;top:0;bottom:0;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--hud)}
#altg .cmd{position:absolute;left:12px;width:12px;height:2px;background:var(--bone);margin-top:-1px;opacity:.75;top:50%}
#altg .s{position:absolute;left:0;bottom:-20px;font-size:12px;font-weight:600;color:var(--bone);white-space:nowrap;opacity:.85}
#thr{position:absolute;right:calc(30px + var(--sar));bottom:calc(var(--sab) + 152px);width:56px;height:156px;pointer-events:auto;touch-action:none}
#thr .track{position:absolute;left:24px;top:8px;bottom:8px;width:8px;border:1px solid var(--line);background:linear-gradient(rgba(240,96,74,.35),rgba(214,171,82,.25) 50%,rgba(95,193,137,.25))}
#thr .tick{position:absolute;left:16px;width:24px;height:1px;background:rgba(232,230,221,.35)}
#thr .knob{position:absolute;left:6px;width:44px;height:16px;margin-top:-8px;border:2px solid var(--brass-hi);background:rgba(13,20,25,.75)}
#thr .knob::after{content:"";position:absolute;left:6px;right:6px;top:5px;height:2px;background:var(--brass-hi)}
#thr .lab{position:absolute;left:50%;top:100%;transform:translateX(-50%);font-size:11px;color:var(--dim);white-space:nowrap}
#thr.ship .track{background:linear-gradient(rgba(95,193,137,.3),rgba(214,171,82,.2) 70%,rgba(240,96,74,.3))}
#thr.ship .tick{left:10px;width:36px;height:2px;background:rgba(232,230,221,.6)}
#rollg{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--sab) + 18px);width:112px;pointer-events:none;text-align:center}
#rollg svg{width:100%;height:auto;display:block}
#rollg .lab{font-size:11px;color:var(--dim)}
#rollg .lab b{font:600 13px var(--f-num);color:var(--bone)}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:manipulation}
#title{display:flex;align-items:flex-start;background:linear-gradient(90deg,rgba(8,13,17,.88) 0%,rgba(8,13,17,.55) 48%,rgba(8,13,17,0) 75%)}
#title .in{margin-top:auto;padding:calc(var(--sat) + 24px) 28px calc(var(--sab) + 26px);max-width:580px;display:flex;flex-direction:column;gap:18px}
.logo{display:flex;flex-direction:column;gap:6px}
.logo .en{font-family:var(--f-display);font-weight:800;font-size:clamp(60px,14vw,118px);line-height:.82;letter-spacing:.015em}
.logo .en span{display:block}
.logo .en span+span{color:var(--brass-hi)}
.logo .rule{display:flex;align-items:center;gap:12px;margin-top:10px}
.logo .rule i{flex:1;height:9px;--m:url(../img/ui/rule-line.webp);-webkit-mask:var(--m) left center/auto 100% no-repeat;mask:var(--m) left center/auto 100% no-repeat;background:var(--brass)}
.logo .jp{font-weight:700;font-size:21px;letter-spacing:.32em}
.lede{font-size:14px;line-height:1.75;color:var(--bone);max-width:34em;margin:0}
.opts{display:flex;flex-direction:column;gap:9px}
.opt{display:grid;grid-template-columns:5em 1fr;align-items:center;gap:10px}
.opt>span{font-size:12px;color:var(--dim);font-weight:700}
.seg{display:flex;border:1px solid var(--line)}
.seg button{flex:1;padding:8px 6px;font-size:13px;font-weight:700;border-right:1px solid var(--line);background:rgba(255,255,255,.03);line-height:1.25;min-height:44px}
.seg button:last-child{border-right:0}
.seg button small{display:block;font-size:10px;font-weight:500;color:var(--dim)}
.seg button[aria-pressed="true"]{background:rgba(214,171,82,.18);color:var(--brass-hi);box-shadow:inset 0 -2px 0 var(--brass)}
.seg button[aria-pressed="true"] small{color:var(--bone)}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.btn-go{flex:1 1 160px;min-height:50px;background:var(--brass);color:var(--brass-ink);font-weight:700;font-size:17px;letter-spacing:.12em;border:1px solid var(--brass-hi);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.btn-go:hover{background:var(--brass-hi)}
.btn-sub{min-height:50px;padding:0 16px;border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--bone);background:rgba(255,255,255,.05)}
.btn-sub:hover{border-color:var(--brass)}
.btn-sub.small{min-height:34px;padding:0 10px;font-size:12px}
.btn-sub.copied{color:var(--felt);border-color:var(--felt)}
.foot{font-size:12px;color:var(--dim);display:flex;justify-content:space-between;gap:10px;align-items:center}
.foot a{color:var(--dim);text-underline-offset:3px}
.foot{flex-wrap:wrap}
.foot .toggles{display:flex;gap:8px}
.foot .links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 16px}
.foot .links a,.credit a{padding:10px 0;margin:-10px 0;touch-action:manipulation}
.credit{margin:-6px 0 0;font-size:11px;color:var(--dim);opacity:.8}
.credit a{color:inherit;text-underline-offset:3px}
.credit .bar{margin:0 .3em}
.nojs{position:fixed;inset:auto 16px 40% 16px;z-index:3;margin:0;text-align:center;font-size:15px;line-height:1.8;color:var(--bone)}
.nojs a{color:var(--brass-hi)}
.icon-btn{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--dim);padding:6px 8px;border:1px solid var(--line);min-height:36px}
.icon-btn svg{width:16px;height:16px}
.sheet{min-height:100%;display:grid;place-items:center;background:rgba(6,10,13,.72);padding:calc(var(--sat) + 24px) 16px calc(var(--sab) + 24px)}
.sheet .card{width:min(640px,100%);padding:6px 4px 4px;display:flex;flex-direction:column;gap:16px}
.sheet h2{margin:0;font-weight:700;font-size:22px;letter-spacing:.08em;color:var(--brass-hi)}
.txt{margin:0;font-size:13px;line-height:1.8}
.txt b{color:var(--brass-hi)}
.rules{display:grid;gap:14px}
.rule-item{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:start}
.rule-item svg{width:52px;height:40px;color:var(--brass-hi)}
.rule-item h3{margin:0 0 3px;font-size:15px;font-weight:700}
.rule-item p{margin:0;font-size:13px;line-height:1.75;color:var(--bone)}
.rule-item p b{color:var(--brass-hi)}
.keys{font-size:12px;color:var(--dim);line-height:1.8;border-top:1px solid var(--line);padding-top:12px}
#menu-h,#menu-note{text-align:center}
.menu-list{display:flex;flex-direction:column;gap:8px}
.menu-list button{min-height:48px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-weight:700;font-size:15px}
.menu-list button:hover{border-color:var(--brass)}
/* the three kinds of sound: lit = playing */
.menu-list .seg.mix button{min-height:52px;border:0;border-right:1px solid var(--line);font-size:14px}
.menu-list .seg.mix button:last-child{border-right:0}
.menu-list .seg.mix button[aria-pressed="false"]{color:var(--dim);text-decoration:line-through;text-decoration-thickness:1.5px}
.menu-note{margin:-6px 0 0;font-size:12px;color:var(--dim)}
#result .big{font-family:var(--f-display);font-weight:800;font-size:clamp(60px,17vw,110px);letter-spacing:.03em;line-height:.86}
#result .big.lose{color:var(--dim)}
#result .big.win{color:var(--brass-hi)}
#result .final{display:flex;align-items:center;gap:14px;font-family:var(--f-display);font-weight:800;font-size:52px;line-height:1}
#result .final .stone{width:34px;height:34px}
#result .final .vs{font-family:var(--f-jp);font-size:14px;color:var(--dim);font-weight:500}
.stats{width:100%;border-collapse:collapse;font-size:13px}
.stats th,.stats td{padding:7px 4px;border-bottom:1px solid var(--line);text-align:right}
.stats th:first-child,.stats td:first-child{text-align:left;color:var(--dim);font-weight:500}
.stats thead th{font-size:12px;color:var(--dim);font-weight:700}
.stats thead th small{font-weight:500}
.stats td{font-family:var(--f-num);font-size:16px;font-weight:600}
#loading{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:16px;background:var(--hull);z-index:5;transition:opacity .6s}
#loading .l{font-family:var(--f-display);font-size:28px;letter-spacing:.1em;color:var(--dim);text-align:center;padding:0 20px}
#loading .spin{width:36px;height:36px;justify-self:center}
/* after loading: one click (tap) opens the title, and starts its music when sound is on (GAME_AUDIO_RULES.md 2.1) */
#loading .gate{display:grid;gap:14px;justify-items:center;margin-top:6px}
#loading .gate[hidden]{display:none}
#btn-gate{flex:none;min-width:240px;padding:0 28px;animation:gatePulse 1.6s ease-in-out infinite}
@keyframes gatePulse{50%{filter:brightness(1.15)}}
@media (prefers-reduced-motion:reduce){#btn-gate{animation:none}}

/* ---------- online ---------- */
.net{gap:14px}
/* the setup and the lobby are blocks inside the card: give their rows the same rhythm as the card */
#netSetup,#netLobby{display:grid;gap:12px}
#netSetup .btn-go{flex:none;width:100%}
.net-or{margin:6px 0 -4px}
.net-status:empty{display:none}
/* a button that sits alone in a column card keeps its own height (flex-basis would stretch it) */
.card > .btn-go{flex:none}
#btn-howto-close{align-self:center;min-width:min(240px,100%);padding:0 36px}
.net-field{display:grid;gap:6px;font-size:12px;color:var(--dim);font-weight:700}
.net input{font:700 16px var(--f-jp);color:var(--bone);background:rgba(255,255,255,.06);border:1px solid var(--line);padding:10px 12px;min-height:46px;width:100%;-webkit-user-select:text;user-select:text}
.net input:focus{border-color:var(--brass)}
.net-or{font-size:12px;color:var(--dim)}
.net-join{display:flex;gap:8px}
.net-join input{flex:1;font-family:var(--f-num);letter-spacing:.3em;text-transform:uppercase}
.net-code{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--dim)}
.net-code b{font-size:30px;letter-spacing:.24em;color:var(--brass-hi)}
.net-players{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.net-p{display:flex;align-items:center;gap:10px;min-width:0;padding:10px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.net-p div{min-width:0;display:flex;flex-direction:column;gap:2px}
.net-p b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.net-p small{font-size:11px;color:var(--dim)}
.net-p .stone{width:22px;height:22px}
/* narrow phones: the two player cards one above the other, so names and states are not cut */
@media (max-width:520px){ .net-players{grid-template-columns:1fr;gap:6px} .net-vs{justify-self:center;font-size:18px;line-height:1} .net-p small{white-space:normal} }
#netMe .stone{background:radial-gradient(circle at 35% 30%,#4a4d52,#0c0d0f 62%)}
#netThem .stone{background:radial-gradient(circle at 35% 30%,#ffffff,#d9d6cc 70%)}
.guest #netMe .stone{background:radial-gradient(circle at 35% 30%,#ffffff,#d9d6cc 70%)}
.guest #netThem .stone{background:radial-gradient(circle at 35% 30%,#4a4d52,#0c0d0f 62%)}
.net-vs{font-family:var(--f-display);font-size:22px;color:var(--dim)}
.net-status{margin:0;min-height:1.6em;font-size:13px;line-height:1.6;white-space:pre-line;color:var(--bone)}
.net-status.wait::before{content:"";display:inline-block;width:16px;height:16px;margin-right:8px;vertical-align:-3px;-webkit-mask:url(../img/ui/spin-ring.webp) center/contain no-repeat;mask:url(../img/ui/spin-ring.webp) center/contain no-repeat;background:var(--teal);animation:spin 1.4s linear infinite}
.net-note{margin:0;font-size:11px;color:var(--dim)}
.net-check{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;min-height:44px}
.net-check input{width:20px;height:20px;accent-color:var(--brass)}
#netConsent,#confirm{z-index:4}

@media (max-width:759px){
  #act{width:96px;height:96px;right:calc(14px + var(--sar));bottom:calc(var(--sab) + 18px)}
  #thr{right:calc(34px + var(--sar));bottom:calc(var(--sab) + 140px);height:140px}
  #title{background:linear-gradient(rgba(8,13,17,.15) 0%,rgba(8,13,17,.4) 26%,rgba(8,13,17,.9) 55%)}
  #title .in{padding-left:20px;padding-right:20px;gap:14px}
  #mini-wrap{width:118px;height:118px}
  #htape{width:180px;margin-left:-90px}
  #arcs{display:none}
  #ladder .r{--w:130px}
  #log{top:calc(var(--sat) + 132px);width:min(52vw,230px)}
  #hint{bottom:auto;top:calc(var(--sat) + 214px)}
  #sub{bottom:calc(var(--sab) + 236px);font-size:12.5px;white-space:normal;gap:7px;padding:4px 2px;max-width:calc(100% - 12px)}
  #sub b{font-size:10px}
  #scope{top:calc(var(--sat) + 214px);width:150px;height:98px}
  .sc .unit{font-size:10px}
  #title .cta{display:grid;grid-template-columns:1fr 1fr}
  #title .cta .btn-go{grid-column:1 / -1}
  .frame{--fw:22px}
}
@media (min-width:760px){
  #mini-wrap{width:190px;height:190px;right:calc(16px + var(--sar))}
  .sc .cnt{font-size:48px}
  #title .in{padding-left:56px;padding-bottom:48px}
  #altg{bottom:calc(var(--sab) + 210px)}
}
@media (max-height:520px) and (orientation:landscape){
  #topbar{padding-bottom:10px}
  .sc .cnt{font-size:30px}
  #time{font-size:24px}
  #htape{top:calc(var(--sat) + 44px)}
  #mini-wrap{top:calc(var(--sat) + 56px);width:112px;height:112px}
  .zone{top:calc(var(--sat) + 70px)}
  #flash{top:calc(var(--sat) + 96px)}
  #aa{top:calc(var(--sat) + 124px)}
  #clockbox{flex-direction:row;gap:8px}
  #btn-menu{height:30px}
  #altg{bottom:calc(var(--sab) + 40px);left:auto;right:calc(200px + var(--sar));height:120px}
  #hint{bottom:calc(var(--sab) + 120px)}
  #sub{bottom:calc(var(--sab) + 14px);font-size:13px}
  #scope{top:calc(var(--sat) + 172px);width:132px;height:76px}
  #thr{bottom:calc(var(--sab) + 20px);right:calc(130px + var(--sar));height:120px}
  #log{top:calc(var(--sat) + 56px)}
}
@media (prefers-reduced-motion:reduce){ #aa.on,#act.ready .gauge,#pull.on{animation:none} .spin{animation-duration:4s} }