/*
 * Metron Arcade design layer.
 * Tokens and the supergraphic come from vehops-ui (/vendor/vehops-ui/tokens.css, brand.css).
 * The .vh-* classes reproduce the vehops-ui core recipes (src/core/styles.ts, button-variants.ts,
 * badge-variants.ts, extras.ts) without a Tailwind build: square corners, Bosch type, dark theme.
 */

:root {
  --radius: 0px;
  --supergraphic: linear-gradient(90deg, #952231 0%, #d3141b 12%, #88347f 24%, #543d8f 33%, #1f3b7a 43%, #154d98 52%, #277db6 62%, #00b0d9 72%, #009c5f 82%, #8fbd65 91%, #208d3e 100%);
  --game-stackdown: #00b0d9;
  --game-snake: #009c5f;
  --game-breaker: #d3141b;
  --game-match: #88347f;
  --game-ping: #8fbd65;
  --game-drone: #277db6;
  --game-incident: #e0702a;
  --game-quiz: #7b68c8;
  --game-freedoom: #e0483e;
  --emerald: #34d399;
  --amber: #fbbf24;
  --rose: #fb7185;
  --sky: #38bdf8;
  --accent-game: var(--primary);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

[data-game="stackdown"] { --accent-game: var(--game-stackdown); }
[data-game="snake"] { --accent-game: var(--game-snake); }
[data-game="breaker"] { --accent-game: var(--game-breaker); }
[data-game="match"] { --accent-game: var(--game-match); }
[data-game="ping"] { --accent-game: var(--game-ping); }
[data-game="drone"] { --accent-game: var(--game-drone); }
[data-game="incident"] { --accent-game: var(--game-incident); }
[data-game="quiz"] { --accent-game: var(--game-quiz); }
[data-game="freedoom"] { --accent-game: var(--game-freedoom); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; }

body.arcade {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

body.arcade button, body.arcade input { font: inherit; color: inherit; }
body.arcade a { color: inherit; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted-fg); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.bg-sandbox-grid {
  background-image: radial-gradient(color-mix(in oklch, var(--fg) 12%, transparent) 1px, transparent 1px);
  background-size: 14px 14px;
}

/* vehops-ui supergraphic band (brand.css provides .supergraphic; this keeps it pinned). */
.supergraphic { height: 6px; background: var(--supergraphic); }
.supergraphic-fixed { position: sticky; top: 0; z-index: 40; }

/* ---------- Button (buttonVariants) ---------- */
.vh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--primary-fg);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 3px rgb(0 0 0 / .25);
  transition: background-color .15s, color .15s, border-color .15s, transform .08s;
  user-select: none;
  touch-action: manipulation;
}
.vh-btn:hover { background: color-mix(in oklch, var(--primary) 90%, transparent); }
.vh-btn:active { transform: translateY(1px); }
.vh-btn:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--ring); }
.vh-btn:disabled { opacity: .5; pointer-events: none; }
.vh-btn svg { width: 16px; height: 16px; flex-shrink: 0; pointer-events: none; }
.vh-btn--secondary { background: var(--secondary); color: var(--secondary-fg); }
.vh-btn--secondary:hover { background: color-mix(in oklch, var(--secondary) 80%, transparent); }
.vh-btn--outline { background: var(--bg); color: var(--fg); border-color: var(--input); }
.vh-btn--outline:hover { background: var(--accent); color: var(--accent-fg); }
.vh-btn--ghost { background: transparent; color: var(--fg); box-shadow: none; }
.vh-btn--ghost:hover { background: var(--accent); color: var(--accent-fg); }
.vh-btn--destructive { background: var(--destructive); color: var(--destructive-fg); }
.vh-btn--game { background: var(--accent-game); color: #fff; }
.vh-btn--game:hover { background: color-mix(in oklch, var(--accent-game) 88%, white); }
.vh-btn--sm { height: 32px; padding: 0 12px; font-size: 12px; }
.vh-btn--lg { height: 40px; padding: 0 32px; }
.vh-btn--xl { height: 56px; padding: 0 28px; font-size: 17px; font-weight: 700; letter-spacing: .02em; }
.vh-btn--icon { width: 36px; padding: 0; }
.vh-btn--block { width: 100%; }

/* ---------- Badge (badgeVariants) ---------- */
.vh-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--primary-fg);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.vh-badge--secondary { background: var(--secondary); color: var(--secondary-fg); }
.vh-badge--outline { background: transparent; color: var(--fg); border-color: var(--border-color); }
.vh-badge--success { background: rgb(16 185 129 / .15); color: var(--emerald); }
.vh-badge--warning { background: rgb(245 158 11 / .15); color: var(--amber); }
.vh-badge--error { background: rgb(244 63 94 / .15); color: var(--rose); }
.vh-badge--game { background: color-mix(in oklch, var(--accent-game) 18%, transparent); color: color-mix(in oklch, var(--accent-game) 70%, white); }

/* ---------- State badge (extras.stateBadge): a dot plus a word ---------- */
.vh-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid var(--border-color);
  background: var(--bg);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.vh-state i { position: relative; display: inline-flex; width: 6px; height: 6px; border-radius: 50%; background: var(--muted-fg); }
.vh-state--live i, .vh-state--success i { background: #10b981; }
.vh-state--live i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: vh-ping 1.2s cubic-bezier(0, 0, .2, 1) infinite;
}
.vh-state--live, .vh-state--success { color: #6ee7b7; }
.vh-state--warning { color: #fcd34d; }
.vh-state--warning i { background: #f59e0b; }
.vh-state--error { color: #fda4af; }
.vh-state--error i { background: #f43f5e; }
@keyframes vh-ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }

/* ---------- Card (styles.card*) ---------- */
.vh-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--card-fg);
  box-shadow: 0 1px 3px rgb(0 0 0 / .3);
}
.vh-card__header { display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 12px; }
.vh-card__title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; }
.vh-card__description { margin: 0; font-size: 13px; color: var(--muted-fg); }
.vh-card__content { padding: 0 20px 20px; }
.vh-card__footer { display: flex; align-items: center; gap: 8px; padding: 0 20px 20px; }

/* ---------- Field, label, input (extras.control, styles.label) ---------- */
.vh-label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 500; line-height: 1; }
.vh-hint { font-size: 11px; color: var(--muted-fg); }
.vh-input {
  display: flex;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--input);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  font-size: 16px; /* 16px stops iOS from zooming on focus */
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.vh-input:focus-visible { box-shadow: 0 0 0 2px var(--ring); }
.vh-separator { height: 1px; width: 100%; background: var(--border-color); border: 0; margin: 0; }

/* ---------- Dialog (styles.dialog*) ---------- */
.vh-dialog {
  width: min(92vw, 440px);
  max-height: 92dvh;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 24px 64px rgb(0 0 0 / .55);
}
.vh-dialog::backdrop { background: rgb(0 0 0 / .8); backdrop-filter: blur(2px); }
.vh-dialog[open] { animation: vh-zoom-in .2s var(--ease-out); }
.vh-dialog__body { display: grid; gap: 16px; padding: 24px; }
.vh-dialog__title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.1; }
.vh-dialog__description { margin: 0; font-size: 14px; color: var(--muted-fg); }
.vh-dialog__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.vh-dialog__close {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
  display: grid; place-items: center; border: 0; background: transparent; color: var(--muted-fg); cursor: pointer;
}
.vh-dialog__close:hover { color: var(--fg); background: var(--accent); }
@keyframes vh-zoom-in { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }

/* ---------- Toast (styles.toast*) ---------- */
.vh-toasts {
  position: fixed;
  top: calc(16px + var(--safe-top));
  left: 50%;
  z-index: 80;
  display: grid;
  gap: 8px;
  width: min(92vw, 380px);
  transform: translateX(-50%);
  pointer-events: none;
}
.vh-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--border-color);
  background: color-mix(in oklch, var(--card) 92%, transparent);
  color: var(--card-fg);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 10px 30px rgb(0 0 0 / .4);
  backdrop-filter: blur(8px);
  animation: vh-slide-in .25s var(--ease-out);
}
.vh-toast--success { border-color: rgb(16 185 129 / .4); background: rgb(16 185 129 / .14); color: #a7f3d0; }
.vh-toast--error { border-color: color-mix(in oklch, var(--destructive) 50%, transparent); background: color-mix(in oklch, var(--destructive) 14%, var(--bg)); color: var(--destructive); }
.vh-toast.is-leaving { opacity: 0; transform: translateY(-6px); transition: opacity .2s, transform .2s; }
@keyframes vh-slide-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Skeleton ---------- */
.vh-skeleton { background: var(--muted); animation: vh-pulse 1.6s ease-in-out infinite; }
@keyframes vh-pulse { 50% { opacity: .5; } }

/* ---------- Motion helpers (brand.css .animate-fade-up is also available) ---------- */
.fade-up { animation: vehops-fade-up .35s var(--ease-out) both; }
@keyframes vehops-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes arcade-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes arcade-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-4px, 2px); }
  40% { transform: translate(4px, -2px); }
  60% { transform: translate(-3px, -1px); }
  80% { transform: translate(2px, 1px); }
}
.is-shaking { animation: arcade-shake .28s linear; }

/* =====================================================================
 * Arcade game shell: phone-first, one screen, no scrolling while playing.
 * ===================================================================== */
.arcade-game {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

.arcade-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(10px + var(--safe-top)) 16px 10px;
  border-bottom: 1px solid var(--border-color);
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
}
.arcade-wordmark { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.arcade-wordmark b { font-size: 17px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.arcade-wordmark small { display: block; color: var(--muted-fg); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.arcade-mark { display: grid; grid-template-columns: repeat(2, 7px); gap: 2px; }
.arcade-mark i { width: 7px; height: 7px; background: var(--accent-game); }
.arcade-mark i:nth-child(2) { background: #d3141b; }
.arcade-mark i:nth-child(3) { background: #277db6; }
.arcade-mark i:nth-child(4) { background: #8fbd65; }
.arcade-top-actions { display: flex; align-items: center; gap: 6px; }

.arcade-hud {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--border-color);
}
.arcade-hud > div { padding: 8px 14px; border-right: 1px solid var(--border-color); min-width: 0; }
.arcade-hud > div:last-child { border-right: 0; }
.arcade-hud span { display: block; color: var(--muted-fg); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.arcade-hud strong { display: block; font-family: var(--font-mono); font-size: 22px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arcade-hud strong.is-bumped { animation: arcade-pop .3s var(--ease-out); color: var(--accent-game); }

.arcade-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.arcade-stage canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  background: color-mix(in oklch, var(--card) 70%, black);
  border: 1px solid var(--border-color);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--accent-game) 20%, transparent), 0 20px 60px rgb(0 0 0 / .45);
  touch-action: none;
}

.arcade-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 20px;
  background: radial-gradient(ellipse at center, color-mix(in oklch, var(--bg) 70%, transparent), color-mix(in oklch, var(--bg) 92%, transparent));
  backdrop-filter: blur(3px);
  transition: opacity .25s;
}
.arcade-overlay[hidden] { display: none; }
.arcade-overlay__panel { width: min(100%, 380px); display: grid; gap: 14px; text-align: center; animation: vehops-fade-up .35s var(--ease-out) both; }
.arcade-overlay__kicker { margin: 0; color: var(--accent-game); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.arcade-overlay__title { margin: 0; font-size: clamp(30px, 9vw, 44px); font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.arcade-overlay__copy { margin: 0; color: var(--muted-fg); font-size: 15px; }
.arcade-overlay__score { font-family: var(--font-mono); font-size: clamp(40px, 13vw, 64px); font-weight: 700; line-height: 1; color: var(--accent-game); font-variant-numeric: tabular-nums; }
.arcade-overlay__actions { display: grid; gap: 8px; }

.arcade-pad {
  display: grid;
  gap: 8px;
  padding: 10px 12px calc(12px + var(--safe-bottom));
  border-top: 1px solid var(--border-color);
}
.arcade-pad button {
  height: 60px;
  border: 1px solid var(--border-color);
  background: var(--secondary);
  color: var(--fg);
  font-size: 22px;
  font-weight: 700;
  touch-action: manipulation;
  user-select: none;
}
.arcade-pad button:active, .arcade-pad button.is-pressed { background: var(--accent-game); border-color: var(--accent-game); color: #fff; }
.arcade-hint { margin: 0; padding: 0 16px calc(10px + var(--safe-bottom)); color: var(--muted-fg); font-size: 12px; text-align: center; }
@media (pointer: fine) { .arcade-pad--touch-only { display: none; } }
@media (pointer: coarse) { .arcade-hint--keys { display: none; } }

/* Leaderboard rows (results overlay, lobby, kiosk) */
.arcade-board { display: grid; gap: 0; border: 1px solid var(--border-color); }
.arcade-board__row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
  font-size: 14px;
}
.arcade-board__row:last-child { border-bottom: 0; }
.arcade-board__row.is-you { background: color-mix(in oklch, var(--accent-game) 14%, transparent); }
.arcade-board__rank { font-family: var(--font-mono); color: var(--muted-fg); }
.arcade-board__row:first-child .arcade-board__rank { color: var(--amber); }
.arcade-board__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.arcade-board__score { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.arcade-board__empty { padding: 16px; color: var(--muted-fg); font-size: 13px; text-align: center; }

/* QR dialog */
.arcade-qr { display: grid; place-items: center; gap: 12px; }
.arcade-qr img { width: min(72vw, 280px); aspect-ratio: 1; background: #fff; image-rendering: pixelated; }
.arcade-qr code { font-family: var(--font-mono); font-size: 12px; color: var(--muted-fg); word-break: break-all; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}