/* Native CSS pixels, independent of --ui-unscale and the battle canvas. */
:is(#cloud-panel, #cwmodal.native-settings, .front-native-overlay) {
  box-sizing:border-box; inset:auto; position:fixed;
  top:var(--mobile-ui-top,0px); left:var(--mobile-ui-left,0px);
  width:var(--mobile-ui-width,100%); height:var(--mobile-ui-height,100dvh);
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  overflow:hidden; align-items:safe center;
}
:is(#cloud-panel .cloud-box, #cwmodal.native-settings .cw-box, .front-native-overlay .front-native-card) {
  min-width:0; min-height:0; max-width:100%;
  max-height:calc(var(--mobile-ui-height,100dvh) - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom)));
  overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  scroll-padding:12px; overflow-wrap:anywhere;
}
#cwmodal.native-settings .cw-box {width:min(600px,100%);padding:16px;font-size:16px;}
#cwmodal.native-settings :is(.btn,#st-coupon) {font-size:16px;min-height:44px;padding:10px 12px;}
#cwmodal.native-settings .cw-btns {display:flex;flex-wrap:wrap;gap:10px;}
#cwmodal.native-settings .cw-btns .btn {flex:1 1 180px;min-width:0;max-width:100%;}
#cwmodal.native-settings .st-grid {grid-template-columns:minmax(72px,auto) minmax(0,1fr);}
#cwmodal.native-settings .st-grid b {overflow-wrap:anywhere;}
#cloud-panel .cloud-box {width:min(440px,100%);border-width:3px;border-radius:20px;}
#cloud-panel .cloud-content {padding:16px;}
#cloud-panel .cloud-box h2 {font-size:24px;}
#cloud-panel :is(button,input,summary) {box-sizing:border-box;min-height:44px;font-size:16px;}
#cloud-panel summary {padding:12px 0;cursor:pointer;}
#cloud-panel .cloud-actions {grid-template-columns:repeat(2,minmax(0,1fr));}
#cloud-panel button {white-space:normal;overflow-wrap:anywhere;}
:is(#cloud-panel,#cwmodal.native-settings,.front-native-overlay,.login-page) :is(button,a,input,summary,select):focus-visible {outline:3px solid #2385c6;outline-offset:2px;}
.mobile-ui-compact #cloud-panel .cloud-hero {display:none;}
.mobile-ui-compact #cloud-panel .cloud-content {padding:12px;}
.mobile-ui-compact #cwmodal.native-settings .cw-box {padding:12px;}
@media(max-width:360px) {
  #cloud-panel .cloud-actions {grid-template-columns:1fr;}
  #cwmodal.native-settings .cw-btns .btn {flex-basis:100%;}
  #account-link-choice .link-options {grid-template-columns:1fr;}
}
/* Standalone login has its own scroll surface; the return link scrolls with it. */
body.login-page {
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  box-sizing:border-box;min-height:0;height:var(--mobile-ui-height,100dvh);
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important;
  overflow:hidden;background-attachment:scroll;
}
.login-page .login-back {position:static;flex:none;align-self:flex-start;margin-bottom:12px;font-size:14px;min-height:44px;}
.login-page main {min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-padding:12px;padding:4px 4px 12px;width:min(448px,100%);}
.login-page .panel {padding:20px 16px;border-width:3px;border-radius:20px;}
.login-page h1 {font-size:30px;}.login-page h2 {font-size:22px;}
.login-page header {margin-bottom:14px;}.login-page .desc {margin-bottom:16px;}
.login-page :is(button,input,summary,footer a,.guest) {min-height:44px;box-sizing:border-box;}
.login-page summary {display:flex;align-items:center;font-size:14px;}
.login-page input {font-size:16px;}.login-page #google {font-size:16px;min-height:48px;gap:8px;}
.login-page .status {overflow-wrap:anywhere;}
.mobile-ui-compact .login-page :is(main>header,.mascot) {display:none;}
.mobile-ui-compact .login-page .panel {padding:12px;}
.mobile-ui-compact .login-page .desc {font-size:13px;margin-bottom:10px;}
.mobile-ui-compact .login-page details {margin-top:12px;padding-top:8px;}