/* ═══ Bluff (دروغگو) — felt table, seats round it, face-down pile, hand underneath ═══════════════════════════ */

.board-wrapper:has(.bl-wrap) { align-items: stretch; }
.bl-wrap { --cw: 62px; --ch: 90px; width: 100%; max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; }

.bl-table { position: relative; width: 100%; height: min(52vh, 470px); min-height: 330px; }
.bl-felt { position: absolute; inset: 9% 6%; border-radius: 999px;
  background: radial-gradient(ellipse at 50% 42%, var(--felt-1, #2e8f66) 0%, var(--felt-2, #1d6c4b) 48%, var(--felt-3, #0f4530) 100%);
  box-shadow: 0 0 0 10px var(--rail-1, #1a2030), 0 0 0 12px var(--rail-2, #2c3550), inset 0 14px 60px rgba(0, 0, 0, 0.45), 0 26px 50px -14px rgba(0, 0, 0, 0.6); }
.bl-felt::before { content: ''; position: absolute; inset: 12% 9%; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.07); }
.bl-seats { position: absolute; inset: 0; z-index: 3; pointer-events: none; } /* seats are display only: nothing under them may lose a click */
.bl-seat { position: absolute; transform: translate(-50%, -50%); min-width: 92px; max-width: 128px; padding: 6px 10px 5px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.12);
  border-inline-start: 4px solid var(--seat-colour, #888); background: rgba(10, 14, 22, 0.92); box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.65); text-align: center; transition: box-shadow 180ms ease; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bl-seat::after { content: ''; position: absolute; inset: -3px; border-radius: 17px; border: 2px solid #ffd54f; box-shadow: 0 0 18px rgba(255, 213, 79, 0.55); opacity: 0; transition: opacity 180ms ease-out; pointer-events: none; }
.bl-seat-active::after { opacity: 1; }
.bl-seat-lastplay { box-shadow: 0 0 0 2px rgba(91, 141, 238, 0.6), 0 8px 18px -6px rgba(0, 0, 0, 0.65); }
.bl-seat-loser { box-shadow: 0 0 0 2px #ef5350, 0 8px 18px -6px rgba(0, 0, 0, 0.65); }
.bl-seat-name { font-weight: 700; font-size: 12.5px; max-width: 108px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.bl-seat-count { font-size: 11px; color: #a3aec8; display: inline-block; }
.bl-timer { font-size: 12px; font-weight: 800; color: #ffd54f; min-height: 0; }
.bl-timer:empty { display: none; }

.bl-stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.bl-pile { position: relative; width: var(--cw); height: var(--ch); }
.bl-pile .pcard { position: absolute; inset: 0; transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--r, 0deg)); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.bl-pile-empty { border: 2px dashed rgba(255, 255, 255, 0.28); border-radius: 8px; }
.bl-pile-count { position: absolute; bottom: -9px; inset-inline-end: -9px; background: #000; color: #fff; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 700; z-index: 5; }
.bl-claim { min-height: 24px; }
.bl-chip { background: rgba(10, 14, 22, 0.88); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; white-space: nowrap; direction: auto; }
.bl-chip-claim { color: #ffd54f; font-weight: 800; }
.bl-next { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: rgba(255, 255, 255, 0.8); }
.bl-next-rank { background: #fff; color: #101521; font-weight: 900; font-size: 15px; min-width: 28px; text-align: center; padding: 1px 7px; border-radius: 8px; }
.bl-next:empty { display: none; }

.bl-reveal { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; width: min(86%, 440px); padding: 12px 14px; border-radius: 18px; background: rgba(10, 14, 22, 0.96); border: 2px solid; text-align: center; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6); color: #fff; animation: bl-pop 240ms cubic-bezier(0.23, 1, 0.32, 1); }
.bl-reveal[hidden] { display: none; }
.bl-lie { border-color: #ef5350; }
.bl-honest { border-color: #66bb6a; }
.bl-reveal-head { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 20px; }
.bl-lie .bl-reveal-head { color: #ff8a80; }
.bl-honest .bl-reveal-head { color: #a5d6a7; }
.bl-reveal-sub { font-size: 12.5px; color: #c4cce0; margin-top: 2px; direction: auto; }
.bl-reveal-cards { display: flex; justify-content: center; gap: 6px; margin: 10px 0 6px; flex-wrap: wrap; }
.bl-reveal-cards .pcard { --card-w: 52px; --card-h: 76px; }
.bl-reveal-cards .bl-wrong { box-shadow: 0 0 0 3px #ef5350, 0 4px 10px rgba(0, 0, 0, 0.5); }
.bl-reveal-took { font-weight: 700; font-size: 13.5px; direction: auto; }
@keyframes bl-pop { from { opacity: 0; transform: translate(-50%, -46%) scale(0.92); } }

.bl-banner { font-weight: 700; min-height: 22px; text-align: center; direction: auto; padding: 0 8px; }
.bl-prompt { width: 100%; min-height: 0; }
.bl-row { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; padding: 0 8px; }
.bl-row .btn { min-height: 42px; display: inline-flex; align-items: center; gap: 6px; }
.bl-callbtn { font-weight: 800; letter-spacing: 0.2px; }
.btn.btn-danger { background: #c62828; border-color: #c62828; color: #fff; }
.btn.btn-danger:hover:not(:disabled) { background: #d32f2f; }

.bl-handzone { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.bl-hand { --bl-gap: 6px; display: flex; justify-content: center; width: 100%; padding: 18px 6px 4px; min-height: calc(var(--ch) + 28px); }
.bl-hand .pcard { --card-w: var(--cw); --card-h: var(--ch); flex: 0 0 auto; transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 140ms ease-out; touch-action: manipulation; }
.bl-hand .pcard + .pcard { margin-inline-start: var(--bl-gap); }
.bl-hand .bl-pickable { cursor: pointer; }
.bl-hand .bl-picked { transform: translateY(-16px); box-shadow: 0 0 0 3px #ffd54f, 0 8px 14px rgba(0, 0, 0, 0.5); }
@media (hover: hover) and (pointer: fine) { .bl-hand .bl-pickable:hover:not(.bl-picked) { transform: translateY(-8px); } }
.bl-hand-count { font-size: 11.5px; color: var(--nx-text-2, #a3aec8); margin-top: 2px; }

@media (max-width: 560px) {
  .bl-wrap { --cw: 50px; --ch: 72px; gap: 6px; }
  .bl-table { height: min(50vh, 400px); min-height: 330px; }
  .bl-felt { inset: 10% 3%; }
  .bl-seat { min-width: 66px; max-width: 92px; padding: 4px 6px; }
  .bl-seat-name { font-size: 11px; max-width: 80px; }
  .bl-seat-count { font-size: 10px; }
  .bl-reveal { width: min(82%, 300px); padding: 8px 10px; }
  .bl-reveal-head { font-size: 17px; }
  .bl-reveal-sub { font-size: 11px; }
  .bl-reveal-cards { margin: 6px 0 4px; gap: 4px; }
  .bl-reveal-cards .pcard { --card-w: 38px; --card-h: 56px; }
  .bl-reveal-took { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .bl-reveal { animation: none; } }