/* Online Briç Skor — masa yerleşimi */
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700;800&display=swap");

:root {
  --felt: #2a7a45;
  --felt-deep: #1e5c34;
  --header: #e4e7e1;
  --side-bg: #ebeee8;
  --panel: #f3f4f0;
  --panel-2: #e8ebe5;
  --line: #c5cbc2;
  --auction-bg: #eef0eb;
  --auction-red: #9b1c1c;
  --gold-turn: #c9a227;
  --plate: #e8ebe6;
  --plate-me: #e8d48a;
  --ink: #1c2430;
  --muted: #5c6b7a;
  --accent: #1a6b5a;
  --chat-name: #1a7a4c;
  --btn-bg: #f7f8f5;
  --btn-border: #b8c0b4;
  --card-w: 86px;
  --card-h: 122px;
  --card-w-sm: 64px;
  --card-h-sm: 90px;
  --card-w-me: 100px;
  --card-h-me: 142px;
  /* Kendi eli: üst indeks + biraz yüz (mobilde daha fazla) */
  --card-h-me-vis: 88px;
  --card-w-dummy: 84px;
  --card-h-dummy: 118px;
  --card-w-trick: 92px;
  --card-h-trick: 130px;
  /* Jumbo index strip visible in fan */
  --overlap-x: -52px;
  --overlap-y: -50px;
  --overlap-me: -64px;
  --overlap-dummy: -54px;
  --suit-gap: 8px;
  /* Telefon klavyesi açıkken visualViewport ile doldurulur (bkz. play.html) */
  --kb-inset: 0px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body.play-body {
  margin: 0;
  min-height: 100vh;
  font-family: "Source Sans 3", system-ui, sans-serif;
  background: #dfe3db;
  color: var(--ink);
  display: flex;
  flex-direction: column;
}

.play-top {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  padding: 0.4rem 0.85rem;
  background: var(--header);
  border-bottom: 1px solid var(--line);
  gap: 0.5rem;
  box-shadow: 0 1px 0 rgba(255,255,255,0.55) inset;
}
.play-top-left {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.play-top-center {
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}
.play-top .brand-mark {
  color: var(--accent);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.play-top nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.play-top nav a,
.play-top .linkish,
.play-top .btn-fs {
  appearance: none;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--ink);
  border-radius: 7px;
  padding: 0.28rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 1px rgba(0,0,0,0.04);
}
.play-top nav a:hover,
.play-top .linkish:hover,
.play-top .btn-fs:hover {
  background: #fff;
  border-color: #9aa89a;
}
.play-hud {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.hud-chip {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.15rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
}
.hud-chip.muted { color: var(--muted); }
.hud-chip.hud-timer { color: #8a5a00; background: #f5edd8; border-color: #e0d0a8; }
.hud-chip {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  white-space: nowrap;
}
.hud-chip.muted {
  background: var(--panel-2);
  border-color: var(--line);
  color: var(--muted);
  font-weight: 600;
}
.hud-chip.hud-timer {
  background: #f5edd8;
  border-color: #e0d0a8;
  color: #8a5a00;
  font-variant-numeric: tabular-nums;
}
.hud-chip.hud-timer.warn {
  background: #fde8e8;
  border-color: #e8a0a0;
  color: #8b2020;
  animation: hudPulse 1s ease-in-out infinite;
}
.hud-chip.hud-timer.expired {
  background: #f5d0d0;
  border-color: #d08080;
  color: #7a1515;
}
@keyframes hudPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}
.hud-chip[hidden] { display: none !important; }
.play-top .btn-fs {
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
  margin-right: 0.15rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--btn-border);
  border-radius: 8px;
  background: var(--btn-bg);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  z-index: 9465;
}
.play-top .btn-fs[hidden] { display: none !important; }

.fs-gate {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  background: rgba(8, 14, 24, 0.72);
  backdrop-filter: blur(2px);
}
.fs-gate[hidden] { display: none !important; }
.fs-gate-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  width: min(92vw, 22rem);
}
.fs-gate-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  padding: 1.1rem 1.25rem;
  border: none;
  border-radius: 14px;
  background: #f0c14b;
  color: #111;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.fs-gate-btn strong {
  font-size: 1.25rem;
  font-weight: 800;
}
.fs-gate-btn span {
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.9;
}
.fs-gate-skip {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1px solid #94a3b8;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

/* iOS: Ana ekrana ekle */
.ios-a2hs {
  position: fixed;
  inset: 0;
  z-index: 13000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1rem;
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  background: rgba(8, 14, 24, 0.55);
}
.ios-a2hs-card {
  position: relative;
  width: min(94vw, 24rem);
  background: #f7f7f4;
  color: #111;
  border-radius: 14px;
  padding: 1.1rem 1.15rem 1rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  font-family: inherit;
}
.ios-a2hs-card h3 {
  margin: 0 1.5rem 0.45rem 0;
  font-size: 1.05rem;
}
.ios-a2hs-card p {
  margin: 0 0 0.45rem;
  font-size: 0.88rem;
}
.ios-a2hs-card ol {
  margin: 0 0 0.85rem;
  padding-left: 1.2rem;
  font-size: 0.86rem;
  line-height: 1.45;
}
.ios-a2hs-x {
  position: absolute;
  top: 0.35rem;
  right: 0.4rem;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  font-size: 1.4rem;
  cursor: pointer;
  color: #333;
}
.ios-a2hs-card .btn {
  width: 100%;
}

.join-card {
  max-width: 380px;
  margin: 2rem auto;
  background: #152030;
  padding: 1.25rem;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.join-card label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
.join-card input, .join-card select {
  padding: 0.45rem 0.55rem;
  border-radius: 6px;
  border: 1px solid #345;
  background: #0c1520;
  color: #fff;
  font-family: inherit;
}

.btn {
  display: inline-block;
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: background 0.12s ease, border-color 0.12s ease;
}
.btn:hover { background: #fff; border-color: #9aa89a; }
.btn-primary { background: #c9a227; color: #1a1508; border-color: #b08e1c; }
.btn-primary:hover { background: #d4ad2e; }
.btn-ghost { background: var(--panel); color: var(--ink); border-color: var(--line); }
.btn-ghost.calling {
  background: #fde8e8;
  border-color: #e8a0a0;
  color: #8b2020;
  animation: callPulse 1.2s ease-in-out infinite;
}
.dir-call-flag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  color: #8b2020;
  background: #fde8e8;
  border: 1px solid #e8a0a0;
  border-radius: 999px;
  padding: 0.15rem 0.45rem;
  align-self: center;
}
.dir-call-flag.hidden { display: none !important; }
@keyframes callPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}
.btn-danger { background: #c0392b; color: #fff; border-color: #a93226; }
.btn-ok { background: #27ae60; color: #fff; }

/* Main: table + history toggle + history */
.bbo-shell {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(200px, 260px);
  min-height: 0;
  overflow: hidden;
  transition: grid-template-columns 0.2s ease;
}
.bbo-shell.history-collapsed {
  grid-template-columns: minmax(0, 1fr) 28px 0px;
}
@media (max-width: 720px) {
  .bbo-shell {
    grid-template-columns: minmax(0, 1fr) 26px minmax(0, 180px);
  }
  .bbo-shell.history-collapsed {
    grid-template-columns: minmax(0, 1fr) 26px 0px;
  }
  :root {
    --card-w: 64px; --card-h: 90px;
    --card-w-sm: 48px; --card-h-sm: 68px;
    --card-w-me: 76px; --card-h-me: 108px;
    --card-w-dummy: 64px; --card-h-dummy: 90px;
    --card-w-trick: 70px; --card-h-trick: 98px;
    --overlap-x: -40px; --overlap-y: -42px;
    --overlap-me: -50px; --overlap-dummy: -40px;
  }
  .felt-side { width: 88px; }
}

.table-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.felt-wrap {
  flex: 1;
  display: flex;
  min-height: 0;
  background: var(--side-bg);
}

/* Masanın sol şeridi */
.felt-side {
  width: 118px;
  flex-shrink: 0;
  background: var(--panel);
  padding: 0.45rem 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border-right: 1px solid var(--line);
  z-index: 3;
  position: relative;
}
.menu-btn {
  width: 42px; height: 42px;
  border: none; border-radius: 6px;
  background: #2b6cb0; color: #fff;
  font-size: 1.25rem; cursor: pointer;
  display: grid; place-items: center;
}
.imp-box {
  background: #e8ece8;
  color: #222;
  border-radius: 4px;
  padding: 0.4rem 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.3;
  min-width: 0;
}
.imp-box .imp-title {
  display: none !important;
}
.imp-box .imp-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem;
  margin-top: 0.15rem;
}
.imp-box .imp-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: #1a1a1a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
  max-width: 7.5rem;
}
.imp-box .imp-score {
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #0b3d2c;
  flex-shrink: 0;
  min-width: 1.4rem;
  text-align: right;
}
.imp-box.team .imp-name {
  font-size: 0.78rem;
}
.imp-box.team .imp-score {
  font-size: 1.15rem;
}
.imp-box .imp-row.win .imp-name,
.imp-box .imp-row.win .imp-score {
  color: #14522c;
}
.imp-box .imp-row.lose .imp-name,
.imp-box .imp-row.lose .imp-score {
  color: #9b1c1c;
}
.imp-box .imp-row.tie .imp-name,
.imp-box .imp-row.tie .imp-score {
  color: #4b5563;
}
.imp-box.lead-a {
  box-shadow: inset 3px 0 0 #14522c;
}
.imp-box.lead-b {
  box-shadow: inset 3px 0 0 #9b1c1c;
}
.imp-box.lead-tie {
  box-shadow: inset 3px 0 0 #6b7280;
}
.felt-side .side-actions {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.15rem;
  width: 100%;
}
.felt-side .side-actions .btn {
  width: 100%;
  margin: 0;
  padding: 0.35rem 0.2rem;
  font-size: 0.72rem;
}
.felt-side .side-actions .dir-call-flag {
  font-size: 0.62rem;
  text-align: center;
  line-height: 1.2;
}
/* Bord no + kontrat: aynı ölçü / yapı */
.board-badge,
.contract-hud {
  width: 58px;
  min-height: 68px;
  margin: 0.15rem auto;
  border-radius: 4px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  padding: 0.3rem 0.15rem 0.28rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.05;
  position: relative;
}
.board-badge {
  background: #ddd;
  color: #222;
  font-size: 1.55rem;
  border: 5px solid #888;
}
.board-badge.vuln-ns { border-top-color: #c41e20; border-bottom-color: #c41e20; }
.board-badge.vuln-ew { border-left-color: #c41e20; border-right-color: #c41e20; }
.board-badge.vuln-both { border-color: #c41e20; }
.board-badge #boardNo {
  display: block;
  line-height: 1;
}
.round-badge {
  margin: 0.15rem 0 0.25rem;
  padding: 0.2rem 0.35rem;
  border-radius: 4px;
  background: #1e3a5f;
  border: 1px solid #3b82f6;
  color: #bfdbfe;
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.02em;
}
.round-badge.hidden { display: none !important; }
.dealer-tag {
  position: static;
  transform: none;
  left: auto;
  bottom: auto;
  font-size: 0.95rem;
  font-weight: 800;
  background: #c41e20;
  color: #fff;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  line-height: 1.15;
  letter-spacing: 0.02em;
}
.dealer-tag.hidden { display: none !important; }
.contract-hud {
  background: #0b3d26;
  border: 5px solid #2a8f55;
  color: #e8f8ef;
  font-size: 1rem;
  letter-spacing: 0.02em;
  max-width: 58px;
  min-width: 58px;
}
.contract-hud.hidden { display: none !important; }
.contract-hud .ch-strain.suit-s { color: #e8e8e8; }
.contract-hud .ch-strain.suit-h { color: #ff8a8a; }
.contract-hud .ch-strain.suit-c { color: #7ddea0; }
.contract-hud .ch-strain.suit-d { color: #ffb060; }
.contract-hud .ch-by {
  font-weight: 800;
  margin-left: 0.15rem;
  display: inline;
  font-size: 0.68rem;
  color: #b7e4c7;
}
.contract-hud .ch-main,
.contract-hud .ch-who {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.1;
}
.contract-hud .ch-who {
  margin-top: 0.05rem;
  color: #e8f8ef;
}
.contract-hud .ch-lead {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.15;
  margin-top: 0.08rem;
  color: #f5d547;
}

.trick-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
}
.trick-pill {
  appearance: none;
  margin: 0;
  font: inherit;
  display: block;
  width: 100%;
  background: #fff;
  color: #1c2430;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: center;
  padding: 0.25rem;
  font-size: 0.7rem;
  cursor: pointer;
  line-height: 1.15;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.trick-pill strong {
  display: block;
  font-size: 1.1rem;
  color: #1c2430;
}
.trick-pill:hover {
  background: #eef4ff;
  border-color: #7aa2e0;
}
.trick-pill:active,
.trick-pill:focus-visible {
  background: #dbe7ff;
  border-color: #3b6fb8;
  box-shadow: 0 0 0 2px rgba(59, 111, 184, 0.28);
  outline: none;
}
.felt-side .side-btns { margin-top: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.felt-side .side-btns .btn { width: 100%; margin: 0; padding: 0.35rem 0.2rem; font-size: 0.72rem; }
.felt-side .side-quick { display: none !important; }

/* Green felt */
.felt {
  position: relative;
  flex: 1;
  min-height: 560px;
  min-width: 0;
  background:
    radial-gradient(ellipse at center, #278a4a 0%, var(--felt) 55%, var(--felt-deep) 100%);
  overflow: hidden;
}
.felt::after {
  content: none;
}

/*
 * Büyük masaüstü: sol şerit biraz daha geniş → masa sağa dengelenir.
 * E/W koltuk konumuna dokunulmaz. Telefon/tablet aynı kalır.
 */
@media (min-width: 1101px) {
  .felt-side {
    width: 220px;
  }
  .felt-wrap::after {
    content: "";
    flex: 0 0 140px;
    background: var(--side-bg);
  }
  .felt {
    flex: 1 1 auto;
    max-width: min(880px, calc(100% - 220px - 160px));
  }
  /* Kart resmi: yeşil alan hafif geniş; kartlar taşmasın */
  .felt {
    overflow: visible;
    max-width: min(920px, calc(100% - 220px - 140px));
    min-height: 580px;
  }
  .felt .hand-suits {
    gap: 4px;
  }
  .felt .seat-slot.left .suit-row .pcard.dummy-size,
  .felt .seat-slot.right .suit-row .pcard.dummy-size {
    /* 0.72 → 0.88: yan dummy yelpazesi biraz daha sıkı (abartmadan) */
    margin-left: calc(var(--overlap-dummy) * 0.88);
  }
  .felt .seat-slot.left .suit-row .pcard.dummy-size:first-child,
  .felt .seat-slot.right .suit-row .pcard.dummy-size:first-child {
    margin-left: 0;
  }
}

.seat-slot {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  z-index: 2;
}
/* N: kartlar üstte, isim hemen altında (kartları örtmez) */
.seat-slot.top {
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 94%;
  gap: 0.35rem;
}
.seat-slot.top .hand-row .pcard {
  margin-left: var(--overlap-dummy);
}
.seat-slot.top .hand-row .pcard:first-child { margin-left: 0; }
.seat-slot.top .hand-row .pcard.suit-break {
  margin-left: calc(var(--overlap-dummy) + var(--suit-gap));
}
.seat-slot.top .pcard.dummy-size {
  width: var(--card-w-dummy);
  height: var(--card-h-dummy);
}
/* S: kartlar, isim altta — arada boşluk */
.seat-slot.bottom {
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 96%;
  z-index: 7;
  gap: 0.4rem;
}
.seat-slot.bottom .hand-row .pcard {
  margin-left: var(--overlap-me);
}
.seat-slot.bottom .hand-row .pcard:first-child { margin-left: 0; }
.seat-slot.bottom .hand-row .pcard.suit-break {
  margin-left: calc(var(--overlap-me) + var(--suit-gap));
}
/* B/D: yan kartlar — orta boşluk korunur */
.seat-slot.left {
  left: 8px;
  top: 50%;
  transform: translateY(-46%);
  align-items: flex-start;
  max-width: min(260px, 26%);
  z-index: 3;
}
.seat-slot.right {
  right: 8px;
  top: 50%;
  transform: translateY(-46%);
  align-items: flex-end;
  max-width: min(260px, 26%);
  z-index: 3;
}
/* Kart resmi: dummy/yan eller sol-sağ şeride binmesin; tüm suit görünsün */
.felt .seat-slot.left {
  left: 10px;
  padding-left: 0.15rem;
  box-sizing: border-box;
  max-width: min(300px, 30%);
  z-index: 6;
  overflow: visible;
}
.felt .seat-slot.right {
  right: 10px;
  padding-right: 0.15rem;
  box-sizing: border-box;
  max-width: min(300px, 30%);
  z-index: 6;
  overflow: visible;
}
.felt .seat-slot.left .hand-suits,
.felt .seat-slot.right .hand-suits {
  overflow: visible;
  max-width: 100%;
}
/* Geçmiş açıkken masa daralır → E/W okunaklı kalsın */
.bbo-shell:not(.history-collapsed) .seat-slot.left {
  left: 6px;
  max-width: min(240px, 26%);
}
.bbo-shell:not(.history-collapsed) .seat-slot.right {
  right: 6px;
  max-width: min(240px, 26%);
}
.bbo-shell:not(.history-collapsed) .suit-row .pcard:first-child {
  margin-left: 0;
}
.bbo-shell:not(.history-collapsed) .auction-center {
  width: min(210px, 38%);
}
/* Plakalar her koltukta ada göre daralsın, ele göre gerilmesin */
.seat-slot .seat-name {
  align-self: center;
  width: auto;
  max-width: min(280px, 100%);
  min-width: 0;
}
.seat-slot.left .seat-name { align-self: flex-start; }
.seat-slot.right .seat-name { align-self: flex-end; }

/* İsim plakaları */
.seat-name {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.2rem 0.4rem 0.2rem 0.2rem;
  border-radius: 3px;
  background: #d7dbd7;
  color: #222;
  border: 2px solid #5c2d91;
  white-space: nowrap;
  max-width: 100%;
  min-width: 140px;
  width: auto;
  cursor: pointer;
}
.seat-name:hover { filter: brightness(1.06); }
.seat-name .dir {
  display: inline-grid;
  place-items: center;
  width: 1.35rem; height: 1.35rem;
  background: #3a3a3a;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  border-radius: 2px;
  flex-shrink: 0;
}
.seat-name .nm {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seat-name .badge {
  background: #6c3a9b;
  color: #fff;
  font-size: 0.68rem;
  padding: 0.05rem 0.35rem;
  border-radius: 2px;
  font-weight: 800;
  margin-left: 0.25rem;
}
.seat-name .st {
  display: none;
}
.seat-name.offline {
  background: #b91c1c;
  color: #fff;
  border-color: #7f1d1d;
}
.seat-name.offline .dir {
  background: #7f1d1d;
  color: #fff;
}
.seat-name.offline .badge {
  background: #7f1d1d;
}
.seat-name.offline.me {
  background: #b91c1c;
  border-color: #7f1d1d;
}
.seat-name.dropped .dir { background: #7f1d1d; }
.seat-name.me {
  background: var(--plate-me);
  border-color: #6c3a9b;
}
.seat-name.turn:not(.offline) {
  background: #f3e4a8;
  border-color: var(--gold-turn);
  box-shadow: 0 0 0 2px rgba(201,162,39,0.55), 0 2px 8px rgba(0,0,0,0.12);
  animation: turnPulse 1.4s ease-in-out infinite;
}
@keyframes turnPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(201,162,39,0.45), 0 2px 6px rgba(0,0,0,0.1); }
  50% { box-shadow: 0 0 0 3px rgba(201,162,39,0.75), 0 2px 10px rgba(0,0,0,0.14); }
}
.seat-name.on .dir { background: #1a7a3c; }

/* Horizontal fan (N/S) */
.hand-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: var(--card-h);
}
.hand-row.compact { min-height: var(--card-h-sm); }
.seat-slot.bottom .hand-row { min-height: var(--card-h-me-vis); }
.seat-slot.top .hand-row { min-height: var(--card-h-dummy); }
.hand-row .pcard {
  margin-left: var(--overlap-x);
  position: relative;
}
.hand-row .pcard:first-child { margin-left: 0; }
.hand-row .pcard.suit-break {
  margin-left: calc(var(--overlap-x) + var(--suit-gap));
}

/* Doğu/Batı: her renk yatay satır */
.hand-suits {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.seat-slot.right .hand-suits { align-items: flex-end; }
.suit-row {
  display: flex;
  align-items: flex-end;
  min-height: 0;
  flex: 0 0 auto;
}
.suit-row:empty { display: none; }
.suit-row .pcard {
  margin-left: var(--overlap-suit, calc(var(--card-w-sm) * -0.7));
  position: relative;
}
.suit-row .pcard:first-child { margin-left: 0; }
/* Kapalı rakip eli — 13 sırt dar bir deste gibi dursun */
.hand-suits.backs .suit-row .pcard,
.hand-row.backs .pcard {
  margin-left: var(--overlap-backs, calc(var(--card-w-sm) * -0.88));
}
.hand-suits.backs .suit-row .pcard:first-child,
.hand-row.backs .pcard:first-child { margin-left: 0; }
.seat-slot.left .hand-suits.backs,
.seat-slot.right .hand-suits.backs {
  max-width: calc(var(--card-w-sm) * 1.85);
}
.seat-slot.left .suit-row .pcard,
.seat-slot.right .suit-row .pcard {
  width: var(--card-w-sm);
  height: var(--card-h-sm);
}
.seat-slot.left .suit-row .pcard.dummy-size,
.seat-slot.right .suit-row .pcard.dummy-size,
.suit-row .pcard.dummy-size {
  width: var(--card-w-dummy);
  height: var(--card-h-dummy);
  margin-left: var(--overlap-dummy);
}
.suit-row .pcard.dummy-size:first-child {
  margin-left: 0;
}

.pcard {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  border: none;
  box-shadow: 1px 2px 5px rgba(0,0,0,0.35);
  position: relative;
  flex-shrink: 0;
  user-select: none;
  transition: transform 0.12s ease;
  padding: 0;
  overflow: hidden;
  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
.pcard.sm { width: var(--card-w-sm); height: var(--card-h-sm); }
.pcard.me-size { width: var(--card-w-me); height: var(--card-h-me); }
.pcard.dummy-size { width: var(--card-w-dummy); height: var(--card-h-dummy); }
.pcard.trick-size { width: var(--card-w-trick); height: var(--card-h-trick); }
/* Kendi eli: yarım yükseklik (üst indeks) — deklare paneline yer */
.seat-slot.bottom .pcard.me-size {
  width: var(--card-w-me) !important;
  height: var(--card-h-me-vis) !important;
  /* SVG kendi kenarını çizer — çift çerçeve / kalınlık olmasın */
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.seat-slot.bottom .pcard.me-size img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
  /* fill kenarları şişirir; cover oranı korur */
  object-fit: cover;
  object-position: top center;
  transform: none;
}
.pcard img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.pcard .idx { display: none; }
.pcard.playable {
  cursor: pointer;
  box-shadow: 0 0 0 1.5px rgba(218, 168, 32, 0.7);
  z-index: 4;
}
.pcard.playable:hover { transform: translateY(-10px); z-index: 9; }
.pcard.not-legal { pointer-events: none; cursor: default; }
.pcard.back { background: transparent; }

/* ===== BBO tarzı CSS yüz kartı (telefon + masaüstü) ===== */
.pcard.css-face {
  --cf-ink: #161616;
  --cf-w: var(--card-w);
  --cf-rank: calc(var(--cf-w) * 0.30);
  --cf-suit: calc(var(--cf-w) * 0.26);
  --cf-pip: calc(var(--cf-w) * 0.48);
  background: linear-gradient(165deg, #fffefb 0%, #f6f3ec 100%) !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.12),
    0 3px 8px rgba(0, 0, 0, 0.22) !important;
  color: var(--cf-ink);
  overflow: hidden;
}
.pcard.css-face.me-size { --cf-w: var(--card-w-me); }
.pcard.css-face.dummy-size { --cf-w: var(--card-w-dummy); }
.pcard.css-face.trick-size { --cf-w: var(--card-w-trick); }
.pcard.css-face.suit-H,
.pcard.css-face.suit-D { --cf-ink: #c4161c; color: var(--cf-ink); }
.pcard.css-face.suit-S { --cf-ink: #161616; color: var(--cf-ink); }
.pcard.css-face.suit-C { --cf-ink: #187a38; color: var(--cf-ink); }
.pcard.css-face .cf-body {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Sabit kutu → A/K/6 hep aynı dikey hizada */
.pcard.css-face .cf-corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  z-index: 2;
  pointer-events: none;
  color: inherit;
  width: calc(var(--cf-w) * 0.44);
}
.pcard.css-face .cf-tl {
  top: 5px;
  left: 4px;
}
.pcard.css-face .cf-br {
  right: 4px;
  bottom: 5px;
  transform: rotate(180deg);
}
.pcard.css-face .cf-r,
.pcard.css-face .cf-s {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-variant-numeric: lining-nums;
  color: inherit;
}
.pcard.css-face .cf-r {
  height: calc(var(--cf-w) * 0.36);
  font-size: var(--cf-rank);
}
.pcard.css-face .rank10 .cf-r {
  font-size: calc(var(--cf-w) * 0.24);
  letter-spacing: -0.06em;
}
.pcard.css-face .cf-s {
  height: calc(var(--cf-w) * 0.30);
  font-size: var(--cf-suit);
}
.pcard.css-face .cf-pip {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  font-size: var(--cf-pip);
  line-height: 1;
  opacity: 0.92;
  pointer-events: none;
  z-index: 1;
  color: inherit;
  font-family: "Segoe UI", system-ui, sans-serif;
}
.pcard.css-face.playable {
  box-shadow:
    0 0 0 2px rgba(218, 168, 32, 0.9),
    0 3px 8px rgba(0, 0, 0, 0.22) !important;
}
.seat-slot.bottom .pcard.css-face.me-size {
  background: linear-gradient(165deg, #fffefb 0%, #f6f3ec 100%) !important;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.12),
    0 3px 8px rgba(0, 0, 0, 0.22) !important;
}
.seat-slot.bottom .pcard.css-face.me-size .cf-body {
  height: 100%;
}
.seat-slot.bottom .pcard.css-face.me-size .cf-br { display: none; }
.seat-slot.bottom .pcard.css-face.me-size .cf-pip {
  top: 58%;
  font-size: calc(var(--cf-w) * 0.42);
}

/* Telefon: biraz daha iri indeks; trefl ortası sade */
@media (max-width: 820px) {
  .pcard.css-face {
    --cf-rank: calc(var(--cf-w) * 0.34);
    --cf-suit: calc(var(--cf-w) * 0.28);
    --cf-pip: calc(var(--cf-w) * 0.42);
  }
  .pcard.css-face.suit-C {
    --cf-pip: calc(var(--cf-w) * 0.22);
    --cf-suit: calc(var(--cf-w) * 0.22);
  }
  .pcard.css-face.suit-C .cf-pip {
    opacity: 0.55;
    font-size: calc(var(--cf-w) * 0.22);
  }
}

/* Center auction — şık deklare kutusu (masaüstü: masa ortası, kompakt) */
.auction-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  width: min(236px, 42%);
  background: #f4f1ea;
  border: 1px solid #8a9a8a;
  border-radius: 6px;
  box-shadow:
    0 10px 32px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.65);
  overflow: hidden;
  color: #222;
  display: flex;
  flex-direction: column;
  max-height: min(48vh, var(--auction-box-max, 48vh));
  /* Kaydırma için tıklama açık */
  pointer-events: auto;
}
.auction-center .auction-wait {
  display: none;
}
.auction-head {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 2;
  background: #e8ece8;
  border-bottom: 1px solid #9aa89a;
}
.auction-head span {
  text-align: center;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 0.28rem 0.08rem;
  color: #fff;
  background: #1a7a3c;
  border-right: 1px solid rgba(255,255,255,0.22);
  letter-spacing: 0.02em;
}
.auction-head span:last-child { border-right: none; }
/* Zonda: kırmızı zemin, beyaz yazı */
.auction-head span.vuln {
  background: linear-gradient(#c41e20, #9b1518);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
/* Zonsuz: yeşil zemin, beyaz yazı */
.auction-head span.nvul {
  background: linear-gradient(#1f8f45, #167a38);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.auction-head span.turn {
  box-shadow: inset 0 -3px 0 #f5d547;
}
.auction-head span.vuln.turn {
  background: linear-gradient(#a0181a, #7a1212);
  box-shadow: inset 0 -3px 0 #f0c14b;
}
.auction-head span.nvul.turn {
  background: linear-gradient(#167a38, #0f5c2a);
  box-shadow: inset 0 -3px 0 #f5d547;
}
.auction-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 0;
  min-height: 36px;
  background: #f4f1ea;
  border-top: none;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: var(--auction-grid-max, 12rem);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.auction-cell {
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #c5cec5;
  border-bottom: 1px solid #c5cec5;
  background: #faf8f2;
  padding: 0.16rem 0.06rem;
  font-size: 0.84rem;
}
.auction-cell:nth-child(4n) { border-right: none; }
.auction-cell.is-turn {
  background: #fff8dc;
  box-shadow: inset 0 0 0 1px rgba(232, 185, 35, 0.45);
}
.auction-cell .bid-wait {
  font-size: 0.68rem;
  font-weight: 700;
  color: #8a7010;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* İhale tablosu + deklare kutusu — yapışık; tablo yukarı uzar */
.auction-bid-stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 0;
  z-index: 12;
  pointer-events: none;
  width: min(300px, 62%);
}
.auction-bid-stack > * {
  pointer-events: auto;
}
.auction-bid-stack .auction-center {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 8px 8px 0 0;
  border-bottom: none;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.22);
}
.auction-bid-stack .auction-center.hidden {
  display: none !important;
}
.auction-bid-stack .bid-panel {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0 0 8px 8px;
  border-top: 1px solid #c5b89a;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.auction-bid-stack .auction-center.hidden + .bid-panel,
.auction-bid-stack .bid-panel:first-child {
  border-radius: 8px;
  border-top: 1px solid #9a8b72;
}
.auction-bid-stack:not(:has(.bid-panel:not(.hidden))) .auction-center:not(.hidden) {
  border-radius: 8px;
  border-bottom: 1px solid #8a9a8a;
}

/* Masaüstü: deklare kutusu | ihale tablosu yan yana; tablo yukarı büyür */
@media (min-width: 821px) {
  .felt .auction-bid-stack {
    position: absolute;
    left: 50%;
    bottom: calc(var(--south-h, calc(var(--card-h-me-vis) + 48px)) + 10px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    gap: 0.4rem;
    width: min(560px, 84%);
    max-width: 580px;
  }
  /* Solda deklare kutusu, sağda herkesin tablosu */
  .felt .auction-bid-stack .bid-panel {
    order: 1;
    flex: 0 0 auto;
    width: min(248px, 46%);
    max-width: 260px;
    border-radius: 8px;
    border-top: 1px solid #9a8b72;
    align-self: flex-end;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  }
  .felt .auction-bid-stack .auction-center {
    order: 2;
    flex: 0 1 280px;
    min-width: 0;
    width: min(280px, 48%);
    max-width: 280px;
    max-height: min(32vh, 12rem);
    border-radius: 8px;
    border: 1px solid #8a9a8a;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    align-self: flex-end;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .felt .auction-bid-stack .auction-grid {
    max-height: min(26vh, 10rem);
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  /* Sadece ihale tablosu: iki-panel ölçeğinde kalsın (şişmesin) */
  .felt .auction-bid-stack:not(:has(.bid-panel:not(.hidden))) {
    width: min(280px, 48%);
    max-width: 280px;
  }
  .felt .auction-bid-stack:not(:has(.bid-panel:not(.hidden))) .auction-center {
    width: 100%;
    max-width: 280px;
    flex: 1 1 auto;
  }
  .felt .auction-bid-stack .auction-center.hidden + .bid-panel {
    width: min(280px, 48%);
    max-width: 280px;
  }
}

/* İhale kutusu — kendi elinin hemen üstünde; masaüstü: ortalı ve kompakt */
.bid-panel {
  position: absolute;
  left: 50%;
  bottom: calc(var(--south-h, calc(var(--card-h-me-vis) + 48px)) + 22px);
  transform: translateX(-50%);
  z-index: 12;
  width: min(300px, 62%);
  background: #f3eee4;
  border: 1px solid #9a8b72;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  padding: 0.32rem 0.36rem 0.28rem;
  pointer-events: auto;
}
.bid-panel .bid-row {
  display: flex;
  align-items: stretch;
  gap: 0.28rem;
  margin-bottom: 0.28rem;
}
.bid-panel .bid-row:last-child { margin-bottom: 0; }
.bid-panel .pass {
  flex: 0 0 52px;
  background: #2e9e4f;
  color: #fff;
  border: 1px solid #1f7a3a;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  font-family: inherit;
}
.bid-panel .dbl {
  flex: 0 0 44px;
  background: #d32f2f;
  color: #fff;
  border: 1px solid #a32020;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.78rem;
  cursor: pointer;
  font-family: inherit;
}
.bid-panel .rdbl {
  flex: 0 0 44px;
  background: #7b1fa2;
  color: #fff;
  border: 1px solid #5a1678;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.68rem;
  cursor: pointer;
  font-family: inherit;
}
.bid-panel .alert-btn {
  flex: 0 0 44px;
  background: #ffeb3b;
  color: #222;
  border: 1px solid #c9b820;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.68rem;
  cursor: pointer;
  font-family: inherit;
}
.bid-panel .alert-btn.on { outline: 3px solid #e67e22; }
.bid-panel .pass:disabled,
.bid-panel .dbl:disabled,
.bid-panel .rdbl:disabled { opacity: 0.4; cursor: not-allowed; }
.bid-panel .levels {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.22rem;
}
.bid-panel .strains {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.22rem;
  min-height: 34px;
  background: #fff;
  border-radius: 6px;
  padding: 0.14rem;
  border: 1px solid #cfc4b0;
}
.bid-panel .levels button,
.bid-panel .strains button {
  padding: 0.28rem 0.05rem;
  border-radius: 5px;
  border: 1px solid #b0a898;
  background: #fff;
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
  font-family: inherit;
  color: #1a1a1a;
}
.bid-panel .levels button.selected { background: #1a5276; color: #fff; border-color: #1a5276; }
.bid-panel .levels button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: #ebe7df;
}
/* Renk sembolleri solmasın — disabled olsa da okunaklı kalsın */
.bid-panel .strains button:disabled {
  opacity: 1;
  cursor: not-allowed;
  background: #ebe7df;
  border-color: #c8beb0;
  filter: none;
}
.bid-panel .strain-S { color: #111 !important; }
.bid-panel .strain-H { color: #c4161c !important; }
.bid-panel .strain-C { color: #0f7a35 !important; }
.bid-panel .strain-D { color: #d06000 !important; }
.bid-panel .strain-NT { color: #1a5276 !important; font-size: 0.78rem !important; }
.bid-panel .strains button:not(:disabled) {
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
.bid-panel .strains button:not(:disabled):active {
  transform: scale(0.96);
}
.bid-panel .bid-explain {
  flex: 1;
  margin: 0;
  min-width: 0;
}
.bid-panel .bid-explain input {
  width: 100%;
  padding: 0.35rem 0.45rem;
  border-radius: 5px;
  border: 1px solid #c5b9a5;
  background: #faf7f0;
  font-family: inherit;
  font-size: 0.78rem;
  box-sizing: border-box;
}
@media (max-width: 720px) {
  .bid-panel { bottom: calc(var(--south-h, calc(var(--card-h-me-vis) + 52px)) + 22px); width: 94%; }
}
.bid-chip {
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.1;
  background: transparent;
  border: none;
  padding: 0;
}
.bid-chip.suit-S { color: #161616; }
.bid-chip.suit-H { color: #c4161c; }
.bid-chip.suit-C { color: #187a38; }
.bid-chip.suit-D { color: #e07000; }
.bid-chip.suit-NT { color: #1a5276; }
.bid-chip.pass { color: #1a5c32; font-size: 0.95rem; }
.bid-chip.x { color: #c41e20; }
.bid-chip.xx { color: #6c3483; }
.bid-chip .alert-dot { color: #e67e22; font-size: 0.7rem; margin-left: 2px; }
.bid-chip .alert-dot.clickable {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bid-chip .alert-dot.clickable:hover { color: #d35400; }

.dm-panel {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: calc(88px + var(--kb-inset, 0px));
  transform: translateX(-50%);
  width: min(420px, calc(100vw - 32px));
  max-height: min(56vh, 420px);
  display: flex;
  flex-direction: column;
  background: #0f172a;
  border: 1px solid #475569;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  z-index: 9600;
  overflow: hidden;
  max-width: calc(100vw - 24px);
}
.dm-panel.hidden { display: none !important; }
.dm-panel.dm-flash {
  animation: dmFlash 0.45s ease-in-out 3;
}
@keyframes dmFlash {
  0%, 100% { box-shadow: 0 8px 28px rgba(0,0,0,0.35); }
  50% { box-shadow: 0 0 0 3px #f5d547, 0 8px 28px rgba(0,0,0,0.35); }
}

/* Masa uyarı şeridi (oyuncu düştü vb.) */
.table-toast {
  position: fixed;
  top: calc(3.2rem + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9400;
  max-width: min(92vw, 520px);
  padding: 0.55rem 0.9rem;
  border-radius: 8px;
  background: #1e293b;
  border: 1px solid #475569;
  color: #e2e8f0;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  cursor: pointer;
}
.table-toast.warn {
  background: #7f1d1d;
  border-color: #dc2626;
  color: #fee2e2;
}
.table-toast.hidden { display: none !important; }
.dm-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.7rem;
  background: #1e293b;
  color: #e2e8f0;
  font-size: 0.9rem;
}
.dm-head .xbtn {
  background: #334155;
  border: none;
  color: #f8fafc;
  font-size: 1.35rem;
  cursor: pointer;
  line-height: 1;
  min-width: 40px;
  min-height: 40px;
  border-radius: 8px;
  flex-shrink: 0;
}
.dm-log {
  flex: 1;
  overflow-y: auto;
  padding: 0.55rem 0.7rem;
  font-size: 0.82rem;
  color: #e2e8f0;
  min-height: 100px;
}
.dm-line { margin-bottom: 0.35rem; line-height: 1.35; }
.dm-compose {
  display: flex;
  gap: 0.35rem;
  padding: 0.5rem;
  border-top: 1px solid #334155;
  background: #111827;
}
.dm-compose input {
  flex: 1;
  border-radius: 8px;
  border: 1px solid #475569;
  background: #0f172a;
  color: #f8fafc;
  padding: 0.4rem 0.55rem;
  font-size: 0.85rem;
}
body.observe-mode .bid-panel,
body.observe-mode #btnClaim,
body.observe-mode #btnUndo,
body.observe-mode #btnDirector {
  display: none !important;
}
body.observe-mode .top-meta::before {
  content: "İZLEME · ";
  color: #fbbf24;
  font-weight: 700;
}

/* Oynanan kartlar haç düzeninde; kutu kart boyutuyla birlikte büyür ki
   dört kart birbirinin üstünü kapatmasın. */
.trick-center {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--card-w-trick) * 3.05);
  height: calc(var(--card-h-trick) * 1.95);
  z-index: 5;
}
.trick-center .pcard { position: absolute; }
.trick-center .from-top { top: 0; left: 50%; transform: translateX(-50%); }
.trick-center .from-bottom { bottom: 0; left: 50%; transform: translateX(-50%); }
.trick-center .from-left { left: 0; top: 50%; transform: translateY(-50%); }
.trick-center .from-right { right: 0; top: 50%; transform: translateY(-50%); }
.trick-center .pcard.fly-in.from-top { animation: flyTop 0.4s ease-out; }
.trick-center .pcard.fly-in.from-bottom { animation: flyBottom 0.4s ease-out; }
.trick-center .pcard.fly-in.from-left { animation: flyLeft 0.4s ease-out; }
.trick-center .pcard.fly-in.from-right { animation: flyRight 0.4s ease-out; }
@keyframes flyTop { from { transform: translate(-50%, -90px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
@keyframes flyBottom { from { transform: translate(-50%, 90px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
@keyframes flyLeft { from { transform: translate(-90px, -50%); opacity: 0; } to { transform: translateY(-50%); opacity: 1; } }
@keyframes flyRight { from { transform: translate(90px, -50%); opacity: 0; } to { transform: translateY(-50%); opacity: 1; } }

/* Löve bitti: 4 kart kazanan oyuncuya doğru kayıp kaybolur */
.trick-center.trick-collecting .pcard {
  animation: none !important;
  transition: transform 0.55s ease-in, opacity 0.55s ease-in;
  pointer-events: none;
}
.trick-center.collect-to-top .pcard.from-top {
  transform: translate(-50%, -130px) scale(0.45);
  opacity: 0;
}
.trick-center.collect-to-top .pcard.from-bottom {
  transform: translate(-50%, -210px) scale(0.45);
  opacity: 0;
}
.trick-center.collect-to-top .pcard.from-left {
  transform: translate(40px, -150px) scale(0.45);
  opacity: 0;
}
.trick-center.collect-to-top .pcard.from-right {
  transform: translate(-40px, -150px) scale(0.45);
  opacity: 0;
}
.trick-center.collect-to-bottom .pcard.from-top {
  transform: translate(-50%, 210px) scale(0.45);
  opacity: 0;
}
.trick-center.collect-to-bottom .pcard.from-bottom {
  transform: translate(-50%, 130px) scale(0.45);
  opacity: 0;
}
.trick-center.collect-to-bottom .pcard.from-left {
  transform: translate(40px, 150px) scale(0.45);
  opacity: 0;
}
.trick-center.collect-to-bottom .pcard.from-right {
  transform: translate(-40px, 150px) scale(0.45);
  opacity: 0;
}
.trick-center.collect-to-left .pcard.from-top {
  transform: translate(-180px, 40px) scale(0.45);
  opacity: 0;
}
.trick-center.collect-to-left .pcard.from-bottom {
  transform: translate(-180px, -40px) scale(0.45);
  opacity: 0;
}
.trick-center.collect-to-left .pcard.from-left {
  transform: translate(-130px, -50%) scale(0.45);
  opacity: 0;
}
.trick-center.collect-to-left .pcard.from-right {
  transform: translate(-220px, -50%) scale(0.45);
  opacity: 0;
}
.trick-center.collect-to-right .pcard.from-top {
  transform: translate(180px, 40px) scale(0.45);
  opacity: 0;
}
.trick-center.collect-to-right .pcard.from-bottom {
  transform: translate(180px, -40px) scale(0.45);
  opacity: 0;
}
.trick-center.collect-to-right .pcard.from-left {
  transform: translate(220px, -50%) scale(0.45);
  opacity: 0;
}
.trick-center.collect-to-right .pcard.from-right {
  transform: translate(130px, -50%) scale(0.45);
  opacity: 0;
}

.claim-toast {
  position: absolute;
  left: 50%; top: 62%;
  transform: translateX(-50%);
  z-index: 50;
  background: #fff;
  color: #222;
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  box-shadow: 0 10px 28px rgba(0,0,0,0.4);
  text-align: center;
  min-width: 200px;
}
.claim-toast p { margin: 0 0 0.5rem; font-weight: 700; }
.claim-toast .modal-actions { justify-content: center; display: flex; gap: 0.35rem; }
.claim-hand-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 2px;
  margin: 0.35rem 0 0.55rem;
  max-width: min(92vw, 420px);
}
.claim-hand-row .claim-hand-label {
  width: 100%;
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.85;
  margin-bottom: 0.2rem;
}
.claim-hand-row .pcard {
  width: 36px;
  height: 50px;
  margin-left: -14px;
}
.claim-hand-row .pcard:first-of-type { margin-left: 0; }
.claim-toast.wait-hands {
  top: 48%;
  background: rgba(15, 23, 35, 0.92);
  color: #f0e6c8;
  border: 1px solid #c9a84c;
  pointer-events: none;
}
.claim-toast.wait-hands p { margin: 0; font-weight: 600; font-size: 0.92rem; }

/* Sonuç / seyir panelleri tıklanabilir olmalı */
#matchDoneBanner,
#watchOtherBanner {
  pointer-events: auto;
  z-index: 40;
  min-width: min(92vw, 320px);
}
#matchDoneBanner .modal-actions,
#watchOtherBanner .modal-actions {
  pointer-events: auto;
  margin-top: 0.45rem;
}
#matchDoneBanner a.btn,
#watchOtherBanner button.btn {
  pointer-events: auto;
  cursor: pointer;
  display: inline-block;
  padding: 0.45rem 0.75rem;
  border-radius: 6px;
  border: 1px solid #c9a84c;
  background: #1e3a5f;
  color: #f8fafc;
  font-weight: 700;
  text-decoration: none;
}
#watchOtherBanner button.btn:hover,
#matchDoneBanner a.btn:hover {
  background: #2a5080;
}
#matchDoneBanner p,
#watchOtherBanner p {
  margin: 0 0 0.35rem;
}

/* Bid box below felt */
.controls-below {
  flex: 0 0 auto;
  background: var(--panel-2);
  padding: 0.45rem 0.65rem;
  border-top: 1px solid var(--line);
}
.result-banner {
  margin-top: 0.4rem;
  background: rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 0.55rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.9rem;
}

/* Chat bar */
.chat-bar {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.35rem;
  background: #f4f4f2;
  color: #222;
  padding: 0 0.5rem 0.35rem;
  padding-bottom: calc(0.35rem + var(--kb-inset, 0px));
  border-top: 1px solid #ccc;
  font-size: 0.78rem;
  position: relative;
}
.chat-resize {
  flex: 0 0 auto;
  height: 12px;
  margin: 0 -0.5rem;
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#eceae4, #f4f4f2);
  border-bottom: 1px solid #ddd;
}
.chat-resize::after {
  content: "";
  width: 42px;
  height: 4px;
  border-radius: 3px;
  background: #a8a8a0;
  box-shadow: 0 1px 0 rgba(255,255,255,0.7);
}
.chat-log {
  flex: 0 0 auto;
  height: var(--chat-log-h, 5.5rem);
  min-height: var(--chat-log-h, 5.5rem);
  max-height: var(--chat-log-h, 5.5rem);
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: #333;
  min-width: 0;
  width: 100%;
  line-height: 1.35;
  padding: 0.15rem 0.2rem;
  box-sizing: border-box;
}
.chat-compose {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  width: 100%;
}
.chat-compose input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  padding: 0.35rem 0.5rem;
  border: 1px solid #bbb;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.82rem;
}
.chat-compose .btn {
  flex: 0 0 auto;
  padding: 0.3rem 0.55rem;
  font-size: 0.75rem;
}
.chat-bar input {
  width: 220px;
  padding: 0.35rem 0.5rem;
  border: 1px solid #bbb;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.82rem;
}
.chat-bar .btn { padding: 0.3rem 0.55rem; font-size: 0.75rem; }
.chat-bar .btn-ghost {
  color: #111 !important;
  background: #e6e6e2;
  border: 1px solid #b0b0a8;
}

/* Masaüstü: sohbet sıkı + alt el aşağıda / yarım boy (yan dummy’ye binmesin) */
@media (min-width: 1101px) {
  .chat-bar {
    max-width: 920px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 0.18rem 1rem;
    padding-bottom: calc(0.18rem + var(--kb-inset, 0px));
    gap: 0.3rem;
  }
  .chat-resize {
    flex: 1 0 100%;
    margin: 0 -1rem;
  }
  .chat-log {
    flex: 1 1 auto;
    max-width: 28rem;
    height: var(--chat-log-h, calc(1.25em * 2 + 0.5rem));
    min-height: var(--chat-log-h, calc(1.25em * 2 + 0.5rem));
    max-height: var(--chat-log-h, calc(1.25em * 2 + 0.5rem));
    line-height: 1.25;
    padding: 0.15rem 0.25rem;
    font-size: 0.75rem;
  }
  .chat-compose {
    flex: 1 1 auto;
    width: auto;
    max-width: min(560px, 72vw);
  }
  .chat-compose input {
    flex: 1 1 auto;
    min-width: 14rem;
    width: min(360px, 42vw);
    padding: 0.28rem 0.45rem;
    font-size: 0.78rem;
  }
  .chat-bar input {
    width: min(240px, 28vw);
    padding: 0.28rem 0.45rem;
    font-size: 0.78rem;
  }
  .chat-bar .btn {
    padding: 0.25rem 0.45rem;
    font-size: 0.72rem;
  }
  .controls-below {
    padding: 0.25rem 0.5rem;
  }

  /* Alt el: çuhanın en altına çek, görünen boy ~yarı */
  .seat-slot.bottom {
    bottom: 0 !important;
    gap: 0.15rem !important;
    padding-bottom: 0 !important;
  }
  .seat-slot.bottom .hand-row {
    min-height: var(--card-h-me-vis) !important;
  }
  .seat-slot.bottom .pcard.me-size {
    height: var(--card-h-me-vis) !important;
    overflow: hidden !important;
  }
  .seat-slot.bottom .pcard.me-size img {
    height: var(--card-h-me) !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
  }

  /* Yan dummy biraz yukarı — alt el ile çakışma riski azalsın */
  .felt .seat-slot.left,
  .felt .seat-slot.right {
    top: 46% !important;
    transform: translateY(-50%) !important;
  }
}

/* History panel + fixed center toggle */
.history-toggle {
  align-self: center;
  justify-self: center;
  z-index: 20;
  background: #1a2744;
  border: 1px solid #3a5080;
  color: #cde;
  border-radius: 6px;
  width: 28px;
  height: 44px;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.history-toggle:hover { background: #243658; }
.history-panel {
  background: #152030;
  border-left: 1px solid #243448;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  width: 100%;
  min-width: 0;
}
.history-panel h3 {
  margin: 0;
  padding: 0.45rem 0.55rem;
  font-size: 0.88rem;
  background: #1a2744;
  border-bottom: 1px solid #243448;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.history-panel h3 .hist-title { flex: 1; }
.bbo-shell.history-collapsed .history-panel {
  opacity: 0;
  pointer-events: none;
  border: none;
}
.history-scroll {
  flex: 1;
  overflow: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.hist-tabs {
  display: flex;
  gap: 0;
  background: #e8e8e8;
  border-bottom: 1px solid #ccc;
  flex-shrink: 0;
}
.hist-tabs.hidden { display: none; }
.hist-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0.45rem 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #444;
  cursor: pointer;
  border-bottom: 3px solid transparent;
}
.hist-tab.active {
  color: #5b2d8e;
  border-bottom-color: #7b3fb8;
  background: #fff;
}
.hist-score-wrap {
  max-height: 38%;
  overflow: auto;
  flex-shrink: 0;
  background: #fff;
}
.hist-board-caption {
  padding: 0.35rem 0.5rem 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #3d4a5c;
  background: #fff;
}
.hist-board-caption.hidden { display: none; }
.fb-score-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
  color: #111;
  font-family: "Segoe UI", "Segoe UI Symbol", Tahoma, sans-serif;
}
.fb-score-table thead th {
  position: sticky;
  top: 0;
  background: #f4f1ea;
  color: #3d4a5c;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.34rem 0.14rem;
  white-space: nowrap;
  text-align: center;
  border-bottom: 1px solid #d8d2c4;
  z-index: 1;
}
.fb-score-table td {
  padding: 0.28rem 0.16rem;
  text-align: center;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
  vertical-align: middle;
}
.fb-score-table tbody tr:nth-child(even) td { background: #f3f5f8; }
.fb-score-table tr.sel td.col-board,
.fb-score-table tr.sel td.col-imp { background: #e4eefb; }
.fb-score-table tr.cur td.col-board { background: #eef4fd; }
.fb-score-table tr.sel.cur td.col-board,
.fb-score-table tr.sel.cur td.col-imp { background: #dce9fa; }
.fb-score-table tr.sel-t1 td.col-t1 {
  background: #d7e8fb !important;
  box-shadow: inset 0 -2px 0 #3b82f6;
}
.fb-score-table tr.sel-t2 td.col-t2 {
  background: #f0dcc0 !important;
  box-shadow: inset 0 -2px 0 #d97706;
}
.fb-score-table td.col-t1 { background: #eef5fb; }
.fb-score-table td.col-t2 { background: #fbf6ee; }
.fb-score-table tbody tr:nth-child(even) td.col-t1 { background: #e4eef8; }
.fb-score-table tbody tr:nth-child(even) td.col-t2 { background: #f3ebe0; }
.fb-score-table thead th:nth-child(2),
.fb-score-table thead th:nth-child(3) {
  background: #e4eef8;
  color: #1e3a5f;
}
.fb-score-table thead th:nth-child(4),
.fb-score-table thead th:nth-child(5) {
  background: #f5ebe0;
  color: #5c3d1e;
}
.fb-score-table tr { cursor: default; }
.fb-score-table td.hist-click { cursor: pointer; }
.fb-score-table tbody tr:has(td.col-t1:hover) td.col-t1 {
  background: #c9dbf2 !important;
}
.fb-score-table tbody tr:has(td.col-t2:hover) td.col-t2 {
  background: #efd7b5 !important;
}
.fb-score-table .col-res {
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.fb-score-table .res-line {
  color: #111;
  font-weight: 600;
}
.fb-score-table .res-pass { color: #444; font-weight: 500; }
.fb-score-table .sc {
  display: inline;
  font-weight: 600;
  line-height: 1;
}
.fb-score-table .pt {
  font-weight: 600;
  color: #14522c;
  font-variant-numeric: tabular-nums;
}
.fb-score-table .col-board { white-space: nowrap; }
.fb-score-table .col-imp { width: 2.6rem; }
/* Diğer masalar: kendi masamın satırı */
.fb-score-table tr.my-table td { background: #fdf3d4; }
.fb-score-table tr.my-table td:first-child { box-shadow: inset 3px 0 0 #d9a520; }
.fb-score-table .sc.red {
  color: #9b1c1c !important;
  -webkit-text-fill-color: #9b1c1c;
  font-weight: 600;
}
.fb-score-table .sc.blk {
  color: #14522c !important;
  -webkit-text-fill-color: #14522c;
  font-weight: 600;
}
.fb-score-table .sc.suit-s { color: #161616 !important; -webkit-text-fill-color: #161616; font-weight: 600; }
.fb-score-table .sc.suit-h { color: #c4161c !important; -webkit-text-fill-color: #c4161c; font-weight: 600; }
.fb-score-table .sc.suit-c { color: #187a38 !important; -webkit-text-fill-color: #187a38; font-weight: 600; }
.fb-score-table .sc.suit-d { color: #e07000 !important; -webkit-text-fill-color: #e07000; font-weight: 600; }
.fb-score-table tr.imp-total-row { cursor: default; }
.fb-score-table tr.imp-total-row td {
  background: #eef0f3 !important;
  border-bottom: none;
  padding: 0.35rem 0.2rem;
}
.fb-score-table td.imp-tot {
  background: #f0c14b !important;
  color: #111;
  font-weight: 900;
  font-size: 0.95rem;
  border: 1px solid #c9a227;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.12);
}
.fb-imp-totals {
  display: flex;
  gap: 0.65rem;
  justify-content: center;
  align-items: stretch;
  padding: 0.4rem 0.5rem;
  background: #1a5c2e;
  flex-shrink: 0;
}
.fb-imp-totals.hidden { display: none; }
.fb-imp-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
  flex: 1;
  max-width: 9rem;
}
.fb-imp-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: #d8f3e0;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.fb-imp-box {
  background: #f0c14b;
  color: #1a1a1a;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 0.22rem 0.75rem;
  border-radius: 3px;
  min-width: 3.2rem;
  text-align: center;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.12);
  width: 100%;
}
.other-score-form {
  display: block;
  padding: 0.55rem 0.6rem;
  margin: 0.35rem;
  background: #152030;
  border: 1px solid #3a5080;
  border-radius: 6px;
}
.other-score-form.hidden {
  display: none !important;
}
.osf-ave-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0 0 0.45rem;
}
.ave-quick {
  margin: 0;
  padding: 0.28rem 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 4px;
  border: 1px solid #5b7ab0;
  background: #1e3a5f;
  color: #e2e8f0;
  cursor: pointer;
}
.ave-quick:hover { background: #2a4d75; border-color: #7dd3fc; color: #fff; }
.staff-ave-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0.35rem 0 0;
  padding: 0.4rem 0.55rem;
  background: rgba(15, 35, 60, 0.92);
  border: 1px solid #3a5080;
  border-radius: 8px;
}
.staff-ave-bar.hidden { display: none !important; }
.staff-ave-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #f0c14b;
  margin-right: 0.25rem;
}
.osf-title {
  font-weight: 800;
  margin-bottom: 0.35rem;
  color: #f0c14b;
  font-size: 0.75rem;
}
.osf-row {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.3rem;
}
.osf-row label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  font-size: 0.65rem;
  color: #9ab;
}
.osf-row input, .osf-row select {
  padding: 0.25rem 0.3rem;
  border-radius: 3px;
  border: 1px solid #3a5080;
  background: #152030;
  color: #eee;
  font-size: 0.72rem;
  font-family: inherit;
}
#osfSubmit { width: 100%; margin-top: 0.15rem; font-size: 0.72rem; padding: 0.35rem; }
.osf-msg { min-height: 1em; margin-top: 0.25rem; color: #7dd3fc; font-size: 0.65rem; }
.fb-review {
  flex: 1;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  background: #14522c;
}
.fb-review.hidden { display: none; }
.fb-review-felt {
  position: relative;
  flex: 1;
  min-height: 200px;
  padding: 0.35rem;
  display: grid;
  grid-template-columns: minmax(72px, 1fr) minmax(88px, 1.1fr) minmax(72px, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 0.35rem 0.45rem;
  align-items: center;
  justify-items: center;
}
.fb-board-no {
  position: absolute;
  left: 6px;
  top: 6px;
  width: 22px;
  height: 22px;
  border-radius: 3px;
  background: #1a2744;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.fb-hand {
  background: #f7f4ea;
  border: 1px solid #c5b98a;
  border-radius: 4px;
  padding: 0.15rem 0.25rem;
  width: 100%;
  max-width: 104px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  overflow: hidden;
}
.fb-hand.fb-n { grid-column: 2; grid-row: 1; max-width: 120px; }
.fb-hand.fb-w { grid-column: 1; grid-row: 2; justify-self: start; max-width: 96px; }
.fb-hand.fb-e { grid-column: 3; grid-row: 2; justify-self: end; max-width: 96px; }
.fb-hand.fb-s { grid-column: 2; grid-row: 3; max-width: 120px; }
.fb-hand-name {
  font-size: 0.58rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 0.08rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fb-dir {
  display: inline-block;
  background: #5b2d8e;
  color: #fff;
  border-radius: 2px;
  padding: 0 0.18rem;
  margin-right: 0.12rem;
  font-size: 0.52rem;
}
.fb-hand-cards {
  font-family: "Segoe UI Symbol", "Apple Color Emoji", "Noto Sans Symbols", sans-serif;
  font-size: 0.62rem;
  line-height: 1.35;
  font-weight: 700;
  overflow: hidden;
}
.fb-suit {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  letter-spacing: 0.08em;
}
.fb-rk {
  display: inline-block;
  margin-right: 0.14em;
  letter-spacing: 0;
}
.fb-suit.suit-s, .fb-call.suit-s { color: #161616; }
.fb-suit.suit-h, .fb-call.suit-h { color: #c4161c; }
.fb-suit.suit-c, .fb-call.suit-c { color: #187a38; }
.fb-suit.suit-d, .fb-call.suit-d { color: #e07000; }
.fb-pip {
  display: inline-block;
  width: 0.8em;
  margin-right: 0.08em;
  font-size: 0.9em;
}
.fb-suit.blk .fb-pip,
.fb-call.blk {
  color: #000 !important;
  -webkit-text-fill-color: #000;
  opacity: 1;
}
.fb-auction {
  grid-column: 2;
  grid-row: 2;
  background: #f0eee6;
  border: 1px solid #bbb;
  border-radius: 3px;
  padding: 0.15rem;
  width: 100%;
  max-width: 118px;
  max-height: 110px;
  overflow: auto;
  z-index: 1;
}
.fb-auction.hidden { display: none !important; }
.fb-trick {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  width: 100%;
  max-width: 168px;
  min-height: 118px;
  height: 118px;
  background: rgba(10, 40, 24, 0.35);
  border: 1px dashed rgba(255,255,255,0.25);
  border-radius: 4px;
  display: block;
  padding: 0;
  z-index: 1;
}
.fb-trick[hidden] { display: none !important; }
.fb-trick .ft {
  position: absolute;
  font-size: 0.88rem;
  font-weight: 900;
  background: #fff;
  border-radius: 4px;
  padding: 0.28rem 0.42rem;
  border: 1px solid #222;
  line-height: 1;
  color: #000;
  -webkit-text-fill-color: #000;
  opacity: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.fb-trick .ft.suit-s { color: #161616 !important; -webkit-text-fill-color: #161616; }
.fb-trick .ft.suit-h { color: #c4161c !important; -webkit-text-fill-color: #c4161c; }
.fb-trick .ft.suit-c { color: #187a38 !important; -webkit-text-fill-color: #187a38; }
.fb-trick .ft.suit-d { color: #e07000 !important; -webkit-text-fill-color: #e07000; }
.fb-trick .ft.n { top: 6px; left: 50%; transform: translateX(-50%); }
.fb-trick .ft.e { right: 6px; top: 50%; transform: translateY(-50%); }
.fb-trick .ft.s { bottom: 6px; left: 50%; transform: translateX(-50%); }
.fb-trick .ft.w { left: 6px; top: 50%; transform: translateY(-50%); }
.fb-trick .ft.fly-in.from-n { animation: fbFlyN 0.35s ease-out; }
.fb-trick .ft.fly-in.from-e { animation: fbFlyE 0.35s ease-out; }
.fb-trick .ft.fly-in.from-s { animation: fbFlyS 0.35s ease-out; }
.fb-trick .ft.fly-in.from-w { animation: fbFlyW 0.35s ease-out; }
.fb-trick.trick-collecting .ft {
  animation: none !important;
  transition: transform 0.5s ease-in, opacity 0.5s ease-in;
  pointer-events: none;
}
.fb-trick.collect-to-n .ft.n { transform: translateX(-50%) translateY(-42px) scale(0.55); opacity: 0; }
.fb-trick.collect-to-n .ft.e { transform: translateY(-50%) translateY(-42px) scale(0.55); opacity: 0; }
.fb-trick.collect-to-n .ft.s { transform: translateX(-50%) translateY(-42px) scale(0.55); opacity: 0; }
.fb-trick.collect-to-n .ft.w { transform: translateY(-50%) translateY(-42px) scale(0.55); opacity: 0; }
.fb-trick.collect-to-s .ft.n { transform: translateX(-50%) translateY(42px) scale(0.55); opacity: 0; }
.fb-trick.collect-to-s .ft.e { transform: translateY(-50%) translateY(42px) scale(0.55); opacity: 0; }
.fb-trick.collect-to-s .ft.s { transform: translateX(-50%) translateY(42px) scale(0.55); opacity: 0; }
.fb-trick.collect-to-s .ft.w { transform: translateY(-50%) translateY(42px) scale(0.55); opacity: 0; }
.fb-trick.collect-to-e .ft.n { transform: translateX(-50%) translateX(42px) scale(0.55); opacity: 0; }
.fb-trick.collect-to-e .ft.e { transform: translateY(-50%) translateX(42px) scale(0.55); opacity: 0; }
.fb-trick.collect-to-e .ft.s { transform: translateX(-50%) translateX(42px) scale(0.55); opacity: 0; }
.fb-trick.collect-to-e .ft.w { transform: translateY(-50%) translateX(42px) scale(0.55); opacity: 0; }
.fb-trick.collect-to-w .ft.n { transform: translateX(-50%) translateX(-42px) scale(0.55); opacity: 0; }
.fb-trick.collect-to-w .ft.e { transform: translateY(-50%) translateX(-42px) scale(0.55); opacity: 0; }
.fb-trick.collect-to-w .ft.s { transform: translateX(-50%) translateX(-42px) scale(0.55); opacity: 0; }
.fb-trick.collect-to-w .ft.w { transform: translateY(-50%) translateX(-42px) scale(0.55); opacity: 0; }
@keyframes fbFlyN {
  from { transform: translateX(-50%) translateY(-22px); opacity: 0; }
  to { transform: translateX(-50%); opacity: 1; }
}
@keyframes fbFlyE {
  from { transform: translateY(-50%) translateX(22px); opacity: 0; }
  to { transform: translateY(-50%); opacity: 1; }
}
@keyframes fbFlyS {
  from { transform: translateX(-50%) translateY(22px); opacity: 0; }
  to { transform: translateX(-50%); opacity: 1; }
}
@keyframes fbFlyW {
  from { transform: translateY(-50%) translateX(-22px); opacity: 0; }
  to { transform: translateY(-50%); opacity: 1; }
}
.fb-auc-head {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  font-size: 0.58rem;
  font-weight: 800;
  text-align: center;
  color: #444;
  margin-bottom: 0.1rem;
}
.fb-auc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
}
.fb-auc-cell {
  min-height: 1.05em;
  font-size: 0.62rem;
  font-weight: 700;
  text-align: center;
  color: #1a1a1a;
}
.fb-auc-empty {
  font-size: 0.65rem;
  color: #666;
  text-align: center;
  padding: 0.4rem;
}
.fb-contract {
  position: absolute;
  right: 6px;
  bottom: 4px;
  background: rgba(26,39,68,0.92);
  color: #f0c14b;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.15rem 0.35rem;
  border-radius: 3px;
  max-width: 55%;
  text-align: right;
}
.fb-dd {
  position: absolute;
  right: 4px;
  top: 4px;
  z-index: 3;
  background: rgba(247, 244, 234, 0.97);
  border: 1px solid #c5b98a;
  border-radius: 3px;
  padding: 0.12rem 0.18rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.fb-dd[hidden] { display: none !important; }
.fb-dd table {
  border-collapse: collapse;
  font-size: 0.52rem;
  line-height: 1.15;
  font-weight: 700;
  color: #222;
}
.fb-dd th,
.fb-dd td {
  padding: 0.05rem 0.18rem;
  text-align: center;
}
.fb-dd th:first-child,
.fb-dd td:first-child {
  text-align: left;
  color: #5b2d8e;
}
.fb-dd .suit-c { color: #187a38; }
.fb-dd .suit-d { color: #e07000; }
.fb-dd .suit-h { color: #c4161c; }
.fb-dd .suit-s { color: #161616; }
.fb-dd .nt { color: #2563eb; }
.fb-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  padding: 0.3rem;
  background: #0f3a1f;
  flex-shrink: 0;
}
.fb-nav .btn {
  font-size: 0.62rem;
  padding: 0.35rem 0.2rem;
  margin: 0;
}
.fb-nav .btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.history-empty {
  padding: 0.8rem 0.4rem;
  color: #555;
  font-size: 0.75rem;
  text-align: center;
  background: #e4dfc4;
}
.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}
.history-table th {
  text-align: left;
  color: var(--muted);
  font-weight: 600;
  padding: 0.25rem 0.3rem;
  border-bottom: 1px solid #243448;
}
.history-table td {
  padding: 0.3rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.history-table tr.active { background: rgba(43,108,176,0.35); }
.history-empty {
  padding: 1rem 0.5rem;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}
.match-score-line {
  margin: 0.25rem 0.35rem 0.5rem;
  padding: 0.4rem 0.5rem;
  background: rgba(43,108,176,0.25);
  border-radius: 6px;
  font-size: 0.8rem;
  line-height: 1.35;
}
.match-score-line.hidden { display: none; }
.match-boards { color: var(--muted); font-size: 0.72rem; }
.history-list { display: flex; flex-direction: column; gap: 0.45rem; }
.hist-board {
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 0.4rem 0.45rem;
  font-size: 0.72rem;
  line-height: 1.35;
}
.hist-board.active { border-color: rgba(96,165,250,0.55); background: rgba(43,108,176,0.28); }
.hist-board-head {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  margin-bottom: 0.3rem;
  font-size: 0.78rem;
}
.hist-imp { color: #7dd3fc; }
.hist-tables { display: flex; flex-direction: column; gap: 0.35rem; }
.hist-table {
  padding: 0.3rem 0.35rem;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
}
.hist-table-name {
  font-weight: 700;
  color: #93c5fd;
  margin-bottom: 0.15rem;
  font-size: 0.7rem;
}
.hist-result { font-weight: 600; margin-bottom: 0.15rem; }
.hist-auction, .hist-play {
  color: #cbd5e1;
  word-break: break-word;
  margin-top: 0.12rem;
}
.hist-empty-side { color: var(--muted); font-style: italic; }



.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal {
  background: #f7f7f5;
  color: #222;
  border-radius: 10px;
  padding: 1rem 1.1rem;
  width: min(400px, 100%);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}
.modal h3 { margin: 0 0 0.65rem; font-size: 1.05rem; }
.modal label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  margin-bottom: 0.55rem;
}
.modal label.row-check { flex-direction: row; align-items: center; gap: 0.5rem; }
.modal label[hidden] { display: none; }
.modal input[type="text"], .modal input[type="number"], .modal select, .modal textarea {
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  border: 1px solid #bbb;
  font-family: inherit;
}
.modal textarea { min-height: 56px; resize: vertical; }
.modal-actions {
  display: flex;
  gap: 0.4rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
/* Açık modal zeminde ghost butonlar soluk kalmasın */
.modal .btn-ghost,
.modal-actions .btn-ghost {
  color: #111 !important;
  background: #e8e8e4;
  border: 1px solid #b0b0a8;
}
.modal .btn-ghost:hover,
.modal-actions .btn-ghost:hover {
  background: #dddcd6;
  color: #000 !important;
}
.dir-call-modal { width: min(420px, 100%); }
.dir-call-lead {
  margin: 0 0 0.55rem;
  font-size: 0.88rem;
  line-height: 1.4;
  color: #333;
}
.dir-call-list {
  margin: 0 0 0.75rem;
  padding-left: 1.15rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #444;
}
.dir-call-list li { margin: 0.2rem 0; }
.dir-call-actions {
  justify-content: stretch;
}
.dir-call-actions .btn {
  flex: 1 1 auto;
  min-width: 5.5rem;
}
.dir-call-actions #dirCallConfirm {
  flex: 1 1 100%;
}
@media (max-width: 820px) {
  .dir-call-actions .btn {
    min-height: 44px;
  }
}

/* Oyuncu profil kartı */
.profile-card {
  width: min(720px, 96vw);
  padding: 0;
  overflow: hidden;
  background: #d5e0e0;
  border-radius: 4px;
}
.profile-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #4a2d6b;
  color: #fff;
  padding: 0.45rem 0.55rem;
}
.profile-card-head .uname {
  background: #e8ece8;
  color: #222;
  font-weight: 800;
  padding: 0.2rem 0.45rem;
  border-radius: 3px;
  font-size: 0.9rem;
}
.profile-card-head .star { color: #f0c14b; font-size: 0.95rem; }
.profile-card-head .status { flex: 1; font-size: 0.85rem; text-align: center; }
.profile-card-head .xbtn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.5);
  color: #fff;
  width: 28px; height: 28px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.profile-card-body {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0.75rem;
  padding: 0.75rem;
}
.profile-avatar {
  width: 110px; height: 110px;
  background: #9aa8a8;
  border-radius: 2px;
  display: grid;
  place-items: center;
  font-size: 3.2rem;
  color: #eef2f2;
}
.profile-fields {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #222;
}
.profile-fields b { display: inline-block; min-width: 7.5rem; }
.profile-system {
  grid-column: 1 / -1;
  margin-top: 0.15rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(0,0,0,0.12);
  font-size: 0.88rem;
  color: #222;
  font-style: italic;
}
.profile-card #pcActions,
.profile-card #pcReplaceSection {
  grid-column: 1 / -1;
  margin: 0.35rem 0 0;
}
.profile-card #pcReplaceList {
  max-height: 16rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
}
.casual-owner-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.9rem;
  align-items: center;
  padding: 0.45rem 0.75rem;
  background: #fff8e8;
  color: #1a2f4d;
  border-bottom: 2px solid #e0b84a;
  font-size: 0.9rem;
}
.casual-owner-bar strong { margin-right: 0.35rem; }
#btnMasaAyar:not([hidden]) { display: inline-flex !important; }
.casual-owner-bar label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  cursor: pointer;
}
.casual-owner-bar input { width: auto; margin: 0; }
.profile-msg {
  grid-column: 1 / -1;
  margin: 0.55rem -0.75rem -0.75rem;
  padding: 0.65rem 0.75rem 0.75rem;
  background: #c8d2d2;
  border-top: 1px solid rgba(0,0,0,0.1);
}
.profile-msg .pc-msg-label {
  display: block;
  margin: 0 0 0.15rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #1e4d8c;
}
.profile-msg #pcMsgInput {
  display: block;
  width: 100%;
  margin: 0 0 0.55rem;
  padding: 0.25rem 0.1rem 0.35rem;
  border: none;
  border-bottom: 2px solid #1e4d8c;
  border-radius: 0;
  background: transparent;
  color: #111;
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
}
.profile-msg #pcMsgInput:focus {
  border-bottom-color: #0f2d5c;
}
.profile-msg .pc-msg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}
.profile-msg .pc-msg-actions .btn {
  margin: 0;
  padding: 0.35rem 0.75rem;
  font-size: 0.82rem;
}
.profile-msg #pcMsgSend:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.profile-msg #pcMsgShowChat {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.hidden { display: none !important; }
.out { font-size: 0.7rem; opacity: 0.4; max-height: 60px; overflow: auto; margin: 0.3rem 0 0; }

/* Masa ortası sarmalayıcı — masaüstünde şeffaf (absolute çocuklar .felt'e bağlanır) */
.table-mid {
  display: contents;
}

/* Tam ekran / immersif oyun */
body.play-immersive .play-top {
  padding: 0.2rem 0.55rem;
}
body.play-immersive .play-top .top-meta { font-size: 0.75rem; }
body.play-immersive .bbo-shell {
  flex: 1;
  min-height: 0;
}
body.play-immersive .felt {
  min-height: 0;
}
body.play-immersive {
  height: var(--app-h, 100dvh);
  max-height: var(--app-h, 100dvh);
  overflow: hidden;
}
@media (max-width: 820px) {
  body.play-immersive .play-top nav a:not(#btnLeave),
  body.play-immersive .play-top #btnProfileTop,
  body.play-immersive .play-top #btnSettingsTop {
    display: none;
  }
  body.play-immersive .play-top #btnFullscreen:not([hidden]) {
    display: inline-flex !important;
  }
}

/* ========== TELEFON / DAR EKRAN — masa yeniden düzeni ========== */
@media (max-width: 820px) {
  :root {
    --card-w: 54px;
    --card-h: 76px;
    --card-w-sm: 40px;
    --card-h-sm: 56px;
    --card-w-me: 62px;
    --card-h-me: 88px;
    --card-h-me-vis: min(104px, 16dvh);
    --card-w-dummy: 58px;
    --card-h-dummy: 82px;
    --card-w-trick: 72px;
    --card-h-trick: 102px;
    --overlap-x: -28px;
    --overlap-y: -30px;
    --overlap-me: -34px;
    --overlap-dummy: -34px;
    --suit-gap: 6px;
  }

  html, body.play-body {
    height: var(--app-h, 100dvh);
    max-height: var(--app-h, 100dvh);
    overflow: hidden;
  }

  .play-top {
    padding: 0.12rem 0.4rem;
    padding-top: max(0.12rem, env(safe-area-inset-top));
    padding-bottom: 0.1rem;
  }
  .play-top strong { font-size: 0.78rem; }
  .play-top .top-meta { display: none; }
  .hud-chip { font-size: 0.68rem; padding: 0.1rem 0.32rem; }
  .play-top a, .play-top button.linkish {
    margin-left: 0.35rem;
    font-size: 0.72rem;
  }
  .play-top nav {
    padding-right: 44px; /* hamburger Çık'ın hemen sağında */
    flex-wrap: nowrap;
    gap: 0.25rem;
  }
  .play-top nav #btnLeave {
    position: relative;
    z-index: 9460;
    font-weight: 700;
    padding: 0.35rem 0.55rem;
    background: #1e3a5f;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    border-color: #0f1c30;
    border-radius: 8px;
  }

  /* Hamburger: üst barda Çık'ın yanında (keçe üzerine inmesin) */
  body.play-body .bk-sr-burger,
  body.play-immersive .bk-sr-burger,
  body.play-body:fullscreen .bk-sr-burger,
  body.play-body:-webkit-full-screen .bk-sr-burger,
  body.play-immersive:fullscreen .bk-sr-burger,
  body.play-immersive:-webkit-full-screen .bk-sr-burger {
    top: max(4px, env(safe-area-inset-top, 0px)) !important;
    right: max(6px, env(safe-area-inset-right)) !important;
    z-index: 9461 !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    background: #1e3a5f !important;
    border: 1px solid #0f1c30 !important;
    border-radius: 8px !important;
    color: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  }
  body.play-body .bk-sr-burger.on,
  body.play-immersive .bk-sr-burger.on {
    background: #16304f !important;
  }

  .bbo-shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
    position: relative;
  }
  .bbo-shell.history-collapsed {
    grid-template-columns: 1fr;
  }

  /* Geçmiş: sabit çekmece */
  .history-toggle {
    position: fixed;
    right: max(0.4rem, env(safe-area-inset-right));
    top: calc(2.6rem + env(safe-area-inset-top));
    z-index: 40;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  }
  .history-panel {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(88vw, 320px);
    z-index: 35;
    transform: translateX(105%);
    transition: transform 0.22s ease;
    box-shadow: -8px 0 28px rgba(0,0,0,0.5);
  }
  .bbo-shell:not(.history-collapsed) .history-panel {
    transform: translateX(0);
  }
  .bbo-shell.history-collapsed .history-panel {
    transform: translateX(105%);
    pointer-events: none;
  }

  .table-column {
    min-height: 0;
    height: 100%;
    overflow: hidden;
    max-width: 100%;
  }
  .bbo-shell:has(.felt.dummy-side-left) .table-column,
  .bbo-shell:has(.felt.dummy-side-right) .table-column,
  .felt-wrap:has(.felt.dummy-side-left),
  .felt-wrap:has(.felt.dummy-side-right) {
    overflow: visible;
  }

  .felt-wrap {
    flex-direction: column;
    min-height: 0;
    flex: 1;
  }

  /* Yan şerit → üstte tek satır (chat için yer) */
  .felt-side {
    width: 100%;
    flex-direction: row;
    align-items: stretch;
    gap: 0.2rem;
    padding: 0 0.3rem;
    margin: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid #1a2430;
    min-height: 0;
  }
  .felt-side .menu-btn { flex: 0 0 auto; align-self: center; }
  .felt-side .imp-box,
  .felt-side .board-badge,
  .felt-side .contract-hud,
  .felt-side .trick-pills,
  .felt-side .side-actions {
    flex: 0 0 auto;
    margin: 0;
    font-size: 0.62rem;
    align-self: stretch;
  }
  .felt-side .imp-box {
    padding: 0.1rem 0.28rem;
    line-height: 1.05;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .felt-side .imp-box .imp-title { display: none; }
  .felt-side .imp-box .imp-row {
    margin-top: 0;
    gap: 0.2rem;
    line-height: 1;
  }
  .felt-side .imp-box .imp-row + .imp-row { margin-top: 0.04rem; }
  .felt-side .imp-box .imp-name {
    font-size: 0.65rem;
    max-width: 5rem;
  }
  .felt-side .imp-box .imp-score { font-size: 0.82rem; }
  .felt-side .imp-box.team .imp-name { font-size: 0.68rem; }
  .felt-side .imp-box.team .imp-score { font-size: 0.9rem; }
  .felt-side .board-badge,
  .felt-side .contract-hud {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    min-height: 0;
    height: auto;
    margin: 0;
    border-width: 3px;
    border-radius: 0;
    padding: 0.08rem 0.05rem;
    gap: 0.04rem;
    justify-content: center;
  }
  .felt-side .board-badge { font-size: 1.15rem; }
  .felt-side .board-badge .dealer-tag {
    font-size: 0.66rem;
    padding: 0.02rem 0.18rem;
  }
  .felt-side .contract-hud .ch-main,
  .felt-side .contract-hud .ch-who { font-size: 0.82rem; }
  .felt-side .contract-hud .ch-lead { display: none; }
  .felt-side .trick-pills {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.15rem;
    min-width: 0;
    pointer-events: auto;
    position: relative;
    z-index: 6;
  }
  .felt-side .trick-pill {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.18rem;
    padding: 0.1rem 0.3rem;
    line-height: 1;
    letter-spacing: 0.02em;
    border-radius: 4px;
    min-height: 100%;
    pointer-events: auto;
    touch-action: manipulation;
  }
  .felt-side .trick-pill strong {
    display: inline;
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1;
    margin: 0;
  }
  .felt-side .contract-hud {
    pointer-events: auto !important;
    touch-action: manipulation;
    position: relative;
    z-index: 6;
    cursor: pointer;
  }
  .felt-side .trick-pills {
    order: 3;
  }
  .felt-side .side-actions {
    order: 4;
    margin: 0;
    margin-left: auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.12rem;
    align-self: stretch;
    width: auto;
  }
  .felt-side .side-actions .btn {
    width: auto;
    min-width: 0;
    padding: 0.12rem 0.32rem;
    font-size: 0.58rem;
    white-space: nowrap;
    min-height: 0;
    height: auto;
    border-radius: 0;
  }
  .felt-side .side-actions .btn.hidden,
  .felt-side .side-actions .dir-call-flag.hidden {
    display: none !important;
  }
  .felt-side .side-quick,
  .felt-side .side-btns {
    display: none !important;
  }

  /* Felt: grid — partner / L-mid-R / ihale+deklare yığını / benim elim */
  .felt {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "top top top"
      "left mid right"
      "stack stack stack"
      "bot bot bot";
    flex: 1;
    min-height: 0;
    height: auto;
    max-height: none;
    gap: 0.15rem 0.2rem;
    padding: 0 0.2rem 0.12rem;
    overflow: hidden;
  }
  .felt.dummy-side-left,
  .felt.dummy-side-right {
    overflow: visible;
  }
  .felt::after {
    font-size: 3.2rem;
    opacity: 0.7;
  }

  .table-mid {
    display: contents;
  }

  .seat-slot {
    position: relative;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    max-width: none !important;
    width: auto;
    z-index: 2;
  }
  .seat-slot.top {
    grid-area: top;
    max-width: 100%;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding-top: 0;
    margin-top: -0.15rem;
    min-height: 0;
    align-self: start;
  }
  .seat-slot.top .seat-name {
    order: 0;
    flex: 0 0 auto;
    margin: 0;
  }
  .seat-slot.top .hand-row {
    order: 1;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    overflow: visible;
    padding: 0;
    margin: 0;
  }
  .seat-slot.left {
    grid-area: left;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.15rem;
    max-width: 100%;
    min-width: 0;
  }
  .seat-slot.right {
    grid-area: right;
    /* Kartlar → isim; isim sağ kenarda, kartlar ismin yanında (içeride) */
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0.15rem;
    max-width: 100%;
    min-width: 0;
  }
  .seat-slot.left .seat-name {
    order: 0;
    align-self: flex-start;
    flex: 0 0 auto;
    margin: 0;
    margin-top: 1.35rem;
  }
  .seat-slot.left .hand-suits {
    order: 1;
    flex: 0 1 auto;
    min-width: 0;
  }
  .seat-slot.right .hand-suits {
    order: 0;
    flex: 0 0 auto;
    min-width: 0;
  }
  .seat-slot.right .seat-name {
    order: 1;
    align-self: flex-start;
    flex: 0 0 auto;
    margin: 0;
    margin-top: 1.35rem;
  }
  .felt .seat-slot.left {
    padding-left: 0;
    box-sizing: border-box;
  }
  .felt .seat-slot.right {
    padding-right: 0;
    box-sizing: border-box;
  }
  .felt .seat-slot.left .hand-suits {
    margin-left: 0;
    max-width: 100%;
  }
  .felt .seat-slot.right .hand-suits {
    margin-right: 0;
    max-width: none;
  }
  .seat-slot.right .hand-suits.backs {
    flex: 0 0 auto;
    max-width: calc(var(--card-w-sm) * 1.6);
  }
  .seat-slot.left .hand-suits.backs {
    flex: 0 0 auto;
    max-width: calc(var(--card-w-sm) * 1.6);
  }
  .seat-slot.bottom {
    grid-area: bot;
    width: 100%;
    z-index: 7;
    padding-bottom: 0.05rem;
    gap: 0.2rem;
    /* İsim kartların üstünde → chat yukarı çıkar */
    flex-direction: column;
  }
  .seat-slot.bottom .seat-name {
    order: -1;
    margin: 0 0 0.1rem;
  }
  .seat-slot.top .hand-row,
  .seat-slot.bottom .hand-row {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    padding: 0 0.15rem 0.1rem;
    scrollbar-width: none;
  }
  .seat-slot.top .hand-row::-webkit-scrollbar,
  .seat-slot.bottom .hand-row::-webkit-scrollbar {
    display: none;
  }

  .seat-slot.left .hand-suits,
  .seat-slot.right .hand-suits {
    max-width: 100%;
  }
  .seat-slot.left .suit-row .pcard,
  .seat-slot.right .suit-row .pcard {
    width: var(--card-w-sm);
    height: var(--card-h-sm);
  }
  .seat-slot.left .suit-row .pcard.dummy-size,
  .seat-slot.right .suit-row .pcard.dummy-size {
    width: var(--card-w-dummy);
    height: var(--card-h-dummy);
  }
  .suit-row .pcard {
    margin-left: var(--overlap-suit, calc(var(--card-w-sm) * -0.7));
  }
  .suit-row .pcard:first-child { margin-left: 0; }

  .seat-name {
    font-size: 0.8rem;
    padding: 0.15rem 0.4rem;
    max-width: 100%;
    min-width: 0;
  }
  .seat-name .nm {
    max-width: min(11rem, 42vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .seat-slot.left .seat-name .nm,
  .seat-slot.right .seat-name .nm {
    max-width: min(7.5rem, 28vw);
  }
  .seat-slot.bottom .seat-name .nm,
  .seat-slot.top .seat-name .nm {
    max-width: min(14rem, 70vw);
  }

  .auction-bid-stack {
    grid-area: stack;
    width: 100%;
    max-width: 100%;
  }
  .auction-center {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    flex: none;
    overflow: hidden;
    pointer-events: auto;
    z-index: 7;
    max-height: min(28dvh, 11rem);
    display: flex;
    flex-direction: column;
  }
  .auction-head {
    position: sticky;
    top: 0;
    z-index: 2;
    flex: 0 0 auto;
  }
  .auction-head span {
    padding: 0.14rem 0.05rem;
    font-size: 0.72rem;
    line-height: 1.05;
  }
  .auction-grid {
    min-height: 0;
    max-height: min(22dvh, 8.5rem);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  .auction-cell {
    min-height: 26px;
    padding: 0.1rem 0.04rem;
    font-size: 0.8rem;
  }
  .auction-cell .bid-wait {
    font-size: 0.58rem;
  }
  .trick-center {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    /* Telefon: oynanan kartlar orta boslukta — dummy uzerine binmesin */
    width: min(100%, calc(var(--card-w-trick) * 2.05));
    height: min(calc(var(--card-h-trick) * 1.45), 20dvh);
    min-width: 140px;
    min-height: 110px;
    max-width: 100%;
    align-self: center;
    flex: 0 0 auto;
    margin: 0.15rem auto;
    z-index: 5;
    overflow: visible;
  }

  .felt .table-mid {
    z-index: 5;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  /* Dummy yan sütundayken: löveyi boş keçeye kaydır (genel ortalamayı ezer) */
  .felt.dummy-side-right .table-mid {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding-top: 0.55rem !important;
    padding-left: 0.15rem !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }
  .felt.dummy-side-left .table-mid {
    align-items: flex-end !important;
    justify-content: flex-start !important;
    padding-top: 0.55rem !important;
    padding-right: 0.15rem !important;
    padding-left: 0 !important;
    overflow: visible !important;
  }
  .felt.dummy-side-right .trick-center {
    margin: 0.1rem auto 0 0.1rem !important;
    align-self: flex-start !important;
  }
  .felt.dummy-side-left .trick-center {
    margin: 0.1rem 0.1rem 0 auto !important;
    align-self: flex-end !important;
  }
  .felt .seat-slot.left,
  .felt .seat-slot.right {
    z-index: 4;
    overflow: visible;
  }
  .trick-center .from-top {
    top: 6%;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .trick-center .from-bottom {
    bottom: 6%;
    left: 50%;
    transform: translate(-50%, 0);
  }
  .trick-center .from-left {
    left: 14%;
    top: 50%;
    transform: translate(0, -50%);
  }
  .trick-center .from-right {
    right: 14%;
    top: 50%;
    transform: translate(0, -50%);
  }
  .trick-center .pcard.fly-in.from-top {
    animation: flyTopPhone 0.35s ease-out;
  }
  .trick-center .pcard.fly-in.from-bottom {
    animation: flyBottomPhone 0.35s ease-out;
  }
  .trick-center .pcard.fly-in.from-left {
    animation: flyLeftPhone 0.35s ease-out;
  }
  .trick-center .pcard.fly-in.from-right {
    animation: flyRightPhone 0.35s ease-out;
  }
  @keyframes flyTopPhone {
    from { transform: translate(-50%, -65%); opacity: 0; }
    to { transform: translate(-50%, 10%); opacity: 1; }
  }
  @keyframes flyBottomPhone {
    from { transform: translate(-50%, 65%); opacity: 0; }
    to { transform: translate(-50%, -10%); opacity: 1; }
  }
  @keyframes flyLeftPhone {
    from { transform: translate(-65%, -50%); opacity: 0; }
    to { transform: translate(10%, -50%); opacity: 1; }
  }
  @keyframes flyRightPhone {
    from { transform: translate(65%, -50%); opacity: 0; }
    to { transform: translate(-10%, -50%); opacity: 1; }
  }

  .bid-panel {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0 0 8px 8px;
    z-index: 8;
    padding: 0.22rem 0.3rem;
    background: linear-gradient(#faf7f0, #ebe4d4);
    border: 1px solid #8d7c62;
    box-shadow: 0 3px 10px rgba(0,0,0,0.22);
  }
  .bid-panel .bid-row {
    gap: 0.18rem;
    margin-bottom: 0.16rem;
  }
  .bid-panel .bid-row:last-child { margin-bottom: 0; }
  .bid-panel .bid-row-strains .strains {
    width: 100%;
    min-height: 32px;
    padding: 0.1rem;
    gap: 0.16rem;
  }
  .bid-panel .levels,
  .bid-panel .strains {
    gap: 0.14rem;
  }
  .bid-panel .pass,
  .bid-panel .dbl,
  .bid-panel .rdbl,
  .bid-panel .alert-btn {
    flex: 0 0 auto;
    min-width: 2.4rem;
    min-height: 32px;
    font-size: 0.72rem;
    padding: 0.18rem 0.22rem;
    border-radius: 6px;
  }
  .bid-panel .pass { min-width: 2.8rem; font-size: 0.78rem; }
  .bid-panel button[data-level],
  .bid-panel button[data-strain] {
    min-height: 32px;
    font-size: 0.88rem;
    border-radius: 5px;
  }
  .bid-panel button[data-strain] {
    font-size: 1.05rem;
    line-height: 1;
  }
  .bid-panel .strain-NT {
    font-size: 0.78rem !important;
  }
  .bid-panel .bid-explain input {
    min-height: 32px;
    font-size: 0.75rem;
    padding: 0.2rem 0.35rem;
  }
  /* Telefon: ihale geçmişi kompakt */
  .auction-center {
    border-radius: 6px;
  }
  .auction-head span {
    padding: 0.14rem 0.04rem;
    font-size: 0.68rem;
  }
  .auction-cell {
    min-height: 26px;
    font-size: 0.8rem;
    padding: 0.08rem 0.04rem;
    line-height: 1.2;
  }

  .claim-toast,
  .claim-toast.wait-hands {
    position: absolute;
    left: 50%;
    top: 40%;
    width: min(92%, 280px);
  }

  .seat-slot.bottom .pcard.me-size {
    width: var(--card-w-me) !important;
    height: var(--card-h-me-vis) !important;
  }
  .seat-slot.bottom .pcard.me-size img {
    min-height: 0;
    height: 100% !important;
    object-fit: cover;
  }

  .controls-below {
    padding: 0.25rem 0.45rem;
    flex-shrink: 0;
  }
  .chat-bar {
    flex: none;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0.35rem 0.4rem;
    padding-left: max(0.4rem, env(safe-area-inset-left));
    padding-right: max(0.4rem, env(safe-area-inset-right));
    padding-bottom: max(0.35rem, env(safe-area-inset-bottom));
    gap: 0.3rem;
    overflow: visible;
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--vv-bottom, 0px);
    z-index: 9000;
    min-width: 0;
    pointer-events: auto;
    background: #f4f4f2;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.22);
  }
  .table-column {
    padding-bottom: var(--chat-h, 7.5rem) !important;
    box-sizing: border-box;
  }

  /* Özel sohbet: ortalanmış alt sayfa — yatay taşma yok */
  .dm-panel {
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    width: auto;
    max-width: none;
    transform: none;
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + var(--kb-inset, 0px));
    max-height: 52dvh;
    z-index: 9600;
  }
  /* Dokunma hedefleri */
  .dm-head .xbtn,
  .xbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
  .chat-bar .chat-log {
    display: block;
    flex: 0 0 auto;
    order: 0;
    width: 100%;
    height: var(--chat-log-h, calc(1.35em * 2 + 0.7rem));
    min-height: var(--chat-log-h, calc(1.35em * 2 + 0.7rem));
    max-height: var(--chat-log-h, calc(1.35em * 2 + 0.7rem));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.78rem;
    line-height: 1.35;
    padding: 0.28rem 0.4rem;
    margin: 0;
    background: #fff;
    border: 1px solid #8a8a82;
    border-radius: 5px;
    color: #000 !important;
    -webkit-text-fill-color: #000;
    font-weight: 800;
    opacity: 1;
    white-space: pre-wrap;
    word-break: break-word;
    box-sizing: border-box;
  }
  .chat-bar .chat-resize {
    order: -1;
    flex: 0 0 auto;
    position: relative;
    width: auto;
    height: 32px;
    margin: 0 -0.4rem;
    padding: 8px 0 6px;
    background: linear-gradient(#e4e2dc, #f0eee8);
    border-bottom: 1px solid #ccc;
    z-index: 5;
    touch-action: none;
  }
  .chat-bar .chat-resize::after {
    width: 64px;
    height: 7px;
    border-radius: 5px;
    background: #7a7a72;
  }
  .chat-bar .chat-compose {
    order: 1;
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    padding-top: 0.1rem;
    position: relative;
    z-index: 42;
    background: #f4f4f2;
  }
  .chat-bar input::placeholder {
    color: #333 !important;
    opacity: 1;
  }
  .chat-bar .btn-ghost {
    color: #111 !important;
    background: #deded8;
    border: 1px solid #9a9a90;
    font-weight: 700;
  }
  .chat-bar #chatSend {
    font-weight: 800;
  }
  .chat-bar .chat-compose input,
  .chat-bar input {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    min-height: 44px;
    font-size: 1rem; /* iOS zoom engeli */
    padding: 0.45rem 0.55rem;
    position: relative;
    z-index: 41;
    pointer-events: auto;
    -webkit-user-select: text;
    user-select: text;
  }
  .chat-bar #chatSend,
  .chat-bar #btnChatClear {
    flex: 0 0 auto;
    min-height: 44px;
    pointer-events: auto;
    position: relative;
    z-index: 41;
  }

  .bbo-shell:not(.history-collapsed) .seat-slot.left,
  .bbo-shell:not(.history-collapsed) .seat-slot.right {
    max-width: 100%;
  }
  .bbo-shell:not(.history-collapsed) .seat-slot.left .suit-row .pcard,
  .bbo-shell:not(.history-collapsed) .seat-slot.right .suit-row .pcard {
    width: var(--card-w-sm);
    height: var(--card-h-sm);
  }
  .bbo-shell:not(.history-collapsed) .auction-center {
    width: 100%;
  }
}

/* ========== TELEFON / TABLET — dikey ========== */
@media (max-width: 820px) and (orientation: portrait) {
  :root {
    --card-w: 22px;
    --card-h: 31px;
    --card-w-me: 40px;
    --card-h-me: 56px;
    --card-h-me-vis: 52px;
    --card-w-dummy: 34px;
    --card-h-dummy: 48px;
    --card-w-trick: 40px;
    --card-h-trick: 56px;
    --card-w-sm: 20px;
    --card-h-sm: 28px;
    --overlap-me: -20px;
    --overlap-dummy: -16px;
  }
  .felt {
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    gap: 0.1rem 0.12rem;
    padding: 0 0.12rem 0.12rem;
  }
  .seat-slot.bottom { padding-bottom: 0.05rem; }
  .chat-bar {
    padding-bottom: calc(max(0.35rem, env(safe-area-inset-bottom)) + var(--kb-inset, 0px));
  }

  /* Chat: görünen ekranın altına sabit — adres çubuğu varken de yazma satırı görünsün.
     Masa alanı --chat-h kadar kısaltılır (fitCards ölçekler). */
  .table-column {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    padding-bottom: var(--chat-h, 7.5rem) !important;
    box-sizing: border-box;
  }
  .felt-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  .controls-below {
    flex: 0 0 auto;
    padding-top: 0.06rem;
    padding-bottom: 0.06rem;
  }
  .chat-bar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--vv-bottom, 0px) !important;
    top: auto !important;
    flex: none;
    width: 100%;
    max-width: 100%;
    margin: 0;
    z-index: 9000;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.22);
    padding-top: 0.25rem;
    padding-left: max(0.4rem, env(safe-area-inset-left));
    padding-right: max(0.4rem, env(safe-area-inset-right));
    padding-bottom: max(0.35rem, env(safe-area-inset-bottom));
    background: #f4f4f2;
  }
  .play-top {
    padding-top: max(0.1rem, env(safe-area-inset-top));
    padding-bottom: 0.08rem;
  }

  .seat-slot.left .seat-name,
  .seat-slot.right .seat-name {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.12rem;
    white-space: normal;
    min-width: 0;
    width: fit-content;
    max-width: 1.55rem;
    padding: 0.15rem 0.08rem;
    box-sizing: border-box;
  }
  .seat-slot.left .seat-name {
    align-self: flex-start;
  }
  .seat-slot.right .seat-name {
    align-self: flex-start;
  }
  .seat-slot.left .seat-name .nm,
  .seat-slot.right .seat-name .nm {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    max-width: none;
    max-height: min(6.5rem, 18dvh);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.7rem;
    line-height: 1.05;
    letter-spacing: 0.01em;
  }
  /* Sağ oyuncu: isim aşağıdan yukarı */
  .seat-slot.right .seat-name .nm {
    writing-mode: sideways-lr;
  }
  @supports not (writing-mode: sideways-lr) {
    .seat-slot.right .seat-name .nm {
      writing-mode: vertical-lr;
      transform: rotate(180deg);
    }
  }
  .seat-slot.left .seat-name .dir,
  .seat-slot.right .seat-name .dir {
    width: 1.05rem;
    height: 1.05rem;
    font-size: 0.6rem;
    flex-shrink: 0;
  }
}

/* ========== TELEFON / TABLET — yatay ========== */
@media (max-width: 1100px) and (orientation: landscape) and (max-height: 560px) {
  :root {
    --card-w: 42px;
    --card-h: 60px;
    --card-w-sm: 34px;
    --card-h-sm: 48px;
    --card-w-me: 48px;
    --card-h-me: 68px;
    --card-h-me-vis: min(56px, 22dvh);
    --card-w-dummy: 36px;
    --card-h-dummy: 50px;
    --card-w-trick: 44px;
    --card-h-trick: 62px;
    --overlap-x: -22px;
    --overlap-y: -24px;
    --overlap-me: -26px;
    --overlap-dummy: -22px;
  }
  .play-top {
    padding: 0.15rem 0.4rem;
  }
  .play-top strong { font-size: 0.75rem; }
  .felt {
    grid-template-columns: minmax(48px, 14%) minmax(0, 1fr) minmax(48px, 14%);
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    gap: 0.1rem;
    padding: 0.15rem;
  }
  .felt-side .side-actions .btn:nth-child(n+5) { display: none; }
  .chat-bar .chat-log {
    min-height: calc(1.3em * 2 + 0.45rem);
    max-height: calc(1.3em * 2 + 0.55rem);
    font-size: 0.72rem;
    color: #000 !important;
    -webkit-text-fill-color: #000;
    font-weight: 800;
  }
  .seat-plate { font-size: 0.7rem; padding: 0.1rem 0.35rem; }
}

/* Çok kısa ekran (yatay telefon / küçük yükseklik) */
@media (max-width: 820px) and (max-height: 560px) {
  :root {
    --card-h-me-vis: 44px;
    --card-w-me: 36px;
    --card-h-dummy: 40px;
    --card-w-dummy: 28px;
  }
  .felt-side .side-actions .btn:nth-child(n+5) { display: none; }
  .chat-bar .chat-log {
    min-height: calc(1.25em * 2 + 0.4rem);
    max-height: calc(1.25em * 2 + 0.5rem);
    font-size: 0.7rem;
    color: #000 !important;
    -webkit-text-fill-color: #000;
    font-weight: 800;
  }
  .felt {
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  }
}

/* Dar telefon */
@media (max-width: 400px) {
  :root {
    --overlap-me: -16px;
    --overlap-dummy: -14px;
    --card-w-me: 34px;
  }
  .felt {
    grid-template-columns: 28px minmax(0, 1fr) 28px;
  }
}

/* ========== Masaüstü / büyük ekran: yazılı el (güney + dummy) biraz büyük ========== */
@media (min-width: 1101px) {
}

/* ===== UI2: sıra / ihale peek / son löve / chat adı ===== */
.contract-hud {
  cursor: pointer;
  appearance: none;
  font: inherit;
  text-align: center;
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.contract-hud:hover { filter: brightness(1.04); }

/* İhale peek: masa ortasında deklare kutusu */
.peek-backdrop {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.28);
  pointer-events: auto;
}
.peek-backdrop.hidden { display: none !important; }
.auction-peek.auction-peek-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 45;
  width: min(248px, 72%);
  max-height: min(70%, 28rem);
  overflow: auto;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  color: var(--ink);
  pointer-events: auto;
}
.auction-peek.auction-peek-box.hidden { display: none !important; }
.auction-peek-box .auction-peek-x {
  position: absolute;
  right: 0.2rem;
  top: 0.15rem;
  z-index: 3;
  width: 1.8rem;
  height: 1.8rem;
  border: none;
  background: rgba(0,0,0,0.35);
  color: #fff;
  border-radius: 4px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.auction-peek-table {
  background: #f4f1ea;
  border: 1px solid #8a9a8a;
  border-radius: 6px;
  box-shadow:
    0 10px 32px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.65);
  overflow: hidden;
  pointer-events: auto;
}
.auction-peek-table .auction-head {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.auction-peek-table .auction-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.auction-peek-box .ap-empty {
  background: #f4f1ea;
  border: 1px solid #8a9a8a;
  border-radius: 6px;
  padding: 0.85rem 1rem;
  text-align: center;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.trick-center.trick-replaying {
  z-index: 30;
  outline: 2px dashed rgba(255, 255, 255, 0.35);
  outline-offset: 4px;
}

.auction-peek.hidden { display: none !important; }
.auction-peek .xbtn {
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}
.auction-peek-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
}
.auction-peek-body {
  font-size: 0.78rem;
  line-height: 1.45;
  max-height: 220px;
  overflow: auto;
}
.auction-peek-body .ap-row {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 0.25rem;
  padding: 0.12rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.auction-peek-body .ap-seat { font-weight: 800; color: var(--accent); }
.auction-peek-body .ap-empty,
.ap-empty { color: var(--muted); font-style: italic; }

.last-trick-box {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.3rem 0.35rem;
  font-size: 0.68rem;
}
.last-trick-box.hidden { display: none !important; }
.lt-title { font-weight: 800; color: var(--muted); margin-bottom: 0.2rem; letter-spacing: 0.02em; }
.lt-cards { display: flex; flex-wrap: wrap; gap: 0.2rem; }
.lt-card {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.1rem 0.25rem;
  font-weight: 700;
}
.lt-card .lt-s { color: var(--accent); font-size: 0.62rem; font-weight: 800; }
.lt-card.suit-h, .lt-card.suit-d { color: #b33; }
.lt-win { margin-top: 0.2rem; font-weight: 700; color: var(--ink); }

.turn-banner {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  z-index: 9;
  background: #f3e4a8;
  color: #3a2e08;
  border: 1px solid var(--gold-turn);
  border-radius: 999px;
  padding: 0.28rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 800;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  pointer-events: none;
  white-space: nowrap;
}
.turn-banner.hidden { display: none !important; }
.turn-banner.me-turn { background: #d8f0e0; border-color: #1a7a4c; color: #0d4a30; }

.chat-log .chat-line { display: block; margin: 0.05rem 0; }
.chat-log .chat-name {
  color: var(--chat-name);
  -webkit-text-fill-color: var(--chat-name);
  font-weight: 800;
}

@media (max-width: 820px) {
  .chat-bar .chat-log .chat-name,
  .chat-log .chat-name {
    color: var(--chat-name) !important;
    -webkit-text-fill-color: var(--chat-name) !important;
    font-weight: 800 !important;
  }
}

.imp-box, .board-badge, .contract-hud {
  border-radius: 8px;
}

@media (max-width: 820px) {
  .play-top {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
  .play-top-center {
    grid-column: 1 / -1;
    order: -1;
    font-size: 0.85rem;
  }
  /* Telefon: ihale kutusu masa ortasında (felt içinde absolute) */
  .felt-side {
    position: relative;
    z-index: 250;
  }
  .auction-peek.auction-peek-box {
    position: absolute !important;
    left: 50% !important;
    top: 42% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(94%, 20rem) !important;
    max-height: min(58dvh, 24rem);
    z-index: 45 !important;
  }
  .peek-backdrop {
    position: absolute !important;
    inset: 0 !important;
    z-index: 40 !important;
  }
}

/* ===== UI3 tweaks ===== */
.turn-banner { display: none !important; }

.trick-pills {
  cursor: default;
}
.trick-pill {
  background: #fff !important;
  color: #1c2430 !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px;
}
.trick-pill strong {
  color: #1c2430 !important;
}
.trick-pill:hover {
  background: #eef4ff !important;
  border-color: #7aa2e0 !important;
  filter: none;
}
.trick-pill:active,
.trick-pill:focus-visible {
  background: #dbe7ff !important;
  border-color: #3b6fb8 !important;
}

.last-trick-box { display: none !important; }

.ap-row.ap-fly,
.lt-card.tr-fly {
  animation: apIn 0.28s ease-out;
}
@keyframes apIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.trick-replay-body .tr-stage {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-height: 1.8rem;
  margin-bottom: 0.35rem;
}
.trick-replay-body .tr-win {
  font-weight: 800;
  color: var(--accent);
  font-size: 0.8rem;
}
.trick-replay-peek .lt-card {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
}

/* =========================================================================
   cards12 — TELEFON masası (<= 820px). Masaüstü (>=1101px) dokunulmadı.
   Hedef:
     • Yalnız İKİ açık el: kendi elim (alt, BÜYÜK) + dummy (yan ya da üst).
     • Rakipler yalnız minik sırt destesi, en dar sütun.
     • İsimler kompakt ve kart alanını İTMEZ (yan dummy'de isim kartların
       ÜSTÜNDE yatay; rakip sütunlarında dikey ve ~1.2rem dar).
     • Yatay sayfa kaydırması yok; her şey keçenin içinde.
   Ölçüler fitCards() tarafından --card-* / --dummy-col / --backs-col ile verilir.
   ========================================================================= */
@media (max-width: 820px) {
  /* --- Sayfa taşması: kesin kapalı --- */
  .table-column,
  .felt-wrap,
  .bbo-shell:has(.felt.dummy-side-left) .table-column,
  .bbo-shell:has(.felt.dummy-side-right) .table-column,
  .felt-wrap:has(.felt.dummy-side-left),
  .felt-wrap:has(.felt.dummy-side-right) {
    overflow: hidden !important;
    max-width: 100% !important;
  }

  /* --- Keçe: 3 sütunlu grid — ihale+deklare yapışık yığın --- */
  .felt,
  .felt.dummy-side-left,
  .felt.dummy-side-right,
  .felt.dummy-side-top {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
    grid-template-areas:
      "top top top"
      "left mid right"
      "stack stack stack"
      "bot bot bot" !important;
    gap: 0.1rem 0.12rem !important;
    row-gap: 0.1rem !important;
    padding: 0.08rem 0.12rem 0.05rem !important;
    overflow: hidden !important;
    min-height: 0 !important;
    --suit-gap: 4px;
  }
  .felt,
  .felt.dummy-side-top {
    grid-template-columns:
      var(--backs-col, 34px) minmax(0, 1fr) var(--backs-col, 34px) !important;
  }
  .felt.dummy-side-left {
    grid-template-columns:
      var(--dummy-col, 52%) minmax(0, 1fr) var(--backs-col, 34px) !important;
  }
  .felt.dummy-side-right {
    grid-template-columns:
      var(--backs-col, 34px) minmax(0, 1fr) var(--dummy-col, 52%) !important;
  }

  .felt .seat-slot {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .felt .seat-slot.top { grid-area: top !important; }
  .felt .seat-slot.left { grid-area: left !important; }
  .felt .seat-slot.right { grid-area: right !important; }
  .felt .seat-slot.bottom { grid-area: bot !important; }
  .felt .auction-bid-stack {
    grid-area: stack !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    z-index: 12 !important;
    justify-self: stretch !important;
  }
  .felt .auction-bid-stack .auction-center {
    grid-area: unset !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(28dvh, 11rem);
    margin: 0 !important;
    border-radius: 8px 8px 0 0 !important;
    border-bottom: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .felt .auction-bid-stack .auction-grid {
    max-height: min(22dvh, 8.5rem);
    min-height: 0 !important;
    flex: 1 1 auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: thin;
  }
  .felt .auction-bid-stack .bid-panel {
    grid-area: unset !important;
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 0 8px 8px !important;
  }
  .felt .auction-bid-stack .auction-center.hidden + .bid-panel {
    border-radius: 8px !important;
  }
  .felt .auction-center.hidden {
    display: none !important;
  }

  /* table-mid içeriği keçeye açılsın */
  .felt .table-mid,
  .felt.dummy-side-left .table-mid,
  .felt.dummy-side-right .table-mid,
  .felt.dummy-side-top .table-mid {
    display: contents !important;
  }

  /* Deklare sırası: hafif yukarı — fazla kaldırma kart harflerini keser */
  .felt.is-bidding {
    --bid-lift: 0.85rem;
    padding-bottom: 0.15rem !important;
  }
  .felt.is-bidding .auction-bid-stack,
  .felt.is-bidding .seat-slot.bottom {
    transform: translateY(calc(-1 * var(--bid-lift))) !important;
    z-index: 15 !important;
    will-change: transform;
  }
  .felt .seat-slot.bottom {
    min-height: calc(var(--card-h-me-vis) * 0.72 + 1.4rem) !important;
  }
  .felt.is-bidding .seat-slot.bottom {
    min-height: calc(var(--card-h-me-vis) * 0.8 + 1.2rem) !important;
  }
  .table-column {
    padding-bottom: calc(
      var(--chat-h, 7.5rem) + max(0px, var(--vv-bottom, 0px)) + 6px
    ) !important;
  }
  .table-column:has(.felt.is-bidding) {
    padding-bottom: calc(
      var(--chat-h, 7.5rem) + max(0px, var(--vv-bottom, 0px)) + 8px
    ) !important;
  }

  /* Overlay'ler (ihale peek / toast) masa ortasına tutunsun */
  .felt .peek-backdrop,
  .felt .auction-peek,
  .felt .claim-toast,
  .felt .claim-toast.wait-hands {
    grid-area: mid !important;
  }

  /* --- İsim plakaları: kompakt --- */
  .felt .seat-name {
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    font-size: 0.68rem !important;
    line-height: 1.1 !important;
    padding: 0.08rem 0.28rem 0.08rem 0.1rem !important;
    gap: 0.18rem !important;
    border-width: 1px !important;
    border-radius: 4px !important;
  }
  .felt .seat-name .dir {
    width: 0.95rem !important;
    height: 0.95rem !important;
    font-size: 0.55rem !important;
  }
  .felt .seat-name .badge {
    font-size: 0.55rem !important;
    padding: 0 0.2rem !important;
    margin-left: 0.12rem !important;
  }
  .felt .seat-slot.top .seat-name .nm,
  .felt .seat-slot.bottom .seat-name .nm {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    max-width: min(12rem, 52vw) !important;
    max-height: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* =======================================================================
     ÜST KOLTUK
     ======================================================================= */
  .felt .seat-slot.top {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    align-self: start !important;
  }
  .felt .seat-slot.top .seat-name {
    order: 0 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    align-self: center !important;
  }
  .felt .seat-slot.top .hand-row {
    order: 1 !important;
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 55% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .felt .seat-slot.top .hand-row .pcard {
    width: var(--card-w-sm) !important;
    height: var(--card-h-sm) !important;
    min-height: 0 !important;
    margin-left: var(--overlap-backs) !important;
    flex: 0 0 auto !important;
  }
  .felt .seat-slot.top .hand-row .pcard:first-child { margin-left: 0 !important; }

  /* Dummy ÜSTTE: deklaran (alt) ile aynı kart ölçüsü / yelpaze */
  .felt.dummy-side-top .seat-slot.top {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.06rem !important;
    overflow: visible !important;
  }
  .felt.dummy-side-top .seat-slot.top .seat-name {
    order: -1 !important;
    align-self: center !important;
  }
  .felt.dummy-side-top .seat-slot.top .hand-row {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    justify-content: center !important;
    align-items: flex-end !important;
    min-height: var(--card-h-me-vis) !important;
  }
  .felt.dummy-side-top .seat-slot.top .hand-row .pcard.me-size,
  .felt.dummy-side-top .seat-slot.top .hand-row .pcard.me-size.playable,
  .felt.dummy-side-top .seat-slot.top .hand-row .pcard.dummy-size,
  .felt.dummy-side-top .seat-slot.top .hand-row .pcard.dummy-size.playable {
    width: var(--card-w-me) !important;
    height: var(--card-h-me-vis) !important;
    min-height: var(--card-h-me-vis) !important;
    margin-left: var(--overlap-me) !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
  }
  .felt.dummy-side-top .seat-slot.top .hand-row .pcard.me-size.suit-break,
  .felt.dummy-side-top .seat-slot.top .hand-row .pcard.dummy-size.suit-break {
    margin-left: calc(var(--overlap-me) + var(--suit-gap)) !important;
  }
  .felt.dummy-side-top .seat-slot.top .hand-row .pcard.me-size:first-child,
  .felt.dummy-side-top .seat-slot.top .hand-row .pcard.dummy-size:first-child {
    margin-left: 0 !important;
  }
  .felt.dummy-side-top .seat-slot.top .hand-row .pcard.me-size img,
  .felt.dummy-side-top .seat-slot.top .hand-row .pcard.dummy-size img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
  }
  .felt.dummy-side-top .seat-slot.top .pcard.css-face.me-size .cf-br {
    display: none;
  }
  .felt.dummy-side-top .seat-slot.top .pcard.css-face.me-size .cf-pip {
    top: 58%;
    font-size: calc(var(--cf-w) * 0.42);
  }

  /* =======================================================================
     YAN KOLTUKLAR — ortak
     ======================================================================= */
  .felt .seat-slot.left,
  .felt .seat-slot.right {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.12rem !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    z-index: 4 !important;
  }

  /* Rakip yan koltuk: isim DİKEY ve dar, altında minik sırt destesi */
  .felt .seat-slot.left .seat-name,
  .felt .seat-slot.right .seat-name {
    order: -1 !important;
    align-self: center !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0.1rem 0.04rem !important;
    max-width: 100% !important;
  }
  .felt .seat-slot.left .seat-name .nm,
  .felt .seat-slot.right .seat-name .nm {
    writing-mode: vertical-rl !important;
    text-orientation: mixed !important;
    transform: none !important;
    max-width: 1.05rem !important;
    max-height: min(5.5rem, 20dvh) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 0.62rem !important;
    letter-spacing: 0 !important;
  }
  .felt .seat-slot.right .seat-name .nm { writing-mode: sideways-lr !important; }
  @supports not (writing-mode: sideways-lr) {
    .felt .seat-slot.right .seat-name .nm {
      writing-mode: vertical-lr !important;
      transform: rotate(180deg) !important;
    }
  }
  .felt .seat-slot.left .hand-suits,
  .felt .seat-slot.right .hand-suits {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  .felt .seat-slot.left .hand-suits.backs,
  .felt .seat-slot.right .hand-suits.backs {
    align-items: center !important;
  }
  .felt .seat-slot.left .hand-suits.backs .suit-row,
  .felt .seat-slot.right .hand-suits.backs .suit-row {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .felt .seat-slot.left .suit-row .pcard:not(.dummy-size),
  .felt .seat-slot.right .suit-row .pcard:not(.dummy-size) {
    width: var(--card-w-sm) !important;
    height: var(--card-h-sm) !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
  }

  /* =======================================================================
     YAN DUMMY — geniş sütun, isim kartların ÜSTÜNDE yatay (yer çalmaz)
     ======================================================================= */
  .felt.dummy-side-left .seat-slot.left,
  .felt.dummy-side-right .seat-slot.right {
    align-items: stretch !important;
    overflow: hidden !important;
    z-index: 6 !important;
  }
  .felt.dummy-side-left .seat-slot.left .seat-name,
  .felt.dummy-side-right .seat-slot.right .seat-name {
    order: -1 !important;
    flex-direction: row !important;
    align-self: flex-start !important;
    margin: 0 0 0.08rem !important;
    padding: 0.06rem 0.3rem 0.06rem 0.1rem !important;
    max-width: 100% !important;
  }
  .felt.dummy-side-right .seat-slot.right .seat-name {
    align-self: flex-end !important;
  }
  .felt.dummy-side-left .seat-slot.left .seat-name .nm,
  .felt.dummy-side-right .seat-slot.right .seat-name .nm {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    transform: none !important;
    max-width: min(8rem, 32vw) !important;
    max-height: none !important;
    font-size: 0.65rem !important;
  }
  .felt.dummy-side-left .seat-slot.left .hand-suits,
  .felt.dummy-side-right .seat-slot.right .hand-suits {
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  .felt.dummy-side-left .seat-slot.left .hand-suits {
    align-items: flex-start !important;
  }
  .felt.dummy-side-right .seat-slot.right .hand-suits {
    align-items: flex-end !important;
  }
  /* Renk satırları sabit yükseklikte → asla üst üste binmez */
  .felt.dummy-side-left .seat-slot.left .suit-row,
  .felt.dummy-side-right .seat-slot.right .suit-row {
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
    height: var(--card-h-dummy) !important;
    min-height: var(--card-h-dummy) !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  .felt.dummy-side-left .seat-slot.left .suit-row .pcard.dummy-size,
  .felt.dummy-side-right .seat-slot.right .suit-row .pcard.dummy-size,
  .felt.dummy-side-left .seat-slot.left .suit-row .pcard.dummy-size.playable,
  .felt.dummy-side-right .seat-slot.right .suit-row .pcard.dummy-size.playable {
    width: var(--card-w-dummy) !important;
    height: var(--card-h-dummy) !important;
    min-height: var(--card-h-dummy) !important;
    margin-left: var(--overlap-dummy) !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
  }
  .felt.dummy-side-left .seat-slot.left .suit-row .pcard.dummy-size:first-child,
  .felt.dummy-side-right .seat-slot.right .suit-row .pcard.dummy-size:first-child,
  .felt.dummy-side-left .seat-slot.left .suit-row .pcard.dummy-size.playable:first-child,
  .felt.dummy-side-right .seat-slot.right .suit-row .pcard.dummy-size.playable:first-child {
    margin-left: 0 !important;
  }
  /* Yükseklik kırpıldığında kartın ÜST kısmı (indeks) görünsün */
  .felt.dummy-side-left .seat-slot.left .suit-row .pcard.dummy-size img,
  .felt.dummy-side-right .seat-slot.right .suit-row .pcard.dummy-size img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
  }

  /* =======================================================================
     KENDİ ELİM — alt, BÜYÜK, 13 kart taşmadan
     ======================================================================= */
  .felt .seat-slot.bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    gap: 0.06rem !important;
    padding: 0 0 0.04rem !important;
    margin: 0 !important;
    overflow: visible !important;
    z-index: 7 !important;
  }
  .felt .seat-slot.bottom .seat-name {
    order: -1 !important;
    align-self: center !important;
    margin: 0 !important;
  }
  .felt .seat-slot.bottom .hand-row {
    order: 1 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: flex-end !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: var(--card-h-me-vis) !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .felt .seat-slot.bottom .hand-row .pcard.me-size,
  .felt .seat-slot.bottom .hand-row .pcard.me-size.playable,
  .felt .seat-slot.bottom .pcard.me-size {
    width: var(--card-w-me) !important;
    height: var(--card-h-me-vis) !important;
    min-height: var(--card-h-me-vis) !important;
    margin-left: var(--overlap-me) !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
  }
  .felt .seat-slot.bottom .hand-row .pcard.me-size:not(.css-face),
  .felt .seat-slot.bottom .pcard.me-size:not(.css-face) {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }
  .felt .seat-slot.bottom .hand-row .pcard.me-size.playable:not(.css-face) {
    outline: 2px solid rgba(218, 168, 32, 0.9);
    outline-offset: -2px;
  }
  .felt .seat-slot.bottom .hand-row .pcard.me-size:first-child {
    margin-left: 0 !important;
  }
  .felt .seat-slot.bottom .hand-row .pcard.me-size.suit-break {
    margin-left: calc(var(--overlap-me) + var(--suit-gap)) !important;
  }
  .felt .seat-slot.bottom .hand-row .pcard.me-size img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
    object-position: top center !important;
    transform: none !important;
  }
  .felt .seat-slot.bottom .pcard.playable:hover {
    transform: translateY(-6px) !important;
  }

  /* =======================================================================
     ORTA ALAN — löve (ihale «auc» satırında; table-mid = contents)
     ======================================================================= */
  .felt .trick-center,
  .felt.dummy-side-left .trick-center,
  .felt.dummy-side-right .trick-center {
    grid-area: mid !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: min(100%, calc(var(--card-w-trick) * 2.35)) !important;
    height: min(calc(var(--card-h-trick) * 1.7), 32dvh) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    justify-self: center !important;
    align-self: center !important;
    overflow: visible !important;
    z-index: 5 !important;
  }
  /* İhale sırasında boş löve kutusu ihale tablosunu ezmesin */
  .felt .trick-center:empty {
    height: 0 !important;
    width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
  }
  .felt .trick-center .pcard,
  .felt .trick-center .pcard.trick-size {
    width: var(--card-w-trick) !important;
    height: var(--card-h-trick) !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
  .felt .trick-center .pcard img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  /* Seyirci telefonu: dört açık el. Oyuncu düzenine dokunmaz. */
  body.spectate-mode .felt,
  body.spectate-mode .felt.dummy-side-left,
  body.spectate-mode .felt.dummy-side-right,
  body.spectate-mode .felt.dummy-side-top {
    grid-template-columns: minmax(0, 34%) minmax(0, 1fr) minmax(0, 34%) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }
  body.spectate-mode .felt .seat-slot.top {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.08rem !important;
    width: 100% !important;
  }
  body.spectate-mode .felt .seat-slot.top .hand-row,
  body.spectate-mode .felt .seat-slot.bottom .hand-row {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
  }
  body.spectate-mode .felt .seat-slot.top .hand-row .pcard {
    width: var(--card-w-me) !important;
    height: var(--card-h-me-vis) !important;
    min-height: var(--card-h-me-vis) !important;
    margin-left: var(--overlap-me) !important;
  }
  body.spectate-mode .felt .seat-slot.top .hand-row .pcard:first-child {
    margin-left: 0 !important;
  }
  body.spectate-mode .felt .seat-slot.left,
  body.spectate-mode .felt .seat-slot.right {
    justify-content: center !important;
    align-self: center !important;
    height: 100% !important;
  }
  body.spectate-mode .felt .seat-slot.left .seat-name,
  body.spectate-mode .felt .seat-slot.right .seat-name {
    flex-direction: row !important;
    align-self: center !important;
    max-width: 100% !important;
    padding: 0.04rem 0.22rem !important;
  }
  body.spectate-mode .felt .seat-slot.left .seat-name .nm,
  body.spectate-mode .felt .seat-slot.right .seat-name .nm {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    transform: none !important;
    max-width: 100% !important;
    max-height: none !important;
    font-size: 0.62rem !important;
  }
  body.spectate-mode .felt .seat-slot.left .hand-suits,
  body.spectate-mode .felt .seat-slot.right .hand-suits {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    width: 100% !important;
  }
  body.spectate-mode .felt .seat-slot.left .suit-row,
  body.spectate-mode .felt .seat-slot.right .suit-row {
    flex-wrap: nowrap !important;
    height: var(--card-h-sm) !important;
    min-height: var(--card-h-sm) !important;
    overflow: visible !important;
  }
  body.spectate-mode .felt .seat-slot.left .suit-row { justify-content: flex-start !important; }
  body.spectate-mode .felt .seat-slot.right .suit-row { justify-content: flex-end !important; }
  body.spectate-mode .felt .seat-slot.left .suit-row .pcard,
  body.spectate-mode .felt .seat-slot.right .suit-row .pcard,
  body.spectate-mode .felt .seat-slot.left .suit-row .pcard:not(.dummy-size),
  body.spectate-mode .felt .seat-slot.right .suit-row .pcard:not(.dummy-size) {
    width: var(--card-w-sm) !important;
    height: var(--card-h-sm) !important;
    min-height: var(--card-h-sm) !important;
    margin-left: calc(var(--card-w-sm) * -0.4) !important;
  }
  body.spectate-mode .felt .seat-slot.left .suit-row .pcard:first-child,
  body.spectate-mode .felt .seat-slot.right .suit-row .pcard:first-child {
    margin-left: 0 !important;
  }
}

@media (min-width: 1101px) {
  .felt .auction-bid-stack {
    left: 50% !important;
    bottom: calc(var(--south-h, calc(var(--card-h-me-vis) + 48px)) + 10px) !important;
    transform: translateX(-50%) !important;
    width: min(560px, 84%) !important;
    max-width: 580px;
    flex-direction: row !important;
    align-items: flex-end !important;
  }
  .felt .auction-bid-stack .bid-panel {
    order: 1 !important;
    width: min(248px, 46%) !important;
    max-width: 260px !important;
    flex: 0 0 auto !important;
    border-radius: 8px !important;
  }
  .felt .auction-bid-stack .auction-center {
    order: 2 !important;
    width: min(280px, 48%) !important;
    max-width: 280px !important;
    flex: 0 1 280px !important;
    border-radius: 8px !important;
  }
  .felt .auction-bid-stack:not(:has(.bid-panel:not(.hidden))) {
    width: min(280px, 48%) !important;
    max-width: 280px !important;
  }
  .felt .auction-peek.auction-peek-box {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(236px, 48%) !important;
  }
  /* Masaüstü: sol/sağ isimler el kutusunun üstünde, yatay */
  .seat-slot.left .seat-name,
  .seat-slot.right .seat-name {
    order: -1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    white-space: nowrap;
    writing-mode: horizontal-tb;
    min-width: 0;
    width: auto;
    max-width: min(100%, 12rem);
    padding: 0.2rem 0.4rem 0.2rem 0.2rem;
    align-self: stretch;
  }
  .seat-slot.left .seat-name {
    align-self: flex-start;
  }
  .seat-slot.right .seat-name {
    align-self: flex-end;
  }
  .seat-slot.left .seat-name .nm,
  .seat-slot.right .seat-name .nm {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed;
    transform: none !important;
    max-height: none;
    max-width: min(9rem, 100%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.88rem;
    line-height: 1.2;
    letter-spacing: 0;
  }
  .seat-slot.left .seat-name .dir,
  .seat-slot.right .seat-name .dir {
    width: 1.35rem;
    height: 1.35rem;
    font-size: 0.72rem;
  }
  .seat-slot.left .hand-suits,
  .seat-slot.left .hand-row,
  .seat-slot.right .hand-suits,
  .seat-slot.right .hand-row {
    order: 1;
  }
}