/* Shared v23 host boundaries; old A/B and combat retain their styles. */
.app-shell.menu-preview[data-theme=v23]{max-width:480px;background:#070706}
.menu-preview[data-theme=v23] .menu-toolbar{min-height:44px;padding:3px 8px;gap:5px}
.menu-preview[data-theme=v23] .menu-brand{display:none}
.menu-preview[data-theme=v23] .menu-toolbar button{min-height:36px;font-size:12px}
.menu-preview[data-theme=v23] .menu-theme-switch{margin-right:auto}
.menu-preview[data-theme=v23] .menu-theme-switch button{min-width:36px;padding:0 8px}
.menu-preview[data-theme=v23] .menu-motion-toggle{width:74px}
.menu-preview[data-theme=v23] .menu-exit{min-width:36px}
.menu-preview[data-theme=v23] .menu-body[data-v23-surface=home] .menu-content,
.menu-preview[data-theme=v23] .menu-body[data-v23-surface=inventory] .menu-content{padding:0;scroll-padding:0}
.menu-preview[data-theme=v23] .menu-body[data-v23-surface=home]>.menu-nav,
.menu-preview[data-theme=v23] .menu-body[data-v23-surface=inventory]>.menu-nav{display:none}
.menu-preview[data-theme=v23] .menu-body[data-v23-surface=home] .menu-content>.menu-latest,
.menu-preview[data-theme=v23] .menu-body[data-v23-surface=home] .menu-content>.menu-art-note,
.menu-preview[data-theme=v23] .menu-body[data-v23-surface=home] .menu-content>.menu-demo-states{display:none}

/* Quality settings are regular controls; no persistent selector overlays the art. */
.menu-preview .menu-motion-control{min-height:44px;width:100%;text-align:left;padding:10px 12px;margin-top:12px}

/* Native settings dialog: opaque controls, no live backdrop blur. */
.menu-settings-dialog{box-sizing:border-box;width:min(420px,calc(100vw - 24px));max-width:100%;max-height:calc(var(--tg-viewport-height,100svh) - 24px);margin:auto;padding:18px;border:1px solid #9e8146;border-radius:10px;background:#0d0e0a;color:#eee7d6;overflow:auto;font:14px/1.45 Inter,Arial,sans-serif;box-shadow:0 12px 36px #0009}
.menu-settings-dialog::backdrop{background:#000b}
.menu-settings-heading{display:flex;align-items:center;gap:12px;position:sticky;top:-18px;padding:8px 0;background:#0d0e0a;z-index:2}
.menu-settings-heading h2{font-size:20px;color:#e7c77e;margin:0;flex:1}
.menu-preview .menu-settings-close{min-width:44px;min-height:44px;padding:0;background:#191a12;font-size:24px;border-color:#675b3d}
.menu-settings-quality{padding:0;border:0;min-width:0;margin:14px 0}
.menu-settings-quality legend{font-size:14px;font-weight:600;margin-bottom:8px}
.menu-settings-mode-group{display:grid;grid-template-columns:1fr;gap:7px}
.menu-settings-frequency{display:grid;gap:8px;font-size:14px;font-weight:600;margin:14px 0 8px}
.menu-settings-frequency select{width:100%;min-width:0;min-height:44px;border:1px solid #64563a;border-radius:6px;padding:8px 10px;color:#f0d697;background:#171811;font:inherit;color-scheme:dark}
.menu-settings-frequency select:disabled{opacity:.5}
.menu-settings-check:has(input:disabled){opacity:.6}
.menu-settings-option{display:flex;align-items:center;gap:6px;min-height:48px;padding:6px;border:1px solid #64563a;border-radius:6px;cursor:pointer;font-size:12px;overflow-wrap:anywhere;background:#171811}
.menu-settings-option.is-selected{border-color:#d7b76c;background:#332b18;color:#f0d697}
.menu-settings-dialog input{accent-color:#d7b76c;flex:none;margin:0;width:18px;height:18px}
.menu-settings-effective{display:block;color:#e2c781;font-size:12px;margin:8px 0 0}
.menu-settings-hint{color:#b6ad99;font-size:12px;line-height:1.55;margin:8px 0 14px}
.menu-settings-check{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 0;border-top:1px solid #3b382b;cursor:pointer}
.menu-settings-metrics{border-top:1px solid #3b382b;margin-top:8px;padding-top:6px}
.menu-settings-metrics summary{cursor:pointer;min-height:44px;padding:12px 0;color:#d9c28e}
.menu-settings-diagnostics{margin:4px 0 12px;font-size:12px}
.menu-settings-diagnostics>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(70px,auto);gap:10px;padding:7px 0;border-bottom:1px solid #29291f}
.menu-settings-diagnostics dt{color:#a9a593;overflow-wrap:anywhere}
.menu-settings-diagnostics dd{margin:0;text-align:right;color:#e3d4ac;overflow-wrap:anywhere}
.menu-preview .menu-settings-export{width:100%;min-height:44px;padding:10px 12px;color:#e3c57d;background:#201c12}
@media(max-width:360px){.menu-settings-mode-group{grid-template-columns:1fr}.menu-settings-option{font-size:14px;padding:8px 10px}}

/* Preview toolbar keeps its original HUD; default placement is scoped below. */
.app-shell{--fps-surface-width:402px}
.app-shell.menu-preview[data-theme=v23]{--fps-surface-width:480px}
.fps-hud{position:fixed;z-index:30;top:calc(var(--mori-safe-top,0px) + 3px);right:max(calc((100vw - var(--fps-surface-width,402px))/2 + 6px),calc(var(--mori-safe-right,0px) + 6px));min-width:5.5ch;padding:1px 3px;border-radius:2px;pointer-events:none;user-select:none;white-space:nowrap;text-align:right;font:10px/12px ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums;color:#c5b37d;background:#080908b8;contain:layout paint style}
.fps-hud{display:flex;align-items:center;gap:7px;max-width:calc(100vw - 12px)}
.fps-hud-details{display:flex;gap:7px;font-size:9px;line-height:12px;color:#aba28d}
.fps-hud-rate{flex:none}
.fps-hud-compact{display:none}

/* Telegram fullscreen owns the outer insets; reserve them once in app-shell. */
.app-shell.menu-preview[data-theme=v23]{--v23-page-height:calc(var(--tg-viewport-stable-height,100svh) - var(--mori-safe-top,0px) - var(--mori-safe-bottom,0px))}
/* Only the non-interactive FPS occupies the gap in Telegram's control row.
   The system inset remains protected; missing content inset falls below it. */
[data-telegram-fullscreen=true]:not([data-telegram-layout=desktop]) .fps-hud{left:calc((100vw + var(--mori-safe-left,0px) - var(--mori-safe-right,0px))/2);right:auto;transform:translate(-50%,-50%);top:calc(max(env(safe-area-inset-top,0px),var(--tg-safe-top,var(--tg-safe-area-inset-top,0px))) + max(11px,calc(var(--tg-content-safe-top,var(--tg-content-safe-area-inset-top,0px))/2)));max-width:min(144px,calc(100vw - var(--mori-safe-left,0px) - var(--mori-safe-right,0px) - 256px))}
[data-telegram-fullscreen=true]:not([data-telegram-layout=desktop]) .fps-hud-details{display:none}
[data-telegram-fullscreen=true]:not([data-telegram-layout=desktop]) .fps-hud-rate{display:none}
[data-telegram-fullscreen=true]:not([data-telegram-layout=desktop]) .fps-hud-compact{display:block;flex:none}
/* #166: Desktop default FPS follows the actual panel; phone/preview keep their HUD. */
[data-telegram-layout=desktop] .app-shell[data-menu-mode=default]{position:relative}
[data-telegram-layout=desktop] .app-shell[data-menu-mode=default]>.fps-hud{position:absolute;top:calc(var(--mori-safe-top,0px) + 1px);left:calc((100% + var(--mori-safe-left,0px) - var(--mori-safe-right,0px))/2);right:auto;transform:translateX(-50%);text-align:center;max-width:calc(100% - var(--mori-safe-left,0px) - var(--mori-safe-right,0px) - 12px)}
.menu-settings-dialog{position:fixed;inset:var(--mori-safe-top,0px) var(--mori-safe-right,0px) var(--mori-safe-bottom,0px) var(--mori-safe-left,0px);max-height:calc(var(--tg-viewport-height,100svh) - var(--mori-safe-top,0px) - var(--mori-safe-bottom,0px) - 24px);max-width:calc(100vw - var(--mori-safe-left,0px) - var(--mori-safe-right,0px) - 24px)}
.menu-preview[data-theme=v23] .v23-home{--footer-height:calc(39cqw + var(--v23-nav-height))}
.menu-preview[data-theme=v23] .v23-inventory .inventory-header{padding-top:8px}
.menu-preview[data-theme=v23] .v23-inventory .bottom-nav{min-height:15cqw;padding-bottom:1cqw}
[data-telegram-fullscreen=true]:not([data-telegram-layout=desktop]) .menu-preview[data-theme=v23] .v23-inventory .inventory-header{padding-top:26px}

/* Fullscreen artwork owns the whole scene; safe insets belong to controls. */
[data-telegram-fullscreen=true]:not([data-telegram-layout=desktop]) .app-shell.menu-preview[data-theme=v23][data-menu-mode=default]:has(>.menu-body[data-v23-surface=home]),
[data-telegram-fullscreen=true]:not([data-telegram-layout=desktop]) .app-shell.menu-preview[data-theme=v23][data-menu-mode=default]:has(>.menu-body[data-v23-surface=inventory]){padding:0;position:relative;isolation:isolate;--v23-page-height:var(--tg-viewport-stable-height,100svh)}
[data-telegram-fullscreen=true]:not([data-telegram-layout=desktop]) .app-shell.menu-preview[data-theme=v23][data-menu-mode=default]:has(>.menu-body[data-v23-surface=home])::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:#070706 var(--v23-home-background,url("assets/menu/designer-v23/images/background-crowns-f06496186f2d.webp")) center 25%/cover;filter:brightness(.68)}
[data-telegram-fullscreen=true]:not([data-telegram-layout=desktop]) .app-shell.menu-preview[data-theme=v23][data-menu-mode=default]:has(>.menu-body[data-v23-surface=inventory])::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:#070706 url("assets/menu/designer-v23/images/background-crowns-f06496186f2d.webp") center 25%/cover;filter:brightness(.68)}
[data-telegram-fullscreen=true]:not([data-telegram-layout=desktop]) .menu-preview[data-theme=v23][data-menu-mode=default] .v23-inventory{padding:var(--mori-safe-top) var(--mori-safe-right) var(--mori-safe-bottom) var(--mori-safe-left)}

/* Desktop uses the available width up to the existing 480px panel limit.
   Short windows scroll vertically; their height must not create side gutters.
   Clamp stale SDK heights to the actual window and keep one safe-area owner. */
[data-telegram-layout=desktop] .app-shell.menu-preview[data-theme=v23][data-menu-mode=default]:has(>.menu-body[data-v23-surface=home]),
[data-telegram-layout=desktop] .app-shell.menu-preview[data-theme=v23][data-menu-mode=default]:has(>.menu-body[data-v23-surface=inventory]){
 --v23-desktop-height:calc(min(var(--tg-viewport-stable-height,100dvh),100dvh) - var(--mori-safe-top,0px) - var(--mori-safe-bottom,0px));
 --v23-page-height:max(576px,var(--v23-desktop-height));
 max-width:480px;
 height:min(var(--tg-viewport-height,100dvh),100dvh);
}
[data-telegram-layout=desktop] .menu-preview[data-theme=v23][data-menu-mode=default] .v23-home{min-height:576px}
[data-telegram-layout=desktop] .menu-preview[data-theme=v23][data-menu-mode=default] .v23-home h1{font-size:max(16px,4.3cqw)}
[data-telegram-layout=desktop] .menu-settings-dialog{max-height:calc(min(var(--tg-viewport-height,100dvh),100dvh) - var(--mori-safe-top,0px) - var(--mori-safe-bottom,0px) - 24px)}

/* #166 supersedes #144: the scene itself owns all artwork within its panel.
   A 16px HUD lane clips scrolling content below the badge. Home already has this
   space above identity: compensate its origin to preserve scene/hero/nav geometry.
   Detailed interval diagnostics remain available in Settings. */
[data-telegram-layout=desktop] .app-shell.menu-preview[data-theme=v23][data-menu-mode=default]>.menu-body{padding-top:16px}
[data-telegram-layout=desktop] .menu-preview[data-theme=v23][data-menu-mode=default] .v23-home{margin-top:-16px}
[data-telegram-layout=desktop] .menu-preview[data-theme=v23][data-menu-mode=default] .v23-home .home-settings{top:0;transform:none}
[data-telegram-layout=desktop] .menu-preview[data-theme=v23][data-menu-mode=default]>.fps-hud .fps-hud-details{display:none}

/* #130: one footer, measured in its own container, independent of Profile padding.
   Home 6d02345 supplies the artwork, geometry and interaction states. Shell still
   owns safe insets; this footer does not reserve them a second time. */
.v23-bottom-nav-host{position:relative;width:100%;padding:0;border:0;flex:none;container-type:inline-size;color:#d6d6d3;font:14px/normal "V23 Roboto Condensed","Arial Narrow",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.v23-bottom-nav-host,.v23-bottom-nav-host *,.v23-bottom-nav-host *:before,.v23-bottom-nav-host *:after{box-sizing:border-box}
.v23-bottom-nav-host .v23-nav-symbols{position:absolute;width:0;height:0;overflow:hidden}
.v23-bottom-nav-host .v23-nav-scrollbar-probe{position:absolute;width:100px;height:0;overflow-y:scroll;scrollbar-width:thin;visibility:hidden;pointer-events:none}
.v23-bottom-nav-host .bottom-nav{position:relative;width:100%;height:max(15cqw,62px);display:flex;align-items:flex-start;justify-content:space-around;padding:2cqw 1.5cqw 1cqw;background:#000;flex:none}
.v23-bottom-nav-host .nav-border{position:absolute;top:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,#53544c,#53544c88,#53544c)}
.v23-bottom-nav-host .bottom-nav[data-home-current=true] .nav-border:after{content:"";position:absolute;left:5%;width:14%;height:1px;background:#d7b76c;box-shadow:0 0 6px #d7b76c77}
.v23-bottom-nav-host .bottom-nav .nav-item{appearance:none;width:20%;min-width:0;max-width:none;min-height:44px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;opacity:1;color:#858784;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1cqw;position:relative;font:inherit;line-height:normal;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.v23-bottom-nav-host .nav-item svg{width:6.4cqw;height:6.4cqw}
.v23-bottom-nav-host .nav-item span{font-size:clamp(10px,2.22cqw,11px);font-weight:400;line-height:1.15;letter-spacing:.025em}
.v23-bottom-nav-host .bottom-nav .nav-item.active{color:#eacb81}
.v23-bottom-nav-host .nav-item.active span{font-weight:600}
.v23-bottom-nav-host .nav-item.active svg{filter:drop-shadow(0 0 6px #eacb8144)}
.v23-bottom-nav-host .nav-item.active:after{content:"";position:absolute;bottom:-1.5cqw;height:1px;width:4.7cqw;background:#d7b76c;box-shadow:0 0 5px #d7b76c}
.v23-bottom-nav-host .bottom-nav .nav-item.is-pressed{color:#eacb81}
.v23-bottom-nav-host .bottom-nav .nav-item:disabled{cursor:default;color:#858784}
.v23-bottom-nav-host .bottom-nav .nav-item:focus-visible{outline:2px solid #eacb81;outline-offset:4px}
.v23-profile>.v23-bottom-nav-host{width:calc(100% + 28px);align-self:center;margin:auto 0 0}
/* Match Home's existing border on wide viewports without changing Profile. */
@media(min-width:700px){.v23-profile>.v23-bottom-nav-host{width:calc(100% + 26px)}}
/* Default Profile keeps the same menu visible while its existing body scrolls.
   Only the footer is bounded like Home; the Profile body stays at its old width.
   Shell reserves safe-bottom, Profile reserves the actual footer above it. */
.menu-preview[data-theme=v23][data-menu-mode=default] .v23-profile{--v23-footer-home-border:0px;--v23-footer-home-min-height:164vw;--v23-footer-reference-height:calc(var(--tg-viewport-stable-height,100svh) - var(--mori-safe-top,0px) - var(--mori-safe-bottom,0px));--v23-footer-available-height:calc(var(--tg-viewport-height,100dvh) - var(--mori-safe-top,0px) - var(--mori-safe-bottom,0px));--v23-footer-reference-width:calc(min(480px,100vw) - var(--mori-safe-left,0px) - var(--mori-safe-right,0px) - var(--v23-footer-home-border));--v23-profile-footer-height:max(62px,calc(var(--v23-footer-reference-width) * .15));padding-bottom:calc(var(--v23-profile-footer-height) + max(0px,calc(var(--tg-viewport-height,100dvh) - 100dvh)))}
@media(min-width:480px){.menu-preview[data-theme=v23][data-menu-mode=default] .v23-profile{--v23-footer-home-min-height:864px}}
@media(min-width:700px){.menu-preview[data-theme=v23][data-menu-mode=default] .v23-profile{--v23-footer-home-border:2px}}
.menu-preview[data-theme=v23][data-menu-mode=default] .v23-profile>.v23-bottom-nav-host{--v23-footer-home-gutter:clamp(0px,calc((max(var(--v23-footer-home-min-height),var(--v23-footer-reference-height)) - var(--v23-footer-available-height)) * 1000),var(--v23-footer-scrollbar-width,0px));position:fixed;z-index:9;left:calc((100vw + var(--mori-safe-left,0px) - var(--mori-safe-right,0px) - var(--v23-footer-home-gutter)) / 2);bottom:calc(100dvh - min(var(--tg-viewport-height,100dvh),100dvh) + var(--mori-safe-bottom,0px));width:calc(var(--v23-footer-reference-width) - var(--v23-footer-home-gutter));margin:0;transform:translateX(-50%)}
[data-telegram-fullscreen=true]:not([data-telegram-layout=desktop]) .menu-preview[data-theme=v23][data-menu-mode=default] .v23-profile{--v23-footer-reference-height:var(--tg-viewport-stable-height,100svh);--v23-footer-available-height:var(--tg-viewport-height,100dvh)}
/* Follow Home's existing Desktop reference and minimum; current/stable can differ.
   Safe areas remain Shell-owned and the body keeps its previous width. */
[data-telegram-layout=desktop] .menu-preview[data-theme=v23][data-menu-mode=default] .v23-profile{--v23-footer-home-min-height:576px;--v23-footer-desktop-height:calc(min(var(--tg-viewport-stable-height,100dvh),100dvh) - var(--mori-safe-top,0px) - var(--mori-safe-bottom,0px));--v23-footer-reference-height:var(--v23-footer-desktop-height);--v23-footer-available-height:calc(min(var(--tg-viewport-height,100dvh),100dvh) - var(--mori-safe-top,0px) - var(--mori-safe-bottom,0px));--v23-footer-reference-width:calc(min(100vw,480px) - var(--mori-safe-left,0px) - var(--mori-safe-right,0px) - var(--v23-footer-home-border))}
