/* GENERATED by .tools/space-css.py from the .src.css file. Do not edit. */
/* pfs-space-tab.css: the owner's "deep space" design (Claude Design export
   "Phonics Land.html", 20 Oct 2026) on a child tab page other than Home.

   The design itself only draws the Home page. On a tab, its frame is the
   same (css/pfs-space.css: sky, header, tabs, band, footer) and the page's
   content sits in the design's cream card, the one that holds the island path
   on Home: same colour, corners and shadow. Headings take the design's
   heading font (Caprasimo) and other text its body font (Figtree).

   Each page keeps its own cards, colours, words and buttons.
   Built from css/pfs-space-tab.src.css by .tools/space-css.py. */

.pfs-space.pfs-tab main {
  position: relative; z-index: 2;
  width: calc(100% - 2 * clamp(12px, 3vw, 28px));
  margin: 28px auto 90px !important;
  padding: clamp(18px, 3vw, 32px) !important;
  background: var(--color-bg);
  border-radius: 36px;
  box-shadow: 0 0 0 6px rgba(255,255,255,0.08), 0 40px 80px -30px rgba(0,0,0,0.7); box-shadow: 0 0 0 6px oklch(1 0 0 / .08), 0 40px 80px -30px oklch(0 0 0 / .7);
}
/* The page's own wrapper must not paint over the sky. */
.pfs-space.pfs-tab > div:not(.pfs-skyfix):not(.pfs-top):not(.pfs-footsky):not([id]) { background: transparent; }

.pfs-space.pfs-tab main h1,
.pfs-space.pfs-tab main h2,
.pfs-space.pfs-tab main h3 {
  font-family: var(--font-heading) !important;
  font-weight: 400 !important;
  letter-spacing: -0.015em;
}
.pfs-space.pfs-tab main [style*="Nunito"] { font-family: var(--font-body) !important; }

/* My Corner's comfy colours: the page wrapper no longer paints over the sky,
   and the chosen tint colours the card the child reads on
   (inclusion-corner.html sets --pfs-tint; "Cream" leaves the design's cream). */
.pfs-space #pageWrap { background: transparent !important; }
.pfs-space #pageWrap main { background: var(--pfs-tint, var(--color-bg)); }

/* Titles and intro lines written in white for the old colourful page
   backgrounds. On the design's cream card they take the design's own text
   colours instead (dark title, softer intro), so they can be read. White
   text on coloured buttons and badges is not touched. */
.pfs-space.pfs-tab main h1[style*="color:#fff"] {
  color: var(--color-text) !important; text-shadow: none !important;
}
.pfs-space.pfs-tab main h1[style*="color:#fff"] + p,
.pfs-space.pfs-tab main video + p[style*="rgba(255,255,255"],
.pfs-space.pfs-tab #mode-intro,
.pfs-space.pfs-tab #word-groups span[style*="rgba(255,255,255"] {
  color: var(--color-neutral-700) !important; text-shadow: none !important;
}

/* Alphabet page (owner's request, 22 Oct): the hint line above each section,
   the song's lyric line and the word family and game buttons were white too,
   so on the cream card they could hardly be seen. The hint lines take the
   softer text colour. A button not chosen is white with dark letters; the
   chosen one is dark with white letters. */
.pfs-space.pfs-tab [id^="aa-"][id$="-view"] > p[style*="rgba(255,255,255"] {
  color: var(--color-neutral-700) !important; text-shadow: none !important;
}
.pfs-space.pfs-tab #aa-lyric { color: var(--color-text) !important; text-shadow: none !important; }
.pfs-space.pfs-tab #aa-family-chips button,
.pfs-space.pfs-tab #aa-game-tabs button {
  background: #fff !important; color: var(--color-neutral-800) !important;
  border-color: var(--color-neutral-300) !important;
  box-shadow: 0 3px 0 var(--color-neutral-300) !important;
}
.pfs-space.pfs-tab #aa-family-chips button[style*="background:#fff"],
.pfs-space.pfs-tab #aa-game-tabs button[style*="background:#fff"] {
  background: var(--color-text) !important; color: #fff !important;
  border-color: var(--color-text) !important;
  box-shadow: 0 3px 0 var(--color-neutral-900) !important;
}