/* REEF mobile-board candidate: one viewport, real board first, no persistent CSS motion. */
:root{color:#E7FEFF;background:#061F39;font-size:16px}
html,body{height:100%;overflow:hidden}
body{background:radial-gradient(circle at 20% 0%,#16BFD055,transparent 42%),linear-gradient(160deg,#123E69,#041C35)}
#study{width:min(100%,520px);height:100svh;min-height:0;max-height:100svh;margin:auto;padding:max(6px,env(safe-area-inset-top)) 0 max(6px,env(safe-area-inset-bottom));display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:6px;overflow:hidden}
.topbar{min-height:48px;margin:0 8px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap}
.brand{min-width:0}.brand h1{font-size:clamp(1.35rem,6vw,1.8rem);line-height:1;margin:0}.brand .eyebrow{font-size:.75rem;line-height:1.15;margin:0 0 2px;color:#A3F5F2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-actions{display:flex;gap:6px;flex:none}.icon-button{width:48px;height:48px;min-width:48px;min-height:48px;padding:0;border-radius:50%;display:inline-grid;place-items:center;background:#0A4065;color:#E7FEFF;border:2px solid #54DFE0;font-size:1.35rem;font-weight:850;box-shadow:0 3px 0 #031A31}
.icon-button[aria-pressed=true]{background:#FFD85C;color:#113D68;border-color:#FFF0AE}.icon-button:disabled{opacity:.45}
.scene-scroll{min-height:0;overflow:hidden;display:grid;grid-template-rows:minmax(0,1fr);padding:0 0 6px;overscroll-behavior:none}
.playfield{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);border:0;border-radius:24px;overflow:hidden;background:#0A3054;box-shadow:inset 0 0 0 2px #16BFD0,0 10px 28px #02162F88}
.hud{min-height:34px;padding:5px 12px;border:0;border-radius:0;display:flex;align-items:center;justify-content:space-between;gap:8px;background:linear-gradient(90deg,#0B345A,#0D5570);font-size:.88rem;font-weight:800;color:#E7FEFF}
.sea{position:relative;min-height:0;height:100%;width:100%;aspect-ratio:auto;border:0;border-radius:0;background:#16BFD0 url('./assets/lagoon-v2.svg') center/cover;overflow:hidden;box-shadow:inset 0 0 38px #E7FEFF22}
#canvas-mount{position:absolute;inset:0;width:100%;height:100%}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
.light-rays{opacity:.62}.reef-front{height:14%;min-height:52px;opacity:.72}
.token{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:2px solid #E7FEFF;border-radius:50%;color:#113D68;font-weight:900}
.status{position:absolute;z-index:2;inset:8px 8px auto;margin:0;max-width:calc(100% - 16px);padding:4px 8px;border-radius:10px;background:#062742CC;color:#E7FEFF;font-size:.78rem;line-height:1.35}.status:empty{display:none}
.control-dock{min-width:0;margin:0 8px;padding:6px;border:1px solid #16BFD077;border-radius:20px;background:#082D51;display:flex;align-items:center;justify-content:center;gap:6px}
.actions{width:100%;display:flex;align-items:center;justify-content:center;gap:clamp(8px,4vw,16px)}.actions .icon-button{flex:none}.actions #sound[aria-pressed=false]{color:#FFB9C6;border-color:#FF6985}
.intro-card{position:static;inset:auto;transform:none;width:100%;max-height:none;overflow:visible;padding:7px 9px;border:0;border-radius:16px;background:linear-gradient(100deg,#0D4165,#0A3157);display:grid;grid-template-columns:56px minmax(0,1fr) minmax(92px,auto);align-items:center;gap:8px;text-align:start;box-shadow:none}
.intro-card img{width:56px;height:56px;grid-row:auto}.intro-card p{min-width:0;margin:0;font-size:.82rem;line-height:1.35}.intro-card button{width:auto;min-height:48px;padding:8px 12px;background:#FFD85C;border-color:#FFF0AE;color:#113D68;font-weight:850}
.result{position:static;inset:auto;width:100%;margin:0;padding:7px 9px;border:0;border-radius:16px;background:#E7FEFF;color:#113D68;display:flex;align-items:center;justify-content:space-between;gap:8px;box-shadow:none}.result h2{font-size:1.05rem;margin:0}.result p{font-size:.78rem;margin:0}.result-actions{display:flex;gap:6px;flex:none}.result-actions button{min-height:48px;padding:7px 10px;font-size:.82rem}.result-actions .primary{background:#FFD85C;color:#113D68}
.warning{position:fixed;z-index:8;inset:auto 10px max(10px,env(safe-area-inset-bottom));padding:10px;background:#FFF3CA;color:#4A3803;border-radius:14px}.warning p{margin:0 0 6px}
.sheet-dialog,dialog{width:min(92vw,440px);max-height:min(78svh,650px);overflow:auto;padding:16px;border:2px solid #60E3DD;border-radius:24px;background:#082D51;color:#E7FEFF}.sheet-dialog::backdrop,dialog::backdrop{background:#02162FCA;backdrop-filter:blur(4px)}
dialog:not([open]){display:none!important}dialog[open]{display:block}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.dialog-head h2{margin:0;font-size:1.25rem}.dialog-head .icon-button{background:#113D68}.sheet-dialog h3{font-size:1rem;margin:12px 0 4px}.sheet-dialog p{line-height:1.5}.queue-panel{padding:10px;border:1px solid #16BFD077;border-radius:16px;background:#0A385D}.queue-panel ol{padding-inline-start:28px}.queue-panel li{margin-block:8px}.queue-panel .token{margin-inline-end:8px;vertical-align:middle}
.aim-panel{margin-top:12px;padding:10px;border:1px solid #16BFD077;border-radius:16px}.aim-panel label{display:block;margin-bottom:4px;font-weight:750}#angle{width:100%;min-height:44px;accent-color:#FFD85C}
.setting-options{padding:12px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}.setting-options button{min-height:48px;background:#113D68}.setting-options label{min-height:48px;padding:8px 10px;border:1px solid #16BFD077;border-radius:14px;display:flex;align-items:center;gap:8px}.setting-options input{width:24px;height:24px;accent-color:#FFD85C}
#boot-error{position:fixed;z-index:10;inset:20% 12px auto;padding:16px;background:#103D56;border-radius:16px}
button.primary{background:#FFD85C;border-color:#FFF0AE;color:#113D68;box-shadow:0 3px 0 #BF8A2D}
button:focus-visible,input:focus-visible{outline:3px solid #FFF0AE;outline-offset:3px}.celebrating{box-shadow:inset 0 0 42px #FFD85C55}
@media(max-width:360px){#study{padding-inline:0}.topbar,.control-dock{margin-inline:6px}.top-actions{gap:4px}.top-actions .icon-button{width:44px;height:44px;min-width:44px;min-height:44px}.intro-card{grid-template-columns:44px minmax(0,1fr) minmax(84px,auto)}.intro-card img{width:44px;height:44px}.actions{gap:8px}.actions .icon-button{width:46px;height:46px;min-width:46px;min-height:46px}}
@media(max-height:650px){.brand .eyebrow{display:none}.topbar{min-height:44px}.top-actions .icon-button{width:44px;height:44px;min-width:44px;min-height:44px}.hud{min-height:30px}.intro-card{grid-template-columns:42px minmax(0,1fr) minmax(82px,auto)}.intro-card img{width:42px;height:42px}.intro-card p{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){button:active{transform:none}.celebrating{box-shadow:none}}