/* CPIL play-page overlay — arctic gradient bg + top nav. Disney SWF stays as-is. */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&display=swap');

/* ───────── Body / global bg (the pretty arctic gradient) ───────── */
html, body {
  background: #08214a !important;
  margin: 0 !important;
}

/* Trim the empty page area below the SWF */
.page, #page { padding-bottom: 0 !important; margin-bottom: 0 !important; }
main#content { padding-bottom: 0 !important; margin-bottom: 0 !important; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(126,196,255,.45), transparent 60%),
    radial-gradient(900px 500px at 10% 10%, rgba(255,200,61,.18), transparent 60%),
    linear-gradient(180deg, #06224d 0%, #0b3a78 50%, #0e4d99 100%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.7) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 1.5px);
  background-size: 220px 220px, 320px 320px, 180px 180px;
  background-position: 0 0, 50px 80px, 130px 40px;
  opacity: .45;
  animation: snow-drift 90s linear infinite;
}
@keyframes snow-drift {
  from { background-position: 0 0, 50px 80px, 130px 40px; }
  to   { background-position: 0 800px, 50px 880px, 130px 840px; }
}

/* Keep page content above the bg layers */
.page, #page { position: relative !important; z-index: 1 !important; }

/* ───────── Hide Disney chrome ───────── */
#section-header nav,
#section-footer,
#region-page-bottom,
.region-page-bottom,
#billboards,
#banner,
#affiliate-header { display: none !important; }

/* ───────── Minimal top nav (no logo) ───────── */
.cpil-nav{
  position: sticky; top: 0; z-index: 9999;
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  background: rgba(8,33,74,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: 'Fredoka', sans-serif;
}
.cpil-nav .cpil-brand{ display: none !important; }
.cpil-nav-inner{
  max-width: 1200px; margin: 0 auto; padding: 4px 16px;
  display: flex; align-items: center; justify-content: center; gap: 0;
}
.cpil-menu{ display: flex; gap: 2px; }
.cpil-menu a{
  color: #cfe1fb; padding: 5px 10px; border-radius: 8px;
  font-weight: 600; font-size: .82rem;
  text-decoration: none; transition: .18s ease;
}
.cpil-menu a:hover{ color: #fff; background: rgba(255,255,255,.07); }
.cpil-menu a.cpil-cta{
  color: #0a2a52;
  background: linear-gradient(180deg, #ffd766, #ffb022);
  box-shadow: 0 6px 16px -6px rgba(255,180,40,.6),
              0 1px 0 rgba(255,255,255,.6) inset;
}
.cpil-menu a.cpil-cta:hover{ transform: translateY(-1px); filter: brightness(1.05); }

@media (max-width: 800px) {
  .cpil-nav-inner{ flex-wrap: wrap; gap: 12px; padding: 10px 16px; }
  .cpil-menu{ gap: 0; flex-wrap: wrap; justify-content: center; }
  .cpil-menu a{ padding: 6px 10px; font-size: .85rem; }
}