:root{
  --navy-950: #0a1230;
  --navy-900: #0f1b3c;
  --navy-800: #16265a;
  --navy-700: #203178;
  --gold: #f4c542;
  --gold-soft: #ffe6a3;
  --pink: #ff4fa0;
  --teal: #37c2b0;
  --cream: #fff8ed;
  --ink: #101223;
  --muted: #a6b0d6;
  --radius: 16px;
  --font-display: "Fredoka", ui-rounded, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
h1,h2{ font-family:var(--font-display); margin:0; }

/* ---------- Night sky hero backdrop ---------- */
.sky{
  position:relative;
  height:min(72vh, 640px);
  background:radial-gradient(ellipse at 50% -10%, var(--navy-700), var(--navy-950) 65%);
  overflow:hidden;
}
.stars{
  position:absolute; inset:0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 70% 20%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 40% 60%, #fff9, transparent),
    radial-gradient(2px 2px at 85% 45%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 10% 75%, #fff8, transparent),
    radial-gradient(1.5px 1.5px at 60% 85%, #fff6, transparent),
    radial-gradient(2px 2px at 92% 75%, #fff9, transparent);
  background-repeat:repeat;
  background-size: 400px 400px;
  opacity:.9;
}
.firework{
  position:absolute; border-radius:50%;
  width:6px; height:6px;
  box-shadow:0 0 0 1px transparent;
  animation: burst 4.5s ease-out infinite;
  opacity:0;
}
.fw1{ top:18%; left:22%; background:var(--gold); animation-delay:.2s; }
.fw2{ top:12%; left:68%; background:var(--pink); animation-delay:1.8s; }
.fw3{ top:26%; left:82%; background:var(--teal); animation-delay:3.2s; }
@keyframes burst{
  0%{ transform:scale(0); opacity:0; box-shadow:0 0 0 0 currentColor; }
  8%{ opacity:1; }
  45%{
    box-shadow:
      0 -46px 0 -1px currentColor, 0 46px 0 -1px currentColor,
      -46px 0 0 -1px currentColor, 46px 0 0 -1px currentColor,
      -33px -33px 0 -1px currentColor, 33px -33px 0 -1px currentColor,
      -33px 33px 0 -1px currentColor, 33px 33px 0 -1px currentColor;
    opacity:.85; transform:scale(1);
  }
  100%{
    box-shadow:
      0 -90px 0 -2px transparent, 0 90px 0 -2px transparent,
      -90px 0 0 -2px transparent, 90px 0 0 -2px transparent,
      -64px -64px 0 -2px transparent, 64px -64px 0 -2px transparent,
      -64px 64px 0 -2px transparent, 64px 64px 0 -2px transparent;
    opacity:0; transform:scale(1.4);
  }
}
.fw1, .fw2, .fw3{ color: var(--gold); }
.fw2{ color: var(--pink); }
.fw3{ color: var(--teal); }
@media (prefers-reduced-motion: reduce){
  .firework{ animation:none; opacity:0; }
}

/* ---------- Topbar ---------- */
.topbar{
  position:absolute; top:0; left:0; right:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,5vw,64px);
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-size:1.15rem; color:var(--cream);
  letter-spacing:.02em;
}
.brand-castle{ color:var(--gold); }
.brand strong{ color:var(--gold); font-weight:600; }
.topnav{ display:flex; gap:clamp(16px,3vw,32px); }
.topnav a{
  text-decoration:none; color:var(--muted); font-weight:600; font-size:.92rem;
  padding-bottom:4px; border-bottom:2px solid transparent; transition:.2s;
}
.topnav a:hover, .topnav a.active{ color:var(--cream); border-color:var(--gold); }

/* ---------- Hero ---------- */
.hero{
  position:relative; z-index:2;
  height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 20px;
  margin-top:-1px;
}
.hero h1{
  color:var(--cream);
  font-size:clamp(2.1rem, 5vw, 3.6rem);
  font-weight:600; line-height:1.15;
  max-width:16ch;
}
.hero h1 span{ color:var(--gold); }
.hero-sub{
  color:var(--muted); font-size:1.05rem; max-width:46ch; margin-top:18px;
}
.hero-scroll{
  margin-top:44px; color:var(--gold-soft); font-size:.85rem; opacity:.8;
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }

/* ---------- Calendar ---------- */
.calendar-section{
  max-width:900px; margin:-64px auto 0; position:relative; z-index:6;
  background:#fff; border-radius:24px;
  box-shadow:0 24px 60px -20px rgba(15,27,60,.35);
  padding:clamp(20px,4vw,40px);
}
.calendar-header{
  display:flex; align-items:center; justify-content:center; gap:20px;
  margin-bottom:6px;
}
.calendar-header h2{
  font-size:1.4rem; min-width:220px; text-align:center; text-transform:capitalize;
}
.month-nav{
  width:38px; height:38px; border-radius:50%; border:none;
  background:var(--navy-900); color:var(--gold); font-size:1.3rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s;
}
.month-nav:hover{ transform:scale(1.08); }

.legend{
  display:flex; gap:18px; flex-wrap:wrap; justify-content:center;
  margin:18px 0 22px; font-size:.82rem; color:#5a5f78;
}
.legend span{ display:flex; align-items:center; gap:6px; }
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.dot-1{ background:#8fd6c4; }
.dot-2{ background:var(--gold); }
.dot-3{ background:#ff8f5e; }
.dot-4{ background:var(--pink); }
.dot-foreign{ background:var(--navy-800); }

.weekdays{
  display:grid; grid-template-columns:repeat(7,1fr);
  font-size:.75rem; color:#8a8fa8; font-weight:700;
  text-align:center; margin-bottom:6px; text-transform:uppercase; letter-spacing:.05em;
}
.calendar-grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:6px;
}
.day-cell{
  aspect-ratio:1/1; border-radius:12px; border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; font-family:var(--font-body); position:relative;
  background:#f4f5fb; color:#2b2f45; transition:transform .12s, box-shadow .12s;
}
.day-cell:hover{ transform:translateY(-2px); box-shadow:0 8px 18px -8px rgba(15,27,60,.35); }
.day-cell.empty{ visibility:hidden; cursor:default; }
.day-cell .num{ font-weight:700; font-size:.95rem; }
.day-cell .score{ font-size:.68rem; font-weight:700; opacity:.85; }
.day-cell .price{ font-size:.66rem; font-weight:600; opacity:.75; }

.price-toggle{
  display:block; margin:0 auto 22px; padding:9px 18px;
  border-radius:999px; border:2px solid var(--navy-900); background:#fff;
  color:var(--navy-900); font-weight:700; font-size:.78rem; cursor:pointer;
  font-family:var(--font-body); transition:.15s;
}
.price-toggle:hover{ background:var(--navy-900); color:var(--cream); }
.day-cell.today{ outline:2px solid var(--navy-900); outline-offset:2px; }
.day-cell.selected{ outline:3px solid var(--gold); outline-offset:2px; }
.foreign-dot{
  position:absolute; top:6px; right:6px;
  width:7px; height:7px; border-radius:50%;
  background:var(--navy-800);
}
.weather-icon{
  position:absolute; top:4px; left:6px;
  font-size:.72rem; line-height:1; opacity:.9;
}

.level-1{ background:#e4f6ef; color:#1c7a5c; }
.level-2{ background:#fff2cf; color:#8a6a08; }
.level-3{ background:#ffe1d0; color:#b1490c; }
.level-4{ background:#ffdcec; color:#b1105a; }

.estimate-disclaimer{
  margin-top:22px; font-size:.78rem; color:#8a8fa8; line-height:1.5; text-align:center;
}

/* ---------- Day panel ---------- */
.day-panel{
  max-width:900px; margin:22px auto 0; position:relative;
  background:var(--navy-900); color:var(--cream); border-radius:24px;
  padding:clamp(20px,4vw,40px); overflow:hidden;
}
.day-panel.hidden{ display:none; }
.close-btn{
  position:absolute; top:16px; right:18px; background:none; border:none;
  color:var(--muted); font-size:1.6rem; cursor:pointer; line-height:1;
}
.close-btn:hover{ color:var(--cream); }
.day-panel-inner{ display:flex; flex-wrap:wrap; gap:32px; align-items:center; }
.day-panel-date{ font-family:var(--font-display); font-size:1.3rem; margin:0 0 4px; text-transform:capitalize; }
.day-panel-context{ color:var(--muted); margin:0 0 12px; font-size:.92rem; }
.score-burst{ position:relative; display:flex; align-items:center; justify-content:center; }
.score-burst-label{
  position:absolute; text-align:center; font-family:var(--font-display);
  font-size:1.7rem; color:var(--gold);
}
.score-max{ font-size:.9rem; color:var(--muted); margin-left:2px; }
.day-panel-stats{ display:flex; gap:28px; flex-wrap:wrap; }
.stat{ display:flex; flex-direction:column; gap:4px; }
.stat-label{ font-size:.78rem; color:var(--muted); }
.stat-value{ font-size:1.25rem; font-weight:700; font-family:var(--font-display); }
.stat-weather{ display:flex; align-items:center; gap:6px; }
.stat-weather span:first-child{ font-size:1.4rem; font-family:initial; }

/* ---------- Attractions / live data ---------- */
.attractions-section{
  max-width:1080px; margin:80px auto; padding:0 20px;
}
.section-heading{ text-align:center; margin-bottom:22px; }
.section-heading h2{ font-size:1.6rem; margin-bottom:8px; }
.live-status{ color:#8a8fa8; font-size:.85rem; }
.live-status.live{ color:#1c7a5c; }
.live-status.error{ color:#b1105a; }

.park-tabs{ display:flex; gap:10px; justify-content:center; margin-bottom:24px; flex-wrap:wrap; }
.park-tab{
  border:2px solid var(--navy-900); background:none; color:var(--navy-900);
  padding:9px 18px; border-radius:999px; font-weight:700; font-size:.85rem;
  cursor:pointer; font-family:var(--font-body); transition:.15s;
}
.park-tab.active, .park-tab:hover{ background:var(--navy-900); color:var(--cream); }

.attractions-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr));
  gap:14px;
}
.attraction-card{
  background:#fff; border-radius:14px; padding:16px 18px;
  box-shadow:0 6px 20px -14px rgba(15,27,60,.4);
  display:flex; flex-direction:column; gap:8px;
}
.attraction-card .land{ font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:#9aa0bd; font-weight:700; }
.attraction-card .name{ font-weight:700; font-size:.95rem; min-height:2.4em; }
.attraction-card .wait-row{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.wait-badge{
  font-family:var(--font-display); font-weight:600; font-size:1.15rem;
  padding:3px 12px; border-radius:999px;
}
.wait-badge.open{ background:#e4f6ef; color:#1c7a5c; }
.wait-badge.closed{ background:#f0f1f7; color:#8a8fa8; }
.status-dot{ width:8px; height:8px; border-radius:50%; }
.status-dot.open{ background:#2fb673; }
.status-dot.closed{ background:#c7c9d9; }

/* ---------- About / footer ---------- */
.about-section{
  max-width:720px; margin:0 auto 80px; padding:0 20px; text-align:center;
}
.about-section h2{ font-size:1.4rem; margin-bottom:12px; }
.about-section p{ color:#5a5f78; line-height:1.6; font-size:.92rem; }
.about-section a{ color:var(--navy-800); font-weight:700; text-decoration:underline; }

.site-footer{
  background:var(--navy-950); color:var(--muted); text-align:center;
  padding:26px 20px; font-size:.8rem;
}
.site-footer a{ color:var(--gold-soft); text-decoration:none; }

@media (max-width:640px){
  .topnav{ display:none; }
  .day-panel-inner{ justify-content:center; text-align:center; }
}