/* Bundled under its own family name so a locally installed "Steelfish Outline" never matches. */
@font-face {
  font-family: "Virtus Display";
  src: url("/fonts/steelfish-regular.otf") format("opentype");
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: "Virtus Display";
  src: url("/fonts/steelfish-bold.otf") format("opentype");
  font-weight: 600 800;
  font-display: swap;
}

/* Virtus Badolato design tokens (packages/design-tokens/src/tokens.css) */
:root {
  --vb-navy-950: #001126;
  --vb-navy-900: #001a3d;
  --vb-navy-700: #013574;
  --vb-maroon-800: #4d0202;
  --vb-maroon-600: #720303;
  --vb-silver: #bfbfbf;
  --vb-white: #ffffff;
  --vb-gray-500: #98999e;
  --font-display: "Virtus Display", "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --tile-idle: rgb(255 255 255 / 5%);
  --tile-idle-border: rgb(255 255 255 / 10%);
  --tile-idle-text: rgb(255 255 255 / 38%);
  --sponsor-height: 15vh;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--vb-navy-950);
  color: var(--vb-white);
  font-family: var(--font-body);
}

button { font: inherit; cursor: pointer; }

.stage {
  display: grid;
  grid-template-rows: auto 1fr var(--sponsor-height);
  height: 100vh;
  background:
    radial-gradient(ellipse 60% 70% at 18% 45%, rgb(114 3 3 / 28%), transparent 70%),
    radial-gradient(ellipse 80% 80% at 80% 30%, rgb(1 53 116 / 55%), transparent 70%),
    var(--vb-navy-950);
}

/* Top bar */
.topbar {
  display: flex;
  align-items: center;
  gap: 3vw;
  padding: 2.2vh 3vw 1.6vh;
}

.brand { display: flex; align-items: center; gap: 1.2vw; }
.brand__crest { height: 7.5vh; width: auto; }
.brand__eyebrow {
  margin: 0;
  color: var(--vb-silver);
  font-size: 1.5vh;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.brand__title {
  margin: 0.2vh 0 0;
  font-family: var(--font-display);
  font-size: 5vh;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.stats { display: flex; gap: 2.4vw; margin-left: auto; }
.stat { display: flex; flex-direction: column; align-items: flex-end; }
.stat__label {
  color: var(--vb-silver);
  font-size: 1.4vh;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.stat__value {
  font-family: var(--font-display);
  font-size: 5vh;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__value small { color: var(--vb-gray-500); font-size: 0.55em; }

/* Controls fade out while idle so the beamer image stays clean */
.controls { display: flex; gap: 0.6vw; transition: opacity 300ms ease; }
body.is-idle .controls { opacity: 0; pointer-events: none; }
body.is-idle { cursor: none; }
.controls button {
  padding: 1vh 1.1vw;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 4px;
  background: rgb(255 255 255 / 6%);
  color: var(--vb-white);
  font-size: 1.5vh;
  font-weight: 600;
}
.controls button:hover { background: rgb(255 255 255 / 16%); }
.controls button:disabled { opacity: 0.35; cursor: default; }

/* Board */
.board {
  display: grid;
  grid-template-columns: minmax(0, 26fr) minmax(0, 74fr);
  gap: 2.4vw;
  min-height: 0;
  padding: 1vh 3vw 2.6vh;
}

.spotlight {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vh;
  min-height: 0;
}
.spotlight__label {
  margin: 0;
  color: var(--vb-silver);
  font-size: 1.6vh;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.ball {
  display: grid;
  place-items: center;
  width: min(36vh, 22vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #a51313 0%, var(--vb-maroon-600) 42%, var(--vb-maroon-800) 100%);
  box-shadow:
    inset 0 0 0 1.2vh rgb(255 255 255 / 92%),
    inset 0 0 0 1.6vh var(--vb-maroon-800),
    0 3vh 8vh rgb(0 0 0 / 45%);
}
.ball.is-empty { background: rgb(255 255 255 / 6%); box-shadow: inset 0 0 0 0.5vh rgb(255 255 255 / 14%); }
.ball__number {
  font-family: var(--font-display);
  font-size: min(19vh, 12vw);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ball.is-empty .ball__number { color: rgb(255 255 255 / 30%); }
.ball.is-reveal { animation: reveal 650ms cubic-bezier(0.2, 0.9, 0.25, 1.15); }

@keyframes reveal {
  0% { transform: scale(0.4) rotate(-25deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.history { display: flex; flex-direction: column; align-items: center; gap: 1.2vh; }
.history__list {
  display: flex;
  gap: 0.6vw;
  min-height: min(6.4vh, 3.4vw);
  margin: 0;
  padding: 0;
  list-style: none;
}
.history__list li {
  display: grid;
  place-items: center;
  width: min(6.4vh, 3.4vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--vb-white);
  color: var(--vb-navy-700);
  font-family: var(--font-display);
  font-size: min(3.2vh, 1.7vw);
  font-weight: 700;
}
.history__list li:nth-child(n + 4) { opacity: 0.55; }

/* Keyboard entry overlay sits on top of the ball area */
.entry {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4vh;
  border-radius: 6px;
  background: rgb(0 17 38 / 92%);
}
.entry[hidden] { display: none; }
.entry__label { color: var(--vb-silver); font-size: 1.6vh; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; }
.entry__value { font-family: var(--font-display); font-size: 16vh; font-weight: 700; line-height: 1; }
.entry__hint { color: var(--vb-gray-500); font-size: 1.6vh; }
.entry.is-error { animation: shake 360ms ease; }
.entry.is-error .entry__value { color: #ff6b6b; }

@keyframes shake {
  25% { transform: translateX(-1.2vw); }
  50% { transform: translateX(1.2vw); }
  75% { transform: translateX(-0.6vw); }
}

/* 1–90 grid: 10 columns x 9 rows */
.grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(9, minmax(0, 1fr));
  gap: 0.7vh;
  min-height: 0;
}
.tile {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--tile-idle-border);
  border-radius: 6px;
  background: var(--tile-idle);
  color: var(--tile-idle-text);
  font-family: var(--font-display);
  font-size: 4.8vh;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: background-color 250ms ease, color 250ms ease, transform 250ms ease;
}
.tile:hover { border-color: rgb(255 255 255 / 35%); }
.tile.is-drawn {
  border-color: var(--vb-white);
  background: var(--vb-white);
  color: var(--vb-navy-700);
  font-weight: 700;
}
.tile.is-last {
  border-color: #ff8f8f;
  background: var(--vb-maroon-600);
  color: var(--vb-white);
  box-shadow: 0 0 2.4vh rgb(165 19 19 / 70%);
}
.tile.is-pop { animation: pop 500ms ease; }
.tile.is-flash { animation: flash 900ms ease; }

@keyframes pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@keyframes flash {
  0%, 100% { outline: 0 solid transparent; }
  30%, 70% { outline: 0.5vh solid #ffd34d; }
}

/* Sponsor band: white, logos are made for light backgrounds */
.sponsors {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  align-items: center;
  gap: 2.4vw;
  padding: 1.6vh 3vw;
  background: var(--vb-white);
  color: var(--vb-navy-700);
}
.sponsors__group { display: flex; flex-direction: column; gap: 1vh; height: 100%; min-width: 0; }
.sponsors__group--partner { padding-left: 2.4vw; border-left: 2px solid #dfe1e6; }
.sponsors__label {
  margin: 0;
  font-size: 1.3vh;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.sponsors__logos {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 1.6vw;
  min-height: 0;
}
.sponsors__logos img {
  min-width: 0;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}
.sponsors__group--main img { flex: 1 1 0; max-height: 8.5vh; }
.sponsors__group--partner img { flex: 1 1 0; max-height: 6.5vh; }

/* Confirm dialog */
.confirm {
  width: min(520px, 90vw);
  padding: 32px;
  border: 0;
  border-radius: 6px;
  background: var(--vb-white);
  color: #2b2c2f;
  box-shadow: 0 8px 24px rgb(1 53 116 / 30%);
}
.confirm::backdrop { background: rgb(0 17 38 / 70%); }
.confirm h2 { margin: 0 0 8px; color: var(--vb-navy-700); font-family: var(--font-display); font-size: 32px; text-transform: uppercase; }
.confirm p { margin: 0 0 24px; }
.confirm__actions { display: flex; justify-content: flex-end; gap: 12px; }
.confirm__actions button {
  padding: 12px 18px;
  border: 1px solid #dfe1e6;
  border-radius: 4px;
  background: var(--vb-white);
  font-weight: 600;
}
.confirm__actions .is-primary { border-color: var(--vb-maroon-600); background: var(--vb-maroon-600); color: var(--vb-white); }

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