/* Tokens taken from the Android build's own theme (ui/theme/Theme.kt): gold on
   deep navy, white text, Courier Bold throughout, and the scrolling meme
   collage behind everything. Replaces the earlier Nocturne palette. */

@font-face {
  font-family: 'MemeryMono';
  src: url('../assets/fonts/courbd.ttf') format('truetype');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* Ground and surface — darkColorScheme(background, surface) */
  --color-bg: #1a1a2e;
  --color-bg-raised: #16213e;
  --color-surface: #16213e;
  /* Level cards and dialogs are Color(0xCC000000) on the phone. */
  --color-card: rgba(0, 0, 0, 0.8);
  --color-tile-back: #000000;
  --color-tile-face: #ffffff;

  /* Ink — onBackground / onSurface are plain white */
  --color-text: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.7);
  --color-text-faint: rgba(255, 255, 255, 0.5);
  --color-divider: rgba(255, 255, 255, 0.18);

  /* primary = gold, secondary = green */
  --color-accent: #ffd700;
  --color-accent-bright: #ffd700;
  --color-accent-300: #ffe863;
  --color-accent-200: #fff3ab;
  --color-accent-100: #fffae0;
  --color-accent-600: #d4b300;
  --color-accent-700: #8a7500;
  --color-accent-900: #3a3208;
  --color-secondary: #4caf50;

  /* The exact bands GameScreen.kt uses for the turn clock and the tries pips:
     white above 15s, then yellow, then orange, then red. */
  --color-warn: #ffff00;
  --color-hot: #ff6600;
  --color-danger: #ff0000;

  /* The app bundles Courier Bold and uses it for every label. */
  --font-mono: 'MemeryMono', ui-monospace, Menlo, monospace;
  --font-body: 'MemeryMono', ui-monospace, Menlo, monospace;

  --space-1: 2.8px;
  --space-2: 5.6px;
  --space-3: 8.4px;
  --space-4: 11.2px;
  --space-6: 16.8px;
  --space-8: 22.4px;

  /* One measure for every screen, so the board, the menu and the data screens
     all sit on the same centred column instead of hugging the left edge.
     The column tracks the window at 80% rather than stopping at a fixed pixel
     width — on a desktop monitor the old 1180px cap left most of the screen
     empty and the board marooned in the middle of it. The pixel floor keeps
     laptop and tablet widths where they were, and `width: 100%` on each block
     still takes over below that, so a phone stays full-bleed. */
  --measure: max(1180px, 80vw);
  --measure-narrow: max(900px, 61vw);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --glow-accent: 0 0 22px rgba(255, 215, 0, 0.35);
  --glow-text: 0 0 16px rgba(255, 215, 0, 0.45);
  --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.14);
  --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 16px 40px rgba(0, 0, 0, 0.7);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }

p { margin: 0 0 var(--space-3); }
img { display: block; max-width: 100%; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent-bright); outline-offset: 2px; }
::selection { background: rgba(255, 215, 0, 0.35); }

/* — shared type helpers ————————————————————————————————— */

.kicker {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.kicker-accent { color: var(--color-accent); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--color-text-muted); }
.faint { color: var(--color-text-faint); }

/* — buttons ————————————————————————————————————————— */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover:not(:disabled) { background: rgba(255, 215, 0, 0.16); }
.btn-primary:active:not(:disabled) { background: rgba(255, 215, 0, 0.26); }

.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
.btn-secondary:active:not(:disabled) { background: rgba(255, 255, 255, 0.18); }

.btn-ghost { color: var(--color-text); padding-inline: var(--space-1); }
.btn-ghost:hover:not(:disabled) { color: var(--color-accent); background: rgba(255, 215, 0, 0.12); }

.btn-danger { color: #ffb3b3; border-color: rgba(255, 95, 95, 0.45); }
.btn-danger:hover:not(:disabled) { background: rgba(255, 95, 95, 0.14); }

.btn-icon { width: 36px; height: 36px; padding: 0; }

/* The bundled drawables are black line art drawn for the phone's mid-grey
   collage; on this ground they have to be flipped to white. */
.icon-invert { filter: invert(1); display: block; }
.back-btn { width: 40px; height: 40px; }

/* — cards, tags, rules ——————————————————————————————— */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.card-kicker {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.card-title { font-size: 17px; font-weight: 500; line-height: 1.2; }
.card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--color-text-faint);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.1em;
  border-radius: 6px;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
}

/* Rules fade out at both ends — a Nocturne signature. */
.hr {
  height: 1px;
  border: 0;
  margin: var(--space-4) 0;
  background: linear-gradient(to right,
    transparent, var(--color-divider) 48px,
    var(--color-divider) calc(100% - 48px), transparent);
}

/* — meter bars, used by the result breakdown and the storage gauge — */

.meter {
  height: 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.meter > i {
  display: block;
  height: 100%;
  background: linear-gradient(to right, var(--color-accent-600), var(--color-accent));
  transition: width 400ms ease;
}

/* — dialog ————————————————————————————————————————— */

.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(2px);
}
.dialog {
  width: min(440px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.dialog-title { font-size: 20px; font-weight: 500; }
.dialog-body { font-size: 14px; color: var(--color-text-muted); }
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* — toast ————————————————————————————————————————— */

#toast-host {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  transform: translateX(-50%);
  pointer-events: none;
}
.toast {
  padding: 8px 16px;
  font-size: 13px;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  animation: toast-in 180ms ease;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}