/* An original four-seat bridge table. Local variables stay inside this game. */
#game[data-game="bridge"]{padding-bottom:12px;min-height:0}
.bridge-game{color:#223249;font:14px/1.35 Arial,sans-serif;container-type:inline-size}
.bridge-topline{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px;font-size:12px;flex-wrap:wrap}.bridge-topline strong{font-size:16px}
.bridge-table{display:grid;grid-template-columns:minmax(58px,1fr) minmax(0,4.5fr) minmax(58px,1fr);grid-template-rows:auto minmax(250px,auto) auto;gap:8px;padding:15px 12px 18px;border:5px solid #d6c4ad;border-radius:24px;background:radial-gradient(ellipse at 50% 44%,#405773,#263b56);box-shadow:inset 0 0 0 1px #ffffff22;color:#fff7e9;position:relative}
.bridge-seat{min-width:0;text-align:center;align-self:center;position:relative}.bridge-north{grid-column:2;grid-row:1}.bridge-west{grid-column:1;grid-row:2}.bridge-east{grid-column:3;grid-row:2}.bridge-south{grid-column:1/-1;grid-row:3}.bridge-center{grid-column:2;grid-row:2;min-width:0;align-self:center}
.bridge-seat-heading{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px;font-size:13px;min-height:30px;margin-bottom:7px}.bridge-compass{display:inline-grid;place-items:center;background:#172b44;color:#f1e3d1;border:1px solid #a5b1bf77;width:27px;height:27px;border-radius:50%;font-size:12px;font-weight:bold}.bridge-seat.is-active .bridge-compass{background:#f4b281;color:#18263c;box-shadow:0 0 0 3px #f4b28144}.bridge-badge{font-size:10px;color:#ffcfaa}.bridge-count{display:block;font-size:11px;color:#dce3ec;margin-top:4px}
.bridge-hidden{height:37px;display:flex;justify-content:center;padding-left:25px}.bridge-hidden i{width:26px;height:36px;margin-left:-17px;border-radius:4px;border:2px solid #eee5d7;background:repeating-linear-gradient(45deg,#61758c 0 3px,#7891aa 3px 4px);box-shadow:-1px 1px 3px #15263a88}.bridge-west .bridge-hidden,.bridge-east .bridge-hidden{height:100px;flex-direction:column;align-items:center;padding:18px 0 0}.bridge-west .bridge-hidden i,.bridge-east .bridge-hidden i{width:36px;height:26px;min-height:26px;margin:-15px 0 0}
.bridge-game .card{--card-width:clamp(44px,9.5cqw,90px);--card-height:calc(var(--card-width)*1.4);--card-font:clamp(14px,2.4cqw,23px);display:block;flex:none;opacity:1!important;filter:none!important;box-shadow:-2px 2px 5px #11213944}.bridge-game .card .card-corner{display:flex;flex-direction:column;gap:0;line-height:1;left:3px;top:3px;font-size:var(--card-font)}.bridge-game .card .card-corner i{font-size:calc(var(--card-font)*.85)}.bridge-game .card .card-corner-bottom{left:auto;top:auto;right:3px;bottom:3px}.bridge-game .card .card-face{inset:18% 8% auto;width:84%;height:65%}.bridge-game .card[data-action]{cursor:pointer;outline:2px solid #f4b281;outline-offset:-2px}.bridge-game .card[data-action]:hover,.bridge-game .card[data-action]:focus-visible{transform:translateY(-9px);box-shadow:0 0 0 3px #f4b281;z-index:3}.bridge-game .card:disabled{cursor:default}
.bridge-fan{display:flex;justify-content:center;width:100%;margin:11px auto 0;padding-top:10px}.bridge-hand-card{min-width:0;flex:0 1 28px;position:relative}.bridge-hand-card:last-child{flex:0 0 clamp(44px,9.5cqw,90px)}.bridge-hand-card:has(:focus-visible),.bridge-hand-card:has(:hover){z-index:3}
.bridge-dummy{display:flex;justify-content:center;gap:5px;min-height:90px;align-items:flex-start}.bridge-suit-column{display:flex;flex-direction:column;position:relative;width:clamp(35px,7.3cqw,64px);padding-bottom:2px}.bridge-dummy .card{--card-width:clamp(35px,7.3cqw,64px);--card-font:clamp(12px,2cqw,18px)}.bridge-dummy .card+.card{margin-top:calc(var(--card-height)*-1 + 22px)}.bridge-suit-label{font-size:15px;margin-bottom:3px;color:#fff}.bridge-suit-label.red{color:#ffba9e}.bridge-table:has(.bridge-west.is-dummy){grid-template-columns:minmax(160px,2.5fr) minmax(0,3fr) minmax(58px,1fr)}.bridge-table:has(.bridge-east.is-dummy){grid-template-columns:minmax(58px,1fr) minmax(0,3fr) minmax(160px,2.5fr)}.bridge-west.is-dummy .bridge-suit-column,.bridge-east.is-dummy .bridge-suit-column{width:clamp(30px,5cqw,48px)}.bridge-west.is-dummy .card,.bridge-east.is-dummy .card{--card-width:clamp(30px,5cqw,48px);--card-font:clamp(12px,1.8cqw,16px)}.bridge-south.is-dummy .bridge-dummy{margin-top:7px}
.bridge-bidding{padding:12px;background:#f5efe5;color:#223249;border:1px solid #d6c4ad;border-radius:13px;box-shadow:0 5px 18px #13203435}.bridge-bidding h3{font-size:14px;margin:0 0 8px;text-align:center}.bridge-bid-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.bridge-game .bridge-control{font:700 14px/1.2 Arial,sans-serif;padding:8px 2px;min-width:0;min-height:34px;border:1px solid #b6bdc7;border-radius:5px;background:#fffefa;color:#223249;cursor:pointer}.bridge-game .bridge-control.red{color:#b42b3a}.bridge-game .bridge-control:disabled{opacity:.35;cursor:default;background:#e4e2de}.bridge-game .bridge-control:not(:disabled):hover,.bridge-game .bridge-control:focus-visible{background:#f7d3b7;outline:2px solid #b85b27;outline-offset:1px}.bridge-call-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:8px}.bridge-call-controls .bridge-control{font-size:12px}.bridge-call-controls .bridge-control:first-child{background:#243c57;color:white}
.bridge-auction-history{max-height:128px;overflow:auto;margin-top:10px}.bridge-auction-history table{width:100%;border-collapse:collapse;font-size:12px;text-align:center}.bridge-auction-history th{font-size:10px;color:#596579;padding:4px}.bridge-auction-history td{border:1px solid #d5d7da;padding:3px;font-weight:bold}.bridge-auction-history .red{color:#b42b3a}.bridge-bid-pending{background:#f6d5bd}.bridge-post-auction{margin:9px 0}.bridge-post-auction summary,.bridge-deal-history summary{cursor:pointer;font-size:13px;font-weight:bold}
.bridge-trick{height:265px;position:relative;max-width:360px;margin:auto}.bridge-play{position:absolute;left:50%;top:50%;text-align:center;transform:translate(-50%,-50%)}.bridge-play .card{--card-width:clamp(45px,9cqw,78px);--card-font:clamp(14px,2.3cqw,21px)}.bridge-play span{display:block;font-size:10px;white-space:nowrap;margin-top:3px}.bridge-play-north{transform:translate(-50%,-100%)}.bridge-play-south{transform:translate(-50%,0)}.bridge-play-west{transform:translate(-135%,-50%)}.bridge-play-east{transform:translate(35%,-50%)}.bridge-trick-empty{position:absolute;inset:44% 0 auto;text-align:center;color:#d3dce7;font-size:13px}
.bridge-prompt{background:#f4e2d1;border-left:3px solid #b85b27;padding:9px 12px;margin:10px 0;font-size:13px;min-height:35px}.bridge-score{width:100%;border-collapse:collapse;background:#fffdfa;font-size:13px;text-align:center}.bridge-score th,.bridge-score td{padding:7px 5px;border-bottom:1px solid #dce0e4}.bridge-score thead th{font-size:11px;color:#5a6575}.bridge-score tbody th{text-align:left}.bridge-score small{color:#617084}.bridge-vulnerable{display:block;color:#a24a21;font-size:9px;font-weight:normal}.bridge-next{text-align:center;margin:8px}.bridge-next .bridge-control{padding:9px 18px;background:#243c57;color:#fff}.bridge-variant{font-size:11px;color:#667287;margin:10px 0 0}.bridge-deal-history{margin:8px 0;font-size:12px}
@container(max-width:500px){.bridge-table{padding:10px 6px 12px;gap:5px;border-width:3px;border-radius:17px;grid-template-columns:38px minmax(0,1fr) 38px;grid-template-rows:auto minmax(235px,auto) auto}.bridge-bidding{padding:7px}.bridge-game .bridge-control{padding:7px 0;font-size:12px;min-height:32px}.bridge-call-controls .bridge-control{font-size:9px}.bridge-bid-grid{gap:3px}.bridge-seat-heading{gap:3px;font-size:10px}.bridge-compass{width:23px;height:23px;font-size:10px}.bridge-badge{font-size:9px}.bridge-west .bridge-seat-heading,.bridge-east .bridge-seat-heading{flex-direction:column}.bridge-hidden i{width:22px;height:31px}.bridge-west .bridge-hidden i,.bridge-east .bridge-hidden i{width:28px;height:21px;min-height:21px;margin-top:-12px}.bridge-count{font-size:9px}.bridge-hand-card{flex-basis:23px}.bridge-topline{font-size:10px}.bridge-topline strong{font-size:13px}.bridge-topline>span:last-child{display:none}.bridge-auction-history{max-height:90px}.bridge-auction-history th{font-size:9px}.bridge-auction-history td{font-size:11px}.bridge-trick{height:235px}.bridge-score{font-size:12px}.bridge-score th,.bridge-score td{padding:6px 3px}.bridge-score thead th{font-size:10px}.bridge-prompt{font-size:12px}.bridge-dummy .card+.card{margin-top:calc(var(--card-height)*-1 + 19px)}}
@media(prefers-reduced-motion:reduce){.bridge-game .card{transition:none}}

@container(max-width:500px){.bridge-table:has(.bridge-west.is-dummy),.bridge-table:has(.bridge-east.is-dummy){grid-template-columns:38px minmax(0,1fr) 38px}.bridge-west.is-dummy,.bridge-east.is-dummy{grid-column:1/-1;grid-row:1;align-self:start;padding:0 40px}.bridge-table:has(.bridge-west.is-dummy) .bridge-north,.bridge-table:has(.bridge-east.is-dummy) .bridge-north{grid-column:1;grid-row:2;align-self:start}.bridge-table:has(.bridge-west.is-dummy) .bridge-west .bridge-seat-heading,.bridge-table:has(.bridge-east.is-dummy) .bridge-east .bridge-seat-heading{flex-direction:row}.bridge-west.is-dummy .bridge-suit-column,.bridge-east.is-dummy .bridge-suit-column{width:clamp(35px,7.3cqw,64px)}.bridge-west.is-dummy .card,.bridge-east.is-dummy .card{--card-width:clamp(35px,7.3cqw,64px)}}

@container(max-width:500px){.bridge-table:has(.bridge-east.is-dummy) .bridge-north{grid-column:3}}

/* Keep the auction and both hands together on shorter displays. */
.bridge-table{grid-template-rows:auto minmax(190px,auto) auto}
.bridge-center{width:100%;max-width:480px;justify-self:center}
.bridge-table[data-phase="bridge_auction"] .bridge-north{display:flex;align-items:center;justify-content:center;gap:12px}
.bridge-table[data-phase="bridge_auction"] .bridge-north .bridge-seat-heading{margin:0}
.bridge-table[data-phase="bridge_auction"] .bridge-north .bridge-count{margin:0}
.bridge-trick{height:190px}
.bridge-play-north{transform:translate(-50%,-83%)}
.bridge-play-south{transform:translate(-50%,-17%)}
.bridge-play .card{--card-width:clamp(43px,8.3cqw,70px)}
.bridge-north.is-dummy .bridge-suit-column{width:clamp(35px,7.3cqw,58px)}
.bridge-north.is-dummy .card{--card-width:clamp(35px,7.3cqw,58px)}
.bridge-north.is-dummy .card+.card{margin-top:calc(var(--card-height)*-1 + 20px)}
.bridge-fan{margin-top:6px;padding-top:6px}
@container(max-width:500px){.bridge-table{grid-template-rows:auto minmax(190px,auto) auto}.bridge-table[data-phase="bridge_auction"] .bridge-north{gap:6px}.bridge-table[data-phase="bridge_auction"] .bridge-north .bridge-hidden{padding-left:14px}.bridge-table[data-phase="bridge_auction"] .bridge-north .bridge-count{display:none}.bridge-trick{height:190px}.bridge-north.is-dummy .card+.card{margin-top:calc(var(--card-height)*-1 + 18px)}}