:root {
  --bg: #0b0716; --panel: #1d1236; --line: #33245a; --ink: #f2ecff; --dim: #9d90bf;
  --neon: #ff4fd8; --neon2: #39e6ff; --gold: #ffd21f;
  --mono: ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; min-height: 100vh; color: var(--ink);
  font-family: system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 79, 216, .22), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 14px),
    var(--bg);
}
button { font: inherit; color: inherit; cursor: pointer; }
.dim { color: var(--dim); }
.small { font-size: 12px; }
kbd { font-family: var(--mono); background: #0c0818; border: 1px solid #3b2a63; border-radius: 4px; padding: 1px 6px; color: var(--gold); }
.chip {
  display: inline-block; background: var(--panel); border: 1px solid #3b2a63; border-radius: 999px;
  padding: 6px 14px; font-size: 14px; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.chip:hover { border-color: var(--neon2); }

.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 20px 24px 8px; max-width: 1200px; margin: 0 auto; }
.top h1 { margin: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.neon { font-size: clamp(28px, 5vw, 44px); font-weight: 900; letter-spacing: 2px; color: #fff; text-shadow: 0 0 6px var(--neon), 0 0 18px var(--neon), 0 0 36px rgba(255, 79, 216, .6); }
.top h1 small { font-family: var(--mono); font-size: 13px; letter-spacing: 6px; color: var(--neon2); text-shadow: 0 0 8px var(--neon2); }
.credits { font-family: var(--mono); color: var(--gold); border: 1px solid #5a4a12; border-radius: 6px; padding: 6px 10px; background: #1a1404; letter-spacing: 2px; }
.credits.flash { animation: flash .15s steps(2) 3; }
@keyframes flash { 50% { background: var(--gold); color: #000; } }

#lobby { max-width: 1200px; margin: 0 auto; padding: 8px 24px 32px; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 20px; }
.tabs button { background: transparent; border: 1px solid #3b2a63; border-radius: 8px; padding: 8px 14px; color: var(--dim); }
.tabs button span { font-family: var(--mono); font-size: 12px; opacity: .7; }
.tabs button[aria-selected="true"] { color: #fff; border-color: var(--neon); box-shadow: 0 0 10px rgba(255, 79, 216, .4); }
.cabinets { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }
.cabinet {
  --accent: var(--neon2);
  background: linear-gradient(180deg, #24173f, #140c26); border: 2px solid var(--line); border-radius: 14px 14px 6px 6px;
  padding: 12px; display: flex; flex-direction: column; gap: 10px; transition: transform .15s, border-color .15s, box-shadow .15s;
}
.cabinet.selected { border-color: var(--accent); box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-3px); }
.marquee { font-family: var(--mono); font-weight: 700; text-align: center; letter-spacing: 2px; padding: 8px 4px; border-radius: 8px; background: #08050f; color: var(--accent); text-shadow: 0 0 8px var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crt { position: relative; aspect-ratio: 4 / 3; background: #000; border-radius: 10px; overflow: hidden; border: 6px solid #0a0a0a; cursor: pointer; }
.crt img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: pixelated; }
.crt::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px); }
.nocover { position: absolute; inset: 0; display: grid; place-items: center; font: 900 64px/1 var(--mono); color: var(--accent); text-shadow: 0 0 18px var(--accent); }
.meta { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--dim); flex-wrap: wrap; }
.badge { color: #000; background: var(--accent); border-radius: 4px; padding: 2px 6px; font-weight: 700; }
.coin { display: block; text-align: center; text-decoration: none; border: 0; border-radius: 8px; padding: 10px; font-weight: 800; background: var(--gold); color: #1a1000; box-shadow: 0 4px 0 #8a6a00; }
.coin small { font-family: var(--mono); font-weight: 400; margin-left: 6px; }
.coin:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a6a00; }
.status { text-align: center; padding: 48px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
.status h2 { margin: 0 0 12px; color: var(--gold); }
.hint { text-align: center; color: var(--dim); font-family: var(--mono); font-size: 13px; margin-top: 28px; }
@media (max-width: 720px) { .top, #lobby { padding-left: 16px; padding-right: 16px; } }
.top-right { display: flex; gap: 10px; align-items: center; }
a.chip-link { color: inherit; text-decoration: none; }
a.chip-link:hover { text-decoration: underline; }