:root {
  --ink: #152f2e;
  --ink-deep: #0d2625;
  --jade: #3e7566;
  --jade-light: #7aa68d;
  --gold: #c5a35b;
  --gold-bright: #ead79a;
  --paper: #ece8d4;
  --paper-deep: #cfc9ab;
  --cinnabar: #9b483b;
  --text: #25281f;
  --shadow: rgba(12, 26, 23, .45);
  font-family: "Noto Serif SC", "Songti SC", STSong, SimSun, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #102d2b; color: var(--text); }
button, input, select { font: inherit; }
button { color: inherit; touch-action: manipulation; }
body { display: flex; justify-content: center; overflow-x: hidden; }

.game-shell {
  width: min(100vw, 480px);
  min-height: 100dvh;
  background: #173f3d;
  box-shadow: 0 0 60px rgba(0,0,0,.55);
  position: relative;
  padding-bottom: calc(74px + env(safe-area-inset-bottom));
}

@media (min-width: 561px) {
  body { padding: 12px 0; background: radial-gradient(circle at 50% 0,#355d56,#102d2b 62%); }
  .game-shell { min-height: calc(100dvh - 24px); border: 1px solid rgba(218,193,126,.52); border-radius: 14px; overflow: hidden; }
  .world { height: min(56dvh, 610px); min-height: 460px; }
  .bottom-nav { width: min(100vw, 480px); bottom: 12px; border-radius: 0 0 13px 13px; }
}

.parchment-panel {
  background:
    linear-gradient(90deg, rgba(91,72,35,.08), transparent 9%, transparent 91%, rgba(91,72,35,.08)),
    radial-gradient(circle at 22% 12%, rgba(255,255,255,.48), transparent 33%),
    var(--paper);
  border: 1px solid rgba(90,74,43,.52);
  box-shadow: 0 4px 16px rgba(8,22,20,.28), inset 0 0 0 3px rgba(255,255,255,.28);
}

.clan-card {
  min-height: 168px;
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) 14px 12px;
  position: relative;
  z-index: 5;
}
.clan-card::after, .event-panel::after, .modal::after {
  content: "";
  position: absolute;
  inset: 5px;
  pointer-events: none;
  border: 1px solid rgba(103,83,45,.18);
}
.founder-block { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
.portrait {
  --portrait-x: 0%; --portrait-y: 0%;
  width: 92px; height: 92px;
  border-radius: 50%;
  background-image: url("assets/disciple-atlas.png");
  background-size: 300% 200%;
  background-position: var(--portrait-x) var(--portrait-y);
  border: 4px solid #273e37;
  outline: 2px solid var(--gold);
  box-shadow: 0 3px 9px rgba(0,0,0,.35);
  flex: 0 0 auto;
}
.portrait-0 { --portrait-x: 0%; --portrait-y: 0%; }
.portrait-1 { --portrait-x: 50%; --portrait-y: 0%; }
.portrait-2 { --portrait-x: 100%; --portrait-y: 0%; }
.portrait-3 { --portrait-x: 0%; --portrait-y: 100%; }
.portrait-4 { --portrait-x: 50%; --portrait-y: 100%; }
.portrait-5 { --portrait-x: 100%; --portrait-y: 100%; }
.founder-copy { text-align: center; margin-top: 8px; }
.founder-copy strong { display: block; color: #5b4b1f; font-size: 20px; letter-spacing: 2px; }
.founder-copy span { font-size: 12px; color: #5f6659; }
.clan-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; align-content: center; position: relative; z-index: 1; }
.clan-stats > div {
  min-width: 0; padding: 7px 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 5px;
  background: rgba(88,99,86,.12); border-radius: 4px; border-left: 3px solid rgba(107,120,101,.35);
}
.clan-stats .wide { grid-column: span 2; }
.clan-stats span { color: #62675c; font-size: 12px; }
.clan-stats b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clan-stats .realm { color: var(--cinnabar); }
.clan-stats .root { color: #a24b78; }

.chronicle-bar {
  height: 64px; position: relative; z-index: 4;
  background: linear-gradient(180deg, #274f4a, #173d3b);
  color: #f4ead1; padding: 7px 14px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid rgba(232,210,153,.45);
}
.chronicle-bar small { display: block; color: #bfc9b7; letter-spacing: 3px; }
.chronicle-bar strong { font-size: 18px; }
.time-controls { display: flex; gap: 7px; }
.round-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid #c9b681; background: #294945; color: #e9d9aa;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.08); cursor: pointer;
}
.round-btn.active { background: #a98547; color: #fff8d8; }
.round-btn.pause { margin-left: 3px; background: #e9dfbe; color: #314741; }

.resource-ribbon {
  display: grid; grid-template-columns: repeat(4, 1fr); min-height: 50px;
  color: #eae5cf; background: rgba(10,34,33,.96); border-bottom: 1px solid #7d8b70;
  position: relative; z-index: 4;
}
.resource-ribbon > div { display: grid; grid-template-columns: 22px 1fr; grid-template-rows: 18px 18px; align-items: center; padding: 6px 5px; border-right: 1px solid rgba(237,221,169,.16); }
.resource-ribbon span { font-size: 11px; color: #9fb5a4; }
.resource-ribbon b { font-size: 13px; }
.resource-mark { grid-row: 1 / 3; width: 15px; height: 19px; display: block; transform: rotate(45deg); border-radius: 7px 3px; border: 1px solid rgba(255,255,255,.4); }
.resource-mark.stone { background: linear-gradient(135deg,#e2ca78,#826a2e); }
.resource-mark.aura { background: linear-gradient(135deg,#9de6d0,#327a70); border-radius: 50%; }
.resource-mark.herb { background: linear-gradient(135deg,#b8d275,#4d7d3b); transform: rotate(-20deg); border-radius: 100% 0 100% 0; }
.resource-mark.renown { background: linear-gradient(135deg,#e9a382,#8c3e31); border-radius: 2px; }

.world {
  height: clamp(500px, 66dvh, 780px); min-height: 500px; position: relative; overflow: hidden;
  background: #174744 url("assets/spirit-sea-map.png") center 54% / cover no-repeat;
  isolation: isolate;
}
.world-vignette { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(8,36,35,.25),transparent 20%,transparent 72%,rgba(5,28,27,.4)); pointer-events:none; }
.map-title { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); color: #f4ecd1; text-align: center; text-shadow: 0 2px 3px #102d2c; z-index: 2; white-space: nowrap; }
.map-title small, .map-title span { display:block; font-size: 12px; letter-spacing: 2px; }
.map-title strong { font-size: 23px; letter-spacing: 5px; }

.scene-switch { position:absolute; z-index:8; left:10px; top:10px; display:flex; border:1px solid #c7ae70; background:rgba(17,54,51,.88); border-radius:18px; padding:3px; box-shadow:0 4px 12px rgba(0,0,0,.28); }
.scene-switch button { border:0; border-radius:14px; padding:6px 11px; background:transparent; color:#cbd7c7; font-size:12px; cursor:pointer; }
.scene-switch button.active { background:#d7c28b; color:#253e39; font-weight:bold; }

.base-layer,.sea-layer { position:absolute; inset:0; z-index:1; }
.base-canvas { position:absolute; inset:72px 0 74px; overflow:hidden; background:linear-gradient(180deg,rgba(200,211,152,.05),rgba(35,75,64,.22)),url("assets/floating-island-base-v1.png") center 55% / cover no-repeat; }
.base-canvas::after { content:""; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(239,227,178,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(239,227,178,.06) 1px,transparent 1px); background-size:56px 56px; mask-image:linear-gradient(transparent,black 15%,black 85%,transparent); }
.base-status { position:absolute; top:82px; left:10px; z-index:7; display:flex; gap:8px; white-space:nowrap; }
.base-status span { padding:3px 8px; border-radius:12px; background:rgba(15,53,49,.82); color:#efe4bf; border:1px solid rgba(218,193,126,.45); font-size:11px; }
.base-actions { position:absolute; z-index:8; bottom:8px; left:50%; width:calc(100% - 18px); transform:translateX(-50%); display:grid; grid-template-columns:repeat(5,1fr); gap:5px; }
.base-actions button { min-width:0; border:0; background:rgba(18,54,51,.9); color:#f2e8c7; border-radius:8px; padding:5px 2px; box-shadow:0 2px 8px rgba(0,0,0,.28),inset 0 0 0 1px #b99e62; cursor:pointer; }
.base-actions button span { display:grid; place-items:center; width:28px; height:28px; margin:auto; border-radius:50%; border:1px solid #d8bf7e; background:#345f55; font-weight:bold; }
.base-actions button b { display:block; font-size:10px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.guide-panel { position:absolute; z-index:12; left:12px; right:12px; bottom:73px; display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:8px; padding:7px 9px; background:rgba(18,57,51,.91); border:1px solid #cfb56f; border-radius:7px; box-shadow:0 4px 14px rgba(0,0,0,.28); color:#fff0c4; }
.guide-seal { width:31px; height:31px; display:grid; place-items:center; border-radius:50%; background:#a4563e; border:1px solid #efd58d; font-size:10px; }
.guide-panel small,.guide-panel strong { display:block; }.guide-panel small { color:#d8c27e; font-size:10px; }.guide-panel strong { font-size:12px; line-height:1.35; }.guide-panel button { border:1px solid #c8a963; background:#e2c08c; color:#25443e; padding:5px 8px; cursor:pointer; font-weight:bold; }

.base-building { position:absolute; z-index:3; width:92px; height:88px; border:0; padding:0; background:none; cursor:pointer; transform:translate(-50%,-50%); filter:drop-shadow(0 7px 6px rgba(16,38,29,.36)); transition:filter .2s,transform .2s; }
.base-building:hover,.base-building:focus-visible { transform:translate(-50%,-50%) scale(1.06); filter:drop-shadow(0 0 11px rgba(234,207,128,.8)); }
.base-building .sprite { position:absolute; inset:0 3px 9px; background-image:url("assets/base-buildings-atlas.png"); background-size:400% 200%; background-repeat:no-repeat; }
.base-building.type-spring .sprite { background-position:0% 0%; }
.base-building.type-garden .sprite { background-position:33.333% 0%; }
.base-building.type-array .sprite { background-position:66.666% 0%; }
.base-building.type-library .sprite { background-position:100% 0%; }
.base-building.type-alchemy .sprite { background-position:0% 100%; }
.base-building.type-hall .sprite { background-position:33.333% 100%; }
.base-building.type-warehouse .sprite { background-position:66.666% 100%; }
.base-building.type-construction .sprite { background-position:100% 100%; }
.base-building .building-label { position:absolute; left:50%; bottom:0; transform:translateX(-50%); min-width:76px; border-radius:9px; padding:2px 6px; background:rgba(17,49,46,.84); border:1px solid #cbb276; color:#fff0bf; text-shadow:0 1px #14221f; font-size:10px; white-space:nowrap; }
.base-building .work-dots { position:absolute; right:2px; top:1px; display:flex; }
.base-building .work-dots i { width:8px; height:8px; margin-left:-2px; border-radius:50%; background:#e1c36e; border:1px solid #2a493f; }
.base-building .ready-mark { position:absolute; z-index:2; right:-2px; top:-1px; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:#a84e3c; color:#fff2c9; border:2px solid #f0d998; font-size:12px; animation:readyPulse 1.4s ease-in-out infinite; }
.base-building .growth-bar { position:absolute; left:14px; right:14px; bottom:13px; height:5px; border-radius:4px; background:rgba(13,42,39,.72); overflow:hidden; }
.base-building .growth-bar i { display:block; height:100%; background:linear-gradient(90deg,#85ae67,#e7cf74); }
@keyframes readyPulse { 50% { transform:scale(1.14); box-shadow:0 0 12px #efd282; } }

.map-disciple { --px:0%; --py:0%; position:absolute; z-index:6; width:38px; height:38px; left:var(--x); top:var(--y); transform:translate(-50%,-50%); border:2px solid #efe0a8; border-radius:50%; background-image:url("assets/disciple-atlas.png"); background-size:300% 200%; background-position:var(--px) var(--py); box-shadow:0 3px 8px rgba(0,0,0,.45); transition:left 2.2s ease-in-out,top 2.2s ease-in-out; cursor:pointer; }
.map-disciple.portrait-0 { --px:0%;--py:0%; }.map-disciple.portrait-1 { --px:50%;--py:0%; }.map-disciple.portrait-2 { --px:100%;--py:0%; }.map-disciple.portrait-3 { --px:0%;--py:100%; }.map-disciple.portrait-4 { --px:50%;--py:100%; }.map-disciple.portrait-5 { --px:100%;--py:100%; }
.map-disciple::after { content:attr(data-task); position:absolute; left:50%; bottom:-17px; transform:translateX(-50%); color:#fff1c0; background:rgba(21,55,51,.78); border-radius:8px; padding:1px 4px; font-size:8px; white-space:nowrap; }
.map-disciple.busy { animation:discipleBreathe 1.8s ease-in-out infinite; }
@keyframes discipleBreathe { 50% { box-shadow:0 0 12px rgba(237,215,145,.82); } }
.placement-tip { position:absolute; z-index:10; left:50%; top:50%; transform:translate(-50%,-50%); background:rgba(19,56,52,.94); color:#f6ecc9; border:1px solid #d6bc75; padding:10px 16px; border-radius:5px; pointer-events:none; }

.sea-layer { background:linear-gradient(180deg,rgba(8,51,49,.08),rgba(5,39,38,.32)); overflow:hidden; }
.world-map-view,.east-sea-view,.province-map-view { position:absolute; inset:0; }
.world-map-view { background:#d9ceb0 url("assets/jiuzhou-world-overview.png") center/cover no-repeat; }
.world-map-view::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(9,31,30,.08),rgba(6,36,35,.2)); pointer-events:none; }
.world-era { position:absolute; z-index:3; left:50%; top:11%; transform:translateX(-50%); min-width:190px; padding:5px 12px; color:#f8ebc4; text-align:center; text-shadow:0 1px 3px #132c29; background:rgba(20,58,53,.82); border:1px solid #d4ba73; border-radius:13px; }.world-era span,.world-era b { display:block; }.world-era span { font-size:11px; color:#c5d4a0; }.world-era b { font-size:13px; }
.province-pin { position:absolute; z-index:4; border:0; color:#fff0c4; background:rgba(24,59,52,.88); border:1px solid #d5b661; border-radius:50%; width:52px; height:52px; padding:0; cursor:pointer; box-shadow:0 3px 8px rgba(0,0,0,.37); text-shadow:0 1px 2px #102a28; }.province-pin b,.province-pin small { display:block; }.province-pin b { font-size:14px; }.province-pin small { position:absolute; top:54px; left:50%; transform:translateX(-50%); min-width:74px; color:#fff2c7; font-size:9px; white-space:nowrap; }.province-pin:hover,.province-pin:focus { background:#a6613c; transform:scale(1.08); }
.province-xikun { left:28%; top:25%; }.province-beiming { left:48%; top:18%; }.province-leize { left:66%; top:29%; }.province-dongsheng { left:74%; top:43%; background:#a6613c; animation:provincePulse 2.4s ease-in-out infinite; }.province-yunmeng { left:24%; top:57%; }.province-zhongzhou { left:48%; top:57%; }.province-nanhuang { left:48%; top:75%; }.province-canglan { left:65%; top:76%; }.province-liusha { left:13%; top:43%; }
@keyframes provincePulse { 50% { box-shadow:0 0 0 8px rgba(216,183,93,.18),0 3px 8px rgba(0,0,0,.37); } }
.east-sea-view { background:#0d5650 url("assets/east-victory-region.png") center/cover no-repeat; }.east-sea-view::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,43,41,.08),rgba(8,43,41,.3)); pointer-events:none; }
.back-world,.region-title { position:absolute; z-index:7; top:9px; }.back-world { left:10px; border:1px solid #c9ad69; background:rgba(18,54,50,.88); color:#fff0c5; padding:6px 8px; cursor:pointer; }.region-title { right:10px; text-align:right; color:#fff2c5; text-shadow:0 1px 3px #102d29; }.region-title small,.region-title b { display:block; }.region-title b { font-size:14px; }
.sea-island { position:absolute; z-index:3; width:110px; border:0; background:none; color:#f4e8bd; text-shadow:0 2px 3px #102c2a; cursor:pointer; }
.sea-island i { display:block; width:72px; height:50px; margin:auto; background:radial-gradient(ellipse at 50% 68%,#9db36c 0 28%,#567451 30% 48%,#d7cf9c 50% 57%,transparent 59%),radial-gradient(ellipse at 38% 40%,#375d4f 0 22%,transparent 24%); filter:drop-shadow(0 5px 5px rgba(0,0,0,.4)); }
.sea-island b,.sea-island small { display:block; }.sea-island b { font-size:13px; }.sea-island small { font-size:9px; color:#d3c994; }
.island-star { left:7%; top:22%; }.island-moon { right:7%; top:28%; }.island-distant { right:17%; top:63%; filter:grayscale(.45); }
.mission-routes { position:absolute; inset:0; z-index:4; pointer-events:none; }
.mission-route { position:absolute; height:3px; transform-origin:left center; background:linear-gradient(90deg,#d2bb72 var(--progress),rgba(235,224,187,.35) var(--progress)); box-shadow:0 1px 4px rgba(0,0,0,.5); }
.mission-route.to-star { left:48%; top:45%; width:39%; transform:rotate(-144deg); }.mission-route.to-moon { left:53%; top:44%; width:35%; transform:rotate(-37deg); }.mission-route.to-distant { left:52%; top:46%; width:34%; transform:rotate(48deg); }
.mission-fleet { position:absolute; left:var(--progress); top:50%; width:38px; height:22px; transform:translate(-50%,-50%) rotate(calc(var(--route-rotation) * -1)); background:url("assets/cloud-ark.png") center/contain no-repeat; filter:drop-shadow(0 3px 3px rgba(0,0,0,.45)); }
.mission-route .mission-caption { position:absolute; left:50%; top:8px; transform:translateX(-50%) rotate(calc(var(--route-rotation) * -1)); color:#fff0bd; background:rgba(16,49,46,.84); border-radius:7px; padding:1px 5px; font-size:9px; white-space:nowrap; }
.owned-island::after { content:"沈氏"; position:absolute; right:6px; top:8px; padding:2px 4px; border-radius:50%; background:#2e6f59; border:1px solid #e0c77e; color:#fff5cf; font-size:9px; }

.ark-button { position: absolute; width: 51%; left: 24%; top: 30%; border: 0; padding: 0; background: none; cursor: pointer; z-index: 2; filter: drop-shadow(0 10px 12px rgba(0,0,0,.38)); animation: arkFloat 5s ease-in-out infinite; }
.ark-button img { width: 100%; display: block; }
.ark-button span { position: absolute; left: 50%; transform: translateX(-50%); bottom: -8px; min-width: 180px; padding: 4px 9px; color: #fff5ce; background: rgba(16,48,45,.8); border: 1px solid #c8ac66; border-radius: 14px; text-shadow: 0 1px #000; }
.ark-button b, .ark-button small { display: block; }
.ark-button small { color: #a9d89e; font-size: 10px; }
@keyframes arkFloat { 50% { transform: translateY(-7px); } }

.building { position: absolute; width: 102px; border: 0; background: none; color: #f9efd0; text-shadow: 0 2px 3px #0b2321; cursor: pointer; z-index: 3; }
.building b, .building small { display: block; }
.building b { margin-top: 3px; font-size: 14px; }
.building small { color: #e4c87d; font-size: 11px; }
.node-array { left: 9%; top: 25%; }
.node-garden { right: 6%; top: 18%; }
.node-hall { right: 8%; top: 61%; }
.building-art { width: 68px; height: 68px; display: block; margin: auto; position: relative; filter: drop-shadow(0 5px 6px rgba(0,0,0,.42)); }
.array-art { border-radius: 50%; background: radial-gradient(circle,#f7d986 0 7%,#7fc6b2 9% 20%,#234f4c 22% 42%,#d8b66b 44% 48%,#244845 50%); border: 4px double #d8c586; animation: arrayPulse 2.5s ease-in-out infinite; }
.array-art::before, .array-art::after { content:""; position:absolute; inset:10px 28px; background:#ead899; transform:rotate(60deg); }
.array-art::after { transform:rotate(-60deg); }
@keyframes arrayPulse { 50% { filter: drop-shadow(0 0 14px rgba(233,213,127,.75)); } }
.garden-art { background: radial-gradient(ellipse at 50% 74%,#9abc78 0 42%,#4c704d 44% 55%,transparent 56%); }
.garden-art::before { content:""; position:absolute; left:14px; right:14px; bottom:9px; height:24px; border:5px solid #b79b62; border-radius:50%; background:#6b8151; }
.garden-art i { position:absolute; width:19px; height:29px; border-radius:100% 0 100% 0; background:linear-gradient(135deg,#e4d682,#5b9c65); left:26px; bottom:30px; transform:rotate(-32deg); }
.garden-art i:nth-child(2){left:39px; transform:rotate(25deg) scale(.8)} .garden-art i:nth-child(3){left:15px; transform:rotate(-65deg) scale(.65)}
.hall-art::before { content:""; position:absolute; left:8px; right:8px; bottom:4px; height:42px; background:linear-gradient(90deg,#66462d,#a87944 20% 80%,#66462d); border:2px solid #d1b66f; clip-path:polygon(10% 24%,0 24%,12% 0,88% 0,100% 24%,90% 24%,90% 100%,10% 100%); }
.hall-art::after { content:""; position:absolute; left:19px; right:19px; bottom:24px; height:34px; background:#385c53; clip-path:polygon(50% 0,100% 40%,89% 51%,50% 25%,11% 51%,0 40%); }

.ambient-cloud { position: absolute; width: 240px; height: 55px; border-radius: 50%; background: rgba(238,226,184,.22); filter: blur(16px); pointer-events:none; }
.cloud-a { left:-80px; top:52%; animation:cloudDrift 18s linear infinite; } .cloud-b { right:-100px; top:74%; animation:cloudDrift 24s linear reverse infinite; }
@keyframes cloudDrift { 50% { transform: translateX(80px); } }

.event-panel { margin: 0; position: relative; z-index: 4; min-height: 178px; padding: 12px 15px; }
.event-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; position:relative; z-index:1; }
.event-head strong { letter-spacing:3px; color:#4e4a32; }
.event-head button { border:1px solid #b4916c; background:#e6c4ab; padding:3px 10px; cursor:pointer; }
.event-log { position:relative; z-index:1; height:120px; overflow-y:auto; padding-right:4px; scrollbar-color:#788b7c transparent; }
.log-entry { padding:4px 0 6px; line-height:1.45; border-bottom:1px dashed rgba(77,72,49,.18); font-size:14px; }
.log-entry time { color:#7b745c; margin-right:6px; }
.log-entry.good b { color:#397355; } .log-entry.warn b { color:#a84f3f; } .log-entry.info b { color:#8b632a; }

.bottom-nav { position: fixed; z-index: 10; width:min(100vw,760px); bottom:0; height:calc(72px + env(safe-area-inset-bottom)); padding:6px 6px env(safe-area-inset-bottom); display:grid; grid-template-columns:repeat(5,1fr); background:linear-gradient(#405249,#263e39); border-top:2px solid #d2bf84; box-shadow:0 -6px 18px rgba(0,0,0,.28); }
.bottom-nav button { border:0; background:none; color:#efe5c4; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; }
.nav-seal { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; border:2px solid #dbc684; background:radial-gradient(circle,#6f856c,#253f3b); box-shadow:inset 0 0 0 2px #1d302e; font-weight:bold; }
.bottom-nav b { font-size:13px; }

.modal-layer { position:fixed; z-index:30; inset:0; background:rgba(6,22,21,.72); display:grid; place-items:center; padding:18px; backdrop-filter:blur(3px); }
.modal-layer[hidden] { display:none; }
.modal { position:relative; width:min(720px,100%); max-height:90dvh; overflow:hidden; animation:modalIn .18s ease-out; }
@keyframes modalIn { from { opacity:0; transform:translateY(14px) scale(.98); } }
.modal-head { position:relative; z-index:1; min-height:66px; display:flex; align-items:center; justify-content:center; border-bottom:1px solid #b0a98a; }
.modal-head h2 { margin:0; letter-spacing:6px; font-size:25px; }
.seal-dot { position:absolute; left:16px; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:#213e39; border:2px solid #ba9c58; color:#e7d184; font-size:11px; }
.close-btn { position:absolute; right:12px; top:10px; width:44px; height:44px; transform:rotate(45deg); border:2px solid #786f56; background:#ded8bd; color:transparent; font-size:0; cursor:pointer; }
.close-btn::after { content:"×"; position:absolute; inset:0; display:grid; place-items:center; color:#34352d; font-size:28px; transform:rotate(-45deg); }
.modal-body { position:relative; z-index:1; overflow:auto; max-height:calc(90dvh - 66px); padding:14px; }

.filter-bar { display:grid; grid-template-columns:1fr 1fr 1.4fr auto; gap:8px; margin-bottom:12px; }
.filter-bar select,.filter-bar input { min-width:0; padding:9px; border:1px solid #a88e70; background:#f3efdf; }
.paper-button { border:1px solid #a77d60; background:linear-gradient(#ebc8b0,#dcae91); padding:8px 16px; cursor:pointer; box-shadow:inset 0 0 0 2px rgba(255,255,255,.24); }
.paper-button.primary { background:linear-gradient(#4f7d6f,#2d5e55); color:#fff4d5; border-color:#c4aa67; }
.paper-button:disabled { opacity:.45; cursor:not-allowed; }
.disciples-list { display:grid; gap:9px; }
.disciple-card { display:grid; grid-template-columns:72px 1fr auto; gap:10px; align-items:center; padding:9px; border:1px solid #aaa68f; background:rgba(255,255,255,.45); box-shadow:inset 0 0 0 3px rgba(255,255,255,.4); }
.disciple-card .portrait { width:62px; height:62px; border-width:2px; outline-width:1px; }
.disciple-name { display:flex; gap:8px; align-items:center; }
.quality { font-size:12px; color:#9a542f; }
.detail-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; font-size:12px; margin:5px 0; color:#53584e; }
.detail-grid span { background:rgba(72,80,70,.08); padding:4px; }
.cultivation-line { height:6px; border-radius:4px; background:#9ba093; overflow:hidden; }
.cultivation-line i { display:block; height:100%; width:50%; background:linear-gradient(90deg,#a64e46,#e2a260); }
.small-action { border:1px solid #947658; background:#edd2ba; padding:7px 9px; cursor:pointer; }

.building-sheet h3 { margin:0 0 5px; color:#3b5c50; }
.building-summary { display:grid; grid-template-columns:1.2fr 1fr; gap:12px; margin-bottom:14px; }
.building-illustration { min-height:130px; display:grid; place-items:center; border:1px solid #a9a58d; background:linear-gradient(145deg,#3f7466,#1b4442); color:#f4e5b6; text-align:center; }
.building-illustration strong { font-size:34px; letter-spacing:8px; }
.building-info { display:grid; gap:7px; }
.building-info div { padding:8px; background:rgba(79,89,76,.1); display:flex; justify-content:space-between; }
.impact-note { margin:0 0 12px; padding:7px 9px; border-left:3px solid #b48b42; background:rgba(180,139,66,.1); color:#665b42; font-size:12px; line-height:1.5; }
.worker-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.worker { border:1px solid #b0aa91; background:rgba(255,255,255,.42); padding:8px; cursor:pointer; text-align:center; }
.worker.selected { border-color:#99783a; background:#e5d4a6; box-shadow:inset 0 0 0 2px #fff5d3; }
.worker .portrait { width:54px; height:54px; margin:0 auto 5px; border-width:2px; outline-width:1px; }
.worker small { display:block; color:#66695c; }
.sheet-actions { display:flex; gap:9px; margin-top:14px; justify-content:flex-end; }

.profile-sheet { display:grid; grid-template-columns:150px 1fr; gap:14px; }
.profile-left { text-align:center; }
.profile-left .portrait { width:122px; height:122px; margin:0 auto 8px; }
.profile-left h3 { margin:5px 0; font-size:24px; }
.profile-stats { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.profile-stats div { padding:8px; background:rgba(77,87,75,.1); display:flex; justify-content:space-between; }
.attribute-bars { grid-column:1/-1; padding-top:9px; border-top:1px solid #aaa48c; }
.attribute-row { display:grid; grid-template-columns:58px 1fr 55px; gap:8px; align-items:center; margin:8px 0; }
.attribute-row i { height:10px; background:#aaa; border-radius:6px; overflow:hidden; }
.attribute-row i::after { content:""; display:block; width:var(--fill); height:100%; background:linear-gradient(90deg,#3c7567,#a7c381); }

.territory-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.territory-card { padding:14px; border:1px solid #aaa48a; background:rgba(255,255,255,.4); }
.territory-card.locked { filter:grayscale(.75); opacity:.68; }
.territory-card h3 { margin:0 0 6px; }
.territory-card p { margin:5px 0; font-size:13px; color:#5e6257; }
.settings-grid { display:grid; gap:10px; }
.settings-grid button { padding:14px; }
.danger { background:#a55549; color:white; border-color:#74342e; }

.catalog-grid,.inventory-grid,.manual-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.catalog-item,.inventory-item,.manual-item { min-height:98px; padding:8px; border:1px solid #aaa48b; background:rgba(255,255,255,.44); text-align:center; cursor:pointer; }
.catalog-item.selected,.inventory-item.selected,.manual-item.selected { border-color:#987333; background:#ead8a8; box-shadow:inset 0 0 0 2px #fff1c8; }
.catalog-item .mini-sprite { width:74px; height:62px; margin:auto; background-image:url("assets/base-buildings-atlas.png"); background-size:400% 200%; }
.catalog-item b,.inventory-item b,.manual-item b { display:block; }
.catalog-item small,.inventory-item small,.manual-item small { display:block; margin-top:3px; color:#66695c; font-size:11px; }
.item-glyph { width:42px; height:42px; display:grid; place-items:center; margin:0 auto 5px; border-radius:50% 50% 45% 55%; border:2px solid #b38c4f; background:radial-gradient(circle at 35% 30%,#fff3bd,#b84f3c 52%,#6d2b26); color:#fff0ba; font-weight:bold; }
.item-glyph.manual { border-radius:4px; background:linear-gradient(90deg,#c6aa6d,#efe2b7 16% 84%,#b49355); color:#4d4d38; }
.profile-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin:12px 0; }
.profile-tabs button { padding:8px 3px; border:1px solid #a98970; background:#e4c2aa; cursor:pointer; }.profile-tabs button.active { background:#3c6d61;color:#fff0ce;border-color:#bba267; }
.technique-slots { display:grid; gap:10px; }
.technique-row { display:grid; grid-template-columns:92px repeat(3,1fr); gap:7px; align-items:stretch; }
.technique-row > strong { display:grid; place-items:center; background:rgba(74,85,74,.1); writing-mode:vertical-rl; letter-spacing:4px; }
.tech-slot { min-height:88px; display:grid; place-items:center; padding:7px; border:2px solid #858c82; background:linear-gradient(145deg,#e8e8dd,#c6cbc4); text-align:center; cursor:pointer; }.tech-slot.empty { color:#7b8077; }.tech-slot b { color:#8e3e72; }.tech-slot small { display:block; }
.reward-summary { display:flex; justify-content:space-between; align-items:center; padding:9px; margin-bottom:10px; background:rgba(71,82,70,.1); }
.reward-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:10px; }
.auto-cultivate { display:flex; align-items:center; justify-content:space-between; padding:10px; background:rgba(71,82,70,.1); margin-top:10px; }
.toggle { width:48px; height:26px; border:0; border-radius:14px; background:#8c9085; padding:3px; cursor:pointer; }.toggle::before { content:""; display:block; width:20px; height:20px; border-radius:50%; background:#f5edcf; transition:.2s; }.toggle.on { background:#467565; }.toggle.on::before { transform:translateX(22px); }
.mission-party { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.mission-member { border:1px solid #aaa58d; background:rgba(255,255,255,.44); padding:7px; text-align:center; cursor:pointer; }.mission-member.selected { background:#e5d2a1;border-color:#987333; }.mission-member .portrait { width:55px;height:55px;margin:auto;border-width:2px;outline-width:1px; }
.mission-report { padding:13px; background:rgba(61,87,70,.12); border-left:4px solid #4d7965; line-height:1.7; }
.risk-readout { margin-top:10px; padding:8px 10px; border:1px dashed #b18a4b; background:rgba(177,138,75,.1); color:#63502d; text-align:center; font-size:13px; }
.mission-report.victory { border-left-color:#b78637; background:rgba(183,134,55,.13); }.mission-report.defeat { border-left-color:#a65145; background:rgba(166,81,69,.12); }.report-emblem { display:inline-block; margin-right:7px; padding:1px 7px; background:#386c5e; color:#fff0c4; border-radius:10px; font-size:11px; }.mission-report.defeat .report-emblem { background:#a65145; }
.frontier-hero { position:relative; overflow:hidden; min-height:116px; padding:18px 20px; color:#f6e7bd; background:linear-gradient(115deg,rgba(23,55,58,.98),rgba(40,90,94,.74)),radial-gradient(circle at 80% 30%,#8e7043,transparent 42%); border:1px solid #bca269; }
.frontier-hero::after { content:"山海"; position:absolute; right:18px; top:5px; font:700 66px/1 serif; color:rgba(231,214,181,.08); letter-spacing:8px; }
.frontier-hero span { color:#e8b96f; font-size:11px; letter-spacing:4px; }.frontier-hero h3 { margin:7px 0 4px; font-size:27px; letter-spacing:3px; }.frontier-hero p { margin:0; font-size:12px; color:#bfd3cb; }
.frontier-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin:10px 0; }
.frontier-steps i { padding:8px 5px; border:1px solid #aaa48c; background:rgba(80,87,73,.08); color:#858678; text-align:center; font-style:normal; font-size:11px; }
.frontier-steps i.done { background:#315f55; border-color:#557f70; color:#f4e8c9; }.frontier-steps i.active { background:#ead5a5; border-color:#a6793c; color:#6b4b24; box-shadow:inset 0 0 0 2px rgba(255,255,255,.35); }
.frontier-lore { padding:9px 12px; margin-bottom:10px; border-left:3px solid #4f796a; background:rgba(53,90,76,.09); }.frontier-lore p { margin:0 0 5px; line-height:1.55; }.frontier-lore small { color:#6f705f; }
.frontier-primary { display:block; width:100%; min-height:50px; border:1px solid #b99b59; background:linear-gradient(135deg,#285a5e,#17373a); color:#f5e5b8; font-size:15px; letter-spacing:2px; cursor:pointer; box-shadow:inset 0 0 0 2px rgba(255,255,255,.08); }.frontier-primary.danger { background:linear-gradient(135deg,#8c4a3d,#512e2b); }
.frontier-site { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:12px; margin-bottom:8px; border:1px solid #b1a78c; background:rgba(255,255,255,.4); }.frontier-site b { font-size:17px; }.frontier-site span { color:#766b54; font-size:11px; }
.branch-card { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; padding:13px; margin-bottom:10px; border:1px solid #b99b59; background:linear-gradient(100deg,rgba(232,185,111,.16),rgba(40,90,94,.1)); }.branch-card p { margin:4px 0 0; color:#626759; font-size:12px; }
.queue-list { display:grid; gap:7px; }.queue-item { display:grid; grid-template-columns:1fr 110px auto; gap:8px; align-items:center; padding:8px; background:rgba(74,84,72,.1); }.queue-progress { height:8px;background:#9b9e91;border-radius:5px;overflow:hidden; }.queue-progress i { display:block;height:100%;background:linear-gradient(90deg,#4a7968,#d5bd73); }

.toast { position:fixed; z-index:50; left:50%; bottom:100px; transform:translate(-50%,20px); color:#fff7dc; background:rgba(20,52,48,.94); border:1px solid #cdb16c; padding:10px 18px; border-radius:4px; opacity:0; pointer-events:none; transition:.25s; box-shadow:0 7px 22px rgba(0,0,0,.35); }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width: 560px) {
  .clan-card { grid-template-columns:112px 1fr; min-height:150px; gap:7px; padding-left:8px; padding-right:8px; }
  .portrait { width:76px; height:76px; }
  .founder-copy strong { font-size:17px; }
  .clan-stats { gap:4px; }
  .clan-stats > div { padding:6px 5px; }
  .clan-stats span { font-size:10px; }
  .clan-stats b { font-size:12px; }
  .chronicle-bar strong { font-size:15px; }
  .round-btn { width:32px; height:32px; }
  .resource-ribbon b { font-size:11px; }
  .world { height:49dvh; min-height:360px; max-height:700px; }
  .building { transform:scale(.86); }
  .node-array { left:3%; } .node-garden { right:1%; } .node-hall { right:1%; }
  .ark-button { width:62%; left:19%; top:31%; }
  .filter-bar { grid-template-columns:1fr 1fr; }
  .filter-bar input { grid-column:span 2; }
  .disciple-card { grid-template-columns:58px 1fr; }
  .disciple-card > .small-action { grid-column:1/-1; }
  .detail-grid { grid-template-columns:1fr 1fr; }
  .building-summary,.profile-sheet { grid-template-columns:1fr; }
  .worker-grid { grid-template-columns:repeat(2,1fr); }
  .territory-grid { grid-template-columns:1fr; }
  .scene-switch { top:7px; left:6px; }.scene-switch button { padding:5px 8px; }
  .map-title { top:47px; }
  .base-canvas { inset:91px 0 70px; }
  .base-status { top:118px; }
  .base-building { width:78px;height:76px; }
  .base-actions { bottom:5px; }
  .base-actions button span { width:25px;height:25px; }
  .guide-panel { left:7px; right:7px; bottom:58px; padding:5px 7px; grid-template-columns:30px 1fr auto; }.guide-seal { width:26px; height:26px; font-size:9px; }.guide-panel strong { font-size:10px; }.guide-panel small { font-size:9px; }.guide-panel button { padding:4px 6px; font-size:11px; }
  .catalog-grid,.inventory-grid,.manual-grid { grid-template-columns:repeat(2,1fr); }
  .technique-row { grid-template-columns:52px repeat(2,1fr); }.technique-row .tech-slot:last-child { display:none; }
  .mission-party { grid-template-columns:repeat(2,1fr); }
}

/* 竖屏地图舞台 v2：青绿山水为主镜头，UI只承担信息边框。 */
body { background: #102b2b; }
.game-shell {
  height: 100dvh; min-height: 0; overflow: hidden; padding-bottom: calc(72px + env(safe-area-inset-bottom));
  display: grid; grid-template-rows: auto auto auto minmax(0,1fr) 66px;
  background: #17373a;
}
.parchment-panel {
  background: linear-gradient(90deg,rgba(151,106,62,.07),transparent 13%,transparent 87%,rgba(151,106,62,.07)),#e7dfc8;
  box-shadow: inset 0 1px rgba(255,255,255,.55); border-color: rgba(75,72,53,.45);
}
.clan-card {
  min-height: 112px; height: 112px; grid-template-columns: 104px 1fr; gap: 8px;
  padding: max(7px,env(safe-area-inset-top)) 9px 7px; border-width: 0 0 1px; box-shadow: 0 2px 12px rgba(13,38,37,.18);
}
.clan-card::after,.event-panel::after { inset: 3px; }
.founder-block { justify-content: center; }
.portrait { width: 64px; height: 64px; border-width: 2px; outline-width: 1px; box-shadow: 0 2px 5px rgba(13,38,37,.32); }
.founder-copy { margin-top: 3px; line-height: 1.12; }
.founder-copy strong { font-size: 15px; letter-spacing: 1px; }
.founder-copy span { display: block; max-width: 100px; font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clan-stats { gap: 4px; }
.clan-stats > div { min-height: 27px; padding: 3px 6px; border-left-width: 2px; background: rgba(40,90,94,.08); }
.clan-stats span { font-size: 9px; }
.clan-stats b { font-size: 11px; }

.chronicle-bar { height: 46px; padding: 4px 9px; background: #17373a; border-bottom-color: rgba(232,185,111,.35); }
.chronicle-bar small { font-size: 8px; letter-spacing: 2px; color: #8eb0a9; }
.chronicle-bar strong { font-size: 13px; letter-spacing: 1px; }
.time-controls { gap: 4px; }
.round-btn { width: 29px; height: 29px; border-radius: 4px; box-shadow: none; font-size: 11px; background: #285a5e; border-color: rgba(232,185,111,.6); }
.round-btn.active { background: #976a3e; }
.round-btn.pause { background: #e7d6b5; }

.resource-ribbon { min-height: 40px; height: 40px; background: #285a5e; border-bottom-color: rgba(231,214,181,.35); }
.resource-ribbon > div { grid-template-columns: 17px 1fr; grid-template-rows: 14px 15px; padding: 4px; }
.resource-ribbon span { font-size: 8px; color: #b8cec6; }
.resource-ribbon b { font-size: 11px; color: #f4e9cf; }
.resource-mark { width: 11px; height: 14px; }

.world { height: auto; min-height: 0; max-height: none; background: #285a5e; border-bottom: 1px solid #976a3e; }
.world-vignette { z-index: 2; background: linear-gradient(180deg,rgba(23,55,58,.18),transparent 18%,transparent 78%,rgba(23,55,58,.3)); }
.scene-switch { top: 7px; left: 7px; border-radius: 3px; padding: 2px; background: rgba(23,55,58,.88); box-shadow: 0 2px 8px rgba(13,38,37,.22); }
.scene-switch button { border-radius: 2px; padding: 4px 7px; font-size: 9px; }
.scene-switch button.active { background: #e7d6b5; color: #17373a; }
.map-title { top: 7px; left: auto; right: 8px; transform: none; text-align: right; text-shadow: 0 1px 3px #17373a; }
.map-title small { display: none; }
.map-title strong { font-size: 16px; letter-spacing: 3px; }
.map-title span { font-size: 8px; letter-spacing: 1px; color: #e8b96f; }

.base-canvas {
  inset: 45px 0 52px;
  background: linear-gradient(180deg,rgba(23,55,58,.04),rgba(23,55,58,.13)),url("assets/floating-island-base-v2.png") center 50% / cover no-repeat;
}
.base-canvas::after { background-image: none; box-shadow: inset 0 0 30px rgba(23,55,58,.25); }
.base-status { top: 47px; left: 6px; gap: 4px; }
.base-status span { padding: 2px 5px; border-radius: 2px; background: rgba(23,55,58,.78); font-size: 8px; }
.base-building { width: 70px; height: 64px; filter: drop-shadow(0 4px 3px rgba(16,38,29,.34)); }
.base-building .building-label { min-width: 61px; padding: 1px 4px; border-radius: 2px; font-size: 8px; background: rgba(23,55,58,.88); }
.base-building .growth-bar { left: 9px; right: 9px; bottom: 10px; height: 4px; }
.base-building .work-dots i { width: 6px; height: 6px; }
.base-building .ready-mark { width: 19px; height: 19px; border-width: 1px; }
.map-disciple { width: 30px; height: 30px; border-width: 1px; box-shadow: 0 2px 5px rgba(0,0,0,.35); }
.map-disciple::after { bottom: -13px; padding: 0 3px; border-radius: 2px; font-size: 7px; }
.base-actions { bottom: 5px; width: calc(100% - 12px); gap: 3px; }
.base-actions button { height: 42px; border-radius: 3px; padding: 3px 1px; background: rgba(23,55,58,.9); box-shadow: inset 0 0 0 1px rgba(232,185,111,.65); }
.base-actions button span { width: 21px; height: 21px; border-radius: 2px; font-size: 11px; background: #285a5e; }
.base-actions button b { font-size: 8px; }
.guide-panel { left: 6px; right: 6px; bottom: 49px; min-height: 38px; padding: 4px 6px; grid-template-columns: 26px 1fr auto; border-radius: 3px; background: rgba(23,55,58,.9); }
.guide-seal { width: 23px; height: 23px; font-size: 8px; }
.guide-panel strong { font-size: 9px; }.guide-panel small { font-size: 7px; }.guide-panel button { padding: 3px 6px; font-size: 9px; }

.world-map-view { background-color: #d8cfb5; background-size: cover; }
.world-map-view::after { background: linear-gradient(180deg,rgba(23,55,58,.06),rgba(23,55,58,.14)); }
.world-map-view,.east-sea-view,.province-map-view { overflow: hidden; background-image: none; }
.map-zoom-surface {
  --map-scale: 1; --map-x: 0px; --map-y: 0px;
  position: absolute; inset: 0; touch-action: none; user-select: none;
  transform-origin: 50% 50%; transform: translate3d(var(--map-x),var(--map-y),0) scale(var(--map-scale));
  will-change: transform; cursor: grab;
}
.map-zoom-surface:active { cursor: grabbing; }
#worldMapSurface { background: #294d50 url("assets/jiuzhou-world-overview-v2.png") center/cover no-repeat; }
#eastSeaSurface { background: #0d5650 url("assets/dongsheng-region-portrait-v2.png") center/100% 100% no-repeat; }
#provinceMapSurface { background-color:#314f48; background-image:var(--region-portrait); background-position:center; background-size:100% 100%; background-repeat:no-repeat; }
.province-map-view::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(180deg,rgba(23,55,58,.12),transparent 22%,transparent 76%,rgba(23,55,58,.26)); box-shadow:inset 0 0 38px rgba(11,39,37,.32); }
.province-paths { position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; }
.province-paths path { fill:none; stroke:rgba(242,218,158,.58); stroke-width:.42; stroke-dasharray:1.2 1.1; filter:drop-shadow(0 1px 1px rgba(23,55,58,.7)); }
.province-site { position:absolute; z-index:5; left:var(--mx); top:var(--my); width:104px; transform:translate(-50%,-50%); border:0; padding:0; background:none; color:#f6e7bc; text-align:center; cursor:pointer; text-shadow:0 1px 2px #17373a; }
.province-site i { width:40px; height:40px; margin:auto; display:grid; place-items:center; border:2px solid #e8c776; border-radius:50%; background:radial-gradient(circle,#a86a3c 0 23%,#315f55 25% 54%,rgba(23,55,58,.84) 56%); color:#ffe8a8; font-style:normal; font-weight:700; box-shadow:0 0 0 5px rgba(23,55,58,.22),0 4px 10px rgba(0,0,0,.35); }
.province-site b,.province-site small,.province-site em { display:block; width:max-content; max-width:112px; margin-inline:auto; }
.province-site b { margin-top:4px; padding:2px 6px; border:1px solid rgba(232,185,111,.6); border-radius:2px; background:rgba(23,55,58,.9); font-size:11px; }
.province-site small { margin-top:2px; padding:1px 4px; border-radius:2px; background:rgba(23,55,58,.72); color:#c7d5c7; font-size:7px; }
.province-site em { margin-top:2px; color:#e8b96f; font-size:7px; font-style:normal; }
.province-site.locked { filter:grayscale(.85); opacity:.58; cursor:not-allowed; }.province-site.locked i { border-style:dashed; background:rgba(23,55,58,.8); }
.province-site.core-site i { animation:provinceCore 2.2s ease-in-out infinite; }.province-site.branch-site i { background:radial-gradient(circle,#e1bd69 0 23%,#976a3e 25% 55%,rgba(23,55,58,.85) 57%); }
@keyframes provinceCore { 50% { box-shadow:0 0 0 8px rgba(232,185,111,.14),0 0 15px rgba(232,185,111,.68); } }
.province-mission-route { position:absolute; z-index:4; left:48%; top:49%; width:35%; height:3px; transform:rotate(145deg); transform-origin:left center; background:rgba(231,214,181,.3); pointer-events:none; }
.province-mission-route i { display:block; height:100%; width:0; background:#e8c776; box-shadow:0 0 6px #e8c776; }
.province-mission-route span { position:absolute; left:48%; top:7px; transform:translateX(-50%) rotate(-145deg); padding:1px 5px; border-radius:2px; background:rgba(23,55,58,.88); color:#f5e4b3; font-size:8px; white-space:nowrap; }
.province-mission-route.assault i { background:#b65a45; box-shadow:0 0 6px #d97a5f; }
.map-zoom-controls { position: absolute; z-index: 12; right: 7px; bottom: 8px; display: grid; grid-template-columns: 34px 52px 34px; gap: 3px; padding: 3px; border: 1px solid rgba(232,185,111,.7); border-radius: 4px; background: rgba(23,55,58,.9); box-shadow: 0 3px 12px rgba(13,38,37,.34); }
.map-zoom-controls button { height: 32px; border: 0; border-radius: 2px; background: #e7d6b5; color: #17373a; font-size: 19px; cursor: pointer; }
.map-zoom-controls .zoom-level { display: grid; place-items: center; align-content: center; background: #285a5e; color: #f2e5c8; font-size: 10px; line-height: 1; }
.map-zoom-controls .zoom-level small { margin-top: 2px; color: #e8b96f; font-size: 7px; }
.back-world { top: 43px; left: 7px; z-index: 13; border-radius: 3px; padding: 4px 7px; font-size: 9px; }
.region-title { top: 42px; right: 8px; z-index: 13; }
.east-sea-view .region-title { padding:5px 8px; border-right:3px solid #e8b96f; background:linear-gradient(90deg,transparent,rgba(23,55,58,.88) 28%); }
.region-overview { position:absolute; z-index:13; left:7px; top:75px; display:flex; gap:4px; color:#eadcb9; font-size:8px; pointer-events:none; }
.region-overview span { padding:3px 6px; border:1px solid rgba(232,185,111,.55); border-radius:2px; background:rgba(23,55,58,.82); box-shadow:0 2px 7px rgba(13,38,37,.22); }
.region-overview b { color:#e8b96f; }
.east-sea-view::before { content:""; position:absolute; z-index:2; inset:0; pointer-events:none; box-shadow:inset 0 0 36px rgba(8,38,38,.32); }
.sea-island { width:92px; color:#f7e9bf; filter:none; }
.sea-island i { width:42px; height:42px; border:2px solid #e8c776; border-radius:50%; background:radial-gradient(circle,#d9c27c 0 13%,#426e61 15% 38%,rgba(23,55,58,.76) 40% 58%,transparent 60%); box-shadow:0 0 0 5px rgba(23,55,58,.22),0 4px 10px rgba(0,0,0,.32); filter:none; }
.sea-island b { display:inline-block; margin-top:3px; padding:2px 6px; border:1px solid rgba(232,185,111,.55); border-radius:2px; background:rgba(23,55,58,.88); font-size:11px; }
.sea-island small { width:max-content; max-width:100px; margin:2px auto 0; padding:1px 4px; border-radius:2px; background:rgba(23,55,58,.68); color:#c8d8ca; font-size:7px; }
.island-star { left:6%; top:67%; }.island-moon { right:13%; top:18%; }.island-distant { right:16%; top:62%; filter:none; }
.owned-island::after { right:4px; top:2px; background:#976a3e; border-color:#ffe09a; }
.ark-button { width:118px; left:37%; top:44%; z-index:4; filter:drop-shadow(0 5px 5px rgba(0,0,0,.34)); animation:arkFloat 5s ease-in-out infinite; }
.ark-button span { bottom:-2px; min-width:112px; padding:2px 5px; border-radius:2px; }
.ark-button b { font-size:9px; }.ark-button small { font-size:7px; }
.mission-route { height:2px; background:linear-gradient(90deg,#e8c776 var(--progress),rgba(231,214,181,.35) var(--progress)); }
.mission-route.to-star { left:43%; top:52%; width:34%; --route-angle:145deg; --counter-angle:-145deg; transform:rotate(var(--route-angle)); }
.mission-route.to-moon { left:45%; top:49%; width:41%; --route-angle:-34deg; --counter-angle:34deg; transform:rotate(var(--route-angle)); }
.mission-route.to-distant { left:45%; top:51%; width:38%; --route-angle:31deg; --counter-angle:-31deg; transform:rotate(var(--route-angle)); }
.mission-fleet { transform:translate(-50%,-50%) rotate(var(--counter-angle)); }
.mission-route .mission-caption { transform:translateX(-50%) rotate(var(--counter-angle)); }
.mission-route .mission-caption { top:8px; }
.province-pin { width: 44px; height: 38px; border-radius: 3px; color: #f3e5c5; background: rgba(23,55,58,.86); border-color: #e8b96f; box-shadow: 0 2px 5px rgba(23,55,58,.28); }
.province-pin b { font-size: 11px; }.province-pin small { top: 40px; min-width: 62px; font-size: 7px; }
.province-pin.province-scouted { border-color:#b9d8c7; background:rgba(36,92,82,.92); }
.province-pin.province-occupied { border-color:#f0c96f; box-shadow:0 0 0 3px rgba(232,185,111,.22),0 2px 7px rgba(23,55,58,.4); }
.province-pin.province-branch { background:#9a643d; border-color:#ffe09a; }
.province-pin.province-mission { animation:provinceMission 1.15s ease-in-out infinite; }
@keyframes provinceMission { 50% { box-shadow:0 0 0 9px rgba(232,185,111,.12),0 0 16px rgba(232,185,111,.75); } }

.event-panel { min-height: 66px; height: 66px; overflow: hidden; padding: 7px 9px; transition: height .22s ease; }
.event-head { margin-bottom: 3px; }
.event-head strong { font-size: 12px; letter-spacing: 2px; }
.event-head button { padding: 2px 5px; font-size: 8px; background: #d8c3a3; }
.event-log { height: 31px; overflow: hidden; }
.log-entry { display: none; padding: 1px 0; border: 0; font-size: 10px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-entry:first-child { display: block; }
.event-panel.expanded { position: fixed; z-index: 20; left: 50%; bottom: calc(72px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(100vw,480px); height: min(48dvh,430px); box-shadow: 0 -10px 28px rgba(13,38,37,.38); }
.event-panel.expanded .event-log { height: calc(100% - 29px); overflow-y: auto; }
.event-panel.expanded .log-entry { display: block; white-space: normal; font-size: 12px; padding: 4px 0; border-bottom: 1px dashed rgba(77,72,49,.18); }

.bottom-nav { width: min(100vw,480px); height: calc(72px + env(safe-area-inset-bottom)); background: #17373a; border-top: 1px solid #e8b96f; box-shadow: 0 -4px 14px rgba(13,38,37,.3); }
.bottom-nav button { color: #e7d6b5; }
.nav-seal { width: 31px; height: 31px; border-radius: 4px; border-width: 1px; background: #285a5e; box-shadow: inset 0 0 0 1px #17373a; }
.bottom-nav b { font-size: 10px; }

@media (min-width: 561px) {
  body { padding: 0; overflow: hidden; }
  .game-shell {
    width: 100vw; max-width: none; height: 100dvh; min-height: 0;
    border: 0; border-radius: 0; box-shadow: none;
    grid-template-rows: 96px 42px 36px minmax(0,1fr) 62px;
  }
  .clan-card {
    min-height: 96px; height: 96px; grid-template-columns: 230px 1fr;
    padding: 7px 18px; gap: 16px;
  }
  .founder-block { flex-direction: row; justify-content: flex-start; gap: 11px; }
  .founder-copy { margin-top: 0; text-align: left; }
  .founder-copy span { max-width: 150px; font-size: 9px; }
  .clan-stats { grid-template-columns: repeat(5,minmax(108px,1fr)); gap: 6px; }
  .clan-stats .wide { grid-column: auto; }
  .clan-stats > div { min-height: 28px; padding-inline: 8px; }
  .clan-stats span { font-size: 10px; }
  .clan-stats b { font-size: 12px; }
  .chronicle-bar { height: 42px; padding: 3px 18px; }
  .resource-ribbon { min-height: 36px; height: 36px; padding-inline: 12px; }
  .resource-ribbon > div { grid-template-columns: 19px 1fr; padding-inline: 8px; }
  .world { width: 100%; }
  #worldMapSurface { background-image: url("assets/jiuzhou-world-overview-wide-v1.png"); }
  #eastSeaSurface { background-image: url("assets/dongsheng-region-wide-v2.png"); }
  #provinceMapSurface { background-image:var(--region-wide); }
  .base-canvas {
    inset: 44px 0 51px;
    background-image: linear-gradient(180deg,rgba(23,55,58,.04),rgba(23,55,58,.13)),url("assets/floating-island-base-wide-v1.png");
  }
  .base-building { width: 82px; height: 76px; }
  .map-disciple { width: 34px; height: 34px; }
  .base-actions { width: min(760px,calc(100% - 24px)); gap: 5px; }
  .guide-panel { left: 50%; right: auto; width: min(720px,calc(100% - 24px)); transform: translateX(-50%); }
  .region-overview { left:18px; top:49px; font-size:9px; gap:6px; }
  .region-overview span { padding:4px 8px; }
  .sea-island { width:104px; }
  .sea-island i { width:46px; height:46px; }
  .island-star { left:8%; top:66%; }.island-moon { right:18%; top:18%; }.island-distant { right:20%; top:62%; }
  .ark-button { width:138px; left:36%; top:42%; }
  .province-site { left:var(--x); top:var(--y); width:112px; }
  .event-panel.expanded { width: 100vw; }
  .bottom-nav { width: 100vw; bottom: 0; border-radius: 0; }
}

@media (max-width: 560px) {
  .game-shell { grid-template-rows: auto auto auto minmax(0,1fr) 66px; }
  .clan-card { min-height: 108px; height: 108px; grid-template-columns: 96px 1fr; padding-left: 6px; padding-right: 6px; }
  .clan-stats { gap: 3px; }
  .clan-stats > div { padding: 3px 4px; }
  .clan-stats span { font-size: 8px; }
  .clan-stats b { font-size: 10px; }
  .chronicle-bar strong { font-size: 12px; }
  .round-btn { width: 27px; height: 27px; }
  .resource-ribbon b { font-size: 10px; }
  .world { height: auto; min-height: 0; }
  .base-canvas { inset: 43px 0 50px; }
  .base-status { top: 45px; }
  .base-building { width: 66px; height: 60px; }
  .modal-layer { place-items: end center; padding: 0; }
  .modal { width: 100%; max-height: 86dvh; border-radius: 12px 12px 0 0; }
  .modal-head { min-height: 54px; }.modal-head h2 { font-size: 20px; }.modal-body { max-height: calc(86dvh - 54px); }
  .map-zoom-controls { grid-template-columns: 31px 48px 31px; bottom: 6px; }
  .map-zoom-controls button { height: 29px; }
  .province-site { width:88px; }.province-site i { width:36px;height:36px; }.province-site b { font-size:10px; }.province-site small { max-width:92px; }
}

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