/* Shared additions keep the original blue, yellow and rounded Kidco design.
   Loaded after style.css. Ported from the 7 Oct 2026 "image repair and brighter
   colors" update; rules for features this app doesn't have (dinosaur/mammal
   vocabulary games, static content pages, self-hosted fonts) are left out. */

/* Internal screens keep native touch/keyboard scrolling without visible tracks. */
dialog,#colorPaper{scrollbar-width:none;scrollbar-gutter:auto;overscroll-behavior:contain}
dialog::-webkit-scrollbar,#colorPaper::-webkit-scrollbar{display:none;width:0;height:0}
html:has(dialog[open]){overflow:hidden}
dialog .modalhead{position:sticky;top:0;z-index:5;gap:12px;background:#fff;padding-block:6px}
dialog .modalhead>button{flex-shrink:0;min-width:44px;min-height:44px}
dialog .modalhead h2{min-width:0;overflow-wrap:anywhere}
@media(max-height:800px){
 #play{padding:16px 20px}
 #play #game{padding-block:4px}
 #play #game h2{font-size:25px;margin:8px 0}
 #play .question{margin:14px 0;font-size:22px}
 #play .round{margin:8px 0}
 #play .instruction{margin:6px 0}
 #play .answers,#play .tiles{gap:10px;margin:12px 0}
 #play .answer,#play .tile{padding:12px 16px;min-height:44px}
 #play .feedback{min-height:36px;margin:10px 0 5px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Bright classroom colors with dark, readable text and familiar controls. */
:root{--kidco-blue:#175bd2;--kidco-ink:#153958;--kidco-sun:#ffd54a;--kidco-coral:#ff9275;--kidco-green:#59cda1;color:var(--kidco-ink);background:#edfaff}
body{background:radial-gradient(ellipse at 5% 5%,#ccefff 0,transparent 42%),radial-gradient(ellipse at 95% 25%,#fff1b8 0,transparent 38%),#f1fbff}
header{background:#fff;border-bottom:4px solid #89d9f4;border-radius:0 0 26px 26px}
header nav button{border:2px solid #83caef;background:#e3f5ff;color:#174e78;box-shadow:0 3px 0 #b6ddef}
header nav .nav-coloring{background:#ffe0ee;border-color:#eaa2c3;color:#7b3156;box-shadow:0 3px 0 #efbed5}
header nav #progressBtn{background:#fff0ad;border-color:#e2bc3b;color:#624805;box-shadow:0 3px 0 #ead38b}
.welcome{background:#bfefff;border:3px solid #72cbef;box-shadow:0 7px 0 #b1e2f2}
.welcome>div:first-child{background:linear-gradient(90deg,#e3f7ff 72%,#e3f7ffbb 88%,transparent)}
.welcome h1 span{color:#b84d0b}
.eyebrow{color:#245f79}
.coloring-banner{background:linear-gradient(115deg,#ffe180,#fff1b9 65%,#ffd8e9);border:3px solid #efbe45;box-shadow:0 6px 0 #f4db93}
.subject{border-bottom-width:5px}
.subject.active{box-shadow:0 6px 0 var(--edge),0 0 0 2px var(--color)}
.gamecard{background:var(--light,#e9f7ff);border:2px solid var(--edge,#add7ec);border-bottom-width:5px;box-shadow:none}
.gameicon{background:#fff;border:2px solid var(--edge,#c6e4f2);border-radius:18px}
.gamecard small{color:#415977}
.gamecard:hover{box-shadow:0 5px 0 var(--edge,#add7ec)}
.primary{background:#185cd4;box-shadow:0 4px 0 #123f91}
.primary:hover{background:#124eb8}
.secondary{background:#e2f3ff;border:2px solid #93c8ed;color:#164b79}
.secondary:hover{background:#ceeaff}
dialog{background:#f5fbff;border:3px solid #80cce9;box-shadow:0 18px 70px #123d5b55}
#play{border-color:#71bce9}
#progress{background:#fff9df;border-color:#e7bd38}
#coloringDialog{background:#fff9e8;border-color:#efbf44}
dialog .modalhead{border-radius:14px;background:inherit;border-bottom:2px solid #c5e0ee}
dialog .modalhead>button{background:#fff0e7;color:#7a371c;border:2px solid #edb291}
.track{background:#d6eaf4}
.track>div{background:linear-gradient(90deg,#ffba38,#ffd958,#62d3a0)}
.answer,.tile{background:#e6f4ff;border-color:#94ccec;color:#19456b;box-shadow:0 4px 0 #c4e3f4}
.answer:nth-child(4n+2),.tile:nth-child(4n+2){background:#fff1bd;border-color:#e2c76e;box-shadow:0 4px 0 #efdda1}
.answer:nth-child(4n+3),.tile:nth-child(4n+3){background:#e2f6df;border-color:#9bcf9a;box-shadow:0 4px 0 #c5e6be}
.answer:nth-child(4n+4),.tile:nth-child(4n+4){background:#ffe3df;border-color:#efb0a1;box-shadow:0 4px 0 #f4cac0}
.answer.correct,.tile.matched{background:#d9f6df;border-color:#328457}
.answer.wrong{background:#ffe8d8;border-color:#cf763c}
.tile.selected{background:#cae8ff;border-color:#326ec1}
.picture-card{--tile-fill:#e0f5ff;--tile-edge:#89cae5;background:var(--tile-fill);border:2px solid var(--tile-edge);border-bottom-width:5px;box-shadow:none}
.picture-card:nth-child(4n+2){--tile-fill:#fff1bf;--tile-edge:#e1c167}
.picture-card:nth-child(4n+3){--tile-fill:#ddf5e4;--tile-edge:#8dc6a1}
.picture-card:nth-child(4n+4){--tile-fill:#ffe2e7;--tile-edge:#e3a0af}
.picture-card:hover{border-color:#2468ba;box-shadow:0 4px 0 #b8d8eb}
.picture-card img{background:#fff;border:1px solid #c9dfe5}
.color-tools{background:#e2f5ff;border:2px solid #9bcee8}
.color-paper{border-color:#e2be63}
.stat{background:#fff0b9;border:2px solid #e4c96c;color:#544014}