:root{--paper:#f8f5ec;--ink:#22242d;--accent:#7a2021;--sage:#365248;--line:#d8d2c5}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 'IBM Plex Sans',sans-serif}button{font:inherit;cursor:pointer;border:1px solid var(--line);border-radius:4px;background:#fffdf7;color:inherit;padding:12px 17px;touch-action:manipulation}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}[hidden]{display:none!important}.skip{position:absolute;top:-100px;background:white;padding:14px;z-index:20}.skip:focus{top:12px}header,main{max-width:1350px;margin:auto;padding-inline:clamp(24px,4vw,60px)}header{height:78px;display:flex;align-items:center;gap:30px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;text-decoration:none;color:inherit;font-size:27px;letter-spacing:-1.5px;font-weight:700}.brand span{color:var(--accent)}.brand img{margin-left:10px}header>span{font:9px 'IBM Plex Mono',monospace;color:#697066}#sound{margin-left:auto;font-size:12px;border:0;background:none;min-height:44px}.chapter{padding:25px 0 0;display:flex;justify-content:space-between;font:9px 'IBM Plex Mono',monospace;color:var(--accent)}.chapter>span+span{color:#77796d}.title{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;padding:28px 0}.title>div>p{font:9px 'IBM Plex Mono',monospace;margin:0 0 12px;color:var(--accent)}h1{font-size:clamp(38px,4vw,55px);line-height:1.02;letter-spacing:-.045em;margin:0;font-weight:600}.title>p{font-size:16px;max-width:350px;margin:0 0 3px}.game-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:38px;align-items:start}.world{min-width:0}.board{position:relative;aspect-ratio:1.12;background:#e8e1d0;border:1px solid #cfc5af;border-radius:9px;padding:14px;box-shadow:0 7px 0 #cec2a5;overflow:hidden}.cells{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);position:absolute;inset:14px;gap:8px}.cell{background:#d9caaa;border:1px solid #cdbb98;border-radius:5px;position:relative;display:grid;place-items:center}.cell.path{background:#f2ead8;box-shadow:inset 0 -4px #e1d4b9}.cell.rock:before{content:'';display:block;width:44%;height:35%;background:#9d9e8d;box-shadow:inset 8px 6px #b2b3a1,4px 5px #706f5c26;border-radius:42% 50% 33% 35%;transform:rotate(-13deg)}.cell.rock:after{content:'';width:19%;height:17%;background:#999a83;border-radius:47%;position:absolute;right:16%;bottom:21%;transform:rotate(10deg)}.cell.target img{width:110%;height:100%;object-fit:contain;position:absolute;max-width:none;pointer-events:none}.cell.target>span{position:absolute;bottom:8px;font:9px 'IBM Plex Mono',monospace;color:var(--sage);background:#f8f5ecdd;padding:3px 8px;border-radius:2px}.cell.start>span{font:8px 'IBM Plex Mono',monospace;position:absolute;bottom:7px;color:#9b8e77}.cell.visited:after{content:'';width:9px;height:9px;background:#8c9f7e;border-radius:50%;position:absolute;bottom:13px;left:14px}.cell.blocked{animation:blocked .35s}.devre{position:absolute;width:31%;height:35%;left:16.66%;top:83.33%;transform:translate(-50%,-57%);z-index:3;transition:left .65s ease,top .65s ease;pointer-events:none}#model{width:100%;height:100%;filter:drop-shadow(4px 7px 4px #3e39282b)}#model canvas,.fallback{width:100%;height:100%;display:block;object-fit:contain}.direction{position:absolute;bottom:8%;left:40%;font-size:24px;color:var(--accent);background:#fffdf2dd;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;transform:rotate(0);transition:transform .3s}.devre.walking #model{animation:step .22s ease-in-out 3}.devre.bump #model{animation:bump .3s}.start-cover{position:absolute;inset:0;z-index:5;background:var(--paper);display:flex;flex-direction:column;justify-content:flex-end}.start-cover>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:75% 50%}.start-cover>div{position:relative;padding:24px;background:#fffdf6ed;backdrop-filter:blur(5px)}.start-cover h2{font-size:24px;letter-spacing:-.03em;margin:0 0 6px}.start-cover p{font-size:14px;margin:0 0 16px}.primary{background:var(--accent);color:white;border-color:var(--accent);font-weight:500}.primary:hover:not(:disabled){background:#612124}.world-caption{display:flex;justify-content:space-between;gap:15px;font-size:11px;color:#737462;margin-top:23px}.program-heading{display:flex;gap:12px;align-items:center}.program-heading>span{display:grid;place-items:center;background:var(--sage);color:#fffdf7;border-radius:50%;width:26px;height:26px;font:11px 'IBM Plex Mono',monospace}.program-heading h2{font-size:22px;letter-spacing:-.02em;font-weight:500;margin:0}.program-heading #clear{margin-left:auto;font-size:11px;border:0;background:none}.commands{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:19px 0 25px}.commands button{text-align:left;padding:16px 13px;min-height:138px;box-shadow:0 3px 0 #ddd3c34a}.commands button:hover:not(:disabled){border-color:var(--sage);background:#eff1e7}.commands b{display:block;font-size:31px;line-height:1;font-weight:500;color:var(--sage);margin-bottom:13px}.commands strong{display:block;font-size:15px;font-weight:500}.commands small{display:block;font-size:10px;color:#727466;margin-top:6px;line-height:1.4}.hint{font-size:12px;color:#767869;margin:13px 0 15px}#queue{display:flex;gap:8px;flex-wrap:wrap;list-style:none;margin:0 0 21px;padding:13px;background:#e9e5da;min-height:85px;border:1px dashed #c9c2b3;border-radius:4px}#queue:empty:before{content:'Komutların burada sıraya girecek.';font-size:12px;color:#919083;align-self:center;padding-left:6px}#queue button{position:relative;padding:12px 14px;border-color:#d2c8b5;min-width:62px;background:#fffdf7;font-size:22px;line-height:1}#queue small{font:8px 'IBM Plex Mono',monospace;display:block;color:#8d887b;margin-top:7px}#queue li.current button{background:var(--sage);color:white;border-color:var(--sage)}#queue li.current small{color:#dce6d3}#queue li.executed button{background:#edf0e3;border-color:#b9c3ac}.run-row{display:flex;gap:12px}.run-row>button{min-height:49px;font-size:14px}.limit{font:9px 'IBM Plex Mono',monospace;color:#898a7d;margin:13px 0}.speech{display:flex;align-items:center;gap:17px;margin:34px 0 25px;border-block:1px solid var(--line);padding:20px 0;min-height:95px}.speech span,#paper>div>span{font:9px 'IBM Plex Mono',monospace;color:var(--accent)}.speech p{margin:5px 0 0;font-size:16px}.speech img{flex-shrink:0}#paper{background:#e5eadf;border:1px solid #d1d8c7;padding:27px;display:flex;align-items:center;gap:30px;border-radius:4px}#paper h2{font-size:27px;letter-spacing:-.025em;font-weight:500;margin:9px 0}#paper p{font-size:15px;max-width:700px}#paper button{flex-shrink:0;margin-left:auto;font-size:13px}.paper-code{font-family:'IBM Plex Mono',monospace;font-size:15px!important;color:var(--sage)}.teacher{font-size:12px;color:#777b6f;margin:28px 0 40px}.teacher summary{cursor:pointer}.teacher p{max-width:850px;line-height:1.7}@keyframes step{50%{transform:translateY(-5px) rotate(-3deg)}}@keyframes bump{25%,75%{transform:translateX(-7px)}50%{transform:translateX(4px)}}@keyframes blocked{50%{background:#d5ad95}}
@media(max-width:850px){.game-layout{gap:25px}.commands{gap:7px}.commands button{padding:14px 10px}.commands strong{font-size:13px}.title>p{font-size:14px;max-width:270px}.program-heading h2{font-size:19px}}
@media(max-width:650px){header{height:67px;gap:12px}header>span{display:none}.brand{font-size:24px}#sound{font-size:11px;padding:12px 0}.chapter{font-size:8px;padding-top:20px}.chapter>span+span{display:none}.title{display:block;padding:23px 0}.title>p{margin-top:18px;max-width:none;font-size:14px}h1{font-size:40px}.game-layout{grid-template-columns:1fr;gap:31px}.board{aspect-ratio:1.05;padding:10px}.cells{inset:10px;gap:7px}.start-cover h2{font-size:22px}.start-cover>div{padding:20px}.commands button{padding:15px;min-height:126px}.commands strong{font-size:15px}.commands small{font-size:10px}.speech{margin-top:26px;align-items:flex-start}.speech p{font-size:14px}#paper{display:block;padding:22px}#paper h2{font-size:25px}#paper button{margin:10px 0 0}.world-caption{font-size:10px}.direction{font-size:20px;width:28px;height:28px}.teacher{font-size:11px}}
@media(prefers-reduced-motion:reduce){.devre,.direction{transition:none}.devre.walking #model,.devre.bump #model,.cell.blocked{animation:none}}

/* H05 garden plate: art stays behind the real commands and game state. */
.board{aspect-ratio:1;background:#eee5d5;border:0;border-radius:5px;padding:0;box-shadow:none;isolation:isolate}
.garden-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.cells{inset:7.5% 5% 17.5%;gap:0}
.cell,.cell.path{background:transparent;border:0;border-radius:0;box-shadow:none}
.cell.rock:before,.cell.rock:after{display:none}
.cell.start>span{bottom:6%;left:12%;color:#fffbf0;background:#3c3023b3;padding:3px 7px;letter-spacing:.07em}
.cell.target>span{bottom:5%;right:7%;color:#fffbf0;background:#365248dd;font-size:9px;letter-spacing:.07em}
.cell.visited:after{width:8px;height:8px;background:#faf3de;border:1px solid #fffdf6;box-shadow:0 1px 3px #34261566;bottom:10%;left:12%}
.cell.blocked{animation:blocked-outline .45s}
.devre{width:27%;height:29%;transform:translate(-50%,-69%);transition:left .65s cubic-bezier(.3,.05,.25,1),top .65s cubic-bezier(.3,.05,.25,1)}
#model{position:relative;z-index:1;filter:none}
.ground-shadow{position:absolute;bottom:16%;left:25%;width:58%;height:9%;border-radius:50%;background:#31251b57;filter:blur(3px);transform:rotate(-8deg)}
.direction{bottom:1%;left:39%;width:28px;height:28px;font-size:21px;border:1px solid #eddec2;box-shadow:0 2px 4px #34261530}
.devre.walking #model{animation:none}
.devre.bump #model{animation:directional-bump .4s}
.theme-note{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--sage);border-top:1px solid var(--line);padding-top:13px;margin:17px 0 0}
.theme-note span{font-style:italic}
.world-caption{margin-top:13px}
@keyframes directional-bump{35%{transform:translate(var(--bump-x),var(--bump-y))}70%{transform:translate(0,0)}}
@keyframes blocked-outline{50%{outline:2px solid #f6e8d6;outline-offset:-15px}}
@media(max-width:650px){.board{aspect-ratio:1}.cells{inset:7.5% 5% 17.5%;gap:0}.direction{width:24px;height:24px;font-size:18px}.theme-note{font-size:11px}.cell.start>span{font-size:7px}.cell.target>span{font-size:8px}}
@media(prefers-reduced-motion:reduce){.devre{transition:none}.devre.bump #model,.cell.blocked{animation:none}}

#back{font-size:12px;padding:8px 12px;min-height:44px;background:transparent}
.completion-actions{display:flex;flex-direction:column;gap:10px;flex-shrink:0}
#paper .completion-actions button{margin-left:0;font-size:13px}
.commands button[aria-pressed="true"]{border:2px solid var(--accent);background:#f1e9dd;padding:15px 12px}
.fixed-step{display:block;padding:12px 14px;min-width:62px;border:1px solid #d2c8b5;border-radius:4px;background:#f5f2e9;color:#526052;font-size:22px;line-height:1;text-align:center}
#queue .gap-step{border:2px dashed var(--accent);background:#fffdf7;min-width:72px}
#queue li.current .fixed-step{background:var(--sage);color:white;border-color:var(--sage)}
#queue li.executed .fixed-step{background:#edf0e3;border-color:#b9c3ac}
#queue li.current .fixed-step small{color:#dce6d3}
[data-stage="2"] #queue{justify-content:center;gap:16px;padding:20px 13px}
[data-stage="2"] .cell.target>span{right:auto;left:8%;white-space:nowrap}
@media(max-width:650px){.completion-actions{margin-top:16px;align-items:stretch}.chapter{flex-wrap:wrap;align-items:center;gap:8px}#back{font-size:11px;padding:6px 9px}.commands button[aria-pressed="true"]{padding:14px}[data-stage="2"] #queue{gap:12px}}

.irrigation,#water-status{display:none}
[data-stage="2"] #cells,[data-stage="2"] .direction{display:none}
[data-stage="2"] .irrigation{display:block;position:absolute;inset:0;pointer-events:none}
.irrigation svg{width:100%;height:100%;position:absolute;inset:0}
.irrigation path{fill:none;stroke:#6097aa;stroke-width:1.2;stroke-linecap:round;opacity:0}
.source-label,.goal-label,#valve-status{position:absolute;padding:5px 9px;background:#fff9eadb;color:#365248;font-size:10px;letter-spacing:.04em;border-radius:3px}
.source-label{left:10%;top:13%}.goal-label{right:8%;top:14%}#valve-status{left:50%;top:60%;transform:translateX(-50%);white-space:nowrap}
[data-stage="2"] #water-status{display:block;position:absolute;bottom:3%;right:4%;left:39%;margin:0;background:#fffae9e8;padding:10px 12px;border-radius:3px;font-size:12px;color:#273e37}
[data-stage="2"] #queue{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:18px 0}
[data-stage="2"] #queue li{min-width:0}
[data-stage="2"] #queue .fixed-step,[data-stage="2"] #queue .gap-step{width:100%;min-width:0;min-height:120px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;padding:12px 6px;box-sizing:border-box}
[data-stage="2"] #queue strong{font-family:'IBM Plex Sans',sans-serif;font-size:13px;font-weight:500;line-height:1.3}
[data-stage="2"] #queue small{position:static}
[data-water="flowing"] .water-before,[data-water="arrived"] .water-before,[data-water="held"] .water-before{opacity:.85}
[data-water="flowing"] .water-after{opacity:.85;stroke-dasharray:28;animation:water-travel 2s linear both}
[data-water="arrived"] .water-after{opacity:.85}
[data-water="arrived"] .goal-label{background:#365248;color:#fff9ea}
@keyframes water-travel{from{stroke-dashoffset:28}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){[data-water="flowing"] .water-after{animation:none}}
.valve-handle{position:absolute;left:50.4%;top:38%;width:7%;height:1.1%;background:#853b24;border:1px solid #ad6341;border-radius:3px;box-shadow:0 1px 2px #38271f77;transform-origin:0 50%;transform:rotate(-90deg);transition:transform .4s}
.challenge-link{display:block;text-decoration:none;text-align:center;padding:12px 17px;border-radius:4px;font-size:13px;min-height:44px}
[data-water="open"] .valve-handle,[data-water="flowing"] .valve-handle,[data-water="arrived"] .valve-handle{transform:rotate(0deg)}
.irrigation #valve-status{top:48%}
@media(prefers-reduced-motion:reduce){.valve-handle{transition:none}}