/* Dungeon Bowl — league standings
   Design canvas: 4500 x 5400. All positions are design-px converted to %
   via calc(var(--x) / 45 * 1%) etc. Font sizes use cqw (1cqw = 45 design px). */

@font-face {
  font-family: "Cristone";
  src: url("../assets/fonts/Cristone.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Eurostile";
  src: url("../assets/fonts/eurostile.ttf") format("truetype");
  font-display: swap;
}

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

body {
  background: #000;
  min-height: 100vh;
}

.board {
  position: relative;
  width: min(100vw, 1500px);
  margin: 0 auto;
  aspect-ratio: 4500 / 5400;
  container-type: inline-size;
  background: #0d0202;
  overflow: hidden;
}

.board .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Logo: cropped PNG is 3454 x 484 design px at scale .6875 -> 2374.6 wide,
   blue letters land at mockup x1070 y160 */
.logo {
  position: absolute;
  left: calc(1063 / 45 * 1%);
  top: calc(152 / 54 * 1%);
  width: calc(2374.6 / 45 * 1%);
}

.titles {
  position: absolute;
  inset: 0;
  text-align: center;
  pointer-events: none;
}

.championship {
  position: absolute;
  top: calc(602 / 54 * 1%);
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-family: "Cristone", serif;
  font-weight: 400;
  font-size: 1.55cqw;
  letter-spacing: 0.02em;
  color: #fff;
}

.season {
  position: absolute;
  top: calc(685 / 54 * 1%);
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-family: "Eurostile", sans-serif;
  font-size: 0.85cqw;
  letter-spacing: 0.005em;
  color: #fff;
}
.season .lead { font-size: 1.15cqw; }

/* LED ticker: sits between the title block and the stat cards,
   aligned with the card grid (design x1100-3402, y ~1560) */
.ticker {
  position: absolute;
  left: calc(1100 / 45 * 1%);
  top: calc(1560 / 54 * 1%);
  width: calc(2302 / 45 * 1%);
  height: calc(130 / 54 * 1%);
  background: linear-gradient(#1c1c1e, #060607 18%, #060607 82%, #1a1a1c);
  border: 1px solid #2e2c2c;
  border-radius: 0.45cqw;
  box-shadow: 0 0.18cqw 0.9cqw rgba(0, 0, 0, 0.75),
              inset 0 0 0.55cqw #000;
  padding: 0.22cqw 0.5cqw;
}

.ticker canvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0.25cqw;
}

/* Cards: 923 x 719 design px */
.card {
  position: absolute;
  left: calc(var(--x) / 45 * 1%);
  top: calc(var(--y) / 54 * 1%);
  width: calc(923 / 45 * 1%);
  height: calc(719 / 54 * 1%);
}

.card .static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Live standings numbers, centered on the same column/row grid as the
   baked-in headers (cols x238/471/711, rows y333.5/417.5 of 923x719) */
.card .val {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: "Eurostile", sans-serif;
  font-size: 0.79cqw;
  color: #fff;
  line-height: 1;
}
.val[data-col="w"] { left: 25.79%; }
.val[data-col="d"] { left: 51.03%; }
.val[data-col="l"] { left: 77.03%; }
.val[data-row="pre"]     { top: 46.38%; }
.val[data-row="regular"] { top: 58.07%; }