:root {
  --paper: #f2ecdd;
  --ink: #2b2620;
  --card: #fbf7ee;
  --line: #d8cfba;
  --accent: #8f2d2d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Noto Serif SC", "Songti SC", SimSun, "Microsoft YaHei", serif;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 2px solid var(--ink);
  background: var(--card);
}

header h1 { margin: 0; font-size: 22px; letter-spacing: 2px; }
.subtitle { font-size: 12px; opacity: .7; margin-left: 10px; }

.controls { display: flex; gap: 12px; align-items: center; }
.controls select { font: inherit; padding: 3px 8px; }
.meta { font-size: 13px; opacity: .8; }

.tabs { display: flex; gap: 4px; }
.tab {
  font: inherit; padding: 4px 14px; cursor: pointer;
  border: 1px solid var(--ink); background: var(--paper);
}
.tab.active { background: var(--ink); color: var(--paper); }

.hidden { display: none !important; }

#event-banner {
  margin: 4px; padding: 6px 10px; font-size: 14px;
  border: 1px solid var(--accent); background: #f7e8e3; color: #6b2424;
}
#event-banner img { height: 22px; vertical-align: middle; margin-right: 6px; }

#event-card { font-size: 13px; line-height: 1.55; }
#event-card img.ev-img { width: 100%; max-height: 110px; object-fit: cover; margin-bottom: 6px; }
#event-card .ev-choice { margin: 3px 0; }
#event-card .ev-tag { border: 1px solid var(--accent); color: var(--accent);
  font-size: 11px; padding: 0 5px; margin-right: 4px; }

.state-card { position: relative; }
.state-card .avatar {
  position: absolute; right: 8px; top: 8px; width: 34px; height: 34px;
  border: 1px solid var(--line); object-fit: cover;
}
.state-card .agent-portrait {
  position: absolute; right: 6px; top: 4px; width: 72px; height: 108px;
  object-fit: contain; filter: drop-shadow(0 2px 3px rgba(40,25,10,.18));
}
.state-card:has(.agent-portrait) h4 { padding-right: 76px; }
.state-card .pname { font-size: 15px; font-weight: bold; }
.state-card .cname { font-size: 12px; opacity: .75; }

.lb-panel { margin-bottom: 14px; }
#lb-table { width: 100%; border-collapse: collapse; font-size: 14px; }
#lb-table th, #lb-table td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
#lb-table th { background: #efe5cb; }
#lb-matches li { padding: 6px 2px; border-bottom: 1px dashed var(--line); cursor: pointer; font-size: 14px; }
#lb-matches li:hover { background: #f0e6cf; }


#view-spectate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 14px;
  padding: 14px;
  align-items: start;
}
#view-leaderboard { padding: 14px; max-width: 1100px; margin: 0 auto; }

#map-panel { background: var(--card); border: 1px solid var(--line); padding: 8px; }
#map { width: 100%; height: auto; display: block; }

#turn-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 4px 2px;
}
#turn-slider { flex: 1; }
#turn-label { min-width: 90px; text-align: right; font-size: 14px; }
#turn-bar button {
  font: inherit; border: 1px solid var(--ink); background: var(--paper);
  cursor: pointer; padding: 2px 10px;
}

#territory-strip { display: flex; flex-direction: column; gap: 0; padding: 6px 2px; overflow-x: auto; }
.territory-row { display: grid; grid-template-columns: 110px repeat(24, 44px); align-items: stretch; }
.territory-row + .territory-row { border-top: 1px solid rgba(120,100,70,.10); }
.territory-head { position: sticky; top: 0; z-index: 2; background: var(--card); font-size: 10px; color: #6f6250; }
.region-label { position: sticky; left: 0; z-index: 1; display: flex; align-items: center; gap: 3px; padding: 4px 6px; background: var(--card); font-size: 11px; white-space: nowrap; }
.region-label i { color: #9b7426; font-style: normal; font-size: 10px; }
.tseason { display: flex; align-items: center; justify-content: center; min-height: 24px; border-left: 1px solid rgba(120,100,70,.15); }
.tseason:nth-child(4n+1) { border-left: 3px solid rgba(120,100,70,.28); }
.tseason.active { background: #ead2b0; color: var(--accent); font-weight: bold; }
.tcell { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 3px; border: 0; border-left: 1px solid rgba(120,100,70,.12); background: transparent; cursor: pointer; }
.tcell:nth-child(4n+2) { border-left: 3px solid rgba(120,100,70,.28); }
.tcell img { width: 26px; height: 26px; object-fit: contain; opacity: .82; }
.tcell.changed img { opacity: 1; }
.tcell:hover, .tcell:focus-visible, .tcell.active { outline: 2px solid var(--accent); outline-offset: -2px; background: #f3e4c8; }
.change-flag { position: absolute; right: 1px; top: 0; padding: 0 2px; background: var(--accent); color: var(--paper); font-size: 9px; line-height: 13px; }
@media (max-width: 600px) { .territory-row { grid-template-columns: 96px repeat(24, 36px); }.tcell img { width: 24px; height: 24px; }.region-label { font-size: 10px; } }

#side-panel { display: flex; flex-direction: column; gap: 12px; }

.state-card {
  background: var(--card); border: 1px solid var(--line);
  border-left: 6px solid #999; padding: 8px 10px;
}
.state-card.dead { opacity: .5; }
.state-card h4 { margin: 0 0 4px; display: flex; justify-content: space-between; }
.state-card .score { font-weight: bold; color: var(--accent); }
.state-card table { width: 100%; font-size: 13px; border-collapse: collapse; }
.state-card td { padding: 1px 2px; }
.chip {
  display: inline-block; border: 1px solid var(--ink); border-radius: 10px;
  font-size: 11px; padding: 0 8px; margin-right: 4px;
}

.panel { background: var(--card); border: 1px solid var(--line); padding: 8px 10px; }
.panel h3 { margin: 2px 0 8px; font-size: 15px; border-bottom: 1px solid var(--line); }
#market-table { width: 100%; font-size: 13px; border-collapse: collapse; }
#market-table td { padding: 2px 4px; }
.price-up { color: #8f2d2d; }
.price-down { color: #2d6a4f; }

#event-list, #highlight-list {
  list-style: none; margin: 0; padding: 0;
  font-size: 13px; max-height: 260px; overflow-y: auto;
}
#event-list li, #highlight-list li {
  padding: 4px 2px; border-bottom: 1px dashed var(--line); line-height: 1.45;
}
#highlight-list li { cursor: pointer; }
#highlight-list li:hover { background: #f0e6cf; }
.hl-tag { font-size: 11px; border: 1px solid var(--accent); color: var(--accent); padding: 0 5px; margin-right: 5px; }

#winner-banner {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--ink); color: var(--paper);
  text-align: center; padding: 10px; font-size: 16px; letter-spacing: 2px;
}
.hidden { display: none; }

svg text { font-family: inherit; }
.edge { stroke: #b5a98c; stroke-width: 2.5; }
.region-node { stroke: #4a4136; stroke-width: 2; }
.region-fortress { stroke: #4a4136; stroke-width: 3; stroke-linejoin: round; }
.region-fortress .fortress-wall { fill: currentColor; fill-opacity: .42; }
.region-fortress .fortress-top { fill: currentColor; fill-opacity: .62; }
.region-fortress .fortress-base { fill: #5c4b3a; }
.region-fortress .fortress-gate { fill: #f4ecd8; stroke: #4a4136; stroke-width: 2; }
.region-name { font-size: 16px; font-weight: bold; fill: #211c15; text-anchor: middle; }
.region-info { font-size: 12px; fill: #3d362c; text-anchor: middle; }
.region-name, .region-info { paint-order: stroke; stroke: #f4ecd8; stroke-width: 3px; stroke-linejoin: round; }
.capital-ring { fill: none; stroke: #8f2d2d; stroke-width: 2.5; stroke-dasharray: none; }
.war-arrow { stroke-width: 3.5; opacity: .85; }
.battle-mark { font-size: 20px; text-anchor: middle; }

/* 特殊事件灯箱：图片点击放大，E01 风、E02 旗、E03 光、E04 风光。 */
#event-card img.ev-img { cursor: zoom-in; }
.event-lightbox {
  width: min(1080px, 94vw); max-height: 92vh; padding: 0; overflow: auto;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  box-shadow: 0 24px 80px rgba(24,18,12,.45);
}
.event-lightbox::backdrop { background: rgba(24,18,12,.72); backdrop-filter: blur(3px); }
.event-lightbox[open] { animation: lb-in .22s ease-out; }
#lb-close {
  position: absolute; right: 10px; top: 10px; z-index: 3; width: 36px; height: 36px;
  border: 1px solid var(--line); border-radius: 50%; background: rgba(251,247,238,.92);
  color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer;
}
.lb-scene { position: relative; overflow: hidden; background: #e8dcc2; }
#lb-image { display: block; width: 100%; max-height: 66vh; object-fit: cover; }
.lb-copy { padding: 16px 22px 20px; }
.lb-copy h2 { margin: 6px 0 8px; font-size: 24px; }
.lb-copy p { margin: 0 0 8px; line-height: 1.65; }
.lb-flag { position: absolute; top: 18px; width: 54px; height: 34px; display: none; transform-origin: left center; }
.lb-flag::before { content: ""; position: absolute; left: 0; top: -4px; width: 4px; height: 84px; background: #4b332b; }
.lb-flag::after { content: ""; position: absolute; left: 4px; top: 0; width: 50px; height: 34px; background: var(--accent); clip-path: polygon(0 0,100% 0,82% 50%,100% 100%,0 88%); }
.lb-flag.flag-a { left: 24px; }.lb-flag.flag-b { left: 88px; }
.event-lightbox.E02 .lb-flag { display: block; animation: flag-wave 1.7s ease-in-out infinite; }
.event-lightbox.E02 .flag-b { animation-delay: -.55s; }
.lb-wind { position: absolute; left: -35%; width: 32%; height: 3px; display: none; border-radius: 50%; background: linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent); filter: blur(.4px); }
.lb-wind.wind-a { top: 34%; }.lb-wind.wind-b { top: 62%; animation-delay: -.8s !important; }
.event-lightbox.E01 .lb-wind, .event-lightbox.E04 .lb-wind { display: block; animation: wind-pass 3.2s linear infinite; }
.lb-shine { position: absolute; inset: -20% auto -20% -35%; width: 28%; display: none; transform: skewX(-18deg); background: linear-gradient(90deg,transparent,rgba(255,245,196,.48),transparent); mix-blend-mode: screen; }
.event-lightbox.E03 .lb-shine, .event-lightbox.E04 .lb-shine { display: block; animation: shine-pass 3.4s ease-in-out infinite; }
@keyframes lb-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes flag-wave { 0%,100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(-7deg) scaleX(.84); } }
@keyframes wind-pass { 0% { transform: translateX(0); opacity: 0; } 18% { opacity: .9; } 75% { opacity: .55; } 100% { transform: translateX(420%); opacity: 0; } }
@keyframes shine-pass { 0% { transform: translateX(0) skewX(-18deg); opacity: 0; } 25% { opacity: .8; } 100% { transform: translateX(500%) skewX(-18deg); opacity: 0; } }
@media (max-width: 600px) { .lb-copy { padding: 12px 14px 16px; }.lb-copy h2 { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) {
  .event-lightbox[open], .event-lightbox .lb-flag, .event-lightbox .lb-wind, .event-lightbox .lb-shine { animation: none !important; }
  .event-lightbox.E02 .lb-flag, .event-lightbox.E01 .lb-wind, .event-lightbox.E04 .lb-wind, .event-lightbox.E03 .lb-shine, .event-lightbox.E04 .lb-shine { display: none; }
}

/* 四季动效层（ws-map-v2）：夹在底图与城塞/文字/箭头之间，不遮挡任何节点信息；
 * 只动 transform/opacity；reduced-motion 下隐藏粒子与光线，保留静态色温。 */
.season-layer { pointer-events: none; }
.sfx-p {
  transform-box: fill-box; transform-origin: center;
  animation: sfx-fall var(--d, 12s) linear infinite; animation-delay: var(--dl, 0s);
  will-change: transform, opacity;
}
.sfx-beam {
  animation: sfx-beam var(--d, 9s) ease-in-out infinite; animation-delay: var(--dl, 0s);
  will-change: transform, opacity;
}
@keyframes sfx-fall {
  0%   { transform: translate(0, -60px) rotate(0turn) scale(var(--s, 1)); opacity: 0; }
  6%   { opacity: var(--o, .8); }
  88%  { opacity: var(--o, .8); }
  100% { transform: translate(var(--dx, 30px), 800px) rotate(var(--r, 1.5turn)) scale(var(--s, 1)); opacity: 0; }
}
@keyframes sfx-beam {
  0%, 100% { transform: translate(-40px, 0); opacity: .12; }
  50%      { transform: translate(40px, 0); opacity: var(--o, .45); }
}
@media (prefers-reduced-motion: reduce) {
  .sfx-p, .sfx-beam { display: none; }
}

/* 上线美术与窄屏适配：地图、侧栏和顶部控制均不得撑出视口。 */
html, body { max-width: 100%; overflow-x: hidden; }
header { flex-wrap: wrap; gap: 8px; }
.controls { flex-wrap: wrap; justify-content: flex-end; }
#map-panel, #side-panel, .panel, .state-card { min-width: 0; }
@media (min-width: 901px) { body { padding-bottom: 42px; } }
@media (max-width: 900px) {
  header { align-items: flex-start; flex-direction: column; padding: 10px 12px; }
  header h1 { font-size: 20px; }
  .subtitle { margin-left: 0; }
  .controls { width: 100%; justify-content: flex-start; gap: 8px; }
  .meta { width: 100%; font-size: 12px; }
  #view-spectate { display: flex; flex-direction: column; padding: 8px; gap: 10px; }
  #map-panel, #side-panel { width: 100%; min-width: 0; }
  #side-panel { display: grid; grid-template-columns: 1fr; gap: 10px; }
  #turn-bar { flex-wrap: wrap; gap: 6px; }
  #turn-slider { min-width: 100px; flex: 1 1 120px; }
  #turn-label { min-width: 70px; font-size: 12px; }
  #event-card img.ev-img { max-height: 180px; }
  .state-card h4 { gap: 4px; flex-wrap: wrap; }
  .state-card .avatar { width: 40px; height: 40px; }
  #lb-table { display: block; overflow-x: auto; white-space: nowrap; }
  #winner-banner { position: static; font-size: 13px; letter-spacing: 0; padding: 10px; }
}