/* Lớp giao diện đè lên CSS gốc trong vi/index.html.
   Gỡ thẻ <link> và <script> của redesign.* là trở về giao diện cũ. */

/* ---------- Font chữ thường có đủ dấu tiếng Việt ----------
   IBM Plex Sans KR thiếu dải U+1EA0-1EF1 (ạ…ự), nên trang tiếng Việt
   dùng IBM Plex Sans (cùng họ với Plex Mono) và để Plex Sans KR lo chữ Hàn. */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url(/fonts/ibm-plex-sans-vietnamese-400-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 500; src: url(/fonts/ibm-plex-sans-vietnamese-500-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 600; src: url(/fonts/ibm-plex-sans-vietnamese-600-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 700; src: url(/fonts/ibm-plex-sans-vietnamese-700-normal.woff2) format('woff2'); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url(/fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 500; src: url(/fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 600; src: url(/fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 700; src: url(/fonts/ibm-plex-sans-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 400; src: url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 500; src: url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 600; src: url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-display: swap; font-weight: 700; src: url(/fonts/ibm-plex-sans-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

html[lang="vi"] {
  --f-body: 'IBM Plex Sans', 'IBM Plex Sans KR', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', 'IBM Plex Sans', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* ---------- Màn hình chơi trên máy tính (từ 1024px) ----------
   Câu chuyện là cột chính, chỉ số gọn trong HUD dính phía trên,
   chi tiết chỉ hiện khi rê chuột hoặc chạm vào HUD. Dưới 1024px giữ nguyên bản gốc. */
@media (min-width: 1024px) {

  /* Bố cục: cột câu chuyện + cột hồ sơ bên phải */
  html.rd #lifeview .life {
    grid-template-columns: minmax(0, 1fr) clamp(300px, 28vw, 380px);
    column-gap: 32px; row-gap: 16px; padding-block: 24px 72px;
  }
  html.rd #lifeview .life > .rd-story { grid-column: 1; grid-row: 1 / span 2; }
  html.rd #lifeview .life > .rd-side { grid-column: 2; grid-row: 1; }
  html.rd #lifeview .life > .rd-more { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 16px; }

  /* Thanh trên cùng: một hàng, chỉ giữ điều khiển thời gian */
  html.rd #lifeview .topbar .wrap { flex-wrap: nowrap; gap: 24px; padding-block: 12px; }
  html.rd #lifeview .speed { flex-wrap: nowrap; gap: 8px; }
  html.rd #lifeview .speed button { min-height: 36px; }
  html.rd #lifeview .speed #pauseBtn { padding-inline: 12px; font-family: var(--f-body); }
  html.rd #lifeview .speed .sps { display: inline-flex; }
  html.rd #lifeview .speed .sps button { border-radius: 0; margin-left: -1px; min-width: 40px; padding: 6px 0; }
  html.rd #lifeview .speed .sps button:first-child { border-radius: 4px 0 0 4px; margin-left: 0; }
  html.rd #lifeview .speed .sps button:last-child { border-radius: 0 4px 4px 0; }
  html.rd #lifeview .speed .sps button[aria-pressed="true"] { position: relative; z-index: 1; }
  html.rd #lifeview .speed > button { border-radius: 4px; }
  html.rd #lifeview .speed #ffBtn { font-weight: 600; white-space: nowrap; }

  /* Menu ⋯ gom các nút phụ: tự động, nhạc, ghi suy nghĩ, sáng/tối, góp ý, thoát */
  html.rd #lifeview .speed .morebtn { display: inline-flex; align-items: center; justify-content: center; position: relative; min-width: 40px; font-size: 18px; line-height: 1; }
  html.rd #lifeview .speed .morebtn.on::after { content: ''; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--stamp); }
  html.rd #lifeview .more {
    display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 25;
    flex-direction: column; align-items: stretch; gap: 2px; min-width: 240px; padding: 6px;
    background: var(--card); border: 1px solid var(--rule); border-radius: 4px; box-shadow: var(--shadow);
  }
  html.rd #lifeview .more.open { display: flex; }
  html.rd #lifeview .speed .more button {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; min-height: 40px; padding: 8px 12px; text-align: left; font-size: 14px;
    border: 0; border-radius: 3px; background: transparent; color: var(--ink);
  }
  html.rd #lifeview .speed .more button:hover, html.rd #lifeview .speed .more button:focus-visible { background: var(--card2); }
  html.rd #lifeview .speed .more button[aria-pressed="true"] { background: transparent; color: var(--ink); }
  html.rd #lifeview .speed .more button[aria-pressed="true"]::after { content: '✓'; color: var(--stamp); font-weight: 600; }
  html.rd #lifeview .speed .more button[aria-pressed="true"]:hover { background: var(--card2); }
  html.rd #lifeview .speed .more #pauseQ[aria-pressed="false"] { color: var(--ink2); }
  html.rd #lifeview .speed .more .mo { display: flex; }
  html.rd #lifeview .speed .more .themebtn2 { justify-content: flex-start; gap: 6px; }
  html.rd #lifeview .speed .more .themebtn2 .tbl { display: inline; }
  html.rd #lifeview .speed .more #quitBtn { margin-top: 4px; border-top: 1px solid var(--rule2); border-radius: 0 0 3px 3px; color: var(--bad); }

  /* HUD chỉ số: dính dưới thanh trên cùng khi cuộn */
  html.rd #lifeview .rd-story .minibar {
    display: flex; align-items: center; gap: 16px;
    position: sticky; top: calc(var(--tbh, 64px) + 10px); z-index: 15;
    padding: 10px 12px 10px 16px;
    background: var(--card); border: 1px solid var(--rule); border-radius: 4px; box-shadow: var(--shadow);
  }
  html.rd #lifeview .mb-st {
    flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
    margin: -4px -6px; padding: 4px 6px; border-radius: 3px; cursor: pointer;
  }
  html.rd #lifeview .mb-st:hover, html.rd #lifeview .mb-st[aria-expanded="true"] { background: var(--card2); }
  html.rd #lifeview .mb-st:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  html.rd #lifeview .mb-i { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 6px; font-size: 12.5px; color: var(--ink2); min-width: 0; }
  html.rd #lifeview .mb-i .mb-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.rd #lifeview .mb-i b { font: 600 14px var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
  html.rd #lifeview .mb-i .mb-b { grid-column: 1 / -1; height: 4px; margin-top: 5px; border-radius: 2px; background: var(--rule2); overflow: hidden; }
  html.rd #lifeview .mb-i .mb-b i { display: block; height: 100%; border-radius: 2px; transition: width .4s ease; }
  html.rd #lifeview .mb-fo {
    flex: 0 1 auto; min-width: 0; max-width: 40%; display: inline-flex; align-items: center; gap: 6px;
    min-height: 36px; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px;
    background: var(--paper); color: var(--ink); font-size: 13px;
  }
  html.rd #lifeview .mb-fo[hidden] { display: none; }
  html.rd #lifeview .mb-fo .mb-fl { color: var(--ink3); font-size: 12px; flex: none; }
  html.rd #lifeview .mb-fo b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  html.rd #lifeview .mb-fo .mb-ar { flex: none; color: var(--ink3); font-size: 11px; }
  html.rd #lifeview .mb-fo:hover, html.rd #lifeview .mb-sh:hover { border-color: var(--ink3); }
  html.rd #lifeview .mb-fo[aria-expanded="true"] { border-color: var(--accent); }
  html.rd #lifeview .mb-pick {
    position: absolute; left: -1px; right: -1px; top: calc(100% + 8px); z-index: 17;
    display: flex; flex-wrap: wrap; gap: 6px; padding: 12px;
    background: var(--card); border: 1px solid var(--rule); border-radius: 4px; box-shadow: var(--shadow);
  }
  html.rd #lifeview .mb-pick[hidden] { display: none; }

  /* Bảng chi tiết chỉ số: bật lên dưới HUD khi rê chuột, chạm hoặc focus */
  html.rd #lifeview .minibar > .p-stats {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 16;
    width: min(400px, 100%); max-height: calc(100dvh - var(--tbh, 64px) - 120px); overflow-y: auto;
    box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .15s ease .12s, transform .15s ease .12s, visibility 0s linear .27s;
  }
  /* cầu nối vô hình giữa HUD và bảng, để rê chuột xuống không bị tắt giữa chừng */
  html.rd #lifeview .minibar > .p-stats::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
  html.rd #lifeview .mb-st:hover ~ .p-stats,
  html.rd #lifeview .mb-st[aria-expanded="true"] ~ .p-stats,
  html.rd #lifeview .minibar > .p-stats:hover,
  html.rd #lifeview .minibar > .p-stats:focus-within {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .15s ease, transform .15s ease, visibility 0s;
  }
  html.rd #lifeview .mb-pick:not([hidden]) ~ .p-stats { opacity: 0; visibility: hidden; }
  html.rd #lifeview .minibar > .p-stats .foldbtn { display: none; }
  html.rd #lifeview .minibar > .p-stats.folded > #statBars,
  html.rd #lifeview .minibar > .p-stats.folded > .stathelp,
  html.rd #lifeview .minibar > .p-stats.folded > #spend { display: block !important; }
  html.rd #lifeview .minibar > .p-stats.folded > #money { display: grid !important; }
  html.rd #lifeview .minibar > .p-stats.folded h3 { margin-bottom: 10px; }

  /* Thứ tự cột câu chuyện: cảnh, HUD, ghi chép, rồi mới tới phần giải thích trọng tâm
     (chọn trọng tâm đã có sẵn trong HUD) */
  html.rd #lifeview .rd-story .p-scene { order: 1; }
  html.rd #lifeview .rd-story .minibar { order: 2; }
  html.rd #lifeview .rd-story .p-feed { order: 3; }
  html.rd #lifeview .rd-story .p-focus { order: 4; }

  /* Trọng tâm năm nay: dải mảnh, không thành một thẻ nặng */
  html.rd #lifeview .rd-story .p-focus { background: transparent; border-color: transparent; padding: 4px 4px 0; }
  html.rd #lifeview .rd-story .p-focus h3 { font-size: 14px; }
  html.rd #lifeview .rd-story .p-focus .status { font-size: 14px; max-width: 72ch; }

  /* Ghi chép cuộc đời: phần chính, chữ to và thoáng hơn, chiếm gần hết chiều cao màn hình */
  html.rd #lifeview .rd-story .p-feed { padding: 20px 24px 12px; }
  html.rd #lifeview .rd-story .p-feed > h3 { margin-bottom: 6px; }
  html.rd #lifeview .rd-story .feed { max-height: max(440px, calc(100dvh - var(--tbh, 64px) - 210px)); }
  html.rd #lifeview .rd-story .feed li { grid-template-columns: 4em minmax(0, 1fr); gap: 14px; padding: 12px 0; font-size: 15.5px; line-height: 1.65; }
  html.rd #lifeview .rd-story .feed .x { max-width: 70ch; }
  html.rd #lifeview .rd-story .feed .a { font-size: 12.5px; padding-top: 4px; }
  html.rd #lifeview .rd-story .feed .f { font-size: 12px; margin-top: 4px; }
  html.rd #lifeview .rd-story .feed li.death .x { font-size: 19px; }

  /* Cột hồ sơ: bớt nặng nề */
  html.rd #lifeview .rd-side .panel, html.rd #lifeview .rd-more .panel { padding: 14px 16px; }
  html.rd #lifeview .rd-side .idcard { padding: 0; }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  html.rd #lifeview .minibar > .p-stats { transform: none; transition: none; }
  html.rd #lifeview .mb-i .mb-b i { transition: none; }
}

/* ---------- Trang chủ ---------- */
/* Nút Chào đời lên ngay vùng đầu trang, cài đặt thu gọn trong "Tùy chỉnh cuộc đời" */
.herocta { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.herocta .ctarow { gap: 12px 16px; }
.herocta #startBtn { font-size: 19px; padding: 15px 44px; }
.herocta .ctahint { font-size: 13.5px; color: var(--ink3); }
.herocta .warnline { margin: 0; font-size: 12.5px; }
.optsbox { border: 1px solid var(--rule); border-radius: 4px; background: var(--card); }
.optsbox > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 12px 16px; border-radius: 4px; }
.optsbox > summary::-webkit-details-marker { display: none; }
.optsbox > summary:hover { background: var(--card2); }
.optsbox > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.optsbox > summary .ob-t { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.optsbox > summary .ob-t::after { content: ' ▾'; color: var(--ink3); font-weight: 400; }
.optsbox[open] > summary .ob-t::after { content: ' ▴'; }
.optsbox > summary .ob-s { font-size: 13.5px; color: var(--ink2); }
.optsbox[open] > summary { border-bottom: 1px solid var(--rule2); border-radius: 4px 4px 0 0; }
.optsbox .opts { margin: 0; padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.optsbox .optgroup .hint { max-width: none; }

/* Phần giải thích dài nằm sau một nút mở/đóng */
.howbox { margin-top: 48px; border-top: 1px solid var(--rule); padding-top: 18px; }
.howbox > summary { list-style: none; cursor: pointer; font-family: var(--f-display); font-weight: 700; font-size: 17px; }
.howbox > summary::-webkit-details-marker { display: none; }
.howbox > summary::before { content: '▸ '; color: var(--ink3); }
.howbox[open] > summary::before { content: '▾ '; }
.howbox > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.howbox .notes { margin-top: 18px; border-top: 0; padding-top: 0; }

/* Nhãn nhỏ: bỏ chữ in hoa giãn cách cho đỡ rối */
.lbl { text-transform: none; letter-spacing: 0; font-weight: 500; }

/* ---------- Tác động của sự kiện và quyết định ---------- */
.feed .fxc { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 8px; vertical-align: 1px; }
.feed .fxi { font: 600 11.5px/1.55 var(--f-mono); padding: 0 6px; border-radius: 3px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.feed .fxi.up { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.feed .fxi.dn { color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); }
.feed li.hasfx { cursor: default; }

/* Số +/− bay lên cạnh chỉ số trên HUD */
.minibar .mb-fx {
  position: absolute; z-index: 18; pointer-events: none;
  padding: 1px 6px; border-radius: 3px; background: var(--card); box-shadow: var(--shadow);
  font: 700 13px/1.4 var(--f-mono); font-variant-numeric: tabular-nums;
  transform: translate(-100%, -110%); animation: mbfx 2.4s ease-out forwards;
}
.minibar .mb-fx.up { color: var(--good); }
.minibar .mb-fx.dn { color: var(--bad); }
@keyframes mbfx {
  0% { opacity: 0; transform: translate(-100%, -40%); }
  12% { opacity: 1; transform: translate(-100%, -105%); }
  75% { opacity: 1; transform: translate(-100%, -115%); }
  100% { opacity: 0; transform: translate(-100%, -160%); }
}
@keyframes mbfxs { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .minibar .mb-fx { animation-name: mbfxs; }
}

/* ---------- Thanh điều khiển trên điện thoại ----------
   Chỉ giữ 1×, 4×, 16× (tốc độ đang chọn luôn hiện), nút đủ lớn để bấm bằng ngón tay */
@media (max-width: 560px) {
  #lifeview .speed button { min-height: 44px; }
  #lifeview .speed .sps button[data-speed="2"]:not([aria-pressed="true"]),
  #lifeview .speed .sps button[data-speed="8"]:not([aria-pressed="true"]),
  #lifeview .speed .sps button[data-speed="12"]:not([aria-pressed="true"]) { display: none; }
  #lifeview .speed .sps button { min-width: 44px; }
  #lifeview .speed #pauseBtn { min-width: 48px; font-size: 15px; }
  #lifeview .speed .morebtn { min-width: 44px; }
}

/* ---------- Màn kết quả sau khi chọn ---------- */
.dec.decres .bd { padding: 20px 22px 22px; }
.decres .dr-q { margin: 0 0 6px; font-size: 13.5px; color: var(--ink3); }
.decres h2 { margin-bottom: 14px; }
.decres h2 small { display: block; margin-bottom: 2px; font-family: var(--f-body); font-size: 13px; font-weight: 500; color: var(--accent); }
.decres .dr-out { margin: 0 0 10px; font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.decres .dr-fx { margin: 14px 0 18px; padding-top: 14px; border-top: 1px solid var(--rule2); }
.decres .dr-fx .fxc { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.decres .dr-fx .fxi { font: 600 13px/1.6 var(--f-mono); padding: 2px 9px; border-radius: 3px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.decres .dr-fx .fxi.up { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.decres .dr-fx .fxi.dn { color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); }
.decres .dr-none { font-size: 13.5px; color: var(--ink3); }
.decres .dr-go { display: flex; justify-content: flex-end; }
.decres .dr-go .cta { min-width: 140px; justify-content: center; }
@media (prefers-reduced-motion: no-preference) {
  .dec.decres { animation: drIn .22s ease-out; }
  @keyframes drIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* ---------- Ô "Trọng tâm" trên HUD: trông rõ là nút chọn được ---------- */
html.rd #lifeview .mb-fo {
  gap: 8px; min-height: 38px; padding: 5px 6px 5px 14px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--rule));
  background: var(--accent-soft); color: var(--ink);
  transition: border-color .15s ease, background-color .15s ease;
}
html.rd #lifeview .mb-fo .mb-fl { color: var(--ink2); }
html.rd #lifeview .mb-fo .mb-ar {
  flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--accent); font-size: 0;
}
html.rd #lifeview .mb-fo .mb-ar::before {
  content: ''; width: 6px; height: 6px; transform: translateY(-1px) rotate(45deg);
  border-right: 2px solid var(--accent-ink); border-bottom: 2px solid var(--accent-ink);
  transition: transform .15s ease;
}
html.rd #lifeview .mb-fo[aria-expanded="true"] .mb-ar::before { transform: translateY(1px) rotate(-135deg); }
html.rd #lifeview .mb-fo:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, var(--card)); }
html.rd #lifeview .mb-fo[aria-expanded="true"] { border-color: var(--accent); }
html.rd #lifeview .mb-fo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html.rd #lifeview .mb-fo, html.rd #lifeview .mb-fo .mb-ar::before { transition: none; }
}

/* ---------- Giải thích chỉ số trong bảng bật lên từ HUD ---------- */
@media (min-width: 1024px) {
  html.rd #lifeview .minibar > .p-stats { width: min(460px, 100%); }
  html.rd #lifeview .minibar > .p-stats .stathelp > summary { display: none; }
  html.rd #lifeview .minibar > .p-stats .stathelp { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--rule); }
  html.rd #lifeview .minibar > .p-stats .stathelp ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
  html.rd #lifeview .minibar > .p-stats .stathelp li { margin: 0; padding: 6px 10px; border-left: 2px solid transparent; border-radius: 0 3px 3px 0; font-size: 13px; line-height: 1.5; color: var(--ink2); }
  html.rd #lifeview .minibar > .p-stats .stathelp li b { display: block; color: var(--ink); font-weight: 600; }
  html.rd #lifeview .minibar > .p-stats .stathelp.has-on li:not(.on) { display: none; }
  html.rd #lifeview .minibar > .p-stats .stathelp li.on { background: var(--card2); border-left-color: var(--accent); color: var(--ink); }
  html.rd #lifeview .minibar > .p-stats .stathelp > p { margin: 10px 0 0; font-size: 12.5px; color: var(--ink3); }
}
/* Trên điện thoại: chạm vào thanh chỉ số để xem bảng đầy đủ */
@media (max-width: 1023px) {
  #lifeview .mb-st { cursor: pointer; }
}

/* Ô Trọng tâm trên điện thoại: gọn lại để nhãn chỉ số không bị cắt */
@media (max-width: 560px) {
  html.rd #lifeview .mb-fo { max-width: 36%; gap: 6px; padding: 4px 4px 4px 10px; min-height: 36px; }
  html.rd #lifeview .mb-fo b { font-size: 12.5px; }
  html.rd #lifeview .mb-fo .mb-ar { width: 20px; height: 20px; }
  html.rd #lifeview .mb-sh { padding: 6px 10px; }
}

/* Màn hình rất hẹp: "Chi tiêu" đã có trong menu ⋯, bỏ khỏi HUD để nhãn chỉ số không bị cắt */
@media (max-width: 440px) {
  html.rd #lifeview .minibar .mb-sh { display: none; }
  html.rd #lifeview .mb-fo { max-width: 40%; }
}

/* Bản này mới có tiếng Việt: ẩn các ngôn ngữ chưa có trên thanh chọn ngôn ngữ */
.langsw a[data-lang]:not([data-lang="vi"]) { display: none; }

/* ---------- Lưu giữ cuộc đời này (nhiệm vụ mời bạn) và Album cuộc đời ---------- */
.rdkeep .rk-lead { margin: 0 0 6px; font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.rdkeep .rk-how { margin: 0 0 14px; font-size: 14px; color: var(--ink2); }
.rdkeep .kp-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; }
.rdkeep .rk-link input { width: 100%; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); color: var(--ink); font: 500 14px var(--f-mono); }
.rdkeep .rk-msg { margin: 12px 0 0; font-size: 13.5px; color: var(--ink2); min-height: 1.4em; }
.rdkeep .rk-msg.bad { color: var(--bad); }
.rdkeep .rk-free { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--rule); font-size: 12.5px; color: var(--ink3); }
.alb-wait, .alb-note { margin: 0 0 14px; font-size: 14px; color: var(--ink2); }
.alb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.alb-it { padding: 0; border: 0; background: none; border-radius: 6px; overflow: hidden; cursor: pointer; box-shadow: var(--shadow); }
.alb-it img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; }
.alb-it:hover, .alb-it:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.alb-acts { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 560px) { .alb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Các nền tối ghi cứng của bản gốc: chuyển sang tông than ấm của bảng màu Đất nung */
.ending, .memo { background: #161311; }
.end-pic { background: #211D1A; }