/* Robokids Africa (c) 2026 - Digital Classroom shared styles (v5 "new look"), loaded on every page by robokids.js.
 *
 * ============================== DESIGN TOKENS (use these in every page's own CSS) ==============================
 * Font (bundled offline, SIL OFL, fonts/lexend/):  Lexend, weight 400 for text, 600 for headings and buttons.
 *   --rk-font-ui        "Lexend", system-ui, "Segoe UI", Arial, sans-serif      (text, buttons, everything)
 *   --rk-font-display   same as --rk-font-ui                                     (headings)
 *   The child's own choice from the Aa panel (html.rk-font + --rk-font) always wins over Lexend.
 * Colours
 *   --rk-ink #14233A (text)          --rk-ink-2 #3B4A5F (body text)     --rk-muted #5B6878 (small/quiet text)
 *   --rk-blue #2A68A2 (main buttons, links)   --rk-blue-deep #1D4F7E (headings on white, quiet-button text)
 *   --rk-blue-soft #E6F0F9   --rk-blue-mist #F2F7FC (soft panels, hover)
 *   --rk-orange #A65200 (the "go" button, white text on it)   --rk-orange-bright #E07000 (accents/focus only, never under text)
 *   --rk-orange-soft #FDEEDF   --rk-green #1B7040 / --rk-green-soft #E3F3E9   --rk-red #B3261E / --rk-red-soft #FBE9E7
 *   --rk-sun #FFC93C (stars) with outline --rk-sun-deep #8A6A0E (also the colour of star TEXT on white)
 *   --rk-paper #F5F8FB (page background)   --rk-card #FFFFFF   --rk-line #DCE4EC (borders)
 * Shape:  --rk-r-hero 28px   --rk-r-card 18px   --rk-r-btn 16px   --rk-r-sm 12px   --rk-touch 48px (min button height)
 * Shadow: --rk-shadow (soft card lift)      Focus: 3px solid --rk-orange-bright outline (set below for every page)
 * Rules: sentence case, no ALL-CAPS labels, no arrows in buttons, buttons 48-52px high, WCAG 2.2 AA.
 *
 * Ready-made classes any page may use:
 *   .rk-btn (+ .rk-main blue | .rk-quiet white; plain .rk-btn is the orange "go" button)   .rk-chip (pill)
 *   .rk-card-box (white rounded card)   .rk-photo (striped photo placeholder; an <img> inside covers it)   .rk-sr (screen-reader only)
 *   .rk-brandbar (the shared top bar: logo left, .rk-home as a quiet pill)
 * ===================================================================================================================== */
@font-face { font-family: "Lexend"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("fonts/lexend/lexend-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lexend"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("fonts/lexend/lexend-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --rk-ink: #14233A; --rk-ink-2: #3B4A5F; --rk-muted: #5B6878;
  --rk-blue: #2A68A2; --rk-blue-deep: #1D4F7E; --rk-blue-soft: #E6F0F9; --rk-blue-mist: #F2F7FC;
  --rk-orange: #A65200; --rk-orange-bright: #E07000; --rk-orange-soft: #FDEEDF;
  --rk-green: #1B7040; --rk-green-soft: #E3F3E9; --rk-red: #B3261E; --rk-red-soft: #FBE9E7;
  --rk-sun: #FFC93C; --rk-sun-deep: #8A6A0E;
  --rk-paper: #F5F8FB; --rk-card: #FFFFFF; --rk-line: #DCE4EC;
  --rk-r-hero: 28px; --rk-r-card: 18px; --rk-r-btn: 16px; --rk-r-sm: 12px; --rk-touch: 48px;
  --rk-shadow: 0 1px 0 rgba(20,35,58,.04), 0 10px 28px -16px rgba(20,35,58,.28);
  --rk-font-ui: "Lexend", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --rk-font-display: "Lexend", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  /* v4 names kept so older page CSS still works; they now point at the new palette */
  --rk-blue-strong: #2A68A2; --rk-blue-ink: #1D4F7E; --rk-sky: #F2F7FC; --rk-orange-strong: #A65200; --rk-orange-ink: #6B3500; --rk-cream: #FDEEDF;
  --rk-gold: #FFC93C; --rk-murram: #B5532A; --rk-radius: 16px; --rk-radius-lg: 28px;
  --rk-band: linear-gradient(90deg, #DCE4EC, #DCE4EC);
}
html { font-family: var(--rk-font-ui); -webkit-text-size-adjust: 100%; }
body { font-family: var(--rk-font-ui); }
/* the child's own letters (Aa panel) or the admin's classroom font always win */
html.rk-font, html.rk-font body, html.rk-font body *:not(svg):not(text) { font-family: var(--rk-font) !important; }
html.rk-easy body { letter-spacing: .04em; word-spacing: .12em; line-height: 1.6; }
html.rk-contrast body { filter: contrast(1.3) saturate(1.15); }
html.rk-contrast body * { text-shadow: none !important; }
[hidden] { display: none !important; }   /* hidden means hidden, even when a page's own class sets display */
.rk-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- visible focus everywhere: 3px bright orange, with a white halo so it shows on blue and orange too */
:focus-visible { outline: 3px solid var(--rk-orange-bright) !important; outline-offset: 3px; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible { box-shadow: 0 0 0 6px rgba(255,255,255,.9); }

/* ---- shared building blocks */
.rk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--rk-r-btn); border: 0;
  background: var(--rk-orange); color: #fff !important; font: 600 16px/1.2 var(--rk-font-ui); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, transform .1s; }
.rk-btn:hover { background: #8E4600; }
.rk-btn:active { transform: translateY(1px); }
.rk-btn.rk-main { background: var(--rk-blue); } .rk-btn.rk-main:hover { background: var(--rk-blue-deep); }
.rk-btn.rk-ghost, .rk-btn.rk-quiet { background: var(--rk-card); color: var(--rk-blue-deep) !important; border: 1.5px solid var(--rk-line); }
.rk-btn.rk-ghost:hover, .rk-btn.rk-quiet:hover { border-color: var(--rk-blue); background: var(--rk-blue-mist); }
.rk-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rk-line); background: var(--rk-card); border-radius: 99px; padding: 7px 13px; font: 400 14.5px/1.2 var(--rk-font-ui); color: var(--rk-ink-2); min-height: 40px; }
.rk-card-box { background: var(--rk-card); border: 1px solid var(--rk-line); border-radius: var(--rk-r-card); padding: 20px; }
.rk-photo { position: relative; overflow: hidden; color: var(--rk-blue-deep);
  background: repeating-linear-gradient(135deg, rgba(42,104,162,.07) 0 14px, rgba(42,104,162,0) 14px 28px), linear-gradient(160deg, #DDEAF6, #EEF4FA 55%, #FBEBDD); }
.rk-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rk-small { font-size: 13px; color: var(--rk-muted); margin: 6px 0; }
.rk-roba, .rk-avatar { display: inline-block; vertical-align: middle; }

/* ---- the shared top bar on app pages: white, a line under it, logo on the left, Home as a quiet pill */
.rk-brandbar { background: var(--rk-card) !important; border-bottom: 1px solid var(--rk-line) !important; border-image: none !important; box-shadow: none !important;
  font-family: var(--rk-font-ui); min-height: 64px; padding: 8px clamp(12px, 3vw, 32px) !important; }
.rk-brandbar img { height: 40px !important; width: auto; }
.rk-brandbar .rk-home { display: inline-flex !important; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px !important; border-radius: 99px !important;
  background: var(--rk-card) !important; color: var(--rk-blue-deep) !important; border: 1.5px solid var(--rk-line) !important; box-shadow: none !important;
  font: 600 15px/1 var(--rk-font-ui) !important; text-decoration: none !important; }
.rk-brandbar .rk-home:hover { border-color: var(--rk-blue) !important; background: var(--rk-blue-mist) !important; }
.rk-band { display: none; }

/* ---- reading and voice settings: the Aa button and its panel */
#rk-a11y { position: fixed; right: 12px; bottom: 12px; z-index: 2147482000; }
#rk-a11y.rk-in-top { position: static; z-index: auto; }
#rk-aa { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 48px; height: 48px; padding: 0 14px; border-radius: 99px;
  border: 1px solid var(--rk-line); background: var(--rk-card); color: var(--rk-blue-deep); font: 600 16px/1 var(--rk-font-ui); cursor: pointer;
  box-shadow: 0 6px 18px -8px rgba(20,35,58,.45); }
#rk-aa:hover { border-color: var(--rk-blue); background: var(--rk-blue-mist); }
#rk-aa svg { width: 18px; height: 18px; }
#rk-a11y.rk-in-top #rk-aa { box-shadow: none; width: 48px; padding: 0; }
#rk-a11y.rk-in-top #rk-aa svg { display: none; }
#rk-panel { position: fixed; right: 12px; bottom: 72px; z-index: 2147482600; width: 360px; max-width: calc(100vw - 24px); max-height: calc(100vh - 100px); overflow: auto;
  background: var(--rk-card); color: var(--rk-ink); border: 1px solid var(--rk-line); border-radius: 22px; box-shadow: 0 24px 60px -20px rgba(20,35,58,.5);
  padding: 18px 18px 14px; font: 400 15px/1.5 var(--rk-font-ui); }
#rk-panel.rk-panel-top { top: 76px; bottom: auto; max-height: calc(100vh - 92px); }
#rk-panel .rk-ph { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font: 600 18px var(--rk-font-ui); color: var(--rk-ink); }
#rk-panel .rk-row { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
#rk-panel .rk-row.rk-wrap { flex-wrap: wrap; }
#rk-panel .rk-row > span { min-width: 84px; color: var(--rk-muted); font-size: 14px; }
#rk-panel label.rk-row { min-height: 44px; cursor: pointer; }
#rk-panel button { border: 1.5px solid var(--rk-line); background: var(--rk-card); border-radius: 12px; padding: 8px 12px; font: 600 14px var(--rk-font-ui); color: var(--rk-blue-deep); cursor: pointer; min-height: 44px; }
#rk-panel button:hover { border-color: var(--rk-blue); background: var(--rk-blue-mist); }
#rk-panel button[aria-pressed="true"] { background: var(--rk-blue); border-color: var(--rk-blue); color: #fff; }
#rk-panel button[aria-pressed="true"]::before { content: "\2713 "; }
#rk-panel input[type=checkbox] { width: 24px; height: 24px; flex: none; accent-color: var(--rk-blue); }
#rk-panel .rk-x { border: 0; width: 44px; padding: 0; border-radius: 99px; background: var(--rk-blue-mist); font-size: 18px; }
#rk-panel .rk-btn { background: var(--rk-blue); color: #fff; border: 0; min-height: 48px; padding: 0 18px; border-radius: 14px; }
#rk-panel .rk-btn:hover { background: var(--rk-blue-deep); }

/* ---- who is playing (app pages): a quiet chip in the bottom-left corner */
#rk-who { position: fixed; left: 12px; bottom: 12px; z-index: 2147482000; background: var(--rk-card); border: 1px solid var(--rk-line); border-radius: 99px;
  padding: 4px 14px 4px 5px; font: 600 14px/1.2 var(--rk-font-ui); color: var(--rk-blue-deep); text-decoration: none; box-shadow: 0 6px 18px -8px rgba(20,35,58,.45);
  max-width: 60vw; min-height: 48px; display: inline-flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rk-who:hover { border-color: var(--rk-blue); }
#rk-who .rk-who-ava { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--rk-blue-soft); display: grid; place-items: center; line-height: 0; overflow: hidden; }
#rk-who .rk-who-ava svg { width: 32px; height: 32px; }
#rk-who small { font-weight: 400; color: var(--rk-muted); }

/* ---- toast: a dark pill at the bottom */
#rk-toast { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%) translateY(16px); opacity: 0; transition: opacity .25s, transform .25s;
  background: var(--rk-ink); color: #fff; padding: 12px 20px; border-radius: 16px; font: 400 15px/1.45 var(--rk-font-ui); z-index: 2147482500;
  max-width: min(520px, 92vw); text-align: center; pointer-events: none; box-shadow: 0 16px 36px -14px rgba(20,35,58,.6); }
#rk-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- celebrate: the results card (Roba cheering, stars, marks, "Saved to your record", the new badge).
 *      .rk-soft = a card at the bottom that never blocks the game; without it (the "who is playing?" gate) it is a dialog. */
.rk-celebrate { position: fixed; inset: 0; z-index: 2147482700; background: rgba(20,35,58,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.rk-cbox { position: relative; background: var(--rk-card); color: var(--rk-ink); border: 1px solid var(--rk-line); border-radius: 24px; padding: 24px; max-width: 400px; width: 100%;
  text-align: center; font: 400 16px/1.5 var(--rk-font-ui); box-shadow: 0 28px 60px -24px rgba(20,35,58,.55); animation: rk-pop .35s ease; overflow: hidden; }
.rk-cbox b { display: block; font: 600 21px/1.25 var(--rk-font-ui); color: var(--rk-ink); margin: 6px 0; }
.rk-cbox p { margin: 4px 0 14px; color: var(--rk-ink-2); }
.rk-cicon { font-size: 56px; line-height: 1.1; }
.rk-cicon svg { width: 96px; height: auto; }
.rk-cbox .rk-btn { margin: 4px; }
.rk-res { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; text-align: left; padding-right: 36px; }
.rk-res-roba { grid-row: span 3; line-height: 0; width: 86px; }
.rk-res-roba svg { width: 86px; height: auto; }
.rk-res-title { font: 600 19px/1.25 var(--rk-font-ui); color: var(--rk-ink); margin: 0; }
.rk-res-stars { display: flex; gap: 4px; }
.rk-res-stars svg { width: 34px; height: 34px; }
.rk-res-stars svg.rk-off path { fill: #E3EAF1; stroke: #B7C4D2; }
.rk-res-score { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.rk-res-score strong { font: 600 28px/1 var(--rk-font-ui); color: var(--rk-ink); }
.rk-res-score small { color: var(--rk-muted); font-size: 14px; }
.rk-saved { display: inline-flex; align-items: center; gap: 6px; background: var(--rk-green-soft); color: #0F4D2B; border-radius: 99px; padding: 5px 12px; font-size: 14px; line-height: 1.3; }
.rk-saved svg { width: 15px; height: 15px; flex: none; }
.rk-res-badge { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--rk-orange-soft); color: #5A2E00; border-radius: 16px; padding: 10px 12px; margin-top: 14px; }
.rk-res-badge .rk-medal { flex: none; width: 44px; height: 44px; }
.rk-cbox .rk-res-badge b { font-size: 16px; margin: 0 0 2px; color: var(--rk-ink); }
.rk-res-badge span { font-size: 14px; line-height: 1.4; }
.rk-res-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 12px; }
.rk-cbox .rk-res-acts .rk-btn { margin: 0; }
.rk-cbox .rk-cx { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 99px; background: var(--rk-blue-mist); color: var(--rk-blue-deep); font: 600 18px var(--rk-font-ui); cursor: pointer; }
.rk-celebrate.rk-soft { inset: auto 0 calc(72px + env(safe-area-inset-bottom, 0px)) 0; background: none; padding: 0 12px; pointer-events: none; }
.rk-celebrate.rk-soft .rk-cbox { pointer-events: auto; max-width: 420px; padding: 16px 16px 14px; background: linear-gradient(180deg, var(--rk-blue-mist), #fff 60%); }
.rk-celebrate.rk-soft .rk-cicon { font-size: 44px; }
@keyframes rk-pop { from { transform: scale(.85) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rk-star { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: none; } }
.rk-res-stars svg { animation: rk-star .5s ease both; } .rk-res-stars svg:nth-child(2) { animation-delay: .15s; } .rk-res-stars svg:nth-child(3) { animation-delay: .3s; }
@media (max-width: 420px) { .rk-res-roba, .rk-res-roba svg { width: 64px; } .rk-res-stars svg { width: 28px; height: 28px; } .rk-res-score strong { font-size: 24px; } }

/* ---- Roba's speech bubble (mascot.js builds it and its base styles) */
#rk-mascot { font-family: var(--rk-font-ui); }

@media print { #rk-a11y, #rk-who, #rk-toast, #rk-panel, .rk-celebrate { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .rk-cbox, .rk-res-stars svg { animation: none !important; }
}