/* ═══ Mobile layout layer (touch phones only; desktop untouched) ═══ */
/* one screen at a time: results always win over the lobby */
body.scr-over .select{display:none !important}
.over:not(.show){display:none !important}
.sel-toolbar .tb-l{white-space:nowrap}

@media (pointer:coarse) and (max-width:932px){
body.scr-over .gear-fab,body.scr-over .settings-pop{display:none !important}
/* compact top nav: icon + label tiles, 48px tall, never wraps */
.sel-toolbar{top:calc(env(safe-area-inset-top,0px) + 8px) !important;right:calc(env(safe-area-inset-right,0px) + 64px) !important;gap:4px !important;flex-wrap:nowrap}
.sel-toolbar .shop-btn3d{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:52px;height:48px;min-height:48px !important;padding:4px 2px !important;border-radius:14px !important;font-size:9px !important;letter-spacing:.05em !important;line-height:1}
.sel-toolbar .tb-i{font-size:15px;line-height:1}
.sel-toolbar .tb-l{font-size:9px;line-height:1}
.gear-fab{top:calc(env(safe-area-inset-top,0px) + 8px) !important;right:calc(env(safe-area-inset-right,0px) + 8px) !important;width:48px !important;height:48px !important}
.settings-pop{top:calc(env(safe-area-inset-top,0px) + 64px) !important}
/* crisp title: thinner stroke at phone sizes */
.sel-title{-webkit-text-stroke:1.25px var(--ink,#1b1c22) !important;text-shadow:0 3px 0 rgba(27,28,34,.35) !important;line-height:1.05;text-wrap:balance;overflow-wrap:normal}
/* 44px hit areas without inflating the visuals */
.lore-btn,.arrow,.sel-profile{position:relative}
.lore-btn::after,.arrow::after,.sel-profile::after{content:'';position:absolute;left:0;right:0;top:50%;height:44px;min-width:44px;transform:translateY(-50%)}
.play-btn,.maps-btn{min-height:48px !important}
/* results: scrollable, centred, safe-area aware */
.over{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.over-btns .btn{min-height:48px}
.eg-retry-row .btn#retry{white-space:nowrap}
}

/* ── phone portrait ── */
@media (pointer:coarse) and (orientation:portrait) and (max-width:640px){
.select{justify-content:flex-start !important;gap:10px !important;padding:calc(env(safe-area-inset-top,0px) + 68px) max(14px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 12px) max(14px,env(safe-area-inset-left,0px)) !important}
.sel-top{padding-top:0 !important;margin-top:0 !important;flex:none}
.sel-title{font-size:26px !important}
.sel-bottom{flex:none}
.over{flex-direction:column;align-items:center;gap:12px;overflow-y:auto;padding:calc(env(safe-area-inset-top,0px) + 16px) max(14px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 20px) max(14px,env(safe-area-inset-left,0px)) !important}
.over .ko{font-size:12px}
.scorecard{width:100%;max-width:420px;flex:none}
.sc-left{width:36%}
.sc-right{padding:14px 14px 12px;min-width:0}
.sc-rank{font-size:10px;padding:4px 9px}
.sc-logo{top:14px;right:14px;height:10px}
.sc-player{gap:8px;margin-top:8px}
.sc-player img{width:30px;height:30px}
.sc-player-name{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sc-player-x{font-size:10px}
.sc-name{font-size:22px;margin-top:8px}
.sc-title{font-size:11px}
.sc-stats{gap:6px;margin-top:10px}
.sc-stat{padding:7px 9px;min-width:0}
.sc-stat .k{font-size:8px;letter-spacing:.1em}
.sc-stat .v{font-size:17px}
.sc-foot{padding-top:10px;font-size:9px;gap:6px}
.over-btns{width:100%;max-width:420px;margin-top:0;gap:8px;display:grid;grid-template-columns:1fr 1fr}
.over-btns .btn{width:100%;padding:12px 10px;font-size:12.5px;letter-spacing:.05em;white-space:nowrap}
.over-btns .btn.follow,#claimRow .btn{grid-column:1 / -1}
#claimRow{grid-template-columns:1fr}
.eg-retry-row{grid-template-columns:1.6fr 1fr}
.eg-retry-row .btn#retry{font-size:15px;padding:14px 10px}
.eg-hook{margin-top:0;font-size:13px}
}

/* ── phone landscape (incl. Safari with bars) ── */
@media (pointer:coarse) and (orientation:landscape) and (max-height:520px){
.select{justify-content:flex-start !important;gap:6px !important;height:100% !important;padding-top:calc(env(safe-area-inset-top,0px) + 8px) !important;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 10px) !important}
.sel-top{max-width:min(46vw,330px)}
.sel-title{font-size:18px !important;-webkit-text-stroke:1px var(--ink,#1b1c22) !important;text-shadow:0 2px 0 rgba(27,28,34,.35) !important}
.sel-bottom{zoom:1 !important;margin-top:auto !important}
.arrow{width:40px !important;height:40px !important}
.play-btn{padding:10px 0 !important}
.over.show{display:grid !important}
.over.show{grid-template-rows:1fr auto auto auto auto 1fr !important;align-content:stretch !important}
.over .scorecard{grid-row:1 / 7 !important}
#claimRow{grid-row:2 !important}
.over-btns:not(#claimRow):not(.eg-retry-row){grid-row:3 !important}
.over .eg-hook{grid-row:4 !important}
.over .eg-retry-row{grid-row:5 !important}
.over{grid-template-columns:minmax(0,auto) min(260px,36vw) !important;align-content:safe center !important;overflow-y:auto !important;overflow-x:hidden;padding:calc(env(safe-area-inset-top,0px) + 10px) max(14px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 10px) max(14px,env(safe-area-inset-left,0px)) !important}
.scorecard{height:min(calc(100dvh - 24px),320px) !important;max-width:calc(100vw - min(260px,36vw) - 16px - max(14px,env(safe-area-inset-left,0px)) - max(14px,env(safe-area-inset-right,0px))) !important}
.over-btns{grid-column:2 !important}
.over-btns .btn{min-height:44px !important;padding:8px 12px !important}
.eg-hook{grid-column:2 !important}
.eg-retry-row{flex-direction:row !important;gap:7px !important}
.eg-retry-row .btn#retry{flex:1.5 !important;font-size:13px !important;padding:8px 8px !important}
.eg-retry-row .btn.eg-menu{flex:1 !important}
/* connected X player row: keep long handles inside the card (iPhone SE/8 landscape) */
.sc-right{min-width:0}
.sc-player{gap:8px;margin-top:6px;min-width:0}
.sc-player img{width:30px;height:30px}
.sc-player-name{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sc-player-x{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:0 1 auto}
}

/* ═══ Round 2: HUD gear/stats/NEXT pill · How-to spacing ═══ */
/* GOT IT never stretches (it inherited .play-btn flex:1 → 160px blob on desktop) */
#howto .howto-go,#about .howto-go{flex:none !important}
#howto .howto-go{padding-top:16px;padding-bottom:16px}
/* in-run HUD, desktop: the gear (right:4%, 44px) owns the corner; the stats
   bar ends 14px before it instead of running underneath */
.hud .stats{margin-right:calc(4vw + 36px)}
@media (pointer:fine) and (max-width:1320px){
  /* narrower desktops: NEXT pill sits under the stats bar, right-aligned */
  .eg-rival{left:auto;transform:none;right:calc(4vw + 58px);top:100px}
}

@media (pointer:coarse) and (orientation:landscape) and (max-height:520px){
/* ── in-run HUD: gear 48px in its own corner, 12px clear of the stats bar ── */
.hud{padding-top:calc(env(safe-area-inset-top,0px) + 6px) !important;padding-right:calc(env(safe-area-inset-right,0px) + 8px) !important}
.gear-fab{top:calc(env(safe-area-inset-top,0px) + 6px) !important;right:calc(env(safe-area-inset-right,0px) + 8px) !important;width:48px !important;height:48px !important}
.hud .stats{margin-right:60px !important;flex:none}
.hp-wrap{width:clamp(150px,25vw,210px) !important;flex:none}
.hud .chip{min-width:0 !important;padding:3px 7px !important}
/* NEXT / rank pill: its own row under the stats bar, right-aligned with it */
.eg-rival{left:auto !important;transform:none !important;right:calc(env(safe-area-inset-right,0px) + 68px) !important;top:calc(env(safe-area-inset-top,0px) + 60px) !important}
/* ── How to play: cards sized to the visible height, GOT IT below them ── */
#howto{justify-content:flex-start !important;gap:0 !important;overflow-y:auto !important;
  padding:calc(env(safe-area-inset-top,0px) + 10px) calc(env(safe-area-inset-right,0px) + 64px) calc(env(safe-area-inset-bottom,0px) + 14px) calc(env(safe-area-inset-left,0px) + 64px) !important}
#howto > div:not(.howto-cards){margin-top:auto;flex:none}   /* auto margins = centred, but never clipped when it scrolls */
#howto .howto-title{margin:1px 0 8px}
#howto .howto-cards{zoom:1 !important;gap:10px !important;flex:none}
#howto .ht-imgcard,#howto .howto-cards .fc-card{
  width:min(clamp(84px,calc((100dvh - 124px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * 0.41),190px),
            calc((100vw - 158px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)) / 4)) !important;
  border-width:3px !important;border-radius:14px !important;box-shadow:0 5px 0 rgba(27,28,34,.16) !important}
#howto .howto-go{position:static !important;margin:12px auto auto !important;width:auto !important;height:44px;min-height:44px !important;
  padding:0 38px !important;font-size:13px !important;line-height:1}
}
/* very short landscape (Safari toolbars eating 60-90px): GOT IT moves beside
   the cards so the cards keep a readable size and nothing overlaps or scrolls */
@media (pointer:coarse) and (orientation:landscape) and (max-height:340px){
#howto{flex-direction:row !important;flex-wrap:wrap !important;justify-content:center !important;align-content:center !important;align-items:center !important}
#howto > div:not(.howto-cards){width:100%;margin-top:0}
#howto .ht-imgcard,#howto .howto-cards .fc-card{
  width:min(clamp(72px,calc((100dvh - 70px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * 0.41),190px),
            calc((100vw - 330px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)) / 4)) !important}
#howto .howto-go{margin:0 0 0 18px !important;align-self:center}
}