:root {
  color-scheme: dark;
  --bg: #122019;
  --panel: #1c322624;
  --panel-solid: #1c3226;
  --panel-2: #24402f;
  --line: #3e5c46;
  --ink: #eef7e8;
  --muted: #a8c2a8;
  --gold: #ffd76a;
  --leaf: #7ddc7a;
  --danger: #ff7d7d;
  font-family: "Avenir Next", Inter, ui-sans-serif, system-ui, sans-serif;
}

/* Alchemy, world control, and village-life expansion. */
.alchemy-layout { display:grid; grid-template-columns:minmax(220px,.9fr) minmax(260px,1fr) minmax(240px,1fr); gap:1rem; padding:0 1rem 6rem; }
.alchemy-card { background:linear-gradient(145deg,#172a21,#102018); border:1px solid #496553; border-radius:14px; padding:1rem; min-width:0; box-shadow:0 10px 28px #06100b66; }
.alchemy-card h2 { margin:.2rem 0 .55rem; font-size:1rem; color:#e8dca2; }
#brewing-stands { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; margin:.5rem 0 .8rem; }
.brewing-stand { min-height:5.2rem; display:grid; place-items:center; align-content:center; gap:.12rem; border:1px solid #587060; border-radius:12px; background:#0c1913; text-align:center; }
.brewing-stand.empty { border-style:dashed; opacity:.72; }
.brewing-stand.filled { box-shadow:inset 0 -1.8rem 2.5rem #5a377955; border-color:#b997d5; }
.brewing-stand .stand-flask { font-style:normal; font-size:1.45rem; }
.brewing-stand small { font-size:.64rem; color:#b8c7bd; }
.interior-back { margin-left:auto; font-size:.7rem; }
.biome-reposition { position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:1rem; background:#06100ce8; backdrop-filter:blur(8px); }
.biome-reposition[hidden] { display:none; }
.biome-reposition > section { width:min(42rem,100%); border:1px solid #78937e; border-radius:18px; padding:1.2rem; background:linear-gradient(145deg,#193126,#0d1d16); box-shadow:0 2rem 6rem #000b; }
.biome-reposition h2 { margin-top:0; color:#ffe8a3; }
.biome-reposition-options, #biome-reposition-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(125px,1fr)); gap:.55rem; margin:1rem 0; }
#biome-reposition-options button { min-height:4.5rem; border:1px solid #66816c; border-radius:12px; background:#213c2d; color:#f1f6ed; font-weight:800; cursor:pointer; }
#ingredient-list { display:grid; gap:.45rem; max-height:58vh; overflow:auto; }
.ingredient-chip { display:grid; grid-template-columns:2.2rem 1fr; grid-template-rows:auto auto; gap:.08rem .45rem; padding:.5rem; text-align:left; border:1px solid #496553; border-radius:10px; background:#21382b; color:#f2f5e9; }
.ingredient-chip > span { grid-row:1/3; font-size:1.45rem; align-self:center; }.ingredient-chip small { color:#a9c5b0; }
#brew-slots { display:grid; grid-template-columns:repeat(4,1fr); gap:.45rem; margin:.7rem 0; }
.brew-slot { min-height:76px; border:1px dashed #8cae91; border-radius:12px; background:#20382b; color:#fff; padding:.35rem; }.brew-slot.empty { display:grid; place-items:center; font-size:1.5rem; color:#73927c; }.brew-slot small { display:block; font-size:.65rem; }
.brew-workbench label,.festival-controls label { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:.5rem; margin:.45rem 0; color:#c9d9cb; }
.brew-workbench select,.festival-controls input { border:1px solid #577361; border-radius:8px; background:#0e1c15; color:#fff; padding:.55rem; }
.potion-discovery,.journal-entry,.damage-card,.camp-control,.festival-controls { display:grid; gap:.28rem; margin:.45rem 0; padding:.65rem; border:1px solid #496553; border-radius:10px; background:#1c3025; }
.brew-progress { display:grid; grid-template-columns:4.5rem 1fr; align-items:center; gap:.6rem; margin:.45rem 0; padding:.55rem; border:1px solid #6f8b76; border-radius:10px; background:#213b2d; }
.brew-progress > span { display:grid; gap:.22rem; color:#c6d8c9; font-size:.75rem; }
.brew-kettle { position:relative; height:4.1rem; overflow:hidden; }
.brew-kettle .beaker { position:absolute; left:1.25rem; top:.65rem; width:2rem; height:2rem; border:3px solid #c9e8dc; border-top:0; border-radius:0 0 .8rem .8rem; background:linear-gradient(to top,#9d55c9 0 48%,#d891ec 52%,transparent 55%); animation:beaker-bob 1.4s ease-in-out infinite alternate; }
.brew-kettle .campfire { position:absolute; left:1rem; bottom:.05rem; width:2.6rem; height:1rem; background:#5b321d; border-radius:50%; box-shadow:inset 0 -.25rem #2b1a11; }
.brew-kettle .campfire::before { content:''; position:absolute; left:.75rem; bottom:.4rem; width:1rem; height:1.4rem; border-radius:70% 20% 65% 35%; background:#ffb13b; box-shadow:inset 0 -.45rem #e8553d; animation:fire-flicker .45s ease-in-out infinite alternate; }
.brew-kettle .bubble { position:absolute; width:.32rem; height:.32rem; border:1px solid #e8c9ff; border-radius:50%; opacity:0; animation:brew-bubble 1.6s ease-out infinite; }.brew-kettle .bubble.one { left:1.8rem; top:.7rem; }.brew-kettle .bubble.two { left:2.55rem; top:1rem; animation-delay:.65s; }
.brew-meter { display:block!important; height:.48rem; overflow:hidden; border-radius:999px; background:#0b1711; border:1px solid #496553; }.brew-meter i { display:block; width:var(--brew-progress); height:100%; background:linear-gradient(90deg,#8f4db7,#d891ec,#ffe888); transition:width 1s linear; }
@keyframes beaker-bob { to { transform:translateY(-1px) rotate(1deg); } } @keyframes fire-flicker { to { transform:scale(.82,1.12) rotate(-5deg); } } @keyframes brew-bubble { 20% { opacity:.8; } to { opacity:0; transform:translateY(-1.5rem) scale(1.4); } }
.potion-discovery span,.journal-entry span,.damage-card span,.camp-control span,.festival-controls small { color:#b8cdbd; font-size:.78rem; }.journal-entry summary { cursor:pointer; font-weight:700; color:#e8dca2; }
.damage-card { border-color:#b96b55; background:#38251f; }.damage-card button { justify-self:start; }.camp-control.owned { border-color:#c8b65f; }
.scout-report-grid { display:grid; grid-template-columns:auto 1fr; gap:.45rem .8rem; padding:.7rem; border:1px solid #496553; border-radius:10px; background:#172a21; }.scout-report-grid b { color:#e8dca2; }.scout-report-grid span { color:#bed0c1; }
.market-grid { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; margin:.6rem 0; }
.comfort-breakdown,.comfort-help { display:grid; gap:.4rem; margin:.65rem 0; padding:.7rem; border:1px solid #496553; border-radius:10px; background:#172a21; }.comfort-row { display:flex; justify-content:space-between; color:#b8cdbd; font-size:.8rem; }.comfort-row.rating-0 b { color:#78df78; }.comfort-row.rating-1 b { color:#9cdb72; }.comfort-row.rating-2 b { color:#d0d96a; }.comfort-row.rating-3 b { color:#e4bd61; }.comfort-row.rating-4 b { color:#ed8c58; }.comfort-row.rating-5 b { color:#ef6757; }.comfort-help span { color:#b8cdbd; font-size:.8rem; line-height:1.45; }.festival-controls select { border:1px solid #577361; border-radius:8px; background:#0e1c15; color:#fff; padding:.55rem; }
.admin-tools { display:grid; gap:.45rem; margin-top:.7rem; padding:.7rem; border:1px solid #d6b75d; border-radius:.75rem; background:#3a3018; }
.admin-tools small { color:#e9ddb2; }
@media (max-width:900px) { .alchemy-layout { grid-template-columns:1fr; padding:.5rem .65rem 6rem; }.alchemy-card { padding:.75rem; } #ingredient-list { max-height:34vh; } #tabs button span { font-size:.65rem; } }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

[hidden] { display: none !important; }

html, body { height: 100%; }
html { scroll-padding-bottom: calc(7rem + env(safe-area-inset-bottom)); }

body {
  margin: 0;
  background:
    radial-gradient(circle at 15% -5%, #23483180 0, transparent 26rem),
    radial-gradient(circle at 110% 40%, #1a3a4a55 0, transparent 22rem),
    var(--bg);
  color: var(--ink);
  overflow-x: hidden;
}

#app { max-width: 90rem; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }

.logo {
  margin: 0;
  font-size: clamp(2.6rem, 11vw, 3.6rem);
  letter-spacing: .06em;
  color: var(--leaf);
  text-shadow: 3px 3px 0 #0b160f;
}

.tagline { color: var(--muted); margin: .25rem 0 1.25rem; }

/* ------------------------------------------------------------- splash/signup */

#splash, #signup {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  text-align: center;
}

#signup { justify-content: flex-start; padding-top: 2.5rem; width: 100%; max-width: 80rem; margin: 0 auto; }

#signup-name {
  width: 100%;
  max-width: 36rem;
  padding: .8rem 1rem;
  border-radius: .8rem;
  border: 2px solid var(--line);
  background: var(--panel-solid);
  color: var(--ink);
  font-size: 1.05rem;
  margin-bottom: 1rem;
}
#signup-name:focus { outline: none; border-color: var(--leaf); }
.signup-note {
  width: 100%;
  max-width: 36rem;
  margin: -.45rem 0 .9rem;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.35;
}

#race-cards { display: grid; gap: .7rem; width: 100%; }

.race-card {
  display: flex;
  gap: .9rem;
  align-items: center;
  text-align: left;
  padding: .7rem .9rem;
  border: 2px solid var(--line);
  border-radius: 1rem;
  background: var(--panel-solid);
  color: var(--ink);
  cursor: pointer;
  transition: 120ms ease;
}
.race-card.selected { border-color: var(--leaf); background: var(--panel-2); }
.race-card canvas { width: 64px; height: 64px; image-rendering: pixelated; border-radius: .6rem; flex: none; }
.race-card b { font-size: 1.05rem; }
.race-card p { margin: .2rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.35; }

#settle-picker { width: 100%; max-width: 72rem; margin-top: 1.25rem; }
.picker-title { font-weight: 800; margin-bottom: .45rem; }
.signup-map-wrap {
  overflow: hidden;
  border: 3px solid var(--line);
  border-radius: 1rem;
  background: #102019;
}
#signup-map {
  display: block;
  width: 100%;
  image-rendering: pixelated;
  cursor: crosshair;
}
#settle-choice { min-height: 2.2rem; margin: .45rem .2rem 0; color: var(--muted); font-size: .8rem; }

.big-btn {
  margin-top: 1.1rem;
  width: 100%;
  padding: .95rem;
  font-size: 1.1rem;
  font-weight: 800;
  border: none;
  border-radius: 1rem;
  background: var(--leaf);
  color: #10240f;
  cursor: pointer;
  box-shadow: 0 4px 0 #3f7a3d;
}
.big-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #3f7a3d; }

.error-text { color: var(--danger); min-height: 1.2rem; font-size: .9rem; }

/* ------------------------------------------------------------------- topbar */

#game { flex: 1; display: flex; flex-direction: column; }

#update-banner {
  position: fixed;
  left: 50%;
  bottom: calc(4.8rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 12;
  width: min(34rem, calc(100% - 1rem));
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem;
  border: 2px solid #ffe888;
  border-radius: .85rem;
  background: #203526f5;
  color: var(--ink);
  box-shadow: 0 .5rem 2rem #0009;
}
#update-banner[hidden] { display: none; }
#update-banner span { flex: 1; min-width: 0; }
#update-banner b, #update-banner small { display: block; }
#update-banner small { margin-top: .18rem; color: var(--muted); }
#update-banner button { flex: 0 0 auto; border: 0; border-radius: .6rem; padding: .55rem .7rem; background: #ffe888; color: #172019; font-weight: 900; cursor: pointer; }

#topbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .8rem;
  position: sticky;
  top: 0;
  z-index: 5;
  background: #12201led;
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

#shield-note {
  flex: 0 0 auto;
  border: 1px solid #d7bb54;
  border-radius: .7rem;
  background: #504622;
  color: #fff1a8;
  padding: .38rem .7rem;
  font-size: .82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  animation: shield-glow 1s ease-in-out infinite alternate;
}
@keyframes shield-glow { to { box-shadow: 0 0 12px #ffd76a55; } }

.res {
  flex: 1;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: .7rem;
  padding: .35rem .5rem;
  font-size: .95rem;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.res .resource-compact { display: none; }
.res span, #worker-status span { display: block; color: var(--muted); font-size: .6rem; letter-spacing: .08em; font-weight: 800; }
.res svg, #worker-status svg { width: 1.25rem; height: 1.25rem; fill: currentColor; vertical-align: middle; }
#res-wood svg { color: #ca8b4b; } #res-food svg { color: #ff6f86; } #res-dew svg { color: #70d8ff; }
#res-stone svg { color: #bbc2c6; } #res-iron svg { color: #e88e5e; } #worker-status svg { color: #ffe08a; }
.res b { font-variant-numeric: tabular-nums; }
.res.full b { color: var(--gold); }
.res:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

#resource-popover {
  position: fixed;
  z-index: 24;
  width: min(18rem, calc(100vw - 1rem));
  padding: .7rem .8rem;
  border: 2px solid #6f8975;
  border-radius: .8rem;
  background: #173022f7;
  color: var(--ink);
  box-shadow: 0 .55rem 1.6rem #000a;
  pointer-events: none;
  animation: resource-pop .14s ease-out;
}
#resource-popover b, #resource-popover strong, #resource-popover span { display: block; }
#resource-popover b { color: var(--gold); font-size: .78rem; }
#resource-popover strong { margin: .18rem 0; color: #fff; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
#resource-popover span { color: var(--muted); font-size: .75rem; }
@keyframes resource-pop { from { opacity: 0; transform: translateY(-.25rem) scale(.98); } }

#worker-status {
  flex: 1;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: .7rem;
  padding: .28rem .5rem;
  text-align: center;
  white-space: nowrap;
}
#worker-status b { font-variant-numeric: tabular-nums; }

#mail-btn {
  position: relative;
  font-size: 1.4rem;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: .7rem;
  padding: .25rem .55rem;
  cursor: pointer;
}
#utility-tools { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: .15rem; }
#sound-btn { border: 1px solid var(--line); border-radius: .7rem; background: var(--panel-solid); color: var(--muted); padding: .45rem .6rem; font-size: .7rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
#volume-control { display: flex; align-items: center; gap: .25rem; color: var(--muted); font-size: .62rem; }
#volume-slider { width: 5.2rem; height: .25rem; accent-color: var(--leaf); }
#changelog-btn { border: 0; background: transparent; color: #9bd39a; padding: 0 .2rem; font-size: .58rem; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; white-space: nowrap; }
#game-clock { display:flex; align-items:center; gap:.25rem; padding:.35rem .5rem; border:1px solid var(--line); border-radius:999px; color:#ffe7a8; background:#0b1711aa; font-size:.68rem; white-space:nowrap; }
#changelog-btn:hover { color: #d8f5cf; }
#mail-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--danger);
  color: #fff;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  min-width: 1.1rem;
  padding: .1rem .25rem;
  text-align: center;
}

/* --------------------------------------------------------------------- tabs */

#views { flex: 1; padding: 1.15rem 1.5rem 5.5rem; }

#tabs {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(90rem, 100%);
  display: flex;
  background: #0e1a14f2;
  border-top: 1px solid var(--line);
  z-index: 5;
  padding-bottom: env(safe-area-inset-bottom);
}
#tabs button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .55rem 0 .5rem;
  font-size: 1.25rem;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
}
#tabs button span { font-size: .68rem; font-weight: 700; letter-spacing: .04em; }
#tabs button.active { color: var(--leaf); }

.panel-title { font-weight: 800; margin: .4rem 0 .6rem; font-size: 1.05rem; }
.mini-note { color: var(--muted); font-weight: 400; font-size: .78rem; }

/* --------------------------------------------------------------------- plot */

.plot-title { font-weight: 800; margin-bottom: .5rem; font-size: 1.05rem; }
#tab-home { width: 100%; max-width: 74rem; margin: 0 auto; }
#tab-army { width: 100%; max-width: 56rem; margin: 0 auto; }
.home-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem); gap: 1rem; align-items: start; }
.home-sidebar, .world-sidebar { background: #17291fdd; border: 1px solid var(--line); border-radius: 1rem; padding: .8rem; }
.home-sidebar { position: sticky; top: 5rem; max-height: calc(100dvh - 10rem); overflow: auto; }
.home-sidebar h2 { margin: .15rem 0 .55rem; font-size: .9rem; }
.home-sidebar h2:not(:first-child) { margin-top: .9rem; }
.home-sidebar details, .world-sidebar details { border-bottom: 1px solid #49655366; padding: .25rem 0 .55rem; }
.home-sidebar summary, .world-sidebar summary { cursor: pointer; color: #e8dca2; font-weight: 850; padding: .45rem .2rem; list-style-position: inside; }
.home-sidebar details:not([open]) summary, .world-sidebar details:not([open]) summary { color: var(--muted); }
.villager-card { width: 100%; text-align: left; color: var(--ink); background: var(--panel-solid); border: 1px solid var(--line); border-radius: .75rem; padding: .65rem; cursor: pointer; }
.villager-card b, .villager-card small { display: block; }
.villager-card small { color: var(--muted); margin-top: .2rem; line-height: 1.35; }
.stat-meter { height: .35rem; margin-top: .45rem; overflow: hidden; border-radius: 999px; background: #09140d; }
.stat-meter i { display: block; height: 100%; width: var(--value); background: linear-gradient(90deg, #e7b85f, var(--leaf)); }
.town-note { color: var(--muted); font-size: .74rem; line-height: 1.4; padding: .55rem; border: 1px dashed var(--line); border-radius: .65rem; }
.town-list { display: grid; gap: .35rem; margin-top: .45rem; }
.town-switch-row { display: flex; align-items: center; gap: .35rem; padding: .45rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--panel-solid); }
.town-switch-row > span { flex: 1; min-width: 0; }.town-switch-row b,.town-switch-row small { display: block; }.town-switch-row small { color: var(--muted); }
.cost { display: grid; gap: .18rem; justify-items: end; }
.cost-line { display: block; white-space: nowrap; color: var(--muted); }
.cost-line .missing-resource { color: var(--danger); font-weight: 900; }
.cost-line .enough-resource { color: #d8f5cf; font-weight: 800; }
.cost-line small { color: var(--muted); }
.stable-controls, .camp-gather-actions, .public-movement-list { display: grid; gap: .4rem; padding: .65rem; margin: .5rem 0; border: 1px solid var(--line); border-radius: .7rem; background: var(--panel-solid); }
.stable-controls small { color: var(--muted); }
.movement-row { border-color: #7c8e78; }

#plot-wrap {
  position: relative;
  border: 3px solid var(--line);
  border-radius: 1rem;
  overflow: hidden;
  background: #0b160f;
}
#plot { display: block; width: 100%; image-rendering: pixelated; }
#weather-layer, #ambient-layer, #villager-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#plot-wrap, #world-map-wrap { filter: brightness(var(--daylight, 1)); transition: filter 3s linear; }
#weather-layer { z-index: 1; }
#ambient-layer { z-index: 2; }
#villager-layer { z-index: 3; }
#weather-layer::after { content: attr(data-label); position: absolute; right: .55rem; top: .55rem; padding: .2rem .45rem; border-radius: 999px; background: #07110bb8; color: #e6f3ea; font-size: .62rem; font-weight: 800; }
#weather-layer.weather-rain i, #weather-layer.weather-storm i { position: absolute; left: var(--x); top: -12%; animation-delay: var(--d); animation-duration: var(--s); animation-iteration-count: infinite; animation-timing-function: linear; }
#weather-layer.weather-wind i { position:absolute; top:var(--y); left:-18%; width:calc(28px * var(--size)); height:calc(12px * var(--size)); border-radius:999px;background:#f8ffffb8;box-shadow:0 0 7px #dffaff; animation-delay:var(--d); animation-duration:var(--s); animation-iteration-count:infinite; animation-timing-function:ease-in-out; }
#weather-layer.weather-wind i::before, #weather-layer.weather-wind i::after { content:''; position:absolute; border-radius:50%; background:#f8ffffc9; }
#weather-layer.weather-wind i::before { left:4px;top:-6px;width:14px;height:14px; }
#weather-layer.weather-wind i::after { right:2px;top:-3px;width:11px;height:11px; }
#weather-layer.weather-wind i b { position:absolute;right:18px;top:8px;width:20px;height:8px;border-bottom:2px solid #f8ffffaa;border-radius:50%; }
#weather-layer.weather-wind i.wind-ltr { animation-name:wind-ltr; }
#weather-layer.weather-wind i.wind-rtl { left:auto; right:-18%; animation-name:wind-rtl; }
#weather-layer.weather-rain i, #weather-layer.weather-storm i { width: 1px; height: .7rem; background: linear-gradient(#d9f5ff00,#b8e8ff99); transform: rotate(12deg); animation-name: rain-fall; opacity: .7; }
#weather-layer.weather-storm i { width:2px;height:.95rem;opacity:.82; }
#weather-layer.weather-snow i { position: absolute; left: var(--x); top: -8%; width: 5px; height: 5px; border-radius: 50%; background: #eef7ffdd; animation: snow-fall var(--s) linear var(--d) infinite; }
#weather-layer.weather-fog { background:radial-gradient(ellipse at 12% 42%,#d8edf02e 0 16%,transparent 42%),radial-gradient(ellipse at 72% 58%,#d8edf032 0 18%,transparent 48%),radial-gradient(ellipse at 38% 76%,#eef7f022 0 14%,transparent 44%); background-size:150% 100%; animation:fog-drift 16s ease-in-out infinite alternate; }
#weather-layer.weather-fog::before { content:''; position:absolute; inset:-12%; background:radial-gradient(ellipse at 30% 45%,#d8edf035 0 13%,transparent 40%),radial-gradient(ellipse at 78% 35%,#eef7f02b 0 16%,transparent 44%); filter:blur(12px); animation:fog-clouds 22s ease-in-out infinite alternate; }
#weather-layer.weather-storm { background: #17203535; animation: storm-flash 4s infinite; }
#weather-layer.weather-rain, #weather-layer.weather-storm { box-shadow: inset 0 0 5rem #19314c44; }
.rain-puddle { position: absolute; left: var(--x); top: var(--y); width: 1.25rem; height: .35rem; border: 1px solid #b8e8ff38; border-radius: 50%; opacity: 0; animation: puddle-ripple 3.4s ease-out var(--d) infinite; }
@keyframes wind-ltr { from { transform:translateX(0); opacity:0; } 12% { opacity:1; } to { transform:translateX(145vw); opacity:0; } }
@keyframes wind-rtl { from { transform:translateX(0) scaleX(-1); opacity:0; } 12% { opacity:1; } to { transform:translateX(-145vw) scaleX(-1); opacity:0; } }
@keyframes wind-core-spin { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes rain-fall { to { transform: translate(3rem, 120vh) rotate(12deg); } }
@keyframes snow-fall { to { transform: translate(4rem, 110vh) rotate(360deg); } }
@keyframes fog-drift { to { background-position:65% 0; } } @keyframes fog-clouds { to { transform:translate(11%,4%) scale(1.08); opacity:.7; } }
@keyframes puddle-ripple { 15% { opacity: .2; transform: scale(.65); } 65%, 100% { opacity: 0; transform: scale(1.3); } }
@keyframes storm-flash { 47%, 51% { background: #dcecff22; } 49% { background: #ffffff55; } }
#villager-layer::after { content: attr(data-population); position: absolute; left: .55rem; bottom: .55rem; padding: .25rem .5rem; border-radius: 999px; background: #07110bc9; color: #ffe7a8; font-size: .68rem; font-weight: 900; }
#villager-layer i { position: absolute; width: 13px; height: 16px; border-radius: 50% 50% 35% 35%; background: #ffe3a2; border: 2px solid #352917; box-shadow: 0 9px 0 -1px var(--shirt, #4f7755); transition: left var(--walk-time,3.2s) ease-in-out, top var(--walk-time,3.2s) ease-in-out; animation: villager-bob .55s ease-in-out infinite alternate; }
#villager-layer i.talking::after { content: attr(data-speech); position: absolute; left: 8px; top: -12px; padding: 0 3px 2px; border-radius: 7px; background: #fff8d9e8; color: #3b3325; font: 900 7px/1 system-ui; }
#villager-layer i:nth-child(4n+1) { --shirt: #4f7755; } #villager-layer i:nth-child(4n+2) { --shirt: #9a5a4d; }
#villager-layer i:nth-child(4n+3) { --shirt: #4d6e9a; } #villager-layer i:nth-child(4n) { --shirt: #9a814d; }
#villager-layer i.race-elf { border-radius:52% 52% 25% 25%; box-shadow:-6px 1px 0 -2px #ffe3a2,6px 1px 0 -2px #ffe3a2,0 9px 0 -1px var(--shirt); }
#villager-layer i.race-fox { width:15px; height:17px; background:#d97938; border-radius:55% 55% 45% 45%; clip-path:polygon(0 18%,22% 0,40% 19%,60% 19%,78% 0,100% 18%,94% 78%,72% 100%,28% 100%,6% 78%); box-shadow:0 9px 0 -1px #b9552e; }
#villager-layer i.race-fox::before { content:''; position:absolute; left:4px; top:6px; width:7px; height:5px; border-radius:50%; background:#ffe0b2; box-shadow:3px 1px 0 -2px #271b16; }
#villager-layer i.race-dwarf { width:19px; height:11px; margin-left:-2px; border-radius:48% 48% 36% 36%; box-shadow:0 6px 0 2px #b56f3d,0 10px 0 1px var(--shirt); }
#villager-layer i.on-road { z-index: 3; }
#villager-layer i.behind-building { z-index: 0; }
#villager-layer i.occluded { opacity: .48; }
#villager-layer i.indoors { opacity: 0; }
#villager-layer i.sitting { height:11px; animation:none; z-index:2; }
#villager-layer i.construction-worker { z-index:4; transition:left 1s linear,top 1s linear; animation:builder-bob .45s ease-in-out infinite alternate; }
#villager-layer i.construction-worker b { position:absolute; left:8px; top:-7px; font:12px/1 system-ui; transform-origin:2px 10px; filter:drop-shadow(1px 1px 0 #20160d); animation:builder-tool .7s ease-in-out infinite; }
#villager-layer i.construction-worker em { position:absolute; left:-3px; top:-7px; font:10px/1 system-ui; font-style:normal; }
#villager-layer i.construction-worker:nth-of-type(even) b { animation-delay:-.32s; }
@keyframes builder-bob { to { transform:translateY(1px); } }
@keyframes builder-tool { 0%,100% { transform:rotate(-38deg); } 48%,62% { transform:rotate(34deg) translateY(2px); } }
.project-celebration i { animation:builder-finish .8s ease-in-out 2 !important; }
.project-celebration i::after { content:'!' !important; position:absolute;left:8px;top:-12px;background:#fff8d9;color:#332b1d;border-radius:7px;padding:1px 4px;font:900 8px system-ui; }
@keyframes builder-finish { 0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-12px) rotate(180deg)}75%{transform:translateY(-4px) rotate(360deg)} }
@keyframes villager-bob { to { transform: translateY(-2px); } }
#ambient-layer i { position: absolute; display: block; }
#ambient-layer .ambient-bird { left: -12%; top: var(--bird-start-y); width: 16px; height: 8px; animation: bird-cross var(--bird-duration) linear forwards; }
#ambient-layer .ambient-bird::before, #ambient-layer .ambient-bird::after { content: ''; position: absolute; top: 3px; width: 8px; height: 5px; border-top: 2px solid #f3ead3; transform-origin: center 3px; animation: bird-flap .65s ease-in-out infinite alternate; }
#ambient-layer .ambient-bird::before { right: 7px; border-radius: 80% 10% 20% 10%; transform: rotate(15deg); }
#ambient-layer .ambient-bird::after { left: 7px; border-radius: 10% 80% 10% 20%; transform: rotate(-15deg); animation-direction: alternate-reverse; }
#ambient-layer .ambient-gust { left: -25%; top: 48%; width: 24%; height: 2px; background: #e9ffe075; box-shadow: 1.5rem .45rem 0 #e9ffe045; animation: gust-cross 5s ease-out forwards; }
#ambient-layer .ambient-rodent { left: var(--x); bottom: 8%; width: 10px; height: 8px; border-radius: 50% 50% 30% 30%; background: #8a6548; border: 1px solid #36281e; animation: rodent-peek 4s ease-in-out forwards; }
#ambient-layer .ambient-butterfly { left: var(--flight-x); top: var(--flight-y); width: 2px; height: 4px; background:#5f4326; animation: butterfly-cross var(--flight-duration) ease-in-out forwards; }
#ambient-layer .ambient-butterfly::before,#ambient-layer .ambient-butterfly::after { content:'';position:absolute;top:-1px;width:6px;height:6px;background:#ffd76a;border-radius:80% 20%;transform-origin:center right;animation:butterfly-flap .22s ease-in-out infinite alternate; }
#ambient-layer .ambient-butterfly::before { right:1px; } #ambient-layer .ambient-butterfly::after { left:1px;background:#f2a9c4;transform-origin:center left;animation-direction:alternate-reverse; }
#ambient-layer .ambient-butterfly.reverse { left: auto; right: -8%; animation-name: butterfly-cross-reverse, butterfly-flap; }
#ambient-layer .ambient-cloud { left: var(--cloud-x); top: var(--cloud-y); width: 48px; height: 13px; border-radius: 999px; background: #eef3f7; box-shadow: 13px -7px 0 -2px #eef3f7, 27px -3px 0 -4px #eef3f7; opacity: var(--cloud-opacity); scale: var(--cloud-size); animation: cloud-cross var(--cloud-duration) ease-in-out forwards; }
#ambient-layer .ambient-firefly { left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:#fff7a8;box-shadow:0 0 5px 2px #e7ff65;animation:firefly-meander 5s ease-in-out forwards; }
@keyframes bird-cross { 0% { transform: translate(0, 0); } 48% { transform: translate(66vw, var(--bird-mid-y)); } 100% { transform: translate(132vw, var(--bird-end-y)); } }
@keyframes bird-flap { from { margin-top: -2px; scale: 1 .65; } to { margin-top: 2px; scale: 1 1.2; } }
@keyframes gust-cross { to { transform: translateX(145vw); opacity: 0; } }
@keyframes rodent-peek { 0%,100% { transform: translateY(14px); } 25%,70% { transform: translateY(0); } }
@keyframes butterfly-cross { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(var(--flight-dx), var(--flight-dy)); opacity: 1; } }
@keyframes butterfly-cross-reverse { 0% { transform: translate(0, 0); } 45% { transform: translate(-58vw, 16px); } 100% { transform: translate(-125vw, -10px); } }
@keyframes butterfly-flap { from { scale:.2 1; } to { scale:1 1; } }
@keyframes cloud-cross { 0%{transform:translate(0,0)}25%{transform:translate(24vw,12px)}55%{transform:translate(55vw,-10px)}78%{transform:translate(82vw,8px)}100%{transform:translate(125vw,-5px)} }
@keyframes firefly-meander { 0%,100%{transform:translate(0,0);opacity:0}20%,80%{opacity:1}35%{transform:translate(12px,-9px)}65%{transform:translate(-8px,-17px)} }

#plot-hint { color: var(--muted); font-size: .82rem; text-align: center; }

/* forage minigame overlay */
#forage-layer { position: absolute; inset: 0; z-index: 3; background: radial-gradient(circle at 50% 45%, #244b32e8, #07110bf5); overflow: hidden; touch-action: none; }
#forage-bar {
  position: absolute;
  top: .5rem;
  left: .5rem;
  right: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: #0b160fcc;
  overflow: hidden;
}
#forage-bar i { display: block; height: 100%; background: var(--gold); width: 100%; }
#forage-count {
  position: absolute;
  bottom: .5rem;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 800;
  background: #0b160fcc;
  padding: .2rem .7rem;
  border-radius: 999px;
}
#forage-instruction {
  position: absolute;
  top: 1.35rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(90%, 32rem);
  color: #fff6c8;
  background: #09120ddd;
  border-radius: .55rem;
  padding: .35rem .6rem;
  text-align: center;
  font-size: .72rem;
  font-weight: 800;
}
#forage-player {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 4;
  background: #fff4ad;
  color: #152017;
  border: 2px solid #382e10;
  border-radius: .45rem;
  padding: .25rem .4rem;
  font-size: .62rem;
  font-weight: 900;
  box-shadow: 0 2px 0 #0007;
}
.forage-tool.tool-dew, .forage-tool.tool-iron { text-align: center; border-radius: .3rem .3rem 1rem 1rem; font-size: 1.35rem; }
.forage-tool.tool-dew { width: 3.6rem; }
.forage-tool.tool-iron { width: 4rem; }
.forage-tool.tool-wood { font-size: 1.7rem; transform: translate(-50%, -50%) rotate(-28deg); transform-origin: 85% 85%; }
.forage-tool.tool-wood.axe-swing { animation: axe-chop .72s cubic-bezier(.3,.05,.38,1); }
@keyframes axe-chop {
  0% { transform: translate(-50%, -50%) rotate(-28deg); }
  42%, 62% { transform: translate(-50%, -50%) rotate(62deg) scale(1.08); }
  100% { transform: translate(-50%, -50%) rotate(-28deg); }
}
.forage-tool.tool-food { opacity: .85; }
.sparkle {
  position: absolute;
  width: 3rem;
  height: 3rem;
  margin: -1.5rem 0 0 -1.5rem;
  font-size: .55rem;
  line-height: 1;
  font-weight: 900;
  text-align: center;
  background: #1b2d21e8;
  border: 2px solid var(--gold);
  border-radius: .55rem;
  color: #fff;
  cursor: pointer;
  animation: sparkle-in 150ms ease;
  padding: 0;
}
.sparkle.forage-wood { border-color: #a66f3c; background: #56391f; }
.sparkle.forage-food { border-color: #ff9aac; background: #7b2738; }
.sparkle.forage-dew { border-color: #a8e8ff; background: #176589; }
.wood-timing { position: absolute; inset: 3.1rem 1rem 2.8rem; }
.timing-round { position: absolute; left: 50%; top: .2rem; transform: translateX(-50%); padding: .3rem .7rem; border-radius: 999px; background: #0b160fd9; color: #ffe58f; font-weight: 900; font-size: .78rem; letter-spacing: .08em; white-space: nowrap; }
.timing-tree { position: absolute; left: 50%; top: 35%; width: 34%; height: 32%; transform: translate(-50%, -50%); border: .7rem solid #4d2d19; border-radius: 2.6rem 2rem 2.4rem 3rem; background: repeating-linear-gradient(90deg, #754526 0 12px, #8e5930 12px 20px); box-shadow: inset 0 0 0 3px #a36a39, 0 .5rem 1rem #0006; }
.timing-tree i { position: absolute; left: -1rem; right: -1rem; top: 43%; height: .35rem; background: #e9c277; opacity: .7; transform: rotate(-4deg); }
.timing-tree b { position: absolute; inset: 0; display: grid; place-items: center; color: #fff4c0; font-size: .72rem; text-shadow: 1px 2px #2c1609; }
.timing-meter { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); width: min(94%, 28rem); height: 4.4rem; padding: 0; overflow: hidden; border: 3px solid #d9c587; border-radius: 1rem; background: linear-gradient(180deg, #17291e, #0a150f); box-shadow: 0 .45rem 1rem #0007, inset 0 0 0 2px #0008; cursor: pointer; touch-action: manipulation; }
.timing-meter::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 9.5%, #ffffff14 10%); }
.timing-target { position: absolute; top: .35rem; bottom: .35rem; border: 2px solid #fff5b3; border-radius: .55rem; background: linear-gradient(90deg, #bd7c18, #ffe66b 48%, #bd7c18); box-shadow: 0 0 15px #ffd84f99; transition: width .25s ease, left .25s ease; }
.timing-needle { position: absolute; z-index: 2; top: -.1rem; bottom: -.1rem; width: .35rem; margin-left: -.175rem; border-radius: 999px; background: #f4fbff; box-shadow: 0 0 0 2px #1b2830, 0 0 14px #d6f5ff; }
.timing-meter.hit { border-color: #fff09b; box-shadow: 0 0 22px #ffe66b99; }
.timing-meter.miss { border-color: #ce776d; }
.timing-feedback { position: absolute; left: 50%; top: 52%; width: 100%; min-height: 1.2rem; transform: translateX(-50%); color: #fff1b5; font-size: .78rem; font-weight: 900; text-align: center; text-shadow: 1px 1px #000; }
.berry-deduction { position: absolute; inset: 3.15rem 1rem 2.6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; }
.berry-round { padding: .3rem .75rem; border-radius: 999px; background: #0b160fdd; color: #ffe58f; font-size: .78rem; font-weight: 900; letter-spacing: .08em; }
.berry-grid { position:relative; display:grid; grid-template-columns:repeat(var(--berry-columns),var(--berry-size)); gap:.6rem .9rem; padding:1.4rem 1.65rem; border:0; border-radius:48% 52% 44% 56%; background:radial-gradient(ellipse at 18% 30%,#71aa4f 0 10%,transparent 11%),radial-gradient(ellipse at 78% 25%,#5f9b43 0 13%,transparent 14%),radial-gradient(ellipse at 28% 72%,#4f8e3b 0 16%,transparent 17%),radial-gradient(ellipse at 73% 73%,#376f32 0 19%,transparent 20%),radial-gradient(ellipse at center,#3d823d 0 55%,#1b4e2c 78%); box-shadow:inset 0 -1rem 2rem #0a2619aa,0 .6rem 1rem #0007; transition:min-height .2s ease; }
.berry-choice { position: relative; width: var(--berry-size); height: var(--berry-size); padding: 0; border: 3px solid hsl(var(--berry-hue) 75% 76%); border-radius: 48% 52% 46% 54%; background: radial-gradient(circle at 34% 27%, hsl(var(--berry-hue) 95% 85%) 0 10%, hsl(var(--berry-hue) 72% 54%) 13% 64%, hsl(var(--berry-hue) 66% 27%) 67%); box-shadow: inset -.35rem -.45rem .65rem #350c1c66, 0 .3rem .5rem #0007; cursor: pointer; transform: rotate(var(--berry-turn)); transition: transform .15s ease, box-shadow .15s ease; touch-action: manipulation; }
.berry-choice::before { content: ''; position: absolute; left: 50%; top: -.75rem; width: 1.8rem; height: 1rem; border-radius: 90% 10% 80% 20%; background: #66a94e; border: 2px solid #1e5129; transform: translateX(-50%) rotate(-13deg); }
.berry-choice:not(:disabled):active { transform: rotate(var(--berry-turn)) scale(.92); }
.berry-choice:disabled { cursor: default; }
.berry-choice.revealed { box-shadow: 0 0 0 5px #fff2a1, 0 0 22px #ffe66bcc; }
.berry-choice.correct { animation: sour-pop .42s ease; }
.berry-choice.wrong { box-shadow: 0 0 0 5px #ff7676, 0 0 18px #e64b4b; }
.berry-feedback { min-height: 1.3rem; color: #fff1b5; font-size: .82rem; font-weight: 900; text-align: center; text-shadow: 1px 1px #000; }
@keyframes sour-pop { 50% { transform: rotate(var(--berry-turn)) scale(1.16); } }
.merchant-visitor { position:absolute; z-index:6; width:22px; height:28px; border:0; background:transparent; padding:0; pointer-events:auto; image-rendering:pixelated; filter:drop-shadow(2px 3px 1px #0008); animation:merchant-wander 16s steps(8,end) infinite alternate; }
.merchant-visitor::before { content:''; position:absolute; left:8px; top:1px; width:8px; height:8px; background:#dfad79; box-shadow:0 -2px #714424,2px 0 #714424,-2px 0 #714424; }
.merchant-visitor::after { content:''; position:absolute; left:6px; top:10px; width:11px; height:13px; background:#c9933e; box-shadow:-3px 2px #6d3d27,3px 3px #4a7550,-2px 13px #493322,7px 13px #493322; }
.merchant-visitor span { position:absolute; left:1px; top:10px; width:6px; height:11px; background:#70402a; box-shadow:inset -2px 0 #a66a36; }
@keyframes merchant-wander { 0% { transform:translate(0,0); } 35% { transform:translate(18vw,-8vh); } 70% { transform:translate(42vw,5vh); } 100% { transform:translate(58vw,-12vh); } }
.falling-loot.sparkle { width: 1.35rem; height: 1.7rem; margin: 0; border-radius: 60% 40% 65% 35%; animation: dew-fall var(--fall) linear forwards; }
.falling-loot.dew.good { background: #7ddcff; border-color: #e7fbff; }
.falling-loot.dew.gold { background: #ffe76a; border-color: #fffbd1; box-shadow: 0 0 12px #ffe76a; }
.falling-loot.iron.good { background: #d8783f; border-color: #ffc196; border-radius: 25%; }
.falling-loot.iron.gold { background: #ffd64f; border-color: #fff3ae; border-radius: 25%; box-shadow: 0 0 12px #ffd64f; }
.falling-loot.hazard { background: #20251f; border-color: #6f776c; box-shadow: 0 0 7px #b9c0b4; }
.iron-rhythm { position: absolute; inset: 3.15rem 1rem 2.6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; }
.forge-song-title { padding: .3rem .75rem; border-radius: 999px; background: #0b160fdd; color: #ffc98b; font-size: .76rem; font-weight: 900; letter-spacing: .08em; }
.forge-lane { position: relative; width: min(72%, 17rem); height: 62%; overflow: hidden; border: 5px solid #4d5154; border-radius: 1.4rem; background: repeating-linear-gradient(90deg, #251b17 0 24%, #32221a 25% 49%, #251b17 50% 74%, #32221a 75%); box-shadow: inset 0 0 24px #050504, 0 .4rem .8rem #0008; }
.forge-lane::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #ff74330c, #ff743355 80%, #ffcf7c33); }
.forge-strike-line { position: absolute; z-index: 2; left: 4%; right: 4%; top: 81%; height: .28rem; transform: translateY(-50%); border-radius: 999px; background: #ffe0a0; box-shadow: 0 0 15px #ff8b3d, 0 0 4px #fff; }
.forge-strike-line::after { content: ''; position: absolute; left: 50%; top: 50%; width: 2.1rem; height: 2.1rem; transform: translate(-50%, -50%) rotate(45deg); border: 2px solid #fff0aa; border-radius: .35rem; box-shadow: 0 0 10px #ff8b3d; }
.forge-note { position: absolute; z-index: 1; left: 50%; width: 1.45rem; height: 1.45rem; transform: translate(-50%, -50%) rotate(45deg); border: 3px solid #ffc07a; border-radius: .25rem; background: #d96737; box-shadow: 0 0 13px #ff773f; }
.forge-note.accent { width: 1.75rem; height: 1.75rem; background: #ffc348; border-color: #fff0a8; }
.forge-note.judged { opacity: .25; background: #fff2aa; transform: translate(-50%, -50%) rotate(45deg) scale(1.5); transition: .18s ease; }
.forge-note.missed { opacity: .18; background: #382f2c; border-color: #79706c; box-shadow: none; }
.forge-anvil { position: absolute; left: calc(50% + min(36%, 8.5rem) + .6rem); top: 58%; width: 4.8rem; height: 4.8rem; padding: .25rem; transform: translateY(-50%); border: 4px solid #8b969d; border-radius: 1rem 1rem 1.7rem 1.7rem; background: linear-gradient(#59636a, #282e32); color: #fff1bb; box-shadow: inset 0 .35rem #aab4ba, 0 .45rem .7rem #0008; touch-action: manipulation; }
.forge-anvil span { display: block; font-size: 1.65rem; transform-origin: 80% 80%; }
.forge-anvil b { display: block; font-size: .58rem; }
.forge-anvil.hammer-hit span { animation: forge-hammer .22s ease; }
.forge-anvil:disabled { opacity: .45; }
.forge-start { position: absolute; z-index: 4; top: 48%; padding: .75rem 1rem; border: 3px solid #ffe09b; border-radius: 999px; background: #71371f; color: #fff2c8; font-weight: 900; box-shadow: 0 0 20px #ff7d3d88; }
.forge-feedback { min-height: 1.25rem; color: #fff1b5; font-size: .78rem; font-weight: 900; text-align: center; }
@keyframes forge-hammer { 0% { transform: rotate(-34deg); } 55% { transform: rotate(38deg) scale(1.15); } 100% { transform: rotate(0); } }
.stone-memory { position: absolute; inset: 3.15rem 1rem 2.6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; }
.stone-round { padding: .3rem .75rem; border-radius: 999px; background: #0b160fdd; color: #ffe58f; font-size: .78rem; font-weight: 900; letter-spacing: .08em; }
.stone-memory-grid { display: grid; grid-template-columns: repeat(var(--stone-columns), var(--crack-size)); gap: .55rem; padding: .8rem; border: 7px solid #535b5d; border-radius: 2rem; background: radial-gradient(circle at 40% 32%, #aab1b1, #50595a 72%); box-shadow: inset 0 0 28px #262d2d, 0 .5rem 1rem #0007; }
.stone-memory-crack { width: var(--crack-size); height: var(--crack-size); padding: 0; border: 3px solid #ffe7a1; border-radius: 42% 58% 48% 52%; background: #353c3e; color: #fff0b0; font-size: 1.25rem; font-weight: 900; box-shadow: 0 0 10px #ffe7a155; cursor: pointer; transition: transform .15s ease, color .15s ease, background .15s ease; touch-action: manipulation; }
.stone-memory-grid.hidden-numbers .stone-memory-crack { color: transparent; border-color: #778083; box-shadow: inset 0 0 12px #161b1c; }
.stone-memory-grid.hidden-numbers .stone-memory-crack:not(:disabled):active { transform: scale(.9); }
.stone-memory-grid .stone-memory-crack.struck { background: #d9ad4f; border-color: #fff0a9; color: #202315; opacity: .72; }
.stone-memory-grid .stone-memory-crack.wrong { background: #7b3030; border-color: #ff9c91; color: #fff; }
.stone-feedback { min-height: 1.3rem; color: #fff1b5; font-size: .82rem; font-weight: 900; text-align: center; text-shadow: 1px 1px #000; }
@keyframes dew-fall { to { top: 88%; } }
@keyframes sparkle-in { from { transform: scale(.2); } to { transform: scale(1); } }
.float-plus {
  position: absolute;
  font-weight: 800;
  color: var(--gold);
  pointer-events: none;
  animation: float-up 700ms ease forwards;
  text-shadow: 1px 1px 0 #000;
}
.profit-best { border-color: var(--gold); box-shadow: inset 0 0 14px #ffd76a18; }
.cost { display: flex; flex-direction:column; align-items:flex-end; justify-content: center; gap: .18rem; }
.cost .build-time { color:var(--gold);font-weight:900;margin-top:.2rem; }
.build-tabs { display:flex;flex-wrap:wrap;gap:.35rem;margin:.55rem 0; }
.missing-resource { color: #ff8c8c; font-weight: 900; }
.enough-resource { color: #b9ceb9; }
@keyframes float-up { to { transform: translateY(-2rem); opacity: 0; } }

/* -------------------------------------------------------------------- world */

#world-map-wrap {
  overflow: auto;
  border: 3px solid var(--line);
  border-radius: 1rem;
  background: #16281d;
  max-height: calc(100vh - 12rem);
  padding: 4px;
  scrollbar-gutter: stable;
}
#world-map {
  display: block;
  width: 100%;
  min-width: 720px;
  image-rendering: pixelated;
  cursor: grab;
}
#world-map { touch-action: none; }
#world-map-wrap { touch-action: auto; }
#world-map:active { cursor: grabbing; }
.map-controls { display: flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; }
.map-controls button {
  border: 1px solid var(--line);
  border-radius: .55rem;
  background: var(--panel-solid);
  color: var(--ink);
  padding: .4rem .65rem;
  font-weight: 800;
  cursor: pointer;
}
.map-controls button:disabled { opacity: .4; cursor: default; }
.map-controls span { color: var(--muted); font-size: .74rem; margin-left: .3rem; }
.world-help { color: var(--muted); font-size: .9rem; margin: -.25rem 0 .8rem; }
.world-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.25rem; align-items: start; }
.world-stage { min-width: 0; }
.world-sidebar {
  position: sticky;
  top: 4.5rem;
  max-height: calc(100vh - 10rem);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: #15271d;
  padding: .8rem;
}
.world-sidebar h2 { margin: .1rem 0 .7rem; font-size: 1rem; }
.world-sidebar h2:not(:first-child) { margin-top: 1rem; }
.raid-news { padding: .45rem .55rem; border-left: 3px solid var(--danger); background: var(--panel-solid); margin-bottom: .35rem; border-radius: .45rem; font-size: .76rem; }
.raid-news small { display: block; color: var(--muted); margin-top: .15rem; }
.boss-card { width: 100%; display: flex; align-items: center; gap: .65rem; margin-bottom: .5rem; padding: .65rem; border: 2px solid #8e613f; border-radius: .8rem; background: linear-gradient(135deg, #351a1f, #17251b); color: var(--ink); text-align: left; }
.boss-card.difficulty-medium { border-color: #c47845; }
.boss-card.difficulty-hard { border-color: #d95763; box-shadow: inset 0 0 1.2rem #8e263533; }
.boss-card .boss-glyph { font-size: 1.8rem; }
.boss-card span:last-child { display: flex; min-width: 0; flex-direction: column; }
.boss-card small, .boss-reward small { color: var(--muted); }
.boss-countdown, .boss-reward { display: flex; flex-direction: column; gap: .25rem; margin: .55rem 0; padding: .7rem; border: 1px solid var(--line); border-radius: .7rem; background: #0b160fbb; }
.boss-countdown b { color: #ffdc86; font-size: 1.05rem; }
.boss-party { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .35rem; margin: .55rem 0; }
.boss-party span { display: flex; flex-direction: column; padding: .45rem; border-radius: .55rem; background: #17271d; }
.boss-party small { color: var(--muted); font-size: .68rem; }
.boss-history { margin-top: .75rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.empty-expeditions { color: var(--muted); font-size: .8rem; line-height: 1.4; margin: 0; }
.expedition-row { display: flex; align-items: center; gap: .55rem; padding: .55rem; background: var(--panel-solid); border: 1px solid var(--line); border-radius: .7rem; margin-bottom: .4rem; }
.expedition-row b, .expedition-row small { display: block; }
.expedition-row small { color: var(--muted); font-size: .72rem; }
.training-note, .training-queue { padding: .7rem; margin: 0 0 .65rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--panel-solid); color: var(--muted); }
.training-queue b, .training-queue span { display: block; }
.training-queue span { margin-top: .3rem; font-size: .75rem; color: var(--ink); }
.resource-dot { display: inline-block; flex: 0 0 auto; width: 1rem; height: 1rem; border: 2px solid #fff9; border-radius: .25rem; margin-right: .35rem; }
.expedition-actions { display: flex; gap: .5rem; margin: .8rem 0; }
.scouting-guide, .scouting-summary, .scouting-status { display:grid; gap:.35rem; padding:.7rem; margin-bottom:.5rem; border:1px solid var(--line); border-radius:.75rem; background:var(--panel-solid); }
.scouting-guide { border-color:#b99745; background:linear-gradient(135deg, #283524, #1a2920); }
.scouting-guide span, .scouting-guide small, .scouting-summary small, .scouting-status small { color:var(--muted); font-size:.72rem; line-height:1.4; }
.scouting-guide .pill-btn { margin-top:.25rem; width:100%; }
.scouting-guide .pill-btn.active { background:#ffe888; color:#172019; }
.scouted-list { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.35rem; margin-bottom:.8rem; }
.scouted-place { display:grid; gap:.12rem; text-align:left; padding:.48rem .55rem; border:1px solid #6e7651; border-radius:.55rem; background:#1a2b22; color:var(--text); cursor:pointer; }
.scouted-place:hover { border-color:#ffe888; transform:translateY(-1px); }
.scouted-place span { color:#ffe888; font-weight:800; font-size:.76rem; }
.scouted-place small { color:var(--muted); font-size:.64rem; }
#world-map.scouting-target-mode { cursor:crosshair; box-shadow:inset 0 0 0 3px #ffe888; }
.report-resource { width:100%; padding:.38rem .5rem; border:1px solid #b99745; border-radius:.45rem; background:#273426; color:#fff1b2; text-align:left; cursor:pointer; }
.report-resource small { display:block; color:#cbd5bd; margin-top:.15rem; }
.labor-picker { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: .55rem 0 .75rem; padding: .55rem; border-radius: .7rem; background: #12231a; border: 1px solid var(--line); }
.labor-picker b { margin-right: auto; font-size: .78rem; }
.labor-picker .active { color: #102016; background: var(--leaf); border-color: var(--leaf); }
.sheet-section { margin: 1rem 0 .15rem; font-size: .95rem; }
.visitor-sign { border-color: #b58b4b; background: #332b1d; }
.terrain-legend { display: flex; flex-wrap: wrap; gap: .35rem .75rem; padding: .6rem .2rem .1rem; color: var(--muted); font-size: .74rem; }
.terrain-legend span::before { content: ''; display: inline-block; width: .7rem; height: .7rem; margin-right: .3rem; border-radius: .2rem; vertical-align: -.05rem; }
.terrain-legend [data-terrain="forest"]::before { background: #246b3a; }
.terrain-legend [data-terrain="meadow"]::before { background: #7ab960; }
.terrain-legend [data-terrain="valley"]::before { background: #4b9a60; }
.terrain-legend [data-terrain="hills"]::before { background: #738e52; }
.terrain-legend [data-terrain="mountain"]::before { background: #91999f; }
.terrain-legend [data-terrain="lake"]::before { background: #3894ba; }
.resource-legend { display: flex; flex-wrap: wrap; gap: .35rem .75rem; padding: .25rem .2rem; color: var(--muted); font-size: .74rem; }
.resource-legend span::before { content: ''; display: inline-block; width: .7rem; height: .7rem; margin-right: .3rem; border: 2px solid #111; border-radius: .2rem; vertical-align: -.12rem; }
.resource-legend [data-resource="wood"]::before { background: #79502f; }
.resource-legend [data-resource="food"]::before { background: #ca4d65; }
.resource-legend [data-resource="dew"]::before { background: #62c7ef; }
.resource-legend [data-resource="stone"]::before { background: #a0a8ad; }
.resource-legend [data-resource="iron"]::before { background: #d27b53; }
#world-selection {
  color: var(--muted);
  font-size: .88rem;
  min-height: 2rem;
  padding: .45rem .2rem 0;
}
.map-cell {
  width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}
.map-cell canvas {
  width: 52px;
  height: 52px;
  image-rendering: pixelated;
  border-radius: .5rem;
  border: 2px solid transparent;
}
.map-cell.you canvas { border-color: var(--gold); }
.map-cell .nm {
  font-size: .62rem;
  font-weight: 700;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-cell .st { font-size: .6rem; }
.map-empty { width: 64px; height: 71px; }

#world-list { display: flex; flex-direction: column; gap: .45rem; }
.world-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .8rem;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: .8rem;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.world-row .who { flex: 1; }
.world-row .who small { display: block; color: var(--muted); }
.world-row .flags { font-size: .85rem; }

#hover-tip {
  position: fixed;
  z-index: 50;
  max-width: 17rem;
  pointer-events: none;
  background: #08110deb;
  color: #fff;
  border: 1px solid #7a9b80;
  border-radius: .55rem;
  padding: .45rem .6rem;
  font-size: .75rem;
  line-height: 1.35;
  box-shadow: 0 6px 20px #0008;
}
#hover-tip.exceptional { border:2px solid #ffe888; color:#fff5bd; box-shadow:0 0 0 2px #8e6d24aa,0 6px 22px #000a,0 0 14px #ffe88855; }

@media (min-width: 800px) {
  #race-cards { grid-template-columns: repeat(3, 1fr); }
  .race-card { align-items: flex-start; min-height: 8rem; }
  .race-card canvas { width: 72px; height: 72px; }
  .panel-title { font-size: 1.35rem; }
  #tabs button { flex-direction: row; justify-content: center; gap: .45rem; padding: .7rem 0; }
  #tabs button span { font-size: .82rem; }
}

@media (max-width: 899px) {
  #app { max-width: 30rem; }
  #views { padding: .9rem .9rem 5.2rem; }
  #topbar { flex-wrap: wrap; }
  .res, #worker-status { min-width: 28%; }
  #shield-note { order: 5; width: 100%; text-align: center; }
  .world-layout { display: block; }
  .home-layout { display: block; }
  .home-sidebar { position: static; max-height: none; margin-top: .8rem; }
  .world-sidebar { position: static; max-height: none; margin-top: .8rem; }
  #world-map-wrap { max-height: 60vh; }
}

/* --------------------------------------------------------------------- army */

.troop-row, .potion-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .7rem;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: .9rem;
  margin-bottom: .5rem;
}
.troop-row .ico, .potion-row .ico { font-size: 1.5rem; }
.troop-row .info, .potion-row .info { flex: 1; }
.troop-row .info b, .potion-row .info b { display: block; }
.troop-row .info small, .potion-row .info small { color: var(--muted); }
.count-pill {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: var(--panel-2);
  border-radius: 999px;
  padding: .2rem .6rem;
}
.pill-btn {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  font-weight: 800;
  border-radius: .6rem;
  padding: .4rem .6rem;
  cursor: pointer;
  font-size: .85rem;
}
.pill-btn:disabled { opacity: .4; cursor: default; }
.pill-btn.selected { border-color: var(--leaf); color: var(--leaf); background: #31563b; }
.expedition-send small { display: block; font-size: .65rem; color: var(--muted); margin-top: .15rem; }
.formation-row { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .55rem .7rem; margin-bottom: .45rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--panel-solid); }
.formation-row span { display: flex; gap: .35rem; }
.lane-select { margin-top: .35rem; background: #15271d; color: var(--ink); border: 1px solid var(--line); border-radius: .4rem; padding: .2rem; }
.raid-risk { padding: .55rem .7rem; border: 1px solid #775f3f; background: #392d20; border-radius: .7rem; margin-bottom: .6rem; }
.raid-risk b, .raid-risk small { display: block; } .raid-risk small { color: #d9c8aa; margin-top: .2rem; }
.deployment-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin-bottom: .65rem; }
.deployment-board div { padding: .5rem .3rem; text-align: center; border: 1px solid var(--line); border-radius: .55rem; background: #12231a; }
.deployment-board b, .deployment-board small, .deployment-board span { display: block; }
.deployment-board b { color: var(--gold); text-transform: uppercase; font-size: .72rem; }
.deployment-board small { color: var(--muted); margin: .25rem 0; }
.deployment-board span { color: var(--leaf); font-size: .78rem; }
#rps-note {
  text-align: center;
  color: var(--muted);
  font-size: .85rem;
  margin-top: .8rem;
  background: var(--panel-solid);
  border: 1px dashed var(--line);
  border-radius: .8rem;
  padding: .55rem;
}
#army-count { color: var(--muted); font-weight: 400; font-size: .85rem; }

/* -------------------------------------------------------------- bottom sheet */

#sheet-veil { position: fixed; inset: 0; background: #0008; z-index: 11; }
#sheet {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(30rem, 100%);
  max-height: 78dvh;
  overflow: auto;
  background: var(--panel-solid);
  border: 2px solid var(--line);
  border-bottom: none;
  border-radius: 1.2rem 1.2rem 0 0;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  z-index: 12;
  animation: sheet-up 160ms ease;
}
.project-clock, .scout-card, .raid-forecast {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .65rem .75rem;
  margin-bottom: .65rem;
  border: 1px solid var(--line);
  border-radius: .75rem;
  background: var(--panel-2);
}
.project-clock span, .scout-card small, .raid-forecast small { color: var(--muted); }
.raid-forecast.favored { border-color: var(--leaf); }
.raid-forecast.underdog { border-color: var(--danger); }
.raid-forecast span { font-variant-numeric: tabular-nums; }
.world-move-btn { width: 100%; margin-top: .55rem; }
@keyframes sheet-up { from { transform: translate(-50%, 30%); } to { transform: translate(-50%, 0); } }
#sheet h3 { margin: 0 0 .2rem; display: flex; align-items: center; gap: .4rem; }
#sheet .sub { color: var(--muted); font-size: .85rem; margin: 0 0 .8rem; }
.sheet-x {
  position: sticky;
  top: 0;
  z-index: 3;
  float: right;
  width: 2.35rem;
  height: 2.35rem;
  margin: -.35rem -.25rem .15rem .5rem;
  border: 1px solid #6f8975;
  border-radius: 999px;
  background: #102019f2;
  color: var(--ink);
  font: 900 1.35rem/1 system-ui;
  cursor: pointer;
  box-shadow: 0 .2rem .8rem #0007;
}

.sheet-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .6rem .7rem;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: .8rem;
  margin-bottom: .5rem;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  font-size: 1rem;
}
.sheet-row:disabled { opacity: .45; cursor: default; }
.build-opt:disabled { opacity: .72; }
.build-opt:disabled .missing-resource { color: #ff7d7d; text-shadow: 0 0 8px #7b1010; }
.sheet-row .ico { font-size: 1.4rem; }
.sheet-row .info { flex: 1; }
.sheet-row .info b { display: block; }
.sheet-row .info small { color: var(--muted); display: block; line-height: 1.3; }
.cost { font-size: .82rem; color: var(--muted); }

.stepper { display: flex; align-items: center; gap: .45rem; }
.stepper b { min-width: 2.2rem; text-align: center; font-variant-numeric: tabular-nums; }
.camp-route-label { display: grid; gap: .35rem; margin: .65rem 0; font-weight: 800; color: var(--ink); }
.camp-route-label select { width: 100%; padding: .7rem .75rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--paper); color: var(--ink); font: inherit; }

.sheet-actions { display: flex; gap: .6rem; margin-top: .6rem; }
.sheet-actions .big-btn { margin-top: 0; }
.ghost-btn {
  flex: 1;
  padding: .8rem;
  border-radius: 1rem;
  border: 2px solid var(--line);
  background: none;
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
}
.danger-btn { border-color: #6e3a3a; color: var(--danger); }

/* ------------------------------------------------------- mail & visit panels */

#mail-panel, #visit-panel {
  position: fixed;
  inset: 0;
  margin: 0 auto;
  max-width: 30rem;
  background: var(--bg);
  z-index: 10;
  overflow: auto;
  padding-bottom: 2rem;
  animation: panel-in 150ms ease;
}
@keyframes panel-in { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; } }
#mail-panel header, #visit-panel header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8rem 1rem;
  background: #12201df2;
  border-bottom: 1px solid var(--line);
  font-weight: 800;
  font-size: 1.05rem;
  z-index: 2;
}
.x-btn {
  background: var(--panel-solid);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: .6rem;
  font-size: 1rem;
  padding: .3rem .6rem;
  cursor: pointer;
}

#mail-compose { padding: .8rem 1rem 0; }
#mail-compose .compose-box {
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: .8rem;
}
#mail-compose .compose-box + .compose-box { margin-top: .7rem; }
#mail-compose .compose-box > b, #mail-compose .compose-box > small { display: block; margin-bottom: .45rem; }
#mail-compose .compose-box > small { color: var(--muted); font-size: .76rem; }
#mail-compose input, #mail-compose textarea {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: .7rem;
  color: var(--ink);
  padding: .55rem .7rem;
  font-size: .95rem;
  font-family: inherit;
  margin-bottom: .5rem;
}
#mail-compose select { background: var(--panel-2); border: 1px solid var(--line); border-radius: .7rem; color: var(--ink); padding: .55rem .7rem; font-weight: 800; }
.carriage-fields { display: grid; grid-template-columns: 1fr 7rem; gap: .5rem; }
.carriage-fields input { margin: 0 !important; }
#carriage-cost-note { color: var(--muted); font-size: .75rem; margin-top: .4rem; }
.carriage-en-route { margin-top: .45rem; padding: .35rem .5rem; border-left: 3px solid var(--gold); background: var(--panel-2); font-size: .75rem; }
#mail-compose textarea { resize: none; height: 4.6rem; }
#mail-compose input:focus, #mail-compose textarea:focus { outline: none; border-color: var(--leaf); }
.roost-note { color: var(--muted); font-size: .85rem; background: var(--panel-solid); border: 1px dashed var(--line); border-radius: 1rem; padding: .7rem .9rem; }

#mail-list { padding: .8rem 1rem; display: flex; flex-direction: column; gap: .6rem; }
.letter {
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: .7rem .9rem;
}
.letter .from { font-weight: 800; display: flex; justify-content: space-between; gap: .5rem; }
.letter .from small { color: var(--muted); font-weight: 400; white-space: nowrap; }
.letter p { margin: .35rem 0 0; font-size: .92rem; line-height: 1.45; color: #dcead8; overflow-wrap: break-word; }
.letter.unread { border-color: var(--gold); }
.letter.battle-win { border-left: 4px solid var(--leaf); }
.letter.battle-loss { border-left: 4px solid var(--danger); }
.mail-empty { color: var(--muted); text-align: center; padding: 2rem 0; }

#visit-body { padding: 1rem; }
.zoom-world-btn {
  width: 100%;
  margin: 0 0 .75rem;
  border: 1px solid var(--line);
  border-radius: .7rem;
  background: var(--panel-2);
  color: var(--ink);
  padding: .65rem .8rem;
  font-weight: 800;
  cursor: pointer;
}
#visit-body .visit-plot {
  border: 3px solid var(--line);
  border-radius: 1rem;
  overflow: hidden;
  background: #0b160f;
  margin-bottom: .8rem;
}
#visit-body .visit-plot canvas { display: block; width: 100%; image-rendering: pixelated; }
.visit-facts { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .9rem; }
.fact {
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .3rem .7rem;
  font-size: .82rem;
}

/* ------------------------------------------------------------- report modal */

#report-modal {
  position: fixed;
  inset: 0;
  z-index: 13;
  background: #000a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

#changelog-modal {
  position: fixed;
  inset: 0;
  z-index: 16;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: #020805dc;
  backdrop-filter: blur(5px);
}
.changelog-card {
  width: min(42rem, 100%);
  max-height: min(90vh, 48rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 1.1rem;
  background: #13251b;
  box-shadow: 0 1.2rem 4rem #000b;
}
.changelog-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1rem .8rem; border-bottom: 1px solid var(--line); background: #182d20; }
.changelog-card h2 { margin: 0; color: #d9f7d2; font-size: 1.2rem; }
.changelog-card header p { margin: .18rem 0 0; color: var(--muted); font-size: .72rem; }
#changelog-list { overflow-y: auto; overscroll-behavior: contain; padding: .25rem 1rem 1.25rem; }
.changelog-entry { position: relative; margin-left: .4rem; padding: .9rem .2rem .9rem 1rem; border-left: 2px solid #426b4b; }
.changelog-entry::before { content: ''; position: absolute; left: -6px; top: 1.15rem; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px #203c29; }
.changelog-entry h3 { margin: .25rem 0 .2rem; color: var(--ink); font-size: .98rem; }
.changelog-entry p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.changelog-entry details { margin-top: .6rem; border: 1px solid #355640; border-radius: .65rem; background: #102017; overflow: hidden; }
.changelog-entry summary { padding: .5rem .65rem; color: #b9ddb8; font-size: .72rem; font-weight: 900; cursor: pointer; list-style-position: inside; user-select: none; }
.changelog-entry details[open] summary { color: var(--gold); background: #1d3525; border-bottom: 1px solid #355640; }
.changelog-entry details ul { margin: 0; padding: .65rem .75rem .7rem 1.75rem; color: #c3d6c2; font-size: .74rem; line-height: 1.5; }
.changelog-entry details li + li { margin-top: .45rem; }
.changelog-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; color: #9fc6a5; font-size: .64rem; font-weight: 800; }
.changelog-meta code { padding: .1rem .3rem; border-radius: .3rem; background: #09140d; color: #efcf7a; }

@media (max-width: 600px) {
  #views { padding: .65rem .55rem 5rem; }
  #topbar { gap: .3rem; padding: .4rem; }
  .res, #worker-status { min-width: 0; padding: .3rem .18rem; font-size: .92rem; }
  .res span, #worker-status span { display: none; }
  .res .resource-full { display: none; }
  .res .resource-compact { display: block; }
  .res svg, #worker-status svg { width: 1.4rem; height: 1.4rem; }
  #sound-btn { font-size: 0; padding: .42rem; }
  #sound-btn::after { content: '♪'; font-size: 1rem; }
  #volume-control span { display: none; }
  #volume-slider { width: 3.7rem; }
  #changelog-btn { font-size: .52rem; padding: 0; }
  #changelog-modal { padding: .45rem; }
  .changelog-card { max-height: calc(100dvh - .9rem); border-radius: .8rem; }
  .changelog-card > header { padding: .8rem; }
  #changelog-list { padding: .15rem .75rem 1rem; }
  .mobile-build-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
  .mobile-build-grid .build-opt { min-height: 5rem; margin: 0; padding: .45rem .2rem; flex-direction: column; justify-content: center; gap: .25rem; text-align: center; }
  .mobile-build-grid .build-opt .ico { font-size: 2rem; }
  .mobile-build-grid .build-opt .info { display: none; }
  .mobile-build-grid .build-opt .cost { max-width: 100%; white-space: normal; font-size: .58rem; line-height: 1.2; }
  #sheet { padding: .8rem .7rem calc(.8rem + env(safe-area-inset-bottom)); }
  .stepper { gap: .25rem; flex-wrap: wrap; justify-content: flex-end; }
  .stepper .pill-btn { padding: .35rem .45rem; }
}
@media (prefers-reduced-motion: reduce) {
  #villager-layer i, #villager-layer i.construction-worker b, #weather-layer i, #ambient-layer i { animation: none !important; }
}
@media (hover: none) { #hover-tip { display: none !important; } }
.report-card {
  width: min(24rem, 100%);
  background: var(--panel-solid);
  border: 2px solid var(--line);
  border-radius: 1.2rem;
  padding: 1.1rem;
  text-align: center;
  animation: sheet-up 180ms ease;
}
.report-card h2 { margin: .1rem 0 .6rem; font-size: 1.5rem; }
.report-card .vs { color: var(--muted); font-size: .85rem; margin-bottom: .6rem; }
.report-lines { text-align: left; font-size: .9rem; display: flex; flex-direction: column; gap: .35rem; margin-bottom: .9rem; }
.report-lines div { background: var(--panel-2); border-radius: .6rem; padding: .45rem .6rem; }

/* -------------------------------------------------------------------- toasts */

#toasts {
  position: fixed;
  top: 3.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  width: min(22rem, 92vw);
  pointer-events: none;
}
.toast {
  background: #0b160ff0;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: .8rem;
  padding: .55rem .8rem;
  font-size: .88rem;
  text-align: center;
  animation: toast-in 160ms ease;
}
.toast.err { border-color: #6e3a3a; }
.toast.gain { border-color: #5b6e3a; color: var(--gold); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-.4rem); } to { opacity: 1; } }

#pigeon-fly {
  position: fixed;
  top: 18vh;
  left: -3rem;
  font-size: 2rem;
  z-index: 30;
  pointer-events: none;
  transform-origin: center;
}
#pigeon-fly.flying { animation: fly-by var(--pigeon-duration, 2.8s) cubic-bezier(.28,.05,.6,.98) forwards; }
@keyframes fly-by {
  0% {
    transform: translate(0, var(--pigeon-start-y, 0vh)) rotate(var(--pigeon-start-tilt, 8deg)) scale(var(--pigeon-scale, 1));
  }
  32% {
    transform: translate(39vw, var(--pigeon-dip-y, 4vh)) rotate(var(--pigeon-dip-tilt, -2deg)) scale(var(--pigeon-scale, 1));
  }
  68% {
    transform: translate(82vw, var(--pigeon-rise-y, -4vh)) rotate(var(--pigeon-rise-tilt, 4deg)) scale(var(--pigeon-scale, 1));
  }
  100% {
    transform: translate(120vw, var(--pigeon-end-y, -8vh)) rotate(var(--pigeon-end-tilt, -6deg)) scale(var(--pigeon-scale, 1));
  }
}

/* Phone-first layout: keep status, controls, sheets, and card costs readable. */
@media (max-width: 600px) {
  #app { width: 100%; }
  #game { min-width: 0; }
  #views { padding: .65rem .55rem calc(7rem + env(safe-area-inset-bottom)); }
  #topbar {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .3rem;
    padding: calc(.38rem + env(safe-area-inset-top)) .38rem .42rem;
  }
  .res, #worker-status {
    min-width: 0;
    width: 100%;
    padding: .28rem .08rem;
    font-size: .72rem;
    line-height: 1.05;
    border-radius: .55rem;
  }
  .res span, #worker-status span { display: none; }
  .res svg, #worker-status svg { display: block; width: 1.08rem; height: 1.08rem; margin: 0 auto .1rem; }
  .res b, #worker-status b { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  #game-clock { grid-column: span 2; order: 1; justify-content: center; min-width: 0; padding: .35rem .2rem; font-size: .66rem; }
  #shield-note { grid-column: 1 / -1; order: 2; width: 100%; text-align: center; }
  #utility-tools { grid-column: span 3; order: 1; min-width: 0; flex-direction: row; align-items: center; justify-content: center; gap: .3rem; }
  #mail-btn { order: 1; width: 100%; min-width: 0; padding: .3rem; }
  #sound-btn { flex: 0 0 2.1rem; font-size: 0; padding: .4rem .25rem; }
  #volume-control { flex: 1 1 3.2rem; min-width: 2.7rem; }
  #volume-control span { display: none; }
  #volume-slider { width: 100%; min-width: 0; }
  #changelog-btn { flex: 0 0 auto; font-size: .57rem; padding: .2rem 0; }

  .plot-title, .panel-title { overflow-wrap: anywhere; line-height: 1.3; }
  #plot-hint { margin-bottom: 1.1rem; font-size: .82rem; line-height: 1.45; }
  .home-sidebar, .world-sidebar { margin-bottom: 1rem; }
  .map-controls { flex-wrap: wrap; }
  .map-controls span { width: 100%; margin-left: 0; }
  .terrain-legend, .resource-legend { gap: .3rem .55rem; }
  .panel-title .interior-back { flex: 0 0 100%; margin: .45rem 0 0; }
  .troop-row, .potion-row, .formation-row { align-items: flex-start; flex-wrap: wrap; }
  .troop-row .info, .potion-row .info, .formation-row > span { min-width: 9rem; }
  .deployment-board { grid-template-columns: 1fr; }
  .market-grid { grid-template-columns: 1fr; }
  .scout-report-grid { grid-template-columns: 1fr; gap: .18rem; }
  .scout-report-grid b:not(:first-child) { margin-top: .45rem; }
  .carriage-fields { grid-template-columns: 1fr; }
  .sheet-actions { flex-wrap: wrap; }
  .sheet-actions > * { min-width: 7rem; }
  .sheet-row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
    align-items: center;
  }
  .sheet-row .info { flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; }
  .sheet-row > .cost {
    flex: 1 0 100%;
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    margin-top: .35rem;
    white-space: normal;
  }
  .sheet-row > .cost .cost-line { white-space: normal; overflow-wrap: anywhere; }
  .sheet-row > .stepper {
    flex: 1 0 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-top: .35rem;
  }
  .expedition-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
  .expedition-actions .expedition-send { min-width: 0; }
  .expedition-actions #claim-resource-camp { grid-column: 1 / -1; }

  .mobile-build-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .mobile-build-grid .build-opt {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    align-content: start;
    align-items: center;
    min-height: 8.2rem;
    margin: 0;
    padding: .55rem;
    gap: .3rem .45rem;
    text-align: left;
  }
  .mobile-build-grid .build-opt .ico { grid-column: 1; font-size: 1.75rem; text-align: center; }
  .mobile-build-grid .build-opt .info { display: block; grid-column: 2; min-width: 0; }
  .mobile-build-grid .build-opt .info b { font-size: .74rem; line-height: 1.15; overflow-wrap: anywhere; }
  .mobile-build-grid .build-opt .info small { display: none; }
  .mobile-build-grid .build-opt .cost {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    gap: .12rem;
    justify-items: stretch;
    font-size: .63rem;
    line-height: 1.2;
  }
  .mobile-build-grid .cost-line { display: block; width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .mobile-build-grid .cost-line small { display: block; margin-left: 1.15rem; }

  #sheet {
    width: 100%;
    max-height: min(84dvh, calc(100dvh - 1rem));
    overscroll-behavior: contain;
    padding: .8rem .7rem calc(1.15rem + env(safe-area-inset-bottom));
  }
  #sheet .sub { line-height: 1.4; }
  .labor-picker { display: grid; grid-template-columns: 1fr repeat(3, minmax(0, 1fr)); gap: .35rem; }
  .labor-picker b { align-self: center; }
  .labor-picker .pill-btn { min-width: 0; padding: .5rem .2rem; font-size: .74rem; }
}

@media (max-width: 370px) {
  #views { padding-inline: .4rem; }
  #topbar { gap: .22rem; padding-inline: .25rem; }
  .res, #worker-status { font-size: .66rem; }
  #game-clock { font-size: .6rem; }
  #changelog-btn { font-size: .52rem; }
  .mobile-build-grid { gap: .38rem; }
  .mobile-build-grid .build-opt { min-height: 8.5rem; padding: .45rem; }
}

@media (max-width: 340px) {
  .res, #worker-status { font-size: .58rem; letter-spacing: -.025em; }
}