/* ============ BATTLE WIZARDS ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --fire: #ff6b35;
  --frost: #5ec8e5;
  --lightning: #b67cff;
  --toxic: #8ee53f;
  --wind: #aee3ff;
  --stone: #c2a878;
  --gold: #e8c873;
  --parchment: #efe3c2;
  --ink: #1a1410;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #0b0e14;
  font-family: Georgia, 'Times New Roman', serif;
  user-select: none;
  -webkit-user-select: none;
}

#game-root, #game-root canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

.screen { position: fixed; inset: 0; z-index: 10; }
.hidden { display: none !important; }

/* Clerk sign-in gate — sits above the loading screen (z-index 50) */
#auth-overlay { z-index: 60; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(1200px 800px at 50% 30%, rgba(28,34,52,0.96), rgba(6,8,13,0.985)); }
#auth-overlay.hidden { display: none !important; }
.auth-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px; max-width: 460px; }
.auth-rune { font-size: 40px; color: #e8c873; opacity: 0.9; text-shadow: 0 0 24px rgba(232,200,115,0.4); }
.auth-title { font-size: 34px; letter-spacing: 0.3em; margin: 0; color: #f0e6cf; font-weight: 700; }
.auth-sub { margin: 0 0 16px; color: #9aa3b2; font-size: 13px; letter-spacing: 0.06em; }
#auth-clerk { min-height: 1px; }

/* Lobby co-op box (squad panel) */
.coop-box { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(232,200,115,0.14); }
.coop-head { font-size: 11px; letter-spacing: 0.14em; color: #9aa3b2; margin-bottom: 9px; }
.coop-actions { display: flex; gap: 6px; align-items: center; }
.coop-btn { font-family: inherit; font-size: 12px; letter-spacing: 0.07em; color: #e8c873; background: rgba(14,18,26,0.7); border: 1px solid #2e3850; border-radius: 7px; padding: 7px 12px; cursor: pointer; transition: all 0.15s ease; }
.coop-btn:hover { border-color: #e8c873; }
.coop-input { width: 66px; font-family: ui-monospace, monospace; font-size: 13px; text-transform: uppercase; text-align: center; letter-spacing: 0.12em; color: #f0e6cf; background: rgba(6,8,12,0.6); border: 1px solid #2e3850; border-radius: 7px; padding: 6px 4px; }
.coop-status { font-size: 11px; color: #8b93a4; margin-top: 9px; line-height: 1.5; }
.coop-start { width: 100%; margin-top: 10px; background: linear-gradient(180deg, rgba(232,200,115,0.2), rgba(232,200,115,0.06)); border-color: rgba(232,200,115,0.5); color: #f0e6cf; font-weight: 700; letter-spacing: 0.1em; }
.coop-or { color: #6b7384; font-size: 11px; }
.coop-room { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.coop-code-big { font-family: ui-monospace, monospace; font-size: 22px; letter-spacing: 0.22em; color: #f0e6cf; background: rgba(6,8,12,0.6); border: 1px solid rgba(232,200,115,0.45); border-radius: 8px; padding: 6px 14px; }
.coop-copy, .coop-leave { font-size: 11px; padding: 6px 10px; }
.coop-leave { color: #c98b8b; border-color: #4a2e2e; }
.slot-you { color: #e8c873; font-size: 0.82em; font-weight: 400; }
.squad-slot.waiting { opacity: 0.72; border-style: dashed; }
.squad-slot.waiting .slot-label { color: #e8c873; letter-spacing: 0.12em; }
.play-btn.disabled { opacity: 0.5; filter: grayscale(0.5); cursor: not-allowed; }

/* ===================== LOADING SCREEN ===================== */
#loading-screen {
  z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 50% 30%, #2b3a52 0%, transparent 60%),
    #0b0e14;
}
.load-inner { text-align: center; width: min(440px, 80vw); }
.load-rune {
  font-size: 56px; color: var(--gold);
  text-shadow: 0 0 26px var(--gold);
  animation: runeSpin 3s linear infinite;
}
@keyframes runeSpin { to { transform: rotate(360deg); } }
.load-title {
  margin: 14px 0 26px;
  font-size: clamp(26px, 4vw, 40px);
  letter-spacing: 0.22em;
  color: var(--parchment);
  text-shadow: 0 0 24px rgba(232,200,115,0.3);
}
.load-track {
  height: 8px; width: 100%;
  background: rgba(8,10,16,0.8);
  border: 1px solid rgba(232,200,115,0.4);
  border-radius: 5px; overflow: hidden;
}
#load-bar {
  position: relative;
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #5a6b8a, var(--gold));
  border-radius: 5px;
  overflow: hidden;
  transition: width 0.3s ease;
  box-shadow: 0 0 12px rgba(232,200,115,0.5);
}
/* a highlight sweeping across the fill so the bar reads as actively working,
   even while a (blocking) shader compile holds the width steady for a beat */
#load-bar::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: translateX(-100%);
  animation: loadShimmer 1.1s ease-in-out infinite;
}
@keyframes loadShimmer { to { transform: translateX(100%); } }
#load-label {
  margin-top: 12px;
  font-size: 12px; letter-spacing: 0.14em;
  color: #8b94a5; font-style: italic;
  animation: loadLabelPulse 1.6s ease-in-out infinite;
}
@keyframes loadLabelPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* ===================== TITLE / START SCREEN ===================== */
#title-screen {
  z-index: 35;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 50% -10%, #2b3a52 0%, transparent 60%),
    radial-gradient(ellipse at 50% 120%, #1d2a1d 0%, transparent 55%),
    #0b0e14;
}
.title-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}
.title-inner { position: relative; text-align: center; padding: 24px; }
.title-rune-big {
  font-size: 72px; color: var(--gold);
  text-shadow: 0 0 30px var(--gold);
  margin-bottom: 4px;
  animation: runeSpin 9s linear infinite;
}
.title-main {
  font-size: clamp(48px, 8vw, 104px);
  letter-spacing: 0.16em;
  color: var(--parchment);
  text-shadow: 0 0 40px rgba(232,200,115,0.4), 0 5px 0 rgba(0,0,0,0.6);
  margin-bottom: 10px;
}
.title-tag {
  color: #9aa3b2; font-style: italic;
  font-size: clamp(14px, 1.6vw, 19px);
  margin-bottom: 38px;
}
.big-btn {
  font-family: inherit;
  font-size: 22px; letter-spacing: 0.3em;
  padding: 18px 64px;
  color: var(--ink);
  background: linear-gradient(180deg, #f4dd92, #d8b24e);
  border: none; border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(232,200,115,0.35), 0 2px 0 rgba(0,0,0,0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.big-btn:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 30px rgba(232,200,115,0.5); }
.title-controls-hint {
  margin-top: 36px; color: #6b7488; font-size: 12.5px; letter-spacing: 0.04em;
}
.title-controls-hint b { color: var(--parchment); }

/* mode toggle on the select screen */
.mode-toggle {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 26px; flex-wrap: wrap;
}
.mode-label { font-size: 11px; letter-spacing: 0.3em; color: #6b7488; margin-right: 4px; }
.mode-btn {
  font-family: inherit; font-size: 13px; letter-spacing: 0.06em;
  padding: 9px 18px; border-radius: 8px; cursor: pointer;
  color: #9aa3b2; background: linear-gradient(180deg, #1a2030, #12161f);
  border: 1px solid #2e3850;
  transition: all 0.15s ease;
}
.mode-btn:hover { color: var(--parchment); border-color: #3d4a68; }
.mode-btn.active {
  color: var(--gold); border-color: var(--gold);
  box-shadow: 0 0 14px rgba(232,200,115,0.3);
}

/* ===================== SELECT SCREEN ===================== */
/* The gauntlet-select stage themes itself to the chosen element via --el
   (set on #select-screen by menu.js). Layout: emblem rail · featured mage · dossier. */
#select-screen {
  --el: var(--gold);
  background: #06080c;
  overflow: hidden;
  z-index: 30;
}

/* the real Spellbreak main-menu backdrop (Castle Bogmoor), darkened to sit behind */
.sel-bg {
  position: absolute; inset: 0;
  background: url('../assets/ui/menu-bg.png') center 30% / cover no-repeat;
  filter: saturate(0.72) brightness(0.5);
  transform: scale(1.06);
}
.sel-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 85% at 50% 6%, color-mix(in srgb, var(--el) 22%, transparent), transparent 58%),
    linear-gradient(180deg, rgba(6,8,12,0.55) 0%, rgba(6,8,12,0.18) 36%, rgba(6,8,12,0.86) 100%);
  transition: background 0.4s ease;
}
.sel-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.78) 100%);
}

.sel-title {
  position: absolute; top: 26px; left: 0; right: 0; text-align: center;
  font-size: clamp(26px, 3.4vw, 44px);
  letter-spacing: 0.2em;
  color: var(--parchment);
  text-shadow: 0 0 28px rgba(232,200,115,0.35), 0 3px 0 rgba(0,0,0,0.6);
  z-index: 4; pointer-events: none;
}
.title-rune { color: var(--gold); text-shadow: 0 0 18px var(--gold); font-size: 0.62em; vertical-align: middle; }

.sel-layout {
  position: absolute; inset: 0; z-index: 3;
  max-width: 1500px;          /* contain the stage on wide viewports... */
  margin-inline: auto;        /* ...and center it instead of stretching the rail/dossier to the edges */
  display: grid;
  grid-template-columns: auto 1fr minmax(320px, 400px);   /* dossier is px-bounded, not 30vw (which ballooned on big screens) */
  grid-template-rows: minmax(0, 1fr);   /* bound the row to the viewport so the stage's % height can't overflow */
  align-items: center;
  gap: clamp(12px, 3vw, 56px);
  padding: 96px clamp(28px, 5vw, 90px) 84px;
}

/* ---- left: the six gauntlet emblems ---- */
.sel-rail { display: flex; flex-direction: column; gap: 14px; }
.sel-emblem {
  --ec: var(--gold);
  position: relative; width: 74px; height: 74px; padding: 0;
  border-radius: 14px;
  border: 1px solid #2c3550;
  background: linear-gradient(180deg, rgba(28,34,48,0.7), rgba(12,16,24,0.7));
  cursor: pointer; display: grid; place-items: center;
  backdrop-filter: blur(2px);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.sel-emblem img { width: 56px; height: 56px; object-fit: contain; filter: saturate(0.85) brightness(0.9); transition: filter 0.16s ease; }
.sel-emblem:hover { transform: translateX(4px); border-color: var(--ec); }
.sel-emblem:hover img { filter: none; }
.sel-emblem.active {
  border-color: var(--ec);
  box-shadow: 0 0 0 1px var(--ec), 0 0 22px color-mix(in srgb, var(--ec) 55%, transparent), inset 0 0 18px color-mix(in srgb, var(--ec) 22%, transparent);
  transform: translateX(8px) scale(1.04);
}
.sel-emblem.active img { filter: drop-shadow(0 0 6px var(--ec)); }
.sel-emblem.active::before {
  content: ''; position: absolute; left: -8px; top: 14%; bottom: 14%; width: 3px; border-radius: 3px;
  background: var(--ec); box-shadow: 0 0 12px var(--ec);
}

/* ---- center: the featured battlemage ---- */
.sel-stage { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.sel-watermark {
  position: absolute; top: 50%; left: 50%; width: min(62%, 480px);
  transform: translate(-50%, -54%);
  opacity: 0.16; pointer-events: none;
  /* the emblem PNGs are opaque squares — fade the edges so the crest reads as a glow, not a box */
  -webkit-mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, #000 30%, transparent 70%);
          mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, #000 30%, transparent 70%);
}
.sel-floor {
  position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%);
  width: 62%; height: 58px; border-radius: 50%;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--el) 55%, transparent), transparent 70%);
  filter: blur(6px); transition: background 0.4s ease; pointer-events: none;
}
.featured-canvas {
  position: relative; z-index: 2;
  height: min(88%, 720px); width: auto; max-width: 100%;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.55));
}

/* ---- right: the dossier ---- */
.sel-panel {
  position: relative; padding: 26px 26px 24px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--el) 30%, #2c3550);
  background: linear-gradient(180deg, rgba(16,20,30,0.82), rgba(9,12,18,0.9));
  box-shadow: 0 18px 50px rgba(0,0,0,0.5), inset 0 0 40px color-mix(in srgb, var(--el) 8%, transparent);
  backdrop-filter: blur(6px);
  transition: border-color 0.4s ease;
}
.sel-class { font-size: 12px; letter-spacing: 0.32em; font-weight: bold; color: var(--el); opacity: 0.9; }
.sel-name { font-size: clamp(30px, 3vw, 44px); letter-spacing: 0.08em; color: var(--parchment); margin: 2px 0 4px; }
.sel-element {
  display: inline-block; font-size: 11px; letter-spacing: 0.34em; font-weight: bold; color: var(--el);
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--el) 28%, #232a3d);
}
.sel-blurb { font-size: 13.5px; line-height: 1.5; color: #aab2c2; font-style: italic; margin-bottom: 18px; min-height: 42px; }

.sel-abilities { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.sa { display: flex; align-items: center; gap: 12px; }
.sa-icon {
  width: 46px; height: 46px; flex: none; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--el) 50%, #2c3550);
  background: #0a0d13 center / cover no-repeat;
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--el) 18%, transparent);
}
.sa-meta { display: flex; flex-direction: column; gap: 3px; }
.sa-key {
  align-self: flex-start; font-size: 9px; letter-spacing: 0.12em; color: var(--parchment);
  background: #0a0d13; border: 1px solid color-mix(in srgb, var(--el) 45%, #2c3550);
  border-radius: 4px; padding: 1px 6px;
}
.sa-name { font-size: 15px; color: #e6ebf4; letter-spacing: 0.02em; }

.sel-stats { display: flex; flex-direction: column; gap: 7px; margin-bottom: 22px; }
.sel-stat { display: flex; align-items: center; gap: 10px; }
.sel-stat span { font-size: 10px; letter-spacing: 0.16em; color: #7d889c; width: 30px; }
.sel-bar { flex: 1; height: 7px; background: #0a0d13; border-radius: 4px; overflow: hidden; }
.sel-bar i { display: block; height: 100%; border-radius: 4px; transition: width 0.4s ease;
  background: linear-gradient(90deg, color-mix(in srgb, var(--el) 40%, #46506a), var(--el)); }

.sel-choose {
  width: 100%; padding: 14px 0;
  font-family: inherit; font-size: 16px; letter-spacing: 0.32em; font-weight: bold;
  color: var(--ink);
  background: linear-gradient(180deg, var(--el), color-mix(in srgb, var(--el) 72%, #000 12%));
  border: 1px solid color-mix(in srgb, var(--el) 75%, #fff);
  border-radius: 9px; cursor: pointer;
  box-shadow: 0 0 22px color-mix(in srgb, var(--el) 40%, transparent), 0 4px 12px rgba(0,0,0,0.4);
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}
.sel-choose:hover { transform: translateY(-2px); filter: brightness(1.08);
  box-shadow: 0 0 30px color-mix(in srgb, var(--el) 60%, transparent), 0 6px 16px rgba(0,0,0,0.5); }
.sel-choose:active { transform: translateY(0); }

/* portrait: stack dossier under the stage, rail goes horizontal
   (landscape always keeps the three columns — see the short-landscape rule below) */
@media (orientation: portrait) {
  .sel-layout {
    grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto;
    justify-items: center; padding: 80px 16px 72px; gap: 10px;
  }
  .sel-rail { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .sel-emblem { width: 56px; height: 56px; }
  .sel-emblem img { width: 42px; height: 42px; }
  .sel-emblem:hover, .sel-emblem.active { transform: scale(1.06); }
  .sel-emblem.active::before { display: none; }
  .featured-canvas { height: min(40vh, 400px); }
  .sel-panel { width: min(560px, 94vw); }
  .sel-watermark { display: none; }
}

/* short landscape (phones held sideways — the game's mobile orientation):
   keep the three columns but compact everything so the dossier fits the height */
@media (orientation: landscape) and (max-height: 540px) {
  .sel-title { top: 10px; font-size: clamp(19px, 3vw, 28px); }
  .sel-layout {
    grid-template-columns: auto 1fr minmax(280px, 34vw);
    padding: 46px clamp(12px, 3.5vw, 40px) 24px; gap: clamp(8px, 2.2vw, 26px);
  }
  .sel-rail { gap: 8px; }
  .sel-emblem { width: 48px; height: 48px; border-radius: 11px; }
  .sel-emblem img { width: 36px; height: 36px; }
  .sel-emblem.active::before { display: none; }
  /* cap + scroll so CHOOSE is always reachable even on the shortest phones */
  .sel-panel { padding: 13px 15px; border-radius: 12px; max-height: calc(100vh - 70px); overflow-y: auto; }
  .sel-class { font-size: 10px; }
  .sel-name { font-size: clamp(20px, 3.2vw, 28px); margin-bottom: 2px; }
  .sel-element { padding-bottom: 6px; margin-bottom: 7px; }
  .sel-blurb { font-size: 11.5px; line-height: 1.35; min-height: 0; margin-bottom: 9px; }
  .sel-abilities { gap: 6px; margin-bottom: 9px; }
  .sa-icon { width: 34px; height: 34px; }
  .sa-name { font-size: 13.5px; }
  .sel-stats { gap: 4px; margin-bottom: 10px; }
  .sel-choose { padding: 9px 0; font-size: 13px; letter-spacing: 0.26em; }
  .featured-canvas { height: 96%; }
}

/* ===================== HUD ===================== */
#hud { pointer-events: none; z-index: 20; }

.hud-player-panel {
  position: absolute;
  left: 28px; bottom: 26px;
  display: flex; align-items: flex-end; gap: 13px;
}

/* faceted gem portrait with a gold frame */
.hud-portrait {
  position: relative;
  width: 78px; height: 78px;
  clip-path: polygon(50% 0, 86% 14%, 100% 50%, 86% 86%, 50% 100%, 14% 86%, 0 50%, 14% 14%);
  background: linear-gradient(150deg, #f4dd92, #8a6f2e 55%, #f4dd92);
  filter: drop-shadow(0 3px 7px rgba(0,0,0,0.7))
          drop-shadow(0 0 9px color-mix(in srgb, var(--el, transparent) 55%, transparent));
}
.hud-portrait::before {
  content: ""; position: absolute; inset: 3px;
  clip-path: inherit;
  background: radial-gradient(circle at 50% 34%, #2a3349, #0d1119 78%);
  z-index: 0;
}
#hud-portrait {
  position: absolute; inset: 3px;
  width: calc(100% - 6px); height: calc(100% - 6px);
  clip-path: inherit;
  z-index: 1;
}

.hud-vitals { width: 288px; padding-bottom: 2px; }
.hud-id { display: flex; align-items: baseline; gap: 9px; margin-bottom: 7px; }
.hud-name {
  color: var(--parchment);
  font-size: 16px; letter-spacing: 0.2em; font-weight: bold;
  text-shadow: 0 2px 5px rgba(0,0,0,0.85);
}
.hud-class {
  font-size: 9.5px; letter-spacing: 0.26em;
  color: var(--el, var(--gold)); opacity: 0.9;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* angular beveled meters (notched bottom-left corner) */
.bar-shell {
  position: relative;
  height: 17px;
  background: rgba(8, 10, 16, 0.82);
  border: 1px solid color-mix(in srgb, var(--el, #e8c873) 28%, rgba(232, 200, 115, 0.26));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  overflow: hidden;
  margin-bottom: 5px;
  box-shadow: 0 2px 7px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
}
.health-shell { height: 19px; border-color: rgba(255,140,80,0.5); }
.mana-shell { height: 12px; }
.flight-shell { height: 7px; }
.shield-shell { height: 11px; border-color: rgba(143,233,255,0.55); }

.bar-fill {
  position: absolute; inset: 0;
  width: 100%;
  transform-origin: left center;
}
.health-fill {
  background: linear-gradient(180deg, #ffb15a 0%, #ff6f3c 48%, #d8351f 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -3px 6px rgba(120,10,0,0.4);
  z-index: 1;
}
.mana-fill {
  background: linear-gradient(180deg, #7cc0ff 0%, #2f6fd0 55%, #1d4a96 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.flight-fill {
  background: linear-gradient(180deg, #eafaff 0%, #9fe3f2 55%, #5bbdd8 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}
.flight-shell.levitating { box-shadow: 0 0 12px #aee3ff, 0 2px 7px rgba(0,0,0,0.5); }
.shield-fill {
  background: linear-gradient(180deg, #dffaff 0%, #8fe9ff 55%, #4ab8d8 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}

/* health "ghost" — a slow-draining trail that exposes recent damage */
.bar-damage-ghost {
  position: absolute; inset: 0;
  width: 100%;
  background: rgba(255, 224, 120, 0.6);
  transform-origin: left center;
  z-index: 0;
}

.bar-text {
  position: absolute;
  right: 9px; top: 50%;
  transform: translateY(-50%);
  font-size: 10.5px;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
  z-index: 3;
  font-weight: bold;
  letter-spacing: 0.05em;
}

/* ===================== ABILITY FAN (bottom-center) ===================== */
.ability-fan {
  position: absolute;
  left: 50%; bottom: 22px;
  transform: translateX(-50%);
  display: flex; align-items: flex-end; gap: 13px;
  pointer-events: none;
}

.ability {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.ability.hidden { display: none !important; }

.ab-disc {
  position: relative;
  width: 62px; height: 62px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 36%, #1c2433, #0a0d14 80%);
  border: 2px solid color-mix(in srgb, var(--el, var(--gold)) 70%, #2a3142);
  box-shadow: 0 3px 10px rgba(0,0,0,0.65),
              0 0 0 1px rgba(0,0,0,0.5),
              0 0 13px color-mix(in srgb, var(--el, transparent) 38%, transparent);
}
.ab-disc canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ab-glyph {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 16px; fill: var(--parchment); opacity: 0.92;
}
/* equipped-rune glyph in the MOV slot (names are hidden, so the icon carries it) */
.ab-rune-glyph {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; line-height: 1; opacity: 0.95;
  color: var(--parchment, #ece3cf);   /* keep monochrome glyphs (» ⤴ ✦ ☾ ◌) legible */
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
/* real Spellbreak rune icon fills the MOV slot when one is equipped */
.ab-rune-glyph img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 16px; box-sizing: border-box;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.7));
}

/* numeric cooldown readout, centered over the (darkened) icon while cooling */
.ab-cd-num {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  font-size: 23px; font-weight: 800; line-height: 1;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 8px rgba(0,0,0,0.7);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.ab-cd-num:empty { display: none; }
.ab-move .ab-cd-num { font-size: 27px; }   /* the larger central SHIFT slot */

/* charge count for charge-based runes (Blink ×3) — sits inside the disc rim */
.ab-charges {
  position: absolute; z-index: 5;
  bottom: 5px; left: 0; right: 0;
  text-align: center;
  font-size: 15px; font-weight: 700; line-height: 1;
  color: var(--parchment, #ece3cf);
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.6);
  pointer-events: none;
}
.ab-charges:empty { display: none; }

/* sizes — MOV is the large central movement slot; LMB/RMB flank it */
.ab-move    .ab-disc { width: 84px; height: 84px; }
.ab-sorcery .ab-disc { width: 70px; height: 70px; }
.ab-spell   .ab-disc { width: 70px; height: 70px; }
.ab-move    .ab-glyph { padding: 22px; }

/* conic cooldown wipe, driven by --cd (1 = just used … 0 = ready) */
.ab-cooldown {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(rgba(6,8,13,0.78) calc(var(--cd, 0) * 360deg), transparent 0);
  pointer-events: none; z-index: 4;
}
/* frost charge ring on the primary, driven by --charge */
.ab-charge {
  position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(rgba(174,227,255,0.95) calc(var(--charge, 0) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
          mask: radial-gradient(circle, transparent 58%, #000 60%);
  opacity: 0; z-index: 5; pointer-events: none;
}
.ab-sorcery.charging .ab-charge { opacity: 1; }
.ab-sorcery.charging .ab-disc { box-shadow: 0 0 20px rgba(174,227,255,0.85), 0 3px 10px rgba(0,0,0,0.65); }

/* ready / cooling states */
.ability.cooling .ab-disc { border-color: #3a4254; filter: saturate(0.7) brightness(0.82); }
.ability:not(.cooling):not(.ab-move) .ab-disc { animation: abReady 2.6s ease-in-out infinite; }
@keyframes abReady {
  0%, 100% { box-shadow: 0 3px 10px rgba(0,0,0,0.65), 0 0 9px color-mix(in srgb, var(--el, transparent) 32%, transparent); }
  50%      { box-shadow: 0 3px 10px rgba(0,0,0,0.65), 0 0 19px color-mix(in srgb, var(--el, transparent) 62%, transparent); }
}

/* central movement ability — larger, brighter "signature" slot (placeholder) */
.ab-move .ab-disc {
  border-color: color-mix(in srgb, var(--el, var(--gold)) 88%, #2a3142);
  animation: abMoveReady 2.6s ease-in-out infinite;
}
@keyframes abMoveReady {
  0%, 100% { box-shadow: 0 4px 14px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.5), 0 0 15px color-mix(in srgb, var(--el, transparent) 48%, transparent); }
  50%      { box-shadow: 0 4px 14px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.5), 0 0 28px color-mix(in srgb, var(--el, transparent) 82%, transparent); }
}
/* MOV slot with no rune equipped — dim, no ready pulse */
.ab-move.empty .ab-disc {
  animation: none; opacity: 0.5; border-color: #3a4254;
  box-shadow: 0 4px 14px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.5);
}
.ab-move.empty .ab-rune-glyph { opacity: 0.4; }

/* RIGHT gauntlet slots before one is looted — dimmed, "loot a gauntlet" hint */
.ability.ab-right.empty .ab-disc { animation: none; opacity: 0.42; border-color: #3a4254;
  box-shadow: 0 4px 14px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.5); }
.ability.ab-right.empty .ab-name { opacity: 0.6; font-style: italic; }
/* mobile right-hand buttons before a looted gauntlet */
.tc-btn.empty { opacity: 0.4; }

/* key cap + ability name */
.ab-key {
  font-size: 9px; letter-spacing: 0.08em; font-weight: bold;
  color: var(--gold);
  background: rgba(8,10,16,0.85);
  border: 1px solid rgba(232,200,115,0.4);
  border-radius: 4px; padding: 1px 6px; min-width: 22px; text-align: center;
  text-shadow: 0 1px 2px #000;
}
/* ability names are intentionally hidden — Spellbreak shows icons + key only */
.ab-name { display: none; }

/* ===== utility icons under the flight bar: dash (refills) + potion (count) ===== */
.util-row { display: flex; gap: 12px; margin-top: 9px; align-items: flex-start; }
.util-icon { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.util-glyph {
  position: relative; width: 34px; height: 34px;
  background: rgba(8,10,16,0.72);
  border: 1px solid rgba(232,200,115,0.28);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.util-key {
  font-size: 8px; letter-spacing: 0.06em; font-weight: bold;
  color: var(--gold); opacity: 0.85; text-shadow: 0 1px 2px #000;
}

/* dash — a runner that drains on use and refills (height = --fill) over the cooldown */
.util-glyph .runner {
  position: absolute; left: 4px; bottom: 4px; width: 26px; height: 26px;
  fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.runner-empty { stroke: rgba(126,140,166,0.5); }
.runner-clip {
  position: absolute; left: 4px; right: 4px; bottom: 4px;
  height: calc(var(--fill, 1) * 26px);
  overflow: hidden;
}
.runner-clip .runner-full { left: 0; bottom: 0; }
.runner-full { stroke: #7fd7f0; }
.util-dash.ready .util-glyph { border-color: rgba(143,233,255,0.5); box-shadow: 0 0 9px rgba(143,233,255,0.4), 0 2px 6px rgba(0,0,0,0.5); }
.util-dash.ready .runner-full { stroke: #d6f4ff; }

/* potion — vial + held count; the whole icon fades when you hold none */
.vial { position: absolute; left: 5px; bottom: 4px; width: 24px; height: 26px; fill: #7fe0a0; }
.util-potion .util-glyph { opacity: 0.45; transition: opacity 0.2s; }
.util-potion.has .util-glyph { opacity: 1; border-color: rgba(127,224,160,0.45); box-shadow: 0 0 9px rgba(127,224,160,0.4), 0 2px 6px rgba(0,0,0,0.5); }
.util-count {
  position: absolute; right: -5px; bottom: -5px;
  min-width: 16px; height: 16px; line-height: 15px; text-align: center;
  font-size: 10px; font-weight: bold; color: #0c2417;
  background: #7fe0a0; border-radius: 8px;
  box-shadow: 0 0 5px rgba(127,224,160,0.6);
}

/* a looted RIGHT gauntlet tints its slot rims to the loot rarity colour */
.ab-right .ab-disc { border-color: color-mix(in srgb, var(--rarity, var(--el, var(--gold))) 80%, #2a3142); }

.status-row { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; min-height: 18px; }
.status-pill {
  font-size: 9px; letter-spacing: 0.08em; font-weight: bold;
  padding: 2px 7px; border-radius: 10px;
  color: #0c0f16; background: var(--sc, #fff);
  box-shadow: 0 0 8px var(--sc, #fff);
}

/* battle-royale top bar */
.hud-top {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  text-align: center; pointer-events: none;
}
#alive-counter {
  font-size: 14px; letter-spacing: 0.2em; color: var(--parchment);
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}
#alive-counter b { color: var(--gold); font-size: 22px; }
#storm-status {
  margin-top: 3px; font-size: 12px; letter-spacing: 0.14em;
  color: #b48bd9; font-style: italic;
}
#storm-status.closing { color: #db9bff; text-shadow: 0 0 12px rgba(166,75,255,0.7); font-style: normal; }

#kill-feed {
  position: absolute; top: 16px; right: 22px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  pointer-events: none;
}
.kill-entry {
  font-size: 12px; letter-spacing: 0.03em;
  background: rgba(10,14,22,0.6); padding: 3px 9px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08); color: #aab3c2;
}
.kill-entry b { color: #e8c873; margin: 0 3px; }

#storm-warning {
  position: absolute; top: 62px; left: 50%; transform: translateX(-50%);
  font-size: 16px; letter-spacing: 0.22em; font-weight: bold;
  color: #e6a3ff; text-shadow: 0 0 16px rgba(166,75,255,0.9);
  opacity: 0; pointer-events: none;
}
#storm-warning.show { animation: stormpulse 0.9s ease-in-out infinite; }
@keyframes stormpulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }

#minimap-frame {
  position: absolute; top: 18px; right: 24px;
  width: 158px; height: 158px; border-radius: 50%;
  padding: 9px;
  background:
    repeating-conic-gradient(from 0deg,
      rgba(232,200,115,0) 0deg 4.2deg,
      rgba(232,200,115,0.4) 4.2deg 4.9deg),
    rgba(8,10,16,0.5);
  box-shadow: 0 3px 14px rgba(0,0,0,0.6), inset 0 0 18px rgba(0,0,0,0.5),
              0 0 0 2px color-mix(in srgb, var(--el, #e8c873) 45%, rgba(232,200,115,0.45));
  pointer-events: none;
}
#minimap-frame::before {
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  border: 2px solid rgba(232,200,115,0.55);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.6);
  z-index: 2; pointer-events: none;
}
#minimap-frame::after {
  content: "N"; position: absolute; top: 1px; left: 50%; transform: translateX(-50%);
  font-size: 10px; letter-spacing: 0.1em; color: var(--gold);
  text-shadow: 0 1px 3px #000; z-index: 3;
}
#minimap {
  position: relative; z-index: 1;
  width: 100%; height: 100%; border-radius: 50%;
  background: rgba(8,10,16,0.55);
}
.map-hint {
  position: absolute; top: 184px; right: 24px;
  width: 158px; text-align: center;
  font-size: 9px; letter-spacing: 0.12em; color: #8b94a5;
  pointer-events: none;
}
.map-hint b {
  color: var(--gold); border: 1px solid rgba(232,200,115,0.45);
  border-radius: 4px; padding: 1px 5px; margin-right: 5px;
}
/* nudge the killfeed left so it doesn't collide with the minimap */
#kill-feed { right: 196px; }

#dummy-meter {
  position: absolute; top: 20px; left: 22px;
  min-width: 132px;
  background: rgba(10, 14, 22, 0.62);
  border: 1px solid rgba(232, 200, 115, 0.35);
  border-radius: 8px;
  padding: 8px 12px;
  pointer-events: none;
}
.dm-title {
  font-size: 10px; letter-spacing: 0.25em; color: #6b7488;
  text-align: center; margin-bottom: 5px;
}
.dm-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.dm-row span { font-size: 11px; letter-spacing: 0.1em; color: #8b94a5; }
.dm-row b { font-size: 18px; color: var(--gold); font-variant-numeric: tabular-nums; }

#nameplate-layer { position: fixed; inset: 0; pointer-events: none; z-index: 24; overflow: hidden; }
.nameplate { position: absolute; transform: translate(-50%, -100%); width: 120px; text-align: center; }
.np-mark { font-size: 11px; line-height: 1; margin-bottom: 1px; }
.np-mark:empty { display: none; }
.np-name:empty { display: none; }
.np-name {
  font-size: 11px; letter-spacing: 0.06em; font-weight: bold;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9); margin-bottom: 2px; white-space: nowrap;
}
.np-bar {
  height: 6.5px; width: 72px; margin: 0 auto;
  background: rgba(8,10,16,0.85); border: 1px solid rgba(255,255,255,0.25);
  border-radius: 3px; overflow: hidden;
}
.np-bar i { display: block; height: 100%; background: linear-gradient(90deg,#ff7b6b,#c23a2c); }

/* hostile — warm red bar (the default) with a red-tinted frame */
.nameplate.foe .np-bar { border-color: rgba(255,123,107,0.5); }

/* friendly — cool teal bar, soft glow, and a downward chevron beacon */
.nameplate.ally .np-mark { color: #5fe6b0; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
.nameplate.ally .np-bar { border-color: rgba(110,235,180,0.6); box-shadow: 0 0 7px rgba(70,215,150,0.4); }
.nameplate.ally .np-bar i { background: linear-gradient(90deg,#7dffc0,#1fae74); }

/* neutral — practice dummy, muted grey bar */
.nameplate.neutral .np-bar i { background: linear-gradient(90deg,#c9d1dc,#8b94a5); }

/* dash readiness caption now lives under the SHIFT slot — see .ability-fan */

#low-mana-flash {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(47, 111, 208, 0.35), transparent 55%);
  opacity: 0;
}

#hit-vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(190, 20, 10, 0.5) 100%);
  opacity: 0;
}

#storm-vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 48%, rgba(140, 50, 210, 0.5) 100%);
  opacity: 0;
  transition: opacity 0.4s;
}
#storm-vignette.show { opacity: 1; }

/* Wolf's Blood active: a steady pulsing crimson rim — distinct from the quick
   red hit flash — so the empowered "hunt" buff reads as on for its duration */
#wolf-vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(200, 45, 40, 0.42) 100%);
  opacity: 0;
  transition: opacity 0.3s;
}
#wolf-vignette.show { opacity: 1; animation: wolf-pulse 1.5s ease-in-out infinite; }
@keyframes wolf-pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.85; } }

#announcer {
  position: absolute;
  top: 18%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 54px;
  letter-spacing: 0.3em;
  color: var(--parchment);
  text-shadow: 0 0 30px rgba(232,200,115,0.6), 0 4px 0 rgba(0,0,0,0.6);
  opacity: 0;
  white-space: nowrap;
}

/* floating combat text */
#float-layer {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 25;
  overflow: hidden;
}
.float-num {
  position: absolute;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 8px currentColor, 0 2px 2px rgba(0,0,0,0.8);
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}
.float-num.heal { color: #7ee06b; }

/* ===================== END SCREEN ===================== */
#end-screen { z-index: 40; display: flex; align-items: center; justify-content: center; }

.end-backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(8,10,16,0.55) 0%, rgba(8,10,16,0.92) 100%);
}

.end-inner { position: relative; text-align: center; }

#end-title {
  font-size: clamp(64px, 10vw, 130px);
  letter-spacing: 0.22em;
  color: var(--gold);
  text-shadow: 0 0 50px rgba(232,200,115,0.55), 0 6px 0 rgba(0,0,0,0.7);
  margin-bottom: 10px;
}
#end-title.defeat {
  color: #b04a3e;
  text-shadow: 0 0 50px rgba(176,74,62,0.5), 0 6px 0 rgba(0,0,0,0.7);
}

#end-flavor {
  color: #9aa3b2;
  font-style: italic;
  font-size: 18px;
  margin-bottom: 44px;
}

#end-restart, #end-reselect {
  font-family: inherit;
  font-size: 16px;
  letter-spacing: 0.28em;
  padding: 14px 38px;
  margin: 0 10px;
  color: var(--parchment);
  background: linear-gradient(180deg, #2a3349, #1a2030);
  border: 1px solid #3d4a68;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
#end-restart:hover, #end-reselect:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}

/* crosshair cursor over canvas while in battle; hidden once pointer is locked */
body.in-battle { cursor: crosshair; }
body.pointer-locked { cursor: none; }

/* center crosshair — only while locked */
#crosshair {
  position: absolute;
  left: 50%; top: 50%;
  width: 26px; height: 26px;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
body.pointer-locked #crosshair { opacity: 0.8; }
#crosshair span {
  position: absolute;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 0 4px rgba(0,0,0,0.8);
}
#crosshair span:nth-child(1) { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
#crosshair span:nth-child(2) { top: 50%; left: 0; height: 2px; width: 100%; transform: translateY(-50%); }

/* "click to look" hint */
#lock-hint {
  position: absolute;
  left: 50%; bottom: 162px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  padding: 8px 10px 8px 18px;
  background: rgba(10, 14, 22, 0.72);
  border: 1px solid rgba(232, 200, 115, 0.4);
  border-radius: 20px;
  color: var(--parchment);
  font-size: 12px;
  letter-spacing: 0.18em;
  white-space: nowrap;
  pointer-events: none;   /* clicks on the text fall through to the canvas → re-lock */
  animation: lockpulse 1.6s ease-in-out infinite;
}
.lh-text { color: var(--parchment); }
.lh-btn {
  pointer-events: auto; cursor: pointer; font-family: inherit;
  background: rgba(232, 200, 115, 0.14);
  border: 1px solid rgba(232, 200, 115, 0.5);
  color: var(--gold); border-radius: 14px; padding: 5px 13px;
  font-size: 11.5px; letter-spacing: 0.16em;
}
.lh-btn:hover { background: rgba(232, 200, 115, 0.24); }
@keyframes lockpulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ===================== LOOT PICKUP PROMPT ===================== */
#loot-prompt {
  position: absolute;
  left: 50%; bottom: 190px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: none;
  text-align: center;
}
.loot-title {
  font-size: 13px; letter-spacing: 0.14em; font-weight: bold;
  color: var(--parchment);
  text-shadow: 0 2px 6px rgba(0,0,0,0.9), 0 0 14px rgba(232,200,115,0.3);
  white-space: nowrap;
}
.loot-actions { display: flex; gap: 26px; align-items: flex-start; }
.loot-chip {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.loot-chip.hidden { display: none; }
.loot-disc {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  background: conic-gradient(var(--gold) calc(var(--p, 0) * 360deg), rgba(120,134,160,0.22) 0);
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
  transition: filter 0.12s;
}
.loot-disc::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  background: rgba(9,12,19,0.94);
  box-shadow: inset 0 0 8px rgba(0,0,0,0.6);
}
.loot-key {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: bold; color: var(--gold);
  text-shadow: 0 1px 3px #000;
}
.loot-cap {
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #b9c2cf; text-shadow: 0 1px 2px #000;
  max-width: 96px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ===================== LOBBY · SUMMON CIRCLE ===================== */
#title-screen.lobby {
  display: flex; flex-direction: column;
  align-items: stretch; justify-content: flex-start;
  padding: 0; overflow: hidden;
}
.lobby-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 6%, rgba(120,150,210,0.16) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 120%, rgba(70,46,104,0.26) 0%, transparent 60%),
    radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,0.66) 100%);
}

/* --- top bar --- */
.lobby-bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 40px;
  border-bottom: 1px solid rgba(232,200,115,0.14);
  background: linear-gradient(180deg, rgba(8,10,16,0.72), transparent);
}
.lobby-brand { display: flex; align-items: center; gap: 12px; }
.brand-crest { font-size: 28px; color: var(--gold); text-shadow: 0 0 18px rgba(232,200,115,0.6); animation: runeSpin 12s linear infinite; }
.brand-word { font-size: 25px; letter-spacing: 0.28em; color: var(--parchment); }
/* MODE + REGION dropdowns (replace the old cramped mode/region tab rows) */
.lobby-selects { display: flex; align-items: flex-end; gap: 16px; }
.lsel { display: flex; flex-direction: column; gap: 5px; cursor: pointer; }
.lsel-cap { font-size: 9px; letter-spacing: 0.24em; color: #69728a; font-weight: 700; }
.lsel-wrap { position: relative; display: inline-flex; align-items: center; }
.lsel-input {
  appearance: none; -webkit-appearance: none;
  font-family: inherit; font-size: 13px; letter-spacing: 0.06em; color: var(--parchment);
  background: linear-gradient(180deg, rgba(28,34,48,0.85), rgba(16,20,28,0.85));
  border: 1px solid #2e3850; border-radius: 8px;
  padding: 9px 32px 9px 13px; min-width: 156px; cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lsel-input:hover, .lsel-input:focus { border-color: var(--gold); box-shadow: 0 0 14px rgba(232,200,115,0.22); outline: none; }
.lsel-caret { position: absolute; right: 12px; pointer-events: none; color: var(--gold); font-size: 10px; }
.lsel-input option { background: #11151e; color: var(--parchment); }

/* --- center stage --- */
.lobby-stage {
  position: relative; z-index: 1; flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center; gap: 56px;
  padding: 18px 48px; overflow-y: auto;
}

/* squad panel */
.squad-panel {
  width: 320px;
  background: linear-gradient(180deg, rgba(22,27,38,0.88), rgba(13,16,23,0.88));
  border: 1px solid rgba(232,200,115,0.16); border-radius: 14px; padding: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: opacity 0.25s ease;
}
.squad-panel.dimmed { opacity: 0.38; pointer-events: none; }
.squad-head { display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 0.18em; color: var(--gold); margin-bottom: 14px; }
.squad-count { margin-left: auto; color: #69728a; font-size: 12px; letter-spacing: 0.1em; }
.squad-slots { display: flex; flex-direction: column; gap: 10px; }
.squad-slot {
  position: relative; display: flex; align-items: center; gap: 12px;
  height: 66px; padding: 0 12px; border-radius: 10px;
  border: 1px solid #283248; background: rgba(10,13,20,0.6); transition: all 0.16s ease;
}
.squad-slot.empty { cursor: pointer; justify-content: center; border-style: dashed; border-color: #36405a; color: #6b7488; }
.squad-slot.empty:hover { border-color: var(--gold); color: var(--gold); background: rgba(232,200,115,0.05); transform: translateY(-1px); }
.slot-plus { font-size: 22px; line-height: 1; }
.slot-label { font-size: 13px; letter-spacing: 0.2em; }
.squad-slot.occupied { border-color: color-mix(in srgb, var(--el, #888) 50%, #283248); background: linear-gradient(100deg, color-mix(in srgb, var(--el,#888) 13%, rgba(10,13,20,0.7)), rgba(10,13,20,0.72)); }
.squad-slot.you { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(232,200,115,0.22); }
.slot-emblem { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; box-shadow: 0 0 12px color-mix(in srgb, var(--el,#888) 50%, transparent); }
.slot-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.slot-name { font-size: 15px; letter-spacing: 0.05em; color: var(--parchment); }
.slot-class { font-size: 10px; letter-spacing: 0.13em; color: #9aa3b2; text-transform: uppercase; }
.slot-state { margin-left: auto; font-size: 10px; letter-spacing: 0.1em; color: #8a93a6; white-space: nowrap; }
.squad-slot.ready .slot-state { color: var(--toxic); }
.squad-slot.you .slot-state { color: var(--gold); }
.slot-kick { position: absolute; top: 6px; right: 8px; width: 18px; height: 18px; border: none; border-radius: 50%; background: rgba(0,0,0,0.45); color: #99a; font-size: 10px; cursor: pointer; opacity: 0; transition: opacity 0.15s; }
.squad-slot.occupied:hover .slot-kick { opacity: 1; }
.slot-kick:hover { background: #a33; color: #fff; }
.squad-foot { margin-top: 14px; font-size: 11px; color: #69728a; font-style: italic; line-height: 1.5; }

/* loadout (centre) */
.loadout { text-align: center; min-width: 360px; }
.loadout-emblem-wrap { position: relative; width: 168px; height: 168px; margin: 0 auto 14px; display: grid; place-items: center; }
.loadout-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--el,#888) 55%, transparent); box-shadow: 0 0 40px color-mix(in srgb, var(--el,#888) 35%, transparent), inset 0 0 30px color-mix(in srgb, var(--el,#888) 16%, transparent); animation: lobbySpin 26s linear infinite; }
.loadout-ring::before { content:''; position:absolute; inset:-9px; border-radius:50%; border:1px solid color-mix(in srgb, var(--el,#888) 22%, transparent); }
@keyframes lobbySpin { to { transform: rotate(360deg); } }
.loadout-emblem { width: 124px; height: 124px; border-radius: 18px; object-fit: cover; box-shadow: 0 0 34px color-mix(in srgb, var(--el,#888) 55%, transparent); }
.loadout-class { font-size: 13px; letter-spacing: 0.3em; color: color-mix(in srgb, var(--el,var(--gold)) 75%, var(--parchment)); }
.loadout-name { font-size: 38px; letter-spacing: 0.14em; color: var(--parchment); text-shadow: 0 0 24px rgba(232,200,115,0.25); margin: 2px 0 8px; }
.loadout-blurb { max-width: 430px; margin: 0 auto 16px; color: #9aa3b2; font-style: italic; font-size: 14px; line-height: 1.5; }
.loadout-abilities { display: flex; gap: 14px; justify-content: center; margin-bottom: 20px; }
.lo-ab { display: flex; align-items: center; gap: 9px; padding: 8px 14px 8px 8px; border-radius: 10px; background: rgba(14,18,26,0.7); border: 1px solid #283248; }
.lo-ab img { width: 34px; height: 34px; border-radius: 7px; }
.lo-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.lo-key { font-size: 9px; letter-spacing: 0.08em; color: var(--gold); border: 1px solid rgba(232,200,115,0.4); border-radius: 3px; padding: 0 4px; }
.lo-name { font-size: 13px; color: var(--parchment); letter-spacing: 0.03em; }
.btn-change { font-family: inherit; font-size: 12px; letter-spacing: 0.18em; color: #9aa3b2; background: rgba(14,18,26,0.6); border: 1px solid #2e3850; border-radius: 8px; padding: 10px 22px; cursor: pointer; transition: all 0.15s ease; }
.btn-change:hover { color: var(--gold); border-color: var(--gold); }

/* ===== Battlemage picker (lobby loadout panel) — pick your body, any gauntlet ===== */
.loadout-mages { margin: 2px auto 18px; max-width: 340px; }
.lm-label {
  font-size: 10px; letter-spacing: 0.32em; font-weight: bold; color: #8b93a4;
  margin-bottom: 8px; text-align: center;
}
.lm-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.lm-chip {
  font-family: inherit; cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 2px; padding: 7px 4px 6px; position: relative; overflow: hidden;
  background: rgba(14,18,26,0.6); border: 1px solid #2a3346; border-radius: 8px;
  color: #aeb6c4; transition: all 0.15s ease;
}
.lm-chip:hover { border-color: color-mix(in srgb, var(--gold) 55%, #2a3346); color: #e6ebf3; transform: translateY(-1px); }
.lm-name { font-size: 12px; font-weight: bold; letter-spacing: 0.04em; }
.lm-tag { font-size: 8.5px; letter-spacing: 0.06em; color: #717a8c; text-transform: uppercase; }
.lm-chip.active {
  border-color: var(--gold); color: var(--gold);
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 16%, rgba(14,18,26,0.7)), rgba(14,18,26,0.7));
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--gold) 14%, transparent), 0 0 10px color-mix(in srgb, var(--gold) 22%, transparent);
}
.lm-chip.active .lm-tag { color: color-mix(in srgb, var(--gold) 70%, #fff); }
/* one-time lazy-load shimmer while a freshly-picked body streams in */
.lm-chip.loading { pointer-events: none; }
.lm-chip.loading::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 30%, rgba(232,200,115,0.22) 50%, transparent 70%);
  animation: lm-shimmer 0.9s ease-in-out infinite;
}
@keyframes lm-shimmer { to { transform: translateX(100%); } }
/* base chip that owns the currently-shown skin row */
.lm-chip.active .lm-name { color: var(--gold); }

/* the selected family's skin variants (Default + each skin) */
.lm-variants {
  display: flex; flex-wrap: wrap; gap: 5px; justify-content: center;
  margin: 9px auto 0; max-width: 360px; max-height: 132px; overflow-y: auto;
}
.lm-variants:empty { display: none; }
.lm-var {
  font-family: inherit; font-size: 10px; letter-spacing: 0.04em; cursor: pointer;
  padding: 4px 9px; border-radius: 999px; color: #9aa3b4; white-space: nowrap;
  background: rgba(14,18,26,0.55); border: 1px solid #28303f; transition: all 0.13s ease;
}
.lm-var:hover { color: #e6ebf3; border-color: color-mix(in srgb, var(--gold) 50%, #28303f); }
.lm-var.active {
  color: #0c0f15; font-weight: bold;
  background: var(--gold); border-color: var(--gold);
}
.lm-var.loading { pointer-events: none; opacity: 0.55; }

/* bottom bar */
.lobby-foot { position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 22px; padding: 18px 40px; border-top: 1px solid rgba(232,200,115,0.14); background: linear-gradient(0deg, rgba(8,10,16,0.72), transparent); }
/* AI difficulty pill-group, sat beside PLAY so new players see it before starting */
.lobby-diff { display: flex; align-items: center; gap: 5px; }
.ld-cap { font-size: 10px; letter-spacing: 0.2em; color: rgba(232,200,115,0.72); margin-right: 7px; }
.ld-opt { font-family: inherit; font-size: 12px; letter-spacing: 0.05em; color: var(--parchment);
  background: rgba(14,18,28,0.72); border: 1px solid #2c3550; border-radius: 8px; padding: 9px 16px; cursor: pointer;
  transition: border-color .12s, background .12s, color .12s; }
.ld-opt:hover { color: var(--gold); border-color: var(--gold); }
.ld-opt.active { background: color-mix(in srgb, var(--gold) 18%, #0e1018); border-color: var(--gold); color: var(--gold); box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 30%, transparent); }
.play-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 13px 58px; }
.play-word { font-size: 22px; letter-spacing: 0.3em; }
.play-mode { font-size: 10px; letter-spacing: 0.16em; color: rgba(26,20,16,0.72); font-style: italic; }

/* invite popover */
.invite-pop { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(4,6,10,0.62); backdrop-filter: blur(3px); }
.invite-card { width: min(560px, 90vw); background: linear-gradient(180deg, #1a2030, #11151e); border: 1px solid rgba(232,200,115,0.28); border-radius: 16px; padding: 22px 24px; box-shadow: 0 26px 70px rgba(0,0,0,0.6); }
.invite-head { display: flex; align-items: center; justify-content: space-between; font-size: 16px; letter-spacing: 0.22em; color: var(--gold); }
.invite-x { width: 28px; height: 28px; border: none; border-radius: 8px; background: rgba(255,255,255,0.06); color: #9aa3b2; font-size: 13px; cursor: pointer; }
.invite-x:hover { background: rgba(255,80,80,0.2); color: #fff; }
.invite-sub { color: #9aa3b2; font-style: italic; font-size: 13px; margin: 6px 0 16px; }
.invite-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.invite-class { font-family: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border-radius: 10px; background: rgba(10,13,20,0.7); border: 1px solid #283248; transition: all 0.15s ease; }
.invite-class img { width: 48px; height: 48px; border-radius: 9px; box-shadow: 0 0 14px color-mix(in srgb, var(--el,#888) 45%, transparent); }
.invite-class .ic-class { font-size: 11px; letter-spacing: 0.1em; color: #9aa3b2; }
.invite-class:hover { transform: translateY(-3px); border-color: var(--el, var(--gold)); }
.invite-class:hover .ic-class { color: var(--parchment); }

/* back button on the gauntlet-select screen */
.btn-back { position: absolute; top: 22px; left: 22px; font-family: inherit; font-size: 13px; letter-spacing: 0.14em; color: #9aa3b2; background: rgba(14,18,26,0.6); border: 1px solid #2e3850; border-radius: 8px; padding: 9px 18px; cursor: pointer; transition: all 0.15s ease; z-index: 4; }
.btn-back:hover { color: var(--gold); border-color: var(--gold); }

/* stack squad above loadout on narrow upright screens */
@media (max-width: 900px) {
  .lobby-stage { flex-direction: column; gap: 22px; }
  .squad-panel { width: min(420px, 92vw); }
}

/* short landscape (phones held sideways — the game's forced mobile orientation):
   keep squad + loadout side by side, compact everything, drop non-essentials.
   Placed AFTER the 900px rule so flex-direction:row wins for phones that match both. */
@media (orientation: landscape) and (max-height: 560px) {
  .lobby-bar { padding: 8px 16px; }
  .brand-word { font-size: 17px; letter-spacing: 0.2em; }
  .brand-crest { font-size: 20px; }
  .lobby-selects { gap: 10px; }
  .lsel { flex-direction: row; align-items: center; gap: 7px; }
  .lsel-input { font-size: 12px; padding: 7px 28px 7px 11px; min-width: 0; }

  .lobby-stage { flex-direction: row; align-items: center; gap: 18px; padding: 6px 16px; }
  .squad-panel { width: min(260px, 34vw); padding: 11px; }
  .squad-head { font-size: 11px; margin-bottom: 8px; }
  .squad-slots { gap: 7px; }
  .squad-slot { height: 46px; padding: 0 9px; }
  .slot-emblem { width: 30px; height: 30px; }
  .slot-name { font-size: 12px; }
  .slot-class { font-size: 8px; }
  .squad-foot { display: none; }

  .loadout { min-width: 0; }
  .loadout-emblem-wrap { width: 84px; height: 84px; margin-bottom: 4px; }
  .loadout-emblem { width: 62px; height: 62px; border-radius: 12px; }
  .loadout-class { font-size: 10px; letter-spacing: 0.2em; }
  .loadout-name { font-size: 22px; margin: 0 0 5px; }
  .loadout-blurb { display: none; }
  .loadout-abilities { display: none; }
  .loadout-mages { margin: 0 auto 7px; max-width: 300px; }
  .lm-label { margin-bottom: 5px; letter-spacing: 0.22em; }
  .lm-strip { gap: 4px; }
  .lm-chip { padding: 5px 3px; }
  .lm-name { font-size: 10px; }
  .lm-tag { font-size: 7.5px; }
  .btn-change { padding: 7px 18px; font-size: 11px; }

  .lobby-foot { padding: 8px 16px; }
  .play-btn { padding: 9px 40px; }
  .play-word { font-size: 18px; }
  .play-mode { font-size: 9px; }
}

/* The lobby is shown static (always opacity 1) — the loading-screen fade-out is the
   only transition. An entrance animation here proved fragile: the heavy prewarm
   restarts a CSS/gsap timeline so opacity tweens get stuck at 0 (blank lobby). Not
   worth the risk for a cosmetic flourish. */

/* ===================== DOMINION HUD ===================== */
#dominion-hud {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 12;
  display: flex; flex-direction: column; align-items: center; gap: 9px; pointer-events: none;
}
.dom-scores { display: flex; gap: 10px; }
.dom-team {
  display: flex; align-items: center; gap: 9px; padding: 7px 14px; min-width: 156px;
  border-radius: 9px; background: linear-gradient(180deg, rgba(14,18,26,0.86), rgba(8,10,16,0.86));
  border: 1px solid color-mix(in srgb, var(--tc) 40%, #2a3346); transition: box-shadow 0.2s, border-color 0.2s;
}
.dom-team.leading { box-shadow: 0 0 16px color-mix(in srgb, var(--tc) 45%, transparent); border-color: var(--tc); }
.dom-name { font-size: 11px; letter-spacing: 0.14em; color: var(--tc); min-width: 46px; }
.dom-score { font-size: 18px; color: var(--parchment); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.dom-bar { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; min-width: 48px; }
.dom-bar i { display: block; height: 100%; width: 0; background: var(--tc); box-shadow: 0 0 8px var(--tc); transition: width 0.3s ease; }
.dom-zones { display: flex; gap: 16px; }
.dom-pip { width: 15px; height: 15px; border-radius: 50%; background: #9aa3b2; border: 2px solid rgba(0,0,0,0.45); transition: background 0.3s ease, opacity 0.3s ease; }
.dom-pip.contested { animation: pipFlash 0.5s ease-in-out infinite; }
@keyframes pipFlash { 50% { transform: scale(1.35); filter: brightness(1.4); } }
#dom-respawn {
  position: absolute; top: 40%; left: 50%; transform: translateX(-50%); z-index: 13;
  padding: 11px 28px; border-radius: 10px; background: rgba(12,6,12,0.72);
  border: 1px solid rgba(255,120,140,0.4); color: #ff9aaa; font-size: 16px; letter-spacing: 0.13em; pointer-events: none;
}

/* Dominion team boon (hold ≥2 nexuses) */
.dom-team { position: relative; }
.dom-team.boon { border-color: #9dffc4; box-shadow: 0 0 18px rgba(157,255,196,0.38); }
.dom-team.boon::after {
  content: 'BOON'; position: absolute; top: -8px; right: 10px;
  font-size: 8px; letter-spacing: 0.1em; color: #0b0e14; background: #9dffc4;
  padding: 1px 6px; border-radius: 4px; font-family: Georgia, serif;
}

/* ===================== MOBILE / TOUCH ===================== */
/* Everything here is gated on html.touch (set in main.js for touch devices, or via
   ?touch=1). Desktop is untouched. The on-screen controls live inside #hud so they
   inherit the per-element --el theme and show/hide with the battle HUD. */

/* kill page-level gestures (pinch-zoom, pull-to-refresh) over the game + controls */
html.touch, html.touch body { overscroll-behavior: none; }
html.touch #game-root, html.touch #game-root canvas,
html.touch #touch-ui, html.touch #touch-look, html.touch #touch-move,
html.touch .tc-btn { touch-action: none; -webkit-touch-callout: none; }

/* desktop-only HUD chrome that's meaningless on touch */
html.touch .ability-fan,
html.touch .util-row,
html.touch .map-hint,
html.touch #lock-hint { display: none !important; }
html.touch .ab-key { display: none; }

/* a centred crosshair stands in for the (absent) pointer-lock one, in battle */
html.touch body.in-battle #crosshair { opacity: 0.8; }

/* ---- control layer ---- */
#touch-ui { display: none; }
html.touch #touch-ui { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 23; }
#touch-ui.off { display: none !important; }
/* in-match settings gear (touch only — desktop opens settings with O/ESC). Sits on
   the left edge just below the player panel (top-left), clear of the alive-count +
   minimap up top and the joystick/action zones below. */
#touch-settings {
  position: absolute;
  top: calc(100px + env(safe-area-inset-top));
  left: calc(10px + env(safe-area-inset-left));
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(10, 14, 22, 0.62); border: 1px solid rgba(232, 200, 115, 0.42);
  color: var(--gold); font-size: 21px; line-height: 1;
  pointer-events: auto; z-index: 2;
}
#touch-settings:active { background: rgba(232, 200, 115, 0.2); }

/* left = floating joystick zone · right = camera-look drag zone (buttons sit over it) */
#touch-move { position: absolute; left: 0; top: 0; width: 50%; height: 100%; pointer-events: auto; }
#touch-look { position: absolute; right: 0; top: 0; width: 50%; height: 100%; pointer-events: auto; }

/* ---- floating joystick ---- */
.tcj-base {
  position: absolute; left: 50%; top: 50%;
  width: 30vmin; height: 30vmin; max-width: 150px; max-height: 150px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(28,36,51,0.5), rgba(10,13,20,0.42));
  border: 2px solid color-mix(in srgb, var(--el, var(--gold)) 55%, rgba(232,200,115,0.45));
  box-shadow: inset 0 0 18px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.5);
  opacity: 0; transition: opacity 0.14s ease;
  pointer-events: none;
}
#touch-move.is-active .tcj-base { opacity: 0.9; }
.tcj-ring {
  position: absolute; inset: 15%; border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--el, var(--gold)) 42%, transparent);
}
.tcj-thumb {
  position: absolute; left: 50%; top: 50%;
  width: 13vmin; height: 13vmin; max-width: 66px; max-height: 66px;
  transform: translate(-50%, -50%);
  clip-path: polygon(50% 0, 86% 14%, 100% 50%, 86% 86%, 50% 100%, 14% 86%, 0 50%, 14% 14%);
  background: linear-gradient(150deg, #f4dd92, #8a6f2e 55%, #f4dd92);
  box-shadow: 0 3px 9px rgba(0,0,0,0.7),
              0 0 16px color-mix(in srgb, var(--el, var(--gold)) 65%, transparent);
}

/* ---- right-hand action cluster (thumb-reach arc) ---- */
#touch-actions {
  position: absolute;
  right: env(safe-area-inset-right); bottom: env(safe-area-inset-bottom);
  width: 62vmin; height: 60vmin; pointer-events: none;   /* gaps fall through to #touch-look */
}
.tc-btn {
  position: absolute; pointer-events: auto;
  display: grid; place-items: center;
  border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 36%, #1c2433, #0a0d14 80%);
  border: 2px solid color-mix(in srgb, var(--el, var(--gold)) 70%, #2a3142);
  box-shadow: 0 3px 10px rgba(0,0,0,0.65),
              0 0 13px color-mix(in srgb, var(--el, transparent) 36%, transparent);
  color: var(--parchment);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.tcb-icon { position: absolute; inset: 0; width: 100%; height: 100%; }
.tcb-glyph {
  position: relative; z-index: 2; line-height: 1;
  font-size: 5vmin; color: var(--parchment);
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.tcb-glyph img { width: 70%; height: 70%; object-fit: contain; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.7)); }
/* conic cooldown wipe, identical mechanism to the desktop fan's .ab-cooldown */
.tcb-cd {
  position: absolute; inset: 0; border-radius: 50%; z-index: 3; pointer-events: none;
  background: conic-gradient(rgba(6,8,13,0.82) calc(var(--cd, 0) * 360deg), transparent 0);
}
.tcb-badge {
  position: absolute; bottom: 6%; right: 0; left: 0; z-index: 4; text-align: center;
  font-size: 3.4vmin; font-weight: 700; color: var(--parchment);
  text-shadow: 0 1px 3px #000, 0 0 6px rgba(0,0,0,0.7); pointer-events: none;
}
.tcb-badge:empty { display: none; }

/* button sizes + arc positions (offsets from the bottom-right corner, in vmin) */
.tc-primary { width: 17vmin; height: 17vmin; right: 4vmin;  bottom: 5vmin;  font-size: 7vmin; }
.tc-primary.tc-alt { width: 13.5vmin; height: 13.5vmin; right: 22vmin; bottom: 3.5vmin;
  border-color: color-mix(in srgb, var(--el, var(--gold)) 55%, #2a3142); }
.tc-sat { width: 12vmin; height: 12vmin; }
.tc-btn[data-act="spell1"] { right: 5.5vmin; bottom: 24vmin; }
.tc-btn[data-act="spell2"] { right: 22vmin;  bottom: 19vmin; }
.tc-rune { width: 13.5vmin; height: 13.5vmin; right: 2.5vmin; bottom: 39vmin;
  border-color: color-mix(in srgb, var(--el, var(--gold)) 88%, #2a3142); }
.tc-util { width: 10.5vmin; height: 10.5vmin; }
.tc-btn[data-act="jump"]   { right: 20.5vmin; bottom: 32vmin; }
.tc-btn[data-act="dash"]   { right: 35vmin;   bottom: 22.5vmin; }
.tc-btn[data-act="potion"] { right: 36vmin;   bottom: 8vmin; }

/* button states */
.tc-btn:not(.cooling):not(.disabled) { animation: tcReady 2.6s ease-in-out infinite; }
@keyframes tcReady {
  0%, 100% { box-shadow: 0 3px 10px rgba(0,0,0,0.65), 0 0 10px color-mix(in srgb, var(--el, transparent) 30%, transparent); }
  50%      { box-shadow: 0 3px 10px rgba(0,0,0,0.65), 0 0 20px color-mix(in srgb, var(--el, transparent) 60%, transparent); }
}
.tc-btn.cooling { border-color: #3a4254; filter: saturate(0.7) brightness(0.82); animation: none; }
.tc-btn.is-held { transform: scale(0.92); filter: brightness(1.15);
  box-shadow: 0 0 22px color-mix(in srgb, var(--el, var(--gold)) 80%, transparent); }
.tc-btn.disabled { opacity: 0.4; filter: grayscale(0.5); animation: none; }

/* ---- responsive HUD: clear the corners for the thumbs + honour notches ---- */
html.touch .hud-player-panel {
  left: calc(8px + env(safe-area-inset-left));
  top: calc(8px + env(safe-area-inset-top));
  bottom: auto;
  align-items: flex-start;
  transform: scale(0.82); transform-origin: top left;
}
html.touch #minimap-frame {
  top: calc(8px + env(safe-area-inset-top));
  right: calc(8px + env(safe-area-inset-right));
  width: clamp(96px, 19vmin, 128px); height: clamp(96px, 19vmin, 128px);
}
html.touch .hud-top { top: calc(6px + env(safe-area-inset-top)); }
html.touch #kill-feed { top: calc(6px + env(safe-area-inset-top)); right: calc(150px + env(safe-area-inset-right)); }

/* shorter phones held sideways: shrink the top HUD + announcer so nothing crowds */
@media (max-height: 460px) and (orientation: landscape) {
  html.touch .hud-top { transform: translateX(-50%) scale(0.85); }
  html.touch #storm-warning { top: calc(44px + env(safe-area-inset-top)); font-size: 13px; }
  html.touch #announcer { font-size: clamp(30px, 7vmin, 46px); }
  html.touch .hud-player-panel { transform: scale(0.72); }
}

/* ---- portrait blocker: the universal "turn your device" floor ---- */
#rotate-gate { display: none; }
@media (orientation: portrait) {
  html.touch #rotate-gate {
    display: flex; position: fixed; inset: 0; z-index: 100;
    flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    text-align: center;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background:
      radial-gradient(ellipse at 50% 30%, #2b3a52 0%, transparent 60%), #0b0e14;
    color: var(--parchment);
  }
}
.rg-phone {
  width: 78px; height: 142px; position: relative;
  border: 3px solid var(--gold); border-radius: 14px;
  box-shadow: 0 0 26px rgba(232,200,115,0.4);
  transform-origin: center; animation: rgTilt 2.6s ease-in-out infinite;
}
.rg-screen { position: absolute; inset: 7px; border-radius: 6px;
  background: linear-gradient(160deg, #1c2433, #0a0d14); }
@keyframes rgTilt {
  0%, 16% { transform: rotate(0deg); }
  54%, 80% { transform: rotate(-90deg); }
  100% { transform: rotate(-90deg); }
}
.rg-rune { font-size: 38px; color: var(--gold); text-shadow: 0 0 22px var(--gold); animation: runeSpin 6s linear infinite; }
.rg-title { font-size: clamp(20px, 6vw, 30px); letter-spacing: 0.22em; }
.rg-sub { color: #9aa3b2; font-style: italic; font-size: clamp(13px, 3.6vw, 16px); }

/* ===================== Settings overlay ===================== */
/* lobby gear — push the MODE/REGION selects + gear together to the right */
.lobby-selects { margin-left: auto; }
.lobby-gear {
  background: transparent; border: 1px solid rgba(232,200,115,0.3); color: var(--gold);
  width: 40px; height: 40px; border-radius: 10px; font-size: 19px; cursor: pointer;
  display: grid; place-items: center; margin-left: 16px;
  transition: background 0.15s ease, transform 0.3s ease;
}
.lobby-gear:hover { background: rgba(232,200,115,0.12); transform: rotate(40deg); }

#settings-screen { z-index: 40; }
.set-scrim { position: absolute; inset: 0; background: rgba(6,5,8,0.62); backdrop-filter: blur(4px); }
.set-panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(620px, 94vw); display: flex; flex-direction: column;
  max-height: 88vh; max-height: 88dvh;   /* dvh so mobile URL-bar chrome can't push the footer off-screen */
  background: #1b1510; border: 1px solid rgba(232,200,115,0.42); border-radius: 14px;
  color: var(--parchment); overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,0.6);
}
.set-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid rgba(232,200,115,0.18); background: #150f0b;
}
.set-title { font-size: 15px; letter-spacing: 0.3em; color: var(--gold); }
.set-x {
  background: transparent; border: 1px solid rgba(232,200,115,0.3); color: #cdbfa0;
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 13px;
}
.set-x:hover { background: rgba(232,200,115,0.12); color: var(--parchment); }
/* min-height:0 lets this flex child shrink below its content so the content pane's
   overflow actually engages (the classic flexbox scroll trap) instead of pushing
   the footer past the panel's clipped edge on short screens. */
.set-body { display: flex; min-height: 0; flex: 1; overflow: hidden; }
.set-rail {
  width: 168px; flex: none; background: #150f0b; padding: 10px 0;
  border-right: 1px solid rgba(232,200,115,0.14); overflow-y: auto;
}
.set-cat {
  display: flex; align-items: center; gap: 11px; width: 100%;
  background: transparent; border: none; border-left: 2px solid transparent;
  color: #b09c78; padding: 11px 16px; font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; cursor: pointer; text-align: left; font-family: inherit;
}
.set-cat-ico { font-size: 15px; width: 18px; text-align: center; }
.set-cat:hover { color: var(--parchment); }
.set-cat.active { color: #f1e6c6; border-left-color: var(--gold); background: rgba(232,200,115,0.08); }
.set-content { flex: 1; min-height: 0; padding: 16px 22px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.set-panel-group.hidden { display: none; }
/* visible scrollbar so a clipped list reads as scrollable (macOS overlay bars are
   invisible on dark). Styled for WebKit + Firefox; harmless elsewhere. */
.set-content, .set-rail { scrollbar-width: thin; scrollbar-color: rgba(232,200,115,0.4) transparent; }
.set-content::-webkit-scrollbar, .set-rail::-webkit-scrollbar { width: 10px; }
.set-content::-webkit-scrollbar-track, .set-rail::-webkit-scrollbar-track { background: transparent; }
.set-content::-webkit-scrollbar-thumb, .set-rail::-webkit-scrollbar-thumb {
  background: rgba(232,200,115,0.32); border-radius: 6px;
  border: 2px solid transparent; background-clip: padding-box;
}
.set-content::-webkit-scrollbar-thumb:hover, .set-rail::-webkit-scrollbar-thumb:hover {
  background: rgba(232,200,115,0.5); background-clip: padding-box;
}
.set-grp { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #8f7e5c; margin: 14px 0 4px; }
.set-row { display: flex; align-items: center; gap: 14px; padding: 9px 0; }
.set-label { flex: 1; font-size: 13.5px; color: #e6dabb; }
.set-range {
  flex: 0 0 150px; -webkit-appearance: none; appearance: none; height: 4px;
  border-radius: 3px; background: #3a3024; outline: none; cursor: pointer;
}
.set-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold); border: 2px solid #2a2118; cursor: pointer;
}
.set-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--gold); border: none; cursor: pointer; }
.set-val { width: 50px; text-align: right; font-size: 12.5px; color: #cdbfa0; font-variant-numeric: tabular-nums; }
.set-toggle {
  width: 44px; height: 24px; border-radius: 999px; background: #46392b;
  border: 1px solid rgba(232,200,115,0.22); position: relative; cursor: pointer;
  padding: 0; flex: none; transition: background 0.15s ease;
}
.set-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #cdbfa0; transition: left 0.15s ease, background 0.15s ease; }
.set-toggle.on { background: #b8893a; }
.set-toggle.on .set-knob { left: 22px; background: var(--ink); }
.set-seg { display: inline-flex; border: 1px solid rgba(232,200,115,0.24); border-radius: 8px; overflow: hidden; flex: none; }
.set-seg button { background: transparent; border: none; color: #b09c78; padding: 7px 12px; font-size: 11.5px; cursor: pointer; font-family: inherit; }
.set-seg button:hover { color: var(--parchment); }
.set-seg button.on { background: rgba(232,200,115,0.16); color: #f1e6c6; }
.set-kb-btn {
  flex: none; min-width: 66px; padding: 6px 12px; border: 1px solid rgba(232,200,115,0.3);
  border-radius: 7px; background: #221a12; color: var(--parchment); font-size: 12px;
  letter-spacing: 0.04em; cursor: pointer; font-family: inherit; text-align: center;
}
.set-kb-btn:hover { background: rgba(232,200,115,0.12); border-color: var(--gold); }
.set-kb-btn.capturing { background: rgba(232,200,115,0.2); border-color: var(--gold); color: var(--gold); }
.set-foot { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; border-top: 1px solid rgba(232,200,115,0.18); background: #150f0b; }
.set-foot-right { display: flex; align-items: center; gap: 14px; }
.set-hint { font-size: 11.5px; color: #8f7e5c; }
.set-reset {
  background: transparent; border: 1px solid rgba(232,200,115,0.3); color: #cdbfa0;
  font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 8px; cursor: pointer; font-family: inherit;
}
.set-reset:hover { background: rgba(232,200,115,0.1); color: var(--parchment); }
.set-done {
  background: var(--gold); border: 1px solid var(--gold); color: var(--ink); font-weight: 700;
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 8px 18px; border-radius: 8px; cursor: pointer; font-family: inherit;
}
.set-done:hover { filter: brightness(1.08); }

/* short landscape (mobile): give the panel a touch more of the screen + tighten the rail */
@media (max-height: 520px) {
  .set-panel { max-height: 94vh; max-height: 94dvh; }
  .set-rail { width: 132px; }
  .set-cat { padding: 9px 12px; font-size: 11px; }
  .set-content { padding: 12px 16px; }
}

/* ===================== CHARACTER CREATION + ROSTER ===================== */
#create-screen, #roster-screen { --el: var(--gold); color: var(--parchment); }
.cc-bg, .rs-bg { position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--el) 16%, #0c0f17) 0%, #0a0c12 60%, #07080c 100%); }
.cc-vignette, .rs-vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 200px 60px rgba(0,0,0,0.75); }
.btn-back[hidden] { display: none; }

.cc-title, .rs-title { position: relative; text-align: center; margin: 22px 0 6px;
  font-size: clamp(20px, 2.6vw, 34px); letter-spacing: 0.16em; color: var(--gold);
  text-shadow: 0 0 22px color-mix(in srgb, var(--gold) 60%, transparent); }

#create-screen { display: flex; flex-direction: column; }
.cc-layout { position: relative; display: grid; grid-template-columns: minmax(266px, 300px) 1.05fr 1.62fr;
  gap: 22px; align-items: stretch; flex: 1 1 auto; min-height: 0; padding: 8px clamp(20px, 3vw, 46px); }

.cc-form { display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.cc-field { display: flex; flex-direction: column; gap: 7px; }
.cc-field-grow { flex: 1; min-height: 0; }
.cc-label { font-size: 11px; letter-spacing: 0.18em; color: var(--gold); opacity: 0.85; }
.cc-label em { color: var(--parchment); opacity: 0.55; font-style: normal; font-size: 0.9em; }
.cc-input { background: rgba(10,14,22,0.85); border: 1px solid #2c3550; border-radius: 8px;
  color: var(--parchment); font-size: 17px; padding: 11px 13px; letter-spacing: 0.04em; outline: none; }
.cc-input:focus { border-color: var(--el); box-shadow: 0 0 0 2px color-mix(in srgb, var(--el) 40%, transparent); }
.cc-sub { font-size: 11px; color: #8893a8; }
.cc-classes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cc-class { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px;
  background: rgba(14,18,28,0.7); border: 1px solid #28304a; border-radius: 9px; cursor: pointer;
  color: var(--parchment); transition: transform .12s, border-color .12s; --ec: var(--gold); }
.cc-class img { width: 38px; height: 38px; object-fit: contain; filter: saturate(.85) brightness(.9); }
.cc-class span { font-size: 9px; letter-spacing: 0.08em; opacity: 0.8; }
.cc-class:hover { transform: translateY(-2px); border-color: var(--ec); }
.cc-class.active { border-color: var(--ec); background: color-mix(in srgb, var(--ec) 16%, #0e1018);
  box-shadow: 0 0 16px color-mix(in srgb, var(--ec) 45%, transparent); }
.cc-class.active img { filter: drop-shadow(0 0 6px var(--ec)); }
.cci-name { color: var(--gold); font-size: 15px; letter-spacing: 0.08em; margin-top: 6px; }
.cci-blurb { font-size: 12px; color: #aeb6c6; line-height: 1.45; margin-top: 3px; }

.cc-stage { position: relative; display: flex; align-items: center; justify-content: center; }
.cc-stage .featured-canvas { width: 100%; height: 100%; max-height: 58vh; object-fit: contain; }
.cc-floor { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); width: 60%; height: 30px;
  border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--el) 45%, transparent), transparent 70%); filter: blur(4px); }

.cc-skins { display: flex; flex-direction: column; gap: 11px; min-height: 0; }
.cc-skins-head { display: flex; align-items: baseline; gap: 9px; }
.cc-skins-title { font-size: 11px; letter-spacing: 0.18em; color: var(--gold); opacity: 0.85; }
.cc-skin-name { color: var(--parchment); opacity: 0.72; font-size: 13px; }

.cc-search-wrap { position: relative; display: flex; align-items: center; }
.cc-search-ico { position: absolute; left: 11px; width: 16px; height: 16px; fill: #6c768c; pointer-events: none; opacity: 0.75; }
.cc-search { width: 100%; background: rgba(10,14,22,0.85); border: 1px solid #2c3550; border-radius: 9px;
  color: var(--parchment); font-size: 14px; padding: 10px 12px 10px 34px; outline: none; letter-spacing: 0.02em; }
.cc-search:focus { border-color: var(--el); box-shadow: 0 0 0 2px color-mix(in srgb, var(--el) 35%, transparent); }
.cc-search::placeholder { color: #6c768c; }

.cc-skins-head, .cc-search-wrap, .cc-families { flex: 0 0 auto; }
.cc-families { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-fam { background: rgba(14,18,28,0.7); border: 1px solid #28304a; border-radius: 999px;
  color: var(--parchment); font-size: 11px; letter-spacing: 0.04em; padding: 5px 12px; cursor: pointer;
  white-space: nowrap; transition: border-color .12s, background .12s, color .12s; }
.cc-fam:hover { border-color: var(--el); }
.cc-fam.active { border-color: var(--el); color: var(--gold); background: color-mix(in srgb, var(--el) 16%, #0e1018); }

.cc-grid { flex: 1 1 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px;
  overflow-y: auto; align-content: start; padding: 2px 8px 6px 2px; min-height: 0; }
.cc-card { display: flex; flex-direction: column; gap: 5px; align-items: stretch; padding: 6px 6px 8px;
  background: rgba(14,18,28,0.66); border: 1px solid #262e44; border-radius: 11px; cursor: pointer;
  color: var(--parchment); transition: transform .1s, border-color .1s, box-shadow .1s; }
.cc-card-thumb { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 7px; overflow: hidden;
  background: radial-gradient(120% 100% at 50% 22%, #1b2233 0%, #0c0f17 78%); }
/* The thumb art (240x320) frames the wizard in the upper ~64% with a big empty
   bottom margin. In the square card, `contain` would leave that dead space below
   and push the wizard high; `cover` + top-align crops only the empty bottom, so the
   wizard sits vertically centred (and a touch larger) with no risk of clipping feet. */
.cc-card-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.cc-card-name { font-size: 11px; line-height: 1.18; text-align: center; letter-spacing: 0.01em;
  height: 2.36em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cc-card:hover { transform: translateY(-2px); border-color: var(--el); }
.cc-card.active { border-color: var(--el); background: color-mix(in srgb, var(--el) 16%, #0e1018);
  box-shadow: 0 0 0 1px var(--el), 0 6px 20px color-mix(in srgb, var(--el) 38%, transparent); }
.cc-card.active .cc-card-name { color: var(--gold); }
.cc-card.locked { opacity: 0.5; cursor: not-allowed; }
.cc-card.locked:hover { transform: none; border-color: #262e44; }
.cc-card-lock { font-size: 10px; color: var(--gold); opacity: 0.9; text-align: center; }
.cc-empty { grid-column: 1 / -1; text-align: center; color: #6c768c; font-size: 13px; padding: 36px 0; }

.cc-foot { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 10px 0 26px; }
.cc-error { color: #ff8a8a; font-size: 13px; min-height: 1em; }
.cc-create[disabled] { opacity: 0.45; filter: grayscale(0.6); cursor: not-allowed; transform: none; box-shadow: none; }

#roster-screen { --el: var(--gold); display: flex; flex-direction: column; }
.rs-offline { position: relative; text-align: center; color: #ffce8a; font-size: 13px; margin-top: 6px; }
.rs-retry { background: none; border: 1px solid var(--gold); color: var(--gold); border-radius: 6px; padding: 2px 9px; margin-left: 6px; cursor: pointer; font-size: 12px; }

/* hero stage: a large 3D wizard + a details panel, centered & capped for big monitors */
.rs-stage { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 1120px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 80px); padding: 0 40px; }
.rs-hero { position: relative; flex: 0 0 auto; width: clamp(300px, 34vw, 460px); height: 100%; max-height: 76vh;
  display: flex; align-items: center; justify-content: center; }
.rs-hero::before { content: ''; position: absolute; inset: -4% -12%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--el) 26%, transparent), transparent 62%); filter: blur(10px); }
.rs-mage { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.rs-hero-floor { position: absolute; bottom: 7%; left: 50%; transform: translateX(-50%); width: 64%; height: 32px; z-index: 0;
  border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--el) 55%, transparent), transparent 70%); filter: blur(6px); }

.rs-detail { flex: 0 0 auto; width: clamp(260px, 26vw, 360px); display: flex; flex-direction: column; gap: 7px; }
.rs-d-class { font-size: 13px; letter-spacing: 0.2em; color: var(--el); text-transform: uppercase; }
.rs-d-name { font-size: clamp(40px, 4.8vw, 68px); line-height: 1.02; color: var(--parchment); text-shadow: 0 0 28px rgba(232,200,115,0.22); }
.rs-d-skin { font-size: 12px; letter-spacing: 0.08em; color: #8893a8; margin-bottom: 6px; }
.rs-d-xpbar { height: 8px; background: #161c2b; border-radius: 4px; overflow: hidden; }
.rs-d-xpbar i { display: block; height: 100%; background: linear-gradient(90deg, #5a6b8a, var(--gold)); border-radius: 4px; }
.rs-d-xptext { font-size: 11px; color: #8893a8; margin-top: 3px; }
.rs-d-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 4px; }
.rs-d-stats div { display: flex; flex-direction: column; gap: 2px; }
.rs-d-stats b { font-size: 22px; color: var(--parchment); line-height: 1; }
.rs-d-stats span { font-size: 8.5px; letter-spacing: 0.12em; color: #7a8499; }
.rs-play { margin-top: 14px; font-family: inherit; font-size: 19px; letter-spacing: 0.16em; color: var(--ink); font-weight: bold;
  padding: 14px 0; border: none; border-radius: 10px; cursor: pointer;
  background: linear-gradient(180deg, #f3d98a, var(--gold)); box-shadow: 0 8px 26px rgba(232,200,115,0.35); transition: transform .12s, box-shadow .12s; }
.rs-play:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(232,200,115,0.5); }
.rs-del-btn { margin-top: 6px; align-self: center; background: none; border: none; color: #6c768c; font-family: inherit; font-size: 11px; letter-spacing: 0.08em; cursor: pointer; }
.rs-del-btn:hover { color: #ff8a8a; }

/* the wizard rail: centered tiles to switch the hero, plus a new-wizard tile */
.rs-rail { flex: 0 0 auto; display: flex; gap: 12px; justify-content: center; align-items: stretch; flex-wrap: wrap; padding: 10px 24px 30px; }
.rs-tile { position: relative; width: 104px; --el: var(--gold); display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 8px 10px; background: rgba(14,18,28,0.8); border: 1px solid #28304a; border-radius: 11px; cursor: pointer;
  color: var(--parchment); transition: transform .12s, border-color .12s, box-shadow .12s; }
.rs-tile:hover { transform: translateY(-3px); border-color: var(--el); }
.rs-tile.active { border-color: var(--el); background: color-mix(in srgb, var(--el) 14%, #0e1018); box-shadow: 0 0 18px color-mix(in srgb, var(--el) 40%, transparent); }
.rs-tile img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--el) 55%, transparent)); }
.rs-tile-name { font-size: 12px; letter-spacing: 0.03em; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-tile-lv { font-size: 9px; letter-spacing: 0.1em; color: var(--gold); }
.rs-tile-new { justify-content: center; border-style: dashed; opacity: 0.82; }
.rs-tile-plus { font-size: 30px; color: var(--gold); line-height: 1; }

@media (max-height: 640px) { .rs-hero { display: none; } }

.end-xp { margin: 14px auto 6px; max-width: 360px; }
.end-xp.hidden { display: none; }
.exp-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.exp-name { color: var(--parchment); letter-spacing: 0.04em; }
.exp-gain { color: var(--gold); font-weight: 700; }
.exp-bar { height: 8px; background: #1c2233; border-radius: 4px; overflow: hidden; margin: 6px 0 4px; }
.exp-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #5a6b8a, var(--gold)); transition: width .8s ease; }
.exp-meta { font-size: 11px; color: #8893a8; text-align: right; }
.exp-toast { margin-top: 8px; text-align: center; color: var(--gold); font-size: 15px; letter-spacing: 0.1em; min-height: 1.1em;
  text-shadow: 0 0 16px color-mix(in srgb, var(--gold) 60%, transparent); }
.end-buttons { display: flex; gap: 12px; justify-content: center; margin-top: 14px; }

/* lobby: show the selected character's 3D model instead of the flat emblem */
.loadout-emblem-wrap { display: none; }
.lobby-mage { display: block; width: 100%; max-width: 300px; height: 320px; object-fit: contain; margin: -10px auto 0; }

/* Narrower widths (but still tall enough for the 3-up layout): collapse the six
   class emblems into a single column (6 rows) and slim the left rail, so the 3D
   preview KEEPS its place instead of being dropped. Emblems turn into compact
   horizontal rows (icon + label) so six of them stay short vertically. */
@media (max-width: 1080px) and (min-width: 721px) and (min-height: 561px) {
  .cc-layout { grid-template-columns: minmax(142px, 188px) 1fr 1.55fr; }
  .cc-classes { grid-template-columns: 1fr; gap: 6px; }
  .cc-class { flex-direction: row; justify-content: center; gap: 9px; padding: 7px 9px; }
  .cc-class img { width: 28px; height: 28px; }
}
/* Truly tiny — very narrow OR short viewports can't fit three columns at all, so
   fall back to two (name/class | avatars) and drop the preview. */
@media (max-width: 720px), (max-height: 560px) {
  .cc-layout { grid-template-columns: minmax(0, 0.9fr) 1.5fr; }
  .cc-stage { display: none; }
}