:root {
  color-scheme: dark;
  --obsidian: #020611;
  --obsidian-soft: #050b19;
  --navy-950: #061126;
  --navy-900: #081a36;
  --navy-800: #0b2850;
  --navy-700: #123b70;
  --marble: #eef7ff;
  --marble-blue: #bad1e8;
  --marble-shadow: #7592b1;
  --gold-deep: #704314;
  --gold-antique: #a87325;
  --gold: #d8ae4c;
  --gold-bright: #ffe29a;
  --gold-white: #fff5cd;
  --cyan: #56ddff;
  --cyan-bright: #c9f7ff;
  --cyan-deep: #087bad;
  --ruby-deep: #5f0c18;
  --ruby: #9e1b2b;
  --ruby-bright: #d64250;
  --white: #f8fbff;
  --muted: #b9cbe0;
  --line: rgb(216 174 76 / 58%);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-impact: cubic-bezier(0.2, 0.9, 0.25, 1);
  --shadow-deep: 0 22px 60px rgb(0 0 0 / 68%);
  --z-base: 0;
  --z-content: 10;
  --z-overlay: 100;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  background: var(--obsidian);
}

body {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 50% -12%, rgb(28 119 183 / 42%), transparent 32rem),
    radial-gradient(circle at 10% 46%, rgb(13 82 135 / 28%), transparent 28rem),
    radial-gradient(circle at 94% 44%, rgb(123 80 21 / 18%), transparent 24rem),
    linear-gradient(180deg, #07162f 0%, var(--obsidian-soft) 52%, #01030a 100%);
}

body::before,
body::after {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  content: "";
}

body::before {
  opacity: 0.36;
  background:
    linear-gradient(115deg, transparent 0 47%, rgb(86 221 255 / 18%) 48%, transparent 49% 100%),
    linear-gradient(69deg, transparent 0 55%, rgb(216 174 76 / 13%) 56%, transparent 57% 100%);
  background-size: 340px 480px, 420px 540px;
}

body::after {
  opacity: 0.18;
  background-image:
    radial-gradient(circle at 15% 20%, var(--cyan-bright) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 36%, var(--gold-bright) 0 1px, transparent 2px);
  background-size: 42px 42px, 58px 58px;
  mask-image: linear-gradient(to bottom, #000, transparent 76%);
}

button,
a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button,
a,
[tabindex] {
  outline-offset: 3px;
}

:focus-visible {
  outline: 3px solid var(--cyan-bright);
  box-shadow: 0 0 0 6px rgb(2 16 33 / 92%), 0 0 24px rgb(86 221 255 / 70%);
}

.download-notice[hidden] {
  display: none;
}

.download-notice {
  position: fixed;
  z-index: calc(var(--z-overlay) + 10);
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  left: max(10px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  width: min(480px, calc(100% - 20px));
  min-width: 0;
  max-width: 100%;
  max-height: calc(100dvh - 20px);
  margin-inline: auto;
  padding:
    max(11px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(11px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
  overflow-x: hidden;
  overflow-y: auto;
  overflow-wrap: anywhere;
  color: #f5fffb;
  border: 1px solid rgb(107 255 194 / 72%);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgb(11 72 65 / 97%), rgb(3 25 41 / 98%)),
    var(--navy-950);
  box-shadow:
    0 16px 42px rgb(0 0 0 / 58%),
    inset 0 0 24px rgb(86 255 190 / 10%);
  animation: download-notice-enter 280ms var(--ease-spring) both;
}

.download-notice[data-state="blocked"] {
  border-color: rgb(255 190 90 / 82%);
  background: linear-gradient(135deg, rgb(93 43 8 / 98%), rgb(25 18 24 / 98%));
}

.download-notice-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: #071d1b;
  border-radius: 50%;
  background: linear-gradient(145deg, #d4fff0, #5dffc2);
  box-shadow: 0 0 22px rgb(93 255 194 / 45%);
}

.download-notice-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.download-notice-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.download-notice-copy strong {
  color: #cffff0;
  font-size: clamp(0.72rem, 3.4vw, 0.88rem);
  font-weight: 1000;
  letter-spacing: 0.045em;
}

.download-notice-copy > span {
  color: #e5f5f2;
  font-size: clamp(0.72rem, 3.2vw, 0.84rem);
  line-height: 1.35;
}

@keyframes download-notice-enter {
  from {
    opacity: 0;
    transform: translateY(-18px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

button {
  font: inherit;
}

.site-shell {
  position: relative;
  z-index: var(--z-base);
  width: min(100%, 690px);
  min-width: 0;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding:
    0 max(10px, env(safe-area-inset-right))
    calc(24px + env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
  isolation: isolate;
}

.topbar {
  position: relative;
  z-index: var(--z-content);
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: max(5px, env(safe-area-inset-top)) 2px 4px;
}

.brand {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  color: var(--white);
  font-size: clamp(1.03rem, 5vw, 1.6rem);
  font-style: italic;
  font-weight: 950;
  letter-spacing: -0.06em;
  text-decoration: none;
  transition: filter 180ms ease, opacity 180ms ease, transform 120ms ease;
}

.logo-mark {
  position: relative;
  display: grid;
  min-width: 55px;
  height: 40px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--gold-bright);
  border-radius: 11px 11px 8px 8px;
  color: #111a2a;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 92%), transparent 34%),
    linear-gradient(160deg, var(--gold-white), var(--gold) 50%, var(--gold-deep));
  box-shadow:
    inset 0 1px var(--gold-white),
    inset 0 -5px 10px rgb(72 35 6 / 42%),
    0 5px 18px rgb(216 174 76 / 25%);
  font-size: 0.9rem;
  font-style: normal;
  letter-spacing: -0.055em;
  text-shadow: 0 1px rgb(255 255 255 / 52%);
}

.logo-mark::after {
  position: absolute;
  right: 6px;
  bottom: 3px;
  left: 6px;
  height: 2px;
  content: "";
  background: var(--navy-800);
  box-shadow: 0 -25px rgb(255 255 255 / 24%);
}

.wordmark {
  filter: drop-shadow(0 2px 8px rgb(0 0 0 / 72%));
}

.wordmark small {
  margin-left: 3px;
  color: var(--gold-bright);
  font-size: 0.43em;
  letter-spacing: 0;
}

.sound-toggle {
  display: inline-flex;
  min-width: 104px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid rgb(154 196 226 / 28%);
  border-radius: 999px;
  color: #c7d9e9;
  background:
    linear-gradient(180deg, rgb(12 27 46 / 94%), rgb(3 12 25 / 97%));
  box-shadow:
    inset 0 1px rgb(255 255 255 / 9%),
    inset 0 -4px 10px rgb(0 0 0 / 25%),
    0 3px 9px rgb(0 0 0 / 28%);
  cursor: pointer;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  white-space: nowrap;
  transition: border-color 180ms ease, filter 180ms ease, transform 120ms ease, opacity 180ms ease;
}

.sound-toggle[aria-pressed="false"],
.sound-toggle.is-muted {
  border-color: rgb(185 203 224 / 36%);
  color: #bdc7d3;
  background: linear-gradient(180deg, rgb(20 27 39 / 96%), rgb(8 12 21 / 98%));
}

.sound-icon,
.sound-icon svg {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
}

.sound-icon svg {
  fill: currentColor;
}

.sound-icon path + path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.creative-stage {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(216 174 76 / 72%);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgb(8 30 61 / 96%), rgb(2 9 22 / 98%) 48%, rgb(7 27 52 / 98%)),
    var(--navy-950);
  box-shadow:
    0 0 0 1px rgb(64 144 195 / 24%),
    var(--shadow-deep),
    0 0 42px rgb(26 156 218 / 17%),
    inset 0 1px rgb(255 245 205 / 16%);
  isolation: isolate;
}

.creative-stage::before,
.creative-stage::after {
  position: absolute;
  z-index: 3;
  right: 8%;
  left: 8%;
  height: 1px;
  pointer-events: none;
  content: "";
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  box-shadow: 0 0 14px rgb(216 174 76 / 72%);
}

.creative-stage::before {
  top: 0;
}

.creative-stage::after {
  bottom: 0;
}

.creative-picture,
.creative-picture img,
.creative-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.creative-picture {
  z-index: -2;
  overflow: hidden;
}

.creative-picture img {
  object-fit: cover;
  object-position: center 18%;
  opacity: 0.34;
  filter: saturate(0.82) contrast(1.22) brightness(0.58) hue-rotate(142deg);
  transform: scale(1.03);
}

.creative-shade {
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 7%, rgb(59 181 235 / 18%), transparent 36%),
    radial-gradient(ellipse at 50% 52%, transparent 8%, rgb(1 8 20 / 54%) 55%, rgb(1 5 14 / 92%) 100%),
    linear-gradient(180deg, rgb(4 17 38 / 12%), rgb(3 12 28 / 83%) 48%, rgb(1 6 16 / 97%));
}

.arena-content {
  position: relative;
  z-index: 2;
  display: grid;
  min-width: 0;
  gap: 4px;
  padding: 7px;
}

.creative-copy {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 3px;
  padding: 1px 5px 2px;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  min-height: 23px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 3px 10px;
  border: 1px solid rgb(216 174 76 / 42%);
  border-radius: 999px;
  color: var(--gold-bright);
  background: rgb(3 16 35 / 72%);
  box-shadow: inset 0 1px rgb(255 255 255 / 8%);
  font-size: clamp(0.55rem, 2.45vw, 0.72rem);
  font-weight: 900;
  letter-spacing: 0.11em;
}

.eyebrow svg {
  width: 14px;
  height: 14px;
  fill: var(--cyan-bright);
  filter: drop-shadow(0 0 5px var(--cyan));
}

.creative-copy h1 {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  margin: 0;
  line-height: 0.94;
  text-transform: uppercase;
}

.creative-copy h1 span {
  color: var(--white);
  font-size: clamp(1.08rem, 5.2vw, 1.7rem);
  font-style: italic;
  font-weight: 950;
  letter-spacing: -0.025em;
  text-shadow: 0 3px 12px rgb(0 0 0 / 88%);
}

.creative-copy h1 strong {
  color: var(--gold-bright);
  font-size: clamp(1.72rem, 8.2vw, 2.85rem);
  font-style: italic;
  font-weight: 1000;
  letter-spacing: -0.035em;
  text-shadow:
    0 2px 0 var(--gold-deep),
    0 5px 16px rgb(0 0 0 / 76%),
    0 0 18px rgb(216 174 76 / 26%);
}

.offer-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}

.offer-pills span {
  padding: 3px 9px;
  border: 1px solid rgb(86 221 255 / 31%);
  border-radius: 999px;
  color: #e4f8ff;
  background: rgb(7 34 64 / 82%);
  font-size: clamp(0.5rem, 2.1vw, 0.65rem);
  font-weight: 850;
  letter-spacing: 0.05em;
}

.conversion-strip {
  display: inline-flex;
  max-width: 100%;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 9px;
  border: 1px solid rgb(255 226 154 / 50%);
  border-radius: 999px;
  color: var(--white);
  background:
    linear-gradient(90deg, rgb(95 12 24 / 72%), rgb(8 54 92 / 78%), rgb(95 12 24 / 72%));
  box-shadow:
    inset 0 1px rgb(255 255 255 / 14%),
    0 0 16px rgb(86 221 255 / 18%);
  font-size: clamp(0.51rem, 2.12vw, 0.67rem);
  font-weight: 950;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.conversion-strip span {
  white-space: nowrap;
}

.conversion-strip i {
  width: 6px;
  height: 10px;
  background: var(--gold-bright);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  filter: drop-shadow(0 0 5px var(--gold));
}

.game-card {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  padding: 6px;
  border: 1px solid rgb(186 209 232 / 23%);
  border-radius: 19px;
  background:
    linear-gradient(180deg, rgb(8 29 58 / 88%), rgb(2 11 26 / 96%)),
    var(--navy-950);
  box-shadow: inset 0 1px rgb(255 255 255 / 8%), 0 12px 28px rgb(0 0 0 / 33%);
}

.game-heading {
  position: relative;
  z-index: 5;
  display: flex;
  min-height: 27px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 5px;
}

.game-heading p,
.game-heading h2 {
  margin: 0;
  white-space: nowrap;
}

.game-heading p {
  overflow: hidden;
  color: var(--cyan-bright);
  font-size: clamp(0.49rem, 2vw, 0.63rem);
  font-weight: 900;
  letter-spacing: 0.07em;
  text-overflow: ellipsis;
}

.game-heading h2 {
  overflow: hidden;
  color: var(--gold-bright);
  font-size: clamp(0.58rem, 2.5vw, 0.82rem);
  font-style: italic;
  font-weight: 950;
  letter-spacing: 0.035em;
  text-overflow: ellipsis;
  text-shadow: 0 2px 7px rgb(0 0 0 / 70%);
}

.slot-machine {
  position: relative;
  min-width: 0;
  min-height: 277px;
  overflow: hidden;
  padding: 47px 8px 8px;
  border: 2px solid var(--gold-antique);
  border-radius: 19px 19px 15px 15px;
  background:
    linear-gradient(90deg, rgb(238 247 255 / 16%), transparent 8% 92%, rgb(238 247 255 / 14%)),
    linear-gradient(180deg, #112f59 0%, #071933 39%, #040d1d 100%);
  box-shadow:
    0 0 0 1px rgb(255 226 154 / 40%),
    inset 0 0 0 3px rgb(4 11 24 / 84%),
    inset 0 0 34px rgb(3 7 18 / 84%),
    0 13px 28px rgb(0 0 0 / 56%),
    0 0 28px rgb(30 150 214 / 15%);
  isolation: isolate;
  transition: filter 240ms ease, box-shadow 240ms ease, transform 240ms var(--ease-spring);
}

.slot-machine::before,
.slot-machine::after {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  content: "";
}

.slot-machine::before {
  inset: 42px 3px 3px;
  border: 1px solid rgb(238 247 255 / 22%);
  border-radius: 13px;
  background:
    linear-gradient(104deg, transparent 24%, rgb(238 247 255 / 12%) 25%, transparent 27%),
    linear-gradient(76deg, transparent 72%, rgb(186 209 232 / 11%) 73%, transparent 75%);
  box-shadow: inset 0 0 0 2px rgb(112 67 20 / 48%);
}

.slot-machine::after {
  right: 28px;
  bottom: 4px;
  left: 28px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), var(--cyan), var(--gold-bright), transparent);
  box-shadow: 0 0 10px rgb(86 221 255 / 46%);
}

.lightning-rail {
  position: absolute;
  z-index: 5;
  top: 49px;
  bottom: 31px;
  width: 7px;
  pointer-events: none;
  opacity: 0.76;
  background:
    linear-gradient(112deg, transparent 0 16%, var(--cyan-bright) 17% 27%, transparent 28% 38%, var(--cyan) 39% 51%, transparent 52% 62%, var(--cyan-bright) 63% 74%, transparent 75%);
  background-size: 7px 28px;
  filter: drop-shadow(0 0 4px var(--cyan));
  clip-path: polygon(0 0, 100% 0, 45% 25%, 100% 44%, 35% 67%, 85% 100%, 0 100%, 42% 72%, 0 53%, 57% 31%);
}

.lightning-rail-left {
  left: 4px;
}

.lightning-rail-right {
  right: 4px;
  transform: scaleX(-1);
}

.machine-crown {
  position: absolute;
  z-index: 8;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--gold-antique);
  border-radius: 16px 16px 45% 45% / 16px 16px 10px 10px;
  background:
    linear-gradient(120deg, transparent 0 28%, rgb(255 255 255 / 25%) 30%, transparent 33%),
    linear-gradient(180deg, #f3dfad 0%, #b98631 38%, #704314 100%);
  box-shadow:
    inset 0 1px var(--gold-white),
    inset 0 -5px 10px rgb(70 38 5 / 43%),
    0 5px 16px rgb(0 0 0 / 54%);
}

.rune-charge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-inline: 11px;
  pointer-events: none;
}

.rune-charge i {
  width: 9px;
  height: 9px;
  border: 1px solid #dffaff;
  opacity: 0.55;
  background: #178dbd;
  box-shadow: inset 0 0 3px #fff, 0 0 6px var(--cyan);
  transform: rotate(45deg);
}

.rune-charge i:nth-child(3) {
  opacity: 0;
}

.machine-title {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 150px;
  min-height: 35px;
  padding: 2px 16px;
  border-inline: 1px solid rgb(255 245 205 / 56%);
  color: #0a1a31;
  background: linear-gradient(90deg, rgb(255 245 205 / 18%), rgb(255 245 205 / 68%), rgb(255 245 205 / 18%));
  text-shadow: 0 1px rgb(255 255 255 / 58%);
}

.machine-title svg {
  width: 19px;
  height: 19px;
  flex: none;
  fill: #087bad;
  filter: drop-shadow(0 1px #dffaff);
}

.machine-title b {
  font-size: 1rem;
  font-style: italic;
  font-weight: 1000;
  letter-spacing: -0.035em;
}

.machine-title small {
  padding-left: 5px;
  border-left: 1px solid rgb(8 26 49 / 40%);
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.zeus-guardian {
  position: absolute;
  z-index: 6;
  top: 55px;
  left: -11px;
  width: 116px;
  height: 190px;
  pointer-events: none;
  filter: drop-shadow(0 9px 9px rgb(0 0 0 / 72%));
  transform-origin: 50% 100%;
}

.guardian-storm,
.guardian-halo {
  position: absolute;
  pointer-events: none;
}

.guardian-storm {
  inset: 12px -12px 1px;
  opacity: 0.74;
  background:
    radial-gradient(circle at 50% 30%, rgb(201 247 255 / 82%) 0 1px, rgb(86 221 255 / 42%) 2px, transparent 20%),
    conic-gradient(from 25deg at 50% 48%, transparent 0 8%, rgb(86 221 255 / 38%) 9% 10%, transparent 11% 28%, rgb(216 174 76 / 28%) 29% 30%, transparent 31% 100%);
  filter: blur(1px) drop-shadow(0 0 12px var(--cyan-deep));
  mask-image: radial-gradient(ellipse, #000 12%, transparent 69%);
}

.guardian-halo {
  top: 1px;
  left: 50%;
  width: 94px;
  height: 94px;
  border: 2px solid rgb(216 174 76 / 70%);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 57%, rgb(216 174 76 / 28%) 58% 61%, transparent 62%),
    repeating-conic-gradient(from 0deg, rgb(86 221 255 / 34%) 0 1deg, transparent 1deg 30deg);
  box-shadow: 0 0 20px rgb(86 221 255 / 24%), inset 0 0 18px rgb(216 174 76 / 24%);
  opacity: 0.58;
  transform: translateX(-50%);
}

.guardian-art {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter:
    drop-shadow(0 0 1px var(--cyan-bright))
    drop-shadow(0 7px 8px rgb(0 0 0 / 75%));
  transform: scale(1.13);
}

.multiplier-badge {
  position: absolute;
  z-index: 7;
  top: 56px;
  right: 6px;
  display: grid;
  width: 78px;
  min-height: 58px;
  grid-template-rows: auto auto auto;
  gap: 1px;
  place-items: center;
  padding: 4px 5px;
  border: 2px solid var(--gold-bright);
  border-radius: 50% 50% 45% 45% / 58% 58% 42% 42%;
  color: var(--gold-white);
  background:
    radial-gradient(circle at 50% 28%, rgb(86 221 255 / 38%), transparent 35%),
    linear-gradient(180deg, #0d4f87, #071b3c 65%, #030a18);
  box-shadow:
    inset 0 0 0 2px var(--gold-deep),
    inset 0 0 16px rgb(86 221 255 / 28%),
    0 6px 15px rgb(0 0 0 / 58%),
    0 0 13px rgb(216 174 76 / 35%);
  text-align: center;
  transform: rotate(2deg);
}

.multiplier-badge b {
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
  font-style: italic;
  font-weight: 1000;
  line-height: 0.82;
  text-shadow: 0 2px 0 var(--gold-deep), 0 0 10px var(--cyan);
}

.multiplier-badge span {
  color: var(--marble);
  font-size: 0.38rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.08;
}

.multiplier-badge small {
  display: block;
  color: var(--cyan-bright);
  font-size: 0.34rem;
  font-weight: 950;
  letter-spacing: 0.055em;
  line-height: 1;
  white-space: nowrap;
}

.multiplier-badge[data-multiplier="1000"] b {
  font-size: clamp(0.88rem, 4vw, 1.36rem);
  letter-spacing: -0.055em;
}

.multiplier-badge.is-maxed {
  border-color: #fff;
  color: #fff;
  box-shadow:
    inset 0 0 0 2px var(--gold-deep),
    inset 0 0 22px rgb(86 221 255 / 62%),
    0 0 10px #fff,
    0 0 28px var(--cyan),
    0 8px 18px rgb(0 0 0 / 68%);
}

.reel-window {
  position: relative;
  z-index: 4;
  width: calc(100% - 76px);
  margin-left: 68px;
  overflow: hidden;
  padding: 5px;
  border: 2px solid var(--gold-antique);
  border-radius: 12px;
  background: #010816;
  box-shadow:
    0 0 0 1px var(--gold-bright),
    0 0 0 4px rgb(6 20 41 / 92%),
    0 9px 18px rgb(0 0 0 / 70%),
    inset 0 0 20px rgb(0 0 0 / 86%),
    0 0 18px rgb(86 221 255 / 15%);
  isolation: isolate;
}

.reel-depth,
.reel-flare,
.thunder-overload {
  position: absolute;
  pointer-events: none;
}

.reel-depth {
  z-index: 3;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgb(0 0 0 / 48%), transparent 13% 86%, rgb(0 0 0 / 56%)),
    linear-gradient(90deg, rgb(0 0 0 / 30%), transparent 9% 91%, rgb(0 0 0 / 36%));
  box-shadow: inset 0 0 14px rgb(0 0 0 / 82%);
}

.reel-flare {
  z-index: 5;
  inset: -40% 0;
  opacity: 0;
  background: linear-gradient(180deg, transparent 20%, rgb(201 247 255 / 8%) 39%, rgb(86 221 255 / 55%) 49%, rgb(255 255 255 / 62%) 50%, rgb(86 221 255 / 42%) 51%, transparent 66%);
  mix-blend-mode: screen;
  transform: translate3d(0, -65%, 0);
}

.reel-reveal[hidden] {
  display: none;
}

.reel-reveal {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: grid;
  min-width: 0;
  min-height: 54px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: inherit;
  color: transparent;
  text-align: center;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
}

.reel-reveal span,
.reel-reveal strong,
.reel-reveal small {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.reel-reveal span {
  color: var(--cyan);
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1.1;
}

.reel-reveal strong {
  color: #fff4b0;
  font-size: clamp(0.72rem, 3.2vw, 1rem);
  line-height: 1.12;
  text-shadow: 0 0 12px rgb(216 174 76 / 72%);
}

.reel-reveal small {
  color: rgb(227 237 255 / 82%);
  font-size: clamp(0.52rem, 2.2vw, 0.66rem);
  font-weight: 760;
  line-height: 1.2;
}

.reel-reveal:not(:disabled):active {
  transform: scale(0.985);
}

.symbol-grid {
  position: relative;
  z-index: 2;
  display: grid;
  width: 100%;
  aspect-ratio: 1.34 / 1;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
  transform: translateZ(0);
}

.symbol {
  position: relative;
  display: grid;
  min-width: 0;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(101 166 209 / 44%);
  border-radius: 5px;
  background:
    radial-gradient(circle at 50% 42%, rgb(23 92 143 / 42%), transparent 59%),
    linear-gradient(155deg, #0c2a51 0%, #04152d 52%, #020917 100%);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 14%),
    inset 0 -5px 10px rgb(0 0 0 / 42%),
    0 1px 3px rgb(0 0 0 / 60%);
  transform: translateZ(0);
  transition: border-color 180ms ease, filter 180ms ease, transform 180ms var(--ease-spring);
}

.symbol::before {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.52;
  background:
    linear-gradient(142deg, rgb(255 255 255 / 19%), transparent 24%),
    linear-gradient(90deg, transparent, rgb(86 221 255 / 7%), transparent);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 4%);
}

.symbol::after {
  position: absolute;
  z-index: 4;
  top: -28%;
  bottom: -28%;
  left: -70%;
  width: 38%;
  pointer-events: none;
  content: "";
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 78%), transparent);
  transform: skewX(-18deg);
}

.symbol-art {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("./assets/slots/zeus-symbols-atlas-v3.png?v=9ea0fd8afde3cc2d");
  background-image: -webkit-image-set(
    url("./assets/slots/zeus-symbols-atlas-v3.webp?v=c62f3a40708d86d1") 1x,
    url("./assets/slots/zeus-symbols-atlas-v3.png?v=9ea0fd8afde3cc2d") 1x
  );
  background-image: image-set(
    url("./assets/slots/zeus-symbols-atlas-v3.webp?v=c62f3a40708d86d1") type("image/webp"),
    url("./assets/slots/zeus-symbols-atlas-v3.png?v=9ea0fd8afde3cc2d") type("image/png")
  );
  background-repeat: no-repeat;
  background-position-y: center;
  background-size: 600% 100%;
  filter:
    drop-shadow(0 4px 3px rgb(0 0 0 / 85%))
    drop-shadow(0 0 4px rgb(86 221 255 / 28%));
  transform: scale(1.04);
  transform-origin: center;
}

.symbol[data-symbol="zeus"] .symbol-art,
.symbol-zeus .symbol-art {
  background-position-x: 0%;
  transform: scale(1.1);
}

.symbol[data-symbol="bolt"] .symbol-art,
.symbol-bolt .symbol-art {
  background-position-x: 20%;
}

.symbol[data-symbol="crown"] .symbol-art,
.symbol-crown .symbol-art {
  background-position-x: 40%;
}

.symbol[data-symbol="gem"] .symbol-art,
.symbol-gem .symbol-art {
  background-position-x: 60%;
}

.symbol[data-symbol="hourglass"] .symbol-art,
.symbol-hourglass .symbol-art,
.symbol-coin .symbol-art,
.symbol-chalice .symbol-art {
  background-position-x: 80%;
}

.symbol[data-symbol="pegasus"] .symbol-art,
.symbol-pegasus .symbol-art,
.symbol-trident .symbol-art {
  background-position-x: 100%;
}

.symbol > svg {
  position: relative;
  z-index: 2;
  width: 70%;
  height: 70%;
  overflow: visible;
  fill: currentcolor;
  filter: drop-shadow(0 4px 2px rgb(0 0 0 / 75%));
  stroke: var(--gold-bright);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.2;
}

.symbol small {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.symbol-zeus { color: var(--marble); }
.symbol-bolt { color: var(--cyan-bright); }
.symbol-crown { color: var(--gold-bright); }
.symbol-gem { color: #6beaff; }
.symbol-chalice { color: var(--gold); }
.symbol-hourglass { color: #b9cfff; }

.machine-status {
  position: relative;
  z-index: 7;
  display: flex;
  min-height: 27px;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 7px;
  padding: 5px 8px;
  border: 1px solid rgb(216 174 76 / 42%);
  border-radius: 8px;
  color: var(--gold-bright);
  background: linear-gradient(180deg, rgb(4 22 44 / 96%), rgb(2 11 24 / 98%));
  box-shadow: inset 0 1px rgb(255 255 255 / 7%);
  font-size: clamp(0.49rem, 2.05vw, 0.64rem);
  font-weight: 900;
  letter-spacing: 0.035em;
}

.machine-status > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-indicator {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  color: var(--cyan-bright);
  font-size: 0.47rem;
  white-space: nowrap;
}

.status-indicator i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

.spin-button,
.final-cta {
  position: relative;
  display: inline-flex;
  width: 100%;
  min-width: 0;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  overflow: hidden;
  border: 1px solid var(--gold-bright);
  border-radius: 13px;
  color: var(--white);
  background:
    linear-gradient(180deg, var(--ruby-bright) 0%, var(--ruby) 46%, var(--ruby-deep) 100%);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 28%),
    inset 0 -7px 13px rgb(35 0 5 / 34%),
    0 7px 16px rgb(0 0 0 / 48%),
    0 0 17px rgb(158 27 43 / 30%);
  cursor: pointer;
  font-size: clamp(0.82rem, 3.7vw, 1.05rem);
  font-style: italic;
  font-weight: 950;
  letter-spacing: 0.025em;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 2px 4px rgb(42 0 6 / 84%);
  transition: filter 180ms ease, box-shadow 180ms ease, transform 120ms ease;
}

.spin-button {
  min-height: 72px;
  border-width: 2px;
  border-color: #fff0a8;
  background:
    linear-gradient(180deg, #fff477 0%, #ffc400 38%, #ff7200 100%);
  box-shadow:
    inset 0 2px rgb(255 255 255 / 82%),
    inset 0 -8px 14px rgb(106 35 0 / 35%),
    0 10px 24px rgb(0 0 0 / 58%),
    0 0 22px rgb(255 196 0 / 68%),
    0 0 42px rgb(255 96 0 / 44%);
}

.spin-button:not(:disabled) {
  animation: cta-pulse 1.55s ease-in-out 500ms infinite;
}

.spin-button:not(:disabled)::before {
  animation: button-shine 1.9s ease-in-out 450ms infinite;
}

.spin-button::before,
.final-cta::before {
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: -28%;
  width: 18%;
  pointer-events: none;
  content: "";
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 70%), transparent);
  transform: skewX(-18deg);
  animation: button-shine 2.7s ease-in-out 2;
}

.spin-button::after {
  position: absolute;
  inset: 4px;
  border: 1px solid rgb(255 255 255 / 17%);
  border-radius: 9px;
  pointer-events: none;
  content: "";
}

.spin-icon {
  position: relative;
  z-index: 2;
  display: grid;
  width: 30px;
  height: 30px;
  flex: none;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 38%);
  border-radius: 50%;
  background: rgb(48 1 8 / 22%);
}

.spin-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.1;
}

.spin-button > span:last-child,
.final-cta > * {
  position: relative;
  z-index: 2;
}

.spin-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
  justify-items: center;
  line-height: 1.05;
}

.spin-copy strong {
  font-size: clamp(0.82rem, 3.55vw, 1.03rem);
  font-weight: 950;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.spin-copy small {
  color: #ffe7b0;
  font-size: clamp(0.48rem, 1.85vw, 0.6rem);
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0.075em;
}

.spin-button:disabled {
  animation: none;
  cursor: wait;
  filter: saturate(0.6) brightness(0.72);
  opacity: 0.82;
}

.game-card[data-phase="ready"] .reel-window {
  animation: idle-reel-charge 2.4s ease-in-out 3;
}

.game-hint {
  min-height: 15px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.46rem, 1.9vw, 0.6rem);
  font-weight: 750;
  letter-spacing: 0.055em;
  line-height: 1.35;
  text-align: center;
}

.slot-machine.is-spinning {
  animation: cabinet-impact 90ms linear 16;
  box-shadow:
    0 0 0 1px var(--gold-bright),
    inset 0 0 36px rgb(6 77 123 / 42%),
    0 13px 28px rgb(0 0 0 / 56%),
    0 0 32px rgb(86 221 255 / 32%);
}

.is-spinning .symbol-grid {
  animation: reel-rush 82ms linear infinite;
}

.is-spinning .symbol {
  animation: reel-cell-flash 108ms steps(2, jump-none) infinite alternate;
}

.is-spinning .symbol::after {
  opacity: 0.44;
  animation: symbol-glint 360ms ease-in-out infinite;
}

.is-spinning .symbol:nth-child(5n) {
  animation-delay: -45ms;
}

.is-spinning .symbol-art {
  filter: blur(1.4px) brightness(1.25) drop-shadow(0 0 5px var(--cyan));
}

.is-spinning .reel-flare {
  animation: reel-scan 420ms linear infinite;
}

.is-spinning .lightning-rail {
  opacity: 1;
  animation: rail-charge 120ms steps(2, jump-none) infinite alternate;
}

.is-spinning .rune-charge i {
  animation: rune-charge 310ms ease-in-out infinite alternate;
}

.is-spinning .rune-charge i:nth-child(2) { animation-delay: 70ms; }
.is-spinning .rune-charge i:nth-child(4) { animation-delay: 140ms; }
.is-spinning .rune-charge i:nth-child(5) { animation-delay: 210ms; }

.slot-machine.is-win {
  animation: winner-pulse 280ms ease-in-out 4 alternate;
  border-color: var(--gold-bright);
  box-shadow:
    0 0 0 2px var(--gold-bright),
    inset 0 0 42px rgb(216 174 76 / 28%),
    0 0 42px rgb(216 174 76 / 56%),
    0 18px 34px rgb(0 0 0 / 62%);
}

.slot-machine.is-win .multiplier-badge {
  animation: multiplier-hit 270ms var(--ease-impact) 4 alternate;
}

.slot-machine.is-win .guardian-art {
  animation: guardian-hit 260ms var(--ease-impact) 3 alternate;
}

.is-win .symbol[data-winning="true"] {
  z-index: 9;
  border-color: var(--gold-bright);
  animation: cell-destruction 620ms var(--ease-impact) var(--impact-delay) both;
  box-shadow:
    inset 0 0 18px rgb(86 221 255 / 62%),
    0 0 10px #fff,
    0 0 18px rgb(86 221 255 / 82%);
}

.is-win .symbol[data-winning="true"]::before {
  animation: cell-crack-flash 620ms var(--ease-impact) var(--impact-delay) both;
}

.is-win .symbol[data-winning="true"] .symbol-art {
  animation: symbol-vaporize 620ms var(--ease-impact) var(--impact-delay) both;
}

.symbol[data-impact-order="0"] { --impact-delay: 0ms; }
.symbol[data-impact-order="1"] { --impact-delay: 24ms; }
.symbol[data-impact-order="2"] { --impact-delay: 48ms; }
.symbol[data-impact-order="3"] { --impact-delay: 72ms; }
.symbol[data-impact-order="4"] { --impact-delay: 96ms; }
.symbol[data-impact-order="5"] { --impact-delay: 120ms; }
.symbol[data-impact-order="6"] { --impact-delay: 144ms; }
.symbol[data-impact-order="7"] { --impact-delay: 168ms; }
.symbol[data-impact-order="8"] { --impact-delay: 192ms; }
.symbol[data-impact-order="9"] { --impact-delay: 216ms; }
.symbol[data-impact-order="10"] { --impact-delay: 240ms; }
.symbol[data-impact-order="11"] { --impact-delay: 264ms; }
.symbol[data-impact-order="12"] { --impact-delay: 288ms; }

.cell-impact,
.cell-flash,
.cell-lightning,
.cell-branch-bolt,
.cell-thunder-flash,
.cell-ground-crack,
.cell-shockwave,
.cell-impact-core,
.cell-sparks,
.cell-debris,
.cell-sparks i,
.cell-debris i {
  position: absolute;
  pointer-events: none;
}

.cell-impact {
  z-index: 12;
  inset: -26%;
  overflow: visible;
  mix-blend-mode: screen;
}

.cell-flash {
  z-index: 1;
  inset: -20%;
  border-radius: 22%;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 7%, var(--cyan-bright) 16%, rgb(86 221 255 / 72%) 32%, transparent 71%),
    radial-gradient(circle, rgb(255 255 255 / 48%), transparent 62%);
  filter: blur(1px) saturate(1.28);
  transform: scale(0.14);
}

.cell-branch-bolt {
  z-index: 6;
  inset: -46%;
  opacity: 0;
  background:
    linear-gradient(123deg, transparent 42%, #fff 43% 46%, var(--cyan-bright) 47% 49%, transparent 50%),
    linear-gradient(36deg, transparent 47%, var(--cyan) 48% 51%, #fff 52% 54%, transparent 55%);
  filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 12px var(--cyan));
  clip-path: polygon(49% 0, 63% 0, 58% 30%, 83% 25%, 60% 54%, 70% 52%, 35% 100%, 46% 63%, 19% 71%, 42% 39%);
  transform: rotate(-9deg) scale(0.08);
  transform-origin: 50% 50%;
}

.cell-branch-bolt::before,
.cell-branch-bolt::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background: inherit;
  filter: inherit;
  clip-path: inherit;
}

.cell-branch-bolt::before {
  transform: rotate(61deg) scale(0.78);
}

.cell-branch-bolt::after {
  transform: rotate(-58deg) scale(0.64);
}

.cell-impact-core {
  z-index: 7;
  inset: 26%;
  border: 1px solid rgb(255 255 255 / 92%);
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, #fff 0 12%, var(--cyan-bright) 19%, var(--cyan) 38%, transparent 73%);
  box-shadow:
    0 0 5px #fff,
    0 0 14px var(--cyan-bright),
    0 0 28px var(--cyan),
    inset 0 0 9px #fff;
  transform: scale(0.1);
}

.cell-thunder-flash {
  z-index: 8;
  inset: -18%;
  border-radius: 24%;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 45%, #fff 0 8%, var(--cyan-bright) 13% 25%, transparent 56%),
    linear-gradient(115deg, transparent 36%, rgb(255 255 255 / 90%) 42% 47%, transparent 53%),
    linear-gradient(62deg, transparent 38%, rgb(86 221 255 / 82%) 44% 48%, transparent 55%);
  filter: blur(0.4px) drop-shadow(0 0 11px var(--cyan-bright));
  transform: scale(0.18) rotate(-4deg);
}

.cell-ground-crack {
  z-index: 2;
  inset: 8%;
  opacity: 0;
  background:
    linear-gradient(24deg, transparent 42%, rgb(255 255 255 / 92%) 44% 46%, var(--cyan) 47% 49%, transparent 51%),
    linear-gradient(112deg, transparent 37%, rgb(201 247 255 / 88%) 39% 41%, transparent 43%),
    linear-gradient(154deg, transparent 55%, rgb(86 221 255 / 70%) 57% 59%, transparent 61%),
    radial-gradient(circle, transparent 21%, rgb(0 7 20 / 72%) 70%);
  filter: drop-shadow(0 0 6px var(--cyan-bright));
  clip-path: circle(7% at 50% 50%);
}

.cell-lightning {
  z-index: 4;
  top: -62%;
  left: 50%;
  width: 12%;
  height: 158%;
  opacity: 0;
  background: linear-gradient(180deg, #fff, var(--cyan-bright) 44%, var(--cyan));
  box-shadow: 0 0 5px #fff, 0 0 12px var(--cyan), 0 0 22px var(--cyan);
  clip-path: polygon(34% 0, 100% 0, 60% 38%, 92% 40%, 22% 100%, 43% 57%, 0 54%);
  transform: translateX(-50%) rotate(-7deg) scaleY(0.08);
  transform-origin: 50% 0;
}

.cell-shockwave {
  z-index: 3;
  inset: 29%;
  border: 2px solid #fff;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 7px #fff, 0 0 15px var(--cyan), inset 0 0 8px var(--cyan);
}

.cell-sparks,
.cell-debris {
  z-index: 5;
  inset: 50%;
  overflow: visible;
}

.cell-sparks i,
.cell-debris i {
  top: 0;
  left: 0;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.cell-sparks i {
  width: 3px;
  height: 14px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 5px #fff, 0 0 9px var(--cyan);
}

.cell-sparks i:nth-child(1) { --spark-x: -28px; --spark-y: -22px; --spark-r: -46deg; }
.cell-sparks i:nth-child(2) { --spark-x: 29px; --spark-y: -18px; --spark-r: 52deg; }
.cell-sparks i:nth-child(3) { --spark-x: -23px; --spark-y: 26px; --spark-r: -128deg; }
.cell-sparks i:nth-child(4) { --spark-x: 27px; --spark-y: 25px; --spark-r: 132deg; }
.cell-sparks i:nth-child(5) { --spark-x: -38px; --spark-y: 4px; --spark-r: -82deg; }
.cell-sparks i:nth-child(6) { --spark-x: 38px; --spark-y: 7px; --spark-r: 84deg; }

.cell-debris i {
  width: 8px;
  height: 6px;
  background: linear-gradient(145deg, var(--gold-white), var(--gold-deep));
  box-shadow: 0 0 5px rgb(216 174 76 / 88%);
  clip-path: polygon(15% 0, 100% 16%, 76% 100%, 0 72%);
}

.cell-debris i:nth-child(1) { --debris-x: -30px; --debris-y: -17px; --debris-r: -130deg; }
.cell-debris i:nth-child(2) { --debris-x: 32px; --debris-y: -12px; --debris-r: 150deg; }
.cell-debris i:nth-child(3) { --debris-x: -25px; --debris-y: 28px; --debris-r: -210deg; }
.cell-debris i:nth-child(4) { --debris-x: 28px; --debris-y: 30px; --debris-r: 230deg; }
.cell-debris i:nth-child(5) { --debris-x: -42px; --debris-y: 8px; --debris-r: -270deg; }
.cell-debris i:nth-child(6) { --debris-x: 41px; --debris-y: 6px; --debris-r: 278deg; }

.is-win .cell-lightning {
  animation: cell-lightning-strike 320ms var(--ease-impact) var(--impact-delay) both;
}

.is-win .cell-flash {
  animation: cell-overcharge 390ms var(--ease-impact) var(--impact-delay) both;
}

.is-win .cell-branch-bolt {
  animation: cell-branch-strike 440ms var(--ease-impact) calc(var(--impact-delay) + 12ms) both;
}

.is-win .cell-shockwave {
  animation: cell-shockwave-burst 470ms ease-out calc(var(--impact-delay) + 66ms) both;
}

.is-win .cell-impact-core {
  animation: cell-core-burst 430ms var(--ease-impact) calc(var(--impact-delay) + 20ms) both;
}

.is-win .cell-thunder-flash {
  animation: cell-thunder-flash 360ms var(--ease-impact) calc(var(--impact-delay) + 4ms) both;
}

.is-win .cell-ground-crack {
  animation: cell-ground-crack 540ms steps(4, end) calc(var(--impact-delay) + 42ms) both;
}

.is-win .cell-sparks i {
  animation: cell-spark-flight 520ms ease-out calc(var(--impact-delay) + 72ms) both;
}

.is-win .cell-debris i {
  animation: cell-debris-flight 600ms ease-out calc(var(--impact-delay) + 82ms) both;
}

.thunder-overload {
  z-index: 10;
  inset: 0;
  display: none;
  overflow: hidden;
}

.is-win .thunder-overload {
  display: block;
}

.thunder-overload i {
  position: absolute;
  top: -20%;
  left: 25%;
  width: 5px;
  height: 145%;
  opacity: 0;
  background: #fff;
  box-shadow: 0 0 8px #fff, 0 0 18px var(--cyan);
  clip-path: polygon(0 0, 100% 0, 56% 39%, 100% 42%, 32% 100%, 48% 55%, 0 52%);
  transform: rotate(17deg);
  animation: overload-strike 900ms ease-out both;
}

.thunder-overload i:nth-child(2) {
  left: 54%;
  animation-delay: 90ms;
  transform: rotate(-12deg);
}

.thunder-overload i:nth-child(3) {
  left: 78%;
  animation-delay: 170ms;
  transform: rotate(9deg);
}

.trust-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0 0;
}

.trust-row span {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 4px;
  border: 1px solid rgb(86 221 255 / 21%);
  border-radius: 10px;
  color: #d7e9f7;
  background: rgb(4 17 35 / 76%);
  font-size: clamp(0.58rem, 2.45vw, 0.72rem);
  font-weight: 750;
  text-align: center;
}

.trust-row svg {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: var(--cyan);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.game-catalog {
  min-width: 0;
  margin-top: 8px;
  padding: clamp(13px, 3.2vw, 18px);
  overflow: hidden;
  border: 1px solid rgb(216 174 76 / 42%);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgb(86 221 255 / 13%), transparent 45%),
    linear-gradient(145deg, rgb(8 26 54 / 92%), rgb(2 10 24 / 94%));
  box-shadow:
    inset 0 1px rgb(255 245 205 / 10%),
    0 12px 28px rgb(0 0 0 / 24%);
  text-align: center;
}

.game-catalog h2 {
  margin: 0;
  color: var(--gold-white);
  font-size: clamp(0.88rem, 3.4vw, 1.08rem);
  letter-spacing: 0.08em;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.game-catalog-intro {
  max-width: 34rem;
  margin: 5px auto 0;
  color: var(--marble-blue);
  font-size: clamp(0.75rem, 2.8vw, 0.84rem);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.game-catalog-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 1.8vw, 10px);
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.game-catalog-list li {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-rows: auto 1fr;
  gap: 6px;
  align-content: start;
  padding: 4px 4px 8px;
  overflow: hidden;
  border: 1px solid rgb(216 174 76 / 30%);
  border-radius: 11px;
  color: #e9f7ff;
  background: linear-gradient(180deg, rgb(16 42 71 / 94%), rgb(4 15 31 / 98%));
  box-shadow:
    inset 0 1px rgb(255 255 255 / 8%),
    0 6px 14px rgb(0 0 0 / 26%);
  font-size: clamp(0.52rem, 1.9vw, 0.72rem);
  letter-spacing: 0.025em;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-align: center;
}

.game-catalog-list img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 7px;
  object-fit: cover;
  object-position: center;
  box-shadow: 0 4px 10px rgb(0 0 0 / 38%);
}

.game-catalog-list strong {
  display: grid;
  min-height: 2.4em;
  place-items: center;
  color: var(--gold-white);
  font-weight: 900;
  text-shadow: 0 1px 3px rgb(0 0 0 / 88%);
}

.game-catalog-more {
  margin: 8px 0 0;
  color: var(--cyan-bright);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.35;
}

.compliance {
  padding: 14px 8px 4px;
  color: #8fa7bf;
  font-size: 0.69rem;
  line-height: 1.55;
  text-align: center;
}

.compliance strong {
  color: #b7c9dc;
  font-size: 0.73rem;
}

.compliance p {
  margin: 3px 0 0;
}

.win-overlay[hidden] {
  display: none;
}

.win-overlay {
  position: fixed;
  z-index: var(--z-overlay);
  inset: 0;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: start center;
  overflow-x: hidden;
  overflow-y: auto;
  padding:
    calc(18px + env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    calc(18px + env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 43%, rgb(33 126 181 / 45%), transparent 32%),
    radial-gradient(circle at 50% 50%, rgb(0 7 19 / 38%), rgb(0 2 8 / 92%) 73%);
  backdrop-filter: blur(8px) saturate(0.72);
  isolation: isolate;
  animation: overlay-in 180ms ease-out both;
}

.win-effects {
  position: fixed;
  z-index: 0;
  inset: 0;
  contain: strict;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}

.electric-flash,
.blast-core,
.win-aura,
.burst-rays,
.shockwave,
.thunder-bolts,
.coin-rain {
  position: absolute;
  pointer-events: none;
}

.electric-flash {
  z-index: 3;
  inset: 0;
  background: #eefcff;
  mix-blend-mode: screen;
  animation: electric-flash 780ms steps(2, jump-none) both;
}

.blast-core {
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(72vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 4%, var(--cyan-bright) 8%, rgb(86 221 255 / 72%) 18%, rgb(216 174 76 / 34%) 37%, transparent 69%);
  filter: blur(2px) drop-shadow(0 0 28px #fff);
  transform: translate(-50%, -50%);
  animation: blast-core 920ms var(--ease-impact) both;
}

.win-aura {
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(92vw, 680px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgb(255 255 255 / 66%) 0 5%, rgb(255 226 154 / 45%) 12%, rgb(86 221 255 / 26%) 28%, transparent 64%),
    repeating-conic-gradient(from 0deg, rgb(255 245 205 / 68%) 0 2deg, transparent 3deg 13deg, rgb(86 221 255 / 44%) 14deg 15deg, transparent 16deg 29deg);
  filter: blur(1px) saturate(1.35) drop-shadow(0 0 34px var(--cyan));
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
  animation: win-aura-hit 1.25s var(--ease-impact) both;
}

.burst-rays {
  z-index: 1;
  top: 50%;
  left: 50%;
  width: min(130vmax, 1100px);
  aspect-ratio: 1;
  opacity: 0.62;
  background: repeating-conic-gradient(from 4deg, transparent 0 8deg, rgb(86 221 255 / 44%) 9deg 10deg, transparent 11deg 19deg, rgb(216 174 76 / 29%) 20deg 21deg, transparent 22deg 29deg);
  filter: blur(1px);
  mask-image: radial-gradient(circle, transparent 0 8%, #000 22%, transparent 70%);
  transform: translate(-50%, -50%);
  animation: ray-spin 2.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.shockwave {
  z-index: 4;
  top: 50%;
  left: 50%;
  width: min(30vw, 180px);
  aspect-ratio: 1;
  border: 4px solid var(--cyan-bright);
  border-radius: 50%;
  box-shadow: 0 0 13px #fff, inset 0 0 12px var(--cyan), 0 0 34px var(--cyan);
  transform: translate(-50%, -50%);
  animation: shockwave 980ms var(--ease-impact) 80ms both;
}

.shockwave-two {
  border-color: var(--gold-bright);
  animation-delay: 250ms;
}

.shockwave-three {
  border-width: 2px;
  animation-delay: 430ms;
}

.thunder-bolts {
  z-index: 5;
  inset: 0;
  overflow: hidden;
}

.thunder-bolts i {
  position: absolute;
  top: -8vh;
  left: 50%;
  width: 8px;
  height: 116vh;
  opacity: 0;
  background: linear-gradient(#fff, var(--cyan-bright) 55%, var(--cyan));
  box-shadow: 0 0 7px #fff, 0 0 20px var(--cyan), 0 0 42px var(--cyan-deep);
  clip-path: polygon(0 0, 100% 0, 52% 35%, 100% 38%, 28% 70%, 72% 72%, 9% 100%, 41% 76%, 0 73%, 58% 42%, 18% 39%);
  transform-origin: 50% 0;
  animation: thunder-strike 880ms ease-out both;
}

.thunder-bolts i:nth-child(1) { left: 8%; --bolt-angle: -18deg; }
.thunder-bolts i:nth-child(2) { left: 24%; --bolt-angle: 12deg; animation-delay: 70ms; }
.thunder-bolts i:nth-child(3) { left: 42%; --bolt-angle: -7deg; animation-delay: 130ms; }
.thunder-bolts i:nth-child(4) { left: 60%; --bolt-angle: 9deg; animation-delay: 40ms; }
.thunder-bolts i:nth-child(5) { left: 78%; --bolt-angle: -11deg; animation-delay: 160ms; }
.thunder-bolts i:nth-child(6) { left: 94%; --bolt-angle: 17deg; animation-delay: 95ms; }

.coin-rain {
  z-index: 8;
  inset: -14vh 0 0;
  overflow: hidden;
}

.coin-rain i {
  position: absolute;
  top: -9vh;
  left: var(--particle-x, 50%);
  width: 15px;
  height: 15px;
  border: 2px solid var(--gold-bright);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 29%, #fff8ce 0 7%, var(--gold-bright) 10% 26%, var(--gold) 30% 62%, var(--gold-deep) 66% 100%);
  box-shadow: inset 0 0 0 2px rgb(112 67 20 / 55%), 0 0 8px rgb(216 174 76 / 65%);
  animation: coin-fall var(--particle-speed, 2.15s) cubic-bezier(0.16, 0.55, 0.38, 0.98) var(--particle-delay, 0ms) both;
}

.coin-rain i:nth-child(3n) { width: 11px; height: 11px; --particle-speed: 2.45s; }
.coin-rain i:nth-child(4n) { width: 19px; height: 19px; --particle-speed: 2.8s; }

.coin-rain .gem-particle {
  border-color: var(--cyan-bright);
  border-radius: 2px 55% 3px 55%;
  background: linear-gradient(135deg, #fff, var(--cyan) 28%, #166cb2 72%, #071b43);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 55%), 0 0 11px var(--cyan);
}

.coin-rain i:nth-child(18n + 1) { --particle-x: 3%; --particle-delay: 40ms; }
.coin-rain i:nth-child(18n + 2) { --particle-x: 9%; --particle-delay: 310ms; }
.coin-rain i:nth-child(18n + 3) { --particle-x: 15%; --particle-delay: 110ms; }
.coin-rain i:nth-child(18n + 4) { --particle-x: 21%; --particle-delay: 470ms; }
.coin-rain i:nth-child(18n + 5) { --particle-x: 27%; --particle-delay: 220ms; }
.coin-rain i:nth-child(18n + 6) { --particle-x: 33%; --particle-delay: 20ms; }
.coin-rain i:nth-child(18n + 7) { --particle-x: 39%; --particle-delay: 390ms; }
.coin-rain i:nth-child(18n + 8) { --particle-x: 45%; --particle-delay: 160ms; }
.coin-rain i:nth-child(18n + 9) { --particle-x: 50%; --particle-delay: 530ms; }
.coin-rain i:nth-child(18n + 10) { --particle-x: 56%; --particle-delay: 70ms; }
.coin-rain i:nth-child(18n + 11) { --particle-x: 62%; --particle-delay: 270ms; }
.coin-rain i:nth-child(18n + 12) { --particle-x: 68%; --particle-delay: 430ms; }
.coin-rain i:nth-child(18n + 13) { --particle-x: 74%; --particle-delay: 120ms; }
.coin-rain i:nth-child(18n + 14) { --particle-x: 80%; --particle-delay: 340ms; }
.coin-rain i:nth-child(18n + 15) { --particle-x: 86%; --particle-delay: 10ms; }
.coin-rain i:nth-child(18n + 16) { --particle-x: 91%; --particle-delay: 500ms; }
.coin-rain i:nth-child(18n + 17) { --particle-x: 96%; --particle-delay: 190ms; }
.coin-rain i:nth-child(18n + 18) { --particle-x: 99%; --particle-delay: 370ms; }

.win-panel {
  position: relative;
  z-index: 12;
  display: grid;
  width: min(100%, 500px);
  max-width: 100%;
  min-width: 0;
  justify-items: center;
  overflow-wrap: anywhere;
  margin-block: auto;
  padding: 60px 18px 17px;
  border: 2px solid var(--gold-bright);
  border-radius: 28px;
  color: var(--white);
  background:
    radial-gradient(circle at 50% 5%, rgb(86 221 255 / 30%), transparent 34%),
    linear-gradient(180deg, rgb(12 49 87 / 98%), rgb(5 20 43 / 99%) 52%, rgb(2 8 21 / 99%));
  box-shadow:
    0 0 0 5px rgb(112 67 20 / 72%),
    0 0 0 7px rgb(255 226 154 / 38%),
    0 0 0 15px rgb(86 221 255 / 9%),
    0 0 74px rgb(86 221 255 / 42%),
    var(--shadow-deep),
    inset 0 0 45px rgb(0 0 0 / 36%);
  text-align: center;
  isolation: isolate;
  animation: win-pop 580ms var(--ease-spring) 100ms both, panel-pulse 660ms ease-in-out 2 alternate 620ms;
}

.win-panel::before,
.win-panel::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.win-panel::before {
  z-index: -1;
  inset: 7px;
  border: 1px solid rgb(216 174 76 / 58%);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgb(238 247 255 / 13%), transparent 18% 82%, rgb(238 247 255 / 8%));
}

.win-panel::after {
  z-index: 1;
  top: 44px;
  right: 14%;
  left: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  box-shadow: 0 0 10px var(--gold);
}

.win-lightning {
  position: absolute;
  z-index: 3;
  top: -46px;
  left: 50%;
  display: grid;
  width: 92px;
  height: 92px;
  place-items: center;
  border: 3px solid var(--gold-bright);
  border-radius: 50%;
  background:
    radial-gradient(circle, #164c81 0 49%, #08203f 50% 100%);
  box-shadow:
    0 0 0 5px var(--gold-deep),
    0 0 0 7px var(--gold-bright),
    0 0 28px var(--cyan),
    inset 0 0 22px rgb(86 221 255 / 52%);
  transform: translateX(-50%);
  animation: lightning-emblem 520ms var(--ease-impact) 160ms both;
}

.win-lightning > span {
  position: relative;
  z-index: 1;
  color: #fff4bd;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: 1.42rem;
  font-style: italic;
  font-weight: 900;
  letter-spacing: -0.075em;
  line-height: 1;
  text-shadow:
    0 2px 0 var(--gold-deep),
    0 0 6px #fff,
    0 0 15px var(--cyan);
  transform: translateX(-0.04em) skewX(-5deg);
}

.win-panel > p {
  margin: 0 0 4px;
  color: var(--cyan-bright);
  font-size: clamp(0.67rem, 2.8vw, 0.82rem);
  font-weight: 900;
  letter-spacing: 0.14em;
}

.win-panel h2 {
  margin: 0;
  color: var(--gold-white);
  font-size: clamp(3rem, 15vw, 5.2rem);
  font-style: italic;
  font-weight: 1000;
  letter-spacing: -0.035em;
  line-height: 0.9;
  text-shadow:
    0 3px 0 var(--gold-deep),
    0 7px 15px rgb(0 0 0 / 72%),
    0 0 28px rgb(216 174 76 / 52%);
  animation: big-win-slam 560ms var(--ease-impact) 210ms both;
}

.win-panel > strong {
  margin-top: 8px;
  color: var(--white);
  font-size: clamp(2.2rem, 11vw, 3.7rem);
  font-style: italic;
  font-weight: 1000;
  letter-spacing: -0.025em;
  line-height: 1;
  text-shadow: 0 2px 0 #087bad, 0 0 18px var(--cyan);
  animation: prize-slam 520ms var(--ease-impact) 360ms both;
}

.win-panel > span {
  margin: 8px 0;
  color: #d9e8f6;
  font-size: clamp(0.82rem, 3.4vw, 1rem);
  font-weight: 650;
  line-height: 1.38;
}

.win-sound {
  display: flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin-bottom: 7px;
  color: var(--gold-bright);
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.sound-bars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.win-sound i {
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
  transform-origin: center bottom;
  animation: sound-bar 280ms ease-in-out 8 alternate;
}

.win-sound i:nth-child(2) { animation-delay: -90ms; }
.win-sound i:nth-child(3) { animation-delay: -180ms; }
.win-sound i:nth-child(4) { animation-delay: -270ms; }
.win-sound i:nth-child(5) { animation-delay: -360ms; }

.win-sound.is-muted {
  color: #aabdd1;
}

.win-sound.is-muted .sound-bars {
  opacity: 0.45;
}

.win-sound.is-muted i {
  height: 4px;
  animation: none;
  box-shadow: none;
}

.redirect-countdown {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 34px;
  place-items: center;
  overflow: hidden;
  margin-bottom: 7px;
  padding: 7px 10px 9px;
  border: 1px solid rgb(86 221 255 / 45%);
  border-radius: 9px;
  color: var(--cyan-bright);
  background: rgb(2 15 33 / 78%);
  box-shadow: inset 0 0 14px rgb(86 221 255 / 8%);
  font-size: clamp(0.61rem, 2.75vw, 0.76rem);
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  letter-spacing: 0.055em;
}

.redirect-countdown[data-auto="true"]::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, var(--cyan-deep), var(--cyan-bright), var(--gold-bright));
  box-shadow: 0 0 9px var(--cyan);
  transform-origin: left;
  animation: redirect-progress 3s linear both;
}

.redirect-countdown[data-auto="false"] {
  border-color: rgb(185 203 224 / 34%);
  color: #d9e8f6;
}

.redirect-countdown[data-seconds="1"] {
  border-color: var(--gold-bright);
  color: var(--gold-white);
  background: rgb(53 33 7 / 72%);
  animation: countdown-beat 260ms var(--ease-impact) 2 alternate;
}

.install-guide {
  width: 100%;
  margin: 7px 0 9px;
  padding: 10px 12px;
  color: #e9f5ff;
  text-align: left;
  border: 1px solid rgb(86 221 255 / 24%);
  border-radius: 12px;
  background: rgb(4 21 43 / 82%);
}

.install-guide h3 {
  margin: 0 0 6px;
  color: var(--cyan-bright);
  font-size: clamp(0.68rem, 2.9vw, 0.78rem);
  font-weight: 1000;
  letter-spacing: 0.055em;
}

.install-guide ol {
  display: grid;
  gap: 3px;
  margin: 0;
  padding-left: 1.2rem;
}

.install-guide li {
  color: #d8e7f5;
  font-size: clamp(0.67rem, 2.75vw, 0.76rem);
  line-height: 1.35;
}

.final-cta {
  min-height: 56px;
  padding: 8px 14px;
  font-size: clamp(0.79rem, 3.45vw, 0.98rem);
  letter-spacing: 0.02em;
}

.final-cta[aria-busy="true"],
.final-cta.is-leaving {
  cursor: progress;
  filter: brightness(1.12) saturate(1.08);
  pointer-events: none;
}

.final-cta svg {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.final-cta[aria-disabled="true"] {
  cursor: not-allowed;
  filter: grayscale(0.72);
  opacity: 0.52;
}

.browser-fallback {
  display: grid;
  width: 100%;
  min-height: 45px;
  place-items: center;
  gap: 3px;
  margin-top: 7px;
  padding: 7px 10px;
  border: 1px solid rgb(255 226 154 / 46%);
  border-radius: 8px;
  color: var(--marble);
  background: rgb(5 17 36 / 86%);
  box-shadow: inset 0 0 14px rgb(216 174 76 / 8%);
  text-align: center;
  text-decoration: none;
}

.browser-fallback[hidden] {
  display: none;
}

.browser-fallback span {
  color: #c5d7e8;
  font-size: clamp(0.62rem, 2.75vw, 0.74rem);
  font-weight: 650;
  line-height: 1.25;
}

.browser-fallback b {
  color: var(--gold-bright);
  font-size: clamp(0.66rem, 3vw, 0.8rem);
  font-weight: 950;
  letter-spacing: 0.055em;
}

.copy-destination {
  width: 100%;
  min-height: 44px;
  margin: 4px 0 0;
  border: 1px solid rgb(74 210 255 / 48%);
  border-radius: 12px;
  padding: 8px 12px;
  color: #dff8ff;
  background: linear-gradient(180deg, rgb(15 76 111 / 84%), rgb(7 35 62 / 92%));
  box-shadow: inset 0 0 14px rgb(74 210 255 / 10%);
  cursor: pointer;
  font: inherit;
  font-size: clamp(0.66rem, 3vw, 0.8rem);
  font-weight: 950;
  letter-spacing: 0.055em;
}

.copy-destination[hidden] {
  display: none;
}

.copy-destination:focus-visible {
  outline: 3px solid var(--gold-white);
  outline-offset: 2px;
}

.copy-destination:disabled {
  cursor: progress;
  opacity: 0.72;
}

.win-panel small {
  margin-top: 9px;
  color: #aabdd1;
  font-size: 0.7rem;
}

.promo-proof {
  display: grid;
  width: min(100%, 430px);
  min-width: 0;
  gap: 2px;
  padding: 5px 9px;
  overflow-wrap: anywhere;
  border: 1px solid rgb(255 226 154 / 46%);
  border-radius: 10px;
  color: var(--white);
  background:
    radial-gradient(circle at 50% 0, rgb(86 221 255 / 17%), transparent 62%),
    linear-gradient(180deg, rgb(8 43 77 / 94%), rgb(3 17 36 / 96%));
  box-shadow: inset 0 1px rgb(255 255 255 / 10%), 0 4px 12px rgb(0 0 0 / 24%);
  text-align: center;
}

.promo-proof strong {
  color: var(--cyan-bright);
  font-size: clamp(0.58rem, 2.55vw, 0.75rem);
  font-weight: 950;
  letter-spacing: 0.065em;
  line-height: 1.2;
}

.promo-proof .verified-badge {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  justify-self: center;
  padding: 2px 7px;
  border: 1px solid rgb(86 221 255 / 42%);
  border-radius: 999px;
  color: #dff9ff;
  background: rgb(86 221 255 / 12%);
  font-size: clamp(0.5rem, 2.1vw, 0.62rem);
  font-weight: 950;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.promo-proof b {
  color: var(--gold-bright);
  font-size: clamp(0.78rem, 3.55vw, 1.08rem);
  font-weight: 1000;
  letter-spacing: 0.025em;
  line-height: 1.08;
  text-shadow: 0 1px 0 var(--gold-deep), 0 0 11px rgb(216 174 76 / 28%);
}

.promo-proof small,
.win-panel .promo-proof small {
  margin: 0;
  color: #b9cad9;
  font-size: clamp(0.48rem, 2vw, 0.6rem);
  font-weight: 650;
  line-height: 1.25;
}

.promo-proof--hero {
  margin-inline: auto;
}

.promo-proof--win {
  width: min(100%, 420px);
  margin: 3px 0 5px;
  border-color: rgb(86 221 255 / 44%);
}

.screen-winning {
  overflow: hidden;
}

.screen-winning::before {
  z-index: 90;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 42%, rgb(255 255 255 / 92%) 0 5%, rgb(86 221 255 / 56%) 8%, transparent 35%),
    linear-gradient(180deg, rgb(255 255 255 / 36%), transparent 48%);
  mix-blend-mode: screen;
  animation: screen-flash 720ms steps(2, jump-none) both;
}

.noscript {
  margin: 20px;
  padding: 14px;
  border: 1px solid var(--gold);
  color: var(--white);
  background: var(--navy-900);
}

@media (hover: hover) and (pointer: fine) {
  .brand:hover,
  .sound-toggle:hover,
  .spin-button:hover,
  .final-cta:hover {
    filter: brightness(1.12) saturate(1.08);
  }

  .spin-button:hover,
  .final-cta:hover {
    box-shadow:
      inset 0 1px rgb(255 255 255 / 34%),
      inset 0 -8px 15px rgb(35 0 5 / 34%),
      0 9px 22px rgb(0 0 0 / 52%),
      0 0 24px rgb(214 66 80 / 39%);
  }
}

.brand:active,
.sound-toggle:active,
.spin-button:active,
.final-cta:active {
  filter: brightness(0.9);
  transform: scale(0.975);
}

.spin-button:disabled:active,
.final-cta[aria-disabled="true"]:active {
  transform: none;
}

@keyframes cta-pulse {
  0%, 100% {
    scale: 0.985;
    box-shadow:
      inset 0 2px rgb(255 255 255 / 82%),
      inset 0 -8px 14px rgb(106 35 0 / 35%),
      0 8px 18px rgb(0 0 0 / 54%),
      0 0 18px rgb(255 196 0 / 56%),
      0 0 34px rgb(255 96 0 / 34%);
  }

  50% {
    scale: 1.045;
    box-shadow:
      inset 0 2px rgb(255 255 255 / 92%),
      inset 0 -8px 14px rgb(106 35 0 / 28%),
      0 12px 26px rgb(0 0 0 / 58%),
      0 0 34px rgb(255 214 53 / 86%),
      0 0 58px rgb(255 96 0 / 58%);
  }
}

@keyframes idle-reel-charge {
  0%, 100% {
    box-shadow:
      0 0 0 1px var(--gold-bright),
      0 0 0 4px rgb(6 20 41 / 92%),
      0 9px 18px rgb(0 0 0 / 70%),
      inset 0 0 20px rgb(0 0 0 / 86%),
      0 0 18px rgb(86 221 255 / 15%);
  }

  50% {
    box-shadow:
      0 0 0 1px var(--gold-bright),
      0 0 0 4px rgb(6 20 41 / 92%),
      0 9px 18px rgb(0 0 0 / 70%),
      inset 0 0 24px rgb(14 82 126 / 42%),
      0 0 29px rgb(86 221 255 / 36%);
  }
}

@keyframes idle-reveal-pulse {
  from {
    box-shadow:
      inset 0 0 0 1px rgb(255 255 255 / 13%),
      inset 0 0 24px rgb(86 221 255 / 20%),
      0 0 24px rgb(216 174 76 / 24%);
  }

  to {
    box-shadow:
      inset 0 0 0 1px rgb(255 255 255 / 18%),
      inset 0 0 30px rgb(86 221 255 / 32%),
      0 0 34px rgb(216 174 76 / 42%);
  }
}

@keyframes button-shine {
  0%, 52% { transform: skewX(-18deg) translate3d(0, 0, 0); }
  80%, 100% { transform: skewX(-18deg) translate3d(760%, 0, 0); }
}

@keyframes symbol-glint {
  to { transform: skewX(-18deg) translate3d(500%, 0, 0); }
}

@keyframes multiplier-hit {
  to { filter: brightness(1.3) saturate(1.34); transform: rotate(-3deg) scale(1.1); }
}

@keyframes guardian-hit {
  to { filter: brightness(1.28) drop-shadow(0 0 9px var(--cyan-bright)); transform: scale(1.17); }
}

@keyframes cabinet-impact {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  25% { transform: translate3d(-1px, 1px, 0) rotate(-0.1deg); }
  75% { transform: translate3d(1px, -1px, 0) rotate(0.1deg); }
}

@keyframes reel-rush {
  0% { transform: translate3d(0, -3px, 0); }
  100% { transform: translate3d(0, 3px, 0); }
}

@keyframes reel-cell-flash {
  from { opacity: 0.72; filter: brightness(0.76); }
  to { opacity: 1; filter: brightness(1.6); }
}

@keyframes reel-scan {
  0% { opacity: 0; transform: translate3d(0, -65%, 0); }
  35%, 65% { opacity: 0.8; }
  100% { opacity: 0; transform: translate3d(0, 65%, 0); }
}

@keyframes rail-charge {
  from { filter: drop-shadow(0 0 3px var(--cyan)); }
  to { filter: drop-shadow(0 0 12px #fff) brightness(2); }
}

@keyframes rune-charge {
  from { opacity: 0.35; filter: brightness(0.7); }
  to { opacity: 1; filter: brightness(1.9); }
}

@keyframes winner-pulse {
  to { filter: brightness(1.2) saturate(1.28); }
}

@keyframes cell-destruction {
  0%, 18% { filter: brightness(1); transform: translate3d(0, 0, 0) scale(1); }
  26% { filter: brightness(2.8) saturate(0.2); transform: translate3d(-1px, 1px, 0) scale(1.12) rotate(-1deg); }
  34% { filter: brightness(1.8) saturate(1.8); transform: translate3d(1px, -1px, 0) scale(0.9) rotate(1deg); }
  48% { filter: brightness(1.35) saturate(1.5); transform: translate3d(0, 0, 0) scale(1.03); }
  100% { filter: brightness(0.72) saturate(0.58); transform: translate3d(0, 0, 0) scale(0.94); }
}

@keyframes cell-crack-flash {
  0%, 20% { opacity: 0.5; }
  28% {
    opacity: 1;
    background:
      linear-gradient(28deg, transparent 44%, #fff 45% 48%, transparent 49%),
      linear-gradient(118deg, transparent 46%, var(--cyan-bright) 47% 50%, transparent 51%);
  }
  100% {
    opacity: 0.88;
    background:
      linear-gradient(28deg, transparent 45%, rgb(86 221 255 / 58%) 46% 48%, transparent 49%),
      linear-gradient(118deg, transparent 47%, rgb(255 255 255 / 52%) 48% 50%, transparent 51%),
      radial-gradient(circle, transparent 18%, rgb(0 3 12 / 78%) 72%);
  }
}

@keyframes symbol-vaporize {
  0%, 19% { opacity: 1; filter: brightness(1); transform: scale(1.04); }
  27% { opacity: 1; filter: brightness(3) saturate(0); transform: scale(1.3); }
  44% { opacity: 0.62; filter: brightness(1.7) saturate(1.8); transform: scale(0.78); }
  100% { opacity: 0.24; filter: brightness(0.7) saturate(0.45); transform: scale(0.48) rotate(7deg); }
}

@keyframes cell-lightning-strike {
  0%, 10% { opacity: 0; transform: translateX(-50%) rotate(-7deg) scaleY(0.06); }
  16%, 25% { opacity: 1; transform: translateX(-50%) rotate(-7deg) scaleY(1); }
  30% { opacity: 0.2; transform: translateX(-50%) rotate(4deg) scaleY(0.92); }
  36%, 46% { opacity: 1; transform: translateX(-50%) rotate(4deg) scaleY(1.06); }
  100% { opacity: 0; transform: translateX(-50%) rotate(4deg) scaleY(0.72); }
}

@keyframes cell-overcharge {
  0%, 10% { opacity: 0; transform: scale(0.14); }
  18% { opacity: 1; transform: scale(0.72); }
  28% { opacity: 0.82; transform: scale(1.48); }
  36% { opacity: 0.24; transform: scale(0.92); }
  47% { opacity: 0.9; transform: scale(1.18); }
  100% { opacity: 0; transform: scale(1.84); }
}

@keyframes cell-branch-strike {
  0%, 12% { opacity: 0; transform: rotate(-9deg) scale(0.08); }
  20%, 30% { opacity: 1; transform: rotate(-9deg) scale(0.9); }
  38% { opacity: 0.22; transform: rotate(6deg) scale(1.22); }
  49%, 61% { opacity: 0.94; transform: rotate(3deg) scale(0.98); }
  100% { opacity: 0; transform: rotate(15deg) scale(1.44); }
}

@keyframes cell-core-burst {
  0%, 12% { opacity: 0; transform: scale(0.1); }
  22% { opacity: 1; transform: scale(0.52); }
  38% { opacity: 0.96; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(2.12); }
}

@keyframes cell-thunder-flash {
  0%, 8% { opacity: 0; transform: scale(0.18) rotate(-4deg); }
  18% { opacity: 1; transform: scale(1.02) rotate(2deg); }
  31% { opacity: 0.28; transform: scale(0.82) rotate(-2deg); }
  46% { opacity: 0.88; transform: scale(1.22) rotate(4deg); }
  100% { opacity: 0; transform: scale(1.74) rotate(10deg); }
}

@keyframes cell-ground-crack {
  0% {
    opacity: 0;
    clip-path: circle(6% at 50% 50%);
    filter: brightness(1) drop-shadow(0 0 3px var(--cyan));
    transform: scale(0.88);
  }
  34% {
    opacity: 1;
    clip-path: circle(48% at 50% 50%);
    filter: brightness(1.8) drop-shadow(0 0 8px var(--cyan-bright));
    transform: scale(1.03);
  }
  100% {
    opacity: 0.72;
    clip-path: circle(76% at 50% 50%);
    filter: brightness(1.08) drop-shadow(0 0 5px var(--cyan));
    transform: scale(1.08);
  }
}

@keyframes cell-shockwave-burst {
  0% { opacity: 0; transform: scale(0.08); }
  18% { opacity: 1; transform: scale(0.48); }
  100% { opacity: 0; transform: scale(2.8); }
}

@keyframes cell-spark-flight {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(0.15); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) rotate(var(--spark-r)) scale(0.55); }
}

@keyframes cell-debris-flight {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(0.2); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--debris-x), var(--debris-y)) rotate(var(--debris-r)) scale(0.68); }
}

@keyframes overload-strike {
  0%, 10%, 100% { opacity: 0; transform: rotate(17deg) scaleY(0.08); }
  14%, 26% { opacity: 1; transform: rotate(17deg) scaleY(1); }
  34% { opacity: 0.12; }
  42%, 52% { opacity: 0.92; transform: rotate(10deg) scaleY(0.94); }
  72%, 100% { opacity: 0; transform: rotate(18deg) scaleY(0.76); }
}

@keyframes overlay-in {
  from { opacity: 0; }
}

@keyframes impact-shake {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  8% { transform: translate3d(-7px, 4px, 0) rotate(-0.45deg); }
  16% { transform: translate3d(8px, -5px, 0) rotate(0.55deg); }
  25% { transform: translate3d(-6px, -3px, 0) rotate(-0.35deg); }
  34% { transform: translate3d(5px, 4px, 0) rotate(0.3deg); }
  46% { transform: translate3d(-3px, 2px, 0) rotate(-0.2deg); }
  62% { transform: translate3d(2px, -1px, 0) rotate(0.1deg); }
}

@keyframes electric-flash {
  0%, 10%, 22% { opacity: 1; }
  5%, 16%, 30%, 100% { opacity: 0; }
}

@keyframes blast-core {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.04); }
  24% { opacity: 0.96; transform: translate(-50%, -50%) scale(0.72); }
  58% { opacity: 0.58; transform: translate(-50%, -50%) scale(1.35); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.15); }
}

@keyframes win-aura-hit {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-22deg) scale(0.12); }
  18% { opacity: 1; transform: translate(-50%, -50%) rotate(5deg) scale(0.82); }
  54% { opacity: 0.78; transform: translate(-50%, -50%) rotate(22deg) scale(1.16); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(48deg) scale(1.72); }
}

@keyframes thunder-strike {
  0% { opacity: 0; transform: translateX(-50%) rotate(var(--bolt-angle)) scaleY(0.04); }
  9% { opacity: 1; transform: translateX(-50%) rotate(var(--bolt-angle)) scaleY(1); }
  18% { opacity: 0.22; }
  27% { opacity: 1; }
  44%, 100% { opacity: 0; transform: translateX(-50%) rotate(var(--bolt-angle)) scaleY(1.08); }
}

@keyframes ray-spin {
  from { transform: translate(-50%, -50%) rotate(0); }
  to { transform: translate(-50%, -50%) rotate(68deg); }
}

@keyframes shockwave {
  from { opacity: 0.94; transform: translate(-50%, -50%) scale(0.18); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(5.4); }
}

@keyframes coin-fall {
  from { opacity: 0; transform: translate3d(0, -5vh, 0) rotate(0); }
  8% { opacity: 1; }
  86% { opacity: 1; }
  to { opacity: 0; transform: translate3d(18px, 128svh, 0) rotate(760deg); }
}

@keyframes win-pop {
  0% { opacity: 0; transform: translate3d(0, 32px, 0) rotate(-0.8deg) scale(0.42); }
  64% { opacity: 1; transform: translate3d(0, -4px, 0) rotate(0.25deg) scale(1.045); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@keyframes panel-pulse {
  to {
    box-shadow:
      0 0 0 5px rgb(112 67 20 / 72%),
      0 0 0 7px rgb(255 226 154 / 52%),
      0 0 0 16px rgb(86 221 255 / 15%),
      0 0 86px rgb(86 221 255 / 55%),
      var(--shadow-deep),
      inset 0 0 52px rgb(0 0 0 / 36%);
  }
}

@keyframes big-win-slam {
  0% { opacity: 0; filter: brightness(2.4); transform: scale(2.15); }
  58% { opacity: 1; transform: scale(0.88); }
  100% { opacity: 1; filter: brightness(1); transform: scale(1); }
}

@keyframes prize-slam {
  0% { opacity: 0; filter: brightness(2); transform: translate3d(0, 18px, 0) scale(0.4); }
  70% { opacity: 1; transform: translate3d(0, -3px, 0) scale(1.06); }
  100% { opacity: 1; filter: brightness(1); transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes lightning-emblem {
  0% { filter: brightness(2.2); opacity: 0; transform: translateX(-50%) rotate(-28deg) scale(0.18); }
  62% { opacity: 1; transform: translateX(-50%) rotate(7deg) scale(1.18); }
  100% { filter: brightness(1); opacity: 1; transform: translateX(-50%) rotate(0) scale(1); }
}

@keyframes redirect-progress {
  to { transform: scaleX(0); }
}

@keyframes sound-bar {
  from { transform: scaleY(0.28); }
  to { transform: scaleY(1); }
}

@keyframes screen-flash {
  0%, 8%, 20% { opacity: 0.9; }
  4%, 14%, 100% { opacity: 0; }
}

@keyframes countdown-beat {
  to { filter: brightness(1.36); transform: scale(1.025); }
}

/* Professional operator surface: factual navigation, offer information, and restraint. */
.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  padding: max(7px, env(safe-area-inset-top)) 2px 7px;
  border-bottom: 1px solid rgb(216 174 76 / 24%);
}

.brand {
  grid-column: 1;
  grid-row: 1;
  font-style: normal;
  letter-spacing: 0.01em;
}

.logo-mark {
  border-radius: 8px;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 70%),
    inset 0 -3px 7px rgb(72 35 6 / 32%),
    0 4px 12px rgb(0 0 0 / 32%);
  letter-spacing: 0.01em;
}

.wordmark {
  filter: none;
  letter-spacing: 0.025em;
}

.wordmark small {
  margin-left: 5px;
  letter-spacing: 0.08em;
}

.primary-nav {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid rgb(157 181 207 / 18%);
  border-radius: 10px;
  background: rgb(3 13 29 / 82%);
}

.primary-nav a {
  display: inline-flex;
  min-width: 0;
  min-height: 44px;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  padding-inline: 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #b7c9dc;
  font-size: clamp(0.57rem, 2.35vw, 0.69rem);
  font-weight: 800;
  letter-spacing: 0.075em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.primary-nav a[href="#slot-game"] {
  border-color: rgb(216 174 76 / 34%);
  color: var(--gold-white);
  background: rgb(216 174 76 / 8%);
}

.header-actions {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.age-badge {
  display: inline-grid;
  min-width: 36px;
  min-height: 32px;
  place-items: center;
  border: 1px solid rgb(216 174 76 / 55%);
  border-radius: 8px;
  color: var(--gold-white);
  background: rgb(7 19 37 / 94%);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.sound-toggle {
  min-width: 96px;
  border-radius: 8px;
  box-shadow: inset 0 1px rgb(255 255 255 / 7%), 0 3px 8px rgb(0 0 0 / 24%);
}

.creative-stage {
  border-color: rgb(216 174 76 / 48%);
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgb(64 144 195 / 12%),
    0 18px 42px rgb(0 0 0 / 48%),
    inset 0 1px rgb(255 245 205 / 10%);
}

.creative-stage::before,
.creative-stage::after {
  box-shadow: none;
}

.creative-picture img {
  opacity: 0.3;
  filter: saturate(0.74) contrast(1.16) brightness(0.55) hue-rotate(142deg);
}

.eyebrow {
  border-radius: 7px;
  background: rgb(3 16 35 / 84%);
  box-shadow: none;
  font-weight: 800;
}

.eyebrow svg {
  filter: none;
}

.creative-copy h1 span,
.creative-copy h1 strong {
  font-style: normal;
  letter-spacing: 0.01em;
}

.creative-copy h1 span {
  font-weight: 800;
}

.creative-copy h1 strong {
  font-weight: 950;
  text-shadow: 0 2px 0 var(--gold-deep), 0 4px 14px rgb(0 0 0 / 70%);
}

.offer-pills span {
  border-color: rgb(150 181 211 / 28%);
  border-radius: 7px;
  background: rgb(7 27 50 / 88%);
}

.conversion-strip {
  border-color: rgb(216 174 76 / 35%);
  border-radius: 8px;
  background: linear-gradient(180deg, rgb(12 34 60 / 94%), rgb(4 16 34 / 96%));
  box-shadow: inset 0 1px rgb(255 255 255 / 8%);
  font-weight: 850;
}

.game-card {
  border-color: rgb(186 209 232 / 19%);
  border-radius: 14px;
  box-shadow: inset 0 1px rgb(255 255 255 / 6%), 0 10px 24px rgb(0 0 0 / 30%);
}

.game-heading h2 {
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-shadow: none;
}

.slot-machine {
  border-width: 1px;
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgb(255 226 154 / 26%),
    inset 0 0 0 3px rgb(4 11 24 / 80%),
    inset 0 0 26px rgb(3 7 18 / 78%),
    0 11px 24px rgb(0 0 0 / 48%);
}

.reel-window {
  border-width: 1px;
  border-radius: 9px;
  box-shadow:
    0 0 0 1px rgb(216 174 76 / 54%),
    0 0 0 3px rgb(6 20 41 / 90%),
    0 7px 15px rgb(0 0 0 / 62%),
    inset 0 0 16px rgb(0 0 0 / 82%);
}

.symbol {
  border-color: rgb(101 166 209 / 32%);
  border-radius: 6px;
  background:
    radial-gradient(circle at 50% 42%, rgb(23 92 143 / 32%), transparent 60%),
    linear-gradient(155deg, #0a2548 0%, #04142a 55%, #020917 100%);
}

.spin-button,
.final-cta {
  border-radius: 10px;
  color: #101827;
  background: linear-gradient(180deg, #fff0bd 0%, #deb95c 49%, #ad781c 100%);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 58%),
    inset 0 -5px 10px rgb(72 35 6 / 22%),
    0 7px 16px rgb(0 0 0 / 42%);
  font-style: normal;
  font-weight: 900;
  text-shadow: none;
}

.spin-button {
  min-height: 72px;
  padding: 10px clamp(10px, 3vw, 18px);
  border: 2px solid #fff6b7;
  color: #251300;
  background:
    linear-gradient(112deg, transparent 0 37%, rgb(255 255 255 / 34%) 46%, transparent 56%),
    linear-gradient(180deg, #fff784 0%, #ffd000 36%, #ff8a00 72%, #dc4c00 100%);
  background-size: 230% 100%, 100% 100%;
  box-shadow:
    inset 0 2px rgb(255 255 255 / 88%),
    inset 0 -8px 14px rgb(108 34 0 / 34%),
    0 10px 24px rgb(0 0 0 / 58%),
    0 0 24px rgb(255 208 0 / 74%),
    0 0 48px rgb(255 96 0 / 46%);
  text-shadow: 0 1px rgb(255 255 255 / 40%);
}

.spin-button::after {
  border-color: rgb(255 255 255 / 22%);
  border-radius: 7px;
}

.spin-icon {
  border-color: rgb(16 24 39 / 28%);
  background: rgb(16 24 39 / 10%);
}

.spin-copy small {
  color: #2c260f;
}

.trust-row {
  display: block;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgb(216 174 76 / 30%);
  border-radius: 12px;
  background: linear-gradient(145deg, rgb(8 25 49 / 92%), rgb(3 12 27 / 96%));
}

.trust-row span {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  font-size: inherit;
  text-align: left;
}

.service-ledger h2 {
  margin: 0 0 9px;
  color: var(--gold-white);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.service-ledger-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-ledger-list li {
  display: grid;
  min-width: 0;
  min-height: 58px;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgb(148 175 203 / 18%);
  border-radius: 9px;
  background: rgb(4 16 33 / 78%);
}

.service-ledger-list .ledger-icon {
  display: inline-grid;
  width: 30px;
  min-height: 30px;
  place-items: center;
  border: 1px solid rgb(216 174 76 / 38%);
  border-radius: 7px;
  color: var(--gold-bright);
  background: rgb(216 174 76 / 7%);
  font-size: 0.56rem;
  font-weight: 900;
}

.service-ledger-list li > span:last-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.service-ledger-list b {
  color: #e9f2fb;
  font-size: clamp(0.57rem, 2.2vw, 0.66rem);
  letter-spacing: 0.025em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.service-ledger-list small {
  color: #8fa7bf;
  font-size: clamp(0.54rem, 2vw, 0.62rem);
  line-height: 1.25;
}

.experience-info {
  min-width: 0;
  margin-top: 8px;
  padding: clamp(12px, 3vw, 17px);
  border: 1px solid rgb(148 175 203 / 20%);
  border-radius: 12px;
  background: rgb(3 13 29 / 88%);
}

.section-heading span {
  display: block;
  margin-bottom: 4px;
  color: var(--gold-bright);
  font-size: 0.61rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.section-heading h2 {
  margin: 0;
  color: #e8f1fa;
  font-size: clamp(0.8rem, 3vw, 0.96rem);
  letter-spacing: 0.035em;
  line-height: 1.3;
}

.offer-disclosure {
  margin-top: 10px;
  border-top: 1px solid rgb(148 175 203 / 18%);
}

.offer-disclosure summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 2px;
  color: #cbd9e7;
  cursor: pointer;
  font-size: clamp(0.65rem, 2.5vw, 0.76rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  list-style: none;
}

.offer-disclosure summary::-webkit-details-marker {
  display: none;
}

.offer-disclosure summary span {
  width: 9px;
  height: 9px;
  flex: none;
  border-right: 2px solid var(--gold-bright);
  border-bottom: 2px solid var(--gold-bright);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 160ms ease;
}

.offer-disclosure[open] summary span {
  transform: rotate(225deg) translate(-2px, -2px);
}

.disclosure-body {
  display: grid;
  gap: 8px;
  padding: 2px 2px 5px;
  color: #9fb2c7;
  font-size: clamp(0.68rem, 2.55vw, 0.78rem);
  line-height: 1.55;
}

.disclosure-body p {
  margin: 0;
}

.disclosure-body strong {
  color: #e4edf6;
}

.game-catalog {
  border-color: rgb(216 174 76 / 30%);
  border-radius: 12px;
  background: linear-gradient(145deg, rgb(8 25 49 / 92%), rgb(3 12 27 / 96%));
  box-shadow: inset 0 1px rgb(255 245 205 / 7%), 0 10px 24px rgb(0 0 0 / 20%);
}

.game-catalog-list li {
  border-color: rgb(148 175 203 / 18%);
  border-radius: 8px;
  background: rgb(4 16 33 / 76%);
}

.compliance {
  display: grid;
  gap: 12px;
  margin-top: 10px;
  padding: 16px 12px max(8px, env(safe-area-inset-bottom));
  border-top: 1px solid rgb(216 174 76 / 26%);
  color: #8fa7bf;
  text-align: left;
}

.footer-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.footer-brand strong {
  color: #dce7f1;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.footer-brand span {
  color: var(--gold-bright);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: right;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.footer-nav a {
  display: inline-flex;
  min-height: 44px;
  flex: 1 1 90px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(148 175 203 / 18%);
  border-radius: 7px;
  color: #b8cadb;
  background: rgb(4 16 33 / 72%);
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-decoration: none;
}

.responsible-copy {
  display: grid;
  gap: 3px;
}

.responsible-copy strong {
  color: #c7d4e1;
  font-size: 0.7rem;
}

.responsible-copy p {
  margin: 0;
}

.primary-nav a:focus-visible,
.footer-nav a:focus-visible,
.offer-disclosure summary:focus-visible {
  outline: 3px solid var(--gold-white);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .primary-nav a:hover,
  .footer-nav a:hover {
    border-color: rgb(216 174 76 / 44%);
    color: var(--white);
    background: rgb(216 174 76 / 9%);
  }
}

@media (min-width: 600px) {
  .site-shell {
    padding-inline: 22px;
  }

  .topbar {
    min-height: 64px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
  }

  .primary-nav {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    padding: 2px;
  }

  .primary-nav a {
    min-width: 76px;
    flex: 0 1 auto;
  }

  .header-actions {
    grid-column: 3;
  }

  .arena-content {
    gap: 7px;
    padding: 11px;
  }

  .creative-copy {
    gap: 5px;
  }

  .game-card {
    padding: 9px;
  }

  .slot-machine {
    min-height: 390px;
    padding: 57px 12px 10px;
  }

  .machine-crown {
    min-height: 52px;
  }

  .zeus-guardian {
    top: 68px;
    left: -2px;
    width: 167px;
    height: 275px;
  }

  .multiplier-badge {
    top: 72px;
    right: 12px;
    width: 90px;
    min-height: 65px;
  }

  .multiplier-badge b {
    font-size: 1.75rem;
  }

  .reel-window {
    width: calc(100% - 126px);
    margin-left: 116px;
    padding: 7px;
  }

  .symbol-grid {
    gap: 4px;
  }

  .machine-status {
    min-height: 32px;
  }

  .spin-button {
    min-height: 74px;
  }
}

@media (max-width: 370px) {
  .site-shell {
    padding-inline:
      max(7px, env(safe-area-inset-left))
      max(7px, env(safe-area-inset-right));
  }

  .topbar {
    min-height: 51px;
    padding-top: max(4px, env(safe-area-inset-top));
  }

  .logo-mark {
    min-width: 50px;
    height: 38px;
  }

  .wordmark {
    display: none;
  }

  .sound-toggle {
    min-width: 99px;
    padding-inline: 10px;
    font-size: 0.62rem;
  }

  .service-ledger-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-brand {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-brand span {
    text-align: left;
  }

  .creative-stage {
    border-radius: 20px;
  }

  .arena-content {
    padding: 5px;
  }

  .game-card {
    padding: 5px;
  }

  .slot-machine {
    min-height: 266px;
    padding-inline: 7px;
    border-radius: 16px;
  }

  .zeus-guardian {
    left: -14px;
    width: 110px;
  }

  .reel-window {
    width: calc(100% - 72px);
    margin-left: 65px;
  }

  .spin-button {
    min-height: 66px;
  }
}

@media (orientation: portrait) and (max-height: 700px) {
  .primary-nav {
    display: none;
  }
}

@media (orientation: portrait) and (max-height: 560px) {
  .site-shell {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  .topbar {
    min-height: 46px;
    padding-block: max(2px, env(safe-area-inset-top)) 1px;
  }

  .primary-nav {
    display: none;
  }

  .logo-mark {
    height: 36px;
  }

  .creative-stage {
    border-radius: 18px;
  }

  .arena-content {
    gap: 2px;
    padding: 3px;
  }

  .creative-copy {
    gap: 1px;
    padding: 0 3px 1px;
  }

  .promo-proof {
    gap: 1px;
    padding: 3px 6px;
  }

  .promo-proof strong {
    font-size: clamp(0.49rem, 2.2vw, 0.62rem);
  }

  .promo-proof b {
    font-size: clamp(0.68rem, 3.1vw, 0.88rem);
  }

  .promo-proof small,
  .win-panel .promo-proof small {
    font-size: clamp(0.44rem, 1.85vw, 0.54rem);
  }

  .eyebrow {
    display: none;
  }

  .creative-copy h1 {
    gap: 5px;
  }

  .creative-copy h1 span {
    font-size: 0.92rem;
  }

  .creative-copy h1 strong {
    font-size: 1.55rem;
  }

  .offer-pills {
    gap: 3px;
  }

  .offer-pills span {
    padding: 2px 7px;
    font-size: 0.48rem;
  }

  .conversion-strip {
    min-height: 24px;
    gap: 4px;
    padding: 3px 7px;
    font-size: 0.48rem;
  }

  .game-card {
    gap: 3px;
    padding: 4px;
  }

  .game-heading {
    min-height: 21px;
  }

  .slot-machine {
    min-height: 220px;
    padding: 39px 6px 5px;
  }

  .slot-machine::before {
    inset: 34px 3px 3px;
  }

  .lightning-rail {
    top: 41px;
    bottom: 25px;
  }

  .machine-crown {
    min-height: 36px;
  }

  .machine-title {
    min-height: 30px;
  }

  .machine-title svg {
    width: 16px;
    height: 16px;
  }

  .machine-title b {
    font-size: 0.82rem;
  }

  .zeus-guardian {
    top: 42px;
    left: -12px;
    width: 100px;
    height: 150px;
  }

  .guardian-halo {
    width: 76px;
    height: 76px;
  }

  .multiplier-badge {
    top: 42px;
    right: 4px;
    width: 64px;
    min-height: 44px;
  }

  .multiplier-badge b {
    font-size: 1.18rem;
  }

  .reel-window {
    width: calc(100% - 67px);
    margin-left: 60px;
    padding: 3px;
  }

  .symbol-grid {
    aspect-ratio: 1.65 / 1;
    gap: 2px;
  }

  .machine-status {
    min-height: 21px;
    margin-top: 3px;
    padding-block: 1px;
  }

  .spin-button {
    min-height: 56px;
  }

  .spin-copy small,
  .game-hint {
    display: none;
  }

  .win-overlay {
    overflow-y: auto;
    padding:
      max(7px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(7px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
  }

  .win-panel {
    margin-block: 29px 3px;
    padding: 34px 12px 8px;
    border-radius: 19px;
  }

  .win-panel::before {
    inset: 5px;
    border-radius: 13px;
  }

  .win-panel::after {
    top: 27px;
  }

  .win-lightning {
    top: -29px;
    width: 60px;
    height: 60px;
  }

  .win-lightning::before {
    width: 29px;
    height: 40px;
  }

  .install-guide {
    margin: 4px 0;
  }

  .final-cta {
    min-height: 44px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .site-shell {
    width: min(100%, 900px);
    padding-inline: max(10px, env(safe-area-inset-left), env(safe-area-inset-right));
    padding-bottom: max(4px, env(safe-area-inset-bottom));
  }

  .topbar {
    min-height: 42px;
    padding-block: max(2px, env(safe-area-inset-top)) 2px;
  }

  .primary-nav {
    display: none;
  }

  .brand {
    min-height: 44px;
  }

  .logo-mark {
    height: 36px;
  }

  .sound-toggle {
    min-height: 44px;
  }

  .arena-content {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.7fr);
    align-items: center;
    gap: 7px;
    padding: 6px;
  }

  .creative-copy {
    align-content: center;
    gap: 7px;
    padding-inline: 8px;
  }

  .creative-copy h1 {
    align-items: center;
    flex-direction: column;
    gap: 1px;
  }

  .creative-copy h1 strong {
    font-size: clamp(1.8rem, 5vw, 2.5rem);
  }

  .offer-pills {
    align-items: stretch;
    flex-direction: column;
  }

  .conversion-strip {
    min-height: 26px;
    gap: 4px;
    padding: 4px 7px;
  }

  .conversion-strip span {
    font-size: 0;
  }

  .conversion-strip span::after {
    content: attr(data-short);
    font-size: 0.52rem;
  }

  .game-card {
    gap: 3px;
    padding: 4px;
  }

  .game-heading {
    display: none;
  }

  .slot-machine {
    min-height: 203px;
    padding: 35px 7px 5px;
  }

  .machine-crown {
    min-height: 33px;
  }

  .machine-title {
    min-height: 28px;
  }

  .machine-title svg {
    width: 15px;
    height: 15px;
  }

  .machine-title b {
    font-size: 0.78rem;
  }

  .zeus-guardian {
    top: 39px;
    left: -9px;
    width: 91px;
    height: 145px;
  }

  .guardian-halo {
    width: 72px;
    height: 72px;
  }

  .multiplier-badge {
    top: 39px;
    right: 5px;
    width: 66px;
    min-height: 45px;
  }

  .multiplier-badge b {
    font-size: 1.2rem;
  }

  .reel-window {
    width: calc(100% - 61px);
    margin-left: 55px;
    padding: 3px;
  }

  .symbol-grid {
    aspect-ratio: 2.1 / 1;
    gap: 2px;
  }

  .symbol-art {
    transform: scale(1.03);
  }

  .symbol[data-symbol="zeus"] .symbol-art,
  .symbol-zeus .symbol-art {
    transform: scale(1.1);
  }

  .machine-status {
    min-height: 21px;
    margin-top: 2px;
    padding-block: 2px;
  }

  .spin-button {
    min-height: 54px;
    font-size: 0.76rem;
  }

  .spin-copy small {
    display: none;
  }

  .spin-icon {
    width: 27px;
    height: 27px;
  }

  .game-hint {
    display: none;
  }

  .trust-row,
  .compliance {
    display: none;
  }

  .win-overlay {
    overflow-y: auto;
    padding:
      max(7px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(7px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }

  .win-panel {
    width: min(92%, 620px);
    margin-block: 29px 3px;
    padding: 34px 16px 8px;
    border-radius: 19px;
  }

  .win-panel::before {
    inset: 5px;
    border-radius: 13px;
  }

  .win-panel::after {
    top: 27px;
  }

  .win-lightning {
    top: -29px;
    width: 60px;
    height: 60px;
  }

  .win-lightning::before {
    width: 29px;
    height: 40px;
  }

  .win-panel > p {
    margin-block: 0 2px;
    font-size: 0.55rem;
  }

  .win-panel h2 {
    font-size: 2.35rem;
  }

  .win-panel > strong {
    margin-top: 2px;
    font-size: 1.95rem;
  }

  .win-panel > span {
    margin-block: 3px;
    font-size: 0.74rem;
  }

  .win-sound {
    min-height: 16px;
    margin-bottom: 3px;
    font-size: 0.5rem;
  }

  .win-sound i {
    height: 13px;
  }

  .redirect-countdown {
    min-height: 23px;
    margin-bottom: 3px;
    padding: 3px 8px 5px;
    font-size: 0.54rem;
  }

  .final-cta {
    min-height: 44px;
    font-size: 0.76rem;
  }

  .browser-fallback {
    min-height: 44px;
    margin-top: 4px;
    padding: 4px 8px;
  }

  .browser-fallback span {
    display: none;
  }

  .browser-fallback b {
    font-size: 0.64rem;
  }

  .win-panel small {
    margin-top: 3px;
    font-size: 0.61rem;
  }
}

@media (orientation: landscape) and (max-height: 340px) {
  .topbar {
    min-height: 36px;
  }

  .brand,
  .sound-toggle {
    min-height: 44px;
  }

  .logo-mark {
    height: 32px;
  }

  .arena-content {
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.9fr);
    gap: 5px;
    padding-block: 1px;
    padding-inline: 4px;
  }

  .creative-copy {
    gap: 4px;
    overflow: hidden;
    padding-inline: 2px;
  }

  .eyebrow {
    display: none;
  }

  .promo-proof {
    gap: 1px;
    padding: 2px 4px;
  }

  .promo-proof strong {
    font-size: 0.45rem;
    letter-spacing: 0.035em;
  }

  .promo-proof b {
    font-size: 0.6rem;
  }

  .promo-proof small,
  .win-panel .promo-proof small {
    font-size: 0.42rem;
  }

  .offer-pills {
    flex-direction: row;
    gap: 2px;
  }

  .offer-pills span {
    padding: 2px 4px;
    font-size: 0.44rem;
  }

  .offer-pills span:first-child {
    display: none;
  }

  .creative-copy h1 {
    width: 100%;
    min-width: 0;
  }

  .creative-copy h1 span {
    font-size: 1.18rem;
  }

  .creative-copy h1 strong {
    max-width: 100%;
    font-size: clamp(1.35rem, 4.2vw, 1.65rem);
  }

  .conversion-strip {
    max-width: 100%;
    gap: 2px;
    padding: 3px 4px;
  }

  .conversion-strip span::after {
    font-size: 0.44rem;
  }

  .game-card {
    gap: 1px;
    padding: 2px;
  }

  .slot-machine {
    min-height: 184px;
    padding-top: 32px;
  }

  .machine-crown {
    min-height: 30px;
  }

  .zeus-guardian {
    top: 35px;
    width: 84px;
    height: 132px;
  }

  .multiplier-badge {
    top: 35px;
  }

  .reel-window {
    width: calc(100% - 56px);
    margin-left: 50px;
  }

  .spin-button {
    min-height: 50px;
  }

  .win-panel {
    margin-block: 20px 2px;
    padding: 27px 14px 6px;
  }

  .win-lightning {
    top: -23px;
    width: 52px;
    height: 52px;
  }

  .win-panel > span,
  .win-sound {
    display: none;
  }

  .install-guide {
    margin: 3px 0;
    padding: 5px 9px;
  }

  .install-guide h3 {
    display: none;
  }

  .install-guide ol {
    gap: 1px;
  }

  .install-guide li {
    font-size: 0.62rem;
    line-height: 1.2;
  }
}

@media (prefers-contrast: more) {
  .game-card,
  .slot-machine,
  .reel-window,
  .symbol,
  .machine-status,
  .redirect-countdown {
    border-color: var(--gold-bright);
  }

  .game-hint,
  .compliance,
  .win-panel small {
    color: var(--marble);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .spin-button:not(:disabled),
  .spin-button:not(:disabled)::before {
    animation: none;
  }

  .is-spinning .symbol-grid,
  .slot-machine.is-spinning,
  .spin-button:active,
  .sound-toggle:active,
  .brand:active,
  .final-cta:active {
    transform: none;
  }

  .burst-rays,
  .coin-rain,
  .thunder-bolts,
  .shockwave,
  .electric-flash,
  .blast-core,
  .win-aura,
  .cell-impact,
  .cell-flash,
  .cell-branch-bolt,
  .cell-impact-core,
  .thunder-overload,
  .screen-winning::before {
    display: none;
  }

  .is-win .symbol[data-winning="true"],
  .is-win .symbol[data-winning="true"] .symbol-art,
  .slot-machine.is-win .multiplier-badge {
    animation: none;
  }

  .is-win .symbol[data-winning="true"] {
    filter: brightness(1.08);
    transform: none;
  }

  .is-win .symbol[data-winning="true"] .symbol-art {
    opacity: 0.58;
    transform: scale(0.82);
  }
}

@media (forced-colors: active) {
  .spin-button,
  .final-cta,
  .sound-toggle {
    border: 2px solid ButtonText;
  }

  .symbol-art,
  .guardian-art,
  .creative-picture {
    forced-color-adjust: none;
  }
}