/* Learning Gem - Gem Shop "Storybook" reskin (design slice 3,
   lg-v133). Visual layer only, loaded after dash-lg1.css.
   shopskin-lg1.js puts .lgsh-root on the shop page's root and
   html.lg-shop on the document while - and only while - the shop
   is the screen shown; every rule below is scoped to that pair,
   so no other screen can be touched (the dashboard keeps exactly
   its lg-v132 look; its rules live under html.lg-dash/.lgdn-root
   and cannot match here, and these cannot match there).

   The shop joins the welcome screen and the dashboard in the
   storybook world: the same deep-navy sky (painted over the app's
   own fixed background layer, the first sky sheet inside it), the
   dashboard header's deepened navy bar with its gold hairline,
   gold for what is active or owned, and - the Gem Chest pattern -
   treasure cards that stay LIGHT with dark text, so item names
   and prices keep the contrast they have today. What changes
   colour family is only what sits directly on the navy: page
   text lifts to the dashboard's light ink, muted text to its
   #aeb8e8, and the "My Gems" history becomes a dark panel in the
   dashboard's panel navy.

   Two deliberate calls:
   - The child's equipped Dashboard Theme does not follow them
     here. dash-lg1 paints themes off data-lg-theme on the
     DASHBOARD root only; the shop has its own root and its own
     background layer, so the shop sky is the storybook navy for
     every child. (Verified in code, not assumed: no theme rule
     in dash-lg1.css can match under .lgsh-root.)
   - Locked cards ("N gems needed") trade their washed-out look
     (a light card at opacity .5 over what is now a navy page -
     its text would land near 2:1) for a dim navy panel of their
     own at full opacity, with light text at full contrast: still
     clearly the un-bought shelf, still fully readable.

   Contrast is proven, not eyeballed: shopskin-test.js runs the
   dash-contrast-test cascade method over all eleven real
   stylesheets and checks every text element named in the header
   comment of that file at >= 4.5:1 against its painted
   background. No layout geometry, no behaviour: colour,
   background, border, shadow and one sparkle (transform/opacity,
   reduced-motion gated) only. */

/* The sky and the page base: same recipe as the dashboard's. */
html.lg-shop body { background-color: #0b1130; }
.lgsh-root { background-color: #0b1130; color: #eef1ff; }
html.lg-shop #root .lgsh-root > .fixed.inset-0.-z-10 > div:first-child {
  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;
}

/* The header bar: the app's amber gradient deepened into the
   dashboard header's navy, gold hairline under it. Its white
   heading, subtitle and back link keep their colour (13:1+ on
   every stop). The balance pill turns to dark glass with a gold
   rim so its white count reads on the navy bar. */
html.lg-shop #root .lgsh-root > header {
  background: linear-gradient(90deg, #2b1a6d 0%, #1b2350 55%, #0f2f52 100%);
  border-bottom: 2px solid rgba(245, 183, 0, .45);
  box-shadow: 0 6px 22px rgba(3, 6, 20, .4);
}
html.lg-shop #root .lgsh-root > header h1 { font-family: 'Fredoka', 'Nunito', sans-serif; }
html.lg-shop #root .lgsh-root > header div.bg-white\/20 {
  background-color: rgba(9, 13, 36, .38);
  border: 1px solid rgba(245, 183, 0, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

/* Page ink on the navy, and muted text lifted exactly as the
   dashboard lifts it. Inside the light cards, muted text goes
   back to a dark slate (next-but-one rule) - the two scopes keep
   every muted line on the right side of 4.5:1. */
html.lg-shop #root .lgsh-root main { color: #eef1ff; }
html.lg-shop #root .lgsh-root main .text-muted-foreground { color: #aeb8e8; }

/* The tab row (the bundle's three tabs and shopx's four share
   the row and the same utility classes, so one pair of rules
   dresses all seven): the active tab is a gold pill with deep
   navy text (7:1+ on every stop of its gradient; white on that
   gold would be ~2:1); resting tabs are dark glass pills with
   light text and a faint gold rim. */
html.lg-shop #root .lgsh-root main > div:first-child > button.bg-white {
  background-color: #252e63;
  color: #c9d2f5;
  border-color: rgba(245, 183, 0, .35);
  box-shadow: 0 2px 0 rgba(3, 6, 20, .35);
}
html.lg-shop #root .lgsh-root main > div:first-child > button.bg-white:hover { background-color: #303c7d; }
html.lg-shop #root .lgsh-root main > div:first-child > button.bg-amber-500 {
  background-color: #f5b700;
  background-image: linear-gradient(135deg, #f7c948 0%, #f5b700 55%, #f59e0b 100%);
  color: #172554;
  box-shadow: 0 3px 0 #b97e06, 0 8px 18px rgba(245, 183, 0, .3);
}
/* While a shopx tab is open, shopx's own stylesheet rests the
   bundle's active tab back to its LIGHT inactive look (its rule
   is !important at (0,2,1)). On the navy that would strand one
   pale pill in the row, so the same resting is re-stated here in
   the dark treatment, !important at (1,4,4). The background-image
   line matters as much as the colour (lg-v134): the gold rule
   above paints the active pill with a gradient IMAGE, and an
   image paints over any background colour - resting the colour
   alone left the lingering bundle tab gold next to the open
   shopx tab's gold (two gold pills; browser-verified on
   lg-v133). Clearing the image lets the dark colour show, so
   exactly one pill - the open shopx tab - is gold. */
html.lg-shop #root .lgsh-root main > div.lgx-row-on > button.lgx-orig {
  background-color: #252e63 !important;
  background-image: none !important;
  color: #c9d2f5 !important;
  border: 1px solid rgba(245, 183, 0, .35) !important;
  box-shadow: 0 2px 0 rgba(3, 6, 20, .35) !important;
}

/* Treasure cards. Every card in either grid (the bundle's and
   shopx's) takes the Gem Chest's deep violet for its text -
   shopx's cards are plain divs with no text colour of their own
   and would otherwise inherit the page's light ink onto a light
   card. Affordable cards and the free default cards (Classic
   Navy, Plain Name, No Accessory) share this warm paper gradient
   and soft gold rim. */
html.lg-shop #root .lgsh-root main .grid > * { color: #37305e; }
html.lg-shop #root .lgsh-root main .grid > .bg-white {
  background-color: #fff8e1;
  background-image: linear-gradient(180deg, #fffdf7 0%, #fff3d6 100%);
  border-color: #eec95c;
  box-shadow: 0 8px 20px rgba(3, 6, 20, .35);
}
/* Equipped, two ways. The bundle's equipped avatar card wears
   green chrome today; here it turns gold outright. Every other
   equipped card (bundle borders/titles, all of shopx's) is
   tagged .lgsh-equipped by shopskin-lg1.js and gets the golden
   ring, plus one small sparkle - still under reduced motion,
   breathing only when motion is welcome. */
html.lg-shop #root .lgsh-root main .grid > .bg-green-50 {
  background-color: #ffedb0;
  background-image: linear-gradient(180deg, #fff8d6 0%, #ffe9a8 100%);
  border-color: #f5b700;
  box-shadow: 0 0 0 2px rgba(245, 183, 0, .5), 0 10px 22px rgba(3, 6, 20, .4);
}
html.lg-shop #root .lgsh-root main .grid > .lgsh-equipped {
  position: relative;
  border-color: #f5b700;
  box-shadow: 0 0 0 2px rgba(245, 183, 0, .55), 0 10px 22px rgba(3, 6, 20, .4);
}
html.lg-shop #root .lgsh-root main .grid > .lgsh-equipped::after {
  content: '\2726';
  position: absolute;
  top: 8px;
  right: 12px;
  color: #b45309;
  font-size: 15px;
  line-height: 1;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  html.lg-shop #root .lgsh-root main .grid > .lgsh-equipped::after { animation: lgshSparkle 2.2s ease-in-out infinite alternate; }
}
@keyframes lgshSparkle {
  from { opacity: .45; transform: scale(.88) rotate(-6deg); }
  to { opacity: 1; transform: scale(1.08) rotate(8deg); }
}
/* The just-bought flash card ("Got it!") glows gold too. */
html.lg-shop #root .lgsh-root main .grid > .bg-amber-50 {
  background-color: #ffe9a8;
  background-image: linear-gradient(180deg, #fff3c4 0%, #ffe08a 100%);
  border-color: #f5b700;
}
/* Locked cards: a dim navy panel at full opacity, light text -
   the un-bought shelf, readable end to end (see the header
   comment for why the opacity had to go). The item picture
   stays greyed, as today. */
html.lg-shop #root .lgsh-root main .grid > .bg-gray-50.opacity-50 {
  background-color: #262f5e;
  background-image: linear-gradient(180deg, #2b3568 0%, #232b57 100%);
  border-color: rgba(174, 184, 232, .4);
  color: #d7defc;
  opacity: 1;
  box-shadow: 0 4px 14px rgba(3, 6, 20, .35);
}
html.lg-shop #root .lgsh-root main .grid > .bg-gray-50.opacity-50 > span.text-5xl {
  filter: grayscale(.75);
  opacity: .55;
}
/* Muted text inside cards: dark slate on the treasure cards;
   the locked cards' "gems needed" line is the exception, light
   on their navy (this selector outranks the card restore). */
html.lg-shop #root .lgsh-root main .grid .text-muted-foreground { color: #5b5885; }
html.lg-shop #root .lgsh-root main .grid > .bg-gray-50.opacity-50 .text-muted-foreground { color: #c9d2f5; }

/* The state lines inside cards, deepened a shade so they clear
   4.5:1 on the gold-tinted card grounds (their lg-v132 shades
   sit near 3-4:1 there): "Equipped!"/"Yours!" green-800,
   "Got it!" amber-800. The Buy/Equip pill keeps its bright gold
   gradient but its label turns deep navy (7.8:1+; white on that
   gradient is ~1.7:1). */
html.lg-shop #root .lgsh-root main .grid .text-green-600 { color: #166534; }
html.lg-shop #root .lgsh-root main .grid .text-amber-600 { color: #92400e; }
html.lg-shop #root .lgsh-root main .grid .bg-gradient-to-r.from-amber-400 { color: #172554; }

/* "My Gems" history: a dark panel in the dashboard's panel navy,
   entries in the page ink, hairlines in white glass, and the
   +/- amounts lifted to the shades that clear 4.5:1 on it
   (emerald-400 / rose-400; the lg-v132 600/500 shades sit near
   3.8-4:1 on navy). */
html.lg-shop #root .lgsh-root main > div.pt-4 {
  background-color: #1c2650;
  border: 1px solid rgba(245, 183, 0, .22);
  border-radius: 20px;
  padding: 18px 20px 12px;
  box-shadow: 0 10px 26px rgba(3, 6, 20, .35);
}
html.lg-shop #root .lgsh-root main > div.pt-4 > div { border-bottom-color: rgba(255, 255, 255, .13); }
html.lg-shop #root .lgsh-root main > div.pt-4 .text-emerald-600 { color: #34d399; }
html.lg-shop #root .lgsh-root main > div.pt-4 .text-rose-500 { color: #fb7185; }

/* The buy-confirmation card (LGcfm) keeps its own white card and
   gold rim - already the treasure look; only its backdrop tint
   deepens to the shop's navy while the shop is the screen shown
   (the card only ever opens from the shop, and html.lg-shop only
   exists there, so this can reach no other screen). */
html.lg-shop .lgcfm-backdrop { background: rgba(9, 13, 36, .66); }