:root{--club:#bcdcff;--glass:rgba(9,21,38,.88)}
:where(.community) :is(button,input,textarea){font:inherit}
.community button{cursor:pointer}.community .ex-header>*{pointer-events:auto}.community .ex-brand{filter:drop-shadow(0 2px 10px #07101b)}
/* the stage: the picture, its pan and zoom, the fountain (and the old walkable renderer's figures, unused) */
.world-viewport{position:fixed;inset:0;overflow:hidden;touch-action:none;cursor:grab}.world-viewport.dragging{cursor:grabbing}.community-stage{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}.community-background{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none;filter:saturate(.9) brightness(.8)}.community-stage::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(#07142326,transparent 30%,transparent 80%,#07142320)}.path-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}.path-line{stroke:#bfe9ff;stroke-opacity:.08;stroke-width:2;fill:none;stroke-dasharray:2 8}.show-paths .path-line{stroke-opacity:.32}.path-dot{fill:#d6edff;opacity:.17;animation:pathpulse 4s ease-in-out infinite}.show-paths .path-dot{opacity:.65}.destination-ring{position:absolute;width:24px;height:12px;border:1px solid #ceeeff;border-radius:100%;transform:translate(-50%,-50%);box-shadow:0 0 15px #9ed4ff;pointer-events:none;z-index:5;animation:ping 1.3s infinite}.sprite{position:absolute;z-index:5;width:48px;height:76px;transform:translate(-50%,-100%);pointer-events:none;will-change:left,top}.sprite svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 2px #08132060)}.sprite .sprite-body{transform-origin:50% 100%;animation:idle 3.6s ease-in-out infinite}.sprite.walking .sprite-body{animation:walkbob .44s ease-in-out infinite}.sprite.walking .leg-left{transform-origin:24px 65px;animation:leg .44s alternate infinite}.sprite.walking .leg-right{transform-origin:40px 65px;animation:leg .44s alternate-reverse infinite}.sprite.walking .arm-left,.sprite.walking .arm-right{animation:arms .44s alternate infinite;transform-origin:30px 35px}.sprite.walking .arm-right{animation-direction:alternate-reverse}.sprite.you{width:58px;height:90px;z-index:15}.sprite.you:before{content:'';position:absolute;bottom:2px;left:10px;width:36px;height:13px;border:1px solid #d1eeff;border-radius:100%;box-shadow:0 0 15px #9edbff80;background:#aad9ff1c}.sprite-name{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:9px;padding:5px 8px;background:#0b1c32d9;border:1px solid #a1c6ef49;border-radius:8px;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .2s}.sprite.you .sprite-name,.sprite.real .sprite-name{opacity:1}.sprite.you .sprite-name:before{content:'YOU · ';color:#a5d8ff;font-size:7px}.sprite.real .sprite-name:before{content:'● ';color:#b4f9d5}.sprite.npc{opacity:.92}.sprite.npc:nth-child(2n) .sprite-body{animation-delay:-1.6s}.sprite.dog{width:35px;height:28px}.host-figure{position:absolute;z-index:16;transform:translate(-50%,-100%);width:70px;height:110px;background:none;border:0;padding:0;color:white}.host-figure svg{height:90px;filter:drop-shadow(0 0 9px #a2dafa80)}.host-label{position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);background:#152740ed;border:1px solid #7397bc7a;border-radius:10px;padding:5px 9px;font-size:9px;white-space:nowrap}.host-speech{position:absolute;bottom:110px;left:50%;transform:translateX(-50%);width:220px;max-width:45vw;padding:14px 16px;border-radius:16px 16px 16px 3px;background:#112941f0;backdrop-filter:blur(14px);border:1px solid #aacde97a;box-shadow:0 15px 30px #07101f4d;font-size:11px;line-height:1.8;text-align:left;animation:speechin .35s ease both;pointer-events:none}.host-speech[hidden]{display:none}.drone{position:absolute;width:62px;height:35px;left:68%;top:28%;z-index:20;pointer-events:none;animation:droneflight 35s ease-in-out infinite;filter:drop-shadow(0 15px 8px #06112155)}.drone.second{left:22%;top:45%;width:38px;animation-delay:-15s;animation-duration:44s}.fountain{position:absolute;left:50.8%;top:46.8%;width:17%;height:12%;transform:translate(-50%,-50%);pointer-events:none;z-index:3}.water-ring{position:absolute;inset:10%;border:2px solid #9deaff55;border-radius:50%;animation:waterripple 2.4s linear infinite;box-shadow:0 0 14px #6ce3ff30}.water-ring:nth-child(2){animation-delay:-1.2s}.water-spark{position:absolute;width:3px;height:7px;left:var(--x);top:var(--y);background:#c0f6ff;border-radius:100%;box-shadow:0 0 8px #a6efff;animation:waterdrop 1.5s ease-in infinite;animation-delay:var(--delay)}.hans-statue{position:absolute;left:50.8%;top:38.2%;width:3.7%;transform:translate(-50%,-50%);filter:drop-shadow(0 0 13px #a1e1ff);z-index:4;animation:statue 5s ease-in-out infinite}
.portal-transition{position:fixed;inset:0;z-index:200;background:radial-gradient(ellipse,#a9d5ff33,#0b172be6 70%);pointer-events:none;backdrop-filter:blur(20px);display:flex;justify-content:center;align-items:center;animation:portalEnter 1.4s ease forwards}.portal-transition img{width:90px;filter:drop-shadow(0 0 40px #b1d4ff)}.portal-transition.leaving{animation:portalLeave .6s ease forwards}.community [hidden]{display:none!important}
@keyframes idle{50%{transform:translateY(-1.7px)}}@keyframes walkbob{50%{transform:translateY(-2px)}}@keyframes leg{to{transform:rotate(11deg)}}@keyframes arms{to{transform:rotate(-8deg)}}@keyframes speechin{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}@keyframes droneflight{0%,100%{translate:0 0;rotate:0deg}30%{translate:110px -50px;rotate:5deg}65%{translate:-90px 25px;rotate:-5deg}}@keyframes waterripple{from{transform:scale(.6);opacity:.8}to{transform:scale(1.15);opacity:0}}@keyframes waterdrop{0%{transform:translateY(0);opacity:0}25%{opacity:.9}100%{transform:translateY(20px);opacity:0}}@keyframes statue{50%{translate:0 -5px}}@keyframes ping{to{scale:1.8;opacity:0}}@keyframes pathpulse{50%{opacity:.45}}@keyframes portalEnter{0%,18%{opacity:1;scale:1.08}100%{opacity:0;scale:1;visibility:hidden}}@keyframes portalLeave{from{opacity:0;scale:1}to{opacity:1;scale:1.08}}
@media(max-width:560px){.sprite{width:43px;height:68px}.sprite.you{width:52px;height:80px}.host-speech{font-size:10px;max-width:200px}}
@media(prefers-reduced-motion:reduce){.community *{animation:none!important;transition:none!important}.portal-transition{display:none}.world-viewport{scroll-behavior:auto}}

/* Keep figures in scale with the architecture, and doors readable above residents. */
.sprite{width:32px;height:52px}.sprite.you{width:40px;height:64px}.sprite.you:before{left:6px;width:28px;height:10px}.host-figure{width:45px;height:72px;z-index:75}.host-figure svg{height:65px}.host-speech{bottom:79px}.sprite.dog{width:25px;height:19px}#world-exit{background:#badcf9;color:#122b40}.world-hud:has(#world-exit:not([hidden])) .hud-help{display:none}
@media(max-width:560px){.sprite{width:30px;height:48px}.sprite.you{width:38px;height:60px}.world-hud:has(#world-exit:not([hidden])) [data-go]{display:none}}

.host-figure{z-index:100}.club-wall-sign{position:absolute;left:28%;top:17%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:9px;color:#f0f7ff;text-shadow:0 0 12px var(--club);font-size:15px;letter-spacing:.06em;pointer-events:none}.club-wall-sign img{width:35px;height:35px;object-fit:contain;filter:drop-shadow(0 0 12px var(--club));border-radius:9px}
.npc-chatter{position:absolute;left:50%;bottom:95%;transform:translateX(-50%);font:12px/1 system-ui;background:#c4dff1d6;color:#264257;border-radius:8px;padding:0 5px 4px;opacity:0}.sprite.npc.conversing .npc-chatter{opacity:.9;animation:idle 2s ease-in-out infinite}@media(max-width:560px){.world-hud .hud-help{display:flex;padding:8px 6px}}

/* ---------- Brand v2 chrome for the Hub and the clubs (15 Oct 2026; HANS/brand/BRAND.md) ----------
   The stage above (the big picture, its pan and zoom, the fountain) is unchanged. These are the tiles, toggles and type
   over it: Space Grotesk for text, Unbounded for titles and names, the kit's liquid glass (.hv-glass in the HTML) and
   blue only. A club's accent (--club) stays a small highlight of that club. Glass over the stage has no refraction:
   the stage pans under it and the lens filter would be redrawn every frame. */
body.community{overflow:hidden;background:#081626;color:var(--hv-paper);font-family:var(--hv-body)}
.community .ex-header{z-index:40;padding:22px 28px;pointer-events:none;background:linear-gradient(rgba(2,5,13,.62),rgba(2,5,13,0))}
/* signs on the stage: glass tiles (club doors) and glass pills (exits) that lift toward the pointer */
.world-sign{--r:18px;position:absolute;z-index:80;transform:translate(-50%,-110%);display:flex;align-items:center;gap:11px;padding:10px 14px 10px 10px;border-radius:18px;color:var(--hv-paper);white-space:nowrap;text-decoration:none;font-size:12px;
  background:var(--hv-glass-hi),rgba(10,24,58,.62);transition:transform .5s var(--hv-spring),box-shadow .3s ease}
.world-sign img{width:30px;height:30px;object-fit:contain;border-radius:9px;transition:transform .6s var(--hv-spring)}
.world-sign span{display:grid;gap:3px;text-align:left;font:600 13px/1.15 var(--hv-display);letter-spacing:-.02em}
.world-sign small{font:600 9px/1.2 var(--hv-body);letter-spacing:.14em;color:var(--hv-sky);text-transform:uppercase}
.world-sign:hover,.world-sign:focus-visible{transform:translate(-50%,-110%) translateY(-4px);outline:0;
  box-shadow:inset 0 1px 0 rgba(235,244,255,.3),inset 0 -1px 0 rgba(235,244,255,.06),inset 0 0 24px rgba(120,170,255,.1),0 18px 40px -18px rgba(0,0,0,.85),0 0 34px rgba(98,160,255,.5)}
.world-sign:focus-visible{outline:2px solid var(--hv-sky);outline-offset:4px}
.world-sign:hover img,.world-sign:focus-visible img{transform:rotate(-6deg) scale(1.06)}
.world-sign.exit{--r:999px;min-height:40px;padding:10px 16px;border-radius:999px;font:600 12px/1 var(--hv-body);letter-spacing:.01em}
.world-sign.exit:not(.near){opacity:.5}
/* the room's title: Unbounded, one line under it, a live dot */
.world-title{position:fixed;left:30px;top:108px;z-index:20;pointer-events:none;max-width:360px;text-shadow:0 2px 16px rgba(2,5,13,.75)}
.world-title .eyebrow{font:600 11px/1.3 var(--hv-body);letter-spacing:.14em;text-transform:uppercase;color:var(--hv-sky)}
.world-title h1{margin:12px 0;font:700 clamp(28px,2.6vw,40px)/1.02 var(--hv-display);letter-spacing:-.05em}
.world-title .hv-sh{text-shadow:none}   /* a shadow would be painted over the shimmer's gradient */
.world-title p{max-width:230px;font-size:14px;line-height:1.45;color:var(--hv-muted)}
.world-status{display:flex;align-items:center;gap:8px;font:500 13px/1.3 var(--hv-body);color:var(--hv-ice)}
.world-status i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--hv-live);box-shadow:0 0 0 4px rgba(140,190,255,.14),0 0 12px var(--hv-live);animation:world-live 2s ease-in-out infinite}
@keyframes world-live{50%{box-shadow:0 0 0 7px rgba(140,190,255,.04),0 0 16px var(--hv-live)}}
/* the bottom bar: a glass pill group with the kit's sliding lens (data-hv-lens) */
.world-hud{--r:999px;position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:2px;padding:5px;border-radius:999px;max-width:calc(100vw - 24px)}
.world-hud>a,.world-hud>button{display:flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 16px;border-radius:999px;font:500 13.5px/1 var(--hv-body);color:var(--hv-muted);text-decoration:none;white-space:nowrap}
.world-hud img{width:22px;height:22px;object-fit:contain;border-radius:6px;transition:transform .5s var(--hv-spring)}
.world-hud>a:hover img,.world-hud>button:hover img{transform:translateY(-2px) rotate(-8deg)}
/* camera: glass round buttons */
.camera-controls{position:fixed;bottom:28px;left:25px;z-index:25;display:flex;gap:8px}
.camera-controls button{--r:999px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;font:500 20px/1 var(--hv-body);color:var(--hv-paper);transition:transform .45s var(--hv-spring),box-shadow .3s ease}
.camera-controls button:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(235,244,255,.3),inset 0 0 24px rgba(120,170,255,.1),0 18px 40px -22px rgba(0,0,0,.8),0 0 24px -4px rgba(98,160,255,.6)}
.camera-controls button:active{transform:scale(.94)}
/* toast: a glass pill that springs up */
.world-toast{--r:16px;position:fixed;z-index:100;bottom:95px;left:50%;transform:translateX(-50%);max-width:min(440px,85vw);padding:13px 20px;border-radius:16px;font:500 14px/1.45 var(--hv-body);text-align:center;color:var(--hv-paper);animation:world-toast-in .5s var(--hv-spring) both}
@keyframes world-toast-in{from{opacity:0;translate:0 24px}}
/* dialogs (help, moderation): glass, Unbounded title, an ice button */
.community-help{max-width:min(460px,calc(100% - 28px));padding:30px;border:0;border-radius:28px;color:var(--hv-paper);font:400 15px/1.55 var(--hv-body);
  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,.88);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(235,244,255,.26),inset 0 0 0 1px rgba(160,200,255,.2),0 40px 80px -30px rgba(0,0,0,.9),0 0 70px -30px rgba(98,160,255,.6)}
.community-help[open]{animation:world-dialog-in .5s var(--hv-spring) both}
@keyframes world-dialog-in{from{opacity:0;translate:0 16px;scale:.96}}
.community-help::backdrop{background:rgba(2,5,13,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.community-help h2{margin:10px 0 14px;font:600 24px/1.1 var(--hv-display);letter-spacing:-.04em}
.community-help p{margin:10px 0;color:var(--hv-muted)}
.community-help .ex-eyebrow{margin:0;color:var(--hv-sky)}
.community-help button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;margin-top:10px;padding:0 22px;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}
.community-help button:hover:not(:disabled){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)}
.community-help button:disabled{opacity:.5;cursor:wait}
.community-help button[type=button]{color:var(--hv-paper);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)}

@media(max-width:900px){
  .world-title{top:94px;left:20px;max-width:240px}
  .world-title p{max-width:220px}
  .world-hud{bottom:18px}
  .world-hud>a,.world-hud>button{padding:0 12px}
  .camera-controls{bottom:83px;left:16px}
  .community .ex-header{padding:18px}
  .community .ex-brand small{display:none}
}
@media(max-width:560px){
  .community .ex-header{padding:16px}
  .world-title h1{font-size:27px}
  .world-title p{display:none}
  .world-hud>a,.world-hud>button{gap:5px;padding:0 9px;font-size:12px}
  .world-hud img{width:18px;height:18px}
  .world-sign{font-size:11px;padding:9px 12px 9px 9px}
  .world-sign img{width:25px;height:25px}
  .camera-controls{gap:6px}
}