/* A room to explore, using the existing lightweight scene and idle crew atlas. */
.menu-panel .rooftop-heading{align-items:center;margin-bottom:16px}
.rooftop-heading .career-count{font-size:32px;flex-shrink:0}
.rooftop-heading .career-count small{font-size:9px}
.rooftop-showcase{overflow:hidden;border:1px solid #6b5942;border-radius:20px;background:#0e111a;box-shadow:0 12px 40px #0003}
.rooftop-topline{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:8px 14px;background:linear-gradient(110deg,#27221c,#12151e);border-bottom:1px solid #5c4b373b}
.rooftop-topline>span{font-size:10px;font-weight:700;letter-spacing:1.1px;line-height:1.5;color:#e2c79b}
.rooftop-explore{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;flex-shrink:0;padding:8px 13px;border:1px solid #8c714a;border-radius:10px;background:#e7bd7520;color:#ffe1a1;font-family:inherit;font-size:12px;font-weight:700;line-height:1.3;cursor:pointer}
.rooftop-explore svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}
.rooftop-panorama{overflow-x:auto;overflow-y:hidden;touch-action:pan-x pan-y;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#786244 #12151e}
.rooftop-stage{position:relative;width:100%;aspect-ratio:1000/520;isolation:isolate}
.rooftop-stage>svg{display:block;width:100%;height:auto}
.rooftop-stage>.hideout-idle{filter:drop-shadow(5px 4px 3px #0006)}
.rooftop-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 15px;background:#12151c;border-top:1px solid #ffffff0b;color:#b9b8c3;font-size:11px;line-height:1.4}
.rooftop-caption strong{min-width:0;overflow-wrap:anywhere;color:#eee8db;font-size:12px;font-weight:600}
.rooftop-caption span{color:#c2ac87}
.rooftop-project-choice{display:block;margin:24px 0 12px}
.rooftop-project-choice>span{display:flex;justify-content:space-between;font-size:12px;font-weight:650;letter-spacing:.3px;color:#e9dfce;margin-bottom:10px}
.rooftop-project-choice small{color:#96909e;font-size:11px;font-weight:400}
.rooftop-project-choice select{width:100%;min-height:52px;padding:12px 14px;border:1px solid #5c4d3a;border-radius:12px;color:#f3dec0;background:#1d1b1c;font-family:inherit;font-size:14px;font-weight:600;line-height:1.4;color-scheme:dark}
.rooftop-project-choice option{background:#18191e;color:#f0e6da}
#career-hideout .hideout-projects{margin-top:0}
#career-hideout .hideout-crew-selector{gap:6px;margin:12px 0 0}
#career-hideout .hideout-crew-selector button{flex:1;max-width:150px;min-width:0;padding:8px 4px;font-size:12px}
.rooftop-story{margin-top:20px;border-top:1px solid #2a2c35}
.rooftop-story>summary{display:flex;align-items:center;justify-content:space-between;min-height:50px;gap:12px;color:#d6c7a7;font-size:13px;cursor:pointer;list-style:none}
.rooftop-story>summary:after{content:'+';font-size:21px}.rooftop-story[open]>summary:after{content:'−'}
.rooftop-story .hideout-story-strip{margin:0}
.rooftop-explore:focus-visible,.rooftop-project-choice select:focus-visible,.rooftop-panorama:focus-visible,.rooftop-story>summary:focus-visible{outline:2px solid #ffe2a1;outline-offset:3px}
dialog.rooftop-viewer{width:calc(100vw - 28px);max-width:1200px;height:calc(100dvh - 28px);max-height:calc(100dvh - 28px);box-sizing:border-box;margin:auto;padding:0;border:1px solid #786044;border-radius:20px;background:#0b0f18;color:#eee9e4;overflow:auto;overscroll-behavior:contain}
dialog.rooftop-viewer[open]{display:flex;flex-direction:column}
.rooftop-viewer::backdrop{background:#02040bf2;backdrop-filter:none}
.rooftop-viewer-head{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:20px 22px 14px;flex-shrink:0}
.rooftop-viewer-head>div{min-width:0}.rooftop-viewer-head .section-kicker{font-size:10px;letter-spacing:1.5px;color:#e0b771}
.rooftop-viewer-head h2{margin:7px 0 0;font-size:clamp(21px,3vw,31px);letter-spacing:-.6px;line-height:1.15}
.rooftop-viewer-head .icon-button{flex-shrink:0;width:44px;height:44px;min-height:44px;border-radius:12px;font-size:26px}
.rooftop-viewer-tools{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:0 22px 16px;flex-shrink:0}
.rooftop-viewer-tools>div{display:flex;gap:4px;padding:3px;border:1px solid #35323a;border-radius:11px;background:#0b0c10}
.rooftop-viewer-tools button,.rooftop-viewer-foot button{min-height:44px;border:1px solid transparent;border-radius:8px;background:transparent;color:#a9a5b2;padding:8px 16px;font-family:inherit;font-size:13px;cursor:pointer}
.rooftop-viewer-tools button[aria-pressed=true]{background:#332a1d;border-color:#927544;color:#ffe2ac}
.rooftop-viewer-tools>span{font-size:11px;color:#b1a8a8}
.rooftop-viewer-panorama{flex:1;min-height:140px;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y;scrollbar-width:thin;scrollbar-color:#8a6c42 #10141e;border-block:1px solid #453b2d;background:radial-gradient(ellipse at center,#232635,#0a0f19)}
.rooftop-surface{width:max(100%,var(--rooftop-width,100%));height:max(100%,var(--rooftop-height,100%));display:grid;place-items:center}
.rooftop-surface>.rooftop-stage{width:var(--rooftop-width,100%);height:var(--rooftop-height,auto)}
.rooftop-viewer-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 22px;flex-shrink:0}
.rooftop-viewer-foot button{width:48px;flex-shrink:0;border:1px solid #63513a;background:#211d18;color:#edd2a4;font-size:22px}
.rooftop-viewer-foot p{font-size:13px;color:#e2d3b9;line-height:1.5;text-align:center;margin:0}
.rooftop-viewer-foot small{display:block;color:#9d9aaa;font-size:11px}
.rooftop-viewer :focus-visible{outline:2px solid #ffe0a2;outline-offset:-3px}
@media(max-width:680px){
 .rooftop-panorama>.rooftop-stage{width:max(100%,620px)}
 .rooftop-showcase{border-radius:15px}.rooftop-topline{padding:6px 11px;gap:8px}.rooftop-topline>span{font-size:8px;letter-spacing:.8px;max-width:120px}
 .rooftop-explore{font-size:11px;padding:8px 11px}.rooftop-caption{padding:10px 12px;font-size:10px}.rooftop-caption strong{font-size:11px}
 .menu-panel .rooftop-heading h2{font-size:28px}.menu-panel .rooftop-heading .section-kicker{font-size:8px;letter-spacing:1px}
 .rooftop-heading .career-count{font-size:28px}.rooftop-heading .career-count small{font-size:8px}
 dialog.rooftop-viewer{width:100%;height:100dvh;max-height:100dvh;max-width:100%;border-radius:0;border:0;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
 .rooftop-viewer-head{padding:16px 14px 12px}.rooftop-viewer-tools{padding:0 14px 12px;gap:7px}.rooftop-viewer-tools>span{font-size:10px}
 .rooftop-viewer-tools button{font-size:12px;padding:8px 12px}.rooftop-viewer-foot{padding:10px 14px}
}
@media(max-height:480px){.rooftop-viewer-head{padding:8px 14px}.rooftop-viewer-head h2{font-size:20px;margin-top:3px}.rooftop-viewer-head .section-kicker{font-size:8px}.rooftop-viewer-tools{padding:0 14px 6px}.rooftop-viewer-foot{padding:6px 14px}.rooftop-viewer-foot small{display:none}}
/* Collection edition: artwork and materials, with native disclosure semantics. */
.rooftop-stage>.hideout-idle{right:20%;bottom:19%;height:40%;filter:drop-shadow(6px 6px 4px #0009)}
.visual-picker{min-width:0;border:1px solid #45414a;border-radius:16px;background:linear-gradient(125deg,#22212b,#13151c);overflow:hidden}
.visual-picker>summary{display:flex;align-items:center;gap:14px;min-height:80px;padding:12px 18px;list-style:none;cursor:pointer;box-sizing:border-box}
.visual-picker>summary::-webkit-details-marker{display:none}
.visual-picker>summary>span:not(.look-swatch){flex:1;min-width:0}
.visual-picker>summary small{display:block;font-size:10px;color:#afa6b5;letter-spacing:1px;line-height:1.6}
.visual-picker>summary strong{display:block;font-size:16px;color:#f1e9dc;line-height:1.5}
.visual-picker>summary>b{display:grid;place-items:center;width:32px;height:32px;border:1px solid #615342;border-radius:50%;font-size:19px;color:#e3be7c}
.visual-picker[open]>summary{border-bottom:1px solid #45414a;background:#b98b3820}
.visual-picker[open]>summary>b{transform:rotate(180deg)}
.visual-picker summary:focus-visible,.visual-picker button:focus-visible{outline:2px solid #ffe0a2;outline-offset:-4px}
.career-cosmetics{align-items:start;gap:16px}
.look-swatch{display:grid;place-items:center;flex:none;width:60px;height:58px;background:radial-gradient(ellipse at center,var(--look-color),#111a24 70%);border-radius:12px;overflow:hidden}
.look-swatch svg{width:54px;height:46px;fill:#1e2631;stroke:var(--look-color);stroke-width:2.2;filter:drop-shadow(0 1px 3px #000)}
.look-trail svg{fill:none;stroke-width:3;stroke-linecap:round}
.look-seam{opacity:.6;stroke-width:1}
.look-options{display:grid;gap:6px;padding:10px}
.look-options button{display:flex;align-items:center;gap:12px;min-height:76px;padding:9px 12px;text-align:left;border:1px solid transparent;border-radius:12px;background:#11141c;color:#eee7db;font-family:inherit;cursor:pointer}
.look-options button>span:nth-child(2){flex:1}.look-options strong{display:block;font-size:13px}.look-options small{display:block;color:#a9a4b2;font-size:11px;line-height:1.5;margin-top:5px}.look-options i{font-size:10px;color:#dfbf83;font-style:normal}
.look-options button[aria-pressed=true]{border-color:#d4b177;background:#5b48242e}.look-options button:disabled{opacity:.55;cursor:default}
.rooftop-project-choice{margin:24px 0 16px}.rooftop-project-choice>summary>img{width:64px;height:64px;object-fit:contain}
.project-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px}
.project-choices button{min-width:0;min-height:160px;padding:12px 8px;border:1px solid #30313d;border-radius:12px;background:radial-gradient(ellipse at 50% 25%,#353046,#15171f 80%);color:#f0e5d2;font-family:inherit;cursor:pointer}
.project-choices button[aria-pressed=true]{border-color:#e3b873;box-shadow:inset 0 0 0 1px #e3b873}
.project-choices button img{display:block;width:100%;height:100px;object-fit:contain;margin-bottom:10px;filter:drop-shadow(0 8px 5px #0008)}
.project-choices strong{display:block;font-size:12px;line-height:1.4}.project-choices small{display:block;font-size:11px;color:#cab48d;margin-top:6px}
#career-hideout .project-feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:0;padding:0;overflow:hidden;border:1px solid #64543b;background:linear-gradient(125deg,#25222b,#14151b);border-radius:20px}
.project-visual{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:28px;min-width:0;background:radial-gradient(ellipse at 50% 55%,#84614d55,#141621 73%)}
.project-visual:after{content:'';height:18px;position:absolute;left:15%;right:15%;bottom:16%;border-radius:50%;background:#080b1566;z-index:0}
.project-visual>img{position:relative;z-index:1;width:100%;height:280px;object-fit:contain;filter:drop-shadow(4px 12px 8px #0006)}
.project-visual .project-edition{align-self:flex-start;font-size:9px;letter-spacing:1.7px;font-weight:700;color:#cfb581}.project-visual>small{position:relative;z-index:1;display:block;font-size:11px;text-align:center;color:#c2b6a8;line-height:1.6}
.project-feature-copy{padding:30px;min-width:0}.project-feature-copy h3{margin:12px 0;font-size:clamp(24px,3vw,32px);line-height:1.1;letter-spacing:-.5px}.project-feature-copy p{font-size:13px;line-height:1.7;color:#b9b3c1;margin:14px 0}
#career-hideout .project-price{display:block;font-size:23px;color:#ffe0a4;margin:18px 0;line-height:1.2}.project-requirements{display:grid;gap:14px;margin:22px 0}
.project-requirements label{font-size:10px;color:#b5afbb}.project-requirements b{float:right;color:#e6dac5;font-size:10px;font-weight:500}.project-requirements .career-meter{height:4px;margin-top:8px}
#career-hideout .project-actions{display:grid;gap:8px}.project-actions>button{width:100%;min-height:46px;margin:0;font-size:12px}
@media(max-width:680px){.career-cosmetics{grid-template-columns:1fr}.visual-picker>summary{gap:10px;padding:10px 12px}.visual-picker>summary strong{font-size:14px}.visual-picker>summary small{font-size:8px}.project-choices{grid-template-columns:repeat(2,minmax(0,1fr));padding:10px;gap:8px}#career-hideout .project-feature{grid-template-columns:1fr}.project-visual{padding:20px;gap:10px}.project-visual>img{height:220px}.project-feature-copy{padding:22px;padding-top:12px}.project-feature-copy h3{font-size:26px}.project-visual:after{bottom:20%}}