/* Design Tokens — quest-game frontend (Tailwind-based CSS variables) */
:root {
  /* Colors — deep space dark with a warm gold accent */
  --quest-dark: #0b0b12;
  --quest-dark-30: rgba(11, 11, 18, 0.3);
  --quest-card: #14141f;
  --quest-cream: #f4eee6;
  --quest-gold: #eac87a;
  --quest-gold-hover: #f2d592;
  --quest-muted: #93897d;
  --quest-danger: #ef6461;
  --quest-success: #63d47d;
  --quest-info: #7ab8ef;

  /* Light mode colors (prefers-color-scheme: light) */
  --quest-light-bg: #f6f4f1;
  --quest-light-fg: #1a1816;

  /* Borders */
  --quest-border: #262633;
  --quest-light-border: #d4ccc4;
  --quest-light-bg-2: #e8e4dc;

  /* Surfaces for the glass design system (dark values; light overrides below) */
  --surface-glass: rgba(20, 20, 31, 0.72);
  --surface-glass-hover: rgba(32, 32, 48, 0.72);
  --surface-input: rgba(11, 11, 18, 0.55);
  --surface-border: rgba(255, 255, 255, 0.08);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;

  /* Radii */
  --radius-card: 20px;
  --radius-btn: 14px;
  --radius-img: 0.75rem;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.45);
  --shadow-img: 0 2px 12px rgba(0, 0, 0, 0.25);

  /* Animation durations */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 600ms;

  /* Typography — modern system stack (covers Cyrillic on all platforms) */
  --font-body: ui-rounded, "SF Pro Rounded", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-body);
}

/* Light mode: flip the semantic token values so every var() usage follows
 * the system scheme (templates only ever reference the tokens). */
@media (prefers-color-scheme: light) {
  :root {
    --quest-dark: #f7f5f2;        /* page background becomes light */
    --quest-dark-30: rgba(247, 245, 242, 0.3);
    --quest-card: #ffffff;
    --quest-cream: #1a1816;       /* foreground becomes dark */
    --quest-muted: #71685e;
    --quest-border: #e0d9d0;
    --surface-glass: rgba(255, 255, 255, 0.78);
    --surface-glass-hover: rgba(255, 255, 255, 0.95);
    --surface-input: rgba(20, 16, 12, 0.045);
    --surface-border: rgba(26, 24, 22, 0.1);
    --shadow-card: 0 10px 40px rgba(26, 24, 22, 0.1);
    --shadow-img: 0 2px 12px rgba(26, 24, 22, 0.08);
  }
}

/* Dark mode by default: deep space background with ambient gold/indigo
 * glows (subtle, GPU-cheap radial gradients). */
body {
  background-color: var(--quest-dark);
  background-image:
    radial-gradient(60rem 40rem at 85% -10%, rgba(234, 200, 122, 0.07), transparent 60%),
    radial-gradient(50rem 35rem at -10% 110%, rgba(122, 148, 239, 0.06), transparent 60%);
  background-attachment: fixed;
  color: var(--quest-cream);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  /* Prevent the double-tap zoom delay on interactive UI. */
  touch-action: manipulation;
}

body {
  /* Full-height layout that respects mobile browser chrome (dvh) and
   * notched displays (safe areas). */
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  /* Pull-to-refresh would resync the dashboard, but an accidental reload
   * mid-answer is worse; WS pushes already keep state fresh. */
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent;
}

/* iOS zooms into form controls smaller than 16px on focus. */
input,
textarea,
select {
  font-size: 16px;
}

/* Touch targets stay comfortable and borders behave on iOS Safari. */
button,
.btn-primary {
  min-height: 44px;
  -webkit-appearance: none;
  appearance: none;
}

a {
  touch-action: manipulation;
}

img {
  -webkit-user-drag: none;
  user-select: none;
}

/* Pulse animation for waiting indicator */
@keyframes quest-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.quest-pulse {
  animation: quest-pulse var(--duration-normal) ease-in-out infinite;
}

/* Reduced motion — disable animations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Legacy class aliases (kept until every template is migrated) ---- */

.card {
  background: var(--surface-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: linear-gradient(135deg, #f7dfa5 0%, #eac87a 45%, #d4a852 100%);
  color: #16120a;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-btn);
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(234, 200, 122, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease, filter var(--duration-fast) ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 8px 26px rgba(234, 200, 122, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.text-muted {
  color: var(--quest-muted);
}

.text-success {
  color: var(--quest-success);
}

.text-danger {
  color: var(--quest-danger);
}

/* ---- Admin tables ---- */
.q-table {
  width: 100%;
  font-size: 0.875rem;
  border-collapse: collapse;
}
.q-table th {
  text-align: left;
  padding: 0.6rem 0.75rem;
  color: var(--quest-muted);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--surface-border);
}
.q-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--surface-border);
  vertical-align: middle;
}
.q-table tbody tr:hover {
  background: var(--surface-glass-hover);
}
.q-table a {
  color: var(--quest-gold);
}
.q-table a:hover {
  text-decoration: underline;
}