:root {
  --ink: #e8f0ff;
  --muted: #8aa0b8;
  --panel: rgba(6, 10, 18, 0.88);
  --line: rgba(100, 180, 255, 0.28);
  --cyan: #3de0ff;
  --amber: #ffc14d;
  --red: #ff4d6a;
  --green: #3dff9a;
  font-family: "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #02040a; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.top {
  position: fixed; z-index: 10; left: 16px; top: max(12px, env(safe-area-inset-top));
  pointer-events: none; text-shadow: 0 2px 16px #000;
}
.top h1 {
  margin: 0; font-size: clamp(22px, 4vw, 36px); letter-spacing: 0.08em;
  background: linear-gradient(120deg, #fff, var(--cyan) 55%, var(--amber));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kicker {
  margin: 0 0 4px; color: var(--cyan); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.hint { margin: 6px 0 0; color: var(--muted); font-size: 12px; max-width: 42vw; }

.panel {
  position: fixed; z-index: 12; right: 12px; top: max(12px, env(safe-area-inset-top));
  width: min(340px, calc(100vw - 24px)); max-height: min(78vh, 640px);
  overflow: auto; padding: 14px 14px 12px;
  border: 1px solid var(--line); background: var(--panel);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px #000a;
}
.cards { display: grid; gap: 8px; margin-top: 10px; }
.card {
  display: grid; gap: 4px; text-align: left; width: 100%;
  border: 1px solid var(--line); background: rgba(10, 18, 30, 0.9);
  color: inherit; padding: 12px; cursor: pointer; border-radius: 2px;
}
.card:hover, .card:focus-visible { border-color: var(--cyan); box-shadow: 0 0 20px rgba(61, 224, 255, 0.15); outline: none; }
.card b { font-size: 14px; letter-spacing: 0.04em; }
.card small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.card .tag {
  display: inline-block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--amber); margin-top: 2px;
}
.card.doom .tag { color: var(--red); }
.card.quake .tag { color: #c4a574; }
.card.descent .tag { color: #44ff88; }
.card.live .tag { color: var(--green); }
.legal { margin: 12px 0 0; font-size: 10px; color: var(--muted); line-height: 1.4; }
.legal a { color: var(--cyan); }

.prompt {
  position: fixed; z-index: 11; left: 50%; bottom: max(28px, env(safe-area-inset-bottom));
  transform: translateX(-50%); padding: 10px 16px;
  border: 1px solid var(--cyan); background: var(--panel); font-size: 13px;
}
.prompt.hidden, .hidden { display: none !important; }

.overlay {
  position: fixed; inset: 0; z-index: 40; background: #000;
  display: flex; flex-direction: column;
}
.overlay-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; background: #0a1018; border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.overlay-bar span { flex: 1; font-weight: 700; letter-spacing: 0.06em; }
.btn {
  border: 1px solid var(--line); background: #122030; color: var(--ink);
  padding: 8px 12px; text-decoration: none; font: inherit; cursor: pointer;
}
.btn:hover { border-color: var(--cyan); }
#gameFrame { flex: 1; width: 100%; border: 0; background: #000; }

.mobile-hint {
  display: none; position: fixed; z-index: 9; left: 12px; right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  text-align: center; font-size: 11px; color: var(--muted);
}
@media (max-width: 800px) {
  .panel { top: auto; bottom: max(40px, env(safe-area-inset-bottom)); max-height: 42vh; }
  .hint { display: none; }
  .mobile-hint { display: block; }
}