#menu.reference-menu { padding: 0; background: #071421; overflow: hidden; display: block; }
#menu.reference-menu[hidden] { display: none !important; }
#menu.reference-menu::before, #menu.reference-menu::after,
#menu.reference-menu > .menu-content, #menu.reference-menu > .menu-header,
#menu.reference-menu > .menu-footer { display: none !important; }
#menu .menu-reference-stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(100vw, calc(100vh * 1536 / 687)); width: min(100vw, calc(100dvh * 1536 / 687)); height: min(100vh, calc(100vw * 687 / 1536)); height: min(100dvh, calc(100vw * 687 / 1536)); aspect-ratio: 1536 / 687; }
#menu .menu-reference-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; pointer-events: none; user-select: none; }
#menu .menu-reference-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); }
#menu .ref-hotspot { position: absolute !important; display: block !important; box-sizing: border-box; margin: 0 !important; padding: 0 !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; border: 0 !important; border-radius: 10px; color: transparent !important; font-size: 0 !important; background: transparent !important; box-shadow: none !important; transform: none !important; opacity: 1 !important; filter: none !important; text-shadow: none !important; cursor: pointer; touch-action: manipulation; }
#menu .ref-hotspot::before, #menu .ref-hotspot::after, #menu .ref-hotspot > * { display: none !important; }
#menu .ref-hotspot:focus-visible { outline: 2px solid #effaff; outline-offset: 3px; box-shadow: 0 0 18px #b2e5ff77 !important; }
#menu .ref-hotspot:not(:disabled):active { background-color: #d7efff20 !important; }
#menu .ref-hotspot:disabled { cursor: wait; }
#menu .ref-hotspot:disabled::before { content: ''; position: absolute; inset: 0; display: block !important; border-radius: inherit; background: #6c747cac; backdrop-filter: grayscale(1); -webkit-backdrop-filter: grayscale(1); mask: none !important; -webkit-mask: none !important; pointer-events: none; }
#menu .ref-hotspot[data-loading-percent]::before { background: linear-gradient(#e1f2ff55,#e1f2ff55) left / var(--load-progress,0%) 100% no-repeat, #6c747cac; }
#menu .ref-hotspot[data-loading-percent]::after { content: attr(data-loading-percent); position: absolute; inset: 0 3.5% 0 auto; width: 20%; display: flex !important; align-items: center; justify-content: flex-end; color: #fff; text-shadow: 0 1px 3px #17202d; font: 600 clamp(13px,1.45vw,22px)/1.2 system-ui,sans-serif; font-variant-numeric: tabular-nums; pointer-events: none; }
#menu .reference-presence { position: absolute; left: 89.7%; top: 91.8%; width: 8.5%; height: 3.5%; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; font: 500 clamp(6px, .85vw, 13px)/1 system-ui,sans-serif; color: #dfecf7; background: #1b334b; border: 0; border-radius: 0; }
#menu .reference-menu-status { position: absolute; z-index: 3; left: 50%; bottom: 3%; top: auto; transform: translateX(-50%); width: min(360px,78%); box-sizing: border-box; margin: 0; padding: 10px 14px; background: #092031ed; color: #e5f5fc; font-size: 14px; border: 1px solid #98c9dc55; border-radius: 8px; }
#menu .reference-menu-status[hidden] { display: none !important; }
#menu #load-error { position: absolute; bottom: 15%; left: 4%; max-width: 80%; z-index: 5; background: #271d29; }
/* Portrait keeps readable controls while retaining the supplied art and typography. */
@media (orientation: portrait) {
 #menu .menu-reference-stage { width: 100%; height: 100%; aspect-ratio: auto; }
 #menu .menu-reference-art { object-fit: cover; object-position: 66% center; }
 #menu .menu-reference-stage::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#0614218c,#06142110); pointer-events: none; }
 #menu .menu-reference-title { clip-path: none; top: 11%; left: 5%; width: 90%; height: auto; aspect-ratio: 460/207; font-size: 0; background: url('assets/menu-night-v133.webp?v=f2819f8aea4385b307c1') 2.32% 14.17% / 333.91% 331.88%; z-index: 1; }
 #menu .ref-hotspot { z-index: 2; }
 #menu .ref-start, #menu .ref-coop, #menu .ref-versus, #menu .ref-settings { left: 7% !important; width: 86% !important; height: 7.8% !important; max-height: 58px; min-height: 44px !important; background-image: url('assets/menu-night-v133.webp?v=f2819f8aea4385b307c1') !important; background-size: var(--art-size) !important; background-position: var(--art-position) !important; }
 #menu .ref-start { top: 39% !important; } #menu .ref-coop { top: 48% !important; }
 #menu .ref-versus { top: 57% !important; } #menu .ref-settings { top: 66% !important; }
 #menu .ref-journal { left: 7% !important; top: 77% !important; width: 42% !important; height: 8% !important; background-image: url('assets/menu-night-v133.webp?v=f2819f8aea4385b307c1') !important; background-size: var(--art-size) !important; background-position: var(--art-position) !important; }
 #menu .ref-fullscreen, #menu .ref-quick-settings, #menu .ref-rankings { top: max(12px,env(safe-area-inset-top)) !important; width: 44px !important; height: 44px !important; background-image: url('assets/menu-night-v133.webp?v=f2819f8aea4385b307c1') !important; background-size: var(--art-size) !important; background-position: var(--art-position) !important; }
 #menu .ref-fullscreen { left: calc(100% - 160px) !important; } #menu .ref-quick-settings { left: calc(100% - 108px) !important; } #menu .ref-rankings { left: calc(100% - 56px) !important; }
 #menu .ref-phone { left: calc(100% - 148px) !important; top: 68px !important; width: 136px !important; height: 52px !important; background-image: url('assets/menu-night-v133.webp?v=f2819f8aea4385b307c1') !important; background-size: var(--art-size) !important; background-position: var(--art-position) !important; }
 #menu .reference-presence { z-index: 2; left: auto; right: 5%; top: auto; bottom: max(14px,env(safe-area-inset-bottom)); width: auto; height: auto; padding: 9px 14px; font-size: 12px; border-radius: 8px; }
 #menu .reference-menu-status { bottom: 9%; }
}

.startup-heading { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
#startup-count { color: #afd8e7; font-variant-numeric: tabular-nums; white-space: nowrap; }
#startup-progress, #asset-loading-progress { display: block; width: 100%; height: 8px; margin: 9px 0 0; border: 0; border-radius: 8px; overflow: hidden; accent-color: #b3e3f9; background: #071923; }
#startup-progress::-webkit-progress-bar, #asset-loading-progress::-webkit-progress-bar { background: #071923; border-radius: 8px; }
#startup-progress::-webkit-progress-value, #asset-loading-progress::-webkit-progress-value { background: #b3e3f9; border-radius: 8px; }
#startup-note:not(:empty) { margin-top: 7px; color: #d4dbe1; }
#startup-retry { margin-top: 8px; min-height: 44px; padding: 6px 18px; color: #173348; background: #c8e9f7; }
#asset-loading-percent { color: #c8edff; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 18px; }
#asset-loading-detail { min-height: 1.3em; margin: 7px 0; color: #c5dbe5; font-size: 14px; }
.menu-loading-actions { display: flex; justify-content: flex-end; gap: 8px; }
#asset-loading button { min-height: 44px; padding: 6px 14px; color: #e5f5fc; border: 1px solid #98c9dc55; border-radius: 7px; background: #173348; font-size: 14px; }
#asset-loading #asset-loading-retry { color: #173348; background: #c8e9f7; }

#menu-atmosphere-v110 {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;}
#menu .menu-reference-stage:not(.menu-visual-ready) > .menu-reference-art,
#menu .menu-reference-stage:not(.menu-visual-ready) > #menu-atmosphere-v110,
#menu .menu-reference-stage:not(.menu-visual-ready) > .ref-hotspot,
#menu .menu-reference-stage:not(.menu-visual-ready) > .menu-reference-title,
#menu .menu-reference-stage:not(.menu-visual-ready) > .menu-silhouette-v111,
#menu .menu-reference-stage:not(.menu-visual-ready) > .reference-presence {visibility:hidden;}
#menu .ref-hotspot {transition:box-shadow .2s ease,background-color .2s ease;}
#menu .ref-hotspot:not(:disabled):hover {background-color:#e9f7ff0b!important;box-shadow:inset 0 0 0 1px #e5f5ff44,0 0 16px #ccecff19!important;}
#menu .ref-journal {overflow:hidden;isolation:isolate;}
.test-rewards-v110 .test-reward-status{grid-column:1/-1;color:#bfdae7;font-size:12px;line-height:1.6;}
@media (orientation:portrait){#menu-atmosphere-v110{object-fit:cover;object-position:66% center;}}
@media(prefers-reduced-motion:reduce){#menu .ref-hotspot{transition:none;}}

#menu .menu-silhouette-v111{position:absolute;z-index:3;left:16.4%;top:81%;display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 13px;border:1px solid #accadc4a;border-radius:11px;background:linear-gradient(135deg,#1b3043d9,#102333cf);box-shadow:inset 0 1px #e3f4ff0d,0 5px 18px #03111d26;color:#dcebf5;font:500 clamp(12px,1vw,15px)/1.2 system-ui,sans-serif;white-space:nowrap;cursor:pointer;touch-action:manipulation;}
#menu .menu-silhouette-v111 svg{width:18px;height:18px;flex:none;opacity:.8;}
#menu .menu-silhouette-state{font-size:11px;padding:3px 6px;border-radius:5px;background:#c4e0f013;color:#adc5d6;}
#menu .menu-silhouette-v111[aria-pressed="true"]{border-color:#c4e0ef80;background:linear-gradient(135deg,#294458df,#102333df);}
#menu .menu-silhouette-v111[aria-pressed="true"] .menu-silhouette-state{color:#f0f8fd;background:#b8dcee26;}
#menu .menu-silhouette-v111:hover{border-color:#d0e9f7a0;}
#menu .menu-silhouette-v111:focus-visible{outline:2px solid #e8f6ff;outline-offset:4px;}
@media(orientation:landscape) and (max-width:900px){#menu .menu-silhouette-v111{left:30%;top:auto;bottom:6%;padding:7px 10px;gap:6px;font-size:12px;}}
@media(orientation:portrait){#menu .menu-silhouette-v111{left:auto;right:7%;top:77%;height:8%;max-height:58px;padding:8px 10px;font-size:12px;}}

/* V126: keep both seated actors and the new right-tree position in the portrait
   scene. The original image and animated canvas share one undistorted crop;
   controls retain their existing independent portrait layout. */
@media (orientation:portrait){
 #menu .menu-reference-stage{background:linear-gradient(#0b1c32,#122c43 52%,#071421);}
 #menu .menu-reference-art,#menu #menu-atmosphere-v110{top:auto;bottom:0;height:min(52dvh,calc(100vw * 687 / 720));object-fit:cover;object-position:77% center;mask-image:linear-gradient(transparent 22%,#000 40%);-webkit-mask-image:linear-gradient(transparent 22%,#000 40%);}
 #menu .menu-reference-stage::after{background:linear-gradient(#0b1c3200 43%,#0b1c3266 49%,#06142100 65%);}
 #menu .reference-presence{right:0;bottom:0;min-height:44px;box-sizing:border-box;border-radius:8px 0 0 0;}
}
#menu .menu-motion-v126{position:absolute;z-index:3;left:30%;top:81%;min-height:44px;padding:8px 13px;border:1px solid #accadc4a;border-radius:11px;background:linear-gradient(135deg,#1b3043ed,#102333e8);color:#dcebf5;font:500 clamp(12px,1vw,15px)/1.2 system-ui,sans-serif;white-space:nowrap;cursor:pointer;touch-action:manipulation;}
#menu .menu-motion-v126:focus-visible{outline:2px solid #e8f6ff;outline-offset:4px;}
#menu .menu-motion-v126[aria-pressed="false"]{color:#a8bdca;}
#menu .menu-reference-stage:not(.menu-visual-ready)>.menu-motion-v126{visibility:hidden;}
@media(orientation:landscape) and (max-width:900px){#menu .menu-motion-v126{left:50%;top:auto;bottom:6%;padding:7px 10px;font-size:12px;}}
@media(orientation:portrait){#menu .menu-motion-v126{left:7%;top:auto;bottom:max(14px,env(safe-area-inset-bottom));font-size:12px;}}