/* Local PyJun art direction. The teaching controls are shared by all 11 stations. */
:root {
  --bg: #fffaf5;
  --paper: #fffdf9;
  --ink: #291b13;
  --muted: #725b4e;
  --border: #ead8c9;
  --orange: #f46625;
  --code: #291d17;
  --code-text: #f5e6d6;
}
body { border-top: 5px solid var(--orange); }
.site-header { height: 81px; border-color: var(--border); }
.brand { gap: 14px; }
.brand-wordmark { font: 900 29px/1.2 "Arial Black", "Segoe UI", sans-serif; letter-spacing: -2px; }
.brand-wordmark > span { display: inline-block; padding: 0 3px; color: var(--orange); font-size: 35px; }
.brand small { margin: 3px 0 0; padding-left: 14px; border-left: 1px solid var(--border); font: 700 9px/2 Consolas, monospace; letter-spacing: 1.5px; }
.header-links { color: #725b4e; font-weight: 600; }
.offline-badge { background: #f3ecdf; color: #736245; }
.eyebrow { color: #c44c14; font-family: Consolas, monospace; letter-spacing: 1.25px; }
h1, h2 { font-family: "Arial Black", "Segoe UI", sans-serif; font-weight: 900; }
.catalogue-intro { position: relative; isolation: isolate; padding: 44px 0 42px; gap: 20px; min-height: 370px; }
.catalogue-intro::before { content: ""; position: absolute; z-index: -1; inset: 0 -44px; background: radial-gradient(circle at 10% 18%, #ffe2c777, transparent 52%), radial-gradient(circle at 85% 60%, #ffdbb766, transparent 36%), radial-gradient(#edbd972e .85px, transparent .85px); background-size: auto, auto, 22px 22px; }
.catalogue-intro h1 { font-size: clamp(36px, 3.8vw, 53px); letter-spacing: -2px; }
.intro-text, .game-summary, .topic-card p, .catalogue-note p, .task-goal { color: #725b4e; }
.hero-robot { display: block; position: relative; width: 345px; height: 306px; flex-shrink: 0; margin: 0; transform: none; }
.hero-orbit { position: absolute; width: 270px; height: 270px; left: 42px; top: 7px; border: 1px solid #e7b78b88; border-radius: 50%; background: radial-gradient(circle at 34% 20%, #fffaf399, #f5b86c22); box-shadow: 0 15px 65px #f4943220; }
#hero-robot-art { position: absolute; inset: 4px 0 15px; }
#hero-robot-art svg { width: 100%; height: 100%; overflow: visible; }
.hero-bubble { top: 4px; left: auto; right: -4px; color: #9e481d; border: 1px solid #ecc19f; background: #fffaf3; box-shadow: 0 5px 15px #a6652020; font-size: 11px; transform: rotate(3deg); }
.hero-caption { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; color: #a3653c; font: 700 9px Consolas, monospace; letter-spacing: 2px; }
.hero-robot .robot-sprite { animation: robot-bob 5.5s ease-in-out infinite; }
.catalogue-caption { padding-top: 24px; }
.catalogue-caption h2 { font-size: 19px; letter-spacing: -.5px; }
.topic-card { background: linear-gradient(145deg, #fffefa, #fff8f0); border-color: var(--border); box-shadow: 0 4px 14px #633a1510; }
.topic-card:hover { border-color: #f19d63; box-shadow: 0 9px 24px #b05c1820; }
.topic-icon { background: #fff0de; border: 1px solid #f2d6bb; color: #d55a1d; box-shadow: inset 0 1px #fff; }
.topic-number { color: #ab8c77; }
.topic-card h3 { color: var(--ink); }
.topic-card-bottom { color: #a8552a; }
.catalogue-note { border-color: #ddc6b0; background: #fff4e7; }
.catalogue-note > span { color: var(--orange); }
.back-link, .topic-navigation, footer { color: #82624c; }
.game-heading h1 { letter-spacing: -1.1px; }
.mode-switch, .task-tabs { border-color: #e5cdb7; background: #f0e6d9; }
.mode-switch button, .task-tabs button { color: #856951; }
.mode-switch button.selected, .task-tabs button.selected { color: #c64a13; background: #fffaf4; box-shadow: 0 2px 7px #67351912; }
.scene-card { border-color: #d7b99c; background: #f6e4cc; box-shadow: 0 10px 30px #79522513; }
.scene-bar { background: #f6ebdb; color: #87572f; border-bottom: 1px solid #dfc5a9; font-family: Consolas, monospace; }
.scene-bar i { background: #f46625; box-shadow: 0 0 0 3px #f4662515; }
.scene-bar span:last-child { color: #8c6b51; }
.stage { aspect-ratio: 900 / 620; }
.scene-description { color: #765a41; background: #fcf3e6; border-color: #ddc8af; }
.robot-sprite { transform-origin: 0 169px; }
.is-running .robot-sprite { animation: robot-bob 1.7s ease-in-out infinite; }
.robot[data-mood="done"] .robot-sprite { transform: translateY(-3px); }
.robot[data-mood="error"] .robot-sprite { transform: rotate(-2deg); }
.controls, .practice { background: #fffdf8; border-color: var(--border); box-shadow: 0 5px 16px #63411d07; }
.primary { background: linear-gradient(110deg, #ff922d, #f2571b); color: #fff; box-shadow: 0 4px 12px #ed63201f; }
.primary:hover { background: linear-gradient(110deg, #f9821b, #d94911); }
.secondary { background: #fff8ee; border-color: #e6cdb4; color: #825334; }
.secondary:hover { background: #ffedda; }
.quiet { color: #826a56; }
.progress-track { background: #f3e7d7; }
.progress-track span { background: linear-gradient(90deg, #ffaf52, #f46625); }
.action-note { color: #725b4e; }
.action-note.error { color: #b04529; }
.code-card { background: #291d17; border-color: #594133; box-shadow: 0 10px 28px #54321914; }
.code-header { color: #e1c3a3; border-color: #ffffff10; }
.code-header span:last-child, .code-hint { color: #ba997f; }
.code-line.active { background: #f49d4120; border-color: #ff9a44; }
.code-line.pending { background: #78a48320; }
.line-number { color: #a18672; }
.code-line code { color: #f2e6d8; }
.code-line .keyword { color: #deb0e8; }
.code-line .function { color: #ffd58c; }
.code-line .number { color: #ffa472; }
.code-line .string { color: #b4d9aa; }
.code-bottom { background: #231911; }
.panel-label { color: #bc9675; }
.code-bottom dt { color: #ffc987; }
.code-bottom dd, .output-panel pre { color: #e4d8bb; }
.value-type { color: #b3ad8e; }
.code-help { background: #39302c; border-color: #7c6154; }
.code-help p { color: #d3c4bc; }
.code-help h2 { color: #fff0e3; }
.code-help > div:first-child, .code-help .quiet { color: #d6b6a1; }
.code-help #help-context { color: #ffd090; }
.help-terms button { background: #2a211d; border-color: #705546; color: #e9cbb5; }
.code-line.inspected { background: #e7c2a51b; box-shadow: inset 0 0 0 1px #e7c2a542; }
.is-learn .code-card { border-color: #ba8b66; }
.field label, .repair-field label { color: #795337; }
.field input, .field select, .repair-field select { color: #624935; background: #fffdf8; border-color: #e1cbb5; }
.task-result { color: #527044; }
.question-panel > p { color: #825c3d; }
.question-heading h2 { color: #57351e; }
.question-heading > span:last-child { color: #92613e; }
.answer-buttons button { color: #795135; }
@keyframes robot-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px) rotate(-2deg); } }
@media (max-width: 1100px) {
  .hero-robot { width: 285px; height: 265px; }
  .hero-orbit { width: 230px; height: 230px; left: 32px; }
  .hero-bubble { right: -7px; font-size: 10px; padding: 10px 12px; }
  .catalogue-intro h1 { font-size: 39px; }
}
@media (max-width: 900px) {
  .catalogue-intro::before { inset-inline: -25px; }
  .catalogue-intro { gap: 10px; }
  .hero-robot { width: 225px; height: 238px; }
  .hero-orbit { width: 190px; height: 190px; left: 25px; top: 20px; }
  .hero-bubble { top: 7px; }
  .catalogue-intro h1 { font-size: 35px; }
}
@media (max-width: 700px) {
  .site-header { height: 68px; }
  .brand { gap: 0; }
  .brand-wordmark { font-size: 25px; }
  .brand-wordmark > span { font-size: 30px; }
  .brand small { display: none; }
  .catalogue-intro { display: flex; flex-direction: column; align-items: flex-start; padding: 32px 0 23px; gap: 9px; }
  .catalogue-intro::before { inset-inline: -15px; }
  .catalogue-intro h1 { font-size: 34px; letter-spacing: -1.7px; }
  .hero-robot { align-self: center; width: 250px; height: 225px; }
  .hero-orbit { width: 190px; height: 190px; left: 36px; top: 9px; }
  .hero-bubble { top: 1px; right: -12px; font-size: 9px; }
  .hero-caption { font-size: 8px; }
  .intro-text { margin-top: 17px; }
  .catalogue-caption h2 { font-size: 16px; }
}
@media (max-width: 370px) {
  .catalogue-intro::before { inset-inline: -12px; }
  .catalogue-intro h1 { font-size: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-robot .robot-sprite, .is-running .robot-sprite { animation: none; }
}

/* Slightly larger mode buttons and scene status labels. */
.mode-switch{max-width:100%;flex-wrap:wrap}
.mode-switch button{font-size:14px;line-height:1.4;min-height:44px;padding:10px 12px}
.scene-bar{font-size:12px;min-height:44px;height:auto;padding-block:12px}
.scene-bar span:last-child{font-size:12px;line-height:1.5}

/* Match the playground's readable code size without shrinking on narrow screens. */
.code-header{font-size:14px;min-height:50px;height:auto;padding:15px 18px}
.code-header span:last-child{font-size:11px}
.code-hint{font-size:14px;line-height:1.7}
.code-line{min-height:30px}
.code-line code{font:16px/26px Consolas,"Courier New",monospace}
.line-number{width:36px;padding-right:10px;font-size:12px}
.code-bottom .panel-label{font-size:12px;line-height:1.5;letter-spacing:1px}
.code-bottom dl{font-size:14px;line-height:1.7}
.value-type{font-size:12px}
.output-panel pre{font-size:16px;line-height:1.7}
.code-help>div:first-child,.code-help .quiet{font-size:13px}
.code-help h2{font-size:17px}
.code-help p,.code-help #help-context{font-size:14px;line-height:1.7}
.help-terms button{font-size:14px;min-height:36px;padding:7px 10px}

/* Readable text below the scene at every screen size. */
.scene-description{font-size:14px;line-height:1.7}
.control-buttons{flex-wrap:wrap}
.controls button{font-size:14px;line-height:1.4;min-height:44px}
.controls>label{font-size:13px}
.action-note{font-size:16px;line-height:1.7}
.practice-header{flex-wrap:wrap}
.practice .eyebrow{font-size:11px}
.practice h2{font-size:26px;line-height:1.3}
.task-tabs{flex-wrap:wrap;max-width:100%}
.task-tabs button{font-size:14px;line-height:1.4;min-height:44px;padding:12px 14px}
.task-goal{font-size:16px;line-height:1.7}
.field label,.repair-field label{font-size:14px;line-height:1.5}
.field input,.field select,.repair-field select{font-size:16px;min-height:46px;padding:12px}
.repair-field small,.form-footer p{font-size:14px;line-height:1.7}
.form-footer button,.form-footer .primary{font-size:15px;line-height:1.4;min-height:46px;padding:12px 16px}
.task-result{font-size:16px;line-height:1.7;padding:16px}

/* Keep the practice controls readable and touch-friendly on phones. */
@media(max-width:700px){
  .practice{padding:22px 18px}
  .practice .eyebrow{font-size:10px}
  .practice h2{font-size:22px;line-height:1.3}
  .practice-header{gap:18px}
  .task-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:5px}
  .task-tabs button{font-size:14px;line-height:1.4;padding:10px;min-height:48px;white-space:normal}
  .task-goal{font-size:15px;line-height:1.75;margin:20px 0}
  .field label,.repair-field label{display:block;font-size:13px;line-height:1.5;margin-bottom:7px}
  .field input,.field select,.repair-field select{font-size:16px;min-height:46px;padding:12px}
  .repair-field small,.form-footer p{font-size:13px;line-height:1.7}
  .form-footer button,.form-footer .primary{font-size:14px;line-height:1.4;min-height:46px;padding:12px 16px}
  .task-result{font-size:15px;line-height:1.75;padding:16px}
}
@media(max-width:420px){
  .task-tabs{grid-template-columns:1fr}
  .task-tabs button{min-height:44px;text-align:left;padding:11px 14px}
  .parameter-fields{grid-template-columns:1fr;gap:16px}
  .form-footer{display:grid;grid-template-columns:1fr;gap:10px}
  .form-footer button{width:100%}
  .form-footer .quiet{padding-left:16px}
}