@font-face{font-family:"Pixelify";src:url(fonts/pixelify.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{
  --bg:#0f0a0b;
  --panel:#181011;
  --panel-2:#21150f;
  --line:#3a201c;
  --text:#ecdfd2;
  --muted:#a6948a;
  --red:#c8321f;
  --ember:#ef6a2c;
  --gold:#f2c14e;
  --pixel:"Pixelify",ui-monospace,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
img{display:block;max-width:100%}
.px{image-rendering:pixelated}
a{color:var(--ember)}
a:hover{color:var(--gold)}
h1,h2,h3{font-family:var(--pixel);font-weight:600;line-height:1.15;letter-spacing:.01em}
code{font:.92em ui-monospace,"SF Mono",Menlo,Consolas,monospace}

.wrap{max-width:1040px;margin:0 auto;padding:0 16px}

/* top bar */
.top{border-bottom:2px solid var(--line);background:var(--bg)}
.top .wrap{display:flex;align-items:center;gap:20px;height:60px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font:600 22px var(--pixel)}
.brand img{width:32px;height:32px;border:2px solid var(--line)}
.top nav{margin-left:auto;display:flex;align-items:center;gap:18px}
.top nav a{color:var(--muted);text-decoration:none}
.top nav a:hover,.top nav a[aria-current]{color:var(--text)}

/* buttons: flat, square, a hard shadow that sinks on press */
.btn{display:inline-block;font:600 17px var(--pixel);text-decoration:none;cursor:pointer;
  padding:11px 20px;border:2px solid #000;background:var(--red);color:#fff4ea;
  box-shadow:0 4px 0 #5a120a;transition:transform .06s,box-shadow .06s,background .1s}
.btn:hover{background:#dc3b26;color:#fff}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #5a120a}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line);box-shadow:0 4px 0 #000}
.btn.ghost:hover{border-color:var(--muted)}
.btn.small{font-size:15px;padding:6px 12px;box-shadow:0 3px 0 #5a120a}
.top nav .btn{color:#fff4ea}

/* home */
.hero{position:relative}
.hero img{width:100%;height:clamp(240px,46vw,480px);object-fit:cover;object-position:50% 40%}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(transparent,var(--bg))}
.intro{position:relative;margin-top:-120px;z-index:1;padding-bottom:8px}
.intro h1{font-size:clamp(56px,10vw,96px);margin:0;color:var(--text);text-shadow:0 4px 0 #000}
.intro p{font-size:19px;color:var(--text);margin:6px 0 24px;max-width:46ch}
.actions{display:flex;flex-wrap:wrap;gap:12px}

.plays{margin:56px 0 72px}
.plays h2{font-size:26px;margin:0 0 18px}
.cmds{display:grid;grid-template-columns:max-content 1fr;gap:0;border:2px solid var(--line);background:var(--panel);margin:0}
.cmds dt,.cmds dd{margin:0;padding:12px 16px;border-top:2px solid var(--line)}
.cmds dt:first-of-type,.cmds dt:first-of-type+dd{border-top:0}
.cmds dt code{color:var(--gold);font-size:16px}
.cmds dd{color:var(--muted)}

/* store */
.shophead{position:relative}
.shophead img{width:100%;height:clamp(180px,30vw,300px);object-fit:cover;object-position:50% 45%}
.shophead::after{content:"";position:absolute;inset:auto 0 0 0;height:60%;background:linear-gradient(transparent,var(--bg))}
.shopintro{position:relative;z-index:1;margin-top:-84px}
.shopintro h1{font-size:clamp(40px,7vw,64px);margin:0;text-shadow:0 4px 0 #000}
.shopintro p{margin:4px 0 0;color:var(--muted);font-size:17px}
.soon{display:inline-block;margin-top:14px;padding:4px 10px;border:2px dashed var(--line);color:var(--muted);font-size:14px}

.ranks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:32px 0 28px}
.rank{display:flex;flex-direction:column;background:var(--panel);border:2px solid var(--line);box-shadow:0 6px 0 #000;transition:transform .12s,border-color .12s}
.rank:hover{transform:translateY(-3px);border-color:#5b2c22}
.rank figure{margin:0;position:relative;border-bottom:2px solid var(--line);overflow:hidden}
.rank figure img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .4s}
.rank:hover figure img{transform:scale(1.04)}
.rank .tier{position:absolute;left:10px;top:10px;font:600 13px var(--pixel);padding:2px 8px;background:#000c;color:var(--muted);border:1px solid #ffffff22}
.rank .body{display:flex;flex-direction:column;flex:1;padding:18px 18px 20px}
.rank h2{margin:0;font-size:30px}
.price{margin:2px 0 14px;color:var(--muted)}
.price b{font:800 32px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--text);margin-right:6px;letter-spacing:-.01em}
.rank ul{list-style:none;margin:0 0 22px;padding:0;flex:1}
.rank li{position:relative;padding:7px 0 7px 20px;border-top:1px solid var(--line)}
.rank li:first-child{border-top:0}
.rank li::before{content:"";position:absolute;left:2px;top:15px;width:8px;height:8px;background:var(--c)}
.rank .btn{width:100%;text-align:center;font-size:19px;padding:13px}
.rank .note{min-height:1.4em;margin:8px 0 0;font-size:14px;color:var(--muted);text-align:center}

.r1{--c:#cbb8a6}
.r1 h2{color:#e5d6c6}
.r2{--c:var(--ember)}
.r2 h2{color:var(--ember)}
.r3{--c:var(--gold);border-color:#6b4a1a}
.r3 h2{color:var(--gold)}
.r3 .btn{background:var(--gold);color:#2a1606;box-shadow:0 4px 0 #7a5410}
.r3 .btn:hover{background:#f7cf6a;color:#2a1606}
.r3 .btn:active{box-shadow:0 1px 0 #7a5410}
.r3:hover{border-color:#a07224}

.fine{color:var(--muted);font-size:15px;max-width:68ch;margin:0 0 36px}
.faq{margin:0 0 72px;max-width:720px}
.faq details{border-top:2px solid var(--line);padding:12px 0}
.faq details:last-child{border-bottom:2px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";display:inline-block;width:1.2em;font-family:var(--pixel);color:var(--ember)}
.faq details[open] summary::before{content:"-"}
.faq p{margin:8px 0 0 1.2em;color:var(--muted)}

/* text pages */
.doc{max-width:760px;margin:0 auto;padding:40px 16px 64px}
.doc h1{font-size:40px;margin:0 0 4px}
.doc h2{font-size:22px;margin:36px 0 8px;padding-top:14px;border-top:2px solid var(--line)}
.doc ul{padding-left:22px}
.muted{color:var(--muted)}

/* footer */
.foot{border-top:2px solid var(--line);color:var(--muted);font-size:14px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;padding-top:20px;padding-bottom:28px}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--text)}
.foot span{margin-left:auto}

@media (max-width:820px){
  .ranks{grid-template-columns:1fr;max-width:460px}
  .rank figure img{aspect-ratio:5/2}
  .top nav{gap:14px}
}
@media (max-width:520px){
  .top nav a.hide-sm{display:none}
  .intro{margin-top:-80px}
  .cmds{grid-template-columns:1fr}
  .cmds dd{border-top:0;padding-top:0}
  .foot span{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}