/* SmileDice v34 — Player Profile (My Account) responsive layout.
   The Sport pages also use generic .sp-* names. Every rule here is scoped
   to #sp-overlay so Sport coupons, dashboards and dialogs stay untouched. */

#sp-overlay{
 box-sizing:border-box;
 width:100vw;
 max-width:none;
 overflow:hidden;
}
#sp-overlay,#sp-overlay *{box-sizing:border-box}
#sp-overlay .sp-dialog{
 position:relative!important;
 inset:auto!important;
 display:block!important;
 width:min(980px,calc(100vw - 36px))!important;
 max-width:100%!important;
 max-height:min(90dvh,920px)!important;
 margin:auto!important;
 padding:0!important;
 overflow-x:hidden!important;
 overflow-y:auto!important;
 overscroll-behavior:contain;
 background:linear-gradient(150deg,#11295bec,#09182dfb 66%,#080d24);
 border:1px solid #549bff;
 border-radius:20px;
 scrollbar-width:thin;
 scrollbar-color:#397cb4 #0a1831;
}
#sp-overlay #sp-content,
#sp-overlay .sp-hero,
#sp-overlay .sp-person,
#sp-overlay .sp-identity,
#sp-overlay .sp-xp,
#sp-overlay .sp-layout,
#sp-overlay .sp-sidebar,
#sp-overlay .sp-main,
#sp-overlay .sp-nav,
#sp-overlay .sp-score-grid,
#sp-overlay .sp-mini-grid,
#sp-overlay .sp-lower-grid,
#sp-overlay .sp-section,
#sp-overlay .sp-table-wrap{
 min-width:0;
 max-width:100%;
}
#sp-overlay #sp-content{width:100%;overflow-x:clip}
#sp-overlay .sp-close{
 position:sticky!important;
 float:right;
 top:12px!important;
 right:12px!important;
 z-index:20;
 width:42px;
 height:42px;
 margin:13px 13px -56px 0;
 display:grid;
 place-items:center;
 border-radius:11px;
 background:#11294bec;
 border:1px solid #62a0e5;
 color:#e8f4ff;
 box-shadow:0 0 12px #1379d244;
}
#sp-overlay .sp-hero{
 position:relative;
 display:grid;
 grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
 align-items:center;
 gap:18px;
 min-height:212px;
 height:auto;
 aspect-ratio:auto;
 margin:20px 20px 0;
 padding:27px 30px;
 overflow:hidden;
 border:1px solid #5385bf;
 border-radius:16px;
 background:linear-gradient(90deg,#102b55ec,#153c71ad),url('assets/reference-hero.webp') center/cover no-repeat;
 box-shadow:inset 0 1px #ffffff16,0 0 24px #167dd92a;
}
#sp-overlay .sp-person{display:flex;align-items:center;gap:14px}
#sp-overlay .sp-identity h1{white-space:normal;overflow-wrap:anywhere}
#sp-overlay .sp-xp{width:100%;max-width:530px;justify-self:end}
#sp-overlay .sp-layout{
 display:grid;
 grid-template-columns:226px minmax(0,1fr);
 gap:23px;
 padding:18px 21px 15px;
}
#sp-overlay .sp-sidebar{
 position:static!important;
 top:auto!important;
 max-height:none!important;
 width:auto;
 min-width:0;
 padding:0!important;
 overflow:visible!important;
 background:transparent!important;
 border:0!important;
 border-radius:0;
 box-shadow:none!important;
}
#sp-overlay .sp-nav{display:flex;flex-direction:column;gap:7px}
#sp-overlay .sp-nav button{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}
#sp-overlay .sp-score-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
#sp-overlay .sp-score{min-width:0;min-height:102px;padding:14px;gap:10px}
#sp-overlay .sp-score-copy{min-width:0;flex:1}
#sp-overlay .sp-score strong{font-size:clamp(15px,1.6vw,20px);white-space:normal;overflow-wrap:anywhere}
#sp-overlay .sp-mini-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
#sp-overlay .sp-mini{min-width:0;max-width:100%;gap:7px}
#sp-overlay .sp-mini div{min-width:0}
#sp-overlay .sp-lower-grid{grid-template-columns:minmax(0,1.35fr) minmax(260px,.8fr);gap:12px}
#sp-overlay .sp-section{min-width:0}
#sp-overlay .sp-table-wrap{width:100%;overflow-x:auto;overscroll-behavior-x:contain}
#sp-overlay .sp-profile-footer{min-width:0;flex-wrap:wrap}

/* Tablet: the navigation remains on the left, with readable two-column cards. */
@media (min-width:701px) and (max-width:1100px){
 #sp-overlay .sp-dialog{width:calc(100vw - 24px)!important;max-height:calc(100dvh - 24px)!important}
 #sp-overlay .sp-hero{margin:14px 14px 0;padding:23px 23px;gap:13px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 #sp-overlay .sp-person{gap:11px}
 #sp-overlay .sp-avatar-wrap{width:90px}
 #sp-overlay .sp-identity h1{font-size:28px}
 #sp-overlay .sp-xp{padding:13px}
 #sp-overlay .sp-layout{grid-template-columns:160px minmax(0,1fr);gap:12px;padding:13px 14px}
 #sp-overlay .sp-sidebar{padding:11px!important;border:1px solid #345a86!important;border-radius:12px;background:#0d2340!important}
 #sp-overlay .sp-nav button{padding:10px 9px;font-size:12px}
 #sp-overlay .sp-score-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 #sp-overlay .sp-score{min-height:104px}
 #sp-overlay .sp-mini-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 #sp-overlay .sp-lower-grid{grid-template-columns:minmax(0,1fr)}
}

/* Phone: the modal uses the actual viewport; only account tabs scroll sideways. */
@media (max-width:700px){
 #sp-overlay{padding:0!important;place-items:stretch!important;align-items:stretch!important;justify-items:stretch!important}
 #sp-overlay .sp-dialog{
  width:100vw!important;
  min-width:0!important;
  height:100dvh!important;
  max-height:100dvh!important;
  border:0!important;
  border-radius:0!important;
  margin:0!important;
  padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)!important;
 }
 #sp-overlay .sp-close{width:38px;height:38px;top:calc(10px + env(safe-area-inset-top,0px))!important;margin:10px 11px -50px 0;font-size:21px}
 #sp-overlay .sp-hero{
  margin:11px 11px 0;
  min-height:0;
  padding:45px 14px 15px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  border-radius:14px;
  background:linear-gradient(118deg,#214c87ee,#102b52e8),url('assets/reference-hero.webp') center/cover no-repeat;
 }
 #sp-overlay .sp-person{display:flex;align-items:center;gap:12px;min-width:0}
 #sp-overlay .sp-avatar-wrap{width:65px;min-width:65px}
 #sp-overlay .sp-identity{flex:1;min-width:0;gap:4px}
 #sp-overlay .sp-identity h1{font-size:clamp(20px,5.7vw,27px);margin:0}
 #sp-overlay .sp-eyebrow{font-size:9px;letter-spacing:.12em}
 #sp-overlay .sp-sub{font-size:11px}
 #sp-overlay .sp-tier{flex-wrap:wrap;gap:6px;font-size:11px;max-width:100%;margin-top:4px;padding:5px 8px}
 #sp-overlay .sp-tier span:first-child{font-size:14px}
 #sp-overlay .sp-tier span:last-child{padding-left:5px}
 #sp-overlay .sp-xp{max-width:none;width:100%;padding:11px 12px;border-radius:11px}
 #sp-overlay .sp-xp-top{font-size:12px}
 #sp-overlay .sp-xp-foot{font-size:10px}
 #sp-overlay .sp-xp-track{height:9px;margin:9px 0}
 #sp-overlay .sp-layout{display:flex;flex-direction:column;gap:11px;padding:12px 11px}
 #sp-overlay .sp-sidebar{display:block!important;width:100%;max-width:100%;padding:0!important}
 #sp-overlay .sp-nav{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  gap:6px;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:thin;
  scrollbar-color:#4b96c4 #0a1d38;
  overscroll-behavior-x:contain;
  padding:2px 1px 8px;
  -webkit-overflow-scrolling:touch;
 }
 #sp-overlay .sp-nav button{flex:0 0 auto!important;width:auto!important;min-width:max-content;max-width:none;white-space:nowrap!important;padding:10px 12px;font-size:12px;gap:7px}
 #sp-overlay .sp-side-footer{display:none!important}
 #sp-overlay .sp-main,#sp-overlay #sp-panel{min-width:0;width:100%;max-width:100%}
 #sp-overlay .sp-score-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 #sp-overlay .sp-score{min-width:0;min-height:100px;display:flex;align-items:flex-start;flex-direction:column;justify-content:center;gap:6px;padding:11px;border-radius:11px}
 #sp-overlay .sp-score-icon{font-size:19px;width:32px;height:32px;flex:0 0 32px}
 #sp-overlay .sp-score small{font-size:10px;line-height:1.25}
 #sp-overlay .sp-score strong{font-size:clamp(14px,4.3vw,19px);line-height:1.15;overflow-wrap:anywhere}
 #sp-overlay .sp-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:9px 0 14px}
 #sp-overlay .sp-mini{min-height:65px;padding:9px;gap:6px}
 #sp-overlay .sp-mini strong{font-size:13px}
 #sp-overlay .sp-mini small{font-size:10px}
 #sp-overlay .sp-lower-grid{grid-template-columns:minmax(0,1fr)!important;gap:8px}
 #sp-overlay .sp-section{padding:11px;margin-bottom:10px}
 #sp-overlay .sp-badges{grid-template-columns:repeat(2,minmax(0,1fr))}
 #sp-overlay .sp-switch-row{gap:12px}
 #sp-overlay .sp-switch-row span{min-width:0}
 #sp-overlay .sp-profile-footer{display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:11px 12px calc(14px + env(safe-area-inset-bottom,0px))}
 #sp-overlay .sp-message{min-height:240px;padding:28px 13px}
}

@media (max-width:360px){
 #sp-overlay .sp-avatar-wrap{width:57px;min-width:57px}
 #sp-overlay .sp-identity h1{font-size:20px}
 #sp-overlay .sp-score strong{font-size:14px}
 #sp-overlay .sp-score{padding:9px}
 #sp-overlay .sp-hero{padding-left:11px;padding-right:11px}
}
@media (max-height:520px) and (orientation:landscape){
 #sp-overlay .sp-dialog{height:100dvh!important;max-height:100dvh!important}
 #sp-overlay .sp-hero{min-height:0}
}