/*
 * theme.css — Iron Ring Combat Arena: dark, high-contrast, arena-lighting
 * palette built for boxing / karate / arm-wrestling tournaments. Deep
 * charcoal canvas, hot crimson-orange corner-light accent, condensed
 * display type for scoreboard energy.
 */

:root {
  color-scheme: dark;
  --canvas: #0d0d0f;
  --surface: #17171a;
  --surface-2: #1f1f23;
  --border: #2c2c31;
  --border-strong: #46464d;
  --ink: #f5f4f2;
  --muted: #a3a1a0;
  --accent: #e8391f;
  --accent-hover: #ff4c2c;
  --accent-ink: #000000;
  --accent-text: #ff5a34;
  --accent-strong: #ff8a5e;
  --accent-soft: #2a1712;
  --accent-border: #5c2a1c;
  --success: #3fae5c;
  --success-ink: #06210c;
  --success-soft: #143420;
  --success-strong: #6ee68e;
  --warning: #e0a527;
  --warning-ink: #241a02;
  --warning-soft: #362a0c;
  --warning-strong: #f2c34c;
  --danger: #e8391f;
  --danger-ink: #ffffff;
  --danger-soft: #2a1712;
  --danger-strong: #ff8a5e;
  --chart-1: #e8391f;
  --chart-2: #f2c34c;
  --chart-3: #3fae5c;
  --chart-4: #4f8de0;
  --chart-5: #b06ee6;
  --chart-6: #ff8a5e;

  --font-display: "Anton", "Oswald", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Barlow", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Barlow", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 800;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.18em;
  --radius-card: 4px;
  --radius-btn: 3px;
  --radius-input: 3px;
  --shadow-card: 0 20px 50px -20px rgb(0 0 0 / 0.6);
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #f4f2ef;
  --surface: #ffffff;
  --surface-2: #ece8e2;
  --border: #d9d4cb;
  --border-strong: #b3aca0;
  --ink: #191512;
  --muted: #5c554d;
  --accent: #c72f18;
  --accent-hover: #a92411;
  --accent-ink: #ffffff;
  --accent-text: #b52a15;
  --accent-strong: #8f2010;
  --accent-soft: #f6ded8;
  --accent-border: #e2b3a6;
  --success: #1f7a3d;
  --success-ink: #ffffff;
  --success-soft: #dcf0e2;
  --success-strong: #16602e;
  --warning: #966016;
  --warning-ink: #ffffff;
  --warning-soft: #f3e6ce;
  --warning-strong: #744a0f;
  --danger: #c72f18;
  --danger-ink: #ffffff;
  --danger-soft: #f6ded8;
  --danger-strong: #8f2010;
  --chart-1: #c72f18;
  --chart-2: #966016;
  --chart-3: #1f7a3d;
  --chart-4: #23629e;
  --chart-5: #7a3ea3;
  --chart-6: #a9491f;
}

/*
 * app.css — Ironclad Combat League's own visuals: the scroll-driven 3D
 * boxer clash in the hero, and small combat-card touches. Tokens only.
 */

#boxer-stage {
  will-change: transform;
}

.boxer-fig {
  position: absolute;
  top: 50%;
  transform-style: preserve-3d;
  transition: transform 0.05s linear;
}

.boxer-fig-left {
  left: 50%;
  transform: translate(-118%, -50%) translateZ(0) rotateY(0deg);
}

.boxer-fig-right {
  left: 50%;
  transform: translate(18%, -50%) translateZ(0) rotateY(0deg);
}

/* Scroll-progress driven pose classes, toggled by app.js */
.boxer-fig-left.boxer-strike {
  transform: translate(-70%, -50%) translateZ(60px) rotateY(-8deg);
}

.boxer-fig-right.boxer-strike {
  transform: translate(-30%, -50%) translateZ(60px) rotateY(8deg);
}

.boxer-arm-left,
.boxer-arm-right,
.boxer-fist-left,
.boxer-fist-right {
  transition: transform 0.12s ease-out;
  transform-origin: 60px 80px;
}

.boxer-fig-left.boxer-strike .boxer-arm-left,
.boxer-fig-left.boxer-strike .boxer-fist-left {
  transform: translateX(46px) rotate(-8deg);
}

.boxer-fig-right.boxer-strike .boxer-arm-right,
.boxer-fig-right.boxer-strike .boxer-fist-right {
  transform: translateX(46px) rotate(8deg);
}

.boxer-impact {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  color: var(--accent-text);
  transition: transform 0.18s ease-out, opacity 0.18s ease-out;
}

.boxer-impact svg {
  width: 72px;
  height: 72px;
}

.boxer-impact.boxer-impact-show {
  transform: translate(-50%, -50%) scale(1.15);
  opacity: 1;
}

/* Entrance for cards/counters: rest visible, animate from a slight offset */
.boxer-card {
  transform: translateY(28px);
  opacity: 0.001;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.6s ease-out;
}

.boxer-card.boxer-in {
  transform: translateY(0);
  opacity: 1;
}

.boxer-count {
  transform: translateY(16px);
  opacity: 0.001;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.boxer-count.boxer-in {
  transform: translateY(0);
  opacity: 1;
}

html.reduced-motion .boxer-fig,
html.reduced-motion .boxer-arm-left,
html.reduced-motion .boxer-arm-right,
html.reduced-motion .boxer-fist-left,
html.reduced-motion .boxer-fist-right,
html.reduced-motion .boxer-impact,
html.reduced-motion .boxer-card,
html.reduced-motion .boxer-count {
  transition: none !important;
}

html.reduced-motion .boxer-card,
html.reduced-motion .boxer-count {
  transform: none;
  opacity: 1;
}

/* Bracket-style tournament results view */
.bracket-board {
  border-bottom: 1px solid var(--border);
  padding-bottom: 2.5rem;
}

.bracket-col {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
}

.bracket-col-matches {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 1.5rem;
  flex: 1;
}

.bracket-match {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.bracket-fighter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: calc(var(--radius-btn, 3px) + 1px);
  background: var(--surface-2);
  font-size: 0.875rem;
  font-weight: 600;
}

.bracket-fighter-win {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.bracket-vs {
  align-self: center;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}