/* css/clanworld.css — the Clan overworld page, #clanworld (DECISIONS 564, 565; js/ui/clanworld.js).
 * The island picture (assets/map/clanlands.svg) with the roads, places and names drawn on top in the style of
 * docs/img/clans-factions/01-wildlands-map.png: hexes free (dashed) or in the owning clan's colour, cream paths,
 * white discs with the clan emblem or a wild Pokémon, name pills.
 * Calm panels below (no heavy bold). On a phone the island keeps a readable size and scrolls sideways. */

.cw-body { display: flex; flex-direction: column; gap: 14px; }
.cw-map { position: relative; padding: 8px !important; border-radius: 16px; overflow: hidden; }
.cw-scroll { overflow-x: auto; border-radius: 12px; scrollbar-width: thin; }
/* The island picture is the stage background (not inside the SVG), so changes on the drawing never repaint it. */
.cw-stage { position: relative; min-width: 640px; border-radius: 12px; background: center / 100% 100% no-repeat; }
.cw-svg { display: block; width: 100%; height: auto; border-radius: 12px; user-select: none; }

/* Land (DECISIONS 566, 567): free = dark grey fog over the land ("duister gebied"), claimed = lit in the clan colour
   (the terrain shows through), your clan's a little stronger, The Battlefield always lit in gold. */
.cw-hex { cursor: pointer; stroke-linejoin: round; transition: fill 0.2s; }
.cw-hex.free { fill: rgba(28, 32, 42, 0.78); stroke: rgba(150, 158, 175, 0.45); stroke-width: 2; }
.cw-hex.free:hover { fill: rgba(28, 32, 42, 0.6); }
.cw-hex.owned { fill: color-mix(in srgb, var(--o) 32%, transparent); stroke: var(--o); stroke-width: 5; }
.cw-hex.owned.mine { fill: color-mix(in srgb, var(--o) 44%, transparent); stroke-width: 7; }
.cw-hex.centre { fill: rgba(243, 210, 122, 0.25); stroke: #e0b64a; stroke-width: 5; }
.cw-hex.sel { stroke: #ffffff; stroke-width: 6; stroke-dasharray: none; }

/* Roads: dark through the fog, cream between lit places, a bit brighter from where you stand. */
.cw-road-edge { stroke: #1d212b; stroke-width: 12; stroke-linecap: round; }
.cw-road { stroke: #4a5263; stroke-width: 7; stroke-linecap: round; }
.cw-road-edge.lit { stroke: #c9a86a; stroke-width: 13; }
.cw-road.lit { stroke: #fff4d6; stroke-width: 8; }
.cw-road.near { stroke: #8a93a6; }
.cw-road.lit.near { stroke: #ffffff; }

/* Places */
.cw-node { cursor: pointer; outline: none; }
.cw-ring { fill: rgba(255, 255, 255, 0.55); stroke: var(--c); stroke-width: 2; }
.cw-disc { fill: #ffffff; stroke: var(--c); stroke-width: 5; transition: transform 0.15s; }
.cw-node:hover .cw-disc, .cw-node:focus-visible .cw-disc { transform: scale(1.08); }
.cw-node.sel .cw-ring { fill: rgba(255, 255, 255, 0.9); stroke-width: 4; }
.cw-node.near .cw-ring { stroke-dasharray: 5 4; stroke-width: 3; }
.cw-mon { image-rendering: pixelated; pointer-events: none; }
.cw-num { font: 600 19px var(--font); fill: #26324a; font-variant-numeric: tabular-nums; pointer-events: none; }
/* A place in the fog: a dark disc with a grey number, a dark pill. */
.cw-node.fog .cw-ring { fill: rgba(20, 24, 32, 0.6); }
.cw-node.fog .cw-disc { fill: #2a3142; }
.cw-node.fog .cw-num { fill: #a3abbd; }
.cw-node.fog .cw-pill { fill: #2a3142; stroke: rgba(255, 255, 255, 0.12); }
.cw-node.fog .cw-pill-text { fill: #b9c0cf; }
.cw-swords { fill: none; stroke: #8a6a2c; stroke-width: 4.5; stroke-linecap: round; pointer-events: none; }
.cw-pill { fill: #ffffff; stroke: rgba(30, 40, 60, 0.18); stroke-width: 1; }
.cw-node.owned .cw-pill { fill: var(--o); stroke: rgba(0, 0, 0, 0.25); }
.cw-node.owned .cw-pill-text { fill: #ffffff; }
.cw-node.sel .cw-pill { fill: #26324a; }
.cw-pill-text { font: 500 14px var(--font); fill: #26324a; pointer-events: none; }
.cw-node.sel .cw-pill-text { fill: #ffffff; }
.cw-hq { fill: var(--o); stroke: #ffffff; stroke-width: 2.5; }
.cw-hq-house { fill: none; stroke: #ffffff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.cw-count { fill: #d64545; stroke: #ffffff; stroke-width: 2.5; }
.cw-count-text { font: 600 13px var(--font); fill: #ffffff; pointer-events: none; }
/* Where you stand: an HTML ring over the map (transform + opacity on the GPU; inside the SVG it repainted the map
   every frame). */
.cw-pulse {
  position: absolute; aspect-ratio: 1; translate: -50% -50%; border: 3px solid #d64545; border-radius: 50%;
  pointer-events: none; will-change: transform, opacity; animation: cwPulse 1.6s ease-out infinite;
}
@keyframes cwPulse { from { opacity: 0.9; transform: scale(0.7); } to { opacity: 0; transform: scale(1.25); } }
/* Double-clicked: lit at once while the trip waits for the server (DECISIONS 574). */
.cw-node.going .cw-ring { fill: #ffffff; stroke: #d64545; stroke-width: 5; }
.cw-node.going .cw-disc { transform: scale(1.12); }
@media (prefers-reduced-motion: reduce) { .cw-pulse { animation: none; opacity: 0.8; } }

/* The hover pop-up (mouse only): calm dark card, an amber warning on unclaimed land. */
.cw-tip {
  position: absolute; left: 0; top: 0; z-index: 3; max-width: 220px; padding: 7px 10px; pointer-events: none;
  background: rgba(14, 19, 31, 0.96); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); font-size: 12px; line-height: 1.35; color: var(--text);
}
.cw-tip[hidden] { display: none; }
.cw-tip-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.cw-tip-fog { width: 14px; height: 14px; border-radius: 4px; background: #2a3142; border: 1px solid #6b7385; }
.cw-tip-sub { margin-top: 1px; font-size: 11px; color: var(--muted); }
.cw-tip-line { margin-top: 4px; }
.cw-tip-warn { display: flex; gap: 5px; align-items: flex-start; margin-top: 5px; padding: 5px 7px; border-radius: 7px;
  color: #f3d27a; background: rgba(243, 201, 105, 0.10); border: 1px solid rgba(243, 201, 105, 0.28); }
.cw-tip-warn svg { flex: none; margin-top: 2px; }

/* Panels */
/* Four compact panels in one row above the map (owner, 4 October); two on a laptop, one on a phone. */
.cw-panels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.cw-panels .panel { padding: 10px 12px; border-radius: 12px; font-size: 13px; }
.cw-panels .panel-title { margin-bottom: 6px; font-size: 12px; }
.cw-panels p { margin: 4px 0; }
.cw-panels .panel-title { display: flex; align-items: center; gap: 6px; font-weight: 500; text-transform: none; letter-spacing: 0.01em; }
.cw-you-name { font-size: 1rem; font-weight: 600; }
.cw-enter { width: 100%; justify-content: center; margin-top: 6px; font-weight: 600; }
.cw-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

.cw-place-head { display: flex; align-items: center; gap: 8px; }
.cw-place-name { margin: 0; font-size: 0.95rem; font-weight: 600; }
.cw-dot { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.cw-tag { font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 999px; color: #9df0ab; background: rgba(76, 196, 106, 0.12); border: 1px solid rgba(76, 196, 106, 0.3); white-space: nowrap; }
.cw-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 4px; font-size: 12px; }
.cw-facts b { font-weight: 600; }
.cw-facts span { display: inline-flex; align-items: center; gap: 4px; }
.cw-sub { margin: 4px 0 6px; font-size: 12px; font-weight: 500; color: var(--muted); }
.cw-species { display: flex; flex-wrap: wrap; gap: 4px; }
.cw-species img { width: 30px; height: 30px; image-rendering: pixelated; background: rgba(255, 255, 255, 0.05); border-radius: 8px; }

/* The land panels (DECISIONS 566, 569) */
.cw-yours { margin: 12px 0 0; color: #9df0ab; font-weight: 500; }
.cw-land-stat { display: flex; flex-wrap: wrap; gap: 4px 14px; font-variant-numeric: tabular-nums; }
.cw-land-stat b { font-weight: 600; }
.cw-rules-box summary { cursor: pointer; font-size: 12px; color: var(--muted); margin-top: 4px; }
.cw-rules-box summary:hover { color: var(--text); }
.cw-rules { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: var(--muted); }
.cw-rules li { margin: 4px 0; }
.cw-holder { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid rgba(255, 255, 255, 0.05); font-size: 13px; }
.panel-title + .cw-holder { border-top: 0; }
.cw-free-dot { width: 18px; height: 18px; flex: none; border-radius: 50%; background: #2a3142; border: 2px solid #6b7385; }
.cw-num-right { font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 1250px) {
  .cw-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .cw-panels { grid-template-columns: minmax(0, 1fr); }
  .cw-map { padding: 4px !important; }
}

/* ---- The plots of a Clan Route, over its walkable scene (DECISIONS 569, 570; js/ui/plots.js) ------------------
   Built for speed: the grid is ONE canvas on its own compositor layer (drawn only when the land changes), the plot you
   stand on is ONE outline that glides by transform (GPU), the flags wave by transform only (no filter). Everything sits
   under the trainers (they stand at z-index 100 + feet) and never takes a click. */
.plots-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; contain: strict; }
.plots-canvas { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }
.plots-structs { position: absolute; inset: 0; z-index: 0; }   /* its own stack: the Headquarters z-index stays under the outline of your plot */
.plot-here {
  --o: #ffffff;
  position: absolute; left: 0; top: 0; box-sizing: border-box; will-change: transform;
  border: 3px solid var(--o); border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 0 14px color-mix(in srgb, var(--o) 45%, transparent);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s;
}
.plot-here[hidden] { display: none; }
/* A soft breathing glow on the plot you stand on: opacity only, so the GPU does it. */
.plot-here::after {
  content: ''; position: absolute; inset: -3px; border-radius: 6px; background: color-mix(in srgb, var(--o) 18%, transparent);
  animation: plotBreath 1.8s ease-in-out infinite;
}
@keyframes plotBreath { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.9; } }
/* ---- The clan Headquarters (DECISIONS 575): the hall on its 2 x 2 plots, standing on the bottom of the square; the
   clan emblem on the round medallion and the clan colour on the plaque (positions in % of the picture, 316 x 273). ---- */
.plot-hq { position: absolute; display: flex; align-items: flex-end; pointer-events: none; }   /* z-index by its bottom edge (plots.js) */
.plot-hq-art { position: relative; width: 100%; aspect-ratio: 316 / 273; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.35)); }
.plot-hq-pic { position: absolute; inset: 0; width: 100%; height: 100%; }
.plot-hq-plaque { position: absolute; left: 42%; top: 58.2%; width: 16%; height: 5.6%; border-radius: 2px; background: var(--o); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
.plot-hq-emblem { position: absolute; left: 49.9%; top: 45.3%; width: 22%; translate: -50% -50%; image-rendering: pixelated; }
.plot-hq.just-built .plot-hq-art { animation: hqRise 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: 50% 100%; }
@keyframes hqRise { from { opacity: 0; transform: scale(0.6) translateY(12%); } to { opacity: 1; transform: none; } }
.plot-hq-preview[hidden] { display: none; }
.plot-hq-preview {
  position: absolute; box-sizing: border-box; border: 2px dashed #8fe0a2; border-radius: 6px; background: rgba(143, 224, 162, 0.22);
  animation: wallPreview 1.2s ease-in-out infinite;
}
.terr-hq-ico { width: 30px; height: auto; }
@media (prefers-reduced-motion: reduce) { .plot-hq.just-built .plot-hq-art, .plot-hq-preview { animation: none; } }
.plot-flag { position: absolute; transform: translate(-6px, -100%); display: flex; align-items: flex-start; }
.plot-flag-pole { width: 4px; height: 58px; border-radius: 2px; background: linear-gradient(#e9e2cf, #8b7a55); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25); }
.plot-flag-cloth {
  display: grid; place-items: center; width: 44px; height: 34px; margin-left: -1px; margin-top: 2px; will-change: transform;
  background: var(--o); border-radius: 0 6px 6px 0; clip-path: polygon(0 0, 100% 0, 86% 50%, 100% 100%, 0 100%);
  animation: plotWave 2.4s ease-in-out infinite; transform-origin: left center;
}
.plot-flag-cloth img { width: 30px; height: 30px; image-rendering: pixelated; }
@keyframes plotWave { 0%, 100% { transform: skewY(0deg); } 50% { transform: skewY(-4deg) scaleX(0.96); } }
/* The plot under the mouse (DECISIONS 573): lighter than the plot you stand on; glides, pops in on every new plot
   (plotPopA/B are the same keyframes - swapping the name replays it), then breathes. Transform and opacity only. */
.plot-hover { --o: #ffffff; position: absolute; left: 0; top: 0; will-change: transform; transition: transform 0.14s cubic-bezier(0.22, 1, 0.36, 1); }
.plot-hover[hidden] { display: none; }
.plot-hover::before {
  content: ''; position: absolute; inset: 0; border-radius: 4px; border: 2px solid color-mix(in srgb, var(--o) 85%, transparent);
  background: color-mix(in srgb, var(--o) 16%, transparent); animation: plotPopA 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.plot-hover.alt::before { animation-name: plotPopB; }
.plot-hover::after {
  content: ''; position: absolute; inset: -2px; border-radius: 6px; box-shadow: 0 0 12px 1px var(--o);
  animation: plotGlow 1.3s ease-in-out infinite;
}
@keyframes plotPopA { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes plotPopB { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes plotGlow { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .plot-flag-cloth, .plot-here::after, .plot-hover::before, .plot-hover::after { animation: none; } .plot-here, .plot-hover { transition: none; } }

/* The plot bar under the map: one row (the plot, its state, who holds the route, the panel button) and the panel. */
.plots-bar { margin-top: 8px; padding: 10px 14px; background: rgba(14, 19, 31, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; font-size: 13px; }
.plots-row { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.plots-row:empty { display: none; }
.plots-where { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; min-width: 0; }
.plots-name { font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); white-space: nowrap; font-variant-numeric: tabular-nums; }
.plots-route { display: inline-flex; align-items: center; gap: 4px; }
.plots-bar b { font-weight: 600; }

/* ---- Walls on plot borders (DECISIONS 571, 577): the owner's stone pieces (assets/tiles/clan-walls/), placed and sized
   by js/ui/plots.js in scene units; open ends carry a pennant in the clan colour, corners a tower. ---- */
.plot-wall { position: absolute; pointer-events: none; background: center / 100% 100% no-repeat; }
/* The pennant: the clan colour through the cloth mask, multiplied over the grey shading the piece keeps there. */
.cw-cloth { position: absolute; inset: 0; background: var(--o); mix-blend-mode: multiply; mask: center / 100% 100% no-repeat; -webkit-mask: center / 100% 100% no-repeat; }
.plot-wall.preview { z-index: 900; opacity: 0.6; filter: drop-shadow(0 0 3px #8fe0a2) brightness(1.1); animation: wallPreview 1.2s ease-in-out infinite; }
.plot-wall.preview[hidden] { display: none; }
@keyframes wallPreview { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.75; } }
/* Built a moment ago: it drops into place with a puff of dust (transform and opacity only). */
.plot-wall.just-built { animation: wallDrop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.plot-wall.just-built::before {
  content: ''; position: absolute; left: -20%; right: -20%; bottom: -30%; height: 60%; border-radius: 50%;
  background: radial-gradient(rgba(214, 196, 160, 0.85), rgba(214, 196, 160, 0)); animation: wallDust 0.7s ease-out forwards;
}
@keyframes wallDrop { from { opacity: 0; translate: 0 -40%; } to { opacity: 1; translate: 0 0; } }
@keyframes wallDust { from { opacity: 1; transform: scale(0.4); } to { opacity: 0; transform: scale(1.4); } }

/* ---- A plot is claimed (DECISIONS 572): it fills from the middle in the clan colour, glows, a ring ripples out and a
   few sparks fly; transform and opacity only, 1 s, then the canvas holds the colour. ---- */
.plot-claim-fx { position: absolute; pointer-events: none; z-index: 3; }
.plot-claim-fx .fx-fill {
  position: absolute; inset: 0; border-radius: 3px; background: var(--o);
  box-shadow: 0 0 18px 4px var(--o); animation: fxFill 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.plot-claim-fx .fx-ring {
  position: absolute; inset: -10%; border: 3px solid var(--o); border-radius: 6px; opacity: 0;
  animation: fxRing 0.9s ease-out 0.15s forwards;
}
.plot-claim-fx .fx-spark {
  position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%;
  background: #fff7d6; box-shadow: 0 0 6px var(--o); opacity: 0;
  animation: fxSpark 0.8s ease-out 0.1s forwards;
}
@keyframes fxFill { 0% { transform: scale(0.15); opacity: 0.95; } 45% { transform: scale(1.06); opacity: 0.85; } 100% { transform: scale(1); opacity: 0; } }
@keyframes fxRing { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes fxSpark { 0% { transform: rotate(var(--a)) translateY(0); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-46px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .plot-claim-fx { display: none; } }

/* ---- The plot panel: a small dark RPG panel floating ON the map, top right (DECISIONS 571) ----
   It sits in the scene's frame above everything in the scene; on a phone it is a sheet over the bottom of the map. */
.terr-panel {
  position: absolute; top: 10px; right: 10px; z-index: 2000; width: min(380px, calc(100% - 20px));
  max-height: calc(100% - 20px); overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 14px; border-radius: 12px; font-size: 13px;
  animation: terrIn 0.16s ease-out;
  background: linear-gradient(180deg, rgba(30, 36, 54, 0.98), rgba(18, 22, 34, 0.98));
  border: 1px solid rgba(243, 210, 122, 0.35); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4), 0 8px 22px rgba(0, 0, 0, 0.35);
}
.terr-panel[hidden] { display: none; }
/* Away from the plot you stand on (owner, 5 October): js/ui/plots.js flips the panel to the free half of the
   map, so the plot and the green wall preview stay in sight while you choose a side. */
.terr-panel.flip { right: auto; left: 10px; }
@keyframes terrIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.terr-x { margin-left: 4px; }
@media (max-width: 600px) {
  .terr-panel, .terr-panel.flip { top: auto; bottom: 8px; left: 8px; right: 8px; width: auto; max-height: 60%; }
  /* Standing in the bottom half: the sheet goes to the top of the map instead of covering you. */
  .terr-panel.high { bottom: auto; top: 8px; }
}
.terr-head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid rgba(243, 210, 122, 0.18); }
.terr-title { font-weight: 600; font-size: 15px; color: #f3e3b4; }
.terr-sub { font-size: 12px; color: var(--muted); }
.terr-sub2 { font-size: 12px; color: var(--muted); margin: 2px 0 6px; }
.terr-badge.fog { width: 30px; height: 30px; border-radius: 8px; background: #2a3142; border: 1px solid #6b7385; }
.terr-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 10px; font-size: 13px; }
.terr-facts dt { color: var(--muted); }
.terr-facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.terr-actions { display: flex; align-items: center; gap: 10px; }
.terr-why { display: inline-flex; align-items: center; gap: 5px; color: #f3d27a; font-size: 12px; }
.terr-opt { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.terr-opt:first-of-type { border-top: 0; }
.terr-opt:hover { background: rgba(255, 255, 255, 0.04); }
.terr-opt.off { opacity: 0.55; }
.terr-opt-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 8px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); }
.terr-opt-ico img { width: 28px; height: auto; image-rendering: pixelated; }
.terr-opt-title { font-weight: 600; }
.terr-opt-sub { font-size: 12px; color: var(--muted); }
.terr-count { color: #f3e3b4; font-variant-numeric: tabular-nums; }
.terr-soon { font-size: 11px; color: var(--muted); padding: 2px 8px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; }
.terr-flag-ico { width: 14px; height: 18px; background: var(--o); clip-path: polygon(0 0, 100% 25%, 0 50%); box-shadow: inset 2px 0 0 #8b7a55; }
.terr-wall-ico { width: 40px; height: auto; image-rendering: pixelated; }
/* Choosing a side: the plot in the middle, the four sides around it (big touch targets on a phone). */
.terr-sides { display: grid; grid-template-columns: 1fr 1.1fr 1fr; grid-template-areas: ". n ." "w p e" ". s ."; gap: 6px; margin: 4px 0 10px; }
.terr-plot { grid-area: p; display: grid; place-items: center; min-height: 64px; border-radius: 8px; border: 2px dashed rgba(255, 255, 255, 0.35); color: var(--muted); font-size: 12px; }
.terr-side { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); }
.terr-side.has { border-color: rgba(143, 224, 162, 0.45); background: rgba(143, 224, 162, 0.08); }
.side-n { grid-area: n; } .side-e { grid-area: e; } .side-s { grid-area: s; } .side-w { grid-area: w; }
.terr-side-name { font-weight: 600; font-size: 12px; }
.terr-side-state { font-size: 11px; color: var(--muted); }
.terr-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .plot-wall.preview, .plot-wall.just-built, .plot-wall.just-built::before, .terr-panel { animation: none; } }

/* A Clan Lands place feels like the frontier: a cooler, dusk tint over the meadow (under the trainers). */
.in-clanlands .scene::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(40, 30, 70, 0.22), rgba(10, 20, 40, 0.18));
}

/* ---- Exploring and the camp on the Clan map (DECISIONS 569) ---------------------------------------------------- */
.cw-hex.unknown { fill: rgba(8, 10, 16, 0.92); stroke: rgba(80, 88, 105, 0.5); stroke-width: 2; }
.cw-hex.unknown:hover { fill: rgba(8, 10, 16, 0.8); }
/* Unexplored but no longer secret (DECISIONS 603): the map shows real names and holders under a
   soft veil - "you have not walked here yet" - instead of the old black "?" hexes. */
.cw-hex.unseen { fill-opacity: 0.45; stroke-dasharray: 4 6; }
.cw-node.unseen { opacity: 0.62; }
.cw-node.unseen .cw-pill-text { font-style: italic; }
.cw-hex.camp { fill: rgba(127, 200, 169, 0.22); stroke: #7fc8a9; stroke-width: 5; }
.cw-road-edge.unknown { stroke: #11141b; }
.cw-road.unknown { stroke: #343b4a; stroke-dasharray: 2 10; }
.cw-node.unknown .cw-ring { fill: rgba(8, 10, 16, 0.7); }
.cw-node.unknown .cw-disc { fill: #151a24; }
.cw-node.unknown .cw-num { fill: #6b7385; }
.cw-node.unknown .cw-pill { fill: #151a24; stroke: rgba(255, 255, 255, 0.08); }
.cw-node.unknown .cw-pill-text { fill: #7d8597; font-style: italic; }
.cw-tent { fill: #e4f4ec; stroke: #3f8a6d; stroke-width: 2.5; stroke-linejoin: round; pointer-events: none; }
.cw-tip-fog.unknown, .cw-dot.unknown { background: #151a24; border: 1px solid #3a4254; }
.cw-plot-note { margin: 6px 0 0; }
.cw-need { margin: 6px 0; color: #f3d27a; font-size: 13px; }