/* Город башен — стиль: минималистичная архитектура + Mirror's Edge (образцы в design/).
   Холодный белый и светло-серый, насыщенные циан/синие акценты, стеклянные полупрозрачные
   панели, тонкая гарнитура, редкий красный акцент. Палитра своя и не зависит от темы Telegram,
   чтобы картинка была одинаковой у всех. Те же цвета на canvas — render.js (TONES, INK, ACCENT…). */
/* Шрифт — Manrope (SIL OFL 1.1, лицензия в fonts/OFL.txt), свой хостинг, без CDN.
   Вариативный файл 200–800, подмножество латиница + кириллица (~32 КБ).
   «Manrope Tab» — только цифры и знаки ±%×.,: с моноширинными (tnum) цифрами для canvas (~3 КБ). */
@font-face { font-family: "Manrope"; src: url("fonts/manrope-latin-cyrillic.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0400-045F,
    U+0490-0491, U+04B0-04B1, U+2000-206F, U+20BD, U+2116, U+2122, U+2190-2193, U+2212, U+2215; }
@font-face { font-family: "Manrope Tab"; src: url("fonts/manrope-tabular-digits.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0025, U+002B-002E, U+0030-003A, U+00D7, U+2212; }
:root {
  --bg: #1a0b33;          /* неоновый закат: глубокий индиго (под canvas) */
  --sky: #c9d4f0;
  --glass: rgba(255,255,255,.80);
  --glass-strong: rgba(255,255,255,.86);
  --ink: #24324a;
  --ink-soft: #6a7894;
  --blue: #1e6cff;
  --cyan: #3fb6ff;
  --ice: #9fd8ff;
  --line: rgba(63,182,255,.45);
  --chip: rgba(184,198,216,.28);
  --red: #ff3b30;
  --gold: #e8b33a;
  --safe-top: var(--tg-content-safe-area-inset-top, 0px);
  --safe-bottom: var(--tg-safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink);
  font: 400 15px/1.35 Manrope, -apple-system, "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: .005em; user-select: none; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; touch-action: none; }
/* свечение (post.js): маленький WebGL-холст растянут на экран и сложен со сценой «экраном» */
#post { pointer-events: none; mix-blend-mode: screen; }
#post[hidden] { display: none; }
#vignette { position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 85% 75% at 50% 45%, rgba(10,0,30,0) 60%, rgba(10,0,30,.38) 100%); }

#hud { position: fixed; left: 10px; right: 10px; top: calc(8px + var(--safe-top));
  padding: 9px 12px 8px; border-radius: 10px; background: var(--glass); color: var(--ink);
  border-top: 1px solid rgba(255,255,255,.9); box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(60,80,130,.08);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#hud .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#hud .small { font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; }
#cityLevel { font-weight: 700; font-size: 14px; letter-spacing: .07em; text-transform: uppercase; }
#population { font-weight: 600; }
#devBadge { background: var(--red); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; letter-spacing: .1em; }
.bar { height: 3px; border-radius: 2px; background: rgba(30,108,255,.12); margin-top: 7px; overflow: hidden; }
#levelBar { height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), var(--cyan)); box-shadow: 0 0 6px var(--cyan); transition: width .4s; }

footer#cityControls { position: fixed; left: 12px; right: 12px; bottom: calc(14px + var(--safe-bottom)); }
button { width: 100%; padding: 13px; margin-top: 8px; border: 0; border-radius: 8px; font: inherit;
  font-size: 15px; font-weight: 600; letter-spacing: .02em; background: var(--glass-strong); color: var(--ink); cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(184,198,216,.6); }
button.primary { background: var(--blue); color: #fff; font-weight: 700;
  box-shadow: 0 0 0 1px rgba(63,182,255,.6), 0 4px 16px rgba(30,108,255,.35); }
#backBtn { position: fixed; right: 12px; bottom: calc(14px + var(--safe-bottom)); width: auto; padding: 8px 12px;
  font-size: 13px; background: var(--glass); color: var(--ink); }
#tapHint { position: fixed; left: 0; right: 0; bottom: calc(70px + var(--safe-bottom)); text-align: center;
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; pointer-events: none;
  text-shadow: 0 0 6px rgba(255,79,216,.9), 0 1px 2px rgba(20,6,40,.8); }

#overlay { position: fixed; inset: 0; background: rgba(20,6,40,.55); display: flex; align-items: center;
  justify-content: center; padding: 20px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
#overlay[hidden], #ovShare[hidden], #ovShop[hidden], #shopBtn[hidden], #dailyBtn[hidden], #shop[hidden], #toast[hidden], #tapHint[hidden], #backBtn[hidden], #devBadge[hidden] { display: none; }
.card { background: var(--glass-strong); color: var(--ink); border-radius: 12px; padding: 22px 20px 18px; width: 100%;
  max-width: 340px; text-align: center; border-top: 2px solid var(--cyan);
  box-shadow: 0 0 24px rgba(63,182,255,.18), 16px 20px 0 rgba(60,80,130,.08); }
.card h2 { margin: 0 0 8px; font-weight: 300; font-size: 26px; letter-spacing: .01em; }
.card h2::after { content: ""; display: block; width: 36px; height: 2px; background: var(--red); margin: 10px auto 0; }
.card p { color: var(--ink-soft); white-space: pre-line; font-size: 14px; }

#toast { position: fixed; left: 16px; right: 16px; top: calc(96px + var(--safe-top)); padding: 10px 14px;
  border-radius: 8px; background: rgba(36,50,74,.86); color: #fff; font-weight: 600; font-size: 14px; text-align: center;
  border-left: 3px solid var(--cyan); pointer-events: none; }

/* ---------- экономика: монетки, магазин, редкости ---------- */
#hud .right { display: flex; gap: 10px; align-items: center; }
#coins { font-weight: 800; color: var(--blue); }
#coinMult { margin-left: 4px; padding: 1px 6px; border-radius: 9px; font-size: 11px; font-weight: 800;
  color: #fff; background: linear-gradient(90deg, #3fb6ff, #1e6cff); letter-spacing: .02em; vertical-align: 1px; }
#coinMult[hidden] { display: none; }
.item .icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(160deg, #eef6ff, #d7e8ff); display: flex; align-items: center; justify-content: center; }
.item .icon svg { width: 26px; height: 26px; display: block; }
#modePicker { display: flex; gap: 6px; margin-bottom: 8px; }
#modePicker[hidden] { display: none; }
#modePicker button { flex: 1; padding: 8px 10px; font-size: 13px; font-weight: 700; opacity: .7; }
#modePicker button[aria-checked="true"] { opacity: 1; background: linear-gradient(90deg, #3fb6ff, #1e6cff); color: #fff; }
.btnRow { display: flex; gap: 8px; }
.btnRow #buildBtn { flex: 1; }
.btnRow #shopBtn { width: auto; padding: 13px 16px; white-space: nowrap; }
.btnRow #dailyBtn { width: auto; padding: 13px 12px; white-space: nowrap; font-size: 13px; }

#shop { position: fixed; inset: 0; z-index: 5; background: rgba(20,6,40,.5); display: flex; align-items: flex-end;
  justify-content: center; }
.shopCard { background: rgba(250,252,255,.93); color: var(--ink); width: 100%; max-width: 480px; max-height: 88vh;
  border-radius: 14px 14px 0 0; padding: 18px 16px calc(12px + var(--safe-bottom)); display: flex; flex-direction: column;
  border-top: 2px solid var(--cyan); box-shadow: 0 -6px 30px rgba(63,182,255,.18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.shopHead { display: flex; justify-content: space-between; align-items: baseline; }
.shopHead h2 { margin: 0; font-size: 24px; font-weight: 300; letter-spacing: .01em; }
#shopCoins { font-weight: 800; font-size: 17px; color: var(--blue); }
.shopNote { margin: 6px 0 10px; font-size: 12px; color: var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11.5px; color: var(--ink-soft); margin-bottom: 6px; }
.chip { font-weight: 600; padding: 3px 9px; border-radius: 6px; background: var(--chip); color: var(--ink); }
#shopList { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; padding-right: 2px; }
#shopList h3 { margin: 12px 0 6px; font-size: 11px; color: var(--ink-soft); font-weight: 700; text-transform: uppercase; letter-spacing: .16em; }
.item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin-bottom: 6px; border-radius: 8px;
  background: rgba(238,243,248,.95); border-left: 3px solid #b8c6d8; }
.item .info { flex: 1; min-width: 0; }
.item .title { font-weight: 700; font-size: 14px; }
.item .lvl { font-weight: 500; color: var(--ink-soft); font-size: 12px; }
.item .eff { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.item button.buy { width: auto; min-width: 84px; margin: 0; padding: 9px 10px; font-size: 14px; }
.item button.buy:disabled { opacity: .45; box-shadow: inset 0 0 0 1px rgba(184,198,216,.6); }
.shopFoot { display: flex; gap: 8px; }
.shopFoot button { flex: 1; }
/* редкости — как RARITY_UI в shop.js: всё сильнее циан/синее свечение, у верхних — белый
   ореол и полоса золотом/красным */
.r1 { border-left-color: #9fd8ff; } .chip.r1 { background: rgba(159,216,255,.35); color: #1f6fa3; }
.r2 { border-left-color: #3fb6ff; } .chip.r2 { background: rgba(63,182,255,.22); color: #1569b0; }
.r3 { border-left-color: #1e6cff; box-shadow: -2px 0 8px -2px rgba(30,108,255,.6); } .chip.r3 { background: rgba(30,108,255,.14); color: #1e5ad8; }
.r4 { border-left-color: #3fb6ff; box-shadow: -2px 0 10px -2px rgba(63,182,255,.8); } .chip.r4 { background: rgba(63,182,255,.18); color: #1569b0; box-shadow: inset 0 -2px 0 #e8b33a; }
.r5 { border-left-color: #4f7fff; box-shadow: -2px 0 12px -2px rgba(79,127,255,.85); } .chip.r5 { background: rgba(79,127,255,.18); color: #2346b8; box-shadow: inset 0 -2px 0 #ff3b30; }
.r6 { border-left-color: #2fc4f0; box-shadow: -2px 0 12px -2px rgba(47,196,240,.9); } .chip.r6 { background: rgba(47,196,240,.2); color: #11789a; box-shadow: inset 0 -2px 0 #e8b33a; }
.r7 { border-left-color: #ffffff; box-shadow: -2px 0 14px -1px rgba(159,216,255,1); } .chip.r7 { background: #fff; color: #1e6cff; box-shadow: 0 0 8px rgba(159,216,255,.9), inset 0 -2px 0 #e8b33a; }
.r8 { border-left-color: #1e6cff; box-shadow: -3px 0 16px -1px rgba(63,182,255,1); } .chip.r8 { background: #1e6cff; color: #fff; box-shadow: 0 0 10px rgba(63,182,255,.9), inset 0 -2px 0 #ff3b30; }

/* ---------- ощущение: кнопка вибрации ---------- */
button.iconBtn { width: 28px; height: 28px; padding: 0; margin: 0; border-radius: 8px; font-size: 14px;
  line-height: 28px; background: var(--glass-strong); }
button.iconBtn[aria-pressed="false"] { opacity: .5; }
#hud .right > span { white-space: nowrap; }
#cityLevel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- неоновый закат: стекло светлое и плотнее, чтобы читалось на тёмном небе ---------- */
#hud { box-shadow: 0 1px 0 var(--line), 0 8px 28px rgba(10,0,30,.45); }
button:disabled { opacity: .55; cursor: default; }
button.primary:disabled { background: #6b6f8f; box-shadow: none; }

/* ---------- карта города: панель выбранного участка ---------- */
#plotPanel { padding: 9px 12px 8px; border-radius: 10px; background: var(--glass-strong); color: var(--ink);
  border-top: 2px solid var(--cyan); box-shadow: 0 8px 28px rgba(10,0,30,.45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ppHead { display: flex; align-items: center; gap: 8px; min-width: 0; }
#ppDot { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--cyan);
  box-shadow: 0 0 0 2px #fff, 0 0 8px rgba(0,0,0,.25); }
#ppOwner { font-weight: 800; font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#ppTag { margin-left: auto; flex: none; font-size: 11px; font-weight: 700; color: var(--ink-soft);
  padding: 2px 7px; border-radius: 6px; background: var(--chip); border: 1.5px solid transparent; white-space: nowrap; }
#ppInfo { font-size: 13px; font-weight: 600; margin-top: 4px; }
#ppNote { font-size: 12px; color: var(--ink-soft); margin-top: 2px; min-height: 16px; }
#ppNote.bad { color: #d0201a; font-weight: 600; }
#ppNote.warn { color: #b8560b; font-weight: 600; }

/* ---------- свои значки (icons.js) вместо эмодзи ---------- */
.ico { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; display: inline-block; }
button .ico { width: 1.2em; height: 1.2em; }
#cityLevel .ico { color: var(--blue); }
#hapticBtn .ico, #soundBtn .ico { width: 17px; height: 17px; vertical-align: middle; color: var(--ink); }
#ppNote .ico { width: 1.05em; height: 1.05em; }

/* ---------- список игроков на карте ---------- */
#players { position: fixed; left: 10px; top: 120px; z-index: 3; }
#players[hidden], #playersList[hidden] { display: none; }
#playersBtn { width: auto; margin: 0; padding: 6px 10px; font-size: 13px; font-weight: 800; display: flex; gap: 5px;
  align-items: center; background: var(--glass-strong); border-radius: 9px; box-shadow: 0 4px 16px rgba(10,0,30,.35), inset 0 0 0 1px rgba(184,198,216,.6); }
#playersBtn .ico { width: 16px; height: 16px; }
#playersBtn[aria-expanded="true"] > span:last-child .ico { transform: rotate(180deg); }
#playersList { margin-top: 6px; width: min(320px, calc(100vw - 20px)); overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: rgba(250,252,255,.95); border-radius: 12px; padding: 4px; border-top: 2px solid var(--cyan);
  box-shadow: 0 12px 34px rgba(10,0,30,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.prow { display: flex; align-items: center; gap: 9px; width: 100%; margin: 0; padding: 6px 8px; border-radius: 8px;
  background: transparent; box-shadow: none; font-size: 14px; font-weight: 600; text-align: left; }
.prow + .prow { margin-top: 1px; }
.prow.on { background: rgba(63,182,255,.16); box-shadow: inset 3px 0 0 var(--cyan); }
.prow.all { font-weight: 700; color: var(--blue); }
.prow .av { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; color: #fff;
  font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0,0,0,.25); }
.prow .av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prow .pname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .ptag { flex: none; font-size: 10.5px; font-weight: 800; color: #fff; background: var(--red); padding: 1px 6px; border-radius: 6px; letter-spacing: .04em; }
.prow .pfl { flex: none; font-weight: 800; color: var(--ink); font-size: 13px; }
.prow .pfl.bankrupt { color: #d0201a; font-size: 12px; display: flex; align-items: center; gap: 3px; }
.prow .pfl.bankrupt .ico { width: 18px; height: 18px; }

/* сезон 2: отсчёт до «Ядерки» — тонкая красная полоса под шапкой */
#nukeBanner { position: fixed; left: 12px; right: 12px; top: 112px; z-index: 6; padding: 6px 10px;
  background: rgba(255,255,255,0.94); color: #1b1530; border-left: 3px solid #ff2e4d; border-radius: 6px;
  font: 700 12px/1.3 var(--font-ui, sans-serif); letter-spacing: 0.02em; pointer-events: none; }

/* прототип «мелкие блоки» */

/* =====================================================================================
   «Урбан-реализм» (стиль V2, styles-modern-v2): вечерний город — тёмное стекло панелей,
   тёплый кремовый текст, одна главная кнопка-пилюля, приглушённый неон. Те же цвета на
   canvas — URBAN в urban.js. В играх (body[data-mode]) шапка города скрыта, HUD минимальный.
   ===================================================================================== */
:root {
  --bg: #232A45; --glass: rgba(30,34,56,.86); --glass-strong: rgba(30,34,56,.93);
  --ink: #F2EEE6; --ink-soft: #C9C3CF; --blue: #F2EEE6; --cyan: #7FE3E0; --ice: #7CC4FF;
  --line: rgba(127,227,224,.25); --chip: rgba(242,238,230,.10); --gold: #E9B640; --lamp: #FFC877;
}
html, body { background: linear-gradient(#232A45, #5A4A6A 55%, #C7876A); }
#vignette { background: radial-gradient(ellipse 90% 80% at 50% 45%, rgba(12,14,24,0) 62%, rgba(12,14,24,.35) 100%); }
#hud { background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  color: var(--ink); padding: 6px 10px; }
#cityLevel { font-size: 20px; font-weight: 800; letter-spacing: .01em; text-transform: none; text-shadow: 0 1px 8px rgba(12,14,24,.4); }
#hud .small { color: var(--ink-soft); }
.bar { background: rgba(242,238,230,.16); }
#levelBar { background: linear-gradient(90deg, #7CC4FF, #8FE3D2, #F4E27A, #FFB65C, #FF7A4A, #FF4D6D); box-shadow: none; }
#coins { color: var(--lamp); }
#coinMult { background: rgba(255,200,119,.18); color: var(--lamp); }
body[data-mode="build"] #hud .small, body[data-mode="build"] #hud .bar, body[data-mode="build"] #cityLevel,
body[data-mode="blocks"] #hud .small, body[data-mode="blocks"] #hud .bar, body[data-mode="blocks"] #cityLevel,
body[data-mode="over"] #hud .small, body[data-mode="over"] #hud .bar { display: none; }
body[data-mode="build"] #hud, body[data-mode="blocks"] #hud { left: auto; padding: 4px 8px; border-radius: 16px; background: rgba(30,34,56,.55); }

button { background: rgba(30,34,56,.78); color: var(--ink); border-radius: 27px; box-shadow: inset 0 0 0 1px rgba(242,238,230,.16); }
button.primary { background: #F2EEE6; color: #1E2340; font-weight: 800; font-size: 17px; padding: 15px;
  box-shadow: 0 6px 20px rgba(12,14,24,.35); }
#modePicker button { border-radius: 18px; opacity: .8; }
#modePicker button[aria-checked="true"] { background: rgba(127,227,224,.22); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(127,227,224,.6); }
.btnRow #dailyBtn, .btnRow #shopBtn { background: rgba(30,34,56,.6); }
#backBtn { background: rgba(30,34,56,.7); color: var(--ink); border-radius: 18px; }
#tapHint { color: var(--ink-soft); text-shadow: 0 1px 2px rgba(12,14,24,.8); letter-spacing: .06em; text-transform: none; font-weight: 600; }

#plotPanel { background: var(--glass-strong); color: var(--ink); border-radius: 16px; box-shadow: 0 6px 20px rgba(12,14,24,.3); }
#ppTag { background: rgba(242,238,230,.10); color: var(--ink-soft); }
#ppNote.bad { color: #FF7A4A; } #ppNote.warn { color: #FFB65C; }

#overlay { background: rgba(12,14,24,.55); }
.card { background: var(--glass-strong); color: var(--ink); border-radius: 22px; border-top: 0;
  box-shadow: 0 14px 40px rgba(12,14,24,.45), inset 0 0 0 1px rgba(242,238,230,.08); }
.card h2 { font-weight: 800; font-size: 24px; }
.card h2::after { background: linear-gradient(90deg, #7CC4FF, #F4E27A, #FF7A4A, #FF4D6D); width: 64px; height: 3px; border-radius: 2px; }
.card p { color: var(--ink-soft); }
#toast { background: rgba(30,34,56,.92); color: var(--ink); border-left: 0; border-radius: 18px; }
.shopCard { background: rgba(30,34,56,.96); color: var(--ink); border-top: 0; border-radius: 22px 22px 0 0; }
#shopCoins { color: var(--lamp); }
.item { background: rgba(242,238,230,.06); border-left-color: rgba(242,238,230,.25); }
.item .icon { background: rgba(242,238,230,.10); }
#players button, #playersList { background: var(--glass-strong); color: var(--ink); }
/* карточка итога: башня попытки (полосы = этажи цвета качества) и два крупных числа */
#ovHero { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 6px 10px; margin: 6px 0 10px; }
#ovHero[hidden] { display: none; }
#ovTower { grid-column: 1 / 3; justify-self: center; width: 74px; display: flex; flex-direction: column; gap: 2px;
  padding: 4px 6px; background: #4E6378; border-radius: 3px 3px 0 0; box-shadow: 10px 0 0 #2C3B4C, 0 10px 24px rgba(255,122,74,.18); }
#ovTower i { display: block; height: 4px; border-radius: 1px; }
.ovNum { display: flex; flex-direction: column; text-align: left; }
.ovNum.right { text-align: right; }
.ovNum b { font-size: 34px; font-weight: 800; line-height: 1; color: var(--ink); }
.ovNum.right b { font-size: 22px; }
.ovNum span { font-size: 11.5px; color: var(--ink-soft); }

/* =====================================================================================
   Минимальный HUD города (hud.js): карта — на весь экран, интерфейс парит поверх по делу.
   Тонкая шапка + линия уровня · чипы игроков/соперника · пилюля «строит сейчас» ·
   карточка участка только при выборе · тонкий док: значки + одна кнопка «Строить».
   Селекторы с body — чтобы перебить старые правила ниже по файлу.
   ===================================================================================== */
body #hud { left: 8px; right: 8px; top: calc(6px + var(--safe-top)); padding: 2px 4px 0; z-index: 4; }
#hud > .row { min-height: 34px; }
#levelBtn { width: auto; min-width: 0; flex: 0 1 auto; margin: 0; padding: 4px 6px 4px 2px; background: none; box-shadow: none;
  border-radius: 10px; color: var(--ink); display: flex; align-items: center; gap: 4px; overflow: hidden; }
#levelBtn::after { content: ""; flex: none; width: 6px; height: 6px; margin: 0 0 3px 3px; border: solid var(--ink-soft);
  border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); transition: transform .2s; }
#levelBtn[aria-expanded="true"]::after { transform: rotate(-135deg); margin-bottom: -2px; }
body #cityLevel { font-size: 17px; letter-spacing: 0; }
#hud .bar { height: 2px; margin: 3px 2px 0; }
#hud .right { gap: 7px; }
body #coins { font-size: 15px; }
#hud .iconBtn { width: 30px; height: 30px; border-radius: 15px; background: rgba(30,34,56,.55); box-shadow: inset 0 0 0 1px rgba(242,238,230,.14); }
#profileBtn { position: relative; overflow: hidden; display: grid; place-items: center; }
#profileBtn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
#menuBtn .ico, #profileBtn .ico { width: 18px; height: 18px; color: var(--ink); }
/* выпадашки шапки: подробности уровня и меню звука/вибрации */
#levelDetail, #hudMenu { position: absolute; top: calc(100% + 6px); padding: 8px 12px; border-radius: 16px;
  background: var(--glass-strong); color: var(--ink); box-shadow: 0 10px 28px rgba(12,14,24,.45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 12.5px; }
#levelDetail { left: 0; max-width: 300px; }
#levelDetail .ldRow { display: flex; gap: 10px; align-items: center; font-weight: 700; }
#levelDetail #population { font-size: 15px; font-weight: 800; }
#levelDetail #levelHint, #levelDetail #buildStats { color: var(--ink-soft); }
#levelDetail #buildStats { margin-top: 3px; }
#hudMenu { right: 0; display: flex; flex-direction: column; gap: 4px; padding: 6px; min-width: 190px; }
#hudMenu button.iconBtn { width: 100%; height: auto; padding: 8px 10px; border-radius: 12px; display: flex; align-items: center; gap: 10px;
  text-align: left; font-size: 13px; font-weight: 700; line-height: 1.25; background: rgba(242,238,230,.06); box-shadow: none; }
#hudMenu button.iconBtn::after { content: attr(title); }
#hudMenu button.iconBtn[aria-pressed="false"] { opacity: .65; }
#levelDetail[hidden], #hudMenu[hidden] { display: none; }
body:not([data-mode="city"]):not([data-mode="shop"]) #levelBtn, body:not([data-mode="city"]):not([data-mode="shop"]) #profileBtn { display: none; }
body[data-mode="build"] #hud, body[data-mode="blocks"] #hud { padding: 2px 4px; }

/* чипы над картой: игроки (слева, citymap.js ставит top), соперник (справа), «строит сейчас» (по центру ниже) */
#playersBtn { padding: 5px 9px; font-size: 12.5px; border-radius: 15px; }
body #rival { position: fixed; z-index: 3; right: 10px; top: calc(var(--hud-b, 48px) + 8px); max-width: calc(100vw - 120px);
  margin: 0; padding: 5px 11px; border-radius: 15px; border-color: rgba(127,227,224,.35); background: var(--glass-strong); box-shadow: 0 4px 16px rgba(10,0,30,.35); }
#rival .rvChip { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#rival .rvChip b { color: #7FE3E0; } #rival .rvChip span { color: #FFC877; text-transform: uppercase; }
#rival .rvFull { display: none; }
#rival.open { padding: 9px 12px; max-width: 260px; }
#rival.open .rvChip { display: none; } #rival.open .rvFull { display: block; }
#rival.open .rvFull::after { content: "Рейтинг ›"; display: block; margin-top: 4px; font-size: 11px; font-weight: 800; color: #7FE3E0; }
body:not([data-mode="city"]) #rival, body:not([data-mode="city"]) #liveStrip { display: none; }
body #liveStrip { position: fixed; z-index: 3; left: 50%; transform: translateX(-50%); top: calc(var(--hud-b, 48px) + 48px);
  margin: 0; align-items: center; gap: 5px; max-width: calc(100vw - 40px); }
body .liveRow { width: auto; margin: 0; padding: 4px 4px 4px 10px; gap: 7px; border-radius: 16px; font-size: 12.5px;
  box-shadow: 0 4px 16px rgba(10,0,30,.35); white-space: nowrap; }
body .liveRow span { overflow: hidden; text-overflow: ellipsis; }
body .liveRow .dot { flex: none; width: 7px; height: 7px; }
body .liveRow em { padding: 3px 9px; border-radius: 12px; font-size: 12px; }

/* низ: карточка участка + док. Пустые места пропускают касания на карту */
body footer#cityControls { left: 10px; right: 10px; bottom: calc(10px + var(--safe-bottom)); pointer-events: none; }
footer#cityControls > * { pointer-events: auto; }
body #plotPanel { margin-bottom: 8px; padding: 8px 12px 7px; border-top: 0; border-radius: 16px; box-shadow: 0 6px 20px rgba(12,14,24,.35), inset 0 0 0 1px rgba(242,238,230,.08); }
#plotPanel[hidden] { display: none; }
body #ppOwner { font-size: 13px; }
body #ppTag { font-size: 10.5px; padding: 1px 6px; }
body #ppInfo { font-size: 12.5px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body #ppNote { font-size: 11.5px; min-height: 0; margin-top: 2px; }
#ppNote:empty { display: none; }
body #sellBtn { margin: 0 0 8px; padding: 9px; font-size: 13px; border-radius: 22px; }
#dock { display: flex; gap: 6px; align-items: center; }
#dock .dockBtn { position: relative; flex: none; width: 44px; height: 44px; margin: 0; padding: 0; border-radius: 22px;
  display: grid; place-items: center; background: var(--glass-strong); box-shadow: 0 4px 16px rgba(10,0,30,.35), inset 0 0 0 1px rgba(242,238,230,.14); }
#dock .dockBtn .ico { width: 22px; height: 22px; color: var(--ink); }
#dock .dockBtn[hidden] { display: none; }
#dock .badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  font: 800 10.5px/18px Manrope, system-ui, sans-serif; text-align: center; color: #1E2340; background: #FFC877; box-shadow: 0 0 0 2px rgba(30,34,56,.9); }
#ranksBtn .badge { background: #7FE3E0; }
#buildFab { flex: 1; min-width: 0; height: 50px; display: flex; align-items: center; border-radius: 26px; background: #F2EEE6;
  box-shadow: 0 6px 20px rgba(12,14,24,.4); overflow: hidden; }
#buildFab #buildBtn { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0 6px 0 10px; background: none; box-shadow: none; border-radius: 0;
  font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#buildFab:has(#buildBtn:disabled) { background: #8d8a98; }
#buildFab #buildBtn .ico { display: none; }          /* кремовая пилюля и так «главная»: место — под текст */
body #modePicker { flex: none; margin: 0 6px 0 0; height: 40px; display: flex; align-items: center; gap: 0; }
body #modePicker[hidden] { display: none; }
#modePicker button { display: none; }
body #modePicker button[aria-checked="true"] { display: flex; align-items: center; gap: 4px; width: auto; height: 40px; margin: 0; padding: 0 9px;
  border-radius: 20px; font-size: 11.5px; font-weight: 800; opacity: 1; color: #F2EEE6; background: #2A3050; box-shadow: none; }
#modePicker button .ico { width: 14px; height: 14px; }
body #nukeBanner { top: calc(var(--hud-b, 48px) + 84px); }

/* Градус этажа в стройке: 7 делений «Иней → Белый жар», текущее подсвечено своим цветом (--heat) */
#heatMeter { position: fixed; left: 10px; top: calc(8px + var(--safe-top)); z-index: 5; display: none;
  align-items: center; gap: 8px; padding: 6px 10px 6px 8px; border-radius: 16px; background: rgba(30,34,56,.55);
  color: var(--ink); pointer-events: none; max-width: 62vw; }
body[data-mode="build"] #heatMeter:not([hidden]), body[data-mode="blocks"] #heatMeter:not([hidden]) { display: flex; }
body[data-mode="blocks"] #heatMeter { top: calc(78px + var(--safe-top)); }   /* под счётчиком яруса */
#heatCells { display: flex; flex-direction: column-reverse; gap: 2px; }
#heatCells i { display: block; width: 14px; height: 4px; border-radius: 2px; opacity: .22; }
#heatCells i.on { opacity: .85; }
#heatCells i.cur { opacity: 1; width: 18px; box-shadow: 0 0 8px var(--heat); }
#heatMeter .heatTxt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
#heatName { color: var(--heat, #7CC4FF); font-size: 15px; font-weight: 800; text-shadow: 0 0 10px rgba(12,14,24,.6); }
#heatText { font-size: 11px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Темп-комбо: под шкалой градуса слева — «Темп ×N», бонус и тающая полоска окна на бросок (только «Классика») */
#tempoMeter { position: fixed; left: 10px; top: calc(60px + var(--safe-top)); z-index: 5; display: none; width: 176px;
  padding: 6px 10px 7px; border-radius: 14px; background: rgba(30,34,56,.55); color: var(--ink); pointer-events: none;
  --tempo: #7FE3E0; }
body[data-mode="build"] #tempoMeter:not([hidden]), body[data-mode="watch"] #tempoMeter:not([hidden]) { display: block; }
body[data-mode="watch"] #tempoMeter { top: calc(114px + env(safe-area-inset-top)); }   /* под шапкой трансляции */
body[data-mode="watch"] #tempoMeter .tmBar { display: none; }
#tempoMeter .tmTop { display: flex; align-items: baseline; gap: 5px; line-height: 1.1; white-space: nowrap; }
#tempoMeter .tmTop b { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
#tempoNum { color: var(--tempo) !important; font-size: 17px !important; letter-spacing: 0 !important; text-shadow: 0 0 10px rgba(127,227,224,.45); }
#tempoText { font-size: 11px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#tempoMeter .tmBar { margin-top: 5px; height: 4px; border-radius: 2px; background: rgba(242,238,230,.14); overflow: hidden; }
#tempoBar { display: block; height: 100%; width: 100%; transform-origin: left center; border-radius: 2px;
  background: linear-gradient(90deg, #7CC4FF, var(--tempo)); }
#tempoMeter.hot { --tempo: #F4E27A; }
#tempoMeter.hot #tempoBar { background: linear-gradient(90deg, #FFB65C, #F4E27A); box-shadow: 0 0 8px rgba(244,226,122,.6); }
#tempoMeter.max { --tempo: #FF7A4A; }
#tempoMeter.max #tempoBar { background: linear-gradient(90deg, #FF4D6D, #FF7A4A, #F4E27A); }
#tempoMeter.burnt { opacity: .6; }
#tempoMeter.burnt #tempoNum { text-decoration: line-through; }
#tempoMeter.bump { animation: tempoBump .35s ease-out; }
@keyframes tempoBump { 0% { transform: scale(1); } 40% { transform: scale(1.07); } 100% { transform: scale(1); } }

#shop .shopHeatNote { font-size: 12px; line-height: 1.35; color: var(--ink-soft); margin: -2px 2px 8px;
  padding: 6px 10px; border-radius: 12px; background: linear-gradient(90deg, rgba(124,196,255,.10), rgba(255,122,74,.12)); }
#shop .item .band { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }

/* ---------------------------------------------------------------- рейтинг и профиль (ranks.js)
   «Урбан-реализм»: тёмные карточки на вечернем небе, кремовая активная вкладка, неон «ты». */
#ranks { position: fixed; inset: 0; z-index: 8; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg,#22243a 0%,#2b2a44 45%,#4a3550 78%,#8a5a58 100%); color: #EEF0F7;
  font-family: "Manrope", system-ui, sans-serif; font-variant-numeric: tabular-nums;
  padding: calc(var(--safe-top) + 10px) 0 calc(var(--safe-bottom) + 24px); }
#ranks small { display: block; font-size: 11px; color: #8b91ad; font-weight: 600; }
#ranks button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
.rkTop { display: flex; align-items: center; gap: 10px; padding: 4px 16px 6px; }
.rkTtl { flex: 1; font-size: 22px; font-weight: 800; }
.rkX { width: 34px; height: 34px; border-radius: 12px; background: #1b1e30 !important; border: 1px solid #ffffff14 !important; font-weight: 800; }
.rkPill { background: #1b1e30 !important; border: 1px solid #ffffff14 !important; border-radius: 14px; padding: 6px 10px; font-weight: 700; font-size: 12px; }
.rkTabs { margin: 6px 14px 0; display: flex; background: #161828; border-radius: 16px; padding: 4px; border: 1px solid #ffffff10; }
.rkTab { flex: 1; padding: 9px 0; border-radius: 12px; font-weight: 700 !important; font-size: 13px !important; color: #9aa0bd !important; }
.rkTab.on { background: #F3ECE0 !important; color: #1b1e30 !important; }
.rkChips { margin: 10px 14px 0; display: flex; gap: 6px; }
.rkChip { padding: 6px 12px; border-radius: 20px; font-size: 12px !important; font-weight: 700 !important; border: 1px solid #ffffff22 !important; color: #c9cde0 !important; }
.rkChip.on { border-color: #7FE3E0 !important; color: #7FE3E0 !important; box-shadow: 0 0 12px #7FE3E055; }
.rkCard { background: #1c1f31ee; border: 1px solid #ffffff12; border-radius: 18px; margin: 10px 14px; padding: 12px 14px; }
.rkLoad, .rkEmpty, .rkNote { text-align: center; color: #c9cde0; font-size: 13px; padding: 18px; }
.rkNote { padding: 8px 18px 0; font-size: 11px; color: #8b91ad; }
.rkEmpty:empty { display: none; }
.rkZone { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.rkPod { position: relative; height: 250px; margin: 4px 14px 0; display: flex; justify-content: center; align-items: flex-end; gap: 14px;
  border-bottom: 2px solid #7FE3E0; box-shadow: 0 8px 10px -8px #7FE3E0; }
.rkPodC { width: 96px; text-align: center; cursor: pointer; }
.rkPodAv { position: relative; margin: 0 auto 6px; width: 62px; height: 44px; border-radius: 8px; border: 2px solid; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; }
.rkPodAv span { position: absolute; right: -8px; top: -8px; width: 20px; height: 20px; border-radius: 10px; color: #1b1e30; font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.rkPodT { margin: 0 auto; width: 42px; border-radius: 3px 3px 0 0; }
.rkPodN { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rkPodV { font-size: 13px; font-weight: 800; }
.rkList { padding: 4px 12px; }
.rkRow { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid #ffffff0d; font-size: 14px; cursor: pointer; }
.rkRow:last-child { border-bottom: 0; }
.rkRow.me { background: linear-gradient(90deg,#7FE3E022,#7FE3E008); border: 1px solid #7FE3E088; border-radius: 14px; padding: 8px 8px; margin: 2px -6px; }
.rkRk { width: 24px; color: #8b91ad; font-weight: 800; text-align: right; flex: none; }
.rkAv { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: #1b1e30; flex: none; }
.rkAv.big { width: 78px; height: 78px; border-radius: 20px; font-size: 34px; color: #fff; border: 2px solid #FFF6E6; box-shadow: 0 0 20px #FFF6E688; }
.rkNm { flex: 1; min-width: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rkNm small { text-transform: none; letter-spacing: 0; }
.rkVal { font-weight: 800; text-align: right; }
.rkGap { text-align: center; color: #8b91ad; line-height: 10px; }
.rkRival { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; }
.rkRival > b { font-size: 26px; color: #7FE3E0; }
.rkBtn { display: block; margin: 14px 14px 0; width: calc(100% - 28px); height: 52px; border-radius: 26px; background: #F3ECE0 !important; color: #1b1e30 !important; font-weight: 800 !important; font-size: 16px !important; }
.rkCity { display: grid; grid-template-columns: 24px 1fr auto; gap: 4px 10px; align-items: center; padding: 9px 2px; border-bottom: 1px solid #ffffff0d; }
.rkCity:last-child { border-bottom: 0; }
.rkCity.me { background: #7FE3E012; border: 1px solid #7FE3E066; border-radius: 14px; padding: 9px 8px; margin: 2px -6px; }
.rkCityN b { font-size: 14px; }
.rkCityBar { grid-column: 2 / 4; display: flex; align-items: center; gap: 8px; }
.rkRoster i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 3px; }
.rkBar { flex: 1; height: 6px; border-radius: 3px; background: #ffffff12; overflow: hidden; }
.rkBar i { display: block; height: 100%; border-radius: 3px; }
.rkHow p { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: #c9cde0; }
.rkHero { height: 96px; padding: 0 16px; background: linear-gradient(180deg,#3b3060,#22243a00); }
.rkWho { display: flex; gap: 12px; align-items: flex-end; margin: -36px 18px 0; }
.rkName { font-size: 21px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.rkStats { display: flex; gap: 8px; margin: 12px 14px 0; }
.rkStats .rkCard { margin: 0; flex: 1; padding: 9px 10px; }
.rkStats b { font-size: 17px; font-weight: 800; }
.rkShow, .rkPrest { display: flex; align-items: center; gap: 12px; }
.rkShow b, .rkPrest b { display: block; font-weight: 800; }
.rkShowI { width: 46px; height: 46px; border-radius: 12px; color: #1b1e30; font-weight: 900; display: flex; align-items: center; justify-content: center; flex: none; }
.rkPrestFloor { width: 46px; height: 46px; border-radius: 10px; flex: none; position: relative; overflow: hidden;
  background: linear-gradient(135deg,#8E5BD8,#B67BD0 55%,#E7A893); box-shadow: 0 0 18px #b67bd088; animation: rkPearl 6s ease-in-out infinite alternate; }
.rkPrestFloor::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(105deg,transparent,rgba(255,240,248,.7),transparent); animation: rkSheen 3.6s linear infinite; }
@keyframes rkSheen { to { left: 120%; } }
@keyframes rkPearl { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(-18deg) brightness(1.08); } }
.rkHead { display: flex; justify-content: space-between; align-items: baseline; }
.rkGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.rkAch { background: #ffffff0a; border: 1px solid #ffffff14; border-radius: 14px; padding: 9px 4px; text-align: center; opacity: .45; }
.rkAch.got { opacity: 1; }
.rkAchI { margin: 0 auto 5px; width: 36px; height: 36px; border-radius: 11px; background: #2a2d42; color: #1b1e30; font-weight: 900; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.rkAchN { font-size: 11px; font-weight: 800; }
.rkBadges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rkBadge { padding: 5px 10px; border-radius: 12px; background: #ffffff0c; border: 1px solid #ffffff18; font-size: 12px; font-weight: 700; color: #FFC877; }
.rkBadge.prest { color: #F2D4E6; border-color: #b67bd088; background: linear-gradient(90deg,#8E5BD833,#E7A89322); }
/* виджет соперника и продажа высотки над кнопками города */
#rival { margin: 0 0 8px; padding: 9px 12px; border-radius: 14px; background: rgba(28,31,49,.92); border: 1px solid #7FE3E066;
  box-shadow: 0 0 24px #7FE3E022; color: #EEF0F7; font-family: "Manrope", system-ui, sans-serif; cursor: pointer; }
#rival .rkZone { color: #7FE3E0; }
#rival .rvMain { font-size: 14px; font-weight: 700; margin-top: 2px; }
#rival .rvMain b { color: #7FE3E0; font-size: 16px; } #rival .rvMain span { text-transform: uppercase; color: #FFC877; }
#rival .rvSub { font-size: 11px; color: #8b91ad; }
#sellBtn { display: block; width: 100%; margin: 0 0 8px; padding: 12px; border-radius: 16px; border: 0; font-weight: 800; color: #fff;
  background: linear-gradient(110deg,#8E5BD8,#B67BD0 55%,#E7A893); box-shadow: 0 0 22px #b67bd088; }
#sellBtn[hidden], #rival[hidden], #ranks[hidden] { display: none; }
.rkBack { display: inline-block; width: auto; margin-top: 6px; }

/* ---------------- Режим зрителя (watch.js) ---------------- */
body[data-mode="watch"] #hud { display: none; }
#liveStrip { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
#liveStrip[hidden] { display: none; }
.liveRow { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 12px; border-radius: 18px; text-align: left;
  background: var(--glass-strong); font-size: 14px; }
.liveRow span { flex: 1; color: var(--ink-soft); } .liveRow b { color: var(--ink); }
.liveRow em { font-style: normal; font-weight: 800; background: #F2EEE6; color: #1E2340; padding: 6px 12px; border-radius: 14px; }
.liveRow .dot, #whLive::first-letter { color: #FF4D6D; }
.liveRow .dot { width: 9px; height: 9px; border-radius: 50%; background: #FF4D6D; animation: livePulse 1.2s ease-in-out infinite; }
@keyframes livePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,77,109,.6); } 50% { box-shadow: 0 0 0 6px rgba(255,77,109,0); } }
#watchHead { position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 10px; right: 10px; z-index: 6; display: grid;
  grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px;
  padding: 10px 12px; border-radius: 18px; background: var(--glass); color: var(--ink); box-shadow: 0 6px 20px rgba(12,14,24,.3); }
#watchHead[hidden], #watchBar[hidden], #liveEyes[hidden] { display: none; }
#whAva { grid-row: 1 / 3; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font: 800 20px/1 inherit;
  font-style: normal; background: linear-gradient(135deg, #FF7A4A, #8B5CF6); background-size: cover; background-position: center; }
#watchHead b { display: block; font-size: 17px; font-weight: 800; }
#watchHead small { color: var(--ink-soft); font-size: 12px; }
#whLive { justify-self: end; color: #FF4D6D; font-weight: 800; font-size: 12px; letter-spacing: .04em; }
#whEyes { grid-column: 3; justify-self: end; }
#watchBar { position: fixed; left: 10px; right: 10px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 6;
  display: flex; flex-direction: column; gap: 8px; }
#whViewers { align-self: flex-start; padding: 6px 12px; border-radius: 14px; background: var(--glass); color: var(--ink); font-size: 13px; font-weight: 700; }
.whRow { display: flex; gap: 8px; align-items: stretch; }
#whReacts { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 5px; border-radius: 20px; background: var(--glass); }
#whReacts .react { position: relative; font-size: 23px; line-height: 1; padding: 5px 0; margin: 0; border-radius: 12px; background: transparent; box-shadow: none;
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: transform .08s; }
#whReacts .react.hit { transform: scale(1.28); background: rgba(242,238,230,.10); }
#whReacts .react b { position: absolute; top: -5px; right: 2px; min-width: 16px; padding: 1px 4px; border-radius: 8px;
  font-size: 10px; font-weight: 800; line-height: 13px; font-style: normal;
  background: #FF4D6D; color: #fff; pointer-events: none; }
.whRow #whBack { align-self: stretch; }
#whBack { flex: 0 0 auto; width: auto; padding: 0 16px; background: #F2EEE6; color: #1E2340; font-weight: 800; }
#liveEyes { position: fixed; top: calc(52px + env(safe-area-inset-top)); right: 10px; z-index: 6; padding: 6px 12px; border-radius: 14px;
  background: var(--glass); color: var(--ink); font-size: 13px; font-weight: 700; }
#reactLayer { position: fixed; inset: 0; pointer-events: none; z-index: 7; }
.floatReact { position: absolute; font-size: 34px; display: flex; flex-direction: column; align-items: center;
  animation: reactUp 2.4s ease-out forwards; will-change: transform, opacity; }
.floatReact.small { font-size: 26px; }
.floatReact.sway { animation-name: reactUpSway; }
@keyframes reactUpSway { 0% { transform: translate(0,0) scale(.6); opacity: 0; } 12% { transform: translate(-6px,-10px) scale(1.1); opacity: 1; }
  45% { transform: translate(10px,-110px) scale(1); opacity: 1; } 100% { transform: translate(-8px,-260px) scale(.95); opacity: 0; } }
.floatReact small { font-size: 10px; font-weight: 700; color: var(--ink); background: rgba(30,34,56,.7); padding: 1px 6px; border-radius: 8px; }
@keyframes reactUp { 0% { transform: translateY(0) scale(.6); opacity: 0; } 12% { transform: translateY(-10px) scale(1.1); opacity: 1; }
  100% { transform: translateY(-260px) scale(1); opacity: 0; } }
/* «Кто видит стройку» — компактный значок под HUD справа (не над шкалой градуса слева), рядом «👁 N смотрят» */
#liveShareBtn { position: fixed; top: calc(52px + env(safe-area-inset-top)); right: 10px; z-index: 6; width: 34px; height: 34px;
  padding: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(30,34,56,.55); }
#liveShareBtn .ico { width: 18px; height: 18px; color: var(--ink); }
#liveShareBtn.off .ico { color: var(--ink-soft); opacity: .7; }
body[data-mode="build"] #liveEyes { right: 50px; padding: 8px 12px; max-width: calc(100vw - 230px); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
#liveShareBtn[hidden] { display: none; }

/* ---------- вход в профиль: шапка, список игроков, панель участка (ranks.js openProfile) ---------- */
#hud:has(~ #cityControls[hidden]) #profileBtn { display: none; }      /* в стройке и у зрителя шапка не тесная */
#profileBtn .ico { width: 18px; height: 18px; vertical-align: middle; }
#ppProfile { flex: none; width: auto; margin: 0; padding: 3px 9px; border-radius: 10px; font-size: 11.5px; font-weight: 800;
  background: rgba(242,238,230,.12); color: var(--ink); box-shadow: none; display: inline-flex; align-items: center; gap: 3px; }
#ppProfile .ico { width: 14px; height: 14px; }
#ppProfile[hidden] { display: none; }
.prow .ppin { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin: -4px -4px -4px 0; border-radius: 8px; color: var(--ink-soft); }
.prow .ppin:active { background: rgba(63,182,255,.18); }
.prow .ppin .ico { width: 18px; height: 18px; }
.rkReRow { display: flex; gap: 8px; margin-top: 10px; }
.rkReTop { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 0; border-radius: 14px; background: #ffffff0c; font-size: 22px; }
.rkReTop small { font-size: 13px; font-weight: 800; color: #FFC877; }