:root {
  --mint: #7cd2bc;
  --mint-light: #ddf7ef;
  --orange: #efa06b;
  --orange-light: #fff0e4;
  --green: #2eb996;
  --pink: #f56fa4;
  --pink-light: #ffe4ef;
  --purple: #5c0865;
  --purple-mid: #84268d;
  --purple-deep: #26042e;
  --night: #1c1733;
  --night-light: #33244d;
  --ink: #26192c;
  --muted: #6c6170;
  --paper: #fffaf4;
  --white: #ffffff;
  --blackout: #0e0d16;
  --border: 3px solid var(--ink);
  --shadow-small: 5px 5px 0 var(--ink);
  --shadow-large: 10px 10px 0 var(--ink);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 5%, rgba(245, 111, 164, 0.17), transparent 23rem),
    radial-gradient(circle at 94% 20%, rgba(124, 210, 188, 0.27), transparent 25rem),
    linear-gradient(180deg, #fff8ee 0%, #fff 42%, #f2fff9 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.28;
  background-image: radial-gradient(var(--orange) 1.1px, transparent 1.1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(to bottom, black, transparent 74%);
}

[hidden] {
  display: none !important;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

a {
  color: inherit;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 10px 14px;
  border: var(--border);
  border-radius: 10px;
  background: var(--white);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: relative;
  z-index: 20;
  width: min(1180px, calc(100% - 32px));
  margin: 18px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 16px;
  border: var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: var(--shadow-small);
  backdrop-filter: blur(10px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 950;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--pink);
  box-shadow: 3px 3px 0 var(--ink);
  color: var(--white);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

.site-header nav {
  display: flex;
  gap: 18px;
}

.site-header nav a {
  padding: 6px 4px;
  font-size: 0.9rem;
  font-weight: 850;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

main {
  overflow: hidden;
}

.hero,
.ticket-dashboard,
.boardwalk-section,
.how-section {
  width: min(1180px, calc(100% - 32px));
  margin-inline: auto;
}

.hero {
  min-height: 680px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  align-items: center;
  gap: 70px;
  padding: 72px 0 80px;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--purple);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.hero h1,
.section-heading h2,
.how-copy h2,
.community-card h2,
.wallet-card h2,
.entrance-ticket h2,
.attraction-dialog h2,
.fireworks-dialog h2,
.test-panel h2 {
  margin: 0;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.hero h1 {
  max-width: 760px;
  font-size: clamp(3.4rem, 8vw, 7rem);
  font-weight: 1000;
}

.hero h1 span {
  display: block;
  color: var(--purple);
  text-shadow: 4px 4px 0 var(--orange-light);
}

.hero-description {
  max-width: 680px;
  margin: 26px 0 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.primary-button,
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 18px;
  border: var(--border);
  border-radius: 12px;
  font-weight: 950;
  text-decoration: none;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.primary-button {
  background: var(--orange);
  box-shadow: var(--shadow-small);
}

.secondary-button {
  background: var(--white);
}

.primary-button:hover,
.primary-button:focus-visible,
.secondary-button:hover,
.secondary-button:focus-visible {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--ink);
}

.entrance-ticket {
  position: relative;
  isolation: isolate;
  min-height: 470px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 46px 36px;
  border: 4px solid var(--ink);
  border-radius: 26px;
  background:
    linear-gradient(135deg, transparent 12px, rgba(255, 255, 255, 0.19) 13px, transparent 14px) 0 0 / 24px 24px,
    var(--mint);
  box-shadow: var(--shadow-large);
  text-align: center;
  transform: rotate(1.5deg);
}

.entrance-ticket::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: -1;
  border: 3px dashed var(--purple);
  border-radius: 16px;
}

.ticket-notch {
  position: absolute;
  top: 48%;
  width: 38px;
  height: 74px;
  border: 4px solid var(--ink);
  background: #fff9ef;
}

.ticket-notch-left {
  left: -22px;
  border-left: 0;
  border-radius: 0 45px 45px 0;
}

.ticket-notch-right {
  right: -22px;
  border-right: 0;
  border-radius: 45px 0 0 45px;
}

.wallet-label {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 1000;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.entrance-gate {
  width: min(100%, 285px);
  margin: 26px auto 22px;
  padding: 21px 12px 18px;
  border: 4px solid var(--ink);
  border-radius: 70px 70px 10px 10px;
  background: var(--purple);
  box-shadow: inset 0 -12px 0 rgba(0, 0, 0, 0.13), 5px 5px 0 var(--ink);
  color: var(--white);
}

.entrance-gate strong,
.entrance-gate > span:not(.gate-light) {
  display: block;
}

.entrance-gate strong {
  margin-top: 6px;
  font-size: 1.45rem;
  letter-spacing: 0.08em;
}

.entrance-gate > span:not(.gate-light) {
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.gate-light {
  display: inline-block;
  margin: 0 4px;
  color: #ffe16c;
  text-shadow: 0 0 10px #fff3a8;
}

.entrance-ticket h2 {
  font-size: 2rem;
}

.entrance-ticket p:last-child {
  max-width: 330px;
  margin: 15px auto 0;
  color: #44394a;
}

.ticket-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(290px, 0.75fr);
  gap: 22px;
  padding-bottom: 92px;
}

.community-card,
.wallet-card {
  border: var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow-small);
}

.community-card {
  padding: 30px;
  background: var(--white);
}

.wallet-card {
  padding: 30px;
  background: var(--pink-light);
}

.dashboard-heading,
.wallet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.community-card h2,
.wallet-card h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.big-total {
  margin: 12px 0 0;
  line-height: 1;
}

.big-total strong {
  font-size: clamp(2.9rem, 6vw, 5.25rem);
  letter-spacing: -0.055em;
}

.big-total span {
  color: var(--muted);
  font-weight: 850;
}

.ticket-stack,
.wallet-icon {
  font-size: 4rem;
  filter: drop-shadow(4px 4px 0 rgba(38, 25, 44, 0.14));
}

.big-progress {
  width: 100%;
  height: 28px;
  margin-top: 26px;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #efe8f0;
  appearance: none;
}

.big-progress::-webkit-progress-bar {
  background: #efe8f0;
}

.big-progress::-webkit-progress-value {
  background: repeating-linear-gradient(135deg, var(--orange) 0 14px, #f7bd95 14px 28px);
}

.big-progress::-moz-progress-bar {
  background: repeating-linear-gradient(135deg, var(--orange) 0 14px, #f7bd95 14px 28px);
}

.progress-labels {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
}

.next-unlock {
  margin: 17px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--mint-light);
  font-weight: 900;
}

.wallet-card > p:not(.eyebrow):not(.big-total) {
  color: var(--muted);
}

.wallet-note {
  margin-top: 20px;
  padding: 13px 14px;
  border: 2px dashed var(--purple);
  border-radius: 12px;
  background: rgba(255,255,255,0.64);
  font-size: 0.88rem;
}

.boardwalk-section {
  position: relative;
  padding: 78px 0 104px;
}

.boardwalk-section::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0 calc(50% - 50vw);
  background: linear-gradient(180deg, #211638 0%, #34204d 48%, #2d5971 48%, #3882a0 61%, #b98b62 61%, #d7aa79 100%);
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 34px;
  margin-bottom: 34px;
}

.section-heading .eyebrow {
  color: #ffd391;
}

.section-heading h2 {
  color: var(--white);
  font-size: clamp(2.5rem, 5vw, 4.6rem);
}

.section-intro {
  max-width: 520px;
  margin: 0;
  color: #ece4f4;
}

.boardwalk-scene {
  position: absolute;
  z-index: -1;
  inset: 60px calc(50% - 50vw) 0;
  overflow: hidden;
  pointer-events: none;
}

.sky-star {
  position: absolute;
  top: 64px;
  left: 9%;
  color: #ffe6a2;
  font-size: 2rem;
  animation: twinkle 2.4s ease-in-out infinite;
}

.sky-star--two {
  top: 110px;
  left: auto;
  right: 20%;
  font-size: 1.2rem;
  animation-delay: 0.8s;
}

.moon {
  position: absolute;
  top: 34px;
  right: 7%;
  color: #fff5c5;
  font-size: 6rem;
  line-height: 1;
  filter: drop-shadow(0 0 20px rgba(255, 245, 197, 0.2));
}

.ocean-line {
  position: absolute;
  top: 45%;
  right: 0;
  left: 0;
  height: 12%;
  opacity: 0.28;
  background: repeating-linear-gradient(0deg, transparent 0 12px, rgba(255,255,255,0.45) 12px 15px);
}

.boardwalk-planks {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 39%;
  opacity: 0.18;
  background: repeating-linear-gradient(90deg, rgba(38,25,44,0.65) 0 3px, transparent 3px 56px);
}

.attractions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.attraction-card {
  min-width: 0;
}

.attraction-button {
  position: relative;
  width: 100%;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 18px 20px 20px;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 22px;
  box-shadow: 7px 7px 0 rgba(14, 13, 22, 0.85);
  background: rgba(255, 250, 244, 0.94);
  text-align: left;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.attraction-button:hover,
.attraction-button:focus-visible {
  transform: translateY(-4px);
  box-shadow: 9px 12px 0 rgba(14, 13, 22, 0.85);
}

.attraction-card--locked .attraction-button {
  background: rgba(30, 25, 44, 0.95);
  color: var(--white);
}

.attraction-number {
  position: absolute;
  top: 17px;
  right: 18px;
  z-index: 2;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 1000;
  letter-spacing: 0.14em;
}

.attraction-card--locked .attraction-number {
  color: #8c829d;
}

.art-frame {
  height: 225px;
  display: grid;
  place-items: center;
  margin: -2px -2px 18px;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 15px;
  background:
    radial-gradient(circle at 50% 100%, rgba(255,255,255,0.75), transparent 42%),
    linear-gradient(180deg, #ffe4b5, #f8b5cc 55%, #94dfcd 55%, #83cbb9 100%);
}

.attraction-card--locked .art-frame {
  border-color: #05050b;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,0.06), transparent 35%),
    linear-gradient(180deg, #251a3a, #161122 65%, #100d18 100%);
}

.attraction-art {
  width: min(95%, 310px);
  height: 205px;
  overflow: visible;
  transition: filter 400ms ease, opacity 400ms ease, transform 400ms ease;
}

.attraction-card--unlocked .attraction-art {
  animation: reveal-pop 550ms ease both;
}

.art-main { fill: #7cd2bc; }
.art-accent { fill: #f56fa4; }
.art-light { fill: #ffe36e; }
.art-dark { fill: #5c0865; }
.art-water { fill: #78cce7; }
.art-crystal { fill: #d9b5ff; }
.art-fire { fill: #f29b61; }
.art-log { stroke: #704531; stroke-width: 12; stroke-linecap: round; }
.art-food { fill: none; stroke: #5c0865; stroke-width: 5; stroke-linecap: round; }
.art-gift { fill: #efa06b; }
.art-shadow { fill: rgba(38,25,44,0.17); }
.art-bird { fill: none; stroke: #26192c; stroke-width: 4; stroke-linecap: round; }
.art-stroke { stroke: #26192c; stroke-width: 4; stroke-linejoin: round; }
.art-line { fill: none; stroke: #26192c; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.art-line-thick { fill: none; stroke: #26192c; stroke-width: 9; stroke-linecap: round; }

.attraction-card--locked .attraction-art * {
  fill: var(--blackout);
  stroke: var(--blackout);
}

.attraction-card--locked .attraction-art {
  filter: drop-shadow(0 16px 10px rgba(0,0,0,0.42));
  opacity: 0.98;
}

.attraction-status {
  align-self: flex-start;
  margin-bottom: 7px;
  padding: 5px 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--mint-light);
  font-size: 0.68rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
}

.attraction-card--locked .attraction-status {
  border-color: #5d526d;
  background: #292136;
  color: #d0c4db;
}

.attraction-button h3 {
  margin: 4px 0 0;
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.goal-text {
  margin: 8px 0 0;
  color: var(--purple);
  font-weight: 950;
}

.attraction-card--locked .goal-text {
  color: #f1c982;
}

.reveal-preview {
  margin: 11px 0 0;
  color: var(--muted);
}

.attraction-card--locked .reveal-preview {
  color: #b4a8c2;
}

.card-cta {
  margin-top: auto;
  padding-top: 17px;
  font-weight: 950;
}

.boardwalk-complete {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 18px 22px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: #fff7c8;
  box-shadow: var(--shadow-small);
  text-align: center;
}

.boardwalk-complete > span {
  font-size: 2rem;
}

.boardwalk-complete strong {
  display: block;
  font-size: 1.25rem;
}

.boardwalk-complete p {
  margin: 3px 0 0;
}

.how-section {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 58px;
  padding: 100px 0;
}

.how-copy h2 {
  font-size: clamp(2.6rem, 5vw, 4.7rem);
}

.how-copy > p:last-child {
  color: var(--muted);
  font-size: 1.04rem;
}

.ticket-rules {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.rule-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px;
  border: 2px solid var(--ink);
  border-radius: 13px;
  background: var(--white);
  box-shadow: 3px 3px 0 var(--ink);
}

.rule-card span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.rule-card strong {
  font-size: 1.12rem;
}

.steps {
  grid-column: 2;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.steps li {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  padding: 17px 0;
  border-bottom: 2px dashed #d7cfd9;
}

.step-number {
  color: var(--pink);
  font-size: 1.45rem;
  font-weight: 1000;
}

.steps strong,
.steps span:not(.step-number) {
  display: block;
}

.steps span:not(.step-number) {
  color: var(--muted);
}

.attraction-dialog {
  width: min(720px, calc(100% - 30px));
  max-height: min(88vh, 900px);
  padding: 0;
  overflow: auto;
  border: 4px solid var(--ink);
  border-radius: 24px;
  box-shadow: 12px 12px 0 rgba(14, 13, 22, 0.55);
  background: var(--paper);
}

.attraction-dialog::backdrop {
  background: rgba(20, 14, 29, 0.75);
  backdrop-filter: blur(4px);
}

.dialog-close {
  position: sticky;
  z-index: 5;
  top: 14px;
  float: right;
  width: 42px;
  height: 42px;
  margin: 14px 14px 0 0;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--white);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 1.5rem;
  font-weight: 1000;
  cursor: pointer;
}

#dialog-content {
  padding: 26px 30px 32px;
}

.dialog-art {
  height: 230px;
  display: grid;
  place-items: center;
  margin: 0 38px 25px 0;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffe4b5, #f8b5cc 55%, #94dfcd 55%, #83cbb9 100%);
}

.dialog-art.attraction-card--locked {
  background: linear-gradient(180deg, #251a3a, #161122 65%, #100d18 100%);
}

.attraction-dialog h2 {
  font-size: clamp(2.4rem, 7vw, 4.4rem);
}

.unlock-title {
  margin: 20px 0 0;
  color: var(--purple);
  font-size: 1.3rem;
}

.dialog-lead {
  color: var(--muted);
  font-size: 1.02rem;
}

.redemption-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin: 26px 0 12px;
  padding-top: 22px;
  border-top: 3px dashed #d7c8d9;
}

.redemption-heading h3 {
  margin: 0;
}

.redemption-heading span {
  color: var(--purple);
  font-size: 0.82rem;
  font-weight: 900;
}

.redemption-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.redemption-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #ded4e0;
}

.redemption-item strong,
.redemption-item span,
.redemption-item small {
  display: block;
}

.redemption-item span,
.redemption-item small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
}

.redeem-button {
  min-width: 112px;
  padding: 9px 11px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--mint);
  box-shadow: 3px 3px 0 var(--ink);
  font-weight: 950;
  cursor: pointer;
}

.redeem-button:disabled {
  opacity: 0.46;
  cursor: not-allowed;
  box-shadow: none;
}

.demo-notice,
.pending-redemptions {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--orange-light);
  color: #5b4651;
  font-size: 0.87rem;
}

.fireworks-dialog {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: radial-gradient(circle at 50% 70%, #52245c, #1b142d 62%, #0c0a18 100%);
  box-shadow: 0 0 60px rgba(255, 226, 120, 0.24);
  color: var(--white);
  text-align: center;
}

.fireworks-dialog::backdrop {
  background: rgba(4, 3, 10, 0.9);
}

.fireworks-copy {
  position: relative;
  z-index: 3;
  max-width: 580px;
  margin: 0 auto;
  padding: clamp(96px, 16vh, 170px) 24px 60px;
}

.fireworks-dialog .eyebrow {
  color: #ffd77a;
}

.fireworks-dialog h2 {
  font-size: clamp(2.6rem, 7vw, 5rem);
}

.fireworks-dialog p {
  color: #eee8f6;
}

.secret-reward {
  margin: 25px auto;
  padding: 12px;
  border: 2px dashed #ffd77a;
  border-radius: 12px;
}

.button-reset {
  margin-top: 8px;
}

.firework {
  position: absolute;
  z-index: 1;
  color: #ffe36e;
  font-size: 7rem;
  line-height: 1;
  text-shadow: 0 0 25px currentColor;
  animation: firework-burst 1.5s ease-in-out infinite;
}

.firework--one { top: 42px; left: 8%; }
.firework--two { top: 35px; right: 9%; color: #ff79bd; animation-delay: 0.4s; }
.firework--three { bottom: 35px; left: 14%; color: #83edd0; animation-delay: 0.8s; }
.firework--four { right: 13%; bottom: 25px; color: #f5a56f; animation-delay: 1.1s; }

.test-panel {
  position: fixed;
  z-index: 100;
  right: 18px;
  bottom: 18px;
  width: min(360px, calc(100% - 36px));
  padding: 20px;
  border: 3px solid var(--ink);
  border-radius: 18px;
  background: #fff9ce;
  box-shadow: 8px 8px 0 var(--ink);
}

.test-panel-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.test-panel h2 {
  font-size: 1.7rem;
}

.test-panel label {
  display: block;
  margin-top: 14px;
  font-weight: 900;
}

.test-panel input {
  width: 100%;
  margin-top: 5px;
  padding: 9px 10px;
  border: 2px solid var(--ink);
  border-radius: 9px;
  background: var(--white);
}

.test-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.test-actions button,
.test-close {
  border: 2px solid var(--ink);
  border-radius: 9px;
  background: var(--white);
  font-weight: 900;
  cursor: pointer;
}

.test-actions button {
  padding: 9px;
}

.test-close {
  width: 34px;
  height: 34px;
}

.test-panel > p:last-child {
  margin-bottom: 0;
  color: #665d49;
  font-size: 0.75rem;
}

.data-message {
  grid-column: 1 / -1;
  padding: 20px;
  border: var(--border);
  border-radius: 15px;
  background: var(--white);
}

footer {
  padding: 34px 20px 46px;
  border-top: 3px solid var(--ink);
  background: var(--purple-deep);
  color: var(--white);
  text-align: center;
}

footer p {
  margin: 4px 0;
}

.footer-lights {
  color: #ffe16c;
  letter-spacing: 0.45em;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.45; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.18); }
}

@keyframes reveal-pop {
  0% { transform: scale(0.93); filter: brightness(1.7); }
  70% { transform: scale(1.04); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes firework-burst {
  0%, 100% { opacity: 0.15; transform: scale(0.35) rotate(0deg); }
  45% { opacity: 1; transform: scale(1.18) rotate(25deg); }
  72% { opacity: 0.65; transform: scale(0.8) rotate(45deg); }
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 45px;
    padding-top: 62px;
  }

  .entrance-ticket {
    width: min(520px, 94%);
    min-height: 410px;
    margin: 0 auto;
  }

  .ticket-dashboard,
  .how-section {
    grid-template-columns: 1fr;
  }

  .ticket-rules,
  .steps {
    grid-column: 1;
  }

  .how-section {
    gap: 30px;
  }
}

@media (max-width: 720px) {
  .site-header {
    align-items: flex-start;
  }

  .site-header nav {
    display: none;
  }

  .hero,
  .ticket-dashboard,
  .boardwalk-section,
  .how-section {
    width: min(100% - 22px, 1180px);
  }

  .hero {
    min-height: 0;
    padding: 56px 0 68px;
  }

  .hero h1 {
    font-size: clamp(3.1rem, 15vw, 5rem);
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .entrance-ticket {
    width: calc(100% - 20px);
    padding-inline: 27px;
    transform: none;
  }

  .ticket-dashboard {
    padding-bottom: 72px;
  }

  .community-card,
  .wallet-card {
    padding: 22px;
  }

  .dashboard-heading,
  .wallet-row,
  .section-heading,
  .redemption-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .big-total strong {
    font-size: 3.5rem;
  }

  .section-heading {
    margin-bottom: 28px;
  }

  .attractions-grid {
    grid-template-columns: 1fr;
  }

  .attraction-button {
    min-height: 420px;
  }

  .art-frame {
    height: 205px;
  }

  .ticket-rules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #dialog-content {
    padding: 20px 19px 26px;
  }

  .dialog-art {
    margin-right: 42px;
  }

  .redemption-item {
    grid-template-columns: 1fr;
  }

  .redeem-button {
    width: 100%;
  }
}

@media (max-width: 430px) {
  .ticket-rules {
    grid-template-columns: 1fr;
  }

  .steps li {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .progress-labels {
    font-size: 0.68rem;
  }

  .moon {
    font-size: 4.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Event engine additions */
.nav-account {
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.08);
  color: inherit;
  border-radius: 999px;
  padding: .55rem .9rem;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.nav-account:hover,
.nav-account:focus-visible { background: rgba(255,255,255,.16); }

.wallet-actions { margin: 1rem 0; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.signed-in-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: .65rem .9rem; background: rgba(255,255,255,.12); font-weight: 900; }

.account-section { padding: clamp(2rem, 5vw, 5rem); max-width: 1280px; margin: 0 auto; }
.compact-heading { align-items: center; }
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.activity-card { background: rgba(255,255,255,.96); color: #26132c; border-radius: 22px; padding: 1.25rem; box-shadow: 0 18px 50px rgba(25,5,34,.18); }
.activity-card h3 { margin-top: 0; }
.activity-list { display: grid; gap: .7rem; }
.activity-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-top: 1px solid rgba(70,31,76,.12); }
.activity-row:first-child { border-top: 0; }
.activity-row > div { display: grid; gap: .2rem; }
.activity-row span { font-size: .84rem; opacity: .72; }
.activity-row--stacked { display: grid; justify-content: stretch; gap: .3rem; }
.activity-row--stacked em { font-style: normal; background: #f7eefd; border-radius: 10px; padding: .65rem; margin-top: .25rem; }
.positive-ticket { color: #126b43; }
.negative-ticket { color: #8c2d39; }

.pass-dialog,
.redemption-dialog {
  width: min(620px, calc(100vw - 2rem));
  border: 0;
  border-radius: 24px;
  padding: clamp(1.4rem, 4vw, 2.3rem);
  color: #27132c;
  box-shadow: 0 30px 100px rgba(15, 2, 24, .55);
}
.pass-dialog::backdrop,
.redemption-dialog::backdrop { background: rgba(18, 3, 25, .76); backdrop-filter: blur(5px); }
.dialog-form { display: grid; gap: 1rem; margin-top: 1.2rem; }
.dialog-form label { display: grid; gap: .4rem; font-weight: 850; }
.dialog-form input,
.dialog-form textarea,
.dialog-form select {
  width: 100%; box-sizing: border-box; border: 1px solid #cdbbd3; border-radius: 12px;
  padding: .8rem .9rem; font: inherit; background: #fff; color: #27132c;
}
.dialog-form textarea { resize: vertical; min-height: 100px; }
.dialog-form input:focus,
.dialog-form textarea:focus,
.dialog-form select:focus { outline: 3px solid rgba(221, 98, 255, .24); border-color: #7e298d; }
.form-message { min-height: 1.4em; margin: 0; font-weight: 800; }

@media (max-width: 760px) {
  .account-grid { grid-template-columns: 1fr; }
  .site-header nav { gap: .45rem; }
  .site-header nav > a { display: none; }
}

/* Fortune Teller attraction */
.fortune-intro {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin: 20px 0 4px;
  padding: 16px;
  border: 2px solid #5a2a69;
  border-radius: 16px;
  background: linear-gradient(135deg, #2b173b, #4d245d);
  color: #fff7ff;
  box-shadow: 4px 4px 0 #27132c;
}
.fortune-intro strong { display: block; font-size: 1.05rem; }
.fortune-intro p { margin: .25rem 0 0; color: #ead8ef; font-size: .9rem; }
.fortune-orb {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 2px solid #f7d1ff;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff6ff, #d879e6 32%, #682e85 70%);
  box-shadow: 0 0 22px rgba(222, 121, 239, .55);
  font-size: 1.6rem;
}
.fortune-history { margin-top: 28px; padding-top: 22px; border-top: 3px dashed #d7c8d9; }
.fortune-history-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.fortune-history-heading h3 { margin: 0; }
.fortune-history-heading span { color: var(--muted); font-size: .78rem; font-weight: 800; }
.mini-fortune-card {
  margin-top: 10px;
  padding: 14px 16px;
  border: 1px solid #d8c4df;
  border-radius: 14px;
  background: linear-gradient(135deg, #fffafd, #f7eefd);
}
.mini-fortune-card strong, .mini-fortune-card small { display: block; }
.mini-fortune-card p { margin: .45rem 0; line-height: 1.55; }
.mini-fortune-card small { color: var(--muted); }
.redemption-dialog--fortune {
  overflow: hidden;
  border: 3px solid #7e298d;
  background: linear-gradient(180deg, #fffafd, #f8eefc);
}
.redemption-dialog--fortune::before {
  content: '✦ ✧ ✦ ✧ ✦';
  display: block;
  margin: -2.3rem -2.3rem 1.5rem;
  padding: .75rem 2rem;
  background: linear-gradient(90deg, #2b173b, #642979, #2b173b);
  color: #ffe6a6;
  text-align: center;
  letter-spacing: .55em;
}
.fortune-form-prompt {
  margin: .9rem 0 0;
  padding: .75rem .9rem;
  border-radius: 12px;
  background: #f1e0f7;
  color: #5d3465;
  font-weight: 750;
}
.fortune-result-card {
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
  padding: clamp(1.5rem, 5vw, 2.4rem);
  border: 2px solid #70307f;
  border-radius: 22px;
  background: radial-gradient(circle at top, #69327c, #321b44 58%, #21142f);
  box-shadow: 7px 7px 0 #d6b2df;
  color: #fff9ff;
  text-align: center;
}
.fortune-result-card::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 229, 166, .35);
  border-radius: 16px;
  pointer-events: none;
}
.fortune-result-stars { color: #ffe6a6; font-size: 1.2rem; letter-spacing: .25em; }
.fortune-kicker { margin: .7rem 0 .4rem; color: #f0bdf6; font-size: .78rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.fortune-result-card blockquote { margin: 0; font-size: clamp(1.05rem, 3vw, 1.35rem); font-weight: 760; line-height: 1.6; }
.fortune-saved { margin: 1rem 0 0; color: #e7c9ed; font-size: .78rem; }

@media (max-width: 560px) {
  .fortune-intro { grid-template-columns: 1fr; text-align: center; }
  .fortune-orb { margin-inline: auto; }
  .fortune-history-heading { display: block; }
  .fortune-history-heading span { display: block; margin-top: .2rem; }
}

/* Beach Bonfire attraction */
.bonfire-intro {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin: 20px 0 10px;
  padding: 16px;
  border: 2px solid #6e351f;
  border-radius: 16px;
  background: linear-gradient(135deg, #3a221f, #6a3624 58%, #2f1d21);
  color: #fff8ea;
  box-shadow: 4px 4px 0 #2d1c1a;
}
.bonfire-intro strong { display: block; font-size: 1.05rem; }
.bonfire-intro p { margin: .25rem 0 0; color: #f2d7bc; font-size: .9rem; }
.bonfire-flame { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 50%; background: #24151a; font-size: 2rem; box-shadow: inset 0 0 0 2px #c96f3e, 0 0 22px rgba(234, 117, 52, .35); }
.bonfire-shelf { margin: 10px 0 20px; padding: 14px 16px; border: 1px solid #d9b99d; border-radius: 14px; background: #fff7ed; }
.bonfire-shelf ul { columns: 2; margin: .6rem 0 0; padding-left: 1.2rem; }
.bonfire-shelf li { margin-bottom: .35rem; break-inside: avoid; }
.redemption-unavailable { color: #91442f !important; font-weight: 850; }
.redemption-dialog--bonfire { border: 3px solid #8e4c2c; background: linear-gradient(180deg, #fffaf3, #fff0df); }
.bonfire-form-prompt { margin: .9rem 0 0; padding: .75rem .9rem; border-radius: 12px; background: #f8dfc7; color: #6c3522; font-weight: 750; }
@media (max-width: 560px) {
  .bonfire-intro { grid-template-columns: 1fr; text-align: center; }
  .bonfire-flame { margin-inline: auto; }
  .bonfire-shelf ul { columns: 1; }
}


/* Street Performer */
.street-performer-intro {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  margin: 12px 0 20px;
  padding: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #271236, #5b1d58);
  color: #fff7dc;
  border: 2px solid #d5a759;
  box-shadow: 0 12px 28px rgba(50, 12, 61, .18);
}
.street-performer-intro strong { display: block; font-size: 1.05rem; }
.street-performer-intro p { margin: .25rem 0 0; color: #f0dcec; font-size: .9rem; }
.street-performer-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 50%;
  background: #160b20;
  font-size: 1.9rem;
  box-shadow: inset 0 0 0 2px #d5a759, 0 0 22px rgba(213,167,89,.25);
}
.redemption-dialog--performer { border: 3px solid #6b2b70; background: linear-gradient(180deg, #fffafd, #f6eaf8); }
.performer-form-prompt { margin: .9rem 0 0; padding: .75rem .9rem; border-radius: 12px; background: #ead8ef; color: #54235a; font-weight: 750; }
@media (max-width: 560px) {
  .street-performer-intro { grid-template-columns: 1fr; text-align: center; }
  .street-performer-icon { margin-inline: auto; }
}

/* Final attraction feature panels */
.feature-panel {
  margin: 1rem 0 1.25rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: rgba(255,255,255,.055);
}
.feature-panel > strong { display:block; font-size:1.05rem; margin-bottom:.35rem; }
.feature-panel p { margin:.25rem 0 .65rem; }
.chip-list { display:flex; flex-wrap:wrap; gap:.45rem; }
.chip-list span { display:inline-flex; padding:.35rem .65rem; border-radius:999px; background:rgba(255,255,255,.09); font-size:.88rem; }
.score-row { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:.7rem; }
.score-row > div { text-align:center; padding:.75rem; border-radius:14px; background:rgba(0,0,0,.2); }
.score-row span { display:block; font-size:.75rem; letter-spacing:.12em; opacity:.75; }
.score-row b { display:block; font-size:2rem; line-height:1.1; }
.group-photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(82px,1fr)); gap:.6rem; margin-top:.75rem; }
.group-photo-person { min-width:0; text-align:center; padding:.5rem; border-radius:14px; background:rgba(0,0,0,.18); }
.group-photo-person img { width:58px; height:58px; border-radius:50%; object-fit:cover; display:block; margin:0 auto .35rem; background:rgba(255,255,255,.08); }
.group-photo-person span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.78rem; }
.clip-list { display:grid; gap:.45rem; margin-top:.7rem; }
.clip-list a { display:block; padding:.55rem .7rem; border-radius:12px; background:rgba(255,255,255,.07); color:inherit; text-decoration:none; }
.clip-list a:hover { background:rgba(255,255,255,.12); }
.download-result-card { display:grid; gap:.8rem; text-align:center; padding:1.2rem; border-radius:18px; background:rgba(255,255,255,.07); }
.download-result-icon { font-size:2.3rem; }
.download-result-card .primary-button { display:inline-flex; justify-self:center; text-decoration:none; }

/* =========================================================
   FINAL EVENT THEME — CAMPY RETRO NEON BIRTHDAY BOARDWALK
   ========================================================= */
:root {
  --night: #080b25;
  --night-2: #11143d;
  --night-3: #19184a;
  --mint: #72e0c5;
  --orange: #ff9a59;
  --blue: #58baf4;
  --pink: #ff70b8;
  --yellow: #ffe477;
  --ink: #f9f5ff;
  --muted: #beb8d8;
  --paper: #141638;
  --white: #fffdf8;
  --blackout: #02030b;
  --border: 2px solid rgba(114,224,197,.65);
  --shadow-small: 0 0 0 2px rgba(255,154,89,.15), 0 0 24px rgba(114,224,197,.18);
  --shadow-large: 0 0 0 3px rgba(255,154,89,.15), 0 0 42px rgba(88,186,244,.22);
  --park-light-level: .12;
}

html { background: var(--night); }
body {
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 5%, rgba(255,112,184,calc(.06 + var(--park-light-level) * .14)), transparent 28rem),
    radial-gradient(circle at 88% 8%, rgba(88,186,244,calc(.08 + var(--park-light-level) * .16)), transparent 31rem),
    radial-gradient(circle at 50% 58%, rgba(114,224,197,calc(.04 + var(--park-light-level) * .11)), transparent 34rem),
    linear-gradient(180deg,#05071d 0%,#0d1030 40%,#11123a 70%,#06091f 100%);
  min-height:100vh;
}
body::before {
  opacity: calc(.12 + var(--park-light-level) * .25);
  background-image:
    radial-gradient(circle, rgba(255,228,119,.9) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(88,186,244,.65) 1px, transparent 1.5px);
  background-size: 46px 46px, 73px 73px;
  background-position: 0 0, 17px 25px;
  mask-image: linear-gradient(to bottom,black 0%,black 55%,transparent 95%);
}
body::after {
  content:""; position:fixed; inset:auto 0 0; height:18vh; z-index:-1; pointer-events:none;
  background: linear-gradient(180deg,transparent,rgba(0,0,0,.3)), repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 2px,transparent 2px 54px);
}

.test-mode-banner {
  position:sticky; top:0; z-index:999; text-align:center; padding:.6rem 1rem;
  background:repeating-linear-gradient(135deg,#ffe477 0 16px,#11143d 16px 32px);
  color:#11143d; font-weight:1000; letter-spacing:.05em; text-shadow:0 1px #fff;
  border-bottom:3px solid #fff;
}
body.test-mode .site-header { top:46px; }

.site-header {
  position:sticky; top:10px; border:1px solid rgba(114,224,197,.52);
  background:rgba(7,9,31,.9); box-shadow:0 0 25px rgba(114,224,197,.12),0 8px 30px rgba(0,0,0,.38);
}
.brand-mark { background:linear-gradient(135deg,var(--orange),var(--pink)); color:#080b25; border-color:#fff; box-shadow:0 0 16px rgba(255,112,184,.5); }
.site-header nav a { color:#e9e5fa; }
.nav-account { background:transparent; border:1px solid var(--orange); color:var(--orange); }

.hero { min-height:720px; position:relative; }
.hero::before {
  content:""; position:absolute; inset:6% 45% auto -15%; height:360px; z-index:-1;
  background:radial-gradient(circle,rgba(88,186,244,.17),transparent 67%); filter:blur(20px);
}
.eyebrow { color:var(--mint); text-shadow:0 0 10px rgba(114,224,197,.4); }
.hero h1 { text-transform:uppercase; font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif; letter-spacing:.005em; font-weight:900; text-shadow:0 4px 0 #02030b; }
.hero h1 span { color:var(--orange); text-shadow:0 0 10px rgba(255,154,89,.7),0 0 28px rgba(255,112,184,.4),4px 5px 0 #02030b; }
.hero-description { color:#cec8e4; }
.primary-button { background:linear-gradient(135deg,var(--orange),#ff7468); color:#10122d; border-color:#fff; box-shadow:0 0 16px rgba(255,154,89,.35); }
.secondary-button { background:#11143d; color:var(--mint); border-color:var(--mint); }

.entrance-ticket,.community-card,.wallet-card,.activity-card,.how-section,.giveaway-section {
  background:linear-gradient(160deg,rgba(24,25,69,.95),rgba(8,11,37,.97));
  color:var(--ink); border:1px solid rgba(114,224,197,.44); box-shadow:var(--shadow-large);
}
.entrance-ticket { position:relative; overflow:visible; }
.entrance-ticket::after { content:""; position:absolute; inset:-8px; z-index:-1; border:2px dashed rgba(255,228,119,.42); border-radius:24px; }
.entrance-gate { background:#06081d; border-color:var(--orange); box-shadow:inset 0 0 22px rgba(255,154,89,.16); }
.gate-light { color:var(--yellow); filter:drop-shadow(0 0 7px var(--yellow)); }

.chad-marquee {
  position:absolute; right:-20px; top:-54px; transform:rotate(4deg); z-index:3;
  width:210px; padding:.6rem .9rem .72rem; text-align:center; border:3px solid #fff; border-radius:15px;
  background:linear-gradient(145deg,#ff9a59,#ff70b8); color:#07091f;
  box-shadow:0 0 0 5px #11143d,0 0 28px rgba(255,112,184,.55);
}
.chad-marquee strong { display:block; font-family:Impact,"Arial Black",sans-serif; font-size:1.75rem; letter-spacing:.12em; }
.chad-marquee small { display:block; font-size:.62rem; font-weight:900; text-transform:uppercase; }
.chad-bulbs { display:block; color:#fffbd1; font-size:.5rem; letter-spacing:.22rem; text-shadow:0 0 7px #fff; }

.event-ribbon {
  width:min(1180px,calc(100% - 32px)); margin:-20px auto 22px; display:flex; justify-content:center; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.7rem 1.2rem; color:#090b25; background:var(--yellow); border:3px solid #090b25; outline:2px solid var(--orange);
  border-radius:12px; font-size:.85rem; font-weight:1000; letter-spacing:.08em; text-transform:uppercase; transform:rotate(-.35deg);
}
.event-ribbon strong { font-size:1rem; color:#6b164b; }
.live-status-bar {
  width:min(1180px,calc(100% - 32px)); margin:0 auto 18px; min-height:0; display:flex; gap:.7rem; align-items:center; flex-wrap:wrap;
}
.live-status-bar:empty { display:none; }
.live-status-bar > * { background:#10143a; border:1px solid rgba(88,186,244,.45); border-radius:999px; padding:.45rem .8rem; }

.ticket-dashboard { gap:22px; }
.community-card,.wallet-card { border-radius:22px; }
.big-total strong { color:var(--yellow); text-shadow:0 0 14px rgba(255,228,119,.35); }
.big-progress { accent-color:var(--mint); }
progress::-webkit-progress-bar { background:#04061a; border:1px solid rgba(255,255,255,.14); border-radius:999px; }
progress::-webkit-progress-value { background:linear-gradient(90deg,var(--mint),var(--blue),var(--pink),var(--orange)); border-radius:999px; box-shadow:0 0 calc(10px + var(--park-light-level) * 20px) var(--mint); }
.wallet-note { background:rgba(255,154,89,.08); border-color:rgba(255,154,89,.35); }

.boardwalk-section { position:relative; padding-top:60px; }
.boardwalk-section::before { content:""; position:absolute; inset:120px -30vw 0; z-index:-1; background:linear-gradient(180deg,transparent 0%,rgba(7,32,68,.14) 25%,rgba(7,30,62,.38) 60%,rgba(2,5,18,.7) 100%); }
.section-heading h2,.how-copy h2,.giveaway-section h2 { font-family:Impact,"Arial Black",sans-serif; text-transform:uppercase; letter-spacing:.02em; }
.section-intro,.progress-labels,.next-unlock,#wallet-status,.account-section,.how-section p { color:#c4bed9; }
.boardwalk-scene { opacity:calc(.48 + var(--park-light-level) * .42); }
.moon { color:#fff0a0; filter:drop-shadow(0 0 18px rgba(255,240,160,.65)); }
.ocean-line { border-color:rgba(88,186,244,.55); box-shadow:0 0 17px rgba(88,186,244,.3); }
.boardwalk-planks { filter:brightness(.55) saturate(.8); }

.attractions-grid { gap:24px; }
.attraction-card {
  background:linear-gradient(160deg,#151840,#0a0c27); color:#f8f5ff; border:1px solid rgba(255,255,255,.15);
  box-shadow:0 14px 30px rgba(0,0,0,.42); transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.attraction-card:hover { transform:translateY(-5px) rotate(-.25deg); }
.attraction-card--unlocked {
  border-color:rgba(114,224,197,.72);
  box-shadow:0 0 calc(12px + var(--park-light-level) * 36px) rgba(114,224,197,calc(.10 + var(--park-light-level)*.26)),0 18px 36px rgba(0,0,0,.48);
}
.attraction-card--unlocked:nth-child(3n+2) { border-color:rgba(255,154,89,.7); box-shadow:0 0 28px rgba(255,154,89,.14),0 18px 36px rgba(0,0,0,.48); }
.attraction-card--unlocked:nth-child(3n+3) { border-color:rgba(88,186,244,.72); box-shadow:0 0 28px rgba(88,186,244,.14),0 18px 36px rgba(0,0,0,.48); }
.attraction-card--locked { background:linear-gradient(165deg,#090a18,#03040c); border-color:#22233b; color:#8c89a0; }
.attraction-card--locked.is-next,.secret-hint-card { border-color:rgba(255,228,119,.56); box-shadow:0 0 26px rgba(255,228,119,.10); }
.art-frame { background:radial-gradient(circle at 50% 52%,rgba(68,73,135,.22),rgba(3,4,12,.95) 68%); border-color:rgba(255,255,255,.1); }
.attraction-card--locked .art-frame { background:radial-gradient(circle at 50% 55%,rgba(17,18,32,.85),#010208 73%); }
.attraction-card--locked .attraction-art * { fill:#000 !important; stroke:#000 !important; }
.attraction-card--locked .attraction-art { filter:drop-shadow(0 0 2px rgba(100,110,150,.16)); opacity:1; }
.attraction-card--unlocked .art-frame { box-shadow:inset 0 0 30px rgba(114,224,197,.12),0 0 14px rgba(114,224,197,calc(.05 + var(--park-light-level)*.18)); }
.attraction-card h3 { color:#fff; }
.attraction-card--locked h3 { color:#beb9cb; }
.attraction-card .unlock-goal { color:var(--yellow); }
.attraction-card--unlocked .art-light { filter:drop-shadow(0 0 8px currentColor); }

/* New unlock takeover */
.unlock-celebration {
  position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:24px;
  background:radial-gradient(circle,rgba(29,25,86,.72),rgba(2,3,13,.94)); animation:unlockFade 3.2s ease both;
}
.unlock-celebration::before,.unlock-celebration::after { content:"✦ ✦ ✦ ✦ ✦"; position:absolute; color:var(--yellow); font-size:clamp(1.4rem,4vw,3rem); letter-spacing:4vw; filter:drop-shadow(0 0 12px var(--yellow)); animation:marqueePulse .6s alternate infinite; }
.unlock-celebration::before { top:8%; }.unlock-celebration::after{ bottom:9%; }
.unlock-celebration-art { width:min(360px,82vw); filter:drop-shadow(0 0 35px rgba(114,224,197,.55)); }
.unlock-celebration-copy { max-width:720px; text-align:center; }
.unlock-celebration h2 { font-family:Impact,"Arial Black",sans-serif; font-size:clamp(2.3rem,8vw,6rem); margin:.5rem 0; text-transform:uppercase; color:#fff; text-shadow:0 0 14px var(--pink),5px 5px 0 #050617; }
.unlock-celebration p { font-weight:900; color:var(--yellow); }
@keyframes unlockFade { 0%{opacity:0} 8%,82%{opacity:1} 100%{opacity:0;visibility:hidden} }
@keyframes marqueePulse { to{opacity:.45;transform:scale(1.03)} }

.secret-hint-card { background:repeating-linear-gradient(135deg,#090b22,#090b22 18px,#101333 18px,#101333 36px); }
.secret-hint-card h3 { font-family:Impact,"Arial Black",sans-serif; font-size:2rem; letter-spacing:.08em; }

/* Pier group photo */
.pier-group-photo {
  min-height:360px; position:relative; overflow:hidden; padding:120px 26px 34px; border:2px solid rgba(88,186,244,.45); border-radius:22px;
  background:
    radial-gradient(circle at 78% 17%,#fff3a8 0 22px,rgba(255,243,168,.18) 23px 53px,transparent 54px),
    linear-gradient(180deg,#0b153c 0 45%,#12385f 46% 58%,#49352c 59% 100%);
}
.pier-group-photo::before { content:"AMB FAM PIER"; position:absolute; top:28px; left:50%; transform:translateX(-50%) rotate(-1deg); padding:.6rem 1rem; border:3px solid #fff; background:#ff9a59; color:#090b22; font-family:Impact,"Arial Black",sans-serif; font-size:1.35rem; letter-spacing:.08em; box-shadow:0 0 18px rgba(255,154,89,.4); }
.pier-group-photo::after { content:""; position:absolute; left:0; right:0; top:58%; height:6px; background:#84614c; box-shadow:0 30px 0 #74513f,0 60px 0 #694834,0 90px 0 #5d3f30; opacity:.7; }
.pier-crowd { position:relative; z-index:2; display:grid; grid-template-columns:repeat(auto-fit,minmax(72px,1fr)); gap:18px 12px; align-items:end; }
.pier-person { min-width:0; text-align:center; }
.pier-person img,.pier-avatar-fallback { width:66px;height:66px;border-radius:50%;object-fit:cover;border:3px solid #fff;background:#252955;box-shadow:0 5px 0 rgba(0,0,0,.3),0 0 13px rgba(88,186,244,.35); }
.pier-person span { display:block;margin-top:.3rem;padding:.15rem .3rem;border-radius:7px;background:rgba(3,4,15,.78);font-size:.7rem;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

/* Food tournament bracket */
.snack-bracket { overflow-x:auto; display:grid; grid-template-columns:repeat(5,minmax(175px,1fr)); gap:18px; padding:10px 4px 18px; }
.bracket-round { display:grid; align-content:center; gap:12px; min-width:175px; }
.bracket-round h4 { margin:0;color:var(--orange);text-align:center;text-transform:uppercase;letter-spacing:.07em;font-size:.75rem; }
.bracket-match { min-height:76px; display:grid; align-content:center; gap:4px; padding:.55rem; border:1px solid rgba(114,224,197,.32); border-radius:10px; background:#090c28; }
.bracket-match span { display:block;padding:.28rem .4rem;border-radius:6px;background:#151842;font-size:.78rem; }
.bracket-match .winner { color:#080b25;background:var(--yellow);font-weight:950; }
.tournament-champion { text-align:center;padding:1rem;border:2px solid var(--yellow);border-radius:14px;background:rgba(255,228,119,.09);color:var(--yellow);font-weight:950;font-size:1.1rem; }
.question-bank { display:flex;flex-wrap:wrap;gap:.5rem;margin:.8rem 0 1rem; }
.question-bank button { border:1px solid rgba(114,224,197,.42);border-radius:999px;background:#10143a;color:#dffaf3;padding:.5rem .7rem;cursor:pointer; }

/* Shareable fortunes */
.fortune-card,.fortune-result { background:linear-gradient(145deg,#11143d,#080a22);border:1px solid rgba(255,228,119,.45);box-shadow:0 0 18px rgba(255,228,119,.08); }

/* Giveaway */
.giveaway-section {
  width:min(1180px,calc(100% - 32px)); margin:70px auto; padding:clamp(1.4rem,4vw,3rem); display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.4rem,4vw,3.5rem); position:relative; overflow:hidden;
  border-color:rgba(255,228,119,.75); box-shadow:0 0 45px rgba(255,112,184,.2),0 0 90px rgba(88,186,244,.12);
}
.giveaway-section::before { content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 4% 8%,rgba(255,228,119,.16),transparent 26%),radial-gradient(circle at 95% 82%,rgba(255,112,184,.17),transparent 28%); }
.giveaway-section h2 { font-size:clamp(2.4rem,6vw,5.2rem);line-height:.95;color:var(--yellow);text-shadow:0 0 18px rgba(255,228,119,.35); }
.giveaway-form { align-self:center; padding:1.1rem;border-radius:16px;background:rgba(3,5,20,.7);border:1px solid rgba(88,186,244,.38); }
.giveaway-form label { display:grid;gap:.3rem;font-weight:900; }
.giveaway-form input { width:100%;padding:.75rem;border:1px solid #474b80;border-radius:9px;background:#070921;color:white; }
.giveaway-count { color:var(--mint);font-weight:950; }.giveaway-winner{padding:.8rem;border-radius:10px;background:var(--yellow);color:#090b22;font-weight:1000;}
.giveaway-burst { position:absolute;right:2%;top:3%;font-size:7rem;color:var(--pink);opacity:.18;filter:drop-shadow(0 0 20px var(--pink)); }

/* Fireworks finale continues in the page background after reveal */
body.fireworks-background::before { animation:skySparkle 1.7s linear infinite; opacity:.75; }
body.fireworks-background::after { height:100vh; background:
  radial-gradient(circle at 17% 18%,transparent 0 35px,rgba(255,228,119,.16) 36px 38px,transparent 39px),
  radial-gradient(circle at 78% 26%,transparent 0 50px,rgba(255,112,184,.13) 51px 53px,transparent 54px),
  radial-gradient(circle at 50% 8%,transparent 0 42px,rgba(88,186,244,.15) 43px 45px,transparent 46px); animation:backgroundFireworks 3.4s ease-in-out infinite alternate; }
.fireworks-dialog { background:radial-gradient(circle at 50% 45%,#23215c,#060716 65%); border:2px solid var(--yellow);box-shadow:0 0 80px rgba(255,228,119,.25); }
.fireworks-dialog::backdrop { background:rgba(1,2,10,.94); }
.fireworks-dialog h2 { color:var(--yellow);text-shadow:0 0 22px rgba(255,228,119,.45); }
@keyframes skySparkle { 50%{filter:hue-rotate(32deg);transform:translateY(2px)} }
@keyframes backgroundFireworks { to{opacity:.35;transform:scale(1.025)} }

.attraction-dialog,.redemption-dialog,.pass-dialog { background:#0d1030;color:#f7f4ff;border:2px solid rgba(114,224,197,.55);box-shadow:0 0 44px rgba(114,224,197,.18); }
.dialog-close { color:white; }
.dialog-form input,.dialog-form select,.redemption-form input,.redemption-form select,.redemption-form textarea { background:#070922;color:white;border-color:#3a3e70; }

.how-section { border-radius:22px; }
.ticket-rules > *,.steps li { background:rgba(7,9,32,.55);border-color:rgba(255,255,255,.12); }
footer { color:#bcb6d3;background:#030511;border-top:1px solid rgba(114,224,197,.22); }
.footer-marquee { display:flex;justify-content:center;gap:.8rem;align-items:center;flex-wrap:wrap;margin-bottom:.5rem; }
.footer-marquee strong { color:var(--orange);letter-spacing:.1em; }.footer-marquee span{font-size:.8rem;}
.footer-lights { color:var(--yellow);text-shadow:0 0 8px var(--yellow); }

@media (max-width: 820px) {
  .chad-marquee { position:relative; right:auto; top:auto; transform:rotate(-1deg); width:100%; margin:-44px 0 22px; }
  .giveaway-section { grid-template-columns:1fr; }
  .event-ribbon { margin-top:0; }
  .pier-crowd { grid-template-columns:repeat(4,minmax(54px,1fr)); }
  .pier-person img,.pier-avatar-fallback { width:56px;height:56px; }
}
@media (max-width: 560px) {
  body.test-mode .site-header { top:64px; }
  .site-header { width:calc(100% - 18px); padding:9px 10px; }
  .site-header nav a { display:none; }
  .brand>span:last-child { font-size:.85rem; }
  .hero,.ticket-dashboard,.boardwalk-section,.how-section,.giveaway-section,.event-ribbon,.live-status-bar { width:calc(100% - 20px); }
  .hero { padding-top:58px; }
  .hero h1 { font-size:clamp(3rem,16vw,5.2rem); }
  .event-ribbon { font-size:.68rem;gap:.5rem; }
  .pier-group-photo { padding-left:10px;padding-right:10px; }
  .pier-crowd { grid-template-columns:repeat(3,minmax(50px,1fr));gap:12px 6px; }
  .snack-bracket { grid-template-columns:repeat(5,160px); }
}
/* Final-component alignment with generated markup */
.unlock-celebration > span { display:block;text-align:center;font-weight:1000;letter-spacing:.12em;color:var(--yellow); }
.unlock-celebration > strong { display:block;max-width:850px;text-align:center;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(2.5rem,8vw,6rem);line-height:.95;text-transform:uppercase;color:#fff;text-shadow:0 0 14px var(--pink),5px 5px 0 #050617; }
.unlock-celebration > small { color:var(--mint);font-weight:950;letter-spacing:.08em; }
.pier-photo-moon { position:absolute;right:8%;top:45px;font-size:4rem;color:#fff0a0;filter:drop-shadow(0 0 13px #fff0a0); }
.pier-photo-sign { position:absolute;top:25px;left:50%;transform:translateX(-50%) rotate(-1deg);z-index:3;padding:.5rem .8rem;border:3px solid #fff;background:var(--orange);color:#080b25;font-family:Impact,"Arial Black",sans-serif;letter-spacing:.08em; }
.pier-photo-rail { position:absolute;left:0;right:0;top:57%;height:6px;background:#85604c;box-shadow:0 34px 0 #76533f;z-index:1; }
.pier-photo-crowd { position:relative;z-index:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:18px 12px;align-items:end; }
.pier-photo-person { min-width:0;text-align:center;position:relative; }
.pier-photo-person img,.pier-photo-person .avatar-initials { width:66px;height:66px;border-radius:50%;object-fit:cover;border:3px solid #fff;background:#252955;box-shadow:0 5px 0 rgba(0,0,0,.3),0 0 13px rgba(88,186,244,.35);margin:auto; }
.pier-photo-person .avatar-initials { display:none;place-items:center;color:#fff;font-weight:950; }
.pier-photo-person.avatar-fallback .avatar-initials { display:grid; }
.pier-photo-person small { display:block;margin-top:.3rem;padding:.15rem .3rem;border-radius:7px;background:rgba(3,4,15,.78);font-size:.7rem;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.snack-champion { text-align:center;padding:1rem;border:2px solid var(--yellow);border-radius:14px;background:rgba(255,228,119,.09);color:var(--yellow);font-weight:950;font-size:1.1rem; }
.carousel-question-bank,.clip-list,.chip-list { display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0; }
.question-slip,.clip-list span,.chip-list span { border:1px solid rgba(114,224,197,.32);border-radius:999px;background:#10143a;color:#e7fff8;padding:.45rem .65rem;font-size:.8rem; }
.question-slip { cursor:pointer; }
.secret-silhouette { min-height:150px;display:grid;grid-template-columns:repeat(3,1fr);place-items:center;background:#010208;border-radius:14px;color:#000;text-shadow:0 0 3px rgba(80,80,110,.2);font-size:3rem; }
@media(max-width:560px){.pier-photo-crowd{grid-template-columns:repeat(3,minmax(50px,1fr));gap:12px 6px}.pier-photo-person img,.pier-photo-person .avatar-initials{width:54px;height:54px}}