/* swl.css 2026-10-18 v2 (tip circle docked in SPIN row on phones): SCDO wheel layout fit (stakewheel + /play/). Wheel, stake tier and SPIN visible together; secondary panels below.
   Pure presentation: no game logic, fairness, tip flow or AU block touched. Rollback: /root/backups/tg-button-cat-20261018/rollback.sh
   Elements are tagged with data-swl="..." by swl.js (React never touches data-swl). */
#scdo-fe{display:none!important}                         /* top wallet strip -> replaced by the wallet card under the wheel */
html.swl body{padding-top:0!important}
html.swl #sgl-bar{padding:3px 10px!important;font-size:12px!important;line-height:16px!important}
html.swl #sw-maint-banner{position:sticky;top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px!important;line-height:16px!important;padding:5px 34px 5px 10px!important;cursor:pointer}
html.swl #sw-maint-banner.swl-open{white-space:normal}
html.swl .swl-mx{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:26px;height:22px;border:0;border-radius:6px;background:rgba(0,0,0,.18);color:#000;font:900 13px/22px system-ui,sans-serif;cursor:pointer;padding:0}
html.swl.swl-maint-x #sw-maint-banner{display:none!important}
/* header */
html.swl [data-swl=header]{padding-top:8px!important;padding-bottom:8px!important;gap:8px;flex-wrap:nowrap}
html.swl [data-swl=header]>div:first-child{min-width:0;flex:1 1 auto}
/* section becomes an ordered flex column */
html.swl [data-swl=sec]{display:flex!important;flex-direction:column;gap:10px;min-width:0;max-width:100%}
html.swl [data-swl=main]>*{min-width:0}
html.swl [data-swl=sec]>*{margin-top:0!important;margin-bottom:0!important}
html.swl [data-swl=stage]{display:contents!important}
html.swl [data-swl=mode]{order:1}
html.swl [data-swl=bal]{order:2}
html.swl [data-swl=au]{order:2}
html.swl [data-swl=tiers]{order:3}
html.swl [data-swl=wheelcol]{order:4;width:100%!important;display:flex;justify-content:center}
html.swl [data-swl=actions]{order:5}
html.swl #swl-cards{order:6}
html.swl [data-swl=terms]{order:7}
html.swl [data-swl=note]{order:8}
html.swl [data-swl=withdraw]{order:9}
html.swl [data-swl=catcol]{order:10;width:100%!important}
html.swl [data-swl=other]{order:11}
html.swl [data-swl=wheel]{width:var(--swl-w,min(100%,80vw,45vh))!important;max-width:100%!important;height:auto;margin:0 auto}
/* compact notices + Telegram help */
html.swl [data-swl=bal]{padding:6px 10px!important;font-size:12px!important;line-height:1.35!important;cursor:pointer}
html.swl [data-swl=bal]>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.swl [data-swl=bal].swl-open>span{white-space:normal}
html.swl [data-swl=bal]>div{margin-top:2px!important}
html.swl [data-swl=note]{padding:8px 10px!important;font-size:12px!important;line-height:1.35!important}
html.swl [data-swl=au]{padding:7px 10px!important;font-size:12px!important;line-height:1.35!important}
html.swl [data-swl=tiers] button,html.swl [data-swl=mode] button{padding-top:4px!important;padding-bottom:4px!important}
/* cat column: compact (cat + bubble + Ask in one block, tip box next to it when there is room) */
html.swl [data-swl=catcol]{display:grid!important;grid-template-columns:1fr;gap:8px;align-items:start}
html.swl [data-swl=catcol]>*{margin-top:0!important}
@media (min-width:640px){html.swl [data-swl=catcol]{grid-template-columns:minmax(200px,240px) 1fr}
  html.swl [data-swl=catcol]>[data-testid=tip-captain]{grid-column:2;grid-row:1/span 3}}
/* CTA cards */
#swl-cards{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:560px){#swl-cards{grid-template-columns:1fr 1fr}}
.swl-card{position:relative;display:flex;flex-direction:column;gap:6px;border-radius:16px;padding:12px 12px 12px;background:#0d1220;border:3px solid var(--ac);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 22px color-mix(in srgb,var(--ac) 35%,transparent);color:#e2e8f0;font:500 13px/1.4 system-ui,-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;text-align:left}
.swl-card .swl-h{display:flex;align-items:center;gap:10px;font-weight:900;font-size:16px;line-height:1.2;color:#fff}
.swl-card .swl-ic{background:#1b2333;flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:24px;background:color-mix(in srgb,var(--ac) 22%,#0d1220);border:2px solid var(--ac)}
.swl-card p{margin:0;color:#cbd5e1}
.swl-card .swl-fine{font-size:11px;color:#94a3b8}
.swl-card .swl-fine a{color:#7dd3fc;text-decoration:underline}
.swl-card .swl-btn{display:block;margin-top:auto;text-align:center;padding:12px 14px;border-radius:12px;background:var(--ac);color:#0b0f19!important;font-weight:900;font-size:16px;text-decoration:none;box-shadow:0 4px 0 color-mix(in srgb,var(--ac) 55%,#000)}
.swl-card .swl-btn:active{transform:translateY(2px);box-shadow:0 2px 0 color-mix(in srgb,var(--ac) 55%,#000)}
.swl-member{--ac:#f59e0b}
.swl-wallet{--ac:#3DDC84}
/* desktop: cards on top of the right column, wheel block top-aligned */
@media (min-width:1024px){
  html.swl [data-swl=aside]>#swl-cards{grid-template-columns:1fr}
  html.swl [data-swl=aside]>#swl-cards{margin-top:0!important;margin-bottom:16px}
  html.swl [data-swl=main]{align-items:start}
  html.swl #ct-btn,html.swl #ct-pan{left:auto!important;right:14px!important}
}
@media (min-width:1440px){html.swl [data-swl=main],html.swl [data-swl=header]{max-width:1200px!important}}
/* phones / tablets: sticky spin bar, smaller header */
@media (max-width:1023px){
  html.swl div[data-swl=actions]{position:sticky;bottom:0;z-index:40;padding:8px 0 calc(8px + env(safe-area-inset-bottom));background:linear-gradient(to bottom,rgba(8,11,17,0),#080B11 22%)}
  html.swl button[data-swl=actions]{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom));z-index:40;box-shadow:0 -10px 18px 6px #080B11}
  html.swl [data-swl=actions].grid{grid-template-columns:3fr 2fr!important;gap:8px!important}
  html.swl [data-swl=actions].grid.swl-hascat,html.swl [data-swl=actions].grid:has(>#ct-btn){grid-template-columns:3fr 2fr 44px!important}
  html.swl [data-swl=actions] button{padding-top:10px!important;padding-bottom:10px!important;font-size:14px!important;line-height:1.2}
  /* v2: the tip circle is docked inside the sticky SPIN row (swl.js moves the node), so it never floats over content */
  html.swl #ct-btn{width:44px;height:44px;padding:0!important;overflow:hidden;font-size:0!important;line-height:44px;border-radius:50%!important;text-align:center}
  html.swl [data-swl=actions]>#ct-btn{position:static!important;align-self:center;justify-self:end;transform:none}
  html.swl #ct-btn:not([data-swl-dock]){right:8px!important;left:auto!important;bottom:calc(84px + env(safe-area-inset-bottom))!important}
  html.swl #ct-btn::before{content:"\1F431";font-size:22px;line-height:44px}
  html.swl #ct-pan{bottom:calc(80px + env(safe-area-inset-bottom))!important;left:auto!important;right:8px!important;max-width:calc(100vw - 16px)}
}
@media (max-width:639px){
  html.swl [data-swl=header] h1{font-size:17px!important;line-height:1.15!important}
  html.swl [data-swl=header] p{display:none}
  html.swl [data-swl=header] select{max-width:72px;padding-left:4px!important;padding-right:2px!important}
  html.swl [data-swl=header] button{padding-left:8px!important;padding-right:8px!important}
  html.swl [data-swl=header]>div:last-child{gap:6px!important}
  html.swl [data-swl=sec]{gap:8px}
  .swl-card{padding:10px}
}