/* CARTCADE — 90s arcade stylesheet. Pure CSS/SVG art, no images. */
:root{
  --bg:#070714; --panel:#0e0e22; --pink:#ff2e88; --cyan:#00e5ff;
  --yellow:#ffe600; --purple:#9d4dff; --green:#39ff6a; --red:#ff3b3b;
  --ink:#e8e8ff; --dim:#8a8aa8;
  /* φ · the golden ratio runs this layout: 61.8/38.2 splits, golden-rectangle
     cartridges (1:1.618), a 16:10 (≈φ) game screen, and Fibonacci spacing */
  --phi:1.6180339887;
  --sp1:8px; --sp2:13px; --sp3:21px; --sp4:34px; --sp5:55px; --sp6:89px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--ink);
  font-family:'VT323', 'Courier New', monospace; font-size:20px; line-height:1.4;
  min-height:100vh;
  background-image:
    radial-gradient(circle at 20% 0%, rgba(157,77,255,.12), transparent 40%),
    radial-gradient(circle at 80% 10%, rgba(255,46,136,.10), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(0,229,255,.08), transparent 50%);
}
/* CRT scanlines over everything */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
a{color:var(--cyan); text-decoration:none;}
.pixel{font-family:'Press Start 2P', monospace;}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:14px;
  padding:10px 16px; background:rgba(7,7,20,.92); backdrop-filter:blur(6px);
  border-bottom:3px solid var(--pink);
  box-shadow:0 2px 18px rgba(255,46,136,.35);
}
.logo{display:flex; align-items:center; gap:10px; white-space:nowrap;}
.logo-img{width:36px; height:36px; filter:drop-shadow(0 0 6px rgba(255,46,136,.8));}
.logo .wordmark{font-family:'Press Start 2P',monospace; font-size:18px; color:#fff;
  text-shadow:0 0 6px var(--pink), 0 0 18px var(--pink), 3px 3px 0 var(--purple);}
.logo .wordmark span{color:var(--yellow); text-shadow:0 0 6px var(--yellow),0 0 18px var(--yellow),3px 3px 0 #7a5c00;}
.search{flex:1; max-width:520px; margin:0 auto; position:relative;}
.search input{
  width:100%; padding:10px 14px 10px 40px; font-family:'VT323',monospace; font-size:22px;
  background:#000; color:var(--green); border:2px solid var(--cyan); border-radius:6px;
  box-shadow:inset 0 0 12px rgba(0,229,255,.25), 0 0 10px rgba(0,229,255,.25);
}
.search input::placeholder{color:#2a6a5a;}
.search::before{content:"🔍"; position:absolute; left:12px; top:8px; font-size:20px;}
.btn{
  font-family:'Press Start 2P',monospace; font-size:12px; cursor:pointer;
  color:#001318; background:var(--yellow); border:0; border-radius:8px; padding:12px 16px;
  box-shadow:0 4px 0 #a38f00, 0 0 14px rgba(255,230,0,.5);
  transition:transform .08s;
}
.btn:active{transform:translateY(3px); box-shadow:0 1px 0 #a38f00;}
.btn.pink{background:var(--pink); color:#fff; box-shadow:0 4px 0 #8f1749, 0 0 14px rgba(255,46,136,.5);}
.btn.pink:active{box-shadow:0 1px 0 #8f1749;}
.btn.cyan{background:var(--cyan); box-shadow:0 4px 0 #00707e, 0 0 14px rgba(0,229,255,.5);}
.btn.cyan:active{box-shadow:0 1px 0 #00707e;}

/* ---------- marquee hero ---------- */
.marquee{
  text-align:center; padding:var(--sp5) 16px var(--sp4); position:relative; overflow:hidden;
  border-bottom:3px solid var(--cyan);
  background:
    repeating-linear-gradient(90deg, rgba(255,46,136,.06) 0 24px, transparent 24px 48px),
    linear-gradient(180deg, #12071f 0%, #070714 100%);
}
.marquee h1{
  font-family:'Press Start 2P',monospace; font-size:clamp(30px,7vw,64px); color:#fff;
  text-shadow:0 0 8px var(--cyan), 0 0 30px var(--cyan), 0 0 60px var(--purple), 4px 4px 0 var(--pink);
  animation:flicker 4s infinite;
}
.marquee h1 .cade{color:var(--pink); text-shadow:0 0 8px var(--pink),0 0 30px var(--pink),0 0 60px var(--red),4px 4px 0 var(--purple);}
@keyframes flicker{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.6}94%{opacity:1}96%{opacity:.75}97%{opacity:1}}
.tagline{margin-top:16px; font-size:32px; color:var(--yellow); text-shadow:0 0 12px rgba(255,230,0,.6); letter-spacing:2px;}
.blink{margin-top:14px; font-family:'Press Start 2P',monospace; font-size:13px; color:var(--green);
  text-shadow:0 0 10px var(--green); animation:blink 1.1s steps(2) infinite;}
@keyframes blink{50%{opacity:0}}
.stats{margin-top:14px; color:var(--dim); font-size:22px;}
.stats b{color:var(--cyan);}

/* scrolling ticker */
.ticker{overflow:hidden; white-space:nowrap; border-top:2px solid var(--purple); border-bottom:2px solid var(--purple);
  background:#000; padding:8px 0;}
.ticker span{display:inline-block; padding-left:100%; animation:tick 30s linear infinite;
  font-family:'Press Start 2P',monospace; font-size:11px; color:var(--yellow); text-shadow:0 0 8px rgba(255,230,0,.7);}
@keyframes tick{to{transform:translateX(-100%)}}

/* ---------- filter chips ---------- */
.filters{position:sticky; top:61px; z-index:90; display:flex; gap:var(--sp2); overflow-x:auto;
  padding:12px 16px; background:rgba(7,7,20,.94); border-bottom:2px solid #23234a; scrollbar-width:none;}
.filters::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto; font-family:'Press Start 2P',monospace; font-size:10px; padding:10px 14px;
  border:2px solid var(--purple); border-radius:20px; background:#141432; color:var(--ink); cursor:pointer;}
.chip.active{background:var(--purple); color:#fff; box-shadow:0 0 12px rgba(157,77,255,.7);}

/* ---------- cartridge grid ---------- */
.shelf{max-width:1400px; margin:0 auto; padding:var(--sp4) 16px 60px;}
.grid{display:grid; gap:var(--sp3); grid-template-columns:repeat(2,1fr);}
@media(min-width:640px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1280px){.grid{grid-template-columns:repeat(5,1fr)}}

.cart{
  display:block; background:linear-gradient(180deg,#2a2a3e,#171728);
  border-radius:10px 10px 14px 14px; border:2px solid #3a3a5c;
  overflow:hidden; position:relative; transition:transform .15s, box-shadow .15s;
  box-shadow:0 6px 0 #0a0a16, 0 10px 24px rgba(0,0,0,.5);
}
.cart:hover{transform:translateY(-8px) scale(1.02); box-shadow:0 14px 0 #0a0a16, 0 0 24px var(--glow,var(--cyan));}
.cart-top{height:34px; background:repeating-linear-gradient(90deg,#3d3d5c 0 10px,#2c2c44 10px 20px);
  border-bottom:2px solid #101020;}
.cart-label{padding:12px 10px 10px; aspect-ratio:1/1.618; display:flex; flex-direction:column; gap:6px; overflow:hidden;
  background:linear-gradient(180deg, var(--lc1,#ff2e88), var(--lc2,#8f1749));
  clip-path:polygon(0 0,100% 0,100% 88%,50% 100%,0 88%);}
.cart-cat{font-family:'Press Start 2P',monospace; font-size:8px; color:#fff; opacity:.9; letter-spacing:1px;}
.cart-title{font-family:'Press Start 2P',monospace; font-size:12px; line-height:1.7; color:#fff;
  text-shadow:2px 2px 0 rgba(0,0,0,.55); word-break:break-word;}
.cart-year{margin-top:auto; font-size:18px; color:rgba(255,255,255,.85);}
.cart-bottom{padding:8px; text-align:center; font-family:'Press Start 2P',monospace; font-size:9px; color:var(--dim); letter-spacing:2px;}
.cart .play-hint{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); opacity:0; transition:opacity .15s;
  font-family:'Press Start 2P',monospace; font-size:14px; color:var(--yellow); text-shadow:0 0 12px var(--yellow);}
.cart:hover .play-hint{opacity:1;}

.loading{text-align:center; padding:30px; color:var(--dim); font-size:24px;}
.noresults{text-align:center; padding:60px 20px; color:var(--dim); font-size:26px; grid-column:1/-1;}

/* ---------- player page ---------- */
.cabinet{max-width:1060px; margin:26px auto 40px; padding:0 16px;}
.cab-marquee{background:linear-gradient(180deg,#1b0b2e,#0d0518); border:3px solid var(--pink); border-radius:14px;
  padding:18px; text-align:center; box-shadow:0 0 30px rgba(255,46,136,.35), inset 0 0 40px rgba(255,46,136,.12);}
.cab-marquee h2{font-family:'Press Start 2P',monospace; font-size:clamp(14px,3vw,24px); color:#fff;
  text-shadow:0 0 10px var(--cyan),3px 3px 0 var(--purple); line-height:1.8;}
.cab-marquee .meta{margin-top:8px; color:var(--dim); font-size:20px;}
.screen{margin-top:18px; border:4px solid #2c2c44; border-radius:12px; overflow:hidden; background:#000;
  box-shadow:0 0 40px rgba(0,229,255,.25), inset 0 0 60px rgba(0,0,0,.6); position:relative;}
.screen iframe{display:block; width:100%; aspect-ratio:16/10; max-height:72vh; border:0; background:#000;}
@media(max-width:640px){.screen iframe{aspect-ratio:1/1; max-height:60vh;}}
.deck{margin-top:18px; display:flex; flex-wrap:wrap; gap:var(--sp2); justify-content:center; align-items:center;}
.hintline{text-align:center; margin-top:14px; color:var(--dim); font-size:20px;}
.backlink{display:inline-block; margin:18px 0 0 16px; font-family:'Press Start 2P',monospace; font-size:11px;}

/* ---------- footer ---------- */
footer{border-top:3px solid var(--purple); padding:28px 16px 60px; text-align:center; color:var(--dim); font-size:20px;
  background:linear-gradient(180deg,transparent, #0d0618);}
footer .pixel{font-size:10px; color:var(--cyan);}
footer p{max-width:760px; margin:10px auto;}

/* ad slots */
.adslot{max-width:970px; margin:18px auto; text-align:center; min-height:90px;}

/* sound toggle */
.sfxbtn.off{filter:grayscale(1); opacity:.55;}

/* ---------- daily drop ---------- */
.daily{border-top:3px solid var(--yellow); border-bottom:3px solid var(--yellow);
  background:linear-gradient(180deg, rgba(255,230,0,.07), transparent), #0b0b1c;}
.daily-inner{max-width:1060px; margin:0 auto; padding:var(--sp4) 16px; display:grid;
  grid-template-columns:1.618fr 1fr; gap:var(--sp4); align-items:center;}
@media(max-width:720px){.daily-inner{grid-template-columns:1fr;}}
.daily-left{width:100%; max-width:300px; margin:0 auto;}
.daily-left .cart{max-width:300px;}
.daily-tag{font-size:13px; color:var(--yellow); text-shadow:0 0 12px rgba(255,230,0,.7);
  text-align:center; margin-bottom:14px; animation:blink 1.4s steps(2) infinite;}
.daily-info{flex:1 1 320px; text-align:center;}
.daily-info h3{font-size:clamp(16px,3.4vw,26px); color:#fff; line-height:1.8;
  text-shadow:0 0 10px var(--pink), 3px 3px 0 var(--purple);}
.daily-info #dailyMeta{color:var(--dim); font-size:22px; margin:8px 0 18px;}
.daily-info .btn{font-size:14px; padding:16px 22px; text-decoration:none; display:inline-block;}
.daily-note{margin-top:14px; color:var(--dim); font-size:20px;}
.pastdrops{margin-top:16px; display:flex; flex-wrap:wrap; gap:8px; justify-content:center;}
.pastdrops a{font-size:18px; border:1px solid #3a3a5c; border-radius:14px; padding:4px 12px; color:var(--dim);}
.pastdrops a:hover{color:var(--cyan); border-color:var(--cyan);}
.pastdrops .pd-label{width:100%; font-family:'Press Start 2P',monospace; font-size:9px; color:var(--dim);}

/* ---------- adaptive input ---------- */
.inputrow{display:flex; gap:var(--sp2); justify-content:center; align-items:center; margin-top:var(--sp2); flex-wrap:wrap;}
.input-status{font-size:10px; color:var(--green); border:2px solid var(--green); border-radius:20px;
  padding:8px 14px; text-shadow:0 0 8px rgba(57,255,106,.6); background:rgba(57,255,106,.06); white-space:nowrap;
  max-width:100%; overflow:hidden; text-overflow:ellipsis;}
#padToggle{font-size:10px; padding:10px 14px;}
body.has-pad .cabinet{padding-bottom:190px;}
.touchpad{position:fixed; left:0; right:0; bottom:0; z-index:200;
  display:flex; justify-content:space-between; align-items:center;
  padding:var(--sp2) var(--sp3) calc(var(--sp2) + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(180deg, transparent, rgba(7,7,20,.94) 45%);
  pointer-events:none;}
.touchpad[hidden]{display:none;}
.touchpad > div{pointer-events:auto;}
.dpad{display:grid; grid-template-columns:repeat(3, var(--sp5)); grid-auto-rows:var(--sp5); gap:5px;}
.dbase{border-radius:50%; background:radial-gradient(circle,#2c2c44,#14142a); border:2px solid #3a3a5c;}
.tbtn{font-family:'Press Start 2P',monospace; color:#fff; background:linear-gradient(180deg,#3d3d5c,#23233c);
  border:2px solid #55557a; border-radius:12px; cursor:pointer; touch-action:none;
  user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;
  font-size:14px; box-shadow:0 4px 0 #101020; padding:0;}
.tbtn.down{transform:translateY(3px); box-shadow:0 1px 0 #101020;
  background:linear-gradient(180deg,var(--purple),#5b2b99); border-color:var(--purple);}
.tpad-mid{display:flex; flex-direction:column; gap:var(--sp2);}
.tsmall{font-size:8px; padding:10px 12px; border-radius:20px;}
.tpad-right{display:flex; gap:var(--sp2); align-items:center;}
.tround{width:68px; height:68px; border-radius:50%; font-size:16px;}
.tround.pink{background:linear-gradient(180deg,var(--pink),#8f1749); border-color:#ff7ab0;
  box-shadow:0 4px 0 #5c0e30, 0 0 16px rgba(255,46,136,.5);}
.tround.cyan{background:linear-gradient(180deg,var(--cyan),#00707e); border-color:#7af3ff;
  box-shadow:0 4px 0 #04454d, 0 0 16px rgba(0,229,255,.5);}
.tround.down{box-shadow:0 1px 0 #101020;}
@media(max-width:420px){
  .dpad{grid-template-columns:repeat(3, 44px); grid-auto-rows:44px;}
  .tround{width:58px; height:58px;}
  body.has-pad .cabinet{padding-bottom:160px;}
}