/* Robo pintor — shared layout lives in game.css. */

.canvas-wrap {
  width: min(100%, 600px, calc(var(--stage-h) - 34px));
  margin: 0 auto;
  background: var(--card);
  padding: 12px;
  border-radius: var(--radius);
  box-shadow: 0 4px 0 var(--line);
}
.canvas {
  --n: 7;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  grid-template-rows: repeat(var(--n), 1fr);
  gap: 4px;
  aspect-ratio: 1;
  container-type: inline-size;
}
.pcell {
  border-radius: 8px;
  background: #f1f4fb;
  transition: background .2s, transform .2s;
}
.pcell.target { background: repeating-linear-gradient(45deg, #e0e7ff 0 6px, #eef2ff 6px 12px); box-shadow: inset 0 0 0 2px #c7d2fe; }
.pcell.painted { background: var(--paint); box-shadow: none; animation: splat .3s ease; }
.pcell.extra { background: var(--red); box-shadow: inset 0 0 0 3px #7f1d1d; }
.pcell.missing { animation: blink .5s ease 4; }
@keyframes splat { from { transform: scale(.6); } }
@keyframes blink { 50% { box-shadow: inset 0 0 0 999px rgba(250, 204, 21, .8); } }

.probot {
  position: absolute;
  top: 0; left: 0;
  width: calc((100% - (var(--n) - 1) * 4px) / var(--n));
  height: calc((100% - (var(--n) - 1) * 4px) / var(--n));
  display: flex; align-items: center; justify-content: center;
  font-size: calc(100cqw / var(--n) * .62);
  transition: transform 320ms ease-in-out;
  z-index: 2;
  pointer-events: none;
}
.probot .face { display: inline-block; }
.probot.left .face { transform: scaleX(-1); }
.probot.shake .face { animation: shake .45s ease; }
.probot.happy .face { animation: party .6s ease infinite; }
@keyframes party { 25% { transform: rotate(-15deg) scale(1.15); } 75% { transform: rotate(15deg) scale(1.15); } }

.legend { text-align: center; color: var(--muted); margin: 12px 0 0; }
.legend .sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; }
.legend .sw.target { background: #e0e7ff; box-shadow: inset 0 0 0 2px #c7d2fe; }
.legend .sw.painted { background: var(--paint, var(--pink)); }

/* ---------- Palette ---------- */
.palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pal {
  font: inherit;
  font-size: 1.8rem;
  min-height: 56px;
  padding: 6px 0;
  border: none;
  border-radius: 14px;
  background: #e8eefc;
  cursor: pointer;
  box-shadow: 0 4px 0 #cdd6ee;
  transition: transform .08s;
}
.pal:active { transform: translateY(3px); box-shadow: 0 1px 0 #cdd6ee; }
.pal:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.pal.repeat { grid-column: 1 / -1; font-size: 1.15rem; font-weight: 600; background: #fef3c7; box-shadow: 0 4px 0 #fcd34d; color: var(--ink); }
.pal.repeat[hidden] { display: none; }

.counter { font-weight: 600; color: var(--muted); text-align: right; }
.counter.full { color: var(--red); }

/* ---------- Program blocks ---------- */
.program-area {
  min-height: 140px;
  flex: 1 1 auto;
  flex-shrink: 1;
  overflow-y: auto;
  background: #f6f8fd;
  border-radius: 14px;
  padding: 10px;
}
.blocks { display: flex; flex-direction: column; gap: 6px; min-height: 40px; border-radius: 12px; padding: 4px; }
.blocks.active { outline: 3px dashed var(--blue); outline-offset: 2px; background: #eff5ff; }
.blocks .hint { color: var(--muted); font-size: .92rem; text-align: center; padding: 6px; }

.block {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 12px;
  padding: 6px 8px;
  box-shadow: 0 2px 0 var(--line);
  font-weight: 600;
  animation: popIn .2s ease;
}
.block .arrow { font-size: 1.4rem; }
.block .name { flex: 1; }
.block.running { outline: 3px solid var(--yellow); background: #fef9c3; }
.block .del {
  border: none; background: transparent; color: #b4bdd3;
  cursor: pointer; font-size: 1.1rem; border-radius: 10px; min-width: 40px; height: 40px;
}
@media (hover: hover) { .block .del:hover { color: #fff; background: var(--red); } }
.block .del:active { color: #fff; background: var(--red); }
@keyframes popIn { from { transform: scale(.85); opacity: 0; } }

.block.repeat { flex-direction: column; align-items: stretch; background: #fef3c7; box-shadow: 0 2px 0 #fcd34d; }
.block.repeat { position: relative; }
.repeat-head { display: flex; align-items: center; gap: 6px; }
.repeat-head .name { flex: 1; }
.repeat-head .times { min-width: 1.6em; text-align: center; font-size: 1.2rem; }
.repeat-head .step {
  font: inherit; font-weight: 700;
  width: 40px; height: 40px;
  font-size: 1.2rem;
  border-radius: 50%;
  border: none;
  background: #fcd34d;
  cursor: pointer;
}
.repeat-head .step:disabled, .block .del:disabled { opacity: .4; cursor: not-allowed; }
/* Floats over the block so the head never wraps on a narrow panel. */
.repeat-head .lap { position: absolute; top: -10px; right: 48px; background: var(--yellow); border-radius: 999px; padding: 0 8px; font-size: .85rem; box-shadow: 0 2px 0 #eab308; }
.repeat-head .lap:empty { display: none; }
.block.repeat > .blocks { background: rgba(255, 255, 255, .6); margin-left: 14px; cursor: pointer; }
.block.repeat > .blocks.active { background: #eff5ff; }

.exit-repeat { align-self: flex-start; }

.repeat-head .step:active:not(:disabled) { background: var(--yellow); transform: scale(.92); }

@media (max-width: 880px) and (min-width: 600px) {
  .panel {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    grid-template-areas: "t t" "tip tip" "prog pal" "prog cnt" "prog exit" "prog ctl";
    grid-template-rows: auto auto auto auto auto 1fr;
    column-gap: 18px;
    max-height: none;
  }
  .panel > h2 { grid-area: t; }
  .panel > .tip { grid-area: tip; }
  .palette { grid-area: pal; }
  .counter { grid-area: cnt; }
  .program-area { grid-area: prog; max-height: 300px; }
  .exit-repeat { grid-area: exit; }
  .panel > .controls { grid-area: ctl; align-self: end; }
}