.roof-invite{position:relative;isolation:isolate;overflow:hidden;margin:40px 0;padding:clamp(25px,5vw,54px);border:1px solid #a69bdb55;border-radius:22px;background:linear-gradient(90deg,#090d24ee,#15102abb),url('/assets/chemistry-city-v1.png') center/cover;color:#f4e8fa}
.roof-invite h2{font:clamp(2rem,4vw,3.7rem)/1.05 Georgia,serif;max-width:650px;margin:18px 0}.roof-invite p{max-width:550px;color:#d4cde1;line-height:1.65}.roof-invite .primary-button{margin:12px 12px 0 0}
#rooftopDialog{width:min(1180px,96vw);max-width:1180px;max-height:94dvh;padding:0;border:1px solid #8c91bf66;border-radius:24px;background:#080d20;color:#f1edf8;overflow:auto}#rooftopDialog::backdrop{background:#030510d9;backdrop-filter:blur(8px)}
.roof-shell{padding:clamp(18px,3vw,32px)}.roof-header{display:flex;justify-content:space-between;gap:16px;align-items:start}.roof-header h2{font:clamp(1.8rem,4vw,3rem)/1.1 Georgia,serif;margin:8px 0}.roof-kicker{letter-spacing:.18em;font-size:10px;color:#a0def2}.roof-header button,.roof-controls button{min-height:44px}.roof-intro{max-width:780px;line-height:1.65;color:#c3c7dc}.roof-choices{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:20px 0}.roof-choices label{min-width:200px}.roof-choices select{width:100%;padding:12px;background:#10152c;color:#fff;border:1px solid #65719b;border-radius:8px}
.roof-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(240px,1fr);gap:20px}.roof-stage{height:430px;position:relative;isolation:isolate;overflow:hidden;border:1px solid #6b79b66b;border-radius:18px;background:radial-gradient(ellipse at 40% 20%,#4b277244,transparent 60%),linear-gradient(#080f2d,#111b3c)}
.roof-stage::before{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(#080d2022,#080d2077),url('/assets/chemistry-city-v1.png') center/cover;opacity:.35;transition:opacity 2s}
.roof-stage::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-36px;height:90px;background:linear-gradient(#2d3053,#090d1d);border-top:2px solid #a89ed3;transform:perspective(200px) rotateX(30deg);z-index:1;pointer-events:none}
.roof-stage.is-lit::before{opacity:.95}.roof-stage svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.roof-stage line{stroke:#a0eaf4;stroke-width:1;filter:drop-shadow(0 0 5px #d18ae9);opacity:.7}
.roof-star{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);background:#11172aaa;border:1px solid #b5b6de88;border-radius:14px;color:#e9e9fb;min-height:48px;min-width:65px;max-width:90px;padding:8px 5px;z-index:3;cursor:pointer;font-size:11px}.roof-star span{display:block;font-size:20px;color:#f6d8a5}.roof-star[aria-pressed=true]{outline:2px solid #84edff;outline-offset:4px;background:#174358}.roof-star:focus-visible{outline:3px solid white;outline-offset:4px}.roof-star:disabled{cursor:default;opacity:.55}
.roof-light{position:absolute;z-index:4;left:var(--x,20%);top:var(--y,86%);width:16px;height:16px;border:3px solid #b3faff;background:#5ee4ff;border-radius:50%;box-shadow:0 0 14px #58e4ff,0 0 35px #58e4ff77;transition:left .65s ease,top .65s ease;pointer-events:none}.roof-light.partner{background:#d5a5fa;border-color:#f6d7ff;box-shadow:0 0 14px #d498ff,0 0 35px #d498ff77;--x:78%}.roof-legend{font-size:12px;color:#c2c9e6;margin:12px 0}.roof-clue{min-height:94px;padding:16px 20px;border:1px solid #ac93c950;border-radius:14px;background:#15162d;margin:12px 0;line-height:1.6}.roof-clue strong{color:#e9c8ff}.roof-success{position:absolute;bottom:32px;left:15px;right:15px;text-align:center;z-index:5;padding:14px;background:#0a1223dd;border:1px solid #d9bafa70;border-radius:12px;font:20px Georgia,serif}
.roof-chat{background:#0e1327;border:1px solid #7b80b33d;border-radius:16px;padding:18px;min-width:0}.roof-chat h3{margin-top:0}.roof-feed{height:180px;overflow:auto;overflow-wrap:anywhere}.roof-feed p{font-size:14px;line-height:1.5;padding:8px;background:#1d2340;border-radius:8px}.roof-chat textarea{width:100%;min-height:85px;background:#080f22;color:#fff;border:1px solid #647098;border-radius:8px;padding:10px;font:inherit}.roof-chat small{display:block;color:#afb7d2;line-height:1.5;margin:12px 0}.roof-controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.roof-status{min-height:24px;color:#b9e7ed;line-height:1.5}.roof-hint{font-size:13px;color:#bcb9d3;line-height:1.6}
.emoji-tools{margin:8px 0}.emoji-picker{border:1px solid #788ab555;background:#10172d;border-radius:12px;padding:12px;max-height:230px;overflow:auto}.emoji-picker[hidden]{display:none}.emoji-picker p{font-size:12px;color:#c6cdea;margin:8px 0}.emoji-picker>div{display:flex;flex-wrap:wrap;gap:5px}.emoji-picker button{font-size:23px;min-width:44px;min-height:44px;background:#202942;border:1px solid transparent;border-radius:8px;cursor:pointer}.emoji-picker button:focus-visible{outline:2px solid #8ce9ff}.emoji-notice{font-size:12px;margin:3px 0}.roof-chat [hidden]{display:none!important}
@media(max-width:760px){.roof-layout{grid-template-columns:1fr}.roof-stage{height:350px}.roof-star{min-width:58px;font-size:10px}#rooftopDialog{max-height:96dvh;width:96vw}.roof-choices{align-items:stretch}.roof-choices>*{flex:1 1 100%}.roof-invite{margin:28px 0}.roof-feed{height:130px}}
@media(prefers-reduced-motion:reduce){.roof-stage::before,.roof-light{transition:none!important}}