/* =====================================================================
   theme.css — ТЕМА «Тихий інтерфейс».
   Підключається ПІСЛЯ style.css і перекриває його каскадом. style.css лишається
   відповідальним за розкладку (сітка, розміри колонки, 3D-полотно); тут — лише
   вигляд: кольори, шрифти, кнопки, вкладки, картки.

   ІДЕЯ: 3D-світ багатий — інтерфейс поверх нього стриманий (як у Into the Breach
   чи Bad North). Панелі — темне напівпрозоре скло без рамок і орнаментів.
   ОДИН акцентний колір на весь інтерфейс — слонова кістка (--accent):
   головна кнопка, підкреслення активної вкладки, кільце фокуса, активний сегмент.
   Кольори гравців (#4da3ff синій, #ff6b6b червоний, #ffd93d жовтий, #5fd97e зелений)
   навмисно лишаються найнасиченішим, що є на екрані — це гральна інформація.

   ШРИФТИ: один гротеск Manrope на все — і назва «TRON» теж, як «THRONE» у логотипі (logo_bar)
   (є повна кирилиця), запасний стек system-ui / Segoe UI / Roboto.

   ПРАВИЛО ФАЙЛУ: кожен колір береться з токенів нижче. Інших hex-значень тут
   немає — крім чотирьох кольорів гравців, які ніколи не перефарбовуються.
   ===================================================================== */
:root{
  color-scheme: dark;                       /* рідні елементи (скролбар, стрілки в полі числа) — темні */

  /* ---- токени палітри ---- */
  /* Другий, тихий тон — теплий синій перламутр (169,182,200): без блиску, лише підтон.
     Ним підфарбовані тло, скло панелей, підписи й неактивні вкладки — «де-не-де», як просив власник.
     Синій гравця #4da3ff у кілька разів насиченіший, тож вони не плутаються. */
  --pearl-rgb: 169,182,200;
  --bg:        #0f1218;                      /* тло сторінки: майже чорне з теплим синім підтоном */
  --panel:     rgba(var(--pearl-rgb),0.07);  /* панелі — темне напівпрозоре скло з перламутром, БЕЗ рамки */
  --panel-2:   rgba(var(--pearl-rgb),0.13);  /* hover / активний гравець / поля вводу / другорядні кнопки */
  --panel-3:   rgba(var(--pearl-rgb),0.20);  /* натиснуто / hover другорядної кнопки / повзунок скролу */
  --glass:     rgba(15,18,24,0.72);          /* те, що плаває над полотном (панель огляду, підказка) + blur */
  --glass-2:   rgba(15,18,24,0.94);          /* модальні вікна: щільне скло БЕЗ розмиття — blur на весь екран
                                                над WebGL змушує композитор читати кадр Three.js і гальмує */
  --scrim:     rgba(15,18,24,0.78);          /* завіса під модальним вікном (замість старої коричнюватої) */
  --ink:       #e9e7e1;                      /* текст */
  --ink-2:     rgba(233,231,225,0.64);       /* другорядний текст */
  --ink-3:     rgba(var(--pearl-rgb),0.60);  /* підписи-«брівки», неактивні вкладки, вимкнене — перламутр */
  --accent:    #f0ead9;                      /* ЄДИНИЙ акцент: слонова кістка */
  --accent-hi: #ffffff;                      /* hover головної кнопки */
  --accent-ink:#0f1218;                      /* текст на акценті */
  --focus-ring:rgba(240,234,217,0.35);       /* кільце фокуса (акцент на 35%) */
  --ok:        #9fb98a;  --danger: #d9857a;  /* ТІЛЬКИ семантика: текст .note.ok / .note.bad і гліф ✓ / ✗ при наведенні */
  --radius:    6px;

  /* ---- шрифти ---- */
  --f-ui:      'Manrope', system-ui, "Segoe UI", Roboto, sans-serif;             /* весь інтерфейс */
  --f-display: var(--f-ui);                  /* назва «TRON» — теж гротеск, як у логотипі (засічок у грі більше нема) */

  /* ---- сумісність зі старими іменами токенів ----
     style.css та inline-стилі в js (var(--gold), var(--dim)…) читають старі імена.
     Перенаправляємо їх на нові токени, щоб жодне золото чи коричневе не просочилось. */
  --bg2:      var(--panel);
  --bg3:      var(--panel-2);
  --line:     var(--panel-2);
  --line2:    var(--panel-3);
  --gold:     var(--accent);
  --gold-hi:  var(--ink);
  --gold-dim: var(--panel-3);
  --text:     var(--ink);
  --muted:    var(--ink-2);
  --dim:      var(--ink-3);
  --grid:     var(--panel-2);
  --r:        var(--radius);
  --serif:    var(--f-ui);
}

/* =====================================================================
   ТЛО Й БАЗОВИЙ ТЕКСТ
   ===================================================================== */
html{ background:var(--bg); }
body{
  background:var(--bg);                     /* без радіального «сяйва» зі style.css */
  color:var(--ink);
  font-family:var(--f-ui);
  font-size:13.5px; line-height:1.45;
  font-variant-numeric: tabular-nums;       /* цифри однакової ширини — ресурси рівняються в колонках */
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--panel-3); color:var(--ink); }

/* тонкі скролбари: права колонка, журнал, модальне вікно */
.right, .log, .modal-body{ scrollbar-width:thin; scrollbar-color:var(--panel-3) transparent; }

/* =====================================================================
   ШАПКА — прозора, без панелі й без нижньої лінії.
   «TRON» — єдине місце із засічковим шрифтом, колір звичайного тексту, не золото.
   ===================================================================== */
.top{
  background:transparent; border:0; border-radius:0; box-shadow:none;
  padding:6px 4px;
}
.top::before, .top::after{ content:none; display:none; }
.brand{
  /* за макетом logo_bar: знак 24px, далі назва світло-сірим гротеском із широким трекінгом */
  display:flex; align-items:center; gap:13px;
  font-family:var(--f-ui); font-weight:600;
  font-size:15px; letter-spacing:.5em; text-transform:uppercase; line-height:1;
  color:var(--ink);
  background:none; -webkit-background-clip:initial; background-clip:initial;
  -webkit-text-fill-color:currentColor; filter:none; text-shadow:none;
}
.brand-mark{ width:24px; height:24px; flex:none; display:block; }
.brand-name{ opacity:.82; margin-right:-.5em; }   /* сірий, як у макеті; трекінг лишає хвіст після останньої літери — знімаємо */
.round-info{ font-family:var(--f-ui); font-weight:500; font-size:12.5px; color:var(--ink-2); }
.round-info b{ color:var(--ink); font-weight:600; }   /* імена в черзі ходу мають inline-колір гравця — він сильніший */

/* пілюля стану раунду */
.chip{ background:var(--panel-2); border:0; color:var(--ink); font-weight:600; font-size:11px; letter-spacing:.04em; padding:4px 10px; }
.chip.run{ background:var(--panel-3); color:var(--ink); }
.chip.over{ background:var(--panel-2); color:var(--ink-2); }
.chip.me{ background:var(--accent); color:var(--accent-ink); margin-left:6px; }     /* моє місце в черзі ходів */
/* рядок черги в картці наказів: хто вдарить раніше за мене */
.turnline{ margin:6px 0 10px; padding:8px 10px; background:var(--panel); border-radius:var(--radius); font-size:12px; color:var(--ink-2); line-height:1.4; }
.turnline b{ color:var(--ink); }
/* плашка зміни раунду */
.round-toast{
  position:fixed; left:50%; top:16%; transform:translate(-50%,-10px); z-index:60; pointer-events:none;
  opacity:0; visibility:hidden; transition:opacity .35s, transform .35s, visibility .35s;
  background:var(--glass-2); border-radius:12px; padding:16px 26px 18px; text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,.5); min-width:300px; max-width:min(92vw, 640px);
}
.round-toast.show{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.rt-round{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.rt-me{ font-size:24px; font-weight:800; margin:6px 0 10px; line-height:1.15; }
.rt-me b{ color:var(--accent); }
.rt-me small{ display:block; font-size:13px; font-weight:500; color:var(--ink-2); margin-top:4px; }
.rt-order{ display:flex; gap:8px; justify-content:center; align-items:center; font-size:13px; color:var(--ink-2); flex-wrap:wrap; }
.rt-order span{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:99px; background:var(--panel-2); }
.rt-order span.me{ background:var(--accent); color:var(--accent-ink); font-weight:700; }
.rt-order span i{ font-style:normal; font-weight:800; opacity:.7; }
.rt-order em{ color:var(--ink-3); font-style:normal; }

/* годинник раунду — той самий колір тексту; «терміново» показує миготіння зі style.css, не колір */
.clock{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.clock.urgent{ color:var(--ink); font-weight:700; }

/* =====================================================================
   ПАНЕЛІ / КАРТКИ — одне скло без рамок, тіней і орнаментів.
   Старі кутові прикраси зі style.css/попередньої теми гасимо явно.
   ===================================================================== */
.card, .pl, .step, .log-card{
  background:var(--panel); border:0; box-shadow:none; border-radius:var(--radius);
}
.card::before, .card::after, .pl::before, .step::before, .step::after,
.card-title::after, .modal-body::before, .modal-body::after{ content:none; display:none; }
.card{ padding:10px 12px; }

/* заголовок картки: підпис-«брівка» */
.card-title{
  font-family:var(--f-ui); font-size:11px; font-weight:600; line-height:1.3;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
  text-shadow:none; margin:0 0 8px; gap:8px;
}
.card-title .cnt{
  margin-left:auto; font-size:12px; letter-spacing:0; text-transform:none;
  color:var(--ink-2); font-variant-numeric:tabular-nums;
}
.card-title .cnt b{ color:var(--ink); font-weight:600; }
.card-title .clock{ margin-left:0; }

/* =====================================================================
   КАРТКА ГРАВЦЯ .pl
   Ім'я — кольором гравця (за data-pid; кольори збігаються з PLAYERS у config.js),
   поруч крапка того ж кольору. Хто ходить першим (.turn) — світліше скло.
   Вибувший — приглушений. Жодних кольорових контурів.
   ===================================================================== */
.pl{ padding:7px 9px; font-size:11px; transition:background .12s; }
.pl[data-pid="0"]{ --pcol:#4da3ff; }
.pl[data-pid="1"]{ --pcol:#ff6b6b; }
.pl[data-pid="2"]{ --pcol:#ffd93d; }
.pl[data-pid="3"]{ --pcol:#5fd97e; }
.pl.me{ background:var(--panel); }
.pl.turn{ background:var(--panel-2); }
.pl.now{ background:var(--panel-2); box-shadow:inset 0 0 0 1.5px var(--pcol); }   /* показ раунду: зараз ходить він */
.pl.dead{ opacity:.55; }
.pl.talkable{ cursor:pointer; }
.pl.talkable:hover{ background:var(--panel-2); filter:none; }
.pl.talkable::after{ opacity:.3; }
.pl.talkable:hover::after{ opacity:.85; }

.pl-name{
  font-family:var(--f-ui); font-weight:700; font-size:12.5px;
  color:var(--pcol, var(--ink));
  /* ім'я в один рядок у вузькій колонці */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.pl-name .ord{ flex:none; }
.pl.me .pl-name::after{ display:none; }   /* дубль «ти» не потрібен — гравець і так зветься «Ти» */
.dot{ box-shadow:none; }

/* номер у черзі ходу — маленька пілюля --panel-3; у «1» (ходить першим) цифра яскравіша */
.ord{
  background:var(--panel-3); color:var(--ink-2); border:0; border-radius:99px;
  font-family:var(--f-ui); font-weight:700; font-variant-numeric:tabular-nums;
}
.ord.first{ background:var(--panel-3); color:var(--ink); border:0; box-shadow:none; }
.pl.turn .ord.first{ background:var(--panel-3); color:var(--ink); border:0; box-shadow:none; }

.stats{ font-family:var(--f-ui); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.st b{ color:var(--ink); font-weight:600; }
.pl-row{ color:var(--ink-2); } .pl-row b{ color:var(--ink); }

/* =====================================================================
   ТЕКСТИ ВСЕРЕДИНІ КАРТОК
   ===================================================================== */
.hint{ font-family:var(--f-ui); font-size:12.5px; color:var(--ink-2); }
.status{ color:var(--ink-2); } .status b{ color:var(--ink); }
.sub{ font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.key{ color:var(--ink-3); } .key b{ color:var(--ink-2); }
.piece-head{ color:var(--ink); }
.step-n{ color:var(--ink-2); } .step-h{ color:var(--ink-2); }

/* список наказів */
.order{ background:var(--panel-2); border:0; border-radius:var(--radius); }
.order b{ color:var(--ink); }
.order .x{ color:var(--ink-3); } .order .x:hover{ color:var(--ink); }
.slot-empty{ border:1px dashed var(--panel-3); border-radius:var(--radius); color:var(--ink-3); }

/* пояснення: нейтральне — скло; «добре» / «погано» — лише кольором тексту */
.note{ background:var(--panel-2); border:0; border-radius:var(--radius); color:var(--ink-2); }
.note.warn{ background:var(--panel-2); color:var(--ink); }
.note.ok  { background:var(--panel-2); color:var(--ok); }
.note.bad { background:var(--panel-2); color:var(--danger); }

/* згорнутий блок */
details.fold{ border-top:1px solid var(--panel-2); }
details.fold > summary{ color:var(--ink-2); } details.fold > summary:hover{ color:var(--ink); }
details.fold > summary::before{ color:var(--ink-3); }

/* =====================================================================
   КНОПКИ
   Другорядна (.btn, «Правила», «Нова гра», «Купити», «✉ Написати»…): скло --panel-2.
   Головна (.btn.primary — «Готово», «Створити партію»): ЄДИНА суцільна заливка
   акцентом на екрані, саме тому вона й головна.
   ===================================================================== */
.btn{
  font-family:var(--f-ui); font-weight:500; font-size:12.5px; line-height:1.2;
  color:var(--ink); background:var(--panel-2);
  border:0; border-radius:var(--radius); box-shadow:none; text-shadow:none;
  transition:background .12s, color .12s;
}
.btn:hover{ background:var(--panel-3); color:var(--ink); }
a.btn{ text-decoration:none; }               /* посилання-кнопка (⌂ Головна) — без підкреслення */
.btn.ghost{ background:var(--panel-2); box-shadow:none; color:var(--ink); }
.btn.ghost:hover{ background:var(--panel-3); color:var(--ink); }
.btn.small{ font-size:12px; }
.btn.on{ background:var(--accent); color:var(--accent-ink); font-weight:600; box-shadow:none; }
.btn.on:hover{ background:var(--accent); color:var(--accent-ink); }
.btn:disabled{ opacity:1; background:var(--panel-2); color:var(--ink-3); cursor:not-allowed; }
.btn:focus-visible{ outline:0; box-shadow:0 0 0 2px var(--focus-ring); }

.btn.primary{
  font-family:var(--f-ui); font-weight:700; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.1em;
  color:var(--accent-ink); background:var(--accent);
  border:0; border-radius:var(--radius); min-height:44px;
  box-shadow:none; text-shadow:none; filter:none;
  transition:background .12s, transform .12s;
}
.btn.primary.big{ padding:12px 16px; font-size:13px; }
.btn.primary:hover{ background:var(--accent-hi); color:var(--accent-ink); filter:none; }
.btn.primary:active{ transform:translateY(1px); background:var(--accent); box-shadow:none; }
.btn.primary:disabled{
  background:var(--panel-2); color:var(--ink-3);
  opacity:1; transform:none; filter:none; box-shadow:none;
}
.btn.primary:focus-visible{ outline:0; box-shadow:0 0 0 2px var(--focus-ring); }

/* «Готово» липка внизу колонки — трохи повітря, щоб не злипалась із карткою */
.right #doneBtn{ margin-top:2px; }
.right{ padding-bottom:4px; }

/* =====================================================================
   ПОЛЯ ВВОДУ, СЕГМЕНТИ, ЦІНА (форма торгу, лобі, чат)
   ===================================================================== */
input.btn, select.btn, textarea.btn{
  background:var(--panel-2); border:0; color:var(--ink); border-radius:var(--radius);
  font-family:var(--f-ui); font-weight:500; font-variant-numeric:tabular-nums;
  box-shadow:none;
}
input.btn::placeholder{ color:var(--ink-3); }
input.btn:hover, select.btn:hover{ background:var(--panel-2); }
input.btn:focus, input.btn:focus-visible, select.btn:focus-visible{ outline:0; box-shadow:0 0 0 2px var(--focus-ring); }
.price-lab{ color:var(--ink-2); font-size:12.5px; }

/* сегментний перемикач валюти: одне скло, активний сегмент — акцент */
.seg{ background:var(--panel-2); border-radius:var(--radius); padding:2px; gap:2px; }
.seg .btn{ background:transparent; border-radius:4px; margin:0; }
.seg .btn:first-child, .seg .btn:last-child{ border-radius:4px; margin-left:0; }
.seg .btn:hover{ background:var(--panel-3); }
.seg .btn.on, .seg .btn.on:hover{ background:var(--accent); color:var(--accent-ink); }

.trade-say{ color:var(--ink); }
.trade-why{ color:var(--ink-2); opacity:1; }

/* =====================================================================
   ЖУРНАЛ І ВКЛАДКИ [Події] [Бот A] [Бот B] [Бот C]
   Активна вкладка — текст --ink і підкреслення 2px акцентом. Без пілюль, без тла.
   ::after у вкладки зайнятий крапкою «непрочитане» — не чіпаємо.
   ===================================================================== */
.tabs{
  gap:0; margin:-2px 0 8px; padding:0;
  border-bottom:1px solid var(--panel-2); box-shadow:none;
  overflow-x:auto; scrollbar-width:none;
}
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  font-family:var(--f-ui); font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); background:none; border:0; border-bottom:2px solid transparent; border-radius:0;
  padding:6px 9px 7px; margin-bottom:-1px;
  box-shadow:none; text-shadow:none;
  transition:color .12s, border-color .12s;
}
.tab:hover{ color:var(--ink-2); background:none; }
.tab.on{ color:var(--ink); border-bottom-color:var(--accent); background:none; box-shadow:none; }
.tab.dead{ opacity:.4; }
.tab .dot{ width:7px; height:7px; }              /* крапка кольору гравця — єдина гральна інформація у вкладці */
.tab.unread::after{ background:var(--accent); box-shadow:none; }
.tab:focus-visible{ outline:0; box-shadow:0 0 0 2px var(--focus-ring); }

.log{ font-family:var(--f-ui); font-size:12.5px; color:var(--ink-2); }
.log div{ color:var(--ink-2); border-bottom:1px solid var(--panel); }
.log div.big{ color:var(--ink); font-weight:600; }
.log div.me{ color:var(--ink); }
.log div.turn{ color:var(--ink-2); font-size:11px; opacity:.8; padding-top:6px; }   /* «X ходить.» — межа блоку гравця */
.order.extra{ opacity:.6; }

/* ---- дипломатія (вміст вкладки гравця) ---- */
.diplo{ font-family:var(--f-ui); font-size:12.5px; }
.diplo-head{ font-size:13.5px; color:var(--ink); }
.diplo-head .x{ color:var(--ink-3); } .diplo-head .x:hover{ color:var(--ink); }
.msg-menu{ background:var(--panel-2); border:0; border-radius:var(--radius); }
.msg-menu .btn{ background:var(--panel-2); }
.msg-menu .btn:hover{ background:var(--panel-3); }
/* рядок «Своїми словами…» — на всю ширину меню, інакше поле вужче за свій підказковий текст */
.msg-menu .modes{ flex:1 1 100%; }
.msg-menu .modes input{ min-width:0; }
.chat-lines{ border-left:2px solid var(--panel-3); }
.chat-lines div{ color:var(--ink-2); }
.chat-lines div.me b, .chat-lines div.him b{ color:var(--ink); font-weight:600; }

/* =====================================================================
   ПЛАШКА «ТОБІ ПРОПОНУЮТЬ» #offerBox — липка зверху колонки.
   Тло складене з --panel-2 поверх непрозорого --bg: під липкою плашкою
   прокручується вміст, крізь чисте скло він просвічував би.
   ✓ — акцент, ✗ і ⇄ — другорядні. 40px, на дотиковому екрані 44px.
   ===================================================================== */
.offer{
  background: linear-gradient(var(--panel-2), var(--panel-2)), var(--bg);
  border:0; box-shadow:none; border-radius:var(--radius);
}
.offer-item + .offer-item{ border-top:1px solid var(--panel-2); }
.offer-text{ color:var(--ink); }
.obtn{
  width:40px; height:40px; min-width:40px; min-height:40px; padding:0;
  border:0; border-radius:var(--radius); font-size:18px; font-family:var(--f-ui);
  background:var(--panel-2); color:var(--ink);
  transition:background .12s, color .12s;
}
.obtn:hover{ background:var(--panel-3); border:0; }
.obtn.ok{ background:var(--accent); color:var(--accent-ink); }
.obtn.ok:hover{ background:var(--accent-hi); color:var(--ok); }        /* гліф ✓ зеленіє лише при наведенні */
.obtn.no{ color:var(--ink); }
.obtn.no:hover{ color:var(--danger); }                                  /* гліф ✗ червоніє лише при наведенні */
.obtn.alt{ color:var(--ink); }
.obtn:focus-visible{ outline:0; box-shadow:0 0 0 2px var(--focus-ring); }
@media (pointer:coarse){ .obtn{ width:44px; height:44px; min-width:44px; min-height:44px; } }

/* =====================================================================
   ПАНЕЛЬ ОГЛЯДУ .viewbar — скло над полотном
   ===================================================================== */
.viewbar{
  background:var(--glass);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:0; border-radius:10px; box-shadow:none;
  padding:4px 6px; gap:4px;
}
body.players-aside .viewbar{ background:var(--glass); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.viewbar button{
  background:transparent; border:0; border-radius:var(--radius);
  color:var(--ink-2); font-family:var(--f-ui); font-size:15px;
  transition:background .12s, color .12s;
}
.viewbar button:hover{ background:var(--panel-2); color:var(--ink); border:0; }
.viewbar button.on{ background:var(--panel-3); color:var(--ink); border:0; box-shadow:none; }
.viewbar button:focus-visible{ outline:0; box-shadow:0 0 0 2px var(--focus-ring); }
.viewbar .vnum{ color:var(--ink-2); font-variant-numeric:tabular-nums; }
body.mode3d .viewbar .vnum{ display:none; }   /* у 3D масштаб — це відстань камери, відсотки тут брехали б */
.viewbar .vsep{ background:var(--panel-3); opacity:1; }
/* «Огляд гри» — звичайна другорядна кнопка, без пульсації й жовтої заливки */
.viewbar.moved .vreset{
  background:var(--panel-2); color:var(--ink); border:0;
  font-family:var(--f-ui); font-weight:600;
  animation:none; box-shadow:none;
}
.viewbar.moved .vreset:hover{ background:var(--panel-3); }

/* полотно 3D: рамку лишаємо прозорою тієї ж товщини, щоб розмір хоста не змінився */
.board3d-host{ background:var(--bg); border:1px solid transparent; box-shadow:none; border-radius:var(--radius); }
.board-wrap{ box-shadow:none; }

/* підказка «на весь екран» на телефоні у портреті */
.rot-hint{
  background:var(--glass); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:0; color:var(--ink); font-family:var(--f-ui); font-weight:600;
}

/* =====================================================================
   МОДАЛЬНІ ВІКНА (Правила, Гра з друзями, фінал)
   Скло з розмиттям, без рамки. Заголовки — Manrope 700, НЕ засічки.
   Ширина читання ≈ 68 символів.
   ===================================================================== */
.modal{ background: color-mix(in srgb, var(--bg) 70%, transparent); }
.modal{ background:var(--scrim); }
.modal-body{
  background:var(--glass-2);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border:0; border-radius:10px; box-shadow:none;
  padding:24px 28px;
}
.modal-body h2{
  font-family:var(--f-ui); font-weight:700; font-size:22px; line-height:1.2;
  letter-spacing:-.01em; text-transform:none; color:var(--ink);
  background:none; -webkit-background-clip:initial; background-clip:initial;
  -webkit-text-fill-color:currentColor; filter:none; text-shadow:none;
  margin:0 0 14px;
}
.modal-body h3{
  font-family:var(--f-ui); font-weight:700; font-size:15px; letter-spacing:0;
  color:var(--ink); text-shadow:none; margin:20px 0 6px;
}
.modal-body p, .modal-body li{ font-family:var(--f-ui); font-size:13.5px; line-height:1.6; color:var(--ink); max-width:68ch; }
.modal-body li{ margin:2px 0; }
.modal-body b{ color:var(--ink); font-weight:700; }
.modal-body label{ color:var(--ink-2); }
#modalClose{ margin-top:18px; }

/* хрестик — круглий, другорядний; тло непрозоре (він липкий і плаває над текстом) */
.modal-x{
  width:32px; height:32px; border-radius:50%; border:0;
  background: linear-gradient(var(--panel-3), var(--panel-3)), var(--bg);
  color:var(--ink-2); font-family:var(--f-ui); font-size:14px;
  transition:color .12s;
}
.modal-x:hover{ color:var(--ink); border:0; }
.modal-x:focus-visible{ outline:0; box-shadow:0 0 0 2px var(--focus-ring); }

/* =====================================================================
   ТЕЛЕФОН І ВУЗЬКІ ЕКРАНИ — правила розкладки, перенесені з попередньої теми
   ===================================================================== */
/* Розмиття над WebGL змушує композитор читати кадр Three.js щокадру — на телефоні
   вимикаємо і робимо скло майже непрозорим. Картки гравців тісніші. */
@media (max-width:1000px), (prefers-reduced-transparency: reduce){
  .viewbar, body.players-aside .viewbar, .modal-body, .rot-hint{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
  }
  .pl{ padding:4px 7px; font-size:10px; }
  .pl.talkable::after{ display:none; }
  .pl.me .pl-name::after{ display:none; }
  .brand{ font-size:13px; gap:10px; }
  .brand-mark{ width:20px; height:20px; }
  .card{ padding:8px 10px; }
  .btn.primary.big{ padding:10px 12px; font-size:12.5px; }
}

/* телефон у ширину: шапка переносить кнопки, а не ріже їх; вкладки гортаються;
   колонці й шапці — повітря справа, щоб край екрана не зрізав вміст */
@media (max-width: 980px) and (orientation: landscape){
  .top{ flex-wrap:wrap; row-gap:4px; padding:4px 4px; }
  .top .btn{ padding:4px 9px; font-size:12px; white-space:nowrap; }
  .tabs{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  /* щільніші вкладки: [Події][Бот B][Бот C][Бот D] вміщуються в колонку 240px без гортання */
  .tab{ padding:5px 6px 6px; font-size:10.5px; letter-spacing:.05em; gap:4px; }
  .app{ padding-right:8px; }
  .right{ padding-right:2px; }
}

/* =====================================================================
   ТОРГ — дві колонки «Я віддаю → Я отримую» (макет Влада, 15 вересня).
   Картка-варіант — та сама скляна кнопка, що й усюди. Вибрана не заливається
   акцентом, а світлішає і бере кільце акценту: суцільною плямою слонової кістки
   на екрані лишається ОДНА головна кнопка — «Надіслати угоду». Так око одразу
   бачить, де дія, а де вибір.
   Хочеш заливку, як на макеті, — розкоментуй рядок під .deal-opt.on.
   ===================================================================== */
.deal{ display:grid; grid-template-columns:1fr 16px 1fr; gap:6px; align-items:start; margin:4px 0 8px; }
.deal-col{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.deal-lab{ font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 2px 2px; }
.deal-arr{ align-self:center; text-align:center; color:var(--ink-2); font-size:14px; line-height:1; }
.deal-opt{
  display:flex; align-items:center; gap:6px; width:100%; min-width:0; min-height:34px;
  padding:6px 8px; font-family:var(--f-ui); font-size:12.5px; font-weight:500; line-height:1.15;
  color:var(--ink); background:var(--panel-2); border:0; border-radius:var(--radius);
  text-align:left; cursor:pointer; transition:background .12s, box-shadow .12s;
}
.deal-opt:hover{ background:var(--panel-3); }
.deal-opt:focus-visible{ outline:0; box-shadow:0 0 0 2px var(--focus-ring); }
.deal-opt .ic{ flex:none; font-size:13px; line-height:1; opacity:.85; }
.deal-opt .nm{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.deal-opt .nm small{ display:block; font-size:10.5px; font-weight:500; color:var(--ink-3); }
.deal-opt.off{ opacity:.42; }                       /* така угода зараз неможлива — причина в підказці */
.deal-opt.gift{ background:transparent; border:1px dashed var(--panel-3); }   /* «Нічого (подарунок)» — не угода */
.deal-opt.gift:hover{ background:var(--panel-2); }
.deal-opt.on{ background:var(--panel-3); border:0; box-shadow:inset 0 0 0 1.5px var(--accent); font-weight:600; }
/* .deal-opt.on{ background:var(--accent); color:var(--accent-ink); box-shadow:none; } */
.deal-opt.on:hover{ background:var(--panel-3); }
/* число ціни живе просто в картці золота — тієї сторони, де золото платиться */
.deal-num{
  width:100%; min-width:0; max-width:58px; height:22px; padding:2px 4px; text-align:center;
  font-family:var(--f-ui); font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums;
  color:var(--ink); background:var(--glass); border:0; border-radius:4px;
}
.deal-num:focus, .deal-num:focus-visible{ outline:0; box-shadow:0 0 0 2px var(--focus-ring); }
/* підсумок: що на що міняється, одним рядком */
.deal-sum{
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  padding:7px 8px; margin:0 0 2px; border-radius:var(--radius);
  background:var(--panel); color:var(--ink); font-size:12.5px; text-align:center;
}
.deal-sum b{ font-weight:600; }
.deal-sum i{ font-style:normal; color:var(--ink-3); }
.deal-act{ display:flex; gap:6px; margin-top:6px; }
.deal-act .btn{ flex:1 1 38%; justify-content:center; text-align:center; }
.deal-act .btn.primary{ flex:1 1 62%; min-height:38px; padding:9px 8px; font-size:11.5px; letter-spacing:.06em; }
@media (pointer:coarse){ .deal-opt{ min-height:44px; } .deal-act .btn, .deal-act .btn.primary{ min-height:44px; } }

/* Плашка початку раунду: самі кольори гравців у порядку ходу, свій — обведений */
.rt-dot{display:inline-block;width:26px;height:26px;border-radius:50%;vertical-align:middle;box-shadow:inset 0 0 0 2px rgba(0,0,0,.35)}
.rt-dot.me{width:34px;height:34px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.35),0 0 0 3px #fff}
.round-toast .rt-order{display:flex;align-items:center;justify-content:center;gap:10px}
.round-toast .rt-order em{font-style:normal;opacity:.5}

/* Вікно донату: усе під ним розмито (Vlad: щоб той, хто донатить, не діставав зайвий час на аналіз дошки).
   #modal лежить ПОРУЧ із .app, а не всередині — тому фільтр на .app вікна не торкається. */
body.donating .app{ filter: blur(9px) saturate(.7); pointer-events: none; user-select: none; transition: filter .25s; }

/* ЯТКА ТОРГОВКИ (вікно «Торгівля»). Портрет ліворуч, розмова праворуч; фон — теплий намет. */
body.donating .modal-body{ max-width: 900px; width: min(96vw, 900px); padding: 0; overflow: hidden;
  background: radial-gradient(120% 90% at 20% 30%, rgba(74,52,24,.95) 0%, rgba(30,20,10,.97) 55%, rgba(12,8,4,.98) 100%); }
.shop{ display:grid; grid-template-columns: minmax(240px, 42%) 1fr; min-height: 460px; }
.shop-portrait{ position:relative; display:flex; align-items:flex-end; justify-content:center; overflow:hidden;
  background: linear-gradient(180deg, rgba(255,200,120,.10), rgba(0,0,0,0) 60%); }
.shop-portrait::before{ content:''; position:absolute; inset:0;
  background: radial-gradient(60% 45% at 50% 62%, rgba(255,190,110,.22), rgba(0,0,0,0) 70%); }
.shop-portrait img{ position:relative; width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.shop-talk{ padding: 22px 26px 18px; display:flex; flex-direction:column; gap:10px; }
.shop-talk h2{ margin:0 0 2px; letter-spacing:.06em; }
.shop-name{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-2, #f0d79b); opacity:.9; }
.shop-bubble{ position:relative; font-size:15px; line-height:1.45; font-style:italic; padding:10px 14px;
  background: rgba(255,235,200,.08); border-left: 3px solid var(--gold, #d9ac4c); border-radius: 0 8px 8px 0; }
.shop-sub{ font-size:12.5px; opacity:.8; }
.shop-cards{ display:grid; gap:8px; margin-top:4px; }
.shop-card{ display:grid; grid-template-columns: 34px 1fr auto; grid-template-rows:auto auto; column-gap:10px; align-items:center;
  text-align:left; padding:10px 12px; border-radius:8px; border:1px solid rgba(217,172,76,.35); cursor:pointer; color:inherit; font:inherit;
  background: linear-gradient(180deg, rgba(60,42,20,.85), rgba(28,19,9,.9)); }
.shop-card:hover{ border-color: var(--gold, #d9ac4c); background: linear-gradient(180deg, rgba(80,56,26,.9), rgba(36,24,11,.95)); }
.shop-card .ic{ grid-row: 1 / span 2; font-size:22px; text-align:center; }
.shop-card b{ font-size:14px; }
.shop-card small{ grid-column:2; font-size:11.5px; opacity:.75; }
.shop-card em{ grid-column:3; grid-row:1 / span 2; font-style:normal; font-weight:800; color:var(--gold-2, #f0d79b); white-space:nowrap; }
.shop-clock{ margin-top:auto; opacity:.7; }
@media (max-width: 640px){ .shop{ grid-template-columns: 1fr; } .shop-portrait{ max-height: 220px; } }

/* Ятка: картка, на яку не вистачає грошей (net.js donateBalanceRefresh) */
.shop-card.off{ opacity:.45; cursor:not-allowed; }
.shop-card.off:hover{ border-color: inherit; background: inherit; }

/* Панель звуку в грі (кнопка 🔊 у шапці) */
.snd{ position:absolute; right:12px; top:52px; z-index:40; background:var(--panel-2, #1e1712); border:1px solid rgba(255,220,150,.18);
  border-radius:12px; padding:10px 12px; display:grid; gap:8px; min-width:260px; box-shadow:0 12px 40px rgba(0,0,0,.55); }
.snd.hidden{ display:none; }
.snd-row{ display:grid; grid-template-columns:auto 1fr 120px; align-items:center; gap:10px; font-size:13px; }
.snd-row input[type=range]{ width:120px; accent-color:var(--gold, #d9ac4c); }