@import "tailwindcss";

:root {
  --red: #ff3158;
  --red-dark: #b61238;
  --blue: #087bbd;
  --blue-dark: #154d89;
  --gold: #ffd52f;
  --gold-dark: #d58c00;
  --ink: #20120f;
  --paper: #fff8e9;
  --panel: #fff8e9;
  --muted: #735d57;
  --sky: #69ddf5;
  --grape: #65348f;
  --orange: #ff5b25;
  --pink: #ff3b98;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
}

body {
  color: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.casino-app {
  position: relative;
  width: 100vw;
  height: 100dvh;
  min-height: 520px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 73% 38%, rgba(255,255,255,.58), transparent 25%),
    linear-gradient(112deg, #72e2ff 0%, var(--sky) 48%, #40c7ec 100%);
}

.casino-app::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -5;
  opacity: 0.48;
  background:
    radial-gradient(circle at 1px 1px, rgba(32,18,15,.14) 1px, transparent 1.4px),
    linear-gradient(112deg, transparent 48%, rgba(255,255,255,.18) 49%, transparent 50%);
  background-size: 10px 10px, 18vw 100%;
}

.noise-layer {
  position: absolute;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: screen;
  background-image:
    repeating-radial-gradient(circle at 17% 23%, rgba(255,255,255,.65) 0 1px, transparent 1px 4px),
    repeating-radial-gradient(circle at 79% 63%, rgba(255,255,255,.4) 0 1px, transparent 1px 5px);
  background-size: 9px 11px, 13px 15px;
}

.scene-light {
  position: absolute;
  top: -40%;
  z-index: -3;
  width: 18vw;
  height: 150%;
  opacity: 0.36;
  filter: blur(14px);
  transform-origin: top;
  pointer-events: none;
}

.scene-light-left {
  left: 9%;
  transform: rotate(-17deg);
  background: linear-gradient(180deg, rgba(20, 87, 255, .85), transparent 72%);
}

.scene-light-right {
  right: 7%;
  transform: rotate(18deg);
  background: linear-gradient(180deg, rgba(255, 38, 38, .76), transparent 74%);
}

.three-stage {
  position: absolute;
  inset: 8% 0 8% 22%;
  z-index: 1;
  pointer-events: none;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .45s ease;
}

.three-stage[data-webgl="fallback"]::before {
  content: "50/50";
  position: absolute;
  left: 48%;
  top: 42%;
  color: var(--gold);
  font: 900 clamp(5rem, 13vw, 13rem)/1 Impact, sans-serif;
  transform: translate(-50%, -50%) rotate(-7deg);
  text-shadow: 0 10px 0 #713c00;
}

.panel-is-open .three-stage {
  transform: translateX(-12vw) scale(.86);
  opacity: .5;
}

.studio-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .45s ease;
}

.panel-is-open .studio-scene {
  transform: translateX(-4vw) scale(1.02);
  opacity: .42;
}

.scoreboard {
  position: absolute;
  top: 15%;
  left: 49%;
  width: clamp(290px, 31vw, 550px);
  height: clamp(80px, 10.5vw, 150px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  clip-path: polygon(5% 0, 95% 0, 100% 18%, 96% 100%, 4% 100%, 0 18%);
  color: white;
  background: #070a10;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 0 0 8px #101927, 0 0 54px rgba(20,87,255,.35);
  transform: translateX(-50%) perspective(600px) rotateX(-8deg);
  opacity: .72;
}

.scoreboard::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px solid var(--blue);
}

.scoreboard span {
  position: absolute;
  top: 8px;
  font-size: clamp(.5rem, .7vw, .75rem);
  letter-spacing: .22em;
  color: #80a4ff;
}

.scoreboard b {
  font: 900 clamp(2.4rem, 5.4vw, 5.8rem)/1 Impact, sans-serif;
}

.scoreboard b:first-of-type { color: var(--red); }
.scoreboard b:last-of-type { color: var(--blue); }
.scoreboard i { font-style: normal; color: var(--gold); font-size: 2vw; }

.stage-floor {
  position: absolute;
  left: 13%;
  right: 4%;
  bottom: -22%;
  height: 42%;
  border-radius: 50%;
  transform: perspective(520px) rotateX(61deg);
  background:
    radial-gradient(ellipse, rgba(255,201,40,.24), transparent 24%),
    repeating-conic-gradient(from 0deg, rgba(20,87,255,.2) 0 8deg, transparent 8deg 16deg),
    #060913;
  border: 4px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 42px rgba(20,87,255,.32), 0 -15px 60px rgba(20,87,255,.22);
}

.camera {
  position: absolute;
  bottom: 12%;
  width: 8vw;
  height: 5vw;
  min-width: 80px;
  min-height: 50px;
  background: #020306;
  box-shadow: inset 0 0 0 3px #1e2635, 0 14px 30px #000;
}

.camera::before {
  content: "";
  position: absolute;
  top: 15%;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #8cc2ff 0 8%, #0f2868 18%, #05060a 54%);
  box-shadow: 0 0 20px rgba(20,87,255,.8);
}

.camera-left { left: -2%; transform: rotate(12deg); }
.camera-left::before { right: -12%; }
.camera-right { right: -2%; transform: rotate(-12deg); }
.camera-right::before { left: -12%; }

.topbar {
  position: absolute;
  z-index: 45;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(66px, 8.5vh, 92px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(16px, 3vw, 52px);
  color: var(--ink);
  background: rgba(255,248,233,.94);
  border-bottom: 4px solid var(--ink);
  box-shadow: 0 7px 0 rgba(101,52,143,.95);
}

.brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.brand-mbc {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 3px solid var(--ink);
  border-radius: 12px 4px 12px 5px;
  color: white;
  background: var(--pink);
  font: 900 16px/1 Impact, sans-serif;
  letter-spacing: -.04em;
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-4deg);
}

.brand-name {
  display: flex;
  flex-direction: column;
  font: 900 clamp(1rem, 1.65vw, 1.6rem)/.78 Impact, sans-serif;
  letter-spacing: .01em;
  transform: skew(-5deg);
}

.brand-name b { color: var(--ink); }
.brand-name i { color: var(--pink); font-style: normal; text-shadow: 2px 2px 0 var(--ink); }
.brand small {
  position: absolute;
  left: 56px;
  bottom: -12px;
  white-space: nowrap;
  color: var(--grape);
  font-size: 8px;
  letter-spacing: .14em;
}

.top-actions { display: flex; align-items: center; gap: 8px; }
.mini-link,
.menu-button,
.sound-toggle {
  height: 38px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  color: var(--ink);
  background: white;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
}

.mini-link {
  min-width: 38px;
  font-weight: 900;
  font-size: 11px;
}

.mini-link:hover { background: white; color: var(--ink); }

.sound-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  font-size: 9px;
  letter-spacing: .1em;
}

.sound-bars { height: 16px; display: flex; align-items: flex-end; gap: 2px; }
.sound-bars i { display: block; width: 2px; height: 35%; background: var(--muted); }
.sound-bars i:nth-child(2) { height: 70%; }
.sound-bars i:nth-child(3) { height: 100%; }
.sound-toggle.is-on .sound-bars i { background: var(--gold); animation: soundbar .65s infinite alternate; }
.sound-toggle.is-on .sound-bars i:nth-child(2) { animation-delay: -.25s; }
.sound-toggle.is-on .sound-bars i:nth-child(3) { animation-delay: -.45s; }

.menu-button {
  width: 88px;
  display: grid;
  grid-template-columns: 1fr 18px;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  padding: 8px 12px;
}

.menu-button span { grid-row: 1/3; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.menu-button i { display: block; width: 17px; height: 2px; background: var(--ink); }

.hero-copy {
  position: absolute;
  z-index: 8;
  left: clamp(18px, 5.5vw, 94px);
  top: 52%;
  width: clamp(330px, 39vw, 690px);
  transform: translateY(-48%);
  transition: transform .5s ease, opacity .35s ease;
}

.panel-is-open .hero-copy {
  transform: translate(-10vw, -48%) scale(.9);
  opacity: .2;
}

.broadcast-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--grape);
  font-size: clamp(9px, .72vw, 12px);
  font-weight: 900;
  letter-spacing: .16em;
}

.broadcast-kicker span { color: var(--red); }
.broadcast-kicker span::first-letter { animation: blink .8s infinite alternate; }

.hero-copy h1 {
  margin: 0;
  color: var(--ink);
  font: 900 clamp(3.5rem, 7.5vw, 8.7rem)/.75 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  letter-spacing: -.045em;
  text-transform: uppercase;
  filter: drop-shadow(5px 7px 0 rgba(255,255,255,.75));
}

.hero-copy h1 span,
.hero-copy h1 em { display: block; }
.hero-copy h1 span:nth-child(2) { color: var(--grape); text-shadow: 3px 3px 0 white; }
.hero-copy h1 em {
  color: var(--pink);
  font-style: normal;
  text-shadow: 4px 4px 0 var(--ink), 7px 7px 0 white;
}

.hero-sub {
  margin: clamp(12px, 2.2vh, 25px) 0 16px;
  font-size: clamp(1rem, 1.5vw, 1.7rem);
  letter-spacing: -.02em;
}

.hero-sub b { color: var(--grape); }
.hero-actions { display: flex; gap: 12px; align-items: stretch; }

.action-button {
  position: relative;
  min-width: 178px;
  height: clamp(46px, 6vh, 64px);
  padding: 0 21px;
  border: 4px solid var(--ink);
  border-radius: 9px;
  font-size: clamp(10px, .85vw, 14px);
  font-weight: 1000;
  letter-spacing: .045em;
  cursor: pointer;
  transform-style: preserve-3d;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -7px 0 rgba(0,0,0,.12), 0 7px 0 var(--ink), 0 14px 22px rgba(69,33,21,.2);
}

.action-button:disabled { opacity: .42; cursor: not-allowed; }
.action-button span { position: relative; z-index: 2; }
.action-button i {
  position: absolute;
  inset: 1px 35% auto 10%;
  height: 1px;
  background: rgba(255,255,255,.7);
}

.action-red { background: var(--orange); color: white; }
.action-blue { background: var(--grape); color: white; }
.action-gold { background: var(--gold); color: #15100a; }
.action-dark { background: #111827; color: white; border: 1px solid #3b4658; }
.action-button kbd { margin-left: 10px; padding: 3px 5px; border: 1px solid rgba(255,255,255,.5); font-size: 9px; }

.coming-soon {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  color: #aeb6c5;
  font-size: 9px;
  letter-spacing: .14em;
}

.coming-soon span { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); animation: blink .75s infinite alternate; }
.coming-soon b { color: white; }

.launch-button {
  position: absolute;
  z-index: 7;
  left: 61.5%;
  bottom: 13.5%;
  width: clamp(112px, 10vw, 170px);
  aspect-ratio: 1.45;
  border: 5px solid var(--ink);
  border-radius: 50%;
  color: white;
  background: radial-gradient(ellipse at 50% 22%, #ffb06f 0 9%, var(--orange) 26%, #e54018 58%, #7f1b0b 68%);
  box-shadow: 0 8px 0 var(--ink), 0 15px 0 var(--grape), 0 22px 35px rgba(101,52,143,.32), inset 0 2px 7px rgba(255,255,255,.85);
  cursor: pointer;
  transition: transform .18s ease, filter .2s ease, opacity .35s ease;
}

.launch-button:hover { transform: scale(1.05); filter: brightness(1.2); }
.launch-button:active { transform: translateY(7px) scale(.97); box-shadow: 0 2px 0 #250307, 0 7px 0 #050607; }
.launch-button span { display: block; font: 900 clamp(1.2rem, 2.2vw, 2rem)/.8 Impact, sans-serif; }
.launch-button i { font-size: 8px; font-style: normal; letter-spacing: .12em; }
.panel-is-open .launch-button { opacity: 0; pointer-events: none; }

.section-indicator {
  position: absolute;
  z-index: 42;
  left: clamp(16px, 3vw, 52px);
  bottom: clamp(42px, 6.2vh, 68px);
  display: flex;
  align-items: center;
  gap: 10px;
  color: #a6adbb;
}

.section-indicator span { color: var(--gold); font: 900 1.35rem/1 Impact, sans-serif; }
.section-indicator b { font-size: 9px; letter-spacing: .14em; }

.host-caption {
  position: absolute;
  z-index: 10;
  right: clamp(18px, 3vw, 50px);
  bottom: clamp(42px, 6.4vh, 70px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  text-align: right;
}

.host-caption b { color: var(--red); font-size: 8px; letter-spacing: .18em; }
.host-caption span { font-size: 11px; font-weight: 700; }

.legal-strip {
  position: absolute;
  z-index: 46;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(28px, 3.6vh, 38px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 0 clamp(16px, 3vw, 52px);
  color: #727c90;
  background: #03050a;
  border-top: 1px solid #1d2431;
  font-size: clamp(7px, .55vw, 9px);
  letter-spacing: .05em;
}

.legal-strip span { color: #d2d6df; font-weight: 900; }
.legal-strip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.legal-strip button { border: 0; color: var(--gold); background: transparent; font-size: inherit; font-weight: 900; cursor: pointer; }

.show-menu {
  position: absolute;
  z-index: 44;
  top: clamp(65px, 8.5vh, 92px);
  right: clamp(16px, 3vw, 52px);
  width: min(660px, calc(100vw - 32px));
  padding: 20px;
  background: #0b101a;
  border: 1px solid #344057;
  box-shadow: 0 20px 70px rgba(0,0,0,.7), inset 0 0 0 5px #080b12;
  clip-path: polygon(0 0, 96% 0, 100% 10%, 100% 100%, 4% 100%, 0 88%);
}

.menu-title { display: flex; justify-content: space-between; align-items: end; margin-bottom: 14px; }
.menu-title span { color: var(--red); font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.menu-title b { font: 900 1.45rem/1 Impact, sans-serif; }
.menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.menu-grid button {
  display: grid;
  grid-template-columns: 36px 1fr 25px;
  align-items: center;
  min-height: 43px;
  border: 1px solid #242e40;
  background: #101724;
  text-align: left;
  cursor: pointer;
}
.menu-grid button:hover { background: var(--blue); border-color: #80a1ff; }
.menu-grid button span { color: var(--gold); font: 900 15px/1 Impact, sans-serif; text-align: center; }
.menu-grid button b { font-size: 11px; letter-spacing: .06em; }
.menu-grid kbd { color: #818ca0; font-size: 9px; }
.sound-board { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.sound-board label { display: grid; grid-template-columns: 45px 1fr; align-items: center; color: #aeb6c5; font-size: 8px; letter-spacing: .12em; }
.sound-board input { accent-color: var(--gold); width: 100%; }

.game-panel {
  position: absolute;
  z-index: 38;
  top: clamp(66px, 8.5vh, 92px);
  right: 0;
  bottom: clamp(28px, 3.6vh, 38px);
  width: min(78vw, 1220px);
  padding: clamp(18px, 2.3vw, 36px) clamp(18px, 3vw, 48px) clamp(16px, 2.5vw, 34px) clamp(58px, 6.5vw, 105px);
  background:
    linear-gradient(110deg, rgba(11,16,28,.98), rgba(7,10,17,.96)),
    var(--panel);
  border-left: 1px solid #39445a;
  box-shadow: -30px 0 80px rgba(0,0,0,.6);
  transform-origin: right center;
  overflow: hidden;
}

.game-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 97%, rgba(255,255,255,.04) 97%),
    linear-gradient(0deg, transparent 94%, rgba(255,255,255,.025) 94%);
  background-size: 52px 100%, 100% 42px;
  opacity: .55;
}

.panel-rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: clamp(42px, 4.2vw, 65px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 18px;
  background: var(--blue);
  border-right: 6px solid #041344;
}
.panel-rail span { font: 900 1.45rem/1 Impact, sans-serif; }
.panel-rail b { writing-mode: vertical-rl; margin-top: 18px; font-size: 9px; letter-spacing: .16em; }

.panel-heading {
  position: relative;
  z-index: 2;
  height: clamp(58px, 9vh, 92px);
  display: flex;
  align-items: start;
  justify-content: space-between;
  border-bottom: 1px solid #273144;
}
.eyebrow { margin: 0 0 6px; color: var(--red); font-size: clamp(8px, .65vw, 10px); font-weight: 900; letter-spacing: .18em; }
.panel-heading h2 { margin: 0; font: 900 clamp(2.2rem, 4.7vw, 5rem)/.82 Impact, sans-serif; letter-spacing: -.03em; }
.close-button { display: flex; align-items: center; gap: 9px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.close-button span { color: #8c96a9; font-size: 8px; letter-spacing: .12em; }
.close-button b { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid #475165; font-size: 24px; line-height: 1; }
.close-button:hover b { color: var(--ink); background: white; }
.panel-content { position: relative; z-index: 2; height: calc(100% - clamp(58px, 9vh, 92px)); padding-top: clamp(13px, 2.2vh, 24px); }

.arena-layout { display: grid; grid-template-columns: minmax(280px, .86fr) minmax(280px, 1.14fr); gap: clamp(18px, 3vw, 48px); height: 100%; }
.bet-console { display: flex; flex-direction: column; justify-content: center; gap: clamp(9px, 1.4vh, 15px); }
.chip-balance { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 0 12px; padding-bottom: 11px; border-bottom: 1px solid #323b4c; }
.chip-balance span { grid-column: 1/3; color: #8994a8; font-size: 8px; letter-spacing: .15em; }
.chip-balance b { font: 900 clamp(2rem, 4vw, 4.3rem)/1 Impact, sans-serif; color: var(--gold); }
.chip-balance i { padding-bottom: 6px; color: white; font-size: 9px; font-style: normal; letter-spacing: .1em; }
.pick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pick-row button { min-height: clamp(70px, 11vh, 110px); display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 10px; border: 1px solid #2d3748; background: #101622; cursor: pointer; }
.pick-row button:hover { border-color: var(--gold); }
.pick-row button.active { color: #171008; background: var(--gold); border-color: #fff4b8; box-shadow: inset 0 -7px 0 #a86b00; }
.pick-row button:disabled { cursor: wait; filter: saturate(.7); }
.coin-face { display: grid; place-items: center; width: clamp(42px, 5.2vw, 68px); aspect-ratio: 1; border-radius: 50%; color: #2a1600; background: radial-gradient(circle at 35% 28%, #fff3ae, var(--gold) 48%, #a66000 75%); border: 3px double #734300; font: 900 1.6rem/1 Impact, sans-serif; }
.pick-row b { text-align: left; font: 900 clamp(1.15rem, 2vw, 2rem)/1 Impact, sans-serif; }
.stake-control { height: 47px; display: grid; grid-template-columns: 1fr minmax(70px, 110px) auto; align-items: center; gap: 9px; padding: 0 13px; color: #96a0b2; background: #070a11; border: 1px solid #273144; font-size: 8px; letter-spacing: .1em; }
.stake-control input { width: 100%; height: 32px; border: 0; color: var(--gold); background: #111827; text-align: center; font-size: 17px; font-weight: 900; }
.stake-control b { color: white; }
.wallet-button { height: 37px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border: 1px solid #2d3748; color: #aeb6c5; background: transparent; font-size: 8px; font-weight: 900; letter-spacing: .12em; cursor: pointer; }
.wallet-button span { padding: 4px 7px; color: var(--ink); background: var(--gold); }
.result-board { position: relative; min-height: 320px; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 42%, #111c36 0, #05070d 62%); border: 1px solid #283247; box-shadow: inset 0 0 70px rgba(20,87,255,.13); }
.result-board::before { content: ""; position: absolute; z-index: 3; inset: 7%; pointer-events: none; border: 1px solid rgba(20,87,255,.4); clip-path: polygon(0 0, 20% 0, 20% 2px, 80% 2px, 80% 0, 100% 0, 100% 100%, 80% 100%, 80% calc(100% - 2px), 20% calc(100% - 2px), 20% 100%, 0 100%); }
.result-board::after { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: .3; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.025) 3px 4px); mix-blend-mode: screen; }
.coin-arena-canvas { position: absolute; z-index: 0; inset: 0; }
.coin-arena-canvas canvas { display: block; width: 100%; height: 100%; }
.coin-arena-canvas[data-webgl="fallback"]::before { content: "50/50"; position: absolute; left: 50%; top: 43%; width: 38%; aspect-ratio: 1; display: grid; place-items: center; color: #251100; background: radial-gradient(circle at 35% 25%, #fff6b5, var(--gold) 50%, #8b4a00 76%); border: 8px double #713a00; border-radius: 50%; font: 900 clamp(2rem, 5vw, 5rem)/1 Impact, sans-serif; transform: translate(-50%, -50%); box-shadow: 0 24px 40px #000b; }
.arena-camera-hud { position: absolute; z-index: 5; top: 9%; left: 9%; right: 9%; display: flex; align-items: center; justify-content: space-between; color: #9da9bd; font-size: 8px; font-weight: 900; letter-spacing: .15em; }
.arena-camera-hud span { display: flex; align-items: center; gap: 7px; color: #ff6b76; }
.arena-camera-hud i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 14px var(--red); animation: rec-blink 1s steps(1) infinite; }
.arena-camera-hud b { font-size: inherit; }
.arena-result-callout { position: absolute; z-index: 5; left: 9%; right: 9%; bottom: 16%; display: flex; flex-direction: column; align-items: center; pointer-events: none; text-align: center; }
.result-label { margin-bottom: 7px; color: #94a2b8; font-size: 7px; font-weight: 900; letter-spacing: .24em; }
.result-big { position: relative; color: white; font: 900 clamp(2.4rem, 5.3vw, 5.8rem)/.82 Impact, sans-serif; letter-spacing: -.025em; text-shadow: 4px 4px 0 var(--blue), 0 0 28px #02040a; }
.is-flipping .result-big { color: rgba(255,255,255,.82); font-size: clamp(1.8rem, 3.7vw, 3.8rem); letter-spacing: .03em; animation: airborne-pulse .7s ease-in-out infinite alternate; }
.has-result .result-big { color: var(--gold); text-shadow: 5px 5px 0 var(--red-dark), 0 0 34px #000; animation: result-slam .46s cubic-bezier(.2,1.6,.4,1) both; }
.arena-result-callout > i { margin-top: 6px; color: var(--red); font-size: clamp(8px, .9vw, 12px); font-style: normal; font-weight: 900; letter-spacing: .16em; text-shadow: 0 2px 8px #000; }
.stats-strip { position: absolute; z-index: 5; left: 6%; right: 6%; bottom: 5%; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #283247; }
.stats-strip span { padding: 13px 6px 0; color: #758198; text-align: center; font-size: 8px; letter-spacing: .12em; }
.stats-strip b { color: white; margin-left: 5px; }

@keyframes rec-blink { 50% { opacity: .25; } }
@keyframes airborne-pulse { to { opacity: .55; transform: scale(.96); } }
@keyframes result-slam { from { opacity: 0; transform: scale(1.45); filter: blur(9px); } to { opacity: 1; transform: scale(1); filter: blur(0); } }

.lore-layout { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(20px, 4vw, 65px); height: 100%; padding-bottom: 58px; }
.comic-frame { position: relative; overflow: hidden; background: var(--blue); border: 7px solid #f1efe7; box-shadow: 11px 11px 0 var(--red); transform: rotate(-1deg); }
.comic-frame::before { content: ""; position: absolute; inset: 0; opacity: .35; background: repeating-radial-gradient(circle at center, transparent 0 5px, #001a62 6px 7px); }
.comic-frame::after { content: ""; position: absolute; inset: 7% 8%; background: url('../og.png') center/cover no-repeat; mix-blend-mode: multiply; filter: saturate(1.08) contrast(1.04); opacity: .78; }
.comic-frame > span { position: absolute; z-index: 3; top: 14px; left: 16px; padding: 7px 9px; color: var(--ink); background: var(--gold); font: 900 1rem/1 Impact, sans-serif; }
.comic-frame > b { position: absolute; z-index: 3; right: 7%; bottom: 7%; color: white; font: 900 clamp(3.5rem, 7vw, 7rem)/.8 Impact, sans-serif; text-shadow: 5px 5px 0 var(--red); transform: rotate(-8deg); }
.comic-burst { position: absolute; left: -5%; top: -15%; width: 75%; aspect-ratio: 1; background: var(--red); clip-path: polygon(50% 0, 59% 34%, 83% 8%, 69% 39%, 100% 34%, 72% 50%, 100% 66%, 67% 62%, 83% 92%, 59% 69%, 50% 100%, 41% 67%, 17% 92%, 31% 61%, 0 66%, 28% 50%, 0 34%, 32% 40%, 17% 8%, 41% 34%); }
.lore-copy { display: flex; flex-direction: column; justify-content: center; }
.lore-copy > span { color: var(--gold); font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.lore-copy h3 { margin: 12px 0; font: 900 clamp(2.4rem, 5.2vw, 5.5rem)/.82 Impact, sans-serif; }
.lore-copy p { max-width: 500px; margin: 0; color: #bdc5d2; font-size: clamp(.8rem, 1.2vw, 1.15rem); line-height: 1.45; }
.lore-copy blockquote { margin: 18px 0 0; padding: 12px 0 12px 15px; border-left: 4px solid var(--red); color: white; font: 900 clamp(1rem, 1.7vw, 1.7rem)/1 Impact, sans-serif; }
.slide-controls { position: absolute; left: 0; right: 0; bottom: 0; height: 42px; display: flex; align-items: center; justify-content: center; gap: 24px; }
.slide-controls button { height: 34px; padding: 0 14px; border: 1px solid #364158; background: #111725; font-size: 8px; font-weight: 900; letter-spacing: .1em; cursor: pointer; }
.slide-controls button:disabled { opacity: .3; cursor: not-allowed; }
.slide-controls span { color: #8b95a7; font-size: 8px; letter-spacing: .13em; }

.vault-grid { display: grid; grid-template-columns: .9fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; height: 100%; }
.vault-seal { grid-row: 1/3; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; color: #221300; background: var(--gold); border: 7px solid #8f5800; box-shadow: inset 0 0 0 3px #ffe991; }
.vault-seal::before { content: ""; position: absolute; width: 160%; aspect-ratio: 1; border: 2px dashed rgba(75,42,0,.35); border-radius: 50%; }
.vault-seal span { position: relative; font-size: 8px; font-weight: 900; letter-spacing: .15em; }
.vault-seal b { position: relative; font: 900 clamp(5rem, 10vw, 11rem)/.85 Impact, sans-serif; letter-spacing: -.06em; }
.vault-seal i { position: relative; font: 900 clamp(1.3rem, 2.3vw, 2.3rem)/1 Impact, sans-serif; font-style: normal; }
.vault-block,
.vault-launch { padding: clamp(15px, 2vw, 28px); border: 1px solid #2b3547; background: #0e1521; }
.vault-block > span,
.vault-launch > span { color: var(--red); font-size: 8px; font-weight: 900; letter-spacing: .15em; }
.vault-block dl { margin: 14px 0 0; }
.vault-block dl div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #273143; }
.vault-block dt { color: #7f899c; font-size: 8px; letter-spacing: .1em; }
.vault-block dd { margin: 0; color: white; font-size: 10px; font-weight: 900; }
.receipt p { margin: 16px 0 7px; color: #788398; font-size: 8px; letter-spacing: .12em; }
.receipt button { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; border: 1px dashed #4b566b; color: var(--gold); background: #080b12; font-family: monospace; cursor: pointer; }
.receipt button b { padding: 5px 7px; color: var(--ink); background: white; font: 900 8px/1 Arial, sans-serif; }
.vault-launch { display: flex; flex-direction: column; justify-content: space-between; background: var(--blue-dark); }
.vault-launch h3 { margin: 8px 0; font: 900 clamp(2rem, 3.8vw, 4rem)/1 Impact, sans-serif; }

.market-console { display: flex; flex-direction: column; height: 100%; background: #04070b; border: 1px solid #263247; }
.market-top { height: 48px; display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #263247; }
.market-top span { display: flex; align-items: center; justify-content: center; gap: 8px; color: #6f7e94; font-size: 8px; letter-spacing: .12em; border-right: 1px solid #263247; }
.market-top b { color: white; }
.fake-chart { position: relative; flex: 1; overflow: hidden; }
.chart-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(20,87,255,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(20,87,255,.13) 1px, transparent 1px); background-size: 8% 18%; }
.chart-line { position: absolute; left: 5%; right: 5%; bottom: 32%; height: 38%; border-top: 4px solid var(--red); transform: skewY(-6deg); filter: drop-shadow(0 0 8px var(--red)); clip-path: polygon(0 94%, 7% 82%, 13% 86%, 18% 60%, 29% 72%, 35% 22%, 45% 58%, 55% 44%, 62% 67%, 72% 25%, 82% 52%, 89% 9%, 100% 0, 100% 14%, 90% 23%, 84% 70%, 73% 43%, 64% 83%, 56% 59%, 44% 73%, 36% 42%, 30% 92%, 18% 78%, 12% 100%, 0 100%); background: linear-gradient(180deg, rgba(255,38,38,.55), transparent); opacity: .38; }
.market-message { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle, rgba(4,7,11,.8), rgba(4,7,11,.25) 55%, transparent); }
.market-message span { padding: 6px 9px; color: white; background: var(--red); font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.market-message h3 { margin: 12px 0 4px; font: 900 clamp(2.1rem, 5vw, 5.7rem)/.85 Impact, sans-serif; }
.market-message p { margin: 5px 0 0; color: #9ba6b9; font-size: clamp(.7rem, 1vw, 1rem); }
.market-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 11px; border-top: 1px solid #263247; }
.market-actions .action-button { min-width: 0; }

.mission-layout { display: grid; grid-template-columns: 130px 1fr; gap: 18px; height: 100%; }
.mission-tabs { display: grid; grid-template-rows: repeat(4, 1fr); gap: 6px; }
.mission-tabs button { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; border: 1px solid #293347; color: #69758a; background: #0d131e; cursor: pointer; }
.mission-tabs button.active { color: white; background: var(--blue); border-color: #7fa3ff; }
.mission-tabs span { font: 900 2rem/1 Impact, sans-serif; }
.mission-tabs b { font-size: 7px; letter-spacing: .14em; }
.mission-card { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 68px); overflow: hidden; color: #11131a; background: #ece9de; border: 10px solid #c8c3b6; box-shadow: inset 0 0 0 2px #7e786b; transform: rotate(.3deg); }
.mission-card::before { content: ""; position: absolute; inset: 0; opacity: .12; background-image: radial-gradient(#111 1px, transparent 1px); background-size: 8px 8px; }
.mission-card > * { position: relative; }
.status { position: absolute; top: 23px; right: 26px; padding: 8px 12px; color: white; background: #575e69; border: 3px double white; font-size: 9px; letter-spacing: .15em; transform: rotate(4deg); }
.status-live { background: var(--red); }
.mission-card > p { margin: 0 0 8px; color: var(--blue); font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.mission-card h3 { margin: 0; font: 900 clamp(3rem, 7.3vw, 8rem)/.82 Impact, sans-serif; letter-spacing: -.04em; }
.mission-card ul { max-width: 650px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 25px; margin: 25px 0 0; padding: 0; list-style: none; }
.mission-card li { display: flex; gap: 8px; align-items: center; font-size: clamp(.7rem, 1vw, 1rem); font-weight: 800; }
.mission-card li span { width: 10px; height: 10px; background: var(--red); transform: rotate(45deg); }
.mission-stamp { position: absolute; right: 5%; bottom: 7%; width: 95px; aspect-ratio: 1; display: grid; place-items: center; border: 5px double rgba(169,8,18,.6); border-radius: 50%; color: rgba(169,8,18,.65); text-align: center; font: 900 13px/1 Impact, sans-serif; transform: rotate(-12deg); }
.mobile-only { display: none; }

.crowd-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 80px); height: 100%; }
.crowd-count { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #15100a; background: var(--gold); border: 8px solid #9a5f00; clip-path: polygon(8% 0, 92% 0, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0 92%, 0 8%); }
.crowd-count span { font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.crowd-count b { font: 900 clamp(8rem, 17vw, 19rem)/.7 Impact, sans-serif; }
.crowd-count i { font-style: normal; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.crowd-copy { display: flex; flex-direction: column; justify-content: center; }
.crowd-copy h3 { margin: 0; font: 900 clamp(3rem, 6.5vw, 7.5rem)/.78 Impact, sans-serif; }
.crowd-copy p { max-width: 600px; color: #aeb7c7; line-height: 1.45; font-size: clamp(.75rem, 1vw, 1rem); }
.crowd-actions { display: flex; gap: 12px; margin-top: 12px; }

.buy-layout { position: relative; display: grid; grid-template-columns: 1.3fr .7fr; gap: 18px; height: 100%; padding-bottom: 58px; }
.buy-step { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 5vw, 78px); overflow: hidden; color: #12100b; background: var(--gold); border: 8px solid #a76b00; }
.buy-step > span { position: absolute; right: -2%; bottom: -15%; color: rgba(44,24,0,.12); font: 900 min(28vw, 25rem)/1 Impact, sans-serif; }
.buy-step p { position: relative; margin: 0; color: #8e1a00; font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.buy-step h3 { position: relative; max-width: 680px; margin: 11px 0; font: 900 clamp(3.1rem, 7.2vw, 8rem)/.8 Impact, sans-serif; }
.buy-step b { position: relative; max-width: 560px; font-size: clamp(.75rem, 1.15vw, 1.1rem); line-height: 1.45; }
.risk-ticket { align-self: center; padding: clamp(18px, 2.5vw, 32px); color: #10131b; background: #f1efe6; border-top: 10px solid var(--red); box-shadow: 9px 9px 0 #151a27; transform: rotate(1.5deg); }
.risk-ticket span { color: var(--red); font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.risk-ticket p { font-size: clamp(.75rem, 1vw, .95rem); line-height: 1.45; }
.risk-ticket button { width: 100%; padding: 12px 8px; overflow: hidden; border: 1px dashed #333; background: white; text-overflow: ellipsis; font-family: monospace; font-size: 10px; cursor: pointer; }

.modal-backdrop { position: absolute; inset: 0; z-index: 90; display: grid; place-items: center; padding: 18px; background: rgba(1,2,6,.84); }
.vault-modal { position: relative; width: min(680px, 95vw); min-height: min(560px, 82dvh); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 34px; overflow: hidden; text-align: center; background: #0a0f19; border: 2px solid #49566f; box-shadow: 0 24px 100px #000, inset 0 0 80px rgba(20,87,255,.12); }
.vault-wheel { position: absolute; width: min(410px, 68vw); aspect-ratio: 1; border: 16px double #263247; border-radius: 50%; opacity: .45; }
.vault-wheel::before { content: ""; position: absolute; inset: 20%; border: 5px solid #42506a; border-radius: 50%; }
.vault-wheel span { position: absolute; left: 50%; top: 50%; width: 45%; height: 7px; background: #36425a; transform-origin: left; }
.vault-wheel span:nth-child(2) { transform: rotate(90deg); }
.vault-wheel span:nth-child(3) { transform: rotate(180deg); }
.vault-wheel span:nth-child(4) { transform: rotate(270deg); }
.vault-modal > p,
.vault-modal > h3,
.vault-modal > b,
.vault-modal > div:last-child { position: relative; }
.vault-modal > p { color: var(--gold); font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.vault-modal > h3 { margin: 7px 0 14px; font: 900 clamp(3rem, 8vw, 6.4rem)/.8 Impact, sans-serif; text-shadow: 5px 5px 0 var(--red-dark); }
.vault-modal > b { max-width: 490px; color: #b1bac9; font-size: 12px; line-height: 1.45; }
.vault-modal > div:last-child { display: flex; gap: 12px; margin-top: 25px; }

.age-gate { position: absolute; inset: 0; z-index: 120; display: grid; place-items: center; padding: 18px; background: #03050a; }
.age-gate::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 44%, rgba(20,87,255,.33), transparent 34%), linear-gradient(120deg, transparent 49%, rgba(255,38,38,.15) 50%, transparent 51%); }
.age-stage { position: relative; width: min(860px, 95vw); display: grid; grid-template-columns: .65fr 1fr; grid-template-rows: auto auto auto auto; align-items: center; gap: 12px 36px; padding: clamp(25px, 5vw, 65px); border: 1px solid #2f3b51; background: #080d17; box-shadow: 0 0 0 9px #03050a, 0 0 0 10px #273247; }
.age-stage > p { grid-column: 1/3; margin: 0; color: var(--red); font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.age-number { grid-row: 2/5; grid-column: 1; color: var(--gold); font: 900 clamp(8rem, 18vw, 15rem)/.7 Impact, sans-serif; text-shadow: 8px 8px 0 #7c4100; }
.age-number span { font-size: .32em; vertical-align: top; }
.age-stage h2 { margin: 0; font: 900 clamp(3.3rem, 8vw, 7rem)/.76 Impact, sans-serif; }
.age-stage h2 em { color: var(--red); font-style: normal; }
.age-stage > b { color: #b6bfce; font-size: 12px; }
.age-stage > small { grid-column: 1/3; color: #727d91; font-size: 8px; line-height: 1.4; }

.confetti { position: absolute; inset: 0; z-index: 105; overflow: hidden; pointer-events: none; }
.confetti i { --x: calc((var(--i) * 37) % 100); position: absolute; top: -8%; left: calc(var(--x) * 1%); width: 9px; height: 18px; background: var(--gold); animation: confetti-fall 1.8s cubic-bezier(.2,.6,.35,1) both; animation-delay: calc((var(--i) % 7) * .04s); transform: rotate(calc(var(--i) * 21deg)); }
.confetti i:nth-child(3n) { background: var(--red); }
.confetti i:nth-child(3n + 1) { background: var(--blue); }
.secret-banner { position: absolute; z-index: 108; left: 50%; top: 14%; padding: 11px 22px; color: #15100a; background: var(--gold); border: 4px solid white; font: 900 clamp(1.5rem, 4vw, 4rem)/1 Impact, sans-serif; transform: translateX(-50%) rotate(-2deg); box-shadow: 9px 9px 0 var(--red); }

/* Beast Flip: an original candy-packaging world with chunky cards and sweet-shop color. */
.beast-flip-theme .hero-copy { color: var(--ink); }
.beast-flip-theme .coming-soon { color: #59433d; }
.beast-flip-theme .coming-soon b { color: var(--grape); }
.beast-flip-theme .topbar::after {
  content: "PICK A SIDE  •  FLIP THE BEAST  •  50/50 FOREVER  •  $BFLIP";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 22px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: white;
  background: var(--grape);
  border-bottom: 3px solid var(--ink);
  white-space: nowrap;
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: .16em;
}
.beast-flip-theme .scoreboard {
  clip-path: none;
  color: var(--ink);
  background: rgba(255,248,233,.95);
  border: 4px solid var(--ink);
  border-radius: 24px;
  box-shadow: 9px 10px 0 var(--grape), 0 26px 45px rgba(74,31,99,.2);
  opacity: .9;
}
.beast-flip-theme .scoreboard::before { border-color: var(--pink); border-radius: 15px; }
.beast-flip-theme .scoreboard span { color: var(--grape); font-weight: 1000; }
.beast-flip-theme .scoreboard b:first-of-type { color: var(--orange); }
.beast-flip-theme .scoreboard b:last-of-type { color: var(--blue); }
.beast-flip-theme .stage-floor {
  background:
    radial-gradient(ellipse, rgba(255,213,47,.6), transparent 24%),
    repeating-conic-gradient(from 0deg, rgba(101,52,143,.18) 0 8deg, transparent 8deg 16deg),
    #fff0b8;
  border: 5px solid var(--ink);
  box-shadow: inset 0 0 42px rgba(255,59,152,.25), 0 -15px 60px rgba(101,52,143,.18);
}
.beast-flip-theme .section-indicator { color: var(--ink); }
.beast-flip-theme .section-indicator span { color: var(--grape); }
.beast-flip-theme .section-indicator b { padding: 6px 9px; background: rgba(255,248,233,.86); border: 2px solid var(--ink); border-radius: 5px; }
.beast-flip-theme .host-caption { padding: 8px 11px; color: var(--ink); background: rgba(255,248,233,.9); border: 3px solid var(--ink); border-radius: 8px; box-shadow: 4px 4px 0 var(--pink); }
.beast-flip-theme .host-caption b { color: var(--orange); }
.beast-flip-theme .legal-strip { color: #e7d8ff; background: var(--grape); border-top: 3px solid var(--ink); }
.beast-flip-theme .legal-strip span { color: white; }
.beast-flip-theme .legal-strip button { color: var(--gold); }

.beast-flip-theme .show-menu {
  top: calc(clamp(65px, 8.5vh, 92px) + 22px);
  color: var(--ink);
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 18px;
  box-shadow: 10px 11px 0 var(--grape), 0 24px 60px rgba(45,21,58,.25);
  clip-path: none;
}
.beast-flip-theme .menu-title span { color: var(--orange); }
.beast-flip-theme .menu-grid button {
  color: var(--ink);
  background: white;
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 3px 4px 0 var(--ink);
}
.beast-flip-theme .menu-grid button:nth-child(3n + 1) { background: #fff2a6; }
.beast-flip-theme .menu-grid button:nth-child(3n + 2) { background: #cdf5ff; }
.beast-flip-theme .menu-grid button:nth-child(3n) { background: #ffd4e9; }
.beast-flip-theme .menu-grid button:hover { color: white; background: var(--grape); border-color: var(--ink); }
.beast-flip-theme .menu-grid button span { color: var(--orange); }
.beast-flip-theme .menu-grid kbd,
.beast-flip-theme .sound-board label { color: var(--muted); }

.beast-flip-theme .game-panel {
  top: calc(clamp(66px, 8.5vh, 92px) + 22px);
  color: var(--ink);
  background:
    radial-gradient(circle at 1px 1px, rgba(32,18,15,.12) 1px, transparent 1.5px),
    linear-gradient(120deg, rgba(255,255,255,.92), rgba(255,248,233,.97));
  background-size: 10px 10px, 100% 100%;
  border: 5px solid var(--ink);
  border-right: 0;
  box-shadow: -14px 15px 0 var(--grape), -35px 0 80px rgba(62,25,79,.25);
}
.beast-flip-theme .game-panel::before {
  background: linear-gradient(90deg, transparent 96%, rgba(101,52,143,.08) 96%), linear-gradient(0deg, transparent 93%, rgba(255,59,152,.08) 93%);
  background-size: 55px 100%, 100% 44px;
}
.beast-flip-theme .panel-rail { color: white; background: var(--pink); border-right: 6px solid var(--ink); }
.beast-flip-theme .panel-heading { border-bottom: 4px solid var(--ink); }
.beast-flip-theme .panel-heading h2 { color: var(--ink); text-shadow: 3px 3px 0 white; }
.beast-flip-theme .eyebrow { color: var(--orange); }
.beast-flip-theme .close-button span { color: var(--muted); }
.beast-flip-theme .close-button b { color: var(--ink); background: white; border: 3px solid var(--ink); border-radius: 7px; box-shadow: 3px 3px 0 var(--ink); }

.beast-flip-theme .chip-balance { border-bottom: 3px solid var(--ink); }
.beast-flip-theme .chip-balance span { color: var(--muted); }
.beast-flip-theme .chip-balance b { color: var(--grape); text-shadow: 2px 2px 0 white; }
.beast-flip-theme .chip-balance i { color: var(--ink); }
.beast-flip-theme .pick-row button {
  color: var(--ink);
  background: white;
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 5px 6px 0 var(--ink);
}
.beast-flip-theme .pick-row button:first-child { background: #fff2a6; }
.beast-flip-theme .pick-row button:last-child { background: #cdf5ff; }
.beast-flip-theme .pick-row button.active { color: white; background: var(--pink); border-color: var(--ink); box-shadow: 5px 6px 0 var(--ink), inset 0 -7px 0 rgba(100,0,45,.2); }
.beast-flip-theme .stake-control { color: var(--muted); background: white; border: 3px solid var(--ink); border-radius: 9px; }
.beast-flip-theme .stake-control input { color: var(--ink); background: #fff2a6; border: 2px solid var(--ink); border-radius: 5px; }
.beast-flip-theme .stake-control b { color: var(--ink); }
.beast-flip-theme .wallet-button { color: var(--ink); background: white; border: 3px solid var(--ink); border-radius: 8px; box-shadow: 3px 3px 0 var(--ink); }
.beast-flip-theme .wallet-button span { background: var(--pink); }
.beast-flip-theme .result-board { background: radial-gradient(circle at 50% 42%, #462258 0, #20120f 66%); border: 5px solid var(--ink); border-radius: 20px; box-shadow: 9px 10px 0 var(--orange), inset 0 0 70px rgba(105,221,245,.16); }

.beast-flip-theme .comic-frame { background: var(--sky); border-color: var(--ink); border-radius: 18px; box-shadow: 11px 12px 0 var(--pink); }
.beast-flip-theme .comic-frame::before { background: repeating-radial-gradient(circle at center, transparent 0 5px, rgba(32,18,15,.18) 6px 7px); }
.beast-flip-theme .comic-burst { background: var(--orange); }
.beast-flip-theme .lore-copy > span { color: var(--orange); }
.beast-flip-theme .lore-copy h3 { color: var(--ink); }
.beast-flip-theme .lore-copy p { color: #59433d; }
.beast-flip-theme .lore-copy blockquote { color: var(--grape); border-color: var(--pink); }
.beast-flip-theme .slide-controls button { color: var(--ink); background: white; border: 3px solid var(--ink); border-radius: 7px; box-shadow: 3px 3px 0 var(--ink); }
.beast-flip-theme .slide-controls span { color: var(--muted); }

.beast-flip-theme .vault-seal { color: var(--ink); background: var(--gold); border-color: var(--ink); border-radius: 24px; box-shadow: inset 0 0 0 3px #fff3a8, 8px 9px 0 var(--orange); }
.beast-flip-theme .vault-block,
.beast-flip-theme .vault-launch { color: var(--ink); background: white; border: 4px solid var(--ink); border-radius: 16px; box-shadow: 6px 7px 0 var(--grape); }
.beast-flip-theme .vault-launch { background: #cdf5ff; }
.beast-flip-theme .vault-block > span,
.beast-flip-theme .vault-launch > span { color: var(--orange); }
.beast-flip-theme .vault-block dl div { border-bottom: 2px solid #d7c8c0; }
.beast-flip-theme .vault-block dt,
.beast-flip-theme .receipt p { color: var(--muted); }
.beast-flip-theme .vault-block dd { color: var(--ink); }
.beast-flip-theme .receipt button { color: var(--grape); background: #fff2a6; border: 2px dashed var(--ink); border-radius: 7px; }

.beast-flip-theme .market-console { background: var(--paper); border: 4px solid var(--ink); border-radius: 18px; box-shadow: 9px 10px 0 var(--pink); }
.beast-flip-theme .market-top { border-color: var(--ink); }
.beast-flip-theme .market-top span { color: var(--muted); border-color: var(--ink); }
.beast-flip-theme .market-top b { color: var(--ink); }
.beast-flip-theme .fake-chart { background: #20120f; }
.beast-flip-theme .chart-grid { background-image: linear-gradient(rgba(105,221,245,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(105,221,245,.15) 1px, transparent 1px); }
.beast-flip-theme .market-message span { background: var(--orange); }
.beast-flip-theme .market-message h3 { color: white; }
.beast-flip-theme .market-actions { background: #cdf5ff; border-color: var(--ink); }

.beast-flip-theme .mission-tabs button { color: var(--ink); background: white; border: 3px solid var(--ink); border-radius: 10px; box-shadow: 3px 4px 0 var(--ink); }
.beast-flip-theme .mission-tabs button.active { color: white; background: var(--grape); border-color: var(--ink); }
.beast-flip-theme .mission-card { background: #fff8e9; border-color: var(--ink); border-radius: 22px; box-shadow: inset 0 0 0 2px #e6d7c6, 11px 12px 0 var(--orange); }
.beast-flip-theme .mission-card > p { color: var(--pink); }
.beast-flip-theme .status-live { background: var(--orange); }
.beast-flip-theme .mission-stamp { color: rgba(101,52,143,.7); border-color: rgba(101,52,143,.7); }

.beast-flip-theme .crowd-count { background: var(--gold); border-color: var(--ink); filter: drop-shadow(9px 10px 0 var(--orange)); }
.beast-flip-theme .crowd-copy h3 { color: var(--ink); }
.beast-flip-theme .crowd-copy p { color: #59433d; }
.beast-flip-theme .buy-step { background: var(--gold); border-color: var(--ink); border-radius: 22px; box-shadow: 10px 11px 0 var(--orange); }
.beast-flip-theme .risk-ticket { background: white; border: 4px solid var(--ink); border-top: 12px solid var(--pink); border-radius: 14px; box-shadow: 9px 10px 0 var(--grape); }

.beast-flip-theme .modal-backdrop { background: rgba(32,18,15,.72); }
.beast-flip-theme .vault-modal { color: var(--ink); background: var(--paper); border: 5px solid var(--ink); border-radius: 24px; box-shadow: 12px 14px 0 var(--pink), 0 24px 80px rgba(32,18,15,.35); }
.beast-flip-theme .vault-modal > b { color: #59433d; }
.beast-flip-theme .age-gate { color: var(--ink); background: var(--sky); }
.beast-flip-theme .age-gate::before { background: radial-gradient(circle at 50% 44%, rgba(255,255,255,.8), transparent 34%), repeating-radial-gradient(circle at 1px 1px, rgba(32,18,15,.12) 0 1px, transparent 1px 8px); }
.beast-flip-theme .age-stage { background: var(--paper); border: 5px solid var(--ink); border-radius: 26px; box-shadow: 12px 14px 0 var(--grape); }
.beast-flip-theme .age-number { color: var(--gold); -webkit-text-stroke: 4px var(--ink); text-shadow: 7px 8px 0 var(--orange); }
.beast-flip-theme .age-stage h2 { color: var(--ink); }
.beast-flip-theme .age-stage h2 em { color: var(--pink); text-shadow: 3px 3px 0 var(--ink); }
.beast-flip-theme .age-stage > b { color: #59433d; }
.beast-flip-theme .age-stage > small { color: var(--muted); }

/* The dopamine layer: comic reactions, tactile controls and hidden toys. */
.play-layer {
  position: absolute;
  inset: 0;
  z-index: 82;
  overflow: hidden;
  pointer-events: none;
}

.play-doodles i {
  position: absolute;
  color: rgba(255,255,255,.13);
  font-style: normal;
  font-size: clamp(15px, 2vw, 31px);
  text-shadow: 0 0 14px currentColor;
  animation: doodle-drift 7s ease-in-out infinite alternate;
}
.play-doodles i:nth-child(1) { left: 4%; top: 18%; color: rgba(255,201,40,.32); animation-delay: -1s; }
.play-doodles i:nth-child(2) { left: 24%; bottom: 10%; color: rgba(20,87,255,.35); animation-delay: -3s; }
.play-doodles i:nth-child(3) { right: 32%; top: 9%; color: rgba(255,38,38,.3); animation-delay: -5s; }
.play-doodles i:nth-child(4) { right: 7%; top: 43%; color: rgba(255,201,40,.25); animation-delay: -2s; }
.play-doodles i:nth-child(5) { left: 43%; bottom: 7%; color: rgba(255,38,38,.25); animation-delay: -4s; }
.play-doodles i:nth-child(6) { right: 20%; bottom: 20%; color: rgba(20,87,255,.3); animation-delay: -6s; }

.play-sticker {
  position: absolute;
  pointer-events: auto;
  border: 3px solid white;
  cursor: pointer;
  font: 900 clamp(.75rem, 1.4vw, 1.35rem)/1 Impact, sans-serif;
  letter-spacing: .035em;
  box-shadow: 5px 6px 0 #03050a;
  transition: filter .18s ease;
  animation: sticker-float 2.6s ease-in-out infinite alternate;
}
.play-sticker:hover { filter: brightness(1.22) saturate(1.2); animation: sticker-wiggle .38s ease-in-out infinite alternate; }
.play-sticker:active { box-shadow: 2px 2px 0 #03050a; }
.sticker-wow { left: 1.4%; top: 24%; padding: 10px 13px; color: #191000; background: var(--gold); transform: rotate(-9deg); }
.sticker-boom { right: 1.3%; top: 22%; padding: 10px 12px; color: white; background: var(--red); transform: rotate(8deg); animation-delay: -.8s; }
.sticker-star { right: 3.3%; bottom: 12%; width: 45px; aspect-ratio: 1; border-radius: 50%; color: #0c1732; background: #77a2ff; font-size: 1.7rem; transform: rotate(-6deg); animation-delay: -1.6s; }

.play-pop {
  position: absolute;
  width: 1px;
  height: 1px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.play-pop b {
  position: absolute;
  left: 0;
  top: 0;
  padding: 8px 12px;
  border: 3px solid white;
  color: white;
  background: var(--red);
  white-space: nowrap;
  font: 900 clamp(.78rem, 1.35vw, 1.25rem)/1 Impact, sans-serif;
  letter-spacing: .035em;
  box-shadow: 5px 5px 0 #03050a;
  animation: comic-pop .9s cubic-bezier(.18,1.45,.3,1) both;
}
.play-pop-blue b { background: var(--blue); transform: rotate(5deg); }
.play-pop-gold b { color: #191000; background: var(--gold); transform: rotate(-5deg); }
.play-pop-mega b { padding: 11px 17px; font-size: clamp(1rem, 2vw, 2rem); animation-duration: 1.25s; }
.play-pop i {
  --ray: 0deg;
  --reach: 45px;
  position: absolute;
  width: 7px;
  height: 18px;
  border-radius: 4px;
  background: var(--gold);
  transform-origin: 50% 0;
  animation: comic-ray .72s ease-out both;
  transform: rotate(var(--ray)) translateY(calc(var(--reach) * -1));
}
.play-pop i:nth-of-type(3n) { background: var(--blue); }
.play-pop i:nth-of-type(3n + 1) { background: var(--red); }

.play-layer.super-joy::before {
  content: "";
  position: absolute;
  inset: -30%;
  opacity: 0;
  background: conic-gradient(from 0deg, transparent, rgba(255,201,40,.22), transparent, rgba(20,87,255,.2), transparent, rgba(255,38,38,.2), transparent);
  animation: joy-kaleidoscope 2.4s ease-out;
}
.joy-ribbon {
  position: absolute;
  left: 50%;
  top: 16%;
  padding: 12px 22px;
  color: #181007;
  background: var(--gold);
  border: 5px solid white;
  box-shadow: 9px 9px 0 var(--red);
  font: 900 clamp(1.2rem, 3.4vw, 3.5rem)/1 Impact, sans-serif;
  letter-spacing: .04em;
  transform: translateX(-50%) rotate(-2deg);
  animation: ribbon-drop 2.4s cubic-bezier(.18,1.35,.4,1) both;
}

.casino-app button { -webkit-tap-highlight-color: transparent; }
.action-button:not(:disabled):hover { filter: brightness(1.1) saturate(1.08); animation: button-boing .42s cubic-bezier(.2,1.6,.4,1); }
.action-button:not(:disabled):active { transform: translateY(5px) scale(.98); box-shadow: inset 0 2px 0 rgba(255,255,255,.25), inset 0 -3px 0 rgba(0,0,0,.25), 0 3px 0 #03050a; }
.action-button:not(:disabled):hover span { animation: micro-wiggle .35s ease-in-out; }
.launch-button { animation: launch-breathe 1.8s ease-in-out infinite alternate; }
.launch-button:hover { animation: sticker-wiggle .3s ease-in-out infinite alternate; }
.panel-heading h2 { animation: title-arrival .55s cubic-bezier(.18,1.35,.4,1) both; }
.panel-rail span { animation: rail-bounce 1.8s ease-in-out infinite; }
.show-menu button:hover,
.mission-tabs button:hover,
.slide-controls button:hover { filter: brightness(1.2); transform: translateY(-2px) rotate(-.6deg); }
.show-menu button:hover b { color: var(--gold); }
.comic-frame:hover { animation: comic-wobble .5s ease-in-out; }
.comic-frame:hover .comic-burst { animation: burst-spin 1.4s ease-out; }
.vault-seal:hover { animation: vault-shine .6s cubic-bezier(.2,1.4,.4,1); }
.vault-seal:hover b { animation: micro-wiggle .35s ease-in-out; }
.receipt button:hover,
.risk-ticket button:hover { color: white; background: var(--blue); border-color: white; }
.fake-chart:hover .chart-line { opacity: .7; animation: chart-party .55s ease-in-out infinite alternate; }
.mission-card:hover .mission-stamp { animation: stamp-thump .55s cubic-bezier(.2,1.6,.4,1); }
.mission-card:hover li span { animation: list-spark .55s ease-in-out infinite alternate; }
.crowd-count:hover b { animation: crowd-boing .55s cubic-bezier(.2,1.6,.4,1); }
.buy-step:hover > span { animation: number-peek .7s cubic-bezier(.2,1.4,.4,1); }
.risk-ticket:hover { transform: rotate(-1deg) translateY(-4px); box-shadow: 13px 15px 0 #151a27; }
.vault-wheel { animation: wheel-turn 18s linear infinite; }

@keyframes doodle-drift { to { transform: translate(13px, -17px) rotate(25deg) scale(1.18); } }
@keyframes sticker-float { to { margin-top: -9px; filter: brightness(1.08); } }
@keyframes sticker-wiggle { from { rotate: -4deg; scale: 1.02; } to { rotate: 4deg; scale: 1.08; } }
@keyframes comic-pop { 0% { opacity: 0; scale: .25; rotate: -18deg; } 28% { opacity: 1; scale: 1.2; rotate: 5deg; } 72% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: .86; translate: 0 -35px; } }
@keyframes comic-ray { 0% { opacity: 0; scale: .2; } 24% { opacity: 1; } 100% { opacity: 0; scale: .3 1.6; } }
@keyframes joy-kaleidoscope { 0% { opacity: 0; rotate: 0; scale: .6; } 25% { opacity: 1; } 100% { opacity: 0; rotate: 150deg; scale: 1.4; } }
@keyframes ribbon-drop { 0% { opacity: 0; translate: 0 -80px; scale: .7; } 20% { opacity: 1; translate: 0 15px; scale: 1.08; } 75% { opacity: 1; translate: 0 0; scale: 1; } 100% { opacity: 0; translate: 0 -28px; scale: .95; } }
@keyframes button-boing { 45% { transform: translateY(-5px) scale(1.04, .97); } 70% { transform: translateY(-1px) scale(.99, 1.02); } }
@keyframes micro-wiggle { 33% { transform: rotate(-2deg) scale(1.04); } 66% { transform: rotate(2deg) scale(1.07); } }
@keyframes launch-breathe { to { filter: brightness(1.12); scale: 1.025; } }
@keyframes title-arrival { from { opacity: 0; translate: 25px 0; scale: .8 1.2; } }
@keyframes rail-bounce { 50% { transform: translateY(5px) rotate(-3deg); } }
@keyframes comic-wobble { 25% { transform: rotate(1.3deg) scale(1.01); } 55% { transform: rotate(-1.8deg) scale(1.015); } }
@keyframes burst-spin { to { transform: rotate(54deg) scale(1.12); } }
@keyframes vault-shine { 45% { transform: rotate(-4deg) scale(1.045); filter: brightness(1.22); } }
@keyframes chart-party { to { transform: skewY(-3deg) translateY(-5px); filter: drop-shadow(0 0 16px var(--gold)); } }
@keyframes stamp-thump { 45% { transform: rotate(-6deg) scale(1.35); } }
@keyframes list-spark { to { transform: rotate(90deg) scale(1.3); background: var(--blue); } }
@keyframes crowd-boing { 45% { transform: scale(1.18, .82) translateY(12px); } 70% { transform: scale(.92, 1.12) translateY(-8px); } }
@keyframes number-peek { 45% { transform: rotate(-4deg) scale(1.08); color: rgba(44,24,0,.2); } }
@keyframes wheel-turn { to { transform: rotate(360deg); } }
.secret-mode { animation: secret-flash .35s 3 alternate; }

@keyframes blink { to { opacity: .25; } }
@keyframes soundbar { to { height: 25%; } }
@keyframes confetti-fall { to { transform: translate3d(calc((var(--i) % 5 - 2) * 35px), 112dvh, 0) rotate(calc(var(--i) * 68deg)); } }
@keyframes secret-flash { to { filter: hue-rotate(40deg) brightness(1.25); } }

@media (max-width: 1050px) {
  .hero-copy { width: 48vw; left: 4vw; }
  .launch-button { left: 62%; }
  .game-panel { width: 87vw; }
  .arena-layout { grid-template-columns: .95fr 1.05fr; }
  .mission-card ul { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 760px) {
  .play-sticker { scale: .78; }
  .sticker-wow { left: auto; right: 2%; top: 35%; }
  .sticker-boom { right: 2%; top: 68%; }
  .sticker-star { left: 1%; right: auto; bottom: 7%; }
  .panel-is-open .play-sticker { opacity: .78; }
  .joy-ribbon { top: 12%; width: max-content; max-width: 88vw; text-align: center; }
  .play-pop-mega b { font-size: clamp(.9rem, 4.5vw, 1.45rem); }
  .casino-app { min-height: 480px; }
  .topbar { height: 64px; padding: 0 12px; }
  .brand-mbc { width: 38px; height: 38px; font-size: 12px; }
  .brand-name { font-size: .92rem; }
  .brand small { display: none; }
  .mini-link { display: none; }
  .sound-toggle { width: 38px; padding: 0; justify-content: center; }
  .sound-toggle b { display: none; }
  .menu-button { width: 66px; padding: 7px 8px; }
  .hero-copy { left: 17px; top: 43%; width: 73vw; transform: translateY(-50%); }
  .hero-copy h1 { font-size: clamp(3.3rem, 16vw, 6.3rem); line-height: .76; }
  .broadcast-kicker { margin-bottom: 8px; }
  .hero-sub { margin: 12px 0; font-size: .92rem; }
  .hero-actions { gap: 7px; }
  .hero-actions .action-button { min-width: 0; flex: 1; height: 47px; padding: 0 9px; font-size: 8px; }
  .hero-actions kbd { display: none; }
  .coming-soon { margin-top: 12px; }
  .three-stage { inset: 23% -32% 16% 12%; opacity: .9; }
  .scoreboard { top: 14%; left: 68%; width: 230px; height: 75px; }
  .launch-button { left: auto; right: 7%; bottom: 16%; width: 105px; }
  .camera { display: none; }
  .stage-floor { left: 5%; right: -28%; }
  .host-caption { display: none; }
  .section-indicator { left: 14px; bottom: 39px; }
  .legal-strip { height: 29px; padding: 0 12px; grid-template-columns: 1fr auto; gap: 6px; }
  .legal-strip b { display: none; }
  .show-menu { top: 63px; right: 8px; width: calc(100vw - 16px); max-height: calc(100dvh - 98px); padding: 13px; }
  .menu-title b { font-size: 1.1rem; }
  .menu-grid { gap: 3px; }
  .menu-grid button { min-height: 38px; grid-template-columns: 28px 1fr 20px; }
  .menu-grid button b { font-size: 9px; }
  .sound-board { margin-top: 9px; }
  .game-panel { top: 64px; bottom: 29px; width: 100vw; padding: 12px 13px 10px 49px; border-left: 0; }
  .panel-rail { width: 37px; border-right-width: 4px; }
  .panel-heading { height: 57px; }
  .panel-heading h2 { font-size: clamp(2rem, 9vw, 3.6rem); }
  .close-button span { display: none; }
  .close-button b { width: 32px; height: 32px; }
  .panel-content { height: calc(100% - 57px); padding-top: 9px; }
  .arena-layout { grid-template-columns: 1fr; gap: 8px; }
  .bet-console { justify-content: start; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; gap: 7px; }
  .chip-balance { grid-column: 1/2; align-self: stretch; }
  .chip-balance b { font-size: 2.2rem; }
  .pick-row { grid-column: 2/3; }
  .pick-row button { min-height: 62px; grid-template-columns: 1fr; gap: 2px; padding: 5px; }
  .coin-face { width: 31px; font-size: 1rem; }
  .pick-row b { font-size: .8rem; text-align: center; }
  .stake-control { grid-column: 1/3; height: 37px; }
  .bet-console > .action-button { grid-column: 1/2; height: 41px; min-width: 0; }
  .wallet-button { grid-column: 2/3; height: 41px; font-size: 7px; }
  .result-board { min-height: 0; }
  .result-label { top: 8%; }
  .result-big { font-size: clamp(3.2rem, 15vw, 6rem); }
  .stats-strip { bottom: 5%; }
  .lore-layout { grid-template-columns: 1fr; grid-template-rows: 55% 1fr; gap: 9px; padding-bottom: 43px; }
  .comic-frame { border-width: 4px; box-shadow: 6px 6px 0 var(--red); }
  .comic-frame > b { font-size: 3.4rem; }
  .lore-copy { justify-content: start; }
  .lore-copy h3 { margin: 6px 0; font-size: 2rem; }
  .lore-copy p { font-size: .7rem; line-height: 1.3; }
  .lore-copy blockquote { margin-top: 7px; padding: 6px 0 6px 9px; font-size: .78rem; }
  .slide-controls { height: 37px; gap: 12px; }
  .vault-grid { grid-template-columns: .8fr 1.2fr; grid-template-rows: 1fr 1fr 1fr; gap: 5px; }
  .vault-seal { grid-row: 1/4; border-width: 4px; }
  .vault-seal b { font-size: 4.8rem; }
  .vault-block,
  .vault-launch { padding: 10px; }
  .vault-block dl { margin-top: 5px; }
  .vault-block dl div { padding: 4px 0; }
  .receipt p { margin: 4px 0; }
  .receipt button { min-height: 34px; font-size: 8px; }
  .vault-launch h3 { margin: 3px 0; font-size: 1.5rem; }
  .vault-launch .action-button { height: 36px; min-width: 0; padding: 0 8px; font-size: 7px; }
  .market-top { height: 38px; }
  .market-top span { flex-direction: column; gap: 2px; font-size: 6px; }
  .market-message h3 { max-width: 360px; font-size: 2.7rem; }
  .market-actions { gap: 4px; padding: 6px; }
  .market-actions .action-button { height: 37px; padding: 0 4px; font-size: 6px; }
  .mission-layout { display: block; padding-bottom: 42px; }
  .mission-tabs { display: none; }
  .mission-card { height: 100%; padding: 24px; border-width: 6px; }
  .mission-card h3 { font-size: clamp(3.4rem, 14vw, 6rem); }
  .mission-card ul { margin-top: 16px; }
  .mission-card li { font-size: .7rem; }
  .mobile-only { display: flex; }
  .crowd-layout { grid-template-columns: .65fr 1.35fr; gap: 10px; }
  .crowd-count { border-width: 4px; }
  .crowd-count b { font-size: 6.8rem; }
  .crowd-count i { font-size: 6px; text-align: center; }
  .crowd-copy h3 { font-size: clamp(2.5rem, 11vw, 4.2rem); }
  .crowd-copy p { font-size: .67rem; }
  .crowd-actions { flex-direction: column; gap: 7px; }
  .crowd-actions .action-button { width: 100%; height: 38px; min-width: 0; }
  .buy-layout { grid-template-columns: 1fr; grid-template-rows: 1fr auto; gap: 7px; padding-bottom: 42px; }
  .buy-step { padding: 23px; border-width: 5px; }
  .buy-step h3 { font-size: clamp(3rem, 13vw, 5.4rem); }
  .risk-ticket { padding: 10px 13px; transform: none; }
  .risk-ticket p { margin: 6px 0; font-size: .65rem; }
  .risk-ticket button { padding: 6px; }
  .age-stage { grid-template-columns: .55fr 1fr; gap: 9px 20px; padding: 26px; }
  .age-number { font-size: 7rem; }
  .age-stage h2 { font-size: 3.4rem; }
  .age-stage .action-button { min-width: 0; }
  .vault-modal { min-height: min(500px, 82dvh); }
}

@media (max-width: 430px) {
  .play-sticker { scale: .67; }
  .sticker-wow { right: -1%; }
  .sticker-boom { right: -2%; }
  .sticker-star { left: -1%; }
  .hero-copy { width: calc(100vw - 34px); top: 41%; }
  .hero-copy h1 { font-size: clamp(3.2rem, 17.3vw, 4.7rem); }
  .hero-actions .action-button { font-size: 7px; }
  .coming-soon { font-size: 7px; }
  .launch-button { bottom: 14%; right: 5%; width: 92px; }
  .section-indicator b { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
  .panel-heading h2 { font-size: 2rem; }
  .arena-layout { grid-template-rows: auto 1fr; }
  .result-board > i { margin-top: 7px; }
  .stats-strip span { padding-top: 6px; font-size: 6px; }
  .vault-grid { grid-template-columns: .7fr 1.3fr; }
  .vault-seal b { font-size: 3.8rem; }
  .receipt button { font-size: 6px; }
  .crowd-layout { grid-template-columns: 1fr; grid-template-rows: 33% 1fr; }
  .crowd-count b { font-size: 4.3rem; }
  .crowd-copy { align-items: center; text-align: center; }
  .crowd-copy p { margin: 7px 0; }
  .crowd-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .age-stage { display: flex; flex-direction: column; align-items: stretch; gap: 9px; text-align: center; }
  .age-number { font-size: 6rem; }
  .age-stage h2 { font-size: 3rem; }
  .age-stage > small { font-size: 7px; }
  .vault-modal > div:last-child { flex-direction: column; width: 100%; }
}

@media (max-height: 650px) and (min-width: 761px) {
  .hero-copy { top: 48%; transform: translateY(-43%); }
  .hero-copy h1 { font-size: clamp(3.3rem, 6.8vw, 6.7rem); }
  .hero-sub { margin: 9px 0 10px; }
  .coming-soon { margin-top: 11px; }
  .game-panel { padding-top: 13px; padding-bottom: 10px; }
  .panel-heading { height: 58px; }
  .panel-content { height: calc(100% - 58px); padding-top: 9px; }
  .panel-heading h2 { font-size: 2.7rem; }
  .pick-row button { min-height: 66px; }
  .action-button { height: 43px; }
  .vault-modal { min-height: 440px; }
}

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