*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#11172e;color:#fff3df;font:15px/1.4 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{--ink:#fff3df;--muted:#b4b6ce;--accent:#ffcf88;--edge:#ffffff20;--panel:#222746;--deep:#171c39;--rose:#ee98b4}body.reef-reverie{background:#123e48;--ink:#fff8e6;--muted:#b7d6d3;--accent:#ffe2a4;--edge:#ffffff2a;--panel:#1b5862;--deep:#164650;--rose:#ffb18f}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;font-weight:650;min-height:44px;min-width:44px;border-radius:14px;border:1px solid var(--edge);padding:10px 17px;background:var(--panel);color:var(--ink);cursor:pointer;touch-action:manipulation}button:hover:not(:disabled){filter:brightness(1.15)}button:disabled{opacity:.48;cursor:default}button:focus-visible,a:focus-visible,#world:focus-visible{outline:3px solid var(--rose);outline-offset:3px}.primary{background:var(--accent);color:#253043;border-color:transparent;font-size:17px}.brand{color:var(--accent);text-decoration:none;font-size:24px;display:flex;align-items:center;gap:8px}.brand span{font-size:11px;letter-spacing:2px;font-weight:800}#app{max-width:1200px;margin:auto;padding:0 24px}header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0;border-bottom:1px solid var(--edge)}nav{display:flex;gap:8px}nav button{padding:9px 13px;font-size:13px}main{padding-top:22px}.heading{display:flex;align-items:center;justify-content:space-between;max-width:900px;margin:0 auto 15px}.heading p{color:var(--accent);font-size:10px;letter-spacing:3px;font-weight:700;margin:0 0 5px}h1{font:500 clamp(27px,4vw,43px)/1.1 Georgia,serif;margin:0;letter-spacing:-.7px}.medallion{font-size:44px;color:var(--accent)}.hud{display:flex;justify-content:space-between;gap:8px;max-width:900px;margin:0 auto 12px;padding:11px 17px;background:var(--panel);border:1px solid var(--edge);border-radius:16px}.hud>div{min-width:0}.hud small{display:block;font-size:9px;font-weight:700;color:var(--muted);letter-spacing:1.6px}.hud strong{font-size:16px;white-space:nowrap}#stars{color:var(--accent);font-size:17px;letter-spacing:2px}#world{height:clamp(310px,49vh,520px);position:relative;border-radius:24px;overflow:hidden;max-width:900px;margin:auto;border:1px solid #ffffff26;isolation:isolate;background:var(--deep);outline:none;touch-action:none}#scene{position:absolute;inset:0;width:100%;height:100%}.scene-caption{position:absolute;bottom:15px;left:22px;right:22px;display:flex;justify-content:space-between;gap:12px;pointer-events:none;font-size:12px;color:var(--muted)}.scene-caption span:first-child{color:var(--accent);font-weight:600}.controls{max-width:900px;margin:12px auto 0;display:flex;justify-content:space-between;align-items:center;gap:12px}.objective{min-width:0}.objective strong,.objective span{display:block}.objective strong{font-size:15px}.objective span{font-size:12px;color:var(--muted);margin-top:3px}#actions{display:flex;flex-shrink:0;gap:8px}#actions button{font-size:14px;white-space:nowrap}.footer-note{color:var(--muted);font:italic 13px Georgia,serif;text-align:center;margin:15px auto 20px}#overlay{position:fixed;inset:0;z-index:20;background:#080e24b8;backdrop-filter:blur(9px);display:flex;align-items:center;justify-content:center;padding:18px}#overlay[hidden]{display:none}.dialog{width:min(440px,100%);max-height:calc(100dvh - 36px);overflow:auto;background:var(--deep);border:1px solid #ffe0a645;border-radius:26px;padding:28px;box-shadow:0 30px 100px #0005;display:flex;flex-direction:column;gap:10px}.dialog h2{font:500 35px/1.1 Georgia,serif;margin:0;color:var(--accent)}#dialog-kicker{font-size:10px;letter-spacing:2.5px;color:var(--muted);font-weight:700;margin:0 0 1px}#dialog-copy{color:var(--muted);font-size:15px;margin:0 0 7px}.dialog a{display:flex;align-items:center;justify-content:center;min-height:44px;color:var(--muted);font-size:13px;text-underline-offset:5px}.dialog button[hidden],#instructions[hidden]{display:none}#instructions{font-size:14px;color:var(--muted);line-height:1.65;max-height:38dvh;overflow:auto}#instructions p{margin:0 0 10px}#instructions b{color:var(--ink)}#dialog-stats{font-size:14px;color:var(--accent)}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}#board{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);display:grid;gap:7px;width:min(370px,calc(100% - 42px));aspect-ratio:1}#board:empty{display:none}.tile{padding:0;min-width:0;min-height:0;aspect-ratio:1;border:1px solid #c0a1e62b;border-radius:17px;background:linear-gradient(145deg,#343350,#24273e);position:relative;box-shadow:0 4px 9px #0002}.tile svg{display:block;width:100%;height:100%;overflow:visible}.tile.lit{border-color:#ffd89d88;background:linear-gradient(145deg,#55425d,#3b3448)}.tile.selected{outline:2px solid var(--rose);outline-offset:2px}.tile.terminal:after{content:'✦';position:absolute;inset:0;display:grid;place-items:center;color:var(--accent);font-size:19px;pointer-events:none}.tile svg path{fill:none;stroke:#9289ae;stroke-width:9;stroke-linecap:round}.tile.lit svg path{stroke:#ffd99b;filter:drop-shadow(0 0 4px #eeb468bb)}.tile circle{fill:#eea7c0}.loom-notice{font-size:12px;color:var(--muted)}#reel{min-width:130px;user-select:none;touch-action:none}#reel.holding{background:#e89e80;color:#23353b;border-color:#ffceab}.reef-reverie #board{display:none}@media(min-width:1000px){main{padding-top:20px}#app{padding:0 36px}}@media(max-width:600px){#app{padding:0 13px}header{padding:10px 0;gap:6px}.brand span{font-size:9px;letter-spacing:1px}.brand{font-size:22px;gap:5px}nav{gap:5px}nav button{font-size:11px;padding:7px 9px;border-radius:11px}.heading{margin-bottom:12px}main{padding-top:16px}.heading p{font-size:8px;letter-spacing:2px}.medallion{font-size:35px}.hud{padding:9px 12px}.hud small{font-size:8px;letter-spacing:1px}.hud strong{font-size:14px}#stars{font-size:14px;letter-spacing:0}#world{height:clamp(320px,49dvh,460px);border-radius:20px}.controls{flex-direction:column;align-items:stretch;gap:10px}#actions{justify-content:stretch}#actions button{flex:1}.scene-caption{left:15px;right:15px;font-size:10px}.scene-caption span:last-child{max-width:50%;text-align:right}.objective strong{font-size:14px}.objective span{font-size:11px}.dialog{padding:24px}.dialog h2{font-size:31px}#board{gap:6px;width:min(350px,calc(100% - 32px))}.tile{border-radius:12px}.tile svg path{stroke-width:8}}@media(max-width:350px){nav button{padding:7px;font-size:10px}.brand span{letter-spacing:.4px;font-size:8px}#board{gap:5px;width:calc(100% - 26px)}.tile{border-radius:10px}#world{height:330px}.scene-caption{font-size:9px}}@media(max-height:510px) and (min-width:600px){header{padding:7px 0}main{padding-top:8px}.heading{margin:0 0 6px}.heading h1{font-size:27px}.heading p{font-size:8px;margin:0}.heading .medallion{display:none}.hud{position:absolute;right:26px;top:72px;width:33%;display:flex;flex-direction:row;padding:8px;gap:5px}.hud strong,#stars{font-size:12px}.hud small{font-size:7px}.controls{position:absolute;right:26px;top:150px;width:33%;display:flex;flex-direction:column;align-items:stretch}.objective{font-size:13px}#actions{flex-wrap:wrap}#actions button{flex:1;padding:8px}#world{width:62%;margin:0;height:calc(100dvh - 120px);min-height:240px}#board{width:min(240px,calc(100% - 38px));top:46%;gap:4px}.tile{border-radius:10px}.scene-caption{font-size:9px;bottom:9px}.footer-note{display:none}.dialog{max-width:580px}.dialog h2{font-size:27px}.dialog{padding:18px;gap:7px}#instructions{max-height:28dvh}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}body{padding-bottom:env(safe-area-inset-bottom)}

@media(max-width:600px) and (max-height:720px){body[data-phase="playing"] .heading,body[data-phase="playing"] .footer-note{display:none}body[data-phase="playing"] main{padding-top:10px}body[data-phase="playing"] #world{height:320px}body[data-phase="playing"] .hud{margin-bottom:9px}body[data-phase="playing"] .controls{margin-top:9px;gap:7px}body[data-phase="playing"] .objective span{min-height:30px}body[data-phase="playing"] header{padding:7px 0}}

#casting-meter{position:absolute;top:13px;left:50%;transform:translateX(-50%);background:#133e4ee8;border:1px solid #e4d5a566;color:#fff1d5;font-size:12px;font-weight:600;padding:8px 12px;border-radius:20px;white-space:nowrap;max-width:calc(100% - 20px)}#casting-meter.in-gold{color:#ffe4a8;border-color:#ffd58e;box-shadow:0 2px 18px #ffd88f22}#casting-meter[hidden]{display:none}#casting-meter:focus-visible{outline:3px solid #ffb18f;outline-offset:3px}@media(max-width:350px){#casting-meter{font-size:11px;padding:7px 10px}}