/* ============================================================
   NUVORA — GAME "SINH TỒN TẠI ĐỨC"  ·  css/game.css
   Bản đồ hành trình 6 vùng khí quyển (tier 1→6, càng xuống càng
   đẳng cấp), engine hội thoại điện ảnh, con dấu hộ chiếu.
   Tự chứa — không đụng styles.css cũ.
   ============================================================ */

/* ---- màn game: nền tối điện ảnh, 1 con duy nhất fill ---- */
#game{ background:#100c07; display:flex; flex-direction:column; }
#game > *{ flex:1; min-height:0; }
#game *{ box-sizing:border-box; }

/* ===== bảng màu 6 vùng khí quyển ===== */
.env-dawn  { --sky:linear-gradient(180deg,#3a2013 0%,#6b3a1e 55%,#a5623a 100%); --glow:#ff9a52; --accentA:#ffb877; --accentB:#ff7e5f; --hue:#ffd9a8; --paper:#fff6ec; }
.env-city  { --sky:linear-gradient(180deg,#152232 0%,#22384c 55%,#3a5570 100%); --glow:#63b6ff; --accentA:#8fd0ff; --accentB:#5b93c9; --hue:#cfe7ff; --paper:#eef6ff; }
.env-autumn{ --sky:linear-gradient(180deg,#241d0e 0%,#4a3a14 55%,#7a5a23 100%); --glow:#ffb43a; --accentA:#ffd36b; --accentB:#c98b34; --hue:#ffe9b0; --paper:#fff7e6; }
.env-dusk  { --sky:linear-gradient(180deg,#1e1030 0%,#3a1c52 55%,#6a2b6e 100%); --glow:#c86bff; --accentA:#e29bff; --accentB:#8a4bd6; --hue:#f0cbff; --paper:#f9eeff; }
.env-night { --sky:linear-gradient(180deg,#0b1024 0%,#141b3d 55%,#26305e 100%); --glow:#ffcf5a; --accentA:#ffe08a; --accentB:#5b6bd6; --hue:#dfe4ff; --paper:#f3f4ff; }
.env-aurora{ --sky:linear-gradient(180deg,#05121e 0%,#0a2438 45%,#123a4a 100%); --glow:#4fe0c0; --accentA:#8bffe0; --accentB:#3a7de0; --hue:#c9fff0; --paper:#effffb; }

/* ---- trần khí quyển + ambient (đốm sáng trôi) ---- */
.g-sky{ position:absolute; inset:0; background:var(--sky); overflow:hidden; z-index:0; }
.g-ambient{ position:absolute; border-radius:50%; filter:blur(30px); opacity:.5; background:var(--glow);
  animation:drift 14s ease-in-out infinite; }
.g-ambient.a1{ width:180px;height:180px; left:-40px; top:8%; }
.g-ambient.a2{ width:130px;height:130px; right:-30px; top:44%; animation-duration:18s; animation-direction:reverse; opacity:.35; background:var(--accentA); }
.g-ambient.a3{ width:90px;height:90px; left:30%; bottom:6%; animation-duration:22s; opacity:.28; background:var(--accentB); }
@keyframes drift{ 0%,100%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(24px,-20px) scale(1.15) } }

/* ============================================================
   BẢN ĐỒ HÀNH TRÌNH
   ============================================================ */
.g-wrap{ position:relative; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; background:#100c07; }
.g-wrap::-webkit-scrollbar{ width:0 }

/* topbar dính trên */
.g-topbar{ position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:12px;
  padding:calc(env(safe-area-inset-top) + 12px) 16px 12px;
  background:linear-gradient(180deg,rgba(16,12,7,.92),rgba(16,12,7,.55) 80%,transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.g-topbar.dark{ background:#100c07; position:relative; }
.g-x{ width:40px;height:40px;flex:0 0 40px; border-radius:13px; border:1.5px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06); color:#fff; font-size:24px; line-height:1; cursor:pointer; display:grid; place-items:center; }
.g-x:active{ transform:scale(.94) }
.g-x.light{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28) }
.g-topttl{ flex:1; color:#fff; line-height:1.1 }
.g-topttl b{ font-size:17px; font-weight:800; display:block }
.g-topttl small{ font-family:var(--font-cond,'Oswald'); letter-spacing:1.5px; text-transform:uppercase; font-size:10px; color:rgba(255,255,255,.5) }
.g-pass-btn{ border:0; background:linear-gradient(135deg,#C25320,#D69A2E); color:#fff; font-weight:800;
  padding:9px 14px; border-radius:14px; cursor:pointer; font-size:14px; box-shadow:0 6px 16px rgba(194,83,32,.4) }
.g-pass-btn b{ font-size:15px }

/* hero hộ chiếu */
.g-hero{ position:relative; margin:4px 14px 10px; border-radius:24px; overflow:hidden;
  background:linear-gradient(150deg,#1b1a2e 0%,#2a1e34 60%,#3a1f28 100%);
  border:1px solid rgba(255,255,255,.1); padding:22px 20px 24px; }
.g-hero-glow{ position:absolute; width:260px;height:260px; right:-70px; top:-90px; border-radius:50%;
  background:radial-gradient(circle,#C25320,transparent 70%); opacity:.5; filter:blur(10px);
  animation:pulseGlow 6s ease-in-out infinite }
@keyframes pulseGlow{ 0%,100%{ transform:scale(1); opacity:.42 } 50%{ transform:scale(1.2); opacity:.6 } }
.g-hero-inner{ position:relative; z-index:1 }
.g-hero-kick{ font-family:var(--font-cond,'Oswald'); letter-spacing:2.5px; text-transform:uppercase; font-size:10.5px; color:#ffcf8a; font-weight:600 }
.g-hero-title{ color:#fff; font-size:27px; font-weight:800; line-height:1.08; margin:8px 0 16px; letter-spacing:-.5px }
.g-integration{ background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:12px 14px }
.g-int-lbl{ display:flex; justify-content:space-between; align-items:baseline; color:#fff; margin-bottom:8px }
.g-int-lbl span{ font-size:12px; color:rgba(255,255,255,.6); font-weight:600 }
.g-int-lbl b{ font-size:13px; color:#ffcf8a }
.g-int-bar{ height:9px; border-radius:8px; background:rgba(255,255,255,.12); overflow:hidden }
.g-int-bar i{ display:block; height:100%; border-radius:8px; background:linear-gradient(90deg,#C25320,#D69A2E,#2E7D5B); transition:width .6s cubic-bezier(.2,.8,.2,1) }

/* con đường: các băng chương xếp dọc — NỀN = dải tranh 3D trừu tượng (KHÔNG còn tilt/chuyển động 3D) */
.g-path{ }
.g-band{ position:relative; padding:26px 0 44px; overflow:hidden;
  background-size:cover; background-position:center top; background-repeat:no-repeat; }
.g-band + .g-band{ margin-top:-1px }
/* lớp phủ tối nhẹ để chữ & node nổi trên tranh */
.g-band-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,8,6,.55) 0%, rgba(10,8,6,.28) 22%, rgba(10,8,6,.30) 78%, rgba(10,8,6,.60) 100%); }

/* tiêu đề chương */
.g-chap{ position:relative; z-index:2; display:flex; gap:14px; align-items:flex-start; padding:6px 20px 20px; }
.g-chap-badge{ flex:0 0 58px; width:58px;height:58px; border-radius:18px; display:grid; place-items:center; font-size:30px;
  background:rgba(0,0,0,.28); border:1.5px solid rgba(255,255,255,.22); box-shadow:0 10px 26px rgba(0,0,0,.35);
  backdrop-filter:blur(4px) }
.g-chap-txt small{ font-family:var(--font-cond,'Oswald'); letter-spacing:1.6px; text-transform:uppercase; font-size:10px; color:rgba(255,255,255,.62); font-weight:600; display:block }
.g-chap-txt b{ color:#fff; font-size:23px; font-weight:800; line-height:1.1; display:block; margin-top:2px; text-shadow:0 2px 10px rgba(0,0,0,.4) }
.g-chap-txt > span{ color:var(--hue); font-size:14px; font-weight:700; display:block }
.g-chap-txt p{ color:rgba(255,255,255,.72); font-size:12.5px; line-height:1.45; margin:7px 0 0; max-width:280px }

/* đường ray zic-zac + medallion */
.g-rail{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:16px; padding:4px 0 0 }
.g-node{ position:relative; transform:translateX(var(--x,0)); border:0; background:transparent; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:0; width:min(76%,320px);
  animation:nodeIn .5s var(--d,0s) both cubic-bezier(.2,.9,.3,1) }
@keyframes nodeIn{ from{ opacity:0; transform:translateX(var(--x,0)) translateY(14px) scale(.9) } to{ opacity:1 } }
.g-medal{ position:relative; width:74px; height:74px; display:grid; place-items:center; }
.g-medal-face{ position:relative; z-index:2; width:60px;height:60px; border-radius:50%; display:grid; place-items:center; font-size:28px;
  background:radial-gradient(circle at 38% 30%,#fff8ee,var(--paper) 65%);
  box-shadow:0 8px 0 var(--accentB), 0 14px 24px rgba(0,0,0,.4), inset 0 2px 4px #fff;
  transition:transform .16s; }
.g-medal-ring{ position:absolute; inset:0; border-radius:50%; border:3px solid var(--accentA);
  box-shadow:0 0 0 4px rgba(255,255,255,.12); }
.g-node:active .g-medal-face{ transform:translateY(4px); box-shadow:0 4px 0 var(--accentB),0 8px 14px rgba(0,0,0,.4),inset 0 2px 4px #fff }
.g-node.done .g-medal-face{ background:radial-gradient(circle at 38% 30%,#8ff0c8,#2E7D5B 70%); color:#fff; box-shadow:0 8px 0 #1c5a40,0 14px 24px rgba(0,0,0,.4) }
.g-node.done .g-medal-ring{ border-color:#8ff0c8 }
/* medallion "hiện tại/chơi được" nhấp nháy mời gọi */
.g-node.playable .g-medal::before{ content:''; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid var(--accentA); opacity:.45 }   /* vành tĩnh (đã bỏ hiệu ứng nhấp nháy) */
.g-node-cap{ text-align:center; max-width:220px }
.g-node-cap b{ display:block; color:#fff; font-size:14px; font-weight:800; line-height:1.2; text-shadow:0 1px 6px rgba(0,0,0,.5) }
.g-node-cap small{ display:block; color:rgba(255,255,255,.62); font-size:11px; margin-top:2px }
.g-node-tag{ font-family:var(--font-cond,'Oswald'); letter-spacing:1px; font-size:9.5px; font-weight:700; color:#16120C;
  background:var(--accentA); padding:3px 9px; border-radius:20px; text-transform:uppercase }

/* --- TẦNG NÂNG CẤP THỊ GIÁC theo tier (càng về sau càng đẳng cấp) --- */
.g-band[data-tier="3"] .g-chap-badge,.g-band[data-tier="4"] .g-chap-badge{ box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08) }
.g-band[data-tier="4"] .g-medal-face,.g-band[data-tier="5"] .g-medal-face,.g-band[data-tier="6"] .g-medal-face{ width:64px;height:64px; font-size:30px }
.g-band[data-tier="5"] .g-medal-ring,.g-band[data-tier="6"] .g-medal-ring{ box-shadow:0 0 0 4px rgba(255,255,255,.14),0 0 22px var(--glow) }
.g-band[data-tier="5"] .g-chap-badge,.g-band[data-tier="6"] .g-chap-badge{ background:rgba(255,255,255,.08); box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 26px var(--glow) }
.g-band[data-tier="6"]{ padding-bottom:56px }
.g-band[data-tier="6"] .g-sky::after,.g-band[data-tier="5"] .g-sky::after{ content:''; position:absolute; inset:0;
  background:radial-gradient(120% 60% at 50% 0%, var(--glow), transparent 60%); opacity:.16; mix-blend-mode:screen }
.g-band[data-tier="6"] .g-chap-txt b{ background:linear-gradient(90deg,#fff,var(--accentA)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }

/* ============================================================
   BRIEFING (mở 1 bối cảnh)
   ============================================================ */
.g-brief,.g-phase,.g-scene,.g-stamp{ position:relative; height:100%; overflow-y:auto; display:flex; flex-direction:column }
.g-brief::-webkit-scrollbar,.g-phase::-webkit-scrollbar{ width:0 }
.g-brief-top,.g-ph-top,.g-scene-top{ position:relative; z-index:3; display:flex; align-items:center; gap:12px;
  padding:calc(env(safe-area-inset-top) + 12px) 16px 8px }
.g-brief-kick{ font-family:var(--font-cond,'Oswald'); letter-spacing:2px; text-transform:uppercase; font-size:11px; color:#fff; font-weight:600; opacity:.85 }
.g-brief-card{ position:relative; z-index:3; margin:12px 16px 26px; background:#fff; border-radius:24px; padding:0 20px 22px;
  box-shadow:0 24px 60px rgba(0,0,0,.4); text-align:center }
.g-brief-emoji{ font-size:44px; margin-top:-30px; width:78px;height:78px; border-radius:22px; background:var(--paper,#fff);
  display:grid; place-items:center; margin-left:auto; margin-right:auto; box-shadow:0 12px 26px rgba(0,0,0,.18); border:3px solid #fff }
.g-brief-ort{ font-family:var(--font-cond,'Oswald'); letter-spacing:1.4px; text-transform:uppercase; font-size:11px; color:var(--accentB,#C25320); font-weight:700; margin-top:12px }
.g-brief-title{ font-size:24px; font-weight:800; color:#16120C; margin:4px 0 2px; line-height:1.15 }
.g-brief-theme{ color:#85806F; font-size:13.5px; font-weight:600; margin:0 0 14px }
.g-mission{ text-align:left; background:linear-gradient(135deg,#fef3e8,#fdeede); border:1.5px solid #f4d9bf; border-radius:15px;
  padding:12px 14px; color:#5a3a20; font-weight:600; font-size:14px; line-height:1.45 }
.g-mission span{ display:block; font-family:var(--font-cond,'Oswald'); letter-spacing:1.5px; font-size:10.5px; color:#C25320; margin-bottom:4px }
.g-steps{ display:flex; flex-direction:column; gap:10px; margin:16px 0 18px }
.g-step{ display:flex; align-items:center; gap:13px; text-align:left; border:1.5px solid var(--line,#E3DCCB); background:#fff;
  border-radius:16px; padding:13px 14px; cursor:pointer; transition:.15s }
.g-step:active{ transform:scale(.98) }
.g-step:hover{ border-color:var(--accentB,#C25320) }
.g-step-ic{ flex:0 0 42px; width:42px;height:42px; border-radius:12px; display:grid; place-items:center; font-size:20px;
  background:var(--paper,#F3EFE5) }
.g-step-txt{ flex:1 } .g-step-txt b{ display:block; font-size:15px; color:#16120C } .g-step-txt small{ color:#85806F; font-size:12px }
.g-step-go{ color:#bbb; font-size:18px; font-weight:800 }
.g-step.ok{ border-color:#2E7D5B; background:#f0faf5 }
.g-step.ok .g-step-ic{ background:#2E7D5B; color:#fff }
.g-step.ok .g-step-go{ color:#2E7D5B; font-size:12px; font-weight:700 }
.g-start{ width:100%; border:0; border-radius:16px; padding:16px; font:inherit; font-weight:800; font-size:16px; cursor:pointer;
  color:#fff; background:linear-gradient(135deg,#C25320,#A83F1D); box-shadow:0 10px 24px rgba(168,63,29,.4) }
.g-start:active{ transform:translateY(2px) }
.g-soon{ background:#f6f2ea; border:1.5px dashed #d8cdb6; border-radius:14px; padding:14px; color:#85806F; font-weight:600; font-size:13px; line-height:1.5 }

/* ============================================================
   CHẶNG ① VOCAB — flashcard
   ============================================================ */
.g-ph-top{ color:#fff }
.g-ph-title{ flex:1; font-weight:800; font-size:17px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.4) }
.g-ph-count{ color:rgba(255,255,255,.85); font-weight:700; font-size:14px } .g-ph-count b{ color:#fff }
.g-ph-prog{ position:relative; z-index:3; height:6px; margin:6px 16px; border-radius:6px; background:rgba(255,255,255,.18); overflow:hidden }
.g-ph-prog i{ display:block; height:100%; background:var(--accentA); border-radius:6px; transition:width .35s }
.g-flash-stage{ position:relative; z-index:3; flex:1; display:grid; place-items:center; padding:14px 22px }
.g-flash{ width:100%; max-width:340px; background:#fff; border-radius:26px; padding:34px 24px 28px; text-align:center;
  box-shadow:0 30px 70px rgba(0,0,0,.4); position:relative; animation:flashIn .4s cubic-bezier(.2,.9,.3,1) both }
@keyframes flashIn{ from{ opacity:0; transform:translateY(20px) rotateX(12deg) } to{ opacity:1; transform:none } }
.g-flash-spk{ position:absolute; top:16px; right:16px; width:44px;height:44px; border-radius:50%; border:0; cursor:pointer;
  background:var(--paper,#F3EFE5); font-size:20px; box-shadow:0 4px 12px rgba(0,0,0,.12) }
.g-flash-spk:active{ transform:scale(.9) }
.g-flash-de{ font-size:30px; font-weight:800; color:#16120C; letter-spacing:-.5px; margin-top:6px; line-height:1.1 }
.g-flash-vi{ font-size:18px; color:var(--accentB,#C25320); font-weight:700; margin-top:8px }
.g-flash-tip{ margin-top:16px; background:#fff8ef; border:1px solid #f2e2cd; border-radius:13px; padding:11px 13px;
  color:#7a5a34; font-size:13px; line-height:1.45; text-align:left }
.g-ph-foot{ position:relative; z-index:3; display:flex; gap:10px; padding:12px 18px calc(env(safe-area-inset-bottom) + 18px) }
.g-btn{ flex:1; border:0; border-radius:15px; padding:15px; font:inherit; font-weight:800; font-size:15px; cursor:pointer;
  color:#fff; background:linear-gradient(135deg,#C25320,#A83F1D); box-shadow:0 8px 18px rgba(168,63,29,.35) }
.g-btn:active{ transform:translateY(2px) }
.g-btn.ghost{ flex:0 0 40%; background:rgba(255,255,255,.14); color:#fff; box-shadow:none; border:1.5px solid rgba(255,255,255,.25) }
.g-btn.sm{ margin-top:12px; width:100%; padding:12px }

/* ============================================================
   CHẶNG ② SCENE — bối cảnh hội thoại điện ảnh
   ============================================================ */
.g-scene{ overflow:hidden }
.g-scene-bg{ position:absolute; inset:0; background:var(--sky); z-index:0; overflow:hidden }
.g-scene-vign{ position:absolute; inset:0; background:radial-gradient(120% 80% at 50% 18%,transparent,rgba(0,0,0,.55)) }
.g-scene-top{ color:#fff }
.g-scene-ort{ flex:1; font-weight:700; font-size:14px; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.5) }
.g-scene-step{ font-family:var(--font-cond,'Oswald'); letter-spacing:1px; font-size:12px; color:rgba(255,255,255,.8);
  background:rgba(0,0,0,.3); padding:4px 10px; border-radius:20px }
.g-stage{ position:relative; z-index:3; flex:1; display:flex; flex-direction:column; justify-content:flex-end; padding:10px 18px 6px; min-height:0 }
.g-npc{ display:flex; align-items:flex-end; gap:10px; margin-bottom:-6px; }
.g-npc-img{ width:132px; height:auto; max-height:38vh; object-fit:contain; filter:drop-shadow(0 12px 20px rgba(0,0,0,.5));
  transform-origin:bottom center; animation:npcIn .5s cubic-bezier(.2,.9,.3,1) both }
@keyframes npcIn{ from{ opacity:0; transform:translateY(20px) scale(.94) } to{ opacity:1 } }
.g-npc.nod .g-npc-img{ animation:nod .6s ease } @keyframes nod{ 30%{ transform:translateY(-8px) rotate(-2deg) } 60%{ transform:translateY(0) } }
.g-npc.shake .g-npc-img{ animation:shk .5s ease } @keyframes shk{ 20%,60%{ transform:translateX(-6px) } 40%,80%{ transform:translateX(6px) } }
.g-npc-ph{ font-size:90px; filter:drop-shadow(0 10px 16px rgba(0,0,0,.5)) }
.g-npc-badge{ background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:7px 11px; margin-bottom:12px; backdrop-filter:blur(6px) }
.g-npc-badge b{ display:block; color:#fff; font-size:14px } .g-npc-badge small{ color:rgba(255,255,255,.72); font-size:11px }
.g-bubble{ position:relative; background:#fff; border-radius:18px 18px 18px 4px; padding:14px 16px 14px 46px; margin:10px 0 0;
  box-shadow:0 16px 40px rgba(0,0,0,.4) }
.g-bubble.in{ animation:bubIn .35s cubic-bezier(.2,.9,.3,1) both } @keyframes bubIn{ from{ opacity:0; transform:translateY(12px) scale(.96) } to{ opacity:1 } }
.g-bub-spk{ position:absolute; left:10px; top:12px; width:30px;height:30px; border-radius:50%; border:0; background:var(--paper,#F3EFE5); font-size:15px; cursor:pointer }
.g-bub-de{ font-size:17px; font-weight:800; color:#16120C; line-height:1.25 }
.g-bub-vi{ font-size:13px; color:#85806F; font-weight:600; margin-top:3px }
.g-choices{ position:relative; z-index:3; display:flex; flex-direction:column; gap:9px; padding:12px 18px calc(env(safe-area-inset-bottom) + 14px) }
.g-choice{ text-align:left; border:0; border-radius:15px; padding:12px 15px; cursor:pointer; background:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.25); transition:transform .12s, box-shadow .2s; position:relative; overflow:hidden }
.g-choice::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accentB,#C25320); opacity:.5 }
.g-choice:active{ transform:scale(.98) }
.g-choice-de{ display:block; font-size:15.5px; font-weight:800; color:#16120C; line-height:1.25 }
.g-choice-vi{ display:block; font-size:12.5px; color:#85806F; font-weight:600; margin-top:2px }
.g-choice.locked{ opacity:.5; pointer-events:none }
.g-choice.ok{ background:#eafaf2; box-shadow:0 0 0 2px #2E7D5B, 0 8px 20px rgba(46,125,91,.3); opacity:1 }
.g-choice.ok::before{ background:#2E7D5B; opacity:1 }
.g-choice.no{ background:#fdecea; box-shadow:0 0 0 2px #BE3A2B; opacity:1; animation:shk .4s }
.g-scene-fb{ position:relative; z-index:3; max-height:0; overflow:hidden; transition:max-height .3s, padding .3s; padding:0 18px;
  color:#fff; font-size:13.5px; line-height:1.45 }
.g-scene-fb.ok,.g-scene-fb.no{ max-height:160px; padding:0 18px calc(env(safe-area-inset-bottom) + 14px) }
.g-scene-fb.ok b{ color:#8ff0c8 } .g-scene-fb.no b{ color:#ffb3aa }
.g-scene-fb.big{ text-align:center; font-size:20px; font-weight:800; padding-top:8px }
.g-stage.cleared .g-npc-img{ animation:cheer .8s ease } @keyframes cheer{ 0%,100%{ transform:translateY(0) } 40%{ transform:translateY(-16px) rotate(3deg) } }

/* ============================================================
   CHẶNG ② (COMIC) — panel ảnh/video + bong bóng truyện tranh
   ============================================================ */
.g-comic{ position:relative; height:100%; display:flex; flex-direction:column; overflow:hidden; background:#0b0a12 }
.g-comic .g-sky{ opacity:.5 }
.g-comic .g-scene-top{ color:#fff }
.g-comic .g-scene-ort{ flex:1; font-weight:700; font-size:13.5px; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.6) }
.g-comic .g-scene-step{ font-family:var(--font-cond,'Oswald'); letter-spacing:1px; font-size:12px; color:#fff;
  background:rgba(0,0,0,.35); padding:4px 10px; border-radius:20px }

/* --- PANEL (khung truyện tranh) --- */
.g-panel{ position:relative; z-index:3; margin:6px 14px 0; height:44vh; min-height:230px; border-radius:20px; overflow:hidden;
  background:var(--sky); border:3px solid rgba(255,255,255,.9); box-shadow:0 22px 50px rgba(0,0,0,.5) }
.g-panel-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:kenburns 14s ease-in-out infinite alternate }
@keyframes kenburns{ from{ transform:scale(1) translate(0,0) } to{ transform:scale(1.12) translate(-1.5%,-2%) } }
.g-panel.intro .g-panel-media{ animation:kenburns 18s ease-in-out infinite alternate }
.g-panel-grad{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,transparent 26%,transparent 55%,rgba(0,0,0,.62) 100%) }
.g-panel-grad.strong{ background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.55)) }
.g-panel.noimg{ background:var(--sky) }
.g-panel.noimg .g-panel-media{ display:none }
.g-panel.noimg::after{ content:'🎞️ Bối cảnh đang dựng'; position:absolute; inset:0; display:grid; place-items:center;
  color:rgba(255,255,255,.55); font-weight:700; font-size:13px }
/* nhãn người nói (góc dưới panel) */
.g-npc-tag{ position:absolute; left:12px; bottom:12px; z-index:4; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.2);
  border-radius:11px; padding:6px 11px; backdrop-filter:blur(6px) }
.g-npc-tag b{ display:block; color:#fff; font-size:13.5px } .g-npc-tag small{ color:rgba(255,255,255,.72); font-size:10.5px }
/* caption intro */
.g-intro-cap{ position:absolute; left:14px; right:14px; bottom:14px; z-index:4; color:#fff; font-weight:800; font-size:15px;
  text-shadow:0 2px 10px rgba(0,0,0,.7); line-height:1.3 }

/* --- BONG BÓNG THOẠI (manga, phủ TRÊN panel) --- */
.g-comic-bubble{ position:absolute; left:12px; right:12px; top:12px; z-index:5; background:#fff; border-radius:16px;
  padding:12px 14px 12px 44px; box-shadow:0 12px 30px rgba(0,0,0,.5); border:2.5px solid #16120C }
.g-comic-bubble::after{ content:''; position:absolute; left:34px; bottom:-13px; width:22px; height:22px; background:#fff;
  border-right:2.5px solid #16120C; border-bottom:2.5px solid #16120C; transform:rotate(45deg) }
.g-comic-bubble.in{ animation:bubPop .34s cubic-bezier(.2,1.3,.4,1) both }
@keyframes bubPop{ from{ opacity:0; transform:translateY(-8px) scale(.9) } to{ opacity:1; transform:none } }
.g-comic-bubble .g-bub-spk{ position:absolute; left:8px; top:10px; width:30px;height:30px; border-radius:50%; border:0;
  background:var(--paper,#F3EFE5); font-size:15px; cursor:pointer }
.g-comic-bubble .g-bub-spk:active{ transform:scale(.9) }
.g-comic-bubble .g-bub-de{ font-size:16.5px; font-weight:800; color:#16120C; line-height:1.28 }
.g-comic-bubble .g-bub-vi{ font-size:12.5px; color:#6b6456; font-weight:600; margin-top:3px }

/* feedback + choices (dùng chung .g-choices/.g-choice ở scene) */
.g-comic-fb{ position:relative; z-index:3; max-height:0; overflow:hidden; transition:max-height .3s, padding .3s; padding:0 16px; color:#fff; font-size:13px; line-height:1.45 }
.g-comic-fb.ok,.g-comic-fb.no{ max-height:200px; padding:10px 16px 2px }
.g-comic-fb.ok b{ color:#8ff0c8 } .g-comic-fb.no b{ color:#ffb3aa }
.g-comic .g-choices{ flex:1; overflow-y:auto; padding-top:10px; align-content:flex-start }
.g-comic .g-choices::-webkit-scrollbar{ width:0 }
.g-comic .g-choices .g-btn{ flex:0 0 auto }   /* nút intro/next không kéo giãn theo cột */
.g-comic-clear{ position:absolute; inset:0; z-index:5; display:grid; place-items:center; text-align:center; padding:20px;
  color:#fff; font-size:21px; font-weight:800; text-shadow:0 2px 14px rgba(0,0,0,.95),0 0 30px rgba(0,0,0,.7);
  background:radial-gradient(circle at 50% 50%, rgba(0,0,0,.5), rgba(0,0,0,.28)); animation:bubPop .5s both }
/* tier cao: bong bóng kính + panel viền sáng */
.g-comic[data-tier="5"] .g-panel,.g-comic[data-tier="6"] .g-panel{ box-shadow:0 22px 60px rgba(0,0,0,.6),0 0 30px var(--glow) }
.g-comic[data-tier="6"] .g-comic-bubble{ background:rgba(255,255,255,.94); backdrop-filter:blur(4px) }

/* --- CON DẤU SAI (đóng dấu hiệu ứng mạnh) --- */
.g-panel.stamped{ animation:panelShake .42s cubic-bezier(.36,.07,.19,.97) }
@keyframes panelShake{ 10%,90%{ transform:translateX(-2px) } 20%,80%{ transform:translateX(4px) } 30%,50%,70%{ transform:translateX(-7px) } 40%,60%{ transform:translateX(7px) } }
.g-stampov{ position:absolute; inset:0; z-index:7; display:grid; place-items:center; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(0,0,0,.28), rgba(0,0,0,.12)) }
.g-stampov-ink{ position:relative; border:5px solid var(--sc); color:var(--sc); border-radius:8px;
  padding:12px 22px; text-align:center; text-transform:uppercase; background:rgba(255,248,242,.14);
  box-shadow:0 0 0 3px rgba(255,255,255,.18) inset, 0 0 0 3px var(--sc);
  transform:rotate(-13deg) scale(2.7); opacity:0; filter:drop-shadow(0 6px 14px rgba(0,0,0,.5)) }
.g-stampov.slam .g-stampov-ink{ animation:stampSlam .42s cubic-bezier(.2,1.55,.35,1) forwards, stampHold .55s .95s forwards }
@keyframes stampSlam{ 0%{ transform:rotate(-13deg) scale(2.7); opacity:0 } 55%{ opacity:1 } 100%{ transform:rotate(-13deg) scale(1); opacity:1 } }
@keyframes stampHold{ to{ opacity:0; transform:rotate(-13deg) scale(1.06) } }
.g-stampov-ink b{ display:block; font-family:var(--font-cond,'Oswald'); font-size:29px; font-weight:700; letter-spacing:2.5px; line-height:1 }
.g-stampov-ink small{ display:block; font-weight:800; font-size:13px; margin-top:5px; letter-spacing:.5px }

/* --- CỔNG PHÁT ÂM trong comic (đọc câu trả lời ≥80%) --- */
.g-pron-head{ text-align:center; color:#fff; font-weight:800; font-size:13.5px; margin:2px 0 8px;
  background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.15); border-radius:12px; padding:8px 12px }
.g-pron-head b{ color:var(--accentA) }
#cm-pron{ background:#fff; border-radius:18px; padding:6px 4px 10px; box-shadow:0 14px 34px rgba(0,0,0,.4) }
#cm-pron .pa-wrap{ padding:10px 12px }

/* ============================================================
   CHẶNG ③ CULTURE — quy tắc hội nhập
   ============================================================ */
.g-cult-stage{ position:relative; z-index:3; flex:1; display:grid; place-items:center; padding:12px 18px calc(env(safe-area-inset-bottom) + 18px) }
.g-cult{ width:100%; max-width:360px; background:#fff; border-radius:24px; padding:20px; box-shadow:0 26px 60px rgba(0,0,0,.4);
  animation:flashIn .4s cubic-bezier(.2,.9,.3,1) both }
.g-cult-head{ display:flex; gap:12px; align-items:center; margin-bottom:14px }
.g-cult-ic{ flex:0 0 50px; width:50px;height:50px; border-radius:15px; display:grid; place-items:center; font-size:26px; background:var(--paper,#F3EFE5) }
.g-cult-head b{ display:block; font-size:17px; color:#16120C } .g-cult-head small{ color:var(--accentB,#C25320); font-weight:700; font-size:12.5px }
.g-cult-q{ font-size:15.5px; font-weight:700; color:#16120C; line-height:1.4; margin-bottom:14px }
.g-cult-opts{ display:flex; flex-direction:column; gap:9px }
.g-cult-opt{ text-align:left; border:1.5px solid var(--line,#E3DCCB); background:#fff; border-radius:14px; padding:13px 15px;
  font:inherit; font-weight:700; font-size:14.5px; color:#16120C; cursor:pointer; transition:.14s }
.g-cult-opt:active{ transform:scale(.98) }
.g-cult-opt.locked{ pointer-events:none }
.g-cult-opt.ok{ border-color:#2E7D5B; background:#eafaf2; box-shadow:0 0 0 1px #2E7D5B }
.g-cult-opt.no{ border-color:#BE3A2B; background:#fdecea; animation:shk .4s }
.g-cult-lesson{ max-height:0; overflow:hidden; transition:max-height .35s; color:#5a3a20; font-size:13.5px; line-height:1.5 }
.g-cult-lesson.show{ max-height:340px; margin-top:14px; background:linear-gradient(135deg,#fef3e8,#fdeede); border:1px solid #f4d9bf;
  border-radius:14px; padding:13px 15px }
.g-cult-lesson b{ color:#C25320 }
.g-cult-lesson.no.show{ background:linear-gradient(135deg,#fdecea,#fbe0dd); border-color:#f3c0b8 }
.g-cult-lesson.no b{ color:#BE3A2B }
.gshake{ animation:panelShake .42s cubic-bezier(.36,.07,.19,.97) }
/* NODE KHÓA (chưa mở khóa) */
.g-node.locked{ cursor:not-allowed }
.g-node.locked .g-medal-face{ background:radial-gradient(circle at 38% 30%,#6f6858,#403a30 72%); color:#d9d3c6;
  box-shadow:0 6px 0 #2a2620,0 10px 18px rgba(0,0,0,.34) }
.g-node.locked .g-medal-ring{ border-color:rgba(255,255,255,.22) }
.g-node.locked .g-node-cap b{ color:rgba(255,255,255,.72) }
.g-node.locked .g-node-cap small{ color:rgba(255,255,255,.5) }
.g-node.locked:active .g-medal-face{ transform:none }
/* TOAST báo khóa */
.g-toast{ position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + 26px); transform:translate(-50%,12px);
  background:rgba(22,18,12,.96); color:#F3EFE5; font-weight:800; font-size:13.5px; padding:12px 18px; border-radius:14px;
  max-width:300px; text-align:center; z-index:60; opacity:0; transition:.28s cubic-bezier(.2,.9,.3,1); pointer-events:none;
  box-shadow:0 12px 34px rgba(0,0,0,.45) }
.g-toast.show{ opacity:1; transform:translate(-50%,0) }

/* ============================================================
   CON DẤU HỘ CHIẾU (reward)
   ============================================================ */
.g-stamp{ align-items:center; justify-content:center; text-align:center; overflow:hidden }
.g-stamp-rays{ position:absolute; inset:0; z-index:1; background:conic-gradient(from 0deg, transparent 0 8deg, rgba(255,255,255,.06) 8deg 16deg);
  animation:spin 24s linear infinite } @keyframes spin{ to{ transform:rotate(360deg) } }
.g-stamp-inner{ position:relative; z-index:3; padding:24px }
.g-stamp-passport{ width:220px; margin:0 auto 22px; background:linear-gradient(160deg,#243a5e,#12203a); border-radius:16px;
  padding:16px; box-shadow:0 26px 60px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.12) }
.g-passport-line{ font-family:var(--font-cond,'Oswald'); letter-spacing:2px; font-size:10px; color:#ffcf8a; text-align:left; margin-bottom:10px }
.g-ink{ border:3px solid #C25320; border-radius:12px; padding:14px 10px; color:#C25320; transform:rotate(-8deg) scale(2.4); opacity:0;
  background:rgba(194,83,32,.06) }
.g-ink.slam{ animation:slam .5s cubic-bezier(.2,1.4,.4,1) forwards }
@keyframes slam{ to{ transform:rotate(-8deg) scale(1); opacity:1 } }
.g-ink-ic{ font-size:30px; filter:grayscale(.2) } .g-ink-de{ font-weight:800; font-size:13px; margin-top:4px; line-height:1.2 }
.g-ink-ort{ font-size:10px; opacity:.85 } .g-ink-ok{ font-family:var(--font-cond,'Oswald'); letter-spacing:2px; font-size:12px; font-weight:700; margin-top:6px; border-top:1.5px solid #C25320; padding-top:5px }
.g-stamp-h{ color:#fff; font-size:26px; font-weight:800; margin:0 0 4px }
.g-stamp-p{ color:rgba(255,255,255,.82); font-size:14px; line-height:1.5; margin:0 0 18px }
.g-stamp-p b{ color:var(--accentA) }
.g-stamp-reward{ display:flex; gap:10px; justify-content:center; margin-bottom:22px }
.g-stamp-reward span{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:20px; padding:8px 15px; color:#fff; font-weight:800; font-size:13px }
.g-stamp .g-start{ max-width:300px }

/* ============================================================
   HỘ CHIẾU (bộ sưu tập)
   ============================================================ */
.g-passbook{ background:#100c07 }
.g-passbook-body{ padding:6px 18px 40px }
.g-passbook-cover{ background:linear-gradient(160deg,#243a5e,#0e1a30); border-radius:20px; padding:26px; text-align:center;
  color:#ffcf8a; font-size:40px; box-shadow:0 20px 50px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.1); margin-bottom:18px }
.g-passbook-cover b{ display:block; color:#fff; font-size:22px; letter-spacing:2px; margin-top:6px }
.g-passbook-cover small{ font-family:var(--font-cond,'Oswald'); letter-spacing:1.5px; font-size:10px; color:rgba(255,255,255,.55) }
.g-pgrid{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px }
.g-pcell{ aspect-ratio:1; border-radius:12px; background:rgba(255,255,255,.05); border:1px dashed rgba(255,255,255,.14);
  display:flex; flex-direction:column; align-items:center; justify-content:center; color:rgba(255,255,255,.3) }
.g-pcell span{ font-size:20px } .g-pcell small{ font-size:9px }
.g-pcell.on{ background:linear-gradient(150deg,#2a3f28,#1a2c1a); border:1px solid #2E7D5B; color:#8ff0c8;
  box-shadow:0 6px 16px rgba(46,125,91,.25) }
.g-passbook-note{ color:rgba(255,255,255,.55); font-size:12.5px; line-height:1.6; margin-top:18px; text-align:center }

/* ============================================================
   THẺ HERO trên tab HỌC (điểm vào game)
   ============================================================ */
#game-hero{ padding:2px 18px 6px }
.gh-card{ position:relative; width:100%; border:0; cursor:pointer; text-align:left; border-radius:22px; overflow:hidden;
  padding:18px 18px 18px; background:linear-gradient(135deg,#1b1a2e 0%,#3a1f28 100%); box-shadow:0 16px 40px rgba(58,31,40,.35);
  display:flex; align-items:center; gap:12px }
.gh-card:active{ transform:scale(.985) }
.gh-glow{ position:absolute; width:200px;height:200px; right:-50px; bottom:-70px; border-radius:50%;
  background:radial-gradient(circle,#C25320,transparent 70%); opacity:.5; animation:pulseGlow 6s ease-in-out infinite }
.gh-left{ position:relative; z-index:2; flex:1 }
.gh-badge{ font-family:var(--font-cond,'Oswald'); letter-spacing:1.6px; text-transform:uppercase; font-size:10px; font-weight:700; color:#ffcf8a }
.gh-title{ font-size:22px; font-weight:800; color:#fff; line-height:1.05; margin:5px 0 3px; letter-spacing:-.3px }
.gh-sub{ font-size:12px; color:rgba(255,255,255,.72); font-weight:600; line-height:1.35 }
.gh-cta{ display:inline-flex; align-items:center; gap:8px; margin-top:11px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  color:#fff; font-weight:800; font-size:12.5px; padding:7px 13px; border-radius:20px }
.gh-stamps{ background:linear-gradient(135deg,#C25320,#D69A2E); padding:2px 8px; border-radius:12px; font-size:11px }
.gh-art{ position:relative; z-index:2; width:66px; height:66px; flex:0 0 66px; display:grid; place-items:center }
.gh-plane{ font-size:36px; animation:fly 3.5s ease-in-out infinite } @keyframes fly{ 0%,100%{ transform:translate(0,0) rotate(-8deg) } 50%{ transform:translate(4px,-6px) rotate(-2deg) } }
.gh-flag{ position:absolute; right:0; bottom:0; font-size:22px }

/* giảm chuyển động cho ai bật reduce-motion */
@media (prefers-reduced-motion:reduce){
  .g-ambient,.gh-plane,.g-hero-glow,.gh-glow,.g-stamp-rays,.g-node.playable .g-medal::before{ animation:none !important }
}

/* v111 — khóa lựa chọn tới khi loa đọc XONG (nghe hết rồi mới chọn) */
.cm-locked-wait .g-choice{ pointer-events:none; opacity:.45; filter:grayscale(.35) }
.cm-wait-hint{ text-align:center; font-size:13px; font-weight:800; color:var(--accent,#C25320); padding:4px 0 9px; animation:cmwait 1.3s ease-in-out infinite }
@keyframes cmwait{ 0%,100%{ opacity:.5 } 50%{ opacity:1 } }