/* Liza on the web.
   Every screen is laid out on the device's own 800x480 canvas, in the same
   pixel positions ui.py uses, and the whole stage is scaled to fit the window.
   That is what makes it look like the device rather than "a website like it". */

:root {
  --bg: #F3F5FD;
  --frame: #E1E5F4;
  --card: #FFFFFF;
  --card-edge: #EAEDF8;
  --shadow: #B4BCDD;
  --text: #1E2233;
  --text-dim: #8891A8;
  --text-faint: #B6BDD0;
  --track: #E6E9F5;
  --indigo: #6366F1;
  --stop: #F43F5E;
  --tutor: #7C3AED;
  --cotell: #14B8A6;
  --retell: #F59E0B;
  --navy: #17408B;
  --paper: #FFFDF5;
  --paper-edge: #E7D9B0;
  --paper-rule: #F1E6C8;
  --ink-soft: #5B6B8C;
  --good: #16A34A;
  --miss: #FCA5A5;
  --picked: #FDE68A;
  --card-blue: #C7D2FE;
  --page-bg: #7DC3F5;
  --font: "Noto Sans", "Noto Sans Devanagari", system-ui, sans-serif;
}

/* The page around the stage. Always the garden sky, light or dark mode: the
   device has one look, and the stage fills almost all of the window anyway. */
html, body {
  margin: 0;
  height: 100%;
  background: #0f172a;
  color: var(--text);
  font-family: var(--font);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

#viewport {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #1e293b 0%, #0f172a 75%);
}

#stage {
  position: relative;
  width: 800px;
  height: 480px;
  flex: none;
  overflow: hidden;
  transform-origin: center center;
  background: var(--bg);
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
}

#rotate-hint {
  display: none;
  position: fixed;
  left: 16px; right: 16px; bottom: 24px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.92);
  color: var(--text);
  font: 600 14px var(--font);
  text-align: center;
}
@media (orientation: portrait) and (max-width: 700px) {
  #rotate-hint { display: block; }
}

.screen { position: absolute; inset: 0; }
.abs { position: absolute; }
.bg-garden { background: url(../assets/ui/home/garden.webp) center / cover no-repeat; }
.bg-class { background: url(../assets/ui/kg/class_bg.webp) center / cover no-repeat; }
.tap { cursor: pointer; }
.tap:active { transform: translateY(1px) scale(.985); }
img { -webkit-user-drag: none; user-select: none; }
button { font-family: var(--font); }

/* ---------- toast ---------- */
.toast {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  max-width: 600px;
  padding: 8px 16px;
  border-radius: 14px;
  background: rgba(30,34,51,.9);
  color: #fff;
  font: 600 13px var(--font);
  z-index: 50;
  pointer-events: none;
  transition: opacity .3s;
}

/* ---------- glass screens (profiles, KG) ---------- */
.glass {
  position: absolute;
  left: 20px; top: 20px; right: 20px; bottom: 20px;
  border-radius: 14px;
  background: rgba(255,255,255,.38);
  border: 1px solid rgba(255,255,255,.75);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.title {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font: 700 27px var(--font);
  color: var(--text);
  letter-spacing: .2px;
}
.subtitle {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font: 400 13px var(--font);
  color: var(--text-dim);
}
.pill-btn {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  font: 700 15px var(--font);
  color: var(--text);
  background: #E8EAF6;
  box-shadow: 0 2px 4px rgba(30,34,51,.18);
  cursor: pointer;
  padding: 0;
}
.pill-btn small { font-weight: 400; font-size: 10.5px; opacity: .92; margin-top: 1px; }
.pill-btn.white { background: #fff; }
.pill-btn.navy { background: #00338D; color: #fff; }
.pill-btn:disabled { opacity: .45; cursor: default; }
.pill-btn:active:not(:disabled) { transform: translateY(1px); }

/* ---------- profile picker ---------- */
.who-card {
  position: absolute;
  width: 214px; height: 72px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(30,34,51,.22);
  display: flex;
  align-items: center;
  cursor: pointer;
}
.who-card.current { background: #FAFDCB; }
.who-card img { width: 62px; height: 62px; margin-left: 5px; border-radius: 50%; }
.who-card .who-name { font: 700 18px var(--font); color: var(--tutor); line-height: 1.15; }
.who-card .who-name.kg { color: #F59E0B; }
.who-card .who-class { font: 400 12px var(--font); color: var(--text-dim); }
.who-card .who-text { margin-left: 8px; overflow: hidden; }
.who-card .who-demo {
  position: absolute; right: 8px; top: 6px;
  font: 700 9px var(--font); color: var(--text-dim); letter-spacing: .5px;
}
.who-card .who-edit {
  position: absolute; right: 6px; bottom: 6px;
  border: none; border-radius: 8px; padding: 3px 8px;
  font: 700 11px var(--font); background: #EEF0FA; color: var(--text); cursor: pointer;
}

/* ---------- new student keyboard ---------- */
.name-box {
  position: absolute;
  left: 40px; top: 84px; width: 720px; height: 40px;
  border-radius: 8px;
  background: #fff;
  font: 600 17px var(--font);
  display: flex; align-items: center;
  padding: 0 14px;
  box-sizing: border-box;
  color: var(--text);
}
.name-box.empty { color: #A7B0C8; }
.name-box input {
  border: none; outline: none; background: transparent; width: 100%;
  font: 600 17px var(--font); color: var(--text);
}
.key {
  position: absolute;
  height: 43px;
  border: none;
  border-radius: 5px;
  background: #fff;
  font: 600 15px var(--font);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(30,34,51,.15);
  cursor: pointer;
}
.key.small { font-size: 12.5px; font-weight: 700; }
.key.on { background: #00338D; color: #fff; }
.key.soft { background: #E8EAF6; }
.section-label {
  position: absolute;
  font: 700 11px var(--font);
  color: #1E3A8A;
  letter-spacing: .4px;
}

/* ---------- home ---------- */
.card-img { position: absolute; }
.clock-time { font: 700 19px var(--font); color: var(--text); }
.clock-time small { font-size: 11px; font-weight: 700; margin-left: 2px; }
.clock-line { font: 400 9.5px var(--font); color: #101F31; white-space: nowrap; }
.weather-temp { font: 700 20px var(--font); color: var(--text); }
.weather-line { font: 400 9.5px var(--font); color: #101F31; white-space: nowrap; text-align: center; }

.who-chip-name { font: 700 15px var(--font); color: var(--text); }
.who-chip-class { font: 400 12px var(--font); color: var(--text); }

.music-btn {
  position: absolute; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.music-title { font: 700 11px var(--font); color: var(--text); white-space: nowrap; overflow: hidden; }
.music-track { position: absolute; height: 3px; border-radius: 2px; background: rgba(255,255,255,.85); }
.music-knob { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,.35); }

.state-pill {
  position: absolute;
  top: 96px;
  height: 20px;
  padding: 0 10px;
  border-radius: 4px;
  display: flex; align-items: center;
  font: 700 11px var(--font);
  letter-spacing: .6px;
  text-transform: uppercase;
  background: rgba(255,255,255,.88);
  transform: translateX(-50%);
  white-space: nowrap;
}

.modes-title {
  position: absolute; left: 14px; width: 159px; top: 133px;
  text-align: center;
  font: 800 16px var(--font);
  color: #1E2A55;
  letter-spacing: .3px;
}
.mode-card {
  position: absolute;
  width: 145px; height: 62px;
  border-radius: 9px;
  cursor: pointer;
}
.mode-card img { position: absolute; left: 0; top: 0; width: 145px; height: 62px; }
.mode-card .blurb-cover {
  position: absolute; left: 50px; top: 27px; width: 90px; height: 27px;
  background: #fff;
}
.mode-card .blurb {
  position: absolute; left: 52px; top: 28px;
  font: 400 11.5px var(--font); color: var(--text); white-space: nowrap;
}
.mode-card.on { box-shadow: 0 0 0 3px var(--accent), 0 0 12px var(--accent); }
.mode-card .check {
  position: absolute; right: -6px; top: -7px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff;
  display: none; align-items: center; justify-content: center;
}
.mode-card.on .check { display: flex; }

#mascot { position: absolute; }
.sleep-z {
  position: absolute; font: 800 22px var(--font); color: #8B5CF6;
  animation: zfloat 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes zfloat {
  0% { opacity: 0; transform: translate(0, 10px) scale(.7); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(14px, -26px) scale(1.15); }
}

.board-text {
  position: absolute;
  left: 470px; top: 158px; width: 298px; height: 196px;
  overflow-y: auto;
  scrollbar-width: thin;
  user-select: text; -webkit-user-select: text;
}
.board-label { font: 700 10.5px var(--font); color: var(--tutor); margin-top: 4px; }
.board-label.liza { color: #DB2777; }
.board-line { font: 400 14px/1.45 var(--font); color: #8891A8; margin: 3px 0 8px; white-space: pre-wrap; }
.board-line.user { color: var(--text); }
.board-line.liza { color: var(--text); }
.board-line .lit { background: #FEF3C7; border-radius: 3px; }
.board-status { font: 600 11.5px var(--font); color: var(--retell); margin: 2px 0 6px; }
.board-icon {
  position: absolute; width: 30px; height: 30px;
  border-radius: 7px; border: 1.5px solid #CBD2EA; background: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: #3B3F8F;
}
.board-icon.on { background: #EEF0FF; border-color: var(--indigo); }
.type-row {
  position: absolute; left: 464px; top: 330px; width: 310px; height: 34px;
  display: none; gap: 6px;
}
.type-row.on { display: flex; }
.type-row input {
  flex: 1; border: 1.5px solid #CBD2EA; border-radius: 9px; padding: 0 10px;
  font: 400 13.5px var(--font); outline: none; color: var(--text);
  user-select: text; -webkit-user-select: text;
}
.type-row input:focus { border-color: var(--indigo); }
.type-row button {
  border: none; border-radius: 9px; padding: 0 12px; background: var(--indigo); color: #fff;
  font: 700 12.5px var(--font); cursor: pointer;
}

.report {
  border: 1.5px solid #FCD34D; border-radius: 10px; background: #FFFBEB;
  padding: 8px 10px; margin: 6px 0 10px;
}
.report h4 { margin: 0 0 4px; font: 700 13px var(--font); color: var(--text); display: flex; justify-content: space-between; }
.report .score { color: #B45309; }
.report .row { font: 400 12px/1.4 var(--font); color: var(--text); margin: 2px 0; }
.report .row b { font-weight: 700; }
.report .row.good b { color: var(--good); }
.report .row.weak b { color: #DC2626; }
.report .row.focus b { color: #7C3AED; }

.big-btn { position: absolute; width: 154px; height: 69px; cursor: pointer; }
.big-btn img { width: 100%; height: 100%; }
.big-btn.dim { filter: saturate(.55) brightness(1.05); opacity: .8; }
.big-btn .label-cover { position: absolute; left: 62px; top: 42px; width: 86px; height: 16px; }
.exit-btn { position: absolute; left: 738px; top: 410px; width: 47px; height: 47px; cursor: pointer; }
.exit-confirm {
  position: absolute; right: 60px; top: 418px;
  padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.95);
  font: 600 12px var(--font); color: var(--stop); box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

/* ---------- full-screen overlays on the home screen ---------- */
.overlay {
  position: absolute; inset: 0; z-index: 20;
  background: rgba(243,245,253,.97);
}
.overlay .bar {
  position: absolute; left: 0; right: 0; top: 0; height: 52px;
  display: flex; align-items: center; justify-content: center;
  font: 700 19px var(--font); color: var(--text);
  border-bottom: 1px solid var(--card-edge); background: #fff;
}
.overlay .back {
  position: absolute; left: 12px; top: 9px; height: 34px; padding: 0 14px;
  border: none; border-radius: 9px; background: #E8EAF6; font: 700 13px var(--font);
  color: var(--text); cursor: pointer;
}
.overlay .side {
  position: absolute; right: 12px; top: 9px; height: 34px; padding: 0 14px;
  border: none; border-radius: 9px; background: #FFE4E6; font: 700 12px var(--font);
  color: #BE123C; cursor: pointer;
}
.overlay .scroll {
  position: absolute; left: 0; right: 0; top: 52px; bottom: 0;
  overflow-y: auto; padding: 12px 22px 18px;
  user-select: text; -webkit-user-select: text;
}
.chat-turn { margin: 0 0 10px; max-width: 78%; }
.chat-turn.user { margin-left: auto; text-align: right; }
.chat-turn .bubble {
  display: inline-block; padding: 8px 12px; border-radius: 14px;
  font: 400 14px/1.45 var(--font); text-align: left; white-space: pre-wrap;
}
.chat-turn.user .bubble { background: #E0E7FF; color: var(--text); border-bottom-right-radius: 4px; }
.chat-turn.liza .bubble { background: #fff; color: var(--text); border: 1px solid var(--card-edge); border-bottom-left-radius: 4px; }
.chat-turn .meta { font: 400 10px var(--font); color: var(--text-dim); margin: 2px 4px; }
.empty-note { text-align: center; color: var(--text-dim); font: 400 14px var(--font); margin-top: 60px; }
.prog-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin-bottom: 7px;
  background: #fff; border: 1px solid var(--card-edge); border-radius: 10px;
}
.prog-row .kind { font: 700 10px var(--font); letter-spacing: .5px; color: var(--indigo); text-transform: uppercase; width: 80px; }
.prog-row .topic { flex: 1; font: 600 13.5px var(--font); color: var(--text); }
.prog-row .detail { font: 400 11.5px var(--font); color: var(--text-dim); }
.prog-row .score { font: 700 14px var(--font); color: var(--good); }

/* ---------- KG home ---------- */
.kg-tile { position: absolute; width: 225px; height: 145px; border-radius: 10px; cursor: pointer; }
.kg-tile img { width: 100%; height: 100%; border-radius: 10px; }

/* ---------- the workbook (paper) ---------- */
.paper {
  position: absolute; left: 18px; top: 10px; width: 762px; height: 372px;
  background: var(--paper);
  border-radius: 10px;
  box-shadow: 0 0 0 3px var(--paper-edge), 0 4px 10px rgba(0,0,0,.25);
  background-image: repeating-linear-gradient(to bottom, transparent 0 33px, var(--paper-rule) 33px 34px);
  background-position: 0 72px;
}
.paper .rings { position: absolute; left: 0; right: 0; top: -6px; height: 12px; }
.paper .ring {
  position: absolute; top: 0; width: 11px; height: 11px; border-radius: 50%;
  background: #C9D2E6; border: 1.5px solid #8291B3;
}
.paper-title {
  position: absolute; left: 0; right: 0; top: 10px; text-align: center;
  font: 700 25px var(--font); color: var(--navy);
}
.paper-sub {
  position: absolute; left: 0; right: 0; top: 45px; text-align: center;
  font: 400 12.5px var(--font); color: var(--ink-soft);
}
.paper-rule { position: absolute; left: 12px; right: 12px; top: 64px; height: 2px; background: var(--paper-edge); }
.wb-tile {
  position: absolute; width: 141px; height: 139px; border-radius: 8px;
  color: #fff; cursor: pointer; text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,.18);
}
.wb-tile .disc {
  position: absolute; left: 41px; top: 12px; width: 60px; height: 60px; border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center; font-size: 36px;
}
.wb-tile .t { position: absolute; left: 0; right: 0; top: 84px; font: 700 14px var(--font); }
.wb-tile .s { position: absolute; left: 0; right: 0; top: 110px; font: 400 10.5px var(--font); opacity: .95; }
.paper-btn {
  position: absolute; height: 48px;
  border: none; border-radius: 10px; background: #fff;
  font: 800 15px var(--font); color: #1D4ED8; letter-spacing: .4px;
  box-shadow: 0 2px 5px rgba(0,0,0,.25); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.paper-btn.primary { background: #1E3A8A; color: #fff; }
.paper-btn:disabled { opacity: .5; cursor: default; }
.tri-left { width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 11px solid #1D4ED8; }
.tri-right { width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 11px solid #1D4ED8; }
.answer-btn {
  position: absolute; border: none; border-radius: 6px; background: #2563EB; color: #fff;
  font: 700 30px var(--font); cursor: pointer; box-shadow: 0 2px 3px rgba(0,0,0,.2);
}
.answer-btn.right { background: var(--good); }
.answer-btn.wrong { background: #F87171; }
.box {
  position: absolute; border: 3px solid var(--card-blue); border-radius: 8px; background: #fff;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center;
}
.sym { position: absolute; font: 700 34px var(--font); color: var(--navy); text-align: center; }
.wb-card {
  position: absolute; border: 3px solid var(--card-blue); border-radius: 10px; background: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font: 700 26px var(--font); color: var(--navy);
}
.wb-card.picked { background: var(--picked); border-color: #F59E0B; }
.wb-card.done { background: #DCFCE7; border-color: var(--good); cursor: default; }
.wb-card.miss { background: #FEE2E2; border-color: #F87171; }
.wb-card img { max-width: 80%; max-height: 80%; }
.slot {
  position: absolute; border: 2.5px dashed #A5B4FC; border-radius: 8px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 700 15px var(--font); color: var(--navy);
}
.slot.fixed { border-style: solid; border-color: var(--card-blue); color: var(--ink-soft); }
.slot.filled { border-style: solid; border-color: var(--good); background: #DCFCE7; }
.crayon {
  position: absolute; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.crayon.on { outline: 3px solid var(--navy); outline-offset: 3px; }
#colour-canvas { position: absolute; cursor: crosshair; touch-action: none; }

/* ---------- KG chalkboard activities ---------- */
.chalk-board {
  position: absolute; border-radius: 12px; background: #23523B;
  border: 8px solid #8B5A2B; box-shadow: inset 0 0 30px rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.3);
  color: #FDEBA8; text-align: center;
}
.kg-letter { font: 800 150px/1 var(--font); color: #FDEBA8; }
.kg-word { font: 700 34px var(--font); color: #fff; }
.kg-pic { object-fit: contain; }
.kg-emoji { font-size: 110px; line-height: 1; }
.kg-btn {
  position: absolute; height: 52px; border: none; border-radius: 12px;
  background: #fff; color: var(--navy); font: 800 16px var(--font);
  box-shadow: 0 2px 6px rgba(0,0,0,.25); cursor: pointer;
}
.kg-btn.primary { background: #17408B; color: #fff; }
.kg-btn.green { background: #16A34A; color: #fff; }
.kg-btn.red { background: #DC2626; color: #fff; }
.letter-tile {
  position: absolute; width: 64px; height: 64px; border-radius: 10px; border: none;
  background: #FDE68A; color: var(--navy); font: 800 32px var(--font);
  box-shadow: 0 3px 0 #D97706; cursor: pointer;
}
.letter-tile.used { visibility: hidden; }
.letter-slot {
  position: absolute; width: 64px; height: 64px; border-radius: 10px;
  border: 3px dashed #FDEBA8; color: #FDEBA8; font: 800 32px var(--font);
  display: flex; align-items: center; justify-content: center;
}
.letter-slot.filled { border-style: solid; background: rgba(253,235,168,.15); }
.story-line {
  position: absolute; left: 60px; right: 60px; top: 120px; bottom: 120px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font: 600 26px/1.45 var(--font); color: #fff;
}
.story-list { position: absolute; left: 40px; right: 40px; top: 86px; bottom: 84px; overflow-y: auto; }
.story-item {
  padding: 12px 16px; margin-bottom: 8px; border-radius: 10px; background: #fff;
  font: 700 16px var(--font); color: var(--navy); cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.confetti { position: absolute; width: 8px; height: 12px; pointer-events: none; z-index: 60; }

/* The profile and KG screens are the same garden, paler: "coloured glass over
   the garden" (OVERLAY_TINT_ALPHA in ui.py). */
.wash::before { content: ""; position: absolute; inset: 0; background: rgba(243,245,253,.30); }

/* ---------- the 3D Explorer ---------- */
.offer-btn {
  display: flex; align-items: center; gap: 9px; width: 100%;
  margin: 4px 0 8px; padding: 7px 10px; border-radius: 12px;
  border: 1.5px solid #A5B4FC; background: linear-gradient(135deg, #EEF2FF, #E0F2FE);
  color: #1E1B4B; cursor: pointer; text-align: left;
}
.offer-btn .offer-cube { font-size: 24px; }
.offer-btn b { display: block; font: 700 13px var(--font); color: #3730A3; }
.offer-btn small { display: block; font: 400 11.5px var(--font); color: #475569; }
.offer-btn:active { transform: translateY(1px); }
/* Outside the scaled stage, so the 3D view is sharp on a big screen. */
.holo-frame {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  border: 0; z-index: 100; background: #05070d;
}