/* Club Penguin public site: tokens, base, buttons, header, menu and footer shared by the home and content pages.
   Colours are sampled from the real art (docs/PUBLIC-SITE.md §3). No inline styles anywhere: JS only writes CSS custom
   properties through the CSSOM. */
:root {
  --ocean-900: #06213F; --ocean-800: #00529B; --ocean-700: #0B5DB8; --ocean-600: #0058B0;
  --sea-500: #0186B1; --sea-400: #13A6D9; --sky-300: #3CC3F0; --sky-200: #57B3F1;
  --ice-50: #EAF6FF; --snow: #F8F8F8;
  --gold-500: #FFCC00; --gold-400: #F8E050; --gold-600: #F8C038; --orange-500: #FA9301;
  --ink: #0A1A2F; --success: #2E9E3F; --danger: #CC0000;
  --r-pill: 999px; --r-card: 24px; --r-tile: 18px;
  --lift-1: 0 2px 0 rgba(6,33,63,.25);
  --lift-2: 0 6px 0 rgba(6,33,63,.22), 0 12px 24px rgba(6,33,63,.18);
  --t-fast: 140ms; --t-base: 300ms; --t-slow: 600ms;
  --ease-out: cubic-bezier(.2,.8,.2,1); --ease-bob: cubic-bezier(.45,0,.55,1);
  --f-display: "Site Display", "Arial Rounded MT Bold", system-ui, sans-serif;
  --f-ui: "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif;
  --f-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-comic: "Bangers", "Site Display", system-ui, sans-serif;
  --gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
  --header-h: 76px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body { margin: 0; font: 400 17px/1.55 var(--f-body); color: var(--ocean-900); background: var(--ocean-900); overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--gold-500); color: var(--ocean-900); padding: 10px 16px; border-radius: 12px; font: 600 16px var(--f-ui); }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--sky-300); outline-offset: 3px; border-radius: 12px; }
.wrap { width: min(1280px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ------------------------------------------------------------------ buttons (2017 play-button gradients) */
.btn {
  --h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 calc(var(--h) * .55); border-radius: var(--r-pill);
  font: 400 calc(var(--h) * .4)/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; border: 0; position: relative; isolation: isolate; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), filter var(--t-fast);
}
.btn svg { width: 1.1em; height: 1.1em; }
.btn--sm { --h: 40px; }
.btn--lg { --h: 58px; }
.btn--xl { --h: 66px; }
.btn--gold {
  color: #5a2e00;
  background: linear-gradient(180deg, #FFF3A6 0%, var(--gold-400) 18%, #FFD83A 50%, var(--gold-600) 51%, #F4B42A 100%);
  box-shadow: inset 0 0 0 2px #E8A21C, inset 0 3px 0 rgba(255,255,255,.75), 0 6px 0 #C47F0E, 0 12px 26px rgba(6,33,63,.32);
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.btn--blue {
  color: #fff;
  background: linear-gradient(180deg, #6fd0ff 0%, #2aa2f2 22%, #1286e0 50%, #0b6fcf 51%, #0b5db8 100%);
  box-shadow: inset 0 0 0 3px #fff, inset 0 5px 0 rgba(255,255,255,.35), 0 6px 0 #073f86, 0 12px 26px rgba(6,33,63,.32);
  text-shadow: 0 2px 0 rgba(6,33,63,.35);
}
.btn--line { color: var(--ocean-700); background: #fff; box-shadow: inset 0 0 0 2px #cfe3f5, var(--lift-1); font-size: 16px; }
.btn:hover { filter: brightness(1.05) saturate(1.05); transform: translateY(-1px); }
.btn--gold:active { transform: translateY(4px); box-shadow: inset 0 0 0 2px #E8A21C, inset 0 3px 0 rgba(255,255,255,.75), 0 2px 0 #C47F0E, 0 4px 10px rgba(6,33,63,.3); }
.btn--blue:active { transform: translateY(4px); box-shadow: inset 0 0 0 3px #fff, 0 2px 0 #073f86, 0 4px 10px rgba(6,33,63,.3); }
.btn__ball { width: 30px; height: 30px; margin-left: -8px; filter: drop-shadow(0 2px 0 rgba(6,33,63,.35)); }

/* ------------------------------------------------------------------ header */
.top {
  position: fixed; z-index: 50; inset: 0 0 auto 0; height: calc(var(--header-h) + env(safe-area-inset-top));
  display: flex; align-items: center; gap: 28px; padding: env(safe-area-inset-top) max(28px, var(--gutter)) 0;
  color: #fff; transition: background var(--t-base), box-shadow var(--t-base), color var(--t-base);
}
.top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,30,70,.35), rgba(0,30,70,0)); pointer-events: none; transition: opacity var(--t-base); }
.top__brand { flex: none; }   /* the logo never gives up width: the right-hand group adapts instead */
.top__brand img { height: 46px; width: auto; filter: drop-shadow(0 3px 6px rgba(0,20,60,.35)); transition: opacity var(--t-base), transform var(--t-base); }
.at-top .top__brand img { opacity: 0; transform: translateY(-6px); }
.top__nav { display: flex; gap: 6px; margin-left: 8px; }
.top__nav a { font: 600 17px/1 var(--f-ui); text-decoration: none; padding: 10px 14px; border-radius: var(--r-pill); transition: background var(--t-fast); letter-spacing: .01em; }
.top__nav a:hover { background: rgba(255,255,255,.16); }
.top__nav a[aria-current="page"] { background: rgba(255,255,255,.2); }
.top__right { margin-left: auto; display: flex; align-items: center; gap: 12px; min-width: 0; }
.live { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 14px; border-radius: var(--r-pill); font: 500 15px/1 var(--f-ui); background: rgba(6,33,63,.28); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); backdrop-filter: blur(10px); white-space: nowrap; }
.live b { font-weight: 600; }
.live__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #9fb3c8; }
.live[data-state="online"] .live__dot { background: #5BE36B; box-shadow: 0 0 0 3px rgba(91,227,107,.28); animation: pulse 2.4s var(--ease-bob) infinite; }
.live[data-state="offline"] .live__dot { background: #e0564f; }
.live__short { display: none; }
.menu-btn { display: none; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 4px; border: 0; border-radius: 14px; background: rgba(255,255,255,.18); color: inherit; font: 600 15px/1 var(--f-ui); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); white-space: nowrap; cursor: pointer; }
.menu-btn img { width: 32px; height: 32px; }
.scrolled .menu-btn { background: #fff; box-shadow: inset 0 0 0 1.5px #d4e6f6; }
.scrolled .top { background: rgba(234,246,255,.9); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 1px 0 rgba(6,33,63,.08), 0 8px 24px rgba(6,33,63,.08); color: var(--ocean-900); }
.scrolled .top::before { opacity: 0; }
.scrolled .live { background: #fff; box-shadow: inset 0 0 0 1.5px #d4e6f6; }
.scrolled .top__nav a:hover { background: rgba(11,93,184,.08); }
.scrolled .top__nav a[aria-current="page"] { background: rgba(11,93,184,.1); }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(91,227,107,0); } }

/* the menu (tablet and phone): a card under the header */
.menu { position: fixed; z-index: 49; top: calc(var(--header-h) + env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); width: min(340px, 100% - 24px);
  max-height: calc(100svh - var(--header-h) - env(safe-area-inset-top) - 24px); overflow: auto;
  padding: 10px; border-radius: 24px; background: #fff; color: var(--ocean-900); box-shadow: 0 24px 60px rgba(0,30,80,.4), inset 0 0 0 1.5px #d4e6f6; }
.menu nav { display: grid; gap: 2px; }
.menu nav a { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 14px; font: 600 18px/1.1 var(--f-ui); text-decoration: none; }
.menu nav a:hover, .menu nav a:focus-visible { background: var(--ice-50); }
.menu .btn { width: 100%; margin-top: 8px; }

/* ------------------------------------------------------------------ footer */
.foot { position: relative; background: var(--ocean-900); color: #cfe3f5; }
.foot__band { position: relative; height: 85px; background: url(/site/home/art/ui/pattern-band.png) 0 0 / 200px 85px repeat-x; box-shadow: inset 0 -10px 20px rgba(6,33,63,.25); }
.foot__peek { position: absolute; right: 9%; bottom: 100%; width: 150px; margin-bottom: -2px; }
.foot__main { display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; padding: 48px 0 32px; }
.foot__brand img { width: 200px; height: auto; }
.foot__waddle { margin-top: 14px; font: 400 40px/1 var(--f-comic); letter-spacing: .04em; color: var(--gold-500); text-shadow: 0 3px 0 #7a4a00; transform: rotate(-3deg); transform-origin: 0 50%; display: inline-block; }
.foot__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.foot__links h2 { font: 600 14px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: #7fb6e6; margin: 0 0 14px; }
.foot__links a { display: block; padding: 6px 0; text-decoration: none; font: 600 16px/1.3 var(--f-body); color: #eaf6ff; }
.foot__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot__legal { border-top: 1px solid rgba(255,255,255,.1); padding: 24px 0 calc(32px + env(safe-area-inset-bottom)); display: flex; justify-content: space-between; gap: 30px; align-items: start; }
.disclaimer { max-width: 780px; font-size: 14px; line-height: 1.6; color: #a9c6e2; }
.disclaimer b { color: #eaf6ff; }
.disclaimer a { color: #eaf6ff; }
.foot__tiny { font-size: 13px; color: #7fa5c9; max-width: 24em; }
.foot__tiny a { color: #cfe3f5; }

/* ------------------------------------------------------------------ layout modes: header + footer */
/* tablet: the nav moves into the menu */
@media (min-width: 600px) and (max-width: 1023px) and (min-height: 500px) {
  .top__nav { display: none; }
  .menu-btn { display: inline-flex; }
}
/* the full live pill needs ~780 px beside the logo, PLAY NOW and Menu (tablet), and ~1120 px beside the nav (desktop) */
@media (min-width: 600px) and (max-width: 779px) and (min-height: 500px), (min-width: 1024px) and (max-width: 1159px) and (min-height: 500px) {
  .live__n { display: none; } .live__short { display: inline; margin-left: 4px; }
}
@media (min-width: 1024px) and (max-width: 1099px) and (min-height: 500px) {
  .top { gap: 16px; }
  .top__nav a { padding: 10px 11px; }
}
@media (min-width: 600px) and (max-width: 679px) and (min-height: 500px) {
  .top { gap: 16px; padding-left: 20px; padding-right: 20px; }
  .live b { display: none; } .live__short { margin-left: 0; }
}
/* phone (portrait, and narrow windows that are not phone landscape) */
@media (max-width: 599px) and (min-height: 500px), (max-width: 599px) and (orientation: portrait) {
  :root { --header-h: 60px; }
  body { font-size: 16px; }
  .top { gap: 10px; padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .top__brand img { height: 34px; }
  .top__nav, .top__play { display: none; }
  .live { height: 36px; padding: 0 12px 0 10px; font-size: 14px; }
  .live b, .live__n { display: none; }
  .live__short { display: inline; }
  .menu-btn { display: inline-flex; }
  .foot__peek { width: 110px; right: 7%; }
  .foot__main { grid-template-columns: 1fr; gap: 28px; }
  .foot__links { grid-template-columns: 1fr 1fr; }
  .foot__links > div:last-child { grid-column: span 2; }
  .foot__legal { flex-direction: column; gap: 14px; }
}
/* phone landscape */
@media (orientation: landscape) and (max-height: 499px) {
  :root { --header-h: 50px; }
  .top { gap: 12px; padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
  .top__brand img { height: 32px; }
  .top__nav { display: none; }
  .menu-btn { display: inline-flex; height: 36px; border-radius: 12px; font-size: 14px; }
  .menu-btn img { width: 28px; height: 28px; }
  .live { height: 34px; font-size: 13px; }
  .live__n { display: none; } .live__short { display: inline; margin-left: 4px; }
  .top__play { --h: 36px; }
  .menu { max-height: calc(100svh - var(--header-h) - 16px); }
  .menu nav a { min-height: 40px; }
}
/* narrow phones: Menu keeps its icon and its accessible name, the word goes */
@media (max-width: 359px) {
  .menu-btn { padding: 0 4px; }
  .menu-btn span { display: none; }
  .foot__links { grid-template-columns: 1fr; }
  .foot__links > div:last-child { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .live, .scrolled .top { backdrop-filter: none; }
}