/* The table, opponents and hand share a measured grid. No inner card clipping or scrolling. */
.in-game{overflow:hidden}
.in-game #app{height:100dvh;display:flex;flex-direction:column}
.in-game header{height:38px;min-height:38px;flex-shrink:0;padding:0 16px;max-width:none}
.in-game .brand{font-size:20px;gap:6px}
.in-game .brand-icon{font-size:26px}
.in-game .brand-sub{display:none}
.in-game .header-actions{gap:6px}
.in-game .header-actions .icon,.in-game .header-actions .secondary{height:30px;min-height:30px;width:30px;padding:3px;font-size:16px}
.in-game .header-actions .secondary span{display:none}
.in-game .wallet-button{font-size:13px;padding:5px 10px}
.game{width:100%;max-width:1600px;padding:0 16px 8px;margin:0 auto;flex:1;min-height:0;display:flex;flex-direction:column;--card-w:112px}
.game .game-toolbar{height:40px;min-height:40px;flex-shrink:0;padding:0;gap:8px}
.game .game-toolbar>div{display:flex;flex:1;gap:8px;min-width:0;align-items:center;justify-content:center}
.game .game-toolbar strong{font-size:16px;line-height:1.1;white-space:nowrap}
.game .game-toolbar>div>span{font-size:12px;line-height:1.2;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game .toolbar-button{font-size:13px;padding:6px;white-space:nowrap;flex-shrink:0}
.game .toolbar-button span{font-size:13px;padding:0}
.game .arena{position:relative;isolation:isolate;flex:1;min-height:var(--arena-min-height,0px);height:auto;max-height:none;display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);gap:8px;--card-w:112px}
.game .felt{inset:0;border:1px solid #6e9b7450;border-radius:28px;box-shadow:inset 0 0 45px #0a281d40}
.game .felt-mark{opacity:.04;font-size:140px}
.game .table-top{grid-row:1;min-width:0;position:relative;z-index:2}
.game .opponents{display:flex;align-items:flex-start;justify-content:space-evenly;gap:10px;padding:4px 8px 0}
.game .opponent{position:static;transform:none;scale:1;min-width:0;max-width:230px;width:auto;flex:1;z-index:auto}
.game .opponent-info{padding:6px 10px;border-radius:12px;gap:8px;min-height:46px}
.game .opponent-info>div{min-width:0;flex:1}
.game .opponent-info strong{font-size:14px;line-height:1.15;max-width:none;overflow:hidden;text-overflow:ellipsis}
.game .opponent-info div>span{font-size:11px;line-height:1.2;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game .opponent .avatar{width:30px;height:30px;flex-shrink:0}
.game .opponent .card-count{font-size:14px;flex-shrink:0}
.game .opponent-hand,.game .last-move{display:none}
.game .table-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:2px 12px}
.game .deck-zone,.game .discard-zone{position:static;transform:none;scale:1;display:flex;align-items:center;gap:6px;width:auto;text-align:left;min-width:0}
.game .deck-cards{display:block;position:relative;width:94px;height:44px;flex-shrink:0}
.game .deck-zone .trump{position:absolute;left:38px;top:-4px;width:34px;height:49.3px;transform:rotate(90deg);transform-origin:center;box-shadow:0 2px 6px #0004}
.game .deck-back{position:absolute;left:12px;top:-4px;width:34px;height:49.3px;transform:rotate(90deg)}
.game .deck-back svg{display:block;width:100%;height:100%}
.game .deck-back b{display:none}
.game .deck-zone>span,.game .discard-zone>span{position:static;font-size:13px;letter-spacing:0;line-height:1.2;white-space:nowrap;margin:0}
.game .deck-zone>span>b{font-size:20px;margin-left:3px}
.game .deck-remaining{display:inline;font-size:13px}
.game .deck-empty .trump{filter:grayscale(1);opacity:.65;box-shadow:none}
.game .discard-art{width:24px;height:35px;transform:rotate(10deg)}
.game .battle{grid-row:2;position:relative;inset:auto;min-height:0;max-height:none;padding:0;margin:0 4px;border:0;border-radius:0;display:block;overflow:visible;touch-action:auto;z-index:3;--table-card-w:96px}
.game .battle .pair{position:absolute;width:calc(var(--table-card-w) + 12px);height:calc(var(--table-card-w)*1.45 + 12px);transform:none;padding:0;flex-shrink:0}
.game .battle .pair .card{width:var(--table-card-w);height:calc(var(--table-card-w)*1.45);position:absolute;margin:0;border-radius:7px;transform:none}
.game .battle .pair .attack{left:0;top:0}
.game .battle .pair .defense{left:12px;top:12px;transform:none}
.game .battle .target-label{font-size:10px;line-height:12px;bottom:0;left:0;right:auto;white-space:nowrap;padding:0;color:#d4e4cd}
.game .battle .empty-table{position:absolute;inset:8px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}
.game .battle .empty-table>span{font-size:32px}
.game .battle .empty-table p{font-size:17px;margin:8px 0;line-height:1.2}
.game .battle .empty-table small{font-size:13px;line-height:1.4;display:block;max-width:300px}
.game .player-zone{grid-row:3;position:relative;inset:auto;min-width:0;z-index:5;padding:0 8px}
.game .player-caption{display:flex;align-items:center;justify-content:space-between;min-height:28px;margin:0;gap:6px;font-size:12px;letter-spacing:0}
.game .player-caption>span:first-child{white-space:nowrap}
.game .player-caption>span:nth-child(2){display:block;font-size:12px;text-align:center;flex:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.game .hand-sort-button{position:static;min-height:28px;padding:4px 8px;flex-shrink:0;font-size:12px}
.game .hand{position:relative;width:100%;height:calc(var(--card-w)*1.45 + 8px + (var(--rows,1) - 1)*var(--hand-row-step,24px));margin:0;overflow:visible;touch-action:none}
.game .hand .card{position:absolute;top:4px;left:0;width:var(--card-w);height:calc(var(--card-w)*1.45);transform:translate(var(--x,0px),var(--y,0px));transform-origin:center;touch-action:none}
.game .player-footer{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin-top:4px}
.game .table-status{position:static;transform:none;flex:1;min-width:0;width:auto;max-width:650px;padding:6px 10px;margin:0;border-radius:10px;display:block;white-space:normal;text-align:center}
.game .status-heading{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0}
.game .status-heading strong{font-size:16px;line-height:1.2;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.game .status-dot{flex-shrink:0}
.game .clock{position:static;flex-shrink:0;font-size:12px;padding:0 5px}
.game .turn-route{display:none}
.game .arena:has(.end-result) .turn-route{display:block;font-size:12px}
.game .actions{position:static;margin:0;padding:0;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;min-height:44px;flex-shrink:0}
.game .actions .primary,.game .actions .secondary,.game .transfer-zone{position:static;transform:none;min-width:0;min-height:44px;padding:8px 12px;font-size:15px;border-radius:10px}
.game .transfer-zone{white-space:nowrap}
.game .transfer-zone span{margin-left:3px}
.game .transfer-zone small{display:none}
.game .actions .ghost{font-size:13px;padding:8px}
.game .connection-state{display:none}
.game>.chat{position:static;display:flex;flex-shrink:0;justify-content:center;align-items:center;height:28px;width:auto;max-width:none;gap:8px;margin:2px 0 0;opacity:1}
.game>.chat button{font-size:11px;padding:5px 8px}
.game>.chat p{display:none}
.in-game.table-overflow{overflow-y:auto}
.in-game.table-overflow #app{height:auto;min-height:100dvh}
.in-game.table-overflow .game{flex:none;min-height:calc(100dvh - 78px)}
.search-lobby{max-width:520px;margin:24px auto;padding:28px;text-align:center}
.search-lobby h1{font-size:34px;line-height:1.15;letter-spacing:-1px}
.search-lobby p{font-size:17px;line-height:1.4}
.queue-actions{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.queue-actions .wide{margin:0;min-height:48px;font-size:18px}
.search-spinner{width:34px;height:34px;margin:22px auto;border:3px solid #ffffff25;border-top-color:#edce8b;border-radius:50%;animation:search-spin 1s linear infinite}
@keyframes search-spin{to{transform:rotate(360deg)}}
body:has(.search-lobby) footer{display:none}
@media(prefers-reduced-motion:reduce){.search-spinner{animation:none}}
@media(max-width:640px){
 .game{padding:0 6px 6px}
 .game .arena{gap:6px;--card-w:clamp(78px,11dvh,96px)}
 .game .game-toolbar>div{flex-direction:column;gap:2px;text-align:center}
 .game .game-toolbar strong{font-size:14px}
 .game .game-toolbar>div>span{font-size:10px}
 .game .toolbar-button,.game .toolbar-button span{font-size:11px;padding:4px}
 .game .toolbar-button span{padding:0}
 .game .opponents{gap:6px;padding:2px 3px 0}
 .game .opponent{max-width:180px}
 .game .opponent-info{min-height:40px;padding:4px 6px;gap:4px}
 .game .opponent .avatar{display:none}
 .game .opponent-info strong{font-size:12px}
 .game .opponent-info div>span{font-size:10px}
 .game .opponent .card-count{font-size:12px}
 .game .table-meta{min-height:36px;padding:0 6px;gap:6px}
 .game .deck-cards{width:64px;height:32px}
 .game .deck-zone .trump{width:26px;height:37.7px;left:26px;top:-3px}
 .game .deck-back{width:26px;height:37.7px;left:6px;top:-3px}
 .game .deck-zone>span,.game .discard-zone>span,.game .deck-remaining{font-size:11px}
 .game .deck-zone>span>b{font-size:18px}
 .game .discard-art{display:none}
 .game .player-zone{padding:0 2px}
 .game .player-caption{min-height:26px;font-size:11px}
 .game .player-caption>span:nth-child(2){display:none}
 .game .hand-sort-button{font-size:11px;padding:3px 6px;min-height:26px}
 .game .table-status{padding:5px 6px}
 .game .status-heading strong{font-size:14px}
 .game .status-dot{display:none}
 .game .actions .primary,.game .actions .secondary,.game .transfer-zone{padding:7px 9px;font-size:14px}
 .game .actions .ghost{font-size:12px;padding:6px}
 .game .actions:has(.take-button):has(.transfer-zone) .ghost{display:none}
 .game .clock{position:absolute;top:5px;left:110px;color:#f0d493;border-color:#e8c77b50}
 .game>.chat{display:none}
 .search-lobby{margin:18px 12px;padding:22px}
 .search-lobby h1{font-size:30px}
 .search-lobby p{font-size:16px}
}
@media(max-width:640px) and (max-height:620px){
 .in-game header{display:none}
 .game{padding-bottom:3px}
 .game .game-toolbar{height:34px;min-height:34px}
 .game .arena{--card-w:72px;gap:3px}
 .game .opponent-info{min-height:36px;padding:3px 5px}
 .game .table-meta{min-height:28px}
 .game .deck-cards{height:28px}
 .game .player-caption{min-height:24px}
 .game .hand-sort-button{min-height:24px}
 .game .hand{height:calc(var(--card-w)*1.45 + 4px + (var(--rows,1) - 1)*var(--hand-row-step,24px))}
 .game .player-footer{margin-top:2px;gap:5px}
 .game .actions .primary,.game .actions .secondary,.game .transfer-zone{padding:7px 6px;font-size:13px}
 .game .table-status{padding:5px 4px}
 .game .status-heading strong{font-size:13px}
 .in-game.table-overflow .game{min-height:100dvh}
}
@media(min-width:641px) and (max-height:620px){
 .in-game header{display:none}
 .game .game-toolbar{height:36px;min-height:36px}
 .game .arena{grid-template-columns:minmax(0,1.8fr) minmax(240px,1fr);grid-template-rows:auto minmax(0,1fr);gap:6px 14px;--card-w:82px}
 .game .table-top{grid-column:1/-1}
 .game .battle{grid-column:1;grid-row:2}
 .game .player-zone{grid-column:2;grid-row:2;align-self:end;padding:0}
 .game .opponent-info{min-height:38px;padding:3px 8px}
 .game .opponent .avatar{width:26px;height:26px}
 .game .table-meta{min-height:38px}
 .game .deck-cards{height:34px}
 .game .deck-zone .trump,.game .deck-back{width:28px;height:40.6px}
 .game .player-caption>span:nth-child(2){display:none}
 .game .player-footer{display:block;margin-top:4px}
 .game .table-status{padding:5px;max-width:none}
 .game .status-heading strong{font-size:14px}
 .game .actions{margin-top:4px}
 .game .actions .primary,.game .actions .secondary,.game .transfer-zone{font-size:13px;padding:7px 8px}
 .game .actions .ghost{display:none}
 .game>.chat{display:none}
 .in-game.table-overflow .game{min-height:100dvh}
}
/* A capped fan beside the count links the number to the opponent's hidden hand. */
.game .opponent-info>.opponent-cards{display:flex;align-items:center;gap:5px;flex:0 0 auto;min-width:0}
.card-back-stack{display:block;position:relative;width:32px;height:29px;flex-shrink:0}
.card-back-stack>span{position:absolute;left:calc(var(--back-index)*6px);top:0;width:20px;height:29px;transform:rotate(calc((var(--back-index) - 1)*5deg));transform-origin:bottom center}
.card-back-stack svg{display:block;width:100%;height:100%}
.opponent-cards .card-count{background:transparent;padding:0;min-width:12px;text-align:center}
body:not(.in-game) .language-button{position:absolute;right:max(24px,calc((100vw - 1120px)/2));top:112px;min-height:44px;padding:8px 12px;font-size:14px;z-index:2}
.in-game .language-button{display:none}
.language-choices{margin:8px 0 18px}
.language-choices button{min-height:44px}
.game .arena:has(.bout-result) .table-status{border-color:#e5c682;background:#253b24}
@media(max-width:640px){
 .game .opponent-info>.opponent-cards{gap:3px}
 .card-back-stack{width:22px;height:24px}
 .card-back-stack>span{width:16px;height:24px;left:calc(var(--back-index)*3px)}
 body:not(.in-game) .language-button{right:18px;top:88px}
}
.game.bout-result .table-status{border-color:#e5c682;background:#253b24}

.game .opponent-info .card-back-stack{overflow:visible;margin-top:0}

.game .deck-cards{width:112px;height:55px}
.game .deck-zone .trump,.game .deck-back{width:46px;height:66.7px;top:-6px}
.game .deck-zone .trump{left:44px}
.game .deck-back{left:10px}
@media(max-width:640px){
 .game .deck-cards{width:88px;height:36px}
 .game .deck-zone .trump,.game .deck-back{width:36px;height:52.2px;top:-8px}
 .game .deck-zone .trump{left:34px}
 .game .deck-back{left:6px}
 .game .deck-remaining{display:block}
}
@media(min-width:641px) and (max-height:620px){
 .game .deck-cards{height:44px;width:98px}
 .game .deck-zone .trump,.game .deck-back{width:38px;height:55.1px;top:-5px}
 .game .deck-zone .trump{left:40px}
}
@media(max-width:640px) and (max-height:620px){
 .game .game-toolbar{height:30px;min-height:30px}
 .game .arena{gap:2px}
 .game .opponent-info{min-height:32px}
 .game .opponent-info strong,.game .opponent-info div>span{line-height:1.1}
 .game .opponent-info div>span{margin-top:0}
}
@media(min-width:641px) and (max-height:620px){
 .game .game-toolbar{height:32px;min-height:32px}
 .game .deck-cards{height:38px}
 .game .deck-zone .trump,.game .deck-back{top:-8px}
}