/* Quidperhour — 16-bit value arcade */
@font-face{font-family:"Pix";src:url(type/pixelify-sans-normal-500-700.woff2) format("woff2");font-weight:500 700;font-display:swap}
@font-face{font-family:"Silk";src:url(type/silkscreen-normal-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DMS";src:url(type/dm-sans-normal-400-700.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{--ink:#231942;--ink2:#4A3F6B;--ink3:#7A7196;--cream:#FFF4E0;--card:#FFFBF3;--gold:#FFC23D;--teal:#16C7B7;--pink:#FF4FA3;--violet:#7B4DFF;--orange:#FF7A59;
--px:4px;--sun:linear-gradient(180deg,#FF9A5A 0%,#FF5FA0 48%,#8E5CFF 100%);--fp:"Pix",system-ui,sans-serif;--fs:"Silk",monospace;--fb:"DMS",system-ui,sans-serif;--w:1200px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:400 18px/1.65 var(--fb);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--violet);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--pink)}
:focus-visible{outline:4px solid var(--gold);outline-offset:2px}
::selection{background:var(--gold)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.skp{position:absolute;left:-999px}.skp:focus{left:10px;top:10px;background:var(--ink);color:var(--gold);padding:10px;z-index:99}
.w{max-width:var(--w);margin:0 auto;padding:0 26px}
@media (max-width:640px){.w{padding:0 16px}}
h1,h2,h3{font-family:var(--fp);font-weight:700;line-height:1.08;letter-spacing:.005em;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,6vw,4.4rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}
h3{font-size:1.35rem}
p{margin:0 0 1.05em}
.lbl{font:400 .78rem/1 var(--fs);letter-spacing:.06em;text-transform:uppercase}
.badge{display:inline-block;font:400 .74rem/1 var(--fs);text-transform:uppercase;background:var(--ink);color:var(--gold);padding:8px 10px;margin-bottom:16px;box-shadow:0 calc(-1*var(--px)) 0 0 var(--ink),0 var(--px) 0 0 var(--ink)}
.big{font-size:1.2rem;color:var(--ink2);max-width:620px}

/* pixel frame: notched corners via stacked shadows */
.px{background:var(--card);box-shadow:0 calc(-1*var(--px)) 0 0 var(--ink),0 var(--px) 0 0 var(--ink),calc(-1*var(--px)) 0 0 0 var(--ink),var(--px) 0 0 0 var(--ink),var(--px) calc(var(--px)*2) 0 0 rgba(35,25,66,.25),calc(var(--px)*2) var(--px) 0 0 rgba(35,25,66,.25)}

/* top */
.bar{background:var(--ink);color:var(--cream);position:sticky;top:0;z-index:40}
.bar .w{display:flex;align-items:center;gap:20px;height:68px}
.brand{display:flex;gap:10px;align-items:center;color:var(--cream);text-decoration:none;font:700 1.3rem/1 var(--fp)}
.brand:hover{color:var(--gold)}
.brand .coin{width:30px;height:30px;image-rendering:pixelated}
.links{margin-left:auto;display:flex;gap:4px}
.links a{color:#D9D1F2;text-decoration:none;font:400 .8rem/1 var(--fs);text-transform:uppercase;padding:10px 12px}
.links a:hover,.links a[aria-current]{color:var(--ink);background:var(--gold)}
.burger{display:none;margin-left:auto;font:400 .8rem var(--fs);background:var(--gold);color:var(--ink);border:0;padding:10px 12px;cursor:pointer}
@media (max-width:920px){.burger{display:block}.links{display:none;position:absolute;left:0;right:0;top:68px;background:var(--ink);flex-direction:column;padding:10px 16px 18px}.links.open{display:flex}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font:400 .9rem/1 var(--fs);text-transform:uppercase;text-decoration:none;padding:16px 20px;background:var(--gold);color:var(--ink);border:0;cursor:pointer;box-shadow:0 -4px 0 0 var(--ink),0 4px 0 0 var(--ink),-4px 0 0 0 var(--ink),4px 0 0 0 var(--ink),inset -4px -4px 0 0 #E09A10;transition:transform .08s}
.btn:hover{color:var(--ink);transform:translateY(-2px)}
.btn:active{transform:translateY(2px);box-shadow:0 -4px 0 0 var(--ink),0 4px 0 0 var(--ink),-4px 0 0 0 var(--ink),4px 0 0 0 var(--ink),inset 4px 4px 0 0 #E09A10}
.btn.cy{background:var(--teal);box-shadow:0 -4px 0 0 var(--ink),0 4px 0 0 var(--ink),-4px 0 0 0 var(--ink),4px 0 0 0 var(--ink),inset -4px -4px 0 0 #0E9488}

/* hero */
.sky{background:var(--sun);color:#fff;position:relative;overflow:hidden}
.sky::after{content:"";position:absolute;inset:auto 0 0 0;height:24px;background:repeating-linear-gradient(90deg,var(--cream) 0 24px,transparent 24px 48px),linear-gradient(var(--cream),var(--cream)) 0 12px/100% 12px no-repeat}
.hero{padding:56px 0 76px}
.hero .w{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center}
.hero h1{color:#fff;text-shadow:4px 4px 0 var(--ink)}
.hero .big{color:#FFF1F7}
.hero .shot{box-shadow:0 -6px 0 0 var(--ink),0 6px 0 0 var(--ink),-6px 0 0 0 var(--ink),6px 0 0 0 var(--ink),14px 14px 0 0 rgba(35,25,66,.35)}
@media (max-width:920px){.hero .w{grid-template-columns:1fr}}

/* calculator — signature */
.calc{padding:24px;margin-top:26px;color:var(--ink)}
.calc .row{display:grid;grid-template-columns:110px 1fr 90px;gap:14px;align-items:center;margin:10px 0}
.calc input[type=range]{width:100%;accent-color:var(--violet)}
.calc output{font:400 1rem var(--fs);text-align:right}
.readout{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--ink);color:var(--gold);padding:16px 18px;margin-top:14px}
.readout .n{font:400 clamp(1.8rem,5vw,2.6rem)/1 var(--fs)}
.readout .t{font:400 .78rem/1.3 var(--fs);text-transform:uppercase;text-align:right;color:#fff}
.coins{display:flex;gap:4px;margin-top:10px;height:16px}
.coins i{flex:1;background:#E9E1CF}
.coins i.on{background:var(--gold);box-shadow:inset -3px -3px 0 #E09A10}
@media (max-width:560px){.calc .row{grid-template-columns:1fr 70px}.calc .row label{grid-column:1/-1}}

/* sections */
.sec{padding:74px 0}
.sec.ink{background:var(--ink);color:var(--cream)}
.sec.ink h2{color:var(--gold)}
.sec.tealbg{background:#DDF7F3}
.hd2{display:flex;justify-content:space-between;align-items:end;gap:22px;margin-bottom:32px;flex-wrap:wrap}
.hd2 p{margin:0;max-width:520px;color:var(--ink2)}
.sec.ink .hd2 p{color:#CFC6EA}

/* leaderboard */
.board{width:100%;border-collapse:collapse;font-size:.98rem}
.board th{font:400 .74rem var(--fs);text-transform:uppercase;text-align:left;padding:10px 12px;color:var(--gold);border-bottom:4px solid var(--gold)}
.board td{padding:12px;border-bottom:2px dashed #3E3463;vertical-align:middle}
.board tr:hover td{background:#2E2354}
.board .rk{font:400 1.1rem var(--fs);color:var(--pink);width:56px}
.board a{color:var(--cream);font-weight:700;text-decoration:none}
.board a:hover{color:var(--gold)}
.board .v{font:400 1rem var(--fs);color:var(--teal);white-space:nowrap}
.board .tg{font:400 .7rem var(--fs);text-transform:uppercase;padding:5px 7px;background:var(--teal);color:var(--ink)}
.board .tg.solid{background:var(--gold)}.board .tg.pricey{background:var(--pink);color:#fff}
@media (max-width:700px){.board .hide{display:none}}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.cards.c4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.cards,.cards.c4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cards,.cards.c4{grid-template-columns:1fr}}
.cd{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);transition:transform .1s}
.cd:hover{color:var(--ink);transform:translateY(-4px)}
.cd img{aspect-ratio:3/2;object-fit:cover;width:100%;border-bottom:4px solid var(--ink)}
.cd .in{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.cd h3{margin:0;font-size:1.25rem}
.cd p{margin:0;font-size:.95rem;color:var(--ink2);line-height:1.45}
.cd .stat{margin-top:auto;padding-top:8px;display:flex;justify-content:space-between;align-items:center;font:400 .8rem var(--fs);text-transform:uppercase}
.cd .stat b{font-weight:400;color:var(--violet);font-size:1rem}

/* page head */
.ph{background:var(--sun);color:#fff;padding:24px 0 70px;position:relative}
.ph::after{content:"";position:absolute;inset:auto 0 0 0;height:24px;background:repeating-linear-gradient(90deg,var(--cream) 0 24px,transparent 24px 48px),linear-gradient(var(--cream),var(--cream)) 0 12px/100% 12px no-repeat}
.ph .w{display:grid;grid-template-columns:1.1fr .9fr;gap:38px;align-items:center}
.ph h1{color:#fff;text-shadow:4px 4px 0 var(--ink);font-size:clamp(2.1rem,4.8vw,3.6rem)}
.ph .big{color:#FFF1F7}
.ph .shot{box-shadow:0 -5px 0 0 var(--ink),0 5px 0 0 var(--ink),-5px 0 0 0 var(--ink),5px 0 0 0 var(--ink)}
.trail{font:400 .72rem var(--fs);text-transform:uppercase;padding-bottom:20px;color:#FFE3F0}
.trail a{color:#fff}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.pills span{font:400 .72rem/1 var(--fs);text-transform:uppercase;background:rgba(35,25,66,.55);color:#fff;padding:8px 10px}
@media (max-width:920px){.ph .w{grid-template-columns:1fr}}

/* scoreboard on game page */
.score{padding:22px;margin:0 0 36px}
.score h2{font-size:1.5rem;margin:0 0 14px}
.score table{width:100%;border-collapse:collapse;font-size:.95rem}
.score td,.score th{padding:9px 6px;border-bottom:2px dashed #E3D9C2;text-align:left}
.score th{font:400 .72rem var(--fs);text-transform:uppercase;color:var(--ink3)}
.score .hl{font:400 1.05rem var(--fs);color:var(--violet)}
.tiers{width:100%;border-collapse:collapse;margin:0 0 30px;font-size:.95rem}
.tiers th{font:400 .72rem var(--fs);text-transform:uppercase;background:var(--ink);color:var(--gold);padding:12px;text-align:left}
.tiers td{padding:12px;border-bottom:2px dashed #E3D9C2;vertical-align:top;background:var(--card)}
.tiers td ul{margin:0;padding-left:1.1em;font-size:.9rem}
.tiers .p{font:400 1rem var(--fs);white-space:nowrap}
.tbl-wrap{overflow-x:auto}

/* article */
.grid2{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;padding:46px 0 74px}
.grid2 aside{position:sticky;top:96px;align-self:start}
@media (max-width:1000px){.grid2{grid-template-columns:1fr}.grid2 aside{position:static}}
.copy h2{margin-top:1.4em;scroll-margin-top:96px;font-size:clamp(1.6rem,3vw,2.1rem)}
.copy ul,.copy ol{padding-left:1.3em}
.copy li{margin:.35em 0}
.note{background:#DDF7F3;padding:14px 18px;margin:22px 0;font-weight:600;box-shadow:-4px 0 0 0 var(--teal)}
.toc{padding:18px 20px}
.toc .lbl{display:block;margin-bottom:10px;color:var(--ink3)}
.toc ol{margin:0;padding-left:1.2em;font-size:.94rem}
.toc li{margin:.4em 0}
.toc a{text-decoration:none;color:var(--ink);font-weight:600}
.toc a:hover{color:var(--violet)}
.aside2{padding:18px 20px;margin-top:22px;font-size:.95rem}
.aside2 ul{margin:0;padding-left:1.1em}
.wins{list-style:none;padding:0;margin:0 0 30px;counter-reset:wn}
.wins li{counter-increment:wn;padding:12px 14px 12px 58px;position:relative;margin:0 0 12px;background:var(--card);box-shadow:0 -3px 0 0 var(--ink),0 3px 0 0 var(--ink),-3px 0 0 0 var(--ink),3px 0 0 0 var(--ink);font-weight:600}
.wins li::before{content:counter(wn);position:absolute;left:12px;top:50%;transform:translateY(-50%);width:32px;height:32px;background:var(--gold);font:400 1rem/32px var(--fs);text-align:center}
.faqs details{margin:0 0 14px;padding:4px 18px;background:var(--card);box-shadow:0 -3px 0 0 var(--ink),0 3px 0 0 var(--ink),-3px 0 0 0 var(--ink),3px 0 0 0 var(--ink)}
.faqs summary{cursor:pointer;font-weight:700;padding:13px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faqs summary::-webkit-details-marker{display:none}
.faqs summary::after{content:"▶";font-size:.8rem;color:var(--pink);transition:transform .15s}
.faqs details[open] summary::after{transform:rotate(90deg)}
.faqs p{color:var(--ink2)}
.refs{font-size:.84rem;color:var(--ink3);margin-top:34px}
.refs a{color:var(--ink3);word-break:break-word}

/* footer & consent */
.ft{background:var(--ink);color:#CFC6EA;padding:58px 0 30px;font-size:.93rem}
.ft a{color:#fff;text-decoration:none}.ft a:hover{color:var(--gold)}
.ft .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px}
.ft h4{font:400 .74rem var(--fs);text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.ft ul{list-style:none;margin:0;padding:0}.ft li{margin:8px 0}
.ft .legal{border-top:2px dashed #3E3463;margin-top:38px;padding-top:20px;font-size:.82rem;color:#A99FCC;display:grid;gap:8px}
@media (max-width:820px){.ft .cols{grid-template-columns:1fr 1fr}}
.consent{position:fixed;right:20px;bottom:20px;max-width:420px;z-index:60;padding:18px;display:none;font-size:.92rem}
.consent.show{display:block}
.consent p{margin:0 0 12px}
.consent .r{display:flex;gap:12px}
.consent button{flex:1;font:400 .78rem var(--fs);text-transform:uppercase;padding:12px;border:0;cursor:pointer;background:#EDE5D3;color:var(--ink)}
.consent button+button{background:var(--gold)}
@media (max-width:640px){.consent{left:16px;right:16px;max-width:none}}
.pop{opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s}.pop.on{opacity:1;transform:none}.no-js .pop{opacity:1;transform:none}
@keyframes blink{50%{opacity:0}}.blink{animation:blink 1.1s steps(1) infinite}