/* Trick-taking kit: bid panel, trick area, badges, kitty tray, last trick. Existing tokens only. */
.trick-table{display:grid;gap:var(--space-2);width:100%;text-align:center}
.trick-info{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap;font-size:13px;color:var(--paper)}
.trick-info strong{color:var(--lime);font-variant-numeric:tabular-nums}
.trick-badges{display:flex;gap:var(--space-1);justify-content:center;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.trick-badges li{border:1px solid var(--line-strong);border-radius:999px;padding:2px var(--space-2);font-size:12px;color:var(--paper);background:var(--ink-soft)}
.trick-area{position:relative;width:min(300px,100%);height:210px;margin-inline:auto}
.trick-area[data-count="5"]{height:240px}
.trick-area[data-count="6"],.trick-area[data-count="7"]{height:280px}
.trick-area[data-count="6"] .card,.trick-area[data-count="7"] .card,.trick-area[data-count="6"] .trick-empty,.trick-area[data-count="7"] .trick-empty{width:44px;height:62px}
.trick-slot{position:absolute;left:var(--tx);top:var(--ty);transform:translate(-50%,-50%);display:grid;justify-items:center;gap:2px}
.trick-slot .card,.trick-empty{width:52px;height:74px;box-shadow:none}
.trick-empty{display:block;border:1px dashed var(--line);border-radius:8px}
.trick-slot small{font-size:10px;color:var(--muted);max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trick-slot.won .card{outline:3px solid var(--lime);outline-offset:2px}
.trick-slot.won small{color:var(--lime);font-weight:800}
.trick-slot.out{opacity:.4}
.trick-caption{margin:0;font-size:12px;color:var(--muted)}
.kitty-tray{display:grid;justify-items:center}
.kitty-tray .table-cards{flex-wrap:nowrap}
.kitty-tray .table-cards .card{width:32px;height:44px;border-radius:4px;box-shadow:none}
.kitty-tray .card-face{display:none}.kitty-tray .compact-index{display:block}
.kitty-tray .corner{font-size:12px;left:3px;top:3px}
.kitty-tray .card-back{width:32px;height:44px}
.last-trick{justify-self:center;background:var(--ink-soft);border:1px solid var(--line-strong);border-radius:var(--radius);padding:var(--space-2) var(--space-3)}
.last-trick-list{list-style:none;margin:0;padding:0;display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:center}
.last-trick-list li{display:grid;justify-items:center;gap:2px;font-size:11px;color:var(--muted)}
.last-trick-list li.won{color:var(--lime);font-weight:800}
.last-trick-list .card{width:36px;height:50px;box-shadow:none}
.last-trick-list .card-face{display:none}.last-trick-list .compact-index{display:block}
.player.sitting-out{opacity:.45}
.out-tag{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* Bid panel */
.bid-panel{display:grid;gap:var(--space-2);justify-items:center;width:100%}
.bid-title{margin:0;font-size:14px;color:var(--paper)}
.bid-title small{color:var(--muted);margin-left:var(--space-1)}
.bid-grid{display:grid;grid-template-columns:36px repeat(var(--bid-cols),minmax(0,1fr));gap:var(--space-1);width:min(360px,100%)}
.bid-head{font-size:11px;color:var(--muted);text-align:center;align-self:end}
.bid-grid button,.bid-specials button,.bid-actions button{min-height:36px;padding:4px 8px;font-size:13px}
.bid-row{background:none;border-color:transparent;color:var(--muted)}
.bid-cell.suggested{outline:2px dashed var(--lime);outline-offset:2px}
.bid-specials,.bid-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:center;align-items:center}
.bid-suggest{border-style:dashed}
.bid-why{font-size:12px;color:var(--muted);max-width:360px}
/* 768–1099 px: side seats are a third of the ring wide and sit level with the top of the centre; start the trick table below them. */
@media(min-width:768px) and (max-width:1099px){.trick-table{padding-top:80px}}
@media(max-width:767px){
 .bid-grid button,.bid-specials button,.bid-actions button{min-height:44px}
 .trick-area{height:190px}
 .trick-area[data-count="5"]{height:230px}
 .trick-area[data-count="6"],.trick-area[data-count="7"]{height:250px}
 .trick-slot .card,.trick-empty{width:44px;height:62px}
 .trick-slot small{max-width:60px}
 .trick-area[data-count="6"] .card,.trick-area[data-count="7"] .card,.trick-area[data-count="6"] .trick-empty,.trick-area[data-count="7"] .trick-empty{width:36px;height:50px}
 .trick-area[data-count="6"] .card-face,.trick-area[data-count="7"] .card-face{display:none}
 .trick-area[data-count="6"] .compact-index,.trick-area[data-count="7"] .compact-index{display:block}
}