/* Colours follow the M1 book: each letter has its own theme colour. */
:root {
  --bg: #FFF8EC;
  --ink: #1d1d1f;
  --muted: #6b6b70;
  --blue: #1E7BE0;
  --card: #ffffff;
  --radius: 28px;
  --shadow: 0 6px 20px rgba(0,0,0,.08);
  --theme: #1E7BE0;
  --tint: #E8F1FC;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif;
  font-weight: 600;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
button { font: inherit; cursor: pointer; border: 0; }
h1, h2, .big-title { font-family: "Fredoka", "Nunito", system-ui, sans-serif; margin: 0; }

/* ---------- Top bar ---------- */
.topbar {
  height: 76px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.topbar-title { font-family: "Fredoka", system-ui, sans-serif; font-size: 28px; color: var(--muted); }
.btn-home, .btn-teacher {
  font-size: 22px; padding: 12px 22px; border-radius: 999px;
  background: var(--tint); color: var(--ink);
}
.btn-teacher { background: #FFF1C2; }

#app { height: calc(100% - 76px); padding: 24px; overflow: auto; }

/* ---------- Home ---------- */
.home { max-width: 1400px; margin: 0 auto; }
.home h1 { font-size: 52px; text-align: center; margin: 10px 0 28px; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.tile {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 30px 20px; text-align: center; min-height: 300px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  border-bottom: 10px solid var(--c, var(--blue));
}
.tile:active { transform: scale(.97); }
.tile .glyph { font-family: "Fredoka", system-ui, sans-serif; font-size: 150px; line-height: 1; color: var(--c); }
.tile .emoji { font-size: 110px; line-height: 1; }
.tile .label { font-size: 30px; }
.tile .sub { font-size: 20px; color: var(--muted); }

/* ---------- Common screen layout ---------- */
.screen { max-width: 1500px; margin: 0 auto; height: 100%; display: flex; flex-direction: column; }
.screen-head { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; flex-wrap: wrap; }
.screen-head h1 { font-size: 46px; color: var(--theme); }
.pill {
  background: var(--blue); color: #fff; border-radius: 999px; padding: 10px 22px; font-size: 22px;
}
.tabs { margin-left: auto; display: flex; gap: 10px; }
.tab {
  font-size: 22px; padding: 12px 24px; border-radius: 999px; background: #fff; box-shadow: var(--shadow);
}
.tab.on { background: var(--theme); color: #fff; }

.split { flex: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; min-height: 0; }
.panel {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px; display: flex; flex-direction: column; min-height: 0;
}

/* ---------- Letter tracing area ---------- */
.trace-wrap { position: relative; flex: 1; min-height: 0; background: var(--tint); border-radius: 22px; }
.trace-wrap svg, .trace-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.trace-wrap canvas { touch-action: none; }
.track { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }
.guide { fill: none; stroke: var(--theme); stroke-opacity: .45; stroke-dasharray: 2 16; stroke-linecap: round; }
.anim { fill: none; stroke: var(--theme); stroke-linecap: round; stroke-linejoin: round; }
.start-dot circle { fill: var(--ink); }
.start-dot text { fill: #fff; font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: 22px; }

.controls { display: flex; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.btn {
  font-size: 24px; padding: 16px 28px; border-radius: 999px; background: var(--theme); color: #fff;
  box-shadow: var(--shadow);
}
.btn.soft { background: #fff; color: var(--ink); }
.btn.yt { background: #fff; color: #c4302b; }
.btn:active { transform: scale(.96); }

/* ---------- Sound side ---------- */
.sound-panel { align-items: center; justify-content: center; gap: 22px; text-align: center; }
.big-letter-btn {
  font-family: "Fredoka", system-ui, sans-serif; font-size: 200px; line-height: 1;
  width: 300px; height: 300px; border-radius: 60px; background: var(--tint); color: var(--theme);
}
.sound-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.cue { font-size: 32px; background: #FFF1C2; border-radius: 18px; padding: 14px 24px; }

/* ---------- Words + game ---------- */
.word-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.word-card {
  background: var(--tint); border-radius: 24px; padding: 18px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.word-card .pic { font-size: 110px; line-height: 1.1; }
.word-card .name { font-family: "Fredoka", system-ui, sans-serif; font-size: 34px; letter-spacing: 1px; }
.word-card .name b { color: var(--theme); }
.word-card:active { transform: scale(.96); }

.game { margin-top: 22px; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.game h2 { font-size: 36px; }
.game-row { display: flex; gap: 26px; }
.choice {
  width: 210px; height: 210px; border-radius: 30px; background: #fff; box-shadow: var(--shadow);
  font-size: 120px; line-height: 1;
}
.choice.right { background: #DDF6E4; outline: 6px solid #2FB45A; }
.choice.wrong { animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-12px); } 75% { transform: translateX(12px); } }

/* ---------- Standing line ---------- */
.line-scene { position: relative; flex: 1; min-height: 0; background: linear-gradient(#DCEEFF, #F3F9FF); border-radius: 22px; }
.line-scene svg, .line-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.line-scene canvas { touch-action: none; }

/* ---------- A–Z chart ---------- */
.chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 16px; }
.chart button {
  min-height: 110px; border-radius: 22px; background: #fff; box-shadow: var(--shadow);
  font-family: "Fredoka", system-ui, sans-serif; font-size: 72px; color: #c9c9ce;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.chart button.on, .chart button[data-letter] { color: var(--c); }
.chart button small { font-family: "Nunito", system-ui, sans-serif; font-size: 34px; }
.chart button.off { cursor: default; }

/* ---------- Teacher drawer ---------- */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 90vw); background: #FFFBEA;
  box-shadow: -8px 0 30px rgba(0,0,0,.15); transform: translateX(105%); transition: transform .25s;
  padding: 22px 26px; overflow: auto; z-index: 20; font-size: 22px; line-height: 1.5;
}
.drawer.open { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; font-size: 26px; margin-bottom: 10px; }
.drawer .book-ref { background: #fff; border-radius: 12px; padding: 8px 14px; display: inline-block; margin-bottom: 8px; }
.drawer ol { padding-left: 26px; }
.btn-close { background: #fff; border-radius: 999px; padding: 8px 16px; font-size: 22px; }

/* ---------- Video ---------- */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 30; display: flex; align-items: center; justify-content: center; }
.overlay[hidden] { display: none; }
.video-box { width: min(1200px, 92vw); }
.video-box .big { float: right; margin-bottom: 12px; font-size: 24px; }
.video-frame { clear: both; position: relative; padding-top: 56.25%; background: #000; border-radius: 16px; overflow: hidden; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Cheer star ---------- */
.cheer { position: fixed; left: 50%; top: 45%; font-size: 260px; transform: translate(-50%, -50%); z-index: 40; animation: pop 1s ease-out forwards; pointer-events: none; }
.cheer[hidden] { display: none; }
@keyframes pop { 0% { transform: translate(-50%,-50%) scale(.2); opacity: 0; } 30% { opacity: 1; transform: translate(-50%,-50%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1); } }

/* ---------- Setup ---------- */
.setup { max-width: 640px; margin: 20px auto; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 34px; display: flex; flex-direction: column; gap: 18px; }
.setup h1 { font-size: 44px; }
.setup label { display: flex; flex-direction: column; gap: 8px; font-size: 24px; }
.setup input, .setup select { font: inherit; font-size: 26px; padding: 14px 18px; border-radius: 16px; border: 2px solid #d8d8de; background: #fff; }
.muted { color: var(--muted); }
.small { font-size: 18px; }
.error { color: #c4302b; margin: 0; }

/* ---------- Home ---------- */
.tiles.two { grid-template-columns: repeat(2, minmax(0, 440px)); justify-content: center; }
.tiles.two .glyph { font-size: 120px; }
.resume { display: block; margin: 0 auto 26px; }
.panel-id { text-align: center; color: var(--muted); font-size: 20px; margin-top: 30px; }

/* ---------- Book page list ---------- */
.page-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; overflow: auto; padding-bottom: 10px; }
.page-card { background: #fff; border-radius: 22px; box-shadow: var(--shadow); padding: 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 170px; justify-content: center; }
.page-card:active { transform: scale(.96); }
.page-card .glyph { font-family: "Fredoka", system-ui, sans-serif; font-size: 72px; line-height: 1; }
.page-card .emoji { font-size: 60px; line-height: 1.1; }
.page-card .emoji svg { width: 60px; height: 50px; }
.pc-title { font-size: 19px; text-align: center; }
.pc-pages { font-size: 16px; color: var(--muted); }

/* ---------- Item screens ---------- */
.page-tag { font-size: 20px; color: var(--muted); background: #fff; padding: 8px 16px; border-radius: 999px; }
.panel.grow { flex: 1; }
.panel.center { align-items: center; justify-content: center; text-align: center; }
.emoji-big { font-size: 140px; }
.navbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; }
.navbar .btn { font-size: 20px; padding: 12px 22px; }
.controls.top { margin: 0 0 16px; align-items: center; }
.new-word { font-size: 22px; align-self: center; margin-left: auto; color: var(--muted); }
.new-word b { color: var(--ink); font-size: 28px; }
.word-card .pic svg, .choice svg { vertical-align: middle; }
.line-scene.ruled { background: #fff; }

/* ---------- Colour-the-letters revision ---------- */
.chart.colour button { font-size: 96px; color: #fff; -webkit-text-stroke: 3px #3a3a3c; paint-order: stroke; }
.chart.colour button.filled { color: var(--c); -webkit-text-stroke: 3px var(--c); }

/* ---------- Activity tab ---------- */
.act .panel { gap: 10px; }
.act-label { font-size: 24px; color: var(--theme); font-family: "Fredoka", system-ui, sans-serif; margin-top: 8px; }
.act-text { font-size: 36px; line-height: 1.35; }
.act-mats { font-size: 28px; background: var(--tint); border-radius: 18px; padding: 14px 20px; }
.done-box { margin-top: auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 16px; }
.btn.big-done { font-size: 30px; padding: 22px 36px; background: #2FB45A; }
.done.yes { font-size: 30px; background: #DDF6E4; color: #1d6b38; border-radius: 999px; padding: 16px 28px; }
.small-btn { font-size: 18px !important; padding: 10px 18px !important; }
.sound-tip { background: #fff; border-radius: 12px; padding: 10px 14px; margin: 8px 0; font-size: 20px; }

/* ---------- Materials strip (under the page before a letter) ---------- */
.mat-strip { margin-top: 14px; background: #FFF1C2; border-radius: 16px; padding: 14px 22px; font-size: 24px; line-height: 1.35; }

/* ---------- Sign-in, home actions, admin ---------- */
.gbtn { min-height: 46px; display: flex; justify-content: center; }
.home-actions { display: flex; gap: 14px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.home-actions .btn { font-size: 20px; padding: 12px 22px; }
.admin { overflow: auto; gap: 10px; display: block; }
.admin-h { font-size: 26px; margin: 14px 0 8px; }
.arow { display: grid; grid-template-columns: 1.6fr 1.2fr 1.3fr .7fr .8fr auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid #eee; }
.arow.new { background: #FFF8E1; padding: 10px; border-radius: 14px; border: 0; }
.arow input, .arow select { font: inherit; font-size: 18px; padding: 10px 12px; border-radius: 12px; border: 2px solid #d8d8de; background: #fff; min-width: 0; }
.a-emailtxt { font-size: 18px; word-break: break-all; }
.a-msg { grid-column: 1 / -1; font-size: 16px; color: var(--muted); min-height: 0; }
.btn.small { font-size: 18px; padding: 10px 18px; }

/* ---------- Home: subject blocks, book cards, class level ---------- */
.tiles.subjects { grid-template-columns: repeat(3, 1fr); max-width: 1300px; margin: 0 auto; }
.tiles.books { grid-template-columns: repeat(2, minmax(0, 460px)); justify-content: center; gap: 28px; }
.tile.subject { min-height: 190px; padding: 18px 14px; gap: 6px; }
.tiles.subjects { gap: 20px; }
.home h1 { margin: 4px 0 14px; }
.resume { margin-bottom: 16px; }
.tile .s-icon { font-family: "Fredoka", system-ui, sans-serif; font-size: 72px; line-height: 1.1; color: var(--c); }
.tile.subject .label { font-size: 28px; }
.tile.soon { background: #EFEFF2; border-bottom-color: #C9C9CF; cursor: default; }
.tile.soon .s-icon, .tile.soon .label { color: #9a9aa2; }
.tile.soon .sub { background: #fff; border-radius: 999px; padding: 4px 16px; }
.tile .last { font-size: 20px; background: var(--tint); border-radius: 999px; padding: 6px 16px; }
.level-chip, .level-switch { display: inline-flex; vertical-align: middle; margin-left: 14px; font-size: 24px; font-family: "Nunito", system-ui, sans-serif; }
.level-chip { background: #fff; border-radius: 999px; padding: 6px 20px; box-shadow: var(--shadow); }
.lvl { font-size: 22px; padding: 8px 20px; background: #fff; box-shadow: var(--shadow); margin-right: 8px; border-radius: 999px; }
.lvl.on { background: var(--blue); color: #fff; }
.toast { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%) translateY(30px); background: #1d1d1f; color: #fff; padding: 16px 28px; border-radius: 999px; font-size: 22px; opacity: 0; transition: all .25s; z-index: 50; pointer-events: none; }
.toast.on { opacity: 1; transform: translateX(-50%); }

/* ---------- Narrow screens (portrait panels, phones) ---------- */
@media (max-width: 1000px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .chart { grid-template-columns: repeat(4, 1fr); }
  .page-grid { grid-template-columns: repeat(3, 1fr); }
  .tiles.two { grid-template-columns: 1fr 1fr; }
  .tiles.subjects { grid-template-columns: repeat(2, 1fr); }
  .tiles.books { grid-template-columns: 1fr; }
  .navbar .btn { font-size: 16px; padding: 10px 14px; }
  .arow { grid-template-columns: 1fr 1fr; }
  .trace-wrap, .line-scene { min-height: 420px; }
  .choice { width: 140px; height: 140px; font-size: 80px; }
}