:root {
  --bg: #0a0710;
  --panel: rgba(24, 16, 34, 0.92);
  --accent: #ff7a2f;
  --text: #f4ecff;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
canvas { display: block; position: fixed; inset: 0; cursor: crosshair; }

.hidden { display: none !important; }

/* ---- Menu overlay ---- */
.overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 30%, #2a0f0f, #0a0710 70%);
  z-index: 10;
}
.panel {
  width: min(440px, 92vw);
  max-height: 94vh;            /* never taller than the viewport… */
  max-height: 94svh;          /* …(small-viewport unit accounts for mobile browser chrome) */
  overflow-y: auto;           /* scroll inside instead of overflowing off-screen */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;        /* allow finger-scroll despite the global touch-action:none */
  background: var(--panel);
  border: 1px solid #3a2450;
  border-radius: 16px;
  padding: 26px 28px 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,122,47,.15);
}

/* ---- Main-menu hero art: layered CraftPix hell/lava scene w/ mouse parallax ---- */
#menu, #welcome { overflow: hidden; }            /* clip the oversized parallax layers */
.menuScene {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  background: #e7ac6a;                            /* sky tone: fallback before images load */
}
.msLayer {
  position: absolute; inset: -7%;                 /* oversize so parallax never bares an edge */
  background: center bottom / cover no-repeat;
  image-rendering: pixelated;                     /* crisp pixel-art upscaling */
  /* --mx/--my come from initMenuScene (−1..1); --d is this layer's parallax depth (px) */
  transform: translate3d(calc(var(--mx,0) * var(--d) * 1px), calc(var(--my,0) * var(--d) * .5px), 0);
  transition: transform .2s ease-out;
  will-change: transform;
}
.msLayer.l7 { background-image: url("assets/menu/bg7.png"); --d: 3; }
.msLayer.l6 { background-image: url("assets/menu/bg6.png"); --d: 6; }
.msLayer.l5 { background-image: url("assets/menu/bg5.png"); --d: 9; }
.msLayer.l4 { background-image: url("assets/menu/bg4.png"); --d: 13; }
.msLayer.l3 { background-image: url("assets/menu/bg3.png"); --d: 18; }
.msLayer.l2 { background-image: url("assets/menu/bg2.png"); --d: 24; }
.msLayer.l1 { background-image: url("assets/menu/bg1.png"); --d: 34; }
/* pulsing lava light rising off the ridgeline */
.msGlow {
  position: absolute; left: 50%; bottom: -10%; transform: translateX(-50%);
  width: 130%; height: 62%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,120,40,.55), rgba(255,70,20,0) 62%);
  animation: msFlicker 5s ease-in-out infinite;
}
@keyframes msFlicker { 0%,100% { opacity: .5; } 50% { opacity: .92; } }
/* legibility veil so the panel + title read cleanly over the art */
.msVeil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(125% 92% at 50% 6%, rgba(10,7,16,0) 42%, rgba(10,7,16,.5) 100%),
    linear-gradient(180deg, rgba(10,7,16,.22) 0%, rgba(10,7,16,.03) 34%, rgba(10,7,16,.72) 100%);
}
/* the menu panel + title sit above the scene */
#menu > .panel, #welcome > .panel { position: relative; z-index: 1; }
#menu > .panel h1, #welcome > .panel h1 {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.6), 0 0 24px rgba(255,120,40,.45);
}
@media (prefers-reduced-motion: reduce) {
  .msLayer { transition: none; }
  .msGlow { animation: none; opacity: .68; }
}

/* in-game pause menu — sits above the HUD/shop, with a see-through backdrop */
#escMenu { z-index: 30; background: rgba(10,7,16,.72); }
#escMenu .escDanger { color: #ff8a8a; border-color: #7a2a2a; }
#escMenu .escDanger:hover { background: #3a1414; }
h1 { margin: 0 0 4px; font-size: 34px; text-align: center; letter-spacing: .5px; }
.tag { margin: 0 0 18px; text-align: center; color: #b9a7d6; font-size: 14px; }
label { display: block; font-size: 13px; color: #c8b9e0; margin: 12px 0 4px; }
.hint { color: #7d6a99; font-weight: normal; }
input {
  width: 100%; padding: 11px 12px; margin-top: 4px;
  background: #150e22; border: 1px solid #3a2450; border-radius: 9px;
  color: var(--text); font-size: 15px; outline: none;
}
input:focus { border-color: var(--accent); }
button {
  width: 100%; margin-top: 20px; padding: 13px;
  background: linear-gradient(180deg, #ff8a3d, #f0641e);
  border: none; border-radius: 10px; color: #1a0d00;
  font-size: 17px; font-weight: 700; cursor: pointer;
  transition: transform .06s ease, filter .15s;
}
button:hover { filter: brightness(1.08); }
button:active { transform: translateY(1px); }

.controls { margin-top: 22px; padding-top: 16px; border-top: 1px solid #2c1c40; font-size: 13px; color: #c8b9e0; }
.controls .grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin-top: 10px; align-items: center; }
.controls small { display:block; margin-top:10px; color:#7d6a99; }
kbd {
  display: inline-block; padding: 2px 7px; margin: 0 1px;
  background: #241634; border: 1px solid #4a2f66; border-bottom-width: 2px;
  border-radius: 5px; font-size: 12px; font-family: inherit;
}
.status { min-height: 18px; margin: 14px 0 0; text-align: center; color: #ffcf3f; font-size: 13px; }

/* ---- online + server browser ---- */
.online { text-align: center; font-size: 13px; color: #9fd8a0; margin: 14px 0 4px; }
.online b { color: #d7ffd8; }
.browserTop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.browserTop .online { margin: 0; }
.browserTop button.ghost { width: auto; margin: 0; padding: 6px 12px; }
#search { margin-bottom: 12px; }
#serverList { max-height: 46vh; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.srv {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 11px 13px; margin-bottom: 7px;
  background: #150e22; border: 1px solid #2c1c40; border-radius: 9px;
  transition: border-color .1s, background .1s;
}
.srv:hover { border-color: var(--accent); background: #1c1330; }
.srv.full { opacity: .5; cursor: not-allowed; }
.srv .sname { flex: 1; font-size: 15px; font-weight: 600; }
.srv .scount { font-size: 13px; color: #b9a7d6; white-space: nowrap; }
.srv .scount .live { color: #5ee06a; }
.srv .go { color: var(--accent); font-weight: 700; }
.createRow { display: flex; gap: 8px; margin-top: 10px; }
.createRow input { margin: 0; }
.createRow button { width: auto; margin: 0; padding: 0 16px; font-size: 14px; white-space: nowrap; }

/* ---- Audio controls (always on top) ---- */
#audioCtl {
  position: fixed; top: 10px; right: 12px; z-index: 40;
  display: flex; align-items: center; gap: 8px;
  background: rgba(10,7,16,.72); border: 1px solid #3a2450; border-radius: 20px;
  padding: 5px 12px 5px 9px; backdrop-filter: blur(3px);
  touch-action: auto; /* let the slider/button receive touch despite global touch-action:none */
}
#audioCtl button {
  width: auto; margin: 0; padding: 0; background: none; border: none;
  font-size: 20px; line-height: 1; cursor: pointer; filter: none;
}
#audioCtl button:hover { filter: brightness(1.2); }
#audioCtl input[type=range] {
  width: 74px; height: 18px; margin: 0; padding: 0;
  background: transparent; border: none; accent-color: var(--accent); cursor: pointer;
}
#audioCtl .audioSep { width: 1px; height: 20px; background: #3a2450; }

/* ---- HUD ---- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#topbar {
  position: absolute; top: 12px; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 0 16px;
}
#phaseInfo {
  background: rgba(10,7,16,.7); border: 1px solid #3a2450; border-radius: 10px;
  padding: 8px 14px; font-size: 15px; font-weight: 600;
}
#scoreboard {
  background: rgba(10,7,16,.7); border: 1px solid #3a2450; border-radius: 10px;
  padding: 8px 14px; font-size: 13px; min-width: 150px;
  margin-top: 40px; /* drop below the audio control in the top-right corner */
}
#scoreboard .row { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
#scoreboard .row.dead { opacity: .45; text-decoration: line-through; }
#scoreboard .dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:middle; }
#scoreboard .sc { white-space: nowrap; font-size: 12px; }
#scoreboard .pips { color: #ffcf3f; letter-spacing: 1px; margin-right: 3px; }

/* Big segmented HP + mana bars for you (or the mage you're spectating) */
#selfBars {
  position: absolute; top: 56px; left: 50%; transform: translateX(-50%);
  width: min(560px, 80vw); display: flex; flex-direction: column; gap: 5px;
}
#selfBars .sbName {
  text-align: center; font-size: 14px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 3px #000; letter-spacing: .3px;
}
#selfBars .sbNums { color: #ffcf3f; font-weight: 600; margin-left: 8px; font-size: 13px; }
#selfBars .sbBar {
  position: relative; height: 22px; border-radius: 7px; overflow: hidden;
  background: rgba(10,7,16,.72); border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
#selfBars .sbBar.mana { height: 15px; }
#selfBars .sbFill { height: 100%; width: 0; }
#selfBars .sbBar.mana .sbFill { background: #4aa3ff; }
#selfBars .sbTicks { position: absolute; inset: 0; pointer-events: none; }

/* passive + status chips directly under the mana bar: a centered box whose
   chips pack from the left to the right (and wrap downward when they overflow) */
#statusBar {
  display: flex; gap: 5px; justify-content: flex-start; flex-wrap: wrap;
  align-self: center; max-width: 100%; margin-top: 4px; pointer-events: auto;
}
#statusBar .chip {
  width: 27px; height: 27px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; border-radius: 7px; cursor: help;
  background: rgba(10,7,16,.72); border: 1px solid rgba(255,255,255,.2);
}
#statusBar .chip.status { border-color: rgba(255,140,90,.55); }
#statusBar .chip.buff { border-color: rgba(120,220,255,.55); background: rgba(20,30,44,.72); }
#statusBar .chip.aegis { border-color: rgba(150,205,255,.9); box-shadow: 0 0 8px rgba(140,200,255,.45); animation: lavaPulse .9s ease-in-out infinite; }
#statusBar .chip.lava { border-color: #ff5a2f; background: rgba(60,14,6,.85); box-shadow: 0 0 10px rgba(255,90,47,.6); animation: lavaPulse .7s ease-in-out infinite; }
@keyframes lavaPulse { 0%,100% { box-shadow: 0 0 6px rgba(255,90,47,.5); } 50% { box-shadow: 0 0 14px rgba(255,90,47,.9); } }
#selfBars .sbShield { color: #7fd8ff; font-weight: 700; margin: 0 4px; }
#fxTip {
  position: fixed; transform: translateX(-50%); z-index: 30; max-width: 230px;
  background: rgba(10,7,16,.96); border: 1px solid #3a2450; color: #fff;
  font-size: 12px; line-height: 1.35; padding: 6px 9px; border-radius: 8px;
  pointer-events: none; text-align: center; box-shadow: 0 4px 14px rgba(0,0,0,.55);
}

/* main-menu language picker */
#langPick { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 4px 0; flex-wrap: wrap; }
#langBtns { display: flex; gap: 6px; flex-wrap: wrap; }
.langBtn {
  width: auto; margin: 0; background: rgba(10,7,16,.5); border: 1px solid #3a2450; color: #cdb8e6;
  border-radius: 8px; padding: 6px 11px; font-size: 12px; cursor: pointer;
}
.langBtn.active { border-color: #ffcf3f; color: #fff; box-shadow: 0 0 8px rgba(255,207,63,.3); }

/* Spell bar centered along the bottom-middle (desktop), hotkeys shown */
#spellbar {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px;
  padding: 7px; border-radius: 13px;
  background: rgba(10,7,16,.4); backdrop-filter: blur(3px);
}
.slot {
  position: relative; width: 58px; height: 58px;
  background: rgba(10,7,16,.66); border: 2px solid #3a2450; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.slot .key {
  position: absolute; top: 2px; left: 5px;
  font-size: 12px; font-weight: 800; color: #ffcf3f;
  text-shadow: 0 1px 2px #000; letter-spacing: .3px;
}
.slot .key.long { /* spelled-out labels ("space bar") shrink to fit the chip */
  font-size: 9px; letter-spacing: 0; white-space: nowrap;
}
.slot .el2 { /* element-combo badge: the secondary element's emoji in the corner */
  position: absolute; top: 1px; right: 3px; font-size: 12px; line-height: 1;
  filter: drop-shadow(0 0 3px var(--el2, #fff));
}
.slot .icon { font-size: 30px; line-height: 1; }
.slot .cover {
  position: absolute; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 700; color: #fff;
}
.slot.active { border-color: var(--accent); box-shadow: 0 0 12px rgba(255,122,47,.4); }
.slot .elbadge {
  position: absolute; bottom: 1px; right: 2px;
  font-size: 15px; line-height: 1; text-shadow: 0 1px 2px #000;
}
/* mana cost printed on the slot; slot dims when you can't afford it */
.slot .mana {
  position: absolute; bottom: 1px; left: 4px;
  font-size: 11px; font-weight: 800; color: #7fd0ff;
  text-shadow: 0 1px 2px #000; line-height: 1;
}
.slot.nomana .icon, .slot.nomana .elbadge { filter: grayscale(1) brightness(.55); opacity: .5; }
.slot.nomana .mana { color: #ff6a6a; }
/* electric-quake SILENCE: every owned spell greys out until it wears off */
.slot.silenced { position: relative; }
.slot.silenced .icon, .slot.silenced .elbadge, .slot.silenced .mana, .slot.silenced .key {
  filter: grayscale(1) brightness(.5); opacity: .45;
}
.slot.silenced::before {
  content: "🔇"; position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; opacity: .8; pointer-events: none;
  text-shadow: 0 1px 3px #000;
}
#spellbar.silenced { animation: silencePulse 0.6s ease-in-out infinite alternate; }
@keyframes silencePulse { from { filter: none; } to { filter: brightness(1.15) drop-shadow(0 0 6px rgba(255,225,74,.55)); } }

/* ---- Lobby ---- */
h1.small { font-size: 24px; }
/* Compact vertical rhythm so the whole lobby fits without a scrollbar. */
/* Wider lobby so the map picker + host options sit in two columns and the whole
   thing fits without scrolling. */
#lobby .panel { text-align: left; padding: 15px 22px 13px; width: min(760px, 94vw); }
#lobby h1.small { margin-bottom: 2px; }
/* map picker + invite (left) beside host options (right), so the whole config
   block is only as tall as its tallest column instead of a long stack. */
#lobbyCfg { display: flex; gap: 18px; align-items: flex-start; margin: 6px 0 2px; }
#lobbyCfg > .lobbyColL, #lobbyCfg > .lobbyColR { flex: 1 1 0; min-width: 0; }
.lobbyColL { display: flex; flex-direction: column; gap: 8px; }
.lobbyColL > *, .lobbyColR > * { margin: 0 !important; }
#lobbyCfg #themePick, #lobbyCfg #hostOpts, #lobbyCfg #lobbyInvite { margin: 0; }
#lobby .tag { margin: 0 0 4px; font-size: 12.5px; }
#lobby button { margin-top: 8px; padding: 10px; }
#lobby .opt { margin: 6px 0 2px; }
/* Auto-fill columns (3 across on the wide panel) + a capped, self-contained
   scroll region: a big roster (championship = 20 mages) scrolls WITHIN the list,
   so the menu panel itself never grows a scrollbar. */
#lobbyList {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px; margin: 6px 0 3px; max-height: 30vh; overflow-y: auto; padding-right: 2px;
}
.lobbyRow {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; min-width: 0;
  background: #150e22; border: 1px solid #2c1c40; border-radius: 9px;
  font-size: 14px;
}
.lobbyRow .dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.lobbyRow .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobbyRow .crown { font-size: 13px; }
.lobbyRow .rd { font-size: 13px; font-weight: 700; }
.lobbyRow .rd.yes { color: #5ee06a; }
.lobbyRow .rd.no { color: #7d6a99; }
.lobbyRow .rd.spec { color: #7fd0ff; }

/* in-game cursor picker (menu) */
#cursorPick {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 12px 0 4px;
}
#cursorPick .cpLabel { font-size: 13px; color: #c8b9e0; }
#cursorPick .cpArrow {
  width: auto; margin: 0; padding: 4px 12px; font-size: 16px; border-radius: 8px;
  background: #241634; border: 1px solid #4a2f66; color: var(--text);
}
#cursorPick .cpArrow:hover { background: #32204a; }
#curPreview {
  width: 34px; height: 34px; border-radius: 8px;
  background: #0a0710 center/24px 24px no-repeat;
  border: 1px solid #3a2450; image-rendering: pixelated;
}
/* mage skin picker — same layout & square swatch as the cursor picker */
#skinPick { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 8px 0 4px; }
#skinPick .cpLabel { font-size: 13px; color: #c8b9e0; }
#skinPick .cpArrow {
  width: auto; margin: 0; padding: 4px 12px; font-size: 16px; border-radius: 8px;
  background: #241634; border: 1px solid #4a2f66; color: var(--text);
}
#skinPick .cpArrow:hover { background: #32204a; }
#skinPreview { width: 34px; height: 34px; border-radius: 8px; border: 1px solid rgba(255,255,255,.45); box-shadow: 0 0 10px rgba(0,0,0,.4) inset; }
/* full-palette swatch grid under the arrow row — capped, self-contained scroll
   so a big palette doesn't stretch the Options panel into a scrollbar. */
.swGrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(26px, 1fr)); gap: 5px;
  margin: 6px 0 2px; max-height: 88px; overflow-y: auto; padding-right: 2px;
}
.swGrid .skinSw {
  width: 24px; height: 24px; padding: 0; border-radius: 6px; cursor: pointer;
  border: 2px solid transparent; box-shadow: 0 0 6px rgba(0,0,0,.4) inset; transition: transform .08s;
}
.swGrid .skinSw:hover { transform: scale(1.14); }
.swGrid .skinSw.sel { border-color: #fff; box-shadow: 0 0 8px rgba(255,255,255,.6); }

/* Options: two columns (left = language/skin/cursor, right = hotkeys/controls)
   so everything — even with the hotkey remapper open — fits without scrolling. */
.optionsPanel { width: min(680px, 94vw); }
#optionsBody { display: flex; gap: 22px; align-items: flex-start; }
#optionsBody .optCol { flex: 1 1 0; min-width: 0; }
#optionsBody .optCol > *:first-child { margin-top: 0; }
#optionsBody .controls { margin-top: 0; }

/* ---- hotkey remapping + controller hint (main menu) ---- */
#hotkeyPick { margin: 8px 0 4px; }
#hotkeyPick #hotkeyToggle { margin: 0; font-size: 13px; padding: 8px 10px; }
#hotkeyPanel { margin-top: 8px; }
#hotkeyList {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
  background: #150e22; border: 1px solid #2c1c40; border-radius: 10px; padding: 10px;
}
.hkRow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hkName { font-size: 12px; color: #c8b9e0; }
.hkKey {
  width: auto; margin: 0; padding: 4px 10px; min-width: 46px; font-size: 13px; font-weight: 700;
  border-radius: 7px; background: #241634; border: 1px solid #4a2f66; color: var(--text);
}
.hkKey:hover { background: #32204a; filter: none; }
.hkKey.capturing { border-color: var(--accent); color: #ffcf3f; background: #2a1a10; animation: countPulse .7s ease-in-out infinite; }
#hotkeyReset { margin-top: 8px; font-size: 12px; padding: 6px 10px; }
.hkNote { margin-top: 8px; font-size: 11.5px; color: #8a7aa8; line-height: 1.4; }

/* ---- multikill announcer banner ---- */
#multikill {
  position: absolute; top: 26%; left: 50%; transform: translateX(-50%);
  text-align: center; font-weight: 900; font-size: 46px; letter-spacing: 1px;
  color: #ffcf3f; text-shadow: 0 0 18px rgba(255,120,40,.9), 0 3px 8px #000;
  pointer-events: none; z-index: 8; white-space: nowrap;
}
#multikill .mkSub { font-size: 18px; font-weight: 700; color: #ff8a3d; margin-top: 2px; letter-spacing: 0; }
#multikill .mkWho { color: #fff; text-shadow: 0 0 14px rgba(255,255,255,.55), 0 3px 8px #000; }
#multikill.pop { animation: mkPop .5s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes mkPop { 0% { transform: translateX(-50%) scale(.4); opacity: 0; } 60% { transform: translateX(-50%) scale(1.15); opacity: 1; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } }

/* lobby game-mode chooser */
.gmOpt { margin: 6px 0; }
.gmLabel { display: block; font-size: 12px; color: #c8b9e0; margin-bottom: 3px; }
/* one full-width column: each mode gets the whole column width, so its full
   description fits on 1–2 lines without truncation or clipping the border. */
#gmBtns { display: grid; grid-template-columns: 1fr; gap: 4px; }

/* Lobby map-theme picker: ◀ [preview] ▶ */
#themePick { margin: 8px 0; }
.themeSel { display: flex; align-items: center; justify-content: center; gap: 12px; }
.themeSel .cpArrow { background: #241a34; color: #e9e0cf; border: 1px solid #4a3a6a;
  border-radius: 8px; width: 40px; height: 40px; font-size: 18px; cursor: pointer; }
.themeSel .cpArrow:hover:not(:disabled) { background: #32204a; }
.themeSel .cpArrow:disabled { opacity: .35; cursor: default; }
.themeMid { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#themePreview { position: static; inset: auto; cursor: default; /* override the global fullscreen canvas rule */
  width: 100%; max-width: 164px; height: auto; aspect-ratio: 240 / 150; border-radius: 10px; border: 1px solid #4a3a6a;
  background: #0e0b08; box-shadow: 0 4px 16px rgba(0,0,0,.4); image-rendering: auto; }
.themeName { font-size: 14px; font-weight: 700; color: #ffcf7a; letter-spacing: .3px; }
.gmBtn {
  width: auto; margin: 0; background: rgba(10,7,16,.5); border: 1px solid #3a2450;
  color: #cdb8e6; border-radius: 8px; padding: 6px 10px; font-size: 11.5px; line-height: 1.28;
  cursor: pointer; text-align: left;
}
.gmBtn.active { border-color: #ffcf3f; color: #fff; box-shadow: 0 0 8px rgba(255,207,63,.3); }
.gmBtn:disabled { cursor: default; opacity: .8; }
/* survival: eliminated rows + lives count in the scoreboard */
#scoreboard .row.elim { opacity: .4; }
#scoreboard .livesN { color: #ff8a9a; margin-left: 3px; font-size: 11px; }
/* "scan to join" invite card (only shown when an ngrok tunnel is up) */
/* Compact: QR on the left, title + link + copy stacked on the right, so the card
   is short enough to sit beside the map picker without scrolling the lobby. */
#lobbyInvite {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 10px;
  margin: 0; padding: 9px 11px;
  background: #150e22; border: 1px solid #2c1c40; border-radius: 12px;
}
#lobbyInvite .inviteTitle { grid-column: 1 / -1; font-size: 12.5px; font-weight: 700; color: #ffcf3f; }
#lobbyInvite .qr {
  grid-row: span 2; width: 92px; height: 92px; border-radius: 8px; background: #fff; padding: 5px;
  image-rendering: pixelated;
}
#lobbyInvite .inviteUrl {
  font-size: 12px; color: #7fe0ff; word-break: break-all; text-align: left; text-decoration: none; align-self: end;
}
#lobbyInvite .inviteUrl:hover { text-decoration: underline; }
button.ghost {
  background: transparent; border: 1px solid #4a2f66; color: var(--text);
  font-size: 14px; margin-top: 10px;
}
button.ghost:hover { background: #241634; }
button.readied { background: linear-gradient(180deg, #5ee06a, #34b84a); color: #05230b; }

/* ---- Main menu (Play / Options / Rank) — compact, never scrolls ---- */
.menuHome { text-align: center; }
/* first-run welcome name entry */
.welcomeName { display: block; text-align: left; margin: 18px 0 4px; }
.welcomeName input { font-size: 18px; padding: 13px; text-align: center; }
#welcome #welcomeBtn { font-size: 19px; padding: 15px; margin-top: 14px; width: 100%; }
.shake { animation: shake .38s; border-color: #ff5a5a !important; }
@keyframes shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-7px); } 40%,80% { transform: translateX(7px); } }
.menuBtns { margin-top: 16px; }
.menuBtns #playBtn { font-size: 19px; padding: 15px; margin-top: 6px; }
/* Quick Gameplay — a distinct teal/green call-to-action, set apart from Play */
.menuBtns #quickBtn {
  font-size: 20px; padding: 16px; width: 100%; font-weight: 800; color: #05231f;
  background: linear-gradient(180deg, #3ff0c0, #16b48c); border: none;
  box-shadow: 0 6px 18px -6px rgba(22,180,140,.7);
}
.menuBtns #quickBtn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.lobbyRow.botsRow { opacity: .7; font-style: italic; justify-content: center; }

/* Solo "Start now" — the host force-start button, promoted to a primary CTA when
   you're the only human (starting the match against bots). */
#startBtn.solo {
  display: block; opacity: 1; color: #05231f; font-weight: 800;
  background: linear-gradient(180deg, #3ff0c0, #16b48c); border: none;
  box-shadow: 0 6px 18px -6px rgba(22,180,140,.7);
}
#startBtn.solo:hover { filter: brightness(1.06); }

/* Generic confirm dialog (sits above every other overlay). */
#confirmModal { z-index: 60; }
.confirmPanel { width: min(400px, 92vw); text-align: center; }
.confirmPanel #confirmMsg { margin: 8px 0 18px; color: #d9cef0; line-height: 1.5; }
.confirmBtns { display: flex; gap: 10px; justify-content: center; }
.confirmBtns button { flex: 1; }
.menuBtns .ghost { margin-top: 10px; }
.browserTop h1 { margin: 0; }

/* host option checkbox */
.opt {
  display: flex; align-items: center; gap: 9px; margin: 12px 0 2px;
  font-size: 13.5px; color: #c8b9e0; cursor: pointer;
}
.opt input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; flex: none; }
.opt input:disabled { cursor: default; }
#hostOpts {
  margin: 8px 0 2px; padding: 7px 12px;
  background: #150e22; border: 1px solid #2c1c40; border-radius: 10px;
}
#hostOpts .opt { margin: 3px 0; }
#hostOpts .opt:first-of-type { margin-top: 5px; }
.gmOpt { margin: 2px 0; }

/* ---- Shop ---- */
/* Wider + compact so all three stalls' content fits without a scrollbar. */
/* Wide marketplace: expands horizontally and uses multi-column lists so the
   whole shop fits on screen without scrolling. */
.panel.wide { width: min(1040px, 96vw); max-height: 96vh; max-height: 96svh; overflow-y: auto; padding: 14px 20px 12px; }
#shop h1.small { margin-bottom: 2px; }
/* countdown + gold share one compact row to reclaim vertical space */
.shopTop { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 2px 0 6px; }
#shopCountdown {
  text-align: left; font-size: 20px; font-weight: 800; letter-spacing: .5px;
  color: #ffcf3f; text-shadow: 0 2px 10px rgba(255,140,40,.5);
}
#shopCountdown.urgent {
  color: #ff5a5a; animation: countPulse .6s ease-in-out infinite;
}
@keyframes countPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }
#goldRow { text-align: right; font-size: 15px; color: #ffcf3f; white-space: nowrap; }
#goldRow b { font-size: 19px; }
.shopHead { font-size: 12px; letter-spacing: .4px; text-transform: uppercase; color: #8a7aa8; margin: 4px 0 4px; }

/* element picker */
#elementList { display: flex; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.elCard {
  flex: 1 1 92px; min-width: 88px; cursor: pointer;
  padding: 6px 8px; border-radius: 10px; text-align: center;
  background: #150e22; border: 2px solid #2c1c40; transition: border-color .1s, background .1s;
}
.elCard:hover { background: #1c1330; }
.elCard.selected { border-color: var(--el, var(--accent)); background: #22152e; box-shadow: 0 0 12px -2px var(--el, var(--accent)); }
.elCard .elEmoji { font-size: 24px; }
.elCard .elName { font-size: 12px; font-weight: 700; margin-top: 2px; }
.elCard .elTag { font-size: 10.5px; margin-top: 2px; color: #8a7aa8; }
.elCard .elTag.owned { color: #5ee06a; }
.elCard .elDesc { font-size: 10px; color: #7d6a99; margin-top: 4px; line-height: 1.25; }

#elementBadge {
  position: absolute; bottom: 66px; left: 14px;
  font-size: 12px; font-weight: 700; color: #fff;
  background: rgba(10,7,16,.6); border: 1.5px solid #3a2450; border-radius: 8px;
  padding: 3px 9px; backdrop-filter: blur(3px);
}
#shopList { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 4px; }
#passiveList { display: block; }
.passCards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
/* element filter tabs for the passive shop */
.passTabs { display: flex; gap: 6px; justify-content: center; margin-bottom: 8px; }
.passTab {
  position: relative; padding: 6px 10px; border-radius: 9px; font-size: 17px; line-height: 1;
  background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.12); cursor: pointer;
  transition: transform .08s, border-color .12s, background .12s;
}
.passTab:hover { transform: translateY(-1px); background: rgba(255,255,255,.09); }
.passTab.on { border-color: var(--el); background: color-mix(in srgb, var(--el) 22%, transparent); box-shadow: 0 0 10px -2px var(--el); }
.passOwn {
  position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 8px; background: var(--el); color: #10121c; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.shopCard {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 7px 10px; background: #150e22; border: 1px solid #2c1c40; border-radius: 10px;
}
/* per-slot element chooser inside a spell card (compact row under the card) */
.slotEls { flex-basis: 100%; display: flex; gap: 3px; margin-top: 1px; }
.slotEl {
  width: auto; margin: 0; padding: 2px 5px; font-size: 13px; line-height: 1;
  border-radius: 6px; background: #1b1230; border: 1.5px solid #2c1c40; cursor: pointer;
  filter: grayscale(.5) opacity(.7); transition: filter .1s, border-color .1s;
}
.slotEl:hover { filter: none; }
.slotEl.on { border-color: var(--el, var(--accent)); background: #22152e; filter: none; box-shadow: 0 0 8px -2px var(--el, var(--accent)); }
/* ELEMENT COMBO row: pick an optional SECOND element for the spell (∅ = pure) */
.slotEls.combo { margin-top: 0; opacity: .92; }
.slotEls.combo .comboLbl { font-size: 12px; font-weight: 800; color: #8a7aa8; align-self: center; padding: 0 1px; }
.slotEl.none { color: #8a7aa8; font-size: 12px; }
.shopCard .comboTag { font-size: 12px; color: #b98cff; }
.shopCard .sIcon { font-size: 24px; flex: none; }
.shopCard .sInfo { flex: 1; min-width: 0; }
.shopCard .sName { font-size: 14px; font-weight: 600; }
.shopCard .sDesc { font-size: 11px; color: #8a7aa8; }
.shopCard button {
  width: auto; margin: 0; padding: 7px 12px; font-size: 13px; border-radius: 8px;
  /* purchase = violet (never yellow, so it doesn't read as gold) */
  background: linear-gradient(180deg, #a06bff, #6e3fd6); color: #fff;
}
.shopCard button:disabled { background: #2c1c40; color: #6b5a88; cursor: not-allowed; }
.shopCard .owned { font-size: 13px; font-weight: 700; color: #5ee06a; white-space: nowrap; }
.shopCard.starter .owned { color: #b9a7d6; }
.shopCard.locked { opacity: .5; filter: grayscale(.5); }
.owned.locked { color: #8a7aa8; font-weight: 700; white-space: nowrap; }
.potSize.locked { opacity: .5; filter: grayscale(.5); }
.shopCard.elemental { border-color: var(--el); }
.shopCard .sIcon { position: relative; }
.shopCard .elchip {
  position: absolute; bottom: -4px; right: -6px;
  font-size: 13px; line-height: 1; text-shadow: 0 1px 2px #000;
}

/* ---- Skill tree (radial, Path-of-Exile-style) ---- */
/* Square SVG: cap its width by a viewport-height fraction too, so on short
   screens the whole tree shrinks to fit instead of scrolling the panel. */
#skillTree { position: relative; width: 100%; max-width: min(640px, 64vh); margin: 2px auto 0; }
#treeSvg {
  width: 100%; height: auto; aspect-ratio: 1 / 1; display: block; cursor: grab;
  background: radial-gradient(circle at 50% 50%, rgba(70,46,110,.35), rgba(10,7,16,.12) 70%);
  border: 1px solid #3a2450; border-radius: 14px; touch-action: none; /* drag = pan, wheel = zoom */
}
#treeSvg:active { cursor: grabbing; }
.tedge { stroke: #2a1c3c; stroke-width: 2.2; }
.tedge.on { stroke: #b98cff; stroke-width: 3.2; }
.thub { fill: #d9c7ff; stroke: #fff; stroke-width: 2; }
/* central respec button (replaces the plain hub dot) */
.thubBtn { cursor: pointer; }
.thubBtn text { pointer-events: none; user-select: none; fill: #2a1c3c; font-weight: 800; }
.thubBtn:hover .thub { fill: #fff; filter: drop-shadow(0 0 6px #b98cff); }
.thubBtn.off { cursor: default; opacity: .55; }
.thubBtn.off:hover .thub { fill: #d9c7ff; filter: none; }
.tnode circle { fill: #17101f; stroke: var(--el, #fff); stroke-width: 2.5; transition: filter .08s ease; }
.tnode.notable circle { stroke-width: 3.5; }
.tnode.keystone circle { stroke-width: 4.5; filter: drop-shadow(0 0 5px var(--el, #ff5a7a)); }
.tnode.bridge circle { stroke-dasharray: 4 2.5; }
.tnode text { pointer-events: none; user-select: none; }
.tnode.off circle { opacity: .4; }          /* not yet reachable */
.tnode.off text { opacity: .55; }
.tnode.open { cursor: pointer; }             /* allocatable now */
.tnode.open circle { fill: #241636; filter: drop-shadow(0 0 6px var(--el, #b98cff)); }
.tnode.open:hover circle { filter: drop-shadow(0 0 11px var(--el, #b98cff)); }
.tnode.on circle { fill: var(--el, #b98cff); stroke: #fff; filter: drop-shadow(0 0 7px var(--el, #b98cff)); } /* allocated */
#treePoints { color: #d6b8ff; font-size: 1.15em; }
/* Tip is an absolute overlay pinned to the bottom of the tree, so showing it on
   hover never grows the panel (which would pop a scrollbar). */
#treeTip {
  position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 3; text-align: left;
  background: rgba(10,7,16,.94); border: 1px solid #3a2450; border-radius: 10px;
  padding: 7px 12px; font-size: 13px; line-height: 1.45; pointer-events: none;
}
/* Hovering a LOWER node flips the tip to the top so it never covers that node. */
#treeTip.top { bottom: auto; top: 6px; }
#treeTip .tstat { display: block; color: #b9a7d6; font-size: 12px; margin-top: 2px; }

/* ---- Spell tree (radial, per spell slot) ---- */
.spellTabs { display: flex; gap: 6px; margin: 2px 0 8px; }
.spellTab {
  flex: 1; width: auto; margin: 0; padding: 7px 4px 6px; border-radius: 10px; cursor: pointer;
  position: relative; background: #150e22; border: 2px solid #2c1c40; color: var(--text);
  display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1;
}
.spellTab .stIcon { font-size: 21px; }
.spellTab .stKey { font-size: 10px; font-weight: 700; color: #b9a7d6; letter-spacing: .5px; }
.spellTab:hover { background: #1c1330; }
.spellTab.sel { border-color: var(--el, var(--accent)); background: #22152e; box-shadow: 0 0 11px -2px var(--el, var(--accent)); }
.spellTab.locked { opacity: .55; }
.spellTab .stBadge {
  position: absolute; top: -5px; right: -4px; font-size: 12px; line-height: 1;
  text-shadow: 0 1px 2px #000; filter: drop-shadow(0 0 3px rgba(0,0,0,.6));
}
#spellTree { position: relative; width: 100%; max-width: min(620px, 60vh); margin: 0 auto; }
#spellTreeSvg {
  width: 100%; height: auto; aspect-ratio: 640 / 268; display: block;
  background: linear-gradient(180deg, rgba(70,46,110,.28), rgba(10,7,16,.10));
  border: 1px solid #3a2450; border-radius: 14px; touch-action: manipulation;
}
.sedge { stroke: #2a1c3c; stroke-width: 3; fill: none; }
.sedge.on { stroke: var(--el, #b98cff); stroke-width: 4.5; opacity: .9; }
.sedge.vert { stroke-width: 2.5; }
/* element branch rails: dim base + a lit stretch over the invested levels */
.srail { stroke: #241733; stroke-width: 3; stroke-linecap: round; }
.srail.on { stroke: var(--el, #b98cff); stroke-width: 4; opacity: .85; stroke-linecap: round; }
/* the primary ⇄ lean link joining the two equipped branches at their anchors */
.slink { stroke: #2c1c40; stroke-width: 2.5; fill: none; }
.slink.on { stroke: #ffd35a; filter: drop-shadow(0 0 5px rgba(255, 211, 90, .55)); }
.comboPlus { fill: #cdb6ff; font-weight: 800; pointer-events: none; }
.shub circle { fill: #17101f; stroke: var(--el, #fff); stroke-width: 3; }
.shub text { pointer-events: none; user-select: none; }
.shub .shubKey { fill: #b9a7d6; font-weight: 700; letter-spacing: .5px; }
.shub.locked circle { opacity: .5; }
.snode circle { fill: #17101f; stroke: var(--el, #fff); stroke-width: 2.5; transition: filter .08s ease; }
.snode text { pointer-events: none; user-select: none; }
.snode.off circle { opacity: .38; }              /* spell not usable yet */
.snode.off text { opacity: .5; }
.snode.open { cursor: pointer; }
.snode.open circle { fill: #241636; filter: drop-shadow(0 0 6px var(--el, #b98cff)); }
.snode.open:hover circle { filter: drop-shadow(0 0 11px var(--el, #b98cff)); }
.snode.on circle { fill: var(--el, #b98cff); stroke: #fff; filter: drop-shadow(0 0 8px var(--el, #b98cff)); }
.snode.blocked { cursor: not-allowed; }          /* already mixing 2 elements — 3rd not allowed */
.snode.blocked circle { opacity: .28; stroke-dasharray: 3 4; }
.snode.blocked text { opacity: .35; }
/* invested-level bubble on an equipped element node (its share of the slot's 10-level pool) */
.snode .snodeLvlBg { fill: #0d0815; stroke: var(--el, #fff); stroke-width: 1.5; opacity: 1 !important; stroke-dasharray: none !important; }
.snode .snodeLvl { fill: #fff; font-weight: 700; opacity: 1 !important; }
/* level icons along a branch (one per level of the slot's shared 10-level pool) */
.snode .hitArea { fill: transparent !important; stroke: none !important; filter: none !important; }
.snode.lvl.open circle:not(.hitArea) { animation: lvlPulse 1.3s ease-in-out infinite; }
@keyframes lvlPulse {
  0%, 100% { filter: drop-shadow(0 0 3px var(--el, #b98cff)); }
  50%      { filter: drop-shadow(0 0 11px var(--el, #b98cff)); }
}
.snode.lvl.reach { cursor: pointer; }               /* buyable in one multi-level jump */
.snode.lvl.reach circle:not(.hitArea) { fill: #1d1229; opacity: .55; }
.snode.lvl.reach text { opacity: .6; }
.snode.lvl.reach:hover circle:not(.hitArea) { opacity: .85; filter: drop-shadow(0 0 7px var(--el, #b98cff)); }
.snode.lvl.mile circle:not(.hitArea) { stroke-width: 3.5; } /* milestone levels (5 & 10) */
/* ---- Path fork (the primary element's branch splits into a branch per path) ---- */
/* faint tinted band framing the opened branch, so the expansion reads at a glance */
.sforkband { fill: color-mix(in srgb, var(--el, #b98cff) 9%, transparent);
  stroke: color-mix(in srgb, var(--el, #b98cff) 34%, transparent); stroke-width: 1.5; }
/* pulsing selection ring around the active path node */
.spathring { fill: none; stroke: var(--el, #b98cff); stroke-width: 2; opacity: .8;
  animation: sringPulse 1.6s ease-in-out infinite; }
@keyframes sringPulse { 0%,100% { opacity: .4; r: 20px; } 50% { opacity: .85; r: 22px; } }
/* the curved limb from the element anchor out to each path node */
.spathbranch { stroke: #2a1c3c; stroke-width: 3.5; fill: none; stroke-linecap: round; }
.spathbranch.on { stroke: var(--el, #b98cff); stroke-width: 5; opacity: .95;
  filter: drop-shadow(0 0 6px var(--el, #b98cff)); }
/* the chosen limb + its lit rail pulse with flowing energy toward the tips */
.spathbranch.flow, .srail.flow { stroke-dasharray: 2 12; animation: sflow 0.9s linear infinite; }
@keyframes sflow { to { stroke-dashoffset: -14; } }
/* the path node (a spell-variant bud on the branch) */
.spathnode { cursor: pointer; }
.spathnode circle { fill: #17101f; stroke: var(--el, #b98cff); stroke-width: 2.5;
  opacity: .5; transition: transform .18s cubic-bezier(.34,1.56,.64,1), filter .18s ease, opacity .18s ease;
  transform-box: fill-box; transform-origin: center; }
.spathnode text { transition: transform .18s cubic-bezier(.34,1.56,.64,1);
  transform-box: fill-box; transform-origin: center; pointer-events: none; user-select: none; }
.spathnode:hover circle { opacity: .95; filter: drop-shadow(0 0 9px var(--el, #b98cff)); transform: scale(1.12); }
.spathnode:hover text { transform: scale(1.12); }
/* the ACTIVE path — it snaps onto the main limb, glowing and enlarged */
.spathnode.on circle { fill: var(--el, #b98cff); stroke: #fff; opacity: 1;
  filter: drop-shadow(0 0 11px var(--el, #b98cff)); transform: scale(1.18); }
.spathnode.on text { transform: scale(1.05); }
/* path name label beside each bud */
.spathlabel { fill: #9a86bd; font-weight: 700; pointer-events: none; user-select: none;
  letter-spacing: .2px; }
.spathlabel.on { fill: #fff; filter: drop-shadow(0 0 4px var(--el, #b98cff)); }
/* Absolute overlay pinned to the tree's bottom — hovering never grows the panel.
   Hovering a LOWER branch flips it to the top (`.top`) so it never hides the
   branch being read. */
#spellTip {
  position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 3; text-align: left;
  background: rgba(10,7,16,.94); border: 1px solid #3a2450; border-radius: 10px;
  padding: 7px 12px; font-size: 13px; line-height: 1.4; pointer-events: none;
}
#spellTip.top { bottom: auto; top: 6px; }
#spellTip .stat { display: block; color: #b9a7d6; font-size: 12px; margin-top: 2px; }
.spellActions { margin-top: 6px; }
.spellActRow {
  display: flex; align-items: center; gap: 10px;
  background: #150e22; border: 1px solid #2c1c40; border-radius: 10px; padding: 7px 12px;
}
.spellActRow .sIcon { font-size: 24px; flex: none; }
.spellActRow .sInfo { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.spellActRow .sName { font-weight: 700; white-space: nowrap; }
.spellActRow .sDesc { font-size: 12px; color: #b9a7d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spellActRow .buyBtn { width: auto; margin: 0; padding: 9px 15px; font-size: 13px; border-radius: 9px; white-space: nowrap; flex: none; }
.spellActRow .comboTag { font-size: 12px; color: #d6b8ff; font-weight: 600; }
.spellActRow .owned { font-size: 13px; color: #5ee06a; font-weight: 700; white-space: nowrap; }
.spellActRow .owned.locked { color: #b9a7d6; }
.spellActRow .owned.maxed { color: #ffcf3f; }
.respecRow { margin-top: 6px; justify-content: space-between; }
/* (Path selection moved onto the tree — the primary branch forks into path
   branches; see .spathnode / .spathbranch above.) */
/* Shop action buttons sit tight to the content — no big top margin. */
#shop #shopReadyBtn { margin-top: 8px; padding: 11px; }
.panel.wide { padding-bottom: 10px; }
.respecBtn {
  width: auto; margin: 0; padding: 8px 13px; font-size: 13px; font-weight: 700; white-space: nowrap;
  background: linear-gradient(180deg, #ff9a6b, #d8632f); color: #2b1005;
}
.respecBtn:disabled { background: #2c1c40; color: #6b5a88; }
.respecNote { font-size: 11px; color: #9a86bd; text-align: right; }

/* ---- Marketplace stalls / panels ---- */
/* Horizontal pills (icon beside label) keep the stall row short. */
#stalls { display: flex; gap: 8px; margin: 4px 0 8px; }
.stall {
  flex: 1; width: auto; margin: 0; padding: 8px 10px; border-radius: 10px;
  background: #150e22; border: 2px solid #2c1c40; color: var(--text);
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 600;
}
.stall .npc { font-size: 22px; line-height: 1; }
/* Skill-tree stall wears a carved rune glyph (an inline SVG) instead of an emoji. */
.stall .npc-rune { display: inline-flex; }
.stall .npc-rune svg { width: 26px; height: 26px; color: #ffd35a; filter: drop-shadow(0 0 5px rgba(255,193,60,.55)); }
.stall.active .npc-rune svg { color: #ffe39a; }
.stall:hover { background: #1c1330; }
.stall.active { border-color: var(--accent); background: #22152e; box-shadow: 0 0 12px -2px var(--accent); }
/* "you can spend something here" nudge: the closed stall blinks + wears a badge */
.stall { position: relative; }
.stall.nudge { border-color: #ffd35a; animation: stallNudge 1.1s ease-in-out infinite; }
@keyframes stallNudge {
  0%, 100% { box-shadow: 0 0 4px -2px rgba(255, 211, 90, .35); }
  50%      { box-shadow: 0 0 16px 1px rgba(255, 211, 90, .85); }
}
.notifDot {
  position: absolute; top: -7px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: linear-gradient(180deg, #ffe14a, #ff9f2f); color: #3a2004;
  font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
  box-shadow: 0 0 8px rgba(255, 193, 60, .8); pointer-events: none;
  animation: notifPop 1.1s ease-in-out infinite;
}
@keyframes notifPop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
/* clickable hint line under the stalls naming what's waiting in the other tab */
#spendHint {
  display: block; width: 100%; margin: -2px 0 8px; padding: 6px 10px;
  background: rgba(255, 211, 90, .08); border: 1px dashed #b98a2e; border-radius: 9px;
  color: #ffd98a; font-size: 12.5px; font-weight: 600; text-align: center; cursor: pointer;
}
#spendHint:hover { background: rgba(255, 211, 90, .16); }
#spendHint.hidden { display: none; }
.mkPanel { min-height: 40px; }

/* ---- Grimoire (📖 Spells & Skills): a read-only main-menu reference ---- */
/* Header tag is compact; the card grid is a self-contained scroll region so the
   panel itself never scrolls (see menus-no-scrollbars). */
#codex .panel.wide { text-align: left; overflow: hidden; }
#codex .tag { margin: 2px 0 8px; font-size: 12.5px; }
#codexTabs { display: flex; gap: 8px; margin: 0 0 10px; }
.codexTab {
  flex: 1; width: auto; margin: 0; padding: 9px 10px; border-radius: 10px;
  background: #150e22; border: 2px solid #2c1c40; color: var(--text);
  font-size: 14px; font-weight: 700;
}
.codexTab:hover { background: #1c1330; }
.codexTab.active { border-color: var(--accent); background: #22152e; box-shadow: 0 0 12px -2px var(--accent); }
.codexBody {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: 10px; align-items: start;
  max-height: min(560px, 66vh); overflow-y: auto;
  margin: 0 -4px; padding: 0 4px 2px;
}
.cxCard {
  background: #150e22; border: 1px solid #2c1c40; border-left: 3px solid var(--el, var(--accent));
  border-radius: 10px; padding: 9px 11px 4px;
}
.cxHead { display: flex; align-items: center; gap: 8px; }
.cxHead .cxEmoji { font-size: 21px; line-height: 1; }
.cxHead .cxName { font-size: 15px; font-weight: 800; color: var(--el, #fff); }
.cxSub { font-size: 10.5px; color: #8a7aa8; margin: 3px 0 7px; line-height: 1.3; }
.cxRow { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; border-top: 1px solid #241634; }
.cxHead + .cxRow, .cxSub + .cxRow { border-top: none; }
.cxRow .cxKey {
  flex: none; min-width: 20px; height: 20px; margin-top: 1px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #241634; border: 1px solid #4a2f66; border-bottom-width: 2px; border-radius: 5px;
  font-size: 11px; font-weight: 700; color: #cdbce8;
}
.cxRow .cxKey.none { visibility: hidden; min-width: 0; width: 0; margin: 0; padding: 0; border: none; }
.cxRow .cxIco { flex: none; font-size: 18px; line-height: 1.2; width: 22px; text-align: center; }
.cxRow .cxTxt { display: flex; flex-direction: column; gap: 1px; }
.cxRow .cxTxt b { font-size: 12.5px; color: #e7dcff; }
.cxRow .cxTxt span { font-size: 11px; color: #9a86bd; line-height: 1.32; }

/* ---- Dead-player in-game shop: the Marketplace overlay reused as a small,
   collapsible corner panel while you're out of the live round. It does NOT dim
   the arena (you keep spectating behind it), so `.overlay` fills/pointer-events
   are neutralized here and only the panel itself is interactive. ---- */
.overlay.deadmode {
  position: fixed; inset: auto auto 92px 12px;
  display: block; align-items: initial; justify-content: initial;
  background: none; padding: 0; z-index: 8; pointer-events: none;
  width: min(440px, 94vw); max-height: 64vh;
}
.overlay.deadmode .panel {
  pointer-events: auto; margin: 0; width: 100%; max-height: 64vh;
  padding: 12px 16px 12px; border-color: #5a3a1e;
  box-shadow: 0 12px 40px rgba(0,0,0,.7), 0 0 0 1px rgba(255,193,60,.25);
}
.overlay.deadmode .panel h1 { font-size: 1.05rem; margin: 2px 0 6px; }
.deadNote { font-size: 12px; color: #ffcf8a; margin: 0 0 8px; line-height: 1.35; }
#shopCollapse {
  width: auto; margin: 0 0 6px; padding: 8px 14px; font-size: 13px; font-weight: 700;
  border-radius: 10px; border: 1px solid #6a4a20; background: #241a10; color: #ffdf9a; cursor: pointer;
}
#shopCollapse:hover { background: #2e2214; }
/* Collapsed: only the toggle pill shows — the panel shrinks to a button. */
.overlay.deadmode.collapsed { max-height: none; width: auto; }
.overlay.deadmode.collapsed .panel { padding: 0; background: none; border: none; box-shadow: none; max-height: none; overflow: visible; }
.overlay.deadmode.collapsed .panel > *:not(#shopCollapse) { display: none !important; }

/* ---- Bounty: a coin badge beside the leading mage's name in the scoreboard. */
#scoreboard .bounty { color: #ffd35a; font-weight: 700; margin-left: 5px; font-size: 11px; white-space: nowrap; text-shadow: 0 0 6px rgba(255,193,60,.5); }

/* per-spell level pips + upgrade button inside each shop card */
.shopCard .lvlpips { font-size: 13px; letter-spacing: 1.5px; white-space: nowrap; }
.shopCard .maxed { color: #ffcf3f; }
.buyBtn.upBtn {
  background: linear-gradient(180deg, #7fe0ff, #38a9d8); color: #05202b; white-space: nowrap;
}
.buyBtn.upBtn:disabled { background: #2c1c40; color: #6b5a88; }
/* an AFFORDABLE level-up gently glows — the "spend me" cue inside the open panel */
.spellActRow .buyBtn.upBtn:not(:disabled) { animation: upGlow 1.4s ease-in-out infinite; }
@keyframes upGlow {
  0%, 100% { box-shadow: 0 0 3px rgba(127, 224, 255, .25); }
  50%      { box-shadow: 0 0 12px rgba(127, 224, 255, .8); }
}

#potionList, #runeList { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* potion size grid inside each Health/Mana group */
.potGroup { display: block; }
.potHead { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.potHead .sIcon { font-size: 22px; }
.potHead .sDesc { font-weight: 400; }
.potSizes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.potSize {
  display: flex; align-items: center; gap: 6px;
  background: #1b1230; border: 1px solid #2c1c40; border-radius: 8px; padding: 6px 8px; font-size: 12px;
}
.potSize .psName { font-weight: 600; min-width: 46px; }
.potSize .psRestore { font-weight: 700; }
.potSize .psCount { margin-left: auto; color: #b9a7d6; }
.potSize .buyBtn { padding: 5px 9px; font-size: 12px; border-radius: 7px;
  background: linear-gradient(180deg, #a06bff, #6e3fd6); color: #fff; width: auto; margin: 0; }
.potSize .buyBtn:disabled { background: #2c1c40; color: #6b5a88; }
.potSize .owned { font-size: 12px; color: #5ee06a; font-weight: 700; margin-left: auto; }

/* ---- in-game potion bar (right of the spell bar so they never overlap) ---- */
#potionBar {
  position: absolute; left: 364px; bottom: 16px;
  display: flex; gap: 8px; pointer-events: auto; flex-wrap: wrap; max-width: 40vw;
}
.potion {
  position: relative; min-width: 56px; height: 44px; padding: 0 10px;
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  background: rgba(10,7,16,.7); border: 1.5px solid #3a2450; border-radius: 9px;
  font-size: 15px; font-weight: 700; overflow: hidden;
}
.potion .pk { position: absolute; top: 1px; left: 4px; font-size: 9px; color: #ffcf3f; }
.potion .pcount { font-size: 13px; }
.potion .pcd {
  position: absolute; inset: 0; background: rgba(0,0,0,.62);
  display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff;
}

/* locked (unowned) spell slots: hide the spell icon entirely, show only a lock */
.slot.locked { opacity: .6; background: rgba(10,7,16,.5); }
.slot.locked .icon, .slot.locked .elbadge, .slot.locked .mana, .slot.locked .key { visibility: hidden; }
.slot.locked::after {
  content: "🔒"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; font-size: 24px; opacity: .8;
}

/* ---- Buff chips over mages handled on canvas; HUD buff row ---- */
#banner {
  position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%);
  text-align: center; font-size: 46px; font-weight: 800;
  text-shadow: 0 4px 24px rgba(0,0,0,.8); pointer-events: none;
}
#banner .sub { font-size: 20px; font-weight: 500; color: #ffcf3f; margin-top: 6px; }

/* Dead/spectator overlay: "you're out — watching X" + a rotating gameplay tip */
#deathTips {
  position: absolute; bottom: 15%; left: 50%; transform: translateX(-50%);
  width: min(520px, 88vw); text-align: center; z-index: 9; pointer-events: none;
  background: rgba(10,7,16,.82); border: 1px solid #3a2450; border-radius: 12px;
  padding: 10px 16px; box-shadow: 0 6px 22px rgba(0,0,0,.6);
  animation: dtFade .4s ease both;
}
#deathTips .dtHead {
  font-size: 18px; font-weight: 800; color: #ff6a6a;
  text-shadow: 0 2px 8px rgba(0,0,0,.8); letter-spacing: .3px;
}
#deathTips .dtTip { margin-top: 6px; font-size: 13px; line-height: 1.4; color: #e7dcf5; }
#deathTips .dtLabel { color: #ffcf3f; font-weight: 700; margin-right: 4px; }

/* Live performance HUD (F3 / ?perf) */
#perfHud {
  position: fixed; top: 8px; left: 8px; z-index: 40; pointer-events: none;
  font: 11px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: #b6f0c0; background: rgba(6,10,8,.82); border: 1px solid #1f6b3a;
  border-radius: 8px; padding: 7px 10px; white-space: pre; letter-spacing: .2px;
  text-shadow: 0 1px 2px #000; min-width: 168px;
}
#perfHud b { color: #eafff0; font-weight: 700; }
#perfHud .warn { color: #ffcf3f; }
#perfHud .bad { color: #ff6a6a; }
@keyframes dtFade { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@media (max-height: 460px) { #deathTips { bottom: 8%; padding: 7px 12px; } #deathTips .dtHead { font-size: 15px; } #deathTips .dtTip { font-size: 12px; } }

/* mid-width screens: 2-column spell grid (3-up needs a roomy window) */
@media (max-width: 900px) {
  #shopList { grid-template-columns: 1fr 1fr; }
  .passCards { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  h1 { font-size: 26px; }
  h1.small { font-size: 21px; }
  .tag { font-size: 13px; margin-bottom: 14px; }
  .panel { padding: 18px 16px 16px; }
  /* 16px inputs stop iOS from auto-zooming the page on focus */
  input { font-size: 16px; }
  button { padding: 14px; font-size: 16px; }
  .createRow button { padding: 0 14px; }
  #phaseInfo { font-size: 12px; padding: 6px 9px; }
  #scoreboard { font-size: 11px; min-width: 108px; padding: 6px 9px; }
  #topbar { padding: 0 10px; }
  #banner { font-size: 30px; }
  #banner .sub { font-size: 15px; }
  /* stack shop/potion cards one-per-row so they're readable on a phone */
  #shopList, #potionList, #runeList, .passCards { grid-template-columns: 1fr; }
  #lobbyList { grid-template-columns: 1fr; }
  /* the two-column layouts stack on narrow phones */
  #optionsBody, #lobbyCfg { flex-direction: column; gap: 8px; }
  .elCard { flex-basis: 78px; min-width: 78px; }
  #serverList { max-height: 42vh; }
  #lobbyInvite .qr { width: 156px; height: 156px; }
  #shopCountdown { font-size: 22px; }
  .stall .npc { font-size: 22px; }
}

/* short screens (landscape phones): tighten vertical space, drop extras */
@media (max-height: 520px) {
  .panel { padding: 14px 16px; }
  h1 { font-size: 22px; margin-bottom: 2px; }
  .tag { margin-bottom: 10px; }
  .controls { display: none; }        /* keyboard help isn't worth the height */
  #lobbyInvite .qr { width: 120px; height: 120px; }
  #lobbyInvite { padding: 10px; }
}

/* ---- Kill feed (recent knockouts, top-left under the phase pill) ---- */
#killFeed {
  position: absolute; top: 58px; left: 16px;
  display: flex; flex-direction: column; gap: 5px;
  max-width: 46vw; pointer-events: none;
}
#killFeed .kfRow {
  background: rgba(10,7,16,.66); border: 1px solid #3a2450; border-left: 3px solid #ff6a2f;
  border-radius: 8px; padding: 4px 10px; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: kfIn .18s ease-out; transition: opacity .8s ease;
}
#killFeed .kfRow.fade { opacity: 0; }
#killFeed .kfIc { margin-right: 6px; }
@keyframes kfIn { from { transform: translateX(-16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- End-of-match MVP card (center) ---- */
#mvp {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 6; pointer-events: auto;
}
.mvpCard {
  background: rgba(12,8,20,.94); border: 1px solid #5a3a80; border-radius: 16px;
  padding: 18px 26px 20px; text-align: center; min-width: 300px;
  box-shadow: 0 18px 60px rgba(0,0,0,.6), 0 0 0 4px rgba(255,207,63,.08);
  animation: mvpIn .3s cubic-bezier(.2,1.3,.5,1);
}
@keyframes mvpIn { from { transform: scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
.mvpHead { font-size: 15px; font-weight: 700; color: #ffcf3f; letter-spacing: .5px; }
.mvpBody { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 10px 0 14px; }
.mvpAv { width: 76px; height: 76px; image-rendering: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.mvpName { font-size: 22px; font-weight: 800; }
.mvpStats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mvpStats > div { display: flex; flex-direction: column; gap: 2px; }
.mvpStats b { font-size: 20px; color: #fff; }
.mvpStats span { font-size: 10px; color: #b9a7d6; text-transform: uppercase; letter-spacing: .4px; }
.mvpBtns { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.mvpBtns:empty { display: none; }
.mvpBtns button {
  pointer-events: auto; padding: 8px 14px; font-size: 13px; border-radius: 9px;
  border: 1px solid #5a3a80; background: rgba(40,26,60,.9); color: #eee; cursor: pointer;
}
.mvpBtns button:hover { background: rgba(60,40,90,.95); }
@media (max-width: 640px) {
  .mvpCard { min-width: 0; width: 88vw; padding: 14px 16px 16px; }
  .mvpStats { gap: 6px; }
  .mvpStats b { font-size: 16px; }
  #killFeed .kfRow { font-size: 11px; }
}

/* ---- Menu profile panel (lifetime stats + leaderboard) ---- */
#profilePanel {
  margin: 10px 0 2px; padding: 10px 12px;
  background: rgba(10,7,16,.5); border: 1px solid #2c1c40; border-radius: 10px;
}
.ppMine { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; justify-content: center; }
.ppMine .ppLvl { font-weight: 800; color: #ffcf3f; font-size: 15px; }
.ppMine .ppStat { font-size: 12px; color: #b9a7d6; }
.ppMine .ppStat b { color: #fff; font-size: 14px; margin-right: 3px; }
.ppBoardHead { margin: 10px 0 5px; font-size: 12px; font-weight: 700; color: #ffcf3f; text-align: center; }
.ppBoard { list-style: none; counter-reset: rank; margin: 0; padding: 0; }
.ppBoard li {
  counter-increment: rank; display: flex; justify-content: space-between; gap: 8px;
  padding: 3px 6px; border-radius: 6px; font-size: 13px;
}
.ppBoard li::before { content: counter(rank) "."; color: #7d6a99; margin-right: 6px; }
.ppBoard li.mine { background: rgba(255,207,63,.12); }
.ppBoard .ppName { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppBoard .ppWins { color: #b9a7d6; white-space: nowrap; }

/* ---- Invite copy button + bot hint (lobby) ---- */
.copyInvite {
  margin-top: 10px; padding: 9px 14px; font-size: 14px; border-radius: 9px;
  border: 1px solid #5a3a80; background: rgba(40,26,60,.9); color: #eee; cursor: pointer;
}
.copyInvite:hover { background: rgba(60,40,90,.95); }
#botHint {
  margin: 8px 0 0; padding: 8px 12px; font-size: 13px; line-height: 1.35;
  color: #ffd9a8; background: rgba(60,40,16,.5); border: 1px dashed #7a5a30; border-radius: 9px;
}

/* ===================== Marketplace town (shop phase) =====================
   The between-rounds shop is a walkable canvas scene (src/town.js). The #shop
   overlay reappears as `.townpanel` — a centered stall panel over the dimmed
   town — and #townHud carries the gold/countdown/ready chrome. Dead-shop and
   Quick keep the classic overlay untouched. */
.overlay.townpanel { background: rgba(6, 4, 14, 0.45); }
.overlay.townpanel .panel {
  width: min(880px, 94vw); max-height: 92vh; max-height: 92svh; overflow-y: auto;
  border-color: #5a3a1e;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 193, 60, 0.22);
}
/* the town replaces the tab strip + shop-phase chrome; #townHud owns them now */
.overlay.townpanel .panel > h1.small,
.overlay.townpanel .shopTop,
.overlay.townpanel #stalls,
.overlay.townpanel #spendHint,
.overlay.townpanel #shopReadyBtn,
.overlay.townpanel #shopStartBtn,
.overlay.townpanel #shopStatus { display: none !important; }

#townHud {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none; max-width: 96vw;
}
#townHud .thRow { display: flex; align-items: center; gap: 8px; pointer-events: auto; flex-wrap: wrap; justify-content: center; }
#townHud .thChip {
  background: rgba(14, 9, 26, 0.85); border: 1px solid #4a2f66; border-radius: 999px;
  padding: 6px 13px; font-size: 13px; color: var(--text); white-space: nowrap;
}
#townHud .thChip b { color: #ffcf3f; }
#townHud #townCountdown { color: #ffcf3f; font-weight: 700; }
#townHud #townCountdown.urgent { color: #ff5a5a; animation: countPulse 0.6s ease-in-out infinite; }
#townHud button { /* beware the base button { width:100% } */
  width: auto; margin: 0; padding: 7px 16px; font-size: 14px; border-radius: 999px;
}
#townHud .hint { pointer-events: none; font-size: 12px; color: #c8b9e0; border-style: dashed; }

/* town mode: the match HUD stays for phase/scoreboard, but combat chrome goes */
body.townmode #spellbar,
body.townmode #selfBars,
body.townmode #statusBar,
body.townmode #killFeed { display: none !important; }

/* ---- Alchemist / Armory stall panels (town-only) ---- */
#alchBody, #armoryBody { text-align: left; }
.stallNote { font-size: 13px; color: #c8b9e0; margin: 2px 0 10px; line-height: 1.4; }
.stallNote.empty { color: #8d7ba8; font-style: italic; }
.stallRow {
  display: flex; align-items: center; gap: 10px; margin: 8px 0;
  background: rgba(20, 13, 32, 0.55); border: 1px solid #33204a; border-radius: 10px;
  padding: 9px 12px;
}
.stallRow .stallIc { font-size: 22px; flex: none; }
.stallRow .stallTxt { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.stallRow .stallTxt b { font-size: 14px; }
.stallRow .stallTxt span { font-size: 12px; color: #b3a3cf; }
.stallRow button { width: auto; margin: 0; padding: 8px 14px; font-size: 13px; flex: none; }
.stallRow .ghostBtn { background: transparent; border: 1px solid #4a2f66; color: var(--text); }
.stallRow .ghostBtn:hover { background: #241634; }
.stallRow.saveRow { background: none; border-style: dashed; }
.stallRow .stallHintTxt { font-size: 13px; color: #b3a3cf; letter-spacing: 1px; }

/* ---- Armory staves rack (weapon skins; #stavesShop sits above the presets) ---- */
#stavesShop .staffGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.staffCard { /* base button{width:100%} is fine inside a grid cell */
  display: flex; align-items: center; flex-wrap: wrap; row-gap: 3px; gap: 8px; margin: 0;
  background: rgba(20, 13, 32, 0.55); border: 1px solid #33204a; border-radius: 10px;
  padding: 7px 10px; font-size: 12px; cursor: pointer; text-align: left;
}
.staffCard:hover { border-color: var(--stc, #6b4d99); }
.staffCard img { width: 58px; height: 19px; object-fit: contain; flex: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.staffCard .staffBranchIc { width: 58px; font-size: 18px; text-align: center; flex: none; }
.staffCard .staffName { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.staffCard .staffStat { flex-basis: 100%; font-size: 10px; line-height: 1.25; color: #9a8fc0; white-space: normal; }
.staffCard .staffState { flex: none; font-size: 11px; color: #b3a3cf; }
.staffCard .staffState.buy { color: #ffcf3f; font-weight: 700; }
.staffCard.equipped { border-color: #ffd94a; box-shadow: 0 0 9px rgba(255, 217, 74, 0.3) inset; }
.staffCard.equipped .staffState { color: #ffd94a; }
.staffCard.locked { opacity: 0.5; cursor: default; }
#stavesShop .stallDivide { border: none; border-top: 1px dashed #33204a; margin: 12px 0 8px; }
@media (max-width: 900px) { #stavesShop .staffGrid { grid-template-columns: repeat(2, 1fr); } }