/* Presentation only. Result data is rendered by app.mjs after the reveal. */
.modal:has(.scratch-reveal) { width: min(510px, calc(100% - 28px)); padding: 32px 26px 25px; }
.scratch-reveal { --scratch-progress: 0%; text-align: center; }
.scratch-reveal > .eyebrow { display: block; margin-top: 8px; }
.scratch-reveal > h2 { padding: 0; margin: 10px 0 12px; font-size: 27px; line-height: 1.35; }
.scratch-reveal > p { font-size: 13px; line-height: 1.7; }
.scratch-stage { position: relative; width: 100%; height: 224px; margin: 25px 0 0; border: 1px solid #cddfee; border-radius: 17px; background: #fff3f7; overflow: hidden; isolation: isolate; box-shadow: 0 8px 22px #507dae12; }
.scratch-underlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; background: linear-gradient(130deg, #fff0f3, #fff8dc 50%, #eaf6ff); color: var(--accent-dark); }
.scratch-underlay::before, .scratch-underlay::after { content: "✦"; position: absolute; color: #fdcd30; font-size: 39px; }
.scratch-underlay::before { top: 22px; left: 23px; transform: rotate(-12deg); }
.scratch-underlay::after { right: 25px; bottom: 20px; font-size: 30px; color: #7ac5fd; transform: rotate(16deg); }
.scratch-underlay > span { font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.scratch-underlay > b { font-family: Arial, sans-serif; font-weight: 950; letter-spacing: -.06em; font-size: 34px; color: var(--accent-dark); }
.scratch-underlay > span:last-child { color: #6b6980; font-size: 12px; font-weight: 500; letter-spacing: -.02em; }
.scratch-canvas { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: crosshair; border-radius: inherit; }
.scratch-canvas:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: -6px; }
.scratch-stage::after { content: ""; position: absolute; z-index: 4; bottom: 0; left: 0; width: var(--scratch-progress); height: 4px; border-radius: 0 99px 99px 0; background: var(--print); pointer-events: none; transition: width 100ms ease-out; }
.scratch-hand { position: absolute; z-index: 3; width: 47px; height: 47px; right: 20%; top: 43%; display: grid; place-items: center; pointer-events: none; color: #ffffff; font-size: 31px; line-height: 1; filter: drop-shadow(1px 3px 2px #607d9845); animation: joy-scratch-hand 1.9s ease-in-out 3; transform-origin: center; }
.scratch-hand svg { width: 100%; height: 100%; }
.scratch-started .scratch-hand, .is-scratching .scratch-hand, .scratch-unavailable .scratch-hand, .scratch-complete .scratch-hand { display: none; }
.scratch-reveal .scratch-caption { min-height: 40px; margin: 14px 0 18px; color: #686b7d; font-size: 12px; line-height: 1.7; }
.scratch-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
.scratch-toolbar .btn { min-width: 0; min-height: 48px; font-size: 13px; padding: 12px 15px; }
.scratch-toolbar [data-sound] { color: #655c75; border-color: #d8cada; background: #ffffff; font-size: 11px; }
.scratch-toolbar [data-sound][aria-pressed="true"] { color: var(--accent-dark); border-color: var(--print); background: #fff0f3; }
.scratch-reveal > .tiny { margin-top: 18px; color: #707385; font-size: 10px; line-height: 1.8; }
.scratch-unavailable .scratch-stage::after { display: none; }
.scratch-reduced-motion .scratch-hand { display: none; }

/* The layer lives inside <dialog>, so it paints in the browser top layer. */
.celebration-layer { position: fixed; inset: 0; z-index: 60; overflow: hidden; pointer-events: none; user-select: none; -webkit-user-select: none; contain: paint; }
.celebration-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.celebration-decor { position: absolute; inset: 0; pointer-events: none; animation: joy-party-enter 650ms cubic-bezier(.16,.8,.22,1) both; }
.celebration-star { position: absolute; font-family: Arial, sans-serif; font-size: 55px; color: #fdcd30; line-height: 1; text-shadow: 0 3px 0 #ffc34022; animation: joy-star-bob 1700ms ease-in-out 2 alternate; }
.celebration-star.star-a { left: 14%; top: 22%; color: var(--print); transform: rotate(-12deg); }
.celebration-star.star-b { right: 15%; top: 16%; font-size: 74px; color: #fdcd30; animation-delay: 120ms; }
.celebration-star.star-c { left: 20%; bottom: 23%; font-size: 80px; color: #48aff8; animation-delay: 240ms; }
.celebration-star.star-d { right: 20%; bottom: 25%; font-size: 43px; color: #30ceaa; animation-delay: 180ms; }
.celebration-ribbon { position: absolute; top: 24%; width: 18px; height: 64px; border: 5px solid #a578ec; border-right-color: transparent; border-left-color: transparent; border-radius: 50%; transform: rotate(-25deg); }
.ribbon-a { left: 26%; }
.ribbon-b { right: 24%; top: 37%; height: 53px; border-top-color: var(--print); border-bottom-color: var(--print); transform: rotate(32deg); }
.celebration-trumpet { position: absolute; width: 125px; height: 90px; top: 49%; animation: joy-trumpet 500ms ease-out both; }
.celebration-trumpet svg { width: 100%; height: 100%; }
.trumpet-left { left: 4%; transform: rotate(-26deg); }
.trumpet-right { right: 4%; transform: scaleX(-1) rotate(-26deg); }
.celebration-layer.is-jackpot .celebration-star { font-size: 72px; }
.celebration-layer.is-jackpot .star-b { font-size: 96px; }
.celebration-layer.is-jackpot .celebration-trumpet { width: 145px; height: 105px; }
.celebration-layer.is-reduced-motion .celebration-canvas { display: none; }
.celebration-layer.is-reduced-motion .celebration-decor, .celebration-layer.is-reduced-motion .celebration-star, .celebration-layer.is-reduced-motion .celebration-trumpet { animation: none; }
.celebration-layer.is-reduced-motion .celebration-trumpet { opacity: .8; }

@keyframes joy-scratch-hand { 0%, 12%, 100% { transform: translate(0, 0) rotate(-15deg); opacity: .8; } 35% { transform: translate(-60px, 12px) rotate(0deg); opacity: 1; } 65% { transform: translate(13px, -17px) rotate(-22deg); opacity: 1; } 86% { transform: translate(-35px, 8px) rotate(-5deg); opacity: .9; } }
@keyframes joy-party-enter { from { opacity: 0; scale: .88; } to { opacity: 1; scale: 1; } }
@keyframes joy-star-bob { from { translate: 0 8px; rotate: -8deg; } to { translate: 0 -7px; rotate: 8deg; } }
@keyframes joy-trumpet { from { opacity: 0; scale: .65; } to { opacity: 1; scale: 1; } }

@media (max-width: 600px) {
  .modal:has(.scratch-reveal) { padding: 29px 20px 24px; }
  .scratch-reveal > h2 { font-size: 25px; }
  .scratch-stage { height: 210px; margin-top: 22px; }
  .celebration-trumpet { width: 83px; height: 60px; top: 39%; }
  .trumpet-left { left: -12px; }
  .trumpet-right { right: -12px; }
  .celebration-star.star-a { left: 3%; top: 16%; font-size: 37px; }
  .celebration-star.star-b { right: 4%; top: 13%; font-size: 43px; }
  .celebration-star.star-c { left: 7%; bottom: 18%; font-size: 49px; }
  .celebration-star.star-d { right: 7%; bottom: 17%; font-size: 36px; }
  .ribbon-a { left: 6%; top: 59%; }
  .ribbon-b { right: 5%; top: 63%; }
  .celebration-layer.is-jackpot .celebration-star { font-size: 48px; }
  .celebration-layer.is-jackpot .star-b { font-size: 59px; }
  .celebration-layer.is-jackpot .celebration-trumpet { width: 95px; height: 69px; }
}
@media (max-width: 359px) {
  .modal:has(.scratch-reveal) { padding-left: 17px; padding-right: 17px; }
  .scratch-reveal > h2 { font-size: 23px; }
  .scratch-reveal > p { font-size: 12px; }
  .scratch-stage { height: 200px; }
  .scratch-toolbar .btn { padding: 11px 12px; font-size: 12px; }
  .scratch-toolbar [data-sound] { padding: 11px 10px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .scratch-hand, .celebration-canvas { display: none !important; }
  .scratch-stage::after { transition: none; }
  .celebration-decor, .celebration-star, .celebration-trumpet { animation: none !important; }
}
.scratch-stage { background:#fff2df;border-color:#d3bcaa; }
.scratch-stage::after { background:var(--print); }
.scratch-underlay { background:#fff1dc;color:var(--accent-dark); }
.scratch-underlay::before { color:#ffb255; }.scratch-underlay::after {color:#d06e35;}
.scratch-mark { width:66px;height:66px;object-fit:contain; }
.scratch-hand img { width:100%;height:100%;object-fit:contain; }
.scratch-toolbar [data-sound][aria-pressed="true"] { color:#922b0a;background:#fff1e6;border-color:#bd673b; }
.scratch-canvas:focus-visible { outline-color:#69260f; }

/* Exact artwork remains visible; only the original 68 × 10 mm foil is interactive. */
.ticket-sheet { position:relative; width:100%; aspect-ratio:90 / 50; margin:24px 0 0; background:#fff; box-shadow:0 8px 24px #3b170d13; }
.ticket-sheet > img { display:block; width:100%; height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none; }
.ticket-sheet .scratch-stage { position:absolute; left:11.95%; top:29.37%; width:75.95%; height:20.25%; margin:0; border:0; border-radius:4px; background:#c2c2c2; box-shadow:none; }
.ticket-sheet .scratch-stage::after { height:2px; }
.ticket-sheet .scratch-underlay { padding:0 5px; gap:0; background:#fffdf9; }
.ticket-sheet .scratch-underlay::before, .ticket-sheet .scratch-underlay::after, .ticket-sheet .scratch-mark { display:none; }
.ticket-sheet .scratch-underlay > b { font-size:clamp(10px,2.8vw,15px); line-height:1.2; letter-spacing:0; }
.ticket-sheet .scratch-underlay > span { display:none; }
.ticket-sheet .scratch-hand { width:22px; height:22px; top:calc(50% - 11px); right:9%; font-size:18px; animation-name:kiduk-ticket-scratch-hand; }
.ticket-sheet .scratch-canvas:focus-visible { outline-width:2px; outline-offset:-3px; }
@keyframes kiduk-ticket-scratch-hand { 0%, 100% { transform:translateX(0) rotate(-10deg); opacity:.7; } 30% { transform:translateX(-20px) rotate(0); opacity:1; } 65% { transform:translateX(5px) rotate(-12deg); opacity:1; } }

/* The manual popover paints above the modal, across the visible viewport. */
.celebration-layer {
  position: fixed;
  inset: 0;
  margin: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  pointer-events: none;
}
.celebration-layer::backdrop { background: transparent; pointer-events: none; }
.celebration-canvas { z-index: 2; }
.celebration-decor { z-index: 1; animation: kiduk-celebration-welcome 650ms ease-out both; }
.celebration-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, transparent 35%, #ffcc4b35 100%);
  animation: kiduk-warm-glow 1300ms ease-out both;
  pointer-events: none;
}
.celebration-motif {
  position: absolute;
  width: clamp(36px, 5.5vw, 82px);
  height: auto;
  opacity: .95;
  animation: kiduk-party-motif 4200ms ease-out both;
}
.motif-flower { top: 12%; left: 9%; rotate: -12deg; }
.motif-heart { top: 17%; right: 9%; rotate: 15deg; animation-delay: 120ms; }
.motif-smile { bottom: 13%; right: 12%; rotate: -10deg; animation-delay: 240ms; }
.celebration-star.star-a { left: 18%; top: 37%; color: #ffcc36; font-size: 40px; }
.celebration-star.star-b { right: 17%; top: 8%; color: #ffb236; font-size: 52px; }
.celebration-trumpet { top: auto; bottom: 9%; width: clamp(65px, 9vw, 125px); }
.trumpet-left { left: 3%; }
.trumpet-right { right: 3%; }
.celebration-layer.is-jackpot .celebration-trumpet { width: clamp(75px, 10vw, 145px); height: auto; }
.celebration-layer.is-reduced-motion .celebration-glow { display: none; }
.celebration-layer.is-reduced-motion .celebration-motif { animation: none; }
@keyframes kiduk-celebration-welcome {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes kiduk-warm-glow {
  0%, 100% { opacity: 0; }
  25% { opacity: 1; }
}
@keyframes kiduk-party-motif {
  0% { opacity: 0; translate: 0 12px; scale: .7; }
  12% { opacity: .95; translate: 0 0; scale: 1.1; }
  24%, 78% { opacity: .95; translate: 0 -5px; scale: 1; }
  100% { opacity: 0; translate: 0 -18px; scale: .92; }
}
@media (max-width: 600px) {
  .motif-flower { top: 8%; left: 4%; }
  .motif-heart { top: 11%; right: 5%; }
  .motif-smile { bottom: 9%; right: 17%; }
  .celebration-star.star-a { left: 4%; top: 32%; font-size: 27px; }
  .celebration-star.star-b { right: 11%; top: 4%; font-size: 34px; }
  .celebration-trumpet { bottom: 12%; }
}
@media (prefers-reduced-motion: reduce) {
  .celebration-motif { animation: none !important; }
  .celebration-glow { display: none; }
}