@import url('data:text/css,');

:root {
  --pink: #ff3dbb;
  --hot: #ff087f;
  --violet: #9b5cff;
  --ink: #13001f;
  --cream: #fff7df;
  --gold: #ffd56a;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--ink); }
body {
  margin: 0;
  min-height: 100vh;
  color: white;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 10%, rgba(255,61,187,.28), transparent 30rem),
    radial-gradient(circle at 82% 80%, rgba(117,64,255,.32), transparent 34rem),
    linear-gradient(145deg, #100019 0%, #240039 52%, #0d0018 100%);
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .22;
  background-image: radial-gradient(rgba(255,255,255,.8) .7px, transparent .8px);
  background-size: 24px 24px; mask-image: linear-gradient(to bottom, black, transparent 75%);
}
.aurora { position: fixed; inset: -20%; pointer-events: none; filter: blur(80px); opacity: .45; animation: drift 12s ease-in-out infinite alternate; background: conic-gradient(from 90deg at 50% 50%, transparent, #ff178f55, transparent, #793bff44, transparent); }
@keyframes drift { to { transform: translate3d(5%, -4%, 0) rotate(12deg) scale(1.08); } }
.shell { position: relative; z-index: 1; width: min(1100px, calc(100% - 32px)); min-height: 100vh; margin: auto; display: flex; flex-direction: column; align-items: center; }
.brand { width: 100%; padding: 24px 4px; display: flex; align-items: center; gap: 10px; color: #f1d9ff; font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #ffffff55; border-radius: 50%; color: var(--gold); font-family: Georgia, serif; font-size: 1.05rem; box-shadow: 0 0 22px #ff38bd55; }
.hero-card, .entry-form-panel, .checking-panel { width: min(760px, 100%); margin: auto 0; padding: clamp(34px, 7vw, 70px); text-align: center; border: 1px solid #ffffff24; border-radius: 34px; background: linear-gradient(155deg, #ffffff17, #ffffff08); box-shadow: 0 32px 100px #05000899, inset 0 1px #ffffff30; backdrop-filter: blur(20px); }
.eyebrow { width: max-content; margin: 0 auto 28px; padding: 9px 14px; border: 1px solid #ffffff25; border-radius: 999px; color: #f5dfff; background: #ffffff0c; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #60ffbd; box-shadow: 0 0 12px #60ffbd; }
.kicker { margin: 0 0 12px; color: #ffc4ed; font-size: .78rem; font-weight: 900; letter-spacing: .23em; text-transform: uppercase; }
h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.65rem, 7vw, 5.5rem); line-height: .95; letter-spacing: -.05em; }
h1 em { color: var(--pink); font-weight: 500; text-shadow: 0 0 32px #ff35bb77; }
.intro { max-width: 540px; margin: 25px auto; color: #e8d8ef; font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.65; }
.date-chip { display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; margin: 3px auto 30px; padding: 12px 17px; border: 1px solid #ffd97644; border-radius: 15px; color: #fff3c6; background: #ffd56a10; box-shadow: 0 0 30px #ffd56a12; }
.date-chip .month { align-self: end; font-size: .72rem; font-weight: 900; letter-spacing: .2em; }
.date-chip strong { grid-row: 1 / 3; margin-left: 11px; font-family: Georgia, serif; font-size: 2.3rem; line-height: 1; }
.date-chip .year { font-size: .65rem; letter-spacing: .16em; }
button, a { -webkit-tap-highlight-color: transparent; }
.primary-button, .secondary-button { display: inline-flex; justify-content: center; align-items: center; gap: 18px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 900; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.primary-button { min-width: 235px; padding: 17px 24px; color: white; background: linear-gradient(105deg, var(--hot), var(--violet)); box-shadow: 0 14px 45px #ff168a55, inset 0 1px #ffffff55; }
.primary-button:hover, .secondary-button:hover { transform: translateY(-2px) scale(1.015); }
.primary-button:focus-visible, .secondary-button:focus-visible { outline: 3px solid white; outline-offset: 4px; }
.microcopy { margin: 14px 0 0; color: #bfa8cb; font-size: .75rem; }
footer { margin-top: auto; width: 100%; padding: 28px 10px; color: #a895b3; text-align: center; font-size: .72rem; line-height: 1.5; }

.entry-form-panel, .checking-panel { display: none; }
.entry-form-panel.visible, .checking-panel.visible { display: block; animation: panelIn .45s ease both; }
.hero-card.leaving, .entry-form-panel.leaving { animation: panelOut .35s ease both; }
@keyframes panelOut { to { opacity: 0; transform: translateY(-14px) scale(.97); } }
@keyframes panelIn { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.checking-panel h2 { margin: 12px 0; font-family: Georgia, serif; font-size: clamp(2rem, 5vw, 3.8rem); }
.entry-form-panel h2 { margin: 8px 0 10px; font-family: Georgia, serif; font-size: clamp(2.2rem, 5vw, 3.8rem); }
.form-intro { margin: 0 0 28px; color: #d9c4e1; }
.entry-form-panel form { width: min(470px, 100%); margin: auto; text-align: left; }
.entry-form-panel label { display: block; margin: 17px 3px 8px; color: #f2dff9; font-size: .78rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.entry-form-panel input { width: 100%; min-height: 54px; padding: 13px 16px; border: 1px solid #ffffff32; border-radius: 14px; outline: none; color: white; background: #0f001c88; font: inherit; box-shadow: inset 0 1px #ffffff12; }
.entry-form-panel input::placeholder { color: #9d87a9; }
.entry-form-panel input:focus { border-color: #ff68ca; box-shadow: 0 0 0 4px #ff3dbb20, 0 0 26px #ff3dbb20; }
.form-submit { width: 100%; margin-top: 26px; }
.privacy-note { margin: 16px auto 0; color: #a994b3; font-size: .72rem; line-height: 1.5; }
.checking-panel > p:not(.kicker) { color: #cdbdd4; }
.scanner { position: relative; width: 88px; height: 88px; margin: 0 auto 25px; border: 1px solid #ffffff24; border-radius: 24px; overflow: hidden; background: linear-gradient(145deg, #ff2aac18, #8d53ff24); }
.scanner::before { content: "✦"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold); font-size: 2.2rem; text-shadow: 0 0 18px var(--gold); }
.scanner span { position: absolute; left: 10px; right: 10px; height: 2px; background: #ff6ed1; box-shadow: 0 0 12px #ff6ed1; animation: scan 1.2s ease-in-out infinite alternate; }
@keyframes scan { from { top: 14px; } to { top: 72px; } }
.progress { height: 7px; margin: 28px auto 22px; overflow: hidden; border-radius: 99px; background: #ffffff14; }
.progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pink), var(--violet), var(--gold)); box-shadow: 0 0 14px var(--pink); transition: width .7s ease; }
.check-steps { display: flex; justify-content: space-between; gap: 10px; color: #806f89; font-size: .67rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.check-steps .done { color: #baffda; }

#confetti { position: fixed; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.sound-gate { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; background: #0d0018e8; backdrop-filter: blur(18px); }
.sound-gate.hidden { display: none; }
.sound-gate-card { width: min(500px, 100%); padding: clamp(32px, 8vw, 58px); border: 1px solid #ffffff2e; border-radius: 30px; text-align: center; background: linear-gradient(145deg, #3a0755, #190023); box-shadow: 0 30px 100px #000c, inset 0 1px #ffffff2d; }
.sound-gate-card h2 { margin: 8px 0 13px; font-family: Georgia, serif; font-size: clamp(2rem, 7vw, 3.6rem); line-height: 1; }
.sound-gate-card > p:not(.kicker) { margin: 0 0 25px; color: #d9c6e2; }
.sound-gate-icon { display: grid; place-items: center; width: 70px; height: 70px; margin: 0 auto 22px; border-radius: 50%; color: #24001d; background: var(--pink); box-shadow: 0 0 40px #ff3dbb99; font-size: 2rem; animation: musicPulse 1.1s ease-in-out infinite alternate; }
.music-control { position: fixed; z-index: 5; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 9px; padding: 10px 15px; border: 1px solid #ffffff32; border-radius: 999px; color: white; background: #180024cc; cursor: pointer; font: 800 .75rem/1 ui-sans-serif, system-ui, sans-serif; box-shadow: 0 10px 32px #0008, inset 0 1px #ffffff24; backdrop-filter: blur(14px); }
.music-control:hover { border-color: #ff68ca; background: #330047e6; }
.music-control:focus-visible { outline: 3px solid white; outline-offset: 3px; }
.music-icon { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: #24001d; background: var(--pink); box-shadow: 0 0 15px #ff3dbb88; }
.music-control.playing .music-icon { animation: musicPulse 1.1s ease-in-out infinite alternate; }
@keyframes musicPulse { to { transform: scale(1.13); box-shadow: 0 0 25px #ff3dbbdd; } }
.winner-shell { padding-top: clamp(48px, 8vw, 90px); text-align: center; }
.reveal-label { margin: 0 0 14px; color: var(--gold); font-size: .74rem; font-weight: 900; letter-spacing: .28em; text-transform: uppercase; animation: revealUp .7s .1s both; }
.winner-title { animation: revealUp .75s .18s both; }
.winner-title span { color: #ff60c8; font-style: italic; text-shadow: 0 0 30px #ff2cad88; }
.winner-subtitle { margin: 18px 0 30px; color: #e8d3ef; animation: revealUp .7s .27s both; }
.karol-headliner { margin: 4px 0 10px; color: #ff38b8; font-family: Georgia, "Times New Roman", serif; font-size: clamp(4.2rem, 14vw, 10rem); font-weight: 900; font-style: italic; line-height: .8; letter-spacing: -.08em; text-shadow: 0 0 18px #ff25a9aa, 0 0 65px #ff0c9299, 4px 5px 0 #6e1cff55; transform: rotate(-2deg); animation: revealUp .8s .32s both; }
@keyframes revealUp { from { opacity: 0; transform: translateY(25px); } }
.ticket-wrap { width: 100%; padding: 28px 4px 34px; perspective: 1200px; }
.ticket { position: relative; display: grid; grid-template-columns: 1fr 155px; width: min(730px, 100%); min-height: 315px; margin: auto; overflow: hidden; border: 1px solid #fff0a8; border-radius: 24px; color: #301700; text-align: left; background: linear-gradient(135deg, #f6b934, #ffe999 36%, #c98916 72%, #ffe38a); box-shadow: 0 32px 80px #0009, 0 0 60px #ffcc5655; transform: rotateX(8deg) rotateZ(-1.5deg); animation: ticketIn 1s .35s cubic-bezier(.2,.8,.2,1) both, ticketFloat 5s 1.35s ease-in-out infinite; }
@keyframes ticketIn { from { opacity: 0; transform: translateY(110px) rotateX(55deg) rotateZ(-7deg) scale(.7); } }
@keyframes ticketFloat { 50% { transform: translateY(-8px) rotateX(5deg) rotateZ(1deg); } }
.ticket::before, .ticket::after { content: ""; position: absolute; z-index: 2; right: 136px; width: 36px; height: 36px; border-radius: 50%; background: #1b002b; box-shadow: inset 0 0 10px #0008; }
.ticket::before { top: -19px; } .ticket::after { bottom: -19px; }
.ticket-shine { position: absolute; z-index: 3; inset: -100% -40%; pointer-events: none; transform: rotate(22deg); background: linear-gradient(90deg, transparent 45%, #fff9 50%, transparent 55%); animation: shine 3.8s 1.4s ease-in-out infinite; }
@keyframes shine { from { translate: -35% 0; } to { translate: 35% 0; } }
.ticket-main { padding: clamp(28px, 6vw, 48px); background-image: radial-gradient(#6f400822 .8px, transparent .8px); background-size: 12px 12px; }
.admit { display: inline-block; padding: 6px 10px; border: 1px solid #43240066; border-radius: 99px; font-size: .62rem; font-weight: 900; letter-spacing: .18em; }
.ticket-small { margin: 18px 0 3px; font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.ticket h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(2.6rem, 6vw, 4.3rem); line-height: .8; letter-spacing: -.06em; }
.ticket-note { margin: 16px 0 23px; font-family: Georgia, serif; font-style: italic; }
.ticket-meta { display: flex; gap: clamp(22px, 6vw, 60px); }
.ticket-meta small { display: block; margin-bottom: 3px; font-size: .55rem; font-weight: 900; letter-spacing: .15em; }
.ticket-meta strong { font-size: .83rem; }
.ticket-stub { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-left: 2px dashed #663a1b66; text-align: center; }
.ticket-stub > span { font-size: .65rem; font-weight: 900; letter-spacing: .25em; }
.ticket-stub > strong { font-family: Georgia, serif; font-size: 4rem; line-height: .9; }
.ticket-stub > small { font-weight: 900; letter-spacing: .15em; line-height: 1.4; }
.barcode { width: 62px; height: 32px; margin-top: 7px; opacity: .7; background: repeating-linear-gradient(90deg, #2d1700 0 2px, transparent 2px 5px, #2d1700 5px 6px, transparent 6px 9px); }
.claim-section { width: min(730px, 100%); margin: -4px auto 28px; }
.claim-link { padding: 8px 4px; border: 0; color: #ffd56a; background: none; cursor: pointer; font: 800 1.05rem Georgia, serif; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-transform: capitalize; text-shadow: 0 0 18px #ffd56a55; }
.claim-link:hover { color: white; }
.claim-link:focus-visible { outline: 3px solid white; outline-offset: 6px; border-radius: 4px; }
.claim-form-wrap { padding: clamp(24px, 5vw, 38px); border: 1px solid #ffffff24; border-radius: 24px; background: linear-gradient(155deg, #ffffff15, #ffffff08); box-shadow: 0 22px 65px #07000a77, inset 0 1px #ffffff24; animation: panelIn .45s ease both; }
.claim-form-wrap h2 { margin: 0 0 8px; font-family: Georgia, serif; font-size: clamp(1.65rem, 4vw, 2.5rem); }
.claim-form-wrap > p { margin: 0 0 20px; color: #d8c5e0; }
.claim-form-wrap form { text-align: left; }
.claim-form-wrap label { display: block; margin: 0 3px 8px; color: #f2dff9; font-size: .72rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.claim-row { display: flex; gap: 10px; }
.claim-row input { flex: 1; min-width: 0; min-height: 54px; padding: 13px 16px; border: 1px solid #ffffff32; border-radius: 14px; outline: none; color: white; background: #0f001c88; font: inherit; }
.claim-row input:focus { border-color: #ff68ca; box-shadow: 0 0 0 4px #ff3dbb20; }
.claim-ok { min-width: 84px; padding: 13px 22px; }
.group-reveal { margin: 0; overflow: hidden; border: 1px solid #ffd56a77; border-radius: 25px; background: #0b0012; box-shadow: 0 25px 80px #000a, 0 0 48px #ff3dbb33; animation: revealUp .7s ease both; }
.group-reveal.is-visible { display: block !important; visibility: visible !important; opacity: 1 !important; }
.group-reveal img { display: block; width: 100%; height: auto; }
.group-reveal figcaption { padding: 18px; color: #fff1c0; font-family: Georgia, serif; font-size: 1.15rem; }
.group-shell { padding-bottom: 20px; }
.final-group-photo { width: min(900px, 100%); margin: 28px auto 0; }
.claim-form-wrap[hidden], .group-reveal[hidden], .claim-link[hidden] { display: none; }
.countdown-card { width: min(730px, 100%); padding: 27px clamp(16px, 5vw, 38px); border: 1px solid #ffffff20; border-radius: 25px; background: #ffffff09; box-shadow: inset 0 1px #ffffff20; backdrop-filter: blur(12px); }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.countdown div { padding: 14px 5px; border-radius: 15px; background: #ffffff09; }
.countdown strong { display: block; font-family: Georgia, serif; font-size: clamp(1.65rem, 5vw, 3rem); font-variant-numeric: tabular-nums; }
.countdown span { color: #bd9dcc; font-size: .62rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.countdown-message { margin: 18px 0 0; color: #ffd9f3; }
.love-note { max-width: 600px; margin: 34px auto 20px; color: #efdff3; font-family: Georgia, serif; font-size: 1.15rem; font-style: italic; line-height: 1.6; }
.secondary-button { padding: 12px 20px; color: #f8eaff; border: 1px solid #ffffff2e; background: #ffffff0c; }

@media (max-width: 620px) {
  body { min-width: 0; }
  .shell { width: min(100% - 20px, 1100px); }
  .brand { padding: 14px 2px 10px; }
  .brand-mark { width: 28px; height: 28px; }
  .hero-card, .entry-form-panel, .checking-panel { margin: 12px 0 auto; padding: 30px 19px; border-radius: 22px; }
  .eyebrow { margin-bottom: 21px; padding: 8px 11px; font-size: .62rem; }
  h1 { font-size: clamp(2.45rem, 13vw, 4rem); line-height: .98; }
  .intro { margin: 19px auto 22px; font-size: .95rem; line-height: 1.5; }
  .primary-button { min-height: 52px; width: 100%; }
  .entry-form-panel input, .claim-row input { font-size: 16px; }
  .check-steps { font-size: .56rem; }
  footer { padding: 22px 8px max(22px, env(safe-area-inset-bottom)); }
  .music-control { top: max(10px, env(safe-area-inset-top)); right: 10px; padding: 8px 11px; font-size: .68rem; }
  .sound-gate { padding: 12px; }
  .sound-gate-card { padding: 35px 20px; border-radius: 24px; }
  .sound-gate-card .primary-button { width: 100%; }
  .winner-shell { width: min(100% - 16px, 1100px); padding-top: max(72px, calc(env(safe-area-inset-top) + 60px)); }
  .reveal-label { font-size: .62rem; letter-spacing: .18em; }
  .winner-title { font-size: clamp(2.35rem, 11vw, 3.6rem); line-height: 1; }
  .winner-subtitle { margin: 14px 8px 22px; font-size: .9rem; line-height: 1.55; }
  .karol-headliner { margin: 0 0 7px; font-size: clamp(4rem, 23vw, 7rem); line-height: .85; }
  .ticket-wrap { padding: 20px 0 28px; }
  .ticket { display: flex; flex-direction: column; min-height: 0; border-radius: 20px; transform: rotateX(5deg) rotateZ(-.6deg); }
  .ticket::before, .ticket::after { display: none; }
  .ticket-main { padding: 27px 22px 24px; }
  .ticket h2 { font-size: clamp(2.5rem, 15vw, 4rem); }
  .ticket-note { margin: 14px 0 19px; font-size: .9rem; }
  .ticket-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .ticket-meta strong { display: block; overflow-wrap: anywhere; font-size: .7rem; }
  .ticket-stub { min-height: 83px; flex-direction: row; gap: 14px; border-top: 2px dashed #663a1b66; border-left: 0; padding: 12px 18px; }
  .ticket-stub > strong { font-size: 2.65rem; }
  .ticket-stub > small { font-size: .65rem; }
  .ticket-stub .barcode { width: 54px; height: 28px; margin: 0 0 0 auto; }
  .claim-section { margin-bottom: 22px; }
  .claim-form-wrap { padding: 25px 17px; border-radius: 20px; }
  .group-reveal { border-radius: 19px; }
  .countdown-card { padding: 23px 10px; border-radius: 20px; }
  .countdown { gap: 6px; }
  .countdown div { padding: 12px 2px; }
  .countdown strong { font-size: clamp(1.4rem, 8vw, 2.2rem); }
  .countdown span { font-size: .5rem; letter-spacing: .08em; }
  .love-note { margin: 27px 12px 18px; font-size: 1rem; }
  .claim-row { flex-direction: column; }
  .claim-ok { width: 100%; }
}

@media (max-width: 370px) {
  .shell { width: calc(100% - 12px); }
  .hero-card, .entry-form-panel, .checking-panel { padding: 25px 15px; }
  .music-control { max-width: 132px; }
  .ticket-main { padding: 24px 17px 21px; }
  .ticket-meta { grid-template-columns: 1fr 1fr; }
  .ticket-meta div:last-child { grid-column: 1 / -1; }
  .countdown div { padding: 10px 1px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}