@font-face{font-family:Gotham;src:url('assets/brand/gotham-book.woff')}
@font-face{font-family:Gotham;src:url('assets/brand/gotham-bold.woff');font-weight:700}
*{box-sizing:border-box}
body{--bg:#111211;--ink:#f2f0e9;--muted:#9a9a91;--line:#ffffff25;--accent:#de8152;--panel:#181a18;--board:#090a09;--grid:#ffffff25;--dot:#f1e6d9;--dotink:#151515;margin:0;background:var(--bg);color:var(--ink);font-family:Gotham,Arial,sans-serif;transition:background .4s,color .4s}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer;color:inherit;background:none;border:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
button:disabled{opacity:.3;cursor:default}
main{max-width:1720px;margin:auto;padding:0 5%}
.timer i{width:5px;height:5px;border-radius:50%;background:var(--accent)}
h1{font-size:clamp(43px,4.3vw,74px);letter-spacing:-.065em;line-height:.98;font-weight:700;margin:34px 0 28px}
h1 em{font-style:normal;color:var(--accent)}
.game-top{display:flex;align-items:center;justify-content:space-between;margin:13px 0 22px;font-size:9px;letter-spacing:.13em;color:var(--muted)}
.timer{display:flex;gap:9px;align-items:center;font-size:15px;letter-spacing:.06em;color:var(--ink);font-variant-numeric:tabular-nums}
.board{position:relative;aspect-ratio:1;overflow:hidden;border-radius:36px;background:var(--board);border:1px solid var(--line);isolation:isolate;box-shadow:0 30px 80px #0003}
.cells{position:absolute;inset:7%;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);touch-action:none;user-select:none}
.cell{position:relative;min-width:0;min-height:0;padding:0;border-bottom:1px solid var(--grid);border-right:1px solid var(--grid);display:flex;align-items:center;justify-content:center;touch-action:none}
.cell:nth-child(6n){border-right:0}
.cell:nth-child(n+31){border-bottom:0}
.cell::before{content:"";position:absolute;inset:5%;border-radius:9px;background:var(--accent);opacity:0;transition:opacity .18s}
.cell.visited::before{opacity:.12}
.cell.hinted::before{opacity:.5;animation:hintPulse .9s infinite alternate}
.cell .dot{width:55%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--dot);color:var(--dotink);font-weight:700;font-size:clamp(13px,1.25vw,22px);box-shadow:0 3px 18px #0007;z-index:2;border:2px solid transparent}
.cell.reached .dot{background:var(--accent);color:#151515;box-shadow:0 0 20px color-mix(in srgb,var(--accent) 50%,transparent)}
.cell.tip .dot{border-color:white}
.cell:focus-visible{outline-offset:-5px;z-index:3}
.path-layer{position:absolute;inset:7%;width:86%;height:86%;overflow:visible;pointer-events:none}
.path-layer path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.path-layer #trail{stroke:var(--accent);stroke-width:12;opacity:.95}
.path-layer #trail-glow{stroke:var(--accent);stroke-width:25;opacity:.18}
.board.won #trail{stroke-dasharray:18 10;animation:current 1s linear infinite}
.board.won .cell{border-color:transparent}
.board.won .cell .dot{opacity:.35}
.actions{display:flex;gap:8px;margin-top:18px}
.actions button{flex:1;border:1px solid var(--line);padding:15px;font-size:11px;transition:background .2s}
.actions button:hover:not(:disabled){background:var(--panel)}
.actions span{margin-right:10px;font-size:17px;color:var(--accent)}
.status{font-size:10px;line-height:1.7;color:var(--muted);margin:14px 0 0;min-height:34px}
h2{font-size:24px;line-height:1.3;letter-spacing:-.04em;font-weight:400;margin:16px 0 26px}
footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:55px;padding:24px 0 30px;font-size:7px;letter-spacing:.08em;color:var(--muted)}
dialog{border:1px solid var(--line);background:var(--bg);color:var(--ink);max-width:490px;width:calc(100% - 36px);padding:46px;box-shadow:0 40px 120px #0008}
dialog::backdrop{background:#0009;backdrop-filter:blur(8px)}
dialog h2{font-size:44px;font-weight:700;line-height:1.04;margin:25px 0}
dialog ol{padding-left:20px;font-size:12px;line-height:1.8}
dialog li{margin-bottom:14px}
dialog p{font-size:11px;line-height:1.8;color:var(--muted)}
@keyframes hintPulse{to{opacity:.15}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes current{to{stroke-dashoffset:-28}}
@keyframes breathe{50%{filter:brightness(1.3)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(min-width:1700px){.board{max-width:640px}}
@media(max-width:1100px){footer{margin-top:30px}}
@media(max-width:700px){main{padding:0 6%}
h1{font-size:52px;margin:22px 0 16px;line-height:.96}
.game-top{margin:10px 0 16px}
.board{border-radius:24px}
.cell .dot{font-size:16px;width:61%;border-width:1px}
.actions button{padding:12px;font-size:10px}
.actions{gap:7px;margin-top:14px}
.status{margin-top:12px}
footer{display:block;font-size:7px;line-height:2.4}
footer span{display:block}
dialog{padding:35px 28px}
dialog h2{font-size:40px}}
[hidden]{display:none!important}
body{background:#1a1c19}
main{width:100%;max-width:390px;padding:0;margin:auto}
.game-top{margin:14px 0 15px;font-size:9px;letter-spacing:.04em}
.board{border-radius:12px;background:#242820;border-color:#ffffff25;box-shadow:none}
.cells{inset:0}
.path-layer{inset:0;width:100%;height:100%}
.cell{border-color:#ffffff26}
.cell .dot{font-size:19px;width:54%;box-shadow:none}
.cell::before{inset:0;border-radius:0}
.cell.visited::before{opacity:.16}
.cell.tip::after{content:'';position:absolute;width:12px;height:12px;border-radius:50%;background:#f7d4ad;border:2px solid #fff;z-index:1}
.cell:has(.dot)::after{display:none}
.cell.reached .dot{box-shadow:none}
.path-layer #trail{stroke-width:18}
.path-layer #trail-glow{stroke-width:28;opacity:.12}
.actions{margin-top:14px;gap:9px}
.actions button{padding:11px 6px;border-radius:6px;font-size:11px;min-height:43px;background:#ffffff03}
.actions span{margin-right:6px}
.status{font-size:10px;min-height:34px;margin:12px 0 6px;line-height:1.7}
.board.won .cell{border-color:#ffffff14}
.board.won .cell .dot{opacity:1}
.inline-result{border:1px solid #de815245;border-radius:8px;padding:15px 16px;margin:12px 0 5px;background:#de81520b}
.result-heading{display:flex;justify-content:space-between;align-items:center;font-size:15px;font-weight:700}
.result-heading span{font-size:12px;color:#e5a97e}
.inline-result p{font-size:10px;line-height:1.7;color:var(--muted);margin:9px 0}
.inline-result button{padding:10px 0;font-size:11px;color:#e5a97e}
.timer{font-size:13px}
@media(max-width:400px){.cell .dot{font-size:16px}
.actions button{font-size:10px}}
body{background:#242424;--muted:#ccc;--accent:#e7aa72;--line:#666}
.game-top{font-size:11px;color:#ddd;margin:10px 0 12px}
.timer{font-size:14px}
.board{background:#303030;border-color:#898989;border-radius:8px}
.cell{border-color:#ffffff40}
.cell .dot{background:#faf4e8;color:#181818;font-size:19px}
.cell.reached .dot{background:#e7aa72;color:#171717}
.actions button{background:#303030;border:1px solid #777;color:#fff;font-size:12px;min-height:42px}
.actions button:hover:not(:disabled){background:#444}
.status{font-size:11px;color:#ddd;min-height:32px;line-height:1.5;margin:10px 0 0}
.inline-result{background:#303d2e;border-color:#708266}
.result-heading span{color:#def1d1}
.inline-result p{color:#e3eadf;font-size:12px}
.inline-result button{font-size:12px;color:#fff}
.status:empty{display:none}
.status:not(:empty){min-height:0}