/* 远野：纸张、墨绿和暖金色的统一界面。所有视觉资源均由 CSS 绘制。 */
:root {
  --ink: #172c27;
  --forest: #21473c;
  --fern: #8ab991;
  --paper: #f2f1e8;
  --cream: #fffdf3;
  --gold: #dbbd79;
  --line: rgba(236, 241, 224, .25);
}
body { color: var(--cream); font-family: "PingFang SC", "Noto Sans CJK SC", -apple-system, sans-serif; }
#vignette { background: radial-gradient(ellipse at 50% 42%, transparent 54%, rgba(10, 24, 25, .28) 100%); }
#crosshair { width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px; }
#crosshair::before, #crosshair::after { background: #fff9e6; box-shadow: 0 1px 3px #0b2423, 0 0 5px #0b2423; }
#crosshair::before { left: 8px; width: 1px; }
#crosshair::after { top: 8px; height: 1px; }

/* 首页保留实时世界作为背景，让玩家进入前先看见场景。 */
#overlay { background: linear-gradient(90deg, rgba(8, 24, 26, .80), rgba(8, 26, 27, .38) 55%, rgba(8, 24, 26, .26)); backdrop-filter: blur(1.5px); }
.panel, .invPanel, .craftPanel { box-shadow: 0 28px 90px rgba(5, 22, 23, .42); }
.panel {
  width: min(1060px, calc(100vw - 56px)); max-height: calc(100dvh - 48px);
  padding: 0; overflow-y: auto; border-radius: 22px;
  background: rgba(14, 35, 34, .90); border: 1px solid rgba(246, 243, 217, .34);
  text-align: left; backdrop-filter: blur(24px) saturate(1.1);
}
.panel::before { left: 0; right: 0; background: linear-gradient(90deg, transparent, rgba(255, 251, 224, .74), transparent); }
.panelTop, .panelFoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 36px; }
.panelTop { border-bottom: 1px solid var(--line); color: var(--paper); font-size: 11px; font-weight: 700; letter-spacing: .18em; }
.panelFoot { border-top: 1px solid var(--line); color: #afc7ba; font-size: 11px; letter-spacing: .04em; }
.panelTop .seed { color: #d4d6bb; letter-spacing: .06em; }
.markCube { display: inline-grid; place-items: center; width: 29px; height: 29px; margin-right: 7px; border-radius: 8px; background: var(--gold); color: var(--ink); font-size: 24px; font-weight: 800; line-height: 1; vertical-align: middle; }
.heroGrid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(280px, .82fr); min-height: 470px; }
.heroContent { padding: 52px 34px 40px 58px; }
.eyebrow { color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .17em; }
.logo { margin: 16px 0 0; font: 900 clamp(72px, 8vw, 112px)/1.04 "Songti SC", "Noto Serif CJK SC", serif; letter-spacing: -.08em; color: var(--paper); transform: none; -webkit-text-stroke: 0; text-shadow: 0 12px 35px rgba(0, 0, 0, .30); }
.logo.small { font-size: 64px; }
.sub { margin-top: 15px; color: #d4e5d0; font-size: 17px; font-weight: 600; letter-spacing: .16em; text-transform: none; }
.heroLead { max-width: 430px; margin-top: 28px; color: #b2c8bc; font-size: 14px; line-height: 1.9; }
#loadbox { max-width: 350px; margin-top: 25px; }
.bar { width: 100%; height: 5px; margin: 0 0 8px; border: 0; background: rgba(242, 247, 225, .15); }
#barFill { background: linear-gradient(90deg, #94b98d, #e4d99f); box-shadow: none; }
#loadText { color: #bbcebd; font-size: 11px; letter-spacing: .06em; }
.btn { border: 1px solid rgba(245, 246, 226, .55); border-radius: 11px; box-shadow: none; color: #1d382d; background: var(--paper); font: 800 15px/1.2 inherit; letter-spacing: .08em; }
.btn:hover:not(:disabled) { background: #fffdf2; color: #19382c; box-shadow: 0 0 0 3px rgba(252, 250, 224, .16); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
#primary { width: min(350px, 100%); margin-top: 18px; padding: 16px 24px; text-align: left; }
#primary:disabled { filter: none; opacity: .58; }
#metaRow { justify-content: flex-start; margin-top: 18px; gap: 8px; }
.btn.ghost { color: #dcebdd; border: 1px solid rgba(235, 243, 218, .25); background: rgba(232, 244, 220, .07); font-size: 11px; padding: 9px 12px; }
.btn.ghost:hover:not(:disabled) { color: var(--cream); background: rgba(232, 244, 220, .16); box-shadow: none; }
.heroAside { position: relative; overflow: hidden; padding: 34px 36px; border-left: 1px solid rgba(247, 245, 220, .20); background: radial-gradient(circle at 61% 48%, rgba(107, 145, 115, .28), transparent 53%), linear-gradient(156deg, rgba(31, 70, 57, .53), rgba(18, 46, 44, .72)); }
.asideLabel { color: #e2e6ce; font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.asideMap { position: relative; height: 228px; margin: 20px 0 8px; border: 1px solid rgba(241, 235, 192, .27); border-radius: 18px; background: repeating-linear-gradient(0deg, transparent 0 28px, rgba(241, 235, 192, .07) 29px), repeating-linear-gradient(90deg, transparent 0 28px, rgba(241, 235, 192, .07) 29px); }
.mapLake { position: absolute; left: 16%; top: 23%; width: 115px; height: 106px; border: 2px solid rgba(176, 224, 219, .80); border-radius: 45% 55% 52% 48%; color: transparent; transform: rotate(-17deg); box-shadow: 0 0 0 9px rgba(144, 190, 176, .08), inset 0 0 30px rgba(144, 190, 176, .2); }
.mapPin { position: absolute; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(245, 238, 197, .75); border-radius: 50%; background: #24493e; color: var(--paper); font-size: 9px; line-height: 1.2; text-align: center; }
.mapPin.p1 { left: 20%; top: 61%; } .mapPin.p2 { left: 56%; top: 56%; } .mapPin.p3 { left: 76%; top: 34%; } .mapPin.p4 { left: 66%; top: 9%; }
.asideQuote { color: var(--paper); font: 600 24px/1.5 "Songti SC", serif; letter-spacing: .08em; }
.asideTags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.asideTags span { padding: 5px 8px; border: 1px solid rgba(237, 239, 212, .28); border-radius: 20px; color: #c6ddce; font-size: 10px; }
.controlsDisclosure { position: relative; }
.controlsDisclosure summary { color: #e7e7cb; cursor: pointer; list-style: none; }
.controlsDisclosure summary::-webkit-details-marker { display: none; }
.controlsDisclosure[open] .controls { position: absolute; z-index: 3; right: 0; bottom: 29px; width: min(360px, 72vw); display: grid; gap: 11px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #173b33; box-shadow: 0 16px 40px rgba(0,0,0,.4); color: #d8e6d6; font-size: 11px; }
kbd { color: var(--cream); background: rgba(235, 241, 223, .10); border: 1px solid rgba(248, 245, 219, .32); border-radius: 5px; box-shadow: none; }

/* 游戏内：留白的地图，中央画面留给世界。 */
#hud { z-index: 6; left: 20px; top: 18px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; color: var(--cream); font: inherit; text-shadow: 0 2px 10px rgba(0,0,0,.62); }
.worldMark { display: flex; align-items: center; font: 800 18px/1.1 "Songti SC", serif; letter-spacing: .07em; }
.worldMark .markCube { width: 32px; height: 32px; margin-right: 9px; }
.worldMark small { display: block; margin-top: 4px; color: #e2e4c9; font: 700 8px/1 sans-serif; letter-spacing: .17em; }
.placeLine { display: flex; gap: 10px; align-items: center; margin: 18px 0 0 3px; font-size: 11px; }
.placeLine b { color: var(--cream); font-size: 15px; letter-spacing: .1em; }
.placeLine span { color: #e1e9db; }
#debugStats { display: none; margin: 10px 0 0; padding: 7px 9px; border-radius: 6px; background: rgba(14, 33, 31, .7); color: #e3efe0; font: 11px/1.4 "SF Mono", monospace; }
#debugStats.show { display: block; }
#miniMapWrap { position: fixed; top: 18px; right: 18px; width: 184px; margin: 0; padding: 11px; border: 1px solid rgba(242, 241, 215, .58); border-radius: 15px; background: rgba(23, 49, 43, .76); box-shadow: 0 12px 30px rgba(4, 21, 22, .3); backdrop-filter: blur(14px); }
#miniMapWrap.hide { display: none; }
.miniMapTitle { margin-bottom: 8px; color: #fff9e6; font-size: 11px; letter-spacing: .08em; }
.miniMapTitle span { color: #d5d7b8; font-size: 9px; }
#miniMap { width: 160px; border-radius: 8px; border: 1px solid rgba(236, 244, 225, .3); }
#hint { z-index: 6; left: 20px; right: auto; top: auto; bottom: 93px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; max-width: 400px; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; font-size: 10px; text-shadow: 0 2px 8px #142d2a; }
#hint span { display: inline-flex; align-items: center; gap: 3px; }
#hint kbd { color: #fff8e6; background: rgba(22, 48, 41, .65); }
#hotbar { bottom: 17px; padding: 6px; gap: 5px; border: 1px solid rgba(245, 243, 216, .62); border-radius: 15px; background: rgba(20, 47, 40, .78); box-shadow: 0 12px 32px rgba(5, 22, 23, .34); backdrop-filter: blur(12px); }
.slot { width: clamp(35px, 5vw, 52px); height: clamp(35px, 5vw, 52px); border: 1px solid rgba(238, 239, 209, .24); border-radius: 9px; background: rgba(244, 246, 222, .08); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.slot.sel { border-color: #f0dfa9; background: rgba(225, 212, 159, .19); box-shadow: 0 0 0 2px rgba(244, 224, 163, .34), inset 0 1px 0 rgba(255,255,255,.2); transform: translateY(-3px); }
.slot canvas { width: 80%; height: 80%; }
.slot .num { color: #e2e5d3; }
#heldItem { width: 155px; height: 155px; bottom: -14px; right: -10px; }
#itemName { bottom: 83px; color: #fff7e5; letter-spacing: .12em; font-size: 12px; }
#toast { top: 75px; border: 1px solid rgba(242, 223, 160, .62); border-radius: 9px; background: rgba(27, 54, 43, .88); color: #fff3c8; box-shadow: 0 8px 30px rgba(0,0,0,.24); }
#minebar { border-color: rgba(235, 222, 173, .7); background: rgba(20, 48, 38, .74); }
#minebar i { background: #efd49a; }

/* 背包与合成台共用同一套材质。 */
#inv, #craft { background: rgba(9, 26, 27, .67); backdrop-filter: blur(9px); }
.invPanel, .craftPanel { background: rgba(26, 54, 47, .96); border: 1px solid rgba(244, 240, 210, .38); border-radius: 20px; }
.invPanel::before, .craftPanel::before { background: linear-gradient(90deg, transparent, rgba(243, 236, 200, .5), transparent); }
.invTitle { color: #fff9e5; font-size: 17px; }
.invTitle small, .creativeHint, .craftHint, .invFoot, .hotbarLabel { color: #c8d8ca; }
.tab, .invSlot, .craftSlot, .resultSlot, .recipeBtn, .paletteBtn { color: #eeeecf; border: 1px solid rgba(242, 242, 215, .21); border-radius: 8px; background: rgba(243, 245, 221, .08); box-shadow: none; }
.tab.sel, .invSlot.sel, .resultSlot.ready { color: #fff8dd; border-color: var(--gold); background: rgba(222, 196, 122, .20); box-shadow: 0 0 0 1px rgba(222,196,122,.15); }
.tab:hover, .invSlot:hover, .recipeBtn:hover, .paletteBtn:hover { border-color: rgba(245, 228, 174, .6); background: rgba(223, 200, 139, .13); }
.recipeBtn { color: #f0eed9; }

@media (max-width: 760px) {
  .panel { width: calc(100vw - 26px); max-height: calc(100dvh - 26px); }
  .heroGrid { grid-template-columns: 1fr; min-height: auto; }
  .heroContent { padding: 34px 27px 29px; }
  .heroAside { display: none; }
  .panelTop, .panelFoot { padding: 15px 26px; }
  .logo { font-size: 75px; }
  .heroLead { margin-top: 20px; }
  #hud { left: 11px; top: 10px; }
  .worldMark { font-size: 15px; }
  .placeLine { margin-top: 10px; }
  #miniMapWrap { top: 10px; right: 10px; width: 138px; padding: 8px; }
  #miniMap { width: 120px; }
  #hint { display: none; }
  #hotbar { bottom: 8px; }
  #heldItem { width: 112px; height: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* 画面偏好沿用现有墨绿菜单，触控和键盘均可操作。 */
.graphicsSettings { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; color: var(--paper); }
.graphicsSettings summary { cursor: pointer; font-size: 13px; font-weight: 700; }
.graphicsSettings summary span { float: right; color: #b2c8bc; font-size: 10px; font-weight: 400; }
.graphicsGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.graphicsGrid label { font-size: 11px; }
.graphicsGrid select { display: block; width: 100%; margin-top: 6px; padding: 8px; border: 1px solid #bac8b6; border-radius: 6px; background: #f8f7eb; color: #294f40; }
.fovSetting { grid-column: 1 / -1; }
.fovSetting output { float: right; font-variant-numeric: tabular-nums; }
.fovSetting input { display: block; width: 100%; margin: 8px 0 0; accent-color: #386951; }
.graphicsSettings p { font-size: 10px; line-height: 1.6; color: #b2c8bc; margin: 12px 0 0; }
.graphicsSettings :focus-visible { outline: 2px solid #a97729; outline-offset: 3px; }

/* 阅读：石碑、纸条、沉船日志共用一张纸。 */
#read {
  position: fixed; inset: 0; z-index: 34; display: grid; place-items: center;
  padding: 22px; background: rgba(5, 17, 18, .58);
  backdrop-filter: blur(7px) saturate(1.05); transition: opacity .18s;
}
#read.hide { opacity: 0; pointer-events: none; }
.readPanel {
  width: min(560px, 100%); max-height: min(760px, calc(100dvh - 44px)); overflow-y: auto;
  padding: 0 0 22px; border: 1px solid rgba(238, 230, 190, .55); border-radius: 16px;
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(62, 82, 63, .055) 31px 32px),
    radial-gradient(circle at 18% 0%, rgba(255, 252, 226, .85), transparent 40%),
    #efeee0;
  color: #22372c; box-shadow: 0 32px 90px rgba(0, 15, 16, .52);
}
.readTop {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 28px; border-bottom: 1px solid rgba(42, 70, 54, .18);
  color: #6f7d5f; font: 700 11px/1 sans-serif; letter-spacing: .17em;
}
.readClose {
  padding: 7px 11px; border: 1px solid rgba(42, 70, 54, .28); border-radius: 7px;
  background: transparent; color: #294437; font: inherit; cursor: pointer;
}
.readClose:hover { background: rgba(42, 70, 54, .09); }
.readPanel h2 {
  margin: 30px 32px 6px; color: #1c3328;
  font: 700 clamp(25px, 4vw, 34px)/1.25 "Songti SC", "Noto Serif CJK SC", serif;
  letter-spacing: -.02em;
}
.readBody {
  margin: 10px 32px 22px; color: #3b4f43; font-size: 14px; line-height: 2.05;
  white-space: pre-wrap;
}
.readFoot {
  display: flex; justify-content: space-between; gap: 12px; padding: 14px 32px 0;
  border-top: 1px solid rgba(42, 70, 54, .14); color: #7b8772; font-size: 10px;
}
.readFoot kbd { color: #334b3d; background: rgba(46, 72, 55, .08); border-color: rgba(46, 72, 55, .24); }

/* 极光：只在雪原的夜里出现，不解释。 */
#aurora {
  position: fixed; inset: -10% -10% 30%; z-index: 1; pointer-events: none; opacity: 0;
  transition: opacity 2.4s ease; mix-blend-mode: screen;
  background:
    linear-gradient(180deg, rgba(104, 255, 196, .16), transparent 58%),
    repeating-linear-gradient(102deg, transparent 0 34px, rgba(120, 255, 196, .12) 34px 40px,
      rgba(120, 255, 196, .02) 40px 74px),
    radial-gradient(ellipse 52% 32% at 24% 12%, rgba(116, 255, 194, .46), transparent 72%),
    radial-gradient(ellipse 40% 44% at 66% 2%, rgba(116, 198, 255, .38), transparent 74%),
    radial-gradient(ellipse 36% 26% at 46% 22%, rgba(202, 148, 255, .30), transparent 70%);
  filter: blur(7px) saturate(1.35); animation: auroraBreath 11s ease-in-out infinite alternate;
}
#aurora.show { opacity: 1; }
@keyframes auroraBreath {
  from { transform: translate3d(-1.5%, 0, 0) scaleY(.94) skewX(-2deg); filter: blur(7px) hue-rotate(0deg); }
  to   { transform: translate3d(1.8%, 1.4%, 0) scaleY(1.06) skewX(2deg); filter: blur(11px) hue-rotate(18deg); }
}

/* 流星：偶尔有，不常来。 */
#meteors { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .5s; }
#meteors.show { opacity: 1; }
#meteors i {
  position: absolute; width: 120px; height: 1px; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 246, 209, .92), #fff);
  transform: rotate(32deg); filter: drop-shadow(0 0 5px rgba(255, 244, 190, .8));
}
#meteors.show i { animation: meteorFall 2.6s linear infinite; }
#meteors i:nth-child(1) { left: 8%;  top: 12%; animation-delay: .2s; }
#meteors i:nth-child(2) { left: 46%; top: 6%;  animation-delay: 1.1s; width: 170px; }
#meteors i:nth-child(3) { left: 68%; top: 22%; animation-delay: 1.9s; }
#meteors i:nth-child(4) { left: 26%; top: 30%; animation-delay: 2.4s; width: 90px; }
@keyframes meteorFall {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(32deg); }
  8% { opacity: 1; }
  55% { opacity: .85; }
  70%, 100% { opacity: 0; transform: translate3d(46vw, 44vh, 0) rotate(32deg); }
}

/* 旧时代的秘密：一次白闪。 */
#flash { position: fixed; inset: 0; z-index: 33; pointer-events: none; background: #f4fbff; opacity: 0; }
#flash.show { animation: flashOnce .7s ease-out; }
@keyframes flashOnce {
  0% { opacity: 0; } 12% { opacity: .82; } 100% { opacity: 0; }
}

@media (max-width: 760px) {
  .readPanel h2 { margin: 22px 22px 4px; }
  .readBody { margin: 8px 22px 18px; font-size: 13px; line-height: 1.95; }
  .readTop, .readFoot { padding-left: 22px; padding-right: 22px; }
}

/* ---------- 手机触屏操作 ---------- */
body.touch-mode { overscroll-behavior: none; }
body.touch-mode #hint,
body.touch-mode #heldItem,
body.touch-mode #itemName { display: none !important; }
body.touch-mode #hotbar {
  z-index: 9; pointer-events: auto; touch-action: manipulation;
  bottom: calc(6px + env(safe-area-inset-bottom, 0px));
}
body.touch-mode #crosshair { z-index: 9; width: 21px; height: 21px; margin: -10.5px 0 0 -10.5px; }
body.touch-mode .slot { cursor: pointer; }

#touch {
  position: fixed; inset: 0; z-index: 8; display: none;
  pointer-events: none; touch-action: none;
  -webkit-user-select: none; user-select: none;
}
body.touch-mode #touch:not(.hide) { display: block; }
#touchLook {
  position: absolute; inset: 0; pointer-events: auto; touch-action: none;
  background: transparent;
}
#stickBase {
  position: absolute; left: max(16px, env(safe-area-inset-left, 0px));
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  width: 120px; height: 120px; border-radius: 50%;
  border: 1px solid rgba(240, 248, 226, .38);
  background: radial-gradient(circle at 42% 36%, rgba(226, 247, 236, .20), rgba(12, 39, 38, .52));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 8px 24px rgba(0, 18, 20, .34);
  backdrop-filter: blur(5px);
  pointer-events: auto; touch-action: none; z-index: 2;
}
#stickBase::before {
  content: ""; position: absolute; inset: 34%; border-radius: 50%;
  border: 1px dashed rgba(240, 248, 226, .22);
}
#stickKnob {
  position: absolute; left: 34px; top: 34px; width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(246, 253, 238, .72), rgba(150, 201, 168, .44));
  border: 1px solid rgba(255,255,255,.52);
  box-shadow: 0 4px 12px rgba(0, 20, 22, .38), inset 0 1px 2px rgba(255,255,255,.42);
  transition: transform .06s linear; will-change: transform;
}
#stickBase.active { border-color: rgba(245, 252, 225, .72); }
#stickBase.active #stickKnob { transition: none; }

#touchBtns {
  position: absolute; right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  width: 200px; height: 218px; z-index: 2; pointer-events: none;
}
.touchBtn {
  position: absolute; width: 54px; height: 54px; padding: 0; border-radius: 50%;
  color: #f7fbe9; font: 700 19px/1 "PingFang SC", sans-serif;
  background: linear-gradient(155deg, rgba(221, 246, 237, .28), rgba(12, 43, 42, .62));
  border: 1px solid rgba(240, 250, 227, .48);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 7px 18px rgba(0, 18, 20, .34);
  backdrop-filter: blur(6px);
  pointer-events: auto; touch-action: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.touchBtn.big { width: 66px; height: 66px; font-size: 24px; }
.touchBtn:active, .touchBtn.active {
  transform: scale(.93);
  background: linear-gradient(155deg, rgba(240, 255, 232, .52), rgba(38, 108, 92, .72));
  border-color: rgba(255, 255, 255, .78);
}
#touchMine { left: 0; bottom: 0; }
#touchJump { right: 0; bottom: 0; }
#touchPlace { left: 0; bottom: 78px; }
#touchFly { right: 0; bottom: 78px; }
#touchMenu { left: 0; bottom: 150px; }
#touchBag { right: 0; bottom: 150px; }
#touchDown { right: 0; bottom: 222px; display: none; }
body.touch-mode.flying #touchDown { display: block; }
#touchDown.hide { display: none; }

#touchHint {
  position: absolute; left: 50%; top: calc(70px + env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
  max-width: min(88vw, 520px); padding: 9px 14px; border-radius: 999px;
  color: #eef8e8; font-size: 11px; letter-spacing: .03em; white-space: nowrap;
  background: rgba(11, 35, 33, .62); border: 1px solid rgba(240, 248, 226, .30);
  backdrop-filter: blur(8px); pointer-events: none; opacity: 0;
  transition: opacity .5s; text-align: center;
}
#touchHint.show { opacity: 1; }
#touchHint.fade { opacity: 0; }

.deviceHint {
  margin-top: 12px; color: #b9cfc0; font-size: 11px; letter-spacing: .03em;
}
.deviceHint b { color: var(--gold); font-weight: 700; }
.mobileHelp {
  margin-top: 7px; color: #a9c1b2; font-size: 11px; line-height: 1.7;
}

@media (max-width: 520px) {
  #touchBtns { transform: scale(.92); transform-origin: bottom right; }
  #touchHint { font-size: 10px; white-space: normal; }
}
@media (max-height: 480px) {
  #stickBase { width: 96px; height: 96px; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  #stickKnob { width: 42px; height: 42px; left: 27px; top: 27px; }
  #touchBtns { transform: scale(.84); transform-origin: bottom right; bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  body.touch-mode #touchHint { top: calc(150px + env(safe-area-inset-top, 0px)); }
}

/* 触屏安全区：刘海与 Home 指示条 */
body.touch-mode #hud { top: calc(12px + env(safe-area-inset-top, 0px)); left: max(12px, env(safe-area-inset-left, 0px)); }
body.touch-mode #miniMapWrap { top: calc(12px + env(safe-area-inset-top, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); }
body.touch-mode #touchHint { top: calc(190px + env(safe-area-inset-top, 0px)); }

/* 手机上把提示放到地图下方，避免挡住手绘地图。 */
@media (max-width: 760px) {
  body.touch-mode #touchHint { top: calc(190px + env(safe-area-inset-top, 0px)); }
  body.touch-mode .slot { width: clamp(32px, 9vw, 40px); height: clamp(32px, 9vw, 40px); }
  body.touch-mode .slot canvas { width: 82%; height: 82%; }
  body.touch-mode .miniMapTitle span { display: none; }
}
@media (max-height: 480px) {
  body.touch-mode #touchHint { top: calc(150px + env(safe-area-inset-top, 0px)); }
}

/* 横屏矮屏：动作按钮排成一行，避免和右上角地图重叠。 */
@media (max-height: 480px) {
  #stickBase { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  #touchBtns {
    left: auto; right: max(8px, env(safe-area-inset-right, 0px));
    top: auto; bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    width: auto; height: auto; display: flex; align-items: center; gap: 6px;
    transform: none;
  }
  #touchMenu, #touchBag, #touchFly, #touchDown, #touchPlace, #touchJump, #touchMine {
    left: auto; right: auto; top: auto; bottom: auto;
  }
  .touchBtn, .touchBtn.big {
    position: relative; inset: auto;
    width: clamp(40px, 6.5vw, 54px); height: clamp(40px, 6.5vw, 54px);
    font-size: 17px;
  }
  .touchBtn.big { width: clamp(44px, 7vw, 58px); height: clamp(44px, 7vw, 58px); font-size: 22px; }
  #touchDown { display: none; }
  body.touch-mode.flying #touchDown { display: block; }
}

/* 引导提示出现时先收起准星，避免提示条压住准星。 */
body.touch-mode.touch-hint #crosshair { opacity: 0 !important; }