/* =========================================================
   ARCANA ROYALE — interface skin
   ========================================================= */
:root{
  --ink:#f4f7ff;
  --dim:#a8b2d8;
  --gold:#ffd479;
  --cyan:#7cf6ff;
  --violet:#b48cff;
  --rose:#ff6b9d;
  --panel:rgba(10,12,26,.82);
  --line:rgba(150,172,255,.30);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  background:#04050c;
  color:var(--ink);
  font-family:var(--mono);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  user-select:none;
  -webkit-user-select:none;
}

#stage{ position:fixed; inset:0; overflow:hidden; }
#game{ display:block; width:100%; height:100%; cursor:none; background:#04050c; }

.hidden{ display:none !important; }

/* =========================== HUD =========================== */
.hud{
  position:absolute; inset:0;
  pointer-events:none;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.hud-top{
  position:absolute; top:18px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
}
.zonebox{
  display:flex; align-items:center; gap:12px;
  padding:8px 18px 8px 10px;
  background:linear-gradient(180deg, rgba(20,24,48,.86), rgba(9,11,24,.86));
  border:1px solid var(--line);
  border-radius:999px;
  box-shadow:0 0 34px rgba(90,120,255,.16), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
}
.zone-clock{
  width:26px; height:26px; border-radius:50%;
  border:2px solid rgba(130,150,255,.28);
  display:grid; place-items:center;
  position:relative;
}
.zone-clock i{
  position:absolute; inset:3px; border-radius:50%;
  border:2px solid transparent;
  border-top-color:var(--cyan);
  border-right-color:rgba(124,246,255,.4);
  animation:spin 2.4s linear infinite;
  transform-origin:50% 50%;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.zone-text{ line-height:1.25; }
#phaseLabel{ color:var(--dim); font-size:10px; letter-spacing:.18em; }
#phaseTimer{ color:var(--ink); font-size:13px; font-weight:700; letter-spacing:.12em; }

.hud-left{ position:absolute; left:22px; bottom:22px; }
.vitals{
  width:272px; padding:11px 13px 10px;
  background:linear-gradient(180deg, rgba(20,24,48,.82), rgba(9,11,24,.86));
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 0 34px rgba(90,120,255,.14), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(6px);
  position:relative;
  overflow:hidden;
}
/* a class-coloured spine down the panel edge — the one bit of identity that
   follows you through the whole match */
.vitals::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--cls, #8fe9ff);
  box-shadow:0 0 16px var(--cls, #8fe9ff);
}
.vname{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:8px;
}
.vname .who{ color:#fff; font-size:11px; letter-spacing:.26em; font-weight:700; }
.vname .cls{
  color:var(--cls, #8fe9ff); font-size:9px; letter-spacing:.2em;
  padding:2px 7px; border-radius:999px;
  border:1px solid currentColor; opacity:.9;
}
.vmeta{
  margin-top:2px; color:var(--dim); font-size:8.5px; letter-spacing:.16em;
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
}
/* Connection quality sits with the position line: it is match information, not
   another bar to win. No reading until a pong has actually been measured. */
.net-rtt{
  flex:none; font-variant-numeric:tabular-nums; letter-spacing:.1em;
  color:#8f9ac8;
}
.net-rtt.rtt-good{ color:var(--cyan); }
.net-rtt.rtt-fair{ color:var(--gold); }
.net-rtt.rtt-poor{ color:var(--rose); }

.bar{
  position:relative; height:15px; border-radius:4px; overflow:hidden;
  background:rgba(6,8,18,.9);
  border:1px solid rgba(120,140,220,.24);
  margin-bottom:6px;
  box-shadow:inset 0 0 12px rgba(0,0,0,.8);
}
.bar i{
  position:absolute; left:0; top:0; bottom:0; width:100%;
  transform-origin:left center;
  transition:width .09s linear;
  display:block;
}
.bar b{
  position:absolute; right:7px; top:0; line-height:13px;
  font-size:10px; font-weight:700; letter-spacing:.1em;
  color:#fff; text-shadow:0 1px 3px #000; z-index:2;
}
.bar.hp i{ background:linear-gradient(90deg,#ff3b6b,#ff7a8f); box-shadow:0 0 16px rgba(255,70,110,.7); }
.bar.mp i{ background:linear-gradient(90deg,#2b6dff,#63c8ff); box-shadow:0 0 16px rgba(70,150,255,.7); }
.bar.rite i{ background:linear-gradient(90deg,#8a5cff,#ffd479); box-shadow:0 0 18px rgba(180,140,255,.75); }
.bar.rite.ready{ border-color:var(--gold); animation:pulseGold 1s ease-in-out infinite; }
.bar.heat{ height:9px; }
.bar.heat i{ background:linear-gradient(90deg,#3ad6ff,#ffd479,#ff6a3d); box-shadow:0 0 14px rgba(255,150,90,.75); }
.bar.heat b{ line-height:7px; font-size:8px; letter-spacing:.14em; }
.bar.heat.hot i{ background:linear-gradient(90deg,#ff8a5c,#ff3a3a); box-shadow:0 0 20px rgba(255,80,60,.95); }
.bar.heat.jammed{ border-color:#ff5a4a; animation:heatJam .5s ease-in-out infinite; }
@keyframes heatJam{
  0%,100%{ box-shadow:0 0 6px rgba(255,90,70,.5); }
  50%{ box-shadow:0 0 20px rgba(255,90,70,.95); }
}
/* Blink: the bar drains as you dash and refills as it comes back, so the
   cooldown is a thing you can see rather than a number you memorise. */
.bar.blink{ height:9px; }
.bar.blink i{ background:linear-gradient(90deg,#5ad1ff,#a6e9ff); box-shadow:0 0 12px rgba(90,209,255,.7); }
.bar.blink b{ line-height:7px; font-size:8px; letter-spacing:.14em; }
.bar.blink.ready{ border-color:#8fe6ff; }
.bar.blink.ready i{ background:linear-gradient(90deg,#8fe6ff,#ffffff); box-shadow:0 0 18px rgba(150,235,255,.95); }
.bar.blink.ready b{ color:#eafaff; }
.bar.xp{ height:11px; }
.bar.xp i{ background:linear-gradient(90deg,#3ad6ff,#ffd479); box-shadow:0 0 14px rgba(90,220,255,.8); }
.bar.xp b{ line-height:9px; font-size:9px; letter-spacing:.14em; }
.bar.xp.ping{ animation:xpPing .55s ease-out; }
@keyframes xpPing{
  0%{ box-shadow:inset 0 0 12px rgba(0,0,0,.8), 0 0 4px rgba(255,255,255,.5); }
  40%{ box-shadow:inset 0 0 12px rgba(0,0,0,.8), 0 0 30px rgba(255,255,255,.95); }
  100%{ box-shadow:inset 0 0 12px rgba(0,0,0,.8); }
}
@keyframes pulseGold{
  0%,100%{ box-shadow:inset 0 0 12px rgba(0,0,0,.8), 0 0 6px rgba(255,212,121,.5); }
  50%{ box-shadow:inset 0 0 12px rgba(0,0,0,.8), 0 0 26px rgba(255,212,121,.95); }
}

.hud-right{
  position:absolute; right:22px; top:18px;
  display:flex; gap:10px;
}
.stat{
  min-width:86px; text-align:center; padding:8px 12px 7px;
  background:linear-gradient(180deg, rgba(20,24,48,.8), rgba(9,11,24,.8));
  border:1px solid var(--line); border-radius:10px;
  backdrop-filter: blur(6px);
}
.stat b{ display:block; font-size:20px; line-height:1; color:#fff; letter-spacing:.04em; }
.stat span{ display:block; margin-top:5px; font-size:9px; color:var(--dim); letter-spacing:.2em; }

/* element runes */
.runebar{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%);
  display:flex; gap:8px; align-items:flex-end;
}
.rune{
  width:62px; padding:8px 4px 6px;
  background:linear-gradient(180deg, rgba(20,24,48,.72), rgba(8,10,20,.9));
  border:1px solid rgba(120,140,220,.2);
  border-radius:10px;
  text-align:center;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  opacity:.62;
}
.rune.on{
  opacity:1;
  transform:translateY(-6px) scale(1.06);
  border-color:currentColor;
  box-shadow:0 0 22px -2px currentColor, inset 0 0 18px -8px currentColor;
}
.rune canvas{ display:block; margin:0 auto 2px; width:30px; height:30px; }
.rune .rk{ font-size:9px; color:var(--dim); letter-spacing:.14em; }
.rune .rn{ font-size:9px; letter-spacing:.08em; color:currentColor; }

/* boss bar */
.bossbar{
  position:absolute; left:50%; top:74px; transform:translateX(-50%);
  width:min(560px, 78vw);
  pointer-events:none;
  z-index:6;
}
.bosshead{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:10px; letter-spacing:.3em;
  color:#ff9ec9; text-transform:uppercase;
  margin-bottom:5px;
  text-shadow:0 0 16px rgba(255,60,120,.8);
}
.bosshead b{ color:#fff; letter-spacing:.14em; }
.bosshead em{
  display:block; font-style:normal; font-size:8px; letter-spacing:.2em;
  color:#8a90b8; margin-top:3px; text-transform:uppercase;
}
.bosstrack{
  height:11px; border-radius:6px; overflow:hidden;
  background:rgba(8,6,16,.9);
  border:1px solid rgba(255,120,170,.4);
  box-shadow:0 0 28px -6px rgba(255,60,120,.8), inset 0 0 14px rgba(0,0,0,.9);
}
.bosstrack i{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg,#8a2b6b,#ff3d7f 55%,#ff9ec9);
  box-shadow:0 0 18px rgba(255,80,140,.95);
  transition:width .12s linear;
}

/* match size */
.sizerow{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.size-btn{
  padding:9px 18px; cursor:pointer;
  background:linear-gradient(180deg, rgba(22,26,52,.9), rgba(9,11,24,.9));
  border:1px solid rgba(120,140,220,.24);
  border-radius:999px;
  color:var(--dim);
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  transition:.16s ease;
}
.size-btn:hover{ color:#fff; border-color:var(--cyan); }
.size-btn.sel{
  color:#0a0a14; border-color:transparent;
  background:linear-gradient(180deg,#ffe9b0,#ffc14a);
  box-shadow:0 0 24px -6px rgba(255,190,80,.9);
}

/* fusion wire */
.combowire{
  position:absolute; left:50%; bottom:186px; transform:translateX(-50%);
  display:flex; align-items:center; gap:14px;
  padding:5px 16px; border-radius:999px;
  background:rgba(8,10,22,.72);
  border:1px solid rgba(140,160,255,.16);
  font-size:9.5px; letter-spacing:.16em; color:#8e97c4;
  white-space:nowrap; max-width:92vw; overflow:hidden;
  transition:color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.combowire b{ font-weight:700; letter-spacing:.2em; }
.combowire.hot{
  color:#ffd479; border-color:rgba(255,212,121,.55);
  box-shadow:0 0 26px -6px rgba(255,212,121,.85);
  animation:wirePulse .6s ease-in-out infinite;
}
@keyframes wirePulse{ 0%,100%{ opacity:.78; } 50%{ opacity:1; } }

/* ability bar */
.abilitybar{
  position:absolute; left:50%; bottom:104px; transform:translateX(-50%);
  display:flex; gap:8px; align-items:flex-end;
}
.ab{
  position:relative; width:62px; height:64px; overflow:hidden;
  background:linear-gradient(180deg, rgba(20,24,48,.8), rgba(8,10,20,.92));
  border:1px solid rgba(120,140,220,.22);
  border-radius:9px;
  text-align:center;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ab .k{
  position:absolute; top:3px; left:5px;
  font-size:9px; letter-spacing:.06em; color:var(--dim); z-index:3;
}
.ab .n{
  position:absolute; left:0; right:0; bottom:4px;
  font-size:8.5px; letter-spacing:.08em; color:#cfd6ff; z-index:3;
}
.ab .glyph{
  position:absolute; left:50%; top:44%; transform:translate(-50%,-50%);
  width:22px; height:22px; opacity:.9;
}
.ab .glyph canvas{ display:block; width:22px; height:22px; }
/* the mana cost, always visible — red the moment you cannot afford it */
.ab .cost{
  position:absolute; top:2px; right:4px; z-index:3;
  font-size:9px; letter-spacing:.02em; color:#6ea8ff;
}
.ab .cost.poor{ color:#ff6b8a; text-shadow:0 0 10px rgba(255,80,120,.9); }
.ab .cdmask{
  position:absolute; left:0; right:0; bottom:0; height:0%;
  background:rgba(6,8,18,.82);
  border-top:1px solid rgba(160,180,255,.35);
  transition:height .08s linear;
}
.ab .cdtext{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  font-size:13px; font-weight:700; color:#fff; text-shadow:0 1px 4px #000; z-index:3;
}
/* the explicit reason a slot cannot be used */
.ab .why{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); z-index:3;
  font-size:7.5px; letter-spacing:.14em; font-weight:700;
  opacity:0; transition:opacity .12s ease;
}
.ab.cooling .why, .ab.poor .why, .ab.locked .why, .ab.empty .why{ opacity:1; }
.ab.poor .why{ color:#ff6b8a; text-shadow:0 0 10px rgba(255,80,120,.8); }
.ab.locked .why{ color:#c9a4ff; }
.ab.empty .why{ color:#5d668c; }

.ab.ready{
  border-color:rgba(150,248,255,.85);
  box-shadow:0 0 22px -3px rgba(120,240,255,.95), inset 0 0 18px -8px rgba(124,246,255,.9);
}
.ab.ready .n{ color:#fff; }
.ab.ready .cost{ color:#9fd4ff; }
.ab.poor{ border-color:rgba(255,107,138,.5); }
.ab.poor .glyph{ opacity:.4; }
.ab.poor .n{ color:#a8798d; }
.ab.cooling{ border-color:rgba(120,140,220,.3); }
.ab.empty{ opacity:.58; border-style:dashed; border-color:rgba(120,140,220,.4); }
.ab.empty .n{ color:#6d769c; }
.ab.empty .glyph{ opacity:0; }
.ab.filled{ animation:slotFill .5s cubic-bezier(.2,.9,.2,1); }
@keyframes slotFill{
  0%{ transform:scale(.72); box-shadow:0 0 34px 2px rgba(255,255,255,.95); border-color:#fff; }
  60%{ transform:scale(1.06); }
  100%{ transform:scale(1); }
}
.ab.locked{ opacity:.5; }
.ab.locked .n{ color:#8b93bd; }
.ab.rite{ width:68px; }
.ab.rite.ready{ border-color:var(--gold); box-shadow:0 0 26px -4px rgba(255,212,121,.95); }
.ab.rite.ready .why{ color:var(--gold); }
.ab.rite.charging{ border-color:rgba(255,212,121,.4); }
.ab.rite.charging .why{ color:#b99a55; opacity:1; }
.ab.rite.empty .glyph{ opacity:.35; }
.ab.rite.empty .why{ color:#5d668c; }
/* the rite shows a number AND a reason at once, so its reason line sits low */
.ab.rite .why{ top:auto; bottom:15px; transform:none; }
.ab.rite .cdtext{ font-size:11px; top:42%; }

/* skill tooltip — one shared element, positioned above whatever it describes */
.tooltip{
  position:absolute; left:-9999px; top:0; z-index:18;
  width:266px; padding:12px 14px 11px;
  background:linear-gradient(180deg, rgba(18,22,44,.975), rgba(7,9,20,.985));
  border:1px solid rgba(150,172,255,.42);
  border-radius:11px;
  box-shadow:0 22px 52px -16px #000, 0 0 34px -14px rgba(124,246,255,.9);
  pointer-events:none;
  opacity:0;
  transition:opacity .12s ease;
  text-transform:none;
}
.tooltip.on{ opacity:1; }
.tooltip .tt-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-bottom:6px;
}
.tooltip .tt-head b{
  font-size:12px; letter-spacing:.16em; color:#fff; text-transform:uppercase;
}
.tooltip .tt-key{
  flex:none;
  font-size:9px; letter-spacing:.14em; color:#0a0c1a;
  background:var(--cyan); border-radius:4px; padding:1px 6px; font-weight:700;
}
.tooltip .tt-tag{
  display:inline-block; margin-bottom:7px; padding:2px 7px;
  border-radius:999px; font-size:8px; letter-spacing:.2em;
  background:rgba(124,246,255,.16); color:var(--cyan);
  text-transform:uppercase;
}
.tooltip .tt-desc{
  margin:0 0 8px; font-size:10px; line-height:1.55; color:#c3cbe8;
  text-transform:none; letter-spacing:.01em;
}
.tooltip .tt-flavour{
  margin:0 0 9px; font-size:9px; line-height:1.5; color:#8b93bb;
  text-transform:none; letter-spacing:.02em;
}
.tooltip .tt-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:3px 0;
  border-top:1px solid rgba(150,172,255,.12);
  font-size:9px; letter-spacing:.14em; color:#7b84ac; text-transform:uppercase;
}
.tooltip .tt-row b{ color:#fff; font-size:10px; }
.tooltip .tt-row b .bad{ color:#ff6b8a; }
.tooltip .tt-row .bad{ color:#ff6b8a; }
.tooltip .tt-note{
  margin-top:8px; font-size:8.5px; line-height:1.5; color:#6e77a3;
  text-transform:none; letter-spacing:.02em;
}
.tooltip .tt-note.good{ color:var(--gold); letter-spacing:.14em; text-transform:uppercase; }
.tooltip .tt-warn{
  margin-top:7px; font-size:9px; letter-spacing:.18em; color:#ff6b8a;
  text-transform:uppercase;
}

/* boon draft — a right-hand column, so it never covers the bars or the fight */
.draft{
  position:absolute; right:24px; top:50%; transform:translateY(-50%);
  z-index:12;
  width:252px;
  text-align:right;
  animation:draftIn .28s cubic-bezier(.2,.9,.2,1);
}
@keyframes draftIn{ from{ opacity:0; transform:translate(18px,-50%) scale(.97);} to{ opacity:1; transform:translate(0,-50%) scale(1);} }
.draft-head{
  font-size:9.5px; letter-spacing:.26em; color:var(--gold);
  text-shadow:0 0 20px rgba(255,200,90,.9);
  margin-bottom:10px;
  white-space:nowrap;
}
.draft-row{ display:flex; flex-direction:column; gap:10px; align-items:stretch; }
.boon{
  width:100%; padding:12px 13px 11px;
  cursor:pointer; text-align:left;
  background:linear-gradient(180deg, rgba(24,28,58,.95), rgba(8,10,22,.97));
  border:1px solid rgba(140,160,255,.3);
  border-radius:12px;
  color:var(--ink);
  font-family:var(--mono);
  transition:.14s ease;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.95);
}
.boon:hover{ transform:translateX(-5px); border-color:var(--cyan); box-shadow:0 22px 46px -16px rgba(0,0,0,.95), 0 0 28px -8px rgba(124,246,255,.8); }
.boon .tag{
  display:inline-block; margin-bottom:6px; padding:2px 7px;
  border-radius:999px; font-size:8px; letter-spacing:.2em;
  background:rgba(255,255,255,.07); color:var(--dim);
}
.boon.ability .tag{ background:rgba(124,246,255,.16); color:var(--cyan); }
.boon.power .tag{ background:rgba(255,120,60,.18); color:#ffb07a; }
.boon.survival .tag{ background:rgba(101,247,154,.16); color:#65f79a; }
.boon.tempo .tag{ background:rgba(255,212,121,.16); color:var(--gold); }
.boon b{ display:block; font-size:11.5px; letter-spacing:.1em; margin-bottom:5px; color:#fff; }
.boon .desc{ display:block; font-size:9.5px; line-height:1.5; color:#a8b2d8; letter-spacing:.03em; }
.boon .num{
  float:right; width:16px; height:16px; line-height:16px; text-align:center;
  border-radius:4px; background:rgba(255,255,255,.1);
  font-size:9px; color:#fff;
}
.draft-hint{ margin-top:9px; font-size:9px; letter-spacing:.22em; color:#6e77a3; }
.draft-hint b{ color:#fff; }
/* the draft grace, shown plainly: you are safe while this bar lasts */
.draft-guard{
  margin-top:11px; padding:7px 10px;
  border:1px solid rgba(140,200,255,.32);
  border-radius:9px;
  background:linear-gradient(180deg, rgba(30,48,86,.9), rgba(12,20,38,.92));
  font-size:8.5px; letter-spacing:.2em; color:#bfe6ff;
}
.draft-guard b{ color:#fff; }
.draft-guard .track{
  display:block; height:3px; margin-top:6px; border-radius:2px;
  background:rgba(120,180,255,.18); overflow:hidden;
}
.draft-guard .track i{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg, #7cf6ff, #bfe6ff);
  box-shadow:0 0 10px rgba(124,246,255,.9);
}
.draft-guard.gone{ opacity:.4; }

/* feed */
.feed{
  position:absolute; right:22px; top:142px;
  display:flex; flex-direction:column; gap:6px; align-items:flex-end;
  max-width:340px;
}
.feed div{
  padding:5px 10px; border-radius:6px;
  background:rgba(8,10,22,.78);
  border-left:2px solid var(--rose);
  font-size:10px; letter-spacing:.09em; text-transform:none;
  color:#cfd6ff;
  animation:feedIn .25s ease-out, feedOut .5s ease-in 4.4s forwards;
}
@keyframes feedIn{ from{ opacity:0; transform:translateX(18px);} to{ opacity:1; transform:none;} }
@keyframes feedOut{ to{ opacity:0; transform:translateX(12px);} }

/* toasts */
.toasts{
  position:absolute; left:50%; bottom:228px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.toast{
  padding:6px 16px; border-radius:999px;
  background:rgba(14,16,34,.9);
  border:1px solid var(--line);
  color:var(--gold); font-size:11px; letter-spacing:.16em;
  animation:toastIn .3s ease-out, toastOut .5s ease-in 1.7s forwards;
  white-space:nowrap;
}
@keyframes toastIn{ from{ opacity:0; transform:translateY(10px) scale(.96);} to{ opacity:1; transform:none;} }
@keyframes toastOut{ to{ opacity:0; transform:translateY(-14px);} }

.zone-warn{
  position:absolute; left:50%; top:132px; transform:translateX(-50%);
  color:#ff8fb4; font-size:12px; letter-spacing:.32em;
  text-shadow:0 0 18px rgba(255,60,120,.9);
  animation:warnPulse .7s ease-in-out infinite;
}
@keyframes warnPulse{ 0%,100%{opacity:.55;} 50%{opacity:1;} }

/* =========================== SCREENS =========================== */
.overlay{
  position:absolute; inset:0;
  display:grid; place-items:center;
  padding:24px;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(60,40,120,.35), transparent 62%),
    radial-gradient(ellipse at 50% 100%, rgba(10,20,50,.7), transparent 60%),
    rgba(3,4,10,.62);
  backdrop-filter: blur(3px);
  transition:opacity .3s ease;
  z-index:20;
}
.overlay.hidden{ display:none !important; }

.panel{
  width:min(720px, 100%);
  max-height:calc(100vh - 40px);
  overflow:auto;
  text-align:center;
  padding:34px 34px 26px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(90,70,180,.28), transparent 60%),
    linear-gradient(180deg, rgba(13,15,32,.94), rgba(6,7,18,.96));
  border:1px solid rgba(150,170,255,.2);
  border-radius:18px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 30px 90px -20px rgba(0,0,0,.9),
    0 0 120px -30px rgba(120,90,255,.5);
  animation:panelIn .35s cubic-bezier(.2,.9,.2,1);
}
@keyframes panelIn{ from{ opacity:0; transform:translateY(16px) scale(.98);} to{ opacity:1; transform:none;} }

/* ---- the lobby: hero on the left, your mage on the right ----
   Shaped so a future multiplayer build can drop a lobby list into the hero
   column without touching the setup column. */
.panel.lobby{
  width:min(1264px, 100%);
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 604px;
  text-align:left;
  overflow:auto;
  overscroll-behavior:contain;
}
.lobby-hero{
  padding:28px 26px 24px;
  border-right:1px solid rgba(150,170,255,.14);
  background:
    radial-gradient(ellipse at 30% 0%, rgba(90,70,180,.30), transparent 62%),
    linear-gradient(180deg, rgba(14,16,36,.5), rgba(6,7,18,.2));
  min-width:0;
}
.lobby-setup{
  padding:22px 22px 18px;
  display:flex; flex-direction:column; gap:11px;
  background:linear-gradient(180deg, rgba(10,12,28,.7), rgba(5,6,16,.8));
  min-width:0;
}
.setup-block{ display:flex; flex-direction:column; gap:7px; }

/* what is actually out there in a match */
.hero-notes{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px; margin:4px 0 16px;
}
.hero-notes div{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px;
  border:1px solid rgba(150,170,255,.14);
  border-radius:10px;
  background:rgba(10,12,28,.5);
}
.hero-notes b{
  font-family:var(--serif); font-size:20px; line-height:1; color:var(--gold);
  text-shadow:0 0 18px rgba(255,200,90,.7);
}
.hero-notes span{ font-size:8.5px; letter-spacing:.18em; color:var(--dim); }

/* name */
.namerow{ display:flex; gap:8px; }
.nameinput{
  flex:1; min-width:0;
  padding:10px 13px;
  background:rgba(6,8,20,.9);
  border:1px solid rgba(140,160,255,.28);
  border-radius:10px;
  color:#fff;
  font-family:var(--mono); font-size:13px; letter-spacing:.24em;
  text-transform:uppercase;
  outline:none;
  transition:.15s ease;
}
.nameinput::placeholder{ color:#4d5578; letter-spacing:.2em; }
.nameinput:focus{ border-color:var(--cyan); box-shadow:0 0 22px -6px rgba(124,246,255,.8); }
.dice{
  width:42px; flex:none;
  background:rgba(6,8,20,.9);
  border:1px solid rgba(140,160,255,.28);
  border-radius:10px;
  color:var(--dim); font-size:16px; cursor:pointer;
  transition:.15s ease;
}
.dice:hover{ color:#fff; border-color:var(--cyan); transform:rotate(90deg); }

/* sigil preview */
.sigil-preview{
  display:flex; align-items:center; gap:18px;
  margin:6px 0 18px;
  padding:14px 18px;
  border:1px solid rgba(150,170,255,.14);
  border-radius:14px;
  background:radial-gradient(circle at 20% 50%, rgba(60,50,130,.3), transparent 70%);
}
.sigil-preview canvas{ width:120px; height:120px; flex:none; }
.sigil-caption b{
  display:block; font-size:15px; letter-spacing:.24em; margin-bottom:5px;
}
.sigil-caption span{ display:block; font-size:9px; letter-spacing:.2em; color:var(--dim); }

/* game modes */
.moderow{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mode-btn{
  padding:10px 12px;
  text-align:left;
  background:linear-gradient(180deg, rgba(22,26,52,.9), rgba(9,11,24,.92));
  border:1px solid rgba(120,140,220,.24);
  border-radius:10px;
  color:var(--dim);
  font-family:var(--mono);
  cursor:pointer;
  transition:.15s ease;
}
.mode-btn b{ display:block; font-size:10.5px; letter-spacing:.18em; color:#fff; }
.mode-btn .mode-count{
  display:block; margin-top:4px; font-size:8px; letter-spacing:.16em; opacity:.7;
}
.mode-btn:hover{ border-color:var(--cyan); transform:translateY(-2px); }
.mode-btn.sel{
  border-color:var(--cyan); color:var(--cyan);
  box-shadow:0 0 26px -8px rgba(124,246,255,.9), inset 0 0 20px -14px rgba(124,246,255,.9);
}
.mode-btn.sel b{ color:var(--cyan); }

/* the online lobby card — the one thing on this screen that talks to a server */
.mp-card{
  margin-top:4px; padding:11px 12px 12px;
  display:flex; flex-direction:column; gap:8px;
  border:1px solid rgba(150,170,255,.28);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(96,78,190,.18), rgba(16,12,34,.42));
  transition:border-color .2s ease, box-shadow .2s ease;
}
.mp-head{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:9px; letter-spacing:.16em; color:#8f9ac8; text-transform:uppercase;
}
.mp-head b{ font-weight:600; color:#dfe6ff; letter-spacing:.16em; }
.mp-rtt{
  margin-left:auto; font-variant-numeric:tabular-nums;
  font-size:9px; letter-spacing:.1em; color:#8f9ac8;
}
.mp-rtt.rtt-good{ color:var(--cyan); }
.mp-rtt.rtt-fair{ color:var(--gold); }
.mp-rtt.rtt-poor{ color:var(--rose); }
.mp-clock{
  margin-left:8px; font-variant-numeric:tabular-nums;
  font-size:11px; letter-spacing:.06em; color:var(--gold); white-space:nowrap;
}
/* queued humans / connected humans / arenas are three different numbers; they stay
   on their own line instead of being folded into a sentence the eye cannot scan. */
.mp-meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:4px 13px;
  font-size:8.5px; letter-spacing:.16em; color:#6e77a3; text-transform:uppercase;
}
.mp-busy{ color:var(--gold); animation:pulseGold 1.8s ease-in-out infinite; }
.mp-line{ font-size:9px; letter-spacing:.08em; line-height:1.55; color:#8b94bd; min-height:26px; }
.mp-actions{ display:flex; gap:8px; align-items:stretch; }
.mp-join{
  margin-top:2px; padding:12px 18px; font-size:11px; letter-spacing:.3em;
  flex:1 1 58%; min-width:0;
}
.mp-force{
  margin-top:2px; padding:12px 10px; font-size:10px; letter-spacing:.16em;
  flex:1 1 38%; min-width:0; white-space:nowrap;
}
.mp-join:disabled,
.mp-force:disabled{
  opacity:1; cursor:default; transform:none;
  background:linear-gradient(180deg,#3c415c,#282c42);
  color:#8a93b8; box-shadow:none;
}
.mp-force:disabled{ opacity:.55; }
.mp-card[data-state="queued"]{ border-color:rgba(255,196,96,.6); box-shadow:0 0 34px -14px rgba(255,180,80,.8); }
.mp-card[data-state="queued"] .mp-line{ color:#e8d1a0; }
.mp-card[data-state="live"]{ border-color:rgba(124,246,255,.35); }
.mp-card[data-state="live"] .mp-dot{ background:var(--cyan); box-shadow:0 0 12px var(--cyan); animation:pulseGold 1.6s ease-in-out infinite; }
.mp-card[data-state="open"] .mp-dot{ background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.mp-card[data-state="offline"]{ opacity:.85; border-style:dashed; }
.mp-join.queued{ background:linear-gradient(180deg,#ffd9d0,#ff8f7a 55%,#e2543a); }
.mp-dot{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:#5d668c; box-shadow:0 0 10px #5d668c;
}

@media (max-width: 1040px){
  .panel.lobby{ grid-template-columns:minmax(0,1fr); overflow:auto; }
  .lobby-hero{ border-right:none; border-bottom:1px solid rgba(150,170,255,.14); }
}

.kicker{
  font-size:10px; letter-spacing:.42em; color:var(--violet);
  margin-bottom:14px; text-transform:uppercase;
}
h1{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(34px, 6.4vw, 64px);
  line-height:.95;
  letter-spacing:.06em;
  font-weight:600;
  background:linear-gradient(180deg,#ffffff 10%, #cbd6ff 46%, #8f7bff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 26px rgba(140,120,255,.55));
}
h1 span{
  display:block;
  background:linear-gradient(180deg,#ffe6a8,#ffb52e 60%,#ff7a3c);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:.2em; font-size:.62em;
  filter:drop-shadow(0 0 22px rgba(255,160,60,.55));
}
h2{
  margin:6px 0 4px;
  font-family:var(--serif); font-size:clamp(26px,4.4vw,42px);
  letter-spacing:.12em; font-weight:600;
  background:linear-gradient(180deg,#fff,#b9c6ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead{
  margin:16px auto 22px; max-width:52ch;
  font-family:var(--serif); font-size:15px; line-height:1.65;
  color:#b9c2e8; letter-spacing:.01em;
}

.pick{ margin:8px 0 18px; }
.pick-label{ font-size:9px; letter-spacing:.34em; color:var(--dim); margin-bottom:10px; }
/* grids, not wrapping flex: the columns must not reshuffle when a card is wide */
.pick-row{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px; }
.classrow{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.pick-btn{
  padding:10px 6px;
  background:linear-gradient(180deg, rgba(22,26,52,.9), rgba(9,11,24,.9));
  border:1px solid rgba(120,140,220,.24);
  border-radius:10px; cursor:pointer;
  color:var(--dim);
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  transition:.16s ease;
  min-width:0;
}
.pick-btn canvas{ display:block; margin:0 auto 6px; width:30px; height:30px; }
.pick-btn:hover{ transform:translateY(-3px); border-color:currentColor; color:#fff; }
.pick-btn.sel{
  color:#fff; border-color:currentColor;
  box-shadow:0 0 26px -6px currentColor, inset 0 0 22px -12px currentColor;
  transform:translateY(-3px);
}
.pick-btn small{ display:block; font-size:8px; letter-spacing:.1em; opacity:.66; margin-top:3px; }

/* class select */
.class-btn{
  padding:13px 10px 11px; min-width:0;
  background:linear-gradient(180deg, rgba(22,26,52,.92), rgba(9,11,24,.92));
  border:1px solid rgba(120,140,220,.24);
  border-radius:12px; cursor:pointer; text-align:center;
  color:var(--dim);
  font-family:var(--mono);
  transition:.16s ease;
}
.class-btn canvas{ display:block; margin:0 auto 7px; width:34px; height:34px; }
.class-btn b{ display:block; font-size:12px; letter-spacing:.2em; color:currentColor; }
.class-btn .class-title{
  display:block; margin:2px 0 8px; font-size:8px; letter-spacing:.28em;
  color:#fff; opacity:.75;
}
.class-btn small{
  display:block; font-size:8px; line-height:1.45; letter-spacing:.02em;
  opacity:.6; min-height:52px;
}
.class-btn .class-stats{
  display:block; margin-top:8px; padding-top:7px;
  border-top:1px solid rgba(140,160,255,.16);
  font-size:8px; letter-spacing:.1em; opacity:.7;
}
.class-btn:hover{ transform:translateY(-3px); border-color:currentColor; }
.class-btn.sel{
  border-color:currentColor;
  box-shadow:0 0 30px -6px currentColor, inset 0 0 24px -12px currentColor;
  transform:translateY(-3px);
}
.class-btn.sel .class-title{ opacity:1; }
.class-btn.sel small{ opacity:.82; }

.keys{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:8px 14px; margin:6px 0 26px;
  font-size:10px; letter-spacing:.1em; color:var(--dim); text-align:left;
}
.keys kbd{
  display:inline-block; margin-right:6px; padding:2px 6px;
  border:1px solid rgba(150,170,255,.26); border-radius:4px;
  background:rgba(255,255,255,.04);
  color:#dfe6ff; font-family:var(--mono); font-size:9px; letter-spacing:.08em;
}
.keys span{ opacity:.8; }

.btn{
  position:relative;
  margin-top:6px;
  padding:15px 44px;
  font-family:var(--mono); font-size:12px; letter-spacing:.34em; text-transform:uppercase;
  color:#0a0a14; font-weight:700;
  background:linear-gradient(180deg,#ffe9b0,#ffc14a 55%,#ff9a2e);
  border:none; border-radius:999px; cursor:pointer;
  box-shadow:0 8px 34px -8px rgba(255,170,60,.85), inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .12s ease, box-shadow .2s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 44px -8px rgba(255,180,80,.95), inset 0 1px 0 rgba(255,255,255,.8); }
.btn:active{ transform:translateY(0) scale(.99); }
/* Keyboard focus must be visible: the online actions are reachable without the
   mouse, and a gold button on a dark panel is not a focus indicator by itself. */
.btn:focus-visible, .mp-join:focus-visible, .mp-force:focus-visible, .dice:focus-visible{
  outline:2px solid var(--cyan); outline-offset:3px;
}

/* Pause panel actions. Offline only RETURN TO BATTLE exists; online the same panel
   is a non-blocking overlay and adds the explicit forfeit. */
.pause-actions{
  display:flex; gap:10px; justify-content:center; align-items:center;
  flex-wrap:wrap; margin-top:6px;
}
.pause-actions .btn{ margin-top:0; }
.pause-quit{ color:var(--rose); border-color:rgba(255,107,157,.45); }
.pause-quit:hover{ color:#fff; border-color:var(--rose); box-shadow:0 0 24px -10px rgba(255,107,157,.85); }

.foot{
  margin-top:18px; font-size:9px; letter-spacing:.2em; color:#6e77a3; text-transform:uppercase;
}

.stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  margin:22px 0 26px;
}
.stats div{
  padding:14px 8px;
  background:linear-gradient(180deg, rgba(24,28,56,.7), rgba(8,10,20,.7));
  border:1px solid var(--line); border-radius:10px;
}
.stats b{ display:block; font-size:24px; color:#fff; letter-spacing:.02em; }
.stats span{ display:block; margin-top:6px; font-size:9px; color:var(--dim); letter-spacing:.2em; }

/* ---- end screen: the run, summarised ---- */
.panel.endpanel{
  width:min(760px, 100%);
  padding:0;
  overflow:hidden;
  text-align:center;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(120,80,200,.34), transparent 62%),
    linear-gradient(180deg, rgba(13,15,32,.96), rgba(6,7,18,.98));
}
.end-hero{
  padding:26px 26px 18px;
  border-bottom:1px solid rgba(150,170,255,.14);
  background:radial-gradient(ellipse at 50% 0%, rgba(90,70,180,.3), transparent 70%);
}
.endpanel .kicker{ margin-bottom:8px; }
.endpanel h2{ margin:0 0 4px; font-size:clamp(22px,3.4vw,32px); }
.end-place{
  display:flex; align-items:baseline; justify-content:center; gap:9px;
  margin-top:10px;
}
.end-place b{
  font-family:var(--serif);
  font-size:clamp(44px,7vw,64px); line-height:1;
  color:var(--gold);
  text-shadow:0 0 42px rgba(255,200,90,.75);
}
.end-place span{ font-size:10px; letter-spacing:.24em; color:var(--dim); }
.end-place span i{ font-style:normal; color:#fff; }
.end-rank{
  display:inline-block; margin-top:8px; padding:3px 12px;
  border-radius:999px; font-size:9px; letter-spacing:.3em;
  border:1px solid currentColor;
}
.end-rank.apex{ color:var(--gold); box-shadow:0 0 24px -6px rgba(255,212,121,.9); }
.end-rank.gold{ color:#ffd479; }
.end-rank.silver{ color:#c9d4f0; }
.end-rank.bronze{ color:#d99a63; }
.end-rank.ash{ color:#7b84ac; }

.endpanel .stats{
  grid-template-columns:repeat(4,1fr); gap:8px;
  margin:18px 22px 0;
}
.endpanel .stats .stat-cell{
  padding:11px 6px;
  background:linear-gradient(180deg, rgba(24,28,56,.6), rgba(8,10,20,.66));
  border:1px solid rgba(150,172,255,.16);
  border-radius:9px;
}
.endpanel .stats b{ font-size:19px; }
.endpanel .stats span{ font-size:8px; letter-spacing:.16em; margin-top:4px; }
.endpanel .stats .good b{ color:#7cf6ff; }
.endpanel .stats .dim b{ color:#59618a; }

.end-highlight{
  margin:16px 26px 0; padding:11px 14px;
  border-left:2px solid var(--violet);
  background:linear-gradient(90deg, rgba(120,90,220,.16), transparent 70%);
  font-size:10.5px; line-height:1.55; color:#cfd6ff;
  text-align:left; text-transform:none; letter-spacing:.02em;
}
.end-actions{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  margin:20px 22px 0;
}
.end-actions .btn{ margin-top:0; }
.btn.ghost{
  background:transparent; color:var(--dim);
  border:1px solid rgba(150,172,255,.34);
  box-shadow:none;
}
.btn.ghost:hover{ color:#fff; border-color:var(--cyan); }
.endpanel .foot{ margin:14px 22px 20px; }

@media (max-width: 720px){
  .endpanel .stats{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 720px){
  .keys{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .vitals{ width:180px; }
  .runebar{ gap:4px; }
  .rune{ width:48px; }
  .stats{ grid-template-columns:repeat(2,1fr); }
}

/* Narrow screens: the online card stacks its actions instead of squeezing two
   labels into one row, and the quick RTT/clock stay legible. */
@media (max-width: 560px){
  .mp-head{ gap:6px; }
  .mp-clock{ margin-left:0; }
  .mp-actions{ flex-direction:column; gap:7px; }
  .mp-join, .mp-force{ flex:0 0 auto; width:100%; }
  .pause-actions{ flex-direction:column; }
  .pause-actions .btn{ width:100%; }
}

/* =========================================================
   TEAM MULTIPLAYER — party card, mode/region, teammate HUD,
   spectate banner and the team end panel. All selectors are
   prefixed so nothing here can collide with the existing HUD.
   Every one of these surfaces is hidden unless a v3 server is
   in use; offline play never renders any of it.
   ========================================================= */

/* ---- server mode, team shape and region on the lobby card ---- */
.mp-mode{
  display:inline-flex; align-items:baseline; gap:7px; min-width:0;
  font-weight:600; color:#dfe6ff; letter-spacing:.16em;
}
.mp-mode-size{
  flex:none; padding:1px 6px;
  border:1px solid rgba(124,246,255,.34); border-radius:999px;
  font-size:8px; font-weight:500; letter-spacing:.12em; color:var(--cyan);
  white-space:nowrap;
}
.mp-mode-size:empty{ display:none; }
.mp-region{
  flex:none; padding:1px 7px;
  border:1px solid rgba(255,212,121,.42); border-radius:999px;
  font-size:7.5px; letter-spacing:.2em; color:var(--gold);
}
/* the count pill keeps the legacy card's weight and colour; the em dash is the
   same separator the pre-team card used, so the offline screen reads unchanged */
.mp-queued{ font-size:9px; letter-spacing:.16em; color:#dfe6ff; font-weight:600; white-space:nowrap; }
.mp-queued::before{ content:'\2014'; margin-right:5px; color:#8f9ac8; font-weight:400; }
.mp-queued #mpCount{ color:#dfe6ff; font-size:9px; font-weight:600; }
.mp-card[data-legacy="true"] .mp-mode-size{ display:none; }

/* the party card lives in the hero column's spare space; it never pushes the
   offline-mode controls out of the setup column */
.hero-party-block{ margin:0 0 2px; }
.hero-party-block .pick-label{ margin-bottom:8px; }
.hero-party-block .party{ max-width:560px; gap:6px; }
.hero-party-block .pm-row{ padding:4px 7px; }
.hero-party-block .party-codebox{ padding:5px 8px; }
.hero-party-block .party-actions .party-btn{ padding:9px 12px; }
/* The party card needs a little of the hero column's spare space; the offline
   title keeps its original spacing exactly, because this class is only added
   while a party-capable server is connected. */
#panelTitle.party-on .keys{ margin-bottom:16px; }

/* ---- party card ---- */
.party{
  display:flex; flex-direction:column; gap:8px;
  padding:9px 10px 10px;
  border:1px solid rgba(124,246,255,.2);
  border-radius:10px;
  background:linear-gradient(180deg, rgba(20,32,64,.42), rgba(8,12,30,.5));
  transition:border-color .2s ease, box-shadow .2s ease;
}
.party[data-state="queued"]{
  border-color:rgba(255,196,96,.55);
  box-shadow:0 0 26px -14px rgba(255,180,80,.85);
}
.party[data-state="queued"] .party-title{ color:var(--gold); }
.party[data-error]:not([data-error=""]){ border-color:rgba(255,107,157,.5); }
.party-bar{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.party-title{ font-size:8.5px; letter-spacing:.26em; color:var(--cyan); }
.party-size{ font-size:8px; letter-spacing:.14em; color:var(--dim); font-variant-numeric:tabular-nums; }
.party-intro{ display:flex; flex-direction:column; gap:7px; }
.party-joinrow{ display:flex; gap:7px; flex-wrap:wrap; }
.party-input{
  flex:1 1 92px; min-width:0;
  padding:9px 10px;
  background:rgba(4,7,18,.92);
  border:1px solid rgba(124,246,255,.3);
  border-radius:8px;
  color:#fff;
  font-family:var(--mono); font-size:12px; letter-spacing:.3em; text-transform:uppercase;
  outline:none; transition:.15s ease;
}
.party-input::placeholder{ color:#4d5578; letter-spacing:.16em; font-size:10px; }
.party-input:focus{ border-color:var(--cyan); box-shadow:0 0 20px -7px rgba(124,246,255,.9); }
.party-btn{ margin-top:0; padding:10px 12px; font-size:9px; letter-spacing:.2em; border-radius:8px; }
.party-join-btn{ flex:0 1 auto; }
.party-create-btn{ flex:1 1 auto; min-width:0; }
.party-btn:focus-visible, .party-copy:focus-visible, .party-input:focus-visible{
  outline:2px solid var(--cyan); outline-offset:2px;
}
.party-hint{ font-size:8px; line-height:1.5; letter-spacing:.06em; color:#6e77a3; text-transform:none; }
.party-body{ display:flex; flex-direction:column; gap:7px; }
.party-codebox{
  display:flex; align-items:center; gap:8px;
  padding:7px 9px;
  border:1px dashed rgba(255,212,121,.42);
  border-radius:8px;
  background:rgba(255,212,121,.05);
}
.party-codelabel{ flex:none; font-size:7px; letter-spacing:.2em; color:#8f9ac8; }
.party-codebox b{
  flex:1; min-width:0; text-align:center;
  font-size:15px; letter-spacing:.34em; color:var(--gold);
  text-shadow:0 0 18px rgba(255,200,90,.55);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.party-copy{
  flex:none; padding:4px 8px;
  font-family:var(--mono); font-size:8px; letter-spacing:.16em;
  color:var(--gold); background:transparent;
  border:1px solid rgba(255,212,121,.45); border-radius:6px;
  cursor:pointer; transition:.14s ease;
}
.party-copy:hover{ color:#0a0a14; background:var(--gold); }
.party-members{ display:flex; flex-direction:column; gap:4px; }
.pm-row{
  display:grid; grid-template-columns:10px minmax(0,1fr) auto auto; gap:6px; align-items:center;
  padding:5px 7px; border-radius:6px;
  background:rgba(255,255,255,.035);
  font-size:9px; letter-spacing:.06em;
}
.pm-tags{ display:flex; align-items:center; gap:4px; justify-self:end; }
.pm-row.you{ border:1px solid rgba(124,246,255,.26); }
.pm-row.leader{ border-left:2px solid var(--gold); }
.pm-dot{ width:6px; height:6px; border-radius:50%; box-shadow:0 0 8px currentColor; }
.pm-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#e6ebff; letter-spacing:.1em; }
.pm-name .pm-you{ margin-left:5px; font-size:7px; letter-spacing:.14em; color:#6e77a3; }
.pm-cls{ font-size:7px; letter-spacing:.12em; color:#8f9ac8; white-space:nowrap; }
.pm-badge{
  font-size:6.5px; letter-spacing:.18em; color:var(--gold);
  border:1px solid rgba(255,212,121,.45); border-radius:999px; padding:1px 5px;
}
.pm-conn{ font-size:6.5px; letter-spacing:.14em; color:#65f79a; white-space:nowrap; }
.pm-conn.dead{ color:#8f8fae; }
.party-status{ font-size:8px; letter-spacing:.1em; line-height:1.5; color:#8f9ac8; text-transform:none; }
.party-status b{ color:var(--gold); }
.party-actions{ display:flex; gap:7px; }
.party-actions .party-btn{ flex:1 1 50%; }
.party-queue{
  background:linear-gradient(180deg,#d6f4ff,#7cf6ff 55%,#39c8e0);
  box-shadow:0 0 24px -10px rgba(124,246,255,.9);
}
.party-queue:disabled{
  opacity:1; cursor:default; transform:none;
  background:linear-gradient(180deg,#3c415c,#282c42);
  color:#8a93b8; box-shadow:none;
}
.party-error{
  padding:6px 8px;
  border:1px solid rgba(255,107,157,.5); border-radius:7px;
  background:rgba(255,107,157,.1);
  color:#ffb0c8; font-size:8.5px; line-height:1.5; letter-spacing:.05em;
  text-transform:none;
}
.party-notice{ color:var(--gold); }

/* ---- teammate column (spectate banner + team panel) ----
   Sits immediately above the vitals panel. Both children are ordinary blocks in
   one flex column, so the two can never overlap each other however tall the team
   is; the column reserves its own strip on the left of the screen. */
.team-stack{
  position:absolute; left:22px; bottom:214px; width:272px;
  display:flex; flex-direction:column; gap:8px;
  pointer-events:none;
}
.team-hud{
  padding:8px 10px 7px;
  border:1px solid rgba(150,172,255,.26);
  border-left:3px solid var(--team-color,#7cf6ff);
  border-radius:10px;
  background:linear-gradient(180deg, rgba(14,20,44,.88), rgba(7,9,20,.92));
  box-shadow:0 0 30px -12px var(--team-color,#7cf6ff);
  backdrop-filter: blur(6px);
}
.team-hud-head{ display:flex; align-items:center; gap:7px; margin-bottom:6px; }
.team-mark{ font-size:9px; font-weight:700; letter-spacing:.2em; color:var(--team-color,#7cf6ff); white-space:nowrap; }
.team-ally{
  flex:none; padding:1px 5px; border-radius:999px;
  font-size:6.5px; letter-spacing:.16em; color:#0a0a14;
  background:var(--team-color,#7cf6ff);
}
.team-hud-mode{ margin-left:auto; font-size:7px; letter-spacing:.14em; color:#6e77a3; white-space:nowrap; }
.team-hud-rows{ display:flex; flex-direction:column; gap:5px; }
.tm-row{
  display:grid;
  grid-template-columns:8px minmax(0,1fr) auto;
  grid-template-areas:"dot id state" "dot bar bar";
  gap:2px 6px; align-items:center;
}
.tm-dot{ grid-area:dot; width:7px; height:7px; border-radius:50%; background:var(--tm-color,#7cf6ff); box-shadow:0 0 8px var(--tm-color,#7cf6ff); }
.tm-row[data-alive="0"] .tm-dot{ background:#4a5170; box-shadow:none; }
.tm-id{ grid-area:id; display:flex; align-items:baseline; gap:5px; min-width:0; }
.tm-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9.5px; letter-spacing:.1em; color:#eef2ff; }
.tm-you{ flex:none; font-size:6.5px; letter-spacing:.14em; color:#6e77a3; }
.tm-cls{ flex:none; font-size:7px; letter-spacing:.1em; color:#8f9ac8; white-space:nowrap; }
.tm-state{ grid-area:state; justify-self:end; font-size:6.5px; letter-spacing:.14em; color:#65f79a; white-space:nowrap; }
.tm-row[data-alive="0"] .tm-state{ color:#ff6b9d; }
.tm-row[data-watch="1"] .tm-state{ color:var(--gold); }
.tm-hp{ grid-area:bar; height:3px; border-radius:2px; background:rgba(4,6,16,.9); overflow:hidden; }
.tm-hp i{ display:block; height:100%; width:100%; background:linear-gradient(90deg,#ff5a7a,#ffd166 48%,#65f79a); transition:width .12s linear; }
.team-hud-legend{ display:flex; align-items:center; gap:5px; margin-top:6px; font-size:6.5px; letter-spacing:.16em; color:#6e77a3; }
.team-hud-legend .ally-dot, .team-hud-legend .foe-dot{ display:inline-block; width:6px; height:6px; border-radius:50%; }
.team-hud-legend .ally-dot{ background:var(--team-color,#7cf6ff); box-shadow:0 0 8px var(--team-color,#7cf6ff); }
.team-hud-legend .foe-dot{ margin-left:8px; background:#ff6b9d; box-shadow:0 0 8px #ff6b9d; }

/* ---- dead-but-team-alive spectate banner ---- */
.spectate-hud{
  padding:9px 12px 8px;
  border:1px solid rgba(255,212,121,.5);
  border-radius:10px;
  background:linear-gradient(180deg, rgba(40,28,10,.92), rgba(12,9,4,.95));
  box-shadow:0 0 34px -12px rgba(255,190,80,.9);
}
.spec-kicker{ font-size:7px; letter-spacing:.26em; color:#e0a94d; margin-bottom:3px; }
.spec-main{ font-size:11px; letter-spacing:.16em; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.spec-main b{ color:var(--gold); }
.spec-meta{ margin-top:3px; font-size:7.5px; letter-spacing:.14em; color:#c9a96a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---- team result block inside the existing end panel ---- */
.team-end{
  margin:16px 22px 0; padding:12px 14px 11px;
  border:1px solid rgba(124,246,255,.26);
  border-radius:11px;
  background:linear-gradient(180deg, rgba(16,26,52,.78), rgba(7,10,22,.86));
  text-align:left;
}
.team-end-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:7px; }
.team-end-kicker{ font-size:8px; letter-spacing:.26em; color:var(--cyan); }
.team-end-place{ display:flex; align-items:baseline; gap:5px; white-space:nowrap; }
.team-end-place b{ font-family:var(--serif); font-size:24px; line-height:1; color:var(--gold); text-shadow:0 0 26px rgba(255,200,90,.6); }
.team-end-place span{ font-size:7.5px; letter-spacing:.15em; color:#8f9ac8; }
.team-end-winner{ margin-bottom:8px; font-size:9px; letter-spacing:.12em; color:#dfe6ff; }
.team-end-winner b{ color:var(--gold); }
.team-end-rows{ display:flex; flex-direction:column; gap:4px; margin-bottom:8px; }
.tme-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; align-items:baseline;
  padding:4px 7px; border-radius:6px;
  background:rgba(255,255,255,.035);
  font-size:9px; letter-spacing:.07em; color:#cfd6ff;
}
.tme-row.you{ border:1px solid rgba(124,246,255,.28); }
.tme-row[data-alive="0"]{ color:#8f8fae; }
.tme-row b{ color:#fff; font-weight:600; letter-spacing:.08em; }
.tme-row .tme-k{ font-size:7.5px; letter-spacing:.14em; color:#8f9ac8; white-space:nowrap; }
.tme-row .tme-state{ font-size:7px; letter-spacing:.14em; color:#65f79a; white-space:nowrap; }
.tme-row[data-alive="0"] .tme-state{ color:#ff6b9d; }
.team-end-teams{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(124px,1fr)); gap:4px;
  padding-top:8px; border-top:1px solid rgba(150,172,255,.14);
}
.tmt-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:6px;
  padding:3px 6px; border-radius:5px;
  background:rgba(255,255,255,.025);
  font-size:8px; letter-spacing:.09em; color:#8f9ac8;
}
.tmt-row.win{ color:var(--gold); }
.tmt-row.mine{ border:1px solid rgba(124,246,255,.3); color:var(--cyan); }
.team-end-note{ margin-top:8px; font-size:8px; line-height:1.5; letter-spacing:.06em; color:#7b84ac; text-transform:none; }

@media (max-width: 720px){
  /* Above the fusion wire: at this width the centred wire reaches the left
     column, so the teammate stack sits clear of it instead of beside it. */
  .team-stack{ left:12px; bottom:218px; width:180px; }
  .team-hud{ padding:7px 8px 6px; }
  .team-hud-mode{ display:none; }
  .tm-cls{ display:none; }
  .team-end{ margin:14px 14px 0; }
}
@media (max-width: 560px){
  .mp-head{ row-gap:5px; }
  .mp-rtt{ margin-left:0; }
  .party-joinrow{ flex-direction:column; }
  .party-join-btn, .party-create-btn{ flex:0 0 auto; width:100%; }
  .party-actions{ flex-direction:column; }
  .team-stack{ width:158px; bottom:218px; }
  .spec-main{ font-size:10px; white-space:normal; }
  /* The compact panel keeps the result, the winner and the teammate rows; the
     every-team grid is the first thing to go so the two actions stay on screen. */
  .team-end-teams{ display:none; }
  .team-end{ padding:10px 11px 9px; }
  .team-end-winner{ font-size:8px; }
  .tme-row{ font-size:8.5px; }
}
@media (max-height: 620px){
  .team-stack{ bottom:218px; }
  .team-hud-rows{ max-height:86px; overflow:hidden; }
}

/* ================= THE NINTH CIRCLE / FRONT END ================= */
.panel.citadel{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:none;border:0;border-radius:0;padding:0;overflow:hidden;text-align:left;background:radial-gradient(ellipse at 76% 38%,#152237 0%,#0c1323 37%,#070b13 74%);box-shadow:none;animation:none;color:#ece8dc;}
#homeCanvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.95;pointer-events:none;}
.home-noise{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(5,9,15,.88),transparent 58%),linear-gradient(0deg,rgba(3,7,13,.7),transparent 24%,transparent 80%,rgba(3,7,13,.45));}
.home-header{position:absolute;z-index:2;top:38px;left:5.2%;right:5.2%;display:flex;align-items:center;justify-content:space-between;}
.home-brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:#d9cfbb;font-family:var(--serif);font-size:12px;letter-spacing:.21em;line-height:1.35;}
.home-brand i{font-style:normal;font-size:43px;color:#d7b879;}
.home-brand b{font-weight:400;font-size:9px;letter-spacing:.36em;}
.home-connection{display:flex;align-items:center;gap:10px;color:#9badae;font-size:8px;letter-spacing:.16em;}
.home-connection i{width:5px;height:5px;border-radius:50%;background:#bfe7d4;box-shadow:0 0 9px #98c7bd;}
.home-copy{position:absolute;z-index:2;left:8.2%;top:24%;width:46%;max-width:650px;}
.home-eyebrow{font-size:8px;letter-spacing:.18em;color:#75858c;margin-bottom:30px;}
.home-eyebrow span{color:#d6ba87;margin-right:13px;}
h1.home-title{font-size:clamp(58px,7.7vw,132px);font-weight:400;line-height:.82;letter-spacing:.035em;background:linear-gradient(170deg,#fffaf0,#c3c4bd);-webkit-background-clip:text;background-clip:text;filter:none;}
h1.home-title span{font-size:.58em;font-weight:400;letter-spacing:.25em;margin:19px 0 0 3px;background:linear-gradient(125deg,#e5d0a5,#ad854b);-webkit-background-clip:text;background-clip:text;filter:none;}
.home-manifesto{font-family:var(--serif);font-size:clamp(20px,2.25vw,35px);line-height:1.24;font-weight:400;margin:34px 0 16px;color:#e7e4d9;}
.home-manifesto em{color:#d6b782;font-style:italic;}
.home-description{font-family:var(--serif);font-size:14px;color:#97a4ac;line-height:1.8;margin:0 0 30px;}
.home-play{width:365px;max-width:100%;display:grid;gap:10px;}
.home-primary{position:relative;display:flex;align-items:center;justify-content:space-between;padding:20px 23px;background:linear-gradient(120deg,#ddc49a,#af8954);border:1px solid #dec49c;color:#15171b;cursor:pointer;text-align:left;box-shadow:0 7px 32px #0005;transition:transform .2s,filter .2s;font:700 11px var(--mono);letter-spacing:.17em;}
.home-primary small{display:block;margin-top:8px;font:8px var(--mono);letter-spacing:.055em;color:#40382d;}
.home-primary b{font-size:26px;font-weight:400;}
.home-primary:hover{filter:brightness(1.12);transform:translateY(-2px);}
.home-secondary{padding:13px 21px;background:rgba(19,27,38,.55);border:1px solid #899da23d;color:#d2d8d5;font:9px var(--mono);letter-spacing:.19em;text-align:left;cursor:pointer;transition:background .2s;}
.home-secondary span{float:right;color:#d7b879;font-size:15px;}
.home-secondary:hover{background:rgba(60,76,89,.5);}
.home-links{display:flex;align-items:center;gap:24px;margin-top:24px;color:#6e858d;}
.home-links button{background:none;border:0;padding:6px 0;cursor:pointer;color:#a1afb2;font:8px var(--mono);letter-spacing:.15em;}
.home-links button:hover{color:#e3cca0;}
.home-world-label{position:absolute;right:8%;bottom:17%;display:grid;gap:10px;text-align:right;}
.home-world-label span{font:8px var(--mono);letter-spacing:.2em;color:#c3a877;}
.home-world-label b{font:italic 21px var(--serif);color:#b6c5c6;}
.home-world-label small{font:7px var(--mono);letter-spacing:.22em;color:#627985;}
.home-footer{position:absolute;bottom:30px;left:5.2%;right:5.2%;display:flex;justify-content:space-between;border-top:1px solid #90acb01c;padding-top:17px;color:#5e7582;font:7px var(--mono);letter-spacing:.23em;}
.citadel[data-view]:not([data-view="home"]) .home-copy,.citadel[data-view]:not([data-view="home"]) .home-world-label{opacity:.15;pointer-events:none;}
.lobby-dialog{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:30px;background:rgba(3,7,13,.6);backdrop-filter:blur(12px);}
.lobby-dialog-frame{width:min(760px,100%);max-height:100%;overflow:auto;background:linear-gradient(150deg,#131d2bfa,#090f1bf9);border:1px solid #ae947753;box-shadow:0 35px 130px #000a;animation:panelIn .25s ease;border-radius:3px;}
.dialog-header{padding:26px 30px 21px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #a2b1b316;}
.dialog-eyebrow{color:#b89b6d;font:7px var(--mono);letter-spacing:.27em;}
.dialog-header h2{font-size:27px;letter-spacing:.045em;color:#ece7d9;background:none;-webkit-text-fill-color:initial;margin:9px 0 0;}
.dialog-close{width:34px;height:34px;border:1px solid #aabbb42b;background:transparent;color:#b4c1bf;cursor:pointer;font-size:15px;}
.dialog-close:hover{color:#f2d39b;border-color:#d1af75;}
.dialog-tabs{display:flex;padding:0 30px;border-bottom:1px solid #a2b1b316;gap:28px;}
.dialog-tabs button{font:8px var(--mono);letter-spacing:.1em;padding:16px 0;background:none;border:0;border-bottom:2px solid transparent;color:#70838c;cursor:pointer;white-space:nowrap;}
.dialog-tabs button[aria-current="page"]{border-bottom-color:#d5b77f;color:#e1c89c;}
.menu-pane{padding:25px 30px 30px;display:flex;flex-direction:column;gap:17px;}
.menu-pane p{margin:0;}
.match-intro{display:flex;align-items:center;gap:18px;padding:4px 0 13px;}
.mode-emblem{display:grid;place-items:center;flex:none;width:58px;height:66px;color:#dfc28e;border:1px solid #baa17c55;font:35px var(--serif);clip-path:polygon(50% 0,100% 20%,100% 80%,50% 100%,0 80%,0 20%);background:linear-gradient(150deg,#30313b,#131b28);}
.match-intro b{font:11px var(--mono);letter-spacing:.1em;color:#e3d8c6;}
.match-intro p{font:14px/1.6 var(--serif);color:#91a4ac;margin-top:7px;max-width:48ch;}
.citadel .mp-card{background:#0a1320;border:1px solid #718f9b44;border-radius:3px;box-shadow:none;padding:17px;}
.citadel .mp-head{font-size:9px;}
.citadel .mp-line{font-size:10px;line-height:1.6;}
.citadel .mp-meta{font-size:8px;}
.citadel .btn{border-radius:2px;font-size:10px;letter-spacing:.12em;padding:16px 18px;background:linear-gradient(140deg,#d8c097,#b18f5f);color:#171b22;box-shadow:none;border:1px solid #cfb383;margin:0;}
.citadel .btn.ghost{background:transparent;color:#a8b7bc;border-color:#8a9ea144;}
.citadel .mp-join.queued{background:linear-gradient(140deg,#dec69f,#ba8f6f);}
.citadel .btn:disabled{opacity:.45;cursor:default;}
.citadel .party{padding:16px;background:#0c1622;border:1px solid #718f9b44;border-radius:3px;}
.citadel .hero-party-block{margin:0;}
.citadel .party-input,.citadel .nameinput{border-radius:2px;background:#070e18;border-color:#718f9b44;color:#e4e9e4;}
.citadel .party-input{font-size:11px;}
.citadel .party-joinrow{gap:8px;}
.citadel .party-member{border-radius:2px;}
.citadel .party-bar{margin-bottom:13px;}
.citadel .party-title,.citadel .party-codelabel{color:#acbdc5;}
.citadel .party-codebox{border-radius:2px;border-color:#b69c6655;}
.citadel .party-hint,.citadel .party-status{line-height:1.7;font-size:8px;color:#92a5af;}
.citadel .party-actions .btn{padding:13px;}
.citadel .pick-label{font-size:8px;letter-spacing:.2em;color:#9aafba;margin-bottom:0;}
.mage-summary{padding:16px;display:flex;align-items:center;gap:13px;text-align:left;border:1px solid #8ca4ad2b;background:#0c1622;color:#d8d7cb;cursor:pointer;font:9px var(--mono);}
.mage-summary>span{font-size:7px;color:#78929f;letter-spacing:.12em;}
.mage-summary b{font-size:9px;letter-spacing:.07em;font-weight:400;}
.mage-summary i{margin-left:auto;color:#cbb17d;font-size:7px;font-style:normal;}
.menu-lead{font:italic 22px/1.4 var(--serif);color:#c5ccca;}
.menu-note{padding:14px;background:#070f19;font:9px/1.9 var(--mono);color:#8c9ea7;border-left:2px solid #a38c69;}
.mage-identity{display:flex;gap:24px;align-items:center;padding-bottom:8px;}
.mage-identity canvas{width:90px;height:90px;}
.mage-identity>div{display:grid;gap:9px;}
.mage-identity b{font:19px var(--serif);letter-spacing:.09em;color:#d8c29d;}
.mage-identity span{font:8px var(--mono);letter-spacing:.12em;color:#8cabb7;}
.mage-identity p{font:13px var(--serif);color:#788e9a;}
.citadel .class-btn,.citadel .pick-btn,.citadel .mode-btn{border-radius:2px;background:#0b1522;border-color:#8cabb52e;box-shadow:none;}
.citadel .class-btn.sel,.citadel .pick-btn.sel,.citadel .mode-btn.sel{background:#16232e;border-color:#d4b47d;transform:none;box-shadow:inset 0 -2px #d4b47d;}
.citadel .class-btn:hover,.citadel .pick-btn:hover{transform:none;}
.citadel .class-btn:disabled,.citadel .pick-btn:disabled,.citadel .nameinput:disabled{opacity:.5;cursor:default;}
.citadel .foot{font-size:9px;line-height:1.8;color:#8fa3af;margin:0;}
.citadel .moderow{gap:10px;}
.grimoire-opening{padding:0 0 12px;}
.grimoire-opening>span{font:7px var(--mono);color:#c6a877;letter-spacing:.22em;}
.grimoire-opening h3{font:32px/1.15 var(--serif);color:#dbd8cc;font-weight:400;margin:17px 0 0;}
.grimoire-opening em{color:#c6a877;}
.grimoire-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#78929b26;border:1px solid #78929b26;}
.grimoire-grid article{padding:20px;background:#0d1724;}
.grimoire-grid article>b{font:18px var(--serif);color:#b0956b;}
.grimoire-grid h4{font:9px var(--mono);letter-spacing:.15em;color:#d2dcd7;margin:12px 0;}
.grimoire-grid p{font:14px/1.65 var(--serif);color:#90a3ac;}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #ead0a2;outline-offset:4px;}
.spec-leave{pointer-events:auto;margin-top:12px;width:100%;padding:9px 0;border:1px solid #b69b6255;background:#0c111b;color:#e8cf9d;font:9px var(--mono);letter-spacing:.12em;cursor:pointer;}
.spec-leave span{display:block;font-size:7px;margin-top:5px;color:#9a957f;}
.spec-leave:hover{background:#26231c;}
@media(max-height:780px) and (min-width:901px){.home-copy{top:23%;}.home-eyebrow{margin-bottom:20px;}h1.home-title{font-size:88px;}.home-manifesto{font-size:26px;margin-top:26px;}.home-description{font-size:12px;margin-bottom:22px;}.home-primary{padding:16px 20px;}.home-links{margin-top:15px;}.home-world-label{bottom:18%;}}
@media(max-width:900px){.home-copy{left:8%;top:23%;width:78%;}.home-noise{background:linear-gradient(90deg,#05090fd9,#05090f70);}.home-world-label{display:none;}.home-connection{font-size:7px;max-width:45%;line-height:1.7;}.home-header{top:25px;}.home-footer{bottom:20px;}h1.home-title{font-size:clamp(62px,12vw,105px);}.home-manifesto{font-size:27px;}.home-description{font-size:13px;}.lobby-dialog{padding:15px;}.lobby-dialog-frame{max-height:100%;}.dialog-header{padding:22px;}.dialog-tabs{padding:0 22px;gap:22px;}.menu-pane{padding:22px;}}
@media(max-width:540px){.home-copy{top:24%;}.home-eyebrow{font-size:6px;letter-spacing:.08em;}.home-title{font-size:62px!important;}.home-manifesto{font-size:25px;margin-top:28px;}.home-footer{font-size:5px;letter-spacing:.1em;}.home-primary{padding:17px;}.dialog-tabs{gap:17px;}.dialog-tabs button{font-size:7px;}.dialog-header h2{font-size:22px;}.menu-pane .classrow{gap:5px;}.citadel .class-btn{padding:13px 5px;}.citadel .class-btn small{font-size:7px;}.citadel .pick-row{gap:5px;}.citadel .pick-btn small{display:none;}.grimoire-grid{grid-template-columns:1fr;}.mage-summary{gap:9px;}.mage-summary>span{display:none;}.match-intro p{font-size:13px;}}
@media(prefers-reduced-motion:reduce){.citadel *{animation:none!important;transition:none!important;}}

.citadel .party{max-width:none;width:100%;}
.citadel .party-member{font-size:10px;}
.citadel .party-member-meta{font-size:8px;}

/* =================== THE LIVING SIGIL / combat interface ===================
   Opaque layered ink replaces backdrop blur over the continuously changing game.
   The center instrument lives in battlehud.js; this dock remains peripheral. */
.hud{--hud-edge:rgba(196,178,139,.3);--hud-gold:#d4bf92;font-size:11px;}
.hud *,#bossbar{backdrop-filter:none!important;}
.hud-top{top:16px;}
.zonebox{position:relative;min-width:286px;justify-content:center;padding:10px 24px;
  border-radius:3px 17px 3px 17px;border-color:var(--hud-edge);
  background:linear-gradient(115deg,#111b2df5,#0a101df5);box-shadow:0 6px 22px #0004;}
.zonebox::before,.zonebox::after{content:'';position:absolute;width:5px;height:5px;background:#d4bf92;transform:rotate(45deg);top:50%;}
.zonebox::before{left:-3px;}.zonebox::after{right:-3px;}
.zone-clock{width:29px;height:29px;border:1px solid #d1bc8b55;transform:rotate(45deg);border-radius:3px;}
.zone-clock i{border-width:1px;border-top-color:#e3cea3;border-right-color:#8ce6e5;}
#phaseLabel{font:10px var(--mono);letter-spacing:.16em;color:#a9b8cf;}
#phaseTimer{font:22px/1.05 var(--serif);letter-spacing:.04em;color:#f0e3c6;}
.hud-left{left:24px;bottom:24px;}
.vitals{width:258px;padding:14px 17px 12px;border-radius:3px 24px 3px 3px;
  border:1px solid var(--hud-edge);background:linear-gradient(145deg,#151e30f5,#090e18f5);
  box-shadow:0 10px 28px #0005;overflow:visible;}
.vitals::before{left:-1px;top:29px;bottom:18px;width:2px;box-shadow:none;}
.vitals::after{content:'';position:absolute;inset:5px;border:1px solid #c8ad7c10;border-radius:1px 20px 1px 1px;pointer-events:none;}
.vitals-kicker{font:8px var(--mono);letter-spacing:.2em;color:#b7a37e;margin-bottom:8px;display:flex;justify-content:space-between;}
.vitals-kicker span{color:#62758f;letter-spacing:.13em;}
.vname{margin-bottom:11px;align-items:center;}
.vname .who{font:22px/1 var(--serif);letter-spacing:.04em;font-weight:400;}
.vname .cls{font-size:8px;border-radius:1px;letter-spacing:.14em;padding:4px 6px;border-color:#d8bd8a44;background:#090f1b;}
.bar{height:17px;border-radius:1px;border:0;margin-bottom:5px;background:#020713;box-shadow:inset 0 0 0 1px #c0d8ff16;}
.bar i{transition:width .08s linear;}
.bar.hp{height:25px;}.bar.mp{height:21px;margin-bottom:10px;}
.bar.hp i{background:linear-gradient(90deg,#a63352,#e06676);box-shadow:none;}
.bar.mp i{background:linear-gradient(90deg,#275471,#67b7cc);box-shadow:none;}
.bar b{right:8px;top:0;line-height:25px;font:600 11px/25px var(--mono);letter-spacing:.02em;}
.bar.mp b{line-height:21px;}
.bar-label{position:absolute;z-index:2;left:8px;top:0;font:7px/25px var(--mono);letter-spacing:.14em;color:#fff9;}
.mp .bar-label{line-height:21px;}
.bar.rite{height:10px;}.bar.rite i{background:linear-gradient(90deg,#7263a2,#dac390);box-shadow:none;}
.bar.rite b{font:7px/10px var(--mono);}
.bar.blink{height:7px;margin-bottom:8px;}.bar.blink b{font:6px/7px var(--mono);}
.bar.blink i,.bar.blink.ready i{background:linear-gradient(90deg,#44899d,#acd9d4);box-shadow:none;}
.bar.heat{display:none!important;}
.bar.xp{height:3px;overflow:visible;margin-top:13px;margin-bottom:5px;}
.bar.xp i{background:#d5c296;box-shadow:none;}
.bar.xp b{font:7px/10px var(--mono);top:-12px;right:0;color:#c1cce0;}
.vmeta{padding-top:6px;font-size:7px;letter-spacing:.08em;color:#8293ac;}
.hud-right{top:21px;right:24px;gap:0;border-bottom:1px solid #cbb58a44;}
.match-menu{position:absolute;right:24px;top:91px;pointer-events:auto;cursor:pointer;padding:8px 12px;
  color:#eadcbe;background:#101a29eb;border:1px solid #cbb58a66;font:10px var(--mono);letter-spacing:.14em;}
.match-menu span{margin-left:18px;color:#91a4bb;font-size:8px;}
.match-menu:hover,.match-menu:focus-visible{border-color:#efdbaf;background:#243149;outline:1px solid #efdbaf;outline-offset:3px;}
@media(max-width:700px){.match-menu{top:151px;right:12px;}}
.stat{min-width:82px;padding:3px 17px 10px;background:transparent;border:0;border-radius:0;}
.stat+.stat{border-left:1px solid #cbb58a33;}
.stat b{font:36px/.95 var(--serif);color:#ecdfc4;}
.stat span{font-size:7px;letter-spacing:.22em;color:#90a2b9;}
.feed{top:141px;right:24px;gap:5px;}
.feed div{font-size:9px;padding:6px 11px;border-radius:1px;background:#0b1222dc;border-left-width:1px;color:#aebbd1;}
.abilitybar{gap:7px;bottom:105px;align-items:center;padding:10px 14px 8px;background:linear-gradient(180deg,#111b2bef,#0a101be8);
  border-top:1px solid #d9c39466;border-bottom:1px solid #d9c39433;}
.abilitybar::before,.abilitybar::after{content:'';position:absolute;top:0;bottom:0;width:11px;border:1px solid #d9c39444;transform:skewY(25deg);}
.abilitybar::before{left:-9px;border-right:0;}.abilitybar::after{right:-9px;border-left:0;transform:skewY(-25deg);}
.ab{width:67px;height:70px;border-radius:1px 12px 1px 1px;border-color:#94aac633;background:#080f1e;box-shadow:none;}
.ab .k{border-radius:0;background:#192337;color:#d5c29d;}
.ab .n{font:8px/1.2 var(--mono);letter-spacing:.03em;white-space:normal;max-width:64px;}
.ab.cooling .glyph{opacity:.18;}
.ab .cdtext{font:600 18px var(--mono);color:#f1e2bc;text-shadow:0 1px 3px #000;}
.ab.empty{opacity:.35;border-style:solid;}
.ab.ready{box-shadow:inset 0 -2px 0 currentColor;}
.ab.ready:not(.empty){border-color:#c8b88977;}
.ab.aiming{border-color:#ffe4a6;box-shadow:0 0 0 2px #d6bd7d44;}
.runebar{bottom:24px;gap:7px;}
.rune{width:56px;padding:6px 5px 5px;border-radius:1px 10px 1px 1px;background:#0a1121e8;border-color:#99afcf33;}
.rune.on{transform:translateY(-3px);box-shadow:inset 0 -2px currentColor;border-color:currentColor;}
.rune canvas{width:25px;height:25px;margin-bottom:3px;}.rune .rn{font-size:7px;}.rune .rk{font-size:8px;}
.conduit-mark{position:absolute;bottom:91px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;
  color:#bfae88;font:7px var(--mono);letter-spacing:.25em;white-space:nowrap;}
.conduit-mark span{width:45px;height:1px;background:linear-gradient(90deg,transparent,#c8b27d66);}
.conduit-mark span:last-child{transform:scaleX(-1);}
.combowire{bottom:205px;border:0;background:transparent;color:#aebed0;font:8px var(--mono);letter-spacing:.1em;padding:0;white-space:nowrap;}
.toasts{bottom:241px;}.toast{border-radius:2px;border-color:#d8bf8d44;background:#111a2cf2;font-size:9px;}
.team-stack{left:24px;bottom:252px;width:258px;}
.team-hud,.spectate-hud{border-radius:2px 16px 2px 2px;background:#0b1425ee;border-color:#a1babd44;box-shadow:none;}
.team-hud-legend{font-size:7px;}.team-hud-head{color:#c8ba99;}
.bossbar{top:82px;border-radius:2px;background:#0c1221f5;border-color:#dcb69b44;}
.draft{border-radius:3px 24px 3px 3px;background:linear-gradient(145deg,#1b2234fa,#080e1bfa);border-color:#d5c19466;}
.draft-head{font:25px var(--serif);letter-spacing:.09em;color:#e8d8b9;}
.draft{width:min(414px,calc(100vw - 32px));right:20px;padding:20px;text-align:left;
 max-height:calc(100vh - 150px);overflow:auto;overscroll-behavior:contain;z-index:35;
 background:#0b1323;border:1px solid #b8a47988;box-shadow:0 12px 55px #000c;scrollbar-width:thin;}
.draft-kicker{display:flex;align-items:center;justify-content:space-between;gap:12px;
 font:9px var(--mono);letter-spacing:.2em;color:#c5ad80;margin-bottom:14px;}
.draft-kicker button{font:9px var(--mono);padding:6px;border:1px solid #758ba444;color:#becbe0;background:#152036;cursor:pointer;}
.draft-head{font:23px/1.15 var(--serif);white-space:normal;letter-spacing:.04em;margin-bottom:15px;}
.draft-row{gap:10px;}.draft .boon{display:grid;grid-template-columns:38px minmax(0,1fr) 18px;gap:11px;
 position:relative;padding:15px 12px;border-radius:2px 14px 2px 2px;background:#131e32;border-color:#6d819d77;
 min-height:112px;box-shadow:none;align-items:start;}
.draft .boon:hover,.draft .boon:focus-visible{transform:none;background:#1c2b43;border-color:#ddc797;outline:2px solid #e4cf9a44;}
.draft-glyph{padding-top:17px;}.draft-glyph canvas{width:36px;height:36px;}
.draft .boon b{font:18px/1.15 var(--serif);letter-spacing:.025em;margin:4px 0 8px;}
.draft .boon .tag{font:8px var(--mono);letter-spacing:.11em;padding:3px 5px;margin:0;border-radius:1px;}
.draft .boon .desc{font:12px/1.5 var(--sans);color:#c0cde1;letter-spacing:0;}
.draft .boon .num{float:none;width:19px;height:22px;line-height:22px;font-size:11px;color:#e6d6b1;background:#090f1d;border-radius:2px;}
.draft-copy small{display:block;margin-top:8px;font:8px var(--mono);color:#8ed6df;letter-spacing:.08em;}
.draft .draft-hint{font:10px/1.5 var(--sans);letter-spacing:0;color:#9baec8;margin-top:13px;}
.draft .draft-guard{font-size:10px;letter-spacing:.02em;margin-top:10px;padding:9px;}
.draft.folded{width:300px;padding:14px;top:120px;transform:none;animation:none;}
.draft{scrollbar-color:#788ca3 #0b1323;}
.draft::-webkit-scrollbar{width:6px;}.draft::-webkit-scrollbar-track{background:#0b1323;}
.draft::-webkit-scrollbar-thumb{background:#788ca3;border-radius:6px;}
.draft.folded .draft-row,.draft.folded .draft-hint,.draft.folded .draft-guard{display:none;}
.draft.folded .draft-head{font-size:18px;margin:0;}.draft.folded .draft-kicker{margin-bottom:8px;}
.draft-summary{font:14px/1.5 var(--sans);color:#d4e0ef;margin:0 0 7px;}
.draft-socket{display:flex;align-items:center;gap:12px;text-align:left;padding:13px 10px;color:#d5dfed;
 background:#142137;border:1px solid #6c88a577;border-radius:2px;font:12px/1.4 var(--sans);cursor:pointer;}
.draft-socket b{display:grid;place-items:center;width:27px;min-width:27px;height:27px;border:1px solid #d3be8c77;color:#efd6a5;font:14px var(--mono);}
.draft-socket:hover,.draft-socket:focus-visible{border-color:#e0c58d;background:#21314a;outline:none;}
.draft-back{font:10px var(--mono);padding:10px;background:transparent;color:#acbed5;border:1px solid #778ba444;cursor:pointer;}
@media(max-width:1100px){.draft{right:14px;width:360px;padding:15px;}.draft .boon b{font-size:17px;}}
@media(max-width:780px){.draft{right:12px;top:50%;width:min(380px,calc(100vw - 24px));max-height:calc(100vh - 120px);}.draft .boon{min-height:100px;padding:12px 10px;}.draft .boon .desc{font-size:11px;}}
@media(max-width:1100px){
 .vitals{width:213px;padding:12px;}.hud-left{left:16px;bottom:20px;}.team-stack{left:16px;width:213px;bottom:247px;}
 .ab{width:58px;height:65px;}.abilitybar{gap:5px;padding:9px 10px;}.rune{width:47px;}.vname .who{font-size:19px;}
}
@media(max-width:780px){
 .hud-top{top:10px;}.zonebox{min-width:240px;padding:9px 13px;}.hud-right{right:12px;top:81px;}
 .stat b{font-size:25px;}.stat{min-width:54px;padding:3px 10px 7px;}.stat span{font-size:6px;}
 .vitals{width:168px;padding:10px;}.vname .who{font-size:16px;}.vname .cls{font-size:6px;}.vitals-kicker{font-size:6px;}
 .team-stack{width:168px;}.vmeta{font-size:6px;}.bar-label{font-size:6px;}
 .ab{width:48px;height:60px;}.ab .n{font-size:6px;}.abilitybar{gap:4px;padding:7px;bottom:99px;}
 .rune{width:42px;}.runebar{bottom:24px;}.combowire{bottom:189px;font-size:7px;}.conduit-mark{bottom:86px;}
}