/* Shared toy UI for every DOM dialog. Skin previews keep the real board palette. */
.achievement-notifications{font-family:'Nunito',sans-serif}.achievement-notice{background:#fffaf0;color:#345a48;border:1px solid #e1d6bb;border-bottom:3px solid #d4c499;box-shadow:0 12px 35px #405d3d30}.achievement-copy h2{color:#345a48;font-weight:900}.achievement-kicker,.achievement-description,.achievement-reward{color:#71836a}.achievement-tier{color:#8b7448}.achievement-coins{background:#fff0c0;border-color:#e5d293;color:#896522}.achievement-coins .hub-coin{width:24px;height:24px}.achievement-medal{object-fit:contain;filter:drop-shadow(0 3px 3px #a8986625)}.achievement-dismiss{color:#6c856f}.achievement-dismiss:hover{color:#345a48}
:is(.hub-overlay,.account-overlay){--game-ink:#23484b;--game-muted:#637b7b;--game-gold:#835b20;--game-panel:#fffdf7;--game-deep:#f7f1e5;--game-raised:#fffefb;--game-line:#e4dfcf;--game-accent:#3cae95;font-family:'Nunito',sans-serif;color:var(--game-ink);background:#233d3d70;backdrop-filter:blur(5px);width:100%;left:0;right:0;transform:none;padding:12px;align-items:center;isolation:isolate}
.hub-overlay .hub-sheet,.account-overlay .account-sheet,.hub-overlay .guide-sheet{background:#f8f2e5;border:1px solid #fffdf4;border-radius:28px;box-shadow:0 16px 60px #33423c35;max-width:560px;width:100%;height:min(94dvh,920px);max-height:calc(100dvh - 24px);color:#23484b}
.hub-overlay .hub-sheet[data-screen]{background:#f8f2e5;max-height:calc(100dvh - 24px)}
.hub-overlay .hub-sheet:is([data-screen=settings],[data-screen=modes],[data-screen=shop],[data-screen=booster],[data-screen=workshop]){height:auto}
.hub-overlay .hub-head,.hub-overlay .hub-sheet[data-screen] .hub-head{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px 11px;padding:18px 18px 12px;background:#f8f2e5;border-bottom:1px solid #e9e2d4}
.hub-overlay .hub-head>.hub-art{grid-column:1;grid-row:1;width:44px;height:48px;object-fit:contain;filter:none}
.hub-overlay .hub-head>div:not(.hub-wallet){grid-column:2;grid-row:1;min-width:0}
.hub-overlay .hub-head h2{font-size:23px;font-weight:900;letter-spacing:-.3px;line-height:1.12;color:#23484b;margin:0}
.hub-overlay .hub-head p{font-size:12px;line-height:1.35;color:#637b7b;margin:5px 0 0}
:is(.hub-overlay,.account-overlay) .hub-close{display:grid;place-items:center;grid-column:3;grid-row:1;width:44px;height:44px;min-width:44px;padding:0;margin:0;background:#eee8da;border:1px solid #e2dac9;color:#667570;border-radius:15px;box-shadow:0 2px 0 #dfd7c6;font-size:28px;font-weight:600;line-height:1;font-family:'Nunito',sans-serif}
.hub-overlay .hub-head .hub-wallet,.hub-overlay .hub-sheet[data-screen] .hub-wallet{position:static;grid-column:1/-1;grid-row:2;justify-self:end;display:flex;align-items:center;gap:5px;min-height:32px;padding:4px 9px;margin:0;border:1px solid #e8dfc8;border-radius:12px;background:#fffdf4;color:#73551e;font-size:15px}
.hub-overlay .hub-sheet[data-screen=ranks] .hub-wallet,.hub-overlay .hub-sheet[data-screen=booster] .hub-wallet{display:none}
.hub-overlay .hub-sheet[data-screen=booster] .hub-head>div{grid-column:1/3}
.hub-overlay .hub-sheet[data-screen=shop] .hub-wallet{justify-self:stretch}.hub-overlay .hub-sheet[data-screen=shop] .hub-wallet b{font-size:17px}
.hub-overlay .hub-body,.hub-overlay .hub-sheet[data-screen] .hub-body{padding:16px 18px 22px;min-height:0;scrollbar-width:none}
.hub-overlay .hub-art,.hub-overlay .hub-mode-art{object-fit:contain;filter:drop-shadow(0 3px 2px #9a7e2920)}
.hub-overlay .hub-coin{object-fit:contain;vertical-align:middle;filter:none}
.hub-overlay .hub-foot,.hub-overlay .hub-sheet[data-screen] .hub-foot{background:#fffaf0;border-top:1px solid #e8e0cf;padding:14px 18px max(14px,env(safe-area-inset-bottom));box-shadow:0 -5px 20px #bba77d0a}
.hub-overlay .hub-foot p{font-size:12px;color:#637b7b;line-height:1.45}
:is(.hub-overlay,.account-overlay) button,:is(.hub-overlay,.account-overlay) input,:is(.hub-overlay,.account-overlay) select{font-family:'Nunito',sans-serif}
:is(.hub-overlay,.account-overlay) :is(.hub-primary,.hub-claim,.rank-claim){clip-path:none;min-height:54px;display:inline-flex;align-items:center;justify-content:center;padding:10px 15px 14px;border:1px solid #efbd3f;border-radius:17px;background:linear-gradient(#ffdc6c,#ffcf4e);box-shadow:inset 0 2px 0 #ffedaf,inset 0 -4px 0 #dea32c,0 3px 4px #80692c0c;color:#354831;filter:none;font-size:18px;font-weight:900;line-height:1.2;letter-spacing:0}
:is(.hub-overlay,.account-overlay) :is(.hub-primary,.hub-claim)::before,:is(.hub-overlay,.account-overlay) :is(.hub-primary,.hub-claim)::after{content:none}
.hub-overlay .hub-claim{min-height:44px;padding:9px 12px 12px;font-size:14px;border-radius:13px;flex:none}
:is(.hub-overlay,.account-overlay) .hub-primary:disabled{background:#e9e7dc;color:#86918b;border:1px solid #e0ddcf;box-shadow:inset 0 -3px 0 #d8d7cb;opacity:1}
:is(.hub-overlay,.account-overlay) .hub-secondary{background:#e4f2e9;color:#2f6b5d;border:1px solid #cce1d4;border-radius:15px;min-height:48px;padding:12px 14px;font-size:15px;font-weight:800;box-shadow:0 2px 0 #d1e2d4}
:is(.hub-overlay,.account-overlay) button:focus-visible,:is(.hub-overlay,.account-overlay) input:focus-visible{outline:3px solid #3cae95;outline-offset:3px}
.hub-overlay :is(.hub-tabs,.cosmetic-filters){background:#eee8dc;border:0;border-radius:16px;padding:4px;gap:4px}
.hub-overlay .hub-tabs button{min-height:44px;padding:8px 7px;color:#657d77;font-size:13px;font-weight:800;border-radius:12px;line-height:1.25}
.hub-overlay .hub-tabs button[aria-pressed=true]{background:#fffefa;color:#23554d;box-shadow:0 2px 4px #85724618}
.hub-overlay .cosmetic-filters{flex-wrap:wrap;margin:12px 0 16px}.hub-overlay .cosmetic-filters button{border:0;background:transparent;color:#657d77;font-size:12px;min-height:44px;border-radius:12px;padding:8px 10px}
.hub-overlay .cosmetic-filters button[aria-pressed=true]{background:#bfead8;color:#245e50}
.hub-overlay :is(.hub-hero,.profile-stage,.hub-confirm,.settings-confirm){background:#edf2df;border:1px solid #dde6cc;border-radius:21px;padding:20px;margin:0 0 16px;box-shadow:none}
.hub-overlay .hub-hero h3,.hub-overlay .hub-counter,.hub-overlay .hub-best strong{color:#2e6155}.hub-overlay .hub-hero h3{font-size:24px;font-weight:900}.hub-overlay .hub-hero p{color:#637b7b;font-size:13px}
.hub-overlay :is(.hub-section-title,.hub-goal-progress,.hub-toggle,.hub-notice,.hub-empty p,.hub-confirm p,.hub-selection,.hub-selection span){color:#637b7b;font-size:13px}
.hub-overlay .hub-section-title{font-weight:800;letter-spacing:0;text-transform:none;gap:12px;font-size:16px;align-items:baseline}.hub-overlay .hub-section-title small{font-size:11px;line-height:1.4;text-align:right;color:#72867f}
.hub-overlay .hub-empty{padding:35px 10px}.hub-overlay .hub-empty h3{color:#2b5850;font-weight:900}.hub-overlay .hub-empty .hub-art{width:112px;height:112px;margin-bottom:20px}
.hub-overlay .hub-progress,.hub-overlay .rank-progress{height:9px;border:0;background:#e1e5d9;border-radius:12px}.hub-overlay .hub-progress i,.hub-overlay .rank-progress i{background:linear-gradient(90deg,#4cbda4,#86d5b0)}
.hub-overlay .hub-goal{padding:16px 13px;margin:0 0 10px;background:#fffefa;border:1px solid #e8e2d4;border-radius:18px;box-shadow:0 3px 0 #eae3d5;grid-template-columns:44px minmax(0,1fr)}
.hub-overlay .hub-goal h3{font-size:15px;font-weight:800;color:#264d49}.hub-overlay .hub-goal p{font-size:12px;color:#6a7e78}.hub-overlay .hub-reward{color:#88611d;font-size:13px}.hub-overlay .hub-row-foot{flex-wrap:wrap;gap:8px}
.hub-overlay .hub-goal.is-achievement{grid-template-columns:57px minmax(0,1fr);gap:10px}.hub-overlay .hub-ach-badge .hub-art{width:57px;height:63px}.hub-overlay .hub-ach-badge{color:#8a622d}.hub-overlay .hub-ach-badge span{font-size:10px;letter-spacing:0;text-transform:none}.hub-overlay .hub-ach-badge[data-tier=silver]{color:#587b8d}.hub-overlay .hub-ach-badge[data-tier=gold]{color:#946812}.hub-overlay .hub-ach-badge[data-tier=diamond]{color:#2b867f}
.hub-overlay .hub-mode-grid{gap:12px}.hub-overlay .hub-mode{grid-template-columns:66px minmax(0,1fr) 24px;gap:10px;background:#fffefa;border:1px solid #e7e1d2;border-radius:21px;min-height:118px;padding:14px 12px;box-shadow:0 3px 0 #e9e2d5;color:#294c49}
.hub-overlay .hub-mode[aria-pressed=true]{padding:14px 12px;background:#ebf6e9;border:1px solid #72c8aa;box-shadow:inset 0 0 0 1px #72c8aa,0 3px 0 #d6e7d5}.hub-overlay .hub-mode-art{width:66px;height:72px}
.hub-overlay .hub-mode strong{font-size:20px;font-weight:900}.hub-overlay .hub-mode small{color:#438472;font-size:12px;font-weight:800}.hub-overlay .hub-mode-copy>span{color:#6a7e78;font-size:12px;line-height:1.4}.hub-overlay .hub-mode-check{border-color:#c4d5c8;color:#245548;width:23px;height:23px}.hub-overlay .hub-mode[aria-pressed=true] .hub-mode-check{background:#68c9a9;border-color:#68c9a9;color:white}
.hub-overlay .hub-setting,.hub-overlay .hub-sheet[data-screen=settings] .hub-setting{background:#fffefa;border:1px solid #e5dfd1;padding:16px;border-radius:20px;margin:0 0 12px;box-shadow:0 3px 0 #ece5d8}.hub-overlay .hub-setting h3{font-size:18px;font-weight:900;color:#294c49}.hub-overlay .hub-setting p{font-size:13px;color:#6a7e78}
.hub-overlay .hub-sheet[data-screen=settings] .hub-switch{width:60px;height:44px;padding:6px;background:#dce4db;border-color:#c9d4c8;box-shadow:inset 0 2px 4px #55745f14}.hub-overlay .hub-sheet[data-screen=settings] .hub-switch i{width:30px;height:30px;background:#fffefa;box-shadow:0 2px 3px #60785425}.hub-overlay .hub-sheet[data-screen=settings] .hub-switch[aria-checked=true]{background:#55bea0;border-color:#3eaa8c}.hub-overlay .hub-sheet[data-screen=settings] .hub-switch[aria-checked=true] i{background:#fffbea}
.hub-overlay .hub-language button{background:#f4f2e9;color:#637b7b;border-color:#e2dfd2;font-size:14px}.hub-overlay .hub-language button[aria-pressed=true]{background:#d6f0df;color:#2c705e;border-color:#9dcbb5}
.hub-overlay .music-volume{color:#637b7b;padding:12px 4px 20px}.hub-overlay .music-volume input{accent-color:#40a78d;min-height:40px}.hub-overlay .settings-danger{color:#ad5143;background:#ffebe2;border-color:#ebc5b7;font-family:inherit;font-weight:800}.hub-overlay .settings-session{border-color:#e0d9c9}.hub-overlay .settings-clock{color:#836b37;border-color:#edbc4f}.hub-overlay .settings-confirm h3{color:#34534a}.hub-overlay .settings-confirm p{color:#6a7e78}
.hub-overlay .workshop-choices>button{background:#fffefa;color:#294c49;border:1px solid #e5dfd1;box-shadow:0 4px 0 #e9e2d5;border-radius:22px;padding:18px;min-height:112px;gap:14px}.hub-overlay .workshop-choices .hub-art{width:66px;height:70px}.hub-overlay .workshop-choices strong{font-size:21px;font-weight:900}.hub-overlay .workshop-choices small{font-size:13px;color:#6a7e78}.hub-overlay .workshop-choices b{color:#61b89e}
.hub-overlay :is(.profile-stage h3,.profile-section,.profile-confirm h3,.shop-stage h3,.audio-heading h3,.audio-selection strong){color:#294c49;font-weight:900}.hub-overlay :is(.profile-name,.profile-stage p,.profile-stage small,.profile-note,.profile-cost,.profile-name small,.profile-confirm p,.shop-stage p,.shop-stage small){color:#637b7b;font-size:13px}
.hub-overlay .profile-stage{padding:16px;background:#e9f3e4}.hub-overlay .profile-stage>.identity-badge{width:132px;height:140px}.hub-overlay .profile-stage h3{font-size:25px}.hub-overlay .profile-stage.shop-stage{background:#e9f3e4;padding:14px!important;margin-bottom:16px;gap:16px}.hub-overlay .profile-account-link{margin:0 0 14px}
.hub-overlay .profile-name input,.account-overlay .account-content input:not([type=checkbox]),.account-overlay .account-content textarea{background:#fffefa;color:#294c49;border:1px solid #ccd9c8;border-radius:14px;font:700 17px 'Nunito',sans-serif;padding:13px 14px;box-shadow:inset 0 2px 3px #718c5e0a}
.hub-overlay .cosmetic-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.hub-overlay .cosmetic-grid>button{background:#fffefa;color:#294c49;border:1px solid #e3ddcc;border-radius:19px;box-shadow:0 3px 0 #eae3d5;padding:10px 7px;min-height:150px}.hub-overlay .cosmetic-grid>button[aria-pressed=true]{background:#edf6e6;border:2px solid #68bfa1;padding:9px 6px;box-shadow:0 3px 0 #dce8d4}
.hub-overlay .cosmetic-grid .cosmetic-copy small{font-size:11px;line-height:1.4;color:#687b72}.hub-overlay .cosmetic-grid .cosmetic-price{color:#7d5b25!important}.hub-overlay .cosmetic-lock{color:#7f938a}.hub-overlay .cosmetic-grid .identity-portrait{object-fit:contain}.hub-overlay .hub-sheet[data-screen=cosmetics] .cosmetic-grid.is-shop>button{min-height:100px;border-radius:20px;padding:12px 14px;gap:14px}.hub-overlay .hub-sheet[data-screen=cosmetics] .cosmetic-grid.is-shop button b{font-size:19px}
.hub-overlay .identity-disc,.account-overlay .identity-disc{background:#d1ebde;box-shadow:none}.hub-overlay .identity-frame,.account-overlay .identity-frame{object-fit:contain;filter:drop-shadow(0 2px 2px #a38a5625)}
:is(.hub-overlay,.account-overlay) .identity-level{background:#ffe29a;border-color:#e3b862;color:#5b572e;border-radius:8px;box-shadow:0 2px 0 #b89a53;text-shadow:none}:is(.hub-overlay,.account-overlay) .identity-level>i{background:#b0dfbb;box-shadow:none}:is(.hub-overlay,.account-overlay) .identity-level>span{color:#465a3e;text-shadow:none}
.hub-overlay .audio-card{background:#fffefa;border:1px solid #e4dfce;border-radius:19px;box-shadow:0 3px 0 #eae3d5;padding:13px 12px;gap:10px}.hub-overlay .audio-card.is-selected{background:#eaf5e8;border-color:#65bda0;box-shadow:inset 0 0 0 1px #65bda0}.hub-overlay .audio-select strong{color:#294c49;font-size:16px;font-weight:900}.hub-overlay .audio-select small,.hub-overlay .audio-heading p{color:#637b7b;font-size:12px}.hub-overlay .audio-select b{color:#806020;font-size:13px}
.hub-overlay .audio-listen{background:#d8efe1;border-color:#b4d9c4;color:#347561;box-shadow:0 2px 0 #b6d6bf}.hub-overlay .audio-listen[aria-pressed=true]{background:#ffda6a;color:#615126;border-color:#e9bf50;box-shadow:0 2px 0 #dfb048}.hub-overlay .audio-track-mark{color:#4ea98e}

.hub-overlay :is(.audio-selection small,.audio-workshop-link){color:#637b7b;font-family:inherit}.hub-overlay .audio-workshop-link{min-height:44px;font-weight:700}
.hub-overlay .hub-rank{background:#fffefa;border:1px solid #e8e1d1;border-radius:14px;padding:12px;margin:8px 0;min-height:64px;color:#375950;font-size:14px}.hub-overlay .hub-rank>b,.hub-overlay .hub-my-rank b{color:#397b63;font-size:19px}.hub-overlay .hub-rank>span{color:#94a290}.hub-overlay .hub-rank small,.hub-overlay .hub-my-rank{color:#6c8277;font-size:12px}.hub-overlay .hub-best{background:#e5f2e2}.hub-overlay .hub-best strong{font-weight:1000;font-size:48px;overflow-wrap:anywhere}.hub-overlay .hub-best small{color:#678674}
.hub-overlay .hub-podium-place strong{color:#52756c;font-size:12px}.hub-overlay .hub-podium-place b{color:#85631f}.hub-overlay .hub-podium-step{background:#d4e9e5;color:#527e77}.hub-overlay .hub-podium-place:nth-child(2) .hub-podium-step{background:#ffe49d;color:#916b20}.hub-overlay .hub-podium-place:nth-child(3) .hub-podium-step{background:#f4d9bc;color:#9a6d42}
.hub-overlay .arena-hero{background:#e8f3e5;border:1px solid #d9e6d0;border-radius:24px;padding:20px}.hub-overlay .arena-eyebrow{color:#5d8a76;font-size:11px;letter-spacing:2px}.hub-overlay .arena-emblem{width:144px;height:144px;margin:10px auto}.hub-overlay .arena-emblem:before{content:none}.hub-overlay .arena-emblem .rank-crest{width:140px;height:140px;filter:drop-shadow(0 7px 7px #9da36625)}
.hub-overlay .arena-hero h3{color:#346853;font-weight:1000;font-size:29px}.hub-overlay .arena-rating{color:#346853;margin:12px 0;font-size:34px}.hub-overlay .arena-rating small,.hub-overlay .arena-hero p,.hub-overlay .arena-hero>small{color:#65806f;font-size:13px}.hub-overlay .arena-road-title h3{color:#355b4b;font-size:24px;font-weight:900}.hub-overlay .arena-road-title p{color:#708374;font-size:13px}
.hub-overlay .rank-stop{grid-template-columns:80px minmax(0,1fr);gap:12px}.hub-overlay .rank-stop-badge{background:transparent!important;width:80px;height:112px;transform:none}.hub-overlay .rank-stop-badge .rank-crest{width:80px;height:88px;filter:drop-shadow(0 4px 3px #98855620)}.hub-overlay .rank-stop-badge>span{background:#e8f1e0;border-color:#ccddc2;color:#4b7a58;font-size:10px}.hub-overlay .rank-road:before{left:39px;width:4px;background:#b5d6bd;opacity:1;border-radius:4px}
.hub-overlay .rank-stop .rank-stop-copy{background:#fffefa;border:1px solid #e1ddcb;padding:15px;border-radius:21px;box-shadow:0 4px 0 #e9e2d1}.hub-overlay .rank-stop.is-current .rank-stop-copy{background:#edf7e7;border-color:#6dbb8e;box-shadow:inset 0 0 0 1px #6dbb8e,0 4px 0 #d7e5ce}.hub-overlay .rank-stop h4{color:#426b50;font-size:20px;font-weight:900}.hub-overlay .rank-stop-title>small{color:#79917e;font-size:12px}.hub-overlay .rank-reward-state,.hub-overlay .rank-disclaimer{color:#708374;font-size:12px!important}
.hub-overlay .rank-loot{background:#f5f2e5;border-color:#e3dec9}.hub-overlay .rank-loot>b,.hub-overlay .gift-item b{color:#786324}.hub-overlay .gift-item>span{color:#79917e;font-size:10px}.hub-overlay .gift-item b{font-size:12px}.hub-overlay .rank-claim{font-size:14px;min-height:46px}.hub-overlay .rank-loot-row{margin:12px 0}
.hub-overlay .treasury-caption h3{color:#37564a;font-size:20px}.hub-overlay .treasury-caption>span,.hub-overlay .treasury-balance-label{color:#74816d;font-size:12px}.hub-overlay .treasury-stock{gap:12px}.hub-overlay .treasury-lot{background:#fffefa;border:1px solid #e4dcc7;border-radius:19px;box-shadow:0 4px 0 #eae2ce;min-height:92px;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;padding:12px}
.hub-overlay .treasury-lot::before,.hub-overlay .treasury-lot::after{content:none}.hub-overlay .treasury-lot.is-chest{background:#fff3cb;border-color:#edce7a}.hub-overlay .treasury-lot-copy h3{color:#6c7e6b;font-size:13px}.hub-overlay .treasury-lot-copy strong{color:#345f48;font-size:25px;font-weight:900}.hub-overlay .treasury-lot-copy strong span{color:#74826b;font-size:12px}.hub-overlay .treasury-lot-price{background:#e5f2de;border:1px solid #cfe0c4;border-radius:12px;padding:10px;color:#4f7753;font-size:14px;min-width:62px;text-align:center}
.hub-overlay .treasury-shortfall{background:#fff1d2;border-color:#e8ce8b}.hub-overlay .treasury-shortfall strong{color:#886225;font-size:18px}.hub-overlay .treasury-shortfall span{color:#81754f;font-size:13px}.hub-overlay .treasury-availability{color:#7b836e!important;font-size:13px!important}.hub-overlay .treasury-earn strong{color:#507d56;font-size:13px}.hub-overlay .treasury-earn small{color:#7b836e;font-size:11px}.hub-overlay .treasury-earn .hub-primary{min-width:112px;font-size:14px;min-height:48px;padding:10px 12px 13px}
.hub-overlay .hub-booster-stage{background:radial-gradient(ellipse,#caecd7,transparent 68%)}.hub-overlay .hub-booster-stage:after{background:#a7c9b330;border-color:#b6d6b5}.hub-overlay .hub-booster-hero h3{color:#345d4b;font-weight:900}.hub-overlay .hub-booster-hero p{color:#71806d}.hub-overlay .hub-booster-cost{background:#fffefa;border-color:#e2ddc9;border-radius:18px}.hub-overlay .hub-booster-cost dt{color:#71806d}.hub-overlay .hub-booster-cost dd{color:#87682d}.hub-overlay .hub-booster-short{color:#a2683a}.hub-overlay .hub-offer-cancel{color:#6f8376;font-family:inherit;min-height:44px}
.hub-overlay .hub-status{background:#e2f4df;color:#326d4e;border-color:#a4cfaa;box-shadow:0 5px 25px #50653b25;font-size:14px;font-weight:800}
.hub-overlay .hub-skin-card{background:#fffefa;border:1px solid #e1dccb;box-shadow:0 3px 0 #e9e1d1;border-radius:19px}.hub-overlay .hub-skin-card[aria-pressed=true]{background:#ecf5e5;border-color:#64b293}.hub-overlay .hub-skin-copy strong{color:#385e4a;font-size:16px;font-weight:900}.hub-overlay .hub-skin-copy small{color:#6d806a;font-size:12px}.hub-overlay .hub-skin-selected{color:#40906b}.hub-overlay .hub-paint{filter:drop-shadow(0 3px 2px #8c76422a)}
.hub-overlay .hub-preview{padding:14px 18px 0}.hub-overlay .hub-sheet[data-screen=skins] .hub-body{padding-top:12px}.hub-overlay .hub-selection strong{color:#385e4a}.hub-overlay .hub-skin-stage .hub-stage-caption b{color:#fff1cb}.hub-overlay .hub-skin-stage.is-light .hub-stage-caption b{color:#243747}.hub-overlay .hub-skin-view button{font-family:inherit;min-height:36px;font-size:12px}.hub-overlay .hub-palette-pages button{width:44px;height:44px}.hub-overlay .hub-palette-pages small{font-size:11px}
.account-overlay .account-sheet{height:auto;max-width:440px;padding:22px}.account-overlay .account-sheet header>span{color:#74917c;font-size:11px}.account-overlay .account-sheet h2,.account-overlay .account-sheet h3,.account-overlay .account-lead{color:#2e624e;font-weight:900}.account-overlay .account-sheet p,.account-overlay .account-content small{color:#718270}.account-overlay .account-stats span{background:#eaf3e1;border-color:#d5e3c8;color:#6a856f}.account-overlay .account-stats b{color:#3c7654}.account-overlay .account-sheet .account-error{color:#b45545}.account-overlay .account-links button{background:#eff3e6;color:#568063;border-color:#d5e0c8}.account-overlay .account-check input{accent-color:#4fa981}.account-overlay .account-content textarea{font-family:monospace;font-size:17px}
.hub-overlay.mode-guide .guide-sheet{height:auto;padding:22px;max-width:500px}.hub-overlay .guide-sheet header>span{color:#789078}.hub-overlay .guide-copy h2{color:#34634e;font-weight:900}.hub-overlay .guide-copy p{color:#6b816e}.hub-overlay .guide-art:before{background:radial-gradient(circle,#bfe8c680,transparent 72%)}.hub-overlay .guide-art b{color:#3a9472;text-shadow:0 3px #a6d8b7}.hub-overlay .guide-combo b{color:#c69b33}.hub-overlay .guide-dots span{background:#dce4d0}.hub-overlay .guide-dots .active{background:#5fb392}
@media(hover:hover){.hub-overlay .hub-secondary:hover,.account-overlay .hub-secondary:hover{background:#d4eddd}.hub-overlay .hub-close:hover,.account-overlay .hub-close:hover{background:#e6dfcd}.hub-overlay .hub-mode:hover{border-color:#87baa2}}
@media(min-width:700px){.hub-overlay .hub-sheet{max-width:620px}.hub-overlay .audio-list{grid-template-columns:1fr}.hub-overlay .hub-mode-grid{display:grid;grid-template-columns:1fr 1fr}.hub-overlay .hub-mode{grid-template-columns:58px minmax(0,1fr);min-height:172px;position:relative;padding:16px}.hub-overlay .hub-mode[aria-pressed=true]{padding:16px}.hub-overlay .hub-mode-check{position:absolute;right:12px;top:12px}.hub-overlay .hub-mode-art{width:58px;height:64px}.hub-overlay .hub-mode-copy{padding-top:12px}}
@media(max-width:420px){.hub-overlay{padding:8px;align-items:flex-end}.hub-overlay .hub-sheet,.hub-overlay .hub-sheet[data-screen]{max-height:calc(100dvh - 16px);border-radius:25px}.hub-overlay .hub-head,.hub-overlay .hub-sheet[data-screen] .hub-head{padding:15px 14px 10px;grid-template-columns:38px minmax(0,1fr) 44px;gap:8px}.hub-overlay .hub-head>.hub-art{width:38px;height:42px}.hub-overlay .hub-head h2{font-size:21px}.hub-overlay .hub-head p{font-size:11px}.hub-overlay .hub-body,.hub-overlay .hub-sheet[data-screen] .hub-body{padding:14px 12px 20px}.hub-overlay .hub-foot,.hub-overlay .hub-sheet[data-screen] .hub-foot{padding:12px 14px max(12px,env(safe-area-inset-bottom))}.hub-overlay .cosmetic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hub-overlay .hub-mode{grid-template-columns:58px minmax(0,1fr) 22px;padding:12px 10px;gap:8px}.hub-overlay .hub-mode[aria-pressed=true]{padding:12px 10px}.hub-overlay .hub-mode-art{width:58px;height:64px}.hub-overlay .hub-mode strong{font-size:18px}.hub-overlay .hub-mode small,.hub-overlay .hub-mode-copy>span{font-size:11px}.hub-overlay .rank-stop{grid-template-columns:66px minmax(0,1fr);gap:10px}.hub-overlay .rank-stop-badge{width:66px}.hub-overlay .rank-stop-badge .rank-crest{width:66px;height:78px}.hub-overlay .rank-road:before{left:31px}.hub-overlay .rank-stop .rank-stop-copy{padding:13px}.hub-overlay .treasury-lot{grid-template-columns:54px minmax(0,1fr) auto;padding:10px;gap:8px}.hub-overlay .treasury-lot-price{font-size:12px;min-width:54px;padding:10px 7px}.hub-overlay .treasury-lot-copy strong{font-size:23px}.hub-overlay .treasury-caption>span{display:none}}
@media(max-height:600px){.hub-overlay{padding:8px}.hub-overlay .hub-sheet,.hub-overlay .hub-sheet[data-screen]{max-height:calc(100dvh - 16px)}.hub-overlay .hub-head,.hub-overlay .hub-sheet[data-screen] .hub-head{padding:10px 16px;grid-template-columns:36px minmax(0,1fr) auto 44px}.hub-overlay .hub-head>.hub-art{width:36px;height:40px}.hub-overlay .hub-head .hub-wallet,.hub-overlay .hub-sheet[data-screen] .hub-wallet{grid-column:3;grid-row:1;justify-self:end}.hub-overlay .hub-head .hub-close{grid-column:4}.hub-overlay .hub-head h2{font-size:21px}.hub-overlay .hub-body,.hub-overlay .hub-sheet[data-screen] .hub-body{padding:12px 16px}.hub-overlay .hub-foot,.hub-overlay .hub-sheet[data-screen] .hub-foot{padding:9px 16px}.hub-overlay .hub-primary{min-height:46px;font-size:16px}.hub-overlay .hub-preview{padding:8px 16px 0}.hub-overlay .hub-sheet[data-screen=skins] .hub-preview{flex:none;max-height:34dvh;overflow:auto}.hub-overlay .treasury-balance-label{display:none}.hub-overlay.mode-guide .guide-sheet{max-width:760px}}
@media(prefers-reduced-motion:reduce){.hub-overlay *,.account-overlay *{animation:none!important;transition:none!important}}
@media(max-height:740px) and (max-width:599px){
 .hub-overlay .hub-skin-stage{height:192px;padding:10px}
 .hub-overlay .has-palette .hub-skin-stage{height:216px}
 .hub-overlay .hub-skin-stage .hub-board-preview{height:124px;width:168px;bottom:37px}
 .hub-overlay .hub-stage-caption{top:12px;left:14px;right:14px}
 .hub-overlay .hub-stage-caption b{font-size:19px}.hub-overlay .hub-stage-caption span{font-size:8px}
 .hub-overlay .hub-number-palette{inset:53px 8px 77px;gap:0}.hub-overlay .hub-number-gem{height:39px}
 .hub-overlay .hub-palette-pages{bottom:36px}.hub-overlay .hub-palette-pages button{height:40px;width:40px}
 .hub-overlay .hub-skin-view{bottom:4px;padding:2px}.hub-overlay .hub-skin-view button{min-height:30px;padding:4px 12px}
}
.account-overlay .account-art{display:block;width:72px;height:72px;object-fit:contain;margin:14px auto 0}.account-overlay .account-sheet h2{text-align:center}.hub-overlay .hub-button-label{gap:6px}.hub-overlay .hub-sheet .hub-coin{filter:none}
.hub-overlay .hub-booster-cost{padding:14px 16px;gap:12px}

/* One sizing policy overrides the older portrait/tablet dialog shells. */
body .hub-overlay,body.is-playing .hub-overlay{width:100%;left:0;right:0;transform:none;box-sizing:border-box}
.hub-overlay .hub-sheet,.hub-overlay .hub-sheet[data-screen]{height:auto;max-width:620px}
.hub-overlay .hub-body,.hub-overlay .hub-sheet[data-screen] .hub-body{flex:0 1 auto}

@media(max-width:1199px), (hover:none) and (pointer:coarse){
 body .hub-overlay,body .account-overlay{padding:0;align-items:flex-end}
 .hub-overlay .hub-sheet,
 .hub-overlay .hub-sheet[data-screen],
 .hub-overlay.mode-guide .guide-sheet,
 .account-overlay .account-sheet{
  width:100%;max-width:none;height:auto;max-height:100dvh;
  border:0;border-radius:24px 24px 0 0;
 }
 .hub-overlay .hub-head,.hub-overlay .hub-sheet[data-screen] .hub-head{
  padding-top:max(16px,env(safe-area-inset-top));
  padding-left:max(18px,env(safe-area-inset-left));
  padding-right:max(18px,env(safe-area-inset-right));
 }
 .hub-overlay .hub-body,.hub-overlay .hub-sheet[data-screen] .hub-body{
  padding-left:max(18px,env(safe-area-inset-left));
  padding-right:max(18px,env(safe-area-inset-right));
  padding-bottom:max(22px,env(safe-area-inset-bottom));
 }
 .hub-overlay .hub-foot,.hub-overlay .hub-sheet[data-screen] .hub-foot{
  padding-left:max(18px,env(safe-area-inset-left));
  padding-right:max(18px,env(safe-area-inset-right));
  padding-bottom:max(14px,env(safe-area-inset-bottom));
 }
 .account-overlay .account-sheet,.hub-overlay.mode-guide .guide-sheet{
  padding-top:max(20px,env(safe-area-inset-top));
  padding-left:max(20px,env(safe-area-inset-left));
  padding-right:max(20px,env(safe-area-inset-right));
  padding-bottom:max(20px,env(safe-area-inset-bottom));
 }
 .hub-overlay .hub-empty{padding:24px 8px 12px}
 .hub-overlay .hub-empty .hub-art{margin-bottom:16px}
 .hub-overlay .hub-empty p{margin-bottom:8px}
 @media(min-width:600px){
  .hub-overlay .hub-head,.hub-overlay .hub-sheet[data-screen] .hub-head{grid-template-columns:44px minmax(0,1fr) auto 44px}
  .hub-overlay .hub-head .hub-wallet,.hub-overlay .hub-sheet[data-screen] .hub-wallet{grid-column:3;grid-row:1;justify-self:end}
  .hub-overlay .hub-head .hub-close{grid-column:4}
 }
}

/* Session actions stay visible while settings scroll independently. */
.hub-overlay .settings-game-actions{display:grid;gap:10px;width:100%}
.hub-overlay .settings-game-secondary{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hub-overlay .settings-game-actions button{width:100%;margin:0;justify-content:center}
.hub-overlay .settings-game-secondary .hub-secondary{font-size:14px;min-height:46px;padding:10px 8px}
.hub-overlay .settings-game-secondary .settings-finish{color:#a05042;background:#fbe8de;border-color:#ebcfc3;box-shadow:0 2px 0 #ead3c7}
@media(orientation:landscape) and (max-height:600px){.hub-overlay .settings-game-actions{grid-template-columns:1fr 2fr;align-items:stretch}.hub-overlay .settings-game-actions>.hub-primary{min-height:46px}.hub-overlay .settings-game-secondary{gap:8px}}
/* Account forms use the same rounded, readable controls as the welcome screen. */
.account-overlay .account-sheet header>span{letter-spacing:1.5px;font-weight:900}
.account-overlay .account-content input:not([type=checkbox]){background:#fffefa;border:1px solid #dcdcca;border-radius:14px;color:#23484b;box-shadow:inset 0 2px 3px #ada3820b}
.account-overlay .account-content input:not([type=checkbox]):focus{border-color:#55bda4;outline:3px solid #55bda430;outline-offset:0}
.account-overlay .account-sheet footer>.hub-secondary:last-child{background:transparent;border-color:transparent;box-shadow:none;min-height:44px;color:#65817c}
@media(max-height:700px){.account-overlay .account-art{width:48px;height:48px;margin-top:4px}.account-overlay .account-sheet h2{margin:10px 0;font-size:24px}}
/* Profile: the shop is visible beside the current look, before editable fields. */
.hub-overlay .profile-shop-entry{margin:8px 0 20px;padding:14px;border:1px solid #e7d9a6;border-radius:20px;background:#fff4c9;box-shadow:0 3px 0 #e8dfbd}
.profile-shop-entry>div{display:flex;align-items:center;gap:12px;margin-bottom:12px}.profile-shop-entry img{width:52px;height:56px;object-fit:contain;flex:none}.profile-shop-entry strong{display:block;font-size:19px;font-weight:900;color:#214f50}.profile-shop-entry small{display:block;font-size:12px;line-height:1.4;color:#748272;margin-top:3px}.profile-shop-entry nav{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hub-overlay .profile-shop-entry nav button{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:44px;padding:10px 12px;border:1px solid #e7d7a1;border-radius:12px;background:#fffdf2;font:inherit;font-size:13px;font-weight:900;color:#315c50;box-shadow:0 2px 0 #e4d6a7}.profile-shop-entry nav button>span{font-size:22px;line-height:1}.profile-shop-entry nav button:active{transform:translateY(2px);box-shadow:none}
.collection-profile-back{display:inline-flex;align-items:center;min-height:36px;margin:-5px 0 5px;padding:5px 10px;border:0;border-radius:10px;background:#e7efdf;color:#426858;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
/* Compact identity summary keeps shop entrances above the fold on phones. */
.hub-overlay .hub-sheet[data-screen=profile] .profile-stage{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:1fr 1fr;column-gap:16px;align-items:center;text-align:left;padding:14px;min-height:124px}
.hub-overlay .hub-sheet[data-screen=profile] .profile-stage>.identity-badge{grid-column:1;grid-row:1/3;width:92px;height:96px}
.hub-overlay .hub-sheet[data-screen=profile] .profile-stage h3{grid-column:2;grid-row:1;align-self:end;margin:0 0 4px;font-size:24px}
.hub-overlay .hub-sheet[data-screen=profile] .profile-stage>.profile-xp-text{grid-column:2;grid-row:2;align-self:start;margin:0;font-size:12px}
.hub-overlay .hub-sheet[data-screen=profile] .profile-stage .identity-level{min-width:30px;font-size:15px}
/* Field feedback shares the toy palette; warning and reward are different signals. */
.game-event-banner{font-family:'Nunito',sans-serif;background:#fff5ed;color:#663f37;border:1px solid #efd2c3;border-left:5px solid #ef8778;box-shadow:0 5px 0 #99715e12,0 10px 25px #364b4920;padding:9px 12px;gap:10px}
.game-event-banner strong{font-size:16px;font-weight:900;color:#663f37;margin-bottom:2px}
.game-event-banner p{font-size:13px;line-height:1.35;color:#775a50}
.game-event-banner.is-positive{background:#eff9ef;border-color:#c2decf;border-left-color:#50b99c}
.game-event-banner.is-positive strong{color:#276958}.game-event-banner.is-positive p{color:#507467}
.game-event-banner>img{width:44px;height:48px}.game-event-symbol{color:#b95748;border-color:#db8878}
.guide-skip{min-height:44px;padding:0 14px;border:0;border-radius:14px;background:#e7ede1;color:#456d60;font:800 14px 'Nunito',sans-serif;cursor:pointer}
.guide-art>.guide-item{width:176px;height:176px;object-fit:contain;filter:drop-shadow(0 8px 7px #766d5320)}
.achievement-notifications[hidden]{display:none!important}
body.is-playing .achievement-notice{min-height:64px;box-sizing:border-box;grid-template-columns:44px minmax(0,1fr);gap:9px;padding:8px 44px 8px 9px;border-radius:17px}
body.is-playing .achievement-emblem{width:44px;height:44px}
body.is-playing .achievement-medal{width:44px;height:44px}
body.is-playing .achievement-tier,body.is-playing .achievement-description,body.is-playing .achievement-halo,body.is-playing .achievement-sparks{display:none}
body.is-playing .achievement-kicker{font-size:11px;line-height:1.2;letter-spacing:.35px;margin:0 0 2px}
body.is-playing .achievement-copy h2{font-size:14px;line-height:1.15;margin:0;padding:0;text-wrap:initial}
body.is-playing .achievement-reward{margin:3px 0 0;font-size:11px;gap:6px}
body.is-playing .achievement-coins{padding:0;border:0;background:none;min-height:0;gap:2px}
body.is-playing .achievement-coins b{font-size:12px}body.is-playing .achievement-coins .hub-coin{width:16px;height:16px}
.tutorial-skip{position:fixed;z-index:16000;top:max(64px,env(safe-area-inset-top));right:12px;max-width:118px;min-height:44px;padding:5px 12px;border:1px solid #d5dfcb;border-radius:14px;background:#fffdf3;color:#365f54;font:800 13px/1.15 'Nunito',sans-serif;text-align:center;text-wrap:balance;box-shadow:0 3px 0 #cbd5c5;cursor:pointer}