/* ==========================================================================
   GIAO DIEN CHUNG — dung cho MOI game

   Bang mau, kieu chu, nut, the, hop thoai, man hinh chinh, responsive.
   KHONG sua file nay de doi rieng mot game — hay viet de len trong
   games/<ten-game>/game.css.
============================================================================ */

/* ============================================================ TOKENS */
:root {
  /* Paper */
  --paper-0: #FDF6E7;
  --paper-1: #F7EAD0;
  --paper-2: #F0D9B5;
  --paper-3: #E3C79A;
  --brown-0: #3B2A1E;
  --brown-1: #5A4231;
  --brown-2: #8A6C50;
  --red-0: #8C2A12;
  --red-1: #C0392B;
  /* Lacquer */
  --ink-0: #0B0A08;
  --ink-1: #14100C;
  --ink-2: #1E1811;
  --ink-3: #2A2116;
  --gold-0: #F3D07A;
  --gold-1: #D9A441;
  --gold-2: #9A6E23;
  --text-w: #F0D9B5;
  /* Game */
  --river-deep: #14262B;
  --river-mid: #1D3A3A;
  --river-shal: #2E4A3F;
  --foam: #CFE7E2;
  --stake: #B07A3C;
  --stake-hi: #E0B36A;
  --enemy: #7E1F14;
  --ally: #C0392B;
  --danger: #E24B3A;
  --jade: #3E6B57;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --r1: 6px;
  --r2: 12px;
  --r3: 20px;
  --r9: 999px;
  --sh1: 0 1px 2px rgba(20, 12, 4, .18);
  --sh2: 0 4px 12px rgba(20, 12, 4, .22);
  --sh3: 0 10px 24px rgba(20, 12, 4, .28);

  --lacq-1: #1C1710;
  --lacq-2: #191309;
  /* vệt loang nền tối */
  --surface: rgba(20, 16, 12, .55);
  --surface-2: rgba(0, 0, 0, .34);
  --surface-3: rgba(0, 0, 0, .3);
  --muted-w: rgba(240, 217, 181, .75);
  --track: rgba(255, 255, 255, .08);
  --bevel-hi: rgba(255, 236, 190, .07);
  --bevel-edge: rgba(255, 236, 190, .16);
  --bevel-lo: rgba(0, 0, 0, .7);
  --gold-sheen: linear-gradient(180deg, #FFF0C4 0%, #F3D07A 38%, #C9922B 62%, #F6DFA0 100%);
  --shadow-dark: rgba(0, 0, 0, .5);
  --scrim: rgba(11, 10, 8, .55);
  --toast-bg: rgba(20, 16, 12, .94);
  --head-shadow: rgba(0, 0, 0, .5);

  /* ------------------------------------------------------- CHỮ NGHĨA
 Không tải font ngoài (game chạy offline), nên chọn font có sẵn trên
 cả Windows · iPadOS · Android và ĐỦ DẤU TIẾNG VIỆT.
 Tiêu đề dùng serif cổ điển cho không khí sử thi; thân bài dùng font hệ
 thống để chữ Việt luôn hiển thị đúng dấu và đọc tốt trên màn nhỏ.      */
  --ff-head: "Cambria", "Constantia", "Palatino Linotype", Georgia,
    "Times New Roman", "Noto Serif", "Source Serif Pro", serif;
  --ff-body: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI",
    "SF Pro Text", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --ff-num: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Roboto Mono", "Noto Sans Mono", monospace;

  /* thang cỡ chữ: co theo bề rộng nhưng luôn ≥ ngưỡng đọc được trên điện thoại */
  --fs-hero: clamp(30px, 5.2vw, 52px);
  --fs-h1: clamp(23px, 3.4vw, 34px);
  --fs-h2: clamp(19px, 2.4vw, 26px);
  --fs-h3: clamp(16px, 15px + 0.35vw, 20px);
  --fs-body: clamp(15px, 14.1px + 0.35vw, 17.5px);
  --fs-sm: clamp(13.5px, 12.6px + 0.23vw, 15px);
  --fs-label: clamp(10px, 1vw, 11px);
  /* nhãn IN HOA có giãn chữ */
  --lh-body: 1.6;
  /* dấu tiếng Việt 2 tầng cần khoảng thở */
  --lh-head: 1.25;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------------- SKIN "TƯƠI SÁNG" (pastel · ban ngày) ---------------- */
body.theme-bright {
  --paper-0: #FFFDFC;
  --paper-1: #FFF3F7;
  --paper-2: #FFE6EF;
  --paper-3: #F7CBDD;
  --brown-0: #4B3357;
  --brown-1: #6E5480;
  --brown-2: #9C86AE;
  --red-0: #DC4E8C;
  --red-1: #F778A9;
  --ink-0: #E6F6FF;
  --ink-1: #F7FCFF;
  --ink-2: #FFFFFF;
  --ink-3: #D9EFFC;
  --lacq-1: #FFF6E6;
  --lacq-2: #E7F6FF;
  --gold-0: #C2760D;
  --gold-1: #F2A93E;
  --gold-2: #EBC38C;
  --text-w: #4B3357;
  --river-deep: #4FB4C8;
  --river-mid: #67CBD8;
  --river-shal: #8FE0DF;
  --jade: #2FA97C;
  --danger: #F0576B;
  --surface: rgba(255, 255, 255, .62);
  --surface-2: rgba(255, 255, 255, .78);
  --surface-3: rgba(255, 255, 255, .8);
  --scrim: rgba(120, 90, 140, .38);
  --toast-bg: rgba(255, 251, 253, .97);
  --head-shadow: rgba(255, 255, 255, .85);
  --bevel-hi: rgba(255, 255, 255, .75);
  --bevel-edge: rgba(255, 255, 255, .9);
  --bevel-lo: rgba(150, 110, 170, .35);
  --gold-sheen: linear-gradient(180deg, #FFD9A0 0%, #F2A93E 45%, #D9821B 65%, #FFE0B0 100%);
  --muted-w: #6E5480;
  --track: rgba(75, 51, 87, .12);
  --shadow-dark: rgba(140, 100, 160, .28);
}

body.theme-bright .toast {
  background: rgba(255, 251, 253, .97);
  color: var(--brown-0);
  border-color: var(--gold-1)
}

body.theme-bright .modal-bg {
  background: rgba(120, 90, 140, .38)
}

body.theme-bright .bubble.them {
  background: #FFF4DC;
  color: var(--brown-0);
  border-color: var(--gold-2)
}

body.theme-bright .bubble.me {
  background: #FFDDEA;
  color: var(--brown-0)
}

body.theme-bright .card-back {
  background: linear-gradient(150deg, #FF9EC4, #E0518A)
}

body.theme-bright .disc {
  background: radial-gradient(circle at 38% 32%, #FFF6E6, #FFD9E7 70%)
}

body.theme-bright .btn:not(.ghost) {
  background: linear-gradient(180deg, var(--red-1), var(--red-0));
  border-color: #C43F79
}

body.theme-bright .act.primary {
  border-color: #C43F79
}

body.theme-bright .hcard .hc-top {
  background: #9C86AE
}

body.theme-bright .era-0 .hc-top {
  background: #E8A33C
}

body.theme-bright .era-1 .hc-top {
  background: #DC4E8C
}

body.theme-bright .era-2 .hc-top {
  background: #2FA97C
}

body.theme-bright .era-3 .hc-top {
  background: #4C9BE0
}

body.theme-bright .wm-main {
  fill: var(--red-0);
  stroke: #FFFFFF
}

body.theme-bright .wm-gold {
  fill: #6E4C8A;
  stroke: #F2A93E
}

body.theme-bright .wm-shadow {
  fill: #C98BB0;
  opacity: .4
}

*,
*::before,
*::after {
  box-sizing: border-box
}

html,
body {
  height: 100%
}

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--brown-0);
  background: var(--ink-0);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none
}

input[type=checkbox] {
  accent-color: var(--gold-1);
  width: 18px;
  height: 18px;
  cursor: pointer
}

:focus-visible {
  outline: 2px solid var(--gold-0);
  outline-offset: 2px;
  border-radius: var(--r1)
}

h1,
h2,
h3 {
  font-family: var(--ff-head);
  margin: 0;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: var(--lh-head);
  text-wrap: balance
}

p {
  text-wrap: pretty
}

/* iOS tự phóng to trang khi ô nhập có cỡ chữ < 16px → luôn để ≥16px */
input,
select,
textarea {
  font-family: inherit;
  font-size: 16px
}

p {
  margin: 0
}

[hidden] {
  display: none !important
}

/* ---- lớp ảnh minh hoạ: raster khi có file, SVG khi thiếu ---- */
.art {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  line-height: 0;
  min-width: 0;
  max-width: 100%;
  width: 100%
}

/* khung chứa ảnh: cột không được nở theo kích thước gốc của ảnh */
.splash-in,
.pod-side,
.card-art,
.hc-art,
.hero-art,
.guide-art,
.avatar,
.kids,
.splash-art,
.pod-cover,
.figure-wrap,
.voice-box,
.pod-meta,
.pod-controls {
  grid-template-columns: minmax(0, 1fr)
}

.art img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain
}

.art.fill,
.art.fill img {
  width: 100%;
  height: 100%
}

.art.fill img {
  object-fit: cover;
  max-width: none
}

.art .art-fallback {
  display: none;
  width: 100%;
  height: auto
}

.art.art-missing .art-fallback {
  display: block
}

.art.art-missing img {
  display: none
}

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

/* ======================================================== BACKDROPS */
#app {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh
}

/* 100dvh: thanh địa chỉ di động không làm nhảy layout */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  overflow: hidden auto;
  overscroll-behavior: contain;
}

/* backwards (không phải both): giữ nguyên trạng thái đầu trước khi chạy, nhưng
   chạy xong thì bỏ hẳn transform. Nếu để both, computed transform còn lại một
   ma trận và màn hình biến thành gốc toạ độ của mọi lớp phủ position:fixed. */
.screen.active {
  display: flex;
  animation: scr-in .32s var(--ease) backwards
}

@keyframes scr-in {
  from {
    opacity: 0;
    transform: translateY(12px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.paper {
  color: var(--brown-0);
  background:
    radial-gradient(120% 90% at 12% 8%, #FFFDF6 0%, rgba(255, 253, 246, 0) 55%),
    radial-gradient(90% 70% at 88% 18%, #FBEFD8 0%, rgba(251, 239, 216, 0) 60%),
    radial-gradient(120% 100% at 50% 110%, #EBD7B2 0%, rgba(235, 215, 178, 0) 60%),
    linear-gradient(160deg, var(--paper-0), var(--paper-2));
}

.lacquer {
  color: var(--text-w);
  background:
    radial-gradient(90% 70% at 50% 0%, var(--lacq-1) 0%, transparent 62%),
    radial-gradient(120% 120% at 50% 120%, var(--lacq-2) 0%, transparent 55%),
    linear-gradient(180deg, var(--ink-1), var(--ink-0));
}

.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap {
  width: min(1180px, 100%);
  margin-inline: auto;
  padding: clamp(16px, 3vw, 32px);
  padding-bottom: calc(clamp(16px, 3vw, 32px) + env(safe-area-inset-bottom))
}

/* Ô nội dung không được co lại trong flex cột, nếu không phần tràn sẽ bị cắt
   mà màn hình lại tưởng là vừa đủ nên không cho cuộn (lỗi trên iPhone). */
.screen>.wrap {
  flex: none
}

/* ========================================================= WORDMARK */
.wordmark {
  display: block;
  width: min(560px, 86vw);
  height: auto
}

.wordmark text {
  font-family: var(--ff-head);
  font-weight: 700;
  letter-spacing: .06em;
  paint-order: stroke fill;
  stroke-linejoin: round;
}

.wm-shadow {
  fill: #6B3A16;
  opacity: .32;
  transform: translateY(2px)
}

.wm-main {
  fill: var(--red-0);
  stroke: var(--paper-0);
  stroke-width: 10px
}

.wm-gold {
  fill: var(--brown-0);
  stroke: url(#foil);
  stroke-width: 9px
}

.wm-sheen {
  animation: sheen 4.6s ease-in-out infinite
}

@keyframes sheen {

  0%,
  62% {
    transform: translateX(0)
  }

  100% {
    transform: translateX(900px)
  }
}

/* =========================================================== SPLASH */
#scr-splash {
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  cursor: pointer
}

@supports (justify-content:safe center) {
  #scr-splash {
    justify-content: safe center
  }
}

.splash-in {
  display: grid;
  gap: var(--s4);
  justify-items: center;
  animation: rise .7s var(--ease) both
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(24px) scale(.97)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.tagline {
  font-family: var(--ff-head);
  letter-spacing: .28em;
  text-transform: uppercase;
  font-size: clamp(11px, 1.6vw, 14px);
  color: var(--brown-1);
  border-block: 1px solid rgba(140, 42, 18, .35);
  padding: 6px 14px;
}

.loadbar {
  width: min(360px, 70vw);
  height: 14px;
  border-radius: var(--r9);
  background: var(--paper-3);
  border: 2px solid var(--brown-2);
  overflow: hidden;
  box-shadow: var(--sh1) inset
}

.loadbar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--r9);
  background: linear-gradient(90deg, var(--red-1), var(--gold-1));
  transition: width .18s linear
}

.splash-quote {
  font-family: var(--ff-head);
  font-style: italic;
  color: var(--brown-1)
}

.mini-heroes {
  display: flex;
  gap: var(--s4);
  align-items: flex-end
}

.mini-heroes svg {
  width: clamp(84px, 12vw, 124px);
  height: auto;
  filter: drop-shadow(0 6px 10px rgba(60, 35, 15, .25))
}

/* ảnh bìa ở splash: bo góc kiểu khung tranh, viền vàng kép */
.splash-art {
  width: min(300px, 58vw);
  border-radius: var(--r3);
  overflow: hidden;
  box-shadow: 0 0 0 3px var(--gold-1), 0 0 0 6px var(--paper-0), 0 16px 34px rgba(60, 35, 15, .3)
}

.splash-art .art {
  width: 100%
}

.splash-art .art img {
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: 50% 12%
}

.kids {
  width: min(190px, 44vw);
  margin-top: -14px;
  filter: drop-shadow(0 8px 12px rgba(60, 35, 15, .28))
}

.kids .art {
  width: 100%
}

.kids-col {
  position: absolute;
  right: clamp(12px, 3vw, 32px);
  top: 6px;
  width: 132px;
  margin: 0;
  pointer-events: none;
  opacity: .96
}

@media (max-width:820px) {
  .kids-col {
    display: none
  }
}

.skyline {
  width: min(680px, 92vw);
  height: auto;
  margin-top: -6px
}

.float {
  animation: float 3.4s ease-in-out infinite
}

.float:nth-child(2) {
  animation-delay: -1.7s
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-8px)
  }
}

/* ============================================================== MAP */
.map-stage {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--s4)
}

.city {
  /* Do theo KHUNG CHUA, khong phai theo man hinh. Dung 96vw thi o khổ 393px
     ban do rong hon ca khung giay boc no va lam trang tran ngang 30px. */
  width: 100%;
  max-width: 1000px;
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(60, 35, 15, .16))
}

.pin-btn {
  position: absolute;
  transform: translate(-50%, -100%);
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 2px;
  border-radius: var(--r2)
}

.pin-btn svg {
  width: 44px;
  height: 56px;
  filter: drop-shadow(0 4px 6px rgba(60, 35, 15, .35))
}

.pin-btn .pin-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--brown-0);
  background: rgba(253, 246, 231, .9);
  border: 1px solid var(--paper-3);
  border-radius: var(--r9);
  padding: 2px 10px;
  white-space: nowrap
}

.pin-btn.locked {
  opacity: .45;
  cursor: not-allowed
}

.pin-btn.active svg {
  animation: pin-pulse 1.8s ease-in-out infinite
}

@keyframes pin-pulse {

  0%,
  100% {
    transform: translateY(0) scale(1)
  }

  50% {
    transform: translateY(-7px) scale(1.06)
  }
}

.pin-ring {
  position: absolute;
  left: 50%;
  top: calc(100% - 6px);
  width: 26px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid var(--red-1);
  animation: ring 1.8s ease-out infinite;
  pointer-events: none
}

@keyframes ring {
  0% {
    transform: translate(-50%, -50%) scale(.6);
    opacity: .9
  }

  100% {
    transform: translate(-50%, -50%) scale(2.6);
    opacity: 0
  }
}

.card-note {
  background: linear-gradient(180deg, #FFFDF6, var(--paper-1));
  border: 1px solid var(--paper-3);
  border-left: 5px solid var(--red-0);
  border-radius: var(--r2);
  padding: var(--s4) var(--s5);
  box-shadow: var(--sh2);
  max-width: 640px;
  display: grid;
  gap: var(--s2);
}

/* Thanh điều hướng dính: nút quay lại không bao giờ trôi khỏi màn khi cuộn */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  padding: max(var(--s3), env(safe-area-inset-top)) clamp(12px, 3vw, 28px) var(--s3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px)
}

.paper>.topbar {
  background: rgba(253, 246, 231, .96);
  box-shadow: 0 6px 16px -12px rgba(60, 35, 15, .9);
  border-bottom: 1px solid rgba(140, 42, 18, .16)
}

.lacquer>.topbar {
  background: rgba(11, 10, 8, .95);
  box-shadow: 0 6px 16px -12px rgba(0, 0, 0, 1);
  border-bottom: 1px solid rgba(243, 208, 122, .24)
}

.topbar .spacer {
  flex: 1
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid currentColor;
  border-radius: var(--r9);
  padding: 8px 15px;
  font-size: var(--fs-sm);
  font-weight: 600;
  opacity: .9;
  min-height: 44px
}

.chip:hover {
  opacity: 1;
  background: rgba(140, 42, 18, .07)
}

.lacquer .chip:hover {
  background: rgba(243, 208, 122, .1)
}

/* ============================================================= HERO */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(16px, 3vw, 40px);
  align-items: center;
  flex: 1
}

.hero-art {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--s5);
  background: radial-gradient(60% 60% at 50% 45%, #FFF8E6, rgba(255, 248, 230, 0) 70%)
}

.hero-art svg.figure {
  position: relative;
  width: min(340px, 70vw);
  height: auto;
  filter: drop-shadow(0 18px 26px rgba(60, 35, 15, .28)) drop-shadow(0 2px 0 rgba(255, 255, 255, .5))
}

/* chân dung lớn ở màn Nhân vật: đóng khung tròn kiểu huy hiệu */
.figure-wrap {
  position: relative;
  width: min(330px, 72vw)
}

.figure-wrap .art {
  width: 100%;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 4px var(--paper-0), 0 0 0 7px var(--gold-1), 0 18px 34px rgba(60, 35, 15, .32);
  background: radial-gradient(60% 60% at 50% 40%, #FFF6E4, #EBD7B0)
}

.figure-wrap .art img {
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 40% 16%
}

.figure-wrap .art-fallback {
  padding: 12%
}

.hero-halo {
  position: absolute;
  width: min(520px, 92%);
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  pointer-events: none;
  animation: halo-spin 60s linear infinite
}

@keyframes halo-spin {
  to {
    transform: translate(-50%, -52%) rotate(360deg)
  }
}

.hero-name {
  font-size: clamp(30px, 5.4vw, 54px);
  color: var(--red-0);
  line-height: 1.1
}

.hero-sub {
  color: var(--brown-1);
  font-size: clamp(14px, 2vw, 17px);
  margin-top: 6px
}

.rule {
  height: 2px;
  background: linear-gradient(90deg, var(--gold-1), rgba(217, 164, 65, 0));
  margin: var(--s4) 0
}

.acts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  max-width: 520px
}

.act {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: var(--s4) var(--s2);
  border-radius: var(--r2);
  border: 2px solid var(--paper-3);
  background: linear-gradient(180deg, #FFFDF6, var(--paper-1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--sh1);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), border-color .12s
}

.act:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh2);
  border-color: var(--gold-1)
}

.act:active {
  transform: translateY(0) scale(.985)
}

.act-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), 0 4px 10px -4px rgba(60, 35, 15, .6);
  border: 2px solid rgba(255, 255, 255, .7)
}

.act-icon svg {
  width: 30px;
  height: 30px;
  color: #fff;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25))
}

.act-learn .act-icon {
  background: linear-gradient(180deg, #F6C453, #E0A22B)
}

.act-chat .act-icon {
  background: linear-gradient(180deg, #5FBF7C, #2E9455)
}

.act-play .act-icon {
  background: linear-gradient(180deg, #5AA9E6, #2E6FB7)
}

.act-listen .act-icon {
  background: linear-gradient(180deg, #A98BE0, #6E4BB8)
}

.act svg {
  width: 34px;
  height: 34px
}

.act b {
  font-family: var(--ff-head);
  letter-spacing: .12em;
  font-size: var(--fs-sm)
}

.act small {
  color: var(--brown-2);
  font-size: var(--fs-sm);
  line-height: 1.35
}

.act.primary {
  background: linear-gradient(180deg, var(--red-1), var(--red-0));
  color: var(--paper-0);
  border-color: #6E1F0C
}

.act.primary small {
  color: rgba(253, 246, 231, .8)
}

.act.primary {
  position: relative;
  animation: play-glow 2.6s ease-in-out infinite
}

@keyframes play-glow {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(217, 164, 65, .0), var(--sh1)
  }

  50% {
    box-shadow: 0 0 0 6px rgba(217, 164, 65, .18), var(--sh2)
  }
}

/* ============================================================ MODAL */
/* dvh: trên iOS Safari, fixed+inset:0 lấy theo layout viewport (coi như đã ẩn
   thanh địa chỉ) nên đáy hộp thoại chui xuống dưới thanh công cụ, bấm không tới. */
.modal {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: none;
  z-index: 40
}

.modal.open {
  display: block
}

.modal-bg {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  backdrop-filter: blur(2px);
  animation: fade .2s ease-out both
}

@keyframes fade {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.sheet {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(540px, 100%);
  padding: clamp(16px, 3vw, 28px);
  overflow: auto;
  animation: slide-in .3s var(--ease) backwards;
  box-shadow: -12px 0 30px rgba(0, 0, 0, .3);
}

@keyframes slide-in {
  from {
    transform: translateX(24px);
    opacity: 0
  }

  to {
    transform: none;
    opacity: 1
  }
}

.dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, 94vw);
  max-height: 90vh;
  max-height: 90dvh;
  overflow: auto;
  border-radius: var(--r3);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: clamp(16px, 3vw, 28px);
  animation: pop .28s var(--ease) both;
}

@keyframes pop {
  from {
    transform: translate(-50%, -48%) scale(.96);
    opacity: 0
  }

  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1
  }
}

.sheet.paper,
.dialog.paper {
  border-left: 3px solid var(--gold-1)
}

.dialog.lacquer,
.sheet.lacquer {
  border: 2px solid var(--gold-2);
  box-shadow: 0 0 0 1px var(--gold-0) inset, 0 18px 40px var(--shadow-dark)
}

.close-x {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 40px;
  height: 40px;
  border-radius: var(--r9);
  display: grid;
  place-items: center;
  font-size: 20px;
  border: 1px solid currentColor;
  opacity: .7
}

.close-x:hover {
  opacity: 1
}

.skills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s3);
  margin-top: var(--s4)
}

.skill {
  text-align: center;
  padding: var(--s3);
  border-radius: var(--r2);
  background: rgba(217, 164, 65, .12);
  border: 1px solid rgba(217, 164, 65, .5)
}

.skill b {
  display: block;
  font-family: var(--ff-head);
  color: var(--red-0);
  font-size: 14px;
  margin: 6px 0 4px
}

.skill small {
  font-size: 12px;
  color: var(--brown-1);
  line-height: 1.4;
  display: block
}

.quote {
  font-family: var(--ff-head);
  font-style: italic;
  font-size: clamp(16px, 2.4vw, 20px);
  line-height: 1.5;
  border-left: 4px solid var(--gold-1);
  padding-left: var(--s4);
  margin: var(--s5) 0;
  color: var(--brown-1)
}

.facts {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s4);
  padding: 0;
  list-style: none
}

.facts li {
  display: flex;
  gap: 10px;
  line-height: var(--lh-body);
  font-size: var(--fs-body);
  animation: fact-in .3s var(--ease) both
}

.facts li::before {
  content: "◆";
  color: var(--gold-1);
  flex: none
}

@keyframes fact-in {
  from {
    opacity: 0;
    transform: translateY(8px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* --- người dẫn chuyện Streety --- */
.guide {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-top: var(--s4)
}

.guide-art {
  width: 88px;
  flex: none
}

.guide-art .art {
  width: 100%
}

.guide-art img {
  filter: drop-shadow(0 6px 10px rgba(60, 35, 15, .25))
}

.guide-bubble {
  position: relative;
  flex: 1;
  background: #FFFDF6;
  border: 2px solid var(--gold-1);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: var(--sh1)
}

.guide-bubble::before {
  content: "";
  position: absolute;
  left: -9px;
  bottom: 16px;
  width: 14px;
  height: 14px;
  background: #FFFDF6;
  border-left: 2px solid var(--gold-1);
  border-bottom: 2px solid var(--gold-1);
  transform: rotate(45deg)
}

.guide-bubble b {
  display: block;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--red-0)
}

.guide-bubble p {
  font-size: var(--fs-sm);
  line-height: 1.55;
  margin-top: 2px;
  min-height: 2.6em
}

/* --- tiến độ đọc --- */
.learn-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--s4);
  font-size: 12px;
  color: var(--brown-2)
}

.learn-progress #learn-count {
  font-family: var(--ff-num);
  font-size: 15px;
  color: var(--red-0);
  font-weight: 700
}

.lp-bar {
  flex: 1;
  height: 8px;
  border-radius: var(--r9);
  background: var(--paper-3);
  overflow: hidden
}

.lp-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--r9);
  background: linear-gradient(90deg, var(--gold-1), var(--red-1));
  transition: width .35s var(--ease)
}

.note {
  font-size: 12px;
  opacity: .7;
  margin-top: var(--s4)
}

/* ============================================================= CHAT */
.chat-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  border-bottom: 1px solid var(--gold-2);
  padding-bottom: var(--s3)
}

/* avatar tròn dùng chân dung thật */
.avatar {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  box-shadow: 0 0 0 2px var(--gold-1), 0 2px 6px rgba(0, 0, 0, .35);
  background: #EBD7B0
}

.avatar .art {
  width: 100%;
  height: 100%
}

.avatar .art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 14%
}

.hud-hero .avatar {
  width: 42px;
  height: 42px
}

.chat-log {
  display: grid;
  gap: var(--s3);
  padding: var(--s4) 0;
  max-height: 46vh;
  overflow: auto
}

.bubble {
  max-width: 78%;
  padding: 11px 15px;
  border-radius: 14px;
  line-height: var(--lh-body);
  font-size: var(--fs-body);
  animation: pop-b .22s var(--ease) both
}

@keyframes pop-b {
  from {
    opacity: 0;
    transform: translateY(6px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.bubble.them {
  background: rgba(243, 208, 122, .08);
  border: 1px solid var(--gold-2);
  color: var(--text-w);
  justify-self: start;
  border-bottom-left-radius: 4px
}

.bubble.me {
  background: var(--paper-1);
  color: var(--brown-0);
  justify-self: end;
  border-bottom-right-radius: 4px
}

.bubble .who {
  display: block;
  font-size: 12px;
  color: var(--gold-0);
  margin-bottom: 2px
}

/* ô nhập câu hỏi tự do */
.chat-input {
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--gold-2);
  padding-top: var(--s3);
  margin-bottom: var(--s3)
}

.chat-input input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 0 15px;
  font-size: 16px;
  color: var(--text-w);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--gold-2);
  border-radius: var(--r9)
}

.chat-input input::placeholder {
  color: var(--muted-w);
  opacity: .8
}

.chat-input input:focus {
  outline: 2px solid var(--gold-0);
  outline-offset: 1px;
  background: rgba(255, 255, 255, .1)
}

.chat-send {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--r9);
  border: 1px solid var(--gold-2);
  color: var(--gold-0);
  font-size: 18px;
  display: grid;
  place-items: center
}

.chat-send:hover {
  background: rgba(243, 208, 122, .14)
}

body.theme-bright .chat-input input {
  color: var(--brown-0);
  background: #fff
}

.suggests {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  border-top: 1px solid var(--gold-2);
  padding-top: var(--s3)
}

.suggests button {
  border: 1px solid var(--gold-2);
  color: var(--gold-0);
  border-radius: var(--r9);
  padding: 9px 15px;
  font-size: var(--fs-sm);
  min-height: 44px
}

.suggests button:hover {
  background: rgba(243, 208, 122, .12)
}

/* ========================================================== PODCAST */
.player {
  display: grid;
  gap: var(--s4);
  justify-items: center;
  text-align: center
}

.disc {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 38% 32%, #3a2f1e, #0d0b07 70%);
  border: 2px solid var(--gold-2)
}

.disc.spin {
  animation: spin 6s linear infinite
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

.wave {
  width: min(460px, 86vw);
  height: 56px
}

.wave rect {
  fill: var(--gold-1)
}

.pcontrols {
  display: flex;
  gap: var(--s3);
  align-items: center
}

.pbtn {
  width: 46px;
  height: 46px;
  border-radius: var(--r9);
  border: 1px solid var(--gold-2);
  display: grid;
  place-items: center
}

.pbtn.big {
  width: 60px;
  height: 60px;
  background: var(--gold-1);
  color: var(--ink-0)
}

.pbtn.off {
  opacity: .45
}

.voice-box {
  display: grid;
  gap: 8px;
  border: 1px solid var(--gold-2);
  border-radius: var(--r2);
  padding: 10px 12px;
  background: var(--surface-2)
}

.voice-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--muted-w)
}

.voice-row span {
  flex: none
}

#voice-select {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 40px;
  border-radius: var(--r2);
  padding: 0 8px;
  text-overflow: ellipsis;
  border: 1px solid var(--gold-2);
  background: rgba(255, 255, 255, .06);
  color: var(--text-w)
}

body.theme-bright #voice-select {
  background: #fff;
  color: var(--brown-0)
}

.voice-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.voice-actions .chip {
  font-size: var(--fs-sm);
  min-height: 40px;
  color: var(--gold-0)
}

.vh-list {
  margin: var(--s4) 0 0;
  padding-left: 22px;
  display: grid;
  gap: 12px;
  font-size: var(--fs-sm);
  line-height: 1.55
}

.vh-list b {
  color: var(--gold-0)
}

.vh-list code {
  background: rgba(243, 208, 122, .12);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: var(--ff-num);
  font-size: .92em
}

.pbtn[disabled] {
  opacity: .3;
  cursor: not-allowed
}

/* =========================================================== REWARD */
/* KHÔNG đặt position:relative ở đây: .screen vốn là absolute+inset:0 (đã là gốc
   toạ độ cho .spot/.confetti). Đặt relative sẽ đưa màn về dòng chảy thường, cao
   theo nội dung, tràn khỏi #app và không cuộn được. */
#scr-reward {
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: var(--s5)
}

/* safe center: căn giữa khi vừa màn, tự dồn lên đầu khi nội dung cao hơn màn
   để vẫn cuộn tới được hai nút dưới cùng */
@supports (justify-content:safe center) {
  #scr-reward {
    justify-content: safe center
  }
}

#scr-reward>.topbar {
  align-self: stretch
}

/* align-items:center làm topbar co lại */
@media (max-width:640px) {

  /* điện thoại: dồn khoảng trống để thấy được nhiều hơn */
  #scr-reward {
    gap: var(--s3)
  }

  #scr-reward .wrap {
    gap: var(--s3) !important;
    padding-top: var(--s3)
  }

  #scr-reward h2 {
    font-size: clamp(19px, 5.2vw, 26px)
  }
}

.spot {
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 45% at 50% 42%, rgba(243, 208, 122, .16), rgba(0, 0, 0, 0) 70%);
  pointer-events: none
}

.flip-wrap {
  perspective: 1200px;
  perspective-origin: 50% 45%
}

.flip {
  width: min(300px, 76vw);
  aspect-ratio: 2/3;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.34, 1.2, .64, 1);
  animation: card-in .5s var(--ease) both
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(30px) scale(.9)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.flip {
  transform: rotateY(calc(var(--flip, 0)*1deg + var(--ry, 0deg))) rotateX(var(--rx, 0deg))
}

.flip.flipped {
  --flip: 180
}

.flip>div {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--r3);
  overflow: hidden
}

.flip .back {
  transform: rotateY(180deg)
}

.hero-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 3px solid transparent;
  border-radius: var(--r3);
  background:
    linear-gradient(180deg, #FFF8E6, var(--paper-2)) padding-box,
    var(--gold-sheen) border-box;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(154, 110, 35, .9) inset,
    0 0 0 5px rgba(255, 255, 255, .35) inset;
}

/* hoa văn guilloche mảnh chạy khắp mặt thẻ */
.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background:
    repeating-conic-gradient(from 0deg at 50% 34%, rgba(201, 146, 43, .16) 0deg 3deg, rgba(0, 0, 0, 0) 3deg 9deg),
    repeating-linear-gradient(72deg, rgba(154, 110, 35, .10) 0 1px, rgba(0, 0, 0, 0) 1px 7px),
    repeating-linear-gradient(-72deg, rgba(154, 110, 35, .08) 0 1px, rgba(0, 0, 0, 0) 1px 7px);
  mask-image: radial-gradient(120% 90% at 50% 32%, #000 30%, rgba(0, 0, 0, .25) 100%);
}

/* dải sáng foil quét chéo */
.hero-card::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -120%;
  width: 70%;
  height: 220%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  transform: rotate(18deg);
  pointer-events: none;
  animation: foil 5.2s ease-in-out infinite;
}

@keyframes foil {

  0%,
  58% {
    left: -120%
  }

  100% {
    left: 150%
  }
}

.card-back {
  background: linear-gradient(150deg, #7C1E10, #4A1108);
  border: 3px solid var(--gold-1);
  display: grid;
  place-items: center;
  gap: 8px
}

.card-top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: linear-gradient(180deg, #B33A1E, var(--red-0) 45%, #6E1F0C);
  color: var(--paper-0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 0 rgba(154, 110, 35, .9)
}

.card-top b {
  font-family: var(--ff-head);
  font-size: 12px;
  letter-spacing: .16em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35)
}

.card-art,
.card-name,
.card-foot {
  position: relative;
  z-index: 1
}

.card-art svg {
  filter: drop-shadow(0 10px 14px rgba(90, 55, 20, .28))
}

.card-name {
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7)
}

/* Cửa sổ chân dung: ảnh raster đặt chìm trong khung vàng, có bóng trong + viền sáng */
.card-art {
  flex: none;
  aspect-ratio: 1/1.06;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin: 8px 10px 6px;
  border-radius: 10px;
  background: radial-gradient(70% 60% at 50% 38%, #FFF4D8, #EBD7B0 78%);
  box-shadow: inset 0 0 0 2px rgba(154, 110, 35, .85), inset 0 0 0 3px rgba(255, 244, 214, .6),
    inset 0 10px 22px -12px rgba(60, 35, 15, .85), inset 0 -12px 20px -14px rgba(60, 35, 15, .6)
}

.card-art .art {
  width: 100%;
  height: 100%
}

.card-art .art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 38% 16%
}

.card-art svg {
  width: 64%;
  height: auto
}

.card-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 248, 225, .22), rgba(255, 248, 225, 0) 40%, rgba(70, 40, 10, .18))
}

.card-era {
  font-family: var(--ff-head);
  font-size: 9px;
  letter-spacing: .18em;
  opacity: .85
}

/* ánh sáng quét theo góc nghiêng */
.card-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(60% 45% at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%);
  mix-blend-mode: screen;
  transition: opacity .25s
}

.tilting .card-glare {
  opacity: 1
}

.card-art .rarity {
  position: absolute;
  left: 8px;
  top: 8px;
  font-size: 9px;
  letter-spacing: .14em;
  font-weight: 700;
  background: linear-gradient(180deg, var(--gold-0), var(--gold-1));
  color: #4A2C09;
  border-radius: var(--r9);
  padding: 3px 8px
}

.card-name {
  font-family: var(--ff-head);
  font-size: clamp(17px, 4.2vw, 22px);
  color: var(--red-0);
  text-align: center;
  padding: 0 8px;
  position: relative
}

.card-name::before {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  top: -4px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-1), transparent)
}

.card-foot {
  padding: 4px 10px 10px;
  text-align: center
}

.card-quote {
  font-family: var(--ff-head);
  font-style: italic;
  font-size: 11px;
  color: var(--brown-1);
  line-height: 1.4;
  margin-top: 6px
}

.card-skills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 8px
}

.card-skills span {
  display: grid;
  justify-items: center;
  gap: 2px;
  font-size: 9px;
  font-weight: 700;
  color: var(--brown-1);
  background: rgba(217, 164, 65, .16);
  border: 1px solid rgba(217, 164, 65, .5);
  border-radius: var(--r1);
  padding: 4px 2px
}

.card-skills svg {
  width: 16px;
  height: 16px
}

.stars {
  color: var(--gold-1);
  letter-spacing: 3px;
  font-size: 16px
}

.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden
}

.confetti i {
  position: absolute;
  top: -14px;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  opacity: .9;
  animation: fall linear forwards
}

@keyframes fall {
  to {
    transform: translateY(110vh) rotate(720deg);
    opacity: .15
  }
}

/* ================================================= BỐI CẢNH LỊCH SỬ
   Dải mốc thời gian + bản tin trước trận (kiểu chiếu chỉ trên giấy dó)
   để người chơi biết mình đang đứng ở đâu trong dòng lịch sử.            */
.timeline {
  display: flex;
  align-items: stretch;
  margin: var(--s5) 0 var(--s4);
  border-top: 1px solid rgba(140, 42, 18, .18);
  border-bottom: 1px solid rgba(140, 42, 18, .18);
  padding: var(--s3) 0;
  overflow-x: auto;
  scrollbar-width: none
}

.timeline::-webkit-scrollbar {
  display: none
}

.tl-item {
  flex: 1;
  min-width: 104px;
  padding: 0 var(--s3);
  text-align: center
}

.tl-item+.tl-item {
  border-left: 1px dashed rgba(140, 42, 18, .22)
}

.tl-year {
  font-family: var(--ff-num);
  font-size: var(--fs-h3);
  color: var(--red-0);
  font-weight: 700
}

.tl-label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--brown-2);
  line-height: 1.35;
  margin-top: 2px
}

.tl-item.now .tl-year {
  color: #fff;
  background: var(--red-0);
  border-radius: var(--r9);
  padding: 2px 10px;
  display: inline-block
}

.tl-item.now .tl-label {
  color: var(--brown-0);
  font-weight: 600
}

.lacquer .timeline {
  border-color: rgba(243, 208, 122, .25)
}

.lacquer .tl-label {
  color: var(--muted-w)
}

.lacquer .tl-year {
  color: var(--gold-0)
}

.lacquer .tl-item+.tl-item {
  border-left-color: rgba(243, 208, 122, .22)
}

/* bản tin trước trận */
/* grid-template-rows: hàng "auto" sẽ phình theo nội dung nên max-height:100%
   của thẻ không còn tác dụng (phần trăm quy theo chính hàng đã phình) — khoá
   hàng bằng minmax(0,1fr) để thẻ luôn nằm gọn trong màn và tự cuộn bên trong. */
.briefing {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 100vh;
  height: 100dvh;
  z-index: 62;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  padding: max(var(--s4), env(safe-area-inset-top)) var(--s4) max(var(--s4), env(safe-area-inset-bottom));
  background: rgba(6, 5, 4, .74);
  backdrop-filter: blur(3px)
}

.brief-card {
  width: min(560px, 96%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--r3);
  padding: clamp(14px, 2.6vw, 24px);
  background: linear-gradient(180deg, #FFFDF6, var(--paper-2));
  border: 3px solid var(--gold-1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
  color: var(--brown-0)
}

.brief-scroll {
  overflow: auto;
  min-height: 0;
  margin-bottom: var(--s3);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch
}

.brief-card .btn {
  flex: none
}

.brief-card h3 {
  font-size: var(--fs-h2);
  color: var(--red-0);
  text-align: center
}

.brief-when {
  text-align: center;
  font-family: var(--ff-num);
  font-size: var(--fs-sm);
  color: var(--brown-2);
  letter-spacing: .06em;
  margin-top: 2px
}

.brief-map {
  width: 100%;
  height: auto;
  margin: var(--s3) 0;
  border-radius: var(--r2);
  border: 1px solid var(--paper-3)
}

.level-pick {
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px dashed var(--paper-3)
}

.level-title {
  font-family: var(--ff-head);
  font-size: var(--fs-sm);
  letter-spacing: .12em;
  color: var(--red-0);
  text-transform: uppercase;
  margin-bottom: 8px
}

.level-btns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px
}

.level-btns button {
  display: grid;
  gap: 2px;
  padding: 9px 6px;
  border-radius: var(--r2);
  min-height: 52px;
  border: 2px solid var(--paper-3);
  background: #FFFDF6;
  color: var(--brown-1);
  font-size: var(--fs-sm);
  font-weight: 700
}

.level-btns button small {
  font-weight: 400;
  font-size: 11px;
  color: var(--brown-2);
  line-height: 1.2
}

.level-btns button[aria-pressed=true] {
  background-color: var(--red-0);
  border-color: var(--red-0);
  color: #fff;
  box-shadow: 0 3px 10px -4px rgba(140, 42, 18, .9)
}

.level-btns button[aria-pressed=true] small {
  color: rgba(255, 255, 255, .85)
}

.level-desc {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--brown-1);
  margin-top: 9px;
  min-height: 3.2em
}

.level-desc b {
  color: var(--red-0)
}

.brief-rows {
  display: grid;
  gap: 8px;
  font-size: var(--fs-sm);
  margin-bottom: var(--s4)
}

.brief-rows div {
  display: flex;
  gap: 10px;
  align-items: flex-start
}

.brief-rows b {
  flex: none;
  width: 92px;
  color: var(--red-0);
  font-family: var(--ff-head)
}

.brief-note {
  font-size: var(--fs-sm);
  color: var(--brown-2);
  font-style: italic;
  line-height: 1.5;
  border-left: 3px solid var(--gold-1);
  padding-left: 10px;
  margin-bottom: var(--s4)
}

.epilogue {
  margin-top: var(--s4);
  text-align: left;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--brown-1);
  border-top: 1px dashed var(--paper-3);
  padding-top: var(--s3)
}

.epilogue b {
  color: var(--red-0)
}

@media (max-height:560px) {
  .brief-map {
    display: none
  }

  .brief-card h3 {
    font-size: var(--fs-h3)
  }

  .brief-rows {
    gap: 5px
  }

  .brief-note {
    display: none
  }
}

@media (max-width:640px) {
  .brief-rows b {
    width: 74px
  }

  .tl-item {
    min-width: 86px;
    padding: 0 var(--s2)
  }
}

/* ========================================================== PODCAST */
.pod-main {
  min-width: 0
}

.pod-grid {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 32px);
  align-items: start;
  padding-bottom: var(--s7)
}

.pod-side {
  position: sticky;
  top: 80px;
  display: grid;
  gap: var(--s3);
  min-width: 0
}

.pod-cover {
  border-radius: var(--r3);
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  border: 2px solid var(--gold-2);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45)
}

.pod-cover .art {
  width: 100%
}

.pod-cover .art img {
  aspect-ratio: 1;
  object-fit: cover
}

.pod-time {
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-num);
  font-size: 12px;
  color: var(--muted-w);
  margin: -6px 0 var(--s3);
  font-variant-numeric: tabular-nums
}

.sync-box {
  border: 1px solid var(--gold-2);
  border-radius: var(--r2);
  padding: 12px;
  margin-bottom: var(--s3);
  background: var(--surface-2);
  display: grid;
  gap: 8px
}

.sync-help {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted-w)
}

.sync-box .btn {
  padding: 16px;
  font-size: 17px
}

.sync-count {
  font-family: var(--ff-num);
  font-size: 13px;
  color: var(--gold-0);
  text-align: center
}

.sync-acts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap
}

.sync-acts .chip {
  flex: 1;
  justify-content: center;
  min-height: 38px;
  padding: 6px 10px;
  font-size: 12.5px
}

.sync-out {
  width: 100%;
  font: 11.5px/1.4 ui-monospace, Consolas, monospace;
  border-radius: var(--r2);
  border: 1px solid var(--gold-2);
  background: #000;
  color: #F3D07A;
  padding: 8px;
  resize: vertical
}

.pod-credit {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--muted-w);
  opacity: .85;
  margin-top: 4px
}

.pod-tag {
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--gold-1)
}

.pod-meta h1 {
  font-size: clamp(20px, 3vw, 26px);
  color: var(--gold-0);
  margin-top: 4px
}

.pod-meta p {
  font-size: 13px;
  color: var(--muted-w);
  margin-top: 2px
}

.pod-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap
}

.pod-bar {
  height: 8px;
  border-radius: var(--r9);
  background: var(--track);
  overflow: hidden
}

.pod-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--r9);
  background: linear-gradient(90deg, var(--gold-1), var(--red-1));
  transition: width .2s linear
}

.pod-chapters {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  max-height: 36vh;
  overflow: auto
}

.pod-chapters li {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 9px 11px;
  border-radius: var(--r2);
  font-size: var(--fs-sm);
  cursor: pointer;
  color: var(--muted-w);
  border: 1px solid transparent;
  min-height: 44px
}

.pod-chapters li:hover {
  background: rgba(243, 208, 122, .1)
}

.pod-chapters li.on {
  background: rgba(243, 208, 122, .16);
  border-color: var(--gold-2);
  color: var(--text-w);
  font-weight: 700
}

.pod-chapters li .done {
  margin-left: auto;
  color: var(--jade)
}

.pod-lines {
  display: grid;
  gap: var(--s3);
  min-height: 50vh;
  min-width: 0
}

.pod-line {
  max-width: min(88%, 640px);
  padding: 13px 17px;
  border-radius: 16px;
  line-height: var(--lh-body);
  font-size: var(--fs-body);
  opacity: .32;
  transition: opacity .3s, transform .3s, box-shadow .3s
}

.pod-line.seen {
  opacity: .62
}

.pod-line.now {
  opacity: 1;
  transform: scale(1.015);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .3)
}

.pod-line .who {
  display: block;
  font-size: 11px;
  letter-spacing: .12em;
  margin-bottom: 3px;
  opacity: .85
}

.pod-line.s {
  background: linear-gradient(180deg, rgba(243, 208, 122, .16), rgba(243, 208, 122, .07));
  border: 1px solid var(--gold-2);
  justify-self: start
}

.pod-line.s .who {
  color: var(--gold-0)
}

.pod-line.t {
  background: var(--paper-1);
  color: var(--brown-0);
  justify-self: end;
  border: 1px solid var(--paper-3)
}

.pod-line.t .who {
  color: var(--red-0)
}

.pod-chip-play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px
}

/* câu hỏi cuối tập */
.pod-quiz {
  margin-top: var(--s5);
  border: 1px solid var(--gold-2);
  border-radius: var(--r3);
  padding: var(--s5);
  background: var(--surface-2)
}

.pod-quiz h3 {
  color: var(--gold-0);
  font-size: 20px
}

.quiz-q {
  margin-top: var(--s4)
}

.quiz-q p {
  font-weight: 700;
  margin-bottom: 8px
}

.quiz-q button {
  display: block;
  width: 100%;
  text-align: left;
  margin-bottom: 7px;
  padding: 11px 15px;
  min-height: 48px;
  border: 1px solid var(--gold-2);
  border-radius: var(--r2);
  font-size: var(--fs-sm);
  color: inherit;
  line-height: 1.45
}

.quiz-q button:hover {
  background: rgba(243, 208, 122, .12)
}

.quiz-q button.ok {
  background: rgba(62, 107, 87, .35);
  border-color: var(--jade)
}

.quiz-q button.no {
  background: rgba(226, 75, 58, .28);
  border-color: var(--danger)
}

@media (max-width:900px) {
  .pod-grid {
    grid-template-columns: 1fr
  }

  .pod-side {
    position: static
  }

  .pod-cover {
    width: min(240px, 60vw);
    margin-inline: auto
  }

  .pod-chapters {
    max-height: none
  }

  .pod-line {
    max-width: 96%
  }
}

/* ======================================================= COLLECTION */
.tabs {
  display: flex;
  gap: var(--s2);
  border-bottom: 2px solid var(--paper-3);
  margin-bottom: var(--s4);
  flex-wrap: wrap
}

.tab {
  padding: 10px 18px;
  border-radius: var(--r2) var(--r2) 0 0;
  font-weight: 700;
  font-size: 14px;
  color: var(--brown-2)
}

.tab[aria-selected=true] {
  background: var(--paper-1);
  color: var(--red-0);
  box-shadow: 0 2px 0 var(--red-0)
}

.filters {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s4)
}

.filters button {
  border: 1px solid var(--paper-3);
  background: #FFFDF6;
  border-radius: var(--r9);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brown-1);
  min-height: 40px
}

.filters button[aria-pressed=true] {
  background-color: var(--red-0);
  background-image: none;
  border-color: var(--red-0);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 8px -3px rgba(140, 42, 18, .8)
}

.collection {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s3)
}

.hcard {
  border-radius: var(--r2);
  overflow: hidden;
  border: 2px solid var(--paper-3);
  background: #FFFDF6;
  box-shadow: var(--sh1);
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: transform .12s var(--ease)
}

.hcard:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh2)
}

.hcard .hc-top {
  padding: 7px 6px;
  font-family: var(--ff-head);
  font-size: var(--fs-sm);
  color: #fff;
  background: var(--brown-1)
}

.hcard .hc-art {
  position: relative;
  aspect-ratio: 5/6;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(180deg, #FFF6DF, var(--paper-2))
}

.hcard .hc-art svg {
  width: 70%;
  height: auto
}

.hcard .hc-art .art {
  width: 100%;
  height: 100%
}

/* lớp giấy mờ phủ nhẹ: che độ mềm của ảnh nhỏ, nhìn như tranh in cũ */
.hcard .hc-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 0%, rgba(255, 246, 223, .35), rgba(120, 80, 30, .18) 100%)
}

.hcard .hc-foot {
  padding: 7px 6px;
  font-size: var(--fs-sm);
  color: var(--brown-2)
}

.hcard.locked {
  filter: grayscale(1);
  opacity: .72
}

.hcard.locked .hc-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px
}

.era-0 .hc-top {
  background: #8E6B3A
}

.era-1 .hc-top {
  background: #8C2A12
}

.era-2 .hc-top {
  background: #2F6B4F
}

.era-3 .hc-top {
  background: #2E5B84
}

.ach {
  display: grid;
  gap: var(--s3)
}

.ach-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: var(--s3);
  align-items: center;
  border: 1px solid var(--paper-3);
  border-radius: var(--r2);
  padding: var(--s3);
  background: #FFFDF6
}

.ach-row .bar {
  height: 10px;
  border-radius: var(--r9);
  background: var(--paper-3);
  overflow: hidden;
  margin-top: 6px
}

.ach-row .bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-1), var(--red-1))
}

.badge {
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--r9);
  padding: 6px 12px;
  border: 1px solid var(--gold-1);
  color: var(--red-0)
}

.badge.done {
  background: var(--gold-1);
  color: #4A2C09;
  border-color: #B98A2E
}

#scr-collection .wrap {
  position: relative
}

.banner-keeper {
  margin-top: var(--s5);
  text-align: center;
  padding: var(--s5);
  border-radius: var(--r3);
  background: linear-gradient(135deg, #FFF3D6, #F3D07A);
  border: 2px solid var(--gold-1);
  box-shadow: var(--sh2)
}

/* ============================================================ TOAST */
#toast {
  position: fixed;
  left: 50%;
  top: calc(64px + env(safe-area-inset-top));
  transform: translateX(-50%);
  z-index: 60;
  display: grid;
  gap: 8px;
  width: min(560px, 92vw);
  pointer-events: none;
  justify-items: center
}

.toast {
  background: var(--toast-bg);
  color: var(--text-w);
  border: 1px solid var(--gold-2);
  border-radius: var(--r2);
  padding: 12px 16px;
  font-size: 14px;
  box-shadow: var(--sh3);
  animation: toast-in .26s ease-out both
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(10px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* ======================================================== RESPONSIVE */
@media (max-width:1023px) {
  .hero-grid {
    grid-template-columns: 1fr;
    padding-bottom: var(--s5)
  }

  .hero-art {
    padding: var(--s3)
  }

  .hud-title {
    order: 3;
    width: 100%
  }
}

@media (max-width:640px) {
  #scr-game {
    padding: 6px
  }

  .battle {
    padding: 8px;
    gap: 6px;
    border-width: 2px
  }

  .corner {
    display: none
  }

  .hud {
    gap: 6px
  }

  .hud-hero {
    display: none
  }

  .hud-title {
    order: 1;
    flex: 1 1 100%;
    min-width: 0
  }

  .hud-title h2 {
    font-size: 17px
  }

  .hud-title p {
    display: none
  }

  .hud-stats {
    order: 2;
    flex: 1 1 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto auto;
    gap: 5px
  }

  .stat {
    min-width: 0;
    padding: 3px 4px;
    overflow: hidden
  }

  .icon-btn {
    width: 44px;
    height: 44px
  }

  #btn-mute {
    width: 40px
  }

  .stat span {
    font-size: 9px;
    letter-spacing: .06em
  }

  .stat b {
    font-size: 15px
  }

  /* Vùng ngón cái: thanh triều trên, kho cọc to ở cạnh dưới */
  .dock {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    padding-bottom: env(safe-area-inset-bottom)
  }

  .panel {
    padding: 6px 10px;
    min-width: 0;
    overflow: hidden
  }

  .ships-left {
    min-width: 0 !important
  }

  .tip {
    display: none
  }

  .tidebar {
    order: -1;
    padding: 6px 10px;
    gap: 8px
  }

  .tide-label {
    min-width: 0;
    font-size: 11px
  }

  .tray-panel {
    padding: 6px 12px
  }

  .stake-src {
    width: 64px;
    height: 72px
  }

  .stake-src svg {
    width: 34px;
    height: 56px
  }

  .stake-count {
    font-size: 26px
  }

  .regen {
    width: 30px;
    height: 30px
  }

  .chip {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 13.5px
  }

  .topbar {
    flex: none;
    min-height: 68px;
    padding-left: 10px;
    padding-right: 10px;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch
  }

  .topbar::-webkit-scrollbar {
    display: none
  }

  .topbar .chip {
    flex: none;
    white-space: nowrap
  }

  /* nhãn dài rút gọn để mọi nút nằm trên một hàng */
  .theme-btn .lbl,
  .lang-btn .lbl {
    display: none
  }

  #btn-reset {
    font-size: 0;
    padding: 8px 12px
  }

  #btn-reset::before {
    content: "↺";
    font-size: 16px
  }

  /* nút quay lại giữ nguyên chữ vì là lối thoát chính */
  #map-to-collection,
  #hero-to-collection,
  #reward-to-collection {
    font-size: 0;
    padding: 8px 12px
  }

  #map-to-collection::before,
  #hero-to-collection::before,
  #reward-to-collection::before {
    content: "🗃️";
    font-size: 16px
  }

  /* toast xuống dưới hàng số HUD, không che THỜI GIAN/ĐIỂM/PHÒNG TUYẾN */
  #toast {
    top: calc(122px + env(safe-area-inset-top));
    width: calc(100vw - 20px)
  }

  .acts {
    grid-template-columns: 1fr 1fr
  }

  .collection {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px
  }

  /* hàng lọc cuộn ngang thay vì xuống 3 dòng, tiết kiệm chiều cao */
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--s4)*-1);
    padding-inline: var(--s4);
    scroll-snap-type: x proximity
  }

  .filters::-webkit-scrollbar {
    display: none
  }

  .filters button {
    flex: none;
    scroll-snap-align: start
  }

  .ach-row {
    grid-template-columns: 40px 1fr;
    row-gap: 8px
  }

  .ach-row>div:last-child {
    grid-column: 1/-1;
    display: flex;
    justify-content: space-between;
    align-items: center
  }
}

/* Điện thoại xoay ngang: màn thấp nên nén HUD lại, dành chiều cao cho khung sông */
@media (max-height:560px) and (orientation:landscape) {
  #scr-game {
    padding: 4px
  }

  .battle {
    padding: 6px 10px;
    gap: 4px;
    border-width: 2px
  }

  .corner {
    display: none
  }

  .hud-hero {
    display: none
  }

  .hud {
    gap: 8px
  }

  .hud-title {
    order: 0;
    flex: 1 1 auto
  }

  .hud-title h2 {
    font-size: 15px
  }

  .hud-title p {
    display: none
  }

  .hud-stats {
    flex: 0 0 auto;
    gap: 6px
  }

  .stat {
    min-width: 74px;
    padding: 2px 8px
  }

  .stat span {
    font-size: 9px
  }

  .stat b {
    font-size: 15px
  }

  .icon-btn {
    width: 40px;
    height: 40px
  }

  .board {
    min-height: 120px
  }

  .dock {
    grid-template-columns: auto 1fr;
    gap: 6px;
    padding-bottom: env(safe-area-inset-bottom)
  }

  .ships-left {
    justify-self: end;
    min-width: 0
  }

  #toast {
    top: calc(104px + env(safe-area-inset-top))
  }

  .panel {
    padding: 4px 10px
  }

  .panel h4 {
    margin-bottom: 2px
  }

  .tip {
    display: none
  }

  .stake-src {
    width: 46px;
    height: 52px
  }

  .stake-src svg {
    width: 24px;
    height: 40px
  }

  .stake-count {
    font-size: 20px
  }

  .regen {
    width: 26px;
    height: 26px
  }

  .tidebar {
    padding: 3px 10px
  }

  .tide-label {
    font-size: 10px
  }
}

/* Thiết bị chạm: bỏ hiệu ứng hover để không bị "dính" trạng thái sau khi chạm */
@media (hover:none) {
  .act:hover {
    transform: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--sh1);
    border-color: var(--paper-3)
  }

  .hcard:hover {
    transform: none;
    box-shadow: var(--sh1)
  }

  .chip:hover,
  .icon-btn:hover,
  .suggests button:hover {
    background: none
  }

  .filters button:not([aria-pressed=true]):hover {
    background: #FFFDF6
  }

  .tab:hover {
    background: none
  }

  .btn:hover {
    filter: none
  }

  .act:active {
    transform: scale(.97)
  }

  .chip:active,
  .icon-btn:active,
  .hcard:active {
    transform: scale(.97)
  }
}

@media (prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .09s !important
  }
}

body.no-motion .float,
body.no-motion .pin-btn.active svg,
body.no-motion .act.primary {
  animation: none
}