/* R4: padded medallions, tactile vinyl and the approved sculpted-02 palette.
   Decoration is CSS only; source artwork and game characters stay unchanged. */
:root {
  --bg:#18132e; --surface:#2b2349; --ink:#fff6e7; --muted:#d1c4e1;
  --line:#baa1ea42; --header:#241a3df5; --cyan:#6cf4e2;
  --panel-top:#382b58; --panel-bottom:#241e40; --edge:#b093d878;
  --lavender:#392553; --aqua:#193a43; --gold:#44382e;
  --lift:0 9px 0 #0e092841,0 20px 40px #0e092830;
}
html[data-theme=light] {
  --bg:#e4d7f0; --surface:#eee0f7; --ink:#28123f; --muted:#574164;
  --line:#75568d4a; --header:#ded0efef; --cyan:#08685f;
  --panel-top:#f0ddfa; --panel-bottom:#d6bfe9; --edge:#a68aba;
  --lavender:#d3b7ef; --aqua:#b7e7de; --gold:#f5dc91;
  --lift:0 8px 0 #9575af33,0 18px 32px #5c37771c;
}
.sculpted {
  background:
    radial-gradient(ellipse at 0 6%,#a45ee526,transparent 42%),
    radial-gradient(ellipse at 100% 32%,#21c7c51a,transparent 38%),var(--bg);
}
.topbar {background:var(--header);border-bottom:2px solid var(--edge);box-shadow:0 5px 25px #25103724}
.nav {gap:20px}
.navlinks {gap:6px}
.navlinks a {padding:11px 13px;border-radius:14px;transition:background .18s,box-shadow .18s}
.navlinks a:hover,.navlinks a[aria-current=page] {background:var(--lavender);color:var(--ink);box-shadow:inset 0 1px 0 #fff5}
.iconbtn {background:linear-gradient(145deg,var(--panel-top),var(--panel-bottom));border-color:var(--edge);box-shadow:inset 0 2px 0 #fff4,0 3px 0 #38145428;min-width:44px;min-height:44px}
.btn {background:linear-gradient(155deg,var(--panel-top),var(--panel-bottom));border-color:var(--edge);box-shadow:inset 0 2px 0 #ffffff3b,0 4px 0 #25123e40;transition:transform .18s,box-shadow .18s}
.btn:hover {transform:translateY(-2px)}
.btn:active {transform:translateY(2px);box-shadow:inset 0 1px 4px #25123e25}
.btn.primary {background:linear-gradient(160deg,#fff39c 0%,#ffe044 42%,#efb82c);border-color:#b58128;color:#2c1934;box-shadow:inset 0 2px 0 #fff9,0 5px 0 #9a672957,0 9px 22px #edb62c26}
.btn.cyan {background:linear-gradient(145deg,#adfff0,#43d5c8);border-color:#38a99e;color:#18313e}
.eyebrow {color:var(--muted);letter-spacing:.12em}
.eyebrow:before {width:10px;height:10px;border-radius:4px;background:linear-gradient(#efacff,#9d37d7);box-shadow:2px 2px 0 #46205e40;transform:rotate(-8deg)}
.accent {color:var(--cyan)}
html[data-theme=light] .accent-yellow {color:#795000}
.pill {background:var(--gold);color:var(--ink);border-color:var(--edge);box-shadow:inset 0 1px 0 #fff6}
:focus-visible {outline:3px solid var(--cyan);outline-offset:5px}
html[data-theme=light] :focus-visible {outline-color:#6125a3}

/* The entrance echoes the logo's concentric rings without repeating the mark. */
.home-hero {border-bottom:3px solid #ad77d5;border-radius:0 0 48px 48px;box-shadow:0 10px 0 #6f43852e}
.home-hero .hero-copy {position:relative}
.home-hero .pill {background:#4f315dd9;color:#fff0d8;border:1px solid #c99bd0}
.top-story-ribbon {padding:24px 0;gap:16px;border-bottom:0}
.top-story-ribbon span {display:flex;align-items:center;gap:13px;font-size:12px;color:var(--muted)}
.top-story-ribbon b {display:grid;place-items:center;min-width:48px;height:48px;border-radius:17px;background:var(--lavender);box-shadow:inset 0 2px 0 #ffffff52,0 4px 0 #49236520;color:var(--ink);font:22px Russo,sans-serif}
html[data-theme=light] .top-story-ribbon b {color:#3f205a}
.top-story-ribbon span:nth-child(2) b {background:var(--aqua)}
.top-story-ribbon span:nth-child(3) b {background:var(--gold)}
.portal-section {padding-top:22px}
.portal-card {background:linear-gradient(145deg,var(--panel-top),var(--panel-bottom));border:1px solid var(--edge);box-shadow:inset 0 2px 0 #fff6,var(--lift);min-height:260px}
.portal-card:nth-child(2) {background:linear-gradient(145deg,var(--aqua),var(--surface))}
.portal-card:nth-child(3) {background:linear-gradient(145deg,var(--gold),var(--surface))}
.portal-card:after {content:'';position:absolute;width:200px;height:200px;right:-50px;top:-70px;border:22px solid #a37bbc28;border-radius:50%;pointer-events:none}
.portal-card .portal-copy {max-width:66%}
.portal-card h2 {font-size:26px}
.portal-card p {font-size:13px}
.text-link {color:var(--cyan)}
html[data-theme=light] .text-link {color:#254c4f}

.section {border-bottom:1px solid var(--line)}
#how {background:linear-gradient(140deg,var(--aqua),var(--bg) 70%)}
.game-stage {border:5px solid var(--lavender);box-shadow:inset 0 0 0 1px #fff5,var(--lift)}
.how-list {counter-reset:steps}
.how-list li {padding:16px 0;grid-template-columns:44px 1fr}
.how-list b {display:grid;place-items:center;align-self:start;min-height:44px;border-radius:15px;background:var(--lavender);color:var(--ink);box-shadow:inset 0 2px 0 #fff4}
.how-list li:nth-child(2) b {background:var(--aqua)}
.how-list li:nth-child(3) b {background:var(--gold)}

/* Rhythm deck stays an intentionally dark instrument in either theme. */
.sound-strip {
  --ink:#fff5e8; --muted:#d6c8e5; --line:#b3a0d650; --bg:#20192f;
  --panel-top:#4d3a69; --panel-bottom:#2c2347; --edge:#9e7db7; --cyan:#6cf4e2;
  padding:38px;border-radius:36px;border:2px solid #9373af;
  background:radial-gradient(ellipse at top left,#6b428c,transparent 65%),#261d40;
  box-shadow:inset 0 3px 0 #e4c9ff52,0 8px 0 #3c255442,0 24px 45px #3e1d5726;
  color:var(--ink);position:relative;
}
.sound-strip h3 {font-size:30px;color:#fff4dd}
.sound-strip .eyebrow,.sound-strip p,.sound-strip .bpm {color:#ded0ed}
.sequencer {padding:22px;border-radius:24px;background:#19162f;border:1px solid #6c537f;box-shadow:inset 0 3px 9px #07041888}
.beat-cell {height:44px;background:linear-gradient(#544567,#322844);border:1px solid #8f75a6;box-shadow:inset 0 2px 0 #fff3,0 3px 0 #090619;border-radius:10px}
.beat-cell[aria-pressed=true] {background:linear-gradient(#b5fff1,#37d2c3);border-color:#8affeb;box-shadow:inset 0 2px 0 #fff8,0 0 14px #32e8ce25}
.beat-row[data-tone=clap] .beat-cell[aria-pressed=true] {background:linear-gradient(#e8a1ff,#ad47ed);border-color:#e8b0ff}
.beat-row[data-tone=hat] .beat-cell[aria-pressed=true] {background:linear-gradient(#fff1a0,#edc130);border-color:#fff3ad}

/* Subpages: a compact branded introduction, rather than a white text band. */
.page-intro {padding:30px 0}
.intro-shell {display:grid;grid-template-columns:minmax(0,1fr) 230px;align-items:center;gap:35px;padding:34px 40px;border-radius:36px;border:1px solid var(--edge);background:radial-gradient(ellipse at 0 100%,#ead0582b,transparent 55%),linear-gradient(125deg,var(--lavender),var(--surface) 64%,var(--aqua));box-shadow:inset 0 2px 0 #fff6,var(--lift);position:relative;overflow:hidden;isolation:isolate}
.intro-shell:before {content:'';position:absolute;right:-135px;top:-180px;width:500px;height:500px;border:42px solid #9e65b826;border-radius:50%;z-index:-1}
.intro-copy {min-width:0}
.page-intro h1 {font-size:clamp(34px,4.6vw,59px);line-height:1.12;margin:22px 0 18px}
.page-intro p {font-size:15px;color:var(--muted);margin-bottom:0}
.page-intro .breadcrumb {color:var(--ink);font-weight:800}
.intro-emblem {position:relative;display:grid;place-items:center;aspect-ratio:1;isolation:isolate}
.intro-emblem img {width:86%;height:auto;filter:drop-shadow(0 12px 9px #41145d38)}
.orbit {position:absolute;border-radius:50%;border:2px dashed #795ba56b;width:100%;height:100%;z-index:-1;transform:rotate(-16deg)}
.orbit-two {width:114%;height:60%;border-style:solid;border-color:#6e9e8b66;transform:rotate(23deg)}
.sound-bars {display:flex;gap:5px;align-items:center;height:40px;position:absolute;right:0;bottom:5%;transform:rotate(-10deg)}
.sound-bars i {width:10px;height:22px;border-radius:4px;background:#ffc936;box-shadow:inset 1px 2px 0 #fff9,2px 3px 0 #60325036}
.sound-bars i:nth-child(2),.sound-bars i:nth-child(4) {height:34px;background:#50daca}
.sound-bars i:nth-child(3) {height:44px;background:#c374ef}
.page-intro+#characters {padding-top:30px}
.page-intro+#characters .section-head h2 {font-size:clamp(26px,3vw,40px)}
.page-intro+#characters .section-head {margin-bottom:24px}

/* Collectible portrait cards: tinted vinyl outside, recessed stage inside. */
#characters {background:radial-gradient(ellipse at 95% 70%,#b075d621,transparent 60%)}
.filterbar {padding:18px;margin-bottom:28px;border:1px solid var(--edge);border-radius:24px;background:linear-gradient(145deg,var(--panel-top),var(--panel-bottom));box-shadow:inset 0 2px 0 #fff5,0 4px 0 #4e28631c;align-items:start}
.search {background:var(--bg);border-color:var(--edge);min-height:48px;box-shadow:inset 0 2px 5px #3a20511a}
.search::placeholder {color:var(--muted);opacity:1}
.chip {background:linear-gradient(145deg,var(--panel-top),var(--panel-bottom));border-color:var(--edge);box-shadow:inset 0 1px 0 #fff6,0 3px 0 #3515431a}
.chip[aria-pressed=true] {background:linear-gradient(145deg,#f1daff,#b88ce0);border-color:#81609c;color:#351346;box-shadow:inset 0 2px 0 #fff9,0 3px 0 #68408b42}
.hero-card {--card-tint:var(--lavender);padding:12px 12px 19px;border-radius:30px;background:linear-gradient(145deg,var(--card-tint),var(--surface));border:1px solid var(--edge);box-shadow:inset 0 2px 0 #ffffff60,0 6px 0 #5b34731e,0 12px 20px #31153f14;overflow:hidden;transition:transform .18s,box-shadow .18s}
.hero-card:nth-child(4n+2) {--card-tint:var(--aqua)}
.hero-card:nth-child(4n+3) {--card-tint:var(--gold)}
.hero-card:nth-child(4n+4) {--card-tint:var(--panel-bottom)}
.hero-card .portrait {height:195px;border-radius:23px;background:radial-gradient(ellipse at 50% 70%,#ffffff61 0 30%,transparent 31%),radial-gradient(ellipse at 50% 80%,#573b7c2e,transparent 72%);border:1px solid #9471b036;box-shadow:inset 0 2px 8px #3e1c6520}
.hero-card strong {font-size:17px;margin:17px 8px 5px}
.hero-card small {font-size:11px;min-height:34px;margin:0 8px;color:var(--muted)}
.hero-card .plus {width:36px;height:36px;top:19px;right:19px;background:linear-gradient(145deg,#fff6c5,#f3cc4b);color:#33203b;border:1px solid #a4854780;box-shadow:inset 0 2px 0 #fffb,0 3px 0 #49325825;font-weight:800}
.hero-card:hover {box-shadow:inset 0 2px 0 #fff8,0 8px 0 #5b34732e,0 20px 25px #31153f20}
.roster-foot {margin-top:28px}
dialog {background:linear-gradient(145deg,var(--panel-top),var(--panel-bottom));border:2px solid var(--edge);border-radius:32px;box-shadow:inset 0 2px 0 #fff7,0 25px 100px #170a3866;color:var(--ink)}
dialog::backdrop {background:#1f103a99;backdrop-filter:blur(5px)}
.profile-grid>img {background:radial-gradient(ellipse at center,var(--aqua),transparent 68%);border-radius:50%;transform:none}

#comics {background:linear-gradient(150deg,var(--aqua),var(--bg) 70%)}
.book {background:linear-gradient(145deg,var(--panel-top),var(--panel-bottom));border-color:var(--edge);box-shadow:inset 0 2px 0 #fff5,var(--lift);border-radius:26px}
.book .book-copy {border-top:3px solid var(--gold)}
.book-label {font-weight:800;color:var(--muted)}
.book p {font-size:12px}
.book-filters {padding:18px 0}
.world-foot>div {border-radius:22px;padding:22px;background:linear-gradient(140deg,var(--panel-top),var(--panel-bottom));border:1px solid var(--edge);box-shadow:inset 0 2px 0 #fff4}
.world-foot>div:nth-child(2) {background:var(--aqua)}
.world-foot>div:nth-child(3) {background:var(--gold)}
.community {background:radial-gradient(ellipse at 0 0,#c589e64d,transparent 70%),linear-gradient(130deg,var(--lavender),var(--surface) 55%,var(--aqua));border:2px solid var(--edge);box-shadow:inset 0 3px 0 #fff6,var(--lift)}
.community form {background:linear-gradient(150deg,var(--panel-top),var(--panel-bottom));border-color:var(--edge);box-shadow:inset 0 2px 0 #fff7,0 10px 24px #4b2a6222}
.field input,.field textarea,.field select {background:var(--bg);border-color:var(--edge);box-shadow:inset 0 2px 4px #35144d19}
.field input::placeholder,.field textarea::placeholder {color:var(--muted);opacity:1}
.faq-list details {background:linear-gradient(135deg,var(--panel-top),var(--surface));padding:0 22px;border:1px solid var(--edge);border-radius:20px;margin-bottom:12px;box-shadow:inset 0 2px 0 #fff5}
.faq-list details[open] {background:linear-gradient(135deg,var(--aqua),var(--surface))}
.faq-list summary {padding:21px 0}
.closing {background:radial-gradient(ellipse at 15% 90%,#36c6ba30,transparent 55%),radial-gradient(ellipse at 85% 10%,#c476ec36,transparent 55%),var(--lavender);border-radius:48px 48px 0 0;border-top:2px solid var(--edge);box-shadow:inset 0 3px 0 #fff5}
.footer {background:var(--panel-bottom);border-top:1px solid var(--edge)}
.footer-links a {padding:8px 0;font-weight:800}
.reader-transcript,.play-gate,.kit-card,.kit-downloads a {background:linear-gradient(145deg,var(--panel-top),var(--panel-bottom));border-color:var(--edge);box-shadow:inset 0 2px 0 #fff5,var(--lift)}
.reader-embed {border:4px solid var(--lavender)}
.kit-card img {border-radius:18px;background:radial-gradient(ellipse,var(--aqua),transparent 72%)}

@media(min-width:1101px) and (max-width:1250px) {.navlinks a{padding:10px 7px}.nav{gap:10px}.navlinks{gap:0}}
@media(max-width:1100px) {
  .navlinks {background:var(--header);box-shadow:0 12px 20px #30134a24}
  .navlinks a {width:100%;text-align:center}
  .intro-shell {grid-template-columns:minmax(0,1fr) 180px;padding:30px}
  .intro-emblem {max-width:180px}
  .sound-strip {padding:28px}
}
@media(max-width:800px) {
  .intro-shell {grid-template-columns:minmax(0,1fr) 140px;gap:18px;padding:28px}
  .page-intro h1 {font-size:39px}
  .intro-emblem {max-width:140px}
  .sound-strip {padding:26px}
  .hero-card .portrait {height:180px}
  .top-story-ribbon {justify-content:center;flex-wrap:wrap}
  .home-hero {border-radius:0 0 30px 30px}
  .world-foot {gap:12px}
  .world-foot>div {padding:18px}
}
@media(max-width:500px) {
  .navtools {gap:5px}
  .navtools .iconbtn {width:44px;min-width:44px;height:44px}
  .brandlink,.brandlink>img {width:173px;height:48px}
  .nav {gap:5px}
  .intro-shell {grid-template-columns:minmax(0,1fr) 78px;padding:22px 20px;gap:14px;border-radius:26px;align-items:start}
  .intro-copy {grid-column:1/-1;grid-row:1;z-index:1}
  .intro-emblem {grid-column:2;grid-row:1;width:64px;margin-top:0;pointer-events:none;z-index:0;justify-self:end}
  .intro-emblem img {filter:none}
  .page-intro {padding:22px 0}
  .page-intro h1 {font-size:35px;margin:44px 0 16px}
  .page-intro .breadcrumb {font-size:10px}
  .page-intro p {font-size:14px}
  .intro-shell:before {right:-250px;top:-260px}
  .sound-bars {display:none}
  .top-story-ribbon {gap:12px;justify-content:space-between}
  .top-story-ribbon span {font-size:10px;gap:7px;flex:1;min-width:80px;flex-direction:column;text-align:center}
  .top-story-ribbon b {min-width:42px;height:42px;font-size:20px}
  .portal-card {min-height:220px}
  .portal-card p {font-size:12px}
  .portal-card .portal-copy {max-width:67%}
  .sound-strip {padding:23px 18px;border-radius:28px}
  .sound-strip h3 {font-size:28px}
  .sequencer {padding:17px 12px}
  .sound-strip .beat-row {grid-template-columns:38px repeat(4,minmax(0,1fr));gap:7px}
  .filterbar {padding:12px;border-radius:21px;gap:12px}
  .filterbar .search {width:100%;font-size:13px}
  .chips {gap:7px}
  .chip {font-size:11px;padding:9px 12px;min-height:44px}
  .hero-card {padding:9px 9px 16px;border-radius:24px}
  .hero-card .portrait {height:153px;border-radius:19px}
  .hero-card strong {font-size:15px;margin:14px 4px 5px}
  .hero-card small {font-size:10px;margin:0 4px;min-height:32px}
  .hero-card .plus {width:30px;height:30px;top:16px;right:16px;font-size:17px}
  .book .book-copy {padding:14px}
  .book p {font-size:11px}
  .faq-list details {padding:0 17px}
  .faq-list summary {font-size:14px}
  .closing {border-radius:30px 30px 0 0}
}
@media(prefers-reduced-motion:reduce) {.btn,.hero-card,.navlinks a{transition:none}.btn:hover,.hero-card:hover{transform:none}}
@media(forced-colors:active) {
  .sculpted,.sound-strip,.intro-shell,.hero-card,.portal-card,.book,.community,.closing {background:Canvas;color:CanvasText;box-shadow:none}
  .intro-emblem,.sound-bars {display:none}
  .btn,.chip,.hero-card,.iconbtn {border:1px solid ButtonText}
}

@media(max-width:380px) {.brandlink,.brandlink>img{width:135px}.navtools{gap:4px}}