:root {
  --bg: #101319;
  --bg2: #161b24;
  --bg3: #1d2430;
  --line: #27303f;
  --fg: #e7edf6;
  --muted: #8b97a8;
  --accent: #8ee06a;
  --accent2: #5ec8ff;
  --danger: #ff6b6b;
  --radius: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 28px 28px;
  min-height: 100vh;
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 14px 72px;
}

/* ---------- header ---------- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 2px 18px;
}

.logo {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--fg);
  text-decoration: none;
  text-transform: uppercase;
}
.logo:hover { color: var(--accent); }

.topright {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- typography ---------- */

h1 {
  font-size: clamp(28px, 7vw, 46px);
  line-height: 1.05;
  margin: 8px 0 10px;
  letter-spacing: -.02em;
}

h2 {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
  margin: 0 0 14px;
  font-weight: 600;
}

.sub {
  color: var(--muted);
  font-size: 15px;
  max-width: 56ch;
  line-height: 1.55;
  margin: 0 0 26px;
}

/* ---------- home ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.card {
  text-align: left;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  color: var(--fg);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font: inherit;
  transition: border-color .15s, transform .15s, background .15s;
}
.card:hover { border-color: #3b4a60; transform: translateY(-2px); }
.card.active {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(142,224,106,.12), rgba(142,224,106,.03));
}
.card-title { font-size: 17px; font-weight: 700; }
.card-tag { font-size: 13px; color: var(--muted); line-height: 1.4; }
.card-meta {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent2);
  margin-top: 4px;
}

/* ---------- открытые комнаты ---------- */

.rooms { margin-bottom: 20px; }

.rooms-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.rooms-head h2 { margin: 0; font-size: 16px; }

#roomsBox {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
}

.room-card {
  text-align: left;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--fg);
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
button.room-card:hover { border-color: var(--accent2); background: var(--bg3); }
.room-card.disabled { opacity: .55; cursor: default; }

.rc-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.rc-title { font-size: 14px; font-weight: 700; }
.rc-code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--muted);
}
.rc-names {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rc-meta { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #6f7d90; }
.rc-go { font-size: 13px; font-weight: 700; color: var(--accent); margin-top: 2px; }

.rooms-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.panel {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}

.panel h2 { margin-bottom: 12px; }

/* ---------- forms ---------- */

label.opt {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--muted);
}

input, select {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--fg);
  padding: 11px 13px;
  font: inherit;
  outline: none;
}
input:focus, select:focus { border-color: var(--accent2); }

input::placeholder { color: #5b6676; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: #0d1208;
  border: none;
  border-radius: 10px;
  padding: 12px 18px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .4; cursor: not-allowed; filter: none; }
.btn.wide { width: 100%; margin-top: 14px; }
.btn.ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--line);
}
.btn.ghost:hover { border-color: #46566d; }
.btn.small { padding: 8px 12px; font-size: 13px; }

.row { display: flex; gap: 10px; }

/* ---------- lobby ---------- */

.lobby { max-width: 640px; }

.roomcode {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: clamp(38px, 12vw, 64px);
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--accent);
  background: var(--bg2);
  border: 1px dashed #34405a;
  border-radius: var(--radius);
  padding: 18px 12px;
  text-align: center;
  cursor: pointer;
  user-select: all;
  margin-bottom: 8px;
}
.roomcode:active { background: var(--bg3); }

.hint { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 22px; }

.players-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 14px;
}
.chip.out { opacity: .45; text-decoration: line-through; }
.chip.turn { border-color: var(--accent); }

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3c4658;
  flex: none;
}
.dot.on { background: var(--accent); }
.dot.p0 { background: #8ee06a; }
.dot.p1 { background: #5ec8ff; }
.dot.p2 { background: #ffb454; }
.dot.p3 { background: #ff6b9d; }
.dot.p4 { background: #b388ff; }
.dot.p5 { background: #4fd1c5; }
.dot.p6 { background: #ffd166; }
.dot.p7 { background: #f07c5b; }

/* ---------- game ---------- */

.game-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.turn {
  font-size: 17px;
  font-weight: 700;
  color: var(--muted);
}
.turn.mine { color: var(--accent); }

.players-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.players-strip .chip { font-size: 12px; padding: 5px 10px; }

/* ---------- boards ---------- */

.board {
  display: grid;
  gap: 2px;
  width: min(94vw, 620px);
  margin: 0 auto;
  touch-action: manipulation;
}

.cell {
  aspect-ratio: 1;
  background: var(--bg2);
  border: 1px solid #212936;
  border-radius: 4px;
  color: var(--fg);
  font: inherit;
  font-size: calc(100% * 1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: default;
  transition: background .12s;
  overflow: hidden;
}
button.cell[data-act] { cursor: pointer; }
button.cell[data-act]:hover { background: var(--bg3); }

.board.lines { grid-template-columns: repeat(var(--n), 1fr); }
.board.lines .cell {
  font-weight: 700;
  font-size: clamp(9px, calc(340px / var(--n) * 0.55), 26px);
  line-height: 1;
}
.board.lines .cell.last { box-shadow: inset 0 0 0 2px var(--accent2); }

.cell.p0 { color: #8ee06a; }
.cell.p1 { color: #5ec8ff; }
.cell.p2 { color: #ffb454; }
.cell.p3 { color: #ff6b9d; }
.cell.p4 { color: #b388ff; }
.cell.p5 { color: #4fd1c5; }
.cell.p6 { color: #ffd166; }
.cell.p7 { color: #f07c5b; }

/* ---------- battleship ---------- */

.bs-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  align-items: start;
}

.bs-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin: 0 0 10px;
  text-align: center;
}

.board.bs { grid-template-columns: repeat(10, 1fr); width: min(100%, 420px); }
.board.bs .cell {
  border-radius: 3px;
  background: #121822;
  border-color: #1d2733;
  cursor: default;
}
.board.bs button.cell[data-act]:hover { background: #1b2534; }
.board.bs .cell.ship { background: #2b3a4f; border-color: #3a4d66; }
.board.bs .cell.sunk { background: #4a2230; border-color: #6b3244; }
.board.bs .cell.hit { background: var(--danger); border-color: #ff8b8b; }
.board.bs .cell.miss { background: #14202c; }
.bs-stat { margin-left: 6px; color: var(--muted); font-size: .85em; }
.bs-target-stats { margin: 6px 0 8px; color: var(--muted); font-size: 12px; text-align: center; }
.board.bs .cell.miss::after {
  content: "";
  width: 26%;
  height: 26%;
  border-radius: 50%;
  background: #46617a;
}

.tabs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 10px; }
.tab {
  background: var(--bg2);
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.tab.active { border-color: var(--accent2); color: var(--fg); }
.tab.out { opacity: .4; text-decoration: line-through; }

/* ---------- tanks ---------- */

.board.tanks {
  grid-template-columns: repeat(var(--w), 1fr);
  width: min(94vw, 660px);
  gap: 1px;
}
.board.tanks .cell {
  border-radius: 2px;
  background: #141a23;
  border-color: #1b232e;
  position: relative;
}
.board.tanks .cell.wall { background: #3a4050; border-color: #4a5468; }
.board.tanks .cell.wall.gone { background: #1a1f28; }
.board.tanks .cell.tank { border-width: 2px; }
.board.tanks .cell.me { box-shadow: 0 0 0 2px rgba(255,255,255,.55) inset; }
.board.tanks .cell.targetable { outline: 1px solid rgba(94,200,255,.35); outline-offset: -1px; }

/* следы выстрелов: промах — крестик, попадание — воронка, сбитая стена — обломки */
.board.tanks .cell.shot-miss::before,
.board.tanks .cell.shot-hit::before,
.board.tanks .cell.shot-wall::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.board.tanks .cell.shot-miss::before {
  background:
    linear-gradient(45deg, transparent 46%, #5d6d84 46%, #5d6d84 54%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, #5d6d84 46%, #5d6d84 54%, transparent 54%);
  opacity: .9;
}

.board.tanks .cell.shot-hit::before {
  inset: 7%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #17090c 0 22%, #ff8a7a 23% 30%, #7c2c36 31% 62%, #37151b 63% 100%);
  box-shadow: 0 0 8px rgba(255,107,107,.45);
}

.board.tanks .cell.shot-wall::before {
  inset: 12%;
  background:
    radial-gradient(circle at 30% 35%, #6b7484 0 14%, transparent 15%),
    radial-gradient(circle at 68% 42%, #59616f 0 11%, transparent 12%),
    radial-gradient(circle at 45% 72%, #6b7484 0 16%, transparent 17%),
    radial-gradient(circle at 78% 76%, #4b5361 0 9%, transparent 10%);
}

.board.tanks .cell.last-shot::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 3px;
  border: 2px solid var(--accent2);
  pointer-events: none;
  animation: shot-flash .7s ease-out 1 forwards;
}

@keyframes shot-flash {
  0% { opacity: 1; transform: scale(1.25); }
  100% { opacity: 0; transform: scale(1); }
}

.tankdot {
  width: 58%;
  height: 58%;
  border-radius: 4px;
  display: block;
}
.hp {
  position: absolute;
  right: 1px;
  bottom: 1px;
  font-size: 8px;
  line-height: 1;
  color: #fff;
  background: rgba(0,0,0,.55);
  border-radius: 3px;
  padding: 1px 2px;
}

.modes { display: flex; gap: 8px; justify-content: center; margin: 0 0 14px; }

/* ---------- log ---------- */

.log {
  margin-top: 20px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  max-height: 180px;
  overflow-y: auto;
}
.log div:first-child { color: var(--fg); }

/* ---------- toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 24px);
  background: #2a1620;
  border: 1px solid #5d2b3c;
  color: #ffc9d6;
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  max-width: 90vw;
  text-align: center;
  z-index: 10;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- связь ---------- */

.conn {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: #5a1f2e;
  border-bottom: 1px solid #7d2c40;
  color: #ffd7e2;
  text-align: center;
  font-size: 13px;
  padding: 9px 12px;
  transform: translateY(-110%);
  transition: transform .2s;
}
.conn.show { transform: none; }

/* ---------- кубики ---------- */

.dice-screen { max-width: 720px; margin: 0 auto; }

.dice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 18px 0 22px;
}

.dice-card {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 10px;
  text-align: center;
  transition: border-color .15s;
}
.dice-card.wait { border-color: var(--accent2); }
.dice-card.rolled { border-color: #35404f; }

.dice-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 13px;
  color: var(--fg);
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dice-pair { display: flex; gap: 6px; justify-content: center; }

.die {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: #eef3fb;
  color: #101319;
  font-weight: 800;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pop .16s ease-out;
}
.die.empty {
  background: transparent;
  border: 1px dashed #46536a;
  color: #5b6b82;
  animation: none;
}

.dice-sum {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.dice-card.rolled .dice-sum { color: var(--accent); font-weight: 700; }

@keyframes pop {
  from { transform: scale(.55) rotate(-10deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.order-box {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.order-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ord;
}
.order-list li {
  padding: 7px 0;
  border-bottom: 1px solid #1e2632;
  font-size: 15px;
}
.order-list li:last-child { border-bottom: none; }
.order-list b { color: var(--accent); margin-right: 8px; }

.btn.big { padding: 16px 24px; font-size: 17px; }

/* ---------- порядок хода ---------- */

.order-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--muted);
}
.ord {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.ord.now { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.ord.out { opacity: .4; text-decoration: line-through; }

/* ---------- флот ---------- */

.fleet-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
}

.tile {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  font: inherit;
  color: var(--fg);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tile.sel { border-color: var(--accent); background: rgba(142,224,106,.1); }
.tile:disabled { opacity: .35; cursor: not-allowed; }
.tile-ship { letter-spacing: 2px; color: #9fb2c9; font-size: 13px; }
.tile-n { font-size: 12px; color: var(--muted); }

.cell.pv-ok { background: rgba(142,224,106,.35) !important; border-color: var(--accent) !important; }
.cell.pv-bad { background: rgba(255,107,107,.3) !important; border-color: var(--danger) !important; }

/* ---------- персонажи ---------- */

.av {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 50%;
  background: #1b2230;
  border: 2px solid var(--line);
  line-height: 1;
  user-select: none;
}
.av .face { display: block; transform-origin: 50% 80%; }

.av.sm { width: 22px; height: 22px; font-size: 13px; }
.av.lg { width: 54px; height: 54px; font-size: 32px; }

.av.p0 { border-color: #8ee06a; background: rgba(142,224,106,.14); }
.av.p1 { border-color: #5ec8ff; background: rgba(94,200,255,.14); }
.av.p2 { border-color: #ffb454; background: rgba(255,180,84,.14); }
.av.p3 { border-color: #ff6b9d; background: rgba(255,107,157,.14); }
.av.p4 { border-color: #b388ff; background: rgba(179,136,255,.14); }
.av.p5 { border-color: #4fd1c5; background: rgba(79,209,197,.14); }
.av.p6 { border-color: #ffd166; background: rgba(255,209,102,.14); }
.av.p7 { border-color: #f07c5b; background: rgba(240,124,91,.14); }

/* облачко-подсказка над головой */
.av::after {
  content: '';
  position: absolute;
  top: -9px;
  right: -9px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--bg3);
  border: 1px solid var(--line);
  color: var(--fg);
  font-size: 10px;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .15s, transform .15s;
}
.av.thinking::after {
  content: '…';
  opacity: 1;
  transform: none;
  color: var(--accent2);
  animation: bubble 1.4s ease-in-out infinite;
}
.av.moved::after {
  content: '!';
  opacity: 1;
  transform: none;
  background: var(--accent);
  border-color: var(--accent);
  color: #101319;
  animation: bang .5s ease-out 2;
}
.av.lost::after {
  content: '💧';
  opacity: 1;
  transform: none;
  border-color: #3f5878;
  background: #16202e;
  font-size: 9px;
  line-height: 14px;
}
.av.won::after {
  content: '★';
  opacity: 1;
  transform: none;
  border-color: var(--accent);
  color: var(--accent);
}

.av.thinking .face { animation: think 2s ease-in-out infinite; }
.av.moved .face { animation: pop-face .45s ease-out 2; }
.av.lost .face { animation: sad 3.2s ease-in-out infinite; }
.av.won .face { animation: joy 1.1s ease-in-out infinite; }

@keyframes think {
  0%, 100% { transform: rotate(-5deg) translateY(0); }
  50% { transform: rotate(6deg) translateY(-1px); }
}
@keyframes pop-face {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@keyframes sad {
  0%, 100% { transform: translateY(1px) rotate(-3deg); }
  50% { transform: translateY(2px) rotate(3deg); }
}
@keyframes joy {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.08); }
}
@keyframes bubble {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-2px); opacity: .65; }
}
@keyframes bang {
  0% { transform: scale(.5) rotate(-12deg); }
  60% { transform: scale(1.2) rotate(6deg); }
  100% { transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .av .face, .av::after { animation: none !important; }
}

/* ---------- гонка на своих полях ---------- */

.race-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.race-card {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.race-card.me { border-color: #3a4a60; }
.race-card.done { opacity: .5; }

.race-head { display: flex; align-items: center; gap: 10px; min-width: 0; }

.race-name {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.race-name em { font-style: normal; color: var(--muted); font-weight: 400; }

.board.lines.race {
  width: 100%;
  gap: 2px;
}
.board.lines.race .cell {
  font-size: clamp(9px, 2.6vw, 22px);
  border-radius: 3px;
}

.game-note {
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 16px;
}
.game-note b { color: var(--fg); font-weight: 600; }

.dice-card.throwable {
  cursor: pointer;
  border-color: var(--accent2);
  font: inherit;
  color: inherit;
}
.dice-card.throwable:hover { background: var(--bg3); }
.dice-card.throwable .dice-sum { color: var(--accent2); }

.dice-pair.rolling .die { animation: dice-tumble .14s linear infinite; }
.dice-pair.rolling .die:nth-child(2) { animation-delay: .05s; }

@keyframes dice-tumble {
  0% { transform: translateY(0) rotate(0) scale(1); }
  35% { transform: translateY(-4px) rotate(-8deg) scale(1.08); }
  70% { transform: translateY(1px) rotate(7deg) scale(.97); }
  100% { transform: translateY(0) rotate(0) scale(1); }
}

/* ---------- монополия ---------- */

.mono-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  grid-template-rows: repeat(9, minmax(0, 1fr));
  gap: 2px;
  width: min(96vw, 820px);
  aspect-ratio: 1;
  margin: 0 auto 16px;
}

.mono-cell {
  position: relative;
  background: #151b25;
  border: 1px solid #232d3c;
  border-radius: 4px;
  padding: 3px 3px 13px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: clamp(6px, 1vw, 10px);
  line-height: 1.05;
  min-width: 0;
}
.mono-name { font-weight: 600; word-break: break-word; }
.mono-bar { display: block; height: 6px; border-radius: 2px; margin: -1px -1px 2px; }
.mono-price { color: var(--muted); font-size: .92em; }

.mono-owner {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.55);
  z-index: 1;
}

.mono-tokens {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 2px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.tok {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.55);
}
.tok.p0, .mono-owner.p0 { background: #8ee06a; }
.tok.p1, .mono-owner.p1 { background: #5ec8ff; }
.tok.p2, .mono-owner.p2 { background: #ffb454; }
.tok.p3, .mono-owner.p3 { background: #ff6b9d; }
.tok.p4, .mono-owner.p4 { background: #b388ff; }
.tok.p5, .mono-owner.p5 { background: #4fd1c5; }
.tok.p6, .mono-owner.p6 { background: #ffd166; }
.tok.p7, .mono-owner.p7 { background: #f07c5b; }

.mono-cell.t-go { background: linear-gradient(135deg, #1d3324, #141a23); }
.mono-cell.t-jail { background: #1c2433; }
.mono-cell.t-free { background: #1b2a2a; }
.mono-cell.t-gotojail { background: #2c1a22; }
.mono-cell.t-tax { background: #241f18; }
.mono-cell.buyable {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.mono-cell.landed { animation: mono-land .7s ease-out; }

@keyframes mono-land {
  0% { box-shadow: inset 0 0 0 3px var(--accent2); }
  100% { box-shadow: inset 0 0 0 0 transparent; }
}

.mono-center {
  grid-area: 2 / 2 / 9 / 9;
  background: radial-gradient(circle at 50% 18%, #1a2230, #101319 72%);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  overflow: hidden;
}

.mono-brand {
  font-size: clamp(10px, 1.6vw, 18px);
  font-weight: 800;
  letter-spacing: .18em;
  color: #cfe0f5;
}

.mono-dice-box { display: flex; flex-direction: column; align-items: center; gap: 6px; }

.mono-dice {
  display: flex;
  gap: 8px;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
}
.mono-dice.throwable { cursor: pointer; }
.mono-dice.throwable .die {
  border-color: var(--accent2);
  box-shadow: 0 0 0 2px rgba(94,200,255,.16);
}
.mono-dice .die {
  width: clamp(24px, 4.2vw, 42px);
  height: clamp(24px, 4.2vw, 42px);
  font-size: clamp(13px, 2.2vw, 22px);
}

.mono-roll-text { font-size: clamp(9px, 1.1vw, 12px); color: var(--muted); }
.mono-hint { margin: 0; font-size: clamp(9px, 1.1vw, 12px); color: var(--muted); }

.mono-buy {
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 8px;
  font-size: clamp(9px, 1.1vw, 12px);
  max-width: 100%;
}
.mono-actions { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }

.mono-players {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 10px;
  width: 100%;
  max-width: 340px;
  font-size: clamp(8px, 1vw, 11px);
}
.mono-player { display: flex; align-items: center; gap: 4px; min-width: 0; }
.mono-player.now { color: var(--accent); }
.mono-player.out { opacity: .4; text-decoration: line-through; }
.mp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-money { margin-left: auto; color: var(--muted); white-space: nowrap; }
.mono-player.now .mp-money { color: var(--accent); }

.mono-cell.buildable {
  cursor: pointer;
  border-color: var(--accent2);
  box-shadow: inset 0 0 0 1px rgba(94, 200, 255, .7);
}
.mono-cell.buildable:hover {
  background: #243344;
  box-shadow: inset 0 0 0 2px var(--accent2);
}

.mono-houses {
  font-size: .82em;
  line-height: 1;
  letter-spacing: -1px;
  white-space: nowrap;
}

.mono-tokens-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

.mono-token {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(12, 18, 25, .9);
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .45);
  font-size: 13px;
  line-height: 1;
  transform: translate(-50%, -50%);
  transition: left .16s linear, top .16s linear;
  z-index: 7;
}
.mono-token.now {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 209, 102, .55), 0 2px 8px rgba(0, 0, 0, .5);
  animation: mono-token-pulse 1.3s ease-in-out infinite;
}
.mono-token.moving {
  z-index: 20;
  transition: left .13s linear, top .13s linear;
  filter: drop-shadow(0 0 5px rgba(255, 209, 102, .9));
}

@keyframes mono-token-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.16); }
}

.mono-player .mp-token {
  font-size: 12px;
  line-height: 1;
}
.mp-props {
  color: var(--muted);
  font-size: .88em;
  white-space: nowrap;
}
.mono-player.now .mp-props { color: var(--accent2); }

.mono-card {
  max-width: 320px;
  width: 100%;
  border-radius: 10px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  background: #1a2230;
  font-size: clamp(9px, 1.05vw, 12px);
  line-height: 1.25;
}
.mono-card.chance { border-color: #6d4d1f; background: linear-gradient(150deg, #2a2215, #171b21); }
.mono-card.chest { border-color: #24506a; background: linear-gradient(150deg, #162733, #151b22); }
.mc-kind { font-size: .78em; letter-spacing: .16em; color: var(--accent2); }
.mono-card.chance .mc-kind { color: #f3b45f; }
.mc-title { font-weight: 700; margin: 1px 0 2px; }
.mc-text { color: var(--muted); }

.mono-portfolios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px;
  width: min(96vw, 820px);
  margin: 0 auto 16px;
}
.mono-portfolio {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #131923;
  padding: 8px 10px;
  min-width: 0;
}
.mono-portfolio.mine { border-color: #38536e; background: #141d29; }
.mono-portfolio.out { opacity: .45; }
.mpf-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin-bottom: 5px;
}
.mpf-head .mp-token { font-size: 14px; }
.mpf-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpf-sum { margin-left: auto; color: var(--muted); font-size: 11px; white-space: nowrap; }
.mpf-list { display: flex; flex-wrap: wrap; gap: 4px; }
.mpf-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #283342;
  border-radius: 6px;
  background: #18212d;
  color: var(--text);
  padding: 3px 5px;
  font-size: 11px;
  line-height: 1.2;
  font: inherit;
}
.mpf-item.build {
  cursor: pointer;
  border-color: var(--accent2);
  background: #182736;
}
.mpf-item.build:hover { background: #21364b; }
.mpf-color { width: 6px; height: 14px; border-radius: 2px; flex: 0 0 auto; }
.mpf-name { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpf-rent { color: var(--muted); }
.mpf-houses { font-size: .9em; letter-spacing: -1px; }
.mpf-cost { color: var(--accent2); font-weight: 700; }
.mpf-empty { color: var(--muted); font-size: 11px; }

.token-pick {
  margin: 12px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #121923;
  padding: 10px;
}
.tp-head { font-weight: 700; margin-bottom: 8px; }
.token-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.token-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 1px solid #283342;
  border-radius: 9px;
  background: #18212d;
  color: var(--text);
  padding: 7px 4px;
  font: inherit;
  cursor: pointer;
}
.token-choice:hover { background: #21364b; }
.token-choice.sel {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.token-choice:disabled { opacity: .38; cursor: not-allowed; }
.tc-icon { font-size: 22px; line-height: 1.1; }
.tc-name { font-size: 10px; }
.tc-taken { font-size: 9px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lobby-start { display: flex; gap: 8px; align-items: stretch; }
.lobby-start .btn.wide { flex: 1; }
.chip.bot { border-color: #3d5a78; background: #16202c; }
.bot-mark { font-size: 13px; }

/* ---------- аккаунт и лидеры ---------- */

.auth-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #131a24;
  padding: 10px 12px;
  margin: 0 0 14px;
}
.auth-box.logged { border-color: #38536e; }
.auth-who { font-size: 13px; color: var(--muted); }
.auth-who b { color: var(--text); }
.auth-title { font-weight: 700; font-size: 13px; width: 100%; }
.auth-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; width: 100%; }
.auth-form input {
  flex: 1 1 170px;
  min-width: 0;
  background: #0f151d;
  border: 1px solid #2a3646;
  border-radius: 8px;
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
}
.auth-form .btn { white-space: nowrap; }
.leaders { margin: 18px 0; }
.lead-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 8px;
}
.lead-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #131923;
  padding: 8px 10px;
}
.lead-title { font-weight: 700; font-size: 13px; margin-bottom: 5px; color: #cfe0f5; }
.lead-head, .lead-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 40px 38px;
  gap: 4px;
  align-items: center;
  font-size: 11px;
}
.lead-head { color: var(--muted); border-bottom: 1px solid #222d3b; padding-bottom: 3px; margin-bottom: 3px; }
.lead-row { padding: 2px 0; }
.lead-place { color: var(--muted); }
.lead-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-wins { color: var(--accent); text-align: right; }
.lead-games { color: var(--muted); text-align: right; }
.lead-empty { color: var(--muted); font-size: 11px; padding: 4px 0; }

/* ---------- карты и дурак ---------- */

.pcard {
  position: relative;
  width: 54px;
  height: 76px;
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 3px 5px;
  border: 1px solid #4c5a6c;
  border-radius: 7px;
  background: linear-gradient(145deg, #f4f0e6, #d9d2c2);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .35);
  font: inherit;
  color: #1b1f26;
  cursor: default;
}
.pcard.red { color: #b22d3c; }
.pcard.black { color: #1b1f26; }
.pcard.small { width: 34px; height: 48px; padding: 2px 3px; border-radius: 5px; }
.pcard .pc-rank { font-weight: 800; font-size: 17px; line-height: 1; }
.pcard .pc-suit { font-size: 18px; line-height: 1; align-self: flex-end; }
.pcard.small .pc-rank { font-size: 12px; }
.pcard.small .pc-suit { font-size: 12px; }
.pcard:disabled { opacity: .55; cursor: default; }
.pcard.empty { background: transparent; border-style: dashed; box-shadow: none; }
.durak-arena { max-width: 780px; margin: 0 auto 16px; }
.durak-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}
.durak-trump { display: inline-flex; align-items: center; gap: 5px; }
.durak-role { text-align: center; font-weight: 700; color: var(--accent); margin: 8px 0; }
.durak-opponents {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-size: 12px;
}
.durak-opp {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 7px;
  color: var(--muted);
}
.durak-opp.attacker { border-color: #d9a93c; color: #ffd166; }
.durak-opp.defender { border-color: #5ec8ff; color: #8fdcff; }
.durak-opp.out { opacity: .4; text-decoration: line-through; }
.durak-opp em { font-style: normal; font-size: .85em; margin-left: 4px; }
.durak-table {
  min-height: 118px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px;
  border: 1px dashed #2b3646;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 20%, #18212d, #10151d 75%);
}
.durak-pair { position: relative; width: 82px; height: 102px; }
.durak-pair .pcard { position: absolute; top: 0; left: 0; }
.durak-pair .pcard.defend { top: 18px; left: 24px; transform: rotate(7deg); }
.durak-missing {
  position: absolute;
  top: 18px;
  left: 24px;
  width: 54px;
  height: 76px;
  border: 1px dashed #4b5a6d;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4b5a6d;
  font-size: 20px;
}
.durak-actions { display: flex; justify-content: center; gap: 8px; margin: 10px 0; align-items: center; }
.durak-result { color: var(--danger); font-weight: 700; }
.durak-hand {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  min-height: 80px;
  padding: 8px;
}
.durak-hand .pcard { cursor: pointer; transition: transform .12s; }
.durak-hand .pcard:hover:not(:disabled) { transform: translateY(-4px); }
.durak-hand .pcard:disabled { cursor: default; }
.btn.danger { background: #6b2a35; border-color: #9a3a4a; color: #ffd7e2; }
.btn.danger:hover { background: #7d3340; }

/* ---------- 101 ---------- */

.uno-arena { max-width: 780px; margin: 0 auto 16px; }
.uno-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}
.uno-top .pcard { vertical-align: middle; margin-left: 4px; }
.uno-suit { color: var(--accent2); font-weight: 700; }
.uno-opponents {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0;
  font-size: 12px;
}
.uno-opp {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 7px;
  color: var(--muted);
}
.uno-opp.now { border-color: var(--accent); color: var(--accent); }
.uno-opp.out { opacity: .4; text-decoration: line-through; }
.uno-table {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 90px;
  padding: 12px;
  border: 1px dashed #2b3646;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 20%, #18212d, #10151d 75%);
}
.uno-label { font-weight: 700; color: var(--accent); }
.uno-suits { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.btn.red { background: #5c2630; border-color: #8f3a48; color: #ffd7e2; }
.btn.red:hover { background: #71303c; }
.uno-hand {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  min-height: 84px;
  padding: 10px;
}
.uno-hand .pcard { cursor: pointer; transition: transform .12s; }
.uno-hand .pcard:hover:not(:disabled) { transform: translateY(-4px); }
.uno-scores {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}
.uno-score { border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px; }
.uno-score.mine { border-color: #38536e; color: var(--text); }
.uno-score.out { opacity: .45; text-decoration: line-through; }
.uno-round {
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #131a24;
  padding: 12px;
  margin-top: 10px;
}

/* ---------- манчкин ---------- */

.munch-arena { max-width: 780px; margin: 0 auto 16px; }
.munch-top {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
}
.munch-power b { color: var(--accent); font-size: 15px; }
.munch-opponents {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0;
  font-size: 12px;
}
.munch-opp { border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px; color: var(--muted); }
.munch-opp.now { border-color: var(--accent); color: var(--accent); }
.munch-combat {
  border: 1px solid #5e3b46;
  border-radius: 12px;
  background: linear-gradient(150deg, #241820, #141922);
  padding: 10px;
  margin: 8px 0;
}
.mc-monster { display: flex; gap: 10px; align-items: flex-start; }
.munch-monster-icon { font-size: 38px; line-height: 1; }
.mc-monster-name { font-weight: 800; font-size: 15px; }
.mc-monster-meta { color: #ffb3c0; font-size: 12px; }
.mc-monster-text { color: var(--muted); font-size: 12px; margin-top: 2px; }
.munch-versus {
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
  margin: 8px 0 4px;
  font-size: 13px;
  font-weight: 700;
}
.munch-versus .win { color: #8ee06a; }
.munch-versus .lose { color: #ff8b8b; }
.munch-actions { display: flex; justify-content: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.munch-equipped, .munch-label { font-size: 12px; color: var(--muted); }
.munch-equipped { margin: 8px 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.munch-item {
  border: 1px solid #2b3a4c;
  border-radius: 6px;
  background: #17212d;
  padding: 3px 6px;
  color: var(--text);
}
.munch-item b { color: var(--accent2); }
.munch-hand {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  min-height: 120px;
  padding: 8px;
}
.mcard {
  width: 96px;
  min-height: 124px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 5px;
  border: 1px solid #3c4a5c;
  border-radius: 9px;
  background: linear-gradient(155deg, #1b2532, #121821);
  color: var(--text);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform .12s;
}
.mcard:hover:not(:disabled) { transform: translateY(-3px); }
.mcard:disabled { opacity: .55; cursor: default; }
.mcard.type-item { border-color: #3b5a42; }
.mcard.type-potion { border-color: #5a4b2b; }
.mcard.type-level { border-color: #5b4b76; }
.mcard.type-monster { border-color: #6b3244; }
.mc-icon { font-size: 28px; line-height: 1.1; }
.mc-name { font-weight: 700; font-size: 12px; line-height: 1.2; }
.mc-meta { color: var(--muted); font-size: 10px; }

/* ---------- шашки ---------- */

.chk-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.chk-board {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  width: min(92vw, 560px);
  aspect-ratio: 1;
  gap: 0;
  border: 2px solid #2c2119;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
.chk-cell {
  position: relative;
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  color: inherit;
}
.chk-cell.light { background: #d8c7a5; }
.chk-cell.dark { background: #6f5139; }
.chk-cell.pick, .chk-cell.dest { cursor: pointer; }
.chk-cell:disabled { cursor: default; }
.chk-piece {
  position: relative;
  width: 72%;
  height: 72%;
  border-radius: 50%;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .45), inset 0 1px 2px rgba(255, 255, 255, .3);
}
.chk-piece.mine {
  background: radial-gradient(circle at 34% 28%, #ffffff, #d8e0ea 62%, #8a99ac);
  border: 1px solid #e9eef5;
}
.chk-piece.foe {
  background: radial-gradient(circle at 34% 28%, #596070, #252b36 62%, #11151c);
  border: 1px solid #10141a;
}
.chk-piece.king::after {
  content: '♛';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(13px, 2.4vw, 24px);
  line-height: 1;
  color: #d9a93c;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
}
.chk-cell.sel { box-shadow: inset 0 0 0 4px var(--accent2); }
.chk-cell.last { box-shadow: inset 0 0 0 3px rgba(255, 209, 102, .75); }
.chk-dot {
  position: absolute;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: rgba(110, 230, 140, .8);
  box-shadow: 0 0 8px rgba(110, 230, 140, .8);
}
.chk-cell.cap .chk-dot {
  background: transparent;
  border: 3px solid rgba(255, 110, 110, .95);
  box-shadow: 0 0 8px rgba(255, 110, 110, .7);
}
.chk-info { text-align: center; max-width: 560px; }
.chk-role { font-weight: 700; color: var(--accent); }

@media (max-width: 520px) {
  .wrap { padding: 12px 10px 64px; }
  .board { width: 100%; }
  .board.tanks { width: 100%; }
  .die { width: 32px; height: 32px; font-size: 17px; }
  .mono-board { width: 100%; gap: 1px; }
  .mono-center { padding: 5px; gap: 4px; }
  .mono-players { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px 4px; max-width: none; }
  .mp-props { display: none; }
  .mono-brand { letter-spacing: .1em; }
  .mono-token { width: 16px; height: 16px; font-size: 11px; }
  .mono-portfolios { width: 100%; grid-template-columns: 1fr; }
  .mpf-name { max-width: 76px; }
  .token-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tc-icon { font-size: 19px; }
  .tc-name { font-size: 9px; }
  .mono-card { max-width: 100%; padding: 5px 6px; }
  .pcard { width: 44px; height: 62px; padding: 2px 4px; }
  .pcard .pc-rank { font-size: 14px; }
  .pcard .pc-suit { font-size: 14px; }
  .durak-pair { width: 68px; height: 88px; }
  .durak-pair .pcard.defend { left: 20px; }
  .durak-missing { left: 20px; width: 44px; height: 62px; }
  .mcard { width: 82px; min-height: 108px; }
  .mc-icon { font-size: 23px; }
}