@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

  :root {
    --bg: #101421;
    --panel: #1b2235;
    --panel2: #242e46;
    --ink: #f4f0d8;
    --muted: #a8b3c9;
    --cyan: #48e5e0;
    --pink: #ff5c9a;
    --yellow: #ffd166;
    --green: #9cff6e;
    --shadow: #070a12;
  } 

* { box-sizing: border-box; } 

html { scroll-behavior: smooth; } 

body {
    margin: 0; min-height: 100vh; color: var(--ink); background-color: var(--bg);
    font-family: 'VT323', monospace; font-size: 22px; letter-spacing: .4px;
    background-image:
      linear-gradient(rgba(72,229,224,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(72,229,224,.035) 1px, transparent 1px),
      radial-gradient(ellipse at 50% 0%, #293654 0%, transparent 58%);
    background-size: 24px 24px, 24px 24px, auto;
  } 

body::after {
    content:""; position:fixed; inset:0; pointer-events:none; z-index:10; opacity:.12;
    background: repeating-linear-gradient(to bottom, transparent 0 3px, #000 4px);
  } 

.shell { width:min(1120px, calc(100% - 32px)); margin:auto; } 

header {
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:22px 0; border-bottom:4px dotted #46516d;
  } 

.brand { font: 13px 'Press Start 2P', monospace; color:var(--yellow); text-shadow:3px 3px #8c4266; } 

.status { color:var(--green); font-size:20px; } 

.hero { text-align:center; padding:54px 12px 34px; } 

.eyebrow { color:var(--cyan); text-transform:uppercase; letter-spacing:3px; } 

h1 { font: clamp(22px, 5vw, 42px)/1.5 'Press Start 2P', monospace; margin:18px 0; color:var(--ink); text-shadow:4px 4px #a13f78; } 

.hero p { max-width:650px; margin:0 auto; color:var(--muted); font-size:26px; } 

.insert-coin { display:inline-block; margin-top:26px; padding:10px 18px; color:var(--shadow); background:var(--yellow); font:10px 'Press Start 2P', monospace; box-shadow:4px 4px 0 #a56c39; } 

.toolbar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin:18px 0; } 

.toolbar label { color:var(--cyan); } 

input {
    width:min(320px, 100%); padding:10px 12px; color:var(--ink); background:#0c1020;
    border:2px solid #687796; outline:none; font:22px 'VT323', monospace;
    box-shadow:3px 3px 0 var(--shadow);
  } 

input:focus { border-color:var(--cyan); } 

.section-title { display:flex; align-items:center; gap:12px; margin:26px 0 14px; color:var(--yellow); font:11px 'Press Start 2P', monospace; } 

.section-title::after { content:""; flex:1; border-top:3px dotted #59647e; } 

.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:18px; } 

.card {
    position:relative; min-height:176px; padding:18px; background:var(--panel);
    border:3px solid transparent;
    border-image: repeating-linear-gradient(135deg, var(--cyan) 0 5px, #35435f 5px 10px) 3;
    box-shadow:5px 5px 0 var(--shadow); transition:transform .14s, background .14s;
    display:flex; flex-direction:column;
  } 

.card:hover { transform:translate(-3px,-3px); background:var(--panel2); } 

.card-top { display:flex; justify-content:space-between; align-items:center; gap:8px; } 

.icon { font-size:30px; image-rendering:pixelated; } 

.tag { padding:4px 7px; color:#111522; background:var(--pink); font-size:16px; } 

.card h3 { margin:15px 0 7px; color:var(--cyan); font:10px/1.8 'Press Start 2P', monospace; } 

.card p { margin:0 0 16px; color:var(--muted); font-size:21px; line-height:1.1; } 

.launch {
    display:block; margin-top:auto; padding:9px 10px; text-align:center; text-decoration:none;
    color:#101421; background:var(--green); border:0; box-shadow:4px 4px 0 #4b8742;
    font:9px 'Press Start 2P', monospace;
  } 

.launch:hover, .launch:focus-visible { background:var(--yellow); transform:translateY(-2px); outline:2px solid white; } 

.empty { display:none; padding:24px; text-align:center; color:var(--muted); border:2px dashed #59647e; } 

footer { margin:42px 0 24px; padding:20px 0; border-top:4px dotted #46516d; text-align:center; color:#7f8ba5; } 

footer span { color:var(--pink); } 


  @media (max-width:600px) {
    header { align-items:flex-start; flex-direction:column; } 

  .hero { padding-top:38px; } 

  .toolbar { align-items:stretch; flex-direction:column; } 

  input { width:100%; } 

}