:root{color-scheme:dark;--bg:#071522;--panel:#112838;--line:#294454;--text:#eff8f8;--muted:#9bb6bd;--mint:#b4e9cc}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 25% 0,#153b46,transparent 55%),var(--bg);color:var(--text);font:16px/1.6 'Segoe UI',sans-serif}header,main{max-width:1050px;margin:auto;padding:24px}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}a{color:inherit}.brand{text-decoration:none;font-size:18px;font-weight:800;letter-spacing:1px}.brand span{color:var(--mint)}.brand small{display:block;font-size:8px;letter-spacing:2px;color:var(--muted)}.intro{text-align:center;padding:35px 0 25px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--mint);font-weight:700}h1{font-size:clamp(32px,5vw,56px);line-height:1.1;letter-spacing:-2px;margin:15px 0}h1 em{font-family:Georgia,serif;font-weight:400;color:var(--mint)}.intro>p:last-child{color:var(--muted);font-size:14px}h2{margin:4px 0;font-size:23px}.game{max-width:680px;margin:0 auto;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,#173646,#102533);padding:25px;box-shadow:0 20px 80px #0004}.game-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.pill{border:1px solid #739e8b;color:var(--mint);font-size:11px;border-radius:30px;padding:6px 10px;white-space:nowrap}.stats{display:flex;justify-content:space-between;border-block:1px solid var(--line);padding:10px 0;margin-top:18px;font-size:12px;color:var(--muted)}#lesson{font-size:13px;color:#c3d5d8;margin-bottom:0}#board{position:relative;height:250px;max-width:390px;margin:22px auto;background:radial-gradient(ellipse,#28708044,transparent 70%)}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #ffe19d;outline-offset:4px}.tile{position:absolute;width:64px;height:64px;border:1px solid #fff9;border-bottom:5px solid #b0c5b6;border-radius:13px;color:#24493c;background:linear-gradient(140deg,#fffef2,#e1edda);box-shadow:0 4px 12px #0004;font-size:31px;display:flex;align-items:center;justify-content:center;transition:transform .15s}.tile:not(:disabled):hover{transform:translateY(-4px)}.tile:disabled{filter:brightness(.5);cursor:default}.tile.hint{outline:4px solid #ffe19d;outline-offset:3px}.tile small{position:absolute;bottom:0;font-size:8px;font-weight:700}.tray-head{display:flex;justify-content:space-between;font-size:12px;margin:8px 0;color:var(--muted)}#tray{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:9px;border:1px solid #507169;border-radius:14px;background:#071b27}#tray.danger{border:2px solid #ffaf92}.slot{aspect-ratio:1;border:1px dashed #3c5b63;background:#17333d;border-radius:8px;display:grid;place-items:center;font-size:26px}.slot.filled{background:#edf3dd;color:#24493c;border-style:solid}#message{min-height:44px;text-align:center;color:var(--mint);font-size:13px;margin:12px 0}.controls{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}.controls button,.level-btn{border:1px solid #52746e;background:#183c40;color:var(--text);border-radius:9px;padding:10px 15px;font-size:12px}.controls button:disabled{opacity:.4;cursor:default}#next{background:var(--mint);color:#143b31}.levels{max-width:680px;margin:35px auto}.levels h2,#rules h2{font-size:26px}#levels{display:flex;gap:12px;margin-top:15px}.level-btn{min-width:60px;font-size:17px}.level-btn.active{background:var(--mint);color:#103a30}.level-btn.complete::after{content:' ✓';font-size:12px}#storage-note{font-size:11px;color:var(--muted)}#rules{margin:65px 0 0}.rule-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.rule-grid article{border-top:1px solid var(--line);padding-top:18px}.rule-grid b{color:var(--mint);font-family:Georgia,serif}.rule-grid h3{font-size:17px}.rule-grid p{font-size:13px;color:var(--muted)}footer{text-align:center;margin-top:55px;padding:25px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}[hidden]{display:none!important}@media(max-width:540px){header,main{padding:16px}.game{padding:16px}.pill{font-size:9px}.game-top h2{font-size:19px}.tile{width:56px;height:56px;font-size:27px}.slot{font-size:22px}#tray{gap:4px;padding:6px}.rule-grid{grid-template-columns:1fr;gap:14px}#board{height:230px}.intro{padding-top:24px}.stats{font-size:10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Challenge tiles overlap only where the data declares geometric blockers. */
.tile{width:54px;height:54px;font-size:29px}.tile small{font-size:7px}@media(max-width:540px){.tile{width:44px;height:44px;font-size:24px}.tile small{font-size:6px}#levels{flex-wrap:wrap}}

/* Fit the actual tile footprint to the panel rather than a fixed 390px canvas. */
#board{width:100%;max-width:none;margin:18px auto 12px}.tile small{font-size:clamp(7px,1.2vw,11px)}
.option-nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:11px}.option-nav [aria-current]{color:var(--mint);font-weight:700}.option-nav a{text-decoration:none}.option-nav a:hover{text-decoration:underline}@media(max-width:540px){header{gap:15px;align-items:flex-start}.option-nav{justify-content:flex-end;gap:8px;font-size:10px}}