/* p43: desktop game dashboards fit one screen. Top bar, title and clock, the scene, then the first board row ending at the screen bottom.
   The left card's status (gate) moves into its own compact card above the middle card. Phone layout is untouched. */
#latest{display:none}
.board.rw .midc{display:contents}
@media (min-width:821px){
  body.fit{--hs:clamp(220px,calc(100vh - 576px),400px);--rowh:calc(100vh - 226px - var(--hs))}
  body.fit.fit-s{--hs:clamp(220px,calc(100vh - 576px),320px);--rowh:calc(100vh - 217px - var(--hs))}
  /* title and clock cards, same as Last Arrow p39 */
  body.fit .dash .hin .t{padding:12px 22px 13px}
  body.fit .dash .hin h1{font-size:34px;margin-top:4px}
  body.fit .dash .hin .lede{font-size:18px;line-height:1.3;margin-top:4px}
  body.fit .dash .hin .clock{padding:12px 22px}
  body.fit .dash .hin .clock .big{font-size:28px}
  body.fit .dash .hero .hst .gss{height:var(--hs)}
  body.fit .dash .board.rw{padding-top:10px;grid-template-rows:auto minmax(0,1fr) auto}
  body.fit .dash .board.rw .r-p{min-height:var(--rowh);padding:14px 16px}
  body.fit .dash .board.rw .r-m,body.fit .dash .board.rw .r-a,body.fit .dash .board.rw .r-b{padding:14px 16px;gap:10px}
  body.fit .dash .board.rw .r-p>.lz{gap:9px}
  body.fit .dash .board.rw .r-p .abar{gap:9px}
  body.fit .dash .board.rw .r-p #gate{display:none}
  /* middle column: status card then the main card */
  body.fit .board.rw .midc{display:flex;flex-direction:column;gap:12px;grid-column:2 / span 2;grid-row:1 / span 2;min-width:0}
  body.fit .board.rw .midc>.pnl{margin:0}
  body.fit .board.rw .midc>.r-m{flex:1 1 auto;justify-content:flex-start}
  body.fit #latest{display:block;padding:12px 16px}
  body.fit #latest[hidden]{display:none}
  body.fit #latest .gate{margin:0;padding:0;background:none;border-radius:0;align-items:center;gap:12px}
  body.fit #latest .gate .pad{width:36px;height:36px;border-radius:10px}
  body.fit #latest .gate .pad svg{width:19px;height:19px}
  body.fit #latest .gate>div{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:center}
  body.fit #latest .gate>div>b{grid-column:1;font-size:15px}
  body.fit #latest .gate>div>p{grid-column:1;margin-top:2px;line-height:1.35}
  body.fit #latest .gate>div>.go,body.fit #latest .gate>div>.code,body.fit #latest .gate>div>.rc{grid-column:2;grid-row:1 / span 2;margin:0;white-space:nowrap}
  body.fit #latest .gate>div>.go{height:34px;padding:0 14px;font-size:13px}
  body.fit #latest .gate>div>.fineL{grid-column:1 / -1;margin-top:3px}
  /* pending: the step dots sit tight to the button; two actions sit side by side */
  body.fit-s .board.rw .r-p #steps .steps2{margin-top:0}
  body.fit-s .board.rw .r-p #playBtn .btn.wait{margin:0}
  body.fit-s .board.rw .r-p .nx{padding:10px 14px}
  body.fit-s .board.rw .r-p .stp{height:40px}
  body.fit-s .dash .board.rw .r-p>.lz{gap:7px}
  body.fit-s .dash .board.rw .r-p .abar{gap:7px}
  body.fit-s .board.rw .r-p .steps2 span{padding-top:8px;font-size:10.5px}
  body.fit-s .board.rw .midc{gap:10px}
  body.fit-s .board.rw .r-p #playBtn.act:has(.btn+.btn){flex-direction:row}
  body.fit-s .board.rw .r-p #playBtn.act:has(.btn+.btn)>.btn{flex:1 1 0;min-width:0}
  /* the pot well: short, number prominent, note on the right; the split boxes take the spare height */
  body.fit .board.rw .r-m>.pot{flex:1 1 auto;min-height:56px;max-height:132px;padding:10px 16px;align-items:center}
  body.fit .board.rw .r-m>.loot{flex:1 1 auto}
  body.fit .board.rw .r-m>.loot .lt{display:flex;flex-direction:column;justify-content:center;padding:9px 12px}
  /* tighter rows on the right */
  body.fit .board.rw .facts>div{margin-top:0!important}
  body.fit .board.rw .facts .lrow{padding:5px 4px;margin-top:0}
  body.fit .board.rw .r-a .stats{margin-top:0}
  body.fit .board.rw .r-a .stats div{padding:8px 9px}
  body.fit .board.rw .r-a .stats+.fineL{margin-top:6px}
  body.fit .board.rw .r-b .tr{padding:6px 8px}
  body.fit .board.rw .r-b #top3{margin-top:0!important}
  /* Sheriff's Seat left card */
  body.fit-s .dash .board.rw .r-p .btn{height:46px}
  body.fit-s .dash .board.rw .r-p #rows2{display:flex;align-items:center;justify-content:space-between;gap:10px}
  body.fit-s .dash .board.rw .r-p #rows2>*{margin:0}
  body.fit-s .dash .board.rw .r-p .lz .slide{margin-top:0}
  body.fit-s details.addmsg{margin-top:0}
  body.fit-s details.addmsg summary{padding:10px 0}
  body.fit-s details.addmsg .msg{padding:8px 12px}
  body.fit-s .board.rw .r-m .holder{margin-top:0}
  body.fit-s .board.rw .r-m .banner{margin-top:8px;padding:9px 14px;font-size:18px}
  body.fit-s .board.rw .midc>.r-m{padding:12px 16px;gap:7px}
  body.fit-s #latest{padding:9px 16px}
  body.fit-s #latest .gate>div>p{line-height:1.3}
  body.fit-s .board.rw .r-m .holder .av2{width:38px;height:38px}
  body.fit-s .board.rw .r-m .holder small{margin-top:1px}
  body.fit-s .board.rw .r-m .banner{margin-top:6px;padding:6px 12px;font-size:16px}
  body.fit-s .board.rw .r-m>.pot{min-height:50px;padding:8px 16px}
  body.fit-s .board.rw .r-m>.loot .lt{padding:7px 12px}
  body.fit-s .board.rw .r-m>.loot .lt b{margin-top:4px}
  body.fit-s .board.rw .r-m>.loot .lt span{margin-top:1px}
  /* throne and its banner sit a little lower, so the finial has clear space at every height */
  body.fit-s .hero .hst .gss-sher .box{transform-origin:50% 100%;transform:translateX(-50%) scale(.88)}
}
@media (min-width:821px) and (max-width:1399px){
  body.fit #latest .gate .pad{display:none}
}