:root{color-scheme:dark;font-family:system-ui,-apple-system,"Arial",sans-serif;color:#f5f8ff;background:#101a46;font-size:16px;line-height:1.5}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 20% 0,#443b83,transparent 65%),linear-gradient(#121a46,#0b354b);min-height:100dvh}button,summary{font:inherit}button{min-height:48px;border:1px solid #7683b0;border-radius:16px;color:#fff;background:#263b66;padding:.5rem .85rem;cursor:pointer;touch-action:manipulation;font-weight:650}button:active{transform:translateY(1px);background:#45627f}button:focus-visible,summary:focus-visible{outline:3px solid #ffeea1;outline-offset:3px}button:disabled{opacity:.5;cursor:default}button[aria-pressed=true]{outline:3px solid #ffe79b;outline-offset:2px}.scene{max-width:620px;margin:auto;padding:env(safe-area-inset-top) max(12px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px}.topbar button{background:#192a53;font-size:.9rem}.wordmark{font-size:1.9rem;font-weight:850;letter-spacing:.02em;color:#fff3cb}.harbour{position:relative;min-height:180px;background:url('../assets/harbour-study.svg') center bottom/cover;border-radius:26px;overflow:hidden;margin-block:14px 10px;border:1px solid #6379a3}.scene-copy{position:relative;padding:14px 16px;max-width:72%;z-index:1}.eyebrow{font-size:.8rem;color:#9cf4df;font-weight:750}h1{font-size:1.5rem;line-height:1.35;margin:.2rem 0;color:#fff5de}.scene-copy p{font-size:.9rem;margin:.35rem 0;color:#f0f4ff;text-shadow:0 1px 4px #061430}.hero{width:118px;position:absolute;inset-inline-end:4px;bottom:4px;filter:drop-shadow(0 8px 5px #08133590);transform-origin:50% 75%}.light-gauge{position:absolute;bottom:13px;inset-inline-start:18px;display:flex;gap:10px}.light-gauge i{width:16px;height:22px;border:2px solid #cee7ff;border-radius:8px;background:#123551}.light-gauge i.lit{background:#ffd773;box-shadow:0 0 14px #ffc473}.hud{display:flex;justify-content:space-between;gap:10px;margin:0 6px 10px}.hud p{margin:0;display:flex;gap:12px;align-items:center;color:#c4d5f0}.hud strong{font-size:1.3rem;color:#fff5d4;font-variant-numeric:tabular-nums}.board-shell{position:relative;direction:ltr;width:100%;aspect-ratio:1;border-radius:22px;background:#131f45;border:1px solid #7590b6;box-shadow:0 10px 32px #04142780,inset 0 2px 0 #c8e1ff40;overflow:visible}#canvas-mount{position:absolute;inset:0}#canvas-mount canvas{display:block;width:100%;height:100%;border-radius:22px}#board-buttons{position:absolute;inset:12px;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);direction:ltr;touch-action:none}#board-buttons button{min-height:0;min-width:0;padding:0;border:0;border-radius:8px;background:transparent;box-shadow:none;touch-action:none;color:transparent}#board-buttons button:focus-visible{outline:3px solid #ffe79b;outline-offset:-2px;background:#ffeca120}.status{font-size:.9rem;min-height:2.8em;margin:12px 4px;color:#e5edf9}.tray{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;direction:ltr}.piece{min-height:94px;background:linear-gradient(140deg,#2b3d6c,#192444);border-color:#7188b2;padding:8px;display:grid;place-items:center;touch-action:none}.piece svg{width:90px;height:60px;max-width:100%;pointer-events:none}.piece .piece-name{font-size:.78rem;color:#e5ecfb;line-height:1.35}.thumbbar{display:flex;flex-wrap:wrap;gap:8px;margin-block:14px}.thumbbar button{flex:1}.settings{padding:10px 6px;color:#d6e5f7;font-size:.9rem}.settings summary{cursor:pointer;min-height:44px;padding:8px}.settings-options{display:grid;gap:8px;padding:8px}.settings-options label{display:flex;align-items:center;gap:10px;min-height:44px}.settings input{width:22px;height:22px;accent-color:#8de6d2}.result,.exit-panel{position:fixed;inset:0;background:#091534d9;z-index:10;padding:max(18px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom));overflow:auto}.result-card{width:min(100%,470px);margin:5dvh auto;padding:24px 18px;border:1px solid #a0a8dc;border-radius:30px;background:radial-gradient(circle at top,#454378,#172951 65%);text-align:center;box-shadow:0 24px 80px #031326}.result-card h2{font-size:1.9rem;margin:0 0 10px}.result-lantern{font-size:3rem;color:#ffe48e}.stars{font-size:2.8rem;color:#ffe49d;letter-spacing:.2em;direction:ltr}.result-actions{display:grid;gap:10px;margin-top:18px}.result-actions button:first-child{background:#0a695f;border-color:#8eedd8}.result-actions button:last-child{font-size:.85rem;background:transparent}.exit-panel{z-index:20}.exit-panel button{margin:8px}.exit-panel h2,.exit-panel p{max-width:500px;margin-inline:auto}[hidden]{display:none!important}.spark{position:fixed;pointer-events:none;z-index:11;inline-size:8px;block-size:14px;border-radius:4px;background:#ffdb88;animation:spark-flight 900ms ease-out forwards}.spark:nth-of-type(3n){background:#7ff0de}.spark:nth-of-type(3n+1){background:#e8a1ff}@keyframes spark-flight{from{transform:translate(0,0) rotate(0);opacity:1}to{transform:translate(var(--dx),var(--dy)) rotate(160deg);opacity:0}}.celebrating .hero{animation:hero-cheer 900ms ease-out}@keyframes hero-cheer{30%{transform:translateY(-8px) rotate(-5deg)}60%{transform:translateY(-2px) rotate(3deg)}}.reduced *,.reduced *::before,.reduced *::after{animation:none!important;transition:none!important}.reduced button:active{transform:none}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}@media(min-width:740px){.harbour{min-height:210px}.hero{width:145px}.scene-copy{padding:20px}.scene{padding-inline:24px}}@media(max-width:359px){.wordmark{font-size:1.5rem}.topbar button{font-size:.8rem;padding-inline:8px}.piece{padding:6px}.thumbbar button{font-size:.9rem;padding-inline:8px}}