/* Nelson Holiday Olympics - shared look: winter broadcast, deep navy, ice white, gold. */
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap;
  src: url(/static/vendor/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap;
  src: url(/static/vendor/fonts/barlow-condensed-latin-800-normal.woff2) format("woff2"); }

:root {
  --navy-900: #071530;
  --navy-800: #0b1d3a;
  --navy-700: #12295096;
  --navy-600: #1a3563;
  --ice: #eaf2fa;
  --ice-dim: #b8c7da;
  --gold: #e0b44c;
  --gold-deep: #b5791b;
  --bronze-c: #c98a4b;
  --silver-c: #c9d3de;
  --ok: #3ccf8e;
  --bad: #ff6b6b;
  --a1: #e8505b; --a2: #2f7de1; --a3: #f2b134; --a4: #2bb673;   /* the four answer colors */
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--body); color: var(--ice); background: var(--navy-800); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.display { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: .95; }
.eyebrow { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--ice-dim); }

/* ---------- athlete: a bobblehead on a puffy team jacket ---------- */
.athlete { position: relative; width: var(--w, 120px); aspect-ratio: 120 / 190; flex: none; }
.athlete .body { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
.athlete .head { position: absolute; left: 50%; top: 0; width: 84%; aspect-ratio: 1; transform: translateX(-50%);
  transform-origin: 50% 92%; animation: bob 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
.athlete .head img, .athlete .head svg { width: 100%; height: 100%; display: block; object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.athlete.photo .head img { border-radius: 50%; }
.athlete.wave .head { animation: wobble 1.1s cubic-bezier(.3,1.6,.5,1) 1; }
@keyframes bob { 0%,100% { transform: translateX(-50%) rotate(-2deg); } 50% { transform: translateX(-50%) rotate(2deg); } }
@keyframes wobble {
  0% { transform: translateX(-50%) rotate(0) translateY(0); }
  20% { transform: translateX(-50%) rotate(-14deg) translateY(-8%); }
  40% { transform: translateX(-50%) rotate(12deg) translateY(-4%); }
  60% { transform: translateX(-50%) rotate(-8deg); }
  80% { transform: translateX(-50%) rotate(4deg); }
  100% { transform: translateX(-50%) rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .athlete .head { animation: none; } }

.flag { display: block; border-radius: 4px; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 4px 10px rgba(0,0,0,.3); }
.medal { display: inline-grid; place-items: center; width: 1.2em; height: 1.2em; border-radius: 50%; font-weight: 800;
  font-family: var(--display); color: #241a05; font-size: .9em; }
.medal.gold { background: radial-gradient(circle at 35% 30%, #fff3c4, var(--gold) 55%, #9c6d12); }
.medal.silver { background: radial-gradient(circle at 35% 30%, #fff, var(--silver-c) 55%, #7d8a99); }
.medal.bronze { background: radial-gradient(circle at 35% 30%, #ffe0c2, var(--bronze-c) 55%, #7a4a1f); }