/* A3Tech Robotics - kid-friendly theme for the RobotC and Python game pages.
   Loaded AFTER each page's own <style>. The CODE EDITORS stay dark + monospace on
   purpose (easier to read code); everything around them is bright and friendly.
   To undo on a page: remove its <link href="css/kids-game.css">. */
:root {
  --k-ink:#2B2A5E; --k-soft:#5B5A9A; --k-purple:#8E5CF7; --k-green:#2FCB6E;
  --k-red:#FF5C6C; --k-yellow:#FFC233; --k-blue:#3AA6FF; --k-teal:#1FC8B0;
  --k-font:'Fredoka','Baloo 2','Trebuchet MS','Comic Sans MS',system-ui,sans-serif;
  --k-mono:'Consolas','Courier New',monospace;
}
body {
  font-family: var(--k-font) !important;
  color: var(--k-ink) !important;
  background:
    radial-gradient(circle at 8% 12%, rgba(255,255,255,.4) 0 6px, transparent 7px),
    radial-gradient(circle at 92% 88%, rgba(255,255,255,.4) 0 9px, transparent 10px),
    linear-gradient(160deg, #7FD3FF 0%, #B79BFF 52%, #FFA8E0 100%) fixed !important;
}
button, input, select, a, label { font-family: var(--k-font) !important; }
/* keep code monospace */
#monaco-container, #monaco-container *, #code-editor, #code-highlight, #editor-inner, #print-output, #print-output *,
pre, code, .lb-row { font-family: var(--k-mono) !important; }
#app { padding: 12px !important; gap: 12px !important; }

/* ── panels ── */
#editor-container, #output-container, #print-container {
  border: 4px solid var(--k-purple) !important; border-radius: 22px !important;
  box-shadow: 0 7px 0 rgba(43,42,94,.2);
}
#editor-label, #output-label, .panel-label {
  background: linear-gradient(90deg, var(--k-purple), #B07CFF) !important;
  color: #fff !important; font-size: 15px !important; font-weight: 600; letter-spacing: 0 !important;
  padding: 8px 14px !important; border-bottom: none !important;
}
#editor-label a, #clear-output-btn {
  color: #fff !important; background: rgba(255,255,255,.22) !important; border: none !important;
  border-radius: 999px !important; font-size: 13px !important; padding: 4px 12px !important;
}
#editor-label a:hover, #clear-output-btn:hover { background: rgba(255,255,255,.4) !important; color: #fff !important; }
#arena-container { border: 4px solid var(--k-blue) !important; border-radius: 22px !important; box-shadow: 0 7px 0 rgba(43,42,94,.2); }

/* ── level buttons ── */
#level-selector { background: rgba(255,255,255,.9) !important; border: 4px solid var(--k-yellow) !important; border-radius: 20px !important; padding: 8px 12px !important; box-shadow: 0 5px 0 rgba(43,42,94,.18); }
#level-selector, #level-selector * { color: var(--k-ink); }
.level-buttons { gap: 8px !important; flex-wrap: wrap; }
.level-btn {
  background: #fff !important; color: var(--k-ink) !important; border: 3px solid #CDBBFF !important;
  border-radius: 999px !important; font-size: 15px !important; font-weight: 700; padding: 6px 14px !important;
  box-shadow: 0 4px 0 rgba(43,42,94,.18);
}
.level-btn:hover { background: #F4F0FF !important; transform: translateY(-2px); }
.level-btn.active { background: var(--k-green) !important; color: #fff !important; border-color: #1FA553 !important; }
.level-btn.completed { background: #D8F8E6 !important; color: #178A47 !important; border-color: var(--k-green) !important; }
.level-btn.comp-locked { background: #FFE9EC !important; color: #C21F33 !important; }

/* ── telemetry + timers ── */
#telemetry { background: rgba(255,255,255,.92) !important; border-radius: 16px !important; padding: 8px 12px !important; font-size: 14px !important; border: 3px solid #CDBBFF; }
.tele-item { color: var(--k-ink) !important; }
.tele-item.status { color: #178A47 !important; }
#speed-control { background: rgba(255,255,255,.92) !important; border-radius: 16px !important; padding: 8px 12px !important; font-size: 14px; color: var(--k-ink) !important; border: 3px solid #CDBBFF; }
#speed-control * { color: var(--k-ink) !important; }
#speed-slider { height: 8px !important; accent-color: var(--k-purple); }
#footer-timers { background: rgba(255,255,255,.92) !important; border: 3px solid #CDBBFF !important; border-radius: 16px !important; padding: 8px 14px !important; }
#footer-timers span { color: var(--k-ink) !important; font-size: 15px !important; font-weight: 700; }

/* ── buttons: big, round, chunky ── */
button {
  border-radius: 999px !important; border: none !important; font-size: 15px !important; font-weight: 700 !important;
  padding: 10px 14px !important; color: #fff !important; box-shadow: 0 5px 0 rgba(0,0,0,.22);
  transition: transform .12s, box-shadow .12s, filter .12s !important;
}
button:hover:not(:disabled) { transform: translateY(-2px) scale(1.03); filter: brightness(1.08); }
button:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,.22); }
button:disabled { background: #B8B7D9 !important; color: #fff !important; box-shadow: none !important; opacity: .7 !important; }
.btn-run { background: var(--k-purple) !important; font-size: 18px !important; padding: 12px 14px !important; }
.btn-reset { background: var(--k-red) !important; font-size: 18px !important; padding: 12px 14px !important; }
.btn-leaderboard { background: var(--k-yellow) !important; color: var(--k-ink) !important; }
.btn-challenge { background: var(--k-teal) !important; color: #fff !important; }
.btn-run:hover:not(:disabled), .btn-reset:hover:not(:disabled), .btn-leaderboard:hover:not(:disabled), .btn-challenge:hover:not(:disabled) { color: #fff !important; }
.btn-leaderboard:hover:not(:disabled) { color: var(--k-ink) !important; }
#controls { gap: 8px !important; } .control-row { gap: 10px !important; }

/* ── start overlay ── */
#start-overlay { background: rgba(92,60,190,.82) !important; backdrop-filter: blur(3px); }
#start-overlay h2 { color: #fff !important; font-size: 40px !important; text-shadow: 0 4px 0 rgba(43,42,94,.4); }
#start-overlay button { background: var(--k-green) !important; font-size: 22px !important; padding: 16px 40px !important; }

/* ── pop-ups (name entry, leaderboard) ── */
.modal { background: rgba(43,42,94,.65) !important; backdrop-filter: blur(3px); }
.modal-content { background: #fff !important; color: var(--k-ink) !important; border: 5px solid var(--k-purple) !important; border-radius: 28px !important; padding: 30px !important; box-shadow: 0 10px 0 rgba(43,42,94,.25); }
.modal-content h2 { color: var(--k-purple) !important; font-size: 28px !important; margin-bottom: 14px !important; }
.modal-content p, .modal-content label { color: var(--k-soft) !important; font-size: 17px !important; }
.modal-content input { background: #F4F0FF !important; color: var(--k-ink) !important; border: 3px solid #CDBBFF !important; border-radius: 16px !important; font-size: 18px !important; padding: 12px 16px !important; font-family: var(--k-font) !important; }
.modal-content input:focus { border-color: var(--k-purple) !important; outline: none; box-shadow: 0 0 0 4px rgba(142,92,247,.2); }
.modal-content button { font-size: 18px !important; padding: 12px 18px !important; background: var(--k-green) !important; width: 100%; }
.modal-content button.btn-close, .modal-content button.close { background: var(--k-ink) !important; }
.leaderboard-table th, .leaderboard-table td { border-bottom: 2px dotted #CDBBFF !important; font-size: 16px !important; color: var(--k-ink); padding: 10px !important; }
.leaderboard-table th { color: var(--k-purple) !important; }
.leaderboard-table tr:hover { background: #F4F0FF !important; }
.level-tab { background: #F4F0FF !important; color: var(--k-ink) !important; border: 3px solid #CDBBFF !important; border-radius: 999px !important; font-size: 15px !important; font-weight: 600; }
.level-tab:hover { background: #E4D9FF !important; }
.level-tab.active { background: var(--k-green) !important; border-color: #1FA553 !important; color: #fff !important; }
.lb-section h3 { color: var(--k-purple) !important; font-size: 18px !important; }
.lb-row { font-size: 15px !important; }
.lb-row.gold { color: #D99A00 !important; font-weight: 700; } .lb-row.silver { color: #7A8794 !important; font-weight: 700; }
.lb-row.bronze { color: #C2671C !important; font-weight: 700; } .lb-row.normal { color: var(--k-soft) !important; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* status text is coloured by the game code (READY / RUNNING / errors...); a dark badge keeps every colour readable */
#status-display { background: var(--k-ink); padding: 2px 12px; border-radius: 999px; font-size: 13px; }

/* Uniform control row: same size buttons, wraps instead of overflowing */
.control-row { flex-wrap: wrap; }
.control-row button { flex: 1 1 120px !important; min-width: 0; white-space: normal; line-height: 1.15; }
.btn-run, .btn-reset { font-size: 16px !important; padding: 12px 10px !important; }
.btn-leaderboard, .btn-challenge { font-size: 14px !important; padding: 12px 10px !important; }
@media (max-width: 900px) { #maze-canvas { max-width: 100%; height: auto; } }

/* Uniform "back to menu" button (overrides Gemini inline red styles) */
a[style*="#E74C3C"][href$="index.html"] { background: #FFC233 !important; color: #2B2A5E !important; border: none !important; border-radius: 999px !important; padding: 8px 16px !important; font-size: 14px !important; font-weight: 700 !important; box-shadow: 0 4px 0 rgba(43,42,94,.25) !important; text-decoration: none !important; }

/* Phones/tablets: stack editor above the arena (python.html had no stacking rule) */
@media (max-width: 900px) {
  html, body { overflow: auto !important; height: auto !important; }
  #app { flex-direction: column !important; height: auto !important; overflow: visible !important; }
  #left-panel, #right-panel { flex: none !important; width: 100% !important; }
  #left-panel { height: 80vh; min-height: 460px; }
  #right-panel { height: auto; }
  #arena-container { flex: none; min-height: 300px; }
  #footer-timers { flex-wrap: wrap; gap: 4px 12px; }
}