/* Bin Bin biết nhìn — BẢNG TIN LỚP
   Kiosk landscape, xem từ 3–4 mét, PC Windows + Edge, chịu được máy chiếu 4:3.
   Thế giới và lý do từng quyết định: contract ở đầu demo/index.html + PRODUCT.md. */

:root {
  /* ---- màu thùng: MÀU CHỨC NĂNG, phải trùng ba thùng thật ở trường ---- */
  /* (JS đọc từ js/config.js; ở đây chỉ dùng cho biển mặc định) */

  /* ---- mặt bảng: khung không tiêu một giọt màu nào ---- */
  --felt:        #161B33;   /* nỉ indigo */
  --felt-deep:   #0E1226;   /* đường kẻ khắc, khe giữa các nẹp */
  --batten:      #1F2545;   /* nẹp gỗ sơn */
  --chalk:       #F2F3F7;   /* phấn trắng */
  --chalk-dim:   #9AA0BF;   /* phấn mờ: nhãn phụ */
  --chalk-ghost: rgba(242,243,247,.14);
  --paper:       #FBFAF6;   /* thẻ giấy */
  --ink:         #1A1B22;   /* mực trên giấy */
  --brass:       #C9A227;   /* đinh ghim */

  /* ---- chữ ---- */
  --font-display: 'Anton', 'Barlow Condensed', 'Segoe UI', system-ui, sans-serif;
  --font-label:   'Barlow Condensed', 'Segoe UI', system-ui, sans-serif;

  /* thang chữ tính cho khoảng cách xem 3–4 m; vmin để sống được cả 16:9 và 4:3 */
  --fs-hero:  clamp(46px, 15vmin, 206px);
  --fs-act:   clamp(26px, 6.4vmin, 86px);
  --fs-num:   clamp(40px, 11vmin, 132px);
  --fs-lead:  clamp(24px, 5.6vmin, 74px);
  --fs-plate: clamp(13px, 2.5vmin, 34px);
  --fs-title: clamp(14px, 2.4vmin, 34px);
  --fs-ui:    15px;

  --gap:   clamp(8px, 1.6vmin, 22px);
  --gap-l: clamp(14px, 3vmin, 44px);
  --ring:  4px;

  --dur-fast: 140ms;
  --dur-base: 260ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* JS ghi vào khi có kết quả */
  --flood: transparent;
  --flood-ink: var(--chalk);
  --plate-x: 50%;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }

body {
  font-family: var(--font-label);
  color: var(--chalk);
  background-color: var(--felt);   /* màu nền dự phòng khi thiếu file ảnh */
  overflow: hidden;
  /* thớ nỉ thật: tile 1024px được cắt để lặp kín 4 cạnh, lặp tại 480px CSS
     (xem img/PROVENANCE.md). KHÔNG dùng cover — kéo dãn một tấm sẽ mất hạt và mờ. */
  background-image: url("../img/felt.png");
  background-size: 480px 480px;
  background-repeat: repeat;
}

/* các mặt trình duyệt cũng thuộc thiết kế */
::selection { background: var(--brass); color: var(--ink); }
:focus-visible { outline: var(--ring) solid var(--chalk); outline-offset: 4px; }

#app {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

/* ---------------- NẸP TRÊN ---------------- */

.batten {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-l);
  padding: calc(var(--gap) * .9) var(--gap-l);
  background: var(--batten);
  border-bottom: 2px solid var(--felt-deep);
  box-shadow: 0 6px 14px rgba(0,0,0,.32);
}

/* Tên bảng = tên đề tài đã đăng kí, đặt hai dòng: tên riêng đọc trước, mô tả đọc sau.
   Một dòng duy nhất sẽ chạm vào tấm ảnh máy ảnh bên phải trên khung 4:3. */
.board-title {
  margin: 0;
  min-width: 0;
  display: flex; flex-direction: column; gap: .3em;
  font-family: var(--font-label);
  text-transform: uppercase;
  color: var(--chalk);
}
.board-title .tt-name {
  font-weight: 700;
  font-size: var(--fs-title);
  letter-spacing: .16em;
}
.board-title .tt-sub {
  font-weight: 600;
  font-size: calc(var(--fs-title) * .74);
  letter-spacing: .12em;
  color: var(--chalk-dim);
}
.board-title .sep { margin: 0 .4em; opacity: .55; }

/* máy ảnh = tấm ảnh ghim lên bảng */
.photo {
  position: relative;
  flex: 0 0 auto;
  width: clamp(112px, 17vmin, 232px);
  padding: 7px 7px 0;
  background-color: var(--paper);
  background-image: url("../img/paper.png");
  background-size: 260px 260px;
  box-shadow: 0 4px 10px rgba(0,0,0,.4);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.photo-window {
  aspect-ratio: 4 / 3;      /* khai báo sẵn: video load không làm giật layout */
  background: #C9CCD6;
  overflow: hidden;
  display: grid; place-items: center;
}
.photo-window canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-caption {
  display: block;
  padding: 3px 0 5px;
  font-family: var(--font-label);
  font-size: clamp(10px, 1.35vmin, 16px);
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: #6B6E7A; text-align: center;
}
.photo-caption:empty { padding: 0 0 4px; }
.photo.off .photo-window { background: repeating-linear-gradient(45deg,#C9CCD6 0 6px,#BEC2CC 6px 12px); }
.tack {
  position: absolute; top: -7px; left: 50%; translate: -50% 0;
  width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F0DC93, var(--brass) 55%, #8C6F12);
  box-shadow: 0 2px 4px rgba(0,0,0,.5);
}
[data-state="RESULT"] .photo { opacity: .62; transform: scale(.95); }

/* ---------------- MẶT BẢNG ---------------- */

.field { position: relative; display: grid; min-height: 0; }

/* màu thùng nở ra từ đúng tấm biển của nó rồi tràn kín mặt bảng */
.flood {
  position: absolute; inset: 0;
  background: var(--flood);
  clip-path: circle(0% at var(--plate-x) 100%);
  transition: clip-path var(--dur-base) var(--ease-out);
}
[data-state="RESULT"] .flood { clip-path: circle(142% at var(--plate-x) 100%); }

.field-inner {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--gap-l);
  padding: var(--gap-l);
  min-height: 0;
  text-align: center;
}

.pointer {
  position: absolute; bottom: 0; left: var(--plate-x);
  translate: -50% 0;
  width: clamp(30px, 5vmin, 58px); height: auto;
  color: var(--flood-ink);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
[data-state="RESULT"] .pointer { opacity: 1; }

.mascot { width: clamp(90px, 21vmin, 250px); height: auto; color: var(--chalk); }

.lead {
  margin: 0;
  font-family: var(--font-label);
  font-weight: 600; font-size: var(--fs-lead);
  line-height: 1.3; letter-spacing: .03em;
  max-width: 24ch;
  color: var(--chalk);
}
.lead code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: .72em; letter-spacing: 0;
  background: rgba(242,243,247,.12); padding: .1em .35em;
}

/* --- vạch phấn đếm: cách chính lớp học đếm, thay cho vòng tiến trình --- */
.tally { display: flex; gap: clamp(8px, 1.8vmin, 22px); align-items: flex-end; }
.tally i {
  display: block;
  width: clamp(10px, 2vmin, 24px);
  height: clamp(48px, 11vmin, 136px);
  background: var(--chalk-ghost);
  transform: skewX(-9deg);
  transition: background var(--dur-fast) linear;
}
.tally i.on { background: var(--chalk); }

/* --- kết quả: thẻ giấy ghim bên trái, lệnh chỉ chỗ bên phải --- */
.result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 4.4vmin, 68px);
  width: 100%;
  max-width: 1500px;
  text-align: left;
}

.specimen {
  position: relative;
  background-color: var(--paper);
  background-image: url("../img/paper.png");
  background-size: 260px 260px;
  color: var(--ink);
  padding: clamp(14px, 2.6vmin, 34px) clamp(14px, 2.6vmin, 34px) clamp(10px, 1.8vmin, 22px);
  box-shadow: 0 10px 22px rgba(0,0,0,.34);
  display: grid; justify-items: center; gap: .35em;
  animation: pin var(--dur-base) var(--ease-out) both;
}
.asset-icon { width: clamp(74px, 15vmin, 168px); aspect-ratio: 1; display: block; }
.asset-icon img, .asset-icon svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.asset-icon img + svg { display: none; }
@keyframes pin {
  from { opacity: 0; transform: translateY(-14px) rotate(-1.2deg); }
  to   { opacity: 1; transform: none; }
}

.verdict { min-width: 0; color: var(--flood-ink); }
.verdict .name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 1.14;                 /* đủ chỗ cho dấu tiếng Việt của Anton */
  letter-spacing: .005em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.verdict .act {
  margin: .12em 0 0;
  display: flex; align-items: baseline; gap: .4em; flex-wrap: wrap;
  font-family: var(--font-label);
  font-weight: 700; font-size: var(--fs-act);
  letter-spacing: .07em; text-transform: uppercase;
}
.verdict .act b {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.5em; line-height: .9; letter-spacing: 0;
}

/* --- nút: biển men trắng, chữ indigo. Khung không tiêu màu nào --- */
.btn {
  font-family: var(--font-display);
  font-size: var(--fs-act);
  letter-spacing: .06em; text-transform: uppercase;
  min-height: clamp(66px, 11vmin, 116px);
  padding: 0 clamp(26px, 5vmin, 76px);
  border: 0; border-radius: 0;
  background: var(--chalk); color: var(--felt);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .5em;
  box-shadow: 0 8px 18px rgba(0,0,0,.38);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.btn svg { width: .78em; height: .78em; }
.btn:hover { background: #fff; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.errbox { display: flex; flex-direction: column; align-items: center; gap: var(--gap-l); }
.err-icon { width: clamp(44px, 8vmin, 92px); height: auto; color: var(--brass); }

/* Bin Bin bí. Dấu hỏi bằng đồng, không phải tam giác cảnh báo: máy chưa đoán ra không
   phải là lỗi, và tuyệt đối không được đọc thành "bạn nhỏ làm sai". */
.puzzle-icon { width: clamp(56px, 11vmin, 132px); height: auto; color: var(--brass); }

/* Hai câu, mỗi câu trọn một dòng: khổ 24ch mặc định bẻ câu giữa chừng ("…nhận ra vật /
   này") và bạn nhỏ đang tập đọc sẽ vấp đúng chỗ đó. Ngắt dòng do <br> quyết định. */
.lead-wide { max-width: min(42ch, 94%); }

/* ---------------- NẸP DƯỚI: ba tấm biển thùng ---------------- */

.rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--felt-deep);
  border-top: 2px solid var(--felt-deep);
  height: clamp(112px, 25vmin, 268px);
}

.plate {
  position: relative;
  background: var(--bin);
  color: var(--bin-ink);
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(8px, 1.8vmin, 24px);
  padding: 0 clamp(10px, 2.4vmin, 34px);
  overflow: hidden;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.plate-icon { width: clamp(34px, 6vmin, 76px); aspect-ratio: 1; display: block; }
.plate-icon img, .plate-icon svg { width: 100%; height: 100%; object-fit: contain; display: block; }
.plate-icon img + svg { display: none; }
[data-bin="food"] .plate-icon img,
[data-bin="other"] .plate-icon img { filter: invert(1); }
.plate.ghost .plate-icon { display: none; }
.plate .no {
  font-family: var(--font-display);
  font-size: var(--fs-num);
  line-height: .82;
  letter-spacing: -.02em;
}
.plate .meta { display: grid; gap: .1em; min-width: 0; }
.plate .nm {
  font-family: var(--font-label);
  font-weight: 700; font-size: var(--fs-plate);
  letter-spacing: .11em; text-transform: uppercase;
  line-height: 1.1;
}
.plate .kind {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: clamp(10px, 1.5vmin, 19px);
  letter-spacing: .13em; text-transform: uppercase;
  opacity: .62;
}

/* sự vắng mặt cũng được vẽ kĩ như sự hiện diện */
.plate.ghost {
  background: transparent;
  color: var(--chalk);                       /* tên + ví dụ: phấn, đủ tương phản trên nỉ */
  box-shadow: inset 0 0 0 3px var(--bin);
}
.plate.ghost .no { color: var(--bin); }      /* chỉ chữ số giữ màu thùng, cỡ lớn nên đủ 3:1 */
.plate.ghost .kind { color: var(--chalk-dim); opacity: 1; }
.plate.hit {
  box-shadow: inset 0 0 0 6px var(--bin-ink), 0 -8px 20px rgba(0,0,0,.3);
}
.plate.hit .tack { display: block; }
.plate .tack { display: none; top: 9px; left: 50%; }

/* ---------------- bảng kĩ thuật (phím D) ---------------- */

.debug {
  position: fixed; top: 12px; right: 12px; z-index: 50; display: none;
  background: rgba(10,13,26,.94); color: var(--chalk);
  border: 1px solid rgba(242,243,247,.22);
  padding: 12px 14px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--fs-ui);
  font-variant-numeric: tabular-nums;
  min-width: 286px; max-height: 92vh; overflow: auto;
  scrollbar-color: var(--chalk-dim) transparent;
}
.debug.on { display: block; }
.debug .row { display: flex; justify-content: space-between; gap: 12px; }
.debug .bar { height: 5px; background: rgba(242,243,247,.16); margin: 2px 0 7px; }
.debug .bar i { display: block; height: 100%; background: var(--chalk); }
.debug hr { border: 0; border-top: 1px solid rgba(242,243,247,.2); margin: 9px 0; }
.debug .warn {
  display: none; white-space: pre-wrap; color: var(--brass);
  border: 1px solid var(--brass); padding: 6px 8px; margin-bottom: 9px;
}

/* nhãn chế độ xem thử */
.preview-flag {
  position: fixed; left: 12px; bottom: 12px; z-index: 60;
  font-family: var(--font-label); font-weight: 700;
  font-size: clamp(11px, 1.4vmin, 17px);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--felt); background: var(--brass);
  padding: 5px 11px;
}

/* Màu là thông tin: reduced-motion bỏ chuyển động nhưng màu vẫn đổi tức thì */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
  .flood { clip-path: none; background: transparent; }
  [data-state="RESULT"] .flood { clip-path: none; background: var(--flood); }
  [data-state="RESULT"] .photo { transform: none; }
}

/* Điện thoại dọc: không phải môi trường thi, nhưng phụ huynh sẽ mở link này để đưa
   GVCN và các bạn xem. Thu cả tấm bảng thành khung 16:9 vừa bề rộng thay vì cắt mất chữ.
   Cỡ chữ chuyển sang tính theo bề rộng khung, vì vmin ở đây là của điện thoại. */
@media (orientation: portrait) {
  body { display: grid; place-items: center; background: var(--felt-deep); }
  #app {
    width: 100vw; height: 56.25vw; max-height: 100dvh;
    --fs-hero: 8.8vw; --fs-act: 3.7vw; --fs-num: 6.6vw;
    --fs-lead: 3.3vw; --fs-plate: 1.6vw; --fs-title: 1.35vw;
    --gap: 1vw; --gap-l: 1.9vw;
  }
  .photo { width: 10.5vw; }
  .photo-caption { font-size: .95vw; }
  .mascot { width: 12.5vw; }
  .puzzle-icon { width: 7vw; }
  .tally i { width: 1.2vw; height: 6.4vw; }
  .tally { gap: 1.2vw; }
  .rail { height: 14.5vw; }
  .specimen { padding: 1.6vw 1.6vw 1.2vw; }
  .asset-icon { width: 8.8vw; }
  .btn { min-height: 7.4vw; padding: 0 4.4vw; }
  .pointer { width: 3.2vw; }
  .preview-flag { font-size: 1.4vw; padding: .4vw .9vw; }
  .board-title .tt-name { letter-spacing: .13em; }
  .board-title .tt-sub { letter-spacing: .1em; }
}

/* Máy chiếu 4:3 (1024×768): nẹp dưới cao hơn theo tỉ lệ, thẻ giấy gọn lại */
@media (max-aspect-ratio: 4/3) {
  .result { grid-template-columns: auto minmax(0, 1.25fr); gap: clamp(14px, 3vmin, 40px); }
  .asset-icon { width: clamp(62px, 12vmin, 120px); }
  }