/* Nature Lab / Doğa Laboratuvarı. Builds on the Kids design system tokens in kids-product.css. Accent: mint. */
#kids-nature{
 --nl-mint:var(--k-mint,#62e3ab);--nl-ink:#1d2246;--nl-ink-2:#3a4380;
 --nl-tile:#fbfbff;--nl-tile-edge:#d3d9f2;--nl-slot:#0c1234
}
.nl-stage{position:relative}
.nl-stage button{font-family:inherit;-webkit-tap-highlight-color:transparent}
.nl-stage button:focus-visible,.nl-win:focus-visible{outline:4px solid var(--k-gold,#f6c96c);outline-offset:3px}
.nl-win:focus:not(:focus-visible){outline:none}
.nl-live{position:absolute!important;width:1px;height:1px;margin:-1px!important;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;min-height:0!important}
.nl-pic{display:block;width:100%;height:100%;overflow:visible}
.nl-score-star{width:18px;height:18px;fill:var(--k-gold,#f6c96c)}

/* ---------- Labs (modes) and levels ---------- */
.nl-modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:6px;margin-bottom:12px;border-radius:24px;background:var(--k-bg-2,#0c1234);border:1px solid var(--k-line-soft,#1f2a62)}
.nl-mode{display:flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:8px 12px;border:0;border-radius:18px;background:transparent;color:var(--k-ink-2,#d5dbf5);font:800 1rem/1.15 "Manrope",Inter,sans-serif;cursor:pointer;text-align:left}
.nl-mode svg{flex:none;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nl-mode span{min-width:0;overflow-wrap:break-word}
.nl-mode:hover{background:var(--k-surface-2,#172154)}
.nl-mode[aria-pressed="true"]{background:linear-gradient(135deg,var(--nl-mint),#3dd5f3);color:#05261a;box-shadow:0 8px 20px rgba(98,227,171,.25)}
.nl-levels{margin-bottom:16px;width:fit-content;max-width:100%}
.nl-levels button{display:inline-flex;align-items:center;gap:8px}
.nl-level-n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--k-surface-3,#1e2a66);color:var(--k-ink,#f4f6ff);font-size:.85rem}
.nl-levels button[aria-pressed="true"] .nl-level-n{background:var(--nl-mint);color:#05261a}

/* ---------- Board ---------- */
.nl-board{padding:clamp(12px,2.4vw,22px);border-radius:24px;background:var(--k-bg-2,#0c1234);border:1px solid var(--k-line-soft,#1f2a62)}
.nl-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.nl-dots{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.nl-dots li{width:14px;height:14px;border-radius:50%;background:var(--k-surface-3,#1e2a66);border:2px solid var(--k-line,#2a3678)}
.nl-dots li.is-now{background:var(--k-sky,#7cbcff);border-color:#cfe6ff}
.nl-dots li.is-done{background:var(--k-violet,#a594ff);border-color:var(--k-violet,#a594ff)}
.nl-dots li.is-star{background:var(--k-gold,#f6c96c);border-color:var(--k-gold,#f6c96c)}
.nl-count{font-weight:800;color:var(--k-muted,#aab3da);font-size:.92rem}
.nl-ask{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.nl-stage .nl-prompt{flex:1 1 320px;min-width:0;margin:0!important;font:800 clamp(1.15rem,2.4vw,1.45rem)/1.3 "Manrope",Inter,sans-serif;color:var(--k-ink,#f4f6ff)!important;overflow-wrap:break-word}
.nl-voice{display:flex;gap:8px;flex-wrap:wrap}
.nl-tool{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px;border-radius:999px;border:2px solid var(--k-line,#2a3678);background:var(--k-surface,#111944);color:var(--k-ink,#f4f6ff);font-weight:800;cursor:pointer}
.nl-tool svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nl-tool:hover{background:var(--k-surface-2,#172154)}
.nl-tool-toggle[aria-pressed="false"]{opacity:.75;border-style:dashed}
.nl-tool-toggle[aria-pressed="true"]{border-color:var(--nl-mint)}

.nl-key{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:#e6eaf8;color:#4a5490;font:800 .8rem/1 "Manrope",Inter,sans-serif}

/* Order tasks */
.nl-slots{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.nl-slot-li{display:flex;align-items:center;gap:6px;flex:0 1 150px;min-width:0}
.nl-len5 .nl-slot-li{flex-basis:128px}
.nl-arrow{flex:none;display:grid;place-items:center;width:22px;color:var(--nl-mint)}
.nl-arrow-ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.nl-slot{position:relative;flex:1;min-width:0;aspect-ratio:1/1.12;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;border-radius:20px;border:3px dashed var(--k-line,#2a3678);background:var(--nl-slot);color:var(--k-muted,#aab3da)}
.nl-slot.is-next{border-color:var(--k-sky,#7cbcff);box-shadow:0 0 0 4px rgba(124,188,255,.18)}
.nl-slot.is-filled{border:0;background:#f2fff8;box-shadow:inset 0 -6px 0 #bdeed6;color:var(--nl-ink)}
.nl-slot-n{position:absolute;top:8px;left:9px;font:800 .9rem/1 "Manrope",Inter,sans-serif}
.nl-slot:not(.is-filled) .nl-slot-n{position:static;font-size:1.6rem;opacity:.7}
.nl-slot-art{display:block;width:78%;aspect-ratio:1}
.nl-slot-name,.nl-piece-name,.nl-opt-name,.nl-seq-name{margin-top:4px;font:800 clamp(12px,.9rem,16px)/1.2 "Manrope",Inter,sans-serif;color:#2a3370;text-align:center;overflow-wrap:break-word;hyphens:auto;max-width:100%}
.nl-tray{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(8px,1.6vw,16px)}
.nl-piece,.nl-opt{position:relative;min-width:0;min-height:56px;display:flex;flex-direction:column;align-items:center;padding:12px 10px 10px;border:0;border-radius:22px;background:var(--nl-tile);box-shadow:inset 0 -6px 0 var(--nl-tile-edge),0 8px 18px rgba(2,4,20,.35);color:var(--nl-ink);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,opacity .2s}
.nl-piece{flex:0 1 150px}
.nl-len5 .nl-piece{flex-basis:130px}
.nl-piece .nl-key,.nl-opt .nl-key{position:absolute;top:8px;left:9px}
.nl-piece-art,.nl-opt-art{display:block;width:100%;max-width:140px;aspect-ratio:1}
.nl-piece:hover,.nl-opt:not([aria-disabled="true"]):hover{transform:translateY(-3px);box-shadow:inset 0 -6px 0 var(--nl-tile-edge),0 0 0 4px rgba(98,227,171,.45),0 12px 24px rgba(2,4,20,.4)}
.nl-piece.is-glow{box-shadow:inset 0 -6px 0 var(--nl-tile-edge),0 0 0 5px var(--k-gold,#f6c96c),0 0 30px rgba(246,201,108,.6)}
@keyframes nl-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.nl-piece.is-glow{animation:nl-pulse 1s ease-in-out 3}

/* Choose and missing-stage tasks */
.nl-main{width:min(200px,46%);aspect-ratio:1;margin:0 auto 16px;padding:12px;border-radius:28px;background:var(--nl-tile);box-shadow:inset 0 -6px 0 var(--nl-tile-edge)}
.nl-seq{list-style:none;margin:0 auto 18px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.nl-seq-li{display:flex;align-items:center;gap:6px;flex:0 1 120px;min-width:0}
.nl-seq-card{flex:1;min-width:0;aspect-ratio:1/1.15;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px;border-radius:18px;background:var(--nl-tile);box-shadow:inset 0 -5px 0 var(--nl-tile-edge)}
.nl-seq-art{display:block;width:80%;aspect-ratio:1}
.nl-seq-card.is-gap{background:var(--nl-slot);border:3px dashed var(--k-gold,#f6c96c);box-shadow:none}
.nl-gap-mark{font:800 2.6rem/1 "Manrope",Inter,sans-serif;color:var(--k-gold,#f6c96c)}
.nl-seq-card.is-found{background:#f2fff8;box-shadow:inset 0 -5px 0 #bdeed6,0 0 0 4px var(--nl-mint)}
.nl-opts{--cols:3;--gap:clamp(10px,1.8vw,18px);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap);max-width:720px;margin:0 auto}
.nl-n2{--cols:2;max-width:480px}
.nl-n4{--cols:4}
.nl-opt{flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols))}
.nl-opts-text{--cols:1;max-width:560px}
.nl-opt-text{flex-direction:row;justify-content:flex-start;gap:12px;padding:12px 16px 14px;text-align:left}
.nl-opt-text .nl-key{position:static}
.nl-opt-text .nl-opt-name{margin:0;text-align:left;font-size:1.05rem}
.nl-opt.is-nope{opacity:.5;background:#eef0f8;cursor:default}
.nl-opt.is-other{opacity:.6;cursor:default}
.nl-opt.is-right{cursor:default;background:#f2fff8;box-shadow:inset 0 -6px 0 #bdeed6,0 0 0 5px var(--nl-mint),0 0 30px rgba(98,227,171,.55)}
.nl-opt.is-right .nl-key{background:var(--nl-mint);color:#06271a}
.nl-check{position:absolute;top:6px;right:8px;width:30px;height:30px;padding:4px;border-radius:50%;background:var(--nl-mint);fill:none;stroke:#06271a;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.nl-opt-text .nl-check{position:static;margin-left:auto}

@keyframes nl-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.nl-shake{animation:nl-shake .42s ease}

/* Feedback */
.nl-feedback{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px}
.nl-say{min-width:0;flex:1 1 320px;display:flex;align-items:flex-start;gap:14px;padding:14px 18px;border-radius:20px;background:var(--k-surface,#111944);border:2px solid var(--k-line-soft,#1f2a62);min-height:3.6em}
.nl-stage .nl-say p{margin:0!important;min-width:0;overflow-wrap:break-word;font:800 1.05rem/1.45 "Manrope",Inter,sans-serif;color:var(--k-ink,#f4f6ff)!important}
.nl-mood{flex:none;width:40px;height:40px}
.nl-mood svg{width:100%;height:100%}
.nl-mood-bg{fill:var(--k-sky,#7cbcff)}.nl-mood-eye{fill:#1d2246}.nl-mood-mouth{fill:none;stroke:#1d2246;stroke-width:2.6;stroke-linecap:round}
.nl-say[data-tone="yes"]{border-color:var(--nl-mint)}.nl-say[data-tone="yes"] .nl-mood-bg{fill:var(--nl-mint)}
.nl-say[data-tone="hint"]{border-color:#8a7440}.nl-say[data-tone="hint"] .nl-mood-bg{fill:var(--k-gold,#f6c96c)}
.nl-say[data-tone="reveal"]{border-color:var(--k-violet,#a594ff)}.nl-say[data-tone="reveal"] .nl-mood-bg{fill:var(--k-violet,#a594ff)}
.nl-next{min-width:150px}
.nl-keys{margin:14px 0 0!important}

/* Win */
.nl-win .nl-star{width:52px;height:52px;fill:var(--k-surface-3,#1e2a66);stroke:#6b5a33;stroke-width:1}
.nl-win .nl-star-on{fill:var(--k-gold,#f6c96c)}
.nl-win-actions{justify-content:center}

/* How to */
.nl-howto{margin-top:28px}
.nl-labs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.nl-labs li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 14px;align-items:start;padding:16px;border-radius:20px;background:var(--k-surface,#111944);border:1px solid var(--k-line-soft,#1f2a62)}
.nl-labs strong{display:block;color:var(--k-ink,#f4f6ff)}
.nl-lab-pic{grid-row:span 2;width:64px;height:64px;padding:6px;border-radius:16px;background:var(--nl-tile)}

@media(max-width:820px){
 .nl-modes{grid-template-columns:repeat(2,minmax(0,1fr))}
 .nl-labs{grid-template-columns:minmax(0,1fr)}
 .nl-n4{--cols:2}
}
@media(max-width:560px){
 .nl-mode{min-height:56px;font-size:.9rem;gap:8px;padding:8px}
 .nl-mode svg{width:22px;height:22px}
 .nl-levels{width:100%;border-radius:22px}
 .nl-levels button{flex:1 1 auto;padding:6px 10px}
 .nl-level-name{font-size:.86rem}
 .nl-slot-li,.nl-len5 .nl-slot-li{flex-basis:calc(33.33% - 10px)}
 .nl-chain .nl-slot-li{flex-basis:calc(50% - 10px)}
 .nl-piece,.nl-len5 .nl-piece{flex-basis:calc(33.33% - 10px);padding:10px 6px 8px;border-radius:18px}
 .nl-seq-li{flex-basis:calc(33.33% - 8px)}
 .nl-opt{padding:10px 6px 8px;border-radius:18px}
 .nl-piece .nl-key,.nl-opt .nl-key{width:22px;height:22px;font-size:.72rem;top:6px;left:7px}
 .nl-opt-text{padding:12px}
 .nl-say{flex-basis:auto}
 .nl-next{width:100%}
 .nl-main{width:min(160px,52%)}
}
@media(max-width:360px){
 .nl-slot-name,.nl-piece-name,.nl-opt-name,.nl-seq-name{font-size:12px}
 .nl-opt,.nl-piece{padding-left:3px;padding-right:3px}
 .nl-modes{grid-template-columns:minmax(0,1fr)}
 .nl-arrow{width:14px}.nl-arrow-ico{width:14px;height:14px}
}
@media(prefers-reduced-motion:reduce){
 .nl-piece,.nl-opt{transition:none}
 .nl-shake,.nl-piece.is-glow{animation:none}
 .nl-piece:hover,.nl-opt:hover{transform:none}
}
@media print{
 .nl-modes,.nl-levels,.nl-voice,.nl-feedback,.nl-keys,.nl-win-actions{display:none!important}
 .nl-board{border:1px solid #999;background:#fff}
}