@font-face { font-family: "Outfit"; src: url("../fonts/outfit-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/outfit-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/outfit-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("../fonts/lexend-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("../fonts/lexend-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Shrikhand"; src: url("../fonts/shrikhand-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
[hidden] { display: none !important; }
/* grade3mania — The Beatles for Grade 3
   Stage-dark "show" look: each scene is lit in its own era's colours. */

:root {
  --stage: #140f1c;
  --stage-2: #1f1829;
  --stage-3: #2b2238;
  --cream: #fbf1dc;
  --cream-dim: #d9ccb4;
  --pepper: #ef4b35;
  --marigold: #f7b733;
  --teal: #22a699;
  --lilac: #b995e6;
  --sky: #5fb4e8;
  --pink: #ff6fa5;
  --ink: #140f1c;
  --paper: #fbf1dc;
  --f-read: "Lexend", "Segoe UI", system-ui, sans-serif;
  --line: rgba(251, 241, 220, 0.16);

  --f-show: var(--f-show);
  --f-head: "Righteous", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --f-body: "Lexend", "Segoe UI", system-ui, sans-serif;
  --f-type: "Courier Prime", "Courier New", monospace;

  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1180px;
  --radius: 18px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--stage);
  color: var(--cream);
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--marigold); }
a:hover { color: var(--cream); }
:focus-visible { outline: 3px solid var(--marigold); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 400; line-height: 1.12; margin: 0; text-wrap: balance; }
p { margin: 0; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--marigold); color: var(--ink); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }

/* ---------- Header ---------- */
.site-head {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--stage) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.brand { font-family: var(--f-show); font-size: 26px; color: var(--cream); text-decoration: none; line-height: 1; white-space: nowrap; }
.brand b { color: var(--marigold); font-weight: 400; }
.brand:hover { color: var(--cream); }
.nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; justify-content: flex-end; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  font-family: var(--f-head); font-size: 16px; color: var(--cream-dim); text-decoration: none;
  padding: 8px 12px; border-radius: 999px; white-space: nowrap;
}
.nav a:hover { color: var(--cream); background: var(--stage-3); }
.nav a[aria-current="page"] { background: var(--marigold); color: var(--ink); }
.sound-btn {
  flex: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: var(--f-head); font-size: 14px; border: 1px solid var(--line); background: transparent;
  color: var(--cream-dim); border-radius: 999px; padding: 7px 12px;
}
.sound-btn svg { width: 18px; height: 18px; }
.sound-btn[aria-pressed="true"] { color: var(--ink); background: var(--teal); border-color: var(--teal); }
@media (max-width: 820px) {
  .site-head .wrap { flex-wrap: wrap; gap: 6px 12px; padding-block: 8px; }
  .nav { order: 3; flex-basis: 100%; justify-content: flex-start; margin-inline: -6px; }
  .sound-btn { margin-left: auto; }
}

/* ---------- Buttons, chips ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none;
  font-family: var(--f-head); font-size: 19px; padding: 14px 24px; border-radius: 999px; border: 0;
  background: var(--marigold); color: var(--ink); box-shadow: 0 4px 0 #b37d0f;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 6px 0 #b37d0f; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #b37d0f; }
.btn.alt { background: transparent; color: var(--cream); border: 2px solid var(--cream); box-shadow: none; }
.btn.alt:hover { background: var(--paper); color: var(--ink); }
.btn.small { font-size: 15px; padding: 9px 16px; box-shadow: 0 3px 0 #b37d0f; }
.chip { display: inline-block; font-family: var(--f-type); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; background: var(--stage-3); color: var(--cream-dim); }
.eyebrow { font-family: var(--f-type); font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--marigold); }

/* ---------- Hero (home) ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(56px, 10vw, 120px) clamp(48px, 8vw, 96px); }
.lightshow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 120%, rgba(20,15,28,.0) 30%, rgba(20,15,28,.75) 100%); }
.hero-title { font-family: var(--f-show); font-size: clamp(54px, 11vw, 150px); line-height: .92; letter-spacing: -.01em; }
.hero-title span { display: block; }
.hero-title .l2 { color: var(--marigold); padding-left: .6em; }
.hero-title .l3 { color: var(--pink); padding-left: 1.2em; font-size: .62em; }
.hero-lede { font-size: clamp(19px, 2.2vw, 24px); max-width: 34ch; margin-top: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }

/* ticket stub */
.ticket {
  font-family: var(--f-type); background: var(--paper); color: var(--ink); border-radius: 14px; padding: 22px 26px;
  position: relative; transform: rotate(2.5deg); box-shadow: 0 18px 50px rgba(0,0,0,.45); max-width: 380px; justify-self: center;
}
.ticket::before, .ticket::after { content: ""; position: absolute; top: 50%; width: 26px; height: 26px; border-radius: 50%; background: var(--stage); transform: translateY(-50%); }
.ticket::before { left: -13px; } .ticket::after { right: -13px; }
.ticket h3 { font-family: var(--f-show); font-size: 34px; color: var(--pepper); }
.ticket dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 14px 0 0; font-size: 16px; }
.ticket dt { text-transform: uppercase; letter-spacing: .08em; opacity: .65; }
.ticket dd { margin: 0; font-weight: 700; }
.ticket .perf { border-top: 2px dashed rgba(20,15,28,.35); margin-top: 16px; padding-top: 12px; font-size: 14px; letter-spacing: .1em; }

/* ---------- Sections ---------- */
.scene { padding-block: clamp(56px, 9vw, 110px); position: relative; }
.scene-head { display: grid; gap: 12px; margin-bottom: 36px; max-width: 760px; }
.scene-head h2 { font-size: clamp(34px, 5vw, 58px); }
.scene-head p { font-size: 20px; color: var(--cream-dim); }
.page-hero { padding-block: clamp(48px, 8vw, 96px) 24px; position: relative; overflow: hidden; isolation: isolate; }
.page-hero h1 { font-family: var(--f-show); font-size: clamp(46px, 8vw, 104px); line-height: .95; }
.page-hero p { font-size: clamp(19px, 2vw, 23px); max-width: 44ch; margin-top: 18px; color: var(--cream-dim); }

/* door cards on home */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .doors { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .doors { grid-template-columns: 1fr; } }
.door {
  display: grid; gap: 10px; align-content: start; text-decoration: none; color: var(--ink);
  padding: 26px; border-radius: var(--radius); min-height: 210px; position: relative; overflow: hidden;
  transition: transform .2s ease;
}
.door:hover { transform: translateY(-4px) rotate(-.6deg); color: var(--ink); }
.door h3 { font-family: var(--f-show); font-size: 34px; }
.door p { font-size: 17px; max-width: 30ch; }
.door .go { font-family: var(--f-head); margin-top: auto; }
.door svg.deco { position: absolute; right: -18px; bottom: -18px; width: 130px; height: 130px; opacity: .28; }
.d1 { background: var(--marigold); } .d2 { background: var(--pink); } .d3 { background: var(--sky); }
.d4 { background: var(--teal); } .d5 { background: var(--pepper); } .d6 { background: var(--lilac); }

/* ---------- Fab four cards ---------- */
.four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px) { .four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .four { grid-template-columns: 1fr; } }
.member { background: var(--stage-2); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); }
.member .photo { aspect-ratio: 4/5; position: relative; background: var(--mc, var(--marigold)); }
.member .body { padding: 20px 22px 24px; display: grid; gap: 10px; }
.member h3 { font-family: var(--f-show); font-size: 30px; color: var(--mc); }
.member .plays { font-family: var(--f-type); font-size: 15px; color: var(--cream-dim); }
.member ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 17px; }
.member .hear { margin-top: 6px; }

/* photo / image slot with placeholder */
.slot { position: relative; overflow: hidden; }
.slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot .ph { display: none; position: absolute; inset: 0; place-items: center; text-align: center; padding: 16px; }
.slot.noimg img { opacity: 0; }
.slot.noimg .ph { display: grid; }
.ph .ph-inner { display: grid; gap: 6px; justify-items: center; }
.ph .ph-big { font-family: var(--f-show); font-size: clamp(28px, 4vw, 44px); line-height: 1; }
.ph .ph-note { font-family: var(--f-type); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.credit { font-family: var(--f-type); font-size: 12px; color: var(--cream-dim); opacity: .8; margin-top: 8px; }

/* ---------- Timeline ---------- */
.tl { position: relative; display: grid; gap: 0; }
.tl::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 6px; margin-left: -3px; border-radius: 3px;
  background: linear-gradient(var(--sky), var(--marigold) 25%, var(--pink) 50%, var(--lilac) 75%, var(--teal)); }
.tl-item { display: grid; grid-template-columns: 1fr 80px 1fr; align-items: center; padding-block: 18px; }
.tl-item .dot { grid-column: 2; justify-self: center; width: 64px; height: 64px; border-radius: 50%; background: var(--stage); border: 5px solid var(--c, var(--marigold)); display: grid; place-items: center; font-family: var(--f-head); font-size: 15px; z-index: 1; }
.tl-card { background: var(--stage-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; display: grid; gap: 8px; }
.tl-card .yr { font-family: var(--f-show); font-size: 40px; color: var(--c, var(--marigold)); line-height: 1; }
.tl-card h3 { font-size: 26px; }
.tl-card p { font-size: 17px; color: var(--cream-dim); }
.tl-card .wow { font-family: var(--f-type); font-size: 15px; color: var(--cream); background: var(--stage-3); border-radius: 8px; padding: 8px 12px; }
.tl-item:nth-child(odd) .tl-card { grid-column: 1; grid-row: 1; }
.tl-item:nth-child(even) .tl-card { grid-column: 3; grid-row: 1; }
@media (max-width: 760px) {
  .tl::before { left: 30px; }
  .tl-item { grid-template-columns: 60px 1fr; gap: 14px; }
  .tl-item .dot { grid-column: 1; width: 52px; height: 52px; font-size: 13px; }
  .tl-item:nth-child(n) .tl-card { grid-column: 2; grid-row: 1; }
}

/* ---------- Album tour ---------- */
.tour-backdrop { position: fixed; inset: 0; z-index: -2; background: var(--room-bg, var(--stage)); transition: background .9s ease; }
.tour-rail {
  position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 40;
  display: grid; gap: 6px; padding: 8px; border-radius: 999px; background: rgba(20,15,28,.55); backdrop-filter: blur(6px);
}
.tour-rail a { width: 14px; height: 14px; border-radius: 50%; background: rgba(251,241,220,.35); display: block; position: relative; }
.tour-rail a[aria-current="true"] { background: var(--marigold); transform: scale(1.35); }
.tour-rail a span { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-family: var(--f-head); font-size: 13px; background: var(--paper); color: var(--ink); padding: 3px 9px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .15s; }
.tour-rail a:hover span, .tour-rail a:focus-visible span { opacity: 1; }
@media (max-width: 760px) { .tour-rail { display: none; } }

.tour-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.jump a { font-family: var(--f-type); font-size: 14px; text-decoration: none; color: var(--cream); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; }
.jump a:hover { background: var(--paper); color: var(--ink); }

.room { position: relative; padding-block: clamp(64px, 10vw, 130px); color: var(--room-fg); isolation: isolate; overflow: hidden; }
.room .pattern { position: absolute; inset: 0; z-index: -1; opacity: .9; pointer-events: none; }
.room-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 70px); align-items: center; }
.room:nth-of-type(even) .room-grid .sleeve-wrap { order: 2; }
@media (max-width: 860px) { .room-grid { grid-template-columns: 1fr; } .room:nth-of-type(even) .room-grid .sleeve-wrap { order: 0; } }

.sleeve-wrap { position: relative; max-width: 460px; width: 100%; justify-self: center; padding-right: 18%; }
.vinyl {
  position: absolute; top: 4%; right: 0; width: 92%; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle, var(--label, #e33) 0 16%, #0c0c0c 16.5% 17.5%, transparent 18%),
    repeating-radial-gradient(circle, #151515 0 2px, #1f1f1f 2px 4px);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  transition: transform 1.1s cubic-bezier(.2,.8,.2,1);
}
.vinyl::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3%; height: 3%; transform: translate(-50%,-50%); background: #111; border-radius: 50%; }
.room.lit .vinyl { transform: translateX(14%) rotate(200deg); }
.room.playing .vinyl { animation: spin 1.8s linear infinite; }
@keyframes spin { from { transform: translateX(14%) rotate(0); } to { transform: translateX(14%) rotate(360deg); } }
.sleeve { position: relative; z-index: 1; aspect-ratio: 1; width: 100%; border-radius: 4px; box-shadow: 0 20px 50px rgba(0,0,0,.55); background: var(--room-accent); }
.sleeve .ph { color: var(--room-bg); background: var(--room-accent); }
@media (prefers-reduced-motion: reduce) { .vinyl, .room.lit .vinyl { transition: none; } .room.playing .vinyl { animation: none; } }

.room-text { display: grid; gap: 18px; }
.room .year { font-family: var(--f-type); font-size: 16px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.room h2 { font-family: var(--room-font, var(--f-show)); font-size: clamp(40px, 6vw, 76px); line-height: .98; color: var(--room-title, var(--room-fg)); }
.room .tag { font-size: clamp(19px, 2vw, 22px); max-width: 44ch; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 520px) { .facts { grid-template-columns: 1fr; } }
.fact { background: var(--card-bg, rgba(0,0,0,.28)); border-radius: 14px; padding: 16px 18px; display: grid; gap: 6px; }
.fact h3 { font-family: var(--f-type); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.fact p { font-size: 17px; line-height: 1.5; }
.fact.wide { grid-column: 1 / -1; }
.songs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.songs li { font-family: var(--f-head); font-size: 15px; padding: 5px 12px; border-radius: 999px; background: var(--room-accent); color: var(--room-bg); }
.listen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.listen a { font-family: var(--f-head); font-size: 15px; text-decoration: none; padding: 8px 14px; border-radius: 999px; border: 2px solid currentColor; color: var(--room-fg); }
.listen a:hover { background: var(--room-fg); color: var(--room-bg); }
.player:empty { display: none; }
.player iframe { width: 100%; border: 0; border-radius: 12px; }
.bigword { display: inline-flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.bigword b { font-family: var(--f-head); font-weight: 400; font-size: 20px; }

/* ---------- Music page ---------- */
.instruments { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.inst { background: var(--stage-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: grid; gap: 10px; align-content: start; }
.inst svg.icon { width: 64px; height: 64px; }
.inst h3 { font-size: 24px; }
.inst p { font-size: 16.5px; color: var(--cream-dim); }
.inst .who { font-family: var(--f-type); font-size: 14px; color: var(--marigold); }
.play-btn { justify-self: start; display: inline-flex; gap: 8px; align-items: center; cursor: pointer; font-family: var(--f-head); font-size: 16px; border: 0; border-radius: 999px; padding: 9px 16px; background: var(--teal); color: var(--ink); }
.play-btn:hover { filter: brightness(1.1); }
.play-btn svg { width: 16px; height: 16px; }
.play-btn.hit { animation: pop .3s ease; }
@keyframes pop { 50% { transform: scale(1.08); } }

.spot { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.song { border-radius: var(--radius); padding: 22px; display: grid; gap: 8px; background: var(--stage-2); border-left: 8px solid var(--c); }
.song h3 { font-size: 24px; color: var(--c); }
.song .meta { font-family: var(--f-type); font-size: 14px; color: var(--cream-dim); }
.song p { font-size: 17px; }
.song .lf { font-size: 16px; color: var(--cream-dim); }
.song .lf b { color: var(--cream); font-weight: 600; }

.words { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.word { background: var(--paper); color: var(--ink); border-radius: 14px; padding: 18px; display: grid; gap: 6px; }
.word b { font-family: var(--f-show); font-weight: 400; font-size: 26px; color: var(--pepper); }
.word p { font-size: 16.5px; }

/* ---------- Games ---------- */
.arcade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.cab { text-decoration: none; color: var(--cream); background: var(--stage-2); border: 2px solid var(--c); border-radius: var(--radius); padding: 24px; display: grid; gap: 10px; transition: transform .15s, box-shadow .15s; }
.cab:hover { transform: translateY(-4px); box-shadow: 0 10px 0 var(--c); color: var(--cream); }
.cab .num { font-family: var(--f-type); font-size: 13px; color: var(--c); letter-spacing: .12em; }
.cab h3 { font-family: var(--f-show); font-size: 32px; color: var(--c); }
.cab p { font-size: 16.5px; color: var(--cream-dim); }
.cab .best { font-family: var(--f-type); font-size: 13px; color: var(--cream-dim); }

.players { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; }
.pcard { background: var(--stage-2); border: 2px solid var(--line); border-radius: 16px; padding: 12px 16px; display: grid; gap: 4px; min-width: 150px; flex: 1; }
.pcard.active { border-color: var(--marigold); box-shadow: 0 0 0 3px rgba(247,183,51,.25); }
.pcard input { font-family: var(--f-head); font-size: 20px; background: transparent; border: 0; border-bottom: 1px dashed var(--line); color: var(--cream); width: 100%; padding: 2px 0; }
.pcard .score { font-family: var(--f-show); font-size: 34px; color: var(--marigold); line-height: 1; font-variant-numeric: tabular-nums; }
.pcard .lbl { font-family: var(--f-type); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-dim); }

.game-shell { background: var(--stage-2); border-radius: 22px; border: 1px solid var(--line); padding: clamp(18px, 3vw, 32px); display: grid; gap: 20px; }
.game-top { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.game-top h1 { font-family: var(--f-show); font-size: clamp(34px, 5vw, 54px); }
.back { font-family: var(--f-head); font-size: 16px; text-decoration: none; }
.status { font-family: var(--f-head); font-size: 20px; min-height: 1.6em; }
.status.good { color: var(--teal); } .status.bad { color: var(--pepper); }

.q-prompt { font-family: var(--f-head); font-size: clamp(24px, 3vw, 32px); }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .opts { grid-template-columns: 1fr; } }
.opt { font-family: var(--f-body); font-size: 19px; text-align: left; padding: 16px 18px; border-radius: 14px; border: 2px solid var(--line); background: var(--stage-3); color: var(--cream); cursor: pointer; }
.opt:hover:not(:disabled) { border-color: var(--marigold); }
.opt.right { background: var(--teal); color: var(--ink); border-color: var(--teal); }
.opt.wrong { background: var(--pepper); color: var(--ink); border-color: var(--pepper); }
.opt:disabled { cursor: default; }
.explain { background: var(--paper); color: var(--ink); border-radius: 14px; padding: 14px 18px; font-size: 17px; }
.meter { height: 12px; border-radius: 6px; background: var(--stage-3); overflow: hidden; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--sky), var(--pink), var(--marigold)); width: 0; transition: width .3s; }

.mem-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 640px; margin-inline: auto; width: 100%; }
@media (max-width: 480px) { .mem-grid { gap: 7px; } }
.mcard { aspect-ratio: 1; perspective: 700px; border: 0; background: none; padding: 0; cursor: pointer; }
.mcard .in { position: relative; width: 100%; height: 100%; transition: transform .45s; transform-style: preserve-3d; }
.mcard.up .in, .mcard.done .in { transform: rotateY(180deg); }
.mcard .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 10px; overflow: hidden; }
.mcard .front { background: repeating-radial-gradient(circle, #151515 0 2px, #222 2px 4px); display: grid; place-items: center; }
.mcard .front::after { content: ""; width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--marigold); }
.mcard .back { transform: rotateY(180deg); background: var(--c, var(--pink)); display: grid; place-items: center; text-align: center; padding: 6px; color: var(--ink); font-family: var(--f-head); font-size: clamp(11px, 2.4vw, 16px); line-height: 1.1; }
.mcard .back img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mcard.done { opacity: .55; cursor: default; }

.sort-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sort-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; background: var(--stage-3); border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 18px; }
.sort-item.ok { border-color: var(--teal); } .sort-item.no { border-color: var(--pepper); }
.sort-item .yr { font-family: var(--f-type); color: var(--marigold); font-size: 15px; }
.arrows { display: flex; gap: 6px; }
.arrows button { width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--paper); color: var(--ink); font-size: 20px; cursor: pointer; font-family: var(--f-head); }
.arrows button:disabled { opacity: .3; cursor: default; }

.seq { display: grid; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
.seq-row { display: grid; grid-template-columns: 92px repeat(16, minmax(30px, 1fr)); gap: 5px; min-width: 640px; align-items: center; }
.seq-row .lab { font-family: var(--f-head); font-size: 14px; }
.step { aspect-ratio: 1; border-radius: 7px; border: 0; background: var(--stage-3); cursor: pointer; }
.step:nth-child(4n+2) { background: #3a2f4a; }
.step.on { background: var(--c); }
.step.now { outline: 3px solid var(--cream); }
.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.controls label { font-family: var(--f-type); font-size: 14px; display: inline-flex; gap: 8px; align-items: center; }

canvas.gamecv { width: 100%; max-width: 720px; aspect-ratio: 4/3; border-radius: 16px; background: #0d0a12; margin-inline: auto; display: block; touch-action: none; }

.detective-cover { width: min(320px, 80%); margin-inline: auto; }
.clues { display: grid; gap: 8px; }
.clue { background: var(--stage-3); border-radius: 12px; padding: 12px 16px; font-size: 18px; }

/* ---------- Teachers ---------- */
.lesson { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.plan { background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: 24px; display: grid; gap: 10px; align-content: start; }
.plan h3 { font-family: var(--f-show); font-size: 28px; color: var(--pepper); }
.plan .meta { font-family: var(--f-type); font-size: 14px; }
.plan ul, .plan ol { margin: 0; padding-left: 20px; font-size: 17px; display: grid; gap: 5px; }
.plan a { color: #7a3fbf; }
.note { background: var(--stage-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; font-size: 17px; display: grid; gap: 10px; max-width: 820px; }

/* ---------- Footer ---------- */
.site-foot { border-top: 1px solid var(--line); padding-block: 40px 56px; margin-top: 40px; background: var(--stage); }
.site-foot .wrap { display: grid; gap: 14px; }
.site-foot .brand { font-size: 30px; }
.site-foot p { font-size: 14px; color: var(--cream-dim); max-width: 80ch; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.foot-nav a { font-family: var(--f-head); font-size: 15px; text-decoration: none; color: var(--cream); }

/* reveal: visible at rest, gently lifts in when JS runs */
.js .rv { transition: opacity .7s ease, transform .7s ease; }
.js .rv.pre { opacity: .001; transform: translateY(24px); }
@media (prefers-reduced-motion: reduce) { .js .rv.pre { opacity: 1; transform: none; } }

.flower { position: absolute; pointer-events: none; z-index: -1; }
.stack { display: grid; gap: 18px; }
.center { text-align: center; justify-items: center; }
.muted { color: var(--cream-dim); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sleeve .slot, .member .photo .slot { height: 100%; }
.players .btn { align-self: center; flex: none; }

/* ---------- Photo-heavy additions ---------- */
.slot.opt .ph { display: none !important; }

/* film strip marquee */
.filmstrip { background: #0a080d; padding-block: 18px; overflow: hidden; position: relative;
  border-block: 14px solid #0a080d;
  background-image: radial-gradient(circle, #2b2238 0 4px, transparent 4.5px), radial-gradient(circle, #2b2238 0 4px, transparent 4.5px);
  background-size: 22px 14px, 22px 14px; background-position: 0 2px, 0 calc(100% - 2px); background-repeat: repeat-x; }
.film-track { display: flex; gap: 14px; width: max-content; animation: film 70s linear infinite; }
.filmstrip:hover .film-track { animation-play-state: paused; }
@keyframes film { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .film-track { animation: none; } .filmstrip { overflow-x: auto; } }
.frame { margin: 0; width: clamp(180px, 22vw, 280px); flex: none; display: grid; gap: 6px; }
.frame .slot { aspect-ratio: 4/3; border-radius: 4px; background: #1a1422; }
.frame img { filter: saturate(.9) contrast(1.05); }
.frame figcaption { font-family: var(--f-type); font-size: 12px; color: var(--cream-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* band hero */
.band-hero { position: relative; isolation: isolate; min-height: clamp(420px, 62vw, 680px); display: grid; align-items: end; overflow: hidden; }
.band-hero-photo { position: absolute; inset: 0; z-index: -2; }
.band-hero-photo .slot { height: 100%; }
.band-hero-photo img { object-position: 50% 30%; }
.band-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,15,28,.15) 0%, rgba(20,15,28,.35) 45%, rgba(20,15,28,.96) 100%); }
.band-hero-text { padding-block: 40px 44px; display: grid; gap: 14px; }
.band-hero-text h1 { font-family: var(--f-show); font-size: clamp(56px, 10vw, 128px); line-height: .9; text-shadow: 0 4px 30px rgba(0,0,0,.5); }
.band-hero-text > p:not(.eyebrow) { font-size: clamp(18px, 2vw, 22px); max-width: 42ch; }
.picks { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.pick { display: grid; justify-items: center; gap: 6px; text-decoration: none; color: var(--cream); }
.pick-photo { width: clamp(72px, 11vw, 104px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 4px solid var(--mc); display: block; transition: transform .2s; }
.pick-photo .slot { height: 100%; }
.pick-photo .ph-big { font-size: 20px; } .pick-photo .ph-note { display: none; }
.pick:hover .pick-photo { transform: scale(1.08) rotate(-3deg); }
.pick-name { font-family: var(--f-head); font-size: 17px; }

/* member spotlight */
.spot-m { padding-block: clamp(56px, 8vw, 100px); position: relative; isolation: isolate; overflow: hidden; }
.spot-m::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 60% at 20% 30%, color-mix(in srgb, var(--mc) 28%, transparent), transparent 70%); }
.spot-m.flip::before { background: radial-gradient(ellipse 70% 60% at 80% 30%, color-mix(in srgb, var(--mc) 28%, transparent), transparent 70%); }
.spot-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.spot-m.flip .hero-photo { order: 2; }
@media (max-width: 820px) { .spot-grid { grid-template-columns: 1fr; } .spot-m.flip .hero-photo { order: 0; } }
.hero-photo { margin: 0; position: relative; }
.hero-photo .slot { aspect-ratio: 4/5; border-radius: 22px; background: var(--mc); box-shadow: 18px 18px 0 var(--mc), 0 30px 60px rgba(0,0,0,.45); }
.spot-m.flip .hero-photo .slot { box-shadow: -18px 18px 0 var(--mc), 0 30px 60px rgba(0,0,0,.45); }
.hero-photo img { object-position: 50% 20%; }
.spot-text { display: grid; gap: 14px; }
.spot-text h2 { font-family: var(--f-show); font-size: clamp(54px, 8vw, 104px); line-height: .9; color: var(--mc); }
.spot-text h2 span { display: block; color: var(--cream); font-size: .52em; }
.spot-text .plays { font-family: var(--f-type); font-size: 15px; color: var(--cream-dim); }
.spot-text .plays2 { font-family: var(--f-head); font-size: 21px; }
.spot-text ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; font-size: 18px; }
.gal-title { font-family: var(--f-type); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--mc); margin-top: 40px; margin-bottom: 12px; }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 700px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gcell { margin: 0; display: grid; gap: 8px; }
.gcell .slot { aspect-ratio: 3/4; border-radius: 12px; background: var(--stage-3); }
.gcell img { object-position: 50% 25%; filter: grayscale(.15); transition: transform .4s, filter .4s; }
.gcell:hover img { transform: scale(1.05); filter: none; }
.gcell figcaption { font-family: var(--f-head); font-size: 16px; color: var(--cream); }

/* story photos */
.tl-photo { margin: 0 0 6px; display: grid; gap: 6px; }
.tl-photo .slot { aspect-ratio: 16/10; border-radius: 12px; background: var(--stage-3); }
.tl-photo figcaption { font-family: var(--f-type); font-size: 13px; color: var(--cream-dim); }

/* credits */
.credits-table { overflow-x: auto; background: var(--stage-2); border-radius: var(--radius); border: 1px solid var(--line); }
.credits-table table { border-collapse: collapse; width: 100%; font-size: 15px; }
.credits-table th, .credits-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.credits-table th { font-family: var(--f-type); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--marigold); }
.credits-table td:first-child { font-family: var(--f-type); white-space: nowrap; color: var(--cream-dim); }
.credits-table td a { word-break: break-word; }

/* =====================================================================
   THE FIVE ERAS — used by the Time Machine (html[data-era]) and by
   era-styled sections (.era-*) such as Story chapters and Album acts.
   ===================================================================== */
html[data-era="leather"], .era-leather {
  --stage: #16110f; --stage-2: #221a16; --stage-3: #33271f; --cream: #efe4d2; --cream-dim: #bfae96;
  --line: rgba(239,228,210,.16); --marigold: #d64533; --pink: #d64533; --teal: #c9a36b;
  --f-show: "Alfa Slab One", Rockwell, Georgia, serif; --f-head: "Alfa Slab One", Rockwell, Georgia, serif; color-scheme: dark;
}
html[data-era="mania"], .era-mania {
  --stage: #f3f1eb; --stage-2: #ffffff; --stage-3: #e4e0d6; --cream: #141414; --cream-dim: #4d4d4d;
  --line: rgba(0,0,0,.14); --marigold: #e10600; --pink: #e10600; --teal: #e10600; --sky: #e10600;
  --f-show: "Bowlby One", "Arial Black", Impact, sans-serif; --f-head: "Bowlby One", "Arial Black", Impact, sans-serif; color-scheme: light;
}
html[data-era="growing"], .era-growing {
  --stage: #2a2117; --stage-2: #372b1e; --stage-3: #473827; --cream: #f3ead4; --cream-dim: #cdbb97;
  --line: rgba(243,234,212,.15); --marigold: #e0a54a; --pink: #c9763a; --teal: #9bae5d;
  --f-show: var(--f-show); --f-head: var(--f-head); color-scheme: dark;
}
html[data-era="psychedelic"], .era-psychedelic {
  --stage: #2a0f3d; --stage-2: #3b1656; --stage-3: #4f1f70; --cream: #fff3fb; --cream-dim: #e6c9ef;
  --line: rgba(255,243,251,.18); --marigold: #ffd23f; --pink: #ff4fa0; --teal: #36d6c3;
  --f-show: "Kablammo", var(--f-show); --f-head: var(--f-head); color-scheme: dark;
}
html[data-era="basics"], .era-basics {
  --stage: #ffffff; --stage-2: #f2f2ee; --stage-3: #e5e5df; --cream: #1c1c1c; --cream-dim: #555;
  --line: rgba(0,0,0,.12); --marigold: #8cb35f; --pink: #8cb35f; --teal: #8cb35f; --sky: #8cb35f;
  --f-show: "Archivo Black", "Arial Black", sans-serif; --f-head: "Archivo Black", "Arial Black", sans-serif; color-scheme: light;
}
html[data-era="psychedelic"] body { background-image: radial-gradient(circle at 10% 10%, rgba(255,79,160,.25), transparent 40%), radial-gradient(circle at 90% 60%, rgba(54,214,195,.2), transparent 40%), radial-gradient(circle at 30% 90%, rgba(255,210,63,.18), transparent 40%); background-attachment: fixed; }
html[data-era="leather"] body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E"); }
html[data-era="mania"] .member, html[data-era="mania"] .tl-card, html[data-era="mania"] .inst, html[data-era="basics"] .tl-card { box-shadow: 0 2px 0 rgba(0,0,0,.08); }
.chapter[class*="era-"], .act[class*="era-"], .era-tile[class*="era-"] { background-color: var(--stage); color: var(--cream); }
.era-psychedelic { background-image: radial-gradient(circle at 12% 18%, rgba(255,79,160,.28), transparent 38%), radial-gradient(circle at 88% 70%, rgba(54,214,195,.22), transparent 40%), radial-gradient(circle at 40% 100%, rgba(255,210,63,.2), transparent 40%); }
.era-leather { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.1'/%3E%3C/svg%3E"); }
.chapter.era-mania, .act.era-mania { background-image: radial-gradient(circle at 92% 60px, #141414 0 40px, transparent 41px), radial-gradient(circle at 92% 60px, transparent 0 60px, rgba(225,6,0,.9) 61px 74px, transparent 75px); }

/* ---------- Time Machine ---------- */
.tm { position: relative; flex: none; }
.tm-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: var(--f-head); font-size: 14px; border: 2px solid var(--marigold); background: transparent; color: var(--cream); border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.tm-btn svg { width: 18px; height: 18px; flex: none; }
.tm-pop { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: min(330px, 92vw); background: var(--paper); color: var(--ink); border-radius: 18px; padding: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.45); display: grid; gap: 8px; }
.tm-pop h2 { font-family: var(--f-show); font-size: 24px; color: #ef4b35; }
.tm-pop p { font-size: 14px; }
.tm-opt { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; text-align: left; border: 2px solid transparent; border-radius: 12px; padding: 8px 10px; background: rgba(20,15,28,.06); cursor: pointer; font: inherit; color: inherit; }
.tm-opt:hover { border-color: var(--c); }
.tm-opt[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }
.tm-opt i { width: 34px; height: 34px; border-radius: 50%; background: var(--c); font-style: normal; color: #fff; font-family: var(--f-head); display: grid; place-items: center; }
.tm-opt b { font-family: var(--f-head); font-weight: 400; font-size: 17px; display: block; }
.tm-opt span span { font-size: 13px; opacity: .75; }
@media (max-width: 820px) { .tm { margin-left: auto; } .tm-btn .t { display: none; } }

/* ---------- Player bar (pause / stop) ---------- */
.playerbar { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 80;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  width: min(640px, calc(100vw - 24px)); background: #0d0a12; color: #fbf1dc; border: 2px solid #f7b733; border-radius: 22px; padding: 10px 12px; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.pb-disc { width: 40px; height: 40px; border-radius: 50%; flex: none; background: radial-gradient(circle, #f7b733 0 28%, #111 29% 31%, transparent 32%), repeating-radial-gradient(circle, #1b1b1b 0 2px, #2a2a2a 2px 4px); animation: spin3 1.6s linear infinite; }
.playerbar.paused .pb-disc { animation-play-state: paused; }
@keyframes spin3 { to { transform: rotate(360deg); } }
.pb-text { flex: 1; min-width: 150px; display: grid; line-height: 1.25; }
.pb-text b { font-family: var(--f-head); font-weight: 400; font-size: 17px; }
.pb-text small { font-size: 13px; color: #d9ccb4; }
.pb-text a { color: #f7b733; }
.pb-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-head); font-size: 16px; border: 0; border-radius: 999px; padding: 10px 16px; cursor: pointer; }
.pb-btn svg { width: 16px; height: 16px; }
.pb-pause { background: #fbf1dc; color: #140f1c; }
.pb-stop { background: #ef4b35; color: #fff; }
@media (prefers-reduced-motion: reduce) { .pb-disc { animation: none; } }

/* ---------- Read to me ---------- */
.rtm { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-family: var(--f-body); font-size: 13px; line-height: 1; border: 1.5px solid currentColor; background: transparent; color: inherit; opacity: .8; border-radius: 999px; padding: 6px 10px; justify-self: start; width: max-content; margin-top: 4px; }
.rtm:hover { opacity: 1; }
.rtm svg { width: 15px; height: 15px; flex: none; }
.rtm.on { background: var(--marigold); color: var(--ink); border-color: var(--marigold); opacity: 1; }

/* ---------- Passport toast + page ---------- */
.toast { position: fixed; top: calc(80px + env(safe-area-inset-top, 0px)); right: 16px; z-index: 90; display: flex; gap: 12px; align-items: center; background: #fbf1dc; color: #140f1c; text-decoration: none; border-radius: 16px; padding: 10px 16px 10px 10px; box-shadow: 0 14px 40px rgba(0,0,0,.4); animation: toastin .4s ease; max-width: calc(100vw - 32px); }
.toast:hover { color: #140f1c; }
.toast .st { width: 54px; height: 54px; flex: none; }
.toast b { font-family: var(--f-head); font-weight: 400; font-size: 17px; display: block; }
.toast small { font-size: 14px; }
@keyframes toastin { from { transform: translateY(-20px) scale(.9); opacity: 0; } }
.nav .count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 11px; background: var(--pink); color: #fff; font-size: 12px; margin-left: 5px; padding: 0 6px; font-family: var(--f-body); }

.stamp-group { display: grid; gap: 14px; }
.stamp-group h2 { font-size: clamp(26px, 3.4vw, 36px); }
.stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px; }
.stamp { display: grid; justify-items: center; gap: 6px; text-align: center; text-decoration: none; color: var(--cream); }
.st { width: 100px; height: 100px; border-radius: 50%; border: 4px dashed var(--line); display: grid; place-items: center; position: relative; color: var(--cream-dim); font-family: var(--f-head); font-size: 13px; padding: 8px; line-height: 1.1; transform: rotate(-8deg); }
.stamp.got .st { border: 5px double var(--c); color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); animation: stampin .35s ease; }
.stamp.got .st::after { content: "\2713"; position: absolute; bottom: -4px; right: -2px; width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; font-size: 16px; transform: rotate(8deg); }
.stamp .lbl { font-size: 14px; line-height: 1.25; }
@keyframes stampin { from { transform: scale(1.4) rotate(-20deg); opacity: 0; } }
.pp-meter { height: 18px; border-radius: 9px; background: var(--stage-3); overflow: hidden; }
.pp-meter i { display: block; height: 100%; background: linear-gradient(90deg, #c0392b, #e10600, #c98a3a, #ff4fa0, #5d7f3f); transition: width .4s; }
.cert { background: var(--paper); color: var(--ink); border-radius: 22px; padding: clamp(22px, 4vw, 44px); border: 10px double #c98a3a; text-align: center; display: grid; gap: 12px; justify-items: center; }
.cert h2 { font-family: var(--f-show); font-size: clamp(34px, 5vw, 56px); color: #ef4b35; }
.cert .who { font-family: var(--f-head); font-size: clamp(30px, 5vw, 50px); border-bottom: 3px solid #140f1c; min-width: 60%; }
.cert input { font: inherit; font-size: 18px; padding: 8px 12px; border-radius: 10px; border: 2px solid #c98a3a; background: #fff; color: #140f1c; }
.cert.locked { opacity: .6; filter: grayscale(.6); }
@media print { .site-head, .site-foot, .playerbar, .no-print, .toast { display: none !important; } body { background: #fff !important; } .cert { border-color: #c98a3a; } }

/* ---------- Your turn! ---------- */
.yourturn { background: var(--paper); color: var(--ink); border-radius: 20px; padding: 20px 22px; display: grid; gap: 12px; border: 3px dashed #ef4b35; max-width: 760px; }
.yourturn .yt-q-wrap { display: grid; gap: 6px; }
.yourturn .yt-h { font-family: var(--f-show); font-size: 26px; color: #ef4b35; }
.yourturn .yt-q { font-family: var(--f-head); font-size: 21px; }
.yt-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.yt-opts button { font: inherit; font-size: 17px; padding: 10px 16px; border-radius: 999px; border: 2px solid #140f1c; background: #fff; color: #140f1c; cursor: pointer; }
.yt-opts button.right { background: #22a699; border-color: #22a699; color: #fff; }
.yt-opts button.wrong { background: #ef4b35; border-color: #ef4b35; color: #fff; }
.yt-why { font-size: 17px; }
.clapalong { justify-items: center; text-align: center; margin-inline: auto; }
.clap-pad { width: 150px; height: 150px; border-radius: 50%; border: 0; background: #ef4b35; color: #fff; font-family: var(--f-show); font-size: 30px; cursor: pointer; box-shadow: 0 8px 0 #9e2a1a; }
.clap-pad:active, .clap-pad.hit { transform: translateY(6px); box-shadow: 0 2px 0 #9e2a1a; }
.clap-beat { display: flex; gap: 8px; }
.clap-beat i { width: 22px; height: 22px; border-radius: 50%; background: #d9ccb4; transition: transform .1s; }
.clap-beat i.now { background: #f7b733; transform: scale(1.3); }

/* ---------- Home faces ---------- */
.faces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 440px; justify-self: center; width: 100%; }
.face { text-decoration: none; color: var(--ink); background: var(--paper); padding: 10px 10px 12px; border-radius: 6px; box-shadow: 0 14px 30px rgba(0,0,0,.4); display: grid; gap: 8px; transition: transform .2s; }
.face:nth-child(1) { transform: rotate(-4deg); } .face:nth-child(2) { transform: rotate(3deg); } .face:nth-child(3) { transform: rotate(2deg); } .face:nth-child(4) { transform: rotate(-3deg); }
.face:hover { transform: rotate(0) scale(1.05); color: var(--ink); z-index: 2; }
.face .slot { aspect-ratio: 1; background: var(--mc); }
.face .ph-note { display: none; }
.face img { object-position: 50% 20%; }
.face b { font-family: var(--f-show); font-weight: 400; font-size: 24px; color: #140f1c; text-align: center; }
.era-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .era-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.era-tile { text-decoration: none; border-radius: 18px; padding: 20px; display: grid; gap: 6px; min-height: 170px; align-content: end; border: 1px solid var(--line); transition: transform .2s; }
.era-tile:hover { transform: translateY(-4px); color: var(--cream); }
.era-tile .n { font-family: var(--f-type); font-size: 13px; letter-spacing: .12em; opacity: .8; }
.era-tile h3 { font-family: var(--f-show); font-size: 26px; line-height: 1; color: var(--marigold); }
.era-tile p { font-size: 15px; color: var(--cream-dim); }

/* ---------- Story chapters ---------- */
.chapter { padding-block: clamp(56px, 8vw, 100px); }
.chap-head { display: grid; gap: 12px; margin-bottom: 30px; max-width: 820px; }
.chap-head .eyebrow { color: var(--marigold); }
.chap-head h2 { font-family: var(--f-show); font-size: clamp(44px, 7vw, 92px); line-height: .95; color: var(--cream); }
.chap-head .look { font-size: 20px; color: var(--cream-dim); max-width: 50ch; }
.era-faces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 36px; }
@media (max-width: 640px) { .era-faces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.era-faces figure { margin: 0; display: grid; gap: 6px; }
.era-faces .slot { aspect-ratio: 3/4; border-radius: 12px; background: var(--stage-3); }
.era-faces img { object-position: 50% 22%; }
.era-faces figcaption { font-family: var(--f-head); font-size: 16px; }
.era-leather .era-faces img { filter: grayscale(1) contrast(1.15); }
.era-mania .era-faces .slot { border: 6px solid #141414; border-radius: 4px; }
.era-psychedelic .era-faces .slot { border-radius: 50% 50% 18px 18px; box-shadow: 0 0 0 4px #ffd23f, 0 0 0 8px #ff4fa0; }
.era-basics .era-faces .slot { border-radius: 0; }
.era-note { background: var(--stage-2); border: 2px dashed var(--line); border-radius: 14px; padding: 18px; font-size: 17px; color: var(--cream-dim); display: grid; place-items: center; text-align: center; aspect-ratio: 3/4; }
.chapter .tl::before { background: var(--marigold); }
.chapter .tl-card { background: var(--stage-2); }

/* ---------- Album acts + shorter rooms ---------- */
.act { padding-block: clamp(60px, 9vw, 110px); text-align: center; }
.act .wrap { display: grid; gap: 14px; justify-items: center; }
.act .n { font-family: var(--f-type); letter-spacing: .2em; text-transform: uppercase; color: var(--marigold); }
.act h2 { font-family: var(--f-show); font-size: clamp(50px, 9vw, 120px); line-height: .92; }
.act p.look { font-size: 20px; color: var(--cream-dim); max-width: 44ch; }
.act .act-albums { font-family: var(--f-type); font-size: 15px; color: var(--cream-dim); }
details.more { background: var(--card-bg, rgba(0,0,0,.25)); border-radius: 14px; }
details.more summary { cursor: pointer; list-style: none; font-family: var(--f-head); font-size: 18px; padding: 14px 18px; display: flex; align-items: center; gap: 10px; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::before { content: "+"; width: 28px; height: 28px; border-radius: 50%; background: var(--room-accent); color: var(--room-bg); display: grid; place-items: center; font-size: 20px; line-height: 1; flex: none; }
details.more[open] summary::before { content: "\2212"; }
details.more .facts { padding: 0 12px 14px; }
details.more .fact { background: rgba(0,0,0,.12); }
.funbig { font-size: clamp(19px, 2vw, 22px); line-height: 1.5; background: var(--card-bg, rgba(0,0,0,.25)); border-radius: 16px; padding: 18px 20px; display: grid; gap: 6px; }
.funbig h3 { font-family: var(--f-type); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.listen .real-btn { color: var(--room-fg); border-color: currentColor; }
.listen .real-btn:hover { background: var(--room-fg); color: var(--room-bg); }

/* ---------- Music: real snippets ---------- */
.real-btn { justify-self: start; display: inline-flex; gap: 8px; align-items: center; cursor: pointer; font-family: var(--f-head); font-size: 15px; border: 2px solid var(--marigold); border-radius: 999px; padding: 8px 14px; background: transparent; color: var(--cream); text-align: left; }
.real-btn:hover { background: var(--marigold); color: var(--ink); }
.real-btn svg { width: 14px; height: 14px; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inst .lf { font-size: 15px; color: var(--cream-dim); }
.inst .lf b { color: var(--cream); font-weight: 600; }

/* ---------- Band era gallery ---------- */
.gallery.eras { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1000px) { .gallery.eras { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gallery.eras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gcell .era-lbl { display: grid; gap: 0; }
.gcell .era-lbl b { font-family: var(--f-head); font-weight: 400; font-size: 15px; color: var(--ec); }
.gcell .era-lbl span { font-family: var(--f-type); font-size: 12px; color: var(--cream-dim); }
.gcell .slot { border-top: 6px solid var(--ec); }
.gcell .era-note { aspect-ratio: 3/4; font-size: 14px; padding: 12px; border-top: 6px solid var(--ec); border-radius: 12px; }

html[data-era="mania"] .lightshow, html[data-era="basics"] .lightshow { opacity: .22 !important; }
html[data-era="mania"] .hero::after, html[data-era="basics"] .hero::after { background: radial-gradient(ellipse at 30% 50%, color-mix(in srgb, var(--stage) 70%, transparent), transparent 80%); }
.nav a { font-size: 15px; padding: 8px 10px; }
@media (min-width: 821px) and (max-width: 1240px) { .site-head .wrap { gap: 10px; } .brand { font-size: 22px; } .tm-btn .t, .sound-btn .t { display: none; } }

/* =====================================================================
   KID-FIRST REBUILD
   ===================================================================== */
/* header */
.kidnav { justify-content: flex-end; gap: 6px; }
.kidnav a { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-head); font-size: 17px; padding: 9px 14px; border-radius: 999px; color: var(--cream); background: var(--stage-3); }
.kidnav a svg { width: 20px; height: 20px; }
.kidnav a[aria-current="page"] { background: var(--marigold); color: var(--ink); }
.stop-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: var(--f-head); font-size: 16px; border: 0; background: #ef4b35; color: #fff; border-radius: 999px; padding: 9px 16px; }
.stop-btn svg { width: 14px; height: 14px; }
@media (max-width: 820px) { .kidnav { order: 3; flex-basis: 100%; } .kidnav a { flex: 1; justify-content: center; } .stop-btn { margin-left: auto; } .sound-btn .t { display: none; } }

/* page top bar */
.topbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: 22px 8px; }
.homebtn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--f-head); font-size: 18px; color: var(--ink); background: var(--marigold); padding: 10px 18px; border-radius: 999px; box-shadow: 0 4px 0 #b37d0f; }
.homebtn svg { width: 22px; height: 22px; }
.homebtn:hover { color: var(--ink); transform: translateY(-2px); }
.pagetitle { font-family: var(--f-show); font-size: clamp(38px, 6vw, 72px); color: var(--tc); line-height: 1; }
.lead { font-size: clamp(19px, 2.2vw, 23px); margin-bottom: 20px; max-width: 46ch; }
.sec-h { font-family: var(--f-show); font-size: clamp(30px, 4vw, 44px); margin-bottom: 8px; }
.hub-h { font-family: var(--f-show); font-size: clamp(30px, 4.5vw, 52px); margin-bottom: 22px; }

/* pop-art photos */
.pop { background: var(--mc, #f7b733); position: relative; }
.pop img { filter: grayscale(1) contrast(1.35) brightness(1.08); mix-blend-mode: multiply; }
.pop::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(0,0,0,.18) 1.2px, transparent 1.6px); background-size: 7px 7px; mix-blend-mode: multiply; }
.slot.contain img { object-fit: contain; background: #0d0a12; }

/* HUB */
.hub-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: 26px 40px; }
.hub-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,15,28,.2), rgba(20,15,28,.85)); }
.hub-top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.hello h1 { font-family: var(--f-show); font-size: clamp(44px, 8vw, 96px); line-height: .95; }
.streak { font-family: var(--f-head); font-size: 20px; margin-top: 8px; }
.streak b { font-family: var(--f-show); font-weight: 400; color: var(--marigold); font-size: 30px; }
.streak span { color: var(--cream-dim); font-size: 16px; }
.faces-mini { display: flex; gap: 10px; }
.fmini { display: grid; gap: 4px; justify-items: center; text-decoration: none; color: var(--cream); font-family: var(--f-head); font-size: 15px; }
.fmini .slot { width: clamp(64px, 9vw, 96px); aspect-ratio: 1; border-radius: 50%; border: 4px solid var(--mc); transition: transform .2s; }
.fmini img { object-position: 50% 20%; }
.fmini:hover .slot { transform: scale(1.1) rotate(-4deg); }
.today { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .today { grid-template-columns: 1fr; } }
.todaycard { background: var(--paper); color: var(--ink); border-radius: 22px; padding: 20px 22px; display: grid; gap: 12px; align-content: start; box-shadow: 0 14px 34px rgba(0,0,0,.35); }
.tc-label { font-family: var(--f-type); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: #ef4b35; }
.sd-title { font-family: var(--f-show); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.05; }
.sd-q { font-family: var(--f-head); font-size: 20px; }
.sd-why { font-size: 17px; }
.bigplay { justify-self: start; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--f-head); font-size: 19px; border: 0; border-radius: 999px; padding: 13px 22px; background: #22a699; color: #fff; box-shadow: 0 4px 0 #147a70; }
.bigplay svg { width: 18px; height: 18px; }
.bigplay:hover { transform: translateY(-2px); }
.cardday { justify-items: center; text-align: center; }
.cd-pack { width: 130px; aspect-ratio: 5/7; border-radius: 12px; display: grid; place-items: center; background: repeating-linear-gradient(45deg, #ef4b35 0 12px, #f7b733 12px 24px); box-shadow: 0 10px 20px rgba(0,0,0,.3); animation: wiggle 2.4s ease-in-out infinite; }
.cd-pack span { font-family: var(--f-show); font-size: 20px; background: #fbf1dc; color: #140f1c; padding: 4px 10px; border-radius: 8px; transform: rotate(-8deg); }
.cd-pack b { color: #ef4b35; font-weight: 400; }
.cardday.done .cd-pack { animation: none; opacity: .5; }
@keyframes wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-5deg); } 90% { transform: rotate(5deg); } 95% { transform: rotate(-3deg); } }
.small-link { font-size: 15px; color: #7a3fbf; }
.fd-text { font-family: var(--f-head); font-size: 21px; line-height: 1.35; }
.hub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .hub { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .hub { gap: 12px; } }
.hubtile { display: grid; text-decoration: none; color: var(--ink); background: var(--c); border-radius: 26px; overflow: hidden; box-shadow: 0 8px 0 color-mix(in srgb, var(--c) 60%, #000); transition: transform .18s; }
.hubtile:hover { transform: translateY(-5px) rotate(-.8deg); color: var(--ink); }
.hubtile:active { transform: translateY(3px); }
.hubpic { aspect-ratio: 4/3; position: relative; overflow: hidden; background: color-mix(in srgb, var(--c) 70%, #000); }
.hubpic .slot { width: 100%; height: 100%; }
.hubpic img { object-position: 50% 30%; }
.hubtile b { font-family: var(--f-show); font-weight: 400; font-size: clamp(22px, 3vw, 34px); padding: 12px 18px 16px; line-height: 1.05; }
.tile-art { width: 100%; height: 100%; display: grid; place-items: center; }
.covers4 { grid-template-columns: 1fr 1fr; gap: 4px; padding: 10px; }
.covers4 .slot { aspect-ratio: 1; border-radius: 4px; background: rgba(0,0,0,.2); }
.tm-art { grid-template-columns: repeat(4, 1fr); gap: 0; background: linear-gradient(90deg, #d64533, #e10600 25%, #c98a3a 50%, #ff4fa0 70%, #5d7f3f); }
.tm-art span { font-family: var(--f-head); color: #fff; font-size: clamp(14px, 2vw, 22px); writing-mode: vertical-rl; transform: rotate(180deg); }
.studio-art, .arcade-art { grid-auto-flow: column; gap: 8px; }
.studio-art .ic, .arcade-art .ic { width: clamp(50px, 8vw, 90px); height: auto; }
.arcade-art b { font-family: var(--f-show); font-weight: 400; font-size: clamp(44px, 7vw, 80px); color: #140f1c; }
.arcade-art span { font-family: var(--f-head); font-size: 20px; color: #140f1c; }

/* BAND picker + decks */
.bpicker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .bpicker { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bpick { display: grid; gap: 4px; text-align: left; cursor: pointer; border: 4px solid transparent; border-radius: 20px; padding: 0 0 12px; background: var(--stage-2); color: var(--cream); overflow: hidden; transition: transform .15s; font: inherit; }
.bpick .slot { aspect-ratio: 1; }
.bpick img { object-position: 50% 20%; }
.bpick b { font-family: var(--f-show); font-weight: 400; font-size: clamp(24px, 3vw, 34px); color: var(--mc); padding: 6px 14px 0; line-height: 1; }
.bpick span { font-size: 14px; color: var(--cream-dim); padding: 0 14px; }
.bpick:hover { transform: translateY(-4px); }
.bpick[aria-pressed="true"] { border-color: var(--mc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mc) 35%, transparent); }
.mdeck { padding-block: 10px 20px; }
.deck { position: relative; outline: none; }
.deck-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 6px; scrollbar-width: none; }
.deck-track::-webkit-scrollbar { display: none; }
.dcard { flex: 0 0 min(560px, 88%); scroll-snap-align: start; background: var(--paper); color: var(--ink); border-radius: 26px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; border: 6px solid var(--mc); min-height: 440px; }
.dc-pic { margin: 0; aspect-ratio: 4/3; background: var(--mc); position: relative; }
.dc-pic .slot { width: 100%; height: 100%; }
.dc-pic img { object-position: 50% 22%; }
.dcard.hello .dc-pic, .dcard.era .dc-pic { aspect-ratio: 1/1; max-height: 380px; width: 100%; }
.dc-body { padding: 18px 22px 22px; display: grid; gap: 10px; align-content: start; }
.dc-body.big { align-content: center; justify-items: start; min-height: 100%; background: radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--mc) 30%, transparent), transparent 60%); }
.dc-body h2 { font-family: var(--f-show); font-weight: 400; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.05; }
.dc-kicker { font-family: var(--f-type); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: #ef4b35; }
.dc-fact { font-family: var(--f-head); font-size: clamp(24px, 3vw, 32px); line-height: 1.25; }
.dcard .muted { color: #5b5147; }
.dcard .play-btn { color: #140f1c; }
.dcard .yourturn { border: 0; padding: 0; background: transparent; }
.dcard.dfact, .dcard.song, .dcard.nextm, .dcard.quiz { grid-template-rows: 1fr; }
.deck-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.deck-prev, .deck-next { width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--marigold); color: var(--ink); cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 0 #b37d0f; }
.deck-prev svg, .deck-next svg { width: 28px; height: 28px; }
.deck-prev:disabled, .deck-next:disabled { opacity: .3; cursor: default; }
.deck-dots { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 60%; }
.deck-dots button { width: 14px; height: 14px; border-radius: 50%; border: 0; background: var(--stage-3); cursor: pointer; padding: 0; }
.deck-dots button[aria-current="true"] { background: var(--marigold); transform: scale(1.3); }

/* TIME MACHINE */
.tm-scene { transition: background-color .6s; }
.tm-stop { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; min-height: 420px; animation: tmin .45s ease; }
@media (max-width: 820px) { .tm-stop { grid-template-columns: 1fr; } }
@keyframes tmin { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.tm-pic { margin: 0; }
.tm-pic .slot { aspect-ratio: 4/3; border-radius: 22px; background: var(--stage-3); box-shadow: 14px 14px 0 var(--marigold), 0 24px 50px rgba(0,0,0,.4); }
.tm-pic img { object-position: 50% 30%; }
.tm-info { display: grid; gap: 12px; }
.tm-year { font-family: var(--f-show); font-size: clamp(70px, 12vw, 150px); line-height: .85; color: var(--marigold); }
.erachip { justify-self: start; font-family: var(--f-head); font-size: 16px; background: var(--c); color: #fff; padding: 6px 14px; border-radius: 999px; }
.tm-info h2 { font-family: var(--f-show); font-size: clamp(28px, 3.6vw, 42px); line-height: 1.05; }
.tm-text { font-size: clamp(18px, 2vw, 21px); }
.tm-wow { font-family: var(--f-type); font-size: 16px; background: var(--stage-2); border-radius: 10px; padding: 10px 14px; }
.tm-controls { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin-top: 28px; }
.tm-arrow { width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--marigold); color: var(--ink); cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 0 rgba(0,0,0,.3); }
.tm-arrow svg { width: 30px; height: 30px; }
.tm-arrow:disabled { opacity: .3; }
.tm-slider { display: grid; gap: 8px; }
.tm-slider input { width: 100%; accent-color: var(--marigold); height: 34px; cursor: pointer; }
.tm-ticks { display: flex; justify-content: space-between; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.tm-ticks button { font-family: var(--f-type); font-size: 13px; background: none; border: 0; color: var(--cream-dim); cursor: pointer; padding: 4px 2px; border-radius: 6px; }
.tm-ticks button.on { color: var(--ink); background: var(--marigold); }
@media (max-width: 640px) { .tm-ticks button:nth-child(even) { display: none; } .tm-arrow { width: 52px; height: 52px; } }

/* STUDIO */
.tablist { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.tablist [role="tab"] { font-family: var(--f-head); font-size: 18px; padding: 12px 20px; border-radius: 999px; border: 3px solid var(--line); background: var(--stage-2); color: var(--cream); cursor: pointer; }
.tablist [role="tab"][aria-selected="true"] { background: #22a699; border-color: #22a699; color: #fff; }
.jam-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 820px) { .jam-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jam-card { background: var(--stage-2); border: 4px solid var(--line); border-radius: 22px; padding: 12px; display: grid; gap: 6px; justify-items: center; text-align: center; transition: border-color .2s; }
.jam-card.live { border-color: var(--mc); }
.jam-card.beat .jam-face { transform: scale(1.06); }
.jam-face { width: 100%; transition: transform .1s; }
.jam-face .slot { aspect-ratio: 1; border-radius: 16px; }
.jam-face img { object-position: 50% 20%; }
.jam-card:not(.live) .jam-face { filter: grayscale(1) opacity(.5); }
.jam-card b { font-family: var(--f-show); font-weight: 400; font-size: 26px; color: var(--mc); }
.jam-card > span { font-size: 14px; color: var(--cream-dim); }
.jam-pats { display: grid; gap: 6px; width: 100%; }
.jam-pats button { font-family: var(--f-head); font-size: 16px; padding: 10px; border-radius: 12px; border: 2px solid var(--line); background: var(--stage-3); color: var(--cream); cursor: pointer; }
.jam-pats button[aria-pressed="true"] { background: var(--mc); border-color: var(--mc); color: #140f1c; }
#jamplay.on { background: #ef4b35; color: #fff; box-shadow: 0 4px 0 #9e2a1a; }
.itiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.itile { background: var(--stage-2); border-radius: 20px; padding: 14px; display: grid; gap: 6px; justify-items: center; text-align: center; }
.itile-play { width: 110px; height: 110px; border-radius: 50%; border: 0; background: var(--marigold); cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 0 #b37d0f; transition: transform .1s; }
.itile-play:active, .itile-play.hit { transform: translateY(4px) scale(.97); box-shadow: 0 2px 0 #b37d0f; }
.itile-play .icon { width: 64px; height: 64px; }
.itile b { font-family: var(--f-head); font-size: 19px; }
.itile > span { font-size: 14px; color: var(--cream-dim); }
.itile .real-btn { font-size: 13px; justify-self: center; }

/* ICONIC MOMENTS */
.moments { columns: 3 280px; column-gap: 16px; }
.moment { break-inside: avoid; margin: 0 0 16px; background: var(--stage-2); border-radius: 18px; overflow: hidden; border: 3px solid transparent; }
.moment.open { border-color: var(--marigold); }
.moment-btn { display: grid; width: 100%; border: 0; padding: 0; background: none; color: var(--cream); cursor: pointer; text-align: left; font: inherit; position: relative; }
.moment-btn .slot { aspect-ratio: 4/3; background: #0d0a12; }
.moment:nth-child(3n+1) .moment-btn .slot { aspect-ratio: 1; }
.moment-btn .slot img { transition: transform .4s; }
.moment-btn:hover .slot img { transform: scale(1.04); }
.m-year { position: absolute; top: 10px; left: 10px; font-family: var(--f-show); font-size: 22px; background: var(--marigold); color: var(--ink); padding: 2px 12px; border-radius: 999px; }
.m-title { font-family: var(--f-head); font-size: 21px; padding: 12px 16px; }
.moment-more { padding: 0 16px 16px; display: grid; gap: 8px; font-size: 17px; }
.moment[hidden] { display: none; }

/* ALBUM shelf */
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
.shelf-item { display: grid; gap: 6px; text-decoration: none; color: var(--cream); font-size: 14px; line-height: 1.2; }
.shelf-item .slot { aspect-ratio: 1; border-radius: 6px; background: var(--stage-3); box-shadow: 0 8px 18px rgba(0,0,0,.4); transition: transform .2s; }
.shelf-item .ph { display: none !important; }
.shelf-item:hover .slot { transform: translateY(-6px) rotate(-2deg); }

/* NEXT tiles */
.nexttiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 10px; }
@media (max-width: 700px) { .nexttiles { grid-template-columns: 1fr; } }
.nexttile { text-decoration: none; background: var(--c); color: var(--ink); border-radius: 20px; padding: 18px 20px; display: grid; gap: 2px; box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 60%, #000); transition: transform .15s; }
.nexttile:hover { transform: translateY(-4px); color: var(--ink); }
.nexttile span { font-family: var(--f-type); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.nexttile b { font-family: var(--f-show); font-weight: 400; font-size: 26px; line-height: 1.05; }

/* TRADING CARDS */
.tcard { position: relative; background: #fffaf0; color: #140f1c; border-radius: 16px; border: 6px solid var(--c); overflow: hidden; display: grid; grid-template-rows: auto 1fr; aspect-ratio: 5/7; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.tcard.gold { border-color: #e8b923; box-shadow: 0 0 0 3px var(--c), 0 10px 24px rgba(0,0,0,.35); }
.tc-img { aspect-ratio: 1; position: relative; overflow: hidden; background: var(--c); display: grid; place-items: center; }
.tc-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.tc-img.tc-noimg img { display: none; }
.tc-art svg { width: 60%; height: 60%; }
.tc-big { font-family: var(--f-show); font-size: 90px; color: #fff; line-height: 1; }
.tc-body { padding: 8px 10px 10px; display: grid; gap: 2px; align-content: start; }
.tc-kind { font-family: var(--f-type); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #7a6a5a; }
.tc-body b { font-family: var(--f-head); font-weight: 400; font-size: 17px; line-height: 1.1; }
.tc-body p { font-size: 12px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tc-rar { position: absolute; top: 6px; right: 8px; font-size: 14px; color: #e8b923; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.tcard.locked { filter: grayscale(1); opacity: .45; }
.tcard.locked .tc-img img, .tcard.locked .tc-img svg, .tcard.locked .tc-big { visibility: hidden; }
.tcard.locked .tc-img::after { content: "?"; font-family: var(--f-show); font-size: 80px; color: #fff; }
.tcard[data-x]::before { content: attr(data-x); position: absolute; top: 6px; left: 8px; z-index: 2; background: #ef4b35; color: #fff; font-family: var(--f-head); font-size: 13px; padding: 2px 8px; border-radius: 999px; }
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-top: 14px; }
.pack-ov { position: fixed; inset: 0; z-index: 100; background: rgba(10,8,14,.82); display: grid; place-items: center; padding: 16px; }
.pack { display: grid; gap: 14px; justify-items: center; text-align: center; color: #fbf1dc; width: min(340px, 100%); }
.pack-why { font-family: var(--f-head); font-size: 20px; }
.pack-flip { width: min(260px, 70vw); aspect-ratio: 5/7; position: relative; perspective: 900px; }
.pack-back, .pack-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.pack-back { border-radius: 16px; display: grid; place-items: center; background: repeating-linear-gradient(45deg, #ef4b35 0 14px, #f7b733 14px 28px); }
.pack-back span { font-family: var(--f-show); font-size: 28px; background: #fbf1dc; color: #140f1c; padding: 6px 12px; border-radius: 10px; transform: rotate(-8deg); }
.pack-back b { color: #ef4b35; font-weight: 400; }
.pack-front { transform: rotateY(180deg); }
.pack-front .tcard { height: 100%; }
.pack-flip.open .pack-back { transform: rotateY(-180deg); }
.pack-flip.open .pack-front { transform: rotateY(0); }
.pack-new { font-family: var(--f-show); font-size: 26px; color: #f7b733; }
.pack-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 101; }
@media (prefers-reduced-motion: reduce) { .pack-back, .pack-front { transition: none; } .cd-pack { animation: none; } }

/* COLLECTION */
.colstats { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; background: var(--stage-2); border-radius: 20px; padding: 18px 22px; }
.colstats b { font-family: var(--f-show); font-weight: 400; font-size: 30px; color: var(--marigold); display: block; margin-bottom: 8px; }
.streakbox { text-align: center; }
.streakbox span { font-family: var(--f-type); font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--cream-dim); }
.mycovers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-top: 10px; }
.mycover { margin: 0; }
.mycover img { border-radius: 6px; box-shadow: 0 10px 22px rgba(0,0,0,.4); aspect-ratio: 1; object-fit: cover; width: 100%; }
.stamp-group h3 { font-family: var(--f-head); font-size: 22px; margin-top: 10px; }
.stamps { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.st { width: 84px; height: 84px; font-size: 12px; }
.ytbox { position: fixed; z-index: 79; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); width: min(400px, calc(100vw - 32px)); aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; border: 3px solid #f7b733; box-shadow: 0 20px 50px rgba(0,0,0,.55); background: #000; }
.ytbox iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 640px) { .ytbox { left: 16px; right: 16px; width: auto; bottom: calc(150px + env(safe-area-inset-bottom, 0px)); } }
.itile-song { font-size: 14px; color: var(--cream-dim); }
.itile-song b { color: var(--marigold); font-weight: 600; font-size: 14px; }
.dcard .bigplay { max-width: 100%; text-align: left; }

/* ---------- Anchored navigation ---------- */
.brand { display: grid; line-height: 1; }
.brand small { font-family: var(--f-type); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-dim); margin-top: 4px; }
.head-spacer { flex: 1; }
.site-head .wrap { flex-wrap: nowrap; }
.secnav { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--stage) 94%, transparent); }
.secnav-in { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-block: 8px; justify-content: space-between; }
.secnav-in::-webkit-scrollbar { display: none; }
.kidnav.secnav a { flex: 1 0 auto; display: grid; justify-items: center; gap: 4px; padding: 6px 8px 8px; border-radius: 16px; background: transparent; color: var(--cream); text-decoration: none; font-family: var(--f-head); font-size: 15px; min-width: 76px; }
.secnav .si { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--c); transition: transform .15s; }
.secnav .si svg { width: 26px; height: 26px; }
.kidnav.secnav a:hover .si { transform: scale(1.1) rotate(-6deg); }
.kidnav.secnav a[aria-current="page"] { background: var(--c); color: #140f1c; }
.kidnav.secnav a[aria-current="page"] .si { background: #140f1c; color: var(--c); }
.secnav .count { position: absolute; margin-left: 26px; margin-top: -4px; }
.secnav a { position: relative; }
@media (max-width: 820px) {
  .site-head .wrap { flex-wrap: nowrap; padding-block: 6px; }
  .brand { font-size: 22px; } .brand small { font-size: 10px; }
  .secnav-in { justify-content: flex-start; padding-block: 6px; }
  .kidnav.secnav a { min-width: 68px; font-size: 13px; padding: 4px 6px 6px; flex: 0 0 auto; }
  .secnav .si { width: 38px; height: 38px; } .secnav .si svg { width: 22px; height: 22px; }
}

/* ---------- Home masthead ---------- */
.masthead { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(300px, 42vw, 460px); display: grid; align-items: end; }
.mast-photo { position: absolute; inset: 0; z-index: -2; }
.mast-photo .slot { height: 100%; background: #2b2238; }
.mast-photo img { object-position: 50% 35%; }
.masthead::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20,15,28,.92) 0%, rgba(20,15,28,.7) 45%, rgba(20,15,28,.2) 100%), linear-gradient(0deg, rgba(20,15,28,1) 0%, transparent 40%); }
.mast-in { display: grid; gap: 12px; padding-block: 40px 30px; }
.mast-in h1 { font-family: var(--f-show); font-size: clamp(44px, 7.5vw, 96px); line-height: .95; max-width: 12ch; }
.mast-in h1 span { color: var(--marigold); display: block; }
.mast-sub { font-size: clamp(18px, 2vw, 22px); max-width: 40ch; }
.mast-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 6px; }
.home-map { padding-top: 26px; }
.home-today { padding-top: 0; }
.faces4 .slot { border-radius: 8px; }
.faces4 img { object-position: 50% 20%; }
@media (max-width: 820px) { .site-head .wrap { gap: 8px; } .stop-btn { padding: 8px 12px; font-size: 15px; margin-left: 0; } .sound-btn { padding: 7px 10px; } .brand { min-width: 0; } .brand small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
.kidnav.secnav { margin: 0; order: 0; flex-basis: auto; }
.brand { display: inline-block; white-space: nowrap; }
.brand small { display: block; }
.topbar .homebtn { display: none; }
.topbar { padding-block: 18px 4px; }

/* ---------- Fab Four Mixtape ---------- */
.tape { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; background: repeating-linear-gradient(90deg, #2b2238 0 2px, transparent 2px 14px), #1a1422; border: 4px solid #3a2f4a; border-radius: 24px; padding: 14px; }
@media (max-width: 860px) { .tape { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mix-slot { position: relative; background: var(--stage-2); border: 4px solid var(--line); border-radius: 18px; padding: 10px; display: grid; gap: 8px; justify-items: center; text-align: center; transition: transform .2s, border-color .2s, box-shadow .2s; }
.mix-slot.on { border-color: var(--mc); transform: translateY(-6px) scale(1.03); box-shadow: 0 0 0 6px color-mix(in srgb, var(--mc) 30%, transparent), 0 16px 30px rgba(0,0,0,.5); }
.mix-slot.done { opacity: .6; }
.mix-num { position: absolute; top: -12px; left: -8px; width: 34px; height: 34px; border-radius: 50%; background: var(--mc); color: #140f1c; display: grid; place-items: center; font-family: var(--f-show); font-size: 18px; z-index: 2; }
.mix-face { width: 100%; aspect-ratio: 1; border-radius: 14px; overflow: hidden; }
.mix-face img { object-position: 50% 20%; }
.mix-slot.on .mix-face { animation: bob .6s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-4px) rotate(2deg); } }
.mix-slot b { font-family: var(--f-show); font-weight: 400; font-size: 26px; color: var(--mc); line-height: 1; }
.mix-opts { display: grid; gap: 6px; width: 100%; }
.mix-opts button { display: grid; gap: 1px; text-align: left; font: inherit; padding: 8px 10px; border-radius: 12px; border: 2px solid var(--line); background: var(--stage-3); color: var(--cream); cursor: pointer; }
.mix-opts button span { font-family: var(--f-head); font-size: 15px; line-height: 1.15; }
.mix-opts button small { font-size: 12px; color: var(--cream-dim); }
.mix-opts button[aria-checked="true"] { background: var(--mc); border-color: var(--mc); color: #140f1c; }
.mix-opts button[aria-checked="true"] small { color: #140f1c; }
.mix-move { display: flex; gap: 8px; }
.mix-move button { width: 40px; height: 36px; border-radius: 10px; border: 0; background: var(--paper); color: #140f1c; cursor: pointer; font-size: 14px; }
.mix-move button:disabled { opacity: .25; cursor: default; }
.mix-controls { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 20px; }
#mixplay.on { background: #ef4b35; color: #fff; box-shadow: 0 4px 0 #9e2a1a; }
.mix-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: center; margin-top: 22px; }
@media (max-width: 760px) { .mix-stage { grid-template-columns: 1fr; } }
.mix-video { aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; background: #000; border: 3px solid #22a699; }
.mix-video iframe, #mixplayer { width: 100%; height: 100%; border: 0; display: block; }
.mix-now { font-family: var(--f-head); font-size: clamp(20px, 2.4vw, 28px); display: grid; gap: 4px; }
.mix-now small { font-family: var(--f-body); font-size: 17px; color: var(--cream-dim); }
.mn-num { font-family: var(--f-type); font-size: 14px; color: var(--cream-dim); }
.mix-msg { text-align: center; margin-top: 14px; color: var(--cream-dim); }
.mix-slot { align-content: start; } .mix-move { margin-top: auto; }

/* =====================================================================
   FRIENDLY LIGHT THEME (default look)
   ===================================================================== */
:root {
  --stage: #fff8ee; --stage-2: #ffffff; --stage-3: #f4eee4; --cream: #231c33; --cream-dim: #5d566e;
  --line: rgba(35,28,51,.12); --paper: #ffffff; --ink: #231c33;
  --marigold: #ffb703; --pink: #ff5d8f; --teal: #1aa39a; --sky: #3fa7e8; --lilac: #9b7be0; --pepper: #f0513c;
  --f-show: "Fredoka", "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif;
  --f-head: "Fredoka", "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif;
  --f-type: "Fredoka", "Nunito", system-ui, sans-serif;
  --shadow: 0 2px 0 rgba(35,28,51,.06), 0 10px 24px rgba(35,28,51,.08);
  --radius: 22px;
  color-scheme: light;
}
body { background: var(--stage); color: var(--cream); font-size: 19px; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -.01em; }
.eyebrow, .tc-label, .dc-kicker, .gal-title, .chip, .tc-kind, .n { letter-spacing: .06em !important; font-weight: 600; }
a { color: #1a73c9; }
.site-head { background: rgba(255,255,255,.92); border-bottom: 0; box-shadow: 0 2px 14px rgba(35,28,51,.08); }
.brand { font-family: "Shrikhand", Georgia, serif; color: #231c33; }
.brand b { color: #f0513c; }
.brand small { font-family: var(--f-head); font-weight: 500; letter-spacing: .08em; }
.secnav { background: #fff; border-top: 1px solid var(--line); }
.kidnav.secnav a { color: #231c33; font-weight: 500; }
.secnav .si { background: color-mix(in srgb, var(--c) 28%, #fff); color: color-mix(in srgb, var(--c) 70%, #231c33); }
.kidnav.secnav a[aria-current="page"] { background: color-mix(in srgb, var(--c) 30%, #fff); color: #231c33; box-shadow: inset 0 0 0 2px var(--c); }
.kidnav.secnav a[aria-current="page"] .si { background: var(--c); color: #231c33; }
.stop-btn { background: #f0513c; font-weight: 600; }
.sound-btn { background: #fff; color: #231c33; border-color: var(--line); }
.sound-btn[aria-pressed="true"] { background: #e3f6f4; color: #0f6f68; border-color: #1aa39a; }
.nav .count, .secnav .count { background: #ff5d8f; }

/* headings & text */
.pagetitle { font-weight: 700; color: color-mix(in srgb, var(--tc) 75%, #231c33); }
.hub-h, .sec-h { font-weight: 700; }
.lead { color: var(--cream-dim); }
.btn { font-weight: 600; color: #231c33; }
.btn.alt { color: #231c33; border-color: #231c33; }
.real-btn { color: #231c33; border-color: #ffb703; background: #fff7e0; font-weight: 500; }
.real-btn:hover { background: #ffb703; color: #231c33; }

/* home */
.masthead { width: calc(100% - 2 * var(--gutter)); max-width: var(--maxw); margin: 20px auto 0; border-radius: 30px; min-height: clamp(280px, 34vw, 400px); box-shadow: var(--shadow); }
.masthead::after { background: linear-gradient(90deg, rgba(35,28,51,.88) 0%, rgba(35,28,51,.6) 50%, rgba(35,28,51,.1) 100%); }
.mast-in { color: #fff; padding-inline: clamp(20px, 4vw, 48px); max-width: none; }
.mast-in .eyebrow { color: #ffd166; }
.mast-in h1 { font-weight: 700; }
.mast-in h1 span { color: #ffd166; }
.mast-in .streak { color: #fff; }
.mast-in .streak b { color: #ffd166; }
.fmini { color: #fff; }
.hubtile { box-shadow: var(--shadow); border: 0; }
.hubtile b { font-weight: 600; color: #231c33; }
.hubtile:hover { box-shadow: 0 16px 30px rgba(35,28,51,.16); }
.hubpic { background: color-mix(in srgb, var(--c) 45%, #fff); }
.todaycard { box-shadow: var(--shadow); border: 1px solid var(--line); }
.sd-title { font-weight: 700; }
.tm-art span { font-weight: 600; }

/* cards everywhere get the same soft white card look */
.dcard, .inst, .itile, .word, .plan, .note, .member, .cab, .game-shell, .mix-slot, .pcard, .jam-card, .moment, .bpick, .colstats, .stamp-group, .tcard { box-shadow: var(--shadow); }
.inst, .itile, .word, .note, .cab, .game-shell, .bpick, .colstats { background: #fff; border: 1px solid var(--line); }
.word b, .plan h3 { font-weight: 700; color: #f0513c; }
.dcard { border-width: 5px; }
.dc-body h2 { font-weight: 700; }
.dc-fact { font-weight: 500; }
.bpick b, .mix-slot b { font-weight: 700; color: color-mix(in srgb, var(--mc) 70%, #231c33); }
.bpick { color: #231c33; }
.bpick span { color: var(--cream-dim); }
.deck-dots button { background: #e3dccf; }
.deck-prev, .deck-next, .tm-arrow { box-shadow: 0 4px 0 #c98f00; }
.itile-play { box-shadow: 0 5px 0 #c98f00; }
.itile-song b { color: #b35c00; }
.cab h3 { font-weight: 700; color: color-mix(in srgb, var(--c) 65%, #231c33); }
.cab:hover { box-shadow: 0 10px 0 var(--c); color: #231c33; }
.cab { color: #231c33; border: 3px solid color-mix(in srgb, var(--c) 45%, #fff); }
.cab .num { color: color-mix(in srgb, var(--c) 60%, #231c33); }
.tablist [role="tab"] { background: #fff; color: #231c33; border: 2px solid var(--line); font-weight: 500; box-shadow: var(--shadow); }
.tablist [role="tab"][aria-selected="true"] { background: #1aa39a; color: #fff; border-color: #1aa39a; }
.yourturn { border: 3px solid #ffd166; box-shadow: var(--shadow); }
.yourturn .yt-h { color: #f0513c; font-weight: 700; }
.nexttile b { font-weight: 700; }
.nexttile { box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 55%, #231c33); }
.m-year { font-weight: 700; }
.moment { background: #fff; }
.moment-btn { color: #231c33; }
.m-title { font-weight: 600; }

/* studio / mixtape */
.tape { background: #fff; border: 3px solid var(--line); box-shadow: var(--shadow); }
.mix-slot { background: #fffaf3; border: 3px solid var(--line); }
.mix-opts button { background: #fff; color: #231c33; }
.mix-opts button small { color: var(--cream-dim); }
.mix-move button { background: #f4eee4; }
.mix-now small { color: var(--cream-dim); }

/* time machine */
.tm-year { font-weight: 700; }
.tm-info h2 { font-weight: 700; }
.tm-wow { background: #fff; border: 1px solid var(--line); }
.tm-pic .slot { box-shadow: 12px 12px 0 var(--marigold), var(--shadow); }
.tm-ticks button { color: var(--cream-dim); font-weight: 500; }

/* album tour shelf / rooms keep their own colours */
.shelf-item { color: #231c33; }
.shelf-item .slot { box-shadow: 0 8px 18px rgba(35,28,51,.18); }
.room h2 { font-weight: 700; }

/* games */
.opt { background: #fff; color: #231c33; border: 2px solid var(--line); box-shadow: 0 2px 0 rgba(35,28,51,.06); }
.opt.right { color: #fff; } .opt.wrong { color: #fff; }
.pcard { background: #fff; }
.pcard input { color: #231c33; }
.game-top h1 { font-weight: 700; }
.q-prompt { font-weight: 600; }
.explain { background: #fff7e0; border: 1px solid #ffd166; }
.clue { background: #fff; border: 1px solid var(--line); }
.sort-item { background: #fff; }
.meter { background: #efe8dc; }

/* collection */
.colstats b { color: #b35c00; font-weight: 700; }
.stamp { color: #231c33; }
.st { border-color: #d9d1c4; }
.pp-meter { background: #efe8dc; }
.mycover img { box-shadow: var(--shadow); }

/* footer */
.site-foot { background: #fff; border-top: 1px solid var(--line); }
.site-foot .brand { color: #231c33; }
.foot-nav a { color: #231c33; }
.credit { color: var(--cream-dim); }
.muted { color: var(--cream-dim); }
.teachers .plan { border: 1px solid var(--line); }
.pop { background: color-mix(in srgb, var(--mc, #ffb703) 60%, #fff); }
.pop img { filter: grayscale(1) contrast(1.2) brightness(1.15); }
.pop::after { background-image: radial-gradient(rgba(35,28,51,.12) 1.1px, transparent 1.5px); }
.mast-in { margin-inline: 0; width: 100%; justify-self: stretch; padding-inline: clamp(22px, 4vw, 56px); }
.mast-in h1 { max-width: none; }
.mast-sub { max-width: 46ch; }
.masthead::after { background: linear-gradient(90deg, rgba(35,28,51,.9) 0%, rgba(35,28,51,.72) 40%, rgba(35,28,51,.15) 75%, rgba(35,28,51,0) 100%); }
.masthead { max-width: calc(var(--maxw) - 2 * var(--gutter)); }
/* decks: exactly two whole cards on wide screens, one on phones */
.deck-track { gap: 20px; scroll-padding: 0; }
.dcard { flex: 0 0 calc((100% - 20px) / 2); min-height: 0; }
@media (max-width: 760px) { .dcard { flex-basis: 100%; } }
.dcard.hello .dc-pic, .dcard.era .dc-pic { aspect-ratio: 4 / 3.2; max-height: none; }
.dc-pic { aspect-ratio: 4 / 3.2; }
.dc-body.big { min-height: 300px; }

/* ---------- ONE header bar ---------- */
.site-head .wrap { display: flex; align-items: center; gap: 14px; min-height: 76px; flex-wrap: nowrap; padding-block: 6px; }
.site-head .secnav { flex: 1; min-width: 0; border: 0; background: transparent; order: 0; margin: 0; }
.secnav-in { display: flex; justify-content: center; gap: 2px; padding-block: 0; overflow-x: auto; scrollbar-width: none; }
.kidnav.secnav a { min-width: 0; flex: 0 0 auto; padding: 5px 9px 6px; font-size: 14px; gap: 3px; border-radius: 14px; }
.secnav .si { width: 36px; height: 36px; }
.secnav .si svg { width: 21px; height: 21px; }
.secnav .count { margin-left: 20px; margin-top: -6px; font-size: 11px; min-width: 20px; height: 18px; }
.site-head .stop-btn, .site-head .sound-btn { flex: none; }
.sound-btn .t { display: none; }
.sound-btn { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
.sound-btn svg { width: 22px; height: 22px; }
@media (max-width: 1180px) { .brand small { display: none; } .kidnav.secnav a { padding: 5px 6px 6px; font-size: 13px; } .secnav-in { justify-content: flex-start; } }
@media (max-width: 820px) {
  .site-head .wrap { gap: 8px; min-height: 64px; padding-inline: 10px; }
  .site-head .brand { display: none; }
  .secnav-in { justify-content: flex-start; }
  .kidnav.secnav a { font-size: 12px; padding: 4px 5px 5px; }
  .secnav .si { width: 32px; height: 32px; } .secnav .si svg { width: 19px; height: 19px; }
  .stop-btn { padding: 9px 12px; }
  .sound-btn { width: 40px; height: 40px; }
}
.toast { top: calc(96px + env(safe-area-inset-top, 0px)); }

/* ---------- deck controls sit on the cards themselves ---------- */
.deck { position: relative; padding-top: 34px; }
.deck-nav { position: absolute; inset: 0; margin: 0; display: block; pointer-events: none; }
.deck-dots { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); max-width: 90%; pointer-events: auto; background: #fff; padding: 6px 12px; border-radius: 999px; box-shadow: var(--shadow); gap: 7px; flex-wrap: nowrap; }
.deck-dots button { width: 12px; height: 12px; }
.deck-prev, .deck-next { position: absolute; top: calc(50% + 17px); transform: translateY(-50%); pointer-events: auto; z-index: 3; width: 60px; height: 60px; }
.deck-prev { left: -18px; } .deck-next { right: -18px; }
.deck-prev:disabled, .deck-next:disabled { opacity: 0; pointer-events: none; }
@media (max-width: 760px) { .deck-prev { left: 6px; } .deck-next { right: 6px; } .deck-prev, .deck-next { width: 50px; height: 50px; top: 38%; } }
/* keep a pair of cards on one screen */
.dcard .dc-pic, .dcard.hello .dc-pic, .dcard.era .dc-pic { aspect-ratio: auto; height: clamp(180px, 34vh, 320px); }
.dc-body { padding: 16px 20px 18px; gap: 8px; }
.dc-body.big { min-height: clamp(240px, 30vh, 300px); }
.dc-body h2 { font-size: clamp(26px, 3vw, 36px); }
.mdeck { padding-block: 4px 12px; }

/* =====================================================================
   GLOBAL NAV BAR (same on every page, never changes with the eras)
   ===================================================================== */
.site-head {
  --stage: #ffffff; --cream: #231c33; --cream-dim: #6b6480; --line: rgba(35,28,51,.1);
  --f-head: "Fredoka", "Nunito", system-ui, sans-serif; --f-show: "Fredoka", "Nunito", system-ui, sans-serif;
  background: #ffffff !important; box-shadow: 0 1px 0 rgba(35,28,51,.08), 0 4px 14px rgba(35,28,51,.06); color: #231c33;
}
.site-head .wrap { min-height: 64px; gap: 24px; }
.site-head .brand { font-family: "Shrikhand", Georgia, serif; font-size: 26px; color: #231c33; }
.site-head .brand b { color: #f0513c; }
.site-head .brand small { display: none; }
.site-head .secnav { flex: 1; }
.site-head .secnav-in { justify-content: flex-end; gap: 4px; align-items: stretch; }
.kidnav.secnav a {
  display: inline-flex; flex-direction: row; align-items: center; gap: 7px; min-width: 0;
  padding: 0 12px; height: 64px; border-radius: 0; background: transparent !important; box-shadow: none !important;
  font-family: "Fredoka", "Nunito", system-ui, sans-serif; font-weight: 600; font-size: 16px; color: #3a3350;
  border-bottom: 4px solid transparent; border-top: 4px solid transparent;
}
.kidnav.secnav a:hover { color: #231c33; border-bottom-color: color-mix(in srgb, var(--c) 50%, #fff); }
.kidnav.secnav a[aria-current="page"] { color: #231c33; border-bottom-color: var(--c); }
.secnav .si { width: 26px; height: 26px; background: transparent !important; color: color-mix(in srgb, var(--c) 75%, #231c33) !important; border-radius: 0; transform: none !important; }
.secnav .si svg { width: 22px; height: 22px; }
.kidnav.secnav a[aria-current="page"] .si { color: color-mix(in srgb, var(--c) 85%, #231c33) !important; }
.secnav .count { position: static; margin: 0 0 0 2px; font-size: 12px; height: 20px; min-width: 22px; background: #ff5d8f; color: #fff; }
@media (max-width: 1180px) { .kidnav.secnav a { padding: 0 8px; font-size: 15px; gap: 5px; } .site-head .wrap { gap: 12px; } }
@media (max-width: 1000px) { .secnav .si { display: none; } }
@media (max-width: 820px) {
  .site-head .wrap { min-height: 54px; padding-inline: 0; gap: 0; }
  .site-head .brand { display: none; }
  .site-head .secnav-in { justify-content: flex-start; padding-inline: 8px; }
  .kidnav.secnav a { height: 54px; padding: 0 10px; font-size: 15px; }
  .secnav .si { display: inline-grid; width: 20px; height: 20px; } .secnav .si svg { width: 18px; height: 18px; }
}
.toast { top: calc(78px + env(safe-area-inset-top, 0px)); }
.site-head .wrap { padding-block: 0; }
.site-head .wrap { max-width: 1440px; }
.kidnav.secnav a { padding: 0 10px; gap: 6px; font-size: 16px; }
.secnav .si { width: 22px; height: 22px; } .secnav .si svg { width: 20px; height: 20px; }
@media (max-width: 1240px) { .secnav .si { display: none; } .kidnav.secnav a { padding: 0 9px; } }
@media (max-width: 820px) { .secnav .si { display: inline-grid; } }
.site-head .secnav-in { justify-content: flex-start; width: max-content; max-width: 100%; margin-left: auto; }
@media (max-width: 1360px) and (min-width: 821px) { .secnav .si { display: none; } }
@media (max-width: 1000px) and (min-width: 821px) { .site-head .brand { font-size: 21px; } .kidnav.secnav a { padding: 0 7px; font-size: 14.5px; } .site-head .wrap { gap: 10px; } }
@media (max-width: 960px) and (min-width: 821px) { .kidnav.secnav a { padding: 0 5px; font-size: 13.5px; } .site-head .brand { font-size: 19px; } }

/* =====================================================================
   REFINED LOOK: friendly but not cartoony
   ===================================================================== */
:root {
  --f-show: "Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-head: "Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-type: "Outfit", "Avenir Next", system-ui, sans-serif;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(35,28,51,.06), 0 6px 18px rgba(35,28,51,.07);
  --stage: #fbf7f1; --stage-3: #f1ece4;
}
.site-head { --f-head: "Outfit", system-ui, sans-serif; --f-show: "Outfit", system-ui, sans-serif; }
.kidnav.secnav a { font-family: "Outfit", system-ui, sans-serif; font-weight: 500; }
.kidnav.secnav a[aria-current="page"] { font-weight: 600; }
h1, h2, h3 { font-weight: 700; letter-spacing: -.02em; }
.pagetitle, .hub-h, .sec-h, .mast-in h1, .dc-body h2, .tm-info h2, .tm-year, .sd-title, .game-top h1 { font-weight: 700; letter-spacing: -.025em; }
.pagetitle { color: #231c33; font-size: clamp(34px, 5vw, 56px); }
.hub-h { font-size: clamp(26px, 3.2vw, 38px); }
.eyebrow, .tc-label, .dc-kicker { font-weight: 600; letter-spacing: .08em !important; font-size: 13px; }

/* flat buttons (no 3D ledges) */
.btn, .bigplay, .homebtn, .deck-prev, .deck-next, .tm-arrow, .itile-play, #mixplay.on, #jamplay.on { box-shadow: 0 2px 6px rgba(35,28,51,.12) !important; }
.btn:hover, .bigplay:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(35,28,51,.16) !important; }
.btn:active { transform: none; }
.btn { border-radius: 12px; padding: 12px 22px; font-size: 17px; }
.bigplay { border-radius: 12px; background: #1f8f87; }
.btn.small { border-radius: 10px; }
.real-btn { border-radius: 10px; border-width: 1.5px; }
.yt-opts button, .sd-opts button { border: 1.5px solid #cfc7ba; border-radius: 10px; }

/* tiles: photo-led, colour as a thin accent */
.hubtile { background: #fff; border-radius: 18px; box-shadow: var(--shadow) !important; }
.hubtile:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(35,28,51,.14) !important; }
.hubtile b { background: #fff; color: #231c33; font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; border-top: 5px solid var(--c); padding: 12px 18px 14px; }
.hubpic { background: color-mix(in srgb, var(--c) 22%, #fff); }
.tm-art { background: linear-gradient(90deg, #b8503f, #c9453a 25%, #c8995a 50%, #d86a9a 70%, #6f8f55); }
.nexttile { background: #fff; border-top: 5px solid var(--c); box-shadow: var(--shadow) !important; color: #231c33; border-radius: 14px; }
.nexttile span { color: var(--cream-dim); }
.nexttile b { font-size: 22px; font-weight: 600; }

/* natural photos instead of pop-art tint */
.pop { background: #e9e4dc; }
.pop img { filter: grayscale(.15) contrast(1.02); mix-blend-mode: normal; }
.pop::after { display: none; }

/* cards: thin outline + slim colour bar */
.dcard { border: 1px solid var(--line); border-top: 6px solid var(--mc); border-radius: 18px; box-shadow: var(--shadow); }
.dc-body.big { background: #fff; }
.bpick { border: 1px solid var(--line); border-radius: 16px; }
.bpick[aria-pressed="true"] { border-color: var(--mc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc) 40%, transparent); }
.bpick b, .mix-slot b { font-weight: 700; }
.mix-slot { border: 1px solid var(--line); border-top: 5px solid var(--mc); border-radius: 16px; }
.mix-slot.on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc) 45%, transparent), 0 12px 24px rgba(35,28,51,.14); }
.mix-num { font-family: "Outfit", sans-serif; font-weight: 700; }
.tape { border: 1px solid var(--line); background: #fff; border-radius: 20px; }
.todaycard, .inst, .itile, .word, .note, .cab, .game-shell, .colstats, .moment, .tcard { border-radius: 16px; }
.cab { border: 1px solid var(--line); border-top: 5px solid var(--c); }
.cab:hover { box-shadow: 0 12px 26px rgba(35,28,51,.14); transform: translateY(-3px); }
.cab h3 { font-weight: 700; font-size: 26px; }
.yourturn { border: 1px solid #f2d58f; background: #fffaf0; }
.tablist [role="tab"] { border-radius: 10px; border: 1px solid var(--line); box-shadow: none; }
.tablist [role="tab"][aria-selected="true"] { background: #231c33; border-color: #231c33; }
.cd-pack { background: repeating-linear-gradient(45deg, #d9573f 0 12px, #e8a33c 12px 24px); border-radius: 10px; animation: none; }
.cd-pack span { font-size: 17px; }
.m-year { font-family: "Outfit", sans-serif; background: #231c33; color: #fff; font-size: 16px; padding: 3px 10px; }
.deck-prev, .deck-next, .tm-arrow { background: #fff; color: #231c33; border: 1px solid var(--line); }
.deck-prev:hover, .deck-next:hover, .tm-arrow:hover { background: #ffb703; }
.itile-play { background: #fff5dc; border: 1px solid #f1d38f; }
.masthead { border-radius: 22px; }
.mast-in h1 span { color: #ffcf5a; }
.fmini .slot { border-width: 3px; }
.stamp.got .st { border-style: solid; border-width: 3px; }
.arcade-art b { background: none !important; border: 0 !important; padding: 0 !important; font-size: clamp(44px, 7vw, 76px) !important; font-weight: 700 !important; }
.mix-opts button[aria-checked="true"] { background: color-mix(in srgb, var(--mc) 22%, #fff); border-color: var(--mc); box-shadow: inset 4px 0 0 var(--mc); }
.jam-pats button[aria-pressed="true"] { background: color-mix(in srgb, var(--mc) 22%, #fff); }