:root {
  --green: #0f3d2e;
  --green2: #155e45;
  --gold: #e8b923;
  --red: #b91c1c;
  --cream: #f7f1e1;
  --ink: #1b1b1b;
  --muted: #6b7280;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--green);
  background-image: repeating-linear-gradient(45deg, #ffffff06 0 12px, transparent 12px 24px);
  color: #fff;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  user-select: none;
}
[hidden] { display: none !important; }
.screen { max-width: 640px; margin: 0 auto; padding: 8px; }

/* ---------- Логотип ---------- */
.logo-big { font-size: 46px; font-weight: 900; text-align: center; margin-top: 28px; letter-spacing: 1px; }
.logo-big span, .logo-sm span, .center-logo span { color: var(--gold); }
.sub { text-align: center; margin: 4px 0 18px; opacity: .8; }
.logo-sm { font-weight: 900; font-size: 18px; }
.hint { text-align: center; font-size: 12px; opacity: .6; }

/* ---------- Кнопки ---------- */
.btn {
  border: 0; border-radius: 12px; padding: 12px 16px; font-size: 15px; font-weight: 700;
  background: #fff; color: var(--ink); cursor: pointer;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; }
.btn.gold { background: var(--gold); color: #3b2a00; }
.btn.red { background: var(--red); color: #fff; }
.btn.green { background: #22c55e; color: #052e16; }
.btn.ghost { background: #ffffff1a; color: #fff; }
.btn.small { padding: 7px 10px; font-size: 13px; border-radius: 9px; }
.btn.wide { width: 100%; margin: 10px 0; padding: 15px; font-size: 17px; }
.icon-btn { background: #ffffff1a; color: #fff; border: 0; border-radius: 10px; width: 36px; height: 36px; font-size: 17px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Настройка ---------- */
.card { background: #ffffff12; border-radius: 16px; padding: 12px; margin: 10px 0; }
.card h3 { margin: 0 0 10px; }
.prow { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.prow input { flex: 1; min-width: 0; padding: 10px; border-radius: 10px; border: 0; font-size: 15px; }
.prow .tok { font-size: 24px; width: 42px; height: 42px; border-radius: 10px; border: 0; background: #fff; }
.prow .kind { padding: 10px 8px; border-radius: 10px; border: 0; font-weight: 700; min-width: 74px; }

/* ---------- Игровой экран: поле на весь экран ---------- */
#game {
  height: 100vh; height: 100dvh; display: flex; flex-direction: column;
  padding: 4px 4px 6px; max-width: 640px;
}
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 4px; flex: none; }
.gameinfo { font-size: 13px; opacity: .9; }
.gameinfo b { color: var(--gold); }

.board {
  flex: 1; min-height: 0; width: 100%;
  display: grid;
  grid-template-columns: 1.55fr repeat(7, 1fr) 1.55fr;
  grid-template-rows: 1.25fr repeat(12, 1fr) 1.25fr;
  gap: 2px; background: #0b2a20; border-radius: 6px; padding: 2px;
  position: relative;
}

/* ---------- Клетки ---------- */
.cell {
  background: var(--cream); color: var(--ink); position: relative; overflow: hidden; border-radius: 3px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 7.5px; line-height: 1.05; text-align: center; padding: 1px;
}
.cell .nm { font-weight: 700; overflow-wrap: normal; word-break: normal; hyphens: manual; position: relative; max-width: 100%; }
.cell .nm.nb { white-space: nowrap; overflow-wrap: normal; letter-spacing: -.2px; }
.cell .pr { max-width: 100%; font-size: 7px; opacity: .8; margin-top: 1px; position: relative; }
.cell .em { font-size: 26px; line-height: 1.15; }
.cell .nm { line-height: 1.15; }
.cell .ico { width: 62%; max-width: 46px; }
/* свой значок-рисунок вместо эмодзи (например, «Валютка») */
.emsvg { width: 1.8em; height: 1.8em; vertical-align: middle; }
.cell .em .emsvg { display: block; margin: 0 auto; width: 1.5em; height: 1.5em; }
/* не даём клетке сплющивать значок и текст — подгонка размера делается шрифтом (fitNames) */
.cell .em, .cell .nm, .cell .pr { flex-shrink: 0; }

/* Цветная полоска с ценой — по внешнему краю поля */
.cell .strip {
  position: absolute; color: #fff; font-weight: 800; font-size: 8px; letter-spacing: -.2px;
  display: flex; align-items: center; justify-content: center; white-space: nowrap;
}
.hs.s-b { padding-bottom: 13px; }
.s-b .strip { left: 0; right: 0; bottom: 0; height: 12px; }
.hs.s-t { padding-top: 13px; }
.s-t .strip { left: 0; right: 0; top: 0; height: 12px; }
.hs.s-l { padding-left: 13px; }
.s-l .strip { top: 0; bottom: 0; left: 0; width: 12px; writing-mode: vertical-rl; transform: rotate(180deg); }
.hs.s-r { padding-right: 13px; }
.s-r .strip { top: 0; bottom: 0; right: 0; width: 12px; writing-mode: vertical-rl; }
/* Боковые клетки широкие: значок и название в ряд не нужны — оставляем столбиком */

/* Купленная клетка — залита цветом владельца, на полоске — текущая аренда */
.cell.owned { background: var(--own) !important; color: #fff; outline: none; }
.cell.owned .nm { text-shadow: 0 1px 1px #0008; color: #fff !important; }
.cell.owned .strip { box-shadow: inset 0 0 0 1px #fff6; }
.cell.mort { filter: grayscale(.9) opacity(.55); }
/* «Отключили свет»: бизнесы владельца затемнены и не приносят аренду */
.cell.dark { filter: brightness(.45) saturate(.6); }
.cell.dark::after { content: "💡"; position: absolute; top: 2px; left: 50%; transform: translateX(-50%); font-size: 10px; filter: grayscale(1); opacity: .9; }

/* Особые клетки */
.cell.chance, .cell.chest { background: #fdf6dc; }
.cell.chance .nm, .cell.chest .nm { color: #b45309; font-size: 1.1em; }
/* Города — козырные клетки: золотистый фон, рамка, крупный значок */
.cell.city {
  background: linear-gradient(160deg, #fff8dc 0%, #f6dc85 100%);
  outline: 2px solid var(--gold); outline-offset: -2px;
}
.cell.city .em { font-size: 30px; filter: drop-shadow(0 1px 1px #0003); }
.cell.city .nm { color: var(--green); font-size: 1.1em; font-weight: 900; hyphens: manual; overflow-wrap: normal; word-break: normal; }
.cell.raid { background: var(--cream); justify-content: flex-end; }
/* Фото рейда фоном клетки: приглушённое, чтобы клетка не выделялась */
.cell.raid::before {
  content: ""; position: absolute; inset: 0;
  background: url(img/raid.jpg) center 30% / cover no-repeat;
  background-image: image-set(url(img/raid.webp) type("image/webp"), url(img/raid.jpg) type("image/jpeg"));
  opacity: .55; filter: grayscale(.3) saturate(.8);
}
.cell.raid .nm, .cell.raid .pr { background: #f7f1e1d9; border-radius: 2px; padding: 0 2px; }

/* Углы */
.cell.go, .cell.gai, .cell.togai, .cell.treasury { font-size: 8px; }
.cell.go { background: #fdf0c4; }
.cell.go .em { font-size: 16px; }
.cell.treasury { background: #fff3c4; }
.cell.treasury .em { font-size: 26px; }
.cell.gai { background: #e7e5e4; }
.cell.gai .ico { width: 70%; max-width: 52px; }
.cell.togai { background: #e8f0e3; }
.cell.togai .ico { width: 88%; max-width: 70px; }
.cell.back, .cell.skipcell { background: #fdf6dc; }
.cell.back .nm, .cell.skipcell .nm { color: #b45309; }

/* Фишки — внизу клетки и полупрозрачные, чтобы не закрывать название */
.toks {
  position: absolute; left: 0; right: 0; bottom: 1px; display: flex; flex-wrap: wrap;
  justify-content: center; align-items: flex-end; pointer-events: none;
}
.hs.s-b .toks { bottom: 13px; }
.toks span { font-size: 13px; line-height: 1; opacity: .6; filter: drop-shadow(0 1px 1px #0006); transition: transform .15s, opacity .15s; }
.toks span.cur { opacity: .9; transform: scale(1.15); }

/* Фишка в пути: поверх поля, плавно едет к центру клетки и подпрыгивает на каждом шаге */
#mover { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; will-change: transform; }
#mover span {
  display: block; font-size: 22px; line-height: 1; transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 2px #0007);
}
@keyframes hop {
  0%   { transform: translate(-50%, -50%) scale(1); }
  45%  { transform: translate(-50%, -95%) scale(1.15); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* ---------- Центр поля: игроки, кубики, кнопки ---------- */
.center {
  grid-area: 2 / 2 / 14 / 9;
  background: radial-gradient(circle at 50% 40%, #1d5c45 0, #0f3d2e 75%);
  border-radius: 4px; color: #fff;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 6px; min-height: 0; overflow-y: auto;
}
.center-logo { font-size: 22px; font-weight: 900; text-align: center; letter-spacing: 1px; opacity: .9; margin-top: auto; }
.dice { display: flex; gap: 14px; justify-content: center; }
.die {
  width: 44px; height: 44px; background: var(--dc, #fff); border-radius: 10px; box-shadow: 0 3px 0 #0005, inset 0 0 0 1px #0002;
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 6px;
}
.die i { width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #0002; place-self: center; visibility: hidden; }
.die i.on { visibility: visible; }
/* Бросок: кубики подпрыгивают и кувыркаются, второй — в другую сторону */
.die.rolling { animation: tumble .38s linear infinite; }
.die.rolling + .die.rolling { animation: tumble2 .42s linear infinite; }
.die.land { animation: land .3s ease-out; }
@keyframes tumble {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(-7px, -16px) rotate(90deg); }
  50%  { transform: translate(-3px, -4px) rotate(180deg); }
  75%  { transform: translate(5px, -12px) rotate(270deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}
@keyframes tumble2 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(6px, -12px) rotate(-90deg); }
  50%  { transform: translate(2px, -18px) rotate(-180deg); }
  75%  { transform: translate(-5px, -6px) rotate(-270deg); }
  100% { transform: translate(0, 0) rotate(-360deg); }
}
@keyframes land {
  0%   { transform: scale(1.18) translateY(-6px); }
  60%  { transform: scale(.94) translateY(1px); }
  100% { transform: scale(1) translateY(0); }
}
.msg { font-size: 12px; text-align: center; font-weight: 600; min-height: 30px; opacity: .9; }

/* Игроки — карточки с аватаром и балансом */
.players { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.pl {
  background: #ffffff12; border-radius: 12px; padding: 6px 4px; text-align: center;
  border: 2px solid transparent; font-size: 11px; min-width: 0;
}
.pl .av {
  width: 42px; height: 42px; margin: 0 auto 2px; border-radius: 50%; font-size: 24px; line-height: 38px;
  background: #ffffff1a; border: 2px solid var(--pc);
}
.pl.cur { border-color: var(--gold); background: #ffffff22; }
.pl.cur .av { box-shadow: 0 0 10px var(--pc); }
.pl.out { opacity: .35; text-decoration: line-through; }
.pl .n { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl .m { font-size: 15px; font-weight: 800; color: var(--gold); }
.pl .m.neg { color: #f87171; }
.pl .d { font-size: 10px; color: #fca5a5; }

/* Журнал событий в центре поля */
.feed {
  font-size: 11px; line-height: 1.35; background: #0006; border-radius: 8px; padding: 6px 8px;
  max-height: 34%; overflow-y: auto; color: #e5e7eb; flex: 0 1 auto;
}
.feed div { margin-bottom: 1px; }
.dice { margin-top: auto; }

/* Карточка игрока: капитал в имуществе и кнопка «Сделка» */
.pl .cap { font-size: 10px; opacity: .75; }
.deal-btn {
  margin-top: 4px; border: 0; border-radius: 8px; padding: 4px 10px; font-weight: 700; font-size: 11px;
  background: #e11d48; color: #fff;
}

/* Свободная клетка: Отказ · Аукцион · Купить */
.buy-row { display: flex; gap: 6px; }
.buy-row .btn { flex: 1; padding: 12px 4px; font-size: 14px; }
.buy-row .btn:last-child { flex: 1.4; }

/* Окно сделки */
.deal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.deal h4 { margin: 0 0 6px; }
.deal-it { display: flex; align-items: center; gap: 5px; font-size: 13px; padding: 5px 0; border-bottom: 1px solid #eee; }
.deal-it .sw { width: 8px; height: 18px; border-radius: 3px; flex: none; }
.deal-it small { margin-left: auto; color: var(--muted); white-space: nowrap; }
.deal-money { display: flex; flex-direction: column; font-size: 12px; margin-top: 8px; gap: 3px; }
.deal-money input { padding: 8px; border: 1px solid #ccc; border-radius: 8px; font-size: 15px; width: 100%; }
.deal-sum { font-size: 13px; margin-top: 10px; }
.deal-sum .ok { color: #16a34a; } .deal-sum .bad { color: #dc2626; }
.muted { color: var(--muted); font-size: 13px; }
.auc-left { font-size: 18px; font-weight: 800; text-align: center; color: #b45309; }

/* Таймер хода */
.timer { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.timer .tbar { flex: 1; height: 6px; border-radius: 3px; background: #ffffff22; overflow: hidden; }
/* полоска таймера сжимается через transform (без перерасчёта раскладки каждые 250 мс) */
.timer .tbar i { display: block; height: 100%; width: 100%; background: var(--gold); transform-origin: left center; transition: transform .25s linear; will-change: transform; }
.timer span { font-size: 12px; font-weight: 700; min-width: 44px; text-align: right; }
.timer.warn .tbar i { background: #ef4444; }
.timer.warn span { color: #fca5a5; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .5; } }
.timer:not([hidden]) + .actions { margin-top: 0; }

/* Кнопки действий */
.actions { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.actions .btn { padding: 12px 8px; font-size: 15px; }
.actions .info { font-size: 12px; opacity: .85; text-align: center; }
.bottom { display: flex; gap: 4px; }
.bottom .btn { flex: 1; font-size: 16px; padding: 6px 2px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.bottom .btn span { font-size: 9px; font-weight: 600; opacity: .85; }

/* ---------- Лобби и комната ---------- */
.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; margin-bottom: 10px; color: inherit; }
.field input, .field select, .text-in {
  padding: 11px; border-radius: 10px; border: 1px solid #0002; font-size: 16px; width: 100%; background: #fff; color: var(--ink);
}
.modal .field { color: var(--ink); }
.net-dot { width: 12px; height: 12px; border-radius: 50%; background: #9ca3af; display: inline-block; margin-right: 12px; }
.net-dot.wait { background: #f59e0b; }
.net-dot.on { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.lobby-h { margin: 16px 2px 8px; }
.tables { display: flex; flex-direction: column; gap: 8px; }
.table-it { display: flex; align-items: center; gap: 10px; background: #ffffff12; border-radius: 12px; padding: 10px 12px; }
.table-it .tx { flex: 1; min-width: 0; }
.table-it small { display: block; opacity: .7; font-size: 12px; margin-top: 2px; }
.room-code { font-size: 26px; letter-spacing: 4px; color: var(--gold); }
.seats { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.seat { display: flex; align-items: center; gap: 8px; background: #ffffff14; border-radius: 10px; padding: 10px; font-weight: 600; }
.seat.empty { opacity: .45; font-weight: 400; border: 1px dashed #ffffff55; background: none; }
.seat .btn { margin-left: auto; }
.seat-tok { font-size: 22px; }
#game .pl .n { max-width: 100%; }
/* Тип стола при создании */
.ttype { display: flex; flex-direction: column; gap: 6px; }
.ttype-it { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border: 1px solid #0002; border-radius: 10px; cursor: pointer; }
.ttype-it:has(input:checked) { border-color: var(--gold); background: #fff8dc; }
.ttype-it input { margin-top: 3px; }
.ttype-it small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
/* Комната: тип стола и приглашения */
#roomName { flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 17px; }
.room-type { display: inline-block; background: #ffffff1a; border-radius: 8px; padding: 5px 9px; font-size: 13px; }
.invite-h { margin: 12px 0 6px; font-weight: 700; }
.invite-row { display: flex; gap: 6px; }
.invite-row .btn { flex: 1; padding: 12px 6px; }
.invite-tg { background: #229ED9; color: #fff; }
.invite-wa { background: #25D366; color: #052e16; }

/* ---------- Модальное окно ---------- */
.modal { position: fixed; inset: 0; background: #000a; display: flex; align-items: flex-end; justify-content: center; z-index: 50; }
.modal-box {
  background: #fff; color: var(--ink); width: 100%; max-width: 640px; max-height: 86vh; overflow-y: auto;
  border-radius: 20px 20px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  animation: up .2s ease-out;
}
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.modal-box h2 { margin: 0 0 8px; font-size: 20px; }
.modal-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.modal-btns .btn { flex: 1 1 40%; background: #eef2f0; }
.modal-btns .btn.gold { background: var(--gold); }
.modal-btns .btn.red { background: var(--red); color: #fff; }
.modal .art { width: 150px; display: block; margin: 0 auto 8px; }
.photo-raid {
  display: block; width: 100%; max-width: 260px; margin: 0 auto 10px;
  border-radius: 10px; filter: saturate(.7) contrast(.95); opacity: .9;
}
.deed { border: 2px solid #111; border-radius: 10px; overflow: hidden; }
.deed .hd { padding: 10px; color: #fff; text-align: center; font-weight: 800; font-size: 17px; }
.deed table { width: 100%; border-collapse: collapse; font-size: 14px; }
.deed td { padding: 5px 10px; border-top: 1px solid #eee; }
.deed td:last-child { text-align: right; font-weight: 700; }
.plist .it { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #eee; }
.plist .sw { width: 14px; height: 30px; border-radius: 4px; flex: none; }
.plist .tx { flex: 1; font-size: 14px; }
.plist .tx small { color: var(--muted); display: block; }
.cardx { background: #fffbea; border: 2px dashed var(--gold); border-radius: 14px; padding: 16px; font-size: 17px; text-align: center; }
.cardx .ttl { font-weight: 900; color: var(--green); margin-bottom: 8px; font-size: 19px; }
.quote { font-size: 19px; font-weight: 800; font-style: italic; color: #7c2d12; margin: 6px 0 12px; }
.quote small { display: block; font-size: 13px; font-style: normal; font-weight: 600; color: var(--muted); margin-top: 4px; }
.log { font-size: 13px; }
.log div { padding: 4px 0; border-bottom: 1px solid #f0f0f0; }

/* ---------- Тост ---------- */
.toast {
  position: fixed; left: 50%; top: 32%; transform: translateX(-50%);
  background: #111e; color: #fff; padding: 10px 16px; border-radius: 12px; z-index: 60; font-size: 14px;
  max-width: min(62vw, 360px); text-align: center; pointer-events: none;
}

/* Планшеты и широкие экраны */
@media (min-width: 560px) {
  .cell { font-size: 10px; }
  .cell .em { font-size: 28px; }
  .cell .strip { font-size: 10px; }
  .toks span { font-size: 18px; }
  .die { width: 56px; height: 56px; }
  .die i { width: 10px; height: 10px; }
  .msg { font-size: 14px; }
}

/* ================= HD-оформление: объём, блики, тени ================= */
body {
  background-color: #0c3226;
  background-image:
    radial-gradient(ellipse at 50% -10%, #1f6b50 0, transparent 60%),
    repeating-linear-gradient(45deg, #ffffff05 0 12px, transparent 12px 24px);
}
.cell .em, .toks span, #mover span, .pl .av, .prow .tok, .seat-tok {
  font-family: "Noto Color Emoji", "Segoe UI Emoji", "Apple Color Emoji", system-ui, sans-serif;
}

/* Логотип: картинка целиком (без обрезки) над названием */
.logo-pic {
  display: block; width: auto; height: 260px; max-width: 100%; object-fit: cover; margin: 14px auto -4px; border-radius: 14px;
  border: 3px solid var(--gold); box-shadow: 0 0 0 3px #0b2a20, 0 10px 26px #000a, 0 0 30px #e8b92355;
}
.logo-pic + .logo-big { margin-top: 10px; }
/* Логотип: золото с объёмом */
.logo-big { text-shadow: 0 3px 0 #0b2a20, 0 8px 20px #0009; }
.logo-big span {
  background: linear-gradient(180deg, #fff3b0 0%, #f5c842 45%, #c98f0a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 3px 0 #0b2a20) drop-shadow(0 6px 10px #0006);
}

/* Кнопки: глянец и «нажимаемый» край */
.btn { box-shadow: 0 2px 0 #0003, 0 4px 10px #0002; transition: transform .08s, filter .15s; }
.btn:active { transform: translateY(2px) scale(.98); }
.btn.gold, .modal-btns .btn.gold {
  background: linear-gradient(180deg, #ffd95e 0%, #e8b923 55%, #c99a12 100%);
  box-shadow: inset 0 1px 0 #fff9, 0 3px 0 #8a6508, 0 6px 14px #0004;
}
.btn.red, .modal-btns .btn.red {
  background: linear-gradient(180deg, #e53e3e 0%, #b91c1c 60%, #991414 100%);
  box-shadow: inset 0 1px 0 #fff5, 0 3px 0 #6b0d0d, 0 5px 12px #0004;
}
.btn.green { background: linear-gradient(180deg, #5ee08e, #22c55e 60%, #16a34a); box-shadow: inset 0 1px 0 #fff8, 0 3px 0 #14532d, 0 5px 12px #0003; }
.btn.ghost {
  background: linear-gradient(180deg, #ffffff26, #ffffff0f);
  box-shadow: inset 0 1px 0 #ffffff2e, inset 0 0 0 1px #ffffff0d, 0 2px 6px #0003;
}
.icon-btn { background: linear-gradient(180deg, #ffffff26, #ffffff0f); box-shadow: inset 0 1px 0 #ffffff2e, 0 2px 6px #0003; }
.card, .table-it {
  background: linear-gradient(180deg, #ffffff17, #ffffff0a);
  border: 1px solid #ffffff14; box-shadow: 0 8px 24px #0003, inset 0 1px 0 #ffffff12;
}
.gameinfo { background: #0000003d; padding: 5px 12px; border-radius: 20px; border: 1px solid #ffffff14; }

/* Поле: золотая рамка */
.board {
  background: #082219; border-radius: 8px; margin-top: 2px;
  box-shadow: 0 0 0 2px #d4a017, 0 0 0 4px #082219, 0 12px 30px #000a;
}

/* Клетки: мягкий блик сверху и тонкая окантовка */
.cell {
  background-image: linear-gradient(180deg, #ffffffb3 0%, #ffffff00 45%, #00000012 100%);
  box-shadow: inset 0 0 0 1px #00000017, inset 0 1px 0 #fff;
  border-radius: 4px;
}
.cell .em { filter: drop-shadow(0 1px 1px #0003); }
.cell .strip { background-image: linear-gradient(180deg, #ffffff40, #ffffff00 55%, #00000026) !important; text-shadow: 0 1px 1px #0007; }
.s-l .strip { background-image: linear-gradient(90deg, #00000026, #ffffff00 45%, #ffffff40) !important; }
.s-r .strip { background-image: linear-gradient(90deg, #ffffff40, #ffffff00 55%, #00000026) !important; }
.cell.owned {
  background-image: linear-gradient(180deg, #ffffff47 0%, #ffffff00 50%, #00000024 100%) !important;
  box-shadow: inset 0 0 0 1px #0003, inset 0 1px 0 #fff6;
}
.cell.city { box-shadow: inset 0 1px 0 #fff, 0 0 6px #e8b92366; }

/* Центр поля: сукно с ковровым узором */
.center {
  background:
    radial-gradient(circle at 50% 40%, transparent 0, #061d16b3 95%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 2 L26 14 L14 26 L2 14Z' fill='none' stroke='%23e8b923' stroke-opacity='.08' stroke-width='1.2'/%3E%3Cpath d='M14 9 L19 14 L14 19 L9 14Z' fill='%23e8b923' fill-opacity='.06'/%3E%3C/svg%3E"),
    radial-gradient(circle at 50% 40%, #217052 0, #0d3a2b 80%);
  box-shadow: inset 0 0 0 1px #d4a01733, inset 0 0 30px #0008;
  border-radius: 6px;
}

/* Карточки игроков: стекло и подсветка текущего */
.pl {
  background: linear-gradient(180deg, #ffffff1f, #ffffff08);
  border-color: #ffffff14; box-shadow: 0 4px 12px #0003, inset 0 1px 0 #ffffff1a;
}
.pl.cur {
  border-color: var(--gold);
  background: linear-gradient(180deg, #e8b9232e, #ffffff0a);
  box-shadow: 0 0 18px #e8b92340, 0 4px 12px #0004, inset 0 1px 0 #ffffff26;
}
.pl .av { background: radial-gradient(circle at 35% 30%, #ffffff40, #ffffff0d 70%); box-shadow: 0 2px 6px #0005, inset 0 1px 0 #fff3; }
.pl.cur .av { box-shadow: 0 0 12px var(--pc), 0 2px 6px #0005; }
.pl .m { text-shadow: 0 1px 0 #0007; }
.feed { background: #00000052; border: 1px solid #ffffff10; box-shadow: inset 0 2px 8px #0005; }
.timer .tbar { box-shadow: inset 0 1px 2px #0006; }
.timer .tbar i { background: linear-gradient(180deg, #ffe07a, #e8b923 60%, #c99a12); }
.timer.warn .tbar i { background: linear-gradient(180deg, #f87171, #dc2626); }

/* Кубики: объёмные, с бликом и выпуклыми точками */
.die {
  border-radius: 12px;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--dc, #fff) 55%, #fff) 0, var(--dc, #fff) 55%, color-mix(in srgb, var(--dc, #fff) 75%, #000) 100%);
  box-shadow: inset 0 2px 1px #ffffff66, inset 0 -3px 5px #0004, 0 4px 0 color-mix(in srgb, var(--dc, #fff) 55%, #000), 0 9px 14px #0007;
}
.die i { background: radial-gradient(circle at 40% 35%, #fff 0, #e5e7eb 75%); box-shadow: inset 0 1px 2px #0006, 0 1px 0 #fff6; }

/* Фишки: кольцо цвета игрока почти на всю клетку — край непрозрачный, середина прозрачная */
.toks, .hs.s-b .toks { inset: 0; display: block; container-type: size; z-index: 2; }
.toks span {
  position: absolute; left: 50%; top: 50%;
  width: min(58cqw, 58cqh); aspect-ratio: 1; border-radius: 50%;
  border: 3px solid var(--pc, #fff); background: transparent;
  box-shadow: 0 1px 3px #0009, inset 0 1px 3px #0009;
  transform: translate(calc(-50% + var(--d, 0px)), calc(-50% + var(--d, 0px)));
  opacity: .95; filter: none; transition: none;
}
.toks span.cur { opacity: 1; border-width: 4px; box-shadow: 0 0 8px var(--pc, #fff), 0 1px 3px #0009, inset 0 1px 3px #0009; }
/* едущее кольцо у края поля не должно раздвигать страницу вбок */
html, body, #game { overflow-x: hidden; }
#mover span {
  width: 32px; height: 32px; border-radius: 50%;
  border: 4px solid var(--pc, #fff); background: transparent;
  box-shadow: 0 0 10px var(--pc, #fff), 0 5px 6px #0008, inset 0 1px 3px #0009; filter: none;
}
/* то же кольцо — в карточке игрока, на экране настройки и в комнате ожидания */
.pl .av { background: transparent; border: 6px solid var(--pc); box-shadow: 0 2px 6px #0005, inset 0 2px 4px #0006; }
.ring { display: inline-block; border-radius: 50%; border: 6px solid var(--pc); flex: none; box-shadow: 0 1px 3px #0005, inset 0 1px 3px #0005; }
.prow .tok.ring { width: 38px; height: 38px; margin: 2px; background: transparent; border: 6px solid var(--pc); border-radius: 50%; }
.seat-tok.ring { width: 24px; height: 24px; border-width: 5px; }

/* ===== Касания и «меньше движения» ===== */
/* без задержки 300 мс и без случайного зума двойным касанием; страница не «пружинит» при прокрутке */
html, body { touch-action: manipulation; overscroll-behavior: none; }
button, .cell, .btn { touch-action: manipulation; }
/* в настройках телефона включено «Уменьшить движение» — убираем анимации, игра остаётся той же */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ===== Пропорции поля на любых экранах ===== */
/* поле не шире, чем позволяет высота: клетки не сплющиваются на широких/невысоких экранах (ноутбук, планшет боком) */
#game { max-width: min(640px, calc((100dvh - 60px) / 1.45)); margin: 0 auto; }
/* телефон боком: поле так не уместить — просим повернуть (приложение и так всегда вертикальное) */
.rotate-hint { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  .rotate-hint {
    display: flex; position: fixed; inset: 0; z-index: 90; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    background: var(--green); color: #fff; font-size: 18px; font-weight: 700; text-align: center; padding: 20px;
  }
  .rotate-hint b { font-size: 48px; animation: tilt 1.6s ease-in-out infinite; }
}
@keyframes tilt { 0%, 30% { transform: rotate(-90deg); } 60%, 100% { transform: rotate(0deg); } }

/* ===== Всё в один экран, без прокрутки ===== */
/* 3–5 игроков: карточки в три колонки и компактнее */
.players[data-n="3"], .players[data-n="4"], .players[data-n="5"] { grid-template-columns: repeat(3, 1fr); gap: 4px; }
.players[data-n="3"] .pl, .players[data-n="4"] .pl, .players[data-n="5"] .pl { padding: 4px 2px 5px; font-size: 10px; border-radius: 10px; }
.players[data-n="3"] .pl .av, .players[data-n="4"] .pl .av, .players[data-n="5"] .pl .av { width: 28px; height: 28px; border-width: 4px; margin-bottom: 1px; }
.players[data-n="3"] .pl .m, .players[data-n="4"] .pl .m, .players[data-n="5"] .pl .m { font-size: 13px; }
.players[data-n="3"] .pl .cap, .players[data-n="4"] .pl .cap, .players[data-n="5"] .pl .cap { font-size: 9px; }
.players[data-n="3"] .deal-btn, .players[data-n="4"] .deal-btn, .players[data-n="5"] .deal-btn { padding: 2px 7px; font-size: 10px; margin-top: 2px; }
.players[data-n="3"] .pl .vmute, .players[data-n="4"] .pl .vmute, .players[data-n="5"] .pl .vmute { width: 20px; height: 20px; line-height: 20px; font-size: 10px; }
/* журнал не съедает место у кнопок, а кубики и кнопки не раздвигаются */
.feed { min-height: 34px; flex: 1 1 0; max-height: 30%; }
.center { gap: 6px; }
/* Невысокие экраны: всё чуть плотнее */
@media (max-height: 800px) {
  .pl .av { width: 34px; height: 34px; border-width: 5px; }
  .pl { padding: 4px 4px; }
  .die { width: 38px; height: 38px; padding: 5px; }
  .die i { width: 7px; height: 7px; }
  .actions .btn { padding: 10px 8px; }
  .bottom .btn { padding: 4px 2px; }
}
/* Главный экран: постер и заголовок подстраиваются под высоту, чтобы влезали до 5 игроков */
.logo-pic { height: min(260px, 19dvh); margin-top: 8px; }
.logo-big { font-size: clamp(28px, 5dvh, 46px); margin-top: 6px; }
#setup { padding-top: 2px; padding-bottom: 2px; }
#setup .row .btn { padding: 9px 14px; }
.sub { margin: 2px 0 10px; }
#setup .btn.wide { margin: 6px 0; padding: 13px; }
#setup .card { margin: 6px 0; padding: 10px 12px; }
.prow { margin-bottom: 6px; }
.prow input { padding: 8px 10px; }
.prow .kind { padding: 8px; }
.prow .tok.ring { width: 32px; height: 32px; border-width: 5px; }

/* Баннер Яндекса поверх низа экрана (только меню и лобби) — освобождаем под него место */
body.has-banner #setup, body.has-banner #lobby { padding-bottom: 64px; }

/* Подсказка обучения — сверху, поверх поля */
.tip {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 56px); transform: translateX(-50%); z-index: 55;
  width: min(92vw, 420px); background: #fffbea; color: var(--ink); border: 2px solid var(--gold); border-radius: 14px;
  padding: 12px 14px; box-shadow: 0 10px 30px #000a; font-size: 14px; line-height: 1.4; animation: up .2s ease-out;
}
.tip-btns { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; }
.tip { max-width: 92vw; }
.tip-min { float: right; margin: -4px -4px 4px 8px; border: 0; background: #0000000f; color: var(--muted); border-radius: 8px; padding: 3px 8px; font-size: 12px; font-weight: 700; }
/* свёрнутая подсказка — маленький значок слева сверху, рядом с меню */
.tip-mini {
  position: fixed; left: 50px; top: calc(env(safe-area-inset-top) + 4px); z-index: 55;
  width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 2px solid var(--gold); background: #fffbea;
  font-size: 22px; box-shadow: 0 4px 14px #0008; animation: pulse 1.6s ease-in-out infinite;
}
.tip-btns .btn.ghost { background: #0000000f; color: var(--muted); box-shadow: none; }

/* Галочка «Упрощённая игра» */
.easy-opt { display: flex; gap: 10px; align-items: flex-start; margin: 6px 2px; font-size: 14px; cursor: pointer; }
.easy-opt input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--gold); flex: none; }
.easy-opt small { display: block; opacity: .7; font-size: 11px; line-height: 1.3; }

/* ===== Профиль игрока (тёмное окно, как в «Магнате») ===== */
.modal-box.dark { background: radial-gradient(circle at 30% 10%, #2a3236, #1a1f22 70%); color: #f1f5f9; }
.modal-box.dark .modal-btns .btn { background: #ffffff14; color: #fff; }
.pf-name { display: flex; align-items: center; gap: 12px; margin: 2px 0 12px; }
.pf-name::before, .pf-name::after { content: ""; flex: 1; height: 1px; background: #ffffff40; }
.pf-name span { font-size: 22px; font-weight: 800; text-align: center; max-width: 75%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; font-size: 13px; }
.pf-av {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--avc) 60%, #fff), var(--avc));
  color: #fff; font-weight: 900; font-size: 18px; border: 2px solid var(--gold); text-shadow: 0 1px 2px #0006;
}
.pf-av.big { width: clamp(84px, 26vw, 120px); height: clamp(84px, 26vw, 120px); font-size: clamp(36px, 11vw, 52px); border-width: 4px; box-shadow: 0 0 18px #e8b92355; }
.pf-on { color: #4ade80; font-weight: 700; }
.pf-off { color: #94a3b8; }
.pf-sub { color: #fcd34d; font-size: 12px; opacity: .9; }
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pf-tile { background: #0000004d; border-radius: 12px; padding: 10px 12px; min-width: 0; }
.pf-t { font-size: 13px; color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-big { font-size: 26px; font-weight: 800; margin: 2px 0; }
.pf-big small { font-size: 13px; color: #fcd34d; font-weight: 600; }
.pf-h { display: flex; align-items: center; gap: 12px; margin: 16px 0 8px; color: #fcd34d; font-weight: 800; font-size: 17px; }
.pf-h::before, .pf-h::after { content: ""; flex: 1; height: 1px; background: #ffffff30; }
.pf-medals { display: flex; flex-wrap: wrap; gap: 10px; }
.pf-medal { display: flex; flex-direction: column; align-items: center; width: 70px; text-align: center; }
.pf-medal span { width: 52px; height: 52px; display: grid; place-items: center; font-size: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fde68a, #b45309); border: 3px solid #fcd34d; box-shadow: 0 3px 8px #0008; }
.pf-medal small { font-size: 10px; color: #cbd5e1; margin-top: 3px; line-height: 1.2; }
.pf-acts { display: flex; justify-content: space-around; gap: 8px; }
.pf-act { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; color: #fff; font-size: 30px; padding: 6px; border-radius: 12px; }
.pf-act small { font-size: 12px; }
.pf-act.on { background: #ffffff14; }
.pf-act:disabled { opacity: .6; }
.pf-guest { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: #f59e0b22; border: 1px solid #f59e0b66; font-size: 12px; line-height: 1.4; color: #fde68a; }
.pf-note { font-size: 11px; color: #94a3b8; text-align: center; margin-top: 12px; }
.pf-open { cursor: pointer; text-decoration: underline dotted #ffffff66; }
/* список друзей */
.fr-h { margin: 12px 0 6px; color: var(--muted); font-size: 13px; }
.fr-it { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #eee; cursor: pointer; }
.fr-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fr-tx b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-tx small { color: var(--muted); font-size: 12px; }
.fr-it .pf-on { color: #16a34a; }
.friends-btn { position: relative; }
.badge { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 10px; background: #16a34a; color: #fff; font-size: 11px; font-weight: 800; }
.badge.req { background: #e11d48; }
.contact-mail { font-size: 20px; text-align: center; padding: 10px; background: #f7f1e1; border-radius: 10px; user-select: all; }
.seat[data-sid] { cursor: pointer; }

.foot-links { text-align: center; font-size: 12px; margin: 6px 0 2px; opacity: .75; }
.foot-links a { color: #fff; }

/* Текстовый чат */
.chat-in { display: flex; gap: 4px; flex: none; }
.chat-in input {
  flex: 1; min-width: 0; padding: 8px 12px; border-radius: 10px; border: 1px solid #ffffff1f;
  background: #00000040; color: #fff; font-size: 14px;
}
.chat-in input::placeholder { color: #ffffff80; }
.chat-send { flex: none; width: 38px; border: 0; border-radius: 10px; background: var(--gold); color: #3b2a00; font-size: 16px; font-weight: 900; }
.feed .chat-line { color: #fff; font-style: italic; }
.room-chat { max-height: 140px; min-height: 60px; margin: 8px 0 6px; }
#room .chat-in input { color: #fff; }

/* Вход и профиль */
.login-or { text-align: center; margin: 12px 0 8px; }
.social-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn.social { color: #fff; padding: 12px 6px; font-size: 15px; }
.btn.social.tg { background: linear-gradient(180deg, #37aee2, #1e96c8); }
.btn.social.vk { background: linear-gradient(180deg, #2f87f5, #0077ff); }
.btn.social.max { background: linear-gradient(135deg, #6d4cff, #a24bff); }
.btn.social.mail { background: linear-gradient(180deg, #ffffff2e, #ffffff12); }
.server-more { margin-top: 12px; font-size: 13px; opacity: .8; }
.server-more summary { cursor: pointer; margin-bottom: 8px; }
.profile-bar {
  display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 10px 12px; border-radius: 14px;
  background: linear-gradient(180deg, #ffffff17, #ffffff0a); border: 1px solid #ffffff14;
}
.profile-bar .ring { width: 30px; height: 30px; border-width: 5px; }
.profile-bar .pf-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.profile-bar .pf-tx b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-bar small { opacity: .75; font-size: 12px; }
.profile-bar a { color: var(--gold); }

/* Голосовой чат: кнопка 🎙 и карточки игроков */
.voice-btn { margin-left: auto; margin-right: 6px; }
.voice-btn.on { background: linear-gradient(180deg, #4ade80, #16a34a); box-shadow: 0 0 10px #22c55e99, inset 0 1px 0 #fff6; }
.voice-btn.muted { background: linear-gradient(180deg, #9ca3af, #4b5563); }
.pl { position: relative; }
/* кнопка «звук этого игрока у меня» — видна, когда игрок в голосе */
.pl .vmute {
  display: none; position: absolute; top: 3px; right: 3px; width: 26px; height: 26px; border: 0; border-radius: 50%;
  font-size: 13px; line-height: 26px; padding: 0; background: #0006; color: #fff;
}
.pl.vc .vmute { display: block; }
.pl.silenced .vmute { background: #b91c1c; }
.pl.vc:not(:has(.vmute))::after { content: "🎙"; position: absolute; top: 4px; right: 6px; font-size: 12px; opacity: .55; }
.pl.talk::after { opacity: 1; }
.seat.vc::after { content: "🎙"; font-size: 13px; opacity: .6; }
.seat.talk { box-shadow: inset 0 0 0 2px #22c55e; }
.seat.talk::after { opacity: 1; }
/* «говорит»: светящееся кольцо мигает прозрачностью (дешевле, чем анимировать тень) */
.pl .av { position: relative; }
.pl.talk .av::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 14px 4px #22c55e;
  animation: talk .6s ease-in-out infinite alternate;
}
@keyframes talk { from { opacity: .3; } to { opacity: 1; } }

/* Всплывающие окна */
.modal-box { box-shadow: 0 -10px 40px #0007; background: linear-gradient(180deg, #fffdf6, #fff 120px); }
.toast { box-shadow: 0 8px 24px #0007; border: 1px solid #ffffff1a; }

@media (min-width: 560px) {
  .toks span { border-width: 4px; }
  #mover span { width: 44px; height: 44px; border-width: 5px; }
}