/* The playable area fits in one viewport. Only information and oversized hands scroll. */
[data-page=play] .page-heading{height:92px;padding:13px 0 15px;align-items:center;gap:20px}
[data-page=play] .page-heading .breadcrumb,[data-page=play] .page-heading>div>p{display:none}
[data-page=play] .page-heading .eyebrow{font-size:8px;letter-spacing:2px}
[data-page=play] .page-heading h1{font-size:29px;letter-spacing:-1px;line-height:1.4;margin:4px 0 0}
[data-page=play] .play-section{padding-bottom:30px;scroll-margin-top:98px}
.game-frame{height:calc(100vh - 202px);height:calc(100dvh - 202px);max-height:880px;display:flex;flex-direction:column;min-height:0;box-shadow:0 14px 35px #0002;border-radius:8px;overflow:hidden}
.game-frame .game-toolbar{flex:none;min-height:54px;padding:8px 16px;gap:12px;border-radius:8px 8px 0 0}
.game-frame .mode-switch button{padding:7px 14px}
.game-frame .toolbar-right{gap:18px;white-space:nowrap}
.game-frame .duel-layout{flex:1;min-height:0;grid-template-columns:minmax(0,1.55fr) minmax(310px,1fr);overflow:hidden}
.game-frame .duel-table{container-type:size;min-height:0;height:100%;width:100%;padding:12px 18px;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"top top top" "west north east" "center center center" "south south south" "bottom bottom bottom";grid-template-rows:16px minmax(0,1fr) auto minmax(0,1.12fr) 14px;gap:8px 12px;align-items:center;overflow:hidden}
.game-frame .duel-table:before{inset:32px 18px;border-radius:42%}
.game-frame .player-area{max-width:none;width:100%;min-height:0;max-height:100%;justify-self:center;padding:10px 4px;border-radius:7px;display:flex;flex-direction:column;align-items:center;overflow:hidden}
.game-frame .player-caption{flex:none;min-height:0;margin:0 0 6px;gap:6px;flex-direction:row;flex-wrap:wrap;line-height:1.3;justify-content:center}
.game-frame .player-caption>div>span{display:none}
.game-frame .player-caption strong{font-size:9px;letter-spacing:1.2px}
.game-frame .player-badge{width:21px;height:21px;font-size:10px}
.game-frame .hand-total{font-size:9px;line-height:1.3}
.game-frame .duel-hand{--hand-width:clamp(24px,calc(7.6cqw - 9px),60px);display:flex;justify-content:safe center;gap:8px;min-height:0;max-height:100%;width:100%;padding:7px 3px 17px;overflow:auto;scrollbar-width:thin;scrollbar-color:#758766 #213b29}
.game-frame .own-area{max-width:430px;background:transparent;border-color:transparent}
.game-frame .active-player .player-caption strong{color:#f0dab0}
.game-frame .active-player .player-caption:before{content:'';width:5px;height:5px;border-radius:50%;background:#d4c392;box-shadow:0 0 9px #d4c39280}
.game-frame .own-area .duel-hand{--hand-width:clamp(38px,13cqh,78px);gap:16px}
.game-frame .duel-slot{flex:none}
.game-frame .duel-card,.game-frame .slot-empty{width:var(--hand-width);height:calc(var(--hand-width)*1.5)}
.game-frame .duel-slot .slot-index{left:0;top:calc(100% + 4px);width:100%;text-align:center;font-size:7px;line-height:1}
.game-frame .duel-center{padding:0;gap:22px;flex-wrap:nowrap;min-height:0}
.game-frame .drawn-zone{flex-basis:auto;padding-left:14px;border-left:1px solid #81916550}
.game-frame .deck-button,.game-frame .center-card{width:clamp(28px,7.5cqh,55px);height:clamp(42px,11.25cqh,82.5px)}
.game-frame .deck-zone,.game-frame .drawn-zone{gap:5px}
.game-frame .deck-zone>span,.game-frame .drawn-zone>span{font-size:8px}
.game-frame .table-topline,.game-frame .table-bottomline{font-size:7px;letter-spacing:1px;padding:0;min-height:0}
.game-frame .game-console{min-width:0;min-height:0;padding:0;display:flex;flex-direction:column;border-left:1px solid #41503a;border-top:0;overflow:hidden}
.console-scroll{flex:1;min-height:0;overflow:auto;padding:22px;scrollbar-width:thin;scrollbar-color:#71825b #152219;overscroll-behavior:contain}
.console-scroll>h2{font-size:23px;line-height:1.5;font-weight:400;margin:10px 0 12px}
.console-scroll>.eyebrow{font-size:8px;letter-spacing:2px}
.console-scroll .game-message{min-height:0;font-size:12px;line-height:1.9}
.console-scroll .card-inspector{min-height:0;padding:15px 17px;margin:18px 0}
.console-scroll .card-inspector h3{font-size:18px;margin:8px 0}
.console-scroll .card-inspector p{font-size:11px}
.console-scroll .card-inspector>span:last-child{padding-top:8px;margin-top:8px}
.console-scroll .game-log{margin-top:16px;padding-top:14px}
.console-scroll .game-log ol{max-height:130px}
.game-frame .game-actions,.game-frame .game-actions.mobile-docked:not(:empty){position:static;flex:none;display:flex;min-height:66px;margin:0;padding:13px 18px;gap:8px;border:0;border-top:1px solid #47543b;background:#19291e;box-shadow:none;backdrop-filter:none}
.game-frame .game-actions button{min-height:38px;padding:8px 13px;font-size:11px;line-height:1.6}
.game-frame .game-actions:not(:has(button:not([hidden]))):before{content:'对手正在行动，请稍候…';font-size:11px;color:#aab69c;align-self:center}
[data-page=play] .table-guidance{margin-top:16px;padding:13px 18px;border:1px solid var(--line);border-radius:5px}
.table-focused{overflow:hidden}
.table-focused .game-frame{position:fixed;z-index:60;inset:12px;width:auto;height:calc(100vh - 24px);height:calc(100dvh - 24px);max-height:none;background:var(--bg);box-shadow:0 0 0 30px #101b19}
@media(max-width:1100px){.game-frame .duel-layout{grid-template-columns:minmax(0,1.2fr) minmax(285px,1fr)}.game-frame .duel-table{padding:10px 12px;gap:7px 8px}.game-frame .player-caption .hand-total{display:none}.console-scroll{padding:17px}.console-scroll>h2{font-size:20px}.game-frame .game-actions{padding:10px 12px}}
@media(max-width:760px){
 [data-page=play] .page-heading{height:62px;padding:9px 0}[data-page=play] .page-heading h1{font-size:22px;margin:0}[data-page=play] .page-heading .eyebrow{display:none}[data-page=play] .play-section{width:calc(100% - 24px);scroll-margin-top:78px}
 .game-frame{height:calc(100vh - 146px);height:calc(100dvh - 146px);max-height:950px}
 .game-frame .game-toolbar{padding:8px 10px;gap:6px;min-height:66px;flex-direction:column;align-items:stretch}
 .game-frame .mode-switch{padding:2px}.game-frame .mode-switch button{font-size:10px;padding:5px 12px}.game-frame .toolbar-right{gap:10px;font-size:9px}.game-frame .toolbar-right .reset{font-size:9px}
 .game-frame .duel-layout{display:flex;flex-direction:column}
 .game-frame .duel-table{flex:1;min-height:0;padding:8px 10px;grid-template-rows:12px minmax(0,1fr) auto minmax(0,1.1fr) 10px;gap:5px 6px}
 .game-frame .opponent-area,.game-frame .own-area{padding:3px 6px}.game-frame .player-caption{gap:4px;min-height:0;flex-direction:row;margin-bottom:3px}.game-frame .player-caption strong{font-size:8px;letter-spacing:.5px}.game-frame .player-badge{display:none}.game-frame .player-caption .hand-total{display:none}
 .game-frame .duel-hand{--hand-width:clamp(21px,8cqh,40px);gap:4px 9px;padding:3px 9px}.game-frame .own-area .duel-hand{--hand-width:clamp(23px,9cqh,47px)}
 .game-frame .duel-slot .slot-index{font-size:6px;left:-8px}.game-frame .duel-center{gap:18px}.game-frame .deck-button,.game-frame .center-card{width:clamp(22px,7.5cqh,37px);height:clamp(33px,11.25cqh,55.5px)}
 .game-frame .table-topline,.game-frame .table-bottomline{font-size:6px;letter-spacing:.6px}.game-frame .duel-center .deck-zone>span,.game-frame .drawn-zone>span{font-size:7px}
 .game-frame .game-console{height:184px;flex:none;border-left:0;border-top:1px solid #41503a}
 .console-scroll{padding:10px 13px}.console-scroll>.eyebrow{display:none}.console-scroll>h2{font-size:16px;margin:0 0 5px}.console-scroll .game-message{font-size:11px;line-height:1.7;padding-left:10px}.console-scroll .card-inspector{padding:10px 12px;margin:12px 0}.console-scroll .card-inspector h3{font-size:16px}.console-scroll .game-log{margin-top:10px}.console-scroll .result-summary{padding:10px}
 .game-frame .game-actions,.game-frame .game-actions.mobile-docked:not(:empty){padding:8px 10px;min-height:52px;gap:6px}.game-frame .game-actions button{min-height:35px;padding:6px 10px;font-size:10px}
 .table-focused .game-frame{inset:6px;height:calc(100vh - 12px);height:calc(100dvh - 12px)}
}
@media(max-width:760px) and (max-height:700px){.game-frame .game-console{height:152px}.game-frame .table-topline{display:none}.game-frame .duel-table{grid-template-rows:minmax(0,1fr) auto minmax(0,1.1fr) 10px;grid-template-areas:"west north east" "center center center" "south south south" "bottom bottom bottom"}}
@media(min-width:761px) and (max-height:650px){[data-page=play] .page-heading{height:62px}.game-frame{height:calc(100vh - 164px);height:calc(100dvh - 164px)}.game-frame .game-toolbar{min-height:46px}.game-frame .mode-switch button{padding:4px 12px}.console-scroll{padding:14px}.game-frame .game-actions{padding:8px 12px;min-height:54px}}
@media(max-width:760px) and (max-height:620px){
 [data-page=play] .page-heading{height:34px;padding:3px 0}[data-page=play] .page-heading h1{font-size:16px}
 .game-frame{height:calc(100vh - 116px);height:calc(100dvh - 116px)}
 .game-frame .game-toolbar{min-height:0;padding:5px 9px;gap:3px}.game-frame .mode-switch button{padding:3px 10px;font-size:9px}.game-frame .toolbar-right{line-height:1.5}
 .game-frame .game-console{height:126px}.console-scroll{padding:7px 10px}.console-scroll>h2{font-size:14px;margin-bottom:3px}.console-scroll .game-message{font-size:10px}
 .game-frame .game-actions{min-height:45px;padding:5px 8px}.game-frame .game-actions button{min-height:33px}
}
/* Narrow tables give each opponent a full row, keeping four readable cards together. */
@media(max-width:1100px){
 .game-frame .duel-table{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "west" "north" "east" "center" "south" "bottom";grid-template-rows:12px repeat(3,minmax(0,1fr)) minmax(0,1.2fr) minmax(0,1.25fr) 10px;gap:5px;padding:10px 16px}
 .game-frame .duel-table:before{inset:22px 12px;border-radius:32px;opacity:.45}
 .game-frame .player-area{max-width:430px;display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;padding:0 5px;border:0;background:transparent;overflow:visible}
 .game-frame .player-caption{margin:0;gap:4px;flex-wrap:nowrap;justify-content:flex-start}
 .game-frame .player-badge{display:none}.game-frame .player-caption strong{font-size:10px;letter-spacing:.5px}
 .game-frame .duel-hand{--hand-width:clamp(25px,9.2cqh,46px);gap:12px;padding:4px 3px 13px;justify-content:safe center}
 .game-frame .own-area .duel-hand{--hand-width:clamp(28px,11cqh,55px);gap:12px}
 .game-frame .duel-slot .slot-index{left:0;top:calc(100% + 3px);font-size:6px}
 .game-frame .duel-center{gap:26px;margin-left:74px}
 .game-frame .deck-button,.game-frame .center-card{width:clamp(25px,9cqh,45px);height:clamp(37.5px,13.5cqh,67.5px)}
}
@media(max-width:760px){
 .game-frame .duel-table{padding:8px 12px;gap:4px}
 .game-frame .player-area{grid-template-columns:55px minmax(0,1fr);gap:6px}
 .game-frame .player-caption strong{font-size:9px}
 .game-frame .duel-center{margin-left:61px;gap:22px}
 .game-frame .duel-hand,.game-frame .own-area .duel-hand{gap:clamp(8px,3cqw,15px)}
}
@media(max-width:760px) and (max-height:700px){
 .game-frame .table-topline,.game-frame .table-bottomline{display:none}
 .game-frame .duel-table{grid-template-areas:"west" "north" "east" "center" "south";grid-template-rows:repeat(3,minmax(0,1fr)) minmax(0,1.15fr) minmax(0,1.25fr);gap:4px}
 .game-frame .duel-hand{--hand-width:clamp(24px,8.8cqh,40px);padding-top:2px;padding-bottom:10px}
 .game-frame .own-area .duel-hand{--hand-width:clamp(28px,10.5cqh,47px)}
 .game-frame .deck-button,.game-frame .center-card{width:clamp(24px,8.5cqh,37px);height:clamp(36px,12.75cqh,55.5px)}
}