* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #05060d;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  color: #e8e6ff;
  user-select: none;
  -webkit-user-select: none;
  /* 51×51 sprites @ 20% of 256px source; hotspots match canvas draw math. */
  --cursor-default: url("sprites/cursors/default.png") 5 4, auto;
  --cursor-click: url("sprites/cursors/click.png") 2 1, auto;
  cursor: var(--cursor-default);
}

:root {
  --sel-inset-purple:
    inset 0 0 16px rgba(150, 110, 255, 0.48),
    inset 0 0 32px rgba(90, 60, 200, 0.26);
  --sel-inset-gold:
    inset 0 0 14px rgba(255, 190, 70, 0.42),
    inset 0 0 28px rgba(255, 130, 30, 0.24);
  /* Sub-panel back buttons (.back-btn) anchor top-left; content must start below this band. */
  --back-btn-top: 10px;
  --back-btn-left: 12px;
  --back-btn-min-size: 44px;
  --back-btn-block: calc(var(--back-btn-top) + var(--back-btn-min-size) + 8px);
}

#game { display: block; position: fixed; inset: 0; }

/* Gauntlet replaces the system cursor — beat per-control cursor: pointer/text/help rules */
*, *::before, *::after {
  cursor: var(--cursor-default) !important;
}
*:active, *:active::before, *:active::after {
  cursor: var(--cursor-click) !important;
}
html.cursor-suppressed, html.cursor-suppressed * {
  cursor: auto !important;
}

/* ---------- Overlay ---------- */
#overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  z-index: 10;
}
#overlay .panel, #overlay .banner { pointer-events: auto; }

/* Shop / spellbook open — above canvas HUD, corner dock, ping, tooltips, etc. */
#overlay:has(#shop:not(.hidden)),
#overlay:has(#spellbook:not(.hidden)) {
  z-index: 200;
  pointer-events: auto;
  background: rgba(6, 4, 18, 0.72);
  backdrop-filter: blur(3px);
}
/* Hover tooltips + spell previews must sit above the shop/spellbook panel (overlay z-index 200). */
body:has(#shop:not(.hidden)) .tooltip,
body:has(#spellbook:not(.hidden)) .tooltip,
body:has(#draft:not(.hidden)) .tooltip {
  z-index: 250;
}
#overlay:has(#shop:not(.hidden)) > .corner-dock,
#overlay:has(#shop:not(.hidden)) > #sandboxCfg,
#overlay:has(#shop:not(.hidden)) > #sandboxHud,
#overlay:has(#shop:not(.hidden)) > #spellSpriteDev,
#overlay:has(#spellbook:not(.hidden)) > .corner-dock,
#overlay:has(#spellbook:not(.hidden)) > #sandboxCfg,
#overlay:has(#spellbook:not(.hidden)) > #quitBtn,
#overlay:has(#spellbook:not(.hidden)) > #sandboxHud,
#overlay:has(#spellbook:not(.hidden)) > #spellSpriteDev {
  visibility: hidden;
  pointer-events: none;
}
body:has(#shop:not(.hidden)) .ping-meter,
body:has(#shop:not(.hidden)) .scoreboard-toggle,
body:has(#shop:not(.hidden)) #spectateHud,
body:has(#spellbook:not(.hidden)) .ping-meter,
body:has(#spellbook:not(.hidden)) .scoreboard-toggle,
body:has(#spellbook:not(.hidden)) #spectateHud {
  visibility: hidden;
  pointer-events: none;
}
#overlay:has(#draft:not(.hidden)) {
  pointer-events: none;
  background: none;
  backdrop-filter: none;
}
#overlay:has(#draft:not(.hidden)) > .corner-dock,
#overlay:has(#draft:not(.hidden)) > #quitBtn {
  visibility: visible;
  pointer-events: auto;
}

.player-stats {
  font: 600 12px "Trebuchet MS", sans-serif;
  letter-spacing: 0.3px;
  color: #9b8fd6;
  user-select: none;
}
.player-stats b {
  color: #d8d3f5;
  font-weight: 700;
}
.corner-player-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  line-height: 1.35;
  white-space: nowrap;
}
.mm-player-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(20, 16, 44, 0.45);
  border: 1px solid rgba(150, 130, 255, 0.18);
}

.hidden { display: none !important; }

/* ---------- Mobile gate (touch-primary devices) ---------- */
#mobileGate { display: none; }
html.mobile-unsupported #mobileGate {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 200000;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(90, 60, 200, 0.28), transparent),
    #05060d;
  pointer-events: auto;
}
html.mobile-unsupported #game,
html.mobile-unsupported #overlay,
html.mobile-unsupported #pingMeter,
html.mobile-unsupported #scoreboardToggle,
html.mobile-unsupported #spectateHud {
  display: none !important;
}
html.mobile-unsupported,
html.mobile-unsupported * {
  cursor: auto !important;
}
html.mobile-unsupported body {
  user-select: text;
  -webkit-user-select: text;
}
.mobile-gate-panel {
  width: min(420px, 92vw);
  padding: 32px 28px 30px;
}
.mobile-gate-eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9b8fd6;
}
.mobile-gate-title {
  margin: 0 0 22px;
  font-size: clamp(1.35rem, 5vw, 1.65rem);
  font-weight: 700;
  line-height: 1.25;
  color: #f0eeff;
}
.mobile-gate-art-wrap {
  display: inline-block;
  margin: 0 auto 22px;
  padding: 18px 28px 14px;
  border-radius: 14px;
  background: linear-gradient(165deg, #ebe6ff 0%, #d8d0f5 100%);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.mobile-gate-art {
  display: block;
  width: min(260px, 72vw);
  height: auto;
  mix-blend-mode: multiply;
}
.mobile-gate-blurb {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #b8b0e0;
}
.mobile-gate-blurb strong {
  color: #e0dbff;
  font-weight: 600;
}

/* ---------- Confirm dialog ---------- */
.confirm-backdrop {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 4, 18, 0.72);
  backdrop-filter: blur(3px);
  pointer-events: auto;
  z-index: 30;
  animation: confirmFade 0.12s ease;
}
@keyframes confirmFade { from { opacity: 0; } to { opacity: 1; } }
.confirm-box {
  background: linear-gradient(160deg, rgba(28,24,58,0.98), rgba(14,11,32,0.99));
  border: 1px solid rgba(150,130,255,0.4);
  border-radius: 16px;
  padding: 26px 30px;
  width: min(420px, 90vw);
  text-align: center;
  box-shadow: 0 0 50px rgba(110,80,255,0.3), inset 0 0 30px rgba(80,60,180,0.12);
  animation: confirmPop 0.14s ease;
}
@keyframes confirmPop { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.confirm-title {
  font-size: 20px; font-weight: 800; letter-spacing: 1px;
  color: #efeaff; margin: 0 0 12px;
}
.confirm-body { font-size: 14px; line-height: 1.55; color: #c9c4ec; margin: 0 0 22px; }
.confirm-body b { color: #ffd479; }
.confirm-actions { display: flex; gap: 10px; justify-content: center; }
.confirm-btn {
  flex: 1; padding: 12px 18px;
  font-size: 14px; font-weight: 800; letter-spacing: 1px;
  border-radius: 11px; cursor: pointer;
  transition: transform .08s ease, box-shadow .1s ease, background .12s;
}
.confirm-btn.cancel {
  border: 1px solid rgba(150,130,255,0.3);
  background: rgba(40,34,80,0.6); color: #d8d3f5;
}
.confirm-btn.cancel:hover { background: rgba(70,58,140,0.8); }
.confirm-btn.cancel:active { transform: translateY(0); }
.confirm-btn.ok {
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, #9a5828 0%, #6a3018 42%, #4a1810 100%);
  color: #f5e6b8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  box-shadow:
    0 4px 0 #1a0806,
    0 6px 18px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 220, 150, 0.28);
}
.confirm-btn.ok:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #b06830 0%, #7a3818 42%, #5a2010 100%);
  color: #fff4d8;
  box-shadow:
    0 5px 0 #1a0806,
    0 8px 22px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 235, 180, 0.35);
}
.confirm-btn.ok:active {
  transform: translateY(2px);
  box-shadow:
    0 2px 0 #1a0806,
    0 3px 10px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 200, 120, 0.2);
}

/* Bottom-right dock: pre-alpha notice, report, audio */
.corner-dock {
  position: fixed; bottom: 12px; right: 12px;
  z-index: 21;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
.corner-dock > * { pointer-events: auto; }
.corner-dock > .pre-alpha-notice { position: relative; z-index: 1; }
.corner-dock > .feedback-btn { position: relative; z-index: 2; }
.pre-alpha-notice {
  width: min(328px, 90vw);
  padding: 22px 22px 20px;
  text-align: left;
  background: linear-gradient(165deg, rgba(32, 26, 62, 0.97), rgba(14, 11, 34, 0.99));
  border: 1px solid rgba(160, 140, 255, 0.38);
  border-radius: 16px;
  box-shadow:
    0 14px 44px rgba(0, 0, 0, 0.48),
    0 0 56px rgba(100, 70, 220, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 48px rgba(70, 50, 160, 0.1);
  backdrop-filter: blur(8px);
}
.pre-alpha-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}
.pre-alpha-head-left { min-width: 0; }
/* Title wrapped in a button so the minimized chip expands on click (mirrors
   the patch-notes widget). Unstyled: looks identical to the old plain head. */
.pre-alpha-head-btn {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: default;
}
/* Minimized: collapse to a compact "Pre-Alpha — Welcome" chip, like patch notes. */
.pre-alpha-notice-minimized {
  width: auto;
  min-width: 160px;
  padding: 12px 12px 12px 14px;
}
.pre-alpha-notice-minimized .pre-alpha-head { margin-bottom: 0; }
.pre-alpha-notice-minimized .pre-alpha-head-btn { cursor: pointer; }
.pre-alpha-notice-minimized .pre-alpha-head-btn:hover .pre-alpha-title { color: #ffffff; }
.pre-alpha-notice-minimized .pre-alpha-eyebrow { margin-bottom: 0; }
.pre-alpha-notice-minimized .pre-alpha-title,
.pre-alpha-notice-minimized .pre-alpha-dates,
.pre-alpha-notice-minimized .pre-alpha-lead,
.pre-alpha-notice-minimized .pre-alpha-section {
  display: none;
}
.pre-alpha-dates {
  flex-shrink: 0;
  margin: 2px 0 0;
  text-align: right;
  font-size: 11px;
  line-height: 1.5;
  color: #9b94c8;
}
.pre-alpha-dates p { margin: 0; }
.pre-alpha-dates p + p { margin-top: 4px; }
.pre-alpha-date-label {
  color: #b8b0e0;
  font-weight: 600;
}
.pre-alpha-eyebrow {
  display: inline-block;
  margin: 0 0 8px;
  padding: 5px 11px;
  font-size: 10px; font-weight: 800; letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #ddd4ff;
  background: rgba(110, 80, 210, 0.28);
  border: 1px solid rgba(180, 155, 255, 0.35);
  border-radius: 999px;
}
.pre-alpha-title {
  font-size: 20px; font-weight: 800; letter-spacing: 0.3px;
  color: #f4f0ff; margin: 0; line-height: 1.2;
}
.pre-alpha-lead {
  font-size: 14px; line-height: 1.65; color: #c5c0e8; margin: 0 0 20px;
}
.pre-alpha-lead b { color: #ebe6ff; font-weight: 700; }
.pre-alpha-section { margin: 0; }
.pre-alpha-section + .pre-alpha-section {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(150, 130, 255, 0.2);
}
.pre-alpha-heading {
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: #b0a8f0;
  margin: 0 0 12px;
}
.pre-alpha-list {
  margin: 0;
  padding: 0 0 0 1.15em;
  list-style: disc;
  font-size: 12.5px; line-height: 1.6; color: #b8b2dc;
  display: flex; flex-direction: column; gap: 12px;
}
.pre-alpha-list li { margin: 0; padding-left: 2px; }
.pre-alpha-list li::marker { color: rgba(170, 150, 255, 0.65); }
.pre-alpha-list b { color: #ddd6ff; font-weight: 600; }
.pre-alpha-section--notes {
  display: flex; flex-direction: column; gap: 12px;
}
.pre-alpha-note {
  margin: 0;
  padding: 14px 15px;
  font-size: 12.5px; line-height: 1.6; color: #b8b2dc;
  background: rgba(18, 14, 40, 0.65);
  border: 1px solid rgba(130, 110, 210, 0.28);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.pre-alpha-note b { color: #e0d8ff; font-weight: 600; }
.pre-alpha-note-label {
  display: block;
  margin-bottom: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #c9bfff;
}
.audio-wrap {
  position: relative;
  z-index: 5;
  display: flex; flex-direction: column; align-items: flex-end;
}
.audio-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mute-btn {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1;
  background: rgba(20, 18, 40, 0.7);
  color: #cdd6ff;
  border: 1px solid rgba(150, 140, 220, 0.35);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.mute-btn:hover { background: rgba(40, 36, 70, 0.85); border-color: rgba(150, 140, 220, 0.6); }
.mute-btn:active { transform: scale(0.92); }
.mute-btn.muted, .mute-btn.open { opacity: 0.85; border-color: rgba(200, 160, 255, 0.55); }
.audio-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 10;
  width: min(280px, 92vw);
  padding: 14px 16px 12px;
  background: linear-gradient(160deg, rgba(26, 22, 54, 0.98), rgba(12, 10, 30, 0.99));
  border: 1px solid rgba(150, 130, 255, 0.4);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
}
.audio-panel.hidden { display: none; }
.audio-panel-title {
  font-size: 14px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: #a8b4ff;
  margin-bottom: 10px; text-align: left;
}
.audio-row {
  display: grid;
  grid-template-columns: 52px 36px 1fr 36px;
  align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.audio-row:last-child { margin-bottom: 0; }
.audio-label { font-size: 14px; font-weight: 600; color: #dde4ff; text-align: left; }
.audio-mute-ch {
  width: 36px; height: 32px; padding: 0;
  font-size: 16px; line-height: 1;
  background: rgba(30, 26, 58, 0.9);
  border: 1px solid rgba(130, 120, 210, 0.35);
  border-radius: 8px; cursor: pointer; color: #cdd6ff;
}
.audio-mute-ch:hover { border-color: rgba(170, 150, 255, 0.55); }
.audio-mute-ch.muted { opacity: 0.55; }
.audio-slider {
  width: 100%; height: 6px; margin: 0;
  accent-color: #9b7bff;
  cursor: pointer;
}
.audio-slider:disabled { opacity: 0.45; cursor: not-allowed; }
.audio-pct {
  font-size: 12px; font-weight: 700; color: #9aa8e8;
  text-align: right; font-variant-numeric: tabular-nums;
}

.shop-timer {
  text-align: center;
  margin: 2px 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: #ff9a5a;
  letter-spacing: 1px;
}

.panel {
  background: linear-gradient(160deg, rgba(26,22,54,0.96), rgba(12,10,30,0.97));
  border: 1px solid rgba(150,130,255,0.35);
  border-radius: 18px;
  padding: 34px 40px;
  width: min(460px, 92vw);
  text-align: center;
  box-shadow: 0 0 60px rgba(110,80,255,0.25), inset 0 0 40px rgba(80,60,180,0.12);
  backdrop-filter: blur(4px);
}
.panel.wide { width: min(760px, 94vw); }

/* Panel geometry backgrounds (Artifact-inspired celestial arcs). */
.panel--geom,
.confirm-box.panel--geom,
.mm-ready-check-box.panel--geom,
.report-panel.panel--geom {
  position: relative;
  overflow: hidden;
  background:
    var(--geom-bg) var(--geom-pos, center) / cover no-repeat,
    linear-gradient(160deg, rgba(26, 22, 54, 0.96), rgba(12, 10, 30, 0.97));
}
.panel--geom-home,
.panel--geom-svg { --geom-bg: url("/icons/panels/home.svg"); --geom-pos: center; }
.panel--geom-online { --geom-bg: url("/icons/panels/online.svg"); --geom-pos: left top; }
.panel--geom-outside { --geom-bg: url("/icons/panels/outside.svg"); --geom-pos: center; }
.panel--geom-corners { --geom-bg: url("/icons/panels/corners.svg"); --geom-pos: left top; }
.panel--geom-learn { --geom-bg: url("/icons/panels/learn.svg"); --geom-pos: left top; }
.panel--geom-spellbook { --geom-bg: url("/icons/panels/spellbook.svg"); --geom-pos: right top; }
.panel--geom-keybinds { --geom-bg: url("/icons/panels/keybinds.svg"); --geom-pos: left bottom; }
.panel--geom-credits { --geom-bg: url("/icons/panels/credits.svg"); --geom-pos: center bottom; }
.panel--geom-history { --geom-bg: url("/icons/panels/history.svg"); --geom-pos: left center; }
.panel--geom-matchmaker { --geom-bg: url("/icons/panels/matchmaker.svg"); --geom-pos: center top; }
.panel--geom-lobby { --geom-bg: url("/icons/panels/lobby.svg"); --geom-pos: center; }
.panel--geom-boss { --geom-bg: url("/icons/panels/boss.svg"); --geom-pos: center top; }
.panel--geom-shop { --geom-bg: url("/icons/panels/shop.svg"); --geom-pos: left bottom; }
.panel--geom-reveal { --geom-bg: url("/icons/panels/reveal.svg"); --geom-pos: right bottom; }
.panel--geom-matchover { --geom-bg: url("/icons/panels/matchover.svg"); --geom-pos: center top; }
.panel--geom-confirm { --geom-bg: url("/icons/panels/confirm.svg"); --geom-pos: left top; }
.panel--geom-ready { --geom-bg: url("/icons/panels/ready.svg"); --geom-pos: center top; }
.panel--geom-report { --geom-bg: url("/icons/panels/report.svg"); --geom-pos: right center; }

/* Match victory / defeat — scrollable summary + pinned footer */
#overlay:has(#matchover:not(.hidden)) {
  overflow: hidden;
  overscroll-behavior: contain;
  align-items: center;
  justify-content: center;
  padding: max(12px, 2dvh) 12px;
  box-sizing: border-box;
  pointer-events: auto;
}
#matchover {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(760px, calc(100vw - 24px));
  max-height: min(90vh, calc(100vh - 24px));
  max-height: min(90dvh, calc(100dvh - 24px));
  min-height: 0;
  overflow: hidden;
  padding: 0;
  margin: 0 auto;
  flex-shrink: 1;
  box-sizing: border-box;
  text-align: center;
}
#matchover .mo-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: max(44px, var(--back-btn-block)) 28px 16px;
  -webkit-overflow-scrolling: touch;
}
#matchover .mo-footer {
  flex-shrink: 0;
  margin: 0;
  padding: 14px 28px 20px;
  border-top: 1px solid rgba(150, 130, 255, 0.18);
  background: linear-gradient(180deg, rgba(14, 12, 32, 0.55), rgba(12, 10, 28, 0.82));
}
#matchover .mo-footer-prompt {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.45;
  color: #c8c2ec;
}
#matchover .mo-footer .link-btn {
  margin-top: 0;
  display: inline-block;
}
#matchover .title {
  font-size: clamp(26px, 6vw, 42px);
  letter-spacing: clamp(2px, 1.2vw, 6px);
  margin: 0 0 10px;
}
#matchover #moText {
  text-align: left;
  margin-bottom: 12px;
}
#matchover .mo-report {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}
#matchover .mo-cr-details {
  margin-top: 4px;
}
#matchover .mo-cr-details-toggle {
  list-style: none;
  cursor: pointer;
  font: 600 12px "Trebuchet MS", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #b3abdd;
  padding: 8px 0 4px;
  user-select: none;
}
#matchover .mo-cr-details-toggle::-webkit-details-marker { display: none; }
#matchover .mo-cr-details-toggle::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s ease;
}
#matchover .mo-cr-details[open] .mo-cr-details-toggle::before {
  transform: rotate(90deg);
}
#matchover .mo-cr-details-body {
  padding-top: 8px;
}
#matchover #rematchHint.hidden {
  display: none;
}

/* Match shop — nearly full viewport, top of overlay stack */
#shop:not(.hidden) {
  position: relative;
  z-index: 1;
}
#shop {
  width: 96dvw;
  max-width: 96dvw;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 18px 22px 14px;
}
#shop:has(> #sandboxShopClose:not(.hidden)) {
  padding-top: max(18px, var(--back-btn-block));
}
#shop .shop-head,
#shop .shop-sub,
#shop .shop-timer,
#shop .shop-tabs,
#shop #readyBtn,
#shop #shopWait,
#shop #shopReportBtn,
#shop #sandboxShopClose {
  flex-shrink: 0;
}
#shop .shop-head {
  position: relative;
  justify-content: center;
}
#shop .shop-head .shop-title {
  width: 100%;
  text-align: center;
}
#shop .shop-head .spell-preview-toggle {
  position: absolute;
  right: 0;
  top: 4px;
}
#shop .shop-sub { margin-bottom: 12px; }
#shop .shop-scroll,
#shop .shop-report {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
}
#shop .shop-scroll .shop-slots {
  flex: 1 1 auto;
  min-height: 280px;
}

/* Spellbook — near-full viewport, mirrors match shop slot grid */
#spellbook.spellbook-panel {
  position: relative;
  z-index: 2;
  width: 96dvw;
  max-width: 96dvw;
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: max(18px, var(--back-btn-block)) 22px 14px;
  text-align: left;
}
#spellbook .spellbook-toolbar {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 3;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 14px;
  max-width: min(100% - 36px, 520px);
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(150, 130, 255, 0.28);
  background: rgba(30, 24, 58, 0.75);
}
#spellbook .spellbook-toolbar .spell-preview-toggle {
  margin-top: 0;
}
#spellbook .shop-title {
  flex-shrink: 0;
  text-align: center;
  margin-top: 0;
}
#spellbook .spellbook-hint {
  flex-shrink: 0;
  text-align: center;
  margin: 4px 0 10px;
}
#spellbook .spellbook-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  margin-bottom: 0;
}
#spellbook .shop-slots {
  flex: 1 1 auto;
  min-height: 360px;
}
#spellbook .spellbook-slot {
  min-height: 120px;
}
#spellbook .spellbook-spells {
  gap: 12px;
}
#spellbook .slot-spell-ref {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(150, 130, 255, 0.1);
}
#spellbook .slot-spell-ref:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
#spellbook .spell-skill-unit {
  width: 100%;
}
#spellbook .spellbook-spell-card {
  flex: 0 0 auto;
  width: 100%;
}
#spellbook .spellbook-spell-card .spell-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  margin-bottom: 2px;
}
#spellbook .spellbook-spell-card .spell-name {
  font-size: 14px;
  font-weight: 700;
}
#spellbook .spellbook-cost {
  font-size: 12px;
  font-weight: 700;
  color: #ffd479;
}
#spellbook .spellbook-cost.starter { color: #8de08d; }
#spellbook .spellbook-desc {
  font-size: 12px;
  line-height: 1.35;
  color: #9b94c8;
}
#spellbook .skill-tree-ref .passive-node.ref {
  opacity: 1;
}
#spellbook .sb-ref-cost {
  pointer-events: none;
  cursor: default;
  color: #8de08d;
  border-color: rgba(141, 224, 141, 0.4);
  background: rgba(28, 58, 32, 0.5);
}
#spellbook .sb-enables-section {
  margin-top: 2px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(18, 14, 36, 0.65);
  border: 1px solid rgba(180, 140, 220, 0.2);
}
#spellbook .sb-enables-head {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c9a8e8;
  margin-bottom: 4px;
}

.title {
  font-size: 54px; letter-spacing: 8px; font-weight: 800;
  background: linear-gradient(180deg, #fff, #b9a6ff 60%, #6f5bff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 30px rgba(130,100,255,0.4);
}
.subtitle { font-size: 17px; letter-spacing: 5px; color: #9b8fd6; margin: 2px 0 18px; text-transform: uppercase; }
.blurb { font-size: 16px; line-height: 1.55; color: #c9c4ec; margin-bottom: 22px; }
.blurb b { color: #ffd479; }

.field { margin-bottom: 22px; }
.field label { display: block; font-size: 14px; letter-spacing: 2px; color: #9b8fd6; margin-bottom: 10px; text-transform: uppercase; }
.field-hint { font-size: 11px; font-weight: 600; letter-spacing: 0.5px; color: #7a739c; text-transform: none; }
.mm-quick-btn { margin-bottom: 2px; }
.mm-quick-hint { margin: 0 0 10px; text-align: center; font-size: 12px; }

.seg { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.seg button {
  width: 44px; height: 44px; border-radius: 10px;
  border: none;
  background: linear-gradient(180deg, #3a3050 0%, #241840 100%);
  color: #d4cef0;
  font-size: 17px; font-weight: 700; cursor: pointer;
  box-shadow: 0 2px 0 #100818, inset 0 1px 0 rgba(200, 180, 255, 0.1);
  transition: transform .08s ease, box-shadow .1s ease, background .12s ease, color .12s ease;
}
.seg button:hover {
  background: linear-gradient(180deg, #483868 0%, #302050 100%);
  color: #ece8ff;
}
.seg button.active {
  background: linear-gradient(180deg, #645090 0%, #483470 42%, #302050 100%);
  color: #f8f6ff;
  box-shadow:
    0 2px 0 #100818,
    inset 0 1px 0 rgba(230, 215, 255, 0.22),
    var(--sel-inset-purple);
}
.seg button:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #100818, inset 0 1px 0 rgba(190, 170, 240, 0.14);
}

.big-btn {
  margin-top: 6px;
  padding: 14px 30px;
  font-size: 17px; font-weight: 800; letter-spacing: 2px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, #9a5828 0%, #6a3018 42%, #4a1810 100%);
  color: #f5e6b8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  box-shadow:
    0 4px 0 #1a0806,
    0 6px 18px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 220, 150, 0.28);
  transition: transform .08s ease, box-shadow .1s ease, background .12s ease, color .12s ease;
}
.big-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #b06830 0%, #7a3818 42%, #5a2010 100%);
  color: #fff4d8;
  box-shadow:
    0 5px 0 #1a0806,
    0 8px 22px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 235, 180, 0.35);
}
.big-btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow:
    0 2px 0 #1a0806,
    0 3px 10px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 200, 120, 0.2);
}
.big-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; transform: none; }
.big-btn.readied {
  background: linear-gradient(180deg, #3a7850 0%, #285838 42%, #183820 100%);
  color: #d8f5e0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow:
    0 4px 0 #0c2010,
    0 6px 18px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(180, 255, 200, 0.25);
}
.big-btn.lobby-start-countdown {
  font-size: 28px;
  letter-spacing: 0;
  min-width: 4.5rem;
  background: linear-gradient(180deg, #c87828 0%, #8a4818 42%, #5a2810 100%);
  color: #fff8e8;
  animation: lobbyStartGlow 1s ease-in-out infinite;
}
.big-btn.lobby-start-countdown.lobby-start-armed {
  animation: lobbyStartArmed 0.42s cubic-bezier(0.34, 1.35, 0.64, 1), lobbyStartGlow 1s ease-in-out 0.42s infinite;
}
.big-btn.lobby-start-countdown.lobby-start-tick {
  animation: lobbyStartGlow 1s ease-in-out infinite, lobbyStartTick 0.48s cubic-bezier(0.34, 1.25, 0.64, 1);
}
.big-btn.lobby-start-countdown:hover:not(:disabled) {
  background: linear-gradient(180deg, #e08838 0%, #a05828 42%, #6a3018 100%);
}
@keyframes lobbyStartGlow {
  0%, 100% {
    box-shadow:
      0 4px 0 #3a1808,
      0 6px 16px rgba(180, 80, 20, 0.32),
      inset 0 1px 0 rgba(255, 220, 150, 0.28);
  }
  50% {
    box-shadow:
      0 4px 0 #3a1808,
      0 8px 28px rgba(255, 130, 40, 0.58),
      inset 0 1px 0 rgba(255, 240, 190, 0.42);
  }
}
@keyframes lobbyStartArmed {
  0% { transform: scale(1); }
  45% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
@keyframes lobbyStartTick {
  0% { transform: scale(1); filter: brightness(1); }
  30% { transform: scale(1.18); filter: brightness(1.3); }
  100% { transform: scale(1); filter: brightness(1); }
}
.big-btn.readied:hover:not(:disabled) {
  background: linear-gradient(180deg, #489060 0%, #306848 42%, #204830 100%);
  box-shadow:
    0 5px 0 #0c2010,
    0 8px 22px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(200, 255, 220, 0.32);
}
.big-btn.readied:active:not(:disabled) {
  box-shadow:
    0 2px 0 #0c2010,
    0 3px 10px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(160, 230, 180, 0.18);
}

.k {
  display: inline-block; padding: 2px 8px; margin-right: 4px;
  background: rgba(60,50,110,0.8); border: 1px solid rgba(150,130,255,0.35);
  border-radius: 6px; font-weight: 700; color: #fff; font-size: 12px;
}

/* ---------- Banner ---------- */
.banner {
  font-size: 40px; font-weight: 800; letter-spacing: 4px;
  padding: 18px 46px; border-radius: 14px;
  background: rgba(10,8,26,0.7);
  border: 1px solid rgba(150,130,255,0.3);
  text-shadow: 0 0 24px rgba(130,100,255,0.6);
  text-align: center;
}
.banner.top {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  font-size: 32px; padding: 14px 36px; white-space: nowrap;
}

.toast {
  position: fixed;
  top: 28px;
  left: 50%;
  z-index: 120;
  max-width: min(92vw, 420px);
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  color: #ffe8e8;
  background: rgba(40, 12, 24, 0.92);
  border: 1px solid rgba(255, 120, 120, 0.45);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  transform: translateX(-50%) translateY(calc(-100% - 20px));
  opacity: 0;
  visibility: hidden;
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease,
    visibility 0.32s;
}
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: reduce) {
  .toast { transition-duration: 0.01ms; }
}

.mm-tip-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  z-index: 115;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: min(92vw, 480px);
  padding: 14px 22px 16px;
  border-radius: 14px;
  text-align: center;
  background: linear-gradient(165deg, rgba(36, 24, 64, 0.97), rgba(16, 12, 34, 0.95));
  border: 1px solid rgba(167, 139, 250, 0.45);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(139, 92, 246, 0.18);
  pointer-events: none;
  transform: translateX(-50%) translateY(calc(-100% - 24px));
  opacity: 0;
  visibility: hidden;
  transition:
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease,
    visibility 0.38s;
}
.mm-tip-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}
.mm-tip-toast-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #c4b5fd;
}
.mm-tip-toast-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;
  color: #f3eeff;
}
@media (prefers-reduced-motion: reduce) {
  .mm-tip-toast { transition-duration: 0.01ms; }
}

.status-fx-hud {
  position: fixed;
  left: 50%;
  bottom: 158px;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: min(96vw, 520px);
  pointer-events: auto;
  z-index: 25;
}
.status-fx-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 42px;
  cursor: default;
}
.status-fx-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  border-radius: 10px;
  background: rgba(12, 10, 28, 0.82);
  border: 1px solid rgba(150, 130, 255, 0.28);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.status-fx-chip.is-buff .status-fx-icon {
  border-color: rgba(74, 222, 128, 0.5);
  box-shadow: 0 0 14px rgba(74, 222, 128, 0.16);
}
.status-fx-chip.is-debuff .status-fx-icon {
  border-color: rgba(248, 113, 113, 0.48);
  box-shadow: 0 0 14px rgba(248, 113, 113, 0.14);
}
.status-fx-chip.is-expiring .status-fx-icon {
  animation: statusFxPulse 0.55s ease-in-out infinite;
}
@keyframes statusFxPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.status-fx-time {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #c4b8ff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
}
@media (prefers-reduced-motion: reduce) {
  .status-fx-chip.is-expiring .status-fx-icon { animation: none; opacity: 0.85; }
}

/* ---------- Shop ---------- */
.shop-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.shop-head .shop-title { margin-bottom: 0; }
.spell-preview-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(150, 130, 255, 0.28);
  background: rgba(30, 24, 58, 0.65);
  font: 600 12px "Trebuchet MS", sans-serif;
  letter-spacing: 0.3px;
  color: #b8b0e8;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.spell-preview-toggle:hover { color: #e8e4ff; border-color: rgba(180, 160, 255, 0.45); }
.spell-preview-toggle input {
  margin: 0;
  accent-color: #ff8a3d;
  cursor: pointer;
}
.shop-title { font-size: 26px; letter-spacing: 4px; color: #ffd479; margin-bottom: 4px; }
.shop-sub { font-size: 14px; color: #b6afdc; margin-bottom: 20px; }
.gold b { color: #ffd479; }
.sp { color: #b8b0e8; }
.sp b { color: #c9bfff; }
.shop-sub .sp { margin-right: 2px; }
.pp { color: #8ecfb8; }
.pp b { color: #a8e8d0; }
.sy { color: #e8b88e; }
.sy b { color: #ffd4a8; }

.shop-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px; margin-bottom: 22px;
}
.spell-card {
  display: flex; align-items: center; gap: 12px;
  background: rgba(30,26,62,0.7);
  border: 1px solid rgba(150,130,255,0.2);
  border-radius: 12px; padding: 12px 14px; text-align: left;
}
.spell-icon {
  width: 42px; height: 42px; min-width: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; box-shadow: inset 0 0 12px rgba(0,0,0,0.4);
  overflow: hidden;
}
.spell-icon-img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.tip-icon .spell-icon-img {
  width: 26px;
  height: 26px;
}
.kb-spell .spell-icon-img,
.sk-ic .spell-icon-img,
.kit-icon .spell-icon-img,
.sh-spell-ic .spell-icon-img,
.spell-inline-ic .spell-icon-img {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.12em;
}
.spell-inline-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.spell-inline-ic,
.sh-spell-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35em;
  height: 1.35em;
  border-radius: 4px;
  flex-shrink: 0;
}
.spell-card.unaffordable { opacity: 0.45; filter: grayscale(0.6); }
.spell-card.spell-coming-soon { border-color: rgba(34, 211, 238, 0.45); }
.spell-card.spell-disabled { border-color: rgba(251, 113, 133, 0.4); opacity: 0.7; }
.spell-info { flex: 1; }
.spell-name { font-size: 14px; font-weight: 700; color: #fff; }
.spell-key { font-size: 12px; color: #9b8fd6; }
.upgrade-note { font-size: 11px; color: #8de08d; margin-top: 3px; font-weight: 600; }
.mo-stats { width: 100%; border-collapse: collapse; margin: 6px 0 4px; font-size: 14px; }
.mo-stats th { color: #9b8fd6; font-weight: 600; text-align: right; padding: 3px 8px; font-size: 11px; text-transform: uppercase; }
.mo-stats th:first-child { text-align: left; }
.mo-stats td { padding: 3px 8px; text-align: right; color: #e7e2ff; }
.mo-stats td:first-child { text-align: left; }
.mo-stats tr.you td { color: #ffd479; font-weight: 700; }
.mo-break { font-size: 12px; color: #b6afdc; margin-top: 10px; }
.mo-break b { color: #ff9a5a; }
.spell-lvl { font-size: 12px; color: #b6afdc; margin-top: 2px; }
.lvl-dots { letter-spacing: 1px; }
.lvl-dots .on { color: #ffd479; }
.lvl-dots .off { color: #4a4470; }
.buy-btn {
  padding: 8px 12px; border-radius: 9px; border: 1px solid rgba(255,212,121,0.4);
  background: rgba(70,58,20,0.5); color: #ffd479; font-weight: 700;
  font-size: 14px; cursor: pointer; white-space: nowrap; transition: all .1s ease;
}
.buy-btn:hover:not(:disabled) { background: rgba(120,98,30,0.7); }
.buy-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.buy-btn.maxed,
.buy-btn.maxed:disabled {
  color: #ffd479;
  border-color: rgba(255, 212, 121, 0.45);
  background: rgba(70, 58, 20, 0.5);
  opacity: 1;
  cursor: default;
}

/* ---------- Menu inputs & online/lobby ---------- */
.text-input {
  width: 100%; padding: 11px 14px; font-size: 16px;
  background: rgba(15,12,32,0.8); color: #fff;
  border: 1px solid rgba(150,130,255,0.35); border-radius: 10px;
  text-align: center; font-family: inherit; outline: none;
}
.text-input:focus { border-color: #b9a6ff; box-shadow: 0 0 14px rgba(125,99,255,0.4); }
.text-input::placeholder { color: #6b6690; }
.text-input.locked { opacity: 0.7; cursor: not-allowed; }
.gold-input { width: 110px; flex: none; padding: 8px 10px; }

/* Account banner (signed in) + Google sign-in button on the home hub. */
.account-box { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; font-size: 14px; color: #cfc7f4; }
.account-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.account-name b { color: #ffd479; }
.account-box .link-btn { margin-left: auto; }

/* Home hub: a calm landing screen — name, then pick how to play. */
.panel.home {
  position: relative;
  width: min(420px, 92vw);
}
/* Pre-alpha sign sits outside the clipped geom panel. */
.panel.home.panel--geom,
.panel.home.panel--geom-home,
.panel.home.panel--geom-svg { overflow: visible; }
/* Home menu: road-work style caution diamond (tucked in corner) */
.pre-alpha-work-sign {
  position: absolute;
  top: -46px;
  right: -20px;
  z-index: 3;
  pointer-events: none;
  transform: rotate(-14deg);
  transform-origin: top right;
  filter: drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.4));
}
.pre-alpha-work-sign-diamond {
  width: 83px;
  height: 83px;
  transform: rotate(75deg);
  background: #f5c518;
  border: 5px solid #111;
  box-shadow:
    inset 0 0 0 3px #111,
    inset 0 0 0 7px #f5c518;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pre-alpha-work-sign-label {
  transform: rotate(-45deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.04em;
  color: #111;
  text-align: center;
  text-transform: uppercase;
}
.home .blurb { margin-bottom: 20px; }
.home-actions { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 2px; }

.home-menu {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(150, 130, 255, 0.18);
}
.home-menu-btn {
  flex: 1;
  min-width: 0;
  margin-top: 0;
  padding: 10px 6px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #9b8fd6;
  font: 600 13px "Trebuchet MS", sans-serif;
  text-align: center;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.home-menu-btn:hover {
  color: #d8d3f5;
  background: rgba(90, 75, 176, 0.22);
}
/* Sub-views anchor a back link in the top-left; reserve vertical space so titles never sit under it. */
.panel.sub { position: relative; }
.panel.sub:has(> .back-btn) {
  padding-top: max(34px, var(--back-btn-block));
}
.back-btn {
  position: absolute; top: var(--back-btn-top); left: var(--back-btn-left);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-width: var(--back-btn-min-size);
  min-height: var(--back-btn-min-size);
  padding: 10px 12px;
  background: none; border: none; color: #9b8fd6;
  font: 600 14px "Trebuchet MS", sans-serif; cursor: pointer; pointer-events: auto;
  transition: color 0.15s;
}
.back-btn:hover { color: #d8d3f5; }
.panel.sub .shop-title { margin-top: 0; }

/* ---------- Learn to play ---------- */
.learn-panel {
  width: min(560px, 94vw);
  max-height: 88vh;
  overflow: hidden;
  text-align: left;
  padding: max(28px, var(--back-btn-block)) 28px 22px;
}
.learn-panel .shop-title {
  margin-top: 0;
}
.learn-scroll {
  max-height: calc(88vh - 120px);
  overflow-y: auto;
  padding: 16px 6px 28px 0;
  margin-top: 8px;
}
.learn-section { text-align: left; }
.learn-section + .learn-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(150, 130, 255, 0.15);
}
.learn-spellbook-btn {
  margin: 16px 0;
}
.learn-heading {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #e8e4ff;
}
.learn-text {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.55;
  color: #a59dd0;
}
.learn-text b { color: #d8d3f5; }
.learn-heading-sub {
  margin-top: 18px;
  font-size: 13px;
  color: #e8a060;
}
.learn-synergy-stage::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 3px;
  left: 50%;
  width: 1px;
  background: rgba(150, 130, 255, 0.35);
  pointer-events: none;
  z-index: 1;
}
.learn-synergy-labels {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  display: flex;
  pointer-events: none;
  z-index: 2;
}
.learn-synergy-label {
  flex: 1;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(232, 228, 255, 0.85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.learn-synergy-label-synergy {
  color: #ffb080;
}
.learn-synergy-label small {
  font-weight: 600;
  opacity: 0.85;
}
.learn-text .learn-inline-link {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  vertical-align: baseline;
}
.learn-caption {
  margin: 8px 0 0;
  font-size: 13px;
  font-style: italic;
  color: #7a7398;
  text-align: center;
}
.learn-preview-stage + .learn-preview-stage {
  margin-top: 18px;
}
.learn-preview-stage {
  position: relative;
  margin: 14px auto 0;
  max-width: 544px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(150, 130, 255, 0.22);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.learn-preview-canvas {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}
.learn-preview-loop {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(0, 0, 0, 0.35);
}
.learn-preview-loop-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #e85d1a, #ffb347);
}
.mode-block {
  margin: 14px 0; padding: 16px; border-radius: 14px;
  background: rgba(20,16,44,0.5); border: 1px solid rgba(150,130,255,0.15);
}
.mode-title { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #9b8fd6; margin-bottom: 10px; }
.mode-block-soon { opacity: 0.72; }
.coming-soon-hint {
  margin: 0; font-size: 16px; font-weight: 600; letter-spacing: 0.5px;
  color: #7a7398; text-align: center;
}

.join-row { display: flex; gap: 8px; margin-top: 10px; }
.code-input { flex: 1; text-transform: uppercase; letter-spacing: 4px; font-weight: 700; }

.alt-btn {
  padding: 12px 20px; font-size: 16px; font-weight: 700; letter-spacing: 1px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, #524078 0%, #382858 42%, #241840 100%);
  color: #ece8ff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  box-shadow:
    0 4px 0 #100818,
    0 6px 18px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(210, 190, 255, 0.22);
  transition: transform .08s ease, box-shadow .1s ease, background .12s ease, color .12s ease;
}
.alt-btn:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #645090 0%, #483470 42%, #302050 100%);
  color: #f8f6ff;
  box-shadow:
    0 5px 0 #100818,
    0 8px 22px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(230, 215, 255, 0.3);
}
.alt-btn:active {
  transform: translateY(2px);
  box-shadow:
    0 2px 0 #100818,
    0 3px 10px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(190, 170, 240, 0.16);
}
.alt-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.alt-btn:disabled:hover {
  transform: none;
  background: linear-gradient(180deg, #524078 0%, #382858 42%, #241840 100%);
  color: #ece8ff;
  box-shadow: none;
}
.wide-btn { width: 100%; }

.link-btn {
  margin-top: 14px; background: none; border: none; color: #9b8fd6;
  font-size: 14px; cursor: pointer; font-family: inherit;
}
.link-btn:hover { color: #d8d3f5; }

/* Feedback prompt + report link above panel back/leave actions */
.panel-feedback {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(150, 130, 255, 0.18);
  text-align: center;
}
.panel-feedback-prompt {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.45;
  color: #c8c2ec;
}
.panel-feedback .link-btn {
  margin-top: 0;
  display: inline-block;
}

.menu-error { min-height: 18px; margin-top: 8px; color: #ff7a7a; font-size: 14px; font-weight: 600; }

/* ---------- Public game browser ---------- */
.visibility-toggle {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: 14px; color: #b6afdc; cursor: pointer; user-select: none;
}
.visibility-toggle input { width: 16px; height: 16px; accent-color: #5a4bb0; cursor: pointer; }

.browser { margin-top: 14px; }
.browser-title {
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: #9b8fd6; margin-bottom: 8px; text-align: left;
}
.browser-title-sub { margin-top: 14px; color: #7ec8e3; }
.room-list { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; }
.room-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: rgba(30,26,62,0.7); border: 1px solid rgba(150,130,255,0.2); border-radius: 10px;
}
.room-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; text-align: left; min-width: 0; }
.room-host { font-weight: 700; color: #fff; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-stats { font-size: 12px; color: #9b8fd6; }
.room-row .room-watch {
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-color: rgba(34, 211, 238, 0.45);
  color: #a5f3fc;
}
.room-row .room-join {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 700;
}
.room-empty { font-size: 14px; color: #b6afdc; padding: 12px; text-align: center; }

/* Match-history detail (reuses .mo-stats for the standings table). */
.history-detail {
  position: relative;
  text-align: left;
  margin-top: 8px;
}
.history-detail:has(> .back-btn) {
  padding-top: var(--back-btn-block);
}
.history-detail .history-head { margin-top: 0; }

/* ---------- Audio credits ---------- */
.audio-credits-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 14px;
  max-height: min(52vh, 380px); overflow-y: auto;
  text-align: left;
}
.audio-credit {
  padding: 12px 14px;
  background: rgba(30, 26, 58, 0.65);
  border: 1px solid rgba(130, 120, 210, 0.3);
  border-radius: 10px;
}
.audio-credit-file {
  font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
  color: #9aa8e8; margin-bottom: 6px;
  font-family: ui-monospace, monospace;
}
.audio-credit-play {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px; flex-wrap: wrap;
}
.audio-credit-play-btn {
  font: 600 12px/1 ui-monospace, monospace;
  letter-spacing: 0.4px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 154, 90, 0.45);
  background: rgba(255, 120, 60, 0.15);
  color: #ffd0a8;
  cursor: pointer;
}
.audio-credit-play-btn:hover { background: rgba(255, 120, 60, 0.28); }
.audio-credit-play-btn.is-playing {
  border-color: rgba(160, 255, 200, 0.55);
  background: rgba(80, 200, 140, 0.2);
  color: #c8ffe8;
}
.audio-credit-gain {
  font-size: 11px; font-family: ui-monospace, monospace;
  color: #8a9ad8;
}
.audio-credit-artist { font-size: 14px; color: #e8ecff; line-height: 1.45; }
.audio-credit-artist a { color: #b8c8ff; }
.audio-credit-lic { font-size: 12px; color: #a8b0d8; margin-top: 6px; line-height: 1.4; }
.audio-credit-lic a { color: #c4b0ff; }
.audio-credit-src {
  display: inline-block; margin-top: 8px;
  font-size: 12px; font-weight: 600; color: #ff9a5a;
  text-decoration: none;
}
.audio-credit-src:hover { text-decoration: underline; }
.history-head { font-size: 14px; color: #cfc7f4; margin: 6px 0 10px; }
.history-head b { color: #ffd479; }

/* ---------- Lobby ---------- */
.lobby-hint { font-size: 14px; color: #b6afdc; margin: 6px 0; }
.room-code-row {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6px 0 18px;
}
.room-code {
  font-size: 46px; font-weight: 800; letter-spacing: 12px; color: #ffd479;
  text-shadow: 0 0 24px rgba(255,212,121,0.5); padding-left: 12px;
}
.copy-btn {
  font: 600 14px 'Trebuchet MS', sans-serif; letter-spacing: 1px;
  color: #cfc7ef; background: rgba(110,100,200,0.18);
  border: 1px solid rgba(150,140,220,0.45); border-radius: 8px;
  padding: 8px 14px; cursor: pointer; pointer-events: auto;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.05s;
}
.copy-btn:hover { background: rgba(130,118,225,0.32); border-color: rgba(180,168,255,0.7); }
.copy-btn:active { transform: scale(0.94); }
.copy-btn.copied { color: #9be39b; border-color: rgba(120,210,120,0.7); background: rgba(70,150,80,0.22); }
.lobby-members {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px;
  max-height: 280px; overflow-y: auto;
}
.lobby-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  background: rgba(30,26,62,0.7); border: 1px solid rgba(150,130,255,0.2); border-radius: 10px;
}
.lobby-swatch { width: 16px; height: 16px; border-radius: 4px; }
.lobby-name { flex: 1; text-align: left; font-weight: 600; color: #fff; }
.lobby-tag { font-size: 11px; color: #9b8fd6; text-transform: uppercase; letter-spacing: 1px; }
.lobby-tag.host { color: #ffd479; }
.lobby-tag.bot { color: #8de08d; }
.lobby-tag.spec { color: #7ec8e3; }
.team-chip {
  font-size: 11px; font-weight: 700; color: #0c0a1e;
  padding: 3px 8px; border-radius: 7px; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
}
.team-chip.clickable { cursor: pointer; }
.team-chip.clickable:hover { filter: brightness(1.12); transform: translateY(-1px); }
.bot-skill-select {
  font-size: 11px; font-weight: 600; color: #e8e4ff;
  background: rgba(20, 16, 48, 0.9); border: 1px solid rgba(150, 130, 255, 0.35);
  border-radius: 7px; padding: 4px 6px; max-width: 7.5rem;
  cursor: pointer;
}
.bot-skill-select:focus { outline: none; border-color: rgba(180, 160, 255, 0.6); }
.bot-skill-label {
  font-size: 11px; font-weight: 600; color: #b6afdc;
  padding: 3px 8px; border-radius: 7px;
  background: rgba(20, 16, 48, 0.55); white-space: nowrap;
}
.lobby-role-btn {
  font-size: 12px; padding: 5px 12px; flex-shrink: 0;
  border-radius: 8px; white-space: nowrap;
}

.bots-row { display: flex; align-items: center; justify-content: space-between; }
.bots-row label { margin-bottom: 0; }
.lobby-dungeon-name { font-weight: 700; color: #ffd479; letter-spacing: 0.02em; }
.lobby-starters { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.75rem 0; }
.starter-select {
  min-width: 10rem; padding: 0.35rem 0.5rem; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.15); background: rgba(0,0,0,0.35); color: #e8e4ff;
}
.stepper { display: flex; align-items: center; gap: 14px; }
.stepper span { font-size: 20px; font-weight: 800; color: #fff; min-width: 22px; text-align: center; }
.step-btn {
  width: 36px; height: 36px; border-radius: 9px; font-size: 22px; font-weight: 700;
  background: rgba(40,34,80,0.8); color: #d8d3f5; border: 1px solid rgba(150,130,255,0.3); cursor: pointer;
}
.step-btn:hover { background: rgba(70,58,140,0.9); }

/* ---------- Reconnect overlay ---------- */
.banner.reconnect {
  position: fixed;
  /* 20px below a single-line error toast (see .toast top/padding/font-size) */
  top: calc(28px + 12px + 12px + 16px * 1.25 + 20px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 119;
  white-space: nowrap;
  color: #ffd479; border-color: rgba(255,212,121,0.4);
  font-size: 26px; letter-spacing: 2px;
}

/* ---------- Shop sections (spells + items) ---------- */
.shop-scroll { max-height: 62vh; overflow-y: auto; padding-right: 6px; margin-bottom: 16px; }
.shop-section-title {
  font-size: 14px; letter-spacing: 3px; color: #9b8fd6; text-transform: uppercase;
  margin: 6px 0 10px; text-align: left;
}
.spell-card.owned { border-color: rgba(255,212,121,0.35); }
.spell-card.locked { opacity: 0.96; }
.buy-btn.unlock { color: #8de08d; border-color: rgba(141,224,141,0.4); background: rgba(30,70,30,0.4); }

/* ---------- Shop slot grouping (2 rows: 1234 / QWER) ---------- */
.shop-slots {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: visible;
  padding: 4px 2px 10px;
  margin-bottom: 8px;
}
.shop-slots-row {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: stretch;
}
.shop-slots-row .slot-block {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

.slot-block {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(20, 16, 44, 0.45);
  border: 1px solid rgba(150, 130, 255, 0.12);
}
.slot-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 6px;
  font-size: 14px;
  letter-spacing: 1px;
  color: #9b8fd6;
  text-transform: uppercase;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(150, 130, 255, 0.14);
}
.slot-head .k { font-size: 14px; margin-bottom: 0; }
.slot-body { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.slot-unlock-hint {
  font-size: 10px;
  color: #8a82b8;
  padding: 0 2px;
  line-height: 1.35;
}
.slot-options { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.slot-options .spell-card { flex: 0 0 auto; width: 100%; padding: 8px 10px; }
.slot-block .spell-card .spell-name { font-size: 14px; }

/* Spell card + passive tree — one expanding unit */
.spell-skill-unit {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(150, 130, 255, 0.26);
  background: rgba(18, 14, 38, 0.72);
  overflow: visible;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}
.spell-skill-unit.owned {
  border-color: rgba(255, 212, 121, 0.4);
  box-shadow:
    inset 0 0 0 1px rgba(255, 220, 140, 0.06),
    0 0 16px rgba(255, 180, 60, 0.08);
}
.spell-skill-unit > .spell-card {
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  border: none;
  border-radius: 12px 12px 0 0;
  background: rgba(30, 26, 62, 0.82);
  box-shadow: none;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(150, 130, 255, 0.14);
}
.spell-skill-unit.owned > .spell-card {
  background: rgba(36, 28, 58, 0.9);
  border-bottom-color: rgba(255, 212, 121, 0.2);
}
.spell-skill-unit > .skill-tree {
  flex: 1 1 auto;
  margin: 0;
  border: none;
  border-radius: 0 0 12px 12px;
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(90, 70, 160, 0.16), transparent 72%),
    rgba(14, 11, 32, 0.45);
  padding: 12px 10px 10px;
  min-height: 72px;
}
.spell-skill-unit > .skill-tree::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(150, 130, 255, 0.22), transparent);
  pointer-events: none;
}

/* Skill tree: passive tiers grow downward from the parent spell */
.slot-skill-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1;
}
.skill-tree {
  flex: 1 1 auto;
  width: 100%;
  position: relative;
  min-height: 88px;
  padding: 10px 8px;
  border-radius: 12px;
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(90, 70, 160, 0.14), transparent 70%),
    rgba(14, 11, 32, 0.62);
  border: 1px solid rgba(150, 130, 255, 0.2);
  overflow: visible;
}
.skill-tree-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.spell-skill-unit .skill-tree .skill-tree-lines {
  inset: auto;
  right: auto;
  bottom: auto;
}
.skill-tree-edge {
  stroke: rgba(120, 108, 170, 0.35);
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke 0.2s ease, stroke-width 0.2s ease;
}
.skill-tree-edge.edge-lit {
  stroke: rgba(255, 200, 90, 0.55);
  stroke-width: 2.25;
}
.skill-tree-edge.edge-complete {
  stroke: rgba(255, 220, 120, 0.92);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 4px rgba(255, 180, 60, 0.75));
}
.skill-tree-edge.edge-anim-draw {
  stroke: rgba(255, 220, 120, 0.92);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 5px rgba(255, 180, 60, 0.8));
}
.skill-tree-joint {
  fill: rgba(100, 92, 150, 0.55);
  stroke: rgba(60, 52, 100, 0.9);
  stroke-width: 1;
}
.skill-tree-joint.joint-ready {
  fill: rgba(180, 150, 90, 0.65);
  stroke: rgba(255, 210, 100, 0.45);
}
.skill-tree-joint.joint-lit {
  fill: rgba(255, 220, 130, 0.95);
  stroke: rgba(255, 240, 180, 0.7);
  filter: drop-shadow(0 0 4px rgba(255, 200, 80, 0.65));
}
.skill-tree-joint.joint-anim-start {
  animation: skill-joint-flash-in 0.22s ease-out forwards;
}
.skill-tree-joint.joint-anim-pop {
  animation: skill-joint-pop 0.34s ease-out forwards;
}
@keyframes skill-joint-flash-in {
  0% { fill: rgba(100, 92, 150, 0.55); filter: none; }
  100% { fill: rgba(255, 220, 130, 0.95); filter: drop-shadow(0 0 5px rgba(255, 200, 80, 0.75)); }
}
@keyframes skill-joint-pop {
  0% { fill: rgba(180, 150, 90, 0.65); filter: none; }
  55% { fill: rgba(255, 240, 180, 1); filter: drop-shadow(0 0 7px rgba(255, 210, 90, 0.95)); }
  100% { fill: rgba(255, 220, 130, 0.95); filter: drop-shadow(0 0 4px rgba(255, 200, 80, 0.65)); }
}
.skill-tree-grid {
  position: relative;
  z-index: 1;
  display: grid;
  column-gap: 8px;
  row-gap: 28px;
  align-items: stretch;
  width: 100%;
}
.passive-node {
  position: relative;
  z-index: 1;
  padding: 8px 10px 8px 8px;
  border-radius: 12px;
  background: rgba(24, 20, 48, 0.96);
  border: 1px solid rgba(130, 118, 190, 0.32);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.spell-skill-unit .passive-node {
  background: rgba(22, 18, 44, 0.94);
  border-color: rgba(130, 118, 190, 0.28);
}
.passive-node.owned.owned-reveal,
.passive-node.owned:not(.just-unlocked) {
  border-color: rgba(255, 200, 90, 0.55);
  background: rgba(36, 28, 58, 0.95);
  box-shadow:
    inset 0 0 22px rgba(255, 170, 50, 0.2),
    inset 0 0 44px rgba(255, 130, 40, 0.09),
    inset 0 0 0 1px rgba(255, 220, 140, 0.14),
    0 0 14px rgba(255, 180, 60, 0.14);
}
.passive-node.owned.just-unlocked:not(.owned-reveal):not(.synergy) {
  border-color: rgba(130, 118, 190, 0.32);
  background: rgba(24, 20, 48, 0.96);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.passive-node.owned.just-unlocked.border-revealing {
  --passive-unlock-border-ms: 550ms;
  border-color: transparent;
  overflow: visible;
}
.passive-node.owned.border-revealing .passive-node-orb::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(circle at 35% 28%, rgba(255, 240, 180, 0.95), rgba(200, 140, 40, 0.85) 70%);
  box-shadow: inset 0 0 12px rgba(255, 200, 80, 0.35);
  clip-path: circle(0% at 50% 50%);
  animation: passive-center-fill var(--passive-unlock-border-ms) ease-out forwards;
  pointer-events: none;
}
.passive-border-trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  overflow: visible;
}
.passive-border-trace path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: rgba(255, 212, 121, 0.98);
  filter: drop-shadow(0 0 4px rgba(255, 180, 60, 0.75));
}
.passive-node.synergy .passive-border-trace path {
  stroke: rgba(255, 160, 90, 0.98);
  filter: drop-shadow(0 0 4px rgba(255, 120, 50, 0.75));
}
.passive-node.locked {
  opacity: 0.5;
}
.passive-node.unaffordable { opacity: 0.68; }
.passive-node-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}
.passive-node-orb {
  position: relative;
  overflow: hidden;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, rgba(160, 150, 220, 0.5), rgba(50, 42, 90, 0.95) 68%);
  border: 2px solid rgba(140, 128, 200, 0.45);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.35);
}
.passive-node-orb .synergy-orb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.passive-node.synergy .passive-node-orb .synergy-orb-icon {
  transform: rotate(-45deg);
}
.passive-node-orb .spell-icon-img {
  width: 72%;
  height: 72%;
  object-fit: contain;
}
.passive-node.synergy .passive-node-orb .spell-icon-img {
  width: 88%;
  height: 88%;
}
.passive-node.owned.owned-reveal .passive-node-orb,
.passive-node.owned:not(.just-unlocked) .passive-node-orb {
  background: radial-gradient(circle at 35% 28%, rgba(255, 240, 180, 0.95), rgba(200, 140, 40, 0.85) 70%);
  border-color: rgba(255, 230, 150, 0.85);
  box-shadow:
    0 0 10px rgba(255, 190, 70, 0.55),
    inset 0 0 14px rgba(255, 200, 80, 0.35),
    inset 0 -2px 4px rgba(120, 70, 10, 0.35);
}
.passive-node.owned.just-unlocked:not(.owned-reveal):not(.synergy) .passive-node-orb {
  background: radial-gradient(circle at 35% 30%, rgba(160, 150, 220, 0.5), rgba(50, 42, 90, 0.95) 68%);
  border-color: rgba(140, 128, 200, 0.45);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.35);
}
@keyframes passive-center-fill {
  from { clip-path: circle(0% at 50% 50%); }
  to { clip-path: circle(150% at 50% 50%); }
}
.passive-node.locked .passive-node-orb {
  background: radial-gradient(circle at 35% 30%, rgba(90, 85, 120, 0.35), rgba(35, 32, 55, 0.9) 68%);
  border-color: rgba(80, 75, 110, 0.4);
}
.passive-node-text { flex: 1; min-width: 0; }
.passive-node-name {
  font-size: 14px;
  font-weight: 700;
  color: #ece8ff;
  margin-bottom: 2px;
  line-height: 1.2;
}
.passive-node-desc {
  font-size: 12px;
  line-height: 1.35;
  color: #9b94c8;
}
.passive-node .buy-btn {
  width: 100%;
  margin-top: 2px;
  font-size: 11px;
  padding: 4px 8px;
}
.passive-node .buy-btn:not(.maxed):not(:disabled) {
  color: #8de08d;
  border-color: rgba(141, 224, 141, 0.45);
  background: rgba(28, 58, 32, 0.55);
}
.passive-node .buy-btn:not(.maxed):not(:disabled):hover {
  background: rgba(40, 82, 44, 0.72);
  border-color: rgba(141, 224, 141, 0.6);
}
.passive-node .buy-btn.maxed {
  color: #ffd479;
  border-color: rgba(255, 212, 121, 0.45);
  background: rgba(70, 58, 20, 0.5);
  opacity: 1;
  cursor: default;
}

/* synergy passives — full-width row when alone; side-by-side when a spell has 2+ */
.passive-node.synergy {
  border-color: rgba(255, 120, 60, 0.42);
  background: linear-gradient(145deg, rgba(42, 22, 52, 0.94), rgba(28, 18, 48, 0.92));
  box-shadow:
    inset 0 0 0 1px rgba(255, 140, 80, 0.06),
    0 0 12px rgba(255, 90, 40, 0.08);
}
.skill-tree-grid-multi-synergy .passive-node.synergy .synergy-partner-card {
  max-width: none;
}
.skill-tree-grid-multi-synergy .passive-node.synergy .passive-node-desc {
  font-size: 0.82em;
  line-height: 1.25;
}
.passive-node.synergy .passive-node-top {
  margin-bottom: 4px;
}
.passive-node.synergy .passive-synergy-pair {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 140, 80, 0.22);
}
.passive-node.synergy .passive-synergy-pair-label {
  margin-bottom: 6px;
}
.passive-node.synergy .synergy-partner-card {
  max-width: 280px;
}
.passive-node.synergy .passive-node-orb {
  border-radius: 6px;
  transform: rotate(45deg);
  background: radial-gradient(circle at 35% 30%, rgba(255, 180, 100, 0.65), rgba(180, 60, 30, 0.9) 68%);
  border: 2px solid rgba(255, 150, 80, 0.55);
  box-shadow:
    0 0 10px rgba(255, 100, 50, 0.35),
    inset 0 -3px 6px rgba(80, 20, 10, 0.35);
}
.passive-node.synergy.owned.owned-reveal,
.passive-node.synergy.owned:not(.just-unlocked) {
  border-color: rgba(255, 180, 90, 0.7);
  box-shadow:
    inset 0 0 22px rgba(255, 120, 50, 0.18),
    inset 0 0 44px rgba(255, 90, 40, 0.08),
    inset 0 0 0 1px rgba(255, 200, 120, 0.12),
    0 0 18px rgba(255, 130, 50, 0.22);
}
.passive-node.synergy.owned.just-unlocked:not(.owned-reveal) {
  border-color: rgba(255, 120, 60, 0.42);
  background: linear-gradient(145deg, rgba(42, 22, 52, 0.94), rgba(28, 18, 48, 0.92));
  box-shadow:
    inset 0 0 0 1px rgba(255, 140, 80, 0.06),
    0 0 12px rgba(255, 90, 40, 0.08);
}
.passive-node.synergy.owned.just-unlocked:not(.owned-reveal) .passive-node-orb {
  background: radial-gradient(circle at 35% 30%, rgba(255, 180, 100, 0.65), rgba(180, 60, 30, 0.9) 68%);
  border-color: rgba(255, 150, 80, 0.55);
  box-shadow:
    0 0 10px rgba(255, 100, 50, 0.35),
    inset 0 -3px 6px rgba(80, 20, 10, 0.35);
}
.passive-node.synergy.owned.owned-reveal .passive-node-orb,
.passive-node.synergy.owned:not(.just-unlocked) .passive-node-orb {
  background: radial-gradient(circle at 35% 28%, rgba(255, 240, 200, 0.98), rgba(255, 140, 50, 0.9) 70%);
  border-color: rgba(255, 220, 150, 0.9);
  box-shadow:
    0 0 14px rgba(255, 160, 60, 0.65),
    inset 0 0 14px rgba(255, 180, 80, 0.35),
    inset 0 -2px 4px rgba(120, 50, 10, 0.35);
}
.passive-node.synergy.owned.border-revealing {
  overflow: hidden;
}
.passive-node.synergy.owned.border-revealing::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(48, 32, 42, 0.98), rgba(36, 28, 58, 0.96));
  box-shadow:
    inset 0 0 22px rgba(255, 170, 50, 0.22),
    inset 0 0 44px rgba(255, 130, 40, 0.1);
  clip-path: circle(0% at 50% 50%);
  animation: passive-center-fill var(--passive-unlock-border-ms) ease-out forwards;
}
.passive-node.synergy.owned.border-revealing .passive-node-top,
.passive-node.synergy.owned.border-revealing .passive-synergy-pair,
.passive-node.synergy.owned.border-revealing .buy-btn {
  position: relative;
  z-index: 2;
}
.passive-node.synergy.owned.border-revealing .passive-border-trace {
  z-index: 5;
}
.passive-node.synergy.owned.border-revealing .passive-border-trace path {
  stroke: rgba(255, 212, 121, 0.98);
  filter: drop-shadow(0 0 4px rgba(255, 180, 60, 0.75));
}
.passive-node.synergy.owned.border-revealing .passive-node-orb::after {
  background: radial-gradient(circle at 35% 28%, rgba(255, 240, 200, 0.98), rgba(255, 140, 50, 0.9) 70%);
  box-shadow: inset 0 0 12px rgba(255, 180, 80, 0.35);
}
.passive-node.synergy.locked {
  opacity: 0.62;
}
.passive-node.synergy.locked .passive-node-orb {
  background: radial-gradient(circle at 35% 30%, rgba(120, 70, 90, 0.4), rgba(40, 28, 55, 0.92) 68%);
  border-color: rgba(100, 70, 90, 0.45);
}
.passive-node-tag {
  display: inline-block;
  position: relative;
  overflow: hidden;
  margin-top: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffd0a8;
  background: rgba(255, 110, 50, 0.18);
  border: 1px solid rgba(255, 140, 80, 0.35);
}
.passive-node.synergy.owned.owned-reveal .passive-node-tag,
.passive-node.synergy.owned:not(.just-unlocked) .passive-node-tag {
  color: #ffe8c0;
  background: rgba(255, 160, 60, 0.28);
  border-color: rgba(255, 200, 120, 0.55);
}
.passive-node.synergy.owned.border-revealing .passive-node-tag {
  z-index: 2;
}
.passive-node.synergy.owned.border-revealing .passive-node-tag::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 160, 60, 0.32);
  border: 1px solid rgba(255, 200, 120, 0.55);
  clip-path: circle(0% at 50% 50%);
  animation: passive-center-fill var(--passive-unlock-border-ms) ease-out forwards;
  z-index: -1;
}
.passive-node.synergy.owned.border-revealing .passive-node-tag {
  animation: synergy-tag-golden-text var(--passive-unlock-border-ms) ease-out forwards;
}
@keyframes synergy-tag-golden-text {
  to { color: #ffe8c0; }
}
.passive-node.synergy .buy-btn {
  font-size: 10px;
  line-height: 1.25;
  white-space: normal;
  min-height: 28px;
}
.passive-synergy-pair {
  margin: 6px 0 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 140, 80, 0.2);
}
.passive-synergy-pair-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c9a080;
  margin-bottom: 4px;
}
.synergy-partner-card {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 5px 7px;
  border-radius: 8px;
  background: rgba(18, 14, 36, 0.75);
  border: 1px solid rgba(255, 140, 80, 0.28);
}
.synergy-partner-card.unlocked {
  border-color: rgba(255, 180, 100, 0.45);
  background: rgba(32, 20, 40, 0.85);
}
.synergy-partner-card.locked-partner {
  opacity: 0.72;
}
.synergy-partner-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: rgba(255, 170, 90, 0.85);
  line-height: 1;
}
.synergy-partner-link svg {
  display: block;
  width: 14px;
  height: 14px;
}
.synergy-partner-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1;
}
.synergy-partner-name {
  font-size: 14px;
  font-weight: 700;
  color: #f2e8ff;
  line-height: 1.2;
}
.synergy-partner-slot {
  font-size: 12px;
  color: #9b94c8;
  line-height: 1.2;
  margin-left: 2px;
}

/* Swirling border on the partner spell card when hovering a synergy passive elsewhere. */
@property --synergy-border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.spell-card.synergy-partner-highlight {
  position: relative;
  isolation: isolate;
  border-color: transparent !important;
  z-index: 4;
  overflow: visible;
}
.synergy-partner-ring {
  position: absolute;
  inset: -3px;
  border-radius: 14px;
  padding: 3px;
  background: conic-gradient(
    from var(--synergy-border-angle),
    rgba(255, 150, 60, 0.95),
    rgba(255, 230, 150, 0.9),
    rgba(255, 90, 40, 0.55),
    rgba(255, 180, 100, 0.85),
    rgba(255, 150, 60, 0.95)
  );
  animation: synergyPartnerBorderSpin 2.4s linear infinite;
  pointer-events: none;
  z-index: 0;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.spell-card.synergy-partner-highlight > :not(.synergy-partner-ring) {
  position: relative;
  z-index: 1;
}
.slot-block,
.slot-options,
.spell-skill-unit {
  overflow: visible;
}

@keyframes synergyPartnerBorderSpin {
  to { --synergy-border-angle: 360deg; }
}

.spell-synergy-strip {
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 140, 80, 0.18);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.spell-synergy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 1.3;
  color: #b8aed8;
  opacity: 0.82;
}
.spell-synergy-row.ready {
  opacity: 1;
  color: #d8c8f0;
}
.spell-synergy-kind {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #e8a060;
}
.spell-synergy-node {
  font-weight: 700;
  color: #ffd8b0;
}
.spell-synergy-with {
  color: #8a82b0;
  font-style: italic;
}
.spell-synergy-spell-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1;
}
.spell-synergy-spell-name {
  font-weight: 600;
  color: #ece8ff;
}

/* current items the warlock owns */
.shop-owned {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px; margin: 0 0 12px; min-height: 22px;
}
.owned-label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #9b8fd6; }
.owned-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(30,26,62,0.8); border: 1px solid rgba(150,130,255,0.25);
  border-radius: 8px; padding: 3px 9px; font-size: 16px; color: #e7e2ff; cursor: default;
}
.owned-chip .owned-name { font-size: 12px; font-weight: 600; }
.owned-chip b { color: #ffd479; font-size: 12px; }
.owned-none { font-size: 12px; color: #6b6690; font-style: italic; }

/* lobby spell-keybinding reference */
.lobby-spells {
  margin: 14px 0 2px; padding-top: 12px;
  border-top: 1px solid rgba(150,130,255,0.18); text-align: left;
}
.lobby-spells-toggle {
  display: block; width: 100%; margin-bottom: 10px;
  background: none; border: none; cursor: pointer; pointer-events: auto;
  font: 700 11px "Trebuchet MS", sans-serif; letter-spacing: 1px;
  color: #9b8fd6; text-transform: uppercase; text-align: center;
  transition: color 0.15s;
}
.lobby-spells-toggle:hover { color: #d8d3f5; }
.spell-keys { display: flex; flex-direction: column; gap: 6px; max-height: 34vh; overflow-y: auto; padding-right: 4px; }
.sk-row { display: flex; align-items: flex-start; gap: 8px; }
.sk-row .k { margin-top: 1px; flex: 0 0 auto; }
.sk-list { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; }
.sk-spell {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: #d8d2f0;
  background: rgba(30,26,62,0.7); border: 1px solid rgba(150,130,255,0.18);
  border-left: 3px solid var(--c, #888); border-radius: 6px; padding: 2px 7px;
}
.sk-ic { font-size: 14px; }

/* ---------- Keybinds panel ---------- */
.keybind-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 52vh; overflow-y: auto; margin: 14px 0 18px; padding-right: 4px;
}
.kb-group-title {
  font: 700 12px "Trebuchet MS", sans-serif; letter-spacing: 0.08em;
  text-transform: uppercase; color: #b9a8ff;
  margin: 4px 2px 0; padding-bottom: 4px;
  border-bottom: 1px solid rgba(150,130,255,0.2);
}
.kb-group-title:not(:first-child) { margin-top: 12px; }
.kb-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(20,16,44,0.5); border: 1px solid rgba(150,130,255,0.15);
}
.kb-spells { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.kb-spell {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; font-size: 16px; border-radius: 7px;
  background: rgba(30,26,62,0.7); border: 1px solid rgba(150,130,255,0.18);
  border-bottom: 3px solid var(--c, #888);
}
.kb-key {
  flex: 0 0 auto; min-width: 88px; padding: 8px 12px;
  font: 700 14px "Trebuchet MS", sans-serif; color: #fff;
  background: rgba(60,50,110,0.8); border: 1px solid rgba(150,130,255,0.35);
  border-radius: 8px; cursor: pointer; transition: background .12s, border-color .12s;
}
.kb-key:hover { background: rgba(80,66,150,0.9); }
.kb-key.listening {
  min-width: 150px; color: #ffd479;
  background: rgba(90,75,176,0.35); border-color: #ffd479;
  animation: kbPulse 1s ease-in-out infinite;
}
@keyframes kbPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,212,121,0.4); } 50% { box-shadow: 0 0 0 4px rgba(255,212,121,0); } }

/* Live latency meter — top-right, left of the canvas gold/dmg HUD (right set in JS). */
.ping-meter {
  position: fixed; top: 12px; left: auto; z-index: 30;
  padding: 4px 9px; border-radius: 999px;
  font: 600 12px/1 'Trebuchet MS', Verdana, sans-serif;
  letter-spacing: 0.3px;
  background: rgba(20, 18, 40, 0.66);
  border: 1px solid rgba(150, 140, 220, 0.3);
  color: #cdd6ff; pointer-events: none; user-select: none;
}
.ping-meter.good { color: #7CFC9B; border-color: rgba(124, 252, 155, 0.4); }
.ping-meter.ok   { color: #ffd479; border-color: rgba(255, 212, 121, 0.4); }
.ping-meter.bad  { color: #ff7a6b; border-color: rgba(255, 122, 107, 0.45); }

.scoreboard-toggle {
  position: fixed;
  /* top/right set in JS to sit under gold + dmg (matchHudCorner) */
  z-index: 14;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(150, 140, 220, 0.45);
  background: rgba(20, 18, 40, 0.88);
  color: #d8d3f5;
  font: 600 14px/1 "Trebuchet MS", sans-serif;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  transition: background 0.15s, border-color 0.15s;
}
.scoreboard-toggle:hover {
  background: rgba(40, 36, 70, 0.95);
  border-color: rgba(180, 160, 255, 0.55);
}
.scoreboard-toggle:active { transform: scale(0.97); }
.scoreboard-toggle.hidden { display: none; }

.spectate-hud {
  position: fixed;
  left: 50%;
  bottom: 152px;
  transform: translateX(-50%);
  z-index: 14;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(20, 18, 40, 0.82);
  border: 1px solid rgba(126, 200, 227, 0.45);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
  user-select: none;
}
.spectate-hud.hidden { display: none; }
.spec-nav-btn {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(150, 140, 220, 0.45);
  background: rgba(40, 36, 70, 0.95);
  color: #d8d3f5;
  font: 700 18px/1 "Trebuchet MS", sans-serif;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, border-color 0.15s;
}
.spec-nav-btn:hover {
  background: rgba(55, 48, 95, 0.98);
  border-color: rgba(126, 200, 227, 0.65);
}
.spec-nav-btn:active { transform: scale(0.96); }
.spec-watch-eye { font-size: 16px; line-height: 1; opacity: 0.95; }
.spec-watch-label {
  font: 600 14px/1 "Trebuchet MS", sans-serif;
  color: #e8e6ff;
  min-width: 5ch;
  text-align: center;
}

.sandbox-copy-link {
  position: fixed; bottom: 62px; left: 12px;
  display: flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 14px;
  font-size: 14px; font-weight: 600; font-family: inherit; line-height: 1;
  background: rgba(20, 18, 40, 0.7);
  color: #cdd6ff;
  border: 1px solid rgba(150, 140, 220, 0.35);
  border-radius: 10px;
  cursor: pointer; pointer-events: auto; z-index: 20;
  transition: background 0.15s, border-color 0.15s, transform 0.05s, color 0.15s;
}
.sandbox-copy-link:hover { background: rgba(40, 36, 70, 0.85); border-color: rgba(150, 140, 220, 0.6); }
.sandbox-copy-link:active { transform: scale(0.95); }
.sandbox-copy-link.copied { color: #9be39b; border-color: rgba(120, 210, 120, 0.7); background: rgba(70, 150, 80, 0.22); }

@keyframes patchNotesOpen {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes patchNotesOpenMin {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.patch-notes-widget {
  position: fixed;
  bottom: 12px;
  left: 12px;
  z-index: 21;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  transform-origin: bottom left;
  text-align: left;
  background: linear-gradient(165deg, rgba(32, 26, 62, 0.97), rgba(14, 11, 34, 0.99));
  border: 1px solid rgba(160, 140, 255, 0.38);
  border-radius: 16px;
  box-shadow:
    0 14px 44px rgba(0, 0, 0, 0.48),
    0 0 56px rgba(100, 70, 220, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 48px rgba(70, 50, 160, 0.1);
  backdrop-filter: blur(8px);
}
.patch-notes-widget:not(.hidden):not(.patch-notes-widget-minimized) {
  animation: patchNotesOpen 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.patch-notes-widget-minimized:not(.hidden) {
  animation: patchNotesOpenMin 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .patch-notes-widget:not(.hidden) {
    animation: none;
  }
}
.patch-notes-widget-minimized {
  max-height: none;
  width: auto;
  min-width: 160px;
}
.patch-notes-widget-minimized .patch-notes-widget-title-btn {
  cursor: pointer;
}
.patch-notes-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 12px 0 14px;
  flex-shrink: 0;
}
.patch-notes-widget-minimized .patch-notes-widget-head {
  padding-bottom: 12px;
}
.patch-notes-widget-title-btn {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.patch-notes-widget-title {
  margin: 0;
  font: 700 13px/1.2 "Trebuchet MS", sans-serif;
  color: #e8dcc0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.patch-notes-widget-title-btn:hover .patch-notes-widget-title {
  color: #f5eed8;
}
.patch-notes-minimize {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(150, 140, 220, 0.35);
  background: rgba(20, 18, 40, 0.55);
  color: #cdd6ff;
  font: 700 16px/1 "Trebuchet MS", sans-serif;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.patch-notes-minimize:hover {
  background: rgba(40, 36, 70, 0.85);
  border-color: rgba(150, 140, 220, 0.6);
  color: #f0ecff;
}

.patch-notes-body {
  flex: 1;
  min-height: 0;
  margin-top: 20px;
  padding: 0 14px 14px;
  overflow-y: auto;
  text-align: left;
}
.patch-notes-widget-minimized .patch-notes-body {
  display: none;
}

.pn-release + .pn-release {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(180, 150, 80, 0.22);
}

.pn-release-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 14px;
}
.pn-version {
  margin: 0;
  font: 700 26px/1.1 "Trebuchet MS", sans-serif;
  color: #f0e6c8;
  letter-spacing: 0.02em;
}
.pn-date {
  font: 500 13px/1.2 "Trebuchet MS", sans-serif;
  color: #9b8fd6;
}

.pn-version-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.pn-version-label {
  font: 600 11px/1 "Trebuchet MS", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9b8fd6;
  flex-shrink: 0;
}
.pn-version-select {
  flex: 1;
  min-width: 0;
  font: 600 13px/1.2 "Trebuchet MS", sans-serif;
  padding: 7px 28px 7px 10px;
  border-radius: 6px;
  border: 1px solid rgba(150, 140, 220, 0.35);
  background: rgba(20, 18, 40, 0.75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23b8b0e8' d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: #f0e6c8;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.pn-version-select:hover,
.pn-version-select:focus {
  border-color: rgba(220, 190, 120, 0.45);
  outline: none;
}

.pn-cat-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(150, 140, 220, 0.15);
}
.pn-cat-link {
  font: 600 12px/1 "Trebuchet MS", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #c4b8ff;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
}
.pn-cat-link:hover {
  color: #f0ecff;
  background: rgba(80, 70, 130, 0.25);
}

.pn-section + .pn-section { margin-top: 28px; }
.pn-section-title {
  margin: 0 0 14px;
  font: 700 15px/1.2 "Trebuchet MS", sans-serif;
  color: #e8dcc0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pn-general-list {
  margin: 0;
  padding-left: 1.15em;
  color: #d8d4f0;
  font-size: 14px;
  line-height: 1.5;
}
.pn-general-list li + li { margin-top: 8px; }
.pn-general-list b { color: #f0ecff; }

.pn-spell-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pn-spell {
  border: 1px solid rgba(150, 140, 220, 0.18);
  border-left: 3px solid var(--pn-spell-color, rgba(180, 150, 220, 0.5));
  border-radius: 8px;
  background: rgba(12, 10, 28, 0.55);
  overflow: hidden;
}

.pn-spell-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(20, 16, 40, 0.65);
  cursor: default;
}
.pn-spell-head-previewable { cursor: pointer; }
.pn-spell-head-previewable:hover {
  background: rgba(30, 24, 55, 0.75);
}

.pn-spell-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pn-spell-icon .spell-icon-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.pn-spell-meta { min-width: 0; }
.pn-spell-name {
  font: 700 15px/1.2 "Trebuchet MS", sans-serif;
  color: #f0ecff;
}

.pn-change-list {
  list-style: none;
  margin: 0;
  padding: 6px 10px 10px;
}
.pn-change {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid rgba(150, 140, 220, 0.1);
  font-size: 13px;
  line-height: 1.45;
  color: #d0cce8;
}
.pn-change:first-child { border-top: none; }
.pn-change-text { flex: 1 1 180px; min-width: 0; }
.pn-change-text b { color: #f5f0ff; }

.pn-passive-ref {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  max-width: 100%;
  padding: 3px 8px 3px 4px;
  border-radius: 999px;
  border: 1px solid rgba(150, 140, 220, 0.35);
  background: rgba(25, 20, 50, 0.8);
  color: #e8e4ff;
  font: 600 12px/1.2 "Trebuchet MS", sans-serif;
  cursor: pointer;
  font-family: inherit;
}
.pn-passive-ref:hover {
  border-color: rgba(200, 180, 255, 0.55);
  background: rgba(40, 32, 70, 0.9);
}
.pn-passive-ref-synergy {
  border-color: rgba(255, 200, 100, 0.35);
  background: rgba(50, 38, 20, 0.55);
}
.pn-passive-ref-synergy:hover {
  border-color: rgba(255, 210, 120, 0.55);
}
.pn-passive-ref-previewable { cursor: help; }

.pn-passive-orb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: 0 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #c4b8ff 35%, #6b5aa8 100%);
  box-shadow: 0 0 6px rgba(180, 160, 255, 0.45);
}
.pn-passive-ref-synergy .pn-passive-orb {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
  border-radius: 3px;
  transform: rotate(45deg);
  background: radial-gradient(circle at 35% 30%, rgba(255, 180, 100, 0.65), rgba(180, 60, 30, 0.9) 68%);
  border: 1px solid rgba(255, 150, 80, 0.55);
  box-shadow:
    0 0 6px rgba(255, 100, 50, 0.35),
    inset 0 -2px 4px rgba(80, 20, 10, 0.35);
}
.pn-passive-ref-synergy .pn-passive-orb .synergy-orb-icon {
  transform: rotate(-45deg);
}
.pn-passive-orb .spell-icon-img {
  width: 88%;
  height: 88%;
  object-fit: contain;
}

.pn-passive-name { white-space: nowrap; }

.pn-partner-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
}
.pn-partner-icon .spell-icon-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.quit-btn {
  position: fixed; bottom: 12px; left: 12px;
  display: flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 14px;
  font-size: 14px; font-weight: 600; font-family: inherit; line-height: 1;
  background: rgba(20, 18, 40, 0.7);
  color: #cdd6ff;
  border: 1px solid rgba(150, 140, 220, 0.35);
  border-radius: 10px;
  cursor: pointer; pointer-events: auto; z-index: 210;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.quit-btn:hover { background: rgba(40, 36, 70, 0.85); border-color: rgba(150, 140, 220, 0.6); }
.quit-btn:active { transform: scale(0.95); }

/* ---------- Shop tabs: Spells | Items | Combat Report ---------- */
.shop-tabs {
  display: flex; gap: 6px; justify-content: center; margin: 0 0 12px;
}
.shop-tab {
  flex: 1 1 0;
  min-width: 0;
  max-width: 200px;
  font-size: 12px; letter-spacing: 2px; font-weight: 700; text-transform: uppercase;
  color: #9b8fd6; background: rgba(20,16,44,0.55);
  border: 1px solid rgba(150,130,255,0.22); border-radius: 9px;
  padding: 8px 14px; cursor: pointer; pointer-events: auto;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.shop-tab:hover { background: rgba(40,36,70,0.7); }
.shop-tab.active {
  color: #ffd479;
  border-color: rgba(255,212,121,0.45);
  background: rgba(46,38,20,0.45);
  box-shadow: var(--sel-inset-gold);
}

/* ---------- Combat report ---------- */
.shop-report { max-height: 62vh; overflow-y: auto; padding-right: 6px; margin-bottom: 16px; text-align: left; }
.mo-report { margin-top: 14px; text-align: left; max-height: 46vh; overflow-y: auto; padding-right: 6px; }
.cr-scope { display: flex; gap: 6px; justify-content: center; margin-bottom: 12px; }
.cr-tab {
  font-size: 11px; letter-spacing: 1px; font-weight: 600; text-transform: uppercase;
  color: #9b8fd6; background: rgba(20,16,44,0.55);
  border: 1px solid rgba(150,130,255,0.22); border-radius: 7px;
  padding: 5px 12px; cursor: pointer; pointer-events: auto;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.cr-tab.active {
  color: #ffd479;
  border-color: rgba(255,212,121,0.45);
  background: rgba(46,38,20,0.45);
  box-shadow: var(--sel-inset-gold);
}
.cr-summary {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 14px;
}
.cr-stat {
  flex: 1 1 80px; min-width: 70px; text-align: center;
  background: rgba(20,16,44,0.5); border: 1px solid rgba(150,130,255,0.18);
  border-radius: 10px; padding: 8px 6px;
}
.cr-stat b { display: block; font-size: 18px; color: #e7e2ff; }
.cr-stat span { font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; color: #9b8fd6; }
.cr-section { margin-bottom: 14px; }
.cr-title {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: #9b8fd6; margin: 0 0 8px;
}
.cr-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.cr-name { flex: 0 0 130px; font-size: 12px; color: #d8d2f0; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-sw { display: inline-block; width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.cr-track { flex: 1; height: 12px; background: rgba(20,16,44,0.7); border-radius: 6px; overflow: hidden; }
.cr-fill { height: 100%; border-radius: 6px; min-width: 2px; }
.cr-num { flex: 0 0 52px; text-align: right; font-size: 12px; font-weight: 600; color: #e7e2ff; }
.cr-sub {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  margin: 0 0 7px 138px; font-size: 11px; color: #8a83b8;
}
.cr-empty { font-size: 12px; color: #6b6690; font-style: italic; }

/* ---------- Mode segmented control (lobby) ---------- */
.mode-seg { display: flex; gap: 6px; }
.lobby-mode-seg { flex-wrap: wrap; justify-content: flex-end; max-width: min(100%, 320px); }
.lobby-mode-seg .mode-seg-btn {
  flex: 1 1 calc(50% - 3px);
  min-width: 0;
  padding: 6px 8px;
  font-size: 12px;
  letter-spacing: 0.2px;
}
.mode-seg-btn {
  padding: 8px 14px; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer;
  border: none;
  background: linear-gradient(180deg, #3a3050 0%, #241840 100%);
  color: #d4cef0;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 0 #100818, inset 0 1px 0 rgba(200, 180, 255, 0.1);
  transition: transform .08s ease, box-shadow .1s ease, background .12s ease, color .12s ease;
}
.mode-seg-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #483868 0%, #302050 100%);
  color: #ece8ff;
}
.mode-seg-btn.active {
  background: linear-gradient(180deg, #645090 0%, #483470 42%, #302050 100%);
  color: #f8f6ff;
  box-shadow:
    0 2px 0 #100818,
    inset 0 1px 0 rgba(230, 215, 255, 0.22),
    var(--sel-inset-purple);
}
.mode-seg-btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #100818, inset 0 1px 0 rgba(190, 170, 240, 0.14);
}
.mode-seg-btn:disabled { cursor: default; opacity: 0.9; }
.mode-seg-skill { flex-wrap: wrap; }
.mode-seg-skill .mode-seg-btn {
  flex: 1 1 calc(50% - 6px);
  min-width: 0;
  font-size: 12px;
  padding: 9px 6px;
}

.mm-format-row {
  display: flex;
  justify-content: center;
  margin: 14px 0 10px;
}
.mm-format-seg { justify-content: center; }
#matchmaker .field > label {
  text-align: center;
}

.mm-compact-seg {
  flex-wrap: nowrap;
  gap: 3px;
  width: 100%;
}
.mm-compact-seg button {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: 34px;
  padding: 0 2px;
  font-size: 13px;
  border-radius: 8px;
}
.mm-compact-seg button[data-mm-any] {
  font-size: 11px;
  letter-spacing: 0.2px;
}

.seg button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

.big-btn.mm-find-soon {
  opacity: 0.45;
  cursor: not-allowed;
  border: none;
  background: linear-gradient(180deg, #2a2438 0%, #1a1628 100%);
  color: #6a6488;
  text-shadow: none;
  box-shadow: none;
  transform: none;
}
.big-btn.mm-find-soon:hover { transform: none; box-shadow: none; }

/* Matchmaking — quick/find vs searching (same slot) */
.mm-match-actions { margin: 8px 0 4px; }
.mm-match-idle {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.mm-match-idle .mm-quick-btn { margin-bottom: 2px; }
.mm-match-idle .mm-quick-hint { margin: 0 0 10px; text-align: center; font-size: 12px; }
.mm-match-actions .mm-searching {
  margin: 0;
  width: 100%;
}
/* Matchmaking queue — searching / cancel */
.mm-searching {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(12, 10, 28, 0.55);
  border: 1px solid rgba(150, 130, 255, 0.12);
}
.mm-queue-status {
  margin: 0;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.5px;
  color: #c4b8ff;
  min-height: 1.4em;
}
.mm-searching.is-match .mm-queue-status {
  color: #a5f3fc;
  text-shadow: 0 0 12px rgba(34, 211, 238, 0.35);
}

/* Matchmaker ready check (modal) */
.mm-ready-check-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 4, 18, 0.82);
  backdrop-filter: blur(4px);
  pointer-events: auto;
  z-index: 31;
  animation: confirmFade 0.12s ease;
}
.mm-ready-check-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: min(420px, 92vw);
  padding: 22px 20px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(28, 24, 58, 0.98), rgba(14, 11, 32, 0.99));
  border: 1px solid rgba(34, 211, 238, 0.35);
  box-shadow: 0 0 32px rgba(34, 211, 238, 0.12);
}
.mm-ready-check-backdrop.is-resuming .mm-ready-check-box {
  border-color: rgba(150, 130, 255, 0.35);
  box-shadow: 0 0 24px rgba(150, 130, 255, 0.1);
}
.mm-ready-check-title {
  margin: 0;
  text-align: center;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #a5f3fc;
}
.mm-ready-check-timer {
  margin: 0;
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  color: #f5e6b8;
  text-shadow: 0 0 12px rgba(245, 230, 184, 0.25);
}
.mm-ready-check-status {
  margin: 0;
  text-align: center;
  color: #c4b8ff;
}
.mm-ready-check-roster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mm-ready-check-roster li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(20, 16, 40, 0.65);
  border: 1px solid rgba(150, 130, 255, 0.12);
  font-size: 14px;
}
.mm-ready-check-roster .mm-rc-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mm-ready-check-roster .mm-rc-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 6px;
  color: #94a3b8;
  background: rgba(80, 70, 120, 0.35);
}
.mm-ready-check-roster .mm-rc-tag.ready {
  color: #6ee7b7;
  background: rgba(16, 120, 80, 0.35);
}
.mm-ready-check-roster .mm-rc-tag.you-ready {
  color: #a5f3fc;
  background: rgba(34, 120, 160, 0.35);
}
.mm-ready-check-roster .mm-rc-tag.declined {
  color: #fecaca;
  background: rgba(180, 40, 50, 0.45);
}
.mm-ready-check-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.mm-ready-check-deny {
  align-self: center;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12px;
  color: #9b8fd6;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.mm-ready-check-deny:hover:not(:disabled) { color: #d8d3f5; }
.mm-ready-check-deny:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.mm-ready-check-backdrop.is-resuming .mm-ready-check-actions {
  display: none;
}
.mm-ready-check-box #mmReadyBtn.is-readied {
  background: linear-gradient(180deg, #3a7850 0%, #285838 42%, #183820 100%);
  color: #d8f5e0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow:
    0 4px 0 #0c2010,
    0 6px 18px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(180, 255, 200, 0.25);
  cursor: default;
  pointer-events: none;
}
.mm-cancel-queue-btn {
  position: relative;
  width: 100%;
  padding: 12px 18px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, #524078 0%, #382858 42%, #241840 100%);
  color: #ece8ff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  box-shadow:
    0 4px 0 #100818,
    0 6px 18px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(210, 190, 255, 0.22);
  transition: transform .08s ease, box-shadow .1s ease, background .12s ease, color .12s ease;
}
.mm-searching.is-active .mm-cancel-queue-btn {
  animation: mmQueuePulse 2.4s ease-in-out infinite;
}
.mm-cancel-queue-btn:hover {
  background: linear-gradient(180deg, #645090 0%, #483470 42%, #302050 100%);
  color: #f8f6ff;
  box-shadow:
    0 5px 0 #100818,
    0 8px 22px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(230, 215, 255, 0.3);
}
.mm-cancel-queue-btn:active {
  transform: translateY(2px);
  box-shadow:
    0 2px 0 #100818,
    0 3px 10px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(190, 170, 240, 0.16);
}
.mm-cancel-queue-inner {
  display: block;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
}
@keyframes mmQueuePulse {
  0%, 100% {
    box-shadow:
      0 4px 0 #100818,
      0 6px 18px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(210, 190, 255, 0.22);
  }
  50% {
    box-shadow:
      0 4px 0 #100818,
      0 6px 22px rgba(80, 60, 140, 0.32),
      inset 0 1px 0 rgba(230, 215, 255, 0.28);
  }
}

.mm-prep-row {
  display: flex;
  gap: 10px;
  margin: 14px 0 4px;
}
.mm-prep-btn {
  flex: 1;
  margin: 0;
  text-align: center;
}
.mm-overlay {
  text-align: left;
}
.mm-spellbook-catalog {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 58vh;
  overflow-y: auto;
  margin: 12px 0 4px;
  padding-right: 4px;
}
.mm-spell-slot-block {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(150, 130, 255, 0.12);
}
.mm-spell-slot-block:last-child { border-bottom: none; }
.mm-spell-slot-head {
  text-align: center;
  margin-bottom: 8px;
  font: 700 11px "Trebuchet MS", sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #9b8fd6;
}
.mm-spell-slot-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mm-spell-entry {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(30, 26, 62, 0.72);
  border: 1px solid rgba(150, 130, 255, 0.18);
}
.mm-spell-entry.spell-coming-soon { border-color: rgba(34, 211, 238, 0.4); }
.mm-spell-entry.spell-disabled { border-color: rgba(251, 113, 133, 0.35); opacity: 0.82; }
.mm-spell-entry-previewable,
.spell-card.spell-card-previewable { cursor: help; }
.passive-node.passive-node-previewable { cursor: help; }
.mm-spell-entry-previewable:hover {
  border-color: rgba(255, 122, 47, 0.55);
  background: rgba(42, 34, 72, 0.88);
}
.mm-spell-entry-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.mm-spell-entry-body { flex: 1; min-width: 0; }
.mm-spell-entry-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin-bottom: 4px;
}
.mm-spell-entry-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.mm-spell-entry-cost {
  font-size: 12px;
  font-weight: 700;
  color: #ffd479;
}
.mm-spell-entry-cost.starter { color: #8de08d; }
.mm-spell-entry-meta {
  font-size: 11px;
  color: #9b8fd6;
  margin-bottom: 5px;
}
.mm-spell-entry-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #c8c0e8;
}
.mm-spell-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
}
.mm-spell-badge.soon {
  color: #67e8ff;
  background: rgba(34, 211, 238, 0.12);
}
.mm-spell-badge.off {
  color: #fb9aaa;
  background: rgba(251, 113, 133, 0.12);
}
.mm-spell-entry-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(150, 130, 255, 0.12);
  background: rgba(22, 18, 48, 0.45);
}
.mm-spell-entry-wrap.has-passives .mm-spell-entry {
  border: none;
  border-radius: 0;
  background: transparent;
}
.mm-spell-entry-wrap.has-passives .mm-spell-entry-previewable:hover {
  background: rgba(42, 34, 72, 0.55);
}
.sb-passive-section {
  padding: 0 12px 10px;
  border-top: 1px solid rgba(150, 130, 255, 0.14);
  background: rgba(14, 12, 32, 0.5);
}
.sb-passive-group + .sb-passive-group {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(130, 118, 190, 0.18);
}
.sb-passive-group-head {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9b8fd6;
  margin: 8px 0 6px;
}
.sb-passive-group-synergy .sb-passive-group-head {
  color: #e8a060;
}
.sb-passive-group-enables .sb-passive-group-head {
  color: #c9a8e8;
}
.sb-passive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 6px;
}
.sb-passive-node {
  padding: 7px 8px;
  border-radius: 10px;
  background: rgba(28, 24, 52, 0.85);
  border: 1px solid rgba(130, 118, 190, 0.28);
}
.sb-passive-node.synergy {
  border-color: rgba(255, 120, 60, 0.38);
  background: linear-gradient(145deg, rgba(38, 20, 48, 0.9), rgba(24, 16, 40, 0.88));
}
.sb-passive-node-top {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.sb-passive-orb {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-top: 1px;
  background: radial-gradient(circle at 35% 30%, rgba(160, 150, 220, 0.5), rgba(50, 42, 90, 0.95) 68%);
  border: 2px solid rgba(140, 128, 200, 0.45);
}
.sb-passive-node.synergy .sb-passive-orb {
  border-radius: 5px;
  transform: rotate(45deg);
  background: radial-gradient(circle at 35% 30%, rgba(255, 180, 100, 0.65), rgba(180, 60, 30, 0.9) 68%);
  border-color: rgba(255, 150, 80, 0.55);
}
.sb-passive-text { flex: 1; min-width: 0; }
.sb-passive-name {
  font-size: 14px;
  font-weight: 700;
  color: #ece8ff;
  line-height: 1.2;
  margin-bottom: 2px;
}
.sb-passive-desc {
  font-size: 12px;
  line-height: 1.35;
  color: #9b94c8;
  margin-bottom: 4px;
}
.sb-passive-req {
  font-size: 9px;
  color: #7a74a8;
  margin-bottom: 3px;
}
.sb-passive-cost {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  color: #ffd479;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 212, 121, 0.1);
}
.sb-synergy-partner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0 3px;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(18, 14, 36, 0.7);
  border: 1px solid rgba(255, 140, 80, 0.25);
}
.sb-synergy-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: rgba(255, 170, 90, 0.85);
}
.sb-synergy-link svg {
  display: block;
  width: 14px;
  height: 14px;
}
.sb-synergy-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1;
}
.sb-synergy-name {
  font-size: 14px;
  font-weight: 700;
  color: #f2e8ff;
}
.sb-synergy-slot {
  font-size: 12px;
  color: #9b94c8;
}
.sb-enables-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sb-enables-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(28, 22, 48, 0.75);
  border: 1px solid rgba(180, 140, 220, 0.22);
  font-size: 12px;
}
.sb-enables-node {
  font-weight: 700;
  color: #ffd8b0;
}
.sb-enables-on {
  color: #8a82b0;
  font-style: italic;
}
.sb-enables-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 11px;
}
.sb-enables-spell {
  font-weight: 600;
  color: #ece8ff;
}
.mm-keybind-list {
  max-height: 52vh;
  margin: 12px 0 14px;
}

.mm-ranked-block {
  border-color: rgba(212, 175, 55, 0.28);
  background: rgba(28, 22, 12, 0.45);
}
.mm-ranked-block .mode-title { color: #c9a84c; }
.mm-ranked-block .coming-soon-hint { color: #9a8b5a; }
.mode-desc { margin: 4px 0 2px; font-size: 12px; color: #b9a0ff; min-height: 0; }

/* ---------- All Random reveal (card pull) ---------- */
.reveal-cards {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  margin: 10px 0 18px; min-height: 130px;
}
.reveal-card {
  width: 132px; padding: 16px 12px 14px; border-radius: 14px; text-align: center;
  background: linear-gradient(165deg, rgba(34,28,68,0.96), rgba(16,12,38,0.97));
  border: 1px solid rgba(150,130,255,0.35);
  box-shadow: 0 8px 26px rgba(0,0,0,0.4);
  opacity: 0; transform: translateY(16px) scale(0.92);
  animation: revealPop 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.3) forwards;
}
.reveal-card.spell { border-color: rgba(255,150,90,0.55); }
.reveal-card.upgrade { border-color: rgba(120,220,160,0.55); }
.reveal-card.item { border-color: rgba(150,130,255,0.5); }
@keyframes revealPop {
  0% { opacity: 0; transform: translateY(16px) scale(0.92) rotateY(40deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotateY(0); }
}
.reveal-card-icon {
  width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center; font-size: 30px;
  overflow: hidden;
}
.reveal-card-icon .spell-icon-img {
  width: 72%;
  height: 72%;
}
.reveal-card-title { font-size: 14px; font-weight: 800; color: #fff; }
.reveal-card-sub { font-size: 11px; color: #b3abdd; margin-top: 3px; letter-spacing: 0.4px; }
.draft-card.selected { border-color: rgba(120,220,160,0.85); box-shadow: 0 0 0 2px rgba(120,220,160,0.35), 0 8px 26px rgba(0,0,0,0.4); }

/* ---------- Skill Draft overlay (canvas + spell bar stay visible) ---------- */
.draft-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 12;
  box-sizing: border-box;
}
.draft-stack {
  position: fixed;
  left: 50%;
  /* Spell bar top row starts ~138px from bottom (H-74 - 58 - 6); leave gap below cards */
  bottom: 168px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(940px, 96vw);
  padding: 0 16px;
  box-sizing: border-box;
  pointer-events: none;
}
.draft-overlay-top {
  pointer-events: none;
  text-align: center;
  margin-bottom: 10px;
}
.draft-step-label {
  font-size: clamp(22px, 3.2vw, 28px);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f3ecff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.75), 0 0 24px rgba(140, 110, 220, 0.35);
}
.draft-step-progress {
  font-size: clamp(16px, 2.2vw, 20px);
  font-weight: 700;
  color: #c8bfff;
  margin-top: 8px;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.65);
}
.draft-timer-float {
  font-size: 13px;
  font-weight: 600;
  color: #ffd479;
  margin-top: 6px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
  display: inline-block;
}
.draft-timer-float.draft-timer-urgent {
  color: #ffb070;
}
.draft-timer-float.draft-timer-critical {
  color: #ff6848;
  text-shadow: 0 0 10px rgba(255, 90, 60, 0.45), 0 1px 8px rgba(0, 0, 0, 0.55);
}
.draft-timer-float.draft-timer-tick {
  animation: draftTimerTick 0.55s ease-out;
}
.draft-timer-float.draft-timer-tick-fast {
  animation: draftTimerTickFast 0.28s ease-out;
}
@keyframes draftTimerTick {
  0% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(1.14); filter: brightness(1.35); }
  100% { transform: scale(1); filter: brightness(1); }
}
@keyframes draftTimerTickFast {
  0% { transform: scale(1); filter: brightness(1); opacity: 1; }
  40% { transform: scale(1.22); filter: brightness(1.55); opacity: 0.82; }
  100% { transform: scale(1); filter: brightness(1); opacity: 1; }
}
.draft-top-bar {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: min(520px, 92vw);
  pointer-events: none;
  z-index: 13;
}
.draft-wait {
  margin: 0;
  text-align: center;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.draft-report-btn {
  pointer-events: auto;
  opacity: 0.65;
  font-size: 11px;
}
.draft-report-btn:hover { opacity: 1; }

.draft-reroll-btn {
  pointer-events: auto;
  margin: 0 0 14px;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: inherit;
  color: #ffd479;
  background: rgba(40, 32, 20, 0.78);
  border: 1px solid rgba(255, 212, 121, 0.45);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.draft-reroll-btn:hover:not(:disabled) {
  background: rgba(58, 46, 24, 0.92);
  border-color: rgba(255, 212, 121, 0.65);
}
.draft-reroll-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.draft-picks {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  margin: 0;
  min-height: 0;
  pointer-events: none;
}
.draft-picks .draft-pick-block {
  flex: 1 1 0;
  min-width: 0;
  max-width: 300px;
  pointer-events: auto;
}
.draft-picks-settled .draft-pick-block {
  animation: none;
  transform: none;
  opacity: 1;
}
.draft-picks-settled .draft-pick-block.draft-unpicked {
  opacity: 0.42;
}
.draft-picks.draft-picks-step-out .draft-pick-block {
  opacity: 0 !important;
  transform: translateY(-10px) !important;
  transition: opacity 0.26s ease, transform 0.26s ease;
  pointer-events: none;
  animation: none;
}
.draft-pick-empty {
  width: 100%;
  text-align: center;
  margin: 24px 0;
  pointer-events: none;
}

.draft-pick-block {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  border-radius: 12px;
  background: rgba(20, 16, 44, 0.55);
  border: 1px solid rgba(150, 130, 255, 0.22);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(12px);
  animation: revealPop 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards;
  text-align: center;
  overflow: hidden;
}
.draft-pick-block.spell { border-color: rgba(255, 150, 90, 0.4); }
.draft-pick-block.passive { border-color: rgba(130, 180, 255, 0.35); }
.draft-pick-block.passive.synergy { border-color: rgba(255, 200, 100, 0.45); }
.draft-pick-block.pickable {
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.draft-pick-block.pickable:hover {
  transform: translateY(-4px);
  border-color: rgba(200, 180, 255, 0.65);
  box-shadow: 0 12px 32px rgba(60, 40, 120, 0.45);
  background: rgba(28, 22, 52, 0.72);
}
.draft-pick-block.selected {
  border-color: rgba(120, 220, 160, 0.85);
  box-shadow: 0 0 0 2px rgba(120, 220, 160, 0.3), 0 10px 28px rgba(0, 0, 0, 0.4);
  background: rgba(24, 36, 32, 0.55);
}
.draft-pick-block.draft-pick-previewable.pickable { cursor: help; }

/* Draft pick unlock — mirrors shop passive reveal */
.draft-pick-lines {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 13;
  overflow: visible;
}
.draft-pick-lines .pick-unlock-edge {
  fill: none;
  stroke: rgba(255, 220, 120, 0.92);
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(255, 180, 60, 0.8));
}
.draft-pick-lines .pick-unlock-joint {
  fill: rgba(100, 92, 150, 0.55);
  stroke: rgba(60, 52, 100, 0.9);
  stroke-width: 1;
}
.draft-pick-lines .pick-unlock-joint.joint-lit {
  fill: rgba(255, 220, 130, 0.95);
  stroke: rgba(255, 240, 180, 0.7);
  filter: drop-shadow(0 0 4px rgba(255, 200, 80, 0.65));
}
.draft-pick-lines .pick-unlock-joint.joint-anim-start {
  animation: skill-joint-flash-in 0.22s ease-out forwards;
}
.draft-pick-lines .pick-unlock-joint.joint-anim-pop {
  animation: skill-joint-pop 0.34s ease-out forwards;
}
.draft-picks.draft-picks-locked .draft-pick-block:not(.draft-committing) {
  opacity: 0.42;
  pointer-events: none;
  transform: none;
}
.draft-pick-block.draft-unpicked {
  opacity: 0.42;
  pointer-events: none;
}
.draft-pick-block.draft-committing {
  position: relative;
  z-index: 14;
  pointer-events: none;
}
.draft-pick-block.just-unlocked:not(.owned-reveal) {
  border-color: rgba(150, 130, 255, 0.22);
  background: rgba(20, 16, 44, 0.55);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.draft-pick-block.just-unlocked.border-revealing {
  --passive-unlock-border-ms: 550ms;
  border-color: transparent;
  overflow: visible;
}
.draft-pick-block.just-unlocked.border-revealing::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  z-index: 0;
  pointer-events: none;
  background: rgba(36, 28, 58, 0.95);
  box-shadow:
    inset 0 0 22px rgba(255, 170, 50, 0.2),
    inset 0 0 44px rgba(255, 130, 40, 0.09);
  clip-path: circle(0% at 50% 50%);
  animation: passive-center-fill var(--passive-unlock-border-ms) ease-out forwards;
}
.draft-pick-block.just-unlocked.border-revealing .draft-slot-head,
.draft-pick-block.just-unlocked.border-revealing .draft-pick-body {
  position: relative;
  z-index: 2;
}
.draft-pick-block.just-unlocked.border-revealing .passive-border-trace {
  z-index: 5;
}
.draft-pick-block.owned-reveal,
.draft-pick-block.selected.owned-reveal {
  border-color: rgba(255, 200, 90, 0.55);
  background: rgba(36, 28, 58, 0.95);
  box-shadow:
    inset 0 0 22px rgba(255, 170, 50, 0.2),
    inset 0 0 44px rgba(255, 130, 40, 0.09),
    inset 0 0 0 1px rgba(255, 220, 140, 0.14),
    0 0 14px rgba(255, 180, 60, 0.14);
}
.draft-pick-block.owned-reveal .draft-slot-head .k {
  color: #ffe8c0;
  background: rgba(255, 160, 60, 0.28);
  border-color: rgba(255, 200, 120, 0.55);
}
.draft-pick-block.passive.owned-reveal .passive-node-orb {
  background: radial-gradient(circle at 35% 28%, rgba(255, 240, 180, 0.95), rgba(200, 140, 40, 0.85) 70%);
  border-color: rgba(255, 230, 150, 0.85);
  box-shadow:
    0 0 10px rgba(255, 190, 70, 0.55),
    inset 0 0 14px rgba(255, 200, 80, 0.35),
    inset 0 -2px 4px rgba(120, 70, 10, 0.35);
}
.draft-pick-block.owned-reveal .draft-pick-icon {
  box-shadow:
    0 0 10px rgba(255, 190, 70, 0.55),
    inset 0 0 14px rgba(255, 200, 80, 0.35);
}
.draft-pick-block.passive.synergy.just-unlocked.border-revealing::before {
  background: linear-gradient(145deg, rgba(48, 32, 42, 0.98), rgba(36, 28, 58, 0.96));
  box-shadow:
    inset 0 0 22px rgba(255, 170, 50, 0.22),
    inset 0 0 44px rgba(255, 130, 40, 0.1);
}
.draft-pick-block.passive.synergy.owned-reveal {
  border-color: rgba(255, 180, 90, 0.7);
  box-shadow:
    inset 0 0 22px rgba(255, 120, 50, 0.18),
    inset 0 0 44px rgba(255, 90, 40, 0.08),
    inset 0 0 0 1px rgba(255, 200, 120, 0.12),
    0 0 18px rgba(255, 130, 50, 0.22);
}
.draft-pick-block.passive.synergy.owned-reveal .passive-node-orb {
  background: radial-gradient(circle at 35% 28%, rgba(255, 240, 200, 0.98), rgba(255, 140, 50, 0.9) 70%);
  border-color: rgba(255, 220, 150, 0.9);
  box-shadow:
    0 0 14px rgba(255, 160, 60, 0.65),
    inset 0 0 14px rgba(255, 180, 80, 0.35),
    inset 0 -2px 4px rgba(120, 50, 10, 0.35);
}

.draft-slot-head {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(150, 130, 255, 0.14);
  background: rgba(14, 11, 32, 0.45);
}
.draft-slot-head .k {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #e7dcff;
  background: rgba(150, 130, 255, 0.22);
  border: 1px solid rgba(150, 130, 255, 0.35);
}
.draft-slot-head .k.syn { color: #ffd479; background: rgba(255, 200, 100, 0.15); border-color: rgba(255, 200, 100, 0.4); }
.draft-slot-head .k.stat { color: #a8d4ff; background: rgba(100, 160, 255, 0.12); border-color: rgba(130, 180, 255, 0.35); }
.draft-pick-block.passive .draft-slot-head .passive-node-orb {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin-top: 0;
}
.draft-pick-block.passive.synergy .draft-slot-head .passive-node-orb {
  border-radius: 6px;
  transform: rotate(45deg);
  background: radial-gradient(circle at 35% 30%, rgba(255, 180, 100, 0.65), rgba(180, 60, 30, 0.9) 68%);
  border: 2px solid rgba(255, 150, 80, 0.55);
  box-shadow:
    0 0 10px rgba(255, 100, 50, 0.35),
    inset 0 -3px 6px rgba(80, 20, 10, 0.35);
}
.draft-slot-head .slot-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9b8fd6;
}
.draft-pick-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 14px 16px;
  gap: 8px;
}
.draft-pick-icon {
  width: 56px;
  height: 56px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.draft-pick-icon .spell-icon-img { width: 72%; height: 72%; }
.draft-pick-name {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
}
.draft-pick-desc,
.draft-pick-effect {
  font-size: 12px;
  line-height: 1.45;
  color: #c8c0e8;
  max-width: 100%;
}
.draft-pick-effect {
  font-size: 13px;
  font-weight: 600;
  color: #8de08d;
}
.draft-pick-block.passive.synergy .draft-pick-effect { color: #ffd479; }
.draft-pick-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
  width: 100%;
}
.draft-stat {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(30, 26, 62, 0.85);
  border: 1px solid rgba(150, 130, 255, 0.18);
}
.draft-stat-k {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9b8fd6;
}
.draft-stat-v {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  margin-top: 1px;
}
.draft-host-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #b3abdd;
  margin-bottom: 2px;
}
.draft-host-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  overflow: hidden;
}
.draft-host-icon .spell-icon-img { width: 78%; height: 78%; }
.draft-pick-meta {
  font-size: 11px;
  color: #b9a0ff;
  margin-top: 2px;
}
.draft-pick-meta b { color: #e7dcff; font-weight: 700; }
.draft-pick-block.passive.synergy.synergy-newly-enabled {
  opacity: 1;
  transform: none;
  border-color: rgba(255, 210, 120, 0.75);
  box-shadow: 0 0 0 1px rgba(255, 200, 100, 0.25), 0 12px 32px rgba(255, 160, 60, 0.12);
  animation:
    revealPop 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards,
    draft-synergy-enable-pulse 1.4s ease-out 0.38s;
}
@keyframes draft-synergy-enable-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 200, 100, 0.55), 0 12px 32px rgba(255, 160, 60, 0.18); }
  45% { box-shadow: 0 0 28px 6px rgba(255, 200, 100, 0.35), 0 12px 32px rgba(255, 160, 60, 0.22); }
  100% { box-shadow: 0 0 0 1px rgba(255, 200, 100, 0.25), 0 12px 32px rgba(255, 160, 60, 0.12); }
}
.draft-synergy-enabled {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  color: #ffd479;
}
.draft-synergy-enabled-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #ffc857;
}
.draft-synergy-enabled-partner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: #ffe8b8;
}
.draft-spell-synergy-hint {
  margin-top: 6px;
  font-size: 11px;
  color: #c9a8ff;
  line-height: 1.35;
}
.draft-spell-synergy-hint b { color: #ffd479; font-weight: 700; }
.draft-pick-req {
  font-size: 10px;
  color: #8a82b8;
  font-style: italic;
}

.reveal-loadout {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 8px 0 16px;
}
.reveal-kit-chip {
  display: flex; align-items: center; gap: 6px; padding: 5px 9px 5px 5px;
  border-radius: 20px; background: rgba(28,24,56,0.85); border: 1px solid rgba(150,130,255,0.25);
  font-size: 12px; color: #e7e2ff;
}
.reveal-kit-chip .kit-key {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 5px; font-size: 11px; font-weight: 800;
  background: rgba(150,130,255,0.2); color: #cdbcff;
}
.reveal-kit-chip .kit-icon {
  width: 24px; height: 24px; border-radius: 6px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 16px;
}
.reveal-kit-chip .kit-name { font-weight: 600; }
.reveal-kit-chip .lvl-dots { font-size: 8px; letter-spacing: 1px; }
.reveal-kit-chip .lvl-dots .on { color: #ffd479; }
.reveal-kit-chip .lvl-dots .off { color: #4a4470; }
.reveal-kit-chip.item { color: #c9c3ea; }

/* ---------- PvE boss intro ---------- */
.boss-intro {
  width: min(860px, 96vw);
  max-height: min(92vh, 760px);
  overflow: auto;
  border-color: rgba(255, 210, 120, 0.35);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.boss-intro-head { text-align: center; margin-bottom: 14px; }
.boss-intro-eyebrow {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: #ffd479; font-weight: 700;
}
.boss-intro-name {
  margin: 6px 0 0; font-size: clamp(28px, 4vw, 38px); font-weight: 900;
  color: #fff; letter-spacing: 0.04em;
}
.boss-intro-body {
  display: grid; grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 18px 22px; align-items: start;
}
@media (max-width: 720px) {
  .boss-intro-body { grid-template-columns: 1fr; }
}
.boss-intro-art {
  display: flex; align-items: center; justify-content: center;
  min-height: 220px; padding: 12px;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 35%, rgba(255, 210, 120, 0.12), rgba(20, 16, 40, 0.5));
  border: 1px solid rgba(255, 210, 120, 0.18);
}
.boss-intro-art img {
  max-width: 100%; height: auto; object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45));
}
.boss-intro-desc { color: #d8d3f5; line-height: 1.55; margin: 0 0 12px; }
.boss-intro-hp {
  display: inline-block; margin-bottom: 14px; padding: 5px 10px;
  border-radius: 999px; font-size: 12px; color: #c9c3ea;
  background: rgba(120, 90, 255, 0.12); border: 1px solid rgba(150, 130, 255, 0.25);
}
.boss-intro-hp b { color: #fff; font-size: 14px; }
.boss-intro-section { margin-bottom: 14px; }
.boss-intro-section-title {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #b3abdd; margin-bottom: 7px; font-weight: 700;
}
.boss-intro-tags, .boss-intro-phases {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.boss-intro-tags li, .boss-intro-phases li {
  font-size: 11.5px; padding: 4px 9px; border-radius: 999px;
  background: rgba(138, 134, 166, 0.14); border: 1px solid rgba(150, 130, 255, 0.22);
  color: #ddd6ff;
}
.boss-intro-tags li.weak { color: #ffb4a8; border-color: rgba(255, 120, 90, 0.35); background: rgba(255, 90, 60, 0.1); }
.boss-intro-tags li.resist { color: #a8d4ff; border-color: rgba(100, 180, 255, 0.3); background: rgba(80, 140, 255, 0.08); }
.boss-intro-tags li.immune { color: #ffd479; border-color: rgba(255, 212, 121, 0.35); background: rgba(255, 212, 121, 0.08); }
.boss-intro-abilities {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px;
}
.boss-intro-ability {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 8px 10px; border-radius: 10px;
  background: rgba(20, 16, 40, 0.55); border: 1px solid rgba(150, 130, 255, 0.18);
}
.boss-intro-ability .abi-icon {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
}
.boss-intro-ability .abi-name { font-size: 14px; font-weight: 800; color: #fff; }
.boss-intro-ability .abi-when {
  font-size: 10px; color: #ffd479; letter-spacing: 0.3px; margin-top: 1px;
}
.boss-intro-ability .abi-desc { font-size: 11px; color: #b3abdd; margin-top: 3px; line-height: 1.35; }
.boss-intro-phases { flex-direction: column; gap: 8px; }
.boss-intro-phases li {
  border-radius: 10px; width: 100%; box-sizing: border-box;
}
.boss-intro-phases li b { color: #ffd479; margin-right: 6px; }

/* Targets that surface a hover tooltip get a subtle affordance. */
[data-tip-kind] { cursor: help; }
.spell-card[data-tip-kind], .reveal-card[data-tip-kind], .draft-pick-block[data-tip-kind] { cursor: default; }
.draft-pick-block.pickable[data-tip-kind] { cursor: help; }

/* ---------- Shared hover tooltip ---------- */
.tooltip {
  position: fixed; z-index: 40; left: 0; top: 0;
  max-width: 268px; padding: 11px 13px;
  border-radius: 12px; pointer-events: none;
  background: linear-gradient(160deg, rgba(30,25,62,0.98), rgba(14,11,32,0.99));
  border: 1px solid rgba(150,130,255,0.4);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  color: #e8e6ff; font-size: 12.5px; line-height: 1.4;
  animation: tipFade 0.1s ease;
}
@keyframes tipFade { from { opacity: 0; } to { opacity: 1; } }
.tooltip .tip-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.tooltip > .tip-slot-key,
.spell-preview-tip-text > .tip-slot-key {
  position: absolute;
  top: 8px;
  right: 9px;
  margin: 0;
}
.tooltip:has(> .tip-slot-key) { padding-right: 38px; }
.spell-preview-tip-text {
  position: relative;
}
.spell-preview-tip-text:has(> .tip-slot-key) { padding-right: 34px; }
.spell-preview-tip:has(.tip-slot-key) { padding-right: 38px; }
.tooltip .tip-icon {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 19px;
}
.tooltip .tip-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.tooltip .tip-name { font-size: 14px; font-weight: 800; color: #fff; }
.tooltip .tip-school,
.tooltip .tip-category {
  font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px; border: 1px solid;
}
.tip-debuff-row {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  margin-top: 6px;
}
.tip-debuff-scope {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px;
  font-size: 11px; color: #b3abdd;
}
.tip-debuff-scope b {
  color: #ffd479; font-weight: 700; font-size: 10px; letter-spacing: 0.3px;
}
.tip-debuff {
  font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  padding: 1px 6px; border-radius: 999px; border: 1px solid;
}
.tip-effects {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(150,130,255,0.18);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.tip-effect-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tip-effect-head {
  font-size: 11.5px;
  color: #d8d3f5;
}
.tip-effect-head b {
  color: #ffd479;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.3px;
}
.tip-effect-detail {
  font-size: 11px;
  line-height: 1.35;
  color: #b3abdd;
  padding-left: 2px;
}
.spell-preview-tip .tip-effects {
  margin-top: 6px;
  padding-top: 6px;
}
.tooltip .tip-sub { font-size: 11px; color: #b3abdd; margin-top: 1px; letter-spacing: 0.3px; }
.tooltip .tip-desc { color: #d8d3f5; }
.tooltip .tip-stats {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(150,130,255,0.18);
  font-size: 11.5px; color: #9a93c8;
}
.tooltip .tip-stats b { color: #ffd479; font-weight: 700; margin-right: 2px; }

/* Spellbook: animated cast preview in hover popover */
.tooltip.spell-preview-tip {
  max-width: min(580px, calc(100vw - 24px));
  padding: 12px 13px 11px;
  z-index: 42;
}
body:has(#shop:not(.hidden)) .tooltip.spell-preview-tip,
body:has(#spellbook:not(.hidden)) .tooltip.spell-preview-tip,
body:has(#draft:not(.hidden)) .tooltip.spell-preview-tip {
  z-index: 250;
}
.spell-preview-tip .spell-preview-tip-text .tip-desc { margin-bottom: 0; }
.spell-preview-caption {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.35;
  color: #b3abdd;
  font-style: italic;
}
.spell-preview-stage {
  position: relative;
  margin-top: 10px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 122, 47, 0.35);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.45);
  background: #0e0c1c;
}
.spell-preview-canvas {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}
.spell-preview-loop {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(8, 6, 20, 0.75);
  pointer-events: none;
}
.spell-preview-loop-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #c45a28, #ffd479);
  box-shadow: 0 0 6px rgba(255, 138, 61, 0.55);
}

/* ---------- Spell sprite dev panel (local sandbox only) ---------- */
.spell-sprite-dev {
  position: fixed;
  left: 16px;
  top: 56px;
  z-index: 13;
  width: min(292px, 42vw);
  max-height: min(520px, calc(100vh - 220px));
  overflow-y: auto;
  padding: 10px 12px 12px;
  border-radius: 12px;
  pointer-events: auto;
  background: linear-gradient(160deg, rgba(28, 22, 52, 0.96), rgba(12, 10, 28, 0.98));
  border: 1px solid rgba(255, 140, 80, 0.45);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
.spell-sprite-dev-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.spell-sprite-dev-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffb88a;
}
.spell-sprite-dev-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 120, 60, 0.2);
  color: #ff9a5a;
  border: 1px solid rgba(255, 140, 80, 0.35);
}
.spell-sprite-dev-spell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #9a93c8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.spell-sprite-dev-spell select {
  font: 600 14px "Trebuchet MS", sans-serif;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(150, 140, 220, 0.45);
  background: rgba(18, 14, 36, 0.95);
  color: #e8e6ff;
}
.spell-sprite-dev-group {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #7a74a8;
  margin: 10px 0 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(150, 130, 255, 0.12);
}
.spell-sprite-dev-group:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.spell-sprite-dev-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  align-items: center;
  margin-bottom: 6px;
}
.spell-sprite-dev-row label {
  grid-column: 1 / -1;
  font-size: 12px;
  font-weight: 600;
  color: #d8d3f5;
  margin: 0;
}
.spell-sprite-dev-row input[type="range"] {
  grid-column: 1;
  width: 100%;
  accent-color: #ff8a4a;
}
.spell-sprite-dev-row .ssd-val {
  grid-column: 2;
  font: 600 11px ui-monospace, monospace;
  color: #ffb88a;
  min-width: 40px;
  text-align: right;
}
.spell-sprite-dev-row select.ssd-select {
  grid-column: 1 / -1;
  font: 600 12px "Trebuchet MS", sans-serif;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid rgba(150, 140, 220, 0.4);
  background: rgba(18, 14, 36, 0.95);
  color: #e8e6ff;
}
.spell-sprite-dev-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(150, 130, 255, 0.15);
}
.spell-sprite-dev-actions button {
  flex: 1 1 calc(50% - 3px);
  font: 600 11px "Trebuchet MS", sans-serif;
  padding: 6px 8px;
  border-radius: 7px;
  border: 1px solid rgba(150, 140, 220, 0.4);
  background: rgba(40, 36, 70, 0.9);
  color: #e8e6ff;
  cursor: pointer;
}
.spell-sprite-dev-actions button:hover {
  border-color: rgba(255, 160, 100, 0.55);
  background: rgba(55, 42, 75, 0.95);
}
.spell-sprite-dev-actions button:active { transform: scale(0.97); }
.spell-sprite-dev-empty {
  font-size: 12px;
  color: #8a86a6;
  margin: 0;
}

/* ---------- Sandbox hit telemetry ---------- */
.sandbox-hud {
  position: fixed;
  left: 16px;
  bottom: 108px;
  z-index: 12;
  max-width: min(320px, 44vw);
  padding: 12px 14px;
  border-radius: 12px;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(22,18,48,0.94), rgba(10,8,24,0.97));
  border: 1px solid rgba(150,130,255,0.35);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
}
.sandbox-hud-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.sandbox-hud-head .sandbox-hud-title { margin-bottom: 0; }
.sandbox-hud-title {
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: #9a93c8; margin-bottom: 8px;
}
.sandbox-hud-reset {
  font: 600 11px "Trebuchet MS", sans-serif;
  padding: 4px 10px; border-radius: 6px;
  border: 1px solid rgba(150, 140, 220, 0.45);
  background: rgba(40, 36, 70, 0.9);
  color: #d8d3f5; cursor: pointer; pointer-events: auto;
  transition: background 0.15s, border-color 0.15s;
}
.sandbox-hud-reset:hover {
  background: rgba(55, 48, 95, 0.95);
  border-color: rgba(180, 160, 255, 0.55);
}
.sandbox-hud-reset:active { transform: scale(0.97); }
.sandbox-hud-title-sub { margin-top: 10px; color: #8a86a6; }
.sandbox-activity { margin-bottom: 2px; }
.sandbox-activity .sa-muted { color: #8a86a6; font-size: 12px; }
.sandbox-activity .sa-spell {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid rgba(150, 130, 255, 0.15);
  font-size: 12px; color: #b6afdc;
}
.sandbox-hud-body { font-size: 14px; line-height: 1.45; color: #e8e6ff; }
.sandbox-hud-body .sh-spell {
  font-size: 16px; font-weight: 800; color: #fff; margin-bottom: 6px;
}
.sandbox-hud-body .sh-row { color: #c8c2ec; }
.sandbox-hud-body .sh-row b { color: #ffd479; font-weight: 700; }
.sandbox-hud-body .sh-blocked { color: #9ec8ff; font-weight: 700; }

/* Sandbox in-match spellbook: same near-full viewport over the arena */
#shop.shop-in-match {
  width: 96dvw;
  max-width: 96dvw;
  max-height: 92dvh;
  margin-top: 0;
}
#shop.shop-in-match .shop-timer,
#shop.shop-in-match #shopWait,
#shop.shop-in-match #readyBtn { display: none !important; }
#shop.shop-in-match #sandboxShopClose { display: block !important; }
#overlay.sandbox-shop-open {
  z-index: 200;
  pointer-events: auto;
  background: rgba(6, 4, 18, 0.72);
  backdrop-filter: blur(3px);
}
/* Feedback button — in corner dock above audio controls */
.feedback-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(150, 130, 255, 0.45);
  background: linear-gradient(160deg, rgba(22, 18, 48, 0.94), rgba(10, 8, 24, 0.97));
  color: #e8e6ff;
  font-size: 20px;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.1s ease, border-color 0.15s;
}
.feedback-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(180, 160, 255, 0.65);
}

/* Report center modal */
.report-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(6, 4, 18, 0.72);
  backdrop-filter: blur(3px);
  pointer-events: auto;
}
.report-panel {
  width: min(520px, 96vw);
  max-height: min(88vh, 720px);
  overflow-y: auto;
  padding: 22px 20px 18px;
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(28, 22, 58, 0.98), rgba(12, 10, 28, 0.99));
  border: 1px solid rgba(150, 130, 255, 0.35);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  text-align: left;
}
.report-game-ctx {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(40, 34, 80, 0.55);
  border: 1px solid rgba(130, 120, 210, 0.25);
  font-size: 14px;
  color: #c8c2ec;
}
.report-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.report-cat-btn {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  border-radius: 9px;
  border: 1px solid rgba(150, 130, 255, 0.35);
  background: rgba(35, 28, 70, 0.7);
  color: #b6afdc;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.15s;
}
.report-cat-btn:hover { color: #e8e6ff; border-color: rgba(170, 150, 255, 0.5); }
.report-cat-btn.active {
  background: linear-gradient(180deg, #645090 0%, #483470 42%, #302050 100%);
  color: #f8f6ff;
  border-color: rgba(160, 135, 255, 0.55);
  box-shadow: var(--sel-inset-purple);
}
.report-form label {
  display: block;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #9b8fd6;
  margin: 12px 0 6px;
}
.report-form .text-input,
.report-form select,
.report-form textarea {
  width: 100%;
  box-sizing: border-box;
}
.report-form textarea {
  min-height: 88px;
  resize: vertical;
  font-family: inherit;
  font-size: 14px;
}
.report-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.report-tag {
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid rgba(150, 130, 255, 0.3);
  background: rgba(30, 26, 58, 0.75);
  color: #b6afdc;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
}
.report-tag.on {
  background: rgba(90, 75, 176, 0.85);
  color: #fff;
  border-color: rgba(180, 160, 255, 0.5);
}
.report-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  align-items: stretch;
}
.report-actions .alt-btn { flex: 0 0 auto; min-width: 100px; }
.report-actions .big-btn { flex: 1; margin: 0; }
.report-thanks {
  margin-top: 12px;
  color: #8fd6a8;
  font-weight: 600;
  text-align: center;
}
.report-panel .shop-title { margin-top: 0; text-align: center; }
.report-panel .lobby-hint { text-align: center; margin-bottom: 10px; }

/* Sandbox config (stacked above mute / shop buttons) */
.sandbox-cfg {
  position: fixed;
  right: 12px;
  bottom: 118px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 168px;
  padding: 10px 12px;
  border-radius: 12px;
  pointer-events: auto;
  background: linear-gradient(160deg, rgba(22, 18, 48, 0.94), rgba(10, 8, 24, 0.97));
  border: 1px solid rgba(150, 130, 255, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.sandbox-cfg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sandbox-cfg-row label {
  font-size: 14px;
  font-weight: 600;
  color: #d8d3f5;
  margin: 0;
}
.sandbox-cfg-row .stepper { gap: 10px; }
.sandbox-cfg-row .stepper span {
  font-size: 16px;
  min-width: 18px;
}
.sandbox-cfg-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #d8d3f5;
  cursor: pointer;
  user-select: none;
}
.sandbox-cfg-check input {
  width: 16px;
  height: 16px;
  accent-color: #a78bfa;
  cursor: pointer;
}
.sandbox-cfg-btn {
  font: 600 12px "Trebuchet MS", sans-serif;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(150, 140, 220, 0.4);
  background: rgba(40, 36, 70, 0.85);
  color: #e8e6ff;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.sandbox-cfg-btn:hover {
  background: rgba(55, 48, 95, 0.95);
  border-color: rgba(180, 160, 255, 0.55);
}
.sandbox-cfg-btn:active { transform: scale(0.97); }
.sandbox-cfg-spellbook {
  font-size: 14px;
  background: rgba(55, 42, 95, 0.9);
  border-color: rgba(180, 150, 255, 0.5);
}
.sandbox-cfg-spellbook:hover {
  background: rgba(70, 55, 120, 0.95);
}