:root{--ink:#18304f;--cream:#fff9ed;--coral:#e36e5b;--gold:#e9aa3f;--sky:#a9cfdb}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#10223a;color:var(--ink);font-family:"DM Sans",system-ui,sans-serif;touch-action:none;user-select:none}.game-shell{position:relative;width:100%;height:100%;display:grid;place-items:center;background:radial-gradient(circle at 50% 10%,#34536a,#10223a 72%)}canvas{display:block;width:100%;height:100%;max-width:1600px;max-height:900px;object-fit:contain;background:#dcebf0}.topbar{position:absolute;left:clamp(10px,2vw,28px);right:clamp(10px,2vw,28px);top:clamp(10px,2vw,22px);display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;color:#fff;text-shadow:0 2px 5px rgba(24,48,79,.5);font-weight:800}.brand{font-family:"Fraunces",serif;font-size:clamp(1rem,2.4vw,1.45rem)}.stats{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.pill{background:rgba(24,48,79,.82);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:7px 12px;font-size:clamp(.72rem,1.8vw,.9rem);backdrop-filter:blur(8px)}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(14,28,47,.46);padding:20px;z-index:6}.overlay.hidden{display:none}.panel{width:min(560px,94vw);background:rgba(255,249,237,.97);border:2px solid rgba(24,48,79,.14);border-radius:28px;padding:clamp(24px,5vw,42px);box-shadow:0 30px 80px rgba(0,0,0,.28);text-align:center}.panel h1,.panel h2{font-family:"Fraunces",serif;line-height:1;margin:0 0 14px}.panel h1{font-size:clamp(2.5rem,8vw,4.4rem)}.panel h2{font-size:clamp(2rem,6vw,3.2rem)}.panel p{color:#5e6872;font-size:1rem}.actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}.btn{border:0;border-radius:999px;padding:14px 23px;background:var(--ink);color:white;font-weight:800;font-size:1rem;cursor:pointer;box-shadow:0 8px 22px rgba(24,48,79,.18)}.btn.coral{background:var(--coral)}.instructions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0;text-align:left}.instructions div{background:#f1e8d6;border-radius:15px;padding:12px;font-size:.84rem}.mobile-controls{position:absolute;inset:auto 0 14px 0;display:none;justify-content:space-between;align-items:flex-end;padding:0 16px;pointer-events:none;z-index:5}.move-pad,.action-pad{display:flex;gap:10px;pointer-events:auto}.control{width:clamp(58px,16vw,76px);height:clamp(58px,16vw,76px);border-radius:50%;border:2px solid rgba(255,255,255,.52);background:rgba(24,48,79,.68);color:white;display:grid;place-items:center;font-size:1.45rem;font-weight:900;box-shadow:0 8px 22px rgba(0,0,0,.2);backdrop-filter:blur(6px);touch-action:none}.control:active,.control.active{background:var(--coral);transform:scale(.94)}.hint{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:rgba(24,48,79,.72);color:white;padding:8px 14px;border-radius:999px;font-size:.78rem;pointer-events:none}.exit{position:absolute;right:14px;bottom:14px;z-index:7;color:white;text-decoration:none;background:rgba(24,48,79,.78);padding:8px 12px;border-radius:999px;font-size:.75rem}.rotate{display:none}@media(pointer:coarse),(max-width:800px){.mobile-controls{display:flex}.hint{display:none}.exit{bottom:auto;top:62px}.instructions{grid-template-columns:1fr}.panel{padding:24px}.topbar{top:8px}}@media(max-width:700px) and (orientation:portrait){canvas{object-fit:cover}.rotate{display:block;position:absolute;top:58px;left:50%;transform:translateX(-50%);z-index:5;background:rgba(255,249,237,.9);padding:6px 10px;border-radius:99px;font-size:.7rem;font-weight:800}}