.coupon-draw-retro-stage {
  --coupon-draw-retro-walnut:#4b2319;
  --coupon-draw-retro-walnut-deep:#2a120e;
  --coupon-draw-retro-board:#d6a93b;
  --coupon-draw-retro-board-light:#efcf75;
  --coupon-draw-retro-paper:#fff4d5;
  --coupon-draw-retro-paper-edge:#d6b978;
  --coupon-draw-retro-ink:#183d77;
  --coupon-draw-retro-accent:#bd3c2c;
  --coupon-draw-retro-brass:#c99b3b;
  width:100%;
  min-width:0;
  max-width:900px;
  margin:0 auto;
  color:#2f2018;
  text-align:left;
  isolation:isolate;
}

.coupon-draw-retro-theme-festival {
  --coupon-draw-retro-walnut:#142744;
  --coupon-draw-retro-walnut-deep:#091526;
  --coupon-draw-retro-board:#d96557;
  --coupon-draw-retro-board-light:#f1a17f;
  --coupon-draw-retro-paper:#fff8e7;
  --coupon-draw-retro-paper-edge:#dcbf82;
  --coupon-draw-retro-ink:#1d3563;
  --coupon-draw-retro-accent:#c54135;
  --coupon-draw-retro-brass:#d8ac4d;
}

.coupon-draw-retro-theme-market {
  --coupon-draw-retro-walnut:#3a2920;
  --coupon-draw-retro-walnut-deep:#201510;
  --coupon-draw-retro-board:#e2be42;
  --coupon-draw-retro-board-light:#f1d77b;
  --coupon-draw-retro-paper:#fff6d8;
  --coupon-draw-retro-paper-edge:#d1b36f;
  --coupon-draw-retro-ink:#0f6761;
  --coupon-draw-retro-accent:#c84232;
  --coupon-draw-retro-brass:#c89a36;
}

.coupon-draw-retro-frame {
  position:relative;
  width:100%;
  min-width:0;
  padding:18px;
  border:1px solid #24100c;
  border-radius:6px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04), transparent 12%, rgba(0,0,0,.12) 48%, transparent 78%),
    repeating-linear-gradient(4deg, rgba(255,255,255,.025) 0 1px, rgba(0,0,0,.03) 1px 4px),
    var(--coupon-draw-retro-walnut);
  box-shadow:
    0 22px 44px rgba(48,24,15,.24),
    inset 0 0 0 5px rgba(37,14,10,.38),
    inset 0 0 0 7px rgba(218,168,73,.24);
  overflow:hidden;
}

.coupon-draw-retro-frame::after {
  content:"";
  position:absolute;
  inset:9px;
  border:1px solid rgba(240,199,104,.28);
  pointer-events:none;
}

.coupon-draw-retro-ornament {
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
}

.coupon-draw-retro-corner {
  position:absolute;
  width:26px;
  height:26px;
  border:2px solid #6d481d;
  background:
    radial-gradient(circle at 50% 50%, #f0cf78 0 15%, #a97925 17% 35%, transparent 37%),
    linear-gradient(135deg, #e2bd60, #8b5e1e);
  box-shadow:inset 0 0 0 2px rgba(255,246,193,.32), 0 2px 5px rgba(0,0,0,.26);
}

.coupon-draw-retro-corner-one { top:7px; left:7px; border-radius:3px 3px 12px 3px; }
.coupon-draw-retro-corner-two { top:7px; right:7px; border-radius:3px 3px 3px 12px; }
.coupon-draw-retro-corner-three { bottom:7px; left:7px; border-radius:3px 12px 3px 3px; }
.coupon-draw-retro-corner-four { right:7px; bottom:7px; border-radius:12px 3px 3px 3px; }

.coupon-draw-retro-sign {
  position:relative;
  z-index:2;
  margin:3px 16px 14px;
  padding:14px 18px 13px;
  border:1px solid rgba(247,220,145,.7);
  border-radius:3px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 45%),
    var(--coupon-draw-retro-walnut-deep);
  color:#fff4ce;
  text-align:center;
  box-shadow:0 7px 14px rgba(20,8,6,.28), inset 0 0 0 3px rgba(180,128,44,.17);
}

.coupon-draw-retro-sign::before,
.coupon-draw-retro-sign::after {
  content:"★";
  position:absolute;
  top:50%;
  color:var(--coupon-draw-retro-brass);
  font-size:15px;
  transform:translateY(-50%);
}

.coupon-draw-retro-sign::before { left:18px; }
.coupon-draw-retro-sign::after { right:18px; }

.coupon-draw-retro-sign-kicker {
  display:block;
  margin-bottom:3px;
  color:#d7b45c;
  font-size:10px;
  font-weight:900;
  letter-spacing:1.5px;
}

.coupon-draw-retro-title {
  margin:0;
  color:#fff4ce;
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(22px, 4vw, 36px);
  line-height:1.12;
  letter-spacing:0;
  text-shadow:1px 2px 0 rgba(0,0,0,.32);
}

.coupon-draw-retro-description {
  max-width:620px;
  margin:7px auto 0;
  color:#eadcb8;
  font-size:14px;
  line-height:1.5;
}

.coupon-draw-retro-board {
  position:relative;
  z-index:1;
  min-width:0;
  padding:15px 18px 17px;
  border:1px solid #8a6422;
  border-radius:3px;
  background:
    radial-gradient(circle at 8% 12%, rgba(255,246,187,.48) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 20%, rgba(172,53,38,.18) 0 3px, transparent 4px),
    radial-gradient(circle at 22% 88%, rgba(31,70,121,.16) 0 2px, transparent 3px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, rgba(91,55,12,.025) 1px 3px),
    linear-gradient(145deg, var(--coupon-draw-retro-board-light), var(--coupon-draw-retro-board));
  box-shadow:inset 0 0 0 4px rgba(255,237,157,.24), inset 0 0 28px rgba(91,48,10,.16);
  overflow:hidden;
}

.coupon-draw-retro-status {
  position:relative;
  z-index:5;
  min-height:54px;
  margin:0 0 12px;
  padding:8px 12px;
  border:1px solid rgba(81,45,17,.25);
  border-radius:3px;
  background:rgba(255,246,216,.84);
  color:#49301f;
  font-size:14px;
  font-weight:800;
  line-height:1.45;
  text-align:center;
}

.coupon-draw-retro-ticket-grid {
  display:grid;
  grid-template-columns:repeat(6, minmax(48px, 1fr));
  gap:9px 10px;
  width:100%;
  min-width:0;
  perspective:900px;
}

.coupon-draw-retro-ticket {
  position:relative;
  display:block;
  width:100%;
  min-width:0;
  min-height:64px;
  aspect-ratio:.78;
  padding:0;
  border:0;
  border-radius:2px;
  background:transparent;
  color:var(--coupon-draw-retro-ink);
  font:inherit;
  cursor:pointer;
  transform:rotate(var(--coupon-draw-retro-rotation));
  transform-style:preserve-3d;
  transition:transform 220ms ease, opacity 220ms ease, filter 220ms ease;
  touch-action:manipulation;
}

.coupon-draw-retro-ticket:disabled { cursor:default; }

.coupon-draw-retro-ticket:focus-visible {
  outline:3px solid #163e78;
  outline-offset:3px;
  z-index:12;
}

.coupon-draw-retro-ticket-back,
.coupon-draw-retro-ticket-slip,
.coupon-draw-retro-ticket-flap,
.coupon-draw-retro-ticket-edge {
  position:absolute;
  left:0;
  width:100%;
  pointer-events:none;
}

.coupon-draw-retro-ticket-back {
  inset:2px 0 0;
  border:1px solid #b18d4e;
  border-radius:2px;
  background:#e3c98a;
  box-shadow:0 5px 7px rgba(70,42,12,.25);
}

.coupon-draw-retro-ticket-slip {
  z-index:2;
  top:10%;
  bottom:7%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:5px 4px;
  border:1px solid #c39a51;
  border-radius:2px;
  background:
    repeating-linear-gradient(0deg, rgba(120,87,35,.035) 0 1px, transparent 1px 3px),
    #fff8e3;
  color:#38271d;
  text-align:center;
  transform:translateY(5%);
  transition:transform 900ms cubic-bezier(.2,.72,.22,1), box-shadow 600ms ease;
  overflow:hidden;
}

.coupon-draw-retro-slip-kicker {
  color:#a43c2e;
  font-size:7px;
  font-weight:900;
  line-height:1.1;
}

.coupon-draw-retro-slip-title {
  display:block;
  font-size:clamp(8px, 1.35vw, 13px);
  line-height:1.15;
}

.coupon-draw-retro-slip-copy {
  display:block;
  max-height:0;
  color:#624f3d;
  font-size:0;
  line-height:1.25;
  opacity:0;
}

.coupon-draw-retro-ticket-flap {
  z-index:4;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid #b8914d;
  border-radius:2px;
  background:
    linear-gradient(105deg, transparent 0 45%, rgba(112,75,26,.04) 48%, transparent 53%),
    repeating-linear-gradient(2deg, rgba(123,82,24,.035) 0 1px, transparent 1px 4px),
    var(--coupon-draw-retro-paper);
  box-shadow:
    0 4px 7px rgba(69,41,14,.22),
    inset 0 0 0 2px rgba(255,255,255,.35);
  transform-origin:50% 8%;
  backface-visibility:hidden;
  transition:transform 1100ms cubic-bezier(.22,.72,.16,1), box-shadow 600ms ease;
}

.coupon-draw-retro-ticket-flap::after {
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(31,66,116,.28);
  border-radius:1px;
}

.coupon-draw-retro-ticket-number {
  position:absolute;
  top:7px;
  left:7px;
  color:#8e3126;
  font-family:Georgia, "Times New Roman", serif;
  font-size:11px;
  font-weight:900;
  line-height:1;
}

.coupon-draw-retro-ticket-star {
  display:block;
  color:var(--coupon-draw-retro-ink);
  font-family:Georgia, "Times New Roman", serif;
  font-size:clamp(21px, 4vw, 34px);
  line-height:1;
  opacity:var(--coupon-draw-retro-print-opacity);
  transform:translate(var(--coupon-draw-retro-stamp-x), var(--coupon-draw-retro-stamp-y));
  text-shadow:1px 1px 0 rgba(25,39,66,.14);
}

.coupon-draw-retro-ticket-perforation {
  position:absolute;
  top:11%;
  right:4px;
  left:4px;
  border-top:1px dashed rgba(108,73,28,.5);
}

.coupon-draw-retro-ticket-edge {
  z-index:1;
  right:2px;
  bottom:-3px;
  height:5px;
  border-radius:0 0 2px 2px;
  background:var(--coupon-draw-retro-paper-edge);
  box-shadow:0 2px 2px rgba(49,28,10,.16);
}

.coupon-draw-retro-ticket[data-edge-variant="1"] .coupon-draw-retro-ticket-edge { left:3px; right:0; transform:skewX(-8deg); }
.coupon-draw-retro-ticket[data-edge-variant="2"] .coupon-draw-retro-ticket-edge { left:1px; right:3px; transform:skewX(7deg); }

.coupon-draw-retro-cover {
  position:absolute;
  z-index:7;
  inset:82px 18px 59px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(255,230,157,.46);
  border-radius:4px;
  background:
    repeating-linear-gradient(4deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px),
    rgba(50,24,16,.9);
  color:#f8e6b9;
  text-align:center;
  box-shadow:0 12px 26px rgba(45,22,11,.3), inset 0 0 0 4px rgba(183,126,40,.18);
  transform-origin:50% 0;
  transition:transform 700ms cubic-bezier(.2,.76,.24,1), opacity 500ms ease;
}

.coupon-draw-retro-cover[hidden] { display:none; }

.coupon-draw-retro-cover-star { color:#dfb64f; font-size:44px; line-height:1; }
.coupon-draw-retro-cover-copy { font-family:Georgia, "Times New Roman", serif; font-size:16px; font-weight:800; }

.coupon-draw-retro-start {
  position:absolute;
  z-index:9;
  left:50%;
  bottom:69px;
  min-width:180px;
  min-height:48px;
  padding:11px 20px;
  border:1px solid #5c1c14;
  border-radius:3px;
  background:linear-gradient(180deg, #d6533e, #a52e22);
  color:#fff8e8;
  font-size:16px;
  font-weight:900;
  line-height:1.2;
  box-shadow:0 5px 0 #632018, 0 10px 20px rgba(40,15,9,.3), inset 0 1px 0 rgba(255,255,255,.28);
  transform:translateX(-50%);
  cursor:pointer;
}

.coupon-draw-retro-start:hover { background:linear-gradient(180deg, #e05e47, #ad3325); }

.coupon-draw-retro-start:focus-visible {
  outline:3px solid #fff2bd;
  outline-offset:3px;
}

.coupon-draw-retro-start:disabled { cursor:wait; opacity:.78; }
.coupon-draw-retro-start[hidden] { display:none; }

.coupon-draw-retro-notice {
  position:relative;
  z-index:5;
  margin:13px 0 0;
  color:#56391f;
  font-size:12px;
  font-weight:700;
  line-height:1.4;
  text-align:center;
}

.coupon-draw-retro-phase-opening .coupon-draw-retro-cover {
  opacity:.45;
  transform:rotateX(16deg) translateY(-8px);
}

.coupon-draw-retro-phase-choosing .coupon-draw-retro-ticket:not(:disabled):hover {
  z-index:3;
  transform:translateY(-4px) rotate(var(--coupon-draw-retro-rotation));
}

.coupon-draw-retro-ticket.coupon-draw-retro-is-selected {
  z-index:10;
  transform:translateY(-8px) scale(1.045) rotate(var(--coupon-draw-retro-rotation));
  filter:drop-shadow(0 9px 7px rgba(61,34,12,.32));
}

.coupon-draw-retro-ticket.coupon-draw-retro-is-locked {
  opacity:.46;
  filter:saturate(.72);
}

.coupon-draw-retro-phase-peeling .coupon-draw-retro-is-selected .coupon-draw-retro-ticket-flap,
.coupon-draw-retro-phase-awaiting_server .coupon-draw-retro-is-selected .coupon-draw-retro-ticket-flap {
  box-shadow:0 13px 18px rgba(63,35,13,.27);
  transform:rotateX(-64deg) translateY(-2px);
}

.coupon-draw-retro-phase-peeling .coupon-draw-retro-is-selected .coupon-draw-retro-ticket-slip,
.coupon-draw-retro-phase-awaiting_server .coupon-draw-retro-is-selected .coupon-draw-retro-ticket-slip {
  transform:translateY(-7%);
}

.coupon-draw-retro-phase-revealing .coupon-draw-retro-is-selected .coupon-draw-retro-ticket-flap,
.coupon-draw-retro-phase-revealed .coupon-draw-retro-is-selected .coupon-draw-retro-ticket-flap {
  box-shadow:0 18px 22px rgba(63,35,13,.2);
  transform:rotateX(-148deg) translateY(-4px);
}

.coupon-draw-retro-phase-revealing .coupon-draw-retro-is-selected .coupon-draw-retro-ticket-slip,
.coupon-draw-retro-phase-revealed .coupon-draw-retro-is-selected .coupon-draw-retro-ticket-slip {
  z-index:5;
  box-shadow:0 8px 14px rgba(60,34,13,.28);
  transform:translateY(-32%) scale(1.02);
}

.coupon-draw-retro-phase-revealed .coupon-draw-retro-slip-copy {
  max-height:34px;
  margin-top:2px;
  font-size:clamp(6px, .9vw, 9px);
  opacity:1;
}

.coupon-draw-retro-is-awarded .coupon-draw-retro-is-selected .coupon-draw-retro-ticket-slip {
  border-color:#c5842a;
  background:linear-gradient(145deg, #fff9e8, #f4d787);
}

.coupon-draw-retro-is-not-awarded .coupon-draw-retro-is-selected .coupon-draw-retro-ticket-slip {
  border-color:#7890ae;
  background:linear-gradient(145deg, #fffaf0, #dce8ef);
}

.coupon-draw-retro-sparkle {
  position:absolute;
  z-index:14;
  top:50%;
  left:50%;
  color:#f4c64f;
  font-size:12px;
  pointer-events:none;
  transform:rotate(calc(var(--coupon-draw-retro-sparkle-index) * 72deg)) translateY(-52px);
  animation:coupon-draw-retro-sparkle-in 800ms ease-out both;
}

@keyframes coupon-draw-retro-sparkle-in {
  0% { opacity:0; transform:rotate(calc(var(--coupon-draw-retro-sparkle-index) * 72deg)) translateY(-15px) scale(.5); }
  55% { opacity:1; }
  100% { opacity:.75; transform:rotate(calc(var(--coupon-draw-retro-sparkle-index) * 72deg)) translateY(-52px) scale(1); }
}

@media (max-width:640px) {
  .coupon-draw-retro-frame { padding:11px; }
  .coupon-draw-retro-sign { margin:2px 8px 10px; padding:11px 30px 10px; }
  .coupon-draw-retro-sign-kicker { font-size:8px; letter-spacing:1px; }
  .coupon-draw-retro-description { font-size:12px; }
  .coupon-draw-retro-board { padding:11px 10px 13px; }
  .coupon-draw-retro-status { min-height:64px; margin-bottom:9px; padding:6px 8px; font-size:12px; }
  .coupon-draw-retro-ticket-grid { grid-template-columns:repeat(4, minmax(48px, 1fr)); gap:7px 8px; }
  .coupon-draw-retro-ticket { min-height:58px; }
  .coupon-draw-retro-ticket-number { top:6px; left:6px; font-size:10px; }
  .coupon-draw-retro-cover { inset:84px 10px 56px; }
  .coupon-draw-retro-cover-star { font-size:34px; }
  .coupon-draw-retro-cover-copy { font-size:13px; }
  .coupon-draw-retro-start { bottom:61px; min-width:164px; min-height:48px; font-size:14px; }
  .coupon-draw-retro-notice { margin-top:10px; font-size:10px; }
  .coupon-draw-retro-corner { width:20px; height:20px; }
}

@media (max-width:380px) {
  .coupon-draw-retro-frame { padding:9px; }
  .coupon-draw-retro-board { padding-right:8px; padding-left:8px; }
  .coupon-draw-retro-ticket-grid { gap:6px; }
  .coupon-draw-retro-title { font-size:22px; }
  .coupon-draw-retro-sign::before { left:10px; }
  .coupon-draw-retro-sign::after { right:10px; }
}

@media (prefers-reduced-motion:reduce) {
  .coupon-draw-retro-ticket,
  .coupon-draw-retro-ticket-flap,
  .coupon-draw-retro-ticket-slip,
  .coupon-draw-retro-cover {
    transition-duration:1ms !important;
    animation-duration:1ms !important;
  }
  .coupon-draw-retro-sparkle { display:none; }
}