/* Compact competitive home shared by Durak and Checkers. */
html body.at-home #app .salon-menu.salon-home:not(.solitaire-home)>.home-menu{width:min(780px,100%)!important;max-width:780px!important}
html body #app .salon-menu.salon-home:not(.solitaire-home)>.salon-top{width:min(780px,100%);max-width:780px;margin-bottom:18px}
html body #app .salon-home:not(.solitaire-home) .menu-brand{width:min(410px,100%);margin-bottom:7px}
html body #app .salon-home:not(.solitaire-home) .home-content[data-page="main"]>.game-switcher{width:100%;margin:0 0 15px!important;border-radius:13px}
html body #app .salon-home:not(.solitaire-home) .salon-profile{margin:0 0 12px;min-height:54px}
html body #app .salon-home:not(.solitaire-home) .salon-profile>.avatar-art{width:54px;height:54px;flex-basis:54px}
html body #app .salon-home:not(.solitaire-home) .salon-profile strong{max-width:370px;font-size:20px}

html body #app .salon-home:not(.solitaire-home) .ranked-hero{display:grid;grid-template-columns:minmax(0,1fr) 150px;grid-template-areas:"main rating" "meta rating";gap:4px 20px;margin:0 0 9px;padding:13px 20px 11px;border:1px solid #c1a66182;border-radius:14px;background:#142d22ee!important;box-shadow:0 12px 32px #0004,inset 0 1px #ead89520;overflow:hidden}
html body #app .salon-home:not(.solitaire-home) .ranked-hero:before{display:none!important}
html body #app .salon-home:not(.solitaire-home) .ranked-hero-main{grid-area:main;display:grid;grid-template-columns:minmax(0,1fr);gap:5px;min-width:0}
html body #app .salon-home:not(.solitaire-home) .ranked-hero-intro{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;gap:4px 12px;min-width:0}
html body #app .salon-home:not(.solitaire-home) .ranked-hero-intro>p{grid-column:1/-1}
html body #app .salon-home:not(.solitaire-home) .ranked-hero-controls{display:grid;grid-template-columns:minmax(0,1fr) 180px;align-items:center;gap:10px;min-width:0}
html body #app .salon-home:not(.solitaire-home) .mode-kicker{width:max-content;margin-bottom:1px;padding:4px 9px;border:1px solid #d8bd716f;border-radius:999px;color:#e8d38c;font:700 10px/1 'Golos Text',Arial,sans-serif;letter-spacing:.13em;text-transform:uppercase}
html body #app .salon-home:not(.solitaire-home) .ranked-hero h3{margin:0;color:#f4e7c4;font:700 27px/1.12 Literata,Georgia,serif}
html body #app .salon-home:not(.solitaire-home) .ranked-hero p{margin:0 0 2px;color:#c8cfbc;font:13px/1.4 'Golos Text',Arial,sans-serif}
html body #app .salon-home:not(.solitaire-home) .home-rule-switch{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:min(330px,100%);padding:3px;border:1px solid #b69d615e;border-radius:9px;background:#0c21198a;box-sizing:border-box}
html body #app .salon-home:not(.solitaire-home) .home-rule-switch button{min-height:34px;padding:5px 10px;border:0!important;border-radius:6px;background:transparent!important;box-shadow:none!important;color:#c8c9b8!important;text-align:center;font:13px/1.2 'Golos Text',Arial,sans-serif}
html body #app .salon-home:not(.solitaire-home) .home-rule-switch button[aria-pressed="true"]{background:#d3bb78!important;color:#16241a!important;box-shadow:inset 0 1px #fff5c2!important;font-weight:700}
html body #app .salon-home:not(.solitaire-home) .home-rule-switch button:hover:not([aria-pressed="true"]){background:#284436!important;color:#f1e5c6!important}
html body #app .salon-home:not(.solitaire-home) :is(#instant-ranked,.ranked-hero-controls [data-checkers-search="ranked"]){width:100%;min-height:42px;margin:0;border:1px solid #efd88c!important;border-radius:7px;background:#d4bb79!important;color:#17251b!important;box-shadow:0 6px 18px #cbae5925!important;text-align:center;font:700 17px/1.2 'Literata',Georgia,serif}
html body #app .salon-home:not(.solitaire-home) .checkers-ranked-hero .ranked-hero-controls{grid-template-columns:minmax(190px,330px)}
html body #app .salon-home:not(.solitaire-home) .ranked-hero-links{width:100%;text-align:left}
html body #app .salon-home:not(.solitaire-home) .ranked-hero-links button{min-height:28px;padding:3px 0;border:0!important;background:transparent!important;color:#c7bea0!important;box-shadow:none!important;text-align:center;font:11px/1.3 'Golos Text',Arial,sans-serif;text-decoration:underline;text-underline-offset:3px}
html body #app .salon-home:not(.solitaire-home) .ranked-home-progress{grid-area:rating;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;margin:0;padding:1px 0 0 20px;border:0;border-left:1px solid #baa16855;border-radius:0;background:transparent;color:#ead7a4;text-align:center}
html body #app .salon-home:not(.solitaire-home) .ranked-home-badge .rank-badge{display:flex;flex-direction:column;gap:3px;margin:0;color:#e5ce95}
html body #app .salon-home:not(.solitaire-home) .ranked-home-badge .rank-emblem{width:56px;height:56px}
html body #app .salon-home:not(.solitaire-home) .ranked-home-badge .rank-name{font-size:15px}
html body #app .salon-home:not(.solitaire-home) .ranked-home-score{display:grid;gap:0;padding-top:5px;border-top:1px solid #baa16855}
html body #app .salon-home:not(.solitaire-home) .ranked-home-score span{color:#c9b98e;font:12px/1.3 'Golos Text',Arial,sans-serif}
html body #app .salon-home:not(.solitaire-home) .ranked-home-score strong{color:#f1d480;font:700 28px/1.05 'Literata',Georgia,serif;font-variant-numeric:tabular-nums}
html body #app .salon-home:not(.solitaire-home) .ranked-home-progress>button{min-height:26px;padding:2px 0;border:0!important;background:transparent!important;color:#d7caa7!important;box-shadow:none!important;text-align:center;font:11px/1.3 'Golos Text',Arial,sans-serif;text-decoration:underline;text-underline-offset:3px}
html body #app .salon-home:not(.solitaire-home) .ranked-home-meta{grid-area:meta;color:#bdb89f;font:11px/1.3 'Golos Text',Arial,sans-serif}

html body #app .salon-home:not(.solitaire-home) .main-casual-card{display:grid;grid-template-columns:48px minmax(0,1fr) 176px;align-items:center;gap:14px;margin:0 0 9px;padding:10px 15px;border:0;border-block:1px solid #aa925747;border-radius:0;background:transparent!important;box-shadow:none}
html body #app .salon-home:not(.solitaire-home) .casual-card-icon{display:grid;place-items:center;width:42px;height:42px;border-right:1px solid #baa16855;color:#d7bd77}
html body #app .salon-home:not(.solitaire-home) .casual-card-icon svg{width:29px;height:29px;fill:currentColor}
html body #app .salon-home:not(.solitaire-home) .casual-card-copy{display:grid;gap:4px;min-width:0}
html body #app .salon-home:not(.solitaire-home) .main-casual-card>.casual-card-copy,html body #app .salon-home:not(.solitaire-home) .main-casual-card>.casual-card-actions{grid-column:auto}
html body #app .salon-home:not(.solitaire-home) .main-casual-card h3{margin:0;color:#f0e2bd;font:700 21px/1.15 Literata,Georgia,serif}
html body #app .salon-home:not(.solitaire-home) .main-casual-card p{margin:0;color:#bdc4b3;font:12px/1.35 'Golos Text',Arial,sans-serif}
html body #app .salon-home:not(.solitaire-home) .main-casual-card .home-rule-switch{width:235px;margin-top:4px}
html body #app .salon-home:not(.solitaire-home) .main-casual-card .home-rule-switch button{min-height:30px;padding-block:4px;font-size:12px}
html body #app .salon-home:not(.solitaire-home) .casual-card-actions{display:grid;gap:4px}
html body #app .salon-home:not(.solitaire-home) :is(#instant-play,.casual-card-actions>[data-checkers-search="casual"]){display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;padding:9px 14px;border:1px solid #a58e575f!important;border-radius:7px;background:#244735!important;color:#eee1bc!important;box-shadow:none!important;text-align:left;font:15px/1.25 'Golos Text',Arial,sans-serif}
html body #app .salon-home:not(.solitaire-home) :is(#instant-play,.casual-card-actions>[data-checkers-search="casual"]) span{font:24px/1 Georgia,serif}
html body #app .salon-home:not(.solitaire-home) .casual-settings-link{min-height:28px!important;padding:3px 0!important;border:0!important;background:transparent!important;color:#c7bea0!important;box-shadow:none!important;text-align:center;font:11px/1.3 'Golos Text',Arial,sans-serif;text-decoration:underline;text-underline-offset:3px}

html body #app .salon-home:not(.solitaire-home) .imperial-store-entry{display:grid;grid-template-columns:44px minmax(0,1fr) 24px;align-items:center;gap:14px;min-height:62px;margin:0 0 8px;padding:8px 17px;border:1px solid #d2b7689e;border-radius:12px;background:#182f22;color:#ead7a3;text-decoration:none;box-shadow:inset 0 0 24px #c8a84513,0 0 20px #d0ae4830;transition:border-color .16s,background .16s,box-shadow .16s}
html body #app .salon-home:not(.solitaire-home) .imperial-store-entry:hover{border-color:#ebce7b;background:#1d3828;box-shadow:inset 0 0 28px #d1b04d1f,0 0 26px #d0ae4840}
html body #app .salon-home:not(.solitaire-home) .imperial-store-entry>svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:1.4}
html body #app .salon-home:not(.solitaire-home) .imperial-store-entry>span{display:grid;gap:3px;min-width:0}
html body #app .salon-home:not(.solitaire-home) .imperial-store-entry strong{font:700 20px/1.15 'Literata',Georgia,serif;color:#f0d99c}
html body #app .salon-home:not(.solitaire-home) .imperial-store-entry small{color:#cabb96;font:12px/1.35 'Golos Text',Arial,sans-serif}
html body #app .salon-home:not(.solitaire-home) .imperial-store-entry>b{justify-self:end;font:34px/1 Georgia,serif;color:#e2c574}
html body #app .salon-home:not(.solitaire-home) .main-secondary-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
html body #app .salon-home:not(.solitaire-home) .main-secondary-actions :is(button,a){display:flex;align-items:center;justify-content:center;min-height:40px;padding:8px;border:1px solid #917e4f66;border-radius:8px;background:#11281fbb;color:#d9cfaf;font:12px 'Golos Text',Arial,sans-serif;text-align:center;text-decoration:none}
html body #app .salon-menu.checkers-home .main-secondary-actions{grid-template-columns:repeat(3,minmax(0,1fr))}

@media(min-width:1100px){
 html body.at-home #app .salon-home:not(.solitaire-home){padding-top:32px!important}
 html body.at-home #app .salon-home:not(.solitaire-home){--menu-shade-width:800px}
 html body #app .salon-home:not(.solitaire-home)>.salon-top{margin-bottom:9px}
 html body #app .salon-home:not(.solitaire-home)>.home-menu{margin-bottom:12px!important}
}

@media(max-width:720px){
 html body.at-home #app .salon-menu.salon-home:not(.solitaire-home)>.home-menu{width:100%!important;max-width:none!important}
 html body #app .salon-menu.salon-home:not(.solitaire-home)>.salon-top{max-width:none;margin-bottom:10px}
 html body #app .salon-home:not(.solitaire-home) .menu-brand{width:min(285px,80%);margin-inline:auto}
 html body #app .salon-home:not(.solitaire-home) .salon-profile{margin-bottom:14px}
 html body #app .salon-home:not(.solitaire-home) .salon-profile strong{max-width:170px;font-size:18px}
 html body #app .salon-home:not(.solitaire-home) .ranked-hero{grid-template-columns:minmax(0,1fr) 105px;gap:7px 12px;padding:15px 13px 12px;border-radius:12px}
 html body #app .salon-home:not(.solitaire-home) .ranked-hero h3{font-size:23px}
 html body #app .salon-home:not(.solitaire-home) .ranked-home-progress{padding-left:12px}
 html body #app .salon-home:not(.solitaire-home) .ranked-home-badge .rank-emblem{width:48px;height:48px}
 html body #app .salon-home:not(.solitaire-home) .ranked-home-badge .rank-name{font-size:12px}
 html body #app .salon-home:not(.solitaire-home) .ranked-home-score strong{font-size:24px}
 html body #app .salon-home:not(.solitaire-home) .ranked-home-score span{font-size:10px}
 html body #app .salon-home:not(.solitaire-home) .home-rule-switch{width:100%}
 html body #app .salon-home:not(.solitaire-home) .ranked-hero-controls{grid-template-columns:1fr}
 html body #app .salon-home:not(.solitaire-home) :is(#instant-ranked,.ranked-hero-controls [data-checkers-search="ranked"]){width:100%;min-height:44px;font-size:16px}
 html body #app .salon-home:not(.solitaire-home) .ranked-hero-links{width:100%}
 html body #app .salon-home:not(.solitaire-home) .main-casual-card{grid-template-columns:minmax(0,1fr) 132px;gap:10px;padding:13px 2px}
 html body #app .salon-home:not(.solitaire-home) .casual-card-icon{display:none}
 html body #app .salon-home:not(.solitaire-home) .main-casual-card h3{font-size:20px}
 html body #app .salon-home:not(.solitaire-home) .main-casual-card .home-rule-switch{width:100%;max-width:230px}
 html body #app .salon-home:not(.solitaire-home) #instant-play{padding-inline:10px;font-size:13px}
 html body #app .salon-home:not(.solitaire-home) .imperial-store-entry{grid-template-columns:40px minmax(0,1fr) 18px;gap:11px;min-height:64px;padding:9px 12px}
 html body #app .salon-home:not(.solitaire-home) .imperial-store-entry>svg{width:36px;height:36px}
 html body #app .salon-home:not(.solitaire-home) .imperial-store-entry strong{font-size:18px}
 html body #app .salon-home:not(.solitaire-home) .imperial-store-entry small{font-size:10px}
 html body #app .salon-menu.checkers-home .main-secondary-actions{grid-template-columns:1fr 1fr}
 html body #app .salon-menu.checkers-home .main-secondary-actions [data-checkers-rules]{grid-column:1/-1}
}

@media(max-width:390px){
 html body #app .salon-home:not(.solitaire-home) .salon-profile{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:8px;margin-bottom:10px}
 html body #app .salon-home:not(.solitaire-home) .salon-profile>.avatar-art{width:48px;height:48px;flex-basis:48px}
 html body #app .salon-home:not(.solitaire-home) .salon-profile>span:nth-child(2){min-width:0;overflow:hidden}
 html body #app .salon-home:not(.solitaire-home) .salon-profile strong{display:block;max-width:100%;font-size:16px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
 html body #app .salon-home:not(.solitaire-home) .salon-profile .menu-rank-wallet{column-gap:7px;flex-wrap:nowrap;min-width:0}
 html body #app .salon-home:not(.solitaire-home) .salon-profile .rank-badge{gap:4px;min-width:0}
 html body #app .salon-home:not(.solitaire-home) .salon-profile .rank-badge .rank-emblem{width:25px;height:25px;flex-basis:25px}
 html body #app .salon-home:not(.solitaire-home) .salon-profile .rank-badge .rank-name{max-width:65px;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 html body #app .salon-home:not(.solitaire-home) .salon-profile .menu-marks{gap:3px;padding-inline:2px;margin-inline:-2px;font-size:12px}
 html body #app .salon-home:not(.solitaire-home) .salon-profile .menu-marks img{width:21px;height:21px}
 html body #app .salon-home:not(.solitaire-home) .salon-profile .menu-profile-link{margin:0;padding:0 0 0 2px;min-width:48px;font-size:11px}
 html body #app .salon-home:not(.solitaire-home) .ranked-hero{grid-template-columns:minmax(0,1fr) 88px;gap-inline:9px;padding-inline:11px}
 html body #app .salon-home:not(.solitaire-home) .ranked-hero-intro{grid-template-columns:1fr;gap:4px}
 html body #app .salon-home:not(.solitaire-home) .ranked-hero h3{font-size:20px}
 html body #app .salon-home:not(.solitaire-home) .ranked-hero p{font-size:11px}
 html body #app .salon-home:not(.solitaire-home) .home-rule-switch button{padding-inline:5px;font-size:11px}
 html body #app .salon-home:not(.solitaire-home) .ranked-home-progress{padding-left:8px}
 html body #app .salon-home:not(.solitaire-home) .ranked-home-badge .rank-emblem{width:42px;height:42px}
 html body #app .salon-home:not(.solitaire-home) .ranked-home-score strong{font-size:21px}
 html body #app .salon-home:not(.solitaire-home) .main-casual-card{grid-template-columns:1fr}
 html body #app .salon-home:not(.solitaire-home) .casual-card-actions{grid-template-columns:1fr auto;align-items:center}
 html body #app .salon-home:not(.solitaire-home) .casual-settings-link{padding-inline:8px!important}
}

@media(max-height:820px) and (min-width:721px){
 html body #app .salon-home:not(.solitaire-home)>.salon-top{margin-bottom:10px}
 html body #app .salon-home:not(.solitaire-home) .menu-brand{width:390px;margin-bottom:6px}
 html body #app .salon-home:not(.solitaire-home) .salon-profile{margin-bottom:12px}
 html body #app .salon-home:not(.solitaire-home) .ranked-hero{padding-block:15px;margin-bottom:10px}
 html body #app .salon-home:not(.solitaire-home) .main-casual-card{padding-block:10px;margin-bottom:10px}
 html body #app .salon-home:not(.solitaire-home) .imperial-store-entry{min-height:62px}
}

/* Header utilities live beside the logo on every menu page. */
html body.at-home #app .menu-workspace.salon-menu>.salon-top{display:flex;align-items:center;flex-wrap:nowrap}
html body.at-home #app .menu-workspace.salon-menu .salon-tools{position:static!important;inset:auto!important;display:flex!important;align-items:center;flex-wrap:nowrap;flex-shrink:0;height:auto!important;min-height:0!important;margin:0 0 0 auto!important;padding:0!important;border:0!important;border-radius:0;background:transparent!important;box-shadow:none!important;transform:none!important}

/* Rename is part of the public profile overview, rather than account credentials. */
html body #app .profile-display-name{display:grid;gap:7px;margin:18px 0 24px;padding:16px;border:1px solid #a88f5d66;border-radius:10px;background:#132a1fe6}
html body #app .profile-display-name>label{color:#c8bc99;font:12px/1.35 'Golos Text',Arial,sans-serif}
html body #app .profile-display-name>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
html body #app .profile-display-name input{min-width:0;width:100%;min-height:44px;box-sizing:border-box}
html body #app .profile-display-name button{min-height:44px;padding:8px 16px;white-space:nowrap}
html body #app .profile-display-name [data-profile-rename-status]{min-height:17px;margin:0;color:#c7bea0;font:11px/1.35 'Golos Text',Arial,sans-serif}

@media(max-width:720px){
 html body.at-home #app .menu-workspace.salon-menu>.salon-top{gap:6px!important;margin-bottom:12px}
 html body.at-home #app .menu-workspace.salon-menu .salon-top .menu-brand{width:min(185px,55%)!important;max-width:none!important;margin:0!important}
 html body.at-home #app .menu-workspace.salon-menu .salon-tools button{width:34px!important;min-width:34px!important;height:40px!important;min-height:40px!important;padding:7px!important}
 html body.at-home #app .menu-workspace.salon-menu .salon-tools .language-button{width:34px!important;min-width:34px!important}
}

@media(max-width:360px){
 html body.at-home #app .menu-workspace.salon-menu>.salon-top{gap:3px!important}
 html body.at-home #app .menu-workspace.salon-menu .salon-top .menu-brand{width:min(136px,48%)!important}
 html body.at-home #app .menu-workspace.salon-menu .salon-tools button{width:31px!important;min-width:31px!important;padding:6px!important}
 html body.at-home #app .menu-workspace.salon-menu .salon-tools .language-button{width:31px!important;min-width:31px!important}
 html body #app .profile-display-name>div{grid-template-columns:1fr}
 html body #app .profile-display-name button{width:100%}
}