/* ═══════════════════════════════════════════════════════════════
   BASE.CSS — Design tokens, reset, and typography
   Darkfall Card Game Companion
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   ABYSSDICE OFFICIAL VISUAL LANGUAGE — LOCKED v2.0.5
   Welcome / splash palette: charcoal + deep purple, warm gold,
   muted indigo secondary. Do not introduce neon or random accents.
═══════════════════════════════════════════════════════════════ */
:root {
  /* Core palette — welcome screen reference (locked) */
  --color-void:       #0a090d;
  --color-abyss:      #12101a;
  --color-depths:     #18151f;
  --color-surface:    #1f1b28;
  --color-rim:        #2a2436;
  --color-mist:       #3d3550;

  /* Text hierarchy — readable off-white / gray, never purple body */
  --color-text-primary:   #e8e6ef;
  --color-text-secondary: #a8a3b8;
  --color-text-muted:     #6b6478;
  --color-text-inverse:   #1a1410;

  /* Primary — warm metallic gold */
  --color-ember:      #c9a24b;
  --color-ember-glow: #e0c878;
  --color-ember-dim:  #8a6d2f;

  /* Secondary — muted dark indigo (Create Account style) */
  --color-indigo:     #2a2340;
  --color-indigo-lt:  #3a3058;
  --color-indigo-edge:#4a3f6a;

  /* Abyss accent — subdued purple, never neon */
  --color-abyss-glow: #4a3f6a;
  --color-violet:     #6b5f8a;

  /* Semantic aliases */
  --abyss-black:   #0a090d;
  --abyss-navy:    #12101a;
  --abyss-purple:  #3a3058;
  --abyss-violet:  #6b5f8a;
  --abyss-gold:    #c9a24b;
  --abyss-gold-br: #e0c878;
  --abyss-white:   #e8e6ef;

  /* Primary gold button — welcome / Got it reference */
  --gold-btn-face:   linear-gradient(180deg, #e0c878 0%, #c9a24b 55%, #8a6d2f 100%);
  --gold-btn-text:   #1a1410;
  --gold-btn-border: rgba(232, 217, 166, 0.55);
  --gold-btn-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 6px rgba(120,86,28,0.35), 0 6px 18px rgba(5,4,10,0.45);
  --mask-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2l2.2 6.8H21l-5.5 4 2.1 6.5L12 17.2 6.4 19.3l2.1-6.5L3 8.8h6.8z'/%3E%3C/svg%3E");

  /* Status colors — premium, never cheap-bright */
  --color-crimson:    #C63D54;   /* Danger Red */
  --color-crimson-lt: #d8546b;   /* danger hover */
  --color-crimson-dk: #8f2536;   /* dark crimson — errors (premium) */
  --color-jade:       #3a9a5e;   /* success */
  --color-jade-lt:    #5a9a6e;   /* Success — muted, on-palette */
  --color-sapphire:   #2f5bb0;   /* info base */
  --color-info:       #6DA7FF;   /* Information Blue */
  --color-amber:      #d98a3a;   /* Warning / Away — orange */

  /* Status meaning aliases (color IS the language) */
  --status-online:   #5a9a6e;   /* muted green */
  --status-offline:  #6b6478;   /* grey     */
  --status-away:     #b8863a;   /* amber    */
  --status-playing:  #6b5f8a;   /* violet   */
  --status-lobby:    #c9a24b;   /* gold     */

  /* Boss states */
  --color-boss-active:    #2a1140;
  --color-boss-defeated:  #16161c;
  --color-boss-hidden:    #14122c;

  /* ── GLASS MATERIAL (carved magical crystal) ─────────────── */
  --glass-bg:        linear-gradient(155deg, rgba(58,48,88,0.12), rgba(18,16,26,0.88) 55%, rgba(10,9,13,0.96));
  --glass-bg-strong: linear-gradient(155deg, rgba(58,48,88,0.18), rgba(18,16,26,0.94) 50%, rgba(10,9,13,0.98));
  --glass-border:    1px solid rgba(201,162,75,0.28);
  --glass-blur:      blur(16px) saturate(1.05);
  --glass-radius:    18px;

  /* ── GOLD METAL (engraved trim) ──────────────────────────── */
  --gold-trim:    linear-gradient(180deg, var(--color-ember-glow), var(--color-ember) 45%, var(--color-ember-dim));
  --gold-edge:    1px solid rgba(201,162,75,0.55);

  /* ── GLOW (information, breathing — never blinking) ───────── */
  --glow-gold:      0 0 18px rgba(201,162,75,0.22);
  --glow-gold-soft: 0 0 10px rgba(201,162,75,0.12);
  --glow-purple:    0 0 16px rgba(58,48,88,0.28);
  --glow-violet:    0 0 14px rgba(107,95,138,0.22);
  --glow-online:    0 0 12px rgba(88,201,122,0.55);
  --glow-danger:    0 0 18px rgba(198,61,84,0.40);

  /* ── SHADOWS (soft purple, never harsh black) ────────────── */
  --shadow-soft:    0 12px 36px rgba(5,4,10,0.55), 0 2px 8px rgba(58,48,88,0.08);
  --shadow-lifted:  0 18px 48px rgba(5,4,10,0.62), 0 4px 12px rgba(58,48,88,0.12);

  /* Typography */
  --font-display:  'Cinzel', 'Georgia', serif;
  --font-body:     'Crimson Pro', 'Georgia', serif;
  --font-mono:     'JetBrains Mono', 'Courier New', monospace;

  /* Type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Radii */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-card:   0 4px 24px rgba(7,5,18,0.55);
  --shadow-ember:  0 0 24px rgba(201,162,75,0.26);
  --shadow-glow:   0 0 40px rgba(201,162,75,0.16);

  /* Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-expo:  cubic-bezier(0.7, 0, 0.84, 0);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-xslow:  600ms;

  /* Layout */
  --max-width:    480px;
  --header-h:     56px;
  --end-turn-h:   76px;
  --safe-bottom:  env(safe-area-inset-bottom, 0px);
}

/* ── HIGH CONTRAST OVERRIDE ──────────────────────────────── */
body.high-contrast {
  --color-ember:      #e0c878;
  --color-ember-glow: #f0dfa0;
  --color-text-primary:   #ffffff;
  --color-text-secondary: #d4d0dc;
  --color-rim:        #4a3f6a;
}

/* ── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}

/* ── TEXT SIZE ACCESSIBILITY ─────────────────────────────── */
body.text-size-large {
  --text-xs:   0.875rem;
  --text-sm:   1rem;
  --text-base: 1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.625rem;
  --text-3xl:  2rem;
  --text-4xl:  2.5rem;
  --text-5xl:  3.25rem;
}

body.text-size-extra {
  --text-xs:   1rem;
  --text-sm:   1.125rem;
  --text-base: 1.25rem;
  --text-lg:   1.375rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.125rem;
  --text-4xl:  2.75rem;
  --text-5xl:  3.5rem;
}

/* ── LARGE UI ACCESSIBILITY ────────────────────────────── */
body.large-ui .menu-btn {
  min-height: 72px;
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-xl);
}

body.large-ui .count-btn {
  min-height: 84px;
  font-size: var(--text-3xl);
}

body.large-ui .end-turn-btn {
  min-height: 96px;
}

body.large-ui .tracker-card {
  min-height: 120px;
  padding: var(--space-4);
}

body.large-ui .tracker-card--compact {
  min-height: 0;
  padding: var(--space-3);
}

body.large-ui .boss-card {
  padding: var(--space-5);
}

body.large-ui .res-btn {
  width: 44px;
  height: 44px;
  font-size: var(--text-xl);
}

body.large-ui .resource-count {
  font-size: var(--text-3xl);
}

body.large-ui .overlay-panel {
  padding: var(--space-8);
  gap: var(--space-5);
}

body.large-ui .icon-btn {
  width: 48px;
  height: 48px;
  font-size: var(--text-2xl);
}

body.large-ui .turn-chip {
  min-width: 88px;
  padding: var(--space-3) var(--space-4);
}

body.large-ui .seeker-passive {
  font-size: var(--text-sm);
  padding: var(--space-4);
}

body.large-ui .tracker-toggle-btn,
body.large-ui .boss-btn {
  min-height: 48px;
  font-size: var(--text-base);
}

body.large-ui .settings-choice {
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
}

@media (max-width: 480px) {
  body.large-ui {
    --text-base: 1.0625rem;
    --text-lg:   1.125rem;
    --text-xl:   1.1875rem;
    --text-2xl:  1.375rem;
    --text-3xl:  1.625rem;
  }

  body.large-ui .menu-btn {
    min-height: 60px;
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-lg);
  }

  body.large-ui .count-btn {
    min-height: 64px;
    font-size: var(--text-xl);
    padding: var(--space-4) var(--space-3);
  }

  body.large-ui .player-count-selector {
    grid-template-columns: repeat(2, 1fr);
  }

  body.large-ui .resource-grid {
    grid-template-columns: 1fr;
  }

  body.large-ui .tracker-card {
    min-height: auto;
  }

  body.large-ui .end-turn-btn {
    min-height: 72px;
  }

  body.large-ui .overlay-panel {
    max-height: 85vh;
    overflow-y: auto;
    margin: var(--space-4);
    width: calc(100% - var(--space-8));
  }

  body.large-ui .seeker-select,
  body.large-ui .player-name-input {
    min-width: 0;
    width: 100%;
  }

  body.large-ui .player-name-row {
    flex-wrap: wrap;
  }

  body.large-ui .screen,
  body.large-ui .setup-content,
  body.large-ui .settings-content,
  body.large-ui .profiles-content,
  body.large-ui .boss-checklist-panel {
    overflow-x: hidden;
  }

  body.large-ui .boss-checklist-panel {
    overflow-x: hidden;
  }

  body.large-ui .turn-order-track {
    justify-content: center;
    flex-wrap: wrap;
  }

  body.large-ui .turn-chip {
    min-width: 64px;
    max-width: calc(50% - var(--space-2));
  }

  body.large-ui .descent-panel {
    overflow: hidden;
    padding: var(--space-4);
  }

  body.large-ui .descent-boss-name {
    font-size: var(--text-lg);
    word-break: break-word;
    white-space: normal;
  }

  body.large-ui .game-header--v194,
  body.large-ui .game-header--v193 {
    flex-wrap: nowrap;
    min-height: 60px;
  }

  body.large-ui .meta-pill {
    padding: var(--space-2) var(--space-3);
  }

  body.large-ui .meta-value {
    font-size: var(--text-xl);
  }

  body.large-ui .seeker-hero-name {
    font-size: var(--text-xl);
    word-break: break-word;
  }

  body.large-ui .tracker-row--hand {
    max-width: 100%;
  }

  body.large-ui .victory-title {
    font-size: var(--text-3xl);
  }

  body.large-ui .profile-card-actions {
    flex-direction: column;
  }

  body.large-ui .profile-card-actions .settings-btn {
    width: 100%;
  }

  body.large-ui .relic-slots-visual {
    justify-content: center;
  }

  body.large-ui .investment-card-top {
    flex-wrap: wrap;
  }

  body.large-ui .screen-header {
    flex-shrink: 0;
  }

  body.large-ui .back-btn {
    flex-shrink: 0;
  }

  body.large-ui .boss-checklist-item {
    min-height: 64px;
    padding: var(--space-5);
  }

  body.large-ui .boss-checklist-label {
    font-size: var(--text-xl);
  }

  body.large-ui .run-info-grid {
    grid-template-columns: 1fr;
  }
}

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-void);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

input {
  font-family: inherit;
  font-size: inherit;
}

ul, ol {
  list-style: none;
}

/* ── TYPOGRAPHY ──────────────────────────────────────────── */

/* Display headings use Cinzel for the ancient carved look */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

/* Labels and data numbers use mono for precision */
.mono {
  font-family: var(--font-mono);
}

/* ── FOCUS STYLES ─────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-ember);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: var(--color-void);
}
::-webkit-scrollbar-thumb {
  background: var(--color-rim);
  border-radius: var(--radius-full);
}

/* ── UTILITY CLASSES ─────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

.text-center { text-align: center; }
.text-muted   { color: var(--color-text-muted); }
.text-ember   { color: var(--color-ember); }
.wide         { width: 100%; }

/* ═══════════════════════════════════════════════════════════════
   ABYSSDICE VISUAL LANGUAGE — reusable materials & motion
   Glass is carved, gold is engraved, glow breathes (it never
   blinks), shadows are soft purple. These classes let every
   screen inherit the identity of the card back.
═══════════════════════════════════════════════════════════════ */

/* Carved magical glass panel */
.abyss-glass {
  position: relative;
  background: var(--glass-bg);
  border: var(--glass-border);
  border-radius: var(--glass-radius);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(245,244,248,0.05);
}
.abyss-glass--strong { background: var(--glass-bg-strong); box-shadow: var(--shadow-lifted), inset 0 1px 0 rgba(245,244,248,0.06); }

/* Engraved gold hairline that catches the light along the top */
.abyss-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(232,217,166,0.18), transparent 22%);
  opacity: 0.7;
}

/* Engraved gold text */
.gold-engrave {
  background: var(--gold-trim);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Breathing glow — importance, never decoration */
.glow-breathe       { animation: abyss-breathe 5.5s ease-in-out infinite; }
.glow-breathe-gold  { animation: abyss-breathe-gold 5.5s ease-in-out infinite; }

@keyframes abyss-breathe {
  0%, 100% { box-shadow: 0 0 14px rgba(106,76,255,0.18); }
  50%      { box-shadow: 0 0 30px rgba(106,76,255,0.40); }
}
@keyframes abyss-breathe-gold {
  0%, 100% { box-shadow: 0 0 12px rgba(201,162,75,0.16); }
  50%      { box-shadow: 0 0 26px rgba(201,162,75,0.36); }
}

/* Occasional gold shimmer sweep across metal trim */
@keyframes abyss-shimmer {
  0%   { background-position: -180% 0; }
  100% { background-position: 280% 0; }
}

/* Drifting abyssal fog — almost imperceptible */
@keyframes abyss-fog-drift {
  0%   { transform: translate3d(-4%, 0, 0) scale(1.1); opacity: 0.55; }
  50%  { transform: translate3d(4%, -2%, 0) scale(1.18); opacity: 0.8; }
  100% { transform: translate3d(-4%, 0, 0) scale(1.1); opacity: 0.55; }
}

/* Staggered, confident arrival — heavy and elegant, never bouncy */
@keyframes abyss-rise {
  0%   { opacity: 0; transform: translateY(22px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes abyss-fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Ambient fog layer — drop into any full-screen container */
.abyss-fog {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(40% 30% at 25% 30%, rgba(106,76,255,0.16), transparent 70%),
    radial-gradient(45% 35% at 78% 65%, rgba(141,115,255,0.12), transparent 72%),
    radial-gradient(35% 30% at 60% 18%, rgba(201,162,75,0.06), transparent 70%);
  filter: blur(28px);
  animation: abyss-fog-drift 26s ease-in-out infinite;
}
body.reduce-motion .abyss-fog,
body.reduce-motion .glow-breathe,
body.reduce-motion .glow-breathe-gold { animation: none; }

/* ── ENGRAVED LINE ICONS ─────────────────────────────────────
   One neutral SVG, many states. Colour & glow come from CSS via
   currentColor — never baked into the symbol. */
.abyss-icon {
  width: 22px;
  height: 22px;
  display: inline-block;
  flex: 0 0 auto;
  color: var(--abyss-white);              /* default: white */
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: color var(--duration-base) var(--ease-out-expo),
              filter var(--duration-base) var(--ease-out-expo),
              transform var(--duration-base) var(--ease-out-expo);
}
.abyss-icon use { stroke: currentColor; fill: none; }
.abyss-icon--lg { width: 28px; height: 28px; }
.abyss-icon--sm { width: 18px; height: 18px; }

/* State is communicated through lighting, not by recolouring the glyph */
.abyss-icon--gold   { color: var(--abyss-gold-br); filter: drop-shadow(0 0 6px rgba(201,162,75,0.55)); }
.abyss-icon--purple { color: var(--abyss-violet);  filter: drop-shadow(0 0 6px rgba(141,115,255,0.55)); }
.abyss-icon--online { color: var(--status-online); filter: drop-shadow(0 0 6px rgba(88,201,122,0.6)); }
.abyss-icon--info   { color: var(--color-info);    filter: drop-shadow(0 0 5px rgba(109,167,255,0.5)); }
.abyss-icon--danger { color: var(--color-crimson); filter: drop-shadow(0 0 6px rgba(198,61,84,0.5)); }
.abyss-icon--muted  { color: var(--color-text-muted); opacity: 0.55; }