:root {
  --bg: var(--tg-theme-bg-color, #060a12);
  --card: var(--tg-theme-secondary-bg-color, #10182a);
  --text: var(--tg-theme-text-color, #f2f5fb);
  --hint: var(--tg-theme-hint-color, #9aa8c4);
  --accent: var(--tg-theme-button-color, #4a8cff);
  --accent-text: var(--tg-theme-button-text-color, #fff);
  --felt: #0b4d3a;
  --felt-deep: #073528;
  --felt-light: #147a5c;
  --rail: #3d2817;
  --rail-light: #5c3d24;
  --coin: #ffd54f;
  --coin-dim: #c9a227;
  --crown: #c77dff;
  --kazna: #3ee08f;
  --danger: #ff6b7a;
  --seat-0: #4a8cff;
  --seat-1: #3ee08f;
  --seat-2: #c77dff;
  --seat-3: #ffd54f;
  --seat-4: #ff6b7a;
  --seat-5: #5ec8ff;
  --seat-coin-size: 14px;
  --seat-coin-size-opponent: 21px;
  --seat-coin-label-size: 12px;
  --seat-coin-label-size-opponent: 18px;
  --seat-cards-size: 13px;
  --seat-cards-size-opponent: 20px;
  --seat-coin-overlap: 0.5;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: radial-gradient(ellipse at 50% 0%, #0f1a2e 0%, var(--bg) 55%);
  color: var(--text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 520px;
  margin: 0 auto;
  padding: 6px 8px env(safe-area-inset-bottom);
}
.hidden { display: none !important; }
.demo-banner {
  margin: 4px 0 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 107, 122, .18);
  border: 1px solid rgba(255, 107, 122, .45);
  color: #ffb4bc;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 600;
}
.badge.badge-demo {
  background: rgba(255, 107, 122, .35);
  color: #fff;
  font-weight: 800;
}
.match-end-modes { margin-top: 12px; }
.match-end-modes .lobby-mode-btn { flex: 1; }

/* ── HUD ── */
.hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 2px 2px 4px;
  flex-shrink: 0;
}
.brand { font-size: 20px; font-weight: 900; letter-spacing: .06em; flex: 0 1 auto; }
.brand span { color: var(--kazna); }
.header-more-btn {
  flex-shrink: 0;
  margin-left: auto;
  padding: 6px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  touch-action: manipulation;
}
.header-more-btn:active { background: rgba(74,140,255,.2); }
.hud-chrome { display: none !important; }
body.in-match .hud-status { display: none !important; }
.menu-match-id { margin: 0 0 8px; font-size: 12px; font-weight: 600; }
.layout-tag { font-size: 11px; color: var(--hint); font-weight: 600; margin-left: 4px; }
.hud-pills { display: flex; gap: 6px; flex-wrap: nowrap; }
.pill {
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  white-space: nowrap;
}
.pill b { font-weight: 800; }
.pill.coin b { color: var(--coin); }
.pill.kazna b { color: var(--kazna); }
.pill.crown b { color: var(--crown); }

.wallet-bar {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  padding: 0 6px 4px;
  flex-shrink: 0;
}
.wallet-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  white-space: nowrap;
  letter-spacing: .02em;
}
.wallet-chip b { font-weight: 800; margin-left: 2px; }
.wallet-chip.won b { color: #f5c842; }
.wallet-chip.mined b { color: #b8c4d8; }
.wallet-chip.gold b { color: #ffd76a; }

.layout-toggle {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.layout-toggle:active { background: rgba(74,140,255,.2); }
.badge {
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(74,140,255,.18);
  color: var(--accent);
  flex-shrink: 0;
}
.hud-status {
  font-size: 16px;
  font-weight: 600;
  color: var(--hint);
  padding: 0 4px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
.hud-status.turn-you { color: var(--kazna); }
.hud-status.reaction { color: var(--coin); }
.hud-status.roll-urgent { color: #ffb347; animation: roll-urgent-pulse 0.8s ease-in-out infinite; }
@keyframes roll-urgent-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}
.card-btn.playable.card-pulse {
  animation: card-pulse 1s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.45);
}
@keyframes card-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* ── Seats ── */
.seat-slot-center-x { transform: translateX(-50%); }
.seat-row-top { transform: translateY(-15px); }
.seat-row-top.seat-slot-center-x { transform: translate(-50%, -15px); }
.seat-row-bottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.seat-row-bottom .seat-cards { order: 1; }
.seat-row-bottom .seat-coins { order: 2; }
.seat-row-bottom .seat-identity { order: 3; }
.seat-row-bottom.seat-align-left { align-items: flex-start; }
.seat-row-bottom.seat-align-right { align-items: flex-end; }
.seat-identity { display: flex; flex-direction: column; align-items: center; }
.seat-avatar-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  margin: 0 auto 3px;
  border-radius: 50%;
  overflow: visible;
  border: 2px solid var(--ring, var(--accent));
  background: var(--card);
}
.seat-you .seat-avatar-wrap {
  width: 62px;
  height: 62px;
  border-width: 3px;
}
.seat-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.seat-avatar-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 20px;
  color: #fff;
  background: linear-gradient(135deg, var(--ring, var(--accent)), #1a2a4a);
  border-radius: 50%;
}
.seat-badge {
  position: absolute;
  z-index: 2;
  font-size: 10px;
  line-height: 1;
}
.seat-badge.crown { top: -8px; right: -8px; font-size: 18px; z-index: 4; }
.seat-crown .seat-avatar-wrap {
  border-color: var(--crown);
  box-shadow: 0 0 14px rgba(199, 125, 255, .5);
}
.seat-crown-won .seat-avatar-wrap {
  border-color: var(--crown);
  box-shadow: 0 0 18px rgba(255, 213, 79, .55), 0 0 10px rgba(199, 125, 255, .65);
}
.seat-crown-won .seat-badge.crown {
  font-size: 24px;
  top: -12px;
  right: -10px;
  filter: drop-shadow(0 0 8px rgba(255, 213, 79, .75));
  animation: crownPop .6s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes crownPop {
  0% { transform: scale(.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.cell.crown-cell.no-table-crown .cell-num,
.col-cell.crown-cell.no-table-crown .col-num {
  color: #fff;
}
.seat-badge.turn {
  top: -8px;
  left: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  display: grid;
  place-items: center;
  font-size: 9px;
  box-shadow: 0 0 10px rgba(74,140,255,.6);
  animation: turnPulse 1.4s ease infinite;
}
.seat-roll {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 36px;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 900;
  text-align: center;
  background: linear-gradient(135deg, #1a2238, #0d1220);
  border: 1.5px solid var(--coin);
  color: var(--coin);
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
  white-space: nowrap;
}
.seat-opponent .seat-roll {
  min-width: 25px;
  padding: 2px 6px;
  border-radius: 7px;
  font-size: 11px;
  border-width: 1px;
  bottom: -8px;
}
.seat-roll.fresh {
  animation: rollPop .45s cubic-bezier(.34,1.56,.64,1);
  border-color: var(--kazna);
  color: var(--kazna);
}
.seat-name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 92px;
  margin: 0 auto;
  color: var(--text);
  line-height: 1.2;
}
.seat-you .seat-name { font-size: 15px; color: var(--kazna); font-weight: 700; }
.seat-align-left { text-align: left; }
.seat-align-right { text-align: right; }
.seat-align-center { text-align: center; }
.seat-align-left .seat-avatar-wrap { margin: 0 0 3px; }
.seat-align-left .seat-name { margin: 0; max-width: 96px; }
.seat-align-left .seat-coins { justify-content: flex-start; }
.seat-align-left .seat-cards { text-align: left; }
.seat-align-right .seat-avatar-wrap { margin: 0 0 3px auto; }
.seat-align-right .seat-name { margin: 0 0 0 auto; max-width: 96px; }
.seat-align-right .seat-coins { justify-content: flex-start; flex-direction: row-reverse; }
.seat-align-right .seat-cards { text-align: right; }
.seat-align-center .seat-avatar-wrap { margin: 0 auto 3px; }
.seat-align-center .seat-name { margin: 0 auto; }
.seat-align-center .seat-coins { justify-content: center; }
/* Центральные места (верх и главный игрок): монеты горизонтально под игроком, карты ниже */
.seat.seat-align-center { width: 120px; }
.seat-align-center .seat-coin-stack {
  width: calc(var(--seat-coin-size, 14px) * (1 + (var(--coin-count, 1) - 1) * var(--seat-coin-overlap, 0.5)));
  height: var(--seat-coin-size, 14px);
}
.seat-align-center .seat-coin {
  top: auto;
  left: calc(var(--coin-i, 0) * var(--seat-coin-size, 14px) * var(--seat-coin-overlap, 0.5));
}
.seat-align-center .seat-cards { text-align: center; }
.seat-coins {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  min-height: 1em;
}
.seat-coins-empty .seat-coin-label { opacity: .55; }
.seat-coin-stack {
  position: relative;
  display: inline-block;
  width: var(--seat-coin-size, 14px);
  height: calc(var(--seat-coin-size, 14px) * (1 + (var(--coin-count, 1) - 1) * var(--seat-coin-overlap, 0.5)));
  flex-shrink: 0;
}
.seat-coin {
  position: absolute;
  left: 0;
  width: var(--seat-coin-size, 14px);
  height: var(--seat-coin-size, 14px);
  top: calc(var(--coin-i, 0) * var(--seat-coin-size, 14px) * var(--seat-coin-overlap, 0.5));
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.72), transparent 24%),
    radial-gradient(circle at 50% 50%, rgba(255,213,79,.66), rgba(201,162,39,.58) 66%, rgba(109,78,12,.62));
  border: 1px solid rgba(255,245,180,.54);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.45), 0 2px 5px rgba(0,0,0,.28);
  opacity: .82;
}
.seat-coin-label {
  font-size: var(--seat-coin-label-size, 12px);
  font-weight: 900;
  color: var(--coin);
  line-height: 1;
  align-self: flex-end;
}
.seat-opponent .seat-coin-stack { --seat-coin-size: var(--seat-coin-size-opponent); }
.seat-opponent .seat-coin-label { font-size: var(--seat-coin-label-size-opponent); }
.seat-opponent .seat-cards { font-size: var(--seat-cards-size-opponent); }
.seat-opponent .seat-coin-stack.seat-coins-many { --seat-coin-size: 16px; }
.seat-opponent .seat-coin-stack.seat-coins-huge { --seat-coin-size: 12px; }
.seat-you .seat-coin-stack { --seat-coin-size: var(--seat-coin-size-opponent); }
.seat-you .seat-coin-label { font-size: var(--seat-coin-label-size-opponent); }
.seat-you .seat-cards { font-size: var(--seat-cards-size-opponent); }
.seat-you .seat-coin-stack.seat-coins-many { --seat-coin-size: 16px; }
.seat-you .seat-coin-stack.seat-coins-huge { --seat-coin-size: 12px; }
.self-player-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom);
  max-width: 520px;
  margin: 0 auto;
  z-index: 14;
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 5px 10px;
  background: rgba(10, 16, 28, .47);
  border-top: 1px solid rgba(74, 140, 255, .2);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .18);
  backdrop-filter: blur(8px);
  --self-dock-tile-h: 63px;
  --self-dock-tile-w: calc(var(--self-dock-tile-h) * 0.8);
  --self-dock-card-radius: 8px;
}
.self-player-dock.hidden { display: none !important; }
.self-dock-identity {
  flex-shrink: 0;
  min-width: 0;
  align-self: center;
}
.self-dock-identity .seat-avatar-wrap {
  width: 36px;
  height: 36px;
  margin-bottom: 2px;
}
.self-dock-identity .seat-name {
  font-size: 10px;
  max-width: 68px;
  text-align: center;
}
.self-wallet-stack {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex: 1;
  min-width: 0;
  height: var(--self-dock-tile-h);
}
.self-wallet-coins {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: var(--self-dock-tile-w);
  height: var(--self-dock-tile-h);
  padding: 0 3px;
  box-sizing: border-box;
  border-radius: var(--self-dock-card-radius);
  background: rgba(74, 140, 255, .12);
  border: 1px solid rgba(74, 140, 255, .25);
  flex-shrink: 0;
  overflow: hidden;
}
.self-wallet-coins .seat-coin-stack {
  --seat-coin-size: 16px;
  flex-shrink: 0;
  transform: scale(0.92);
  transform-origin: center center;
}
.self-wallet-count {
  font-size: 15px;
  font-weight: 800;
  color: #ffd54f;
  line-height: 1;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.self-wallet-cards {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
  flex: 0 1 auto;
  width: auto;
  max-width: calc(100% - var(--self-dock-tile-w) - 4px);
  height: var(--self-dock-tile-h);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.self-wallet-cards::-webkit-scrollbar { display: none; }
.self-wallet-cards .wallet-card-tile {
  flex-shrink: 0;
  width: var(--self-dock-tile-w);
  height: var(--self-dock-tile-h);
  padding: 0 3px;
  font-size: 17px;
  font-weight: 900;
  border-radius: var(--self-dock-card-radius);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid rgba(74, 140, 255, .25);
  background: rgba(74, 140, 255, .12);
  color: var(--text);
}
.self-wallet-cards .wallet-card-tile.card-pulse {
  animation: dock-card-glow 1s ease-in-out infinite;
  transform: none;
}
@keyframes dock-card-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 215, 0, 0); }
  50% { box-shadow: 0 0 10px rgba(255, 215, 0, .45); }
}
.self-wallet-cards-note { font-size: 10px; white-space: nowrap; align-self: center; }
.self-wallet-reacting {
  border-top-color: rgba(76, 175, 80, .65);
  box-shadow: 0 -8px 28px rgba(76, 175, 80, .09);
}
.dock-reaction-timer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom) + 80px);
  max-width: 520px;
  margin: 0 auto;
  z-index: 20;
  padding: 0 14px;
  pointer-events: none;
}
.dock-reaction-timer.hidden { display: none !important; }
.dock-reaction-timer .reaction-timer { max-width: 100%; margin: 0; }
.dock-reaction-timer .progress {
  height: 5px;
  background: rgba(0, 0, 0, .45);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(76, 175, 80, .25);
}
.dock-reaction-timer .bar {
  height: 100%;
  background: linear-gradient(90deg, var(--kazna), #7dffb8);
  transition: none;
}
.reaction-seconds-label {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  color: var(--kazna);
  letter-spacing: 0.02em;
}
.seat-cards { font-size: 13px; color: var(--hint); }
.seat-dead { opacity: .35; filter: grayscale(.9); }
.seat-active .seat-avatar-wrap {
  box-shadow: 0 0 0 3px var(--accent), 0 0 18px rgba(74,140,255,.5);
  animation: turnPulse 1.4s ease-in-out infinite;
}
.rules-text {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  max-height: min(58vh, 420px);
  overflow-y: auto;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .18);
  border: 1px solid rgba(255, 255, 255, .08);
}
@keyframes turnPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
@keyframes rollPop {
  0% { transform: translateX(-50%) scale(.4); opacity: 0; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* ── Table stage ── */
#gameRoot {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.table-stage {
  position: relative;
  flex: 1;
  min-height: 0;
}
.table-rail {
  position: absolute;
  inset: 6% 2% 8% 2%;
  border-radius: 50% / 44%;
  background: linear-gradient(160deg, var(--rail-light), var(--rail));
  box-shadow: 0 8px 32px rgba(0,0,0,.55), inset 0 2px 4px rgba(255,255,255,.08);
  pointer-events: none;
}
.table-felt {
  position: absolute;
  inset: 9% 4% 10% 4%;
  border-radius: 50% / 42%;
  background:
    radial-gradient(ellipse at 50% 28%, rgba(62,224,143,.12), transparent 50%),
    radial-gradient(ellipse at 30% 70%, rgba(0,0,0,.15), transparent 40%),
    linear-gradient(165deg, var(--felt-light) 0%, var(--felt) 40%, var(--felt-deep) 100%);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 0 80px rgba(0,0,0,.4), inset 0 4px 20px rgba(62,224,143,.06);
  pointer-events: none;
}
.table-felt::after {
  content: '';
  position: absolute;
  inset: 10%;
  border-radius: 50% / 42%;
  border: 1px dashed rgba(255,213,79,.1);
  pointer-events: none;
}
.ring-axis {
  position: absolute;
  left: 50%;
  top: 14%;
  bottom: 22%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(62,224,143,.18), rgba(62,224,143,.04) 55%, transparent);
  pointer-events: none;
  z-index: 1;
}
#seats { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.seat { position: absolute; width: 88px; pointer-events: auto; }
.seat-you { z-index: 4; }

.board-ring {
  position: absolute;
  inset: 9% 2% 10% 2%;
  z-index: 4;
  pointer-events: none;
}
.table-stage.layout-ring .board-ring {
  inset: 22% 14% 26% 14%;
}
.board-ring .cell {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.board-columns {
  position: absolute;
  left: 0;
  right: 0;
  top: 14%;
  bottom: 22%;
  z-index: 2;
  display: none;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 4px;
  padding: 0 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.board-columns::-webkit-scrollbar { display: none; }

.table-stage.layout-columns {
  --col-lift: 12.5dvh;
}
.table-stage.layout-columns .ring-only { display: none !important; }
.table-stage.layout-columns .board-columns {
  display: flex;
  top: max(2%, calc(14% - var(--col-lift)));
  bottom: calc(24% + var(--col-lift) * 0.45);
  padding: 0 4px;
  gap: 2px;
  justify-content: stretch;
  overflow-x: hidden;
}
.table-stage.layout-columns .col-cell {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  padding: 3px 1px 4px;
}
.table-stage.layout-columns .col-num {
  font-size: clamp(11px, 2.8vw, 15px);
}
.table-stage.layout-columns .col-coins {
  font-size: clamp(10px, 2.6vw, 14px);
}
.table-stage.layout-columns .col-bar {
  max-width: 100%;
  min-height: 16px;
}
.table-stage.layout-columns .col-crown {
  font-size: 10px;
}
.table-stage.layout-columns .col-action-badge {
  font-size: 7px;
}
@media (max-width: 360px) {
  .table-stage.layout-columns .board-columns {
    gap: 1px;
    padding: 0 2px;
  }
  .table-stage.layout-columns .col-cell {
    padding: 2px 0 3px;
  }
  .table-stage.layout-columns .col-num {
    font-size: clamp(10px, 2.6vw, 14px);
  }
  .table-stage.layout-columns .col-coins {
    font-size: clamp(9px, 2.4vw, 13px);
  }
}
.table-stage.layout-columns #seats {
  opacity: .92;
  z-index: 4;
}
.table-stage.layout-columns .seat {
  width: 72px;
}

.dice-hub {
  position: absolute;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 5px 6px;
  border-radius: 10px;
  background: rgba(6,10,18,.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.08);
  transition: top .2s ease, left .2s ease;
  width: max-content;
  max-width: 52%;
}
.dice-hub .dice-row {
  gap: 5px;
}
/* Середина оси ячейки 12 (50%, 14%) ↔ 7 (50%, 50%) — по центру экрана */
.table-stage.layout-ring .dice-hub {
  left: 50%;
  top: 36%;
  transform: translate(-50%, -50%);
}
.table-stage.layout-columns .dice-hub {
  left: 50%;
  top: 32%;
  bottom: auto;
  transform: translate(-50%, -50%);
}
.dice-hub .dice-sum {
  display: none !important;
}

.dice-hub .die3d { width: 36px; height: 36px; }
.dice-hub .die-face { border-radius: 7px; }
.dice-hub .die-face-1 { transform: rotateY(0deg) translateZ(18px); }
.dice-hub .die-face-6 { transform: rotateY(180deg) translateZ(18px); }
.dice-hub .die-face-2 { transform: rotateY(90deg) translateZ(18px); }
.dice-hub .die-face-5 { transform: rotateY(-90deg) translateZ(18px); }
.dice-hub .die-face-3 { transform: rotateX(90deg) translateZ(18px); }
.dice-hub .die-face-4 { transform: rotateX(-90deg) translateZ(18px); }
.dice-hub .die-pip { width: 8px; height: 8px; }

@media (max-height: 680px) {
  .seat { width: 76px; }
  .seat-align-left .seat-name,
  .seat-align-right .seat-name { max-width: 84px; }
  .dice-hub .die3d { width: 32px; height: 32px; }
}

/* ── Board cells (ring) ── */
.cell {
  width: clamp(52px, 14vw, 68px);
  height: clamp(52px, 14vw, 68px);
  border-radius: 50%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  position: relative;
}
.cell-num {
  font-size: clamp(26px, 7vw, 32px);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.65);
  line-height: 1;
  z-index: 1;
}
.cell-crown-mark {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  line-height: 1;
  z-index: 3;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
.crown-top .cell-crown-mark {
  top: -18px;
  font-size: 20px;
}
.cell-crown-four-stack,
.col-crown-four-stack {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.cell-crown-four-stack {
  left: calc(50% + var(--crown-four-offset, 14px));
  top: 50%;
  transform: translateY(-50%);
}
.col-crown-four-stack {
  right: -10px;
  top: 18px;
}
.cell-crown-four-stack .seat-coin-stack,
.col-crown-four-stack .seat-coin-stack {
  --seat-coin-size: var(--seat-coin-size-opponent, 21px);
  --seat-coin-overlap: 0.42;
  position: relative;
  display: inline-block;
  width: calc(var(--seat-coin-size) * (1 + (var(--coin-count, 1) - 1) * var(--seat-coin-overlap)));
  height: calc(var(--seat-coin-size) * (1 + (var(--coin-count, 1) - 1) * var(--seat-coin-overlap)));
  flex-shrink: 0;
}
.cell-crown-four-stack .seat-coin-label,
.col-crown-four-stack .seat-coin-label {
  font-size: var(--seat-coin-label-size-opponent, 18px);
  font-weight: 900;
  color: var(--coin);
  line-height: 1;
  position: static;
  transform: none;
}
.match-feedback-prompt.hidden,
.match-feedback-stars.hidden,
.match-feedback-actions.hidden {
  display: none !important;
}
.cell-coin-stack {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  border-radius: inherit;
  background: transparent;
  pointer-events: none;
}
.cell-coin {
  position: absolute;
  width: 13mm;
  height: 13mm;
  border-radius: 50%;
  transform: translateY(calc(var(--coin-i, 0) * 25%));
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.72), transparent 24%),
    radial-gradient(circle at 50% 50%, rgba(255,213,79,.66), rgba(201,162,39,.58) 66%, rgba(109,78,12,.62));
  border: 1px solid rgba(255,245,180,.54);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.45), 0 2px 5px rgba(0,0,0,.28);
  opacity: .68;
}
.cell-coin-count {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 115%);
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
}
.cell.has-coins {
  box-shadow: 0 0 12px rgba(255,213,79,.16);
}
.cell.has-coins .cell-num {
  opacity: .86;
  transform: none;
}
.cell.kazna {
  background: transparent;
}
.cell.kazna .cell-num {
  color: var(--kazna);
  font-size: 28px;
}
.cell.cell-center {
  width: clamp(62px, 17vw, 80px);
  height: clamp(62px, 17vw, 80px);
  border: none;
  background: transparent;
  box-shadow:
    0 0 0 2px rgba(62,224,143,.28),
    0 0 22px rgba(62,224,143,.2);
  border-radius: 50%;
}
.cell.cell-center.has-coins {
  box-shadow:
    0 0 0 2px rgba(62,224,143,.35),
    0 0 24px rgba(62,224,143,.28);
}
.cell-coin-label {
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translate(-50%, 100%);
  font-size: 12px;
  font-weight: 900;
  color: var(--coin);
  text-shadow: 0 1px 4px rgba(0,0,0,.85);
  z-index: 4;
  line-height: 1;
}
.cell.cell-center .cell-coin-label { color: var(--kazna); }
.cell.cell-center .cell-coin {
  width: 10mm;
  height: 10mm;
  opacity: .58;
}
.cell.crown-cell {
  background: transparent;
  border: none;
}
.cell.crown-cell .cell-num { color: var(--crown); }
.cell.hot {
  animation: cellHot 1s ease infinite;
}
.cell.hot-pay {
  border-color: rgba(255, 99, 99, .75);
  box-shadow: 0 0 14px rgba(255, 99, 99, .35);
}
.cell.hot-take {
  border-color: rgba(62, 224, 143, .75);
  box-shadow: 0 0 14px rgba(62, 224, 143, .35);
}
.cell-empty-mark {
  font-size: 9px;
  letter-spacing: .02em;
  text-transform: lowercase;
  color: var(--hint);
  opacity: .85;
  margin-top: 1px;
}
.cell-action-badge {
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%) translateY(100%);
  font-size: 9px;
  line-height: 1.1;
  padding: 2px 5px;
  border-radius: 6px;
  white-space: nowrap;
  background: rgba(8, 12, 22, .92);
  border: 1px solid rgba(255, 213, 79, .35);
  color: #ffe082;
  z-index: 4;
  pointer-events: none;
}
.cell.cell-empty.hot-pay .cell-action-badge { border-color: rgba(255, 99, 99, .45); color: #ffabab; }
.cell.cell-occupied.hot-take .cell-action-badge { border-color: rgba(62, 224, 143, .45); color: #9cf0c8; }
/* legacy grid helper removed */
.cell-coins { display: none; }
@keyframes cellHot {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255,213,79,.5)); }
  50% { filter: drop-shadow(0 0 10px rgba(255,213,79,.55)); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ── Columns layout ── */
.col-cell {
  position: relative;
  flex: 1 0 42px;
  min-width: 42px;
  max-width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 2px 6px;
  border-radius: 12px;
  background: rgba(16,24,42,.75);
  border: 1px solid rgba(255,255,255,.08);
  transition: border-color .2s, box-shadow .2s;
}
.col-cell.has-coins { border-color: rgba(255,213,79,.35); }
.col-cell.kazna {
  border-color: rgba(62,224,143,.45);
  background: rgba(11,77,58,.35);
  box-shadow: 0 0 16px rgba(62,224,143,.12);
}
.col-cell.crown-cell .col-num { color: var(--crown); }
.col-cell.hot {
  border-color: rgba(255,213,79,.65);
  box-shadow: 0 0 14px rgba(255,213,79,.25);
  animation: pulse 1s ease infinite;
}
.col-cell.hot-pay {
  border-color: rgba(255, 99, 99, .7);
  box-shadow: 0 0 14px rgba(255, 99, 99, .25);
}
.col-cell.hot-take {
  border-color: rgba(62, 224, 143, .7);
  box-shadow: 0 0 14px rgba(62, 224, 143, .25);
}
.col-empty-mark { color: #ffabab; opacity: .9; font-size: 10px; }
.col-action-badge {
  font-size: 8px;
  line-height: 1.1;
  padding: 1px 4px;
  border-radius: 5px;
  background: rgba(8, 12, 22, .9);
  border: 1px solid rgba(255, 213, 79, .3);
  color: #ffe082;
  white-space: nowrap;
}
.card-btn .card-preview {
  display: block;
  font-size: 10px;
  opacity: .85;
  margin-top: 2px;
  font-weight: 500;
}
.col-crown { font-size: 12px; line-height: 1; }
.col-num {
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.col-bar {
  width: 100%;
  max-width: 28px;
  border-radius: 6px 6px 4px 4px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(74,140,255,.18));
  min-height: 20px;
}
.col-cell.kazna .col-bar {
  background: linear-gradient(180deg, rgba(62,224,143,.25), rgba(62,224,143,.08));
}
.col-cell.has-coins .col-bar {
  background: linear-gradient(180deg, rgba(255,213,79,.35), rgba(201,162,39,.15));
}
.col-coins {
  font-size: 15px;
  font-weight: 900;
  color: var(--coin);
  line-height: 1;
  min-height: 16px;
}
.col-cell.kazna .col-coins { color: var(--kazna); }
.col-coins:empty, .col-cell:not(.has-coins) .col-coins { color: var(--hint); opacity: .5; }

/* ── Lobby layout picker ── */
.panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 4px 12px;
}
.panel h3 { margin: 0 0 8px; font-size: 18px; }
.lobby-start-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 12px 8px 18px;
  margin-bottom: 8px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.12), rgba(0, 0, 0, 0.15));
  border: 1px solid rgba(212, 175, 55, 0.25);
}
.lobby-countdown-ring {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 8px;
}
.lobby-countdown-svg {
  width: 120px;
  height: 120px;
  transform: rotate(-90deg);
}
.lobby-countdown-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 8;
}
.lobby-countdown-progress {
  fill: none;
  stroke: var(--kazna);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 326.73;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.35s linear;
}
.lobby-countdown-ring.urgent .lobby-countdown-progress {
  stroke: #ffb347;
}
.lobby-countdown-ring.go .lobby-countdown-progress {
  stroke: #6ee7a0;
}
.lobby-countdown-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}
.lobby-countdown-label {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.lobby-players {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--hint);
  line-height: 1.35;
}
.lobby-count { font-size: 14px; color: var(--hint); font-weight: 600; }
.lobby-mode-picker { margin-top: 14px; }
.lobby-mode-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.lobby-mode-btn {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 12px;
  padding: 12px 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.lobby-mode-btn.active {
  border-color: var(--accent);
  background: rgba(90, 200, 250, 0.12);
  box-shadow: 0 0 12px rgba(90, 200, 250, 0.15);
}
.lobby-online {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.35;
}
.lobby-layout-picker { margin-top: 16px; }
.lobby-layout-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--text);
}
.layout-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.layout-card-imperial.active {
  border-color: #e8c547;
  background: rgba(232, 197, 71, 0.1);
  box-shadow: 0 0 16px rgba(232, 197, 71, 0.14);
}
.layout-card-neon.active {
  border-color: #00d4ff;
  background: rgba(0, 212, 255, 0.08);
  box-shadow: 0 0 16px rgba(0, 212, 255, 0.14);
}
.layout-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: var(--text);
  cursor: pointer;
  text-align: center;
}
.layout-card.active {
  border-color: var(--kazna);
  background: rgba(62,224,143,.1);
  box-shadow: 0 0 16px rgba(62,224,143,.12);
}
.layout-card-icon { font-size: 22px; line-height: 1; }
.layout-card-name { font-size: 14px; font-weight: 800; }
.layout-card-desc { font-size: 11px; color: var(--hint); }
.lobby-layout-hint { margin-top: 10px; }

.menu-layout { margin-bottom: 8px; }
.menu-layout-btn {
  display: block;
  width: 100%;
  padding: 12px 0;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: transparent;
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.menu-layout-btn.active { color: var(--kazna); }

/* ── 3D Dice ── */
.dice-row {
  display: flex;
  gap: 10px;
  align-items: center;
  perspective: 320px;
}
.die3d {
  width: 40px;
  height: 40px;
  position: relative;
  transform-style: preserve-3d;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.55));
  transition: opacity .25s, transform .25s;
}
.die3d.hidden { opacity: 0; transform: scale(.4); pointer-events: none; }
.die3d.is-rolling { filter: drop-shadow(0 10px 18px rgba(0,0,0,.65)); }
.die3d.is-shaking .die-cube {
  animation: diceShake 0.12s infinite alternate;
}
@keyframes diceShake {
  0% { transform: rotateX(-8deg) rotateY(6deg) translateY(0); }
  100% { transform: rotateX(8deg) rotateY(-6deg) translateY(-2px); }
}
.die-cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}
.die-face {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(145deg, #fffef8 0%, #e8e4d8 45%, #d4cfc0 100%);
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 4px rgba(0,0,0,.08);
  backface-visibility: hidden;
}
.die-face-1 { transform: rotateY(0deg) translateZ(20px); }
.die-face-6 { transform: rotateY(180deg) translateZ(20px); }
.die-face-2 { transform: rotateY(90deg) translateZ(20px); }
.die-face-5 { transform: rotateY(-90deg) translateZ(20px); }
.die-face-3 { transform: rotateX(90deg) translateZ(20px); }
.die-face-4 { transform: rotateX(-90deg) translateZ(20px); }
.die-pip {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3a3a4a, #0a0a14);
  box-shadow: inset 0 -1px 2px rgba(0,0,0,.4);
}
.die-pip-tl { top: 18%; left: 18%; }
.die-pip-tr { top: 18%; right: 18%; }
.die-pip-ml { top: 50%; left: 18%; transform: translateY(-50%); }
.die-pip-mr { top: 50%; right: 18%; transform: translateY(-50%); }
.die-pip-c { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.die-pip-bl { bottom: 18%; left: 18%; }
.die-pip-br { bottom: 18%; right: 18%; }

.dice-sum {
  font-size: 18px;
  font-weight: 800;
  color: var(--coin);
  min-height: 18px;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
  letter-spacing: .02em;
}
.dice-sum .dice-parts { color: var(--hint); font-weight: 600; font-size: 11px; }

/* ── Roll ticker ── */
.roll-ticker {
  display: none;
}

/* ── FAB & nav ── */
.roll-fab {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 90;
  border: none;
  border-radius: 999px;
  padding: 14px 30px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .02em;
  background: linear-gradient(135deg, var(--kazna), #2a9d5c);
  color: #06210f;
  box-shadow: 0 6px 24px rgba(62, 224, 143, 0.38), 0 0 0 2px rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: opacity .2s ease, transform .15s ease;
}
.roll-fab.hidden { display: none !important; }
.roll-fab:disabled {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(0.94);
}
.roll-fab:not(:disabled):active {
  transform: translateX(-50%) scale(0.96);
}

.roll-swipe-zone {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  background: transparent;
  transition: opacity .25s ease;
}
.roll-swipe-zone.hidden { display: none !important; }
.roll-swipe-hint {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, .68);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.roll-swipe-arrow-shell {
  position: relative;
  height: 60mm;
  width: auto;
  background: transparent;
  transform-origin: center bottom;
  will-change: transform;
  transition: transform .22s cubic-bezier(.22, 1, .36, 1);
}
.roll-swipe-zone.is-tracking .roll-swipe-arrow-shell {
  transition: transform .08s linear;
}
.roll-swipe-zone.is-spring .roll-swipe-arrow-shell {
  transition: transform .38s cubic-bezier(.34, 1.45, .64, 1);
}
.roll-swipe-arrow {
  display: block;
  height: 60mm;
  width: auto;
  margin: 0;
  background: transparent;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  filter: none;
  transform-origin: center bottom;
  animation: rollSwipeBob 1.35s ease-in-out infinite;
}
.roll-swipe-shimmer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: url('/static/roll-swipe-arrow.png');
  mask-image: url('/static/roll-swipe-arrow.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 244, 120, 0) 28%,
    rgba(255, 250, 170, .72) 46%,
    rgba(190, 255, 120, .82) 54%,
    rgba(120, 255, 170, .55) 62%,
    rgba(255, 255, 255, 0) 82%
  );
  background-size: 100% 240%;
  background-position: 50% 130%;
  animation: rollArrowShimmer 1.65s ease-in-out infinite;
  mix-blend-mode: screen;
}
.roll-swipe-glow {
  display: none;
}
.roll-swipe-zone.is-tracking .roll-swipe-arrow {
  animation: none;
}
.roll-swipe-zone.is-tracking .roll-swipe-shimmer {
  animation: none;
  opacity: .55;
}
.roll-swipe-zone.is-launch .roll-swipe-arrow-shell {
  transform: translateY(-60mm) scale(1.05);
  opacity: .15;
  transition: transform .28s cubic-bezier(.2, .9, .2, 1), opacity .28s ease;
}
@keyframes rollSwipeBob {
  0%, 100% { transform: translateY(2mm) scale(.97); }
  50% { transform: translateY(-3mm) scale(1.02); }
}
@keyframes rollArrowShimmer {
  0%, 100% { background-position: 50% 132%; opacity: .75; }
  50% { background-position: 50% -28%; opacity: 1; }
}
@keyframes rollArrowGlow {
  0%, 100% { opacity: .55; transform: translateX(-50%) scale(.92); }
  50% { opacity: .95; transform: translateX(-50%) scale(1.08); }
}
#tableStage[data-theme="neon"] .roll-swipe-arrow {
  filter: drop-shadow(0 0 14px rgba(0, 255, 200, .35));
}
#tableStage[data-theme="neon"] .roll-swipe-shimmer {
  mix-blend-mode: color-dodge;
}
.table-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(6, 10, 18, .72);
  backdrop-filter: blur(4px);
  border-radius: 16px;
  pointer-events: none;
}
.table-loading-overlay p {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.table-loading-ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid rgba(74, 140, 255, .25);
  border-top-color: var(--accent);
  animation: tableLoadSpin .9s linear infinite;
}
@keyframes tableLoadSpin {
  to { transform: rotate(360deg); }
}
#gameRoot { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
body.in-match .roll-fab,
body.in-match .roll-swipe-zone {
  bottom: calc(57px + env(safe-area-inset-bottom));
}
.bottom-nav { display: none !important; }

/* ── Sheets ── */
.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
  z-index: 40;
}
.sheet-overlay.open { opacity: 1; pointer-events: auto; }
.sheet-overlay:not(.open) { opacity: 0; pointer-events: none; }

.card-intervention-banner {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 12;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(12, 18, 32, .92);
  border: 1px solid rgba(255, 196, 86, .45);
  color: #ffe9b8;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  max-width: min(92vw, 360px);
}
.card-intervention-banner.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.card-intervention-banner .card-intervention-hint {
  display: block;
  margin-top: 2px;
  color: #9cf0c8;
  font-size: 12px;
}

.coin-fly-token {
  position: fixed;
  z-index: 80;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  margin-top: -11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c8, #d4a017 55%, #8a5a00);
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
  transition: left .65s cubic-bezier(.22,.85,.28,1), top .65s cubic-bezier(.22,.85,.28,1), transform .65s ease, opacity .2s ease;
  pointer-events: none;
  opacity: 0;
}
.coin-fly-token.coin-fly-active {
  opacity: 1;
  transform: scale(1.05);
}
.coin-fly-token.coin-fly-take.coin-fly-active {
  transform: scale(1.15);
}

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 520px;
  margin: 0 auto;
  background: var(--card);
  border-radius: 20px 20px 0 0;
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(105%);
  transition: transform .3s cubic-bezier(.32,.72,0,1);
  z-index: 50;
  max-height: 70dvh;
  overflow-y: auto;
}
.sheet.open { transform: translateY(0); }
#sheet-cards {
  display: none !important;
}
.menu-leave-btn {
  width: 100%;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid rgba(255, 107, 122, .35);
  border-radius: 12px;
  background: rgba(255, 107, 122, .1);
  color: var(--danger);
  font-weight: 700;
  font-size: 14px;
}
.menu-leave-btn:disabled {
  opacity: .4;
}
.sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  margin: 0 auto 12px;
}
.sheet h3 { margin: 0 0 12px; font-size: 16px; }
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.card-btn {
  border-radius: 14px;
  padding: 20px 10px;
  font-size: 24px;
  font-weight: 800;
  border: 2px solid transparent;
  background: #1a2132;
  color: var(--text);
}
.card-btn.playable { border-color: var(--kazna); }
.card-btn.playable.plus { background: rgba(62,224,143,.12); color: var(--kazna); }
.card-btn.playable.minus { background: rgba(255,107,122,.12); color: var(--danger); }
.card-btn.playable.mul { background: rgba(199,125,255,.12); color: var(--crown); }
.card-btn.playable.frac { background: rgba(255,213,79,.12); color: var(--coin); }
.card-btn:disabled { opacity: .35; }
.reaction-timer { max-width: 50%; margin: 0 auto 8px; }
.progress { height: 3px; background: rgba(0,0,0,.3); border-radius: 999px; overflow: hidden; margin-bottom: 6px; }
.bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--kazna)); }
.muted { color: var(--hint); font-size: 13px; line-height: 1.4; }
.sheet-close {
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font-weight: 600;
}
.menu-list { list-style: none; padding: 0; margin: 0 0 12px; }
.menu-list a {
  display: block;
  padding: 12px 0;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.history-list { list-style: none; padding: 0; margin: 0; }
.history-list li {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 13px;
}
.history-list .hist-sum { font-weight: 900; color: var(--coin); }
.empty { text-align: center; padding: 40px 20px; color: var(--hint); }
.empty-icon { font-size: 48px; margin-bottom: 12px; }
.toast {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  background: var(--card);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
  z-index: 60;
}
body.in-match .toast {
  bottom: calc(73px + env(safe-area-inset-bottom));
}
.toast.show { opacity: 1; }
.roll-result-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(0,0,0,.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.roll-result-overlay.show { opacity: 1; pointer-events: auto; }
.roll-result-num {
  font-size: clamp(72px, 24vw, 108px);
  font-weight: 900;
  line-height: 1;
  color: var(--coin);
  text-shadow: 0 4px 32px rgba(255,213,79,.4), 0 2px 8px rgba(0,0,0,.6);
}
.roll-result-detail {
  font-size: 16px;
  font-weight: 700;
  color: var(--hint);
}

/* ── Probability rhythm (2d6 bell curve) ── */
.cell-w-1 .cell-num { opacity: 0.72; font-size: 0.88em; }
.cell-w-2 .cell-num { opacity: 0.8; font-size: 0.92em; }
.cell-w-3 .cell-num { opacity: 0.88; font-size: 0.96em; }
.cell-w-4 .cell-num { opacity: 0.94; }
.cell-w-5.cell-center .cell-num { font-size: 1.08em; }
.col-w-1 .col-num { opacity: 0.72; }
.col-w-2 .col-num { opacity: 0.8; }

/* ── Theme: Imperial (VIP, long sessions) ── */
#tableStage[data-theme="imperial"] {
  --felt: #4a1020;
  --felt-deep: #2a0812;
  --felt-light: #6b1830;
  --rail: #1a1208;
  --rail-light: #3d2e14;
  --crown: #e8c547;
  --accent: #c9a227;
}
#tableStage[data-theme="imperial"] .table-felt {
  background:
    radial-gradient(ellipse at 50% 22%, rgba(232, 197, 71, 0.14), transparent 48%),
    radial-gradient(ellipse at 30% 72%, rgba(0, 0, 0, 0.22), transparent 42%),
    linear-gradient(165deg, var(--felt-light) 0%, var(--felt) 42%, var(--felt-deep) 100%);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.45), inset 0 4px 24px rgba(232, 197, 71, 0.08);
}
#tableStage[data-theme="imperial"] .table-felt::after {
  border-color: rgba(232, 197, 71, 0.16);
}
#tableStage[data-theme="imperial"] .ring-axis {
  background: linear-gradient(180deg, rgba(232, 197, 71, 0.28), rgba(232, 197, 71, 0.06) 55%, transparent);
}
#tableStage[data-theme="imperial"] .table-rail {
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(232, 197, 71, 0.22),
    inset 0 2px 4px rgba(255, 255, 255, 0.08);
}
#tableStage[data-theme="imperial"] .cell.cell-center {
  box-shadow:
    0 0 0 2px rgba(62, 224, 143, 0.35),
    0 0 0 4px rgba(232, 197, 71, 0.22),
    0 0 26px rgba(232, 197, 71, 0.18);
}
#tableStage[data-theme="imperial"] .cell.crown-cell .cell-num { color: var(--crown); }
#tableStage[data-theme="imperial"] .roll-fab {
  background: linear-gradient(135deg, #c9a227, #8a6b12);
  box-shadow: 0 6px 24px rgba(201, 162, 39, 0.38), 0 0 0 2px rgba(255, 255, 255, 0.08);
}
#tableStage[data-theme="imperial"] .layout-card.active { border-color: #e8c547; }

/* ── Theme: Neon (speed, D1 excitement) ── */
#tableStage[data-theme="neon"] {
  --felt: #0a1628;
  --felt-deep: #050a14;
  --felt-light: #122040;
  --rail: #0f0f18;
  --rail-light: #1a1a28;
  --kazna: #00e5a0;
  --crown: #b388ff;
  --coin: #ffe066;
  --accent: #00d4ff;
}
#tableStage[data-theme="neon"] .table-felt {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(0, 212, 255, 0.1), transparent 52%),
    linear-gradient(165deg, var(--felt-light) 0%, var(--felt) 45%, var(--felt-deep) 100%);
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.5), inset 0 0 40px rgba(0, 212, 255, 0.04);
}
#tableStage[data-theme="neon"] .table-rail {
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.65),
    inset 0 0 0 1px rgba(0, 212, 255, 0.18),
    inset 0 2px 4px rgba(255, 255, 255, 0.05);
}
#tableStage[data-theme="neon"] .ring-axis {
  background: linear-gradient(180deg, rgba(0, 212, 255, 0.22), rgba(0, 212, 255, 0.04) 55%, transparent);
}
.neon-grid {
  position: absolute;
  inset: 9% 4% 10% 4%;
  border-radius: 50% / 42%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.06) 1px, transparent 1px);
  background-size: 14px 14px;
  mask-image: radial-gradient(ellipse at 50% 48%, #000 35%, transparent 72%);
}
#tableStage[data-theme="neon"] .neon-grid { opacity: 1; }
#tableStage[data-theme="neon"] .cell {
  filter: drop-shadow(0 0 0 transparent);
}
#tableStage[data-theme="neon"] .cell.hot {
  animation: neonHotPulse 0.85s ease infinite;
}
#tableStage[data-theme="neon"].neon-sweep-once .board-ring .cell[data-sweep] {
  animation: neonSweep 0.45s ease-out 1;
  animation-delay: calc(var(--sweep, 0) * 35ms);
}
#tableStage[data-theme="neon"].reaction-active .board-ring .cell[data-sweep] {
  animation: none;
}
#tableStage[data-theme="neon"] .board-ring .cell[data-sweep="0"] { --sweep: 0; }
#tableStage[data-theme="neon"] .board-ring .cell[data-sweep="1"] { --sweep: 1; }
#tableStage[data-theme="neon"] .board-ring .cell[data-sweep="2"] { --sweep: 2; }
#tableStage[data-theme="neon"] .board-ring .cell[data-sweep="3"] { --sweep: 3; }
#tableStage[data-theme="neon"] .board-ring .cell[data-sweep="4"] { --sweep: 4; }
#tableStage[data-theme="neon"] .board-ring .cell[data-sweep="5"] { --sweep: 5; }
#tableStage[data-theme="neon"] .board-ring .cell[data-sweep="6"] { --sweep: 6; }
#tableStage[data-theme="neon"] .board-ring .cell[data-sweep="7"] { --sweep: 7; }
#tableStage[data-theme="neon"] .board-ring .cell[data-sweep="8"] { --sweep: 8; }
#tableStage[data-theme="neon"] .board-ring .cell[data-sweep="9"] { --sweep: 9; }
@keyframes neonHotPulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(0, 212, 255, 0)); }
  50% { filter: drop-shadow(0 0 12px rgba(0, 212, 255, 0.65)); }
}
@keyframes neonSweep {
  0% { filter: drop-shadow(0 0 0 rgba(0, 212, 255, 0)); }
  40% { filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.55)); }
  100% { filter: drop-shadow(0 0 0 rgba(0, 212, 255, 0)); }
}
#tableStage[data-theme="neon"] .dice-hub {
  border-color: rgba(0, 212, 255, 0.22);
  box-shadow: 0 0 24px rgba(0, 212, 255, 0.12);
}
#tableStage[data-theme="neon"] .roll-fab {
  background: linear-gradient(135deg, #00d4ff, #0077aa);
  box-shadow: 0 6px 24px rgba(0, 212, 255, 0.35), 0 0 0 2px rgba(255, 255, 255, 0.08);
}
#tableStage[data-theme="neon"] .col-cell {
  background: rgba(10, 22, 40, 0.82);
  border-color: rgba(0, 212, 255, 0.12);
}
#tableStage[data-theme="neon"] .col-cell.kazna {
  border-color: rgba(0, 229, 160, 0.45);
  background: rgba(0, 229, 160, 0.08);
}
#tableStage[data-theme="imperial"] .col-cell.kazna {
  background: rgba(74, 16, 32, 0.55);
  border-color: rgba(62, 224, 143, 0.4);
}

/* ── Turn-order draw overlay ── */
.draw-overlay {
  position: fixed;
  inset: 0;
  z-index: 88;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px calc(96px + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.draw-overlay .draw-card { pointer-events: auto; }
.draw-overlay.hidden { display: none !important; }
.draw-card {
  width: 100%;
  max-width: 340px;
  padding: 22px 18px 18px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  text-align: center;
}
.draw-card h2 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 900;
  color: var(--coin);
}
.draw-note {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}
.draw-gather-status {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
  color: var(--kazna);
}
.draw-gather-status.hidden { display: none !important; }
.draw-dice {
  margin: 0 0 10px;
  min-height: 52px;
}
.draw-dice-hub {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 320px;
}
.draw-dice-hub .die3d {
  width: 40px;
  height: 40px;
}
.draw-dice.rolling .die3d.is-rolling {
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .65));
}
.draw-your-roll {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
  color: var(--kazna);
}
.draw-roll-btn.hidden { display: none !important; }
.draw-roll-btn, .draw-close-btn {
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 800;
  background: var(--kazna);
  color: #06210f;
  margin-top: 6px;
}
.draw-close-btn { background: var(--accent); color: #fff; }
.draw-results {
  list-style: none;
  margin: 12px 0 4px;
  padding: 0;
  text-align: left;
}
.draw-results li {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 3px;
  background: rgba(255,255,255,.04);
}
.draw-results li.first {
  background: rgba(62,224,143,.14);
  color: var(--kazna);
  font-weight: 800;
}
.draw-results li.you { border: 1px solid rgba(90,139,255,.5); }

/* ── Match end / new game overlay ── */
.match-end-overlay {
  position: fixed;
  inset: 0;
  z-index: 85;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px calc(72px + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
}
.match-end-overlay.hidden {
  display: none !important;
}
.match-end-card {
  width: 100%;
  max-width: 360px;
  padding: 22px 18px 18px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  text-align: center;
}
.match-end-card h2 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 900;
  color: var(--kazna);
}
.match-end-summary {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  white-space: pre-line;
}
.match-end-primary,
.match-end-secondary {
  display: block;
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
}
.match-end-primary {
  background: linear-gradient(135deg, var(--kazna), #2a9d6a);
  color: #04140e;
  box-shadow: 0 8px 24px rgba(62, 224, 143, 0.28);
}
.match-end-primary:disabled {
  opacity: 0.45;
  box-shadow: none;
}
.match-end-secondary {
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.match-end-secondary.hidden {
  display: none;
}
.match-end-exit {
  display: block;
  width: 100%;
  margin: 10px 0 14px;
  border: none;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.03em;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.match-end-exit.hidden {
  display: none;
}

.match-feedback {
  margin: 0 0 14px;
  padding-top: 4px;
}
.match-feedback.hidden {
  display: none !important;
}
.match-feedback-prompt {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.match-feedback-stars {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
}
.match-feedback-star {
  min-width: 44px;
  min-height: 44px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.35);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.match-feedback-star:hover,
.match-feedback-star:focus-visible {
  transform: scale(1.08);
  outline: none;
  background: rgba(255, 214, 102, 0.12);
}
.match-feedback-star.is-filled {
  color: #ffd666;
  background: rgba(255, 214, 102, 0.14);
}
.match-feedback-comment {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
  resize: vertical;
  min-height: 72px;
}
.match-feedback-comment.hidden {
  display: none !important;
}
.match-feedback-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.match-feedback-submit {
  border: none;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 800;
  background: linear-gradient(135deg, #ffd666, #f0b429);
  color: #1a1200;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.match-feedback-submit.hidden {
  display: none !important;
}
.match-feedback-submit:disabled {
  opacity: 0.5;
}
.match-feedback-skip {
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
}
.match-feedback-thanks {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--kazna);
}
.match-feedback-thanks.hidden {
  display: none !important;
}

/* —— Учебный стол —— */
.tutorial-start-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  border: 1px solid rgba(90, 139, 255, 0.45);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 700;
  background: rgba(26, 33, 50, 0.85);
  color: #8eb4ff;
  cursor: pointer;
}
.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 12px 12px;
  background: rgba(8, 12, 20, 0.72);
  pointer-events: auto;
}
.tutorial-overlay.hidden {
  display: none !important;
}
.tutorial-overlay-play {
  inset: auto 0 auto 0;
  bottom: auto;
  height: auto;
  background: transparent;
  pointer-events: none;
  padding: max(8px, env(safe-area-inset-top)) 10px 0;
}
.tutorial-card {
  width: min(420px, 100%);
  border-radius: 16px;
  padding: 14px 16px 16px;
  background: linear-gradient(160deg, #1a2132 0%, #121826 100%);
  border: 1px solid rgba(90, 139, 255, 0.35);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}
.tutorial-overlay-play .tutorial-card {
  width: 100%;
  border-radius: 0 0 14px 14px;
  padding: 10px 14px 12px;
  background: rgba(18, 24, 38, 0.92);
  backdrop-filter: blur(8px);
}
.tutorial-timer {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #8eb4ff;
  text-transform: uppercase;
}
.tutorial-step {
  margin: 0 0 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}
.tutorial-card h2 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
}
.tutorial-body {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
}
.tutorial-bot-setup {
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(90, 139, 255, 0.12);
  color: #a8c4ff;
}
.tutorial-swipe-hint {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  background: rgba(46, 204, 113, 0.12);
  border: 1px solid rgba(46, 204, 113, 0.35);
  color: #7dffb0;
}
.tutorial-advance-btn,
.tutorial-exit-btn {
  display: block;
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.tutorial-advance-btn {
  background: linear-gradient(135deg, #5a8bff, #3d6fd9);
  color: #fff;
}
.tutorial-exit-btn {
  margin-top: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 600;
}
body.tutorial-active #rollBtn {
  opacity: 0.35;
}