/* Layout modelled on the classic Club Penguin homepage (as CPJourney uses it):
   dark-blue header with logo, nav and PLAY NOW; island hero; card row; tabbed footer. */
:root {
  --navy: #00264d;
  --deep: #0b3f7f;
  --page: #2a6ec0;
  --band: #2b7fd3;
  --card-row: #2aa3ef;
  --light: #27a6f5;
  --yellow: #ffcc00;
  --orange: #ff9a00;
  --red: #e0352b;
  --green: #2f9e47;
  --text: #0e2a47;
  --muted: #4d6b88;
  --radius: 22px;
  --display: 'Lilita One', 'Arial Black', system-ui, sans-serif;
  --body: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: var(--body); color: var(--text); background: var(--page);
}
a { color: #0a6fd6; font-weight: 600; }
code { background: #e3f2ff; padding: 1px 6px; border-radius: 6px; font-size: .92em; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; color: var(--navy); line-height: 1.1; margin: 0 0 .5em; }
h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); }
h2 { font-size: 1.45rem; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }

/* ---------- Logo (stacked, outlined, like the classic wordmark) ---------- */
.logo { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; line-height: .82; }
.logo span {
  font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .5px;
  paint-order: stroke fill; -webkit-text-stroke: 6px var(--navy); text-shadow: 0 4px 0 var(--navy);
}
.logo .l1 { color: #fff; font-size: 2.15rem; }
.logo .l2 { color: var(--yellow); font-size: 1.62rem; margin-top: 1px; }
.logo .l3 { color: #fff; font-size: 1.36rem; margin-top: 2px; letter-spacing: 1px; }
.logo.big .l1 { font-size: clamp(2.3rem, 5.6vw, 3.7rem); -webkit-text-stroke-width: 9px; text-shadow: 0 6px 0 var(--navy); }
.logo.big .l2 { font-size: clamp(1.75rem, 4.2vw, 2.8rem); -webkit-text-stroke-width: 8px; text-shadow: 0 5px 0 var(--navy); }
.logo.big .l3 { font-size: clamp(1.45rem, 3.5vw, 2.35rem); -webkit-text-stroke-width: 8px; text-shadow: 0 5px 0 var(--navy); }
.logo.small .l1 { font-size: 1.5rem; } .logo.small .l2 { font-size: 1.13rem; } .logo.small .l3 { font-size: .95rem; }
.logo.small span { -webkit-text-stroke-width: 5px; text-shadow: 0 3px 0 var(--navy); }

/* ---------- Header ---------- */
.site-header {
  background: linear-gradient(180deg, #2a6cb6 0%, #1d5aa3 55%, #164c8e 100%);
  border-bottom: 3px solid #0d3a70;
  box-shadow: 0 3px 8px rgba(0, 20, 50, .35);
  position: relative; z-index: 2;
}
.site-header-inner {
  max-width: 1000px; margin: 0 auto; padding: 10px 16px 0;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px;
}
.site-header .logo { padding-bottom: 10px; }
.header-center { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
.header-nav { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; }
.header-nav a, .header-nav button {
  font: inherit; font-family: var(--display); font-weight: 400; font-size: 1.05rem; letter-spacing: .3px;
  color: #fff; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer;
  text-shadow: 0 2px 0 rgba(0, 20, 50, .6);
}
.header-nav a:hover, .header-nav button:hover { color: var(--yellow); }
.header-tab {
  margin-top: 10px; padding: 8px 34px 9px; color: #fff; font-family: var(--display); font-size: .95rem;
  background: linear-gradient(180deg, #0f3f7a, #0b3366); border-radius: 18px 18px 0 0;
  border: 2px solid #0a2d5a; border-bottom: 0; text-align: center; text-shadow: 0 1px 0 #000;
}
.header-tab.party { color: #ffb12e; }
.play-now {
  font-family: var(--display); font-style: italic; font-size: 1.55rem; letter-spacing: .5px;
  color: #fff; text-decoration: none; padding: 9px 26px 11px; margin-bottom: 10px; border-radius: 16px;
  background: linear-gradient(180deg, #7ed0ff 0%, #2f9bf0 38%, #0d63c8 100%);
  border: 3px solid #a9dcff; outline: 3px solid #0b3f7f;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.55), 0 4px 0 #082f60;
  paint-order: stroke fill; -webkit-text-stroke: 3px #08376e; text-shadow: 0 3px 0 #08376e;
}
.play-now:hover { filter: brightness(1.08); }

/* ---------- Main ---------- */
main { flex: 1; width: 100%; max-width: 1000px; margin: 26px auto; padding: 0 16px; }
main.wide { max-width: 1100px; }
main.home { max-width: none; margin: 0; padding: 0; }
.panel {
  background: #fff; border: 4px solid var(--navy); border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: 22px; box-shadow: 0 6px 0 rgba(0, 20, 50, .3);
}
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px; margin-bottom: 22px; }
.grid > .panel { margin-bottom: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.panel-head h2 { margin: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; cursor: pointer; text-decoration: none; text-align: center;
  font-family: var(--display); font-weight: 400; font-size: 1.12rem; letter-spacing: .4px;
  color: #fff; text-shadow: 0 2px 0 rgba(0, 38, 77, .7);
  background: linear-gradient(180deg, #74c7ff 0%, #2f9bf0 38%, #0d63c8 100%);
  border: 3px solid var(--navy); border-radius: 999px; padding: 9px 24px;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.5), 0 4px 0 var(--navy);
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255,255,255,.5), 0 1px 0 var(--navy); }
.btn.yellow { color: var(--navy); text-shadow: 0 1px 0 rgba(255,255,255,.7); background: linear-gradient(180deg, #fff38a 0%, var(--yellow) 40%, var(--orange) 100%); }
.btn.small { font-size: .98rem; padding: 6px 16px; }
.btn.tiny { font-family: var(--body); font-weight: 600; font-size: .82rem; padding: 3px 11px; border-width: 2px; text-shadow: none; box-shadow: 0 2px 0 var(--navy); }
.btn.danger { background: linear-gradient(180deg, #ff8a80, var(--red)); }
.pill {
  display: inline-block; font-family: var(--display); font-size: .85rem; color: #fff; text-decoration: none;
  padding: 4px 14px; border-radius: 999px; background: linear-gradient(180deg, #4ec0ff, #108ee6);
  border: 2px solid #fff; box-shadow: 0 2px 0 rgba(0, 38, 77, .35);
}
.pill:hover { filter: brightness(1.1); }

/* ---------- Home: hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #1b65b9 0%, var(--band) 60%, var(--page) 100%);
}
.hero-inner { position: relative; max-width: 1200px; margin: 0 auto; }
.hero-scene { display: block; width: 100%; height: auto; }
.hero-logo { position: absolute; top: 4%; left: 0; right: 0; text-align: center; }
.hero-logo .logo { transform: rotate(-3deg); }
.hero-tag {
  font-family: var(--display); color: #fff; font-size: clamp(1rem, 2.4vw, 1.4rem); margin: 10px 0 0;
  text-shadow: 0 2px 0 var(--navy), 0 0 10px rgba(0, 20, 50, .5);
}
.hero-cta { position: absolute; left: 0; right: 0; bottom: 5%; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 0 16px; }
.hero-cta .btn { font-size: clamp(1.2rem, 3vw, 1.7rem); padding: 10px 30px; }
.hero-guide { position: absolute; width: clamp(70px, 11vw, 124px); bottom: 14%; }
.hero-guide.left { left: 6%; transform: scaleX(-1); }
.hero-guide.right { right: 6%; }
.status-strip {
  display: flex; justify-content: center; align-items: center; gap: 10px 26px; flex-wrap: wrap;
  padding: 10px 16px; color: #d6ecff; font-weight: 500; background: rgba(0, 25, 60, .35);
}
.status-strip b { color: var(--yellow); font-family: var(--display); font-weight: 400; }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #9db4c8; border: 2px solid var(--navy); vertical-align: -1px; margin-right: 4px; }
.dot.on { background: #49d65c; }

/* ---------- Home: cards ---------- */
.cards-wrap { max-width: 1000px; margin: 34px auto 10px; padding: 0 16px; }
.cards {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
  background: var(--card-row); border-radius: 14px; padding: 22px 20px;
  box-shadow: 0 6px 0 rgba(0, 20, 50, .25);
}
.card { text-align: center; color: #fff; display: flex; flex-direction: column; align-items: center; }
.card-art {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; border: 3px solid #fff;
  display: flex; align-items: flex-end; justify-content: center; box-shadow: 0 3px 0 rgba(0, 38, 77, .3);
}
.card-art img { height: 92%; width: auto; }
.card-art svg { width: 100%; height: 100%; }
.card h3 { color: #fff; font-size: 1.35rem; margin: 12px 0 6px; text-shadow: 0 2px 0 rgba(0, 38, 77, .5); }
.card p { margin: 0 0 12px; font-size: .9rem; line-height: 1.25; flex: 1; color: #f2faff; }
@media (max-width: 860px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cards { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { margin-top: 40px; }
.site-footer-inner {
  max-width: 820px; margin: 0 auto; padding: 18px 26px 16px;
  background: linear-gradient(180deg, #2d82d6, #2166b5); border-radius: 40px 40px 0 0;
  display: flex; align-items: center; gap: 22px; color: #fff; box-shadow: 0 -2px 0 rgba(255,255,255,.15) inset;
}
.footer-links { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-family: var(--display); font-size: .9rem; }
.footer-links li + li::before { content: '|'; margin: 0 10px; color: #a9d4ff; }
.footer-links a { color: #fff; text-decoration: none; font-weight: 400; }
.footer-links a:hover { color: var(--yellow); }
.site-footer p { margin: 0 0 4px; font-size: .8rem; color: #d6ecff; }
.site-footer-bottom { height: 14px; background: #2166b5; }
@media (max-width: 640px) {
  .site-footer-inner { flex-direction: column; text-align: center; border-radius: 26px 26px 0 0; }
  .footer-links { justify-content: center; }
}

/* ---------- Play page (light blue, like CPJourney's) ---------- */
body.play-page { background: var(--light); }
.play-top { max-width: 1180px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.play-links { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px 16px; flex-wrap: wrap; align-items: center; }
.play-links a { color: #fff; text-decoration: none; font-weight: 700; font-size: .92rem; text-shadow: 0 1px 0 rgba(0, 40, 90, .5); }
.play-links a:hover { color: var(--yellow); }
.play-actions { margin-left: auto; display: flex; gap: 12px; }
.play-btn {
  font: inherit; font-weight: 700; font-size: .88rem; color: #fff; cursor: pointer; text-decoration: none;
  background: #1173d4; border: 0; border-radius: 4px; padding: 4px 12px;
}
.play-btn:hover { background: #0d62b8; }
main.play { max-width: 1180px; margin: 30px auto 0; padding: 0 16px; }
.play-frame { background: #0f5fb4; border-radius: 4px; padding: 26px clamp(10px, 8%, 100px); }
.cpgame { width: min(100%, calc((100vh - 170px) * 760 / 480)); aspect-ratio: 760 / 480; margin: 0 auto; background: #0f5fb4; }
.cpgame ruffle-player { width: 100%; height: 100%; display: block; }
.play-foot { text-align: center; font-size: .72rem; color: #fff; margin: 50px 0 20px; }
.play-foot a { color: var(--yellow); text-decoration: none; font-weight: 700; }

/* ---------- Forms ---------- */
.form-panel { max-width: 540px; margin-left: auto; margin-right: auto; }
.form { display: flex; flex-direction: column; gap: 14px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
input, select { font: inherit; color: var(--text); background: #fff; border: 3px solid #8fc2ea; border-radius: 14px; padding: 9px 12px; }
input:focus, select:focus { outline: 3px solid rgba(10, 111, 214, .35); border-color: #0a6fd6; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 600; margin-bottom: 8px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch span {
  display: block; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; background: var(--c);
  border: 3px solid var(--navy); box-shadow: inset 0 -5px 0 rgba(0,0,0,.2), inset 0 4px 0 rgba(255,255,255,.25);
}
.swatch input:checked + span { outline: 4px solid var(--yellow); outline-offset: 2px; }
.swatch input:focus-visible + span { outline: 4px solid #0a6fd6; outline-offset: 2px; }
form.inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.inline-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.notice { padding: 12px 16px; border-radius: 16px; margin: 0 0 16px; border: 3px solid; font-weight: 500; }
.notice.ok { background: #e3f7e8; border-color: var(--green); }
.notice.error { background: #fde7e7; border-color: var(--red); }
.notice.info { background: #fff7d1; border-color: var(--orange); }
.rules li { margin: 8px 0; }

/* ---------- Account ---------- */
.profile { display: flex; align-items: center; gap: 18px; }
.profile h1 { margin: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 22px; }
.stat { background: #fff; border: 4px solid var(--navy); border-radius: 18px; padding: 14px; text-align: center; box-shadow: 0 5px 0 rgba(0, 20, 50, .3); }
.stat b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.8rem; color: #0a6fd6; }
.stat span { color: var(--muted); font-weight: 500; }

/* ---------- Admin ---------- */
.worlds { list-style: none; padding: 0; margin: 0 0 12px; }
.worlds li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 8px; background: #eaf7ff; border: 3px solid #a9d6f7; border-radius: 16px; font-weight: 600; }
.bars { display: inline-flex; gap: 3px; margin-left: auto; }
.bars i { width: 9px; height: 18px; border-radius: 3px; background: #24476b; }
.bars i.on { background: #49d65c; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th { text-align: left; color: var(--muted); font-weight: 600; padding: 8px; border-bottom: 3px solid #cfe3f3; }
td { padding: 8px; border-bottom: 1px solid #e3eef7; vertical-align: middle; }
td.actions { display: flex; flex-wrap: wrap; gap: 6px; }
td.actions input, td.actions select { padding: 3px 6px; border-radius: 8px; font-size: .85rem; border-width: 2px; }
.tag { display: inline-block; font-size: .72rem; font-weight: 600; padding: 1px 8px; border-radius: 999px; margin-left: 4px; background: #e6eef5; }
.tag.admin { background: #ffe08a; } .tag.mod { background: #cfe6ff; } .tag.on { background: #c9f2d3; }
.tag.ban { background: #ffd0d0; } .tag.mute { background: #e5d9ff; }
.invites, .chat { list-style: none; padding: 0; margin: 12px 0 0; }
.invites li { display: flex; align-items: center; gap: 10px; padding: 6px 0; flex-wrap: wrap; }
.chat { max-height: 420px; overflow-y: auto; }
.chat li { padding: 5px 0; border-bottom: 1px solid #e3eef7; overflow-wrap: anywhere; }
.chat li.filtered { opacity: .5; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .bob { animation: bob 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
  .bob.d1 { animation-delay: -.7s; } .bob.d2 { animation-delay: -1.4s; } .bob.d3 { animation-delay: -2s; }
  @keyframes bob { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg) translateY(-3px); } }
  .flake { animation: fall 9s linear infinite; }
  @keyframes fall { from { transform: translateY(-20px); } to { transform: translateY(470px); } }
  .flap { animation: flap 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  @keyframes flap { 0%, 100% { transform: translate(0, 0) scaleY(1); } 50% { transform: translate(18px, -10px) scaleY(.6); } }
}

@media (max-width: 760px) {
  .site-header-inner { grid-template-columns: 1fr; justify-items: center; gap: 8px; padding-bottom: 10px; }
  .header-tab { display: none; }
  .play-now { margin-bottom: 0; }
  .hero-logo .logo { transform: scale(.8) rotate(-3deg); }
  .hero-guide { display: none; }
  .panel { padding: 18px; }
  .profile { flex-direction: column; text-align: center; }
}

/* Admin (Houdini): pending names, mascots, the penguin editor */
.tag.pending { background: #ffe1c2; } .tag.mascot { background: #ffd6f2; }
.pending, .items { list-style: none; padding: 0; margin: 0; }
.pending li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 2px solid #e6eef5; }
.mascots { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.mascot { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 10px 12px; border: 3px solid var(--navy); border-radius: 14px; background: #f4faff; }
.edit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.edit-grid label span { font-weight: 400; }
.edit-save { grid-column: 1 / -1; }
.items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; max-height: 320px; overflow-y: auto; }
.items li { font-size: .82rem; background: #e6eef5; border-radius: 999px; padding: 2px 10px; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.back-link { color: #fff; font-weight: 600; text-decoration: none; text-shadow: 0 1px 2px rgba(0, 20, 50, .5); }
.back-link:hover { text-decoration: underline; }
.tags { margin: 4px 0; } .tags .tag:first-child { margin-left: 0; }