/* A small illustrated garden and a stable, editable row of directions. */
.coding-scene { display: flex; align-items: center; justify-content: center; gap: clamp(22px,5vw,60px); max-width: 920px; margin: auto; }
.coding-garden { --coding-size: min(44vw,48vh,430px); position: relative; flex: 0 0 var(--coding-size); width: var(--coding-size); height: var(--coding-size); border-radius: 28px; }
.coding-feedback { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.coding-blocked path { fill: none; stroke: #8e684b; stroke-width: 4; stroke-dasharray: 5 6; }
.coding-blocked circle { fill: #fff2d8; stroke: #8e684b; stroke-width: 3; }
.coding-blocked text { fill: #65452e; font: 600 20px/1 var(--tf-font); text-anchor: middle; dominant-baseline: middle; }
.coding-map { width: 100%; height: 100%; overflow: visible; }
.coding-fox { --coding-hit-pad: max(0px,calc((44px - var(--coding-size) / 4) / 2)); position: absolute; width: max(25%,44px); height: max(25%,44px); padding: var(--coding-hit-pad); border: 0; border-radius: 30%; background: transparent; color: var(--tf-text); touch-action: manipulation; }
.coding-fox svg { filter: drop-shadow(0 3px 1px rgb(66 60 45 / 14%)); }
.coding-fox:focus-visible { outline-offset: -2px; }
.coding-workbench { width: 340px; flex: 0 1 340px; display: grid; justify-items: center; gap: 26px; }
.coding-program { display: grid; grid-template-columns: repeat(4,58px); gap: 10px; align-items: center; justify-content: center; }
.coding-scene[data-level="2"] .coding-program { grid-template-columns: repeat(3,58px); }
.coding-slot { position: relative; width: 58px; height: 62px; padding: 8px 0 0; border: 2px solid var(--tf-border); border-radius: 12px; background: var(--tf-surface); color: var(--tf-text); touch-action: manipulation; }
.coding-slot-number { position: absolute; top: 4px; left: 6px; font-size: 10px; line-height: 1; color: var(--tf-subtle); }
.coding-slot-arrow { font-size: 30px; line-height: 1; }
.coding-slot:disabled { opacity: .35; }
.coding-slot.coding-selected { border-color: var(--tf-link); outline: 2px solid var(--tf-link); outline-offset: 3px; }
.coding-slot.coding-current { opacity: 1; background: #edce8e; border-color: #edce8e; color: #3b493c; }
.coding-slot.coding-current .coding-slot-number { color: #536050; }
.coding-slot.coding-check { border-style: dashed; border-color: var(--tf-accent-text); opacity: 1; }
.coding-controls { display: grid; gap: 18px; justify-items: center; }
.coding-arrows { display: flex; gap: 10px; }
.coding-arrow { width: 60px; height: 60px; padding: 0; border: 1px solid var(--tf-control-border); border-radius: 16px; font-size: 35px; line-height: 1; color: var(--tf-text); background: var(--tf-surface-raised); touch-action: manipulation; }
.coding-arrow > span { font: 500 35px/1 var(--tf-font); }
.coding-arrow:disabled { opacity: .45; }
.coding-arrow:not(:disabled):active { transform: translateY(2px); }
.coding-actions { display: flex; gap: 20px; align-items: center; }
.coding-run { display: grid; place-items: center; width: 68px; height: 68px; padding: 14px; border: 0; border-radius: 50%; color: #243e40; background: #b6d1a3; touch-action: manipulation; }
.coding-step { display: grid; justify-items: center; align-content: center; gap: 0; width: 62px; height: 58px; padding: 5px; border: 1px solid var(--tf-control-border); border-radius: 14px; color: var(--tf-text); background: var(--tf-surface-raised); touch-action: manipulation; }
.coding-step svg { width: 28px; height: 28px; }
.coding-step span { font: 500 10px/1.2 var(--tf-font); white-space: nowrap; }
.coding-step:disabled { opacity: .35; }
.coding-run:disabled { opacity: .35; }
.coding-remove { width: 48px; height: 48px; padding: 10px; border: 0; border-radius: 50%; color: var(--tf-muted); background: var(--play-hover); touch-action: manipulation; }
.coding-remove:disabled { opacity: .3; }
.coding-status { margin: 0; min-height: 2.8em; max-width: 300px; font-size: 12px; line-height: 1.4; text-align: center; color: var(--tf-muted); }
.coding-arrow.coding-hint { outline: 3px dashed var(--tf-link); outline-offset: 4px; }
.coding-hint-cell > rect { stroke: #567b66; stroke-width: 5; stroke-dasharray: 8 6; }
.coding-home .coding-fox svg { filter: drop-shadow(0 4px 4px rgb(66 60 45 / 16%)); }
@media (max-width:700px) and (min-height:521px) {
  .coding-scene { flex-direction: column; gap: 16px; justify-content: center; }
  .coding-garden { --coding-size: min(76vw,29vh,300px); }
  .coding-workbench { width: 100%; flex: 0 0 auto; gap: 12px; }
  .coding-program { grid-template-columns: repeat(4,48px); gap: 7px; }
  .coding-scene[data-level="2"] .coding-program { grid-template-columns: repeat(6,44px); gap: 6px; }
  .coding-slot { width: 48px; height: 48px; border-radius: 10px; padding-top: 8px; }
  .coding-scene[data-level="2"] .coding-slot { width: 44px; }
  .coding-slot-arrow { font-size: 26px; }
  .coding-controls { display: grid; gap: 10px; }
  .coding-arrows { gap: 6px; }
  .coding-arrow { width: 48px; height: 48px; font-size: 30px; border-radius: 12px; }
  .coding-actions { gap: 22px; }.coding-run { width: 58px; height: 58px; padding: 11px; }
  .coding-status { font-size: 11px; min-height: 1.4em; }
}
@media (max-width:370px) and (min-height:521px) {
  body[data-game="coding"] .play-heading { padding-bottom: 10px; }
  body[data-game="coding"] .play-topline { flex-basis: 78px; }
  .coding-scene { display: grid; grid-template-columns: 140px 144px; grid-template-rows: auto auto auto; align-content: center; gap: 14px 10px; }
  .coding-garden { --coding-size: 140px; grid-column: 1; grid-row: 1; }
  .coding-workbench { display: contents; }
  .coding-program, .coding-scene[data-level="2"] .coding-program { grid-column: 2; grid-row: 1; grid-template-columns: repeat(3,44px); gap: 6px; }
  .coding-scene[data-level="1"] .coding-program { grid-template-columns: repeat(2,44px); }
  .coding-slot { width: 44px; height: 44px; }
  .coding-controls { grid-column: 1 / -1; justify-content: center; }
  .coding-status { grid-column: 1 / -1; }
  .coding-controls { gap: 8px; }.coding-arrows { display: flex; gap: 4px; }.coding-arrow { width: 44px; height: 44px; }
  .coding-actions { gap: 18px; }.coding-step { width: 52px; height: 44px; padding: 3px; }.coding-step svg { width: 24px; height: 24px; }.coding-remove { width: 44px; height: 44px; padding: 9px; }.coding-run { width: 44px; height: 44px; padding: 8px; }
}
@media (max-width:370px) and (min-height:700px) {
  .coding-scene { display: flex; flex-direction: column; gap: 16px; }
  .coding-garden { --coding-size: min(78vw,31vh); }
  .coding-workbench { display: grid; width: 100%; gap: 12px; }
  .coding-program, .coding-scene[data-level="1"] .coding-program { grid-column: auto; grid-row: auto; grid-template-columns: repeat(4,44px); }
  .coding-scene[data-level="2"] .coding-program { grid-column: auto; grid-row: auto; grid-template-columns: repeat(6,44px); gap: 5px; }
  .coding-controls, .coding-status { grid-column: auto; grid-row: auto; }
}
@media (max-height:520px) and (orientation:landscape) {
  body[data-game="coding"] .play-topline { flex-basis: 66px; }
  body[data-game="coding"] .game-content { margin-top: 0; }
  body[data-game="coding"] .play-heading { top: 12px; right: 42px; }
  .coding-scene { gap: 26px; }.coding-garden { --coding-size: min(42vh,205px); }
  .coding-workbench { flex: 0 1 336px; gap: 8px; }
  .coding-program { grid-template-columns: repeat(4,44px); gap: 6px; }
  .coding-scene[data-level="2"] .coding-program { grid-template-columns: repeat(6,44px); gap: 3px; }
  .coding-slot { width: 44px; height: 44px; padding-top: 8px; border-radius: 9px; }.coding-slot-arrow { font-size: 26px; }
  .coding-controls { display: flex; gap: 8px; }.coding-arrows { gap: 4px; }
  .coding-arrow { width: 44px; height: 44px; font-size: 28px; border-radius: 11px; }
  .coding-actions { gap: 4px; }.coding-step { width: 44px; height: 44px; padding: 3px; border-radius: 11px; }.coding-step svg { width: 24px; height: 24px; }.coding-step span { font-size: 9px; }.coding-run { width: 44px; height: 44px; padding: 8px; }.coding-remove { width: 44px; height: 44px; padding: 9px; }
  .coding-status { min-height: 2.8em; font-size: 11px; }
}
@media (max-height:360px) and (orientation:landscape) {
  body[data-game="coding"] .play-view { --play-bottom-space: calc(60px + env(safe-area-inset-bottom,0px)); }
  .coding-scene { gap: 20px; }.coding-garden { --coding-size: 140px; }
  body[data-game="coding"] .play-heading h1 { font-size: 19px; }
  body[data-game="coding"] .play-heading p { font-size: 11px; }
  .coding-workbench { gap: 6px; }.coding-status { min-height: 1.4em; }
}
@media (prefers-reduced-motion:reduce) { .coding-arrow:not(:disabled):active { transform: none; } }