:root { color-scheme: dark; }
body { margin: 0; background: #170c39; color: #fff; font-family: system-ui, sans-serif; }
.scene { max-width: 1920px; min-height: 156.25vw; background: url('../img/bg.jpg') center top / 100% 100% no-repeat; overflow: hidden; }
.landing { width: 68%; max-width: 1300px; container-type: inline-size; padding-bottom: 1.5cqw; }
.artwork { display: block; width: 100%; height: auto; }
.event-title { width: 86.92%; margin: 0 auto; }
.event-info { width: 91.23%; margin: -11cqw auto 0; position: relative; }
.event-nav { margin-top: -6cqw; }
.art-button { padding: 0; background: transparent; border: 0; color: inherit; line-height: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.art-button img { display: block; width: 100%; height: auto; }
.art-button:focus-visible { outline: 3px solid #ffe774; outline-offset: 5px; border-radius: 14px; }
.guide-button { width: 33.92%; }
.mission-button { width: 32.08%; }
.event-nav .art-button { transition: transform 180ms ease, filter 180ms ease; }
.event-nav .art-button:hover { transform: translateY(-4px); filter: brightness(1.1); }
.candy-house { width: 72.38%; margin-top: 0.4cqw; }
.token-counter { width: 67.27%; left: 16.36%; top: 29.7%; }
.token-value { position: absolute; top: 37%; left: 50%; transform: translate(-50%, -50%); padding-top: 15%; font-size: 3.7cqw; font-weight: 800; line-height: 1; text-shadow: 0 2px 4px #361046; }
.character { width: 39%; left: 30.5%; bottom: 2%; transform-origin: bottom center; }
.character[aria-disabled='false']:hover { filter: drop-shadow(0 0 12px #ffc82c); }
.character[aria-disabled='true'] { cursor: default; }
.click-indicator { width: 20%; height: auto; left: 68%; bottom: 23%; pointer-events: none; filter: drop-shadow(2px 2px 16px black); animation: indicator-nudge 1.4s ease-in-out infinite; }
@keyframes indicator-nudge {
  0%, 100% { transform: translateX(0) scale(1); }
  50% { transform: translateX(-10px) scale(1.06); }
}
.costume-panel { margin-top: 3.6cqw; padding: 8cqw 3.4cqw 0.8cqw; border: 2px solid #9c11f5; border-radius: 2.3cqw; background: rgba(10, 3, 23, 0.72); box-shadow: 0 0 15px #8f15dc33; }
.costume-heading { position: absolute; width: 52%; top: -4cqw; left: 24%; margin: 0; }
.costume-button { width: 90%; margin-inline: auto; border-radius: 20%; transition: transform 180ms ease, filter 180ms ease, opacity 180ms ease; opacity: 0.65; }
.costume-button:hover { opacity: 1; transform: translateY(-4px); }
.costume-button[aria-pressed='true'] { opacity: 1; filter: drop-shadow(0 0 9px #ffe54f); transform: translateY(-4px); }
.jackpot { width: 89.38%; margin: 2cqw auto 0; }
.modal-backdrop.show { opacity: 0.82; }
.artwork-modal { background: transparent; border: 0; }
.reward-dialog { width: min(370px, calc(100% - 2rem)); max-width: 370px; margin: 1.75rem auto; }
.guide-dialog { max-width: 1000px; width: 94%; margin-inline: auto; }
.reward-button { width: 100%; }
.reward-amount { position: absolute; left: 44%; top: 65%; transform: translate(-50%, -50%); font-size: clamp(32px, 8vw, 40px); font-weight: 900; line-height: 1.2; color: #000000; -webkit-text-stroke: 1px #fff5bd; text-shadow: 0 3px 0 #fff5bd, 0 0 15px #fff5bd; pointer-events: none; }
[hidden] { display: none !important; }
@media (min-width: 1920px) { .scene { min-height: 3000px; } }
@media (max-width: 767.98px) {
  .scene { min-height: 100vh; background-size: auto 100%; }
  .landing { width: 96%; padding: 2cqw 0 5cqw; }
  .event-title { width: 96%; }
  .event-info { width: 100%; margin-top: -5cqw; }
  .event-nav { margin-top: -0.7cqw; }
  .guide-button { width: 40%; }
  .mission-button { width: 38%; }
  .candy-house { width: 89%; margin-top: 2cqw; }
  .token-value { font-size: 5.1cqw; }
  .costume-panel { margin: 5cqw 2cqw 0; padding: 11cqw 5cqw 4cqw; border-radius: 4cqw; }
  .costume-heading { width: 85%; left: 7.5%; top: -5cqw; }
  .costume-options { --bs-gutter-x: 4cqw; --bs-gutter-y: 4cqw; }
  .costume-button { width: 100%; opacity: 0.85; }
  .jackpot { width: 100%; margin-top: 4cqw; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }