/*
 * BetBattles base (Party Night): reset, the room background, the Chippers' motion, type utilities, page layout,
 * phone/desktop helpers, reduced motion. Copied from concepts/party/party.css. Owner: ARCHITECT.
 * Utilities: .eyebrow .display .h1 .h2 .lead .fine .label .num .sr .gold-t .go-t .muted-t .bob .hop .nb
 *            .hide-phone .show-phone .hide-desk
 */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--night-0);
  color: var(--ink);
  font: 500 15px/1.45 var(--f-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
input, textarea { font: inherit; color: inherit; }
a { color: inherit; }
b, strong { font-weight: 800; }
img, svg { max-width: none; }
:focus-visible { outline: 3px solid var(--grape); outline-offset: 3px; border-radius: 10px; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nb { font-style: normal; white-space: nowrap; }

/* ---------- room background ---------- */
.bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bg::before {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(40% 35% at 18% 8%, rgba(123, 97, 255, .30), transparent 70%),
    radial-gradient(35% 30% at 92% 4%, rgba(255, 111, 177, .16), transparent 70%),
    radial-gradient(45% 40% at 65% 110%, rgba(61, 181, 255, .14), transparent 70%);
  transition: background 1.2s var(--out);
}
.bg::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1.4px);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.2));
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.2));
}
body.gaming .bg::before {
  background:
    radial-gradient(40% 35% at 30% 0%, color-mix(in srgb, var(--pc) 26%, transparent), transparent 70%),
    radial-gradient(35% 30% at 95% 10%, rgba(123, 97, 255, .20), transparent 70%),
    radial-gradient(45% 40% at 50% 115%, rgba(43, 216, 129, .08), transparent 70%);
}
body.final .bg::before {
  background:
    radial-gradient(45% 35% at 50% -5%, rgba(255, 79, 110, .30), transparent 70%),
    radial-gradient(35% 30% at 95% 10%, rgba(123, 97, 255, .18), transparent 70%);
}

/* ---------- chips (the characters) ---------- */
.chip { display: block; overflow: visible; flex: none; }
.chip .eyes { transform-box: fill-box; transform-origin: center; animation: blink 5.2s infinite; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
.bob { animation: bob 3.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-2deg); } }
.hop { animation: hop .6s var(--spring) both; }
@keyframes hop { 0% { transform: translateY(18px) scale(.6); opacity: 0; } 60% { transform: translateY(-8px) scale(1.06); opacity: 1; } 100% { transform: none; } }
@keyframes fade { from { opacity: 0; } }
@keyframes feedIn { from { transform: translateY(-6px); opacity: 0; } }
@keyframes seatIn { from { transform: scale(.85) translateY(10px); opacity: 0; } }
@keyframes askPulse { 50% { opacity: .25; } }
@keyframes bump { 40% { transform: scale(1.14); color: var(--go); } }
@keyframes drop { from { transform: translateY(-26px); opacity: 0; } }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(-18px); opacity: 0; } }
@keyframes winPop { 40% { transform: scale(1.1); } }
@keyframes chipJump { 30% { transform: translateY(-22px) rotate(-8deg); } }

/* ---------- layout ---------- */
main { max-width: 1280px; margin: 0 auto; padding: 36px var(--gutter) 96px; }
.eyebrow { margin: 0 0 10px; font: 800 12px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.display { margin: 0; font: 800 clamp(34px, 5.2vw, 64px)/1.02 var(--f-display); letter-spacing: -.035em; }
.h1 { margin: 0; font: 800 clamp(26px, 3vw, 38px)/1.08 var(--f-display); letter-spacing: -.03em; }
.h2 { margin: 0; font: 800 20px/1.15 var(--f-display); letter-spacing: -.02em; }
.lead { margin: 16px 0 0; font: 600 18px/1.5 var(--f-ui); color: var(--ink-2); max-width: 560px; }
.fine { margin: 10px 0 0; font: 600 13px/1.45 var(--f-ui); color: var(--ink-3); }
.label { display: block; margin: 0 0 10px; font: 800 12px/1 var(--f-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.gold-t { color: var(--gold); }
.go-t { color: var(--go); }
.muted-t { color: var(--ink-3); }
.show-phone { display: none !important; }

@media (max-width: 700px) {
  .hide-phone { display: none !important; }
  .show-phone { display: inline-flex !important; }
  main { padding: 20px var(--gutter) calc(120px + var(--safe-b)); }
  .display { font-size: 36px; }
  .lead { font-size: 16px; margin-top: 12px; }
}
@media (min-width: 701px) { .hide-desk { display: none !important; } }

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