/* Gameplay owns the usable viewport; secondary rules stay in the Mesa menu.
   In particular, the Bisca trump no longer steals a column from four plays. */
.game-bisca .trick-play.is-partner>.card{outline:2px solid #f2cf7d;outline-offset:2px;box-shadow:0 0 0 5px #d6b36b25}
.game-bisca .trick-play.is-partner>small{color:#ffe6a8;font-weight:bold}
html body.playing #app .game-bisca .previous-trick{opacity:1}
.capture-played{display:flex;align-items:center;justify-content:center;gap:16px;margin:12px 0}
.capture-played .card{width:64px;height:auto;aspect-ratio:208/319}
.capture-played p{margin:0;max-width:230px;font-size:15px}
.capture-played strong,.capture-played p>span{display:block;line-height:1.5}
.capture-choice-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.capture-option{flex-direction:column;gap:8px;min-height:44px}
.capture-total{font-size:14px;color:#f9e6af}
html body.playing #app :is(.game-scopa,.game-bisca) .opponents .seat{font-size:12px;line-height:14px}
html body.playing #app :is(.game-scopa,.game-bisca) .opponents .seat small{font-size:10px;line-height:12px}
html body.playing #app :is(.game-scopa,.game-bisca) .team-tag{font-size:9px;line-height:11px;letter-spacing:0}
html body.playing #app :is(.game-scopa,.game-bisca) .self-seat{display:none}
html body.playing #app .game-bisca .trick-board{margin-right:0;min-height:0}
html body.playing #app .game-bisca .trick-cards{flex-wrap:nowrap;gap:12px;min-height:0;padding:7px 3px}
html body.playing #app .game-bisca .trick-play{min-width:0;max-width:calc((100% - 36px)/4);gap:3px}
html body.playing #app .game-bisca .trick-play>.card{width:clamp(48px,8dvh,84px);max-width:100%;height:auto;aspect-ratio:208/319}
html body.playing #app .game-bisca .trick-play>small{font-size:12px;line-height:15px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body.playing #app .game-bisca .trump-strip{position:static;width:auto;flex-direction:row;gap:8px;margin:0;padding:3px 0;border:0;font-size:11px;letter-spacing:0}
html body.playing #app .game-bisca .trump-strip>span{font-size:11px}
html body.playing #app .game-bisca .trump-strip small{font-size:10px;line-height:13px}
html body.playing #app .game-bisca .trump-card>.card{width:38px;height:auto;aspect-ratio:208/319}
html body.playing #app .game-bisca .last-move{font-size:11px;line-height:14px;margin:1px 0}
@media(max-width:650px){
 html body.playing #app>:is(.game-scopa,.game-bisca){display:flex;flex-direction:column;height:100%!important;min-height:0;gap:3px;padding:0 12px 6px}
 html body.playing #app :is(.game-scopa,.game-bisca)>.table-toolbar{min-height:44px;flex:0 0 44px;padding-block:0;margin:0}
 html body.playing #app :is(.game-scopa,.game-bisca)>.compact-score{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));flex:none;padding:2px 5px;gap:0 10px;font-size:12px;line-height:16px;text-align:center;min-height:0}
 html body.playing #app :is(.game-scopa,.game-bisca)>.compact-score strong{font-size:21px;line-height:23px}
 html body.playing #app :is(.game-scopa,.game-bisca)>.compact-score small{grid-column:1/-1;font-size:10px;line-height:12px}
 html body.playing #app :is(.game-scopa,.game-bisca)>.table-profile-strip{display:none}
 html body.playing #app :is(.game-scopa,.game-bisca)>.turn-note{flex:none;min-height:24px;padding:3px 5px;margin:0;font-size:12px;line-height:16px}
 html body.playing #app :is(.game-scopa,.game-bisca)>.table-layout{display:flex;flex-direction:column;flex:1 1 0!important;min-height:0;gap:3px}
 html body.playing #app :is(.game-scopa,.game-bisca) .play-column{display:flex;flex-direction:column;flex:1 1 0;min-height:0;gap:4px}
 html body.playing #app :is(.game-scopa,.game-bisca) .side-felt{display:flex;flex-direction:column;flex:1 1 0;min-height:140px;padding:6px 8px;border-width:3px;border-radius:20px;gap:3px}
 html body.playing #app :is(.game-scopa,.game-bisca) .opponents{flex:none;gap:4px}
 html body.playing #app :is(.game-scopa,.game-bisca) .opponents .avatar{display:none}
 html body.playing #app .game-bisca .trick-board{display:flex;flex-direction:column;flex:1 1 0;min-height:0}
 html body.playing #app .game-bisca .trick-cards{flex:1 1 0;gap:8px}
 html body.playing #app .game-bisca .trick-play{max-width:calc((100% - 24px)/4)}
 html body.playing #app .game-bisca .trick-play>small{font-size:11px;line-height:14px}
 html body.playing #app :is(.game-scopa,.game-bisca) .board-heading{font-size:10px;line-height:13px;margin:2px 0}
 html body.playing #app .game-scopa .scopa-board{display:flex;flex-direction:column;flex:1 1 0;min-height:0}
 html body.playing #app .game-scopa .table-cards{flex:1 1 0;min-height:0;max-height:none;overflow:auto;gap:6px;align-content:center;padding:5px}
 html body.playing #app .game-scopa .table-cards .card{width:clamp(44px,7.2dvh,66px);height:auto;aspect-ratio:208/319}
 html body.playing #app .game-scopa .side-felt>.last-move{font-size:11px;line-height:14px;margin:2px 0}
 html body.playing #app :is(.game-scopa,.game-bisca) .hand-section{display:block;position:static;flex:none;margin:0;padding:0 4px;background:#20261f;border-radius:8px;box-shadow:none;backdrop-filter:none}
 html body.playing #app :is(.game-scopa,.game-bisca) .hand-heading{height:16px;min-height:16px;margin:0;padding:0 2px;font-size:10px;line-height:16px}
 html body.playing #app :is(.game-scopa,.game-bisca) .hand{display:flex;justify-content:center;flex:none;min-height:0;height:auto;max-height:none;overflow:visible;padding:5px;gap:10px}
 html body.playing #app :is(.game-scopa,.game-bisca) .hand>.card{width:clamp(48px,9dvh,80px);min-width:44px;height:auto;aspect-ratio:208/319;transform:none}
 html body.playing #app :is(.game-scopa,.game-bisca) .hand>.card.selected{transform:none;outline:3px solid var(--gold);outline-offset:0}
 html body.playing #app :is(.game-scopa,.game-bisca) .actions{position:static;display:block;padding:0!important;margin:0;background:transparent;border:0}
 html body.playing #app :is(.game-scopa,.game-bisca) .actions>.selection-hint{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 html body.playing #app :is(.game-scopa,.game-bisca) .actions>button{display:block;width:100%;min-height:44px;font-size:14px;padding:8px}
 html body.playing #app :is(.game-scopa,.game-bisca) .side-score{flex:none;display:flex;gap:8px;min-height:0;margin:0;padding:0 3px;border:0;background:none;box-shadow:none}
 html body.playing #app :is(.game-scopa,.game-bisca) .side-score>:is(h2,p){display:none}
 html body.playing #app :is(.game-scopa,.game-bisca) .capture-score{flex:1;min-width:0;gap:0;border:0;padding:1px 0;font-size:11px;line-height:14px}
 html body.playing #app :is(.game-scopa,.game-bisca) .capture-score span{line-height:14px}
}
@container play-viewport (max-height:620px){
 @media(max-width:650px){
  html body.playing #app :is(.game-scopa,.game-bisca) .side-felt{min-height:110px;padding:4px 6px;gap:1px}
  html body.playing #app :is(.game-scopa,.game-bisca) .hand-heading{display:none}
  html body.playing #app :is(.game-scopa,.game-bisca) .hand>.card{width:44px}
  html body.playing #app :is(.game-scopa,.game-bisca) .hand{padding:3px;gap:10px}
  html body.playing #app .game-bisca .trick-play>.card{width:44px}
  html body.playing #app .game-bisca .trump-card>.card{width:30px}
  html body.playing #app .game-bisca .trump-strip small{line-height:12px}
  html body.playing #app .game-scopa .table-cards .card{width:44px}
  /* During the two-second capture the heading names its author. Reuse the
     duplicate seat strip so the full gold outline stays visible on short phones. */
  html body.playing #app .game-scopa.capture-reading .opponents{display:none}
  html body.playing #app .game-scopa.capture-reading .table-cards{align-content:center}
  html body.playing #app .game-scopa .side-felt>.last-move{display:none}
 }
}
@media(min-width:651px){
 html body.playing:has(#app>.game-scopa,#app>.game-bisca)>.masthead{height:60px;min-height:60px;padding-block:8px}
 html body.playing #app>:is(.game-scopa,.game-bisca){height:100%!important;min-height:0;display:flex;flex-direction:column;gap:4px;padding:0 16px 8px}
 html body.playing #app :is(.game-scopa,.game-bisca)>.table-toolbar{min-height:48px;flex:none;margin:0}
 html body.playing #app :is(.game-scopa,.game-bisca)>.table-profile-strip{display:none}
 html body.playing #app :is(.game-scopa,.game-bisca)>.compact-score{padding:4px 8px}
 html body.playing #app :is(.game-scopa,.game-bisca)>.turn-note{padding:3px 6px;margin:0;min-height:24px;font-size:13px}
 html body.playing #app :is(.game-scopa,.game-bisca)>.table-layout{display:grid;grid-template-columns:minmax(0,1fr) 210px;flex:1 1 0!important;min-height:0;gap:12px}
 html body.playing #app :is(.game-scopa,.game-bisca) .play-column{display:flex;flex-direction:column;gap:4px;min-height:0}
 html body.playing #app :is(.game-scopa,.game-bisca) .side-felt{display:flex;flex-direction:column;flex:1 1 0;min-height:145px;padding:8px 12px;border-width:4px;gap:3px}
 html body.playing #app .game-bisca .trick-board{flex:1;display:flex;flex-direction:column;min-height:0}
 html body.playing #app .game-bisca .trick-cards{flex:1}
 html body.playing #app :is(.game-scopa,.game-bisca) .hand-section{flex:none;position:static;margin:0;padding:0;background:none}
 html body.playing #app :is(.game-scopa,.game-bisca) .hand-heading{font-size:11px;line-height:14px;margin:0;min-height:0}
 html body.playing #app :is(.game-scopa,.game-bisca) .hand{height:auto;min-height:0;max-height:none;padding:5px;gap:12px;justify-content:center}
 html body.playing #app :is(.game-scopa,.game-bisca) .hand>.card{width:clamp(48px,10dvh,85px);height:auto;aspect-ratio:208/319;transform:none}
 html body.playing #app :is(.game-scopa,.game-bisca) .actions{display:flex;justify-content:center;position:static;padding:0;gap:10px}
 html body.playing #app :is(.game-scopa,.game-bisca) .actions>button{min-height:44px;min-width:200px;font-size:15px;padding:8px 16px}
 html body.playing #app :is(.game-scopa,.game-bisca) .side-score{overflow:auto;min-height:0;font-size:13px;padding:12px}
 html body.playing #app .game-scopa .scopa-board{flex:1;min-height:0;display:flex;flex-direction:column}
 html body.playing #app .game-scopa .table-cards{flex:1;min-height:0;max-height:none;overflow:auto;align-content:center;padding:6px}
 html body.playing #app .game-scopa .table-cards .card{width:clamp(48px,8.5dvh,80px);height:auto;aspect-ratio:208/319}
 html body.playing #app :is(.game-scopa,.game-bisca) .board-heading{margin:2px 0;font-size:11px}
}