/* ============================================================
   TELESTO 2026 — The Gravity Board (live rankings)
   ============================================================ */

.board-wrap{max-width:1060px;margin:0 auto;padding:0 var(--edge)}
.board-hero{padding:clamp(7rem,6rem + 6vw,10rem) 0 2.4rem;text-align:center;position:relative}
.board-hero .eyebrow{margin-bottom:1.2rem}
.board-hero h1{
  font-family:var(--f-display);text-transform:uppercase;color:var(--white);
  font-size:clamp(2.2rem,1.3rem + 4.6vw,4.6rem);line-height:.98;letter-spacing:.02em;
}
.board-hero h1 .g{background:var(--corona);-webkit-background-clip:text;background-clip:text;color:transparent}
.board-hero .sub{margin-top:1rem;color:var(--ink-dim);font-size:1.02rem;max-width:46ch;
  margin-inline:auto}

/* live status strip */
.status{
  display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem;
}
.chip{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);background:rgba(20,13,32,.6);
  border:1px solid var(--hairline);border-radius:2px;padding:.5em .9em;
}
.chip b{color:var(--ink);font-weight:400}
.chip.live{color:var(--gold-light);border-color:var(--gold-hairline)}
.chip.round{color:var(--lavender);border-color:var(--hairline-2)}
.chip.demo{color:#1c1204;background:var(--corona);border-color:transparent;font-weight:700}

/* ---------- Top 3 constellation ---------- */
.podium{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:end;
  max-width:760px;margin:2.8rem auto 3rem;
}
.pod{
  position:relative;text-align:center;padding:1.6rem 1rem 1.4rem;
  border:1px solid var(--hairline);border-radius:6px;overflow:hidden;
  background:linear-gradient(180deg,var(--surface),rgba(14,9,22,.3));
  transition:transform .5s var(--ease),border-color .5s var(--ease);
}
.pod .orb{
  width:56px;height:56px;margin:0 auto .9rem;border-radius:50%;position:relative;
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 40%,rgba(230,187,126,.25),rgba(20,13,32,.9));
  border:1px solid var(--gold-hairline);
  font-family:var(--f-display);font-size:1.1rem;color:var(--gold-light);
}
.pod .orb::after{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px solid var(--hairline-2);}
.pod .pod-name{font-family:var(--f-display);text-transform:uppercase;font-size:.82rem;
  letter-spacing:.04em;color:var(--white);line-height:1.2;min-height:2.2em;
  display:flex;align-items:center;justify-content:center;
  overflow-wrap:anywhere;min-width:0}
.pod .pod-score{font-family:var(--f-mono);font-size:1.5rem;color:var(--gold-light);margin-top:.5rem;
  font-variant-numeric:tabular-nums}
.pod .pod-pts{display:block;font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:.3rem}
.pod .pod-tag{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:.35rem}
.pod.p1{transform:translateY(-22px);border-color:var(--gold-hairline);
  box-shadow:0 0 50px -12px rgba(190,115,5,.6)}
.pod.p1 .orb{width:70px;height:70px;font-size:1.4rem;
  background:radial-gradient(circle at 50% 40%,rgba(230,187,126,.5),rgba(20,13,32,.9));
  box-shadow:0 0 26px rgba(230,187,126,.55)}
.pod.p1 .pod-score{font-size:1.9rem}
.pod .crown{font-family:var(--f-cere);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-light);margin-bottom:.5rem}
@media (max-width:620px){
  .podium{max-width:100%;gap:.5rem}
  .pod{padding:1.1rem .5rem}
  .pod.p1{transform:translateY(-12px)}
  .pod .pod-name{font-size:.68rem}
}

/* ---------- The board ---------- */
.board{
  list-style:none;margin:0 0 1rem;padding:0;
  border:1px solid var(--hairline);border-radius:8px;overflow:hidden;
  background:rgba(11,7,16,.5);
}
.board-legend{
  display:grid;grid-template-columns:56px 30px 1fr;gap:1rem;
  padding:.9rem 1.4rem;border-bottom:1px solid var(--hairline);
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);
}
.board-legend .r-score{text-align:right}
.row{
  display:grid;grid-template-columns:56px 30px 1fr;gap:1rem;align-items:center;
  padding:1.05rem 1.4rem;position:relative;
  border-bottom:1px solid var(--hairline);
  transition:transform .62s var(--ease),background .35s var(--ease);
  will-change:transform;background:transparent;
}
.row:last-child{border-bottom:0}
.row:hover{background:rgba(26,17,48,.5)}
.rank{font-family:var(--f-mono);font-size:1.35rem;color:var(--ink-dim);
  font-variant-numeric:tabular-nums;line-height:1}
.delta{font-size:.8rem;display:flex;align-items:center;justify-content:center;height:1.2em}
.delta.up{color:var(--gold-light)}
.delta.down{color:#8f7fb0}
.delta.same{color:var(--ink-faint)}
.cell-main{min-width:0}
.name-line{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.55rem;flex-wrap:wrap}
.tname{font-family:var(--f-display);text-transform:uppercase;color:var(--white);
  font-size:.98rem;letter-spacing:.02em;line-height:1.25;
  overflow-wrap:anywhere;min-width:0}
.ttag{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint)}
.track{position:relative;height:12px;border-radius:6px;background:rgba(179,141,227,.1);overflow:hidden}
.fill{position:absolute;inset:0 auto 0 0;height:100%;border-radius:6px;
  background:var(--corona);width:0;
  transition:width .95s var(--ease);
  box-shadow:0 0 14px rgba(190,115,5,.35);}
.score{font-family:var(--f-mono);font-size:1.3rem;color:var(--ink);text-align:right;
  font-variant-numeric:tabular-nums;line-height:1}
.score .pts{display:block;font-size:.56rem;letter-spacing:.18em;color:var(--ink-faint);margin-top:.3rem}

/* leader — the event horizon */
.row.lead{background:linear-gradient(90deg,rgba(190,115,5,.1),transparent 60%)}
.row.lead .rank{color:var(--gold-light)}
.row.lead .tname{color:var(--gold-light)}
.row.lead .fill{box-shadow:0 0 22px rgba(230,187,126,.6)}
.row.lead .name-line::after{
  content:"◐ Event Horizon";
  font-family:var(--f-cere);font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-light);border:1px solid var(--gold-hairline);border-radius:2px;
  padding:.25em .6em;white-space:nowrap;
}
.row-empty{display:block;text-align:center;font-family:var(--f-mono);font-size:.78rem;
  letter-spacing:.12em;color:var(--ink-dim);padding:2rem 1rem}

/* flash when a score changes */
.row.bump .fill{box-shadow:0 0 26px rgba(230,187,126,.9)}
.score.bump{color:var(--gold-light);transition:color .1s}

@media (prefers-reduced-motion:reduce){
  .row{transition:background .35s}
  .fill{transition:none}
}
@media (max-width:560px){
  .board-hero{padding-top:6.5rem}
  .board-hero h1{font-size:2.05rem;letter-spacing:0;line-height:1.04}
  .chip{font-size:.62rem;padding:.45em .7em}
  .podium{gap:.4rem}
  .pod{border-radius:5px}
  .pod .orb{width:42px;height:42px;font-size:.85rem;margin-bottom:.6rem}
  .pod.p1 .orb{width:52px;height:52px;font-size:1.05rem}
  .pod .pod-name{font-size:.62rem;min-height:2.6em}
  .pod .pod-score{font-size:1.1rem}
  .pod.p1 .pod-score{font-size:1.35rem}
  .pod .pod-tag{font-size:.48rem;letter-spacing:.08em}
  .pod .crown{font-size:.5rem}
}
@media (max-width:600px){
  .board-legend{grid-template-columns:38px 1fr;gap:.6rem;padding:.8rem 1rem}
  .board-legend .l-delta{display:none}
  .row{grid-template-columns:38px 1fr;gap:.6rem;padding:.9rem 1rem}
  .row .delta{display:none}
  .rank{font-size:1.05rem}
  .tname{font-size:.86rem}
  .score{font-size:1.05rem}
  .row.lead .name-line::after{display:none}
}


/* ---------- Projector mode ---------- */
body.projector .nav,
body.projector .footer,
body.projector .footer{display:none}
body.projector .board-hero{padding-top:2.2rem;padding-bottom:1rem}
body.projector .board-hero h1{font-size:clamp(2rem,4.5vw,3.6rem)}
body.projector .podium{margin:1.6rem auto 2rem}
body.projector .board-wrap{max-width:1280px}
body.projector .row{padding:1.25rem 1.6rem}
body.projector .tname{font-size:1.15rem}
body.projector .score{font-size:1.55rem}
body.projector .track{height:15px;border-radius:8px}
body.projector .fill{border-radius:8px}
body.projector .rank{font-size:1.6rem}


.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* ================= MOTION LAYER (v6) ================= */
/* living sheen on the event-horizon bar */
@media (prefers-reduced-motion:no-preference){
  .row.lead .fill::after{content:"";position:absolute;inset:0;border-radius:inherit;
    background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%);
    background-size:250% 100%;animation:sheen 3.4s var(--ease) infinite}
}
@keyframes sheen{from{background-position:140% 0}to{background-position:-40% 0}}

/* overtake drama */
.row.moved-up{z-index:2;animation:upflash 1s var(--ease)}
.row.moved-down{animation:downdim 1s var(--ease)}
@keyframes upflash{
  0%{box-shadow:inset 0 0 0 1px rgba(230,187,126,0)}
  30%{box-shadow:inset 0 0 30px -8px rgba(230,187,126,.55),inset 0 0 0 1px rgba(230,187,126,.5)}
  100%{box-shadow:inset 0 0 0 1px rgba(230,187,126,0)}
}
@keyframes downdim{0%{opacity:1}35%{opacity:.55}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.row.moved-up,.row.moved-down{animation:none}}

/* champion change pop */
.pod.p1.crowned{animation:crown .9s var(--ease)}
@keyframes crown{
  0%{transform:translateY(-22px) scale(1)}
  35%{transform:translateY(-26px) scale(1.05);box-shadow:0 0 90px -8px rgba(230,187,126,.85)}
  100%{transform:translateY(-22px) scale(1)}
}
@media (prefers-reduced-motion:reduce){.pod.p1.crowned{animation:none}}

/* slow orbital ring behind the podium */
.podium{position:relative}
.podium::before{content:"";position:absolute;left:50%;top:50%;
  width:min(560px,92vw);aspect-ratio:1;margin-left:calc(min(560px,92vw)/-2);
  transform:translateY(-50%);
  border:1px dashed rgba(179,141,227,.16);border-radius:50%;
  pointer-events:none;z-index:-1}
@media (prefers-reduced-motion:no-preference){
  .podium::before{animation:podspin 80s linear infinite}
}
@keyframes podspin{from{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}


/* ---------- Team login ---------- */
.chip-btn{cursor:pointer;transition:color .25s,border-color .25s}
.chip-btn:hover{color:var(--gold-light);border-color:var(--gold-hairline)}
/* Team Login — impossible to miss */
#loginChip{
  color:#1c1204;background:var(--corona);border-color:transparent;
  font-weight:700;box-shadow:0 0 26px rgba(230,187,126,.5);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
#loginChip:hover{color:#1c1204;transform:translateY(-2px);
  box-shadow:0 0 40px rgba(230,187,126,.75)}
@media (prefers-reduced-motion:no-preference){
  #loginChip{animation:loginglow 2.6s var(--ease) infinite}
}
@keyframes loginglow{
  0%,100%{box-shadow:0 0 18px rgba(230,187,126,.4)}
  50%{box-shadow:0 0 34px rgba(230,187,126,.75)}
}
.login-host{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:80}
.login-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(94vw,460px);
  background:rgba(12,8,20,.97);backdrop-filter:blur(18px);
  border-left:1px solid var(--hairline-2);pointer-events:auto;
  transform:translateX(100%);visibility:hidden;
  transition:transform .45s var(--ease),visibility 0s .45s;
  display:flex;flex-direction:column;padding:2.4rem 2.2rem;overflow-y:auto;
}
.login-panel.open{transform:none;visibility:visible;
  transition:transform .45s var(--ease)}
.lg-close{position:absolute;top:.9rem;right:1rem;background:none;border:0;
  color:var(--ink-dim);cursor:pointer;font-size:1.5rem;line-height:1}
.lg-title{font-family:var(--f-display);text-transform:uppercase;color:var(--white);
  font-size:1.4rem;letter-spacing:.06em;margin-bottom:1.8rem}
.lg-label{display:block;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-faint);margin:1.1rem 0 .45rem}
.lg-input{
  width:100%;padding:.95em 1em;border-radius:3px;
  background:rgba(179,141,227,.07);border:1px solid var(--hairline-2);
  color:var(--ink);font-family:var(--f-body);font-size:1.1rem;
}
.lg-input:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px;border-color:transparent}
.lg-passwrap{position:relative}
.lg-passwrap .lg-input{padding-right:3.1em}
.lg-eye{
  position:absolute;top:50%;right:.65em;transform:translateY(-50%);
  background:none;border:0;cursor:pointer;color:var(--ink-dim);
  padding:.35em;line-height:0;border-radius:3px;transition:color .2s;
}
.lg-eye:hover{color:var(--gold-light)}
.lg-eye .eye-shut{display:none}
.lg-eye[aria-pressed="true"] .eye-open{display:none}
.lg-eye[aria-pressed="true"] .eye-shut{display:block}
.lg-go{margin-top:1.3rem;width:100%;justify-content:center}
.lg-err{color:#e08f8f;font-size:.82rem;margin-top:.8rem;min-height:1.2em}
.lg-hint{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.06em;
  color:var(--ink-faint);margin-top:1rem;line-height:1.7}
.lg-whocap{font-family:var(--f-cere);font-size:.6rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold-light)}
.lg-who{font-family:var(--f-display);text-transform:uppercase;color:var(--white);
  font-size:1.35rem;margin:.35rem 0 1.5rem;overflow-wrap:anywhere}
.lg-rounds{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.4rem}
.rnd{
  font-family:var(--f-mono);font-size:.92rem;color:var(--lavender);
  background:rgba(179,141,227,.08);border:1px solid var(--hairline-2);
  border-radius:3px;padding:.45em .7em;cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;
}
.rnd:hover{color:var(--white)}
.rnd.on{color:#1c1204;background:var(--corona);border-color:transparent;font-weight:700}
.lg-rank{display:flex;align-items:baseline;gap:.8rem;padding:.7rem 0;
  border-bottom:1px dashed var(--hairline)}
.lg-rank.sub .lg-num{font-size:2rem;color:var(--lavender)}
.lg-num{font-family:var(--f-mono);font-size:3rem;color:var(--gold-light);
  font-variant-numeric:tabular-nums;line-height:1}
.lg-cap{font-size:.95rem;color:var(--ink-dim)}
.lg-note{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:.8rem}
.lg-wait{color:var(--ink-dim);font-size:.9rem;line-height:1.7}
.lg-logout{
  margin-top:auto;padding:.7em;font-family:var(--f-mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);
  background:none;border:1px solid var(--hairline);border-radius:3px;cursor:pointer;
  transition:color .2s,border-color .2s;
}
.lg-logout:hover{color:var(--white);border-color:var(--hairline-2)}
body.projector .login-host{display:none}