:root {
  --ink: #17344c;
  --ink-soft: #60788b;
  --paper: #f4f0e7;
  --paper-deep: #e9e4d8;
  --blue: #1e98b7;
  --blue-deep: #0a6689;
  --blue-pale: #d8f2f2;
  --gold: #d7a447;
  --red: #d26745;
  --mist: rgba(148, 165, 178, .71);
  --line: rgba(23, 52, 76, .14);
  --shadow: 0 20px 45px rgba(31, 69, 88, .15);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 1100px;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans SC", sans-serif;
  letter-spacing: 0;
}

button { font: inherit; }

.app-shell {
  width: min(1320px, calc(100% - 72px));
  margin: 0 auto;
  padding: 30px 0 22px;
}

.topbar, .hero-copy {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topbar { border-bottom: 1px solid var(--line); padding-bottom: 22px; }

.brand-lockup { display: flex; align-items: center; gap: 12px; }

.brand-mark {
  position: relative;
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  transform: rotate(-12deg);
}

.brand-mark span { position: absolute; width: 24px; height: 5px; border-radius: 50%; background: var(--blue-deep); }
.brand-mark span:nth-child(1) { transform: translateY(-8px) rotate(22deg); background: var(--gold); }
.brand-mark span:nth-child(2) { transform: translateY(0) rotate(-14deg); }
.brand-mark span:nth-child(3) { transform: translateY(8px) rotate(22deg); background: var(--red); }

.kicker, .eyebrow, .section-label {
  margin: 0 0 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-deep);
}

.brand-lockup h1 { margin: 0; font-family: "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", "SimSun", "宋体", serif; font-size: 20px; line-height: 1; font-weight: 900; }
.session-chip { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 12px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #46b98d; box-shadow: 0 0 0 4px rgba(70,185,141,.14); }

.hero-copy { align-items: end; padding: 42px 0 25px; gap: 30px; }
.hero-copy h2 { margin: 0 0 15px; font-family: "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", "SimSun", "宋体", serif; font-size: clamp(31px, 4.3vw, 58px); line-height: 1.13; letter-spacing: -.03em; font-weight: 900; }
.hero-copy h2 em { color: var(--blue-deep); font-style: normal; }
.intro { max-width: 570px; margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.75; }
.stat-block { width: 220px; padding: 0 0 2px 26px; border-left: 1px solid var(--line); }
.stat-label { color: var(--ink-soft); font-size: 11px; }
.stat-number { margin: 5px 0 0; font-family: "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", "SimSun", "宋体", serif; font-size: 52px; line-height: 1; font-weight: 900; color: var(--blue-deep); }
.status-line { display: flex; gap: 8px; align-items: center; margin: 8px 0 13px; font-size: 11px; color: var(--ink-soft); }
.status-line span:first-child { color: var(--red); font-weight: 700; }
.status-separator { color: var(--line); }
.meter { height: 5px; overflow: hidden; background: rgba(23,52,76,.1); border-radius: 10px; }
.meter span { display: block; width: 100%; height: 100%; background: var(--red); transform-origin: left; transition: transform .4s ease, background .4s ease; }

.playfield-wrap { margin-top: 2px; }
.playfield { position: relative; height: 600px; overflow: hidden; outline: none; background: #72b9de; border: 1px solid rgba(23,52,76,.18); box-shadow: var(--shadow); isolation: isolate; }
.playfield:focus-visible { box-shadow: 0 0 0 3px rgba(30,152,183,.35), var(--shadow); }

.postcard-image, .mist-layer, .particle-layer { position: absolute; inset: 0; }
.postcard-image { overflow: hidden; background: #5db2d0 url('jingzhou-map.png') center / cover no-repeat; }
.postcard-image > * { display: none; }
.map-scene, .level-scene { position:absolute; inset:0; transition:opacity .45s ease, transform .7s ease; }
.map-scene { background:#e9e4d2 url('jingzhou-map.png') center / 100% 100% no-repeat; opacity:1; transform:scale(1); z-index:4; }
.map-scene.inactive { opacity:0; pointer-events:none; transform:scale(1.12); }
.level-scene { opacity:0; pointer-events:none; transform:scale(.84); z-index:5; overflow:hidden; }
.level-scene.active { opacity:1; pointer-events:auto; transform:scale(1); }
.level-scene.complete-view .core, .level-scene.complete-view .field-hint { opacity:0; pointer-events:none; }
.level-background { position:absolute; inset:0; background-position:center; background-size:cover; background-repeat:no-repeat; }
.level-header { position:absolute; top:16px; left:50%; transform:translateX(-50%); z-index:10; display:flex; align-items:center; gap:18px; padding:8px 14px; background:rgba(247,245,232,.82); border:1px solid rgba(23,52,76,.15); color:var(--ink); box-shadow:0 8px 20px rgba(23,52,76,.12); font-size:11px; white-space:nowrap; }
.level-header strong { font-family:"Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", "SimSun", "宋体", serif; font-size:18px; }
.level-header span:last-child { color:var(--ink-soft); }
.map-mist { position:absolute; inset:0; z-index:1; background:rgba(224,229,224,.9); opacity:1; mix-blend-mode:normal; backdrop-filter:blur(3px); pointer-events:none; }
.cleared-zone { position:absolute; inset:0; z-index:2; opacity:0; pointer-events:none; background:url('jingzhou-map.png') center / 100% 100% no-repeat; clip-path:ellipse(var(--rx) var(--ry) at var(--x) var(--y)); filter:saturate(1.16) contrast(1.07); transition:opacity .75s ease; }
.cleared-zone.visible { opacity:1; }
.map-instruction { position:absolute; left:50%; bottom:15px; transform:translateX(-50%); padding:7px 13px; color:var(--ink); background:rgba(250,249,237,.82); font-size:11px; box-shadow:0 5px 14px rgba(23,52,76,.13); }
.map-marker { position:absolute; left:var(--x); top:var(--y); z-index:3; display:flex; align-items:center; gap:6px; padding:4px 7px; border:1px solid rgba(112,77,38,.45); background:rgba(250,247,231,.9); color:var(--ink); cursor:pointer; transform:translate(-8px,-50%); box-shadow:0 6px 13px rgba(55,48,35,.16); }
.map-marker:hover:not(.locked) { transform:translate(-8px,-50%) scale(1.04); }
.map-marker.locked { cursor:not-allowed; filter:grayscale(.6); opacity:.62; }
.marker-pin { color:#b45445; font-size:16px; line-height:1; }
.marker-label { display:none; }
.marker-status { display:block; color:var(--ink-soft); font-size:9px; }
.map-marker.complete { border-color:#3f9b7e; background:rgba(239,250,241,.92); }
.map-marker.complete .marker-pin { color:#3f9b7e; }
.sky-glow { position: absolute; inset: 0 0 37%; background: radial-gradient(circle at 79% 10%, rgba(255,245,196,.98) 0 7%, rgba(255,245,196,.22) 18%, transparent 41%), linear-gradient(160deg, rgba(255,255,255,.17), transparent 42%); }
.sun-disc { position: absolute; top: 9%; right: 16%; width: 105px; aspect-ratio: 1; border-radius: 50%; background: rgba(255,251,208,.78); filter: blur(2px); box-shadow: 0 0 90px 30px rgba(255,238,159,.35); }
.distant-hills { position: absolute; left: -5%; right: -5%; bottom: 38%; height: 27%; background: #3c8c9e; clip-path: polygon(0 78%, 13% 42%, 24% 70%, 36% 26%, 49% 62%, 61% 19%, 74% 66%, 87% 35%, 100% 64%, 100% 100%, 0 100%); opacity: .72; }
.distant-hills::after { content:""; position:absolute; inset: 15% 0 0; background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.18) 43%, transparent 47%); }
.city-wall { position: absolute; left: 10%; right: 7%; bottom: 29%; height: 28%; background: #af9b78; clip-path: polygon(0 50%, 9% 42%, 26% 57%, 44% 45%, 65% 67%, 79% 44%, 100% 55%, 100% 100%, 0 100%); filter: drop-shadow(0 7px 5px rgba(40,63,65,.2)); }
.city-wall::before { content:""; position:absolute; left: 3%; right: 0; top: 8%; height: 14%; background: repeating-linear-gradient(90deg, #d3c18f 0 13px, transparent 13px 28px); }
.watchtower { position: absolute; bottom: 45%; width: 7%; height: 82%; background: linear-gradient(90deg, #79614e, #c3975d 48%, #5a4d44 49% 60%, #9c7650); clip-path: polygon(29% 16%, 71% 16%, 77% 100%, 23% 100%); }
.watchtower::before { content:""; position:absolute; top:-16%; left:-17%; width: 134%; height: 20%; background: #40383a; clip-path: polygon(0 100%, 15% 28%, 50% 0, 85% 28%, 100% 100%); }
.tower-a { left: 27%; transform: scale(1.05); }
.tower-b { right: 23%; transform: scale(.63); opacity: .85; }
.wall-gate { position: absolute; left: 45%; bottom: 0; width: 10%; height: 35%; background: #554c4a; border-radius: 50% 50% 0 0; }
.river { position:absolute; inset: 58% -4% -12%; background: linear-gradient(155deg, #67c1d6, #168aa8 44%, #4fc2d0); clip-path: polygon(0 14%, 16% 0, 33% 23%, 49% 4%, 63% 19%, 77% 0, 100% 22%, 100% 100%, 0 100%); }
.river::before { content:""; position:absolute; inset: 14% 0; background: repeating-linear-gradient(170deg, transparent 0 20px, rgba(255,255,255,.2) 21px 23px, transparent 24px 44px); opacity: .78; }
.river-shine { position:absolute; left: 33%; bottom: 11%; width: 34%; height: 15%; background: linear-gradient(120deg, transparent 0 42%, rgba(255,255,255,.36) 47%, transparent 54%); transform: skewX(-24deg); }
.bridge { position:absolute; right: 4%; bottom: 9%; width: 27%; height: 13%; border-top: 6px solid #dfd3ae; border-radius: 50%; transform: rotate(-5deg); filter: drop-shadow(0 2px 1px rgba(23,52,76,.25)); }
.bridge i { display:block; position:absolute; bottom:-23px; width: 8px; height: 34px; border-radius: 0 0 8px 8px; background:#d9cb9b; }
.bridge i:nth-child(1){left:15%;}.bridge i:nth-child(2){left:38%;}.bridge i:nth-child(3){left:61%;}.bridge i:nth-child(4){left:84%;}
.foreground-reeds { position:absolute; left:-3%; right:-3%; bottom:-2%; height: 20%; background: linear-gradient(176deg, transparent 30%, #4b976c 31%); clip-path: polygon(0 48%, 11% 29%, 21% 50%, 32% 18%, 46% 50%, 57% 21%, 69% 43%, 81% 19%, 93% 46%, 100% 25%, 100% 100%, 0 100%); }
.foreground-reeds::after { content:""; position:absolute; inset: 26% 0 0; background: radial-gradient(ellipse at 16% 60%, #e9c85d 0 2%, transparent 3%), radial-gradient(ellipse at 30% 40%, #cb7c7a 0 2.5%, transparent 3%), radial-gradient(ellipse at 42% 70%, #efe4b5 0 2%, transparent 3%), radial-gradient(ellipse at 75% 55%, #ebc46b 0 2.5%, transparent 3%); }

.mist-layer { background: rgba(224,229,224,.94); opacity: 1; mix-blend-mode: normal; backdrop-filter: blur(3px); transition: opacity .7s ease, background .7s ease; z-index: 2; }
.mist-layer::before, .mist-layer::after { content:""; position:absolute; border-radius: 50%; filter: blur(34px); background: rgba(245,246,238,.88); }
.mist-layer::before { width: 45%; height: 62%; top: 3%; left: -6%; }
.mist-layer::after { width: 52%; height: 62%; right: -8%; bottom: 3%; }
.particle-layer { z-index: 4; }
.particle { position:absolute; width: 8px; height: 8px; border-radius: 50%; background: #303b40; border: 1px solid rgba(17,27,31,.7); box-shadow: 0 0 0 3px rgba(32,44,49,.12), 0 3px 8px rgba(20,42,49,.25); transform: translate(-50%,-50%); }
.particle::after { content:""; position:absolute; inset:1px; border-radius:inherit; background: radial-gradient(circle at 30% 25%, #8b9697, #202a2e); }
.particle.kind-2 { width: 8px; height: 8px; background:#303b40; }
.particle.kind-2::after { background: radial-gradient(circle at 30% 25%, #8b9697, #202a2e); }
.particle.absorbing { animation: absorb .38s ease-in forwards; }
@keyframes absorb { to { transform: translate(-50%,-50%) scale(.1); opacity: 0; } }
.clean-burst { position:absolute; width:7px; height:7px; margin:-3.5px; border-radius:50%; background:#b8f5fb; box-shadow:0 0 10px #79e2ee; pointer-events:none; z-index: 6; animation: cleanBurst .85s ease-out forwards; }
@keyframes cleanBurst { from { opacity:.95; transform:translate(0,0) scale(1); } to { opacity:0; transform:translate(var(--dx), var(--dy)) scale(.18); } }
.core { position:absolute; z-index: 7; width: 50px; height: 50px; transform: translate(-50%,-50%); pointer-events:none; transition: width .5s ease, height .5s ease; }
.core.rise-2 { width: 58px; height: 58px; }
.core.rise-3 { width: 68px; height: 68px; }
.core-ring { position:absolute; inset: 0; border-radius:50%; border: 1px solid rgba(202,252,255,.76); transform: scale(.9); opacity:.8; }
.ring-outer { border-style: dashed; animation: ringTurn 11s linear infinite; }
.ring-inner { inset: 11%; border-color: rgba(255,255,255,.8); box-shadow: 0 0 22px rgba(128,232,240,.5); }
.core.rise-2 .ring-outer { inset:-7%; border-color: rgba(215,242,230,.75); }
.core.rise-3 .ring-outer { inset:-16%; border-color: rgba(255,235,170,.82); }
@keyframes ringTurn { to { transform: scale(.9) rotate(360deg); } }
.core-orb { position:absolute; inset: 22%; display:grid; place-items:center; border-radius:50%; background: radial-gradient(circle at 35% 28%, #e8ffff, #4dc4cf 42%, #157695 80%); border: 3px solid rgba(238,255,249,.86); box-shadow: 0 0 30px rgba(108,228,233,.75), inset 0 -7px 12px rgba(9,84,107,.38); }
.core-symbol { color:#f2ffff; font-size: 23px; transform: rotate(-30deg); text-shadow: 0 1px 7px rgba(0,71,94,.5); }
.core-glow { position:absolute; inset: 28%; border-radius:50%; background:rgba(185,255,246,.45); filter:blur(12px); z-index:-1; }
.field-hint { position:absolute; left:50%; bottom:15px; display:flex; align-items:center; gap:5px; transform:translateX(-50%); padding:7px 12px; border-radius:20px; background:rgba(246,250,246,.75); color:var(--ink); font-size:11px; box-shadow:0 4px 12px rgba(23,52,76,.12); z-index:9; transition:opacity .4s; }
.field-hint.is-hidden { opacity:0; pointer-events:none; }
.keycap { display:inline-grid; place-items:center; width:18px; height:18px; border:1px solid rgba(23,52,76,.25); border-bottom-width:2px; border-radius:4px; background:#fff; font-size:10px; font-weight:700; }
.toast { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) translateY(20px); max-width:80%; padding:12px 17px; color:#f7ffff; background:rgba(12,81,101,.9); border-radius:6px; font-size:13px; opacity:0; pointer-events:none; z-index:12; transition:opacity .25s, transform .25s; text-align:center; }
.toast.visible { opacity:1; transform:translate(-50%,-50%); }
.completion-overlay { position:absolute; inset:0; z-index:20; display:grid; place-items:center; background:rgba(245,246,229,.14); opacity:0; pointer-events:none; transition:opacity .8s; }
.completion-overlay.visible { opacity:1; pointer-events:auto; }
.completion-content { width:min(440px, calc(100% - 40px)); padding:30px; text-align:center; background:rgba(248,247,236,.95); border:1px solid rgba(23,52,76,.15); box-shadow:0 18px 45px rgba(23,52,76,.25); }
.completion-seal { width:74px; height:74px; margin:0 auto 15px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--gold); color:#9a6c22; background:#fff4cd; font-family:"Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", "SimSun", "宋体", serif; font-size:14px; font-weight:700; transform:rotate(-7deg); }
.completion-content h3 { margin:4px 0 10px; color:var(--ink); font-family:"Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", "SimSun", "宋体",serif; font-size:29px; }
.completion-content p:not(.eyebrow) { margin:0 auto 18px; max-width:34ch; color:var(--ink-soft); font-size:13px; line-height:1.7; }
.primary-button { border:0; padding:11px 16px; color:white; background:var(--blue-deep); cursor:pointer; font-weight:700; }
.primary-button span { display:inline-block; margin-left:5px; transition:transform .2s; }
.primary-button:hover span { transform:translate(3px,-3px); }
.video-overlay { position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:20px; background:rgba(19,45,58,.48); opacity:0; pointer-events:none; transition:opacity .3s ease; }
.video-overlay.visible { opacity:1; pointer-events:auto; }
.video-panel { width:min(600px,100%); padding:27px; background:#f7f5ec; border:1px solid rgba(255,255,255,.62); box-shadow:0 25px 70px rgba(13,46,62,.3); }
.video-kicker { margin-bottom:14px; color:var(--blue-deep); font-size:11px; font-weight:700; letter-spacing:.08em; }
.video-placeholder { height:220px; display:grid; place-items:center; align-content:center; gap:12px; border:1px dashed rgba(23,52,76,.3); background:linear-gradient(145deg,#d9e6df,#eef0e1); color:var(--ink-soft); }
.video-play { width:50px; height:50px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.7); color:var(--blue-deep); font-size:18px; }
.video-panel h3 { margin:20px 0 8px; color:var(--ink); font-family:"Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", "SimSun", "宋体", serif; font-size:27px; }
.video-panel p { margin:0 0 20px; color:var(--ink-soft); font-size:13px; line-height:1.7; }