/* =========================================================
   GLOBAL THEME TOKENS
   Ubah warna utama dari blok ini agar seluruh visual mengikuti
   satu sistem token tanpa warna belang.
   ========================================================= */
:root {
  color-scheme: dark;

  --font-main:
    "Google Sans Flex", "Figtree", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Arial, sans-serif;
  --font-display: "Oswald", "Figtree", ui-sans-serif, system-ui, sans-serif;

  /* Brand palette */
  --theme-bg: #061f4d;
  --theme-bg-rgb: 6 31 77;
  --theme-bg-deep: #061126;
  --theme-bg-deep-rgb: 6 17 38;
  --theme-ink: #031330;
  --theme-ink-rgb: 3 19 48;
  --theme-panel: #08285f;
  --theme-panel-rgb: 8 40 95;
  --theme-panel-strong: #0b3d82;
  --theme-panel-strong-rgb: 11 61 130;
  --theme-brand: #0d4aa4;
  --theme-brand-rgb: 13 74 164;
  --theme-accent: #2f8dff;
  --theme-accent-rgb: 47 141 255;
  --theme-cyan: #91e0ff;
  --theme-cyan-rgb: 145 224 255;
  --theme-gold-soft: #fff8cf;
  --theme-gold-soft-rgb: 255 248 207;
  --theme-gold: #ffdc5f;
  --theme-gold-rgb: 255 220 95;
  --theme-gold-deep: #db981d;
  --theme-gold-deep-rgb: 219 152 29;
  --theme-gold-ink: #763707;
  --theme-danger: #ff4d4d;
  --theme-danger-mid: #e30024;
  --theme-danger-deep: #8f0013;
  --theme-danger-rgb: 255 77 77;

  /* Global glass blue theme, controlled by admin visual settings */
  --glass-theme-base: var(--theme-brand);
  --glass-theme-base-rgb: var(--theme-brand-rgb);
  --glass-theme-accent: var(--theme-accent);
  --glass-theme-accent-rgb: var(--theme-accent-rgb);
  --glass-theme-cyan: var(--theme-cyan);
  --glass-theme-cyan-rgb: var(--theme-cyan-rgb);
  --glass-theme-alpha: 0.30;
  --glass-theme-alpha-strong: 0.42;
  --glass-theme-blur: 12px;

  /* Semantic tokens */
  --surface-page: var(--theme-bg);
  --surface-panel: rgb(var(--theme-panel-rgb) / 0.86);
  --surface-panel-soft: rgb(var(--theme-panel-rgb) / 0.22);
  --surface-panel-strong: rgb(var(--theme-panel-strong-rgb) / 0.90);
  --surface-glass: rgb(var(--glass-theme-base-rgb) / var(--glass-theme-alpha));
  --surface-glass-strong: rgb(var(--glass-theme-accent-rgb) / var(--glass-theme-alpha-strong));
  --surface-input: rgb(var(--theme-ink-rgb) / 0.42);
  --surface-input-focus: rgb(var(--theme-panel-strong-rgb) / 0.56);
  --surface-backdrop: rgb(var(--theme-ink-rgb) / 0.62);

  --text-main: rgb(255 255 255 / 0.98);
  --text-soft: rgb(230 241 255 / 0.82);
  --text-muted: rgb(219 236 255 / 0.72);
  --text-placeholder: rgb(var(--theme-cyan-rgb) / 0.64);
  --line-soft: rgb(var(--theme-cyan-rgb) / 0.22);
  --line-mid: rgb(var(--theme-cyan-rgb) / 0.32);
  --line-strong: rgb(var(--theme-cyan-rgb) / 0.48);
  --shadow-soft: rgb(0 12 34 / 0.14);
  --shadow-deep: rgb(0 10 28 / 0.23);

  /* Compatibility aliases */
  --bg: var(--theme-bg);
  --bg-image-desktop: none;
  --bg-image-mobile: none;
  --panel: var(--theme-panel);
  --panel-2: var(--theme-panel-strong);
  --gold-1: var(--theme-gold-soft);
  --gold-2: var(--theme-gold);
  --gold-3: var(--theme-gold-deep);
  --gold-4: var(--theme-gold-ink);
  --line: rgb(var(--theme-gold-rgb) / 0.72);
  --ring-edge: rgb(255 255 255 / 0.18);
  --metal-outline: rgb(34 62 110 / 0.78);

  --blue-depth-0: var(--theme-bg-deep);
  --blue-depth-1: #092653;
  --blue-depth-2: var(--theme-brand);
  --blue-depth-3: var(--theme-accent);
  --blue-depth-cyan: rgb(98 216 255 / 0.42);
  --blue-depth-royal: rgb(55 137 255 / 0.36);
  --blue-depth-ink: rgb(var(--theme-ink-rgb) / 0.68);

  --wheel-canvas-base: #061328;
  --wheel-segment-a: #0e73ff;
  --wheel-segment-b: #052b66;
  --wheel-segment-c: #0a4eb8;
  --wheel-segment-d: #137fff;
  --wheel-segment-e: #05285f;
  --wheel-segment-f: #0d70ff;
  --wheel-segment-g: #084bb0;
  --wheel-segment-h: #1278ff;
  --wheel-segment-i: #062d70;
  --wheel-segment-j: #0a54c2;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  --app-w: 100vw;
  --app-h: 100dvh;
  --stage-x: clamp(10px, 3vw, 24px);
  --stage-y: clamp(8px, 1.8dvh, 20px);
  --layout-gap: clamp(10px, 1.2dvh, 16px);
  --usable-h: calc(
    var(--app-h) - var(--safe-top) - var(--safe-bottom) - (var(--stage-y) * 2)
  );

  --plate-w: clamp(190px, min(48vw, 28dvh), 330px);
  --plate-h: calc(var(--plate-w) * 0.42);
  --ring-size: clamp(14px, min(2.75vw, 2.95dvh), 27px);
  --pointer-image-url: url("https://i.postimg.cc/kMNtHm1G/Pointer-Arrow.png");
  --pointer-tip-start-ratio: 0;
  --pointer-tip-length-ratio: 0.94;
  --pointer-overflow: clamp(64px, 11dvh, 118px);
  --visual-zoom-counter-scale: 1;
  --wheel-panel-y: calc(var(--pointer-overflow) * 0.22);

  --coupon-panel-h: clamp(48px, 6.2dvh, 62px);
  --coupon-gap: clamp(9px, 1.05dvh, 14px);
  --wheel-outer-max-w: calc(var(--app-w) - (var(--stage-x) * 2) - 8px);
  --wheel-outer-slot-h: calc(
    var(--usable-h) - var(--coupon-panel-h) - var(--coupon-gap) -
      var(--pointer-overflow)
  );
  --wheel-outer-size: clamp(
    220px,
    min(var(--wheel-outer-max-w), var(--wheel-outer-slot-h)),
    604px
  );
  --wheel-size: calc(var(--wheel-outer-size) - (var(--ring-size) * 2));
  --coupon-panel-w: min(calc(var(--wheel-outer-size) * 0.98), 456px);

  --toast-edge: clamp(8px, 1.05vw, 22px);
  --toast-w-fluid: clamp(286px, 22vw, 328px);
  --toast-radius-fluid: clamp(12px, 0.75vw, 16px);
  --toast-pad-y-fluid: clamp(10px, 0.62vw, 13px);
  --toast-pad-x-fluid: clamp(14px, 0.86vw, 18px);
  --toast-title-fluid: clamp(11px, 0.76vw, 13.6px);
  --toast-message-fluid: clamp(8.6px, 0.62vw, 11.6px);
  --toast-button-h-fluid: clamp(28px, 1.75vw, 36px);
  --toast-button-font-fluid: clamp(8.7px, 0.62vw, 11.2px);
  --toast-action-gap-fluid: clamp(7px, 0.5vw, 10px);

  --fx-glow-y: clamp(3px, 0.42vw, 8px);
  --fx-glow-blur: clamp(8px, 1vw, 18px);
  --fx-glow-gold-soft: rgb(var(--theme-gold-rgb) / 0.24);
  --fx-glow-gold-mid: rgb(var(--theme-gold-rgb) / 0.14);
  --fx-edge-gold: rgb(var(--theme-gold-rgb) / 0.62);
  --fx-shine-alpha: 0.44;
  --fx-shine-speed: 2.65s;
  --fx-glow-speed: 2.3s;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--theme-bg);
  color: var(--text-main);
  font-family: var(--font-main);
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html.visual-zoom-lock,
html.visual-zoom-lock body {
  overscroll-behavior: none;
}

html.visual-zoom-lock {
  touch-action: manipulation;
}

body {
  position: relative;
  min-height: 100dvh;
  background-color: var(--bg);
  background-image: var(--bg-image-desktop);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

html.gate-active body::before,
html.gate-active body::after {
  opacity: 0;
  visibility: hidden;
}

body::before {
  z-index: 0;
  background:
    linear-gradient(180deg, rgb(var(--theme-ink-rgb) / 0.18), rgb(var(--theme-bg-deep-rgb) / 0.28)),
    radial-gradient(circle at 18% 12%, rgb(var(--theme-cyan-rgb) / 0.08), transparent 34%),
    radial-gradient(circle at 84% 82%, rgb(var(--theme-accent-rgb) / 0.10), transparent 34%);
  -webkit-backdrop-filter: blur(8px) saturate(1.04);
  backdrop-filter: blur(8px) saturate(1.04);
}

body::after {
  z-index: 0;
  inset: -20px;
  background-image: var(--bg-image-desktop);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0.24;
  filter: blur(14px) saturate(1.02);
  transform: scale(1.04);
  transform-origin: center;
  mix-blend-mode: screen;
}

button,
input {
  font: inherit;
}

button {
  border: 0;
}

.stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: calc(var(--safe-top) + var(--stage-y)) var(--stage-x)
    calc(var(--safe-bottom) + var(--stage-y));
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}

.stage::before {
  content: none;
}

.stage::after {
  content: none;
}

.art-board {
  position: relative;
  width: min(100%, 1120px);
  height: min(
    var(--usable-h),
    calc(100dvh - var(--safe-top) - var(--safe-bottom) - (var(--stage-y) * 2))
  );
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: visible;
  transform: translate3d(0, 0, 0);
  contain: layout style;
  background: transparent;
  transition:
    opacity 0.28s ease,
    filter 0.28s ease,
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.layout-shell {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  align-content: center;
  gap: var(--layout-gap);
  background: transparent;
}

.wheel-panel {
  width: min(100%, calc(var(--wheel-outer-size) + 32px));
  height: auto;
  max-height: var(--usable-h);
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  place-items: center;
  align-content: center;
  gap: var(--coupon-gap);
  margin: 0 auto;
  padding: 0;
  overflow: visible;
  background: transparent;
  transform: translate3d(0, var(--wheel-panel-y), 0) scale(var(--visual-zoom-counter-scale));
  transform-origin: 50% 50%;
  contain: layout style;
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease,
    filter 0.28s ease;
}

/* Desktop zoom hardening: the fixed stage always follows the real viewport,
   while wheel sizing remains controlled by the app variables. This prevents
   the wheel from being pinned to the old top-left viewport during browser zoom-out. */
@media (min-width: 900px) {
  .stage {
    place-items: center;
  }

  .art-board {
    margin: auto;
  }
}

.stage.modal-open .art-board {
  opacity: 0.76;
  filter: blur(1.15px) saturate(0.99);
}

.stage.is-gate-open .art-board {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  filter: none;
  transform: scale(0.985);
}

.stage.is-gate-open .wheel-panel {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, var(--wheel-panel-y), 0) scale(calc(var(--visual-zoom-counter-scale) * 0.97));
}

.stage.is-boot-lock .art-board {
  opacity: 0;
  filter: none;
  transform: scale(0.985);
}

.stage.is-boot-lock .wheel-panel {
  opacity: 0;
  pointer-events: none;
}

.brand-plate {
  display: none;
  position: relative;
  width: var(--plate-w);
  height: var(--plate-h);
  z-index: 30;
  place-items: center;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
}

.brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

.brand-fallback-mark {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.6vw, 14px);
  padding: clamp(10px, 2.2vw, 18px);
  border: 1px solid rgba(255, 220, 95, 0.34);
  border-radius: clamp(16px, 3vw, 28px);
  background:
    linear-gradient(135deg, rgba(16, 31, 55, 0.92), rgba(7, 14, 26, 0.92)),
    radial-gradient(
      circle at 25% 20%,
      rgba(255, 220, 95, 0.18),
      transparent 46%
    );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.brand-plate.is-empty .brand-logo {
  display: none;
}

.brand-plate.is-empty .brand-fallback-mark {
  display: flex;
}

.fallback-cube,
.win-cube {
  position: relative;
  width: clamp(34px, 7vw, 48px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  border-radius: 11px;
  background: linear-gradient(
    135deg,
    var(--theme-gold) 0 34%,
    var(--theme-cyan) 35% 62%,
    rgb(246 247 251) 63% 100%
  );
  box-shadow: inset 0 -8px 12px rgba(0, 0, 0, 0.22);
  transform: rotate(45deg) scale(0.86);
}

.fallback-cube::after,
.win-cube::after {
  content: "";
  position: absolute;
  inset: 29%;
  border-radius: 4px;
  background: rgba(4, 9, 18, 0.72);
}

.fallback-brand-text,
.win-brand-copy {
  display: grid;
  font-family: var(--font-display);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fallback-brand-text strong,
.win-brand-copy strong {
  color: var(--theme-gold);
  font-size: clamp(23px, 5.2vw, 38px);
  font-weight: 950;
}

.fallback-brand-text span,
.win-brand-copy span {
  margin-top: 0.18em;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(12px, 2.8vw, 20px);
  font-weight: 900;
}

.wheel-stack {
  position: relative;
  z-index: 5;
  width: var(--wheel-outer-size);
  min-width: var(--wheel-outer-size);
  max-width: var(--wheel-outer-size);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: var(--ring-size);
  margin: 0 auto;
  overflow: visible;
  transform: translate3d(0, 0, 0);
  contain: layout style;
}

.wheel-metal {
  --liquid-metal-light: #f8fbff;
  --liquid-metal-mid: #a9b6c9;
  --liquid-metal-steel: #5f6d82;
  --liquid-metal-shadow: #060a12;
  --liquid-metal-core: #111827;
  --liquid-metal-speed: 14s;
  --liquid-metal-pulse: 0.58;
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: 50%;
  pointer-events: none;
  isolation: isolate;
  background:
    radial-gradient(
      circle at 50% 50%,
      transparent 0 85.8%,
      rgba(255, 255, 255, 0.82) 86.7%,
      rgba(211, 223, 241, 0.98) 88.9%,
      rgba(90, 104, 126, 0.98) 91.4%,
      rgba(9, 15, 27, 1) 94.5%,
      rgba(38, 49, 68, 0.99) 96.4%,
      rgba(245, 249, 255, 0.96) 98.2%,
      rgba(13, 19, 31, 1) 100%
    ),
    conic-gradient(
      from 18deg,
      #fbfdff 0deg,
      #b9c6d8 18deg,
      #354055 42deg,
      #050914 67deg,
      #253047 90deg,
      #f8fbff 116deg,
      #69788f 142deg,
      #101827 168deg,
      #ffffff 207deg,
      #7d8da5 236deg,
      #182238 267deg,
      #f5f9ff 296deg,
      #46546e 329deg,
      #fbfdff 360deg
    );
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.7),
    inset 0 -9px 11px rgba(1, 5, 13, 0.46),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 0 3px rgba(8, 14, 26, 0.96),
    0 var(--fx-glow-y) var(--fx-glow-blur) rgba(0, 0, 0, 0.2);
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  contain: layout paint style;
}

.wheel-metal::before,
.wheel-metal-shader,
.wheel-metal-shader::before,
.wheel-metal-shader::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.wheel-metal::before {
  inset: clamp(5px, 0.95vw, 9px);
  z-index: 2;
  background:
    radial-gradient(
      circle at 50% 50%,
      transparent 0 86.5%,
      rgba(252, 255, 255, 0.58) 88.1%,
      rgba(150, 167, 194, 0.28) 91.2%,
      transparent 94.6%,
      rgba(255, 255, 255, 0.34) 97.4%,
      transparent 100%
    ),
    conic-gradient(
      from -18deg,
      rgba(255, 255, 255, 0.64) 0deg,
      rgba(91, 103, 123, 0.2) 30deg,
      rgba(255, 255, 255, 0.5) 61deg,
      rgba(24, 32, 48, 0.34) 96deg,
      rgba(255, 255, 255, 0.58) 132deg,
      rgba(66, 78, 98, 0.26) 180deg,
      rgba(255, 255, 255, 0.54) 226deg,
      rgba(17, 25, 40, 0.38) 280deg,
      rgba(255, 255, 255, 0.62) 360deg
    );
  opacity: 0.58;
  mix-blend-mode: screen;
  transform: translate3d(0, 0, 0) rotate(0deg);
  animation: wheel-metal-sheen var(--liquid-metal-speed) linear infinite;
  will-change: transform, opacity;
}

.wheel-metal-shader {
  inset: -1px;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  contain: strict;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 86%, rgba(255, 255, 255, 0.12) 88%, transparent 100%),
    conic-gradient(
      from 100deg,
      rgba(255, 255, 255, 0.78),
      rgba(83, 95, 117, 0.26),
      rgba(3, 7, 14, 0.62),
      rgba(255, 255, 255, 0.7),
      rgba(61, 73, 94, 0.3),
      rgba(255, 255, 255, 0.78)
    );
  -webkit-mask: radial-gradient(circle, transparent 0 85.8%, #000 87.2% 100%);
  mask: radial-gradient(circle, transparent 0 85.8%, #000 87.2% 100%);
  transition: opacity 0.32s ease;
  mix-blend-mode: screen;
}

.wheel-metal.is-css-liquid .wheel-metal-shader,
.wheel-metal.is-shader-ready .wheel-metal-shader {
  opacity: 0.48;
}

.wheel-metal.is-shader-ready .wheel-metal-shader {
  background: transparent;
  opacity: 0.62;
}

.wheel-metal-shader > canvas,
.wheel-metal-shader > svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit;
}

.wheel-metal-shader::before {
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 86.7%, rgba(255, 255, 255, 0.36) 88.6%, transparent 94.5%),
    conic-gradient(
      from 45deg,
      transparent 0deg,
      rgba(255, 255, 255, 0.36) 24deg,
      transparent 54deg,
      rgba(4, 8, 16, 0.42) 92deg,
      transparent 128deg,
      rgba(255, 255, 255, 0.28) 186deg,
      transparent 240deg,
      rgba(0, 0, 0, 0.36) 300deg,
      transparent 360deg
    );
  opacity: 0.52;
}

.wheel-metal-shader::after {
  inset: 0;
  z-index: 3;
  background: radial-gradient(circle at 50% 50%, transparent 0 88%, rgba(255, 255, 255, 0.18) 91%, transparent 98%);
  opacity: 0.72;
}

.wheel-metal.is-spinning {
  --liquid-metal-speed: 7.8s;
}

.wheel-metal.is-spinning::before {
  opacity: 0.68;
}

.wheel-metal.is-spinning .wheel-metal-shader {
  opacity: 0.74;
}

.wheel-metal::after {
  content: none;
  display: none;
}

@keyframes wheel-metal-sheen {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 0.5;
  }
  50% {
    transform: translate3d(0, 0, 0) rotate(180deg);
    opacity: 0.62;
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(360deg);
    opacity: 0.5;
  }
}

.wheel-canvas {
  position: relative;
  z-index: 2;
  display: block;
  width: var(--wheel-size);
  height: var(--wheel-size);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transform: translateZ(0) rotate(0rad);
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
  contain: strict;
}

.wheel-gloss {
  position: absolute;
  z-index: 3;
  width: var(--wheel-size);
  height: var(--wheel-size);
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.06) 0%,
    transparent 30%,
    transparent 74%,
    rgba(0, 0, 0, 0.09) 100%
  );
  opacity: 0.16;
}

/* PNG pointer: anchored to the outer wheel ring, stable across mobile/desktop/browser zoom. */
.pointer {
  --pointer-size: clamp(52px, calc(var(--wheel-outer-size) * 0.15), 304px);
  --pointer-x: 0px;
  --pointer-overlap: clamp(8px, calc(var(--wheel-outer-size) * 0.026), 16px);
  --pointer-y: 48px;
  --pointer-top: calc(var(--pointer-overlap) - var(--pointer-size));

  position: absolute;
  left: calc(50% + var(--pointer-x));
  top: calc(var(--pointer-lock-top, var(--pointer-top)) + var(--pointer-y));
  z-index: 30;
  width: var(--pointer-size);
  height: var(--pointer-size);
  min-width: var(--pointer-size);
  min-height: var(--pointer-size);
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  background-image: var(--pointer-image-url);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  visibility: visible;
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
  transform-origin: 50% 78%;
  transform-box: border-box;
  will-change: transform;
  backface-visibility: hidden;
  contain: layout style;
  filter:
    drop-shadow(0 3px 4px rgba(0, 0, 0, 0.32))
    drop-shadow(0 0 7px rgba(255, 223, 118, 0.16));
}

.pointer-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  image-rendering: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.pointer.is-pointer-ready {
  background-image: var(--pointer-image-url);
}

.pointer.is-pointer-error {
  background-image: var(--pointer-image-url);
}

.pointer.is-pointer-error .pointer-img {
  display: none;
}

.pointer::before,
.pointer::after {
  content: none;
  display: none;
}

.spin-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 14;
  width: clamp(68px, calc(var(--wheel-size) * 0.225), 122px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgb(var(--theme-gold-deep-rgb) / 0.72);
  border-radius: 50%;
  color: var(--theme-gold-ink);
  cursor: pointer;
  font-family: inherit;
  font-synthesis: none;
  background: radial-gradient(
    circle at 50% 38%,
    var(--theme-gold-soft) 0%,
    var(--theme-gold) 36%,
    var(--theme-gold-deep) 63%,
    var(--theme-gold-ink) 100%
  );
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.56),
    inset 0 -5px 7px rgb(var(--theme-gold-deep-rgb) / 0.22),
    0 4px 8px rgba(0, 0, 0, 0.18);
  transform: translate3d(-50%, -50%, 0);
  transition:
    transform 0.14s ease,
    filter 0.14s ease;
  will-change: transform;
  overflow: hidden;
  isolation: isolate;
}

.spin-btn::before {
  content: "";
  position: absolute;
  inset: clamp(5px, 1.1vw, 8px);
  border: 1px solid rgb(var(--theme-gold-soft-rgb) / 0.34);
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 50% 28%,
      rgba(255, 255, 255, 0.7) 0%,
      rgb(var(--theme-gold-soft-rgb) / 0.48) 22%,
      rgb(var(--theme-gold-rgb) / 0.08) 54%,
      transparent 72%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0) 46%,
      rgb(var(--theme-gold-deep-rgb) / 0.10) 100%
    );
}

.spin-btn:active {
  transform: translate3d(-50%, -50%, 0) scale(0.965);
}

.spin-btn:disabled {
  cursor: not-allowed;
  filter: saturate(0.9) brightness(0.94);
}

.spin-btn .spin-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  height: 100%;
  padding: 0 8%;
  color: var(--theme-gold-ink);
  font-family: var(--font-display);
  font-size: clamp(12px, calc(var(--wheel-size) * 0.041), 22px);
  font-weight: 950;
  font-kerning: none;
  line-height: 1;
  letter-spacing: 0.006em;
  text-align: center;
  text-shadow: 0 1px 0 rgb(var(--theme-gold-soft-rgb) / 0.38);
  white-space: nowrap;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
}

.spin-btn .spin-word {
  display: block;
  width: 100%;
  line-height: 0.92;
  text-align: center;
}

.spin-btn small {
  display: block;
  width: 100%;
  margin-top: clamp(4px, calc(var(--wheel-size) * 0.018), 8px);
  color: var(--theme-gold-ink);
  font-family: var(--font-main);
  font-size: clamp(7.5px, calc(var(--wheel-size) * 0.021), 11px);
  font-weight: 850;
  font-kerning: none;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0.005em;
  text-align: center;
  text-shadow: none;
  white-space: nowrap;
}

.spin-btn small b,
#chanceText {
  display: inline-block;
  min-width: 1ch;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}

.spinwheel-badge {
  position: absolute;
  top: clamp(2px, calc(var(--wheel-size) * 0.012), 5px);
  right: clamp(2px, calc(var(--wheel-size) * 0.012), 5px);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(16px, calc(var(--wheel-size) * 0.044), 22px);
  height: clamp(16px, calc(var(--wheel-size) * 0.044), 22px);
  padding: 2px 5px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: var(--text-main);
  font-family: var(--font-main);
  font-size: clamp(8px, calc(var(--wheel-size) * 0.02), 10px);
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.035em;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 35% 20%,
      rgba(255, 255, 255, 0.48),
      transparent 38%
    ),
    linear-gradient(135deg, var(--theme-danger) 0%, var(--theme-danger-mid) 48%, var(--theme-danger-deep) 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 4px 10px rgba(255, 0, 32, 0.28),
    0 0 14px rgba(255, 32, 64, 0.24);
  transform: translate3d(0, 0, 0);
}

.spinwheel-badge[hidden] {
  display: none;
}

/* Coupon input: frontend only submits code to Worker KV. Generator/list UI is intentionally removed. */
.coupon-panel {
  position: relative;
  z-index: 18;
  width: min(
    var(--coupon-panel-w),
    calc(var(--app-w) - (var(--stage-x) * 2) - 8px)
  );
  height: var(--coupon-panel-h);
  min-height: var(--coupon-panel-h);
  max-height: var(--coupon-panel-h);
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  justify-self: center;
  align-self: start;
  padding: clamp(7px, calc(var(--coupon-panel-h) * 0.14), 10px);
  margin: 0 auto;
  border: 1px solid rgb(var(--glass-theme-cyan-rgb) / 0.26);
  border-radius: var(--toast-radius-fluid);
  color: rgba(255, 255, 255, 0.97);
  background:
    radial-gradient(circle at 12% 0%, rgb(var(--theme-cyan-rgb) / 0.22), transparent 42%),
    radial-gradient(circle at 88% 100%, rgb(var(--theme-accent-rgb) / 0.22), transparent 46%),
    linear-gradient(180deg, rgb(var(--theme-brand-rgb) / 0.86) 0%, rgb(var(--theme-panel-rgb) / 0.90) 100%);
  -webkit-backdrop-filter: blur(clamp(8px, 0.72vw, 14px)) saturate(1.08);
  backdrop-filter: blur(clamp(8px, 0.72vw, 14px)) saturate(1.08);
  box-shadow:
    0 var(--fx-glow-y) var(--fx-glow-blur) rgb(var(--theme-ink-rgb) / 0.28),
    0 0 0 1px rgb(var(--theme-accent-rgb) / 0.08) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  isolation: isolate;
  contain: paint style;
}

.coupon-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 58%),
    linear-gradient(
      112deg,
      transparent 18%,
      rgb(var(--theme-cyan-rgb) / 0.08) 44%,
      transparent 72%
    );
  opacity: 0.78;
}

.coupon-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  min-height: 0;
}

.coupon-input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  margin: 0;
  border: 1px solid rgb(var(--theme-cyan-rgb) / 0.22);
  border-radius: 999px;
  outline: none;
  padding-inline: clamp(14px, calc(var(--coupon-panel-w) * 0.042), 20px);
  color: rgba(255, 255, 255, 0.94);
  font-family: var(--font-main);
  font-size: clamp(10px, calc(var(--coupon-panel-w) * 0.028), 13px);
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: center;
  background: var(--surface-input);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
  white-space: nowrap;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coupon-input::placeholder {
  color: var(--text-placeholder);
  letter-spacing: 0.045em;
}

.coupon-input {
  -webkit-tap-highlight-color: transparent;
}

.coupon-input:focus,
.coupon-input:focus-visible {
  outline: none;
  border-color: rgba(255, 255, 255, 0.14);
  background: var(--surface-input);
  box-shadow: none;
}

.coupon-input.is-loading {
  cursor: progress;
  opacity: 0.78;
}

.toast-host {
  position: fixed;
  left: calc(var(--safe-left) + var(--toast-edge));
  top: calc(var(--safe-top) + var(--toast-edge));
  z-index: 180;
  display: grid;
  justify-items: start;
  gap: clamp(6px, 0.48vw, 10px);
  width: min(
    var(--toast-w-fluid),
    calc(var(--app-w) - var(--safe-left) - (var(--toast-edge) * 2))
  );
  max-width: min(
    var(--toast-w-fluid),
    calc(var(--app-w) - var(--safe-left) - (var(--toast-edge) * 2))
  );
  pointer-events: none;
}

.app-toast {
  position: relative;
  display: grid;
  align-content: center;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  padding: var(--toast-pad-y-fluid) var(--toast-pad-x-fluid);
  border: 1px solid rgb(var(--glass-theme-cyan-rgb) / 0.24);
  border-radius: var(--toast-radius-fluid);
  color: rgba(255, 255, 255, 0.96);
  text-decoration: none;
  cursor: default;
  pointer-events: auto;
  background:
    linear-gradient(180deg, rgb(var(--glass-theme-base-rgb) / var(--glass-theme-alpha-strong)) 0%, rgb(var(--glass-theme-base-rgb) / var(--glass-theme-alpha)) 100%),
    radial-gradient(circle at 12% 0%, rgb(var(--glass-theme-cyan-rgb) / 0.22), transparent 42%),
    radial-gradient(circle at 88% 100%, rgb(var(--glass-theme-accent-rgb) / 0.20), transparent 46%),
    rgb(var(--theme-ink-rgb) / 0.18);
  -webkit-backdrop-filter: blur(var(--glass-theme-blur)) saturate(1.08);
  backdrop-filter: blur(var(--glass-theme-blur)) saturate(1.08);
  box-shadow:
    0 8px 18px rgb(var(--glass-theme-base-rgb) / 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  opacity: 0;
  overflow: hidden;
  isolation: isolate;
  contain: paint style;
  transform: translate3d(-10px, -10px, 0) scale(0.985);
  transition:
    opacity 0.24s ease,
    transform 0.28s cubic-bezier(0.18, 0.82, 0.22, 1),
    filter 0.22s ease,
    box-shadow 0.22s ease;
  will-change: opacity, transform;
}

.app-toast.show {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.app-toast::before {
  content: none;
}

.app-toast::after,
.win-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 58%),
    linear-gradient(
      112deg,
      transparent 20%,
      rgba(255, 255, 255, 0.028) 44%,
      transparent 70%
    );
  opacity: 0.62;
}

.app-toast.toast-success::before,
.app-toast.is-coupon-success::before,
.app-toast.is-welcome::before {
  background: linear-gradient(180deg, rgb(var(--glass-theme-cyan-rgb) / 0.98) 0%, rgb(var(--glass-theme-accent-rgb) / 0.98) 100%);
  box-shadow:
    0 0 16px rgb(var(--glass-theme-accent-rgb) / 0.30),
    0 0 28px rgb(var(--glass-theme-cyan-rgb) / 0.14);
}

.app-toast.toast-error::before,
.app-toast.is-empty::before {
  background: linear-gradient(180deg, rgb(var(--glass-theme-cyan-rgb) / 0.96) 0%, rgb(var(--glass-theme-accent-rgb) / 0.96) 100%);
  box-shadow: 0 0 14px rgb(var(--glass-theme-accent-rgb) / 0.22);
}

.app-toast strong,
.app-toast span,
.app-toast-actions {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.app-toast strong {
  color: rgba(255, 255, 255, 0.985);
  font-family: var(--font-main);
  font-size: var(--toast-title-fluid);
  font-weight: 950;
  line-height: 1.16;
  letter-spacing: -0.012em;
  white-space: normal;
}

.app-toast span {
  margin-top: clamp(1px, 0.15vw, 3px);
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-main);
  font-size: var(--toast-message-fluid);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.006em;
}

.app-toast-actions {
  display: flex;
  width: 100%;
  margin-top: var(--toast-action-gap-fluid);
}

.app-toast-button,
.toast-action-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--toast-button-h-fluid);
  min-height: var(--toast-button-h-fluid);
  border: 1px solid rgb(var(--glass-theme-cyan-rgb) / 0.16);
  border-radius: 999px;
  padding: 0 clamp(12px, 0.9vw, 19px);
  color: rgba(255, 255, 255, 0.98);
  cursor: pointer;
  font-family: var(--font-main);
  font-size: var(--toast-button-font-fluid);
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.045em;
  white-space: nowrap;
  background: rgb(var(--glass-theme-accent-rgb));
  box-shadow: none;
  overflow: hidden;
  isolation: isolate;
  contain: paint style;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition:
    background-color 0.18s ease,
    transform 0.16s ease,
    filter 0.18s ease,
    box-shadow 0.18s ease;
  animation: none;
  will-change: transform, filter;
}

.app-toast-button::before,
.toast-action-btn::before,
.app-toast-button::after,
.toast-action-btn::after {
  content: none;
  display: none;
}

.app-toast-button:hover,
.toast-action-btn:hover {
  background: rgb(var(--glass-theme-accent-rgb));
  transform: translateY(-1px) translateZ(0);
  filter: brightness(1.06);
  box-shadow: none;
}

.app-toast-button:active,
.toast-action-btn:active {
  transform: scale(0.976);
  filter: brightness(0.985);
}

.gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(16px, 2vw, 28px);
  overflow: hidden;
  isolation: isolate;
  background: rgb(var(--theme-bg-deep-rgb) / 0.58);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.34s ease,
    visibility 0.34s ease;
}

.gate-overlay::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: -2;
  background-image: var(--bg-image-desktop);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0.74;
  filter: blur(7px) saturate(1.04);
  transform: translateZ(0) scale(1.035);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.gate-overlay::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(var(--theme-ink-rgb) / 0.48) 0%, rgb(var(--theme-bg-deep-rgb) / 0.68) 100%),
    radial-gradient(circle at 18% 12%, rgb(var(--theme-cyan-rgb) / 0.10), transparent 34%),
    radial-gradient(circle at 82% 84%, rgb(var(--theme-accent-rgb) / 0.12), transparent 30%);
}

.gate-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.gate-overlay.is-closing {
  opacity: 0;
}

.gate-overlay.is-closing .gate-card {
  opacity: 0;
  transform: translate3d(0, -14px, 0) scale(0.982);
}

.gate-overlay.is-closing .gate-history-btn {
  opacity: 0;
}

.stage.is-spin-reveal .art-board {
  animation: spinPageReveal 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.stage.is-spin-reveal .wheel-panel {
  animation: wheelPanelReveal 0.68s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes spinPageReveal {
  from {
    opacity: 0;
    filter: blur(8px) saturate(0.94);
    transform: translate3d(0, 18px, 0) scale(0.982);
  }

  to {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes wheelPanelReveal {
  from {
    opacity: 0;
    filter: blur(5px) saturate(0.96);
    transform: translate3d(0, calc(var(--wheel-panel-y) + 22px), 0) scale(calc(var(--visual-zoom-counter-scale) * 0.94));
  }

  to {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: translate3d(0, var(--wheel-panel-y), 0) scale(var(--visual-zoom-counter-scale));
  }
}

.gate-history-btn {
  position: absolute;
  top: calc(var(--safe-top) + 14px);
  right: calc(var(--safe-right) + 14px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 0 13px 0 11px;
  color: rgba(255, 255, 255, 0.95);
  background: rgb(var(--theme-ink-rgb) / 0.22);
  -webkit-backdrop-filter: blur(8px) saturate(1.02);
  backdrop-filter: blur(8px) saturate(1.02);
  box-shadow: 0 8px 20px rgba(0, 16, 44, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transform: translateZ(0);
  transition:
    opacity 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease;
}

.gate-history-icon {
  display: block;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.94;
}

.gate-history-btn span {
  display: inline-block;
  color: currentColor;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.gate-history-btn:hover,
.gate-history-btn:focus-visible,
.gate-history-btn:active {
  opacity: 1;
  background: rgb(var(--theme-ink-rgb) / 0.28);
  border-color: rgba(255, 255, 255, 0.20);
  transform: translateZ(0);
  outline: none;
}

.gate-card {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  padding: clamp(18px, 2.2vw, 26px);
  text-align: center;
  border-radius: 24px;
  border: 1px solid rgb(var(--theme-cyan-rgb) / 0.22);
  color: rgba(255, 255, 255, 0.98);
  background:
    linear-gradient(180deg, rgb(var(--theme-brand-rgb) / 0.26) 0%, rgb(var(--theme-panel-rgb) / 0.22) 100%),
    radial-gradient(circle at top left, rgb(var(--theme-cyan-rgb) / 0.24), transparent 34%),
    radial-gradient(circle at bottom right, rgb(var(--theme-accent-rgb) / 0.20), transparent 30%),
    rgb(var(--theme-ink-rgb) / 0.22);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
  backdrop-filter: blur(12px) saturate(1.08);
  box-shadow:
    0 12px 28px rgba(0, 18, 54, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.035) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.11);
  overflow: hidden;
  isolation: isolate;
  transform: translate3d(0, 18px, 0) scale(0.975);
  transition:
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease,
    box-shadow 0.24s ease;
}

.gate-overlay.show .gate-card {
  transform: translate3d(0, 0, 0) scale(1);
}

.gate-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 28%),
    linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.08) 46%, transparent 72%);
}

.gate-title,
.gate-desc,
.gate-field,
.gate-actions,
.gate-note {
  text-align: center;
  position: relative;
  z-index: 1;
}

.gate-brand {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  justify-items: center;
  min-height: 40px;
}

.gate-logo {
  display: block;
  width: auto;
  max-width: min(100%, 245px);
  max-height: 72px;
  object-fit: contain;
  object-position: center center;
  filter: none;
}

.gate-card.has-logo .gate-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.gate-card.has-logo .gate-brand {
  margin: 10px auto 8px;
}

.gate-card.has-logo .gate-logo {
  margin: 0 auto;
}

.gate-title {
  margin: 14px 0 6px;
  font-size: clamp(24px, 3.2vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.gate-desc {
  margin: 0;
  color: var(--text-soft);
  font-size: clamp(12px, 1.35vw, 14px);
  line-height: 1.45;
  font-weight: 700;
  text-align: center;
}

.gate-field {
  margin-top: 18px;
}

.gate-input {
  height: 54px;
  min-height: 54px;
  font-size: 14px;
  letter-spacing: 0.05em;
  caret-color: var(--theme-cyan);
  background: rgb(var(--theme-ink-rgb) / 0.26);
  border-color: rgb(var(--theme-cyan-rgb) / 0.18);
  box-shadow: none;
  filter: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: opacity 0.18s ease;
}

.gate-input:hover,
.gate-input:focus,
.gate-input:focus-visible,
.gate-input:active {
  outline: none;
  background: rgb(var(--theme-ink-rgb) / 0.26);
  border-color: rgb(var(--theme-cyan-rgb) / 0.18);
  box-shadow: none;
  filter: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.gate-input:-webkit-autofill,
.gate-input:-webkit-autofill:hover,
.gate-input:-webkit-autofill:focus {
  -webkit-text-fill-color: rgba(255, 255, 255, 0.94);
  caret-color: var(--theme-cyan);
  transition: background-color 9999s ease-out 0s;
  box-shadow: 0 0 0 1000px rgb(var(--theme-ink-rgb) / 0.26) inset;
}

.gate-actions {
  display: flex;
  margin-top: 14px;
}

.gate-submit {
  width: 100%;
  min-height: 52px;
  border: 1px solid rgb(var(--theme-cyan-rgb) / 0.24);
  border-radius: 999px;
  padding: 0 18px;
  color: rgba(255, 255, 255, 0.96);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.08em;
  background:
    linear-gradient(180deg, rgb(var(--glass-theme-cyan-rgb) / 0.32) 0%, rgb(var(--glass-theme-accent-rgb) / 0.26) 100%),
    rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  box-shadow:
    0 10px 24px rgb(var(--theme-brand-rgb) / 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease,
    opacity 0.18s ease;
}

.gate-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow:
    0 14px 28px rgb(var(--theme-brand-rgb) / 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.gate-submit:active {
  transform: scale(0.985);
}

.gate-submit:disabled {
  opacity: 0.72;
  cursor: progress;
}

.gate-note {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 12px auto 0;
  padding: 0 8px;
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.42;
  font-weight: 700;
  text-align: center;
}

.security-404 {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: block;
  min-height: 100dvh;
  padding: 42px 32px;
  color: #3c4043;
  background: #ffffff;
  overflow: auto;
}

.security-404-card {
  width: min(100%, 720px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.security-404-title {
  margin: 0 0 16px;
  color: #202124;
  font-family: Arial, sans-serif;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: normal;
}

.security-404-copy {
  margin: 0 0 8px;
  color: #3c4043;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 400;
}

.security-404-muted {
  color: #5f6368;
}

html.security-locked,
html.security-locked body {
  width: 100%;
  min-height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
}

@media (max-width: 540px) {
  .gate-history-btn {
    top: calc(var(--safe-top) + 10px);
    right: calc(var(--safe-right) + 10px);
    height: 36px;
    padding: 0 10px 0 9px;
    gap: 6px;
  }

  .gate-history-icon {
    width: 15px;
    height: 15px;
  }

  .gate-history-btn span {
    font-size: 10.5px;
  }

  .gate-overlay {
    padding: 14px;
  }

  .gate-card {
    width: min(100%, 366px);
    padding: 16px;
    border-radius: 20px;
  }

  .gate-title {
    margin-top: 12px;
    font-size: clamp(22px, 7.4vw, 28px);
  }

  .gate-brand {
    place-items: center;
  }

  .gate-logo {
    max-width: min(100%, 220px);
    max-height: 64px;
    object-position: center;
  }

  .gate-desc {
    font-size: 12px;
  }

  .gate-input,
  .gate-submit {
    min-height: 50px;
    height: 50px;
  }
}

.win-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: calc(var(--safe-top) + 16px) 14px calc(var(--safe-bottom) + 16px);
  background: transparent;
  opacity: 0;
  pointer-events: none;
  isolation: isolate;
  transition: opacity 0.22s ease;
}

.win-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--surface-backdrop);
  opacity: 0;
  pointer-events: none;
  -webkit-backdrop-filter: blur(3px) saturate(1.01);
  backdrop-filter: blur(3px) saturate(1.01);
  transition: opacity 0.24s ease;
}

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

.win-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.win-overlay.show::before {
  opacity: 1;
}

.win-card {
  position: relative;
  z-index: 1;
  width: min(calc(var(--app-w) - 24px), 430px);
  max-width: 100%;
  max-height: min(72dvh, 322px);
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: var(--toast-radius-fluid);
  color: rgba(255, 255, 255, 0.96);
  background:
    linear-gradient(
      180deg,
      rgb(var(--glass-theme-base-rgb) / 0.36) 0%,
      rgb(var(--theme-ink-rgb) / 0.52) 100%
    ),
    radial-gradient(circle at 0% 0%, rgb(var(--glass-theme-cyan-rgb) / 0.14), transparent 42%);
  -webkit-backdrop-filter: blur(var(--glass-theme-blur)) saturate(1.06);
  backdrop-filter: blur(var(--glass-theme-blur)) saturate(1.06);
  box-shadow:
    0 var(--fx-glow-y) var(--fx-glow-blur) rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
  overflow: hidden;
  isolation: isolate;
  contain: paint style;
  opacity: 1;
  transform: translate3d(0, 12px, 0) scale(0.985);
  transition:
    transform 0.26s cubic-bezier(0.2, 0.82, 0.22, 1),
    opacity 0.22s ease;
}

.win-overlay.show .win-card {
  transform: translate3d(0, 0, 0) scale(1);
}

.win-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.win-actions .win-action {
  min-height: 34px;
  padding: 0 10px;
  font-size: 9.2px;
  white-space: nowrap;
}

@media (min-width: 769px) and (pointer: fine) {
  .win-card {
    width: min(calc(var(--app-w) - 32px), 462px);
    max-height: min(68dvh, 342px);
  }

  .win-top {
    padding: 16px 18px 0 20px;
  }

  .win-body {
    padding: 8px 20px 18px;
  }

  .win-actions .win-action {
    min-height: 38px;
    font-size: 9.8px;
  }
}

.win-card::before {
  content: none;
}

.win-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: var(--toast-pad-y-fluid) var(--toast-pad-x-fluid) 0
    calc(var(--toast-pad-x-fluid) + 6px);
}

.win-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-main);
  font-size: clamp(9.4px, 0.76vw, 11.4px);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.win-close {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: clamp(28px, 2vw, 32px);
  min-width: clamp(28px, 2vw, 32px);
  height: clamp(28px, 2vw, 32px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 0;
  color: rgba(255, 255, 255, 0.86);
  cursor: pointer;
  font-size: clamp(11px, 0.82vw, 13px);
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: none;
}

.win-body {
  position: relative;
  z-index: 2;
  padding: 4px var(--toast-pad-x-fluid) var(--toast-pad-y-fluid)
    calc(var(--toast-pad-x-fluid) + 6px);
  text-align: center;
}

.win-title {
  margin: 2px auto 8px;
  color: rgba(255, 255, 255, 0.985);
  font-family: var(--font-main);
  font-size: clamp(12.8px, 0.98vw, 16px);
  font-weight: 950;
  line-height: 1.16;
  letter-spacing: 0;
  white-space: normal;
  text-wrap: balance;
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
}

.win-divider {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 8px;
  margin: 0 auto 10px;
}

.win-divider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  opacity: 0.72;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 24%,
    rgb(var(--theme-gold-rgb) / 0.18) 50%,
    rgba(255, 255, 255, 0.1) 76%,
    transparent 100%
  );
}

.win-divider span {
  display: none;
}

.win-prize {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  min-width: min(100%, 220px);
  max-width: 100%;
  margin: 0 auto 12px;
  padding: 2px 10px 4px;
  color: var(--theme-gold);
  font-family: var(--font-main);
  font-size: clamp(30px, 5.1vw, 38px);
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  line-height: 1.08;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-overflow: clip;
  text-shadow: none;
  overflow: visible;
}

.win-action {
  width: 100%;
  min-height: 28px;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: none;
}

.win-action::before,
.win-action::after {
  content: none;
}

.win-action:hover,
.win-action:focus-visible,
.win-action:active {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  filter: none;
  transform: none;
}

.win-claim {
  border-color: rgb(var(--theme-cyan-rgb) / 0.42);
  color: rgba(255, 255, 255, 0.98);
  background: linear-gradient(180deg, rgb(var(--theme-accent-rgb) / 0.88), rgb(var(--theme-brand-rgb) / 0.82));
  box-shadow:
    0 10px 24px rgb(var(--theme-accent-rgb) / 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.win-download {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.035);
}

.win-claim:hover,
.win-claim:focus-visible,
.win-claim:active {
  border-color: rgb(var(--theme-cyan-rgb) / 0.42);
  background: linear-gradient(180deg, rgb(var(--theme-accent-rgb) / 0.88), rgb(var(--theme-brand-rgb) / 0.82));
  box-shadow:
    0 10px 24px rgb(var(--theme-accent-rgb) / 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  filter: none;
  transform: none;
}

.win-download:hover,
.win-download:focus-visible,
.win-download:active {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  filter: none;
  transform: none;
}

.win-close:hover,
.win-close:focus-visible,
.win-close:active {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transform: none;
}

.confetti {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.confetti i {
  position: absolute;
  width: 9px;
  height: 15px;
  border-radius: 2px;
  opacity: 0.82;
  background: var(--theme-gold);
  transform: rotate(28deg);
}

.confetti i:nth-child(1) {
  left: 12%;
  top: 22%;
  background: var(--theme-cyan);
  transform: rotate(-28deg);
}
.confetti i:nth-child(2) {
  left: 86%;
  top: 25%;
  width: 7px;
  height: 13px;
}
.confetti i:nth-child(3) {
  left: 76%;
  top: 64%;
  background: var(--theme-gold);
  transform: rotate(44deg);
}
.confetti i:nth-child(4) {
  left: 19%;
  top: 70%;
  background: var(--theme-accent);
  width: 7px;
  height: 12px;
}
.confetti i:nth-child(5) {
  left: 89%;
  top: 76%;
  background: var(--theme-gold-deep);
  width: 8px;
  height: 15px;
}
.confetti i:nth-child(6) {
  left: 7%;
  top: 50%;
  background: var(--theme-gold-deep);
  width: 7px;
  height: 12px;
}

@keyframes toastCasinoGlow {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.11) inset,
      0 3px 9px rgb(var(--glass-theme-accent-rgb) / 0.22),
      0 0 10px rgb(var(--glass-theme-cyan-rgb) / 0.12);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.14) inset,
      0 4px 12px rgb(var(--glass-theme-accent-rgb) / 0.28),
      0 0 15px rgb(var(--glass-theme-cyan-rgb) / 0.18);
  }
}

@keyframes toastCasinoShine {
  0% {
    background-position: 14% 50%;
  }
  50% {
    background-position: 86% 50%;
  }
  100% {
    background-position: 14% 50%;
  }
}

@keyframes toastCasinoSweep {
  0% {
    opacity: 0;
    transform: translate3d(-145%, 0, 0) rotate(18deg);
  }
  18%,
  52% {
    opacity: var(--fx-shine-alpha);
  }
  100% {
    opacity: 0;
    transform: translate3d(430%, 0, 0) rotate(18deg);
  }
}

/* Visual zoom lock: keep wheel/ring/pointer geometry stable during browser zoom and mobile pinch zoom. */
html.visual-zoom-lock .wheel-panel,
html.visual-zoom-lock .wheel-stack,
html.visual-zoom-lock .wheel-metal,
html.visual-zoom-lock .wheel-canvas,
html.visual-zoom-lock .pointer,
html.visual-zoom-lock .spin-btn,
html.visual-zoom-lock .coupon-panel {
  flex: 0 0 auto;
}

html.visual-zoom-lock .wheel-panel {
  will-change: transform;
  backface-visibility: hidden;
}

html.visual-zoom-lock .stage,
html.visual-zoom-lock .art-board,
html.visual-zoom-lock .layout-shell,
html.visual-zoom-lock .wheel-panel,
html.visual-zoom-lock .wheel-stack {
  overflow: visible;
}

@media (min-width: 700px) and (pointer: fine) {
  :root {
    --toast-edge: clamp(14px, 1.25vw, 28px);
    --toast-w-fluid: clamp(294px, 22vw, 332px);
    --toast-radius-fluid: clamp(13px, 0.82vw, 17px);
    --toast-pad-y-fluid: clamp(11px, 0.72vw, 14px);
    --toast-pad-x-fluid: clamp(16px, 0.98vw, 19px);
    --toast-title-fluid: clamp(11.2px, 0.74vw, 13.8px);
    --toast-message-fluid: clamp(8.8px, 0.62vw, 11.6px);
    --toast-button-h-fluid: clamp(30px, 1.9vw, 36px);
    --toast-button-font-fluid: clamp(8.8px, 0.62vw, 11.2px);
    --toast-action-gap-fluid: clamp(7px, 0.48vw, 10px);
  }
}

@media (max-width: 960px), (max-height: 760px) {
  :root {
    --layout-gap: clamp(10px, 1.05dvh, 14px);
    --coupon-panel-h: clamp(46px, 6.1dvh, 58px);
    --coupon-gap: clamp(8px, 0.95dvh, 12px);
    --wheel-outer-slot-h: calc(
      var(--usable-h) - var(--coupon-panel-h) - var(--coupon-gap) -
        var(--pointer-overflow)
    );
    --wheel-outer-size: clamp(
      176px,
      min(var(--wheel-outer-max-w), var(--wheel-outer-slot-h)),
      382px
    );
    --wheel-size: calc(var(--wheel-outer-size) - (var(--ring-size) * 2));
  }

  .art-board {
    width: min(100%, 680px);
  }

  .layout-shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
    align-content: center;
  }
}

@media (max-width: 768px), (pointer: coarse) {
  :root {
    --shadow-soft: rgba(0, 0, 0, 0.14);
    --shadow-deep: rgba(0, 0, 0, 0.22);
  }

  body {
    background-image: var(--bg-image-mobile);
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
  }

  body::after {
    background-image: var(--bg-image-mobile);
    background-position: center center;
    background-size: cover;
    opacity: 0.26;
    filter: blur(12px) saturate(1.02);
    transform: scale(1.03);
  }

  .gate-overlay::before {
    background-image: var(--bg-image-mobile);
    filter: blur(6px) saturate(1.03);
  }

  .stage::before {
    opacity: 0.52;
  }

  .brand-plate,
  .wheel-stack,
  .pointer {
    filter: none;
  }

  
/* Desktop zoom hardening: the fixed stage always follows the real viewport,
   while wheel sizing remains controlled by the app variables. This prevents
   the wheel from being pinned to the old top-left viewport during browser zoom-out. */
@media (min-width: 900px) {
  .stage {
    place-items: center;
  }

  .art-board {
    margin: auto;
  }
}

.stage.modal-open .art-board {
    opacity: 0.8;
    filter: blur(1.05px) saturate(0.99);
  }

  .win-overlay::before {
    -webkit-backdrop-filter: blur(1.25px) saturate(1.01);
    backdrop-filter: blur(1.25px) saturate(1.01);
  }

  .wheel-metal::before {
    opacity: 0.36;
    mix-blend-mode: normal;
  }

  .wheel-gloss {
    opacity: 0.1;
  }

  .pointer {
    --pointer-size: clamp(48px, calc(var(--wheel-outer-size) * 0.148), 74px);
    --pointer-overlap: clamp(7px, calc(var(--wheel-outer-size) * 0.028), 14px);
    --pointer-y: 28px;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.28));
  }

  .spin-btn {
    box-shadow:
      inset 0 2px 3px rgba(255, 255, 255, 0.48),
      inset 0 -4px 6px rgba(114, 61, 3, 0.18),
      0 3px 6px rgba(0, 0, 0, 0.12);
  }

  .spin-btn::before {
    opacity: 0.78;
  }

  .win-card {
    box-shadow:
      0 8px 18px rgba(0, 0, 0, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }
}

@media (max-width: 540px), (pointer: coarse) {
  :root {
    --stage-x: 10px;
    --stage-y: clamp(4px, 0.7dvh, 8px);
    --layout-gap: clamp(10px, 0.95dvh, 13px);
    --coupon-panel-h: clamp(48px, 6.6dvh, 60px);
    --coupon-gap: clamp(7px, 0.9dvh, 11px);
    --wheel-outer-slot-h: calc(
      var(--usable-h) - var(--coupon-panel-h) - var(--coupon-gap) -
        var(--pointer-overflow)
    );
    --wheel-outer-size: clamp(
      178px,
      min(calc(var(--app-w) - 34px), var(--wheel-outer-slot-h)),
      342px
    );
    --wheel-size: calc(var(--wheel-outer-size) - (var(--ring-size) * 2));
    --toast-edge: 8px;
    --toast-w-fluid: clamp(268px, 86vw, 304px);
    --toast-radius-fluid: 10px;
    --toast-pad-y-fluid: 8px;
    --toast-pad-x-fluid: 13px;
    --toast-title-fluid: clamp(9.6px, 2.55vw, 11px);
    --toast-message-fluid: clamp(8px, 2.15vw, 9.4px);
    --toast-button-h-fluid: clamp(26px, 6.2vw, 31px);
    --toast-button-font-fluid: clamp(7.8px, 2.06vw, 9.2px);
    --toast-action-gap-fluid: 7px;
    --fx-glow-y: 2px;
    --fx-glow-blur: 9px;
    --fx-glow-gold-soft: rgb(var(--theme-gold-rgb) / 0.18);
    --fx-glow-gold-mid: rgb(var(--theme-gold-rgb) / 0.09);
    --fx-shine-alpha: 0.3;
    --fx-shine-speed: 3.05s;
    --fx-glow-speed: 2.75s;
  }

  .art-board {
    width: 100%;
  }

  .wheel-panel {
    width: 100%;
    --wheel-panel-y: calc(var(--pointer-overflow) * 0.18);
  }

  .coupon-panel {
    width: min(
      calc(var(--app-w) - 28px),
      calc(var(--wheel-outer-size) * 0.99),
      356px
    );
  }

  .coupon-input,
  input.coupon-input {
    min-height: 32px;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.012em;
    transform: translateZ(0);
  }

  .coupon-input::placeholder {
    font-size: 16px;
    letter-spacing: 0.012em;
    opacity: 0.72;
  }

  .app-toast-button:hover,
  .toast-action-btn:hover {
    transform: translateZ(0);
  }

  .app-toast {
    box-shadow:
      0 4px 12px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.045);
    -webkit-backdrop-filter: blur(7px) saturate(1.01);
    backdrop-filter: blur(7px) saturate(1.01);
  }

  .win-overlay {
    padding-inline: 10px;
  }

  .win-card {
    width: min(calc(var(--app-w) - 20px), 344px);
    max-height: min(56dvh, 246px);
  }

  .win-title {
    font-size: clamp(11.6px, 3.8vw, 14px);
    line-height: 1.18;
  }

  .win-prize {
    padding-inline: 8px;
    font-size: clamp(26px, 7.8vw, 32px);
  }
}

@supports (-webkit-touch-callout: none) {
  @media (pointer: coarse), (max-width: 540px) {
    .coupon-input,
    input.coupon-input {
      font-size: 16px;
      -webkit-user-select: text;
      user-select: text;
    }
  }
}

@media (max-width: 390px) {
  :root {
    --stage-x: 9px;
    --coupon-panel-h: clamp(46px, 6.4dvh, 56px);
    --coupon-gap: 7px;
    --layout-gap: 10px;
    --wheel-outer-slot-h: calc(
      var(--usable-h) - var(--coupon-panel-h) - var(--coupon-gap) -
        var(--pointer-overflow)
    );
    --wheel-outer-size: clamp(
      166px,
      min(calc(var(--app-w) - 30px), var(--wheel-outer-slot-h)),
      322px
    );
    --wheel-size: calc(var(--wheel-outer-size) - (var(--ring-size) * 2));
  }

  .coupon-panel {
    width: min(
      calc(var(--app-w) - 24px),
      calc(var(--wheel-outer-size) * 1.02),
      326px
    );
  }

  .coupon-input {
    padding-inline: 12px;
    font-size: 16px;
  }

  .win-title {
    font-size: clamp(11.8px, 3.7vw, 13px);
    white-space: nowrap;
  }

  .win-prize {
    line-height: 1.1;
    letter-spacing: -0.03em;
  }
}

@media (max-width: 360px) {
  :root {
    --toast-w-fluid: clamp(242px, 90vw, 286px);
    --toast-title-fluid: 9.2px;
    --toast-message-fluid: 7.8px;
    --toast-button-font-fluid: 7.6px;
    --toast-button-h-fluid: 24px;
  }
}

@media (max-height: 660px) and (max-width: 540px) {
  :root {
    --stage-y: 3px;
    --coupon-panel-h: 46px;
    --coupon-gap: 6px;
    --layout-gap: 8px;
    --wheel-outer-slot-h: calc(
      var(--usable-h) - var(--coupon-panel-h) - var(--coupon-gap) -
        var(--pointer-overflow)
    );
    --wheel-outer-size: clamp(
      150px,
      min(calc(var(--app-w) - 42px), var(--wheel-outer-slot-h)),
      292px
    );
    --wheel-size: calc(var(--wheel-outer-size) - (var(--ring-size) * 2));
  }

}

@media (max-height: 620px) {
  :root {
    --stage-y: clamp(4px, 0.9dvh, 9px);
    --ring-size: clamp(12px, min(2.45vw, 2.7dvh), 22px);
    --pointer-overflow: clamp(84px, 15dvh, 142px);
    --wheel-outer-size: clamp(
      196px,
      min(var(--wheel-outer-max-w), var(--wheel-outer-slot-h)),
      462px
    );
    --wheel-size: calc(var(--wheel-outer-size) - (var(--ring-size) * 2));
  }

  .win-card {
    max-height: min(calc(100dvh - 18px), 228px);
  }

  .win-top {
    padding-top: 8px;
  }

  .win-body {
    padding-top: 4px;
    padding-bottom: 10px;
  }

  .win-prize {
    margin-bottom: 8px;
    font-size: clamp(24px, 7.1dvh, 30px);
    line-height: 1.08;
  }

  .win-action {
    min-height: 28px;
  }
}

@media (max-height: 560px) {
  .wheel-panel {
    --wheel-panel-y: calc(var(--pointer-overflow) * 0.12);
  }
}

@media (max-height: 520px) {
  :root {
    --ring-size: clamp(10px, min(2.2vw, 2.5dvh), 17px);
    --pointer-overflow: 76px;
    --wheel-outer-size: clamp(
      172px,
      min(var(--wheel-outer-max-w), var(--wheel-outer-slot-h)),
      368px
    );
    --wheel-size: calc(var(--wheel-outer-size) - (var(--ring-size) * 2));
  }

  .win-title {
    margin-bottom: 8px;
  }

  .win-divider {
    display: none;
  }
}

@media (max-height: 430px) {
  :root {
    --stage-y: 3px;
    --ring-size: clamp(8px, 2vw, 14px);
    --pointer-overflow: 66px;
    --wheel-outer-size: clamp(
      148px,
      min(var(--wheel-outer-max-w), var(--wheel-outer-slot-h)),
      304px
    );
    --wheel-size: calc(var(--wheel-outer-size) - (var(--ring-size) * 2));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
  }

  .app-toast,
  .win-overlay,
  .win-card,
  .spin-btn,
  .coupon-input,
  .win-action,
  .win-close,
  .gate-overlay,
  .gate-card,
  .gate-history-btn,
  .app-toast-button,
  .toast-action-btn {
    transition: none;
  }

  .app-toast-button,
  .toast-action-btn,
  .app-toast-button::before,
  .toast-action-btn::before,
  .wheel-metal::before,
  .stage.is-spin-reveal .art-board,
  .stage.is-spin-reveal .wheel-panel {
    animation: none;
  }

  .wheel-metal-shader,
  .wheel-metal.is-spinning .wheel-metal-shader {
    opacity: 0.28;
  }

  .app-toast-button::before,
  .toast-action-btn::before {
    opacity: 0;
  }
}

.app-toast.is-neutral-coupon {
  border-color: rgb(var(--glass-theme-cyan-rgb) / 0.24);
  background:
    linear-gradient(180deg, rgb(var(--glass-theme-base-rgb) / var(--glass-theme-alpha-strong)) 0%, rgb(var(--glass-theme-base-rgb) / var(--glass-theme-alpha)) 100%),
    radial-gradient(circle at 12% 0%, rgb(var(--glass-theme-cyan-rgb) / 0.22), transparent 42%),
    radial-gradient(circle at 88% 100%, rgb(var(--glass-theme-accent-rgb) / 0.20), transparent 46%),
    rgb(var(--theme-ink-rgb) / 0.18);
  -webkit-backdrop-filter: blur(var(--glass-theme-blur)) saturate(1.08);
  backdrop-filter: blur(var(--glass-theme-blur)) saturate(1.08);
  box-shadow:
    0 8px 18px rgb(var(--glass-theme-base-rgb) / 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.app-toast.is-neutral-coupon > span:empty {
  display: none;
}

.app-toast.is-neutral-coupon strong {
  text-align: left;
  letter-spacing: -0.02em;
}

.app-toast.is-neutral-coupon > span {
  color: rgba(255, 255, 255, 0.84);
  font-weight: 800;
  letter-spacing: -0.018em;
}

.app-toast.is-neutral-coupon .app-toast-actions {
  margin-top: var(--toast-action-gap-fluid);
}

.app-toast.is-neutral-coupon .app-toast-button {
  letter-spacing: 0.05em;
}

body.is-coupon-focus .wheel-panel {
  transform: translate3d(0, var(--wheel-panel-y), 0) scale(var(--visual-zoom-counter-scale));
  transition: none;
}

@media (max-width: 380px), (max-height: 560px) {
  .win-card {
    max-height: min(calc(100dvh - 18px), 292px);
  }

  .win-actions {
    gap: 6px;
  }

  .win-actions .win-action {
    min-height: 31px;
    font-size: 8.4px;
    letter-spacing: 0.08em;
  }
}