/* ===== Tokens =====
   Deep theatre-navy stage, warm gold marquee, cream ticket paper, magenta dauber ink.
   Display: Anton (marquee/poster). Numbers: Space Mono (stamp/ticket authenticity).
   Body: DM Sans.
*/
:root {
  --ink: #12213c;
  --ink-deep: #080f1e;
  --ink-mid: #1c3057;
  --paper: #fbf3df;
  --paper-hi: #fffdf6;
  --paper-shadow: #e7dbb8;
  --gold: #f2a900;
  --gold-hi: #ffd873;
  --gold-dim: #6b5423;
  --dauber: #e63950;
  --dauber-deep: #a8172c;
  --line-gold: #ffce4a;
  --teal: #2f9e8e;

  --font-display: "Anton", sans-serif;
  --font-mono: "Space Mono", monospace;
  --font-body: "DM Sans", sans-serif;

  --shadow-deep: 0 30px 60px rgba(0,0,0,0.5);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px 64px;
  color: var(--paper);
  font-family: var(--font-body);
  background: var(--ink-deep);
  overflow-x: hidden;
}

/* ===== Stage backdrop: layered spotlights + velvet sheen ===== */
.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% -10%, rgba(242,169,0,0.14), transparent 55%),
    radial-gradient(circle at 50% 20%, #1c3057 0%, var(--ink) 40%, var(--ink-deep) 78%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.015) 0 2px, transparent 2px 26px);
}

.stage__spot {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  animation: spot-drift 12s ease-in-out infinite alternate;
}
.stage__spot--a {
  width: 380px; height: 380px;
  top: -80px; left: -60px;
  background: radial-gradient(circle, rgba(242,169,0,0.5), transparent 70%);
}
.stage__spot--b {
  width: 420px; height: 420px;
  bottom: -120px; right: -100px;
  background: radial-gradient(circle, rgba(230,57,80,0.35), transparent 70%);
  animation-duration: 16s;
  animation-delay: -4s;
}

@keyframes spot-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(30px, 20px) scale(1.08); }
}

.hall {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ===== Marquee (signature element) ===== */
.marquee {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.marquee__frame {
  position: relative;
  flex: 1;
  padding: 20px 14px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, #223a63, #101d35 65%);
  box-shadow:
    0 0 0 2px #060c18,
    0 0 0 5px #2a3f68,
    var(--shadow-deep);
  overflow: hidden;
}

.bulb-row {
  display: block;
  height: 8px;
  margin: 0 auto 12px;
  width: 100%;
  background-image: repeating-radial-gradient(circle, var(--gold-hi) 0 2.6px, transparent 3px 26px);
  background-size: 26px 8px;
  filter: drop-shadow(0 0 4px rgba(255,216,115,0.8));
  animation: chase 1.1s linear infinite;
}
.bulb-row--bottom { margin: 12px auto 0; animation-direction: reverse; }

@keyframes chase {
  from { background-position: 0 0; }
  to { background-position: 26px 0; }
}

.marquee__letters {
  position: relative;
  display: flex;
  justify-content: center;
  gap: clamp(4px, 2.6vw, 14px);
  font-family: var(--font-display);
  font-size: clamp(34px, 10vw, 54px);
  letter-spacing: 2px;
  perspective: 400px;
}

.letter {
  display: inline-block;
  color: #2a3c60;
  transition: color 0.4s ease;
}

.letter__face {
  display: inline-block;
  transform: rotateX(0deg);
  transition: transform 0.5s ease;
}

.letter.lit {
  color: var(--gold);
  text-shadow:
    0 0 10px rgba(242,169,0,0.95),
    0 0 26px rgba(242,169,0,0.6);
  animation: letter-pop 0.55s ease;
}

.letter.lit .letter__face {
  animation: flip-in 0.55s ease;
}

@keyframes letter-pop {
  0% { transform: scale(0.6); }
  55% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@keyframes flip-in {
  0% { transform: rotateX(-90deg); }
  100% { transform: rotateX(0deg); }
}

.icon-btn {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(180deg, #223a63, #142544);
  color: var(--gold-hi);
  box-shadow: 0 0 0 1.5px #2a3f68, 0 6px 14px rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.icon-btn:hover { transform: translateY(-1px); }
.icon-btn:active { transform: translateY(0); }

.tagline {
  margin: 16px 4px 20px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.5;
  color: #b9c3d8;
  max-width: 36ch;
}

/* ===== Ticket / Card ===== */
.ticket {
  position: relative;
  width: 100%;
  background: var(--paper);
  color: var(--ink);
  border-radius: 10px;
  padding: 20px 20px 24px;
  box-shadow:
    0 0 0 1px rgba(242,169,0,0.5),
    0 0 0 6px var(--ink-mid),
    0 0 0 7px rgba(242,169,0,0.35),
    var(--shadow-deep);
}

.ticket__corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2.5px solid var(--gold);
  z-index: 2;
  opacity: 0.9;
}
.ticket__corner--tl { top: 6px; left: 6px; border-right: none; border-bottom: none; border-radius: 6px 0 0 0; }
.ticket__corner--tr { top: 6px; right: 6px; border-left: none; border-bottom: none; border-radius: 0 6px 0 0; }
.ticket__corner--bl { bottom: 6px; left: 6px; border-right: none; border-top: none; border-radius: 0 0 0 6px; }
.ticket__corner--br { bottom: 6px; right: 6px; border-left: none; border-top: none; border-radius: 0 0 6px 0; }

.ticket__notch {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 15px;
  background: var(--ink-deep);
  border-radius: 0 0 30px 30px;
  box-shadow: 0 0 0 3px var(--ink-mid);
  z-index: 3;
}
.ticket__notch--top { top: -3px; }
.ticket__notch--bottom {
  bottom: -3px;
  border-radius: 30px 30px 0 0;
}

.ticket__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--gold-dim);
  margin-bottom: 14px;
  padding: 0 4px;
}

#lineCounter {
  font-weight: 700;
  color: var(--dauber-deep);
  transition: transform 0.2s ease;
}
#lineCounter.bump { animation: bump 0.3s ease; }
@keyframes bump { 50% { transform: scale(1.25); } }

.card {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
}

.cell {
  position: relative;
  aspect-ratio: 1 / 1;
  border: none;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--paper-hi), #f6ecd2);
  box-shadow: 0 0 0 1.5px var(--paper-shadow) inset, 0 1px 0 rgba(255,255,255,0.7) inset;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(16px, 4.6vw, 22px);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(18,33,60,0.18), 0 0 0 1.5px var(--paper-shadow) inset;
}

.cell:active { transform: translateY(0) scale(0.96); }

.cell.marked { color: var(--dauber-deep); }
.cell.marked .cell__num { position: relative; z-index: 1; }

.cell__blob {
  position: absolute;
  inset: 5px;
  z-index: 0;
  background: radial-gradient(circle at 35% 30%, var(--dauber) 0%, var(--dauber-deep) 75%);
  opacity: 0.92;
  box-shadow: 0 2px 5px rgba(168,23,44,0.45);
  animation: stamp-in 0.32s cubic-bezier(.3,1.5,.4,1);
}
.blob-1 { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: rotate(-6deg); }
.blob-2 { border-radius: 58% 42% 38% 62% / 55% 60% 40% 45%; transform: rotate(4deg); }
.blob-3 { border-radius: 50% 50% 62% 38% / 38% 58% 42% 62%; transform: rotate(10deg); }

@keyframes stamp-in {
  0% { transform: scale(1.9) rotate(0deg); opacity: 0; }
  100% { opacity: 0.92; }
}

.cell.in-line { color: var(--ink); }
.cell.in-line .cell__blob {
  background: radial-gradient(circle at 35% 30%, var(--line-gold) 0%, var(--gold) 75%);
  box-shadow: 0 0 12px rgba(242,169,0,0.75);
  animation: stamp-in 0.32s cubic-bezier(.3,1.5,.4,1), gold-pulse 1.6s ease-in-out 0.4s infinite;
}

@keyframes gold-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}

.cell.win-lock { cursor: default; }

/* ===== Buttons ===== */
.btn {
  border: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.3px;
  padding: 13px 30px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn--gold {
  margin-top: 22px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, #c98700);
  color: var(--ink-deep);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 -3px 6px rgba(0,0,0,0.15) inset,
    0 8px 20px rgba(242,169,0,0.4);
}
.btn--gold:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn--gold:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: #d8dfef;
  box-shadow: 0 0 0 1.5px rgba(216,223,239,0.4) inset;
}
.btn--ghost:hover { background: rgba(216,223,239,0.08); }

.btn--lg { padding: 15px 36px; font-size: 15.5px; }

.btn:focus-visible,
.cell:focus-visible,
.icon-btn:focus-visible {
  outline: 3px solid var(--gold-hi);
  outline-offset: 2px;
}

/* ===== Confirmation modal ===== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 10, 20, 0.72);
  backdrop-filter: blur(2px);
  animation: fade-in 0.25s ease;
  padding: 20px;
}
.modal[hidden] { display: none !important; }

.modal__card {
  width: 100%;
  max-width: 340px;
  background: linear-gradient(180deg, #1c3057, #101d35);
  border-radius: 16px;
  padding: 26px 24px;
  text-align: center;
  box-shadow: 0 0 0 1.5px rgba(242,169,0,0.35), var(--shadow-deep);
  animation: modal-in 0.3s cubic-bezier(.3,1.2,.4,1);
}

@keyframes modal-in {
  0% { transform: scale(0.9) translateY(10px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.modal__eyebrow {
  font-family: var(--font-mono);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--gold);
  margin: 0 0 8px;
}
.modal__title {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 0.5px;
  margin: 0 0 10px;
  color: var(--paper);
}
.modal__sub {
  font-size: 13.5px;
  line-height: 1.55;
  color: #b9c3d8;
  margin: 0 0 22px;
}
.modal__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.modal__actions .btn { margin-top: 0; padding: 12px 22px; }

/* ===== Curtain (win overlay) ===== */
.curtain[hidden] { display: none !important; }

.curtain {
  position: fixed;
  inset: 0;
  background: rgba(6, 10, 20, 0.9);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  animation: fade-in 0.35s ease;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.curtain__content {
  text-align: center;
  padding: 40px 32px;
  max-width: 380px;
}

.curtain__eyebrow {
  font-family: var(--font-mono);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--gold);
  margin: 0 0 6px;
}

.curtain__title {
  font-family: var(--font-display);
  font-size: clamp(52px, 16vw, 78px);
  color: var(--gold);
  text-shadow: 0 0 10px rgba(242,169,0,0.95), 0 0 32px rgba(242,169,0,0.6);
  margin: 0 0 10px;
  letter-spacing: 3px;
  animation: letter-pop 0.5s ease;
}

.curtain__sub {
  color: #d8dfef;
  font-size: 15px;
  margin: 0 0 26px;
  line-height: 1.5;
}

/* ===== Confetti ===== */
.confetti-layer {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  top: -20px;
  width: 8px;
  height: 14px;
  opacity: 0.95;
  animation-name: confetti-fall;
  animation-timing-function: cubic-bezier(.4,.1,.6,.9);
  animation-fill-mode: forwards;
}

@keyframes confetti-fall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(105vh) rotate(540deg); opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .bulb-row,
  .letter.lit,
  .letter.lit .letter__face,
  .curtain,
  .curtain__title,
  .cell__blob,
  .stage__spot,
  .confetti-piece,
  .modal__card {
    animation: none !important;
  }
}

@media (max-width: 380px) {
  .card { gap: 6px; }
  .ticket { padding: 16px 14px 20px; }
}