/* Logo Turtle */

:root {
  --bg: #0b0b16;
  --panel: #15152a;
  --panel-2: #1c1c36;
  --line: #2a2a4a;
  --text: #eceaf6;
  --muted: #9a9ac0;
  --accent: #5858FD;
  --amber: #ffb703;
  --teal: #2ec4b6;
  --rose: #ff6b8b;
  --mono: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", Menlo, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

/* A class that sets `display` beats the browser's own `[hidden]` rule, so an
   element hidden from script with `el.hidden = true` stays on screen while the
   code reads as correct. `.overlay` and `.tool` both set display, so without
   this reset the panels and the Skip button would never go away. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(800px 400px at 15% -10%, rgba(88, 88, 253, 0.16), transparent 60%),
    radial-gradient(700px 400px at 90% 0%, rgba(255, 183, 3, 0.08), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.shell {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 14px 18px 22px;
  gap: 12px;
}

/* HUD */
.hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(21, 21, 42, 0.72);
}
.hud-stats { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.stat { display: inline-flex; align-items: baseline; gap: 6px; font-size: 13px; }
.stat em { color: var(--muted); font-style: normal; letter-spacing: 0.4px; }
.stat b { font-size: 15px; min-width: 2.4ch; font-family: var(--mono); font-weight: 600; }

.hud-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.hud-btn {
  padding: 7px 13px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.hud-btn:hover { color: var(--text); border-color: var(--accent); }

/* The stage: the turtle screen, and the command line beside or below it. */
.lg {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  justify-items: center;
}
.screen-col { width: min(100%, max(220px, calc(100dvh - 440px))); display: grid; gap: 10px; }
.screen {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background-color: #000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  touch-action: manipulation;
}
.screen canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.screen canvas#cvTurtle { pointer-events: none; }
.pointer, .badge {
  position: absolute; left: 8px;
  padding: 3px 8px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.62);
  color: #e8e8f6;
  font: 12px var(--mono);
  pointer-events: none;
  white-space: nowrap;
}
.pointer { bottom: 8px; }
/* Where the turtle is, on the screen itself. It only shows where the top bar
   is too narrow to carry it. */
.badge { top: 8px; display: none; }

.tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tools .segmented { flex: 1 1 200px; max-width: 280px; }
.tool {
  min-height: 40px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.tool:hover { color: var(--text); border-color: var(--accent); }
.tool[aria-pressed="true"] { background: var(--amber); border-color: var(--amber); color: #0b0b16; font-weight: 600; }
.tool-skip { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.tool-skip:hover { color: #fff; filter: brightness(1.1); }

/* The commander: what was typed, what came back, and the line to type on. */
.commander {
  width: 100%;
  height: clamp(250px, 34dvh, 440px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
}
.log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 14px;
  font: 14px/1.5 var(--mono);
  -webkit-user-select: text;
  user-select: text;
}
.ln { white-space: pre-wrap; overflow-wrap: anywhere; padding: 1px 0; }
.ln-in { color: var(--muted); cursor: pointer; padding-left: 2ch; text-indent: -2ch; }
.ln-in::before { content: "? "; color: var(--accent); font-weight: 700; }
.ln-in:hover { color: var(--text); }
.ln-out { color: var(--text); }
.ln-res { color: var(--teal); }
.ln-res::before { content: "= "; }
.ln-err { color: var(--rose); font-weight: 600; }
.ln-hint { color: var(--muted); font-style: italic; }
.ln-sys { color: var(--muted); }
.ln-sug { color: var(--accent); cursor: pointer; padding-left: 2ch; text-indent: -2ch; text-decoration: underline; text-decoration-color: rgba(88, 88, 253, 0.4); text-underline-offset: 3px; }
.ln-sug::before { content: "> "; text-decoration: none; display: inline-block; }
.ln-sug:hover { color: var(--text); }
.ln:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 4px; }

.chips {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 10px;
  border-top: 1px solid var(--line);
}
.chip {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  font: 13.5px var(--mono);
  cursor: pointer;
}
.chip:hover { border-color: var(--accent); }
.chip:active { background: var(--accent); color: #fff; }

.cmd {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 8px 10px 10px;
  border-top: 2px solid var(--line);
}
.cmd:focus-within { border-top-color: var(--amber); }
.prompt { padding-top: 7px; color: var(--accent); font: 700 15px var(--mono); }
.cmd textarea {
  flex: 1 1 auto;
  min-width: 0;
  resize: none;
  min-height: 36px;
  max-height: min(150px, 26dvh);
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 var(--mono);
  outline: none;
}
.cmd textarea:focus { border-color: var(--amber); }
.cmd textarea::placeholder { color: var(--muted); opacity: 0.8; }
.btn-run {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.btn-run:hover { filter: brightness(1.1); }

/* Wide screens and short landscape ones: the screen on the left, the
   commander as tall as it is on the right. */
@media (min-width: 900px), (orientation: landscape) and (min-width: 600px) {
  .lg {
    grid-template-columns: auto minmax(300px, 1fr);
    align-items: stretch;
    justify-items: stretch;
  }
  .screen-col { width: min(calc(100vw - 420px), calc(100dvh - 190px)); min-width: 200px; align-content: start; }
  /* contain: size takes the commander's own content out of the row's height,
     so a long log scrolls inside it instead of making the page taller than the
     screen it sits beside. */
  .commander { height: auto; min-height: 0; contain: size; }
}

/* Overlays. Fixed rather than absolute: an absolute overlay centres itself on
   its parent while sizing itself with vh against the whole viewport, and the
   two disagree on any short screen. */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(7, 7, 16, 0.78);
  backdrop-filter: blur(4px);
}
.modal {
  width: min(560px, 100%);
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 36px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.modal-wide { width: min(900px, 100%); }
.modal-head { flex: 0 0 auto; padding: 14px 18px 8px; display: flex; align-items: center; gap: 12px; }
.modal-head h2 { margin: 0; font-size: 20px; letter-spacing: -0.3px; }
.modal-head .kicker { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.modal-body { flex: 1 1 auto; min-height: 0; padding: 8px 18px 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.btn-close {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.btn-close:hover { border-color: var(--accent); }

/* The gallery */
.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ex-card {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ex-card:hover { border-color: var(--accent); }
.ex-card:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.ex-thumb { width: 100%; aspect-ratio: 1 / 1; display: block; border-radius: 8px; background-color: #000; }
.ex-title { font-weight: 700; font-size: 14.5px; margin-top: 4px; }
.ex-note { font-size: 12.5px; line-height: 1.4; color: var(--muted); }

/* The reference */
.ref-tools { flex: 0 0 auto; padding: 0 18px 8px; }
.ref-tools input {
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  outline: none;
}
.ref-tools input:focus { border-color: var(--amber); }
.ref-basics { margin: 4px 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.ref-basics h3 { margin: 0 0 6px; font-size: 14px; }
.ref-basics p { margin: 0 0 8px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.ref-basics p:last-child { margin-bottom: 0; }
.ref-basics code, .rules code { font: 13px var(--mono); color: var(--text); background: rgba(127, 127, 160, 0.16); padding: 1px 5px; border-radius: 5px; }
.ref-basics pre, .rules pre {
  margin: 6px 0 10px;
  padding: 10px 12px;
  overflow-x: auto;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  font: 13px/1.5 var(--mono);
  color: var(--text);
  -webkit-user-select: text;
  user-select: text;
}
.ref-group h3 { margin: 18px 0 6px; font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); }
.ref-row { padding: 9px 0; border-top: 1px solid var(--line); }
.ref-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ref-name { font: 700 15px var(--mono); color: var(--accent); }
.ref-in { font: 13.5px var(--mono); color: var(--teal); }
.ref-alias { font-size: 12.5px; color: var(--muted); }
.ref-what { margin: 3px 0 5px; font-size: 14px; line-height: 1.5; color: var(--text); }
.ref-try {
  max-width: 100%;
  min-height: 32px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: 12.5px "Segoe UI", system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.ref-try code { font: 12.5px var(--mono); color: var(--text); background: none; padding: 0; }
.ref-try:hover { border-color: var(--accent); color: var(--text); }
.ref-none { margin: 20px 0; color: var(--muted); }

.btn { padding: 10px 18px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: inherit; font-size: 14.5px; cursor: pointer; }

kbd {
  display: inline-block;
  min-width: 26px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  text-align: center;
}

/* The mode picker */
.segmented {
  display: flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
}
.segmented button {
  flex: 1 1 0;
  min-height: 34px;
  padding: 6px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.segmented button.is-on { background: var(--accent); color: #fff; font-weight: 600; }

/* Input specific guides. The gate needs !important: the elements carry layout
   rules of their own, and a plain attribute selector loses that fight
   silently, showing both guides at once. */
.keys[data-input="touch"] { display: none !important; }
body.has-touch .keys[data-input="key"] { display: none !important; }
body.has-touch .keys[data-input="touch"] { display: block !important; }

/* The text under the screen */
.rules {
  width: 100%;
  max-width: 760px;
  margin: 14px auto 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.rules h2 { margin: 18px 0 6px; font-size: 14px; letter-spacing: 0.6px; text-transform: uppercase; }
.rules h2:first-child { margin-top: 0; }
.rules p { margin: 0 0 10px; }
.rules ul { margin: 0 0 10px; padding-left: 20px; }
.rules li { margin-bottom: 4px; }

/* Footer */
.foot { margin-top: auto; color: var(--muted); font-size: 12.5px; line-height: 1.7; }
.foot p { margin: 4px 0; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--text); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* A short landscape screen has no room for prose under the screen. */
@media (max-height: 520px) {
  .foot { display: none; }
  .shell { padding: 8px 10px 10px; gap: 8px; }
  .hud { padding: 4px 8px; }
  .screen-col { width: min(calc(100vw - 420px), calc(100dvh - 150px)); }
}

@media (max-width: 760px) {
  .hud { padding: 6px 10px; gap: 8px; flex-wrap: nowrap; }
  .hud-btn { padding: 6px 10px; }
  .hud-stats { display: none; }
  .hud-btns { margin-left: auto; }
  .badge { display: block; }
  .rules { margin-top: 18px; }
}

/* A phone: the words and brackets are one row to swipe, not three to scroll past. */
@media (max-width: 760px), (pointer: coarse) {
  .chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
}

/* ===================================================================
   Touch targets. Same block as the other games, gated on a coarse
   pointer so a desktop keeps its compact chrome exactly as it was.
   =================================================================== */
@media (pointer: coarse) {
  .hud-btn, .btn, .tool, .btn-close, .btn-run { min-height: 44px; }
  .segmented button { min-height: 40px; }
  .chip { min-height: 40px; }
  .cmd textarea { min-height: 44px; font-size: 16px; }
  .ref-tools input { font-size: 16px; }
  .ref-try { min-height: 40px; }
  .foot p a { display: inline-block; padding: 8px 0; }
  .foot p { line-height: 2.05; }
}

/* Controls are controls, not text: a thumb held on one must not raise a
   selection or an iOS copy callout. Every game here carries the same list, and
   tools/verify.js fails if one of them loses a line of it. Prose is left out on
   purpose, and so is any text input, which has to stay selectable to be
   usable. */
button, kbd, canvas, summary, label,
.tbtn, .tbtn-stack, .touch, .touch-left, .touch-right, .touch-row, .touch-pad,
.zone, .stick, .bomb-btn, .board, .tiles, .swatches,
.hud, .hud-btn, .hud-btns, .hud-stats, .chips, .topbar, .topbar-actions,
.segmented, .cheats, .more-sheet,
a.hud-back, a.icon-back, a.link-back, a.btn,
[role="button"], [role="radio"], [role="gridcell"], [role="checkbox"], [role="switch"] {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* While a drawing is being watched, the page is the screen. */
body.is-playing .foot { display: none !important; }

/* In fullscreen the game is the only thing on the screen. The two prefixes
   cannot share a rule: one selector a browser does not know invalidates the
   whole list, so they are written out separately. */
:fullscreen .foot { display: none !important; }
:-webkit-full-screen .foot { display: none !important; }

/* ===================================================================
   The way out is one icon button, the same in every game.
   It stays a link, not a button, so middle click and open in a new tab
   behave. The label is still in the markup for a screen reader and as
   the tooltip.
   =================================================================== */
.icon-back {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  opacity: 0.82;
  text-decoration: none;
}
.icon-back:hover { opacity: 1; background: rgba(255, 255, 255, 0.10); }
.icon-back:active { background: rgba(255, 255, 255, 0.16); }
.icon-back svg { display: block; }
.icon-back::before, .icon-back::after { content: none !important; }
.icon-back .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
@media (pointer: coarse) {
  .icon-back { width: 44px; height: 44px; padding: 0; margin: 0; }
}

/* ===================================================================
   The way out, in every panel that covers the game. `has-back` lays the
   header out as a row: the icon, the title block taking the room, then
   anything the header already carried on its right, such as a close button.
   =================================================================== */
.has-back {
  display: flex !important;
  align-items: center;
  gap: 12px;
}
.has-back > .panel-back { flex: 0 0 auto; }
.has-back > h1, .has-back > h2, .has-back > div { flex: 1 1 auto; min-width: 0; margin: 0; }
.has-back > .head-text > .kicker { margin-bottom: 2px; }

/* The panel has to fit the screen that is actually visible: `100vh` counts the
   strip behind a phone's browser toolbar, `dvh` does not. */
@media (pointer: coarse) {
  .overlay {
    height: 100vh;
    height: 100dvh;
    bottom: auto;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  }
  .modal {
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px - env(safe-area-inset-bottom));
  }
}

@keyframes cardIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.overlay:not([hidden]) .modal { animation: cardIn 0.22s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .overlay:not([hidden]) .modal { animation: none; }
}

/* A phone has no use for a Fullscreen button, and it was what pushed the top
   bar onto a second row. */
body.has-touch #btnFull { display: none; }

/* THEME START - generated by tools/gen-theme.js, do not edit here */
/* Light theme. Every game was drawn dark first, and every one of them names
   its colours through the same handful of variables, so the light theme is
   mostly those variables redefined. What follows the variables are the few
   surfaces that carry a colour of their own. A game's own light fixes sit
   below the END marker, in that game's stylesheet. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f4f8;
  --panel: #ffffff;
  --panel-2: #eceef6;
  --line: #d6d8e6;
  --text: #1c1c2b;
  --muted: #585a74;
  --accent: #4a4ae8;
  --amber: #b86a00;
  --teal: #0b8a80;
  --saffron: #c25f00;
  --green: #17864a;
  --red: #c42b2b;
  --rose: #c9365a;
}
:root[data-theme="light"] body { background: var(--bg); color: var(--text); }
:root[data-theme="light"] .topbar,
:root[data-theme="light"] .hud { background: rgba(255, 255, 255, 0.94); }
:root[data-theme="light"] .hud-btn[aria-pressed="true"] { color: #b3261e; border-color: rgba(179, 38, 30, 0.35); }
:root[data-theme="light"] .overlay { background: rgba(28, 28, 43, 0.45); }
:root[data-theme="light"] .modal,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .intro-card,
:root[data-theme="light"] .done-card { background: var(--panel); box-shadow: 0 18px 50px rgba(28, 28, 60, 0.14); }
:root[data-theme="light"] .btn-primary { color: #fff; }
:root[data-theme="light"] kbd { background: var(--panel-2); color: var(--text); border-color: var(--line); }
:root[data-theme="light"] .beta { background: #fff4e5; border-color: #f0c48a; color: #5c3a0b; }
:root[data-theme="light"] .beta a { color: #8a4b00; }
:root[data-theme="light"] .feedback.is-right { color: #146b3a; }
:root[data-theme="light"] .feedback.is-wrong { color: #a4231f; }
:root[data-theme="light"] .foot-bar a,
:root[data-theme="light"] .cross a { color: #0b7a71; }
:root[data-theme="light"] .foot-steps a.is-here .step-n { color: #fff; }

/* The toggle itself: a sun in the dark, a moon in the light, so it always
   shows what pressing it will do - the icon alone says that, so the label
   is announced to a screen reader (title/aria-label, set in the script
   below) rather than spelled out next to it on every single page. */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.theme-toggle svg { width: 16px; height: 16px; flex: 0 0 auto; }
.theme-toggle .ico-moon { display: none; }
:root[data-theme="light"] .theme-toggle .ico-sun { display: none; }
:root[data-theme="light"] .theme-toggle .ico-moon { display: inline; }
.theme-toggle .theme-label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The Play button. Every game's way into play is the same button: the widest,
   tallest thing on its start screen, with a play triangle, so nobody has to
   work out which of the options starts the game. It lives in this block
   because this block already goes into every game. */
.btn-play:not([hidden]) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 54px !important;
  font-size: 17px !important;
  font-weight: 700;
  letter-spacing: 0.2px;
  box-shadow: 0 8px 22px rgba(74, 74, 232, 0.35);
}
/* On a Sanskrit start screen it is the whole width of the card. */
.intro-card .btn-play:not([hidden]) { display: flex !important; width: 100%; margin-top: 6px; }
.btn-play::before {
  content: "";
  width: 14px;
  height: 16px;
  flex: 0 0 auto;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.btn-play:focus-visible { outline: 3px solid #ffd166; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .btn-play { animation: btn-play-glow 2.4s ease-in-out infinite; }
  .btn-play:hover, .btn-play:focus-visible { animation: none; }
}
@keyframes btn-play-glow {
  0%, 100% { box-shadow: 0 8px 22px rgba(74, 74, 232, 0.35); }
  50% { box-shadow: 0 8px 30px rgba(74, 74, 232, 0.6); }
}
/* THEME END */

/* ===================================================================
   SHORT SCREENS (a phone on its side)
   Written after the touch target block so it wins at equal weight. There is
   no room for the row of words and brackets, the buttons go back to a size
   that fits, and the tools sit on two rows beside a smaller screen.
   =================================================================== */
@media (max-height: 520px) {
  .hud-btn, .tool, .btn-close, .btn-run { min-height: 34px; }
  .segmented button { min-height: 32px; }
  .icon-back { width: 36px; height: 36px; }
  .chips { display: none; }
  .tools { gap: 6px; }
  .tools .segmented { flex: 1 1 100%; max-width: none; }
  .cmd textarea { min-height: 36px; font-size: 15px; }
  .screen-col { width: min(calc(100vw - 420px), calc(100dvh - 160px)); }
}

/* CHALLENGES, SHARING AND THE EDITOR (22/10/2026) */
.challenge-bar { align-items: center; padding: 8px 10px; border: 1px solid var(--accent); border-radius: 10px; background: var(--panel); }
.ch-goal { flex: 1 1 100%; font-size: 13.5px; line-height: 1.4; color: var(--text); }
.ch-list { display: grid; gap: 8px; }
.ch-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ch-item:hover { border-color: var(--accent); }
.ch-item b { display: block; font-size: 15px; }
.ch-item span { display: block; font-size: 13px; color: var(--muted); }
.ch-item .ch-done { margin-left: auto; flex: 0 0 auto; padding: 2px 10px; border-radius: 999px; background: var(--teal); color: #06201d; font-size: 12px; font-weight: 700; }

/* COLOURED COMMAND LINE WITH LINE NUMBERS AND THE STEP BAR (22/10/2026)
   A transparent textarea sits over a pre that draws the same text in colour.
   Both use one font, padding and no wrapping, so every character lines up. */
.cmd-box { position: relative; flex: 1 1 auto; min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); overflow: hidden; }
.cmd-box:focus-within { border-color: var(--amber); }
.cmd-box textarea, .cmd-box pre {
  display: block; margin: 0; width: 100%; padding: 7px 8px; border: 0; border-radius: 0;
  font: 15px/1.45 var(--mono); white-space: pre; tab-size: 2;
}
.cmd-box textarea { position: relative; z-index: 1; background: transparent; color: transparent; caret-color: var(--text); overflow: auto; }
.cmd-box textarea::selection { background: rgba(88, 88, 253, 0.4); color: transparent; }
.cmd-box textarea::placeholder { color: var(--muted); }
.cmd-box pre.hl { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; color: var(--text); pointer-events: none; }
.cmd-box pre.gut { position: absolute; left: 0; top: 0; bottom: 0; width: 3.4ch; padding-left: 4px; padding-right: 4px; overflow: hidden; display: none; color: var(--muted); text-align: right; box-sizing: content-box; border-right: 1px solid var(--line); }
.cmd-box.has-gut pre.gut { display: block; }
.cmd-box.has-gut textarea, .cmd-box.has-gut pre.hl { padding-left: calc(3.4ch + 17px); }
.hl i { font-style: normal; }
.hl .hk { color: var(--accent); font-weight: 700; }
.hl .hb { color: var(--teal); }
.hl .hv { color: #b48cff; }
.hl .hs { color: var(--amber); }
.hl .hn { color: var(--rose); }
.hl .hc { color: var(--muted); font-style: italic; }
.hl .hp { color: var(--muted); }
@media (pointer: coarse) { .cmd-box textarea, .cmd-box pre { font-size: 16px; } }
.dbg-vars { font: 12.5px var(--mono); color: var(--muted); }

/* A double tap must never zoom the page: manipulation allows scrolling and
   pinching but not the double tap zoom. On html it covers every element. */
html { touch-action: manipulation; }