:root {
  color-scheme: light;
  --bg-sky-1: #dbe8df;
  --bg-sky-2: #eceddc;
  --bg-ground-1: #76945f;
  --bg-ground-2: #506f48;
  --surface: rgba(248, 249, 244, .92);
  --surface-solid: #f8f9f4;
  --surface-soft: rgba(255,255,255,.55);
  --surface-quiet: rgba(42,60,47,.055);
  --text: #1f2f26;
  --muted: #708077;
  --line: rgba(43,66,52,.12);
  --shadow: rgba(27,42,32,.18);
  --sidebar: rgba(22,34,27,.965);
  --sidebar-2: rgba(27,43,33,.965);
  --sidebar-text: #eff4ee;
  --sidebar-muted: rgba(239,244,238,.54);
  --accent: #769b67;
  --accent-2: #a8c77f;
  --accent-strong: #52764f;
  --oak: #9b6b43;
  --birch: #e7e3d5;
  --stone: #7f8986;
  --danger: #bd6559;
  --xp: #85b76d;
  --radius: 18px;
  --sidebar-w: 236px;
  --ease-spring: cubic-bezier(.18,.9,.22,1.08);
}

body.dark {
  color-scheme: dark;
  --bg-sky-1: #17231d;
  --bg-sky-2: #232d25;
  --bg-ground-1: #3d5940;
  --bg-ground-2: #263d2d;
  --surface: rgba(27,36,30,.93);
  --surface-solid: #1e2821;
  --surface-soft: rgba(255,255,255,.06);
  --surface-quiet: rgba(255,255,255,.035);
  --text: #edf2eb;
  --muted: #9eaaa1;
  --line: rgba(255,255,255,.09);
  --shadow: rgba(0,0,0,.31);
  --sidebar: rgba(11,17,13,.98);
  --sidebar-2: rgba(16,25,19,.98);
  --sidebar-text: #f2f5f0;
  --sidebar-muted: rgba(242,245,240,.5);
  --accent: #6e9868;
  --accent-2: #9fbe78;
  --accent-strong: #4d724e;
  --xp: #7eae67;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg-ground-2);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible { outline: 3px solid rgba(131,176,113,.72); outline-offset: 3px; }

.app-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-width: 320px;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, var(--bg-sky-1), var(--bg-sky-2) 58%, var(--bg-ground-1) 58.2%, var(--bg-ground-2));
}

/* Splash */
.launch-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(123,164,104,.17), transparent 25%),
    linear-gradient(180deg, #18251d 0%, #0e1611 100%);
  color: #f6f8f3;
  opacity: 1;
  visibility: visible;
  transition: opacity .48s ease, visibility .48s ease;
}
.launch-splash.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-enter {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
  display: grid;
  place-items: center;
}
.splash-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px;
  text-align: center;
}
.splash-title {
  position: relative;
  margin: 0;
  font-size: clamp(58px, 9.5vw, 120px);
  line-height: .86;
  font-weight: 950;
  letter-spacing: -.075em;
  color: #f8faf5;
  text-shadow: 0 3px 0 rgba(255,255,255,.06), 0 16px 32px rgba(0,0,0,.35);
  transform-origin: 50% 100%;
  animation: titleSlam 1.05s var(--ease-spring) both;
}
.splash-logo {
  width: clamp(82px, 10vw, 128px);
  height: clamp(82px, 10vw, 128px);
  object-fit: contain;
  margin: 28px 0 16px;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.28));
  opacity: 0;
  transform: translateY(18px) scale(.84);
  animation: logoRise .5s .68s var(--ease-spring) forwards;
}
.splash-enter-label {
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(239,245,235,.58);
  opacity: 0;
  animation: labelFade .36s .92s ease forwards, labelPulse 1.8s 1.3s ease-in-out infinite;
}
.splash-impact {
  position: absolute;
  left: 50%;
  top: 43%;
  width: 160px;
  height: 160px;
  border: 2px solid rgba(145,190,124,.38);
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(.15);
  opacity: 0;
  animation: impactRing .65s .47s ease-out forwards;
}
@keyframes titleSlam {
  0% { opacity: 0; transform: translateY(-110vh) scale(1.18,.8) rotate(-1deg); }
  54% { opacity: 1; transform: translateY(0) scale(1.04,.92); }
  64% { transform: translateY(6px) scale(1.1,.82); }
  78% { transform: translateY(-7px) scale(.98,1.06); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes logoRise { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes labelFade { to { opacity: 1; } }
@keyframes labelPulse { 0%,100% { color: rgba(239,245,235,.5); } 50% { color: rgba(239,245,235,.95); } }
@keyframes impactRing { 0% { opacity: .7; transform: translate(-50%,-50%) scale(.15); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(3.2); } }

/* Sidebar */
.sidebar {
  position: absolute;
  z-index: 200;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  padding: 16px 13px 14px;
  color: var(--sidebar-text);
  background: linear-gradient(180deg, var(--sidebar), var(--sidebar-2));
  border-right: 1px solid rgba(255,255,255,.07);
  box-shadow: 18px 0 45px rgba(0,0,0,.11);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 2px 3px 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  object-fit: cover;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.brand-copy { min-width: 0; }
.brand-copy strong { display: block; font-size: 14px; letter-spacing: -.025em; }
.brand-copy span { display: block; margin-top: 2px; font-size: 9px; color: var(--sidebar-muted); }
.sidebar-title {
  padding: 0 4px;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sidebar-muted);
}
.nav-stack { display: grid; gap: 5px; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.area-row { display: grid; grid-template-columns: minmax(0,1fr) 32px; gap: 4px; }
.nav-button, .area-toggle, .theme-button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--sidebar-text);
  cursor: pointer;
}
.nav-button {
  min-height: 46px;
  width: 100%;
  padding: 7px 9px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 12px;
  text-align: left;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.nav-button:hover { background: rgba(255,255,255,.06); }
.nav-button:active { transform: scale(.985); }
.nav-button.is-active { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.08); }
.nav-button.child { width: calc(100% - 14px); margin-left: 14px; position: relative; }
.nav-button.child:before {
  content: "";
  position: absolute;
  left: -9px;
  top: -6px;
  bottom: 50%;
  width: 7px;
  border-left: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);
  border-bottom-left-radius: 6px;
}
.nav-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.065);
  font-size: 15px;
}
.nav-copy { min-width: 0; flex: 1; }
.nav-name { display: block; font-size: 11px; font-weight: 760; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-meta { display: block; margin-top: 2px; color: var(--sidebar-muted); font-size: 8px; }
.area-toggle {
  width: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--sidebar-muted);
  transition: background .16s ease, color .16s ease;
}
.area-toggle:hover { background: rgba(255,255,255,.06); color: var(--sidebar-text); }
.area-toggle svg { width: 14px; height: 14px; transition: transform .2s ease; }
.area-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.area-children { display: grid; gap: 4px; overflow: hidden; max-height: 190px; opacity: 1; transition: max-height .24s ease, opacity .18s ease; }
.area-children.is-collapsed { max-height: 0; opacity: 0; pointer-events: none; }
.sidebar-footer { margin-top: auto; display: grid; gap: 8px; }
.theme-button {
  min-height: 42px;
  width: 100%;
  padding: 7px 9px;
  border-radius: 12px;
  background: rgba(255,255,255,.055);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.theme-label { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 720; }
.theme-switch { width: 34px; height: 19px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.15); }
.theme-switch-dot { width: 13px; height: 13px; border-radius: 50%; background: white; transition: transform .2s ease; }
body.dark .theme-switch { background: rgba(112,154,103,.65); }
body.dark .theme-switch-dot { transform: translateX(15px); }

/* Top HUD */
.top-hud {
  position: absolute;
  z-index: 280;
  left: var(--sidebar-w);
  right: 0;
  top: 0;
  min-height: 86px;
  padding: 10px 12px 10px 6px;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.character-stack {
  position: relative;
  left: auto;
  top: auto;
  width: 408px;
  flex: 0 0 408px;
  transform: none;
  pointer-events: auto;
}
.character-bar {
  width: 100%;
  min-height: 64px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 14px 38px var(--shadow);
  backdrop-filter: blur(18px);
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 31px;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  transition: transform .18s ease, background .2s ease;
}
.character-bar:hover { transform: translateY(-1px); }
.character-avatar {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--surface-soft);
  border: 1px solid var(--line);
}
.character-avatar img { width: 100%; height: 100%; object-fit: cover; }
.character-main { min-width: 0; }
.character-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.username { font-size: 12px; font-weight: 830; letter-spacing: -.015em; }
.overall-level { font-size: 9px; font-weight: 820; color: var(--muted); }
.xp-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.xp-label { font-size: 8px; font-weight: 820; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.xp-value { font-size: 8px; font-weight: 750; color: var(--muted); font-variant-numeric: tabular-nums; }
.progress-track {
  display: block;
  height: 10px;
  width: 100%;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(78,96,81,.12);
  border: 1px solid rgba(82,104,86,.1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
}
.progress-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent-strong), var(--xp), var(--accent-2)); transition: width .3s ease; }
.overall-progress-track {
  height: 12px;
  background: rgba(69,88,72,.16);
  border-color: rgba(79,105,83,.16);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.10);
}
.overall-progress-fill {
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, #5f9862 0%, #89bd6c 58%, #b8d77f 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .34s cubic-bezier(.2,.8,.2,1);
}
.character-chevron { width: 31px; height: 31px; border-radius: 9px; display: grid; place-items: center; color: var(--muted); background: var(--surface-soft); }
.character-chevron svg { width: 14px; height: 14px; transition: transform .2s ease; }
.character-bar[aria-expanded="true"] .character-chevron svg { transform: rotate(180deg); }
.skills-drawer {
  margin: 5px 9px 0;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 15px 15px;
  background: var(--surface);
  box-shadow: 0 14px 30px var(--shadow);
  backdrop-filter: blur(18px);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-8px);
  transition: max-height .28s ease, opacity .18s ease, transform .22s ease, padding .22s ease;
}
.skills-drawer.is-open { max-height: 190px; opacity: 1; transform: translateY(0); padding: 9px; }
.skill-row { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 8px; min-height: 52px; padding: 4px 1px; }
.skill-row + .skill-row { border-top: 1px solid var(--line); }
.skill-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-soft); font-size: 15px; }
.skill-copy { min-width: 0; }
.skill-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.skill-name { font-size: 9px; font-weight: 820; }
.skill-xp { font-size: 8px; color: var(--muted); font-variant-numeric: tabular-nums; }
.skill-level { font-size: 9px; font-weight: 820; color: var(--text); white-space: nowrap; }
.skill-row .progress-track { height: 7px; }
.skill-row[data-skill="woodcutting"] .progress-fill { background: linear-gradient(90deg, #745733, #b48a4e); }
.skill-row[data-skill="mining"] .progress-fill { background: linear-gradient(90deg, #5e6a67, #929d99); }
.inventory-button {
  position: absolute;
  right: 16px;
  top: 15px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 12px 28px var(--shadow);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  pointer-events: auto;
  font-size: 10px;
  font-weight: 780;
  transition: transform .16s ease, background .16s ease;
}
.inventory-button:hover { transform: translateY(-1px); }
.inventory-button svg { width: 16px; height: 16px; }

/* World host */
.world-host {
  position: absolute;
  z-index: 10;
  inset: 0 0 0 var(--sidebar-w);
  overflow: hidden;
}
.world-view {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.015);
  transition: opacity .2s ease, transform .28s ease, visibility 0s linear .28s;
}
.world-view.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
  transition: opacity .2s ease, transform .28s ease, visibility 0s linear 0s;
}

/* Lakeside map */
.map-view {
  padding: 96px 26px 24px;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,.16), transparent 30%),
    linear-gradient(180deg, var(--bg-sky-1), var(--bg-sky-2));
}
.map-card {
  position: relative;
  width: min(920px, 92%);
  height: min(620px, calc(100% - 12px));
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--surface);
  box-shadow: 0 28px 80px var(--shadow);
  overflow: hidden;
  backdrop-filter: blur(16px);
}
.map-head {
  position: absolute;
  z-index: 20;
  left: 18px;
  top: 16px;
  padding: 11px 13px;
  border-radius: 15px;
  background: rgba(248,249,244,.78);
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: 0 10px 24px rgba(41,58,43,.1);
  backdrop-filter: blur(14px);
}
body.dark .map-head { background: rgba(29,39,31,.78); border-color: rgba(255,255,255,.08); }
.map-head strong { display: block; font-size: 17px; letter-spacing: -.03em; }
.map-head span { display: block; margin-top: 3px; font-size: 9px; color: var(--muted); }
.map-art { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(145deg, #a7bf82, #78976a); }
body.dark .map-art { background: linear-gradient(145deg, #476148, #31493a); }
.map-art svg { width: 100%; height: 100%; display: block; }
.map-node {
  position: absolute;
  z-index: 16;
  min-width: 142px;
  min-height: 53px;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 15px;
  padding: 8px 10px;
  background: rgba(249,250,245,.9);
  color: #223127;
  box-shadow: 0 13px 28px rgba(42,57,42,.17);
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  text-align: left;
  transition: transform .18s var(--ease-spring), box-shadow .18s ease;
}
body.dark .map-node { background: rgba(29,39,31,.92); color: #eef2ec; border-color: rgba(255,255,255,.1); }
.map-node:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 18px 34px rgba(42,57,42,.22); }
.map-node.forest { left: 15%; top: 28%; }
.map-node.mines { right: 13%; top: 31%; }
.map-node-icon { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(76,113,72,.1); font-size: 17px; }
.map-node strong { display: block; font-size: 11px; }
.map-node small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; }


.map-node.town {
  left: 62%;
  bottom: 13%;
  top: auto;
}

.town-view {
  overflow: hidden;
  background: linear-gradient(180deg, #dcebe4 0%, #e8eee0 47%, #9fb780 47.3%, #718f63 100%);
}
body.dark .town-view {
  background: linear-gradient(180deg, #18251f 0%, #28372e 47%, #4c6848 47.3%, #304a36 100%);
}

.town-skyline {
  position: absolute;
  z-index: 1;
  left: -4%;
  right: -4%;
  top: 30%;
  height: 23%;
  opacity: .32;
  background:
    radial-gradient(ellipse at 7% 100%, #4f7452 0 13%, transparent 13.6%),
    radial-gradient(ellipse at 22% 100%, #567c58 0 17%, transparent 17.6%),
    radial-gradient(ellipse at 43% 100%, #4b7150 0 15%, transparent 15.6%),
    radial-gradient(ellipse at 68% 100%, #557a56 0 19%, transparent 19.6%),
    radial-gradient(ellipse at 88% 100%, #486d4e 0 17%, transparent 17.6%);
}

.town-ground {
  position: absolute;
  z-index: 2;
  left: -5%;
  right: -5%;
  bottom: -12%;
  height: 63%;
  border-radius: 48% 52% 0 0 / 17% 17% 0 0;
  background:
    radial-gradient(ellipse at 14% 48%, rgba(61,94,52,.13) 0 6%, transparent 6.7%),
    radial-gradient(ellipse at 78% 63%, rgba(112,91,57,.09) 0 6%, transparent 6.7%),
    radial-gradient(ellipse at 45% 76%, rgba(65,98,55,.12) 0 7%, transparent 7.7%),
    linear-gradient(180deg, #9eb77c, #718f63 54%, #55744f);
}
body.dark .town-ground {
  background:
    radial-gradient(ellipse at 14% 48%, rgba(25,54,31,.24) 0 6%, transparent 6.7%),
    radial-gradient(ellipse at 78% 63%, rgba(80,65,43,.16) 0 6%, transparent 6.7%),
    radial-gradient(ellipse at 45% 76%, rgba(25,53,30,.22) 0 7%, transparent 7.7%),
    linear-gradient(180deg, #506c49, #3b5940 54%, #294432);
}

.town-heading {
  position: absolute;
  z-index: 40;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  min-width: 235px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: 0 12px 34px var(--shadow);
  backdrop-filter: blur(16px);
  text-align: center;
}
.town-kicker {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.town-heading strong { display: block; font-size: 18px; letter-spacing: -.03em; }
.town-heading > span:last-child { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }

.town-road {
  position: absolute;
  z-index: 4;
  background: linear-gradient(90deg, rgba(147,116,75,.52), rgba(178,145,101,.68), rgba(147,116,75,.52));
  box-shadow: inset 0 0 0 1px rgba(100,77,51,.08);
  pointer-events: none;
}
.road-main {
  left: 50%;
  top: 48%;
  width: 112%;
  height: 74px;
  transform: translateX(-50%) rotate(-3deg);
  border-radius: 50%;
}
.road-cross {
  left: 50%;
  top: 48%;
  width: 88px;
  height: 67%;
  transform: translate(-50%, -10%) rotate(2deg);
  border-radius: 50%;
}

.town-square {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 51%;
  width: min(850px, calc(100% - 46px));
  height: min(470px, 63%);
  transform: translate(-50%, -50%);
}

.town-building {
  position: absolute;
  width: 170px;
  height: 166px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: center;
  transition: transform .18s var(--ease-spring), filter .18s ease;
}
.town-building:hover,
.town-building:focus-visible {
  transform: translateY(-7px) scale(1.025);
  filter: brightness(1.03);
}
.town-building:focus-visible {
  outline: 3px solid rgba(103,145,98,.72);
  outline-offset: 5px;
  border-radius: 18px;
}

.town-building.lumbermill { left: 2%; top: 8%; }
.town-building.blacksmith { right: 2%; top: 8%; }
.town-building.strange-shack { left: 50%; top: 2%; transform: translateX(-50%); }
.town-building.strange-shack:hover,
.town-building.strange-shack:focus-visible {
  transform: translateX(-50%) translateY(-7px) scale(1.025) rotate(-.5deg);
}
.town-building.farmer { left: 16%; bottom: 2%; }
.town-building.foragers-hut { right: 16%; bottom: 2%; }

.building-visual {
  position: absolute;
  left: 50%;
  top: 0;
  width: 140px;
  height: 115px;
  transform: translateX(-50%);
  filter: drop-shadow(0 16px 12px rgba(42,58,39,.18));
}
.building-shadow {
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 118px;
  height: 19px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(31,48,31,.18);
  filter: blur(5px);
}
.building-body {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 8px;
  height: 69px;
  border-radius: 5px 5px 8px 8px;
  background: linear-gradient(90deg, #b98c5d, #d2ac7b 52%, #a97950);
  box-shadow: inset -8px 0 12px rgba(89,56,37,.13), inset 0 1px rgba(255,255,255,.2);
}
.building-roof {
  position: absolute;
  left: 9px;
  right: 9px;
  top: 9px;
  height: 60px;
  clip-path: polygon(50% 0, 100% 58%, 90% 68%, 50% 21%, 10% 68%, 0 58%);
  background: linear-gradient(135deg, #67483c, #8d6048 58%, #593e36);
}
.building-door {
  position: absolute;
  left: 50%;
  bottom: 9px;
  width: 23px;
  height: 42px;
  transform: translateX(-50%);
  border-radius: 9px 9px 2px 2px;
  background: #604531;
}
.building-window {
  position: absolute;
  bottom: 38px;
  width: 18px;
  height: 19px;
  border: 3px solid #76563d;
  border-radius: 3px;
  background: rgba(194,221,203,.78);
}
.window-a { left: 31px; }
.window-b { right: 31px; }

.building-detail {
  position: absolute;
  left: 50%;
  top: 48px;
  transform: translateX(-50%);
  min-width: 26px;
  height: 26px;
  padding: 0 5px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.72);
  color: #594432;
  font-size: 14px;
  font-weight: 900;
}

.building-label {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 155px;
  transform: translateX(-50%);
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(37,53,38,.13);
  backdrop-filter: blur(10px);
}
.building-label strong { display: block; font-size: 10px; letter-spacing: -.015em; }
.building-label small { display: block; margin-top: 2px; color: var(--muted); font-size: 7px; }

.blacksmith .building-body { background: linear-gradient(90deg, #77746c, #9d978c 52%, #67645e); }
.blacksmith .building-roof { background: linear-gradient(135deg, #41443f, #5f625c 58%, #343733); }
.blacksmith .building-window { background: rgba(244,165,74,.68); border-color: #665143; }

.strange-shack .building-visual { transform: translateX(-50%) rotate(-2deg); }
.strange-shack .building-body { background: linear-gradient(90deg, #675946, #88765a 52%, #554a3c); }
.strange-shack .building-roof { background: linear-gradient(135deg, #3d4036, #555748 58%, #32352e); }
.strange-shack .building-window { background: rgba(150,192,133,.58); }
.strange-shack .building-detail { color: #46543f; background: rgba(215,229,199,.75); }

.farmer .building-body { background: linear-gradient(90deg, #b1734e, #d29666 52%, #995e41); }
.farmer .building-roof { background: linear-gradient(135deg, #9b4f42, #c06d54 58%, #7d4039); }

.foragers-hut .building-body { background: linear-gradient(90deg, #7a684b, #9f8b63 52%, #64563f); }
.foragers-hut .building-roof { background: linear-gradient(135deg, #42563c, #627650 58%, #344630); }

.lumbermill .building-body {
  background:
    repeating-linear-gradient(0deg, transparent 0 10px, rgba(96,63,38,.11) 10px 12px),
    linear-gradient(90deg, #a87449, #c79565 52%, #8c603f);
}

.town-lake-edge {
  position: absolute;
  z-index: 3;
  right: -7%;
  bottom: -8%;
  width: 34%;
  height: 34%;
  border-radius: 52% 0 0 0 / 58% 0 0 0;
  background: linear-gradient(145deg, #86bcc0, #578f99);
}
.town-foliage {
  position: absolute;
  z-index: 6;
  color: #3e6945;
  font-size: 42px;
  letter-spacing: -10px;
  opacity: .8;
  pointer-events: none;
}
.foliage-a { left: 2%; bottom: 4%; transform: rotate(-7deg); }
.foliage-b { right: 5%; top: 29%; transform: rotate(8deg); }



.forest-node-stage,
.mine-node-stage {
  position: absolute;
  z-index: 24;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.forest-node-stage .tree-node,
.mine-node-stage .mine-node {
  pointer-events: auto;
}

/* Forest */
.forest-view {
  background: linear-gradient(180deg, var(--bg-sky-1), var(--bg-sky-2) 50%, #91ad76 50.2%, #6d8e5b 72%, #4d6d48 100%);
}
body.dark .forest-view { background: linear-gradient(180deg, var(--bg-sky-1), var(--bg-sky-2) 50%, #415d42 50.2%, #334d38 72%, #243a2c 100%); }
.forest-ground {
  position: absolute;
  z-index: 1;
  left: -8%;
  right: -8%;
  bottom: -14%;
  height: 66%;
  border-radius: 48% 52% 0 0 / 18% 18% 0 0;
  background:
    radial-gradient(ellipse at 13% 42%, rgba(47,77,39,.18) 0 7%, transparent 7.7%),
    radial-gradient(ellipse at 31% 66%, rgba(109,91,55,.11) 0 6%, transparent 6.8%),
    radial-gradient(ellipse at 55% 44%, rgba(49,82,41,.15) 0 8%, transparent 8.8%),
    radial-gradient(ellipse at 73% 69%, rgba(104,88,56,.09) 0 7%, transparent 7.8%),
    radial-gradient(ellipse at 88% 45%, rgba(47,77,39,.17) 0 8%, transparent 8.8%),
    linear-gradient(180deg, #8eaa72, #6c8b58 48%, #4d6d48 100%);
  box-shadow: inset 0 20px 40px rgba(255,255,255,.025);
}
body.dark .forest-ground {
  background:
    radial-gradient(ellipse at 13% 42%, rgba(20,43,25,.27) 0 7%, transparent 7.7%),
    radial-gradient(ellipse at 31% 66%, rgba(72,58,39,.16) 0 6%, transparent 6.8%),
    radial-gradient(ellipse at 55% 44%, rgba(21,45,27,.25) 0 8%, transparent 8.8%),
    radial-gradient(ellipse at 73% 69%, rgba(72,58,39,.14) 0 7%, transparent 7.8%),
    radial-gradient(ellipse at 88% 45%, rgba(20,43,25,.25) 0 8%, transparent 8.8%),
    linear-gradient(180deg, #405c42, #324d38 48%, #243a2c 100%);
}
.forest-ground-detail {
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  height: 34%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 8% 78%, rgba(28,61,31,.19) 0 3.2%, transparent 3.8%),
    radial-gradient(ellipse at 21% 91%, rgba(91,74,45,.13) 0 2.4%, transparent 3%),
    radial-gradient(ellipse at 38% 74%, rgba(30,64,31,.2) 0 3%, transparent 3.6%),
    radial-gradient(ellipse at 54% 90%, rgba(93,74,42,.11) 0 2.6%, transparent 3.2%),
    radial-gradient(ellipse at 69% 78%, rgba(29,62,30,.2) 0 3.1%, transparent 3.7%),
    radial-gradient(ellipse at 83% 91%, rgba(89,70,42,.11) 0 2.4%, transparent 3%),
    radial-gradient(ellipse at 93% 75%, rgba(29,62,31,.2) 0 3.2%, transparent 3.8%);
}
.forest-horizon {
  position: absolute;
  z-index: 0;
  left: -3%; right: -3%; top: 46%; height: 16%;
  opacity: .36;
  filter: blur(.3px);
  pointer-events: none;
  background:
    radial-gradient(ellipse at 8% 100%, #30533a 0 12%, transparent 12.5%),
    radial-gradient(ellipse at 22% 100%, #31583b 0 17%, transparent 17.5%),
    radial-gradient(ellipse at 39% 100%, #365d40 0 13%, transparent 13.5%),
    radial-gradient(ellipse at 57% 100%, #2f5339 0 18%, transparent 18.5%),
    radial-gradient(ellipse at 76% 100%, #355d3f 0 14%, transparent 14.5%),
    radial-gradient(ellipse at 92% 100%, #31563a 0 17%, transparent 17.5%);
}
.tree-node {
  position: absolute;
  z-index: 10;
  width: 252px;
  height: 420px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  transform: translate(-50%,-100%) scale(var(--scale,1));
  transform-origin: 50% 100%;
  filter: drop-shadow(0 20px 15px rgba(30,48,30,.18));
}
.tree-shell { position: absolute; inset: 0; transform-origin: 50% 95%; }
.tree-node.is-spawning .tree-shell { animation: nodeSpawn .42s var(--ease-spring) both; }
.tree-node.is-hit-left .tree-shell { animation: treeHitLeft .18s ease; }
.tree-node.is-hit-right .tree-shell { animation: treeHitRight .18s ease; }
.tree-node.is-depleted .tree-shell { animation: nodeDeplete .44s ease forwards; }
.tree-art { width: 100%; height: 100%; overflow: visible; pointer-events: none; transform: translateY(24px); }
.resource-hover-bar {
  position: fixed;
  z-index: 860;
  left: 50%;
  top: 100px;
  width: 158px;
  padding: 7px 8px 8px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--surface-solid);
  box-shadow: 0 10px 26px rgba(25,39,29,.18);
  backdrop-filter: blur(14px);
  transform: translateX(-50%) translateY(-4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
}
.resource-hover-bar.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear 0s;
}
.resource-hover-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}
.resource-hover-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 8px;
  font-weight: 850;
}
.resource-hover-meta {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 7px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}
.resource-hover-track { height: 6px; }
.resource-hover-fill {
  width: 100%;
  background: linear-gradient(90deg, #759b63, #a8c56e);
  transition: width .14s ease;
}

.tree-tag {
  position: absolute;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(22,35,26,.74);
  color: white;
  font-size: 7px;
  font-weight: 820;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .14s ease, transform .14s ease;
  pointer-events: none;
}
.tree-node:hover .tree-tag { opacity: 1; transform: translate(-50%,-3px); }
.tree-chip, .rock-chip { position: absolute; z-index: 60; pointer-events: none; animation: chipBurst .58s ease-out forwards; }
.tree-chip { left: 50%; top: 73%; width: 10px; height: 7px; border-radius: 2px 6px 2px 6px; background: #b47c4f; }
.tree-node.birch .tree-chip { background: #dedbd0; }
.loot-pop {
  position: absolute;
  z-index: 80;
  left: 50%;
  top: 48%;
  transform: translate(-50%,-50%);
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-solid);
  color: var(--text);
  box-shadow: 0 12px 28px var(--shadow);
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
  pointer-events: none;
  animation: lootFloat .9s ease-out forwards;
}
@keyframes nodeSpawn { 0% { opacity:0; transform: translateY(32px) scale(.62,.45); } 72% { opacity:1; transform: translateY(-4px) scale(1.03); } 100% { opacity:1; transform:none; } }
@keyframes treeHitLeft { 0%,100% { transform:rotate(0); } 45% { transform:rotate(-2.4deg); } }
@keyframes treeHitRight { 0%,100% { transform:rotate(0); } 45% { transform:rotate(2.4deg); } }
@keyframes nodeDeplete { 0% { opacity:1; transform:none; } 50% { transform:translateY(8px) scale(1.03,.87); } 100% { opacity:0; transform:translateY(45px) scale(.56,.2); } }
@keyframes chipBurst { from { opacity:1; transform:translate(-50%,-50%) rotate(0); } to { opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)); } }
@keyframes lootFloat { 0% { opacity:0; transform:translate(-50%,4px) scale(.78); } 18% { opacity:1; transform:translate(-50%,-7px) scale(1); } 75% { opacity:1; transform:translate(-50%,-38px); } 100% { opacity:0; transform:translate(-50%,-64px) scale(.94); } }

/* Mines */
.mines-view {
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 22%, rgba(66,78,72,.32), transparent 30%),
    linear-gradient(180deg, #242b28 0%, #171d1a 48%, #101411 100%);
}
body.dark .mines-view {
  background:
    radial-gradient(ellipse at 50% 22%, rgba(57,70,64,.22), transparent 30%),
    linear-gradient(180deg, #121815 0%, #0d120f 48%, #080b09 100%);
}
.cave-depth {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 18%;
  width: 48%;
  height: 46%;
  transform: translateX(-50%);
  border-radius: 46% 54% 42% 58% / 58% 58% 42% 42%;
  background:
    radial-gradient(ellipse at 50% 64%, #060908 0 25%, #0d120f 53%, #1b221e 100%);
  box-shadow: inset 0 0 70px rgba(0,0,0,.82), 0 0 80px rgba(0,0,0,.38);
}
.cave-ceiling {
  position: absolute;
  z-index: 8;
  left: -4%;
  right: -4%;
  top: -5%;
  height: 35%;
  background:
    radial-gradient(ellipse at 8% 0%, #3e4541 0 22%, transparent 22.5%),
    radial-gradient(ellipse at 28% 0%, #343b37 0 26%, transparent 26.5%),
    radial-gradient(ellipse at 52% 0%, #414843 0 25%, transparent 25.5%),
    radial-gradient(ellipse at 75% 0%, #353c38 0 27%, transparent 27.5%),
    radial-gradient(ellipse at 96% 0%, #3e4540 0 24%, transparent 24.5%);
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.42));
}
.cave-ceiling:after {
  content: '';
  position: absolute;
  left: 7%;
  right: 7%;
  top: 62%;
  height: 120px;
  background:
    linear-gradient(72deg, transparent 0 8%, #353c38 8.5% 10%, transparent 10.5% 23%, #2e3531 23.5% 26%, transparent 26.5% 44%, #3a413d 44.5% 47%, transparent 47.5% 67%, #303733 67.5% 70%, transparent 70.5% 88%, #39403b 88.5% 91%, transparent 91.5%);
  clip-path: polygon(0 0, 100% 0, 94% 12%, 90% 68%, 85% 19%, 72% 10%, 69% 78%, 64% 16%, 49% 6%, 46% 66%, 41% 14%, 27% 8%, 24% 73%, 18% 17%, 5% 10%);
}
.cave-wall-layer {
  position: absolute;
  z-index: 5;
  top: 12%;
  bottom: 10%;
  width: 33%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.035) 0 5%, transparent 5.6%),
    radial-gradient(circle at 72% 61%, rgba(0,0,0,.2) 0 7%, transparent 7.6%),
    linear-gradient(145deg, #424944, #2d3430 56%, #1e2421);
  box-shadow: inset -24px -12px 35px rgba(0,0,0,.22);
}
.cave-wall-left {
  left: -12%;
  border-radius: 0 58% 44% 0 / 0 48% 52% 0;
  transform: rotate(3deg);
}
.cave-wall-right {
  right: -12%;
  border-radius: 58% 0 0 44% / 48% 0 0 52%;
  transform: rotate(-3deg) scaleX(-1);
}
.cave-floor {
  position: absolute;
  z-index: 3;
  left: -5%;
  right: -5%;
  bottom: -12%;
  height: 55%;
  border-radius: 47% 53% 0 0 / 15% 15% 0 0;
  background:
    radial-gradient(ellipse at 13% 45%, rgba(119,124,116,.11) 0 5%, transparent 5.7%),
    radial-gradient(ellipse at 32% 72%, rgba(13,16,14,.22) 0 6%, transparent 6.7%),
    radial-gradient(ellipse at 57% 51%, rgba(111,117,108,.09) 0 6%, transparent 6.7%),
    radial-gradient(ellipse at 82% 76%, rgba(11,14,12,.22) 0 5%, transparent 5.7%),
    linear-gradient(180deg, #303733, #202622 50%, #151a17);
  box-shadow: inset 0 20px 38px rgba(255,255,255,.018);
}
.cave-tunnel {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 31%;
  width: 25%;
  height: 34%;
  transform: translateX(-50%);
  border-radius: 52% 48% 16% 16% / 58% 58% 12% 12%;
  background: radial-gradient(ellipse at 50% 70%, #050706 0 42%, #0c100e 66%, transparent 69%);
  box-shadow: 0 0 0 12px rgba(39,45,41,.72), 0 0 0 22px rgba(52,58,53,.42);
}
.cave-support {
  position: absolute;
  z-index: 9;
  top: 28%;
  width: 16px;
  height: 39%;
  border-radius: 5px;
  background: linear-gradient(90deg, #5c432e, #896344 48%, #493623);
  box-shadow: inset -4px 0 rgba(0,0,0,.16), 0 10px 20px rgba(0,0,0,.22);
}
.cave-support:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 150px;
  height: 17px;
  transform: translateX(-50%);
  border-radius: 5px;
  background: linear-gradient(180deg, #876243, #5b422d);
}
.support-a { left: 31%; }
.support-b { right: 31%; }
.cave-lantern {
  position: absolute;
  z-index: 15;
  top: 35%;
  width: 13px;
  height: 18px;
  border: 2px solid #66513c;
  border-radius: 4px;
  background: #d9a44a;
  box-shadow: 0 0 16px 6px rgba(238,174,77,.28), 0 0 48px 18px rgba(238,174,77,.08);
}
.cave-lantern:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: 34px;
  background: #5b5044;
}
.lantern-a { left: 34%; }
.lantern-b { right: 34%; }
.cave-crystal {
  position: absolute;
  z-index: 7;
  bottom: 17%;
  width: 24px;
  height: 60px;
  clip-path: polygon(50% 0, 94% 72%, 68% 100%, 28% 91%, 7% 68%);
  background: linear-gradient(135deg, #768f9e, #9b79b9 55%, #5e7582);
  opacity: .48;
  filter: drop-shadow(0 0 12px rgba(139,111,171,.18));
}
.crystal-a { left: 8%; transform: rotate(-8deg) scale(.78); }
.crystal-b { right: 8%; transform: rotate(11deg) scale(.62); }
.mine-node {
  position: absolute;
  width: 178px;
  height: 138px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  transform: translate(-50%, -100%) scale(var(--mine-scale, 1));
  transform-origin: 50% 100%;
  filter: drop-shadow(0 16px 12px rgba(0,0,0,.34));
}
.mine-node-shell { position: absolute; inset: 0; transform-origin: 50% 88%; }
.mine-node.is-spawning .mine-node-shell { animation: mineNodeSpawn .34s var(--ease-spring) both; }
.mine-node.is-hit-left .mine-node-shell { animation: rockHitLeft .18s ease; }
.mine-node.is-hit-right .mine-node-shell { animation: rockHitRight .18s ease; }
.mine-node.is-depleted .mine-node-shell { animation: rockDeplete .44s ease forwards; }
.ore-node-art { width: 100%; height: 100%; overflow: visible; }
.ore-veins { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--ore-color) 45%, transparent)); }
.mine-coal .ore-veins { stroke-width: 11; opacity: .92; }
.mine-stone .ore-veins { opacity: .34; stroke-width: 5; }
.mine-goldOre .ore-veins,
.mine-silverOre .ore-veins,
.mine-geode .ore-veins { filter: drop-shadow(0 0 5px var(--ore-color)); }
.rock-chip { left:50%; top:58%; width:10px; height:8px; border-radius:4px; }
@keyframes mineNodeSpawn { 0% { opacity:0; transform:translateY(20px) scale(.72,.52); } 72% { opacity:1; transform:translateY(-2px) scale(1.02); } 100% { opacity:1; transform:none; } }
@keyframes rockHitLeft { 0%,100% { transform:rotate(0); } 45% { transform:rotate(-2.4deg) scale(.99); } }
@keyframes rockHitRight { 0%,100% { transform:rotate(0); } 45% { transform:rotate(2.4deg) scale(.99); } }
@keyframes rockDeplete { 0% { opacity:1; transform:none; } 55% { transform:translateY(8px) scale(1.03,.84); } 100% { opacity:0; transform:translateY(28px) scale(.66,.22); } }

/* Inventory */
.inventory-drawer {
  position: fixed;
  z-index: 700;
  top: 14px;
  right: 14px;
  bottom: 14px;
  width: 300px;
  max-width: calc(100vw - var(--sidebar-w) - 28px);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 70px rgba(0,0,0,.25);
  backdrop-filter: blur(24px);
  transform: translateX(calc(100% + 32px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: transform .28s var(--ease-spring), opacity .17s ease, visibility 0s linear .3s;
}
.inventory-drawer.is-open { transform:translateX(0); opacity:1; visibility:visible; pointer-events:auto; transition:transform .28s var(--ease-spring), opacity .17s ease, visibility 0s; }
.drawer-head { min-height:34px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.drawer-head strong { display:block; font-size:14px; letter-spacing:-.02em; }
.drawer-head span { display:block; margin-top:2px; font-size:8px; color:var(--muted); }
.icon-button { width:30px; height:30px; border:0; border-radius:8px; background:transparent; color:var(--muted); display:grid; place-items:center; cursor:pointer; }
.icon-button:hover { background:var(--surface-soft); color:var(--text); }
.drawer-tabs { display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:3px; border-radius:10px; background:var(--surface-quiet); }
.drawer-tab { min-height:29px; border:0; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; font-size:9px; font-weight:820; }
.drawer-tab.is-active { background:var(--surface-solid); color:var(--text); box-shadow:0 1px 4px rgba(0,0,0,.08); }
.drawer-body { min-height:0; flex:1; overflow:hidden; }
.drawer-pane { height:100%; overflow-y:auto; padding:2px 1px 4px; }
.drawer-pane[hidden] { display:none !important; }
.item-empty { padding:20px 4px; text-align:center; color:var(--muted); font-size:9px; }
.mini-ore,
.mini-gem {
  width: 16px;
  height: 14px;
  display: inline-block;
  clip-path: polygon(22% 6%, 78% 0, 100% 42%, 84% 91%, 31% 100%, 0 64%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.mini-ore.stone { background: linear-gradient(135deg,#a0aaa5,#717b76); }
.mini-ore.coal { background: linear-gradient(135deg,#4b514e,#1f2522); }
.mini-ore.iron { background: linear-gradient(135deg,#cb896c,#965b46); }
.mini-ore.gold { background: linear-gradient(135deg,#ead06a,#b8932d); }
.mini-ore.silver { background: linear-gradient(135deg,#eef2f4,#aeb9c0); }
.mini-gem {
  width: 13px;
  height: 17px;
  clip-path: polygon(50% 0, 94% 38%, 71% 100%, 28% 100%, 6% 38%);
}
.mini-gem.quartz { background: linear-gradient(135deg,#fbfaf5,#d9e0e4 60%,#b7c2c7); }
.mini-gem.amethyst { background: linear-gradient(135deg,#d8c4ed,#9066b5 58%,#684488); }

.item-list { display:flex; flex-direction:column; }
.item-row { min-height:35px; display:grid; grid-template-columns:25px minmax(0,1fr) auto; align-items:center; gap:8px; padding:4px 1px; border-bottom:1px solid var(--line); }
.item-row:first-of-type { border-top:1px solid var(--line); }
.item-icon { width:24px; height:24px; display:grid; place-items:center; color:var(--muted); }
.item-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10.5px; font-weight:710; }
.item-count { min-width:24px; text-align:right; color:var(--muted); font-size:10px; font-weight:800; font-variant-numeric:tabular-nums; }
.item-count:before { content:"×"; margin-right:2px; opacity:.45; font-weight:600; }
.mini-log { width:20px; height:12px; border-radius:4px; background:linear-gradient(90deg,#6e472e,#a97849 50%,#70482f); box-shadow:inset 0 0 0 1.5px rgba(77,45,27,.18); }
.mini-birch { width:20px; height:12px; border-radius:4px; background:linear-gradient(90deg,#c9c7bc,#efede2 46%,#d4d2c7 72%,#b9b7ac); box-shadow:inset 0 0 0 1.5px rgba(72,75,69,.14); position:relative; }
.mini-birch:before, .mini-birch:after { content:""; position:absolute; left:4px; height:1.5px; width:8px; border-radius:2px; background:rgba(42,45,41,.42); }
.mini-birch:before { top:3px; } .mini-birch:after { left:9px; bottom:3px; width:6px; }
.inventory-drawer.equipment-mode {
  width: 470px;
}

.equipment-screen {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 1px 6px;
}

.equipment-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 3px 8px;
  border-bottom: 1px solid var(--line);
}

.equipment-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.equipment-header strong {
  display: block;
  font-size: 15px;
  letter-spacing: -.025em;
}

.equipment-summary {
  padding: 5px 7px;
  border-radius: 999px;
  background: var(--surface-quiet);
  color: var(--muted);
  font-size: 7.5px;
  font-weight: 800;
}

.equipment-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}

.equipment-group {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(110,120,108,.028);
}

.equipment-group-wide {
  grid-column: 1 / -1;
}

.equipment-group-head {
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.equipment-group-head > span:first-child {
  color: var(--text);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.equipment-group-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 7px;
  font-weight: 850;
}

.equipment-grid {
  display: grid;
  gap: 6px;
}

.equipment-grid.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.equipment-grid.three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.equipment-grid.armor-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.trinket-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.equipment-slot {
  min-width: 0;
  min-height: 54px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-quiet);
  color: var(--text);
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  align-items: center;
  gap: 7px;
  text-align: left;
  cursor: default;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.equipment-slot:hover {
  transform: translateY(-1px);
  background: var(--surface-soft);
  border-color: rgba(105,130,107,.24);
}

.equipment-slot.is-compact {
  min-height: 58px;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 4px;
  text-align: center;
}

.equipment-slot-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 13px;
  box-shadow: inset 0 0 0 1px rgba(110,120,108,.05);
}

.equipment-slot-copy { min-width: 0; }

.equipment-slot-name {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text);
  font-size: 8.5px;
  font-weight: 820;
}

.equipment-slot-state {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 7px;
  white-space: nowrap;
}

.equipment-slot.is-compact .equipment-slot-name { font-size: 7.5px; }
.equipment-slot.is-compact .equipment-slot-state { display: none; }

/* Toasts */
.toast-stack { position:fixed; z-index:900; right:18px; bottom:18px; width:min(290px,calc(100vw - 36px)); display:grid; gap:7px; pointer-events:none; }
.toast { padding:9px 11px; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:0 12px 30px var(--shadow); color:var(--text); backdrop-filter:blur(16px); display:flex; align-items:center; gap:8px; animation:toastIn .3s var(--ease-spring) both; }
.toast.is-leaving { animation:toastOut .25s ease forwards; }
.toast-icon { width:25px; height:25px; border-radius:8px; display:grid; place-items:center; background:var(--surface-soft); font-size:13px; }
.toast-copy strong { display:block; font-size:9px; }
.toast-copy span { display:block; margin-top:2px; color:var(--muted); font-size:8px; }
@keyframes toastIn { from { opacity:0; transform:translateX(24px) scale(.96); } to { opacity:1; transform:none; } }
@keyframes toastOut { to { opacity:0; transform:translateX(24px) scale(.96); } }

/* SVG palettes */
.oak-trunk { fill:#765039; }
.oak-trunk-light { fill:#a07049; opacity:.7; }
.oak-bark { fill:none; stroke:rgba(58,36,25,.3); stroke-width:6; stroke-linecap:round; }
.oak-canopy { fill:#447948; }
.oak-canopy-shadow { fill:#305d3a; opacity:.74; }
.oak-canopy-light { fill:#70a865; opacity:.52; }
.birch-trunk { fill:#ece9dd; }
.birch-trunk-shadow { fill:#c8c6ba; opacity:.78; }
.birch-mark { fill:rgba(44,48,42,.72); }
.birch-canopy { fill:#70a75f; }
.birch-canopy-shadow { fill:#4e8449; opacity:.72; }
.birch-canopy-light { fill:#91c87b; opacity:.55; }
.apple-fruit { fill:#d85a4b; stroke:rgba(112,39,33,.25); stroke-width:2; }
.apple-shine { fill:rgba(255,255,255,.45); }

@media (max-width: 820px) {
  :root { --sidebar-w: 188px; }
  .sidebar { padding-inline:10px; }
  .brand-copy span { display:none; }
  .character-stack { width:min(390px,calc(100% - 145px)); }
  .map-node { min-width:120px; }
  .map-node.forest { left:8%; }
  .map-node.mines { right:8%; }
  .map-node.town { left:56%; bottom:10%; }
  .inventory-drawer { width:286px; max-width:calc(100vw - var(--sidebar-w) - 20px); right:10px; top:10px; bottom:10px; }
}

@media (max-width: 560px) {
  :root { --sidebar-w: 136px; }
  .sidebar { padding:10px 7px; }
  .brand { gap:6px; }
  .brand-logo { width:34px; height:34px; border-radius:10px; }
  .brand-copy strong { font-size:10px; }
  .nav-icon { display:none; }
  .nav-button { min-height:40px; padding:6px 7px; }
  .nav-name { font-size:9px; }
  .nav-meta { font-size:7px; }
  .area-row { grid-template-columns:minmax(0,1fr) 29px; }
  .area-toggle { width:29px; }
  .theme-label span:last-child { display:none; }
  .top-hud { left:var(--sidebar-w); padding-inline:8px; }
  .character-stack { left:8px; transform:none; width:calc(100% - 96px); top:9px; }
  .character-bar { grid-template-columns:35px minmax(0,1fr) 27px; min-height:57px; padding:7px 8px; }
  .character-avatar { width:35px; height:35px; border-radius:10px; }
  .username { font-size:10px; }
  .overall-level { font-size:8px; }
  .xp-label { display:none; }
  .inventory-button { right:8px; top:10px; width:38px; height:38px; min-height:38px; padding:0; justify-content:center; }
  .inventory-button span { display:none; }
  .map-view { padding:82px 8px 10px; }
  .map-card { width:100%; border-radius:18px; }
  .map-head { left:10px; top:10px; }
  .map-node { min-width:96px; padding:7px 8px; }
  .map-node-icon { display:none; }
  .map-node.forest { left:4%; top:26%; }
  .map-node.mines { right:4%; top:29%; }
  .map-node.town { left:50%; bottom:8%; top:auto; transform:translateX(-50%); }
  .map-node.town:hover { transform:translateX(-50%) translateY(-4px) scale(1.02); }
  .tree-node { width:210px; height:350px; }
  .inventory-drawer { right:7px; top:7px; bottom:7px; width:calc(100vw - var(--sidebar-w) - 14px); max-width:none; padding:10px; }
  .inventory-drawer.equipment-mode {
    width: min(430px, calc(100vw - var(--sidebar-w) - 14px));
  }
  .equipment-groups {
    grid-template-columns: 1fr;
  }
  .equipment-group-wide {
    grid-column: auto;
  }
  .equipment-grid.armor-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .mine-node { width:150px; height:116px; }
  .cave-support { height:34%; }
}


@media (max-width: 500px) {
  .inventory-drawer.equipment-mode {
    width: calc(100vw - var(--sidebar-w) - 14px);
  }
  .equipment-grid.two-col,
  .equipment-grid.three-col {
    grid-template-columns: 1fr;
  }
  .equipment-grid.armor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .trinket-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .equipment-slot.is-compact {
    grid-template-columns: 25px minmax(0,1fr);
    justify-items: stretch;
    text-align: left;
    min-height: 46px;
  }
  .equipment-slot.is-compact .equipment-slot-state {
    display: block;
  }
}


@media (max-width: 760px) {
  .town-heading { top: 10px; min-width: 210px; }
  .town-square { width: calc(100% - 20px); height: 72%; top: 56%; }
  .town-building { width: 128px; height: 142px; }
  .building-visual { width: 112px; height: 96px; }
  .building-label { width: 124px; }
  .town-building.lumbermill { left: 1%; top: 7%; }
  .town-building.blacksmith { right: 1%; top: 7%; }
  .town-building.farmer { left: 4%; bottom: 1%; }
  .town-building.foragers-hut { right: 4%; bottom: 1%; }
}

@media (max-width: 520px) {
  .town-heading > span:last-child { display: none; }
  .town-square { top: 58%; height: 76%; }
  .town-building { width: 104px; height: 122px; }
  .building-visual { width: 92px; height: 78px; }
  .building-body { left: 12px; right: 12px; height: 54px; }
  .building-roof { left: 5px; right: 5px; height: 47px; }
  .building-door { height: 32px; width: 18px; }
  .building-window { display: none; }
  .building-detail { top: 37px; height: 21px; min-width: 22px; font-size: 11px; }
  .building-label { width: 103px; padding: 5px 6px; }
  .building-label strong { font-size: 8.5px; }
  .building-label small { display: none; }
}

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


/* Currency HUD */
.wallet-hud {
  position: relative;
  left: auto;
  top: auto;
  width: 348px;
  min-height: 64px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), transparent 62%),
    var(--surface);
  box-shadow:
    0 14px 38px var(--shadow),
    inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter: blur(18px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 4px;
  pointer-events: auto;
}

.wallet-hud::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.045);
  pointer-events: none;
}

.currency-chip {
  position: relative;
  min-width: 0;
  min-height: 50px;
  padding: 5px 4px;
  border: 1px solid rgba(90,105,92,.08);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.065), transparent 48%),
    var(--surface-quiet);
  display: grid;
  grid-template-columns: 25px minmax(0,1fr);
  align-items: center;
  gap: 5px;
  overflow: hidden;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.currency-chip:hover {
  transform: translateY(-1px);
  background: var(--surface-soft);
  border-color: rgba(101,126,105,.16);
}

.currency-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.currency-copy strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  font-size: 9px;
  line-height: 1;
  font-weight: 880;
  font-variant-numeric: tabular-nums;
}

.currency-copy small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: 5.8px;
  line-height: 1.1;
  font-weight: 780;
  letter-spacing: .025em;
}

.coin-icon {
  position: relative;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid rgba(65,54,39,.22);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.52),
    inset 0 -3px 4px rgba(67,45,27,.16),
    0 3px 6px rgba(0,0,0,.16);
  color: rgba(54,45,34,.74);
  font-size: 7px;
  font-weight: 950;
  text-shadow: 0 1px rgba(255,255,255,.3);
}

.coin-icon::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.34);
  box-shadow: inset 0 0 0 1px rgba(60,47,31,.08);
}

.coin-icon::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 4px;
  width: 7px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,.42);
  transform: rotate(-22deg);
}

.coin-icon > span {
  position: relative;
  z-index: 2;
}

.currency-chip.copper .coin-icon {
  background: radial-gradient(circle at 32% 25%, #efbd8a 0 9%, #c47a4d 35%, #96502f 75%, #713b27 100%);
}
.currency-chip.silver .coin-icon {
  background: radial-gradient(circle at 32% 25%, #ffffff 0 8%, #dde2e1 34%, #a7b1b0 72%, #7f8b8a 100%);
}
.currency-chip.gold .coin-icon {
  background: radial-gradient(circle at 32% 25%, #fff1a9 0 9%, #e8bf4d 36%, #bf8128 74%, #8c5e22 100%);
}
.currency-chip.platinum .coin-icon {
  background: radial-gradient(circle at 32% 25%, #ffffff 0 8%, #d5ece8 34%, #92b7b1 72%, #628a85 100%);
}

.currency-chip.xelium {
  background:
    radial-gradient(circle at 50% 110%, rgba(138,77,196,.13), transparent 62%),
    linear-gradient(180deg, rgba(171,111,226,.06), transparent 48%),
    var(--surface-quiet);
}

.xelium-stone {
  position: relative;
  width: 26px;
  height: 24px;
  clip-path: polygon(26% 4%, 73% 0, 100% 31%, 83% 82%, 48% 100%, 7% 78%, 0 34%);
  background:
    radial-gradient(circle at 31% 22%, #f4ddff 0 7%, #c884f0 25%, #8a46c2 55%, #542682 79%, #32164f 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.22),
    0 4px 9px rgba(89,41,132,.34);
  filter: drop-shadow(0 0 4px rgba(155,82,217,.18));
}

.xelium-stone::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 4px;
  width: 8px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  transform: rotate(-24deg);
}

/* Lumbermill interior */
.lumbermill-view {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,229,181,.05), transparent 33%),
    linear-gradient(180deg, #6b4b32 0 66%, #493524 66% 100%);
}
body.dark .lumbermill-view { background: linear-gradient(180deg,#34281f 0 66%,#211a15 66% 100%); }
.mill-wall {
  position: absolute;
  inset: 0 0 34%;
  background:
    repeating-linear-gradient(0deg, rgba(61,37,22,.17) 0 3px, transparent 3px 43px),
    repeating-linear-gradient(90deg, #9c6b45 0 92px, #8a5e3e 92px 96px, #a8754d 96px 184px);
  box-shadow: inset 0 -30px 60px rgba(46,28,17,.2);
}
body.dark .mill-wall { filter: brightness(.62) saturate(.8); }
.mill-beam { position:absolute; z-index:2; background:#4f3424; box-shadow: inset 0 0 0 2px rgba(255,255,255,.035), 0 8px 18px rgba(0,0,0,.25); }
.beam-a { left:17%; top:0; bottom:34%; width:28px; }
.beam-b { right:18%; top:0; bottom:34%; width:28px; }
.mill-window {
  position:absolute; z-index:3; left:50%; top:14%; width:210px; height:142px; transform:translateX(-50%);
  border:14px solid #533723; border-radius:8px; background:linear-gradient(180deg,#b8d7cf,#dce4c7 64%,#70935e 64%);
  box-shadow: 0 12px 30px rgba(0,0,0,.24), inset 0 0 0 3px rgba(255,255,255,.18);
}
.mill-window:before,.mill-window:after { content:""; position:absolute; background:#5a3b27; }
.mill-window:before { left:50%; top:0; bottom:0; width:8px; transform:translateX(-50%); }
.mill-window:after { left:0; right:0; top:50%; height:8px; transform:translateY(-50%); }
.mill-log-stack { position:absolute; z-index:5; right:4%; bottom:8%; width:210px; height:105px; }
.mill-log-stack i { position:absolute; right:0; width:145px; height:29px; border-radius:999px; background:linear-gradient(90deg,#70462c,#a76b41 76%,#5b3725); box-shadow:0 6px 10px rgba(0,0,0,.2); }
.mill-log-stack i:nth-child(1){bottom:0;right:0}.mill-log-stack i:nth-child(2){bottom:26px;right:35px}.mill-log-stack i:nth-child(3){bottom:52px;right:5px}.mill-log-stack i:nth-child(4){bottom:78px;right:48px}
.mill-back {
  position:absolute; z-index:80; left:18px; top:18px; min-height:34px; padding:0 11px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); color:var(--text); box-shadow:0 8px 20px rgba(0,0,0,.16); cursor:pointer; font-size:9px; font-weight:800;
}
.mill-title { position:absolute; z-index:30; left:50%; top:22px; transform:translateX(-50%); text-align:center; color:#fff6e7; text-shadow:0 2px 8px rgba(0,0,0,.34); }
.mill-title span { display:block; font-size:8px; font-weight:850; letter-spacing:.15em; text-transform:uppercase; opacity:.7; }
.mill-title strong { display:block; margin-top:2px; font-size:18px; }

.lumberjack-npc {
  position:absolute; z-index:34; left:16%; bottom:12%; width:190px; height:330px; border:0; background:transparent; cursor:pointer; color:var(--text);
  transition:transform .18s var(--ease-spring), filter .18s ease;
}
.lumberjack-npc:hover,.lumberjack-npc:focus-visible { transform:translateY(-6px) scale(1.02); filter:brightness(1.04); }
.npc-shadow { position:absolute; left:50%; bottom:38px; width:125px; height:25px; transform:translateX(-50%); border-radius:50%; background:rgba(0,0,0,.26); filter:blur(6px); }
.npc-body { position:absolute; inset:0; }
.npc-head { position:absolute; left:50%; top:46px; width:73px; height:78px; transform:translateX(-50%); border-radius:45% 45% 48% 48%; background:#d4a178; box-shadow:inset -8px 0 rgba(118,73,48,.09); }
.npc-hair { position:absolute; left:-4px; right:-4px; top:-9px; height:31px; border-radius:50% 50% 30% 30%; background:#5b3928; }
.npc-beard { position:absolute; left:7px; right:7px; bottom:-27px; height:45px; clip-path:polygon(0 0,100% 0,84% 66%,50% 100%,14% 66%); background:#6d432c; }
.npc-shirt { position:absolute; left:50%; top:127px; width:106px; height:103px; transform:translateX(-50%); border-radius:25px 25px 14px 14px; background:repeating-linear-gradient(0deg,#9d433a 0 15px,#79342f 15px 18px); box-shadow:inset 0 0 0 2px rgba(255,255,255,.05); }
.npc-shirt:after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 19px,rgba(40,27,22,.18) 19px 22px); border-radius:inherit; }
.npc-overalls { position:absolute; left:50%; top:166px; width:72px; height:104px; transform:translateX(-50%); background:#425f62; clip-path:polygon(12% 0,88% 0,100% 100%,0 100%); }
.npc-arm { position:absolute; top:138px; width:31px; height:105px; border-radius:18px; background:#c88f68; }
.arm-left { left:25px; transform:rotate(9deg); }.arm-right { right:25px; transform:rotate(-9deg); }
.npc-leg { position:absolute; top:255px; width:35px; height:61px; background:#3a4140; border-radius:0 0 11px 11px; }
.leg-left { left:57px; }.leg-right { right:57px; }
.npc-label { position:absolute; left:50%; bottom:0; width:176px; transform:translateX(-50%); padding:8px 10px; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:0 10px 28px rgba(0,0,0,.22); }
.npc-label strong { display:block; font-size:10px; }.npc-label small { display:block; margin-top:2px; font-size:7.5px; color:var(--muted); }

.sawmill-station {
  position:absolute; z-index:33; left:51%; bottom:10%; width:min(430px,40vw); min-height:270px; padding:13px; border:1px solid rgba(255,255,255,.11); border-radius:18px;
  background:rgba(43,30,21,.76); color:#f4eadb; box-shadow:0 20px 44px rgba(0,0,0,.28); backdrop-filter:blur(7px); transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.sawmill-station.is-dragover { border-color:#c9e69b; box-shadow:0 0 0 3px rgba(166,204,118,.2),0 20px 44px rgba(0,0,0,.28); transform:translateY(-2px); }
.sawmill-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sawmill-head small { display:block; color:rgba(244,234,219,.55); font-size:7px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.sawmill-head strong { display:block; margin-top:2px; font-size:12px; }
.sawmill-busy-dot { width:9px; height:9px; border-radius:50%; background:#6c7d69; box-shadow:0 0 0 4px rgba(255,255,255,.04); }
.sawmill-station.is-processing .sawmill-busy-dot { background:#b9d979; animation:busyPulse .75s ease-in-out infinite; }
.sawmill-machine { position:relative; height:151px; margin:10px 0 8px; overflow:hidden; border-radius:13px; background:linear-gradient(180deg,#76543a,#4c3628); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 -22px 40px rgba(0,0,0,.18); }
.sawmill-bed { position:absolute; left:18px; right:18px; bottom:31px; height:37px; border-radius:8px; background:#33271f; box-shadow:0 8px 12px rgba(0,0,0,.24); }
.sawmill-belt { position:absolute; inset:7px; border-radius:4px; background:repeating-linear-gradient(90deg,#7a6b56 0 18px,#5e5447 18px 23px); }
.sawmill-machine.is-running .sawmill-belt { animation:beltMove .38s linear infinite; }
.saw-housing { position:absolute; left:50%; top:7px; width:105px; height:110px; transform:translateX(-50%); border-radius:52px 52px 12px 12px; background:#303532; box-shadow:inset 0 0 0 4px #66665f,0 10px 18px rgba(0,0,0,.25); }
.saw-blade { position:absolute; left:50%; top:47%; width:76px; height:76px; transform:translate(-50%,-50%); border-radius:50%; background:repeating-conic-gradient(#d1d0c6 0 8deg,#7d827e 8deg 14deg); clip-path:polygon(50% 0,57% 8%,67% 2%,72% 13%,83% 10%,84% 22%,96% 25%,89% 35%,100% 42%,91% 50%,100% 58%,89% 65%,96% 76%,84% 78%,83% 90%,72% 87%,67% 98%,57% 92%,50% 100%,43% 92%,33% 98%,28% 87%,17% 90%,16% 78%,4% 76%,11% 65%,0 58%,9% 50%,0 42%,11% 35%,4% 25%,16% 22%,17% 10%,28% 13%,33% 2%,43% 8%); box-shadow:0 0 0 4px #4f5551; }
.sawmill-machine.is-running .saw-blade { animation:sawSpin .22s linear infinite; }
.sawmill-input { position:absolute; left:18px; top:24px; width:92px; padding:8px; border:1px dashed rgba(255,255,255,.22); border-radius:9px; color:rgba(255,255,255,.42); font-size:7px; font-weight:900; letter-spacing:.12em; text-align:center; }
body.is-dragging-log .sawmill-input { color:#d8efae; border-color:#b8d77d; background:rgba(162,195,112,.08); }
.sawmill-output { position:absolute; right:22px; bottom:34px; width:84px; height:52px; pointer-events:none; }
.sawmill-output span { position:absolute; right:0; bottom:0; width:64px; height:11px; border-radius:3px; background:#c39360; opacity:0; }
.sawmill-output span:nth-child(2){bottom:12px}.sawmill-output span:nth-child(3){bottom:24px}
.sawmill-output.is-ejecting span { animation:plankEject .72s var(--ease-spring) forwards; }
.sawmill-output.is-ejecting span:nth-child(2){animation-delay:.08s}.sawmill-output.is-ejecting span:nth-child(3){animation-delay:.16s}
.sawmill-progress { height:7px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.09); }
.sawmill-progress span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#88ad65,#c9de87); transition:width .09s linear; }
.sawmill-hint { margin-top:7px; color:rgba(244,234,219,.53); font-size:7.5px; }
@keyframes sawSpin { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes beltMove { to { background-position:23px 0; } }
@keyframes busyPulse { 50% { transform:scale(.72); opacity:.55; } }
@keyframes plankEject { 0%{opacity:0;transform:translateX(-28px) rotate(-8deg)} 28%{opacity:1} 100%{opacity:1;transform:translateX(18px) rotate(0)} }

.lumber-shop {
  position:absolute; z-index:190; right:18px; top:92px; bottom:18px; width:390px; padding:13px; border:1px solid var(--line); border-radius:18px;
  background:var(--surface); box-shadow:0 24px 64px rgba(0,0,0,.3); backdrop-filter:blur(20px); transform:translateX(calc(100% + 34px)); opacity:0; visibility:hidden; pointer-events:none;
  transition:transform .28s var(--ease-spring),opacity .17s ease,visibility 0s linear .28s; overflow:hidden; display:flex; flex-direction:column;
}
.lumber-shop.is-open { transform:translateX(0); opacity:1; visibility:visible; pointer-events:auto; transition:transform .28s var(--ease-spring),opacity .17s ease,visibility 0s; }
.lumber-shop-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.lumber-shop-head small { display:block; color:var(--muted); font-size:7px; font-weight:850; letter-spacing:.11em; text-transform:uppercase; }
.lumber-shop-head strong { display:block; margin-top:2px; font-size:15px; }
.lumber-shop-head button { width:30px; height:30px; border:0; border-radius:9px; background:var(--surface-quiet); color:var(--muted); cursor:pointer; font-size:18px; }
.lumber-shop-body { min-height:0; overflow-y:auto; padding-top:10px; }
.shop-section + .shop-section { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.shop-section-head { display:flex; align-items:end; justify-content:space-between; gap:8px; margin-bottom:7px; }
.shop-section-head strong { font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.shop-section-head span { color:var(--muted); font-size:7px; }
.shop-sell-list { display:grid; gap:5px; }
.shop-sell-row { min-height:48px; padding:6px; display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:7px; border:1px solid var(--line); border-radius:10px; background:var(--surface-quiet); }
.shop-item-icon { width:30px; height:30px; display:grid; place-items:center; }
.shop-item-copy strong { display:block; font-size:9px; }.shop-item-copy small { display:block; margin-top:2px; color:var(--muted); font-size:7px; }
.shop-sell-actions { display:flex; gap:4px; }
.shop-sell-actions button,.shop-product-buy button { min-height:28px; padding:0 8px; border:1px solid var(--line); border-radius:8px; background:var(--surface-solid); color:var(--text); cursor:pointer; font-size:7px; font-weight:820; }
.shop-sell-actions button:disabled,.shop-product-buy button:disabled { opacity:.38; cursor:not-allowed; }
.shop-product { padding:8px; display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:8px; border:1px solid rgba(126,101,62,.2); border-radius:12px; background:linear-gradient(135deg,rgba(181,133,72,.08),var(--surface-quiet)); }
.shop-product-icon { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--surface-soft); font-size:20px; }
.shop-product-copy strong { display:block; font-size:9px; }.shop-product-copy small { display:block; margin-top:3px; color:var(--muted); font-size:7px; }
.shop-product-buy { display:grid; justify-items:end; gap:4px; }.shop-product-buy b { color:#9a7538; font-size:7px; font-weight:850; }

.item-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.item-action { min-height:25px; padding:0 7px; border:1px solid var(--line); border-radius:7px; background:var(--surface-solid); color:var(--text); cursor:pointer; font-size:7px; font-weight:820; }
.item-row.is-draggable { cursor:grab; user-select:none; }
.item-row.is-draggable:active { cursor:grabbing; }
.item-row.is-draggable.is-dragging { opacity:.35; }
.item-name small { display:block; margin-top:2px; color:var(--accent-strong); font-size:6.5px; font-weight:760; }
.mini-plank { width:21px; height:12px; display:inline-block; border-radius:2px; box-shadow:inset 0 0 0 1px rgba(65,43,28,.14); }
.mini-plank.oak { background:repeating-linear-gradient(0deg,#b77d4c 0 3px,#9d673e 3px 4px); }
.mini-plank.birch { background:repeating-linear-gradient(0deg,#e6e0ce 0 3px,#b7b0a1 3px 4px); }
.mini-sawdust { width:20px; height:13px; display:inline-block; border-radius:50% 50% 38% 42%; background:radial-gradient(circle at 30% 30%,#e3bb78,#b47b42 65%,#8a572e); }
.equipment-slot.is-equipped { border-color:rgba(107,151,89,.42); background:rgba(112,158,91,.09); box-shadow:inset 0 0 0 1px rgba(129,177,108,.08); }
.equipment-slot.is-equipped .equipment-slot-icon { background:rgba(119,166,96,.14); }

@media (max-width: 1180px) {
  .top-hud { flex-wrap: wrap; }
  .character-stack { width: 390px; flex-basis: 390px; }
  .wallet-hud { width: 330px; }
}

@media (max-width: 900px) {
  .top-hud { gap: 5px; }
  .character-stack { width: min(390px, calc(100% - 8px)); flex-basis: min(390px, calc(100% - 8px)); }
  .wallet-hud { width: 320px; min-height: 52px; }
  .currency-chip { min-height: 42px; grid-template-columns: 21px minmax(0,1fr); padding: 4px 3px; gap: 4px; }
  .coin-icon { width: 21px; height: 21px; font-size: 6px; }
  .xelium-stone { width: 22px; height: 20px; }
}

@media (max-width: 560px) {
  .top-hud { left:var(--sidebar-w); padding:7px 54px 7px 5px; display:block; }
  .character-stack { left:0; transform:none; width:100%; top:0; }
  .wallet-hud { margin-top:5px; width:100%; min-height:36px; padding:4px; gap:3px; }
  .currency-chip { min-height:30px; grid-template-columns:16px minmax(0,1fr); padding:2px 3px; gap:3px; border-radius:8px; }
  .currency-copy strong { font-size:7px; }
  .currency-copy small { display:none; }
  .coin-icon { width:16px; height:16px; font-size:5px; border-width:1px; }
  .coin-icon::before { inset:2px; }
  .coin-icon::after { left:3px; top:3px; width:5px; height:3px; }
  .xelium-stone { width:17px; height:16px; }
  .mill-title { top:112px; }
  .mill-back { top:112px; left:8px; }
  .lumberjack-npc { left:0; bottom:5%; transform:scale(.68); }
  .sawmill-station { left:37%; bottom:4%; width:60vw; min-height:230px; padding:9px; }
  .sawmill-machine { height:125px; }
  .lumber-shop { top:118px; right:7px; bottom:7px; width:calc(100vw - var(--sidebar-w) - 14px); }
  .shop-product { grid-template-columns:32px minmax(0,1fr); }
  .shop-product-buy { grid-column:1 / -1; grid-template-columns:1fr auto; align-items:center; }
}