/* Kalama kit inside the games and tool pages, until each game gets its own pass (Phase 2, step 3).
   brand.js gives each in-game button a kit class (k-btn, k-tile); the #main prefix lets these rules
   win over the older game stylesheets without !important. Colours, radii, edges: STYLE.md. */
#main [data-k="btn"],#main .primary,#main .te-primary,#main a.download-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--k-btn-h);max-width:100%;width:auto;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-decoration:none;text-transform:none;cursor:pointer;transition:transform .12s,box-shadow .12s}
#main [data-k="btn"]:active:not(:disabled){transform:translateY(var(--k-press));box-shadow:0 0 0 var(--k-edge-mint)}
#main [data-k="btn"].k-primary,#main [data-k="btn"][aria-pressed="true"],#main [data-k="btn"][aria-checked="true"],#main .primary,#main .te-primary,#main a.download-link{background:var(--k-plum);color:var(--k-white);box-shadow:0 var(--k-press) 0 var(--k-edge-plum)}
#main [data-k="btn"].k-primary:active:not(:disabled),#main [data-k="btn"][aria-pressed="true"]:active,#main .primary:active:not(:disabled),#main a.download-link:active{transform:translateY(var(--k-press));box-shadow:0 0 0 var(--k-edge-plum)}
#main [data-k="btn"].k-lilac:not([aria-pressed="true"]){background:var(--k-lilac);color:var(--k-ink);box-shadow:0 var(--k-press) 0 var(--k-edge-lilac)}
#main [data-k="btn"].k-lilac:active:not(:disabled){box-shadow:0 0 0 var(--k-edge-lilac)}
#main [data-k="btn"]:disabled,#main [data-k="btn"][aria-disabled="true"],#main .primary:disabled{opacity:.45;cursor:default;transform:none}
#main [data-k="btn"]>*{color:inherit;font:inherit}
#main [data-k="btn"].k-packed .k-detail{display:none}
#main .k-choice-note{flex-basis:100%;margin:.6em 0 0;color:var(--k-mist);font:400 17px/1.5 var(--k-font-body);text-align:start}
/* Kit icons as masks, so they take the label colour; direction icons mirror in Arabic */
#main .k-icon::before{content:"";flex:0 0 auto;width:var(--k-icon);height:var(--k-icon);background:currentColor;-webkit-mask:var(--k-i) center/contain no-repeat;mask:var(--k-i) center/contain no-repeat}
#main .k-icon-back{--k-i:url("brand/icons/back.svg")}#main .k-icon-next{--k-i:url("brand/icons/next.svg")}#main .k-icon-pause{--k-i:url("brand/icons/pause.svg")}
#main .k-icon-close{--k-i:url("brand/icons/close.svg")}#main .k-icon-download{--k-i:url("brand/icons/download.svg")}#main .k-icon-search{--k-i:url("brand/icons/search.svg")}
#main .k-icon-settings{--k-i:url("brand/icons/settings.svg")}#main .k-icon-restart{--k-i:url("brand/icons/restart.svg")}#main .k-icon-play{--k-i:url("brand/icons/play.svg")}
[dir="rtl"] #main .k-icon-back::before,[dir="rtl"] #main .k-icon-next::before{transform:scaleX(-1)}
/* Picture buttons are kit tiles; the chosen one turns Lilac Tint with the plum edge */
#main [data-k="tile"]{border:0;border-radius:var(--k-r-card);background:var(--k-white);color:var(--k-plum);box-shadow:0 var(--k-press) 0 var(--k-edge-card);font-family:var(--k-font-display);transition:transform .12s,box-shadow .12s}
#main [data-k="tile"]:active:not(:disabled){transform:translateY(var(--k-press));box-shadow:0 0 0 var(--k-edge-card)}
#main [data-k="tile"][aria-pressed="true"],#main [data-k="tile"][aria-checked="true"],#main [data-k="tile"].is-selected,#main [data-k="tile"].selected{background:var(--k-tint);box-shadow:0 var(--k-press) 0 var(--k-edge-plum)}
/* Rows of kit buttons wrap with even gaps and sit side by side */
#main .te-levels,#main fieldset:has(> .k-btn){display:flex;flex-wrap:wrap;gap:12px;align-items:center;border:0;padding:0;margin-inline:0}
#main .te-levels>legend,#main fieldset:has(> .k-btn)>legend{flex-basis:100%;margin-bottom:6px;padding:0;color:var(--k-plum);font:700 20px/1.2 var(--k-font-display)}
#main :has(> .k-btn + .k-btn):not(:has(> :not(button,legend))){display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;align-items:center}
#main :has(> .k-btn + .k-btn):not(:has(> :not(button,legend)))>.k-btn{flex:0 1 auto;width:auto;min-width:0}
@media (max-width:640px){
 #main :has(> .k-btn[aria-pressed] + .k-btn[aria-pressed])>.k-btn{min-height:40px;padding:4px 14px;font-size:16px}
}
/* Cards and panels inside the games and tool pages */
#main .te-panel,#main .saved-play,#main .favourites-empty{border-radius:var(--k-r-card)}

/* ---- Thinking games (picture, memory, sort, count, pattern, function, yesno, three, four) ---- */
#main .thinking-expansion{max-width:760px;margin:0 auto}
#main .thinking-expansion .te-progress{display:flex;align-items:center;gap:10px;max-width:520px;margin:0 auto 14px;font:700 17px/1 var(--k-font-display);color:var(--k-plum);flex-wrap:nowrap}
#main .thinking-expansion .te-progress>span{order:2;flex:none;font-size:0}
#main .thinking-expansion .te-progress>span bdi{font-size:17px}
#main .thinking-expansion .te-progress progress{order:1;flex:1 1 auto;width:auto;height:20px;border:0;border-radius:var(--k-r-pill);background:var(--k-tint);overflow:hidden;-webkit-appearance:none;appearance:none}
#main .thinking-expansion .te-progress progress::-webkit-progress-bar{background:var(--k-tint);border-radius:var(--k-r-pill)}
#main .thinking-expansion .te-progress progress::-webkit-progress-value{background:var(--k-mint);border-radius:var(--k-r-pill)}
#main .thinking-expansion .te-progress progress::-moz-progress-bar{background:var(--k-mint);border-radius:var(--k-r-pill)}
#main .thinking-expansion .te-heading{margin:4px 0 10px;color:var(--k-plum);font:800 clamp(20px,2.8vw,26px)/1.3 var(--k-font-display);text-align:center}
#main .thinking-expansion .te-target{padding:4px;font-size:clamp(28px,6vw,40px);color:var(--k-plum);font-family:var(--k-font-display)}
#main .thinking-expansion .te-target strong{font-weight:800}
#main .thinking-expansion .te-target .te-art{width:clamp(130px,34vw,190px);height:auto;max-width:none;max-height:none}
#main .thinking-expansion>p:not(.te-feedback){max-width:34rem;margin:0 auto 8px;color:var(--k-mist);font:400 15px/1.5 var(--k-font-body);text-align:center}
#main .thinking-expansion:not(:has(.te-levels)) .te-depth-select{display:none}
#main .thinking-expansion .te-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));gap:14px;max-width:720px;margin:14px auto}
#main .thinking-expansion .te-picture{width:auto;min-height:0;padding:10px 10px 8px;gap:4px;border-radius:24px;background:var(--k-tint);box-shadow:0 var(--k-press) 0 var(--k-edge-card)}
#main .thinking-expansion .te-picture .te-art,#main .thinking-expansion .te-picture>svg{width:86%;height:auto;max-width:none;max-height:none;aspect-ratio:1;object-fit:contain}
#main .thinking-expansion .te-picture span{color:var(--k-plum);font:700 16px/1.2 var(--k-font-display)}
#main .thinking-expansion .te-answer.k-btn,#main .thinking-expansion .te-answer[data-k="btn"]{min-height:84px;border-radius:24px;padding:8px}
#main .thinking-expansion .te-answer b{font:800 clamp(32px,7vw,44px)/1 var(--k-font-display)}
#main .thinking-expansion .is-correct,#main .thinking-expansion .is-matched{background:var(--k-mint)!important;box-shadow:0 var(--k-press) 0 var(--k-edge-mint)!important;position:relative}
#main .thinking-expansion .te-picture.is-correct::after,#main .thinking-expansion .te-answer.is-correct::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}
#main .thinking-expansion .is-hinted{box-shadow:0 0 0 4px var(--k-lilac),0 var(--k-press) 0 var(--k-edge-card)!important}
#main .thinking-expansion .te-count-tray{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:12px;max-width:640px;margin:14px auto;padding:14px;border:0;border-radius:var(--k-r-card);background:var(--k-tint);box-shadow:none}
#main .thinking-expansion .te-count-item{width:auto;height:auto;aspect-ratio:1;padding:6px;border:0;border-radius:20px;background:var(--k-white);box-shadow:0 4px 0 var(--k-edge-card)}
#main .thinking-expansion .te-count-item .te-art{width:100%;height:100%;max-height:none;object-fit:contain}
#main .thinking-expansion .te-count-item.is-marked{border:0;background:var(--k-mint);box-shadow:0 4px 0 var(--k-edge-mint)}
#main .thinking-expansion .te-count-item.is-marked::after{content:"";top:-8px;inset-inline-end:-8px;width:28px;height:28px;border-radius:0;background:url("brand/feedback-tick.svg") center/contain no-repeat}
#main .thinking-expansion .te-hint{border:0;border-radius:var(--k-r-callout);background:var(--k-tint);color:var(--k-ink);padding:14px 20px;text-align:center}
#main .thinking-expansion .te-feedback{min-height:28px;margin:12px 0;color:var(--k-plum);font:700 19px/1.3 var(--k-font-display);text-align:center}
#main .thinking-expansion .te-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:16px auto 4px}
#main .thinking-expansion .te-controls button{flex:0 1 auto}
#main .thinking-expansion .te-completion{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 4px;text-align:center}
#main .thinking-expansion .te-completion .te-heading{font-size:clamp(26px,4vw,34px)}
#main .thinking-expansion .te-completion p{color:var(--k-ink)}
#main .thinking-expansion .te-completion p+p{color:var(--k-mist);font-size:15px}
#main .thinking-expansion .te-choices{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(120px,100%),1fr))!important}
#main .thinking-expansion .te-choices:has(.te-picture){grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr))!important}
#main .thinking-expansion .te-memory{gap:12px;max-width:640px}
#main .thinking-expansion .te-memory-card{aspect-ratio:1;min-height:64px;padding:6px;border:0!important;border-radius:20px;background:var(--k-white);box-shadow:0 4px 0 var(--k-edge-card);color:var(--k-plum);font-family:var(--k-font-display);font-weight:700}
#main .thinking-expansion .te-memory .te-memory-card:not([aria-pressed="true"]){background:var(--k-lilac)!important;box-shadow:0 4px 0 var(--k-edge-lilac)}
#main .thinking-expansion .te-memory .te-memory-card:not([aria-pressed="true"]) .te-card-back{opacity:1;width:62%;height:62%;padding:6px;border-radius:50%;background:var(--k-white)}
#main .thinking-expansion .te-memory .te-memory-card:not([aria-pressed="true"]) span:not(.te-card-back){color:var(--k-white)}
#main .thinking-expansion .te-memory-card[aria-pressed="true"] .te-art{width:88%;height:auto;max-height:none;aspect-ratio:1;object-fit:contain}
#main .thinking-expansion .te-memory-card.is-matched{background:var(--k-mint)!important}
#main .thinking-expansion :focus-visible{outline:3px solid var(--k-lilac)!important;outline-offset:3px}
#main .thinking-expansion .te-heading:focus{outline:none!important}
/* Sort: the pictures to place come first, then the shelves, all within a phone screen */
#main .thinking-expansion:has(.te-shelves){display:flex;flex-direction:column}
#main .thinking-expansion:has(.te-shelves)>*{order:5}
#main .thinking-expansion:has(.te-shelves)>.te-progress{order:1}
#main .thinking-expansion:has(.te-shelves)>.te-heading{order:2}
#main .thinking-expansion:has(.te-shelves)>.te-sort-pool{order:3}
#main .thinking-expansion:has(.te-shelves)>.te-shelves{order:4}
#main .thinking-expansion .te-sort-pool{grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:10px;margin:6px 0 14px}
#main .thinking-expansion .te-sort-pool .te-art{max-height:84px;width:100%;object-fit:contain}
#main .thinking-expansion .te-shelves{padding:56px 10px 14px;min-height:0;border-radius:var(--k-r-card)}
#main .thinking-expansion .te-bin{border:0;border-radius:20px;background:rgba(255,255,255,.92);min-height:110px}
#main .thinking-expansion .te-bin-label{background:var(--k-sea)}
#main .thinking-expansion .te-progress{width:100%}
#main .thinking-expansion .te-picture span,#main .thinking-expansion .te-sort-pool span{overflow-wrap:normal;word-break:normal;font-size:15px;line-height:1.15}
/* Boards (three in a row, four in a row): flat Lilac Tint board, white round cells */
#main .thinking-expansion .te-board{border:0;border-radius:var(--k-r-card);padding:10px;background:var(--k-tint);gap:8px}
#main .thinking-expansion .te-cell{border:0;border-radius:50%;background:var(--k-white);box-shadow:0 4px 0 var(--k-edge-card);color:var(--k-edge-card)}
#main .thinking-expansion .te-cell.is-line{border:0;background:var(--k-star);box-shadow:0 4px 0 var(--k-edge-star)}
#main .thinking-expansion .te-board-viewport{overflow:visible}
#main .thinking-expansion .te-board-wrap{min-width:0}

/* ---- Picture journeys (sequence, trail, steps, cubes, adventure, care) ---- */
#main .qex-shell .qex-top{display:none}
#main .qex-shell .qex-progress{display:flex;align-items:center;gap:10px;max-width:520px;margin:0 auto 12px;color:var(--k-plum);font:700 17px/1 var(--k-font-display)}
#main .qex-shell .qex-progress label{order:2;font-size:0}
#main .qex-shell .qex-progress label bdi{font-size:17px}
#main .qex-shell .qex-progress progress{order:1;flex:1 1 auto;height:20px;border:0;border-radius:var(--k-r-pill);background:var(--k-tint);overflow:hidden;-webkit-appearance:none;appearance:none}
#main .qex-shell .qex-progress progress::-webkit-progress-bar{background:var(--k-tint)}
#main .qex-shell .qex-progress progress::-webkit-progress-value{background:var(--k-mint);border-radius:var(--k-r-pill)}
#main .qex-shell .qex-progress progress::-moz-progress-bar{background:var(--k-mint)}
#main .qex-shell #qex-heading{margin:4px 0 6px;color:var(--k-plum);font:800 clamp(20px,2.8vw,26px)/1.3 var(--k-font-display);text-align:center}
#main .qex-shell>p,#main .qex-shell #qex-order-instruction{margin:0 auto 10px;max-width:34rem;color:var(--k-mist);font:400 15px/1.5 var(--k-font-body);text-align:center}
#main .qex-shell h5{margin:14px 0 8px;color:var(--k-plum);font:700 17px/1.3 var(--k-font-display)}
#main .qex-shell .qex-palette{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100px,100%),1fr));gap:12px}
#main .qex-shell .qex-palette .k-tile,#main .qex-shell [data-frame]{display:flex;flex-direction:column;gap:4px;padding:6px 6px 8px;border:0;border-radius:20px;background:var(--k-tint);box-shadow:0 4px 0 var(--k-edge-card)}
#main .qex-shell .qex-frame-art svg,#main .qex-shell .qex-frame-art img{display:block;width:100%;height:auto;border-radius:14px}
#main .qex-shell .qex-caption{color:var(--k-mist);font:500 13px/1.3 var(--k-font-display)}
#main .qex-shell .qex-order{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100px,100%),1fr));gap:12px;margin:0;padding:0;list-style:none}
#main .qex-shell .qex-order li{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:96px;padding:8px;border:0;border-radius:20px;background:var(--k-cloud);box-shadow:inset 0 0 0 3px var(--k-tint)}
#main .qex-shell .qex-number{position:absolute;top:6px;inset-inline-start:8px;color:var(--k-plum);font:800 16px/1 var(--k-font-display)}
#main .qex-shell .qex-empty{color:var(--k-edge-card);font-size:28px}
#main .qex-shell .qex-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:16px 0 4px}
#main .qex-shell .qex-order li{background:var(--k-tint);box-shadow:none}
#main .qex-shell .qex-palette .k-tile,#main .qex-shell [data-frame]{background:var(--k-white);box-shadow:0 4px 0 var(--k-edge-card)}
/* Flat bubbles: no gloss or inner glow (STYLE.md section 3) */
#main .garden-everyday .everyday-bubble,#main .growing-pop>button{border:0!important;background:var(--k-lilac)!important;box-shadow:0 4px 0 var(--k-edge-lilac)!important}
#main .qex-shell .qex-progress bdi,#main .thinking-expansion .te-progress bdi{white-space:nowrap}

/* The settings icon reveals the choosers and grown-up tools in place */
#main:not(.k-settings-open) [data-k-setting]{display:none!important}
#main.k-settings-open [data-k-setting]{outline:0}
#game-settings[aria-pressed="true"]{background:var(--k-plum);color:var(--k-white);box-shadow:0 var(--k-press) 0 var(--k-edge-plum)}
/* Flat panels in the garden, search and collection games (no outlines) */
#main .growing-request,#main .growing-world,#main .sj-clue,#main .sj-board,#main .cd-grid,#main .social-scene,#main .sound-shell [class*="panel"]{border:0!important}
#main .growing-request,#main .sj-clue{background:var(--k-tint)!important;border-radius:var(--k-r-card)!important}
#main .growing-progress{display:flex;align-items:center;gap:10px}
#main .growing-progress progress,#main #stage progress{height:20px;border:0;border-radius:var(--k-r-pill);background:var(--k-tint);overflow:hidden;-webkit-appearance:none;appearance:none}
#main #stage progress::-webkit-progress-bar{background:var(--k-tint)}
#main #stage progress::-webkit-progress-value{background:var(--k-mint);border-radius:var(--k-r-pill)}
#main #stage progress::-moz-progress-bar{background:var(--k-mint)}
/* Picture tiles sit on Lilac Tint so they read on the white stage; the chosen one turns Bright Mint */
#main [data-k="tile"]{background:var(--k-tint)}
#main [data-k="tile"][aria-pressed="true"],#main [data-k="tile"][aria-checked="true"],#main [data-k="tile"].is-selected,#main [data-k="tile"].selected{background:var(--k-mint);box-shadow:0 var(--k-press) 0 var(--k-edge-mint)}
#main #stage details{border:0!important;border-radius:20px;background:var(--k-cloud);padding:12px 16px}
#main #stage details>summary{color:var(--k-mist);font-size:15px}

/* ---- Few words (Anas): one short goal line, the picture is the hero ---- */
/* The title is enough at the top; the game's own first instruction is the goal line */
#main .game-head p{display:none}
/* A collection or journey name above the play is small and grey */
#main .game-stage:has(.thinking-expansion,.qex-shell)>.stage-prompt{margin-bottom:6px;color:var(--k-mist);font:700 15px/1.3 var(--k-font-display)}
/* Second and third instruction lines go; hints stay behind the hint button */
#main .thinking-expansion>p:not(.te-feedback),#main .qex-shell #qex-order-instruction,#main .qex-shell>p,#main .qex-shell .qex-note,
#main .growing-heading p,#main .growing-setup~p,#main .sj-shell .sj-progress,#main .social-expansion .social-muted,#main .social-record>p,
#main .listen-shell .listen-status,#main .listen-word>span,#main .tap-location,#main .tap-status,#main .cd-editor>div>p,
#main [class$="-shell"]>p:not([role="status"]):not([class*="feedback"]):not([class*="status"]){display:none}
/* Empty board places look playable: a soft kit star that breathes twice, never an empty box */
#main .thinking-expansion .te-cell:not(:has(img,svg))>span{font-size:0}
#main .thinking-expansion .te-cell:not(:has(img,svg))::before{content:"";width:42%;height:42%;background:var(--k-edge-card);-webkit-mask:url("brand/icons/star.svg") center/contain no-repeat;mask:url("brand/icons/star.svg") center/contain no-repeat;animation:k-breathe 1.6s ease-in-out 2}
@keyframes k-breathe{50%{transform:scale(1.18);opacity:.7}}
/* Story pages: the picture big with one line; the questions open with a tap */
#main .social-story-layout:not(.k-open)>div{display:none}
#main .k-story-open{display:flex;justify-content:center;margin:12px 0 4px}
#main .social-story-layout.k-open+.k-story-open{display:none}
#main .social-scene figcaption{display:none}
#main #stage .k-round{width:var(--k-round);height: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)}
#main .k-story-open .k-round{width:64px;height:64px}
#main .k-story-open .k-ico{width:30px;height:30px}
#main .social-record:not(:has(li)){display:none}
#main .thinking-expansion .te-cell:not(:has(img,svg))>span{display:none}
#main .qex-shell .qex-responses,#main .qex-shell .qex-turn{display:none!important}
#main.k-settings-open .qex-shell .qex-responses{display:flex}
#main .qex-shell #qex-back,#main .qex-shell #qex-restore-story{display:none}

/* ---- Every game: flat pieces, no outlines (STYLE.md); a chosen piece turns Bright Mint ---- */
#main #stage :is(button,fieldset,figure,[class*="card"],[class*="panel"],[class*="tray"],[class*="board"],[class*="world"],[class*="grid"],[class*="scene"]):not(.te-cell):not(.k-round){border:0!important}
#main #stage button:not([data-k="btn"]):not(.k-chip):not(.k-round):not(.k-btn):not(.primary)[aria-pressed="true"]{background:var(--k-mint)!important;box-shadow:0 4px 0 var(--k-edge-mint)!important}
#main #stage [class*="card"]:is(button){background:var(--k-tint);border-radius:20px;box-shadow:0 4px 0 var(--k-edge-card)}
#main .growing-heading h3{color:var(--k-mist);font:700 15px/1.3 var(--k-font-display)}
/* Strips wrap instead of running past the edge (never cut at an edge) */
#main .kva-frames{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr))!important;grid-auto-flow:row!important;overflow:visible!important}
#main .puppet-programme-strip{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(130px,100%),1fr));overflow:visible!important}
#main .puppet-programme-strip>li{width:auto!important;min-width:0!important}