:root{color-scheme:dark;--bg:#171c1b;--panel:#202725;--line:#39413b;--ink:#eee9db;--muted:#a5afa6;--accent:#e1b675;--green:#9dbd8a}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 30%,#27302a 0, var(--bg) 70%);color:var(--ink);font-family:Arial,Helvetica,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;background:#29322d;border:1px solid #475146;border-radius:5px;min-height:44px;padding:10px 16px;touch-action:manipulation}button:hover{background:#354035;border-color:#9aab8b}button:disabled{opacity:.35;cursor:default}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.app{max-width:1080px;margin:auto;padding:0 36px}.masthead{display:flex;align-items:center;justify-content:space-between;min-height:84px;border-bottom:1px solid var(--line)}.collection{font-size:13px;color:var(--muted)}.brand img{width:98px;height:auto;display:block;filter:invert(1) grayscale(1);mix-blend-mode:screen}.intro{display:flex;align-items:center;justify-content:space-between;padding:30px 0 25px}.eyebrow{font:10px/1.5 'Courier New',monospace;letter-spacing:2px;color:var(--accent);margin:0 0 10px}.eyebrow span{color:var(--muted)}h1{font:900 clamp(38px,6vw,64px)/1 Arial,sans-serif;letter-spacing:-3px;margin:0}h1>span{color:var(--accent)}h1 .title-dot{color:var(--green)}.intro-copy{font-size:14px;color:var(--muted);line-height:1.8}.cabinet{border:1px solid #56604e;border-radius:9px;background:var(--panel);overflow:hidden;box-shadow:0 22px 60px #0003}.dashboard{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid #465044;gap:12px}.level-button{text-align:left;background:none;border:0;padding:0 8px 0 0}.level-button .eyebrow{display:block;font-size:9px;letter-spacing:1.4px;margin-bottom:5px}.level-button strong{font:22px 'Courier New',monospace}.level-button small{font-size:13px;color:var(--muted)}.grid-icon{color:var(--accent);margin-left:18px}.stats{display:flex;gap:34px}.stats>div{display:flex;flex-direction:column;gap:7px}.stats span{font:9px 'Courier New',monospace;letter-spacing:1.2px;color:var(--muted)}.stats strong{font:24px 'Courier New',monospace}.stats>div:last-child strong{color:var(--green)}.board-wrap{background:#111716;background-image:radial-gradient(#26312a 1px,transparent 1px);background-size:8px 8px;display:flex;justify-content:center;align-items:center;padding:22px;min-height:260px}canvas{display:block;image-rendering:auto;touch-action:none;max-width:100%;outline-offset:0!important}.board-caption{display:flex;justify-content:space-between;gap:15px;padding:12px 24px;background:#19201c;color:var(--muted);font:11px/1.5 'Courier New',monospace;min-height:42px}.board-caption>span:first-child{display:flex;align-items:center;gap:9px}.live-dot{display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;flex-shrink:0}#best{font-size:9px;align-self:center;white-space:nowrap;color:var(--accent)}.controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-top:1px solid var(--line)}.actions{display:flex;gap:8px}.actions button{font-size:14px}.actions kbd{font:10px 'Courier New',monospace;color:var(--muted);margin-left:12px}.help{font-size:12px;background:transparent;border:0;padding:8px}.help span{display:inline-grid;place-items:center;border:1px solid var(--muted);border-radius:50%;width:18px;height:18px;margin-left:8px}.below-board{display:flex;align-items:center;justify-content:space-between;padding:26px 0;gap:24px}.field-notes p:not(.eyebrow){font-size:13px;line-height:1.9;color:var(--muted);margin:7px 0 15px}.legend{display:flex;gap:20px;font:10px 'Courier New',monospace;color:var(--muted)}.legend>span{display:flex;align-items:center;gap:7px}.legend-box{width:13px;height:13px;display:inline-block;background:#c79556;border:2px solid #815a35;box-shadow:inset 0 0 0 1px #e1b675}.legend-box.done{background:#7eac76;border-color:#4d7454;box-shadow:inset 0 0 0 1px #b0ce91}.legend-goal{font:20px 'Courier New',monospace;color:#e6c786}.touch-panel{display:flex;align-items:center;gap:20px}.touch-panel p{font:11px/1.8 'Courier New',monospace;color:var(--muted)}.dpad{display:grid;grid-template-columns:44px 44px 44px;grid-template-rows:44px 44px 44px;gap:4px;user-select:none}.dpad button{font:22px 'Courier New',monospace;padding:0;touch-action:none;border-bottom-width:3px}.dpad button:active{background:#576747;transform:translateY(1px)}.dpad [data-dir=up]{grid-column:2}.dpad [data-dir=left]{grid-row:2}.dpad span{grid-area:2/2;align-self:center;justify-self:center;color:#70806a}.dpad [data-dir=right]{grid-area:2/3}.dpad [data-dir=down]{grid-area:3/2}footer{border-top:1px solid var(--line);padding:18px 0 24px;display:flex;justify-content:space-between;gap:12px;font-size:10px;color:var(--muted)}footer p{margin:0}footer a{color:var(--ink)}dialog{color:var(--ink);background:#242d26;border:1px solid #69775a;border-radius:10px;padding:30px;width:min(590px,calc(100% - 28px));max-height:85dvh;box-shadow:0 25px 100px #0009}dialog::backdrop{background:#080f0ddb;backdrop-filter:blur(5px)}dialog h2{font-size:30px;letter-spacing:-1px;margin:10px 0 18px}dialog p,dialog li{font-size:14px;line-height:1.8;color:#bbc5b7}dialog ul{padding-left:20px}dialog li{margin-bottom:10px}.dialog-top{display:flex;align-items:center;justify-content:space-between}.dialog-top button{font-size:25px;padding:0;width:44px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:25px}.primary{background:var(--accent);color:#232a21;border-color:var(--accent);font-weight:bold}.primary:hover{background:#edc78d}#level-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;margin-top:24px}#level-grid button{font:14px 'Courier New',monospace;padding:7px 0;position:relative}#level-grid button.solved{color:var(--green);border-color:#66855e}#level-grid button.solved::after{content:'✓';font-size:9px;position:absolute;top:1px;right:3px}#level-grid button.current{background:var(--accent);color:#19201c}#storage-warning{color:var(--accent);font-size:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}@media(max-width:650px){.app{padding:0 16px}.masthead{min-height:62px}.brand img{width:78px}.intro{padding:24px 0 20px}.intro-copy{display:none}h1{font-size:46px}.dashboard{padding:14px 12px}.stats{gap:16px}.stats strong{font-size:19px}.stats span{font-size:8px;letter-spacing:0}.level-button strong{font-size:18px}.level-button .eyebrow{font-size:8px;letter-spacing:0}.grid-icon{margin-left:3px}.board-wrap{padding:16px 8px;min-height:220px}.board-caption{padding:10px 12px;flex-wrap:wrap;gap:5px;font-size:10px}.controls{padding:10px;gap:4px}.actions{gap:5px}.actions button{font-size:12px;padding:8px}.actions kbd{display:none}.help{font-size:11px;padding:5px}.help span{display:none}.below-board{gap:12px;padding:20px 0;align-items:center}.field-notes{max-width:55%}.field-notes .eyebrow{font-size:8px;letter-spacing:1px}.field-notes p:not(.eyebrow){font-size:11px}.legend{gap:10px;flex-wrap:wrap;font-size:9px}.touch-panel{flex-direction:column;gap:4px}.touch-panel p{font-size:8px;text-align:center;margin:3px 0}.dpad{grid-template-columns:46px 46px 46px;grid-template-rows:46px 46px 46px}footer{flex-direction:column;font-size:10px;line-height:1.5}dialog{padding:20px}#level-grid{grid-template-columns:repeat(5,1fr)}dialog h2{font-size:26px}}@media(max-height:520px) and (min-width:651px){.masthead{min-height:50px}.intro{padding:12px 0}h1{font-size:36px}.board-wrap{padding:12px}.below-board{padding:12px 0}}

/* Victory: warm metallic light, mint accents and a brief, staged reveal. */
#celebration{position:fixed;inset:0;z-index:20;pointer-events:none;overflow:hidden}
#celebration canvas{width:100%;height:100%;max-width:none}
.victory-moment{position:absolute;top:var(--victory-y);left:50%;width:min(92vw,480px);text-align:center;transform:translate(-50%,-50%);color:#fff3d2;text-shadow:0 2px 20px #000;isolation:isolate}
.victory-moment::before{content:'';position:absolute;inset:-45px -25px;background:radial-gradient(ellipse,#12241bf2 10%,#12241bc9 40%,#12241b00 72%);z-index:-1}
.victory-emblem,.win-medal{display:grid;place-items:center;margin:0 auto 18px;width:76px;height:76px;border:1px solid #f3d692;border-radius:50%;color:#ffedb6;font-size:40px;background:radial-gradient(circle at 30% 20%,#667549,#283e2e 65%);box-shadow:0 0 0 7px #edcd8420,0 0 0 15px #edcd8409,0 0 50px #dfb86740,inset 0 1px 10px #ffe6a533}
.victory-moment span{display:block;font:10px 'Courier New',monospace;letter-spacing:3px;color:#e6c78a}
.victory-moment strong{display:block;margin:12px 0 9px;font:700 clamp(29px,6vw,44px)/1.1 Georgia,serif;letter-spacing:-1px}
.victory-moment i{font:13px Georgia,serif;color:#d3dfc3}
.playing .victory-moment{animation:victory-reveal 2.15s both}
.playing .victory-emblem{animation:medal-arrive .8s .22s both cubic-bezier(.2,.8,.2,1.25)}
#win-dialog{text-align:center;overflow:auto;background:radial-gradient(ellipse at 50% 0,#425239 0,#242d26 65%);border-color:#b49b65}
#win-dialog[open]{animation:win-arrive .42s cubic-bezier(.2,.8,.2,1) both}
#win-dialog h2{font-family:Georgia,serif;font-weight:normal;font-size:clamp(28px,5vw,36px)}
#win-dialog .dialog-actions{justify-content:center}
.win-medal{width:62px;height:62px;font-size:32px;margin:6px auto 26px}
@keyframes victory-reveal{0%,10%{opacity:0;transform:translate(-50%,-40%) scale(.88)}28%,80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-55%) scale(1.035)}}
@keyframes medal-arrive{from{opacity:0;transform:scale(.4) rotate(-25deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes win-arrive{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){#win-dialog[open],.playing .victory-moment,.playing .victory-emblem{animation:none}}