/* ============================================================
   小王子世界 · 像素地图探索
   零外链依赖样式表（不引入任何 CDN，保证 file:// 直接打开可用）
   ============================================================ */

:root {
  /* 深空夜色 */
  --bg-deep:      #0B1026;
  --bg-mid:       #151B3B;
  --bg-violet:    #1E1440;
  --paper:        #F5EFE0;
  --paper-dim:    #D9D0BA;
  --ink:          #2B2A3D;

  /* 点缀色 */
  --star-gold:    #F2C14E;
  --amber:        #E0943C;
  --rose:         #D94F6A;
  --grass:        #6F9E4B;
  --sky-blue:     #7EC8E3;

  /* 功能色 */
  --ok:           #6FBF73;
  --warn:         #F0AD4E;

  --text:         #F5EFE0;
  --text-dim:     #B9B2A0;

  --font-pixel: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas,
                "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", monospace;

  --border: 2px;
  --shadow: 3px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--font-pixel);
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.06em;
  -webkit-font-smoothing: none;
  overflow: hidden;
  overscroll-behavior: none;
}

body { display: flex; align-items: center; justify-content: center; }

/* 触屏：去掉点按灰色高亮与文字误选 */
button, .pix-btn, .dpad-key {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
/* manipulation 只禁掉「双击缩放」，页面本身仍可缩放，比全局 user-scalable=no 更稳妥。
   摇杆区域另有更严格的 touch-action: none，取交集后仍是 none，不受影响。 */
.pix-btn, .dpad-key { touch-action: manipulation; }

/* ---------- 背景星空 ---------- */
.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 8%, rgba(110, 90, 200, 0.28), transparent 70%),
    radial-gradient(ellipse 60% 50% at 12% 88%, rgba(217, 79, 106, 0.14), transparent 70%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-violet) 55%, var(--bg-mid) 100%);
}
.sky i {
  position: absolute;
  width: 2px; height: 2px;
  background: var(--paper);
  animation: twinkle 3.6s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.18; }
  50%      { opacity: 0.95; }
}

/* ---------- 舞台 ---------- */
.app {
  position: relative;
  z-index: 1;
  width: 100%;
  /* 不再限制最大宽度：放大到整数倍后舞台可能比 1120 宽，
     卡住它会导致算好的尺寸被 flex-shrink 压回去。
     舞台自身的兜底尺寸（min(...)）已经保证不会超出视口。 */
  padding: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stage {
  position: relative;
  /* 舞台是 flex 子项，默认会被 flex-shrink 压缩，那样脚本算好的整数倍尺寸就白算了 */
  flex-shrink: 0;
  /* 作为容器查询的参照：内部布局按「舞台实际高度」而非视口宽度来适配，
     这样手机竖屏这种又窄又矮的舞台才不会把标题界面裁掉 */
  container-type: size;
  /* 兜底尺寸：脚本没跑、或整数档太亏时按视口自适应。
     以「高度不超过视口」为约束反推宽度，避免 aspect-ratio 被 max-height 破坏 */
  width: min(1084px, calc(100vw - 36px), calc((100vh - 36px) * 5 / 3));
  /* dvh 用动态视口高度，iOS Safari 地址栏收放时不会算错（不支持的浏览器忽略这行） */
  width: min(1084px, calc(100vw - 36px), calc((100dvh - 36px) * 5 / 3));
  aspect-ratio: 5 / 3;
  border: var(--border) solid #05070F;
  box-shadow:
    inset 0 0 0 2px rgba(242, 193, 78, 0.22),
    0 0 0 2px #05070F,
    0 14px 40px rgba(0, 0, 0, 0.6);
  background: #05070F;
  overflow: hidden;
}

/* 脚本按设备像素比算出了整数倍尺寸时接管宽高（选择器权重高于上面的兜底与各媒体查询）。
   此时每个逻辑像素正好落在 N×N 个设备像素上，边缘绝对干净。 */
.stage.pixel-snapped {
  width: var(--stage-w);
  height: var(--stage-h);
  aspect-ratio: auto;
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

/* ============================================================
   HUD
   ============================================================ */
.hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 8px;
  background: linear-gradient(180deg, rgba(6, 8, 20, 0.92), rgba(6, 8, 20, 0.5) 70%, transparent);
  font-size: 11px;
  pointer-events: none;
  z-index: 5;
}
.hud > * { pointer-events: auto; }

.hud-zone { display: flex; align-items: center; gap: 5px; min-width: 0; }
.zone-glyph { color: var(--star-gold); font-size: 12px; }
.zone-name {
  color: var(--paper);
  text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hud-quest { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pips { display: flex; gap: 3px; }
.pip {
  width: 7px; height: 7px;
  background: rgba(245, 239, 224, 0.16);
  border: 1px solid rgba(245, 239, 224, 0.4);
}
.pip.on {
  background: var(--star-gold);
  border-color: var(--star-gold);
  box-shadow: 0 0 6px rgba(242, 193, 78, 0.85);
}
.quest-hint {
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 34vw;
}

.hud-actions { display: flex; gap: 5px; }

/* ---------- 像素按钮 ---------- */
.pix-btn {
  font-family: var(--font-pixel);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: var(--star-gold);
  border: var(--border) solid #05070F;
  box-shadow: var(--shadow) var(--shadow) 0 #05070F;
  padding: 7px 16px;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
  image-rendering: pixelated;
}
a.pix-btn { display: inline-block; }
.pix-btn:hover {
  transform: translate(-1px, -2px);
  box-shadow: 4px 5px 0 #05070F;
  background: #FFD670;
}
.pix-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #05070F;
}
.pix-btn:focus-visible { outline: 2px dashed var(--paper); outline-offset: 3px; }

.pix-btn.tiny { font-size: 10px; padding: 3px 8px; box-shadow: 2px 2px 0 #05070F; }
.pix-btn.wide { display: block; width: 100%; text-align: center; font-size: 14px; padding: 11px 18px; }
.pix-btn.ghost { background: transparent; color: var(--paper); border-color: rgba(245, 239, 224, 0.55); }
.pix-btn.ghost:hover { background: rgba(245, 239, 224, 0.12); }
.pix-btn.round { width: 54px; height: 54px; border-radius: 0; font-size: 16px; padding: 0; }
.pix-btn[disabled] { opacity: 0.34; cursor: not-allowed; background: rgba(245, 239, 224, 0.15); color: var(--text-dim); box-shadow: 2px 2px 0 #05070F; }
.pix-btn[disabled]:hover { transform: none; box-shadow: 2px 2px 0 #05070F; }

/* ---------- 区域名牌 ---------- */
.zone-banner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(5, 7, 15, 0.82);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
  z-index: 8;
}
.zone-banner.on { opacity: 1; }
.zb-index { font-size: 10px; color: var(--star-gold); letter-spacing: 0.4em; }
.zb-name {
  font-size: 26px;
  font-weight: 700;
  color: var(--paper);
  text-shadow: 2px 2px 0 #05070F;
}
.zb-sub { font-size: 11px; color: var(--text-dim); }

/* ---------- 底部提示 ---------- */
.hint-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  font-size: 10px;
  color: var(--text-dim);
  background: linear-gradient(0deg, rgba(6, 8, 20, 0.9), transparent);
  pointer-events: none;
  z-index: 5;
}
.hint-keys { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
kbd {
  display: inline-block;
  font-family: inherit;
  font-size: 9px;
  padding: 0 3px;
  margin: 0 1px;
  color: var(--paper);
  background: rgba(245, 239, 224, 0.12);
  border: 1px solid rgba(245, 239, 224, 0.32);
}

/* ---------- 触屏控制 ----------
   按键尺寸收敛到 --key，小屏只改这一个变量就能整体缩一号 */
.touch {
  --key: 34px;
  --gap: 2px;
  position: absolute;
  inset: auto 0 12px 0;
  display: none;
  justify-content: space-between;
  align-items: flex-end;
  /* 适配带刘海 / 手势条的机型，别让按键压在系统手势区上 */
  padding:
    0 calc(12px + env(safe-area-inset-right, 0px))
    calc(12px + env(safe-area-inset-bottom, 0px))
    calc(12px + env(safe-area-inset-left, 0px));
  z-index: 6;
  touch-action: none;
}
.touch.on { display: flex; }

.dpad {
  position: relative;
  width: calc(var(--key) * 3 + var(--gap) * 2);
  height: calc(var(--key) * 3 + var(--gap) * 2);
  touch-action: none;
}
.dpad-key {
  position: absolute;
  width: var(--key);
  height: var(--key);
  padding: 0;
  background: rgba(245, 239, 224, 0.14);
  border: 2px solid rgba(245, 239, 224, 0.42);
  cursor: pointer;
}
.dpad-key.up    { left: calc(var(--key) + var(--gap)); top: 0; }
.dpad-key.left  { left: 0; top: calc(var(--key) + var(--gap)); }
.dpad-key.right { left: calc((var(--key) + var(--gap)) * 2); top: calc(var(--key) + var(--gap)); }
.dpad-key.down  { left: calc(var(--key) + var(--gap)); top: calc((var(--key) + var(--gap)) * 2); }

/* 方向箭头：纯 CSS 三角，省掉图标资源 */
.dpad-key::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  transform: translate(-50%, -50%);
}
.dpad-key.up::before {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid rgba(245, 239, 224, 0.85);
}
.dpad-key.down::before {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid rgba(245, 239, 224, 0.85);
}
.dpad-key.left::before {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 6px solid rgba(245, 239, 224, 0.85);
}
.dpad-key.right::before {
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid rgba(245, 239, 224, 0.85);
}

/* :active 在触屏上不一定可靠，所以 JS 还会挂 .pressed */
.dpad-key:active,
.dpad-key.pressed {
  background: rgba(242, 193, 78, 0.6);
  border-color: rgba(242, 193, 78, 0.9);
}

.dpad-core {
  position: absolute;
  left: calc(var(--key) + var(--gap) + 6px);
  top: calc(var(--key) + var(--gap) + 6px);
  width: calc(var(--key) - 12px);
  height: calc(var(--key) - 12px);
  background: rgba(245, 239, 224, 0.08);
}

/* 交互键做成半透明：它是浮在地图上的，不透明的大金块会挡住右下角的地形 */
.touch .pix-btn.round {
  background: rgba(242, 193, 78, 0.3);
  color: rgba(245, 239, 224, 0.92);
  border-color: rgba(242, 193, 78, 0.72);
  box-shadow: 2px 2px 0 rgba(5, 7, 15, 0.5);
  text-shadow: 0 1px 0 rgba(5, 7, 15, 0.75);
}
.touch .pix-btn.round:hover { background: rgba(242, 193, 78, 0.44); }
/* 按下去时加浓，给触屏一个明确的反馈 */
.touch .pix-btn.round.pressed,
.touch .pix-btn.round:active {
  background: rgba(242, 193, 78, 0.66);
  border-color: rgba(242, 193, 78, 0.95);
}

/* 触屏时的操作提示，夹在摇杆与 A 键之间，几秒后自动淡出 */
.touch-tip {
  align-self: center;
  margin-bottom: 8px;
  padding: 4px 9px;
  font-size: 10px;
  line-height: 1.6;
  color: var(--paper);
  /* 压在花花绿绿的地图上，给个深色底才读得清 */
  background: rgba(5, 7, 15, 0.76);
  border: 1px solid rgba(245, 239, 224, 0.28);
  white-space: nowrap;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
.touch-tip.gone { opacity: 0; }

/* 触屏下键盘提示没有意义，直接让位给屏幕按键 */
.stage.touch-on .hint-bar { display: none; }

/* ============================================================
   覆盖层通用
   ============================================================ */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
  background: rgba(5, 7, 15, 0.9);
  backdrop-filter: blur(2px);
}
.overlay.is-open { display: flex; }
.overlay.is-open { animation: fadeIn 0.3s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 菜单类界面打开时隐藏游戏内的 HUD 与提示，避免透出来显脏 */
.stage.menu-open .hud,
.stage.menu-open .hint-bar,
.stage.menu-open .touch,
.stage.menu-open .zone-banner { display: none; }

/* ---------- 书架入口 ---------- */
.shelf-screen {
  z-index: 25;
  gap: 8px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 70%, rgba(90, 58, 36, 0.35), transparent 65%),
    linear-gradient(180deg, rgba(11, 16, 38, 0.96) 0%, rgba(30, 20, 40, 0.98) 100%);
}
/* 书架独立页：舞台只承载书架，去掉游戏画布占位感 */
.stage.shelf-only {
  background:
    radial-gradient(ellipse 70% 50% at 50% 70%, rgba(90, 58, 36, 0.2), transparent 65%),
    #0B1026;
}
.stage.shelf-only .shelf-screen {
  position: absolute;
  inset: 0;
}
a.book {
  text-decoration: none;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
}
.shelf-eyebrow {
  font-size: 10px;
  letter-spacing: 0.35em;
  color: var(--amber);
  text-transform: uppercase;
}
.shelf-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--paper);
  text-shadow: 2px 2px 0 #05070F;
}
.shelf-hint {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.bookshelf {
  width: min(560px, 96%);
  margin-top: 4px;
}
.shelf-plank {
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
  gap: 10px;
  min-height: 168px;
  padding: 18px 22px 0;
  background:
    linear-gradient(180deg, #3E2A1C 0%, #5A3A28 40%, #2A1A12 100%);
  border: 2px solid #05070F;
  box-shadow:
    inset 0 2px 0 rgba(234, 212, 170, 0.12),
    inset 0 -10px 0 rgba(0, 0, 0, 0.28);
}
.shelf-ledge {
  height: 12px;
  margin-top: -2px;
  background: linear-gradient(180deg, #6B4A32, #3A2618);
  border: 2px solid #05070F;
  border-top: none;
  box-shadow: 0 4px 0 #05070F;
}
.book {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 172px; /* 所有书统一高度 */
  padding: 10px 0;
  border: 2px solid #05070F;
  border-radius: 1px 3px 3px 1px;
  cursor: default;
  font: inherit;
  color: inherit;
  writing-mode: horizontal-tb;
  box-shadow: inset -3px 0 0 rgba(0, 0, 0, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
/* 只保留书脊宽窄的差别，高度一律与 .book 相同 */
.book.tall { width: 48px; }
.book.short { width: 56px; }
.book.wide { width: 60px; }
/* 书名 + 作者同一竖列：必须 inline，block 会在 vertical-rl 下折成多列 */
.book-spine {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.12em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  max-height: 100%;
}
.book-name,
.book-author {
  display: inline;
}
.book-name {
  font-size: 15px;
  font-weight: 700;
}
.book-author {
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.06em;
  opacity: 0.8;
}
/* 书名与作者之间留一小段空隙（竖排 inline 间距） */
.book-author::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 10px;
  vertical-align: middle;
}
.book.is-muted {
  background: linear-gradient(90deg, #3A3A48, #2A2A36 55%, #22222C);
  color: #6B6455;
  filter: saturate(0.35) brightness(0.72);
  opacity: 0.72;
}
.book.is-muted .book-spine { color: #8A8272; }
.book.is-muted .book-author { color: #6B6455; }
.book.is-prince {
  width: 64px;
  height: 172px;
  cursor: pointer;
  background:
    linear-gradient(90deg, #2F6B3A 0%, #4E9A4A 35%, #63C74D 55%, #3E8948 100%);
  color: #FEE761;
  box-shadow:
    inset -4px 0 0 rgba(0, 0, 0, 0.25),
    inset 3px 0 0 rgba(254, 231, 97, 0.35),
    0 0 18px rgba(242, 193, 78, 0.55);
  animation: bookPulse 2.4s ease-in-out infinite;
}
.book.is-prince .book-name {
  font-size: 18px;
  color: #FEE761;
  text-shadow: 1px 1px 0 #05070F;
}
.book.is-prince .book-author {
  font-size: 9px;
  color: #F5EFE0;
  text-shadow: 1px 1px 0 #05070F;
}
.book.is-prince:hover,
.book.is-prince:focus-visible {
  transform: translateY(-10px) scale(1.04);
  outline: none;
  box-shadow:
    inset -4px 0 0 rgba(0, 0, 0, 0.25),
    0 0 28px rgba(242, 193, 78, 0.85);
}
.book.is-prince:active { transform: translateY(-4px) scale(1.02); }
.book-glow {
  position: absolute;
  inset: -6px;
  border: 1px dashed rgba(242, 193, 78, 0.55);
  pointer-events: none;
  opacity: 0.7;
}
@keyframes bookPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}
.shelf-foot {
  margin-top: 12px;
  font-size: 10px;
  color: rgba(185, 178, 160, 0.7);
  letter-spacing: 0.12em;
}

@container (max-height: 380px) {
  /* 装不下时（字体更宽的机型）退化成顶部对齐 + 可滚动，绝不把文字裁掉 */
  .shelf-screen { gap: 3px; padding: 4px; justify-content: safe center; overflow-y: auto; }
  /* 矮舞台上竖向空间极紧：先砍装饰行，把高度让给书脊上的作者名 */
  .shelf-eyebrow { display: none; }
  .shelf-title { font-size: 15px; }
  .shelf-hint { font-size: 9px; margin-bottom: 0; }
  .bookshelf { width: min(520px, 96%); margin-top: 0; }
  .shelf-plank { min-height: 120px; padding: 4px 12px 0; gap: 6px; }
  .shelf-ledge { height: 9px; }
  /* 书比原来高 32px：书脊放得下更长的作者名（如「圣埃克苏佩里」） */
  .book { height: 150px; width: 36px; }
  .book.tall { width: 34px; }
  .book.short { width: 40px; }
  .book.wide { width: 42px; }
  .book.is-prince { height: 150px; width: 46px; }
  .book-name { font-size: 11px; }
  .book-author { font-size: 7px; }
  .book-author::before { height: 6px; }
  .book.is-prince .book-name { font-size: 13px; }
  .book.is-prince .book-author { font-size: 7px; }
  /* 舞台太矮：装饰行（书房一角 / 底部小字）全部让位给书脊 */
  .shelf-foot { display: none; }
}

/* 极矮舞台（320×568 这类小屏竖屏，舞台只有 190px 高）：
   连提示行都放不下，再缩小标题与书 */
@container (max-height: 208px) {
  .shelf-screen { gap: 2px; padding: 5px; }
  .shelf-title { font-size: 14px; }
  .shelf-hint { display: none; }
  .bookshelf { width: min(430px, 98%); }
  .shelf-plank { min-height: 100px; padding: 5px 10px 0; }
  .shelf-ledge { height: 9px; }
  .book { height: 132px; width: 32px; }
  .book.tall { width: 30px; }
  .book.short { width: 36px; }
  .book.wide { width: 38px; }
  .book.is-prince { height: 132px; width: 42px; }
  .book-author { font-size: 6px; }
  .book-author::before { height: 5px; }
  .book.is-prince .book-name { font-size: 12px; }
  .book.is-prince .book-author { font-size: 6px; }
}

/* ---------- 标题 ---------- */
.title-screen {
  background:
    radial-gradient(ellipse 60% 40% at 50% 26%, rgba(242, 193, 78, 0.16), transparent 70%),
    rgba(5, 7, 15, 0.94);
  justify-content: center;
  gap: 6px;
}
.title-planet {
  position: relative;
  width: 74px; height: 74px;
  margin-bottom: 2px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #4A3A78, #241A46 70%);
  box-shadow: inset -8px -8px 0 rgba(0, 0, 0, 0.35), 0 0 26px rgba(120, 90, 220, 0.45);
}
.planet-orbit {
  position: absolute;
  inset: -12px;
  border: 2px dashed rgba(242, 193, 78, 0.45);
  border-radius: 50%;
  animation: spin 22s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.game-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--star-gold);
  text-shadow: 2px 2px 0 #05070F, 0 0 18px rgba(242, 193, 78, 0.5);
}
.game-sub { font-size: 11px; color: var(--sky-blue); letter-spacing: 0.24em; }
.game-quote { font-size: 11px; color: var(--text-dim); margin: 4px 0 12px; }

.menu { display: flex; flex-direction: column; gap: 8px; width: 232px; }

.howto {
  margin-top: 10px;
  width: min(430px, 90%);
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  color: var(--text-dim);
  background: rgba(245, 239, 224, 0.05);
  border: 1px dashed rgba(245, 239, 224, 0.3);
}
.howto b { color: var(--star-gold); font-weight: 400; }
/* 「知道了」只在矮屏浮层里需要——桌面端点标题页的按钮就能收起 */
.howto-close { display: none; margin-top: 12px; }
@container (max-height: 380px) {
  .howto-close { display: inline-block; }
}

.credit { position: absolute; bottom: 12px; font-size: 9px; color: rgba(185, 178, 160, 0.6); }

/* 舞台矮（手机竖屏）时标题界面会溢出被裁，按舞台高度精简内容 */
@container (max-height: 380px) {
  .title-screen {
    gap: 4px;
    padding: 12px 10px;
    /* safe center：装得下就居中，装不下就退化成顶部对齐并可滚动 */
    justify-content: center;
    justify-content: safe center;
    overflow-y: auto;
  }
  .title-planet,   /* 星球、题词、版权行是氛围件，先让位给按钮 */
  .game-quote,
  .credit { display: none; }
  .game-title { font-size: 22px; letter-spacing: 0.14em; }
  .game-sub { font-size: 10px; letter-spacing: 0.18em; }
  .menu { width: min(212px, 74%); gap: 6px; }
  .menu .pix-btn.wide { font-size: 12px; padding: 8px 14px; box-shadow: 2px 2px 0 #05070F; }
  .howto { margin-top: 6px; padding: 8px 10px; font-size: 10px; }
  /* 不让弹性布局把内容压扁——压扁会让「操作说明」只剩一行 */
  .title-screen > * { flex-shrink: 0; }

  /* 矮屏上「操作说明」改成整屏浮层：正面写不下，浮层里可以自己滚 */
  .howto:not([hidden]) {
    position: absolute;
    inset: 0;
    margin: 0;
    width: auto;
    padding: 16px 14px;
    overflow-y: auto;
    background: #080b1a;   /* 不透明，免得后面的按钮透出来 */
    border: 0;
    z-index: 5;
  }
  .title-screen:has(.howto:not([hidden])) { overflow: hidden; }
}

@container (max-height: 268px) {
  .game-sub { display: none; }
}

/* ---------- 手记 ---------- */
.journal-screen { background: rgba(5, 7, 15, 0.94); }
.scroll-panel {
  width: min(560px, 96%);
  max-height: 100%;
  overflow-y: auto;
  padding: 14px 16px;
  text-align: left;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid #05070F;
  box-shadow: 6px 6px 0 #05070F;
}
.scroll-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 2px dashed rgba(43, 42, 61, 0.3);
}
.scroll-head h2 { font-size: 17px; letter-spacing: 0.14em; }

.scroll-block { margin-bottom: 12px; }
.scroll-block h3 {
  font-size: 11px;
  color: #7A7264;
  letter-spacing: 0.2em;
  margin-bottom: 6px;
  padding-left: 8px;
  border-left: 3px solid var(--rose);
}

.face-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.face-cell {
  width: 58px;
  padding: 5px 2px 3px;
  text-align: center;
  font-size: 9px;
  color: #5C5648;
  border: 2px solid #C9BFA8;
  background: #FFFDF6;
}
.face-cell canvas {
  display: block;
  width: 100%;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}
.face-cell.locked { border-style: dashed; color: #B3AB98; background: transparent; }
.face-cell.locked span { display: block; color: #B3AB98; }
.face-cell.locked canvas { filter: grayscale(1) brightness(0.35); opacity: 0.5; }

.route-line { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.route-node {
  font-size: 9px;
  padding: 3px 7px;
  color: #8A8272;
  border: 2px solid #C9BFA8;
  background: #FFFDF6;
}
.route-node.on { color: var(--ink); border-color: var(--star-gold); background: #FDF0CE; }
.route-node.on::before { content: "✦ "; color: var(--amber); }
.route-arrow { color: #C9BFA8; font-size: 10px; }

.deed-list { list-style: none; font-size: 11px; }
.deed-list li { padding: 2px 0 2px 16px; position: relative; color: #6B6455; }
.deed-list li::before { content: "□"; position: absolute; left: 0; color: #B3AB98; }
.deed-list li.done { color: var(--ink); }
.deed-list li.done::before { content: "■"; color: var(--amber); }

.scroll-foot {
  margin-top: 6px;
  padding-top: 8px;
  font-size: 10px;
  color: #7A7264;
  border-top: 2px dashed rgba(43, 42, 61, 0.3);
}

/* ---------- 暂停 ---------- */
.pause-card {
  width: min(340px, 92%);
  padding: 20px 18px;
  background: rgba(21, 27, 59, 0.92);
  border: 3px solid #05070F;
  box-shadow: 6px 6px 0 #05070F;
}
.pause-card h2 { font-size: 18px; color: var(--star-gold); letter-spacing: 0.2em; margin-bottom: 8px; }
.pause-card p { font-size: 11px; color: var(--text-dim); margin-bottom: 14px; }
.pause-actions { display: flex; flex-direction: column; gap: 8px; }

/* ---------- 结局 ---------- */
.ending-screen {
  background: #05070F;
  justify-content: flex-start;
  padding-top: 34px;
}
.ending-sky { position: absolute; inset: 0; pointer-events: none; }
.ending-sky i { position: absolute; width: 2px; height: 2px; background: var(--star-gold); animation: twinkle 3s ease-in-out infinite; }
.ending-art { position: relative; font-size: 30px; letter-spacing: 6px; margin-bottom: 4px; }
.ending-art canvas { vertical-align: bottom; }
.ending-text {
  position: relative;
  min-height: 92px;
  max-width: 560px;
  font-size: 12px;
  line-height: 2;
  color: var(--paper);
  white-space: pre-wrap;
}
.ending-text .final { display: block; margin-top: 8px; color: var(--star-gold); font-size: 13px; }
#btnAgain { position: relative; width: 208px; margin-top: 10px; }

/* ---------- Toast ---------- */
.toast {
  position: absolute;
  left: 50%;
  top: 42px;
  transform: translate(-50%, -14px);
  padding: 7px 16px;
  font-size: 11px;
  color: var(--ink);
  background: var(--star-gold);
  border: 2px solid #05070F;
  box-shadow: 3px 3px 0 #05070F;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 12;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 768px) {
  :root { font-size: 12px; }
  .app { padding: 0; }
  .stage {
    /* 手机上去掉两侧留白，铺满可用宽度 */
    width: min(calc(100vw - 4px), calc((100vh - 8px) * 5 / 3));
    width: min(calc(100vw - 4px), calc((100dvh - 8px) * 5 / 3));
    border-left: 0;
    border-right: 0;
  }
  /* 小屏把摇杆缩一号，别糊住半个地图 */
  .touch { --key: 28px; --gap: 2px; }
  .hud { height: 22px; font-size: 10px; }
  .hud-actions .pix-btn.tiny { font-size: 9px; padding: 2px 6px; }
  .quest-hint { max-width: 24vw; }
  .hint-bar { font-size: 9px; padding: 4px 8px; }
  .touch.on { display: flex; }
  .game-title { font-size: 24px; }
  .zb-name { font-size: 20px; }
  .credit { display: none; }
  .scroll-panel { padding: 10px 12px; }
}

@media (max-width: 480px) {
  .game-quote, .game-sub { display: none; }
}

/* 手机横屏：这是最能出效果的一档。
   舞台高度直接顶满视口（横屏时纵向空间最稀缺），宽度按 5:3 自动算出来，
   这样竖屏 386×232 → 横屏约 646×388，画面接近翻倍。
   注意：屏幕比 5:3 更宽（手机横屏通常 2:1 以上），所以左右一定会有留白，
   除非把地图视野改宽——那会变成拉伸或看到地图外的空白，所以此处不做。 */
@media (orientation: landscape) and (max-height: 520px) {
  .app { padding: 0; }
  .stage {
    width: min(calc(100vw - 2px), calc((100vh - 2px) * 5 / 3));
    width: min(calc(100vw - 2px), calc((100dvh - 2px) * 5 / 3));
    border-left: 0;
    border-right: 0;
  }
  .hud { height: 20px; }
  .hint-bar { font-size: 9px; padding: 3px 8px; }
  /* 横向空间宽裕，摇杆可以再小一点，少挡地图 */
  .touch { --key: 30px; bottom: 10px; }
}

/* 竖屏手机：画面受 5:3 比例限制只能占窄窄一条，提示横过来拿 */
.rotate-hint {
  display: none;
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  transition: opacity 1.2s ease;
}
.rotate-hint.gone { opacity: 0; }
@media (orientation: portrait) and (max-width: 820px) {
  .rotate-hint { display: block; }
  .app { flex-direction: column; }
}

/* ---------- 微信假横屏 ----------
   微信内置浏览器（iOS 上尤其）锁死竖屏，手机怎么转页面都不动。
   js/wx-landscape.js 在微信里给 <html> 加上 .wx-landscape，这里把舞台
   整体转 90°：尺寸按「横屏」算（视口宽高对调），再旋转，于是画面接近
   真横屏（竖屏 386×232 → 这里约 640×384）。
   旋转只影响绘制，不影响布局与命中测试，摇杆按钮照旧可点。 */
@media (orientation: portrait) {
  html.wx-landscape :where(.stage) {
    /* 用 :where() 把选择器权重压到 0，免得盖掉 .stage.pixel-snapped
       （脚本按设备像素比算出的整数倍尺寸优先级更高） */
    width: min(calc(100vh - 2px), calc((100vw - 2px) * 5 / 3));
    width: min(calc(100dvh - 2px), calc((100dvw - 2px) * 5 / 3));
    transform: rotate(90deg);
    /* 手机上（max-width: 768px）舞台的左右边框被去掉了，但那两条边旋转后
       正好是横屏画面的左右两条竖边，补回来才和真横屏一致 */
    border-left: var(--border) solid #05070F;
    border-right: var(--border) solid #05070F;
  }
  /* 此时手机还竖着拿，「横过来」这句就是唯一的说明：别让舞台把它挤歪，
     也别让它挡住旋转后画面上的按键，于是贴屏幕底部浮着、不响应点击 */
  html.wx-landscape :where(.rotate-hint) {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    z-index: 30;
    margin: 0;
    padding: 4px 8px;
    font-size: 10px;
    text-align: center;
    background: rgba(5, 7, 15, 0.72);
    pointer-events: none;
  }
}

/* 虚拟摇杆只在真正发生触摸后才由脚本加上 .on，不做媒体查询猜测 */