/* Neon Arena — durak view: a felt with the opponent's face-down fan on top,
   attack/defend pairs in the center (the cover rides the attack with an
   offset + tilt), the deck with the trump peeking from under it and the
   discard pile on the right, my neon-foil hand fanning at the bottom. Cards:
   dark foil, suit-colored pips (♠ cool, ♥ danger, ♦ gold, ♣ ok), trumps wear
   a gold rim. Loaded after game.css; reuses .fighter/.board-frame/
   .board-countdown/.rematch-splash primitives from the chess game view. */

/* The match is one screenful. `.view-game` (game.css) is the frame — a
   `minmax(0,1fr) 340px` grid whose height is the SCENE's, written by
   `fitMatchColumn()` into `--match-h`, with the opponent bar pinned to the top
   of the board column, the board taking what is left and the player's own bar
   and the action row at the bottom. This file used to override that with a
   `display:flex` root and an inner `.dk-main` at `align-items:start`, which
   is how the column came out 811px tall inside a 660px scene at 1280×800 —
   the player's own clock clipped by the fold and the buttons below it. */

.view-dk {
  overflow: visible;
  --dk-cw: 64px;
  --dk-ch: 90px;
}

/* === stage / felt ===
   The mock's durak table: the opponent's fan at the top in 74px, the felt
   taking everything between, my hand at the bottom in 126px, all of it the
   full width of the board column. `min-height: 470px` inside a 350px stage is
   how the fan and the hand ended up clipped by the frame. */
.dk-stage { padding: 0; overflow: hidden; }
.dk-felt {
  position: relative;
  display: grid;
  /* Vars, not literals: the compact and landscape blocks re-tune the two hand
     bands without restating the whole template. */
  grid-template-rows: var(--dk-row-opp, 64px) minmax(0, 1fr) var(--dk-row-my, 112px);
  gap: 6px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 8px 12px 10px;
  border: 1px solid rgba(var(--t-violet), 0.18);
  border-radius: var(--r-panel);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(124, 201, 255, 0.06), transparent 55%),
    radial-gradient(110% 90% at 50% 100%, rgba(167, 139, 250, 0.07), transparent 55%),
    linear-gradient(160deg, rgba(17, 24, 33, 0.72), rgba(11, 15, 20, 0.85));
  user-select: none;
  -webkit-user-select: none;
}
/* Card sizes per row, the mock's: the face-down fan is smaller than the hand
   you actually read. */
.dk-opp-hand { --dk-cw: 44px; --dk-ch: 62px; }
.dk-my-hand { --dk-cw: 68px; --dk-ch: 96px; }
.dk-side { --dk-cw: 40px; --dk-ch: 56px; }
/* finished-draw rainbow ring (reuses the drawRainbowBorder keyframes) */
.dk-felt.dk-draw-glow {
  border-color: transparent;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(124, 201, 255, 0.06), transparent 55%) padding-box,
    linear-gradient(160deg, rgba(17, 24, 33, 0.9), rgba(11, 15, 20, 0.94)) padding-box,
    var(--draw-rainbow) border-box;
  background-size: 100% 100%, 100% 100%, 240% 100%;
  animation: drawRainbowBorder 2.8s linear infinite;
  box-shadow: 0 0 26px rgba(124, 201, 255, 0.22);
}

/* === cards === */
.dk-card {
  position: relative;
  width: var(--dk-cw);
  height: var(--dk-ch);
  flex: 0 0 auto;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(150deg, #1c2431 0%, #121924 55%, #0c1119 100%);
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  line-height: 1;
}
/* foil sheen */
.dk-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.075) 44%, rgba(255, 255, 255, 0.02) 52%, transparent 64%);
  pointer-events: none;
}
.dk-rank {
  position: absolute;
  top: 6%;
  left: 8%;
  font-size: calc(var(--dk-cw) * 0.26);
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}
.dk-suit-corner {
  position: absolute;
  top: calc(6% + var(--dk-cw) * 0.3);
  left: 9%;
  font-size: calc(var(--dk-cw) * 0.22);
}
.dk-suit-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--dk-cw) * 0.52);
  opacity: 0.92;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.dk-s-s .dk-suit-corner, .dk-s-s .dk-suit-center { color: var(--cool); text-shadow: 0 0 12px rgba(124, 201, 255, 0.4); }
.dk-s-h .dk-suit-corner, .dk-s-h .dk-suit-center { color: var(--danger); text-shadow: 0 0 12px rgba(255, 93, 108, 0.4); }
.dk-s-d .dk-suit-corner, .dk-s-d .dk-suit-center { color: var(--gold); text-shadow: 0 0 12px rgba(241, 193, 82, 0.4); }
.dk-s-c .dk-suit-corner, .dk-s-c .dk-suit-center { color: var(--ok); text-shadow: 0 0 12px rgba(53, 199, 131, 0.4); }

/* trump: gold rim + micro glow */
.dk-card.dk-trump {
  border-color: rgba(241, 193, 82, 0.85);
  box-shadow:
    0 3px 9px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(241, 193, 82, 0.45),
    0 0 14px rgba(241, 193, 82, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* card back: branded ♛ pattern */
.dk-card.dk-back {
  border-color: rgba(241, 193, 82, 0.28);
  background:
    repeating-linear-gradient(45deg, rgba(241, 193, 82, 0.055) 0 6px, transparent 6px 12px),
    linear-gradient(150deg, #1a2233 0%, #101827 55%, #0b101c 100%);
}
.dk-card.dk-back::after {
  content: "♛";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--dk-cw) * 0.44);
  color: rgba(241, 193, 82, 0.5);
  text-shadow: 0 0 12px rgba(241, 193, 82, 0.35);
}

/* === hands (fans) === */
.dk-hand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  padding: 2px 4px;
}
.dk-opp-hand { padding-top: 6px; }
/* The hand scrolls sideways WHEREVER it does not fit — this used to live only
   in the phone block, but a 15-card hand (routine after a pickup) is ~490px
   and the desktop board column can be 468: the centred flex fan clipped both
   edges inside `.dk-stage{overflow:hidden}` and the outer cards were simply
   unreachable. Block + `max-content` fan + auto margins is the same geometry
   flex gave when everything fits (centred, no scrollbar), and an honest
   scroller when it does not. */
.dk-my-hand {
  display: block;
  overflow-x: auto;
  /* `visible` computes to `auto` once the other axis scrolls (spec), so the
     raised card cannot poke out of the box — the fan's own top padding is the
     headroom the -15px select/hover lift needs. */
  overflow-y: visible;
  scrollbar-width: thin;
  padding-bottom: 6px;
}
.dk-my-hand .dk-fan { min-width: max-content; margin: 0 auto; padding-top: 16px; }
.dk-fan {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: var(--dk-ch);
  padding: 4px 6px 0;
}
.dk-fan-card {
  margin-left: calc(var(--dk-cw) * -0.56);
  --rot: calc((var(--i) - (var(--n) - 1) / 2) * 3.2deg);
  transform: rotate(var(--rot)) translateY(0);
  transform-origin: 50% 130%;
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.dk-fan-card:first-child { margin-left: 0; }
.dk-fan-backs .dk-fan-card {
  --rot: calc((var(--i) - (var(--n) - 1) / 2) * 4deg);
  margin-left: calc(var(--dk-cw) * -0.64);
}
/* On touch every card in MY fan must expose a full 44px strip, whatever the
   card width: at the phone's 62px cards the old -0.5 overlap left 31px per
   card and only the last one was honestly tappable. `max()` keeps the pretty
   -0.56 fan wherever cards are wide enough and otherwise loosens the overlap
   to exactly `44px - width`; the hand scrolls, so looser fans cost scroll
   distance, not layout. The opponent's backs are not tappable and keep their
   tight fan. `:not(:first-child)` or this would out-order the first-card
   reset above. */
@media (pointer: coarse) {
  .dk-my-hand .dk-fan-card:not(:first-child) {
    margin-left: max(calc(var(--dk-cw) * -0.56), calc(44px - var(--dk-cw)));
  }
}
.dk-fan-backs .dk-fan-card:first-child { margin-left: 0; }

.dk-hand-card.dk-playable { cursor: pointer; }
.dk-hand-card.dk-playable {
  box-shadow:
    0 3px 9px rgba(0, 0, 0, 0.5),
    0 0 13px rgba(124, 201, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
/* Hover is a mouse question. Ungated, the last TAPPED card kept this lifted
   pose (touch never sends a mouseleave) and read as selected when it was not —
   `.dk-sel` below is the real selection. focus-visible stays outside the gate
   for keyboards; its heuristics never fire on pointer focus. */
.dk-hand-card.dk-playable:focus-visible {
  transform: rotate(var(--rot)) translateY(-13px) scale(1.05);
  z-index: 60 !important;
}
@media (hover: hover) {
  .dk-hand-card.dk-playable:hover {
    transform: rotate(var(--rot)) translateY(-13px) scale(1.05);
    z-index: 60 !important;
  }
}
.dk-hand-card.dk-dim { opacity: 0.55; }
.dk-hand-card.dk-sel {
  transform: rotate(var(--rot)) translateY(-15px);
  z-index: 60 !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.55),
    0 0 0 2px rgba(241, 193, 82, 0.9),
    0 0 18px rgba(241, 193, 82, 0.55);
}

/* counters under the fans / on the piles */
.dk-count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text-dim);
  white-space: nowrap;
}

/* === middle row: the felt itself ===
   The mock draws the deck and the trump in the felt's bottom-left CORNER and
   the attack/defend pairs centred in what is left, rather than a table column
   with a pile column beside it. */
.dk-mid {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--r-panel);
  border: 1px solid rgba(var(--t-violet), 0.18);
  background: radial-gradient(ellipse at center, rgba(48, 30, 86, 0.6), rgba(16, 11, 30, 0.7));
}
.dk-table {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 10px 30px;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  padding: 8px 6px 8px 104px;
}
.dk-table-empty {
  align-self: center;
  font-size: 30px;
  opacity: 0.22;
  filter: grayscale(0.4);
}
.dk-pair {
  position: relative;
  width: var(--dk-cw);
  height: var(--dk-ch);
  flex: 0 0 auto;
  transition: transform var(--dur-med) ease, opacity var(--dur-med) ease;
}
/* beaten pair sinks a little */
.dk-pair.dk-beaten {
  transform: translateY(4px) scale(0.985);
  opacity: 0.82;
}
.dk-defend-card {
  position: absolute;
  left: 36%;
  top: -24%;
  z-index: 2;
  transform: rotate(13deg);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
/* defend target highlight */
.dk-attack-card.dk-targetable {
  cursor: pointer;
  border-color: rgba(241, 193, 82, 0.95);
  box-shadow:
    0 3px 9px rgba(0, 0, 0, 0.5),
    0 0 0 2px rgba(241, 193, 82, 0.75),
    0 0 20px rgba(241, 193, 82, 0.55);
  animation: dkTargetPulse 1.15s ease-in-out infinite;
}
@keyframes dkTargetPulse {
  0%, 100% { box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(241, 193, 82, 0.7), 0 0 12px rgba(241, 193, 82, 0.4); }
  50% { box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5), 0 0 0 2.5px rgba(241, 193, 82, 1), 0 0 26px rgba(241, 193, 82, 0.75); }
}

/* === side piles: deck + trump, discard === */
.dk-side {
  flex: 0 0 auto;
  position: absolute;
  left: 10px;
  bottom: 8px;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 0;
}
.dk-deck-stack {
  position: relative;
  width: 54px;
  height: calc(var(--dk-ch) + 14px);
}
.dk-deck {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.dk-deck .dk-deck-back {
  box-shadow:
    2px 2px 0 rgba(16, 24, 39, 0.9),
    4px 4px 0 rgba(16, 24, 39, 0.55),
    0 6px 14px rgba(0, 0, 0, 0.5);
}
.dk-count-deck {
  position: absolute;
  right: -8px;
  bottom: -6px;
  z-index: 3;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  border: 1px solid var(--stroke-strong);
  background: var(--panel-strong);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.dk-deck.dk-empty .dk-count-deck { color: var(--text-faint); }
/* trump rides under the deck, rotated, peeking out at the bottom */
.dk-trump-wrap {
  position: absolute;
  left: 50%;
  top: calc(var(--dk-ch) - 20px);
  z-index: 1;
}
.dk-trump-card {
  transform: translateX(-50%) rotate(90deg);
}
.dk-card.dk-mini {
  width: var(--dk-cw);
  height: var(--dk-ch);
}
.dk-discard {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dk-cw);
  height: var(--dk-ch);
  border-radius: 9px;
  border: 1.5px dashed rgba(255, 255, 255, 0.2);
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.03) 0 5px, transparent 5px 10px),
    rgba(255, 255, 255, 0.02);
}
.dk-discard .dk-count {
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--panel-strong);
  border: 1px solid var(--stroke);
  font-variant-numeric: tabular-nums;
}
.dk-discard.dk-empty { opacity: 0.45; }

/* === ghost flights === */
.dk-fly-layer {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}
.dk-card.dk-ghost {
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 340ms cubic-bezier(0.2, 0.7, 0.25, 1);
  will-change: transform;
}
.dk-card.dk-ghost-dim { opacity: 0.85; }

/* === context actions === */
.dk-action-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  min-height: 40px;
  margin-top: -2px;
}
.dk-action {
  min-width: 150px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.3px;
  padding: 9px 22px;
  animation: popIn var(--dur-med) var(--spring) both;
}
.btn-primary.dk-action { box-shadow: var(--shadow-glow-ok); }
.btn-danger.dk-action { box-shadow: var(--shadow-glow-danger); }

/* === fighter-card extras === */
.dk-material { gap: 5px; align-items: center; }
.dk-mini-back {
  display: inline-block;
  width: 12px;
  height: 16px;
  border-radius: 2.5px;
  border: 1px solid rgba(241, 193, 82, 0.4);
  background:
    repeating-linear-gradient(45deg, rgba(241, 193, 82, 0.12) 0 3px, transparent 3px 6px),
    linear-gradient(150deg, #1a2233, #0b101c);
}
.dk-count-chip {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
/* The longest thing in .fighter-sub, and the row can no longer wrap to make
   room for it (see .fighter-sub in game.css). Left to itself it runs under the
   hand-size chip on a 320px phone, so it truncates instead — and clips with a
   margin so «⚔ АТАКУЕТ» keeps its gold halo. */
.dk-role {
  min-width: 0;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--cool);
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: 12px;
  text-overflow: ellipsis;
}
.dk-role.is-att { color: var(--gold); text-shadow: 0 0 10px rgba(241, 193, 82, 0.45); }

/* === finish splash === */
.dk-finish {
  position: absolute;
  inset: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.dk-finish.is-active { opacity: 1; }
.dk-finish-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 22px 34px;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-brd);
  background: rgba(10, 14, 20, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-card);
  animation: popIn var(--dur-med) var(--spring) both;
}
.dk-finish-emoji { font-size: 44px; line-height: 1; }
.dk-finish-title {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text);
}
.dk-finish-sub { font-size: 13.5px; font-weight: 600; color: var(--text-dim); }
.dk-finish.is-win .dk-finish-title { color: var(--gold); text-shadow: 0 0 22px rgba(241, 193, 82, 0.6); }
.dk-finish.is-loss .dk-finish-title { color: var(--danger); text-shadow: 0 0 22px rgba(255, 93, 108, 0.55); }
.dk-finish.is-draw .dk-finish-title { color: var(--cool); text-shadow: 0 0 22px rgba(124, 201, 255, 0.55); }

/* === moves log === */
.dk-moves { max-height: 300px; }
.dk-move-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
}
.dk-move-row:nth-child(odd) { background: var(--panel-soft); }
.dk-move-ico { font-size: 12px; width: 16px; text-align: center; }
.dk-move-text { font-weight: 700; letter-spacing: 0.3px; }
.dk-move-who {
  font-weight: 600;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

/* === responsive ===
   Was `@media (max-width: 620px)`, which asks the WINDOW — and the empty
   `@container` stub above it was the abandoned half of this exact conversion.
   The console subtracts the rail and the context column before the scene gets
   anything (shell.css «WINDOW CLASSES»), so an authed player at an 800-1279px
   window plays durak in a 486-527px scene that these rules never touched: the
   desktop felt, the absolute deck stack and the centred, clipped fan inside a
   phone-shaped box. game.css:914 documents the same bug for the chess match.
   The numbers stay; the box changes — 619 is the same one-column constant the
   whole game family uses, and below an 800px window the two units agree, so
   every real phone measures byte-identical before and after. */
@container scene (max-width: 619px) {
  .view-dk { --dk-cw: 50px; --dk-ch: 71px; --dk-row-opp: 62px; --dk-row-my: 104px; }
  .dk-felt { padding: 8px; }
  .dk-opp-hand { --dk-cw: 44px; --dk-ch: 62px; }
  .dk-my-hand { --dk-cw: 62px; --dk-ch: 88px; }
  .dk-table { padding-left: 6px; }
  .dk-side { position: static; align-self: flex-start; }
  .dk-side { width: 92px; gap: 10px; }
  .dk-deck-stack { width: 82px; }
  .dk-table { gap: 8px 22px; padding-top: 22px; }
  /* The hand scroller itself now lives in the base rules (the desktop column
     clips too); here only the tighter fan remains — and on touch the coarse
     44px exposure floor above still wins over both of these. */
  .dk-fan-card { margin-left: calc(var(--dk-cw) * -0.5); }
  .dk-fan-backs .dk-fan-card { margin-left: calc(var(--dk-cw) * -0.58); }
  .dk-action { min-width: 0; flex: 1 1 0; max-width: 220px; }
}
@container scene (max-width: 390px) {
  .view-dk { --dk-cw: 45px; --dk-ch: 64px; }
  .dk-mid { gap: 4px; }
  .dk-side { width: 80px; }
  .dk-deck-stack { width: 72px; }
  .dk-table { gap: 6px 16px; }
  .dk-pair { margin: 0 2px; }
  .dk-finish-title { font-size: 24px; }
  .dk-finish-frame { padding: 16px 22px; }
}

/* === phone landscape ===
   Sideways in a match the shell drops the rail, the column and the act bar
   (shell.css `.is-game`), so the scene is nearly the whole window — WIDE but
   ~330px tall. The desktop felt's fixed hand bands (64+112) plus two fighter
   bars plus the actions row ate the table row entirely. The same trade the
   chess landscape block makes: the transient chrome goes (bars, resign/tools —
   all back on rotation), the felt takes the height, and bito/take — the only
   controls a durak turn actually needs — stay at the 44px floor. */
@media (orientation: landscape) and (max-height: 500px) {
  .view-dk { --dk-cw: 44px; --dk-ch: 62px; --dk-row-opp: 40px; --dk-row-my: 88px; }
  .view-dk .dk-opp-hand { --dk-cw: 30px; --dk-ch: 42px; }
  .view-dk .dk-my-hand { --dk-cw: 54px; --dk-ch: 76px; }
  .view-dk .dk-side { --dk-cw: 32px; --dk-ch: 45px; }
  .view-dk .g-board-col > .fighter-slot { display: none; }
  .view-dk .g-board-col > .g-actions-row { display: none; }
  .view-dk .dk-felt { padding: 4px 8px 6px; gap: 3px; }
  .view-dk .dk-my-hand .dk-fan { padding-top: 8px; }
  .view-dk .dk-hand > .dk-count { display: none; }
  .view-dk .dk-action-row { min-height: 44px; margin-top: 0; }
  .view-dk .dk-action { min-width: 0; flex: 1 1 0; max-width: 220px; min-height: 44px; padding: 6px 14px; }
}

/* === multi-seat tables (dkm-*) ==============================================
   The N-seat branch of the durak view (Arena «Столы», 2-6 seats). Every rule
   here hangs off `.view-dk.dkm-on` or a `dkm-*` class the multi branch of
   durak.js adds, so a 1v1 game renders byte-for-byte through the rules above. */

/* Fighter cards carry clocks and Glicko plates — meaningless at a table; the
   arc and the deadline bar replace them. */
.view-dk.dkm-on .fighter-slot { display: none; }

/* opponents arc: one chip per other seat in the top row of the felt */
.dk-opp-hand.dkm-arc {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  padding: 4px 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.dkm-seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 84px;
  max-width: 150px;
  padding: 4px 10px;
  border-radius: var(--r-panel);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(160deg, rgba(23, 30, 42, 0.75), rgba(12, 16, 24, 0.85));
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.dkm-seat.is-toact {
  border-color: rgba(241, 193, 82, 0.85);
  box-shadow: 0 0 0 1px rgba(241, 193, 82, 0.4), 0 0 16px rgba(241, 193, 82, 0.35);
  animation: dkmToActPulse 1.4s ease-in-out infinite;
}
@keyframes dkmToActPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(241, 193, 82, 0.35), 0 0 10px rgba(241, 193, 82, 0.25); }
  50% { box-shadow: 0 0 0 1.5px rgba(241, 193, 82, 0.8), 0 0 22px rgba(241, 193, 82, 0.5); }
}
.dkm-seat.is-out { opacity: 0.5; filter: grayscale(0.5); }
.dkm-seat-top {
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-width: 0;
}
.dkm-seat-marker { font-size: 12px; line-height: 1; flex: 0 0 auto; }
.dkm-seat-name {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dkm-seat-sub { display: flex; align-items: center; gap: 5px; }
.dkm-seat-count {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.dkm-out-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 1px 7px;
  border-radius: var(--r-pill);
  border: 1px dashed rgba(255, 255, 255, 0.25);
}

/* multi action extras: «Пас» beside «✔ Бито», «⇄ Перевод» for perevodnoy */
.dk-action.dkm-pass {
  min-width: 110px;
  border: 1px solid rgba(124, 201, 255, 0.4);
}
.dk-action.dkm-transfer { box-shadow: var(--shadow-glow-gold, 0 0 14px rgba(241, 193, 82, 0.35)); }

/* multi spectator: everyone lives in the arc, the bottom zone idles */
.dkm-spec-idle {
  align-self: center;
  margin: 0 auto;
  font-size: 26px;
  opacity: 0.25;
}

/* flat per-turn deadline bar replacing the chess clocks */
.dkm-deadline {
  height: 5px;
  margin: 4px 2px 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.dkm-deadline-fill {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(124, 201, 255, 0.85), rgba(167, 139, 250, 0.85));
  transition: width 220ms linear;
}
.dkm-deadline-fill.is-low {
  background: linear-gradient(90deg, rgba(255, 93, 108, 0.9), rgba(241, 193, 82, 0.9));
}

/* Scene, not window — same conversion as the 1v1 section above. */
@container scene (max-width: 619px) {
  .dkm-seat { min-width: 72px; padding: 3px 7px; }
  .dkm-seat-name { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .dkm-seat.is-toact { animation: none; }
  .dkm-deadline-fill { transition: none; }
}

/* === reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .dk-card.dk-ghost { transition: none; }
  .dk-fan-card { transition: none; }
  .dk-attack-card.dk-targetable,
  .dk-felt.dk-draw-glow,
  .dk-action { animation: none; }
}