:root {
  --bg:#07060d; --panel:#100e1a; --panel-2:#161228; --line:#2b2545;
  --cyan:#35e0ff; --magenta:#ff4fd8; --lime:#b6ff3d; --gold:#ffd166;
  --text:#eae6ff; --muted:#8b84a8;
  --green:#3ddc84; --green-2:#8affc0; --yellow:#ffc94d; --yellow-2:#ffe49a; --gray:#241f36;
}
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; }
body {
  min-height:100vh; color:var(--text); font:16px/1.6 "Inter", -apple-system, sans-serif;
  background:
    radial-gradient(1000px 520px at 50% -10%, rgba(53,224,255,.10), transparent 60%),
    radial-gradient(800px 420px at 90% 110%, rgba(255,79,216,.10), transparent 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}
body::before {
  content:""; position:fixed; inset:0; z-index:5; pointer-events:none;
  background-image:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
body::after {
  content:""; position:fixed; inset:0; z-index:6; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.55));
}
.wrap { max-width:640px; margin:0 auto; padding:20px 20px 90px; position:relative; z-index:10; }
a { color:var(--cyan); text-decoration:none; }

.topbar { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 0 4px; }
.logo {
  font-family:"Press Start 2P", monospace; font-size:13px; line-height:1.6; color:var(--cyan);
  text-shadow:0 0 8px rgba(53,224,255,.75), 0 0 28px rgba(53,224,255,.35);
  animation:flicker 7s infinite;
}
.logo b { color:var(--magenta); text-shadow:0 0 10px rgba(255,79,216,.8); }
@keyframes flicker { 0%,93%,100%{opacity:1} 94%{opacity:.6} 95%{opacity:1} 97%{opacity:.72} 98%{opacity:1} }
.nav { display:flex; gap:18px; font-family:"Press Start 2P", monospace; font-size:9px; }
.nav a { color:var(--muted); letter-spacing:.06em; }
.nav a:hover, .nav a.on { color:var(--cyan); text-shadow:0 0 8px rgba(53,224,255,.7); }

.scores { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0 6px; }
.score {
  background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line);
  border-radius:12px; padding:12px 8px; text-align:center;
}
.score span { display:block; font-family:"Press Start 2P", monospace; font-size:8px; color:var(--muted); letter-spacing:.1em; margin-bottom:8px; }
.score b { font-family:"Orbitron", sans-serif; font-size:22px; color:var(--cyan); text-shadow:0 0 12px rgba(53,224,255,.6); }
.score.hi b { color:var(--magenta); text-shadow:0 0 12px rgba(255,79,216,.6); }

.stage {
  position:relative; margin:16px 0; border-radius:20px; overflow:hidden;
  border:2px solid rgba(53,224,255,.45);
  box-shadow:0 0 34px rgba(53,224,255,.18), inset 0 0 60px rgba(0,0,0,.55);
  background:var(--panel); aspect-ratio:1/1;
}
.stage img { width:100%; height:100%; object-fit:cover; display:block; }
.stage.loading::after {
  content:"LOADING"; position:absolute; inset:0; display:grid; place-items:center;
  font-family:"Press Start 2P", monospace; font-size:11px; color:var(--cyan); letter-spacing:.2em;
  background:linear-gradient(100deg, var(--panel) 40%, var(--panel-2) 50%, var(--panel) 60%);
  background-size:200% 100%; animation:shimmer 1.3s infinite linear;
}
@keyframes shimmer { from{background-position:200% 0} to{background-position:-200% 0} }

.meta { display:flex; justify-content:space-between; font-family:"Orbitron", sans-serif; font-size:13px; color:var(--muted); margin:10px 4px 8px; }
.meta b { color:var(--text); }
.chips { display:flex; flex-wrap:wrap; gap:8px; min-height:32px; margin-bottom:12px; }
.chip {
  background:rgba(61,220,132,.14); border:1px solid rgba(61,220,132,.55); color:var(--green-2);
  padding:5px 12px; border-radius:999px; font-size:13px; font-weight:600;
  box-shadow:0 0 12px rgba(61,220,132,.25);
}

.controls { display:flex; gap:10px; }
input[type=text] {
  flex:1; background:#0b0917; border:1px solid var(--line); color:var(--text);
  border-radius:12px; padding:14px 16px; font:inherit; font-size:16px;
}
input[type=text]:focus { outline:none; border-color:rgba(53,224,255,.7); box-shadow:0 0 16px rgba(53,224,255,.25); }
.btn {
  font-family:"Orbitron", sans-serif; font-weight:700; letter-spacing:.06em; border-radius:12px;
  padding:14px 20px; cursor:pointer; font-size:14px; border:1px solid rgba(53,224,255,.6);
  background:linear-gradient(180deg, rgba(53,224,255,.2), rgba(53,224,255,.05)); color:var(--cyan);
  text-shadow:0 0 8px rgba(53,224,255,.5); transition:transform .15s, box-shadow .2s;
}
.btn:hover { transform:translateY(-2px); box-shadow:0 0 22px rgba(53,224,255,.35); }
.btn:disabled { opacity:.4; cursor:default; transform:none; }
.btn.hot {
  border-color:transparent; color:#1a0b18;
  background:linear-gradient(180deg, #ff9de9, var(--magenta)); text-shadow:none;
  box-shadow:0 10px 30px -10px rgba(255,79,216,.7);
}

.rows { margin-top:18px; display:flex; flex-direction:column; gap:8px; }
.row { display:flex; gap:10px; align-items:center; animation:pop .18s ease; }
@keyframes pop { from{transform:scale(.96); opacity:0} to{transform:none; opacity:1} }
.tile {
  padding:9px 16px; border-radius:9px; font-family:"Orbitron", sans-serif; font-weight:700;
  font-size:14px; text-transform:lowercase; background:var(--gray); border:1px solid var(--line); color:var(--muted);
}
.tile.green { background:rgba(61,220,132,.25); border-color:var(--green); color:var(--green-2); box-shadow:0 0 14px rgba(61,220,132,.35); }
.tile.yellow { background:rgba(255,201,77,.2); border-color:var(--yellow); color:var(--yellow-2); box-shadow:0 0 14px rgba(255,201,77,.3); }
.row .hint { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

.how { margin-top:26px; color:var(--muted); font-size:13px; text-align:center; }
.how b { color:var(--green-2); }
.foot { margin-top:34px; text-align:center; font-family:"Press Start 2P", monospace; font-size:8px; color:var(--muted); letter-spacing:.14em; }

.overlay {
  position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px;
  background:rgba(6,5,11,.88); backdrop-filter:blur(8px);
}
.panel {
  width:100%; max-width:460px; text-align:center; padding:30px 26px; border-radius:20px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:2px solid rgba(53,224,255,.5);
  box-shadow:0 0 40px rgba(53,224,255,.22);
}
.panel.lose { border-color:rgba(255,79,216,.55); box-shadow:0 0 40px rgba(255,79,216,.22); }
.panel h2 { font-family:"Press Start 2P", monospace; font-size:15px; line-height:1.9; color:var(--cyan); margin-bottom:10px; }
.panel.lose h2 { color:var(--magenta); }
.panel p { color:var(--muted); font-size:14px; }
.grid-emoji { font-size:22px; letter-spacing:3px; line-height:1.8; margin:16px 0 4px; word-break:break-all; }
.actions { display:flex; gap:10px; margin-top:20px; }
.actions .btn { flex:1; text-align:center; }

.arcade-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-top:18px; }
.cab {
  background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line);
  border-radius:14px; padding:16px 14px; text-align:center; transition:transform .15s, border-color .2s;
}
.cab:hover { transform:translateY(-4px); border-color:rgba(53,224,255,.5); box-shadow:0 10px 30px -14px rgba(53,224,255,.4); }
.cab .num { font-family:"Press Start 2P", monospace; font-size:11px; color:var(--cyan); }
.cab .tag { display:inline-block; margin-top:10px; font-family:"Press Start 2P", monospace; font-size:7px; color:#1a0b18; background:var(--lime); border-radius:999px; padding:5px 9px; }
.cab a { display:inline-block; margin-top:12px; font-family:"Orbitron", sans-serif; font-size:12px; font-weight:700; letter-spacing:.1em; }
.history { margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.hrow { display:flex; justify-content:space-between; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 14px; font-family:"Orbitron", sans-serif; font-size:13px; }
.hrow .win { color:var(--green-2); }
.hrow .loss { color:var(--magenta); }
.page-h { font-family:"Press Start 2P", monospace; font-size:14px; line-height:1.9; color:var(--cyan); text-shadow:0 0 10px rgba(53,224,255,.5); margin:22px 0 4px; }
.page-sub { color:var(--muted); font-size:14px; }
.hidden { display:none; }