/* AskHound — "arcade cabinet + game manual". Pixel display type, hyperlegible body, no gradients-as-decoration. */
@font-face{font-family:"Silkscreen";src:url(/assets/fonts/silkscreen-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Silkscreen";src:url(/assets/fonts/silkscreen-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Press Start 2P";src:url(/assets/fonts/pressstart.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(/assets/fonts/atkinson-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(/assets/fonts/atkinson-700.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --ink:#100e0b;--ink2:#1b1813;--ink3:#26211a;--line:#3d3528;
  --amber:#ffc23d;--amber2:#ffd877;--red:#ff5a3c;--phos:#a8ff8f;
  --cream:#f3ecdb;--paper:#f3ecdb;--paper2:#e7dcc2;--txt:#1d1913;--mute-d:#5a5040;--mute:#bdb197;
  --hn:#ff8a2a;--se:#ff7bd8;--bsky:#62c9ff;--gh:#b4ec4a;
  --px:"Silkscreen",ui-monospace,monospace;--arcade:"Press Start 2P",ui-monospace,monospace;
  --body:"Atkinson Hyperlegible",ui-sans-serif,system-ui,sans-serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-padding-top:16px}
body{margin:0;background:var(--ink);color:var(--cream);font:18px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img,svg{display:block}
a{color:var(--amber);text-underline-offset:3px;text-decoration-thickness:2px}
a:hover{color:var(--amber2)}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.paper :focus-visible{outline-color:var(--txt)}
.skip{position:absolute;left:-999px;top:8px;background:var(--amber);color:var(--ink);padding:8px 12px;font:700 14px var(--px);z-index:10}
.skip:focus{left:8px}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px}
.narrow{max-width:760px}
code,pre{font-family:var(--mono);font-size:.86em}
:not(pre)>code{background:rgba(255,194,61,.12);border:1px solid rgba(255,194,61,.35);padding:1px 5px;border-radius:2px;word-break:break-word}
.paper :not(pre)>code{background:#fff8e6;border-color:#cdbf9f}
h1,h2,h3{font-family:var(--px);font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1.05;margin:0}
h2{font-size:clamp(28px,4vw,44px);margin:0 0 18px}
h3{font-size:20px;margin:0 0 8px}
.kicker{font:12px/1.4 var(--arcade);color:var(--red);letter-spacing:.04em;margin:0 0 14px;text-transform:uppercase}
.paper .kicker{color:#a02a14}
.small{font-size:15px}.note{font-size:15px;color:var(--mute)}
.paper .note{color:var(--mute-d)}

/* ---------- header ---------- */
header.site{background:var(--ink);border-bottom:4px solid var(--amber);position:relative;z-index:2}
header.site .wrap{display:flex;align-items:center;gap:22px;min-height:64px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;color:var(--cream);text-decoration:none;font:15px var(--arcade);letter-spacing:.02em}
.logo svg{width:44px;height:33px}
header nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
header nav a{font:700 15px var(--px);text-transform:uppercase;color:var(--cream);text-decoration:none;padding:8px 10px}
header nav a:hover{background:var(--ink3);color:var(--amber)}
header nav a.coin{background:var(--amber);color:var(--ink);box-shadow:3px 3px 0 var(--red)}
header nav a.coin:hover{background:var(--amber2);color:var(--ink)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--amber);color:var(--ink);border:0;border-radius:0;padding:14px 20px;font:700 17px var(--px);text-transform:uppercase;text-decoration:none;cursor:pointer;box-shadow:4px 4px 0 var(--red);transition:transform .08s,box-shadow .08s}
.btn:hover{background:var(--amber2);color:var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--red)}
.btn.ghost{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 2px var(--cream)}
.btn.ghost:hover{background:var(--cream);color:var(--ink)}
.paper .btn.ghost{color:var(--txt);box-shadow:inset 0 0 0 2px var(--txt)}
.paper .btn.ghost:hover{background:var(--txt);color:var(--paper)}
.btn.small{padding:7px 10px;font-size:13px;box-shadow:none}
.btn.small.ghost{box-shadow:inset 0 0 0 2px currentColor}

/* ---------- cabinet hero ---------- */
.cab{background:var(--ink);padding:22px 0 46px;position:relative;overflow:hidden}
.cab::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,194,61,.09) 1px,transparent 1px);background-size:16px 16px;pointer-events:none}
.cab .wrap{position:relative}
.hud{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;font:12px/1.6 var(--arcade);text-transform:uppercase;margin-bottom:16px}
.hud .r{text-align:right;color:var(--mute)}
.hud .one{color:var(--red)}
.hud .hi{text-align:center}.hud .hi b{display:block;color:var(--amber);font-weight:400;font-size:20px;margin-top:6px}
.hud .hi small{display:block;color:var(--mute);font-size:9px;margin-top:6px}
.cab h1{font-size:clamp(34px,5.4vw,68px);max-width:20ch}
.cab h1 em{font-style:normal;color:var(--amber)}
.page-hero h1{font-size:clamp(30px,5vw,58px);max-width:22ch}
.lede{font-size:clamp(17px,1.8vw,20px);color:#e6dcc4;max-width:64ch;margin:14px 0 0}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:28px;align-items:end}
.hero-grid .mascot{justify-self:end}
.mascot svg{width:190px;height:auto}
.f2,.f3{visibility:hidden}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* sprite animation (2-frame, stepped) */
@keyframes f1{0%,49.9%{visibility:visible}50%,100%{visibility:hidden}}
@keyframes f2{0%,49.9%{visibility:hidden}50%,100%{visibility:visible}}
.sniff .f1{animation:f1 1.1s steps(1) infinite}.sniff .f2{animation:f2 1.1s steps(1) infinite}
.running .f1{animation:f1 .28s steps(1) infinite}.running .f3{animation:f2 .28s steps(1) infinite}

/* ---------- CRT screen ---------- */
.crt{margin-top:22px;background:#0b0f0c;border:12px solid var(--ink3);border-radius:22px;box-shadow:0 0 0 2px #000,0 0 0 4px var(--line),inset 0 0 70px rgba(0,0,0,.85);padding:22px;position:relative;overflow:hidden}
.crt::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.22) 2px 3px);border-radius:10px}
.crt>*{position:relative;z-index:1}
.crt-top{display:flex;justify-content:space-between;gap:12px;font:11px/1.5 var(--arcade);color:var(--phos);text-transform:uppercase;margin-bottom:12px;flex-wrap:wrap}
.crt-top .blink{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
#ah-form{display:flex;gap:12px;flex-wrap:wrap}
#q{flex:1;min-width:0;width:100%;background:#000;border:3px solid var(--amber);color:var(--cream);font:22px/1.2 var(--body);padding:14px 16px;border-radius:0;caret-color:var(--amber)}
#q::placeholder{color:#8f8571}
#ah-form .btn{font-size:18px}
.opts{display:flex;gap:8px 16px;flex-wrap:wrap;align-items:center;margin-top:14px;font-size:15px;color:var(--cream)}
.opts label{display:inline-flex;gap:7px;align-items:center;cursor:pointer}
.opts input[type=checkbox]{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:2px solid var(--cream);background:#000;margin:0;display:grid;place-content:center;cursor:pointer}
.opts input[type=checkbox]:checked{background:var(--amber);border-color:var(--amber);box-shadow:inset 0 0 0 3px #000}
.opts select,.opts input[type=text]{background:#000;color:var(--cream);border:2px solid var(--line);border-radius:0;font:15px var(--body);padding:6px 8px}
#ctx{min-width:240px;flex:1}
.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.chips .lbl{font:10px var(--arcade);color:var(--phos);text-transform:uppercase;margin-right:4px}
.chip{background:transparent;color:var(--amber);border:2px dashed rgba(255,194,61,.6);padding:6px 10px;font:700 14px var(--px);text-transform:lowercase;cursor:pointer;border-radius:0}
.chip:hover{border-style:solid;background:rgba(255,194,61,.1)}
.track{display:flex;align-items:flex-end;gap:14px;min-height:66px;margin-top:16px;border-bottom:3px dotted #2e3a2c;padding-bottom:4px;overflow:hidden}
.track .runner{width:84px;flex:none;transition:transform .2s}
.track .runner svg{width:84px;height:auto}
.track.busy .runner{animation:trot 1.6s linear infinite alternate}
@keyframes trot{from{transform:translateX(0)}to{transform:translateX(min(52vw,560px))}}
.srcs{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto;padding-bottom:6px}
.srcs span{font:10px/1 var(--arcade);text-transform:uppercase;padding:6px 7px;border:2px solid #2e3a2c;color:#7c8a78}
.srcs span.wait{color:var(--amber);border-color:var(--amber)}
.srcs span.ok{color:#000;background:var(--phos);border-color:var(--phos)}
.srcs span.err{color:#000;background:var(--red);border-color:var(--red)}
#status{margin-top:12px;font-size:15px;color:var(--mute);min-height:1.6em}
#status b{font:16px var(--arcade);color:var(--amber);font-weight:400}
#status .row{display:inline-flex;gap:8px;margin-left:10px;flex-wrap:wrap}
#results{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.res{background:rgba(255,255,255,.03);border-left:6px solid var(--src,#666);padding:12px 14px}
.res.pop{animation:pop .26s steps(3)}
@keyframes pop{from{transform:translateX(-14px);opacity:0}to{transform:none;opacity:1}}
.res .meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--mute)}
.badge{font:10px/1 var(--arcade);text-transform:uppercase;padding:5px 6px;color:#000;background:var(--src,#999)}
.pips{display:inline-flex;gap:2px;align-items:center}
.pips i{width:8px;height:8px;background:#38402f;display:inline-block}
.pips i.on{background:var(--phos)}
.res a.t{display:block;margin-top:6px;color:var(--cream);font-weight:700;font-size:18px;text-decoration:none}
.res a.t:hover{color:var(--amber);text-decoration:underline}
.res p{margin:4px 0 0;color:#cfc4aa;font-size:15px;overflow-wrap:anywhere}
.s-hn{--src:var(--hn)}.s-se{--src:var(--se)}.s-bsky{--src:var(--bsky)}.s-gh{--src:var(--gh)}
.privacy-line{font-size:14px;color:var(--mute);margin:14px 0 0}

/* ---------- paper sections (game manual) ---------- */
.paper{background:var(--paper);color:var(--txt);padding:64px 0}
.paper.alt{background:var(--paper2)}
.paper a{color:#8a3108}
.paper a:hover{color:#5c1f02}
.prose{max-width:72ch}
.prose p,.prose li{font-size:18px}
.prose h2{margin-top:44px}.prose h2:first-child{margin-top:0}
.prose ol,.prose ul{padding-left:1.3em}
.prose li{margin:6px 0}
.manual-grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:40px}
.manual-grid .side{position:sticky;top:20px;align-self:start}
.stages{list-style:none;padding:0;margin:0;counter-reset:st;display:grid;gap:0}
.stages li{counter-increment:st;display:grid;grid-template-columns:96px 1fr;gap:20px;padding:22px 0;border-top:3px solid var(--txt)}
.stages li:last-child{border-bottom:3px solid var(--txt)}
.stages li::before{content:"0" counter(st);font:34px/1 var(--arcade);color:#a02a14}
.stages h3{font-size:24px}
.stages p{margin:6px 0 0}
table{border-collapse:collapse;width:100%;margin:18px 0;font-size:16px;background:#fffaf0}
th,td{border:2px solid var(--txt);padding:10px 12px;text-align:left;vertical-align:top}
th{background:var(--txt);color:var(--amber);font:700 14px var(--px);text-transform:uppercase}
th[scope=row]{background:transparent;color:inherit;font:700 15px/1.4 var(--body);text-transform:none}
.table-scroll{overflow-x:auto}
.yes{font:12px var(--arcade);color:#2f6a12}.no{font:12px var(--arcade);color:#a02a14}
.honest{border:3px solid var(--txt);background:#fff8e6;padding:18px 20px;box-shadow:6px 6px 0 var(--txt);margin:26px 0}
.honest h3{margin-bottom:6px}

/* ---------- dark sections ---------- */
.dark{background:var(--ink2);padding:64px 0;border-top:4px solid var(--ink3)}
.carts{display:grid;gap:22px}.carts>*,.manual-grid>*,.hero-grid>*{min-width:0}
.cart{border:3px solid var(--line);background:var(--ink)}
.cart .lbl{display:flex;justify-content:space-between;gap:10px;align-items:center;background:var(--ink3);padding:10px 14px;flex-wrap:wrap}
.cart .lbl h3{margin:0;font-size:18px;color:var(--amber)}
.cart .lbl span{font-size:14px;color:var(--mute)}
.cart .body{padding:14px}
.cart .body p{margin:0 0 10px;font-size:16px}
pre{position:relative;background:#000;color:#f0e6cc;border:2px solid var(--line);padding:16px;overflow:auto;margin:10px 0;line-height:1.5}
.paper pre{background:var(--ink);color:#f0e6cc;border-color:var(--txt)}
pre .copy{position:absolute;top:8px;right:8px}
.policy{border-left:6px solid var(--red);padding:12px 16px;background:rgba(255,90,60,.08);font-size:16px;margin-top:24px}
.paper .policy{background:#fff1e4}

/* ---------- pricing: character select ---------- */
.select{display:grid;gap:12px;margin-top:18px}
.pl{display:grid;grid-template-columns:150px 170px minmax(0,1fr) 230px;gap:18px;align-items:center;border:3px solid var(--line);background:var(--ink);padding:16px 18px;position:relative}
.pl:hover,.pl:focus-within{border-color:var(--amber)}
.pl:hover::before,.pl:focus-within::before{content:"▶";position:absolute;left:-26px;top:50%;transform:translateY(-50%);color:var(--amber);font:16px var(--arcade)}
.pl .name{font:700 22px/1.1 var(--px);text-transform:uppercase}
.pl .name small{display:block;font:10px/1.5 var(--arcade);color:var(--mute);margin-top:6px}
.pl .price{font:24px/1 var(--arcade);color:var(--amber)}
.pl .price small{display:block;font:14px var(--body);color:var(--mute);margin-top:8px}
.pl ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pl li{font-size:14px;border:1px solid var(--line);padding:3px 8px;background:var(--ink2)}
.pl .btn{justify-content:center;width:100%;font-size:15px;padding:12px}
.pl.best{border-color:var(--amber);box-shadow:6px 6px 0 var(--amber)}
.pl .tag{position:absolute;top:-13px;right:16px;background:var(--red);color:#000;font:10px var(--arcade);padding:5px 7px;text-transform:uppercase}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:10px;max-width:880px}
details{border:3px solid var(--txt);background:#fffaf0}
summary{cursor:pointer;padding:14px 16px 14px 60px;font-weight:700;font-size:18px;position:relative;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"?";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:grid;place-content:center;background:var(--amber);color:var(--txt);font:14px var(--arcade);box-shadow:inset -3px -3px 0 #b8860b,inset 3px 3px 0 #ffe7a8}
details[open] summary::before{content:"!";background:var(--red);box-shadow:inset -3px -3px 0 #a0301c,inset 3px 3px 0 #ffb19f}
details p{margin:0;padding:0 16px 16px 60px}

/* ---------- level select (index pages) ---------- */
.levels{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:10px;max-width:880px}
.levels a{display:flex;gap:16px;align-items:center;padding:16px 18px;border:3px solid var(--line);background:var(--ink2);color:var(--cream);text-decoration:none;font:700 20px var(--px);text-transform:uppercase}
.levels a::before{content:"▶";font:14px var(--arcade);color:var(--ink2)}
.levels a:hover,.levels a:focus-visible{border-color:var(--amber);color:var(--amber)}
.levels a:hover::before,.levels a:focus-visible::before{color:var(--amber)}
.levels .n{font:12px var(--arcade);color:var(--red);min-width:44px}

/* ---------- footer ---------- */
footer.site{background:#000;color:var(--mute);padding:40px 0 50px;border-top:4px solid var(--amber);font-size:15px}
footer.site .credits{font:12px var(--arcade);color:var(--amber);text-transform:uppercase;margin-bottom:16px}
footer.site nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:18px}
footer.site nav a{color:var(--cream);font:700 15px var(--px);text-transform:uppercase;text-decoration:none}
footer.site nav a:hover{color:var(--amber);text-decoration:underline}
footer.site p{max-width:80ch;margin:0}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}.hero-grid .mascot{display:none}
  .manual-grid{grid-template-columns:1fr}.manual-grid .side{position:static}
  .pl{grid-template-columns:1fr 1fr}.pl ul{grid-column:1/-1}.pl .btn{grid-column:1/-1}
  .pl:hover::before,.pl:focus-within::before{display:none}
}
@media (max-width:620px){
  body{font-size:17px}
  .wrap{padding:0 16px}
  header.site .wrap{gap:8px;padding-top:10px;padding-bottom:6px}
  header nav{margin-left:0;width:100%;gap:0}
  header nav a{padding:6px 8px;font-size:14px}
  .hud{grid-template-columns:1fr 1fr;font-size:10px}.hud .r{display:none}.hud .hi{text-align:right}
  .crt{border-width:8px;border-radius:14px;padding:14px;margin-left:-6px;margin-right:-6px}
  #q{font-size:19px}
  #ah-form .btn{width:100%;justify-content:center}
  .stages li{grid-template-columns:1fr;gap:6px}
  .paper,.dark{padding:46px 0}
  .pl{grid-template-columns:1fr}
  summary{padding-left:56px;font-size:17px}details p{padding-left:16px}
  .track .srcs{margin-left:0}
  .track{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .crt::after{display:none}
  .f2,.f3{visibility:hidden!important}.f1{visibility:visible!important}
  .crt-top .blink{opacity:1}
}
@media print{.crt::after,.cab::before{display:none}}
.manual-grid .side h2{font-size:clamp(26px,2.6vw,32px)}
@media (max-width:620px){.crt-top .blink{display:none}.hud .hi small{font-size:8px}}
/* mobile above-the-fold: compact header + one-line scoreboard so the search + START show on first screen */
@media (max-width:620px){
  header.site .wrap{flex-wrap:nowrap;min-height:52px;padding-top:6px;padding-bottom:6px;gap:10px}
  .logo{font-size:13px}.logo svg{width:36px;height:27px}
  header nav{width:auto;margin-left:auto;flex-wrap:nowrap}
  header nav a:not(.coin){display:none}
  header nav a.coin{font-size:13px;padding:7px 9px}
  .cab{padding:12px 0 34px}
  .hud{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;font-size:10px}
  .hud .hi{display:flex;align-items:baseline;gap:8px;text-align:right}
  .hud .hi b{display:inline;font-size:14px;margin:0}
  .hud .hi small{display:none}
  .cab h1,.page-hero h1{font-size:clamp(26px,7.6vw,32px)}
  .kicker{margin-bottom:8px}
  .lede{font-size:16px;margin-top:10px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
  .crt{margin-top:14px}
  .crt-top{display:none}
}
@media (max-width:620px){.prose>table{display:block;overflow-x:auto}.prose code{overflow-wrap:anywhere}}

/* ---------- billing toggle (monthly/yearly) ---------- */
.period{display:inline-flex;border:3px solid var(--line);margin-top:16px}
.period button{font:11px var(--arcade);text-transform:uppercase;background:var(--ink);color:var(--mute);border:0;padding:10px 14px;cursor:pointer}
.period button[aria-pressed="true"]{background:var(--amber);color:var(--ink)}
.select[data-show="m"] .y,.select[data-show="y"] .m{display:none}
.pl .price em{display:block;font:13px var(--body);font-style:normal;color:var(--phos);margin-top:6px}
.pl .ynote{margin:0;font-size:13px;color:var(--mute)}
.select[data-show="m"] .ynote.y{display:none}
.pl > span.m,.pl > span.y{display:block}
.select[data-show="m"] > .pl > span.y,.select[data-show="y"] > .pl > span.m{display:none}
/* ---------- post-search CTA: CONTINUE? ---------- */
.continue{margin-top:16px;border:3px solid var(--amber);background:#120f08;padding:16px 18px;box-shadow:6px 6px 0 var(--amber)}
.continue.over{border-color:var(--red);box-shadow:6px 6px 0 var(--red)}
.continue .c-k{margin:0;font:14px var(--arcade);color:var(--red);text-transform:uppercase}
.continue .c-n{color:var(--amber);margin-left:8px;animation:blink 1s steps(1) infinite}
.continue .c-h{margin:8px 0 4px;font:700 22px/1.15 var(--px);color:var(--cream);text-transform:uppercase}
.continue .c-s{margin:0 0 12px;font-size:15px;color:var(--mute)}
.continue .c-b{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.continue .c-l{font-size:15px}
.linkish{background:none;border:0;color:var(--amber);text-decoration:underline;cursor:pointer;font:inherit;padding:0}
#status .lim{color:var(--mute)}
#ahkey{max-width:220px}
.w-form{display:grid;gap:10px;max-width:640px}.w-form label{display:grid;gap:4px;font-weight:700}
.w-form input,.w-form select{font:16px var(--body);padding:10px;border:2px solid var(--txt);background:#fff;color:var(--txt)}
.w-list li{margin:6px 0}
@media (prefers-reduced-motion: reduce){.continue .c-n{animation:none}}