/* scdo-fit 1.1 (2026-10-20, responsive-20261020): phone/tablet/desktop fit for SCDO Games pages.
   Additive only: 44px tap targets, safe-area insets, floating widgets moved off the play controls.
   Rollback: /root/backups/responsive-20261020/rollback.sh */

/* ---- 1. shared top bar (scdo-standard / scdo-wheelstd): 44px row + iPhone notch inset ---- */
:root{--sstd-top:calc(44px + env(safe-area-inset-top,0px))!important}
html body #sstd-top{height:var(--sstd-top)!important;padding-top:env(safe-area-inset-top,0px)!important;padding-left:max(8px,env(safe-area-inset-left,0px))!important;padding-right:max(6px,env(safe-area-inset-right,0px))!important;gap:4px!important}
html body #sstd-top .sstd-hubl{line-height:44px!important;min-height:44px}
html body #sstd-top .sstd-tb,html body #sstd-top .sstd-tgi,html body #sstd-top .sstd-dn{height:44px!important;min-width:44px!important;box-sizing:border-box;display:inline-flex!important;align-items:center;justify-content:center;background-clip:content-box!important;border-color:transparent!important;position:relative}
/* keep the small pill look, but make the whole 44px box tappable */
html body #sstd-top .sstd-tb{background:none!important;border:0!important;padding:0 4px!important}
html body #sstd-top .sstd-tb::before,html body #sstd-top .sstd-tgi::before,html body #sstd-top .sstd-dn::before{content:"";position:absolute;left:2px;right:2px;top:11px;bottom:11px;border-radius:999px;z-index:-1}
html body #sstd-top .sstd-tb::before{background:#141c2c;border:1px solid rgba(245,158,11,.533)}
html body #sstd-top .sstd-tgi{background:none!important;padding:0 9px 0 4px!important}
html body #sstd-top .sstd-tgi::before{background:#229ed9}
html body #sstd-top .sstd-dn{background:none!important;width:44px!important}
html body #sstd-top .sstd-dn::before{background:#1b2333;left:10px;right:10px;border-radius:6px}
html body #sstd-top>*{isolation:isolate}
@media (max-width:359px){html body #sstd-top .sstd-tgi span{display:none}}
/* side insets for content in landscape on notched phones */
@media (orientation:landscape){html.sstd-std body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}}
/* skip link must stay hidden until focused */
a.skip:not(:focus):not(:focus-visible){position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;margin:-1px!important;padding:0!important}

/* ---- 2. language dropdown + music button (locale pack) ---- */
html{--lp-tap:44px!important}
#scdo-lp .lp-dd{min-height:44px;box-sizing:border-box}
#scdo-lp{bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;left:max(10px,env(safe-area-inset-left,0px))!important}
/* pages where the dropdown is the page's language control (Stake Wheel): dock it in a top strip
   instead of floating over SPIN / stake chips; the strip scrolls away with the page. */
body:has(#scdo-lp-sel){padding-top:calc(52px + env(safe-area-inset-top,0px))!important}
body:has(#scdo-lp-sel) #scdo-lp{position:absolute!important;top:calc(4px + env(safe-area-inset-top,0px))!important;bottom:auto!important;right:max(10px,env(safe-area-inset-right,0px))!important;left:auto!important;z-index:30!important}
body:has(#scdo-lp-sel) #rp-gear.rp-float{position:absolute!important;top:calc(4px + env(safe-area-inset-top,0px))!important;bottom:auto!important;left:max(10px,env(safe-area-inset-left,0px))!important;right:auto!important;min-height:44px!important;z-index:30!important;box-sizing:border-box;max-width:calc(100vw - 250px);overflow:hidden;text-overflow:ellipsis}
body:has(#scdo-lp-sel)::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(52px + env(safe-area-inset-top,0px));background:#0b1018;border-bottom:1px solid rgba(245,158,11,.25);z-index:1;pointer-events:none}
@media (max-height:540px) and (min-width:600px){
 body:has(#scdo-lp-sel){padding-top:0!important}
 body:has(#scdo-lp-sel)::before{display:none}
 body:has(#scdo-lp-sel) #scdo-lp,body:has(#scdo-lp-sel) #rp-gear.rp-float{top:0!important}
 body:has(#scdo-lp-sel) #rp-gear.rp-float{max-width:none}
 body:has(#scdo-lp-sel) #sgl-bar{margin:0 240px 0 190px!important;padding-left:8px!important;padding-right:8px!important}
}
/* Spades and similar pages keep their own dropdown; the lone music button sits bottom-left */

/* ---- 3. common 44px tap targets ---- */
#rp-gear{min-height:44px!important;box-sizing:border-box}
#sgl-bar{min-height:44px!important;box-sizing:border-box;display:flex!important;align-items:center;justify-content:center;padding-top:6px!important;padding-bottom:6px!important}

/* ---- 4. Stake Wheel ---- */
.swr-chip{min-width:46px!important;min-height:46px!important;box-sizing:border-box}
.swr-rep,.swr-fair,.swr-hist-l{min-height:44px!important;height:auto!important;box-sizing:border-box;display:inline-flex!important;align-items:center;justify-content:center}
.swr-hist-l{display:flex!important;justify-content:flex-start}
#swm-tabs [role=tab]{min-height:44px!important}
[data-testid=tg-pill],[data-testid=tg-help]{min-height:44px!important;box-sizing:border-box;align-items:center}
#root button.px-3.py-1\.5.rounded-lg{min-width:44px;min-height:44px}
#root .btn{min-height:44px;box-sizing:border-box}

#root button.ml-1.h-4.w-4{box-sizing:content-box!important;padding:14px!important;margin:-14px 0 -14px -10px!important;background-clip:content-box!important;border-color:transparent}
#swm-line button,#root button.underline{min-height:44px;display:inline-flex;align-items:center}
[data-testid=lobby-hub]{min-height:44px!important;box-sizing:border-box}

/* ---- 5. Spades ---- */
#hd:has(#langsel){position:relative;z-index:21}
#ov.ov:has(#mg){padding-top:calc(var(--sstd-top,28px) + 56px)!important;align-items:flex-start!important}
#ov.ov:has(#mg)>.box{max-height:calc(100dvh - var(--sstd-top,28px) - 68px - env(safe-area-inset-bottom,0px))!important;padding-bottom:0!important}
#ov.ov:has(#mg)>.box>.row{position:sticky;bottom:0;background:#123049;padding:8px 0 12px;margin-bottom:0;z-index:1}
@media (max-height:700px){#ov.ov:has(#mg)>.box{font-size:15px;line-height:1.4}#ov.ov:has(#mg)>.box p{margin:6px 0}}
body:has(#ov.ov:not([hidden])) #fairb,body:has(#ov.ov:not([hidden])) #scdo-lp{visibility:hidden}
#fairb{min-height:44px!important;box-sizing:border-box}
#ovb .btn{min-height:44px!important;box-sizing:border-box}
#ov.ov:has(#mg){padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))!important}
#tch.ib,#mnu.ib{min-width:44px!important;min-height:44px!important}
#langsel{min-height:44px!important}
#ov .seg button{min-height:44px!important;min-width:44px!important}
/* intro / end card fits short (landscape) screens: card scrolls, its action row stays visible */

/* ---- 6. Arrow Deck / Cabin Cats and other puzzle pages ---- */
#m-voy,#m-day,#m-daily,#m-practice,#d-easy,#d-medium,#d-hard{min-height:44px!important;min-width:44px!important;box-sizing:border-box}
button.link{min-height:44px!important;min-width:44px;box-sizing:border-box}
#tl #hn,#tl #un,#tl #ax,#tl #rs,#tl #newp,#tl #hw{min-height:44px!important;box-sizing:border-box}

:is(html[data-sstd-game="arrow-deck"],html[data-sstd-game="cabin-cats"]) main#game:has(> #bdw){--top:calc(var(--sstd-top,28px) + 8px)!important}
/* short landscape phones: board on the right, title / modes / tools on the left, all on one screen */
@media (orientation:landscape) and (max-height:540px){
 :is(html[data-sstd-game="arrow-deck"],html[data-sstd-game="cabin-cats"]) main#game:has(> #bdw){display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;column-gap:16px;row-gap:6px;max-width:980px!important;width:100%;box-sizing:border-box;min-height:calc(100dvh - var(--sstd-top,28px))!important;align-items:start;padding-left:max(8px,env(safe-area-inset-left,0px))!important;padding-right:max(8px,env(safe-area-inset-right,0px))!important}
 :is(html[data-sstd-game="arrow-deck"],html[data-sstd-game="cabin-cats"]) main#game:has(> #bdw)>#hd{grid-column:1;grid-row:1}
 :is(html[data-sstd-game="arrow-deck"],html[data-sstd-game="cabin-cats"]) main#game:has(> #bdw)>#rule{grid-column:1;grid-row:2;margin:0}
 :is(html[data-sstd-game="arrow-deck"],html[data-sstd-game="cabin-cats"]) main#game:has(> #bdw)>#tl{grid-column:1;grid-row:3;align-self:end;flex-wrap:wrap!important}
 :is(html[data-sstd-game="arrow-deck"],html[data-sstd-game="cabin-cats"]) main#game:has(> #bdw)>#bdw{grid-column:2;grid-row:1/4;align-self:center;height:auto}
 :is(html[data-sstd-game="arrow-deck"],html[data-sstd-game="cabin-cats"]) main#game:has(> #bdw) #bd{width:min(calc(100dvh - var(--sstd-top,28px) - 16px),56vw,520px)!important}
 :is(html[data-sstd-game="arrow-deck"],html[data-sstd-game="cabin-cats"]) main#game:has(> #bdw)>#tl button{flex:1 1 30%!important}
}

/* ---- 7. games lobby ---- */
a.wd-back{min-height:44px!important;display:inline-flex!important;align-items:center;box-sizing:border-box}
#gl-lang,#scdo-lang-bar button{min-height:44px!important;min-width:44px!important;box-sizing:border-box}
.wd-top:has(.wd-links){padding-right:max(0px,calc(150px - (100vw - 100%) / 2))}
.wd-links a{min-height:44px!important;min-width:44px;justify-content:center;display:inline-flex!important;align-items:center;box-sizing:border-box}

/* ---- 8. never scroll sideways ---- */
html,body{max-width:100%;overflow-x:clip}
img,video{max-width:100%}

/* ---- 9. kitten pages: close button and language toggle share the top-right corner ---- */
#ks-close{width:44px!important;height:44px!important;line-height:44px!important}
body:has(#ks-close) #lang,body:has(#ks-close) #ks-lang{right:62px!important;z-index:2147482999!important;min-height:44px!important;min-width:44px!important;box-sizing:border-box}
button.chip,#tab-boost-link,#ks-gen,#ks-fast,#ks-addr,#ks-target,#ks-fails{min-height:44px!important;box-sizing:border-box}
#tab-boost-link{margin-bottom:env(safe-area-inset-bottom,0px)}

/* ---- 10. player chat bubble (player-chat.css): 44px, docked in a top bar instead of floating over game controls ---- */
#scdo-pc .pc-bubble{width:44px!important;height:44px!important}
#scdo-pc .pc-panel{width:min(300px,calc(100vw - 20px))!important}
/* game pages with the shared top bar: bubble sits at the right end of the bar, panel opens downward */
body:has(#sstd-top) #scdo-pc{top:env(safe-area-inset-top,0px)!important;bottom:auto!important;left:auto!important;right:max(4px,env(safe-area-inset-right,0px))!important;z-index:2147483003!important}
html body:has(#scdo-pc) #sstd-top{padding-right:calc(52px + env(safe-area-inset-right,0px))!important}
body:has(#sstd-top) #scdo-pc .pc-panel,body:has(#scdo-lp-sel) #scdo-pc .pc-panel,body:has(#scdo-lang-bar) #scdo-pc .pc-panel{top:50px!important;bottom:auto!important;left:auto!important;right:0!important;height:min(380px,calc(100dvh - 70px))!important}
/* Stake Wheel: bubble joins the top strip, left of the language dropdown */
body:has(#scdo-lp-sel) #scdo-pc{position:absolute!important;top:calc(4px + env(safe-area-inset-top,0px))!important;bottom:auto!important;left:auto!important;right:calc(180px + env(safe-area-inset-right,0px))!important;z-index:30!important}
/* games lobby: bubble sits left of the fixed 華語/English bar */
body:has(#scdo-lang-bar) #scdo-pc{position:absolute!important;top:2px!important;bottom:auto!important;left:auto!important;right:186px!important}
.wd-top:has(.wd-links){padding-right:max(0px,calc(240px - (100vw - 100%) / 2))!important}

/* ---- 11. Stake Wheel ledger rows: long ids wrap instead of pushing the page sideways ---- */
#root .flex.justify-between>span{min-width:0;overflow-wrap:anywhere}
#root table{max-width:100%}
#root td,#root th{overflow-wrap:anywhere}