:root {
  --teal: #0f766e;
  --teal-strong: #115e59;
  --amber: #d97706;
  --ink: #172121;
  --muted: #536363;
  --surface: #ffffff;
  --border: #cddada;
  --shadow: 0 22px 60px rgba(17, 94, 89, 0.18);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #eaf5f3; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  background: #eaf5f3 url("/images/tuni-play-background.svg") center/cover fixed;
}
button, a { font: inherit; }
button { min-height: 44px; touch-action: manipulation; }

.reward-page {
  width: min(1180px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 20px clamp(16px, 4vw, 48px) max(32px, env(safe-area-inset-bottom));
  overflow-x: clip;
}
.reward-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sound-toggle {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--teal-strong);
  background: rgba(255,255,255,.86);
  cursor: pointer;
}
.sound-toggle svg { width: 22px; fill: currentColor; }
.sound-toggle .sound-off-icon { display: none; }
.sound-toggle.muted .sound-on-icon { display: none; }
.sound-toggle.muted .sound-off-icon { display: block; }
.brand-link, .home-link {
  color: var(--ink);
  text-decoration: none;
}
.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand-link span:last-child { display: grid; }
.brand-link strong { font-size: 1rem; }
.brand-link small { color: var(--teal); font-weight: 700; }
.brand-mark {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: var(--teal);
  font-size: 1.35rem;
  font-weight: 800;
}
.home-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,.86);
  font-weight: 600;
}
.brand-link:focus-visible, .home-link:focus-visible, button:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

.reward-stage {
  display: grid;
  justify-items: center;
  padding: clamp(30px, 5vw, 64px) 0 0;
  text-align: center;
}
.reward-copy { max-width: 720px; }
.eyebrow {
  margin: 0 0 6px;
  color: var(--teal);
  font-size: .84rem;
  font-weight: 800;
  text-transform: uppercase;
}
.reward-copy h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1.1;
  letter-spacing: 0;
}
.reward-copy p:last-child {
  margin: 12px auto 0;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.55;
}

.wheel-zone {
  position: relative;
  width: min(72vh, 620px, 92vw);
  aspect-ratio: 1;
  margin-top: clamp(24px, 4vw, 40px);
  filter: drop-shadow(var(--shadow));
}
.wheel-frame {
  --rarity-ring: #0f766e;
  --rarity-glow: rgba(15, 118, 110, .4);
  position: relative;
  width: 100%;
  height: 100%;
  padding: clamp(16px, 2.5vw, 24px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #ffffff 0 69%, transparent 70%),
    conic-gradient(from 18deg, #334155, #f8fafc 10%, #94a3b8 21%, #ffffff 34%, #475569 48%, #e2e8f0 64%, #64748b 78%, #f8fafc 92%, #334155);
  border: 1px solid rgba(100, 116, 139, .8);
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.9), inset 0 0 0 10px rgba(51,65,85,.45), 0 0 0 4px rgba(255,255,255,.8);
  isolation: isolate;
}
.wheel-frame::before,
.wheel-frame::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.wheel-frame::before {
  z-index: -1;
  inset: -8px;
  padding: 5px;
  background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.96), transparent 18%, rgba(255,255,255,.5), transparent 45%, rgba(255,255,255,.96), transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .72;
}
.wheel-frame::after {
  z-index: 6;
  inset: -12px;
  border: clamp(5px, .8vw, 9px) solid var(--rarity-ring);
  box-shadow: 0 0 22px var(--rarity-glow), 0 0 62px var(--rarity-glow), inset 0 0 24px var(--rarity-glow);
  opacity: 0;
  transform: scale(.96);
}
.wheel-frame.spinning::before { opacity: .92; }
.wheel-frame.awakened::after {
  animation: frame-awaken 2.35s cubic-bezier(.16,.82,.2,1) both;
}
.wheel-frame[data-rarity="common"] { --rarity-ring: #2dd4bf; --rarity-glow: rgba(45,212,191,.46); }
.wheel-frame[data-rarity="rare"] { --rarity-ring: #38bdf8; --rarity-glow: rgba(56,189,248,.58); }
.wheel-frame[data-rarity="epic"] { --rarity-ring: #c084fc; --rarity-glow: rgba(192,132,252,.64); }
.wheel-frame[data-rarity="legendary"] { --rarity-ring: #fbbf24; --rarity-glow: rgba(251,191,36,.72); }
.reward-wheel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  background: #dbe7e6;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  transform-box: border-box;
  will-change: transform;
  backface-visibility: hidden;
}
.reward-wheel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 45% 35%, rgba(255,255,255,.28), transparent 34%),
    radial-gradient(circle at center, transparent 0 57%, rgba(0,0,0,.08) 100%);
  pointer-events: none;
}
.wheel-labels { position: absolute; inset: 0; }
.wheel-label {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  width: 50%;
  min-height: 42px;
  align-items: center;
  transform-origin: 0 50%;
  padding: 0 8% 0 21%;
  color: #fff;
  font-size: clamp(.72rem, 2.2vw, 1.05rem);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0,0,0,.42);
}
.wheel-label span {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow-wrap: anywhere;
  text-align: center;
  transform-origin: 50% 50%;
}
.wheel-label.flipped span { transform: rotate(180deg); }
.wheel-pointer {
  position: absolute;
  z-index: 5;
  top: -8px;
  left: 50%;
  width: clamp(36px, 7vw, 58px);
  height: clamp(50px, 9vw, 78px);
  transform: translateX(-50%);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  background: #b91c1c;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.24));
}
.spin-button {
  position: absolute;
  z-index: 4;
  inset: 50% auto auto 50%;
  width: clamp(92px, 18vw, 128px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 6px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: var(--teal-strong);
  box-shadow: 0 8px 20px rgba(0,0,0,.26);
  font-weight: 800;
  cursor: pointer;
  transition: background-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.spin-button:hover:not(:disabled) { background: #0b4f4a; box-shadow: 0 10px 26px rgba(0,0,0,.32); }
.spin-button:active:not(:disabled) { box-shadow: 0 5px 14px rgba(0,0,0,.28); }
.spin-button:disabled { cursor: not-allowed; opacity: .64; }

.wheel-status {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
  color: var(--muted);
}
.status-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: status-spin .8s linear infinite;
}
.wheel-status.ready .status-spinner { display: none; }
.retry-button, .result-dialog button {
  border: 0;
  border-radius: 8px;
  padding: 0 22px;
  color: #fff;
  background: var(--teal);
  font-weight: 700;
  cursor: pointer;
}

.reward-reveal {
  --charge-color: #fff;
  --charge-secondary: #94a3b8;
  --charge-glow: rgba(226, 232, 240, .62);
  --effect-color: var(--charge-color);
  --effect-secondary: var(--charge-secondary);
  --effect-glow: var(--charge-glow);
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  overflow: hidden;
  border: 0;
  color: var(--ink);
  background: radial-gradient(circle at center, rgba(255,255,255,.15), transparent 42%), rgba(5, 20, 20, .88);
}
.reward-reveal[open] {
  display: grid;
  place-items: center;
}
.reward-reveal::backdrop { background: rgba(5, 20, 20, .82); }
.reward-reveal[data-rarity="common"] { --reveal-color: #2dd4bf; --reveal-soft: #ccfbf1; --reveal-glow: rgba(45,212,191,.42); }
.reward-reveal[data-rarity="rare"] { --reveal-color: #38bdf8; --reveal-soft: #e0f2fe; --reveal-glow: rgba(56,189,248,.54); }
.reward-reveal[data-rarity="epic"] { --reveal-color: #c084fc; --reveal-soft: #f3e8ff; --reveal-glow: rgba(192,132,252,.62); }
.reward-reveal[data-rarity="legendary"] { --reveal-color: #fbbf24; --reveal-soft: #fef3c7; --reveal-glow: rgba(251,191,36,.7); }
.reward-reveal[data-phase="burst"],
.reward-reveal[data-phase="reward"] {
  --effect-color: var(--reveal-color);
  --effect-secondary: var(--reveal-soft);
  --effect-glow: var(--reveal-glow);
}
#rewardParticles {
  position: fixed;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}
.reveal-charge,
.reveal-sigil,
.reveal-shockwave,
.reveal-flash {
  position: fixed;
  z-index: 2;
  pointer-events: none;
}
.reveal-charge {
  width: min(46vw, 360px);
  aspect-ratio: 1;
  opacity: 0;
}
.reveal-charge span {
  position: absolute;
  inset: 50%;
  border: 2px solid var(--charge-color);
  border-radius: 50%;
  box-shadow: 0 0 24px var(--charge-glow);
  transform: translate(-50%, -50%) scale(3.4);
}
.reveal-charge span:nth-child(2) { animation-delay: .1s; }
.reveal-charge span:nth-child(3) { animation-delay: .2s; }
.reward-reveal[data-phase="charge"] .reveal-charge span {
  animation: energy-converge 1.2s cubic-bezier(.6,0,.25,1) both;
}
.reward-reveal[data-phase="charge"] .reveal-charge { opacity: 1; }
.reveal-sigil {
  width: min(72vw, 590px);
  aspect-ratio: 1;
  opacity: 0;
  transform: scale(.62);
}
.sigil-ring {
  position: absolute;
  border: 2px solid var(--effect-color);
  border-radius: 50%;
  box-shadow: 0 0 22px var(--effect-glow), inset 0 0 16px var(--effect-glow);
}
.sigil-ring::before,
.sigil-ring::after {
  content: "";
  position: absolute;
  inset: 8%;
  border: 1px dashed var(--effect-color);
  border-radius: 50%;
}
.sigil-ring::after {
  inset: 23%;
  clip-path: polygon(50% 0, 61% 36%, 100% 50%, 61% 64%, 50% 100%, 39% 64%, 0 50%, 39% 36%);
  background: color-mix(in srgb, var(--effect-color) 24%, transparent);
  border-radius: 0;
}
.sigil-ring-outer { inset: 0; }
.sigil-ring-middle { inset: 14%; border-style: dashed; }
.sigil-ring-inner { inset: 31%; }
.sigil-core {
  position: absolute;
  inset: 44%;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 24px #fff, 0 0 70px var(--effect-color);
}
.reward-reveal[data-phase="sigil"] .reveal-sigil,
.reward-reveal[data-phase="burst"] .reveal-sigil {
  opacity: 1;
  transform: scale(1);
  transition: opacity .18s ease, transform .42s cubic-bezier(.16,.9,.2,1);
}
.reward-reveal[data-phase="sigil"] .sigil-ring-outer,
.reward-reveal[data-phase="burst"] .sigil-ring-outer { animation: sigil-spin 2.6s linear infinite; }
.reward-reveal[data-phase="sigil"] .sigil-ring-middle,
.reward-reveal[data-phase="burst"] .sigil-ring-middle { animation: sigil-spin-reverse 1.8s linear infinite; }
.reward-reveal[data-phase="sigil"] .sigil-ring-inner,
.reward-reveal[data-phase="burst"] .sigil-ring-inner { animation: sigil-pulse .72s ease-in-out infinite alternate; }
.reveal-shockwave {
  width: min(34vw, 250px);
  aspect-ratio: 1;
  border: 5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 26px #fff, 0 0 76px var(--effect-color);
  opacity: 0;
}
.reward-reveal[data-phase="burst"] .reveal-shockwave {
  animation: shockwave-burst .62s cubic-bezier(.1,.72,.2,1) both;
}
.reveal-flash {
  z-index: 5;
  inset: 0;
  background: #fff;
  opacity: 0;
}
.reward-reveal[data-phase="burst"] .reveal-flash {
  animation: reveal-flash .42s ease-out both;
}
.reveal-rays {
  position: fixed;
  z-index: 0;
  width: min(112vw, 900px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, var(--effect-glow) 0 5deg, transparent 5deg 15deg);
  filter: blur(1px);
  opacity: 0;
}
.reveal-orbit {
  position: fixed;
  z-index: 1;
  width: min(74vw, 620px);
  aspect-ratio: 1;
  border: 2px solid var(--effect-color);
  border-radius: 50%;
  box-shadow: 0 0 28px var(--effect-glow);
  opacity: 0;
}
.reveal-orbit-two {
  width: min(58vw, 460px);
}
.reward-reveal[data-phase="burst"] .reveal-rays,
.reward-reveal[data-phase="reward"] .reveal-rays {
  animation: reveal-rays 1.9s cubic-bezier(.16,.84,.2,1) both;
}
.reward-reveal[data-phase="burst"] .reveal-orbit-one {
  animation: reveal-orbit 1.55s ease-out .08s both;
}
.reward-reveal[data-phase="burst"] .reveal-orbit-two {
  animation: reveal-orbit 1.55s ease-out .18s reverse both;
}
.result-dialog {
  position: relative;
  z-index: 3;
  width: min(420px, calc(100% - 32px));
  padding: 30px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 12px;
  color: var(--ink);
  background: rgba(255,255,255,.96);
  text-align: center;
  box-shadow: 0 0 0 3px var(--reveal-color), 0 0 38px var(--reveal-glow), 0 28px 90px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(22px) scale(.72);
  filter: blur(10px);
  pointer-events: none;
}
.hologram-frame::before,
.hologram-frame::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.hologram-frame::before {
  inset: -10px;
  border: 1px solid var(--reveal-color);
  border-radius: 16px;
  clip-path: polygon(0 0, 22% 0, 22% 2px, 78% 2px, 78% 0, 100% 0, 100% 25%, calc(100% - 2px) 25%, calc(100% - 2px) 75%, 100% 75%, 100% 100%, 78% 100%, 78% calc(100% - 2px), 22% calc(100% - 2px), 22% 100%, 0 100%, 0 75%, 2px 75%, 2px 25%, 0 25%);
  box-shadow: 0 0 28px var(--reveal-glow);
}
.hologram-frame::after {
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--reveal-color) 14%, transparent), transparent);
  background-size: 100% 42%;
  opacity: .55;
}
.reward-reveal[data-phase="reward"] .result-dialog {
  animation: hologram-arrive .78s cubic-bezier(.16,.9,.2,1) both;
  pointer-events: auto;
}
.reward-reveal[data-phase="reward"] .hologram-frame::after {
  animation: hologram-scan 1.1s ease-out .15s both;
}
.reward-reveal:not([data-phase="reward"]) .result-dialog button {
  visibility: hidden;
}
.result-icon {
  display: grid;
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  place-items: center;
  border-radius: 50%;
  background: var(--reveal-soft);
  box-shadow: 0 0 26px var(--reveal-glow);
}
.result-icon svg { width: 34px; fill: var(--reveal-color); }
.result-kicker { margin: 0; color: var(--reveal-color); font-weight: 800; }
.result-dialog h2 { margin: 6px 0; font-size: 1.7rem; }
.result-dialog p:not(.result-kicker) { color: var(--muted); line-height: 1.5; }
.result-dialog button { min-width: 120px; margin-top: 10px; }

@keyframes status-spin { to { transform: rotate(360deg); } }
@keyframes frame-sheen { to { transform: rotate(360deg); } }
@keyframes frame-awaken {
  0% { opacity: 0; transform: scale(.94); filter: brightness(1); }
  24% { opacity: 1; transform: scale(1.035); filter: brightness(1.55); }
  58% { opacity: 1; transform: scale(1); filter: brightness(1.12); }
  100% { opacity: .52; transform: scale(1.01); filter: brightness(1); }
}
@keyframes energy-converge {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(3.4); }
  28% { opacity: .75; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.08); }
}
@keyframes sigil-spin { to { transform: rotate(360deg); } }
@keyframes sigil-spin-reverse { to { transform: rotate(-360deg); } }
@keyframes sigil-pulse {
  from { transform: scale(.94); opacity: .65; }
  to { transform: scale(1.04); opacity: 1; }
}
@keyframes shockwave-burst {
  0% { opacity: 1; transform: scale(.18); }
  65% { opacity: .85; }
  100% { opacity: 0; transform: scale(4.6); }
}
@keyframes reveal-flash {
  0% { opacity: 0; }
  18% { opacity: .94; }
  42% { opacity: .28; }
  100% { opacity: 0; }
}
@keyframes reveal-rays {
  from { opacity: 0; transform: scale(.35) rotate(-22deg); }
  38% { opacity: .86; }
  to { opacity: .16; transform: scale(1.18) rotate(26deg); }
}
@keyframes reveal-orbit {
  0% { opacity: 0; transform: scale(.28) rotate(-45deg); }
  36% { opacity: .92; }
  100% { opacity: 0; transform: scale(1.22) rotate(110deg); }
}
@keyframes result-arrive {
  from { opacity: 0; transform: translateY(24px) scale(.82); filter: blur(8px); }
  62% { opacity: 1; transform: translateY(-4px) scale(1.025); filter: blur(0); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes hologram-arrive {
  0% { opacity: 0; transform: translateY(24px) scale(.7); filter: blur(10px) brightness(1.8); }
  38% { opacity: .94; transform: translateY(-7px) scale(1.045); filter: blur(0) brightness(1.35); }
  68% { opacity: 1; transform: translateY(2px) scale(.985); filter: blur(0) brightness(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) brightness(1); }
}
@keyframes hologram-scan {
  from { background-position: 0 -80%; opacity: 0; }
  25% { opacity: .7; }
  to { background-position: 0 180%; opacity: 0; }
}

@media (max-width: 720px) {
  .reward-page { padding-top: 12px; }
  .home-link { display: none; }
  .brand-link strong { font-size: .92rem; }
  .header-actions { gap: 6px; }
  .reward-stage { padding-top: 26px; }
  .reward-copy { width: 100%; min-width: 0; }
  .reward-copy h1 {
    max-width: 100%;
    font-size: clamp(1.85rem, 9vw, 2.55rem);
    overflow-wrap: anywhere;
  }
  .reward-copy p:last-child { font-size: .96rem; }
  .wheel-zone { width: min(88vw, 520px); }
  .wheel-label { font-size: clamp(.66rem, 2.8vw, .9rem); }
  .wheel-pointer { top: -4px; }
  .result-dialog { width: min(390px, calc(100% - 20px)); padding: 24px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  body { background-attachment: scroll; }
  .wheel-frame.spinning::before,
  .wheel-frame.awakened::after,
  .reveal-charge,
  .reveal-sigil,
  .reveal-shockwave,
  .reveal-flash,
  .reveal-rays,
  .reveal-orbit,
  .result-dialog { animation: none !important; }
  .reward-reveal[data-phase="reward"] .result-dialog {
    opacity: 1;
    transform: none;
    filter: none;
  }
}