/* WAIBOT Academy - kid-friendly theme + layout fixes.
   Loaded AFTER styles.css (and after index.html's inline <style>).
   Undo on a page: remove its <link href="kids-academy.css">. */
:root {
  --k-ink:#2B2A5E; --k-soft:#5B5A9A;
  --k-purple:#8E5CF7; --k-green:#2FCB6E; --k-red:#FF5C6C; --k-yellow:#FFC233;
  --k-blue:#3AA6FF; --k-orange:#FF9142;
  --k-font:'Fredoka','Baloo 2','Trebuchet MS','Comic Sans MS',system-ui,sans-serif;
  /* re-point the old variables so every old rule picks up the new palette */
  --primary:#3AA6FF; --primary-dark:#1E86E0;
  --success:#2FCB6E; --success-light:#4EDB89;
  --danger:#FF5C6C; --warning:#FFB020; --purple:#8E5CF7;
  --dark:#2B2A5E; --darker:#221F4D; --light:#F4F1FF;
}

/* ── Page frame: header stays put, content area scrolls (no more cut-off) ── */
html, body {
  height:100% !important; width:100% !important;
  overflow:hidden !important;
}
body {
  font-family:var(--k-font) !important;
  color:var(--k-ink) !important;
  font-size:17px;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.45) 0 6px, transparent 7px),
    radial-gradient(circle at 82% 12%, rgba(255,255,255,.45) 0 9px, transparent 10px),
    radial-gradient(circle at 70% 78%, rgba(255,255,255,.35) 0 7px, transparent 8px),
    radial-gradient(circle at 22% 84%, rgba(255,255,255,.35) 0 10px, transparent 11px),
    linear-gradient(160deg,#7FD3FF 0%,#B79BFF 52%,#FFA8E0 100%) fixed !important;
}
button, input, select, textarea, a { font-family:var(--k-font) !important; }
.app-container { height:100vh !important; height:100dvh !important; overflow:hidden !important; }
.main-content { flex:1 1 auto; min-height:0; overflow-y:auto !important; padding:20px; }
.view { height:auto; }

/* All the old fixed 100vh / fixed-width boxes become fluid */
.sandbox-container, .terminal-container, .training-container, .hub-container {
  height:auto !important; width:100% !important; min-height:0 !important;
  overflow:visible !important; gap:20px; align-items:stretch;
}
.phase-panel, .terminal-center, .terminal-right, .training-right, .terminal-left {
  overflow:visible !important;
}

/* ── Splash + modals ── */
.splash-screen { background:linear-gradient(160deg,#7FD3FF 0%,#B79BFF 52%,#FFA8E0 100%); }
.splash-logo { border-radius:28px; filter:drop-shadow(0 8px 20px rgba(43,42,94,.35)); }
.tagline { background:rgba(255,255,255,.85); color:var(--k-ink); border-radius:24px; font-size:22px; }
.loading { color:#fff; font-size:18px; font-style:normal; font-weight:600; text-shadow:0 2px 6px rgba(43,42,94,.4); }
.modal { background:rgba(43,42,94,.45); }
.modal-content { border-radius:28px; border:5px solid #fff; box-shadow:0 14px 40px rgba(43,42,94,.3); }
.modal-content h2 { color:var(--k-ink); }
.student-list { border:3px solid #D9CCFF; border-radius:20px; background:#FBFAFF; }
.student-item { border-bottom:2px dashed #E8E0FF; border-radius:14px; color:var(--k-ink); }
.student-item:hover { background:#FFF1B8; }
.student-item.selected { background:var(--k-purple); color:#fff; }
.no-students { padding:18px; text-align:center; color:var(--k-soft); }
.form-group label { color:var(--k-ink); }
.form-group input { border:3px solid #D9CCFF; border-radius:16px; padding:12px 14px; color:var(--k-ink); }
.form-group input:focus { border-color:var(--k-purple); box-shadow:0 0 0 4px rgba(142,92,247,.2); }
.student-actions, .form-actions { gap:12px; }

/* ── Chunky buttons ── */
.btn-primary, .btn-secondary, .btn-danger, .console-btn {
  border:none !important; border-radius:999px !important; color:#fff !important;
  font-weight:700; font-size:16px; padding:12px 24px;
  box-shadow:0 5px 0 rgba(43,42,94,.25);
  transition:transform .12s, box-shadow .12s, filter .12s;
}
.btn-primary { background:var(--k-green) !important; }
.btn-secondary { background:var(--k-blue) !important; }
.btn-danger { background:var(--k-red) !important; }
.btn-primary:hover:not(:disabled), .btn-secondary:hover:not(:disabled),
.btn-danger:hover:not(:disabled), .console-btn:hover { transform:translateY(-2px); filter:brightness(1.07); }
.btn-primary:active:not(:disabled), .btn-secondary:active:not(:disabled),
.btn-danger:active:not(:disabled), .console-btn:active { transform:translateY(3px); box-shadow:0 2px 0 rgba(43,42,94,.25); }
.btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled { background:#C9C6E6 !important; box-shadow:none; color:#fff !important; }
.btn-large { padding:14px 28px; font-size:18px; }
.console-btn { background:var(--k-purple) !important; font-size:14px; padding:6px 14px; box-shadow:0 3px 0 rgba(43,42,94,.25); }
.console-toolbar, .toolbar-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.console-toolbar { margin-bottom:8px; justify-content:space-between; }
.console-status { color:var(--k-green); font-weight:700; margin-left:auto; }
.input-prompt { display:flex; gap:8px; align-items:center; margin-top:8px; }
.input-prompt.hidden { display:none; }
.input-label { font-weight:700; }
.console-input { flex:1; padding:8px 12px; border:3px solid #D9CCFF; border-radius:14px; font-size:15px; }

/* ── Header: two tidy rows instead of a squashed one ── */
.app-header {
  background:linear-gradient(135deg,#3AA6FF 0%,#8E5CF7 100%);
  padding:10px 18px; gap:10px 18px; flex-wrap:wrap; box-shadow:0 6px 18px rgba(43,42,94,.25);
  border-bottom:5px solid #fff;
}
.header-left { gap:12px; flex-wrap:wrap; }
.header-left a { white-space:nowrap; border:none !important; border-radius:999px !important;
  background:var(--k-yellow) !important; color:var(--k-ink) !important; padding:8px 16px !important;
  font-size:15px !important; font-weight:700; box-shadow:0 4px 0 rgba(43,42,94,.25); }
.logo { color:#fff; font-size:24px; white-space:nowrap; text-shadow:0 2px 0 rgba(43,42,94,.3); }
.current-student { color:#fff; font-size:16px; font-weight:600; background:rgba(255,255,255,.22);
  padding:4px 12px; border-radius:999px; white-space:nowrap; }
.header-nav { gap:8px; flex-wrap:wrap; flex:1 1 auto; justify-content:center; }
.nav-btn { background:#fff; color:var(--k-ink); border:none; border-radius:999px; font-size:16px; font-weight:700;
  padding:8px 14px; font-size:15px; white-space:nowrap; box-shadow:0 4px 0 rgba(43,42,94,.25); }
.nav-btn:hover { background:#FFF1B8; color:var(--k-ink); }
.nav-btn.active { background:var(--k-yellow); color:var(--k-ink); }
.header-right { gap:14px; }
.score { color:#fff; font-size:18px; white-space:nowrap; text-shadow:0 2px 0 rgba(43,42,94,.3); }
.energy-fill { background:rgba(255,255,255,.4); height:18px; width:90px; }
.header-right { flex:0 0 auto; margin-left:auto; }
.energy-fill div { background:linear-gradient(90deg,var(--k-green),#8BEA6B); }

/* ── Command hub ── */
.hub-container { display:grid !important; grid-template-columns:minmax(220px,300px) 1fr; }
.phase-panel { width:auto; background:#fff; border:4px solid #fff; border-radius:28px;
  box-shadow:0 8px 24px rgba(43,42,94,.18); }
.phase-panel h3 { color:var(--k-ink); }
.phase-item { background:#F1ECFF; color:var(--k-ink); border-radius:18px; font-weight:600; }
.phase-item:hover:not(.locked) { background:#D9CCFF; }
.phase-item.selected { background:var(--k-purple); color:#fff; }
.phase-item.locked { opacity:.6; }
.mission-panel { background:#fff; border:4px solid #fff; border-radius:28px; box-shadow:0 8px 24px rgba(43,42,94,.18); }
.mission-panel h3 { color:var(--k-ink); font-size:22px; }
.completion-status { background:#E3F9EC; color:#1B8F4B; border-radius:999px; }
.mission-list { background:#FBFAFF; border:3px solid #E8E0FF; border-radius:20px; min-height:200px; max-height:50vh; }
.mission-item { border-bottom:2px dashed #E8E0FF; border-radius:14px; color:var(--k-ink); }
.mission-item:hover { background:#FFF1B8; }
.mission-item.selected { background:#C9F2D9; color:#14663A; }
.mission-item.completed { background:#E3F9EC; }
.mission-actions { border-top:3px dashed #E8E0FF; flex-wrap:wrap; }

/* ── Sandbox ── */
.sandbox-container { display:grid !important; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
.editor-panel, .training-left { background:#fff; border:4px solid #fff; border-radius:28px; box-shadow:0 8px 24px rgba(43,42,94,.18); }
.output-panel { background:#fff; border:4px solid #fff; border-radius:28px; box-shadow:0 8px 24px rgba(43,42,94,.18); min-height:0; }
.panel-header h3, .output-panel h3 { color:var(--k-ink); font-size:22px; }
.panel-header p { color:var(--k-soft); font-size:15px; }
.code-editor { border:4px solid #D9CCFF; border-radius:18px; }
#sandbox-editor { height:420px; flex:none; }
.editor-actions, .terminal-actions, .training-actions { flex-wrap:wrap; gap:12px; }
.output-console { background:#F4F1FF; color:var(--k-ink); border:3px solid #D9CCFF; border-radius:18px; min-height:240px; font-family:Consolas,monospace; }
#sandbox-output { min-height:340px; }

/* ── Hack terminal ── */
.terminal-container { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.terminal-left { background:#fff; border:4px solid #fff; border-radius:28px; box-shadow:0 8px 24px rgba(43,42,94,.18); }
.mission-info h3 { color:var(--k-purple); font-size:22px; }
#terminal-editor { height:380px; flex:none; min-height:0; }
.terminal-right-wrapper { min-width:0; gap:16px; }
.terminal-right { width:100% !important; height:auto !important; min-height:260px;
  background:#fff; border:4px solid #fff; border-radius:28px; box-shadow:0 8px 24px rgba(43,42,94,.18);
  gap:14px; align-items:stretch; }
.instructions-box { background:#FFF8DD; color:var(--k-ink); border:3px solid #FFE08A; border-radius:18px;
  font-family:var(--k-font); font-size:16px; font-weight:600; width:50%; height:auto; max-height:320px; }
.waibot-container { width:50%; height:auto; }
.waibot-label { color:var(--k-purple); font-size:20px; }
.waibot-display { width:100%; height:auto; min-height:200px; max-height:320px; aspect-ratio:2/3; background:#EDE7FF; border:4px solid #D9CCFF; border-radius:22px; }
#waibot-video { width:100%; height:100%; object-fit:cover; border-radius:18px; }
.terminal-console-wrapper { background:#fff; border:4px solid #fff; border-radius:28px; box-shadow:0 8px 24px rgba(43,42,94,.18); padding:14px; }
.terminal-output { width:100% !important; min-height:240px; max-height:340px !important; background:#0f141b; border:4px solid #D9CCFF; border-radius:18px; }

/* ── Training ground ── */
.training-container { display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); }
.training-left { min-width:0; }
#training-editor { height:360px; flex:none; max-height:none; }
.training-settings { background:#F4F1FF; border-radius:18px; flex-wrap:wrap; }
.training-settings select { border:3px solid #D9CCFF; border-radius:12px; padding:6px 10px; color:var(--k-ink); }
.training-right { width:auto !important; min-width:0; gap:12px; }
.telemetry-bar { background:#fff; color:var(--k-ink); border-radius:18px; border:3px solid #D9CCFF; flex-wrap:wrap; gap:8px 18px; font-family:var(--k-font); }
.sensor-display { background:#FFE9EC; color:#D63A4D; border-radius:18px; font-size:17px; }
.training-status { background:var(--k-green); border-radius:999px; }
.training-status.running { background:var(--k-orange); }
#simulation-canvas { width:100%; border:4px solid #fff; border-radius:22px; box-shadow:0 8px 24px rgba(43,42,94,.18); background:#fff; }

/* ── Landing page (academy/index.html) ── */
.home-container { height:auto !important; min-height:100vh !important; width:100% !important;
  overflow-y:auto !important; background:transparent !important; color:var(--k-ink) !important;
  justify-content:flex-start !important; padding:76px 20px 30px !important; }
.home-logo { width:130px !important; border-radius:28px; filter:drop-shadow(0 8px 18px rgba(43,42,94,.35)) !important; }
.home-title { font-family:var(--k-font) !important; color:#fff !important; font-size:clamp(2rem,6vw,3.2rem) !important;
  text-shadow:0 4px 0 rgba(43,42,94,.3); letter-spacing:1px !important; }
.home-subtitle, .lang-label { font-family:var(--k-font) !important; color:#fff !important; text-shadow:0 2px 0 rgba(43,42,94,.3); }
.lang-label { font-size:1.35rem !important; font-weight:600; }
.lang-cards { gap:24px !important; }
.lang-card { background:#fff !important; border:5px solid #fff !important; border-radius:32px !important;
  box-shadow:0 10px 28px rgba(43,42,94,.25); width:min(280px,100%) !important; padding:1.8rem 1.6rem !important; }
.lang-card:hover { transform:translateY(-8px) rotate(-1deg) !important; box-shadow:0 16px 34px rgba(43,42,94,.3) !important; }
.lang-card.python { border-color:#BFE3FF !important; }
.lang-card.robotc { border-color:#FFD7B0 !important; }
.lang-icon { font-size:4rem !important; animation:kbob 2.4s ease-in-out infinite; }
.lang-name, .lang-desc, .lang-btn, .home-footer { font-family:var(--k-font) !important; }
.lang-name { font-size:1.8rem !important; }
.lang-card.python .lang-name { color:var(--k-blue) !important; }
.lang-card.robotc .lang-name { color:var(--k-orange) !important; }
.lang-desc { color:var(--k-soft) !important; font-size:1rem !important; }
.lang-btn { border-radius:999px !important; font-size:1.1rem !important; padding:.7rem 1.8rem !important; box-shadow:0 5px 0 rgba(43,42,94,.25); }
.lang-card.python .lang-btn { background:var(--k-blue) !important; }
.lang-card.robotc .lang-btn { background:var(--k-orange) !important; }
.home-footer { color:rgba(255,255,255,.85) !important; }
body > a[href="../index.html"] { background:var(--k-yellow) !important; color:var(--k-ink) !important; border:none !important;
  border-radius:999px !important; font-family:var(--k-font) !important; font-size:16px !important; padding:10px 20px !important;
  box-shadow:0 5px 0 rgba(43,42,94,.25) !important; }
@keyframes kbob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ── Tablet / phone: stack everything ── */
@media (max-width:1000px) {
  .hub-container, .sandbox-container, .terminal-container, .training-container { grid-template-columns:1fr; }
  .main-content { padding:14px; }
  .header-nav { order:3; flex-basis:100%; }
}
@media (max-width:560px) {
  body { font-size:16px; }
  .logo { font-size:20px; }
  .nav-btn { font-size:14px; padding:8px 12px; }
  .terminal-right { flex-direction:column; }
  .instructions-box, .waibot-container { width:100%; }
  .waibot-display { aspect-ratio:auto; height:220px; }
  .header-right { width:100%; justify-content:space-between; }
}
@media (prefers-reduced-motion:reduce) { .lang-icon { animation:none; } * { transition:none !important; } }

/* ── Fluid landing page: scrolls, and everything scales with the screen ── */
html.landing, html.landing body { height:auto !important; min-height:100% !important; overflow-x:hidden !important; overflow-y:auto !important; }
html.landing .home-container { min-height:100vh !important; min-height:100dvh !important; padding:clamp(64px,10vh,84px) clamp(12px,3vw,28px) 28px !important; }
.home-logo { width:clamp(72px,15vh,130px) !important; margin-bottom:clamp(.4rem,1.5vh,1.2rem) !important; }
.home-title { font-size:clamp(1.9rem,5.5vw + .5rem,3.4rem) !important; line-height:1.1; }
.home-subtitle { font-size:clamp(.85rem,1.2vw + .5rem,1.15rem) !important; margin-bottom:clamp(.8rem,3vh,2rem) !important; }
.lang-label { font-size:clamp(1rem,1.5vw + .6rem,1.4rem) !important; margin-bottom:clamp(.8rem,2.5vh,1.4rem) !important; }
.lang-cards { width:100%; max-width:760px; gap:clamp(14px,2.5vw,26px) !important; }
.lang-card { flex:1 1 240px; width:auto !important; max-width:340px; min-width:0; padding:clamp(1rem,3vh,1.8rem) clamp(1rem,2.5vw,1.6rem) !important; }
.lang-icon { font-size:clamp(2.4rem,8vh,4rem) !important; }
.lang-name { font-size:clamp(1.4rem,2.4vw + .6rem,1.8rem) !important; }
.lang-desc { font-size:clamp(.85rem,1vw + .5rem,1rem) !important; }
.home-footer { margin-top:clamp(1rem,4vh,2.5rem) !important; }
/* short landscape screens (phones on their side, small laptops): compact cards */
@media (max-height:560px) {
  .lang-desc { display:none; }
  .lang-card { flex-basis:200px; gap:.4rem !important; }
}
.lang-cards { align-items:stretch; }
.lang-card .lang-btn { margin-top:auto !important; }
html.landing .home-container { padding-top:clamp(78px,11vh,92px) !important; }
@media (max-height:700px) and (min-width:700px) {
  .home-subtitle { display:none; }
  .home-title { font-size:clamp(1.8rem,4vh,2.6rem) !important; }
  .lang-card { padding:.9rem 1.2rem !important; }
  .lang-icon { font-size:2.4rem !important; }
  .home-footer { display:none; }
}