.recent-purchase{position:relative;display:inline-flex;min-width:0;align-self:start;scroll-snap-align:start}
.recent-purchase-label{position:absolute;z-index:6;top:-3px;right:-2px;border-radius:4px;background:#cbe6ec;color:#17353f;padding:1px 4px;font:bold 11px/15px Arial,sans-serif;pointer-events:none}
.recent-purchase>.card,.recent-purchase>.cacheta-wild-wrap>.card{outline:2px solid #a9d8e4;outline-offset:1px}
.game-cacheta .cacheta-hand>.recent-purchase{width:100%;max-width:68px;min-width:44px}
.game-cacheta .recent-purchase>.cacheta-wild-wrap{width:100%;min-width:0}
html body #app .game-maumau .maumau-hand>.recent-purchase{flex:0 0 68px;width:68px;height:auto;aspect-ratio:5/7}
html body #app .game-maumau .recent-purchase>.card{width:100%;min-width:0;height:100%;aspect-ratio:5/7}
html body #app .game-maumau .opponents .seat{font-size:12px;line-height:15px}
html body #app .game-maumau .opponents .seat small{font-size:10px;line-height:12px}
html body #app .game-maumau :is(.maumau-selection,.maumau-last){font-size:12px;line-height:16px;min-height:16px}
html body #app .game-maumau .maumau-hint{font-size:11px;line-height:14px;min-height:14px}
/* These are alternatives in the same turn, not extra steps. A legal nine-card
   knock remains available before buying, as well as after a purchase. */
.game-cacheta .cacheta-actions[data-phase="draw"]>#discard,
.game-cacheta .cacheta-actions[data-phase="draw"][data-knock-ready="false"]>#cacheta-knock,
.game-cacheta .cacheta-actions[data-phase="play"]>:is(#draw,#cacheta-take-discard){display:none}
.game-cacheta .cacheta-actions[data-phase="play"]>#discard{background:var(--gold);color:#20291e;font-weight:bold}
.game-cacheta .cacheta-actions[data-phase="draw"]>#draw{background:var(--gold);color:#20291e;font-weight:bold}
.game-cacheta .cacheta-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
.game-cacheta .cacheta-actions[data-phase="draw"][data-knock-ready="true"]>#cacheta-knock{grid-column:1/-1}
.game-cacheta .cacheta-actions[data-knock-ready="true"]>#cacheta-knock{background:var(--gold);color:#20291e;font-weight:bold}
html body #app .game-pife #pife-draw{background:var(--gold);color:#20291e;font-weight:bold}
@media(max-width:650px){
 html body.playing #app>.game-cacheta{height:100%!important;min-height:0;display:flex;flex-direction:column;gap:3px;padding:0 12px 6px}
 html body.playing #app .game-cacheta>.table-toolbar{min-height:44px;flex:0 0 44px;padding-block:0;margin:0;gap:6px}
 html body.playing #app .game-cacheta .table-toolbar>div:first-child{display:block}
 html body.playing #app .game-cacheta>.cacheta-score{flex:none;gap:4px}
 html body.playing #app .game-cacheta .cacheta-score-player{padding:4px 5px;gap:0}
 html body.playing #app .game-cacheta .cacheta-score-player>span:first-child{font-size:12px;line-height:15px}
 html body.playing #app .game-cacheta .cacheta-score-player strong{font-size:22px;line-height:24px}
 html body.playing #app .game-cacheta>.cacheta-round-meta{font-size:10px;line-height:12px;margin:0}
 html body.playing #app .game-cacheta>.turn-note{flex:none;min-height:24px;padding:3px 5px;margin:0;font-size:12px;line-height:16px}
 html body.playing #app .game-cacheta>.cacheta-play-area{display:flex;flex-direction:column;flex:1 1 0;min-height:0;width:100%;gap:4px;margin:0}
 html body.playing #app .game-cacheta .cacheta-felt{flex:1 1 0;min-height:140px;display:flex;flex-direction:column;padding:5px 6px}
 html body.playing #app .game-cacheta .cacheta-board{flex:1 1 0;min-height:0;align-items:center;gap:16px;padding:3px 0}
 html body.playing #app .game-cacheta .cacheta-opponents .seat{font-size:12px;line-height:15px}
 html body.playing #app .game-cacheta .cacheta-opponents .seat small{font-size:10px;line-height:12px}
 html body.playing #app .game-cacheta .cacheta-hand-section{flex:none;min-height:0;margin:0;padding:3px 5px}
 html body.playing #app .game-cacheta .hand-heading{height:44px;min-height:44px;font-size:11px;line-height:14px;margin:0;align-items:center}
 html body.playing #app .game-cacheta .cacheta-hand{gap:5px;padding:4px 2px;min-height:0}
 html body.playing #app .game-cacheta .cacheta-hand>:is(.card,.cacheta-wild-wrap,.recent-purchase){width:min(100%,clamp(44px,calc((var(--safe-height) - 360px)/4),68px));min-width:44px;max-width:100%}
 html body.playing #app .game-cacheta .cacheta-selection{font-size:12px;line-height:16px;min-height:16px;margin:2px 0}
 html body.playing #app .game-cacheta .cacheta-actions{padding:0;gap:5px;grid-template-columns:repeat(2,minmax(0,1fr))}
 html body.playing #app .game-cacheta .cacheta-actions>button{height:44px;min-height:44px;font-size:14px;padding:6px}
 html body.playing #app .game-cacheta .cacheta-action-hint{font-size:11px;line-height:14px;min-height:0;margin:3px 0 0}
 html body.playing #app .game-cacheta>.cacheta-rules{display:none}
 html body.playing #app .game-cacheta:is([data-phase="draw"],[data-phase="play"]):not(:has(.cacheta-actions[data-knock-ready="true"])) .cacheta-action-hint{display:none}
 html body #app .game-maumau .maumau-hand>.recent-purchase{flex-basis:60px;width:60px}
 html body.playing #app>.game-maumau{height:100%!important;min-height:0}
 html body.playing #app .game-maumau .maumau-play{flex-shrink:1!important}
 html body #app .game-maumau .maumau-selection{font-size:12px;line-height:16px;min-height:16px}
}
@container play-viewport (max-height:620px){
 @media(max-width:650px){
  /* The score already names all four people. Keep the consequence of the
     incoming-card choice instead of a second copy of those names. */
  html body.playing #app .game-pife .pife-opponents{display:none}
  html body.playing #app .game-pife .pife-felt{min-height:64px!important}
  html body.playing #app .game-pife #pife-action-hint:not([hidden]){display:block!important;min-height:0;margin:2px 0 4px;font-size:11px;line-height:14px}
  html body.playing #app .game-cacheta>.cacheta-round-meta{display:none}
  html body.playing #app .game-cacheta .cacheta-score-player{flex-direction:row;align-items:center;gap:3px;padding:3px}
  html body.playing #app .game-cacheta .cacheta-score-player strong{font-size:18px;line-height:22px}
  html body.playing #app .game-cacheta .cacheta-score-player strong small{font-size:9px}
  html body.playing #app .game-cacheta .cacheta-score-player>span:first-child{font-size:11px;line-height:14px}
  html body.playing #app .game-cacheta .cacheta-felt{min-height:68px;padding:3px 5px}
  /* Names and lives are already present in the score directly above. */
  html body.playing #app .game-cacheta .cacheta-opponents{display:none}
  html body.playing #app .game-cacheta .cacheta-actions[data-phase="draw"][data-knock-ready="true"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  html body.playing #app .game-cacheta .cacheta-actions[data-phase="draw"][data-knock-ready="true"]>#cacheta-knock{grid-column:auto}
  html body.playing #app .game-cacheta .cacheta-pile>.card{width:34px}
  html body.playing #app .game-cacheta .cacheta-board{padding:1px 0;gap:12px}
  html body.playing #app .game-cacheta .cacheta-wild-info{gap:7px;padding-left:10px}
  html body.playing #app .game-cacheta .cacheta-selection{font-size:11px;line-height:14px;min-height:14px}
  html body.playing #app .game-cacheta .cacheta-hand{gap:3px;padding:3px 2px}
 }
}
@media(min-width:651px){
 html body.playing:has(#app>.game-cacheta)>.masthead{height:60px;min-height:60px;padding-block:8px}
 html body.playing #app>.game-cacheta{height:100%!important;min-height:0;display:flex;flex-direction:column;gap:4px;padding:0 16px 8px}
 html body.playing #app .game-cacheta>.table-toolbar{margin:0;min-height:48px;flex:none}
 html body.playing #app .game-cacheta>.cacheta-round-meta{margin:0;line-height:13px}
 html body.playing #app .game-cacheta>.turn-note{margin:0;padding:3px 6px;min-height:24px;font-size:13px}
 html body.playing #app .game-cacheta>.cacheta-play-area{flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:4px;width:100%;max-width:none}
 html body.playing #app .game-cacheta .cacheta-felt{flex:1 1 0;min-height:150px;display:flex;flex-direction:column;padding:6px 14px}
 html body.playing #app .game-cacheta .cacheta-board{flex:1;min-height:0;align-items:center;padding:3px 0}
 html body.playing #app .game-cacheta .cacheta-hand-section{flex:none;margin:0;padding:3px 8px}
 html body.playing #app .game-cacheta .cacheta-hand{padding-block:4px}
 html body.playing #app .game-cacheta .hand-heading{margin:0;min-height:44px}
 html body.playing #app .game-cacheta .cacheta-selection{margin:2px 0;line-height:16px}
 html body.playing #app .game-cacheta .cacheta-actions{max-width:620px;margin:auto;padding:0;grid-template-columns:repeat(2,minmax(0,1fr))}
 html body.playing #app .game-cacheta .cacheta-actions>button{min-height:44px;height:44px;padding:6px 10px}
 html body.playing #app .game-cacheta .cacheta-action-hint{margin:2px 0;line-height:15px;min-height:0}
 html body.playing #app .game-cacheta:not(:has(.cacheta-actions[data-knock-ready="true"])) .cacheta-action-hint{display:none}
 html body.playing #app .game-cacheta>.cacheta-rules{display:none}
}