/* The Hub is an architectural arrival space; club interiors retain their own renderer. The panels, passport and signs
   below are the brand v2 pieces (15 Oct 2026) shared by the Hub and the clubs (body.hub-passports). */
.hub-passports .community-background{filter:saturate(.93) brightness(.9)}
/* club doors and exits on the stage (glass from community.css) */
.hub-passports .world-sign{gap:11px;padding:10px 14px 10px 10px;text-decoration:none}
.hub-passports .world-sign img{width:30px;height:30px}
.hub-passports .world-sign b{margin-left:4px;font:600 16px/1 var(--hv-body);color:var(--hv-sky);transition:transform .45s var(--hv-spring)}
.hub-passports .world-sign:hover b,.hub-passports .world-sign:focus-visible b{transform:translate(2px,-2px)}
.hub-passports .world-sign.exit{opacity:1;min-height:40px;padding:10px 16px}
.hub-passports .club-sign em{display:flex;align-items:center;gap:6px;margin-top:3px;font:500 11px/1.2 var(--hv-body);font-style:normal;letter-spacing:0;color:var(--hv-dim)}
.hub-passports .club-sign em:before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:var(--hv-faint)}
/* a club's own colour marks who is inside: the presence dot only */
.hub-passports .club-sign.occupied em{color:var(--hv-ice)}
.hub-passports .club-sign.occupied em:before{background:var(--club);box-shadow:0 0 10px var(--club);animation:club-presence 3s ease-in-out infinite}
.hub-passports .club-sign.activity{animation:club-arrival 1.2s ease-out}
/* the room's title */
.hub-passports .hub-intro{top:96px;left:28px;max-width:340px;padding:14px 16px;isolation:isolate;text-shadow:0 2px 18px rgba(2,5,13,.8)}
.hub-intro::before{content:'';position:absolute;inset:-12px -22px;z-index:-1;background:radial-gradient(ellipse at 40% 45%,rgba(2,5,13,.42),transparent 72%);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);mask-image:radial-gradient(ellipse,#000 30%,transparent 72%);pointer-events:none}
.hub-passports .hub-intro .eyebrow{display:block;font-size:11px;line-height:1.4}
.hub-passports .hub-intro h1{margin:10px 0 8px;font-size:40px;line-height:1.02;letter-spacing:-.055em}
.hub-passports .hub-intro p{display:block;max-width:none;margin:0;font-size:15px;line-height:1.45;color:var(--hv-ice)}
.hub-intro .world-status{margin-top:12px}
.hub-passports .world-status{min-height:17px}
/* latest arrivals: a glass panel (.hv-glass in the HTML) */
.hub-passports .hub-panel{--r:22px;position:fixed;z-index:20;pointer-events:auto;bottom:27px;left:28px;width:292px;max-width:calc(100vw - 32px);padding:16px 18px 10px;border-radius:22px;text-shadow:none;background:var(--hv-glass-hi),rgba(10,24,58,.56)}
.hub-panel .arrival-heading{display:flex;justify-content:space-between;align-items:center;margin:0 0 8px;font:600 13px/1.2 var(--hv-body);color:var(--hv-paper)}
.arrival-live{display:flex;align-items:center;gap:6px;font:600 10.5px/1 var(--hv-body);letter-spacing:.14em;color:var(--hv-ice)}
.arrival-live:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--hv-live);box-shadow:0 0 10px var(--hv-live);animation:arrival-blink 2s infinite}
@keyframes arrival-blink{50%{opacity:.35}}
.hub-panel.offline .arrival-live{color:var(--hv-dim)}
.hub-panel.offline .arrival-live:before{background:var(--hv-faint);box-shadow:none;animation:none}
.hub-arrivals{list-style:none;padding:0;margin:0;min-height:38px;display:grid;gap:4px}
.hub-arrival{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center;padding:5px 6px;margin:0 -6px;font:400 13px/1.35 var(--hv-body);color:var(--hv-muted);border-radius:12px}
.hub-arrival img{width:30px;height:34px;object-fit:cover;border-radius:9px;box-shadow:0 0 0 1px rgba(160,200,255,.22)}
.hub-arrival span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub-arrival strong{font-weight:600;color:var(--hv-paper)}
.hub-arrival small{display:block;margin-top:2px;font-size:11.5px;color:var(--hv-dim)}
.hub-arrival.fresh{animation:arrival-in .65s cubic-bezier(.16,1,.3,1) both}
.arrival-empty{padding:6px 0;font:400 13px/1.5 var(--hv-body);color:var(--hv-dim)}
.hub-panel-footer{margin-top:10px;padding-top:8px;border-top:1px solid rgba(160,200,255,.14)}
.hub-panel-footer button{display:flex;align-items:center;gap:10px;width:calc(100% + 12px);min-height:44px;margin:0 -6px;padding:0 6px;border:0;border-radius:14px;background:none;text-align:left;font:600 13px/1 var(--hv-body);color:var(--hv-paper);transition:background-color .25s ease}
.hub-panel-footer button:hover{background:rgba(98,160,255,.12)}
.hub-panel-footer button>span:last-child{margin-left:auto;font-size:16px;color:var(--hv-sky);transition:transform .45s var(--hv-spring)}
.hub-panel-footer button:hover>span:last-child{transform:translate(2px,-2px)}
.hub-panel-footer img{width:26px;height:30px;object-fit:cover;border-radius:8px;box-shadow:0 0 0 1px rgba(160,200,255,.22)}
.hub-panel.received{animation:panel-receive .9s ease-out}
/* the passport: a glass card with the kit's tilt and cursor light (data-hv-tilt), a sheen on arrival */
.hub-passport{position:fixed;left:50%;bottom:96px;translate:-50% 0;width:280px;z-index:60;overflow:hidden;transform-origin:center;isolation:isolate;color:var(--hv-paper);border-radius:24px;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(170,210,255,calc(var(--ex-shine) * .16)),transparent 64%),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,.86);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(235,244,255,.28),inset 0 0 0 1px rgba(160,200,255,.26),0 40px 80px -30px rgba(0,0,0,.9),0 0 60px -20px rgba(98,160,255,.55);transition:transform .5s var(--hv-spring),--ex-shine .3s ease}
.hub-passport:hover{--ex-shine:1}
.hub-passport:before{content:'';position:absolute;inset:5px;z-index:-1;border:1px solid rgba(160,200,255,.12);border-radius:19px;pointer-events:none}
.hub-passport:after{content:'';position:absolute;inset:-50%;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(220,236,255,.05) 45%,rgba(220,236,255,.14) 49%,transparent 56%);transform:translateX(-45%);animation:passport-sheen 4s ease-out forwards}
.passport-top{display:flex;align-items:center;gap:9px;padding:15px 14px 12px 16px;font:600 11px/1.2 var(--hv-display);letter-spacing:.02em}
.passport-top>img{width:28px;height:28px;border-radius:8px;filter:drop-shadow(0 0 10px rgba(133,188,251,.35))}
.passport-top small{display:block;margin-top:3px;font:600 8px/1.3 var(--hv-body);letter-spacing:.18em;color:var(--hv-dim)}
.passport-top button{position:relative;z-index:3;display:grid;place-items:center;flex:none;width:34px;height:34px;margin-left:auto;padding:0;border:0;border-radius:50%;font:400 18px/1 var(--hv-body);color:var(--hv-ice);
  background:var(--hv-glass-hi),rgba(12,26,62,.6);box-shadow:inset 0 1px 0 rgba(235,244,255,.22),inset 0 0 0 1px rgba(160,200,255,.22);transition:transform .45s var(--hv-spring)}
.passport-top button:hover{transform:rotate(90deg)}
.passport-portrait{position:relative;margin:0 14px;height:158px;overflow:hidden;border-radius:16px;background:var(--hv-navy);box-shadow:0 0 0 1px rgba(160,200,255,.24)}
.passport-portrait>img{width:100%;height:100%;object-fit:cover;object-position:50% 39%;opacity:.92}
.passport-portrait:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 58%,rgba(4,10,28,.85));pointer-events:none}
.passport-seal{position:absolute;bottom:12px;right:12px;z-index:2;width:31px;height:31px;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:#0b1020;box-shadow:0 0 0 1px rgba(160,200,255,.4),0 0 14px rgba(98,160,255,.45)}
.passport-seal img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.passport-portrait-label{position:absolute;bottom:13px;left:12px;z-index:2;font:600 8px/1 var(--hv-body);letter-spacing:.16em;color:var(--hv-ice)}
.passport-identity{padding:15px 18px 12px}
.passport-welcome{font:600 9px/1.2 var(--hv-body);letter-spacing:.18em;color:var(--hv-sky)}
.passport-identity h2{margin:6px 0 14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 22px/1.25 var(--hv-display);letter-spacing:-.04em}
.passport-stats{display:grid;grid-template-columns:1.45fr .6fr .9fr;gap:8px}
.passport-stats>span{font:500 11px/1.2 var(--hv-body);color:var(--hv-dim)}
.passport-stats strong{display:block;margin-top:5px;font:600 11.5px/1.45 var(--hv-display);letter-spacing:-.01em;color:var(--hv-paper);overflow-wrap:normal}
.passport-stats>span+span{padding-left:12px;border-left:1px solid rgba(160,200,255,.16)}
.passport-bottom{display:flex;justify-content:space-between;align-items:center;gap:5px;margin:0 18px;padding:11px 0 14px;border-top:1px solid rgba(160,200,255,.16);font:600 7.5px/1 var(--hv-body);letter-spacing:.18em;color:var(--hv-dim)}
.passport-code{font:13px/1 monospace;opacity:.6;letter-spacing:-2px;color:var(--hv-sky)}
/* the Hub's bottom bar: club counts as small chips, Explore set apart */
.hub-passports .camera-controls{left:auto;right:25px}
.hub-passports .world-hud [data-dock-count]{min-width:20px;padding:3px 6px;border-radius:999px;font:600 11px/1 var(--hv-body);text-align:center;color:var(--hv-ice);background:rgba(98,160,255,.14);box-shadow:inset 0 0 0 1px rgba(160,200,255,.2)}
.hub-passports .world-hud [data-dock-count]:empty{display:none}
.hub-passports .world-hud .hud-explore{margin-left:5px}
.hub-passports .world-hud .hud-explore::before{content:'';position:absolute;left:-4px;top:12px;bottom:12px;width:1px;background:rgba(160,200,255,.2)}
.fountain-glimmer{position:absolute;inset:6% 12%;border-radius:50%;background:radial-gradient(ellipse,#9de7ff18,transparent 65%);mix-blend-mode:screen;animation:fountain-shimmer 4s ease-in-out infinite}
@keyframes arrival-in{from{opacity:0;transform:translateY(9px);background:rgba(98,160,255,.16)}to{opacity:1;transform:none;background:transparent}}
@keyframes panel-receive{30%{box-shadow:inset 0 1px 0 rgba(235,244,255,.3),0 0 34px rgba(98,160,255,.5),inset 0 0 20px rgba(140,190,255,.12)}}
@keyframes passport-sheen{to{transform:translateX(65%)}}
@keyframes club-arrival{30%{box-shadow:0 0 0 7px rgba(140,190,255,.08),0 0 45px var(--club)}}
@keyframes club-presence{50%{box-shadow:0 0 0 3px rgba(140,190,255,.08),0 0 12px var(--club)}}
@keyframes fountain-shimmer{50%{opacity:.4}}
@media(max-width:1000px){
.hub-passports .hub-intro{left:18px;top:90px;padding:14px 16px}
.hub-passports .hub-intro h1{font-size:34px}
.hub-passports .hub-panel{left:18px;bottom:88px;width:272px;padding:15px 16px 9px}
.hub-passport{bottom:88px;width:256px}.passport-portrait{height:135px}
.hub-passports .camera-controls{right:17px;bottom:88px}
}
@media(max-width:560px){
.hub-passports .hub-intro{left:14px;top:81px;max-width:calc(100vw - 28px);padding:12px 10px}
.hub-passports .hub-intro .eyebrow{font-size:10px}
.hub-passports .hub-intro h1{font-size:30px;margin:8px 0 6px}
.hub-passports .hub-intro p{font-size:14px}
.hub-passports .hub-panel{--r:20px;left:14px;bottom:86px;width:calc(100vw - 28px);padding:12px 14px 8px;border-radius:20px}
.hub-panel .arrival-heading{margin:0 0 6px}
.hub-arrivals{gap:1px}
.hub-arrival{grid-template-columns:24px 1fr;gap:9px;padding:2px 6px;font-size:12.5px}
.hub-arrival img{width:24px;height:27px;border-radius:7px}
.hub-arrival>span{display:block;position:relative;padding-right:66px}
.hub-arrival small{position:absolute;right:0;top:0;margin:0;font-size:11px;line-height:17px}
.hub-passports .world-status{font-size:12.5px}
.hub-panel-footer{margin-top:6px;padding-top:4px}
.hub-panel-footer button{font-size:12.5px}
.hub-panel-footer img{width:22px;height:25px}
.hub-passports .world-hud{bottom:18px;width:max-content;max-width:calc(100% - 20px)}
.hub-passports .world-hud>a{gap:4px;padding:0 6px;font-size:11px}
.hub-passports .world-hud img{width:17px;height:17px}
.hub-passports .world-hud [data-dock-count]{min-width:16px;padding:2px 4px;font-size:9.5px}
.hub-passports .world-hud .hud-explore{margin-left:3px}.hub-passports .world-hud .hud-explore::before{left:-2px}
.hub-passports .club-sign{display:flex}
.hub-passport{width:250px;bottom:86px}.passport-portrait{height:132px}
.passport-top{padding-top:12px}.passport-identity{padding-top:11px}.passport-identity h2{font-size:19px;margin-bottom:11px}
.hub-passports .camera-controls{right:14px;bottom:calc(86px + 208px);gap:6px}
}
/* the narrowest phones: the bar's four links keep one line (smaller type, the counts as plain numbers, no logos) */
@media(max-width:360px){
.hub-passports .world-hud>a{gap:3px;padding:0 6px;font-size:11px}
.hub-passports .world-hud img{display:none}
.hub-passports .world-hud [data-dock-count]{min-width:0;padding:0 0 0 2px;background:none;box-shadow:none;font-size:11px;color:var(--hv-sky)}
}
@media(max-height:650px){
.hub-passports .hub-intro{top:80px;padding:10px 16px}.hub-passports .hub-intro h1{font-size:27px;margin:6px 0}
.hub-passports .hub-panel{padding:11px 16px 7px}
.hub-panel .arrival-heading{margin-top:0;padding-top:0}
.hub-arrival{padding:2px 6px;grid-template-columns:23px 1fr;gap:8px}.hub-arrival img{width:23px;height:26px}
.hub-arrival>span{position:relative;padding-right:64px}.hub-arrival small{position:absolute;right:0;top:0;margin:0;font-size:11px}
.hub-passport{bottom:86px;width:236px}.passport-portrait{height:92px}
.passport-top{padding:10px 12px 10px 14px}.passport-identity{padding:10px 14px}.passport-identity h2{font-size:18px;margin-bottom:9px}.passport-bottom{padding-bottom:10px}
}
@media(prefers-reduced-motion:reduce){.hub-passport:after{display:none}.hub-passports *{animation:none!important;transition:none!important}}
/* phones: the Hub's picture is shorter than the screen; a blurred copy fills it, and the doors become compact tiles */
@media(max-width:560px){
 .hub-passports[data-room="hub"] .world-viewport:before{content:'';position:absolute;inset:-25px;background:url('/assets/community/hub-statue.png') center/cover;filter:blur(15px) brightness(.48);pointer-events:none}
 .hub-passports[data-room="hub"] .community-stage{mask-image:linear-gradient(transparent,#000 10%,#000 89%,transparent)}
 .hub-passports[data-room="hub"] .club-sign{--r:14px;width:104px;min-height:48px;padding:7px 6px;gap:5px;border-radius:14px;white-space:nowrap}
 .hub-passports[data-room="hub"] .club-sign span{font:600 9px/1.15 var(--hv-body);letter-spacing:0}
 .hub-passports[data-room="hub"] .club-sign img{width:22px;height:22px;border-radius:7px}
 .hub-passports[data-room="hub"] .club-sign small,.hub-passports[data-room="hub"] .club-sign b{display:none}
 .hub-passports[data-room="hub"] .club-sign em{max-width:66px;margin-top:3px;gap:4px;overflow:hidden;text-overflow:ellipsis;font-size:9px}
 .hub-passports[data-room="hub"] .club-sign em:before{width:5px;height:5px;flex-shrink:0}
 .hub-passports[data-room="hub"] .world-sign.exit{min-height:36px;padding:0 10px;font-size:10px}
 /* the exits sit a little further in than before so their larger type stays on screen */
 .hub-passports[data-room="hub"] [data-destination="swap"]{left:17%!important;top:64%!important}
 .hub-passports[data-room="hub"] [data-destination="stake"]{left:83%!important;top:64%!important}
 .hub-passports[data-room="hub"] .bridge-back{left:72%!important}
}
/* touch screens: 44 px targets (spec §11.1) */
@media(pointer:coarse){.passport-top button{width:44px;height:44px;margin-block:-5px}.hub-passports .world-sign.exit,.hub-passports[data-room="hub"] .world-sign.exit{min-height:44px}}
/* ---- The Hub's public chat (17 Oct 2026; its look is chat.css). minimal: the type bar, centred just above the
   bottom bar. expanded: the panel, centred over the island. On narrower screens the arrivals, the camera buttons, the
   welcome passport and the toast step up above the type bar; on phones, an open chat covers the island's labels. ---- */
.hub-passports[data-room="hub"] .club-chat{left:50%;right:auto;translate:-50% 0}
.hub-passports[data-room="hub"] .club-chat.mode-minimal{top:auto;bottom:max(88px,calc(var(--chat-kb,0px) + 10px));width:min(580px,calc(100vw - 32px))}
.hub-passports[data-room="hub"] .club-chat.mode-expanded{--r:28px;top:96px;bottom:88px;width:clamp(440px,42vw,640px);height:auto;max-height:none;border-radius:28px}
.hub-passports[data-room="hub"] .club-chat.mode-expanded .club-chat-main{flex:1;min-height:0}
.hub-passports[data-room="hub"] .club-chat.mode-expanded .chat-messages{flex:1;height:auto;max-height:none;min-height:80px;padding:12px 22px 20px}
.hub-passports[data-room="hub"] .club-chat.mode-expanded #chat-compose{margin:4px 16px 4px}
.hub-passports[data-room="hub"] .club-chat.mode-expanded .club-chat-head{padding:18px 18px 16px 22px}
.hub-passports[data-room="hub"] .chat-message-actions{opacity:1}
.hub-passports.chat-mode-minimal .hub-passport,.hub-passports.chat-mode-minimal .world-toast{bottom:150px}
@media(max-width:1279px){.hub-passports[data-room="hub"] .hub-panel{bottom:150px}}
@media(max-width:1000px){.hub-passports[data-room="hub"] .camera-controls{bottom:150px}}
@media(max-width:560px){
 .hub-passports[data-room="hub"] .club-chat.mode-minimal{bottom:max(80px,calc(var(--chat-kb,0px) + 8px));width:calc(100vw - 20px)}
 .hub-passports[data-room="hub"] .club-chat.mode-expanded{--r:24px;top:74px;bottom:80px;width:calc(100vw - 20px);border-radius:24px}
 .hub-passports[data-room="hub"] .club-chat.mode-expanded .chat-messages{padding:9px 14px 16px}
 .hub-passports[data-room="hub"] .club-chat.mode-expanded .club-chat-head{padding:12px 12px 11px 16px}
 .hub-passports[data-room="hub"] .hub-panel{bottom:140px}
 .hub-passports[data-room="hub"] .camera-controls{bottom:calc(140px + 208px)}
 .hub-passports.chat-mode-minimal .hub-passport,.hub-passports.chat-mode-minimal .world-toast{bottom:140px}
 .hub-passports[data-room="hub"].chat-open .hub-intro,.hub-passports[data-room="hub"].chat-open .hub-panel,.hub-passports[data-room="hub"].chat-open .camera-controls,
 .hub-passports[data-room="hub"].chat-peek-open .hub-panel,.hub-passports[data-room="hub"].chat-peek-open .camera-controls{visibility:hidden}
}
@media(max-height:650px) and (min-width:561px){.hub-passports[data-room="hub"] .club-chat.mode-expanded{top:80px}}

/* ---- A room's host (host.js; 17 Oct 2026): Supa, Charles and Iris in the clubs, Hana in the Hub. The card pops up
   on the island on arrival, then folds into the Latest arrivals tile, pinned at the top. Tapped there, it comes
   back docked beside the tile (.docked), its guidance open. ---- */

.club-host{position:absolute;left:var(--host-x);top:var(--host-y);translate:-50% -100%;z-index:25}
.host-passport{--r:20px;display:block;width:160px;padding:9px;border:0;border-radius:20px;color:var(--hv-paper);text-align:left;font:inherit}
.host-passport:hover,.host-passport:focus-visible,.club-host.expanded .host-passport{transform:translateY(-4px);outline:0;
  box-shadow:inset 0 1px 0 rgba(235,244,255,.3),inset 0 0 24px rgba(120,170,255,.1),0 24px 50px -20px rgba(0,0,0,.85),0 0 32px color-mix(in srgb,var(--club) 30%,transparent)}
.host-passport:focus-visible{outline:2px solid var(--hv-sky);outline-offset:4px}
.host-card-heading{display:flex;align-items:center;gap:6px;padding:2px 2px 8px;font:600 7px/1 var(--hv-body);letter-spacing:.16em;color:var(--hv-dim)}
.host-card-heading>img{width:16px;height:16px}
.host-card-heading i{width:6px;height:6px;margin-left:auto;border-radius:50%;background:var(--club);box-shadow:0 0 10px var(--club)}
.host-portrait{display:block;aspect-ratio:1;overflow:hidden;border-radius:13px;background:var(--hv-navy);box-shadow:0 0 0 1px rgba(160,200,255,.24)}
.host-portrait img{display:block;width:100%;height:100%;object-fit:cover}
.host-card-name{display:block;padding:10px 4px 8px;font:600 15px/1.1 var(--hv-display);letter-spacing:-.03em}
.host-card-name small{display:block;margin-top:5px;font:600 8px/1.2 var(--hv-body);letter-spacing:.14em;color:var(--hv-dim)}
.host-card-stats{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px;padding:8px 4px 2px;border-top:1px solid rgba(160,200,255,.16);font:500 11px/1.3 var(--hv-body);color:var(--hv-muted)}
.host-card-stats b{color:#fff;font-weight:600}
/* the host's hello: a glass popover with an ice call to action */
.host-guidance{position:absolute;top:16px;left:calc(100% + 15px);width:240px;padding:18px;border-radius:22px;color:var(--hv-paper);cursor:auto;opacity:0;visibility:hidden;translate:-6px 0;transition:opacity .2s,translate .35s var(--hv-spring),visibility .2s;
  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,.86);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(235,244,255,.26),inset 0 0 0 1px rgba(160,200,255,.22),0 30px 60px -24px rgba(0,0,0,.9)}
.host-guidance::before{content:'';position:absolute;right:100%;width:20px;top:0;height:100%}
.host-guidance strong{font:600 15px/1.2 var(--hv-display);letter-spacing:-.03em}
.host-guidance p{margin:10px 0 8px;font:400 14px/1.5 var(--hv-body);color:var(--hv-muted)}
.host-guidance p b{color:var(--hv-ice);font-weight:600}
.host-guidance small{display:block;font:400 12.5px/1.5 var(--hv-body);color:var(--hv-dim)}
.host-guidance button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin-top:14px;padding:0 16px;border:0;border-radius:999px;font:600 14px/1 var(--hv-body);color:#06122E;
  background:linear-gradient(180deg,#F6FAFF 0%,#CFE3FF 48%,#9CC4FF 100%);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 8px rgba(40,90,200,.35),0 12px 34px -12px rgba(98,160,255,.85),0 0 0 1px rgba(200,225,255,.55);transition:transform .45s var(--hv-spring),box-shadow .3s ease}
.host-guidance button:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 8px rgba(40,90,200,.35),0 18px 44px -12px rgba(98,160,255,1),0 0 0 1px rgba(220,236,255,.8)}
.club-host:hover .host-guidance,.club-host:focus-within .host-guidance,.club-host.expanded .host-guidance{opacity:1;visibility:visible;translate:0 0}
.host-passport{transition:width .5s cubic-bezier(.16,1,.3,1),padding .5s,transform .5s var(--hv-spring),box-shadow .3s}
.club-host[hidden]{display:none}
.club-host.docked{position:fixed;left:var(--dock-x);top:var(--dock-y);translate:none;z-index:70}
.club-host.docked .host-guidance{top:16px!important;left:calc(100% + 12px)!important;translate:0 0!important;width:min(240px,calc(100vw - 100% - 44px))!important}
.club-host.docked .host-guidance::before{right:100%;left:auto}
/* the pinned host: the first row of Latest arrivals, always there */
.arrival-host{margin:0 -6px 6px;padding-bottom:6px;border-bottom:1px solid rgba(160,200,255,.14)}
.arrival-host.arriving{visibility:hidden}
.arrival-host>button{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:44px;padding:4px 6px;border:0;border-radius:14px;background:none;text-align:left;color:var(--hv-paper);cursor:pointer;transition:background-color .25s ease}
.arrival-host>button:hover,.arrival-host>button[aria-expanded=true]{background:rgba(98,160,255,.12)}
.arrival-host>button:focus-visible{outline:2px solid var(--hv-sky);outline-offset:2px}
.arrival-host-portrait{position:relative;width:30px;height:30px;border-radius:10px;overflow:hidden;background:var(--hv-navy);box-shadow:0 0 0 1.5px var(--club,var(--hv-blue)),0 0 12px -2px var(--club,var(--hv-blue))}
.arrival-host-portrait img{width:100%;height:100%;object-fit:cover}
.arrival-host-text{min-width:0}
.arrival-host-text strong{display:block;font:600 13.5px/1.2 var(--hv-body)}
.arrival-host-text small{display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 11px/1.3 var(--hv-body);color:var(--hv-dim)}
.arrival-host-pin{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:var(--hv-sky);background:rgba(98,160,255,.12)}
.arrival-host-pin svg{width:14px;height:14px;rotate:30deg}
.arrival-host.received .arrival-host-portrait{animation:host-pinned 1s ease-out}
@keyframes host-pinned{30%{box-shadow:0 0 0 1.5px var(--club,var(--hv-blue)),0 0 26px 2px var(--club,var(--hv-blue))}}
/* the Hub's host, Hana: on the plaza below the fountain */
.hub-passports[data-room="hub"] .club-host{--club:#62A0FF;z-index:85}
@media(max-width:1150px){.hub-passports[data-room="hub"] .host-passport{width:140px}}
@media(max-width:560px){
 .hub-passports[data-room="hub"] .club-host{--host-x:30%!important;--host-y:74%!important}
 .hub-passports[data-room="hub"] .host-passport{--r:16px;width:118px;border-radius:16px}
 .hub-passports[data-room="hub"] .host-card-heading{font-size:5.5px;letter-spacing:.12em}
 .hub-passports[data-room="hub"] .host-card-name{font-size:13px;padding:7px 2px}
 .hub-passports[data-room="hub"] .host-card-stats{font-size:10px;padding-top:6px}
 .hub-passports[data-room="hub"] .club-host:not(.docked) .host-guidance{left:50%;translate:-50% 0;top:calc(100% + 10px);width:240px}
 .hub-passports .arrival-host-portrait{width:26px;height:26px}
 .hub-passports .arrival-host>button{grid-template-columns:26px minmax(0,1fr) auto}
}
@media(prefers-reduced-motion:reduce){.arrival-host.received .arrival-host-portrait{animation:none}}