:root {
  --ink: #221714;
  --paper: #f2e6ca;
  --paper-deep: #d6bf92;
  --black: #100b0b;
  --black-2: #1b1110;
  --black-3: #291817;
  --red: #9b2c23;
  --red-bright: #c84936;
  --red-deep: #5d1714;
  --gold: #c69a43;
  --gold-light: #ecd58a;
  --jade: #3f6e63;
  --jade-light: #82b1a2;
  --mist: rgba(221, 231, 219, .72);
  --line: rgba(224, 193, 119, .34);
  --line-strong: rgba(233, 202, 125, .64);
  --shadow: 0 24px 70px rgba(0, 0, 0, .42);
  --font-title: "KaiTi", "STKaiti", "Kaiti SC", "SimSun", serif;
  --font-ui: "Segoe UI", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--paper);
  font-family: var(--font-ui);
  line-height: 1.55;
  background:
    radial-gradient(900px 520px at 18% -5%, rgba(112, 37, 30, .4), transparent 62%),
    radial-gradient(700px 520px at 100% 100%, rgba(56, 96, 83, .25), transparent 58%),
    linear-gradient(180deg, #1a1110, #0d0a0a 60%, #170f0e);
  overflow-x: hidden;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: 38px 38px;
  content: "";
  pointer-events: none;
}

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible { outline: 3px solid rgba(236, 213, 138, .72); outline-offset: 3px; }

.skip-link {
  position: fixed;
  left: 10px;
  top: 10px;
  z-index: 300;
  padding: 9px 13px;
  color: #fff8e4;
  background: var(--red-deep);
  border-radius: 8px;
  transform: translateY(-150%);
  transition: transform .18s ease;
}

.skip-link:focus { transform: translateY(0); }

.game-app { width: min(1360px, calc(100% - 26px)); margin: 0 auto; padding: 14px 0 20px; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 62px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 17px 17px 8px 8px;
  background: linear-gradient(90deg, rgba(91, 26, 21, .72), rgba(25, 17, 16, .93) 34%, rgba(27, 17, 16, .93)), #1a1110;
  box-shadow: 0 14px 36px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.03);
}

.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--paper); text-decoration: none; }

.brand-seal {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  color: #fff3d0;
  font-family: var(--font-title);
  font-size: 23px;
  font-weight: 700;
  border: 1px solid rgba(255, 238, 186, .42);
  border-radius: 7px;
  background: linear-gradient(145deg, var(--red-bright), var(--red-deep));
  box-shadow: inset 0 0 0 3px rgba(97, 21, 17, .45), 0 7px 18px rgba(0,0,0,.28);
  transform: rotate(-2deg);
}

.brand b { display: block; color: #f5dfad; font-family: var(--font-title); font-size: 17px; letter-spacing: .1em; line-height: 1.2; }
.brand small { display: block; color: rgba(240, 225, 193, .54); font: 10px/1.35 var(--font-ui); letter-spacing: .08em; }
.top-actions, .language-switch { display: flex; align-items: center; gap: 7px; }
.save-note { padding-right: 8px; color: rgba(240, 225, 193, .48); font-size: 10px; border-right: 1px solid var(--line); }

.icon-button {
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  color: var(--gold-light);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(44, 26, 23, .84);
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

.icon-button:hover { background: rgba(112, 35, 28, .78); transform: translateY(-1px); }
.icon-button[aria-pressed="false"] { opacity: .5; }

.language-switch { gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: rgba(13, 9, 9, .64); }
.language-switch button { min-width: 38px; padding: 5px 8px; color: rgba(244, 226, 188, .72); border: 0; border-radius: 5px; background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; }
.language-switch button[aria-pressed="true"] { color: #fff6dc; background: linear-gradient(180deg, #a93a2d, #741f19); box-shadow: inset 0 0 0 1px rgba(255, 230, 171, .2); }

.game-frame {
  position: relative;
  width: 100%;
  min-height: 660px;
  margin-top: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 9px 9px 20px 20px;
  background: var(--black);
  box-shadow: var(--shadow), inset 0 0 0 3px rgba(82, 38, 29, .38), inset 0 0 0 5px rgba(14, 9, 9, .8);
  overflow: hidden;
}

.game-frame::before, .game-frame::after { position: absolute; z-index: 50; width: 60px; height: 18px; border-top: 1px solid var(--gold); content: ""; pointer-events: none; }
.game-frame::before { left: 13px; top: 8px; border-left: 1px solid var(--gold); }
.game-frame::after { right: 13px; top: 8px; border-right: 1px solid var(--gold); }
.screen { min-height: 660px; animation: screen-in .34s ease both; }
.world-screen { position: relative; display: flex; flex-direction: column; background: #1a1711; }

.world-hud { position: absolute; left: 14px; right: 14px; top: 14px; z-index: 24; display: flex; align-items: stretch; justify-content: space-between; gap: 12px; pointer-events: none; }

.location-card,
.quest-card {
  min-width: 190px;
  padding: 9px 13px;
  border: 1px solid rgba(226, 196, 125, .4);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(25, 15, 14, .9), rgba(30, 18, 17, .76));
  box-shadow: 0 8px 24px rgba(0,0,0,.24), inset 0 0 0 2px rgba(103, 43, 31, .38);
  backdrop-filter: blur(6px);
}

.location-card b, .quest-card b { display: block; color: #f0d79b; font-family: var(--font-title); font-size: 17px; letter-spacing: .06em; line-height: 1.25; }
.location-card small, .quest-card small { display: block; color: rgba(235, 217, 178, .65); font-size: 10px; }
.hud-label { display: block; color: rgba(235, 217, 178, .48); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }

.world-viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 560px;
  overflow: hidden;
  background: radial-gradient(800px 360px at 50% 110%, rgba(124, 150, 114, .36), transparent 58%), linear-gradient(180deg, #243629, #48564a 45%, #403f2d);
  outline: none;
}

.world-map { position: absolute; left: 0; top: 0; display: grid; transform-origin: top left; transition: transform .16s ease-out; image-rendering: pixelated; }
.tile { position: relative; width: 56px; height: 56px; overflow: hidden; }

.tile.grass {
  background: radial-gradient(circle at 20% 25%, rgba(173, 195, 126, .3) 0 2px, transparent 3px), radial-gradient(circle at 72% 68%, rgba(173, 195, 126, .24) 0 2px, transparent 3px), linear-gradient(135deg, #3e5a3e, #314a35 68%, #3a543a);
  box-shadow: inset 0 0 0 1px rgba(20, 34, 24, .22);
}

.tile.grass:nth-child(3n) { background: radial-gradient(circle at 40% 30%, rgba(200, 207, 142, .22) 0 2px, transparent 3px), linear-gradient(135deg, #456147, #344e39 68%, #3d583e); }
.tile.path, .tile.bridge { background: linear-gradient(90deg, transparent 0 12%, rgba(112, 85, 54, .25) 12% 16%, transparent 16% 84%, rgba(112, 85, 54, .23) 84% 88%, transparent 88%), linear-gradient(180deg, #8b7551, #776244); box-shadow: inset 0 0 0 1px rgba(64, 44, 28, .28); }
.tile.bridge { background: repeating-linear-gradient(90deg, #725538 0 9px, #93714b 9px 14px), linear-gradient(180deg, #906f4a, #6f5236); border-top: 3px solid #4c3728; border-bottom: 3px solid #4c3728; }
.tile.water { background: repeating-linear-gradient(0deg, rgba(202, 232, 217, .09) 0 2px, transparent 2px 12px), linear-gradient(180deg, #31565a, #27474e 66%, #213b43); box-shadow: inset 0 0 16px rgba(5, 24, 29, .34); }
.tile.water::after { position: absolute; left: 10px; top: 15px; width: 28px; height: 7px; border-top: 2px solid rgba(200, 232, 219, .18); border-radius: 50%; content: ""; animation: water-glint 2.8s ease-in-out infinite; }

.tile.tree { background: linear-gradient(135deg, #2a432f, #233b29); }
.tile.tree::before { position: absolute; left: 11px; top: 3px; width: 45px; height: 45px; border-radius: 48% 52% 46% 54%; background: radial-gradient(circle at 35% 32%, #63805a 0 6px, transparent 7px), radial-gradient(circle at 65% 46%, #587750 0 8px, transparent 9px), radial-gradient(circle at 42% 68%, #6c8a61 0 7px, transparent 8px), #3b5b3f; box-shadow: inset -7px -8px 12px rgba(20, 41, 25, .45), 0 6px 8px rgba(0,0,0,.22); content: ""; }

.tile.house { background: linear-gradient(160deg, #d4c59f 0 62%, #b7a47d 62%); border: 1px solid #6a5438; box-shadow: inset 0 0 0 3px rgba(255, 247, 210, .24); }
.tile.house::before { position: absolute; left: 6px; top: 8px; width: 45px; height: 18px; background: linear-gradient(180deg, #702821, #421713); border-radius: 45% 45% 0 0; transform: rotate(-2deg); content: ""; }
.tile.house::after { position: absolute; left: 22px; bottom: 4px; width: 13px; height: 21px; background: #563b27; border: 1px solid #362418; content: ""; }

.tile.shrine { background: radial-gradient(circle at 50% 60%, rgba(255, 229, 148, .38), transparent 50%), linear-gradient(135deg, #55452e, #302819); }
.tile.shrine::before { position: absolute; left: 15px; top: 8px; width: 27px; height: 36px; border: 2px solid #e3c06e; border-radius: 50% 50% 42% 42%; background: radial-gradient(circle, #fff2b2, #d6942e 62%); box-shadow: 0 0 20px rgba(238, 196, 86, .56); content: ""; }
.tile.gate { background: radial-gradient(circle at 50% 55%, rgba(179, 71, 51, .24), transparent 50%), linear-gradient(135deg, #1f1313, #0f0b0c); }
.tile.gate::before, .tile.gate::after { position: absolute; bottom: 0; width: 17px; height: 53px; background: #34221f; border: 1px solid #694036; content: ""; }
.tile.gate::before { left: 7px; }
.tile.gate::after { right: 7px; }
.tile.gate span { position: absolute; left: 22px; top: 8px; width: 13px; height: 42px; border: 1px solid #bd763d; background: linear-gradient(180deg, #4b1d19, #130b0c); box-shadow: 0 0 18px rgba(198, 59, 42, .42); }

.entity-layer { position: absolute; inset: 0; pointer-events: none; }
.entity { position: absolute; display: grid; place-items: center; width: 56px; height: 56px; pointer-events: auto; cursor: pointer; transform: translateY(-2px); }
.entity.player::after { position: absolute; left: 50%; bottom: -2px; width: 24px; height: 8px; border-radius: 50%; background: rgba(0,0,0,.26); content: ""; transform: translateX(-50%); }
.entity-icon { position: relative; z-index: 2; width: 38px; height: 46px; filter: drop-shadow(0 5px 4px rgba(0,0,0,.28)); animation: sprite-bob 2.8s ease-in-out infinite; }
.entity.enemy .entity-icon { width: 42px; height: 42px; animation-name: enemy-bob; }
.entity.chest .entity-icon { width: 34px; height: 29px; animation: none; }
.entity.marker .entity-icon { animation: marker-pulse 1.5s ease-in-out infinite; }
.entity:hover .entity-icon, .entity.selected .entity-icon { transform: translateY(-3px) scale(1.05); }
.entity.selected::before { position: absolute; inset: 2px; border: 1px solid rgba(248, 220, 133, .72); border-radius: 8px; background: rgba(214, 170, 69, .12); content: ""; }

.mist-layer { position: absolute; inset: 0; z-index: 14; background: linear-gradient(90deg, rgba(190, 207, 198, .11), transparent 28%, rgba(207, 218, 207, .1) 66%, transparent), linear-gradient(0deg, rgba(183, 199, 190, .16), transparent 30%); mix-blend-mode: screen; pointer-events: none; animation: mist-shift 9s ease-in-out infinite alternate; }
.vignette { position: absolute; inset: 0; z-index: 15; box-shadow: inset 0 0 100px rgba(4, 8, 7, .72), inset 0 -90px 110px rgba(7, 7, 5, .5); pointer-events: none; }

.interaction-hint { position: absolute; left: 50%; bottom: 18px; z-index: 22; max-width: calc(100% - 30px); padding: 7px 12px; color: #f7e6b6; border: 1px solid rgba(230, 201, 128, .48); border-radius: 5px; background: rgba(20, 13, 12, .86); box-shadow: 0 7px 20px rgba(0,0,0,.32); font-size: 11px; transform: translateX(-50%); }
.zone-title { position: absolute; left: 50%; top: 24%; z-index: 23; color: #fff0bd; font-family: var(--font-title); font-size: clamp(24px, 4vw, 44px); letter-spacing: .2em; text-shadow: 0 3px 10px rgba(0,0,0,.7); opacity: 0; pointer-events: none; transform: translate(-50%, -10px); }
.zone-title.show { animation: zone-title 2.2s ease both; }

.world-controls { position: relative; z-index: 30; display: grid; grid-template-columns: minmax(230px, 1fr) minmax(360px, 1.4fr) 150px; gap: 10px; min-height: 100px; padding: 9px 11px; border-top: 1px solid var(--line); background: linear-gradient(90deg, rgba(91, 28, 22, .56), transparent 30%), linear-gradient(180deg, #211413, #140d0c); box-shadow: 0 -10px 30px rgba(0,0,0,.26); }
.party-strip { display: flex; align-items: center; gap: 7px; min-width: 0; }
.party-chip { position: relative; min-width: 58px; flex: 1 1 0; padding: 5px 6px 5px 40px; border: 1px solid rgba(218, 187, 113, .25); border-radius: 5px; background: rgba(35, 22, 19, .76); }
.party-chip .mini-avatar { position: absolute; left: 5px; top: 7px; width: 29px; height: 34px; }
.party-chip b { display: block; overflow: hidden; color: #f0d496; font-family: var(--font-title); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.party-chip small { display: block; color: rgba(235, 216, 177, .58); font-size: 9px; }
.hp-track, .mp-track { height: 4px; margin-top: 3px; border-radius: 3px; background: rgba(0,0,0,.5); overflow: hidden; }
.hp-track i, .mp-track i { display: block; height: 100%; background: linear-gradient(90deg, #7f251d, #dd6142); transition: width .25s ease; }
.mp-track i { background: linear-gradient(90deg, #235452, #62a799); }

.classic-menu { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.classic-menu button { min-width: 0; min-height: 76px; padding: 6px 4px; color: #e6cf9d; border: 1px solid rgba(219, 187, 113, .26); border-radius: 5px; background: linear-gradient(180deg, rgba(78, 38, 30, .72), rgba(30, 19, 17, .88)); box-shadow: inset 0 0 0 2px rgba(10, 7, 7, .34); cursor: pointer; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.classic-menu button:hover { border-color: var(--gold); background: linear-gradient(180deg, rgba(133, 53, 39, .82), rgba(38, 21, 18, .92)); transform: translateY(-2px); }
.classic-menu span { display: grid; width: 31px; height: 31px; margin: 0 auto 3px; place-items: center; color: #ffe8ac; font-family: var(--font-title); font-size: 17px; border: 1px solid rgba(233, 204, 133, .42); border-radius: 50%; background: #79261f; }
.classic-menu b { display: block; font-family: var(--font-title); font-size: 12px; line-height: 1.2; }
.classic-menu small { display: block; color: rgba(236, 216, 175, .5); font-size: 8px; }
.mobile-pad { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 4px; width: 138px; margin-left: auto; }
.mobile-pad button { min-width: 0; min-height: 0; color: #f1d79a; border: 1px solid rgba(230, 199, 122, .35); border-radius: 5px; background: linear-gradient(180deg, #4d3027, #231714); cursor: pointer; font-size: 12px; }
.mobile-pad button[data-move="up"] { grid-column: 2; grid-row: 1; }
.mobile-pad button[data-move="left"] { grid-column: 1; grid-row: 2; }
.mobile-pad button[data-move="down"] { grid-column: 2; grid-row: 3; }
.mobile-pad button[data-move="right"] { grid-column: 3; grid-row: 2; }
.mobile-pad .interact-button { grid-column: 2; grid-row: 2; color: #fff3cb; background: linear-gradient(180deg, #b33b2e, #6f1c17); font-family: var(--font-title); font-size: 17px; }
.battle-screen { position: relative; min-height: 660px; background: #0e0c0b; }
.battle-scene { position: relative; min-height: 660px; background: radial-gradient(600px 290px at 66% 58%, rgba(140, 139, 105, .28), transparent 66%), linear-gradient(180deg, #1b2323, #303832 48%, #3d3827 49%, #1d1a13); overflow: hidden; }
.battle-scene::before { position: absolute; left: 0; right: 0; top: 48%; height: 1px; background: rgba(236, 213, 138, .18); content: ""; }
.battle-sky span { position: absolute; width: 240px; height: 54px; border-radius: 50%; background: rgba(196, 213, 205, .06); filter: blur(12px); animation: battle-mist 8s linear infinite; }
.battle-sky span:nth-child(1) { left: -200px; top: 18%; }
.battle-sky span:nth-child(2) { left: -280px; top: 38%; animation-delay: -3s; }
.battle-sky span:nth-child(3) { left: -240px; top: 62%; animation-delay: -5s; }
.battle-ground { position: absolute; left: -5%; right: -5%; top: 47%; height: 53%; background: radial-gradient(ellipse at 23% 48%, rgba(0,0,0,.22), transparent 32%), radial-gradient(ellipse at 74% 55%, rgba(0,0,0,.2), transparent 34%), repeating-linear-gradient(175deg, transparent 0 30px, rgba(223, 208, 159, .035) 31px 32px), linear-gradient(180deg, #56533b, #363321 72%, #242117); }
.enemy-layer, .party-layer { position: absolute; left: 4%; right: 4%; z-index: 8; display: flex; align-items: flex-end; justify-content: space-around; gap: 14px; pointer-events: none; }
.enemy-layer { top: 13%; height: 39%; }
.party-layer { bottom: 24%; height: 40%; pointer-events: auto; }
.combatant { position: relative; width: min(180px, 25%); padding: 5px; border: 0; background: transparent; cursor: default; pointer-events: auto; transition: transform .18s ease, filter .18s ease; }
.combatant.targetable { cursor: crosshair; border-radius: 13px; background: rgba(237, 205, 120, .05); }
.combatant.targetable:hover, .combatant.targetable:focus-visible { background: rgba(237, 205, 120, .12); transform: translateY(-4px); }
.combatant.targetable::after { position: absolute; left: 50%; top: -4px; width: 16px; height: 16px; border-top: 2px solid #f2d482; border-left: 2px solid #f2d482; content: ""; opacity: 0; transform: translateX(-50%) rotate(45deg); }
.combatant.targetable:hover::after, .combatant.targetable:focus-visible::after { opacity: 1; }
.combatant .sprite { width: 100%; height: 106px; filter: drop-shadow(0 9px 6px rgba(0,0,0,.36)); animation: sprite-bob 2.8s ease-in-out infinite; }
.combatant.enemy .sprite { height: 98px; animation-name: enemy-bob; }
.combatant.hit { animation: hit-shake .36s ease; }
.combatant.attack { animation: attack-lunge .36s ease; }
.combatant.down { filter: grayscale(1) brightness(.55); transform: translateY(10px); }
.combatant.guard::before { position: absolute; inset: 5px 12px 4px; border: 2px solid rgba(139, 201, 186, .75); border-radius: 50%; box-shadow: 0 0 22px rgba(115, 195, 178, .4); content: ""; }
.combatant-name { display: block; margin-top: 3px; padding: 3px 5px; color: #f4dfaa; border: 1px solid rgba(226, 196, 121, .3); border-radius: 4px; background: rgba(20, 13, 12, .84); font-family: var(--font-title); font-size: 12px; text-align: center; }
.combatant-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-top: 3px; }
.combatant-bars .track { height: 6px; border: 1px solid rgba(13, 8, 8, .8); background: rgba(0,0,0,.56); overflow: hidden; }
.combatant-bars i { display: block; height: 100%; transition: width .28s ease; }
.combatant-bars .hp i { background: linear-gradient(90deg, #8d261d, #dc6548); }
.combatant-bars .mp i { background: linear-gradient(90deg, #245a56, #6bb5a5); }

.battle-top { position: absolute; left: 14px; right: 14px; top: 14px; z-index: 18; display: flex; justify-content: space-between; gap: 10px; pointer-events: none; }
.round-badge, .battle-objective { padding: 7px 11px; color: #f0d79a; border: 1px solid rgba(224, 193, 119, .36); border-radius: 5px; background: rgba(19, 12, 11, .82); font-size: 10px; }
.battle-objective { color: rgba(241, 221, 178, .72); font-family: var(--font-title); font-size: 13px; }
.battle-log { position: absolute; left: 16px; right: min(410px, 42%); bottom: 17px; z-index: 18; min-height: 124px; max-height: 168px; padding: 11px 13px; color: #ebd8ad; border: 1px solid rgba(226, 196, 121, .38); border-radius: 6px; background: linear-gradient(180deg, rgba(23, 14, 13, .9), rgba(10, 8, 8, .94)); box-shadow: inset 0 0 0 2px rgba(91, 39, 30, .32); overflow: auto; font-size: 12px; }
.battle-log p { margin: 0 0 4px; }
.battle-log p:last-child { margin-bottom: 0; }
.battle-log .damage { color: #f28a65; }
.battle-log .heal { color: #83d2a8; }
.battle-log .system { color: #e8cb77; }
.battle-command { position: absolute; right: 16px; bottom: 17px; z-index: 20; width: min(380px, 40%); min-height: 168px; padding: 11px; border: 1px solid rgba(229, 199, 126, .46); border-radius: 7px; background: linear-gradient(180deg, rgba(37, 21, 18, .94), rgba(15, 10, 10, .96)); box-shadow: inset 0 0 0 3px rgba(100, 40, 30, .32), 0 14px 35px rgba(0,0,0,.38); }
.command-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; color: #e8cf94; font-family: var(--font-title); font-size: 14px; }
.command-title small { color: rgba(237, 218, 178, .55); font: 9px var(--font-ui); }
.command-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.command-button { min-height: 48px; padding: 7px 8px; color: #ead4a3; border: 1px solid rgba(226, 196, 121, .28); border-radius: 5px; background: linear-gradient(180deg, #49271f, #231514); cursor: pointer; text-align: left; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.command-button:hover { border-color: var(--gold); background: linear-gradient(180deg, #753326, #2c1714); transform: translateY(-1px); }
.command-button[disabled] { cursor: not-allowed; opacity: .36; }
.command-button b { display: block; font-family: var(--font-title); font-size: 13px; }
.command-button small { display: block; color: rgba(235, 215, 174, .52); font-size: 9px; }
.target-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-height: 120px; overflow: auto; }
.target-button { min-height: 42px; padding: 6px 8px; color: #f0ddad; border: 1px solid rgba(226, 196, 121, .3); border-radius: 5px; background: #35221d; cursor: pointer; text-align: left; }
.target-button:hover { border-color: var(--gold); background: #5d2c22; }
.target-button small { display: block; color: rgba(236, 216, 176, .56); font-size: 9px; }

.dialogue-layer, .modal-layer { position: fixed; inset: 0; z-index: 160; display: grid; place-items: center; padding: 18px; background: rgba(5, 4, 4, .62); backdrop-filter: blur(5px); }
.dialogue-layer { place-items: end center; padding: 20px 20px 32px; }
.dialogue-box { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 15px; width: min(920px, 100%); min-height: 170px; padding: 13px; border: 2px solid #b89145; border-radius: 8px; background: linear-gradient(90deg, rgba(103, 31, 25, .87), rgba(31, 20, 18, .96) 38%, rgba(19, 12, 12, .98)), #1c1110; box-shadow: inset 0 0 0 4px rgba(38, 20, 17, .8), 0 22px 70px rgba(0,0,0,.54); }
.dialogue-portrait, .modal-portrait { min-height: 142px; border: 1px solid rgba(228, 197, 122, .28); border-radius: 5px; background: radial-gradient(circle at 50% 35%, rgba(225, 197, 126, .18), transparent 44%), linear-gradient(180deg, #3a2b22, #1a1311); overflow: hidden; }
.dialogue-content { position: relative; min-width: 0; padding: 8px 105px 42px 4px; }
.speaker { display: inline-block; margin-bottom: 4px; color: #f5d68f; font-family: var(--font-title); font-size: 18px; }
.dialogue-zh { margin: 0 0 7px; color: #f4e4be; font-family: var(--font-title); font-size: 17px; line-height: 1.65; }
.dialogue-en { margin: 0; color: rgba(235, 220, 187, .64); font-size: 11px; line-height: 1.55; }
.dialogue-next { position: absolute; right: 0; bottom: 0; min-width: 94px; padding: 8px 12px; color: #fff0be; border: 1px solid rgba(230, 199, 122, .42); border-radius: 5px; background: linear-gradient(180deg, #9b3428, #641a16); cursor: pointer; }
.dialogue-next span { color: rgba(255, 240, 190, .55); font-size: 9px; }

.modal-layer { place-items: center; }
.game-modal { width: min(850px, 100%); max-height: min(84vh, 720px); border: 2px solid #b89145; border-radius: 8px; background: radial-gradient(500px 300px at 100% 0, rgba(133, 43, 33, .32), transparent 58%), linear-gradient(180deg, #261716, #130d0d); box-shadow: inset 0 0 0 4px rgba(38, 20, 17, .8), 0 22px 70px rgba(0,0,0,.58); overflow: hidden; }
.game-modal > header, .game-modal > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; border-bottom: 1px solid var(--line); background: rgba(47, 24, 20, .72); }
.game-modal > footer { border-top: 1px solid var(--line); border-bottom: 0; min-height: 56px; }
.game-modal h2 { margin: 0; color: #f2d696; font-family: var(--font-title); font-size: 24px; }
.modal-kicker { display: block; color: rgba(239, 215, 169, .5); font-size: 9px; letter-spacing: .15em; }
.modal-close { display: grid; width: 37px; height: 37px; place-items: center; color: #f1d395; border: 1px solid rgba(226, 196, 121, .34); border-radius: 50%; background: #5e201a; cursor: pointer; font-size: 21px; }
.modal-body { max-height: calc(min(84vh, 720px) - 130px); padding: 14px; overflow: auto; }
.modal-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.modal-card, .quest-item, .item-row, .help-block { padding: 11px; border: 1px solid rgba(226, 196, 121, .22); border-radius: 6px; background: rgba(50, 29, 25, .64); }
.modal-card { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 11px; }
.modal-card h3, .item-row h3, .quest-item h3, .help-block h3 { margin: 0 0 4px; color: #f0d79a; font-family: var(--font-title); font-size: 17px; }
.modal-card p, .item-row p, .quest-item p, .help-block p { margin: 0; color: rgba(235, 217, 181, .66); font-size: 11px; }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; margin-top: 7px; color: rgba(241, 222, 182, .78); font-size: 10px; }
.quest-list, .item-list, .help-list { display: grid; gap: 8px; }
.quest-item.done { border-color: rgba(103, 174, 148, .45); background: rgba(43, 86, 70, .24); }
.quest-item.current { border-color: rgba(231, 197, 114, .55); background: rgba(118, 67, 27, .26); }

.primary-button, .secondary-button, .ghost-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 45px; padding: 10px 17px; border-radius: 5px; cursor: pointer; font-weight: 700; transition: transform .16s ease, filter .16s ease, border-color .16s ease; }
.primary-button { color: #fff1c0; border: 1px solid rgba(255, 229, 162, .34); background: linear-gradient(180deg, #aa3b2d, #671b16); box-shadow: inset 0 0 0 2px rgba(89, 22, 18, .56), 0 8px 22px rgba(0,0,0,.26); }
.secondary-button { color: #f2d99f; border: 1px solid rgba(228, 198, 125, .39); background: linear-gradient(180deg, #3e2722, #211513); }
.ghost-button { color: rgba(242, 218, 165, .74); border: 1px solid rgba(228, 198, 125, .22); background: transparent; }
.primary-button:hover, .secondary-button:hover, .ghost-button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.primary-button span, .secondary-button span, .ghost-button span { color: rgba(255, 242, 201, .54); font-size: 10px; }
.primary-button:disabled, .secondary-button:disabled { cursor: not-allowed; opacity: .38; transform: none; }
.title-screen { position: fixed; inset: 0; z-index: 250; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(390px, .65fr); background: #0d0909; transition: opacity .48s ease, visibility .48s ease; }
.title-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.title-scene { position: relative; overflow: hidden; background: radial-gradient(340px 340px at 67% 18%, rgba(225, 213, 166, .16), transparent 66%), radial-gradient(700px 400px at 10% 90%, rgba(58, 102, 83, .26), transparent 68%), linear-gradient(180deg, #172427, #202b27 45%, #351f1a); }
.title-scene::after { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(13,9,9,.78)); content: ""; }
.title-moon { position: absolute; right: 27%; top: 10%; width: 86px; height: 86px; border-radius: 50%; background: #e8d79c; box-shadow: 0 0 60px rgba(232, 215, 156, .38); }
.title-mountain { position: absolute; bottom: 0; background: #1a2622; clip-path: polygon(0 100%, 0 68%, 17% 38%, 31% 58%, 49% 18%, 68% 62%, 84% 34%, 100% 67%, 100% 100%); }
.title-mountain.m1 { left: -5%; width: 70%; height: 52%; background: #26352f; }
.title-mountain.m2 { left: 25%; width: 75%; height: 43%; background: #1b2925; }
.title-mountain.m3 { left: 50%; width: 58%; height: 35%; background: #111c1b; }
.title-sword { position: absolute; left: 29%; top: 17%; z-index: 4; width: 6px; height: 58%; background: linear-gradient(90deg, #d8cba9, #fff3cf, #998b71); box-shadow: 0 0 25px rgba(244, 230, 188, .28); transform: rotate(28deg); }
.title-sword::before { position: absolute; left: -17px; top: 52%; width: 40px; height: 7px; background: #a47d39; content: ""; }
.title-sword::after { position: absolute; left: -5px; bottom: -28px; width: 16px; height: 34px; background: #512019; content: ""; }
.title-lantern { position: absolute; left: 52%; bottom: 16%; z-index: 7; width: 52px; height: 66px; border: 2px solid #e3be69; border-radius: 15px 15px 22px 22px; background: radial-gradient(circle, #fff0a8, #d98c2f 68%); box-shadow: 0 0 60px rgba(245, 187, 77, .52); }
.title-lantern::before { position: absolute; left: 50%; top: -35px; width: 2px; height: 34px; background: #c7a65c; content: ""; }
.title-panel { position: relative; z-index: 10; display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 5vw, 76px); border-left: 1px solid rgba(226, 196, 121, .28); background: radial-gradient(500px 300px at 100% 0, rgba(130, 41, 32, .28), transparent 58%), linear-gradient(180deg, #1c1211, #0f0b0b); }
.title-kicker { margin-bottom: 12px; color: rgba(236, 207, 141, .68); font-size: 10px; letter-spacing: .17em; text-transform: uppercase; }
.title-panel h1 { margin: 0; color: #f4d38a; font-family: var(--font-title); font-size: clamp(40px, 5vw, 70px); line-height: 1.05; letter-spacing: .08em; text-shadow: 0 4px 18px rgba(0,0,0,.46); }
.title-en { margin: 6px 0 21px; color: #d7ba7a; font: 600 13px var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.title-en.small { margin: -11px 0 24px; color: rgba(235, 217, 177, .48); font-size: 10px; line-height: 1.55; text-transform: none; }
.title-lead { margin: 0; color: rgba(244, 228, 195, .72); font-family: var(--font-title); font-size: 15px; line-height: 1.8; }
.title-buttons { display: grid; gap: 9px; margin-top: 26px; }
.title-legal { margin: 20px 0 0; color: rgba(232, 212, 171, .38); font-size: 9px; }
.toast { position: fixed; left: 50%; bottom: 22px; z-index: 320; max-width: calc(100% - 30px); padding: 10px 15px; color: #fff0c3; border: 1px solid rgba(226, 196, 121, .34); border-radius: 6px; background: rgba(34, 20, 18, .96); box-shadow: 0 12px 34px rgba(0,0,0,.4); font-size: 11px; opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: opacity .22s ease, transform .22s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.share-canvas { display: none; }
.noscript { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 400; padding: 14px; color: white; background: var(--red-deep); text-align: center; }
.is-hidden { display: none !important; }

@keyframes screen-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sprite-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes enemy-bob { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.02); } }
@keyframes marker-pulse { 0%,100% { transform: translateY(0) scale(1); filter: brightness(.9); } 50% { transform: translateY(-5px) scale(1.06); filter: brightness(1.2); } }
@keyframes water-glint { 0%,100% { opacity: .25; transform: translateX(-4px); } 50% { opacity: .72; transform: translateX(5px); } }
@keyframes mist-shift { from { transform: translateX(-2%); opacity: .58; } to { transform: translateX(2%); opacity: .9; } }
@keyframes zone-title { 0% { opacity: 0; transform: translate(-50%, -15px); } 18%,70% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 8px); } }
@keyframes battle-mist { from { transform: translateX(0); opacity: .4; } 50% { opacity: .8; } to { transform: translateX(140vw); opacity: .2; } }
@keyframes hit-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
@keyframes attack-lunge { 0%,100% { transform: translateX(0); } 45% { transform: translateX(22px); } }

@media (max-width: 1000px) {
  .world-controls { grid-template-columns: minmax(180px, .9fr) minmax(330px, 1.5fr) 130px; }
  .party-strip { flex-wrap: wrap; max-height: 88px; overflow: auto; }
  .party-chip { flex: 1 1 44%; }
  .battle-log { right: 42%; }
  .battle-command { width: 39%; }
  .title-screen { grid-template-columns: 1fr 420px; }
}

@media (max-width: 760px) {
  .game-app { width: min(100% - 12px, 680px); padding-top: 6px; }
  .topbar { min-height: 53px; padding: 7px 9px; }
  .brand-seal { width: 38px; height: 38px; font-size: 20px; }
  .brand b { font-size: 13px; }
  .brand small, .save-note { display: none; }
  .game-frame, .screen, .battle-scene { min-height: 680px; }
  .world-hud { left: 8px; right: 8px; top: 8px; }
  .location-card { min-width: 132px; padding: 7px 9px; }
  .location-card b, .quest-card b { font-size: 13px; }
  .quest-card { min-width: 148px; }
  .world-viewport { min-height: 470px; }
  .world-controls { grid-template-columns: 1fr 116px; min-height: 246px; padding: 8px; }
  .party-strip { grid-column: 1 / -1; min-height: 42px; flex-wrap: nowrap; overflow: hidden; }
  .party-chip { flex: 1 1 0; min-width: 0; padding-left: 31px; }
  .party-chip .mini-avatar { width: 24px; height: 29px; }
  .classic-menu { grid-template-columns: repeat(3, 1fr); }
  .classic-menu button { min-height: 67px; }
  .classic-menu small { display: none; }
  .mobile-pad { width: 112px; grid-template-rows: repeat(3, 34px); }
  .battle-scene { min-height: 680px; }
  .enemy-layer { left: 1%; right: 1%; top: 11%; height: 34%; }
  .party-layer { left: 1%; right: 1%; bottom: 31%; height: 33%; }
  .combatant { width: 32%; }
  .combatant .sprite { height: 78px; }
  .combatant.enemy .sprite { height: 72px; }
  .battle-log { left: 8px; right: 8px; bottom: 190px; min-height: 84px; max-height: 104px; }
  .battle-command { left: 8px; right: 8px; bottom: 8px; width: auto; min-height: 174px; }
  .dialogue-layer { padding: 8px 8px 14px; }
  .dialogue-box { grid-template-columns: 92px minmax(0, 1fr); gap: 9px; min-height: 178px; padding: 9px; }
  .dialogue-portrait { min-height: 155px; }
  .dialogue-content { padding: 4px 0 42px; }
  .dialogue-zh { font-size: 14px; }
  .dialogue-en { font-size: 10px; }
  .dialogue-next { right: 0; bottom: 0; }
  .modal-card-grid { grid-template-columns: 1fr; }
  .game-modal { max-height: 88vh; }
  .modal-body { max-height: calc(88vh - 130px); }
  .title-screen { grid-template-columns: 1fr; }
  .title-scene { position: absolute; inset: 0; opacity: .8; }
  .title-scene::after { background: linear-gradient(180deg, rgba(13,9,9,.18), rgba(13,9,9,.92) 62%); }
  .title-panel { align-self: end; min-height: 62vh; padding: 28px 22px 34px; border-left: 0; border-top: 1px solid rgba(226, 196, 121, .26); background: rgba(20, 13, 12, .88); }
  .title-panel h1 { font-size: clamp(36px, 11vw, 54px); }
}

@media (max-width: 430px) {
  .location-card { min-width: 115px; }
  .quest-card { min-width: 126px; }
  .location-card small, .quest-card small { display: none; }
  .classic-menu span { width: 27px; height: 27px; font-size: 15px; }
  .classic-menu b { font-size: 10px; }
  .mobile-pad { width: 104px; }
  .combatant-name { font-size: 10px; }
  .battle-top { left: 7px; right: 7px; top: 7px; }
  .round-badge, .battle-objective { padding: 5px 7px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* v2 original celestial-array visual override */
.title-sky-ring {
  position: absolute;
  left: 7%;
  top: 7%;
  width: min(58vw, 680px);
  aspect-ratio: 1;
  border: 1px solid rgba(206, 184, 115, .26);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(206, 184, 115, .035), 0 0 0 96px rgba(86, 151, 133, .027), inset 0 0 80px rgba(98, 178, 155, .09);
  animation: sky-ring-spin 38s linear infinite;
}

.title-sky-ring::before,
.title-sky-ring::after {
  position: absolute;
  inset: 9%;
  border: 1px dashed rgba(224, 201, 132, .22);
  border-radius: 50%;
  content: "";
}

.title-sky-ring::after { inset: 21%; border-style: solid; box-shadow: inset 0 0 70px rgba(112, 183, 160, .08); }

.title-constellation { position: absolute; width: 190px; height: 130px; opacity: .7; }
.title-constellation::before {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #f0dfa8 0 2px, transparent 3px), radial-gradient(circle, #e8d294 0 2px, transparent 3px), radial-gradient(circle, #b9ddcd 0 2px, transparent 3px);
  background-position: 5% 20%, 53% 8%, 90% 67%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
  filter: drop-shadow(0 0 6px rgba(238, 218, 153, .5));
}
.title-constellation::after {
  position: absolute;
  inset: 24% 8% 28% 11%;
  border-top: 1px solid rgba(230, 211, 153, .34);
  border-right: 1px solid rgba(230, 211, 153, .3);
  content: "";
  transform: rotate(18deg) skewX(-18deg);
}
.title-constellation.c1 { right: 11%; top: 10%; }
.title-constellation.c2 { left: 13%; bottom: 23%; transform: scale(.76) rotate(-18deg); }
.title-constellation.c3 { right: 22%; bottom: 32%; transform: scale(.55) rotate(24deg); }

.title-element-wheel {
  position: absolute;
  left: 17%;
  top: 29%;
  z-index: 6;
  width: 330px;
  height: 330px;
  border: 2px solid rgba(225, 196, 115, .34);
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(231, 207, 137, .12) 0 1deg, transparent 1deg 72deg),
    radial-gradient(circle, rgba(56, 113, 96, .18), transparent 62%);
  box-shadow: inset 0 0 0 48px rgba(17, 40, 37, .42), 0 0 70px rgba(84, 160, 139, .12);
}

.title-element-wheel span {
  position: absolute;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: #f1d897;
  font-family: var(--font-title);
  font-size: 24px;
  border: 1px solid rgba(226, 197, 121, .38);
  border-radius: 50%;
  background: rgba(26, 48, 42, .92);
  box-shadow: 0 0 20px rgba(226, 197, 121, .12);
}
.title-element-wheel span:nth-child(1) { left: 50%; top: -24px; margin-left: -24px; }
.title-element-wheel span:nth-child(2) { right: -15px; top: 91px; }
.title-element-wheel span:nth-child(3) { right: 52px; bottom: -9px; }
.title-element-wheel span:nth-child(4) { left: 52px; bottom: -9px; }
.title-element-wheel span:nth-child(5) { left: -15px; top: 91px; }

.title-lantern {
  left: 20.5%;
  top: 42%;
  bottom: auto;
  width: 94px;
  height: 94px;
  border: 2px solid #e3be69;
  border-radius: 50%;
  background: radial-gradient(circle, #fff0a8, #d98c2f 58%, rgba(91, 49, 26, .96) 72%);
  box-shadow: 0 0 70px rgba(245, 187, 77, .5);
}
.title-lantern::before {
  left: -68px;
  top: 44px;
  width: 230px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(241, 211, 132, .62), transparent);
}
.title-lantern::after {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #4c2718;
  font-family: var(--font-title);
  font-size: 43px;
  content: "阵";
  transform: translate(-50%, -54%);
}

.world-viewport {
  background:
    radial-gradient(circle at 50% 46%, rgba(63, 132, 112, .18), transparent 42%),
    radial-gradient(circle at 10% 10%, rgba(236, 214, 143, .07), transparent 24%),
    radial-gradient(circle at 84% 22%, rgba(236, 214, 143, .08), transparent 22%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 78px, rgba(225, 196, 115, .035) 79px 80px),
    linear-gradient(145deg, #111c1d, #17302c 46%, #101818);
}

.world-viewport::before {
  position: absolute;
  inset: 4% 9%;
  z-index: 1;
  border: 1px solid rgba(224, 193, 119, .12);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.tile.grass,
.tile.grass:nth-child(3n) {
  background:
    radial-gradient(circle at 28% 25%, rgba(238, 216, 149, .16) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 72% 68%, rgba(137, 204, 180, .12) 0 1.5px, transparent 2.5px),
    linear-gradient(145deg, #17312e, #122725 70%, #18322f);
  box-shadow: inset 0 0 0 1px rgba(119, 184, 161, .045);
}

.tile.path,
.tile.bridge {
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(224, 192, 112, .28) 18% 20%, transparent 20% 80%, rgba(224, 192, 112, .26) 80% 82%, transparent 82%),
    linear-gradient(180deg, #3c594c, #29443c);
  box-shadow: inset 0 0 0 1px rgba(183, 207, 167, .09), inset 0 0 16px rgba(218, 190, 117, .04);
}

.tile.bridge {
  background:
    repeating-linear-gradient(90deg, rgba(199, 161, 75, .34) 0 3px, transparent 3px 14px),
    linear-gradient(180deg, #3b5549, #273e37);
  border-color: rgba(204, 169, 85, .38);
}

.tile.water {
  background:
    repeating-linear-gradient(0deg, rgba(236, 213, 142, .13) 0 1px, transparent 1px 18px),
    radial-gradient(circle at 50% 50%, rgba(65, 157, 142, .32), transparent 62%),
    linear-gradient(180deg, #142e33, #10242a);
}

.tile.water::after { border-color: rgba(145, 219, 200, .3); }

.tile.tree { background: radial-gradient(circle at 50% 42%, rgba(220, 190, 112, .12), transparent 55%), #102825; }
.tile.tree::before {
  left: 14px;
  top: 5px;
  width: 28px;
  height: 46px;
  border: 1px solid rgba(229, 200, 122, .44);
  border-radius: 13px 13px 5px 5px;
  background: linear-gradient(180deg, #33584c, #1b3833);
  box-shadow: inset 0 0 12px rgba(238, 213, 145, .08), 0 0 18px rgba(58, 143, 119, .12);
  content: "干";
  color: #e5cd8d;
  font-family: var(--font-title);
  font-size: 18px;
  text-align: center;
  line-height: 46px;
}

.tile.house {
  border-color: rgba(218, 185, 105, .36);
  background:
    radial-gradient(circle at 50% 50%, rgba(229, 197, 115, .19), transparent 53%),
    linear-gradient(145deg, #29463f, #18342f);
  box-shadow: inset 0 0 0 4px rgba(224, 192, 114, .06);
}
.tile.house::before {
  left: 8px;
  top: 8px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(228, 197, 119, .36);
  border-radius: 50%;
  background: conic-gradient(from 45deg, rgba(225, 193, 112, .08), transparent, rgba(225, 193, 112, .1), transparent);
  transform: none;
}
.tile.house::after { left: 25px; bottom: 25px; width: 6px; height: 6px; border: 0; border-radius: 50%; background: #e9cd82; box-shadow: 0 0 10px #e9cd82; }

.tile.shrine {
  background: radial-gradient(circle at 50% 50%, rgba(245, 220, 144, .27), transparent 56%), linear-gradient(145deg, #23453d, #122a27);
}
.tile.shrine::before {
  left: 10px;
  top: 7px;
  width: 36px;
  height: 36px;
  border-color: rgba(238, 211, 134, .75);
  border-radius: 50%;
  background: conic-gradient(#d5a64f, #3d7466, #d5a64f, #3d7466, #d5a64f);
  box-shadow: 0 0 20px rgba(226, 193, 103, .4);
}
.tile.gate { background: repeating-conic-gradient(from 0deg, rgba(158, 52, 43, .12) 0 1deg, transparent 1deg 28deg), #160f12; }

@keyframes sky-ring-spin { to { transform: rotate(360deg); } }

/* Component sizing and modal layering */
.modal-layer { z-index: 300; }
.dialogue-layer { z-index: 280; }
.mini-sprite,
.portrait-sprite {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.portrait-sprite { max-height: 180px; }
/* 游戏内角色本体精灵图（8方向/动作帧）由 characterBody() 渲染 */
.sprite-img {
  display: block;
  object-fit: contain;
  object-position: center bottom;
  max-width: 100%;
}
/* 装备换装：品阶发光指示（2轻甲/3重甲/4传说） */
.sprite-img[data-tier="2"] { filter: drop-shadow(0 5px 4px rgba(0,0,0,.28)) drop-shadow(0 0 6px rgba(170,210,255,.55)); }
.sprite-img[data-tier="3"] { filter: drop-shadow(0 5px 4px rgba(0,0,0,.28)) drop-shadow(0 0 8px rgba(224,162,92,.65)); }
.sprite-img[data-tier="4"] { filter: drop-shadow(0 5px 4px rgba(0,0,0,.28)) drop-shadow(0 0 12px rgba(255,213,126,.85)); }
/* 装备品阶行（队伍弹窗内） */
.equip-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(214,180,122,.2); }
.equip-label { font-size: 12px; color: rgba(242,228,206,.65); }
.equip-cycle { padding: 4px 10px; font-size: 12px; }
.secondary-button.on { background: rgba(122, 102, 217, .8); border-color: rgba(255, 230, 170, .5); }
.combatant-sprite {
  display: grid;
  min-height: 108px;
  place-items: end center;
}
.combatant.enemy .combatant-sprite { min-height: 100px; }
.mark-strip { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
.ten-mark {
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  padding: 0 5px;
  place-items: center;
  color: #fff0b6;
  border: 1px solid rgba(234, 202, 121, .52);
  border-radius: 50%;
  background: #813024;
  font-family: var(--font-title);
  font-size: 13px;
  box-shadow: 0 0 10px rgba(224, 177, 78, .16);
}
.ten-mark.empty { color: rgba(237, 217, 176, .45); border-color: rgba(226, 196, 121, .18); background: rgba(40, 27, 24, .8); }
.entity { border: 0; background: transparent; padding: 0; }
.entity:focus-visible { outline: 2px solid #ead37f; outline-offset: -2px; border-radius: 8px; }
.help-list .item-row { margin-top: 7px; }
@media (max-width: 760px) {
  .combatant-sprite { min-height: 78px; }
  .combatant.enemy .combatant-sprite { min-height: 72px; }
  .portrait-sprite { max-height: 150px; }
}

[hidden] { display: none !important; }

.title-lang { display: flex; gap: 6px; margin-top: 18px; }
.title-lang button { min-width: 76px; padding: 8px 12px; color: rgba(243,220,165,.72); border: 1px solid rgba(229,199,124,.28); border-radius: 5px; background: rgba(49,28,24,.65); cursor: pointer; }
.title-lang button[aria-pressed="true"] { color: #fff0c0; border-color: rgba(235,204,126,.58); background: #7a281f; }

/* Merged card-duel core: mana, hand cost, frontline units and spells */
.card-screen { background: radial-gradient(circle at 50% 50%, rgba(68, 132, 113, .18), transparent 45%), #101817; }
.card-duel { min-height: 660px; padding: 13px; background: repeating-radial-gradient(circle at 50% 52%, transparent 0 68px, rgba(226, 198, 123, .035) 69px 70px); }
.card-duel-top { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.card-combatant { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; gap: 9px; align-items: center; padding: 8px 10px; border: 1px solid rgba(227, 197, 121, .32); border-radius: 7px; background: rgba(25, 17, 16, .88); }
.card-combatant.player-card-hero { background: linear-gradient(90deg, rgba(36, 78, 66, .72), rgba(25, 17, 16, .9)); }
.card-combatant.enemy-card-hero { background: linear-gradient(90deg, rgba(104, 35, 30, .72), rgba(25, 17, 16, .9)); }
.card-avatar { display: grid; width: 44px; height: 44px; place-items: center; color: #f6dc9c; border: 1px solid rgba(233, 201, 122, .46); border-radius: 50%; background: #62221c; font-family: var(--font-title); font-size: 22px; }
.card-combatant b { display: block; color: #f2d693; font-family: var(--font-title); font-size: 15px; }
.card-combatant small { display: block; color: rgba(238, 220, 181, .55); font-size: 9px; }
.card-combatant strong { color: #f4d98f; font-size: 24px; }
.card-combatant > span:last-child { color: #79c6b0; font-size: 12px; }
.card-turn { padding: 7px 10px; color: #f1d595; border: 1px solid rgba(229, 199, 124, .35); border-radius: 5px; background: #231714; text-align: center; font-size: 11px; }
.card-field { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; min-height: 128px; padding: 8px; border-radius: 8px; }
.enemy-card-field { background: rgba(105, 35, 29, .13); }
.player-card-field { background: rgba(43, 104, 84, .15); }
.card-slot { position: relative; display: grid; min-height: 112px; place-items: center; border: 1px dashed rgba(227, 198, 123, .2); border-radius: 7px; background: rgba(19, 25, 23, .48); cursor: pointer; }
.card-slot.playable { border-color: rgba(109, 205, 173, .65); background: rgba(43, 108, 86, .18); }
.card-slot.targetable { border-color: rgba(238, 159, 113, .72); background: rgba(123, 50, 35, .18); }
.card-unit { position: absolute; inset: 3px; display: grid; grid-template-rows: 1fr auto auto; padding: 5px; border: 1px solid rgba(236, 204, 126, .46); border-radius: 6px; background: linear-gradient(180deg, #284d43, #172923); cursor: pointer; }
.card-unit.spell-unit { background: linear-gradient(180deg, #62352a, #2f1b18); }
.card-unit.ready { box-shadow: 0 0 0 2px rgba(241, 207, 115, .45), 0 0 18px rgba(241, 207, 115, .15); }
.card-unit.selected { transform: translateY(-3px); box-shadow: 0 0 0 2px rgba(123, 219, 188, .72), 0 0 18px rgba(123, 219, 188, .18); }
.card-art { display: grid; place-items: center; min-height: 49px; color: #f5dfa8; font-family: var(--font-title); font-size: 31px; border-radius: 4px; background: radial-gradient(circle, rgba(233, 200, 117, .18), transparent 65%); }
.card-unit-name { overflow: hidden; color: #f1d99c; font-size: 10px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.card-unit-stats { display: flex; justify-content: space-between; color: #fff0bd; font-size: 12px; font-weight: 700; }
.card-midline { display: flex; align-items: center; justify-content: center; min-height: 29px; color: rgba(239, 219, 178, .58); font-size: 10px; }
.card-midline::before, .card-midline::after { width: 22%; height: 1px; margin: 0 10px; background: linear-gradient(90deg, transparent, rgba(227, 198, 123, .32)); content: ""; }
.card-midline::after { background: linear-gradient(90deg, rgba(227, 198, 123, .32), transparent); }
.card-hand { display: flex; gap: 8px; min-height: 137px; padding: 8px 7px; overflow-x: auto; border: 1px solid rgba(227, 197, 121, .24); border-radius: 8px; background: rgba(14, 20, 19, .72); }
.hand-card { position: relative; flex: 0 0 112px; min-height: 120px; padding: 7px 6px 6px; color: #eed69d; border: 1px solid rgba(231, 199, 121, .42); border-radius: 7px; background: linear-gradient(180deg, #355e51, #1d2925); cursor: pointer; text-align: center; }
.hand-card.spell { background: linear-gradient(180deg, #69382b, #2e1b18); }
.hand-card.selected { transform: translateY(-5px); border-color: #f0d483; box-shadow: 0 0 18px rgba(238, 210, 127, .22); }
.hand-card.overcost { opacity: .42; cursor: not-allowed; }
.hand-cost { position: absolute; left: 5px; top: 4px; display: grid; width: 23px; height: 23px; place-items: center; color: #fff3c5; border-radius: 50%; background: #326f65; font-weight: 800; }
.hand-card.spell .hand-cost { background: #9a392b; }
.hand-art { margin-top: 16px; color: #ffe5a0; font-family: var(--font-title); font-size: 32px; }
.hand-name { display: block; overflow: hidden; font-family: var(--font-title); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.hand-stats { display: flex; justify-content: center; gap: 7px; margin-top: 4px; color: #fff0b8; font-size: 11px; font-weight: 800; }
.card-actions { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; align-items: stretch; margin-top: 8px; }
.card-log { max-height: 68px; padding: 7px 9px; color: rgba(235, 218, 179, .72); border: 1px solid rgba(226, 196, 121, .2); border-radius: 5px; background: rgba(12, 16, 15, .72); overflow: auto; font-size: 10px; }
.card-log p { margin: 0 0 3px; }
.card-float { position: absolute; z-index: 30; color: #ffab75; font-weight: 800; pointer-events: none; animation: card-float .8s ease-out forwards; }
@media (max-width: 760px) {
  .card-duel { min-height: 680px; padding: 7px; }
  .card-duel-top { grid-template-columns: 1fr; gap: 5px; }
  .card-turn { order: -1; }
  .card-combatant { grid-template-columns: 36px minmax(0, 1fr) auto auto; padding: 5px 7px; }
  .card-avatar { width: 34px; height: 34px; font-size: 17px; }
  .card-field { min-height: 91px; gap: 4px; padding: 5px; }
  .card-slot { min-height: 82px; }
  .card-art { min-height: 31px; font-size: 21px; }
  .card-unit-name { font-size: 8px; }
  .card-unit-stats { font-size: 10px; }
  .card-hand { min-height: 119px; }
  .hand-card { flex-basis: 91px; min-height: 103px; }
  .hand-art { margin-top: 14px; font-size: 25px; }
  .card-actions { grid-template-columns: 1fr 1fr; }
  .card-log { grid-column: 1 / -1; }
}
@keyframes card-float { from { opacity: 1; transform: translate(-50%, -10px); } to { opacity: 0; transform: translate(-50%, -55px); } }

/* User-provided ink-wash assets, resized for web delivery */
.title-scene {
  background-image: linear-gradient(90deg, rgba(11, 20, 20, .18), rgba(31, 17, 15, .32)), url("assets/backgrounds/bg-title.jpg");
  background-size: cover;
  background-position: center;
}
.world-viewport {
  background-image: linear-gradient(180deg, rgba(8, 22, 21, .55), rgba(16, 28, 24, .68)), url("assets/backgrounds/bg-world-upper.jpg");
  background-size: cover;
  background-position: center;
}
.world-viewport::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: linear-gradient(180deg, transparent 58%, rgba(8, 16, 15, .36)), url("assets/ui-texture.jpg");
  background-size: cover;
  background-blend-mode: soft-light;
  content: "";
  opacity: .18;
  pointer-events: none;
}
.battle-scene {
  background-image: linear-gradient(180deg, rgba(9, 17, 17, .56), rgba(27, 20, 16, .64)), url("assets/backgrounds/bg-battle.jpg");
  background-size: cover;
  background-position: center;
}
.card-screen {
  background-image: linear-gradient(180deg, rgba(8, 17, 16, .62), rgba(24, 17, 16, .74)), url("assets/backgrounds/bg-card.jpg");
  background-size: cover;
  background-position: center;
}
.dialogue-box,
.game-modal {
  background-image: linear-gradient(90deg, rgba(55, 27, 22, .88), rgba(18, 13, 13, .95)), url("assets/ui-texture.jpg");
  background-size: cover;
  background-blend-mode: multiply;
}
.item-row {
  background-image: linear-gradient(rgba(40, 25, 22, .82), rgba(40, 25, 22, .82)), url("assets/item-atlas.jpg");
  background-size: 180px auto;
  background-position: right center;
  background-blend-mode: multiply;
}
.portrait-photo {
  width: 100%;
  height: 100%;
  min-height: 150px;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  filter: saturate(.86) contrast(1.03);
}
.modal-portrait .portrait-photo { min-height: 122px; border-radius: 4px; }
.dialogue-portrait .portrait-photo { min-height: 100%; border-radius: 4px; }
.title-lantern { opacity: .78; }
.world-map { opacity: .94; }
@media (max-width: 760px) {
  .portrait-photo { min-height: 142px; }
  .modal-portrait .portrait-photo { min-height: 140px; }
}

.guide-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  padding: 5px 9px;
  color: #fff0b8;
  border: 1px solid rgba(237, 205, 126, .42);
  border-radius: 5px;
  background: linear-gradient(180deg, #883027, #531813);
  pointer-events: auto;
  cursor: pointer;
  font-size: 10px;
}
.guide-button span { color: rgba(255, 238, 188, .55); font-size: 8px; }
.card-actions { grid-template-columns: auto auto auto minmax(0, 1fr); }
@media (max-width: 760px) {
  .card-actions { grid-template-columns: 1fr 1fr; }
  .card-log { grid-column: 1 / -1; }
}

.tutorial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.tutorial-step { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 11px; border: 1px solid rgba(227, 197, 121, .28); border-radius: 7px; background: linear-gradient(145deg, rgba(51, 31, 26, .8), rgba(24, 16, 15, .88)); }
.tutorial-step > span { display: grid; width: 38px; height: 38px; place-items: center; color: #fff0b5; border: 1px solid rgba(235, 203, 126, .5); border-radius: 50%; background: #7c2b22; font-family: var(--font-title); font-size: 18px; }
.tutorial-step h3 { margin: 0 0 3px; color: #f0d79a; font-family: var(--font-title); font-size: 15px; }
.tutorial-step p { margin: 0; color: rgba(237, 219, 181, .68); font-size: 10px; line-height: 1.55; }
@media (max-width: 760px) { .tutorial-grid { grid-template-columns: 1fr; } }

.tutorial-step .tutorial-en { margin-top: 5px; color: rgba(235, 216, 177, .5); font-family: var(--font-ui); font-size: 9px; }



.world-viewport.zone-lower {
  background-image: linear-gradient(180deg, rgba(8, 22, 21, .52), rgba(16, 28, 24, .68)), url("assets/backgrounds/bg-world-lower.jpg");
}
.modal-layer.ending .game-modal {
  background-image: linear-gradient(180deg, rgba(20, 13, 13, .82), rgba(13, 9, 9, .94)), url("assets/backgrounds/bg-victory.jpg");
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
}

/* ============================================================
   v2.2 POLISH LAYER — public-domain celestial + ink-gold visual
   Backgrounds: NASA public domain. Characters/textures: original.
   ============================================================ */

/* Unify the tint across every screen so the UI reads as an ink-shadowed
   night rather than a raw astrophotography crop. */
.title-scene {
  background-image:
    radial-gradient(60% 55% at 68% 16%, rgba(238, 226, 190, .12), transparent 60%),
    linear-gradient(105deg, rgba(6, 13, 16, .58), rgba(12, 15, 16, .5) 52%, rgba(24, 10, 9, .34)),
    url("assets/backgrounds/bg-title.jpg");
  background-size: cover;
  background-position: center;
}
.world-viewport {
  background-image:
    radial-gradient(circle at 50% 46%, rgba(20, 60, 52, .28), transparent 46%),
    linear-gradient(rgba(6, 18, 17, .66), rgba(6, 18, 17, .5), rgba(18, 30, 26, .6)),
    url("assets/backgrounds/bg-world-upper.jpg");
  background-size: cover;
  background-position: center;
}
.world-viewport.zone-lower {
  background-image:
    radial-gradient(circle at 50% 46%, rgba(20, 60, 52, .28), transparent 46%),
    linear-gradient(rgba(6, 18, 17, .66), rgba(6, 18, 17, .5), rgba(18, 30, 26, .6)),
    url("assets/backgrounds/bg-world-lower.jpg");
  background-size: cover;
  background-position: center;
}
.battle-scene {
  background-image:
    radial-gradient(52% 46% at 66% 52%, rgba(150, 200, 216, .1), transparent 62%),
    linear-gradient(rgba(5, 9, 14, .64), rgba(5, 9, 14, .46) 46%, rgba(15, 9, 7, .7)),
    url("assets/backgrounds/bg-battle.jpg");
  background-size: cover;
  background-position: center;
}
.card-screen {
  background-image:
    radial-gradient(55% 48% at 50% 50%, rgba(170, 220, 200, .1), transparent 58%),
    linear-gradient(rgba(5, 12, 14, .7), rgba(5, 12, 14, .52), rgba(22, 11, 9, .7)),
    url("assets/backgrounds/bg-card.jpg");
  background-size: cover;
  background-position: center;
}

/* Whole-app xuan-paper grain for a unifying, less "digital" finish. */
body::after {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background-image: url("assets/ui-texture.jpg");
  background-size: 140px;
  content: "";
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: soft-light;
}

/* Title typography: tighter, more refined english, small-caps accent. */
.title-kicker { letter-spacing: .24em; }
.title-panel h1 { letter-spacing: .1em; text-shadow: 0 0 18px rgba(206, 156, 74, .16), 0 6px 22px rgba(0,0,0,.5); }
.title-en { letter-spacing: .14em; }

/* Five-element wheel — sequential glow suggests the generation cycle. */
.title-element-wheel span { will-change: transform, box-shadow, filter; }
@keyframes element-cycle {
  0%,  16% { box-shadow: 0 0 26px rgba(243, 214, 133, .6), 0 0 44px rgba(243, 198, 110, .34); filter: brightness(1.28); transform: scale(1.07); }
  30%, 100% { box-shadow: 0 0 12px rgba(226, 197, 121, .14); filter: brightness(1); transform: scale(1); }
}
.title-element-wheel span:nth-child(1) { animation: element-cycle 5s linear infinite; }
.title-element-wheel span:nth-child(2) { animation: element-cycle 5s 1s linear infinite; }
.title-element-wheel span:nth-child(3) { animation: element-cycle 5s 2s linear infinite; }
.title-element-wheel span:nth-child(4) { animation: element-cycle 5s 3s linear infinite; }
.title-element-wheel span:nth-child(5) { animation: element-cycle 5s 4s linear infinite; }

/* Buttons — warm golden sheen on hover, gathered glow when focused. */
.primary-button:hover,
.secondary-button:hover,
.ghost-button:hover { box-shadow: 0 0 26px rgba(212, 165, 116, .35), 0 8px 22px rgba(0,0,0,.28); }
.title-buttons .primary-button { box-shadow: inset 0 0 0 2px rgba(255, 219, 150, .18), 0 8px 22px rgba(0,0,0,.3); }

/* Menu roundels breathe on hover to invite interaction. */
.classic-menu button:hover span { box-shadow: 0 0 16px rgba(243, 208, 130, .4); transform: rotate(-6deg) scale(1.08); }

/* Softer, thicker focus ring inside dark surfaces. */
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(240, 209, 128, .82);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(240, 209, 128, .14);
}

/* Location/quest cards gently lift so HUD feels tactile. */
.location-card,
.quest-card,
.round-badge,
.battle-objective { transition: background .22s ease, box-shadow .22s ease; }
.location-card:hover,
.quest-card:hover { box-shadow: 0 10px 28px rgba(0,0,0,.3), inset 0 0 0 2px rgba(204, 177, 90, .28); }

/* Dialogue portrait gets a soft halo so the ink portrait blends in. */
.portrait-photo,
.dialogue-portrait .portrait-photo,
.modal-portrait .portrait-photo {
  filter: saturate(.9) contrast(1.02) brightness(1);
  transition: filter .25s ease, transform .25s ease;
}
.dialogue-box:hover .portrait-photo { filter: saturate(1) contrast(1.03) brightness(1.05); transform: scale(1.015); }

/* ================================================================
   v2.3 ATELIER ÉTHER — "瑶池暮月" ethereal 唯美 overlay
   Twilight mauve sky + jade watercolour 青绿 + warm-gold horizon.
   All assets remain public-domain / original. Zero network calls.
   ================================================================ */
:root {
  --ink: #221a2c;
  --paper: #f4efe4;
  --paper-deep: #d7cdbd;
  --black: #151223;
  --black-2: #1c1930;
  --black-3: #2a2447;
  --red: #7a5fd0;
  --red-bright: #6f62cf;
  --red-deep: #3a2f66;
  --gold: #d6a35e;
  --gold-light: #f5d9a8;
  --jade: #4fb49b;
  --jade-light: #8ee0c8;
  --mist: rgba(225, 231, 248, .20);
  --line: rgba(214, 180, 122, .30);
  --line-strong: rgba(244, 201, 122, .56);
  --shadow: 0 24px 70px rgba(9, 7, 30, .46);
}

/* Twilight aurora shell for the whole page. */
body {
  background:
    radial-gradient(1300px 760px at 18% -12%, rgba(148, 121, 226, .40), transparent 62%),
    radial-gradient(1000px 620px at 96% 2%, rgba(79, 188, 158, .26), transparent 58%),
    radial-gradient(1500px 820px at 50% 118%, rgba(246, 208, 138, .15), transparent 58%),
    linear-gradient(180deg, #18142f, #242040 46%, #1e2a31);
}
body::before {
  background-image:
    linear-gradient(rgba(255, 240, 210, .020) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 240, 210, .020) 1px, transparent 1px);
}

/* ---------- Floating ember / light-dust particles ---------- */
.ember-field {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}
.ember-field i {
  position: absolute;
  bottom: -2vh;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8e2, rgba(255, 214, 110, .92) 38%, transparent 72%);
  box-shadow: 0 0 12px 2px rgba(255, 218, 124, .5);
  opacity: 0;
  animation: ember-rise linear infinite;
}
@keyframes ember-rise {
  0%   { transform: translate3d(0, 0, 0) scale(.35); opacity: 0; }
  12%  { opacity: .9; }
  82%  { opacity: .5; }
  100% { transform: translate3d(var(--drift, 46px), -88vh, 0) scale(1.12); opacity: 0; }
}
.ember-field i:nth-child(1)  { left: 6%;  --drift: 40px; width: 8px; height: 8px;  animation-duration: 13s; animation-delay: .4s; }
.ember-field i:nth-child(2)  { left: 14%; --drift: -30px; width: 5px; height: 5px; animation-duration: 16s; animation-delay: 3.2s; }
.ember-field i:nth-child(3)  { left: 23%; --drift: 55px; width: 7px; height: 7px; animation-duration: 11s; animation-delay: 1.2s; }
.ember-field i:nth-child(4)  { left: 31%; --drift: -44px; width: 4px; height: 4px; animation-duration: 18s; animation-delay: 5s; }
.ember-field i:nth-child(5)  { left: 40%; --drift: 38px; width: 9px; height: 9px; animation-duration: 12s; animation-delay: 2.1s; }
.ember-field i:nth-child(6)  { left: 48%; --drift: -52px; width: 5px; height: 5px; animation-duration: 15s; animation-delay: 7s; }
.ember-field i:nth-child(7)  { left: 57%; --drift: 46px; width: 6px; height: 6px; animation-duration: 10s; animation-delay: .9s; }
.ember-field i:nth-child(8)  { left: 66%; --drift: -36px; width: 8px; height: 8px; animation-duration: 17s; animation-delay: 4.4s; }
.ember-field i:nth-child(9)  { left: 74%; --drift: 50px; width: 5px; height: 5px; animation-duration: 14s; animation-delay: 6.1s; }
.ember-field i:nth-child(10) { left: 83%; --drift: -28px; width: 7px; height: 7px; animation-duration: 12s; animation-delay: 2.8s; }
.ember-field i:nth-child(11) { left: 91%; --drift: 42px; width: 4px; height: 4px; animation-duration: 19s; animation-delay: 8.3s; }
.ember-field i:nth-child(12) { left: 11%; --drift: 60px; width: 6px; height: 6px; animation-duration: 13s; animation-delay: 5.6s; }
.ember-field i:nth-child(13) { left: 34%; --drift: -38px; width: 5px; height: 5px; animation-duration: 16s; animation-delay: 9s; }
.ember-field i:nth-child(14) { left: 53%; --drift: 34px; width: 10px; height: 10px; animation-duration: 11s; animation-delay: 3.8s; }
.ember-field i:nth-child(15) { left: 69%; --drift: -46px; width: 5px; height: 5px; animation-duration: 18s; animation-delay: 1.6s; }
.ember-field i:nth-child(16) { left: 87%; --drift: 44px; width: 7px; height: 7px; animation-duration: 14s; animation-delay: 7.4s; }
.ember-field i:nth-child(17) { left: 24%; --drift: -34px; width: 5px; height: 5px; animation-duration: 15s; animation-delay: 0s; }
.ember-field i:nth-child(18) { left: 45%; --drift: 52px; width: 6px; height: 6px; animation-duration: 12s; animation-delay: 6.8s; }
.ember-field i:nth-child(19) { left: 62%; --drift: -40px; width: 4px; height: 4px; animation-duration: 17s; animation-delay: 4s; }
.ember-field i:nth-child(20) { left: 78%; --drift: 48px; width: 8px; height: 8px; animation-duration: 13s; animation-delay: 2.5s; }

/* ---------- Title screen : twilight azure field + aurora ---------- */
.title-screen { background: #141024; }
.title-scene {
  background:
    radial-gradient(60% 55% at 68% 14%, rgba(150, 118, 226, .30), transparent 62%),
    radial-gradient(46% 52% at 20% 86%, rgba(79, 184, 156, .26), transparent 60%),
    radial-gradient(70% 46% at 52% 100%, rgba(247, 208, 140, .30), transparent 66%),
    linear-gradient(205deg, #1b1640, #332a5c 44%, #23474e 78%, #17384a);
}
.title-scene::after {
  background:
    linear-gradient(90deg, rgba(20, 12, 40, .10), rgba(18, 14, 44, .38)),
    radial-gradient(120% 80% at 50% 100%, rgba(22, 16, 48, .12), transparent 60%);
}
.aurora {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(42% 58% at 16% 6%, rgba(152, 122, 226, .40), transparent 60%),
    radial-gradient(46% 64% at 80% 10%, rgba(84, 200, 168, .30), transparent 60%),
    radial-gradient(64% 70% at 54% 102%, rgba(250, 208, 142, .24), transparent 62%);
  filter: blur(7px);
  mix-blend-mode: screen;
  animation: aurora-swim 17s ease-in-out infinite alternate;
}
@keyframes aurora-swim {
  0%   { opacity: .68; transform: translateY(0) scale(1); }
  100% { opacity: 1;   transform: translateY(-16px) scale(1.05); }
}
.title-sky-ring {
  border-color: rgba(214, 182, 132, .34);
  box-shadow: 0 0 0 42px rgba(140, 120, 216, .05), 0 0 0 96px rgba(79, 184, 156, .045), inset 0 0 90px rgba(96, 196, 168, .16);
  opacity: .9;
}
.title-sky-ring::before,
.title-sky-ring::after { border-color: rgba(222, 190, 140, .24); }
.title-constellation::before {
  background-image:
    radial-gradient(circle, #ffeed0 0 2px, transparent 3px),
    radial-gradient(circle, #f2dcb0 0 2px, transparent 3px),
    radial-gradient(circle, #bfe8d8 0 2px, transparent 3px);
  filter: drop-shadow(0 0 8px rgba(255, 224, 166, .6));
}
.title-constellation::after { border-color: rgba(242, 216, 168, .40); }

/* The five-element wheel : luminous jade nodes on soft gold array. */
.title-element-wheel {
  border-color: rgba(238, 205, 138, .40);
  background:
    repeating-conic-gradient(from 0deg, rgba(247, 220, 158, .14) 0 1deg, transparent 1deg 72deg),
    radial-gradient(circle, rgba(96, 196, 168, .22), transparent 62%);
  box-shadow:
    inset 0 0 0 48px rgba(20, 16, 48, .46),
    0 0 60px rgba(96, 200, 172, .20),
    0 0 120px rgba(247, 208, 140, .12);
}
.title-element-wheel span {
  color: #fff0c8;
  border: 1px solid rgba(240, 208, 138, .55);
  background: radial-gradient(circle at 32% 28%, rgba(96, 206, 178, .88), rgba(38, 34, 84, .94) 78%);
  box-shadow: 0 0 22px rgba(255, 220, 140, .34), inset 0 0 10px rgba(214, 224, 244, .18);
}

/* Title lantern : warm floating lamp, softened halo. */
.title-lantern { box-shadow: 0 0 84px rgba(250, 196, 108, .6); }

/* Right panel becomes translucent twilight glass with gold hairline. */
.title-panel {
  border-left: 1px solid rgba(214, 180, 122, .30);
  background:
    radial-gradient(500px 320px at 100% 0, rgba(132, 106, 226, .22), transparent 60%),
    linear-gradient(180deg, rgba(30, 24, 64, .72), rgba(16, 13, 42, .86));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.title-panel h1 {
  color: #f6dfae;
  text-shadow: 0 0 22px rgba(255, 214, 130, .34), 0 0 52px rgba(156, 128, 230, .28), 0 6px 22px rgba(0, 0, 0, .4);
}
.title-kicker,
.title-panel .title-en.small { color: rgba(242, 228, 206, .66); }
.title-legal { color: rgba(238, 226, 206, .60); }

/* ---------- World : jade watercolour dream ---------- */
.world-screen { background: linear-gradient(180deg, #1b2138, #1e3037 55%, #1a2a2c); }
.world-viewport {
  background:
    radial-gradient(circle at 50% 44%, rgba(84, 190, 160, .22), transparent 44%),
    radial-gradient(circle at 8% 12%, rgba(236, 214, 150, .10), transparent 26%),
    radial-gradient(circle at 88% 24%, rgba(160, 134, 232, .12), transparent 26%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 78px, rgba(222, 190, 130, .045) 79px 80px),
    linear-gradient(150deg, #141a3a, #1d3c47 48%, #16323a);
}
.mist-layer {
  background:
    linear-gradient(90deg, rgba(190, 210, 235, .18), transparent 28%, rgba(200, 220, 235, .16) 66%, transparent),
    linear-gradient(0deg, rgba(180, 210, 205, .22), transparent 30%);
}
.vignette { box-shadow: inset 0 0 110px rgba(14, 12, 44, .72), inset 0 -90px 120px rgba(10, 14, 34, .55); }
.location-card, .quest-card { box-shadow: inset 0 0 0 1px rgba(214, 182, 132, .20), 0 10px 28px rgba(6, 5, 24, .34); }

/* ---------- Battle : twilight sky + golden horizon over jade mists ---------- */
.battle-scene {
  background:
    radial-gradient(620px 300px at 66% 26%, rgba(156, 126, 230, .34), transparent 66%),
    radial-gradient(560px 300px at 20% 10%, rgba(96, 200, 168, .22), transparent 64%),
    radial-gradient(900px 320px at 50% 88%, rgba(250, 208, 140, .40), transparent 60%),
    linear-gradient(180deg, #1c173c, #2c2b66 78%, #233a42);
}
.battle-scene::before { background: rgba(244, 201, 122, .30); }
.battle-sky span { background: rgba(216, 224, 246, .10); }
.battle-ground {
  background:
    radial-gradient(ellipse at 23% 46%, rgba(18, 16, 48, .30), transparent 34%),
    radial-gradient(ellipse at 76% 56%, rgba(18, 16, 48, .28), transparent 36%),
    repeating-linear-gradient(175deg, transparent 0 30px, rgba(208, 224, 226, .06) 31px 32px),
    linear-gradient(180deg, #3d4b56, #27404a 70%, #1d2c34);
}
.battle-ember { z-index: 4; }

/* ---------- Card duel : porcelain glass arena ---------- */
.card-screen {
  background:
    radial-gradient(620px 620px at 50% 44%, rgba(92, 196, 168, .20), transparent 60%),
    radial-gradient(500px 360px at 12% 10%, rgba(156, 128, 232, .16), transparent 55%),
    linear-gradient(180deg, #1a1738, #203039);
}
.card-duel {
  background:
    repeating-radial-gradient(circle at 50% 52%, transparent 0 68px, rgba(240, 208, 140, .06) 69px 70px),
    radial-gradient(circle at 50% 12%, rgba(250, 210, 140, .08), transparent 55%);
}

/* ---------- Glass UI panels : dim twilight glass + gold edge ---------- */
.topbar {
  border-color: rgba(214, 182, 122, .26);
  background: linear-gradient(90deg, rgba(52, 44, 108, .66), rgba(24, 21, 56, .82) 40%, rgba(22, 28, 44, .82)), #17152c;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow: 0 14px 36px rgba(4, 3, 20, .36), inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.classic-menu button {
  color: #ead9ae;
  border-color: rgba(214, 182, 122, .26);
  background: linear-gradient(180deg, rgba(54, 46, 112, .62), rgba(24, 21, 54, .78));
  box-shadow: inset 0 0 0 2px rgba(10, 9, 30, .30);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.classic-menu button:hover { border-color: rgba(244, 201, 122, .55); background: linear-gradient(180deg, rgba(74, 62, 140, .72), rgba(28, 26, 64, .84)); }
.classic-menu span {
  color: #fff0ca;
  border-color: rgba(240, 208, 138, .48);
  background: radial-gradient(circle at 32% 28%, rgba(88, 186, 160, .86), rgba(52, 40, 116, .9) 80%);
  box-shadow: 0 0 14px rgba(120, 206, 180, .30);
}
button[data-panel] span { background: radial-gradient(circle at 32% 28%, rgba(88, 186, 160, .86), rgba(52, 40, 116, .9) 80%); }
.seal-avatar {
  border-color: rgba(240, 208, 138, .5);
  background: radial-gradient(circle at 32% 26%, rgba(92, 196, 168, .9), rgba(50, 40, 110, .92));
}

.dialogue-box {
  border-color: rgba(222, 190, 132, .5);
  background: linear-gradient(90deg, rgba(64, 50, 128, .82), rgba(30, 24, 66, .90) 40%, rgba(20, 20, 40, .92)), #23204a;
  box-shadow: inset 0 0 0 4px rgba(24, 18, 58, .72), 0 4px 0 0 rgba(244, 201, 122, .5), 0 26px 80px rgba(4, 3, 20, .6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.game-modal {
  border-color: rgba(222, 190, 132, .5);
  background: radial-gradient(520px 320px at 100% 0, rgba(130, 104, 226, .26), transparent 58%), linear-gradient(180deg, #241f4c, #161236);
  box-shadow: inset 0 0 0 4px rgba(28, 22, 66, .72), 0 4px 0 0 rgba(244, 201, 122, .5), 0 26px 80px rgba(4, 3, 20, .6);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
.game-modal > header, .game-modal > footer { background: rgba(48, 38, 100, .62); }
.game-modal h2, .game-modal .modal-kicker { text-shadow: 0 0 18px rgba(150, 122, 230, .4); }
.dialogue-layer, .modal-layer { background: rgba(10, 8, 30, .55); }

/* ---------- Buttons : lavender-indigo glass, gold glow ---------- */
.primary-button {
  color: #fff3d0;
  border: 1px solid rgba(255, 230, 170, .5);
  background: linear-gradient(180deg, #7a66d9, #4c3ca8 70%, #3c2f88);
  box-shadow: 0 0 0 2px rgba(255, 220, 150, .18) inset, 0 8px 26px rgba(90, 70, 180, .45), 0 8px 22px rgba(4, 3, 20, .30);
  text-shadow: 0 0 12px rgba(255, 226, 160, .5);
}
.secondary-button {
  color: #f0e2bb;
  border: 1px solid rgba(222, 190, 132, .45);
  background: linear-gradient(180deg, rgba(58, 50, 116, .72), rgba(28, 24, 60, .84));
  box-shadow: inset 0 0 0 2px rgba(10, 9, 30, .30);
}
.ghost-button {
  color: rgba(240, 226, 196, .82);
  border: 1px solid rgba(222, 190, 132, .30);
  background: rgba(34, 28, 70, .30);
}
.primary-button:hover, .secondary-button:hover, .ghost-button:hover {
  box-shadow: 0 0 30px rgba(132, 108, 226, .5), 0 10px 26px rgba(4, 3, 20, .32);
}
.title-buttons .primary-button { box-shadow: 0 0 0 2px rgba(255, 224, 160, .20) inset, 0 10px 30px rgba(96, 76, 190, .5), 0 8px 22px rgba(4, 3, 20, .3); }

/* Softer, ethereal focus ring. */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(196, 168, 252, .85);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(196, 168, 252, .16);
}

/* Location / quest cards : jade glow. */
.location-card:hover, .quest-card:hover {
  box-shadow: 0 10px 30px rgba(6, 5, 26, .4), inset 0 0 0 2px rgba(120, 196, 172, .5), 0 0 26px rgba(120, 200, 176, .24);
}

/* ================================================================
   v2.4 SEASONAL REALMS — 四季阵域
   The 30×22 board splits into four seasonal realms whose painted
   backdrop + weather auto-switch as the party moves. Art is
   original (UE5/PBR direction), so no third-party assets.
   上左落樱 · 上右春暖 · 下左秋风 · 下右大雪
   ================================================================ */

/* Four quadrant concept-art backdrops underneath the game tiles. */
.world-map {
  background-image:
    url("assets/backgrounds/zone-blossom.jpg"),
    url("assets/backgrounds/zone-warm.jpg"),
    url("assets/backgrounds/zone-autumn.jpg"),
    url("assets/backgrounds/zone-snow.jpg");
  background-size: 50% 50%, 50% 50%, 50% 50%, 50% 50%;
  background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%;
  background-repeat: no-repeat;
}

/* Let the painted backdrops show through translucent tiles. */
.world-viewport .tile.grass { background: linear-gradient(135deg, rgba(20, 44, 28, .18), rgba(14, 36, 24, .12)); }
.world-viewport .tile.grass:nth-child(3n) { background: radial-gradient(circle at 40% 30%, rgba(226, 240, 200, .10) 0 2px, transparent 3px), linear-gradient(135deg, rgba(20, 44, 28, .20), rgba(14, 36, 24, .13)); }
.world-viewport .tile.path, .world-viewport .tile.bridge { background: linear-gradient(180deg, rgba(124, 104, 72, .30), rgba(98, 82, 56, .26)); box-shadow: inset 0 0 0 1px rgba(64, 44, 28, .22); }
.world-viewport .tile.water { background: repeating-linear-gradient(0deg, rgba(214, 244, 232, .12) 0 2px, transparent 2px 12px), linear-gradient(180deg, rgba(44, 96, 102, .58), rgba(32, 74, 82, .52)); }
.world-viewport .tile.bridge { background: repeating-linear-gradient(90deg, rgba(92, 68, 44, .5) 0 9px, rgba(124, 98, 62, .5) 9px 14px); }
.world-viewport .tile.tree { background: rgba(10, 26, 18, .30); }
.world-viewport .tile.tree::before { opacity: .5; }
.world-viewport .tile.gate, .world-viewport .tile.house, .world-viewport .tile.shrine { opacity: .92; }

/* Seasonal colour veil sweeps across the board on move. */
.season-veil {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  mix-blend-mode: soft-light;
  transition: background .6s ease;
}
.zone-blossom .season-veil { background: radial-gradient(72% 82% at 50% 42%, rgba(255, 182, 215, .22), transparent 72%); }
.zone-warm    .season-veil { background: radial-gradient(72% 82% at 50% 42%, rgba(255, 208, 140, .24), transparent 72%); }
.zone-autumn  .season-veil { background: radial-gradient(72% 82% at 50% 42%, rgba(226, 116, 52, .24), transparent 72%); }
.zone-snow    .season-veil { background: radial-gradient(72% 82% at 50% 42%, rgba(208, 232, 250, .26), transparent 72%); }

/* Weather particles : petals / light motes / leaves / snow. */
.weather-layer { position: absolute; inset: 0; z-index: 13; pointer-events: none; overflow: hidden; }
.weather-layer i {
  position: absolute;
  top: -3vh;
  opacity: 0;
  animation: weather-fly linear infinite;
}
@keyframes weather-fly {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  8%   { opacity: var(--o, .75); }
  86%  { opacity: var(--o, .75); }
  100% { transform: translate3d(var(--sway, 26px), 106vh, 0); opacity: 0; }
}
.weather-layer i:nth-child(1) { left: 5%;  animation-duration: 8s;  animation-delay: .0s; --sway: 30px; }
.weather-layer i:nth-child(2) { left: 12%; animation-duration: 11s; animation-delay: 1.4s; --sway: -26px; }
.weather-layer i:nth-child(3) { left: 21%; animation-duration: 9s;  animation-delay: 2.2s; --sway: 34px; }
.weather-layer i:nth-child(4) { left: 30%; animation-duration: 12s; animation-delay: .7s;  --sway: -20px; }
.weather-layer i:nth-child(5) { left: 38%; animation-duration: 8.5s; animation-delay: 3.1s; --sway: 28px; }
.weather-layer i:nth-child(6) { left: 47%; animation-duration: 10s;  animation-delay: 1.9s; --sway: -32px; }
.weather-layer i:nth-child(7) { left: 56%; animation-duration: 9.5s; animation-delay: 4.0s; --sway: 24px; }
.weather-layer i:nth-child(8) { left: 64%; animation-duration: 13s;  animation-delay: .4s;  --sway: -30px; }
.weather-layer i:nth-child(9) { left: 72%; animation-duration: 8s;   animation-delay: 2.6s; --sway: 38px; }
.weather-layer i:nth-child(10){ left: 80%; animation-duration: 11.5s;animation-delay: 5.0s; --sway: -24px; }
.weather-layer i:nth-child(11){ left: 88%; animation-duration: 9s;   animation-delay: 1.1s; --sway: 30px; }
.weather-layer i:nth-child(12){ left: 95%; animation-duration: 12.5s;animation-delay: 3.4s; --sway: -28px; }

/* Realm-specific particle look. Blossom petals + slow pink drift. */
.zone-blossom .weather-layer i {
  width: 7px; height: 10px; border-radius: 60% 40% 60% 40%;
  background: linear-gradient(135deg, #ffddee, #f3a9c8);
  box-shadow: 0 0 8px rgba(247, 172, 202, .5);
}
/* Warm realm : soft golden light motes / butterfly glints. */
.zone-warm .weather-layer i {
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle, #fff8d8, #ffd66b);
  box-shadow: 0 0 12px rgba(255, 214, 107, .8);
}
/* Autumn realm : drifting red-orange leaves. */
.zone-autumn .weather-layer i {
  width: 8px; height: 12px; border-radius: 40% 60% 40% 60%;
  background: linear-gradient(135deg, #ffd9a8, #e07a2e);
  box-shadow: 0 0 8px rgba(230, 128, 60, .5);
}
/* Snow realm : quiet white flakes. */
.zone-snow .weather-layer i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff; --o: .85;
  box-shadow: 0 0 8px rgba(255, 255, 255, .9);
}

/* ===== 国风 UI + 地图氛围优化 ===== */

/* 弱化网格：柔和 tile 接缝 */
.world-viewport .tile.path, .world-viewport .tile.bridge, .world-viewport .tile.water {
  box-shadow: inset 0 0 0 1px rgba(40, 30, 20, .12);
}
.world-viewport .tile.house { border-color: rgba(106, 84, 56, .55); }

/* 增强暗角与晨雾 */
.vignette { box-shadow: inset 0 0 140px rgba(4, 6, 6, .84), inset 0 -100px 130px rgba(6, 6, 4, .6); }
.mist-layer { opacity: .9; }

/* 秋叶更明显 */
.zone-autumn .weather-layer i { width: 11px; height: 16px; }

/* 国风按钮（木纹+金描边） */
.classic-menu button {
  border-radius: 11px;
  border: 1px solid rgba(224, 189, 116, .42);
  background: linear-gradient(165deg, rgba(118, 74, 40, .9), rgba(52, 32, 23, .94) 60%, rgba(38, 23, 18, .95));
  box-shadow: inset 0 1px 0 rgba(255, 226, 168, .16), 0 4px 10px rgba(0,0,0,.35);
}
.classic-menu button:hover { border-color: #ecc672; filter: brightness(1.12); }
.classic-menu span {
  border-radius: 9px;
  border: 1px solid rgba(240, 211, 140, .5);
  background: radial-gradient(circle at 35% 30%, #a9623c, #6d2f20 72%);
  box-shadow: inset 0 1px 2px rgba(255, 235, 180, .35);
}

/* 菜单抽屉 */
.menu-drawer {
  position: absolute; right: 154px; bottom: 6px; z-index: 26;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
  padding: 8px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(54, 33, 25, .97), rgba(28, 18, 15, .97));
  border: 1px solid rgba(224, 189, 116, .45);
  box-shadow: 0 12px 32px rgba(0,0,0,.55);
}
.menu-drawer[hidden] { display: none; }
.menu-drawer button {
  min-height: 58px; padding: 6px; color: #e6cf9d; border-radius: 9px;
  border: 1px solid rgba(219, 187, 113, .32);
  background: linear-gradient(180deg, rgba(80, 49, 32, .82), rgba(40, 24, 19, .92));
  cursor: pointer;
}
.menu-drawer button:hover { border-color: #ecc672; }
.menu-drawer span { display: grid; width: 26px; height: 26px; margin: 0 auto 3px; place-items: center; color: #ffe8ac; font-size: 14px; border: 1px solid rgba(233, 204, 133, .45); border-radius: 50%; background: #79261f; }
.menu-drawer b { display: block; font-size: 11px; }
.menu-drawer small { display: block; color: rgba(236, 216, 175, .5); font-size: 8px; }

/* 血条灵气流光 */
.party-chip .hp-track, .party-chip .mp-track { position: relative; overflow: hidden; }
.party-chip .hp-track::after {
  position: absolute; inset: 0; content: "";
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.4) 48%, transparent 76%);
  animation: hp-shimmer 2.6s ease-in-out infinite; pointer-events: none;
}
@keyframes hp-shimmer { 0% { transform: translateX(-110%); } 100% { transform: translateX(110%); } }

/* 地图名牌匾 + 任务卷轴 */
.location-card, .quest-card {
  border-radius: 10px;
  border: 1px solid rgba(224, 189, 116, .46);
  background: linear-gradient(180deg, rgba(40, 25, 19, .92), rgba(22, 14, 12, .94));
  box-shadow: inset 0 0 0 2px rgba(120, 88, 46, .3), 0 8px 24px rgba(0,0,0,.42);
}

/* 方向键罗盘（透明化） */
.mobile-pad { opacity: .5; transition: opacity .25s ease; }
.mobile-pad:hover, .mobile-pad:active { opacity: .95; }
.mobile-pad button {
  border-radius: 50%;
  border: 1px solid rgba(230, 199, 122, .34);
  background: radial-gradient(circle at 35% 30%, rgba(118, 78, 46, .58), rgba(28, 18, 15, .72));
}

/* ===== 修复：地图网格方块 + 阵域边界硬拼接 ===== */

/* ① 去掉草地格子的描边网格线 + 抹平棋盘格，让草地连续 */
.world-viewport .tile.grass { box-shadow: inset 0 0 0 1px rgba(20, 34, 24, .04); }
.world-viewport .tile.grass:nth-child(3n) { background: linear-gradient(135deg, rgba(22, 44, 30, .16), rgba(14, 36, 26, .11)); }
.world-viewport .tile.path, .world-viewport .tile.bridge { box-shadow: inset 0 0 0 1px rgba(64, 44, 28, .10); }

/* ② 四阵域背景交界处叠加柔雾过渡，消除硬拼接 */
.world-map {
  background-image:
    linear-gradient(90deg, transparent 42%, rgba(214, 222, 214, .30) 50%, transparent 58%),
    linear-gradient(0deg, transparent 42%, rgba(214, 222, 214, .25) 50%, transparent 58%),
    url("assets/backgrounds/zone-blossom.jpg"),
    url("assets/backgrounds/zone-warm.jpg"),
    url("assets/backgrounds/zone-autumn.jpg"),
    url("assets/backgrounds/zone-snow.jpg");
  background-size: 100% 100%, 100% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%;
  background-position: center, center, 0% 0%, 100% 0%, 0% 100%, 100% 100%;
  background-repeat: no-repeat;
}