:root{color-scheme:dark;--ink:#102e58;--paper:#e5eaf0;--fire:#ed955a}*{box-sizing:border-box}body{margin:0;background:#091b34;color:var(--paper);font:16px Georgia,serif;height:100dvh;overflow:hidden;user-select:none}button{font:700 12px system-ui;letter-spacing:.04em;border:1px solid #90a7c2;background:#18395f;color:#fff;border-radius:5px;padding:11px 15px;cursor:pointer;touch-action:none}button:hover,button.pressed{background:#32629a}button:focus-visible,canvas:focus-visible{outline:3px solid var(--fire);outline-offset:3px}header{height:88px;display:flex;align-items:center;justify-content:space-between;padding:12px 64px 12px 84px;border-bottom:1px solid #315075}.brand{font-size:29px;letter-spacing:.1em}.brand em,h1 em{color:var(--fire);font-weight:400}.brand small{display:block;font:9px system-ui;letter-spacing:.24em;margin-top:5px}nav{display:flex;gap:7px}#help-button{opacity:.65}main{height:calc(100dvh - 127px);display:flex;align-items:center;justify-content:center;gap:clamp(22px,5vw,100px);padding:16px}.well{height:100%;aspect-ratio:21/40;position:relative;max-width:48vw}canvas{display:block;width:100%;height:100%;background:#173b65;box-shadow:0 8px 40px #0006}aside{width:210px}.eyebrow{font:11px system-ui;letter-spacing:.18em;color:#b3c9e2}h2{font-size:30px;font-weight:400;margin:16px 0}.left>p:not(.eyebrow),.right>p{line-height:1.55;color:#b8c9de}.stat{margin:24px 0;font:10px system-ui;letter-spacing:.16em}.stat strong{display:block;font:29px Georgia;color:#fff;letter-spacing:.03em;margin-top:7px}.legend{font-size:12px}.desktop-guide{font:12px/2 system-ui!important}.maker{color:var(--fire);text-align:center;font:10px/1.8 system-ui;letter-spacing:.18em;margin-top:25px}.maker:first-line{font-size:40px}#preview{display:flex;gap:6px;margin:12px 0 28px}#preview span{display:grid;place-items:center;width:45px;height:45px;border-radius:6px;font:28px Georgia;border:2px solid #e6e8ee}footer{height:39px;display:flex;justify-content:space-between;align-items:center;padding:0 32px;font:10px system-ui;letter-spacing:.1em;color:#afc3dc;border-top:1px solid #315075}#callout{position:absolute;top:43%;left:-10%;width:120%;text-align:center;pointer-events:none;font:700 21px system-ui;color:#fff;text-shadow:0 2px 5px #000;background:#102e58e8;padding:10px;opacity:0}#callout.show{opacity:1}.modal{display:none;position:fixed;inset:0;background:#071426dc;z-index:100;align-items:center;justify-content:center;padding:18px}.modal.is-visible{display:flex}.modal>div{max-width:540px;width:100%;padding:28px 36px;background:#16375d;border:1px solid #849fbe;box-shadow:10px 10px 0 #060f2280;max-height:calc(100dvh - 36px);overflow:auto}.modal p{line-height:1.6;color:#d0ddeb;font-size:15px}h1{font-size:44px;margin:10px 0 18px}#instruction-close,#next{background:#ed955a;color:#17253c;border-color:#ed955a}#again{margin:8px}.tile-controls{display:none}body:has(.modal.is-visible) .tile-controls{visibility:hidden}
@media(max-width:900px),(pointer:coarse){header{height:57px;padding:7px 64px 7px 12px}.brand{font-size:20px}.brand small{font-size:7px}nav{gap:4px}nav button{font-size:10px;padding:8px}#help-button,#reset,.desktop-guide,.maker,.legend{display:none}main{height:calc(100dvh - 150px);padding:7px;gap:15px}.well{max-width:none}aside{width:145px}.eyebrow{font-size:9px}h2{font-size:21px;margin:8px 0}.left>p:not(.eyebrow),.right>p{font-size:12px}.stat{margin:13px 0;font-size:9px}.stat strong{font-size:22px}#preview{gap:3px;margin:8px 0}#preview span{width:32px;height:32px;font-size:22px}.tile-controls{display:flex;height:62px;justify-content:center;align-items:center;gap:8px;padding:5px max(8px,env(safe-area-inset-right)) 5px max(8px,env(safe-area-inset-left))}.tile-controls button{min-height:48px;min-width:56px}.tile-controls button[data-action=drop]{background:#bd6333}footer{height:31px;padding:0 12px;font-size:9px}footer>span:first-child{display:none}#callout{font-size:14px}.modal>div{padding:18px 24px}}
@media(max-width:900px) and (orientation:landscape){header{height:53px}main{height:calc(100dvh - 77px);gap:18px;padding:6px 105px 6px 12px}.left{width:155px}.right{width:115px}.right>p:not(.eyebrow){font-size:11px}.tile-controls{position:fixed;right:8px;top:57px;bottom:27px;display:grid;grid-template-columns:1fr 1fr;width:96px;height:auto;gap:5px;padding:0}.tile-controls button{padding:4px;min-width:0;min-height:40px;font-size:10px}.tile-controls [data-action=rotate],.tile-controls [data-action=drop],.tile-controls [data-action=rescue]{grid-column:1/3}.tile-controls [data-action=right]{grid-column:2;grid-row:1}.tile-controls [data-action=rotate]{grid-row:2}footer{height:24px}.stat{margin:10px 0}.left>p:not(.eyebrow){font-size:11px}h2{font-size:20px}.right .stat strong{font-size:20px}#preview span{width:30px;height:30px}#preview{margin-bottom:9px}}
@media(max-width:600px) and (orientation:portrait){header{height:61px}.brand{font-size:17px}.brand small{display:none}nav button{font-size:9px;padding:7px}main{position:relative;height:calc(100dvh - 166px);padding-top:66px;padding-bottom:7px}.well{height:100%;max-width:90vw}.left{position:absolute;top:0;left:12px;right:12px;width:auto;display:flex;justify-content:space-between;align-items:center;gap:10px}.left .eyebrow{font-size:10px}.left h2,.left>p:not(.eyebrow){display:none}.left .stat{font-size:8px;margin:9px 0}.left .stat strong{font-size:20px}.right{display:none}.tile-controls{height:76px;gap:5px}.tile-controls button{font-size:10px;min-width:49px;padding:9px}footer{height:29px;font-size:8px}h1{font-size:35px}}


/* First refinement: the next batch remains readable in portrait. */
@media(max-width:600px) and (orientation:portrait){main{padding-top:110px}.right{display:block;position:absolute;top:53px;left:12px;right:12px;width:auto;display:flex;align-items:center;justify-content:center;gap:12px}.right>*{display:none}.right>.eyebrow,.right>#preview{display:flex;margin:0}.right>#preview span{width:28px;height:28px;font-size:19px}}
body{background-image:radial-gradient(ellipse at 50% 80%,#22477155,transparent 65%)}
.well{border-radius:4px}#callout{top:auto;bottom:7%;font-size:16px;left:0;width:100%}
@media(max-width:900px){#callout{font-size:10px;padding:6px}}
/* Second refinement: readable danger and unobstructed tile feedback. */
canvas.crowded{box-shadow:0 0 0 3px #ed955a,0 8px 40px #0006}
button:disabled{opacity:.42;cursor:default}#callout{bottom:1%;padding:3px;background:none;font-size:12px;color:#ffcf9e}
@media(max-width:900px){#callout{font-size:8px;padding:1px}}