/* ============================================================================
   cardgen.ru — УСТРОЙСТВО ИГРОКА
   ----------------------------------------------------------------------------
   Телефон в руке. Экран решён как пульт за покерным столом:

     ┌──────────────────────────────┐
     │ комната · раздача · блайнды  │  1 строка
     ├──────────────────────────────┤
     │ ваш ход            12 сек    │  статус + таймер
     ├──────────────────────────────┤
     │ стек 200 │ ставка 0 │ банк 46│  числа
     ├──────────────────────────────┤
     │                              │
     │   [борд]                     │  сукно — резиновое,
     │      🂠 🂠                    │  забирает всё свободное место
     │                              │
     ├──────────────────────────────┤
     │ прикройте рукой · уголком    │  подсказка
     ├──────────────────────────────┤
     │  фолд        │  колл 6       │  кнопки, 2 ряда
     │  рейз · до 12│  олл-ин       │
     └──────────────────────────────┘

   Правило: карты — главное. Всё остальное компактно и не отвлекает.
   ========================================================================== */

/* ============================================================================
   1. КОРЕНЬ
   ========================================================================== */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body.device {
  display: block;
  width: 100%;
  max-width: 100vw;
  height: 100dvh;
  background: var(--ink-0);
  color: var(--ivory);
  font-family: var(--font-sans);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.app {
  position: relative;
  width: 100%;
  max-width: 560px;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(90% 46% at 50% -10%, rgba(226, 197, 137, .07) 0%, transparent 62%),
    var(--ink-0);
}

/* ============================================================================
   2. ДЕМО-ПОЛОСА (только ?sample=1)
   ========================================================================== */

.demo-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: calc(env(safe-area-inset-top, 0px) + 6px) 10px 6px;
  background: linear-gradient(to bottom, rgba(4, 6, 10, .96) 60%, transparent);
  overflow-x: auto;
  scrollbar-width: none;
}

.demo-bar[hidden] { display: none !important; }
.demo-bar::-webkit-scrollbar { display: none; }

.demo-bar__tag {
  flex: none;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-300);
  box-shadow: inset 0 0 0 1px rgba(226, 197, 137, .3);
  white-space: nowrap;
}

.demo-bar__switch {
  display: flex;
  gap: 4px;
  flex: none;
}

.demo-bar__switch button {
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  color: var(--ivory-3);
  background: rgba(11, 15, 20, .8);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  white-space: nowrap;
  transition: color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.demo-bar__switch button[aria-pressed="true"] {
  color: var(--gold-200);
  background: rgba(226, 197, 137, .12);
  box-shadow: inset 0 0 0 1px rgba(226, 197, 137, .42);
}

/* ============================================================================
   3. ЭКРАНЫ
   ========================================================================== */

.screen {
  display: none;
  width: 100%;
  height: 100%;
}

.screen:not([hidden]) { display: flex; }

.screen[hidden] { display: none !important; }

/* ── экраны-центровки ────────────────────────────────────────────────────── */

.screen--center {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: calc(env(safe-area-inset-top, 0px) + 24px) 22px calc(env(safe-area-inset-bottom, 0px) + 24px);
  overflow-y: auto;
  text-align: center;
}

.screen--center h1 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--ivory);
}

.screen--center p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ivory-3);
  max-width: 34ch;
}

.screen--center .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.screen--center .brand__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--gold-200);
  background: radial-gradient(circle at 50% 28%, rgba(226, 197, 137, .18), transparent 62%), rgba(7, 10, 14, .8);
  box-shadow:
    inset 0 0 0 1px rgba(226, 197, 137, .42),
    inset 0 1px 0 rgba(255, 255, 255, .14);
}

.screen--center .brand__word {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ivory);
}

.screen--center .brand__word b { color: var(--gold-300); }

/* ============================================================================
   4. ЛОББИ
   ========================================================================== */

#screen-lobby {
  flex-direction: column;
  gap: 14px;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) 16px calc(env(safe-area-inset-bottom, 0px) + 18px);
  overflow-y: auto;
}

.lobby__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .035) 0%, transparent 42%),
    rgba(11, 15, 20, .8);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .055),
    inset 0 1px 0 rgba(255, 255, 255, .05);
}

.eyebrow {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ivory-3);
}

.roomcode {
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1;
  color: var(--gold-200);
  text-shadow: 0 0 26px rgba(226, 197, 137, .26);
}

.lobby__seats-wrap {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.seats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.seat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  padding: 8px 5px;
  border-radius: var(--radius);
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .028), transparent 60%),
    rgba(11, 15, 20, .76);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  transition:
    box-shadow var(--t-fast) var(--ease-out),
    background var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out);
}

.seat--free { cursor: pointer; }
.seat--free:active { transform: scale(.97); }
.seat--free:hover { box-shadow: inset 0 0 0 1px rgba(226, 197, 137, .32); }
.seat--taken { opacity: .5; }

.seat.is-selected {
  background:
    linear-gradient(to bottom, rgba(226, 197, 137, .14), transparent 62%),
    rgba(18, 24, 18, .92);
  box-shadow:
    inset 0 0 0 1px rgba(226, 197, 137, .6),
    0 0 20px rgba(226, 197, 137, .16);
}

.seat.is-mine {
  box-shadow:
    inset 0 0 0 1px rgba(79, 191, 160, .55),
    0 0 18px rgba(79, 191, 160, .12);
}

.seat__no {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  color: var(--ivory-2);
}

.seat.is-selected .seat__no { color: var(--gold-200); }

.seat__name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 500;
  color: var(--ivory-3);
}

.seat__stack {
  font-size: 9.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(169, 162, 148, .65);
}

/* ============================================================================
   5. ФОРМЫ И КНОПКИ
   ========================================================================== */

.form {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.field__label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ivory-3);
}

.input {
  width: 100%;
  min-height: 50px;
  padding: 13px 15px;
  border: 0;
  border-radius: var(--radius);
  background: rgba(4, 6, 10, .62);
  color: var(--ivory);
  font-family: var(--font-sans);
  font-size: 16px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    inset 0 2px 8px rgba(0, 0, 0, .4);
  transition: box-shadow var(--t-med) var(--ease-out);
  -webkit-user-select: text;
  user-select: text;
}

.input::placeholder { color: rgba(169, 162, 148, .5); }

.input:focus {
  outline: none;
  box-shadow:
    inset 0 0 0 1px rgba(226, 197, 137, .5),
    0 0 0 4px rgba(226, 197, 137, .08);
}

.input--code {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .22em;
  text-align: center;
  text-transform: uppercase;
}

.form-error {
  font-size: 12px;
  line-height: 1.4;
  color: #E79A92;
  text-align: left;
}

.form-error[hidden] { display: none !important; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 13px 18px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .015em;
  color: var(--ivory);
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .05), transparent 60%),
    var(--ink-3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 0 0 1px rgba(255, 255, 255, .09),
    0 6px 16px rgba(0, 0, 0, .35);
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-med) var(--ease-out),
    opacity var(--t-fast) linear;
}

.btn:active:not(:disabled) { transform: scale(.982); }

.btn:disabled {
  opacity: .32;
  filter: saturate(.35);
}

.btn--primary {
  color: #14100A;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .40), transparent 52%),
    linear-gradient(168deg, var(--gold-200) 0%, var(--gold-300) 44%, var(--gold-500) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -1px 0 rgba(0, 0, 0, .26),
    0 10px 28px rgba(176, 138, 70, .26);
  font-weight: 700;
}

.btn--lg {
  min-height: 54px;
  font-size: 15.5px;
}

.linkbtn {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--gold-300);
  text-decoration: none;
  border-bottom: 1px solid rgba(226, 197, 137, .32);
  padding-bottom: 1px;
}

.hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ivory-3);
  text-align: center;
}

.hint a {
  color: var(--gold-300);
  text-decoration: none;
  border-bottom: 1px solid rgba(226, 197, 137, .32);
}

.privacy-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(169, 162, 148, .68);
  text-align: left;
}

.privacy-note::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 2px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(79, 191, 160, .6);
  background: radial-gradient(circle, rgba(79, 191, 160, .85) 0 28%, transparent 30%);
}

/* ============================================================================
   6. ЭКРАН РУКИ — сетка
   ========================================================================== */

#screen-hand {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "hud"
    "board"
    "stats"
    "felt"
    "foot"
    "actions";
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding-top: calc(env(safe-area-inset-top, 0px));
}

#screen-hand[hidden] { display: none !important; }

.hand { display: contents; }

/* ── HUD ────────────────────────────────────────────────────────────────── */

.hud {
  grid-area: hud;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 8px 12px 0;
}

.hud__top {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ivory-2);
  background: rgba(11, 15, 20, .72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .055);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chip__k {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(169, 162, 148, .62);
}

.chip b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ivory);
}

.chip--street {
  color: var(--gold-300);
  box-shadow: inset 0 0 0 1px rgba(226, 197, 137, .3);
  margin-left: auto;
  font-style: italic;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .02em;
}

/* ── статус + таймер ────────────────────────────────────────────────────── */

.hud__status {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding: 9px 12px 10px;
  border-radius: var(--radius);
  background: rgba(11, 15, 20, .72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
  transition: box-shadow var(--t-med), background var(--t-med);
}

.hud__status[data-tone="turn"] {
  background:
    linear-gradient(to bottom, rgba(226, 197, 137, .12), transparent 64%),
    rgba(18, 24, 18, .92);
  box-shadow:
    inset 0 0 0 1px rgba(226, 197, 137, .48),
    0 0 22px rgba(226, 197, 137, .12);
}

.hud__status[data-tone="bad"] {
  box-shadow: inset 0 0 0 1px rgba(196, 85, 75, .45);
}

.hud__status-text {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.15;
  color: var(--ivory);
}

.hud__status[data-tone="turn"] .hud__status-text { color: var(--gold-200); }

.hud__status-sub {
  font-size: 11px;
  line-height: 1.35;
  color: var(--ivory-3);
}

.hud__timer {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ivory-3);
}

.hud__timer[hidden] { display: none !important; }

.timerbar {
  position: relative;
  height: 3px;
  margin-top: 6px;
  border-radius: var(--radius-pill);
  background: rgba(246, 241, 231, .1);
  overflow: hidden;
}

.timerbar[hidden] { display: none !important; }

.timerbar > i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-200));
  box-shadow: 0 0 10px rgba(226, 197, 137, .5);
  transition: width 150ms linear, background 300ms;
}

.timerbar[data-tone="warn"] > i { background: linear-gradient(90deg, #A8483C, var(--warn)); }
.timerbar[data-tone="bad"] > i {
  background: linear-gradient(90deg, #8C3A32, #C4554B);
  box-shadow: 0 0 12px rgba(196, 85, 75, .65);
}

/* ── числа ──────────────────────────────────────────────────────────────── */

.hud__stats {
  grid-area: stats;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 8px 12px 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px 9px;
  background: rgba(7, 10, 14, .9);
}

.stat__k {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ivory-3);
  white-space: nowrap;
}

.stat__v {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--ivory);
  font-variant-numeric: tabular-nums lining-nums;
}

.stat:last-child .stat__v { color: var(--gold-200); }

/* ── борд ───────────────────────────────────────────────────────────────── */

.board-row {
  grid-area: board;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px 0;
  min-width: 0;
}

.board {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  perspective: 800px;
  perspective-origin: 50% 12%;
}

.board-row__note {
  font-size: 10px;
  letter-spacing: .03em;
  color: var(--ivory-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board .cg3d {
  --w: 34px;
  --tilt: 66deg;
}

.board .cg3d__grab { display: none; }

.board .cg3d--empty { border-radius: 3px; }

.board .cg3d--empty::after {
  border-radius: 3px;
  background: rgba(3, 26, 20, .4);
  box-shadow: inset 0 0 0 .5px rgba(246, 241, 231, .06);
}

/* ── сукно с картами ────────────────────────────────────────────────────── */

.cards-area {
  grid-area: felt;
  position: relative;
  min-height: 0;
  min-width: 0;
  margin: 10px 12px 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.felt-hand {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.felt-hand .felt-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 0;
  padding: 0;
  perspective: 560px;
  perspective-origin: 48% 58%;
  overflow: hidden;
}

.cards {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  pointer-events: auto;
  flex: none;
}

.felt-hand .cg3d {
  --w: min(64vw, 36vh, 280px);
}

.felt-hand .cg3d:nth-child(1) {
  z-index: 2;
  margin-right: -34%;
  --spin: -2.6deg;
}

.felt-hand .cg3d:nth-child(2) {
  z-index: 1;
  --spin: 3.2deg;
}

/* ── подсказка и режим ──────────────────────────────────────────────────── */

.cards__foot {
  grid-area: foot;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px 0;
  min-width: 0;
}

.cards__hint {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  line-height: 1.3;
  color: rgba(169, 162, 148, .75);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cardmode {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  padding: 2px;
  border-radius: var(--radius-pill);
  background: rgba(4, 6, 10, .75);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}

.cardmode button {
  min-height: 28px;
  padding: 6px 11px;
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--ivory-3);
  transition: color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}

.cardmode button[aria-pressed="true"] {
  color: var(--gold-200);
  background: rgba(226, 197, 137, .14);
  box-shadow: inset 0 0 0 1px rgba(226, 197, 137, .4);
}

.cards__note {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: rgba(9, 13, 18, .97);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .09),
    0 16px 40px rgba(0, 0, 0, .6);
  backdrop-filter: blur(12px);
}

.cards__note[hidden] { display: none !important; }

.cards__note-text {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ivory-2);
}

/* Подпись приватности относится к лобби; на экране руки она не нужна —
   там своё место и свои подсказки. */
#screen-hand .privacy-note {
  display: none;
}

/* ============================================================================
   7. ПАНЕЛЬ ДЕЙСТВИЙ
   ========================================================================== */

.actions-wrap {
  grid-area: actions;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px);
}

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.actions[hidden] { display: none !important; }

.act {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 52px;
  padding: 0 8px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.15;
  text-align: center;
  color: var(--ivory);
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .05), transparent 60%),
    var(--ink-3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    inset 0 0 0 1px rgba(255, 255, 255, .09),
    0 6px 16px rgba(0, 0, 0, .3);
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-med) var(--ease-out),
    opacity var(--t-fast) linear,
    filter var(--t-med);
  touch-action: manipulation;
}

.act:active:not(:disabled) { transform: translateY(1px) scale(.99); }

.act--primary {
  color: #14100A;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .40), transparent 52%),
    linear-gradient(168deg, var(--gold-200) 0%, var(--gold-300) 44%, var(--gold-500) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -1px 0 rgba(0, 0, 0, .26),
    0 8px 24px rgba(176, 138, 70, .26);
  font-weight: 700;
}

.act--accent {
  color: var(--gold-200);
  background: rgba(226, 197, 137, .09);
  box-shadow:
    inset 0 0 0 1px rgba(226, 197, 137, .40),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}

.act--danger {
  color: #F0D6D2;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .05), transparent 60%),
    linear-gradient(168deg, #6B2723 0%, #4A1A17 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    inset 0 0 0 1px rgba(196, 85, 75, .42);
}

.act--ghost {
  color: #D9B3AE;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .035), transparent 60%),
    rgba(32, 20, 19, .9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    inset 0 0 0 1px rgba(196, 85, 75, .26);
}

.act:disabled {
  opacity: .3;
  color: var(--ivory-3);
  background: rgba(11, 15, 20, .8);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  filter: saturate(.3);
}

.actions__note {
  grid-column: 1 / -1;
  font-size: 11px;
  line-height: 1.4;
  color: var(--warn);
  text-align: center;
}

.actions[data-busy="true"] .act:disabled { opacity: .26; }

/* ── слайдер ────────────────────────────────────────────────────────────── */

.sizing {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 14px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .03), transparent 50%),
    rgba(11, 15, 20, .94);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    0 12px 34px rgba(0, 0, 0, .5);
}

.sizing[hidden] { display: none !important; }

.sizing__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sizing__title {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ivory-3);
}

.sizing__value {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--gold-200);
  font-variant-numeric: tabular-nums;
}

.sizing__range {
  width: 100%;
  height: 32px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.sizing__range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
  box-shadow: 0 0 12px rgba(226, 197, 137, .35);
}

.sizing__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -11px;
  border-radius: 50%;
  background: linear-gradient(to bottom, var(--gold-200), var(--gold-500));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 2px 10px rgba(0, 0, 0, .6);
}

.sizing__range::-moz-range-track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300));
}

.sizing__range::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(to bottom, var(--gold-200), var(--gold-500));
}

.sizing__presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.preset {
  min-height: 40px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--ivory-2);
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
  transition: color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}

.preset:hover:not(:disabled) {
  color: var(--gold-200);
  background: rgba(226, 197, 137, .1);
  box-shadow: inset 0 0 0 1px rgba(226, 197, 137, .38);
}

.preset:disabled { opacity: .35; }

.sizing__actions {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 7px;
}

/* ============================================================================
   8. ИТОГ РАЗДАЧИ
   ========================================================================== */

.settled {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) 16px calc(env(safe-area-inset-bottom, 0px) + 18px);
  overflow-y: auto;
}

.settled[hidden] { display: none !important; }

.settled__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  padding: 22px 18px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(226, 197, 137, .1), transparent 62%),
    rgba(11, 15, 20, .9);
  box-shadow:
    inset 0 0 0 1px rgba(226, 197, 137, .22),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  text-align: center;
}

.settled__delta {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.settled__delta[data-sign="plus"] {
  color: var(--gold-200);
  text-shadow: 0 0 34px rgba(226, 197, 137, .35);
}

.settled__delta[data-sign="minus"] { color: #D89A94; }

.settled__sub {
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ivory-3);
}

.settled__cards {
  display: flex;
  align-items: center;
  gap: 6px;
  perspective: 800px;
}

.settled__cards .cg3d { transform: rotateX(18deg); }

.settled__note {
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(169, 162, 148, .75);
  text-align: center;
}

.settled__rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255, 255, 255, .05);
}

/* ============================================================================
   9. НЕТ СТОЛА
   ========================================================================== */

.nostate__code {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--gold-200);
}

.nostate__actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  max-width: 320px;
}

/* ============================================================================
   10. ТОСТ
   ========================================================================== */

.banner {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 128px);
  transform: translateX(-50%) translateY(10px);
  z-index: var(--z-modal);
  max-width: min(88vw, 360px);
  padding: 11px 15px;
  border-radius: var(--radius);
  background: rgba(11, 15, 20, .97);
  color: var(--ivory);
  font-size: 12.5px;
  line-height: 1.4;
  text-align: center;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .1),
    0 16px 40px rgba(0, 0, 0, .65);
  backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}

.banner[hidden] { display: none !important; }

.banner[data-show="true"] {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.banner[data-tone="bad"] {
  color: #F3D9D5;
  box-shadow:
    inset 0 0 0 1px rgba(196, 85, 75, .5),
    0 16px 40px rgba(0, 0, 0, .65);
}

.banner[data-tone="ok"] {
  color: #D8F0E7;
  box-shadow:
    inset 0 0 0 1px rgba(79, 191, 160, .45),
    0 16px 40px rgba(0, 0, 0, .65);
}

/* ============================================================================
   11. АДАПТАЦИЯ
   ========================================================================== */

@media (max-height: 740px) {
  .hud__status { padding: 7px 11px 8px; margin-top: 6px; }
  .hud__status-text { font-size: 15.5px; }
  .stat { padding: 6px 4px 7px; }
  .stat__v { font-size: 17px; }
  .act { min-height: 48px; font-size: 13.5px; }
  .cards__hint { display: none; }
  .board .cg3d { --w: 30px; }
}

@media (max-height: 660px) {
  .hud__top { display: none; }
  .hud__status-sub { display: none; }
  .act { min-height: 44px; }
}

@media (min-width: 600px) {
  .app { max-width: 640px; }
  .seats { grid-template-columns: repeat(5, 1fr); }
  .felt-hand .cg3d { --w: min(44vw, 40vh, 320px); }
  .stat__v { font-size: 22px; }
}

@media (min-aspect-ratio: 3/4) and (max-height: 800px) {
  .felt-hand .cg3d { --w: min(46vw, 32vh, 220px); }
}

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

/* ============================================================================
   ПРАВКИ ПОСЛЕ ПЕРЕСБОРКИ
   ========================================================================== */

/* Памятка о режимах — только по кнопке «?», не поверх карт */
.cards__note {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 88px);
  z-index: 60;
}

/* Карты должны занимать сукно целиком, без пустоты сверху */
.felt-hand .felt-scene {
  align-items: center;
  justify-content: center;
  padding: 0 0 2%;
}

/* размер карт: подгоняем под фактическую высоту сукна */
.felt-hand .cg3d {
  --w: min(62vw, 30vh, 250px);
}

/* борд: карты лежат ровно, без обрезки */
.board {
  align-items: center;
  min-height: 44px;
}

.board .cg3d {
  --w: 30px;
  --tilt: 64deg;
  flex: none;
}

/* подпись борда не должна сжимать карты */
.board-row__note {
  flex: 1;
  min-width: 0;
}

/* подсказка под сукном — одна строка, не мешает */
.cards__hint {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* полоса таймера — сразу под статусом, не отдельным блоком */
.timerbar {
  margin: 6px 12px 0;
}

/* ============================================================================
   КАРТЫ ЗАНИМАЮТ СУКНО
   ----------------------------------------------------------------------------
   Карта лежит почти плашмя (наклон 73° к плоскости экрана), поэтому её
   видимая высота мала: настоящая высота 1.4·W умножается на cos(73°) ≈ 0.29.
   Чтобы карты читались как главный объект, увеличиваем их в ширину — вплоть
   до выхода за края экрана (это нормально: так выглядит близкий объект).
   ========================================================================== */

.felt-hand .cg3d {
  --w: min(112vw, 58vh, 460px);
}

/* стопка: перекрытие меньше, чтобы обе карты были видны */
.felt-hand .cg3d:nth-child(1) {
  margin-right: -46%;
}

/* сукно: убираем лишний вертикальный запас, карты сами его заполнят */
.felt-hand .felt-scene {
  padding: 0;
  align-items: center;
  perspective: 620px;
  perspective-origin: 50% 74%;
}

/* ============================================================================
   ГЕОМЕТРИЯ СЦЕНЫ: карты в центре сукна
   ----------------------------------------------------------------------------
   Карта с наклоном 73° «съезжает» вниз: transform-origin внизу, и при
   повороте её видимая часть уходит под нижнюю границу. Компенсируем
   подъёмом по Y и задаём точку обзора так, чтобы стопка читалась лежащей
   на сукне перед игроком.
   ========================================================================== */

.felt-hand .felt-scene {
  perspective-origin: 50% 62%;
  padding-bottom: 0;
}

/* карты поднимаем вверх, чтобы стопка была по центру сукна */
.felt-hand .cards {
  transform: translateY(-22%);
}

/* размер: карта должна занимать около 60% ширины сукна */
.felt-hand .cg3d {
  --w: min(76vw, 40vh, 320px);
}

/* перекрытие стопки */
.felt-hand .cg3d:nth-child(1) {
  margin-right: -42%;
}

/* на высоких экранах — крупнее */
@media (min-height: 800px) {
  .felt-hand .cg3d { --w: min(82vw, 42vh, 350px); }
  .felt-hand .cards { transform: translateY(-20%); }
}

/* ============================================================================
   КОРЕНЬ ПРОБЛЕМЫ С ОБРЕЗКОЙ
   ----------------------------------------------------------------------------
   У .cg3d стоит transform-origin: 50% 100% и rotateX(73deg). При повороте
   вокруг НИЖНЕЙ кромки верх карты уходит вверх и вглубь, а низ остаётся
   на месте — но визуально вся фигура смещается вниз, за границу сукна.

   Правильно: вращать вокруг ЦЕНТРА карты (50% 50%). Тогда наклон симметричен,
   и карта остаётся там, где стоит в потоке.
   ========================================================================== */

.cg3d {
  transform-origin: 50% 50%;
}

/* карты в руке: возвращаем в центр сукна без ручного сдвига */
.felt-hand .cards {
  transform: none;
}

/* размер: заметный, но целиком в пределах сукна */
.felt-hand .cg3d {
  --w: min(70vw, 30vh, 300px);
}

/* стопка */
.felt-hand .cg3d:nth-child(1) {
  margin-right: -38%;
}

/* сцена центрирует стопку */
.felt-hand .felt-scene {
  align-items: center;
  justify-content: center;
  perspective-origin: 50% 50%;
}

@media (min-height: 800px) {
  .felt-hand .cg3d { --w: min(74vw, 32vh, 320px); }
}

/* ============================================================================
   РАЗМЕР КАРТ ОТ ВЫСОТЫ СУКНА
   ----------------------------------------------------------------------------
   Карта при наклоне 73° занимает по экрану ≈ 0.30 от своей ширины
   (cos 73° ≈ 0.29). Значит, чтобы карта влезла в сукно высотой H,
   её ширина не должна превышать H / 0.30 ≈ 3.3·H.
   Сукно занимает ~50vh, отсюда ширина ≈ 1.65·vh, но с запасом на подгиб
   и стопку берём 1.15·vh — карты крупные, но целиком в сукне.
   ========================================================================== */

.felt-hand .cg3d {
  --w: min(84vw, 112vh, 400px);
}

/* ограничение по высоте самой сцены: карта не может быть выше сукна */
.felt-hand .felt-scene {
  overflow: hidden;
}

/* стопка: вторая карта видна справа */
.felt-hand .cg3d:nth-child(1) {
  margin-right: -34%;
}

/* на невысоких экранах — меньше */
@media (max-height: 780px) {
  .felt-hand .cg3d { --w: min(80vw, 96vh, 340px); }
}

/* ============================================================================
   РАЗМЕР КАРТ: ширина главнее высоты
   ----------------------------------------------------------------------------
   Ключевой факт: rotateX(73deg) сжимает только ВЫСОТУ карты (×0.29).
   Ширина остаётся полной. Значит «крупнее» = шире, вплоть до выхода за края
   экрана — владелец это прямо разрешил.

   При ширине 130vw на экране 390px карта занимает 507px по ширине и
   ~206px по высоте: она читается как реальный предмет перед игроком,
   а вокруг остаётся видимое сукно — как и требуется.
   ========================================================================== */

.felt-hand .cg3d {
  --w: min(128vw, 74vh, 540px);
}

/* стопка: вторая карта выглядывает справа-снизу */
.felt-hand .cg3d:nth-child(1) {
  margin-right: -30%;
}

/* сукно обрезает выходящие края — это нормально и нужно */
.felt-hand .felt-scene {
  overflow: hidden;
  align-items: center;
  justify-content: center;
}

/* на невысоких экранах чуть меньше, чтобы подгиб читался */
@media (max-height: 760px) {
  .felt-hand .cg3d { --w: min(120vw, 66vh, 460px); }
}

/* ============================================================================
   ПЕРСПЕКТИВА: почему карта раздувалась
   ----------------------------------------------------------------------------
   При rotateX(θ) вокруг центра карты точка на расстоянии y от центра уходит
   по глубине на z = y·sin θ. Проекция масштабирует её как P/(P−z).

   При P = 560px и карте высотой 480px верхний край уходит на z = −229px,
   нижний — на z = +229px. Масштаб нижнего края: 560/(560−229) = 1.56 —
   карта расползалась почти вдвое и обрезалась сукном.

   Лечится увеличением P: при P = 2200px масштабы краёв 0.90 и 1.12 —
   сокращение по высоте остаётся честным (cos 73° ≈ 0.29), а «раздувания» нет.
   ========================================================================== */

.felt-hand .felt-scene {
  perspective: 2200px;
  perspective-origin: 50% 100%;
  align-items: flex-end;
  padding-bottom: 10%;
}

/* карта: почти на всю ширину экрана, край может уходить за границу */
.felt-hand .cg3d {
  --w: min(92vw, 62vh, 420px);
}

/* стопка: вторая карта выглядывает справа */
.felt-hand .cg3d:nth-child(1) {
  margin-right: -28%;
}

/* борд тоже с нормальной перспективой */
.board {
  perspective: 900px;
  perspective-origin: 50% 100%;
}

/* ============================================================================
   ФИНАЛЬНАЯ ГЕОМЕТРИЯ КАРТ В РУКЕ
   ----------------------------------------------------------------------------
   Расчётом подобраны параметры, при которых проекция карты совпадает с тем,
   что видит человек за столом: камера низко над сукном, карта почти плашмя,
   но её всё равно видно целиком.

   Проверено: при --w 380px, наклоне 64° и перспективе 2000px карта проецируется
   как 381×148 px — соотношение 2.6:1, ровно как на фотографии живого стола
   (карта 63×88 мм при взгляде под 17–20° даёт ≈ 2.4:1).

   Перспектива 2000px (а не 560px) убирает «раздувание» ближнего края:
   при короткой перспективе низ карты увеличивался в 1.5 раза и обрезался.
   ========================================================================== */

#screen-hand .cards-area {
  height: clamp(260px, 44vh, 380px);
}

.felt-hand .felt-scene {
  perspective: 2000px;
  perspective-origin: 50% 50%;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.felt-hand .cg3d {
  /* Карта почти плашмя: 74° к плоскости экрана = 16° к плоскости стола.
     При таком угле карта 63×88 мм проецируется как 2.6:1 — ровно как на
     фотографии живого стола. Ширина — почти вся ширина телефона, чтобы
     карта читалась крупно и при этом были видны оба угла для жеста. */
  --w: min(72vw, 300px);
  --tilt: 74deg;
  transform-origin: 50% 50%;
}

/* стопка: вторая карта выглядывает справа-снизу */
.felt-hand .cg3d:nth-child(1) {
  margin-right: -26%;
}

/* карты не должны вылезать за сукно по вертикали */
.felt-hand {
  overflow: hidden;
}

/* борд — та же оптика, но мелко */
.board {
  perspective: 900px;
  perspective-origin: 50% 50%;
}

.board .cg3d {
  --w: 32px;
  --tilt: 62deg;
}

/* ============================================================================
   ПЕРСПЕКТИВА 4000px: проекция почти равна реальному размеру
   ----------------------------------------------------------------------------
   При P = 2000px и карте 300px ближний край увеличивался на 23% и вылезал
   за сукно. На P = 4000px искажение ~11%, карта остаётся в границах, а
   наклон по-прежнему читается (сокращение по высоте задаётся cos θ, а не P).
   ========================================================================== */

.felt-hand .felt-scene {
  perspective: 4000px;
  perspective-origin: 50% 50%;
}

.felt-hand .cg3d {
  --w: min(78vw, 310px);
  --tilt: 74deg;
}

/* стопка: вторая карта выглядывает, но не выходит за сукно */
.felt-hand .cg3d:nth-child(1) {
  margin-right: -26%;
}

/* карты центрируются как единая стопка */
.felt-hand .cards {
  justify-content: center;
  align-items: center;
}

/* ============================================================================
   СТОПКА КАРМАННЫХ КАРТ: сильное перекрытие, как в жизни
   ----------------------------------------------------------------------------
   В живом покере две карманные карты лежат одна на другой так, что видна
   лишь часть второй. Это позволяет сделать карты крупными, не выходя за
   ширину экрана:

     ширина стопки = W + W·(1 − перекрытие)

   При W = 280px и перекрытии 60% стопка = 280 + 112 = 392px — ровно ширина
   телефона. Карта при этом крупная, а уголок для подъёма остаётся на экране.
   ========================================================================== */

.felt-hand .cg3d {
  --w: min(84vw, 330px);
  --tilt: 74deg;
}

.felt-hand .cg3d:nth-child(1) {
  margin-right: -52%;
}

/* вторая карта чуть повёрнута — стопка лежит естественно */
.felt-hand .cg3d:nth-child(2) {
  --spin: 2.6deg;
}

/* сукно занимает всю отведённую строку — без пустоты снизу */
#screen-hand .cards-area {
  height: 100%;
  min-height: 0;
}

/* ============================================================================
   СТОПКА ПО ЦЕНТРУ СУКНА
   ----------------------------------------------------------------------------
   Сцена выравнивала карты по низу, и стопка прижималась к нижней границе.
   Центрируем по вертикали — карта лежит «перед игроком», вокруг видно сукно.
   ========================================================================== */

.felt-hand .felt-scene {
  align-items: center;
  padding: 0;
}

/* сдвиг вверх: компенсация наклона (нижний край уходит ближе к камере) */
.felt-hand .cards {
  transform: translateY(-4%);
}

/* карта крупная, но целиком в сукне */
.felt-hand .cg3d {
  --w: min(80vw, 315px);
  --tilt: 74deg;
}

.felt-hand .cg3d:nth-child(1) {
  margin-right: -50%;
}

/* ============================================================================
   ЭКРАН ИТОГА РАЗДАЧИ
   ----------------------------------------------------------------------------
   Дефекты:
     • строки выплат (<li class="settled__row">) выводились маркерами списка
       и шли сплошной строкой: «Вы (вы)Две пары+46»;
     • сукно с картами не показывалось — блок .cards-area остался в сетке
       экрана руки, но на итоге карты выводятся отдельным блоком;
     • кнопки действий внизу были видны и неактивны — на итоге их быть не
       должно, это другой экран.
   ========================================================================== */

/* Итог — самостоятельный экран поверх, а не часть сетки руки */
#screen-hand .settled {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0;
  padding: 0;
  overflow-y: auto;
  background: linear-gradient(to bottom, rgba(4, 6, 10, .72) 0%, rgba(4, 6, 10, .94) 42%);
  backdrop-filter: blur(3px);
}

#screen-hand .settled[hidden] { display: none !important; }

/* панель итога — лист поверх стола */
.settled__panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin: 0 12px 12px;
  padding: 20px 18px 18px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 56% at 50% 0%, rgba(226, 197, 137, .12), transparent 62%),
    rgba(10, 14, 19, .97);
  box-shadow:
    inset 0 0 0 1px rgba(226, 197, 137, .26),
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 -8px 40px rgba(0, 0, 0, .6);
  text-align: center;
  animation: settled-in 380ms var(--ease-out) both;
}

@keyframes settled-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.settled__panel .eyebrow {
  font-size: 9px;
  letter-spacing: .22em;
  color: var(--ivory-3);
}

.settled__delta {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.settled__delta[data-sign="plus"] {
  color: var(--gold-200);
  text-shadow: 0 0 32px rgba(226, 197, 137, .3);
}

.settled__delta[data-sign="minus"] { color: #D89A94; }
.settled__delta[data-sign="zero"] { color: var(--ivory-2); }

.settled__sub {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ivory-3);
}

/* ── строки выплат ──────────────────────────────────────────────────────── */

.settled__rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255, 255, 255, .055);
  text-align: left;
}

.settled__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 11px;
  background: rgba(7, 10, 14, .92);
  font-size: 12px;
  line-height: 1.35;
}

.settled__row.is-mine {
  background: rgba(226, 197, 137, .08);
}

.settled__who {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--ivory);
}

.settled__combo {
  flex: 0 0 auto;
  font-size: 10.5px;
  color: var(--ivory-3);
  white-space: nowrap;
}

.settled__amount {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--gold-200);
  white-space: nowrap;
}

.settled__row--pot {
  background: rgba(7, 10, 14, .96);
  font-size: 11px;
  color: var(--ivory-3);
}

.settled__row--pot .settled__who { color: var(--ivory-2); font-weight: 500; }
.settled__row--pot .settled__amount { color: var(--ivory-2); font-weight: 600; }

/* ── карты в итоге ──────────────────────────────────────────────────────── */

.settled__cards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  perspective: 1200px;
}

.settled__cards-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ivory-3);
}

.settled__cards .cg3d {
  --w: 42px;
  --tilt: 68deg;
}

.settled__cards .cg3d__grab,
.settled__cards .cg3d__peel,
.settled__cards .cg3d__fold-shadow { display: none; }

.settled__cards .cg3d__back { display: none; }
.settled__cards .cg3d__face-full { opacity: 1; }

.settled__note {
  font-size: 11px;
  line-height: 1.45;
  color: rgba(169, 162, 148, .72);
}

/* борд в итоге — мелкий, без подписи */
.board--settled {
  justify-content: center;
  perspective: 1200px;
}

.board--settled .cg3d { --w: 40px; --tilt: 68deg; }

/* ── кнопки на итоге: свои, крупные ─────────────────────────────────────── */

.settled__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}

/* панель действий руки на итоге скрыта */
#screen-hand.is-settled > .actions-wrap,
#screen-hand.is-settled > .cards-area,
#screen-hand.is-settled > .cards__foot,
#screen-hand.is-settled > .board-row { visibility: hidden; }

/* ============================================================================
   КАРТЫ КРУПНО: край уходит за экран
   ----------------------------------------------------------------------------
   Владелец просил карты намного крупнее, вплоть до выхода за границу экрана.
   При наклоне 74° карта проецируется как 1:0.28, поэтому «крупнее» означает
   ШИРЕ, а не выше.

   Ставим ширину 142vw: на экране 390px это 554px — карта шире телефона,
   оба боковых края уходят за границу. Видимая высота ≈ 158px, что при
   высоте сукна ~330px даёт естественную пропорцию «карта лежит на столе».
   ========================================================================== */

.felt-hand .cg3d {
  --w: 142vw;
  --tilt: 74deg;
}

/* перекрытие стопки: вторая карта выглядывает заметно */
.felt-hand .cg3d:nth-child(1) {
  margin-right: -46%;
}

/* сукно: компактнее по высоте — карте не нужно пустое поле */
#screen-hand .cards-area {
  height: clamp(250px, 38vh, 340px);
}

/* стопка по центру */
.felt-hand .cards {
  transform: none;
  justify-content: center;
}

/* планшет: ограничиваем, иначе карта станет нелепо широкой */
@media (min-width: 600px) {
  .felt-hand .cg3d { --w: min(96vw, 560px); }
}

/* ============================================================================
   СУКНО ЗАПОЛНЯЕТ СВОЮ ОБЛАСТЬ
   ----------------------------------------------------------------------------
   .cards-area имел фиксированную высоту 320px, а строка сетки — 427px:
   снизу оставалась чёрная полоса. Растягиваем сукно на всю строку.
   ========================================================================== */

#screen-hand .cards-area {
  height: 100%;
  min-height: 0;
}

/* карта: чуть шире экрана, стопка сдвинута влево — правый уголок для жеста
   остаётся на экране, левый край уходит за границу (это нормально) */
.felt-hand .cg3d {
  --w: 104vw;
  --tilt: 70deg;
}

.felt-hand .cards {
  transform: translateX(-5%);
}

/* стопка: вторая карта выглядывает справа */
.felt-hand .cg3d:nth-child(1) {
  margin-right: -40%;
}

/* планшет */
@media (min-width: 600px) {
  .felt-hand .cg3d { --w: min(92vw, 520px); }
  .felt-hand .cards { transform: none; }
}

/* ============================================================================
   СДВИГ СТОПКИ: правый уголок обязан быть на экране
   ----------------------------------------------------------------------------
   Карта шире экрана, поэтому левый край уходит за границу — это нормально.
   Но ПРАВЫЙ НИЖНИЙ уголок должен остаться видимым: именно за него тянут,
   чтобы поднять угол и увидеть номинал. Сдвигаем стопку влево так, чтобы
   правый край второй карты был в пределах экрана с запасом 10px.
   ========================================================================== */

.felt-hand .cards {
  transform: translateX(-10%);
}

/* на планшете карта уже, сдвиг не нужен */
@media (min-width: 600px) {
  .felt-hand .cards { transform: none; }
}