/* Koo's Clock Town — telling time for ages 6–8. GameKit tokens load first.
   Art direction: a storybook town square at dusk — petrol-teal sky melting into
   apricot lamplight, terracotta buildings, brass clockwork. No other game in
   the suite lives in this palette (checked against every games/<slug> :root).
   Type is Mulish — this is the older band; Fraunces serif for the storybook
   title only. */

:root{
    --ct-sky1:#173F58;          /* petrol dusk, top of sky      */
    --ct-sky2:#2E6B85;          /* teal mid                     */
    --ct-sky3:#C97F55;          /* apricot horizon band         */
    --ct-peach:#F2A867;
    --ct-ink:#2E2A3E;           /* slate-plum text ink          */
    --ct-cream:#FFF7E6;         /* clock-face cream             */
    --ct-card:#FFFBF0;
    --ct-edge:#E3CFA4;
    --ct-brass:#D9A94E;
    --ct-brass-d:#A87A28;
    --ct-brick:#C46A4F;
    --ct-hour:#3D5AA9;          /* the little hand              */
    --ct-min:#E2554F;           /* the long hand                */
    --ct-lamp:#FFD98A;
    --ct-good:#3E8E5A;
    --ct-sans:"Mulish", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ct-shadow:0 10px 26px rgba(14,26,44,.35);
}

html, body{ overflow:hidden; }
body{
    font-family:var(--ct-sans);
    color:var(--ct-ink);
    background:var(--ct-sky1);
    -webkit-font-smoothing:antialiased;
}

.screen{
    position:fixed; inset:0; z-index:10;
    display:flex; flex-direction:column; align-items:center;
}

/* ══ Backdrop — the town at dusk ══ */
#backdrop{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
#sky{
    position:absolute; inset:0;
    background:linear-gradient(180deg,
        var(--ct-sky1) 0%, #1E4E68 34%, var(--ct-sky2) 58%,
        #7E7E7A 74%, var(--ct-sky3) 86%, var(--ct-peach) 100%);
}
#sky-stars{ position:absolute; top:0; left:0; right:0; height:42vh; }
.ct-stars-svg{ width:100%; height:100%; display:block; }
.ct-star.tw{ animation:ct-twinkle 3.4s ease-in-out infinite; }
.ct-star.tw:nth-of-type(3n){ animation-delay:-1.2s; }
.ct-star.tw:nth-of-type(3n+1){ animation-delay:-2.3s; }
@keyframes ct-twinkle{ 0%,100%{ opacity:.9 } 50%{ opacity:.2 } }

#town-strip{
    position:absolute; left:0; right:0; bottom:0;
    height:clamp(150px, 34vh, 300px);
    transition:opacity .5s ease;
}
.ct-town-svg{ width:100%; height:100%; display:block; }
body.on-play #town-strip{ opacity:.3; }
body.on-play #sky-stars{ opacity:.55; }

/* scene life (all decorative — killed under reduced motion) */
.ct-pend{ transform-origin:600px 178px; animation:ct-pend 1.9s ease-in-out infinite alternate; }
@keyframes ct-pend{ from{ transform:rotate(-13deg) } to{ transform:rotate(13deg) } }
.stm{ animation:ct-steam 3.6s ease-in infinite; }
.stm.s2{ animation-delay:-1.2s } .stm.s3{ animation-delay:-2.4s }
@keyframes ct-steam{
    0%{ transform:translateY(10px) scale(.7); opacity:.7 }
    80%{ opacity:.25 }
    100%{ transform:translateY(-26px) scale(1.25); opacity:0 }
}
.ct-lampglow{ animation:ct-lampglow 4.2s ease-in-out infinite; }
@keyframes ct-lampglow{ 0%,100%{ opacity:.22 } 50%{ opacity:.4 } }

/* windows: dark by default, honey-lit once their level is complete */
.ct-win-glass{ fill:#22354E; stroke:#F4E3C8; stroke-width:3; }
.ct-win-bar{ stroke:#F4E3C8; stroke-width:2; opacity:.9; }
.win-min .ct-win-glass{ stroke:#C9B694; stroke-width:2.4; }
.ct-win.lit .ct-win-glass{ fill:#FFD98A; }
.ct-win.lit{ filter:drop-shadow(0 0 8px rgba(255,217,138,.85)); }
.ct-win.lit .ct-win-bar{ stroke:#C98A2D; }
.ct-win.flash{ animation:ct-winflash 1.2s ease-in-out 2; }
@keyframes ct-winflash{ 0%,100%{ filter:drop-shadow(0 0 6px rgba(255,217,138,.8)) } 50%{ filter:drop-shadow(0 0 20px rgba(255,225,150,1)) } }
.ct-win-props{ opacity:0; transition:opacity .6s; }
.ct-win.lit + .ct-win-props, .ct-win.lit ~ .ct-win-props{ opacity:1; }

/* the tram: parked at the stop until the whole town is three-starred */
.ct-tram-win{ fill:#38506B; }
.ct-headlight{ opacity:.35; }
body.tram-running #tram{ animation:ct-tram 26s linear infinite; }
body.tram-running .ct-tram-win{ fill:#FFE2A1; }
body.tram-running .ct-headlight{ opacity:1; filter:drop-shadow(0 0 6px #FFE2A1); }
@keyframes ct-tram{ from{ transform:translateX(-1250px) } to{ transform:translateX(650px) } }

/* ══ The clock (shared by every clock on the page) ══ */
.ct-clock-svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 8px 18px rgba(10,20,40,.4)); }
.ct-num{ font-family:var(--ct-sans); font-weight:800; font-size:16.5px; fill:#3E3C5A; }
.ct-minnum{ font-family:var(--ct-sans); font-weight:800; font-size:6.8px; fill:#8A6220; opacity:.9; }
.ct-brandline{ font-family:var(--ct-sans); font-weight:800; font-size:6px; letter-spacing:.18em; fill:#A87A28; opacity:.7; }
.ct-hand-sec{ animation:ct-sec 60s steps(60) infinite; animation-delay:-18s; }
@keyframes ct-sec{ to{ transform:rotate(360deg) } }
.ct-hand-hour.glow, .ct-hand-min.glow{
    filter:drop-shadow(0 0 3px #FFE2A1) drop-shadow(0 0 9px rgba(255,215,120,.95));
    animation:ct-glowpulse .8s ease-in-out infinite;
}
@keyframes ct-glowpulse{ 0%,100%{ opacity:1 } 50%{ opacity:.72 } }

/* ══ Title ══ */
#screen-title{
    justify-content:center; justify-content:safe center;
    overflow-y:auto; overscroll-behavior:contain;
    gap:6px; padding:var(--gk-hud-clear-top) 16px 16px;
}
.game-title{
    font-family:var(--gk-serif);
    font-weight:900; text-align:center; line-height:.98; letter-spacing:-.01em;
    font-size:clamp(2.1rem, 8.5vw, 3.6rem);
    color:var(--ct-cream);
    text-shadow:0 2px 0 rgba(20,30,55,.55), 0 8px 24px rgba(10,20,40,.6);
    margin:0;
}
.tagline{
    margin:2px 0 0; text-align:center; font-weight:800;
    font-size:clamp(.92rem, 2.6vw, 1.15rem);
    color:#FFE3B8; text-shadow:0 1px 3px rgba(10,20,40,.6);
}
.t-row{ display:flex; align-items:flex-end; gap:18px; margin:6px 0 2px; }
#title-koo{ width:clamp(88px, 15vh, 132px); }
#title-koo .koo-svg{ width:100%; display:block; animation:koo-bob 3.2s ease-in-out infinite; }
@keyframes koo-bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-7px) } }
.t-clockwrap{ display:flex; flex-direction:column; align-items:center; gap:4px; }
#title-clock{ width:clamp(92px, 16vh, 140px); aspect-ratio:1; }
.t-clock-cap{
    font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
    color:#FFE3B8; text-shadow:0 1px 3px rgba(10,20,40,.7);
    background:rgba(20,34,55,.45); border-radius:999px; padding:3px 10px;
}
.start-btn{
    font-family:inherit; font-weight:900;
    font-size:clamp(1.35rem, 4vw, 1.9rem);
    padding:16px 52px; border:none; border-radius:60px; cursor:pointer;
    color:#3A2508;
    background:linear-gradient(180deg,#FFD97E,#EFA93F);
    box-shadow:0 7px 0 #B97B1E, 0 14px 30px rgba(10,20,40,.5);
    margin-top:8px;
}
.start-btn:active{ transform:translateY(5px); box-shadow:0 2px 0 #B97B1E; }
.btn-pulse{ display:inline-block; animation:ct-pulse 1.7s ease-in-out infinite; }
@keyframes ct-pulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.06) } }
.title-row{ display:flex; gap:12px; align-items:center; margin-top:8px; }
.star-pill{
    font-weight:900; font-size:1.05rem; color:var(--ct-ink);
    background:rgba(255,247,230,.92); border:2px solid var(--ct-brass);
    border-radius:999px; padding:8px 18px; min-height:44px;
    display:flex; align-items:center;
    box-shadow:0 4px 12px rgba(10,20,40,.35);
}

#level-row{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;
    width:min(100%, 440px); margin-top:10px;
}
.lvl-btn{
    position:relative; font-family:inherit; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:10px 4px 8px; min-width:0;
    border:none; border-radius:18px;
    background:rgba(255,247,230,.94); color:var(--ct-ink);
    box-shadow:0 5px 0 rgba(120,86,30,.55), 0 10px 20px rgba(10,20,40,.35);
}
.lvl-btn:active{ transform:translateY(4px); box-shadow:0 1px 0 rgba(120,86,30,.55); }
.lvl-ic{ width:38px; height:38px; }
.lvl-ic svg{ width:100%; height:100%; display:block; }
.lvl-win{ fill:#26354E; stroke:#FFF7E6; stroke-width:1.6; }
.lvl-btn.done .lvl-win{ fill:#FFD98A; stroke:#C98A2D; }
.lvl-btn.done .lvl-ic{ filter:drop-shadow(0 0 5px rgba(255,217,138,.9)); }
.lvl-name{ font-weight:900; font-size:.78rem; line-height:1.1; text-align:center; min-height:2.2em;
    display:flex; align-items:center; }
.lvl-stars{ font-size:.8rem; letter-spacing:1px; }
.lvl-stars .dim{ opacity:.25; filter:grayscale(1); }
.lvl-lock{ display:none; position:absolute; top:-9px; right:-4px; font-size:1.35rem; }
.lvl-btn.locked{ opacity:.62; filter:saturate(.45); }
.lvl-btn.locked .lvl-lock{ display:block; }
.lvl-btn.shake{ animation:ct-shake .45s ease-in-out; }
.lvl-btn.just-unlocked{ animation:ct-unlock 1s ease-in-out; }
@keyframes ct-shake{ 0%,100%{ transform:translateX(0) } 25%{ transform:translateX(-7px) } 75%{ transform:translateX(7px) } }
@keyframes ct-unlock{ 0%,100%{ transform:scale(1) } 40%{ transform:scale(1.14) rotate(-3deg) } 70%{ transform:scale(1.06) rotate(2deg) } }

.info-btn{
    position:fixed; bottom:14px; left:14px; z-index:40;
    width:52px; height:52px; border:none; border-radius:50%;
    background:rgba(255,247,230,.9); font-size:1.4rem; cursor:pointer;
    box-shadow:0 4px 12px rgba(10,20,40,.4);
}
.info-btn:active{ transform:scale(.92); }

/* ══ Play ══ */
#screen-play{ justify-content:flex-start; }

#play-top{
    width:100%; max-width:680px;
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:0 14px; margin-top:var(--gk-hud-clear-top);
}
.pill{
    background:rgba(255,247,230,.92); border:2px solid var(--ct-brass);
    border-radius:999px; padding:5px 13px; font-weight:900; font-size:.86rem;
    color:var(--ct-ink); white-space:nowrap;
    box-shadow:0 3px 8px rgba(10,20,40,.3);
}
#tracker{ display:flex; gap:7px; align-items:center; }
.lamp-dot{
    width:15px; height:15px; border-radius:50%;
    background:rgba(255,247,230,.22); border:2px solid rgba(255,247,230,.5);
    transition:background .3s, box-shadow .3s;
}
.lamp-dot.lit{
    background:var(--ct-lamp); border-color:#EFC169;
    box-shadow:0 0 10px rgba(255,217,138,.9);
}
.lamp-dot.flash{ animation:ct-lampflash .9s ease-in-out 2; }
@keyframes ct-lampflash{ 0%,100%{ box-shadow:0 0 8px rgba(255,217,138,.8) } 50%{ box-shadow:0 0 20px rgba(255,225,150,1) } }

#task-banner{
    width:calc(100% - 24px); max-width:600px;
    display:flex; align-items:center; gap:10px;
    background:linear-gradient(180deg,#FFFBF0,#FFF1D6);
    border:2px solid var(--ct-edge); border-left:6px solid var(--ct-brass);
    border-radius:8px 16px 16px 8px;
    padding:7px 12px; margin-top:8px;
    box-shadow:var(--ct-shadow);
}
#who-chip{ flex:none; display:flex; flex-direction:column; align-items:center; gap:1px; width:52px; }
#who-chip .ct-portrait{ width:44px; height:44px; display:block; }
.who-name{ font-size:.56rem; font-weight:900; color:#8A6B49; letter-spacing:.02em; white-space:nowrap; }
#task-text{ flex:1; min-width:0; font-weight:800; font-size:clamp(.92rem, 3.4vw, 1.12rem); line-height:1.28; }
#task-text b{ color:#A9541A; }
.digital-chip{
    display:inline-block; font-weight:900; color:var(--ct-cream);
    background:#2E3A55; border-radius:8px; padding:1px 8px;
    font-variant-numeric:tabular-nums; letter-spacing:.04em;
}

#clock-zone{
    position:relative; flex:1 1 0; min-height:150px; width:100%;
    display:flex; align-items:center; justify-content:center;
    padding:6px 0 2px;
}
#main-clock{
    height:100%; max-height:min(46vh, 350px); max-width:78vw;
    aspect-ratio:1;
}
/* Koo pops out over the clock's top-right rim — his spot tracks the clock's
   real radius (height-capped at 23vh/175px, width-capped at 39vw). */
#koo-coach{
    position:absolute; z-index:5;
    width:clamp(64px, 10vh, 92px);
    right:calc(50% - min(23vh, 39vw, 175px) - 10px);
    top:calc(50% - min(23vh, 39vw, 175px) - clamp(30px, 5vh, 44px));
}
#koo-coach .koo-svg{ width:100%; display:block; }
.k-lids{ animation:koo-blink 4.6s infinite; }
@keyframes koo-blink{ 0%,91%,100%{ height:.01px } 94%,96%{ height:26px } }
#koo-coach.talk .k-beak-lo{ transform-box:fill-box; transform-origin:center top; animation:koo-talk .28s ease-in-out infinite alternate; }
@keyframes koo-talk{ from{ transform:translateY(0) } to{ transform:translateY(3.5px) } }
.k-wing-l, .k-wing-r{ transform-box:fill-box; transform-origin:center top; }
#title-koo .k-wing-l{ animation:koo-flapl 6s ease-in-out infinite; }
#title-koo .k-wing-r{ animation:koo-flapr 6s ease-in-out infinite; }
@keyframes koo-flapl{ 0%,90%,100%{ transform:rotate(0) } 94%{ transform:rotate(16deg) } }
@keyframes koo-flapr{ 0%,90%,100%{ transform:rotate(0) } 94%{ transform:rotate(-16deg) } }

#trio{
    min-height:44px; display:flex; align-items:center; justify-content:center; gap:10px;
    font-weight:900; color:var(--ct-cream);
    text-shadow:0 2px 6px rgba(10,20,40,.7);
    font-size:clamp(1.05rem, 4.2vw, 1.5rem);
    padding:0 12px; text-align:center;
}
#trio.gk-hidden{ display:none; }
#trio + #answer-zone{ margin-top:0; }
#trio-digital{
    background:#2E3A55; border-radius:10px; padding:2px 12px;
    font-variant-numeric:tabular-nums; box-shadow:0 3px 10px rgba(10,20,40,.4);
}
.trio-dot{ opacity:.7; }
#trio.pop{ animation:ct-triopop .5s cubic-bezier(.2,1.5,.4,1); }
@keyframes ct-triopop{ 0%{ transform:scale(.6); opacity:0 } 100%{ transform:scale(1); opacity:1 } }

/* answers must sit above the trio slot when trio hidden — reserve the slot */
#answer-zone{ width:100%; max-width:600px; padding:4px 12px 14px; }
#answer-zone .panel{ display:flex; flex-direction:column; gap:9px; }

/* READ: three big digital cards */
#card-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:9px; }
.time-card{
    font-family:inherit; cursor:pointer; min-width:0; min-height:88px;
    border:none; border-radius:18px;
    background:linear-gradient(180deg,#FFFBF0,#FFEFD2);
    color:var(--ct-ink);
    box-shadow:0 5px 0 rgba(120,86,30,.5), 0 9px 18px rgba(10,20,40,.35);
    display:flex; align-items:center; justify-content:center;
    transition:transform .12s, box-shadow .12s, opacity .2s;
}
.time-card:active:not(:disabled){ transform:translateY(4px); box-shadow:0 1px 0 rgba(120,86,30,.5); }
.tc-time{
    font-weight:900; font-size:clamp(1.35rem, 6vw, 1.8rem);
    font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.time-card.dim{ opacity:.42; filter:saturate(.5); }
.time-card.good{
    background:linear-gradient(180deg,#E9F6E4,#CBE8C4);
    box-shadow:0 5px 0 rgba(52,110,66,.55), 0 0 18px rgba(120,214,120,.5);
    color:#22592F;
}
.time-card.shake{ animation:ct-shake .45s ease-in-out; }
.time-card.pulse{ animation:ct-cardpulse 1s ease-in-out infinite; }
@keyframes ct-cardpulse{ 0%,100%{ transform:scale(1); box-shadow:0 5px 0 rgba(120,86,30,.5), 0 0 8px rgba(255,217,138,.6) }
    50%{ transform:scale(1.05); box-shadow:0 5px 0 rgba(120,86,30,.5), 0 0 22px rgba(255,217,138,1) } }

/* SET: stepper clusters + the shop bell */
.step-row{ display:flex; gap:10px; justify-content:center; }
.step-cluster{
    flex:1 1 0; min-width:0; max-width:220px;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    background:rgba(255,247,230,.14); border:2px solid rgba(255,247,230,.28);
    border-radius:18px; padding:6px 8px 8px;
}
.step-label{
    display:flex; align-items:center; gap:6px;
    font-weight:900; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
    color:#FFE3B8; text-shadow:0 1px 3px rgba(10,20,40,.7);
}
.hd{ display:inline-block; border-radius:4px; }
.hd-hour{ width:14px; height:7px; background:var(--ct-hour); box-shadow:0 0 0 1.5px rgba(255,247,230,.7); }
.hd-min{ width:22px; height:5px; background:var(--ct-min); box-shadow:0 0 0 1.5px rgba(255,247,230,.7); }
.step-btns{ display:flex; gap:8px; width:100%; }
.step-btn{
    flex:1 1 0; min-width:0; min-height:56px;
    font-family:inherit; font-weight:900; font-size:1.7rem; line-height:1;
    border:none; border-radius:16px; cursor:pointer;
    color:var(--ct-ink);
    background:linear-gradient(180deg,#FFFBF0,#FFEFD2);
    box-shadow:0 4px 0 rgba(120,86,30,.5);
}
.step-btn:active:not(:disabled){ transform:translateY(3px); box-shadow:0 1px 0 rgba(120,86,30,.5); }
.step-btn:disabled{ opacity:.5; cursor:default; }
.ring-btn{
    width:100%; min-height:60px;
    display:flex; align-items:center; justify-content:center; gap:9px;
    font-family:inherit; font-weight:900; font-size:clamp(1.05rem, 4vw, 1.3rem);
    border:none; border-radius:18px; cursor:pointer;
    color:#3A2508;
    background:linear-gradient(180deg,#FFD97E,#EFA93F);
    box-shadow:0 5px 0 #B97B1E, 0 10px 20px rgba(10,20,40,.4);
}
.ring-btn:active:not(:disabled){ transform:translateY(4px); box-shadow:0 1px 0 #B97B1E; }
.ring-btn .ct-bell{ width:30px; height:30px; display:block; }
.ring-btn.pulse{ animation:ct-pulse 1.2s ease-in-out infinite; }

/* ══ How-to overlay (first run) ══ */
#howto{
    position:fixed; inset:0; z-index:920;
    display:flex; align-items:flex-start; justify-content:center;
    background:rgba(14,24,42,.62); padding:16px; overflow:auto;
}
.howto-card{
    margin-block:auto; width:100%; max-width:360px;
    background:var(--ct-card); text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:8px;
}
.howto-card h3{ font-size:1.25rem; font-weight:900; }
#howto-clock{ width:min(44vw, 170px); aspect-ratio:1; }
.ht-line{
    display:block; font-weight:700; font-size:.98rem; line-height:1.4;
    opacity:.55; transition:opacity .4s; text-align:left; margin:0;
}
.ht-line b{ color:#A9541A; }
.ht-line.hot{ opacity:1; }
.ht-line .hd{ vertical-align:middle; margin-right:7px; }
#btn-howto-go{ min-height:60px; margin-top:4px; }

/* ══ For grown-ups ══ */
#grownups{
    position:fixed; inset:0; z-index:920;
    display:flex; align-items:flex-start; justify-content:center;
    background:rgba(14,24,42,.6); padding:16px; overflow:auto;
}
.grownups-card{
    position:relative; max-width:520px; width:100%; text-align:left;
    background:var(--ct-card); margin-block:auto;
}
.grownups-card h3{ font-size:1.3rem; margin-bottom:8px; }
.grownups-card p{ font-size:.95rem; line-height:1.5; margin-bottom:8px; }
.teach-list{ margin:0 0 8px 18px; padding:0; }
.teach-list li{ font-size:.92rem; line-height:1.45; margin-bottom:5px; }
.tip-row{ display:flex; gap:10px; align-items:flex-start; background:rgba(217,169,78,.16); border-radius:16px; padding:10px 12px; }
.tip-row .tip-icons{ font-size:1.5rem; line-height:1; flex:none; }
.tip-row p{ margin:0; font-size:.9rem; }
.close-btn{
    position:absolute; top:8px; right:8px; width:48px; height:48px; border-radius:50%;
    border:2px solid var(--ct-edge); background:#FFF1D6; font-size:1.05rem; font-weight:900;
    color:var(--ct-ink); cursor:pointer;
}

/* celebration buttons keep the brass-lamp look */
.gk-celebrate .gk-btn.gk-celebrate-next{
    background:linear-gradient(135deg,#EFA93F,#FFD97E); color:#3A2508;
    box-shadow:0 6px 18px rgba(185,123,30,.5);
}
.gk-celebrate .gk-btn.gk-secondary{
    background:linear-gradient(135deg,#2E6B85,#4E93B8);
    box-shadow:0 6px 18px rgba(46,107,133,.5);
}
@media (max-height:430px){
    .gk-celebrate .gk-celebrate-card{ padding:16px 22px; border-radius:22px; }
    .gk-celebrate .gk-stars{ font-size:1.9rem; margin:2px 0 8px; }
    .gk-celebrate .gk-celebrate-card p{ margin:6px 0; }
}

/* ══ Phones ══ */
@media (max-width:719px){
    /* keep the title column clear of the fixed HUD and the grown-ups corner */
    #screen-title{ padding-top:var(--gk-hud-clear-top); padding-bottom:var(--gk-corner-clear); }
}
@media (max-width:430px){
    #play-top{ padding:0 10px; }
    .pill{ font-size:.76rem; padding:4px 10px; }
    #task-banner{ margin-top:6px; padding:6px 10px; gap:8px; }
    #who-chip{ width:46px; }
    #who-chip .ct-portrait{ width:40px; height:40px; }
    #answer-zone{ padding:2px 10px 12px; }
    #card-row{ gap:8px; }
    .time-card{ min-height:88px; }
    #trio{ min-height:40px; }
    .step-btn{ min-height:54px; }
    .ring-btn{ min-height:56px; }
}
/* short phones: trim chrome, never targets */
@media (max-height:620px){
    .game-title{ font-size:clamp(1.8rem, 8vw, 2.4rem); }
    .t-row{ margin:2px 0 0; gap:12px; }
    #title-koo{ width:clamp(76px, 13vh, 104px); }
    #title-clock{ width:clamp(84px, 14vh, 116px); }
    .start-btn{ font-size:1.25rem; padding:13px 42px; margin-top:6px; }
    .title-row{ margin-top:6px; }
    .star-pill{ font-size:.95rem; padding:6px 14px; }
    #level-row{ margin-top:8px; gap:8px; }
    .lvl-ic{ width:30px; height:30px; }
    .lvl-name{ font-size:.72rem; }
    #task-banner{ margin-top:5px; }
    #trio{ min-height:36px; }
    #clock-zone{ min-height:130px; }
}

/* a phone held sideways: clock left, controls right */
@media (min-width:560px) and (max-height:520px){
    #play-top{ margin-top:8px; padding-right:var(--gk-hud-clear-right); max-width:none; }
    #screen-play{
        display:grid; column-gap:10px; align-items:center;
        grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr);
        grid-template-rows:auto auto minmax(0, 44px) minmax(0, 1fr);
        justify-items:center;
    }
    #play-top{ grid-area:1 / 1 / 2 / 3; width:100%; }
    #task-banner{ grid-area:2 / 1 / 3 / 3; justify-self:stretch; width:auto; max-width:none;
        margin:4px var(--gk-hud-clear-right) 0 10px; }
    #clock-zone{ grid-area:3 / 1 / 5 / 2; min-height:0; height:100%; }
    #main-clock{ max-height:100%; max-width:44vw; }
    #koo-coach{ right:8px; top:0; }
    #trio{ grid-area:3 / 2 / 4 / 3; min-height:0; }
    #answer-zone{ grid-area:4 / 2 / 5 / 3; align-self:center; padding:0 12px 10px; }
    .time-card{ min-height:64px; }
    .step-btn{ min-height:48px; }
    .ring-btn{ min-height:50px; }
    #howto .howto-card{ max-width:420px; }
    #howto-clock{ width:clamp(90px, 30vh, 150px); }
}

/* sideways-phone title: compact so little or nothing needs scrolling */
@media (min-width:560px) and (max-height:430px){
    #screen-title{ gap:4px; }
    .game-title{ font-size:1.5rem; }
    .tagline{ font-size:.78rem; }
    .t-row{ margin:0; gap:10px; }
    #title-koo{ width:58px; }
    #title-clock{ width:62px; }
    .t-clock-cap{ font-size:.56rem; padding:2px 8px; }
    .start-btn{ font-size:1.05rem; padding:10px 34px; margin-top:2px; min-height:48px; }
    .title-row{ margin-top:4px; }
    .star-pill{ min-height:40px; padding:4px 12px; font-size:.85rem; }
    #level-row{ margin-top:4px; gap:8px; }
    .lvl-btn{ flex-direction:row; gap:7px; padding:8px 6px; min-height:48px; align-items:center; justify-content:center; }
    .lvl-ic{ width:26px; height:26px; }
    .lvl-name{ min-height:0; font-size:.7rem; text-align:left; }
    .lvl-stars{ display:none; }
    .lvl-lock{ top:-7px; right:-2px; font-size:1.05rem; }
}

/* ══ Reduced motion: a child asked the device for less movement ══ */
@media (prefers-reduced-motion: reduce){
    .ct-star.tw, .ct-pend, .stm, .ct-lampglow,
    .btn-pulse, .ring-btn.pulse, .time-card.pulse,
    #title-koo .koo-svg, #title-koo .k-wing-l, #title-koo .k-wing-r,
    .k-lids, #koo-coach.talk .k-beak-lo,
    .lamp-dot.flash, .ct-win.flash, .lvl-btn.just-unlocked, .lvl-btn.shake,
    .time-card.shake, #trio.pop,
    .ct-hand-hour.glow, .ct-hand-min.glow{
        animation:none !important;
    }
    .ct-hand-sec{ display:none; }           /* pure decoration — gone */
    body.tram-running #tram{ animation:none !important; }
    .stm{ opacity:0; }
}