:root {
  --menu-bg:#ded8ff;--menu-ink:#213a78;--menu-line:#4662a5;--menu-surface:#fbfbff;--menu-surface-2:#eceaff;--menu-accent:#2f91ff;--menu-accent-soft:#b9dcff;--menu-muted:#65739a;--menu-shadow:#182452;--menu-title:#fff6dd;--menu-title-shadow:#4b3c7b;
}
:root[data-menu-theme="black-gold"]{--menu-bg:#101424;--menu-ink:#f7e4ae;--menu-line:#d9ae55;--menu-surface:#232a4f;--menu-surface-2:#14192f;--menu-accent:#e7ad43;--menu-accent-soft:#f3c45e;--menu-muted:#e7c779;--menu-shadow:#050714;--menu-title:#f8df9e;--menu-title-shadow:#050608}
:root[data-menu-theme="royal-blue"]{--menu-bg:#032b70;--menu-ink:#f5fbff;--menu-line:#6ed8ff;--menu-surface:#0750a7;--menu-surface-2:#06347d;--menu-accent:#20b9ff;--menu-accent-soft:#176fc0;--menu-muted:#c8edff;--menu-shadow:#01183e;--menu-title:#fff;--menu-title-shadow:#03245f}
:root[data-menu-theme="pearl-white"]{--menu-bg:#e8f5ff;--menu-ink:#153968;--menu-line:#4e83b9;--menu-surface:#fff;--menu-surface-2:#eaf6ff;--menu-accent:#337ed0;--menu-accent-soft:#b9e4ff;--menu-muted:#607b98;--menu-shadow:#7d9ebb;--menu-title:#fff;--menu-title-shadow:#315a8b}
:root[data-menu-theme="starry-blue"]{--menu-bg:#02245f;--menu-ink:#f4fbff;--menu-line:#56c8ff;--menu-surface:#06459c;--menu-surface-2:#032d72;--menu-accent:#0a8fff;--menu-accent-soft:#185da7;--menu-muted:#bfddf4;--menu-shadow:#001334;--menu-title:#fff;--menu-title-shadow:#001d52}
:root[data-menu-theme="charcoal-night"]{--menu-bg:#0d0f14;--menu-ink:#f2d18b;--menu-line:#b78a3f;--menu-surface:#252832;--menu-surface-2:#15171d;--menu-accent:#405bbb;--menu-accent-soft:#333f69;--menu-muted:#c7b687;--menu-shadow:#030405;--menu-title:#f3d38f;--menu-title-shadow:#050608}
:root[data-menu-theme="rose-pink"]{--menu-bg:#f4cbd9;--menu-ink:#7d234a;--menu-line:#a6466d;--menu-surface:#fff5f8;--menu-surface-2:#f7dce6;--menu-accent:#df4f84;--menu-accent-soft:#f5a8c3;--menu-muted:#9a5f78;--menu-shadow:#71304b;--menu-title:#fff8fa;--menu-title-shadow:#8e315a}

/* Live Dream Town screens. Only surfaces change; game characters and controls stay real. */
:root[data-menu-theme] body{background:var(--menu-bg)}
:root[data-menu-theme] .settings-2d-view,:root[data-menu-theme] .cat-encyclopedia-view{background:var(--menu-bg) url('assets/dream-town/main-town-2d-night-v1.webp') center/cover no-repeat!important}
:root[data-menu-theme] .settings-2d-view::before,:root[data-menu-theme] .cat-encyclopedia-view::before{z-index:0;background:linear-gradient(180deg,color-mix(in srgb,var(--menu-bg) 12%,transparent),color-mix(in srgb,var(--menu-bg) 70%,#06112c 30%));opacity:.72}
:root[data-menu-theme] .sub-top{z-index:9}
:root[data-menu-theme] .sub-title{color:var(--menu-title);text-shadow:0 3px 0 var(--menu-title-shadow),0 0 16px var(--menu-shadow)}
:root[data-menu-theme] .back-button,:root[data-menu-theme] .pill,:root[data-menu-theme] .res{border:2px solid var(--menu-line);background:color-mix(in srgb,var(--menu-surface-2) 92%,transparent);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--menu-surface) 14%,transparent),0 5px 12px color-mix(in srgb,var(--menu-shadow) 68%,transparent);color:var(--menu-ink)}
:root[data-menu-theme] .panel,:root[data-menu-theme] .modal{border:3px solid var(--menu-line);background:linear-gradient(150deg,var(--menu-surface),var(--menu-surface-2));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--menu-surface) 45%,transparent),0 14px 34px color-mix(in srgb,var(--menu-shadow) 64%,transparent);color:var(--menu-ink)}
:root[data-menu-theme] .modal h2,:root[data-menu-theme] .modal p,:root[data-menu-theme] .panel-title{color:var(--menu-ink)}
:root[data-menu-theme] .popup-close,:root[data-menu-theme] .primary{background:var(--menu-accent);color:var(--menu-ink)}

/* Character dressing keeps the selected live cat and the 210 interaction layout. */
:root[data-menu-theme] .wardrobe-view{background:var(--menu-bg)!important}
:root[data-menu-theme] .wardrobe-room::after{background:linear-gradient(180deg,color-mix(in srgb,var(--menu-bg) 10%,transparent) 0,transparent 55%,color-mix(in srgb,var(--menu-bg) 72%,#080b22 28%) 100%)}
:root[data-menu-theme] .wardrobe-top strong{color:var(--menu-title);text-shadow:0 3px 2px var(--menu-title-shadow),0 0 16px color-mix(in srgb,var(--menu-accent) 35%,transparent)}
:root[data-menu-theme] .wardrobe-top strong::after{color:var(--menu-line)}
:root[data-menu-theme] .wardrobe-cancel,:root[data-menu-theme] .wardrobe-save{border-color:var(--menu-line);background:linear-gradient(180deg,var(--menu-surface),var(--menu-surface-2));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--menu-surface) 25%,transparent),0 6px 15px color-mix(in srgb,var(--menu-shadow) 70%,transparent);color:var(--menu-ink)}
:root[data-menu-theme] .wardrobe-save{background:linear-gradient(180deg,var(--menu-accent),color-mix(in srgb,var(--menu-accent) 68%,var(--menu-shadow)));color:#fff}
:root[data-menu-theme] .wardrobe-turn button,:root[data-menu-theme] .wardrobe-turn span{border-color:var(--menu-line);background:var(--menu-surface-2);color:var(--menu-ink)}
:root[data-menu-theme] .wardrobe-drawer{border-color:var(--menu-line);background:linear-gradient(180deg,color-mix(in srgb,var(--menu-surface) 97%,transparent),color-mix(in srgb,var(--menu-surface-2) 98%,transparent));box-shadow:inset 0 3px 0 color-mix(in srgb,var(--menu-surface) 35%,transparent),0 -7px 20px color-mix(in srgb,var(--menu-shadow) 48%,transparent)}
:root[data-menu-theme] .wardrobe-drawer::before{border-color:var(--menu-line);background:var(--menu-surface-2)}
:root[data-menu-theme] .wardrobe-drawer h1,:root[data-menu-theme] .wardrobe-drawer h1 b,:root[data-menu-theme] .wardrobe-help{color:var(--menu-ink)}
:root[data-menu-theme] .wardrobe-tabs{border-color:color-mix(in srgb,var(--menu-line) 55%,transparent);background:color-mix(in srgb,var(--menu-surface-2) 86%,transparent)}
:root[data-menu-theme] .wardrobe-tabs button,:root[data-menu-theme] .wardrobe-item{border-color:color-mix(in srgb,var(--menu-line) 55%,transparent);background:linear-gradient(180deg,var(--menu-surface),var(--menu-surface-2));color:var(--menu-ink)}
:root[data-menu-theme] .wardrobe-tabs button.active,:root[data-menu-theme] .wardrobe-item.selected{border-color:var(--menu-accent);outline-color:var(--menu-accent);background:linear-gradient(180deg,var(--menu-accent-soft),var(--menu-surface));box-shadow:0 0 0 2px color-mix(in srgb,var(--menu-accent) 40%,transparent),0 0 14px color-mix(in srgb,var(--menu-accent) 38%,transparent);color:var(--menu-ink)}
:root[data-menu-theme] .wardrobe-item b,:root[data-menu-theme] .wardrobe-item small{color:var(--menu-ink)}

/* Settings remain fully operable and now include the seven-theme live picker. */
:root[data-menu-theme] .settings-2d-content{top:92px;bottom:94px;display:block;padding:4px 10px 18px}
:root[data-menu-theme] .settings-2d-panel{width:100%;padding:15px;border-color:var(--menu-line);background:color-mix(in srgb,var(--menu-surface) 96%,transparent);color:var(--menu-ink)}
:root[data-menu-theme] .settings-2d-panel .setting-row{grid-template-columns:minmax(100px,1fr) minmax(142px,1.55fr);min-height:58px;padding:8px 12px;border:2px solid color-mix(in srgb,var(--menu-line) 38%,var(--menu-surface));background:var(--menu-surface);color:var(--menu-ink)}
:root[data-menu-theme] .settings-2d-panel .range-wrap output{color:var(--menu-ink)}
:root[data-menu-theme] .settings-2d-panel input[type=range]{accent-color:var(--menu-accent)}
:root[data-menu-theme] .settings-2d-panel .toggle{border-color:var(--menu-line);background:var(--menu-surface-2);color:var(--menu-muted)}
:root[data-menu-theme] .settings-2d-panel .toggle.on,:root[data-menu-theme] .settings-2d-panel .segments button.active{background:var(--menu-accent);color:#fff}
:root[data-menu-theme] .settings-2d-panel .segments{border-color:var(--menu-line);background:var(--menu-surface-2)}
:root[data-menu-theme] .settings-2d-panel .segments button{background:transparent;color:var(--menu-ink)}
.menu-theme-setting{margin:10px 0;padding:12px;border:2px solid color-mix(in srgb,var(--menu-line) 45%,var(--menu-surface));border-radius:18px;background:var(--menu-surface)}
.menu-theme-setting h2{margin:0 0 10px;color:var(--menu-ink);font-size:16px}
.menu-theme-picker{display:grid;grid-auto-flow:column;grid-auto-columns:74px;gap:7px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin;scrollbar-color:var(--menu-accent) transparent}
.menu-theme-picker button{display:grid;min-width:0;min-height:82px;padding:7px 4px;border:2px solid color-mix(in srgb,var(--menu-line) 44%,var(--menu-surface));border-radius:14px;background:var(--menu-surface-2);color:var(--menu-ink);place-items:center;gap:5px}
.menu-theme-picker button[aria-pressed="true"]{border-color:var(--menu-accent);outline:2px solid var(--menu-accent);background:var(--menu-accent-soft)}
.menu-theme-picker i{display:block;width:38px;height:38px;border:2px solid var(--menu-line);border-radius:50%;box-shadow:inset 0 0 0 2px #fff8}
.menu-theme-picker span{font-size:11px;font-weight:900;line-height:1.2;word-break:keep-all}
:root[data-menu-theme] .settings-link-row button,:root[data-menu-theme] .account-button{border-color:var(--menu-line);background:var(--menu-surface);color:var(--menu-ink)}
:root[data-menu-theme] .town-bottom-nav{border-color:var(--menu-line);background:linear-gradient(180deg,var(--menu-surface),var(--menu-surface-2));box-shadow:0 -6px 18px color-mix(in srgb,var(--menu-shadow) 32%,transparent)}
:root[data-menu-theme] .town-bottom-nav button{color:var(--menu-muted)}
:root[data-menu-theme] .town-bottom-nav button.active{background:var(--menu-accent-soft);box-shadow:inset 0 0 0 2px var(--menu-accent);color:var(--menu-ink)}

/* Collection cards use the theme chrome; portrait artwork is never tinted. */
:root[data-menu-theme] .cat-collection-card{border:2px solid var(--menu-line);background:linear-gradient(150deg,var(--menu-surface),var(--menu-surface-2));color:var(--menu-ink);filter:none}
:root[data-menu-theme] .cat-collection-card.locked{opacity:.7;filter:none}
:root[data-menu-theme] .cat-collection-card b,:root[data-menu-theme] .cat-collection-card small,:root[data-menu-theme] .cat-collection-card em{color:var(--menu-ink)}
:root[data-menu-theme] .cat-collection-card img{filter:none!important}

/* Restore the 210 mini-game controls and render them as a real mobile 2 x 2 menu. */
body.mobile-cat-app .collection-screen.game-hub-active{position:fixed!important;inset:0 auto 0 50%!important;width:min(100%,480px)!important;height:100dvh!important;min-height:100dvh!important;padding:0!important;overflow:hidden!important;transform:translateX(-50%);background:var(--menu-bg)!important}
body.mobile-cat-app .collection-screen.game-hub-active>.game-hub-artboard{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;aspect-ratio:auto!important;overflow:hidden!important;transform:none!important;background:linear-gradient(180deg,color-mix(in srgb,var(--menu-bg) 18%,transparent),color-mix(in srgb,var(--menu-bg) 72%,#06112c 28%)),url('assets/dream-town/main-town-2d-night-v1.webp') center/cover no-repeat!important;box-shadow:none!important}
body.mobile-cat-app .collection-screen.game-hub-active .game-hub-artboard>.eyebrow{display:none!important}
body.mobile-cat-app .collection-screen.game-hub-active .game-hub-artboard>h2{display:block!important;position:absolute!important;top:8.5%;right:18%;left:18%;margin:0!important;color:var(--menu-title)!important;text-align:center;text-shadow:0 3px 0 var(--menu-title-shadow),0 0 12px var(--menu-shadow);font-size:clamp(30px,8vw,42px)!important;font-weight:1000!important}
body.mobile-cat-app .collection-screen.game-hub-active .game-hub-artboard>p{display:block!important;position:absolute!important;top:14.5%;right:8%;left:8%;margin:0!important;color:var(--menu-title)!important;text-align:center;font-size:14px!important;font-weight:900!important}
body.mobile-cat-app .game-hub-active .back-button{top:2.2%!important;left:3.5%!important;width:auto!important;height:48px!important;min-height:48px!important;padding:0 15px!important;border:2px solid var(--menu-line)!important;background:var(--menu-surface-2)!important;box-shadow:0 4px 10px color-mix(in srgb,var(--menu-shadow) 55%,transparent)!important;color:var(--menu-ink)!important}
body.mobile-cat-app .game-hub-active .game-hub-wallet{top:2.2%!important;right:3.5%!important;left:auto!important;display:flex!important;width:auto!important;height:48px!important;gap:5px!important;opacity:1!important;pointer-events:none}
body.mobile-cat-app .game-hub-active .game-hub-wallet span{height:48px!important;min-height:48px!important;border-color:var(--menu-line)!important;background:var(--menu-surface-2)!important;color:var(--menu-ink)!important}
body.mobile-cat-app .game-hub-active .game-library-grid.four-card-grid{position:absolute!important;top:20%!important;right:4%!important;bottom:13.5%!important;left:4%!important;display:grid!important;width:auto!important;margin:0!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;gap:10px!important}
body.mobile-cat-app .game-hub-active .four-card-grid .mini-game-card{display:flex!important;min-height:0!important;padding:7px!important;overflow:hidden!important;border:3px solid var(--menu-line)!important;border-radius:22px!important;outline:0!important;background:linear-gradient(160deg,var(--menu-surface),var(--menu-surface-2))!important;box-shadow:0 5px 10px color-mix(in srgb,var(--menu-shadow) 48%,transparent)!important;color:var(--menu-ink)!important;flex-direction:column!important}
body.mobile-cat-app .game-hub-active .four-card-grid .mini-game-card:active{transform:scale(.98)}
body.mobile-cat-app .game-hub-active .four-card-grid .mini-game-card:focus-visible{outline:4px solid var(--menu-accent)!important;outline-offset:-5px!important}
body.mobile-cat-app .game-hub-active .four-card-grid .mini-game-art{display:block!important;visibility:visible!important;width:100%!important;height:auto!important;min-height:0!important;flex:1 1 auto!important;border-radius:15px!important;background-position:center!important;background-size:cover!important}
body.mobile-cat-app .game-hub-active .four-card-grid .mini-game-copy{display:block!important;visibility:visible!important;width:auto!important;height:auto!important;min-height:44px!important;padding:7px 3px 2px!important;overflow:visible!important;color:var(--menu-ink)!important;flex:0 0 44px!important;text-align:center!important}
body.mobile-cat-app .game-hub-active .four-card-grid .mini-game-copy strong{display:block;color:var(--menu-ink)!important;font-size:15px!important;line-height:1.15}
body.mobile-cat-app .game-hub-active .four-card-grid .mini-game-copy small{display:none!important}
body.mobile-cat-app .game-hub-active .game-hub-nav{position:absolute!important;right:3%!important;bottom:1.7%!important;left:3%!important;display:grid!important;height:9.5%!important;padding:5px!important;border:2px solid var(--menu-line)!important;border-radius:22px!important;background:linear-gradient(180deg,var(--menu-surface),var(--menu-surface-2))!important;box-shadow:0 5px 14px color-mix(in srgb,var(--menu-shadow) 45%,transparent)!important;grid-template-columns:repeat(4,1fr)!important}
body.mobile-cat-app .game-hub-active .game-hub-nav button{height:100%!important;border-radius:16px!important;background:transparent!important;color:var(--menu-muted)!important}
body.mobile-cat-app .game-hub-active .game-hub-nav button>*{visibility:visible!important}
body.mobile-cat-app .game-hub-active .game-hub-nav button.active{background:var(--menu-accent-soft)!important;box-shadow:inset 0 0 0 2px var(--menu-accent)!important;color:var(--menu-ink)!important}

@media(max-width:390px){
  :root[data-menu-theme] .settings-2d-content{top:84px;bottom:82px;padding:2px 7px 12px}
  :root[data-menu-theme] .settings-2d-panel{padding:10px}
  :root[data-menu-theme] .settings-2d-panel .setting-row{grid-template-columns:minmax(90px,1fr) minmax(122px,1.4fr);min-height:53px;padding:6px 8px}
  .menu-theme-picker{grid-auto-columns:68px}.menu-theme-picker button{min-height:76px}
  body.mobile-cat-app .game-hub-active .game-library-grid.four-card-grid{top:19%;right:3%;bottom:13%;left:3%;gap:7px!important}
  body.mobile-cat-app .game-hub-active .four-card-grid .mini-game-card{padding:5px!important;border-width:2px!important;border-radius:18px!important}
  body.mobile-cat-app .game-hub-active .four-card-grid .mini-game-copy strong{font-size:14px!important}
  body.mobile-cat-app .game-hub-active .game-hub-wallet{display:none!important}
}