/* ============================================================
   Jugnu Jar — coding studio
   Canvas, editor, palette and Word Book.

   The editor is a transparent <textarea> sitting exactly on top
   of a <pre> mirror that carries the colours. Every metric they
   share lives in one custom-property block below, because if
   they drift apart by even a pixel the highlight stops lining up.
   ============================================================ */

.code-screen {
  --code-font: "Cascadia Mono", "Consolas", "SF Mono", "Menlo", "DejaVu Sans Mono", monospace;
  --code-size: 17px;
  --code-line: 1.55;
  --code-pad: 14px;

  max-width: 1180px;
}

/* ---------- heading ---------- */

.code-head { text-align: center; padding-bottom: 8px; }
.code-head > * { margin-left: auto; margin-right: auto; }
.code-title {
  color: #fff;
  font-size: clamp(19px, 3.4vw, 28px);
  font-weight: 900;
  text-shadow: 0 3px 0 rgba(45, 33, 80, .28);
}
.code-hint {
  color: rgba(255, 255, 255, .93);
  font-size: clamp(13px, 2.2vw, 16px);
  font-weight: 700;
  margin: 4px 0 0;
}
.code-counter {
  color: rgba(255, 255, 255, .85);
  font-size: 13px;
  font-weight: 800;
  margin: 4px 0 0;
}

/* the ingredients strip — which instructions the answer needs */
.code-uses {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  align-items: center;
  margin: 10px 0 6px;
}
.uses-label {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  opacity: .92;
}
.uses-chip {
  min-height: 38px;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .92);
  color: #4b3b8f;
  font-family: var(--code-font);
  font-size: 14px;
  font-weight: 800;
  box-shadow: var(--shadow-1);
  transition: transform .12s ease;
}
.uses-chip:active { transform: scale(.93); }
.uses-chip.static {
  background: rgba(255, 255, 255, .6);
  box-shadow: none;
  cursor: default;
  display: inline-grid;
  place-items: center;
}
.code-head .progress-pips { justify-content: center; margin-top: 8px; }
.code-head .progress-pips i.on { background: #fff; transform: scale(1.3); }

/* ---------- layout ---------- */

.code-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.code-left { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* ---------- canvas ---------- */

.code-stage {
  position: relative;
  /* Stay square even when the height cap is what binds — otherwise a short
     window letterboxes the canvas into a wide strip. */
  width: min(100%, 62vh);
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.code-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.code-canvas-tools {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.creature-row { display: flex; gap: 6px; }
.creature-chip {
  min-width: 46px;
  min-height: 46px;
  font-size: 24px;
  line-height: 1;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .3);
  border: 3px solid rgba(255, 255, 255, .45);
  display: grid;
  place-items: center;
  transition: transform .12s ease;
}
.creature-chip.small { min-width: 42px; min-height: 42px; font-size: 19px; }
.creature-chip:active { transform: scale(.9); }
.creature-chip.on { background: #fff; border-color: #fff; box-shadow: var(--shadow-1); }

/* ---------- panel ---------- */

.code-panel {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.code-toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.code-btn {
  flex: 1 1 auto;
  min-height: 52px;
  padding: 10px 14px;
  border-radius: var(--r-pill);
  background: #f1edff;
  color: #4b3b8f;
  font-size: 16px;
  font-weight: 900;
  box-shadow: var(--shadow-1);
  transition: transform .12s ease;
}
.code-btn:active { transform: translateY(3px); box-shadow: none; }
.code-btn.go { background: var(--c-good); color: #fff; flex: 2 1 auto; }
.code-btn.stop { background: var(--c-oops); color: #fff; flex: 2 1 auto; }
.code-btn.next { background: var(--c-listen); color: #fff; }

/* ---------- editor ---------- */

.code-editor-wrap {
  position: relative;
  border-radius: var(--r-md);
  border: 3px solid #e5e1f2;
  background: #fbfaff;
  overflow: hidden;
  min-height: 190px;
}

.code-editor,
.code-mirror {
  margin: 0;
  padding: var(--code-pad);
  font-family: var(--code-font);
  font-size: var(--code-size);
  line-height: var(--code-line);
  letter-spacing: 0;
  tab-size: 2;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  border: 0;
}

.code-mirror {
  position: absolute;
  inset: 0;
  overflow: auto;
  pointer-events: none;
  color: var(--c-ink);
}

.code-editor {
  position: relative;
  display: block;
  width: 100%;
  min-height: 190px;
  max-height: 42vh;
  resize: vertical;
  background: transparent;
  color: transparent;
  caret-color: var(--c-ink);
  outline: none;
  overflow: auto;
}
.code-editor::selection { background: rgba(160, 107, 255, .3); }
.code-editor:focus { outline: none; }
.code-editor-wrap:focus-within { border-color: var(--c-solve); }

/* token colours */
.tk-cmd { color: #1e6fbd; font-weight: 700; }
.tk-num { color: #c1417f; font-weight: 800; }
.tk-repeat { color: #a8620a; font-weight: 800; }
.tk-define { color: #7038d1; font-weight: 800; }
.tk-bracket { color: #a8620a; font-weight: 800; }
.tk-var { color: #1f9c4d; font-weight: 800; }
.tk-mine { color: #7038d1; font-weight: 800; text-decoration: underline dotted; }
.tk-word { color: var(--c-ink); }

.tk-active {
  background: #ffe08a;
  border-radius: 4px;
  box-shadow: 0 0 0 3px #ffe08a;
}
.tk-error {
  background: #ffd0d0;
  border-radius: 4px;
  box-shadow: 0 0 0 3px #ffd0d0;
  text-decoration: underline wavy var(--c-oops);
}

.code-panel.is-running .code-editor { cursor: default; }

/* ---------- message ---------- */

.code-message {
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
}
.code-message.good { background: #e2f8e8; color: #1c7a3f; }
.code-message.warn { background: #fff3d6; color: #96600a; }
.code-message.bad { background: #ffe4e4; color: #b32d2d; }

/* ---------- palettes ---------- */

.cmd-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.cmd-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 8px 13px;
  border-radius: var(--r-pill);
  background: #eef4ff;
  color: #1e6fbd;
  font-size: 14px;
  font-weight: 800;
  box-shadow: var(--shadow-1);
  transition: transform .12s ease;
}
.cmd-chip:active { transform: scale(.94); }
.cmd-chip .ic { font-size: 17px; line-height: 1; }
.cmd-chip.mine { background: #f3ebff; color: #7038d1; }
.cmd-chip.wide { background: #ede4ff; color: #6a2fc9; }

.num-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 2px;
  border-top: 2px dashed #ece8f8;
}
.num-chip {
  min-width: 46px;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: #fff0f7;
  color: #c1417f;
  font-size: 15px;
  font-weight: 900;
  box-shadow: var(--shadow-1);
  transition: transform .12s ease;
}
.num-chip:active { transform: scale(.92); }
.num-chip.nudge { background: #f1edff; color: #6a2fc9; font-size: 20px; }

/* ---------- word book ---------- */

.word-book {
  border-top: 2px dashed #ece8f8;
  padding-top: 8px;
}
.word-book > summary {
  cursor: pointer;
  font-weight: 900;
  font-size: 15px;
  color: #6a2fc9;
  padding: 8px 4px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}
.word-book > summary::-webkit-details-marker { display: none; }
.word-book > summary::before { content: '▸'; transition: transform .2s ease; }
.word-book[open] > summary::before { transform: rotate(90deg); }

.wb-count {
  background: #7038d1;
  color: #fff;
  border-radius: var(--r-pill);
  padding: 1px 9px;
  font-size: 12px;
}
.wb-count:empty { display: none; }

.wb-list { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.wb-empty { font-size: 13px; font-weight: 700; color: var(--c-ink-soft); margin: 0; padding: 4px; }
.wb-item { background: #faf7ff; border-radius: var(--r-sm); padding: 6px; }
.wb-head { display: flex; gap: 6px; align-items: center; }
.wb-use {
  flex: 1 1 auto;
  text-align: left;
  min-height: 42px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: #f3ebff;
  color: #7038d1;
  font-weight: 900;
  font-size: 15px;
}
.wb-peek, .wb-del {
  min-width: 42px;
  min-height: 42px;
  border-radius: var(--r-sm);
  background: #fff;
  font-size: 16px;
  box-shadow: var(--shadow-1);
}
.wb-source {
  margin: 6px 0 0;
  padding: 8px 10px;
  background: #fff;
  border-radius: var(--r-sm);
  font-family: var(--code-font);
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-ink-soft);
  white-space: pre-wrap;
  overflow-x: auto;
}

/* ---------- activity card colours ---------- */

.act-card.code { background: linear-gradient(150deg, #9fd0ff, #3f7ee8); }
.act-card.play { background: linear-gradient(150deg, #ffc4a3, #ff8a5b); }
.act-pill.code { background: #e2eeff; color: #2a5fae; }
.act-pill.play { background: #ffe9dd; color: #b3562b; }

/* ---------- narrow screens ---------- */

@media (max-width: 860px) {
  .code-layout { grid-template-columns: 1fr; }
  .code-stage { width: min(100%, 46vh); }
  .cmd-palette, .num-palette {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }
  .cmd-chip, .num-chip { flex: 0 0 auto; }
}

@media (max-width: 420px) {
  .code-screen { --code-size: 16px; --code-pad: 11px; }
  .code-btn { font-size: 15px; min-height: 50px; padding: 9px 11px; }
  .code-editor, .code-editor-wrap { min-height: 160px; }
}