/* Shared tokens and basics for all three pages. Stage lighting, not a dashboard:
   deep indigo room, two strong team colors (marigold A, aqua B), coral for "out". */
:root {
  --stage: #1d1a4f;
  --stage-2: #2a2668;
  --stage-3: #3a357f;
  --paper: #fff8e8;
  --muted: #b9b4e3;
  --a: #ffc23c; /* side A: marigold circle */
  --a-ink: #3a2600;
  --b: #3fd0c9; /* side B: teal square */
  --b-ink: #002e2c;
  --out: #ff5a5f;
  --good: #8fe388;
  --ghost: #9c97cf;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--stage);
  color: var(--paper);
  font-family: var(--font);
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
h1, h2, p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.muted { color: var(--muted); }
[hidden] { display: none !important; }

/* Side shapes: A circle, B square, so the sides never depend on color alone */
.shape { display: inline-block; width: .62em; height: .62em; margin: 0 .3em; vertical-align: .05em; border: .12em solid currentColor; }
.shape-a { border-radius: 50%; }
.shape-b { border-radius: 2px; }

/* Timer bar: .t-bar is scaled by js/ticker.js */
.tbar { height: 8px; border-radius: 4px; background: var(--stage-3); overflow: hidden; }
.t-bar { height: 100%; background: var(--paper); transform-origin: left center; }
.t-low .t-bar { background: var(--out); }

/* Connection banner */
.net {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--out); color: #2b0003; font-weight: 700;
  padding: 8px 16px; border-radius: 999px; z-index: 10;
}

/* Result split bar, used on phone (small) and big screen (big) */
.split {
  display: flex; width: 100%; height: 56px; border-radius: 14px; overflow: hidden;
  background: var(--stage-3); font-weight: 800;
}
.split > div { display: flex; align-items: center; min-width: 0; transition: opacity .6s .9s; }
.split > div > span { padding: 0 14px; white-space: nowrap; }
.split-a { width: var(--pa); background: var(--a); color: var(--a-ink); justify-content: flex-start; animation: split-in 900ms cubic-bezier(.2,.8,.2,1) both; }
.split-b { flex: 1; background: var(--b); color: var(--b-ink); justify-content: flex-end; }
.split .loses { opacity: .35; }
@keyframes split-in { from { width: 50%; } }

@media (prefers-reduced-motion: reduce) {
  .split-a { animation: none; }
  .split > div { transition: none; }
}