/* Wuju lobby — Capstar ice/indigo, project shelf */
:root {
  --deep: #0a0f1e;
  --ice: #e8f4ff;
  --accent: #7dd3fc;
  --indigo: #818cf8;
  --violet: #a78bfa;
  --ok: #6ee7b7;
  --warn: #fde68a;
  --text: #e2e8f0;
  --muted: rgba(186, 230, 253, 0.72);
  --stroke: rgba(125, 211, 252, 0.22);
  --card: rgba(15, 23, 42, 0.52);
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  color: var(--text);
  font-family: var(--font);
  background: var(--deep);
  -webkit-tap-highlight-color: transparent;
}
body { min-height: 100dvh; overflow-x: hidden; }

.bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: linear-gradient(165deg, #1e1b4b 0%, #0f172a 42%, #020617 100%);
}
.bg-tints { position: absolute; inset: 0; }
.bg-tint {
  position: absolute; inset: 0;
  animation: bg-tint-pulse 42s ease-in-out infinite alternate;
}
.bg-tint-a {
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(99, 102, 241, 0.18), transparent 55%),
    radial-gradient(ellipse 70% 50% at 80% 90%, rgba(30, 58, 138, 0.32), transparent 55%);
}
.bg-tint-b {
  background:
    radial-gradient(ellipse 90% 60% at 48% -8%, rgba(129, 140, 248, 0.28), transparent 55%),
    radial-gradient(ellipse 70% 50% at 82% 88%, rgba(37, 99, 235, 0.42), transparent 55%);
  animation-delay: -21s;
}
.bg-tint-c {
  background:
    radial-gradient(ellipse 90% 60% at 52% -10%, rgba(167, 139, 250, 0.22), transparent 55%),
    radial-gradient(ellipse 70% 50% at 78% 90%, rgba(109, 40, 217, 0.32), transparent 55%);
  animation-delay: -18s;
}
.bg-wash {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 100%, rgba(2, 6, 23, 0.55), transparent 60%);
}
.nebula {
  position: absolute; border-radius: 50%; filter: blur(48px); opacity: 0.35;
}
.nebula-a {
  width: min(55vw, 28rem); height: min(55vw, 28rem);
  left: -8%; top: 12%;
  background: rgba(99, 102, 241, 0.45);
}
.nebula-b {
  width: min(45vw, 22rem); height: min(45vw, 22rem);
  right: -6%; bottom: 8%;
  background: rgba(167, 139, 250, 0.4);
}
@keyframes bg-tint-pulse {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

.shell {
  position: relative; z-index: 1;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  padding:
    max(0.75rem, var(--st))
    max(1rem, var(--sr))
    max(1rem, var(--sb))
    max(1rem, var(--sl));
  max-width: 52rem;
  margin: 0 auto;
}

.topbar {
  display: flex; align-items: center; justify-content: center;
  gap: 0.75rem; margin-bottom: 1.25rem;
  position: relative;
  min-height: 2.75rem;
}
/* Pin Capstar hub link to the real screen top-left (not the centered shell) */
.home-btn {
  position: fixed;
  z-index: 20;
  top: max(0.75rem, var(--st));
  left: max(1rem, var(--sl));
  color: var(--ice); text-decoration: none; font-weight: 700; font-size: 0.85rem;
  padding: 0.35rem 0.7rem; border-radius: 0.55rem;
  border: 1px solid var(--stroke); background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.home-btn:hover { border-color: rgba(125, 211, 252, 0.5); }
.brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
}
.brand-mark {
  width: 2.5rem; height: 2.5rem; border-radius: 0.7rem; overflow: hidden;
  border: 1px solid var(--stroke); background: rgba(15, 23, 42, 0.5);
  display: grid; place-items: center;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; }
.brand-sub {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted);
}

.main { flex: 1; padding: 0.25rem 0 1.5rem; }
.kicker {
  margin: 0 0 0.35rem;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(125, 211, 252, 0.7);
}
.title {
  margin: 0 0 0.45rem;
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: 850; letter-spacing: -0.03em;
}
.lede {
  margin: 0 0 1.5rem;
  max-width: 36rem;
  color: var(--muted);
  font-size: 1rem; line-height: 1.5;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 0.85rem;
}

.card {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: 1rem 1.05rem 1.05rem;
  border-radius: 1rem;
  border: 1px solid var(--stroke);
  background: var(--card);
  backdrop-filter: blur(12px);
  text-decoration: none; color: inherit;
  min-height: 13rem;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
a.card.is-live:hover {
  border-color: rgba(125, 211, 252, 0.5);
  background: rgba(30, 41, 59, 0.55);
  transform: translateY(-2px);
}
a.card.is-live:hover .card-logo {
  transform: scale(1.04);
}
.card.is-soon {
  opacity: 0.82;
  cursor: default;
}
.card-logo-wrap {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}
.card-logo {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 1.1rem;
  display: block;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease;
}
.badge {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 0.18rem 0.45rem; border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: var(--muted);
  align-self: flex-start;
  flex-shrink: 0;
}
.badge.live {
  color: #a7f3d0;
  border-color: rgba(52, 211, 153, 0.45);
  background: rgba(6, 78, 59, 0.35);
}
.badge.soon {
  color: #fde68a;
  border-color: rgba(251, 191, 36, 0.4);
  background: rgba(120, 53, 15, 0.28);
}
.card-title {
  margin: 0;
  font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em;
}
.card-desc {
  margin: 0;
  flex: 1;
  font-size: 0.86rem; line-height: 1.45;
  color: var(--muted);
}
.card-go {
  margin-top: 0.35rem;
  font-size: 0.8rem; font-weight: 750;
  color: var(--accent);
}
.card-go.muted { color: rgba(148, 163, 184, 0.85); }

/* Hub-style contact (centered, click to copy) */
.site-contact {
  margin-top: auto;
  padding:
    0.85rem 1rem
    max(0.75rem, env(safe-area-inset-bottom, 0px));
  text-align: center;
  pointer-events: none;
  border: none;
  background: none;
}
.site-contact button {
  pointer-events: auto;
  appearance: none;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(148, 163, 184, 0.4);
  transition: color 0.15s ease, background 0.15s ease;
  touch-action: manipulation;
}
.site-contact button:hover,
.site-contact button:focus-visible {
  color: rgba(186, 230, 253, 0.72);
  background: rgba(15, 23, 42, 0.28);
  outline: none;
}
.site-contact .label {
  color: inherit;
  opacity: 0.85;
}
.site-contact .addr {
  color: inherit;
  font-variant-numeric: tabular-nums;
}
.site-contact-toast {
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: max(2.75rem, calc(env(safe-area-inset-bottom, 0px) + 2.25rem));
  transform: translateX(-50%) translateY(0.4rem);
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 650;
  color: #e0f2fe;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(186, 230, 253, 0.28);
  box-shadow: 0 8px 28px rgba(2, 6, 23, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.site-contact-toast.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 520px) {
  .title { font-size: 1.85rem; }
  .card { min-height: 10rem; }
}

/* 2026-10-12h: footer contact contrast >=4.5:1, 44px target, visible focus */
.site-contact button { color: #cbd5e1; min-height: 44px; }
.site-contact button:hover,
.site-contact button:focus-visible { color: #e0f2fe; background: rgba(15, 23, 42, 0.55); }
.site-contact button:focus-visible { outline: 2px solid #7dd3fc; outline-offset: 2px; }

/* a11y batch r (2026-10-12): phone touch target >=44px */
@media (max-width: 640px), (pointer: coarse) {
  .home-btn { min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box; }
}

/* Below this width the fixed hub link sits over (or crowds) .main's left column.
 * Breakpoint = 52rem .shell max-width + 2 x 4.8rem .home-btn width + 2 x 1rem clear gap
 *           = calc(52rem + 2*4.8rem + 2*1rem) = 63.6rem (literal: calc() in media queries is not universal). */
@media (max-width: 63.6rem) {
  .home-btn { position: absolute; }
}

/* 2026-10-21 Capstar top bar (approved mockup, updated set). Prefixed cb- to avoid clashing with page .brand/.home. */
.cbar{position:sticky;top:0;left:0;right:0;z-index:40;height:calc(var(--cb-h) + var(--st,0px));display:flex;align-items:center;gap:10px;padding:var(--st,0px) calc(16px + var(--sr,0px)) 0 calc(16px + var(--sl,0px));box-sizing:border-box;font:500 14px/1 system-ui,'Segoe UI',sans-serif;background:rgba(30,30,52,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.07)}
/* 2026-10-22 phone text scrim (approved, alpha .35) */
@media (max-width:720px){.cbar{background-image:linear-gradient(90deg,rgba(10,10,22,.35) 0,rgba(10,10,22,.35) 40%,rgba(10,10,22,0) 56%,rgba(10,10,22,0) 60%,rgba(10,10,22,.35) 70%,rgba(10,10,22,.35) 100%);background-size:100% 48px;background-repeat:no-repeat;background-position:0 0}}
.cbar a{text-decoration:none}
.cb-brand{display:flex;align-items:center;gap:8px;color:#fff;font-weight:700;font-size:15px;white-space:nowrap}.cb-brand img{width:28px;height:28px;display:block}
.cb-home,.cb-homeicon,.cb-pill{white-space:nowrap;color:#cfd0da;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:13px}
.cb-homeicon{display:none;padding:6px 9px}
.cb-sp{flex:1}.cb-act{display:flex;align-items:center;gap:8px}
.cb-admin{padding:5px 10px;border-radius:999px;background:rgba(224,40,79,.18);border:1px solid rgba(224,40,79,.5);color:#ff8aa3;font-size:12px;font-weight:700}
.cb-signin{height:34px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font:inherit;white-space:nowrap}
.cb-av{height:34px;display:flex;align-items:center;gap:8px;padding:3px 10px 3px 3px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;white-space:nowrap}
/* avatar chip fix B 2026-10-21 */
.cb-av b,.cb-av img{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;object-fit:cover;background:none}
.cb-av b{background:rgba(14,12,22,.55);border:1px solid rgba(255,54,106,.65);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 8px rgba(255,54,106,.25);color:#fff;font-weight:600;box-sizing:border-box}
.cb-av img{display:none}
.cb-av.cb-av-loaded img{display:block;background:none!important;box-shadow:none}
.cb-av.cb-av-loaded b{display:none}
.cb-av.cb-av-loaded::before,.cb-av.cb-av-loaded::after{content:none}

.cbar a:focus-visible,.cbar button:focus-visible{outline:2px solid #7dd3fc;outline-offset:2px}
@media(max-width:600px){.cbar{padding-left:calc(10px + var(--sl,0px));padding-right:calc(10px + var(--sr,0px));gap:6px}.cb-home{display:none}.cb-homeicon{display:inline-block}.cb-brand{gap:6px}.cb-brand span{max-width:84px;overflow:hidden;text-overflow:ellipsis}.cb-signin{padding:0 12px}.cb-av span{display:none}.cb-av{padding:2px}.cb-admin{padding:5px 7px}.cb-pill{padding:6px 9px}}
/* 2026-10-21 v4 top bar: star button (app logo, fan) + name/Home wipe. Neutral glass glow, no gold. */
.cbar .cb-star{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .15s,box-shadow .15s}

.cbar .cb-star:hover,.cbar .cb-star:focus-visible{background:rgba(255,255,255,.12);box-shadow:0 0 0 1px rgba(255,255,255,.35),0 0 16px rgba(255,255,255,.18)}

.cbar .cb-star:focus-visible{outline:2px solid rgba(255,255,255,.85);outline-offset:2px}
.cbar .cb-div{flex:none;width:1px;height:22px;background:rgba(255,255,255,.14);margin:0 4px 0 6px}
.cbar .cb-title{margin:0;font-size:15px;font-weight:500;color:rgba(235,236,245,.78);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.cbar .cb-star{transition:none}}
 
/* Capstar star fan (no float): fan eases out on hover/focus, holds still, settles on leave.
   Shards come pre-positioned from app/assets/capstar-logo.svg; each pushes outward along its own axis. */
@property --fan { syntax:'<number>'; inherits:true; initial-value:0 }
.cap-star { --fan:0; overflow:visible; transition: --fan .55s cubic-bezier(.45,0,.55,1); }
.cb-star:hover .cap-star, .cb-star:focus-visible .cap-star, .cap-star.is-hover { --fan:1; transition: --fan .42s cubic-bezier(.215,.61,.355,1); }
.cap-star .shard { transform-box:view-box; transform-origin:128px 128px;
  transform: rotate(var(--rot)) translateY(calc(var(--fan) * -13.45px)) rotate(calc(-1 * var(--rot))); }
.cap-star .s0{--rot:0deg}.cap-star .s1{--rot:72deg}.cap-star .s2{--rot:144deg}.cap-star .s3{--rot:216deg}.cap-star .s4{--rot:288deg}
.cbar .cb-star .cap-star{width:30px;height:30px;display:block}
@keyframes cb-star-once{0%{--fan:0}30%{--fan:1}70%{--fan:1}100%{--fan:0}}
@media(hover:none){.cbar .cb-star{width:40px;height:40px}
  .cbar .cb-star .cap-star{animation:cb-star-once 1.8s cubic-bezier(.45,0,.55,1) .15s 1 both}}
@media(prefers-reduced-motion:reduce){.cap-star,.cb-star:hover .cap-star,.cb-star:focus-visible .cap-star{--fan:0;transition:none}.cbar .cb-star .cap-star{animation:none!important}}
/* v4b: desktop size + name wipe (hover-capable pointers only) */
.cbar .cb-title{position:relative;display:inline-grid}
.cbar .cb-name,.cbar .cb-hometxt{grid-area:1/1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbar .cb-hometxt{opacity:0;pointer-events:none}
@media(hover:hover){
  .cbar .cb-title{min-width:3.2em}
  .cbar .cb-star{width:50px;height:50px}
  .cbar .cb-star .cap-star{width:40px;height:40px}
}
@media(hover:hover) and (prefers-reduced-motion:reduce){.cbar .cb-name,.cbar .cb-hometxt{transition:none}}
/* end v4 top bar */
/* v5c top bar hover 2026-10-21: B motion (divider+name slide/fade, "Home" fades in, no layout gap) + C red glow. Button fixed 50x50, only shards fan. */
@media(hover:hover){
  .cbar .cb-title{display:inline-block;overflow:visible}
  .cbar .cb-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cbar .cb-hometxt{position:absolute;left:0;top:0;visibility:visible;opacity:0;pointer-events:none;white-space:nowrap;color:inherit}
  .cbar .cb-star{transition:background .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s cubic-bezier(.2,.7,.2,1)}
  .cbar .cb-div,.cbar .cb-name,.cbar .cb-hometxt{transition:opacity .2s cubic-bezier(.2,.7,.2,1),transform .2s cubic-bezier(.2,.7,.2,1)}
  .cbar .cb-star:is(:hover,:focus-visible)~.cb-div{opacity:0;transform:translateX(-10px)}
  .cbar .cb-star:is(:hover,:focus-visible)~.cb-title .cb-name{opacity:0;transform:translateX(-10px)}
  .cbar .cb-star:is(:hover,:focus-visible)~.cb-title .cb-hometxt{opacity:1}
  .cbar .cb-star:hover,.cbar .cb-star:focus-visible{background:rgba(255,255,255,.12);box-shadow:0 0 0 1px rgba(255,54,106,.6),0 0 16px 1px rgba(255,54,106,.38),0 0 30px rgba(255,54,106,.2)}
}
.cbar .cb-star:focus-visible{outline:2px solid rgba(255,255,255,.85);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.cbar .cb-star,.cbar .cb-div,.cbar .cb-name,.cbar .cb-hometxt{transition:none!important}}
/* end v5c top bar */
/* chip-size 2026-10-22: bar 56->48 (--cb-h), star 44x44 fixed, chip 30px/avatar 24px/name 12.5px, 44px tap area, name ellipsis at 200px */
:root{--cb-h:48px}
.cbar{height:calc(var(--cb-h) + var(--st,0px));position:sticky}
.cbar .cb-star{width:40px;height:40px;transform:none!important}
.cbar .cb-star:hover,.cbar .cb-star:focus-visible{transform:none!important}
.cbar .cb-star .cap-star{width:32px;height:32px}
/* mono-at-rest star (2026-10-22): grey at rest, colour on hover/focus-visible; in .42s, out .25s */
.cbar .cb-star .cap-star{filter:grayscale(1) contrast(.4) brightness(1.75);transition:--fan .25s cubic-bezier(.45,0,.55,1),filter .25s cubic-bezier(.45,0,.55,1)}
.cbar .cb-star:focus-visible .cap-star{filter:grayscale(0) contrast(1) brightness(1);transition:--fan .42s cubic-bezier(.215,.61,.355,1),filter .42s cubic-bezier(.215,.61,.355,1)}
@media(hover:hover){.cbar .cb-star:hover .cap-star,.cbar .cap-star.is-hover{filter:grayscale(0) contrast(1) brightness(1);transition:--fan .42s cubic-bezier(.215,.61,.355,1),filter .42s cubic-bezier(.215,.61,.355,1)}}
@media(prefers-reduced-motion:reduce){.cbar .cb-star .cap-star,.cbar .cb-star:is(:hover,:focus-visible) .cap-star,.cbar .cap-star.is-hover{transition:none!important}}
.cbar .cb-star{position:relative}
@media(hover:none),(max-width:600px){.cbar .cb-star::after{content:"";position:absolute;inset:-3px;border-radius:50%}}
.cbar .cb-title{color:rgba(235,236,245,.92)}
.cbar .auth-btn{height:30px;gap:7px;font-size:12.5px;padding:0 14px}
.cbar #auth-btn.is-in{padding:2px 9px 2px 2px;max-width:200px;position:relative}
.cbar #auth-btn .avatar{width:24px;height:24px;font-size:10.5px}
.cb-av{height:30px;gap:7px;padding:2px 9px 2px 2px;font-size:12.5px;max-width:200px;position:relative}
.cb-av b,.cb-av img{width:24px;height:24px;font-size:10.5px;flex:none}
.cb-av span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbar #auth-btn.is-in::after,.cb-av::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:44px;transform:translateY(-50%)}
@media(max-width:600px){.cbar #auth-btn.is-in,.cb-av{padding:2px}}
@media(max-width:600px){.cbar .cb-title{max-width:calc(50% - 80px)}}
.cbar .cb-av.cb-av-loaded::after,.cbar .cb-av::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:44px;transform:translateY(-50%);background:none;box-shadow:none;border:0}
/* end chip-size */