/* Direction C: illustrated editorial showcases. Shared studio styles stay on the homepage. */
.game-showcase {
  --paper: #fff9ed; --paper-deep: #f4e6cb; --story-ink: #171e3e; --accent: #68418c;
  --soft-accent: #f1e9f8; --gold: #e4b75b; --outline: #e5d5b8; --story-heading: var(--f-moon);
  color: var(--story-ink); background: var(--paper); font-size: 15px;
  background-image: radial-gradient(ellipse at 10% 16%, #edd8ac1c, transparent 50%);
}
.editorial-glim { --story-ink: #164b35; --accent: #bf3c4b; --soft-accent: #ffede8; --outline: #e6dfc8; --story-heading: var(--f-display); }
.game-showcase h1, .game-showcase h2, .game-showcase h3 { color: var(--story-ink); }
.game-showcase h2 { font: 700 34px/1.06 var(--story-heading); letter-spacing: -.025em; }
.game-showcase h3 { font-family: var(--f-body); }
.game-showcase p { text-wrap: pretty; }
.game-showcase .site-header { background: #fff9edf0; border-bottom: 1px solid #e5d5b866; }
.game-showcase .header-inner { min-height: 76px; gap: 22px; }
.game-showcase .brand .logo-mark { width: 36px; height: 36px; }
.game-showcase .brand-word { font-size: 1.18rem; }
.game-showcase .nav { margin-left: auto; margin-right: 14px; gap: 26px; }
.game-showcase .nav a { font-size: .82rem; min-height: 44px; display: flex; align-items: center; }
.development-badge { border: 1px solid #ad8dc4; color: #68418c; border-radius: 999px; padding: 5px 10px; font-size: .67rem; white-space: nowrap; }
.development-badge::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; margin-right: 6px; background: currentColor; vertical-align: 1px; }
.editorial-glim .development-badge { color: #31684b; border-color: #a7c9af; }
.game-showcase .editorial-cta { color: #302237; background: #ffc447; box-shadow: none; min-height: 44px; border-color: #dfaa39; border-radius: 7px; white-space: nowrap; }
.editorial-glim .editorial-cta { background: #c83c4e; border-color: #c83c4e; color: white; border-radius: 999px; }
.game-showcase .editorial-cta:hover { filter: brightness(.95); }
.editorial-wrap { max-width: 1160px; padding: 0 24px; margin: auto; }
.svg-library { position: absolute; pointer-events: none; overflow: hidden; }
.editorial-hero { min-height: 540px; position: relative; isolation: isolate; }
.hero-illustration { position: absolute; right: -22px; top: 0; width: 61%; height: 100%; z-index: -1; }
.hero-illustration img { width: 100%; height: 100%; object-fit: cover; object-position: center top; mask-image: linear-gradient(90deg, transparent, #000 18%); }
.editorial-hero::after { content: ''; position: absolute; inset: auto -24px -1px; height: 30px; background: linear-gradient(transparent, var(--paper)); pointer-events: none; }
.editorial-hero-copy { position: relative; width: 50%; padding: 42px 0 28px; }
.hero-flourish { font: 400 34px/1.2 var(--f-moon); letter-spacing: 12px; color: #bc944b; margin-bottom: 10px; }
.editorial-hero h1 { font: 700 clamp(72px, 7.5vw, 100px)/.82 var(--f-moon); letter-spacing: -.045em; margin: 10px 0 26px; text-wrap: nowrap; }
.editorial-glim .editorial-hero h1 { font-family: var(--f-glim); color: #d44858; font-size: clamp(56px, 6.3vw, 80px); font-weight: 600; letter-spacing: -.035em; margin-top: 26px; margin-bottom: 20px; }
.editorial-tagline { font: 600 24px/1.25 var(--f-moon); width: fit-content; margin-bottom: 22px; }
.editorial-moon .editorial-tagline { color: white; background: var(--accent); padding: 6px 18px 8px; clip-path: polygon(0 0,100% 0,97% 50%,100% 100%,0 100%,3% 50%); }
.editorial-glim .editorial-tagline { font: 700 21px/1.25 var(--f-display); letter-spacing: -.025em; }
.editorial-intro { max-width: 35ch; font-size: 1rem; line-height: 1.65; }
.current-chapter { font-size: .75rem; margin-top: 22px; color: #625c6a; }
.hero-discover { display: inline-flex; gap: 20px; align-items: center; color: var(--accent); font-weight: 700; font-size: .8rem; text-decoration: none; margin-top: 14px; min-height: 44px; }
.hero-discover span { font-size: 1.4rem; }
.hero-discover:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero-pip { position: absolute; height: 255px; width: auto; object-fit: contain; left: 36%; bottom: 0; pointer-events: none; filter: drop-shadow(0 3px 4px #79481b15); }
.editorial-glim .editorial-hero-copy { width: 53%; padding-top: 48px; }
.editorial-glim .hero-illustration { width: 59%; }
.editorial-glim .hero-illustration img { mask-image: linear-gradient(90deg, transparent, #000 18%),radial-gradient(ellipse 30% 45% at left bottom, transparent 65%, #000 100%); mask-composite: intersect; }
.editorial-glim .editorial-intro { max-width: 30ch; }
.adventure-panel { display: grid; grid-template-columns: 235px minmax(0, 1fr); gap: 28px; align-items: center; position: relative; z-index: 1; padding: 24px; background: #fffdf5e8; border: 1px solid var(--outline); border-radius: 18px 24px 18px 12px; box-shadow: 0 5px 0 #e7d8ba42; }
.adventure-copy { padding-inline: 5px; }
.section-caption { display: flex; align-items: start; gap: 12px; }
.chapter-number { background: #e8d5b7; color: #71548f; width: 33px; height: 33px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font: 700 19px/1 var(--f-display); margin-top: 2px; }
.editorial-glim .chapter-number { background: #f7acaf; color: #9a2939; border-radius: 40% 50% 35% 50%; }
.adventure-copy > p { margin-block: 18px; font-size: .85rem; line-height: 1.7; }
.companion-note { display: flex; align-items: center; gap: 12px; }
.companion-note img { width: 42px; height: 75px; object-fit: contain; }
.companion-note b { font-family: var(--f-moon); font-style: italic; font-size: 20px; display: block; color: var(--accent); }
.companion-note span { display: block; font-size: .74rem; max-width: 18ch; }
.gameplay-figure { margin: 0; padding: 10px; background: #fff8e7; border: 1px solid #ead5b1; border-radius: 14px; box-shadow: 0 3px 9px #775a2812; }
.gameplay-link { position: relative; display: block; border-radius: 8px; overflow: hidden; }
.gameplay-link > img { width: 100%; aspect-ratio: 8/5; object-fit: contain; background: #e4d2aa; }
.expand-shot { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 34px; height: 34px; color: var(--story-ink); background: #fff9edf2; border-radius: 50%; font-size: 20px; transition: transform .2s; }
.gameplay-link:hover .expand-shot { transform: scale(1.1); }
.gameplay-figure figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px; padding: 8px 3px 0; text-transform: uppercase; font-size: .58rem; font-weight: 700; letter-spacing: .1em; }
.gameplay-figure figcaption span { text-transform: none; font-weight: 400; letter-spacing: 0; }
.editorial-glim .adventure-panel { border-color: #eee5cf; background: #fffdf9; }
.editorial-glim .gameplay-figure { background: white; border-color: #e0e6d2; }
.learning-section { display: grid; grid-template-columns: 225px minmax(0,1fr); gap: 24px; margin: 34px 0; align-items: center; }
.learning-section .section-caption { padding-left: 20px; }
.small-label { font-size: .65rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 10px; }
.learning-section .small-label { color: #75677b; }
.learning-section h2 { font-size: 32px; }
.learning-content { display: grid; min-width: 0; gap: 18px; }
.moon-exercise { grid-template-columns: 1fr 1fr 1fr; align-items: stretch; }
.equation-card { color: #fff9ec; background: #342b52; border: 1px solid #8770a0; border-radius: 6px; padding: 20px 16px; text-align: center; box-shadow: 4px 4px 0 #e5d9be; }
.equation-card > p:first-child { font: 600 22px/1.25 var(--f-moon); }
.equation { font: 500 30px/1.3 var(--f-moon); border: 1px solid #ceac62; background: #fff6df; color: #332842; padding: 8px 4px; margin-top: 18px; }
.puzzle-options { border: 0; padding: 0; margin: 18px 0 0; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.puzzle-options legend { font-size: .69rem; line-height: 1.4; margin-bottom: 10px; padding: 0; }
.puzzle-options button { min-height: 44px; min-width: 44px; background: #fff8e9; border: 1px solid #cbb993; color: #3c2e4f; border-radius: 6px; font-weight: 700; cursor: pointer; }
.puzzle-options button:hover { background: #f0e2fc; }
.puzzle-options button[aria-pressed="true"] { color: white; background: #68418c; border-color: #68418c; }
.seed-example { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff2d7; border: 1px solid #e5c990; border-radius: 9px; padding: 18px 12px; text-align: center; }
.seed-array { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px 10px; padding: 10px; }
.moonseed { width: 16px; height: 22px; border: 2px solid #d6b969; border-radius: 70% 30% 55% 45%; transform: rotate(17deg); background: radial-gradient(ellipse at 35% 35%, #c9a6df, #745398 55%, #3c2c5c); box-shadow: inset 1px 1px 1px #e7ceff; }
#demo-feedback { font-size: .72rem; line-height: 1.5; margin-top: 14px; min-height: 3em; }
.learning-note { background: #ffe4a4; border: 1px solid #dbbd7e; border-radius: 5px; padding: 16px; font-size: .77rem; transform: rotate(1deg); }
.learning-note > span { color: #b18942; display: block; font-size: 24px; }
.game-showcase details { font-size: .76rem; }
.game-showcase summary { cursor: pointer; font-weight: 700; min-height: 44px; padding-block: 12px; color: inherit; }
.game-showcase details p { padding-block: 0 10px; }
.editorial-glim .learning-section { padding: 24px; border: 2px solid white; border-radius: 20px; background: #fff8e8; grid-template-columns: 210px minmax(0, 1fr); }
.editorial-glim .learning-section .section-caption { padding: 0; }
.editorial-glim .learning-section .chapter-number { background: #f7d97e; color: #766021; }
.fairy-exercises { grid-template-columns: 1.2fr 1fr; }
.number-card, .word-card { background: #fffdf7; border: 1px solid #ebdab2; border-radius: 12px; padding: 18px 14px; text-align: center; min-width: 0; }
.number-card h3, .word-card h3 { font-size: .77rem; font-weight: 700; background: #ffe59c; padding: 4px 14px; border-radius: 5px; display: inline-block; }
.base-ten { display: flex; align-items: end; justify-content: center; gap: 18px; margin-top: 26px; }
.hundreds, .tens, .ones { display: flex; align-items: end; gap: 4px; }
.hundred { width: 40px; height: 40px; border: 1px solid #4f8c32; background-color: #8ecf60; background-image: repeating-linear-gradient(0deg, transparent 0 3px, #568c3c 3px 4px),repeating-linear-gradient(90deg,transparent 0 3px,#568c3c 3px 4px); }
.ten { width: 6px; height: 40px; border: 1px solid #43839c; background: repeating-linear-gradient(0deg, #8fc8e0 0 3px,#43839c 3px 4px); }
.one { width: 7px; height: 7px; border: 1px solid #bd9738; background: #f8ce62; }
.number-key { font-size: .73rem; font-weight: 700; margin-top: 20px; }
.number-key span:first-child { color: #477d32; }.number-key span:nth-child(2) { color: #246d91; }.number-key span:last-child { color: #936118; }
.editorial-glim .puzzle-options button[aria-pressed="true"] { background: #2b7650; border-color: #2b7650; }
.editorial-glim .puzzle-options legend { font-size: .7rem; }
.word-tiles { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 30px 0 12px; }
.word-tiles > span { font: 600 31px/1 var(--f-display); padding: 15px 11px; border: 1px solid #e9d0b0; color: #c53c51; border-radius: 8px; background: #fff1df; box-shadow: 0 3px 0 #f5e5cf; }
.word-tiles > span:last-child { color: #277346; background: #f0f7e8; }
.word-tiles em { font-style: normal; color: #c53c51; }
.word-tiles b { color: #8c7e69; font-size: 22px; }
.reading-caption { font-size: .7rem; color: #53644d; }
.customization-panel { display: grid; grid-template-columns: 255px minmax(0, 1fr); gap: 28px; padding: 28px; border: 1px solid var(--outline); background: #fffaf0; border-radius: 15px 21px 15px 17px; }
.customization-copy h2 { color: var(--accent); font-size: 36px; }
.custom-kinds { font-size: .82rem; font-weight: 600; margin: 12px 0; }
.customization-copy > p:not(.custom-kinds) { font-size: .8rem; }
.style-preview { display: grid; place-items: center; color: #6551a4; height: 165px; margin-top: 10px; background: radial-gradient(ellipse,#f1e8f299, transparent 70%); }
.large-item { width: 125px; height: 145px; filter: drop-shadow(0 5px 3px #402d4a12); }

.wardrobe-choices { display: grid; align-content: start; gap: 16px; }
.wardrobe-row { margin: 0; border: 0; padding: 0; min-width: 0; }
.wardrobe-row legend { font: 700 .72rem/1.3 var(--f-body); padding: 0; margin-bottom: 8px; }
.item-options { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.item-choice { background: #fff9e9; border: 1px solid #e9d8b5; border-radius: 7px; color: var(--item-color); min-height: 90px; padding: 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: border-color .15s, background .15s; }
.item-choice svg { width: 48px; height: 59px; flex: none; }
.item-choice span { font-size: .62rem; color: var(--story-ink); line-height: 1.25; padding-top: 5px; }
.item-choice:hover { background: #f2eaf5; border-color: #b295c3; }
.item-choice[aria-pressed="true"] { box-shadow: inset 0 0 0 1px #8c64a8; border-color: #8c64a8; background: #f5edf8; }
.editorial-glim .customization-panel { border: 2px solid white; background: #fbfaf0; }
.editorial-glim .customization-copy h2 { color: var(--story-ink); }
.editorial-glim .customization-panel .chapter-number { color: #2e6e4a; background: #bce4c3; }
.editorial-glim .item-options { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 6px; }
.editorial-glim .item-choice { background: #fffdf5; border-color: #e3e4ca; }
.editorial-glim .item-choice[aria-pressed="true"] { box-shadow: inset 0 0 0 1px #4b9064; border-color: #4b9064; background: #eef7e9; }
.editorial-glim .style-preview { color: #e1b2e2; }
.house-options { padding: 14px; background: #f0f4e5; border: 1px solid #dbe4ca; border-radius: 10px; display: flex; gap: 14px; align-items: center; }
.house-options h3 { font-size: .8rem; margin-bottom: 6px; }
.house-options p { font-size: .72rem; }
.house-options img { width: 130px; mix-blend-mode: multiply; }
.wallpaper-swatches { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.wallpaper-swatches span { border-radius: 5px; border: 1px solid #bbc7b6; padding: 15px 7px 5px; font-size: .6rem; color: #344a35; }
.wall-petals { background: radial-gradient(circle at 8px 6px,#ff9cc6 2px, transparent 3px) 0 0/15px 15px, #ffe3ef; }
.wall-leaves { background: repeating-linear-gradient(135deg,#dff7e8 0 8px,#a6d7ad 9px 11px,#dff7e8 12px 16px); }
.wallpaper-swatches .wall-stars { color: white; background: radial-gradient(circle at 5px 5px,#ffe58a 1px,transparent 2px) 0 0/12px 12px,#3b3f8f; }
.benefits-section { padding: 34px 0 24px; }
.benefits-section > h2 { display: flex; align-items: center; justify-content: center; gap: 18px; text-align: center; font-size: 36px; padding-bottom: 26px; }
.benefits-section > h2::before, .benefits-section > h2::after { content: ''; height: 1px; background: var(--outline); flex: 1; }
.benefits-section > h2 > span { color: #c9a25e; font-size: 22px; }
.benefits-list { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; }
.benefits-list li { text-align: center; padding: 0 20px; }
.benefits-list li + li { border-left: 1px dashed var(--outline); }
.benefit-icon { width: 64px; height: 64px; border-radius: 50%; border: 1px solid #bb9ec4; background: #e9dcf3; color: #705087; display: grid; place-items: center; margin: 0 auto 14px; }
.benefit-icon svg { width: 34px; height: 34px; }
.benefit-icon > span { font: 600 19px/1.1 var(--f-moon); }
.benefit-1 { background: #e8eed3; border-color: #b6c98a; color: #617c37; }.benefit-2 { background: #dbe5f0; border-color: #9fb2cc; color: #567197; }.benefit-3 { background: #ffe0cc; border-color: #e4ad8e; color: #a65e41; }
.editorial-glim .benefit-0 { background: #ffe7b1; border-color: #edc276; color: #896423; }
.editorial-glim .benefit-1 { background: #e9edd0; color: #71813d; }.editorial-glim .benefit-2 { background: #fce4df; border-color: #dea29b; color: #b45751; }.editorial-glim .benefit-3 { background: #fff0c5; border-color: #e7c678; color: #9c6c22; }
.benefits-list h3 { font-size: .82rem; line-height: 1.3; margin-bottom: 8px; }
.benefits-list p { font-size: .74rem; max-width: 22ch; margin: auto; }
.parent-note { font-size: .74rem; color: #716677; margin: 26px auto 0; max-width: 90ch; text-align: center; }
.editorial-glim .parent-note { color: #5c6c5e; }
.updates-panel { position: relative; background: #3c315d; color: #fff5dd; padding: 34px 90px; margin-bottom: 24px; border-radius: 5px 5px 15px 15px; overflow: hidden; text-align: center; }
.updates-panel h2 { color: #fff5dd; font-size: 32px; }
.updates-panel p:not(.small-label) { font-size: .82rem; margin-top: 12px; }
.updates-panel .editorial-cta { margin-top: 20px; }
.footer-moon { position: absolute; right: 44px; top: 18px; color: #c7a458; font: 400 180px/1 var(--f-moon); opacity: .55; transform: rotate(-15deg); }
.editorial-glim .updates-panel { background: #ceead1; color: #164b35; padding-inline: 180px; min-height: 240px; border-radius: 24px; }
.editorial-glim .updates-panel h2 { color: #164b35; font-size: 27px; }
.updates-friend { position: absolute; bottom: -20px; left: 20px; width: 150px; height: auto; }
.updates-fairy { position: absolute; bottom: -100px; right: -5px; width: 180px; height: auto; }
.game-showcase .editorial-footer { background: transparent; border-top: 1px solid var(--outline); padding-block: 24px; }
.editorial-footer > .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.editorial-footer nav { display: flex; flex-wrap: wrap; gap: 14px 22px; font-size: .75rem; }
.editorial-footer a { text-decoration: none; }
.editorial-footer a:hover { text-decoration: underline; }
.editorial-footer > .wrap > p { font-size: .65rem; color: #746b69; }
.gameplay-dialog { border: 1px solid #b79d6c; padding: 48px 12px 12px; border-radius: 14px; background: #fff9ed; width: min(1100px,95vw); max-height: 94dvh; }
.gameplay-dialog::backdrop { background: #17152cc9; backdrop-filter: blur(5px); }
.gameplay-dialog > img { width: 100%; max-height: calc(94dvh - 70px); object-fit: contain; }
.close-gameplay { position: absolute; top: 5px; right: 12px; min-height: 40px; border: 0; background: none; color: #332643; font-weight: 700; cursor: pointer; }
.close-gameplay span { margin-left: 12px; font-size: 22px; }
html:has(.gameplay-dialog[open]) { overflow: hidden; }
@media (max-width: 1080px) {
 .game-showcase .header-inner { gap: 14px; }.game-showcase .nav { gap: 16px; margin-right: 0; }.development-badge { display: none; }
 .editorial-hero { min-height: 510px; }.editorial-hero h1 { font-size: 82px; }.editorial-glim .editorial-hero h1 { font-size: 63px; }
 .adventure-panel { grid-template-columns: 205px minmax(0,1fr); gap: 20px; padding: 20px; }
 .learning-section { grid-template-columns: 190px minmax(0,1fr); gap: 18px; }.learning-section .section-caption { padding-left: 0; }
 .moon-exercise { gap: 12px; grid-template-columns: 1fr 1fr; }.learning-note { grid-column: 1/-1; transform: none; display: flex; align-items: center; gap: 12px; }.learning-note details { margin-left: auto; max-width: 50%; min-width: 150px; }
 .editorial-glim .learning-section { grid-template-columns: 180px minmax(0,1fr); padding: 18px; }
 .fairy-exercises { gap: 12px; }.base-ten { gap: 10px; }.hundred { width: 30px; height: 30px; background-size: 3px 3px; background-image: linear-gradient(0deg,transparent 2px,#568c3c 2px),linear-gradient(90deg,transparent 2px,#568c3c 2px); }.ten { height: 30px; background: repeating-linear-gradient(0deg,#8fc8e0 0 2px,#43839c 2px 3px); }
 .customization-panel { grid-template-columns: 220px minmax(0,1fr); gap: 18px; padding: 22px; }.editorial-glim .item-options { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .benefits-list li { padding-inline: 12px; }
}
@media (max-width: 820px) {
 .game-showcase .header-inner { flex-wrap: wrap; padding-block: 10px; min-height: 68px; }.game-showcase .header-inner > .editorial-cta { margin-left: auto; }
 .game-showcase .menu-toggle { display: none; margin-left: 0; }.game-showcase .nav { display: flex; position: static; width: 100%; padding: 0; gap: 16px; background: var(--paper); box-shadow: none; border: 0; margin: 0; flex-direction: row; }.game-showcase .nav a { font-size: .8rem; border: 0; padding-block: 8px; }
 .showcase-enhanced .game-showcase .menu-toggle { display: inline-flex; }.showcase-enhanced .game-showcase .nav { display: none; position: absolute; top: 100%; padding: 10px 24px 18px; border-bottom: 1px solid var(--outline); flex-direction: column; gap: 0; }.showcase-enhanced .game-showcase .nav.open { display: flex; }
 .editorial-hero { min-height: 465px; }.editorial-hero h1 { font-size: 72px; }.editorial-glim .editorial-hero h1 { font-size: 56px; }.editorial-hero-copy { width: 55%; }.editorial-glim .editorial-hero-copy { width: 58%; }.editorial-intro { font-size: .9rem; }.editorial-tagline { font-size: 21px; }.editorial-glim .editorial-tagline { font-size: 18px; }.hero-illustration { width: 60%; right: -24px; }.hero-pip { height: 185px; left: 44%; }
 .adventure-panel { grid-template-columns: 1fr; padding: 20px; }.adventure-copy { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px 22px; align-items: start; }.adventure-copy > p { margin: 0; }.companion-note { grid-column: 1; }.companion-note img { height: 55px; }.gameplay-figure { grid-column: 1/-1; }
 .learning-section, .editorial-glim .learning-section { grid-template-columns: 1fr; gap: 20px; }.learning-section .section-caption { align-items: center; }.learning-section h2 br { display: none; }.moon-exercise { grid-template-columns: 1fr 1fr 1fr; }.learning-note { grid-column: auto; display: block; }.learning-note details { max-width: none; min-width: 0; }.seed-array { gap: 10px 7px; }.moonseed { width: 14px; height: 18px; }
 .fairy-exercises { grid-template-columns: 1.2fr 1fr; }.hundred { width: 40px; height: 40px; background-size: 4px 4px; background-image: linear-gradient(0deg,transparent 3px,#568c3c 3px),linear-gradient(90deg,transparent 3px,#568c3c 3px); }.ten { height: 40px; background: repeating-linear-gradient(0deg,#8fc8e0 0 3px,#43839c 3px 4px); }
 .customization-panel { grid-template-columns: 190px minmax(0,1fr); }.customization-copy h2 { font-size: 32px; }.item-options { grid-template-columns: repeat(4,minmax(0,1fr)); }.item-choice span { font-size: .58rem; }.item-choice svg { width: 40px; height: 52px; }.house-options { flex-direction: column; align-items: start; }.house-options img { display: none; }
 .benefits-section > h2 { font-size: 30px; gap: 10px; }.benefits-list { grid-template-columns: 1fr 1fr; gap: 24px 0; }.benefits-list li:nth-child(3) { border-left: 0; }
 .editorial-glim .updates-panel { padding-inline: 120px; }.updates-friend { width: 110px; left: 8px; }.updates-fairy { width: 135px; bottom: -45px; }
}
@media (max-width: 600px) {
 .editorial-wrap { padding: 0 16px; }.game-showcase .header-inner { gap: 12px; }.game-showcase .brand-word { font-size: 1rem; }.game-showcase .brand .logo-mark { width: 30px; height: 30px; }.game-showcase .header-inner > .editorial-cta { padding-inline: 14px; font-size: .73rem; }
 .editorial-hero { min-height: 0; padding-bottom: 0; }.editorial-hero-copy, .editorial-glim .editorial-hero-copy { width: 100%; padding: 26px 4px 0; }.hero-flourish { font-size: 25px; margin-bottom: 16px; }.editorial-hero h1 { font-size: clamp(66px,19vw,100px); line-height: .8; margin-bottom: 24px; }.editorial-glim .editorial-hero h1 { font-size: clamp(45px,12.3vw,70px); margin-top: 5px; margin-bottom: 18px; }.editorial-tagline { font-size: 23px; margin-bottom: 18px; }.editorial-glim .editorial-tagline { font-size: 20px; }.editorial-intro, .editorial-glim .editorial-intro { font-size: .92rem; max-width: 36ch; }.current-chapter { margin-top: 16px; }.hero-discover { margin-top: 4px; }
 .hero-illustration, .editorial-glim .hero-illustration { position: relative; right: auto; top: auto; width: calc(100% + 32px); height: 325px; margin: 0 -16px; z-index: 0; order: 2; }.editorial-hero { display: flex; flex-direction: column; }.hero-illustration img { object-position: center 15%; object-fit: cover; mask-image: linear-gradient(0deg,transparent,#000 6%,#000 92%,transparent),linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-composite: intersect; }.editorial-glim .hero-illustration { height: 330px; }.editorial-hero::after { display: none; }.hero-pip { width: 114px; height: 170px; left: -3px; bottom: 1px; z-index: 2; }
 .adventure-panel { padding: 18px 14px 14px; gap: 18px; border-radius: 14px; }.adventure-copy { grid-template-columns: 1fr; gap: 14px; }.adventure-copy .section-caption { align-items: center; }.adventure-copy h2 br { display: none; }.game-showcase h2 { font-size: 29px; }.adventure-copy > p { font-size: .84rem; }.companion-note { gap: 10px; }.companion-note img { height: 46px; width: 32px; }.companion-note p { display: flex; gap: 10px; align-items: center; }.companion-note span { max-width: none; }.gameplay-figure { padding: 6px; border-radius: 10px; }.gameplay-figure figcaption { font-size: .55rem; gap: 2px; }.gameplay-figure figcaption span { font-size: .55rem; }
 .learning-section { margin-block: 26px; }.learning-content.moon-exercise { grid-template-columns: 1fr; gap: 16px; }.equation-card { padding: 20px; }.equation-card > p:first-child br { display: none; }.equation { max-width: 230px; margin-inline: auto; }.puzzle-options legend { font-size: .76rem; }.seed-array { gap: 12px 18px; }.moonseed { width: 19px; height: 25px; }.seed-example { padding: 20px 16px; }#demo-feedback { font-size: .76rem; min-height: 0; }.learning-note { padding: 18px; }.learning-note > span { display: none; }.learning-note p { font-size: .85rem; }
 .editorial-glim .learning-section { padding: 20px 12px; }.fairy-exercises { grid-template-columns: 1fr; gap: 14px; }.number-card, .word-card { padding: 18px 12px; }.base-ten { gap: 16px; }.word-tiles { margin-top: 24px; }.word-card details { font-size: .82rem; }
 .customization-panel { grid-template-columns: 1fr; padding: 22px 16px; gap: 22px; }.customization-copy .section-caption { align-items: center; }.customization-copy h2 { font-size: 32px; }.customization-copy > p:not(.custom-kinds) { font-size: .82rem; }.custom-kinds { margin: 12px 0; }.style-preview { height: 110px; margin-top: 10px; }.large-item { height: 105px; width: 110px; }.wardrobe-row legend { font-size: .8rem; }.item-options { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.editorial-glim .item-options { grid-template-columns: repeat(3,minmax(0,1fr)); }.item-choice { min-height: 99px; }.item-choice svg { width: 50px; height: 62px; }.item-choice span { font-size: .68rem; }.house-options { padding: 14px; }.house-options h3 { font-size: .86rem; }.house-options p { font-size: .8rem; }.wallpaper-swatches span { font-size: .62rem; }
 .benefits-section { padding-top: 26px; }.benefits-section > h2 { font-size: 29px; gap: 8px; padding-bottom: 22px; }.benefits-section > h2 > span { display: none; }.benefits-section > h2::before, .benefits-section > h2::after { display: none; }.benefits-list li { padding-inline: 10px; }.benefits-list h3 { font-size: .8rem; }.benefits-list p { font-size: .72rem; }.benefit-icon { width: 58px; height: 58px; }.parent-note { font-size: .72rem; }
 .updates-panel, .editorial-glim .updates-panel { padding: 28px 20px; min-height: 0; }.updates-panel h2 { font-size: 30px; position: relative; z-index: 1; }.updates-panel > div { position: relative; z-index: 1; }.footer-moon { right: -20px; opacity: .18; }.updates-friend, .updates-fairy { display: none; }.editorial-footer > .wrap { flex-direction: column; align-items: start; gap: 18px; }.editorial-footer nav { font-size: .76rem; gap: 14px 18px; }.editorial-footer > .wrap > p { font-size: .68rem; }
}
/* Painted production assets bring the selected mockup's wardrobe and paper details into HTML. */
.game-showcase .customization-panel { position: relative; isolation: isolate; grid-template-columns: minmax(175px,1fr) minmax(175px,.95fr) minmax(0,2.5fr); gap: 24px; padding: 30px 26px; border: 1px solid #d6c19c; box-shadow: inset 0 0 0 5px #fff9ef, inset 0 0 0 6px #eadcc6, 0 4px 0 #ecdfc53d; }
.game-showcase .customization-copy { align-self: center; padding-bottom: 36px; }
.game-showcase .customization-copy h2 { font-size: 37px; }
.game-showcase .customization-copy .section-caption { gap: 9px; }
.game-showcase .currency-note { display: flex; align-items: center; gap: 10px; margin-top: 26px; font-weight: 700; color: var(--accent); }
.currency-note img { width: 28px; height: 34px; object-fit: contain; }.currency-note > span:first-child:not(:last-child) { font-size: 34px; }
.currency-note small { display: block; font-size: .62rem; color: #6b606d; font-weight: 400; }
.character-custom-preview { margin: 0; min-width: 0; align-self: center; }
.game-showcase .style-preview { height: 300px; width: 100%; position: relative; margin: 0; background: radial-gradient(ellipse at 50% 80%,#d9c8e64a,transparent 68%); }
.editorial-glim .style-preview { background: radial-gradient(ellipse at 50% 80%,#dfc7e344,transparent 68%); }

.game-showcase .wardrobe-choices { align-self: center; gap: 12px; }
.game-showcase .item-options { gap: 0; border: 1px solid #dfcba6; border-radius: 7px; overflow: hidden; background: #fffaed; }
.game-showcase .item-choice { background: transparent; border: 0; border-right: 1px solid #e4d3b6; border-radius: 0; min-height: 111px; padding: 7px 5px; box-shadow: none; }
.game-showcase .item-choice:last-child { border-right: 0; }
.game-showcase .item-choice[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #c6a15a; background: #fff1cf66; }
.game-showcase .item-choice:hover { background: #f0e2f34d; }
.game-showcase .item-art { width: 100%; height: 84px; object-fit: contain; filter: drop-shadow(0 2px 1px #43312b15); }
.game-showcase .item-choice span { font-size: .6rem; padding-top: 3px; }
.editorial-glim .item-choice[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #6b9b78; background: #e5f0df88; }
.editorial-glim .item-art { height: 74px; }.editorial-glim .item-choice { min-height: 105px; }
.adventure-panel { isolation: isolate; }
.adventure-panel::before, .customization-panel::before { content: ''; position: absolute; width: 136px; height: 136px; left: -17px; bottom: -12px; background: url('img/showcase/moonstone-botanical.webp') left bottom/contain no-repeat; z-index: -1; pointer-events: none; opacity: .9; }
.editorial-glim .adventure-panel::before, .editorial-glim .customization-panel::before { background-image: url('img/showcase/glimmerwood-botanical.webp'); }
.game-showcase .moonseed { background: url('img/showcase/moonstone-moonseed-token.webp') center/contain no-repeat; border: 0; box-shadow: none; transform: none; border-radius: 0; width: 20px; height: 28px; }
.benefit-icon:has(img) { background: transparent; border-color: transparent; }
.benefit-icon img { width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 3px 1px #6c4a3117); }
@media (max-width: 1080px) {
 .game-showcase .customization-panel { grid-template-columns: minmax(165px,1fr) minmax(140px,.85fr) minmax(0,2.4fr); padding: 26px 20px; gap: 18px; }
 .game-showcase .customization-copy h2 { font-size: 33px; }.game-showcase .style-preview { height: 280px; }
 .editorial-glim .item-options { grid-template-columns: repeat(3,minmax(0,1fr)); }.editorial-glim .item-choice { border-bottom: 1px solid #e4d3b6; }
}
@media (max-width: 820px) {
 .game-showcase .customization-panel { grid-template-columns: 190px minmax(0,1fr); gap: 22px; }
 .game-showcase .customization-copy { grid-column: 1/-1; padding: 0; }
 .game-showcase .customization-copy .section-caption { align-items: center; }.game-showcase .customization-copy .currency-note { margin-top: 14px; }
 .game-showcase .style-preview { height: 300px; }.game-showcase .item-art { height: 76px; }.game-showcase .item-choice { min-height: 102px; }
 .game-showcase .moonseed { width: 16px; height: 22px; }.adventure-panel::before, .customization-panel::before { width: 100px; height: 100px; opacity: .65; }
}
@media (max-width: 600px) {
 .game-showcase .customization-panel { grid-template-columns: 1fr; padding: 22px 18px 28px; gap: 22px; }
 .game-showcase .customization-copy h2 { font-size: 34px; }.character-custom-preview { width: min(250px,100%); margin: auto; }
 .game-showcase .style-preview { height: 320px; }
 .game-showcase .item-art { height: 100px; }.game-showcase .item-choice { min-height: 130px; padding: 8px; border-bottom: 1px solid #e4d3b6; }.game-showcase .item-choice span { font-size: .72rem; }
 .editorial-glim .item-art { height: 86px; }.editorial-glim .item-choice { min-height: 115px; padding-inline: 4px; }.editorial-glim .item-choice span { font-size: .65rem; }
 .adventure-panel::before, .customization-panel::before { width: 95px; height: 95px; left: -12px; bottom: -16px; opacity: .6; }
 .game-showcase .moonseed { width: 20px; height: 28px; }
}

/* Outfit layers share one illustration coordinate system at every viewport size. */
.wardrobe-avatar { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 3px #43334b12); }

/* Complete Moonstone equipment portraits keep their painted grip and fit intact. */
img.wardrobe-avatar { object-fit: contain; }
.editorial-moon .style-preview { height: 340px; }