/* Bạch Đằng 938 — giao diện khung game: menu, lớp phủ giấy, Sổ tay, tiến trình. Dùng token của style.css. */

/* ---------- Menu chính ---------- */
#menu {
  position: fixed; inset: 0;
  overflow-y: auto;
  display: grid; place-items: center;
  padding: 24px 16px;
  box-sizing: border-box;
  background: #1E2A36;
}
/* Cảnh nền (menu-nen.js) phủ kín màn; một quầng tối mềm sau cột chữ để chữ luôn đọc rõ. */
#menu-nen, #menu::before { position: fixed; inset: 0; pointer-events: none; }
#menu-nen svg { display: block; width: 100%; height: 100%; }
#menu::before {
  content: ""; z-index: 1;
  background: radial-gradient(ellipse min(80vw, 560px) min(62vh, 520px) at 50% 50%, rgba(23, 16, 11, 0.72), rgba(23, 16, 11, 0.35) 60%, transparent 100%);
}
.menu-khung { position: relative; z-index: 2; width: min(100%, 520px); display: flex; flex-direction: column; gap: 14px; text-align: center; }

.mn-song { animation: mn-troi var(--toc, 18s) linear infinite; }
.mn-song-1 { --toc: 26s; } .mn-song-2 { --toc: 20s; animation-direction: reverse; } .mn-song-3 { --toc: 16s; } .mn-song-4 { --toc: 12s; animation-direction: reverse; }
@keyframes mn-troi { to { translate: var(--chu-ky) 0; } }
.mn-may { animation: mn-may 60s ease-in-out infinite alternate; }
.mn-may-2 { animation-duration: 75s; animation-direction: alternate-reverse; }
.mn-may-3 { animation-duration: 90s; }
@keyframes mn-may { to { translate: 90px 0; } }
.mn-thuyen { transform-box: fill-box; transform-origin: 50% 85%; animation: mn-nhap 5.5s ease-in-out infinite; }
@keyframes mn-nhap { 0%, 100% { rotate: -1.2deg; translate: 0 0; } 50% { rotate: 1.2deg; translate: 0 5px; } }
.mn-co { animation: mn-bay 70s linear infinite; }
@keyframes mn-bay { from { translate: -1000px 60px; } to { translate: 900px -60px; } }
.mn-sao { animation: mn-lap 6s ease-in-out infinite alternate; }
@keyframes mn-lap { to { opacity: 0.55; } }
.mn-thuyen-nho { transform-box: fill-box; transform-origin: 50% 80%; animation: mn-nhap 4.5s ease-in-out infinite; }
.mn-co-doc { animation: mn-luon 9s ease-in-out infinite alternate; }
@keyframes mn-luon { to { translate: 50px -18px; } }
/* Hai vách đá và thuyền nan chỉ hiện khi màn hình dọc (bản ngang đã có núi hai bờ). */
.mn-doc { display: none; }
@media (max-aspect-ratio: 4/5) { .mn-doc { display: inline; } .mn-co { display: none; } }
@media (prefers-reduced-motion: reduce) { #menu-nen * { animation: none !important; } }
.giam-dong #menu-nen * { animation: none !important; }
.menu-chuong { margin: 0; font-family: var(--font-nhan); letter-spacing: 0.12em; color: var(--hoe); font-size: 15px; }
#menu h1 {
  margin: 0;
  font-family: var(--font-nhan); font-weight: 400;
  font-size: clamp(38px, 11vw, 64px); letter-spacing: 0.04em; line-height: 1.1;
  color: var(--giay);
  text-shadow: 3px 3px 0 #000;
}
.menu-de { margin: 0 0 8px; font-style: italic; color: var(--giay-dam); line-height: 1.5; }
.menu-nut { display: flex; flex-direction: column; gap: 10px; }
.menu-nut button {
  font: inherit; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
  color: var(--than); background: var(--giay);
  border: 2.5px solid #000; box-shadow: 4px 4px 0 #000;
  padding: 11px 16px;
  cursor: pointer;
  transition: translate 0.15s, background 0.15s;
}
.menu-nut button:nth-child(even) { rotate: 0.4deg; }
.menu-nut button:nth-child(odd) { rotate: -0.4deg; }
.menu-nut button:hover, .menu-nut button:focus-visible { background: var(--giay-dam); translate: 0 -2px; }
.menu-nut button:focus-visible { outline: 3px solid var(--hoe); outline-offset: 3px; }
.menu-nut .nhan { font-family: var(--font-nhan); font-size: 21px; letter-spacing: 0.04em; }
.menu-nut .phu { font-size: 14px; font-style: italic; opacity: 0.8; }
#m-tiep { background: var(--hoe); }
.menu-chu { margin: 6px 0 0; font-size: 13px; font-style: italic; color: var(--giay-dam); opacity: 0.75; line-height: 1.5; }

/* ---------- Trong màn chơi ---------- */
#hud { align-items: center; }
#hud .ten { max-width: calc(100vw - 300px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#da-luu {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  translate: -50% 0;
  max-width: calc(100vw - 32px);
  padding: 6px 14px;
  background: var(--than); color: var(--giay);
  border: 1.5px solid var(--hoe);
  font-size: 14px;
  z-index: 5;
}
.choice.nut-lon {
  font-family: var(--font-nhan); font-size: clamp(18px, 2.4vw, 24px); letter-spacing: 0.05em;
  padding: 12px 26px;
  background: var(--hoe);
}
.choice:disabled { cursor: default; opacity: 0.75; }

/* ---------- Lớp phủ giấy ---------- */
#lop {
  position: fixed; inset: 0; z-index: 10;
  display: grid; place-items: center;
  padding: 16px;
  box-sizing: border-box;
  background: rgba(10, 7, 4, 0.82);
}
.giay-to {
  width: min(100%, 440px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  box-sizing: border-box;
  background: var(--giay); color: var(--than);
  border: 3px solid var(--than);
  box-shadow: 8px 8px 0 #000;
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.giay-to.rong { width: min(100%, 980px); }
.giay-to h2 { margin: 0; font-family: var(--font-nhan); font-weight: 400; color: var(--son); font-size: 28px; letter-spacing: 0.04em; }
.giay-to h3 { font-family: var(--font-nhan); font-weight: 400; }
.giay-to p { margin: 0; line-height: 1.5; }
.giay-to .nho { font-size: 14px; font-style: italic; opacity: 0.8; }
.dau-to { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: sticky; top: -22px; background: var(--giay); padding-block: 4px; margin-top: -4px; z-index: 1; }
.giay-to button {
  font: inherit; font-size: 16px;
  color: var(--than); background: var(--giay-dam);
  border: 2px solid var(--than);
  padding: 8px 14px;
  cursor: pointer;
}
.giay-to button:hover { background: var(--hoe); }
.giay-to button:focus-visible, .giay-to input:focus-visible { outline: 3px solid var(--hoe); outline-offset: 2px; }
.cot-nut { display: flex; flex-direction: column; gap: 8px; }
.cot-nut button { text-align: left; }
.hang-nut { display: flex; flex-wrap: wrap; gap: 8px; }
.giay-to button.nguy { background: transparent; border-color: var(--son); color: var(--son); align-self: flex-start; }
.giay-to button.nguy:hover { background: var(--son); color: var(--giay); }

/* hết chương */
#o-het .ket { font-family: var(--font-nhan); font-size: 21px; color: var(--than); }
.tom { margin: 0; display: grid; grid-template-columns: 1fr; gap: 2px; font-size: 15px; }
.tom dt { font-size: 13px; opacity: 0.7; margin-top: 6px; }
.tom dd { margin: 0; }

/* ---------- Cài đặt ---------- */
.cai-dat { display: flex; flex-direction: column; gap: 12px; }
.cai-dat fieldset { border: 1.5px solid rgba(43, 33, 24, 0.4); padding: 8px 12px 10px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.cai-dat legend { font-family: var(--font-nhan); padding: 0 4px; }
.cai-dat label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.cai-dat .dong-chon { line-height: 1.4; }
.cai-dat input { accent-color: var(--son); width: 18px; height: 18px; }
.cai-dat input[type=range] { width: min(200px, 50vw); height: auto; }
.cai-dat .am { flex-direction: column; align-items: flex-start; }

/* ---------- Sổ tay ---------- */
.loc { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 14px;
  padding: 3px 10px;
  border: 1.5px solid var(--than);
  background: transparent;
  list-style: none;
}
button.chip { font-size: 14px; padding: 3px 10px; background: transparent; }
.chip.chon { background: var(--hoe); }
.the-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.the {
  margin: 0;
  border: 2px solid var(--than);
  background: #F6EDD8;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 15px;
}
.the h3 { margin: 0; font-size: 19px; }
.the .tang { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
.the .moi { background: var(--son); color: var(--giay); padding: 0 5px; letter-spacing: 0.05em; }
.the.tang-CS { border-left: 8px solid var(--than); }
.the.tang-TT { border-left: 8px solid var(--hoe); }
.the.tang-SL { border-left: 8px solid var(--nuoc, #5F8381); }
.the.tang-HC { border-left: 8px solid var(--son); }
.the.khoa { background: transparent; border-style: dashed; opacity: 0.6; }
.the.khoa .mo { font-style: italic; font-size: 14px; }

/* ---------- Tiến trình ---------- */
#tien-trinh { display: flex; flex-direction: column; gap: 18px; }
.hoi h3 { margin: 0 0 8px; font-size: 19px; color: var(--son); }
.chuoi { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 3px solid var(--than); display: flex; flex-direction: column; gap: 8px; }
.chuoi > li { position: relative; }
.chuoi > li::before { content: ""; position: absolute; left: -22px; top: 16px; width: 13px; height: 13px; border-radius: 50%; background: var(--giay); border: 3px solid var(--than); }
.nhanh { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.nut-canh { border: 2px solid var(--than); padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; background: #F6EDD8; }
.nut-canh .so { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.nut-canh .ten { font-family: var(--font-nhan); font-size: 17px; }
.nut-canh.trong-luot { border-width: 3px; box-shadow: 3px 3px 0 var(--than); }
.nut-canh.da-qua { opacity: 0.75; }
.nut-canh.khoa { background: transparent; border-style: dashed; opacity: 0.5; }
.nut-canh.dang { background: var(--hoe); }
.chip-list { margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.chip.da-thay { opacity: 0.75; }
.chip.chua { opacity: 0.4; border-style: dashed; }
.nut-canh button.quay { align-self: flex-start; font-size: 13px; padding: 3px 9px; margin-top: 2px; }
.ket-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px; }
.ket-list li { border: 2px solid var(--than); padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.ket-list li span { font-size: 13px; font-style: italic; opacity: 0.75; }
.ket-list li.khoa { border-style: dashed; opacity: 0.5; }

@media (max-width: 520px) {
  .giay-to { padding: 18px 16px; }
  .dau-to { top: -18px; }
  #hud .ten { display: none; }
}