/* Atari page: 2600-era console. Woodgrain, black plastic, the orange-red-yellow stripe family, CRT glow. */
.atari{
  --bg:#150c07; --wood:#6b3d1f; --wood2:#8a5230; --plastic:#0d0d0d; --cream:#f1e4c8;
  --orange:#ff7a1a; --red:#d7261e; --yellow:#f5c518; --teal:#1aa6a0; --crt:#7dffb2;
  --wg:repeating-linear-gradient(90deg,#6b3d1f 0 14px,#7a4725 14px 17px,#6b3d1f 17px 31px,#5c3319 31px 33px,#6b3d1f 33px 52px);
  --bars:linear-gradient(to bottom,var(--yellow) 0 25%,var(--orange) 0 50%,var(--red) 0 75%,#8f1a2a 0);
  background:var(--bg)
}
.atari .nav{background:#0d0d0d;border-bottom:0}
.atari .nav::after{height:8px;background:var(--wg)}
.atari .links a:hover,.atari .links a[aria-current=page]{background:var(--orange);color:#000}
.atari .btn{background:var(--orange);border-color:#000;box-shadow:5px 5px 0 var(--red);color:#000}
.atari .btn:hover{box-shadow:3px 3px 0 var(--red)}
.atari .btn.ghost{background:transparent;color:var(--cream);border-color:var(--cream);box-shadow:5px 5px 0 var(--wood2)}
.atari .btn.ghost:hover{background:rgba(241,228,200,.12)}
.atari :focus-visible{outline-color:var(--yellow)}

/* HERO */
.ax{position:relative;overflow:hidden;isolation:isolate;padding:clamp(2.2rem,5vw,4rem) 0 clamp(2.5rem,6vw,4.5rem);
  background:radial-gradient(ellipse 70% 60% at 80% 40%,rgba(255,122,26,.18),transparent 70%),linear-gradient(#150c07,#24120a)}
.ax::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.03) 0 1px,transparent 1px 4px)}
.woodtop{position:absolute;left:0;right:0;bottom:0;height:22px;background:var(--wg);border-top:4px solid #0d0d0d;z-index:1}
.ax-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:2rem}
.ax .crumb a{color:var(--yellow)}
.ax .kick{display:inline-block;margin-top:1.3rem;font:400 .85rem var(--blk);letter-spacing:.2em;color:var(--crt);text-shadow:0 0 10px rgba(125,255,178,.7)}
.ax h1{font:400 clamp(3.6rem,15vw,11rem)/.82 var(--blk);text-transform:uppercase;margin:.5rem 0 .6rem;letter-spacing:.02em;background:none;color:inherit;filter:none}
.ax h1 .a1{display:block;color:var(--orange);text-shadow:4px 4px 0 var(--red),8px 8px 0 #000}
.ax h1 small{display:block;font:400 clamp(1.1rem,3vw,1.9rem)/1.15 var(--disp);text-transform:none;letter-spacing:0;margin-top:1.1rem;color:var(--cream);-webkit-text-fill-color:currentColor;text-shadow:none}
.bars{display:flex;gap:6px;margin:.2rem 0 1.2rem;width:min(360px,80%)}
.bars i{flex:1;height:34px;transform:skewX(-20deg)}
.bars i:nth-child(1){background:var(--yellow)}.bars i:nth-child(2){background:var(--orange)}.bars i:nth-child(3){background:var(--red)}.bars i:nth-child(4){background:#8f1a2a}
.ax p.lead{max-width:50ch;font-size:1.15rem}
.ax .cta{display:flex;flex-wrap:wrap;gap:1rem 1.2rem;margin-top:1.7rem}
.seg{display:flex;flex-wrap:wrap;gap:1rem 1.2rem;margin-top:2rem}
.seg span{font:400 .72rem var(--blk);letter-spacing:.14em;text-transform:uppercase;color:#b9a78a;background:#000;border:3px solid var(--wood);padding:.5rem .9rem .6rem;min-width:7rem}
.seg b{display:block;font:400 1.9rem/1.1 var(--blk);color:var(--crt);text-shadow:0 0 10px rgba(125,255,178,.8);letter-spacing:.06em;margin-top:.15rem}
.art{width:100%;max-width:460px;justify-self:center;filter:drop-shadow(10px 12px 0 #000)}
.art .pd.l{animation:pl 2.6s ease-in-out infinite alternate}.art .pd.r{animation:pl 2.1s ease-in-out infinite alternate-reverse}
.art .pb{animation:pb 2.6s linear infinite alternate}
@keyframes pl{from{transform:translateY(-50px)}to{transform:translateY(40px)}}
@keyframes pb{from{transform:translate(0,-60px)}to{transform:translate(246px,40px)}}

/* ticker */
.tick{overflow:hidden;background:#000;border-block:4px solid var(--wood);padding:.5rem 0}
.tick-in{display:flex;width:max-content;animation:mq 36s linear infinite;font:400 1.1rem var(--blk);letter-spacing:.18em;color:var(--crt);text-shadow:0 0 8px rgba(125,255,178,.8);white-space:pre}
@keyframes mq{to{transform:translateX(-50%)}}

/* PLAY */
.play{padding:clamp(2.5rem,6vw,4.5rem) 0;background:linear-gradient(#24120a,#150c07);border-bottom:8px solid var(--wood)}
.play .kick{margin:0}
.play h2{font-size:clamp(2.1rem,5vw,3.6rem);margin:.4rem 0 1rem;color:var(--cream)}
.play-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:2.5rem 3.5rem;align-items:start}
.play-copy p{max-width:52ch}
.keys{display:grid;gap:.7rem;margin:1.5rem 0}
.keys div{display:grid;grid-template-columns:9.5rem 1fr;gap:.5rem 1rem;align-items:baseline;border-left:5px solid var(--orange);padding-left:.9rem}
.keys dt{font:400 .85rem var(--blk);letter-spacing:.1em;text-transform:uppercase;color:var(--yellow)}
kbd{display:inline-block;min-width:1.7em;text-align:center;padding:.05em .45em;font:700 .9em var(--body);color:#000;background:var(--cream);border-radius:4px;box-shadow:0 2px 0 #8a7a5a}
.fine{font-size:.9rem;color:#bfae92;max-width:62ch;margin-top:1rem}
.tv{background:var(--wg);padding:18px;border-radius:18px;border:4px solid #000;box-shadow:10px 12px 0 #000;width:100%;justify-self:center}
.screen{position:relative;border-radius:22px / 26px;overflow:hidden;border:10px solid #0d0d0d;box-shadow:inset 0 0 40px #000,0 0 0 3px #2a2a2a}
#pong{display:block;width:100%;height:auto;aspect-ratio:8/5;background:#04140a;touch-action:none;cursor:ns-resize;-webkit-user-select:none;user-select:none}
#pong:focus-visible{outline:4px solid var(--yellow);outline-offset:-4px}
.crt{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.28) 0 2px,transparent 2px 4px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55))}
.deck{display:flex;align-items:center;gap:1rem;margin-top:1rem;flex-wrap:wrap}
.switch{display:flex;gap:6px;margin-right:auto}.switch i{width:18px;height:34px;background:#0d0d0d;border:3px solid #2a2a2a;border-radius:3px}.switch i:nth-child(odd){border-top-color:var(--orange)}
.snd{font:700 .95rem var(--body);color:var(--cream);padding:.5rem .8rem;border:2px solid var(--cream);border-radius:4px;background:#0d0d0d}
.snd[aria-pressed=false]{opacity:.6;text-decoration:line-through}

/* RANGE */
.atari .floor{background:linear-gradient(#150c07,#1e1008);color:var(--cream);border-bottom:8px solid var(--wood)}
.atari .bar h2,.atari .learn h2{color:var(--cream)}
.atari .disc{color:#d8c9aa}
.atari .chip{background:#0d0d0d;color:var(--cream);border:3px solid var(--cream);border-radius:4px;box-shadow:3px 3px 0 var(--wood)}
.atari .chip[aria-pressed=true]{background:var(--orange);color:#000;border-color:#000;box-shadow:none;transform:translate(3px,3px)}
.atari .ac{background:#17110c;color:var(--cream);border:4px solid #000;box-shadow:0 0 0 3px var(--wood),9px 9px 0 #000;border-radius:6px;overflow:hidden}
.atari .ac::before{content:"";display:block;height:14px;background:var(--bars)}
.atari .ac .media{background:#fff;padding:8px;margin:12px 12px 0;border:5px solid #000;border-radius:14px;box-shadow:0 0 0 3px #2d2d2d}
.atari .ac .big{aspect-ratio:1/1;object-fit:contain;background:#fff}
.atari .ac .tagx{background:#000;color:var(--yellow);top:14px;left:14px;border:2px solid var(--yellow)}
.atari .ac .strip{background:#17110c;border-top:0;margin:.6rem -8px -8px;padding:.5rem .6rem}
.atari .ac .strip button{border-color:var(--cream);box-shadow:none}
.atari .ac .strip button[aria-current=true]{outline-color:var(--orange)}
.atari .ac h3{color:var(--cream);font-family:var(--blk);font-size:1.12rem;line-height:1.15}
.atari .ac .sp li::before{border-color:#000;background:var(--orange)}
.atari .ac .btn{box-shadow:4px 4px 0 var(--red)}

/* LEARN */
.learn{background:#0d0d0d;padding:clamp(2.5rem,6vw,4.5rem) 0;border-bottom:8px solid var(--wood)}
.learn h2{font:400 clamp(2rem,4.8vw,3.4rem)/1 var(--blk);text-transform:uppercase}
.learn .h2b{margin-top:clamp(2.5rem,6vw,4rem);font-size:clamp(1.7rem,3.8vw,2.6rem)}
.learn .sub{max-width:62ch;margin:1rem 0 1.6rem;font-size:1.1rem}
.parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:1rem}
.parts div{background:#17110c;border:2px solid #3a2a1a;border-top:6px solid var(--orange);padding:1rem 1.1rem 1.2rem}
.parts div:nth-child(3n+2){border-top-color:var(--yellow)}.parts div:nth-child(3n){border-top-color:var(--red)}
.parts dt{font:400 1.05rem var(--blk);margin-bottom:.35rem;text-transform:uppercase}
.parts dd{color:#d8c9aa}
.time{list-style:none;margin-top:1.6rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:1rem}
.time li{position:relative;background:#17110c;border:2px solid #3a2a1a;padding:2.6rem 1.1rem 1.2rem}
.time li::before{content:"";position:absolute;left:1.1rem;top:1.1rem;width:30px;height:12px;background:var(--bars)}
.time b{position:absolute;right:1rem;top:.8rem;font:400 1.15rem var(--blk);color:var(--crt);text-shadow:0 0 8px rgba(125,255,178,.7)}
.time h3{font:400 1.1rem/1.15 var(--blk);margin-bottom:.4rem}
.time p{color:#d8c9aa;font-size:.98rem}
.tw{overflow-x:auto;margin-top:1.4rem;border:4px solid var(--wood);border-radius:6px}
.cmp{width:100%;border-collapse:collapse;min-width:560px;background:#17110c}
.cmp th,.cmp td{padding:.85rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid #3a2a1a}
.cmp thead th{font:400 1rem var(--blk);text-transform:uppercase;letter-spacing:.06em;background:#000;color:var(--orange)}
.cmp thead th:last-child{color:var(--yellow)}
.cmp tbody th{font:400 .85rem var(--blk);text-transform:uppercase;letter-spacing:.08em;color:var(--crt);width:9rem}
.cmp tr:last-child>*{border-bottom:0}
.chk{list-style:none;counter-reset:c;margin-top:1.4rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:1rem}
.chk li{counter-increment:c;background:#17110c;border:2px solid #3a2a1a;padding:1rem 1.1rem 1.2rem}
.chk li::before{content:counter(c);display:grid;place-items:center;width:2.1rem;height:2.1rem;background:var(--orange);color:#000;font:400 1rem var(--blk);margin-bottom:.6rem}
.chk h3{font:400 1.05rem var(--blk);margin-bottom:.3rem}
.chk p{color:#d8c9aa}

/* FAQ + STORE */
.atari .faq{background:#17110c;border-top:0}
.atari .faq h2,.atari .store h2{font:400 clamp(1.8rem,4.4vw,3rem)/1 var(--blk);text-transform:uppercase}
.atari .faq details{border-color:#3a2a1a;background:#0d0d0d}
.atari .faq summary{font:400 1.05rem var(--blk)}
.atari .faq summary::after{color:var(--orange)}
.atari .store{background:#0d0d0d;border-top:8px solid var(--wood)}
.atari .store .btn{box-shadow:5px 5px 0 var(--red)}
.atari footer{background:#0d0d0d;border-top:1px solid #3a2a1a}

@media(max-width:900px){.ax-in,.play-grid{grid-template-columns:minmax(0,1fr)}.art{max-width:320px;order:-1}}
@media(max-width:520px){.keys div{grid-template-columns:1fr}.tv{padding:10px}.screen{border-width:6px}}
@media(prefers-reduced-motion:reduce){.tick-in,.art .pd,.art .pb{animation:none}}