@font-face{font-family:SevPixel;src:url('./assets/pixel.ttf') format('truetype');font-display:block}
/* Neutral greys; the art carries the colour. Pixel text only at multiples of 10px so every glyph pixel is whole. */
:root{--bg:#121212;--surface:#1b1b1c;--raise:#242426;--line:#333336;--text:#ecebe7;--muted:#9a9995;--ink:#121212;--sev:#8a1f3d;--good:#79d36a;--safe-t:env(safe-area-inset-top,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);overflow:hidden;overscroll-behavior:none}
body{font:20px/1.4 SevPixel,ui-monospace,monospace;-webkit-font-smoothing:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation}
button:focus-visible,canvas:focus-visible{outline:2px solid var(--text);outline-offset:2px}
[hidden]{display:none!important}
svg{width:1em;height:1em;fill:currentColor;shape-rendering:crispEdges;flex:none}
.stage{position:fixed;inset:0;overflow:hidden;background:var(--bg)}
#game{position:absolute;left:0;top:0;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;outline:none}
.farsi{display:block;image-rendering:pixelated}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:10px 20px;border:2px solid var(--line);background:var(--surface);color:var(--text);font-size:20px;letter-spacing:1px}
.btn:hover{border-color:var(--muted)}
.btn:active{transform:translateY(2px)}
.btn.primary{background:var(--text);color:var(--ink);border-color:var(--text);box-shadow:0 4px 0 #6d6c68}
.btn.primary:active{box-shadow:0 2px 0 #6d6c68}
.icon-btn{display:grid;place-items:center;width:44px;height:44px;font-size:20px;color:var(--text);background:#121212b0;border:2px solid #ffffff22}
.icon-btn:hover{border-color:#ffffff55}
#sound .off,#sound[aria-pressed=false] .on{display:none}#sound[aria-pressed=false] .off{display:inline}

/* Title */
.title{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto auto;justify-items:start;align-content:end;gap:20px;padding:calc(30px + var(--safe-t)) calc(30px + var(--safe-r)) calc(30px + var(--safe-b)) calc(30px + var(--safe-l));background:linear-gradient(90deg,#121212f0 0%,#121212c8 34%,#12121200 70%),linear-gradient(0deg,#121212e6 0%,#12121200 45%)}
.logo{align-self:center}
.logo h1{margin:0;font:normal 60px/1 SevPixel,monospace;letter-spacing:2px;color:var(--text);text-shadow:4px 4px 0 var(--sev)}
.logo .farsi{margin:20px 0 10px}
.logo .sub{margin:0;color:var(--muted);font-size:20px;letter-spacing:2px}
.chapters{display:grid;grid-template-columns:repeat(5,minmax(0,190px));gap:10px;width:100%}
.chapter{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;min-height:80px;padding:10px 12px;text-align:left;background:#1b1b1ce6;border:2px solid var(--line)}
.chapter:hover:not(:disabled){border-color:var(--muted)}
.chapter:disabled{opacity:.45;cursor:default}
.chapter .n{font-size:40px;line-height:1;color:var(--text)}
.chapter .name{display:block;font-size:20px;line-height:1.1;color:var(--text)}
.chapter .seals{display:flex;gap:4px;margin-top:6px}
.chapter .seals canvas{width:20px;height:20px;image-rendering:pixelated;opacity:.25}
.chapter .seals canvas.on{opacity:1}
.chapter .lock{position:absolute;right:8px;top:8px;width:14px;height:18px;image-rendering:pixelated}

/* Cards */
.card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100% - 40px));max-height:calc(100% - 40px);overflow:auto;padding:30px;background:var(--surface);border:2px solid var(--line);box-shadow:0 10px 0 #0006;text-align:center}
.card .num{display:block;font-size:60px;line-height:1;color:var(--muted)}
.card h2{margin:20px 0 10px;font:normal 30px/1.3 SevPixel,monospace;letter-spacing:1px}
.card .farsi{margin:0 auto 20px}
.card .line{margin:0 0 30px;color:var(--muted);font-size:20px}
.card .row,.reward .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.card .stack{display:grid;gap:10px;max-width:280px;margin:0 auto}
.card.pause .farsi{margin-bottom:30px}

/* Reward: the canvas paints the bathroom glory, this is just the receipt. */
.reward{position:absolute;left:0;right:0;bottom:0;display:grid;justify-items:center;gap:20px;padding:20px 20px calc(30px + var(--safe-b))}
.stats{display:flex;gap:30px;padding:10px 20px;background:#fbfaf6;color:var(--ink);border:2px solid var(--ink);font-size:20px}
.stats span{display:flex;align-items:center;gap:10px}
.stats canvas{width:22px;height:22px;image-rendering:pixelated}
.stats .seal{opacity:.25}.stats .seal.on{opacity:1}
.reward .btn{background:#fbfaf6;color:var(--ink);border-color:var(--ink)}
.reward .btn.primary{background:var(--ink);color:#fbfaf6;box-shadow:0 4px 0 #0005}

/* Corner + touch */
.corner{position:absolute;top:calc(10px + var(--safe-t));right:calc(10px + var(--safe-r));display:flex;gap:6px;z-index:5}
.touch{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;padding:0 calc(20px + var(--safe-r)) calc(20px + var(--safe-b)) calc(20px + var(--safe-l));pointer-events:none;z-index:4}
.touch .pad{display:flex;gap:12px}
.touch button{pointer-events:auto;display:grid;place-items:center;width:76px;height:76px;font-size:30px;color:var(--text);background:#12121288;border:2px solid #ffffff30;border-radius:50%;touch-action:none}
.touch button.jump{width:92px;height:92px;font-size:40px}
.touch button.pressed{background:#ecebe755;border-color:#ffffff88}

dialog{max-width:min(520px,calc(100% - 30px));padding:30px;background:var(--surface);color:var(--text);border:2px solid var(--line);font-size:20px}
dialog::backdrop{background:#000a}
dialog p{margin:0 0 20px;line-height:1.5}
dialog .how{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;align-items:center;margin:0 0 30px}

@media (max-width:900px){.chapters{grid-template-columns:repeat(5,minmax(160px,1fr));overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.logo h1{font-size:40px}}
@media (max-width:560px){.title{gap:10px;padding:calc(20px + var(--safe-t)) calc(20px + var(--safe-r)) calc(20px + var(--safe-b)) calc(20px + var(--safe-l));background:linear-gradient(0deg,#121212f5 0%,#121212d0 55%,#12121230 100%)}.logo h1{font-size:30px;text-shadow:3px 3px 0 var(--sev)}.chapters{grid-template-columns:repeat(5,minmax(150px,1fr))}.card{padding:20px}.card .num{font-size:40px}.card h2{font-size:20px}.card .line{font-size:20px;line-height:1.3}.stats{gap:20px;padding:10px}.touch button{width:66px;height:66px}.touch button.jump{width:80px;height:80px}}
@media (max-height:500px) and (orientation:landscape){.title{gap:10px;padding-top:calc(16px + var(--safe-t));padding-bottom:calc(16px + var(--safe-b))}.logo h1{font-size:40px}.logo .farsi{margin:10px 0 6px}.chapter{min-height:60px}.card{padding:20px}.card .num{font-size:40px}.card h2{margin:10px 0}.card .line{margin-bottom:20px}.touch button{width:64px;height:64px}.touch button.jump{width:76px;height:76px}.reward{gap:10px;padding-bottom:calc(14px + var(--safe-b))}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* 404 page */
.notfound{overflow:auto;display:grid;place-items:center;min-height:100%}
.notfound main{display:grid;justify-items:center;gap:20px;padding:30px;text-align:center}
.notfound img{image-rendering:pixelated}
.notfound h1{margin:0;font:normal 60px/1 SevPixel,monospace;text-shadow:4px 4px 0 var(--sev)}
.notfound p{margin:0;color:var(--muted)}
.notfound a{text-decoration:none}