/* Coding section: chapter map + "program the robot" level player. Colours follow style.css :root. */

/* ---------- block colours ---------- */
.op-F { --k: #4F8EF7; --kd: #3172E0; --kt: #EAF2FF; }
.op-L { --k: #8E7CF0; --kd: #6C5CE7; --kt: #F1EEFF; }
.op-R { --k: #FF9F43; --kd: #E9832A; --kt: #FFF3E6; }
.op-rep { --k: #1DD1A1; --kd: #10AC84; --kt: #E3FBF3; }
.op-P { --k: #F368E0; --kd: #D04EBD; --kt: #FDEBFA; }
.op-if { --k: #F6B93B; --kd: #D9981C; --kt: #FFF6DE; }
.op-until { --k: #12B8C4; --kd: #0B96A0; --kt: #E0F8FA; }

/* ---------- chapter map ---------- */
.cd-map { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px 30px; display: flex; flex-direction: column; gap: 16px; }
.cd-intro { display: flex; align-items: center; gap: 14px; }
.cd-intro-bot svg { display: block; }
.cd-intro .bubble { font-size: 19px; }
.cd-total, .cd-best { display: inline-flex; align-items: center; gap: 4px; background: #fff; border-radius: 999px; padding: 8px 16px; font-weight: 900; font-size: 18px; color: #E0A800; box-shadow: var(--sh); white-space: nowrap; }
.cd-best .cd-stars { font-size: 22px; }
.cd-chapters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cd-ch { padding: 14px 18px 18px; border-top: 7px solid var(--c); display: flex; flex-direction: column; gap: 12px; }
.cd-ch.locked { opacity: .72; }
.cd-ch-head { display: flex; align-items: center; gap: 12px; }
.cd-ch-ic { flex: none; width: 50px; height: 50px; border-radius: 16px; background: var(--c); display: grid; place-items: center; font-size: 28px; }
.cd-ch-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cd-ch-txt b { font-size: 20px; }
.cd-ch-txt small { color: var(--muted); font-weight: 700; font-size: 15px; }
.cd-ch-stars { flex: none; font-weight: 900; color: #E0A800; font-size: 16px; }
.cd-lvls { display: flex; flex-wrap: wrap; gap: 10px; }
.cd-lvl {
  width: 62px; height: 70px; border-radius: 18px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  box-shadow: 0 4px 0 var(--line), inset 0 0 0 3px var(--line); font-size: 24px; transition: transform .1s;
}
.cd-lvl b { line-height: 1; }
.cd-lvl:hover { transform: translateY(-2px); }
.cd-lvl:active { transform: translateY(2px); }
.cd-lvl.done { box-shadow: 0 4px 0 var(--c), inset 0 0 0 3px var(--c); }
.cd-lvl.next { background: var(--c); color: #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, .18); animation: cdPulse 1.6s ease-in-out infinite; }
.cd-lvl.next .cd-stars i { color: rgba(255, 255, 255, .55); }
.cd-lvl.locked { background: #EEF2F8; box-shadow: none; font-size: 18px; }
.cd-lvl.locked .cd-stars { visibility: hidden; }
.cd-stars { font-size: 13px; letter-spacing: 1px; line-height: 1; white-space: nowrap; }
.cd-stars i { font-style: normal; color: #D5DCE8; }
.cd-stars i.on { color: #FFC300; }
@keyframes cdPulse { 50% { transform: translateY(-3px) scale(1.06); } }

/* ---------- level screen layout ---------- */
.screen-coding-level { height: 100vh; }
.screen-coding-level .topbar-title { font-size: 23px; }
.cd-play {
  flex: 1; min-height: 0; width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 22px 18px;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(380px, 1fr); gap: 18px;
}
.cd-left { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
.cd-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; padding: 14px 16px 16px; }

/* Bipo's speech bubble with the hint / result */
.cd-say { display: flex; align-items: center; gap: 10px; min-height: 64px; }
.cd-say-bot { flex: none; }
.cd-say-bot svg { display: block; }
.cd-bubble { flex: 1; min-width: 0; font-size: 18px; line-height: 1.35; transition: box-shadow .2s, background .2s; }
.cd-say-txt small { display: block; margin-top: 4px; font-size: 15px; color: var(--ink2); font-weight: 700; }
.cd-say.bad .cd-bubble { background: #FFF4E8; box-shadow: inset 0 0 0 3px #FFC989, var(--sh); }
.cd-say.good .cd-bubble { background: #E6FBF4; box-shadow: inset 0 0 0 3px var(--green), var(--sh); }
.cd-young .cd-bubble { font-size: 21px; }
.cd-speak, .cd-hintbtn { flex: none; }
.cd-hintbtn.on { background: var(--yellow); }
.cd-miss { display: inline-flex; gap: 4px; vertical-align: middle; }
.cd-miss-ic svg, .cd-items-ic svg { width: 30px; height: 30px; display: block; }

/* ---------- board ---------- */
.cd-board-wrap { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.cd-board { flex: none; }
.cd-board {
  --t: 60px; --dur: 380ms; position: relative; display: grid; border-radius: 18px; overflow: hidden; background: #BFE6A2;
  box-shadow: 0 0 0 6px #fff, 0 12px 30px rgba(45, 49, 66, .14);
}
.cd-t { width: var(--t); height: var(--t); position: relative; }
.cd-t > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.t-grass, .t-rock, .t-tree {
  background-color: #BFE6A2;
  background-image: radial-gradient(circle at 28% 30%, rgba(255, 255, 255, .22) 0 7%, transparent 8%), radial-gradient(circle at 72% 72%, rgba(40, 110, 40, .09) 0 8%, transparent 9%);
}
.t-water { background: #78C4EF; }
.t-path { background: #F7E4B8; box-shadow: inset 0 0 0 2px rgba(210, 174, 103, .35); }
.cd-t.trail::after {
  content: ''; position: absolute; left: 41%; top: 41%; width: 18%; height: 18%; border-radius: 50%; background: rgba(79, 142, 247, .45);
}
.cd-t.hintdot::before {
  content: ''; position: absolute; left: 36%; top: 36%; width: 28%; height: 28%; border-radius: 50%; background: rgba(255, 159, 67, .85);
  box-shadow: 0 0 0 4px rgba(255, 159, 67, .3); animation: cdBlink 1.4s ease-in-out infinite; z-index: 1;
}
@keyframes cdBlink { 50% { opacity: .35; } }
.cd-item { transition: transform .35s ease, opacity .35s ease; transform-origin: 50% 50%; }
.cd-item.got { transform: scale(0) rotate(120deg); opacity: 0; }
.cd-flag .fl { transform-box: fill-box; transform-origin: 0 50%; animation: cdWave 1.8s ease-in-out infinite; }
@keyframes cdWave { 50% { transform: scaleX(.86) skewY(4deg); } }
.cd-bot, .cd-x { position: absolute; left: 0; top: 0; width: var(--t); height: var(--t); transform: translate(calc(var(--x, 0) * var(--t)), calc(var(--y, 0) * var(--t))); pointer-events: none; }
.cd-bot { z-index: 3; transition: transform var(--dur) ease-in-out; }
.cd-bot-rot { width: 100%; height: 100%; transform: rotate(var(--a, 0deg)); transition: transform var(--dur) ease-in-out; }
.cd-bot-in { width: 100%; height: 100%; padding: 5%; }
.cd-bot-in svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .25)); }
.cd-bot.instant, .cd-bot.instant .cd-bot-rot { transition: none; }
.cd-bot-in.bump { animation: cdBump .5s ease; }
@keyframes cdBump { 30% { transform: translateY(-18%); } 55% { transform: translateY(3%) rotate(-6deg); } 75% { transform: rotate(6deg); } 100% { transform: none; } }
.cd-bot.win .cd-bot-in { animation: cdHop .55s ease 3; }
@keyframes cdHop { 50% { transform: scale(1.18); } }
.cd-x { z-index: 2; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: calc(var(--t) * .45); background: rgba(255, 107, 107, .6); border-radius: 12px; animation: fadeIn .3s; }
.cd-items { flex: none; display: flex; gap: 4px; background: #fff; border-radius: 999px; padding: 5px 14px; box-shadow: var(--sh); }
.cd-items-ic { opacity: .3; filter: grayscale(1); transition: opacity .3s, filter .3s, transform .3s; }
.cd-items-ic.got { opacity: 1; filter: none; transform: scale(1.12); }
.cd-items.all { background: #E6FBF4; box-shadow: inset 0 0 0 3px var(--green), var(--sh); }

/* ---------- program ---------- */
.cd-prog-head { display: flex; align-items: center; gap: 8px; font-size: 19px; color: var(--ink2); }
.cd-prog-head .btn-icon { box-shadow: 0 3px 0 var(--line), inset 0 0 0 2px var(--line); }
.cd-prog-head .btn-icon:disabled { opacity: .45; }
.cd-count-wrap { display: inline-flex; align-items: center; gap: 4px; background: #F0F4FB; border-radius: 999px; padding: 4px 14px; font-weight: 900; color: var(--ink); }
.cd-count-wrap.full { background: #FFE9E9; color: #D94B4B; }
.cd-prog {
  position: relative; flex: 1 1 0; min-height: 120px; overflow: auto; background: #F7F9FD; border-radius: 16px; padding: 10px;
  display: flex; flex-direction: column; gap: 10px; box-shadow: inset 0 0 0 2px var(--line);
}
.cd-prog.locked { pointer-events: none; }
.cd-row { display: flex; align-items: flex-start; gap: 8px; }
.cd-row + .cd-row { padding-top: 10px; border-top: 2px dashed var(--line); }
.cd-row-lbl { flex: none; height: 52px; min-width: 52px; border-radius: 14px; display: grid; place-items: center; font-weight: 900; font-size: 20px; }
.cd-row-lbl svg { width: 34px; height: 34px; }
.cd-row-lbl.start { background: #E3FBF3; }
.cd-row-lbl.p1 { background: #F368E0; color: #fff; padding: 0 10px; display: flex; gap: 4px; }
.cd-slot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 52px; flex: 1; min-width: 0; }
.cd-c .cd-slot { flex: 0 1 auto; min-height: 48px; }
.cd-b, .cd-pb, .cd-c-head { background: var(--k); color: #fff; }
.cd-b {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; box-shadow: 0 4px 0 var(--kd);
  transition: transform .12s, box-shadow .12s;
}
.cd-c .cd-b { width: 48px; height: 48px; }
.cd-b svg { width: 34px; height: 34px; }
.cd-b:hover, .cd-c-head:hover { filter: brightness(1.06); }
.cd-b:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--kd); }
.cd-p1 { font-size: 19px; font-weight: 900; letter-spacing: .5px; }
.cd-c { display: inline-flex; align-items: flex-start; gap: 6px; padding: 5px; border-radius: 16px; background: var(--kt); box-shadow: inset 0 0 0 3px var(--k); max-width: 100%; }
.cd-c > .cd-slot, .cd-br > .cd-slot { flex-wrap: wrap; min-width: 48px; }
.cd-c-head { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; box-shadow: 0 3px 0 var(--kd); }
.cd-c-head svg { width: 32px; height: 32px; }
.cd-n { min-width: 48px; height: 48px; padding: 0 6px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 3px var(--k); font-weight: 900; font-size: 20px; color: var(--kd); }
.cd-br-wrap { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cd-br { display: flex; align-items: flex-start; gap: 6px; background: rgba(255, 255, 255, .7); border-radius: 12px; padding: 3px 6px 3px 3px; min-width: 0; }
.cd-br-ic { line-height: 48px; }
.cd-n, .cd-c-head, .cd-br-ic { flex: none; }
.cd-br-ic { flex: none; width: 28px; text-align: center; font-weight: 900; font-size: 20px; }
.cd-br.yes .cd-br-ic { color: var(--green-d); }
.cd-br.no .cd-br-ic { color: var(--red); }
.cd-plus {
  width: 48px; height: 48px; border-radius: 12px; border: 3px dashed #C6D2E8; color: #A7B4CC; font-weight: 900; font-size: 26px; line-height: 1;
  display: grid; place-items: center; background: transparent;
}
.cd-plus.on { border-color: var(--blue); color: var(--blue); background: #EAF2FF; animation: cdPlus 1.4s ease-in-out infinite; }
@keyframes cdPlus { 50% { box-shadow: 0 0 0 5px rgba(79, 142, 247, .18); } }
.cd-caret { width: 5px; height: 46px; border-radius: 3px; background: var(--blue); animation: blink 1s steps(1) infinite; }
.cd-empty { color: var(--muted); font-weight: 700; font-size: 16px; padding: 0 4px; }
.cd-young .cd-empty { font-size: 34px; }
/* execution highlight */
.cd-b.cur, .cd-c.cur > .cd-c-head { outline: 4px solid var(--ink); outline-offset: 2px; transform: translateY(-3px) scale(1.07); }
.cd-c.cur { box-shadow: inset 0 0 0 3px var(--k), 0 0 0 3px rgba(45, 49, 66, .15); }
.cd-c.is-yes > .cd-c-head { background: var(--green); box-shadow: 0 3px 0 var(--green-d); }
.cd-c.is-no > .cd-c-head { background: var(--red); box-shadow: 0 3px 0 #D94B4B; }
.cd-b.err, .cd-c.err > .cd-c-head { outline: 4px solid var(--red); outline-offset: 2px; animation: shake .45s; }

/* ---------- palette & controls ---------- */
.cd-pal { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cd-pb {
  width: 72px; min-height: 74px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 6px 3px; box-shadow: 0 5px 0 var(--kd); transition: transform .08s, box-shadow .08s;
}
.cd-pb:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--kd); }
.cd-pb:disabled { filter: grayscale(.85) opacity(.45); }
.cd-pal.full .cd-pb:not(:disabled) { filter: grayscale(.5) opacity(.7); }
.cd-pb-ic { display: grid; place-items: center; }
.cd-pb-ic svg { width: 38px; height: 38px; display: block; }
.cd-pb-lbl { font-size: 13px; font-weight: 800; line-height: 1.1; text-align: center; }
.cd-young .cd-pb { width: 92px; min-height: 92px; border-radius: 22px; }
.cd-young .cd-pb-ic svg { width: 54px; height: 54px; }
.cd-ctrl { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.cd-ctrl .btn-icon { box-shadow: 0 4px 0 var(--line), inset 0 0 0 2px var(--line); }
.cd-ctrl .btn-icon:disabled { opacity: .45; }
.cd-gap { flex: 1; }
.cd-undo svg { display: block; }
.cd-run { min-width: 150px; }
.cd-young .cd-run { min-width: 120px; font-size: 30px; padding: 12px 34px; }
.cd-stepb { padding: 10px 18px; }

/* ---------- win dialog ---------- */
.cd-win-modal { text-align: center; }
.cd-win { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cd-win-bot svg { display: block; }
.cd-win .stars { font-size: 54px; }
.cd-win p { margin: 0; }
.cd-win-note { font-weight: 800; color: var(--ink2); }
.cd-win-note.good { color: var(--green-d); }
.cd-win-coins { display: inline-flex; align-items: center; gap: 8px; font-size: 24px; }
.cd-win-modal .modal-btns { justify-content: center; }

/* ---------- smaller windows ---------- */
@media (max-width: 1150px) {
  .cd-play { grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr); gap: 14px; padding: 0 14px 14px; }
  .cd-pb { width: 64px; min-height: 64px; }
  .cd-pb-ic svg { width: 32px; height: 32px; }
  .cd-pb-lbl { font-size: 12px; }
  .cd-young .cd-pb { width: 80px; min-height: 80px; }
  .cd-run { min-width: 120px; }
  .cd-say { min-height: 56px; }
  .cd-bubble { font-size: 17px; padding: 10px 14px; }
}
@media (max-width: 1150px) {
  .cd-lvls { gap: 8px; }
  .cd-lvl { width: 54px; height: 64px; font-size: 22px; border-radius: 16px; }
}
@media (max-width: 900px) {
  .cd-chapters { grid-template-columns: 1fr; }
}
@media (max-width: 820px), (max-height: 540px) {
  .screen-coding-level { height: auto; }
  .cd-play { grid-template-columns: 1fr; }
  .cd-board-wrap { flex: none; height: 52vh; min-height: 240px; }
  .cd-prog { flex: none; min-height: 130px; max-height: 42vh; }
}
@media (max-width: 700px) {
  .cd-map { padding: 0 12px 24px; }
  .cd-lvl { width: 56px; height: 64px; }

  /* phones (portrait): a shorter board so the program and the blocks stay close */
  .cd-map { gap: 12px; }
  .cd-total, .cd-best { padding: 6px 10px; font-size: 16px; }
  .cd-best .cd-stars { font-size: 16px; letter-spacing: 0; }
  .screen-coding-level .topbar-title { font-size: 16px; }
  .cd-intro .bubble { font-size: 17px; }
  .cd-intro-bot svg { width: 56px; height: 56px; }
  .cd-ch { padding: 12px 14px 14px; }
  .cd-ch-txt small { font-size: 14px; }
  .cd-play { gap: 12px; padding: 0 12px 16px; }
  .cd-say { min-height: 0; gap: 8px; }
  .cd-say-bot svg { width: 48px; height: 48px; }
  .cd-bubble, .cd-young .cd-bubble { padding: 10px 12px; font-size: 16px; }
  .cd-say-txt small { font-size: 14px; }
  .cd-board-wrap { height: 36vh; min-height: 220px; }
  .cd-right { gap: 10px; padding: 12px; }
  .cd-prog { min-height: 100px; max-height: 32vh; }
  .cd-pb { width: 70px; min-height: 64px; }
  .cd-pb-lbl { font-size: 14px; }
  .cd-young .cd-pb { width: 76px; min-height: 76px; }
  .cd-run { flex: 1; min-width: 0; }
  .cd-empty { font-size: 15px; }
}
/* phones (both orientations): readable stars on the level buttons */
@media (max-width: 700px), (max-height: 500px) and (min-width: 560px) {
  .cd-stars { font-size: 14px; letter-spacing: 0; }
}
/* tablets (portrait): a shorter board so the blocks are on the first screen */
@media (min-width: 701px) and (max-width: 1000px) and (min-height: 801px) {
  .cd-board-wrap { height: 44vh; }
}
/* phones (landscape): the board fills the left side; the hint, the program and the blocks are on the right */
@media (max-height: 500px) and (min-width: 560px) {
  .cd-play { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-rows: auto 1fr; gap: 8px 12px; padding: 0 12px 10px; }
  .cd-left { display: contents; }
  .cd-say { grid-column: 2; grid-row: 1; min-height: 0; gap: 8px; }
  .cd-board-wrap { grid-column: 1; grid-row: 1 / span 2; flex: none; height: calc(100vh - 76px); min-height: 0; }
  .cd-right { grid-column: 2; grid-row: 2; gap: 8px; padding: 10px 12px; }
  .cd-say-bot svg { width: 44px; height: 44px; }
  .cd-bubble, .cd-young .cd-bubble { padding: 8px 12px; font-size: 15px; }
  .cd-say-txt small { font-size: 14px; }
  .cd-prog-head { font-size: 17px; }
  .cd-prog { flex: 1 1 auto; min-height: 72px; max-height: none; }
  .cd-pal { gap: 6px; }
  .cd-pb, .cd-young .cd-pb { width: 48px; min-height: 48px; border-radius: 14px; }
  .cd-pb-lbl { display: none; }
  .cd-pb-ic svg, .cd-young .cd-pb-ic svg { width: 32px; height: 32px; }
  .cd-ctrl { gap: 8px; }
  .cd-run, .cd-young .cd-run { min-width: 0; padding: 10px 22px; font-size: 20px; }
  .cd-stepb { padding: 8px 14px; }
  .cd-map { padding: 0 14px 20px; }
  .cd-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}