:root {
  --bg: #0b1710;
  --bg-2: #142a1c;
  --ink: #eafdf0;
  --muted: #8fbf9c;
  --purple: #4ade80;
  --pink: #ffd23f;
  --yellow: #ffd23f;
  --teal: #38bdf8;
  --card-border: rgba(148, 255, 171, 0.16);
  --font-display: "JetBrains Mono", "Fira Code", ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, Consolas, monospace;
}

/* Deckt das Spiel ab, bis ein evtl. vorhandener Cloud-Spielstand fertig
   abgeglichen ist - sonst blitzt kurz der lokale Stand auf, bevor er (falls
   vorhanden) durch den Cloud-Stand ersetzt wird. Absichtlich NUR bis dahin,
   nicht laenger (siehe assets/js/bild-laden.js fuer dieselbe Haltung bei der
   Startseite: kein Vollbild-Overlay laenger als noetig). */
.game-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--bg);
  transition: opacity 0.25s ease;
}

.game-loading-screen[hidden] { display: none; }
.game-loading-screen.is-fading { opacity: 0; pointer-events: none; }

.game-loading-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(74, 222, 128, 0.22);
  border-top-color: var(--purple);
  animation: game-loading-spin 0.8s linear infinite;
}

@keyframes game-loading-spin {
  to { transform: rotate(360deg); }
}

.game-loading-text {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

body {
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0px, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 3px),
    radial-gradient(circle at 14% 10%, rgba(74, 222, 128, 0.16), transparent 32rem),
    radial-gradient(circle at 88% 14%, rgba(255, 210, 63, 0.12), transparent 28rem),
    radial-gradient(circle at 78% 92%, rgba(56, 189, 248, 0.1), transparent 32rem),
    var(--bg);
}

h1 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  text-shadow: 0 0 22px rgba(74, 222, 128, 0.28);
}

.lib-topbar {
  background: rgba(11, 23, 16, 0.82);
  border-bottom: 1px solid var(--card-border);
}

.mini-help kbd {
  border: 1px solid var(--card-border);
  background: var(--bg-2);
  color: var(--ink);
}

.menu-btn {
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--bg-2);
  color: var(--ink);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35), 0 10px 24px rgba(0, 0, 0, 0.3);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 160ms ease;
}
.menu-btn:hover, .menu-btn:focus-visible {
  border-color: var(--purple);
  transform: translateY(-2px);
}
.menu-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); }
.menu-btn.primary { background: linear-gradient(145deg, var(--purple), var(--teal)); color: #06210f; border: none; box-shadow: 0 4px 0 rgba(6, 90, 40, 0.6), 0 10px 26px rgba(74, 222, 128, 0.28); }

.mini-btn { border-radius: 10px; background: linear-gradient(145deg, var(--purple), var(--teal)); color: #06210f; box-shadow: 0 3px 0 rgba(6, 90, 40, 0.55); }
.mini-btn:active { transform: translateY(2px); box-shadow: none; }

.coin-pill { background: rgba(255, 210, 63, 0.16); color: #ffd23f; border: 1px solid rgba(255, 210, 63, 0.3); }

.settings-row { border-radius: 12px; background: var(--bg-2); border: 1px solid var(--card-border); }
.settings-row select {
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: #0e2016;
  color: var(--ink);
}

.toggle { background: #1f3d29; }
.toggle::after { background: var(--ink); }
.toggle.on { background: var(--purple); }

.shop-card { border-radius: 12px; background: var(--bg-2); border: 1px solid var(--card-border); }
.shop-card.selected { border-color: var(--purple); box-shadow: 0 0 0 2px var(--purple) inset; }

.mini-board-wrap { background: #0f2a1a; border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); }

.mini-hud span[id] { font-family: var(--font-display); color: var(--purple); text-shadow: 0 0 14px rgba(74, 222, 128, 0.35); }

.record-score { font-family: var(--font-display); }

.pause-button { border: 1px solid var(--card-border); border-radius: 10px; background: var(--bg-2); color: var(--ink); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); }
.pause-button:hover, .pause-button:focus-visible { border-color: var(--purple); }

.dpad button { border: 1px solid var(--card-border); border-radius: 10px; background: var(--bg-2); color: var(--ink); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); }
.dpad button:hover, .dpad button:focus-visible { border-color: var(--purple); }
.dpad button:active { transform: translateY(2px); box-shadow: none; }

.dpad {
  display: grid;
  grid-template-columns: repeat(3, 52px);
  grid-template-rows: repeat(2, 52px);
  gap: 8px;
  justify-content: center;
  margin-top: 4px;
}
.dpad-up { grid-column: 2; grid-row: 1; }
.dpad-left { grid-column: 1; grid-row: 2; }
.dpad-down { grid-column: 2; grid-row: 2; }
.dpad-right { grid-column: 3; grid-row: 2; }

.records-list { margin-top: 20px; display: grid; gap: 8px; }
.record-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-2);
  border: 1px solid var(--card-border);
  border-radius: 10px;
}
.record-rank { font-weight: 800; color: var(--purple); }
.record-date { color: var(--muted); font-size: 0.8rem; }

@media (max-width: 640px) {
  .dpad { grid-template-columns: repeat(3, 58px); grid-template-rows: repeat(2, 58px); }
}