/* DEV-only laptop homepage alignment: preserve all Android, tablet and phone layouts. */
@media(min-width:1080px){
 html:not(.native-app):not(.um-app-mode) body .wrap{
   width:min(100%,1000px)!important;max-width:1000px!important;
   padding:30px 24px 50px!important;
 }
 html:not(.native-app):not(.um-app-mode) body .wrap > .header{
   margin-bottom:19px!important;
 }
 html:not(.native-app):not(.um-app-mode) body .wrap > .header .app-icon{
   width:76px!important;height:76px!important;border-radius:19px!important;
   margin-bottom:12px!important;
 }
 html:not(.native-app):not(.um-app-mode) body .wrap > .header .tagline{
   font-size:14px!important;line-height:1.5!important;
 }
 html:not(.native-app):not(.um-app-mode) body .wrap > .um-home-appearance{
   margin:0 0 15px!important;min-height:42px!important;
 }
 html:not(.native-app):not(.um-app-mode) body .wrap > .tiles{
   display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
   align-items:stretch!important;gap:14px!important;margin:0!important;
   padding:0!important;border:0!important;border-radius:0!important;
   background:transparent!important;background-image:none!important;
   box-shadow:none!important;overflow:visible!important;
 }
 html:not(.native-app):not(.um-app-mode) body .wrap > .tiles > :is(#homeAccountTile,#homeNewSetupTile,#homeNuvioTile){
   display:flex!important;grid-column:auto!important;flex-direction:column!important;
   align-items:flex-start!important;justify-content:flex-start!important;
   text-align:left!important;min-height:158px!important;width:100%!important;
   gap:16px!important;margin:0!important;padding:19px!important;
   border:1px solid var(--home-stroke,var(--border,#3d4252))!important;
   border-radius:16px!important;
   background:var(--home-paper,rgba(25,19,45,.88))!important;
   box-shadow:none!important;transform:none!important;
 }
 html:not(.native-app):not(.um-app-mode) body .wrap > .tiles > :is(#homeAccountTile,#homeNewSetupTile,#homeNuvioTile):hover{
   border-color:var(--home-accent,var(--violet2,#8c62c4))!important;
   transform:translateY(-2px)!important;box-shadow:0 8px 24px rgba(0,0,0,.1)!important;
 }
 html:not(.native-app):not(.um-app-mode) body .wrap > .tiles > :is(#homeAccountTile,#homeNewSetupTile,#homeNuvioTile) .tile-badge{
   width:47px!important;min-width:47px!important;min-height:47px!important;
   height:47px!important;flex:0 0 47px!important;border-radius:12px!important;
 }
 html:not(.native-app):not(.um-app-mode) body .wrap > .tiles > :is(#homeAccountTile,#homeNewSetupTile,#homeNuvioTile) > div:not(.tile-pulse):not(.tile-badge){
   min-width:0!important;flex:0 1 auto!important;text-align:left!important;
 }
 html:not(.native-app):not(.um-app-mode) body .wrap > .tiles > :is(#homeAccountTile,#homeNewSetupTile,#homeNuvioTile) .tile-name{
   font-size:16px!important;margin:0 0 5px!important;line-height:1.25!important;
   text-align:left!important;
 }
 html:not(.native-app):not(.um-app-mode) body .wrap > .tiles > :is(#homeAccountTile,#homeNewSetupTile,#homeNuvioTile) .tile-desc{
   font-size:12px!important;max-width:260px!important;line-height:1.5!important;
   text-align:left!important;overflow-wrap:break-word!important;
 }
 html:not(.native-app):not(.um-app-mode) body #homeMoreTools{
   margin-top:16px!important;
 }
 html:not(.native-app):not(.um-app-mode) body #homeMoreTools > summary{
   min-height:58px!important;padding-top:10px!important;padding-bottom:10px!important;
 }
 html:not(.native-app):not(.um-app-mode) body .playplus-promo{
   margin-top:20px!important;padding:24px 28px!important;border-radius:20px!important;
 }
 html:not(.native-app):not(.um-app-mode) body .footer-links{
   display:flex!important;flex-wrap:wrap!important;gap:12px 25px!important;
   justify-content:center!important;margin-top:25px!important;
 }
 /* Refined Light: the old purple/white wordmark had almost no contrast. */
 html.um-home-refined.um-home-light:not(.native-app):not(.um-app-mode) body #homeMoreTools .home-more-copy strong{
   display:block!important;color:#233147!important;-webkit-text-fill-color:#233147!important;
   opacity:1!important;visibility:visible!important;font-size:14px!important;font-weight:800!important;
 }
 html.um-home-refined.um-home-light:not(.native-app):not(.um-app-mode) body #homeMoreTools .home-more-copy small{
   color:#536477!important;-webkit-text-fill-color:#536477!important;
   opacity:1!important;visibility:visible!important;
 }
 html.um-home-refined.um-home-light:not(.native-app):not(.um-app-mode) body .playplus-promo .playplus-name{
   color:#293d57!important;-webkit-text-fill-color:#293d57!important;
   background:none!important;text-shadow:none!important;opacity:1!important;
 }
 html.um-home-refined.um-home-light:not(.native-app):not(.um-app-mode) body .playplus-promo .playplus-kicker{
   color:#526f8a!important;-webkit-text-fill-color:#526f8a!important;opacity:1!important;
 }
}
@media(prefers-reduced-motion:reduce){
 html:not(.native-app):not(.um-app-mode) body .wrap > .tiles > a.tile:hover{
   transform:none!important;
 }
}

/* DEV Home, mobile hierarchy and density. Presentation only. */
@media(max-width:820px){
  /* PLAY+ verified status already lives beside the logo. Avoid repeating a
     large thank-you card before the functional actions. */
  html:is(.native-app,.um-app-mode) body .wrap > .um-supporter-home-card{display:none!important}
  html:is(.native-app,.um-app-mode) body .wrap > .header{
    padding:6px 4px 2px!important;margin:0 0 4px!important;
  }
  html:is(.native-app,.um-app-mode) body .wrap > .header .app-icon{
    width:64px!important;height:64px!important;border-radius:17px!important;
    margin:0 auto 7px!important;
  }
  html:is(.native-app,.um-app-mode) body .wrap > .header .logo{
    font-size:clamp(32px,8vw,39px)!important;line-height:1.08!important;
    margin:0 0 3px!important;
  }
  html:is(.native-app,.um-app-mode) body .wrap > .header .um-supporter-identity{
    margin:7px auto 5px!important;padding:5px 10px 5px 6px!important;
    gap:8px!important;min-height:34px!important;animation:none!important;
  }
  html:is(.native-app,.um-app-mode) body .wrap > .header .um-supporter-identity-mark{
    width:23px!important;height:23px!important;font-size:12px!important;
  }
  html:is(.native-app,.um-app-mode) body .wrap > .header .tagline{
    font-size:11px!important;line-height:1.45!important;
    margin:7px auto 3px!important;max-width:330px!important;
  }
  html:is(.native-app,.um-app-mode) body .wrap > .um-home-appearance{
    min-height:0!important;margin:5px 0 12px!important;
    justify-content:flex-end!important;
  }
  html:is(.native-app,.um-app-mode) body .wrap > .um-home-appearance .um-home-appearance-toggle{
    min-height:38px!important;padding:7px 11px!important;
    gap:6px!important;font-size:11px!important;border-radius:11px!important;
  }
  /* Saved progress stays the most relevant action, but is not a hero advert. */
  html:is(.native-app,.um-app-mode) body .wrap > #continueCard:not([hidden]){
    min-height:78px!important;padding:12px 13px!important;
    margin:0 0 12px!important;gap:11px!important;border-radius:15px!important;
  }
  html:is(.native-app,.um-app-mode) body #continueCard .continue-icon{
    flex:0 0 44px!important;width:44px!important;height:44px!important;
    border-radius:12px!important;
  }
  html:is(.native-app,.um-app-mode) body #continueCard .continue-title{
    font-size:15px!important;line-height:1.28!important;
  }
  html:is(.native-app,.um-app-mode) body #continueCard .continue-subtitle{
    font-size:11px!important;line-height:1.35!important;
  }
  html:is(.native-app,.um-app-mode) body .wrap > .tiles{margin-top:0!important}
  html:is(.native-app,.um-app-mode) body .wrap > .tiles > :is(#homeAccountTile,#homeNewSetupTile,#homeNuvioTile){
    min-height:76px!important;padding:11px 13px!important;gap:12px!important;
  }
  html:is(.native-app,.um-app-mode) body .wrap > .tiles > :is(#homeAccountTile,#homeNewSetupTile,#homeNuvioTile) .tile-badge{
    flex:0 0 43px!important;min-width:43px!important;min-height:43px!important;
    width:43px!important;height:43px!important;
  }
  html:is(.native-app,.um-app-mode) body .wrap > .tiles > :is(#homeAccountTile,#homeNewSetupTile,#homeNuvioTile) .tile-name{
    line-height:1.3!important;margin-bottom:3px!important;
  }
  html:is(.native-app,.um-app-mode) body .wrap > #homeMoreTools{margin-top:12px!important}
  html:is(.native-app,.um-app-mode) body #homeMoreTools > summary{
    min-height:63px!important;padding:11px 13px!important;
  }
}
/* Refined Light mobile: the inherited gradient text was almost white on white.
   Use the same readable ink and blue-grey kicker as the desktop view. */
@media(max-width:820px){
 html:is(.native-app,.um-app-mode).um-home-refined.um-home-light body .playplus-promo .playplus-name{
   color:#293d57!important;-webkit-text-fill-color:#293d57!important;
   background:none!important;background-image:none!important;
   text-shadow:none!important;opacity:1!important;
 }
 html:is(.native-app,.um-app-mode).um-home-refined.um-home-light body .playplus-promo .playplus-kicker{
   color:#526f8a!important;-webkit-text-fill-color:#526f8a!important;
   background:none!important;opacity:1!important;
 }
}
/* Keep original keyboard focus styling, tap targets and bottom dock clearance. */