/* НЮТАГ: одна тема, все цвета и размеры только из токенов ниже */
: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: 24px;
  --radius-xl: 30px;
  --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-control-border: #7d8a9a;
  --c-map-sky: #a9cfe8;
  --c-text: #142033;
  --c-text-muted: #4e5b6e;
  --c-accent: #1a73e0;
  --c-accent-2: #3d8ff0;
  --c-accent-hover: #1563c4;
  --c-disabled-bg: #eceff3;      /* недоступная кнопка: серая, текст 5,05:1 */
  --c-disabled-text: #5b6676;
  --c-disabled-border: #9aa4b1;
  --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-tg: #1a72ad;
  --c-tg-hover: #14608f;
  --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(22px) saturate(1.4);
  /* жидкое стекло: лёгкое для кнопок и капсул над картой, плотное для панелей с текстом */
  --glass: rgba(255, 255, 255, 0.7);
  --glass-strong: rgba(250, 252, 255, 0.88);
  --glass-hover: rgba(255, 255, 255, 0.55);
  --glass-press: rgba(20, 32, 51, 0.08);
  --glass-edge: rgba(255, 255, 255, 0.7);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 0.5px rgba(255, 255, 255, 0.5);
  --glass-shadow: 0 1px 2px rgba(16, 32, 60, 0.08), 0 12px 32px rgba(16, 32, 60, 0.16);
  --glass-dark: rgba(20, 32, 51, 0.82);
  --ring-track: rgba(20, 32, 51, 0.14);
  /* вторичный текст на лёгком стекле: 4,87:1 даже ночью над тёмной картой (замер contrast.py); --c-text-muted там даёт 3,51 */
  --c-text-glass-muted: #3a4658;
  --c-scrim-glass: rgba(10, 22, 40, 0.36);
  --scrim-blur: blur(6px);

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

  --gap: 10px;
  --topbar-h: 52px;
  --tap: 44px;
  --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 #set-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-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; 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-tg { background: var(--c-tg); color: var(--c-on-accent); }
.btn-tg:hover:not(:disabled) { background: var(--c-tg-hover); }
#login-actions .btn-tg { margin-top: var(--space-2); }
.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); }
.btn-label { display: inline-flex; align-items: center; gap: var(--space-2); }
.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); }
/* текст подсказки во всю ширину, ниже в ряд выбор улицы и кнопки: карточка низкая и не закрывает карту */
.mission { flex-wrap: wrap; align-items: flex-end; row-gap: var(--space-2); }
.mission > p { flex: 1 1 100%; margin: 0; }
.mission .street-search { flex: 1 1 180px; }
.mission .street-search select { width: 100%; }
.mission > .row-wrap { flex: none; }
.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); }
/* обучалка «Как играть» */
.guide { position: fixed; z-index: 46; left: calc((100% - var(--panel-w) - var(--gap)) / 2); bottom: var(--space-5); transform: translateX(-50%); width: min(440px, calc(100% - var(--panel-w) - var(--gap) * 4)); }
.guide-card { padding: var(--space-4) var(--space-5) var(--space-4); border-radius: var(--radius-lg); background: var(--c-surface); box-shadow: 0 16px 48px rgba(20, 32, 51, .28), inset 0 0 0 2px var(--c-accent); animation: guide-in 260ms var(--ease) both; }
.guide-head { display: flex; align-items: center; gap: var(--space-2); }
.guide-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--c-accent-soft); color: var(--c-accent); flex: none; }
.guide-n { flex: 1; margin: 0; font-size: var(--text-sm); color: var(--c-text-muted); font-weight: 600; }
.guide-card h2 { margin: var(--space-3) 0 var(--space-1); font-size: var(--text-xl); }
.guide-text { margin: 0; color: var(--c-text); line-height: 1.5; }
.guide-dots { display: flex; gap: 6px; justify-content: center; margin: var(--space-3) 0; }
.guide-dots span { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--c-border-strong); }
.guide-dots span.is-on { background: var(--c-accent); width: 20px; }
.guide-actions { display: flex; gap: var(--space-2); justify-content: space-between; }
.guide-actions .btn { flex: 1; }
.guide-spot { position: relative; z-index: 47; box-shadow: 0 0 0 3px var(--c-accent), 0 0 0 8px rgba(26, 115, 224, .25) !important; border-radius: var(--radius-full); animation: guide-pulse 1.6s ease-in-out infinite; }
.set-guide { width: 100%; margin: 0 0 var(--space-3); justify-content: flex-start; gap: var(--space-2); }
.onboard-guide { display: inline-flex; align-items: center; gap: var(--space-1); margin: 0 0 var(--space-3); min-height: 36px; }
.onboard-guide .i { width: 16px; height: 16px; }
@keyframes guide-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes guide-pulse { 50% { box-shadow: 0 0 0 3px var(--c-accent), 0 0 0 12px rgba(26, 115, 224, .08) !important; } }
@media (prefers-reduced-motion: reduce) { .guide-card, .guide-spot { animation: none; } }
@media (max-width: 760px) { .guide { left: 50%; width: calc(100% - var(--gap) * 2); bottom: calc(var(--tabs-h) + var(--gap) * 2 + var(--safe-b, 0px)); } }
.step-go { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 40px; padding: 0 var(--space-2); margin: 0 calc(var(--space-2) * -1); border: 0; border-radius: var(--radius-sm); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.step-go:hover { background: var(--c-surface-2); }
.step-go:focus-visible { outline: 2px solid var(--c-focus); }
.step-go span { flex: 1; }
.step-arrow { width: 14px; height: 14px; color: var(--c-accent); }
@media (pointer: coarse) { .step-go { min-height: var(--tap); } }

/* ---------- окна ---------- */
.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); }
.sex-row { grid-template-columns: repeat(2, 1fr); }
/* просьба указать пол: плашка, текст слева, кнопка справа по центру строки */
.sex-ask { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--c-accent-soft); }
.sex-ask p { flex: 1 1 160px; }
.sex-ask .btn { flex: none; }
.sex-ask p { margin: 0; }
.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); }
/* открытка с вершины: высота крупно, значок горы цвета склона */
.shift-postcard .i-xl { color: var(--c-success); }
.shift-postcard .result-pay { color: var(--c-text); }
.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: 1000px) { .stats .stat:nth-child(2), .stats .stat:nth-child(3) { display: none; } }
@media (max-width: 900px) { .stats { 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); --safe-t: env(safe-area-inset-top, 0px); }
  .topbar { gap: var(--space-2); padding: 0 var(--space-1) 0 var(--space-3); top: calc(var(--gap) + var(--safe-t)); }
  .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) + var(--safe-t)); 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) + var(--safe-t)); 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: auto; top: calc(env(safe-area-inset-top, 0px) + var(--topbar-h) + var(--gap) * 2); max-width: calc(100% - var(--gap) * 4); }
  .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: 32px; height: 32px; border-radius: var(--radius-full); background: var(--c-pin); border: 2px solid #fff; box-shadow: var(--shadow-2); display: grid; place-items: center; translate: -50% -130%; }
/* хвостик метки без поворота самой метки: иначе поворот сбивает её положение на карте */
.mpin::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 9px; height: 9px; background: inherit; border-right: 2px solid #fff; border-bottom: 2px solid #fff; translate: -50% 0; rotate: 45deg; }
.mpin svg { position: relative; z-index: 1; 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 { translate: -50% -50%; }
#zoom-labels[data-mode="off"] { opacity: .55; }
#zoom-labels[data-mode="all"] { color: var(--c-accent); }
.mstreet > span { display: block; 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; transform-origin: center; }

/* ---------- чаты, личка, шахматы, приглашение ---------- */
.panel-body:has(.chat-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); }
.chess-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); } }

/* иконки по смыслу: пары цвет и фон замерены contrast.py, все от 4,57:1 */
:root { --c-cat-sport: #1f7a3a; --c-cat-sport-bg: #e3f5e8; --c-cat-culture: #6b3fc4; --c-cat-culture-bg: #efe8fd; --c-cat-money: #8a5300; --c-cat-money-bg: #fff1d6;
  --c-cat-alarm: #b3242a; --c-cat-alarm-bg: #fdecec; --c-cat-road: #1a5fb4; --c-cat-road-bg: #e5f0fd; --c-cat-health: #0b7a75; --c-cat-health-bg: #e0f5f3; }
.farm-ic:has(> svg[data-cat="sport"]) { background: var(--c-cat-sport-bg); color: var(--c-cat-sport); }
.farm-ic:has(> svg[data-cat="culture"]) { background: var(--c-cat-culture-bg); color: var(--c-cat-culture); }
.farm-ic:has(> svg[data-cat="money"]) { background: var(--c-cat-money-bg); color: var(--c-cat-money); }
.farm-ic:has(> svg[data-cat="alarm"]) { background: var(--c-cat-alarm-bg); color: var(--c-cat-alarm); }
.farm-ic:has(> svg[data-cat="road"]) { background: var(--c-cat-road-bg); color: var(--c-cat-road); }
.farm-ic:has(> svg[data-cat="health"]) { background: var(--c-cat-health-bg); color: var(--c-cat-health); }
/* награды: монеты в кошелёк, медаль, свиток */
.fx-coin { position: fixed; z-index: 60; width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--radius-full); background: var(--c-gold); color: var(--c-gold-ink); pointer-events: none; box-shadow: 0 2px 6px rgba(107, 65, 0, .35); }
.fx-coin .i { width: 14px; height: 14px; }
.fx-award { position: fixed; z-index: 60; left: 50%; top: 38%; transform: translate(-50%, -50%); min-width: 240px; max-width: calc(100vw - 32px); padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: var(--c-surface); box-shadow: var(--shadow-lg, 0 12px 40px rgba(20, 32, 51, .25)); text-align: center; cursor: pointer; animation: fx-pop 420ms cubic-bezier(.2, 1.4, .4, 1) both; transition: opacity 300ms, transform 300ms; }
.fx-award.is-out { opacity: 0; transform: translate(-50%, -60%); }
.fx-award-ic { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: var(--radius-full); margin-bottom: var(--space-2); }
.fx-medal .fx-award-ic { background: var(--c-gold-soft); color: var(--c-gold-ink); box-shadow: inset 0 0 0 3px var(--c-gold); }
.fx-scroll .fx-award-ic { background: var(--c-cat-culture-bg); color: var(--c-cat-culture); }
.fx-award-title { margin: 0; font-size: var(--text-xl); font-weight: 700; color: var(--c-text); }
.fx-award-sub { margin: var(--space-1) 0 0; color: var(--c-text-muted); font-size: var(--text-sm); }
@keyframes fx-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } }
@media (prefers-reduced-motion: reduce) { .fx-award { animation: none; transition: none; } }
:root[data-calm="1"] .fx-award { animation: none; }
:root { --c-pin: #c2560c; --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; }

/* ---------- участок ---------- */
.plot-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.plot-size { display: flex; flex-direction: column; }
.plot-size strong { font-size: var(--text-xl); font-family: var(--font-display); line-height: 1.1; }
.plot-meter { height: 8px; border-radius: var(--radius-full); background: var(--c-surface-2); overflow: hidden; margin: var(--space-2) 0 var(--space-1); }
.plot-meter span { display: block; height: 100%; background: var(--c-success); border-radius: inherit; transition: width var(--dur) var(--ease); }
.farm-item .chip { vertical-align: 1px; }
.farm-item.is-tight .farm-ic { opacity: .6; }
.warn { color: var(--c-danger); }

/* ---------- мой дом ---------- */
.est-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.est-name { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; line-height: 1.15; }
.est-beauty { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.est-score { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; line-height: 1; color: var(--c-gold-ink); font-variant-numeric: tabular-nums; }
.est-step { margin: var(--space-3) 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--c-surface-2); }
.est-step p { margin: 0 0 var(--space-1); }
.est-step.is-building { background: var(--c-gold-soft); }
.est-step .row-wrap { align-items: center; margin-top: var(--space-2); }
.est-h { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-sm); font-weight: 600; display: flex; align-items: baseline; gap: var(--space-2); }
.est-tidy { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--space-2); }
.est-tidy .plot-meter { margin: 0; }
.plot-meter.is-low span { background: var(--c-danger); }
.swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.swatch { width: 34px; height: 34px; border-radius: var(--radius-full); border: 2px solid var(--c-surface); background: var(--sw); box-shadow: 0 0 0 1px var(--c-border-strong); cursor: pointer; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.swatch:hover { transform: scale(1.08); }
.swatch:active { transform: scale(.96); }
.swatch:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.swatch.is-on { box-shadow: 0 0 0 2px var(--c-accent); }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-2); }
.opt { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--space-2); align-items: center; text-align: left; 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); cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.opt > span:not(.opt-dot) { grid-column: -2; }
.opt small { grid-column: -2; font-size: var(--text-xs); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.opt-dot { grid-row: 1 / 3; width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.opt:hover:not(:disabled) { border-color: var(--c-accent); background: var(--c-accent-soft); }
.opt:active:not(:disabled) { transform: translateY(1px); }
.opt:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.opt:disabled { opacity: .55; cursor: not-allowed; }
.opt.is-on { border-color: var(--c-success); background: var(--c-success-soft); }
.opt.is-on small { color: var(--c-success); }
.gold { color: var(--c-gold-ink); }
.est-line { margin: var(--space-2) 0; }
.top { list-style: none; margin: 0; padding: 0; }
.top-n { width: 20px; text-align: center; font-weight: 700; color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.top-score { margin-left: auto; font-weight: 800; color: var(--c-gold-ink); font-variant-numeric: tabular-nums; }
.mavatar.is-best { box-shadow: 0 0 0 3px var(--c-gold), var(--shadow-1); }

/* ---------- админка ---------- */
html:has(body.admin-page), body.admin-page { height: auto; overflow: auto; }
body.admin-page { font-size: var(--text-sm); min-height: 100vh; }
.admin-page .toast { left: 50%; }
.adm-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-2) var(--space-4); background: var(--c-surface-glass); backdrop-filter: blur(var(--glass-blur)); border-bottom: 1px solid var(--c-border); }
.adm-brand { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--c-text); text-decoration: none; }
.adm-tabs { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-left: auto; }
.adm-tab { border: 0; background: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-full); font: inherit; font-weight: 600; color: var(--c-text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); }
.adm-tab:hover { background: var(--c-surface-2); color: var(--c-text); }
.adm-tab:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.adm-tab[aria-selected="true"] { background: var(--c-accent); color: var(--c-on-accent); }
.adm-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--c-danger); color: #fff; font-size: var(--text-xs); display: inline-grid; place-items: center; }
.adm-main { max-width: 1280px; margin: 0 auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.adm-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.adm-card h2 { margin: 0; font-size: var(--text-lg); }
.adm-denied { max-width: 520px; margin: 10vh auto; align-items: flex-start; }
.adm-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.adm-row h2 { margin-right: auto; }
.adm-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-3); }
.adm-stat { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: var(--space-3); display: flex; flex-direction: column; gap: 2px; }
.adm-stat.is-bad { border-color: var(--c-danger); background: var(--c-danger-soft); }
.adm-stat.is-ok .adm-num { color: var(--c-success); }
.adm-num { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.adm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: var(--space-4); align-items: start; }
.adm-table { width: 100%; border-collapse: collapse; }
.adm-table th { text-align: left; font-weight: 600; color: var(--c-text-muted); font-size: var(--text-xs); padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--c-border); }
.adm-table td { padding: var(--space-2); border-bottom: 1px solid var(--c-surface-2); vertical-align: middle; }
.adm-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm-table .neg { color: var(--c-danger); } .adm-table .pos { color: var(--c-success); }
.adm-table tr.is-bad td { background: var(--c-danger-soft); }
.adm-table tr.is-fixed td { background: var(--c-success-soft); }
.adm-scroll { overflow-x: auto; }
.adm-players td { white-space: nowrap; }
.adm-acts { display: flex; gap: var(--space-1); }
.adm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-border-strong); margin-right: var(--space-2); }
.adm-dot.is-on { background: var(--c-success); }
.adm-search { display: flex; gap: var(--space-2); }
.adm-search input { width: 220px; }
.adm-errs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.adm-err { border: 1px solid var(--c-border); border-left: 3px solid var(--c-danger); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.adm-err.is-fixed { border-left-color: var(--c-success); opacity: .8; }
.adm-err-msg { flex: 1; min-width: 200px; word-break: break-word; }
.adm-err pre { white-space: pre-wrap; word-break: break-all; font-size: var(--text-xs); background: var(--c-surface-2); padding: var(--space-2); border-radius: var(--radius-sm); max-height: 260px; overflow: auto; }
.adm-seg { display: flex; gap: var(--space-1); }
.adm-form { display: flex; flex-direction: column; gap: var(--space-2); }
.adm-form textarea { width: 100%; resize: vertical; }
.adm-aud { border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); }
.adm-coins { border-top: 1px solid var(--c-border); padding-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); max-width: 420px; }
.adm-coins label { display: flex; flex-direction: column; gap: 2px; }
.adm-bl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.adm-bl-text { white-space: pre-wrap; margin: 0; color: var(--c-text-muted); max-height: 4.5em; overflow: hidden; }
@media (max-width: 640px) { .adm-grid { grid-template-columns: 1fr; } .adm-tabs { margin-left: 0; } .adm-main { padding: var(--space-3); } }
.admin-page input[type="radio"], .admin-page input[type="checkbox"] { width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; flex: none; accent-color: var(--c-accent); }
.adm-aud label, .adm-form > label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.login-pin { font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: 0.08em; }

/* ---------- развитие жителя ---------- */
.me-seg { position: sticky; top: calc(var(--space-4) * -1); z-index: 2; margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0; padding: var(--space-2) var(--space-4); border-radius: 0; background: var(--c-surface); box-shadow: 0 1px 0 var(--c-border); }
.me-seg button { background: var(--c-surface-2); }
.me-seg button[aria-selected="true"] { background: var(--c-accent); color: var(--c-on-accent); box-shadow: none; }
/* ширина по подписи, лишнее место поровну: «Транспорт» не обрезается рядом с коротким «Дом» */
.me-seg button { font-size: var(--text-xs); padding: 0 6px; min-width: 44px; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; }
@media (max-width: 380px) { .me-seg { padding-inline: var(--space-2); margin-inline: calc(var(--space-4) * -1); } .me-seg button { font-size: 11px; padding: 0 3px; letter-spacing: -0.02em; } }
/* самые узкие экраны: подписи целиком, строка вкладок листается пальцем */
@media (max-width: 340px) { .me-seg { overflow-x: auto; scrollbar-width: none; } .me-seg::-webkit-scrollbar { display: none; } .me-seg button { flex: 0 0 auto; overflow: visible; } }
.seg button:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.boost-head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.boost-num { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; color: var(--c-success); font-variant-numeric: tabular-nums; }
.boost-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.boost-list li { display: inline-flex; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-full); background: var(--c-success-soft); color: var(--c-success); font-size: var(--text-xs); }
.docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.docs li { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--c-gold-soft); color: var(--c-gold-ink); }
.docs li span { display: flex; flex-direction: column; }
.study { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--c-surface-2); }
.study > div { flex: 1; min-width: 0; }
.study p { margin: 0; }
.edu-dir select { margin-top: var(--space-1); font-size: var(--text-sm); text-overflow: ellipsis; }
.edu-dir select:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; }
.edu-dir select:hover:not(:disabled) { border-color: var(--c-control-border); }
.edu-dir select:disabled { opacity: 0.5; cursor: not-allowed; }
.invite-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) 0; }
.invite-row > .small { flex: 1; min-width: 140px; }
.fam-form input { width: 120px; }
.mav-n { position: absolute; right: -10px; bottom: -6px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: var(--radius-full); background: var(--c-surface); color: var(--c-text); font-size: 9px; font-weight: 700; display: grid; place-items: center; box-shadow: var(--shadow-1); }
/* узкий телефон: шапка помещается целиком, колокольчик не уезжает за край */
@media (max-width: 400px) {
  .topbar { gap: var(--space-1); }
  .brand { font-size: var(--text-md); gap: var(--space-1); }
  .brand-mark { width: 24px; height: 24px; }
  .me-chip { min-width: 0; flex: 0 1 auto; gap: var(--space-1); padding-inline: 4px var(--space-1); }
  .me-chip-text { min-width: 0; }
  .me-chip-name { max-width: 64px; }
  .me-chip-coins { padding: 2px 6px; }
}
@media (max-width: 340px) { .me-chip-name { display: none; } }
.invite-link { overflow-wrap: anywhere; word-break: break-all; }

/* ---------- погода, праздник, заставка, открытка, звук ---------- */
.wx, .holiday { position: absolute; z-index: 4; left: var(--gap); top: calc(var(--gap) * 2 + var(--topbar-h)); display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--c-surface-glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-1); font-size: var(--text-sm); color: var(--c-text); }
.wx[hidden], .holiday[hidden] { display: none; }
.wx strong { font-variant-numeric: tabular-nums; }
.wx .i { color: var(--c-accent); }
.holiday { top: calc(var(--gap) * 2 + var(--topbar-h) + 40px); background: var(--c-gold-soft); color: var(--c-gold-ink); font-weight: 600; }
@media (max-width: 760px) { .wx, .holiday { top: calc(var(--gap) * 2 + var(--topbar-h) + var(--safe-t, 0px)); left: var(--gap); font-size: var(--text-xs); } .holiday { top: calc(var(--gap) * 2 + var(--topbar-h) + var(--safe-t, 0px) + 34px); } .app:has(.panel.is-open) .wx, .app:has(.panel.is-open) .holiday { display: none; } }
.sound-btn .snd-on { display: none; }
.sound-btn.is-on .snd-on { display: inline; }
.sound-btn.is-on .snd-off { display: none; }
.sound-btn.is-on { color: var(--c-accent); }
@media (max-width: 400px) { .sound-btn { display: none; } }
.intro { position: fixed; inset: 0; z-index: 70; display: grid; place-items: end center; padding: 0 var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(10, 20, 48, 0.25) 0%, rgba(10, 20, 48, 0) 35%, rgba(10, 20, 48, 0.55) 100%); opacity: 0; transition: opacity 0.6s var(--ease); pointer-events: none; }
.intro.is-on { opacity: 1; pointer-events: auto; }
/* на время заставки прячем панель вкладок, шапку и зум, чтобы не просвечивали сквозь текст */
.tabs, .topbar, .zoom, .map-ov { transition: opacity 0.6s var(--ease); }
body.is-intro .tabs, body.is-intro .topbar, body.is-intro .zoom, body.is-intro .map-ov { opacity: 0; pointer-events: none; }
.intro-text { max-width: 560px; text-align: center; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); }
.intro-place { margin: 0; font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; }
.intro-title { margin: var(--space-1) 0; font-family: var(--font-display); font-size: clamp(56px, 14vw, 120px); line-height: 1; letter-spacing: -0.02em; }
.intro-sub { margin: 0 0 var(--space-5); font-size: var(--text-lg); }
.intro-actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.intro-actions .link-btn { color: #fff; }
.intro-text > * { animation: rise 1s var(--ease) both; }
.intro-text > *:nth-child(2) { animation-delay: 0.35s; }
.intro-text > *:nth-child(3) { animation-delay: 1.4s; }
.intro-text > *:nth-child(4) { animation-delay: 2.6s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .intro-text > * { animation: none; } }
.postcard-card { max-width: 460px; }
.postcard-card img { width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-2); }
.est-card { margin-left: auto; font-size: var(--text-xs); }

/* ---------- жизнь села ---------- */
.goal { padding: var(--space-3); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--c-accent-soft), var(--c-gold-soft)); }
.goal.is-done { background: var(--c-success-soft); }
.goal h3 { margin: 0; }
.goal-bar { position: relative; height: 26px; border-radius: var(--radius-full); background: var(--c-surface); overflow: hidden; box-shadow: inset 0 0 0 1px var(--c-border); }
.goal-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--c-success), #3bbf7a); transition: width var(--dur) var(--ease); }
.goal-bar strong { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--c-text); }
.quest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.quest-list li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-md); background: var(--c-surface-2); font-size: var(--text-sm); }
.quest-list li.is-done { background: var(--c-success-soft); color: var(--c-success); }
.q-box { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--c-border-strong); display: grid; place-items: center; }
.quest-list li.is-done .q-box { border-color: var(--c-success); background: var(--c-success); color: #fff; }
.q-box .i { width: 14px; height: 14px; }
.contests { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); }
.contests > li { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--c-surface-2); }
.contests ol { margin: var(--space-1) 0 0; padding-left: 18px; font-size: var(--text-sm); }
/* формы в строку: что выбрать на всю ширину, ниже поля и кнопка одной высоты, кнопка справа */
.order-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: var(--space-2); }
.order-form > select { grid-column: 1 / -1; }
.order-form > .field-error, .order-form > p { grid-column: 1 / -1; margin: 0; }
.order-form > input:only-of-type { grid-column: 1 / 3; }
.order-form select, .order-form input { min-width: 0; width: 100%; }
.album { margin-top: var(--space-2); }
.album-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-1); }
.album-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-2) 2px; border-radius: var(--radius-md); background: var(--c-surface-2); color: var(--c-text-muted); text-align: center; font-size: 10px; }
.album-cell.is-have { background: var(--c-gold-soft); color: var(--c-gold-ink); }
.album-cell small { line-height: 1.15; }
.guestbook ul { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.titles { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.mtitle { translate: -50% 4px; padding: 1px 6px; border-radius: var(--radius-full); background: var(--c-gold-soft); color: var(--c-gold-ink); font-size: 10px; font-weight: 700; white-space: nowrap; box-shadow: var(--shadow-1); }
.mpin-event { background: #d6336c; }
.mwave { translate: -50% -100%; width: 34px; height: 34px; border-radius: var(--radius-full); background: #fff; color: #d6336c; display: grid; place-items: center; box-shadow: var(--shadow-2); }
.mwave svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.craft-scene.is-range { background: linear-gradient(180deg, #e8f3d9, #b9d98f); color: var(--c-forest-ink); }
.target { position: relative; width: 84px; height: 84px; border-radius: 50%; background: #fff; display: grid; place-items: center; opacity: 0.35; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.target span { position: absolute; border-radius: 50%; }
.target span:nth-child(1) { inset: 10px; background: #e03131; }
.target span:nth-child(2) { inset: 22px; background: #fff; }
.target span:nth-child(3) { inset: 32px; background: #e03131; }
.craft-scene.is-bite .target { opacity: 1; transform: scale(1.15); animation: aim 1s linear forwards; }
@keyframes aim { 50% { transform: scale(1.25); } 100% { transform: scale(0.8); opacity: 0.4; } }
a.btn { text-decoration: none; }

/* Палец не мышь: на сенсорных экранах всё нажимаемое не меньше 44×44. Крупные кнопки растут сами,
   маленькие остаются плотными на вид, а зона нажатия добирается невидимой рамкой. */
@media (pointer: coarse) {
  .btn, .icon-btn, .me-chip, .dm-head .icon-btn { min-height: 44px; }
  .icon-btn, .dm-head .icon-btn { min-width: 44px; }
  .btn-sm { height: 36px; min-height: 36px; position: relative; }
  .btn-sm::after { content: ""; position: absolute; inset: -4px 0; }
  .seg button { height: 38px; position: relative; }
  .seg button::after { content: ""; position: absolute; inset: -3px 0; }
}

/* облёт с дрона: подписи и значки уходят, остаётся село; кнопка подсвечена, пока камера летит */
body.is-drone .map-ov { opacity: 0; pointer-events: none; }
.zoom .icon-btn.is-on, .zoom .icon-btn[aria-pressed="true"] { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-accent); }
.icon-btn[hidden] { display: none; }

/* ---------- настройки ---------- */
.settings-card { width: min(440px, 100%); max-height: calc(100dvh - var(--space-8, 32px)); overflow-y: auto; padding: var(--space-4) var(--space-5, 20px) var(--space-5, 20px); }
.settings-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.settings-head h2 { margin: 0; font-size: var(--text-xl, 20px); }
.set-group { padding: var(--space-3) 0; border-top: 1px solid var(--c-border); }
.set-group h3 { margin: 0 0 var(--space-2); font-size: var(--text-xs, 12px); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-text-muted); }
.set-group[hidden] { display: none; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; }
.set-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-title { font-weight: 600; }
.set-desc { font-size: var(--text-sm); color: var(--c-text-muted); line-height: 1.35; }
.set-note { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--c-text-muted); }
.set-foot { margin: var(--space-3) 0 0; }
.set-foot a { color: var(--c-accent); }
/* переключатель: состояния по умолчанию, наведение, фокус, нажатие, выключен, недоступен, занят */
/* рамка выключенного переключателя: 3,52:1 к белому (замер scripts/contrast.py), как требует WCAG 1.4.11 */
.switch { position: relative; flex: none; width: 46px; height: 28px; padding: 0; border: 1px solid var(--c-control-border); border-radius: var(--radius-full); background: var(--c-surface-2); cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.switch-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--c-surface); box-shadow: var(--shadow-1); transition: transform var(--dur-fast) var(--ease); }
.switch:hover { border-color: var(--c-text-muted); background: var(--c-border); }
.switch[aria-checked="true"] { background: var(--c-accent); border-color: var(--c-accent); }
.switch[aria-checked="true"]:hover { background: var(--c-accent-hover, var(--c-accent)); }
.switch[aria-checked="true"] .switch-thumb { transform: translateX(18px); }
.switch:active .switch-thumb { width: 24px; }
.switch[aria-checked="true"]:active .switch-thumb { transform: translateX(14px); }
.switch:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.switch:disabled { opacity: 0.45; cursor: not-allowed; }
.switch[aria-busy="true"] { opacity: 0.7; cursor: progress; }
@media (pointer: coarse) { .switch::after { content: ""; position: absolute; inset: -8px -4px; } }
@media (prefers-reduced-motion: reduce) { .switch, .switch-thumb { transition: none; } }

/* настоящий дом жителя на проверке */
.mpin-check { background: var(--c-accent); }
.real-home.is-wait { border-left: 3px solid var(--c-accent); padding-left: var(--space-3); }
.req-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.req { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface); }
.req-text { display: flex; flex-direction: column; gap: 2px; }
.req-name { font-weight: 600; }

/* пока карта собирает шейдеры: небо вместо белого холста и надпись по центру */
#map { background: var(--c-map-sky); }
.map-loading { position: absolute; left: 50%; top: 42%; translate: -50% -50%; z-index: 3; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); background: var(--c-surface-glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-float); font-weight: 600; color: var(--c-text); pointer-events: none; }
.map-loading .spinner { display: inline-block; }

/* ================= Жидкое стекло ================= */
/* Всё, что парит над картой, из одного стекла: размытие и насыщение того, что под ним,
   светлая кромка сверху и мягкая тень. Капсулы шапки, вкладки, панель, кнопки карты, карточки, окна. */
.topbar { padding: 0; gap: var(--space-2); background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.bar, .tabs, .zoom .icon-btn, .wx, .mission, .map-loading {
  background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow), var(--glass-hi);
}
.panel, .place, .card, .settings-card {
  background: var(--glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow), var(--glass-hi);
}
.bar { height: 100%; display: flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-1); border-radius: var(--radius-full); }
.bar-brand { gap: var(--space-2); padding: 0 var(--space-4) 0 var(--space-2); }
.brand-place { display: flex; flex-direction: column; line-height: 1.1; border-left-color: rgba(20, 32, 51, 0.12); }
.brand-place, .brand-place .date, .bar .stat dt { color: var(--c-text-glass-muted); }
.brand-place .date { font-size: var(--text-xs); font-weight: 400; }
.stats { margin: 0 auto; padding: 0 var(--space-3); gap: var(--space-3); }
.stat { background: none; padding: 0; }
.stat + .stat { padding-left: var(--space-3); border-left: 1px solid rgba(20, 32, 51, 0.1); }
.bar-me { margin-left: auto; }
.stats + .bar-me { margin-left: 0; }
.bar .icon-btn { background: transparent; border-color: transparent; border-radius: var(--radius-full); }
.bar .icon-btn:hover, .zoom .icon-btn:hover { background: var(--glass-hover); }
.bar .icon-btn:active, .zoom .icon-btn:active { background: var(--glass-press); }
/* монеты: золотая капсула внутри стекла */
.coins-pill { display: inline-flex; align-items: center; gap: var(--space-1); height: 34px; padding: 0 var(--space-3) 0 var(--space-2); margin-right: var(--space-1); border-radius: var(--radius-full); background: var(--c-gold-soft); color: var(--c-gold-ink); font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px rgba(245, 165, 36, 0.35); }
.coins-pill .i { color: var(--c-gold); }
.coins-pill.is-bump strong { animation: bump var(--dur) var(--ease); display: inline-block; }
/* аватар в кольце потребностей вместо имени и полосок */
.me-chip { position: relative; display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: var(--radius-full); background: transparent; box-shadow: none; }
.me-chip:hover { background: var(--glass-hover); border: 0; }
.me-chip:active { background: var(--glass-press); }
.me-chip:active .avatar { transform: scale(0.95); }
.me-chip .avatar { transition: transform var(--dur-fast) var(--ease); box-shadow: 0 1px 3px rgba(16, 32, 60, 0.25); }
.me-ring { position: absolute; inset: 0; width: var(--tap); height: var(--tap); fill: none; stroke-width: 3; stroke-linecap: round; pointer-events: none; }
.ring-track { stroke: var(--ring-track); }
.ring-val { stroke: var(--c-success); }
.ring-val.is-low { stroke: var(--c-danger-hover); } /* 3,83:1 на стекле ночью (замер), обычный красный там 2,89 */
.avatar-art { overflow: hidden; background: none; }
.avatar-art svg { display: block; }
/* выбор аватара в анкете */
/* аватары ровной сеткой: в один ряд, а на телефоне в два одинаковых ряда */
.av-pick { --n: 7; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); justify-items: center; gap: var(--space-2); }
@media (max-width: 480px) { .av-pick { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.av-opt { position: relative; padding: 3px; border: 2px solid transparent; border-radius: var(--radius-full); background: none; cursor: pointer; transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.av-opt:hover { transform: scale(1.06); }
.av-opt:active { transform: scale(0.96); }
.av-opt[aria-checked="true"] { border-color: var(--c-accent); }
.av-opt:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
/* вкладки и панель: одна стеклянная карточка; выбранная вкладка — капсула акцентного цвета */
.tabs { border-radius: var(--radius-xl) var(--radius-xl) 0 0; border-bottom: 0; padding: var(--space-1) var(--space-2); gap: var(--space-1); }
.panel { border-radius: 0 0 var(--radius-xl) var(--radius-xl); border-top: 1px solid rgba(20, 32, 51, 0.06); }
.tab { border-radius: var(--radius-full); }
.tab:hover { background: var(--glass-hover); }
.tab:active { background: var(--glass-press); }
.tab[aria-selected="true"] { background: var(--c-accent); box-shadow: var(--shadow-accent), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
/* кнопки и подсказки на карте */
.zoom .icon-btn { border-radius: var(--radius-full); }
.place, .card, .settings-card { border-radius: var(--radius-xl); }
.mission { box-shadow: var(--glass-shadow), var(--glass-hi), inset 0 0 0 2px var(--c-accent); border-radius: var(--radius-lg); }
.toast { background: var(--glass-dark); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-5); box-shadow: var(--glass-shadow); }
.modal { background: var(--c-scrim-glass); backdrop-filter: var(--scrim-blur); -webkit-backdrop-filter: var(--scrim-blur); }
/* счётчики уступают место на узких экранах; правило после .bar, иначе оно их снова показывает */
@media (max-width: 1000px) { .stats .stat:nth-child(2), .stats .stat:nth-child(3) { display: none; } }
@media (max-width: 900px) { .stats { display: none; } }
@media (max-width: 760px) {
  .tabs { border-radius: var(--radius-full); padding: var(--space-1); }
  .panel { border-radius: var(--radius-xl); border-top: 1px solid var(--glass-edge); }
  .bar-brand { padding: 0 var(--space-3) 0 var(--space-2); }
  .bar-brand .brand-place { display: none; }
}
@media (max-width: 400px) {
  .coins-pill { padding: 0 var(--space-2) 0 var(--space-1); margin-right: 0; }
  .me-chip { min-width: var(--tap); }
}
@media (max-width: 350px) { .brand-word { display: none; } .bar-brand { padding: 0 var(--space-2); } }
/* без поддержки размытия стекло почти непрозрачное, текст читается так же */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(255, 255, 255, 0.92); --glass-strong: rgba(255, 255, 255, 0.97); }
}

/* метка жителя на карте: тот же аватар, что в шапке и профиле */
.mavatar { overflow: visible; padding: 0; }
.mavatar .avatar { box-shadow: none; }

/* ---------- админка: графики, воронка, поддержка ---------- */
.adm-chart { width: 100%; height: auto; display: block; }
.adm-bar { fill: var(--c-accent-soft); stroke: var(--c-accent); stroke-width: 1; }
.adm-bar.is-today { fill: var(--c-accent); }
.adm-bar-v { font-size: var(--text-xs); font-weight: 600; text-anchor: middle; fill: var(--c-text); }
.adm-bar-d { font-size: var(--text-xs); text-anchor: middle; fill: var(--c-text-muted); }
.adm-funnel { display: grid; gap: var(--space-2); }
.adm-funnel li { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr 56px; align-items: center; gap: var(--space-3); }
.adm-funnel strong { text-align: right; font-variant-numeric: tabular-nums; }
.adm-funnel-bar { height: 10px; border-radius: var(--radius-full); background: var(--c-surface-2); overflow: hidden; }
.adm-funnel-bar span { display: block; height: 100%; border-radius: var(--radius-full); background: var(--c-accent); }
.adm-tickets { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.adm-ticket { padding: var(--space-3) var(--space-4); border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface); display: grid; gap: var(--space-2); }
.adm-ticket.is-open { border-left: 3px solid var(--c-accent); }
.adm-ticket-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-ticket-answer { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--c-success-soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-reply { display: grid; gap: var(--space-2); }
.adm-reply textarea, .set-support textarea { width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--c-control-border); border-radius: var(--radius-md); background: var(--c-surface); resize: vertical; font: inherit; }
.adm-reply textarea:focus-visible, .set-support textarea:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; }
@media (max-width: 640px) { .adm-funnel li { grid-template-columns: 1fr 56px; } .adm-funnel-bar { grid-column: 1 / -1; grid-row: 2; } }
/* поддержка в настройках игры */
.set-support { display: grid; gap: var(--space-2); }
.set-tickets { display: grid; gap: var(--space-2); margin-top: var(--space-2); }
.set-ticket { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--c-surface-2); font-size: var(--text-sm); display: grid; gap: var(--space-1); }
.set-ticket .ans { color: var(--c-success); }

/* свободный дом в карточке места */
.chip-free { background: var(--c-success-soft); color: var(--c-success); font-size: var(--text-xs); }

/* аватар строго по центру кольца: без строчного выравнивания по тексту */
#me-chip-av { display: grid; place-items: center; line-height: 0; }

/* фото на аватаре */
.avatar-photo { overflow: hidden; background: var(--c-surface-2); }
.avatar-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-photo { display: grid; gap: var(--space-2); margin-top: var(--space-3); justify-items: start; }
.adm-photo { width: 28px; height: 28px; border-radius: var(--radius-full); object-fit: cover; vertical-align: middle; margin-right: var(--space-2); }

/* вклад в бюджет села */
.donate-form { display: grid; gap: var(--space-2); margin: var(--space-3) 0; }
.donate-row { display: flex; gap: var(--space-2); }
.donate-row input { flex: 1; min-width: 0; min-height: var(--tap); }
.donors { margin-bottom: var(--space-3); }

/* общие дела села, табличка меценатов */
.projects { display: grid; gap: var(--space-3); margin: var(--space-3) 0; }
.project { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-lg); background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-edge); }
.project.is-now { box-shadow: inset 0 0 0 2px var(--c-primary); }
.project-title { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.project .btn { justify-self: start; }
.plaque { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--c-surface-2); box-shadow: inset 0 0 0 1px var(--c-border); }

/* первый день в Узоне */
.onboard { box-shadow: inset 0 0 0 2px var(--c-primary), var(--glass-shadow); }
.steps { list-style: none; padding: 0; margin: var(--space-3) 0; display: grid; gap: var(--space-2); }
.steps li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.steps li .i { width: 18px; height: 18px; flex: none; color: var(--c-text-muted); }
.steps li.is-done { color: var(--c-text-muted); }
.steps li.is-done span:not(.sr-only) { text-decoration: line-through; }
.steps li.is-done .i { color: var(--c-success); }

/* админка: экономика */
.adm-alert { border-left: 4px solid var(--c-danger); }
.adm-tune tr.is-changed td:first-child { font-weight: 600; }
.adm-num-in { width: 110px; min-height: 36px; }
.adm-table .pos { color: var(--c-success); }
.adm-table .neg { color: var(--c-danger); }

/* подсказка под полем анкеты */
.field-hint { margin-top: calc(var(--space-2) * -1); }

/* цвета дома ровной сеткой: в один ряд, на телефоне два ряда по пять */
.swatches { display: grid; grid-template-columns: repeat(10, 32px); justify-content: space-between; }
@media (max-width: 480px) { .swatches { grid-template-columns: repeat(5, 32px); justify-content: space-around; } }

/* нажимаемое синее, недоступное серое: так видно и слабовидящим, что можно нажать.
   второстепенная кнопка: синяя рамка и синий текст (5,3:1 на светлом), основная залитая синим */
.btn-ghost:not(:disabled) { color: var(--c-accent-hover); border-color: var(--c-accent); border-width: 1.5px; }
.btn-ghost:not(:disabled):hover { background: #e8f1fd; }
.btn:disabled, .btn-primary:disabled, .btn-ghost:disabled { opacity: 1; background: var(--c-disabled-bg); color: var(--c-disabled-text); border: 1.5px dashed var(--c-disabled-border); box-shadow: none; }
.btn-danger-ghost:not(:disabled) { border-width: 1.5px; }

/* смена только что началась: плашка над картой */
.ontime { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + var(--space-4) + 64px); transform: translateX(-50%); z-index: 35; width: min(460px, calc(100% - 32px)); display: grid; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--glass-strong); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow), inset 0 0 0 2px var(--c-accent); font-size: var(--text-sm); }

/* карточка участка: дела коротко, в одну строку, цена на кнопке */
.biz-offers { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: grid; gap: var(--space-2); }
.biz-offer { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; border-bottom: 1px solid var(--c-border); }
.biz-offer:last-child { border-bottom: 0; }
.biz-offer .farm-ic { width: 32px; height: 32px; }
.biz-txt p { margin: 0; line-height: 1.25; }
.biz-name { font-weight: 600; font-size: var(--text-sm); }
.biz-offer .btn { min-width: 76px; font-variant-numeric: tabular-nums; }

.nowrap { white-space: nowrap; }

/* вакансии: виды мест сворачиваются, смены в одну строку */
.vac-kind { border-top: 1px solid var(--c-border); }
.sec-nav { position: sticky; top: calc(var(--space-4) * -1); z-index: 3; display: flex; gap: var(--space-1); margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0; padding: var(--space-2) var(--space-4); overflow-x: auto; scrollbar-width: none; background: var(--c-surface-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--c-border, rgba(20, 32, 51, .08)); flex: none; }
.me-seg + .sec-nav { top: calc(50px - var(--space-4)); margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0; z-index: 1; }
.sec-nav::-webkit-scrollbar { display: none; }
.sec-chip { flex: none; min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--c-border, rgba(20, 32, 51, .12)); border-radius: var(--radius-full); background: var(--c-surface); color: var(--c-text-muted); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.sec-chip:hover { color: var(--c-text); background: var(--c-surface-2); }
@media (pointer: coarse) { .sec-chip { min-height: var(--tap); } }
.sec-chip:active { transform: scale(.97); }
.sec-chip:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.sec-chip[aria-selected="true"] { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
/* мелкие ссылки внутри текста: зона нажатия 32px, строка не раздвигается */
.link-btn { padding-block: 7px; margin-block: -7px; }
.vac-map { min-height: 36px; margin-block: 0; display: inline-flex; align-items: center; gap: var(--space-1); }
.mk-more, .sec-off { list-style: none; }
.mk-more > details > summary, .sec-off > summary { min-height: var(--tap); display: flex; align-items: center; cursor: pointer; color: var(--c-accent); font-weight: 600; font-size: var(--text-sm); }
.mk-more > details > summary:hover, .sec-off > summary:hover { color: var(--c-accent-hover); }
/* мой путь */
.path { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.path-item { display: flex; gap: var(--space-3); align-items: center; }
.path-item p { margin: 0; }
.path-stats { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-2) 0; }
.path-stat { padding: 2px var(--space-2); border-radius: var(--radius-full); background: var(--c-surface-2); font-size: var(--text-sm); color: var(--c-text-muted); }
.path-stat strong { color: var(--c-text); }
.pp-path { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--c-border); }
#path-share { margin-top: var(--space-3); }
/* где ждёт дело: точка на вкладке, разделе и группе */
.tab.has-hint::before, .me-seg button.has-hint::before, .sec-chip.has-hint::before { content: ""; position: absolute; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--c-danger); box-shadow: 0 0 0 2px var(--c-surface); pointer-events: none; }
.tab.has-hint { position: relative; }
.tab.has-hint::before { top: 6px; right: calc(50% - 16px); }
.me-seg button.has-hint, .sec-chip.has-hint { position: relative; }
.me-seg button.has-hint::before { top: 4px; right: 6px; }
.sec-chip.has-hint::before { top: 2px; right: 2px; }
@media (prefers-reduced-motion: no-preference) { .sec-chip.has-hint::before, .tab.has-hint::before { animation: hint-pulse 2.4s ease-in-out 3; } }
@keyframes hint-pulse { 50% { transform: scale(1.35); } }
.vac-lock { display: flex; gap: var(--space-1); align-items: flex-start; margin: 2px 0 0; }
.vac-lock .i { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.vac-kind > summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap); cursor: pointer; font-weight: 600; list-style: none; }
.vac-kind > summary::-webkit-details-marker { display: none; }
.vac-kind > summary .i { width: 18px; height: 18px; flex: none; color: var(--c-accent-hover); }
.vac-kind > summary > span:first-of-type { flex: 1; min-width: 0; }
.vac-kind > summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--c-text-muted); border-bottom: 2px solid var(--c-text-muted); transform: rotate(45deg); margin: 0 4px 4px 0; transition: transform var(--dur-fast) var(--ease); }
.vac-kind[open] > summary::after { transform: rotate(225deg); margin-bottom: -4px; }
.vac-kind > summary:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: var(--radius-md); }
.vac-rows { list-style: none; margin: 0; padding: 0 0 var(--space-2); display: grid; gap: var(--space-2); }
.vac-row { display: grid; gap: var(--space-1); }
.vac-name { margin: 0; font-size: var(--text-sm); }
.win-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.win-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-full); border: 1.5px solid var(--c-accent); background: var(--c-surface); color: var(--c-accent-hover); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.win-chip span { font-weight: 400; font-variant-numeric: tabular-nums; }
.win-chip .i { width: 14px; height: 14px; }
.win-chip:hover:not(:disabled) { background: #e8f1fd; }
.win-chip:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.win-chip:disabled { cursor: not-allowed; background: var(--c-disabled-bg); color: var(--c-disabled-text); border: 1.5px dashed var(--c-disabled-border); }
.win-chip.is-mine { background: var(--c-success-soft); color: var(--c-success); border: 1.5px solid var(--c-success); }
.vac-map { margin: 0 0 var(--space-2); display: inline-flex; align-items: center; gap: 4px; }
.vac-map .i { width: 14px; height: 14px; }

/* одна высота для всех полей, списков и кнопок в формах: 44 пикселя, удобно пальцем и ровно в строку */
select { width: 100%; min-height: var(--tap); padding: 0 36px 0 var(--space-3); border: 1px solid var(--c-border-strong); border-radius: var(--radius-md); background: var(--c-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234e5b6e' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center; color: var(--c-text); font: inherit; -webkit-appearance: none; appearance: none; cursor: pointer; }
select:hover { border-color: var(--c-text-muted); }
select:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); outline: none; }
input:not([type=checkbox]):not([type=radio]):not([type=range]) { min-height: var(--tap); }
form .btn, .order-form .btn, .donate-row .btn, .row-wrap > form .btn { min-height: var(--tap); height: auto; }
.donate-row { align-items: stretch; }

/* тревога: та же плашка, красная рамка, ниже плашки смены */
.ontime.alarm { top: calc(env(safe-area-inset-top, 0px) + var(--space-4) + 64px + 110px); box-shadow: var(--glass-shadow), inset 0 0 0 2px var(--c-danger); }
.warn-line { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--c-danger); margin: 0 0 var(--space-2); }
.warn-line .i { width: 16px; height: 16px; flex: none; margin-top: 2px; }

.boost-list strong.neg { color: var(--c-danger); }

/* если плашка смены скрыта, тревога встаёт на её место */
#ontime[hidden] + .ontime.alarm { top: calc(env(safe-area-inset-top, 0px) + var(--space-4) + 64px); }

/* при открытом окне плашки прячутся, чтобы не мешать */
body:has(.modal:not([hidden])) .ontime { display: none; }

/* на телефоне плашки над нижними вкладками, чтобы не закрывать переключатели панели */
@media (max-width: 760px) {
  /* на телефоне сразу под погодой, выше карты и подсказок, но ниже окон */
  .ontime, .ontime.alarm, #ontime[hidden] + .ontime.alarm { top: calc(var(--safe-t, 0px) + 104px); bottom: auto; width: calc(100% - 32px); }
  #ontime:not([hidden]) + .ontime.alarm { top: calc(var(--safe-t, 0px) + 104px + 128px); }
}

/* случай дня: внизу над вкладками, не мешает тревоге и смене сверху */
.ev-later { min-height: var(--tap); padding-inline: var(--space-2); margin-block: 0; color: var(--c-text-muted); }
.ontime.dayevent { top: auto; bottom: calc(var(--safe-b, 0px) + 96px); box-shadow: var(--glass-shadow), inset 0 0 0 2px var(--c-accent); }
@media (max-width: 760px) { .ontime.dayevent { top: auto; bottom: calc(var(--safe-b, 0px) + 96px); } }
.kids { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-2); }
.kid { display: grid; gap: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--c-border); }
.kid:last-child { border-bottom: 0; }

/* ---------- карьера, союзы, наадан, находки ---------- */
.chip-bad { background: var(--c-danger-soft, #fde8e8); color: var(--c-danger); }
.chip-bday { background: var(--c-gold-soft); color: var(--c-gold-ink); font-weight: 600; }
.chip-union { background: color-mix(in srgb, var(--u) 14%, transparent); color: var(--c-text); }
.chip-union svg, .chip-bday svg { width: 12px; height: 12px; }
.chip-union svg { color: var(--u); }
.rep-line { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.awards, .album-finds { list-style: none; margin: var(--space-2) 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); }
.awards li, .album-finds li { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-md, 8px); background: var(--c-surface-2); color: var(--c-text-muted); font-size: var(--text-xs); min-width: 0; }
.awards li span, .album-finds li span { overflow: hidden; text-overflow: ellipsis; }
.awards li.is-got { background: var(--c-gold-soft); color: var(--c-gold-ink); font-weight: 600; }
.album-finds li { flex-wrap: wrap; }
.album-finds li.is-got { background: var(--c-success-soft); color: var(--c-text); }
.album-finds li.is-got.is-rare { background: var(--c-gold-soft); color: var(--c-gold-ink); }
.album-finds li small { flex-basis: 100%; color: var(--c-text-muted); }
.awards svg, .album-finds svg { flex: none; width: 16px; height: 16px; }
.dir { padding: var(--space-2) 0; border-top: 1px solid var(--c-surface-2); }
.dir:first-of-type { border-top: 0; }
.dir p { margin: 0 0 var(--space-1); }
.dir-report li { align-items: center; }
.union-mine { border-left: 4px solid var(--u); padding-left: var(--space-3); margin-bottom: var(--space-3); }
.union-mine p { margin: 0 0 var(--space-1); }
.union-flag { color: var(--u); margin-right: var(--space-1); }
.union-flag svg { width: 16px; height: 16px; vertical-align: -3px; }
.staff-box { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--c-surface-2); }
.barter-box { display: grid; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md, 8px); background: var(--c-surface-2); }
.barter-box label { display: grid; gap: var(--space-1); }
.barter-row { display: grid; grid-template-columns: 1fr 72px; gap: var(--space-2); }
.barter-row select, .barter-row input { min-width: 0; }
.naadan { padding: var(--space-2) 0; border-top: 1px solid var(--c-surface-2); }
.naadan:first-of-type { border-top: 0; }
.naadan p { margin: 0 0 var(--space-1); }
.naadan-my { margin: var(--space-2) 0; padding: var(--space-3); border-radius: var(--radius-md, 8px); background: var(--c-gold-soft); }
.bracket { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-2); }
.bracket-round { display: grid; align-content: space-around; gap: var(--space-2); min-width: 150px; }
.bracket-m { border-radius: var(--radius-md, 8px); background: var(--c-surface-2); overflow: hidden; }
.bracket-m p { display: flex; justify-content: space-between; gap: var(--space-2); margin: 0; padding: 4px var(--space-2); font-size: var(--text-xs); }
.bracket-m p + p { border-top: 1px solid var(--c-surface); }
.bracket-m p.is-win { font-weight: 700; color: var(--c-success); }
.bracket-m p.is-me { box-shadow: inset 3px 0 0 var(--c-accent); }
.mflag { width: 18px; height: 18px; display: grid; place-items: center; translate: -50% -100%; color: var(--u); filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.5)); pointer-events: none; }
.mflag svg { width: 18px; height: 18px; fill: var(--u); stroke: #fff; stroke-width: 1.6; }