/* Konu dünyaları (K0): the world page and its quiz. Mobile first. Colours come from the Kids tokens (--k-*). */

.kw{display:grid;gap:22px;max-width:760px;margin:0 auto;padding:12px 16px 40px;color:var(--k-ink,#0d1b2a)}
.kw-hero h1{margin:4px 0 8px;font-family:"Manrope",Inter,system-ui,sans-serif;font-weight:800;font-size:2rem;line-height:1.15}
.kw-lede{margin:0;font-size:1.05rem;line-height:1.5;color:var(--k-muted,#3a4a5c)}
.kw-moon{margin:12px 0 0;padding:10px 14px;border-radius:14px;background:var(--k-surface,#eef6ff);font-weight:700}
.kw-moon[hidden]{display:none}
.kw-section{display:grid;gap:12px}
.kw-section h2{margin:0;font-family:"Manrope",Inter,system-ui,sans-serif;font-weight:800;font-size:1.35rem}

.kw-cards{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.kw-card{margin:0;padding:14px 16px;border:2px solid var(--k-line,#c9d8e6);border-radius:18px;background:var(--k-surface,#fff)}
.kw-card h3{margin:0 0 6px;font-size:1.1rem;line-height:1.25}
.kw-card p{margin:0 0 8px;line-height:1.5}
.kw-card .kw-try{margin:0;color:var(--k-muted,#3a4a5c)}
.kw-card .kw-try b{color:var(--k-ink,#0d1b2a)}

.kw-quiz{display:grid;gap:12px;padding:16px;border:2px solid var(--k-line,#c9d8e6);border-radius:20px;background:var(--k-surface,#fff)}
.kw-quiz .kw-progress{margin:0;font-weight:700;color:var(--k-muted,#3a4a5c)}
.kw-question{margin:0;font-family:"Manrope",Inter,system-ui,sans-serif;font-size:1.25rem;line-height:1.3}
.kw-options{display:grid;gap:10px}
.kw-opt{display:block;width:100%;min-height:44px;box-sizing:border-box;padding:12px 14px;border:2px solid var(--k-line,#c9d8e6);border-radius:14px;background:var(--k-surface,#fff);color:var(--k-ink,#0d1b2a);font:inherit;font-weight:700;text-align:left;cursor:pointer}
.kw-opt:hover,.kw-opt:focus-visible{border-color:var(--k-mint,#2fbf8f)}
.kw-opt:focus-visible{outline:3px solid var(--k-gold,#f6c96c);outline-offset:2px}
.kw-feedback{min-height:1.5em}
.kw-status{margin:0;font-weight:700}
.kw-hint{margin:6px 0 0;padding:10px 12px;border-radius:12px;background:var(--k-surface,#eef6ff)}
.kw-stars{margin:0;font-size:2rem;letter-spacing:.2em}
.kw-result{margin:0;font-size:1.1rem;line-height:1.4}
.kw-again{width:auto;justify-self:start}

.kw-grownups{padding:14px 16px;border-radius:18px;border:1px dashed var(--k-line,#c9d8e6)}
.kw-grownups ul{margin:0;padding-left:1.2em;display:grid;gap:6px;line-height:1.5}

/* Dinle (listen) buttons: at least 44px tall. The [hidden] rule keeps them away until the script finds their clips. */
.kw-listen{display:inline-flex;align-items:center;gap:8px;justify-self:start;min-width:44px;min-height:44px;margin-top:6px;padding:6px 16px 6px 12px;border:2px solid var(--k-line,#c9d8e6);border-radius:999px;background:var(--k-surface,#fff);color:var(--k-ink,#0d1b2a);font:inherit;font-weight:800;cursor:pointer}
.kw-listen[hidden]{display:none}
.kw-listen svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kw-listen:hover{border-color:var(--k-mint,#2fbf8f)}
.kw-listen:focus-visible{outline:3px solid var(--k-gold,#f6c96c);outline-offset:2px}

/* Optional pictures (heroArt, card art, question image): full width of their box, never wider than the page. */
.kw-art{display:block;width:100%;max-width:100%;height:auto;margin:0 0 12px;border-radius:14px}

@media (min-width:640px){
 .kw-hero h1{font-size:2.6rem}
}
.kw-opt-pic{display:flex;align-items:center;gap:12px;min-height:96px}
.kw-optpic{display:block;flex:0 0 72px;width:72px;height:72px;color:var(--k-ink,#1d2b3a)}
.kw-optpic svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:4;stroke-linejoin:round}
.kw-optpic .kw-dot{fill:currentColor;stroke:none}

/* K2 (Hayvanlar): story boxes, card groups, the place and why lines, a frame for a footprint, full-colour animal pictures,
   order and match questions, and İz dedektifi. Full-colour pictures use kw-optpic-full, so the outline rule above never applies. */
.kw-story{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;margin:0;padding:14px 16px;border:2px solid var(--k-line,#c9d8e6);border-radius:18px;background:var(--k-surface,#eef6ff)}
.kw-story-art{display:block;width:72px;height:auto;border-radius:12px}
.kw-story p{margin:0;line-height:1.5}
.kw-story .kw-listen{margin-top:6px}
.kw-group-title{margin:6px 0 0;font-family:"Manrope",Inter,system-ui,sans-serif;font-weight:800;font-size:1.15rem}
.kw-card h4{margin:0 0 6px;font-size:1.1rem;line-height:1.25}
.kw-place{margin:0 0 4px;font-size:.85rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--k-muted,#3a4a5c)}
.kw-card .kw-why{margin:0 0 8px}
.kw-card .kw-why b{color:var(--k-ink,#0d1b2a)}
.kw-card-pic{display:block;width:120px;max-width:50%;margin:0 0 8px}
.kw-card-pic svg{display:block;width:100%;height:auto}

.kw-qpic{display:grid;place-items:center;box-sizing:border-box;width:120px;height:120px;margin:0 auto;border:2px solid var(--k-line,#c9d8e6);border-radius:18px;background:var(--k-surface,#fff);color:var(--k-ink,#0d1b2a)}
.kw-qpic svg{display:block;width:88px;height:88px}
.kw-optpic-full{display:block;flex:0 0 72px;width:72px;height:72px}
.kw-optpic-full svg{display:block;width:100%;height:100%}
.kw-opt:disabled{cursor:default;border-color:var(--k-mint,#2fbf8f)}
.kw-selected{border-color:var(--k-gold,#f6c96c);border-width:3px}
.kw-rank{margin-left:auto;display:inline-grid;place-items:center;flex:none;min-width:32px;height:32px;padding:0 8px;box-sizing:border-box;border-radius:999px;background:var(--k-mint,#2fbf8f);color:#0d1b2a;font-weight:800}
.kw-next{width:auto;justify-self:start}
.kw-feedback .kw-why{margin:6px 0 0;padding:10px 12px;border-radius:12px;background:var(--k-surface,#eef6ff);line-height:1.5}

.kw-match{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:start}
.kw-match-col{display:grid;gap:8px;min-width:0}
/* K3: when the left column holds pictures, the words on the right get more room, so a long word such as "Yumurtalarına" is not split */
.kw-match:has(.kw-opt-pic){grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.kw-match:has(.kw-opt-pic) .kw-target{padding-left:8px;padding-right:8px}
@media (max-width:359px){.kw-match:has(.kw-opt-pic) .kw-target{font-size:.8em}}
.kw-match .kw-opt{overflow-wrap:anywhere}
.kw-match .kw-opt-pic{flex-direction:column;align-items:center;gap:6px;min-height:0;text-align:center}
.kw-match .kw-optpic-full{flex-basis:56px;width:56px;height:56px}
.kw-target{text-align:center}
.kw-pairs{margin:0;padding-left:1.2em;display:grid;gap:4px;font-weight:700;line-height:1.4}

.kw-track-opt{display:flex;align-items:center;gap:12px}
.kw-track-name{font-weight:800;font-size:1.05rem}

/* K3 (Dinozorlar): Kazı, the dig game. The fossil lies under a box of sand; each sand cell is a button that fades away when it
   is brushed. Phones: about 280 by 210 px (fits a 360 px screen with the 16 px gutters). Stone and sand colours are fixed, so
   the box reads the same in the dark theme. touch-action:none keeps a finger's drag on the box from scrolling the page. */
.kw-dig{display:grid;gap:12px}
.kw-dig-box{position:relative;justify-self:start;box-sizing:border-box;width:min(280px,100%);aspect-ratio:4/3;overflow:hidden;border:2px solid #b9ab8a;border-radius:18px;background:radial-gradient(circle at 30% 25%,#fbf6ea 0,transparent 55%),linear-gradient(160deg,#eee6d2,#d9cdb0);color:#2b2118;touch-action:none;user-select:none;-webkit-user-select:none}
.kw-dig-fossil{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.kw-dig-fossil svg{display:block;width:160px;height:160px}
.kw-dig-grid{position:absolute;inset:0;display:grid;gap:4px;box-sizing:border-box;padding:4px}
.kw-dig-3x2{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.kw-dig-4x3{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
.kw-dig-cell{position:relative;appearance:none;-webkit-appearance:none;box-sizing:border-box;min-width:48px;min-height:48px;margin:0;padding:0;border:0;border-radius:10px;cursor:pointer;background:radial-gradient(circle at 25% 30%,rgba(255,250,235,.45) 0 1px,transparent 1.5px),radial-gradient(circle at 70% 65%,rgba(120,84,36,.3) 0 1px,transparent 1.5px),radial-gradient(circle at 45% 82%,rgba(120,84,36,.22) 0 1px,transparent 1.5px),linear-gradient(135deg,#e9c98c,#d2a862);background-size:9px 9px,11px 11px,7px 7px,auto;box-shadow:inset 0 -3px 0 rgba(120,84,36,.25);transition:opacity .3s ease}
.kw-dig-cell.is-clear{opacity:0;pointer-events:none}
.kw-dig-cell:disabled{cursor:default}
.kw-dig-cell:focus-visible{outline:3px solid #2b2118;outline-offset:-3px;z-index:1}
@media (prefers-reduced-motion:reduce){.kw-dig-cell{transition:none}}
.kw-opt.kw-dig-tried{opacity:.6;border-style:dashed;border-color:var(--k-coral,#ff8f7f)}
.kw-opt.kw-dig-tried:disabled{cursor:default;border-color:var(--k-coral,#ff8f7f)}
@media (min-width:640px){
 .kw-dig-box{width:min(320px,100%)}
 .kw-dig-fossil svg{width:180px;height:180px}
}