/* Sueca and Scopone keep their own rules and hand layouts. Reclaim empty
   felt space for public cards; essential actions retain their 44px targets. */
html body.playing #app>.classic-game{height:100%!important;min-height:0}
html body.playing #app .classic-game>.classic-layout{flex-shrink:1!important}
html body #app .classic-game .classic-opponents .seat{font-size:14px;line-height:18px}
html body #app .classic-game .classic-opponents .seat small{font-size:11px;line-height:14px}
html body #app .classic-game .team-tag{font-size:10px;line-height:13px;letter-spacing:.4px}
html body #app .classic-game .partner-seat .team-tag{color:#ffe6a8;font-weight:700}
html body #app .game-sueca .trick-play.is-partner>.card{outline:2px solid #f2cf7d;outline-offset:2px;box-shadow:0 0 0 5px #d6b36b25}
html body #app .game-sueca .trick-play.is-partner>small{color:#ffe6a8;font-weight:700}
html body #app .game-sueca .previous-trick{opacity:1}
html body #app .classic-game .classic-felt{min-height:150px}
html body #app .classic-game .classic-trick,
html body #app .classic-game .classic-capture-board{container-type:size;min-height:0}
html body #app .classic-game .board-heading{flex:0 0 auto;font-size:10px;line-height:13px;letter-spacing:.4px}
html body #app .game-sueca .trick-cards{gap:12px;padding:5px 4px;overflow:visible}
html body #app .game-sueca .trick-play{max-width:calc((100% - 36px)/4);gap:4px}
html body #app .game-sueca .trick-play>.card{width:clamp(36px,calc((100cqh - 53px)*.714),82px);max-width:100%;height:auto;aspect-ratio:5/7}
html body #app .game-sueca .trick-play>small{font-size:12px;line-height:15px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body #app .game-sueca .classic-trump{font-size:12px;line-height:15px;gap:8px;min-height:0}
html body #app .game-sueca .classic-trump .trump-card>.card{width:40px;height:auto;aspect-ratio:5/7}
html body #app .game-sueca .classic-trump>small{font-size:11px;line-height:14px}
html body #app .game-scopone .classic-capture-board .table-cards{
 display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);
 grid-auto-columns:var(--classic-table-card);align-content:center;align-items:center;
 justify-content:safe center;gap:6px;min-height:0;max-height:none;
 overflow-x:auto;overflow-y:hidden;padding:5px;scroll-padding-inline:5px;
 scroll-snap-type:x proximity;overscroll-behavior-x:contain;
 --classic-table-card:clamp(34px,calc((100cqh - 40px)*.326),64px);
}
html body #app .game-scopone .classic-capture-board .table-cards.classic-table-sparse{
 grid-template-rows:auto;
 --classic-table-card:clamp(40px,min(calc((100cqh - 30px)*.652),calc((100vw - 80px)/5)),86px);
}
html body #app .game-scopone .classic-capture-board .table-cards>div{scroll-snap-align:start}
html body #app .game-scopone .classic-capture-board .table-cards .card{width:var(--classic-table-card);height:auto;aspect-ratio:208/319}
html body #app .game-scopone .classic-capture-board .table-cards[data-table-count="0"]{display:flex;justify-content:center;align-items:center}
html body #app .game-scopone .classic-capture-board .empty-meld{grid-column:1/-1;grid-row:1/-1;font-size:12px;line-height:16px;text-align:center}
html body #app .classic-game .classic-actions{position:static;background:none;border:0;backdrop-filter:none}
/* The turn instruction and selected card describe the action. Keep the
   permanent rule hint available to assistive technology and the rules menu. */
html body #app .classic-game .classic-actions>.selection-hint{
 position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;
 overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
html body #app .classic-game .classic-actions>.selected-play-card{font-size:12px;line-height:16px;min-height:16px;height:auto}
html body #app .classic-game .classic-actions>button{font-size:14px;min-height:44px}
html body #app .classic-game .hand-heading{font-size:11px;line-height:15px;min-height:15px;height:auto}

@media(max-width:650px){
 html body #app .classic-game .classic-felt{padding:5px 6px;gap:3px}
 html body #app .classic-game .classic-opponents .seat{font-size:12px;line-height:15px;gap:0}
 html body #app .classic-game .classic-opponents .seat small{font-size:10px;line-height:12px;margin-top:0}
 html body #app .classic-game .team-tag{font-size:9px;line-height:11px;margin:0}
 html body #app .classic-game .board-heading{font-size:9px;line-height:12px;margin:2px 0}
 html body #app .game-sueca .trick-cards{gap:8px}
 html body #app .game-sueca .trick-play{max-width:calc((100% - 24px)/4);gap:2px}
 html body #app .game-sueca .trick-play>.card{width:clamp(36px,calc((100cqh - 48px)*.714),66px)}
 html body #app .game-sueca .trick-play>small{font-size:11px;line-height:14px}
 html body #app .game-sueca .classic-trump{font-size:10px;line-height:13px;gap:7px}
 html body #app .game-sueca .classic-trump .trump-card>.card{width:34px}
 html body #app .game-sueca .classic-trump>small{font-size:10px;line-height:12px}
 html body #app .game-sueca .classic-live-points{font-size:11px;line-height:14px;gap:5px;flex-wrap:wrap}
 html body #app .game-sueca .classic-live-points>span{line-height:14px}
 html body #app .game-scopone .classic-capture-board .table-cards{gap:5px;padding:4px}
 html body #app .game-scopone .classic-capture-board .table-cards.classic-table-sparse{
  --classic-table-card:clamp(40px,min(calc((100cqh - 28px)*.652),calc((100vw - 76px)/5)),64px);
 }
 html body #app .game-scopone .classic-capture-board .table-cards.classic-table-many{
  --classic-table-card:clamp(34px,calc((100cqh - 36px)*.326),54px);
 }
 html body #app .game-scopone .classic-detail{padding:0 3px}
 html body #app .game-scopone .classic-capture-scores{gap:7px}
 html body #app .game-scopone .classic-capture-scores .capture-score,
 html body #app .game-scopone .classic-capture-scores .capture-score>*{font-size:10px;line-height:13px}
}

@media(min-width:651px) and (max-width:1000px){
 /* The previous notebook rule hid the complete score panel. Keep the live
    strategic counts below the hand when there is no room for a side panel. */
 html body #app .classic-game .classic-detail{display:block;flex:none;padding:0 4px;border:0;background:none;margin:0}
 html body #app .classic-game .classic-detail>h2,
 html body #app .classic-game .classic-detail>.classic-rules,
 html body #app .classic-game .classic-detail small{display:none}
 html body #app .classic-game .classic-detail .capture-score{border:0;margin:0;padding:0;font-size:11px;line-height:14px;gap:2px}
 html body #app .game-scopone .classic-capture-scores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 html body #app .game-sueca .classic-live-points{display:flex;flex-direction:row;justify-content:center;gap:8px}
}

@media(max-width:650px) and (max-height:650px){
 html body #app .classic-game .classic-felt{min-height:110px;padding-block:3px}
 html body #app .classic-game .classic-opponents .seat small{display:none}
 html body #app .game-sueca .classic-trump .trump-card>.card{width:30px}
 html body #app .game-sueca .classic-trump>small{font-size:10px;line-height:11px}
 html body #app .game-sueca .trick-play>.card{width:clamp(32px,calc((100cqh - 40px)*.714),52px)}
 html body #app .game-sueca .trick-cards{padding-block:3px}
 html body #app .classic-game .classic-hand-grid{gap:3px;padding-block:2px}
 html body.playing #app .classic-game .classic-hand-grid>.card{width:44px}
 html body #app .classic-game .classic-actions>.selected-play-card{font-size:11px;line-height:14px;min-height:14px}
 html body.playing #app .classic-game .classic-actions>.selected-play-card{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 html body.playing #app .classic-game>.turn-note[data-selection-text]{font-size:0}
 html body.playing #app .classic-game>.turn-note[data-selection-text]:before{content:attr(data-selection-text);font-size:11px;line-height:16px}
 html body #app .game-scopone .classic-capture-scores .capture-score,
 html body #app .game-scopone .classic-capture-scores .capture-score>*{font-size:10px;line-height:12px}
}