/* Loaded after table.css so the complete-card layout wins at every phone breakpoint. */
.my-badges{display:none}
.my-badges-label{font-size:10px;font-weight:700;margin-right:6px}
@media(orientation:portrait), (min-width:951px), (min-width:701px) and (min-height:501px){
 .race-page .my-badges{display:flex;align-content:center;align-items:center;justify-content:flex-start;gap:4px;margin:0;min-width:0}
 .race-page .my-badges .mark{width:28px;height:28px;max-width:calc(50% - 4px)}
}
@media(max-width:700px) and (orientation:portrait){
 body:has(.race-page) .masthead{height:42px;min-height:42px}
 .race-page{grid-template-rows:30px 38px 62px 100px minmax(0,1fr);gap:4px;padding-top:3px;padding-bottom:max(6px,env(safe-area-inset-bottom))}
 .race-page .hand-section{grid-template-rows:32px minmax(0,1fr) 77px;gap:4px}
 .race-page .hand{padding:4px;gap:6px;align-items:stretch;overflow:visible}
 .race-page .hand .card{min-width:0;min-height:0;max-height:180px;align-self:center;height:100%;padding:4px;grid-template-rows:minmax(0,1fr) 24px}
 .race-page .hand .card .card-type{display:none}.race-page .hand .card .card-name{height:24px;min-height:24px;font-size:10px;line-height:1.1;overflow-wrap:anywhere}
 .race-page .hand .distance-badge{font-size:21px}.race-page .table-middle{padding:6px}.race-page .pile-card{height:56px;width:38px}.race-page .draw-stack,.race-page .discard-stack{gap:7px}.race-page .played-stack .pile-card{height:44px}.race-page .my-road{padding:3px 6px}.race-page .road-heading{margin-bottom:4px}
 .race-page .move-panel{padding:1px 6px 3px;grid-template-rows:24px 44px;gap:3px}
}
@media(max-width:700px) and (orientation:portrait) and (max-height:550px){
 body:has(.race-page) .masthead{height:36px;min-height:36px}.race-page{grid-template-rows:28px 34px 45px 80px minmax(0,1fr);gap:3px}
 .race-page .player-name{font-size:8px;white-space:nowrap;text-overflow:ellipsis}.race-page .score{font-size:16px}.race-page .status{font-size:7px;line-height:1}.race-page .player-heading{line-height:1}
 .race-page .pile-card{height:43px;width:33px}.race-page .played-stack .pile-card{height:29px}.race-page .road-heading{min-height:16px;margin-bottom:2px}.race-page .road-heading .text-button{min-height:16px}.race-page .table-middle{padding:4px}.race-page .played-stack{gap:5px}
}
@media(max-width:950px) and (orientation:landscape) and (max-height:500px){
 .race-page .hand-section{grid-template-rows:32px minmax(0,1fr) 78px}.race-page .hand{padding:4px;overflow:visible}.race-page .hand .card{min-width:0;grid-template-rows:minmax(0,1fr) 24px;max-height:170px;align-self:center}.race-page .hand .card .card-name{height:24px;min-height:24px;font-size:10px;line-height:1.1;overflow-wrap:anywhere}
}
/* Pack the hand at its natural card height instead of centering cards in tall fractional rows. */
@media(max-width:700px), (max-width:950px) and (orientation:landscape) and (max-height:500px){
 .race-page .hand-section{display:flex;flex-direction:column;justify-content:flex-start;gap:4px}
 .race-page .hand-heading{flex:0 0 30px;min-height:30px;margin:0}
 .race-page .hand{flex:0 0 auto;align-content:start;align-items:stretch;margin:0;padding:4px;gap:6px}
 .race-page .hand .card{max-height:none;align-self:stretch}
 .race-page .move-panel{flex:0 0 77px;margin:0;min-height:77px;max-height:77px}
}
/* Match played cards to the draw/discard cards at every viewport. */
.race-page{--pile-width:54px;--pile-height:74px}
.race-page .pile-card,.race-page .played-stack .pile-card{width:var(--pile-width);max-width:none;height:var(--pile-height);flex-shrink:0}
@media(min-width:701px) and (min-height:501px), (min-width:951px){
 .race-page{display:grid;grid-template-columns:minmax(180px,1fr) 170px;grid-template-rows:auto auto auto minmax(0,1fr)}
 .race-page .race-top{grid-column:1/-1;grid-row:1}
 .race-page .players{grid-column:1/-1;grid-row:2}
 .race-page .turn-banner{grid-column:1;grid-row:3;min-width:0;gap:8px}
 .race-page .turn-banner>div:first-child{min-width:0}.race-page .turn-banner strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .race-page .road-table{display:contents}
 .race-page .table-middle{grid-column:2;grid-row:3;margin:0;gap:12px}
 .race-page .my-road{grid-column:3;grid-row:3;min-width:0}
 .race-page .hand-section{grid-column:1/-1;grid-row:4}
}
@media(max-width:700px) and (orientation:portrait){
 .race-page{--pile-width:43px;--pile-height:62px;grid-template-columns:minmax(0,1fr) 124px;grid-template-rows:30px 62px 88px minmax(0,1fr)}
 .race-page .race-top{grid-column:1/-1;grid-row:1}.race-page .players{grid-column:1/-1;grid-row:2}
 .race-page .turn-banner{grid-column:1;grid-row:3;gap:5px}.race-page .turn-banner>div:first-child{min-width:0}.race-page .turn-banner strong{max-width:100%;font-size:14px}
 .race-page .road-table{display:contents}.race-page .table-middle{grid-column:2;grid-row:3;margin:0}
 .race-page .my-road{grid-column:1/-1;grid-row:4}.race-page .played-stacks{justify-content:space-around}.race-page .played-stack{flex:0 1 auto}
 .race-page .hand-section{grid-column:1/-1;grid-row:4}
}
@media(max-width:950px) and (orientation:landscape) and (max-height:500px){
 .race-page{--pile-width:33px;--pile-height:48px}
 .race-page .road-table{grid-template-columns:1fr;align-content:start}
 .race-page .table-middle{justify-content:center;gap:28px}
 .race-page .played-stacks{justify-content:space-around}
}

/* Keep four score seats and give your badges their own full-width row. */
@media(min-width:701px) and (min-height:501px), (min-width:951px){
 .race-page{grid-template-rows:auto auto 36px auto minmax(0,1fr)}
 .race-page>.my-badges{grid-column:1/-1;grid-row:3}
 .race-page .turn-banner,.race-page .table-middle{grid-row:4}
 .race-page .hand-section{grid-row:5}
}
@media(max-width:700px) and (orientation:portrait){
 .race-page{grid-template-rows:30px 112px 32px 88px minmax(0,1fr)}
 .race-page>.my-badges{grid-column:1/-1;grid-row:3}
 .race-page .turn-banner,.race-page .table-middle{grid-row:4}
 .race-page .hand-section{grid-row:5}
 .race-page .player{justify-content:flex-start;gap:2px}
 .race-page .player-heading{flex:0 0 24px}
 .race-page .player .player-marks{display:flex;position:static;flex-wrap:wrap;gap:2px;margin-top:auto;max-width:none;flex-shrink:0}
 .race-page .player .player-marks:empty{display:none}
 .race-page .player .player-marks .mark{width:18px;height:18px;flex-shrink:0}
}