/* Kalama brand, phase 1 (2026-10-24): fonts, colours and logo on every page and game.
   Source of truth: assets/design/redesign_2026-10-23/brand/final/BRAND.md and STYLE.md (approved, frozen).
   Loaded after every other stylesheet. Flat fills only: no outlines, gradients or blur shadows;
   depth comes from a solid press edge. */
@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}
@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}

:root{
 /* Brand palette (BRAND.md) */
 --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-lemon:#FFD84D;--k-white:#FFFFFF;
 /* Press edges (STYLE.md) */
 --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-radius-pill:999px;--k-radius-card:28px;--k-radius-callout:40px;--k-radius-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;
 /* Astra's design tokens, mapped onto the brand so every older stylesheet follows it */
 --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-lemon);--blue:var(--k-tint);--purple:var(--k-tint);
 --border:var(--k-edge-card);--shadow:0 6px 0 var(--k-edge-card);
 font-family:var(--k-font-body)!important;background:var(--k-cloud)!important;color:var(--k-ink)!important;
}

/* Type */
html,body{background:var(--k-cloud)!important;color:var(--k-ink)!important}
body,p,li,dd,td,th,input,textarea,.page-intro,.card-caption{font-family:var(--k-font-body)!important}
h1,h2,h3,h4,h5,.eyebrow,.card-title,summary,label,legend,button,select,.button,.text-link,.download-link,.back-link,
nav,#main-nav button,.brand,.site-header,.footer-links a{font-family:var(--k-font-display)!important}
h1,h2,h3{color:var(--k-plum)!important;font-weight:800!important;letter-spacing:0!important}
h4,h5{color:var(--k-plum)!important;font-weight:700!important}
h1{line-height:1.08!important}
.eyebrow{color:var(--k-teal)!important;font-weight:700!important;letter-spacing:.04em!important}
a{color:var(--k-plum)}
p,li{color:var(--k-ink)}
.page-intro,.card-caption,.parent-note,small{color:var(--k-mist)!important}

/* Header: the logo, capsule navigation, the language chip */
.site-header{background:var(--k-cloud)!important;border:0!important;box-shadow:none!important}
.site-header .brand{display:inline-flex;align-items:center;gap:0;text-decoration:none}
.site-header .brand-logo{display:block;height:44px;width:auto}
.site-header .brand-mark{display:none!important}
#brand-name{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
#main-nav button{border:0!important;border-radius:var(--k-radius-pill)!important;background:transparent!important;color:var(--k-plum)!important;font-weight:700!important;box-shadow:none!important;padding:.5em 1em!important}
#main-nav button:hover{background:var(--k-tint)!important}
#main-nav button[aria-current="page"]{background:var(--k-plum)!important;color:var(--k-white)!important;box-shadow:0 4px 0 var(--k-edge-plum)!important}
select.language,#language{border:0!important;border-radius:var(--k-radius-pill)!important;background-color:var(--k-sea)!important;color:var(--k-plum)!important;font-weight:700!important;min-height:44px;padding-inline:1em 2.2em!important;box-shadow:0 4px 0 var(--k-edge-mint)!important}
.menu-toggle{border:0!important;border-radius:var(--k-radius-pill)!important;background:var(--k-tint)!important;color:var(--k-plum)!important;box-shadow:0 4px 0 var(--k-edge-card)!important}

/* Kit buttons (STYLE.md section 6). brand.js gives every in-page button its kit class. */
.k-btn,.primary,#start,.te-primary,.download-link,a.primary,#pause-dialog button{display:inline-flex!important;align-items:center;justify-content:center;gap:10px;min-height:64px;padding:0 28px!important;border:0!important;border-radius:var(--k-radius-pill)!important;background:var(--k-sea)!important;color:var(--k-plum)!important;box-shadow:0 6px 0 var(--k-edge-mint)!important;font:700 26px/1.1 var(--k-font-display)!important;letter-spacing:0!important;text-decoration:none!important;cursor:pointer;transition:transform .12s,box-shadow .12s}
.k-btn:active,#pause-dialog button:active{transform:translateY(6px);box-shadow:0 0 0 var(--k-edge-mint)!important}
.k-btn.k-primary,.k-btn[aria-pressed="true"],.k-btn[aria-checked="true"],.primary,#start,.te-primary,.download-link,a.primary,#pause-dialog #resume{background:var(--k-plum)!important;color:var(--k-white)!important;box-shadow:0 6px 0 var(--k-edge-plum)!important}
.k-btn.k-primary:active,.k-btn[aria-pressed="true"]:active,.primary:active,#start:active,.download-link:active{transform:translateY(6px);box-shadow:0 0 0 var(--k-edge-plum)!important}
.k-btn.k-lilac:not([aria-pressed="true"]){background:var(--k-lilac)!important;color:var(--k-ink)!important;box-shadow:0 6px 0 var(--k-edge-lilac)!important}
.k-btn.k-lilac:active{box-shadow:0 0 0 var(--k-edge-lilac)!important}
.k-btn:disabled,.k-btn[aria-disabled="true"]{opacity:.45;cursor:default;transform:none}
.k-btn > *{color:inherit!important;font:inherit!important}
.k-btn.k-packed .k-detail{display:none!important}
.k-choice-note{text-align:start!important;flex-basis:100%;margin:.6em 0 0!important;font:400 17px/1.5 var(--k-font-body)!important;color:var(--k-mist)!important}
/* Kit icons as masks, so they take the label colour; direction icons mirror in Arabic. */
.k-icon::before{content:"";flex:0 0 auto;width:28px;height:28px;background:currentColor;-webkit-mask:var(--k-i) center/contain no-repeat;mask:var(--k-i) center/contain no-repeat}
.k-icon-back{--k-i:url("brand/icons/back.svg")}.k-icon-next{--k-i:url("brand/icons/next.svg")}.k-icon-pause{--k-i:url("brand/icons/pause.svg")}
.k-icon-close{--k-i:url("brand/icons/close.svg")}.k-icon-download{--k-i:url("brand/icons/download.svg")}.k-icon-search{--k-i:url("brand/icons/search.svg")}
.k-icon-settings{--k-i:url("brand/icons/settings.svg")}.k-icon-restart{--k-i:url("brand/icons/restart.svg")}.k-icon-play{--k-i:url("brand/icons/play.svg")}
[dir="rtl"] .k-icon-back::before,[dir="rtl"] .k-icon-next::before{transform:scaleX(-1)}
/* Picture buttons are kit cards; the chosen one turns Lilac Tint with the plum edge. */
.k-tile{border:0!important;border-radius:var(--k-radius-card)!important;background:var(--k-white)!important;box-shadow:0 6px 0 var(--k-edge-card)!important;font-family:var(--k-font-display)!important;color:var(--k-plum)!important;transition:transform .12s,box-shadow .12s}
.k-tile:active{transform:translateY(6px);box-shadow:0 0 0 var(--k-edge-card)!important}
.k-tile[aria-pressed="true"],.k-tile[aria-checked="true"],.k-tile.is-selected,.k-tile.selected{background:var(--k-tint)!important;box-shadow:0 6px 0 var(--k-edge-plum)!important}
/* Rows of kit buttons wrap with even gaps */
.te-levels,.toolbar,fieldset:has(> .k-btn){display:flex!important;flex-wrap:wrap;gap:14px!important;align-items:center;border:0!important;padding:0!important;margin-inline:0!important}
.te-levels > legend,fieldset:has(> .k-btn) > legend{flex-basis:100%;margin-bottom:6px;font:700 20px/1.2 var(--k-font-display)!important;color:var(--k-plum)!important;padding:0!important}
@media (max-width:640px){
 .k-btn,.primary,#start,.te-primary,.download-link,#pause-dialog button{min-height:52px;padding:0 20px!important;font-size:21px!important}
 .k-icon::before{width:24px;height:24px}
}
.text-link,.back-link{color:var(--k-plum)!important;font-weight:700!important;text-decoration-color:var(--k-lilac)!important}
button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--k-lilac)!important;outline-offset:3px}

/* Cards and panels: white, 28 px corners, the lilac card edge */
.activity-card,.resource,.book-resource,.guide-card,.value-grid article,.privacy-section,.saved-play,.family-faq details,
.band,.picture-library-band,.offline-teaser,.print-family-note,.guide-next,.reading-page,.game-stage,#stage{background:var(--k-white)!important;border:0!important;border-radius:var(--k-radius-card)!important;box-shadow:0 6px 0 var(--k-edge-card)!important}
.activity-card .card-art,.card-art{background:var(--k-tint)!important;border-radius:26px!important}
.activity-card .card-title{color:var(--k-plum)!important;font-weight:800!important}
.favourite-button{background:var(--k-white)!important;border:0!important;border-radius:var(--k-radius-pill)!important;box-shadow:0 4px 0 var(--k-edge-card)!important;color:var(--k-plum)!important}
.favourite-button[aria-pressed="true"]{background:var(--k-lemon)!important;box-shadow:0 4px 0 var(--k-edge-star)!important}

/* Page heroes and bands */
.hero,.page-hero{background:transparent!important}
.hero img,.page-hero-art img,.page-hero-art{border-radius:var(--k-radius-card)!important}
.band,.picture-library-band{background:var(--k-tint)!important}

/* Inputs */
input[type="search"],input[type="text"],textarea{border:0!important;border-radius:var(--k-radius-pill)!important;background:var(--k-white)!important;box-shadow:0 4px 0 var(--k-edge-card)!important;color:var(--k-ink)!important}
textarea{border-radius:var(--k-radius-sm)!important}
main select{border:0!important;border-radius:var(--k-radius-sm)!important;background-color:var(--k-white)!important;color:var(--k-plum)!important;box-shadow:0 4px 0 var(--k-edge-card)!important;min-height:44px;font-weight:700!important}

/* Games: head, toolbar and stage */
.game-head h1,.game-head h2{color:var(--k-plum)!important}
.toolbar{background:transparent!important;border:0!important}
.parent-note{background:var(--k-tint)!important;border-radius:var(--k-radius-card)!important;padding:.9em 1.1em!important}
details{border-color:var(--k-edge-card)!important}

/* Footer */
#footer{background:var(--k-plum)!important;color:var(--k-white)!important}
#footer *{color:var(--k-white)!important}
#footer .footer-brand{font-family:var(--k-font-display)!important;font-weight:800!important;font-size:1.6rem}
#footer a{text-decoration-color:var(--k-pink)!important}
#pause-dialog{border:0!important;border-radius:var(--k-radius-card)!important;box-shadow:0 6px 0 var(--k-edge-card)!important;background:var(--k-white)!important}

@media (max-width:640px){
 .site-header .brand-logo{height:36px}
 .primary,#start,.te-primary{min-height:52px}
}
#main-nav.is-open{background:var(--k-white)!important;border:0!important;border-radius:var(--k-radius-card)!important;box-shadow:0 6px 0 var(--k-edge-card)!important}
/* Chips: filters and small toggles use the kit chip size (48 high, 4 px edge) */
#activities button[data-filter].k-btn,#activity-favourites-filter.k-btn,#clear-search.k-btn{min-height:48px;padding:0 20px!important;font-size:20px!important;box-shadow:0 4px 0 var(--k-edge-mint)!important}
#activities button[data-filter].k-btn[aria-pressed="true"]{box-shadow:0 4px 0 var(--k-edge-plum)!important}

/* Rows that hold only buttons sit side by side and wrap only when they must */
main :has(> .k-btn + .k-btn):not(:has(> :not(button,legend))):not(.toolbar):not(.toolbar *){display:flex!important;flex-wrap:wrap!important;gap:12px!important;align-items:center}
main .k-btn:not(.k-bar){width:auto!important;max-width:100%}
/* Game top bar: back at the start, restart and pause at the end */
.toolbar{flex-wrap:nowrap!important;justify-content:flex-start!important}
.toolbar .k-icon-back{margin-inline-end:auto!important}
@media (max-width:640px){
 .k-btn,.primary,#start,.te-primary,.download-link,#pause-dialog button{min-height:46px!important;padding:0 18px!important;font-size:17px!important;font-weight:700!important;box-shadow:0 4px 0 var(--k-edge-mint)!important}
 .k-btn.k-primary,.k-btn[aria-pressed="true"],.k-btn[aria-checked="true"],.primary,#start,.te-primary,.download-link,#pause-dialog #resume{box-shadow:0 4px 0 var(--k-edge-plum)!important}
 .k-btn.k-lilac:not([aria-pressed="true"]){box-shadow:0 4px 0 var(--k-edge-lilac)!important}
 .k-btn:active,.primary:active,#start:active{transform:translateY(4px)!important;box-shadow:none!important}
 .k-icon::before{width:22px;height:22px}
 main :has(> .k-btn + .k-btn):not(:has(> :not(button,legend))):not(.toolbar):not(.toolbar *){gap:10px!important}
 #activities button[data-filter].k-btn,#activity-favourites-filter.k-btn,#clear-search.k-btn{min-height:38px!important;padding:0 16px!important;font-size:16px!important}
 /* The top bar: one compact row of kit round icon buttons */
 .toolbar{gap:10px!important;margin:2px 0 6px!important;padding:0!important}
 .toolbar .k-btn{width:44px!important;height:44px!important;min-height:44px!important;padding:0!important;border-radius:50%!important;background:var(--k-lilac)!important;color:var(--k-white)!important;box-shadow:0 4px 0 var(--k-edge-lilac)!important}
 .toolbar .k-btn .k-label{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
 .toolbar .k-btn::before{width:22px!important;height:22px!important}
 /* Tighter spacing so the title and the game show in the first screen */
 main{padding-top:4px!important}
 .game-head{margin:2px 0 8px!important;padding:0!important}
 .game-head .eyebrow{margin:0!important}
 .game-head h1,.game-head h2{font-size:28px!important;margin:2px 0 4px!important}
 .game-head p{margin:2px 0!important;font-size:15px!important;line-height:1.45!important}
 .game-stage,#stage{padding:14px!important;margin-top:8px!important}
 .site-header{padding-block:8px!important}
 .site-header .brand-logo{height:34px}
}
main :has(> .k-btn + .k-btn):not(:has(> :not(button,legend))):not(.toolbar):not(.toolbar *){flex-direction:row!important}
main :has(> .k-btn + .k-btn):not(:has(> :not(button,legend))):not(.toolbar):not(.toolbar *) > .k-btn{flex:0 1 auto!important;width:auto!important;min-width:0!important}

@media (max-width:640px){
 main .toolbar .k-btn.k-bar{flex:0 0 44px!important;width:44px!important;min-width:44px!important;max-width:44px!important}
 main .toolbar > *:not(button){display:flex!important;gap:10px!important;align-items:center}
 /* Choice rows (modes, levels): the kit chip size, so two sit side by side */
 main :has(> .k-btn[aria-pressed] + .k-btn[aria-pressed]):not(.toolbar) > .k-btn{min-height:40px!important;font-size:16px!important;padding:0 14px!important}
}
/* Never wider than the screen: no sideways scroll, flex children may shrink, long words wrap */
html,body{max-width:100%;overflow-x:clip!important}
main,#main,main > *,section,article,aside,.reading-page,.page-hero,.hero,.game-stage{max-width:100%;min-width:0}
main :where(div,section,article,aside,p,ul,ol,li,fieldset,form,figure,figcaption,header,footer,nav){min-width:0}
h1,h2,h3,h4,p,li,a,button,label,summary{overflow-wrap:anywhere}
img,svg,video,canvas{max-width:100%}

/* Logo: the symbol and ONE wordmark, English on every language, Arabic only when the site is in Arabic */
.site-header .brand-logo{display:none!important}
.site-header .brand{display:inline-flex!important;align-items:center;gap:10px}
.brand-symbol{display:block;width:60px;height:60px}
.brand-word{display:block;height:40px;width:auto}
.brand-word-ar{display:none!important}
html[lang="ar"] .brand-word-en{display:none!important}
html[lang="ar"] .brand-word-ar{display:block!important}
#footer .footer-brand{display:inline-block;font-size:0!important;line-height:0;width:240px;height:60px;background:url("brand/symbol.svg") left center/60px 60px no-repeat,url("brand/wordmark-en-dark.svg") 72px center/auto 40px no-repeat}
html[lang="ar"] #footer .footer-brand{width:180px;background:url("brand/symbol.svg") right center/60px 60px no-repeat,url("brand/wordmark-ar-dark.svg") right 72px center/auto 40px no-repeat}
@media (max-width:640px){
 .brand-symbol{width:46px;height:46px}
 .brand-word{height:31px}
 .site-header .brand{gap:8px}
 #footer .footer-brand{width:190px;height:46px;background-size:46px 46px,auto 31px;background-position:left center,56px center}
 html[lang="ar"] #footer .footer-brand{width:140px;background-size:46px 46px,auto 31px;background-position:right center,right 56px center}
 /* A 16 px side gutter on every page */
 main,#main{padding-inline:16px!important;box-sizing:border-box}
 .site-header,#footer{padding-inline:16px!important}
 main > *,.reading-page,.page-hero,.hero{margin-inline:0!important}
}
@media (min-width:641px) and (max-width:960px){
 .brand-symbol{width:52px;height:52px}
 .brand-word{height:34px}
 #main-nav button{padding:.45em .7em!important;font-size:16px!important}
}
@media (max-width:640px){
 .brand-symbol{width:44px!important;height:44px!important}
 .brand-word{height:28px!important}
 .site-header{gap:8px!important;flex-wrap:nowrap!important}
 select.language,#language{padding-inline:.7em 1.7em!important;min-height:40px;font-size:15px!important;max-width:118px}
 .menu-toggle{flex:0 0 auto}
}
@media (max-width:640px){ .reading-page,.privacy-section,.saved-play,.guide-card,.value-grid article{padding:20px 16px!important} }
/* Tablet widths: one-row header, compact round icon top bar, labels never wrap inside buttons */
.k-btn,.toolbar .k-btn{white-space:nowrap}
@media (min-width:641px) and (max-width:960px){
 .site-header{gap:8px!important;flex-wrap:nowrap!important}
 #main-nav{gap:2px!important}
 #main-nav button{padding:.4em .55em!important;font-size:15px!important}
 select.language,#language{max-width:132px;font-size:15px!important;padding-inline:.7em 1.7em!important}
 .toolbar{gap:12px!important}
 .toolbar .k-btn{width:52px!important;height:52px!important;min-height:52px!important;min-width:52px!important;max-width:52px!important;padding:0!important;border-radius:50%!important;background:var(--k-lilac)!important;color:var(--k-white)!important;box-shadow:0 5px 0 var(--k-edge-lilac)!important;flex:0 0 52px!important}
 .toolbar .k-btn .k-label{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
 .toolbar .k-btn::before{width:26px!important;height:26px!important}
 .toolbar > *:not(button){display:flex!important;gap:12px!important;align-items:center}
}