/* ───────────────────────── VAC theme (10/29/2026) ─────────────────────────
   One stylesheet layered over the original page: restyles the editor panel, section headers,
   buttons, the level bar and the preview frame. Scoped to #left_col / #page_notification /
   #right_col chrome only — nothing inside #root (the kids' own apps) is touched, so every
   app looks exactly as the student coded it. No ids, handlers or layout logic change.
   To turn it off, delete the <style id="vac-theme"> block. */
:root{
  --vt-bg:#0b1226; --vt-panel:#111a33; --vt-panel2:#16213f; --vt-line:#24325c;
  --vt-text:#e8edff; --vt-mut:#97a3c7; --vt-accent:#6d7cff; --vt-accent2:#8b5cf6;
  --vt-go:#22c55e; --vt-stop:#f43f5e; --vt-sun:#fbbf24;
  --vt-font:"Atkinson Hyperlegible",-apple-system,Segoe UI,Roboto,sans-serif;
}
body{ background:var(--vt-bg) !important; }

/* ── left column ── */
#left_col{ background:var(--vt-panel) !important; font-family:var(--vt-font) !important; border-right:1px solid var(--vt-line); overflow-y:auto; overflow-x:hidden; }
#overall_controls{ display:flex; flex-direction:column; }
#overall_controls > *{ flex-shrink:0; }
#left_col::-webkit-scrollbar{ width:8px } #left_col::-webkit-scrollbar-track{ background:var(--vt-panel) } #left_col::-webkit-scrollbar-thumb{ background:var(--vt-line); border-radius:8px }
#left_col{ scrollbar-color:var(--vt-line) var(--vt-panel); scrollbar-width:thin; }

/* section headers (Coding Controls, Game Controls, HTML Space, Variable Space) */
#left_col h5.divider{
  font-family:var(--vt-font) !important; font-size:12.5px !important; font-weight:700 !important;
  letter-spacing:.08em; text-transform:uppercase; color:var(--vt-mut) !important;
  text-align:left !important; padding:9px 14px 4px !important; margin:0 !important;
  background:transparent !important; display:flex; align-items:center; gap:6px;
}
#left_col h5.divider::before, #left_col h5.divider::after{ display:none !important; content:none !important; }
#left_col h5.divider span{
  font-size:12px; line-height:1; padding:4px 6px; border-radius:7px; cursor:pointer;
  background:var(--vt-panel2); border:1px solid var(--vt-line); filter:grayscale(.2);
}
#left_col h5.divider span:first-of-type{ margin-left:auto; }
#left_col h5.divider span:hover{ border-color:var(--vt-accent); }

/* button rows */
#coding_controls_button_row, #game_controls_button_row{
  background:transparent !important; padding:2px 10px 6px !important; box-sizing:border-box;
  height:auto !important; overflow-y:auto !important;
}
#coding_controls_button_row{ max-height:17vh; }
#game_controls_button_row{ max-height:21vh; }
#coding_controls_button_row::-webkit-scrollbar-track, #game_controls_button_row::-webkit-scrollbar-track{ background:transparent }
#coding_controls_button_row::-webkit-scrollbar, #game_controls_button_row::-webkit-scrollbar{ width:8px }
#coding_controls_button_row::-webkit-scrollbar-thumb, #game_controls_button_row::-webkit-scrollbar-thumb{ background:var(--vt-line); border-radius:8px }

/* every control button / select in the panel */
#left_col button:not(.arr), #left_col select{
  font-family:var(--vt-font) !important; font-size:14px !important; font-weight:700 !important;
  color:var(--vt-text) !important; background:var(--vt-panel2) !important; background-image:none !important;
  border:1px solid var(--vt-line) !important; border-radius:10px !important;
  padding:6px 11px !important; margin:3px 2px !important; height:auto !important; line-height:1.25 !important;
  box-shadow:0 1px 0 rgba(0,0,0,.25); cursor:pointer; transition:transform .06s, border-color .12s, background .12s;
}
#left_col select{ padding-right:24px !important; width:auto !important; min-width:90px; max-width:130px; }
#left_col button:not(.arr):hover, #left_col select:hover{ border-color:var(--vt-accent) !important; background:#1b2850 !important; }
#left_col button:not(.arr):active{ transform:translateY(1px); }

/* the big three get color: PLAY, Start Game, End Game */
#coding_controls_button_row > button:first-of-type{
  background:var(--vt-go) !important; border-color:#16a34a !important; color:#06240f !important;
  font-weight:900 !important; letter-spacing:.04em; padding:6px 16px !important;
}
#coding_controls_button_row > button:first-of-type::before{ content:"▶ "; }
#left_col button[onclick*="start_game"]{ background:var(--vt-go) !important; border-color:#16a34a !important; color:#06240f !important; }
#left_col button[onclick*="end_game"]{ background:var(--vt-stop) !important; border-color:#e11d48 !important; color:#fff !important; }
#move_mode_button{ min-width:40px; }

/* code editors */
#htmlcodeeditorholder, #vardeclarationeditorholder{ margin:0 10px; border-radius:12px; overflow:hidden; border:1px solid var(--vt-line); }
#htmlcodeeditor, #vardeclarationeditor{ background-color:#0d1530 !important; }
#left_col .ace_gutter{ background:#0f1936 !important; color:#5d6a95 !important; }
#left_col .ace_scroller{ background:#0d1530 !important; }

/* start-game notice */
#start_game_notification{ font-family:var(--vt-font) !important; border-radius:10px; margin:6px 10px; }

/* ── kids mode (littlekidsmode=true): app name card + big picture tiles ── */
#left_col > h1{
  font-family:var(--vt-font) !important; font-size:22px !important; font-weight:900; color:var(--vt-text) !important;
  margin:14px 14px 2px !important; line-height:1.25;
}
#left_col > p{ font-family:var(--vt-font) !important; color:var(--vt-mut) !important; font-size:13px !important; margin:0 14px 12px !important; }
#left_col > button:not(.arr){
  width:calc(50% - 22px) !important; height:15% !important; margin:6px 0 6px 14px !important;
  font-size:17px !important; font-weight:700 !important; border-radius:16px !important;
  color:#fff !important; border:0 !important; box-shadow:0 4px 0 rgba(0,0,0,.28) !important;
  vertical-align:top; white-space:normal;
}
#left_col > button:nth-of-type(1){ background:var(--vt-sun) !important; color:#3b2600 !important; font-size:26px !important; }
#left_col > button:nth-of-type(2){ background:#0ea5e9 !important; }
#left_col > button:nth-of-type(3){ background:#a855f7 !important; }
#left_col > button:nth-of-type(4){ background:#ec4899 !important; }
#left_col > button:nth-of-type(5){ background:#f97316 !important; }
#left_col > button:nth-of-type(6){ background:#14b8a6 !important; }
#left_col > button[onclick*="start_game"]{ background:var(--vt-go) !important; color:#06240f !important; }
#left_col > button[onclick*="end_game"]{ background:var(--vt-stop) !important; }
#left_col > button:not(.arr):hover{ filter:brightness(1.08); transform:translateY(-1px); }
#left_col > button:not(.arr):active{ transform:translateY(2px); box-shadow:0 2px 0 rgba(0,0,0,.28) !important; }

/* on-screen arrow pad (Controls) */
#game_controls{ font-family:var(--vt-font); padding:10px; }
#game_controls .arr{ border-radius:14px; background:var(--vt-panel2); border-color:var(--vt-line) !important; color:var(--vt-text); }

/* ── right column: level bar + preview frame ── */
/* (no font change on #right_col: #root inherits it, and kids' apps must keep the original Montserrat) */
#right_col{ background:var(--vt-bg) !important; }
#page_notification{
  background:var(--vt-panel) !important; color:var(--vt-text) !important; font-family:var(--vt-font) !important;
  font-size:16px !important; font-weight:800; letter-spacing:.02em; line-height:40px; min-height:40px;
  border-bottom:1px solid var(--vt-line); position:relative;
}
#page_notification > p{
  top:7px; margin:0 !important; padding:0 12px !important; line-height:24px; height:26px;
  font-size:11px !important; font-weight:800; letter-spacing:.06em;
  color:var(--vt-text) !important; background:var(--vt-panel2); border:1px solid var(--vt-line) !important;
  border-radius:999px !important; cursor:pointer;
}
#page_notification > p:hover{ border-color:var(--vt-accent) !important; }
#page_notification > p img, #page_notification > p image{ display:none; }
#page_notification > p:first-child::before{ content:"◀ "; }
#page_notification > p:last-of-type::after{ content:" ▶"; }
#leave_full_screen{ background:var(--vt-stop) !important; border-color:var(--vt-stop) !important; }
#leave_full_screen::before, #leave_full_screen::after{ content:none !important; }
#drag_mode_notification{ background:var(--vt-accent) !important; font-family:var(--vt-font); font-weight:800; z-index:5; }
#drag_mode_notification p{ margin:6px 0 !important; }

/* the preview canvas keeps its size and contents; only its frame changes */
#root{ border:0 !important; border-radius:0 0 14px 14px !important; box-shadow:0 10px 40px rgba(0,0,0,.45); }

/* readable code: the editors use Atkinson Hyperlegible Mono (set on the Ace editor by vac_teach.js too) */
#left_col .ace_editor{ font-family:"Atkinson Hyperlegible Mono",ui-monospace,Menlo,Consolas,monospace !important; }

/* 10/30/2026: the code boxes fill the panel instead of fixed heights (no empty gap at the bottom). HTML Space takes
   all spare room; Variable Space keeps its size. The ↕️ buttons still work (their height becomes the starting size). */
#left_col{ display:flex !important; flex-direction:column; }
#left_col > *{ flex-shrink:0; }
#overall_controls{ flex:1 1 auto !important; height:auto !important; min-height:0; }
#coding_controls{ flex:1 1 auto !important; display:flex; flex-direction:column; min-height:280px; padding-bottom:4px; }
#coding_controls > h5{ flex:0 0 auto; }
#htmlcodeeditorholder{ flex:1 1 auto; min-height:150px; }
#vardeclarationeditorholder{ flex:0 0 auto; min-height:80px; }
#htmlcodeeditor, #vardeclarationeditor{ height:100% !important; }
#left_col .ace_gutter-cell{ padding-left:6px !important; padding-right:8px !important; }