@font-face {
  font-family: "ZCOOL XiaoWei Title";
  src: url("../assets/fonts/ZCOOLXiaoWei-Title.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
}

:root {
  color-scheme: light;
  --paper: #e7e3d4;
  --paper-light: #f3efe2;
  --ink: #30382f;
  --muted: #817765;
  --forest: #315b43;
  --gold: #a9824e;
  --season-accent: #64777f;
  --season-deep: #48565c;
  --season-on: #f7f2e4;
  --season-soft: rgba(100,119,127,.18);
  --season-muted: rgba(72,86,92,.72);
  --season-shadow: rgba(72,86,92,.20);
  --sans: "Alibaba PuHuiTi 3.0", "Alibaba PuHuiTi", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  font-family: var(--sans);
}

.terrain-lab[data-season="0"] {
  --season-accent: #8f8393;
  --season-deep: #5d585f;
  --season-on: #f7f2e4;
  --season-soft: rgba(143,131,147,.18);
  --season-muted: rgba(93,88,95,.72);
  --season-shadow: rgba(93,88,95,.20);
}
.terrain-lab[data-season="1"] {
  --season-accent: #64777f;
  --season-deep: #48565c;
  --season-on: #f7f2e4;
  --season-soft: rgba(100,119,127,.18);
  --season-muted: rgba(72,86,92,.72);
  --season-shadow: rgba(72,86,92,.20);
}
.terrain-lab[data-season="2"] {
  --season-accent: #8a6668;
  --season-deep: #625052;
  --season-on: #f7f2e4;
  --season-soft: rgba(138,102,104,.18);
  --season-muted: rgba(98,80,82,.72);
  --season-shadow: rgba(98,80,82,.20);
}
.terrain-lab[data-season="3"] {
  --season-accent: #566777;
  --season-deep: #434f59;
  --season-on: #f7f2e4;
  --season-soft: rgba(86,103,119,.17);
  --season-muted: rgba(67,79,89,.72);
  --season-shadow: rgba(67,79,89,.20);
}

* { box-sizing: border-box; -webkit-user-select: none; user-select: none; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; color: var(--ink); background: var(--paper); }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.terrain-lab {
  position: relative;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='38' viewBox='0 0 34 38'%3E%3Cpath d='M7 34 24 7' stroke='%234c5147' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M8 35 5 29l7 3Z' fill='%23717a6e' stroke='%234c5147' stroke-width='1.2' stroke-linejoin='round'/%3E%3Cpath d='m21 10 5 5' stroke='%23b79262' stroke-width='3.8' stroke-linecap='round'/%3E%3Cpath d='m24 7 4 4' stroke='%233d453e' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") 7 34, crosshair;
  touch-action: none;
  background-color: var(--paper);
  background-image: url("../assets/textures/xuan-paper-hd.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#terrainLab.is-dragging, #terrainLab.is-orbiting { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='31' viewBox='0 0 30 31'%3E%3Cpath d='M6 27c-1.7-3.3-2.2-7-1.3-10.7l1.5-6.8c.4-1.8 3-1.4 2.9.4l-.2 3.7 1.7-6.8c.5-1.7 3-1.1 2.6.7l-1.1 5.1 2-5.7c.6-1.6 3-.7 2.3.9l-1.8 4.9 2.4-4c.8-1.4 3-.2 2.2 1.2l-2.4 4.1 4.2-2.9c1.4-1 2.8 1 1.5 2l-5.6 4.3c-2.2 2.7-3.4 6.9-4.6 10Z' fill='%23d5c4a4' stroke='%235b5649' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M7.4 19c3.1 1.4 7.4 2.2 11.5 1.9M8.4 23c2.7 1.2 6.3 1.8 9.6 1.4' stroke='%238a785d' stroke-width='1' opacity='.88'/%3E%3C/svg%3E") 14 14, grabbing; }
.terrain-lab button,.terrain-lab input { cursor: inherit; }
.terrain-lab::before,
.terrain-lab::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  display: none;
}
.terrain-lab::before {
  opacity: .72;
  background-image: url("data:image/svg+xml,%3Csvg width='320' height='320' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018 .12' numOctaves='5' seed='19' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.42 0 0 0 .38 0 .39 0 0 .36 0 0 .33 0 .30 0 0 0 .38 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='.46'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  filter: contrast(1.28);
}
.terrain-lab::after {
  opacity: .58;
  background-image: url("data:image/svg+xml,%3Csvg width='210' height='210' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='fiber'%3E%3CfeTurbulence type='turbulence' baseFrequency='.006 .42' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.6 0 0 0 .35 0 .56 0 0 .32 0 0 .5 0 .28 0 0 0 .34 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fiber)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  filter: contrast(1.55);
}
.terrain-lab::before {
  inset: 0 0 auto;
  /* Keep the paper wash above the WebGL canvas, but below the controls. */
  z-index: 4;
  display: block;
  width: 100%;
  height: clamp(260px,42vh,440px);
  opacity: 1;
  background:
    radial-gradient(ellipse 54% 74% at 17% 0%,rgba(255,253,244,.88) 0%,rgba(250,247,233,.66) 45%,rgba(248,245,228,.18) 78%,transparent 100%),
    linear-gradient(180deg,rgba(249,246,231,.82) 0%,rgba(249,246,231,.62) 35%,rgba(249,246,231,.26) 70%,rgba(249,246,231,0) 100%);
  mix-blend-mode: normal;
  filter: none;
}

#terrainCanvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(20px 30px 22px rgba(30,42,29,.27));
}

#seaSurface {
  position:absolute;
  inset:0;
  z-index:3;
  width:100%;
  height:100%;
  pointer-events:none;
}

/* National terrain tiles retain transparent inland-water cut-outs. Without
   this projected land shield, the maritime sheet shows through them as sea. */
#landShield {
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  pointer-events:none;
}

/* The maritime overlay is projected with the same camera as the terrain. It
   deliberately stays light: the terrain remains the primary subject while
   the official-style discontinuous sea marks remain legible. */
#maritimeOverlay {
  position:absolute;
  inset:0;
  z-index:3;
  width:100%;
  height:100%;
  pointer-events:none;
}

.lab-title {
  position: absolute;
  top: clamp(25px,4.8vw,62px);
  left: clamp(24px,4.8vw,70px);
  right: clamp(112px,11.5vw,165px);
  z-index: 6;
  width: auto;
  pointer-events: none;
  isolation: isolate;
}
.lab-title::before {
  position: absolute;
  top: clamp(-17px,-1.4vw,-8px);
  right: clamp(-28px,-3vw,-14px);
  bottom: clamp(-44px,-4.8vw,-25px);
  left: clamp(-28px,-3vw,-14px);
  z-index: -1;
  border-radius: 0 0 34% 16%;
  background:
    radial-gradient(ellipse 90% 72% at 17% 4%,rgba(255,253,244,.78) 0%,rgba(250,247,233,.60) 48%,rgba(248,244,225,.10) 78%,transparent 100%),
    linear-gradient(180deg,rgba(248,245,229,.75) 0%,rgba(248,245,229,.56) 44%,rgba(248,245,229,.20) 72%,rgba(248,245,229,0) 100%);
  box-shadow: 0 12px 25px rgba(102,91,63,.035);
  /* A full-width backdrop filter keeps blurring even where the gradient is
     transparent, which reads as a hard rectangular fold over the terrain. */
  backdrop-filter: none;
  content: "";
  display: none;
}
.title-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  min-width: 0;
  white-space: nowrap;
}
.title-lockup { display: flex; flex: 0 1 auto; align-items: flex-end; min-width: 0; }
.eyebrow {
  margin: 0 0 5px;
  color: #817561;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .28em;
}
.lab-title h1 {
  flex: none;
  margin: 0;
  color: #817561;
  font-family: "ZCOOL XiaoWei Title",var(--serif);
  font-size: clamp(38px,4.25vw,60px);
  font-weight: 400;
  line-height: .94;
  letter-spacing: clamp(.08em,.65vw,.17em);
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
  transform: translateY(-3px);
}
.title-notes { flex: 0 1 140px; width: clamp(88px,10vw,140px); min-width: 68px; margin: 0 0 3px clamp(7px,1vw,13px); padding-left: clamp(7px,1vw,13px); border-left: 1px solid rgba(64,75,59,.18); }
.title-deck {
  margin: 0;
  color: rgba(80,76,63,.6);
  font-family: Georgia,serif;
  font-size: 8px;
  line-height: 1.55;
  letter-spacing: .13em;
}

.lab-panel {
  width: 100%;
  margin-top: clamp(10px,1.35vw,16px);
  padding-top: clamp(8px,1vw,11px);
  border-top: 1px solid rgba(67,75,58,.2);
  pointer-events: auto;
}
.terrain-controls {
  display: grid;
  grid-template-columns: repeat(3,minmax(190px,270px));
  justify-content: start;
  gap: clamp(30px,3.6vw,54px);
}
.terrain-controls label {
  display: grid;
  grid-template-columns: auto minmax(92px,1fr) 32px;
  align-items: center;
  column-gap: 8px;
  min-width: 0;
}
.terrain-controls label > span {
  display: block;
  color: #5c6255;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .08em;
  white-space: nowrap;
}
.terrain-controls output {
  min-width: 32px;
  margin-left: 0;
  color: var(--season-deep);
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .02em;
  text-align: left;
  white-space: nowrap;
}
 .terrain-controls output,.zoom-tools button,.admin-control > output,.switch,.system-caption,.runtime-line span b,.stream-state,.map-scale { transition: color .42s ease,border-color .42s ease,background-color .42s ease,box-shadow .42s ease; }
input[type="range"] { accent-color: var(--season-accent); cursor: pointer; }
.terrain-lab button,
.terrain-lab input {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='38' viewBox='0 0 34 38'%3E%3Cpath d='M11 35 7 29 7 17c0-2.2 3.2-2.4 3.4-.2l.6 5.3V8c0-2.4 3.5-2.4 3.5 0v11.2l.8-13.4c.1-2.3 3.5-2.2 3.5.1l-.3 13.2 1.1-10.2c.3-2.2 3.6-1.9 3.4.4L28.8 21l1.6-4.2c.8-2 3.7-.9 2.9 1.1l-3.6 9.2c-1.2 3.2-3 5.3-5.5 7.9Z' fill='%23dbc9a7' stroke='%235b5648' stroke-width='1.35' stroke-linejoin='round'/%3E%3Cpath d='M11 26h15M12 30h11' stroke='%238e795c' stroke-width='1.1' opacity='.85'/%3E%3Cpath d='M11 19h3.5' stroke='%236f806e' stroke-width='2.1'/%3E%3C/svg%3E") 15 9, pointer;
}
.terrain-controls input[type="range"] { width: 100%; height: 2px; margin: 0; }
.control-foot { position: static; display: flex; flex: 0 1 auto; align-items: center; justify-content: flex-start; gap: clamp(42px,4.8vw,72px); width: auto; min-width: 0; margin: 0 0 0 clamp(48px,5.4vw,82px); pointer-events: auto; white-space: nowrap; }
.season-control { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.season-control > span,
.admin-control > span { color: #8b806d; font-size: 8px; font-weight: 400; letter-spacing: .13em; }
.season-control > div {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 2px;
  padding: 2px;
  border: 1px solid rgba(72,79,62,.13);
  border-radius: 999px;
  background: rgba(239,235,220,.38);
}
.season-control button {
  width: 27px;
  height: 23px;
  padding: 0;
  color: var(--season-muted);
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--serif);
  font-size: 10px;
  cursor: pointer;
  transition: color .18s ease,background .18s ease,box-shadow .18s ease;
}
.season-control button:hover { color: var(--season-deep); }
.season-control button[aria-pressed="true"] { color: var(--season-on); background: var(--season-accent); box-shadow: 0 2px 8px var(--season-shadow); }
.admin-control { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.admin-control > output { color: var(--season-deep); font-size: 7px; text-align: right; }
.switch {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 21px;
  padding: 0 6px;
  color: #6d7167;
  border: 1px solid rgba(72,79,62,.14);
  border-radius: 999px;
  background: rgba(239,235,220,.38);
  font-size: 7px;
  cursor: pointer;
}
.switch i { position: relative; width: 18px; height: 9px; border-radius: 8px; background: #a3a294; transition: background .2s ease; }
.switch i::after { position: absolute; top: 1.5px; left: 1.5px; width: 6px; height: 6px; border-radius: 50%; background: #f5f0df; content: ""; transition: transform .2s ease; }
.switch[aria-checked="true"] { color: var(--season-deep); border-color: var(--season-soft); }
.switch[aria-checked="true"] i { background: var(--season-accent); }
.switch[aria-checked="true"] i::after { transform: translateX(9px); }
.switch b { font-weight: 400; }

.north-mark {
  --bearing: 0deg;
  --compass-tilt: 20deg;
  position: absolute;
  top: clamp(24px,4.5vw,55px);
  right: clamp(24px,4.5vw,60px);
  z-index: 7;
  display: grid;
  justify-items: center;
  perspective: 180px;
  color: #4e594e;
  pointer-events: none;
}
.compass-body {
  position: relative;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(69,74,58,.34);
  border-radius: 50%;
  background: rgba(238,233,216,.86);
  box-shadow: 0 7px 0 #aaa795,0 10px 16px rgba(51,57,45,.18),inset 0 0 0 5px rgba(255,253,240,.48);
  transform: rotateX(var(--compass-tilt));
  transform-style: preserve-3d;
  transition: transform .12s ease;
}
.compass-body::after { position: absolute; inset: 7px; border: 1px dashed rgba(74,81,63,.24); border-radius: 50%; content: ""; }
.compass-face { position: absolute; inset: 0; font-family: Georgia,serif; }
.direction-layer { position: absolute; inset: 0; transform: rotate(var(--bearing)); transform-origin: 50% 50%; transition: transform .08s linear; }
.direction-layer > span { position: absolute; left: 50%; z-index: 2; font-size: 7px; line-height: 1; transform: translateX(-50%); }
.compass-n { top: 3px; color: #985c4e; }
.compass-s { bottom: 3px; color: #737567; }
.compass-face i {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 6px;
  height: 28px;
  margin: -14px 0 0 -3px;
  font-style: normal;
}
.compass-face i b { position: absolute; left: 0; top: 0; width: 6px; height: 14px; background: #9b584c; clip-path: polygon(50% 0,100% 100%,50% 80%,0 100%); filter: drop-shadow(1px 1px 0 rgba(73,47,39,.25)); }
.compass-face i::after { position: absolute; left: 1px; bottom: 0; width: 4px; height: 14px; background: #49584d; clip-path: polygon(50% 100%,100% 0,50% 18%,0 0); content: ""; }
.zoom-tools {
  position: absolute;
  right: clamp(22px,2.3vw,34px);
  top: 50%;
  z-index: 8;
  display: grid;
  grid-template-columns: 28px;
  grid-template-rows: 28px 172px 28px 34px 28px;
  width: 28px;
  justify-items: center;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: translateY(-50%);
  isolation: isolate;
}
.zoom-tools::before {
  position: absolute;
  inset: -13px -14px -14px;
  z-index: -1;
  border: 1px solid rgba(116,108,88,.22);
  border-radius: 19px 13px 17px 15px;
  background: linear-gradient(160deg,rgba(255,253,242,.87),rgba(244,239,220,.66));
  box-shadow: 4px 8px 18px rgba(68,67,51,.12),inset 0 1px rgba(255,255,255,.62);
  backdrop-filter: blur(7px);
  content: "";
}
.zoom-tools button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--season-deep);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 300;
  cursor: pointer;
  transition: color .18s ease,background .18s ease,transform .18s ease;
}
.zoom-tools button:hover { color: var(--season-accent); background: transparent; transform: scale(1.08); }
.zoom-tools input[type="range"] { width: 164px; height: 12px; margin: 0; justify-self: center; transform: rotate(-90deg); }
.zoom-tools .reset-view { margin-top: 3px; border: 0; background: transparent; }
.reset-view svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.clean-view { margin-top: 2px; }
.clean-view svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.clean-exit {
  position: absolute;
  top: clamp(18px,2.5vw,32px);
  left: clamp(18px,2.5vw,32px);
  z-index: 12;
  display: flex;
  align-items: center;
  width: 32px;
  height: 32px;
  gap: 8px;
  overflow: hidden;
  padding: 0 9px;
  color: #625b4d;
  border: 1px solid rgba(102,91,67,.22);
  border-radius: 12px;
  background: rgba(252,249,235,.86);
  box-shadow: 3px 5px 13px rgba(70,65,48,.12);
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .08em;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(.88);
  transition: width .26s cubic-bezier(.2,.8,.2,1),opacity .2s ease,transform .26s cubic-bezier(.2,.8,.2,1),background .25s ease;
}
.clean-exit svg { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.clean-exit span { white-space: nowrap; }
.clean-exit:hover { width: 108px; background: rgba(255,253,242,.95); }
.terrain-lab.is-clean .clean-exit { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.terrain-lab.is-clean .lab-title,.terrain-lab.is-clean .north-mark,.terrain-lab.is-clean .map-scale,.terrain-lab.is-clean .system-caption,.terrain-lab.is-clean .region-tip { opacity: 0; pointer-events: none; transform: translateY(-10px); }
.terrain-lab.is-clean .zoom-tools { opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(14px); }
.terrain-lab.is-clean::before { opacity: 0; }
.lab-title,.north-mark,.zoom-tools,.map-scale,.system-caption,.region-tip,.terrain-lab::before { transition: opacity .32s ease,transform .32s cubic-bezier(.2,.8,.2,1); }
.terrain-lab.is-entering .lab-title,
.terrain-lab.is-entering .north-mark,
.terrain-lab.is-entering .map-scale,
.terrain-lab.is-entering .system-caption {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-14px);
}
.terrain-lab.is-entering .zoom-tools {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(18px);
}
.terrain-lab.is-entering::before { opacity: .22; }

/* Every clickable control shares one precise, climbing-glove click state. */
#terrainLab button,
#terrainLab input {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='33' viewBox='0 0 28 33'%3E%3Cpath d='M6 30c-1.6-3.1-2.1-6.5-1.7-10v-3.4c0-1.9 2.8-2.1 3.1-.2l.7 4.1V6.2c0-2.1 3.2-2.1 3.2 0v13.2l1.4-3.3c.7-1.6 3.1-.6 2.5 1.1l-1.3 3.3 2.1-2.2c1.2-1.3 3.2.5 2 1.8L15 23.4c-1.5 1.8-2.2 4.3-2.5 6.6Z' fill='%23dbc9a7' stroke='%235b5648' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M5.8 24c2.4.8 5.1.9 7.7.5M6.4 27.2c1.9.7 3.9.8 5.8.5' stroke='%238e795c' stroke-width='1' opacity='.86'/%3E%3Cpath d='M8.2 20.5h3.1' stroke='%236f806e' stroke-width='1.8'/%3E%3C/svg%3E") 10 6, pointer;
}

.system-caption {
  position: absolute;
  right: clamp(21px,4vw,56px);
  bottom: 20px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 13px;
  color: var(--season-muted);
  font-family: var(--sans);
  pointer-events: none;
}
.map-scale {
  position: absolute;
  left: clamp(24px,4.8vw,70px);
  bottom: 20px;
  z-index: 6;
  display: grid;
  gap: 5px;
  color: var(--season-deep);
  font-family: var(--sans);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .12em;
  pointer-events: none;
}
.scale-bar { position: relative; width: 96px; height: 7px; border-bottom: 1px solid currentColor; transition: width .34s cubic-bezier(.45,0,.2,1),color .42s ease; }
.scale-bar::before,.scale-bar::after { position: relative; display: block; height: 7px; border-left: 1px solid currentColor; content: ""; }
.scale-bar::after { position: absolute; right: 0; top: 0; border-right: 1px solid currentColor; }
.map-scale output { color: inherit; font: inherit; }
.gesture { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 0; font-size: 9px; font-weight: 300; letter-spacing: .045em; white-space: nowrap; }
.runtime-line { display: flex; align-items: center; justify-content: flex-end; gap: 11px; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 8px; letter-spacing: .035em; }
.runtime-line span { white-space: nowrap; }
.runtime-line span b { color: var(--season-deep); font-weight: 600; }
.stream-state { display: flex; align-items: center; gap: 5px; color: var(--season-deep); font-size: 8px; font-weight: 400; }
.stream-state i { width: 5px; height: 5px; border-radius: 50%; background: var(--season-accent); box-shadow: 0 0 0 3px var(--season-soft); }
.stream-state.is-loading i { animation: pulse 1s ease-in-out infinite; }
.stream-state b { font-weight: 400; }

.region-tip {
  position: absolute;
  z-index: 10;
  min-width: 132px;
  padding: 8px 15px 9px 18px;
  border: 1px solid color-mix(in srgb,var(--season-accent) 38%,#8c8069);
  border-radius: 2px 10px 10px 2px;
  background: linear-gradient(100deg,rgba(252,249,235,.95),rgba(239,234,213,.88));
  box-shadow: 5px 8px 0 rgba(91,81,57,.10),10px 14px 22px rgba(48,56,39,.11);
  opacity: 0;
  pointer-events: none;
  transform: translate(15px,-50%) scale(.96);
  transform-origin: left center;
  transition: opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1),border-color .42s ease,box-shadow .42s ease;
  backdrop-filter: blur(9px);
}
.region-tip::before { position: absolute; top: 8px; bottom: 8px; left: 7px; width: 2px; border-radius: 2px; background: var(--season-accent); box-shadow: 0 0 0 2px var(--season-soft); content: ""; transition: background .42s ease,box-shadow .42s ease; }
.region-tip::after { position: absolute; left: -5px; top: 50%; width: 9px; height: 9px; border-left: 1px solid color-mix(in srgb,var(--season-accent) 38%,#8c8069); border-bottom: 1px solid color-mix(in srgb,var(--season-accent) 38%,#8c8069); background: #faf6e7; content: ""; transform: translateY(-50%) rotate(45deg); }
.region-tip.is-visible { opacity: 1; transform: translate(15px,-50%) scale(1); }
.region-tip small { display: block; margin-bottom: 3px; color: #947e5d; font-family: var(--sans); font-size: 7px; font-weight: 500; letter-spacing: .16em; }
.region-tip strong { color: var(--season-deep); font-family: var(--serif); font-size: 14px; font-weight: 600; letter-spacing: .12em; transition: color .42s ease; }

.loading {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 12;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 18px 24px;
  color: #6c735f;
  border: 1px solid rgba(74,82,64,.18);
  border-radius: 14px 8px 16px 10px;
  background: rgba(245,242,228,.92);
  transform: translate(-50%,-50%);
  transition: opacity .3s ease,visibility .3s ease;
}
.loading.is-hidden { opacity: 0; visibility: hidden; }
.loading i { width: 22px; height: 22px; border: 2px solid #c9c6b0; border-top-color: var(--season-accent); border-radius: 50%; animation: spin .9s linear infinite; }

.lab-title h1,
.terrain-controls label > span,
.terrain-controls output,
.season-control > span,
.admin-control > span,
.admin-control > output,
.season-control button,
.switch,
.switch i,
.north-mark,
.compass-n,
.compass-s,
.compass-face i b,
.compass-face i::after,
.zoom-tools button,
.system-caption,
.runtime-line span b,
.stream-state,
.stream-state i,
.region-tip strong,
.loading i { transition: color .28s ease,background-color .28s ease,border-color .28s ease,box-shadow .28s ease; }
.loading span { font-family: var(--sans); font-size: 10px; font-weight: 300; letter-spacing: .1em; }

@keyframes spin { to { transform: rotate(1turn); } }
@keyframes pulse { 50% { opacity: .35; transform: scale(.75); } }

@media (max-width:950px) {
  .lab-title { left: 22px; right: 104px; width: auto; }
  .title-row { gap: 0; }
  .lab-title h1 { font-size: clamp(30px,4.6vw,42px); letter-spacing: .08em; }
  .title-notes { display: block; flex-basis: 96px; width: 96px; min-width: 70px; margin-left: 7px; padding-left: 7px; }
  .eyebrow { font-size: 7px; letter-spacing: .18em; }
  .title-deck { font-size: 6px; letter-spacing: .08em; }
  .control-foot { gap: clamp(20px,3vw,30px); margin-left: clamp(26px,3.6vw,38px); }
  .season-control { gap: 4px; }
  .season-control button { width: 23px; height: 21px; }
  .admin-control { gap: 4px; }
  .switch { padding: 0 5px; }
  .terrain-controls { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
  .terrain-controls label { grid-template-columns: auto minmax(44px,1fr) 28px; column-gap: 6px; }
}

@media (max-width:720px) {
  .lab-title { top: 14px; left: 10px; right: 72px; width: auto; }
  .title-row { gap: 0; }
  .lab-title h1 { font-size: clamp(20px,7vw,30px); letter-spacing: .035em; }
  .title-notes { flex-basis: 62px; width: 62px; min-width: 48px; margin-left: 4px; padding-left: 4px; }
  .eyebrow { margin-bottom: 2px; font-size: 5px; letter-spacing: .08em; }
  .title-deck { font-size: 4px; line-height: 1.3; letter-spacing: .025em; }
  .control-foot { gap: clamp(16px,5vw,22px); margin-left: clamp(16px,5vw,22px); }
  .season-control { gap: 3px; }
  .season-control > span,
  .admin-control > span { font-size: 7px; letter-spacing: .04em; }
  .season-control > div { gap: 0; padding: 1px; }
  .season-control button { width: 18px; height: 18px; font-size: 8px; }
  .admin-control { gap: 3px; }
  .admin-control > output { font-size: 6px; }
  .switch { height: 18px; gap: 3px; padding: 0 3px; font-size: 6px; }
  .switch i { width: 15px; height: 8px; }
  .switch i::after { top: 1px; left: 1px; }
  .switch[aria-checked="true"] i::after { transform: translateX(7px); }
  .lab-panel { width: 100%; margin-top: 8px; padding-top: 7px; }
  .terrain-controls { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .terrain-controls label { grid-template-columns: auto minmax(18px,1fr) 22px; column-gap: 3px; }
  .terrain-controls label > span,
  .terrain-controls output { min-width: 0; font-size: 6px; letter-spacing: 0; }
  .north-mark { top: 18px; right: 16px; transform: scale(.83); transform-origin: top right; }
  .zoom-tools { right: 12px; transform: translateY(-42%) scale(.9); transform-origin: right center; }
  .system-caption { left: 8px; right: 8px; bottom: 10px; justify-content: flex-end; gap: 5px; }
  .gesture { display: flex; gap: 4px; font-size: clamp(6px,1vw,8px); letter-spacing: 0; }
  .runtime-line { gap: 3px; font-size: clamp(6px,1vw,8px); letter-spacing: 0; }
  .stream-state { gap: 2px; font-size: clamp(6px,1vw,8px); }
  .stream-state i { width: 3px; height: 3px; box-shadow: none; }
  .runtime-line span:nth-of-type(3),.runtime-line span:nth-of-type(4) { display: inline; }
}
@media (prefers-reduced-motion:reduce) { .loading i,.stream-state.is-loading i { animation: none; } }
.region-tip button { margin-top:6px; border:1px solid currentColor; background:rgba(250,247,234,.82); color:#4d5d52; padding:5px 7px; font:600 8px/1 var(--sans); letter-spacing:.1em; cursor:pointer; }.region-tip button:disabled { color:#918979; cursor:default; }
.terrain-lab.is-national .return-china { display:none !important; }

/* China overview: light province selector; detailed terrain stays inside a province package. */
.china-overview { position:absolute; inset:0; z-index:14; display:none; overflow:hidden; background:linear-gradient(116deg,rgba(243,239,222,.86),rgba(234,229,210,.46)); touch-action:none; cursor:inherit; }
.terrain-lab.is-china-mode .china-overview { display:block; }
.terrain-lab.is-china-mode > :not(.china-overview):not(.return-china) { visibility:hidden; pointer-events:none; }
.china-overview__head { position:absolute; top:calc(50% - 290px); left:max(8vw,64px); z-index:2; display:grid; gap:5px; color:#453d30; pointer-events:none; }
.china-overview__head span { font:500 11px/1 var(--sans); letter-spacing:.36em; }
.china-overview__head b { font:600 20px/1 var(--serif); letter-spacing:.16em; }
.china-overview__map { width:100%; height:100%; overflow:visible; }
.china-map__transform { transform:var(--china-transform); transform-origin:500px 380px; transition:transform .08s linear; }
.province-shape { fill:rgba(177,171,137,.22); stroke:rgba(81,72,55,.68); stroke-width:1.15; vector-effect:non-scaling-stroke; transition:fill .24s ease,stroke .24s ease,filter .24s ease; outline:none; }
.province-shape:hover,.province-shape:focus-visible { fill:rgba(111,125,105,.42); stroke:#4f6255; filter:drop-shadow(0 2px 3px rgba(61,52,36,.18)); }
.province-shape.is-selected { fill:rgba(127,91,71,.52); stroke:#6f3f31; stroke-width:1.5; filter:drop-shadow(0 3px 5px rgba(61,52,36,.24)); }
.china-overview__hint { position:absolute; left:50%; bottom:28px; transform:translateX(-50%); margin:0; color:rgba(61,54,41,.72); font:500 10px/1 var(--sans); letter-spacing:.14em; white-space:nowrap; pointer-events:none; }
.province-plaque { position:absolute; z-index:3; left:50%; top:50%; min-width:174px; padding:13px 15px 12px; color:#3f3629; background:linear-gradient(135deg,rgba(248,245,231,.96),rgba(228,220,193,.9)); border:1px solid rgba(105,89,62,.44); box-shadow:0 9px 24px rgba(69,57,35,.2); transform:translate(-50%,-44%) scale(.96); opacity:0; pointer-events:none; transition:opacity .2s ease,transform .2s ease; }
.province-plaque::before { content:""; position:absolute; inset:4px; border:1px solid rgba(120,102,72,.18); pointer-events:none; }
.province-plaque.is-visible { opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto; }
.province-plaque small,.province-plaque strong { position:relative; display:block; }
.province-plaque small { margin-bottom:5px; font:500 9px/1.3 var(--sans); letter-spacing:.1em; color:#796d58; }
.province-plaque strong { margin-bottom:10px; font:600 20px/1 var(--serif); letter-spacing:.12em; }
.province-plaque button,.return-china { position:relative; border:1px solid currentColor; color:#4c5d52; background:rgba(255,253,244,.58); font:600 10px/1 var(--sans); letter-spacing:.12em; padding:8px 10px; cursor:pointer; }
.province-plaque button:disabled { color:#948c7b; cursor:default; }
.return-china { position:absolute; z-index:16; left:22px; bottom:22px; display:none; }
.terrain-lab:not(.is-china-mode) .return-china { display:block; }
.terrain-lab:not(.is-china-mode) .map-scale { left:22px; bottom:88px; }
@media (max-width:720px) { .china-overview__head { top:24px; left:18px; }.china-overview__head span { font-size:9px; }.china-overview__head b { font-size:17px; }.province-plaque { top:56%; min-width:156px; }.china-overview__hint { bottom:20px; font-size:8px; }.return-china { left:12px; bottom:14px; font-size:8px; padding:7px 8px; }.terrain-lab:not(.is-china-mode) .map-scale { left:12px; bottom:66px; } }