/* Poker SNG — the mock's felt, value for value.
   Copied from console.html §MATCH SCREENS (`m.isPoker`, desktop and phone)
   rather than eyeballed: the oval is `width:min(600px,80%); aspect-ratio:1.62;
   border-radius:50%/34%; border:2px solid rgba(241,193,82,.24)`, a board card
   is `56×80 @ 9px` on the warm stock `linear-gradient(160deg,#fdfaf2,#e6dfd0)`,
   a seat plate is `padding:7px 11px 7px 7px; border-radius:12px; gap:8px` with
   a `30×30 @ 9px` avatar, and my own cards are `64×92` with the gold rim.

   NARROW-FIRST, and the breakpoint is `@container scene`, never `@media`: at a
   1280px window the scene is 858px. The phone is the mock's other drawing — a
   scrolling strip of stacks, a rounded felt PANEL and my cards below it — and
   the console layer turns the same three nodes into the oval.

   The felt is the one place a raw colour survives: green baize is not a token
   the console has, and the two stops are the mock's own. */

.view-poker {
  /* One screenful, not a page. `--match-h` is written by fitMatchColumn() in
     ui/board.js from the SCENE's measured height; the fallback keeps the old
     scrolling layout in a browser without ResizeObserver. */
  --pk-felt-bg: radial-gradient(ellipse at center, rgba(24, 64, 48, 0.7), rgba(12, 30, 24, 0.85));
  --pk-card-w: 42px;
  --pk-card-h: 60px;
  --pk-card-r: 7px;
  --pk-card-rank: 11px;
  --pk-card-suit: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  /* A floor rather than a fixed height on a phone: six stacks, a felt and my
     cards fit the scene, but clipping the action row would be the exact defect
     the chess board was fixed for. */
  min-height: var(--match-h, auto);
}
.view-poker > * { flex: 0 0 auto; }
.pk-stage { flex: 1 1 auto; min-height: 0; }

/* === failure ============================================================
   The one block every screen shows when it could not read. It takes the whole
   view: a felt with no pot and no cards on it is not a table. */
.pk-fail { flex: 1 1 auto; min-height: 0; }
.pk-fail-card {
  padding: 18px;
  border-radius: var(--r-lg);
  background: var(--panel-strong);
  border: 1px solid var(--glass-brd);
}

/* === the stage ==========================================================
   Phone: a column of strip → felt panel → my cards. */
.pk-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

/* === the felt =========================================================== */
.pk-felt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 16px 12px;
  border-radius: 18px;
  border: 1px solid rgba(var(--t-gold), 0.2);
  background: var(--pk-felt-bg);
  box-shadow: inset 0 0 46px rgba(0, 0, 0, 0.55);
}
.pk-pot-label {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.pk-pot {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--gold);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pk-street {
  font-size: 9px;
  text-align: center;
  text-transform: lowercase;
  color: var(--text-faint);
}

/* === cards ==============================================================
   One card, two sizes: the board takes the view's vars, my own two override
   them and add the gold rim the mock gives the highlighted card. */
.pk-board { display: flex; gap: 5px; }
.pk-card,
.pk-card-slot {
  width: var(--pk-card-w);
  height: var(--pk-card-h);
  flex: 0 0 auto;
  border-radius: var(--pk-card-r);
}
.pk-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: linear-gradient(160deg, #fdfaf2, #e6dfd0);
  border: 1px solid rgba(0, 0, 0, 0.35);
  color: #141026;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}
.pk-card.is-red { color: #e0566a; }
.pk-card-rank { font-size: var(--pk-card-rank); font-weight: 800; line-height: 1; }
.pk-card-suit { font-size: var(--pk-card-suit); line-height: 1; }
.pk-card-slot {
  border: 1px dashed rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.2);
}

/* === my two cards ======================================================= */
.pk-hole {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.pk-hole-cards {
  display: flex;
  gap: 5px;
  --pk-card-w: 54px;
  --pk-card-h: 78px;
  --pk-card-r: 9px;
  --pk-card-rank: 14px;
  --pk-card-suit: 21px;
}
.pk-card.is-mine {
  border-color: rgba(var(--t-gold), 0.9);
  box-shadow: 0 0 20px rgba(var(--t-gold), 0.5), 0 6px 16px rgba(0, 0, 0, 0.5);
}
/* The hand my cards actually make, computed with the engine's own ranking —
   the payload ships neither the name nor the rank. */
.pk-hand {
  flex: 0 0 auto;
  padding: 5px 11px;
  border-radius: 8px;
  background: rgba(53, 199, 131, 0.14);
  border: 1px solid rgba(53, 199, 131, 0.32);
  font-size: 10px;
  font-weight: 800;
  color: var(--ok);
  white-space: nowrap;
}

/* === the seats ==========================================================
   Phone: a horizontal strip of stacks. My own seat leads it — the mock drops
   it because its match hud carries my stack, and this screen has no hud. */
.pk-seats {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* The dealer badge hangs 7px off the chip's top corner, and a scroller
     clips its own overflow — without this it is drawn with its head cut off. */
  padding: 8px 0 2px;
}
.pk-seat {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 10px;
  border: 1px solid rgba(var(--t-violet), 0.22);
  background: rgba(16, 11, 30, 0.85);
}
.pk-seat.is-out { opacity: 0.42; }
.pk-seat.is-me { border-color: rgba(var(--t-gold), 0.4); background: rgba(48, 32, 14, 0.9); }
.pk-seat.is-turn { border-color: rgba(var(--t-gold), 0.8); box-shadow: 0 0 24px rgba(var(--t-gold), 0.4); }
/* On a phone the plate IS the chip, so it stops being a box of its own. */
.pk-plate { display: contents; }
.pk-plate-body { display: contents; }
.pk-avatar {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  background: linear-gradient(135deg, #7c3aed, #241638);
  border: 1px solid rgba(var(--t-violet), 0.3);
}
.pk-seat-name { display: none; }
/* `.clan-tag-chip` is a shared component and its stylesheet loads after this
   one, so hiding the tag on the phone chip needs the extra class to win. */
.pk-seat .pk-clan { display: none; }
.pk-seat-stack {
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  color: rgba(var(--t-mute), 0.66);
  font-variant-numeric: tabular-nums;
}
.pk-seat.is-me .pk-seat-stack { color: var(--gold); }
.pk-seat-stack.is-out { color: rgba(var(--t-danger), 0.7); }
.pk-bet {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(var(--t-gold), 0.16);
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--gold);
}
.pk-dealer {
  position: absolute;
  right: -7px;
  top: -7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 800;
  background: #fdfaf2;
  color: #1a1030;
}

/* === the action row ===================================================== */
.pk-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
}
.pk-act {
  flex: 0 1 auto;
  min-width: 0;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.18s var(--spring), background 0.18s, border-color 0.18s;
  border: 1px solid transparent;
}
/* Three tones, and each action gets exactly one: check and call are the
   console's neutral chip, fold and all-in are the two that end something, and
   the raise is the single gold action of the row. */
.pk-act-plain {
  border-color: rgba(var(--t-violet), 0.26);
  background: rgba(20, 13, 38, 0.55);
  color: var(--text-dim);
}
/* A poker decision is a tap you cannot take back, so the target keeps the
   console's 44px on a touch screen even though the mock's chip is 33px tall. */
@media (pointer: coarse) {
  .pk-act { min-height: 44px; }
}
.pk-act-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (hover: hover) {
  .pk-act:hover:not(:disabled) { transform: translateY(-2px); }
}
.pk-act:active:not(:disabled) { transform: scale(0.97); }
.pk-act:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.pk-act-fold,
.pk-act-allin {
  border-color: rgba(var(--t-danger), 0.34);
  background: rgba(var(--t-danger), 0.07);
  color: #ff8a94;
}
.pk-act-raise {
  padding: 9px 20px;
  border-color: transparent;
  background: var(--gold-grad);
  color: var(--gold-ink);
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(var(--t-gold), 0.28);
}

/* Not my decision point. An empty row under a live table reads as a screen
   that stopped working, so it says which it is. */
.pk-turn-note { font-size: 11px; color: var(--text-soft); }

/* === the closed table ===================================================
   The hub says «Без рейтинга» and «Играть уже можно, а рейтинга ещё нет»; the
   table repeats it where a player asks what the game was worth. */
.pk-over {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--panel-strong);
  border: 1px solid var(--glass-brd);
  text-align: center;
}
.pk-over-title { font-family: var(--font-display); font-size: 13px; font-weight: 700; }
.pk-over-unrated-tag {
  padding: 3px 11px;
  border-radius: var(--r-pill);
  background: rgba(var(--t-violet), 0.14);
  border: 1px solid rgba(var(--t-violet), 0.28);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--violet-300);
}
.pk-over-unrated-sub { flex: 1 1 240px; font-size: 11.5px; line-height: 1.45; color: var(--text-soft); }
/* The defeat CTA row: «Отыграться» leads, the way out is beside it. Full width
   so the primary button reads as the action, not a footnote of the closed
   table (same shape as quiz's .qz-over-acts). */
.pk-over-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; }

/* === the console: the oval ==============================================
   `--pk-felt-h` / `--pk-felt-w` are written by the view from the STAGE's own
   measured box (see sizeFeltWithStage() in views/poker.js, which says why the
   sum cannot live here). The fallbacks are the mock's own 600×370.4, so a
   browser without ResizeObserver gets the drawing rather than a collapsed one. */
@container scene (min-width: 620px) {
  .view-poker {
    gap: 12px;
    height: var(--match-h, auto);
    min-height: 0;
    --pk-card-w: 56px;
    --pk-card-h: 80px;
    --pk-card-r: 9px;
    --pk-card-rank: 15px;
    --pk-card-suit: 22px;
  }
  .pk-stage { display: block; }
  .pk-felt {
    position: absolute;
    left: 50%;
    top: 50%;
    height: var(--pk-felt-h, 370.4px);
    width: var(--pk-felt-w, 600px);
    transform: translate(-50%, -50%);
    justify-content: center;
    gap: 13px;
    /* My own cards hang into the lower third of the oval, and the street line
       is the last thing above them. At the mock's own 370.4px felt they clear
       each other by 4.7px; on a shorter scene the felt shrinks and they would
       not, so the content is pushed up by exactly what the felt lost. Zero at
       the mock's size, which is why this is a max() and not a constant. */
    padding: 0 0 max(0px, calc(370.4px - var(--pk-felt-h, 370.4px)));
    border: 2px solid rgba(var(--t-gold), 0.24);
    border-radius: 50% / 34%;
    box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.6), 0 26px 70px rgba(0, 0, 0, 0.6);
  }
  .pk-pot-label { font-size: 10px; letter-spacing: 0.2em; }
  .pk-pot { font-size: 26px; text-shadow: 0 0 22px rgba(var(--t-gold), 0.4); }
  .pk-board { gap: 8px; }
  .pk-street { font-size: 10px; }

  /* Hanging off the felt's lower edge by the mock's 26px, measured from the
     stage's own middle so it tracks the oval at every size. */
  .pk-hole {
    position: absolute;
    left: 50%;
    bottom: calc(50% - var(--pk-felt-h, 370.4px) / 2 - 26px);
    transform: translateX(-50%);
    flex-direction: column;
    gap: 5px;
  }
  .pk-hole-cards {
    --pk-card-w: 64px;
    --pk-card-h: 92px;
    --pk-card-rank: 17px;
    --pk-card-suit: 25px;
  }
  .pk-hand { padding: 3px 11px; border-radius: 7px; }

  /* The strip becomes the ring: an overlay the exact size of the stage, with
     each plate pinned to its point on the oval. */
  .pk-seats {
    position: absolute;
    inset: 0;
    display: block;
    overflow: visible;
    padding: 0;
    pointer-events: none;
  }
  .pk-seat {
    position: absolute;
    left: var(--pk-x);
    top: var(--pk-y);
    transform: translate(-50%, -50%);
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .pk-seat.is-out { opacity: 0.4; }
  .pk-plate {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px 7px 7px;
    border-radius: 12px;
    border: 1px solid rgba(var(--t-violet), 0.24);
    background: rgba(16, 11, 30, 0.92);
  }
  .pk-seat.is-me .pk-plate { border-color: rgba(var(--t-gold), 0.4); background: rgba(48, 32, 14, 0.9); }
  .pk-seat.is-turn .pk-plate {
    border-color: rgba(var(--t-gold), 0.8);
    box-shadow: 0 0 24px rgba(var(--t-gold), 0.4);
  }
  .pk-plate-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .pk-avatar { width: 30px; height: 30px; border-radius: 9px; font-size: 14px; }
  .pk-seat-name {
    display: block;
    max-width: 82px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 800;
  }
  .pk-seat .pk-clan { display: inline-flex; }
  .pk-seat-stack { font-size: 11px; color: rgba(var(--t-mute), 0.6); }
  .pk-bet { padding: 2px 9px; border-radius: 6px; font-size: 10px; }

  .pk-over-title { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .pk-act { transition: none; }
  .pk-act:hover:not(:disabled),
  .pk-act:active:not(:disabled) { transform: none; }
}