/* Only Snakes on the big screen: the live board. Built on the shared shell (16_main_shell.css).
   The design is a 1920x1080 canvas: header row, a square 960px board on the left, the round / top six /
   updates column on the right. Everything is sized in --u, one design pixel, which is 1px at 1080 stage
   height and shrinks with the board on shorter windows (the board is as tall as the window allows, and never
   so wide that the right column drops under 480px). Tokens, snakes and the winner overlay are painted by
   lib/javascript/only_snakes (board.js, pixi_board.js) into .os-* elements. */

.gtf-os-screen {
  --gtf-board-pad: clamp(20px, calc(var(--gtf-stage-w, 1920px) * 0.04), 56px);
  --os-track: #3A322A;
  --os-dark: #14110E;
  --os-red: oklch(0.72 0.19 20);
  --os-hot: oklch(0.72 0.19 40);
}

.gtf-os-screen .gtf-screen__body {
  inset: 0;
  zoom: 1;
}

.gtf-os {
  --os-board: min(
    calc(var(--gtf-stage-h, 1080px) - 120px * var(--gtf-m, 1)),
    calc(var(--gtf-stage-w, 1920px) - 2 * var(--gtf-board-pad) - 40px - 480px)
  );
  --u: calc(min(var(--os-board), 960px) / 960);
  --os-top: calc(100px * var(--gtf-m, 1));
  position: absolute;
  inset: 0;
}

/* ---------- Header ---------- */

.gtf-os-screen .gtf-screen__header {
  inset: calc(24px * var(--gtf-m, 1)) var(--gtf-board-pad) auto;
  height: calc(56px * var(--gtf-m, 1));
  padding: 0;
  background: none;
  zoom: 1;
}

.gtf-os-screen .gtf-screen__brand,
.gtf-os__next {
  zoom: var(--gtf-m, 1);
}

.gtf-os-screen .gtf-screen__brand {
  gap: 16px;
}

.gtf-os-screen .gtf-screen__title {
  font-size: 36px;
  letter-spacing: -0.02em;
}

.gtf-os__next {
  font-size: 28px;
  color: var(--gtf-silver);
  text-align: right;
}

.gtf-os__next-value {
  margin-left: 0.3em;
  font-family: var(--gtf-mono);
  color: var(--gtf-yellow);

  &[hidden] { display: none; }
}

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

.gtf-os__board {
  position: absolute;
  left: var(--gtf-board-pad);
  top: var(--os-top);
  width: var(--os-board);
  height: var(--os-board);
  border-radius: calc(12 * var(--u));
  background: var(--os-dark);
  overflow: hidden;
}

.os-board-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
}

.os-pixi-canvas {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.os-cell {
  padding: calc(6 * var(--u)) 0 0 calc(8 * var(--u));
  border: 1px solid var(--os-dark);
  background: #2B241D;
  font-family: var(--gtf-mono);
  font-size: calc(18 * var(--u));
  line-height: 1.2;
  color: #8F8374;

  &.is-dark { background: #241E18; }
}

.os-snake-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.os-snake-layer { z-index: 2; }

.os-snake-layer .snake.is-leaving {
  animation: os-snake-leave 2.4s ease-out forwards;
}

@keyframes os-snake-leave {
  0% { opacity: 1; transform: rotate(0deg); }
  10% { transform: rotate(3deg); }
  20% { transform: rotate(-5deg); }
  30% { transform: rotate(7deg); }
  40% { transform: rotate(-8deg); }
  55% { transform: rotate(9deg); }
  70% { transform: rotate(-10deg); }
  100% { opacity: 0; transform: rotate(8deg); }
}

/* ---------- Right column ---------- */

.gtf-os__side {
  position: absolute;
  left: calc(var(--gtf-board-pad) + var(--os-board) + 48 * var(--u));
  right: var(--gtf-board-pad);
  top: var(--os-top);
  height: var(--os-board);
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  overflow: hidden;
}

.gtf-os__label {
  font-size: calc(28 * var(--u));
  color: var(--gtf-silver);
}

.gtf-os__round {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(16 * var(--u));
}

.gtf-os__round-number {
  font-size: calc(96 * var(--u));
  line-height: 1;
  font-weight: 900;
  color: var(--gtf-yellow);
}

.gtf-os__clock {
  --progress: 1;
  flex: none;
  display: grid;
  place-items: center;
  width: calc(120 * var(--u));
  height: calc(120 * var(--u));
  border-radius: 50%;
  background: conic-gradient(var(--gtf-yellow) calc(var(--progress) * 360deg), var(--os-track) 0);

  &.is-low { background: conic-gradient(var(--os-hot) calc(var(--progress) * 360deg), var(--os-track) 0); }
}

.gtf-os__clock-face {
  display: grid;
  place-items: center;
  width: calc(100 * var(--u));
  height: calc(100 * var(--u));
  border-radius: 50%;
  background: var(--gtf-ink);
  font-size: calc(56 * var(--u));
  font-weight: 900;
  color: var(--gtf-cream);

  .gtf-os__clock.is-low & { color: var(--os-hot); }
}

.gtf-os__phase-block {
  min-width: 0;
  text-align: right;
}

.gtf-os__phase {
  font-size: calc(44 * var(--u));
  font-weight: 800;
}

.gtf-os__stats {
  font-family: var(--gtf-mono);
  font-size: calc(28 * var(--u));
  color: var(--gtf-silver);
}

.gtf-os__section {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  padding-top: calc(14 * var(--u));
  border-top: 2px solid var(--os-track);

  & > .gtf-os__label { padding-bottom: calc(4 * var(--u)); }
}

.gtf-os__updates {
  padding-top: calc(20 * var(--u));

  & > .gtf-os__label { padding-bottom: calc(8 * var(--u)); }
}

.gtf-os__leaders {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
}

.gtf-os__leader {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
  padding: calc(5 * var(--u)) calc(16 * var(--u));
  border-radius: calc(10 * var(--u));

  &.is-leader { background: oklch(0.82 0.15 95 / 0.16); }
  &.is-new-leader { animation: os-leader-row-surge 0.76s ease-out 2; }
}

@keyframes os-leader-row-surge {
  45% { transform: scale(1.03); }
}

.gtf-os__leader-rank {
  width: calc(44 * var(--u));
  flex: none;
  font-size: calc(30 * var(--u));
  font-weight: 800;

  .is-leader & { color: var(--gtf-yellow); }
}

.gtf-os__leader-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  border: calc(3 * var(--u)) solid var(--gtf-cream);
  border-radius: 50%;
  background: var(--player-color, var(--gtf-orange));
  box-sizing: border-box;
  overflow: hidden;
  font-size: calc(20 * var(--u));
  font-weight: 800;
  color: var(--gtf-cream);

  & img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .is-leader & { box-shadow: 0 0 calc(16 * var(--u)) calc(4 * var(--u)) oklch(0.82 0.15 95 / 0.6); }
}

.gtf-os__leader-name {
  flex: 1;
  min-width: 0;
  font-size: calc(32 * var(--u));
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gtf-os__leader-square {
  flex: none;
  font-family: var(--gtf-mono);
  font-size: calc(30 * var(--u));

  .is-leader & { color: var(--gtf-yellow); }
}

.gtf-os__feed {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
}

.gtf-os__feed-item {
  --tone: var(--gtf-yellow);
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  padding: calc(5 * var(--u)) 0;
  font-size: calc(28 * var(--u));
  line-height: 1.25;

  &:nth-child(2) { opacity: 0.82; }
  &:nth-child(3) { opacity: 0.64; }
  &:nth-child(n + 4) { opacity: 0.46; }
  &.is-lead { --tone: var(--gtf-success); }
  &.is-snake { --tone: var(--os-red); }
  &.is-big { --tone: var(--gtf-teal); }
}

.gtf-os__feed-dot {
  flex: none;
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  border-radius: calc(4 * var(--u));
  background: var(--tone);
}

/* ---------- Winner overlay (game over, before the host reveals the results) ---------- */

.os-winner-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 17, 14, 0.82);
  backdrop-filter: blur(10px);
  overflow: hidden;

  &.hidden { display: none; }
}

.os-winner-title {
  font-size: calc(120 * var(--u));
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.03em;
  text-align: center;
  color: var(--gtf-yellow);
}

/* Shown in the middle of the board when PixiJS (which draws the tokens) fails to load. */
.os-board-unavailable {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  margin: 0;
  padding: calc(48 * var(--u));
  background: rgba(20, 17, 14, 0.85);
  font-size: calc(36 * var(--u));
  font-weight: 700;
  text-align: center;
  color: var(--gtf-cream);
}

@media (prefers-reduced-motion: reduce) {
  .os-snake-layer .snake.is-leaving { animation-duration: 0.01s; }
  .gtf-os__leader.is-new-leader { animation: none; transition: none; }
}