:root { color-scheme: dark; font-family: "Barlow Semi Condensed", sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: transparent; }
body { display: flex; align-items: flex-end; padding: 24px; }
.bet {
  width: min(680px, calc(100vw - 48px));
  color: #fff;
  border: 1px solid #333;
  background: #050505;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .42);
  animation: reveal 420ms cubic-bezier(.2,.8,.2,1) both;
}
.bet[hidden] { display: none; }
.bet > header,
.bet > footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 18px; }
.bet > header { border-bottom: 1px solid #242424; }
.bet > header span,
.bet > footer { font: 500 23px "IBM Plex Mono", monospace; letter-spacing: .03em; text-transform: uppercase; }
.bet > header span { color: #ff4d5b; }
#state { display: grid; width: 38px; height: 38px; place-items: center; }
.state-lock { position: relative; width: 22px; height: 18px; margin-top: 8px; border: 3px solid currentColor; }
.state-lock::before { content: ""; position: absolute; left: 2px; top: -16px; width: 12px; height: 13px; border: 3px solid currentColor; border-bottom: 0; border-radius: 9px 9px 0 0; transition: transform 220ms cubic-bezier(.16, 1, .3, 1); }
#state.is-unlocked .state-lock::before { transform: translateX(8px); }
#countdown { color: #fff; font: 500 30px "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
h1 { max-width: 24ch; margin: 0; padding: 18px; font-size: clamp(32px, 4.4vw, 46px); font-weight: 600; line-height: .98; letter-spacing: -.025em; text-transform: uppercase; }
.options { display: grid; }
.option { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; min-height: 66px; padding: 0 18px; overflow: hidden; border-top: 1px solid #242424; }
.option::before { content: ""; position: absolute; inset: 0; background: #c0202a; transform: scaleX(var(--share, 0)); transform-origin: left; opacity: .34; transition: transform 500ms cubic-bezier(.2,.8,.2,1); }
.option > * { position: relative; z-index: 1; }
.option strong { overflow: hidden; font-size: 30px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.option em { font: 500 23px "IBM Plex Mono", monospace; font-style: normal; font-variant-numeric: tabular-nums; }
.option.is-winner { background: #c0202a; }
.option.is-winner::before { display: none; }
.bet.is-result { animation: result-reveal 620ms cubic-bezier(.16, 1, .3, 1) both; }
.bet.is-result .option.is-winner { animation: winner-signal 800ms steps(1, end) infinite; }
.bet.is-result .option.is-winner strong,
.bet.is-result .option.is-winner em { color: inherit; }
.bet > footer { min-height: 52px; border-top: 1px solid #242424; color: #a0a0a0; }
.bet > footer strong { color: #fff; font-weight: 500; }
.bet.is-closed > header #state { color: #a0a0a0; }
.bet.is-critical #countdown { color: #ff4d5b; }
@keyframes reveal { from { opacity: 0; transform: translateY(16px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0); } }
@keyframes result-reveal { from { opacity: 0; transform: translateY(42px) scale(.96); clip-path: inset(100% 0 0); filter: blur(8px); } to { opacity: 1; transform: none; clip-path: inset(0); filter: none; } }
@keyframes winner-signal { 0%, 100% { color: #fff; background: #c0202a; } 50% { color: #050505; background: #fff; } }
@media (max-width: 520px) {
  body { padding: 12px; }
  .bet { width: calc(100vw - 24px); }
  h1 { font-size: 32px; }
  .option { grid-template-columns: minmax(0, 1fr) auto; padding-inline: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .bet { animation: none; }
  .option::before { transition: none; }
  .bet.is-result .option.is-winner { animation: none; }
  .state-lock::before { transition: none; }
}