/* «Ресерч» — плашки на столе реплеера и попап статов поля (по макету field-research.html).
   Стол — холст 2600×1560 со scale(), поэтому кегли на сукне крупные (≈30px). */

/* --- палитра действий (как в браузере решений MyPostsolver) --- */
#tableWrap, #fsOverlay {
  --act-check: #5E7176; --act-fold: #3A4140; --act-call: #2E7F6B; --act-raise: #C4614C;
  --act-bet-1: #EFE0B0; --act-bet-2: #E0C67F; --act-bet-3: #D4A24B; --act-bet-4: #C2842F; --act-bet-5: #AE6A22; --act-bet-6: #96521A;
}

/* --- плашки слева от борда, на уровне карт: борд 5×125px + зазоры = 649px по центру (975..1625px),
   ставка левого места — до ~640px; колонка плашек занимает ~700..945px --- */
.fs-pills { position: absolute; right: calc(50% + 355px); bottom: 757px; z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; white-space: nowrap; }
.fs-pill {
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 24px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: linear-gradient(180deg, rgba(20,28,24,.96), rgba(8,12,10,.96));
  border: 2px solid rgba(212,162,75,.55); box-shadow: 0 8px 22px rgba(0,0,0,.55);
  font: 700 30px/1 var(--font-body); color: var(--fg-0); letter-spacing: -.01em;
  transition: border-color .12s ease, transform .12s ease;
}
.fs-pill:hover, .fs-pill:focus-visible { border-color: var(--gold-400); transform: translateY(-2px); outline: none; }
.fs-pill .fs-pill-k { color: var(--gold-300); text-transform: uppercase; font-size: 28px; letter-spacing: .08em; }
.fs-pill .fs-pill-sep { color: var(--fg-3); }
.fs-pill .fs-pill-n { color: var(--fg-2); font-weight: 600; font-size: 27px; font-variant-numeric: tabular-nums; }
.fs-pill.muted { border-color: rgba(255,255,255,.14); color: var(--fg-2); cursor: default; }
.fs-pill.muted .fs-pill-k { color: var(--fg-3); }
.fs-pill-solver { text-decoration: none; border-color: rgba(46,132,88,.7); }
.fs-pill-solver:hover { border-color: var(--felt-400, #2E8458); }
.fs-pill-solver .fs-pill-k { color: var(--felt-400, #2E8458); }
.fs-pill-solver .fs-pill-arrow { color: var(--felt-400, #2E8458); font-size: 26px; margin-left: 4px; }
#tableWrap.fs-board-link .rp-board { cursor: pointer; }
#tableWrap.fs-board-link .rp-board:hover > * { filter: brightness(1.08); }

/* --- попап: каркас --- */
.fs-modal { width: min(1200px, calc(100vw - 32px)); }
.fs-head-wrap { align-items: flex-start; }
.fs-head { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fs-head > b { font: 800 15px/1.2 var(--font-display, var(--font-body)); color: var(--fg-0); }
.fs-hd { display: flex; align-items: center; gap: 12px; }
.fs-hd > b { font: 700 15px/1.2 var(--font-body); color: var(--fg-0); }
.fs-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 500 11px/1.4 var(--font-body); color: var(--fg-2); }
.fs-sub b { color: var(--fg-0); font-weight: 700; }
.fs-sub .fs-dot { color: var(--fg-3); }
.fs-warn { flex-basis: 100%; color: var(--warn, #F59E0B); font-weight: 600; }
.fs-cards { display: inline-flex; gap: 3px; vertical-align: middle; }
.fs-card { width: 26px; height: 36px; border-radius: 5px; background: #F4F1E8; color: #1A1D1A; display: grid; place-items: center; font: 800 14px/1 var(--font-mono); box-shadow: 0 1px 0 rgba(0,0,0,.4); }
.fs-card.s-h, .fs-card.s-d { color: #C0392B; }
.fs-card.dim { opacity: .35; }

.fs-body { display: flex; flex-direction: column; gap: 12px; }
.fs-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fs-chips .fs-lbl { color: var(--fg-3); font: 600 9px/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .08em; margin-right: 4px; }
.fs-chip { border: 1px solid var(--border, rgba(255,255,255,.14)); background: var(--bg-2, rgba(255,255,255,.04)); color: var(--fg-2); border-radius: 999px; padding: 5px 11px; font: 600 11px/1.2 var(--font-body); cursor: pointer; }
.fs-chip:hover { border-color: rgba(212,162,75,.6); }
.fs-chip.on { background: var(--bg-4, rgba(212,162,75,.18)); border-color: var(--gold-400); color: var(--fg-0); }
.fs-chip.dim { opacity: .45; }
.fs-chip .fs-n { color: var(--fg-3); font-weight: 500; margin-left: 5px; font-variant-numeric: tabular-nums; }

/* --- панели ролей --- */
.fs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .fs-cols { grid-template-columns: 1fr; } }
.fs-pane { border-radius: 11px; border: 1px solid var(--border, rgba(255,255,255,.12)); background: var(--bg-2, rgba(255,255,255,.03)); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fs-pane.fs-me { border-color: rgba(212,162,75,.45); box-shadow: 0 0 0 1px rgba(212,162,75,.18); }
.fs-pane.fs-opp { opacity: .82; }
.fs-ph { display: flex; align-items: baseline; gap: 8px; }
.fs-ph b { font: 700 12.5px/1.2 var(--font-body); color: var(--fg-0); }
.fs-ph .fs-role { font: 600 8px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); margin-left: auto; text-align: right; }
.fs-pane.fs-me .fs-ph .fs-role { color: var(--gold-300); }

.fs-tb { display: grid; grid-template-columns: minmax(0, 1fr) 96px 96px 96px; gap: 0 8px; font-variant-numeric: tabular-nums; align-items: center; }
.fs-tb .fs-h { font: 600 8px/1.2 var(--font-body); color: var(--fg-3); letter-spacing: .07em; text-transform: uppercase; text-align: right; padding-bottom: 3px; }
.fs-tb .fs-h.fs-l { text-align: left; }
.fs-tb .fs-sec { grid-column: 1 / -1; font: 700 10px/1.2 var(--font-body); color: var(--gold-300); letter-spacing: .05em; text-transform: uppercase; padding: 9px 0 4px; border-bottom: 1px solid var(--border, rgba(255,255,255,.12)); }
.fs-tb .fs-nm { font: 600 11px/1.3 var(--font-body); color: var(--fg-0); padding: 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.fs-tb .fs-nm .fs-sw { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.fs-tb .fs-nm.fs-sz { color: var(--fg-2); font-weight: 500; font-size: 10.5px; padding-left: 10px; }
.fs-tb .fs-nm.fs-sz.fs-main { color: var(--fg-0); font-weight: 700; }
.fs-tb .fs-v { display: flex; align-items: baseline; justify-content: flex-end; gap: 5px; padding: 3px 0; }
.fs-tb .fs-v b { font: 700 11px/1 var(--font-mono); color: var(--fg-0); min-width: 30px; text-align: right; }
.fs-tb .fs-v small { font: 500 8.5px/1 var(--font-mono); color: var(--fg-3); min-width: 28px; text-align: left; }
.fs-tb .fs-v.fs-sz b { font-weight: 600; color: var(--fg-2); }
.fs-tb .fs-v.fs-sz.fs-main b { font-weight: 800; color: var(--gold-300); }
.fs-tb .fs-v.fs-main b { font-weight: 800; }
.fs-tb .fs-v.fs-thin b, .fs-thin { color: var(--fg-3) !important; }
.fs-tb .fs-stk { grid-column: 2 / -1; display: grid; grid-template-columns: 96px 96px 96px; gap: 0 8px; padding: 2px 0 5px; }
.fs-bar { height: 8px; border-radius: 3px; overflow: hidden; display: flex; background: var(--bg-4, rgba(255,255,255,.08)); }
.fs-bar i { height: 100%; display: block; }
.fs-bar-empty { opacity: .35; }
.fs-tb .fs-res { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 96px 96px 96px; gap: 0 8px; margin-top: 4px; padding: 6px 8px; border-radius: 7px; background: var(--bg-3, rgba(255,255,255,.05)); border: 1px solid var(--border, rgba(255,255,255,.12)); align-items: center; }
.fs-tb .fs-res.fs-res-me { background: rgba(212,162,75,.08); border-color: rgba(212,162,75,.22); }
.fs-tb .fs-res .fs-res-t { font: 600 9px/1.2 var(--font-body); color: var(--fg-2); letter-spacing: .06em; text-transform: uppercase; }
.fs-tb .fs-res.fs-res-me .fs-res-t { color: var(--gold-300); }
.fs-tb .fs-res .fs-res-t small { display: block; font: 500 8.5px/1.3 var(--font-body); color: var(--fg-3); letter-spacing: 0; text-transform: none; }
.fs-tb .fs-res .fs-res-k { text-align: right; font: 800 12px/1 var(--font-mono); color: var(--fg-0); }
.fs-tb .fs-res .fs-res-k small { display: block; font: 500 8.5px/1.4 var(--font-mono); color: var(--fg-3); }

/* --- продолжения: плитки категорий --- */
.fs-next { border-radius: 11px; border: 1px solid var(--border, rgba(255,255,255,.12)); background: var(--bg-2, rgba(255,255,255,.03)); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.fs-cap { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fs-cap b { font: 700 12px/1.2 var(--font-body); color: var(--fg-0); }
.fs-cap span { font: 600 8px/1.3 var(--font-body); color: var(--fg-3); letter-spacing: .08em; text-transform: uppercase; }
.fs-street { display: grid; grid-template-columns: 64px repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; align-items: stretch; }
.fs-tile-all { background: rgba(212,162,75,.08); }
.fs-sl { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding-right: 4px; border-right: 1px solid var(--border, rgba(255,255,255,.12)); }
.fs-sl b { font: 800 11px/1 var(--font-body); color: var(--fg-0); letter-spacing: .08em; text-transform: uppercase; }
.fs-sl small { font: 500 8.5px/1.3 var(--font-body); color: var(--fg-3); }
.fs-tile { background: var(--bg-3, rgba(255,255,255,.05)); border-radius: 9px; padding: 9px 10px; display: grid; grid-template-rows: 30px 18px auto 14px auto; align-content: start; gap: 6px; border-top: 2px solid var(--c); min-width: 0; }
.fs-tile:hover { background: var(--bg-4, rgba(255,255,255,.08)); }
.fs-tn { display: flex; flex-direction: column; gap: 2px; height: 30px; overflow: hidden; }
.fs-tn b { font: 700 11px/1.2 var(--font-body); color: var(--fg-0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-tn small { font: 500 8.5px/1.2 var(--font-mono); color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-cards-list { display: flex; gap: 2px; flex-wrap: nowrap; height: 18px; overflow: hidden; }
.fs-cards-list em { font: 700 9px/1 var(--font-mono); font-style: normal; padding: 2px 3px; border-radius: 3px; background: var(--bg-2, rgba(0,0,0,.25)); color: var(--fg-1, #d9dfdc); }
.fs-cards-list em.r { color: #E27272; }
.fs-ip { display: flex; flex-direction: column; gap: 3px; }
.fs-ip .fs-lab { display: flex; justify-content: space-between; font: 600 8px/1 var(--font-body); color: var(--gold-300); letter-spacing: .06em; text-transform: uppercase; }
.fs-ip .fs-lab b { font: 800 11px/1 var(--font-mono); color: var(--fg-0); }
.fs-act { padding: 6px 8px; margin: 0 -4px; border-radius: 7px; background: rgba(212,162,75,.10); border: 1px solid rgba(212,162,75,.25); }
.fs-oop-cap { font: 600 7.5px/1.2 var(--font-body); color: #5C8CCB; letter-spacing: .06em; text-transform: uppercase; height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-oop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding-top: 3px; }
.fs-oop span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fs-oop span em { font: 600 7.5px/1.2 var(--font-body); font-style: normal; color: #5C8CCB; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-oop span b { font: 700 11px/1 var(--font-mono); color: var(--fg-0); }
.fs-leg { display: flex; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.fs-leg span { display: inline-flex; align-items: center; gap: 5px; font: 500 9.5px/1 var(--font-body); color: var(--fg-2); }
.fs-leg .fs-leg-t { color: var(--fg-3); }
.fs-leg i { width: 8px; height: 8px; border-radius: 2px; }
.fs-note { color: var(--fg-3); font: 500 11px/1.45 var(--font-body); }
.fs-empty { padding: 20px; color: var(--fg-3); text-align: center; }

/* фолд · колл · рейз по сайзу бета — три числа в одной ячейке */
.fs-tb .fs-v.fs-fcr { gap: 4px; }
.fs-tb .fs-v.fs-fcr i, .fs-fcr-head i { font: 700 10px/1 var(--font-mono); font-style: normal; min-width: 18px; text-align: right; }
.fs-tb .fs-v.fs-fcr i.f, .fs-fcr-head i.f { color: #9AA6A3; }
.fs-tb .fs-v.fs-fcr i.c, .fs-fcr-head i.c { color: #3FBF9A; }
.fs-tb .fs-v.fs-fcr i.r, .fs-fcr-head i.r { color: #E27A64; }
.fs-tb .fs-v.fs-fcr small { min-width: 26px; }
.fs-tb .fs-nm.fs-fcr-head { color: var(--fg-3); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; padding-top: 5px; }
.fs-tb .fs-nm.fs-fcr-head i { font-size: 9px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.fs-tb .fs-v.fs-fcr-head small { color: var(--fg-3); font-size: 8px; text-transform: uppercase; letter-spacing: .05em; }
.fs-help { cursor: help; border-bottom: 1px dotted var(--fg-3); }

/* переключатель типа оппонента */
.fs-types { padding: 6px 8px; border-radius: 9px; background: rgba(212,162,75,.06); border: 1px solid rgba(212,162,75,.2); }
.fs-types-sub { padding: 0 8px 4px 20px; }
.fs-cov { color: var(--fg-3); font: 500 10px/1.3 var(--font-body); margin-left: 8px; }