/* ---------- Lobby: Fortnite-style character select ---------- */
.lobby-body{overflow:hidden;height:100dvh}
.lobby{position:relative;height:100dvh;width:100%;overflow:hidden;touch-action:pan-y;
  display:grid;grid-template-columns:1fr;grid-template-rows:1fr auto;
  transition:background-color .8s var(--ease-out);
  --stageH:min(78dvh,900px);
}

/* accent glow behind the stage */
.lobby__glow{position:absolute;left:50%;top:46%;width:min(120vw,1400px);aspect-ratio:1.35;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 26%,transparent),color-mix(in srgb,var(--accent) 8%,transparent) 55%,transparent 72%);
  filter:blur(10px);opacity:.9;pointer-events:none;transition:background .8s var(--ease-out)}
/* ghost name */
.lobby__ghost{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font-weight:800;letter-spacing:-.06em;line-height:1;
  font-size:clamp(9rem,29vw,30rem);color:transparent;-webkit-text-stroke:1.5px rgba(21,19,22,.09);white-space:nowrap;pointer-events:none;user-select:none;
  transition:opacity .5s,transform .8s var(--ease-out)}
.lobby__ghost.is-swapping{opacity:0;transform:translate(-50%,-46%)}
.lobby__ghost.is-small{font-size:clamp(4rem,12vw,12rem);letter-spacing:-.04em}

.lobby__kicker{position:absolute;top:clamp(74px,11vh,120px);left:50%;transform:translateX(-50%);z-index:5;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:var(--ink-soft);display:flex;align-items:center;gap:14px;white-space:nowrap}
.lobby__kicker::before,.lobby__kicker::after{content:"";width:34px;height:1.5px;background:currentColor;opacity:.4}
@media (max-width:400px){.lobby__kicker::before,.lobby__kicker::after{display:none}.lobby__kicker{letter-spacing:.2em}}

/* arrows */
.arrow{position:absolute;bottom:clamp(22px,4.5vh,44px);z-index:30;width:64px;height:64px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;box-shadow:0 18px 40px -14px rgba(21,19,22,.7);transition:transform .3s var(--ease-spring),background .3s,opacity .3s}
.arrow svg{width:26px;height:26px}
.arrow--prev{left:calc(50% - var(--rosterW,520px)/2 - 84px)} .arrow--next{right:calc(50% - var(--rosterW,520px)/2 - 84px)}
.arrow:hover{transform:scale(1.1);background:var(--accent)}
.arrow:active{transform:scale(.94)}

/* stage + cards */
.stage{position:absolute;left:0;right:0;top:50%;height:var(--stageH);margin-top:calc(var(--stageH) * -.52);pointer-events:none}
.stage__pedestal{position:absolute;left:50%;bottom:6%;width:min(46vh,520px);height:min(9vh,100px);transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(21,19,22,.32),rgba(21,19,22,.10) 55%,transparent 72%);mix-blend-mode:multiply;filter:blur(6px);
  transition:width .6s var(--ease-spring),opacity .4s}
.card{position:absolute;left:50%;top:0;height:100%;aspect-ratio:3/4;transform:translateX(-50%);pointer-events:none;mix-blend-mode:multiply;
  transition:transform .75s var(--ease-spring),opacity .6s var(--ease-out),filter .6s;will-change:transform,opacity;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 90%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 90%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.card img,.card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom}
.card video{opacity:0;transition:opacity .35s}
.card.is-playing video{opacity:1}
.card.is-active{transform:translateX(-50%) scale(1);opacity:1;filter:none;pointer-events:auto;cursor:pointer;z-index:3}
.card.is-prev{transform:translateX(calc(-50% - 39vw)) translateY(-30%) scale(.44);opacity:.3;filter:blur(1.5px) saturate(.6);pointer-events:auto;cursor:pointer;z-index:2}
.card.is-next{transform:translateX(calc(-50% + 39vw)) translateY(-30%) scale(.44);opacity:.3;filter:blur(1.5px) saturate(.6);pointer-events:auto;cursor:pointer;z-index:2}
.card.is-far{transform:translateX(-50%) scale(.3);opacity:0;z-index:1}
.card.is-far-left{transform:translateX(calc(-50% - 60vw)) scale(.4);opacity:0}
.card.is-far-right{transform:translateX(calc(-50% + 60vw)) scale(.4);opacity:0}
.card.is-active:hover{transform:translateX(-50%) scale(1.02)}
.card.is-prev:hover,.card.is-next:hover{opacity:.65;filter:blur(0) saturate(.9)}

/* the blank slot */
.card--blank{-webkit-mask-image:none;mask-image:none;mix-blend-mode:normal}
.blank{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:7%}
.blank__svg{position:relative;height:84%;width:auto;filter:drop-shadow(0 30px 40px rgba(21,19,22,.35));animation:breathe 4.5s ease-in-out infinite;transform-origin:50% 100%}
.blank__ring{position:absolute;left:50%;bottom:3%;width:min(48vh,540px);height:min(10vh,110px);transform:translateX(-50%);border-radius:50%;border:2px dashed rgba(21,19,22,.35);animation:spin 24s linear infinite}
@keyframes spin{to{transform:translateX(-50%) rotate(360deg)}}
.blank__glow{position:absolute;left:50%;bottom:3%;width:min(48vh,540px);height:min(10vh,110px);transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(21,19,22,.35),transparent 70%);filter:blur(8px)}
@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1.2%) scale(1.012,1.02)}}
h1.info__name--long{font-size:clamp(2rem,3.6vw,3.6rem)}
.blank__label{position:absolute;left:50%;bottom:-2%;transform:translateX(-50%);white-space:nowrap;font-weight:700;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.7);padding:8px 14px;border-radius:999px;border:1px solid var(--line)}

/* info */
.info{position:absolute;left:clamp(18px,5vw,72px);bottom:clamp(96px,15vh,170px);z-index:20;max-width:min(36vw,480px);display:flex;flex-direction:column;gap:14px}
.info__name{transition:transform .5s var(--ease-out),opacity .4s}
.info.is-swapping .info__name,.info.is-swapping .info__tag,.info.is-swapping .eyebrow,.info.is-swapping .info__bubble{opacity:0;transform:translateY(12px)}
.info__tag{font-size:clamp(1rem,1.35vw,1.25rem);color:var(--ink-soft);max-width:34ch;transition:transform .5s var(--ease-out) .05s,opacity .4s .05s}
.info .eyebrow{transition:transform .5s var(--ease-out),opacity .4s}
.info__bubble{position:relative;align-self:flex-start;background:var(--bubble);color:var(--ink);padding:12px 18px;border-radius:22px;border-bottom-left-radius:6px;font-size:.98rem;box-shadow:0 10px 30px -14px rgba(21,19,22,.4);transition:transform .5s var(--ease-out) .1s,opacity .4s .1s;margin-top:4px}
.info__bubble::before{content:"";position:absolute;left:-8px;bottom:0;width:18px;height:18px;background:var(--bubble);border-bottom-right-radius:16px;clip-path:polygon(100% 0,100% 100%,0 100%)}
.info__bubble span::after{content:"";display:inline-block;width:8px;height:1.1em;vertical-align:-3px;margin-left:2px;background:var(--accent);animation:caret 1s steps(2) infinite;border-radius:2px}
@keyframes caret{50%{opacity:0}}
.info__cta{margin-top:8px;display:flex;gap:12px;flex-wrap:wrap}

/* roster chips */
.roster{position:absolute;left:50%;bottom:clamp(22px,4.5vh,44px);transform:translateX(-50%);z-index:25;display:flex;gap:10px;padding:8px;border-radius:999px;background:rgba(255,255,255,.42);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.6);box-shadow:0 16px 40px -20px rgba(21,19,22,.5)}
.chip{display:flex;align-items:center;gap:10px;height:48px;padding:0 16px 0 6px;border-radius:999px;transition:background .3s,transform .3s var(--ease-spring),color .3s;color:var(--ink-soft);font-weight:600;font-size:.85rem}
.chip__av{width:36px;height:36px;border-radius:50%;overflow:hidden;background:var(--bg-deep);display:grid;place-items:center;flex:none;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .3s}
.chip__av img{width:100%;height:100%;object-fit:cover;object-position:center 18%;transform:scale(1.6);transform-origin:center 22%}
.chip__av--blank{font-weight:800;color:#fff;background:var(--ink)}
.chip:hover{background:rgba(255,255,255,.7);color:var(--ink)}
.chip.is-active{background:var(--ink);color:#fff;transform:translateY(-3px)}
.chip.is-active .chip__av{box-shadow:inset 0 0 0 2px var(--accent)}

/* counter + hint */
.counter{position:absolute;right:clamp(18px,5vw,72px);bottom:clamp(100px,15vh,170px);z-index:20;display:flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums;font-weight:700;font-size:.9rem;color:var(--ink-soft)}
.counter span:first-child{color:var(--ink);font-size:1.6rem;letter-spacing:-.03em}
.counter i{width:40px;height:1.5px;background:currentColor;opacity:.4}
.hint{position:absolute;right:clamp(18px,5vw,72px);bottom:clamp(58px,9.5vh,110px);z-index:20;font-size:.72rem;color:var(--ink-soft);display:flex;align-items:center;gap:6px}
.hint kbd{font:inherit;font-weight:700;font-size:.7rem;padding:3px 7px;border-radius:6px;border:1px solid var(--line);background:rgba(255,255,255,.5)}
.hint__sep{width:12px}

/* intro */
.lobby.is-booting .card.is-active{transform:translateX(-50%) translateY(6%) scale(.96);opacity:0}
.lobby.is-booting .info>*{opacity:0;transform:translateY(14px)}
.lobby.is-booting .roster,.lobby.is-booting .arrow{opacity:0;transform:translateY(10px)}
.lobby.is-booting .arrow{transform:scale(.8)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .card.is-prev{transform:translateX(calc(-50% - 41vw)) translateY(-32%) scale(.4)}
  .card.is-next{transform:translateX(calc(-50% + 41vw)) translateY(-32%) scale(.4)}
  .info{max-width:min(36vw,440px)}
  .info{max-width:min(46vw,460px)}
}
@media (max-width:1100px){
  .lobby{--stageH:min(55dvh,560px);grid-template-rows:auto}
  .lobby__kicker{top:calc(68px + env(safe-area-inset-top))}
  .lobby__ghost{top:34%;font-size:clamp(6rem,30vw,12rem)}
  .lobby__ghost.is-small{font-size:clamp(2.6rem,11vw,5rem)}
  .lobby__glow{top:36%;width:150vw}
  .stage{top:calc(96px + env(safe-area-inset-top));margin-top:0}
  .card.is-prev{transform:translateX(calc(-50% - 44vw)) scale(.5);opacity:.3}
  .card.is-next{transform:translateX(calc(-50% + 44vw)) scale(.5);opacity:.3}
  .arrow{width:52px;height:52px;bottom:auto;top:calc(96px + env(safe-area-inset-top) + var(--stageH)/2);transform:translateY(-50%)}
  .arrow--prev{left:12px} .arrow--next{right:12px}
  .arrow:hover{transform:translateY(-50%) scale(1.05)} .arrow:active{transform:translateY(-50%) scale(.94)}
  .lobby.is-booting .arrow{transform:translateY(-50%) scale(.8)}
  .arrow svg{width:22px;height:22px}
  .info{left:20px;right:20px;max-width:none;bottom:calc(84px + env(safe-area-inset-bottom));gap:6px;align-items:center;text-align:center}
  .info__cta{margin-top:4px}
  .info__bubble{align-self:center}
  h1.info__name{font-size:clamp(2.6rem,13vw,4.2rem)}
  h1.info__name.info__name--long{font-size:clamp(1.7rem,7.2vw,2.3rem)}
  .info__bubble{display:none}
  .info__tag{max-width:none;font-size:1rem}
  .info__cta{justify-content:center}
  .btn{height:50px;padding:0 22px;font-size:.95rem}
  .counter{display:none} .hint{display:none}
  .roster{bottom:calc(14px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px);overflow-x:auto;scrollbar-width:none;padding:6px}
  .roster::-webkit-scrollbar{display:none}
  .chip{height:42px;padding:0 12px 0 4px;font-size:.8rem}
  .chip span:last-child{display:none}
  .chip.is-active span:last-child{display:inline}
  .chip__av{width:34px;height:34px}
  .stage__pedestal{bottom:4%;width:min(56vw,420px);height:min(6vh,64px)}
  .blank__ring,.blank__glow{width:min(60vw,420px);height:min(6vh,64px)}
}
@media (max-height:640px) and (max-width:1100px){
  .lobby{--stageH:46dvh}
  .info{bottom:calc(80px + env(safe-area-inset-bottom))}
  .info__bubble{display:none}
}

/* landscape phones: stage left, info right */
@media (max-width:960px) and (orientation:landscape) and (max-height:520px){
  .lobby{--stageH:78dvh}
  .lobby__kicker,.lobby__ghost,.counter,.hint{display:none}
  .stage{left:0;right:50%;top:11dvh;margin-top:0}
  .card.is-prev,.card.is-next,.card.is-far{opacity:0;pointer-events:none}
  .info{left:52%;right:16px;top:50%;bottom:auto;transform:translateY(-58%);max-width:none;align-items:flex-start;text-align:left;gap:6px}
  .info__bubble{display:none}
  h1.info__name{font-size:clamp(2rem,7vh,3rem)}
  h1.info__name.info__name--long{font-size:clamp(1.4rem,5vh,2rem)}
  .info__tag{font-size:.9rem}
  .arrow{top:auto;bottom:12px;transform:none;width:44px;height:44px}
  .arrow--prev{left:52%} .arrow--next{left:calc(52% + 56px);right:auto}
  .arrow:hover{transform:scale(1.06)} .arrow:active{transform:scale(.94)}
  .lobby.is-booting .arrow{transform:scale(.8)}
  .roster{display:none}
  .stage__pedestal{width:min(60vh,360px);height:min(8vh,60px)}
  .top .pill--ink{display:none}
}