/**
 * tzg.css — Throne Zone Games shared design system
 * Load after tzg.js and the Google Fonts link in every page.
 */

/* ── TOKENS ──────────────────────────────────────── */
:root {
  --bg:      #f4f6fb;
  --surface: #ffffff;
  --card:    #ffffff;
  --border:  #d4d9e8;
  --text:    #151922;
  --muted:   #8892a4;
  --subtle:  #e8ecf4;
  --radius:  14px;
  --good:    #1a8a48;
  --bad:     #c02838;
  --accent:  #c08000;
  --trans:   0.18s ease;

  /* Constants for dates and timing */
  --ms-per-day: 86400000;
  --cache-duration: 1000;

  /* Fluid type scale — single source of truth for screen-scaled text.
     Each ramps from a phone-safe minimum to a tablet maximum, so the
     intro / results screens stay proportional from iPhone SE to iPad Pro.
     Tune a size by editing one value here, not per-rule. */
  --fs-title:   clamp(24px, 6vw,   48px);  /* intro title (secondary to the game icon) */
  --fs-display: clamp(36px, 10vw,  96px);  /* results score / time */
  --fs-stat:    clamp(20px, 4.6vw, 44px);  /* large stat numbers */
  --fs-cta:     clamp(15px, 2.4vw, 28px);  /* play / primary button */
  --fs-body:    clamp(11px, 1.6vw, 17px);  /* rules / body copy */
  --fs-sub:     clamp(10px, 1.5vw, 16px);  /* tagline / puzzle no. / streak */
  --fs-label:   clamp(8px,  1.2vw, 12px);  /* small uppercase captions */
  --fs-game-label: clamp(9px, 1.2vw, 13px);  /* game stats labels */
  --fs-game-body:  clamp(10px, 1.4vw, 14px); /* game body text */
  --fs-game-stat:  clamp(16px, 3vw, 24px);   /* large game stat numbers */

  /* Spacing scale for consistent layouts */
  --sp-xs:   4px;   /* buttons, small gaps */
  --sp-sm:   8px;   /* standard gap */
  --sp-md:   12px;  /* medium padding */
  --sp-lg:   16px;  /* card padding */
  --sp-xl:   24px;  /* section padding */
  --sp-2xl:  32px;  /* major sections */

  /* Transition timing */
  --trans-fast: 0.1s ease;   /* quick feedback */
  --trans-std:  0.15s ease;  /* standard interaction */
  --trans-slow: 0.25s ease;  /* smooth transitions */

  /* Semantic opacity colors for consistency */
  --accent-subtle: rgba(192, 128, 0, 0.1);  /* 10% opacity */
  --accent-faint:  rgba(192, 128, 0, 0.05); /* 5% opacity */
}

/* ── ACCESSIBILITY ──────────────────────────────── */
/* Keyboard focus indicators */
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── RESET ───────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
html, body { height: 100%; touch-action: pan-x pan-y; }

/* ── BODY BASE ───────────────────────────────────── */
body {
  font-family: 'JetBrains Mono', monospace;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Keep content clear of landscape notches. Bottom and top insets are
     handled per-screen so full-height layouts don't overflow. */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ── GRADIENT TITLE ──────────────────────────────── */
/* Apply to the game's main heading element. */
.tzg-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(20px, 4vw, 28px);
  font-weight: 800;
  letter-spacing: 6px;
  text-transform: uppercase;
  background: linear-gradient(120deg, #60b4ff 0%, #4edd88 25%, #f5c842 50%, #ff8c42 75%, #ff5f72 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

/* ── SUBTITLE ────────────────────────────────────── */
/* Apply to the one-line tagline beneath the title. */
.tzg-sub {
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color var(--trans-std);
}

/* ── STAT BLOCK ──────────────────────────────────── */
/* Label-above-value display for scores, levels, combos, etc.
   Use .tzg-stat as the container, .tzg-stat-label for the
   caption, and .tzg-stat-val for the number/value.
   Override font-size on .tzg-stat-val when a smaller or
   larger size is needed for a specific layout context.      */
.tzg-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.tzg-stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  transition: color var(--trans);
}
.tzg-stat-val {
  font-family: Consolas, 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 24px;
  color: var(--accent);
  line-height: 1;
  transition: color var(--trans-std);
}

/* ── GAME TOP BAR ────────────────────────────────── */
/* Structured menu bar pinned to the top of every game screen.
   The back button (fixed, injected by tzg.js) overlays the reserved left edge;
   game-specific action icons go in .topbar-actions on the right. Pair with
   `.game-body` (the centre region below). Add an icon:
   <button class="topbar-btn">…</button> inside .topbar-actions. */
.game-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  width: 100%;
  min-height: calc(46px + env(safe-area-inset-top));   /* ensures border clears the fixed back button on all devices */
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* action icons on the right */
  gap: var(--sp-sm);
  padding: calc(6px + env(safe-area-inset-top))
           calc(12px + env(safe-area-inset-right))
           6px
           calc(54px + env(safe-area-inset-left));   /* clear the fixed back button on the left */
  margin-bottom: var(--sp-lg);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  transition: border-color var(--trans-std);
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Region below the top bar: grows to fill and centres the game content. */
.game-body {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 6px calc(24px + env(safe-area-inset-bottom));
}
.topbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--trans-std), color var(--trans-std), background var(--trans-std);
}
.topbar-btn:hover { border-color: var(--muted); color: var(--text); }
.topbar-btn:active { transform: scale(0.96); transition: transform var(--trans-fast); }

/* ── SCREEN FRAMEWORK (shared by all game pages) ── */
/* Each game page has three screens — #intro, #game, #results — all hidden by
   default and revealed by adding the .visible class (see tzg.js, which shows
   #intro on load). */
#intro, #game, #results { display: none; }

/* Intro + results: full-page, vertically-centred column. */
#intro.visible,
#results.visible {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;   /* min-height keeps it scroll-safe when content overflows */
  min-height: 100vh;
  width: 100%;
  text-align: center;
}
#intro.visible   { padding: calc(28px + env(safe-area-inset-top)) 24px calc(40px + env(safe-area-inset-bottom)); }
#results.visible { padding: calc(56px + env(safe-area-inset-top)) 24px calc(40px + env(safe-area-inset-bottom)); }

/* Game: pinned top bar (.game-topbar) + flex-grow centre region (.game-body). */
#game.visible {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100dvh;
  width: 100%;
}

/* Game icon shown above the title on the intro / results screens.
   The SVG uses currentColor; each game sets .intro-icon { color: <accent> }. */
.intro-icon {
  display: block;
  width: clamp(64px, 16vw, 120px);
  height: auto;
  margin: 0 auto 16px;
}

.intro-title { font-size: var(--fs-title) !important; margin: 0 0 6px; }

/* In-game chrome scales up on larger screens so the in-game screens feel cohesive */
@media (min-width: 640px) {
  .tzg-stat-label { font-size: 13px; }
  .tzg-stat-val   { font-size: 30px; }
  .results-score-wrap .tzg-stat-label { font-size: 12px; }
}

/* Tablet breakpoint improvements */
@media (min-width: 768px) {
  body { font-size: 14px; }
}

/* Desktop breakpoint */
@media (min-width: 1024px) {
  body { font-size: 16px; }
}

.intro-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-sub);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}

.intro-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-sub);
  color: var(--muted);
  letter-spacing: 0.06em;
  margin: 0 0 20px;
}

/* ── INTRO STATS ─────────────────────────────────── */
.intro-stats {
  width: 100%;
  max-width: min(90vw, 680px);
  margin-bottom: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
.intro-stats .stats-row { border: none; padding: 0; margin: 0; }

.intro-streak {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-sub);
  color: var(--accent);
  letter-spacing: 0.04em;
  margin: 8px 0 0;
}

.stats-row {
  display: flex;
  gap: 0;
  justify-content: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  margin: 0;
}
.stat-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 5px;
}
.stat-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-stat);
  font-weight: 500;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 0;
}

/* ── INTRO PLAY BUTTON ───────────────────────────── */
.intro-play {
  display: block;
  width: 100%;
  max-width: min(86vw, 560px);
  min-height: 44px;
  padding: clamp(15px, 2vw, 26px) 0;
  border-radius: 50px;
  border: none;
  background: var(--text);
  color: var(--bg);
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: var(--fs-cta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: var(--sp-xl);
  margin-bottom: var(--sp-xl);
  transition: opacity var(--trans-std);
  -webkit-tap-highlight-color: transparent;
}
.intro-play:hover { opacity: 0.85; }
.intro-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── INTRO RULES ACCORDION ───────────────────────── */
.intro-rules {
  width: 100%;
  max-width: min(90vw, 680px);
  margin-top: 0;
  text-align: left;
  padding: 0 8px;
}
.intro-rules > summary {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  -webkit-tap-highlight-color: transparent;
}
.intro-rules > summary::-webkit-details-marker { display: none; }
.intro-rules > summary::before { display: none; }
.intro-rules ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.intro-rules li {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-body);
  line-height: 1.85;
  color: var(--muted);
  padding-left: var(--sp-lg);
  position: relative;
}
.intro-rules li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* ── COMPLETION CONFIRMATION (on results screen) ─── */
.results-solved {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--good);
}
.results-solved .rs-tick {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
}