/* Love Arcade Journey — dedicated screen compositions; WebRTC session stays mounted. */
body:has(#room:not([hidden])){background:radial-gradient(ellipse at 50% -12%,#46253e88,transparent 53%),radial-gradient(ellipse at 5% 102%,#212e4345,transparent 60%),#110d1d}
body:has(#room:not([hidden])) .topbar{display:none}
body:has(#room:not([hidden])) .shell{max-width:1250px}
#room{min-height:calc(100dvh - 45px);padding-top:20px;padding-bottom:180px}
.journey-nav{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid #ffffff1c}
.journey-mark{display:flex;gap:12px;align-items:center}
.journey-symbol{display:grid;place-items:center;height:44px;width:44px;border-radius:15px;border:1px solid #fdafd64d;background:linear-gradient(135deg,#663753,#251b39);color:#ffd1e4;font-size:29px}
.journey-mark strong{display:block;font-size:12px;letter-spacing:2.7px;color:#ffedf5;font-weight:800}
.journey-mark small{display:block;color:#bdabcb;letter-spacing:2px;font-size:9px;margin-top:3px}
.journey-right{display:flex;align-items:center;gap:14px}
.journey-live{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:650;color:#d9c4e2}
.journey-live i{height:9px;width:9px;border-radius:100%;background:#deb479;box-shadow:0 0 0 5px #deb47919}
.journey-live.is-connected i{background:#74e5af;box-shadow:0 0 0 5px #74e5af18}
.journey-invite{border:1px solid #ffffff32;border-radius:12px;padding:11px 16px;background:#30253b;color:#f9dfef;font-size:12px;font-weight:700;min-height:43px}
.journey-invite:hover{background:#46334c}
#room[data-stage="waiting"]>.roomhead,#room[data-stage="waiting"]>.players,#room[data-stage="waiting"]>#connectionbanner,
#room[data-stage="waiting"]>#lobby,#room[data-stage="waiting"]>#game,#room[data-stage="waiting"]>#watch,
#room[data-stage="waiting"]>.activity-heading,#room[data-stage="waiting"]>.roomfooter{display:none!important}
#room:not([data-stage="waiting"])>#waitingRoom{display:none!important}
.waiting-room{position:relative;min-height:min(650px,75dvh);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:28px;padding:38px 24px 45px;background:radial-gradient(ellipse at 50% 35%,#69385855,transparent 49%),linear-gradient(170deg,#281b32a8,#1a142b77);border:1px solid #ffffff1e;overflow:hidden}
.waiting-room:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background-image:radial-gradient(circle,#f5bee1 1px,transparent 1.5px);background-size:100px 88px}
.waiting-art{position:relative;height:190px;width:190px;display:grid;place-items:center;margin-bottom:4px}
.waiting-orbit{position:absolute;inset:0;border:1px solid #ffb1d13f;border-radius:100%}.orbit-one{inset:24px;border-style:dashed;animation:journey-rotate 28s linear infinite}.orbit-two{inset:45px;background:#f5adc211;border:1px solid #ffb1d146}
.waiting-heart{position:relative;font:93px Georgia,serif;color:#ffc2df;filter:drop-shadow(0 0 25px #ee85c059)}
.waiting-spark{position:absolute;color:#ffe3ae;font-size:25px}.spark-one{right:1px;top:35px}.spark-two{left:16px;bottom:39px}
.waiting-content{position:relative;z-index:1;max-width:530px;width:100%}
.waiting-content h2{font-size:clamp(36px,5vw,61px);line-height:1.1;letter-spacing:-2px;margin:15px auto 13px;max-width:540px;color:#ffedf8}
.waiting-content h2 em,.lounge-intro h2 em{font-family:Georgia,serif;font-weight:400;color:#f8aad0}
.waiting-content>p{font-size:14px;line-height:1.75;color:#c8b7d2;max-width:410px;margin:0 auto 22px}
.waiting-code{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;border:1px solid #e7bdd647;border-radius:17px;background:#0f0c1d9a;padding:13px 14px 13px 18px;margin:22px auto 16px;max-width:470px}
.waiting-code>span{font-size:9px;letter-spacing:1.5px;color:#c0a6c4}.waiting-code strong{font:700 16px ui-monospace,monospace;letter-spacing:2.4px;color:#ffebf6;white-space:nowrap}
.waiting-code .secondary{min-height:42px;padding:10px 12px;font-size:11px;white-space:nowrap}
.waiting-share{min-height:50px;width:min(100%,470px);font-size:14px;font-weight:700}
.waiting-note{display:flex;align-items:center;justify-content:center;gap:9px;margin:18px auto 0;color:#e9ccdf;font-size:12px}
.waiting-pulse{width:8px;height:8px;border-radius:50%;background:#f4be85;box-shadow:0 0 0 5px #f4be8522;animation:journey-pulse 2s ease-in-out infinite}
.waiting-safety{font-size:10px!important;color:#a795b1!important;margin-top:16px!important}
@keyframes journey-pulse{50%{box-shadow:0 0 0 9px #f4be850b;opacity:.64}}
@keyframes journey-rotate{to{transform:rotate(360deg)}}
#room[data-stage="lounge"] .roomhead{margin:10px 0 14px}
#room[data-stage="lounge"] .roomhead h2{font-size:20px}
#room[data-stage="lounge"] .players{padding:13px 17px;margin-bottom:22px}
#room[data-stage="lounge"] .lounge-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:45px 0 25px}
.lounge-intro h2{font-size:clamp(31px,4.5vw,52px);letter-spacing:-1.6px;line-height:1.15;margin:9px 0 10px;color:#f7eaf7}
.lounge-intro p{font-size:13px;color:#cdb9d3;margin:0}
.lounge-heart{font:105px Georgia,serif;color:#ffb6d570;line-height:1;text-shadow:0 0 60px #e88bbb46}
#room[data-stage="lounge"] #roomGuide{display:none}
#room[data-stage="lounge"] .hero{height:285px}
#room[data-stage="lounge"] .hero h2{font-size:clamp(37px,4.5vw,60px)}
#room[data-stage="lounge"] .watch-launch{margin-bottom:22px}
#room[data-stage="lounge"] .gamecards{gap:16px}
#room[data-stage="lounge"] .gamecard{min-height:235px}
#room[data-stage="activity"] .roomhead,#room[data-stage="activity"] .roomfooter{display:none!important}
#room[data-stage="activity"] .players{margin:0 0 15px;border-radius:14px;padding:9px 12px;gap:8px}
#room[data-stage="activity"] .player .avatar{height:32px;width:32px;border-radius:10px}
#room[data-stage="activity"] .player b{font-size:11px}
#room[data-stage="activity"] .player small{font-size:9px}
#room[data-stage="activity"] .session-stat{font-size:10px}
#room[data-stage="activity"] .session-stat b{font-size:16px}
#room[data-stage="activity"] #connectionbanner:empty{display:none}
#room[data-stage="activity"] .gamehead{padding:12px 0}
#room[data-stage="activity"] .game-status{margin-top:6px}
#room[data-stage="activity"] .game-surface{max-width:940px;margin:0 auto}
#room[data-stage="activity"] #watch{max-width:1150px;margin:0 auto}
#room[data-stage="activity"] .activity-heading{text-align:center;margin:14px 0 22px}
.activity-heading h2{font-size:clamp(29px,4vw,46px);margin:5px 0;line-height:1.15;letter-spacing:-1px}
.activity-heading p{font-size:12px;color:#c9b3ce;margin:7px 0 0}
#room[data-stage="activity"] #game .gamehead{max-width:940px;margin:auto}
#room[data-stage="activity"] .watch-head{padding-top:10px}
#room[data-stage="activity"] #watch:has(.watch-head)~.roomfooter{display:none}
@media(max-width:680px){
 #room{padding-top:14px;padding-bottom:160px;min-height:100dvh}
 .journey-nav{margin-bottom:18px;padding-bottom:14px}
 .journey-symbol{height:37px;width:37px;font-size:26px;border-radius:12px}
 .journey-mark{gap:9px}.journey-mark strong{font-size:10px;letter-spacing:1.7px}.journey-mark small{font-size:8px}
 .journey-right{gap:7px}.journey-live{font-size:10px;gap:5px}.journey-invite{padding:8px 10px;min-height:39px;font-size:10px}
 .waiting-room{min-height:calc(100dvh - 260px);padding:23px 18px 32px;border-radius:19px}
 .waiting-art{height:130px;width:130px;margin-top:0}.waiting-heart{font-size:71px}.orbit-one{inset:17px}.orbit-two{inset:30px}
 .waiting-spark{font-size:18px}.waiting-content h2{font-size:37px;margin:9px auto 10px}.waiting-content>p{font-size:12px;line-height:1.65;margin-bottom:14px}
 .waiting-code{flex-wrap:wrap;gap:9px;padding:13px;margin:14px 0 12px}.waiting-code>span{flex-basis:100%}.waiting-code strong{letter-spacing:1.5px;font-size:15px}.waiting-code .secondary{min-height:37px}
 .waiting-share{min-height:47px}.waiting-note{font-size:11px}
 #room[data-stage="lounge"] .lounge-intro{margin:28px 0 20px}.lounge-intro h2{font-size:35px}.lounge-intro p{font-size:12px}.lounge-heart{font-size:57px}
 #room[data-stage="lounge"] .roomhead{display:none}
 #room[data-stage="lounge"] .players{margin:7px 0 20px}
 #room[data-stage="lounge"] .hero{height:265px}
 #room[data-stage="lounge"] .gamecard{min-height:215px}
 #room[data-stage="activity"] .players{margin-bottom:9px;padding:10px 9px}
 #room[data-stage="activity"] .players .you,#room[data-stage="activity"] .between{display:none}
 #room[data-stage="activity"] .activity-heading{margin:5px 0 16px}.activity-heading h2{font-size:28px}
 #room[data-stage="activity"] #game .gamehead{padding:5px 0 12px}
 #room[data-stage="activity"] #game .game-surface{padding:19px 15px}
 #room[data-stage="activity"] .session-stat span{display:none}
}
@media(prefers-reduced-motion:reduce){.orbit-one,.waiting-pulse{animation:none}}


/* Transparent cross-network connection help. Quiet until requested or prolonged wait. */
.connection-help{max-width:470px;margin:18px auto 4px;text-align:left;border:1px solid #ffffff28;border-radius:13px;background:#171524a8;overflow:hidden}
.connection-help summary{display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer;padding:12px 15px;font-weight:650;color:#eccde2;font-size:12px;list-style:none}
.connection-help summary::-webkit-details-marker{display:none}
.connection-help summary:focus-visible{outline:2px solid #f7bfdc;outline-offset:-3px}
.connection-help[open] summary{border-bottom:1px solid #ffffff18}
.connection-help[open] summary span{transform:rotate(180deg)}
.connection-help-body{padding:13px 15px 16px}
.connection-help-body p{margin:0 0 12px!important;font-size:11px!important;line-height:1.65!important;color:#c6b9d1!important;text-align:left}
.connection-retry:not([hidden]){display:block;width:100%;min-height:43px;margin-top:8px;border-radius:10px;font-size:12px}
@media(max-width:580px){.connection-help{margin:14px auto 5px}.connection-help summary{padding:11px 12px}.connection-help-body{padding:12px}.connection-help-body p{font-size:10px!important}}