/* TEDDY'S FUTURE LAB — the look of version 1.3 (loaded after every other style sheet of the app, before the owner's own pictures and custom.css).
   1. the two looks for children: "Sky" (bright, the starting look) and "Space" (dark) — both in full colour
   2. the frame: a colourful top bar, a side menu on wide screens, a big bottom bar on phones and upright tablets
   3. page banners, cards, tiles, buttons — chunky, rounded, with a gentle press
   4. the home page as a launcher
   5. the 🔊 buttons: impossible to miss
   6. "My Background": the layer behind every child page, and what keeps words readable on top of it
   7. every device: tap targets, inputs, dialogs, tables, pictures, stages
   8. the grown-up side: a light tidy-up
   9. less movement, strong contrast, plain letters */

/* ================================================================ 1. the two looks (child side) */
:root[data-theme="light"] body.kid-mode {
  --bg: #eaf5ff; --bg2: #ffffff; --panel: #ffffff; --panel2: #f2f8ff; --panel3: #e2eeff;
  --line: #cfe0f7; --line2: #9bbff0; --text: #17224f; --muted: #46578a; --faint: #6d7ca6;
  --gold: #e59a00; --gold2: #ffc21a; --gold-ink: #2a1a00; --chip: #eaf2ff; --input: #ffffff; --her: #f2f8ff;
  --shadow: 0 10px 26px rgba(28, 62, 140, .12);
  --glow: 0 0 0 2px rgba(42, 127, 255, .25), 0 10px 26px rgba(28, 62, 140, .14);
  --sky: radial-gradient(900px 520px at 88% -8%, rgba(255, 214, 102, .55), transparent 62%), radial-gradient(900px 600px at -6% 104%, rgba(255, 143, 177, .30), transparent 60%),
    radial-gradient(800px 520px at 104% 100%, rgba(120, 220, 170, .32), transparent 60%), linear-gradient(180deg, #bfe6ff 0%, #e4f4ff 46%, #fff6de 100%);
  --bar: linear-gradient(90deg, #2f7dff 0%, #6a5cff 55%, #b44dff 100%); --bar-ink: #ffffff; --card-shade: rgba(28, 62, 140, .10);
}
:root[data-theme="dark"] body.kid-mode {
  --bg: #0b1040; --bg2: #121a5c; --panel: #1a2472; --panel2: #232e8a; --panel3: #2d3aa0;
  --line: #3b4cc4; --line2: #6a86ff; --text: #f6f8ff; --muted: #c2ccf8; --faint: #93a2dc;
  --gold: #ffcb3d; --gold2: #ffe27f; --gold-ink: #2a1a00; --chip: #26329a; --input: #10185a; --her: #1c2678;
  --shadow: 0 10px 28px rgba(0, 0, 0, .34);
  --glow: 0 0 0 2px rgba(106, 134, 255, .5), 0 10px 30px rgba(0, 0, 0, .4);
  --sky: radial-gradient(900px 560px at 84% -10%, rgba(180, 77, 255, .50), transparent 62%), radial-gradient(900px 620px at -6% 104%, rgba(42, 127, 255, .42), transparent 60%),
    radial-gradient(700px 480px at 104% 96%, rgba(255, 63, 127, .26), transparent 60%), linear-gradient(180deg, #0b1040 0%, #151a66 60%, #1d1670 100%);
  --bar: linear-gradient(90deg, #1c2a8c 0%, #3a2aa2 55%, #5c2aac 100%); --bar-ink: #ffffff; --card-shade: rgba(0, 0, 0, .28);
}
:root[data-contrast="high"] body.kid-mode { --line: #ffffff; --line2: #ffffff; --muted: #ffffff; --faint: #e6e6e6; --panel: #000; --panel2: #000; --panel3: #111; --bg: #000; --bg2: #000; --text: #fff; --input: #000; --chip: #000; --her: #000; --sky: #000; --gold: #ffe600; --bar: #000; --card-shade: transparent; }
:root[data-theme="light"][data-contrast="high"] body.kid-mode { --line: #000; --line2: #000; --muted: #000; --faint: #222; --panel: #fff; --panel2: #fff; --panel3: #f2f2f2; --bg: #fff; --bg2: #fff; --text: #000; --input: #fff; --chip: #fff; --her: #fff; --sky: #fff; --gold: #7a4b00; --gold-ink: #fff; --bar: #fff; --bar-ink: #000; --card-shade: transparent; }
body.kid-mode { --tabbar: 0px; }
body.kid-mode h1, body.kid-mode h2 { font-family: var(--display); font-weight: 800; letter-spacing: 0; }
body.kid-mode h3 { color: var(--text); }
body.kid-mode a:not([class]) { color: color-mix(in srgb, var(--blue) 80%, var(--text)); font-weight: 600; }
:root[data-theme="light"] body.kid-mode .kstatus.demonstrated { color: #0c7a3c; border-color: #0c7a3c; }

/* ================================================================ 2. the frame */
/* ---------- top bar ---------- */
#app.kid #topbar { background: var(--bar); border-bottom: 0; color: var(--bar-ink); gap: 8px; box-shadow: 0 3px 0 rgba(0, 0, 0, .14), 0 8px 20px rgba(20, 40, 110, .18); backdrop-filter: none; -webkit-backdrop-filter: none; }
:root[data-contrast="high"] #app.kid #topbar { border-bottom: 3px solid var(--line); box-shadow: none; }
#app.kid #menuBtn { display: none; }
#app.kid .klogo { min-height: 44px; color: var(--bar-ink); }
#app.kid .klogo i, :root[data-theme="light"] #app.kid .klogo i { color: var(--bar-ink); text-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
#app.kid .klogo b, :root[data-theme="light"] #app.kid .klogo b { color: #ffd84a; text-shadow: 0 2px 0 rgba(0, 0, 0, .22); }
:root[data-theme="light"][data-contrast="high"] #app.kid .klogo i, :root[data-theme="light"][data-contrast="high"] #app.kid .klogo b { color: #000; text-shadow: none; }
#app.kid .klogo img { width: 40px; height: 40px; border-radius: 13px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
#app.kid #topbar .kstat { min-height: 44px; background: rgba(255, 255, 255, .18); border: 2px solid rgba(255, 255, 255, .55); color: var(--bar-ink); font-size: 16px; }
#app.kid #topbar .kstat.star b { color: #ffe27a; } :root[data-theme="light"][data-contrast="high"] #app.kid #topbar .kstat.star b { color: #000; }
#app.kid #topbar .kstat.time.low { background: #fff; color: #b3261e; border-color: #fff; }
#app.kid #topbar .kme { min-height: 46px; background: #fff; border: 2px solid #fff; color: #17224f; box-shadow: 0 3px 0 rgba(0, 0, 0, .16); }
#app.kid #topbar .kme .av { width: 40px; height: 40px; background: #e2eeff; }
#app.kid #topbar .grownup-btn { min-height: 44px; min-width: 44px; border: 2px dashed rgba(255, 255, 255, .7); color: var(--bar-ink); background: rgba(255, 255, 255, .08); font-size: 13.5px; }
#app.kid #topbar .grownup-btn:hover { background: rgba(255, 255, 255, .2); }
/* The bar always fits. kid.js measures it and, when something would be pushed off the edge, adds fit-1 … fit-6 in turn: each lets one more thing step aside.
   What never leaves: the 🔊 switch, the helper, the time left today, the child's picture and “Grown-ups”. */
#app.kid #topbar > * { flex: none; } #app.kid #topbar > .grow { flex: 1 1 0; min-width: 0; }
#app.kid #topbar .kstat.star.wait b:empty { display: inline-block; width: 1.2em; }
@media (max-width: 899px) { #helperFab .lbl { display: none; } #helperFab { padding: 0 3px; } }
#topbar.fit-1 #helperFab .lbl { display: none; } #topbar.fit-1 #helperFab { padding: 0 3px; }
#topbar.fit-2 .klogo .txt { display: none; }
#topbar.fit-3 .kme .nm, #topbar.fit-3 .grownup-btn span { display: none; } #topbar.fit-3 .kme { padding: 3px; } #app.kid #topbar.fit-3 .kstat.talk-toggle::after { display: none; }
#topbar.fit-4 .klogo { display: none; }
#topbar.fit-5 .kstat.star { display: none; }
#topbar.fit-6 .kstat.time .u { display: none; } #app.kid #topbar.fit-6 .kstat.time { padding: 4px 7px; gap: 3px; font-size: 15px; } #app.kid #topbar.fit-6 { gap: 4px; }

/* ---------- side menu (wide screens) ---------- */
#app.kid { grid-template-columns: calc(220px * var(--k)) minmax(0, 1fr); }
#app.kid #sidebar { background: color-mix(in srgb, var(--bg2) 90%, transparent); border-right: 0; box-shadow: 4px 0 18px var(--card-shade); padding: 12px 10px calc(16px + var(--safe-b)) calc(10px + var(--safe-l)); }
.knav { min-height: 48px; border-radius: 18px; font-weight: 700; gap: 12px; padding: calc(6px * var(--k)) 10px; margin: 4px 0; transition: transform .14s var(--spring), background .14s; }
.knav .ico { width: calc(40px * var(--k)); height: calc(40px * var(--k)); border-radius: 14px; font-size: calc(22px * var(--k));
  background: linear-gradient(160deg, color-mix(in srgb, var(--c, var(--blue)) 72%, #fff), var(--c, var(--blue))); box-shadow: 0 3px 0 color-mix(in srgb, var(--c, var(--blue)) 62%, #000); }
.knav:hover { background: color-mix(in srgb, var(--c, var(--blue)) 14%, var(--panel)); border-color: transparent; }
.knav.active { background: linear-gradient(160deg, color-mix(in srgb, var(--c, var(--blue)) 84%, #fff), var(--c, var(--blue))); color: var(--ci, #fff); border-color: transparent; box-shadow: 0 4px 0 color-mix(in srgb, var(--c, var(--blue)) 62%, #000); }
.knav.active .ico { background: #fff; box-shadow: none; }
.knav:active { transform: scale(.97); }

/* ---------- bottom bar and the "More" sheet (phones; tablets and small windows under 1024 wide) ---------- */
@media (max-width: 1023px) {
  body.kid-mode { --tabbar: 80px; }
  #app.kid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main" "tabs"; grid-template-rows: calc(var(--topbar) + var(--safe-t)) minmax(0, 1fr) calc(var(--tabbar) + var(--safe-b)); }
  #app.kid #sidebar { display: none; }
  #app.kid #tabbar { grid-area: tabs; display: flex; align-items: stretch; gap: 4px; z-index: 72; background: var(--bg2); border-top: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -4px 18px var(--card-shade);
    padding: 6px calc(8px + var(--safe-r)) calc(6px + var(--safe-b)) calc(8px + var(--safe-l)); }
  #app.kid #tabbar a, #app.kid #tabbar button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 2px; border: 0; border-radius: 18px; background: none;
    color: var(--text); font: 800 13px/1.1 var(--font); text-decoration: none; cursor: pointer; transition: transform .16s var(--spring); }
  #app.kid #tabbar .e { width: 52px; height: 40px; display: grid; place-items: center; border-radius: 15px; font-size: 25px; line-height: 1; filter: none;
    background: linear-gradient(160deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 62%, #000); color: #fff; }
  #app.kid #tabbar .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  #app.kid #tabbar .on { background: color-mix(in srgb, var(--c) 20%, var(--panel)); color: var(--text); box-shadow: inset 0 0 0 3px var(--c); }
  #app.kid #tabbar a:active, #app.kid #tabbar button:active { transform: scale(.93); }
  /* "More": every place as a big tile, over the page */
  #app.kid.sidebar-open #sidebar { display: grid; position: fixed; z-index: 70; inset: calc(var(--topbar) + var(--safe-t)) 0 calc(var(--tabbar) + var(--safe-b)) 0; width: auto; overflow-y: auto; align-content: start;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; padding: 16px calc(14px + var(--safe-r)) 20px calc(14px + var(--safe-l)); background: var(--bg2); box-shadow: none; }
  #app.kid.sidebar-open #sidebar .knav { flex-direction: column; justify-content: center; text-align: center; gap: 6px; margin: 0; padding: 10px 4px; min-height: 104px; font-size: 14px; line-height: 1.15;
    background: color-mix(in srgb, var(--c) 14%, var(--panel)); box-shadow: 0 4px 0 color-mix(in srgb, var(--c) 34%, var(--line)); }
  #app.kid.sidebar-open #sidebar .knav span:not(.ico) { display: inline; }
  #app.kid.sidebar-open #sidebar .knav .ico { width: 56px; height: 56px; font-size: 30px; border-radius: 18px; }
  #app.kid.sidebar-open #sidebar .knav.active { background: linear-gradient(160deg, color-mix(in srgb, var(--c) 84%, #fff), var(--c)); box-shadow: 0 4px 0 color-mix(in srgb, var(--c) 62%, #000); }
  body.kid-mode #toasts { bottom: calc(var(--tabbar) + 14px + var(--safe-b)); }
}
@media (max-width: 559px) { #app.kid #tabbar .wide { display: none; } #app.kid #tabbar a, #app.kid #tabbar button { font-size: 12.5px; } #app.kid #tabbar .e { width: 48px; } }
@media (max-width: 359px) { #app.kid #tabbar .e { width: 42px; font-size: 22px; } #app.kid #tabbar a, #app.kid #tabbar button { font-size: 11.5px; } }
@media (min-width: 700px) and (max-width: 1023px) { body.kid-mode { --tabbar: 88px; } #app.kid #tabbar { gap: 8px; padding-left: calc(18px + var(--safe-l)); padding-right: calc(18px + var(--safe-r)); } #app.kid #tabbar .e { width: 64px; height: 44px; font-size: 28px; } #app.kid #tabbar a, #app.kid #tabbar button { font-size: 14.5px; } }
/* a phone on its side: the bar moves to the left edge, so the page keeps its height */
@media (max-width: 1023px) and (max-height: 520px) and (orientation: landscape) {
  :root { --topbar: 50px; } body.kid-mode { --tabbar: 0px; --rail: 76px; }
  #app.kid { grid-template-columns: calc(var(--rail) + var(--safe-l)) minmax(0, 1fr); grid-template-areas: "top top" "tabs main"; grid-template-rows: calc(var(--topbar) + var(--safe-t)) minmax(0, 1fr); }
  #app.kid #tabbar { flex-direction: column; overflow-y: auto; border-radius: 0 22px 0 0; gap: 2px; padding: 6px 4px calc(6px + var(--safe-b)) calc(4px + var(--safe-l)); box-shadow: 4px 0 18px var(--card-shade); scrollbar-width: none; }
  #app.kid #tabbar a, #app.kid #tabbar button { flex: 1 1 0; min-height: 46px; max-height: 68px; font-size: 11.5px; } #app.kid #tabbar .wide { display: none; }   /* five tabs share the height, so “More” is always on the screen */
  #app.kid #tabbar .e { width: 46px; height: 32px; font-size: 20px; border-radius: 12px; }
  #app.kid.sidebar-open #sidebar { inset: calc(var(--topbar) + var(--safe-t)) 0 0 calc(var(--rail) + var(--safe-l)); }
  @media (min-height: 430px) { #app.kid #tabbar .wide { display: flex; } }
  #view { padding-top: 10px; }
}

/* ================================================================ 3. banners, cards, tiles, buttons */
:root { --spring: cubic-bezier(.34, 1.56, .64, 1); }
#app.kid #view { padding-bottom: calc(36px + var(--safe-b)); }   /* nothing floats over a child's page any more (the helper button lives in the top bar), so the end of a page needs only a little air */

/* ---------- the banner at the top of every child page: the colour of its place ---------- */
body.kid-mode[data-page] .khead { background-color: var(--c, var(--blue)); }
body.kid-mode .khead { background-image: linear-gradient(120deg, color-mix(in srgb, var(--c, var(--blue)) 78%, #fff) 0%, var(--c, var(--blue)) 55%, color-mix(in srgb, var(--c, var(--blue)) 84%, #000) 100%);
  color: var(--ci, #fff); border-radius: var(--kr); padding: calc(10px * var(--k)) calc(14px * var(--k)); margin-bottom: calc(16px * var(--k)); gap: 12px; position: relative; overflow: hidden;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--c, var(--blue)) 62%, #000), 0 12px 22px color-mix(in srgb, var(--c, var(--blue)) 24%, transparent); text-shadow: none; }
body.kid-mode .khead::after { content: ""; position: absolute; right: -40px; top: -70px; width: 190px; height: 190px; border-radius: 50%; background: rgba(255, 255, 255, .13); pointer-events: none; }
body.kid-mode .khead > * { position: relative; z-index: 1; }
body.kid-mode .khead h1 { color: inherit; font-size: calc(27px * var(--k)); line-height: 1.12; text-wrap: balance; }
body.kid-mode .khead p { color: inherit; opacity: .95; font-weight: 500; }
body.kid-mode .khead .title { min-width: min(180px, 60%); }
body.kid-mode .khead .emoji { width: calc(56px * var(--k)); height: calc(56px * var(--k)); font-size: calc(31px * var(--k)); border-radius: 18px; background: #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, .16); }
body.kid-mode .khead .back { width: max(46px, calc(46px * var(--k))); height: max(46px, calc(46px * var(--k))); background: rgba(255, 255, 255, .22); border: 2px solid rgba(255, 255, 255, .8); color: inherit; }
body.kid-mode .khead .back:hover { background: rgba(255, 255, 255, .36); }
body.kid-mode .khead .acts .kbtn.ghost, body.kid-mode .khead .acts .kchip { background: #fff; color: #17224f; box-shadow: 0 3px 0 rgba(0, 0, 0, .16); border-color: transparent; }
body.kid-mode .khead a:not([class]) { color: inherit; }
/* a banner with the owner's own picture under a veil (kid.js marks it has-pic): the words take the page's ink — dark on the pale veil of the Sky look, light on the dark veil of Space */
body.kid-mode .khead.has-pic, body.kid-mode .khead.has-pic h1, body.kid-mode .khead.has-pic p { color: var(--text); }
body.kid-mode .khead.has-pic .back { color: var(--text); background: var(--panel); border-color: var(--line2); }
body.kid-mode .khead.has-pic::after { display: none; }
:root[data-contrast="high"] body.kid-mode .khead { background: var(--panel); color: var(--text); box-shadow: inset 0 0 0 3px var(--line); } :root[data-contrast="high"] body.kid-mode .khead::after { display: none; }
/* strong contrast: no picture, so no tall empty box either */
:root[data-contrast="high"] body.kid-mode[data-page] #view .khead { min-height: 0; background-image: none; }

/* ---------- cards ---------- */
body.kid-mode .kcard { background: var(--panel); border: 0; color: var(--text); text-shadow: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c, var(--blue)) 42%, var(--line)), 0 5px 0 color-mix(in srgb, var(--c, var(--blue)) 34%, var(--line)), 0 14px 24px var(--card-shade); }
body.kid-mode .kcard.flat { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c, var(--blue)) 42%, var(--line)); }
body.kid-mode .kcard > h2, body.kid-mode .kcard > h3 { font-size: calc(18.5px * var(--k)); gap: 10px; margin-bottom: 12px; }
body.kid-mode .kcard > h2 .e, body.kid-mode .kcard > h3 .e { flex: none; display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; font-size: 1.05em; border-radius: .6em;
  background: color-mix(in srgb, var(--c, var(--blue)) 24%, var(--panel)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c, var(--blue)) 46%, transparent); }
body.calm.kid-mode .kcard { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c, var(--blue)) 42%, var(--line)); }
:root[data-contrast="high"] body.kid-mode .kcard { box-shadow: inset 0 0 0 3px var(--line); }
.krow { border-radius: 18px; min-height: 52px; background: var(--panel2); text-shadow: none; }
/* a row with buttons at its end (My People): on a narrow screen the buttons go under the words instead of squeezing them into a column of single letters */
.krow { flex-wrap: wrap; } .krow > .main { flex: 1 1 132px; }
.krow.click { transition: transform .14s var(--spring), border-color .14s; } .krow.click:hover { border-color: var(--c, var(--line2)); } .krow.click:active { transform: scale(.985); }
.krow .e { width: calc(42px * var(--k)); height: calc(42px * var(--k)); display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--c, var(--blue)) 18%, var(--panel)); }

/* ---------- tiles: big, rounded, the colour of their place ---------- */
.ktile { gap: 4px; min-height: calc(128px * var(--k)); padding: 14px 10px 12px; font-weight: 800; font-size: calc(15.5px * var(--k)); line-height: 1.2; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); isolation: isolate;
  background: linear-gradient(162deg, color-mix(in srgb, var(--c) 76%, #fff) 0%, var(--c) 48%, color-mix(in srgb, var(--c) 84%, #000) 100%);
  box-shadow: 0 7px 0 color-mix(in srgb, var(--c) 62%, #000), 0 16px 24px color-mix(in srgb, var(--c) 26%, transparent); transition: transform .18s var(--spring), box-shadow .14s; }
.c-friends.ktile, .c-trophy.ktile { text-shadow: none; }
.ktile::after { left: auto; right: -16%; top: auto; bottom: -34%; width: 62%; height: auto; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .16); z-index: -1; }
.ktile:hover { transform: translateY(-4px) rotate(-.6deg); }
.ktile:active { transform: translateY(5px) scale(.98); box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 62%, #000); }
.ktile .e { font-size: calc(50px * var(--k)); filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .16)); margin-bottom: 4px; }
.ktile small { font-weight: 600; opacity: .96; font-size: .84em; line-height: 1.25; }
.ktile .tag { background: rgba(0, 0, 0, .28); color: #fff; font-size: 11.5px; padding: 2px 9px; text-shadow: none; }
.ktile.done::before { color: var(--c); text-shadow: none; }
.kgrid { gap: calc(16px * var(--k)); grid-template-columns: repeat(auto-fill, minmax(calc(156px * var(--k)), 1fr)); }
.kgrid.small .ktile { min-height: calc(96px * var(--k)); font-size: calc(13.5px * var(--k)); padding: 10px 6px; } .kgrid.small .ktile .e { font-size: calc(36px * var(--k)); }
.kgrid.jumbo { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(18px * var(--k)); }
.kgrid.jumbo .ktile { min-height: calc(176px * var(--k)); font-size: calc(21px * var(--k)); border-radius: calc(var(--kr) + 6px); }
.kgrid.jumbo .ktile .e { font-size: calc(78px * var(--k)); }
@media (max-width: 1023px) { .kgrid.jumbo { gap: calc(14px * var(--k)); } .kgrid.jumbo .ktile { font-size: calc(19px * var(--k)); padding: 12px 8px; } .kgrid.jumbo .ktile .e { font-size: calc(60px * var(--k)); } }
:root[data-contrast="high"] .ktile { background: var(--panel); color: var(--text); text-shadow: none; box-shadow: inset 0 0 0 3px var(--line); } :root[data-contrast="high"] .ktile::after { display: none; }
@media (max-width: 699px) {
  .kgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .kgrid.jumbo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kgrid.jumbo .ktile { min-height: calc(132px * var(--k)); font-size: calc(18px * var(--k)); } .kgrid.jumbo .ktile .e { font-size: calc(58px * var(--k)); }
  .ktile { min-height: calc(112px * var(--k)); } .ktile .e { font-size: calc(44px * var(--k)); }
}
@media (max-width: 339px) { .kgrid.small { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* a shelf of games, studios or instruments: the tiles take turns with six colours, so the page is never one colour only */
body:is([data-page="games"], [data-page="create"], [data-page="music"], [data-page="code"], [data-page="stories"], [data-page="ai-lab"], [data-page="people"]) #view .kgrid > .ktile:nth-child(6n+2) { --c: var(--c-reading); --ci: #fff; }
body:is([data-page="games"], [data-page="create"], [data-page="music"], [data-page="code"], [data-page="stories"], [data-page="ai-lab"], [data-page="people"]) #view .kgrid > .ktile:nth-child(6n+3) { --c: var(--c-math); --ci: #fff; }
body:is([data-page="games"], [data-page="create"], [data-page="music"], [data-page="code"], [data-page="stories"], [data-page="ai-lab"], [data-page="people"]) #view .kgrid > .ktile:nth-child(6n+4) { --c: var(--c-science); --ci: #fff; }
body:is([data-page="games"], [data-page="create"], [data-page="music"], [data-page="code"], [data-page="stories"], [data-page="ai-lab"], [data-page="people"]) #view .kgrid > .ktile:nth-child(6n+5) { --c: var(--c-music); --ci: #fff; }
body:is([data-page="games"], [data-page="create"], [data-page="music"], [data-page="code"], [data-page="stories"], [data-page="ai-lab"], [data-page="people"]) #view .kgrid > .ktile:nth-child(6n+6) { --c: var(--c-social); --ci: #fff; }

/* ---------- buttons and chips ---------- */
.kbtn { min-height: max(48px, calc(48px * var(--k))); font-weight: 800; text-shadow: none; transition: transform .16s var(--spring), box-shadow .1s, filter .1s; }
.kbtn.sm { min-height: 44px; padding: 4px 16px; font-size: calc(14px * var(--k)); }
.kbtn { text-align: center; line-height: 1.15; } .stack > .kbtn, .kbtn.block, .kcard > .kbtn { white-space: normal; overflow-wrap: break-word; } .kbtn.round, .kbtn.le-backbtn { white-space: nowrap; }
@media (max-width: 699px) { .kbtn.le-backbtn { white-space: nowrap; } }
.kbtn.round { width: max(48px, calc(54px * var(--k))); min-height: max(48px, calc(54px * var(--k))); flex: none; }
.kbtn.round.sm { width: 44px; min-height: 44px; }
.kbtn.ghost { box-shadow: inset 0 0 0 2px var(--line2), 0 3px 0 var(--line); } .kbtn.ghost.sm { box-shadow: inset 0 0 0 2px var(--line2), 0 3px 0 var(--line); }
.kbtn.ghost:active { box-shadow: inset 0 0 0 2px var(--line2); }
.kbtn.gold { --c: #ffc21a; }
.kchip { min-height: 44px; padding: 6px calc(16px * var(--k)); font-weight: 700; text-decoration: none; text-shadow: none; transition: transform .14s var(--spring); }
.kchip:active { transform: scale(.95); }
.kchip.on { box-shadow: 0 3px 0 color-mix(in srgb, var(--gold) 60%, #000); } :root[data-theme="light"] body.kid-mode .kchip.on { background: #ffc21a; border-color: #ffc21a; }
/* strong contrast: a chosen button is dark with white words (the words follow --gold-ink, never a fixed brown) */
:root[data-theme="light"][data-contrast="high"] body.kid-mode .kchip.on { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); box-shadow: none; }
.kswatch { width: max(44px, calc(40px * var(--k))); height: max(44px, calc(40px * var(--k))); }
.ktool { width: max(46px, calc(46px * var(--k))); height: max(46px, calc(46px * var(--k))); }
.kanswer { border-radius: 20px; box-shadow: 0 4px 0 var(--line); transition: transform .14s var(--spring); } .kanswer:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.kbubble { text-shadow: none; }
@media (max-width: 479px) { .buddy-row { position: relative; gap: 8px; } .buddy-row > .who { width: 58px !important; } .buddy-row > .kbubble { flex: 1 1 auto; } .buddy-row > .kbubble:has(+ .talk-btn) { padding-right: 62px; min-height: 60px; }
  .buddy-row > .talk-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); margin: 0; } .buddy-row > .talk-btn:active { transform: translateY(calc(-50% + 3px)); } }
.kbar { height: max(14px, calc(14px * var(--k))); }

/* ================================================================ 4. the home page: a launcher */
.hm { display: grid; gap: calc(18px * var(--k)); }
.hm > [data-day]:empty { display: none; }
.hm-hello { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "me txt lvl" "me acts lvl"; gap: 10px 18px; align-items: center; padding-right: calc(var(--kpad) + 56px); }
.hm-me { grid-area: me; width: calc(128px * var(--k)); align-self: end; }
.hm-txt { grid-area: txt; min-width: 0; align-self: end; }
.hm-txt h1 { margin: 0 0 8px; font-size: calc(30px * var(--k)); line-height: 1.1; text-wrap: balance; }
.hm-txt .buddy-row { align-items: center; } .hm-txt .kbubble { font-size: calc(16px * var(--k)); font-weight: 600; }
.hm-acts { grid-area: acts; align-self: start; }
.hm-level { grid-area: lvl; display: grid; gap: 6px; min-height: 46px; align-content: center; width: calc(214px * var(--k)); padding: 12px 14px; border-radius: 20px; text-decoration: none; color: var(--text); background: color-mix(in srgb, var(--c-trophy) 20%, var(--panel)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c-trophy) 70%, transparent); }
.hm-lv { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; } .hm-lv b { font-size: calc(19px * var(--k)); } .hm-lv span { font-weight: 700; white-space: nowrap; }
.hm-level small { color: var(--muted); font-size: calc(12.5px * var(--k)); line-height: 1.25; }
.hm-bg { position: absolute; right: 12px; top: 12px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; font-size: 24px; text-decoration: none; background: #fff;
  box-shadow: inset 0 0 0 3px var(--c-art), 0 4px 0 color-mix(in srgb, var(--c-art) 60%, #000); transition: transform .16s var(--spring); }
.hm-bg:hover { transform: rotate(-10deg) scale(1.06); } .hm-bg:active { transform: scale(.92); }
.hm-h { margin: 4px 2px -6px; font-size: calc(21px * var(--k)); }
.hm-more { align-items: start; }
body[data-band="early"] .hm-level small, body[data-band="early"] .hm-acts { display: none; }
.gr-homecard .gr-moods { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin-top: 10px; } .gr-homecard .gr-mood { min-height: 78px; padding: 8px 2px; font-size: .9em; line-height: 1.15; }
@media (max-width: 759px) { .gr-homecard .gr-moods { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 899px) { .hm-hello { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "me txt" "me acts" "lvl lvl"; } .hm-level { width: auto; grid-template-columns: auto minmax(80px, 1fr); align-items: center; gap: 4px 14px; padding: 10px 14px; } .hm-level small { grid-column: 1 / -1; } }
@media (max-width: 559px) { .hm { gap: 14px; } .hm-hello { grid-template-areas: "me txt" "acts acts" "lvl lvl"; gap: 8px 10px; padding-right: var(--kpad); } .hm-me { width: calc(74px * var(--k)); align-self: center; }
  .hm-txt h1 { font-size: calc(22px * var(--k)); padding-right: 44px; margin-bottom: 6px; } .hm-txt .buddy-row .who { display: none; } .hm-txt .kbubble::after { display: none; } .hm-txt .kbubble { padding: 8px 12px; font-size: calc(15px * var(--k)); }
  .hm-acts { flex-wrap: nowrap; gap: 8px; } .hm-acts .kbtn { flex: 1 1 0; min-width: 0; padding: 6px 8px; font-size: calc(14.5px * var(--k)); }
  .hm-level { padding: 8px 12px; } .hm-level small { display: none; } .hm-bg { width: 44px; height: 44px; font-size: 21px; top: 8px; right: 8px; } }

@media (max-width: 1023px) and (max-height: 520px) and (orientation: landscape) {
  .hm { gap: 12px; } .hm-hello { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "me txt lvl" "me acts lvl"; gap: 6px 12px; padding: 10px 62px 10px 12px; }
  .hm-me { width: 62px; align-self: center; } .hm-txt h1 { font-size: 20px; margin-bottom: 4px; padding-right: 0; } .hm-txt .buddy-row .who { display: none; } .hm-txt .kbubble::after { display: none; } .hm-txt .kbubble { padding: 6px 12px; font-size: 14.5px; }
  .hm-level { width: 150px; grid-template-columns: minmax(0, 1fr); padding: 8px 10px; } .hm-level small { display: none; } .hm-acts .kbtn { min-height: 44px; padding: 4px 14px; font-size: 14px; }
  .kgrid.jumbo { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .kgrid.jumbo .ktile { min-height: 118px; font-size: 16px; padding: 8px 4px; } .kgrid.jumbo .ktile .e { font-size: 46px; } .kgrid.jumbo .ktile small { display: none; }
  body.kid-mode .khead { padding: 6px 12px; margin-bottom: 10px; } body.kid-mode .khead h1 { font-size: 20px; } body.kid-mode .khead p { display: none; } body.kid-mode .khead .emoji { width: 40px; height: 40px; font-size: 22px; border-radius: 12px; }
  /* a question and its answers fit the little height there is (kid.js brings the card to the top of the screen) */
  .lx-lesson, .lx-check { padding: 10px 14px; } .lx-lesson [data-q] { min-height: 0 !important; } .lx-lesson > .row:first-child { margin-bottom: 4px !important; } .lx-pic { font-size: 34px; line-height: 1.2; margin-top: 4px; } .lx-pic.many { font-size: 23px; }
  .lx-lesson .kquestion, .lx-check .kquestion { font-size: 22px; padding: 4px 10px 8px; } .lx-lesson .kanswer { min-height: 50px; font-size: 19px; } .lx-check .kanswers.lx-big .kanswer { min-height: 54px; font-size: 21px; } .lx-lesson [data-foot] { margin-top: 6px !important; }
}

/* the star that flies in: readable on a bright page too */
.starburst { -webkit-text-stroke: 7px #17224f; paint-order: stroke fill; text-shadow: 0 4px 0 rgba(23, 34, 79, .5); font-size: calc(30px * var(--k)); max-width: 92%; } .starburst .big { -webkit-text-stroke: 0; }

/* ================================================================ 5. the 🔊 buttons: one sunny yellow, everywhere */
.kbtn.talk-btn { --c: #ffc21a; color: #2a1a00; box-shadow: 0 0 0 3px #fff, 0 5px 0 3px #b97700, 0 10px 18px rgba(185, 119, 0, .35); margin: 3px; }
.kbtn.talk-btn:active { box-shadow: 0 0 0 3px #fff, 0 1px 0 3px #b97700; }
.kbtn.talk-btn.round { width: max(52px, calc(52px * var(--k))); min-height: max(52px, calc(52px * var(--k))); font-size: calc(21px * var(--k)); }
.kbtn.talk-btn.sm:not(.round) { min-height: max(48px, calc(44px * var(--k))); font-size: calc(15px * var(--k)); padding: 4px 18px; }
.kbtn.talk-btn .e { font-size: 1.3em; }
.kbtn.talk-btn.on { outline: 4px solid #ff5a36; outline-offset: 3px; }
#app.kid #topbar .kstat.talk-toggle { min-width: 56px; min-height: 48px; padding: 4px 14px; font-size: 26px; gap: 8px; background: #fff; color: #17224f; border: 3px solid #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, .2); cursor: pointer; }
#app.kid #topbar .kstat.talk-toggle::after { content: "Read to me"; font: 800 14.5px/1 var(--font); white-space: nowrap; }
#app.kid #topbar .kstat.talk-toggle.on { background: #ffc21a; border-color: #fff; color: #2a1a00; box-shadow: 0 4px 0 #b97700, 0 0 0 0 rgba(255, 194, 26, .8); animation: talk-on 2.4s ease-out infinite; }
#app.kid #topbar .kstat.talk-toggle.locked { border-style: solid; opacity: 1; background: rgba(255, 255, 255, .9); }
@keyframes talk-on { 0% { box-shadow: 0 4px 0 #b97700, 0 0 0 0 rgba(255, 226, 122, .9); } 60%, 100% { box-shadow: 0 4px 0 #b97700, 0 0 0 12px rgba(255, 226, 122, 0); } }
@media (max-width: 859px) { #app.kid #topbar .kstat.talk-toggle::after { display: none; } }
.talk-hint { min-height: 72px; padding: 12px 34px; font-size: calc(22px * var(--k)); border: 4px solid #fff; background: #ffc21a; box-shadow: 0 6px 0 #b97700, 0 16px 34px rgba(0, 0, 0, .38); z-index: 76; max-width: calc(100% - 24px); }
.talk-hint .e { font-size: 1.6em; }
@media (max-width: 419px) { .talk-hint { padding: 10px 20px; font-size: 19px; } }
/* “Tap to hear me” has a strip of its own under the top bar (kid.js marks the page with has-talkhint while it shows): it never lies on a button a child wants to press */
body.kid-mode { --hint-h: 72px; }
body.kid-mode .talk-hint { top: calc(var(--topbar) + var(--safe-t) + 10px); bottom: auto; min-height: var(--hint-h); }
body.kid-mode.has-talkhint #main { margin-top: calc(var(--hint-h) + 22px); }
body.kid-mode.has-talkhint .offline-bar { top: calc(var(--topbar) + var(--safe-t) + var(--hint-h) + 22px); }
@media (min-width: 1024px) { body.kid-mode .talk-hint { left: calc(50% + 110px * var(--k)); } }
@media (max-height: 520px) and (orientation: landscape) { body.kid-mode { --hint-h: 52px; } body.kid-mode .talk-hint { padding: 6px 26px; font-size: 18px; top: calc(var(--topbar) + var(--safe-t) + 6px); } body.kid-mode.has-talkhint #main { margin-top: calc(var(--hint-h) + 12px); }
  body.kid-mode .talk-hint { left: calc(50% + (var(--rail, 0px) + var(--safe-l)) / 2); } }

/* ================================================================ 6. My Background */
#backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; background: var(--bg); }
#backdrop > svg, #backdrop > .bd-fill { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#backdrop > img { position: absolute; max-width: none; display: block; }
#backdrop > .bd-veil { position: absolute; inset: 0; background: var(--bg); opacity: var(--bd-veil, .4); }
body.has-backdrop { background-image: none; background-color: var(--bg); } body.has-backdrop.stars-bg::before { display: none; }
/* a child who chose “Plain” (or whose own background could not be shown) sees the page's own sky — never the owner's picture with nothing over it */
body.kid-mode[data-backdrop="plain"] { background-image: var(--sky) !important; }
/* the grown-up pages, “Who is learning today?” and the pages nobody is signed in for: the owner's background picture lies under a veil of the page's colour
   (backdrop.js measures how strong it must be for the grey words; 0.9 until it has) */
:root.owner-bg body:not(.kid-mode)::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--bg); opacity: var(--owner-veil, .9); }
:root.owner-bg body:not(.kid-mode).stars-bg::before { display: none; }
/* words that stand straight on the background get a soft edge in the colour of the page, so they stay readable on any picture */
body.has-backdrop #view { text-shadow: 0 0 2px var(--bg), 0 0 6px var(--bg), 0 0 14px var(--bg); }
body.has-backdrop #view :is(.kcard, .panel, .card, .ktile, .kbtn, .kchip, .krow, .kbubble, .kstage, .khead, .kanswer, .ktoolbar, .ktool, .kstatus, .empty, .tile, input, textarea, select, button, canvas, svg) { text-shadow: none; }
body.has-backdrop #view .ktile:not(.c-friends):not(.c-trophy) { text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
body.has-backdrop #view .empty { background: color-mix(in srgb, var(--panel) 92%, transparent); border-style: solid; }
/* …and every heading, caption and note that is not inside a card sits on a soft plate of the page's own colour (nine parts in ten solid), so it can be read on the busiest
   picture and at “More see-through”. Measured: the darkest or brightest picture behind a plate still leaves the words and the quieter grey words above 4.5 to 1 in both looks. */
body.has-backdrop #view :is(h2, h3, h4, p, small, label, summary, .muted, .small):not(:is(.kcard, .panel, .card, .ktile, .kbtn, .kchip, .krow, .kbubble, .kstage, .khead, .kanswer, .ktoolbar, .ktool, .kstatus, .empty, .tile, .setting, .plate, .bk-card, .wt-card, .bd-pick, .lx-group.right, .buddy-row, button, a[class], table, details) *):not(:is(h2, h3, h4, p, label, summary) *):not(:empty) {
  background: color-mix(in srgb, var(--bg2) 90%, transparent); border-radius: 12px; padding: 3px 12px; width: fit-content; max-width: 100%; box-sizing: border-box; text-shadow: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
body.has-backdrop #view :is(.center, [style*="text-align:center"], [style*="justify-content:center"]) > :is(h2, h3, h4, p):not(:is(.kcard, .panel, .card, .empty, .bk-card, button, a[class]) *), body.has-backdrop #view :is(h2, h3, h4, p).center:not(:is(.kcard, .panel, .card, .empty, .bk-card, button, a[class]) *) { margin-inline: auto; }
body.has-backdrop #view .lx-group.right { background: color-mix(in srgb, var(--gold) 12%, var(--bg2)); }
:root[data-contrast="high"] body.has-backdrop #view :is(h2, h3, h4, p, small, label, summary, .muted, .small) { background: none; padding: 0; }
/* the picture a child chose is meant to be seen: with a background behind the pages there is more room at the edges and between the cards */
body.has-backdrop #app.kid #view { padding-left: calc(20px + var(--safe-l)); padding-right: calc(20px + var(--safe-r)); }
body.has-backdrop #app.kid #view .stack > * + * { margin-top: 16px; } body.has-backdrop .hm { gap: calc(22px * var(--k)); } body.has-backdrop .kgrid:not(.small) { gap: calc(18px * var(--k)); } body.has-backdrop .kcols { gap: calc(18px * var(--k)); }
@media (min-width: 700px) { body.has-backdrop #app.kid #view { padding-left: calc(40px + var(--safe-l)); padding-right: calc(40px + var(--safe-r)); padding-top: 28px; } body.has-backdrop .hm { gap: calc(26px * var(--k)); } body.has-backdrop .kgrid:not(.small) { gap: calc(22px * var(--k)); } body.has-backdrop .kcols { gap: calc(22px * var(--k)); } }
@media (max-width: 1023px) and (max-height: 520px) and (orientation: landscape) { body.has-backdrop #app.kid #view { padding-left: calc(22px + var(--safe-l)); padding-right: calc(22px + var(--safe-r)); padding-top: 12px; } }
body.has-backdrop #app.kid #sidebar { background: color-mix(in srgb, var(--bg2) 94%, transparent); }
body.gk-playing #backdrop *, body.calm #backdrop * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { #backdrop * { animation: none !important; } }
/* scenes: slow, gentle movement — a few things only, so an old tablet stays cool */
@keyframes bd-drift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
@keyframes bd-bob { from { transform: translateY(-1.2%); } to { transform: translateY(1.2%); } }
@keyframes bd-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes bd-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
#backdrop .bd-drift { animation: bd-drift 46s ease-in-out infinite alternate; } #backdrop .bd-drift.b { animation-duration: 64s; animation-direction: alternate-reverse; }
#backdrop .bd-bob { animation: bd-bob 7s ease-in-out infinite alternate; } #backdrop .bd-bob.b { animation-duration: 9s; animation-direction: alternate-reverse; }
#backdrop .bd-twinkle { animation: bd-twinkle 4.2s ease-in-out infinite; } #backdrop .bd-twinkle.b { animation-delay: -2.1s; animation-duration: 5.6s; }
#backdrop .bd-sway { animation: bd-sway 8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }

/* the "My Background" page */
.bd-now { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(136px * var(--k)), 1fr)); gap: 12px; }
.bd-pick { position: relative; display: grid; gap: 6px; padding: 6px 6px 8px; border: 0; border-radius: 20px; background: var(--panel2); color: var(--text); font: inherit; font-weight: 800; font-size: calc(14px * var(--k)); text-align: center; cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--line), 0 4px 0 var(--line); transition: transform .16s var(--spring); min-width: 0; }
.bd-pick:hover { transform: translateY(-3px); } .bd-pick:active { transform: translateY(3px); }
.bd-pick .th { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 15px; overflow: hidden; background: var(--panel3); position: relative; }
.bd-pick .th svg, .bd-pick .th img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.bd-pick .th.bd-plain { background: linear-gradient(180deg, #bfe6ff 0%, #e4f4ff 46%, #fff6de 100%); } :root[data-theme="dark"] .bd-pick .th.bd-plain { background: linear-gradient(180deg, #0b1040 0%, #151a66 60%, #2a1a7c 100%); }
.bd-pick.on { box-shadow: inset 0 0 0 4px #ffc21a, 0 4px 0 #b97700; background: color-mix(in srgb, #ffc21a 20%, var(--panel)); }
.bd-pick.on::after { content: "✓"; position: absolute; top: -6px; right: -6px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #ffc21a; color: #2a1a00; font-weight: 900; box-shadow: 0 0 0 3px var(--panel); }
.bd-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.bd-sw { width: max(52px, calc(52px * var(--k))); height: max(52px, calc(52px * var(--k))); border-radius: 50%; border: 4px solid #fff; padding: 0; cursor: pointer; box-shadow: 0 0 0 2px var(--line2), 0 4px 0 var(--line); transition: transform .16s var(--spring); }
.bd-sw:active { transform: scale(.9); } .bd-sw.on { box-shadow: 0 0 0 4px #ffc21a, 0 4px 0 #b97700; }
.bd-mix { height: 64px; border-radius: 18px; box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px var(--line2); }
.bd-see { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(132px * var(--k)), 1fr)); gap: 8px; }   /* as many beside each other as fit with their words whole (“see‑through” is never broken) */
.bd-see .kchip { justify-content: center; text-align: center; padding-left: 6px; padding-right: 6px; }
.bd-frame { position: relative; width: 100%; max-width: 560px; margin: 0 auto; border-radius: 18px; overflow: hidden; background: #0a1238; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; box-shadow: inset 0 0 0 3px var(--line2); }
.bd-frame:active { cursor: grabbing; } .bd-frame img { position: absolute; max-width: none; display: block; pointer-events: none; -webkit-user-drag: none; }
.bd-frame:focus-visible { outline: 4px solid var(--gold); outline-offset: 2px; }
.bd-lock { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .bd-lock .e { font-size: calc(34px * var(--k)); } .bd-lock .main { flex: 1 1 220px; min-width: 0; }
.bd-zoom { display: flex; align-items: center; gap: 10px; } .bd-zoom input[type=range] { flex: 1; min-width: 0; height: 44px; }

/* ================================================================ 7. every device */
html { overflow: hidden; overscroll-behavior: none; }
body { overscroll-behavior: none; -webkit-touch-callout: none; }
#app { min-height: 0; }
#main { min-width: 0; } #view { min-width: 0; }
img, video { max-width: 100%; height: auto; }
img[width][height] { object-fit: contain; }
/* tap targets: at least 44 px */
.iconbtn { width: 44px; height: 44px; }
.khead .back { min-width: 44px; min-height: 44px; }
.tab { min-height: 44px; } .chip { min-height: 44px; display: inline-flex; align-items: center; }
input[type=range] { min-height: 44px; }
.switch { width: 54px; height: 44px; } .switch span { inset: 7px 2px; border-radius: 30px; } .switch span::after { top: 3px; }
.check { min-height: 44px; align-items: center; } .check input { margin-top: 0; }
input[type=checkbox], input[type=radio] { width: 24px; height: 24px; }
summary { padding-block: 11px; cursor: pointer; }
.helper .tutors button { min-height: 44px; padding: 4px 14px; font-size: 14px; } .helper .starters button { min-height: 44px; font-size: 14px; }
.helper .hh .iconbtn { color: var(--text); }
.helper { z-index: 78; }   /* above the bottom bar, so its typing box is never covered */
@media (max-width: 699px) { .helper .starters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; } .helper .starters::-webkit-scrollbar { display: none; } .helper .starters button { flex: none; white-space: nowrap; }
  .helper { height: min(calc(88 * var(--dvh)), 720px); padding-bottom: var(--safe-b); } }
.pinpad button { min-width: 44px; }
.klogo { min-height: 44px; min-width: 44px; } .me-chip { min-height: 44px; } .kchip { min-width: 44px; justify-content: center; }
.ro-seat { width: 156px; } .ro-seat .btns { gap: 4px; } .ro-seat .ktool { width: 44px; height: 44px; font-size: 16px; border-radius: 12px; }
@media (max-width: 699px) { .ro-seat { width: calc(50% - 5px); min-width: 150px; } }
.wd-swatch { min-width: 44px; min-height: 44px; }
.mu-black button { width: clamp(24px, calc(6.4 * var(--vw)), 34px); }
body.kid-mode .btn.sm { min-height: 44px; padding: 8px 14px; }
.mu-string { height: clamp(44px, calc(7 * var(--vw)), 54px); } .mu-string button:first-child { min-width: 44px; }
.mu-cell { height: max(36px, calc(30px * var(--k))); }
.mu-row { grid-template-columns: 62px repeat(var(--steps, 16), minmax(28px, 1fr)); }
@media (max-width: 700px) { .mu-row { grid-template-columns: 48px repeat(var(--steps, 16), minmax(32px, 1fr)); } }
.lf-cal { gap: 3px; } .lf-cal .day { min-height: max(48px, calc(64px * var(--k))); } @media (max-width: 699px) { .lf-cal .day { min-height: 48px; padding: 3px; } }
@media (pointer: coarse), (max-width: 1023px) { .btn.sm { min-height: 44px; padding: 8px 14px; } .navlink { min-height: 44px; } .conv { min-height: 44px; } .msg .tools button { min-width: 44px; min-height: 44px; } }
/* form fields: 16 px or more, so an iPhone does not zoom in when one is tapped */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]), select, textarea { font-size: max(16px, 1em); }
/* dialogs fit small screens */
.overlay { padding: calc(12px + var(--safe-t)) calc(12px + var(--safe-r)) calc(12px + var(--safe-b)) calc(12px + var(--safe-l)); }
.modal { max-width: 100%; overflow-x: hidden; overscroll-behavior: contain; border-radius: 24px; }
body.kid-mode .modal { border: 0; box-shadow: 0 0 0 3px var(--line2), 0 24px 60px rgba(0, 0, 0, .4); }
@media (max-width: 699px) { .overlay { padding: calc(8px + var(--safe-t)) 0 0; } .overlay .modal { max-height: calc(calc(100 * var(--dvh)) - 20px - var(--safe-t)); } }
@media (max-height: 520px) and (orientation: landscape) { .overlay { align-items: center; padding: 6px calc(8px + var(--safe-r)) 6px calc(8px + var(--safe-l)); } .overlay .modal { width: min(720px, 100%); max-height: calc(calc(100 * var(--dvh)) - 12px); border-radius: 18px; padding: 12px 16px; } .pinpad { grid-template-columns: repeat(6, 56px); gap: 6px; margin: 6px auto; } .pinpad button { height: 46px; font-size: 20px; }
  .helper { height: calc(calc(100 * var(--dvh)) - 12px); } .kfull { padding-top: calc(10px + var(--safe-t)); padding-bottom: calc(10px + var(--safe-b)); } }
/* wide tables scroll inside their own box */
.tblwrap { max-width: 100%; }
@media (max-width: 899px) { .panel > table.tbl, .card > table.tbl, .tabbody > table.tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } }
.md table { display: block; overflow-x: auto; max-width: 100%; } .md pre, .code, .diff { max-width: 100%; }
.md { overflow-wrap: anywhere; }
/* stages (games, drawing boards, worlds): never taller than what can be seen, never under a scrolling finger */
.kstage { overscroll-behavior: contain; }
.kstage[style*="--ar"]:not(.gk-stage):not(.cr-stage):not(.wd-gridstage) { margin-inline: auto; max-width: min(100%, calc((calc(100 * var(--dvh)) - var(--topbar) - var(--tabbar) - var(--safe-t) - var(--safe-b) - 110px) * var(--ar))); min-width: min(100%, 260px); }
.kstage canvas { touch-action: none; }
/* a phone on its side: the start screen of a game is made compact, so it fits the little height there is */
@media (max-height: 520px) and (orientation: landscape) { .gk-stage .gk-menu { padding: 44px 10px 8px; } .gk-card { gap: 6px; } .gk-card .gk-emoji { display: none; } .gk-title { font-size: 20px; } .gk-sub { font-size: 14px; line-height: 1.25; }
  .gk-speed button { min-height: 46px; font-size: 13px; grid-auto-flow: column; gap: 6px; } .gk-speed button .e { font-size: 18px; } .gk-stage .gk-menu .kbtn.big { min-height: 46px; font-size: 17px; padding: 6px 26px; } .gk-actions { gap: 8px; } }
/* avatars and thumbnails keep their shape */
.kme .av svg, .av-chip svg, .who .pic svg, .helper .hh .who svg { object-fit: contain; }
.gallery img, .cr-thumb img { object-fit: cover; }
.lightbox img { object-fit: contain; width: auto; height: auto; }
/* safe areas: the notch and the home bar */
.timeup, .kfull, .welcome { padding-left: calc(18px + var(--safe-l)); padding-right: calc(18px + var(--safe-r)); }
.offline-bar { padding-left: calc(8px + var(--safe-l)); padding-right: calc(8px + var(--safe-r)); }
/* small phones: a little less of everything */
@media (max-width: 419px) { body[data-band="early"] { --k: 1.08; --kpad: 14px; } body[data-band="kid"] { --k: 1; --kpad: 14px; } #view { padding-left: calc(12px + var(--safe-l)); padding-right: calc(12px + var(--safe-r)); }
  } @media (max-width: 699px) { #app.kid #topbar { gap: 6px; padding-left: calc(8px + var(--safe-l)); padding-right: calc(8px + var(--safe-r)); } #app.kid #topbar .kstat { padding: 4px 9px; } #app.kid #topbar .grownup-btn { padding: 4px 8px; } #helperFab { height: 46px; min-width: 46px; } }
@media (max-width: 699px) { body.kid-mode .khead { gap: 10px; padding: 10px 12px; } body.kid-mode .khead h1 { font-size: calc(21px * var(--k)); } body.kid-mode .khead .emoji { width: 44px; height: 44px; font-size: 25px; border-radius: 14px; }
  body.kid-mode .khead p { font-size: .92em; line-height: 1.3; margin-top: 1px; } body.kid-mode .khead .title { min-width: 0; flex: 1 1 120px; } body.kid-mode .khead .back + .emoji { display: none; }
  /* the "Read to me" button of a page becomes a round 🔊 on a phone, so the banner stays one row */
  body.kid-mode .khead .acts > .talk-btn:not(.round) { width: 50px; min-height: 50px; padding: 0; border-radius: 50%; font-size: 20px; } body.kid-mode .khead .acts > .talk-btn:not(.round) > span:not(.e) { display: none; }
  .kbtn.big { padding: 10px 22px; }
  #app.kid #view { padding-bottom: calc(28px + var(--safe-b)); } }
@media (max-width: 1023px) and (max-height: 520px) and (orientation: landscape) { #helperFab { height: 44px; min-width: 44px; } #helperFab > :first-child { width: 36px; height: 36px; } #app.kid #view { padding-bottom: calc(24px + var(--safe-b)); } }

/* ================================================================ 8. the grown-up side: calm and tidy */
body:not(.kid-mode) .panel { border-radius: 16px; }
body:not(.kid-mode) .pagehead .emoji { border-radius: 14px; }
body:not(.kid-mode) .btn { border-radius: 12px; }
body:not(.kid-mode) .li, body:not(.kid-mode) .tile, body:not(.kid-mode) .stat, body:not(.kid-mode) .card { border-radius: 12px; }
body:not(.kid-mode) .pagehead h1 { text-wrap: balance; }
body:not(.kid-mode) #topbar { gap: 8px; }
/* a permission: its switch stays beside its name, however long the explanation is */
.setting[data-perm] { align-items: flex-start; } .setting[data-perm] .main b { font-size: 1.05em; } .setting[data-perm] .main small { margin-top: 2px; line-height: 1.5; }
@media (max-width: 699px) { .setting[data-perm] { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; } .setting[data-perm] .main { display: contents; }
  .setting[data-perm] .main b { grid-column: 2; grid-row: 1; } .setting[data-perm] .switch { grid-column: 3; grid-row: 1; } .setting[data-perm] .main small { grid-column: 1 / -1; grid-row: 2; } }
@media (max-width: 699px) { body:not(.kid-mode) #tabbar a, body:not(.kid-mode) #tabbar button { min-height: 44px; font-size: 11.5px; } body:not(.kid-mode) .setting { flex-wrap: wrap; } body:not(.kid-mode) .setting .main { flex: 1 1 200px; min-width: 0; } }

/* ---------- the grown-up side in the light look (its starting look since 1.3): calm, light, plain — the same family as the children's pages (same letters, same
   round corners, the same blue), without the play: no glow, no gold headings, quiet cards on a pale page, one blue for “this is chosen”, green for “on”. ---------- */
:root[data-theme="light"] body:not(.kid-mode) {
  --bg: #f4f7fc; --bg2: #ffffff; --panel: #ffffff; --panel2: #f6f9fd; --panel3: #e8eff9; --line: #dce5f2; --line2: #b7c8e2; --text: #14213d; --muted: #4a5a7b; --faint: #66758f;
  --blue: #2563d9; --blue2: #2563d9; --gold: #b86e00; --gold2: #f0a91a; --gold-ink: #ffffff; --ok: #0f7a3d; --warn: #9a5b00; --danger: #c22740; --info: #2563d9; --chip: #eef3fb; --input: #ffffff; --her: #f6f9fd;
  --shadow: 0 1px 2px rgba(20, 33, 61, .05), 0 6px 18px rgba(20, 33, 61, .06); --glow: 0 0 0 1px #b7c8e2, 0 8px 22px rgba(20, 33, 61, .08);
  --hero: linear-gradient(135deg, rgba(37, 99, 217, .07), rgba(240, 169, 26, .09) 70%, transparent);
  --sky: linear-gradient(180deg, #e9f2ff 0, #f4f7fc 340px, #f4f7fc 100%);
}
:root[data-theme="light"][data-contrast="high"] body:not(.kid-mode) { --bg: #fff; --bg2: #fff; --panel: #fff; --panel2: #fff; --line: #000; --line2: #000; --text: #000; --muted: #000; --faint: #222; --sky: #fff; --shadow: none; }
:root[data-theme="light"] body:not(.kid-mode) #topbar { background: #ffffff; border-bottom: 1px solid var(--line); box-shadow: 0 3px 0 0 transparent; }
:root[data-theme="light"] body:not(.kid-mode) #topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, #2f7dff, #6a5cff 55%, #b44dff); pointer-events: none; }   /* the colours of the children's top bar, as one thin line */
:root[data-theme="light"] body:not(.kid-mode) #sidebar { background: #ffffff; border-right: 1px solid var(--line); }
:root[data-theme="light"] body:not(.kid-mode) .navgroup { color: var(--muted); letter-spacing: .1em; }
:root[data-theme="light"] body:not(.kid-mode) .navlink { font-weight: 500; }
:root[data-theme="light"] body:not(.kid-mode) .navlink .ico { background: var(--panel2); box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="light"] body:not(.kid-mode) .navlink:hover { background: var(--panel2); border-color: transparent; }
:root[data-theme="light"] body:not(.kid-mode) .navlink.active { background: #e9f0ff; border-color: transparent; color: #153a8f; font-weight: 700; }
:root[data-theme="light"] body:not(.kid-mode) .navlink.active .ico { background: #ffffff; box-shadow: inset 0 0 0 2px #2563d9; }
:root[data-theme="light"] body:not(.kid-mode) :is(h3, .md h1, .md h2, .md h3) { color: var(--text); }
:root[data-theme="light"] body:not(.kid-mode) h4 { color: var(--muted); }
:root[data-theme="light"] body:not(.kid-mode) .panel { border-color: var(--line); box-shadow: var(--shadow); }
:root[data-theme="light"] body:not(.kid-mode) .panel.glow { box-shadow: var(--shadow); border-color: var(--line2); }
:root[data-theme="light"] body:not(.kid-mode) :is(.card, .tile, .stat, .li) { background: var(--panel2); border-color: var(--line); }
:root[data-theme="light"] body:not(.kid-mode) .stat .l { color: var(--muted); }
:root[data-theme="light"] body:not(.kid-mode) .btn { background: #ffffff; border-color: var(--line2); color: var(--text); font-weight: 600; }
:root[data-theme="light"] body:not(.kid-mode) .btn:hover { filter: none; background: var(--panel2); }
:root[data-theme="light"] body:not(.kid-mode) .btn.primary, :root[data-theme="light"] body:not(.kid-mode) .btn.blue { background: #2563d9; border-color: #2563d9; color: #fff; box-shadow: 0 2px 0 #1b4aa6; }
:root[data-theme="light"] body:not(.kid-mode) .btn.primary:hover, :root[data-theme="light"] body:not(.kid-mode) .btn.blue:hover { background: #1f57c2; }
:root[data-theme="light"] body:not(.kid-mode) .btn.gold { background: #ffc21a; border-color: #e0a400; color: #2a1a00; }
:root[data-theme="light"] body:not(.kid-mode) .btn.ghost { background: transparent; border-color: transparent; color: #1d4fc4; }
:root[data-theme="light"] body:not(.kid-mode) .btn.danger { background: #fff; color: var(--danger); }
:root[data-theme="light"] body:not(.kid-mode) :is(.tab.on, .chip.on) { background: #2563d9; border-color: #2563d9; color: #fff; }
:root[data-theme="light"] body:not(.kid-mode) .tab { background: #ffffff; border-color: var(--line2); }
:root[data-theme="light"] body:not(.kid-mode) .switch span { background: #dfe6f1; border-color: #b7c8e2; } :root[data-theme="light"] body:not(.kid-mode) .switch span::after { background: #ffffff; box-shadow: 0 1px 3px rgba(20, 33, 61, .35); }
:root[data-theme="light"] body:not(.kid-mode) .switch input:checked + span { background: #18a35a; border-color: #0f7a3d; }
:root[data-theme="light"] body:not(.kid-mode) .switch input:focus-visible + span { outline-color: #2563d9; }
:root[data-theme="light"] body:not(.kid-mode) :focus-visible { outline-color: #2563d9; }
:root[data-theme="light"] body:not(.kid-mode) input:focus, :root[data-theme="light"] body:not(.kid-mode) select:focus, :root[data-theme="light"] body:not(.kid-mode) textarea:focus { border-color: #2563d9; box-shadow: 0 0 0 3px rgba(37, 99, 217, .18); }
:root[data-theme="light"] body:not(.kid-mode) input[type=checkbox], :root[data-theme="light"] body:not(.kid-mode) input[type=radio], :root[data-theme="light"] body:not(.kid-mode) input[type=range] { accent-color: #2563d9; }
:root[data-theme="light"] body:not(.kid-mode) .pagehead .emoji { background: #ffffff; border-color: var(--line); box-shadow: var(--shadow); }
:root[data-theme="light"] body:not(.kid-mode) .pagehead p { color: var(--muted); }
:root[data-theme="light"] body:not(.kid-mode) .me-chip { background: #fff; border-color: var(--line2); }
:root[data-theme="light"] body:not(.kid-mode) .bar > i { background: #2563d9; }
:root[data-theme="light"] body:not(.kid-mode) .pill.gold { color: #8a5200; border-color: #d9a441; background: #fff6e0; }
:root[data-theme="light"] body:not(.kid-mode) .banner { background: #ffffff; border-color: var(--line2); }
:root[data-theme="light"] body:not(.kid-mode) .who .pic { background: #ffffff; border-color: #cfe0f7; box-shadow: 0 6px 18px rgba(20, 33, 61, .10); } :root[data-theme="light"] body:not(.kid-mode) .who:hover .pic { border-color: #2563d9; }
:root[data-theme="light"] body:not(.kid-mode) .door { box-shadow: var(--shadow); border-color: var(--line2); } :root[data-theme="light"] body:not(.kid-mode) .door:hover { border-color: #2563d9; }
:root[data-theme="light"] body:not(.kid-mode) .welcome .title i { color: #2563d9; text-shadow: 0 3px 0 rgba(21, 58, 143, .18); } :root[data-theme="light"] body:not(.kid-mode) .welcome .title b { color: #f0a000; text-shadow: 0 3px 0 rgba(138, 82, 0, .22); }
:root[data-theme="light"] body:not(.kid-mode) .auth-art .welcome .title i { color: #6cc0ff; text-shadow: 0 4px 0 #1348a8; } :root[data-theme="light"] body:not(.kid-mode) .auth-art .welcome .title b { color: #ffcb3d; text-shadow: 0 4px 0 #b26a00; }
:root[data-theme="light"] body:not(.kid-mode) .toast { box-shadow: 0 8px 24px rgba(20, 33, 61, .16); }
:root[data-theme="light"] body:not(.kid-mode) #tabbar { background: #fff; } :root[data-theme="light"] body:not(.kid-mode) #tabbar .on { color: #1d4fc4; }
/* a long explanation (a permission): one short first line, the rest behind “More” (components.js folds it) */
.fold-more { display: inline-flex; align-items: center; min-height: 32px; margin: 2px 0 0; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel2); color: var(--blue2); font: inherit; font-size: .95em; font-weight: 700; cursor: pointer; }
.fold-more:hover { border-color: var(--blue2); } .fold-lead { display: block; color: var(--text); opacity: .86; } .fold-rest { display: block; margin-top: 6px; }
@media (pointer: coarse) { .fold-more { min-height: 44px; padding: 6px 14px; } }
@media print { .setting .fold-rest[hidden] { display: block !important; } .fold-more { display: none !important; } }

/* ---------- the very first screen, while the app is still arriving (seconds, on a slow connection): a friendly, larger picture — and on a child's device
   (boot.js marks it) the child's own colours straight away, so nothing flips from dark to bright ---------- */
#topbar:empty ~ #main #view > .loading { min-height: calc(70 * var(--dvh)); align-content: center; justify-items: center; gap: 18px; padding: 24px; }
#topbar:empty ~ #main #view > .loading::before { content: ""; width: 124px; height: 124px; border-radius: 30px; background: url("/icons/icon-192.png") center / cover no-repeat; box-shadow: 0 8px 0 rgba(20, 40, 110, .16), 0 18px 34px rgba(20, 40, 110, .2); animation: bob 2.4s ease-in-out infinite; }
#topbar:empty ~ #main #view > .loading .spinner { width: 46px; height: 46px; border-width: 5px; }
#topbar:empty ~ #main #view > .loading::after { content: "Getting the Lab ready…"; font: 700 20px/1.2 var(--display); color: var(--text); text-align: center; }
:root[data-boot="kid"] body:not(.kid-mode) { background: radial-gradient(900px 520px at 88% -8%, rgba(255, 214, 102, .55), transparent 62%), radial-gradient(900px 600px at -6% 104%, rgba(255, 143, 177, .30), transparent 60%), linear-gradient(180deg, #bfe6ff 0%, #e4f4ff 46%, #fff6de 100%); color: #17224f; }
:root[data-boot="kid"][data-theme="dark"] body:not(.kid-mode) { background: radial-gradient(900px 560px at 84% -10%, rgba(180, 77, 255, .50), transparent 62%), linear-gradient(180deg, #0b1040 0%, #151a66 60%, #1d1670 100%); color: #f6f8ff; }
:root[data-boot="kid"][data-theme] body:not(.kid-mode) #topbar:empty { background: linear-gradient(90deg, #2f7dff 0%, #6a5cff 55%, #b44dff 100%); border-bottom: 0; } :root[data-boot="kid"][data-theme="dark"] body:not(.kid-mode) #topbar:empty { background: linear-gradient(90deg, #1c2a8c 0%, #3a2aa2 55%, #5c2aac 100%); }
:root[data-boot="kid"][data-theme] body:not(.kid-mode) #topbar:empty::after { display: none; }
:root[data-boot="kid"] #topbar:empty ~ #main #view > .loading::before { width: 150px; height: 150px; border-radius: 36px; }
:root[data-boot="kid"] #topbar:empty ~ #main #view > .loading::after { font-size: 24px; }
body.calm #topbar:empty ~ #main #view > .loading::before { animation: none; }

/* ================================================================ 9. less movement, when asked */
body.calm .ktile, body.calm .kbtn, body.calm .kchip, body.calm .knav, body.calm .krow.click, body.calm .kanswer, body.calm #tabbar a, body.calm #tabbar button, body.calm .hm-bg, body.calm .bd-pick, body.calm .bd-sw { transition: none; }
body.calm .ktile:hover, body.calm .ktile:active, body.calm .hm-bg:hover, body.calm .bd-pick:hover { transform: none; }
body.calm #app.kid #topbar .kstat.talk-toggle.on { animation: none; }
@media (prefers-reduced-motion: reduce) { #app.kid #topbar .kstat.talk-toggle.on { animation: none; } .ktile:hover, .ktile:active, .hm-bg:hover, .bd-pick:hover { transform: none; } }

/* ================================================================ 10. one loud speaker button per question screen
   While a lesson or a starting-point question is on the screen (<body class="one-say">, set by kid.js): the page's own “Read to me” in the banner (it reads the
   page title) steps aside, and the buddy's little 🔊 is small and pale. The question's big “Say it again” / “Read to me” is the one a child finds.
   The 🔊 switch in the top bar and “Tap to hear me” stay as they are. `.talk-btn.quiet` gives the same pale look anywhere else. */
body.one-say .khead .acts > .talk-btn.khead-read { display: none; }
body.one-say .buddy-row > .kbtn.talk-btn, .kbtn.talk-btn.quiet { --c: transparent; background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--line2); margin: 0; width: 44px; min-width: 44px; min-height: 44px; padding: 0; font-size: 17px; opacity: .8; }
body.one-say .buddy-row > .kbtn.talk-btn:active, .kbtn.talk-btn.quiet:active { box-shadow: inset 0 0 0 2px var(--line2); }
body.one-say .buddy-row > .kbtn.talk-btn.on, .kbtn.talk-btn.quiet.on { opacity: 1; }
/* the “Ask a grown-up” card: its read button sits on its own line above the two choices */
.ask-grownup .ask-read { margin: 4px 0 12px; }
.ask-grownup .ask-read:empty { display: none; }

/* ================================================================ version 1.4, fix round: room for the building studio, and the child's text size as a number */
/* --tx: how much bigger the child asked the words to be (Settings → Text size). Pages whose words have fixed sizes (the studio, the Trophy Room) multiply by it. */
body { --tx: 1; } body.kid-mode.text-lg { --tx: 1.12; } body.kid-mode.text-xl { --tx: 1.25; }
/* the studio fills its page to the last pixel (a page that scrolls keeps a little air at its end; this one does not scroll) */
#app.kid #view.full, #view.full, body.has-backdrop #app.kid #view.full { padding: 0; }   /* (also when the child's place is behind the pages: that look gives every page wider edges, and a page that fills the screen has none) */
/* while the studio is open the side menu steps back to its pictures: the picture and the pieces need the width (a laptop, a tablet on its side).
   Every place is still one tap away, and the menu button at the top opens the names. */
@media (min-width: 1024px) {
  body[data-page="studio-build"] #app.kid { grid-template-columns: calc(76px + var(--safe-l)) minmax(0, 1fr); }
  body[data-page="studio-build"] #app.kid:not(.sidebar-open) #sidebar { padding: 8px 6px calc(10px + var(--safe-b)) calc(6px + var(--safe-l)); scrollbar-width: none; }
  body[data-page="studio-build"] #app.kid:not(.sidebar-open) #sidebar::-webkit-scrollbar { display: none; }
  body[data-page="studio-build"] #app.kid:not(.sidebar-open) #sidebar .knav { justify-content: center; gap: 0; padding: 4px; margin: 3px 0; min-height: 52px; }
  body[data-page="studio-build"] #app.kid:not(.sidebar-open) #sidebar .knav span:not(.ico) { display: none; }
  body[data-page="studio-build"] #app.kid:not(.sidebar-open) #sidebar .knav .ico { width: 44px; height: 44px; font-size: 23px; }
  body[data-page="studio-build"] #app.kid.sidebar-open #sidebar { position: fixed; z-index: 70; top: calc(var(--topbar) + var(--safe-t)); bottom: 0; left: 0; width: calc(240px * var(--k)); box-shadow: 8px 0 30px rgba(20, 40, 110, .3); background: var(--bg2); }
  body[data-page="studio-build"] #app.kid #menuBtn { display: inline-grid; color: var(--bar-ink, #fff); }
  /* a grown-up who builds along from their own device: the same */
  body[data-page="studio-build"] #app:not(.kid):not(.bare) { grid-template-columns: 76px minmax(0, 1fr); }
  body[data-page="studio-build"] #app:not(.kid):not(.sidebar-open) #sidebar { padding: 8px 6px; }
  body[data-page="studio-build"] #app:not(.kid):not(.sidebar-open) #sidebar .navgroup, body[data-page="studio-build"] #app:not(.kid):not(.sidebar-open) #sidebar .navlink span:not(.ico), body[data-page="studio-build"] #app:not(.kid):not(.sidebar-open) #sidebar .navsearch { display: none; }
  body[data-page="studio-build"] #app:not(.kid):not(.sidebar-open) #sidebar .navlink { justify-content: center; padding: 7px; } body[data-page="studio-build"] #app:not(.kid):not(.sidebar-open) #sidebar .navlink .ico { width: 38px; height: 38px; font-size: 19px; }
  body[data-page="studio-build"] #app:not(.kid).sidebar-open #sidebar { position: fixed; z-index: 60; top: calc(var(--topbar) + var(--safe-t)); bottom: 0; left: 0; width: 280px; box-shadow: var(--shadow); }
}