/* BLASTKAN arcade theme. Loaded after every other stylesheet on the operator app (index.html only; the admin panel keeps
   its own look). It changes the shared tokens and a handful of components, and never touches page logic.

   Why these choices:
   - Palette: sky + coin + grass + navy ink, taken from the Blastkan arcade identity. Coin yellow is the one accent
     (primary buttons, the balance), because coins are what the operator earns.
   - Type: Fredoka for headings (rounded, game-like), Nunito for body text (rounded, readable at small sizes).
   - Motif: "game block" depth. Buttons and key surfaces get a solid ink border and a solid bottom edge instead of soft
     blurred shadows, so pressing a button reads as pushing a block down.
   - Dark mode is a night sky (navy), not neutral grey, so both modes feel like the same product. */

:root {
  --arc-sky: #63bbff;
  --arc-sky-low: #cdeaff;
  --arc-coin: #ffc935;
  --arc-coin-deep: #b97f00;
  --arc-grass: #4caf50;
  --arc-grass-deep: #2e7a32;
  --arc-navy: #13213f;
  --arc-edge: #13213f;          /* block borders and bottom edges */
  --arc-side: #63bbff;          /* sidebar */

  --bg: #fff8e8;
  --surface: #ffffff;
  --ink: #13213f;
  --ink-2: #3a4a6b;
  --ink-3: #56658a;
  --line: #ece3cc;
  --line-2: #d9cdb0;
  --inset: #fdf4de;
  --accent: #1d64c4;
  --accent-top: #4c9bff;
  --accent-deep: #17509e;
  --accent-base: #13213f;
  --accent-soft: #dcefff;
  --ok: #1d7a3a;
  --bad: #c0392b;
  --warn: #8f5200;

  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;

  --r: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
}
:root[data-theme="dark"] {
  --arc-edge: #050b1a;
  --arc-side: #10204a;
  --bg: #0b1730;
  --surface: #14244a;
  --ink: #eaf2ff;
  --ink-2: #bccbe6;
  --ink-3: #93a5c9;
  --line: #233a68;
  --line-2: #2f4a80;
  --inset: #102043;
  --accent: #7cc0ff;
  --accent-top: #a3d4ff;
  --accent-deep: #9ccfff;
  --accent-base: #050b1a;
  --accent-soft: #1b3566;
  --shadow-ink: rgba(0, 0, 0, 0.5);
}

body { font-family: var(--font); background: var(--bg); }
h1, h2, h3, h4, .topbar h1 { font-family: var(--font-display); font-weight: 600; letter-spacing: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---------- brand ---------- */
.brand { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.02em; }
.brand-mark:not(.has-logo) { background: var(--arc-coin); border-radius: 50%; box-shadow: inset 0 0 0 2px var(--arc-navy), inset 0 -4px 0 rgba(185, 127, 0, 0.55); }
.brand-mark:not(.has-logo) svg path { stroke: var(--arc-navy); }

/* ---------- buttons: game blocks ---------- */
.btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  border-radius: 12px;
  border: 2px solid var(--arc-edge);
  transition: transform 0.12s cubic-bezier(.3, 1.6, .5, 1), box-shadow 0.12s ease;
}
.btn::before { display: none; }
.btn-primary, .btn-secondary, .btn-danger { text-shadow: none; filter: none; }
.btn-primary { color: var(--arc-navy); background: var(--arc-coin); box-shadow: 0 4px 0 var(--arc-edge); }
.btn-secondary { color: var(--arc-navy); background: #ffffff; box-shadow: 0 4px 0 var(--arc-edge); }
.btn-danger { color: #fff; background: #c0392b; box-shadow: 0 4px 0 var(--arc-edge); }
:root[data-theme="dark"] .btn-secondary { color: var(--ink); background: #1f3463; box-shadow: 0 4px 0 var(--arc-edge); }
:root[data-theme="dark"] .btn-secondary:hover { box-shadow: 0 5px 0 var(--arc-edge); }
:root[data-theme="dark"] .btn-secondary:active { background: #1f3463; box-shadow: 0 0 0 var(--arc-edge); }
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
  .btn-primary:hover, .btn-secondary:hover, .btn-danger:hover { box-shadow: 0 5px 0 var(--arc-edge); }
}
.btn:active { transform: translateY(4px); }
.btn-primary:active, .btn-secondary:active, .btn-danger:active { box-shadow: 0 0 0 var(--arc-edge); background-image: none; filter: none; }
.btn-primary:active { background: var(--arc-coin); }
.btn-secondary:active { background: #ffffff; }
.btn[disabled], .btn.is-loading { box-shadow: 0 2px 0 var(--arc-edge); }

.icon-btn { border-radius: 10px; }
.icon-btn:hover { background: var(--accent-soft); }

/* ---------- surfaces ---------- */
.card { border: 2px solid var(--line-2); border-radius: var(--r-lg); }
:root[data-theme="dark"] .card { border-color: var(--line-2); }
.input, .select, .textarea { border-width: 2px; border-radius: 12px; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.chip { font-weight: 700; }
.seg { background: var(--inset); box-shadow: inset 0 0 0 2px var(--line); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 2px var(--arc-edge), 0 2px 0 2px var(--arc-edge); }
.lang-switch { background: var(--inset); box-shadow: inset 0 0 0 2px var(--line); }
.lang-switch button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--arc-edge); }
.switch input:checked ~ .track { background: var(--arc-grass-deep); }
.tbl th { background: var(--inset); font-weight: 700; }

/* the one glass surface in the old design becomes a solid block */
.glass, :root[data-theme="dark"] .glass {
  background: var(--surface);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 2px solid var(--arc-edge);
  box-shadow: 0 4px 0 var(--arc-edge);
}
.glass::before, :root[data-theme="dark"] .glass::before { display: none; }

/* ---------- app shell: sky sidebar ---------- */
.sidebar { background: var(--arc-side); border-right: 2px solid var(--arc-edge); }
.sidebar .brand { color: var(--arc-navy); }
:root[data-theme="dark"] .sidebar .brand { color: var(--ink); }
.nav a { color: var(--arc-navy); font-weight: 700; border: 2px solid transparent; }
.nav a .ico { stroke-width: 2.2; }
.nav a:hover { background: rgba(255, 255, 255, 0.4); color: var(--arc-navy); }
.nav a[aria-current="page"] { background: #ffffff; color: var(--arc-navy); border-color: var(--arc-edge); box-shadow: 0 3px 0 var(--arc-edge); font-weight: 800; }
:root[data-theme="dark"] .nav a { color: var(--ink-2); }
:root[data-theme="dark"] .nav a:hover { background: rgba(255, 255, 255, 0.06); color: var(--ink); }
:root[data-theme="dark"] .nav a[aria-current="page"] { background: #1f3463; color: var(--ink); }
.sidebar .nav-label, .sidebar .side-label, .sidebar .kicker { color: var(--arc-navy); font-weight: 800; }
:root[data-theme="dark"] .sidebar .nav-label, :root[data-theme="dark"] .sidebar .side-label, :root[data-theme="dark"] .sidebar .kicker { color: var(--ink-2); }
.side-balance { background: var(--arc-coin); border: 2px solid var(--arc-edge); box-shadow: 0 4px 0 var(--arc-edge); }
.side-balance .k { color: var(--arc-navy); font-weight: 700; }
.side-balance .v { color: var(--arc-navy); font-family: var(--font-display); font-weight: 600; }
.side-balance a { color: var(--arc-navy); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.side-user .who b, .side-user .who span, .side-user .icon-btn { color: var(--arc-navy); }
:root[data-theme="dark"] .side-user .who b, :root[data-theme="dark"] .side-user .icon-btn { color: var(--ink); }
:root[data-theme="dark"] .side-user .who span { color: var(--ink-3); }
.avatar { background: var(--arc-coin); color: var(--arc-navy); box-shadow: inset 0 0 0 2px var(--arc-navy); }
.nav a .chip { background: #ffffff; color: var(--arc-navy); box-shadow: inset 0 0 0 1.5px var(--arc-navy); }

.ov-hero, .ov-trow .v, .page-intro h2, .ov-intro h2 { font-family: var(--font-display); font-weight: 600; }

/* ---------- Devices / Overview "ticket" pages (stitch.css): same palette, same type ---------- */
.stitch {
  --st-paper: #fff8e8; --st-card: #ffffff; --st-ink: #13213f; --st-ink-2: #3a4a6b; --st-line: #d9cdb0;
  --st-cobalt: #13213f; --st-on-cobalt: #ffffff;
  --st-f-display: 'Fredoka', 'Trebuchet MS', sans-serif;
  --st-f-body: 'Nunito', system-ui, sans-serif;
}
html[data-theme="dark"] .stitch {
  --st-paper: #0b1730; --st-card: #14244a; --st-ink: #eaf2ff; --st-ink-2: #bccbe6; --st-line: #2f4a80;
  --st-cobalt: #050b1a; --st-on-cobalt: #eaf2ff;
}
.stitch .card-title, .stitch h1, .stitch h2 { font-weight: 600; letter-spacing: 0; }
.stitch .btn { border-radius: 12px; }
.stitch .btn-primary { background: var(--arc-coin); color: var(--arc-navy); border: 2px solid var(--arc-edge); box-shadow: 0 4px 0 var(--arc-edge); }
.stitch .btn-primary:hover { filter: none; box-shadow: 0 5px 0 var(--arc-edge); }
.stitch .btn-primary:active { box-shadow: 0 0 0 var(--arc-edge); }
.stitch .btn-secondary { background: var(--st-card); color: var(--st-ink); border: 2px solid var(--arc-edge); box-shadow: 0 4px 0 var(--arc-edge); }
.stitch .btn-secondary:hover { background: var(--st-card); color: var(--st-ink); box-shadow: 0 5px 0 var(--arc-edge); }
.stitch .btn-secondary:active { box-shadow: 0 0 0 var(--arc-edge); }

/* ---------- public nav on small phones: the thicker block buttons need the room, so the brand keeps only its coin ---------- */
.site-nav > :not(.spacer) { flex-shrink: 0; }
.site-nav .theme-btn { min-width: 36px; min-height: 36px; }
@media (max-width: 440px) {
  .site-nav { gap: 8px; }
  .site-nav .brand { font-size: 0; gap: 0; }
  .site-nav .lang-switch button { padding: 4px 6px; white-space: nowrap; }
  .site-nav .btn-sm { padding: 0 12px; }
}

/* ---------- toasts & modals ---------- */
.toast { border: 2px solid var(--arc-edge); box-shadow: 0 4px 0 var(--arc-edge); font-family: var(--font); }
.modal { border: 2px solid var(--arc-edge); box-shadow: 0 6px 0 var(--arc-edge); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}