:root{
  --ink:#0b0a12; --ink2:#16131f; --paper:#eff2ff; --purple:#7c3aed; --violet:#a855f7;
  --cyan:#22d3ee; --yellow:#ffc83d; --muted:#a7a2bf; --glass:rgba(22,19,34,.72);
  --line:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--ink);color:#fff;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer}
#stage{position:fixed;inset:0}
#stage canvas{display:block;width:100%;height:100%}
.hidden{display:none!important}

/* HUD */
.hud{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;pointer-events:none}
.hud>*{pointer-events:auto}
.brand{display:flex;align-items:baseline;gap:6px;font-weight:800;font-size:17px;letter-spacing:-.01em;
  background:var(--glass);backdrop-filter:blur(10px);padding:8px 14px;border-radius:999px;border:1px solid var(--line)}
.brand .mark{font-size:20px;background:linear-gradient(120deg,var(--violet),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand em{font-style:normal;font-weight:500;color:var(--muted);font-size:14px}
.hud-actions{display:flex;gap:8px}
.pill{border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(10px);color:#fff;border-radius:999px;
  padding:9px 15px;font-weight:600;font-size:14px;transition:transform .2s,background .2s}
.pill:hover{background:rgba(124,58,237,.55);transform:translateY(-1px)}
.pill.icon{padding:9px 12px}
.pill.dark{background:rgba(255,255,255,.06)}

/* Intro */
#intro{position:fixed;inset:0;z-index:25;display:flex;align-items:flex-end;justify-content:flex-start;padding:0 6vw 9vh;
  background:linear-gradient(0deg,rgba(11,10,18,.92) 0%,rgba(11,10,18,.55) 38%,rgba(11,10,18,0) 70%);
  transition:opacity .8s ease, visibility .8s}
#intro.gone{opacity:0;visibility:hidden}
.intro-inner{max-width:620px;animation:rise 1s .2s both cubic-bezier(.2,.8,.2,1)}
.eyebrow{display:inline-block;font-family:'Caveat',cursive;font-size:24px;color:var(--yellow);font-weight:700}
#intro h1{font-size:clamp(34px,6vw,68px);line-height:1.02;margin:.15em 0 .3em;letter-spacing:-.03em;font-weight:800}
.grad{background:linear-gradient(120deg,var(--violet),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
#intro p{font-size:clamp(15px,1.6vw,19px);color:#d6d2e4;line-height:1.55;margin:0 0 26px;max-width:520px}
#intro small{display:block;margin-top:14px;color:var(--muted);font-size:13px}
.cta{border:0;border-radius:999px;padding:15px 26px;font-weight:700;font-size:17px;color:#fff;
  background:linear-gradient(120deg,var(--purple),#5b21b6 60%,#0e7490);box-shadow:0 10px 30px rgba(124,58,237,.45),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .2s, box-shadow .2s}
.cta:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(124,58,237,.6)}
.cta b{display:inline-block;transition:transform .2s}.cta:hover b{transform:translateX(4px)}
.cta.small{padding:12px 18px;font-size:15px}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

/* Speech bubbles */
#bubbles{position:fixed;inset:0;pointer-events:none;z-index:20;overflow:hidden}
.bubble{position:absolute;left:0;top:0;transform:translate(-50%,-100%) scale(.85);transform-origin:50% 100%;
  background:#fff;color:#16110a;border-radius:18px;padding:9px 15px 11px;max-width:min(300px,70vw);font-size:15px;line-height:1.42;
  box-shadow:0 12px 30px rgba(0,0,0,.35);opacity:0;transition:opacity .25s, transform .25s;pointer-events:none;cursor:pointer}
.bubble.show{opacity:1;pointer-events:auto;transform:translate(-50%,-100%) scale(1)}
.bubble::after{content:"";position:absolute;left:50%;bottom:-8px;margin-left:-9px;border:9px solid transparent;border-bottom:0;border-top-color:#fff}
.bubble .who{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--c,#7c3aed);margin-bottom:2px}
.bubble .txt{min-height:1.4em}

/* Sheet (team picker) */
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:28;padding:18px 0 22px;background:linear-gradient(180deg,rgba(16,13,28,.82),rgba(11,10,18,.96));
  backdrop-filter:blur(14px);border-top:1px solid var(--line);border-radius:26px 26px 0 0;transform:translateY(105%);
  transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.sheet.open{transform:none}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;padding:0 24px 10px}
.sheet h2{margin:0;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.02em}
.x{border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;width:36px;height:36px;border-radius:50%;flex:none}
.cards{display:flex;gap:16px;overflow-x:auto;padding:12px 24px 10px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.card{flex:0 0 200px;scroll-snap-align:start;text-align:left;border:1px solid var(--line);border-radius:20px;padding:10px;color:#fff;
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));position:relative;
  transform:perspective(700px) rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .15s, border-color .2s, box-shadow .2s;
  animation:cardIn .6s both cubic-bezier(.2,.8,.2,1)}
.card:hover{border-color:var(--c);box-shadow:0 14px 40px -10px var(--c)}
.card.current{outline:2px solid var(--c)}
.card .ph{aspect-ratio:1;border-radius:14px;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--c) 70%,#fff),var(--c) 45%,#1d1b26)}
.card .ph img{width:100%;height:100%;object-fit:cover}
.ini{font-weight:800;font-size:52px;letter-spacing:-.04em;color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.25)}
.card b{display:block;margin:10px 4px 2px;font-size:16px}
.card .role{display:block;margin:0 4px;font-size:13px;color:var(--muted);line-height:1.35;min-height:2.7em}
.card .cab{position:absolute;top:18px;left:18px;font-size:11px;font-weight:700;background:rgba(11,10,18,.6);padding:4px 9px;border-radius:999px;backdrop-filter:blur(6px)}
@keyframes cardIn{from{opacity:0;transform:translateY(24px)}to{opacity:1}}

/* Profile drawer */
#profile{position:fixed;top:72px;right:18px;bottom:18px;width:min(360px,calc(100vw - 36px));z-index:27;overflow:auto;
  background:var(--glass);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:24px;padding:20px;
  transform:translateX(120%);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
#profile.open{transform:none}
#profile .x{position:absolute;top:14px;right:14px;z-index:2}
.p-photo{aspect-ratio:1;border-radius:18px;overflow:hidden;display:grid;place-items:center;margin-bottom:14px;
  background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--c) 70%,#fff),var(--c) 45%,#1d1b26)}
.p-photo img{width:100%;height:100%;object-fit:cover}
.p-photo .ini{font-size:90px}
.chip{display:inline-block;font-size:12px;font-weight:700;color:var(--ink);background:var(--c);padding:4px 10px;border-radius:999px}
#profile h3{margin:10px 0 2px;font-size:26px;letter-spacing:-.02em}
.p-role{margin:0 0 12px;color:var(--c);font-weight:700}
.p-bio{color:#d6d2e4;line-height:1.55;margin:0 0 14px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.tags span{font-size:12px;border:1px solid var(--line);padding:4px 10px;border-radius:999px;color:#e7e4f3}
.links{display:flex;gap:8px;margin-bottom:16px}
.links a{color:#fff;text-decoration:none;font-size:13px;font-weight:600;border:1px solid var(--line);padding:7px 12px;border-radius:999px}
.links a:hover{border-color:var(--c)}
.p-actions{display:flex;flex-direction:column;gap:8px}

/* Loader */
#loader{position:fixed;inset:0;z-index:50;display:grid;place-content:center;justify-items:center;gap:14px;background:var(--ink);transition:opacity .6s}
#loader.done{opacity:0;pointer-events:none}
#loader p{color:var(--muted);margin:0}
.spin{width:46px;height:46px;border-radius:50%;border:4px solid rgba(255,255,255,.1);border-top-color:var(--violet);border-right-color:var(--cyan);animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* No-WebGL fallback */
body.no3d #intro{display:none}
body.no3d .sheet{top:72px;border-radius:0;transform:none}
body.no3d .cards{flex-wrap:wrap;justify-content:center;overflow:visible}

@media (max-width:760px){
  .brand em{display:none}
  .hud{padding:10px}
  .pill span{display:none}
  .card{flex-basis:150px}
  .ini{font-size:40px}
  #profile{top:auto;left:10px;right:10px;width:auto;bottom:10px;max-height:62vh;transform:translateY(120%)}
  #profile .p-photo{width:110px;float:left;margin:0 14px 8px 0}
  #profile .p-photo .ini{font-size:44px}
  .bubble{font-size:14px}
}