/* A room for conversation: the photograph stays immersive; passports carry identity. Brand v2 (15 Oct 2026): glass
   panels, Space Grotesk text, Unbounded names; the club's own colour (--club) marks only its host and its chat. */
.club-passports{--chat-width:clamp(430px,39vw,660px)}
.club-passports .community-background{filter:saturate(.93) brightness(.88)}
/* the room's title card */
.club-passports .club-intro{top:108px;left:28px;width:290px;max-width:290px;padding:18px 20px;border-radius:22px;text-shadow:none;
  background:radial-gradient(120% 60% at 50% -10%,rgba(255,255,255,.1),rgba(255,255,255,0) 62%),var(--hv-glass-hi),rgba(10,24,58,.58);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(235,244,255,.24),inset 0 0 0 1px rgba(160,200,255,.2),0 24px 50px -24px rgba(0,0,0,.85)}
.club-intro::before{display:none}
.club-passports .club-intro h1{margin:10px 0;font-size:30px;line-height:1.04;letter-spacing:-.05em}
.club-passports .club-intro p{max-width:none;font-size:14px;line-height:1.45}
/* the club's badge, top centre (.hv-glass in the HTML) */
.club-brand{--r:22px;position:fixed;z-index:41;top:20px;left:50%;translate:-50% 0;display:flex;align-items:center;gap:13px;padding:10px 22px 10px 12px;border-radius:22px;pointer-events:none}
.club-brand>img{width:42px;height:42px;object-fit:contain;border-radius:12px;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--club) 35%,transparent))}
.club-brand>span{font:700 20px/1 var(--hv-display);letter-spacing:-.045em}
.club-brand small{display:block;margin-top:6px;font:600 9px/1 var(--hv-body);letter-spacing:.2em;color:var(--hv-dim)}
.club-passports .hub-panel{width:265px;bottom:27px;padding:15px 16px 9px}
.club-passports .hub-arrival{padding:3px 6px}
.club-passports .hub-arrival img{width:28px;height:31px}
.club-passports .world-hud{left:min(48vw,calc(100vw - var(--chat-width) - 170px));bottom:25px}
.club-passports .camera-controls{right:auto;left:318px;bottom:27px}
/* the chat panel's size and place on this page (its look is chat.css) */
.club-passports .club-chat{--r:28px;right:24px;top:108px;bottom:25px;width:var(--chat-width);height:auto;max-height:none;border-radius:28px}
.club-passports .club-chat-head{padding:20px 22px 18px 24px;flex-shrink:0}
.club-passports .club-chat-main{flex:1;min-height:0}
.club-passports .chat-messages{height:auto;max-height:none;min-height:80px;flex:1;padding:12px 24px 22px;scroll-padding:16px}
.club-passports .chat-message{margin-top:18px;gap:12px}
.club-passports .chat-message-actions{opacity:1}
.club-passports #chat-empty{margin:55px 15px}
.club-passports #chat-compose{margin:4px 18px 4px;flex-shrink:0}
.club-passports #chat-compose textarea{font-size:15px;line-height:1.6;min-height:52px}
.club-passports #chat-gate{padding:14px 22px 5px;flex-shrink:0}
.club-passports .chat-policy{padding:0 18px 13px;margin:8px 0 0;flex-shrink:0}
.club-passports #chat-feedback{flex-shrink:0;max-height:90px;overflow:auto}
.club-passports #chat-reply{flex-shrink:0;margin:8px 18px}
.club-passports #chat-search-form{padding:12px 22px;flex-shrink:0}
.club-passports #chat-emojis{flex-shrink:0}
/* The host's card (Supa, Charles, Iris; its look and the pinned row are in hub.css, shared with the Hub's Hana) sits
 over the actual bar; no character is composited into the room. */
@media(max-width:1150px){.club-passports{--chat-width:430px}.club-passports .club-intro{width:260px;max-width:260px;padding:16px}.club-passports .club-intro h1{font-size:26px}.club-passports .club-brand{top:22px;gap:10px;padding:8px 16px 8px 10px}.club-brand>img{width:34px;height:34px}.club-brand>span{font-size:16px}.host-passport{width:140px}.club-host{--host-x:40%!important;--host-y:46%!important}.host-guidance{top:calc(100% + 12px);left:0;width:240px}}
/* between tablet and wide desktop the bottom bar slides left over the camera buttons' corner (it hid them up to about
   1270 px): there they sit just above the bar, centred on it */
@media(min-width:901px) and (max-width:1300px){.club-passports .camera-controls{left:min(48vw,calc(100vw - var(--chat-width) - 170px));bottom:89px;transform:translateX(-50%)}}
@media(max-width:900px){.club-passports .club-chat{right:18px;top:98px;width:min(460px,calc(100vw - 36px));bottom:86px}.club-passports .club-intro{top:104px;left:18px;max-width:245px}.club-passports .hub-panel{left:18px;bottom:86px;width:245px}.club-passports .camera-controls{right:18px;left:auto;bottom:27px;transform:none}.club-passports .world-hud{bottom:20px}.club-passports .club-brand{top:20px}.club-passports .ex-brand>span{display:none}}
@media(max-width:560px){
.club-passports .club-brand{--r:18px;top:78px;gap:10px;padding:7px 14px 7px 8px;border-radius:18px}.club-brand>img{width:30px;height:30px;border-radius:9px}.club-brand>span{font-size:15px}.club-brand small{margin-top:4px;font-size:7px;letter-spacing:.16em}
.club-passports .ex-brand>span{display:block}.club-passports .club-intro{top:148px;left:14px;padding:12px 15px;width:242px;max-width:calc(100vw - 28px)}.club-passports .club-intro h1{font-size:23px;margin:6px 0}.club-passports .club-intro p{font-size:13px}.club-passports .hub-intro .eyebrow{font-size:9px}.club-passports .hub-intro .world-status{margin-top:8px}
.club-passports .hub-panel{bottom:86px;left:14px;width:236px;padding:11px 13px 7px}.club-passports .hub-arrival img{width:22px;height:25px}.club-passports .hub-arrival{grid-template-columns:22px 1fr;padding:2px 6px;font-size:12px}.club-passports .hub-arrival>span{padding-right:58px}.club-passports .hub-arrival small{font-size:10.5px}.club-passports .hub-panel-footer button{font-size:12px}
.club-passports .world-hud{left:14px;translate:0 0;transform:none;max-width:calc(100vw - 28px)}.club-passports .world-hud>a,.club-passports .world-hud>button{padding:0 11px;font-size:12.5px}
/* phones: the camera buttons (44 px targets) stand in a column at the right, above the chat button */
.club-passports .camera-controls{right:14px;left:auto;bottom:146px;flex-direction:column;gap:6px}
.club-passports .club-chat{--r:24px;top:144px;bottom:85px;left:10px;right:10px;width:auto;border-radius:24px}.club-passports .club-chat-head{padding:14px 14px 13px 17px}.club-passports .club-chat h2{font-size:15px}.club-passports .club-chat-head small{font-size:12px}.club-passports .chat-messages{padding:9px 16px 18px;min-height:60px}.club-passports .chat-message{gap:10px;margin-top:16px}.club-passports .chat-message p{font-size:14.5px}.club-passports .chat-message header strong{max-width:145px}.club-passports .chat-avatar{width:30px;height:30px}.club-passports #chat-compose{margin:4px 10px}.club-passports #chat-compose textarea{font-size:16px;min-height:46px}.club-passports #chat-gate{padding:12px 16px 3px}.club-passports .chat-policy{padding-bottom:10px}.club-passports #chat-search-form{padding:8px 16px}
.club-host{--host-x:34%!important;--host-y:60%!important}.host-passport{--r:16px;width:124px;border-radius:16px}.host-card-heading{font-size:5.5px;letter-spacing:.12em}.host-card-name{font-size:13px;padding:7px 2px}.host-card-stats{font-size:10px;padding-top:6px}.host-guidance{left:50%;translate:-50% 0;top:calc(100% + 10px);width:240px;z-index:65}.club-host:hover .host-guidance,.club-host:focus-within .host-guidance,.club-host.expanded .host-guidance{translate:-50% 0}
.club-passports.chat-open .hub-panel,.club-passports.chat-open .club-intro{visibility:hidden}.club-passports .hub-passport{bottom:91px}
}
@media(max-height:650px) and (min-width:561px){.club-passports .club-intro{top:92px;padding:12px 16px}.club-passports .club-intro h1{font-size:23px}.club-passports .club-chat{top:92px;bottom:20px}.club-passports .club-chat-head{padding:13px 20px}.club-passports .hub-panel{bottom:20px}.club-passports .hub-arrival img{height:24px}.host-passport{width:124px}.club-host{--host-y:52%!important}.club-passports .chat-message{margin-top:13px}}

@media(max-width:560px){.club-passports:has(.club-host.expanded:not(.docked)) .hub-panel{visibility:hidden}}

/* ---- minimal mode (17 Oct 2026): the chat folds into a type bar centred above the bottom bar, which centres too; the
   room gets the right side back. The arrivals, the welcome passport and the toast step up above the bar where they
   would meet it. ---- */
.club-passports .club-chat.mode-minimal{top:auto;right:auto;left:50%;translate:-50% 0;bottom:max(88px,calc(var(--chat-kb,0px) + 10px));width:min(580px,calc(100vw - 32px));border-radius:26px}
.club-passports.chat-mode-minimal .world-hud{left:50%}
.club-passports.chat-mode-minimal .camera-controls{left:auto;right:25px;bottom:27px;transform:none}
.club-passports.chat-mode-minimal .hub-passport,.club-passports.chat-mode-minimal .world-toast{bottom:150px}
@media(max-width:1279px){.club-passports.chat-mode-minimal .hub-panel{bottom:150px}}
@media(max-width:560px){
 .club-passports .club-chat.mode-minimal{bottom:max(80px,calc(var(--chat-kb,0px) + 8px));width:calc(100vw - 20px)}
 .club-passports.chat-mode-minimal .world-hud{left:50%;translate:none;transform:translateX(-50%)}
 .club-passports.chat-mode-minimal .hub-panel{bottom:140px}
 .club-passports.chat-mode-minimal .camera-controls{right:14px;bottom:196px}
 .club-passports.chat-mode-minimal .hub-passport,.club-passports.chat-mode-minimal .world-toast{bottom:140px}
 .club-passports.chat-peek-open .hub-panel,.club-passports.chat-peek-open .camera-controls,.club-passports.chat-peek-open .club-intro{visibility:hidden}
}