/* Kalama website stylesheet (Phase 2, 2026-10-24).
   Built from the approved, frozen brand: assets/design/redesign_2026-10-23/brand/final/BRAND.md,
   STYLE.md and ui-kit/. Flat fills only: no outlines, no gradients, no blur shadows. Depth is one
   solid press edge under a shape (6 px, 4 px on small pieces and phones). Capsules, circles and
   28 px cards. Baloo Bhaijaan 2 for headings and controls, Readex Pro for reading.
   Element defaults use :where() so every game's own stylesheet still wins over them. */

/* 1. Fonts (self-hosted, SIL OFL) */
@font-face{font-family:"Baloo Bhaijaan 2";src:url("brand/fonts/BalooBhaijaan2-wght.ttf") format("truetype");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Readex Pro";src:url("brand/fonts/ReadexPro-wght.ttf") format("truetype");font-weight:160 700;font-style:normal;font-display:swap}

/* 2. Tokens (STYLE.md section 9) */
:root{
 --k-lilac:#A47BEA;--k-plum:#6A2464;--k-mint:#76DDB0;--k-sea:#8EE5C0;--k-teal:#168C86;
 --k-cloud:#FAF7FF;--k-ink:#2A2233;--k-mist:#6E6780;--k-pink:#FF9DB0;--k-tint:#EDE4FC;--k-star:#FFD84D;--k-white:#FFFFFF;
 --k-edge-plum:#4A1745;--k-edge-lilac:#7F58CC;--k-edge-mint:#4FB894;--k-edge-teal:#0E6A65;--k-edge-card:#DCCBF8;--k-edge-star:#E0B22C;
 --k-r-pill:999px;--k-r-card:28px;--k-r-callout:40px;--k-r-sm:12px;
 --k-font-display:"Baloo Bhaijaan 2","Readex Pro",system-ui,sans-serif;
 --k-font-body:"Readex Pro","IBM Plex Sans Arabic","Noto Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
 /* Phone first: 46 px capsules with Baloo 700 17 px, 44 px round icon buttons, 4 px press edge */
 --k-gutter:16px;--k-max:1200px;--k-press:4px;--k-btn-h:46px;--k-btn-fs:17px;--k-round:44px;--k-icon:22px;
 /* Astra's token names, mapped so the older game stylesheets follow the brand */
 --cream:var(--k-cloud);--ink:var(--k-ink);--muted:var(--k-mist);--teal:var(--k-plum);--mint:var(--k-tint);
 --coral:var(--k-lilac);--yellow:var(--k-star);--blue:var(--k-tint);--purple:var(--k-tint);
 --border:var(--k-edge-card);--shadow:0 6px 0 var(--k-edge-card);
 color-scheme:light;
}
@media (min-width:768px){:root{--k-gutter:24px;--k-press:6px;--k-btn-h:52px;--k-btn-fs:19px;--k-round:52px;--k-icon:26px}}
@media (min-width:1100px){:root{--k-gutter:32px;--k-round:56px;--k-icon:28px}}

/* 3. Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--k-cloud)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--k-cloud);color:var(--k-ink);font:400 17px/1.5 var(--k-font-body);overflow-x:clip;-webkit-font-smoothing:antialiased;font-synthesis:none}
html[dir="rtl"] body{line-height:1.7}
[hidden]{display:none!important}
main{flex:1 0 auto;width:100%;max-width:var(--k-max);margin:0 auto;padding:4px var(--k-gutter) 56px}
main:focus,main:focus-visible,#main:focus-visible,#main[tabindex]:focus-visible{outline:none}
:where(h1,h2,h3,h4,h5,h6){margin:0;font-family:var(--k-font-display);color:var(--k-plum);font-weight:800;line-height:1.15;letter-spacing:0}
:where(h1){font-size:clamp(30px,4.6vw,40px)}
:where(h2){font-size:clamp(24px,3.2vw,32px)}
:where(h3){font-size:clamp(20px,2.4vw,24px)}
:where(h4){font-size:19px;font-weight:700}
html[dir="rtl"] :where(h1,h2,h3,h4,h5,h6),html[lang="hi"] :where(h1,h2,h3,h4,h5,h6),html[lang="mr"] :where(h1,h2,h3,h4,h5,h6),html[lang="bn"] :where(h1,h2,h3,h4,h5,h6),html[lang="ta"] :where(h1,h2,h3,h4,h5,h6),html[lang="te"] :where(h1,h2,h3,h4,h5,h6),html[lang="th"] :where(h1,h2,h3,h4,h5,h6),html[lang="pa"] :where(h1,h2,h3,h4,h5,h6){line-height:1.45}
:where(p){margin:0}
:where(ul,ol){margin:0;padding-inline-start:1.2em}
:where(a){color:var(--k-plum);text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--k-lilac)}
:where(img,svg,video,canvas){max-width:100%}
:where(img){height:auto}
:where(button,input,select,textarea){font:inherit;color:inherit;letter-spacing:0}
:where(button){cursor:pointer;-webkit-tap-highlight-color:transparent}
:where(button:disabled,button[aria-disabled="true"]){cursor:default;opacity:.5}
/* A neutral kit piece for any game button that has no style of its own */
:where(main button){border:0;border-radius:var(--k-r-sm);background:var(--k-white);color:var(--k-plum);min-height:44px;padding:8px 14px;font-family:var(--k-font-display);font-weight:700;box-shadow:0 4px 0 var(--k-edge-card);transition:transform .12s,box-shadow .12s}
:where(main button:active:not(:disabled)){transform:translateY(4px);box-shadow:0 0 0 var(--k-edge-card)}
:where(input[type="text"],input[type="search"],input:not([type]),textarea){border:0;border-radius:var(--k-r-sm);background:var(--k-white);color:var(--k-ink);box-shadow:0 4px 0 var(--k-edge-card);padding:10px 14px;font:400 17px/1.4 var(--k-font-body)}
:where(main select){border:0;border-radius:var(--k-r-sm);background-color:var(--k-white);color:var(--k-plum);box-shadow:0 4px 0 var(--k-edge-card);min-height:44px;padding:6px 12px;font:700 17px/1.2 var(--k-font-display)}
:where(details){border-radius:var(--k-r-sm)}
:where(summary){cursor:pointer;font-family:var(--k-font-display);font-weight:700;color:var(--k-plum)}
:focus-visible{outline:3px solid var(--k-lilac);outline-offset:3px}
h1,h2,h3,h4,h5,p,li,a,label,summary,dd,dt,figcaption,blockquote{overflow-wrap:break-word}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.skip{position:absolute;z-index:60;top:-80px;inset-inline-start:12px;padding:10px 18px;border-radius:var(--k-r-pill);background:var(--k-plum);color:#fff;font:700 17px/1.2 var(--k-font-display);text-decoration:none}
.skip:focus{top:12px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* 4. Kit icons: brand/icons.svg sprite, currentColor */
.k-ico{display:inline-block;flex:none;width:24px;height:24px;fill:currentColor;vertical-align:middle;pointer-events:none}
[dir="rtl"] .k-ico--dir{transform:scaleX(-1)}

/* 5. Kit buttons (STYLE.md section 6) */
.k-btn,.primary,.secondary,.download-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--k-btn-h);max-width:100%;padding:6px 22px;border:0;border-radius:var(--k-r-pill);background:var(--k-sea);color:var(--k-plum);box-shadow:0 var(--k-press) 0 var(--k-edge-mint);font:700 var(--k-btn-fs)/1.15 var(--k-font-display);letter-spacing:0;text-align:center;text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s;-webkit-tap-highlight-color:transparent}
.k-btn:active:not(:disabled),.secondary:active:not(:disabled){transform:translateY(var(--k-press));box-shadow:0 0 0 var(--k-edge-mint)}
.k-btn--primary,.primary,.download-link{background:var(--k-plum);color:var(--k-white);box-shadow:0 var(--k-press) 0 var(--k-edge-plum)}
.k-btn--primary:active:not(:disabled),.primary:active:not(:disabled),.download-link:active{transform:translateY(var(--k-press));box-shadow:0 0 0 var(--k-edge-plum)}
.k-btn--lilac{background:var(--k-lilac);color:var(--k-ink);box-shadow:0 var(--k-press) 0 var(--k-edge-lilac)}
.k-btn--lilac:active:not(:disabled){box-shadow:0 0 0 var(--k-edge-lilac)}
.k-btn--white{background:var(--k-white);color:var(--k-plum);box-shadow:0 var(--k-press) 0 var(--k-edge-card)}
.k-btn--white:active:not(:disabled){box-shadow:0 0 0 var(--k-edge-card)}
.k-btn:disabled,.primary:disabled{opacity:.45;cursor:default}
.k-btn .k-ico,.primary .k-ico,.download-link .k-ico{width:var(--k-icon);height:var(--k-icon)}
/* Round icon button: Lilac circle, white icon, the label kept for screen readers */
.k-round{display:inline-grid;place-items:center;flex:0 0 auto;width:var(--k-round);height:var(--k-round);min-width:var(--k-round);min-height:0;padding:0;border:0;border-radius:50%;background:var(--k-lilac);color:var(--k-white);box-shadow:0 var(--k-press) 0 var(--k-edge-lilac);cursor:pointer;transition:transform .12s,box-shadow .12s;-webkit-tap-highlight-color:transparent}
.k-round:active:not(:disabled){transform:translateY(var(--k-press));box-shadow:0 0 0 var(--k-edge-lilac)}
.k-round .k-ico{width:var(--k-icon);height:var(--k-icon)}
.k-round--tint{background:var(--k-tint);color:var(--k-plum);box-shadow:0 var(--k-press) 0 var(--k-edge-card)}
.k-round--tint:active:not(:disabled){box-shadow:0 0 0 var(--k-edge-card)}
.k-round--plum{background:var(--k-plum);color:var(--k-white);box-shadow:0 var(--k-press) 0 var(--k-edge-plum)}
.k-round--plum:active:not(:disabled){box-shadow:0 0 0 var(--k-edge-plum)}
/* Chips: Sea Mint capsules with a plum label; the chosen chip turns Deep Plum */
.k-chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:4px 18px;border:0;border-radius:var(--k-r-pill);background:var(--k-sea);color:var(--k-plum);box-shadow:0 4px 0 var(--k-edge-mint);font:700 16px/1.1 var(--k-font-display);cursor:pointer;transition:transform .12s,box-shadow .12s;-webkit-tap-highlight-color:transparent}
.k-chip[aria-pressed="true"]{background:var(--k-plum);color:var(--k-white);box-shadow:0 4px 0 var(--k-edge-plum)}
.k-chip:active{transform:translateY(4px);box-shadow:0 0 0 var(--k-edge-mint)}
.k-chip .k-ico{width:22px;height:22px}
@media (min-width:768px){.k-chip{min-height:48px;padding:4px 22px;font-size:18px}}
/* Cards */
.k-card{background:var(--k-white);border-radius:var(--k-r-card);box-shadow:0 var(--k-press) 0 var(--k-edge-card);padding:20px}
/* Language switcher (kit): a Lilac Tint track with a Deep Plum pill under the chosen language */
.k-switch{display:inline-flex;gap:0;padding:5px;border-radius:var(--k-r-pill);background:var(--k-tint)}
.k-switch button{min-height:44px;min-width:104px;padding:4px 18px;border:0;border-radius:var(--k-r-pill);background:transparent;color:var(--k-plum);box-shadow:none;font:700 17px/1.1 var(--k-font-display);cursor:pointer}
.k-switch button[aria-pressed="true"]{background:var(--k-plum);color:var(--k-white)}

/* 6. Header: large logo, capsule navigation, the kit language chip */
.site-header{position:relative;z-index:30;display:flex;align-items:center;gap:10px;width:100%;max-width:var(--k-max);margin:0 auto;padding:12px var(--k-gutter)}
.brand{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;margin-inline-end:auto;border-radius:var(--k-r-pill);text-decoration:none}
.brand-symbol{display:block;width:48px;height:48px;flex:none}
.brand-word{display:block;width:auto;height:30px;flex:none}
.brand-word-ar,html[lang="ar"] .brand-word-en{display:none}
html[lang="ar"] .brand-word-ar{display:block}
.brand-mark,#brand-name{display:none!important}
@media (min-width:768px){.site-header{padding-block:16px;gap:12px}.brand{gap:10px}.brand-symbol{width:58px;height:58px}.brand-word{height:37px}}
@media (min-width:1100px){.brand{gap:12px}.brand-symbol{width:66px;height:66px}.brand-word{height:42px}}
/* Navigation: inline from 1100 px, a menu panel below that */
#main-nav{display:none}
#main-nav button{display:flex;align-items:center;gap:10px;min-height:46px;padding:4px 16px;border:0;border-radius:var(--k-r-pill);background:transparent;color:var(--k-plum);box-shadow:none;font:700 17px/1.1 var(--k-font-display);text-align:start;cursor:pointer;white-space:nowrap}
#main-nav button:hover{background:var(--k-tint)}
#main-nav button[aria-current="page"]{background:var(--k-plum);color:var(--k-white);box-shadow:0 4px 0 var(--k-edge-plum)}
#main-nav .nav-lang{display:none}
@media (min-width:1100px){#main-nav{display:flex;align-items:center;gap:4px}#main-nav button{font-size:18px}}
@media (max-width:1099.98px){
 #main-nav.is-open{display:flex;flex-direction:column;align-items:stretch;gap:8px;position:absolute;z-index:40;top:calc(100% - 2px);inset-inline:var(--k-gutter);padding:14px;border-radius:var(--k-r-card);background:var(--k-white);box-shadow:0 6px 0 var(--k-edge-card)}
 #main-nav.is-open button{width:100%;font-size:18px;white-space:normal}
 #main-nav.is-open button[aria-current="page"]{box-shadow:0 4px 0 var(--k-edge-plum)}
 #main-nav.is-open .nav-lang{display:flex;justify-content:center;margin-top:6px}
 #main-nav.is-open .nav-lang button{width:auto;min-width:0;flex:1 1 0;justify-content:center;white-space:nowrap}
}
.menu-toggle{display:inline-grid;place-items:center;flex:0 0 auto;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--k-tint);color:var(--k-plum);box-shadow:0 4px 0 var(--k-edge-card);cursor:pointer}
.menu-toggle .k-ico{width:24px;height:24px}
.menu-toggle[aria-expanded="true"]{background:var(--k-plum);color:var(--k-white);box-shadow:0 4px 0 var(--k-edge-plum)}
@media (min-width:768px){.menu-toggle{width:52px;height:52px}}
@media (min-width:1100px){.menu-toggle{display:none}}
/* The kit language chip; the real select sits on top of it, so the phone's own picker opens */
.k-lang{position:relative;display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;height:44px;padding:0 16px;border-radius:var(--k-r-pill);background:var(--k-sea);color:var(--k-plum);box-shadow:0 4px 0 var(--k-edge-mint);font:700 17px/1 var(--k-font-display)}
.k-lang .k-ico{width:24px;height:24px}
.k-lang-name{white-space:nowrap}
.k-lang select{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer;font-size:16px;-webkit-appearance:none;appearance:none}
.k-lang:focus-within{outline:3px solid var(--k-lilac);outline-offset:3px}
@media (max-width:519.98px){.k-lang{width:44px;padding:0;justify-content:center}.k-lang-name{display:none}}
@media (min-width:768px){.k-lang{height:52px;padding:0 20px;font-size:18px}}

/* 7. Footer: Deep Plum with the icon's white teeth along the top edge */
#footer{position:relative;margin-top:48px;padding:64px var(--k-gutter) 28px;background:var(--k-plum);color:var(--k-cloud)}
#footer::before{content:"";position:absolute;top:0;inset-inline:0;height:24px;background:url("brand/teeth.svg") repeat-x top center/40px 24px}
@media (min-width:768px){#footer{padding-top:76px}#footer::before{height:36px;background-size:60px 36px}}
.footer-inner{display:grid;gap:24px;max-width:var(--k-max);margin:0 auto}
.footer-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;border-radius:var(--k-r-pill)}
.footer-brand img{display:block;height:34px;width:auto}
.footer-brand .footer-symbol{width:56px;height:56px}
.footer-brand .brand-word-ar{display:none}
html[lang="ar"] .footer-brand .brand-word-en{display:none}
html[lang="ar"] .footer-brand .brand-word-ar{display:block}
.footer-note{margin-top:10px;color:var(--k-cloud);font:500 17px/1.5 var(--k-font-display)}
.footer-links{display:flex;flex-wrap:wrap;gap:4px 8px;align-content:start}
.footer-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--k-r-pill);color:var(--k-white);font:700 17px/1.2 var(--k-font-display);text-decoration:none}
.footer-links a:hover{background:var(--k-edge-plum)}
.footer-links a:focus-visible{outline-color:var(--k-white)}
.footer-status{display:none!important}
@media (min-width:900px){.footer-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);align-items:start}.footer-links{justify-content:flex-end}}

/* 8. Home */
.home-hero{display:grid;gap:18px;align-items:center;margin:6px 0 34px;padding:20px;border-radius:var(--k-r-card);background:var(--k-mint);box-shadow:0 var(--k-press) 0 var(--k-edge-mint)}
.home-hero h1{font-size:clamp(32px,5vw,48px);line-height:1.06;color:var(--k-plum)}
html[dir="rtl"] .home-hero h1{line-height:1.3}
.home-hero p{margin-top:10px;max-width:36ch;color:var(--k-ink);font:400 18px/1.5 var(--k-font-body)}
.home-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.home-hero-art{position:relative;margin:0;border-radius:20px;overflow:hidden;background:var(--k-white);aspect-ratio:3/2}
.home-hero-art img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:768px){.home-hero{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px;padding:32px}.home-hero p{font-size:19px}}
@media (min-width:1100px){.home-hero{padding:40px 40px 40px 44px;gap:40px}html[dir="rtl"] .home-hero{padding:40px 44px 40px 40px}}
.section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin:0 0 16px}
.section-head p{color:var(--k-mist);font-size:16px}
.library-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px 10px;margin:0 0 20px}
.filters{display:flex;flex-wrap:wrap;gap:12px 10px;margin:0}
.library-find{display:flex;align-items:center;gap:10px;flex:1 1 300px;min-width:0}
.library-search{position:relative;flex:1 1 auto;min-width:0}
.library-search .k-ico{position:absolute;top:50%;inset-inline-start:16px;width:22px;height:22px;margin-top:-11px;color:var(--k-mist)}
.library-search input{width:100%;height:46px;padding:0 48px;border:0;border-radius:var(--k-r-pill);background:var(--k-white);color:var(--k-ink);box-shadow:0 4px 0 var(--k-edge-card);font:400 17px/1 var(--k-font-body);-webkit-appearance:none;appearance:none}
.library-search input::placeholder{color:var(--k-mist);opacity:1}
.library-search input::-webkit-search-cancel-button{display:none}
.library-search #clear-search{position:absolute;top:50%;inset-inline-end:6px;width:36px;height:36px;margin-top:-18px;min-height:0;padding:0;border:0;border-radius:50%;background:var(--k-tint);color:var(--k-plum);box-shadow:none;display:grid;place-items:center}
.library-search #clear-search .k-ico{width:18px;height:18px}
@media (min-width:768px){.library-search input{height:52px}}
.favourites-controls{display:contents}
.favourites-controls p:empty{display:none}
#activity-favourites-filter{flex:none}
#activity-favourites-filter .k-ico{color:var(--k-lilac)}
#activity-favourites-filter[aria-pressed="true"] .k-ico{color:var(--k-star)}
#activity-favourites-count{min-width:1.4em;padding:0 6px;border-radius:var(--k-r-pill);background:var(--k-white);color:var(--k-plum);font-size:15px;line-height:1.5;text-align:center}
#activity-favourites-status{flex-basis:100%;color:var(--k-mist);font-size:15px}
.library-results{margin:-8px 0 14px;color:var(--k-mist);font:500 15px/1.4 var(--k-font-display)}
.library-results:empty{display:none}
.library{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px}
@media (min-width:700px){.library{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 20px}}
@media (min-width:1100px){.library{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 24px}}
.activity-entry{position:relative;min-width:0}
.activity-card{display:flex;flex-direction:column;width:100%;height:100%;min-height:0;margin:0;padding:8px 8px 12px;border:0;border-radius:24px;background:var(--k-white);color:inherit;box-shadow:0 var(--k-press) 0 var(--k-edge-card);text-align:start;text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s;-webkit-tap-highlight-color:transparent}
.activity-card:active{transform:translateY(var(--k-press));box-shadow:0 0 0 var(--k-edge-card)}
.card-art{position:relative;display:block;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:18px;background:var(--k-mint)}
.activity-entry:nth-child(4n+2) .card-art{background:var(--k-tint)}
.activity-entry:nth-child(4n+3) .card-art{background:var(--k-sea)}
.activity-entry:nth-child(4n+4) .card-art{background:var(--k-tint)}
.card-art>svg,.card-art>img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none}
.card-art>img{object-fit:cover}
.card-art>svg{padding:6px}
.card-art>svg[viewBox$=" 1024"],.card-art>svg[viewBox$=" 960"],.card-art>svg[viewBox$=" 810"]{padding:0}
.card-body{display:flex;flex-direction:column;gap:2px;padding:10px 6px 0}
.card-title{color:var(--k-plum);font:800 17px/1.2 var(--k-font-display)}
.card-meta{display:flex;flex-wrap:wrap;gap:0 8px;color:var(--k-mist);font:500 14px/1.35 var(--k-font-display)}
.card-caption{display:none}
html[dir="rtl"] .card-title{line-height:1.4}
@media (min-width:768px){.activity-card{padding:10px 10px 16px;border-radius:var(--k-r-card)}.card-art{border-radius:20px}.card-title{font-size:20px}.card-meta{font-size:15px}.card-body{padding:12px 8px 0}}
/* Favourite star on each card: white circle, Lilac star; Star Lemon when saved */
.favourite-button{display:grid;place-items:center;width:44px;height:44px;min-height:0;padding:0;border:0;border-radius:50%;background:var(--k-white);color:var(--k-lilac);box-shadow:0 4px 0 var(--k-edge-card);cursor:pointer}
.favourite-button svg,.favourite-button img{width:24px;height:24px}
.favourite-button svg path{fill:currentColor;stroke:none}
.favourite-button[aria-pressed="true"]{background:var(--k-star);color:var(--k-plum);box-shadow:0 4px 0 var(--k-edge-star)}
.activity-entry>.favourite-button{position:absolute;top:14px;inset-inline-end:14px;z-index:2}
@media (min-width:768px){.activity-entry>.favourite-button{top:18px;inset-inline-end:18px}}
.library-more{display:flex;justify-content:center;margin-top:28px}
/* Bands under the library */
.band,.picture-library-band{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px 18px;margin-top:28px;padding:18px;border-radius:var(--k-r-card);background:var(--k-white);box-shadow:0 var(--k-press) 0 var(--k-edge-card)}
.band>img,.band>svg{width:96px!important;height:96px!important;border-radius:20px!important;object-fit:cover;background:var(--k-tint)}
.band h2,.band h3,.picture-library-band h2{font-size:clamp(20px,2.4vw,26px)}
.band p,.picture-library-band p{margin-top:4px;color:var(--k-ink)}
.band>.k-btn,.band>button,.band>a{grid-column:1/-1;justify-self:start}
@media (min-width:768px){.band,.picture-library-band{grid-template-columns:auto minmax(0,1fr) auto;padding:22px 26px}.band>img,.band>svg{width:120px!important;height:120px!important}.band>.k-btn,.band>button,.band>a{grid-column:auto;justify-self:end}}

/* 9. Game frame (every game): one row of round icon buttons, the title, a one-line goal */
.game-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 12px;margin:2px 0 14px}
.game-top .toolbar{display:contents}
.game-top #back{grid-column:1;grid-row:1}
.game-top .tools{grid-column:3;grid-row:1;display:flex;gap:10px}
.game-top .game-head{display:contents}
.game-head .eyebrow{display:none}
.game-head h2,.game-head h1{grid-column:2;grid-row:1;min-width:0;text-align:center;font-size:clamp(20px,3vw,30px);line-height:1.15}
html[dir="rtl"] .game-head h2,html[dir="rtl"] .game-head h1{line-height:1.35}
.game-head p,.game-goal{grid-column:1/-1;grid-row:2;justify-self:center;max-width:44rem;margin:2px 0 0;color:var(--k-ink);font:500 17px/1.45 var(--k-font-display);text-align:center}
.game-head>:not(h1,h2,p,.eyebrow){grid-column:1/-1}
@media (min-width:768px){.game-top{gap:10px 16px;margin-bottom:18px}.game-head p{font-size:19px}}
.game-stage{position:relative;padding:14px;border-radius:var(--k-r-card);background:var(--k-white);box-shadow:0 var(--k-press) 0 var(--k-edge-card)}
@media (min-width:768px){.game-stage{padding:24px}}
.stage-prompt{margin:0 0 14px;color:var(--k-plum);font:800 clamp(20px,2.6vw,26px)/1.3 var(--k-font-display);text-align:center}
.stage-prompt:focus{outline:none}
html[dir="rtl"] .stage-prompt{line-height:1.55}
.parent-note{max-width:44rem;margin:18px auto 0;padding:8px 16px;border-radius:var(--k-r-pill);background:transparent;color:var(--k-mist);font:400 14px/1.5 var(--k-font-body);text-align:center}
/* Progress (kit): Lilac Tint track, Bright Mint fill, the Star Lemon goal star, and a count */
.k-progress{display:flex;align-items:center;gap:10px;max-width:560px;margin:0 auto 16px}
.k-progress-track{position:relative;flex:1 1 auto;height:20px;border-radius:var(--k-r-pill);background:var(--k-tint);overflow:hidden}
.k-progress-fill{position:absolute;inset-block:0;inset-inline-start:0;border-radius:var(--k-r-pill);background:var(--k-mint);transition:width .3s}
.k-progress-star{flex:none;width:30px;height:30px}
.k-progress-count{flex:none;min-width:3.2em;color:var(--k-plum);font:700 17px/1 var(--k-font-display);text-align:center}
/* Picture choices: big tiles, at least 64 px; the right one turns Bright Mint with a tick */
.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(132px,100%),1fr));gap:14px}
.picture-option,.number-option{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:96px;padding:12px;border:0;border-radius:24px;background:var(--k-tint);color:var(--k-plum);box-shadow:0 var(--k-press) 0 var(--k-edge-card);font:700 18px/1.2 var(--k-font-display);cursor:pointer;transition:transform .12s,box-shadow .12s}
.number-option{font-size:clamp(28px,5vw,40px);min-height:84px}
.picture-option svg{width:min(100%,128px);height:auto;aspect-ratio:1}
.picture-option .label{color:var(--k-plum)}
.picture-option:active,.number-option:active{transform:translateY(var(--k-press));box-shadow:0 0 0 var(--k-edge-card)}
.picture-option.selected,.number-option.selected,.picture-option.matched{background:var(--k-mint);box-shadow:0 var(--k-press) 0 var(--k-edge-mint)}
.picture-option.selected::after,.number-option.selected::after{content:"";position:absolute;top:-10px;inset-inline-end:-8px;width:40px;height:40px;background:url("brand/feedback-tick.svg") center/contain no-repeat;animation:k-pop .22s ease-out both}
.target-art{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:0 auto 16px}
.target-art svg{width:clamp(56px,14vw,96px);height:auto}
/* Feedback: instant tick or star, a gentle "have another look", never red */
.stage-feedback{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;min-height:52px;margin-top:16px;color:var(--k-plum);font:700 19px/1.3 var(--k-font-display);text-align:center}
.stage-feedback:empty{min-height:0;margin:0}
.k-feedback-star,.k-feedback-tick{flex:none;width:48px;height:48px;animation:k-pop .22s ease-out both}
.stage-feedback.is-try{color:var(--k-mist)}
@keyframes k-pop{0%{transform:scale(.8)}70%{transform:scale(1.05)}100%{transform:scale(1)}}
/* The end screen: stars, Replay and Next, never a dead end */
.end-panel{display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px 8px 12px;text-align:center}
.end-stars{display:flex;align-items:flex-end;justify-content:center;gap:8px}
.end-stars svg{width:64px;height:auto;animation:k-pop .22s ease-out both}
.end-stars svg:nth-child(2){width:84px;animation-delay:.12s}
.end-stars svg:nth-child(3){animation-delay:.24s}
.end-panel h2{font-size:clamp(26px,4vw,36px)}
.end-panel p{max-width:34rem;color:var(--k-ink)}
.end-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:6px}
.end-panel>img.site-painted-art{display:none}
/* Pause dialog */
dialog#pause-dialog{width:min(420px,calc(100vw - 32px));max-width:none;padding:26px 22px 24px;border:0;border-radius:var(--k-r-card);background:var(--k-white);color:var(--k-ink);box-shadow:0 6px 0 var(--k-edge-card);text-align:center}
dialog#pause-dialog::backdrop{background:rgba(42,34,51,.5)}
#pause-dialog h2{font-size:28px}
#pause-dialog p{margin:8px 0 18px}
#pause-dialog .site-painted-art{display:none}
#pause-dialog .dialog-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

/* 10. Pages (kept consistent until each page gets its own pass) */
.page-hero,.print-heading{display:grid;gap:18px;align-items:center;margin:6px 0 30px}
.page-hero h1,.print-heading h1{font-size:clamp(30px,4.6vw,44px);line-height:1.1}
.page-intro,.print-heading>p:not(.eyebrow){margin-top:10px;max-width:40rem;color:var(--k-ink);font-size:18px}
.page-hero-art{border-radius:var(--k-r-card);overflow:hidden}
.page-hero-art img{display:block;width:100%;height:auto;border-radius:var(--k-r-card)}
@media (min-width:768px){.page-hero{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px}}
.eyebrow{margin:0 0 8px;color:var(--k-teal);font:800 15px/1.3 var(--k-font-display);letter-spacing:.04em;text-transform:uppercase}
html[dir="rtl"] .eyebrow,html[lang="hi"] .eyebrow,html[lang="ur"] .eyebrow{letter-spacing:0;text-transform:none}
.resource,.book-resource,.guide-card,.value-grid article,.privacy-section,.saved-play,.family-faq details,.print-family-note,.guide-next,.reading-page,.source-reading{border:0!important;border-radius:var(--k-r-card)!important;background:var(--k-white)!important;box-shadow:0 var(--k-press) 0 var(--k-edge-card)!important}
.text-link,.back-link{color:var(--k-plum);font:700 17px/1.3 var(--k-font-display);text-decoration:underline;text-decoration-color:var(--k-lilac);text-decoration-thickness:2px;text-underline-offset:4px}
.global-language-status{margin:0 0 18px;padding:14px 18px;border-radius:var(--k-r-card);background:var(--k-tint);color:var(--k-ink)}

/* 11. Print */
@media print{.site-header,#footer,.game-top,.library-tools,.library-more,.band{display:none!important}main{padding:0}.game-stage{box-shadow:none}}

/* 12. The privacy page (privacy.html, kalama.io/privacy): English or Arabic, one at a time */
.policy-switch{flex:0 0 auto}
.policy-switch a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:92px;padding:4px 16px;border-radius:var(--k-r-pill);color:var(--k-plum);font:700 17px/1.1 var(--k-font-display);text-decoration:none}
.policy-switch a[aria-current="true"]{background:var(--k-plum);color:var(--k-white)}
.policy#ar{display:none}
body:has(#ar:target) .policy#en{display:none}
.policy#ar:target{display:block}
body:not(:has(#ar:target)) .policy-switch a[data-lang="en"]:not([aria-current]),body:has(#ar:target) .policy-switch a[data-lang="ar"]:not([aria-current]){background:var(--k-plum);color:var(--k-white)}
html[data-policy="ar"] .policy#ar{display:block}
html[data-policy="ar"] .policy#en{display:none}
html[data-policy="en"] .policy#en{display:block}
html[data-policy="en"] .policy#ar{display:none}
.policy{max-width:46rem;margin:0 auto;padding:4px 0 8px}
.policy h1{font-size:clamp(34px,5vw,46px)}
.policy .policy-lead{margin:8px 0 6px;color:var(--k-plum);font:700 clamp(19px,2.4vw,22px)/1.45 var(--k-font-display)}
.policy h2{margin:34px 0 10px;font-size:clamp(22px,3vw,28px)}
.policy p{margin:0 0 14px;line-height:1.7}
.policy[dir="rtl"] p,.policy[dir="rtl"] li{line-height:1.85}
.policy ul{margin:0 0 16px;padding-inline-start:1.3em}
.policy li{margin:0 0 8px;line-height:1.65}
.policy strong{color:var(--k-plum);font-family:var(--k-font-display);font-weight:700}
.policy-clear{margin:36px 0 8px}
.policy-clear h2{margin:0 0 8px}
.policy-actions{display:flex;flex-wrap:wrap;gap:12px}
.policy-confirm>p{margin-bottom:12px}
.policy-status{margin:14px 0 0;color:var(--k-plum);font:700 17px/1.4 var(--k-font-display)}
.policy-status:empty{display:none}
.policy-home{margin-top:30px}
@media (max-width:519.98px){.policy-switch a{min-width:0;padding:4px 14px;font-size:16px}}
@media (max-width:419.98px){.policy-page .brand-word{display:none}}
.picture-library-band>div:first-child{display:grid;place-items:center;width:96px;height:96px;border-radius:20px;background:var(--k-tint)}
.picture-library-band>div:first-child svg{width:76px;height:76px}
.picture-library-band>a{grid-column:1/-1;justify-self:start}
@media (min-width:768px){.picture-library-band>div:first-child{width:120px;height:120px}.picture-library-band>div:first-child svg{width:96px;height:96px}.picture-library-band>a{grid-column:auto;justify-self:end}}
@media (max-width:519.98px){#activity-favourites-filter{padding:4px 14px}#activity-favourites-filter .fav-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
#main-nav .k-switch button{min-height:44px;border-radius:var(--k-r-pill);box-shadow:none}
#main-nav .k-switch button:hover{background:var(--k-white)}
#main-nav .k-switch button[aria-pressed="true"]{background:var(--k-plum);color:var(--k-white);box-shadow:none}
/* Listening panels show only when an approved recording can play (none are approved yet) */
.ordinary-audio-choices:not(:has(.website-audio)),[data-ordinary-audio-ui]:empty{display:none!important}