/* RAGEQUIT UI RESET
   Single-source stylesheet for menu, Loadout Forge, HUD and overlays.
*/

/* R6 fix — self-hosted webfonts (previously only declared in font-family stacks,
   never loaded → every browser fell back to Arial). Files in /fonts (~95 KB). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-var.woff2") format("woff2");
}
@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/rajdhani-500.woff2") format("woff2");
}
@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/rajdhani-600.woff2") format("woff2");
}
@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/rajdhani-700.woff2") format("woff2");
}

:root {
  --bg: #080b12;
  --bg-deep: #04060b;
  --panel: rgba(15, 17, 26, 0.86);
  --panel-solid: #0f111a;
  --panel-hard: #080a12;
  --line: rgba(145, 170, 220, 0.18);
  --line-strong: rgba(255, 210, 96, 0.34);
  --gold: #ffd260;
  --gold-soft: rgba(255, 210, 96, 0.12);
  --text: #e8ecf6;
  --text-soft: #a7b0c4;
  --muted: #687084;
  --danger: #ff3344;
  --hp: #ff3344;
  --mana: #00d0ff;
  --stamina: #00ff88;
  --fire: #ff4500;
  --ice: #00e5ff;
  --lightning: #ffe600;
  --dark: #6a0dad;
  --nature: #39ff14;
  --radius: 6px;
  --font-ui: Inter, "Segoe UI", system-ui, sans-serif;
  --font-hud: Rajdhani, "Arial Narrow", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  letter-spacing: 0;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

#app,
canvas {
  position: fixed;
  inset: 0;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hidden {
  display: none !important;
  pointer-events: none !important;
}

body.main-menu-active canvas,
body.loadout-active canvas {
  visibility: hidden;
  opacity: 0;
  filter: none;
}

/* When player is dead: hide combat UI to reduce noise */
body.player-dead #crosshair,
body.player-dead #gcd-ring,
body.player-dead #combat-console,
body.player-dead #weapons {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

body.main-menu-active #hud,
body.main-menu-active #combat-console,
body.main-menu-active #crosshair,
body.main-menu-active #gcd-ring,
body.main-menu-active #parry-ring,
body.main-menu-active #bow-charge,
body.main-menu-active #cast-bar,
body.main-menu-active #status-strip,
body.main-menu-active #kill-feed,
body.main-menu-active #ping-hud,
body.main-menu-active #round-hud,
body.loadout-active #hud,
body.loadout-active #combat-console,
body.loadout-active #crosshair,
body.loadout-active #gcd-ring,
body.loadout-active #parry-ring,
body.loadout-active #bow-charge,
body.loadout-active #cast-bar,
body.loadout-active #status-strip,
body.loadout-active #kill-feed,
body.loadout-active #ping-hud,
body.loadout-active #round-hud {
  display: none;
}

.server-status-dot {
  margin-right: 4px;
}

.status-offline,
.status-disconnected {
  color: #e87070;
}

.status-connecting,
.status-returning {
  color: #e4c05a;
}

.status-connected {
  color: #9be39b;
}

/* Shared command language */
.btn,
.pause-btn,
.quality-btn,
#settings-back-btn,
#settings-keybind-reset,
.util-btn,
.mode-tile,
.forge-tile,
.class-select-card,
.element-tab,
.ls-slot,
.pool-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(8, 10, 18, 0.82);
  color: var(--text);
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, opacity 120ms ease;
}

.btn:hover,
.pause-btn:hover,
.quality-btn:hover,
#settings-back-btn:hover,
#settings-keybind-reset:hover,
.util-btn:hover,
.mode-tile:hover,
.forge-tile:hover,
.class-select-card:hover,
.element-tab:hover,
.ls-slot:hover,
.pool-card:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
  background: rgba(17, 20, 32, 0.94);
}

.btn.primary,
.pause-btn.primary,
.quality-btn.active,
.forge-tile {
  border-color: rgba(255, 210, 96, 0.62);
  background: linear-gradient(180deg, rgba(255, 210, 96, 0.18), rgba(255, 210, 96, 0.06));
  color: var(--gold);
}

.btn.danger,
.pause-btn.danger {
  border-color: rgba(255, 51, 68, 0.48);
  color: #ff7a84;
}

button:disabled,
button.locked {
  cursor: not-allowed;
  opacity: 0.46;
  transform: none;
}

.lock-icon {
  margin-left: 6px;
  font-size: 0.8em;
  vertical-align: middle;
  pointer-events: none;
}

/* Main menu */
#main-menu {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(84px, auto) minmax(0, 1fr) auto;
  gap: clamp(18px, 2.4vw, 34px);
  padding: clamp(26px, 3.4vw, 58px);
  background:
    linear-gradient(90deg, rgba(2, 4, 9, 0.96) 0%, rgba(2, 4, 9, 0.78) 43%, rgba(2, 4, 9, 0.5) 100%),
    linear-gradient(180deg, rgba(2, 4, 9, 0.16), rgba(2, 4, 9, 0.76)),
    url("/ui/sfondo.webp") center / cover no-repeat;
}

#main-menu::before,
#loadout-station::before {
  content: "";
  position: absolute;
  inset: clamp(16px, 1.8vw, 28px);
  border: 1px solid rgba(255, 210, 96, 0.13);
  pointer-events: none;
}

#main-menu::after,
#loadout-station::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 42%, rgba(255, 210, 96, 0.12), transparent 26%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.48));
  pointer-events: none;
}

.mm-center {
  grid-column: 1 / 13;
  grid-row: 2 / 3;
  align-self: start;
  justify-self: center;
  display: grid;
  gap: 20px;
  width: 100%;
  max-width: 900px;
  margin-top: -34px;
  position: relative;
  z-index: 2;
}

.mm-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin-bottom: 12px;
}

.rq-menu-brand img {
  display: block;
  margin: 0 auto;
  width: min(440px, 100%);
  height: auto;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.72));
}

.tagline {
  margin: 0;
  color: var(--gold);
  font: 900 15px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mm-modes-row,
.mm-subnav {
  display: grid;
  gap: 8px;
}

.mm-modes-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mm-subnav {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mode-tile,
.forge-tile {
  position: relative;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 18px 16px;
  overflow: hidden;
}

/* frame_but.png solo per le tile di gioco (1v1, FFA, Training).
   forge-tile lasciato senza cornice per ora. */
.mode-tile {
  background:
    linear-gradient(180deg, rgba(6, 8, 14, 0.45) 0%, rgba(6, 8, 14, 0.38) 100%),
    url("/ui/frame_but.webp") center / 100% 100% no-repeat;
  border-color: rgba(180, 140, 80, 0.55);
}

.mode-tile:hover {
  background:
    linear-gradient(180deg, rgba(6, 8, 14, 0.22) 0%, rgba(6, 8, 14, 0.18) 100%),
    url("/ui/frame_but.webp") center / 100% 100% no-repeat;
  border-color: rgba(255, 210, 96, 0.8);
}

.mode-tile-glow,
.forge-tile-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 210, 96, 0.08), transparent 52%),
    radial-gradient(circle at 88% 18%, rgba(0, 208, 255, 0.08), transparent 30%);
  opacity: 0.8;
}

.class-select-card::before,
.pool-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--gold);
  opacity: 0.8;
}

.mode-tile-icon,
.forge-tile-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 210, 96, 0.22);
  border-radius: 4px;
  background: rgba(255, 210, 96, 0.06);
  color: var(--gold);
  font-size: 22px;
  position: relative;
  z-index: 1;
}

.mode-tile-name,
.forge-tile-name {
  display: block;
  overflow: hidden;
  color: var(--gold);
  font: 900 clamp(14px, 1.3vw, 18px)/1 var(--font-hud);
  text-shadow: 0 0 18px rgba(255, 210, 96, 0.45), 0 1px 4px rgba(0, 0, 0, 0.95);
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;
}

.mode-tile-sub,
.forge-tile-sub {
  display: block;
  color: rgba(255, 210, 96, 0.62);
  font: 700 10px/1.3 var(--font-mono);
  text-align: center;
  position: relative;
  z-index: 1;
}

.mode-tile--mini {
  min-height: 64px;
}

.mode-tile--danger::before {
  background: var(--danger);
}

.forge-tile--hero {
  min-height: 96px;
  margin-top: 0;
  border-color: rgba(255, 210, 96, 0.66);
  background: linear-gradient(180deg, rgba(255, 210, 96, 0.16), rgba(255, 210, 96, 0.05));
}

.forge-tile-text {
  grid-area: text;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.forge-tile-arrow {
  grid-area: arrow;
  color: var(--gold);
  font: 900 30px/1 var(--font-hud);
  position: relative;
  z-index: 1;
}

.mm-foot-row {
  grid-column: 1 / 13;
  grid-row: 3 / 4;
  align-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 34px;
  color: var(--muted);
  font: 800 11px/1 var(--font-mono);
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}

.util-btn {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}

.mode-tile-container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

#menu-train-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  animation: slideDown 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Profile card layout */

.pc-avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: rgba(255, 210, 96, 0.06);
  color: var(--gold);
  font: 900 14px/1 var(--font-hud);
}

.rank-badge {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rank-badge-top {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rank-icon {
  font-size: 11px;
}

.rank-name {
  color: var(--rank-color, var(--text-soft));
  font: 800 10px/1 var(--font-mono);
  text-transform: uppercase;
}

.rank-progress-track {
  width: 50px;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  display: inline-block;
  margin: 0 4px;
}

.rank-progress-fill {
  height: 100%;
  background: var(--rank-color, var(--gold));
  width: 0;
}

.rank-next-label {
  color: var(--muted);
  font: 800 9px/1 var(--font-mono);
  text-transform: uppercase;
}

.pc-stats-row {
  display: flex;
  gap: 8px;
  margin-left: 12px;
  border-left: 1px solid var(--line);
  padding-left: 12px;
}

.pc-stat-box {
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.16);
  color: var(--text-soft);
  font: 800 10px/1 var(--font-mono);
  text-transform: uppercase;
}

.pc-stat-box b {
  color: var(--gold);
}

.pc-loadout-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  font: 900 11px/1 var(--font-hud);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.pc-loadout-status--unconfigured {
  background: rgba(255, 210, 96, 0.08);
  border: 1px solid rgba(255, 210, 96, 0.22);
  color: var(--gold);
}

.pc-loadout-status--ready {
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.22);
  color: var(--stamina);
}

#profile-auth-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-logged-in-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 800 10px/1 var(--font-mono);
  text-transform: uppercase;
  color: var(--text-soft);
}

.auth-logged-in-status b {
  color: var(--text);
}

.auth-logout-btn {
  height: 26px;
  padding: 0 10px;
  font: 900 10px/1 var(--font-hud);
  text-transform: uppercase;
  background: rgba(255, 51, 68, 0.1);
  border: 1px solid rgba(255, 51, 68, 0.3);
  color: #ff7a84;
}

.auth-logout-btn:hover {
  background: rgba(255, 51, 68, 0.2);
  border-color: rgba(255, 51, 68, 0.5);
}

.auth-logged-out-form {
  display: flex;
  align-items: center;
  gap: 6px;
}

.auth-input {
  height: 26px;
  width: 110px !important;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.24);
  color: var(--text);
  font: 800 10px/1 var(--font-mono);
}

.auth-input:focus {
  border-color: var(--line-strong);
  outline: none;
}

.auth-buttons-row {
  display: flex;
  gap: 4px;
}

.auth-btn {
  height: 26px;
  padding: 0 8px;
  font: 900 10px/1 var(--font-hud);
  text-transform: uppercase;
}

.btn-accedi {
  background: var(--gold-soft);
  border-color: var(--line-strong);
  color: var(--gold);
}

.btn-registrati {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--line);
}

.auth-oauth-divider {
  display: none;
}

.btn-google-oauth {
  display: none;
}

.auth-status-message {
  font: 800 9px/1 var(--font-mono);
  text-transform: uppercase;
  color: #ff7a84;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════
   LOADOUT FORGE — 2-column redesign
   ════════════════════════════════════════════════════════════ */
#loadout-station {
  position: fixed;
  inset: 0;
  z-index: 760;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) 52px;
  gap: 0;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(4, 6, 11, 0.98), rgba(4, 6, 11, 0.9) 44%, rgba(4, 6, 11, 0.78)),
    linear-gradient(180deg, rgba(4, 6, 11, 0.22), rgba(4, 6, 11, 0.8)),
    url("/ui/sfondo.webp") center / cover no-repeat;
}

#loadout-station.hidden {
  display: none;
}

/* ── Header ── */
#ls-header {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 220px minmax(720px, 1fr) 300px;
  align-items: stretch;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 210, 96, 0.18);
  background: rgba(4, 6, 11, 0.55);
}

#ls-title-block {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 10px 14px 10px 16px;
  border-right: 1px solid rgba(255, 210, 96, 0.1);
}

.rq-shell-logo {
  grid-row: 1 / 3;
  width: 42px;
  height: 42px;
  object-fit: contain;
}

#ls-title-block h1 {
  margin: 0;
  font: 900 24px/0.9 var(--font-hud);
  text-transform: uppercase;
}

#ls-title-block h1 span,
#ls-title-block .subtitle {
  color: var(--gold);
}

#ls-title-block .subtitle {
  margin: 2px 0 0;
  font: 800 9px/1 var(--font-mono);
  text-transform: uppercase;
}

/* Class tabs */
#ls-class-selector {
  min-height: 86px;
  display: grid;
  grid-template-columns: 126px repeat(4, minmax(132px, 1fr));
  gap: 8px;
  align-items: stretch;
  padding: 8px 12px;
  border: 1px solid rgba(255, 210, 96, 0.16);
  border-radius: 6px;
  background:
    linear-gradient(90deg, rgba(255, 210, 96, 0.08), rgba(0, 0, 0, 0.16)),
    rgba(8, 10, 18, 0.62);
}

.ls-class-selector-title {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 3px 8px;
  align-items: center;
  padding: 8px;
  border-right: 1px solid rgba(255, 210, 96, 0.16);
  color: var(--gold);
  text-transform: uppercase;
}

.ls-class-selector-title span {
  grid-row: 1 / 3;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 210, 96, 0.4);
  border-radius: 4px;
  background: rgba(255, 210, 96, 0.12);
  font: 900 14px/1 var(--font-hud);
}

.ls-class-selector-title b {
  min-width: 0;
  font: 900 16px/1 var(--font-hud);
  letter-spacing: 0;
}

.ls-class-selector-title small {
  min-width: 0;
  color: var(--text-soft);
  font: 800 9px/1.2 var(--font-mono);
}

.class-select-card {
  position: relative;
  min-width: 0;
  min-height: 90px;
  display: grid;
  /* Banner image takes the left column; text takes the right */
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-areas:
    "banner title"
    "banner desc";
  gap: 3px 10px;
  align-items: center;
  padding: 0 10px 0 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(145, 170, 220, 0.16);
  border-left: 3px solid rgba(145, 170, 220, 0.18);
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.15s,
    background 0.15s,
    transform 0.15s,
    box-shadow 0.15s;
}

/* Class banner image — fills the left column exactly */
.class-select-card .card-banner {
  grid-area: banner;
  width: 56px;
  height: 90px;
  object-fit: cover;
  object-position: center top;
  display: block;
  opacity: 0.82;
  transition: opacity 0.15s;
}
.class-select-card:hover .card-banner,
.class-select-card.active .card-banner { opacity: 1; }

.class-select-card[data-class="tank"]   { --class-color: #d4a04a; }
.class-select-card[data-class="archer"] { --class-color: #39ff14; }
.class-select-card[data-class="mage"]   { --class-color: #00d0ff; }
.class-select-card[data-class="hybrid"] { --class-color: #ffd260; }

.class-select-card:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}

.class-select-card.active {
  border-color: color-mix(in srgb, var(--class-color, var(--gold)) 58%, rgba(145, 170, 220, 0.16));
  border-left-color: var(--class-color, var(--gold));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--class-color, var(--gold)) 18%, transparent), rgba(0, 0, 0, 0.28)),
    rgba(0, 0, 0, 0.48);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 0 18px color-mix(in srgb, var(--class-color, var(--gold)) 24%, transparent);
}

.class-select-card.active::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 5px;
  height: 1px;
  background: var(--class-color, var(--gold));
  opacity: 0.82;
}

.card-icon {
  grid-area: banner;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.25);
  font-size: 20px;
  line-height: 1;
  filter: grayscale(0.4);
  transition: filter 0.15s;
}
.class-select-card.active .card-icon,
.class-select-card:hover .card-icon { filter: none; }

.card-title {
  grid-area: title;
  min-width: 0;
  font: 900 15px/1 var(--font-hud);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.15s;
}
.class-select-card.active .card-title { color: var(--class-color, var(--gold)); }
.class-select-card:hover .card-title { color: var(--text); }

.card-desc {
  grid-area: desc;
  min-width: 0;
  overflow: hidden;
  max-height: 22px;
  font: 800 8px/1.15 var(--font-mono);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--muted);
  text-overflow: clip;
  white-space: normal;
}
.class-select-card.active .card-desc {
  color: color-mix(in srgb, var(--class-color, var(--gold)) 60%, var(--muted));
}

/* Compact vitals bar (header right side) */
#ls-vitals-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 12px;
  border-left: 1px solid rgba(255, 210, 96, 0.1);
  overflow: hidden;
}

.vitals-class-tag {
  padding: 3px 7px;
  border: 1px solid rgba(255, 210, 96, 0.22);
  border-radius: 3px;
  background: rgba(255, 210, 96, 0.08);
  color: var(--gold);
  font: 900 9px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  white-space: nowrap;
}

/* Class mechanic explanation — shown next to class name in vitals bar */
.vitals-mechanic-tag {
  flex: 1 1 0;
  min-width: 0;
  padding: 3px 8px;
  border: 1px solid rgba(145, 170, 220, 0.16);
  border-radius: 3px;
  background: rgba(145, 170, 220, 0.06);
  color: rgba(180, 195, 230, 0.88);
  font: 600 10px/1.4 var(--font-ui);
  text-transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vital-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.vp-icon {
  font-size: 11px;
  line-height: 1;
}

/* Width for vital bar track inside compact header pills */
.vital-pill .vital-bar-track {
  width: 48px;
  height: 6px;
  border-radius: 3px;
}

/* Key badge in section labels */
.ls-key {
  padding: 2px 6px;
  border: 1px solid rgba(255, 210, 96, 0.28);
  border-radius: 3px;
  background: rgba(255, 210, 96, 0.06);
  color: var(--gold);
  font: 900 8px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Body 2-column ── */
#ls-body {
  min-height: 0;
  display: grid;
  grid-template-columns: clamp(620px, 46vw, 860px) minmax(0, 1fr);
  gap: 8px;
  padding: 8px clamp(12px, 1.4vw, 22px);
  position: relative;
  z-index: 2;
}

/* Left: build slots */
#ls-left {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--line);
  border-top-color: rgba(255, 210, 96, 0.28);
  border-radius: var(--radius);
  background: rgba(10, 12, 20, 0.92);
  overflow: hidden;
}

/* Right: ability pool only. Info lives inside each card. */
#ls-right {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
}

/* Pool section */
#ls-pool-section {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-top-color: rgba(0, 255, 136, 0.22);
  border-radius: var(--radius);
  background: rgba(10, 12, 20, 0.92);
  overflow: hidden;
  min-height: 0;
}

.ls-column-header {
  flex: 0 0 auto;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.ls-column-header h2 {
  margin: 7px 0 0;
  font: 900 22px/1 var(--font-hud);
  text-transform: uppercase;
}

.ls-sub-title-main,
.ls-sub-title-sub,
.step-num {
  display: inline-block;
  margin-right: 6px;
  color: var(--gold);
  font: 900 10px/1 var(--font-mono);
  text-transform: uppercase;
}

/* Preset button — compact console footer */
#ls-load-preset,
.ls-preset-btn {
  position: static;
  z-index: 2;
  margin-top: auto;
  min-height: 28px;
  padding: 0 12px;
  font: 900 9px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 0;
  border-top: 1px solid var(--line);
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-top-color: rgba(255, 210, 96, 0.12);
  background: rgba(0, 0, 0, 0.22);
}

.vital-bar-track {
  height: 8px;
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.vital-bar {
  height: 100%;
  border-radius: inherit;
  width: 100%;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.vital-bar.hp {
  background: linear-gradient(90deg, #6f0b16, var(--hp));
}

.vital-bar.mana {
  background: linear-gradient(90deg, #064565, var(--mana));
}

.vital-bar.stamina {
  background: linear-gradient(90deg, #06613c, var(--stamina));
}

.vital-value {
  font: 900 12px/1 var(--font-mono);
  color: var(--text);
  text-align: right;
}

/* Hide section only if ALL slot-lists have no children (class has 0 of this family) */
.ls-section:not(:has(.slot-list > *)) {
  display: none;
}

.ls-section {
  padding: 10px 10px 12px;
  border-bottom: 1px solid rgba(145, 170, 220, 0.08);
}
.ls-section:last-of-type { border-bottom: none; }

.ls-section-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 210, 96, 0.12);
  color: var(--gold);
  font: 900 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.slot-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.slot-list:not(:empty)::before {
  margin: 8px 2px 2px;
  color: var(--text-soft);
  font: 900 9px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#ls-melee:not(:empty)::before { content: "Sword slots · E wheel"; }
#ls-bow:not(:empty)::before { content: "Bow slots · E wheel"; }
#ls-magic-base:not(:empty)::before { content: "Magic Base · keys 1-5"; }
#ls-magic-advanced:not(:empty)::before { content: "Magic Advanced · keys 1-5"; }
#ls-utility:not(:empty)::before { content: "Utility + Recovery · Q wheel"; }

/* Station footer button row */
.station-buttons {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 clamp(14px, 1.8vw, 24px);
  border-top: 1px solid rgba(255, 210, 96, 0.14);
  background: rgba(4, 6, 11, 0.92);
}

.station-buttons .btn,
#ls-default,
#ls-back,
#ls-confirm {
  flex: 1 1 140px;
  min-height: 42px;
  padding: 10px 18px;
  font: 900 13px/1 var(--font-hud);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  border-radius: 0;
}

#ls-confirm {
  flex: 1.2 1 180px;
}

#ls-element-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  gap: 6px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.element-tab {
  min-width: 0;
  min-height: 38px;
  padding: 0 7px;
  overflow: hidden;
  font: 900 10px/1 var(--font-mono);
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.element-tab.active,
.element-tab.active-filter {
  border-color: rgba(255, 210, 96, 0.62);
  color: var(--gold);
  background: rgba(255, 210, 96, 0.08);
}

#ls-filter-bar {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--line);
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.filter-btn {
  min-height: 30px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.2);
  color: var(--text-soft);
  font: 900 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.12s;
}
.filter-btn:hover {
  border-color: var(--line-strong);
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}
/* active-filter is the state class added by the Loadout runtime. */
.filter-btn.active-filter {
  border-color: rgba(255, 210, 96, 0.55);
  background: rgba(255, 210, 96, 0.08);
  color: var(--gold);
}
/* SMART: stile neutro di default, colore solo se attivo */
.filter-btn.smart {
  /* nessun colore speciale di default */
}
.filter-btn.smart.active-filter {
  border-color: rgba(0, 255, 136, 0.55);
  background: rgba(0, 255, 136, 0.1);
  color: var(--stamina);
}

#ls-search {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  font: 800 11px/1 var(--font-mono);
  text-transform: uppercase;
}

#ls-search::placeholder {
  color: rgba(232, 236, 245, 0.42);
}

.fill-0 { width: 0; }
.fill-1 { width: 20%; }
.fill-2 { width: 40%; }
.fill-3 { width: 60%; }
.fill-4 { width: 80%; }
.fill-5 { width: 100%; }

.pool-empty {
  grid-column: 1 / -1;
  color: var(--text-soft);
  font: 800 12px/1.35 var(--font-mono);
  text-transform: uppercase;
}

.tag,
.effect-tag,
.tag-role,
.tag-targeting,
.tag-control,
.tag-damage,
.tag-status,
.tag-move,
.tag-resource,
.tag-timing {
  display: inline-flex;
  margin: 2px 4px 0 0;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text-soft);
  font: 800 10px/1 var(--font-mono);
  text-transform: uppercase;
}

.tag-role { color: var(--gold); border-color: rgba(255, 210, 96, 0.28); }
.tag-targeting { color: var(--mana); border-color: rgba(0, 208, 255, 0.28); }
.tag-control { color: #caa3ff; border-color: rgba(106, 13, 173, 0.38); }
.tag-damage { color: #ff8992; border-color: rgba(255, 51, 68, 0.32); }
.tag-status { color: #b9ff9c; border-color: rgba(57, 255, 20, 0.3); }
.tag-move { color: var(--stamina); border-color: rgba(0, 255, 136, 0.28); }
.tag-resource { color: #9ff4ff; border-color: rgba(0, 208, 255, 0.22); }
.tag-timing { color: #c8b8ff; border-color: rgba(160, 130, 255, 0.32); }

/* ════════════════════════════════════════════════════════════
   GAME UI OVERRIDES — layout videogioco, batte tutte le media query
   ════════════════════════════════════════════════════════════ */

/* ── Forza il layout 2 colonne: sinistra compatta, destra ampia ── */
#ls-body {
  grid-template-columns: clamp(380px, 30vw, 480px) minmax(0, 1fr) !important;
}

/* ── Slot list: colonna singola, uno sotto l'altro ── */
.slot-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 3px 7px 6px;
}
.slot-list:empty { padding: 0; gap: 0; }

/* ── Family label strip ── */
#ls-melee:not(:empty)::before        { content: "MELEE";    color: #d4824a; }
#ls-bow:not(:empty)::before          { content: "BOW";      color: #5ab97a; }
#ls-magic-base:not(:empty)::before   { content: "SPELL";    color: #9b6cf4; }
#ls-magic-advanced:not(:empty)::before { content: "ADVANCED"; color: #00d0ff; }
#ls-utility:not(:empty)::before      { content: "UTILITY";  color: #ffd260; }

#ls-melee::before, #ls-bow::before,
#ls-magic-base::before, #ls-magic-advanced::before,
#ls-utility::before {
  display: block;
  grid-column: 1 / -1;
  width: 100%;
  padding: 3px 7px;
  font: 900 8px/1.25 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  border-left: 3px solid currentColor;
  background: color-mix(in srgb, currentColor 10%, transparent);
  opacity: 0.9;
  margin-bottom: 4px;
}

/* ── Colore famiglia ── */
#ls-melee          { --fam: #d4824a; --fam-bg: rgba(212,130,74,0.05); }
#ls-bow            { --fam: #5ab97a; --fam-bg: rgba(90,185,122,0.05); }
#ls-magic-base     { --fam: #9b6cf4; --fam-bg: rgba(155,108,244,0.05); }
#ls-magic-advanced { --fam: #00d0ff; --fam-bg: rgba(0,208,255,0.05); }
#ls-utility        { --fam: #ffd260; --fam-bg: rgba(255,210,96,0.05); }

/* ── Slot card: icona + nome separati, mapping input leggibile ── */
.ls-slot {
  position: relative;
  width: 100%;
  min-height: 56px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 66px 18px;
  grid-template-areas:
    "portrait main meta clear"
    "portrait route input input";
  align-items: center;
  gap: 3px 6px;
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, var(--fam, var(--line)) 40%, var(--line));
  border-left: 3px solid color-mix(in srgb, var(--fam, var(--gold)) 70%, transparent);
  border-radius: 4px;
  background: var(--fam-bg, rgba(4, 6, 14, 0.88));
  cursor: pointer;
  text-align: left;
  transition: transform 0.08s, box-shadow 0.12s;
}

.ls-slot:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--fam, #8899cc) 8%, rgba(12, 16, 28, 0.97));
  box-shadow: 0 6px 20px rgba(0,0,0,0.6),
              0 0 10px color-mix(in srgb, var(--fam, #8899cc) 20%, transparent);
}

.ls-slot.active {
  border-left-color: var(--gold);
  border-color: rgba(255, 210, 96, 0.6);
  background: rgba(255, 210, 96, 0.08);
  box-shadow:
    0 0 0 1px rgba(255,210,96,0.3),
    0 0 22px rgba(255,210,96,0.25),
    inset 0 0 16px rgba(255,210,96,0.06);
}

/* Element accent */
.ls-slot.el-fire      { border-left-color: var(--fire); }
.ls-slot.el-ice       { border-left-color: var(--ice); }
.ls-slot.el-lightning { border-left-color: var(--lightning); }
.ls-slot.el-dark      { border-left-color: #c060ff; }
.ls-slot.el-nature    { border-left-color: var(--nature); }

.ls-slot-portrait {
  grid-area: portrait;
  width: 46px;
  display: grid;
  place-items: center;
  align-self: center;
}

/* Icon area */
.ls-slot-icon {
  grid-area: unset;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 30px;
  border: 1px solid color-mix(in srgb, var(--fam, var(--line)) 38%, var(--line));
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.3);
}

/* Main column: name + nature */
.ls-slot-main {
  grid-area: main;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-self: center;
}

/* Ability name — prominent primary text */
.ls-slot-name {
  display: block;
  overflow: hidden;
  font: 900 13px/1.1 var(--font-hud);
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

/* Category — small muted subtitle */
.ls-slot-nature {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font: 800 8px/1 var(--font-mono);
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.ls-slot-route {
  grid-area: route;
  display: block;
  color: var(--gold);
  font: 900 7px/1 var(--font-mono);
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Cost */
.ls-slot-cost {
  grid-area: meta;
  min-width: 0;
  font: 800 7px/1 var(--font-mono);
  color: var(--muted);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Keybind badge */
.ls-slot-label {
  grid-area: input;
  position: static;
  width: 100%;
  min-height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 210, 96, 0.34);
  border-radius: 3px;
  background: rgba(0,0,0,0.48);
  color: var(--gold);
  font: 900 7px/1 var(--font-mono);
  letter-spacing: 0.04em;
  padding: 0 4px;
}

/* Clear X */
.ls-slot-clear {
  grid-area: clear;
  position: static;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 51, 68, 0.35);
  border-radius: 2px;
  color: rgba(255, 100, 100, 0.7);
  font-size: 12px;
}
.ls-slot-clear:hover { background: rgba(255,51,68,0.18); color: #ff3344; }

/* Empty slot */
.ls-slot:not([data-idx]) .ls-slot-icon,
.ls-slot .ls-slot-name:empty {
  opacity: 0.28;
}

/* Etichetta tipo slot vuoto — es. "SPELL", "MELEE", "BOW" */
.ls-slot-empty-type {
  display: block;
  font: 900 8px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--fam, var(--muted)) 85%, var(--text));
  opacity: 0.65;
  padding: 0 2px;
  text-align: center;
  word-break: break-all;
}

/* ── Pool: card larghe e alte, tutto leggibile ── */
.pool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  align-content: start;
  gap: 8px;
  padding: 10px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

/* Pool card */
.pool-card {
  position: relative;
  --ability-color: var(--gold);
  display: grid;
  /* Icon column on the RIGHT, content on the left */
  grid-template-columns: minmax(0, 1fr) 82px;
  grid-template-rows: auto auto minmax(44px, 1fr) auto auto auto;
  grid-template-areas:
    "nature visual"
    "meta visual"
    "summary visual"
    "dmgrow dmgrow"
    "tags tags"
    "costs costs";
  align-items: start;
  gap: 4px 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--ability-color) 30%, rgba(145,170,220,0.1));
  border-left: 3px solid color-mix(in srgb, var(--ability-color) 65%, transparent);
  border-radius: 5px;
  background: rgba(6, 8, 16, 0.92);
  cursor: pointer;
  text-align: left;
  min-height: 160px;
  transition: transform 0.08s, border-color 0.1s, background 0.1s, box-shadow 0.12s;
}

.pool-copy {
  display: grid;
  grid-template-areas:
    "nature"
    "meta"
    "summary"
    "dmgrow"
    "tags"
    "costs";
  grid-template-rows: auto auto minmax(44px, 1fr) auto auto auto;
  gap: 4px;
  min-width: 0;
}

.pool-card::before { display: none; }

.pool-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--ability-color) 70%, transparent);
  background: color-mix(in srgb, var(--ability-color) 8%, rgba(6,8,16,0.97));
  box-shadow: 0 0 16px color-mix(in srgb, var(--ability-color) 30%, transparent),
              0 4px 12px rgba(0,0,0,0.5);
}

.pool-card.recommended {
  border-color: rgba(0, 255, 136, 0.45);
  border-left-color: rgba(0, 255, 136, 0.7);
}
.pool-card.equipped {
  border-color: rgba(255, 210, 96, 0.55);
  border-left-color: rgba(255, 210, 96, 0.85);
  background: rgba(255, 210, 96, 0.07);
  box-shadow: 0 0 10px rgba(255,210,96,0.15);
}

.pool-visual {
  grid-area: visual;
  /* Span the name + meta + summary rows so the icon fills the right side */
  grid-row: 1 / 4;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

/* Pool icon — large, fills the right column */
.pool-icon-box {
  width: 88px;
  height: 120px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--ability-color) 38%, rgba(145,170,220,0.12));
  border-radius: 6px;
  background: color-mix(in srgb, var(--ability-color) 10%, rgba(0,0,0,0.45));
  font-size: 38px;
  overflow: hidden;
}

/* Pool name — prominent ability title */
.pool-name {
  display: block;
  overflow: hidden;
  font: 900 15px/1.1 var(--font-hud);
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

/* Pool meta */
.pool-meta {
  grid-area: meta;
  font: 800 10px/1.3 var(--font-mono);
  color: var(--muted);
  text-align: left;
  overflow: hidden;
  text-transform: uppercase;
}

.pool-meta b {
  color: var(--gold);
}

.pool-nature {
  grid-area: nature;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
  align-self: start;
  padding-right: 4px;
}

/* Category subtitle under name */
.pool-category {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  color: var(--muted);
  font: 800 10px/1.2 var(--font-mono);
  text-transform: uppercase;
  white-space: nowrap;
}

.recommend-tag {
  flex: 0 0 auto;
  padding: 2px 4px;
  border: 1px solid rgba(0, 255, 136, 0.34);
  border-radius: 3px;
  color: var(--stamina);
  font: 900 8px/1 var(--font-mono);
}

.pool-summary {
  grid-area: summary;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  min-height: 44px;
  padding: 5px 8px;
  border: 1px solid rgba(145,170,220,0.08);
  border-radius: 4px;
  background: rgba(255,255,255,0.025);
  color: #ccd2e4;
  font: 400 11px/1.52 var(--font-ui);
  text-transform: none;
  letter-spacing: 0.01em;
  align-self: start;
  /* Don't overlap the icon column */
  padding-right: 6px;
}

/* Bold numbers in descriptions */
.pool-summary b {
  font-weight: 800;
  color: var(--text);
}

/* Status effect highlights in descriptions */
.ds-fire    { color: var(--fire);       font-weight: 800; }
.ds-ice     { color: var(--ice);        font-weight: 800; }
.ds-bleed   { color: #ff5566;           font-weight: 800; }
.ds-stun    { color: var(--lightning);  font-weight: 800; }
.ds-root    { color: var(--nature);     font-weight: 800; }
.ds-slow    { color: #a0c8ff;           font-weight: 800; }
.ds-nature  { color: var(--nature);     font-weight: 800; }
.ds-dark    { color: #c060ff;           font-weight: 800; }
.ds-shield  { color: var(--gold);       font-weight: 800; }
.ds-heal    { color: #7fff88;           font-weight: 800; }
.ds-cc      { color: var(--lightning);  font-weight: 800; }
.ds-move    { color: var(--stamina);    font-weight: 800; }

.pool-card .effect-tags {
  grid-area: tags;
  display: flex;
  min-width: 0;
  gap: 4px;
  overflow: hidden;
}

.pool-bars {
  display: none;
}

/* ── Ability card: damage row — isolated with sword icon ── */
.pool-dmg-row {
  grid-area: dmgrow;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding-top: 2px;
  border-top: 1px solid rgba(255, 100, 40, 0.2);
  margin-top: 2px;
}
.pool-dmg-icon {
  font-size: 11px;
  color: #ff8050;
  opacity: 0.85;
  flex-shrink: 0;
}
.tag-dmg-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(255, 80, 30, 0.22);
  border: 1px solid rgba(255, 100, 40, 0.48);
  color: #ff9060;
  font: 900 11px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Ability card: cost row — styled like class vitals ── */
.pool-cost-row {
  grid-area: costs;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding-top: 4px;
  border-top: 1px solid rgba(145, 170, 220, 0.1);
  margin-top: 2px;
}
.cost-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 4px;
  font: 800 11px/1 var(--font-mono);
  text-transform: uppercase;
}
.cost-chip .cc-icon { font-size: 11px; }
.cost-chip .cc-val  { font-weight: 900; }
.cost-chip .cc-unit { font-size: 9px; font-weight: 600; opacity: 0.75; }

/* Mana — blue, styled like vital mana bar */
.cost-mp {
  background: linear-gradient(90deg, rgba(6,69,101,0.55), rgba(30,100,200,0.18));
  border: 1px solid rgba(30,140,255,0.38);
  color: #60c8ff;
}
/* Stamina — green, styled like vital stamina bar */
.cost-sp {
  background: linear-gradient(90deg, rgba(6,97,60,0.55), rgba(20,160,80,0.18));
  border: 1px solid rgba(30,210,90,0.38);
  color: #50e896;
}
/* Cast time — amber */
.cost-windup {
  background: rgba(220,180,40,0.12);
  border: 1px solid rgba(240,200,60,0.32);
  color: #ffd060;
}
/* Cooldown — muted grey */
.cost-cd {
  background: rgba(80,85,110,0.2);
  border: 1px solid rgba(140,150,180,0.28);
  color: #9ba8c4;
}

/* Element colors */
.pool-card.el-fire      { --ability-color: #ff6b35; }
.pool-card.el-ice       { --ability-color: #44d4ff; }
.pool-card.el-lightning { --ability-color: #f4e040; }
.pool-card.el-dark      { --ability-color: #c060ff; }
.pool-card.el-nature    { --ability-color: #39ff14; }
.pool-card.el-none      { --ability-color: #888896; }

/* ── Ability PNG + SVG sprite icons: contenute nel box ── */
.pool-icon-box,
.pool-icon,
.ls-slot-icon {
  overflow: hidden;
}
.pool-icon-box svg,
.pool-icon svg,
.ls-slot-icon svg,
.pool-icon-box img,
.pool-icon img,
.ls-slot-icon img,
.ability-icon img,
.r-icon img,
.tt-name img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}

.ability-png-icon {
  border-radius: 4px;
}

.ls-slot-icon .ability-png-icon,
.pool-icon-box .ability-png-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 5px;
}

@media (max-width: 1180px) {
  #main-menu {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    overflow-y: auto;
  }

  .mm-center,
  .mm-foot-row {
    grid-column: 1 / -1;
  }

  /* Profile bar: stack verticale su schermi stretti */
  #menu-loadout-preview {
    flex-wrap: wrap;
    min-height: auto;
    padding: 8px 0;
  }

  .profile-card-floating > .pc-sep {
    width: 100%;
    height: 1px;
  }

  .pc-right-group {
    width: 100%;
    margin-left: 0;
    padding: 4px 12px;
  }

  .mm-center {
    grid-row: 1 / 2;
  }

  .mm-modes-row,
  .mm-subnav {
    grid-template-columns: 1fr;
  }

  #ls-class-selector {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ls-class-selector-title {
    grid-column: 1 / -1;
    border-right: none;
    border-bottom: 1px solid rgba(255, 210, 96, 0.16);
  }

  #ls-body {
    grid-template-columns: minmax(560px, 0.48fr) minmax(500px, 1fr);
  }

  #ls-right {
    min-height: 260px;
  }
}

@media (max-width: 780px) {
  #main-menu {
    padding: 16px;
    overflow-y: auto;
  }

  #loadout-station {
    padding: 16px;
    overflow: hidden;
  }

  #ls-body {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  #ls-class-selector {
    grid-template-columns: 1fr;
  }

  #ls-left,
  #ls-right {
    min-height: 260px;
  }

}
/* HUD */
#hud {
  position: fixed;
  left: 24px;
  bottom: 28px;
  /* 600: above game canvas (0) but below all overlays (pause 850, scoreboard 850, loadout 760) */
  z-index: 600;
  width: 318px;
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  background: var(--panel);
  user-select: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#hud.dragging {
  border-color: var(--gold);
  box-shadow: 0 0 12px rgba(255, 210, 96, 0.45);
}

#hud.resizing {
  border-color: var(--stamina);
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.45);
}

#hud-drag-handle {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font: 900 9px/1 var(--font-mono);
  text-transform: uppercase;
  cursor: grab;
  transition: color 0.15s ease;
}

#hud-drag-handle:hover {
  color: var(--gold);
}

#hud-drag-handle:active {
  cursor: grabbing;
}

.bar {
  position: relative;
  height: 26px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 5px solid var(--bar-color);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
}

.bar .fill {
  width: 100%;
  height: 100%;
  transition: width 100ms linear;
}

.bar .label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  color: var(--text);
  font: 900 11px/1 var(--font-mono);
}

#hud-hp { --bar-color: var(--hp); }
#hud-mana { --bar-color: var(--mana); }
#hud-stam { --bar-color: var(--stamina); }
#hud-hp .fill { background: linear-gradient(90deg, #6f0b16, var(--hp)); }
#hud-mana .fill { background: linear-gradient(90deg, #064565, var(--mana)); }
#hud-stam .fill { background: linear-gradient(90deg, #06613c, var(--stamina)); }

#class-mechanic {
  color: var(--gold);
  font: 900 10px/1.3 var(--font-mono);
  text-transform: uppercase;
}

.mech-label,
.mech-val,
.mech-elem,
.mech-surge {
  margin-right: 6px;
}

.mech-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  vertical-align: middle;
}

.mech-dot.fury { background: var(--hp); }
.mech-dot.flow { background: var(--gold); }
.mech-dot.empty { background: rgba(255, 255, 255, 0.08); }
.mech-dot.armed.elem-fire { background: var(--fire); }
.mech-dot.armed.elem-ice { background: var(--ice); }
.mech-dot.armed.elem-lightning { background: var(--lightning); }
.mech-dot.armed.elem-dark { background: var(--dark); }
.mech-dot.armed.elem-nature { background: var(--nature); }
.mech-elem.elem-fire { color: var(--fire); }
.mech-elem.elem-ice { color: var(--ice); }
.mech-elem.elem-lightning { color: var(--lightning); }
.mech-elem.elem-dark { color: var(--dark); }
.mech-elem.elem-nature { color: var(--nature); }

.mech-bar {
  display: inline-block;
  width: 72px;
  height: 6px;
  margin: 0 6px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  vertical-align: middle;
}

.mech-bar-fill {
  display: block;
  height: 100%;
  background: var(--stamina);
}

#hud-resize-handle {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  cursor: nwse-resize;
  opacity: 0.5;
}

#combat-console {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 600;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  box-shadow: none;
  pointer-events: none;
}

#weapons {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(15, 17, 26, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
  pointer-events: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

#hud-combo {
  display: flex;
  gap: 4px;
  padding-right: 8px;
}

#hud-combo .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

#hud-combo .dot.active {
  background: var(--gold);
}

/* Full combo (3rd swing) — golden pulse */
#hud-combo.full .dot {
  background: var(--gold);
  box-shadow: 0 0 5px var(--gold);
}

/* Low-resource warning states */
#hud-hp.warn .fill {
  animation: bar-warn-pulse 0.75s ease-in-out infinite;
}

#hud-mana.warn .fill,
#hud-stam.warn .fill {
  opacity: 0.6;
}

@keyframes bar-warn-pulse {
  0%, 100% { filter: brightness(1); }
  50%       { filter: brightness(1.6); }
}

.wslot {
  width: 60px;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
  cursor: pointer;
}

.wslot:hover {
  border-color: var(--gold);
  background: rgba(255, 210, 96, 0.08);
  box-shadow: 0 0 10px rgba(255, 210, 96, 0.25);
}

.wslot.active {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(255, 210, 96, 0.22), rgba(255, 210, 96, 0.08));
  box-shadow: 0 0 12px rgba(255, 210, 96, 0.35);
  transform: scale(1.02);
}

.wslot .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -2px;
}

.wslot .icon svg {
  width: 26px !important;
  height: 26px !important;
}

.wslot .wname {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 3px;
  overflow: hidden;
  color: var(--text);
  font: 900 7px/1.2 var(--font-mono);
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 10;
  background: rgba(0, 0, 0, 0.65);
  padding: 2px 0;
  border-radius: 2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
  letter-spacing: 0.5px;
}

.wslot.active .wname {
  color: var(--gold);
  opacity: 1;
}

.wslot .key {
  position: absolute;
  top: 4px;
  left: 6px;
  font: 900 10px var(--font-mono);
  color: var(--gold);
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
}

/* Weapon swap server-confirm flash */
@keyframes wslot-swap-flash {
  0%   { box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(255, 210, 96, 0.7); background: rgba(255, 210, 96, 0.35); }
  100% { box-shadow: none; background: rgba(0, 0, 0, 0.45); }
}

.wslot.swap-flash {
  animation: wslot-swap-flash 0.22s ease-out forwards;
}

#cd-strip {
  display: flex;
  gap: 12px;
  padding: 6px 12px;
  background: rgba(15, 17, 26, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
  pointer-events: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.hotbar-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hotbar-section.spell-section,
.hotbar-section.utility-section {
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.hotbar-rail {
  display: flex;
  gap: 6px;
}

.cd-pip {
  position: relative;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 3px solid var(--elem-color, var(--gold));
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

/* ── Hotbar family color coding ── */
/* Bottom border color makes weapon/spell/utility family instantly readable. */
.cd-pip.pip-sword     { border-bottom-color: #ff3344; } /* sword */
.cd-pip.pip-bow       { border-bottom-color: #39ff14; } /* bow */
.cd-pip.pip-magic     { border-bottom-color: #00d0ff; } /* staff / magic base */
.cd-pip.pip-magic-adv { border-bottom-color: #00d0ff; } /* staff / magic advanced */
.cd-pip.pip-utility   { border-bottom-color: #ffd260; } /* utility */

.cd-pip.utility-pip {
  width: 56px;
  height: 56px;
}

.cd-pip.spell-pip {
  width: 56px;
  height: 56px;
}

.cd-pip.ready {
  border-color: rgba(255, 255, 255, 0.12);
}

.cd-pip.primed {
  border-color: var(--gold);
  background: rgba(255, 210, 96, 0.15);
  box-shadow: 0 0 12px rgba(255, 210, 96, 0.35);
}

.cd-pip .label {
  position: absolute;
  top: 4px;
  left: 5px;
  color: var(--gold);
  font: 900 9px/1 var(--font-mono);
  z-index: 10;
}

.cd-pip .cd-arc {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(-2px);
  z-index: 15;
}

.cd-pip .cd-arc-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 3px;
}

.cd-pip .cd-arc-fill {
  fill: none;
  stroke: var(--elem-color, var(--gold));
  stroke-width: 3px;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.1s linear;
}

.cd-pip .ability-icon {
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  z-index: 2;
}

.cd-pip .ability-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter 0.15s ease;
}

/* Cooling down state visual feedback */
.cd-pip.cooling .ability-icon img {
  filter: grayscale(90%) brightness(30%);
}

.cd-pip.cooling {
  background: rgba(0, 0, 0, 0.45);
  border-color: rgba(255, 255, 255, 0.06);
}

.cd-pip .cd-timer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 18;
  color: #ffffff;
  font: 900 15px/1 var(--font-mono);
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.95);
  pointer-events: none;
}



.cd-pip .icon {
  font-size: 20px;
}

/* ─── cd-pip interactive states ─────────────────────────────────────── */

/* Pending: ability queued, waiting for server ack */
.cd-pip.pending {
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
}

/* Placing: ground-target ability needs cursor placement */
.cd-pip.placing {
  border-color: var(--elem-color, var(--gold));
  box-shadow: 0 0 16px color-mix(in srgb, var(--elem-color, var(--gold)) 60%, transparent);
  animation: placing-pulse 0.8s ease-in-out infinite;
}

@keyframes placing-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

/* Fail flash: ability refused (out of mana, blocked, etc.) */
.cd-pip.fail-flash {
  border-color: var(--danger);
  box-shadow: 0 0 14px rgba(255, 51, 68, 0.65);
}

.cd-pip.fail-flash .ability-icon img {
  filter: brightness(35%) sepia(1) saturate(4) hue-rotate(-20deg);
}

/* Ready flash: cooldown just finished */
.cd-pip.cd-ready-flash {
  animation: cd-ready-pop 0.5s ease-out forwards;
}

@keyframes cd-ready-pop {
  0%   { box-shadow: 0 0 0   rgba(255,255,255,0);    border-color: rgba(255,255,255,0.12); }
  25%  { box-shadow: 0 0 20px rgba(255,255,255,0.55); border-color: rgba(255,255,255,0.9); }
  100% { box-shadow: 0 0 0   rgba(255,255,255,0);    border-color: rgba(255,255,255,0.12); }
}

/* ─── Ability tooltip ────────────────────────────────────────────────── */

.cd-pip .ability-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8, 10, 18, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 2px solid var(--elem-color, rgba(255, 255, 255, 0.25));
  border-radius: 8px;
  padding: 10px 12px;
  min-width: 150px;
  max-width: 230px;
  pointer-events: none;
  opacity: 0;
  z-index: 200;
  transition: opacity 0.12s ease;
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.75);
  white-space: nowrap;
}

.cd-pip:hover .ability-tooltip {
  opacity: 1;
}

.ability-tooltip .tt-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 700 12px/1.4 var(--font-mono);
  color: #fff;
  margin-bottom: 5px;
}

.ability-tooltip .tt-name img {
  width: 18px;
  height: 18px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}

.ability-tooltip .tt-el {
  font: 600 9px/1.2 var(--font-mono);
  color: var(--elem-color, var(--muted));
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 3px;
}

.ability-tooltip .tt-cost {
  font: 600 10px/1.2 var(--font-mono);
  color: var(--muted);
}

.ability-tooltip .tt-malus {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font: 400 10px/1.5 var(--font-mono);
  color: var(--danger);
  white-space: normal;
  max-width: 210px;
}

/* Crosshair and contextual combat */
#crosshair {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 560;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(232, 236, 246, 0.72);
  border-radius: 50%;
  pointer-events: none;
}

#crosshair::before,
#crosshair::after {
  content: "";
  position: absolute;
  background: rgba(232, 236, 246, 0.74);
}

#crosshair::before {
  left: 50%;
  top: 5px;
  bottom: 5px;
  width: 1px;
}

#crosshair::after {
  top: 50%;
  left: 5px;
  right: 5px;
  height: 1px;
}

#crosshair.hit {
  border-color: var(--danger);
}

/* Bow charge crosshair feedback */
#crosshair[data-charge="low"] {
  border-color: rgba(80, 220, 80, 0.7);
  transform: translate(-50%, -50%) scale(0.9);
}

#crosshair[data-charge="high"] {
  border-color: rgba(255, 200, 50, 0.9);
  transform: translate(-50%, -50%) scale(0.85);
}

#crosshair[data-charge="full"] {
  border-color: #ff6030;
  transform: translate(-50%, -50%) scale(0.75);
  box-shadow: 0 0 8px rgba(255, 96, 48, 0.7);
}

#gcd-ring,
#parry-ring {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 561;
  pointer-events: none;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

#gcd-ring {
  width: 44px;
  height: 44px;
  border: 1px solid transparent;
}

#gcd-ring.active {
  border-color: rgba(255, 210, 96, 0.38);
}

#parry-ring {
  width: 60px;
  height: 60px;
  border: 2px solid var(--mana);
  opacity: 0;
}

#parry-ring.active {
  opacity: 1;
}

#parry-ring.hold {
  border-color: var(--stamina);
}

#bow-charge,
#cast-bar {
  position: fixed;
  left: 50%;
  top: calc(50% + 52px);
  z-index: 570;
  width: 220px;
  height: 8px;
  margin-left: -110px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
}

#bow-charge.active,
#cast-bar.active {
  opacity: 1;
}

/* Bow charge fill color shifts as it reaches full */
#bow-charge .fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--stamina), var(--gold));
  transition: background 0.15s ease;
}

#bow-charge.mid .fill {
  background: linear-gradient(90deg, var(--stamina), #ffe090);
}

#bow-charge.full .fill {
  background: linear-gradient(90deg, var(--gold), #ffffff);
  box-shadow: 0 0 8px rgba(255, 210, 96, 0.8);
}

#cast-bar .fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--stamina), var(--gold));
}

#cast-bar {
  top: calc(50% + 70px);
}

#cast-bar .label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text);
  font: 900 8px/1 var(--font-mono);
}

/* Cast interrupted — brief red flash */
#cast-bar.interrupted {
  opacity: 1;
  border-color: var(--danger);
  animation: cast-interrupt 0.6s ease-out forwards;
}

@keyframes cast-interrupt {
  0%   { opacity: 1; border-color: var(--danger); }
  100% { opacity: 0; border-color: var(--line); }
}

#status-strip {
  position: fixed;
  left: 24px;
  bottom: 180px;
  z-index: 620;
  display: flex;
  gap: 6px;
}

.status-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
}

#round-hud {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 610;
  transform: translateX(-50%);
  min-width: 430px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.phase-label {
  color: var(--gold);
  font: 900 12px/1 var(--font-mono);
  text-transform: uppercase;
}

.countdown,
#round-timer {
  font: 900 22px/1 var(--font-hud);
}

/* Urgent: last 15 seconds — pulse red */
#round-timer.urgent {
  color: var(--danger);
  animation: timer-urgent-pulse 1s ease-in-out infinite;
}

@keyframes timer-urgent-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}

.pip-row {
  display: flex;
  gap: 4px;
}

.pip {
  width: 10px;
  height: 10px;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.pip.win {
  background: var(--gold);
}

#kill-feed,
#ping-hud {
  position: fixed;
  right: 18px;
  z-index: 610;
}

#ping-hud {
  top: 18px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text-soft);
  font: 900 10px/1 var(--font-mono);
}

#kill-feed {
  top: 68px;
  display: grid;
  gap: 6px;
}

.kill-entry {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  background: var(--panel);
  font: 800 11px/1 var(--font-mono);
  text-transform: uppercase;
  animation: entry-slide-in 0.25s ease-out;
}

@keyframes entry-slide-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Self was the killer: gold left accent */
.kill-entry.self-kill {
  border-left-color: var(--gold);
  background: rgba(255, 210, 96, 0.07);
}

/* Self died: danger red left accent */
.kill-entry.self-died {
  border-left-color: var(--danger);
  background: rgba(255, 51, 68, 0.07);
}

/* Icon span */
.kill-entry .k-icon {
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}

/* Name spans */
.kill-entry .kname {
  font: 800 11px/1 var(--font-mono);
  letter-spacing: 0.03em;
  color: var(--text-soft);
}

/* Self player name: gold highlight */
.kill-entry .kname.you {
  color: var(--gold);
  font-weight: 900;
}

/* Opponent name: subdued red */
.kill-entry .kname.enemy {
  color: #e8656f;
}

/* ── Kill splash — temporary full-screen center message ── */

.kill-splash {
  position: fixed;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  z-index: 760;
  pointer-events: none;
  font: 900 52px/1 var(--font-hud);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.8), 0 0 40px currentColor;
  animation: kill-splash-pop 1.6s ease-out forwards;
}

@keyframes kill-splash-pop {
  0%   { opacity: 0; transform: translate(-50%, -55%) scale(0.7); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  20%  { transform: translate(-50%, -50%) scale(1.0); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -46%) scale(0.95); }
}

/* Kill: gold */
.kill-splash.kill {
  color: var(--gold);
}

/* Died: red */
.kill-splash.died {
  color: var(--danger);
}

/* ── Kill streak display ── */

#streak-display {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 755;
  text-align: center;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

#streak-display.hidden {
  display: none !important;
}

.streak-count,
#streak-count {
  font: 900 34px/1 var(--font-hud);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(255, 210, 96, 0.5), 0 2px 20px rgba(0, 0, 0, 0.7);
  animation: streak-reveal 0.35s cubic-bezier(0.22, 0.68, 0, 1.3);
}

@keyframes streak-reveal {
  from { opacity: 0; transform: scale(0.5) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.streak-bonus,
#streak-bonus {
  color: var(--stamina);
  font: 800 12px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 0 12px rgba(0, 255, 136, 0.4);
}

/* Radial wheels */
.radial-menu {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 800;
  display: none;
  width: 280px;
  height: 280px;
  margin: -140px 0 0 -140px;
  pointer-events: none;
}

.radial-menu.open {
  display: block;
}

.radial-bg {
  position: absolute;
  inset: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 28%, rgba(4, 6, 11, 0.92) 29%);
}

.radial-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin: -23px 0 0 -23px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--panel-hard);
  color: var(--gold);
  font: 900 14px/1 var(--font-mono);
}

.radial-slot {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 3px;
  width: 76px;
  color: var(--text-soft);
  text-align: center;
}

.radial-slot[data-dir="top"] { top: 12px; left: 50%; transform: translateX(-50%); }
.radial-slot[data-dir="right"] { right: 12px; top: 50%; transform: translateY(-50%); }
.radial-slot[data-dir="bottom"] { bottom: 12px; left: 50%; transform: translateX(-50%); }
.radial-slot[data-dir="left"] { left: 12px; top: 50%; transform: translateY(-50%); }
.radial-slot[data-dir="top-right"] { top: 38px; right: 38px; }
.radial-slot[data-dir="bottom-right"] { right: 38px; bottom: 38px; }
.radial-slot[data-dir="bottom-left"] { left: 38px; bottom: 38px; }
.radial-slot[data-dir="top-left"] { left: 38px; top: 38px; }

.r-icon {
  font-size: 22px;
}

.r-key {
  color: var(--gold);
  font: 900 10px/1 var(--font-mono);
}

.r-name {
  max-width: 70px;
  overflow: hidden;
  font: 800 9px/1 var(--font-mono);
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.radial-slot.selected {
  color: var(--gold);
}

/* Currently primed slot: persistent highlight even when wheel is closed */
.radial-slot.r-primed .r-icon {
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(255, 210, 96, 0.4);
}

.radial-slot.r-primed .r-name {
  color: var(--gold);
}

/* Wheel has an active direction: fade out unselected slots */
.radial-menu.has-selection .radial-slot:not(.selected) {
  opacity: 0.45;
  transition: opacity 0.12s ease;
}

.radial-menu.has-selection .radial-slot.selected {
  transform: scale(1.08);
  transition: transform 0.1s ease, opacity 0.1s ease;
}

/* ─── Radial wheel slot internals ────────────────────────────────────── */

/* Icon container — fixed size so PNG fills correctly */
.r-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

/* Make the PNG img fill the icon box */
.r-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

/* Empty slot: subtle outline, no content */
.r-icon:empty {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}

/* Empty name label */
.r-name.r-empty {
  color: var(--muted);
  opacity: 0.45;
  font-style: italic;
}

/* Cooldown badge — shows remaining seconds next to the slot */
.r-cd {
  display: none;
  font: 900 10px/1 var(--font-mono);
  color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
}

.r-cd.r-cd-active {
  display: block;
  color: var(--gold);
}

/* On-cooldown state: dim the icon + name */
.radial-slot.r-on-cd .r-icon {
  filter: grayscale(80%) brightness(35%);
}

.radial-slot.r-on-cd .r-name {
  opacity: 0.4;
}

/* Selected slot on cooldown: still highlight but keep dim hint */
.radial-slot.selected.r-on-cd .r-icon {
  filter: grayscale(40%) brightness(60%);
}

/* Settings, pause, scoreboard, respawn */
#settings-overlay,
#pause-menu,
#scoreboard {
  position: fixed;
  inset: 0;
  z-index: 850;
  background: linear-gradient(90deg, rgba(4, 6, 11, 0.96), rgba(4, 6, 11, 0.68));
}

#settings-overlay {
  display: grid;
  place-items: center;
  padding: 34px;
  overflow-y: auto;
}

#settings-overlay h2 {
  margin: 0 0 18px;
  color: var(--gold);
  font: 900 34px/1 var(--font-hud);
  text-transform: uppercase;
}

.settings-panel,
.pause-panel,
.score-card,
#respawn .inner {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.settings-panel {
  width: min(880px, 100%);
  padding: 18px;
}

.setting-row {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 18px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.setting-label {
  color: var(--text-soft);
  font: 900 11px/1 var(--font-mono);
  text-transform: uppercase;
}

.quality-btns,
.setting-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quality-btn {
  min-height: 34px;
  padding: 0 12px;
  font: 900 11px/1 var(--font-hud);
  text-transform: uppercase;
}

.setting-control input[type="range"] {
  flex: 1;
  accent-color: var(--gold);
}

.setting-value {
  min-width: 72px;
  color: var(--gold);
  text-align: right;
  font: 900 16px/1 var(--font-hud);
}

.controls-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.controls-grid > div,
.keybind-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
  font-size: 12px;
}

.key,
.keybind-btn {
  min-width: 42px;
  min-height: 26px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--gold-soft);
  color: var(--gold);
  font: 900 10px/1 var(--font-mono);
  text-transform: uppercase;
}

#settings-back-btn {
  min-height: 38px;
  margin-top: 14px;
  padding: 0 18px;
}

#pause-menu {
  display: grid;
  place-items: center;
}

.pause-panel {
  width: min(440px, 92vw);
  padding: 28px;
}

.pause-eyebrow,
.pause-note {
  color: var(--text-soft);
  font: 800 11px/1.4 var(--font-mono);
  text-transform: uppercase;
}

.pause-panel h2 {
  margin: 8px 0 20px;
  color: var(--gold);
  font: 900 44px/1 var(--font-hud);
  text-transform: uppercase;
}

.pause-actions {
  display: grid;
  gap: 8px;
}

.pause-btn {
  min-height: 44px;
  padding: 0 14px;
  text-align: left;
  font: 900 15px/1 var(--font-hud);
  text-transform: uppercase;
}

.pause-note {
  margin-top: 14px;
}

.pause-controls {
  display: none;
}

#scoreboard {
  display: grid;
  place-items: center;
  text-align: center;
}

#scoreboard h2 {
  margin: 0;
  color: var(--gold);
  font: 900 34px/1 var(--font-hud);
}

.winner-name {
  margin: 10px 0 22px;
  font: 900 72px/1 var(--font-hud);
}

.scores {
  display: flex;
  gap: 18px;
  justify-content: center;
}

.score-card {
  min-width: 170px;
  padding: 18px;
}

.score-card .who {
  color: var(--text-soft);
  font: 900 11px/1 var(--font-mono);
}

.score-card .wins {
  color: var(--gold);
  font: 900 72px/1 var(--font-hud);
}

#scoreboard-back {
  min-height: 44px;
  margin-top: 22px;
  padding: 0 22px;
}

#respawn {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: none;
  place-items: center;
  background: rgba(0, 0, 0, 0.58);
}

#respawn.active {
  display: grid;
}

#respawn .inner {
  width: min(420px, 92vw);
  padding: 28px;
  text-align: center;
}

#respawn h2 {
  margin: 0 0 10px;
  color: var(--danger);
  font: 900 54px/1 var(--font-hud);
}

#respawn p {
  margin: 4px 0;
  color: var(--text-soft);
  font: 800 13px/1.5 var(--font-mono);
}

#respawn #respawn-sec {
  color: var(--gold);
  font-weight: 900;
}

#respawn #respawn-killer {
  color: var(--muted);
  font: 800 11px/1 var(--font-mono);
  text-transform: uppercase;
}

#respawn .tips {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: 800 11px/1.5 var(--font-mono);
  text-align: left;
}

/* Feedback overlays */
#server-toast,
#hint {
  position: fixed;
  left: 50%;
  bottom: 118px;
  z-index: 750;
  transform: translateX(-50%);
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: 900 11px/1 var(--font-mono);
  text-transform: uppercase;
}

/* Server toast severity states */
#server-toast.warn {
  border-color: rgba(255, 210, 96, 0.4);
  color: var(--gold);
}

#server-toast.error {
  border-color: rgba(255, 51, 68, 0.5);
  color: var(--danger);
}

#server-toast.info {
  border-color: rgba(0, 208, 255, 0.35);
  color: #00d0ff;
}

/* Resource flash: bar flashes red when ability fails due to cost */
#hud-mana.flash-cost,
#hud-stam.flash-cost {
  animation: resource-flash 0.4s ease-out;
}

@keyframes resource-flash {
  0%   { filter: brightness(1) drop-shadow(0 0 0 transparent); }
  40%  { filter: brightness(2.2) drop-shadow(0 0 6px rgba(255, 51, 68, 0.8)); }
  100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
}

/* GCD ring pulse on GCD-blocked activation */
#gcd-ring.pulse {
  animation: gcd-pulse 0.3s ease-out forwards;
}

@keyframes gcd-pulse {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.8; }
  50%  { transform: translate(-50%, -50%) scale(1.35); opacity: 1;   }
  100% { transform: translate(-50%, -50%) scale(1);   opacity: 0.38; }
}

/* Status strip CC-lock: shake to signal crowd-control */
#status-strip.cc-locked {
  animation: cc-shake 0.5s ease;
}

@keyframes cc-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-5px); }
  45% { transform: translateX(5px); }
  70% { transform: translateX(-3px); }
  90% { transform: translateX(2px); }
}

#debug {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 4;
  padding: 8px 10px;
  border: 1px solid rgba(0, 255, 136, 0.25);
  border-radius: 4px;
  background: rgba(4, 6, 11, 0.84);
  color: var(--stamina);
  font: 800 11px/1.45 var(--font-mono);
}

#popups,
#damage-flash,
#parry-flash,
#heal-flash,
#combo-flash,
#combo-popup,
#low-hp-vignette,
#blind-vignette,
#death-overlay,
#shoot-flash,
#weapon-banner,
.hit-dir {
  pointer-events: none;
}

/* ================================================================
   VISUAL FEEDBACK OVERLAYS
   All elements are full-viewport, transparent by default.
   ================================================================ */

/* ── Directional hit indicators ─────────────────────────────────── */
.hit-dir {
  position: fixed;
  z-index: 730;
  opacity: 0;
}

.hit-dir[data-dir="top"] {
  top: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to bottom, rgba(255, 30, 30, 0.55), transparent);
}

.hit-dir[data-dir="bottom"] {
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to top, rgba(255, 30, 30, 0.55), transparent);
}

.hit-dir[data-dir="left"] {
  top: 0; left: 0; bottom: 0;
  width: 120px;
  background: linear-gradient(to right, rgba(255, 30, 30, 0.55), transparent);
}

.hit-dir[data-dir="right"] {
  top: 0; right: 0; bottom: 0;
  width: 120px;
  background: linear-gradient(to left, rgba(255, 30, 30, 0.55), transparent);
}

.hit-dir.flash {
  animation: hit-dir-flash 0.45s ease-out forwards;
}

@keyframes hit-dir-flash {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Damage flash (red screen edge when hit) ────────────────────── */
/* Uses add→reflow→remove pattern: transition-based (no animation) */
#damage-flash {
  position: fixed;
  inset: 0;
  z-index: 731;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(200, 0, 0, 0.55) 100%);
  /* Slow fade-out when .active is removed */
  transition: opacity 0.5s ease-out;
}

#damage-flash.active {
  opacity: 1;
  /* Instant show when .active is added */
  transition: opacity 0s;
}

/* ── Shoot flash (brief centre glow on firing) ──────────────────── */
/* Uses remove→reflow→add pattern: animation-based */
#shoot-flash {
  position: fixed;
  inset: 0;
  z-index: 570;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.18) 0%, transparent 60%);
}

#shoot-flash.fire {
  animation: opacity-flash 0.22s ease-out forwards;
}

/* ── Parry flash (teal burst when parry lands) ──────────────────── */
/* Uses add→reflow→remove pattern: transition-based */
#parry-flash {
  position: fixed;
  inset: 0;
  z-index: 730;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(100, 220, 255, 0.3) 0%, transparent 55%);
  transition: opacity 0.4s ease-out;
}

#parry-flash.active {
  opacity: 1;
  transition: opacity 0s;
}

/* ── Heal flash (green glow from below) ─────────────────────────── */
/* Uses add→reflow→remove pattern: transition-based */
#heal-flash {
  position: fixed;
  inset: 0;
  z-index: 729;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 120%, rgba(80, 255, 140, 0.4) 0%, transparent 55%);
  transition: opacity 0.55s ease-out;
}

#heal-flash.active {
  opacity: 1;
  transition: opacity 0s;
}

/* ── Combo flash (golden burst at screen center) ────────────────── */
/* Uses add→reflow→remove pattern: transition-based */
#combo-flash {
  position: fixed;
  inset: 0;
  z-index: 728;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 210, 96, 0.38) 0%, transparent 50%);
  transition: opacity 0.5s ease-out;
}

#combo-flash.active {
  opacity: 1;
  transition: opacity 0s;
}

/* Shared animation for opacity-only flashes */
@keyframes opacity-flash {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Low HP vignette (pulsing red border) ───────────────────────── */
#low-hp-vignette {
  position: fixed;
  inset: 0;
  z-index: 725;
  opacity: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(180, 0, 0, 0.55) 100%);
  transition: opacity 0.4s ease;
}

#low-hp-vignette.active {
  opacity: 1;
  animation: hp-warn-pulse 1.5s ease-in-out infinite;
}

@keyframes hp-warn-pulse {
  0%, 100% { opacity: 0.65; }
  50%       { opacity: 1; }
}

/* ── Blind vignette (black ink wipe) ────────────────────────────── */
#blind-vignette {
  position: fixed;
  inset: 0;
  z-index: 726;
  opacity: 0;
  background: rgba(0, 0, 0, 0.82);
  transition: opacity 0.25s ease;
}

#blind-vignette.active {
  opacity: 1;
}

/* ── Death overlay (full black dim — separate from respawn UI) ───── */
#death-overlay {
  position: fixed;
  inset: 0;
  z-index: 724;
  opacity: 0;
  background: rgba(0, 0, 0, 0.55);
  transition: opacity 0.35s ease;
}

#death-overlay.active {
  opacity: 1;
}

/* ── Weapon swap banner ─────────────────────────────────────────── */
#weapon-banner {
  position: fixed;
  left: 50%;
  top: calc(50% - 72px);
  z-index: 732;
  transform: translateX(-50%) translateY(-8px);
  padding: 6px 18px;
  border: 1px solid rgba(255, 210, 96, 0.35);
  border-radius: 6px;
  background: rgba(8, 10, 18, 0.85);
  color: var(--gold);
  font: 900 16px/1 var(--font-hud);
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0;
  pointer-events: none;
}

#weapon-banner.active {
  animation: weapon-banner-show 1.2s ease-out forwards;
}

@keyframes weapon-banner-show {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  70%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-4px); }
}

/* ── Combo popup (combo proc label) ────────────────────────────── */
#combo-popup {
  position: fixed;
  left: 50%;
  top: calc(50% - 100px);
  z-index: 733;
  transform: translateX(-50%);
  color: var(--gold);
  font: 900 18px/1 var(--font-hud);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 12px rgba(255, 210, 96, 0.7), 0 2px 8px #000;
  opacity: 0;
  pointer-events: none;
}

#combo-popup.pop {
  animation: combo-pop 0.9s ease-out forwards;
}

@keyframes combo-pop {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.8) translateY(6px); }
  18%  { opacity: 1; transform: translateX(-50%) scale(1.08) translateY(0); }
  55%  { opacity: 1; transform: translateX(-50%) scale(1) translateY(-4px); }
  100% { opacity: 0; transform: translateX(-50%) scale(0.95) translateY(-12px); }
}

/* ── Damage / combat popups ─────────────────────────────────────── */

#popups {
  position: fixed;
  inset: 0;
  z-index: 720;
}

.popup {
  position: absolute;
  color: var(--gold);
  font: 900 22px/1 var(--font-hud);
  text-shadow: 0 2px 10px #000;
  animation: popup-float 0.9s ease-out forwards;
  white-space: nowrap;
}

@keyframes popup-float {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-42px); }
}

/* Inbound damage: red, floats up */
.popup.inbound {
  color: var(--danger);
  font-size: 18px;
}

/* Parried: dimmed, smaller */
.popup.parried {
  color: var(--muted);
  font-size: 14px;
}

/* Big hit: larger, brighter */
.popup.big {
  font-size: 28px;
  color: #fff;
  text-shadow: 0 0 16px var(--gold), 0 2px 12px #000;
}

/* Air-punish: teal */
.popup.air-punish {
  color: #9adfff;
}

/* ================================================================
   PROFILE BAR — barra orizzontale integrata
   ================================================================ */

/* Grid a 2 righe (il pannello ora è dentro mm-center) */
#main-menu {
  grid-template-rows: minmax(0, 1fr) auto;
}

.mm-center {
  grid-row: 1 / 2;
}

.mm-foot-row {
  grid-row: 2 / 3;
}

/* Barra orizzontale compatta — niente floating, niente fixed */
#menu-loadout-preview {
  position: static;
  transform: none;
  right: auto;
  top: auto;
  bottom: auto;
  left: auto;
  z-index: auto;
  width: 100%;
  background: rgba(7, 9, 16, 0.72);
  border: 1px solid rgba(145, 170, 220, 0.14);
  border-radius: 6px;
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  padding: 0;
  min-height: 52px;
  overflow: visible;
}

/* Ogni sezione diretta ha padding orizzontale */
.profile-card-floating > * {
  padding: 0 12px;
}

/* Separatori verticali */
.profile-card-floating > .pc-sep {
  padding: 0;
  width: 1px;
  height: 30px;
  background: rgba(145, 170, 220, 0.12);
  flex-shrink: 0;
}

/* ── Avatar + nome input ───────────────────────────────────── */
.pc-head {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}

.profile-card-floating .pc-avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 4px;
  border: 1px solid rgba(255, 210, 96, 0.28);
  background: rgba(255, 210, 96, 0.06);
  color: var(--gold);
  font: 900 15px/1 var(--font-hud);
  display: grid;
  place-items: center;
}

.pc-ident {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.pc-name-field {
  position: relative;
  display: flex;
  align-items: center;
}

.pc-name-input {
  width: 110px;
  height: 26px;
  padding: 0 22px 0 6px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(145, 170, 220, 0.18);
  border-radius: 4px;
  color: var(--text);
  font: 900 12px/1 var(--font-hud);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: border-color 0.15s;
}

.pc-name-input:focus {
  outline: none;
  border-color: rgba(255, 210, 96, 0.5);
}

.pc-name-input::placeholder {
  color: var(--muted);
  font: 800 10px/1 var(--font-mono);
  text-transform: none;
  letter-spacing: 0;
}

.pc-name-saved {
  position: absolute;
  right: 6px;
  color: var(--stamina);
  font-size: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.pc-name-saved.visible {
  opacity: 1;
}

.pc-name-sub {
  color: var(--muted);
  font: 800 8px/1 var(--font-mono);
  text-transform: uppercase;
}

/* Separator (verticale nella barra orizzontale) */
.pc-sep {
  height: 1px;
  background: rgba(145, 170, 220, 0.1);
}

/* ── Stats — 3 box inline ──────────────────────────────────── */
.profile-card-floating .pc-stats-row {
  display: flex;
  gap: 5px;
  margin-left: 0;
  border-left: none;
  padding-left: 0;
  flex-shrink: 0;
}

.profile-card-floating .pc-stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 5px 8px;
  border-radius: 4px;
  border: 1px solid rgba(145, 170, 220, 0.13);
  background: rgba(0, 0, 0, 0.2);
  min-width: 42px;
}

.pc-stat-lbl {
  color: var(--muted);
  font: 800 7px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pc-stat-val {
  color: var(--text);
  font: 900 15px/1 var(--font-hud);
}

/* ── Rank badge — inline orizzontale ──────────────────────── */
.profile-card-floating .rank-badge {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
}

.profile-card-floating .rank-badge-top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.profile-card-floating .rank-icon {
  font-size: 16px;
  line-height: 1;
}

.rank-badge-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.profile-card-floating .rank-name {
  color: var(--rank-color, var(--text-soft));
  font: 900 13px/1 var(--font-hud);
  text-transform: uppercase;
  white-space: nowrap;
}

.rank-subtitle {
  color: var(--muted);
  font: 800 8px/1.2 var(--font-mono);
  text-transform: uppercase;
  display: none; /* compatto in barra orizzontale */
}

.profile-card-floating .rank-progress-track {
  width: 50px;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  display: block;
  flex-shrink: 0;
}

.profile-card-floating .rank-progress-fill {
  height: 100%;
  background: var(--rank-color, var(--gold));
  transition: width 0.4s ease;
}

.profile-card-floating .rank-next-label {
  color: var(--muted);
  font: 800 8px/1 var(--font-mono);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Auth + loadout: gruppo a destra ──────────────────────── */
.pc-right-group {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  flex-shrink: 0;
}

.profile-card-floating #profile-auth-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

/* Auth logged-out: form compatto inline */
.profile-card-floating .auth-logged-out-form {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

.profile-card-floating .auth-input {
  height: 26px;
  width: 90px !important;
  padding: 0 6px;
  font: 800 10px/1 var(--font-mono);
  border-radius: 3px;
}

.profile-card-floating .auth-buttons-row {
  display: flex;
  gap: 4px;
}

.profile-card-floating .auth-btn {
  height: 26px;
  padding: 0 8px;
  font: 900 9px/1 var(--font-hud);
  flex: none;
}

.profile-card-floating .auth-oauth-divider {
  display: none; /* nascosto nella barra compatta */
}

.profile-card-floating .btn-google-oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 26px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-soft);
  font: 900 9px/1 var(--font-hud);
  text-transform: uppercase;
  border-radius: 3px;
  white-space: nowrap;
}

.profile-card-floating .btn-google-oauth:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--text);
}

.profile-card-floating .btn-google-oauth svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Auth logged-in: email + logout inline */
.profile-card-floating .auth-logged-in-status {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font: 800 9px/1 var(--font-mono);
  text-transform: uppercase;
  color: var(--text-soft);
}

.profile-card-floating .auth-logout-btn {
  height: 24px;
  padding: 0 8px;
  border-radius: 3px;
}

/* Loadout status inline */
.profile-card-floating .pc-loadout-status {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 4px;
  font: 900 9px/1 var(--font-hud);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ================================================================
   MODE TILE COLOR VARIANTS
   ================================================================ */

.mode-tile--pvp::before {
  background: var(--gold);
  box-shadow: 2px 0 10px rgba(255, 210, 96, 0.5);
}

.mode-tile--pvp .mode-tile-icon {
  border-color: rgba(255, 210, 96, 0.3);
  background: rgba(255, 210, 96, 0.07);
  color: var(--gold);
}

.mode-tile--pvp:hover:not(:disabled):not(.locked) .mode-tile-name {
  color: var(--gold);
}

.mode-tile--ffa::before {
  background: var(--danger);
  box-shadow: 2px 0 10px rgba(255, 51, 68, 0.5);
}

.mode-tile--ffa .mode-tile-glow {
  background:
    linear-gradient(90deg, rgba(255, 51, 68, 0.1), transparent 52%),
    radial-gradient(circle at 88% 18%, rgba(255, 51, 68, 0.06), transparent 30%);
}

.mode-tile--ffa .mode-tile-icon {
  border-color: rgba(255, 51, 68, 0.3);
  background: rgba(255, 51, 68, 0.07);
  color: #ff6b7a;
}

.mode-tile--ffa:hover:not(:disabled):not(.locked) .mode-tile-name {
  color: #ff6b7a;
}

.mode-tile--training::before {
  background: var(--mana);
  box-shadow: 2px 0 10px rgba(0, 208, 255, 0.4);
}

.mode-tile--training .mode-tile-glow {
  background:
    linear-gradient(90deg, rgba(0, 208, 255, 0.09), transparent 52%),
    radial-gradient(circle at 88% 18%, rgba(0, 208, 255, 0.05), transparent 30%);
}

.mode-tile--training .mode-tile-icon {
  border-color: rgba(0, 208, 255, 0.28);
  background: rgba(0, 208, 255, 0.06);
  color: var(--mana);
}

.mode-tile--training:hover:not(:disabled):not(.locked) .mode-tile-name {
  color: var(--mana);
}

/* ================================================================
   CORNER TAG BADGES
   ================================================================ */

.mode-tile-tag {
  position: absolute;
  top: 7px;
  right: 8px;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(255, 210, 96, 0.12);
  border: 1px solid rgba(255, 210, 96, 0.28);
  color: var(--gold);
  font: 800 8px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  z-index: 2;
  pointer-events: none;
}

.mode-tile-tag--red {
  background: rgba(255, 51, 68, 0.12);
  border-color: rgba(255, 51, 68, 0.28);
  color: #ff7a84;
}

.mode-tile-tag--cyan {
  background: rgba(0, 208, 255, 0.1);
  border-color: rgba(0, 208, 255, 0.28);
  color: var(--mana);
}

/* ================================================================
   ANIMATIONS — forge CTA + training available
   ================================================================ */

@keyframes rq-cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 96, 0); }
  50%       { box-shadow: 0 0 22px 3px rgba(255, 210, 96, 0.2); }
}

.forge-tile--cta {
  border-color: rgba(255, 210, 96, 0.72) !important;
  animation: rq-cta-pulse 2.2s ease-in-out infinite;
}

@keyframes rq-available-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); }
  50%       { box-shadow: 0 0 14px 2px rgba(0, 255, 136, 0.12); }
}

.mode-tile--available {
  animation: rq-available-pulse 2.4s ease-in-out infinite;
}

.mode-tile--available::before {
  background: var(--stamina) !important;
}

/* ================================================================
   FOOTER — version + server status
   ================================================================ */

.menu-version {
  margin-left: auto;
  color: var(--muted);
  font: 800 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#menu-server-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 800 10px/1 var(--font-mono);
  text-transform: uppercase;
  color: var(--muted);
}

#menu-server-status .server-status-dot {
  font-size: 7px;
}

#menu-server-status.status-connected     { color: #9be39b; }
#menu-server-status.status-connecting    { color: #e4c05a; }
#menu-server-status.status-disconnected,
#menu-server-status.status-offline       { color: rgba(168, 168, 188, 0.45); }

/* ================================================================
   UTIL BUTTON EXTRAS
   ================================================================ */

.util-btn-icon {
  font-size: 15px;
  opacity: 0.7;
}

@media (min-width: 1181px) and (max-width: 1380px) {
  #main-menu {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding: clamp(18px, 2.2vw, 34px);
    overflow-y: auto;
  }

  .mm-center {
    grid-column: 1 / 13;
    align-self: center;
    justify-self: center;
    gap: 12px;
  }

  .rq-menu-brand img {
    width: min(390px, 100%);
  }

  .mode-tile,
  .forge-tile {
    min-height: 76px;
    padding: 13px;
  }

  .mode-tile--mini {
    min-height: 58px;
  }

  .forge-tile--hero {
    min-height: 84px;
  }

  #ls-body {
    grid-template-columns: minmax(500px, 0.42fr) minmax(560px, 1fr);
  }

  .pool-grid {
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  }

  #combat-console {
    left: calc(50% + 120px);
    min-width: 650px;
    width: min(760px, calc(100vw - 420px));
  }
}

/* ================================================================
   MENU — usa più spazio della pagina (viewport reale ~2560px)
   ================================================================ */

/* Contenitore centrale ampio — usa fino a 1700px */
.mm-center {
  max-width: clamp(900px, 68vw, 1700px);
  gap: clamp(16px, 1.8vw, 32px);
}

/* Logo proporzionato al viewport */
.rq-menu-brand img {
  width: min(clamp(440px, 28vw, 760px), 90%);
}

/* Tagline */
.tagline {
  font: 900 clamp(14px, 0.9vw, 20px)/1 var(--font-mono);
  letter-spacing: 0.14em;
}

/* Tile modalità: altezza proporzionale, icone più grandi */
.mode-tile,
.forge-tile {
  min-height: clamp(100px, 9.5vh, 165px);
  padding: clamp(16px, 1.5vw, 26px);
}

.mode-tile-icon,
.forge-tile-icon {
  width: clamp(44px, 3.6vw, 66px);
  height: clamp(44px, 3.6vw, 66px);
  font-size: clamp(22px, 1.8vw, 32px);
}

.mode-tile-name,
.forge-tile-name {
  font: 900 clamp(14px, 1.3vw, 20px)/1 var(--font-hud);
}

.mode-tile-sub,
.forge-tile-sub {
  font: 700 clamp(9px, 0.6vw, 13px)/1.3 var(--font-mono);
}

/* Forge tile hero */
.forge-tile--hero {
  grid-template-columns: clamp(66px, 4.8vw, 90px) minmax(0, 1fr) clamp(28px, 2vw, 40px);
  min-height: clamp(90px, 8.5vh, 152px);
}

/* Sub-menu training */
.mode-tile--mini {
  min-height: clamp(64px, 6vh, 100px);
}

/* ================================================================
   PROFILE BAR — scala con il viewport (era fisso 52px su 2560px)
   ================================================================ */

/* Altezza barra — più respiro */
#menu-loadout-preview {
  min-height: clamp(64px, 8vh, 110px);
}

/* Avatar */
.profile-card-floating .pc-avatar {
  width: clamp(40px, 4vh, 60px);
  height: clamp(40px, 4vh, 60px);
  font: 900 clamp(17px, 1.8vh, 26px)/1 var(--font-hud);
}

/* Nome input */
.pc-name-input {
  width: clamp(130px, 11vw, 210px);
  height: clamp(28px, 3vh, 46px);
  font: 900 clamp(12px, 1.3vh, 18px)/1 var(--font-hud);
}

.pc-name-sub {
  font: 800 clamp(9px, 0.85vh, 13px)/1 var(--font-mono);
}

/* Box statistiche ELO/W/L */
.profile-card-floating .pc-stat-box {
  min-width: clamp(50px, 4.5vw, 82px);
  padding: clamp(5px, 0.7vh, 11px) clamp(8px, 0.9vw, 16px);
}

.pc-stat-lbl {
  font: 800 clamp(9px, 0.85vh, 13px)/1 var(--font-mono);
}

.pc-stat-val {
  font: 900 clamp(16px, 1.8vh, 28px)/1 var(--font-hud);
}

/* Rank */
.profile-card-floating .rank-icon {
  font-size: clamp(18px, 1.9vh, 30px);
}

.profile-card-floating .rank-name {
  font: 900 clamp(14px, 1.4vh, 22px)/1 var(--font-hud);
}

.profile-card-floating .rank-next-label {
  font: 800 clamp(9px, 0.85vh, 13px)/1 var(--font-mono);
}

.profile-card-floating .rank-progress-track {
  width: clamp(48px, 4.5vw, 90px);
  height: clamp(3px, 0.35vh, 5px);
}

/* Auth input e bottoni */
.profile-card-floating .auth-input {
  height: clamp(26px, 2.8vh, 42px) !important;
  width: clamp(80px, 7vw, 140px) !important;
  font: 800 clamp(9px, 0.9vh, 14px)/1 var(--font-mono);
}

.profile-card-floating .auth-btn {
  height: clamp(26px, 2.8vh, 42px);
  font: 900 clamp(8px, 0.8vh, 13px)/1 var(--font-hud);
  padding: 0 clamp(6px, 0.7vw, 13px);
}

.profile-card-floating .btn-google-oauth {
  height: clamp(26px, 2.8vh, 42px);
  font: 900 clamp(8px, 0.8vh, 13px)/1 var(--font-hud);
  padding: 0 clamp(6px, 0.7vw, 13px);
}

.profile-card-floating .btn-google-oauth svg {
  width: clamp(11px, 1.1vh, 18px);
  height: clamp(11px, 1.1vh, 18px);
}

/* Loadout status */
.profile-card-floating .pc-loadout-status {
  font: 900 clamp(8px, 0.8vh, 13px)/1 var(--font-hud);
  padding: clamp(3px, 0.4vh, 7px) clamp(6px, 0.7vw, 12px);
}

/* Separatori verticali */
.profile-card-floating > .pc-sep {
  height: clamp(28px, 2.8vh, 48px);
}

#menu-loadout-preview {
  min-height: clamp(92px, 9vh, 132px);
}

/* ================================================================
   STATUS OVERLAY — kill-fade keyframe (used inline by status-overlay.ts)
   ================================================================ */

@keyframes kill-fade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ================================================================
   SCOREBOARD — renderScoreboard() output classes
   ================================================================ */

/* Shell: fills #scoreboard (position: fixed; inset: 0; display: grid; place-items: center) */
.scoreboard-shell {
  width: min(860px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  backdrop-filter: blur(18px);
}

/* Header: arena / WIN text on left, match meta on right */
.sb-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.sb-winner {
  color: var(--gold);
  font: 800 11px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 6px;
}

.sb-title {
  font: 900 54px/1 var(--font-hud);
  text-transform: uppercase;
  color: var(--text);
}

.sb-title .ele {
  color: var(--gold);
}

.sb-meta {
  text-align: right;
  color: var(--text-soft);
  font: 800 12px/1.7 var(--font-mono);
  text-transform: uppercase;
}

.sb-meta b {
  color: var(--text);
  font-size: 18px;
  font-family: var(--font-hud);
}

/* Body: two player columns with VS in the middle */
.sb-body {
  display: flex;
  gap: 0;
  align-items: stretch;
}

.sb-player {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.22);
}

.sb-player.lose {
  opacity: 0.7;
  border-color: rgba(145, 170, 220, 0.08);
  background: rgba(0, 0, 0, 0.12);
}

.sb-nm {
  font: 900 24px/1 var(--font-hud);
  text-transform: uppercase;
  margin-bottom: 3px;
}

.sb-tag {
  color: var(--muted);
  font: 800 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 12px;
}

.sb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid rgba(145, 170, 220, 0.07);
  font: 800 12px/1 var(--font-mono);
}

.sb-row .l {
  color: var(--text-soft);
  text-transform: uppercase;
}

.sb-row .v {
  color: var(--text);
  font: 900 14px/1 var(--font-hud);
}

.sb-row.sub {
  padding-left: 10px;
  opacity: 0.75;
}

.sb-row.sub .l {
  font-size: 11px;
}

.sb-abilities-header {
  color: var(--gold);
  font: 800 9px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 10px 0 4px;
}

.sb-vs {
  flex: 0 0 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 900 18px/1 var(--font-hud);
  color: var(--muted);
}

/* Footer: ELO + key hints */
.sb-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.sb-elo {
  color: var(--text-soft);
  font: 800 12px/1 var(--font-mono);
  text-transform: uppercase;
}

.sb-elo b {
  color: var(--gold);
  font-family: var(--font-hud);
  font-size: 16px;
}

.sb-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sb-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-soft);
  font: 800 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sb-chip.primary {
  border-color: rgba(255, 210, 96, 0.35);
  background: var(--gold-soft);
  color: var(--gold);
}

/* ================================================================
   DEATHCAM — renderDeathcam() output classes
   ================================================================ */

/* Shell: covers full viewport (escapes the grid-centering of #respawn) */
.deathcam-shell {
  position: fixed;
  inset: 0;
  z-index: 701;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.72);
}

/* Atmospheric silhouette + glow behind content */
.dc-killer-silhouette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 90% at 50% 115%, rgba(180, 20, 20, 0.18) 0%, transparent 65%),
    linear-gradient(to top, rgba(180, 20, 20, 0.12) 0%, transparent 40%);
  pointer-events: none;
}

.dc-killer-glow {
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(ellipse at center, rgba(220, 30, 30, 0.18), transparent 65%);
  pointer-events: none;
  filter: blur(12px);
}

/* Main overlay content */
.dc-overlay {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 0 20px;
  width: min(700px, 94vw);
}

/* Banner: ELIMINATED + killer info */
.dc-banner {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dc-eliminated {
  font: 900 72px/1 var(--font-hud);
  text-transform: uppercase;
  color: var(--danger);
  letter-spacing: 0.06em;
  text-shadow: 0 0 40px rgba(255, 51, 68, 0.5), 0 2px 24px rgba(0, 0, 0, 0.8);
}

.dc-by {
  font: 800 13px/1.6 var(--font-mono);
  text-transform: uppercase;
  color: var(--text-soft);
  letter-spacing: 0.08em;
}

.dc-by b {
  color: var(--text);
  font-family: var(--font-hud);
  font-size: 20px;
  font-weight: 900;
  display: block;
  margin: 4px 0 6px;
}

.dc-tape {
  display: inline-block;
  padding: 3px 12px;
  background: rgba(255, 51, 68, 0.14);
  border: 1px solid rgba(255, 51, 68, 0.3);
  border-radius: 3px;
  color: #ff8a93;
  font: 800 11px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Bottom stat cards */
.dc-bottom {
  display: flex;
  gap: 10px;
  width: 100%;
}

.dc-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
}

.dc-card.death {
  border-color: rgba(255, 51, 68, 0.28);
  background: rgba(255, 51, 68, 0.06);
}

.dc-card .l {
  color: var(--muted);
  font: 800 9px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.dc-card .v {
  font: 900 24px/1 var(--font-hud);
  color: var(--text);
}

.dc-card .v.blood {
  color: var(--danger);
}

.dc-card .v.brass {
  color: var(--gold);
}

.dc-card .meta {
  color: var(--text-soft);
  font: 800 10px/1.3 var(--font-mono);
  text-transform: uppercase;
}

/* Skip hint */
.dc-replay {
  position: absolute;
  bottom: 24px;
  right: 28px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font: 800 11px/1 var(--font-mono);
  text-transform: uppercase;
}

.dc-replay .k {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 22px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--gold-soft);
  color: var(--gold);
  font: 900 10px/1 var(--font-mono);
}

/* Watermark */
.dc-watermark {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(145, 170, 220, 0.18);
  font: 800 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  pointer-events: none;
  white-space: nowrap;
}

/* ================================================================
   KEYBIND BUTTON — listening state (waiting for key press)
   ================================================================ */

@keyframes listen-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 96, 0.4); }
  50%       { box-shadow: 0 0 0 4px rgba(255, 210, 96, 0.15); }
}

.keybind-btn.listening {
  border-color: var(--gold);
  background: rgba(255, 210, 96, 0.18);
  color: var(--text);
  animation: listen-pulse 1s ease-in-out infinite;
}

/* ================================================================
   LOADOUT STATION — build-locked state
   ================================================================ */

/* When in-combat build lock is active: tint the pool and add warning */
#loadout-station.build-locked #ls-pool {
  pointer-events: none;
  opacity: 0.55;
  filter: saturate(0.4);
  position: relative;
}

#loadout-station.build-locked #ls-pool::after {
  content: 'LOCKED IN COMBAT';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 900 18px/1 var(--font-hud);
  text-transform: uppercase;
  color: var(--danger);
  letter-spacing: 0.12em;
  background: rgba(255, 51, 68, 0.06);
  border: 1px solid rgba(255, 51, 68, 0.2);
  border-radius: var(--radius);
  pointer-events: none;
  z-index: 10;
}

/* ================================================================
   CLASS SELECTOR — portrait full-bleed redesign
   Le card mostrano l'immagine del personaggio che riempie tutta
   la card, con il testo sovrapposto in basso su un gradiente scuro.
   ================================================================ */

#ls-class-selector {
  min-height: 148px;
  align-items: stretch;
}

/* Layout portrait: flex colonna, immagine come sfondo assoluto */
.class-select-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  min-height: 148px !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 6px;
  /* annulla il grid layout precedente */
  grid-template-columns: unset !important;
  grid-template-areas: unset !important;
  grid-template-rows: unset !important;
}

/* Rimuovi la barra sinistra dorata — il portrait la coprirebbe */
.class-select-card::before {
  display: none !important;
}

/* Gradiente scuro in basso, sopra al portrait, sotto al testo */
.class-select-card::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 100%;
  background: linear-gradient(
    0deg,
    rgba(4, 6, 14, 0.97) 0%,
    rgba(4, 6, 14, 0.62) 35%,
    rgba(4, 6, 14, 0.18) 65%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Stato attivo: gradiente leggermente più trasparente per far vedere meglio il portrait */
.class-select-card.active::after {
  background: linear-gradient(
    0deg,
    rgba(4, 6, 14, 0.93) 0%,
    rgba(4, 6, 14, 0.5) 35%,
    rgba(4, 6, 14, 0.1) 65%,
    transparent 100%
  );
  left: 0; right: 0; bottom: 0; height: 100%;
}

/* Portrait image — copre tutta la card */
.class-select-card .card-banner {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  opacity: 0.78;
  transition: opacity 0.2s ease;
  z-index: 0;
  display: block !important;
}

.class-select-card:hover .card-banner,
.class-select-card.active .card-banner {
  opacity: 1;
}

/* Testo: sopra al gradiente, in basso */
.class-select-card .card-title,
.class-select-card .card-desc {
  position: relative !important;
  z-index: 2;
  padding-left: 10px !important;
  padding-right: 8px !important;
  grid-area: unset !important;
  overflow: visible !important;
  white-space: nowrap;
  max-height: unset !important;
}

.class-select-card .card-title {
  font: 900 clamp(13px, 1.15vw, 17px)/1 var(--font-hud) !important;
  color: var(--text);
  padding-top: 3px !important;
}

.class-select-card .card-desc {
  font: 800 9px/1.2 var(--font-mono) !important;
  color: var(--text-soft);
  padding-bottom: 10px !important;
  padding-top: 3px !important;
  text-transform: uppercase;
}

/* ================================================================
   POOL CARD — redesign gerarchia visiva
   - Type badge colorato per archetipo (DANNO/CC/MOBILITA/etc.)
   - Nome grande e leggibile
   - Tag con icone e colori distinti per categoria
   - Descrizione 4 righe con keyword colorate
   ================================================================ */

/* pool-nature: contiene type badge + nome in colonna */
.pool-nature {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  align-self: start !important;
  min-width: 0;
}

/* Type badge — pill colorata che identifica l'archetipo */
.pool-type-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 3px 10px;
  border-radius: 3px;
  font: 900 8px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.ptype-danno      { background: rgba(220,60,40,.28);  border:1px solid rgba(255,100,70,.65); color:#ff9070; }
.ptype-controllo,
.ptype-cc-area    { background: rgba(130,50,220,.28); border:1px solid rgba(180,100,255,.65); color:#c888ff; }
.ptype-mob-cc     { background: rgba(40,160,120,.24); border:1px solid rgba(60,210,160,.6);  color:#50e8b8; }
.ptype-mobilita   { background: rgba(40,180,80,.24);  border:1px solid rgba(60,220,100,.6);  color:#50e870; }
.ptype-recupero   { background: rgba(30,160,160,.22); border:1px solid rgba(50,210,210,.55); color:#40d8d8; }
.ptype-zona       { background: rgba(200,110,30,.22); border:1px solid rgba(240,150,60,.55); color:#f0a040; }
.ptype-drenaggio  { background: rgba(110,30,150,.22); border:1px solid rgba(160,60,210,.55); color:#b060e0; }
.ptype-proiettile { background: rgba(30,110,220,.22); border:1px solid rgba(70,160,255,.55); color:#60b8ff; }
.ptype-stato      { background: rgba(180,140,30,.22); border:1px solid rgba(220,180,50,.55); color:#d8b840; }
.ptype-utility    { background: rgba(90,100,130,.18); border:1px solid rgba(130,150,190,.35); color:#9aa0be; }

/* Nome abilità — grande, bold */
.pool-name {
  font: 900 clamp(13px,1.15vw,17px)/1.15 var(--font-hud) !important;
  color: var(--text) !important;
  text-transform: uppercase;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

/* pool-meta — elemento + targeting + tasto */
.pool-meta {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--gold) !important;
  font: 700 9px/1 var(--font-mono) !important;
  text-transform: uppercase !important;
}

/* Element inline badge */
.pool-el-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 2px;
  font: 900 7px/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.el-tag-fire      { background:rgba(255,80,0,.22);   border:1px solid rgba(255,110,30,.5);  color:#ff8040; }
.el-tag-ice       { background:rgba(0,200,255,.15);  border:1px solid rgba(0,210,255,.42);  color:#40d0ff; }
.el-tag-lightning { background:rgba(255,230,0,.15);  border:1px solid rgba(255,230,0,.42);  color:#ffe040; }
.el-tag-dark      { background:rgba(150,0,200,.18);  border:1px solid rgba(180,40,240,.42); color:#c060f0; }
.el-tag-nature    { background:rgba(50,210,20,.15);  border:1px solid rgba(60,240,20,.42);  color:#60e820; }
.el-tag-none      { background:rgba(100,110,140,.12);border:1px solid rgba(140,160,200,.28);color:#9aa8c0; }

/* Descrizione: 4 righe, testo leggibile */
.pool-summary {
  -webkit-line-clamp: 4 !important;
  min-height: 60px !important;
  font: 400 11px/1.58 var(--font-ui) !important;
  color: #d0d8ee !important;
  letter-spacing: .01em !important;
}

/* Tag effetti — sostituti etag (più grandi, con icone distinte) */
.etag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 4px;
  font: 900 9px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
.ti { font-size: 10px; line-height: 1; opacity: .9; }

/* CC duro (stun, root, freeze, blind, airborne) — VIOLA */
.etag.tag-control {
  background: rgba(130,50,220,.30) !important;
  border: 1px solid rgba(180,100,255,.65) !important;
  color: #d090ff !important;
}
/* DoT / status (burn, bleed, poison, chill, shield) — AMBRA */
.etag.tag-status {
  background: rgba(200,140,30,.25) !important;
  border: 1px solid rgba(230,170,50,.58) !important;
  color: #f0c050 !important;
}
/* Mobilità (dash, teleport) — VERDE */
.etag.tag-move {
  background: rgba(40,180,90,.25) !important;
  border: 1px solid rgba(60,210,110,.58) !important;
  color: #50e888 !important;
}
/* Targeting (aim lock, self, point, skill shot) — GRIGIO outlined */
.etag.tag-targeting {
  background: rgba(90,100,130,.15) !important;
  border: 1px solid rgba(145,165,210,.32) !important;
  color: var(--text-soft) !important;
}
/* Risorse (heal, lifesteal, drain) — BLU */
.etag.tag-resource {
  background: rgba(30,150,210,.20) !important;
  border: 1px solid rgba(60,180,240,.48) !important;
  color: #60c8f8 !important;
}
/* Timing (channel, tick) — GIALLO MUTED */
.etag.tag-timing {
  background: rgba(190,170,30,.18) !important;
  border: 1px solid rgba(220,200,50,.38) !important;
  color: #d4c048 !important;
}
/* Role (rec tag) — ORO */
.etag.tag-role {
  background: rgba(255,210,96,.14) !important;
  border: 1px solid rgba(255,210,96,.38) !important;
  color: var(--gold) !important;
}

/* Damage pill — più grande, rosso-arancio forte */
.tag-dmg-pill {
  padding: 4px 10px !important;
  font: 900 11px/1 var(--font-mono) !important;
  background: rgba(220,70,30,.30) !important;
  border: 1px solid rgba(255,100,50,.65) !important;
  color: #ff9060 !important;
  border-radius: 4px !important;
}

/* ================================================================
   COSTI — riga orizzontale: icona + numero + etichetta in italiano
   Una riga compatta, non un grid verticale.
   ================================================================ */
.pool-cost-row {
  grid-area: costs;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 8px 0 2px !important;
  border-top: 1px solid rgba(255,255,255,0.09) !important;
  margin-top: 4px !important;
  align-items: center !important;
}

.cost-stat {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 4px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  white-space: nowrap;
}

/* Icona, valore, etichetta in fila */
.cs-icon { font-size: 13px; line-height: 1; align-self: center; }
.cs-val  { font: 900 13px/1 var(--font-mono); }
.cs-lbl  { font: 500 9px/1 var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

.cost-stat.cost-mp     .cs-val { color: #60c8ff; }
.cost-stat.cost-sp     .cs-val { color: #50e888; }
.cost-stat.cost-cd     .cs-val { color: #9ba8c4; }
.cost-stat.cost-windup .cs-val { color: #ffd060; }

/* ================================================================
   TAG EFFETTI — chip compatte in riga (NON strip full-width)
   Ogni categoria ha bordo sinistro colorato e background diverso,
   ma la larghezza si adatta al contenuto.
   ================================================================ */

/* Container: riga orizzontale che va a capo */
.effect-tags {
  grid-area: tags;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  align-content: flex-start;
  min-width: 0;
}

/* Base etag: compatta, larghezza automatica */
.etag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  width: auto !important;
  padding: 4px 9px 4px 8px !important;
  border-radius: 3px !important;
  font: 900 9px/1 var(--font-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  white-space: nowrap !important;
  flex-shrink: 0;
}

/* CC duro (stun, root, freeze, blind, airborne) — viola, bordo sx spesso */
.etag.tag-control {
  border: none !important;
  border-left: 3px solid rgba(180,100,255,0.9) !important;
  background: rgba(120,40,210,.24) !important;
  color: #cc88ff !important;
}

/* Status/DoT (burn, bleed, poison, chill, shield) — ambra, bordo sx */
.etag.tag-status {
  border: none !important;
  border-left: 3px solid rgba(230,170,50,0.9) !important;
  background: rgba(190,130,20,.22) !important;
  color: #f0c050 !important;
}

/* Mobilità (dash, teleport) — verde, bordo sx */
.etag.tag-move {
  border: none !important;
  border-left: 3px solid rgba(60,210,110,0.9) !important;
  background: rgba(30,160,70,.20) !important;
  color: #50e888 !important;
}

/* Risorse (heal, lifesteal) — blu, bordo sx */
.etag.tag-resource {
  border: none !important;
  border-left: 3px solid rgba(60,180,240,0.9) !important;
  background: rgba(20,130,200,.18) !important;
  color: #60c8f8 !important;
}

/* Timing (channel, tick) — giallo, bordo sx */
.etag.tag-timing {
  border: none !important;
  border-left: 3px solid rgba(220,200,50,0.85) !important;
  background: rgba(180,160,20,.16) !important;
  color: #d4c048 !important;
}

/* Targeting: rimosso dalla logica TS, ma se appare è invisibile */
.etag.tag-targeting { display: none !important; }

/* ================================================================
   POOL CARD — nuova struttura flat (LoL/Hades style)
   Niente pool-copy/pool-visual. HTML completamente diverso.
   ================================================================ */

/* Pool: 2 colonne */
.pool-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  align-content: start;
  gap: 8px !important;
  padding: 12px !important;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

/* Override pool-card: flex colonna, no grid */
.pool-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  grid-template-columns: unset !important;
  grid-template-rows: unset !important;
  grid-template-areas: unset !important;
  padding: 16px 20px !important;
  min-height: unset !important;
}

/* Nasconde i vecchi elementi se residui */
.pool-copy, .pool-visual, .pool-nature, .pool-meta,
.pool-summary, .pool-dmg-row, .effect-tags, .pool-cost-row { display: none !important; }

/* ── HEADER: icona piccola + nome + badge tipo ── */
.pc-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 7px;
}

/* Icona 36×36px, angolo in alto a sinistra */
.pc-icon-sm {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: rgba(0,0,0,0.38);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 22px;
  overflow: hidden;
}
.pc-icon-sm svg, .pc-icon-sm img {
  width: 100%; height: 100%; object-fit: contain;
}

/* Destra dell'header: nome sopra, badge sotto */
.pc-headright {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* Nome: grande, bold, uppercase */
.pc-name {
  font: 900 18px/1.1 var(--font-hud);
  text-transform: uppercase;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-rec {
  color: #50e888;
  font-size: .7em;
  margin-left: 4px;
}

/* Badge tipo — sotto il nome */
.ptype-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 3px;
  font: 900 9px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
}

/* Colori badge tipo */
.ptype-badge.ptype-danno      { background:rgba(220,60,40,.28);  border:1px solid rgba(255,100,70,.65); color:#ff9070; }
.ptype-badge.ptype-controllo,
.ptype-badge.ptype-cc-area    { background:rgba(130,50,220,.28); border:1px solid rgba(180,100,255,.65); color:#c888ff; }
.ptype-badge.ptype-mob-cc     { background:rgba(40,160,120,.24); border:1px solid rgba(60,210,160,.6);  color:#50e8b8; }
.ptype-badge.ptype-mobilita   { background:rgba(40,180,80,.24);  border:1px solid rgba(60,220,100,.6);  color:#50e870; }
.ptype-badge.ptype-recupero   { background:rgba(30,160,160,.22); border:1px solid rgba(50,210,210,.55); color:#40d8d8; }
.ptype-badge.ptype-zona       { background:rgba(200,110,30,.22); border:1px solid rgba(240,150,60,.55); color:#f0a040; }
.ptype-badge.ptype-drenaggio  { background:rgba(110,30,150,.22); border:1px solid rgba(160,60,210,.55); color:#b060e0; }
.ptype-badge.ptype-proiettile { background:rgba(30,110,220,.22); border:1px solid rgba(70,160,255,.55); color:#60b8ff; }
.ptype-badge.ptype-stato      { background:rgba(180,140,30,.22); border:1px solid rgba(220,180,50,.55); color:#d8b840; }
.ptype-badge.ptype-utility    { background:rgba(90,100,130,.18); border:1px solid rgba(130,150,190,.35); color:#9aa0be; }

/* ── SUB: elemento · targeting · tasto ── */
.pc-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font: 600 10px/1 var(--font-mono);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  flex-wrap: wrap;
}

/* Puntino colorato per elemento */
.pc-eldot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.el-dot-fire      { background: #ff6600; }
.el-dot-ice       { background: #00d0ff; }
.el-dot-lightning { background: #ffe000; box-shadow: 0 0 4px #ffe000; }
.el-dot-dark      { background: #9944ff; }
.el-dot-nature    { background: #44dd22; }
.el-dot-none      { background: #556; }

.pc-elname { color: var(--text-soft); }
.pc-sep    { color: rgba(255,255,255,0.2); }
.pc-key    { color: var(--gold); font-weight: 900; }

/* ── DESCRIPTION: testo principale — grande e leggibile ── */
.pc-desc {
  font: 400 14px/1.65 var(--font-ui);
  color: #ccd5e8;
  flex: 1;
  margin-bottom: 12px;
}
.pc-desc b        { font-weight: 800; color: #eef2ff; }
.pc-malus {
  display: none;
  font-style: italic;
}

/* ── CHIPS CC/status: riga di quick-scan DOPO la descrizione ── */
.pc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

/* Chip compatta: solo il necessario, NON duplica tutta la descrizione */
.pf-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 3px;
  font: 900 8px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.pfc-cc  { background:rgba(120,40,210,.26); border:1px solid rgba(180,100,255,.6); color:#cc88ff; }
.pfc-dot { background:rgba(190,130,20,.22); border:1px solid rgba(230,170,50,.55); color:#f0c050; }
.pfc-mob { background:rgba(30,160,70,.22);  border:1px solid rgba(60,210,110,.55); color:#50e888; }
.pfc-time{ background:rgba(180,160,20,.18); border:1px solid rgba(220,200,50,.4);  color:#d4c048; }

/* ── FOOTER: barra stat compatta ── */
.pc-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Footer bar: altezza minima fissa → tutte le card hanno la stessa altezza */
.pc-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.09);
  min-height: 48px;
}

/* Pill danno: rosso-arancio grande */
.pf-dmg {
  font: 900 14px/1 var(--font-mono);
  color: #ff9060;
  background: rgba(220,70,30,.22);
  border: 1px solid rgba(255,100,50,.5);
  border-radius: 3px;
  padding: 5px 12px;
  white-space: nowrap;
}

/* Stat generica: valore + etichetta in colonnina */
.pf-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.pf-val  { font: 900 14px/1 var(--font-mono); color: var(--text); }
.pf-lbl  { font: 500 8px/1 var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }

/* Colori per le stat specifiche */
.pf-mana .pf-val { color: #60c8ff; }
.pf-stam .pf-val { color: #50e888; }
.pf-cast .pf-val { color: #ffd060; }
.pf-cd   .pf-val { color: #9ba8c4; }

/* CC chip nel footer — colore viola, compatto */
.pf-cc {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 3px;
  font: 900 9px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  background: rgba(120,40,210,.26);
  border: 1px solid rgba(180,100,255,.6);
  color: #cc88ff;
}
/* Varianti colore per tipo CC */
.pf-cc-slow, .pf-cc-chill, .pf-cc-mark { background:rgba(140,100,20,.26); border-color:rgba(220,180,50,.6); color:#e8c060; }
.pf-cc-root, .pf-cc-airborne { background:rgba(120,40,210,.26); border-color:rgba(180,100,255,.6); color:#cc88ff; }
.pf-cc-burn, .pf-cc-bleed, .pf-cc-poison { background:rgba(160,60,20,.24); border-color:rgba(230,110,50,.55); color:#f09060; }


/* ── Loading Screen ──────────────────────────────────────────────────────── */
#loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0d14;
}
#loading-screen.hidden { display: none; }

.loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: min(480px, 90vw);
}

.loading-logo {
  font: 900 42px/1 var(--font-mono, monospace);
  letter-spacing: .12em;
  color: #d4a04a;
  text-shadow: 0 0 32px rgba(212,160,74,.5);
  margin-bottom: 4px;
}

.loading-label {
  font: 600 13px/1 var(--font-mono, monospace);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9ba8c4;
}

.loading-bar-track {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  overflow: hidden;
}

.loading-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #d4a04a, #f0c870);
  border-radius: 2px;
  transition: width .15s ease;
}

.loading-sub {
  font: 400 10px/1 var(--font-mono, monospace);
  color: #4a5568;
  text-transform: uppercase;
  letter-spacing: .08em;
  min-height: 12px;
}

/* ── Dynamic crosshair — expands when moving, contracts when still ── */
#crosshair {
  transition: transform 0.12s ease, opacity 0.1s;
}
#crosshair[data-moving="true"] {
  transform: translate(-50%, -50%) scale(1.55);
  opacity: 0.65;
}
#crosshair[data-moving="true"]::before,
#crosshair[data-moving="true"]::after {
  opacity: 0.5;
}
/* Kill confirm flash — green burst */
#crosshair.kill-confirm {
  border-color: #50ff80;
  box-shadow: 0 0 14px rgba(50,255,80,0.9);
  transform: translate(-50%,-50%) scale(1.3);
  transition: none;
}
/* Primed ability accent ring */
#crosshair[data-primed="true"] {
  box-shadow: 0 0 0 2px rgba(212,160,74,0.55);
}

/* ── Respawn stats strip ─────────────────────────────────────────────────── */
.respawn-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin: 8px 0 4px;
  font: 600 11px/1 var(--font-mono, monospace);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(200,210,230,0.65);
}
.respawn-stats b { color: #d4c080; font-weight: 900; }
.rs-sep { opacity: 0.3; }

/* ── Weapon-specific crosshair ─────────────────────────────────────────────
   Sword = third-person melee: crosshair is a larger soft ring (less precise)
   Bow / Staff = first-person precision: standard sharp dot+ring
   ─────────────────────────────────────────────────────────────────────── */
#crosshair[data-weapon="sword"] {
  width: 38px;
  height: 38px;
  border-color: rgba(232,236,246,0.30);
  opacity: 0.55;
}
#crosshair[data-weapon="sword"]::before,
#crosshair[data-weapon="sword"]::after {
  display: none; /* no crosshairs lines in TPV melee — ring only */
}