/* Learning Gem - child dashboard "Storybook" reskin (design slice 2,
   lg-v124; readability fix rounds lg-v125, lg-v126, lg-v127 and
   lg-v128; shop Slice A additions lg-v129).
   Visual layer only, loaded
   after buddyhero-lg1.css.
   dash-lg1.js puts .lgdn-root on the signed-in home screen's root;
   everything here is scoped to it (plus the dashboard-only state
   class html.lg-dash that landing-LG4.js already maintains), so no
   other screen can be touched. The dashboard joins the welcome
   screen's navy storybook look: deep-navy sky (painted over the app's
   own fixed background layer), a deepened header bar, dark panels,
   light text and gold accents - the landing palette (Deep Navy
   #172554 family, Sunshine Gold #F5B700).

   Readability rules, deliberately:
   - Muted text is lifted to #aeb8e8 on the navy (about 7.5:1 against
     #172554, better than the muted grey-lavender has on the old
     light background), and the level-name label in the header -
     9px muted text that used to sit on the violet gradient - gets
     the same lift; the level pill itself stays a light pill with
     its violet text, exactly as readable as before.
   - The gem-identity banner keeps its own pastel background and its
     dark muted trait text (a counter-rule below), and the quick-link
     tiles keep their pastel gradients: bright panels on the navy,
     with their text contrast untouched.
   - Subject cards keep their gradient headers and white footers
     (the footers' dark text rules in landing-LG4.css stay correct).

   No copy, no layout geometry, no behaviour changes - colour,
   background and decoration only. */

/* The sky: the app's fixed background layer, repainted navy (this
   selector outranks the light-gradient rule landing-LG4.css sets for
   the same layer), the root painted to match for overscroll, and the
   body behind it deep navy while the dashboard is the screen shown. */
html.lg-dash #root .lgdn-root > .fixed.inset-0.-z-10 > div {
  background:
    radial-gradient(1100px 520px at 10% -6%, rgba(124, 58, 237, .34), rgba(124, 58, 237, 0) 60%),
    radial-gradient(920px 500px at 96% 108%, rgba(13, 148, 136, .26), rgba(13, 148, 136, 0) 60%),
    linear-gradient(180deg, #0b1130 0%, #141c42 46%, #172554 100%) !important;
}
html.lg-dash body { background-color: #0b1130; }
.lgdn-root { background-color: #0b1130; color: #eef1ff; }

/* The header bar: the app's violet gradient deepened into the navy
   family, with a gold hairline under it. The level pill, streak pill
   and gem button inside keep their own light styling. */
.lgdn-root > header {
  background: linear-gradient(90deg, #2b1a6d 0%, #1b2350 55%, #0f2f52 100%);
  border-bottom-color: rgba(245, 183, 0, .38);
}

/* Muted text on the navy, everywhere on this screen... */
.lgdn-root .text-muted-foreground { color: #aeb8e8; }
/* ...except inside the gem-identity banner, which keeps its pastel
   background and therefore its original dark muted text. (When the
   banner is the main's first child, landing-LG4.css's own !important
   rule for it says the same thing and wins - either way it stays
   dark-on-pastel, exactly as before.) */
.lgdn-root main > div.rounded-2xl .text-muted-foreground { color: #62628a; }
/* The one muted line landing-LG4.css forces dark-purple with
   !important: the "Grade N - Choose a subject to start" line under
   the mascot. Outrank it so it reads on the navy. */
html.lg-dash #root .lgdn-root main section.text-center > p.text-muted-foreground {
  color: #c9d2f5 !important;
}
/* Section headings landing-LG4.css forces dark-purple: same fix. */
html.lg-dash #root .lgdn-root main > section > h3 { color: #e6eaff !important; }

/* The greeting: white melting into gold, in place of the violet
   gradient (its Fredoka font comes from landing-LG4.css and stays). */
.lgdn-root main section.text-center h1 {
  background-image: linear-gradient(92deg, #ffffff 5%, #ffe9a8 52%, #f5b700 95%);
}

/* Dark panels: the white and card-coloured pieces inside the main
   column (milestone chest, surprise box and friends) become deep
   panels. Subject-card footers are excluded - they stay white, with
   their dark text, as bright strips under the gradient headers. */
.lgdn-root main .bg-white:not([data-testid^="card-subject-"] *),
.lgdn-root main .bg-card { background-color: #1c2650; }
.lgdn-root main .bg-white\/80 { background-color: rgba(28, 38, 80, .94); }

/* Dark text colours those panels used to carry, lifted for the
   navy. (The invite button is the exception: it keeps its light
   pill, so its violet text is restored by the next rule.) */
.lgdn-root main .text-slate-700 { color: #cbd5e1; }
.lgdn-root main .text-violet-800 { color: #ddd6fe; }
.lgdn-root main .text-violet-700 { color: #c4b5fd; }
.lgdn-root main .text-amber-700 { color: #fcd34d; }
.lgdn-root main .text-primary { color: #c4b5fd; }
.lgdn-root main [data-testid="button-invite"] { color: #6d28d9; }

/* Today's Adventure: the panel keeps its own violet gradient, but
   its not-yet-done step rows are bg-white cards, so the dark-panel
   rule above repaints them navy - and their dark text would go
   unreadable unless it is lifted too. The game name inherits the
   row's text-gray-800 and the step label is text-gray-500; both
   lift here, scoped to the panel's own step rows. (Done rows ride
   on bg-white/25 with light text already.) */
.lgdn-root main [data-testid="daily-adventure"] [data-testid^="daily-"] { color: #eef1ff; }
.lgdn-root main [data-testid="daily-adventure"] [data-testid^="daily-"] .text-gray-500 { color: #aeb8e8; }

/* Fix round 2 (lg-v126): the two rules above still lost the game
   name and the step label. landing-LG4.css paints both DIRECTLY -
   its daily-row rules give .font-extrabold color #2e1065 and
   .uppercase color #6b5a9a !important - and a rule that matches an
   element itself always beats a colour it would merely inherit
   from the row, whatever the row rule's specificity. So the name
   and label are lifted directly here too: both declarations are
   !important, and this selector (1,5,2) outranks the landing
   rules' (1,4,1); dash-lg1.css also loads after landing-LG4.css.
   Verified by a computed-style cascade test against the real
   stylesheets: name computes #eef1ff, label #aeb8e8. */
html.lg-dash #root .lgdn-root main [data-testid="daily-adventure"] [data-testid^="daily-"] .font-extrabold { color: #eef1ff !important; }
html.lg-dash #root .lgdn-root main [data-testid="daily-adventure"] [data-testid^="daily-"] .uppercase { color: #aeb8e8 !important; }

/* My Gem Chest keeps its pale cream gradient - one of the
   intentional pastel panels, like the gem banner and the
   quick-link tiles - so its text stays dark and readable: the
   tier-and-gems line takes a deep violet instead of inheriting
   the root's near-white, the heading keeps its own amber-700,
   and the "more gems to the next chest" line keeps the same dark
   muted the gem banner uses. */
.lgdn-root main [data-testid="gem-chest"] { color: #37305e; }
.lgdn-root main [data-testid="gem-chest"] .text-amber-700 { color: #b45309; }
.lgdn-root main [data-testid="gem-chest"] .text-muted-foreground { color: #62628a; }

/* Fix round 3 (lg-v127): the last two washed-out spots the
   production pass found.
   (1) The "Your Progress" panel: like the Gem Chest it keeps its
   pale panel - the amber/yellow gradient section (the only one in
   the app with this gradient) - but it has no testid and its h3 is
   a plain section heading, so the general section-heading rule
   above paints it #e6eaff, near-white on pale yellow: almost
   invisible. The heading - and only the heading - takes the Gem
   Chest's deep violet instead (#37305e, about 10:1 on every stop
   of the gradient). The rule names the panel by its gradient
   classes, is !important, and at (1,6,4) outranks both the
   section-heading rule (1,2,4) and the landing rule beneath it
   (1,1,4); the stats below keep their own colours, and the
   heading's gold icon keeps landing's own svg colour. The
   "Activities for You" heading is a different section (no
   gradient) and stays light on the navy, untouched.
   (2) The header level name ("Beginner" and friends): the 9px
   muted span under the XP bar, in the level pill's right-hand
   column. The general muted lift above does reach it (#aeb8e8),
   but at 9px it still reads faint on the deepened header. It is
   lifted directly here to #c9d2f5 - about 9.6:1 on the header
   gradient's brightest stop, more on the rest - scoped to the
   exact span: the only text-[9px] muted span in the header, the
   direct child of the pill's hidden sm:flex flex-col column.
   The "Level N" text and the XP bar beside it match nothing in
   this selector and keep their violet-on-light-pill colours.
   Both verified by a computed-style cascade test against the
   real stylesheets (dash-contrast-test.js).
   lg-v128: the colour was right but at 9px the name still read
   faint beside the bold "Level N" pill, so the same rule now
   also grows it - 11.5px, weight 600, line-height 1.25 and a
   touch of letter spacing - still a small caption under the
   bar, just one that stands out. The pill is a centred flex
   row with no fixed height: the column grows from about 17px
   to about 22.4px (6px bar + 2px gap + 14.4px line), still
   under the pill's own ~24px, and the header bar is
   content-sized, so nothing shifts or clips; below 640px the
   column stays hidden, as the app has it. Verified by
   dash-level-label-test.js. */
html.lg-dash #root .lgdn-root main section.bg-gradient-to-br.from-amber-100.via-yellow-50.to-orange-100 > h3 { color: #37305e !important; }
html.lg-dash #root .lgdn-root > header .hidden.sm\:flex.flex-col > span.text-\[9px\].text-muted-foreground { color: #c9d2f5 !important; font-size: 11.5px !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: 0.02em !important; }

/* The header's streak badge: dash-lg1.js tags it .lgdn-streak.
   Its own colours - a milestone tint at 13% alpha with the
   milestone colour as its text, or the orange fallback pair -
   were chosen against the old violet header and go dark on the
   deepened navy. It becomes a warm amber glass pill instead:
   flame and day count in light amber, readable at any streak. */
.lgdn-root > header .lgdn-streak {
  background: rgba(247, 103, 7, .22) !important;
  border-color: rgba(255, 169, 77, .65) !important;
  color: #ffc978 !important;
}
.lgdn-root > header .lgdn-streak * { color: #ffc978 !important; }

/* ---- The Explorer Buddy in the hero slot (dash-lg1.js) ----
   He takes the old mascot picture's centred slot at a similar size,
   with the hero's own drop-shadow glow. The old picture steps aside
   only under .lgdn-buddy-on, which dash-lg1.js adds once the Buddy
   has loaded; until then, or if he cannot load, it stays. */
.lgdn-root .lgdn-buddy {
  display: block;
  width: clamp(150px, 40vw, 208px);
  height: auto;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  filter: drop-shadow(0 12px 22px rgba(2, 6, 23, .5))
          drop-shadow(0 0 34px rgba(124, 58, 237, .35));
}
.lgdn-root .lgdn-buddy-on > img:not(.lgdn-buddy) { display: none; }
/* lg-v132: the picture sits in a wrap (dash-lg1.js) that carries
   the float, so the equipped Buddy Accessory can ride inside it.
   Same size the picture always had; the picture fills the wrap. */
.lgdn-root .lgdn-buddy-wrap {
  position: relative;
  display: block;
  width: clamp(150px, 40vw, 208px);
}
.lgdn-root .lgdn-buddy-wrap .lgdn-buddy { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .lgdn-root .lgdn-buddy-wrap { animation: lgDnFloat 3.2s ease-in-out infinite alternate; }
}
@keyframes lgDnFloat {
  from { translate: 0 0; }
  to { translate: 0 -9px; }
}
@media (prefers-reduced-motion: reduce) {
  .lgdn-root .lgdn-buddy-wrap { animation: none !important; }
}

/* ---- Equipped border + title (dash-lg1.js) ----
   The title: the shop name of the equipped title, in gold beside the
   child's name in the header. The name itself is hidden below
   640px, so at phone widths the title moves to the hero greeting
   instead (the .lgdn-title-hero pill below) - no width is left
   title-less. The border ring (further below) shows at every
   width, because the avatar itself is always in the header. */
.lgdn-root .lgdn-title { display: none; }
@media (min-width: 640px) {
  .lgdn-root .lgdn-title {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    color: #ffd977;
    white-space: nowrap;
  }
}
/* The phone-width title: a small gold pill dash-lg1.js places in
   the hero greeting right after the "Hi <name>!" heading, shown
   only under the same 640px line where the header name (and its
   chip) disappears. */
.lgdn-root .lgdn-title-hero { display: none; }
@media (max-width: 639.98px) {
  .lgdn-root .lgdn-title-hero {
    display: inline-flex;
    align-items: center;
    margin-top: 4px;
    padding: 2px 10px;
    border: 1.5px solid rgba(245, 183, 0, .55);
    border-radius: 999px;
    background: rgba(245, 183, 0, .14);
    color: #ffd977;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    white-space: nowrap;
  }
}
/* The border: the avatar becomes a navy disc, and the equipped
   border paints the ring around it - an outer paint layer under a
   navy centre disc (radial-gradient closest-side), with a soft outer
   glow on the jewel borders. One rule per shop border id. The
   attribute rides on the profile button AND on the avatar span
   itself (dash-lg1.js sets both), so the ring paints on the avatar
   element that is actually visible in the header at every width.
   With no border equipped, dash-lg1.js sets no data-lg-border and
   the avatar keeps its exact original look. */
.lgdn-root [data-lg-border] .lgdn-avatar,
.lgdn-root .lgdn-avatar[data-lg-border] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
}
.lgdn-root [data-lg-border="rainbow"] .lgdn-avatar,
.lgdn-root .lgdn-avatar[data-lg-border="rainbow"] {
  background:
    radial-gradient(circle closest-side, #141c3f 0 78%, rgba(20, 28, 63, 0) 80%),
    conic-gradient(from 210deg, #ff5d5d, #ffb84d, #f5e663, #5dd95d, #4dc3ff, #9d6bff, #ff5d5d);
}
.lgdn-root [data-lg-border="gold"] .lgdn-avatar,
.lgdn-root .lgdn-avatar[data-lg-border="gold"] {
  background:
    radial-gradient(circle closest-side, #141c3f 0 78%, rgba(20, 28, 63, 0) 80%),
    linear-gradient(135deg, #ffe98a, #f5b700 45%, #b97e06 72%, #ffd94d);
}
.lgdn-root [data-lg-border="purple"] .lgdn-avatar,
.lgdn-root .lgdn-avatar[data-lg-border="purple"] {
  background:
    radial-gradient(circle closest-side, #141c3f 0 78%, rgba(20, 28, 63, 0) 80%),
    linear-gradient(135deg, #d8b4fe, #a855f7 55%, #7c3aed);
  box-shadow: 0 0 10px 2px rgba(168, 85, 247, .65);
}
.lgdn-root [data-lg-border="fire"] .lgdn-avatar,
.lgdn-root .lgdn-avatar[data-lg-border="fire"] {
  background:
    radial-gradient(circle closest-side, #141c3f 0 78%, rgba(20, 28, 63, 0) 80%),
    linear-gradient(135deg, #fde68a, #f97316 48%, #dc2626);
  box-shadow: 0 0 10px 2px rgba(249, 115, 22, .5);
}
.lgdn-root [data-lg-border="ice"] .lgdn-avatar,
.lgdn-root .lgdn-avatar[data-lg-border="ice"] {
  background:
    radial-gradient(circle closest-side, #141c3f 0 78%, rgba(20, 28, 63, 0) 80%),
    linear-gradient(135deg, #ffffff, #bae6fd 48%, #38bdf8);
}
.lgdn-root [data-lg-border="diamond"] .lgdn-avatar,
.lgdn-root .lgdn-avatar[data-lg-border="diamond"] {
  background:
    radial-gradient(circle closest-side, #141c3f 0 78%, rgba(20, 28, 63, 0) 80%),
    linear-gradient(135deg, #ffffff, #cffafe 38%, #a5f3fc 62%, #f0abfc);
  box-shadow: 0 0 12px 3px rgba(165, 243, 252, .55);
}

/* ---- Shop Slice A (lg-v129): the eight new border rings ----
   Same construction as the original six: a navy centre disc over
   the ring paint, with a soft glow on the jewel entries. One rule
   per new shop border id. The Aurora Ring's glow breathes slowly,
   and only when reduced motion is off. */
.lgdn-root [data-lg-border="sunset"] .lgdn-avatar,
.lgdn-root .lgdn-avatar[data-lg-border="sunset"] {
  background:
    radial-gradient(circle closest-side, #141c3f 0 78%, rgba(20, 28, 63, 0) 80%),
    linear-gradient(135deg, #fda4af, #fb923c 50%, #f43f5e);
}
.lgdn-root [data-lg-border="forest"] .lgdn-avatar,
.lgdn-root .lgdn-avatar[data-lg-border="forest"] {
  background:
    radial-gradient(circle closest-side, #141c3f 0 78%, rgba(20, 28, 63, 0) 80%),
    linear-gradient(135deg, #bbf7d0, #22c55e 55%, #166534);
}
.lgdn-root [data-lg-border="ocean"] .lgdn-avatar,
.lgdn-root .lgdn-avatar[data-lg-border="ocean"] {
  background:
    radial-gradient(circle closest-side, #141c3f 0 78%, rgba(20, 28, 63, 0) 80%),
    linear-gradient(135deg, #a5f3fc, #0ea5e9 55%, #075985);
}
.lgdn-root [data-lg-border="candy"] .lgdn-avatar,
.lgdn-root .lgdn-avatar[data-lg-border="candy"] {
  background:
    radial-gradient(circle closest-side, #141c3f 0 78%, rgba(20, 28, 63, 0) 80%),
    linear-gradient(135deg, #fbcfe8, #f472b6 50%, #a7f3d0);
}
.lgdn-root [data-lg-border="galaxy"] .lgdn-avatar,
.lgdn-root .lgdn-avatar[data-lg-border="galaxy"] {
  background:
    radial-gradient(circle closest-side, #141c3f 0 78%, rgba(20, 28, 63, 0) 80%),
    linear-gradient(135deg, #c4b5fd, #7c3aed 55%, #1e1b4b);
  box-shadow: 0 0 10px 2px rgba(124, 58, 237, .6);
}
.lgdn-root [data-lg-border="lightning"] .lgdn-avatar,
.lgdn-root .lgdn-avatar[data-lg-border="lightning"] {
  background:
    radial-gradient(circle closest-side, #141c3f 0 78%, rgba(20, 28, 63, 0) 80%),
    linear-gradient(135deg, #fef08a, #facc15 55%, #f97316);
  box-shadow: 0 0 10px 2px rgba(250, 204, 21, .55);
}
.lgdn-root [data-lg-border="aurora"] .lgdn-avatar,
.lgdn-root .lgdn-avatar[data-lg-border="aurora"] {
  background:
    radial-gradient(circle closest-side, #141c3f 0 78%, rgba(20, 28, 63, 0) 80%),
    conic-gradient(from 200deg, #86efac, #22d3ee, #a78bfa, #f0abfc, #86efac);
  box-shadow: 0 0 10px 2px rgba(134, 239, 172, .5);
}
@media (prefers-reduced-motion: no-preference) {
  .lgdn-root [data-lg-border="aurora"] .lgdn-avatar,
  .lgdn-root .lgdn-avatar[data-lg-border="aurora"] { animation: lgDnAurora 5s ease-in-out infinite alternate; }
}
@keyframes lgDnAurora {
  from { box-shadow: 0 0 8px 2px rgba(134, 239, 172, .45); }
  to { box-shadow: 0 0 14px 4px rgba(167, 139, 250, .55); }
}
.lgdn-root [data-lg-border="starlight"] .lgdn-avatar,
.lgdn-root .lgdn-avatar[data-lg-border="starlight"] {
  background:
    radial-gradient(circle closest-side, #141c3f 0 78%, rgba(20, 28, 63, 0) 80%),
    linear-gradient(135deg, #ffffff, #fef3c7 45%, #f5b700);
  box-shadow: 0 0 12px 3px rgba(254, 243, 199, .6);
}

/* ---- Shop Slice A (lg-v129): Dashboard Themes ----
   dash-lg1.js sets data-lg-theme on the dashboard root when a
   theme is equipped; with no attribute the base sky rule above
   paints the storybook navy exactly as before. Every theme is a
   dark-leaning gradient in the base rule's own construction (two
   soft radial glows over a deep linear sky), so the dashboard's
   light text (#eef1ff body, gold accents, the lifted muted
   #aeb8e8) keeps its contrast on every stop - verified per theme
   with the cascade/contrast harness (dash-theme-css-test.js).
   The attribute adds one class-level specificity step, so these
   rules outrank the base sky rule; both are !important where the
   base is. The root's own background colour follows the theme's
   darkest stop for overscroll. */
html.lg-dash #root .lgdn-root[data-lg-theme="sunset"] { background-color: #1e1033; }
html.lg-dash #root .lgdn-root[data-lg-theme="sunset"] > .fixed.inset-0.-z-10 > div {
  background:
    radial-gradient(1100px 520px at 10% -6%, rgba(249, 115, 22, .30), rgba(249, 115, 22, 0) 60%),
    radial-gradient(920px 500px at 96% 108%, rgba(124, 58, 237, .22), rgba(124, 58, 237, 0) 60%),
    linear-gradient(180deg, #1e1033 0%, #3b1533 48%, #57261a 100%) !important;
}
html.lg-dash #root .lgdn-root[data-lg-theme="snow"] { background-color: #0d1b2e; }
html.lg-dash #root .lgdn-root[data-lg-theme="snow"] > .fixed.inset-0.-z-10 > div {
  background:
    radial-gradient(1100px 520px at 10% -6%, rgba(186, 230, 253, .28), rgba(186, 230, 253, 0) 60%),
    radial-gradient(920px 500px at 96% 108%, rgba(56, 189, 248, .18), rgba(56, 189, 248, 0) 60%),
    linear-gradient(180deg, #0d1b2e 0%, #16324a 48%, #1d4258 100%) !important;
}
html.lg-dash #root .lgdn-root[data-lg-theme="sea"] { background-color: #04202b; }
html.lg-dash #root .lgdn-root[data-lg-theme="sea"] > .fixed.inset-0.-z-10 > div {
  background:
    radial-gradient(1100px 520px at 10% -6%, rgba(45, 212, 191, .26), rgba(45, 212, 191, 0) 60%),
    radial-gradient(920px 500px at 96% 108%, rgba(13, 148, 136, .20), rgba(13, 148, 136, 0) 60%),
    linear-gradient(180deg, #04202b 0%, #06384a 48%, #06455c 100%) !important;
}
html.lg-dash #root .lgdn-root[data-lg-theme="forest"] { background-color: #0a2013; }
html.lg-dash #root .lgdn-root[data-lg-theme="forest"] > .fixed.inset-0.-z-10 > div {
  background:
    radial-gradient(1100px 520px at 10% -6%, rgba(74, 222, 128, .22), rgba(74, 222, 128, 0) 60%),
    radial-gradient(920px 500px at 96% 108%, rgba(13, 148, 136, .18), rgba(13, 148, 136, 0) 60%),
    linear-gradient(180deg, #0a2013 0%, #123524 48%, #1a4a2e 100%) !important;
}
html.lg-dash #root .lgdn-root[data-lg-theme="candy"] { background-color: #2a1230; }
html.lg-dash #root .lgdn-root[data-lg-theme="candy"] > .fixed.inset-0.-z-10 > div {
  background:
    radial-gradient(1100px 520px at 10% -6%, rgba(240, 171, 252, .26), rgba(240, 171, 252, 0) 60%),
    radial-gradient(920px 500px at 96% 108%, rgba(249, 168, 212, .20), rgba(249, 168, 212, 0) 60%),
    linear-gradient(180deg, #2a1230 0%, #46204d 48%, #5c2749 100%) !important;
}
html.lg-dash #root .lgdn-root[data-lg-theme="rainbow"] { background-color: #1b2350; }
html.lg-dash #root .lgdn-root[data-lg-theme="rainbow"] > .fixed.inset-0.-z-10 > div {
  background:
    radial-gradient(1100px 520px at 10% -6%, rgba(239, 68, 68, .20), rgba(239, 68, 68, 0) 60%),
    radial-gradient(920px 500px at 96% 108%, rgba(59, 130, 246, .22), rgba(59, 130, 246, 0) 60%),
    linear-gradient(160deg, #1b2350 0%, #3b1533 38%, #14401f 78%, #0f2f52 100%) !important;
}
html.lg-dash #root .lgdn-root[data-lg-theme="space"] { background-color: #050914; }
html.lg-dash #root .lgdn-root[data-lg-theme="space"] > .fixed.inset-0.-z-10 > div {
  background:
    radial-gradient(1100px 520px at 10% -6%, rgba(124, 58, 237, .40), rgba(124, 58, 237, 0) 60%),
    radial-gradient(920px 500px at 96% 108%, rgba(245, 183, 0, .14), rgba(245, 183, 0, 0) 60%),
    linear-gradient(180deg, #050914 0%, #0b1130 48%, #1e1b4b 100%) !important;
}
html.lg-dash #root .lgdn-root[data-lg-theme="desert"] { background-color: #241203; }
html.lg-dash #root .lgdn-root[data-lg-theme="desert"] > .fixed.inset-0.-z-10 > div {
  background:
    radial-gradient(1100px 520px at 10% -6%, rgba(245, 183, 0, .26), rgba(245, 183, 0, 0) 60%),
    radial-gradient(920px 500px at 96% 108%, rgba(249, 115, 22, .20), rgba(249, 115, 22, 0) 60%),
    linear-gradient(180deg, #241203 0%, #3d2003 48%, #572e08 100%) !important;
}
html.lg-dash #root .lgdn-root[data-lg-theme="volcano"] { background-color: #160607; }
html.lg-dash #root .lgdn-root[data-lg-theme="volcano"] > .fixed.inset-0.-z-10 > div {
  background:
    radial-gradient(1100px 520px at 10% -6%, rgba(249, 115, 22, .22), rgba(249, 115, 22, 0) 60%),
    radial-gradient(920px 500px at 96% 108%, rgba(239, 68, 68, .30), rgba(239, 68, 68, 0) 60%),
    linear-gradient(180deg, #160607 0%, #2b0d0d 48%, #450f0a 100%) !important;
}
html.lg-dash #root .lgdn-root[data-lg-theme="aurora"] { background-color: #04141d; }
html.lg-dash #root .lgdn-root[data-lg-theme="aurora"] > .fixed.inset-0.-z-10 > div {
  background:
    radial-gradient(1100px 520px at 10% -6%, rgba(74, 222, 128, .30), rgba(74, 222, 128, 0) 60%),
    radial-gradient(920px 500px at 96% 108%, rgba(168, 85, 247, .26), rgba(168, 85, 247, 0) 60%),
    linear-gradient(180deg, #04141d 0%, #07272e 48%, #0b2e4f 100%) !important;
}

/* ---- Shop Slice A (lg-v129): Name Styles ----
   dash-lg1.js tags the name (header span + the span it wraps
   inside the hero greeting) with data-lg-namestyle. Gradient
   styles clip their gradient to the glyphs; the two solid styles
   set fill colour directly (with -webkit-text-fill-color so they
   win over any gradient-text colour on the hero heading). Every
   style keeps the name readable on the navy - bold weight, and
   gradients that stay in the light half of their hue. Star
   Sparkle's shimmer moves only when reduced motion is off; off,
   the same gradient simply rests. */
.lgdn-root [data-lg-namestyle="golden-shine"] {
  background-image: linear-gradient(92deg, #fff3b0 5%, #f5b700 55%, #b97e06 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; font-weight: 700;
}
.lgdn-root [data-lg-namestyle="ocean-wave"] {
  background-image: linear-gradient(92deg, #a5f3fc 5%, #38bdf8 55%, #2563eb 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; font-weight: 700;
}
.lgdn-root [data-lg-namestyle="berry-bold"] {
  color: #d946ef; -webkit-text-fill-color: #d946ef; font-weight: 800;
  text-shadow: 0 1px 0 rgba(88, 28, 135, .35);
}
.lgdn-root [data-lg-namestyle="mint-fresh"] {
  background-image: linear-gradient(92deg, #bbf7d0 5%, #34d399 55%, #0d9488 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; font-weight: 700;
}
.lgdn-root [data-lg-namestyle="sunset-glow"] {
  background-image: linear-gradient(92deg, #fde68a 5%, #fb923c 55%, #f43f5e 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; font-weight: 700;
}
.lgdn-root [data-lg-namestyle="rainbow-name"] {
  background-image: linear-gradient(90deg, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #8b5cf6);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; font-weight: 800;
}
.lgdn-root [data-lg-namestyle="shadow-pop"] {
  color: #ffffff; -webkit-text-fill-color: #ffffff; font-weight: 800;
  text-shadow: 2px 2px 0 #7c3aed, -1px -1px 0 rgba(23, 37, 84, .45);
}
.lgdn-root [data-lg-namestyle="star-sparkle"] {
  background-image: linear-gradient(92deg, #fef9c3 0%, #f5b700 30%, #ffffff 50%, #f5b700 70%, #fef9c3 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; font-weight: 800;
}
@media (prefers-reduced-motion: no-preference) {
  .lgdn-root [data-lg-namestyle="star-sparkle"] { animation: lgNsShimmer 2.6s linear infinite; }
}
@keyframes lgNsShimmer {
  from { background-position: 0% 50%; }
  to { background-position: 200% 50%; }
}

/* ---- Shop Slice A (lg-v129): the Trophy Shelf ----
   A dark panel in the dashboard's own panel colour, under the My
   Gem Chest, painted by dash-lg1.js only when the child owns at
   least one trophy. The heading takes the title gold - the rule
   outranks the general section-heading lift with the shelf's own
   class step added to the same selector shape. */
.lgdn-root .lgdn-shelf {
  margin-top: 20px;
  background-color: #1c2650;
  border: 1px solid rgba(245, 183, 0, .35);
  border-radius: 20px;
  padding: 14px 16px;
}
html.lg-dash #root .lgdn-root main > section.lgdn-shelf > h3 { color: #ffd977 !important; }
.lgdn-root .lgdn-shelf-title { font-size: 15px; font-weight: 800; margin: 0 0 10px; }
.lgdn-root .lgdn-shelf-row { display: flex; flex-wrap: wrap; gap: 14px; }
.lgdn-root .lgdn-trophy { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; }
.lgdn-root .lgdn-trophy-emoji { font-size: 30px; line-height: 1.1; }
.lgdn-root .lgdn-trophy-name { font-size: 11px; font-weight: 700; color: #c9d2f5; text-align: center; }

/* ---- The equipped Buddy Accessory (dash-lg1.js, lg-v132) ----
   One still emoji inside the Buddy's wrap (.lgdn-buddy-wrap), so
   the wrap's float carries it with him; it has no animation of
   its own. Anchors are the emoji's CENTRE as % of the wrap (the
   locked cutout's own box, 618x649), measured from the artwork:
   his crystal spikes crown y 0-17%, his brows sit at ~22%, his
   eyes span y 23.5-33.5% (left eye x 33-51%, right eye x
   56.5-74.5%), his smile y 34.5-40.5%, his chin ends ~44%, the
   scarf band runs y 42-52% with its knot at ~(52%, 48%), the
   golden core centres (50.5%, 60.5%), and the star-map scroll
   fills x 68.5-79% below y 60%. FACE RULE: nothing below may
   cover the eyes or the smile - the glasses anchor rides his
   brow (worn pushed up), hats perch on the spikes, the bow tie
   sits on the scarf knot below the chin, the wand rests by the
   scroll hand. dash-accessory-test.js checks every anchor's
   dense core against the eye/smile boxes mechanically. */
.lgdn-root .lgdn-accessory {
  position: absolute;
  z-index: 2;
  line-height: 1;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  font-size: calc(clamp(30px, 10vw, 44px) * var(--lgdn-acc-size, 1));
  transform: translate(-50%, -50%) rotate(var(--lgdn-acc-rot, 0deg));
  filter: drop-shadow(0 2px 5px rgba(2, 6, 23, .5));
}
.lgdn-root .lgdn-accessory[data-lg-accessory="crown"]        { left: 50%;   top: 4.5%;  --lgdn-acc-rot: -2deg;  --lgdn-acc-size: 1.1; }
.lgdn-root .lgdn-accessory[data-lg-accessory="cap"]          { left: 46%;   top: 6%;    --lgdn-acc-rot: -7deg; }
.lgdn-root .lgdn-accessory[data-lg-accessory="flower-crown"] { left: 31%;   top: 9%;    --lgdn-acc-rot: -12deg; --lgdn-acc-size: .95; }
.lgdn-root .lgdn-accessory[data-lg-accessory="moon-cap"]     { left: 58%;   top: 5.5%;  --lgdn-acc-rot: 18deg;  --lgdn-acc-size: .95; }
.lgdn-root .lgdn-accessory[data-lg-accessory="party-hat"]    { left: 64%;   top: 7%;    --lgdn-acc-rot: 14deg; }
.lgdn-root .lgdn-accessory[data-lg-accessory="glasses"]      { left: 52.5%; top: 13%;   --lgdn-acc-rot: -3deg; }
.lgdn-root .lgdn-accessory[data-lg-accessory="bow-tie"]      { left: 52%;   top: 49.5%; --lgdn-acc-rot: 0deg;   --lgdn-acc-size: .95; }
.lgdn-root .lgdn-accessory[data-lg-accessory="scarf"]        { left: 70%;   top: 47%;   --lgdn-acc-rot: 8deg;   --lgdn-acc-size: .9; }
.lgdn-root .lgdn-accessory[data-lg-accessory="wizard-hat"]   { left: 80%;   top: 52%;   --lgdn-acc-rot: 24deg; }
.lgdn-root .lgdn-accessory[data-lg-accessory="backpack"]     { left: 23%;   top: 64%;   --lgdn-acc-rot: -8deg;  --lgdn-acc-size: 1.15; }