/* ============================================================
   Hương Bình Minh (Scent of Dawn) — style
   Biến --u = 1% chiều rộng khung (được JS cập nhật khi resize)
   ============================================================ */
:root{
  --u: 12.8px;
  --ink:#2a2118;
  --ink-soft:#4a3d2c;
  --parch:#e8dcc0;
  --gold:#e0b463;
  --glow:#8fd3ff;
  --serif: "Palatino Linotype","Book Antiqua",Palatino,Georgia,"DejaVu Serif","Times New Roman",serif;

  /* ---------- KHUNG ĐẦY BỀ NGANG, NẰM TRONG VÙNG NHÌN THẤY + VÙNG AN TOÀN ----------
     `--vvw` = bề ngang vùng NHÌN THẤY thật của trình duyệt.
       • `100dvw` (Chrome 108+, Safari 15.4+) là vùng nhìn thấy ĐỘNG — dùng cho những
         trình duyệt CHƯA hiểu đơn vị container `cqw` bên dưới.
       • `100vw` là bản dự phòng cuối (render.js tự đo `visualViewport` khi thiếu `dvw`).
     Chiều CAO của khung lấy theo hộp nội dung của `#stage` (đã trừ vùng an toàn) nên
     thanh URL đang hiện hay ẩn đều đúng — đây chính là chỗ sửa lỗi "nút mũi tên bị
     thanh URL đè": trước đây khung dùng `100vh` = vùng nhìn thấy LỚN NHẤT (tính cả chỗ
     thanh URL) nên khung cao hơn màn hình thật rồi tràn xuống dưới.
     `--sat/--sar/--sab/--sal` = vùng an toàn (tai thỏ, thanh home). */
  --vvw: 100vw;
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}
@supports (width:100dvw){
  :root{ --vvw: 100dvw; }
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;background:#0a0c12;overflow:hidden;overscroll-behavior:none;
  font-family:var(--serif);color:var(--parch);
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;}
/* padding = vùng an toàn ⇒ vùng nội dung của #stage CHÍNH LÀ hình chữ nhật an toàn */
#stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  padding:var(--sat) var(--sar) var(--sab) var(--sal);
  background:radial-gradient(circle at 50% 40%,#141a24 0%,#07090d 100%);}
/* `100cqw/cqh` = vùng nội dung của #stage (đã trừ vùng an toàn).
   KHUNG LUÔN ĐẦY BỀ NGANG; chiều CAO chỉ bị chặn ở tỉ lệ 16:9 (0,5625 × bề ngang):
     • màn hình DÀI hơn 16:9 (điện thoại nằm ngang) → khung ĐẦY KÍN màn hình, KHÔNG còn
       dải đen hai bên. Khung nhìn trong game tự nới rộng theo tỉ lệ màn hình (render.js
       `resize`: VW = 720 × tỉ lệ) nên thấy THÊM THẾ GIỚI hai bên mà tranh vẽ không bị kéo giãn.
     • màn hình CAO/hẹp hơn 16:9 (máy tính dọc, iPad dọc) → vẫn 16:9, dải đen trên/dưới. */
#frame{position:relative;background:#0b0e14;overflow:hidden;
  box-shadow:0 0 calc(var(--u)*3) rgba(0,0,0,.9);
  width:100%;
  height:min(100%, calc((var(--vvw) - var(--sal) - var(--sar)) * 9 / 16));
}
/* Đường CHÍNH (Chrome 105+, Safari 16+): đo thẳng vùng nội dung #stage bằng đơn vị
   container nên luôn khớp hộp thật — không phụ thuộc trình duyệt có trừ thanh URL hay không. */
@supports (width:1cqw){
  #stage{container-type:size;}
  #frame{
    width:100cqw;
    height:min(100cqh, calc(100cqw * 9 / 16));
  }
}
canvas#game{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:auto;
  touch-action:manipulation;}   /* tắt double-tap-zoom để BẤM ĐÚP trong túi ăn ngay */
.layer{position:absolute;inset:0;pointer-events:none;}
.hidden{display:none !important;}
.layer.hidden{display:none !important;}

/* ---------------- Nút TOÀN MÀN HÌNH ----------------
   Đặt trong #frame (đã nằm trong vùng an toàn) nên không bị tai thỏ che.
   z-index cao để luôn bấm được trong lúc chơi; ẩn khi còn màn Loading. */
.fs-btn{position:absolute;z-index:6;top:calc(var(--u)*1.5);right:calc(var(--u)*1.5);
  pointer-events:auto;cursor:pointer;padding:0;
  width:calc(var(--u)*5.6);height:calc(var(--u)*5.6);
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(224,180,99,.4);border-radius:calc(var(--u)*1);
  background:rgba(12,10,8,.52);opacity:.6;
  transition:opacity .15s ease,transform .12s ease,background .15s ease;}
.fs-btn:hover,.fs-btn:active{opacity:1;transform:scale(1.06);background:rgba(20,16,11,.75);}
.fs-btn svg{width:calc(var(--u)*3.2);height:calc(var(--u)*3.2);display:block;fill:none;
  stroke:#f2e6c8;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.8));}
.fs-btn .fs-out{display:none;}
body.is-fs .fs-btn .fs-in{display:none;}
body.is-fs .fs-btn .fs-out{display:block;}
/* Ở chế độ toàn màn hình, nền trang phủ kín (không còn khe hở của thanh trình duyệt) */
html:fullscreen,html:-webkit-full-screen{background:#0a0c12;}

/* ---------------- HUD ---------------- */
#hud{padding:calc(var(--u)*1.5) calc(var(--u)*1.8) 0;}
.hud-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:calc(var(--u)*1);}
.hud-left{display:flex;flex-direction:column;gap:calc(var(--u)*.8);align-items:flex-start;}
.hud-mid{display:flex;justify-content:center;padding-top:calc(var(--u)*.2);}
.hud-right{display:flex;flex-direction:column;gap:calc(var(--u)*.8);align-items:flex-end;}

/* nút tròn bằng đá ở cột trái (theo bản gốc) */
#side{display:flex;flex-direction:column;gap:calc(var(--u)*1.1);
  padding:calc(var(--u)*8.6) 0 0 calc(var(--u)*1.6);align-items:flex-start;}
.rbtn{pointer-events:auto;cursor:pointer;width:calc(var(--u)*5.4);height:calc(var(--u)*5.4);
  border-radius:50%;padding:0;border:1px solid rgba(70,62,50,.9);
  background:radial-gradient(circle at 34% 28%,#cfc7b6 0%,#a89f8d 45%,#7d7466 75%,#5b5346 100%);
  box-shadow:inset 0 calc(var(--u)*-.35) calc(var(--u)*.7) rgba(0,0,0,.45),
             inset 0 calc(var(--u)*.3) calc(var(--u)*.5) rgba(255,255,255,.28),
             0 calc(var(--u)*.25) calc(var(--u)*.6) rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;transition:transform .12s ease,filter .12s ease;}
.rbtn:hover{transform:scale(1.06);filter:brightness(1.08);}
.rbtn:active{transform:scale(.94);}
.rbtn img{width:96%;height:96%;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));}
.rbtn .qmark{font-size:calc(var(--u)*3.2);font-weight:700;color:#7fd4ff;
  text-shadow:0 1px 0 rgba(255,255,255,.5),0 0 calc(var(--u)*.8) rgba(90,190,255,.8);line-height:1;}
.hearts{position:relative;width:calc(var(--u)*26);height:calc(var(--u)*4);}
.hearts .bar-bg{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat;opacity:.95;}
.hearts .bar-fill{position:absolute;left:calc(var(--u)*1.1);top:calc(var(--u)*.9);height:calc(var(--u)*2.2);
  width:0%;background-size:100% 100%;background-repeat:no-repeat;transition:width .25s ease;
  filter:drop-shadow(0 0 calc(var(--u)*.4) rgba(0,255,120,.35));}
.chips{display:flex;gap:calc(var(--u)*.9);}
.chip{display:flex;align-items:center;gap:calc(var(--u)*.5);
  background:linear-gradient(180deg,rgba(24,20,16,.72),rgba(12,10,8,.8));
  border:1px solid rgba(224,180,99,.35);border-radius:calc(var(--u)*1);
  padding:calc(var(--u)*.35) calc(var(--u)*.9) calc(var(--u)*.35) calc(var(--u)*.5);
  font-size:calc(var(--u)*2);color:#f4e8cc;text-shadow:0 1px 2px #000;}
.chip img{width:calc(var(--u)*2.4);height:calc(var(--u)*2.4);object-fit:contain;}
.rune-pips{display:flex;gap:calc(var(--u)*.6);}
.pip{width:calc(var(--u)*2.6);height:calc(var(--u)*2.6);border-radius:50%;
  border:1px solid rgba(224,180,99,.4);background:rgba(10,12,16,.55);
  display:flex;align-items:center;justify-content:center;font-size:calc(var(--u)*1.3);color:#7e8a99;
  transition:all .3s ease;}
.pip.on{background:radial-gradient(circle at 50% 40%,#ffe9a8,#c98a2a);color:#3a2a10;
  box-shadow:0 0 calc(var(--u)*1.2) rgba(255,200,100,.75);border-color:#ffe9a8;}
.hud-level{font-size:calc(var(--u)*1.9);letter-spacing:.08em;color:#d9cfa8;
  text-shadow:0 2px 4px #000;opacity:.9;}
.icon-btn{pointer-events:auto;background:none;border:none;padding:0;cursor:pointer;}
.icon-btn img{width:calc(var(--u)*4.6);height:calc(var(--u)*4.6);display:block;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.7));transition:transform .15s ease;}
.icon-btn:hover img{transform:scale(1.08);}

/* ---------------- Whisper ---------------- */
#whisper{display:flex;align-items:flex-end;justify-content:center;padding-bottom:calc(var(--u)*5.4);}
.whisper-inner{max-width:62%;text-align:center;font-size:calc(var(--u)*2.1);line-height:1.45;
  color:#dfe8f2;opacity:0;transition:opacity .5s ease;
  text-shadow:0 0 calc(var(--u)*1.6) rgba(140,200,255,.65),0 2px 6px #000;
  font-style:italic;letter-spacing:.02em;}
.whisper-inner.show{opacity:.96;}

/* ---------------- Toast ---------------- */
#toasts{display:flex;flex-direction:column;align-items:center;padding-top:calc(var(--u)*9);gap:calc(var(--u)*.8);}
.toast{background:rgba(12,10,8,.8);border:1px solid rgba(224,180,99,.4);color:#f6ecd2;
  padding:calc(var(--u)*.5) calc(var(--u)*1.6);border-radius:calc(var(--u)*1);font-size:calc(var(--u)*1.9);
  opacity:0;transform:translateY(calc(var(--u)*-1));transition:all .35s ease;text-shadow:0 1px 2px #000;}
.toast.show{opacity:1;transform:none;}

/* ---------------- Level card ---------------- */
#levelcard{display:flex;align-items:center;justify-content:center;background:rgba(5,7,11,.55);}
.card{background:rgba(10,12,18,.82);border:1px solid rgba(224,180,99,.35);border-radius:calc(var(--u)*1.4);
  padding:calc(var(--u)*4) calc(var(--u)*6);text-align:center;max-width:70%;backdrop-filter:blur(2px);
  box-shadow:0 0 calc(var(--u)*6) rgba(0,0,0,.7);}
.card.wide{max-width:78%;}
.card h2{margin:0 0 calc(var(--u)*1.6);font-size:calc(var(--u)*4.4);color:var(--gold);letter-spacing:.06em;
  text-shadow:0 0 calc(var(--u)*2) rgba(224,180,99,.35);}
.card p{margin:calc(var(--u)*.6) 0;font-size:calc(var(--u)*2.2);color:#e5dcc4;line-height:1.55;}
.card .hint{color:#9fb4c8;font-style:italic;font-size:calc(var(--u)*2);}
/* Bảng QUA MÀN: phủ FULL MÀN HÌNH */
#complete{display:flex;align-items:center;justify-content:center;background:rgba(6,8,12,.94);}
#complete .card{width:100%;height:100%;max-width:100%;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;
  background:radial-gradient(ellipse at 50% 42%, rgba(34,29,22,.97) 0%, rgba(7,9,13,.99) 72%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;}
#complete .card h2{font-size:calc(var(--u)*6);}
#complete .card p{font-size:calc(var(--u)*2.6);}
#ending-text p{font-size:calc(var(--u)*2.2);line-height:1.6;color:#e5dcc4;}
#ending-text em{color:var(--gold);}

/* ---------------- Boards & menus ---------------- */
.board{pointer-events:auto;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(62%,calc(var(--u)*62));padding:calc(var(--u)*5.4) calc(var(--u)*7.5) calc(var(--u)*4.6);
  background:url("../assets/ui/sign_2.webp") center/100% 100% no-repeat;
  color:var(--ink);text-shadow:0 1px 0 rgba(255,255,255,.25);
  filter:drop-shadow(0 calc(var(--u)*1) calc(var(--u)*2) rgba(0,0,0,.75));}
.menu-board{width:min(62%,calc(var(--u)*62));}
.board h1{margin:0 0 calc(var(--u)*.6);font-size:calc(var(--u)*4.2);line-height:1.12;color:#2b2114;
  letter-spacing:.04em;text-align:center;}
.board h1 small{font-size:calc(var(--u)*2.5);letter-spacing:.2em;color:#5a4526;}
.board h2{margin:0 0 calc(var(--u)*2);text-align:center;font-size:calc(var(--u)*3.4);color:#2b2114;}
.tagline{text-align:center;font-size:calc(var(--u)*1.8);color:#4a3d2c;margin:0 0 calc(var(--u)*2.2);font-style:italic;}
.menu-btns{display:flex;flex-direction:column;gap:calc(var(--u)*1);align-items:center;}
.menu-btns.row{flex-direction:row;justify-content:center;margin-top:calc(var(--u)*2);}
/* ---------- MÀN TẠM DỪNG: nền VẼ BẰNG CSS (bỏ ảnh sign_2 bị méo khi đổi cỡ cửa sổ) ----------
   Ảnh nền cũ được kéo giãn `center/100% 100%` nên khi thu nhỏ rồi mở lại trình duyệt,
   tỉ lệ khung đổi → ảnh bị bóp méo, nhìn rất xấu. Nay dùng gradient + viền + bóng
   (co giãn vô hạn, không bao giờ méo). */
#pause{background:radial-gradient(120% 100% at 50% 40%,rgba(18,14,10,.55) 0%,rgba(10,8,6,.82) 100%);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);}
#pause .board{
  background:
    radial-gradient(130% 70% at 50% 0%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 62%),
    linear-gradient(180deg,#f4e9d0 0%,#e7d7b3 52%,#d8c295 100%);
  border:calc(var(--u)*.45) solid rgba(104,80,45,.6);
  border-radius:calc(var(--u)*2.6);
  box-shadow:
    inset 0 calc(var(--u)*.35) calc(var(--u)*1.2) rgba(255,255,255,.65),
    inset 0 calc(var(--u)*-1.1) calc(var(--u)*2.2) rgba(120,92,50,.22),
    0 calc(var(--u)*1.6) calc(var(--u)*3) rgba(0,0,0,.6);
  filter:none;
}
#pause .board h2{
  margin-bottom:calc(var(--u)*1.4);color:#2b2114;letter-spacing:.06em;
  text-shadow:0 calc(var(--u)*.15) 0 rgba(255,255,255,.55),0 calc(var(--u)*.3) calc(var(--u)*.6) rgba(90,70,40,.25);
}
#pause .board h2::after{                     /* đường kẻ trang trí dưới tiêu đề */
  content:"";display:block;height:calc(var(--u)*.18);margin:calc(var(--u)*1.1) auto 0;width:56%;
  background:linear-gradient(90deg,transparent,rgba(104,80,45,.5),transparent);
}
.small-board{width:min(44%,calc(var(--u)*44));}
.mbtn{pointer-events:auto;cursor:pointer;font-family:var(--serif);font-size:calc(var(--u)*2.1);
  color:#f3e7cb;background:linear-gradient(180deg,#5d4a30,#3a2c1b);
  border:1px solid rgba(224,180,99,.5);border-radius:calc(var(--u)*.9);
  padding:calc(var(--u)*.62) calc(var(--u)*2.4);min-width:calc(var(--u)*21);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 4px rgba(0,0,0,.45);
  transition:transform .12s ease,filter .12s ease;}
.mbtn:hover{transform:translateY(calc(var(--u)*-.25));filter:brightness(1.15);}
.mbtn:active{transform:translateY(0);}
.mbtn[disabled]{opacity:.45;cursor:not-allowed;transform:none;filter:none;}
.foot{margin-top:calc(var(--u)*1.6);text-align:center;
  font-size:calc(var(--u)*1.2);color:#6b5a3d;font-style:italic;}
.sub-board{display:none;width:min(62%,calc(var(--u)*62));max-height:88%;overflow:auto;
  padding:calc(var(--u)*7.5) calc(var(--u)*7.5) calc(var(--u)*9);}
.sub-board.show{display:block;}
.sub-board .row-item{display:flex;justify-content:space-between;align-items:center;gap:calc(var(--u)*2);
  padding:calc(var(--u)*.62) 0;border-bottom:1px dashed rgba(70,55,32,.35);font-size:calc(var(--u)*1.85);color:#33281a;}
.sub-board .k{font-weight:bold;color:#2b2114;}
.sub-board .hintline{font-size:calc(var(--u)*1.65);color:#4a3d2c;margin:calc(var(--u)*1) 0 calc(var(--u)*1.4);text-align:center;font-style:italic;line-height:1.45;}
.lv-btn{min-width:auto;padding:calc(var(--u)*.5) calc(var(--u)*1.8);font-size:calc(var(--u)*1.9);}
.board .back{margin-top:calc(var(--u)*2);display:flex;justify-content:center;}
.switch{display:flex;align-items:center;gap:calc(var(--u)*1);}
input[type=range]{width:calc(var(--u)*22);}
.journal-board{width:min(60%,calc(var(--u)*60));max-height:86%;overflow:auto;}
#journal-body{font-size:calc(var(--u)*2);color:#33281a;line-height:1.6;}
#journal-body .jrow{display:flex;align-items:center;gap:calc(var(--u)*1.2);padding:calc(var(--u)*.5) 0;}
#journal-body img{width:calc(var(--u)*3);height:calc(var(--u)*3);object-fit:contain;}
#journal-body .whisperline{font-style:italic;color:#4c412f;padding-left:calc(var(--u)*2);}

/* ---------------- Touch controls ---------------- */
#touch{display:flex;justify-content:space-between;align-items:flex-end;
  padding:0 calc(var(--u)*2.4) calc(var(--u)*2.6);}
.pad-left,.pad-right{display:flex;gap:calc(var(--u)*1.4);align-items:flex-end;pointer-events:auto;}
.tbtn{pointer-events:auto;background:none;border:none;padding:0;cursor:pointer;opacity:.92;}
.tbtn img{width:calc(var(--u)*8.4);height:calc(var(--u)*8.4);display:block;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.75));transition:transform .1s ease,filter .1s ease;}
.tbtn.small img{width:calc(var(--u)*6.6);height:calc(var(--u)*6.6);}
.tbtn.act img{transform:scale(.9);filter:drop-shadow(0 0 calc(var(--u)*1.2) rgba(255,220,150,.9));}
body:not(.touch-mode) #touch{display:none;}

/* ---------------- Boot ---------------- */
#boot{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#f3ecdc 0%,#efe6d2 38%,#e4d8bd 70%,#d9c9a6 100%);}
.boot-scene{position:relative;width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:calc(var(--u)*2.6);}
#boot-dog{width:calc(var(--u)*13);height:auto;filter:drop-shadow(0 calc(var(--u)*.4) calc(var(--u)*.8) rgba(0,0,0,.25));
  animation:bootdog 1.15s ease-in-out infinite;transform-origin:50% 100%;}
/* chó nhún nhẹ như đang thở/đợi — màn Loading có animation ngay từ khung đầu */
@keyframes bootdog{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-3.5%) scale(1.03,.97)}}
.boot-title{font-family:var(--serif);font-size:calc(var(--u)*4.4);letter-spacing:.1em;
  color:#2b2114;font-weight:700;text-align:center;
  text-shadow:0 1px 0 rgba(255,255,255,.5),0 calc(var(--u)*.5) calc(var(--u)*1.2) rgba(90,70,40,.25);}
.boot-en{font-family:var(--serif);font-size:calc(var(--u)*1.9);letter-spacing:.3em;
  color:#6a5a3c;opacity:.9;margin-top:calc(var(--u)*-.9);text-transform:uppercase;}
.boot-loading{font-family:var(--serif);font-size:calc(var(--u)*2.1);letter-spacing:.34em;
  color:#3a3226;opacity:.85;animation:bootpulse 1.6s ease-in-out infinite;}
@keyframes bootpulse{0%,100%{opacity:.45}50%{opacity:.95}}
.boot-inner{text-align:center;}
#boot-text{font-size:calc(var(--u)*2);color:#c9bd9d;letter-spacing:.1em;display:block;margin-top:calc(var(--u)*1.4);}
#boot-bar{width:calc(var(--u)*36);height:calc(var(--u)*1);background:rgba(255,255,255,.12);
  border-radius:999px;overflow:hidden;margin:0 auto;}
#boot-bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#c98a2a,#ffe9a8);transition:width .2s ease;}

/* ---------------- Responsive ---------------- */
@media (max-width:820px){
  .board{width:86%;padding-top:calc(var(--u)*9);}
  .sub-board{width:90%;}
}