/* «Лихие: монополия». Поле в стиле 90-х: асфальт и неон ларьков по краям, ковёр с медальоном в центре, рябь VHS.
   Размер поля считает public/likhie.js (fit): --u — одна клетка в px, углы — 1.6 клетки.
   body.lk-full — идёт партия: поле на всю игровую зону, на телефоне (≤ 900px) — на весь экран. */
.likhie { --lk-bg: #0f0a16; --lk-cell: #211a2c; --lk-neon: #ff3d8b; --lk-cyan: #4fe3c1; }

/* ---------- Лобби ---------- */
.lk-lobby-logo { display: grid; justify-items: start; margin-bottom: 4px; }
.lk-neon {
  font-family: "Ruslan Display", var(--display); font-weight: 400; letter-spacing: .06em; color: #ffd6e8;
  text-shadow: 0 0 4px #fff, 0 0 10px var(--lk-neon), 0 0 22px var(--lk-neon), 0 0 42px #c2185b;
}
.lk-neon2 { font-family: "Kelly Slab", var(--display); color: #d8fff6; text-shadow: 0 0 6px var(--lk-cyan), 0 0 14px var(--lk-cyan); }
.lk-lobby-logo .lk-neon { font-size: 44px; line-height: 1.1; }
.lk-lobby-logo .lk-neon2 { font-size: 17px; }
.lk-list { display: grid; gap: 8px; margin: 12px 0 18px; }
.lk-row { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(255, 255, 255, .03); }
.lk-row.s-play { border-color: rgba(255, 61, 139, .45); }
.lk-row-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-names { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.lk-nm { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.lk-tokpick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lk-tokbtn {
  width: 44px; height: 44px; padding: 0; border-radius: 50%; font-size: 22px; line-height: 1;
  background: color-mix(in srgb, var(--c) 18%, #191321); border: 2px solid color-mix(in srgb, var(--c) 50%, transparent);
}
.lk-tokbtn.on { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 35%, transparent), 0 0 16px var(--c); }
.lk-tokbtn:disabled { opacity: .3; filter: grayscale(1); }
.lk-create { display: grid; gap: 8px; max-width: 360px; }
.lk-create h3 { margin: 0; }
.lk-create label { display: grid; gap: 4px; font-size: 14px; }
.lk-create .lk-check { display: flex; align-items: center; gap: 8px; }

/* ---------- Стол: поле слева, справа шапка, игроки, кнопки, журнал ---------- */
.lk-table {
  display: grid; gap: 10px 16px; align-items: start;
  grid-template-columns: minmax(0, 1fr) clamp(290px, 24vw, 380px);
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas: "stage head" "stage strip" "stage dock" "stage log";
}
.lk-head { grid-area: head; display: flex; align-items: center; gap: 8px; min-width: 0; }
.lk-strip { grid-area: strip; display: grid; gap: 6px; }
.lk-stage { grid-area: stage; position: relative; min-width: 0; }
.lk-dock { grid-area: dock; display: grid; gap: 10px; }
.lk-log { grid-area: log; }
.lk-ttl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-head button { flex: none; min-width: 40px; padding: 6px 10px; }
.lk-zoom { display: none; }
.lk-logbtn { display: none; }
.lk-view { position: relative; }
.lk-view .lk-board { margin: 0 auto; }

/* Игрок: фишка в цветном круге, имя, деньги. */
.lk-chip {
  position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 0 8px;
  padding: 6px 10px 6px 6px; border-radius: 12px; background: rgba(255, 255, 255, .035); border: 1px solid transparent;
  border-left: 4px solid var(--c);
}
.lk-chip .lk-tok {
  grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-size: 21px;
  background: color-mix(in srgb, var(--c) 22%, #171120); box-shadow: 0 0 0 2px var(--c);
}
.lk-pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.lk-money { font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }
.lk-worth { grid-column: 2 / 4; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk-chip.me .lk-pname::after { content: " (ты)"; color: var(--muted); font-weight: 400; }
.lk-chip.turn { background: rgba(255, 255, 255, .07); }
.lk-chip.acting { border-color: color-mix(in srgb, var(--c) 70%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--c) 35%, transparent); }
.lk-chip.acting .lk-tok { animation: lk-pulse 1.2s ease-in-out infinite; }
.lk-chip.out { opacity: .4; }
.lk-chip.out .lk-pname { text-decoration: line-through; }
@keyframes lk-pulse { 50% { box-shadow: 0 0 0 4px var(--c), 0 0 18px var(--c); } }

.lk-float {
  position: absolute; right: 8px; top: -4px; z-index: 5; pointer-events: none; font-weight: 900; font-size: 18px;
  animation: lk-float 1.5s ease-out forwards; text-shadow: 0 2px 6px #000;
}
.lk-float.up { color: #6dff9e; }
.lk-float.down { color: #ff6b6b; }
.lk-float.on-board { right: auto; font-size: max(16px, calc(var(--u) * .34)); translate: -50% -120%; z-index: 30; }
@keyframes lk-float { from { opacity: 0; transform: translateY(8px); } 15% { opacity: 1; } to { opacity: 0; transform: translateY(-34px); } }

/* Статус хода с таймером и кнопки. */
.lk-status { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-height: 1.4em; }
.lk-say { font-weight: 700; font-size: 16px; }
.lk-say.mine { color: var(--gold); }
.lk-timer { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 700; }
.lk-timer.hot { color: var(--red); }
.lk-tbar { flex-basis: 100%; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.lk-tbar::before { content: ""; display: block; height: 100%; width: calc(var(--p) * 100%); background: linear-gradient(90deg, var(--red), var(--gold)); transition: width .5s linear; }
.lk-last { flex-basis: 100%; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-actions { display: grid; gap: 8px; transition: opacity .2s; }
.lk-actions.busy { opacity: .45; pointer-events: none; }
.lk-main, .lk-more { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lk-main:empty, .lk-more:empty { display: none; }
.lk-actions button.big { flex: 1 1 140px; min-height: 52px; font-size: 17px; font-weight: 800; border-radius: 14px; }
.lk-actions button.on { background: var(--gold); color: #111; }
.lk-quit { opacity: .7; }
.lk-actions button.bid { flex: 1 1 64px; min-height: 48px; font-size: 16px; font-weight: 800; border-radius: 12px; }
.lk-own { display: flex; gap: 8px; flex-basis: 100%; }
.lk-bid { width: 92px; min-height: 44px; padding: 0 8px; font-size: 16px; border-radius: 10px; border: 1px solid var(--line-2); background: #fff; color: #111; }
.lk-log { max-height: 320px; overflow: auto; margin: 0; padding-left: 18px; font-size: 12px; color: var(--muted); }
.lk-log li:first-child { color: var(--text); }

/* ---------- Поле ---------- */
.lk-board {
  --u: 60px;
  position: relative; display: grid;
  grid-template-columns: 1.6fr repeat(9, 1fr) 1.6fr; grid-template-rows: 1.6fr repeat(9, 1fr) 1.6fr;
  width: 100%; aspect-ratio: 1; gap: max(1px, calc(var(--u) * .03)); padding: max(2px, calc(var(--u) * .05)); box-sizing: border-box;
  border-radius: calc(var(--u) * .18);
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .015) 0 2px, transparent 2px 7px),
    var(--lk-bg);
  box-shadow: 0 0 0 2px rgba(255, 61, 139, .55), 0 0 30px rgba(255, 61, 139, .25), 0 18px 50px rgba(0, 0, 0, .55);
}

.lk-cell {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * .03);
  min-width: 0; min-height: 0; padding: calc(var(--u) * .2) calc(var(--u) * .05) calc(var(--u) * .06);
  border: 1px solid rgba(255, 255, 255, .07); border-radius: calc(var(--u) * .08);
  background: linear-gradient(180deg, #2a2137, var(--lk-cell)); color: var(--text);
  font: inherit; line-height: 1.05; text-align: center; overflow: hidden; cursor: pointer;
}
.lk-cell:hover { filter: brightness(1.18); }
/* Полоса района — с той стороны, что смотрит в центр поля, и светится, как вывеска ларька. */
.lk-band { position: absolute; background: var(--g, transparent); box-shadow: 0 0 calc(var(--u) * .14) var(--g, transparent); }
.lk-cell:not(.t-street) .lk-band { display: none; }
.side-b .lk-band { left: 0; right: 0; top: 0; height: 18%; }
.side-t .lk-band { left: 0; right: 0; bottom: 0; height: 18%; }
.side-t { padding: calc(var(--u) * .06) calc(var(--u) * .05) calc(var(--u) * .2); }
.side-l, .side-r { padding: calc(var(--u) * .04) calc(var(--u) * .08); }
.side-l .lk-band { top: 0; bottom: 0; right: 0; width: 13%; }
.side-r .lk-band { top: 0; bottom: 0; left: 0; width: 13%; }
.side-l.t-street { padding-right: calc(var(--u) * .26); }
.side-r.t-street { padding-left: calc(var(--u) * .26); }

.lk-cname { display: block; width: 100%; font-weight: 800; font-size: calc(var(--u) * .2); overflow: hidden; word-break: keep-all; overflow-wrap: normal; }
.lk-price { font-size: calc(var(--u) * .18); color: #ffe9a8; font-variant-numeric: tabular-nums; }
.lk-icon { font-size: calc(var(--u) * .36); line-height: 1; }
.lk-icon:empty { display: none; }
.lk-lvl { font-size: calc(var(--u) * .42); line-height: 1; filter: drop-shadow(0 0 4px rgba(0, 0, 0, .8)); }
.lk-lvl:empty { display: none; }
.lk-owner { position: absolute; right: 2px; bottom: 1px; font-size: calc(var(--u) * .24); line-height: 1; }
.side-t .lk-owner { bottom: auto; top: 1px; }
.lk-cell.corner { background: radial-gradient(circle at 50% 40%, #3b2a55, #1e1530); }
.lk-cell.corner .lk-icon { font-size: calc(var(--u) * .6); }
.lk-cell.corner .lk-cname { font-size: calc(var(--u) * .24); text-transform: uppercase; letter-spacing: .03em; color: #ffd6e8; text-shadow: 0 0 8px var(--lk-neon); }
.lk-cell.t-card { background: linear-gradient(180deg, #2a1f3c, #1f1830); }
.lk-cell.t-card .lk-cname { color: #d8fff6; }
.lk-cell.t-tax .lk-price { color: #ff8f8f; }
.lk-cage {
  position: absolute; right: 6%; top: 6%; width: 52%; height: 52%; border-radius: 6px;
  background: repeating-linear-gradient(90deg, transparent 0 18%, rgba(200, 210, 230, .55) 18% 24%);
  box-shadow: inset 0 0 0 2px rgba(200, 210, 230, .55);
}
.lk-cell.t-jail .lk-icon, .lk-cell.t-jail .lk-cname { position: relative; translate: -16% 22%; }

/* Хозяин: улица окрашена его цветом, с толстой рамкой; свои — ещё и светятся. */
.lk-cell.owned { background: linear-gradient(180deg, color-mix(in srgb, var(--own) 42%, #2a2137), color-mix(in srgb, var(--own) 22%, var(--lk-cell))); box-shadow: inset 0 0 0 max(2px, calc(var(--u) * .06)) var(--own); }
.lk-cell.mine { box-shadow: inset 0 0 0 max(2px, calc(var(--u) * .06)) var(--own), 0 0 calc(var(--u) * .25) var(--own); z-index: 1; }
.lk-cell.mortgaged::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .55) 0 6px, transparent 6px 12px); }
.lk-cell.mortgaged > * { opacity: .6; }
.lk-cell.pick { outline: 3px dashed var(--gold); outline-offset: -3px; animation: lk-pick 1s ease-in-out infinite; z-index: 2; }
.lk-cell.info { outline: 3px solid #fff; outline-offset: -2px; z-index: 2; }
@keyframes lk-pick { 50% { background: #5a4415; } }
.lk-cell.flash-buy { animation: lk-flash 1.2s ease-out; z-index: 3; }
.lk-cell.flash-build { animation: lk-flash-b 1.2s ease-out; z-index: 3; }
.lk-cell.flash-mort { animation: lk-flash-m 1.2s ease-out; }
@keyframes lk-flash { 0% { transform: scale(1); filter: brightness(2.2); } 30% { transform: scale(1.18); } 100% { transform: scale(1); filter: none; } }
@keyframes lk-flash-b { 0% { filter: brightness(2.4) saturate(1.5); } 40% { transform: translateY(-8%); } 100% { filter: none; transform: none; } }
@keyframes lk-flash-m { 0% { filter: grayscale(1) brightness(.6); } 100% { filter: none; } }

/* Мелкий обзор всего поля на телефоне: только цвета, значки и постройки. */
.lk-board.tiny .lk-cname, .lk-board.tiny .lk-price { display: none; }
.lk-board.tiny .lk-cell { padding: 1px; }
.lk-board.tiny .lk-lvl { font-size: calc(var(--u) * .55); }
.lk-board.tiny .lk-icon { font-size: calc(var(--u) * .5); }

/* ---------- Рисованные значки (likhie-icons.js) ---------- */
.lk-ico { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.25em; line-height: 1; }
.lk-ico svg { display: block; width: 100%; height: 100%; }
/* Фишка-вещь в цветном кружке. */
.lk-ico.tk { width: 1.35em; height: 1.35em; vertical-align: -.32em; border-radius: 50%; overflow: hidden; background: var(--tc); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.lk-ico.tk svg { width: 76%; height: 76%; margin: 12% auto 0; }
.lk-pawn .lk-ico.tk, .lk-tok .lk-ico.tk, .lk-tokbtn .lk-ico.tk { width: 100%; height: 100%; background: none; box-shadow: none; vertical-align: top; }
.lk-pawn, .lk-tok, .lk-tokbtn { overflow: hidden; }
/* На клетке значок — отдельным блоком ровно в 1em, без строки текста вокруг: иначе он раздувает клетку и текст съезжает. */
.lk-icon, .lk-lvl { display: flex; justify-content: center; flex: none; }
.lk-icon .lk-ico, .lk-lvl .lk-ico { display: block; width: 1em; height: 1em; }
.lk-icon .lk-ico { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.lk-owner .lk-ico.tk { width: 1.5em; height: 1.5em; box-shadow: 0 0 0 1px #120c1a; }
.lk-deed-icon .lk-ico { width: 1.3em; height: 1.3em; }

/* ---------- Фишки ---------- */
.lk-pawns { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.lk-pawn {
  position: absolute; display: grid; place-items: center; translate: -50% -50%;
  width: max(22px, calc(var(--u) * .56)); height: max(22px, calc(var(--u) * .56)); border-radius: 50%;
  font-size: max(13px, calc(var(--u) * .34)); line-height: 1;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 60%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 60%, #000));
  box-shadow: 0 0 0 2px #120c1a, 0 calc(var(--u) * .06) calc(var(--u) * .12) rgba(0, 0, 0, .7);
  transition: left .35s ease, top .35s ease;
}
.lk-pawn.walking { transition-timing-function: linear; z-index: 2; }
.lk-pawn.acting { box-shadow: 0 0 0 2px #fff, 0 0 calc(var(--u) * .3) var(--c), 0 calc(var(--u) * .06) calc(var(--u) * .12) rgba(0, 0, 0, .7); z-index: 1; }
.lk-pawn.jailed { filter: grayscale(.7) brightness(.8); }

/* ---------- Центр: ковёр, неон, «видеокассета» ---------- */
.lk-center {
  position: relative; grid-row: 2 / 11; grid-column: 2 / 11; overflow: hidden; border-radius: calc(var(--u) * .12);
  margin: calc(var(--u) * .12);
  background:
    radial-gradient(ellipse 30% 26% at 50% 50%, rgba(0, 0, 0, .25), transparent 70%),
    radial-gradient(ellipse 34% 30% at 50% 50%, transparent 0 60%, #e2b04a 61% 63%, #1d3557 64% 70%, #e2b04a 71% 72%, transparent 73%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(226, 176, 74, .2) 0 5deg, transparent 5deg 15deg),
    radial-gradient(circle at 0 0, #1d3557 0 9%, #e2b04a 9.5% 10.5%, transparent 11%),
    radial-gradient(circle at 100% 0, #1d3557 0 9%, #e2b04a 9.5% 10.5%, transparent 11%),
    radial-gradient(circle at 0 100%, #1d3557 0 9%, #e2b04a 9.5% 10.5%, transparent 11%),
    radial-gradient(circle at 100% 100%, #1d3557 0 9%, #e2b04a 9.5% 10.5%, transparent 11%),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, .16) 0 5px, transparent 5px 11px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .16) 0 5px, transparent 5px 11px),
    #7b1e2a;
  box-shadow:
    inset 0 0 0 calc(var(--u) * .1) #1d3557, inset 0 0 0 calc(var(--u) * .16) #e2b04a,
    inset 0 0 0 calc(var(--u) * .34) #5a1520, inset 0 0 0 calc(var(--u) * .38) #e2b04a,
    inset 0 0 calc(var(--u) * 1.2) rgba(0, 0, 0, .65);
}
/* Рябь VHS: строки развёртки и ползущая полоса сбоя. */
.lk-center::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(0, 0, 0, .2) 2px 3px);
  animation: lk-flicker 6s steps(1) infinite;
}
.lk-vhs {
  position: absolute; left: 0; right: 0; top: -20%; height: 9%; pointer-events: none; opacity: .35;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .25) 40%, rgba(120, 255, 240, .2) 55%, transparent);
  mix-blend-mode: screen; animation: lk-track 7s linear infinite;
}
@keyframes lk-track { to { top: 115%; } }
@keyframes lk-flicker { 0%, 100% { opacity: 1; } 47% { opacity: .75; } 48% { opacity: 1; } 83% { opacity: .85; } 84% { opacity: 1; } }
.lk-cinfo {
  position: absolute; inset: calc(var(--u) * .5); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--u) * .16); text-align: center;
}
.lk-logo { display: grid; justify-items: center; transform: rotate(-4deg); }
.lk-logo .lk-neon { font-size: calc(var(--u) * 1.15); line-height: 1; animation: lk-neon 5s infinite; }
.lk-logo .lk-neon2 { font-size: calc(var(--u) * .3); }
@keyframes lk-neon { 0%, 100% { opacity: 1; } 91% { opacity: 1; } 92% { opacity: .35; } 93% { opacity: 1; } 95% { opacity: .5; } 96% { opacity: 1; } }
.lk-tape {
  position: absolute; left: calc(var(--u) * -.2); right: calc(var(--u) * -.2); top: calc(var(--u) * -.25);
  display: flex; justify-content: space-between; font: 700 calc(var(--u) * .24) / 1 "Courier New", monospace; color: #fff;
  text-shadow: 0 0 2px #fff, 2px 0 rgba(255, 0, 80, .6), -2px 0 rgba(0, 220, 255, .6);
}
.lk-cline { padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, .55); font-size: max(12px, calc(var(--u) * .2)); font-weight: 700; }
.lk-panel {
  display: grid; gap: 4px; max-width: 92%; padding: calc(var(--u) * .14) calc(var(--u) * .24); border-radius: 12px;
  background: rgba(12, 8, 18, .86); border: 1px solid rgba(255, 255, 255, .15); font-size: max(13px, calc(var(--u) * .2));
}
.lk-big { font-size: max(18px, calc(var(--u) * .4)); font-weight: 900; }
.lk-auc { border-color: var(--gold); box-shadow: 0 0 20px rgba(242, 193, 78, .35); }
.lk-debtp { border-color: var(--red); }
.lk-result { border-color: var(--gold); }
.lk-result ol { margin: 0; padding-left: 1.4em; text-align: left; }

/* Кубики: точки 3×3. */
.lk-dice { display: flex; gap: calc(var(--u) * .2); }
.lk-die {
  display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); width: max(30px, calc(var(--u) * .62)); aspect-ratio: 1; padding: 12%;
  box-sizing: border-box; border-radius: 18%; background: linear-gradient(145deg, #fff, #ddd5c8); box-shadow: 0 4px 10px rgba(0, 0, 0, .5), inset 0 -3px 0 rgba(0, 0, 0, .15);
}
.lk-die i { border-radius: 50%; margin: 14%; }
.lk-die i.on { background: #1b1426; }

/* ---------- Эффекты поверх сцены: бросок, карта, баннер ---------- */
.lk-fx { position: absolute; inset: 0; z-index: 20; pointer-events: none; display: grid; place-items: center; }
.lk-fx > * { grid-area: 1 / 1; }
.lk-roll { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; justify-content: center; }
.lk-roll .lk-die { width: clamp(56px, 9vw, 96px); animation: lk-tumble .25s linear infinite; }
.lk-roll.done .lk-die { animation: lk-land .3s ease-out; }
.lk-roll.out { opacity: 0; transition: opacity .45s; }
.lk-dbl { flex-basis: 100%; text-align: center; font: 400 28px "Ruslan Display", var(--display); color: var(--gold); text-shadow: 0 0 12px var(--gold); }
@keyframes lk-tumble { 0% { transform: rotate(0) translateY(0); } 50% { transform: rotate(180deg) translateY(-12px); } 100% { transform: rotate(360deg) translateY(0); } }
@keyframes lk-land { 0% { transform: scale(1.3); } 100% { transform: scale(1); } }

.lk-cardpop {
  pointer-events: auto; cursor: pointer; display: grid; gap: 10px; width: min(360px, 86%); padding: 22px 22px 16px; border-radius: 16px;
  text-align: center; animation: lk-card-in .45s cubic-bezier(.2, .9, .3, 1.2); transition: opacity .35s, transform .35s;
}
.lk-cardpop.out { opacity: 0; transform: scale(.85) rotate(4deg); }
.lk-cardpop.d-likhie { background: radial-gradient(circle at 50% 0, #3a0f2a, #140a1a); border: 2px solid var(--lk-neon); box-shadow: 0 0 30px rgba(255, 61, 139, .55); color: #ffe3f0; }
.lk-cardpop.d-slukhi {
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .04) 0 1px, transparent 1px 4px), #efe6cf; color: #1d1a14;
  border: 1px solid #b8a983; box-shadow: 0 16px 40px rgba(0, 0, 0, .6); font-family: "Kelly Slab", serif; transform: rotate(-2deg);
}
.lk-deck { font-size: 13px; letter-spacing: .12em; font-weight: 800; }
.d-likhie .lk-deck { color: var(--lk-neon); text-shadow: 0 0 8px var(--lk-neon); }
.d-slukhi .lk-deck { font-family: "Cormorant SC", serif; font-size: 18px; border-bottom: 2px solid #1d1a14; padding-bottom: 4px; }
.lk-ctitle { font-size: 22px; line-height: 1.15; }
.d-slukhi .lk-ctitle { font-family: "Cormorant SC", serif; font-size: 26px; }
.lk-ctext { font-size: 16px; }
.lk-cwho { font-size: 12px; opacity: .7; }
@keyframes lk-card-in { from { opacity: 0; transform: scale(.5) rotate(-12deg) translateY(40px); } to { opacity: 1; transform: none; } }

.lk-banner {
  padding: 10px 22px; border-radius: 12px; background: rgba(12, 8, 18, .88); font: 400 clamp(20px, 3vw, 34px) "Ruslan Display", var(--display);
  color: #fff; text-shadow: 0 0 10px var(--lk-neon); animation: lk-banner 1.7s ease-out forwards;
}
.lk-banner.jail { color: #cfe3ff; text-shadow: 0 0 12px #3d8bff; }
.lk-banner.stamp { color: #ff4b4b; border: 4px solid #ff4b4b; background: rgba(20, 0, 0, .8); text-shadow: none; transform: rotate(-8deg); }
@keyframes lk-banner { 0% { opacity: 0; scale: 1.6; } 12% { opacity: 1; scale: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Карточка клетки ---------- */
.lk-deed {
  position: absolute; left: 50%; top: 50%; z-index: 25; translate: -50% -50%; width: min(320px, 90%);
  border-radius: 14px; overflow: hidden; background: #f5efe0; color: #1b1426; box-shadow: 0 20px 60px rgba(0, 0, 0, .7); cursor: pointer;
  animation: lk-card-in .25s ease-out;
}
.lk-deed-top { position: relative; display: grid; justify-items: center; gap: 2px; padding: 12px 34px 10px; background: var(--g, #3b2a55); color: #fff; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.lk-deed-top b { font-size: 20px; line-height: 1.15; }
.lk-deed-icon { font-size: 26px; }
.lk-deed-icon:empty { display: none; }
.lk-deed-x { position: absolute; right: 8px; top: 6px; color: #fff; font-size: 18px; }
.lk-deed-body { display: grid; gap: 4px; padding: 10px 16px 14px; font-size: 15px; }
.lk-dl { display: flex; justify-content: space-between; gap: 10px; padding: 2px 6px; border-radius: 6px; }
.lk-dl.cur { background: #ffe08a; }
.lk-dl.own { background: #e4dcf5; }
.lk-note { color: #5b5266; font-size: 13px; margin-top: 4px; }

/* ---------- Партия идёт: поле на всю игровую зону ---------- */
body.lk-full main { max-width: none; }
body.lk-full .lobby { grid-template-columns: minmax(0, 1fr); }
body.lk-full .side-col, body.lk-full .main-col > :not(#likhie) { display: none !important; }
body.lk-full #likhie { padding: 14px; transform: none !important; backdrop-filter: none !important; }

/* ---------- Телефон и узкий планшет ---------- */
@media (max-width: 900px) {
  .lk-table { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .lk-strip { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .lk-strip::-webkit-scrollbar { display: none; }
  .lk-chip { flex: 0 0 auto; grid-template-columns: 30px auto; gap: 0 6px; padding: 4px 8px 4px 4px; max-width: 46vw; }
  .lk-chip .lk-tok { width: 30px; height: 30px; font-size: 17px; }
  .lk-chip .lk-pname { font-size: 12px; }
  .lk-chip .lk-money { font-size: 14px; }
  .lk-chip .lk-worth { display: none; }
  .lk-chip.me .lk-pname::after { content: ""; }
  .lk-float { top: auto; bottom: 100%; right: 4px; font-size: 15px; }
  .lk-log { display: none; }
  .lk-table.log-open .lk-log {
    display: block; position: fixed; left: 8px; right: 8px; top: 96px; z-index: 40; max-height: 50vh; padding: 12px 12px 12px 30px;
    border-radius: 12px; background: rgba(15, 10, 22, .97); border: 1px solid var(--line-2); box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
  }
  .lk-logbtn { display: inline-block; }
  .lk-logbtn.on { background: var(--gold); color: #111; }
  .lk-actions button.big { flex: 1 1 120px; min-height: 50px; font-size: 16px; }
  .lk-deed { position: fixed; }

  body.lk-full { overflow: hidden; }
  body.lk-full .music { display: none; }
  body.lk-full #likhie { padding: 0; }
  body.lk-full .lk-table {
    position: fixed; inset: 0; z-index: 35; gap: 0; background: #0f0a16;
    padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
  }
  body.lk-full .lk-head { padding: 6px 8px; background: #170f21; border-bottom: 1px solid var(--line-2); }
  body.lk-full .lk-zoom { display: inline-block; }
  body.lk-full .lk-strip { padding: 6px 8px; background: #170f21; }
  body.lk-full .lk-stage { flex: 1; min-height: 0; }
  body.lk-full .lk-view { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  body.lk-full .lk-table:not(.zoomed) .lk-view { display: grid; place-items: center; }
  body.lk-full .lk-dock {
    padding: 8px 10px 10px; gap: 6px; background: linear-gradient(180deg, #1d1429, #140d1d); border-top: 1px solid rgba(255, 61, 139, .35);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .5);
  }
  body.lk-full .lk-say { font-size: 15px; }
  body.lk-full .lk-roll .lk-die { width: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  .lk-center::after, .lk-vhs, .lk-logo .lk-neon, .lk-chip.acting .lk-tok, .lk-cell.pick { animation: none; }
  .lk-pawn { transition: none; }
}

/* ---------- Часть 3: панели над полем (аукцион, обмен, долг, итог) ---------- */
.lk-ovl {
  position: absolute; left: 50%; top: 50%; z-index: 15; translate: -50% -50%; width: min(440px, 64%);
  display: grid; gap: 8px; justify-items: stretch; pointer-events: none;
}
.lk-ovl:empty { display: none; }
.lk-ovl > * { pointer-events: auto; text-align: center; justify-items: center; max-width: none; }
.lk-auc-cell {
  display: grid; gap: 2px; width: 100%; padding: 8px 10px; border-radius: 10px; cursor: pointer;
  background: linear-gradient(180deg, color-mix(in srgb, var(--g) 70%, #000), color-mix(in srgb, var(--g) 35%, #120c1a));
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}
.lk-auc-cell b { font-size: 18px; }
.lk-bidders { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.lk-bidder { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--c); font-size: 13px; background: color-mix(in srgb, var(--c) 15%, transparent); }
.lk-bidder.passed { opacity: .4; text-decoration: line-through; }
.lk-bidder.acting { box-shadow: 0 0 0 2px var(--gold), 0 0 12px var(--gold); }
.lk-tpanel { border-color: #4fe3c1; box-shadow: 0 0 20px rgba(79, 227, 193, .3); }
.lk-tview { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: start; width: 100%; }
.lk-tview > div { display: grid; gap: 4px; justify-items: center; }
.lk-tside { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.lk-tm { padding: 2px 8px; border-radius: 8px; background: rgba(255, 255, 255, .1); font-weight: 800; }
.lk-swap { align-self: center; font-size: 22px; color: #4fe3c1; }

/* Плашка улицы: цветная точка района и короткое название. */
.lk-cchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 4px; border-radius: 8px; background: rgba(255, 255, 255, .07); font-size: 13px; font-weight: 700; white-space: nowrap; }
.lk-cchip > i { width: 12px; height: 12px; border-radius: 3px; background: var(--g); box-shadow: 0 0 6px var(--g); flex: none; }

/* ---------- Окно «Мои улицы» и обмен ---------- */
.lk-sheet {
  position: absolute; left: 50%; top: 50%; z-index: 26; translate: -50% -50%; width: min(620px, 96%); max-height: 94%;
  display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  background: #171020; border: 1px solid rgba(255, 61, 139, .45); box-shadow: 0 24px 70px rgba(0, 0, 0, .75), 0 0 30px rgba(255, 61, 139, .15);
}
.lk-sheet[hidden] { display: none; }
.lk-sheet-head { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); background: #1e1529; }
.lk-sheet-head b { font-size: 18px; }
.lk-sheet-x { margin-left: auto; font-size: 18px; }
.lk-sheet-body { flex: 1; display: grid; align-content: start; gap: 10px; padding: 12px 14px; overflow: auto; min-height: 0; }
.lk-sheet-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line-2); background: #1e1529; }
.lk-sheet-foot button.big { flex: 1 1 200px; min-height: 50px; font-size: 17px; font-weight: 800; border-radius: 14px; }
.lk-sheet-body button.big { min-height: 48px; font-size: 16px; font-weight: 800; border-radius: 14px; }
.likhie button.small { padding: 6px 10px; font-size: 13px; border-radius: 10px; }
.lk-table button:disabled { opacity: .38; filter: grayscale(.7); cursor: not-allowed; }
.lk-warn { padding: 8px 10px; border-radius: 10px; background: rgba(239, 91, 84, .15); border: 1px solid var(--red); }
.lk-warn.ok { background: rgba(109, 255, 158, .1); border-color: #6dff9e; }
.lk-grp { display: grid; gap: 6px; padding: 8px 10px; border-radius: 12px; border-left: 4px solid var(--g); background: rgba(255, 255, 255, .03); }
.lk-grp-head { font-size: 13px; font-weight: 800; color: color-mix(in srgb, var(--g) 70%, #fff); }
.lk-prow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.lk-prow.mort .lk-cchip { opacity: .65; }
.lk-pbtns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.lk-why { font-size: 12px; color: var(--muted); }
.lk-deed-btns { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 14px; }
.lk-deed-btns .lk-why { color: #5b5266; flex-basis: 100%; }
.lk-deed { cursor: default; }

.lk-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lk-pick { color: var(--text); padding: 6px 12px; border-radius: 999px; border: 2px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); font-weight: 700; }
.lk-pick.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 30%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 50%, transparent); }
.lk-tcols { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: start; }
.lk-tcol { display: grid; gap: 8px; padding: 10px; border-radius: 12px; border-top: 3px solid var(--c); background: rgba(255, 255, 255, .03); min-width: 0; }
.lk-tcol-head { font-size: 14px; }
.lk-tmoney { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lk-tmoney .lk-bid { flex: none; width: 88px; min-height: 38px; }
.lk-tcells { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-cchip-btn { padding: 0; border-radius: 9px; border: 2px solid transparent; background: none; color: var(--text); box-shadow: none; }
.lk-cchip-btn.on { border-color: var(--gold); box-shadow: 0 0 10px rgba(242, 193, 78, .5); }
.lk-cchip-btn.on .lk-cchip { background: rgba(242, 193, 78, .2); }
.lk-cchip-btn:disabled { opacity: .35; }
.lk-tcols > .lk-swap { padding-top: 34px; }
.lk-tsum { display: grid; gap: 4px; font-size: 14px; }
.lk-good { color: #6dff9e; font-weight: 700; }
.lk-bad { color: #ffb347; font-weight: 700; }
.lk-banner.deal { color: #d8fff6; text-shadow: 0 0 12px #4fe3c1; }

@media (max-width: 900px) {
  .lk-ovl { top: 8px; translate: -50% 0; width: calc(100% - 16px); max-height: 46%; overflow: auto; }
  .lk-ovl .lk-panel { padding: 8px 10px; font-size: 13px; }
  .lk-ovl .lk-big { font-size: 22px; }
  .lk-sheet { position: fixed; inset: 0; translate: none; width: auto; max-height: none; border-radius: 0; z-index: 45; }
  .lk-tcols { grid-template-columns: 1fr; }
  .lk-tcols > .lk-swap { padding: 0; text-align: center; }
  .lk-pbtns { margin-left: 0; }
}

/* ---------- Реплики ботов ---------- */
.lk-bubble {
  position: absolute; z-index: 15; translate: -50% calc(-100% - var(--u) * .45); max-width: min(260px, 40%); width: max-content;
  padding: 7px 11px 8px; border-radius: 12px; background: #fdf8ea; color: #1b1426; font-size: 14px; line-height: 1.3;
  border: 2px solid var(--c); box-shadow: 0 8px 22px rgba(0, 0, 0, .55); pointer-events: none;
}
.lk-bubble::after {
  content: ""; position: absolute; left: clamp(14px, calc(50% + var(--dx, 0px)), calc(100% - 14px)); top: 100%; translate: -50% -1px;
  border: 8px solid transparent; border-top-color: var(--c); border-bottom: 0;
}
.lk-bubble.below { translate: -50% calc(var(--u) * .45); }
.lk-bubble.below::after { top: auto; bottom: 100%; translate: -50% 1px; border-top: 0; border-bottom: 8px solid var(--c); }
.lk-bubble b, .lk-saybox b { display: block; font-size: 11px; color: color-mix(in srgb, var(--c) 55%, #000); text-transform: uppercase; letter-spacing: .04em; }
.lk-bubble.pop, .lk-saybox.pop { animation: lk-bubble 4.5s ease-out forwards; }
.lk-saybox { display: none; }
@keyframes lk-bubble { 0% { opacity: 0; scale: .6; } 6% { opacity: 1; scale: 1.05; } 10% { scale: 1; } 88% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 900px) {
  .lk-bubble { display: none; }
  .lk-saybox {
    display: block; position: absolute; left: 8px; right: 8px; top: 8px; z-index: 15; padding: 7px 12px 8px; border-radius: 12px;
    background: #fdf8ea; color: #1b1426; font-size: 14px; line-height: 1.3; border-left: 5px solid var(--c);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .55); pointer-events: none;
  }
  .lk-saybox[hidden] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lk-bubble.pop, .lk-saybox.pop { animation: none; }
}