/* Battle Trivia - shared look (the 2026 redesign). Stage lights over deep navy, Archivo set wide
   and heavy for anything you read from across the room, emoji characters on colored discs. */
@import url('fonts/fonts.css');

:root {
  --bg: #0b0724;           /* page / the ring around faces */
  --night: #06041a;
  --text: #f6f4ec;         /* cream */
  --lav: #b3aef0;          /* secondary text */
  --lav-2: #7c74c8;        /* tertiary text, quiet labels */
  --line: #3b2d9a;         /* card outlines, dividers */
  --card-a: #26196f; --card-b: #131552;
  --cyan: #45d0ff; --cyan-2: #5fd2ff;
  --violet: #8a3dff; --violet-2: #5a1fd1; --purple: #7b4dff; --pink-violet: #c57bff;
  --good: #2fd68f; --good-2: #5ff0ae;
  --bad: #f04452;
  --warn: #f7b52c;
  --hot: #2f7bff;
  --card: linear-gradient(160deg, var(--card-a) 0%, var(--card-b) 100%);
  --go: linear-gradient(135deg, #3d8bff 0%, #7b4dff 55%, #b44dff 100%);
  --brand: linear-gradient(90deg, #5fd2ff 0%, #8f7bff 52%, #c56bff 100%);
  --glass: linear-gradient(180deg, rgba(130,180,255,.3) 0%, rgba(70,110,255,.14) 100%);
  --stage:
    conic-gradient(from 158deg at 14% -6%, rgba(70,150,255,0) 0deg, rgba(70,150,255,.17) 9deg, rgba(70,150,255,0) 20deg),
    conic-gradient(from 182deg at 86% -6%, rgba(185,90,255,0) 0deg, rgba(185,90,255,.17) 9deg, rgba(185,90,255,0) 20deg),
    radial-gradient(75% 45% at 15% -6%, rgba(47,123,255,.6) 0%, rgba(47,123,255,0) 72%),
    radial-gradient(75% 45% at 88% -4%, rgba(170,60,255,.55) 0%, rgba(170,60,255,0) 72%),
    linear-gradient(180deg, #140b40 0%, #0b0728 55%, #06041a 100%);
  /* a right answer floods green, a wrong one red */
  --stage-good:
    radial-gradient(70% 45% at 50% -6%, rgba(47,214,143,.55) 0%, rgba(47,214,143,0) 72%),
    linear-gradient(180deg, #0c2a3a 0%, #0b0728 55%, #06041a 100%);
  --stage-bad:
    radial-gradient(70% 45% at 50% -6%, rgba(240,68,82,.5) 0%, rgba(240,68,82,0) 72%),
    linear-gradient(180deg, #2a0b2c 0%, #0b0728 55%, #06041a 100%);
  --ui: Archivo, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
/* Noto's color emoji are COLRv1. Where the browser can draw those, use them (they match the
   design); everywhere else (Safari) the device's own emoji. */
@supports font-tech(color-COLRv1) {
  :root { --emoji: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text); font-family: var(--ui);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; margin: 0; }
input, select, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }

/* The display face: Archivo at its widest, heavy. Use on anything shouted. */
.x { font-family: var(--ui); font-stretch: 125%; font-weight: 800; line-height: 1.05; }
.brand { background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stage { background: var(--stage); }
.stage.good { background: var(--stage-good); }
.stage.bad { background: var(--stage-bad); }

/* the logo */
/* the owner's logo art (src/img/logo-*.webp, 2026-10-25), sized by the font-size each screen already sets */
.logo { text-align: center; line-height: 0; }
.logo img { display: inline-block; height: 2.25em; width: auto; max-width: 100%; object-fit: contain; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  height: 56px; padding: 0 22px; border-radius: 18px; font-weight: 700; font-size: 17px;
  background: var(--card); box-shadow: inset 0 0 0 2px var(--line); color: var(--text);
  transition: transform .08s, filter .15s, opacity .15s;
}
.btn:active { transform: translateY(2px); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn.go, .btn.good, .btn.hot, .btn.cyan, .btn.bad {
  font-stretch: 125%; font-weight: 800; font-size: 22px; height: 68px; border-radius: 20px; letter-spacing: .01em;
}
.btn.go { background: var(--go); color: #fff; box-shadow: 0 3px 0 #3a1d9e, 0 10px 30px rgba(123,77,255,.35); }
.btn.good { background: linear-gradient(180deg, #2fd68f 0%, #1fae8a 100%); color: #00301f; box-shadow: 0 3px 0 #0d6b54; }
.btn.hot { background: var(--hot); color: #fff; box-shadow: 0 3px 0 #1a3f9e, 0 10px 30px rgba(47,123,255,.35); }
.btn.cyan { background: #45ccff; color: #0b0724; box-shadow: 0 3px 0 #2a50b6; }
.btn.bad { background: transparent; color: #ff7b86; box-shadow: inset 0 0 0 2px #3b2d9a; font-size: 17px; height: 56px; font-stretch: 100%; font-weight: 700; }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 2px rgba(59,45,154,.9); }
.btn.wide { width: 100%; }
.btn.off { background: rgba(38,25,111,.35); color: var(--lav-2); box-shadow: inset 0 0 0 2px rgba(59,45,154,.6); }
.link { color: var(--lav-2); font-weight: 600; font-size: 15px; text-decoration: none; }
.link:hover { color: var(--lav); }

.card { background: var(--card); border-radius: 18px; }
.glass { background: var(--glass); box-shadow: inset 0 0 0 2px rgba(175,210,255,.4); }

/* faces: the player's emoji on their color, ringed in the page color */
.face {
  position: relative; display: inline-grid; place-items: center; flex: none; border-radius: 50%;
  line-height: 1; font-family: var(--emoji); color: #10132b; box-shadow: 0 0 0 4px var(--bg);
}
.face .em { display: grid; place-items: center; line-height: 1; font-family: var(--emoji); }
.face .em img { display: block; width: 1.25em; height: 1.25em; }
.face .init { font-family: var(--ui); font-stretch: 125%; font-weight: 800; }
.face .fire { position: absolute; right: -16%; bottom: -12%; line-height: 1; font-family: var(--emoji); animation: flick .5s infinite alternate; }
.face.onfire { box-shadow: 0 0 0 4px var(--bg), 0 0 0 7px #ff9f1c, 0 0 22px 4px rgba(255,120,30,.7); }
.face.dim { opacity: .3; }
.emo { font-family: var(--emoji); line-height: 1; }

/* item icons */
.item-ico { width: 1em; height: 1em; display: inline-block; vertical-align: -.15em; }
.item-ico svg, .item-ico img { width: 100%; height: 100%; display: block; }

@keyframes flick { from { transform: scale(1) rotate(-6deg); } to { transform: scale(1.18) rotate(6deg); } }
@keyframes bt-pop { 0% { transform: scale(.55); opacity: 0; } 60% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); } }
@keyframes bt-slam { 0% { transform: scale(1.5); opacity: 0; } 60% { transform: scale(.98); opacity: 1; } 100% { transform: scale(1); } }
@keyframes bt-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes bt-up { 0% { transform: translateY(26px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes bt-fade { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes bt-sheet { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } }
@keyframes bt-drop { 0% { transform: translateY(-260px) rotate(-12deg); opacity: 0; } 60% { transform: translateY(12px) rotate(4deg); opacity: 1; } 80% { transform: translateY(-6px) rotate(-2deg); } 100% { transform: translateY(0) rotate(0); } }
@keyframes bt-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(47,123,255,.6); } 50% { box-shadow: 0 0 0 12px rgba(47,123,255,0); } }
@keyframes bt-rise { 0% { transform: translateY(0) scale(.5); opacity: 0; } 15% { transform: translateY(-24px) scale(1.15); opacity: 1; } 100% { transform: translateY(-240px) scale(1); opacity: 0; } }
@keyframes bt-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes bt-blink { 50% { opacity: 0; } }
@keyframes bt-burst { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes bt-spin { to { transform: rotate(360deg); } }
@keyframes bt-wipe { 0%, 100% { transform: translateX(-72px); } 50% { transform: translateX(72px); } }
@keyframes bt-glow { 0% { box-shadow: inset 0 0 0 3px #45d0ff; } 45% { box-shadow: inset 0 0 0 3px #45d0ff, 0 0 0 8px rgba(69,208,255,.45), 0 0 46px rgba(69,208,255,.9); } 100% { box-shadow: inset 0 0 0 3px #45d0ff, 0 0 26px rgba(69,208,255,.55); } }
@keyframes bt-crt { 0% { transform: scale(1,1); opacity: .85; } 55% { transform: scale(1,.004); opacity: 1; } 100% { transform: scale(0,.004); opacity: 0; } }
@keyframes bt-confetti { 0% { transform: translateY(-60px) rotate(0); } 100% { transform: translateY(110vh) rotate(620deg); } }
@keyframes bt-stamp { 0% { transform: scale(2.6) rotate(-14deg); opacity: 0; } 60% { transform: scale(.92) rotate(-14deg); opacity: 1; } 100% { transform: scale(1) rotate(-14deg); opacity: 1; } }
@keyframes bt-wheel { 0% { transform: translateX(0); animation-timing-function: cubic-bezier(.15,.6,.18,1); } 88% { transform: translateX(calc(var(--x) - 26px)); animation-timing-function: cubic-bezier(.45,0,.35,1); } 100% { transform: translateX(var(--x)); } }
@keyframes bt-banner { 0% { transform: translateY(-140%); } 14% { transform: translateY(0); } 84% { transform: translateY(0); } 100% { transform: translateY(-140%); } }
@keyframes bt-spark { 0% { transform: scale(.1) rotate(0); opacity: 0; } 30% { transform: scale(1.15) rotate(25deg); opacity: 1; } 100% { transform: scale(.4) rotate(70deg); opacity: 0; } }

.dots span { display: inline-block; animation: bt-blink 1.2s infinite; }
.dots span:nth-child(2) { animation-delay: .2s; } .dots span:nth-child(3) { animation-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}