/* Nutag: одна тема, все цвета и размеры только из токенов ниже */
:root {
  --font-sans: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Unbounded", "Onest", system-ui, sans-serif;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 26px;
  --text-display: 48px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --c-bg: #e8f1ec;
  --c-surface: #ffffff;
  --c-surface-2: #f2f5f9;
  --c-surface-glass: rgba(255, 255, 255, 0.86);
  --c-border: #dde4ec;
  --c-border-strong: #b8c3cf;
  --c-text: #142033;
  --c-text-muted: #4e5b6e;
  --c-accent: #1a73e0;
  --c-accent-2: #3d8ff0;
  --c-accent-hover: #1563c4;
  --c-accent-active: #104f9e;
  --c-accent-soft: #e5f0fd;
  --c-on-accent: #ffffff;
  --c-danger: #c42b31;
  --c-danger-hover: #a32228;
  --c-danger-soft: #fdecec;
  --c-success: #137145;
  --c-success-soft: #e2f6ea;
  --c-warning: #8f5400;
  --c-gold: #f5a524;
  --c-gold-soft: #fff4dc;
  --c-gold-ink: #6b4100;
  --c-max: #2f6bff;
  --c-max-hover: #2357d6;
  --c-focus: #1a73e0;
  --c-scrim: rgba(10, 22, 40, 0.5);

  --shadow-1: 0 1px 2px rgba(16, 32, 60, 0.06), 0 4px 14px rgba(16, 32, 60, 0.08);
  --shadow-2: 0 2px 8px rgba(16, 32, 60, 0.1), 0 18px 44px rgba(16, 32, 60, 0.18);
  --shadow-float: 0 1px 3px rgba(16, 32, 60, 0.08), 0 10px 30px rgba(16, 32, 60, 0.14);
  --shadow-accent: 0 4px 14px rgba(26, 115, 224, 0.28);
  --glass-blur: blur(16px) saturate(1.5);

  --dur-fast: 120ms;
  --dur: 200ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --gap: 10px;
  --topbar-h: 54px;
  --tabs-h: 58px;
  --panel-w: 384px;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { font-family: var(--font-sans); font-size: var(--text-md); line-height: 1.45; color: var(--c-text); background: var(--c-bg); -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
a { color: var(--c-accent); }
.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i-lg { width: 28px; height: 28px; }
.i-xl { width: 44px; height: 44px; }
.muted { color: var(--c-text-muted); }
.small { font-size: var(--text-sm); }
.eyebrow { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-accent); font-weight: 600; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* ---------- каркас: карта на весь экран, всё остальное парит над ней ---------- */
.app { position: relative; height: 100%; height: 100dvh; overflow: hidden; }
.topbar {
  position: absolute; z-index: 10; top: var(--gap); left: var(--gap); right: var(--gap); height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--space-4);
  padding: 0 var(--space-2) 0 var(--space-4);
  background: var(--c-surface-glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.8); border-radius: var(--radius-lg); box-shadow: var(--shadow-float);
}
.brand { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); letter-spacing: -0.01em; }
.brand-mark { width: 30px; height: 30px; filter: drop-shadow(0 2px 4px rgba(26, 115, 224, 0.35)); }
.brand-place { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-sm); color: var(--c-text-muted); padding-left: var(--space-2); border-left: 1px solid var(--c-border); }
.date { color: var(--c-text-muted); font-size: var(--text-sm); white-space: nowrap; }
.stats { display: flex; gap: var(--space-4); margin: 0 0 0 auto; }
.stat { display: flex; align-items: baseline; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.75); }
.stat dt { color: var(--c-text-muted); font-size: var(--text-sm); }
.stat dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.me-chip {
  display: flex; align-items: center; gap: var(--space-2);
  height: 40px; padding: 0 var(--space-3) 0 var(--space-1);
  border: 1px solid var(--c-border); border-radius: var(--radius-full); background: var(--c-surface); cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.me-chip:hover { background: var(--c-surface-2); border-color: var(--c-border-strong); }
.me-chip:active { background: var(--c-border); }
.me-chip[hidden] { display: none; }
.me-chip.is-bump .me-chip-coins strong { animation: bump var(--dur) var(--ease); }
@keyframes bump { 50% { transform: scale(1.15); } }
.me-chip-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.me-chip-name { font-weight: 600; font-size: var(--text-sm); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-chip-needs { display: flex; gap: 3px; margin-top: 3px; }
.mini { width: 16px; height: 4px; border-radius: 2px; background: var(--c-border); position: relative; overflow: hidden; }
.mini::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); background: var(--c-success); }
.mini.is-low::after { background: var(--c-danger); }
.me-chip-coins { display: flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-full); background: var(--c-gold-soft); color: var(--c-gold-ink); font-variant-numeric: tabular-nums; }
.me-chip-coins .i { color: var(--c-gold); }
.bell { position: relative; }
.badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--c-danger); color: var(--c-on-accent); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.badge[hidden] { display: none; }
.topbar .login-open { display: none; }
.is-guest .topbar .login-open { display: inline-flex; }
.is-guest .bell { display: none; }
.in-max #me-out, .in-max .login-open, .in-max #login-close, .in-max #dev-form { display: none !important; }

.stage { position: absolute; inset: 0; overflow: hidden; }
#map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#map.is-building { cursor: crosshair; }
#map.is-panning { cursor: grabbing; }

.tabs {
  position: absolute; z-index: 6; top: calc(var(--gap) * 2 + var(--topbar-h)); right: var(--gap); width: var(--panel-w); height: var(--tabs-h);
  display: flex; gap: 2px; padding: var(--space-2);
  background: var(--c-surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 1px solid var(--c-border);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 0; border-radius: var(--radius-md); background: transparent; cursor: pointer;
  font-size: var(--text-xs); color: var(--c-text-muted); position: relative;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tab:hover { background: var(--c-surface-2); color: var(--c-text); }
.tab:active { background: var(--c-border); }
.tab[aria-selected="true"] { background: var(--c-accent); color: var(--c-on-accent); font-weight: 600; box-shadow: var(--shadow-accent); }
.tab.has-new::after { content: ""; position: absolute; top: 6px; right: calc(50% - 16px); width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--c-danger); }
.tab-map { display: none; }

.panel {
  position: absolute; z-index: 5; top: calc(var(--gap) * 2 + var(--topbar-h) + var(--tabs-h)); right: var(--gap); bottom: var(--gap); width: var(--panel-w);
  overflow: hidden; display: flex; flex-direction: column; background: var(--c-surface); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.tabs, .panel { box-shadow: var(--shadow-float); }
.panel-body { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }

/* ---------- элементы панели ---------- */
.block { display: flex; flex-direction: column; gap: var(--space-2); }
.block h3, .job-card h3, .place h3 { font-size: var(--text-lg); font-weight: 600; display: flex; align-items: center; gap: var(--space-2); }
.avatar { display: inline-grid; place-items: center; flex: none; border-radius: var(--radius-full); background: var(--av); color: #fff; font-weight: 700; letter-spacing: 0.02em; }
.person { display: flex; gap: var(--space-3); align-items: flex-start; }
.person-name { font-weight: 600; font-size: var(--text-lg); }
.chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 1px var(--space-2); border-radius: var(--radius-full); background: var(--c-surface-2); color: var(--c-text-muted); font-size: var(--text-xs); font-weight: 500; white-space: nowrap; }
.chip-ok { background: var(--c-success-soft); color: var(--c-success); }
.wallet-big { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: linear-gradient(135deg, var(--c-gold-soft), #ffe7b0); color: var(--c-gold-ink); }
.wallet-big strong { font-size: var(--text-2xl); font-variant-numeric: tabular-nums; }
.wallet-big .i { align-self: center; color: var(--c-gold); }
.meter { display: grid; grid-template-columns: 120px 1fr 28px; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.meter-label { display: flex; align-items: center; gap: var(--space-2); color: var(--c-text-muted); }
.meter-bar { height: 10px; border-radius: var(--radius-full); background: var(--c-surface-2); overflow: hidden; }
.meter-bar span { display: block; height: 100%; background: linear-gradient(90deg, #22a861, #4fd18b); border-radius: inherit; transition: width var(--dur) var(--ease); }
.meter.is-low .meter-bar span { background: linear-gradient(90deg, #d6363c, #f0777b); }
.meter.is-low .meter-val { color: var(--c-danger); }
.meter-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.inv li, .goods li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--c-surface-2); }
.inv li:first-child, .goods li:first-child { border-top: 0; }
.inv li > span, .goods li > div { flex: 1; }
.goods .btn { min-width: 64px; font-variant-numeric: tabular-nums; }
.row-wrap { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.job-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-lg); background: linear-gradient(135deg, #edf5ff, #d9e9ff); }
.vacancies { display: flex; flex-direction: column; gap: var(--space-3); }
.vac-title { display: flex; align-items: center; gap: var(--space-2); border: 0; background: none; padding: 0; font-weight: 600; cursor: pointer; }
.vac-title:hover { color: var(--c-accent); }
.vac { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0 var(--space-2) 26px; border-top: 1px solid var(--c-surface-2); }
.budget-sum { font-size: var(--text-2xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.ledger li { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); padding: 2px 0; }
.ledger .pos { color: var(--c-success); font-variant-numeric: tabular-nums; }
.ledger .neg { color: var(--c-danger); font-variant-numeric: tabular-nums; }
.feed li { font-size: var(--text-sm); padding: var(--space-1) 0; border-top: 1px solid var(--c-surface-2); }
.feed li:first-child { border-top: 0; }
.feed time { color: var(--c-text-muted); font-size: var(--text-xs); margin-right: var(--space-1); font-variant-numeric: tabular-nums; }
.ad-form { display: flex; flex-direction: column; gap: var(--space-2); }
.ad-form .btn { align-self: flex-start; }
.board { display: flex; flex-direction: column; gap: var(--space-2); }
.ad { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: #fff8e1; border: 1px solid #f0e2b0; }
.ad-title { font-weight: 600; }
.build-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: var(--space-1); }
.link-btn { border: 0; background: none; padding: 0; cursor: pointer; color: var(--c-accent); font-size: inherit; text-decoration: underline; text-underline-offset: 2px; }
.link-btn:hover { color: var(--c-accent-hover); }
.link-danger { color: var(--c-danger); }
.link-danger:hover { color: var(--c-danger-hover); }
.link-btn .i { width: 14px; height: 14px; vertical-align: -2px; }

/* чат */
.chat-list { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); overflow-y: auto; min-height: 0; }
.panel-body:has(.chat-list) { overflow: hidden; }
.msg { display: flex; gap: var(--space-2); align-items: flex-start; }
.bubble { background: var(--c-surface-2); border-radius: var(--radius-md); padding: var(--space-1) var(--space-3) var(--space-2); max-width: 85%; overflow-wrap: anywhere; }
.msg.is-mine .bubble { background: var(--c-accent-soft); }
.msg-head { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-xs); }
.msg-head .link-btn { text-decoration: none; font-weight: 600; font-size: var(--text-sm); }
.msg-head time { color: var(--c-text-muted); }
.chat-form { display: flex; gap: var(--space-2); }
.chat-form input { flex: 1; }

/* ---------- кнопки и поля ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 40px; padding: 0 var(--space-4);
  border: 1px solid transparent; border-radius: var(--radius-md);
  font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn-sm { height: 32px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.btn-lg { width: 100%; height: auto; min-height: 48px; padding-block: var(--space-2); font-size: var(--text-lg); white-space: normal; text-align: center; line-height: 1.25; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { cursor: not-allowed; opacity: 0.55; transform: none; }
.btn-primary { background: linear-gradient(180deg, var(--c-accent), var(--c-accent-hover)); color: var(--c-on-accent); box-shadow: var(--shadow-accent); }
.btn-primary:hover:not(:disabled) { background: var(--c-accent-active); }
.btn-primary:active:not(:disabled) { background: var(--c-accent-active); }
.btn-max { background: var(--c-max); color: var(--c-on-accent); }
.btn-max:hover:not(:disabled) { background: var(--c-max-hover); }
.btn-danger { background: var(--c-danger); color: var(--c-on-accent); }
.btn-danger:hover:not(:disabled) { background: var(--c-danger-hover); }
.btn-ghost { background: var(--c-surface); border-color: var(--c-border-strong); }
.btn-ghost:hover:not(:disabled) { background: var(--c-surface-2); }
.btn-danger-ghost { color: var(--c-danger); border-color: var(--c-danger-soft); }
.btn-danger-ghost:hover:not(:disabled) { background: var(--c-danger-soft); }
.spinner { display: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--radius-full); animation: spin 700ms linear infinite; }
[aria-busy="true"] > .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center; flex: none;
  border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface); cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: var(--c-surface-2); }
.icon-btn:active { background: var(--c-border); }
.icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.icon-btn-primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.icon-btn-primary:hover { background: var(--c-accent-hover); }

label { display: block; font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-1); }
input, textarea {
  width: 100%; padding: var(--space-2) var(--space-3); min-height: 40px;
  border: 1px solid var(--c-border-strong); border-radius: var(--radius-md); background: var(--c-surface);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
textarea { resize: vertical; }
input:hover, textarea:hover { border-color: var(--c-text-muted); }
input:focus, textarea:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); outline: none; }
input[aria-invalid="true"] { border-color: var(--c-danger); box-shadow: 0 0 0 3px var(--c-danger-soft); }
input:disabled { background: var(--c-surface-2); cursor: not-allowed; }
.field-error { color: var(--c-danger); font-size: var(--text-sm); }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-1); padding: 0; }
.check { display: flex; gap: var(--space-2); align-items: flex-start; font-weight: 400; }
.check input { width: 18px; height: 18px; min-height: 0; margin-top: 2px; flex: none; }

/* ---------- карта: поверх ---------- */
.zoom { position: absolute; right: calc(var(--panel-w) + var(--gap) * 2); bottom: var(--gap); display: flex; flex-direction: column; gap: var(--space-1); z-index: 4; }
.zoom .icon-btn { box-shadow: var(--shadow-float); border-color: rgba(255, 255, 255, 0.8); background: var(--c-surface-glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.mission {
  position: absolute; top: calc(var(--gap) * 2 + var(--topbar-h)); left: calc((100% - var(--panel-w) - var(--gap)) / 2); transform: translateX(-50%); z-index: 4;
  width: min(560px, calc(100% - var(--panel-w) - var(--gap) * 4));
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--c-surface-glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 2px solid var(--c-accent); box-shadow: var(--shadow-2);
}
.mission p { flex: 1; font-size: var(--text-sm); }
.place {
  position: absolute; left: var(--gap); bottom: var(--gap); z-index: 8;
  width: min(340px, calc(100% - var(--panel-w) - 90px)); max-height: 60%; overflow-y: auto;
  padding: var(--space-4); padding-right: 48px; border-radius: var(--radius-lg);
  background: var(--c-surface); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: var(--shadow-2);
  display: flex; flex-direction: column;
}
.place #place-body { display: flex; flex-direction: column; gap: var(--space-2); }
.place-close { position: absolute; top: var(--space-2); right: var(--space-2); width: 32px; height: 32px; }
.staff li { padding: var(--space-1) 0; }
.faces { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
.face-btn { border: 0; padding: 0; background: none; cursor: pointer; border-radius: var(--radius-full); }
.tip { position: fixed; z-index: 20; pointer-events: none; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--c-text); color: var(--c-surface); font-size: var(--text-xs); white-space: nowrap; transform: translate(14px, 14px); }
.tip.is-bad { background: var(--c-danger); }
.toast { position: fixed; bottom: var(--space-5); left: calc((100% - var(--panel-w) - var(--gap)) / 2); transform: translateX(-50%); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); background: var(--c-text); color: var(--c-surface); box-shadow: var(--shadow-2); font-size: var(--text-sm); z-index: 60; max-width: calc(100% - var(--space-5)); }
.toast.is-error { background: var(--c-danger); }

/* ---------- окна ---------- */
.modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: var(--space-4); background: var(--c-scrim); }
.modal[hidden] { display: none; }
.modal-start { background: radial-gradient(ellipse at 20% 10%, rgba(61, 143, 240, 0.55), transparent 55%), radial-gradient(ellipse at 85% 90%, rgba(245, 165, 36, 0.35), transparent 50%), rgba(10, 22, 40, 0.42); backdrop-filter: blur(3px); }
.card { position: relative; width: 100%; max-width: 460px; max-height: 100%; overflow: auto; padding: var(--space-6); background: var(--c-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); display: flex; flex-direction: column; gap: var(--space-3); }
.card-sm { max-width: 380px; padding: var(--space-5); }
.card h1 { font-family: var(--font-display); font-size: var(--text-display); line-height: 1.05; letter-spacing: -0.02em; color: var(--c-accent-active); }
.login-mark { width: 64px; height: 64px; filter: drop-shadow(0 6px 14px rgba(26, 115, 224, 0.35)); }
.card h2 { font-size: var(--text-xl); }
.card .row { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
.card form { display: flex; flex-direction: column; gap: var(--space-3); }
.lead { color: var(--c-text-muted); }
.source { font-size: var(--text-xs); color: var(--c-text-muted); }
.look-first { align-self: center; font-size: var(--text-sm); }
#login-actions { display: flex; flex-direction: column; gap: var(--space-2); }
.dev-form { margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px dashed var(--c-border-strong); }
.dev-form .row { display: flex; gap: var(--space-2); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.avatar-preview { display: flex; align-items: center; gap: var(--space-3); font-weight: 600; font-size: var(--text-lg); }
.age-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.age-opt { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-3) var(--space-2); border: 1px solid var(--c-border-strong); border-radius: var(--radius-md); background: var(--c-surface); cursor: pointer; font-size: var(--text-sm); transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.age-opt:hover { background: var(--c-surface-2); }
.age-opt[aria-checked="true"] { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-accent-active); font-weight: 600; }
.swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.swatch { width: 32px; height: 32px; border-radius: var(--radius-full); border: 2px solid transparent; background: var(--sw); cursor: pointer; box-shadow: inset 0 0 0 2px #fff; transition: transform var(--dur-fast) var(--ease); }
.swatch:hover { transform: scale(1.08); }
.swatch[aria-checked="true"] { border-color: var(--c-text); }

/* смена */
.card-shift { max-width: 560px; min-height: 360px; }
.shift-x { position: absolute; top: var(--space-3); right: var(--space-3); width: 36px; height: 36px; }
.shift-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); padding-right: 44px; }
.shift-clock { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--c-text-muted); padding-top: var(--space-4); }
.quiz { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); }
.quiz-step { font-size: var(--text-sm); color: var(--c-text-muted); }
.progress { height: 6px; border-radius: var(--radius-full); background: var(--c-surface-2); overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: var(--c-accent); transition: width var(--dur) var(--ease); }
.quiz-q { font-size: var(--text-xl); font-weight: 600; line-height: 1.3; min-height: 2.6em; }
.quiz-options { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
.quiz-options.two { grid-template-columns: 1fr 1fr; }
.opt { min-height: 48px; padding: var(--space-2) var(--space-4); text-align: left; border: 1px solid var(--c-border-strong); border-radius: var(--radius-md); background: var(--c-surface); cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.quiz-options.two .opt { text-align: center; font-weight: 600; }
.opt:hover:not(:disabled) { background: var(--c-surface-2); border-color: var(--c-text-muted); }
.opt:active:not(:disabled) { background: var(--c-border); }
.opt:disabled { cursor: default; }
.opt.is-picked { border-color: var(--c-accent); background: var(--c-accent-soft); }
.shift-done-box { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-5) 0; color: var(--c-accent); }
.shift-done-box p { color: var(--c-text); }
.shift-result { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-4) 0; }
.shift-result .i-xl { color: var(--c-gold); }
.result-pay { font-size: var(--text-display); font-family: var(--font-display); font-weight: 700; color: var(--c-success); line-height: 1.1; }
.stoker { display: flex; gap: var(--space-5); align-items: stretch; margin-top: var(--space-3); }
.gauge { position: relative; width: 56px; height: 220px; border-radius: var(--radius-md); background: var(--c-surface-2); border: 1px solid var(--c-border); overflow: hidden; flex: none; }
.gauge-zone { position: absolute; left: 0; right: 0; bottom: 60%; height: 20%; background: var(--c-success-soft); border-block: 2px dashed var(--c-success); }
.gauge-fill { position: absolute; left: 10px; right: 10px; bottom: 0; height: 70%; border-radius: 6px 6px 0 0; background: var(--c-success); transition: height 80ms linear; }
.gauge-fill[data-state="cold"] { background: #3e6fb0; }
.gauge-fill[data-state="hot"] { background: var(--c-danger); }
.stoker-side { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); justify-content: center; }
.stoker-temp { font-size: var(--text-display); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.memory { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.card-m { aspect-ratio: 1; border-radius: var(--radius-md); border: 1px solid var(--c-border-strong); background: var(--c-accent); cursor: pointer; display: grid; place-items: center; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.card-m:hover { background: var(--c-accent-hover); }
.card-m .face { opacity: 0; color: var(--c-accent-active); }
.card-m.is-open { background: var(--c-surface); }
.card-m.is-open .face { opacity: 1; }
.card-m.is-done { background: var(--c-success-soft); border-color: var(--c-success); cursor: default; }
.card-m.is-done .face { color: var(--c-success); }
.rhythm { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.track { position: relative; height: 40px; border-radius: var(--radius-full); background: var(--c-surface-2); border: 1px solid var(--c-border); }
.track-zone { position: absolute; top: 0; bottom: 0; left: 41%; width: 18%; background: #f8eccc; border-inline: 2px solid var(--c-gold); }
.track-dot { position: absolute; top: 9px; left: -10px; width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--c-accent); }
.track-dot[data-res="ok"] { background: var(--c-success); }
.track-dot[data-res="miss"] { background: var(--c-danger); }

/* ---------- телефон ---------- */
@media (max-width: 1100px) { .stat-budget, .date { display: none; } }
@media (max-width: 760px) {
  :root { --gap: 8px; --topbar-h: 50px; --tabs-h: 62px; --text-display: 40px; --safe-b: env(safe-area-inset-bottom, 0px); }
  .topbar { gap: var(--space-2); padding: 0 var(--space-1) 0 var(--space-3); top: calc(var(--gap) + env(safe-area-inset-top, 0px)); }
  .brand { font-size: var(--text-lg); }
  .brand-place { display: none; }
  .stats { display: none; }
  .me-chip { margin-left: auto; }
  .me-chip-name { max-width: 80px; }
  .tabs { top: auto; bottom: calc(var(--gap) + var(--safe-b)); left: var(--gap); right: var(--gap); width: auto; border-radius: var(--radius-lg); border-bottom: 0; }
  .tab-map { display: flex; }
  .panel { top: calc(var(--gap) * 2 + var(--topbar-h)); left: var(--gap); right: var(--gap); bottom: calc(var(--tabs-h) + var(--gap) * 2 + var(--safe-b)); width: auto; border-radius: var(--radius-lg); display: none; }
  .panel.is-open { display: flex; }
  .place { left: var(--gap); right: var(--gap); width: auto; bottom: calc(var(--tabs-h) + var(--gap) * 2 + var(--safe-b)); max-height: 55%; }
  .zoom { top: calc(var(--gap) * 2 + var(--topbar-h)); bottom: auto; right: var(--gap); }
  .mission { top: auto; left: 50%; width: calc(100% - var(--gap) * 2); bottom: calc(var(--tabs-h) + var(--gap) * 2 + var(--safe-b)); flex-direction: column; align-items: stretch; }
  .toast { left: 50%; bottom: calc(var(--tabs-h) + var(--gap) * 3 + var(--safe-b)); }
  .card { padding: var(--space-5); }
  .two { grid-template-columns: 1fr; }
  .stoker { gap: var(--space-3); }
  .gauge { height: 180px; }
  .meter { grid-template-columns: 110px 1fr 28px; }
  input, textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ---------- подписи и значки поверх 3D-карты ---------- */
.map-ov { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.map-ov > div { position: absolute; left: 0; top: 0; will-change: transform; }
.mlabel { display: flex; align-items: center; gap: var(--space-1); padding: 3px var(--space-2) 3px 3px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.95); box-shadow: var(--shadow-1); font-weight: 600; font-size: var(--text-xs); white-space: nowrap; translate: -50% -100%; }
.mlabel:not(:has(.mlabel-tx)) { padding: 3px; }
.mlabel-ic { width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--c); display: grid; place-items: center; }
.mlabel-ic svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mavatar { width: 26px; height: 26px; border-radius: var(--radius-full); background: var(--av); color: #fff; border: 2px solid #fff; box-shadow: var(--shadow-1); display: grid; place-items: center; font-size: 10px; font-weight: 700; translate: -50% -100%; }
.mavatar.is-me { outline: 3px solid var(--c-accent); outline-offset: 1px; }
.mplace { padding: var(--space-1) var(--space-4); border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.95); box-shadow: var(--shadow-2); font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); translate: -50% -50%; }
.mwater { padding: 2px var(--space-2); border-radius: var(--radius-full); background: rgba(225, 242, 255, 0.95); color: #145a94; font-weight: 600; font-size: var(--text-xs); translate: -50% -50%; }
.mpin { width: 34px; height: 34px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: #f5821f; border: 2px solid #fff; box-shadow: var(--shadow-2); display: grid; place-items: center; translate: -50% -110%; }
.mpin svg { rotate: 45deg; width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mpin.is-done { background: var(--c-success); }
.mcursor { display: flex; align-items: flex-start; gap: 2px; }
.mcursor svg { width: 16px; height: 18px; fill: var(--av); stroke: #fff; stroke-width: 1.5; }
.mcursor span { margin-top: 12px; padding: 2px var(--space-2); border-radius: var(--radius-full); background: var(--av); color: #fff; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.mstreet { padding: 1px var(--space-2); border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.9); color: var(--c-text); font-size: 11px; font-weight: 600; white-space: nowrap; translate: -50% -50%; transform-origin: center; }

/* ---------- чаты, личка, шахматы, приглашение ---------- */
.panel-body:has(.seg) { overflow: hidden; }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: var(--radius-md); background: var(--c-surface-2); flex: none; }
.seg button { flex: 1; height: 34px; border: 0; border-radius: var(--radius-sm); background: transparent; font-weight: 600; font-size: var(--text-sm); color: var(--c-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); }
.seg button:hover { color: var(--c-text); }
.seg button[aria-selected="true"] { background: var(--c-surface); color: var(--c-text); box-shadow: var(--shadow-1); }
.chat-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.badge-in { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full); background: var(--c-danger); color: var(--c-on-accent); font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.threads, .games { display: flex; flex-direction: column; gap: 2px; }
.thread { width: 100%; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border: 0; border-radius: var(--radius-md); background: transparent; text-align: left; cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.thread:hover { background: var(--c-surface-2); }
.thread:active { background: var(--c-border); }
.thread-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.thread-name { font-weight: 600; }
.thread-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-list { overflow-y: auto; }
.dm-head { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.dm-head .icon-btn { width: 34px; height: 34px; }
.dm-who { display: flex; align-items: center; gap: var(--space-2); flex: 1; text-decoration: none; color: var(--c-text); font-weight: 600; }
.person-actions { margin-top: var(--space-2); }
.gift-box { margin-top: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--c-gold-soft); display: flex; flex-direction: column; gap: var(--space-2); }
.card-chess { max-width: 480px; }
.chess-head > div { display: flex; align-items: center; gap: var(--space-3); padding-right: 44px; }
.chess-state { font-weight: 600; }
.chess-state.is-turn { color: var(--c-success); }
.board { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); width: 100%; max-width: 420px; aspect-ratio: 1; margin: 0 auto; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-2); }
.sq { position: relative; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer; min-width: 0; min-height: 0; aspect-ratio: 1; }
.sq.light { background: #eef3e2; }
.sq.dark { background: #7fa36a; }
.sq.is-sel { background: #f6d55c; }
.sq.is-target::after { content: ""; position: absolute; width: 30%; height: 30%; border-radius: var(--radius-full); background: rgba(26, 115, 224, 0.6); }
.sq:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -3px; }
.pc { font-size: clamp(24px, 8vw, 42px); line-height: 1; user-select: none; }
.pc.w { color: #ffffff; text-shadow: 0 0 2px #1d2b1d, 0 1px 2px #1d2b1d, 1px 0 1px #1d2b1d, -1px 0 1px #1d2b1d; }
.pc.b { color: #1b1f24; }
.invite { display: flex; gap: var(--space-3); align-items: flex-start; }
.invite-qr { width: 132px; height: 132px; border-radius: var(--radius-md); border: 1px solid var(--c-border); flex: none; background: #fff; }
.invite-side { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.invite-link { font-size: var(--text-xs); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--c-surface-2); overflow-wrap: anywhere; }
.street-search { display: flex; flex-direction: column; gap: var(--space-1); font-weight: 600; }
.street-search select { height: 40px; padding: 0 var(--space-2); border: 1px solid var(--c-border-strong); border-radius: var(--radius-md); background: var(--c-surface); font: inherit; }
.mission .street-search { flex: none; }
@media (max-width: 760px) { .invite { flex-direction: column; } .mission .street-search select { width: 100%; } }

/* кнопки стройки за счёт бюджета: значок, название, цена, всё в столбик */
.tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; padding: var(--space-1); border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface); cursor: pointer; font-size: var(--text-xs); line-height: 1.15; text-align: center; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.tool:hover { background: var(--c-surface-2); }
.tool:active { background: var(--c-border); }
.tool[aria-pressed="true"] { background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-accent-active); }
.tool .i { width: 20px; height: 20px; }
.tool-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-price { color: var(--c-text-muted); font-variant-numeric: tabular-nums; font-size: 11px; }
.tool-danger { color: var(--c-danger); }
.tool-danger:hover { background: var(--c-danger-soft); }
.build-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }

/* ---------- график работ ---------- */
.schedule { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.slot { display: grid; grid-template-columns: 92px 1fr; gap: var(--space-2) var(--space-3); align-items: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--c-surface-2); }
.slot.is-free { grid-template-columns: 92px 1fr; opacity: .85; }
.slot.is-now { background: var(--c-accent-soft); box-shadow: inset 3px 0 0 var(--c-accent); }
.slot-time { display: flex; flex-direction: column; font-weight: 600; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.slot-time small { font-weight: 400; color: var(--c-text-muted); font-size: var(--text-xs); }
.slot-job { display: flex; flex-direction: column; min-width: 0; }
.slot-act { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.vac-group > ul { list-style: none; margin: var(--space-1) 0 0; padding: 0; }
.vac-col { flex-direction: column; align-items: stretch; }
.wins { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-2); }
.win-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--c-border-strong); background: var(--c-surface); color: var(--c-text); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; text-align: left; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.win-btn small { font-weight: 400; font-size: var(--text-xs); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.win-btn:hover:not(:disabled) { border-color: var(--c-accent); background: var(--c-accent-soft); }
.win-btn:active:not(:disabled) { background: var(--c-accent-soft); transform: translateY(1px); }
.win-btn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.win-btn:disabled { cursor: not-allowed; opacity: .55; }
.win-btn.is-mine { opacity: 1; border-color: var(--c-success); background: var(--c-success-soft); color: var(--c-success); }
.win-btn.is-mine small { color: var(--c-success); }

/* ---------- хозяйство, промыслы, рынок ---------- */
.farm { list-style: none; margin: 0; padding: 0; }
.farm-item, .mk { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--c-surface-2); }
.farm-item:first-child, .mk:first-child { border-top: 0; }
.farm-item > div, .mk > div { flex: 1; min-width: 0; }
.farm-item p, .mk p { margin: 0; }
.farm-ic { flex: none; width: 34px; height: 34px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--c-surface-2); color: var(--c-text-muted); }
.farm-item.is-own .farm-ic { background: var(--c-success-soft); color: var(--c-success); }
.farm-item .btn, .mk .btn { font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip-rank { background: var(--c-gold-soft); color: var(--c-gold-ink); font-weight: 600; }

/* ---------- команда ---------- */
.team-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.team-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); margin: var(--space-3) 0; }
.team-stats div { background: var(--c-surface-2); border-radius: var(--radius-md); padding: var(--space-2); text-align: center; }
.team-stats dt { font-size: var(--text-xs); color: var(--c-text-muted); }
.team-stats dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .team-stats { grid-template-columns: repeat(3, 1fr); } }

:root { --c-water-1: #cfe8ff; --c-water-2: #7fb8ea; --c-water-ink: #0d3b66; --c-forest-1: #e5f3d3; --c-forest-2: #8cc06a; --c-forest-hover: #79b155; --c-forest-edge: #5c9a3a; --c-forest-ink: #1f4410; --c-bite-ink: #4a2c00; }
/* ---------- промыслы в окне ---------- */
.craft-scene { position: relative; height: 170px; border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); margin: var(--space-3) 0; transition: background var(--dur) var(--ease); }
.craft-scene.is-water { background: linear-gradient(180deg, var(--c-water-1), var(--c-water-2)); color: var(--c-water-ink); }
.craft-scene.is-forest { background: linear-gradient(180deg, var(--c-forest-1), var(--c-forest-2)); color: var(--c-forest-ink); }
.craft-mark { display: grid; place-items: center; animation: bob 2.4s ease-in-out infinite; }
.craft-state { margin: 0; font-weight: 700; font-size: var(--text-lg); }
.craft-scene.is-bite { background: linear-gradient(180deg, var(--c-gold-soft), var(--c-gold)); color: var(--c-bite-ink); }
.craft-scene.is-bite .craft-mark { animation: jerk .18s linear infinite; }
.craft-go { width: 100%; }
@keyframes bob { 50% { transform: translateY(6px); } }
@keyframes jerk { 50% { transform: translateY(10px) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .craft-mark, .craft-scene.is-bite .craft-mark { animation: none; } }
.forage { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin: var(--space-3) 0; }
.leaf { aspect-ratio: 1; border-radius: var(--radius-md); border: 1px solid var(--c-forest-edge); background: var(--c-forest-2); color: var(--c-forest-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; font: inherit; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.leaf:hover:not(:disabled) { background: var(--c-forest-hover); }
.leaf:active:not(:disabled) { transform: scale(.96); }
.leaf:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.leaf:disabled { cursor: default; }
.leaf small { font-size: var(--text-xs); line-height: 1.1; text-align: center; }
.leaf.is-good { background: var(--c-success-soft); border-color: var(--c-success); color: var(--c-success); }
.leaf.is-bad { background: var(--c-danger-soft); border-color: var(--c-danger); color: var(--c-danger); }
.leaf.is-empty { background: var(--c-surface-2); border-color: var(--c-border); color: var(--c-text-muted); }
.craft-foot { justify-content: space-between; align-items: center; }