/* ============ 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: 18%; 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%); }
/* portrait lifts the aim ray above centre (PORTRAIT_AIM_NDC_Y) — keep the crosshair on it */
html.portrait #crosshair { top: 40%; }

/* "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 ===================== */
/* ===================== PLAY HUB (unified roster + lobby) ===================== */
#title-screen.hub {
  --el: var(--gold);
  display: flex; flex-direction: column;
  align-items: stretch; justify-content: flex-start;
  padding: 0; overflow: hidden;
}
.hub-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 4%, color-mix(in srgb, var(--el) 15%, transparent) 0%, transparent 52%),
    radial-gradient(ellipse at 50% 120%, rgba(70,46,104,0.24) 0%, transparent 60%),
    radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.7) 100%);
  transition: background 0.45s ease;
}

/* --- top bar: brand · mode tabs · gear --- */
.hub-bar {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 20px;
  padding: 13px 30px;
  border-bottom: 1px solid rgba(232,200,115,0.14);
  background: linear-gradient(180deg, rgba(8,10,16,0.78), transparent);
}
.hub-brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand-crest { font-size: 26px; color: var(--gold); text-shadow: 0 0 18px rgba(232,200,115,0.6); animation: runeSpin 12s linear infinite; }
.brand-word { font-size: 22px; letter-spacing: 0.26em; color: var(--parchment); }

/* mode tabs (Overwatch-style) — the primary mode picker on wide screens */
.hub-modes { display: flex; align-items: stretch; gap: 4px; flex: 1 1 auto; justify-content: center; flex-wrap: wrap; }
.hub-mode {
  font-family: inherit; cursor: pointer; position: relative; white-space: nowrap;
  font-size: 13px; letter-spacing: 0.06em; color: #9aa3b6;
  background: transparent; border: 1px solid transparent; border-radius: 9px;
  padding: 9px 16px; transition: color .14s, background .14s, border-color .14s;
}
.hub-mode:hover { color: var(--parchment); background: rgba(255,255,255,0.04); }
.hub-mode.active {
  color: var(--gold);
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 16%, rgba(14,18,26,0.6)), rgba(14,18,26,0.5));
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 22%, transparent), inset 0 0 12px color-mix(in srgb, var(--gold) 10%, transparent);
}
.hub-bar-right { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; margin-left: auto; }
/* compact <select> mode picker — replaces the tabs when they won't fit (narrow/mobile) */
.hub-mode-mini {
  display: none; appearance: none; -webkit-appearance: none; font-family: inherit;
  font-size: 13px; letter-spacing: 0.05em; color: var(--parchment);
  background: linear-gradient(180deg, rgba(28,34,48,0.9), rgba(16,20,28,0.9));
  border: 1px solid #2e3850; border-radius: 8px; padding: 8px 14px; cursor: pointer;
}
.hub-mode-mini option { background: #11151e; color: var(--parchment); }
.hub-gear {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(14,18,26,0.6); border: 1px solid #2e3850;
  color: var(--gold); font-size: 19px; cursor: pointer; transition: all .15s ease;
}
.hub-gear:hover { border-color: var(--gold); box-shadow: 0 0 14px rgba(232,200,115,0.22); transform: rotate(35deg); }
/* squad bar-icon + drawer close + scrim — mobile only (revealed in the portrait media block) */
.hub-squad-btn {
  display: none; align-items: center; gap: 6px; font-family: inherit; cursor: pointer;
  height: 40px; padding: 0 13px; border-radius: 10px;
  background: rgba(14,18,26,0.6); border: 1px solid #2e3850; color: var(--parchment);
  font-size: 13px; letter-spacing: 0.06em;
}
.hub-squad-btn .hsb-ico { color: var(--gold); font-size: 14px; }
.hub-squad-btn:active { background: rgba(232,200,115,0.14); }
.hs-close { display: none; margin-left: 6px; width: 26px; height: 26px; border: none; border-radius: 8px; background: rgba(255,255,255,0.06); color: #9aa3b2; font-size: 12px; cursor: pointer; }
.hs-close:active { background: rgba(255,80,80,0.2); color: #fff; }
.hub-scrim { display: none; position: absolute; inset: 0; z-index: 6; background: rgba(4,6,10,0.55); backdrop-filter: blur(2px); }
.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 grid: wizards · hero · squad --- */
.hub-body {
  position: relative; z-index: 1; flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: minmax(214px, 268px) minmax(0, 1fr) minmax(258px, 320px);
  gap: clamp(16px, 2.4vw, 40px);
  align-items: stretch; padding: clamp(14px, 2.2vh, 26px) clamp(18px, 3vw, 44px);
}

/* left rail — your wizards (the merged roster) */
.hub-wizards { display: flex; flex-direction: column; min-height: 0; gap: 12px; }
.hw-head { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.18em; color: var(--gold); }
.hw-ico { color: var(--gold); }
.hub-offline { font-size: 11px; color: #ffce8a; line-height: 1.5; }
.hub-retry { background: none; border: 1px solid var(--gold); color: var(--gold); border-radius: 6px; padding: 1px 8px; margin-left: 4px; cursor: pointer; font-size: 11px; font-family: inherit; }
.hw-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; padding-right: 4px; align-content: start; }
.hw-tile {
  position: relative; --el: var(--gold); display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: 11px; cursor: pointer; text-align: left;
  background: rgba(14,18,28,0.7); border: 1px solid #28304a; color: var(--parchment);
  font-family: inherit; transition: transform .12s, border-color .12s, box-shadow .12s, background .12s;
}
.hw-tile:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--el) 60%, #28304a); }
.hw-tile.active {
  border-color: var(--el);
  background: linear-gradient(100deg, color-mix(in srgb, var(--el) 16%, rgba(14,18,28,0.7)), rgba(14,18,28,0.7));
  box-shadow: 0 0 18px color-mix(in srgb, var(--el) 32%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--el) 30%, transparent);
}
.hw-tile img { width: 38px; height: 38px; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--el) 55%, transparent)); }
.hw-tile-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hw-tile-name { font-size: 14px; letter-spacing: 0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-tile-lv { font-size: 9px; letter-spacing: 0.12em; color: color-mix(in srgb, var(--el) 70%, var(--parchment)); text-transform: uppercase; }
.hw-tile.active .hw-tile-name { color: var(--gold); }
.hw-new { justify-content: center; border-style: dashed; color: #8b93a6; }
.hw-new:hover { color: var(--gold); border-color: var(--gold); }
.hw-new .hw-plus { font-size: 22px; line-height: 1; color: var(--gold); }
.hw-new .hw-tile-name { color: inherit; letter-spacing: 0.16em; }

/* right rail — character profile card stacked above the squad card */
.hub-right { display: flex; flex-direction: column; min-height: 0; gap: 14px; }

/* character profile card — rank, level/XP, career stats (a self-contained "trading card") */
.hub-profile {
  flex: 0 0 auto;
  background: linear-gradient(180deg, rgba(22,27,38,0.86), rgba(13,16,23,0.86));
  border: 1px solid color-mix(in srgb, var(--el) 30%, rgba(232,200,115,0.16));
  border-radius: 14px; padding: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05),
              inset 0 0 0 1px color-mix(in srgb, var(--el) 12%, transparent);
}
.hp-head { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.16em; color: var(--gold); margin-bottom: 13px; }
.hp-ico { color: var(--gold); }
.hp-id { display: flex; flex-direction: column; gap: 12px; margin-bottom: 13px; }
.hp-rank { flex: 0 0 auto; align-self: flex-start; transform-origin: left center; }
.hp-idtext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hp-name { font-size: 19px; letter-spacing: 0.03em; color: var(--parchment); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 0 18px color-mix(in srgb, var(--el) 30%, transparent); }
.hp-class { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--el) 75%, var(--parchment)); }
.hp-xpwrap { margin-bottom: 14px; }
.hp-xpbar { height: 7px; background: #161c2b; border-radius: 4px; overflow: hidden; }
.hp-xpbar i { display: block; height: 100%; background: linear-gradient(90deg, #5a6b8a, var(--gold)); border-radius: 4px; }
.hp-xptext { font-size: 10px; letter-spacing: 0.08em; color: #8893a8; margin-top: 5px; }
.hp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hp-stats div { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 2px;
  background: rgba(10,13,20,0.55); border: 1px solid #232c42; border-radius: 9px; }
.hp-stats b { font-size: 19px; color: var(--parchment); line-height: 1; }
.hp-stats span { font-size: 8px; letter-spacing: 0.1em; color: #7a8499; }
.hp-del { margin-top: 14px; align-self: center; background: none; border: none; color: #5f6979; font-family: inherit; font-size: 10px; letter-spacing: 0.08em; cursor: pointer; width: 100%; text-align: center; }
.hp-del:hover { color: #ff8a8a; }

/* squad + co-op */
.hub-squad {
  flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow-y: auto;
  background: linear-gradient(180deg, rgba(22,27,38,0.86), rgba(13,16,23,0.86));
  border: 1px solid rgba(232,200,115,0.16); border-radius: 14px; padding: 16px;
  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;
}
.hub-squad.dimmed { opacity: 0.4; pointer-events: none; }
.hs-head { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.16em; color: var(--gold); margin-bottom: 13px; }
.hs-foot { margin-top: 13px; font-size: 11px; color: #69728a; font-style: italic; line-height: 1.5; }
.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; }
/* center — the selected wizard (interactive 3D + identity card).
   The stage hugs the wizard (no flex-grow), and the whole group (wizard + shadow + name)
   is vertically centred in the column, so the shadow sits right under the feet and the
   labels follow at a natural distance — not stranded by a tall, empty stage. */
.hub-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; }
.hero-stage { position: relative; flex: 0 1 auto; min-height: 0; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.hero-stage::before { content: ''; position: absolute; top: 6%; bottom: 14%; left: 50%; transform: translateX(-50%); width: min(76%, 560px); border-radius: 50%; background: radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--el) 24%, transparent), transparent 62%); filter: blur(12px); pointer-events: none; }
.hub-mage { position: relative; z-index: 1; height: 52vh; max-height: 100%; width: auto; max-width: 100%; object-fit: contain; cursor: grab; }
.hub-mage:active { cursor: grabbing; }
.hero-floor { position: absolute; bottom: -5%; left: 50%; transform: translateX(-50%); width: min(44%, 320px); height: 20px; z-index: 0; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--el) 52%, transparent), transparent 70%); filter: blur(6px); }

.hero-info { flex: 0 0 auto; width: 100%; max-width: 460px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 7px; padding-top: 50px; padding-bottom: 4px; }
.hero-class { font-size: 12px; letter-spacing: 0.26em; color: color-mix(in srgb, var(--el) 78%, var(--parchment)); text-transform: uppercase; }
.hero-name { font-size: clamp(28px, 3.8vw, 44px); line-height: 1.02; letter-spacing: 0.06em; color: var(--parchment); text-shadow: 0 0 26px color-mix(in srgb, var(--el) 26%, transparent); margin: 0; }

/* empty state — forge your first wizard (centered ＋ orb) */
.hub-empty { display: none; }
.hub.is-empty .hub-wizards, .hub.is-empty .hub-squad, .hub.is-empty .hub-hero,
.hub.is-empty .hub-foot, .hub.is-empty .hub-modes, .hub.is-empty .hub-mode-mini { display: none !important; }
.hub.is-empty .hub-body { display: flex; align-items: center; justify-content: center; }
.hub.is-empty .hub-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.hub-empty-orb { position: relative; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: radial-gradient(circle at 50% 38%, rgba(28,36,51,0.7), rgba(10,13,20,0.6)); border: 1px solid rgba(232,200,115,0.35); transition: transform .16s ease, box-shadow .16s ease; }
.hub-empty-orb:hover { transform: translateY(-2px); box-shadow: 0 0 40px rgba(232,200,115,0.35); }
.hub-empty-ring { position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(232,200,115,0.3); animation: lobbySpin 26s linear infinite; }
.hub-empty-plus { font-size: 58px; line-height: 1; color: var(--gold); text-shadow: 0 0 22px rgba(232,200,115,0.5); }
.hub-empty-title { font-size: clamp(20px, 3vw, 30px); letter-spacing: 0.16em; color: var(--parchment); }
.hub-empty-sub { font-size: 13px; color: #8893a8; font-style: italic; }
@keyframes lobbySpin { to { transform: rotate(360deg); } }

/* loadout (centre) — RETIRED (folded into .hub-hero) */
/* bottom bar */
.hub-foot { position: relative; z-index: 2; display: flex; align-items: center; gap: 18px; padding: 14px 30px; border-top: 1px solid rgba(232,200,115,0.14); background: linear-gradient(0deg, rgba(8,10,16,0.78), transparent); }
.hub-region { margin-right: auto; }
.hub-region.lsel { flex-direction: row; align-items: center; gap: 9px; }
/* 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); }

/* ---- hub responsive ---- */
/* Tablet / narrow desktop: swap the mode tabs for the compact <select>, tighten columns. */
@media (max-width: 1080px) {
  .hub-modes { display: none; }
  .hub-mode-mini { display: inline-block; }
  .hub-body { grid-template-columns: minmax(176px, 220px) minmax(0,1fr) minmax(220px, 282px); gap: 18px; }
}

/* Portrait (phones / tablets upright): the 3D hero is the focus. Wizards dock to the top
   as a compact strip, the squad lives in a slide-in drawer behind a bar icon, and the
   stats collapse into a slim bar — so nothing competes with the wizard. */
@media (orientation: portrait), (max-width: 760px) {
  .hub-bar { padding: 10px 14px; gap: 10px; }
  .brand-word { font-size: 18px; letter-spacing: 0.18em; }
  .hub-modes { display: none; }
  .hub-mode-mini { display: inline-block; }
  .hub-squad-btn { display: inline-flex; }

  /* position:static (+ z-index:auto) drops both the stacking context AND the containing
     block, so the squad drawer anchors to #title-screen (full viewport, top→bottom) and
     sits ABOVE the scrim (z6) — both then live in #title-screen's stacking context. */
  .hub-body { display: flex; flex-direction: column; gap: 12px; padding: 0 14px 12px; overflow-y: auto; position: static; z-index: auto; }

  /* wizards: a compact strip DOCKED to the top of the scroll area (sticky).
     Solid/opaque so the scene doesn't bleed through, with a drop shadow to sit above the hero. */
  .hub-wizards { order: -1; gap: 0; position: sticky; top: 0; z-index: 3;
    margin: 0 -14px; padding: 7px 14px;
    background: linear-gradient(180deg, #0c0f17, #0a0d13);
    border-bottom: 1px solid rgba(232,200,115,0.14); box-shadow: 0 6px 16px rgba(0,0,0,0.5); }
  .hw-head { display: none; }
  /* overflow-x:auto forces overflow-y to compute as 'auto', which clips the active tile's
     glow + the row's descenders — so give the scroll viewport vertical breathing room. */
  .hw-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 9px 0; gap: 8px; }
  .hw-list::-webkit-scrollbar { display: none; }
  .hw-tile { flex: 0 0 auto; min-width: 0; max-width: 60vw; padding: 6px 11px 6px 8px; background: rgba(16,20,30,0.95); }
  .hw-tile img { width: 28px; height: 28px; }
  /* tighter glow so it fits the scroll viewport without clipping */
  .hw-tile.active { background: linear-gradient(100deg, color-mix(in srgb, var(--el) 20%, rgba(16,20,30,0.96)), rgba(16,20,30,0.96));
    box-shadow: 0 0 11px color-mix(in srgb, var(--el) 30%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--el) 34%, transparent); }
  /* the wizard tiles scroll; the new-wizard button is icon-only + always at the right —
     margin-left:auto pins it to the right edge when the list fits, sticky right:0 keeps
     it pinned (tiles sliding under it) once the list overflows and scrolls. */
  .hw-new { position: sticky; right: 0; z-index: 2; flex: 0 0 auto; margin-left: auto; width: 46px; min-width: 46px; padding: 0;
    background: #0a0d13; box-shadow: -14px 0 14px 6px #0a0d13; }
  .hw-new .hw-tile-name { display: none; }
  .hw-new .hw-plus { font-size: 24px; }

  /* hero: the focus. Definite height (flex:1 → 0 / height:100% collapses on iOS).
     margin-block:auto centres the wizard+card in the slack below the wizard strip on
     tall viewports/tablets; on short screens the auto margins resolve to 0, so it stays
     top-docked and scrolls (no flexbox overflow-clipping like justify-content:center). */
  .hub-hero { order: 1; flex: 0 0 auto; margin-block: auto; padding-top: 4px; padding-bottom: 0; }
  .hero-stage { flex: 0 0 auto; height: 34vh; }
  .hub-mage { height: 34vh; max-height: 34vh; }
  .hero-info { gap: 4px; max-width: 94vw; }
  .hero-name { font-size: clamp(26px, 7vw, 38px); }

  /* profile card: a compact strip docked ABOVE the hero, just under the wizard list
     (squad lifts out into the drawer). Shrunk down so it doesn't crowd the wizard. */
  .hub-right { order: 0; }
  .hub-profile { padding: 9px 12px; border-radius: 11px; }
  .hp-head { margin-bottom: 8px; font-size: 11px; }
  .hp-id { flex-direction: row-reverse; justify-content: between; gap: 10px; margin-bottom: 9px; }
  .hp-name { font-size: 15px; }
  .hp-xpwrap { margin-bottom: 9px; }
  .hp-xpbar { height: 6px; }
  .hp-stats { gap: 5px; }
  .hp-stats div { padding: 6px 2px; gap: 2px; }
  .hp-stats b { font-size: 15px; }
  .hp-del { margin-top: 9px; }

  /* squad: off-canvas drawer from the right, toggled by .squad-open on .hub */
  .hub-squad { order: 0; position: absolute; top: 0; right: 0; bottom: 0; z-index: 7;
    width: min(330px, 86vw); border-radius: 0; padding: 16px;
    transform: translateX(100%); transition: transform 0.28s ease; }
  .hub.squad-open .hub-squad { transform: none; }
  .hs-close { display: grid; place-items: center; }
  .hub-scrim:not([hidden]) { display: block; }

  /* invite popover: 2 columns so the long class names don't overflow the card */
  .invite-grid { grid-template-columns: repeat(2, 1fr); }
  .invite-class { min-width: 0; }
  .invite-class .ic-class { overflow-wrap: anywhere; }

  .hub-foot { flex-wrap: wrap; justify-content: center; gap: 12px 16px; }
  .hub-region { margin-right: 0; }
}

/* Narrow phones: the wordmark + mode + squad + gear won't all fit — keep just the crest. */
@media (max-width: 460px) {
  .hub-bar { gap: 8px; padding: 10px 12px; }
  .hub-brand .brand-word { display: none; }
  .hub-mode-mini { max-width: 42vw; }
  .hub-squad-btn { padding: 0 10px; }
}

/* Short landscape (phones held sideways — the game's forced mobile orientation):
   keep all three columns, compress hard, drop non-essentials. After the portrait rule
   so it wins for phones that match both. */
@media (orientation: landscape) and (max-height: 560px) {
  .hub-bar { padding: 6px 14px; }
  .brand-word { font-size: 15px; letter-spacing: 0.16em; }
  .brand-crest { font-size: 18px; }
  .hub-modes { display: flex; gap: 2px; }
  .hub-mode { padding: 6px 10px; font-size: 11px; }
  .hub-mode-mini { display: none; }

  .hub-body { display: grid; grid-template-columns: minmax(146px,178px) minmax(0,1fr) minmax(176px,216px); gap: 12px; padding: 6px 14px; }
  .hub-wizards { order: 0; } .hub-hero { order: 0; } .hub-right { order: 0; }
  .hw-list { flex-direction: column; }
  .hw-head { font-size: 10px; }
  .hw-tile { padding: 6px 8px; min-width: 0; }
  .hw-tile img { width: 30px; height: 30px; }
  .hw-tile-name { font-size: 12px; }
  .hub-right { gap: 10px; }
  .hub-profile { padding: 10px; }
  .hp-id, .hp-xpwrap { margin-bottom: 9px; }
  .hp-stats div { padding: 6px 2px; }
  .hp-stats b { font-size: 15px; }
  .hp-del { display: none; }
  .hub-squad { padding: 10px; }
  .hs-head { font-size: 10px; margin-bottom: 7px; }
  .hs-foot { display: none; }
  .squad-slot { height: 44px; padding: 0 8px; }
  .slot-emblem { width: 28px; height: 28px; }
  .slot-name { font-size: 11px; }
  .slot-class { font-size: 8px; }

  .hub-mage { max-height: 46vh; }
  .hero-name { font-size: clamp(20px, 3.6vw, 30px); }

  .hub-foot { padding: 6px 14px; }
  .play-btn { padding: 9px 36px; }
  .play-word { font-size: 18px; }
  .play-mode { font-size: 9px; }
}

/* The hub 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 screen). 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);
}
/* resting "move here" affordance — shown only in the portrait dock (see portrait block) */
.tcj-hint { display: none; }

/* ---- 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)); }
/* inline glyph icons (e.g. the Jump leap) — sized to the glyph font, tinted parchment */
.tcb-svg { display: block; width: 1.25em; height: 1.25em; fill: currentColor; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.75)); }
/* 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; }
/* captions are a portrait-dock feature only — hidden in the landscape thumb-arc */
.tcb-label { 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; }
/* contextual Pick-up button — sits directly above Potion, shown only when standing on loot */
.tc-btn[data-act="pickup"] { right: 36vmin;   bottom: 20vmin; }
.tc-pickup { display: none; }
.tc-pickup.show { display: grid; }

/* 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 (vertical) gameplay HUD ============
   The mage is reframed into the upper third by cameraRig (smaller, lifted), and the
   action controls dock to the bottom of the skinny viewport: floating joystick at
   bottom-left, the gauntlet/utility cluster hugging the bottom-right. Status chrome
   shrinks into the top corners so nothing crowds the mage. Landscape is untouched. */
@media (orientation: portrait) {
  /* --- character stats: a compact bar pinned to the TOP (mobile format) --- */
  .hud-player-panel {
    left: calc(8px + env(safe-area-inset-left));
    top: calc(7px + env(safe-area-inset-top));
    bottom: auto; right: auto;
    align-items: center; transform: none; gap: 8px;
  }
  .hud-portrait { width: 42px; height: 42px; }
  .hud-vitals { width: min(58vw, 232px); padding-bottom: 0; }
  .hud-id { margin-bottom: 3px; gap: 7px; }
  .hud-name { font-size: 12.5px; letter-spacing: 0.1em; }
  .hud-class { font-size: 8.5px; letter-spacing: 0.16em; }
  .bar-shell { height: 13px; margin-bottom: 3px; }
  .health-shell { height: 15px; }
  .mana-shell { height: 11px; }
  .flight-shell { display: none; }   /* keep the top bar slim */
  .util-row { display: none; }        /* dash/potion live in the dock (touch) / on the keyboard (desktop) */
  .bar-text { font-size: 9px; right: 6px; }
  .status-row { margin-top: 4px; }

  /* minimap: 40% smaller, top-right (the html.touch base rule is more specific, so
     match its specificity here to actually win) */
  #minimap-frame,
  html.touch #minimap-frame {
    top: calc(8px + env(safe-area-inset-top));
    right: calc(8px + env(safe-area-inset-right));
    width: clamp(44px, 14vw, 60px); height: clamp(44px, 14vw, 60px); padding: 4px;
  }

  /* clutter the player asked to drop on mobile */
  .hud-top { display: none !important; }      /* "n MAGES ALIVE" + storm-forming readout */
  #announcer { display: none !important; }     /* the "PRACTICE LOBBY" / region intro banner */
  #dummy-meter { display: none !important; }   /* practice TRAINING card */

  /* loot pickup prompt: float it up beside the mage (lower-middle) instead of the
     desktop bottom offset, which buried it behind the action dock */
  #loot-prompt { bottom: auto; top: 43vh; gap: 6px; }
  .loot-title { font-size: 14px; }

  /* in-match settings gear: sit under the slim top bar, out of the dock */
  html.touch #touch-settings { top: calc(60px + env(safe-area-inset-top)); }
  html.touch #kill-feed {
    top: calc(60px + env(safe-area-inset-top)); right: calc(8px + env(safe-area-inset-right)); max-width: 56vw;
  }
  html.touch #storm-warning { font-size: 13px; letter-spacing: 0.16em; }

  /* --- right-side action cluster: an organic thumb-FAN, not a grid, no backing box.
     Size encodes priority — the primary fire is biggest at the thumb's corner; the
     other abilities fan up-and-left at decreasing sizes; potion is a small icon on
     the right edge. The bottom-left stays clear to MOVE. --- */
  html.touch #touch-actions {
    position: absolute; inset: 0; width: auto; height: auto;
    background: none; border-radius: 0;
    pointer-events: none;   /* buttons re-enable it; gaps fall through to look-drag */
  }
  html.touch #touch-actions .tc-btn {
    position: absolute; pointer-events: auto;
    height: auto; aspect-ratio: 1; overflow: visible;
  }
  html.touch .tcb-icon { border-radius: 50%; }
  /* priority sizes + fan offsets from the bottom-right corner */
  html.touch #touch-actions .tc-primary:not(.tc-alt) { width: 18.5vw; right: 4.5vw; bottom: 7vw; }   /* primary fire — biggest, thumb home */
  html.touch #touch-actions .tc-primary.tc-alt        { width: 16vw;  right: 25.5vw; bottom: 5.5vw; } /* the other gauntlet's primary fire */
  html.touch #touch-actions .tc-rune                  { width: 14.5vw; right: 5vw;   bottom: 28.5vw; } /* rune */
  html.touch .tc-btn[data-act="spell1"]               { width: 12.5vw; right: 25vw;  bottom: 27.5vw; } /* sorcery (secondary) */
  html.touch .tc-btn[data-act="spell2"]               { width: 12.5vw; right: 43vw;  bottom: 21vw; }
  /* Jump + Dash: one aligned row above the abilities, sized like Potion (10vw) */
  html.touch .tc-btn[data-act="jump"]                 { width: 10vw;   right: 6vw;   bottom: 47vw; }
  html.touch .tc-btn[data-act="dash"]                 { width: 10vw;   right: 24vw;  bottom: 47vw; }
  /* potion: a small icon on the right edge, vertically centred (occasional use) */
  html.touch .tc-btn[data-act="potion"]               { width: 10vw;   right: 1.5vw; bottom: auto; top: calc(48vh + 50px); }
  html.touch .tc-btn[data-act="pickup"]               { width: 10vw;   right: 1.5vw; bottom: auto; top: calc(48vh + 50px - 14vw); }  /* above Potion, ~17px gap (was ~9px) */
  html.touch .tcb-glyph { font-size: 5.2vw; }
  html.touch .tcb-badge { font-size: 3.2vw; bottom: 0; }
  /* caption under each button */
  html.touch .tcb-label {
    display: block;
    position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%);
    font-size: 8.5px; letter-spacing: 0.02em; line-height: 1; white-space: nowrap;
    color: var(--parchment); text-shadow: 0 1px 3px #000, 0 0 5px rgba(0,0,0,0.85);
    pointer-events: none; opacity: 0.9; max-width: 24vw; overflow: hidden; text-overflow: ellipsis;
  }
  html.touch .tcb-label:empty { display: none; }

  /* --- input zones: the joystick only owns the bottom-left CORNER (where the MOVE ring
     sits); everything else is camera look-drag. Previously the joystick claimed the whole
     left half, so trying to swing the camera there kept grabbing the stick. DOM order is
     look → move → actions, so the move corner sits over the full-screen look layer, and the
     action buttons sit over both. --- */
  html.touch #touch-look { left: 0; right: 0; top: 0; width: 100%; height: 100%; }
  html.touch #touch-move { left: 0; right: auto; top: auto; bottom: 0; width: 52vw; height: 40vh; }

  /* --- movement affordance (bottom-left): the joystick floats + is invisible until
     touched, so a faint dashed ring + MOVE caption shows where to drag. Fades out
     while the stick is active. --- */
  html.touch .tcj-hint {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    position: absolute; left: 4vw; bottom: calc(2vw + env(safe-area-inset-bottom));
    pointer-events: none; opacity: 0.45; transition: opacity 0.18s ease;
  }
  html.touch #touch-move.is-active .tcj-hint { opacity: 0; }
  html.touch .tcj-hint-ring {
    width: 24vw; height: 24vw; max-width: 120px; max-height: 120px; border-radius: 50%;
    border: 2px dashed color-mix(in srgb, var(--gold) 60%, rgba(232,200,115,0.4));
    box-shadow: inset 0 0 20px rgba(0,0,0,0.45);
  }
  html.touch .tcj-hint-label {
    font-size: 10px; letter-spacing: 0.24em; color: var(--gold);
    text-shadow: 0 1px 4px rgba(0,0,0,0.85);
  }
}

/* ---- portrait blocker (retired) ---- the game now plays + lays out in portrait,
   so the "turn your device" floor never shows. Kept hidden (markup still in the DOM)
   rather than ripped out, in case a future mode wants to force an orientation. */
#rotate-gate { display: none !important; }
.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 ===================== */
#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); }
.set-leave {
  background: transparent; border: 1px solid rgba(206,108,90,0.55); color: #d98c78;
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  padding: 8px 16px; border-radius: 8px; cursor: pointer; font-family: inherit;
}
.set-leave:hover { background: rgba(206,108,90,0.14); color: #f0b6a4; }

/* 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 ===================== */
#create-screen { --el: var(--gold); color: var(--parchment); }
.cc-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 { 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 { 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);
  /* cap + center on ultrawide. width:100% is required because margin:auto on a flex item
     disables the implicit cross-axis stretch — without it the layout grows to its
     max-content width and overflows narrow (mobile/portrait) viewports. */
  width: 100%; max-width: 1920px; margin: 0 auto; }

.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; }
/* whisper-faint gold scrollbar — a sliver of warm light, not a UI chrome bar.
   8px track with a 3px transparent border so the visible thumb is a ~2px hairline. */
.cc-grid { scrollbar-width: thin; scrollbar-color: rgba(232,200,115,0.14) transparent; }
.cc-grid::-webkit-scrollbar { width: 8px; }
.cc-grid::-webkit-scrollbar-track { background: transparent; }
.cc-grid::-webkit-scrollbar-thumb {
  background: rgba(232,200,115,0.14); border-radius: 999px;
  border: 3px solid transparent; background-clip: padding-box;
  transition: background-color .2s; }
.cc-grid:hover::-webkit-scrollbar-thumb { background: rgba(232,200,115,0.26); background-clip: padding-box; }
.cc-grid::-webkit-scrollbar-thumb:hover { background: rgba(232,200,115,0.42); background-clip: padding-box; }
.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; }

.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; }

/* 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; }
}
/* Mobile + tablet: drop the avatar search box — the family chips below it cover
   filtering, and the row reclaims vertical space on small screens. */
@media (max-width: 1080px) {
  .cc-search-wrap { display: none; }
}

/* ============ PORTRAIT (vertical) MENUS ============
   Every menu collapses to a single, scrollable vertical column on a tall/narrow
   screen, so the whole game — not just gameplay — is usable held upright. Appended
   last so these win over the wide multi-column layouts above. */
@media (orientation: portrait) {

  /* ---- shared: compact BACK button + tighter screen titles so they fit a narrow top row ---- */
  .btn-back { top: 10px; left: 10px; padding: 6px 12px; font-size: 11.5px; }
  .cc-title { font-size: clamp(15px, 4.4vw, 21px); letter-spacing: 0.08em; padding: 0 70px; }

  /* (Lobby/roster portrait rules now live with the unified .hub responsive block above.) */

  /* ---- Gauntlet select: featured mage scales to height, dossier full-width ---- */
  .sel-title { top: 16px; font-size: clamp(20px, 5vw, 30px); }
  .sel-layout { padding: 64px 14px 24px; gap: 12px; }
  .featured-canvas { height: min(34vh, 360px); }

  /* ---- Character create: vertical flow — name + 1-row class · live model · avatar grid ---- */
  .cc-title { margin: 10px 0 2px; }
  #create-screen .cc-layout {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 8px; padding: 4px 12px 2px; min-height: 0;
  }
  .cc-form { flex: 0 0 auto; gap: 9px; }
  .cc-field-grow { flex: 0 0 auto; min-height: 0; }   /* class field must not grow + steal grid space */
  .cc-input { font-size: 15px; padding: 9px 12px; }
  .cc-classes { grid-template-columns: repeat(6, 1fr); gap: 5px; }   /* all six classes in one row */
  .cc-class { padding: 7px 2px 6px; gap: 3px; }
  .cc-class img { width: 26px; height: 26px; }
  .cc-class span { font-size: 7px; letter-spacing: 0.03em; }
  .cc-class-info { display: none; }   /* blurb hidden on mobile — the live model is the feedback */
  /* live 3D preview of the selected avatar (definite height so iOS doesn't collapse it) */
  .cc-stage { display: flex; flex: 0 0 auto; height: 21vh; }
  .cc-stage .featured-canvas { width: auto; height: 21vh; max-height: 21vh; }
  .cc-floor { bottom: 4%; }
  /* avatar browser takes the remaining height; the grid is the scroller */
  .cc-skins { flex: 1 1 auto; min-height: 0; gap: 8px; }
  .cc-search { font-size: 15px; padding: 11px 12px 11px 36px; }
  /* family filters: ONE swipeable rail instead of a cramped 2-row wrap. Bigger
     touch targets; the row scrolls horizontally with a soft right-edge fade hint. */
  .cc-families {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    gap: 8px; padding: 1px 1px 3px; margin: 0 -2px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
            mask-image: linear-gradient(90deg, #000 92%, transparent);
  }
  .cc-families::-webkit-scrollbar { display: none; }
  .cc-fam {
    flex: 0 0 auto; scroll-snap-align: start;
    padding: 9px 16px; font-size: 13px; letter-spacing: 0.02em;
  }
  .cc-fam.active { box-shadow: 0 0 12px color-mix(in srgb, var(--el) 35%, transparent); }
  .cc-grid { grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px; }
  /* a compact CREATE button — not the full-width slab */
  .cc-foot { padding: 8px 0 14px; }
  .cc-foot .big-btn { padding: 12px 44px; font-size: 16px; letter-spacing: 0.22em; }

  /* ---- Settings: category rail becomes a horizontal tab strip above the content ---- */
  .set-panel { width: 96vw; max-height: 90vh; max-height: 90dvh; }
  .set-body { flex-direction: column; }
  .set-rail {
    width: 100%; flex: none; display: flex; flex-direction: row; gap: 2px;
    overflow-x: auto; overflow-y: hidden; padding: 6px 6px 0;
    border-right: none; border-bottom: 1px solid rgba(232,200,115,0.14);
  }
  .set-cat {
    width: auto; flex: none; white-space: nowrap; padding: 9px 13px;
    border-left: none; border-bottom: 2px solid transparent;
  }
  .set-cat.active { border-left-color: transparent; border-bottom-color: var(--gold); }
  .set-range { flex-basis: 120px; }

  /* ---- End screen: shrink the title so it fits the narrow width; wrap buttons ---- */
  #end-title { font-size: clamp(42px, 13vw, 76px); letter-spacing: 0.12em; }
  .end-buttons { flex-wrap: wrap; }
}