/* Let the hero grow with text, browser zoom, and wrapped controls. */
#desktop-design .dp-hero{flex:0 0 auto;height:auto;min-height:0}
#desktop-design .dp-hero-copy{height:auto;min-height:260px;justify-content:flex-start;padding:22px 26px;gap:0}
#desktop-design .dp-hero-copy>*{flex-shrink:0}
#desktop-design .dp-hero-buttons{width:min(100%,1050px);flex-wrap:wrap;align-items:stretch}
#desktop-design .dp-hero-buttons>button{flex:1 1 230px}
#desktop-design .dp-hero-join{flex:1 1 270px;min-width:0}
#desktop-design .dp-nav .lucide{width:22px;height:22px;stroke-width:2}
#desktop-design .dp-nav a{min-height:46px;transition:background-color .15s,color .15s}
#desktop-design .dp-nav a:hover{background:#ffffff0d;color:#ffe127}
#desktop-design .dp-mobile-nav .lucide{width:22px;height:22px}
#desktop-design .dp-leader-row{flex-wrap:wrap}
#desktop-design button.dp-leader{border:0;background:transparent;color:inherit;padding:8px;text-align:left;min-width:140px}
#desktop-design.mobile-view-home .dp-leaders{display:block}
#my-profile-page [data-live-streak]{margin:10px 0 0;color:#b9c8d8;font-size:12px;line-height:1.5}
#my-profile-page [data-live-achievements]{margin-top:8px}
#my-profile-page .my-profile-card{overflow:visible}
#desktop-design .np-symbol svg{width:24px;height:24px}
@media(min-width:1101px){#desktop-design .dp-hero-copy{padding-right:27%}#desktop-design .dp-hero-logo{pointer-events:none}}
@media(max-width:700px){#desktop-design .dp-hero-copy{min-height:0;padding:18px 12px}#desktop-design .dp-hero-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}#desktop-design .dp-hero-buttons>button{min-width:0}#desktop-design .dp-hero-join{grid-column:1/-1;width:100%}}
@media(prefers-reduced-motion:reduce){#desktop-design .dp-nav a{transition:none}}

@media(min-width:844px){
  #desktop-design .dp-header{width:calc(100% - 32px);margin:8px auto 0}
  #desktop-design .dp-body{flex:1 1 auto;gap:6px;padding-top:6px;padding-bottom:6px}
  #desktop-design .dp-hero>.dp-statistics{position:absolute;z-index:3;top:50%;left:52%;width:clamp(300px,31vw,470px);min-height:0;transform:translateY(-50%);border-color:#00c77a;border-radius:9px;background:linear-gradient(120deg,#06131dd9,#07131bc4);box-shadow:0 10px 28px #0007;backdrop-filter:blur(7px)}
}

@media(min-width:1271px){
  #desktop-design .dp-hero{width:calc(100% + 20px);height:176px;min-height:176px;flex:0 0 176px;margin-inline:-10px}
  #desktop-design .dp-hero-copy{height:100%;min-height:0;padding:12px 20px}
  #desktop-design .dp-eyebrow{font-size:10px;letter-spacing:1.4px}
  #desktop-design h1{max-width:430px;margin:4px 0 5px;font-size:31px;line-height:.98}
  #desktop-design .dp-hero p{max-width:460px;font-size:11px}
  #desktop-design .dp-connection-row{gap:8px 14px;margin:7px 0;font-size:10px}
  #desktop-design .dp-hero-buttons{position:absolute;left:20px;bottom:10px;width:auto;display:flex;flex-wrap:nowrap;gap:8px}
  #desktop-design .dp-hero-buttons>button{flex:none;min-width:0;min-height:43px;padding:6px 10px}
  #desktop-design .dp-hero-buttons>button:first-child{width:170px}
  #desktop-design .dp-hero-buttons>button:nth-child(2){width:190px}
  #desktop-design .dp-hero-buttons .dp-icon{width:24px;height:24px}
  #desktop-design .dp-hero-buttons strong{font-size:12px}
  #desktop-design .dp-hero-buttons small{margin-top:2px;font-size:9px}
  #desktop-design .dp-hero-join{flex:none;width:180px;padding:4px 5px 5px;gap:2px}
  #desktop-design .dp-hero-join label{font-size:8px}
  #desktop-design .dp-hero-join>div{grid-template-columns:minmax(0,1fr) 61px;gap:4px}
  #desktop-design .dp-hero-join input{height:28px;padding:0 7px;font-size:10px}
  #desktop-design .dp-hero-join .dp-yellow{min-width:0;min-height:28px;padding:3px 7px;font-size:10px}
  #desktop-design .dp-hero>.dp-statistics{top:24px;left:42%;width:clamp(300px,23.44vw,450px);height:clamp(78px,6.1vw,117px);min-height:0;transform:none;padding:7px 8px}
  #desktop-design .dp-hero>.dp-statistics h2{font-size:9px}
  #desktop-design .dp-hero>.dp-statistics .dp-stat-grid{height:calc(100% - 20px);margin-top:6px;gap:4px}
  #desktop-design .dp-hero>.dp-statistics .dp-stat{min-height:0;height:100%;gap:4px;padding:4px}
  #desktop-design .dp-hero>.dp-statistics .dp-stat .dp-icon{width:17px;height:17px}
  #desktop-design .dp-hero>.dp-statistics .dp-stat small{font-size:7px}
  #desktop-design .dp-hero>.dp-statistics .dp-stat strong{margin-top:2px;font-size:13px}
  #desktop-design .dp-hero-logo{right:8px;top:2%;width:22%;height:96%}
}

@media(min-width:844px) and (max-width:1270px){
  #desktop-design .dp-hero{height:165px;min-height:165px;flex:0 0 165px}
  #desktop-design .dp-hero-copy{height:100%;min-height:0;padding:10px 20px}
  #desktop-design .dp-eyebrow{font-size:10px;letter-spacing:1.3px}
  #desktop-design h1{max-width:430px;margin:4px 0 6px;font-size:29px;line-height:.98}
  #desktop-design .dp-hero p{max-width:430px;font-size:11px}
  #desktop-design .dp-connection-row{gap:8px 14px;margin:8px 0;font-size:10px}
  #desktop-design .dp-hero-buttons{position:absolute;left:20px;bottom:10px;width:auto;display:flex;flex-wrap:nowrap;gap:8px}
  #desktop-design .dp-hero-buttons>button{flex:none;min-width:0;min-height:43px;padding:6px 10px}
  #desktop-design .dp-hero-buttons>button:first-child{width:170px}
  #desktop-design .dp-hero-buttons>button:nth-child(2){width:190px}
  #desktop-design .dp-hero-buttons .dp-icon{width:24px;height:24px}
  #desktop-design .dp-hero-buttons strong{font-size:12px}
  #desktop-design .dp-hero-buttons small{margin-top:2px;font-size:9px}
  #desktop-design .dp-hero-join{flex:none;width:180px;padding:4px 5px 5px;gap:2px}
  #desktop-design .dp-hero-join label{font-size:8px}
  #desktop-design .dp-hero-join>div{grid-template-columns:minmax(0,1fr) 61px;gap:4px}
  #desktop-design .dp-hero-join input{height:28px;padding:0 7px;font-size:10px}
  #desktop-design .dp-hero-join .dp-yellow{min-width:0;min-height:28px;padding:3px 7px;font-size:10px}
  #desktop-design .dp-hero>.dp-statistics{top:24px;left:52%;width:300px;height:78px;padding:7px 8px;transform:none}
  #desktop-design .dp-hero>.dp-statistics h2{font-size:9px}
  #desktop-design .dp-hero>.dp-statistics .dp-stat-grid{gap:4px;margin-top:6px}
  #desktop-design .dp-hero>.dp-statistics .dp-stat{min-height:47px;gap:4px;padding:4px}
  #desktop-design .dp-hero>.dp-statistics .dp-stat .dp-icon{width:17px;height:17px}
  #desktop-design .dp-hero>.dp-statistics .dp-stat small{font-size:7px}
  #desktop-design .dp-hero>.dp-statistics .dp-stat strong{margin-top:2px;font-size:13px}
  #desktop-design .dp-hero-logo{right:7px;width:18%;height:96%;top:2%}
}

@media(min-width:844px){
  #desktop-design .dp-hero>.dp-statistics{top:10px;left:32%;width:clamp(350px,32%,480px);height:96px;min-height:96px;transform:none;padding:0;border-color:transparent;background:transparent;box-shadow:none;backdrop-filter:none}
  #desktop-design .dp-hero>.dp-statistics h2{position:relative;height:20px;gap:5px;padding-left:7px;color:#fff;font-size:10px;text-shadow:0 0 8px #ffc400}
  #desktop-design .dp-hero>.dp-statistics h2::after{content:"";flex:1;height:1px;margin-left:5px;background:linear-gradient(90deg,#ffd33b,#ffd33b00);box-shadow:0 0 6px #ffbf00}
  #desktop-design .dp-hero>.dp-statistics .dp-stat-grid{grid-template-columns:minmax(0,.92fr) minmax(0,.92fr) minmax(0,.92fr) minmax(0,1.24fr)}
  #desktop-design .dp-hero>.dp-statistics .dp-stat-grid{height:72px;margin-top:2px;gap:0;padding:5px 4px;border:1px solid #d5a72a;border-radius:12px;background:linear-gradient(100deg,#07111ddd,#0a1118c9);box-shadow:0 0 12px #e6b82b55,0 8px 20px #0007;backdrop-filter:blur(7px)}
  #desktop-design .dp-hero>.dp-statistics .dp-stat{min-width:0;height:60px;overflow:hidden;padding:6px 8px;border:0;border-right:1px solid #ffffff2b;border-radius:0;background:transparent;box-shadow:none}
  #desktop-design .dp-hero>.dp-statistics .dp-stat:last-child{border-right:0}
  #desktop-design .dp-hero>.dp-statistics .dp-stat>div{min-width:0;overflow:hidden}
  #desktop-design .dp-hero>.dp-statistics .dp-stat .dp-icon{width:20px;height:20px}
  #desktop-design .dp-hero>.dp-statistics .dp-stat small{font-size:9px;line-height:1.15}
  #desktop-design .dp-hero>.dp-statistics .dp-stat strong{margin-top:4px;font-size:16px}
  #desktop-design .dp-hero>.dp-statistics .dp-stat strong{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #desktop-design .dp-hero>.dp-statistics .dp-stat:nth-child(4) strong{font-size:clamp(11px,1vw,15px);letter-spacing:-.35px;text-overflow:clip}
  #desktop-design .dp-hero>.dp-active{position:absolute;z-index:4;top:108px;left:calc(32% + clamp(175px,16%,240px));display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;width:clamp(175px,16%,240px);height:56px;min-height:56px;gap:5px;padding:6px 7px;border:1px solid #20cf86;border-radius:9px;background:linear-gradient(110deg,#05271fe8,#07141de0);box-shadow:0 6px 18px #0008;overflow:hidden}
  #desktop-design .dp-hero>.dp-active[hidden]{display:none!important}
  #desktop-design .dp-hero>.dp-active .dp-game-symbol,#desktop-design .dp-hero>.dp-active .dp-game-meta{display:none}
  #desktop-design .dp-hero>.dp-active>div:not(.dp-game-meta){min-width:0;overflow:hidden}
  #desktop-design .dp-hero>.dp-active h2{font-size:10px;line-height:1.15;white-space:nowrap}
  #desktop-design .dp-hero>.dp-active p{margin:3px 0 1px;font-size:8px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #desktop-design .dp-hero>.dp-active small{display:block;color:#9ed8c2;font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #desktop-design .dp-hero>.dp-active>.dp-yellow{min-width:66px;min-height:34px;margin:0;padding:4px 6px;font-size:8px;white-space:normal;line-height:1.1}
  #desktop-design .dp-hero>.dp-active>.dp-yellow .dp-icon{width:11px;height:11px}
  #desktop-design .dp-footer>.dp-connection-row{flex:0 0 auto;margin:0 0 0 auto;gap:8px 12px;font-size:9px}
  #desktop-design .dp-footer>.dp-connection-row+small{margin-left:0}
  #desktop-design .dp-footer>.dp-connection-row .dp-server-status{padding-left:12px}
  #desktop-design .dp-columns{grid-template-columns:minmax(0,575fr) minmax(0,416fr);gap:8px;height:auto;min-height:290px;flex:1 1 290px}
  #desktop-design .dp-left,#desktop-design .dp-right{height:100%;min-height:290px}
  #desktop-design .dp-right{display:grid;grid-template-rows:minmax(58px,58fr) minmax(150px,150fr) minmax(80px,80fr);gap:1px;overflow:hidden}
  #desktop-design .dp-matches{position:relative;height:100%;min-height:290px;flex:1 1 290px;padding:8px;overflow:hidden}
  #desktop-design .dp-matches .dp-section-head{height:38px;min-height:38px;flex:0 0 38px;flex-wrap:nowrap;gap:6px;padding:0 222px 4px 0}
  #desktop-design .dp-matches .dp-section-head h2{min-width:0;white-space:nowrap;font-size:12px}
  #desktop-design .dp-matches .dp-tabs{display:none}
  #desktop-design .dp-matches .dp-tab-select{display:block;flex:0 0 104px;width:104px;height:30px;min-height:30px;padding:4px 24px 4px 7px;font-size:9px}
  #desktop-design .dp-matches .dp-match-count{display:none}
  #desktop-design .dp-matches .dp-filters{position:absolute;z-index:3;top:8px;right:8px;width:210px;height:30px;gap:6px;padding:0}
  #desktop-design .dp-matches .dp-filters select{flex:1 1 0;width:auto;height:30px;min-height:30px;padding:4px 22px 4px 7px;font-size:9px}
  #desktop-design .dp-matches .dp-table-scroll{flex:1 1 auto;min-height:0;max-height:none;overflow:auto}
  #desktop-design .dp-matches .dp-match-table thead tr{height:34px}
  #desktop-design .dp-matches .dp-match-table th{height:34px;padding:5px 7px;font-size:9px}
  #desktop-design .dp-matches .dp-match-table tbody tr{height:46px}
  #desktop-design .dp-matches .dp-match-table td{height:46px;padding:5px 7px;font-size:10px}
  #desktop-design .dp-matches .dp-match-table td .dp-yellow,#desktop-design .dp-matches .dp-match-table .dp-view{min-height:29px;padding:4px 10px;font-size:9px}
  #desktop-design .dp-right>.dp-private{display:grid;grid-template-columns:135px minmax(0,1fr);align-items:center;gap:6px;height:auto;min-height:58px;flex:none;padding:6px 8px;border-radius:8px;overflow:hidden}
  #desktop-design .dp-private>h2{min-width:0;gap:5px;font-size:11px;white-space:nowrap}
  #desktop-design .dp-private>h2 small{display:none}
  #desktop-design .dp-private-grid{min-width:0;margin:0}
  #desktop-design .dp-private .dp-inset{display:grid;grid-template-columns:minmax(0,1fr) 98px;align-items:center;gap:6px;padding:0;border:0;background:transparent}
  #desktop-design .dp-private .dp-inset>h3{display:none}
  #desktop-design .dp-private-fields{min-width:0;gap:5px}
  #desktop-design .dp-private-fields select{height:34px;min-height:34px;min-width:0;padding:4px 7px;font-size:10px}
  #desktop-design .dp-private .dp-inset>button{height:34px;min-height:34px;padding:4px 7px;font-size:10px;white-space:nowrap}
  #desktop-design .dp-right>.dp-history{height:auto;min-height:150px;flex:none;padding:7px 8px;border-radius:8px;overflow:hidden}
  #desktop-design .dp-history h2{height:20px;margin:0 0 4px;font-size:11px}
  #desktop-design .dp-history h2 button{font-size:9px}
  #desktop-design .dp-history .dp-table-scroll{flex:1 1 auto;min-height:0;max-height:none;overflow:auto}
  #desktop-design .dp-history thead{display:table-header-group}
  #desktop-design .dp-history thead tr{height:18px}
  #desktop-design .dp-history th{position:sticky;top:0;z-index:2;height:18px;padding:2px 5px;background:#14222d;color:#96a6b3;font-size:7px;line-height:1;white-space:nowrap}
  #desktop-design .dp-history td{height:36px;padding:3px 5px;font-size:9px}
  #desktop-design .dp-history .dp-view{min-height:25px;padding:3px 10px;font-size:8px}
  #desktop-design .dp-right>.dp-leaders{height:auto;min-height:80px;flex:none;padding:6px 8px;border-radius:8px;overflow:hidden}
  #desktop-design .dp-leaders h2{height:17px;font-size:11px}
  #desktop-design .dp-leaders .dp-leader-row{display:flex;flex-wrap:nowrap;align-items:center;gap:4px;height:49px;padding-top:3px;overflow:hidden}
  #desktop-design .dp-leaders button.dp-leader{min-width:0;padding:2px 3px;gap:4px}
  #desktop-design .dp-leaders .dp-leader strong,#desktop-design .dp-leaders .dp-leader small{font-size:8px}
  #desktop-design .dp-leaders .dp-leader small{margin-top:2px}
  #desktop-design .dp-leaders .dp-rank{width:22px;height:22px;min-width:22px}
  #desktop-design .dp-leaders .dp-your-rank{padding:2px 4px}
  #desktop-design .dp-footer{width:calc(100% - 32px);height:38px;min-height:38px;flex:0 0 38px;align-self:center;flex-wrap:nowrap;gap:14px;margin:0 auto 8px;padding:2px 12px;border:1px solid var(--dp-line);border-radius:7px;overflow:hidden}
  #desktop-design .dp-footer .dp-brand{gap:6px}
  #desktop-design .dp-footer .dp-brand img{width:29px;height:29px}
  #desktop-design .dp-footer .dp-brand strong{font-size:14px}
  #desktop-design .dp-footer button{padding:3px;font-size:9px;white-space:nowrap}
  #desktop-design .dp-footer>small{margin-left:0;font-size:8px;white-space:nowrap}
  #desktop-design .dp-footer>.dp-connection-row{font-size:8px}
}
@media(min-width:844px) and (max-width:1270px){
  #desktop-design .dp-hero-buttons{gap:6px}
  #desktop-design .dp-hero-buttons>button:first-child{width:145px}
  #desktop-design .dp-hero-buttons>button:nth-child(2){width:160px}
  #desktop-design .dp-hero-join{width:145px}
}
@media(min-width:1271px){
  #desktop-design .dp-columns{width:calc(100% + 20px);margin-inline:-10px}
}
@media(min-width:844px){
  #dashboard.desktop-preview-enabled{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;margin:0!important;padding:0!important;overflow:hidden}
  #dashboard.desktop-preview-enabled>#desktop-design{position:absolute;top:0;left:50%;min-height:0;transform:translateX(-50%) scale(var(--dp-scale,1));transform-origin:top center}
  #desktop-design .dp-body{padding-inline:26px}
  #desktop-design .dp-hero,#desktop-design .dp-columns{width:calc(100% + 20px);margin-inline:-10px}
  #desktop-design .dp-hero{height:176px;min-height:176px;flex:0 0 176px}
  #desktop-design .dp-hero-copy{height:100%;min-height:0;padding:12px 20px}
  #desktop-design .dp-eyebrow{font-size:10px}
  #desktop-design .dp-hero h1{margin:3px 0 2px;font-size:28px;line-height:.95}
  #desktop-design .dp-hero p{max-width:460px;font-size:11px}
  #desktop-design .dp-hero-buttons{position:absolute;left:20px;bottom:10px;width:auto;display:flex;flex-wrap:nowrap;gap:8px}
  #desktop-design .dp-hero-buttons>button{flex:none;min-width:0;min-height:43px;padding:6px 10px}
  #desktop-design .dp-hero-buttons>button:first-child{width:170px}
  #desktop-design .dp-hero-buttons>button:nth-child(2){width:190px}
  #desktop-design .dp-hero-buttons .dp-icon{width:24px;height:24px}
  #desktop-design .dp-hero-buttons strong{font-size:12px}
  #desktop-design .dp-hero-buttons small{margin-top:2px;font-size:9px}
  #desktop-design .dp-hero-join{flex:none;width:180px;padding:4px 5px 5px;gap:2px}
  #desktop-design .dp-hero-join label{font-size:8px}
  #desktop-design .dp-hero-join>div{grid-template-columns:minmax(0,1fr) 61px;gap:4px}
  #desktop-design .dp-hero-join input{height:28px;padding:0 7px;font-size:10px}
  #desktop-design .dp-hero-join .dp-yellow{min-width:0;min-height:28px;padding:3px 7px;font-size:10px}
  #desktop-design .dp-hero-logo{right:8px;top:2%;width:22%;height:96%}
  #desktop-design .dp-header .dp-brand{flex:0 0 auto;gap:10px}
  #desktop-design .dp-header .dp-brand img{width:48px;height:48px}
  #desktop-design .dp-header .dp-brand strong{font-size:clamp(20px,1.75vw,25px)}
  #desktop-design .dp-nav{flex:0 1 auto;gap:8px;margin-right:auto}
  #desktop-design .dp-nav a,#desktop-design .dp-nav button{gap:9px;min-height:42px;padding:8px 14px;font-size:13px}
  #desktop-design .dp-profile{display:flex;min-width:0}
  #desktop-design .dp-profile>div,#desktop-design .dp-profile>button{display:block}
  #desktop-design .dp-profile>div{max-width:145px}
  #desktop-design .dp-profile strong,#desktop-design .dp-profile small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #desktop-design .dp-footer>small{display:block}
}
.dp-online[data-state="offline"],#my-profile-page [data-profile-connection][data-state="offline"]{color:#ff5964}
.dp-online[data-state="offline"] i,#my-profile-page [data-profile-connection][data-state="offline"] i{background:#ff3b4f;box-shadow:0 0 10px #ff3b4f88}
.dp-online[data-state="connecting"],#my-profile-page [data-profile-connection][data-state="connecting"]{color:#aebbc7}

#desktop-design .dp-filters select,
#desktop-design .dp-tab-select,
#desktop-design .dp-private-fields select{cursor:pointer}

/* Full dashboard pages share the exact Play header and footer. Only the page
   content between them scrolls when it is taller than the available canvas. */
@media(min-width:844px){
  #desktop-design:is(.history-open,.leaderboard-open,.profile-open){height:100%;min-height:0;overflow:hidden}
  #desktop-design:is(.history-open,.leaderboard-open,.profile-open)>.dp-header,
  #desktop-design:is(.history-open,.leaderboard-open,.profile-open)>.dp-footer{display:flex!important}
  #desktop-design.history-open>#history-page,
  #desktop-design.leaderboard-open>#leaderboard-page,
  #desktop-design.profile-open>#my-profile-page{
    flex:1 1 auto;
    height:auto;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    scrollbar-gutter:auto;
    scrollbar-width:thin;
    scrollbar-color:#b89b38 #101720;
  }
}