/* ============================================================================
   Cronómetro Blood Bowl — app styles
   Layered on top of Bulma 1.x and Animate.css 4.x.
   Palette: morado (primary), dorado (accent), blanco, negro.
   Six visual states (per contracts/ui-contract.md §2):
     inactive · active-normal · active-in-reserve · active-exhausted · paused · idle
   All foreground/background pairs target WCAG AA (≥4.5:1 normal, ≥3:1 large).
   ============================================================================ */

:root {
  /* Base palette (brand-invariant: identical in both themes) */
  --color-purple-deep: hsl(251, 79%, 15%);   /* page background */
  --color-purple-mid:  hsl(252, 60%, 60%);   /* active-normal accent */
  --color-purple-soft: hsl(252, 45%, 78%);   /* subtle highlights */
  --color-gold:        hsl(45, 85%, 60%);    /* dorado: links, kbd, in-reserve */
  --color-gold-deep:   hsl(40, 75%, 45%);    /* dorado oscuro: borders */
  --color-white:       #ffffff;
  --color-black:       #1a1a1a;

  /* State tokens (brand-invariant; consumed by .player-card variants) */
  --color-active-normal-bg: var(--color-purple-mid);
  --color-active-normal-fg: var(--color-white);
  --color-active-warning-bg: var(--color-gold);          /* dorado, no naranja */
  --color-active-warning-fg: var(--color-black);
  --color-active-danger-bg: hsl(348, 86%, 50%);          /* carmesí: peligro, mantenido por semántica */
  --color-active-danger-fg: var(--color-white);
  --color-paused-banner-bg: rgba(20, 20, 20, 0.85);
  --color-paused-banner-fg: var(--color-white);

  /* Role tokens (theme-variant: dark defaults here, light overrides in the
     @media block below). Every rule body that needs a themed value MUST
     consume one of these tokens; literal hex/HSL inside rule bodies is
     forbidden by contracts/theme-tokens-contract.md §5. */
  --color-page-bg:             var(--color-purple-deep);
  --color-page-fg:             var(--color-white);
  --color-page-fg-muted:       hsla(0, 0%, 100%, 0.85);   /* ~12:1 on deep purple */
  --color-link:                var(--color-gold);
  --color-link-hover:          hsl(45, 95%, 75%);
  --color-card-inactive-bg:    hsl(0, 0%, 96%);
  --color-card-inactive-fg:    hsl(0, 0%, 30%);
  --color-form-box-bg:         var(--color-white);
  --color-form-box-border:     hsla(45, 85%, 60%, 0.25);
  --color-form-box-shadow:     0 8px 32px rgba(0, 0, 0, 0.35);
  --color-controls-bar-bg:     hsl(0, 0%, 100%);
  --color-controls-bar-border: hsl(0, 0%, 90%);

  /* Backwards-compat aliases (deprecated; new code MUST use the
     --color-card-inactive-* tokens above). Kept temporarily because no
     external rule consumes them after this refactor; safe to delete in a
     later cleanup. */
  --color-inactive-bg: var(--color-card-inactive-bg);
  --color-inactive-fg: var(--color-card-inactive-fg);
}

/* --- Light theme (prefers-color-scheme: light) -----------------------
   Re-declares ONLY the role tokens above; brand-invariant tokens are
   never redeclared here — they carry across themes (see contract §1).
   Light-theme-only button tokens (--color-button-light-*) are introduced
   here because Bulma's default .button.is-light rendering is acceptable
   in dark mode; they exist solely to give us ≥3:1 against the
   light-tinted-purple page (FR-003 / contract §4). ---------------------- */
@media (prefers-color-scheme: light) {
  :root {
    --color-page-bg:             hsl(252, 30%, 96%);
    --color-page-fg:             #1a1a1a;
    --color-page-fg-muted:       hsla(0, 0%, 0%, 0.65);
    --color-link:                var(--color-gold-deep);
    --color-link-hover:          hsl(40, 75%, 35%);
    --color-card-inactive-bg:    hsl(252, 15%, 88%);
    --color-card-inactive-fg:    hsl(0, 0%, 20%);
    --color-form-box-bg:         var(--color-white);
    --color-form-box-border:     hsla(45, 85%, 60%, 0.55);
    --color-form-box-shadow:     0 4px 16px rgba(31, 13, 77, 0.12);
    --color-controls-bar-bg:     hsl(0, 0%, 100%);
    --color-controls-bar-border: hsla(252, 30%, 40%, 0.18);

    /* Light-theme-only button tokens (no dark-theme counterpart —
       Bulma's default rendering is fine on the deep-purple page). */
    --color-button-light-bg:     hsl(252, 25%, 88%);
    --color-button-light-fg:     hsl(0, 0%, 15%);
    --color-button-light-border: hsla(252, 30%, 40%, 0.35);
  }

  /* --- Bulma overrides (light theme only) --------------------------------
     Bulma 1.x ships its own @media (prefers-color-scheme: light) block that
     flips its CSS custom properties for light mode. The rules below
     re-anchor the elements whose Bulma-resolved color does not match our
     chosen role token, defeating that flip while keeping Bulma's geometry
     and typography intact. Only the minimum set is overridden; each entry
     maps to a row in contracts/theme-tokens-contract.md §4. */

  /* Reset / Sound buttons sit on .match-controls (white). On the
     light-tinted-purple page they need a darker fill to retain ≥3:1. */
  .match-controls .button.is-light,
  #reset-btn.button.is-light,
  #mute-btn.button.is-light {
    background-color: var(--color-button-light-bg);
    color: var(--color-button-light-fg);
    border-color: var(--color-button-light-border);
  }

  /* Form-box internals: Bulma's light-mode .label/.input/.help foregrounds
     are dark-on-white, which is what we want inside the white .box. We
     therefore do NOT override them here — Bulma's defaults are correct. */
}

/* --- Layout helpers (replaces inline style="..." usage) ---------------- */
.mt-md { margin-top: 1.5rem; }
.mt-sm { margin-top: 1rem; }

/* Ensure [hidden] always wins over author display rules. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
}

body {
  background: var(--color-page-bg);
  color: var(--color-page-fg);
  min-height: 100vh;
  margin: 0;
}

/* --- Configuration screen --------------------------------------------- */
#config-screen .container {
  max-width: 480px;
}

/* Bulma's default heading colours assume a light page; on the deep-purple
   background they fail WCAG. Force role-token colors so each theme picks
   the appropriate value (white-on-purple in dark, dark-on-light in light). */
#config-screen .title,
#config-screen .subtitle {
  color: var(--color-page-fg);
}
#config-screen .subtitle {
  color: var(--color-page-fg-muted);
}

/* Help / shortcut text outside the form box. */
#config-screen .content,
#config-screen .content p,
#config-screen .content .has-text-grey,
#config-screen .has-text-grey {
  color: var(--color-page-fg-muted) !important;
}

/* Accent: keyboard hints in dorado. */
#config-screen kbd {
  background: var(--color-gold);
  color: var(--color-black);
  border-color: var(--color-gold-deep);
  border-radius: 4px;
  padding: 0.05em 0.4em;
  font-weight: 700;
  box-shadow: 0 1px 0 var(--color-gold-deep);
}

/* Links inside the config screen — dorado in dark theme, gold-deep in light. */
#config-screen a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
#config-screen a:hover,
#config-screen a:focus {
  color: var(--color-link-hover);
}

/* The form .box keeps Bulma's per-theme surface — Bulma already paints a
   white background in light mode and a dark background in dark mode, and
   its labels/inputs follow suit. We only re-skin the gold edge and shadow
   so the box reads as the primary action surface against either page. */
#config-form.box {
  border: 1px solid var(--color-form-box-border);
  box-shadow: var(--color-form-box-shadow);
}

#config-form .button.is-large {
  min-width: 12rem;
  min-height: 44px;
}

/* --- Match screen ----------------------------------------------------- */
#match-screen {
  /* Override Bulma's section padding so the cards can fill the viewport. */
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.match-container {
  display: flex;
  flex: 1 1 auto;
  gap: 0.5rem;
  padding: 0.5rem;
  /* Side-by-side on landscape / desktop. */
  flex-direction: row;
}

.player-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 12px;
  padding: 1rem;
  min-height: 44px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  transition:
    background-color 150ms ease-out,
    color 150ms ease-out,
    transform 150ms ease-out,
    filter 150ms ease-out,
    opacity 150ms ease-out;
  background: var(--color-card-inactive-bg);
  color: var(--color-card-inactive-fg);
}

.player-card .player-name {
  font-size: clamp(1.25rem, 4vw, 2rem);
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  word-break: break-word;
}

.player-card .turn-clock {
  font-size: clamp(3rem, 14vw, 8rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}

.player-card .reserve-label {
  margin: 0.75rem 0 0 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.75;
}

.player-card .reserve-clock {
  font-size: clamp(1.25rem, 4vw, 2rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

/* --- State: inactive (default styling already above) ------------------ */
.player-card.is-inactive {
  opacity: 0.7;
  transform: scale(0.97);
}

/* --- State: active-normal --------------------------------------------- */
.player-card.is-active-normal {
  background: var(--color-active-normal-bg);
  color: var(--color-active-normal-fg);
  transform: scale(1);
  box-shadow: 0 8px 24px rgba(121, 87, 213, 0.35);
}

/* --- State: active-in-reserve ----------------------------------------- */
.player-card.is-active-in-reserve {
  background: var(--color-active-warning-bg);
  color: var(--color-active-warning-fg);
  transform: scale(1);
  box-shadow: 0 8px 24px rgba(255, 170, 0, 0.4);
  /* Override Animate.css default duration to make the pulse faster. */
  animation-duration: 0.6s !important;
}

/* --- State: active-exhausted ------------------------------------------ */
.player-card.is-active-exhausted {
  background: var(--color-active-danger-bg);
  color: var(--color-active-danger-fg);
  transform: scale(1);
  box-shadow: 0 8px 24px rgba(241, 70, 104, 0.45);
  animation-duration: 0.8s !important;
}

/* --- State: paused (applied to body / match-screen) ------------------- */
.is-paused .player-card {
  filter: grayscale(80%);
}
.is-paused .player-card.is-active-normal,
.is-paused .player-card.is-active-in-reserve,
.is-paused .player-card.is-active-exhausted {
  /* Darken digits to keep WCAG AA 4.5:1 contrast against desaturated background. */
  color: #1a1a1a;
}

.paused-banner {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
}

.paused-banner[hidden] {
  display: none;
}

.paused-banner .paused-text {
  background: var(--color-paused-banner-bg);
  color: var(--color-paused-banner-fg);
  padding: 0.75rem 2rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: clamp(1rem, 4vw, 1.5rem);
  letter-spacing: 0.1em;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* --- Match controls --------------------------------------------------- */
.match-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.75rem 0.5rem calc(0.75rem + env(safe-area-inset-bottom));
  background: var(--color-controls-bar-bg);
  border-top: 1px solid var(--color-controls-bar-border);
  position: sticky;
  bottom: 0;
  z-index: 5;
}

.match-controls .button {
  min-height: 44px;
  min-width: 44px;
  font-weight: 600;
}

/* --- Match-clock mode (feature 004) ---------------------------------- */
/* When the per-match mode is active the reserve label/clock are [hidden],
   so the single big match clock is the only thing on the card. The card
   already centers its content via flexbox; we just trim the gap that the
   absent reserve block leaves behind. */
.player-card.is-match-clock .reserve-label,
.player-card.is-match-clock .reserve-clock {
  display: none !important;
}

.match-over-banner {
  position: sticky;
  bottom: 4.5rem; /* sit above the .match-controls bar */
  margin: 0 0.5rem;
  z-index: 6;
  font-size: clamp(1rem, 4vw, 1.5rem);
}
.match-over-banner[hidden] { display: none; }

/* --- Responsive ------------------------------------------------------- */
@media (max-width: 600px) {
  .match-container {
    flex-direction: column;
  }
}

@media (orientation: landscape) and (max-width: 900px) {
  /* Side-by-side on small landscape phones to maximise per-card area. */
  .match-container {
    flex-direction: row;
  }
}

/* --- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* Disable Animate.css continuous animations on the active card; keep color
     and size differentiation so visual states remain distinguishable. */
  .player-card.animate__animated,
  .player-card.is-active-normal,
  .player-card.is-active-in-reserve,
  .player-card.is-active-exhausted {
    animation: none !important;
  }
  .player-card {
    transition-duration: 0ms;
  }
}