.robot-game { --robot-ink: #17334d; --robot-blue: #1677aa; color: var(--robot-ink); width: 100%; }
.robot-game, .robot-game * { box-sizing: border-box; }
.robot-task-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.robot-eyebrow { color: #55748c; font-size: .72rem; font-weight: 850; letter-spacing: .13em; }
.robot-attempts { padding: 6px 12px; border-radius: 30px; background: #e9f3fa; font-size: .83rem; font-weight: 750; white-space: nowrap; }
.robot-workspace { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, .92fr); gap: clamp(18px, 4vw, 42px); align-items: center; }
.robot-map-wrap, .robot-planner { min-width: 0; }
.robot-board { display: grid; grid-template-columns: repeat(var(--robot-size), minmax(0, 1fr)); gap: 5px; width: 100%; max-width: 410px; margin: auto; padding: 9px; border: 1px solid #c0d6df; border-radius: 19px; background: #d9e9ec; box-shadow: 0 7px 0 #bfd2d8; }
.robot-cell { position: relative; display: grid; place-items: center; aspect-ratio: 1; min-width: 0; border-radius: 9px; background: #f9fcf7; color: #172f41; font-size: clamp(1.1rem, 3.5vw, 2.1rem); box-shadow: inset 0 -3px 0 #e7eee3; }
.robot-wall { background: #aac0c5; box-shadow: inset 0 -3px 0 #8fa8b0; }
.robot-start { background: #d4edf7; }
.robot-goal { background: #fff2c9; box-shadow: inset 0 -3px 0 #eddda8; }
.robot-checkpoint { background: #fff0d7; box-shadow: inset 0 -3px 0 #e9d3ad; }
.robot-checkpoint-number { display: grid; place-items: center; width: 70%; height: 70%; border: 2px solid #c68435; border-radius: 50%; color: #8c501c; font-size: .72em; font-weight: 850; line-height: 1; }
.robot-checkpoint-next { box-shadow: inset 0 0 0 2px #c68435, inset 0 -3px 0 #e9d3ad; }
.robot-checkpoint.robot-collected { background: #d3eddf; box-shadow: inset 0 -3px 0 #b8dac7; }
.robot-collected .robot-checkpoint-number { color: #317253; border-color: #70a588; }
.robot-collected::after { content: '✓'; position: absolute; bottom: 1px; right: 3px; color: #25704e; font-size: .55em; font-weight: 850; }
.robot-current > .robot-checkpoint-number { position: absolute; top: 2px; right: 2px; width: 37%; height: 37%; font-size: .4em; border-width: 1px; }
.robot-pickups { display: flex; flex-wrap: wrap; gap: 7px; padding: 0; margin: -4px 0 18px; list-style: none; }
.robot-pickups li { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1 1 85px; min-width: 0; padding: 6px 8px; border: 1px solid #d8e1e7; border-radius: 9px; background: #f6f8fa; color: #617586; font-size: .72rem; font-weight: 750; }
.robot-pickups li > span { display: grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; border: 1px solid currentColor; border-radius: 50%; }
.robot-pickups .robot-pickup-next { color: #8c501c; border-color: #c68435; background: #fff0d7; }
.robot-pickups .robot-pickup-done { color: #25704e; border-color: #92bda5; background: #e5f5eb; }
.robot-avatar { z-index: 1; display: grid; place-items: center; width: 85%; height: 85%; line-height: 1; filter: drop-shadow(0 2px 1px #17334d30); }
.robot-goal.robot-current > span:first-child { position: absolute; top: 2px; right: 2px; font-size: .65em; opacity: .6; }
.robot-visited:not(.robot-current):not(.robot-goal) { background: #d3eddf; }
.robot-current { outline: 3px solid #1986ac; outline-offset: -3px; }
.robot-map-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px 12px; margin: 16px 0 0; font-size: .76rem; color: #587082; }
.robot-program-title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.robot-program-title h3 { margin: 0; font-size: 1.02rem; }
.robot-command-count { font-size: .77rem; color: #6b8092; white-space: nowrap; }
.robot-program-box { min-height: 87px; max-height: 152px; overflow-y: auto; padding: 12px; border: 2px dashed #cbdce7; border-radius: 13px; background: #f7fafc; }
.robot-empty { margin: 13px 0; font-size: .86rem; line-height: 1.5; color: var(--filipika-muted,#59485a); text-align: center; }
.robot-empty[hidden] { display: none; }
.robot-program { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.robot-program li { display: grid; place-items: center; width: 30px; height: 32px; border-radius: 7px; background: #e1eff8; color: #176088; font-size: 1.3rem; font-weight: 800; }
.robot-program .robot-command-current { color: #fff; background: #1677aa; box-shadow: 0 0 0 2px #98d3ec; }
.robot-edit { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; }
.robot-game button { font: inherit; cursor: pointer; touch-action: manipulation; }
.robot-edit button { min-width:44px; min-height: 44px; border: 0; border-radius: 8px; padding: 6px 10px; background: #edf2f6; color: #4f6c81; font-size: .76rem; font-weight: 700; }
.robot-game button:disabled { opacity: .42; cursor: default; }
.robot-game button:focus-visible { outline: 3px solid #e29c19; outline-offset: 3px; }
.robot-direction-pad { display: grid; grid-template-columns: repeat(3, 60px); grid-template-rows: repeat(2, 56px); justify-content: center; gap: 6px; margin: 14px 0; }
.robot-direction { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #bcd3e1; border-radius: 11px; color: #155e86; background: #f0f7fc; box-shadow: 0 3px 0 #c0d8e6; }
.robot-direction > span { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.robot-direction small { margin-top: 4px; font-size: .57rem; font-weight: 750; }
.robot-direction:not(:disabled):hover { background: #dceefa; }
.robot-direction:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 #c0d8e6; }
.robot-up { grid-column: 2; grid-row: 1; }
.robot-left { grid-column: 1; grid-row: 2; }
.robot-down { grid-column: 2; grid-row: 2; }
.robot-right { grid-column: 3; grid-row: 2; }
.robot-run { display: block; width: 100%; min-height: 48px; padding: 10px 14px; border: 0; border-radius: 12px; color: #fff; background: #1677aa; font-weight: 800 !important; box-shadow: 0 4px 0 #0c5684; }
.robot-run:not(:disabled):hover { background: #0c6799; }
.robot-key-hint { margin: 11px 0 0; color: var(--filipika-muted,#59485a); font-size: .68rem; text-align: center; line-height: 1.5; }
.robot-status { margin: 22px 0 0; padding: 13px 16px; border-radius: 12px; background: #eef5f8; color: #47697e; font-size: .88rem; line-height: 1.6; text-align: center; }
.robot-error { color: #925335; background: #fff1e5; }
.robot-success { color: #25704e; background: #e5f5eb; }
.robot-demo { display: grid; grid-template-columns: minmax(170px, 270px) minmax(160px, 1fr); gap: 28px; align-items: center; max-width: 660px; margin: 0 auto; }
.robot-demo-note p { margin: 12px 0; font-size: .9rem; line-height: 1.6; }
.robot-sample-program { color: #1677aa; font-size: clamp(1.25rem, 3vw, 1.8rem); font-weight: 850; letter-spacing: .12em; white-space: nowrap; }
.robot-help {margin:0 0 12px;}
.robot-help > summary {display:flex;align-items:center;gap:6px;min-height:44px;color:var(--filipika-purple-dark,#64168e);}
.robot-help > summary::before {content:'＋';}
.robot-help[open] > summary::before {content:'−';}
.robot-help .thinking-instructions {margin:4px 0 12px;}
@media (max-width: 600px) {
  .robot-workspace { grid-template-columns: 1fr; gap: 10px; }
  .robot-workspace .robot-board { max-width: 248px; gap: 3px; padding: 6px; border-radius: 15px; }
  .robot-cell { font-size: clamp(1.2rem, 5.5vw, 1.9rem); border-radius: 7px; }
  .robot-task-top {gap:8px;margin-bottom:10px;}
  .robot-pickups {gap:4px;margin-bottom:10px;}
  .robot-pickups li {padding:5px 3px;font-size:.66rem;gap:4px;}
  .robot-map-legend {margin-top:9px;gap:4px 9px;font-size:.65rem;}
  .robot-program-title {margin-bottom:5px;}
  .robot-program-title h3 {font-size:.9rem;}
  .robot-direction-pad { grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(2, 44px); margin: 8px 0;gap:5px; }
  .robot-direction small {margin-top:2px;font-size:.55rem;}
  .robot-direction > span {font-size:1.3rem;}
  .robot-program-box { min-height: 44px; max-height: 74px;padding:7px; }
  .robot-empty { margin: 3px 0;font-size:.78rem; }
  .robot-edit {margin-top:4px;}
  .robot-edit button {padding:6px 8px;}
  .robot-run {min-height:44px;padding:8px 12px;}
  .robot-key-hint { display: none; }
  .robot-status { margin-top: 10px; padding: 8px 10px;font-size:.78rem;line-height:1.4; }
  .robot-demo { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .robot-demo-map .robot-board { max-width: 240px; }
}

/* The real board, rather than a sticky progress badge, anchors a new delivery. */
#board {scroll-margin-top:112px;}