/* ==========================================================================
   AnYiの世界 —— shell.css
   收尾补丁：index.html 里的结构性容器类，以及 JS 生成、
   但 base/hud/panels 三份样式表未覆盖到的少量类名。
   风格与前三份保持一致：纯黑白灰阶、方角、无彩色。
   ========================================================================== */

/* ------------------------------------------------------------------ *
 * 0. 页面容器与顶栏小元素（index.html 用到，但前三份表只按 id 写了样式）
 * ------------------------------------------------------------------ */
/* .page 本身不设 display：真正的显示/隐藏由 #page-xxx.active 控制 */
.page {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* 开局选择页：作弊未开启时的灰态（开启时用 #cheat-status.active） */
#cheat-status.off {
  border-left-color: var(--c-line);
  color: var(--c-dim);
}

/* 顶栏的分隔符与小图标按钮 */
#hud-top .hud-sep {
  color: var(--c-line-strong);
  font-family: var(--font-mono);
  user-select: none;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  margin-left: auto;
  padding: .25em .8em;
  background: transparent;
  color: var(--c-paper);
  border: var(--bw-1) solid var(--c-line-strong);
  border-radius: var(--radius-0);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: .18em;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.btn-icon:hover {
  background: var(--c-paper);
  color: var(--c-ink);
  border-color: var(--c-paper);
}

/* 侧栏的作弊状态行（复用 .slot-row 的排版，只做一点强调） */
#hud-left .cheat-mark .slot-val {
  color: var(--c-paper);
  font-weight: 700;
}

/* toast / 揭示条的淡出（js 里加的是 .out） */
.toast {
  transition: opacity var(--t-slow), transform var(--t-slow);
}

.toast.out {
  opacity: 0;
  transform: translateX(12px);
}

.reveal-line {
  transition: opacity var(--t-slow);
}

.reveal-line.out {
  opacity: 0;
}

/* 衣柜 / 商店里被 js 用 inline style 控制显示的分组 */
.closet-group,
.shop-group {
  min-width: 0;
}

/* ------------------------------------------------------------------ *
 * 1. 主页面骨架
 * ------------------------------------------------------------------ */
.main-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
  /* ★ 所有文字在画面左侧（规格 §3.1） */
  width: min(1400px, 94vw);
  margin-right: auto;
  padding: clamp(18px, 4vh, 56px) clamp(24px, 5vw, 90px);
}

/* ★ 主菜单背景上压一层左侧渐深的夜幕，保证左侧文字在插画上也看得清
   （三套背景各自染一点自己环境色） */
#page-main .bg-layer::after,
#page-end .bg-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(10, 6, 18, .84) 0%,
    rgba(10, 6, 18, .64) 34%,
    rgba(10, 6, 18, .30) 58%,
    rgba(10, 6, 18, 0) 78%);
  pointer-events: none;
}

/* 林璃（白昼森林）：压一层偏绿的暗角 */
#page-main.theme-linli .bg-layer::after,
#page-end.theme-linli .bg-layer::after {
  background: linear-gradient(90deg,
    rgba(8, 20, 10, .86) 0%,
    rgba(8, 20, 10, .64) 34%,
    rgba(8, 20, 10, .28) 58%,
    rgba(8, 20, 10, 0) 78%);
}

/* 夜（月光之城）：压一层偏蓝的暗角 */
#page-main.theme-ye .bg-layer::after,
#page-end.theme-ye .bg-layer::after {
  background: linear-gradient(90deg,
    rgba(4, 6, 18, .88) 0%,
    rgba(4, 6, 18, .66) 34%,
    rgba(4, 6, 18, .30) 58%,
    rgba(4, 6, 18, 0) 78%);
}

/* ★★ 世界之外保留彩色：主菜单 / 开局页 / 结局页的插画不转黑白
      （进了游戏世界仍然是黑白的 —— 这也是设定里那句"虽然世界是黑白的"）
      想改回全黑白：把下面这段删掉即可。 */
#page-main .bg-layer,
#page-end .bg-layer,
#page-create .bg-layer,
#page-main .bg-layer img,
#page-end .bg-layer img,
#page-create .bg-layer img {
  filter: none;
}

/* ------------------------------------------------------------------ *
 * 主菜单标题：三套背景各一套样式（切换背景时同时切换标题）
 * ------------------------------------------------------------------ */

/* ① 伊莲：落日与城堡 —— 楷体 + 落日金辉光 */
.game-title {
  margin: 0;
  font-family: var(--font-fantasy);
  font-size: clamp(40px, 7vw, 104px);
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.05;
  color: #fdf7e8;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .9),
    0 0 26px var(--c-fan-glow),
    0 0 70px rgba(232, 201, 138, .22);
}

/* 标题下面一条细线（颜色跟着主题走） */
.game-title::after {
  content: "";
  display: block;
  width: min(340px, 40vw);
  height: 1px;
  margin-top: .16em;
  background: linear-gradient(90deg, var(--c-fan-gold), rgba(232, 201, 138, .12) 70%, transparent);
}

/* ② 林璃：白昼森林 —— 行楷 + 叶绿/日光 */
#page-main.theme-linli .game-title,
#page-end.theme-linli .game-title {
  font-family: var(--font-fantasy-2);
  font-size: clamp(42px, 7.4vw, 110px);
  font-weight: 400;
  letter-spacing: .12em;
  color: #f4ffe9;
  text-shadow: 0 2px 8px rgba(0, 22, 0, .9),
    0 0 28px rgba(140, 230, 130, .38),
    0 0 76px rgba(255, 244, 190, .3);
}

#page-main.theme-linli .game-title::after,
#page-end.theme-linli .game-title::after {
  background: linear-gradient(90deg, #8fe08a, rgba(143, 224, 138, .12) 70%, transparent);
}

#page-main.theme-linli .game-title::before,
#page-end.theme-linli .game-title::before {
  content: '❦';
  margin-right: .18em;
  font-size: .62em;
  vertical-align: .12em;
  color: #b6efa8;
  text-shadow: 0 0 22px rgba(140, 230, 130, .7);
}

/* ③ 夜：月光之城 —— 中宋 + 冷银蓝 */
#page-main.theme-ye .game-title,
#page-end.theme-ye .game-title {
  font-family: var(--font-fantasy-3);
  font-size: clamp(38px, 6.6vw, 98px);
  font-weight: 700;
  letter-spacing: .08em;
  color: #eef3ff;
  text-shadow: 0 2px 8px rgba(0, 0, 12, .95),
    0 0 30px rgba(150, 185, 255, .42),
    0 0 84px rgba(90, 120, 220, .34);
}

#page-main.theme-ye .game-title::after,
#page-end.theme-ye .game-title::after {
  background: linear-gradient(90deg, #a8c0ff, rgba(168, 192, 255, .12) 70%, transparent);
}

#page-main.theme-ye .game-title::before,
#page-end.theme-ye .game-title::before {
  content: '☾';
  margin-right: .18em;
  font-size: .68em;
  vertical-align: .1em;
  color: #cddaff;
  text-shadow: 0 0 24px rgba(150, 185, 255, .8);
}

/* 伊莲那套的标题点缀 */
#page-main.theme-yilian .game-title::before,
#page-end.theme-yilian .game-title::before {
  content: '❖';
  margin-right: .18em;
  font-size: .58em;
  vertical-align: .14em;
  color: var(--c-fan-gold);
  text-shadow: 0 0 22px var(--c-fan-glow);
}

.main-menu {
  align-items: flex-start;
}

.main-foot {
  margin-top: var(--sp-2);
  font-family: var(--font-fantasy);
  color: var(--c-fan-gold);
  font-size: var(--fs-sm);
  letter-spacing: .3em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .95), 0 0 14px rgba(0, 0, 0, .9);
}

/* ------------------------------------------------------------------ *
 * 2. 开局选择页
 * ------------------------------------------------------------------ */
.create-title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: .3em;
  color: var(--c-paper);
}

.create-form legend {
  padding: 0 0 var(--sp-1);
  color: var(--c-dim-2);
  font-size: var(--fs-xs);
  letter-spacing: .3em;
}

.talent-desc {
  display: block;
  margin: var(--sp-2) 0;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-shade-45);
  border-left: var(--bw-3) solid var(--c-line-strong);
  color: var(--c-dim-3);
  font-size: var(--fs-xs);
  line-height: 1.7;
}

.create-preview {
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-panel-2);
  border: var(--bw-1) solid var(--c-line);
  color: var(--c-dim-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.8;
}

.create-note {
  padding: var(--sp-2) var(--sp-3);
  border-top: var(--bw-1) solid var(--c-line);
  border-bottom: var(--bw-1) solid var(--c-line);
  color: var(--c-dim);
  font-size: var(--fs-xs);
  line-height: 1.8;
}

/* 天赋列表：一行一个，方便看 */
.talent-list {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}

.talent-list label {
  display: flex;
  align-items: center;
  gap: .5em;
  cursor: pointer;
}

.talent-list label.disabled {
  cursor: not-allowed;
  opacity: .4;
}

/* ------------------------------------------------------------------ *
 * 3. 启动错误提示（正常情况永远不显示）
 * ------------------------------------------------------------------ */
#boot-error {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 999;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-paper);
  border-top: var(--bw-3) solid var(--c-ink);
  color: var(--c-ink);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  white-space: pre-wrap;
}

/* ------------------------------------------------------------------ *
 * 4. 审视 / 衣柜 / 商店 的少量补丁
 *     （结构容器类由 JS 生成，前三份表未定义）
 * ------------------------------------------------------------------ */
.inspect-looks {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-paper);
  color: var(--c-ink);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: .2em;
}

.tag-delta {
  margin-left: auto;
  padding-left: var(--sp-3);
  color: var(--c-dim);
  font-family: var(--font-mono);
}

.tag-row {
  display: flex;
  align-items: center;
}

/* 审视 / 衣柜里的中性标签 */
.tag-row.male .tag-delta,
.tag-row.female .tag-delta {
  color: var(--c-paper);
}

.buff-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-1) 0;
}

/* ------------------------------------------------------------------ *
 * 5. 天赋2 浮层内部补丁
 * ------------------------------------------------------------------ */
.talent-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: var(--bw-1) solid var(--c-line);
  color: var(--c-dim-2);
  font-size: var(--fs-xs);
  letter-spacing: .18em;
}

/* ------------------------------------------------------------------ *
 * 5.5 设置面板里的数字输入（无名 NPC 属性范围）
 * ------------------------------------------------------------------ */
.opt-num {
  width: 5.5em;
  min-height: 1.9em;
  padding: .1em .4em;
  text-align: center;
  font-family: var(--font-mono);
}

/* 面板里的浅色说明文字（js 生成的 .panel-hint） */
.panel-hint {
  display: block;
  margin: var(--sp-1) 0 var(--sp-2);
  color: var(--c-dim);
  font-size: var(--fs-xs);
  line-height: 1.7;
}

/* 设置面板里的两个音频控件（由 js 注入到 .kv 行里） */
#opt-bgm {
  width: 12em;
  accent-color: #fff;
}

#opt-mute {
  width: 1.2em;
  height: 1.2em;
  accent-color: #fff;
}

/* ------------------------------------------------------------------ *
 * 6. 战斗界面补丁
 * ------------------------------------------------------------------ */
.enemy-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.enemy-img {
  width: 100%;
  height: 100%;
  max-height: 34vh;
  object-fit: contain;
  filter: grayscale(1) contrast(1.08);
}

.battle-player {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: clamp(150px, 15vw, 220px);
}

/* 层级：战斗层 < 弹窗层 < 天赋浮层 < toast */
#battle-root {
  z-index: 60;
}

#overlay-root {
  z-index: 70;
}

#talent-overlay {
  z-index: 80;
}

/* ------------------------------------------------------------------ *
 * 7. 结束页骨架（hud.css 里已有 #page-end .end-title/.end-text）
 * ------------------------------------------------------------------ */
.end-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  padding: clamp(24px, 6vh, 70px) clamp(28px, 6vw, 100px);
  background: var(--c-shade-72);
  border: var(--bw-2) solid var(--c-paper);
  text-align: center;
}

/* ==================================================================== *
 * 8. ★ 手机适配
 *    放在最后一份样式表的最后 —— 同优先级下只有写在后面才盖得住
 *    前面 base/hud/panels 三份表里的规则。
 * ==================================================================== */

/* ---- 8.1 竖屏提示：触摸设备竖着拿的时候盖住整个画面 ---- */
.rotate-hint {
  display: none;
}

.rotate-icon {
  font-size: clamp(48px, 13vw, 92px);
  line-height: 1;
  color: var(--c-paper);
  animation: rotate-tip 2.6s ease-in-out infinite;
}

@keyframes rotate-tip {
  0%, 35% {
    transform: rotate(0deg);
  }

  65%, 100% {
    transform: rotate(-90deg);
  }
}

.rotate-text {
  font-size: var(--fs-lg);
  letter-spacing: .3em;
}

.rotate-sub {
  color: var(--c-dim-2);
  font-size: var(--fs-sm);
  letter-spacing: .2em;
}

@media (orientation: portrait) and (max-width: 1000px) and (hover: none) {
  .rotate-hint {
    position: fixed;
    inset: 0;
    z-index: var(--z-rotate);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    padding: var(--sp-6);
    background: var(--c-ink);
    color: var(--c-paper);
    text-align: center;
  }
}

/* ---- 8.2 小屏紧凑：左侧状态栏和小地图收窄，地方让给场景 ----
   横屏手机大约 844×390（CSS 像素），1280×720 的桌面不受影响 */
@media (max-width: 1000px) {
  :root {
    --hud-left-w: clamp(158px, 24vw, 220px);
    --map-gutter: clamp(16px, 2vh, 24px);
    --map-toggle-h: clamp(52px, 7vh, 76px);
  }

  #map-mini {
    width: clamp(150px, 22vw, 208px);
    height: clamp(158px, 25vh, 228px);
  }

  /* 手指比鼠标粗：选项行加高一点，更好点 */
  .opt {
    padding-top: .62em;
    padding-bottom: .62em;
  }

  /* 顶栏两个按钮收一点，别把时间/天气挤掉 */
  #btn-fullscreen,
  #btn-settings {
    padding: .28em .7em;
    letter-spacing: .14em;
  }

  /* 状态栏字号略收，保证一屏能看到更多行 */
  #hud-left {
    font-size: var(--fs-sm);
  }
}