/* Maison colours cover content and the dark header. Header structure, brand,
   typography and geometry stay unchanged; board colours keep their tokens. */
:root{
 --house-bg:#282122;--house-paper:#382d29;--house-ink:#f4e9d8;--house-muted:#c5b3a5;
 --house-apricot:#ecad80;--house-button-ink:#39261c;--house-sage:#acc295;--house-line:#604d40;
 --house-shadow:#140c0826;--house-window:#71563b;--house-window-light:#a47c49;
 --house-rug:#655f45;--house-rug-stripe:#716a4d;--house-title:'Figtree','Avenir Next','Segoe UI',sans-serif;
}
:root[data-theme=light]{
 --house-bg:#f7eedf;--house-paper:#fff9ef;--house-ink:#493327;--house-muted:#765e4e;
 --house-apricot:#df875c;--house-button-ink:#38251c;--house-sage:#566f4b;--house-line:#dfceb8;
 --house-shadow:#74492c12;--house-window:#eedcba;--house-window-light:#f1d89f;
 --house-rug:#c3c5a1;--house-rug-stripe:#b4ba92;
}
:root[data-theme=pastel]{
 --house-bg:#f7efed;--house-paper:#fffaf6;--house-ink:#473b48;--house-muted:#705e72;
 --house-apricot:#edba9e;--house-button-ink:#49302c;--house-sage:#4e6754;--house-line:#decfdd;
 --house-shadow:#67546b12;--house-window:#e7d9ef;--house-window-light:#f5e4d1;
 --house-rug:#d6e4d1;--house-rug-stripe:#bfceb9;
 --house-lilac:#e8def0;--house-lilac-ink:#715a83;--house-leaf:#dce8d7;--house-peach:#f6dfd1;
}
:root[data-theme] body:not([data-screen=game]){background:var(--house-bg)}
/* Dark chrome shares the room palette; light/pastel and layout stay intact. */
:root[data-theme=dark] .club-header{
 --surface:var(--house-paper);--text:var(--house-ink);--sub:var(--house-muted);
 --mint:var(--house-sage);--club-line:var(--house-line);
 background:var(--house-bg);color:var(--house-ink);border-color:var(--house-line);
}
#hub,#modal{
 --club-bg:var(--house-bg);--surface:var(--house-paper);--text:var(--house-ink);--sub:var(--house-muted);
 --orange:var(--house-apricot);--mint:var(--house-sage);--club-line:var(--house-line);
 --menu-muted:var(--house-muted);--menu-focus:var(--house-sage);--club-title-font:var(--house-title);
 --club-soft-shadow:0 9px 25px var(--house-shadow);color:var(--text);
}
html[data-theme] #hub{--sub:var(--house-muted);--mint:var(--house-sage);--menu-muted:var(--house-muted);--menu-focus:var(--house-sage)}
#hub :is(h1,h2,h3),#modal :is(h1,h2,h3){font-family:var(--house-title);font-weight:800}
#hub .eyebrow{color:var(--house-muted);font-size:11px;letter-spacing:1.25px}
#hub :is(.hub-title,.menu-page-heading) h1{font-size:clamp(30px,3vw,42px);letter-spacing:-1.2px}
#hub :is(.hub-title,.menu-page-heading)>div>p{font-size:14px;line-height:1.75}
#hub :is(.panel,.friend-card,.duel-card,.profile-preview,.profile-editor,.settings-card,.comparison,.collection-panel,.menu-state){background:var(--surface);border-color:var(--club-line);box-shadow:var(--club-soft-shadow)}
#hub :is(.primary,.social-primary),#modal .primary{border-radius:16px;box-shadow:0 4px 0 color-mix(in srgb,var(--house-apricot) 72%,var(--house-ink));background:var(--house-apricot);color:var(--house-button-ink);border-color:transparent;font-size:14px;font-weight:700;transition:transform .18s,box-shadow .18s}
#hub :is(.primary,.social-primary):hover,#modal .primary:hover{background:color-mix(in srgb,var(--house-apricot) 91%,var(--house-paper));transform:translateY(-2px);box-shadow:0 6px 0 color-mix(in srgb,var(--house-apricot) 72%,var(--house-ink))}
#hub :is(.primary,.social-primary):active,#modal .primary:active{transform:translateY(2px);box-shadow:0 2px 0 color-mix(in srgb,var(--house-apricot) 72%,var(--house-ink))}
#hub :is(.secondary,.social-outline){border-color:var(--club-line);color:var(--text);background:color-mix(in srgb,var(--surface) 50%,var(--club-bg));border-radius:14px;font-size:13px}
#hub .xp-caption{font-size:12px;color:var(--sub)}
#hub .xp-caption>span{color:var(--sub)}
#hub :is(.menu-section-nav,.profile-local-nav,.social-tabs,.duel-filters){background:color-mix(in srgb,var(--house-paper) 72%,var(--house-bg));border-color:var(--house-line);box-shadow:none}
#hub :is(input,select,textarea){color:var(--text);background-color:var(--club-bg);border-color:var(--club-line)}
#hub .settings-card,#hub .profile-preview{border-radius:25px}
#modal{background:var(--house-paper);border-color:var(--house-line);box-shadow:0 25px 90px #1c100c38}
#modal :is(p,li){color:var(--sub)}
#modal .close{color:var(--sub)}
#modal :is(input,select){background:var(--club-bg);border-color:var(--club-line);color:var(--text)}
#hub .theme-preview-light{background:#f7eedf}#hub .theme-preview-pastel{background:linear-gradient(135deg,#e8def0,#fffaf6 48%,#dce8d7)}#hub .theme-preview-dark{background:#282122}

/* A room for the existing mascot, without introducing another character. */
.house-window,.house-rug{display:block;position:absolute;pointer-events:none}
.house-window{z-index:0;left:15%;right:4%;top:1%;bottom:16%;border:12px solid var(--house-window);border-bottom-width:19px;border-radius:46% 46% 10px 10px;background:linear-gradient(130deg,var(--house-window-light),color-mix(in srgb,var(--house-window-light) 50%,var(--house-paper)));box-shadow:7px 8px 0 color-mix(in srgb,var(--house-window) 35%,transparent);transform:rotate(3deg)}
.house-window:before,.house-window:after{content:'';position:absolute;background:var(--house-window)}
.house-window:before{inset:0 auto 0 49%;width:9px}.house-window:after{inset:46% 0 auto 0;height:9px}
.house-rug{z-index:1;left:7%;right:-1%;height:17%;bottom:0;border-radius:50%;background:repeating-linear-gradient(0deg,var(--house-rug) 0 3px,var(--house-rug-stripe) 3px 5px);box-shadow:0 9px 18px var(--house-shadow);transform:rotate(-6deg)}
#hub .desktop-lobby{overflow-x:clip}
#hub .desktop-lobby>.hub-title{margin-bottom:20px}
#hub .desktop-lobby>.hub-title .eyebrow,#hub .desktop-lobby>.hub-title p{display:none}
#hub .desktop-lobby>.hub-title h1{font-family:'DM Sans',sans-serif;font-size:16px;font-weight:500;letter-spacing:0;margin:0;color:var(--sub)}
#hub .desktop-lobby>.hub-title h1>span{display:none}
#hub .lobby-journey{border:0;border-radius:0;background:none;box-shadow:none;padding:10px 0 22px;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:28px;min-height:400px;overflow:visible}
#hub .lobby-journey:before{display:none}
#hub .lobby-journey .tag{font-size:11px;letter-spacing:1.2px;color:var(--sub)}
#hub .lobby-journey .tag>i{background:var(--mint);box-shadow:none}
#hub .lobby-journey h2{font-family:var(--house-title);font-weight:900;font-size:clamp(37px,4.4vw,60px);letter-spacing:-1.8px;margin:18px 0 17px;line-height:1.05;max-width:650px;color:var(--text)}
#hub .lobby-journey h2 em{color:var(--text)}
#hub .lobby-journey p{color:var(--sub);font-size:15px;max-width:450px}
#hub .lobby-journey .hero-actions{margin-top:24px}
#hub .lobby-journey .primary{min-height:55px;font-size:15px;padding:16px 23px;border-radius:17px}
#hub .lobby-journey .hero-art{min-height:340px;isolation:isolate}
#hub .lobby-journey .hero-art :is(img,.mascot-living){z-index:2;width:112%;max-width:500px;bottom:-12%;left:-4%;filter:drop-shadow(0 12px 14px var(--house-shadow))}
#hub .lobby-journey .art-label{display:none}
#hub .lobby-journey .hero-art>.lobby-yarn{z-index:3}
#hub .lobby-journey .learn-entry{color:var(--sub);font-size:12px}
#hub .home-save-status.sync-card{margin-top:18px;max-width:450px}
#hub .home-save-status.sync-card b{font-size:12px;color:var(--sub)}
#hub .home-save-status.sync-card[data-sync-state=ready] p{display:none}
#hub .home-save-status.sync-card[data-sync-state=ready] b{font-weight:400}
#hub .lobby-section-heading{margin-bottom:17px}
#hub .lobby-section-heading h2{font-family:var(--house-title);font-size:24px;letter-spacing:-.7px}
#hub .lobby-section-heading>span{display:none}
#hub .lobby-mode{padding:23px 23px 20px;border:0;box-shadow:0 5px 0 var(--house-shadow);border-radius:25px;min-height:210px}
#hub .lobby-mode-daily{background:color-mix(in srgb,var(--house-sage) 17%,var(--house-paper))}
#hub .lobby-mode-quick{background:color-mix(in srgb,var(--house-window) 46%,var(--house-paper))}
#hub .lobby-mode-custom{background:var(--house-paper)}
#hub .lobby-mode-kicker{font-size:10px;letter-spacing:.9px;color:var(--sub)}
#hub .lobby-mode h3{font-family:var(--house-title);font-size:21px!important;font-weight:800;margin:12px 0 10px}
#hub .lobby-mode p{font-size:13px;line-height:1.65;max-width:calc(100% - 70px)}
#hub .lobby-mode-action{border:0;padding-top:0;font-size:13px;margin-top:24px}
#hub .lobby-mode>.club-cat-art{bottom:39px;width:95px;height:105px;right:8px}
#hub .lobby-mode:hover{transform:translateY(-3px);box-shadow:0 8px 0 var(--house-shadow)}
#hub .daily-goals{background:var(--surface);border-radius:25px;border-color:var(--club-line);box-shadow:none}
#hub .home-progress{background:color-mix(in srgb,var(--house-sage) 8%,var(--house-paper));border-color:var(--house-line);border-radius:25px}
#hub .goals-heading h3{font-family:var(--house-title);font-size:21px}
#hub :is(.goal small,.goals-note){font-size:12px}
#hub .goal{background:var(--club-bg)}
#hub .goals-heading>div>small{font-size:10px;letter-spacing:1px}
#hub .paws-balance{color:var(--text);background:color-mix(in srgb,var(--house-apricot) 16%,var(--house-paper));border-color:transparent}

/* Warm menu surfaces, with low visual noise around the useful controls. */
#hub :is(.duel-welcome,.league-hero){background:radial-gradient(ellipse at 90% 20%,color-mix(in srgb,var(--house-apricot) 13%,transparent),transparent 65%),var(--house-paper);border-color:var(--house-line)}
#hub :is(.duel-summary>.panel,.league-permanent){background:color-mix(in srgb,var(--house-sage) 8%,var(--house-paper))}
#hub .duel-comparison>div{background:var(--club-bg);border-color:var(--club-line)}
#hub .league-chest.is-ready{border-color:var(--league-accent)}
#hub .gov-card.gov-danger{border-color:#bd634f;background:color-mix(in srgb,#bd634f 6%,var(--surface))}
#hub .league-chest-art{box-shadow:0 4px 0 var(--house-shadow)}
#hub .menu-footer{border-color:var(--house-line);color:var(--house-muted)}

@media(min-width:1700px){
 #hub .lobby-journey{gap:45px;min-height:480px}
 #hub .lobby-journey .hero-art{min-height:415px;max-width:650px}
 #hub .lobby-journey .hero-art :is(img,.mascot-living){max-width:620px}
 #hub .lobby-journey h2{font-size:64px}
 #hub .lobby-mode{min-height:245px;padding:28px}
 #hub .lobby-mode h3{font-size:25px!important}
 #hub .lobby-mode p{font-size:15px;max-width:calc(100% - 95px)}
 #hub .lobby-mode>.club-cat-art{width:120px;height:130px;bottom:39px}
 #hub .lobby-mode-action{font-size:14px}
}
@media(min-width:2600px){
 #hub .lobby-journey{min-height:600px}#hub .lobby-journey .hero-art{min-height:510px;max-width:820px}
 #hub .lobby-journey .hero-art :is(img,.mascot-living){max-width:800px}
 #hub .lobby-journey h2{font-size:79px}#hub .lobby-journey p{font-size:20px}
 #hub .lobby-mode{min-height:300px;padding:32px}#hub .lobby-mode h3{font-size:29px!important}
 #hub .lobby-mode p{font-size:18px;max-width:calc(100% - 130px)}#hub .lobby-mode>.club-cat-art{width:158px;height:170px;bottom:35px}
 #hub .lobby-mode-action{font-size:17px}#hub .lobby-journey .primary{font-size:19px;min-height:64px}
}
@media(min-width:651px) and (max-width:1100px){
 #hub .lobby-journey{grid-template-columns:minmax(0,1.1fr) minmax(220px,.9fr);gap:12px}
 #hub .lobby-journey .hero-art{min-height:290px;opacity:1}
 #hub .lobby-journey h2{font-size:39px}
 #hub .lobby-mode-grid{grid-template-columns:1fr}
 #hub .lobby-mode{min-height:166px;padding:20px 22px}
 #hub .lobby-mode h3{font-size:19px!important}
 #hub .lobby-mode p{max-width:calc(100% - 110px);font-size:13px}
 #hub .lobby-mode>.club-cat-art{width:95px;height:105px;bottom:18px;right:15px}
 #hub .lobby-mode-action{max-width:calc(100% - 110px);font-size:12px;margin-top:18px}
}
@media(max-width:650px){
 #hub .app-welcome{margin-bottom:18px}#hub .app-welcome p{font-size:14px;margin-bottom:7px;color:var(--sub)}
 #hub .app-welcome h1{font-family:var(--house-title);font-weight:900;font-size:32px;line-height:1.1;max-width:320px}
 #hub .app-play-card{border:0;border-radius:25px;background:color-mix(in srgb,var(--house-window) 30%,var(--house-paper));padding:7px 18px 18px;box-shadow:0 5px 0 var(--house-shadow);overflow:visible}
 #hub .app-play-art{height:145px;isolation:isolate;max-width:300px;margin:auto}
 #hub .app-play-art .house-window{left:26%;right:16%;top:0;bottom:15%;border-width:6px;border-bottom-width:10px;border-radius:55px 55px 7px 7px}
 #hub .app-play-art .house-window:before{width:5px}#hub .app-play-art .house-window:after{height:5px}
 #hub .app-play-art .house-rug{left:19%;right:9%;height:27px;bottom:2px}
 #hub .app-play-art>:is(img,.mascot-living){width:185px;height:150px;z-index:2;max-width:185px;transform:translateY(5px);filter:drop-shadow(0 7px 8px var(--house-shadow))}
 #hub .app-play-art .app-yarn{display:none}
 #hub .app-play-label{color:var(--sub);font-size:13px;margin:8px 0 12px}
 #hub .app-play-button{background:var(--house-apricot);color:var(--house-button-ink);border:0;box-shadow:0 4px 0 color-mix(in srgb,var(--house-apricot) 72%,var(--house-ink));font-size:17px;min-height:56px;border-radius:17px}
 #hub .app-play-button:active{transform:translateY(2px);box-shadow:0 2px 0 color-mix(in srgb,var(--house-apricot) 72%,var(--house-ink))}
 #hub .app-play-card .home-save-status{margin-top:15px}#hub .app-play-card .home-save-status b{font-size:12px}
 #hub .app-choice{min-height:77px;padding:15px 16px;gap:13px;border:0;border-radius:21px;box-shadow:0 3px 0 var(--house-shadow);background:var(--house-paper)}
 #hub .app-choice b{font-family:var(--house-title);font-size:17px;font-weight:800}#hub .app-choice small{font-size:12px}
 #hub .app-choice-icon{width:40px;height:40px;border-radius:13px;font-size:25px;background:color-mix(in srgb,var(--house-paper) 65%,transparent);color:var(--mint)}
 #hub .app-daily{background:color-mix(in srgb,var(--house-sage) 17%,var(--house-paper))}
 #hub .app-quick{background:color-mix(in srgb,var(--house-window) 46%,var(--house-paper))}
 #hub .app-disclosure{background:var(--house-paper);border-color:var(--house-line);box-shadow:none;border-radius:21px}
 #hub .app-learn-entry{font-size:12px;min-height:44px;color:var(--sub)}
 #hub .profile-local-nav{display:grid;grid-template-columns:1fr 1fr;overflow:visible;gap:5px}
 #hub .profile-local-nav>button{white-space:normal;min-height:45px;padding:10px 7px;font-size:13px}
 body:not([data-screen=game]) .mobile-dock{--text:var(--house-ink);--sub:var(--house-muted);--mint:var(--house-sage);--surface:var(--house-paper);--club-line:var(--house-line);background:var(--house-paper);border-color:var(--house-line)}
 #hub :is(.menu-page-heading,.hub-title)>div>p{font-size:13px}
}
@media(prefers-reduced-motion:reduce){#hub :is(button,.house-window,.house-rug){transition:none!important;animation:none!important}}
:root[data-motion=reduced] #hub :is(button,.house-window,.house-rug){transition:none!important;animation:none!important}