/* Keep the modal top layer untransformed for Safari hit testing. */
.play-surface{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;isolation:isolate}
/* Lobby and menus retain their original responsive, scrolling layout. */
.play-rotate,.rotate-device,.app-landscape-gate{display:none!important}
@media(orientation:portrait) and (max-width:800px){
 body .playable-table{inset:0;width:100dvw;height:100dvh;transform:none}
 body .playable-table .play-surface{width:100dvh;height:100dvw;transform-origin:0 0;transform:translateX(100dvw) rotate(90deg)}
 .playable-table .play-actions{width:min(560px,70dvh);max-width:70dvh;max-height:32dvw}
}
@media(orientation:portrait) and (max-width:800px){.play-hud{height:32px;padding:3px 12px}.play-hud strong{font-size:17px}.play-round{font-size:11px;padding:5px 16px}.play-hud button{min-height:27px;padding:3px 10px}.play-seat{font-size:11px;padding:4px 12px;min-width:90px}.play-message{top:36px;font-size:8px}.play-actions{bottom:calc(19dvw + 72px);max-height:30dvw}.play-actions .action-panel{padding:5px;gap:8px}.play-actions .action-panel p{display:none}.play-actions :is(h3,p){font-size:10px}.play-seat.own{bottom:calc(19dvw + 39px)}.play-tabs{height:35px}.play-hand{bottom:39px}.play-pages{inset:42px 8% 42px;padding:12px}.play-tabs button{font-size:11px;min-height:32px}.play-pages.play-results{inset:15% 17% 41%}}
@media(orientation:portrait) and (max-width:800px){.play-hud{height:37px;padding:3px 16px}.play-hud strong{font-size:19px}.play-hud strong span{font-size:8px}.play-round{font-size:10px}.play-tabs{height:40px;bottom:6px;padding:3px 40% 3px 2%;gap:4px}.play-tabs button{font-size:11px;min-width:44px;min-height:30px;padding:3px 8px}.play-message{bottom:12px;padding:7px 12px;font-size:11px;right:9%;max-width:34dvh}.play-hand{bottom:48px;height:21dvw;left:22%;right:22%}body .playable-table .play-hand .card{--cw:clamp(50px,16dvw,85px);padding:5px;border-radius:6px}.play-hand .card .rank{font-size:20px}.play-hand .card .rank small{font-size:17px}.play-hand .card .pip{font-size:27px}.play-seat{font-size:11px;padding:3px 9px;min-width:85px}.play-seat small{font-size:8px}.play-seat.own{bottom:calc(21dvw + 48px)}.play-actions{bottom:calc(21dvw + 76px)}.playable-table[data-phase=play] .play-actions{top:40px}.play-pages{inset:44px 8% 49px}}
@media(orientation:portrait) and (max-width:800px){.play-score{margin-right:8px}.play-score .table-score-strip{padding:2px 9px;font-size:9px;gap:8px}.play-score .table-score-strip span{min-width:42px}.play-score .table-score-strip b{font-size:14px}.play-round{margin-left:8px}}
.playable-table .play-message{top:auto!important;height:auto!important}

/* Table controls live in the top-right dropdown, leaving the hand unobstructed. */
body .playable-table .play-tabs[hidden]{display:none!important}
body .playable-table .play-tabs:not([hidden]){display:flex;flex-direction:column;inset:65px 12px auto auto;width:170px;height:auto;padding:8px;gap:5px;border-radius:12px;background:#0b2229;z-index:40;box-shadow:0 8px 24px #0009}
body .playable-table .play-tabs button{width:100%;min-height:40px;text-align:left;padding:8px 12px;border-radius:7px}
body .playable-table .play-seat.own{left:auto!important;right:10px;top:auto!important;bottom:78px;transform:none;max-width:112px;min-width:0;padding:5px 8px;font-size:11px;pointer-events:none}
body .playable-table .play-seat.own small{font-size:8px}
body .playable-table .play-hand{bottom:20px}
body .playable-table .play-hand button{touch-action:manipulation}
body .playable-table .play-message{bottom:12px;right:10px;max-width:110px;font-size:10px;padding:6px 9px;pointer-events:none}
@media(max-height:500px),(orientation:portrait) and (max-width:800px){body .playable-table .play-tabs:not([hidden]){top:40px}body .playable-table .play-seat.own{bottom:55px;max-width:94px;font-size:10px;padding:4px 6px}body .playable-table .play-seat.own small{font-size:8px}}
body .playable-table .play-hand{bottom:48px}
body .playable-table .play-hand .card:disabled{filter:brightness(.7)!important}
body .playable-table .play-hand .card:not(:disabled){border-color:#f2ce7a}
body .playable-table .play-hand{left:5%;right:15%}
/* Turn instructions must not flash a dark banner across the playing table. */
body .playable-table[data-kind="864"]:is([data-phase="play"],[data-phase="trickEnd"]) .play-actions{display:none!important}

.table-entry-loading[open]{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;border-radius:0;display:grid;place-items:center;background:#0b2229;color:#e5c48a;text-align:center;z-index:9999}.table-entry-loading::backdrop{background:#0b2229}.table-entry-loading strong{font:36px Georgia}.table-entry-loading p{font:15px system-ui;color:#f1e8d4}
body .playable-table{transition:opacity .18s ease}body .playable-table.table-entering{opacity:0}body .playable-table::backdrop{background:#0b2229}
@media(prefers-reduced-motion:reduce){body .playable-table{transition:none}}

.play-alert{position:absolute;top:54px;left:20%;right:20%;z-index:30;margin:0;padding:10px 14px;border-radius:10px;background:#fff4dc;color:#251b10;font-size:13px;text-align:center;pointer-events:none}.play-alert[hidden]{display:none}

.play-offline{position:absolute;top:42px;right:12px;background:#fff4dc;color:#251b10;padding:5px 9px;border-radius:8px;font-size:11px}.play-offline[hidden]{display:none}

/* Touch feedback is immediate; card outcomes still wait for the server. */
.playable-table button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.playable-table .play-hand{touch-action:none}
.playable-table button.touch-pressed{outline:3px solid #ffe1a0!important;outline-offset:-3px;filter:brightness(1.15)}
.play-sending{position:absolute;top:44px;left:50%;transform:translateX(-50%);z-index:35;background:#102a32;color:#ffe1a0;padding:5px 12px;border-radius:12px;font-size:12px;pointer-events:none}.play-sending[hidden]{display:none}

/* Round progression lives inside the results overlay, above the scores. */
.playable-table:has(.play-results:not([hidden])) .play-actions{visibility:hidden}
.play-results .result-controls{position:sticky!important;top:0!important;z-index:2;background:#102a32!important;display:flex;flex-wrap:wrap;gap:10px;padding:8px!important}
.play-results .result-controls button{min-height:44px;touch-action:manipulation}
body .playable-table .play-pages.play-results{inset:15% 12% 12%;max-height:none}
/* Mobile polish: consistent hit areas, readable state, and inset-aware controls. */
body .playable-table .play-hud{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right));min-height:44px}
body .playable-table .play-return,body .playable-table .play-tabs button,body .playable-table .play-menu button,body .playable-table .play-actions button{min-height:44px;min-width:44px}
body .playable-table .play-tabs:not([hidden]){top:max(48px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));width:200px}
body .playable-table .play-seat{font-size:12px;line-height:1.25}
body .playable-table .play-seat small,body .playable-table .play-seat.own small{font-size:10px;line-height:1.35}
body .playable-table .play-seat.own{font-size:12px;max-width:112px;right:max(8px,env(safe-area-inset-right));bottom:70px}
body .playable-table .play-message{max-width:145px;font:600 11px/1.3 system-ui;bottom:max(8px,env(safe-area-inset-bottom));right:max(8px,env(safe-area-inset-right))}
body .playable-table .play-message[data-turn="true"]{box-shadow:0 0 0 2px #f3d58d}
body .playable-table .play-score .table-score-strip{font-size:11px;line-height:1.2}
body .playable-table .play-score b{font-size:16px}
body .playable-table .play-pages{padding:16px;scrollbar-gutter:stable;overscroll-behavior:contain}
body .playable-table .play-pages [hidden]{display:none!important}
body .playable-table .play-last-book{position:absolute;left:max(8px,env(safe-area-inset-left));bottom:max(6px,env(safe-area-inset-bottom));z-index:8;min-height:44px;max-width:50%;padding:6px 12px;font-size:11px;background:#102a32;color:#f5dfac;border:1px solid #b69b68;border-radius:10px}
body .playable-table .play-last-book[hidden]{display:none}
body .playable-table .large-card-hand .hand-fan{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:12px;transform:none!important;width:100%!important;height:auto!important;padding:12px!important}
body .playable-table .large-card-hand .card{position:relative!important;inset:auto!important;margin:0!important;transform:none!important;translate:none!important;width:60px!important;height:86px!important;min-width:60px;filter:none}
body .playable-table .large-card-hand .card:disabled{opacity:.55}
body .playable-table .large-card-hand{overflow:visible}
body .playable-table button:focus-visible{outline:3px solid #ffe0a0;outline-offset:2px}
body .playable-table .play-actions .bid-buttons{gap:6px}
@media(max-height:500px){body .playable-table .play-actions{max-height:38dvh}body .playable-table .play-round{font-size:11px}body .playable-table .play-hud strong{font-size:17px}}
@media(orientation:portrait) and (max-width:800px){body .playable-table .play-hud{padding-left:max(12px,env(safe-area-inset-top));padding-right:max(8px,env(safe-area-inset-bottom))}body .playable-table .play-actions{max-height:38dvw}}
@media(prefers-reduced-motion:reduce){.playable-table *,.playable-table *::before,.playable-table *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:900px){body:not(.in-3d) :is(button,input,select,summary){min-height:44px}body:not(.in-3d) :is(input,select){font-size:16px}body:not(.in-3d){padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom)}}
body .playable-table[data-phase="bid"] .play-actions{top:34%;bottom:auto;max-height:39%}
body .playable-table .large-card-hand .hand-fan{grid-auto-rows:86px;align-content:start;min-height:0!important;max-height:none!important;margin:0!important}
body .playable-table .large-card-hand .classic-card-art{display:block!important;position:absolute;inset:0;width:100%;height:100%;object-fit:fill;border-radius:5px;pointer-events:none}
body .playable-table .large-card-hand .card :is(.rank,.pip,.corner){display:none!important}
body .playable-table .large-card-hand .hand-fan{grid-template-rows:none!important;grid-auto-rows:86px!important;row-gap:12px!important}
@media(max-height:500px){body .playable-table .play-hand{right:20%}}
@media(orientation:portrait) and (max-width:800px){body .playable-table .play-hand{right:20%}}

/* Keep hit testing on the same DOM face that paints the card. In particular,
   do not inherit pointer-events:none through the overflowing, rotated fan. */
body .playable-table .play-hand,
body .playable-table .play-hand .hand-scroll,
body .playable-table .play-hand .hand-fan{pointer-events:auto;touch-action:none}
body .playable-table :is(.play-hand,.large-card-hand) button[data-source-card]{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
body .playable-table :is(.play-hand,.large-card-hand) button[data-source-card] *{pointer-events:none;-webkit-user-drag:none;user-select:none}
body .playable-table .play-hand .card:is(:active,:hover,:focus-visible,.touch-pressed){translate:0 var(--lift,0px)!important}
.last-book-review>div{display:flex;gap:16px;flex-wrap:wrap}.last-book-review figure{margin:0;text-align:center}.last-book-review img{display:block;width:65px;height:94px;border-radius:5px}.last-book-review figcaption{font-size:12px;margin-top:6px}

/* Native taps have no double-tap zoom delay; panels retain natural scrolling. */
body .playable-table button{touch-action:manipulation}
body .playable-table :is(.play-hand,.large-card-hand) button[data-source-card]{touch-action:manipulation}

body .playable-table .play-tabs .play-last-book{position:static;inset:auto;max-width:none;width:100%;min-height:44px;margin:0;text-align:left}

/* Team labels accompany color so partnerships never depend on color alone. */
.team-red{--team-color:#ff8595}.team-blue{--team-color:#7dc4ff}
.table-score-strip .team-red,.table-score-strip .team-blue{color:var(--team-color);border-bottom:3px solid var(--team-color)}
.play-seat.team-red,.play-seat.team-blue{border:2px solid var(--team-color)}
.play-seat.team-red small,.play-seat.team-blue small{color:var(--team-color)}
.score-row.team-red,.score-row.team-blue{border-left:4px solid var(--team-color);padding-left:12px}
.score-row.team-red .score-top,.score-row.team-blue .score-top{color:var(--team-color)}