/* Thai Hunter — BJJ scoreboard.
   Tokens mirror website/assets/css/tokens.css. Everything is sized in
   viewport units so the board fills any 16:9 screen, read from across a gym. */

:root {
  --logo-black:     #000000;
  --logo-white:     #FFFFFF;
  --logo-gold:      #F9AB0C;
  --logo-gold-deep: #835E1D;

  --bg:        var(--logo-black);
  --bg-warm:   #110D08;
  --bg-warm-2: #1A1410;
  --ink:       #F2EBDD;
  --ink-soft:  #C9BDA1;
  --ink-mute:  #7A6E54;
  --rule:        rgba(249, 171, 12, 0.18);
  --rule-strong: rgba(249, 171, 12, 0.40);

  /* Competitor colors */
  --red:        #D62839;
  --red-deep:   #7A0E19;
  --green:      #1E9E52;
  --green-deep: #0B5028;

  --warn: #FF4B2B;

  --font-display: 'Bebas Neue', Impact, 'Helvetica Neue Condensed', sans-serif;
  --font-section: 'Oswald', 'Helvetica Neue Condensed', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Board geometry */
  --pad:  2vw;
  --gap:  1.4vw;
  --ring: min(29vw, 60vh);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html, body { height: 100%; background: var(--bg); }

body {
  color: var(--ink);
  font-family: var(--font-body);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Paper grain, same as the site */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background-image:
    radial-gradient(rgba(0, 0, 0, 0.50) 1px, transparent 1px),
    radial-gradient(rgba(255, 240, 200, 0.04) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: overlay;
  opacity: 0.45;
}

/* ------------------------------------------------------------------ */
/* Board frame                                                         */
/* ------------------------------------------------------------------ */

.board {
  height: 100vh;
  display: grid;
  grid-template-rows: 12vh 1fr 6vh;
  padding: 0 var(--pad);
}

.eyebrow {
  font-weight: 600;
  font-size: 1.5vh;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--logo-gold);
}

.stat-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.8vh;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Header */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--rule);
}

.brand { display: flex; align-items: center; gap: 1.4vw; }
.brand__logo { height: 8.5vh; width: auto; display: block; }
.brand__event {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 5.2vh;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-top: 0.4vh;
}


/* Footer ornament rule */
.footbar {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.footbar__rule { flex: 1; height: 1px; background: var(--rule); }
.footbar__diamond {
  width: 7px; height: 7px;
  background: var(--logo-gold);
  transform: rotate(45deg);
}
.footbar__site {
  font-weight: 600;
  font-size: 1.5vh;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ------------------------------------------------------------------ */
/* Arena: fighter | clock | fighter                                    */
/* ------------------------------------------------------------------ */

.arena {
  display: grid;
  grid-template-columns: 1fr minmax(0, 1.02fr) 1fr;
  gap: var(--gap);
  padding-block: 2.2vh;
  min-height: 0;
}

/* Fighter panel */
.fighter {
  --c: var(--red);
  --c-deep: var(--red-deep);
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--c) 14%, transparent), transparent 55%),
    var(--bg-warm);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  overflow: hidden;
}
.fighter--green { --c: var(--green); --c-deep: var(--green-deep); }

/* Thick color edge on the outer side of each panel */
.fighter::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 0.9vw;
  background: var(--c);
}
.fighter--red::after   { left: 0; }
.fighter--green::after { right: 0; }

.fighter__id {
  background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 78%, black));
  padding: 1.8vh 2vw 1.6vh;
  min-width: 0;
}
.fighter--red .fighter__id   { padding-left: 2.4vw; }
.fighter--green .fighter__id { padding-right: 2.4vw; text-align: right; }

.fighter__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 8.4vh;          /* JS shrinks this if a long name overflows */
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--logo-white);
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}

.fighter__points {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.points {
  font-family: var(--font-display);
  font-size: 36vh;
  line-height: 0.8;
  color: var(--logo-white);
  font-variant-numeric: tabular-nums;
}

.fighter__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1vw;
  padding: 0 2vw 2vh 2.4vw;
}
.fighter--green .fighter__stats { padding: 0 2.4vw 2vh 2vw; }

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.3vh 0.6vw 0.6vh;
  border: 2px solid var(--ink-mute);
  background: rgba(0, 0, 0, 0.35);
}
.stat__num {
  font-family: var(--font-display);
  font-size: 12.5vh;
  line-height: 0.9;
  margin-top: 0.6vh;
  font-variant-numeric: tabular-nums;
}
.stat--adv { border-color: var(--logo-gold); }
.stat--adv .stat-label { color: var(--logo-gold); }
.stat--adv .stat__num  { color: var(--logo-gold); }
.stat--pen { border-color: var(--warn); }
.stat--pen .stat-label { color: var(--warn); }
.stat--pen .stat__num  { color: var(--warn); }

/* Score bump when a value changes */
.bump { animation: bump 380ms var(--ease-out); }
@keyframes bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* ------------------------------------------------------------------ */
/* Clock                                                               */
/* ------------------------------------------------------------------ */

.clock {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding-block: 0.4vh 0.6vh;
}

/* Faint eagle watermark behind the clock */
.clock::before {
  content: "";
  position: absolute;
  inset: 8% -6%;
  background: url("../assets/eagle.svg") center / contain no-repeat;
  opacity: 0.045;
  pointer-events: none;
}

.division {
  font-family: var(--font-section);
  font-weight: 600;
  font-size: 3vh;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  white-space: nowrap;
}

.timer {
  --p: 1;                       /* remaining fraction, set by JS */
  position: relative;
  width: var(--ring);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.digits {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: calc(var(--ring) * 0.5);
  line-height: 1;
  color: var(--logo-white);
  text-shadow: 0 0.02em 0.05em rgba(0, 0, 0, 0.5);
  transform: translateY(-6%);
  transition: color 300ms var(--ease-out);
}
/* Fixed-width digit cells so the time never jitters */
.digits .d { display: inline-block; width: 0.44em; text-align: center; }
.digits .colon { display: inline-block; width: 0.22em; text-align: center; transform: translateY(-0.04em); }

.status {
  font-weight: 700;
  font-size: 2.2vh;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 0.9vh 1.6vw;
  border: 1px solid var(--rule-strong);
}

/* Progress bar under the time, one segment per minute */
.bar {
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: 18%;
  height: 3.2vh;
  background: rgba(249, 171, 12, 0.10);
  border: 1px solid var(--rule-strong);
}
.bar__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--logo-gold-deep), var(--logo-gold));
  transform-origin: left center;
  transform: scaleX(var(--p));
}
/* One tick per minute (set via --minutes by JS) */
.bar__marks {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(100% / var(--minutes, 5) - 2px),
    rgba(0, 0, 0, 0.75) calc(100% / var(--minutes, 5) - 2px),
    rgba(0, 0, 0, 0.75) calc(100% / var(--minutes, 5))
  );
}

/* ------------------------------------------------------------------ */
/* Timer states (classes on <body>, set from the match phase)           */
/* ------------------------------------------------------------------ */

/* Colon ticks once a second while the clock runs; steady otherwise */
.colon.is-off { opacity: 0.12; }

body.is-running .status { color: var(--ink); }

/* Paused: the clock fades back and the status becomes a solid gold pill */
.timer { transition: opacity 300ms var(--ease-out), filter 300ms var(--ease-out); }
body.is-paused .timer { opacity: 0.55; filter: saturate(0.4); }
/* Scaled rather than resized so the timer above doesn't shift */
body.is-paused .status {
  transform: scale(1.6);
  transform-origin: center bottom;
  color: var(--logo-black);
  background: var(--logo-gold);
  border-color: var(--logo-gold);
}
body.is-paused .status::before {
  content: "";
  display: inline-block;
  width: 0.8em; height: 0.85em;
  margin-right: 0.7em;
  vertical-align: -0.08em;
  border-left: 0.26em solid currentColor;
  border-right: 0.26em solid currentColor;
}

/* Final 30 seconds */
body.is-final .digits { color: var(--logo-gold); }
body.is-final .bar__fill { background: linear-gradient(90deg, #8a1d0e, var(--warn)); }
body.is-final.is-running .digits { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.72; } }

/* Time up */
body.is-over .digits { color: var(--warn); animation: flash 0.6s steps(1) 6; }
body.is-over .status { color: var(--logo-black); background: var(--warn); border-color: var(--warn); }
@keyframes flash { 50% { opacity: 0.15; } }

/* ------------------------------------------------------------------ */
/* Result: the referee's call replaces the clock                        */
/* ------------------------------------------------------------------ */

.result, .stamp { display: none; }

body.has-result .timer,
body.has-result .status { display: none; }

body.has-result .result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  min-width: 0;
  text-align: center;
  animation: result-in 600ms var(--ease-out) both;
}
@keyframes result-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

.result__eyebrow,
.result__by {
  font-weight: 700;
  font-size: 2.4vh;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--logo-gold);
  padding-left: 0.4em;           /* balance the trailing letter-spacing */
}
.result__by { color: var(--ink-soft); margin-top: 4vh; }
.result__eyebrow { font-size: 4.4vh; letter-spacing: 0.32em; padding-left: 0.32em; }

.result__winner {
  --c: var(--red);
  width: 100%;
  margin-top: 1.6vh;
  padding: 1.6vh 1.6vw 1.2vh;
  background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 72%, black));
  box-shadow: 0 0 5vh color-mix(in srgb, var(--c) 45%, transparent);
  min-width: 0;
}
body[data-winner="green"] .result__winner { --c: var(--green); }

.result__name {
  font-family: var(--font-display);
  font-size: 10vh;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--logo-white);
  white-space: nowrap;
}

.result__methodbox { width: 100%; min-width: 0; padding: 0 0.5vw; }
.result__method {
  font-family: var(--font-display);
  font-size: 15vh;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-top: 0.6vh;
}
.result__detail {
  font-family: var(--font-display);
  font-size: 6vh;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 1.2vh;
}
.result__detail:empty { display: none; }

/* Per method */
body[data-result="submission"] .result__method {
  color: var(--logo-gold);
  text-shadow: 0 0 4vh rgba(249, 171, 12, 0.55);
}
body[data-result="points"] .result__method   { color: var(--logo-white); }
body[data-result="points"] .result__detail   { color: var(--logo-gold); font-size: 8vh; }
body[data-result="decision"] .result__method { color: var(--ink); }
body[data-result="dq"] .result__method       { color: var(--warn); }
body[data-result="dq"] .result__by           { color: var(--warn); }

/* Winner and loser panels */
body.has-result .fighter > * { transition: opacity 500ms var(--ease-out), filter 500ms var(--ease-out); }
/* Dim the loser's contents (not the panel, so the DQ stamp stays vivid) */
.fighter.is-loser > :not(.stamp) { opacity: 0.38; filter: saturate(0.25); }
.fighter.is-loser::after { opacity: 0.3; }
.fighter.is-loser { border-color: var(--rule); }

/* DQ stamp across the loser's panel */
body[data-result="dq"] .fighter.is-loser .stamp {
  display: block;
  position: absolute;
  top: 46%;
  left: 50%;
  z-index: 4;
  transform: translate(-50%, -50%) rotate(-12deg);
  font-family: var(--font-display);
  font-size: 7.5vh;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--warn);
  padding: 0.8vh 1.4vw 0.4vh;
  border: 0.6vh solid var(--warn);
  background: rgba(0, 0, 0, 0.7);
}

/* ------------------------------------------------------------------ */
/* Hit areas: only live in the control board's mirror (?mode=control)  */
/* ------------------------------------------------------------------ */

button.stat { font: inherit; color: inherit; cursor: default; }
.hit { display: none; }

.fighter > .fighter__id     { grid-row: 1; grid-column: 1; }
.fighter > .fighter__points { grid-row: 2; grid-column: 1; }
.fighter > .fighter__stats  { grid-row: 3; grid-column: 1; }

body.is-control .hit {
  display: block;
  grid-row: 1 / 3;          /* name block down to the stat boxes */
  grid-column: 1;
  z-index: 3;
  border: 0;
  background: transparent;
  cursor: pointer;
}
body.is-control .stat { cursor: pointer; position: relative; }
body.is-control .hit:hover,
body.is-control .stat:hover {
  outline: 0.5vh solid rgba(255, 255, 255, 0.85);
  outline-offset: -0.5vh;
  background: rgba(255, 255, 255, 0.06);
}
body.is-control .hit:active,
body.is-control .stat:active { background: rgba(255, 255, 255, 0.16); }

.fighter__name.is-placeholder { opacity: 0.45; }

body.is-display.hide-cursor, body.is-display.hide-cursor * { cursor: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}