/* ==========================================================================
   ĐƯỜNG PHỐ CẢNH SÁT — giao diện trình chơi
   Đơn vị rem; cỡ chữ gốc co giãn theo khung nhìn (thiết kế trên khung 90rem × 50,6rem ~ 16:9):
   1366×768 -> 16px (nền), 1920×1080 -> 21,3px, 3840×2160 -> 42,7px.
   Cảnh đường phố (spec 008) là một khung 16:9 co giãn: kích thước chữ trong cảnh tính theo bề rộng khung (cqw).
   ========================================================================== */
:root {
  --ink: #1d2433;
  --ink-soft: #46506a;
  --paper: #ffffff;
  --sky-top: #bfe3ff;
  --sky-bottom: #f4fbff;
  --grass: #8fd18a;
  --grass-far: #a9dca0;
  --grass-near: #7cc277;
  --foliage-light: #6fbf73;
  --foliage-dark: #3f8f55;
  --trunk: #8a5a35;
  --water: #7fc8e8;
  --water-edge: #5aa9cc;
  --cloud: #ffffff;
  --sidewalk: #d9d4c7;
  --road: #4a5063;
  --road-line: #f5e6a8;
  --police: #1f4e9c;
  --accent: #f08a24;
  --accent-ink: #7a3a00;
  --accent-text: #8a4300;
  --gold: #ffd54a;
  --danger: #b3261e;
  --focus: #1a5fd0;
  --shadow: 0 .4rem 1.4rem rgba(20, 30, 60, .18);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eef2fb;
    --ink-soft: #b9c3dd;
    --paper: #1d2538;
    --sky-top: #16233f;
    --sky-bottom: #24345a;
    --grass: #2f6d3c;
    --grass-far: #2a5e37;
    --grass-near: #285c33;
    --foliage-light: #3f8a52;
    --foliage-dark: #2c6a3e;
    --trunk: #6b4529;
    --water: #3a7a96;
    --water-edge: #2d6279;
    --cloud: #8fa0c4;
    --sidewalk: #4a4f5d;
    --road: #20242f;
    --road-line: #d8c377;
    --focus: #8ab4ff;
    --accent-text: #ffc27a;
    --shadow: 0 .4rem 1.4rem rgba(0, 0, 0, .5);
  }
}

html {
  font-size: clamp(16px, min(100vw / 90, 100vh / 50.625), 48px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: linear-gradient(var(--sky-top), var(--sky-bottom));
  line-height: 1.35;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

button, input { font: inherit; color: inherit; }

button:focus-visible, input:focus-visible, a:focus-visible {
  outline: .22rem solid var(--focus);
  outline-offset: .15rem;
}

/* ---- Khung ứng dụng ---------------------------------------------------- */
.ps-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 1rem 1.6rem 1.2rem;
  gap: .8rem;
}

.ps-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.ps-top h1 {
  margin: 0;
  font-size: 1.9rem;
  letter-spacing: .01em;
}

.ps-top-actions { display: flex; gap: .6rem; align-items: center; }

.ps-btn {
  cursor: pointer;
  border: .12rem solid var(--ink-soft);
  background: var(--paper);
  border-radius: .8rem;
  padding: .45rem 1.1rem;
  font-weight: 700;
  font-size: 1.1rem;
  box-shadow: 0 .15rem 0 rgba(0, 0, 0, .15);
}
.ps-btn:hover { filter: brightness(.97); }
.ps-btn:disabled { opacity: .5; cursor: not-allowed; }
.ps-btn.primary {
  background: var(--accent);
  border-color: var(--accent-ink);
  color: #fff;
}
.ps-link { color: var(--ink-soft); font-size: 1rem; }

/* ---- Thông báo ----------------------------------------------------------- */
.ps-message {
  margin: auto;
  max-width: 44rem;
  background: var(--paper);
  border-radius: 1.2rem;
  box-shadow: var(--shadow);
  padding: 1.6rem 2rem;
  text-align: center;
  font-size: 1.5rem;
}
.ps-message p { margin: 0 0 1rem; }
.ps-message .ps-btn { margin: 0 .3rem; }

.ps-codeform {
  margin: auto;
  max-width: 34rem;
  background: var(--paper);
  border-radius: 1.2rem;
  box-shadow: var(--shadow);
  padding: 1.6rem 2rem;
  text-align: center;
}
.ps-codeform label { display: block; font-size: 1.3rem; font-weight: 700; margin-bottom: .8rem; }
.ps-codeform input {
  width: 100%;
  font-size: 2rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-align: center;
  padding: .4rem;
  border: .14rem solid var(--ink-soft);
  border-radius: .7rem;
  background: var(--paper);
}
.ps-codeform .ps-btn { margin-top: 1rem; }
.ps-codeform .ps-error { color: var(--danger); min-height: 1.4rem; margin-top: .6rem; }

/* ---- Sân khấu: đường phố chữ S (spec 008) ---------------------------------------------------
   Một khung 16:9 (1600×900 đơn vị logic). Mọi thứ trong khung đặt theo phần trăm, chữ theo cqw. */
.ps-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .8rem;
  min-height: 0;
}
.ps-stage[hidden] { display: none; }

.ps-street-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: .3rem; }

.ps-street-inner {
  position: relative;
  width: 100%;
  min-width: 1100px; /* nhỏ hơn thì cuộn ngang, giữ chữ đủ đọc */
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  background: var(--grass);
  border-radius: 1.4rem;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.ps-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ps-scene .grass { fill: var(--grass); }
.ps-scene .grass-far { fill: var(--grass-far); }
.ps-scene .grass-near { fill: var(--grass-near); }
.ps-scene .road-curb { fill: none; stroke: var(--sidewalk); }
.ps-scene .road { fill: none; stroke: var(--road); }
.ps-scene .road-line { fill: none; stroke: var(--road-line); stroke-dasharray: 28 24; }
/* Các lớp dưới đây tô màu cho hình trong <defs> được <use> nhân bản: viết thành chọn lớp đơn,
   không dùng chọn con cháu (".ps-scene .x"), vì bản nhân bản nằm trong cây bóng và không khớp được. */
.fol-dark { fill: var(--foliage-dark); }
.fol-light { fill: var(--foliage-light); }
.trunk { fill: var(--trunk); }
.wood { fill: #b98a54; }
.metal { fill: #4b5563; }
.water { fill: var(--water); }
.water-edge { fill: var(--water-edge); }
.cloud { fill: var(--cloud); opacity: .92; }
.stem { fill: none; stroke: var(--foliage-dark); stroke-width: 1.6; }
.blade { fill: none; stroke: var(--foliage-dark); stroke-width: 2; stroke-linecap: round; }

.ps-houses, .ps-actors { position: absolute; inset: 0; }
.ps-actors { pointer-events: none; }

/* Nhà chỉ để hiển thị (spec 007): chọn nhà do nút "Tìm kiếm", không bấm được vào nhà.
   Hộp nhà 100×100 đơn vị = 6,25% bề rộng khung; nhãn tên nằm ngay dưới nhà (200×48 đơn vị). */
.ps-house {
  position: absolute;
  width: 6.25%;
  aspect-ratio: 1 / 1;
  cursor: default;
  color: inherit;
  border-radius: 6%;
  transition: transform .15s ease;
}

.ps-house > svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.ps-house .wall { fill: var(--wall, #f7d9a8); }
.ps-house .roof { fill: var(--roof, #c8553d); }
.ps-house .door { fill: #7a4a2a; }
.ps-house .win { fill: #9fc4e8; stroke: #55708f; stroke-width: 2; }
.ps-house .win-light { fill: #ffe27a; opacity: 0; }

/* Cửa mở: cánh cửa xoay quanh bản lề bên trái, lộ ra ô cửa sáng phía sau */
.ps-house .door-inner { fill: #3a2a1a; transition: fill .35s ease; }
.ps-house .door { transform-box: fill-box; transform-origin: left center; transition: transform .35s ease; }
.ps-house .knob { transition: opacity .2s ease; }
.ps-house.is-open .door { transform: scaleX(.25); }
.ps-house.is-open .door-inner { fill: #ffe9a8; }
.ps-house.is-open .knob { opacity: 0; }
/* Cảnh sát đi ngang qua nhãn tên: nhãn mờ đi cho khỏi bị che hẳn */
.ps-house .ps-house-name { transition: opacity .2s ease; }
.ps-house.is-police-near .ps-house-name { opacity: .3; }

.ps-house.is-lit .win { fill: #ffe27a; }
.ps-house.is-lit .win-light { opacity: .55; }
.ps-house.is-lit > svg { filter: drop-shadow(0 0 .9rem rgba(255, 214, 80, .95)); }
.ps-house.is-target { outline: .28rem solid var(--gold); outline-offset: .1rem; }
.ps-house.is-passing { transform: translateY(-.35rem); }

.ps-house-name {
  position: absolute;
  left: -50%;
  top: 106%;
  width: 200%;
  height: 48%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .5cqw;
  text-align: center;
  background: var(--paper);
  border-radius: .6cqw;
  font-weight: 800;
  font-size: 1rem; /* dự phòng nếu trình duyệt chưa hiểu cqw */
  font-size: 1.3125cqw; /* 21 đơn vị */
  line-height: 1.12;
  overflow: hidden;
  box-shadow: 0 .1rem .3rem rgba(0, 0, 0, .25);
}
.ps-house-name.is-long { font-size: 1.03cqw; } /* 16,5 đơn vị: tên dài, tối đa 2 dòng */
.ps-house-name.is-xlong { font-size: .8125cqw; } /* 13 đơn vị: tên rất dài */
.ps-house-name-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* Nhà đã trả lời: không làm mờ mạnh (chữ vẫn đọc được trên máy chiếu), chỉ giảm bão hòa và thêm dấu ✓ */
.ps-house.is-answered { filter: saturate(.65); }
.ps-house.is-answered .ps-house-name-text::after { content: " ✓"; color: #1d7a34; }

/* Nhân vật: chân đứng tại (left, top); kích thước theo bề rộng khung */
.ps-police, .ps-student {
  position: absolute;
  aspect-ratio: 3 / 5;
}
.ps-police {
  left: 0;
  top: 0;
  z-index: 3;
  transform: translate(-50%, -100%); /* lật trái/phải làm bên trong hình (.p-flip), không lật cả khối */
}
.ps-police svg, .ps-student svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* ---- Cảnh sát nhiều bộ phận (spec 008): điểm xoay của từng bộ phận, khớp bảng trong sprites.js ---------- */
.p-flip, .p-body, .p-leg, .p-arm, .p-torso, .p-head { transform-box: view-box; }
.p-flip { transform-origin: 30px 50px; }
.p-body { transform-origin: 30px 97px; }
.p-leg { transform-origin: 30px 68px; }
.p-arm-back { transform-origin: 35px 42px; }
.p-arm-front { transform-origin: 29.5px 42px; }
.p-torso { transform-origin: 30px 70px; }
.p-head { transform-origin: 30px 40px; }

/* Đi bộ: chân tay đối nhau ±28°, thân nhún mỗi bước (một chu kỳ đầy đủ 860 ms) */
.ps-police[data-pose="walk"] .p-leg-front { animation: p-swing .43s ease-in-out infinite alternate; }
.ps-police[data-pose="walk"] .p-leg-back { animation: p-swing-rev .43s ease-in-out infinite alternate; }
.ps-police[data-pose="walk"] .p-arm-front { animation: p-arm-swing .43s ease-in-out infinite alternate; }
.ps-police[data-pose="walk"] .p-arm-back { animation: p-arm-swing-rev .43s ease-in-out infinite alternate; }
.ps-police[data-pose="walk"] .p-body { animation: p-bob .43s linear infinite; }
/* Đứng nghỉ: thở, thỉnh thoảng nhìn quanh */
.ps-police[data-pose="idle"] .p-torso { animation: p-breathe 2.4s ease-in-out infinite; }
.ps-police[data-pose="idle"] .p-head { animation: p-look 6s ease-in-out infinite; }

@keyframes p-swing { from { transform: rotate(28deg); } to { transform: rotate(-28deg); } }
@keyframes p-swing-rev { from { transform: rotate(-28deg); } to { transform: rotate(28deg); } }
@keyframes p-arm-swing { from { transform: rotate(-32deg); } to { transform: rotate(32deg); } }
@keyframes p-arm-swing-rev { from { transform: rotate(32deg); } to { transform: rotate(-32deg); } }
@keyframes p-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.4px); } }
@keyframes p-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.03); } }
@keyframes p-look {
  0%, 35%, 100% { transform: rotate(0deg); }
  45%, 55% { transform: rotate(8deg); }
  65%, 75% { transform: rotate(-8deg); }
}

/* Chữ và hình nhỏ nổi lên quanh cảnh sát: "cộc" khi gõ cửa, "?" và giọt mồ hôi khi nhầm nhà */
.ps-fx {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  white-space: nowrap;
  font-weight: 800;
  transform: translate(-50%, -50%);
}
.ps-fx-say {
  font-size: 1rem;
  font-size: 1.5cqw;
  color: #1d2433;
  background: #fff;
  border: .12rem solid #1d2433;
  border-radius: .8cqw;
  padding: .1cqw .6cqw;
  animation: ps-fx-rise .8s ease-out forwards;
}
.ps-fx-q {
  font-size: 2rem;
  font-size: 2.8cqw;
  color: #d9382a;
  text-shadow: 0 0 .25rem #fff, 0 0 .25rem #fff;
  animation: ps-fx-pop .9s ease-out forwards;
}
.ps-fx-sweat {
  width: .9cqw;
  height: 1.4cqw;
  background: #6ec6ff;
  border: .1rem solid #2b83c4;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: ps-fx-drip .8s ease-in forwards;
}
@keyframes ps-fx-rise {
  from { opacity: 0; transform: translate(-50%, -30%) scale(.6); }
  20% { opacity: 1; transform: translate(-50%, -60%) scale(1); }
  to { opacity: 0; transform: translate(-50%, -170%) scale(1); }
}
@keyframes ps-fx-pop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  30% { opacity: 1; transform: translate(-50%, -50%) scale(1.35); }
  50% { transform: translate(-50%, -50%) scale(1); }
  85% { opacity: 1; }
  to { opacity: 0; transform: translate(-50%, -90%) scale(1); }
}
@keyframes ps-fx-drip {
  from { opacity: 0; transform: translate(-50%, -50%); }
  20% { opacity: 1; }
  to { opacity: 0; transform: translate(-50%, 90%); }
}

.ps-student {
  z-index: 2;
  opacity: 0;
  transform: translate(-50%, -100%) translateY(30%) scale(.7);
  transition: opacity .4s ease, transform .5s cubic-bezier(.2, .9, .3, 1.3);
}
.ps-student.is-out { opacity: 1; transform: translate(-50%, -100%); }
.ps-student.is-out svg { animation: ps-hop .5s ease-out .5s 2; } /* bước ra xong thì nhảy lên vẫy tay hai lần */
@keyframes ps-hop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9%); }
}

/* Bong bóng chat của cảnh sát */
.ps-bubble {
  position: absolute;
  transform: translate(-50%, -100%);
  background: #fff;
  color: #1d2433;
  border: .16rem solid #1d2433;
  border-radius: 1.1cqw;
  padding: .45cqw 1.1cqw;
  font-weight: 800;
  font-size: 1.2rem; /* dự phòng nếu trình duyệt chưa hiểu cqw */
  font-size: 1.625cqw;
  white-space: nowrap;
  z-index: 5;
  box-shadow: 0 .3rem .8rem rgba(0, 0, 0, .25);
}
.ps-bubble::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -.7rem;
  width: 1rem; height: 1rem;
  background: #fff;
  border-right: .16rem solid #1d2433;
  border-bottom: .16rem solid #1d2433;
  transform: translateX(-50%) rotate(45deg);
}

/* Phân trang + tiến độ */
.ps-pager, .ps-progress {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .8rem;
  font-size: 1.15rem;
  font-weight: 700;
}
.ps-progress { color: var(--ink-soft); font-weight: 600; }

/* ---- Thanh đáy với nút "Tìm kiếm" (spec 007) ---------------------------------------- */
.ps-bottombar {
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .8rem;
  padding-top: .4rem;
}
.ps-skip { font-size: 1.15rem; }
.ps-bottombar[hidden] { display: none; }
.ps-search {
  min-width: 14rem;
  min-height: 3.4rem;
  padding: .6rem 2.4rem;
  border-radius: 1rem;
  font-size: 1.6rem;
  letter-spacing: .02em;
}
.ps-search:focus-visible { outline: .22rem solid var(--focus); outline-offset: .2rem; }
.ps-search[aria-busy="true"] { cursor: progress; }
/* Nút nổi trên cảnh: khi bị khoá vẫn đặc (không mờ), chỉ nhạt màu, để không lộ cảnh vật phía sau */
.ps-bottombar .ps-btn:disabled { opacity: 1; filter: grayscale(.45) brightness(.97); }

/* ---- Câu hỏi phóng to ---------------------------------------------------------- */
.ps-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(14, 22, 44, .72);
}
.ps-overlay[hidden] { display: none; }

.ps-question-card {
  width: min(78rem, 94vw);
  max-height: 94vh;
  overflow: auto;
  background: var(--paper);
  border-radius: 1.6rem;
  box-shadow: var(--shadow);
  padding: 1.8rem 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ps-q-who {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--accent-text);
}
.ps-q-who svg { width: 4rem; height: auto; flex: none; }
.ps-q-who .name { color: var(--ink); }

.ps-q-text {
  margin: 0;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.25;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ps-q-text.is-long { font-size: 2.2rem; }
.ps-q-text.is-xlong { font-size: 1.8rem; }

.ps-q-image[hidden] { display: none; } /* display:block bên dưới sẽ đè thuộc tính hidden: ảnh trống hiện chữ thay thế */
.ps-q-image {
  display: block;
  max-width: 100%;
  max-height: 38vh;
  margin: 0 auto;
  border-radius: .8rem;
  object-fit: contain;
}

.ps-q-answer {
  background: #e7f6ea;
  color: #12501f;
  border-left: .5rem solid #2e9d46;
  border-radius: .6rem;
  padding: .8rem 1.2rem;
  font-size: 1.9rem;
  font-weight: 700;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (prefers-color-scheme: dark) {
  .ps-q-answer { background: #17341f; color: #b8f0c4; }
}

.ps-q-actions { display: flex; gap: .8rem; justify-content: flex-end; flex-wrap: wrap; }

/* ---- Điện thoại / màn hình nhỏ: cuộn tự nhiên ---------------------------------------- */
@media (max-width: 700px) {
  .ps-app { padding: .8rem; }
  .ps-top h1 { font-size: 1.3rem; }
  .ps-q-text { font-size: 1.8rem; }
  .ps-q-text.is-long { font-size: 1.4rem; }
  .ps-q-text.is-xlong { font-size: 1.15rem; }
  .ps-question-card { padding: 1.2rem; }
  .ps-q-answer { font-size: 1.3rem; }
  /* Điện thoại: trang cuộn tự nhiên nên giữ nút luôn sát đáy màn hình */
  .ps-bottombar {
    position: sticky;
    bottom: 0;
    padding: .6rem 0 .2rem;
    background: linear-gradient(rgba(0, 0, 0, 0), var(--sky-bottom) 40%);
  }
}

/* Màn hình máy tính: không có thanh cuộn trang. Khung cảnh phủ kín cửa sổ (vừa chiều cao, tối thiểu 1100px),
   thanh tiêu đề, tiến độ, phân trang và nút "Tìm kiếm" nổi lên trên cảnh để cảnh to nhất có thể. */
@media (min-width: 701px) and (min-height: 500px) {
  body.ps-player { height: 100vh; overflow: hidden; }
  body.ps-player .ps-app { height: 100vh; min-height: 0; padding: 0; gap: 0; position: relative; }

  .ps-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 8;
    padding: .45rem .9rem;
    pointer-events: none;
  }
  .ps-top > * { pointer-events: auto; }
  .ps-top h1 {
    font-size: 1.35rem;
    padding: .1rem .7rem;
    border-radius: .7rem;
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    max-width: 26vw; /* chừa chỗ cho thanh tiến độ ở giữa; tên dài thì cắt bằng "…" */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ps-stage { position: absolute; inset: 0; display: block; }
  .ps-stage[hidden] { display: none; }
  .ps-street-scroll { position: absolute; inset: 0; display: flex; overflow: auto; padding: 0; }
  .ps-street-inner {
    margin: auto;
    width: max(1100px, min(100vw, calc(100vh * 16 / 9 - 2px)));
    min-width: 0;
    border-radius: 0;
    box-shadow: none;
    flex: none;
  }

  .ps-pager, .ps-progress {
    position: absolute;
    z-index: 8;
    padding: .25rem .7rem;
    border-radius: .8rem;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    box-shadow: 0 .1rem .4rem rgba(0, 0, 0, .2);
  }
  .ps-pager { left: .9rem; bottom: .8rem; gap: .4rem; font-size: 1rem; }
  .ps-pager .ps-btn { padding: .3rem .7rem; font-size: 1rem; }
  .ps-pager[hidden] { display: none; }
  .ps-progress {
    top: .55rem;
    left: 50%;
    transform: translateX(-50%);
    max-width: 42vw;
    font-size: .95rem;
    line-height: 1.2;
    text-align: center;
  }

  .ps-bottombar {
    position: absolute;
    left: 0; right: 0; bottom: .8rem;
    z-index: 8;
    padding: 0;
    pointer-events: none;
  }
  .ps-bottombar .ps-btn { pointer-events: auto; }
  .ps-settings { position: absolute; right: .9rem; bottom: 0; }
}

/* ---- Chuyển động nền (spec 008): chỉ animate transform và opacity; tối đa 12 phần tử (xem ambient.js) ---- */
.amb { transform-box: view-box; transform-origin: 0 0; }
.amb-drift { animation: amb-drift linear infinite alternate; }
.amb-sway { animation: amb-sway ease-in-out infinite alternate; }
.amb-sway-small { animation: amb-sway-small ease-in-out infinite alternate; }
.amb-flicker { animation: amb-flicker ease-in-out infinite alternate; }
.amb-fly-r { animation: amb-fly-r linear infinite; }
.amb-fly-l { animation: amb-fly-l linear infinite; }
.amb-flutter { animation: amb-flutter ease-in-out infinite; }
.amb-flap { transform-box: view-box; transform-origin: 0 0; animation: amb-flap .22s ease-in-out infinite alternate; }
@keyframes amb-drift { from { transform: translateX(-45px); } to { transform: translateX(45px); } }
@keyframes amb-sway { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
@keyframes amb-sway-small { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes amb-flicker { from { opacity: .8; } to { opacity: 1; } }
@keyframes amb-fly-r { from { transform: translate(-80px, var(--fy)); } to { transform: translate(1680px, calc(var(--fy) - 36px)); } }
@keyframes amb-fly-l { from { transform: translate(1680px, var(--fy)); } to { transform: translate(-80px, calc(var(--fy) - 36px)); } }
@keyframes amb-flutter {
  0%, 100% { transform: translate(var(--bx), var(--by)); }
  25% { transform: translate(calc(var(--bx) + 42px), calc(var(--by) - 26px)); }
  50% { transform: translate(calc(var(--bx) + 84px), calc(var(--by) - 4px)); }
  75% { transform: translate(calc(var(--bx) + 40px), calc(var(--by) - 32px)); }
}
@keyframes amb-flap { from { transform: scaleX(1); } to { transform: scaleX(.35); } }

/* Khói ống khói */
.ps-house .puff { fill: #eef1f5; stroke: rgba(0, 0, 0, .12); stroke-width: .6; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ps-puff 3s ease-out infinite; }
.ps-house .puff.p2 { animation-delay: -1.5s; }
@keyframes ps-puff {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  20% { opacity: .85; }
  100% { opacity: 0; transform: translate(6px, -22px) scale(1.8); }
}

/* Tắt chuyển động nền (cấu hình ambient = false, giáo viên chọn Giảm/Tắt, hoặc máy yếu) và tạm dừng khi đang hỏi */
.ps-street-inner[data-ambient="off"] .amb, .ps-street-inner[data-ambient="off"] .puff { animation: none; }
.ps-street-inner[data-ambient="off"] .amb-fly, .ps-street-inner[data-ambient="off"] .amb-flutter { display: none; }
.ps-street-inner.is-paused .amb, .ps-street-inner.is-paused .puff { animation-play-state: paused; }

/* ---- Chủ đề buổi chiều (sceneTheme = evening): lớp phủ màu, mặt trời thấp, đèn đường và cửa sổ sáng ---- */
.ps-scene .sun { display: none; fill: #ffcf8a; }
.ps-street-inner[data-time="evening"] { --lamp-glow: .55; }
.ps-street-inner[data-time="evening"] .sun { display: inline; }
.ps-street-inner[data-time="evening"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: #ffb878;
  opacity: .22;
  mix-blend-mode: multiply;
}
.ps-street-inner[data-time="evening"] .ps-house:not(.is-lit) .win { fill: #ffe9a8; }
.ps-street-inner[data-time="evening"] .ps-house:not(.is-lit) .win-light { opacity: .3; }

/* Nút nhỏ của giáo viên: Hiệu ứng, Âm thanh (góc dưới bên phải trên máy tính; thanh đáy trên điện thoại) */
.ps-settings { display: flex; gap: .5rem; align-items: center; }
.ps-mini { font-size: .95rem; padding: .3rem .7rem; }

/* ---- Giảm chuyển động ------------------------------------------------------------------
   Theo hệ điều hành (prefers-reduced-motion) khi giáo viên chưa chọn, hoặc theo nút "Hiệu ứng: Giảm/Tắt"
   (player.js đặt data-motion trên <html>). Giáo viên chọn "Đầy đủ" thì thắng cả hệ điều hành. */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) .ps-police *, :root:not([data-motion="full"]) .amb,
  :root:not([data-motion="full"]) .amb-flap, :root:not([data-motion="full"]) .puff,
  :root:not([data-motion="full"]) .ps-student.is-out svg, :root:not([data-motion="full"]) .ps-fx { animation: none !important; }
  :root:not([data-motion="full"]) .amb-fly, :root:not([data-motion="full"]) .amb-flutter { display: none; }
  :root:not([data-motion="full"]) .ps-student, :root:not([data-motion="full"]) .ps-house,
  :root:not([data-motion="full"]) .ps-house .door, :root:not([data-motion="full"]) .ps-house .door-inner,
  :root:not([data-motion="full"]) .ps-house .ps-house-name { transition: none; }
}
:root[data-motion="reduced"] .ps-police *, :root[data-motion="off"] .ps-police *,
:root[data-motion="reduced"] .amb, :root[data-motion="off"] .amb,
:root[data-motion="reduced"] .amb-flap, :root[data-motion="off"] .amb-flap,
:root[data-motion="reduced"] .puff, :root[data-motion="off"] .puff,
:root[data-motion="reduced"] .ps-student.is-out svg, :root[data-motion="off"] .ps-student.is-out svg,
:root[data-motion="reduced"] .ps-fx, :root[data-motion="off"] .ps-fx { animation: none !important; }
:root[data-motion="reduced"] .amb-fly, :root[data-motion="off"] .amb-fly,
:root[data-motion="reduced"] .amb-flutter, :root[data-motion="off"] .amb-flutter { display: none; }
:root[data-motion="reduced"] .ps-student, :root[data-motion="off"] .ps-student,
:root[data-motion="reduced"] .ps-house, :root[data-motion="off"] .ps-house,
:root[data-motion="reduced"] .ps-house .door, :root[data-motion="off"] .ps-house .door,
:root[data-motion="reduced"] .ps-house .door-inner, :root[data-motion="off"] .ps-house .door-inner,
:root[data-motion="reduced"] .ps-house .ps-house-name, :root[data-motion="off"] .ps-house .ps-house-name { transition: none; }