/* ورقنا — table view */
.tableview{position:fixed; inset:0; z-index:80; display:flex; flex-direction:column;
  background:radial-gradient(circle at 50% 30%,#0d2b1d,#070d18 70%); animation:fadeUp .3s both}
.tv-bar{display:flex; align-items:center; gap:16px; padding:12px 18px; background:rgba(11,18,32,.85); border-bottom:1px solid var(--border); backdrop-filter:blur(12px)}
.tv-info{display:flex; flex-direction:column; font-size:.78rem; color:var(--fg-3); line-height:1.4}
.tv-info b{font-family:var(--head); font-size:1rem; color:var(--fg)}
.tv-info-end{margin-inline-start:auto; text-align:center}
.tv-info-end b{color:var(--gold)}
.felt-table{position:relative; flex:1; margin:16px; border-radius:34%/22%; background:
  radial-gradient(ellipse at 50% 45%,var(--felt) 0%,var(--felt-2) 55%,#082418 100%);
  border:10px solid #2a1a0c; box-shadow:inset 0 0 70px rgba(0,0,0,.65),0 24px 60px -30px #000; overflow:hidden}
.felt-table::after{content:""; position:absolute; inset:14px; border-radius:inherit; border:1px dashed rgba(240,196,96,.18); pointer-events:none}
.seat{position:absolute; display:flex; flex-direction:column; align-items:center; gap:6px; width:126px; text-align:center}
.seat-top{top:12px; inset-inline-start:50%; translate:-50% 0}
.seat-bottom{bottom:10px; inset-inline-start:50%; translate:-50% 0}
.seat-right{inset-inline-end:14px; top:50%; translate:0 -50%}
.seat-left{inset-inline-start:14px; top:50%; translate:0 -50%}
.seat-av{width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-family:var(--head); font-weight:800;
  background:linear-gradient(140deg,#22406b,#31527f); border:2px solid rgba(255,255,255,.18)}
.seat.is-turn .seat-av{border-color:var(--gold); box-shadow:0 0 0 5px rgba(240,196,96,.18); animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(240,196,96,.14)}50%{box-shadow:0 0 0 9px rgba(240,196,96,.05)}}
.seat-name{font-size:.8rem; font-weight:700; font-family:var(--head)}
.seat-meta{font-size:.7rem; color:#bfe6d0; background:rgba(0,0,0,.35); padding:3px 9px; border-radius:999px}
.seat-cards{display:flex}
.seat-cards .card{width:26px; height:38px; margin-inline-start:-14px; border-radius:5px}
.seat-cards .card:first-child{margin:0}
.trick{position:absolute; top:50%; inset-inline-start:50%; translate:-50% -50%; display:grid; grid-template-columns:repeat(2,auto); gap:8px; place-items:center; min-height:100px; min-width:150px}
.banner{position:absolute; top:22%; inset-inline-start:50%; translate:-50% 0; padding:10px 22px; border-radius:999px;
  background:rgba(11,18,32,.86); border:1px solid rgba(240,196,96,.4); font-family:var(--head); font-weight:700; opacity:0; transition:opacity .3s}
.banner.show{opacity:1}
.deck{position:absolute; inset-block-end:26px; inset-inline-start:30px; display:grid; place-items:center; width:52px; height:74px;
  border-radius:8px; background:repeating-linear-gradient(45deg,#123c6b,#123c6b 5px,#0d2c50 5px,#0d2c50 10px); border:1px solid rgba(255,255,255,.18); font-size:.8rem; font-weight:700}

.tv-panel{background:rgba(9,15,26,.94); border-top:1px solid var(--border); padding:14px 18px 20px; backdrop-filter:blur(12px)}
.tv-status{text-align:center; font-family:var(--head); font-weight:700; font-size:.98rem; margin-bottom:10px; color:#cfe9db}
.tv-actions{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.tv-hint{text-align:center; font-size:.78rem; color:var(--fg-3); margin-top:10px; min-height:20px}
.hand{display:flex; justify-content:center; gap:8px; flex-wrap:wrap; min-height:104px; align-items:flex-end; padding:4px}
.card{
  position:relative; width:68px; height:98px; border-radius:9px; background:linear-gradient(160deg,#fdfbf6,#e7e0d0);
  border:1px solid rgba(0,0,0,.2); box-shadow:0 8px 18px -10px rgba(0,0,0,.9); color:#13223c;
  display:flex; flex-direction:column; justify-content:space-between; padding:6px 7px;
  font-family:var(--head); font-weight:800; font-size:1.05rem; cursor:pointer;
  transition:transform .18s ease, box-shadow .2s ease
}
.card .c-rank{line-height:1}
.card .c-suit{font-size:1.7rem; align-self:center; line-height:1}
.card .c-rank.b{align-self:flex-end}
.card.red{color:#b81f3c}
.card:hover{transform:translateY(-12px); box-shadow:0 18px 26px -14px rgba(0,0,0,1)}
.card.playable:hover{outline:2px solid var(--gold); outline-offset:1px}
.card.dim{filter:grayscale(.6) brightness(.72); cursor:not-allowed}
.card.dim:hover{transform:none}
.card.back{background:repeating-linear-gradient(45deg,#123c6b,#123c6b 5px,#0d2c50 5px,#0d2c50 10px); border-color:rgba(255,255,255,.2)}
.card.mini{width:56px; height:82px; font-size:.95rem}
.card.mini .c-suit{font-size:1.4rem}
.card.win{outline:2px solid var(--ok); outline-offset:1px}
.bid-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; max-width:640px; margin:0 auto}
.bid-grid .btn{padding:7px 13px; font-size:.85rem}
.scoreline{display:flex; justify-content:center; gap:18px; flex-wrap:wrap; font-size:.84rem; color:#cfe9db}
.scoreline b{font-family:var(--head); color:var(--accent-2)}
@media (max-width:820px){
  .felt-table{margin:8px; border-radius:26%/16%}
  .card{width:56px; height:82px; font-size:.92rem}
  .card .c-suit{font-size:1.35rem}
  .seat{width:96px} .seat-av{width:42px; height:42px}
  .seat-left,.seat-right{top:auto; inset-inline:auto; translate:none}
}