/* A dealt card game uses the phone as a game surface, not the café side panel. */
.card-hand-dock{display:none}
.card-fit-stage,.card-fit-surface{display:contents}

@media(max-width:1100px) and (orientation:landscape){
  body.card-fullscreen{overflow:hidden}
  body.card-fullscreen .topbar{display:none!important}
  body.card-fullscreen .cafe-shell{position:fixed;inset:0!important;height:var(--tea-visible-bottom,100dvh)!important;max-width:none;margin:0;padding:0}
  body.card-fullscreen .play-mode .side-panel{position:fixed;z-index:45;top:0!important;bottom:auto!important;left:0!important;right:0!important;width:100%!important;height:var(--tea-visible-bottom,100dvh)!important;max-height:none;min-height:0;padding:0!important;border:0!important;outline:0;box-shadow:none!important}
  body.card-fullscreen :is(.world-card,.panel-close,.classic-game-label){display:none!important}
  body.card-fullscreen .panel-tabs{display:none!important}
  body.card-fullscreen .play-mode .cards-view.active.in-card-round{display:flex!important;flex-direction:column;height:100%!important;min-height:0;overflow:hidden!important;padding:0!important;background:#284935}

  body.card-fullscreen .cards-view .game-page-heading{flex:none;min-height:39px;margin:0!important;padding:3px max(8px,env(safe-area-inset-right)) 3px max(8px,env(safe-area-inset-left))!important;display:flex;justify-content:space-between;gap:5px;background:#dfd1ac;border-bottom:2px solid #7c673e}
  body.card-fullscreen .cards-view .game-page-heading>div:first-child{display:block!important;min-width:0;flex:1}
  body.card-fullscreen .cards-view .game-page-heading small{display:none}
  body.card-fullscreen .cards-view .game-page-heading h2{margin:0;font-size:clamp(11px,2.5vw,16px);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#344a37}
  body.card-fullscreen .cards-view .card-header-actions{width:auto!important;flex:none;gap:4px}
  body.card-fullscreen .cards-view .card-header-actions button{min-height:32px!important;padding:3px 6px;font-size:10px}
  body.card-fullscreen .cards-view .card-mode-picker{position:absolute;z-index:70;top:40px;right:max(7px,env(safe-area-inset-right));width:min(330px,calc(100vw - 14px));margin:0;padding:8px;grid-template-columns:repeat(2,minmax(0,1fr));background:#f5e8c8;border:2px solid #6c5738;box-shadow:3px 4px #1a2820}
  body.card-fullscreen .cards-view .card-mode-picker:not(.show-card-picker){display:none}
  body.card-fullscreen .cards-view.show-card-picker .card-mode-picker{display:grid}
  body.card-fullscreen .cards-view .card-mode-picker button{min-height:42px;padding:5px;font-size:10px}

  body.card-fullscreen .cards-view> :is(#tienlen-mode,#color-cards-mode,#baicao-mode,#poker-mode):not([hidden]),
  body.card-fullscreen .cards-view :is(#tl-game,#card-game,#bc-game,#pk-game):not([hidden]){display:flex;flex-direction:column;flex:1;min-height:0;width:100%;max-width:none;margin:0}
  body.card-fullscreen .cards-view .card-scroll-area{flex:1;min-height:0;position:relative;overflow:hidden;padding:0!important;background:radial-gradient(ellipse at center,#4b7359,#31523e 90%)}
  body.card-fullscreen .card-fit-stage{display:block;position:absolute;inset:0;overflow:hidden}
  body.card-fullscreen .card-fit-surface{display:block;position:absolute;inset:0;width:100%;height:100%}
  body.card-fullscreen .cards-view :is(.tl-rules,.classic-rules){display:none}
  body.card-fullscreen .cards-view :is(.tl-felt,.card-table,.classic-felt){position:relative;min-height:0;height:100%;max-width:none;margin:0;padding:4px 6px;border:0;outline:0;border-radius:0;box-shadow:none;background:transparent}

  body.card-fullscreen .cards-view .card-hand-dock{display:flex;align-items:center;justify-content:center;flex:none;gap:5px;min-height:80px;height:max(80px,var(--extra-hand-height,0px));padding:2px max(6px,env(safe-area-inset-right)) 2px max(6px,env(safe-area-inset-left));overflow:hidden;background:#284936;border-top:2px solid #9bb78a}
  body.card-fullscreen .cards-view .card-hand-dock .tl-hand-heading{display:none}
  body.card-fullscreen .cards-view .card-hand-dock .hand-sort-row{order:2;flex:none;display:block;margin:0}
  body.card-fullscreen .cards-view .card-hand-dock .hand-sort-row small{display:none}
  body.card-fullscreen .cards-view .card-hand-dock .hand-sort-row button{width:76px;min-height:44px;max-height:60px;padding:4px;white-space:normal;font-size:10px;line-height:1.1}
  body.card-fullscreen .cards-view .card-hand-dock .tl-hand{order:1;flex:1;min-width:0;width:auto;max-width:calc(var(--hand-columns,13)*46px);height:100%;min-height:0;display:grid;grid-template-columns:repeat(var(--hand-columns,13),minmax(0,1fr));grid-template-rows:repeat(var(--hand-rows,1),minmax(0,1fr));gap:2px;align-items:center;justify-items:center;overflow:hidden;padding:10px 3px 2px;touch-action:manipulation}
  body.card-fullscreen .cards-view .card-hand-dock .tl-hand .tl-card{width:100%;max-width:44px;height:100%;min-height:0;max-height:61px}
  body.card-fullscreen .cards-view .card-hand-dock .tl-card-symbol{font-size:23px}
  body.card-fullscreen .cards-view .card-hand-dock .hand-area{display:flex;align-items:center;gap:5px;min-width:0;width:100%;height:100%;margin:0;padding:0;border:0}
  body.card-fullscreen .cards-view .card-hand-dock .hand-area>small{display:none}
  body.card-fullscreen .cards-view .card-hand-dock .hand-area .hand{order:1;flex:1;min-width:0;width:auto;max-width:calc(var(--hand-columns,7)*46px);height:100%;min-height:0;display:grid;grid-template-columns:repeat(var(--hand-columns,7),minmax(0,1fr));grid-template-rows:repeat(var(--hand-rows,1),minmax(0,1fr));gap:2px;align-items:center;justify-items:center;overflow:hidden;padding:9px 3px 2px;touch-action:manipulation}
  body.card-fullscreen .cards-view .card-hand-dock .hand .playing-card{width:100%;max-width:45px;height:100%;max-height:62px;min-height:0;aspect-ratio:auto;margin:0;padding:0;font-size:20px}
  body.card-fullscreen .cards-view .card-hand-dock .classic-own-hand{display:grid;justify-items:center;align-content:center;width:100%;height:100%;margin:0;padding:0;border:0}
  body.card-fullscreen .cards-view .card-hand-dock .classic-own-hand>small{font-size:9px;line-height:1.1}
  body.card-fullscreen .cards-view .card-hand-dock .classic-hand{min-height:0;padding:2px 0 0;gap:7px}
  body.card-fullscreen .cards-view .card-hand-dock .classic-hand .classic-card{flex:0 0 42px;width:42px;height:59px;aspect-ratio:auto}
  body.card-fullscreen .cards-view .card-hand-dock .classic-card-corner{font-size:13px}
  body.card-fullscreen .cards-view .card-hand-dock .classic-card-symbol{font-size:28px}

  body.card-fullscreen .cards-view :is(.tl-actions,.classic-actions,.card-action-bar){flex:none;position:relative;width:100%;max-width:none;margin:0;padding:3px max(7px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left));border-top:2px solid #9b865b;background:#eee0bc;box-shadow:none}
  body.card-fullscreen .cards-view :is(.tl-actions,.classic-actions,.card-action-bar)>p{min-height:0;max-height:13px;margin:0 0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;line-height:1.2}
  body.card-fullscreen .cards-view :is(.tl-action-buttons,.classic-buttons){gap:4px}
  body.card-fullscreen .cards-view :is(.tl-action-buttons,.classic-buttons)>button{min-height:44px;padding:4px 5px;font-size:10px}
  body.card-fullscreen .cards-view .tl-action-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  body.card-fullscreen .cards-view .tl-action-buttons>button.primary{min-width:0}
  body.card-fullscreen .cards-view #card-game .card-action-bar{display:flex;align-items:center;justify-content:center;min-height:52px}
  body.card-fullscreen .cards-view #card-game .card-action-bar>p{flex:1}
  body.card-fullscreen .cards-view #card-game .card-action-bar>button{min-height:44px;padding:4px 9px}
  body.card-fullscreen .cards-view #card-game .color-picker:not([hidden]){display:flex;align-items:center;gap:5px;max-width:100%;margin:0}
  body.card-fullscreen .cards-view #card-game .color-picker:not([hidden])~#draw-button{display:none}
  body.card-fullscreen .cards-view #card-game .color-picker>span{font-size:10px}
  body.card-fullscreen .cards-view #card-game .color-picker button{flex:0 0 36px;width:36px;height:36px}
  body.card-fullscreen .cards-view #card-game .color-picker #cancel-wild{flex-basis:auto;min-height:36px;padding:3px}

  body.card-fullscreen .cards-view .tl-arena{height:100%;min-height:0;grid-template-columns:85px minmax(0,1fr) 85px;grid-template-rows:18px minmax(0,1fr) 18px;gap:2px}
  body.card-fullscreen .cards-view .tl-arena .tl-player{min-height:0;padding:1px 2px;gap:1px;box-shadow:none}
  body.card-fullscreen .cards-view .tl-arena .tl-player b{font-size:11px;line-height:1.1}
  body.card-fullscreen .cards-view .tl-arena .tl-player :is(span,small){font-size:10px;line-height:1.1}
  body.card-fullscreen .cards-view .tl-arena .tl-player small{display:none}
  body.card-fullscreen .cards-view .tl-arena .tl-player:is([data-edge=top],[data-edge=bottom]){display:flex;justify-content:center;align-items:center;gap:5px;max-width:210px}
  body.card-fullscreen .cards-view .tl-arena .tl-turn{position:absolute;left:7px;top:4px;width:85px;min-height:0;font-size:10px;line-height:1;gap:3px}
  body.card-fullscreen .cards-view .tl-arena .tl-turn span{padding:2px 3px;font-size:9px}
  body.card-fullscreen .cards-view .tl-arena .tl-center{grid-area:2/2;min-height:0;height:100%;padding:0;gap:1px}
  body.card-fullscreen .cards-view .tl-arena [data-edge=left]{grid-area:2/1}
  body.card-fullscreen .cards-view .tl-arena [data-edge=right]{grid-area:2/3}
  body.card-fullscreen .cards-view .tl-arena [data-edge=bottom]{grid-area:3/2}
  body.card-fullscreen .cards-view .tl-arena .tl-center>small{display:none}
  body.card-fullscreen .cards-view .tl-arena .tl-center>p{display:none}
  body.card-fullscreen .cards-view .tl-arena .tl-top{width:100%;min-height:0;gap:2px}
  body.card-fullscreen .cards-view .tl-top>.card-pile-layer{flex-wrap:nowrap;min-height:0;gap:2px}
  body.card-fullscreen .cards-view .tl-arena .tl-top .tl-card{flex:0 1 35px;min-width:0;width:35px;height:var(--center-card-height,45px)}
  body.card-fullscreen .cards-view .tl-arena .tl-empty-trick{min-height:36px;font-size:22px}
  body.card-fullscreen .cards-view .color-arena{height:100%;min-height:0;grid-template-columns:85px minmax(0,1fr) 85px;grid-template-rows:18px minmax(0,1fr) 18px;gap:2px}
  body.card-fullscreen .cards-view .color-arena .card-player{min-height:0;padding:2px;font-size:11px;line-height:1.1;box-shadow:none}
  body.card-fullscreen .cards-view .color-arena .card-player:is([data-edge=top],[data-edge=bottom]){max-width:310px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:1px 4px}
  body.card-fullscreen .cards-view .color-arena .card-stage{height:100%;gap:12px;padding:0 0 20px}
  body.card-fullscreen .cards-view .color-arena .deck-block>small{display:none}
  body.card-fullscreen .cards-view .color-arena .playing-card{width:37px;height:var(--center-card-height,45px);font-size:22px}
  body.card-fullscreen .cards-view .color-play-pile{width:37px;height:var(--center-card-height,45px)}
  body.card-fullscreen .cards-view .color-arena .turn-sign{font-size:9px;line-height:1}
  body.card-fullscreen .cards-view .classic-felt{grid-template-columns:100px minmax(0,1fr) 100px;grid-template-rows:20px minmax(0,1fr) 20px;gap:2px 5px;align-content:stretch}
  body.card-fullscreen .cards-view .classic-edge-top{grid-area:1/2;align-self:center}
  body.card-fullscreen .cards-view .classic-edge-left{grid-area:2/1}
  body.card-fullscreen .cards-view .classic-edge-right{grid-area:2/3}
  body.card-fullscreen .cards-view .classic-edge-bottom{grid-area:3/2;padding:0}
  body.card-fullscreen .cards-view .classic-player{display:flex;flex-direction:column;text-align:center;padding:2px;gap:1px;box-shadow:none}
  body.card-fullscreen .cards-view .classic-edge-top .classic-player{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:1px 5px;max-width:260px}
  body.card-fullscreen .cards-view .classic-edge-top .classic-player-info{flex-basis:auto;text-align:center}
  body.card-fullscreen .cards-view .classic-edge-bottom .classic-player{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 5px;max-width:none;padding:2px}
  body.card-fullscreen .cards-view .classic-player :is(.classic-player-info,.classic-player-action):empty{display:none}
  body.card-fullscreen .cards-view .classic-player-cards:has(.card-back){display:none}
  body.card-fullscreen .cards-view .classic-player-name{font-size:11px}
  body.card-fullscreen .cards-view .classic-player-badge,body.card-fullscreen .cards-view .classic-player-info{font-size:10px;line-height:1.1;min-height:0}
  body.card-fullscreen .cards-view .classic-player-action{display:none}
  body.card-fullscreen .cards-view :is(.classic-edge-top,.classic-edge-bottom) .classic-player-badge{display:none}
  body.card-fullscreen .cards-view :is(.classic-edge-top,.classic-edge-bottom) .classic-player{max-width:310px;flex-wrap:nowrap}
  body.card-fullscreen .cards-view .classic-player-cards{min-height:26px;margin:0;gap:2px}
  body.card-fullscreen .cards-view .classic-player-cards .classic-card{flex-basis:20px;width:20px;height:28px}
  body.card-fullscreen .cards-view .classic-turn{position:absolute;grid-area:auto;top:4px;left:6px;width:100px;min-height:0;margin:0;font-size:10px;line-height:1}
  body.card-fullscreen .cards-view .poker-board-area{grid-area:2/2;display:flex;flex-direction:column;justify-content:center;min-height:0;height:100%;gap:2px;padding:0}
  body.card-fullscreen .cards-view #pk-stage{position:absolute;top:4px;right:6px;width:100px;font-size:9px}
  body.card-fullscreen .cards-view #pk-round-bet,body.card-fullscreen .cards-view #pk-last-action{display:none}
  body.card-fullscreen .cards-view .poker-board{max-width:210px;padding:1px 0;gap:2px}
  body.card-fullscreen .cards-view .poker-board .poker-board-slot .classic-card{height:var(--center-card-height,45px);max-height:none;aspect-ratio:auto}
  body.card-fullscreen .cards-view .poker-pot{margin:0;padding:2px 8px;font-size:10px}
  body.card-fullscreen .cards-view .baicao-table-center{grid-area:2/2;min-height:0;height:100%;gap:2px}
  body.card-fullscreen .cards-view #pk-game .classic-actions{padding-top:3px}
  body.card-fullscreen .cards-view #pk-controls{display:flex;flex-wrap:nowrap;align-items:stretch;gap:4px;min-width:0}
  body.card-fullscreen .cards-view #pk-controls .classic-buttons{flex:1;min-width:0;max-width:none;width:auto;gap:3px}
  body.card-fullscreen .cards-view #pk-controls .poker-raise-control{display:flex;flex:0 0 154px;min-width:0;min-height:44px;margin:0;gap:3px}
  body.card-fullscreen .cards-view #pk-controls .poker-raise-control input{width:61px;min-width:0;min-height:44px;padding:2px;font-size:14px}
  body.card-fullscreen .cards-view #pk-controls .poker-raise-control button{flex:1;min-width:0;min-height:44px;padding:2px}
  body.card-fullscreen .cards-view #pk-controls .poker-raise-control :is(label,small){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  body.card-fullscreen .cards-view #pk-feedback:not(.error){display:none}
  body.card-fullscreen .cards-view .classic-results{padding:3px;margin:2px 0 0;font-size:10px}
  body.card-fullscreen .cards-view .classic-results>p{font-size:9px;margin:2px 0;line-height:1.2}
  body.card-fullscreen .classic-felt:has(.classic-results:not([hidden])){grid-template-rows:38px minmax(0,1fr) 18px}
  body.card-fullscreen .classic-felt:has(.classic-results:not([hidden])) :is(.classic-edge-bottom,.classic-player-badge,.classic-turn,.baicao-table-center){display:none}
  body.card-fullscreen .classic-felt:has(.classic-results:not([hidden])) .classic-player-cards{display:flex;flex-wrap:nowrap;min-height:0}
  body.card-fullscreen .classic-felt:has(.classic-results:not([hidden])) .classic-player-cards .classic-card{height:clamp(28px,8vh,40px);width:24px;flex-basis:24px}
  body.card-fullscreen .classic-felt:has(.classic-results:not([hidden])) .classic-edge-top .classic-card{height:28px;width:20px;flex-basis:20px}
  body.card-fullscreen .classic-felt:has(.classic-results:not([hidden])) .classic-results{grid-area:3/2;margin:0;padding:1px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.card-fullscreen .classic-felt:has(.classic-results:not([hidden])) .classic-results>p{display:none}
}

@media(min-width:600px) and (max-width:1100px) and (orientation:landscape){
  body.card-fullscreen .cards-view .card-header-actions button,
  body.card-fullscreen .cards-view :is(.tl-action-buttons,.classic-buttons)>button{font-size:12px}
  body.card-fullscreen .cards-view .classic-player-name,
  body.card-fullscreen .cards-view .tl-arena .tl-player b,
  body.card-fullscreen .cards-view .color-arena .card-player{font-size:13px}
  body.card-fullscreen .cards-view .classic-felt{grid-template-columns:135px minmax(0,1fr) 135px}
}

@media(max-width:570px) and (max-height:320px) and (orientation:landscape){
  body.card-fullscreen .cards-view .game-page-heading{min-height:35px}
  body.card-fullscreen .cards-view .game-page-heading h2{font-size:11px}
  body.card-fullscreen .cards-view .card-header-actions button{min-height:30px!important;padding:2px 4px;font-size:9px}
  body.card-fullscreen .cards-view .card-hand-dock{height:max(67px,var(--extra-hand-height,0px));min-height:67px}
  body.card-fullscreen .cards-view .card-hand-dock .tl-hand .tl-card{max-height:53px}
  body.card-fullscreen .cards-view .card-hand-dock .hand .playing-card{max-height:53px}
  body.card-fullscreen .cards-view .card-hand-dock .classic-hand .classic-card{height:49px}
  body.card-fullscreen .cards-view .poker-board{max-width:170px}
}