:root {
  font-family: "Noto Sans Devanagari", "Nirmala UI", Mangal, sans-serif;
  color: #32291f;
  background: #8f1409;
  font-synthesis: none;
  --paper: #fffcf5;
  --ink: #32291f;
  --muted: #74695d;
  --accent: #9b2013;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 28%, rgba(225, 58, 8, .33), transparent 77%),
    repeating-conic-gradient(from 7deg at 50% 40%, rgba(255, 136, 32, .055) 0deg 8deg, transparent 8deg 19deg),
    linear-gradient(90deg, #6e1006, #a51a08 50%, #6e1006);
  background-attachment: fixed;
}
button, input { font: inherit; touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #172f57; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.wheel-page { max-width: 600px; min-height: 100dvh; margin: auto; background: var(--paper); }
.topbar { padding: 0; display: flex; justify-content: center; align-items: center; background: #f9e3df; }
.brand { width: 100%; display: flex; justify-content: center; }
.brand img { display: block; width: 100%; height: auto; object-fit: contain; }
.brand-name { color: #142e58; font-size: 20px; font-weight: 700; text-align: center; }

/* The artwork keeps its native 1200 x 1604 geometry. Its blank wheel is centered at (600, 628). */
.wheel-scene { position: relative; container-type: inline-size; background: #a20b03; }
.scene-art { position: relative; width: 100%; aspect-ratio: 1200 / 1604; background: #bd2002 url('/brand/wheel-festival.jpg') center top / 100% 100% no-repeat; overflow: hidden; }
.scene-lights, .scene-confetti { position: absolute; inset: 0; pointer-events: none; }
.scene-lights { z-index: 1; }
.scene-lights i {
  position: absolute;
  width: 1.85%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fffad1;
  box-shadow: 0 0 .55cqi .25cqi rgba(255, 246, 166, .55), 0 0 1.4cqi .55cqi rgba(255, 190, 48, .2);
  transform: translate(-50%, -50%);
  opacity: .1;
  mix-blend-mode: screen;
  animation: lamp-breathe 8s ease-in-out infinite;
}
.scene-lights i:nth-child(1) { left: 50%; top: 13.75%; animation-delay: -1.2s; }
.scene-lights i:nth-child(2) { left: 25%; top: 21.2%; animation-delay: -5.8s; }
.scene-lights i:nth-child(3) { left: 75%; top: 21.2%; animation-delay: -3.1s; }
.scene-lights i:nth-child(4) { left: 25%; top: 57.1%; animation-delay: -6.6s; }
.scene-lights i:nth-child(5) { left: 75%; top: 57.1%; animation-delay: -2.2s; }
.scene-lights i:nth-child(6) { left: 50%; top: 64.3%; animation-delay: -4.7s; }
.scene-confetti { z-index: 1; }
.scene-confetti i {
  position: absolute;
  display: block;
  width: clamp(3px, .75cqi, 5px);
  height: clamp(6px, 1.45cqi, 9px);
  background: linear-gradient(135deg, #fff5a5 0%, #ffd14b 45%, #eaa21d 100%);
  clip-path: polygon(10% 0, 100% 12%, 78% 100%, 0 80%);
  box-shadow: 0 0 7px rgba(255, 219, 93, .35);
  opacity: .42;
  animation: confetti-drift 9s ease-in-out infinite alternate;
}
.scene-confetti i:nth-child(1) { left: 8%; top: 15%; animation-delay: -2s; }
.scene-confetti i:nth-child(2) { left: 91%; top: 16%; animation-delay: -6.5s; animation-duration: 11s; }
.scene-confetti i:nth-child(3) { left: 5%; top: 50%; animation-delay: -4s; animation-duration: 10s; }
.scene-confetti i:nth-child(4) { left: 94%; top: 53%; animation-delay: -8s; }
.scene-confetti i:nth-child(5) { left: 17%; top: 76%; animation-delay: -5s; animation-duration: 12s; }
.scene-confetti i:nth-child(6) { left: 82%; top: 86%; animation-delay: -1s; animation-duration: 11s; }

.intro { position: absolute; z-index: 2; inset: 2.2% 7% auto; text-align: center; color: #fff5d5; }
.intro h1 { margin: 0; font-size: clamp(23px, 5.5cqi, 33px); line-height: 1.4; font-weight: 800; }
.intro p { margin: 3px 0 0; color: #fff2d2; font-size: clamp(12px, 2.6cqi, 15px); line-height: 1.5; }
.wheel-panel { position: static; }
.panel-heading { position: absolute; z-index: 2; top: 67.5%; inset-inline: 6%; text-align: center; }
.chance-pill { display: inline-block; padding: 3px 12px; color: #ffedb4; font-size: clamp(14px, 3cqi, 18px); font-weight: 700; }
.wheel-stage { position: absolute; z-index: 2; left: 18.75%; top: 15.78%; width: 62.5%; aspect-ratio: 1; overflow: hidden; border-radius: 50%; isolation: isolate; background: #fff5db; }
.wheel-canvas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; }
.wheel-canvas canvas { display: block; max-width: none; }
.spin-button { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 26%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: transparent; color: transparent; font-size: 0; }
.spin-button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 7px #172f57; }
.wheel-hint { position: absolute; z-index: 2; top: 72%; inset-inline: 8%; margin: 0; color: #fff4dc; font-size: clamp(12px, 2.6cqi, 15px); line-height: 1.55; text-align: center; }

/* Overlap the artwork at its original redeem position, then let messages extend the page in normal flow. */
.redeem-panel { position: relative; z-index: 2; margin: -28% 7% 0; padding-bottom: max(18px, calc(28cqi - 78px)); color: #fff8e5; }
h2 { margin: 0 0 12px; font-size: 19px; line-height: 1.5; font-weight: 700; }
.redeem-panel h2 { color: #fff5d5; font-size: clamp(16px, 3.6cqi, 21px); margin-bottom: 8px; text-align: center; }
.redeem-form { display: flex; gap: 8px; }
.redeem-form input { min-width: 0; flex: 1; min-height: 46px; width: 0; padding: 10px 12px; border: 1px solid #ead0a3; border-radius: 5px; background: #fffcf5; color: #32291f; font-size: 16px; }
.redeem-form input::placeholder { color: #74695d; font-size: 13px; }
.redeem-form button { flex: none; min-height: 46px; padding: 10px 14px; border: 0; border-radius: 5px; background: #ffe4a4; color: #6e180e; font-size: 14px; font-weight: 800; }
.redeem-form button:disabled { background: #dac6a0; color: #6c5b45; }
.status-message { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: #fff2ce; text-align: center; overflow-wrap: anywhere; }
.status-message:empty { display: none; }
.status-message.is-error { color: #fff; font-weight: 700; }

.showcase-panel, .prizes-panel { margin: 0 28px; padding: 28px 0; }
.showcase-panel:not([hidden]) + .prizes-panel { border-top: 1px solid rgba(92, 67, 31, .14); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-heading h2 { margin: 0; }
.refresh-button { min-height: 44px; padding: 8px 0 8px 12px; border: 0; background: transparent; color: var(--accent); font-size: 14px; }
.prize-list { display: flex; flex-direction: column; margin-top: 16px; }
.prize-empty { margin: 0; padding: 14px 0 18px; color: var(--muted); font-size: 14px; }
.prize-item { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid rgba(92, 67, 31, .12); }
.prize-item:last-child { border-bottom: 0; }
.prize-item img, .prize-image-empty { flex: none; width: 60px; height: 60px; border-radius: 4px; background: #f0e9dc; object-fit: contain; }
.prize-image-empty { display: grid; place-items: center; color: #b49369; font-size: 23px; }
.prize-copy { min-width: 0; flex: 1; }
.prize-copy strong { display: block; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.prize-copy small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.claim-pill { flex: none; color: var(--accent); font-size: 12px; font-weight: 700; }
.showcase-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; margin-top: 16px; }
.showcase-item { min-width: 0; }
.showcase-item img { display: block; width: 100%; aspect-ratio: 4 / 3; background: #f5eee2; object-fit: contain; }
.showcase-item strong { display: block; margin-top: 10px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }

.result-dialog { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(34, 16, 10, .68); animation: result-in .2s ease-out both; }
.result-card { width: min(100%, 360px); padding: 24px; border-radius: 8px; background: var(--paper); text-align: center; }
.result-card .result-logo { display: block; width: 220px; max-width: 100%; height: auto; margin: 0 auto 16px; object-fit: contain; }
.result-card .result-site-name { display: block; margin-bottom: 16px; color: #142e58; font-size: 18px; font-weight: 700; }
.result-card h2 { font-size: 22px; }
.result-card p { color: var(--muted); font-size: 14px; line-height: 1.6; }
.result-card button { min-height: 44px; margin-top: 10px; padding: 10px 24px; border: 0; border-radius: 5px; background: var(--accent); color: #fff; font-weight: 700; }

@media (hover: hover) {
  .redeem-form button:not(:disabled):hover { background: #fff1c7; }
  .refresh-button:hover { text-decoration: underline; }
  .result-card button:hover { background: #77190f; }
}
@media (max-width: 370px) {
  .redeem-panel { margin-inline: 5%; }
  .redeem-form button { padding-inline: 9px; font-size: 12px; }
  .redeem-form input { padding-inline: 8px; }
  .intro { top: 1.6%; }
  .showcase-panel, .prizes-panel { margin-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-lights i, .scene-confetti i, .result-dialog { animation: none; }
}
@keyframes lamp-breathe { 0%, 100% { opacity: .08; } 45% { opacity: .38; } }
@keyframes confetti-drift { from { transform: translate3d(0, 0, 0) rotate(-7deg); opacity: .25; } to { transform: translate3d(2px, -6px, 0) rotate(8deg); opacity: .65; } }
@keyframes result-in { from { opacity: 0; } to { opacity: 1; } }