/* ============================================================
   Học Vẽ & Tô Màu Lớp 1 — giao diện
   Phong cách: sáng, vui, nhiều màu; vùng vẽ rộng
   ============================================================ */
:root {
  --bar:      #ffffff;
  --line:     #ece7f2;
  --bg:       #f6f3fb;
  --ink:      #2a2340;
  --ink-2:    #6a627e;
  --ink-3:    #9a92ac;
  --accent:   #7b3ff2;
  --accent-l: #efe7fe;
  --danger:   #e5484d;
  --muted:    #f1eef8;

  --font: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --shadow-sm: 0 1px 2px rgba(42,35,64,.06), 0 4px 14px rgba(42,35,64,.06);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  display: flex; flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  touch-action: none;
}

/* ---------- Thanh công cụ ---------- */
.bar {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  background: var(--bar);
  border-bottom: 1px solid var(--line);
  padding: 8px 12px;
  box-shadow: 0 1px 4px rgba(42,35,64,.05);
  z-index: 10;
}
.back {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font); font-size: 14px; font-weight: 800;
  color: var(--ink-2); background: var(--muted);
  border: none; border-radius: 9px; padding: 9px 13px 9px 10px; cursor: pointer;
  transition: color .15s, background .15s;
}
.back:hover { color: var(--accent); background: var(--accent-l); }
.back:active { transform: scale(.97); }
.bar__title { flex-shrink: 0; font-size: clamp(1rem, 2.3vw, 1.25rem); font-weight: 900; color: var(--accent); white-space: nowrap; }

.bar__scroll {
  display: flex; align-items: center; gap: 6px;
  overflow-x: auto; overflow-y: hidden;
  flex: 1; padding-bottom: 2px;
  scrollbar-width: thin;
}
.bar__scroll::-webkit-scrollbar { height: 5px; }
.bar__scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.grp {
  display: inline-flex; align-items: center; gap: 4px;
  padding-right: 8px; border-right: 1px solid var(--line); flex-shrink: 0;
}
.grp:last-child { border-right: none; padding-right: 0; }

.tbtn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border: none; border-radius: 10px;
  background: transparent; color: var(--ink-2); cursor: pointer;
  transition: background .15s, color .15s, transform .05s;
}
.tbtn:hover { background: var(--muted); color: var(--ink); }
.tbtn:active { transform: scale(.92); }
.tbtn.is-on { background: var(--accent); color: #fff; }
.tbtn--danger:hover { background: #fdecec; color: var(--danger); }

/* Bảng màu */
.grp--colors { gap: 6px; }
.colors { display: inline-flex; gap: 4px; flex-wrap: nowrap; }
.dot {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line);
  cursor: pointer; transition: transform .1s;
}
.dot:hover { transform: scale(1.15); }
.dot.is-on { box-shadow: 0 0 0 2.5px var(--accent); transform: scale(1.1); }
.swatch { display: inline-grid; place-items: center; width: 34px; height: 34px; }
.swatch input[type="color"] { width: 28px; height: 28px; border: none; border-radius: 50%; padding: 0; background: none; cursor: pointer; }
.swatch input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.swatch input[type="color"]::-webkit-color-swatch { border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }

/* Cỡ bút + chấm xem trước */
.grp--size { gap: 8px; }
#size { width: 90px; accent-color: var(--accent); cursor: pointer; }
.size-dot-wrap { width: 32px; height: 32px; display: grid; place-items: center; flex-shrink: 0; }
.size-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }

/* Select hình mẫu */
.select { position: relative; }
.select select {
  appearance: none; font-family: var(--font); font-size: 14px; font-weight: 800;
  color: var(--ink); background: var(--muted);
  border: none; border-radius: 10px; padding: 10px 32px 10px 12px; cursor: pointer;
}
.select__caret { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }

/* ---------- Vùng vẽ ---------- */
.stage { flex: 1; min-height: 0; display: flex; padding: 14px; }
.board-wrap {
  flex: 1; position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
#board { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.hint {
  flex-shrink: 0; text-align: center;
  font-size: 13px; font-weight: 600; color: var(--ink-3);
  padding: 0 16px 12px; line-height: 1.5;
}
.hint b { color: var(--ink-2); font-weight: 800; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .bar__title { display: none; }
  .back__txt { display: none; }
  .stage { padding: 8px; }
  .tbtn { width: 38px; height: 38px; }
  .dot { width: 24px; height: 24px; }
  #size { width: 64px; }
  .hint { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) { .tbtn, .back, .dot { transition: none; } }