/* ============================================================
   TRON — вигляд гри.
   Тут немає жодної логіки, тільки кольори, розміри й розташування.
   Міняти можна сміливо: гра від цього не зламається.

   СТИЛЬ ПАНЕЛЕЙ: «середньовіччя, але не старе». Теплі темні панелі
   (морений дуб, шкіра), тонкі золоті волосинки замість товстих рамок,
   текст кольору пергаменту, чиста сучасна типографіка й повітря.
   Кольори гравців (--c0..--c3, --cn) — гральна інформація, їх не чіпати.

   РОЗКЛАДКА: горизонтальна. Зліва велике 3D-полотно, справа вузька
   колонка з тим, що треба під час ходу. Сторінка не прокручується —
   прокручується тільки права колонка. У портреті (телефон вертикально)
   все стає одним стовпчиком, полотно зверху на всю ширину.

   ГОЛОВНА ІДЕЯ ДОШКИ: дошка — це КАРТА (трава, ліс, річка),
   а клітинки — це шар туману поверх неї.
     не розвідано  — майже чорне скло, карти не видно
     розвідано     — карта крізь серпанок (місцевість пам'ятається)
     видно зараз   — карта чиста
   Тому між клітинками НЕМА проміжків (--g:0): інакше туман
   протікав би світлими смужками. Сітку малює outline на клітинці.

   ЩОБ НІЧОГО НЕ НАКЛАДАЛОСЯ, у клітинки все розкладено по різних місцях:
     background-color — туман
     background-image — сяйво Трону, підсвітка бази
     .rk (дитина)     — камінь
     .bld (дитина)    — будівля
     ::before         — позначка ходу
     ::after          — жовта крапка «цій фігурі вже дано наказ»
     box-shadow       — рамка бази й рамка вибору
   ============================================================ */

:root{
  --bg:        #14100a;
  --bg2:       #1e1810;
  --bg3:       #2a2116;
  --line:      rgba(201,162,74,.22);
  --line2:     rgba(201,162,74,.40);
  --gold:      #c9a24a;
  --gold-hi:   #f2dfa8;
  --gold-dim:  #6f5527;
  --text:      #f0dfb8;
  --muted:     #c3b18d;
  --dim:       #8d7f63;
  --accent:    #c9a24a;
  --danger:    #c8341f;
  --ok:        #6f9f5a;

  /* кольори чотирьох гравців */
  --c0: #5c9fdc;
  --c1: #c1493f;
  --c2: #e3b23c;
  --c3: #6d9e5b;
  --cn: #93897a;   /* нейтральний — розбійники */

  --grid: rgba(232,191,114,.10);
  --r: 10px;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

*{ box-sizing:border-box; }

html, body{ height:100%; }
body{
  margin:0;
  background:
    radial-gradient(900px 520px at 50% -10%, rgba(201,162,74,.10) 0%, transparent 60%),
    var(--bg);
  color:var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size:13px;
  line-height:1.45;
}

/* Сторінка — рівно один екран: шапка зверху, далі все інше ділить решту висоти.
   Прокручується лише права колонка. */
.app{
  height:100vh; height:100dvh;
  display:flex; flex-direction:column; gap:10px;
  padding:10px 12px;
  max-width:none; margin:0;
}

/* ---------- шапка: один компактний рядок ---------- */
.top{
  flex:none;
  display:flex; align-items:center; gap:12px;
  padding:7px 14px;
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--r);
}
.brand{
  font-family:var(--serif);
  font-size:22px; font-weight:700; letter-spacing:.32em; line-height:1;
  color:var(--gold-hi); padding-left:.1em;
}
.round-info{ flex:1; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--muted); min-width:0; }
.round-info b{ color:var(--text); font-weight:600; }
.top-actions{ display:flex; gap:6px; flex:none; }

/* «зараз ти плануєш» / «раунд виконується» — стан гри одним оком */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px; border-radius:99px; font-size:11px; font-weight:600;
  letter-spacing:.03em;
  background:rgba(201,162,74,.10); border:1px solid var(--line2); color:var(--gold-hi);
}
.chip.run{ background:rgba(201,162,74,.18); border-color:var(--gold); color:#fff1c9; }
.chip.over{ background:rgba(200,52,31,.14); border-color:rgba(200,52,31,.5); color:#ffc9bd; }
/* Банк рейтингової партії в шапці: скільки в банку → скільки з нього розігрується */
.chip.bank{ background:rgba(201,162,74,.22); border-color:var(--gold); color:#ffe9b8; font-variant-numeric:tabular-nums; }
.chip.bank .bank-up{ font-style:normal; font-weight:500; color:#cbb27e; }

/* годинник раунду (CONFIG.TURN_SECONDS) */
.clock{ margin-left:auto; font-weight:600; color:var(--gold); font-variant-numeric:tabular-nums; }
.clock.urgent{ color:#ff6a50; animation: blink .5s steps(2) infinite; }
@keyframes blink{ to{ opacity:.35; } }

/* ---------- загальна сітка сторінки ----------
   Зліва полотно, справа вузька колонка. Рядок сітки має точну висоту
   (minmax(0,1fr)), інакше колонка не знала б, де їй зупинитись і прокручуватись. */
.main{
  flex:1; min-height:0;
  display:grid; grid-template-columns:minmax(0,1fr) 300px; grid-template-rows:minmax(0,1fr);
  gap:12px; align-items:stretch;
}
.left{ display:flex; flex-direction:column; gap:8px; min-width:0; min-height:0; }
.right{
  display:flex; flex-direction:column; gap:8px;
  min-height:0; max-height:100%; overflow-y:auto; overscroll-behavior:contain;
  padding-right:2px;
  scrollbar-width:thin; scrollbar-color:var(--gold-dim) transparent;
}

/* ---------- панель гравців: компактна смужка над полотном ---------- */
.players{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; flex:none; min-width:0; }
.pl{
  position:relative; min-width:0;
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--r);
  padding:6px 9px; font-size:11px;
}
.pl.me{ border-color:var(--line2); background:linear-gradient(180deg, rgba(201,162,74,.09), var(--bg2)); }
.pl.dead{ opacity:.35; }
.pl-name{ display:flex; align-items:center; gap:6px; font-weight:600; margin-bottom:3px; }
.dot{ width:9px; height:9px; border-radius:50%; display:inline-block; flex:none; box-shadow:0 0 0 1px rgba(0,0,0,.4); }
/* кружечок з гербом армії (ui.js emblemDot): золотий звір на кольорі гравця */
.dot.emb{ width:22px; height:22px; display:inline-grid; place-items:center; overflow:hidden; box-shadow:0 0 0 1px rgba(0,0,0,.55), inset 0 0 6px rgba(0,0,0,.35); }
.dot.emb img{ width:18px; height:18px; display:block; filter:drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
/* номер у черзі ходу цього раунду: 1 — ходить першим */
.ord{
  margin-left:auto; width:17px; height:17px; border-radius:5px;
  display:grid; place-items:center; font-size:10px; font-weight:700;
  background:var(--bg3); color:var(--dim); border:1px solid var(--line);
}
.ord.first{ background:var(--gold); color:#1a1305; border-color:var(--gold); }
/* рядок дрібних іконок замість підписів: 🪙3 👑0/2 🏰1/4 ⚔6 🏺4 */
.stats{ display:flex; flex-wrap:wrap; gap:1px 8px; color:var(--muted); font-size:11px; line-height:1.55; }
.st{ white-space:nowrap; cursor:help; }
.st b{ color:var(--text); font-weight:600; margin-left:2px; }
.st.wip{ opacity:.45; }
.st.dim{ opacity:.5; }
.pl-row{ color:var(--muted); display:flex; justify-content:space-between; }
.pl-row b{ color:var(--text); font-weight:600; }

/* ---------- дошка ---------- */
.board-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:2px 16px 0; }
.board-stage{ position:relative; width:calc(min(64vh, 580px) * var(--zoom, 1));
  --g:0px; --pad:7px; --bw:17px; transition:width .18s ease; }

.board{
  display:grid;
  grid-template-columns:repeat(10, 1fr);
  grid-template-rows:repeat(10, 1fr);      /* жорстко: рядки однакові, вміст їх не розтягує */
  gap:var(--g);
  width:100%;
  aspect-ratio:1/1;
  padding:var(--pad);
  /* Рама — картинка (tools/blender-frame.py), розрізана по 76 пікселів.
     Її товщина живе в --bw, бо від цієї ж змінної рахується шар фігур:
     інакше статуетки поїхали б відносно клітинок. */
  border:var(--bw) solid transparent;
  border-image:url("../img/frame.png") 76 round;
  overflow:hidden;
  /* ---- МІСЦЕВІСТЬ: намальована карта, tools/blender-map.py ----
     Раніше тут був стос CSS-градієнтів. Поруч із реалістичними мініатюрами
     це читалось як два різні світи, тому місцевість тепер — намальована
     карта в стилі старої ілюмінованої мапи: золота охра, темно-червоні гаї,
     синя вода з теплою позолотою по кромці. */
  background-color:#7d6535;
  background-image:url("../img/board.png");
  background-size:100% 100%;
  box-shadow:inset 0 0 70px rgba(38,18,8,.55);
}

/* Зерно: дошка має читатись як надрукована на щільному папері, а не як
   гладенький градієнт. Без цього реалістичні мініатюри стоять на чомусь
   явно з іншого світу. Шар пасивний — кліки крізь нього проходять. */
.board::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  border-radius:inherit;
  opacity:.22; mix-blend-mode:overlay;   /* карта вже має власне зерно */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ---- клітинка = скло туману поверх карти ---- */
.cell{
  position:relative;
  min-width:0; min-height:0; overflow:hidden;
  outline:1px solid var(--grid); outline-offset:-1px;
  display:flex; align-items:center; justify-content:center;
  background-color:rgba(5,10,24,.93);     /* не розвідано */
  cursor:default;
  transition: background-color .15s;
}
.cell.explored{ background-color:rgba(7,13,30,.52); }   /* розвідано: карту видно крізь серпанок */
.cell.lit{ background-color:transparent; }              /* видно зараз: карта чиста */

.cell.clickable{ cursor:pointer; }
.cell.clickable:hover{ background-color:rgba(120,190,255,.16); }
.cell.sel{ box-shadow: inset 0 0 0 3px var(--accent); }

/* Трон — головна мета, має світитись золотом */
.cell.throne{ background-image: radial-gradient(circle, rgba(240,193,99,.20) 0 42%, transparent 72%); }
.cell.throne.lit{ background-color:rgba(240,193,99,.13); }

/* бази: рамка кольором власника + підсвітка землі, коли її видно */
.cell.base{ box-shadow: inset 0 0 0 2px var(--bcol); }
.cell.base.lit{ background-color:var(--btint); }

/* камінь — валун (окремий елемент, щоб не заважати позначкам) */
.rk{
  position:absolute; left:20%; top:24%; width:60%; height:52%;
  font-size:0; color:transparent;
  background:linear-gradient(158deg,#8b93a1 0%,#5c6474 45%,#333b49 100%);
  clip-path:polygon(50% 0%, 78% 34%, 96% 100%, 4% 100%, 22% 34%);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.75));
}

/* ---------- позначки ходів ----------
   ОДИН І ТОЙ САМИЙ CSS малює позначку на дошці (.cell) і в легенді (.sw).
   Тому легенда не може розійтися з дошкою — це фізично та сама картинка. */
.cell.target::before,.sw.move::before{
  content:''; position:absolute; left:38%; top:38%; width:24%; height:24%;
  border-radius:50%; background:rgba(120,230,150,.8); box-shadow:0 0 9px rgba(120,230,150,.5);
}
.cell.target.kill::before,.sw.kill::before{
  content:''; position:absolute; inset:5%; left:5%; top:5%; width:auto; height:auto;
  border-radius:5px; background:none;
  border:2px solid rgba(255,107,107,.95); box-shadow:inset 0 0 12px rgba(255,107,107,.4);
}
/* Торговець на клітинці: золота цятка з кільцем — зайди й забери золото (не удар) */
.cell.target.loot::before,.sw.loot::before{
  content:''; position:absolute; left:33%; top:33%; width:34%; height:34%; inset:auto;
  border-radius:50%; background:rgba(240,193,99,.95); border:2px solid rgba(255,240,200,.9);
  box-shadow:0 0 10px rgba(240,193,99,.65); transform:none;
}
.cell.target.jump::before,.sw.jump::before{
  content:''; position:absolute; left:33%; top:33%; width:34%; height:34%; inset:auto;
  border-radius:4px; background:rgba(255,107,107,.92); border:none;
  transform:rotate(45deg); box-shadow:none;
}
.cell.target.jump.guess::before,.sw.guess::before{
  content:''; position:absolute; left:33%; top:33%; width:34%; height:34%; inset:auto;
  border-radius:4px; background:none;
  border:2px dashed rgba(255,150,150,.85); transform:rotate(45deg); box-shadow:none;
}
/* крок Коня на клітинку ворога: ставка, що ворог піде — пунктирна зелена крапка */
.cell.target.guess:not(.jump)::before{
  background:none; left:35%; top:35%; width:30%; height:30%;
  border:2px dashed rgba(120,230,150,.85); border-radius:50%; box-shadow:none;
}
.cell.target.shot::before,.sw.shot::before{
  content:''; position:absolute; left:28%; top:28%; width:44%; height:44%; inset:auto;
  border-radius:50%; background:none;
  border:2px solid rgba(240,193,99,.9); box-shadow:0 0 9px rgba(240,193,99,.3);
  transform:none;
}
/* Постріл НАОСЛІП (на 3 клітинки): те саме кільце, але пунктирне —
   бо ціль поза оглядом, і ти стріляєш у здогад. Правило стоїть після .shot і .guess,
   щоб перемогти їх обидва: у клітинки одночасно є класи shot і guess. */
.cell.target.shot.guess::before,.sw.shotblind::before{
  content:''; position:absolute; left:28%; top:28%; width:44%; height:44%; inset:auto;
  border-radius:50%; background:none;
  border:2px dashed rgba(240,193,99,.95); box-shadow:none; transform:none;
}

/* Там зараз ТВОЯ фігура: наказ дати можна, але це ставка.
   Малюємо ДОДАТКОВИМ шаром (рамка всієї клітинки), а не замість ::before —
   інакше ризикований постріл виглядав би точно як ризикований крок. */
.cell.target.risky, .sw.risky{
  outline:2px dashed rgba(120,180,255,.95); outline-offset:-2px;
}
/* сюди можна найняти або збудувати — навмисно тихо, щоб не забивало дошку */
.cell.reach:not(.target)::before,.sw.reach::before{
  content:''; position:absolute; inset:38%; left:38%; top:38%; width:auto; height:auto;
  border-radius:2px; background:none;
  border:1px dashed rgba(240,193,99,.38); transform:none; box-shadow:none;
}
.cell.reach:not(.target):hover::before{ border-color:rgba(240,193,99,.9); inset:30%; }
.sw.reach::before{ border-color:rgba(240,193,99,.8); inset:32%; }
/* цій фігурі вже дано наказ */
.cell.hasorder::after{
  content:''; position:absolute; right:3px; top:3px;
  width:7px; height:7px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 6px rgba(240,193,99,.8);
}
/* На цю клітинку дано наказ. Лівий верхній кут — єдиний вільний на клітинці.
   Червоний тут не сплутається з пунктирним ромбом стрибка й кольором гравця:
   ті живуть у ЦЕНТРІ, цей — у кутку і вдвічі дрібніший. */
.plan-x{
  position:absolute; left:2px; top:0; z-index:2;
  font-size:10px; line-height:1; font-weight:700;
  color:rgba(255,90,90,.95); pointer-events:none;
  text-shadow:0 1px 2px rgba(0,0,0,.9);
}

/* будівлі: значок у кутку клітинки, кольорова смужка знизу — чия */
.bld{
  position:absolute; left:3px; bottom:1px; z-index:2;
  font-size:11px; line-height:1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.9));
}
.bld.wip{ opacity:.5; }
.bld.plan{ left:auto; right:3px; opacity:.65; }
.cell.hasbld{ border-bottom:3px solid var(--bldcol); }

/* підписи стовпців і рядків */
.coords-x, .coords-y{ position:absolute; display:grid; color:var(--dim); font-size:10px; font-weight:700; }
.coords-x{ left:var(--pad); right:var(--pad); top:-14px; grid-template-columns:repeat(10,1fr); text-align:center; }
.coords-y{ top:var(--pad); bottom:var(--pad); left:-14px; grid-template-rows:repeat(10,1fr); align-items:center; text-align:center; }

/* фігури-символи в бічних панелях */
.pc{ position:relative; z-index:2; text-shadow:0 2px 6px rgba(0,0,0,.7); }
.pc.p0{ color:var(--c0); } .pc.p1{ color:var(--c1); }
.pc.p2{ color:var(--c2); } .pc.p3{ color:var(--c3); }
.pc.pn{ color:var(--cn); }

/* ---------- шар фігур на дошці ----------
   Шар накриває сітку рівно по внутрішньому краю. Фішка — кольоровий диск
   із темним символом: так одразу видно, ЧИЯ фігура, навіть краєм ока.
   Анімуються left/top, тому фігура КОВЗАЄ між клітинками, а не перестрибує. */
.pieces{
  position:absolute; inset:calc(var(--pad) + var(--bw));
  pointer-events:none;            /* кліки проходять до клітинок під шаром */
  z-index:3;
}
.piece{
  position:absolute;
  width:calc((100% - 9 * var(--g)) / 10);
  height:calc((100% - 9 * var(--g)) / 10);
  display:flex; align-items:center; justify-content:center;
  transition: left .4s ease-in-out, top .4s ease-in-out, opacity .3s;
  will-change: left, top;
}
.piece i{
  font-style:normal;
  width:78%; height:78%; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size: min(3.4vh, 25px); line-height:1;
  color:#0a0f17;
  background: radial-gradient(circle at 34% 28%,
              color-mix(in srgb, var(--pc) 68%, #fff) 0%, var(--pc) 60%,
              color-mix(in srgb, var(--pc) 58%, #000) 100%);
  border:1.5px solid color-mix(in srgb, var(--pc) 50%, #fff);
  box-shadow:0 3px 6px rgba(0,0,0,.7), inset 0 -2px 4px rgba(0,0,0,.32);
  text-shadow:0 1px 0 rgba(255,255,255,.3);
}
.piece.p0 i{ --pc:var(--c0); } .piece.p1 i{ --pc:var(--c1); }
.piece.p2 i{ --pc:var(--c2); } .piece.p3 i{ --pc:var(--c3); }
.piece.pn i{ --pc:var(--cn); }
/* твої фігури мають світлий обідок — щоб не плутати свою армію з чужою */
.piece.mine i{ box-shadow:0 3px 6px rgba(0,0,0,.7), 0 0 0 2px rgba(255,255,255,.24), inset 0 -2px 4px rgba(0,0,0,.32); }
.piece.fog{ opacity:0; }          /* фігура є, але ти її зараз не бачиш */
/* Фігура, що з'явилась або загинула В ТУМАНІ, не має «вистрибувати» чи
   «падати»: анімації тимчасово ставлять opacity:1 і видавали б, де вона. */
.piece.fog.die, .piece.fog.born{ animation:none; }
.piece.shielded::after{
  content:'◈'; position:absolute; right:6%; top:2%; font-size:.5em; color:#9fd8ff;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}
/* поява: найнята або розвідана фігура «вистрибує» */
.piece.born{ animation: pop .35s ease-out; }
@keyframes pop{
  from{ transform:scale(.2); opacity:0; }
  60% { transform:scale(1.25); opacity:1; }
  to  { transform:scale(1); }
}

/* ---------- сценки бою (fx.js) ---------- */
/* стріла: тонка світла риска, повернута в бік цілі, ковзає від стрільця до цілі */
.arrow{
  position:absolute;
  width:calc((100% - 9 * var(--g)) / 10);
  height:calc((100% - 9 * var(--g)) / 10);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; z-index:6;
  transition: left .38s linear, top .38s linear, opacity .2s;
}
.arrow::before{
  content:''; width:70%; height:3px; border-radius:2px;
  background:linear-gradient(90deg, transparent, #ffd27a 45%, #ffffff);
  box-shadow:0 0 6px rgba(255,204,85,.9);
  transform:rotate(var(--ang, 0deg));
}
.arrow.broken{ opacity:0; }

/* жертва здригається */
.piece.hit{ animation: hit .3s ease-out; }
@keyframes hit{
  0%  { transform:translate(0,0); filter:brightness(1); }
  20% { transform:translate(-9%,0); filter:brightness(2.2); }
  45% { transform:translate(9%,0); }
  70% { transform:translate(-5%,0); }
  100%{ transform:translate(0,0); filter:brightness(1); }
}

/* випад у бік цілі: --dx/--dy = напрямок (-1/0/1), кожен вид фігури б'є по-своєму */
.piece.strike-pawn{ animation: strikePawn .42s ease-in-out; }        /* Пішак/Стрілок: випад і замах мечем */
@keyframes strikePawn{
  0%  { transform:translate(0,0) rotate(0deg); }
  35% { transform:translate(calc(var(--dx,0)*20%), calc(var(--dy,0)*20%)) rotate(-25deg); }
  55% { transform:translate(calc(var(--dx,0)*48%), calc(var(--dy,0)*48%)) rotate(20deg); }
  100%{ transform:translate(0,0) rotate(0deg); }
}
.piece.strike-lady{ animation: strikeLady .42s ease-in-out; }        /* Леді: злітає і б'є зверху вниз */
@keyframes strikeLady{
  0%  { transform:translate(0,0) scale(1); }
  35% { transform:translate(calc(var(--dx,0)*15%), calc(var(--dy,0)*15% - 30%)) scale(1.35); }
  55% { transform:translate(calc(var(--dx,0)*48%), calc(var(--dy,0)*48%)) scale(.9); }
  100%{ transform:translate(0,0) scale(1); }
}
.piece.strike-knight{ animation: strikeKnight .42s ease-in-out; }    /* Кінь: на задні лапи — і копитами */
@keyframes strikeKnight{
  0%  { transform:translate(0,0) rotate(0deg); }
  35% { transform:translate(calc(var(--dx,0)*-10%), -18%) rotate(-28deg); }
  60% { transform:translate(calc(var(--dx,0)*50%), calc(var(--dy,0)*50%)) rotate(12deg); }
  100%{ transform:translate(0,0) rotate(0deg); }
}
.piece.strike-bandit{ animation: strikeBandit .42s ease-in-out; }    /* Розбійник: різкий кидок */
@keyframes strikeBandit{
  0%  { transform:translate(0,0) scale(1); }
  50% { transform:translate(calc(var(--dx,0)*50%), calc(var(--dy,0)*50%)) scale(1.2); }
  100%{ transform:translate(0,0) scale(1); }
}

/* смерть: розвертається і падає, розчиняючись. Одна анімація для всіх, хто гине. */
.piece.die{ animation: die .6s ease-in forwards; transition:none; }
@keyframes die{
  0%  { transform:rotate(0deg)  translateY(0);    opacity:1; }
  45% { transform:rotate(80deg) translateY(10%);  opacity:1; }
  100%{ transform:rotate(90deg) translateY(40%);  opacity:0; }
}


/* ---------- права колонка ---------- */
.card{
  flex:none;
  background:var(--bg2); border:1px solid var(--line); border-radius:var(--r); padding:10px 12px;
}
.card-title{
  display:flex; align-items:center; gap:8px;
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim); margin-bottom:7px; font-weight:600;
}
/* лічильник у заголовку картки: «1/2» наказів, золото */
.card-title .cnt{
  margin-left:auto; display:inline-flex; gap:8px; align-items:center;
  letter-spacing:0; text-transform:none; font-size:12px; color:var(--muted);
}
.card-title .cnt b{ color:var(--gold-hi); font-weight:600; }
.card-title .clock{ margin-left:0; }
.hidden{ display:none !important; }

/* Ширма входу на сторінці гри (js/gate.js). Та сама думка, що й на головній:
   без гаманця нема акаунта, а без акаунта нема кого відрізняти від нечесного. */
/* Ті самі ворота, що й на головній (img/gate.jpg): дві сторінки мусять читатись як
   одні двері, а не як два різні вікна. Тут ворота закриті й нікуди не ведуть —
   лише кнопка на головну, де є вхід гаманцем. Тому й руху менше: саме дихання кадру. */
.play-gate{ position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  padding: 16px; background: #07060a; overflow: hidden; }
.play-gate::before{
  content: ''; position: absolute; inset: -5%;
  background: url('../img/gate.jpg') center 46% / cover no-repeat;
  animation: playGateBreath 30s ease-in-out infinite alternate;
}
.play-gate::after{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 85% at 50% 52%, rgba(0,0,0,0) 38%, rgba(0,0,0,.6) 100%);
}
@keyframes playGateBreath{
  from{ transform: scale(1.02) translate3d(0,0,0); }
  to  { transform: scale(1.08) translate3d(0,-1.4%,0); }
}
.play-gate-box{ position: relative; z-index: 2; max-width: 500px; width: 100%; text-align: center;
  padding: 36px 30px 30px;
  background: radial-gradient(115% 100% at 50% 46%, rgba(6,5,8,.88) 0%, rgba(6,5,8,.6) 52%, rgba(6,5,8,0) 100%); }
.play-gate-title{ font-size: 40px; letter-spacing: .34em; text-indent: .34em; font-weight: 800; color: #f6d99a;
  margin-bottom: 12px; text-shadow: 0 0 30px rgba(255,178,86,.42), 0 2px 18px rgba(0,0,0,.85); }
.play-gate-box p{ margin: 0 auto 18px; max-width: 27em; line-height: 1.6;
  color: rgba(246,241,233,.92); text-shadow: 0 2px 16px rgba(0,0,0,.9); }
@media (prefers-reduced-motion: reduce){ .play-gate::before{ animation: none; } }
.play-gate-box .btn{ display: inline-block; text-decoration: none; }
body.gated{ overflow: hidden; }

/* ---------- заставка «стіл зібрано» (js/splash.js) ----------
   Фото трону Влада (img/splash-throne.jpg) на весь екран, поверх усього (z 300 > модалка 50,
   ширма 200). Текст лежить на м'якому затемненні низу, не на плашці — як і на воротах. */
.splash{ position:fixed; inset:0; z-index:300; background:#07060a; overflow:hidden; cursor:default;
  opacity:0; transition:opacity .45s ease; user-select:none; }
.splash.on{ opacity:1; }
.splash.off{ opacity:0; transition-duration:.6s; pointer-events:none; }
.splash-bg{ position:absolute; inset:-3%; background:url('../img/splash-throne.jpg') center 42% / cover no-repeat;
  animation:splashZoom 9s ease-out forwards; }
@keyframes splashZoom{ from{ transform:scale(1); } to{ transform:scale(1.07); } }
.splash::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top, rgba(4,3,6,.94) 0%, rgba(4,3,6,.62) 24%, rgba(4,3,6,0) 46%),
    linear-gradient(to bottom, rgba(4,3,6,.55) 0%, rgba(4,3,6,0) 26%),
    radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 45%, rgba(0,0,0,.5) 100%); }
.splash-head, .splash-tip, .splash-bar{ position:absolute; z-index:2; left:0; right:0; text-align:center; }
.splash-head{ top:7%; }
.splash-title{ font-family:var(--serif); font-size:46px; font-weight:700; letter-spacing:.36em; text-indent:.36em; color:#f6d99a;
  text-shadow:0 0 30px rgba(255,178,86,.42), 0 2px 18px rgba(0,0,0,.85); }
.splash-sub{ margin-top:6px; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(246,241,233,.82);
  text-shadow:0 2px 12px rgba(0,0,0,.9); }
.splash-tip{ bottom:17%; left:50%; right:auto; transform:translateX(-50%); width:min(100%, 44em); padding:0 16px;
  font-size:17px; line-height:1.55; color:rgba(246,241,233,.95);
  text-shadow:0 2px 14px rgba(0,0,0,.95), 0 0 28px rgba(0,0,0,.85); text-wrap:balance; }
.splash-lbl{ display:block; font-size:11px; letter-spacing:.24em; text-transform:uppercase; font-weight:700; color:var(--gold); margin-bottom:8px; }
.splash-bar{ bottom:10.5%; left:50%; right:auto; transform:translateX(-50%); width:min(60%, 420px); height:2px;
  background:rgba(246,217,154,.16); }
.splash-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg, #e0a33e, #f6d99a);
  box-shadow:0 0 10px rgba(240,193,99,.7); transition:width linear; }
.splash.on .splash-bar i{ width:100%; }
@media (max-width:600px){
  .splash-title{ font-size:30px; }
  .splash-sub{ font-size:11px; }
  .splash-tip{ font-size:15px; bottom:19%; }
}
@media (prefers-reduced-motion: reduce){ .splash-bg{ animation:none; } }

/* Ці картки лишились у DOM для main.js, але на панелі їх нема: підказку
   «Наказ 1 з 2» і «Як читати дошку» перенесено в Правила, таблицю Реліквій —
   у вікно дипломатії та підсумок партії. */
#stepBox, #legendBox, #relicBox{ display:none !important; }

.hint{ font-size:12px; color:var(--muted); line-height:1.55; }
.piece-head{ display:flex; align-items:center; gap:8px; font-weight:600; margin-bottom:4px; }
.piece-head .glyph{ font-size:22px; }

/* стан раунду в картці наказів, коли планувати зараз не можна */
.status{ font-size:12px; color:var(--muted); line-height:1.5; }
.status b{ color:var(--text); font-weight:600; }

/* ---------- «що робити зараз» (сховано, лишилось для main.js) ---------- */
.step{ border-radius:var(--r); padding:12px 13px; background:var(--bg2); border:1px solid var(--line); }
.step-n{ font-size:12px; color:var(--gold); font-weight:600; }
.step-t{ font-size:17px; font-weight:700; margin:2px 0 3px; }
.step-h{ font-size:12px; color:var(--muted); line-height:1.5; }

/* ---------- легенда: свотчі позначок (тепер живуть у Правилах) ---------- */
.legend{ display:flex; flex-direction:column; gap:6px; font-size:12px; }
.lg{ display:flex; align-items:center; gap:9px; }
.lg .sw{
  position:relative; width:26px; height:26px; border-radius:4px; flex:none;
  background:#3d5a42;                       /* шматочок тієї самої карти */
  outline:1px solid var(--grid); outline-offset:-1px;
}
/* ставка малюється рамкою всієї клітинки — свотч має показувати те саме */
.lg .sw.risky{ outline:2px dashed rgba(120,180,255,.95); outline-offset:-2px; }
.lg .sw.fog0{ background:rgba(4,7,12,.95); }
.lg .sw.fog1{ background:#22322a; }
.lg .sw.fog2{ background:#3d5a42; }

.modes{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; align-items:center; }
.sub{ font-size:11px; font-weight:600; margin:9px 0 4px; color:var(--dim); letter-spacing:.08em; text-transform:uppercase; }

.order{
  display:flex; align-items:center; gap:8px;
  background:var(--bg3); border:1px solid var(--line); border-radius:8px;
  padding:7px 9px; margin-bottom:6px; font-size:12px;
}
.order b{ color:var(--gold-hi); font-weight:600; }
.order .x{ margin-left:auto; cursor:pointer; color:var(--dim); font-weight:700; padding:0 4px; }
.order .x:hover{ color:#ff7a62; }
.slot-empty{
  border:1px dashed var(--line2); border-radius:8px; padding:7px 9px;
  font-size:12px; color:var(--dim); margin-bottom:6px;
}

.hire-list{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }

/* нейтральне пояснення (без червоного/зеленого) */
.note{ background:rgba(201,162,74,.08); border:1px solid var(--line); color:var(--muted);
       margin-top:8px; padding:7px 9px; border-radius:8px; font-size:12px; line-height:1.5; }
.note.warn{ background:rgba(200,52,31,.12); border-color:rgba(200,52,31,.45); color:#f3c4b8; }
.note.ok  { background:rgba(111,159,90,.12); border-color:rgba(111,159,90,.45); color:#cfe6c2; }

/* ---------- кнопки ---------- */
.btn{
  background:var(--bg3); color:var(--text);
  border:1px solid var(--line2); border-radius:8px;
  padding:7px 12px; font-size:13px; cursor:pointer; font-family:inherit;
  transition:border-color .12s, background .12s;
}
.btn:hover{ border-color:var(--gold); background:#33291b; }
.btn.ghost{ background:transparent; }
.btn.ghost:hover{ background:var(--bg3); }
/* Головна кнопка — темно-червоний лак із золотим написом і тонкою золотою рамкою */
.btn.primary{
  background:linear-gradient(180deg,#8e3b26,#6e2a1a);
  border-color:var(--gold); color:var(--gold-hi); font-weight:600;
  letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.btn.primary:hover{ background:linear-gradient(180deg,#9c4430,#7a3020); border-color:var(--gold-hi); }
.btn.big{ padding:12px 13px; font-size:14px; }
.btn.on{ background:var(--gold); border-color:var(--gold); color:#1a1305; font-weight:600; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn.small{ padding:6px 9px; font-size:12px; }

/* «Готово» приклеєна до низу колонки: колонка прокручується, кнопка — ні */
.right #doneBtn{ position:sticky; bottom:0; z-index:2; flex:none; }

/* ---------- журнал і вкладки дипломатії ----------
   Одна картка: [Події] [Бот A] [Бот B] [Бот C]. «Події» — журнал;
   вкладка гравця — панель дипломатії з ним (подарунок, торг, чат). */
.log-card{ flex:1; display:flex; flex-direction:column; min-height:180px; }
.tabs{
  display:flex; gap:2px; flex:none;
  margin:-2px -4px 8px; border-bottom:1px solid var(--line);
  overflow-x:auto; scrollbar-width:none;
}
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  position:relative; flex:none;
  padding:5px 9px 7px; margin-bottom:-1px;
  font-family:inherit; font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--dim); background:none; border:0; border-bottom:2px solid transparent;
  cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; gap:5px;
}
.tab:hover{ color:var(--muted); }
.tab.on{ color:var(--gold-hi); border-bottom-color:var(--gold); }
.tab.dead{ opacity:.4; cursor:default; }
.tab .dot{ width:7px; height:7px; }
/* непрочитане повідомлення від цього гравця */
.tab.unread::after{
  content:''; position:absolute; top:4px; right:2px;
  width:6px; height:6px; border-radius:50%; background:#ff6a50;
}
.log{ flex:1; min-height:110px; max-height:44vh; overflow-y:auto; font-size:12px; line-height:1.5;
      scrollbar-width:thin; scrollbar-color:var(--gold-dim) transparent; }
.log div{ padding:3px 0; border-bottom:1px solid rgba(201,162,74,.07); color:var(--muted); }
.log div.big{ color:var(--gold-hi); font-weight:600; }
.log div.me{ color:var(--text); }
/* панель дипломатії — вміст вкладки гравця, без власної рамки */
.diplo{ font-size:12px; }

/* ---------- вікно правил / фіналу ---------- */
.modal{ position:fixed; inset:0; background:rgba(8,5,2,.8); display:flex; align-items:center; justify-content:center; padding:20px; z-index:50; }
.modal-body{
  background:var(--bg2); border:1px solid var(--line2); border-radius:14px;
  padding:22px 24px; max-width:680px; max-height:86vh; overflow-y:auto;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  scrollbar-width:thin; scrollbar-color:var(--gold-dim) transparent;
}
.modal-body h2{ margin:0 0 12px; font-family:var(--serif); font-size:28px; font-weight:700; letter-spacing:.04em; color:var(--gold-hi); }
.modal-body h3{ margin:18px 0 6px; font-family:var(--serif); font-size:19px; font-weight:700; color:var(--gold); }
.modal-body p, .modal-body li{ font-size:13px; line-height:1.65; color:var(--muted); }
.modal-body b{ color:var(--text); }
.modal-body ul{ margin-top:4px; padding-left:20px; }
/* легенда всередині Правил — ті самі позначки, що й на дошці */
.modal .legend{ margin:6px 0 10px; }

select.btn, input.btn{ padding:5px 7px; }

/* ---------- дипломатія ----------
   Картка чужого гравця — це кнопка: клацнув і домовляєшся саме з ним. */
.pl.talkable{ cursor:pointer; }
.pl.talkable:hover{ border-color:var(--gold); }
.pl.talkable::after{
  content:'🤝'; position:absolute; right:7px; bottom:5px;
  font-size:10px; opacity:.3;
}
.pl.talkable:hover::after{ opacity:.9; }

.diplo-head{ display:flex; align-items:center; gap:7px; font-size:14px; margin-bottom:8px; }
.diplo-head .x{ margin-left:auto; cursor:pointer; color:var(--muted); font-weight:700; padding:0 4px; }
.diplo-head .x:hover{ color:var(--text); }

/* Мета гри + значення іконок одним рядком. Це єдине місце, де сказано,
   як узагалі виграти, і воно не залежить від наведення мишею (на телефоні його нема). */
.key{
  flex:none;
  font-size:11px; color:var(--dim); line-height:1.5;
  display:flex; flex-wrap:wrap; gap:2px 12px; padding:0 2px;
}
.key b{ color:var(--muted); font-weight:600; }

/* хрестик угорі модального вікна — щоб не гортати всі Правила до кнопки внизу */
.modal-x{
  position:sticky; top:-10px; float:right; margin:-8px -6px 0 0;
  width:32px; height:32px; border-radius:8px; z-index:2;
  background:var(--bg3); color:var(--muted); border:1px solid var(--line2);
  font-size:15px; cursor:pointer; font-family:inherit;
}
.modal-x:hover{ color:var(--text); border-color:var(--gold); }

/* згорнутий блок — щоб рідковживане не забивало екран */
details.fold{ margin-top:8px; border-top:1px solid var(--line); padding-top:7px; }
details.fold > summary{
  cursor:pointer; list-style:none; font-size:12px; font-weight:600; color:var(--muted);
  display:flex; align-items:center; gap:6px;
}
details.fold > summary::-webkit-details-marker{ display:none; }
details.fold > summary::before{ content:'▸'; color:var(--dim); }
details.fold[open] > summary::before{ content:'▾'; }
details.fold > summary:hover{ color:var(--text); }

/* ---------- шар 3D-статуеток (js/pieces3d.js) ---------- */
/* Лежить над дисками-підставками, але під сценками бою. Кліки крізь нього
   проходять так само, як крізь шар фігур. Розмір і зсув ставить JS: полотно
   навмисно вилазить угору за дошку, щоб верхньому рядку не зрізало голови. */
.stage3d{
  position:absolute;
  pointer-events:none;
  z-index:4;
}

/* Коли 3D-каміння справді завантажилось — плаский сірий трикутник ховаємо,
   інакше він стирчав би з-під валуна. Клас ставить pieces3d.js і лише після
   того, як модель прочиталась: якщо WebGL нема, трикутник лишається на місці. */
body.rocks3d .rk{ display:none; }

/* ---------- фігура зі статуеткою ----------
   Підставку прибрано: біла шайба під ногами читалась як недороблена фігура.
   Лишилась м'яка тінь — тільки щоб мініатюра не висіла в повітрі.
   Чия фігура, тепер показує ОБВІДКА самої статуетки (pieces3d.js), а не диск. */
.piece.has3d{ align-items:flex-end; }
.piece.has3d i{
  /* Ширше, нижче й блідіше за попереднє: щільний темний овал читався як
     підставка. Тепер це саме тінь — фігура не висить, але й не стоїть на шайбі. */
  width:48%; height:5%;
  margin-bottom:19%;
  color:transparent; text-shadow:none;
  background:rgba(0,0,0,.28);
  border:0; border-radius:50%;
  box-shadow:0 0 10px 7px rgba(0,0,0,.22);
}
.piece.has3d.fog i{ background:transparent; box-shadow:none; }




/* ---- панель огляду під полотном ----
   Поворот на 90° і обмежений зум. Для пласкої HTML-дошки це вся «камера»;
   у 3D ті самі кнопки крутять камеру навколо дошки. */
.viewbar{
  flex:none; align-self:center;
  display:flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:var(--r);
  background:var(--bg2);
  border:1px solid var(--line);
}
.viewbar button{
  min-width:30px; height:28px; padding:0 8px;
  border:1px solid var(--line2); border-radius:6px;
  background:var(--bg3);
  color:var(--gold); font-size:15px; line-height:1; cursor:pointer; font-family:inherit;
  transition:background .12s, border-color .12s;
}
.viewbar button:hover{ background:#33291b; border-color:var(--gold); }
.viewbar button:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.viewbar .vnum{
  min-width:44px; text-align:center; font-size:12px;
  color:var(--muted); font-variant-numeric:tabular-nums;
}
.viewbar .vsep{ width:1px; height:18px; background:var(--line2); opacity:.7; }

/* ---- одна будівля — один значок ----
   Коли будівлі показує 3D-шар, намальований глиф (FA 
F5FC 
F4B0) мусить зникнути:
   інакше на клітинці ДВА значки — плаский і сама модель. Те саме правило
   вже діяло для каміння (body.rocks3d .rk). Лишається кольорова крапка
   власника: 3D-модель не має кольору армії, а знати, чия будівля, треба. */
body.bld3d .bld[data-b]{
  font-size:0; line-height:0;
  width:7px; height:7px; border-radius:50%;
  background:var(--bldcol, #cbb68a);
  box-shadow:0 0 0 1.5px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.85);
  filter:none;
}
body.bld3d .bld.wip[data-b]{ opacity:.5; }

/* Кнопка повернення показується ЛИШЕ коли огляд справді зсунуто — інакше
   вона просто шум. Поки дошка стоїть під гравцем і масштаб 1, її нема. */
.viewbar .vreset{ display:none; }
.viewbar.moved .vreset{
  display:inline-flex; align-items:center; gap:5px;
  width:auto; min-width:0; padding:0 11px;
  font-size:12px; font-weight:600; letter-spacing:.01em;
  color:#1b1206;
  background:linear-gradient(#f0c96f,#d9a844);
  border-color:#f4dca2;
  animation:vpulse 1.9s ease-in-out infinite;
}
.viewbar.moved .vreset:hover{ background:linear-gradient(#ffdb8a,#e8bd55); }
@keyframes vpulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(240,201,111,.55); }
  50%    { box-shadow:0 0 0 5px rgba(240,201,111,0); }
}
@media (prefers-reduced-motion:reduce){ .viewbar.moved .vreset{ animation:none; } }

/* ---- чия фігура: підсвітка САМОЇ КЛІТИНКИ ----
   Замість прапорця за спиною. Колір під ногами читається на будь-якому
   масштабі, не затуляє статуетку і не додає жодного трикутника в сцену.
   Живе в ::after, бо ::before у клітинки вже зайнятий позначками ходу. */
.cell.owned::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background: color-mix(in srgb, var(--pcol) 20%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pcol) 58%, transparent);
}
/* своя армія — помітніше: її треба знаходити очима найшвидше */
.cell.owned.ownmine::after{
  background: color-mix(in srgb, var(--pcol) 28%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pcol) 85%, transparent),
              inset 0 0 10px color-mix(in srgb, var(--pcol) 30%, transparent);
}
/* у тумані підсвітку глушимо — інакше вона видавала б чужі фігури */
.cell.owned:not(.lit):not(.explored)::after{ display:none; }

/* ---------- ТРИВИМІРНИЙ РЕЖИМ ----------
   Пласка дошка НЕ видаляється: вона лишається в потоці, просто невидима.
   Це навмисно — 3D читає з неї стан клітинок і фігур і туди ж пересилає
   кліки. Тому visibility, а не display: при display:none браузер перестає
   рахувати стилі, і зникло б визначення «фігуру видно чи вона в тумані». */
.board3d-host{
  display:none;
  position:relative;
  width:100%; height:auto;
  flex:1; min-height:240px;
  border-radius:var(--r); overflow:hidden;
  background:#0f0d0a;
  border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  touch-action:none;
}
.board3d-host .c3d{
  display:block; width:100%; height:100%;
  /* ОБОВ'ЯЗКОВО. Вище в цьому файлі є правило pointer-events:none для полотна
     плаского шару — воно мусить пропускати кліки до клітинок під собою. Але
     воно чіпляло й це полотно, і промінь ніколи не запускався: клік пролітав
     наскрізь у <main>. Тут навпаки — саме полотно і є дошкою. */
  pointer-events:auto;
}
body.mode3d .board3d-host{ display:block; }
/* полотно 3D має бути на екрані ще до того, як відпрацює скрипт — інакше
   на пів секунди блимає порожня пласка рамка */
body.mode3d .board-stage{
  visibility:hidden;
  position:absolute; pointer-events:none;
  width:min(64vh,580px); height:min(64vh,580px);
  left:-99999px;
}
.viewbar button.on{
  background:linear-gradient(#f0c96f,#d9a844);
  color:#1b1206; border-color:#f4dca2;
}

/* Дошка (пласка чи 3D) і панель огляду під нею. Полотно бере всю висоту,
   що лишилась після смужки гравців. */
.board-wrap{
  flex:1; min-height:0;
  display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:0;
}
/* без 3D (WebGL нема) — пласка дошка по центру, як і була */
body:not(.mode3d) .board-wrap{ align-items:center; overflow:auto; }

/* повний екран: полотно на весь монітор, керування — з клавіатури (Q/E, +/-, Esc виходить) */
.board3d-host:fullscreen{
  width:100vw !important; height:100vh !important;
  border:0; border-radius:0; box-shadow:none;
}
.viewbar button[data-act="full"]{ display:none; }
body.mode3d .viewbar button[data-act="full"]{ display:inline-flex; }

/* ---- підказка на телефоні: у вертикальному положенні один дотик — повний
   екран у ширину. На десктопі й у горизонтальному телефоні її нема. ---- */
.rot-hint{
  display:none; position:absolute; left:50%; top:12px; transform:translateX(-50%);
  padding:8px 14px; border-radius:20px; border:1px solid var(--line2);
  background:rgba(20,16,10,.85); color:var(--gold-hi); font-size:13px; font-weight:600;
  z-index:3; cursor:pointer; white-space:nowrap; font-family:inherit;
}
@media (pointer: coarse) and (orientation: portrait){
  body.mode3d .rot-hint{ display:block; }
}
.board3d-host:fullscreen .rot-hint{ display:none; }

/* ---- iPhone: справжнього повного екрана для сторінки нема (лише для відео) — «псевдо-повний»:
   полотно фіксується на весь екран поверх сторінки (board3d.js fullscreen()). Вихід — ✕ у кутку або ⛶ ще раз. ---- */
.board3d-host.pseudo-full{
  position:fixed !important; inset:0; z-index:1000;
  width:100vw !important; height:100vh !important; height:100dvh !important;
  min-height:0 !important; max-height:none !important; flex:none !important;
  border:0; border-radius:0; box-shadow:none;
}
body.pseudo-full{ overflow:hidden; }
.board3d-host.pseudo-full .rot-hint{ display:none; }
.full-exit{
  display:none; position:absolute; right:calc(10px + env(safe-area-inset-right)); top:calc(10px + env(safe-area-inset-top));
  z-index:4; width:38px; height:38px; border-radius:50%; border:1px solid var(--line2);
  background:rgba(20,16,10,.85); color:var(--gold-hi); font-size:18px; line-height:1; cursor:pointer; font-family:inherit;
}
.board3d-host.pseudo-full .full-exit{ display:block; }

/* ---- дотики на телефоні ----
   Без цього свайп по полотну сприймається як жест браузера: «потягни, щоб
   оновити», або «назад» від краю екрана — і вкладка з грою ледь не закривається. */
html, body{ overscroll-behavior:none; }
body{ overflow-x:hidden; }
.board3d-host, .board3d-host .c3d{ touch-action:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }

/* ============================================================
   РОЗКЛАДКИ ПІД ЕКРАН
   ============================================================ */

/* Вузький десктоп / планшет у ширину: колонка трохи вужча */
@media (max-width: 1000px){
  .main{ grid-template-columns:minmax(0,1fr) 262px; }
  .app{ padding:8px; gap:8px; }
}

/* ---------- телефон у ширину (landscape) ----------
   Висота маленька, тому кожен піксель — полотну: шапка в один тонкий рядок,
   гравці — чотири крихітні картки, мета гри схована (вона в Правилах),
   права колонка вузька й прокручується сама. */
@media (orientation: landscape) and (max-height: 500px), (orientation: landscape) and (max-width: 980px) and (pointer: coarse){
  html{ -webkit-text-size-adjust:100%; }
  body{ touch-action:manipulation; }
  .app{ padding:5px 6px calc(5px + env(safe-area-inset-bottom)); gap:5px; }
  .top{ padding:3px 10px; gap:8px; border-radius:8px; }
  .brand{ font-size:16px; letter-spacing:.24em; }
  .round-info{ font-size:11px; gap:6px; }
  .chip{ padding:2px 8px; font-size:10px; }
  .top-actions .btn{ padding:4px 8px; font-size:11px; }

  .main{ grid-template-columns:minmax(0,1fr) 240px; gap:6px; }
  .left{ gap:5px; }
  .right{ gap:6px; }
  .key{ display:none; }

  .players{ gap:4px; }
  .pl{ padding:3px 6px; font-size:10px; border-radius:7px; }
  .pl-name{ margin-bottom:1px; gap:4px; }
  .pl .stats{ font-size:10px; line-height:1.35; gap:0 6px; }
  .pl .stats + .stats{ display:none; }       /* рядок будівель — лише на великому екрані */
  .pl.talkable::after{ display:none; }
  .ord{ width:14px; height:14px; font-size:9px; }

  .board-wrap{ gap:4px; }
  .board3d-host{ min-height:0; border-radius:8px; }
  .viewbar{ padding:2px 6px; gap:4px; }
  .viewbar button{ min-width:26px; height:24px; font-size:13px; }
  .viewbar .vnum{ min-width:36px; font-size:11px; }

  .card{ padding:7px 9px; border-radius:8px; }
  .card-title{ margin-bottom:5px; }
  .btn.big{ padding:9px; font-size:13px; }
  .btn.small{ padding:5px 8px; }
  input.btn, select.btn{ font-size:16px; }       /* iPhone не зумить, якщо ≥16px */
  .log{ min-height:80px; max-height:none; }
  .log-card{ min-height:120px; }
  .modal-body{ max-height:94vh; padding:14px 16px; }
}

/* ---------- телефон вертикально (portrait) ----------
   Одна колонка: полотно зверху на всю ширину, під ним картки одним стовпчиком.
   Сторінка прокручується, «Готово» приклеєна до низу екрана. */
@media (orientation: portrait) and (max-width: 1000px){
  html, body{ height:auto; }
  html{ -webkit-text-size-adjust:100%; }
  body{ touch-action:manipulation; }
  .app{ height:auto; min-height:100vh; padding:8px; padding-bottom:84px; gap:8px; }

  .top{ flex-wrap:wrap; gap:6px 8px; padding:7px 10px; }
  .brand{ font-size:18px; }
  .round-info{ order:3; flex-basis:100%; font-size:11px; }
  .top-actions .btn{ padding:6px 10px; font-size:12px; }

  /* display:contents розчиняє колонки, і всі картки стають одним стовпчиком,
     який можна перевпорядкувати. */
  .main{ display:flex; flex-direction:column; gap:8px; align-items:stretch; flex:none; }
  .left, .right{ display:contents; }
  .board-wrap{ order:1; flex:none; }
  .players{ order:2; }
  #hireBox{ order:3 } #selInfo{ order:4 } #ordersBox{ order:5 } #doneBtn{ order:6 }
  .log-card{ order:7; min-height:0; } .key{ order:8 }

  .board3d-host{ flex:none; height:58vh; min-height:260px; }
  body:not(.mode3d) .board-stage{ width:100%; max-width:none; --pad:5px; }   /* пласка дошка без WebGL */
  .cell{ font-size:min(6.5vw, 30px); }
  .piece i{ font-size:min(5.4vw, 26px); }
  .bld{ font-size:9px; left:2px; }
  .coords-x{ top:-13px; font-size:9px; }
  .coords-y{ left:-13px; font-size:9px; }

  .players{ grid-template-columns:repeat(2,1fr); gap:6px; }
  .pl{ padding:6px 8px; }
  .card{ padding:9px 10px; }
  .btn{ padding:9px 12px; font-size:14px; }      /* більші кнопки під палець */
  .btn.small{ padding:8px 10px; font-size:13px; }
  input.btn, select.btn{ font-size:16px; }       /* iPhone не зумить, якщо ≥16px */
  .log{ max-height:200px; }
  .order .x{ padding:6px 10px; margin:-6px -6px -6px auto; font-size:15px; }

  /* «Готово» завжди під рукою: приклеєна до низу екрана */
  .right #doneBtn, #doneBtn{
    position:fixed; left:8px; right:8px; bottom:calc(8px + env(safe-area-inset-bottom));
    z-index:40; box-shadow:0 6px 20px rgba(0,0,0,.5);
  }

  .modal{ padding:8px; align-items:flex-end; }
  .modal-body{ max-width:100%; width:100%; max-height:92vh; padding:14px; border-radius:14px 14px 10px 10px; }
}

/* ---- ноутбук: полотну всю висоту ----
   Картки гравців переносить у праву колонку board3d.js (relayoutForBigBoard),
   тут — лише як вони там лежать. Панель огляду — поверх низу полотна. */
body.players-aside .right #players{ grid-template-columns:1fr 1fr; gap:6px; }
body.players-aside .right .pl{ padding:6px 8px; font-size:11px; }
body.players-aside .right .pl .stats{ gap:5px; }
body.players-aside #goalKey{ display:none; }
body.players-aside .board-wrap{ position:relative; }
body.players-aside .viewbar{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:5;
  background:rgba(20,16,10,.78); backdrop-filter:blur(2px);
}

/* ---------- торг: форма «ціна + валюта, Купити / Продати» у вкладці гравця ----------
   Нові класи лише; палітру (:root) не чіпаємо. */
.diplo-head .msg-btn{ margin-left:auto; padding:4px 8px; font-size:11.5px; }
.diplo-head .msg-btn + .x{ margin-left:0; }
.msg-menu{
  display:flex; flex-wrap:wrap; gap:5px; margin:0 0 8px;
  padding:7px 8px; background:var(--bg3); border:1px solid var(--line2); border-radius:8px;
}
.msg-menu .msg-pick{ flex:1 1 auto; text-align:left; }
.chat-lines{ font-size:12px; line-height:1.45; margin-bottom:6px; padding:5px 8px; border-left:2px solid var(--line2); }
.chat-lines div{ color:var(--muted); }
.chat-lines div.me b{ color:var(--gold); font-weight:600; }
.chat-lines div.him b{ color:var(--text); font-weight:600; }

.trade-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:6px; }
.price-lab{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); }
.price-lab input{ width:58px; text-align:center; }
.seg{ display:inline-flex; }
.seg .btn{ border-radius:0; }
.seg .btn:first-child{ border-radius:8px 0 0 8px; }
.seg .btn:last-child{ border-radius:0 8px 8px 0; margin-left:-1px; }
.trade-btns .trade-btn{ flex:1 1 120px; }
.trade-say{ margin-top:6px; color:var(--text); }
.trade-why{ margin-top:3px; color:#f3c4b8; opacity:.85; }
.trade-why:empty{ display:none; }
.note.bad{ background:rgba(200,52,31,.12); border-color:rgba(200,52,31,.45); color:#f3c4b8; }

/* ---------- плашка «тобі пропонують» (#offerBox): sticky зверху правої колонки ---------- */
.offer{
  position:sticky; top:0; z-index:3;
  padding:8px 10px;
  border-color:var(--gold); box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.offer-item{ display:flex; align-items:center; gap:8px; }
.offer-item + .offer-item{ margin-top:6px; padding-top:6px; border-top:1px solid var(--line); }
.offer-text{ flex:1; min-width:0; font-size:12px; line-height:1.45; color:var(--text); }
.offer-note{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.offer-note > div:first-child{ flex:1 1 140px; }
/* значки ✓ ✗ ⇄ — великі, під палець */
.offer-btns{ display:flex; gap:5px; flex:none; }
.obtn{
  min-width:40px; min-height:40px; border-radius:9px; font-size:19px; line-height:1;
  background:var(--bg3); color:var(--text); border:1px solid var(--line2); cursor:pointer; font-family:inherit;
}
.obtn:hover{ border-color:var(--gold); }
.obtn.ok{ color:#9fe08a; }
.obtn.no{ color:#ff8a72; }
.obtn.alt{ color:var(--gold-hi); }

@media (orientation: landscape) and (max-height: 520px){
  .offer{ padding:6px 8px; }
  .offer-text{ font-size:11px; }
  .obtn{ min-width:40px; min-height:40px; font-size:17px; }
}
@media (orientation: portrait) and (max-width: 1000px){
  #offerBox{ order:3; }
  .obtn{ min-width:44px; min-height:44px; }
}