* { box-sizing: border-box; }
:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #f7f3ff; background: #090610; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% -10%, #2c1748 0%, #120b20 38%, #08060d 100%); }
button, select { font: inherit; }
button { color: inherit; }
.page { width: min(1160px, 96vw); margin: 0 auto; padding: 24px 0 42px; }
.hidden { display: none !important; }

.modeScreen { width: min(860px, 100%); margin: 8vh auto 0; padding: 28px; border: 1px solid #49355e; border-radius: 22px; background: linear-gradient(145deg, rgba(30,19,43,.96), rgba(13,9,20,.96)); box-shadow: 0 28px 90px rgba(0,0,0,.42); }
.modeIntro { text-align: center; max-width: 680px; margin: 0 auto 24px; }
.eyebrow { color: #b991e6; letter-spacing: .16em; font-size: 12px; font-weight: 800; }
.modeIntro h1 { margin: 8px 0 8px; font-size: clamp(2.2rem, 6vw, 4rem); }
.modeIntro p, .menuHint { color: #baaccd; }

.preloadout { margin: 0 0 18px; padding: 16px; border: 1px solid #55406b; border-radius: 16px; background: rgba(17,11,25,.72); }
.preloadoutTitle { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.preloadoutTitle span { color: #b991e6; font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.preloadoutTitle strong { font-size: 1rem; }
.preloadoutGrid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.preloadoutGrid label { min-width: 0; display: grid; gap: 6px; color: #c8bbd4; font-size: 11px; }
.preloadoutGrid select { width: 100%; min-height: 42px; padding: 7px 9px; color: #fff; background: #1b1224; border: 1px solid #59416e; border-radius: 9px; }
.loadoutChoice { align-content: start; padding: 10px; border: 1px solid rgba(105,78,130,.55); border-radius: 11px; background: rgba(31,21,43,.62); }
.choiceDetail { display: block; min-height: 58px; color: #b8a9c7; font-size: 11px; line-height: 1.4; }
.loadoutHint { margin: 10px 0 0; font-size: 11px; color: #afa0bf; }
.lockedNote { margin: -2px 0 8px; text-align: center; color: #a99ab8; font-size: 11px; }
.configGrid select:disabled { opacity: .72; cursor: not-allowed; }

.modeCards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.modeCard { min-height: 190px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; padding: 22px; border-radius: 18px; border: 1px solid #4d3864; background: #17101f; cursor: pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.modeCard strong { font-size: 1.35rem; }
.modeCard span:last-child { color: #bcaecb; line-height: 1.45; }
.modeGlyph { font-size: 2.2rem; }
@media (hover:hover) { .modeCard:hover { transform: translateY(-2px); border-color: #9c72cf; background: #21142d; } }
.modeCard:focus-visible, select:focus-visible, button:focus-visible, canvas:focus-visible { outline: 3px solid #a77ad8; outline-offset: 2px; }
.mapChoice { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; color: #d8cde3; }
.mapChoice select { min-height: 44px; color: #fff; background: #191120; border: 1px solid #5a426f; border-radius: 10px; padding: 8px 12px; }
.menuHint { text-align: center; font-size: 12px; margin: 8px 0 0; }


.usernameChoice {
  width: min(430px, 100%);
  margin: 16px auto 0;
  display: grid;
  gap: 6px;
  text-align: left;
  color: #d9cce4;
  font-size: 12px;
}
.usernameChoice input {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid #644a79;
  background: #1a1123;
  color: #fff;
  font: inherit;
  font-size: 16px;
}
.usernameChoice small { color: #a998b9; }
.ffaCard { border-color: #356c74; background: linear-gradient(145deg,#102329,#17101f); }
.nameBadge { background: #28536a; }
.ffaLeaderboard {
  margin-bottom: 12px;
  border: 1px solid #355e6b;
  border-radius: 14px;
  padding: 10px 12px;
  background: linear-gradient(135deg,rgba(13,35,42,.94),rgba(25,15,35,.94));
}
.ffaLeaderboardHeader {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
  color: #d8f7ff;
}
.ffaLeaderboardHeader span { color: #9fc1ca; font-size: 11px; }
.ffaLeaderboardList {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.leaderChip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid #436776;
  border-radius: 999px;
  background: #101d25;
  color: #dbeef3;
  font-size: 11px;
}
.leaderChip.me { border-color: #7fdcf3; background: #15313b; }
.leaderChip strong { color: #fff; }


.coopCard { border-color: #7b3e46; background: linear-gradient(145deg,#2a1015,#17101f); }
.coopBossHud { margin-bottom: 12px; padding: 11px 13px; border: 1px solid #773d4b; border-radius: 14px; background: linear-gradient(135deg,rgba(47,15,23,.96),rgba(23,13,30,.96)); }
.bossHudTop,.bossHudBottom { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.bossHudTop > div { display:flex; align-items:center; gap:8px; }
.bossGlyph { font-size:20px; }
.bossHudTop span,.bossHudBottom { color:#d8b8bf; font-size:11px; }
.bossHealthTrack { height:13px; margin:9px 0 6px; overflow:hidden; border-radius:999px; background:#24131a; border:1px solid #683441; }
.bossHealthFill { width:100%; height:100%; transform-origin:left center; background:linear-gradient(90deg,#8e2537,#e35a3e,#ff9b54); }
#runeInventory { max-width:55%; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 12px; }
.titleRow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.7rem); }
p { margin: 5px 0 0; color: #b8accb; }
.badge { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 9px; border-radius: 999px; background: #6b3ea1; font-size: 12px; font-weight: 800; }
.badge.muted { background: #21182b; border: 1px solid #423151; color: #d3c5df; }
.topActions { display: flex; gap: 8px; align-items: center; }
.status, .smallButton { min-height: 38px; padding: 8px 12px; border-radius: 999px; border: 1px solid #49365f; background: #171020; color: #d9cee8; white-space: nowrap; }
.smallButton { cursor: pointer; }

.scorebar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin-bottom: 12px; }
.playerCard { min-width: 0; border: 1px solid #3d2c50; background: rgba(24,16,34,.9); border-radius: 14px; padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; }
.playerCard strong { font-size: 1.35rem; }
.versus { color: #a999ba; font-size: 12px; letter-spacing: .09em; text-align: center; }
.versus strong { color: #fff; }

.spellbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-bottom: 10px; }
.spell { position: relative; min-height: 78px; overflow: hidden; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 9px; align-items: center; text-align: left; padding: 10px 12px 14px; border-radius: 13px; border: 1px solid #3b2a4c; background: #16101e; cursor: pointer; }
.spell.selected { border-color: #9d6bdd; background: #21142d; box-shadow: inset 0 0 0 1px rgba(181,120,255,.25); }
.key { grid-row: 1 / 3; display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 7px; border-radius: 8px; background: #2d203a; font-size: 11px; font-weight: 900; }
.spellName { font-weight: 800; }
.detail { color: #a99ab8; font-size: 11px; }
.cooldown { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: #2a2033; overflow: hidden; }
.cooldown > span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#a979e5,#67d7ff); transform-origin: left center; }
.cooldown.wide { position: relative; display: inline-block; width: 120px; height: 7px; border-radius: 999px; }

.configGrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
.corePanel { grid-column: 1 / -1; min-width: 0; border-radius: 14px; padding: 11px 13px; border: 1px solid #4e587d; background: linear-gradient(135deg,rgba(24,30,54,.94),rgba(24,16,33,.94)); }
.liveHint { color: #aebfe3; font-size: 11px; }
.liveCoreGrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 9px; margin-top: 8px; }
.liveChoice { min-width: 0; display: grid; gap: 5px; padding: 8px; border: 1px solid rgba(92,107,160,.5); border-radius: 10px; background: rgba(16,20,38,.55); color: #d7d8ed; font-size: 11px; }
.liveChoice select { width: 100%; min-height: 36px; padding: 6px 8px; color: #fff; background: #17111f; border: 1px solid #5a426f; border-radius: 8px; }
.liveChoice small { min-height: 32px; color: #b8c0df; line-height: 1.35; }
.blinkConfigName { min-height: 36px; display: flex; align-items: center; padding: 6px 8px; border: 1px solid #4f4568; border-radius: 8px; background: #17111f; color: #fff; font-size: 12px; }
.abilityCooldownRow { margin-top: auto; padding-top: 7px; border-top: 1px solid rgba(139,128,174,.24); display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; color: #d9ecff; font-size: 10px; font-weight: 900; }
.configCooldown { position: relative; display: block; width: 100%; height: 8px; overflow: hidden; border-radius: 999px; background: #282033; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.configCooldown > span { position: absolute; inset: 0; display: block; background: linear-gradient(90deg,#a979e5,#67d7ff); transform-origin: left center; transform: scaleX(1); }
.configGrid select:disabled { opacity: .72; cursor: not-allowed; }
.ultimatePanel, .artifactPanel, .staffPanel { min-width: 0; border-radius: 14px; padding: 11px 13px; }
.ultimatePanel { border: 1px solid #623d79; background: linear-gradient(135deg,rgba(41,22,52,.94),rgba(22,14,32,.94)); }
.artifactPanel { border: 1px solid #5b4427; background: linear-gradient(135deg,rgba(41,30,17,.94),rgba(26,17,31,.94)); }
.staffPanel { border: 1px solid #345267; background: linear-gradient(135deg,rgba(18,35,45,.94),rgba(25,17,34,.94)); }
.configHeader { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.configHeader > div { display: flex; align-items: center; gap: 8px; }
.configHeader label { display: flex; align-items: center; gap: 7px; color: #cbbdd7; font-size: 11px; }
.configHeader select { max-width: 185px; min-height: 36px; padding: 6px 8px; color: #fff; background: #1c1325; border: 1px solid #5a426f; border-radius: 8px; }
.configIcon { display: grid; place-items: center; min-width: 30px; height: 26px; border-radius: 7px; background: rgba(255,255,255,.07); font-size: 12px; font-weight: 900; }
.configDetail { margin: 7px 0; min-height: 32px; color: #d5c9df; font-size: 11px; line-height: 1.4; }
.configStatusRow { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #e4c7ff; font-size: 11px; font-weight: 800; }
.artifactStatus { min-height: 16px; color: #f1c26b; font-size: 11px; font-weight: 800; }
.staffStatus { min-height: 16px; color: #8bddff; font-size: 11px; font-weight: 800; }

.gameFrame { position: relative; }
canvas { display: block; width: 100%; height: auto; aspect-ratio: 1000/650; border-radius: 18px; border: 1px solid #4b3762; background: #15101d; box-shadow: 0 24px 80px rgba(0,0,0,.38); cursor: crosshair; outline: none; }

.exploreProgressHud {
  position:absolute; top:12px; right:12px; z-index:5; width:min(250px,32%); padding:9px 11px 8px;
  border:1px solid rgba(120,104,154,.82); border-radius:12px;
  background:linear-gradient(145deg,rgba(13,10,21,.92),rgba(27,18,38,.9));
  box-shadow:0 8px 24px rgba(0,0,0,.28); pointer-events:none; backdrop-filter:blur(5px);
}
.exploreProgressTop,.exploreProgressBottom { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.exploreProgressTop { color:#d8cde7; font-size:10px; font-weight:800; letter-spacing:.04em; }
.exploreProgressTop strong { color:#fff; }
.exploreGoldValue { color:#f2ce6d; }
.exploreXpTrack { height:8px; margin:7px 0 5px; overflow:hidden; border-radius:999px; background:rgba(8,6,12,.88); border:1px solid rgba(103,78,131,.78); }
.exploreXpTrack i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#7766ed,#71dcff); transition:width .2s ease; box-shadow:0 0 10px rgba(113,220,255,.32); }
.exploreProgressBottom { color:#a99abc; font-size:9px; font-weight:800; }
.exploreProgressBottom strong { color:#e9e2f2; font-size:9.5px; }

.quickChatFeed {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 4;
  width: min(300px, 45%);
  display: grid;
  gap: 5px;
  pointer-events: none;
}
.quickChatLine {
  width: fit-content;
  max-width: 100%;
  padding: 6px 9px;
  border: 1px solid rgba(119,101,151,.7);
  border-radius: 9px;
  background: rgba(15,10,22,.78);
  color: #f4edf9;
  font-size: 11px;
  line-height: 1.25;
  backdrop-filter: blur(3px);
}
.quickChatLine strong { color: #aeeeff; }
.quickChatWheel {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  border-radius: 18px;
  pointer-events: none;
}
.quickChatShade { position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(10,7,15,.12) 0 20%, rgba(8,5,12,.58) 62%, rgba(5,3,8,.72) 100%); }
.quickChatCenter {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: 96px; height: 96px;
  display: grid; place-content: center;
  text-align: center;
  border: 2px solid #8d70af;
  border-radius: 999px;
  background: rgba(25,16,34,.94);
  color: #fff;
  box-shadow: 0 0 30px rgba(145,99,196,.25);
}
.quickChatCenter strong { font-size: 26px; line-height: 1; }
.quickChatCenter span { margin-top: 5px; color: #c6b6d3; font-size: 9px; }
.quickChatChoice {
  position: absolute;
  left: 50%; top: 50%;
  width: 126px;
  min-height: 44px;
  transform: translate(-50%,-50%) translate(var(--qx), var(--qy));
  display: grid;
  place-content: center;
  padding: 7px 9px;
  border: 1px solid #62506f;
  border-radius: 12px;
  background: rgba(26,18,34,.95);
  color: #e9e1ef;
  text-align: center;
  font: 700 11px/1.2 system-ui;
  transition: transform .08s ease, border-color .08s ease, background .08s ease;
}
.quickChatChoice.selected {
  border-color: #b58ce7;
  background: #5a347b;
  transform: translate(-50%,-50%) translate(var(--qx), var(--qy)) scale(1.08);
  color: #fff;
}

.overlay { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; padding: 24px; border-radius: 18px; background: rgba(7,5,11,.76); backdrop-filter: blur(2px); }
.overlay h2 { margin: 0; font-size: clamp(2rem,6vw,4rem); }
.overlay p { max-width: 540px; font-size: 1.05rem; }
.primaryButton { min-height: 44px; margin-top: 14px; padding: 10px 20px; border-radius: 12px; border: 1px solid #a278d1; background: #6c3d9d; color: #fff; font-weight: 900; cursor: pointer; }
.secondaryButton { min-height:44px; margin-top:14px; padding:10px 20px; border-radius:12px; border:1px solid #665773; background:#241a2d; color:#e7ddec; font-weight:800; cursor:pointer; }
.matchEndActions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.matchEndActions.hidden { display:none; }

.roundLoadoutPanel {
  width: min(860px, 94%);
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #674985;
  border-radius: 16px;
  background: rgba(20,13,29,.94);
  text-align: left;
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
}
.roundLoadoutTop, .roundReadyRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.roundLoadoutTop { margin-bottom: 10px; }
.roundTimer {
  min-width: 58px;
  padding: 6px 9px;
  border-radius: 999px;
  background: #2b1b39;
  border: 1px solid #664683;
  text-align: center;
  font-weight: 900;
}
.roundReadyRow {
  margin-top: 10px;
  color: #d7cbe2;
  font-size: 12px;
  font-weight: 800;
}
.primaryButton.compact {
  min-height: 38px;
  margin-top: 0;
  padding: 8px 18px;
}

.message { min-height: 28px; padding-top: 9px; text-align: center; color: #c9bdd9; }

@media (max-width: 1050px) { .liveCoreGrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .configGrid { grid-template-columns: 1fr 1fr; } .staffPanel { grid-column: 1/-1; } }
@media (max-width: 820px) { .preloadoutGrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .modeCards { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .spellbar { grid-template-columns: 1fr 1fr; } .topbar { flex-direction: column; } .topActions { width: 100%; justify-content: space-between; } }
@media (max-width: 560px) { .preloadoutGrid, .liveCoreGrid { grid-template-columns: 1fr; } .page { width: 98vw; padding-top: 10px; } .modeScreen { margin-top: 2vh; padding: 18px; } .configGrid { grid-template-columns: 1fr; } .staffPanel { grid-column: auto; } .configHeader { align-items: flex-start; flex-direction: column; } .configHeader label { width: 100%; justify-content: space-between; } .configHeader select { flex: 1; max-width: none; } .scorebar { gap: 6px; } .versus { font-size: 9px; } }

@media (max-width: 620px) { .quickChatChoice { width: 102px; font-size: 10px; } .quickChatFeed { width: 60%; } }

/* Account and character loadout screens */
.authScreen { width:min(920px,100%); margin:7vh auto 0; padding:30px; border:1px solid #4f3b69; border-radius:24px; background:linear-gradient(145deg,rgba(28,17,43,.98),rgba(11,8,18,.98)); box-shadow:0 30px 100px rgba(0,0,0,.5); }
.authBrand { max-width:680px; margin:0 auto 24px; text-align:center; }
.authBrand h1 { margin:8px 0; font-size:clamp(2.4rem,6vw,4.4rem); }
.authGrid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.authCard { display:grid; align-content:start; gap:11px; min-height:330px; padding:22px; border:1px solid #55406e; border-radius:18px; background:linear-gradient(155deg,rgba(35,23,50,.94),rgba(19,13,27,.96)); }
.authCard h2 { margin:0; }
.authCard p { line-height:1.5; }
.authCard label { display:grid; gap:6px; color:#d9cee5; font-size:12px; }
.authCard input { min-height:44px; padding:9px 12px; color:#fff; background:#150e1e; border:1px solid #62497c; border-radius:10px; font:inherit; }
.authIcon { width:52px; height:52px; display:grid; place-items:center; border-radius:14px; font-size:28px; color:#e9d7ff; background:linear-gradient(145deg,#6c3ca0,#2b568b); box-shadow:0 0 25px rgba(154,101,222,.28); }
.authPrimary { min-height:46px; padding:10px 16px; border:1px solid #a077d1; border-radius:11px; background:linear-gradient(135deg,#7a4cab,#376ea5); font-weight:900; cursor:pointer; }
.authPrimary:disabled { opacity:.55; cursor:not-allowed; }
.authTabs { display:flex; gap:7px; }
.authTab { flex:1; min-height:38px; border:1px solid #4f3b63; border-radius:9px; background:#181020; cursor:pointer; }
.authTab.active { border-color:#9f79cf; background:#3a2450; }
.authStatus { min-height:34px; color:#a998b9; line-height:1.45; }
.authStatus.error { color:#ff9b9b; }
.authStatus.success { color:#94efb3; }

.accountStrip { display:grid; grid-template-columns:1.1fr .75fr 1.5fr auto; gap:10px; align-items:center; width:min(720px,100%); margin:18px auto 0; padding:11px; border:1px solid #594270; border-radius:14px; background:rgba(17,11,25,.78); text-align:left; }
.accountStrip > div { display:grid; gap:2px; }
.accountStrip span { color:#a987ce; font-size:9px; font-weight:900; letter-spacing:.13em; }
.accountStrip strong { font-size:14px; }
.accountStrip small { color:#a99bb8; font-size:10px; }
.accountXpTrack { height:8px; overflow:hidden; border-radius:999px; background:#110b17; border:1px solid #49365e; }
#accountXpFill { width:0; height:100%; background:linear-gradient(90deg,#6b5ae2,#7be7ff); transition:width .25s ease; }

.lobbyBuildCard { display:flex; justify-content:space-between; align-items:center; gap:18px; margin:0 0 18px; padding:16px 18px; border:1px solid #604873; border-radius:16px; background:linear-gradient(120deg,rgba(35,22,48,.92),rgba(19,17,37,.92)); }
.lobbyBuildCard h2 { margin:4px 0 2px; font-size:1.2rem; }
.lobbyBuildCard p { margin:0; font-size:12px; color:#b9abc8; }
.lobbyBuildCard .primaryButton { flex:0 0 auto; margin:0; }

.loadoutScreen { width:min(1240px,100%); margin:2vh auto 0; padding:20px; border:1px solid #49355e; border-radius:22px; background:linear-gradient(145deg,rgba(24,17,37,.98),rgba(10,9,18,.98)); box-shadow:0 28px 90px rgba(0,0,0,.46); }
.loadoutHeader { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; padding:4px 2px 18px; }
.loadoutHeader > div:nth-child(2) { text-align:center; }
.loadoutHeader h1 { margin:3px 0; font-size:clamp(2rem,4vw,3.2rem); }
.loadoutHeader p { margin:0; font-size:12px; }
.loadoutTabs { display:flex; gap:7px; padding:5px; border:1px solid #4e3a61; border-radius:999px; background:#120d1a; }
.loadoutTab { min-height:38px; padding:7px 15px; border:1px solid transparent; border-radius:999px; background:transparent; color:#bcaec9; cursor:pointer; }
.loadoutTab.active { color:#fff; border-color:#8f69bf; background:linear-gradient(135deg,#553674,#294d79); }

.loadoutStudio { display:grid; grid-template-columns:minmax(245px,.72fr) minmax(360px,1fr) minmax(330px,.95fr); gap:14px; align-items:stretch; }
.loadoutSidePanel,.characterStagePanel { min-width:0; padding:15px; border:1px solid #4f3b62; border-radius:17px; background:linear-gradient(155deg,rgba(29,20,41,.93),rgba(13,11,21,.96)); transition:border-color .18s ease, box-shadow .18s ease; }
.loadoutSidePanel.focused { border-color:#8a65b5; box-shadow:0 0 0 1px rgba(158,116,207,.14) inset; }
.panelHeading { display:grid; gap:2px; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid rgba(115,88,137,.35); }
.panelHeading span { color:#b48add; font-size:10px; font-weight:900; letter-spacing:.14em; }
.panelHeading strong { font-size:1rem; }

.appearanceFields { display:grid; gap:8px; }
.appearanceFields label { display:grid; grid-template-columns:84px 1fr; align-items:center; gap:9px; min-height:46px; padding:7px 8px; border:1px solid rgba(93,70,112,.48); border-radius:10px; background:rgba(25,17,35,.58); color:#cfc2da; font-size:11px; }
.appearanceFields select { width:100%; min-height:34px; padding:5px 8px; color:#fff; background:#171020; border:1px solid #523c65; border-radius:8px; }
.characterSaveRow,.loadoutSaveRow { display:flex; justify-content:space-between; align-items:center; gap:9px; margin-top:12px; padding-top:11px; border-top:1px solid rgba(103,79,123,.35); color:#9d8eab; font-size:11px; }
.characterSaveRow .saving,.loadoutSaveRow .saving { color:#f4cf7d; }
.characterSaveRow .saved,.loadoutSaveRow .saved { color:#85e5aa; }
.characterSaveRow .error,.loadoutSaveRow .error { color:#ff9898; }

.characterStagePanel { position:relative; display:flex; flex-direction:column; padding:12px; overflow:hidden; background:radial-gradient(circle at 50% 38%,rgba(52,39,88,.75),rgba(12,10,20,.97) 68%); }
.stageName { position:absolute; z-index:2; top:18px; left:22px; display:grid; gap:2px; padding:8px 12px; border:1px solid rgba(123,95,151,.48); border-radius:10px; background:rgba(10,8,17,.72); backdrop-filter:blur(4px); }
.stageName strong { font-size:15px; }
.stageName span { color:#ac9abb; font-size:10px; }
#characterPreview { display:block; width:100%; max-height:none; height:auto; margin:auto; border-radius:13px; border:1px solid #3d3050; background:#0b0912; }

.equipmentIdentityGrid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.identityCard { display:grid; gap:4px; min-height:76px; padding:10px; border:1px solid #57426a; border-radius:11px; background:linear-gradient(145deg,rgba(38,27,51,.76),rgba(20,16,29,.84)); }
.identityCard span { color:#b58bd8; font-size:9px; font-weight:900; letter-spacing:.12em; }
.identityCard strong { font-size:12px; }
.identityCard small { color:#a89ab5; font-size:10px; line-height:1.3; }
.loadoutEditorGrid { grid-template-columns:1fr 1fr; gap:8px; }
.loadoutEditorGrid .loadoutChoice { padding:8px; }
.loadoutEditorGrid .choiceDetail { min-height:45px; max-height:63px; overflow:auto; font-size:9.5px; }
.loadoutEditorGrid select { min-height:36px; font-size:11px; }
.abilitySummary { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:10px; }
.abilitySummary > div { display:grid; gap:4px; min-height:56px; padding:8px; border:1px solid rgba(96,73,117,.55); border-radius:9px; background:rgba(24,17,34,.7); }
.abilitySummary .ultimateAbility { grid-column:1/-1; }
.abilitySummary span { color:#a68abf; font-size:8px; font-weight:900; letter-spacing:.1em; }
.abilitySummary strong { font-size:10.5px; line-height:1.3; }
.loadoutSaveRow .primaryButton,.characterSaveRow .primaryButton { margin:0; min-height:38px; padding:8px 13px; font-size:11px; }

@media (max-width:1050px) {
  .loadoutStudio { grid-template-columns:minmax(230px,.8fr) minmax(350px,1.2fr); }
  .buildPanel { grid-column:1/-1; }
  .loadoutEditorGrid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .abilitySummary { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .abilitySummary .ultimateAbility { grid-column:auto; }
}
@media (max-width:760px) {
  .authGrid { grid-template-columns:1fr; }
  .accountStrip { grid-template-columns:1fr 1fr; }
  .xpBlock { grid-column:1 / -1; }
  .accountStrip .smallButton { grid-column:1 / -1; }
  .lobbyBuildCard { align-items:stretch; flex-direction:column; }
  .loadoutHeader { grid-template-columns:1fr; }
  .loadoutHeader > div:nth-child(2) { order:-1; }
  .loadoutTabs { justify-self:center; }
  .loadoutStudio { grid-template-columns:1fr; }
  .characterStagePanel { order:-1; }
  .loadoutEditorGrid { grid-template-columns:1fr 1fr; }
  .abilitySummary { grid-template-columns:1fr 1fr; }
  .abilitySummary .ultimateAbility { grid-column:1/-1; }
}
@media (max-width:520px) {
  .loadoutScreen { padding:12px; margin-top:0; border-radius:14px; }
  .appearanceFields label { grid-template-columns:1fr; }
  .loadoutEditorGrid,.equipmentIdentityGrid,.abilitySummary { grid-template-columns:1fr; }
  .abilitySummary .ultimateAbility { grid-column:auto; }
  .characterSaveRow,.loadoutSaveRow { align-items:stretch; flex-direction:column; }
}

.schoolMasteryPanel { margin-top:14px; padding:16px; border:1px solid #49355e; border-radius:18px; background:linear-gradient(145deg,rgba(19,14,30,.96),rgba(12,10,20,.96)); }
.masteryHeader { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }
.masteryHeader h2 { margin:3px 0 5px; font-size:22px; }
.masteryHeader p { margin:0; color:#b9aec5; max-width:720px; font-size:13px; line-height:1.45; }
.masteryPoints { min-width:135px; display:grid; justify-items:center; gap:2px; padding:10px 14px; border:1px solid #675080; border-radius:14px; background:rgba(30,21,43,.75); }
.masteryPoints span { color:#bda0dc; font-size:9px; font-weight:900; letter-spacing:.14em; }
.masteryPoints strong { font-size:29px; color:#f6e7ff; }
.masteryPoints small { color:#a99bb8; font-size:10px; }
.masteryRule { margin:13px 0; display:flex; gap:12px; align-items:center; padding:10px 12px; border-radius:12px; background:rgba(92,70,132,.16); border:1px solid rgba(139,110,185,.35); }
.masteryRule strong { color:#e8d7ff; white-space:nowrap; }
.masteryRule span { color:#bcb0c8; font-size:12px; }
.masteryCards { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.masteryCard { min-width:0; display:grid; gap:9px; padding:12px; border:1px solid #49355e; border-radius:14px; background:rgba(15,12,23,.82); }
.masteryCard > div { display:flex; justify-content:space-between; gap:8px; align-items:center; }
.masteryCard > div span { font-size:11px; font-weight:900; letter-spacing:.08em; }
.masteryCard > div strong { font-size:12px; color:#e8def0; }
.masteryCard p { margin:0; color:#aaa0b4; font-size:11px; line-height:1.4; min-height:47px; }
.masteryInvestButton { min-height:36px; border:1px solid #6f5688; border-radius:10px; background:#2b1f3a; color:#eee5f7; font-weight:800; cursor:pointer; }
.masteryInvestButton:hover:not(:disabled) { filter:brightness(1.16); }
.masteryInvestButton:disabled { opacity:.42; cursor:not-allowed; }
.masteryCard.unlocked { border-color:#9271bb; box-shadow:inset 0 0 0 1px rgba(164,121,218,.12); }
.masteryCard.fire.unlocked { border-color:#9c624a; }
.masteryCard.frost.unlocked { border-color:#5d8fa2; }
.masteryCard.void.unlocked { border-color:#79589f; }
.masteryCard.arcane.unlocked { border-color:#6675b0; }
.masteryCard.restoration.unlocked { border-color:#59866a; }
.masteryStatus { display:block; margin-top:10px; color:#a99bb8; }
.masteryStatus.success { color:#87e6ad; }
.masteryStatus.error { color:#ff9cae; }

@media (max-width: 1050px) {
  .masteryCards { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 650px) {
  .masteryHeader { flex-direction:column; }
  .masteryPoints { width:100%; }
  .masteryRule { align-items:flex-start; flex-direction:column; }
  .masteryCards { grid-template-columns:1fr; }
}


/* Phase 28 progression */
.talentTreeSection{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.talentTreeHeading h3{margin:4px 0 3px}.talentTreeHeading p{margin:0;color:#bcb2c8;font-size:13px}
.talentTrees{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:12px}
.talentSchool{background:rgba(11,9,20,.7);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px;min-width:0}
.talentSchool>strong{display:block;margin-bottom:8px}
.talentTier{padding:8px 0;border-top:1px solid rgba(255,255,255,.08)}
.talentTier:first-of-type{border-top:0}.talentTierHeader{display:flex;justify-content:space-between;gap:6px;color:#a99db7;font-size:11px;margin-bottom:6px}
.talentChoices{display:grid;gap:6px}.talentChoice{display:block;width:100%;text-align:left;background:#191426;border:1px solid #443653;border-radius:8px;padding:7px;color:#eee7f3}
.talentChoice strong{display:block;font-size:12px}.talentChoice small{display:block;color:#aca0b8;margin-top:2px;line-height:1.25}
.talentChoice.selected{border-color:#7bdfff;background:rgba(42,93,112,.25)}.talentChoice.locked{opacity:.48}
.talentChoice:disabled{cursor:not-allowed}
.legendaryRuneNote{color:#e9c978}
@media(max-width:1100px){.talentTrees{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.talentTrees{grid-template-columns:1fr}}


/* Phase 29 mobile controls */
.mobileControls{
  position:absolute;inset:0;pointer-events:none;z-index:7;display:flex;flex-direction:column;justify-content:space-between;
}
.mobileControlsTop{display:flex;justify-content:center;padding-top:10px}
.mobileHint{
  pointer-events:none;background:rgba(9,9,18,.66);border:1px solid rgba(255,255,255,.12);
  color:#ece8f2;border-radius:999px;padding:7px 12px;font-size:12px;backdrop-filter:blur(4px)
}
.mobileControlsRow{
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding:14px;
}
.mobileMoveArea,.mobileAimWrap,.mobileActionButtons{pointer-events:auto}
.mobileMoveArea,.mobileAimWrap{display:flex;flex-direction:column;align-items:center;gap:6px}
.mobileCombatArea{display:flex;align-items:flex-end;gap:12px}
.mobilePad{
  width:132px;height:132px;border-radius:50%;position:relative;touch-action:none;
  background:radial-gradient(circle at 50% 50%, rgba(108,95,168,.28), rgba(16,14,27,.5));
  border:2px solid rgba(255,255,255,.14);backdrop-filter:blur(4px);box-shadow:0 8px 24px rgba(0,0,0,.22)
}
.mobilePad.aimPad{
  width:146px;height:146px;
  background:radial-gradient(circle at 50% 50%, rgba(69,124,158,.28), rgba(16,14,27,.52));
}
.mobileStick{
  width:58px;height:58px;border-radius:50%;position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.45), rgba(116,213,255,.3));
  border:2px solid rgba(255,255,255,.16);box-shadow:0 6px 18px rgba(0,0,0,.22)
}
.mobilePadLabel{color:#d7cfdf;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.mobileActionButtons{
  display:grid;grid-template-columns:repeat(2,minmax(72px,90px));gap:8px;align-self:flex-end
}
.mobileActionButton{
  min-height:52px;padding:8px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.14);
  background:rgba(13,11,22,.78);color:#f5eef8;font-weight:700;font-size:13px;line-height:1.1;
  backdrop-filter:blur(4px);touch-action:manipulation
}
.mobileActionButton.utility{background:rgba(32,41,75,.82)}
.mobileActionButton.ultimate{background:rgba(73,35,83,.85)}
.mobileActionButton:active,.mobileActionButton.selected{transform:translateY(1px);filter:brightness(1.08)}
@media (pointer:fine){
  .mobileControls{display:none!important}
}
@media (max-width:700px){
  .mobileControlsRow{padding:10px;gap:10px}
  .mobilePad{width:118px;height:118px}
  .mobilePad.aimPad{width:132px;height:132px}
  .mobileStick{width:52px;height:52px}
  .mobileActionButtons{grid-template-columns:repeat(2,minmax(68px,84px))}
  .mobileActionButton{min-height:48px;font-size:12px}
}


/* Phase 30 mobile fullscreen / landscape mode */
body.touchDevice.mobileMatchMode {
  overflow: hidden;
  background: #09070f;
}
body.touchDevice.mobileMatchMode #modeSelectScreen,
body.touchDevice.mobileMatchMode #loadoutScreen,
body.touchDevice.mobileMatchMode .spellbar,
body.touchDevice.mobileMatchMode .lockedNote,
body.touchDevice.mobileMatchMode .configGrid,
body.touchDevice.mobileMatchMode .topbar {
  display: none !important;
}
body.touchDevice.mobileMatchMode #gameUi {
  display: block !important;
}
body.touchDevice.mobileMatchMode #gameFrame {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 6;
  border-radius: 0;
  margin: 0;
  background: #0a0812;
}
body.touchDevice.mobileMatchMode #game {
  width: 100vw !important;
  height: 100dvh !important;
  aspect-ratio: auto;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}
body.touchDevice.mobileMatchMode .quickChatFeed {
  position: fixed;
  top: 76px;
  left: 10px;
  right: 10px;
  z-index: 10;
}
body.touchDevice.mobileMatchMode #duelScorebar,
body.touchDevice.mobileMatchMode #ffaLeaderboard,
body.touchDevice.mobileMatchMode #coopBossHud {
  position: fixed;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 9;
  margin: 0;
}
body.touchDevice.mobileMatchMode #duelScorebar:not(.hidden),
body.touchDevice.mobileMatchMode #ffaLeaderboard:not(.hidden),
body.touchDevice.mobileMatchMode #coopBossHud:not(.hidden) {
  backdrop-filter: blur(4px);
}
.mobileRotateHint{
  margin-top:8px;background:rgba(48,28,68,.82);border:1px solid rgba(255,255,255,.12);
  color:#f1e6ff;border-radius:12px;padding:8px 12px;font-size:13px;max-width:min(80vw,360px);text-align:center
}
.mobileActionButton{
  position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;text-align:left;
}
.mobileActionKey{font-size:11px;letter-spacing:.06em;color:#cfc7da;opacity:.9}
.mobileActionName{font-size:13px;font-weight:800;margin-top:2px;line-height:1.15}
.mobileActionCooldown{font-size:11px;color:#b9afc6;margin-top:5px;position:relative;z-index:1}
.mobileActionFill{
  position:absolute;left:0;right:0;bottom:0;height:6px;background:rgba(255,255,255,.08);overflow:hidden
}
.mobileActionFill > span{
  display:block;height:100%;transform-origin:left center;transform:scaleX(1);
  background:linear-gradient(90deg,#83e0ff,#9b7bff);
}
.mobileActionButton.ultimate .mobileActionFill > span{
  background:linear-gradient(90deg,#ffb86a,#ff7d6a);
}
.mobileActionButton.utility .mobileActionFill > span{
  background:linear-gradient(90deg,#7de3ff,#66a8ff);
}
@media (orientation: portrait) and (pointer: coarse) {
  body.touchDevice.mobileMatchMode #gameFrame { background:#08060d; }
  body.touchDevice.mobileMatchMode .mobileRotateHint { display:block !important; }
}


/* Phase 31 — corrected mobile live-match layout */
.mobileControls{z-index:30!important}
.mobileControlsTop{
  position:relative;display:flex;justify-content:center;align-items:flex-start;
  padding:10px 10px 0;min-height:44px;pointer-events:none
}
.mobileExitButton{
  pointer-events:auto;position:absolute;top:8px;left:8px;min-width:56px;min-height:36px;
  border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(12,10,20,.8);
  color:#f3edf7;font-weight:800;touch-action:manipulation;backdrop-filter:blur(4px)
}
body.touchDevice.mobileMatchMode{
  position:fixed;inset:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;
  touch-action:none;background:#05040a
}
body.touchDevice.mobileMatchMode .page{margin:0;padding:0;width:100%;max-width:none}
body.touchDevice.mobileMatchMode #authScreen,
body.touchDevice.mobileMatchMode #modeScreen,
body.touchDevice.mobileMatchMode #loadoutScreen,
body.touchDevice.mobileMatchMode .topbar,
body.touchDevice.mobileMatchMode .spellbar,
body.touchDevice.mobileMatchMode .lockedNote,
body.touchDevice.mobileMatchMode .configGrid,
body.touchDevice.mobileMatchMode #message{display:none!important}
body.touchDevice.mobileMatchMode #gameUi{display:block!important;margin:0!important;padding:0!important;width:100%!important;max-width:none!important}
body.touchDevice.mobileMatchMode #gameFrame{
  position:fixed;inset:0;width:100vw;height:100dvh;z-index:10;margin:0;padding:0;border:0;border-radius:0;
  overflow:hidden;background:#05040a
}
/* Preserve the 1000:650 game ratio instead of stretching the canvas. */
body.touchDevice.mobileMatchMode #game{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(100vw,calc(100dvh * 1.5384615))!important;
  height:min(100dvh,calc(100vw * .65))!important;
  aspect-ratio:1000/650!important;max-width:100vw;max-height:100dvh;
  border:0;border-radius:0;box-shadow:none;background:#15101d
}
body.touchDevice.mobileMatchMode #duelScorebar{
  position:fixed;top:7px;left:50%;right:auto;transform:translateX(-50%);
  width:min(54vw,360px);z-index:24;margin:0;padding:5px 9px;font-size:12px;background:rgba(11,9,19,.72)
}
body.touchDevice.mobileMatchMode #ffaLeaderboard{
  position:fixed;top:7px;right:7px;left:auto;width:min(38vw,250px);max-height:32dvh;overflow:hidden;
  z-index:24;margin:0;padding:7px;font-size:11px;background:rgba(11,9,19,.72)
}
body.touchDevice.mobileMatchMode #coopBossHud{
  position:fixed;top:7px;left:50%;right:auto;transform:translateX(-50%);
  width:min(62vw,500px);z-index:24;margin:0;padding:6px 10px;font-size:11px;background:rgba(11,9,19,.72)
}
body.touchDevice.mobileMatchMode .quickChatFeed{
  position:fixed;top:54px;left:50%;right:auto;transform:translateX(-50%);
  width:min(56vw,400px);z-index:25;font-size:11px;pointer-events:none
}
body.touchDevice.mobileMatchMode #roundLoadoutPanel{width:min(88vw,440px)}
body.touchDevice.mobileMatchMode .overlay{z-index:35}

@media (pointer:coarse) and (orientation:landscape){
  .mobileControlsRow{padding:8px 10px;gap:8px}
  .mobilePad{width:108px;height:108px}.mobilePad.aimPad{width:116px;height:116px}
  .mobileStick{width:46px;height:46px}.mobileMoveArea,.mobileAimWrap{gap:3px}.mobilePadLabel{font-size:10px}
  .mobileCombatArea{gap:8px}.mobileActionButtons{grid-template-columns:repeat(2,minmax(62px,76px));gap:5px}
  .mobileActionButton{min-height:43px;padding:5px 7px 8px;border-radius:10px}
  .mobileActionKey{font-size:9px}.mobileActionName{font-size:10px;max-width:68px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobileActionCooldown{font-size:9px;margin-top:3px}.mobileHint{font-size:10px;padding:5px 9px}
}
@media (pointer:coarse) and (orientation:portrait){
  .mobileControlsTop{padding-top:6px}.mobileHint{display:none}
  .mobileRotateHint{display:block!important;margin-top:0;padding:6px 9px;font-size:11px;max-width:62vw}
  .mobileExitButton{top:5px;left:5px;min-width:48px;min-height:32px;font-size:11px}
  .mobileControlsRow{padding:5px 6px 7px;gap:5px}
  .mobilePad{width:78px;height:78px}.mobilePad.aimPad{width:84px;height:84px}.mobileStick{width:34px;height:34px}
  .mobileMoveArea,.mobileAimWrap{gap:2px}.mobilePadLabel{font-size:8px}.mobileCombatArea{gap:5px}
  .mobileActionButtons{grid-template-columns:repeat(2,52px);gap:4px}
  .mobileActionButton{width:52px;min-height:38px;padding:3px 4px 7px;border-radius:8px}
  .mobileActionKey{font-size:7px}.mobileActionName{font-size:8px;max-width:44px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobileActionCooldown{font-size:7px;margin-top:2px}.mobileActionFill{height:4px}
  body.touchDevice.mobileMatchMode #duelScorebar{width:min(72vw,300px);font-size:10px}
  body.touchDevice.mobileMatchMode #coopBossHud{width:min(78vw,360px);font-size:9px}
  body.touchDevice.mobileMatchMode #ffaLeaderboard{width:min(42vw,170px);font-size:9px}
  body.touchDevice.mobileMatchMode .quickChatFeed{top:45px;width:72vw;font-size:9px}
}


/* Phase 32 — direct tap casting */
.mobileGestureHud{
  pointer-events:none;
  display:grid;
  grid-template-columns:repeat(2,minmax(58px,76px));
  gap:5px;
  align-self:flex-end;
}
.gestureHudCard{pointer-events:none!important}
.mobileBlinkButton{pointer-events:auto!important}
.gestureControlsRow{align-items:flex-end}
body.touchDevice.mobileMatchMode #game{touch-action:none}
body.touchDevice.mobileMatchMode .mobileActionButtons{display:none!important}
body.touchDevice.mobileMatchMode .mobileAimWrap{display:none!important}
.mobileGestureFlash{
  position:fixed;
  z-index:29;
  pointer-events:none;
  transform:translate(-50%,-50%);
  width:38px;height:38px;border:2px solid rgba(174,230,255,.9);
  border-radius:50%;
  animation:mobileGestureFlash .26s ease-out forwards
}
@keyframes mobileGestureFlash{
  from{opacity:1;transform:translate(-50%,-50%) scale(.45)}
  to{opacity:0;transform:translate(-50%,-50%) scale(1.5)}
}
@media (pointer:coarse) and (orientation:landscape){
  .mobileGestureHud{grid-template-columns:repeat(2,minmax(58px,72px));gap:4px}
  .mobileGestureHud .mobileActionButton{min-height:39px;padding:4px 6px 7px}
}
@media (pointer:coarse) and (orientation:portrait){
  .mobileGestureHud{grid-template-columns:repeat(2,48px);gap:3px}
  .mobileGestureHud .mobileActionButton{width:48px;min-height:34px;padding:2px 3px 6px}
}


/* Phase 33 — Wizard hub cleanup */
.loadoutScreen[data-focus="appearance"] .loadoutStudio,
.loadoutScreen[data-focus="loadout"] .loadoutStudio{
  display:grid;
  grid-template-columns:minmax(280px,.8fr) minmax(420px,1.2fr);
}
.loadoutScreen[data-focus="appearance"] #buildPanel{display:none!important}
.loadoutScreen[data-focus="loadout"] #appearancePanel{display:none!important}
.loadoutScreen[data-focus="appearance"] .characterStagePanel,
.loadoutScreen[data-focus="loadout"] .characterStagePanel{display:flex!important}
.loadoutScreen[data-focus="appearance"] #appearancePanel,
.loadoutScreen[data-focus="loadout"] #buildPanel{display:block!important}
.loadoutTabs{flex-wrap:wrap;justify-content:flex-end}
.schoolMasteryPanel,.collectionPanel{
  padding:18px;border:1px solid #4f3b62;border-radius:17px;
  background:linear-gradient(155deg,rgba(29,20,41,.93),rgba(13,11,21,.96))
}
.compactMasteryHeader,.collectionHeader{
  display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:16px
}
.masterySchoolSelector{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-bottom:14px
}
.masterySchoolButton{
  min-height:44px;border:1px solid #4d3a5e;border-radius:10px;background:#15101f;color:#bcaec9;font-weight:800;cursor:pointer
}
.masterySchoolButton.active{
  color:#fff;border-color:#8f69bf;background:linear-gradient(135deg,#553674,#294d79)
}
.masterySelectedHeader{
  display:flex;justify-content:space-between;gap:18px;align-items:center;padding:12px 14px;margin-bottom:10px;
  border:1px solid rgba(119,91,145,.48);border-radius:12px;background:rgba(19,14,29,.72)
}
.masterySelectedHeader>div{display:grid;gap:3px}.masterySelectedHeader p{max-width:560px;margin:0;color:#aea1ba;font-size:12px;text-align:right}
.masteryPath{display:grid;justify-items:center;width:min(780px,100%);margin:0 auto}
.masteryNode{
  width:100%;padding:12px 14px;border:1px solid #40334d;border-radius:13px;background:rgba(17,13,25,.76)
}
.masteryNode:not(.reached):not(.next) > .masteryNodeHead,
.masteryNode:not(.reached):not(.next) > p{opacity:.58}
.masteryNode.reached{border-color:#5d4970}
.masteryNode.next{border-color:#9470bd;box-shadow:0 0 0 1px rgba(148,112,189,.12) inset}
.masteryNodeHead{display:flex;justify-content:space-between;gap:12px;align-items:center}
.masteryNodeHead span{color:#a987c7;font-size:10px;font-weight:900;letter-spacing:.12em}
.masteryNodeHead strong{font-size:13px}.masteryNode p{margin:7px 0 0;color:#a99dad;font-size:11px}
.masteryPathLine{width:2px;height:18px;background:#3d3048}.masteryPathLine.active{background:#8d66ba}
.masteryAdvanceButton{
  margin-top:9px;min-height:35px;padding:7px 12px;border:1px solid #735595;border-radius:9px;background:#322143;color:#fff;font-weight:800;cursor:pointer
}
.masteryBranchChoices{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
.masteryBranch{
  min-height:66px;padding:9px 10px;text-align:left;border:1px solid #513f61;border-radius:10px;background:#171020;color:#eee7f3
}
.masteryBranch strong,.masteryBranch small{display:block}.masteryBranch small{margin-top:4px;color:#a99dad;line-height:1.3}
.masteryBranch.chosen{border-color:#72d9ff;background:rgba(44,92,111,.28)}
.masteryBranch:disabled{opacity:.55}
.collectionGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.collectionCard{padding:14px;border:1px solid #4b3a59;border-radius:13px;background:rgba(18,14,27,.76)}
.collectionCard strong,.collectionCard b,.collectionCard span{display:block}.collectionCard p{min-height:42px;color:#a99ead;font-size:11px;line-height:1.4}
.collectionType{color:#ad8dcc;font-size:9px;font-weight:900;letter-spacing:.12em;margin-bottom:6px}
.collectionCard b{color:#8f849c}.collectionCard b.owned{color:#7fe0a5}.futureCollection{border-style:dashed}
.collectionGold,.masteryPoints{min-width:125px;text-align:center}
.collectionGold strong,.masteryPoints strong{display:block;font-size:1.7rem}
.collectionGold span,.masteryPoints span{font-size:9px;font-weight:900;letter-spacing:.12em;color:#b28bd1}

/* Battle UI now shows combat information only. Build editing belongs in Wizard. */
.gameUi .configGrid{display:none!important}
.gameUi .lockedNote{
  padding:6px 10px;margin:7px 0 9px;text-align:center;font-size:10px;color:#9d91a8;
  border:1px solid rgba(104,80,122,.35);border-radius:9px;background:rgba(16,12,23,.58)
}
.spellbar{grid-template-columns:repeat(5,minmax(0,1fr))}
.battleUltimate{cursor:pointer}
.battleUltimate .cooldown span{transform-origin:left center}

@media(max-width:900px){
  .loadoutScreen[data-focus="appearance"] .loadoutStudio,
  .loadoutScreen[data-focus="loadout"] .loadoutStudio{grid-template-columns:1fr}
  .masterySchoolSelector{grid-template-columns:repeat(3,minmax(0,1fr))}
  .masterySelectedHeader,.compactMasteryHeader,.collectionHeader{align-items:stretch;flex-direction:column}
  .masterySelectedHeader p{text-align:left}
}
@media(max-width:600px){
  .masterySchoolSelector{grid-template-columns:1fr 1fr}
  .masteryBranchChoices,.collectionGrid{grid-template-columns:1fr}
  .spellbar{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* Phase 35 loadout additions */
#conjureElementChoice.hidden{display:none!important}
.loadoutEditorGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:1100px){.loadoutEditorGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Exact-value tooltips shared by the Phase 42 mastery tree. */
.codexTooltip{display:none;position:absolute;left:8px;top:calc(100% + 7px);width:min(390px,calc(100vw - 42px));padding:14px;border:1px solid #76578f;border-radius:12px;background:#15101e;box-shadow:0 16px 42px rgba(0,0,0,.52);z-index:100;pointer-events:none;opacity:1;color:#f1e8f8}
.codexTooltipHead{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px}.codexTooltipHead b{font-size:15px;line-height:1.25}.codexTooltipHead span{font-size:22px}.codexTooltip p{margin:0 0 10px;color:#d2c7da;font-size:12px;line-height:1.5}.codexStatList{display:grid;gap:6px}.codexStat{display:grid;grid-template-columns:minmax(100px,.8fr) minmax(120px,1fr);gap:10px;padding-top:6px;border-top:1px solid rgba(117,88,139,.32)}.codexStat>span{color:#b9a9c7;font-size:11px;line-height:1.35}.codexStat>div{display:grid;gap:2px;text-align:right}.codexStat strong{font-size:12px;line-height:1.3;color:#f7effc}.codexStat small{font-size:10px;line-height:1.35;color:#b4a8bd}.codexAccess{font-size:9px;font-weight:900;letter-spacing:.08em;color:#9edcf5;text-transform:uppercase}
@media(max-width:700px){.codexTooltip{position:fixed;left:14px;right:14px;top:auto;bottom:14px;width:auto;max-height:62vh;overflow:auto}}

/* Phase 42 unified mastery tree */
.masteryTreeGuide{width:min(900px,100%);margin:12px auto 14px;display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border:1px solid rgba(117,87,145,.42);border-radius:12px;background:rgba(20,15,29,.72)}
.masteryTreeGuide>span{flex:0 0 auto;color:#c7a9e5;font-size:9px;font-weight:900;letter-spacing:.13em}.masteryTreeGuide p{margin:0;color:#aaa0b5;font-size:11px;line-height:1.45}
.masteryPath{width:min(900px,100%)}
.masteryStartNode{border-color:#6f5688;background:linear-gradient(135deg,rgba(39,27,52,.9),rgba(18,14,27,.84))}
.masteryContentGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:7px;margin-top:9px}
.masteryContentCard{position:relative;display:grid;grid-template-columns:31px 1fr;gap:7px;align-items:center;text-align:left;min-height:51px;padding:8px 9px;border:1px solid #514060;border-radius:10px;background:#171120;color:#eee7f3;cursor:help}
.masteryContentCard:hover,.masteryContentCard.open{border-color:#956fba;background:#241a30;z-index:50}.masteryContentCard.locked .masteryContentIcon,.masteryContentCard.locked .masteryContentText{opacity:.55}.masteryContentIcon{font-size:21px;text-align:center}.masteryContentText{display:grid;gap:2px;min-width:0}.masteryContentText strong{font-size:11px}.masteryContentText small{font-size:8px;color:#a89cad;text-transform:uppercase;letter-spacing:.06em}
.masteryContentCard .codexTooltip{left:0;top:calc(100% + 6px)}.masteryContentCard:hover .codexTooltip,.masteryContentCard.open .codexTooltip{display:block}
.masteryNode{position:relative;padding:14px 16px}.masteryNodeHead span{display:inline-flex;align-items:center;justify-content:center;min-width:58px;min-height:25px;padding:0 8px;border:1px solid #58436a;border-radius:999px;background:#20162b}.masteryNode.reached .masteryNodeHead span{border-color:#956fba;color:#e4ccff}.masteryNode.next .masteryNodeHead span{box-shadow:0 0 14px rgba(164,105,218,.25)}
.masteryPathLine{height:25px;width:3px;border-radius:99px;position:relative}.masteryPathLine::after{content:"";position:absolute;left:50%;bottom:-2px;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateX(-50%) rotate(45deg);color:#3d3048}.masteryPathLine.active::after{color:#8d66ba}
.masteryBranchChoices{position:relative;padding-top:15px}.masteryBranchChoices::before{content:"";position:absolute;left:25%;right:25%;top:7px;height:1px;background:#5a4369}.masteryBranchChoices::after{content:"";position:absolute;left:50%;top:0;width:1px;height:8px;background:#5a4369}
.masteryBranch{position:relative;display:grid;grid-template-rows:1fr auto;gap:8px;min-height:104px;padding:10px;border:1px solid #513f61;border-radius:11px;background:#171020;color:#eee7f3;cursor:help}.masteryBranch:hover,.masteryBranch.open,.masteryBranch:focus-visible{border-color:#8f69b5;background:#23172e;outline:none;z-index:55}.masteryBranch.locked .masteryBranchSummary,.masteryBranch.locked .masteryChooseButton{opacity:.62}.masteryBranch.chosen{border-color:#72d9ff;background:rgba(44,92,111,.28)}
.masteryBranchSummary{display:grid;grid-template-columns:32px 1fr;gap:8px;align-items:start}.masteryBranchIcon{font-size:22px;text-align:center}.masteryBranchSummary strong,.masteryBranchSummary small{display:block}.masteryBranchSummary strong{font-size:12px}.masteryBranchSummary small{margin-top:4px;color:#a99dad;font-size:9px;line-height:1.35}
.masteryChooseButton{min-height:30px;border:1px solid #72558e;border-radius:8px;background:#322143;color:#fff;font-size:10px;font-weight:900;cursor:pointer}.masteryChooseButton:disabled{opacity:.48;cursor:default}.masteryBranch.selectable .masteryChooseButton:hover{filter:brightness(1.16)}
.masteryBranch .codexTooltip{left:0;top:calc(100% + 6px)}.masteryBranch:hover .codexTooltip,.masteryBranch.open .codexTooltip,.masteryBranch:focus-visible .codexTooltip{display:block}
@media(max-width:700px){.masteryTreeGuide{flex-direction:column}.masteryContentGrid{grid-template-columns:1fr 1fr}.masteryContentCard .codexTooltip,.masteryBranch .codexTooltip{position:fixed;left:14px;right:14px;top:auto;bottom:14px;width:auto;max-height:62vh;overflow:auto}.masteryBranchChoices{grid-template-columns:1fr}.masteryBranchChoices::before,.masteryBranchChoices::after{display:none}}
@media(max-width:430px){.masteryContentGrid{grid-template-columns:1fr}}

/* Phase 45 — Demon Siege / larger-world HUD */
.siegeCard{border-color:#704444;background:linear-gradient(145deg,#1d1118,#17101f)}
.siegeHud{margin-bottom:12px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:center;padding:10px 13px;border:1px solid #5a405f;border-radius:14px;background:rgba(17,12,24,.94)}
.siegeGuardian>div:first-child{display:flex;justify-content:space-between;gap:12px;font-size:12px}.siegeGuardianEnemy{text-align:right}.siegeObjectiveLabel{font-size:10px;font-weight:900;letter-spacing:.12em;color:#d9c7e5;text-align:center}.siegeHealthTrack{height:9px;background:#241a2c;border-radius:999px;overflow:hidden;margin-top:5px}.siegeHealthFill{height:100%;transform-origin:left center;transition:transform .15s linear}.siegeHealthFill.ally{background:linear-gradient(90deg,#4fb5ff,#76e3ff)}.siegeHealthFill.enemy{background:linear-gradient(90deg,#ff6c76,#ff9a67)}
@media(max-width:700px){.siegeHud{grid-template-columns:1fr 1fr}.siegeObjectiveLabel{grid-column:1/-1;grid-row:1}.siegeGuardian{grid-row:2}}
body.touchDevice.mobileMatchMode #siegeHud{position:absolute;z-index:12;top:54px;left:50%;transform:translateX(-50%);width:min(82vw,520px);margin:0;padding:6px 8px;font-size:9px}

/* Phase 46 inventory/economy */
.masteryResetControl{display:flex;flex-direction:column;gap:5px;align-items:flex-end;min-width:190px}
.masteryResetControl small{color:#9d91a7;font-size:10px;text-align:right;line-height:1.3}
.economyIntroCard{border-color:#6d5734;background:linear-gradient(145deg,rgba(31,23,14,.88),rgba(18,14,27,.76))}
.inventoryShopHeader{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:22px 0 12px;padding-top:18px;border-top:1px solid #3e3149}
.inventoryShopHeader h3{margin:3px 0 2px;font-size:1.2rem}.inventoryShopHeader p{margin:0;color:#a99ead;font-size:11px}
.inventoryStatus{max-width:320px;color:#aa9db5;text-align:right}.inventoryStatus.success{color:#7fe0a5}.inventoryStatus.error{color:#ff9c9c}
.equipmentInventory{display:grid;gap:18px}.inventoryTypeSection{display:grid;gap:9px}.inventoryTypeHeader{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.inventoryTypeHeader strong{font-size:1rem}.inventoryTypeHeader small{color:#95899e;font-size:10px}
.inventoryEquipmentGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.inventoryItemCard{padding:13px;border:1px solid #493b54;border-radius:13px;background:rgba(16,12,24,.78);display:flex;flex-direction:column;gap:8px;min-width:0}
.inventoryItemCard.rarity-rare{border-color:#4d5275}.inventoryItemCard.rarity-epic{border-color:#72528a}
.inventoryItemTop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.inventoryItemTop strong{display:block;font-size:13px}.inventoryItemTop b{white-space:nowrap;font-size:9px;letter-spacing:.08em}
.inventoryItemCard p{margin:0;min-height:48px;color:#a99ead;font-size:10px;line-height:1.45}.inventoryOwned{color:#7fe0a5}.inventoryLocked{color:#d4ae68}
.inventoryItemCard button{align-self:flex-start}.inventoryItemActions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto}.inventoryCopyNote{color:#8f8298;font-size:9px}.recycleButton{white-space:nowrap}.collectionCard #inventoryOwnershipCount{color:#7fe0a5}
@media(max-width:760px){.inventoryEquipmentGrid{grid-template-columns:1fr}.inventoryShopHeader,.inventoryTypeHeader{align-items:stretch;flex-direction:column}.inventoryStatus{text-align:left}.masteryResetControl{align-items:flex-start;min-width:0}.masteryResetControl small{text-align:left}}

/* Phase 47 shop, cosmetic collection, and Mystic Rune opening */
.packShopHeader,.cosmeticShopHeader{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:22px 0 12px;padding-top:18px;border-top:1px solid #3e3149}
.packShopHeader h3,.cosmeticShopHeader h3{margin:3px 0 2px;font-size:1.2rem}.packShopHeader p,.cosmeticShopHeader p{margin:0;color:#a99ead;font-size:11px}
.packStore{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}.packStoreCard{display:grid;grid-template-columns:92px minmax(0,1fr) auto;align-items:center;gap:16px;padding:16px;border:1px solid #67527c;border-radius:15px;background:radial-gradient(circle at 10% 50%,rgba(130,88,180,.13),transparent 32%),rgba(16,12,24,.82)}
.packStoreRune{width:76px;height:76px;display:grid;place-items:center;border:2px solid #8b6baa;transform:rotate(45deg);border-radius:15px;background:radial-gradient(circle,rgba(184,139,235,.25),rgba(29,20,42,.95) 63%);box-shadow:inset 0 0 18px rgba(192,143,255,.17)}.packStoreRune span{transform:rotate(-45deg);font-size:38px;color:#d6b5ff;text-shadow:0 0 13px rgba(201,153,255,.6)}
.packStoreCopy{min-width:0}.packStoreCopy strong{display:block;font-size:16px}.packStoreCopy p{margin:5px 0;color:#b6aabd;font-size:11px}.packOdds{display:block;color:#8f8298;font-size:9px;line-height:1.45}
.cosmeticInventory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.cosmeticItemCard{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px;border:1px solid #46394f;border-radius:12px;background:rgba(15,12,22,.72)}.cosmeticItemCard.locked{opacity:.7}.cosmeticItemCard.owned{opacity:1}.cosmeticIcon{font-size:25px;text-align:center}.cosmeticText{min-width:0}.cosmeticText span{display:block;color:#9e8eaa;font-size:8px;font-weight:900;letter-spacing:.11em}.cosmeticText strong{display:block;font-size:12px}.cosmeticText p{margin:3px 0 0;color:#93889a;font-size:9px;line-height:1.35}.cosmeticItemActions{display:flex;flex-direction:column;align-items:flex-end;gap:6px}.cosmeticItemActions>b{font-size:8px;letter-spacing:.08em;color:#aa94bd;white-space:nowrap}.cosmeticItemCard.owned .cosmeticItemActions>b{color:#7fe0a5}.cosmeticItemActions .recycleButton{font-size:8px;padding:5px 7px}
.rarity-uncommon{--rarity:#70bd9a}.rarity-rare{--rarity:#7099dc}.rarity-epic{--rarity:#b475dc}.inventoryItemCard.rarity-uncommon,.cosmeticItemCard.rarity-uncommon{border-color:color-mix(in srgb,var(--rarity) 48%,#46394f)}.inventoryItemCard.rarity-rare,.cosmeticItemCard.rarity-rare{border-color:color-mix(in srgb,var(--rarity) 62%,#46394f)}.inventoryItemCard.rarity-epic,.cosmeticItemCard.rarity-epic{border-color:color-mix(in srgb,var(--rarity) 72%,#46394f)}
.packOpeningOverlay{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:24px}.packOpeningBackdrop{position:absolute;inset:0;background:radial-gradient(circle at center,rgba(86,54,112,.28),rgba(5,4,10,.94) 58%);backdrop-filter:blur(8px)}.packOpeningStage{position:relative;z-index:1;width:min(560px,94vw);min-height:520px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:34px 24px 26px;overflow:hidden}.packOpeningStage h2{margin:6px 0 4px;font-size:1.25rem}.packRuneScene{position:relative;width:250px;height:270px;display:grid;place-items:center;margin:8px auto 0}.packRuneShell{position:relative;width:142px;height:142px;display:grid;place-items:center;transform:rotate(45deg);border:4px solid #785b91;border-radius:24px;background:radial-gradient(circle at 50% 45%,#6e478d 0,#30203f 44%,#17101f 78%);box-shadow:0 0 0 1px rgba(224,193,255,.18) inset,0 0 32px rgba(151,92,211,.14);transition:opacity .18s ease}.runeCore{display:block;transform:rotate(-45deg);font-size:66px;line-height:1;color:#d6b0ff;text-shadow:0 0 24px rgba(205,157,255,.62)}.runeCrack{position:absolute;display:block;width:3px;height:0;background:#f0dcff;box-shadow:0 0 8px #c78aff;transform-origin:top;opacity:0}.crackA{left:67px;top:20px;transform:rotate(18deg)}.crackB{left:84px;top:62px;transform:rotate(77deg)}.crackC{left:48px;top:74px;transform:rotate(-44deg)}.packRuneShell.charging{animation:runeCharge .72s ease-in-out infinite alternate}.packRuneShell.charging .runeCore{animation:runeCorePulse .45s ease-in-out infinite alternate}.packRuneShell.breaking{animation:runeBreak .52s cubic-bezier(.2,.8,.2,1) forwards}.packRuneShell.breaking .runeCrack{animation:runeCrack .28s ease-out forwards}.packRuneShell.breaking .crackB{animation-delay:.06s}.packRuneShell.breaking .crackC{animation-delay:.1s}.packBurst{position:absolute;width:30px;height:30px;border-radius:50%;pointer-events:none}.packOpeningOverlay[data-stage="breaking"] .packBurst{animation:packBurst .55s ease-out forwards}.packOpeningOverlay[data-stage="revealed"] .packRuneScene{height:112px;margin-top:0}.packOpeningOverlay[data-stage="revealed"] .packRuneShell{opacity:0}.packRevealCard{width:min(390px,90%);min-height:0;opacity:0;transform:translateY(18px) scale(.94);padding:0;border:1px solid transparent;border-radius:17px;background:rgba(18,14,25,.94);overflow:hidden}.packRevealCard.revealed{opacity:1;transform:none;padding:22px 18px;transition:opacity .25s ease,transform .32s cubic-bezier(.2,.9,.2,1);border-color:var(--rarity,#806b91);box-shadow:0 0 28px color-mix(in srgb,var(--rarity,#806b91) 28%,transparent)}.packRevealRarity{display:block;color:var(--rarity,#b9a7c5);font-size:10px;font-weight:900;letter-spacing:.2em}.packRevealIcon{font-size:54px;margin:5px 0}.packRevealCard strong{display:block;font-size:22px}.packRevealCard p{margin:7px auto 0;max-width:320px;color:#b3a6ba;font-size:11px;line-height:1.45}.packDuplicate{display:inline-block;margin-top:11px;padding:6px 10px;border-radius:999px;background:rgba(217,176,91,.1);color:#e2bd72;font-size:10px}.packOpeningStage #packRevealClose{margin-top:18px}.packOpeningStage #packRevealClose:disabled{visibility:hidden}
@keyframes runeCharge{from{transform:rotate(45deg) scale(.97);box-shadow:0 0 18px rgba(151,92,211,.14)}to{transform:rotate(45deg) scale(1.035);box-shadow:0 0 52px rgba(190,117,255,.4),0 0 0 8px rgba(184,117,242,.035)}}@keyframes runeCorePulse{from{filter:brightness(.88)}to{filter:brightness(1.35)}}@keyframes runeCrack{0%{height:0;opacity:0}20%{opacity:1}100%{height:55px;opacity:1}}@keyframes runeBreak{0%{transform:rotate(45deg) scale(1)}55%{transform:rotate(47deg) scale(1.08)}100%{transform:rotate(54deg) scale(1.34);opacity:0}}@keyframes packBurst{0%{box-shadow:0 0 0 0 rgba(216,173,255,.72);opacity:1}100%{box-shadow:0 0 0 150px rgba(216,173,255,0);opacity:0}}
@media(max-width:760px){.packStoreCard{grid-template-columns:68px minmax(0,1fr)}.packStoreCard>button{grid-column:1/-1}.packStoreRune{width:58px;height:58px}.packStoreRune span{font-size:29px}.cosmeticInventory{grid-template-columns:1fr}.packShopHeader,.cosmeticShopHeader{align-items:stretch;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.packRuneShell.charging,.packRuneShell.charging .runeCore,.packRuneShell.breaking,.packRuneShell.breaking .runeCrack,.packOpeningOverlay[data-stage="breaking"] .packBurst{animation:none}.packRuneShell.breaking{opacity:0}.packRevealCard.revealed{transition:none}}

.packStore.busy{pointer-events:none;opacity:.72}

/* Phase 48 party lobby */
.partyPanel{margin:18px 0;padding:18px;border:1px solid rgba(157,121,199,.36);border-radius:16px;background:linear-gradient(145deg,rgba(25,18,38,.9),rgba(13,11,22,.92));box-shadow:0 14px 34px rgba(0,0,0,.16)}
.partyPanelHead{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:14px}.partyPanelHead h2{margin:3px 0 5px;font-size:20px}.partyPanelHead p{margin:0;color:#b9aec8;max-width:650px}.partyStatusBadge{font-size:11px;font-weight:900;letter-spacing:.12em;border:1px solid #765a96;border-radius:999px;padding:7px 10px;color:#e8daf8;background:rgba(122,88,159,.16)}
.partySoloControls,.partyInviteRow,.partyJoinRow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.partyJoinRow{flex:1}.partyJoinRow input{min-width:160px;max-width:230px;text-transform:uppercase;letter-spacing:.12em;font-weight:800}
.partyActiveControls{display:grid;gap:12px}.partyInviteRow{justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:12px}.partyInviteRow>div{display:grid;gap:2px}.partyInviteRow span{font-size:10px;letter-spacing:.12em;color:#9f91ae}.partyInviteRow strong{font-size:18px;letter-spacing:.16em;color:#f2e8ff}
.partyMembers{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:9px}.partyMember{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(140,109,174,.26);border-radius:12px;background:rgba(255,255,255,.035)}.partyMember>div{display:flex;align-items:center;gap:9px;min-width:0}.partyMember strong,.partyMember small{display:block}.partyMember strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.partyMember small{font-size:10px;color:#a99bb8;margin-top:2px}.partyMember.offline{opacity:.55}.partyMemberDot{width:9px;height:9px;border-radius:50%;background:#6fde9c;box-shadow:0 0 8px rgba(111,222,156,.55);flex:none}.partyMember.offline .partyMemberDot{background:#6c6575;box-shadow:none}.partyKickButton{padding:5px 8px!important}.partyStatusText{color:#ad9fbd}
.partyActionRow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.partyActionRow .primaryButton{min-width:170px}

@media(max-width:640px){.partyPanelHead,.partyInviteRow{align-items:stretch;flex-direction:column}.partyInviteRow>button{width:100%}.partyJoinRow input{max-width:none;flex:1}}

/* Phase 48.3 mastery services + economy tuning visibility */
.masteryResetStore{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-bottom:4px}
.masteryServiceCard{display:flex;flex-direction:column;gap:9px;min-height:150px;padding:13px;border:1px solid #564466;border-radius:13px;background:linear-gradient(145deg,rgba(27,19,37,.9),rgba(15,12,22,.82))}
.masteryServiceTop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.masteryServiceTop strong{display:block;font-size:13px;margin-top:2px}.masteryServiceTop>b{font-size:9px;letter-spacing:.09em;color:#d3b1ef;border:1px solid rgba(180,124,224,.3);padding:5px 7px;border-radius:999px;white-space:nowrap}
.masteryServiceCard p{margin:0;color:#a99ead;font-size:10px;line-height:1.45}.masteryServiceCard button{align-self:flex-start;margin-top:auto}
@media(max-width:760px){.masteryResetStore{grid-template-columns:1fr}.masteryServiceHeader{align-items:stretch;flex-direction:column}}

/* Phase 49 UI refresh: login fantasy scene, reorganized main menu, richer preview, collection tabs */
#authScreen.authScreen{
  position:relative;
  overflow:hidden;
  width:min(1120px,100%);
  margin:5vh auto 0;
  padding:0;
  background:
    radial-gradient(circle at 18% 12%,rgba(171,116,234,.16),transparent 28%),
    radial-gradient(circle at 82% 24%,rgba(255,122,56,.16),transparent 24%),
    linear-gradient(145deg,rgba(24,15,38,.98),rgba(8,7,15,.99));
}
.authShell{position:relative;z-index:2;padding:32px}
.authBrand{max-width:760px;margin:0 auto 22px;text-align:center}
.authBrand h1{margin:8px 0;font-size:clamp(2.6rem,6vw,4.8rem);text-shadow:0 0 28px rgba(154,102,222,.22)}
.authBrand p{color:#d2c5e2;line-height:1.55}
.authGrid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(250px,.95fr) minmax(280px,1.1fr);gap:16px}
.authCard{position:relative;min-height:350px;border-color:rgba(126,99,157,.52);background:linear-gradient(160deg,rgba(33,22,47,.88),rgba(14,11,23,.94));box-shadow:0 12px 36px rgba(0,0,0,.22)}
.authCard::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 32%)}
.guestAuthCard{background:linear-gradient(160deg,rgba(42,26,57,.92),rgba(20,15,31,.96))}
.authCard h2,.authCard p,.authCard label,.authCard button,.authCard small,.authCard input,.authCard .authTabs{position:relative;z-index:1}
.authPrimary{box-shadow:0 10px 24px rgba(61,115,182,.22)}
.authScene{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.authScene::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 65% 24%,rgba(255,181,96,.12),transparent 18%),radial-gradient(circle at 18% 14%,rgba(185,129,248,.15),transparent 24%)}
.authMeteorTrail,.authMeteorCore{position:absolute;display:block}
.authMeteorTrail{width:260px;height:4px;border-radius:999px;background:linear-gradient(90deg,rgba(255,241,189,0),rgba(255,191,117,.95),rgba(255,112,53,.3));filter:blur(1px);transform-origin:right center;opacity:.72}
.authMeteorCore{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,#fff7d7 0,#ffc065 48%,#ff7344 85%,rgba(255,115,68,0) 100%);box-shadow:0 0 30px rgba(255,153,82,.6)}
.authMeteorTrailA{top:13%;left:57%;transform:rotate(133deg)}
.authMeteorTrailB{top:25%;left:70%;width:190px;transform:rotate(136deg);opacity:.46}
.authMeteorCoreA{top:17%;right:17%}
.authMeteorCoreB{top:28%;right:9%;width:12px;height:12px;opacity:.75}
.authWizardScene{position:absolute;left:5%;right:48%;bottom:0;top:18%;display:flex;align-items:flex-end;justify-content:flex-start}
.authWizardBackdrop{position:absolute;left:3%;bottom:-6%;width:84%;height:48%;background:radial-gradient(circle at 45% 72%,rgba(112,170,255,.12),transparent 42%),radial-gradient(circle at 68% 20%,rgba(255,154,79,.15),transparent 24%)}
.authWizardCastGlow{position:absolute;left:46%;bottom:27%;width:155px;height:155px;border-radius:50%;background:radial-gradient(circle,rgba(255,208,112,.46),rgba(255,159,84,.18) 36%,rgba(255,159,84,0) 72%);filter:blur(3px)}
.authWizardSilhouette{position:relative;width:220px;height:300px;margin-left:18px;opacity:.92}
.authWizardHead,.authWizardHat,.authWizardArm,.authWizardStaff,.authWizardRobe{position:absolute;display:block;background:#09060d}
.authWizardHead{left:64px;top:72px;width:42px;height:42px;border-radius:50%}
.authWizardHat{left:39px;top:26px;width:92px;height:78px;clip-path:polygon(12% 100%,30% 45%,54% 0,77% 50%,88% 100%);border-bottom-left-radius:20px;border-bottom-right-radius:20px}
.authWizardRobe{left:30px;bottom:0;width:145px;height:180px;clip-path:polygon(28% 0,76% 0,100% 100%,0 100%)}
.authWizardArm{left:94px;top:126px;width:106px;height:18px;transform:rotate(-21deg);transform-origin:left center;border-radius:999px}
.authWizardStaff{left:166px;top:77px;width:9px;height:124px;transform:rotate(10deg);transform-origin:center top;border-radius:999px;box-shadow:0 0 0 2px rgba(8,6,13,.35)}
.authWizardStaff::after{content:"";position:absolute;top:-17px;left:-12px;width:33px;height:33px;border-radius:50%;background:radial-gradient(circle,#fff8db 0,#ffd17c 26%,#ff8e56 55%,rgba(255,142,86,.08) 100%);box-shadow:0 0 28px rgba(255,159,84,.62)}

#modeScreen.modeScreen{
  position:relative;
  overflow:hidden;
  width:min(1240px,100%);
  margin:4vh auto 0;
  padding:24px;
  background:
    radial-gradient(circle at 82% 14%,rgba(117,78,171,.16),transparent 22%),
    radial-gradient(circle at 12% 90%,rgba(62,101,168,.12),transparent 20%),
    linear-gradient(145deg,rgba(26,18,38,.98),rgba(10,8,17,.99));
}
#modeScreen.modeScreen::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 18%)}
.modeDashboard{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.95fr);gap:18px;align-items:start}
.modeMainColumn,.modeSidebar{display:grid;gap:16px}
.modeIntro{max-width:none;margin:0;text-align:left;padding:8px 6px 2px}
.modeIntro h1{margin:8px 0 10px}
.modeSection,.menuPanel{padding:18px;border:1px solid rgba(128,97,160,.38);border-radius:18px;background:linear-gradient(155deg,rgba(24,18,36,.9),rgba(13,11,22,.94));box-shadow:0 12px 30px rgba(0,0,0,.16)}
.modeSectionHeader h2,.menuPanelHeader h2{margin:4px 0 6px;font-size:1.45rem}
.modeSectionHeader p,.menuPanelHeader p{margin:0;color:#b9aec8;line-height:1.5}
.modeGroups{display:grid;gap:14px;margin-top:14px}
.modeGroup{display:grid;gap:10px}
.modeGroupHeader{display:flex;justify-content:space-between;gap:14px;align-items:flex-end;flex-wrap:wrap;padding:0 4px}
.modeGroupHeader strong{font-size:1rem}
.modeGroupHeader small{color:#a99bb8}
#modeScreen .modeCards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#modeScreen .adventureModeCards{grid-template-columns:repeat(2,minmax(0,1fr))}
#modeScreen .modeCard{min-height:172px;position:relative;overflow:hidden;gap:8px;padding:20px;border-color:rgba(118,92,146,.52);background:linear-gradient(160deg,rgba(26,18,37,.96),rgba(14,12,23,.98));box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
#modeScreen .modeCard::before{content:"";position:absolute;inset:auto -10% 64% auto;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(180,135,241,.12),transparent 66%);pointer-events:none}
#modeScreen .modeCard strong{font-size:1.15rem}
#modeScreen .modeCard span:last-child{font-size:12px}
.accountMenuPanel .accountStrip{width:100%;margin:10px 0 0;grid-template-columns:1fr 1fr}
.accountMenuPanel .xpBlock{grid-column:1/-1}
.accountMenuPanel .smallButton{grid-column:1/-1;width:100%}
.accountMenuPanel .usernameChoice{width:100%;margin:12px 0 0}
.accountMenuPanel .mapChoice{display:grid;grid-template-columns:72px 1fr;justify-content:stretch;align-items:center;margin-top:14px;text-align:left}
.accountMenuPanel .mapChoice select{width:100%}
.accountMenuPanel .menuHint{margin:10px 0 0;text-align:left}
.lobbyBuildCard.menuPanel{display:grid;gap:14px;align-items:stretch}
.lobbyBuildCard h2{font-size:1.2rem}
.menuShortcutGrid{display:grid;gap:10px}
.menuShortcutGrid .primaryButton,.menuShortcutGrid .secondaryButton{margin:0;min-height:46px;justify-content:center}

.characterStagePanel{background:
  radial-gradient(circle at 50% 20%,rgba(118,96,176,.16),transparent 28%),
  linear-gradient(180deg,rgba(34,28,46,.98),rgba(17,14,24,.99));
  border-color:rgba(113,90,141,.65);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 12px 28px rgba(0,0,0,.2);
}
.characterStagePanel::before{content:"";position:absolute;inset:14px;pointer-events:none;border:1px solid rgba(152,121,188,.16);border-radius:18px}
.characterStagePanel::after{content:"";position:absolute;inset:22px;pointer-events:none;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 16%,transparent 84%,rgba(0,0,0,.12))}
#characterPreview{background:linear-gradient(180deg,#171226,#0d0b15 62%,#130f19);border-color:#5b4b71;box-shadow:inset 0 0 34px rgba(0,0,0,.36),0 10px 24px rgba(0,0,0,.16)}
.characterStagePanel #characterPreview{margin-block:4px}
.stageName{border-color:rgba(141,114,173,.58);background:rgba(12,10,19,.76)}

.collectionTabRow{display:flex;gap:8px;padding:5px;border:1px solid #4e3a61;border-radius:999px;background:#120d1a;margin:14px 0 16px;flex-wrap:wrap}
.collectionSectionTab{min-height:38px;padding:7px 15px;border:1px solid transparent;border-radius:999px;background:transparent;color:#bcaec9;cursor:pointer}
.collectionSectionTab.active{color:#fff;border-color:#8f69bf;background:linear-gradient(135deg,#553674,#294d79)}
.collectionSectionPanel{display:grid;gap:14px}

@media (max-width:980px){
  .modeDashboard{grid-template-columns:1fr}
  #modeScreen .modeCards,#modeScreen .adventureModeCards{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  #authScreen.authScreen{margin-top:2vh}
  .authShell{padding:18px}
  .authGrid{grid-template-columns:1fr}
  .authWizardScene{right:35%;top:26%;opacity:.65}
  #modeScreen.modeScreen{padding:16px}
  #modeScreen .modeCards,#modeScreen .adventureModeCards{grid-template-columns:1fr}
  .modeGroupHeader{align-items:flex-start;flex-direction:column}
  .collectionTabRow{border-radius:18px}
}
@media (max-width:560px){
  .accountMenuPanel .accountStrip{grid-template-columns:1fr}
  .accountMenuPanel .xpBlock,.accountMenuPanel .smallButton{grid-column:auto}
  .accountMenuPanel .mapChoice{grid-template-columns:1fr}
}

/* Phase 51 extra worldbuilding art for login/menu + deeper character refinement support */
.authRuneRing{
  position:absolute;display:flex;align-items:center;justify-content:center;
  width:86px;height:86px;border-radius:50%;border:1px solid rgba(155,123,213,.25);
  color:rgba(230,219,255,.78);font-size:30px;background:radial-gradient(circle,rgba(109,78,164,.18),rgba(109,78,164,0) 68%);
  box-shadow:0 0 28px rgba(109,78,164,.12), inset 0 0 22px rgba(255,255,255,.03);
}
.authRuneRingA{top:16%;left:8%}
.authRuneRingB{top:50%;right:8%;width:64px;height:64px;font-size:22px;color:rgba(255,224,173,.72);border-color:rgba(221,173,111,.18)}
.authWindowCluster{position:absolute;top:10%;right:4%;width:220px;height:180px;opacity:.72}
.authWindowPane{position:absolute;bottom:0;width:58px;height:150px;border-radius:40px 40px 8px 8px;border:1px solid rgba(188,170,226,.18);background:linear-gradient(180deg,rgba(81,77,136,.3),rgba(28,23,45,.1) 36%,rgba(255,178,98,.12) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 0 24px rgba(255,168,90,.06)}
.authWindowPane::before{content:"";position:absolute;left:50%;top:10px;bottom:10px;width:1px;background:rgba(226,214,255,.12);transform:translateX(-50%)}
.authWindowPane::after{content:"";position:absolute;left:10px;right:10px;top:54%;height:1px;background:rgba(226,214,255,.12)}
.authWindowPaneA{left:0}.authWindowPaneB{left:72px;height:165px}.authWindowPaneC{left:144px}
.authBookshelfScene{position:absolute;left:0;right:0;bottom:0;height:118px;opacity:.86}
.authShelf{position:absolute;left:56%;right:3%;height:10px;border-radius:10px 10px 0 0;background:linear-gradient(180deg,rgba(88,62,46,.95),rgba(54,35,26,.95));box-shadow:0 0 0 1px rgba(255,255,255,.03)}
.authShelfA{bottom:76px}.authShelfB{bottom:30px}
.authBooks{position:absolute;left:59%;width:132px;height:38px;border-radius:4px;background:linear-gradient(90deg,#7a4c32 0 10%,#43527a 10% 20%,#c4a25d 20% 30%,#76508e 30% 40%,#40675a 40% 50%,#b4644f 50% 60%,#3b4d6c 60% 70%,#9d7243 70% 80%,#5f4070 80% 90%,#697f5e 90% 100%);box-shadow:0 3px 18px rgba(0,0,0,.2)}
.authBooksA{bottom:84px}.authBooksB{bottom:38px;left:67%;width:108px}
.authCandle{position:absolute;display:block;width:12px;height:28px;border-radius:4px;background:linear-gradient(180deg,#f9eee6,#d8c8bd);box-shadow:0 0 12px rgba(255,214,166,.12)}
.authCandle::before{content:"";position:absolute;left:50%;top:-11px;width:12px;height:14px;border-radius:50% 50% 48% 48%;background:radial-gradient(circle,#fff7d6 0,#ffcd74 42%,rgba(255,205,116,0) 76%);transform:translateX(-50%)}
.authCandleA{right:11%;bottom:83px}.authCandleB{right:17%;bottom:37px;height:22px}
.authFloorSigil{position:absolute;left:19%;bottom:-12px;width:280px;height:120px;border-radius:50%;border:1px solid rgba(107,198,255,.13);box-shadow:0 0 40px rgba(107,198,255,.08), inset 0 0 20px rgba(107,198,255,.05)}
.authFloorSigil::before,.authFloorSigil::after{content:"";position:absolute;inset:18px;border-radius:50%;border:1px solid rgba(107,198,255,.12)}
.authFloorSigil::after{inset:40px 66px}
.authBrand{position:relative}
.authBrand::after{content:"✦  ✧  ✦";display:block;margin-top:10px;color:#d6c6f1;opacity:.7;letter-spacing:10px}

.modeBackdropScene{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.modeSeal{position:absolute;border-radius:50%;border:1px solid rgba(126,192,255,.08);box-shadow:0 0 40px rgba(126,192,255,.04), inset 0 0 24px rgba(255,255,255,.02)}
.modeSeal::before,.modeSeal::after{content:"";position:absolute;inset:16px;border-radius:50%;border:1px solid rgba(198,167,255,.08)}
.modeSealA{width:280px;height:280px;right:-60px;top:38px}
.modeSealB{width:210px;height:210px;left:-54px;bottom:38px}
.modeFloatingRune{position:absolute;color:rgba(230,220,255,.22);font-size:34px;text-shadow:0 0 18px rgba(185,147,255,.08)}
.modeFloatingRuneA{right:10%;top:18%}
.modeFloatingRuneB{left:8%;top:52%}
.modeFloatingRuneC{right:27%;bottom:12%;font-size:26px;color:rgba(255,216,173,.2)}
.modeStoneArch{position:absolute;bottom:-30px;width:190px;height:240px;border-radius:100px 100px 0 0;background:linear-gradient(180deg,rgba(55,49,72,.22),rgba(22,20,33,.06));border:1px solid rgba(196,187,224,.05)}
.modeStoneArchA{right:2%}.modeStoneArchB{left:2%;height:190px;width:150px}
.modeDashboard{position:relative}
.modeLoreArtPanel{overflow:hidden;min-height:248px}
.modeLoreScene{position:relative;height:190px;border-radius:16px;background:radial-gradient(circle at 50% 24%,rgba(88,102,176,.36),transparent 20%),linear-gradient(180deg,rgba(22,18,37,.96),rgba(12,11,21,.98));border:1px solid rgba(116,95,149,.35)}
.modeLoreMoon{position:absolute;top:18px;right:26px;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle,#fff6cf 0,#f1cf8b 46%,rgba(241,207,139,0) 72%);box-shadow:0 0 26px rgba(255,215,153,.25)}
.modeLoreTower{position:absolute;bottom:24px;width:58px;background:linear-gradient(180deg,rgba(83,77,104,.95),rgba(49,45,65,.98));border:1px solid rgba(230,224,252,.04)}
.modeLoreTower::before{content:"";position:absolute;left:-8px;right:-8px;top:-18px;height:24px;clip-path:polygon(50% 0,100% 100%,0 100%);background:linear-gradient(180deg,#7c5f9a,#4f3a6b)}
.modeLoreTower::after{content:"";position:absolute;left:50%;top:18px;width:14px;height:20px;border-radius:14px 14px 3px 3px;background:linear-gradient(180deg,rgba(255,206,138,.88),rgba(255,155,90,.25));transform:translateX(-50%);box-shadow:0 0 18px rgba(255,181,104,.22)}
.modeLoreTowerA{left:28px;height:108px}.modeLoreTowerB{right:62px;height:128px}
.modeLoreBridge{position:absolute;left:38px;right:76px;bottom:20px;height:10px;border-radius:10px;background:linear-gradient(180deg,rgba(76,58,43,.96),rgba(45,32,24,.98))}
.modeLoreWizard{position:absolute;left:50%;bottom:38px;width:84px;height:108px;transform:translateX(-50%)}
.modeLoreWizardHead,.modeLoreWizardHat,.modeLoreWizardStaff,.modeLoreWizardRobe{position:absolute;display:block}
.modeLoreWizardHead{left:28px;top:18px;width:18px;height:18px;border-radius:50%;background:#e0bb9a}
.modeLoreWizardHat{left:14px;top:0;width:44px;height:34px;clip-path:polygon(14% 100%,34% 42%,52% 0,73% 47%,88% 100%);background:linear-gradient(180deg,#7a69ac,#463862)}
.modeLoreWizardStaff{left:52px;top:18px;width:5px;height:64px;border-radius:999px;background:#8e7651}
.modeLoreWizardStaff::after{content:"";position:absolute;left:50%;top:-8px;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle,#fff9db 0,#7bd6ff 52%,rgba(123,214,255,0) 88%);transform:translateX(-50%);box-shadow:0 0 22px rgba(123,214,255,.4)}
.modeLoreWizardRobe{left:10px;bottom:0;width:58px;height:76px;clip-path:polygon(28% 0,72% 0,100% 100%,0 100%);background:linear-gradient(180deg,#365387,#1e3154)}
.modeLoreSpell{position:absolute;border-radius:50%;filter:blur(1px)}
.modeLoreSpellA{left:44%;top:62px;width:16px;height:16px;background:radial-gradient(circle,#fff8d7 0,#7ed8ff 58%,rgba(126,216,255,0) 88%);box-shadow:0 0 24px rgba(126,216,255,.42)}
.modeLoreSpellB{left:56%;top:48px;width:12px;height:12px;background:radial-gradient(circle,#fff1dd 0,#ffb26e 56%,rgba(255,178,110,0) 88%);box-shadow:0 0 18px rgba(255,178,110,.32)}
.modeLoreCaption{display:grid;gap:4px;margin-top:10px;color:#d9d0e4}
.modeLoreCaption span{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#e7dcff}
.modeLoreCaption small{color:#b8aec8;line-height:1.4}

@media (max-width:980px){
  .authWindowCluster,.authBookshelfScene{opacity:.45}
  .modeLoreArtPanel{min-height:220px}
}
@media (max-width:760px){
  .authWindowCluster,.authRuneRingB,.authBookshelfScene,.authFloorSigil,.modeBackdropScene{display:none}
  .modeLoreScene{height:170px}
}

/* Phase 51.1 visible character customization controls */
.appearanceSectionLabel{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin:12px 2px 7px;padding-top:4px}
.appearanceSectionLabel span{color:#c9a5e8;font-size:9px;font-weight:900;letter-spacing:.16em}
.appearanceSectionLabel small{color:#8f829b;font-size:9px;text-align:right}
.appearanceSectionLabel.wardrobeLabel{margin-top:16px;padding-top:12px;border-top:1px solid rgba(108,83,129,.28)}
.bodyTypeField{border-color:rgba(164,121,209,.68)!important;background:linear-gradient(135deg,rgba(65,43,84,.62),rgba(28,20,40,.66))!important;box-shadow:inset 0 0 18px rgba(151,107,199,.06)}
.bodyTypeField span::after{content:" ✦";color:#d8b7f6}
.appearancePanel .appearanceFields{gap:7px}
.appearancePanel .characterSaveRow{margin-top:16px}


/* Phase 53 cleanup: decorative menu art should not look interactive. */
.modeSidebarArt{position:relative;overflow:hidden;min-height:210px;padding:0;border:0;background:transparent;box-shadow:none;pointer-events:none;opacity:.9}
.modeSidebarArt .modeLoreScene{height:210px;border-color:rgba(116,95,149,.18);background:radial-gradient(circle at 50% 24%,rgba(88,102,176,.26),transparent 22%),linear-gradient(180deg,rgba(22,18,37,.54),rgba(12,11,21,.3));box-shadow:inset 0 0 44px rgba(0,0,0,.22)}
.modeLoreCaption{display:none!important}
@media(max-width:760px){.modeSidebarArt{min-height:155px}.modeSidebarArt .modeLoreScene{height:155px}}

/* Phase 54: outer-world login/menu art so surrounding space feels medieval and wizardy */
body{
  position:relative;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 50% -10%, rgba(123,78,189,.62) 0%, rgba(42,25,67,.88) 18%, rgba(14,11,21,.98) 52%, #07050b 100%);
}
body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
}
body::before{
  background:
    radial-gradient(circle at 18% 16%, rgba(195,154,255,.1), transparent 18%),
    radial-gradient(circle at 82% 20%, rgba(255,173,97,.08), transparent 14%),
    radial-gradient(circle at 50% 8%, rgba(119,185,255,.06), transparent 22%);
}
body::after{
  z-index:-3;
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent 18%, transparent 82%, rgba(0,0,0,.18));
}
.page{
  position:relative;
  isolation:isolate;
}
.page::before{
  content:"";
  position:absolute;
  left:50%;
  top:8px;
  transform:translateX(-50%);
  width:min(1400px, 120vw);
  height:280px;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 50% 18%, rgba(146,109,216,.14), transparent 20%),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 26%);
}

#authScreen.authScreen,
#modeScreen.modeScreen{
  overflow:visible;
}

.authOuterWorld,
.modeOuterWorld{
  position:absolute;
  inset:-42px -110px -54px;
  pointer-events:none;
  z-index:0;
}
.authOuterWorld > *,
.modeOuterWorld > *{ position:absolute; }
.authShell,
.modeDashboard{ position:relative; z-index:2; }
.authScene,
.modeBackdropScene{ z-index:1; }

.authOuterTower{
  bottom:26px;
  width:108px;
  height:340px;
  border-radius:60px 60px 0 0;
  background:linear-gradient(180deg, rgba(70,63,92,.65), rgba(34,29,46,.16));
  border:1px solid rgba(220,210,250,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}
.authOuterTower::before{
  content:"";
  position:absolute;
  left:-18px; right:-18px; top:-34px;
  height:44px;
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
  background:linear-gradient(180deg, rgba(116,90,153,.75), rgba(71,52,97,.95));
}
.authOuterTower::after{
  content:"";
  position:absolute;
  left:50%; top:58px;
  width:22px; height:32px;
  transform:translateX(-50%);
  border-radius:18px 18px 4px 4px;
  background:linear-gradient(180deg, rgba(255,220,155,.82), rgba(255,158,87,.14));
  box-shadow:0 0 24px rgba(255,183,103,.22);
}
.authOuterTowerLeft{ left:-62px; }
.authOuterTowerRight{ right:-62px; height:300px; }
.authOuterBanner{
  top:56px;
  width:54px;
  height:130px;
  clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%);
  background:linear-gradient(180deg, rgba(83,48,110,.95), rgba(44,27,58,.98));
  border:1px solid rgba(214,196,255,.08);
  box-shadow:0 12px 30px rgba(0,0,0,.14);
}
.authOuterBanner::before{
  content:"✦";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:rgba(229,218,252,.78);
  font-size:24px;
}
.authOuterBannerLeft{ left:-34px; }
.authOuterBannerRight{ right:-34px; }
.authOuterLantern{
  top:118px;
  width:24px;
  height:58px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(250,234,190,.96), rgba(255,175,98,.15));
  box-shadow:0 0 26px rgba(255,183,103,.24);
}
.authOuterLantern::before{
  content:"";
  position:absolute;
  left:50%; top:-40px;
  width:2px; height:40px;
  transform:translateX(-50%);
  background:rgba(183,171,216,.28);
}
.authOuterLanternLeft{ left:34px; }
.authOuterLanternRight{ right:34px; }
.authOuterPines{
  left:-70px; right:-70px; bottom:6px; height:126px;
  background:linear-gradient(180deg, transparent, rgba(8,14,17,.08)),
    radial-gradient(circle at 12% 100%, rgba(9,17,19,.96) 0 24px, transparent 25px),
    radial-gradient(circle at 20% 100%, rgba(9,17,19,.92) 0 20px, transparent 21px),
    radial-gradient(circle at 30% 100%, rgba(10,18,21,.96) 0 28px, transparent 29px),
    radial-gradient(circle at 72% 100%, rgba(10,18,21,.96) 0 26px, transparent 27px),
    radial-gradient(circle at 84% 100%, rgba(9,17,19,.92) 0 22px, transparent 23px),
    radial-gradient(circle at 92% 100%, rgba(9,17,19,.96) 0 30px, transparent 31px);
  opacity:.82;
}
.authOuterCobbles{
  left:-70px; right:-70px; bottom:-34px; height:88px;
  background:
    linear-gradient(180deg, rgba(15,12,21,0), rgba(15,12,21,.85)),
    repeating-linear-gradient(90deg, rgba(98,85,119,.15) 0 28px, rgba(72,61,88,.18) 28px 56px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 14px, rgba(255,255,255,.02) 14px 15px);
  border-top:1px solid rgba(158,142,190,.06);
  border-radius:40px;
  opacity:.56;
}

.modeOuterColumn{
  bottom:18px;
  width:126px;
  height:360px;
  border-radius:30px 30px 10px 10px;
  background:linear-gradient(180deg, rgba(90,84,112,.64), rgba(41,38,53,.18));
  border:1px solid rgba(223,214,252,.06);
}
.modeOuterColumn::before{
  content:"";
  position:absolute;
  left:12px; right:12px; top:18px; bottom:18px;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.04) 0 8px, rgba(255,255,255,0) 8px 34px);
  border-radius:24px;
  opacity:.24;
}
.modeOuterColumn::after{
  content:"";
  position:absolute;
  left:-12px; right:-12px; bottom:-18px; height:26px;
  border-radius:12px;
  background:linear-gradient(180deg, rgba(62,58,80,.84), rgba(32,30,42,.96));
}
.modeOuterColumnLeft{ left:-74px; }
.modeOuterColumnRight{ right:-74px; }
.modeOuterBanner{
  top:48px;
  width:64px;
  height:150px;
  clip-path:polygon(0 0,100% 0,100% 84%,50% 100%,0 84%);
  background:linear-gradient(180deg, rgba(56,80,123,.96), rgba(28,41,65,.98));
  border:1px solid rgba(185,215,255,.08);
}
.modeOuterBanner::before{
  content:"☽";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:rgba(228,240,255,.8);
  font-size:28px;
}
.modeOuterBannerLeft{ left:-42px; }
.modeOuterBannerRight{ right:-42px; background:linear-gradient(180deg, rgba(92,58,124,.96), rgba(43,27,59,.98)); }
.modeOuterBannerRight::before{ content:"✦"; }
.modeOuterBrazier{
  bottom:44px;
  width:44px; height:64px;
  border-radius:10px 10px 16px 16px;
  background:linear-gradient(180deg, rgba(76,69,96,.92), rgba(36,33,46,.96));
  border:1px solid rgba(219,210,246,.05);
}
.modeOuterBrazier::before{
  content:"";
  position:absolute;
  left:50%; top:-24px;
  width:34px; height:34px;
  transform:translateX(-50%);
  border-radius:50% 50% 52% 52%;
  background:radial-gradient(circle, rgba(255,247,205,.95) 0, rgba(255,194,96,.78) 36%, rgba(255,121,68,.22) 68%, rgba(255,121,68,0) 78%);
  box-shadow:0 0 26px rgba(255,164,86,.26);
}
.modeOuterBrazierLeft{ left:34px; }
.modeOuterBrazierRight{ right:34px; }
.modeOuterSkyline{
  left:-40px; right:-40px; bottom:18px; height:140px;
  background:
    linear-gradient(180deg, transparent, rgba(0,0,0,.08)),
    radial-gradient(circle at 8% 100%, rgba(17,19,29,.98) 0 34px, transparent 35px),
    radial-gradient(circle at 21% 100%, rgba(17,19,29,.95) 0 24px, transparent 25px),
    radial-gradient(circle at 39% 100%, rgba(18,22,31,.98) 0 42px, transparent 43px),
    radial-gradient(circle at 58% 100%, rgba(17,21,31,.95) 0 32px, transparent 33px),
    radial-gradient(circle at 79% 100%, rgba(16,18,28,.98) 0 38px, transparent 39px),
    radial-gradient(circle at 92% 100%, rgba(16,18,28,.95) 0 28px, transparent 29px);
  opacity:.8;
}
.modeOuterFloor{
  left:-70px; right:-70px; bottom:-40px; height:96px;
  border-radius:50px;
  background:
    linear-gradient(180deg, rgba(0,0,0,0), rgba(8,8,14,.8)),
    repeating-linear-gradient(90deg, rgba(126,116,150,.12) 0 34px, rgba(83,75,99,.16) 34px 68px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, rgba(255,255,255,0) 1px 14px);
  border-top:1px solid rgba(168,155,200,.06);
  opacity:.58;
}

.authScreen::before,
.modeScreen::before{
  content:"";
  position:absolute;
  inset:-24px;
  border-radius:32px;
  border:1px solid rgba(255,255,255,.03);
  pointer-events:none;
  z-index:0;
}
.authScreen::after,
.modeScreen::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:26px;
  box-shadow:0 0 0 1px rgba(199,180,240,.06), 0 36px 90px rgba(0,0,0,.28);
  pointer-events:none;
  z-index:0;
}

@media (max-width: 1100px){
  .authOuterWorld,
  .modeOuterWorld{ inset:-24px -48px -34px; }
  .authOuterTower,
  .modeOuterColumn{ opacity:.66; }
}
@media (max-width: 840px){
  .authOuterBanner,
  .authOuterLantern,
  .modeOuterBanner,
  .modeOuterBrazier{ display:none; }
  .authOuterTower,
  .modeOuterColumn{ width:84px; }
}
@media (max-width: 760px){
  .authOuterWorld,
  .modeOuterWorld,
  .authScreen::before,
  .authScreen::after,
  .modeScreen::before,
  .modeScreen::after{ display:none; }
  .page::before{ width:100vw; }
}

/* Phase 75 — focused four-mode board + Explore interaction prompt */
.phase75ModeSection{display:grid;gap:14px}
.phase75ModeCards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.phase75ModeCard{min-height:160px!important}
.phase75ModeCard.exploreCard{border-color:rgba(115,174,119,.58)!important;background:linear-gradient(160deg,rgba(20,34,25,.98),rgba(12,20,16,.98))!important}
.phase75ModeCard.trainingCard{border-color:rgba(190,153,91,.54)!important}
.trainingDifficultyControl{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 16px;border:1px solid rgba(118,92,146,.44);border-radius:14px;background:rgba(16,12,23,.76)}
.trainingDifficultyControl>span{display:grid;gap:3px}
.trainingDifficultyControl small{color:#a99bb8;font-size:11px}
.trainingDifficultyControl select{min-width:190px}
.explorePrompt{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:18;display:grid;grid-template-columns:34px minmax(180px,auto);grid-template-rows:auto 3px;align-items:center;gap:3px 10px;padding:9px 12px 8px;border:1px solid rgba(233,213,165,.45);border-radius:12px;background:rgba(10,9,13,.88);box-shadow:0 8px 30px rgba(0,0,0,.35);backdrop-filter:blur(7px);pointer-events:none}
.explorePrompt.hidden{display:none}
.explorePrompt strong{grid-row:1/span 2;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#17100a;background:linear-gradient(#f7df9c,#bf8d42);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);font-size:13px}
.explorePrompt span{font-size:12px;font-weight:750;color:#f4ead6;white-space:nowrap}
.explorePrompt i{display:block;width:0;height:3px;border-radius:99px;background:linear-gradient(90deg,#8fd7a5,#e9d698);transition:width .06s linear}
.explorePrompt.walkThrough{border-color:rgba(129,202,181,.45)}
.explorePrompt.walkThrough strong{background:linear-gradient(#c3ead6,#78b9ab)}
.explorePrompt.walkThrough i{display:block}
.npcDialogue{position:absolute;left:50%;bottom:122px;transform:translateX(-50%);z-index:22;width:min(1020px,calc(100% - 24px));min-height:220px;padding:0;background:url("/art/ui/dialogue-frame.png") center center / 100% 100% no-repeat;display:grid;align-items:stretch;pointer-events:auto}
.npcDialogue.hidden{display:none}
.npcDialogueShell{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:stretch;padding:58px 56px 52px 56px;min-height:220px}
.npcDialoguePortrait{align-self:end;justify-self:center;max-height:190px;max-width:190px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.34))}
.npcDialogueContent{display:grid;align-content:start;gap:10px;padding-top:6px}
.npcDialogueSpeaker{display:inline-block;max-width:max-content;padding:2px 14px 0;color:#f5e8bf;font-size:24px;font-weight:900;letter-spacing:.02em;text-shadow:0 2px 4px rgba(0,0,0,.38)}
.npcDialogueText{margin:0;color:#2d1f0e;font-size:20px;line-height:1.45;font-weight:700;text-shadow:none}
.npcDialogueHint{color:rgba(46,28,11,.72);font-size:12px;font-weight:700;letter-spacing:.02em}
.npcDialogueClose{position:absolute;top:34px;right:38px;z-index:2;width:34px;height:34px;border:none;border-radius:999px;background:rgba(17,14,25,.88);box-shadow:0 4px 10px rgba(0,0,0,.28);color:#f5e7bc;font-size:18px;font-weight:900;cursor:pointer}
.npcDialogueClose:hover{transform:translateY(-1px)}
.npcDialogueClose:focus-visible{outline:2px solid #9fe2ff;outline-offset:2px}
@media(max-width:900px){.phase75ModeCards{grid-template-columns:1fr}.trainingDifficultyControl{align-items:flex-start;flex-direction:column}.trainingDifficultyControl select{width:100%}}
@media (max-width: 900px){.npcDialogue{bottom:102px;width:min(96%,calc(100% - 12px))}.npcDialogueShell{grid-template-columns:120px minmax(0,1fr);gap:10px;padding:44px 28px 34px 28px;min-height:180px}.npcDialoguePortrait{max-width:108px;max-height:124px}.npcDialogueSpeaker{font-size:18px}.npcDialogueText{font-size:15px;line-height:1.35}.npcDialogueClose{top:18px;right:20px;width:30px;height:30px;font-size:16px}}

@media (max-width:700px) {
  .exploreProgressHud { width:min(230px,46%); top:8px; right:8px; padding:7px 9px 6px; }
}
body.touchDevice.mobileMatchMode .exploreProgressHud {
  top:8px; right:8px; width:min(220px,38vw); padding:6px 8px; font-size:9px;
}

/* Phase 75.2 — in-arena circular combat ability dock. */
.gameFrame > .combatAbilityDock {
  --dock-size: 74px;
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 20;
  width: auto;
  margin: 0;
  display: flex;
  grid-template-columns: none;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  transform: translateX(-50%);
  pointer-events: none;
}
.gameFrame > .combatAbilityDock .spell {
  --cooldown-progress: 100%;
  position: relative;
  isolation: isolate;
  width: var(--dock-size);
  height: var(--dock-size);
  min-width: var(--dock-size);
  min-height: var(--dock-size);
  overflow: visible;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
  padding: 13px 7px 8px;
  border: 2px solid rgba(220,205,238,.58);
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 34%, rgba(92,66,119,.94) 0 18%, rgba(25,18,34,.97) 62%, rgba(11,9,16,.98) 100%);
  box-shadow: 0 7px 18px rgba(0,0,0,.46), inset 0 0 16px rgba(176,128,230,.12);
  color: #fff;
  text-align: center;
  pointer-events: auto;
}
.gameFrame > .combatAbilityDock .spell::before {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(from -90deg, #75ddff var(--cooldown-progress), rgba(73,56,88,.72) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  opacity: .9;
}
.gameFrame > .combatAbilityDock .spell.selected {
  border-color: #efe2ff;
  background:
    radial-gradient(circle at 48% 32%, rgba(129,83,176,.98) 0 20%, rgba(47,27,65,.98) 62%, rgba(15,10,21,.99) 100%);
  box-shadow: 0 7px 20px rgba(0,0,0,.5), 0 0 16px rgba(170,113,236,.38), inset 0 0 17px rgba(219,181,255,.16);
}
.gameFrame > .combatAbilityDock .battleUltimate {
  border-color: rgba(241,192,93,.78);
  background: radial-gradient(circle at 48% 32%, rgba(113,64,42,.98), rgba(38,21,30,.98) 64%, rgba(14,10,16,.99));
}
.gameFrame > .combatAbilityDock .battleUltimate::before {
  background: conic-gradient(from -90deg, #ffd36e var(--cooldown-progress), rgba(82,62,45,.78) 0);
}
.gameFrame > .combatAbilityDock .key {
  position: absolute;
  left: 50%;
  top: -10px;
  z-index: 3;
  transform: translateX(-50%);
  grid-row: auto;
  min-width: 27px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid rgba(243,229,255,.74);
  border-radius: 999px;
  background: rgba(14,10,20,.96);
  box-shadow: 0 3px 8px rgba(0,0,0,.38);
  color: #f8f2ff;
  font-size: 9px;
  letter-spacing: .03em;
}
.gameFrame > .combatAbilityDock .spellName {
  display: block;
  max-width: 60px;
  overflow: hidden;
  color: #fff;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.12;
  text-align: center;
  text-overflow: ellipsis;
}
.gameFrame > .combatAbilityDock .detail,
.gameFrame > .combatAbilityDock .cooldown { display: none; }
.gameFrame > .combatAbilityDock .spell:focus-visible { outline-offset: 7px; }
.gameFrame > .combatAbilityDock .spell:hover { transform: translateY(-2px); }

/* Keep Explore interactions above the ability dock instead of overlapping it. */
.gameFrame .explorePrompt { bottom: 108px; }
@media (min-width: 721px) and (hover: hover) {
  .gameFrame .explorePrompt.walkThrough { bottom: 220px; }
}

@media (max-width: 720px) {
  .gameFrame > .combatAbilityDock { --dock-size: 60px; gap: 7px; bottom: 10px; }
  .gameFrame > .combatAbilityDock .spellName { max-width: 48px; font-size: 8.5px; }
  .gameFrame > .combatAbilityDock .key { top: -8px; height: 19px; min-width: 23px; font-size: 8px; }
  .gameFrame .explorePrompt { bottom: 88px; }
}
body.touchDevice.mobileMatchMode .gameFrame .explorePrompt { bottom: 22px; }
body.touchDevice.mobileMatchMode .npcDialogue { bottom: 18px; }

/* Phase 75.4 explore art integration: menu panels sit inside the same painted world language as Elderglen and the Old Cavern. */
#authScreen.authScreen{
  background:
    linear-gradient(145deg, rgba(10,16,22,.88), rgba(8,8,15,.93)),
    radial-gradient(circle at 50% 58%, rgba(103,190,255,.18), rgba(103,190,255,0) 26%),
    url("/art/maps/explore/elderglen-town.png") center center / cover no-repeat;
  min-height: 690px;
}
#authScreen.authScreen::before{
  background:
    linear-gradient(90deg, rgba(6,8,13,.82), rgba(6,8,13,.22) 42%, rgba(6,8,13,.65) 100%),
    radial-gradient(circle at 24% 28%, rgba(255,193,109,.16), transparent 22%),
    radial-gradient(circle at 76% 34%, rgba(111,198,255,.14), transparent 20%);
  opacity: 1;
}
.authOuterWorld{opacity:.2}
.authScene{opacity:.34}
.authShell{
  display:grid;
  gap:24px;
  grid-template-columns:minmax(260px,.96fr) minmax(420px,1.14fr);
  align-items:start;
  padding:36px;
}
.authBrand,
.authCard{
  backdrop-filter: blur(5px);
  background:linear-gradient(145deg, rgba(14,18,28,.82), rgba(11,9,19,.84));
  border:1px solid rgba(126,108,156,.44);
  box-shadow:0 18px 38px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.02);
}
.authBrand{padding:22px 24px;border-radius:22px;max-width:430px}
.authBrand h1{font-size:clamp(2rem,3vw,2.8rem)}
.authGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.authCard{border-radius:20px}
.authWizardScene{right:15%;top:20%;opacity:.72;transform:scale(1.08)}

#modeScreen.modeScreen{
  background:
    linear-gradient(145deg, rgba(8,11,17,.84), rgba(9,8,15,.94)),
    radial-gradient(circle at 50% 44%, rgba(112,164,255,.14), rgba(112,164,255,0) 24%),
    url("/art/maps/explore/old-cavern-floor1.png") center center / cover no-repeat;
}
#modeScreen.modeScreen::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 15%),
    linear-gradient(90deg, rgba(7,9,14,.7), rgba(7,9,14,.2) 40%, rgba(7,9,14,.78));
  opacity: 1;
}
.modeOuterWorld,
.modeBackdropScene{opacity:.22}
.modeDashboard{gap:20px;grid-template-columns:minmax(0,1.48fr) minmax(340px,.98fr)}
.modeMainColumn,
.modeSidebar{
  display:grid;
  gap:18px;
}
.modeMainColumn > .modeSection,
.modeMainColumn > #partyPanel,
.modeSidebar > .menuPanel,
.modeSidebarArt{
  backdrop-filter: blur(4px);
  background:linear-gradient(145deg, rgba(13,17,26,.86), rgba(11,10,20,.88));
  border:1px solid rgba(122,111,149,.42);
  box-shadow:0 16px 34px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.02);
}
.modeSidebarArt{padding:10px;border-radius:22px;overflow:hidden}
.modeLoreScene{
  min-height:220px;
  background:
    linear-gradient(145deg, rgba(9,11,17,.18), rgba(9,11,17,.54)),
    url("/art/maps/explore/elderglen-town.png") center center / cover no-repeat;
  border-color:rgba(135,112,161,.34);
}
.modeLoreScene::after{
  content:"";
  position:absolute;
  right:-2px;
  bottom:-4px;
  width:46%;
  height:58%;
  background:url("/art/maps/explore/old-cavern-gate.png") center bottom / contain no-repeat;
  opacity:.95;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.32));
}
.modeLoreBridge,
.modeLoreWizard,
.modeLoreSpell,
.modeLoreTower,
.modeLoreMoon{opacity:.25}

@media (max-width:980px){
  .authShell{grid-template-columns:1fr}
  .authBrand{max-width:none}
  .modeDashboard{grid-template-columns:1fr}
}
@media (max-width:760px){
  .authShell{padding:18px}
  .authGrid{grid-template-columns:1fr}
  .authWizardScene{right:32%;top:24%;transform:scale(.96);opacity:.62}
  .modeLoreScene::after{width:54%;height:52%}
}

/* Staff basic attack lives in the combat dock as the always-available LMB action. */
.gameFrame > .combatAbilityDock .basicAttackSpell {
  border-color: color-mix(in srgb, var(--basic-attack-color, #dce8f2) 72%, white 18%);
  background: radial-gradient(circle at 48% 32%, rgba(52,58,72,.98), rgba(24,20,31,.98) 64%, rgba(11,9,16,.99));
}
.gameFrame > .combatAbilityDock .basicAttackSpell::before {
  background: conic-gradient(from -90deg, var(--basic-attack-color, #dce8f2) var(--cooldown-progress), rgba(70,64,80,.74) 0);
}

/* Phase 78 — Explore adventure inventory, vendors, and one quick-use consumable slot. */
.quickItemSlot{
  position:absolute;right:14px;bottom:70px;z-index:36;
  width:104px;min-height:82px;padding:10px 9px 8px;border:2px solid rgba(222,190,112,.72);border-radius:18px;
  background:linear-gradient(160deg,rgba(22,18,28,.94),rgba(10,11,17,.96));color:#f4e8d2;cursor:pointer;
  display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;align-items:center;gap:3px 6px;
  box-shadow:0 8px 24px rgba(0,0,0,.3),inset 0 0 18px rgba(213,174,94,.08);overflow:hidden;
}
.quickItemSlot.hidden{display:none!important}.quickItemKey{position:absolute;top:4px;left:6px;font-size:9px;font-weight:900;border:1px solid rgba(255,255,255,.28);border-radius:6px;padding:2px 4px;background:#0d0d14}.quickItemIcon{grid-row:1/3;font-size:28px;margin-top:4px}.quickItemName{font-size:9px;font-weight:900;line-height:1.1;text-align:left;margin-top:5px}.quickItemSlot>strong{font-size:12px;color:#f5d883;align-self:end}.quickItemSlot>i{position:absolute;left:0;right:0;bottom:0;height:4px;background:#77d7a0;transform-origin:left center;transform:scaleX(1)}
.quickItemSlot.empty{opacity:.72;border-color:rgba(126,113,143,.55)}.quickItemSlot.cooling{cursor:not-allowed}

.exploreInventoryPanel{position:absolute;right:22px;top:82px;z-index:42;width:min(410px,calc(100% - 44px));max-height:calc(100% - 170px);overflow:auto;padding:16px;border:1px solid rgba(132,109,163,.7);border-radius:18px;background:linear-gradient(160deg,rgba(18,15,26,.97),rgba(9,10,16,.98));box-shadow:0 18px 44px rgba(0,0,0,.46);backdrop-filter:blur(8px);color:#eee7f5}.exploreInventoryPanel.hidden{display:none!important}.exploreInventoryPanel>header{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.09)}.exploreInventoryPanel h2{margin:2px 0 3px;font-size:18px}.exploreInventoryPanel p{margin:0;color:#aaa0b5;font-size:10px}.exploreVendorSection{display:grid;gap:11px;margin:13px 0;padding:12px;border:1px solid rgba(105,184,131,.36);border-radius:14px;background:rgba(31,57,41,.22)}.exploreVendorSection.hidden{display:none!important}.exploreVendorIdentity{display:flex;gap:10px;align-items:center}.exploreVendorIdentity>span{font-size:30px}.exploreVendorIdentity strong,.exploreVendorIdentity small{display:block}.exploreVendorIdentity small{margin-top:3px;color:#b1b9af;font-size:9px;line-height:1.4}.exploreVendorItems,.exploreConsumableItems{display:grid;gap:8px}.exploreVendorItem,.exploreConsumableRow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:rgba(255,255,255,.035)}.exploreVendorItem>span,.exploreConsumableRow>span{font-size:24px}.exploreVendorItem strong,.exploreConsumableRow strong{display:block;font-size:11px}.exploreVendorItem small,.exploreConsumableRow small{display:block;margin-top:2px;color:#a99fad;font-size:8px;line-height:1.35}.exploreVendorItem button,.exploreConsumableRow button{font-size:9px;padding:7px 9px}.exploreInventoryQuick{display:flex;justify-content:space-between;gap:12px;margin:13px 0 9px;padding:9px 11px;border:1px solid rgba(222,190,112,.28);border-radius:10px;background:rgba(222,190,112,.06)}.exploreInventoryQuick span{font-size:8px;font-weight:900;letter-spacing:.1em;color:#c8ad72}.exploreInventoryQuick strong{font-size:10px}.consumableItemCard.equipped{border-color:rgba(112,219,153,.62);box-shadow:inset 0 0 18px rgba(112,219,153,.06)}

@media(max-width:720px){.quickItemSlot{right:7px;bottom:50px;width:86px;min-height:70px}.exploreInventoryPanel{right:10px;top:60px;width:calc(100% - 20px);max-height:calc(100% - 130px)}}

/* Runic Core + Explore equipment inventory */
.exploreInventoryPanel{width:min(610px,calc(100% - 44px));}
.exploreLoadoutSection,.exploreRuneSection{display:grid;gap:10px;margin:13px 0;padding:12px;border:1px solid rgba(121,105,151,.32);border-radius:14px;background:rgba(255,255,255,.025)}
.exploreRuneSection{border-color:rgba(143,106,190,.42);background:linear-gradient(145deg,rgba(75,45,103,.13),rgba(18,14,27,.34))}
.exploreSectionHead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}.exploreSectionHead>div{display:grid;gap:2px}.exploreSectionHead>div>strong{font-size:13px}.exploreSectionHead>small{color:#a69ab3;font-size:9px}.exploreSectionHead .eyebrow{font-size:7px}
.exploreEquipmentSlots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.exploreEquippedSlot{position:relative;min-width:0;padding:10px;border:1px solid rgba(118,101,142,.42);border-radius:11px;background:rgba(12,10,18,.56)}.exploreEquippedSlot>span{display:block;color:#8f829b;font-size:7px;font-weight:900;letter-spacing:.12em}.exploreEquippedSlot>strong{display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.exploreEquippedSlot>small{display:block;margin-top:4px;color:#b7a6c8;font-size:7px;font-weight:800}
.exploreOwnedEquipment{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.exploreGearCard{position:relative;display:flex;align-items:center;justify-content:space-between;gap:7px;min-width:0;padding:9px;border:1px solid rgba(105,91,124,.42);border-radius:10px;background:rgba(18,14,25,.72)}.exploreGearCard.equipped{border-color:rgba(107,217,160,.62);box-shadow:inset 0 0 18px rgba(93,207,146,.06)}.exploreGearCard>div:first-child{min-width:0}.exploreGearCard>div:first-child span{display:block;color:#95889f;font-size:6.5px;font-weight:900;letter-spacing:.08em}.exploreGearCard>div:first-child strong{display:block;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}.exploreGearCard button{flex:0 0 auto;margin:0;padding:6px 7px;font-size:8px}
.exploreItemTooltip{position:absolute;left:8px;top:calc(100% + 6px);z-index:75;width:260px;display:none;padding:11px;border:1px solid rgba(164,136,194,.7);border-radius:11px;background:rgba(10,8,15,.98);box-shadow:0 15px 32px rgba(0,0,0,.55);pointer-events:none}.exploreGearCard:hover .exploreItemTooltip,.exploreEquippedSlot:hover .exploreItemTooltip{display:grid;gap:8px}.exploreTooltipTitle{display:flex;justify-content:space-between;gap:10px}.exploreTooltipTitle b{font-size:11px}.exploreTooltipTitle em{color:#bba6cd;font-size:7px;font-style:normal;font-weight:900}.exploreTooltipBlock{display:grid;gap:2px;padding-top:7px;border-top:1px solid rgba(255,255,255,.07)}.exploreTooltipBlock span{color:#9d8cae;font-size:6.5px;font-weight:900;letter-spacing:.1em}.exploreTooltipBlock strong{font-size:9px}.exploreTooltipBlock small{color:#b8aebe;font-size:8px;line-height:1.4}
.exploreRuneCore{display:grid;gap:8px}.exploreRuneIntro{display:grid;gap:4px;padding:9px 10px;border-radius:10px;background:rgba(139,91,185,.09)}.exploreRuneIntro strong{font-size:10px}.exploreRuneIntro small{color:#b6a9c1;font-size:8px;line-height:1.45}.exploreRuneCard{display:grid;gap:8px;padding:11px;border:1px solid rgba(105,88,127,.44);border-radius:12px;background:rgba(13,10,19,.68);opacity:.62}.exploreRuneCard.owned{opacity:1}.exploreRuneCard.active{border-color:rgba(185,129,239,.75);box-shadow:inset 0 0 24px rgba(153,91,211,.09)}.exploreRuneIdentity{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center}.exploreRuneIdentity>span{font-size:24px}.exploreRuneIdentity div{display:grid;gap:2px}.exploreRuneIdentity small{color:#9a89a9;font-size:7px;font-weight:900;letter-spacing:.1em}.exploreRuneIdentity strong{font-size:11px}.exploreRuneIdentity b{color:#d2b7eb;font-size:7px;letter-spacing:.08em}.exploreRuneCard p{min-height:0}.exploreRuneStats,.exploreRunePassive{display:grid;gap:3px;padding:7px 8px;border-radius:8px;background:rgba(255,255,255,.035)}.exploreRuneStats span,.exploreRunePassive span{color:#9b88aa;font-size:6.5px;font-weight:900;letter-spacing:.1em}.exploreRuneStats strong{color:#e9e1ef;font-size:8px}.exploreRunePassive small{color:#c2b4c9;font-size:8px;line-height:1.35}.exploreRuneActions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.exploreRuneActions button{margin:0;font-size:8px;padding:6px 8px}.exploreRuneLocked{color:#887b91;font-size:8px}.exploreRuneMax{color:#78dda5;font-size:8px;font-weight:900}
@media(max-width:720px){.exploreInventoryPanel{width:calc(100% - 20px)}.exploreEquipmentSlots,.exploreOwnedEquipment{grid-template-columns:1fr}.exploreItemTooltip{left:auto;right:0;width:min(270px,80vw)}}

/* World Content Editor — password-protected Explore authoring panel. */
.worldContentEditorPanel{
  position:absolute; top:12px; right:12px; z-index:40; width:min(390px,44%); max-height:calc(100% - 24px);
  overflow:auto; padding:12px; border:1px solid rgba(122,210,255,.68); border-radius:14px;
  background:linear-gradient(160deg,rgba(9,10,16,.98),rgba(21,15,29,.97));
  box-shadow:0 18px 42px rgba(0,0,0,.48); color:#f4f7ff; backdrop-filter:blur(8px);
}
.worldContentEditorHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:9px;border-bottom:1px solid rgba(144,169,205,.2)}
.worldContentEditorHeader>div{display:grid;gap:2px;min-width:0}.worldContentEditorHeader strong{font-size:14px}.worldContentEditorHeader small{color:#9fb4cb;font-size:10px}
.worldEditorEmpty{padding:18px 5px;color:#aeb8c8;font-size:11px;line-height:1.5}.worldEditorBody{display:grid;gap:9px;padding-top:9px}
.worldEditorSection{display:grid;gap:8px;padding:10px;border:1px solid rgba(113,129,159,.25);border-radius:11px;background:rgba(18,18,28,.72)}
.worldEditorSectionHead{display:flex;align-items:center;justify-content:space-between;gap:8px}.worldEditorSectionHead strong{font-size:11px;letter-spacing:.04em;text-transform:uppercase}.worldEditorSectionHead small{font-size:9px;color:#91a4bb;text-align:right}
.worldEditorSection label{display:grid;gap:4px;color:#b8c7d8;font-size:9px;font-weight:800;letter-spacing:.02em}.worldEditorSection label small{font-weight:600;color:#8394aa}
.worldEditorSection input,.worldEditorSection textarea,.worldEditorSection select{width:100%;box-sizing:border-box;border:1px solid rgba(113,137,175,.46);border-radius:8px;background:#0d1018;color:#f7fbff;padding:7px 8px;font:600 11px system-ui;outline:none}
.worldEditorSection textarea{resize:vertical;min-height:58px}.worldEditorSection input:focus,.worldEditorSection textarea:focus,.worldEditorSection select:focus{border-color:#72dfff;box-shadow:0 0 0 2px rgba(114,223,255,.12)}
.worldEditorGrid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.worldEditorGrid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.worldEditorTaskList,.worldEditorVendorStock{display:grid;gap:6px}.worldEditorTaskRow{display:grid;grid-template-columns:1.1fr 1.4fr .55fr auto;gap:5px;align-items:end;padding:7px;border:1px solid rgba(117,127,158,.2);border-radius:8px;background:rgba(5,7,12,.54)}
.worldEditorTaskRow .worldEditorTaskText{grid-column:1/-1}.worldEditorRemoveTask{min-width:34px;height:32px;border-radius:7px;border:1px solid rgba(231,112,130,.46);background:rgba(80,22,34,.54);color:#ffc3ca;cursor:pointer}
.worldEditorStockRow{display:grid;grid-template-columns:auto minmax(0,1fr) 92px;gap:7px;align-items:center;padding:6px 7px;border-radius:8px;background:rgba(7,9,15,.58);border:1px solid rgba(107,125,154,.19)}
.worldEditorStockRow input[type=checkbox]{width:18px;height:18px}.worldEditorStockRow span{font-size:10px;color:#d9e4ef;min-width:0}.worldEditorStockRow input[type=number]{padding:6px 7px}
.worldEditorPanelStatus{min-height:16px;color:#a6f0bd;font-size:10px;font-weight:800}.worldEditorPanelStatus.error{color:#ff9ca9}
@media(max-width:760px){.worldContentEditorPanel{width:calc(100% - 24px);max-height:72%;}.worldEditorGrid3{grid-template-columns:1fr 1fr}.worldEditorTaskRow{grid-template-columns:1fr 1fr}.worldEditorTaskRow .worldEditorTaskText{grid-column:1/-1}}

/* Phase 49 — quest journal, NPC quest choices and editor reward rows. */
.questTracker{position:absolute;left:14px;top:72px;z-index:17;width:min(330px,36%);padding:10px 12px;border:1px solid rgba(226,199,129,.42);border-radius:12px;background:rgba(11,9,15,.88);box-shadow:0 8px 24px rgba(0,0,0,.28);pointer-events:none}
.questTracker.hidden{display:none}.questTrackerHead{display:grid;gap:2px}.questTrackerHead span{color:#d7b871;font-size:9px;font-weight:900;letter-spacing:.14em}.questTrackerHead strong{color:#f7edcf;font-size:13px}.questTrackerTask{margin-top:6px;color:#e8e0ee;font-size:11px;font-weight:750;line-height:1.3}.questTrackerProgress{margin-top:3px;color:#9fd9ff;font-size:10px;font-weight:800}
.npcDialogueQuestList{display:grid;gap:8px;max-height:180px;overflow:auto;padding-right:4px}.npcDialogueQuestList.hidden{display:none}.npcQuestCard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center;padding:9px 10px;border:1px solid rgba(75,53,25,.22);border-radius:10px;background:rgba(247,232,190,.52)}.npcQuestCard strong{color:#3a260d;font-size:14px}.npcQuestCard small{grid-column:1;color:#5c452a;font-size:11px;line-height:1.25}.npcQuestCard button{grid-row:1/span 2;grid-column:2;min-width:94px;padding:7px 10px;border:1px solid rgba(61,39,16,.35);border-radius:8px;background:#2a1b10;color:#f5e5bd;font-weight:850;cursor:pointer}.npcQuestCard button:disabled{opacity:.55;cursor:default}.npcQuestReward{grid-column:1/-1;color:#765520;font-size:10px;font-weight:800}
.worldEditorRewardItems{display:grid;gap:7px}.worldEditorRewardRow{display:grid;grid-template-columns:minmax(0,1fr) 82px 34px;gap:7px;align-items:end}.worldEditorRewardRow label{min-width:0}.worldEditorRewardRow select,.worldEditorRewardRow input{width:100%}.worldEditorRewardRemove{height:34px;align-self:end}
@media(max-width:900px){.questTracker{left:8px;top:56px;width:min(260px,44%)}.npcDialogueQuestList{max-height:120px}.npcQuestCard{grid-template-columns:1fr}.npcQuestCard button{grid-column:1;grid-row:auto}.worldEditorRewardRow{grid-template-columns:1fr 70px 34px}}

/* World Content Editor — NPC creation, quick resizing, and map-title authoring. */
.worldEditorCreateSection{margin-top:9px}.worldEditorCreateNpcForm{display:grid;gap:8px;padding-top:2px}.worldEditorCreateNpcHint{color:#8fa4bb;font-size:9px;line-height:1.35}.worldEditorQuickSize{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.worldEditorQuickSize button{margin:0;min-width:0;padding:7px 5px;font-size:9px}.worldEditorSection>small{color:#8fa4bb;font-size:9px;line-height:1.4}.worldEditorCreateSection .primaryButton{margin:0}.worldEditorNpcDeleteBlock{display:grid;gap:7px;padding-top:4px;border-top:1px solid rgba(255,255,255,.08)}.worldEditorDeleteNpcHint{color:#cfb0b5;font-size:9px;line-height:1.4}.worldEditorDeleteActions{display:flex;gap:7px;flex-wrap:wrap}.worldEditorDeleteActions button{margin:0}.worldEditorDangerButton{border-color:rgba(238,123,141,.52)!important;background:rgba(90,24,36,.68)!important;color:#ffd2d8!important}.worldEditorDangerButton:disabled{opacity:.48;cursor:not-allowed}
.worldEditorCheckpointReferenceWarning{padding:8px 9px;border:1px solid rgba(245,186,82,.5);border-radius:8px;background:rgba(105,67,14,.28);color:#ffe0a0;font-size:9px;line-height:1.45}
.worldEditorCheckpointReferenceWarning strong{display:block;margin-bottom:3px;color:#ffd173;font-size:9px;letter-spacing:.04em;text-transform:uppercase}
.worldEditorCheckpointReferenceWarning ul{margin:3px 0 0;padding-left:16px}.worldEditorCheckpointReferenceWarning li+li{margin-top:3px}
@media(max-width:760px){.worldEditorQuickSize{grid-template-columns:1fr 1fr}.worldEditorDeleteActions{display:grid;grid-template-columns:1fr 1fr}}

/* World Content Editor quality-of-life: movable/hideable panel + quest deletion. */
.worldContentEditorHeader{cursor:grab;user-select:none;touch-action:none}
.worldContentEditorHeader:active{cursor:grabbing}
.worldEditorHeaderActions{display:flex;gap:6px;flex:0 0 auto}
.worldEditorHeaderActions button{margin:0}
.worldEditorReopen{
  position:absolute;top:12px;right:12px;z-index:41;margin:0;padding:8px 11px;border:1px solid rgba(122,210,255,.68);
  border-radius:10px;background:rgba(9,10,16,.94);color:#eaf8ff;font:800 10px system-ui;letter-spacing:.04em;cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.35)
}
.worldEditorReopen:hover{border-color:#8fe5ff;background:rgba(20,28,39,.97)}
.worldEditorQuestDeleteBlock{display:grid;gap:7px;padding-top:7px;border-top:1px solid rgba(255,255,255,.08)}
.worldEditorDeleteQuestHint{color:#cfb0b5;font-size:9px;line-height:1.4}
@media(max-width:760px){.worldEditorHeaderActions{gap:4px}.worldEditorHeaderActions button{padding-left:7px;padding-right:7px}.worldEditorReopen{top:8px;right:8px}}

/* Friendly NPC dialogue polish: fit the ornate frame instead of fighting it. */
.npcDialogue{width:min(1020px,calc(100% - 24px));min-height:246px}
.npcDialogueShell{position:relative;grid-template-columns:205px minmax(0,1fr);gap:22px;padding:63px 52px 43px;min-height:246px}
.npcDialoguePortrait{max-height:178px;max-width:180px}
.npcDialogueContent{position:relative;display:grid;align-content:start;gap:8px;padding-top:8px;min-width:0}
.npcDialogueSpeaker{
  position:absolute;z-index:2;left:296px;top:42px;width:min(300px,31%);max-width:none;padding:0 8px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f8edc7;font-size:20px;line-height:26px;font-weight:900;
  text-shadow:0 2px 4px rgba(0,0,0,.62)
}
.npcDialogueText{margin:0 0 1px;color:#2b1c0c;font-size:17px;line-height:1.35;font-weight:750}
.npcDialogueHint{margin-top:0;color:rgba(54,36,16,.62);font-size:10px;font-weight:750}
.npcDialogueQuestList{display:grid;gap:7px;max-height:148px;overflow:auto;padding:1px 4px 1px 0;scrollbar-width:thin}
.npcQuestCard{
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head action" "detail action" "objective action" "reward reward";
  gap:5px 12px;align-items:center;padding:10px 11px;border:1px solid rgba(85,57,24,.28);border-radius:11px;
  background:linear-gradient(180deg,rgba(255,247,215,.72),rgba(232,210,154,.55));box-shadow:inset 0 1px rgba(255,255,255,.38)
}
.npcQuestHead{grid-area:head;display:flex;align-items:center;gap:7px;min-width:0}
.npcQuestHead strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#352109;font-size:14px;line-height:1.1}
.npcQuestStatus{flex:0 0 auto;padding:2px 6px;border:1px solid rgba(95,62,23,.25);border-radius:999px;background:rgba(91,58,22,.08);color:#795728;font-size:8px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.npcQuestDetail{grid-area:detail;margin:0;color:#5b4225;font-size:11px;line-height:1.3}
.npcQuestObjective{grid-area:objective;color:#3d2a12;font-size:10px;font-weight:850;line-height:1.25}
.npcQuestReward{grid-area:reward;display:flex;align-items:flex-start;gap:6px;padding-top:6px;border-top:1px solid rgba(95,62,23,.18);color:#65481e;font-size:10px;font-weight:800;line-height:1.25}
.npcQuestRewardLabel{flex:0 0 auto;color:#8a6121;font-size:8px;font-weight:950;letter-spacing:.08em;text-transform:uppercase}
.npcQuestCard button{grid-area:action;align-self:center;min-width:92px;min-height:38px;padding:7px 10px;border:1px solid rgba(61,39,16,.4);border-radius:9px;background:#2a1b10;color:#f5e5bd;font-weight:900;cursor:pointer;box-shadow:0 3px 8px rgba(63,39,12,.13)}
.npcQuestCard button:hover:not(:disabled){transform:translateY(-1px);background:#382416}
.npcQuestCard button:disabled{opacity:.54;cursor:default;transform:none}
@media(max-width:900px){
  .npcDialogueShell{grid-template-columns:118px minmax(0,1fr);gap:12px;padding:52px 28px 34px;min-height:196px}
  .npcDialoguePortrait{max-width:108px;max-height:124px}
  .npcDialogueSpeaker{left:158px;top:30px;width:min(260px,46%);font-size:16px;line-height:21px}
  .npcDialogueText{font-size:14px;line-height:1.3}.npcDialogueQuestList{max-height:116px}
  .npcQuestCard{grid-template-columns:1fr;grid-template-areas:"head" "detail" "objective" "reward" "action";gap:5px;padding:8px}
  .npcQuestCard button{width:100%;min-height:32px}.npcDialogueHint{font-size:9px}
}
/* Keep the speaker slot anchored to the dialogue frame, not the text column. */
.npcDialogueContent{position:static}

/* Quest talk-task authoring: custom NPC response shown when the selected NPC completes the talk step. */
.worldEditorTaskRow .worldEditorTaskNpcDialogue{grid-column:1/-1}
.worldEditorTaskNpcDialogue textarea{width:100%;min-height:54px;resize:vertical}
.worldEditorTaskNpcDialogue.hidden{display:none}

/* World Content Editor — enemy placement/radius preview + compact control cleanup. */
.worldContentEditorPanel{width:min(430px,46%);padding:10px}
.worldEditorBody{gap:8px;padding-top:8px}
.worldEditorSection{gap:7px;padding:9px;border-radius:10px}
.worldEditorSectionHead{min-height:24px}
.worldEditorCreateActions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.worldEditorCreateActions button{margin:0;min-width:0}
.worldEditorSubhead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0 2px;border-top:1px solid rgba(255,255,255,.07)}
.worldEditorSubhead strong{font-size:10px;color:#eef7ff}.worldEditorSubhead small{font-size:9px;color:#8fa4bb;text-align:right}
.worldEditorBehaviorGrid{align-items:end}
.worldEditorActionRow{display:flex;justify-content:flex-end;gap:7px}.worldEditorActionRow button{margin:0}
.worldEditorRadiusLegend{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:6px 7px;border-radius:8px;background:rgba(5,7,12,.48);border:1px solid rgba(111,131,164,.18)}
.worldEditorRadiusLegend span{display:inline-flex;align-items:center;gap:5px;color:#c4d0dd;font-size:9px;font-weight:800}
.worldEditorRadiusLegend i{display:block;width:9px;height:9px;border-radius:999px;border:2px solid currentColor;background:rgba(255,255,255,.05)}
.worldEditorRadiusLegend .body{color:#ff758b}.worldEditorRadiusLegend .aggro{color:#ffd35c}.worldEditorRadiusLegend .leash{color:#b287ff}
.worldEditorCreateNpcForm{padding:8px;border:1px solid rgba(107,125,154,.18);border-radius:9px;background:rgba(5,7,12,.38)}
.worldEditorPanelStatus{position:sticky;bottom:0;padding:5px 7px;margin:0 -1px -1px;border-radius:7px;background:rgba(8,10,16,.92);z-index:2}
@media(max-width:760px){.worldContentEditorPanel{width:calc(100% - 24px)}.worldEditorCreateActions{grid-template-columns:1fr}.worldEditorBehaviorGrid{grid-template-columns:1fr 1fr}}

/* Quest/dialogue pass — align copy to the ornate frame and make quest output readable.
   Keep the panel docked low so the player/world remain visible; it may intentionally
   cover the bottom ability HUD while a conversation is open. */
.npcDialogue{
  width:min(1040px,calc(100% - 24px));
  min-height:258px;
  bottom:10px;
  isolation:isolate;
}
.npcDialogueShell{
  position:relative;
  display:grid;
  grid-template-columns:212px minmax(0,1fr);
  gap:22px;
  align-items:start;
  min-height:258px;
  padding:62px 42px 30px 34px;
}
.npcDialoguePortrait{
  align-self:end;
  justify-self:center;
  max-width:184px;
  max-height:184px;
}
.npcDialogueSpeaker{
  position:absolute;
  left:29.2%;
  top:22px;
  width:29.8%;
  height:34px;
  display:flex;
  align-items:center;
  padding:0 12px;
  color:#f8edc7;
  font-size:19px;
  line-height:1;
  font-weight:950;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  text-shadow:0 2px 4px rgba(0,0,0,.58);
}
.npcDialogueContent{
  position:static;
  display:grid;
  align-content:start;
  gap:8px;
  min-width:0;
  padding:0 3px 0 0;
}
.npcDialogueText{
  margin:0;
  min-height:38px;
  padding:8px 11px;
  border-left:3px solid rgba(117,79,29,.28);
  border-radius:5px;
  background:rgba(255,249,222,.28);
  color:#2b1d0d;
  font-size:16px;
  line-height:1.38;
  font-weight:720;
}
.npcDialogueText.questResponse{
  border-left-color:rgba(185,129,28,.78);
  background:linear-gradient(90deg,rgba(255,235,151,.34),rgba(255,249,222,.16));
}
.npcDialogue.hasQuests .npcDialogueText{font-size:15px;min-height:34px;padding-top:6px;padding-bottom:6px}
.npcDialogueHint{margin-top:1px;font-size:9px;opacity:.72}
.npcDialogue.hasQuests .npcDialogueHint{display:none}
.npcDialogueQuestList{
  display:grid;
  gap:8px;
  max-height:138px;
  overflow:auto;
  padding:0 5px 1px 0;
  scrollbar-width:thin;
}
.npcQuestCard{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"head action" "detail action" "objective action" "reward reward";
  gap:5px 12px;
  align-items:center;
  padding:10px 11px 9px;
  border:1px solid rgba(94,64,28,.28);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(255,250,225,.84),rgba(236,216,164,.67));
  box-shadow:inset 0 1px rgba(255,255,255,.54),0 2px 6px rgba(79,48,13,.08);
}
.npcQuestHead{grid-area:head;display:flex;align-items:center;gap:7px;min-width:0}
.npcQuestHead strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#321f09;
  font-size:15px;
  line-height:1.15;
  font-weight:950;
}
.npcQuestStatus{
  flex:0 0 auto;
  padding:2px 6px;
  border:1px solid rgba(109,74,28,.28);
  border-radius:999px;
  background:rgba(102,67,23,.08);
  color:#75501e;
  font-size:8px;
  line-height:1.2;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.npcQuestDetail{grid-area:detail;margin:0;color:#5b4225;font-size:11px;line-height:1.28}
.npcQuestObjective{
  grid-area:objective;
  position:relative;
  padding-left:13px;
  color:#39270f;
  font-size:10.5px;
  line-height:1.3;
  font-weight:900;
}
.npcQuestObjective::before{
  content:"◆";
  position:absolute;
  left:0;
  top:0;
  color:#a66e16;
  font-size:8px;
}
.npcQuestReward{
  grid-area:reward;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:6px 8px;
  align-items:center;
  padding-top:7px;
  border-top:1px solid rgba(95,62,23,.16);
}
.npcQuestRewardLabel{
  color:#885e1f;
  font-size:8px;
  line-height:1;
  font-weight:950;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.npcQuestRewardItems{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.npcQuestRewardChip{
  display:inline-flex;
  align-items:center;
  min-height:19px;
  padding:2px 6px;
  border:1px solid rgba(112,76,27,.18);
  border-radius:999px;
  background:rgba(119,77,20,.07);
  color:#5b3d16;
  font-size:9px;
  line-height:1.15;
  font-weight:850;
}
.npcQuestCard button{
  grid-area:action;
  align-self:center;
  min-width:96px;
  min-height:40px;
  padding:8px 12px;
  border:1px solid rgba(54,34,13,.46);
  border-radius:9px;
  background:linear-gradient(180deg,#3a2615,#24170d);
  color:#fae9bd;
  font-size:12px;
  font-weight:950;
  cursor:pointer;
  box-shadow:0 3px 8px rgba(58,34,9,.16);
}
.npcQuestCard button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.08)}
.npcQuestCard button:disabled{opacity:.5;cursor:default;transform:none}

@media(max-width:900px){
  .npcDialogue{min-height:204px;bottom:8px}
  .npcDialogueShell{grid-template-columns:120px minmax(0,1fr);gap:11px;min-height:204px;padding:52px 27px 28px}
  .npcDialoguePortrait{max-width:110px;max-height:126px}
  .npcDialogueSpeaker{left:16.5%;top:22px;width:35%;height:26px;font-size:15px;padding:0 8px}
  .npcDialogueText{font-size:13px;line-height:1.3;padding:6px 8px;min-height:30px}
  .npcDialogueQuestList{max-height:116px}
  .npcQuestCard{grid-template-columns:1fr;grid-template-areas:"head" "detail" "objective" "reward" "action";gap:5px;padding:8px}
  .npcQuestCard button{width:100%;min-height:32px}
  .npcQuestReward{grid-template-columns:1fr;gap:4px}
}

/* World Content Editor — navigation markers (connections, spawns, checkpoints). */
.worldEditorNavigationLegend{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;padding:7px 9px;
  border:1px solid rgba(104,126,157,.2);border-radius:9px;background:rgba(7,9,14,.58)
}
.worldEditorNavigationLegend span{display:inline-flex;align-items:center;gap:5px;color:#c7d1df;font-size:9px;font-weight:850}
.worldEditorNavigationLegend i{width:9px;height:9px;border-radius:999px;border:2px solid currentColor;background:rgba(255,255,255,.05)}
.worldEditorNavigationLegend .connection{color:#f2c36b}.worldEditorNavigationLegend .spawn{color:#5ab7ff}.worldEditorNavigationLegend .checkpoint{color:#65e6a1}
.worldEditorNavigationHint{color:#8fa4bb;font-size:9px;line-height:1.4}
.worldEditorCheckRow{display:flex!important;grid-template-columns:none!important;align-items:center;gap:8px;padding:7px 8px;border:1px solid rgba(107,130,160,.2);border-radius:8px;background:rgba(6,8,13,.42)}
.worldEditorCheckRow input[type=checkbox]{width:18px!important;height:18px;flex:0 0 auto;margin:0}

/* Phase 2 — illustrated Inventory shell. Functional inventory filtering/equip/use arrives in later phases. */
.exploreMenuPrompts{
  position:absolute;right:14px;bottom:12px;z-index:37;display:flex;align-items:flex-end;gap:8px;pointer-events:auto;
}
.exploreMenuPrompts.hidden{display:none!important}
.exploreMenuPromptButton{
  position:relative;width:148px;height:48px;padding:0;border:0;background:transparent;cursor:pointer;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));transition:transform .14s ease,filter .14s ease;
}
.exploreMenuPromptButton img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.exploreMenuPromptButton:hover,.exploreMenuPromptButton:focus-visible{transform:translateY(-2px);filter:drop-shadow(0 7px 13px rgba(96,61,180,.46));outline:none}
.exploreMenuPromptButton:focus-visible::after{content:"";position:absolute;inset:4px;border:2px solid rgba(236,210,132,.8);border-radius:10px}
.exploreMenuPromptButton.cosmeticsPrompt{opacity:.74}
.exploreMenuPromptButton.cosmeticsPrompt>span{position:absolute;right:7px;top:2px;padding:2px 5px;border:1px solid rgba(221,188,104,.55);border-radius:6px;background:rgba(12,9,18,.88);color:#e6ca83;font-size:6px;font-weight:900;letter-spacing:.12em}

.exploreInventoryPanel.inventoryPhase2{
  position:absolute;inset:0;z-index:64;width:100%;height:100%;max-height:none;overflow:visible;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;color:#21170e;
}
.exploreInventoryPanel.inventoryPhase2.hidden{display:none!important}
.exploreInventoryDimmer{position:absolute;inset:0;z-index:0;background:rgba(5,3,10,.56);backdrop-filter:blur(2px)}
.inventoryPhase2Shell{
  position:absolute;left:50%;top:50%;z-index:1;width:min(96%,1320px);max-height:96%;aspect-ratio:1672/941;transform:translate(-50%,-50%);isolation:isolate;pointer-events:auto;
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.56));
}
.inventoryPhase2Frame{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}
.inventoryPhase2Close{
  position:absolute;z-index:6;right:4.7%;top:6.8%;width:34px;height:34px;border:1px solid rgba(231,202,123,.62);border-radius:50%;background:rgba(16,12,24,.88);color:#f3dda2;font-size:18px;font-weight:900;line-height:1;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.4)
}
.inventoryPhase2Close:hover,.inventoryPhase2Close:focus-visible{background:rgba(49,34,66,.96);outline:2px solid rgba(150,105,235,.46);outline-offset:2px}

.inventoryCharacterZone{position:absolute;z-index:2;left:10.8%;top:17%;width:29.8%;height:69%;min-width:0}
#exploreInventoryCharacterPreview{position:absolute;left:3%;top:0;width:94%;height:72%;display:block}
.inventoryEquipmentMiniSlots{position:absolute;left:3%;right:3%;bottom:0;height:31%;display:grid;grid-template-columns:1fr 1fr;gap:4%}
.inventoryEquipmentMiniSlot{position:relative;min-width:0;overflow:hidden;border:0;background:none;text-align:center;cursor:pointer;border-radius:16px}
.inventoryEquipmentMiniSlot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.inventoryEquipmentMiniSlot>div{position:absolute;left:18%;right:18%;top:20%;bottom:22%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0}
.inventoryEquipmentMiniSlot b{font-size:clamp(14px,1.8vw,24px);line-height:1;filter:drop-shadow(0 2px 2px rgba(56,32,17,.18))}
.inventoryEquipmentMiniSlot span{color:#6f5327;font-size:clamp(4px,.55vw,7px);font-weight:900;letter-spacing:.1em;text-shadow:0 1px rgba(255,255,255,.45)}
.inventoryEquipmentMiniSlot strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#271a0e;font-family:Georgia,"Times New Roman",serif;font-size:clamp(7px,.9vw,12px);text-shadow:0 1px rgba(255,255,255,.35)}
.inventoryEquipmentMiniSlot:hover,.inventoryEquipmentMiniSlot:focus-visible{filter:brightness(1.07) drop-shadow(0 0 8px rgba(111,67,166,.22));outline:2px solid rgba(118,78,173,.36);outline-offset:-5px}

.inventoryGridZone{position:absolute;z-index:2;left:44%;top:18%;width:44.3%;height:45%;display:flex;flex-direction:column;min-width:0;overflow:hidden;color:#2a1c10}
.inventoryPhase2Toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:0 1% 2%;padding:5px 8px;border-bottom:1px solid rgba(94,64,33,.28)}
.inventoryPhase2Toolbar strong{font-family:Georgia,"Times New Roman",serif;font-size:clamp(12px,1.35vw,18px);color:#332111}
.inventoryPhase2Toolbar small{color:#785d3e;font-size:clamp(6px,.72vw,9px);font-weight:700;text-align:right}
.inventoryPhase2Grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(5px,.7vw,9px);padding:1% 1.5%;min-height:0;overflow:hidden}
.inventoryPhase2Slot{
  position:relative;aspect-ratio:1;border:1px solid rgba(88,60,37,.48);border-radius:11px;background:linear-gradient(155deg,rgba(48,35,26,.12),rgba(241,220,174,.24));box-shadow:inset 0 0 0 2px rgba(255,245,212,.13),inset 0 -8px 14px rgba(72,43,18,.08);color:#342314;cursor:pointer;min-width:0
}
.inventoryPhase2Slot::after{content:"";position:absolute;inset:5px;border:1px solid rgba(142,99,49,.18);border-radius:8px;pointer-events:none}
.inventoryPhase2Slot>span{display:block;font-size:clamp(18px,2.4vw,31px);line-height:1.05}
.inventoryPhase2Slot>small{display:block;margin-top:3px;color:#62482e;font-size:clamp(5px,.63vw,8px);font-weight:900;letter-spacing:.04em}
.inventoryPhase2Slot:hover,.inventoryPhase2Slot:focus-visible,.inventoryPhase2Slot.selected{border-color:rgba(111,67,166,.72);background:linear-gradient(155deg,rgba(120,82,171,.18),rgba(245,223,171,.34));box-shadow:inset 0 0 0 2px rgba(123,80,189,.16),0 0 10px rgba(106,64,173,.18);outline:none}
.inventoryPhase2Slot.empty{cursor:default;opacity:.55}
.inventoryPhase2Slot.empty>span,.inventoryPhase2Slot.empty>small{display:none}

.inventoryDetailsZone{position:absolute;z-index:2;left:44.8%;top:68.2%;width:42.8%;height:15.2%;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:0 1.8%;color:#2c1c0f}
.inventoryDetailsEyebrow{color:#71532e;font-size:clamp(5px,.65vw,8px);font-weight:900;letter-spacing:.14em}
.inventoryDetailsZone>strong{margin-top:2px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(12px,1.45vw,19px)}
.inventoryDetailsZone>p{margin:4px 0 0;max-width:95%;color:#674c31;font-size:clamp(6px,.72vw,9px);line-height:1.35}
.inventoryPhase2Hint{display:flex;align-items:center;gap:6px;margin-top:5px;color:#725534;font-size:clamp(5px,.64vw,8px);font-weight:800}
.inventoryPhase2Hint kbd{padding:2px 5px;border:1px solid rgba(84,58,35,.42);border-radius:5px;background:rgba(51,35,24,.08);font:900 7px ui-monospace,monospace;color:#3b2818}

@media(max-width:720px){
  .exploreMenuPrompts{right:7px;bottom:7px;gap:4px}.exploreMenuPromptButton{width:105px;height:36px}
  .inventoryPhase2Shell{width:99%}.inventoryPhase2Close{right:3.8%;top:5.7%;width:29px;height:29px;font-size:15px}
  .inventoryPhase2Toolbar small{display:none}.inventoryPhase2Grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  .inventoryDetailsZone>p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
.inventoryLegacyHooks{display:none!important}

/* Phase 3 — real gameplay inventory data + filters. Cosmetics stay under C. */
.inventoryPhase3Filters{display:flex;gap:5px;flex-wrap:wrap;margin:0 1.5% 1.4%;padding:0 1%;min-height:24px}
.inventoryPhase3Filters button{min-height:23px;padding:3px 8px;border:1px solid rgba(96,67,42,.30);border-radius:999px;background:rgba(255,247,221,.16);color:#674a2d;font-size:clamp(5px,.62vw,8px);font-weight:900;letter-spacing:.04em;cursor:pointer}
.inventoryPhase3Filters button:hover,.inventoryPhase3Filters button:focus-visible,.inventoryPhase3Filters button.active{border-color:rgba(103,62,159,.62);background:rgba(112,74,166,.15);color:#3d245d;outline:none}
.inventoryPhase3Grid{flex:1 1 auto;min-height:0;overflow-y:auto;align-content:start;grid-auto-rows:clamp(72px,7vw,92px);gap:clamp(6px,.68vw,9px);padding:1% 2% 2% 1.5%;scrollbar-width:thin;scrollbar-color:rgba(94,59,132,.5) rgba(85,58,35,.08)}
.inventoryPhase3Slot{display:block;aspect-ratio:auto;min-height:72px;padding:18px 6px 27px;overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.inventoryPhase3Slot.empty{display:block;pointer-events:none}
.inventoryPhase3Icon{position:absolute;left:50%;top:48%;transform:translate(-50%,-55%);font-size:clamp(19px,2.05vw,29px)!important;line-height:1!important;filter:drop-shadow(0 2px 2px rgba(58,34,17,.12));pointer-events:none}
.inventoryPhase3Name{position:absolute;left:6px;right:6px;bottom:15px;display:block!important;width:auto!important;margin:0!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;text-transform:none;letter-spacing:0!important;line-height:1.15;font-size:clamp(5.5px,.59vw,8px)!important;pointer-events:none}
.inventoryPhase3Quantity{position:absolute;right:5px;bottom:3px;z-index:2;padding:1px 4px;border:1px solid rgba(92,63,38,.26);border-radius:6px;background:rgba(255,246,215,.82);color:#3c2816;font-size:clamp(5px,.58vw,8px);line-height:1.3;pointer-events:none}
.inventoryPhase3Equipped{pointer-events:none;position:absolute;left:5px;top:5px;z-index:2;padding:1px 4px;border:1px solid rgba(86,113,62,.44);border-radius:5px;background:rgba(216,235,178,.75);color:#395326;font-size:clamp(4px,.48vw,6.5px);font-style:normal;font-weight:900;letter-spacing:.04em}
.inventoryPhase3Slot.equipped{box-shadow:inset 0 0 0 2px rgba(89,130,63,.24),0 0 11px rgba(101,143,73,.12)}
.inventoryPhase3Empty{position:absolute;left:0;right:0;top:57%;transform:translateY(-50%);text-align:center;color:#755b3f;font-size:clamp(7px,.76vw,10px);font-weight:800;pointer-events:none}.inventoryPhase3Empty.hidden{display:none!important}
.inventoryPreviewItemMeta{margin-top:3px;color:#80623f;font-size:clamp(5px,.62vw,8px);font-weight:900;letter-spacing:.06em}
.inventoryPhase3Slot.rarity-rare{border-color:rgba(62,96,171,.44)}
.inventoryPhase3Slot.rarity-epic{border-color:rgba(111,67,166,.50)}
.inventoryPhase3Slot.rarity-material{border-color:rgba(159,118,45,.42)}


/* Phase 4 — Staff/Artifact equipment actions inside the Explore Inventory. */
.inventoryDetailsZone{padding-right:23%}
.inventoryPhase4Actions{position:absolute;right:1.8%;top:50%;width:20%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:stretch;gap:5px}
.inventoryPhase4Actions.hidden{display:none!important}
.inventoryPhase4Actions button{min-height:34px;padding:7px 9px;border:1px solid rgba(97,59,145,.58);border-radius:9px;background:linear-gradient(180deg,rgba(102,67,153,.95),rgba(64,39,101,.96));box-shadow:inset 0 1px rgba(255,255,255,.16),0 4px 10px rgba(59,34,82,.18);color:#fff7df;font-family:Georgia,"Times New Roman",serif;font-size:clamp(7px,.78vw,10px);font-weight:900;letter-spacing:.04em;cursor:pointer}
.inventoryPhase4Actions button:hover,.inventoryPhase4Actions button:focus-visible{background:linear-gradient(180deg,rgba(124,82,181,.98),rgba(77,45,119,.98));outline:2px solid rgba(224,190,112,.56);outline-offset:2px}
.inventoryPhase4Actions button.unequip{border-color:rgba(135,86,62,.48);background:linear-gradient(180deg,rgba(133,90,67,.94),rgba(82,52,41,.96))}
.inventoryPhase4Actions button.secondary{min-height:26px;border-color:rgba(112,84,49,.44);background:linear-gradient(180deg,rgba(125,99,57,.88),rgba(78,57,37,.94));font-size:clamp(6px,.66vw,8px)}
.inventoryPhase4Actions button.secondary.hidden{display:none!important}
.inventoryPhase4Actions button:disabled{cursor:default;opacity:.62;filter:saturate(.65)}
.inventoryPhase4Actions small{min-height:20px;color:#70553a;font-size:clamp(4px,.52vw,7px);font-weight:800;line-height:1.25;text-align:center}
.inventoryPhase4Actions small.success{color:#477438}.inventoryPhase4Actions small.error{color:#9b4039}
.inventoryPhase3Slot.equipped::before{pointer-events:none;content:"✓";position:absolute;right:5px;top:5px;z-index:3;display:grid;place-items:center;width:15px;height:15px;border:1px solid rgba(71,112,54,.55);border-radius:50%;background:rgba(225,240,190,.88);color:#3d652e;font-size:9px;font-weight:950;box-shadow:0 1px 3px rgba(0,0,0,.12)}
/* Phase 5 — consumable Use actions + persistent Z quick slot. */
.inventoryPhase3Slot.rarity-common:not(.empty){box-shadow:inset 0 0 0 1px rgba(255,245,212,.08),inset 0 -8px 14px rgba(72,43,18,.08)}
.quickItemSlot:disabled{opacity:.72}.quickItemSlot:not(:disabled):hover{transform:translateY(-2px);filter:brightness(1.06)}

@media(max-width:720px){
  .inventoryPhase3Filters{gap:3px;margin-bottom:2px}.inventoryPhase3Filters button{min-height:20px;padding:2px 5px}
  .inventoryPhase3Name{font-size:5px!important}.inventoryPhase3Quantity{right:3px;bottom:3px}.inventoryPhase3Equipped{left:3px;top:3px}
  .inventoryDetailsZone{padding-right:24%}.inventoryPhase4Actions{right:1%;width:22%;gap:2px}.inventoryPhase4Actions button{min-height:26px;padding:4px;font-size:6px}.inventoryPhase4Actions small{display:none}
}

/* Phase 9 — Travel Destination anchors in the F8 checkpoint editor. */
.worldEditorTravelDestinationMeta{padding:7px 8px;border:1px solid rgba(226,199,129,.28);border-radius:8px;background:rgba(76,55,22,.16);color:#d9c89b!important;font-size:9px!important;line-height:1.4}
.worldEditorTravelDestinationMeta strong{color:#ffe39a}


/* Phase 11 — Travel Scroll presentation. World-space sigils/particles are drawn
   on the canvas; this layer owns the full-frame fade/portal/title so existing
   combat and Explore HUD cannot visually punch through the transition. */
.travelPresentationOverlay{
  --travel-shade:0;--travel-bloom:0;--travel-title:0;--travel-channel:0;
  --travel-portal:0;--travel-bars:0;--travel-flash:0;--travel-turn:0deg;--travel-pulse:0;--travel-focus-x:50%;--travel-focus-y:50%;
  position:absolute;inset:0;z-index:63;overflow:hidden;border-radius:18px;pointer-events:none;isolation:isolate;
}
.travelPresentationOverlay.hidden{display:none!important}
.travelPresentationShade{position:absolute;inset:0;background:rgba(5,2,12,var(--travel-shade))}
.travelPresentationBloom{
  position:absolute;inset:0;opacity:var(--travel-bloom);
  background:radial-gradient(ellipse at var(--travel-focus-x) var(--travel-focus-y),rgba(201,163,255,.18),transparent 43%,rgba(3,1,10,.68) 90%);
}
.travelPresentationPortal{position:absolute;left:var(--travel-focus-x);top:var(--travel-focus-y);width:min(68vw,570px);aspect-ratio:1;opacity:var(--travel-portal);transform:translate(-50%,-50%) scale(calc(.64 + var(--travel-portal) * .36));border-radius:50%;background:radial-gradient(circle,rgba(255,233,190,.86) 0%,rgba(205,173,255,.45) 1%,rgba(132,77,228,.12) 14%,transparent 46%)}
.travelPresentationPortal::before,.travelPresentationPortal::after{content:"";position:absolute;inset:8%;border-radius:50%;border:1px solid rgba(212,174,255,.4);box-shadow:0 0 18px #aa79ff45,inset 0 0 20px #aa79ff24;transform:rotate(var(--travel-turn)) scale(calc(.96 + var(--travel-pulse) * .08))}
.travelPresentationPortal::after{inset:24%;border-style:dashed;border-color:#e4c794a0;transform:rotate(calc(var(--travel-turn) * -1)) scale(calc(1.04 - var(--travel-pulse) * .08))}
.travelPresentationPortal i{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 18deg,transparent 0deg 13deg,rgba(185,145,255,.38) 13.15deg 13.4deg,transparent 13.6deg 30deg);mask-image:radial-gradient(circle,transparent 10%,#000 26%,transparent 69%);transform:rotate(var(--travel-turn))}
.travelPresentationPortal b{position:absolute;left:12%;right:12%;top:50%;height:2px;background:linear-gradient(90deg,transparent,#c49bff88,#fff0cf,#c49bff88,transparent);box-shadow:0 0 15px #cea7ff88}
.travelPresentationFlash{position:absolute;inset:0;background:#ecdfff;opacity:var(--travel-flash)}
.travelPresentationBars::before,.travelPresentationBars::after{content:"";position:absolute;left:0;right:0;height:5.5%;background:#05020b;transform:scaleY(var(--travel-bars))}
.travelPresentationBars::before{top:0;transform-origin:top}.travelPresentationBars::after{bottom:0;transform-origin:bottom}
.travelChannelLabel{
  position:absolute;left:50%;bottom:20%;transform:translateX(-50%);opacity:var(--travel-channel);
  color:#ead8a2;font:800 11px Georgia,"Times New Roman",serif;letter-spacing:.12em;text-align:center;text-transform:uppercase;
  width:min(520px,84%);line-height:1.5;text-shadow:0 2px 7px rgba(0,0,0,.92),0 0 13px rgba(140,88,224,.55);
}
.travelDestinationTitle{
  position:absolute;left:50%;top:24%;width:min(620px,84%);transform:translate(-50%,-50%);opacity:var(--travel-title);text-align:center;
  color:#fff7e0;text-shadow:0 3px 12px rgba(0,0,0,.94),0 0 22px rgba(133,78,217,.72);
}
.travelDestinationTitle small{display:block;color:#e4c77f;font:800 11px Georgia,"Times New Roman",serif;letter-spacing:.19em}
.travelDestinationTitle strong{display:block;margin-top:7px;font:700 clamp(25px,3.2vw,38px) Georgia,"Times New Roman",serif;letter-spacing:.025em}
.travelDestinationTitle i{display:block;width:172px;height:1px;margin:12px auto 0;background:linear-gradient(90deg,transparent,rgba(225,189,102,.9),transparent);box-shadow:0 0 12px rgba(164,109,232,.55)}
@media(prefers-reduced-motion:reduce){.travelPresentationPortal,.travelPresentationPortal::before,.travelPresentationPortal::after{transform:translate(0,0)}.travelPresentationPortal{transform:translate(-50%,-50%)}.travelPresentationPortal i,.travelPresentationFlash,.travelPresentationBars{display:none}}

/* Phase 12 — F8 Travel Destination behavior controls + editor-created checkpoints. */
.worldEditorTravelOptions{display:grid;gap:6px;padding:7px;border:1px solid rgba(111,86,157,.24);border-radius:9px;background:rgba(35,24,55,.22)}
.worldEditorTravelOptions.hidden{display:none!important}
.worldEditorTravelOptions .worldEditorNavigationHint{margin:0 2px}
.worldEditorCreateActions{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){.worldEditorCreateActions{grid-template-columns:1fr}}

/* Phase 14 — compact NPC interaction menu. Dialogue, quest journal, and shop are separate actions. */
.npcInteractionMenu{
  position:absolute;left:50%;bottom:118px;z-index:24;width:min(590px,calc(100% - 28px));min-height:176px;
  transform:translateX(-50%);display:grid;grid-template-columns:138px minmax(0,1fr);gap:14px;padding:16px 18px 15px;
  border:1px solid rgba(212,177,101,.72);border-radius:16px;
  background:linear-gradient(145deg,rgba(19,18,26,.985),rgba(9,11,17,.99));
  box-shadow:0 18px 48px rgba(0,0,0,.52),inset 0 0 0 1px rgba(255,240,188,.055),inset 0 0 34px rgba(89,65,128,.09);
  color:#f5ead2;pointer-events:auto;backdrop-filter:blur(8px)
}
.npcInteractionMenu::before{content:"";position:absolute;inset:6px;border:1px solid rgba(121,91,53,.42);border-radius:11px;pointer-events:none}
.npcInteractionMenu.hidden{display:none!important}
.npcInteractionPortraitFrame{position:relative;display:grid;place-items:center;min-height:144px;border:1px solid rgba(201,164,91,.42);border-radius:12px;background:radial-gradient(circle at 50% 72%,rgba(104,70,170,.18),rgba(9,10,15,.72) 67%);overflow:hidden}
.npcInteractionPortraitFrame::after{content:"";position:absolute;inset:5px;border:1px solid rgba(103,76,45,.4);border-radius:8px;pointer-events:none}
.npcInteractionPortrait{display:block;max-width:126px;max-height:142px;width:auto;height:auto;object-fit:contain;align-self:end;filter:drop-shadow(0 8px 12px rgba(0,0,0,.42))}
.npcInteractionMenu.noPortrait{grid-template-columns:minmax(0,1fr)}
.npcInteractionMenu.noPortrait .npcInteractionPortraitFrame{display:none}
.npcInteractionContent{position:relative;display:grid;align-content:start;gap:5px;padding:3px 27px 0 2px;min-width:0}
.npcInteractionEyebrow{color:#bda36d;font-size:8px;font-weight:950;letter-spacing:.18em}
.npcInteractionName{font-family:Georgia,"Times New Roman",serif;color:#f4dfad;font-size:22px;line-height:1.05;text-shadow:0 2px 4px rgba(0,0,0,.38)}
.npcInteractionGreeting{margin:2px 0 7px;color:#c8bdad;font-size:11px;line-height:1.35;min-height:15px}
.npcInteractionActions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.npcInteractionAction{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:7px;align-items:center;min-height:54px;padding:7px 9px;border:1px solid rgba(119,104,131,.56);border-radius:10px;background:linear-gradient(155deg,rgba(48,43,58,.9),rgba(18,18,25,.94));color:#eee6dd;text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease,background .12s ease}
.npcInteractionAction.hidden{display:none!important}
.npcInteractionAction:hover,.npcInteractionAction:focus-visible{transform:translateY(-1px);border-color:rgba(220,190,119,.76);box-shadow:0 5px 14px rgba(0,0,0,.22),inset 0 0 18px rgba(170,132,72,.08);outline:none}
.npcInteractionAction.quest{border-color:rgba(181,143,75,.62)}
.npcInteractionAction.shop{border-color:rgba(218,176,83,.72);background:linear-gradient(155deg,rgba(74,53,24,.92),rgba(27,23,20,.96))}
.npcInteractionAction.shop:hover,.npcInteractionAction.shop:focus-visible{border-color:#e9c36c;box-shadow:0 0 16px rgba(218,172,73,.14),inset 0 0 18px rgba(213,164,63,.09)}
.npcInteractionActionIcon{display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(255,255,255,.045);color:#e8d39e;font-size:14px;font-weight:950}
.npcInteractionAction>span:last-child{display:block;min-width:0}.npcInteractionAction strong{display:block;font-size:11px;letter-spacing:.03em}.npcInteractionAction small{display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#9f97a6;font-size:7.5px;font-weight:700}
.npcInteractionAction.shop small{color:#bda980}
.npcInteractionHint{margin-top:2px;color:#756d79;font-size:7px;font-weight:800;letter-spacing:.06em}
.npcInteractionClose{position:absolute;right:12px;top:12px;z-index:3;width:27px;height:27px;border:1px solid rgba(197,159,84,.48);border-radius:999px;background:rgba(12,12,18,.9);color:#e9d7aa;font-size:14px;font-weight:900;line-height:1;cursor:pointer}
.npcInteractionClose:hover,.npcInteractionClose:focus-visible{border-color:#e1bb66;background:rgba(49,38,28,.96);outline:none}
@media(max-width:720px){
  .npcInteractionMenu{bottom:86px;width:calc(100% - 14px);grid-template-columns:92px minmax(0,1fr);gap:9px;padding:12px 12px 11px;min-height:138px}
  .npcInteractionPortraitFrame{min-height:112px}.npcInteractionPortrait{max-width:86px;max-height:108px}
  .npcInteractionContent{padding-right:24px}.npcInteractionName{font-size:17px}.npcInteractionGreeting{font-size:9px;margin-bottom:4px}
  .npcInteractionActions{gap:5px}.npcInteractionAction{grid-template-columns:22px minmax(0,1fr);gap:4px;min-height:46px;padding:5px 6px}.npcInteractionActionIcon{width:22px;height:22px;font-size:11px}.npcInteractionAction strong{font-size:9px}.npcInteractionAction small{display:none}
  .npcInteractionClose{right:9px;top:9px;width:24px;height:24px;font-size:12px}
}

/* Phase 15 — dedicated dual-pane merchant shop UI.
   Shop Stock is on the left; Your Inventory is on the right so players can
   compare both at the same time instead of reusing the adventure inventory. */
.exploreVendorShopPanel{position:absolute;inset:0;z-index:43;display:grid;place-items:center;pointer-events:none}
.exploreVendorShopPanel.hidden{display:none!important}
.exploreVendorShopDimmer{position:absolute;inset:0;background:rgba(7,8,12,.54);backdrop-filter:blur(4px);pointer-events:auto}
.exploreVendorShopShell{
  position:relative;z-index:1;width:min(1080px,calc(100% - 44px));max-height:calc(100% - 60px);display:grid;gap:14px;
  padding:18px;border:1px solid rgba(212,177,101,.72);border-radius:18px;
  background:linear-gradient(145deg,rgba(19,18,26,.985),rgba(9,11,17,.99));
  box-shadow:0 24px 52px rgba(0,0,0,.52),inset 0 0 0 1px rgba(255,240,188,.055),inset 0 0 36px rgba(89,65,128,.09);
  color:#f5ead2;pointer-events:auto;overflow:auto
}
.exploreVendorShopShell::before{content:"";position:absolute;inset:8px;border:1px solid rgba(121,91,53,.38);border-radius:12px;pointer-events:none}
.exploreVendorShopClose{position:absolute;right:14px;top:14px;z-index:2;width:30px;height:30px;border:1px solid rgba(197,159,84,.48);border-radius:999px;background:rgba(12,12,18,.9);color:#e9d7aa;font-size:14px;font-weight:900;line-height:1;cursor:pointer}
.exploreVendorShopClose:hover,.exploreVendorShopClose:focus-visible{border-color:#e1bb66;background:rgba(49,38,28,.96);outline:none}
.exploreVendorShopHeader{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:2px 44px 0 2px}
.exploreVendorShopIdentity{display:grid;gap:4px;min-width:0}.exploreVendorShopEyebrow{color:#bda36d;font-size:8px;font-weight:950;letter-spacing:.18em}.exploreVendorShopIdentity strong{font-family:Georgia,"Times New Roman",serif;color:#f4dfad;font-size:28px;line-height:1.05;text-shadow:0 2px 4px rgba(0,0,0,.38)}.exploreVendorShopIdentity small{color:#c8bdad;font-size:11px;line-height:1.35}
.exploreVendorShopWallet{display:grid;gap:2px;justify-items:end;min-width:125px;padding:10px 12px;border:1px solid rgba(221,182,98,.35);border-radius:12px;background:rgba(73,54,21,.22)}.exploreVendorShopWallet span{color:#e2c77f;font-size:9px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.exploreVendorShopWallet strong{font-family:Georgia,"Times New Roman",serif;font-size:22px;color:#fff1bc}
.exploreVendorShopColumns{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-height:300px}
.exploreVendorShopPane{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;min-height:0;padding:12px;border:1px solid rgba(122,102,148,.38);border-radius:14px;background:rgba(255,255,255,.028)}
.exploreVendorShopPane.shop{border-color:rgba(214,175,92,.44);background:linear-gradient(180deg,rgba(66,47,23,.2),rgba(255,255,255,.026))}
.exploreVendorShopPane.inventory{border-color:rgba(109,131,188,.38);background:linear-gradient(180deg,rgba(26,35,58,.18),rgba(255,255,255,.024))}
.exploreVendorShopPaneHead{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}.exploreVendorShopPaneHead strong{font-size:17px;font-family:Georgia,"Times New Roman",serif;color:#f6e4b0}.exploreVendorShopPaneHead small{color:#ab9e8f;font-size:10px;text-align:right}
.exploreVendorShopGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:start;overflow:auto;padding-right:2px;min-height:0}
.exploreVendorShopEmpty{padding:10px 4px;color:#9f95a5;font-size:11px;line-height:1.4}.exploreVendorShopEmpty.hidden{display:none!important}
.exploreVendorShopSlot{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center;min-height:72px;padding:10px 12px;border:1px solid rgba(120,107,138,.48);border-radius:12px;background:linear-gradient(160deg,rgba(42,34,51,.93),rgba(17,18,24,.96));color:#eee6dd;text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease,background .12s ease}
.exploreVendorShopSlot:hover,.exploreVendorShopSlot:focus-visible{transform:translateY(-1px);border-color:rgba(220,190,119,.76);box-shadow:0 5px 14px rgba(0,0,0,.22),inset 0 0 18px rgba(170,132,72,.08);outline:none}
.exploreVendorShopSlot.selected{border-color:#eed089;box-shadow:0 0 0 1px rgba(238,208,137,.48),0 10px 24px rgba(0,0,0,.24),inset 0 0 22px rgba(228,178,74,.08)}
.exploreVendorShopSlot.equipped{border-color:rgba(120,221,159,.6)}.exploreVendorShopSlot.unaffordable,.exploreVendorShopSlot.unsellable{opacity:.72}
.exploreVendorShopSlotIcon{font-size:28px;line-height:1;display:grid;place-items:center;width:34px;height:34px}
.exploreVendorShopSlotCopy{display:grid;gap:4px;min-width:0}.exploreVendorShopSlotCopy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.exploreVendorShopSlotCopy small{color:#a9a1ad;font-size:8px;line-height:1.35}
.exploreVendorShopSlotBadge{align-self:start;padding:5px 7px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.045);color:#ead8a2;font-size:9px;font-weight:900;letter-spacing:.04em}
.exploreVendorShopSlotTag{position:absolute;left:7px;top:7px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border:1px solid rgba(71,112,54,.55);border-radius:999px;background:rgba(225,240,190,.9);color:#3d652e;font-size:9px;font-weight:950}
.exploreVendorShopDetails{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(250px,.9fr);gap:14px;align-items:start;padding:12px;border:1px solid rgba(121,105,151,.32);border-radius:14px;background:rgba(255,255,255,.026)}
.exploreVendorShopDetailsCopy{display:grid;gap:5px;min-width:0}.exploreVendorShopDetailsEyebrow{color:#bda36d;font-size:8px;font-weight:950;letter-spacing:.18em}.exploreVendorShopDetailsCopy strong{font-family:Georgia,"Times New Roman",serif;color:#f4dfad;font-size:22px;line-height:1.1}.exploreVendorShopItemMeta{color:#a89f8d;font-size:10px;font-weight:700;letter-spacing:.02em}.exploreVendorShopDetailsCopy p{margin:2px 0 0;color:#d1c8bc;font-size:11px;line-height:1.5}
.exploreVendorShopTransaction{display:grid;gap:8px;justify-items:stretch;align-content:start;padding:12px;border:1px solid rgba(221,182,98,.3);border-radius:12px;background:rgba(65,48,20,.16)}
.exploreVendorShopTransaction.inventoryMode{border-color:rgba(113,134,187,.28);background:rgba(32,38,56,.18)}
.exploreVendorShopTransactionLabel{color:#d8bf7d;font-size:9px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.exploreVendorShopQuantityRow{display:grid;grid-template-columns:36px 1fr 36px;gap:8px;align-items:center}.exploreVendorShopQuantityRow .smallButton{margin:0;padding:8px 0}.exploreVendorShopQuantityRow input{width:100%;min-width:0;min-height:34px;padding:0 8px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.04);color:#fff0b7;font:900 16px Georgia,"Times New Roman",serif;text-align:center;outline:none;-moz-appearance:textfield}.exploreVendorShopQuantityRow input::-webkit-inner-spin-button,.exploreVendorShopQuantityRow input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.exploreVendorShopQuantityRow input:focus{border-color:rgba(222,190,112,.72);box-shadow:0 0 0 2px rgba(222,190,112,.12)}.exploreVendorShopQuantityRow input:disabled{opacity:.58}
.exploreVendorShopQtyPresets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.exploreVendorShopQtyPresets .smallButton{margin:0;padding:6px 5px;font-size:8px}.exploreVendorShopQtyPresets .smallButton:disabled{opacity:.42;cursor:not-allowed}
.exploreVendorShopTransaction > .primaryButton,.exploreVendorShopTransaction > .smallButton{margin:0}
.exploreVendorShopTotal{color:#cbbdb1;font-size:10px;line-height:1.35}.exploreVendorShopActionStatus{min-height:32px;color:#8d8590;font-size:10px;line-height:1.35}.exploreVendorShopActionStatus.success{color:#78dda5}.exploreVendorShopActionStatus.error{color:#e18575}
.exploreVendorShopHint{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;color:#7f7587;font-size:9px;font-weight:800}
.exploreVendorShopHint kbd{padding:3px 6px;border:1px solid rgba(255,255,255,.16);border-radius:6px;background:rgba(0,0,0,.26);color:#f0e2bf;font-size:9px;font-weight:900}
@media(max-width:980px){.exploreVendorShopColumns,.exploreVendorShopDetails{grid-template-columns:1fr}.exploreVendorShopGrid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.exploreVendorShopShell{width:calc(100% - 18px);max-height:calc(100% - 16px);padding:12px}.exploreVendorShopHeader{padding-right:38px;align-items:stretch;flex-direction:column}.exploreVendorShopWallet{justify-items:start}.exploreVendorShopGrid{grid-template-columns:1fr}.exploreVendorShopDetailsCopy strong{font-size:20px}.exploreVendorShopPaneHead{align-items:start;flex-direction:column}}

/* Phase 17 — F8 shop-NPC authoring. Shop NPCs are normal friendly NPCs with
   a persistent vendorKey, so they can still have dialogue and quests. */
.worldEditorCreateActions{grid-template-columns:repeat(2,minmax(0,1fr))}
.worldEditorShopCreateButton{border-color:rgba(224,187,93,.48)!important;background:linear-gradient(180deg,rgba(83,62,25,.56),rgba(41,31,21,.68))!important;color:#f1d68b!important}
.worldEditorShopCreateButton:hover,.worldEditorShopCreateButton:focus-visible{border-color:rgba(242,207,113,.78)!important;box-shadow:inset 0 0 16px rgba(214,168,64,.09)}
.worldEditorCreateShopNpcForm{border-color:rgba(215,176,84,.28)!important;background:linear-gradient(155deg,rgba(63,46,20,.2),rgba(5,7,12,.42))!important}
.worldEditorShopBehaviorGrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(120px,.75fr);gap:7px;align-items:end}
.worldEditorShopBehaviorGrid .worldEditorCheckRow{min-height:48px;align-self:stretch}
.worldEditorStockHeader{display:grid;grid-template-columns:18px minmax(0,1fr) 92px;gap:7px;padding:0 7px;color:#8394a8;font-size:8px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
#worldEditorVendorSection{border-color:rgba(210,174,83,.3);background:linear-gradient(155deg,rgba(57,42,19,.1),rgba(255,255,255,.015))}
#worldEditorVendorSection .worldEditorStockRow:has(.worldEditorStockEnabled:checked){border-color:rgba(211,174,86,.38);background:rgba(70,51,21,.18)}
@media(max-width:760px){.worldEditorCreateActions,.worldEditorShopBehaviorGrid{grid-template-columns:1fr}}

/* Phase 18 — merchant polish, generated UI art integration, transaction feedback,
   rarity readability, filters, confirmation, and responsive hardening. */
.exploreVendorShopShell{
  background-image:linear-gradient(145deg,rgba(11,11,17,.82),rgba(8,9,14,.91)),url('/art/ui/shop/shop-frame.png');
  background-position:center;background-repeat:no-repeat;background-size:100% 100%;
  border-color:rgba(229,192,105,.8);box-shadow:0 28px 64px rgba(0,0,0,.62),0 0 0 1px rgba(118,72,178,.16),inset 0 0 42px rgba(95,57,147,.08)
}
.exploreVendorShopHeader{position:relative;z-index:1;padding:5px 48px 2px 5px}
.exploreVendorShopIdentity strong{font-size:clamp(20px,2.4vw,30px);color:#f7e7bd}
.exploreVendorShopWallet{grid-template-columns:30px auto;grid-template-rows:auto auto;column-gap:7px;align-items:center;justify-items:end;min-width:145px;background:linear-gradient(145deg,rgba(65,43,15,.74),rgba(22,18,20,.78));border-color:rgba(224,181,83,.54)}
.exploreVendorShopWallet img{grid-row:1/3;width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}.exploreVendorShopWallet span,.exploreVendorShopWallet strong{grid-column:2}.exploreVendorShopWallet.pulse{animation:shopWalletPulse .58s ease}.exploreVendorShopWallet.gain{box-shadow:0 0 18px rgba(91,219,132,.25),inset 0 0 18px rgba(91,219,132,.09)}.exploreVendorShopWallet.spend{box-shadow:0 0 18px rgba(229,164,70,.25),inset 0 0 18px rgba(229,164,70,.09)}
@keyframes shopWalletPulse{0%{transform:scale(1)}42%{transform:scale(1.055)}100%{transform:scale(1)}}
.exploreVendorShopPane{position:relative;z-index:1;grid-template-rows:auto auto minmax(0,1fr) auto;background:linear-gradient(180deg,rgba(15,16,23,.91),rgba(10,11,16,.93));box-shadow:inset 0 0 24px rgba(0,0,0,.22)}
.exploreVendorShopPane.shop{background:linear-gradient(180deg,rgba(47,34,18,.72),rgba(11,12,17,.93))}.exploreVendorShopPane.inventory{background:linear-gradient(180deg,rgba(24,31,50,.72),rgba(11,12,17,.93))}
.exploreVendorShopFilters{display:flex;gap:5px;overflow-x:auto;padding:1px 0 2px;scrollbar-width:none}.exploreVendorShopFilters::-webkit-scrollbar{display:none}.exploreVendorShopFilters button{flex:0 0 auto;min-height:25px;padding:4px 9px;border:1px solid rgba(125,112,139,.42);border-radius:8px;background:rgba(14,15,21,.76);color:#a99eaa;font:800 8px Georgia,"Times New Roman",serif;letter-spacing:.03em;cursor:pointer}.exploreVendorShopFilters button:hover,.exploreVendorShopFilters button:focus-visible{border-color:rgba(223,190,112,.58);color:#f0dfb8;outline:none}.exploreVendorShopFilters button.active{border-color:rgba(232,195,103,.78);background:linear-gradient(180deg,rgba(102,72,24,.78),rgba(53,39,22,.86));color:#fff0bd;box-shadow:inset 0 0 12px rgba(232,189,90,.08)}
.exploreVendorShopSlot{min-height:76px;border-color:rgba(133,120,146,.5);background:linear-gradient(158deg,rgba(31,29,38,.95),rgba(15,16,22,.96));overflow:hidden}
.exploreVendorShopSlot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.18;background:radial-gradient(circle at 0 50%,rgba(142,96,207,.22),transparent 48%)}
.exploreVendorShopSlotIcon{position:relative;z-index:1;width:44px;height:44px;padding:6px;background-image:linear-gradient(rgba(9,10,15,.22),rgba(9,10,15,.22)),url('/art/ui/shop/item-slot.png');background-size:100% 100%;background-position:center;background-repeat:no-repeat;font-size:24px;filter:drop-shadow(0 3px 7px rgba(0,0,0,.28))}
.exploreVendorShopSlot.selected .exploreVendorShopSlotIcon{background-image:linear-gradient(rgba(9,10,15,.08),rgba(9,10,15,.08)),url('/art/ui/shop/item-slot-selected.png');filter:drop-shadow(0 0 7px rgba(126,91,255,.42))}
.exploreVendorShopSlot.rarity-common{border-left-color:rgba(191,189,188,.72)}.exploreVendorShopSlot.rarity-uncommon{border-left-color:rgba(92,205,112,.8)}.exploreVendorShopSlot.rarity-rare{border-left-color:rgba(80,165,255,.86)}.exploreVendorShopSlot.rarity-epic{border-left-color:rgba(177,91,244,.88)}.exploreVendorShopSlot.rarity-legendary{border-left-color:rgba(248,181,55,.94);box-shadow:inset 2px 0 rgba(248,181,55,.18)}
.exploreVendorShopSlot.selected{border-color:#f0cb73;box-shadow:0 0 0 1px rgba(240,203,115,.38),0 9px 22px rgba(0,0,0,.3),inset 0 0 24px rgba(132,81,217,.10)}
.exploreVendorShopSlot.unaffordable,.exploreVendorShopSlot.unsellable{filter:saturate(.65);opacity:.68}.exploreVendorShopSlot.unaffordable .exploreVendorShopSlotBadge{color:#d7907d}.exploreVendorShopSlot.unsellable .exploreVendorShopSlotBadge{color:#928c97}
.exploreVendorShopSlot.transaction-buy{animation:shopSlotBuyFlash .9s ease}.exploreVendorShopSlot.transaction-sell{animation:shopSlotSellFlash .9s ease}
@keyframes shopSlotBuyFlash{0%{box-shadow:0 0 0 rgba(230,181,68,0)}35%{box-shadow:0 0 28px rgba(230,181,68,.55),inset 0 0 24px rgba(230,181,68,.16)}100%{box-shadow:0 0 0 rgba(230,181,68,0)}}
@keyframes shopSlotSellFlash{0%{box-shadow:0 0 0 rgba(82,218,132,0)}35%{box-shadow:0 0 28px rgba(82,218,132,.5),inset 0 0 24px rgba(82,218,132,.14)}100%{box-shadow:0 0 0 rgba(82,218,132,0)}}
.exploreVendorShopDetails{position:relative;z-index:1;background:linear-gradient(180deg,rgba(13,14,20,.92),rgba(9,10,14,.94));border-color:rgba(174,139,78,.34)}
.exploreVendorShopQuantityRow{position:relative;isolation:isolate;padding:7px 8px;border-radius:12px;overflow:hidden}.exploreVendorShopQuantityRow::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(9,10,15,.78),rgba(9,10,15,.8)),url('/art/ui/shop/quantity-selector.png');background-size:100% 100%;background-position:center;opacity:.96}.exploreVendorShopQuantityRow .smallButton,.exploreVendorShopQuantityRow input{background:rgba(10,11,17,.78);border-color:rgba(222,190,112,.32);color:#fff0b7}
.exploreVendorShopQtyPresets .smallButton.active{border-color:rgba(234,196,104,.7);background:rgba(101,70,23,.68);color:#fff0b7}
.exploreVendorShopTotalPanel{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:9px 12px;border:1px solid rgba(211,175,92,.34);border-radius:10px;overflow:hidden;color:#ead9b0}.exploreVendorShopTotalPanel::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(13,13,18,.78),rgba(13,13,18,.82)),url('/art/ui/shop/transaction-total.png');background-size:100% 100%;background-position:center}.exploreVendorShopTotalPanel>span:first-child{font:800 10px Georgia,"Times New Roman",serif;letter-spacing:.04em}.exploreVendorShopTotalValue{display:flex;align-items:center;gap:5px}.exploreVendorShopTotalValue img{width:21px;height:21px;object-fit:contain}.exploreVendorShopTotalValue strong{font:900 16px Georgia,"Times New Roman",serif;color:#fff0b4}.exploreVendorShopTotalValue em{font-style:normal;color:#c7ab69;font-size:9px;font-weight:900}
#exploreVendorShopActionButton{position:relative;min-height:58px;overflow:hidden;border:0!important;border-radius:10px;background-color:transparent!important;background-position:center!important;background-repeat:no-repeat!important;background-size:100% 100%!important;box-shadow:none!important;color:#fff5cf;font:950 12px Georgia,"Times New Roman",serif;text-shadow:0 2px 4px rgba(0,0,0,.72);letter-spacing:.04em;padding:0 14% 0 70%;text-align:center}
#exploreVendorShopActionButton[data-shop-action="buy"]{background-image:url('/art/ui/shop/buy-button.png')!important}#exploreVendorShopActionButton[data-shop-action="sell"]{background-image:url('/art/ui/shop/sell-button.png')!important}.exploreVendorShopTransaction:not(.inventoryMode) #exploreVendorShopActionButton:disabled{background-image:url('/art/ui/shop/disabled-button.png')!important}.exploreVendorShopTransaction.inventoryMode #exploreVendorShopActionButton:disabled{filter:grayscale(1) brightness(.62);opacity:.72}#exploreVendorShopActionButton:not(:disabled):hover,#exploreVendorShopActionButton:not(:disabled):focus-visible{transform:translateY(-1px);filter:brightness(1.08);outline:2px solid rgba(239,204,112,.45);outline-offset:1px}#exploreVendorShopActionButton.pending{opacity:.72;filter:saturate(.7)}
.exploreVendorShopTransaction.transactionError{animation:shopTransactionError .58s ease}@keyframes shopTransactionError{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.exploreVendorShopGoldFloat{position:absolute;right:44px;top:74px;z-index:6;padding:7px 12px;border:1px solid rgba(222,190,112,.34);border-radius:999px;background:rgba(10,11,16,.9);font:900 13px Georgia,"Times New Roman",serif;pointer-events:none;opacity:0}.exploreVendorShopGoldFloat.hidden{display:none!important}.exploreVendorShopGoldFloat.gain{color:#83e9a7;box-shadow:0 0 15px rgba(74,215,121,.18)}.exploreVendorShopGoldFloat.spend{color:#efb978;box-shadow:0 0 15px rgba(225,157,66,.16)}.exploreVendorShopGoldFloat.animate{animation:shopGoldFloat .95s ease forwards}@keyframes shopGoldFloat{0%{opacity:0;transform:translateY(8px) scale(.94)}22%{opacity:1;transform:translateY(0) scale(1)}72%{opacity:1}100%{opacity:0;transform:translateY(-16px) scale(.98)}}
.exploreVendorSaleConfirm{position:absolute;inset:0;z-index:8;display:grid;place-items:center;border-radius:17px;background:rgba(6,6,10,.64);backdrop-filter:blur(5px)}.exploreVendorSaleConfirm.hidden{display:none!important}.exploreVendorSaleConfirmCard{width:min(440px,calc(100% - 40px));display:grid;gap:9px;padding:18px;border:1px solid rgba(229,184,90,.58);border-radius:15px;background:linear-gradient(160deg,rgba(31,23,20,.98),rgba(13,13,19,.99));box-shadow:0 22px 55px rgba(0,0,0,.55),inset 0 0 26px rgba(121,69,173,.08)}.exploreVendorSaleConfirmCard>strong{font:700 22px Georgia,"Times New Roman",serif;color:#f4dfad}.exploreVendorSaleConfirmCard p{margin:0;color:#c8bdb1;font-size:11px;line-height:1.5}.exploreVendorSaleConfirmActions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}.exploreVendorSaleConfirmActions button{margin:0}
@media(max-width:980px){.exploreVendorShopShell{width:calc(100% - 24px);max-height:calc(100% - 24px);background-size:cover}.exploreVendorShopColumns{min-height:0}.exploreVendorShopPane{min-height:240px}.exploreVendorShopDetails{grid-template-columns:minmax(0,1fr) minmax(230px,.72fr)}}
@media(max-width:760px){.exploreVendorShopShell{width:calc(100% - 10px);max-height:calc(100% - 10px);gap:9px;padding:10px}.exploreVendorShopHeader{padding-right:34px}.exploreVendorShopIdentity strong{font-size:19px}.exploreVendorShopIdentity small{font-size:9px}.exploreVendorShopWallet{min-width:0;justify-items:start;align-self:start}.exploreVendorShopColumns,.exploreVendorShopDetails{grid-template-columns:1fr}.exploreVendorShopPane{min-height:220px;padding:9px}.exploreVendorShopGrid{grid-template-columns:1fr}.exploreVendorShopSlot{min-height:66px;padding:7px 8px}.exploreVendorShopSlotIcon{width:38px;height:38px;font-size:21px}.exploreVendorShopDetailsCopy strong{font-size:18px}.exploreVendorShopDetailsCopy p{font-size:9px}.exploreVendorShopTransaction{padding:9px}.exploreVendorShopGoldFloat{right:18px;top:64px}.exploreVendorShopHint{display:none}}

/* Shop UI recovery hotfix — Phase 18 base + independent pane scrolling +
   corrected BUY/SELL button proportions. This intentionally builds on the
   final Phase 18 stylesheet so NPC interaction/menu styles are preserved. */
.exploreVendorShopPanel{
  overflow:hidden;
  align-items:center;
  justify-items:center;
}
.exploreVendorShopShell{
  width:min(1120px, calc(100% - 42px));
  max-height:min(780px, calc(100% - 48px));
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:14px;
  overflow:hidden;
}
.exploreVendorShopHeader,
.exploreVendorShopDetails{
  flex:0 0 auto;
}
.exploreVendorShopColumns{
  min-height:0;
  align-items:stretch;
  overflow:hidden;
}
.exploreVendorShopPane{
  min-height:0;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  overflow:hidden;
}
.exploreVendorShopPaneHead{
  position:sticky;
  top:0;
  z-index:2;
  background:inherit;
}
#exploreVendorShopStockFilters,
#exploreVendorShopInventoryFilters{
  position:sticky;
  top:0;
  z-index:2;
  background:inherit;
  padding-bottom:6px;
}
.exploreVendorShopGrid,
#exploreVendorShopStockGrid,
#exploreVendorShopInventoryGrid{
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  align-content:start;
  scrollbar-width:thin;
  scrollbar-color:rgba(214,176,92,.52) rgba(255,255,255,.06);
  padding-right:6px;
}
.exploreVendorShopGrid::-webkit-scrollbar,
#exploreVendorShopStockGrid::-webkit-scrollbar,
#exploreVendorShopInventoryGrid::-webkit-scrollbar{
  width:10px;
}
.exploreVendorShopGrid::-webkit-scrollbar-track,
#exploreVendorShopStockGrid::-webkit-scrollbar-track,
#exploreVendorShopInventoryGrid::-webkit-scrollbar-track{
  background:rgba(255,255,255,.05);
  border-radius:999px;
}
.exploreVendorShopGrid::-webkit-scrollbar-thumb,
#exploreVendorShopStockGrid::-webkit-scrollbar-thumb,
#exploreVendorShopInventoryGrid::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(230,198,124,.82), rgba(145,97,49,.88));
  border-radius:999px;
  border:2px solid rgba(14,15,20,.35);
}
.exploreVendorShopEmpty{margin-top:8px}

/* Keep the final transaction artwork from stretching across the whole panel. */
#exploreVendorShopTransaction{align-items:center}
#exploreVendorShopActionButton{
  display:block;
  align-self:center;
  justify-self:center;
  width:min(100%, 360px);
  min-width:260px;
  height:74px;
  max-height:74px;
  margin:6px auto 0;
  padding:0 28px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
  line-height:1;
}
#exploreVendorShopActionButton:not(:disabled):hover,
#exploreVendorShopActionButton:not(:disabled):focus-visible{transform:translateY(-1px)}
#exploreVendorShopActionButton.pending{filter:saturate(.9) brightness(.98)}

@media (max-width:980px){
  .exploreVendorShopShell{
    max-height:calc(100% - 24px);
    overflow-y:auto;
  }
  .exploreVendorShopColumns{
    grid-template-columns:1fr;
    overflow:visible;
  }
  .exploreVendorShopPane{max-height:min(36dvh,360px)}
  .exploreVendorShopDetails{
    position:sticky;
    bottom:0;
    z-index:3;
  }
}
@media (max-width:720px){
  #exploreVendorShopActionButton{
    width:min(100%,320px);
    min-width:0;
    height:66px;
    max-height:66px;
  }
}

/* Shop ratio / sizing refinement hotfix — build on the current recovered Phase 18
   stylesheet without reverting any earlier changes. The goal is to dedicate more
   of the modal to the item panes, tighten oversized controls slightly, and keep
   the overall shop feeling wider and less vertically bottom-heavy. */
.exploreVendorShopShell{
  width:min(1160px, calc(100% - 28px));
  height:min(820px, calc(100% - 32px));
  max-height:none;
  grid-template-rows:auto minmax(330px, 1.28fr) minmax(220px, .92fr);
  gap:12px;
}
.exploreVendorShopColumns{
  min-height:330px;
  gap:12px;
}
.exploreVendorShopPane{
  padding:10px;
}
.exploreVendorShopGrid,
#exploreVendorShopStockGrid,
#exploreVendorShopInventoryGrid{
  gap:8px;
  padding-right:8px;
}
.exploreVendorShopSlot{
  min-height:64px;
  padding:8px 10px;
}
.exploreVendorShopSlotIcon{
  width:38px;
  height:38px;
  font-size:23px;
}
.exploreVendorShopSlotCopy strong{
  font-size:11px;
}
.exploreVendorShopSlotCopy small{
  font-size:8px;
}
.exploreVendorShopDetails{
  grid-template-columns:minmax(0,1.55fr) minmax(300px,.8fr);
  padding:10px 12px;
  gap:12px;
}
.exploreVendorShopDetailsCopy strong{
  font-size:19px;
}
.exploreVendorShopDetailsCopy p{
  font-size:10px;
  line-height:1.45;
}
.exploreVendorShopTransaction{
  padding:10px 12px;
  gap:7px;
}
.exploreVendorShopQuantityRow input{
  min-height:32px;
  font-size:15px;
}
.exploreVendorShopQtyPresets{
  gap:5px;
}
.exploreVendorShopQtyPresets .smallButton{
  padding:5px 4px;
  min-height:34px;
  font-size:8px;
}
#exploreVendorShopActionButton{
  width:min(100%, 332px);
  min-width:220px;
  height:68px;
  max-height:68px;
  margin:4px auto 0;
  padding:0 22px;
}
.exploreVendorShopHint{
  font-size:8px;
}
@media (max-width: 980px){
  .exploreVendorShopShell{
    width:calc(100% - 18px);
    height:auto;
    max-height:calc(100% - 18px);
    grid-template-rows:auto minmax(0,1fr) auto;
  }
  .exploreVendorShopColumns{
    min-height:0;
  }
  .exploreVendorShopDetails{
    grid-template-columns:minmax(0,1fr) minmax(260px,.84fr);
  }
}
@media (max-width: 760px){
  .exploreVendorShopShell{
    width:calc(100% - 10px);
    height:auto;
    max-height:calc(100% - 10px);
  }
  .exploreVendorShopColumns,
  .exploreVendorShopDetails{
    grid-template-columns:1fr;
  }
  .exploreVendorShopPane{
    max-height:min(38dvh, 380px);
  }
  #exploreVendorShopActionButton{
    width:min(100%, 300px);
    min-width:0;
    height:62px;
    max-height:62px;
  }
}

/* Phase 19 — dedicated Runic Core UI. One owned Rune may be Active at a time. */
.exploreMenuPrompts{gap:6px}
.exploreMenuPromptButton{width:108px;height:38px}
.exploreMenuPromptButton.runicCorePrompt{
  width:118px;height:38px;display:grid;grid-template-columns:28px 1fr;align-items:center;gap:6px;padding:4px 9px;
  border:1px solid rgba(117,199,255,.5);border-radius:10px;background:linear-gradient(145deg,rgba(21,25,43,.96),rgba(25,16,39,.96));
  box-shadow:0 5px 13px rgba(0,0,0,.38),inset 0 0 18px rgba(91,143,255,.08);color:#e8e8ff;filter:none
}
.exploreMenuPromptButton.runicCorePrompt:hover,.exploreMenuPromptButton.runicCorePrompt:focus-visible{transform:translateY(-2px);border-color:rgba(112,213,255,.8);box-shadow:0 7px 16px rgba(0,0,0,.42),0 0 16px rgba(90,132,255,.16);outline:none}
.exploreRunicPromptKey{display:grid;place-items:center;width:25px;height:25px;border:1px solid rgba(193,226,255,.7);border-radius:6px;background:rgba(7,10,18,.84);font:900 12px ui-monospace,monospace;color:#dff4ff;box-shadow:inset 0 0 10px rgba(89,178,255,.15)}
.exploreRunicPromptLabel{font:800 10px Georgia,"Times New Roman",serif;color:#e7dcff;white-space:nowrap}

.activeRuneHud{
  --rune-color:#a06cff;--rune-accent:#e1c4ff;position:absolute;right:126px;bottom:70px;z-index:36;width:132px;min-height:54px;
  display:grid;grid-template-columns:38px minmax(0,1fr);gap:8px;align-items:center;padding:7px 9px;border:1px solid color-mix(in srgb,var(--rune-color) 62%,#fff 8%);border-radius:14px;
  background:linear-gradient(145deg,rgba(16,17,26,.96),rgba(10,10,17,.97));color:#f5edff;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.34),inset 0 0 20px color-mix(in srgb,var(--rune-color) 12%,transparent)
}
.activeRuneHud.hidden{display:none!important}.activeRuneHud:hover,.activeRuneHud:focus-visible{transform:translateY(-2px);border-color:var(--rune-accent);outline:none;box-shadow:0 10px 25px rgba(0,0,0,.4),0 0 16px color-mix(in srgb,var(--rune-color) 24%,transparent)}
.activeRuneHudIcon{display:grid;place-items:center;width:36px;height:36px;border:1px solid color-mix(in srgb,var(--rune-color) 72%,#fff 10%);border-radius:50%;background:radial-gradient(circle,var(--rune-color),rgba(11,11,18,.92) 72%);font-size:20px;box-shadow:0 0 15px color-mix(in srgb,var(--rune-color) 30%,transparent)}
.activeRuneHudCopy{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 5px;align-items:center;min-width:0}.activeRuneHudCopy small{grid-column:1/-1;color:#9da4b6;font-size:6px;font-weight:900;letter-spacing:.13em}.activeRuneHudCopy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 9px Georgia,"Times New Roman",serif}.activeRuneHudCopy i{font-style:normal;color:var(--rune-accent);font-size:7px;font-weight:900}

.inventoryRunicCoreButton{display:inline-flex;align-items:center;gap:5px;margin-left:auto;padding:2px 7px;border:1px solid rgba(86,85,151,.36);border-radius:7px;background:rgba(69,55,111,.12);color:#49345f;font:800 7px Georgia,"Times New Roman",serif;cursor:pointer}.inventoryRunicCoreButton kbd{pointer-events:none}.inventoryRunicCoreButton:hover,.inventoryRunicCoreButton:focus-visible{border-color:rgba(104,74,168,.65);background:rgba(94,64,148,.18);outline:none}

.runicCorePanel{position:absolute;inset:0;z-index:64;display:grid;place-items:center;pointer-events:none}.runicCorePanel.hidden{display:none!important}.runicCoreDimmer{position:absolute;inset:0;background:rgba(4,5,11,.7);backdrop-filter:blur(4px);pointer-events:auto}
.runicCoreShell{position:relative;z-index:1;width:min(1130px,calc(100% - 28px));height:min(760px,calc(100% - 28px));display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;padding:14px;border:1px solid rgba(207,168,91,.76);border-radius:18px;background:radial-gradient(circle at 50% 36%,rgba(55,39,89,.22),transparent 40%),linear-gradient(150deg,rgba(15,19,31,.985),rgba(7,9,16,.992));box-shadow:0 24px 54px rgba(0,0,0,.58),inset 0 0 0 1px rgba(255,236,177,.045),inset 0 0 44px rgba(95,62,147,.08);color:#f4ecdf;pointer-events:auto;overflow:hidden}
.runicCoreShell::before{content:"";position:absolute;inset:6px;border:1px solid rgba(109,84,145,.32);border-radius:13px;pointer-events:none}.runicCoreClose{position:absolute;right:13px;top:13px;z-index:5;width:31px;height:31px;border:1px solid rgba(218,179,93,.55);border-radius:50%;background:rgba(12,12,19,.94);color:#efd89e;font-size:16px;font-weight:900;cursor:pointer}.runicCoreClose:hover,.runicCoreClose:focus-visible{border-color:#ffd785;background:rgba(52,38,24,.98);outline:none}
.runicCoreHeader{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;min-height:54px;padding:4px 46px 7px 5px;border-bottom:1px solid rgba(195,158,87,.22)}.runicCoreHeaderSigil{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(130,103,197,.55);border-radius:50%;background:radial-gradient(circle,rgba(117,92,200,.36),rgba(12,12,21,.2) 70%);color:#d9c7ff;font-size:25px;box-shadow:0 0 18px rgba(133,89,224,.15)}.runicCoreHeader>div:nth-child(2){display:grid;gap:1px}.runicCoreHeader>div:nth-child(2)>span{color:#b89558;font-size:7px;font-weight:950;letter-spacing:.18em}.runicCoreHeader>div:nth-child(2)>strong{font:700 27px Georgia,"Times New Roman",serif;color:#f5e1af;line-height:1}.runicCoreHeader>div:nth-child(2)>small{color:#a69cad;font-size:9px}.runicCoreEssenceBadge{display:grid!important;grid-template-columns:auto auto!important;gap:2px 9px!important;align-items:center;padding:8px 11px;border:1px solid rgba(102,133,194,.32);border-radius:10px;background:rgba(28,35,55,.42)}.runicCoreEssenceBadge>span{grid-column:1/-1;color:#8ca6d0!important;font-size:6px!important;font-weight:950!important;letter-spacing:.14em!important}.runicCoreEssenceBadge>strong{grid-column:1/-1;color:#d8efff;font:800 15px Georgia,"Times New Roman",serif}.runicCoreEssenceBadge b{font:inherit;color:#fff}

.runicCoreBody{display:grid;grid-template-columns:minmax(220px,.78fr) minmax(300px,1.1fr) minmax(280px,.96fr);gap:10px;min-height:0}.runicOwnedPanel,.runicFocusPanel,.runicDetailsPanel{position:relative;min-height:0;border:1px solid rgba(105,98,135,.42);border-radius:13px;background:linear-gradient(165deg,rgba(25,28,41,.94),rgba(9,11,18,.96));overflow:hidden}.runicOwnedPanel,.runicDetailsPanel{display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;padding:10px}.runicDetailsPanel{grid-template-rows:auto auto auto minmax(0,1fr)}
.runicSectionHead,.runicSubHead{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}.runicSectionHead strong{font:700 15px Georgia,"Times New Roman",serif;color:#f0dfb5}.runicSectionHead small,.runicSubHead small{color:#8e8797;font-size:7px;text-align:right}.runicSubHead strong{font:700 11px Georgia,"Times New Roman",serif;color:#e7d7ad}
.runicOwnedList{display:grid;gap:7px;align-content:start;overflow:auto;padding-right:3px;scrollbar-width:thin;scrollbar-color:rgba(149,111,197,.45) rgba(255,255,255,.04)}.runicOwnedRune{--rune-color:#9d70e0;--rune-accent:#ead4ff;display:grid;grid-template-columns:43px minmax(0,1fr) auto;gap:8px;align-items:center;min-height:61px;padding:7px 9px;border:1px solid rgba(95,86,119,.42);border-radius:10px;background:rgba(15,17,25,.77);color:#ece5f2;text-align:left;cursor:pointer}.runicOwnedRune:hover,.runicOwnedRune:focus-visible{border-color:color-mix(in srgb,var(--rune-color) 65%,#fff 10%);outline:none}.runicOwnedRune.selected{border-color:var(--rune-accent);box-shadow:inset 0 0 17px color-mix(in srgb,var(--rune-color) 12%,transparent),0 0 11px color-mix(in srgb,var(--rune-color) 12%,transparent)}.runicOwnedRune.active{background:linear-gradient(145deg,color-mix(in srgb,var(--rune-color) 14%,rgba(18,19,27,.94)),rgba(11,12,18,.92))}.runicOwnedRune.locked{opacity:.48;filter:saturate(.35)}.runicOwnedIcon{display:grid;place-items:center;width:39px;height:39px;border:1px solid color-mix(in srgb,var(--rune-color) 62%,#fff 8%);border-radius:10px;background:radial-gradient(circle,color-mix(in srgb,var(--rune-color) 45%,#111 55%),rgba(10,11,17,.95));font-size:21px}.runicOwnedRune>div{display:grid;gap:2px;min-width:0}.runicOwnedRune>div strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 11px Georgia,"Times New Roman",serif}.runicOwnedRune>div small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#9992a1;font-size:7px}.runicOwnedRune>b{padding:3px 5px;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#9f97aa;font-size:6px;letter-spacing:.05em}.runicOwnedRune.active>b{border-color:color-mix(in srgb,var(--rune-color) 60%,#fff 5%);color:var(--rune-accent)}

.runicFocusPanel{display:grid;place-items:center;align-content:center;gap:6px;padding:18px;text-align:center;isolation:isolate}.runicCoreFocusGlow{--rune-color:#9d70e0;--rune-accent:#ead4ff;position:absolute;inset:7%;z-index:-1;background:radial-gradient(circle,color-mix(in srgb,var(--rune-color) 22%,transparent),transparent 62%);filter:blur(8px)}.runicCoreLargeIcon{--rune-color:#9d70e0;--rune-accent:#ead4ff;display:grid;place-items:center;width:142px;height:142px;margin-bottom:5px;border:2px solid color-mix(in srgb,var(--rune-color) 66%,#fff 12%);border-radius:34px;transform:rotate(45deg);background:radial-gradient(circle at 48% 42%,color-mix(in srgb,var(--rune-color) 42%,#191724 58%),rgba(10,11,18,.98) 68%);box-shadow:0 0 0 7px rgba(255,255,255,.02),0 0 34px color-mix(in srgb,var(--rune-color) 22%,transparent),inset 0 0 28px color-mix(in srgb,var(--rune-color) 18%,transparent);font-size:69px;text-shadow:0 0 24px var(--rune-color)}.runicCoreLargeIcon::first-letter{transform:rotate(-45deg)}.runicCoreLargeIcon{line-height:1}.runicCoreSelectedState{margin-top:4px;color:#aca4b6;font-size:7px;font-weight:950;letter-spacing:.16em}.runicCoreSelectedState.active{color:#f1ca72}.runicCoreSelectedState.inactive{color:#9ab3d9}.runicCoreSelectedState.locked{color:#7f7886}.runicCoreSelectedName{font:700 24px Georgia,"Times New Roman",serif;color:#f4ddb0}.runicCoreSelectedRank{color:#d9c8e8;font:800 12px Georgia,"Times New Roman",serif}.runicCoreRole{color:#a49bac;font-size:8px}.runicCoreTagline{max-width:88%;margin:9px 0 0;padding-top:9px;border-top:1px solid rgba(255,255,255,.08);color:#afa2bc;font:italic 10px Georgia,"Times New Roman",serif}

.runicCoreEffects{display:grid;gap:6px}.runicEffect{display:grid;grid-template-columns:28px minmax(0,1fr);gap:7px;align-items:center;padding:6px 7px;border:1px solid rgba(255,255,255,.07);border-radius:8px;background:rgba(255,255,255,.025)}.runicEffect>span{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.04);font-size:14px}.runicEffect>div{display:grid;gap:1px}.runicEffect b{font-size:7px;letter-spacing:.09em}.runicEffect small{color:#b3acb8;font-size:7.5px;line-height:1.28}.runicEffect.offense b{color:#ff9b79}.runicEffect.sustain b{color:#85e49a}.runicEffect.tempo b{color:#82cffa}.runicEffect.identity b{color:#d2a7ff}.runicNextLevelBlock{display:grid;gap:6px;padding-top:7px;border-top:1px solid rgba(255,255,255,.07)}.runicCoreNextStats{display:flex;gap:5px;flex-wrap:wrap;align-content:start}.runicCoreNextStats span,.runicCoreNextStats small{padding:4px 6px;border:1px solid rgba(92,126,174,.18);border-radius:6px;background:rgba(55,78,111,.12);color:#aab8c8;font-size:7px}.runicCoreNextStats span b{color:#7fdda0}.runicCoreActions{display:grid;grid-template-columns:1fr auto 1fr;gap:7px;align-items:center;align-self:end;margin-top:auto;padding-top:7px;border-top:1px solid rgba(255,255,255,.07)}.runicCoreAction{min-height:34px;padding:6px 8px;border:1px solid rgba(130,105,171,.55);border-radius:8px;background:linear-gradient(180deg,rgba(91,63,133,.94),rgba(53,38,78,.96));color:#f5eaff;font:850 9px Georgia,"Times New Roman",serif;cursor:pointer}.runicCoreAction.upgrade{border-color:rgba(192,146,58,.62);background:linear-gradient(180deg,rgba(127,86,26,.95),rgba(78,50,19,.97));color:#fff0bd}.runicCoreAction.active{border-color:rgba(75,151,102,.55);background:rgba(44,85,58,.42);color:#a8e4b6}.runicCoreAction:disabled{opacity:.52;cursor:not-allowed}.runicUpgradeCost{display:grid;justify-items:center;gap:1px;min-width:72px}.runicUpgradeCost span{color:#8e8796;font-size:6px;font-weight:900;letter-spacing:.08em}.runicUpgradeCost strong{color:#b9dcff;font-size:10px}.runicCoreActionStatus{grid-column:1/-1;min-height:18px;color:#908798;font-size:7px;line-height:1.3;text-align:center}.runicCoreActionStatus.success{color:#7bd599}.runicCoreActionStatus.error{color:#e88779}

.runicCoreMilestone{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(190px,.7fr) minmax(220px,.9fr);gap:12px;align-items:center;padding:9px 12px;border:1px solid rgba(171,133,71,.38);border-radius:12px;background:linear-gradient(90deg,rgba(42,31,22,.46),rgba(22,22,38,.56));position:relative}.runicMilestoneCopy,.runicSchoolGuide{display:grid;gap:2px}.runicMilestoneCopy>span,.runicSchoolGuide>span{color:#b7955c;font-size:6px;font-weight:950;letter-spacing:.14em}.runicMilestoneCopy>strong,.runicSchoolGuide>strong{font:700 13px Georgia,"Times New Roman",serif;color:#f1dca8}.runicMilestoneCopy>small,.runicSchoolGuide>small{color:#9b929f;font-size:7.5px;line-height:1.3}.runicMilestoneProgressWrap{display:grid;gap:4px}.runicMilestoneProgress{height:8px;overflow:hidden;border:1px solid rgba(255,255,255,.11);border-radius:999px;background:rgba(8,9,15,.84)}.runicMilestoneProgress i{display:block;width:100%;height:100%;transform-origin:left center;transform:scaleX(0);transition:transform .2s ease}.runicMilestoneProgressWrap>strong{color:#d9c7e8;font-size:8px;text-align:center}.runicSchoolGuide{padding-left:10px;border-left:1px solid rgba(255,255,255,.08)}.runicCoreFooterHint{position:absolute;right:11px;bottom:7px;display:flex;gap:5px;align-items:center;color:#716b77;font-size:6px}.runicCoreFooterHint kbd{padding:2px 4px;border:1px solid rgba(255,255,255,.13);border-radius:5px;background:rgba(0,0,0,.28);color:#d8d0dc;font:900 6px ui-monospace,monospace}

@media(max-width:980px){
  .exploreMenuPromptButton{width:96px}.exploreMenuPromptButton.runicCorePrompt{width:104px}.activeRuneHud{right:104px;width:116px}
  .runicCoreShell{width:calc(100% - 16px);height:calc(100% - 16px);padding:10px}.runicCoreBody{grid-template-columns:minmax(185px,.72fr) minmax(250px,1fr) minmax(240px,.9fr);gap:7px}.runicCoreLargeIcon{width:116px;height:116px;font-size:56px}.runicOwnedRune{min-height:54px}.runicCoreMilestone{grid-template-columns:1.15fr .7fr .9fr}
}
@media(max-width:760px){
  .exploreMenuPrompts{right:7px;bottom:7px;gap:3px}.exploreMenuPromptButton{width:82px;height:32px}.exploreMenuPromptButton.runicCorePrompt{width:92px;height:32px;padding:3px 6px;grid-template-columns:23px 1fr}.exploreRunicPromptKey{width:21px;height:21px;font-size:9px}.exploreRunicPromptLabel{font-size:8px}.activeRuneHud{right:98px;bottom:46px;width:108px;min-height:45px;padding:5px 7px}.activeRuneHudIcon{width:31px;height:31px;font-size:17px}.activeRuneHudCopy strong{font-size:8px}
  .runicCoreShell{overflow:auto;display:block}.runicCoreHeader{grid-template-columns:auto minmax(0,1fr);padding-right:40px}.runicCoreEssenceBadge{grid-column:1/-1;justify-self:start}.runicCoreBody{display:grid;grid-template-columns:1fr;overflow:visible}.runicOwnedPanel,.runicFocusPanel,.runicDetailsPanel{min-height:260px;margin-bottom:8px}.runicOwnedPanel{min-height:220px}.runicCoreMilestone{grid-template-columns:1fr;margin-top:8px}.runicSchoolGuide{padding-left:0;padding-top:7px;border-left:0;border-top:1px solid rgba(255,255,255,.08)}.runicCoreFooterHint{display:none}
}
/* Keep the Rune glyph upright; the surrounding frame carries the diamond language. */
.runicCoreLargeIcon{transform:none;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);border-radius:22px}
/* Phase 19 HUD spacing: keep I/R/C clear of the circular combat dock and Z slot. */
.exploreMenuPromptButton{width:92px;height:34px}
.exploreMenuPromptButton.runicCorePrompt{width:104px;height:34px}
@media(max-width:1100px){
  .exploreMenuPrompts{right:118px;bottom:98px}
  .activeRuneHud{right:14px;bottom:158px}
}
@media(max-width:760px){
  .exploreMenuPrompts{right:98px;bottom:78px}
  .exploreMenuPromptButton{width:76px;height:30px}
  .exploreMenuPromptButton.runicCorePrompt{width:86px;height:30px}
  .activeRuneHud{display:none!important}
}

/* Phase 20 — Rune progression readability. */
.runicEffect.clear b{color:#f2c86f}.runicEffect.boss b{color:#d695ff}
.runicEffect.clear>span{background:rgba(142,103,40,.13)}.runicEffect.boss>span{background:rgba(107,65,143,.14)}
.runicEffect small{font-size:7.3px;line-height:1.34}
.runicCoreNextStats{max-height:82px;overflow:auto;padding-right:2px;align-content:start}
.runicCoreNextStats span{line-height:1.25}

/* Phase 21 — Spellbook UI. Dedicated B screen for learned magic + loadout preparation. */
.exploreMenuPromptButton.spellbookPrompt{
  width:104px;height:34px;display:grid;grid-template-columns:25px minmax(0,1fr);gap:6px;align-items:center;padding:4px 8px;
  border:1px solid rgba(143,111,221,.48);border-radius:9px;background:linear-gradient(180deg,rgba(34,26,55,.92),rgba(15,15,27,.95));
  box-shadow:0 6px 14px rgba(0,0,0,.34);color:#eee4ff;
}
.exploreMenuPromptButton.spellbookPrompt:hover,.exploreMenuPromptButton.spellbookPrompt:focus-visible{transform:translateY(-2px);border-color:rgba(183,143,255,.82);box-shadow:0 7px 16px rgba(0,0,0,.42),0 0 16px rgba(142,95,234,.17);outline:none}
.exploreSpellbookPromptKey{display:grid;place-items:center;width:25px;height:25px;border:1px solid rgba(222,203,255,.68);border-radius:6px;background:rgba(8,7,16,.86);font:900 12px ui-monospace,monospace;color:#f2e8ff;box-shadow:inset 0 0 10px rgba(157,105,255,.16)}
.exploreSpellbookPromptLabel{font:800 10px Georgia,"Times New Roman",serif;color:#eadfff;white-space:nowrap}
.inventorySpellbookButton{border-color:rgba(116,77,172,.38)!important;background:rgba(102,70,151,.08)!important}

.spellbookPanel{position:absolute;inset:0;z-index:64;display:grid;place-items:center;pointer-events:none}.spellbookPanel.hidden{display:none!important}
.spellbookDimmer{position:absolute;inset:0;background:rgba(3,5,12,.72);backdrop-filter:blur(4px);pointer-events:auto}
.spellbookShell{
  position:relative;z-index:1;width:min(1180px,calc(100% - 26px));height:min(770px,calc(100% - 26px));display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;
  padding:14px;border:1px solid rgba(210,171,91,.78);border-radius:18px;background:
    radial-gradient(circle at 50% 0,rgba(97,69,176,.20),transparent 29%),
    linear-gradient(145deg,rgba(13,18,32,.992),rgba(7,9,17,.996));
  box-shadow:0 25px 58px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,235,174,.04);color:#ece7f2;pointer-events:auto;overflow:hidden
}
.spellbookShell::before{content:"";position:absolute;inset:7px;border:1px solid rgba(105,77,143,.32);border-radius:12px;pointer-events:none}
.spellbookClose{position:absolute;right:13px;top:12px;z-index:5;width:31px;height:31px;border:1px solid rgba(214,178,95,.56);border-radius:50%;background:rgba(11,13,22,.92);color:#f1d99e;font-size:17px;font-weight:900;cursor:pointer}
.spellbookClose:hover,.spellbookClose:focus-visible{background:rgba(49,36,70,.96);outline:2px solid rgba(173,125,249,.45);outline-offset:2px}
.spellbookHeader{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:4px 48px 10px 6px;border-bottom:1px solid rgba(217,176,91,.25)}
.spellbookTitleBlock{display:grid;gap:2px}.spellbookTitleBlock>span{color:#b99b6d;font-size:7px;font-weight:950;letter-spacing:.18em}.spellbookTitleBlock>strong{font:700 30px Georgia,"Times New Roman",serif;color:#f5dfad;line-height:1}.spellbookTitleBlock>small{color:#aaa2b3;font-size:9px}
.spellbookDiscovery{display:grid;justify-items:end;gap:2px;padding:7px 11px;border:1px solid rgba(121,93,164,.25);border-radius:10px;background:rgba(33,27,51,.36)}.spellbookDiscovery>span{color:#9c8dac;font-size:6px;font-weight:900;letter-spacing:.14em}.spellbookDiscovery>strong{font:700 17px Georgia,"Times New Roman",serif;color:#e8d9ff}.spellbookDiscovery>small{color:#7f8c9d;font-size:7px}.spellbookDiscovery>small.success{color:#76d49a}.spellbookDiscovery>small.error{color:#e67f73}.spellbookDiscovery>small.dirty{color:#e1bd70}

.spellbookBody{position:relative;z-index:1;display:grid;grid-template-columns:170px minmax(0,1fr) 340px;gap:10px;min-height:0;overflow:hidden}
.spellbookFilters,.spellbookLibrary,.spellbookDetails{min-height:0;border:1px solid rgba(107,91,135,.34);border-radius:13px;background:linear-gradient(180deg,rgba(16,21,37,.88),rgba(9,12,21,.92));box-shadow:inset 0 0 20px rgba(0,0,0,.18)}
.spellbookFilters{display:flex;flex-direction:column;gap:6px;padding:10px;overflow:auto}
.spellbookFilters>button{display:grid;grid-template-columns:25px minmax(0,1fr);gap:7px;align-items:center;min-height:38px;padding:6px 8px;border:1px solid rgba(94,86,113,.35);border-radius:9px;background:rgba(255,255,255,.025);color:#c9c2d4;text-align:left;font:800 9px Georgia,"Times New Roman",serif;cursor:pointer}.spellbookFilters>button b{display:grid;place-items:center;font-size:15px}.spellbookFilters>button:hover,.spellbookFilters>button:focus-visible,.spellbookFilters>button.active{border-color:rgba(223,183,92,.68);background:linear-gradient(90deg,rgba(119,83,30,.32),rgba(71,50,106,.18));color:#f5e3b6;outline:none}.spellbookFilterLore{margin-top:auto;padding:9px;border-top:1px solid rgba(255,255,255,.07)}.spellbookFilterLore span{color:#8e7aa6;font-size:6px;font-weight:950;letter-spacing:.12em}.spellbookFilterLore p{margin:4px 0 0;color:#837c8d;font:italic 8px Georgia,"Times New Roman",serif;line-height:1.35}

.spellbookLibrary{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;padding:10px;overflow:hidden}
.spellbookSectionHead{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.07)}.spellbookSectionHead>div{display:grid;gap:1px}.spellbookSectionHead span{color:#9683aa;font-size:6px;font-weight:950;letter-spacing:.13em}.spellbookSectionHead strong{font:700 17px Georgia,"Times New Roman",serif;color:#f1e2c2}.spellbookSectionHead>small{color:#888090;font-size:7px}
.spellbookGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-content:start;overflow-y:auto;overflow-x:hidden;padding:1px 4px 2px 1px;scrollbar-width:thin;scrollbar-color:rgba(195,158,85,.52) rgba(255,255,255,.04)}
.spellbookCard{--school:#9174d4;position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:1fr auto;gap:4px 9px;min-height:82px;padding:9px 10px;border:1px solid color-mix(in srgb,var(--school) 38%,#6c6578);border-radius:10px;background:linear-gradient(145deg,rgba(28,29,42,.95),rgba(13,15,24,.98));color:#e8e1ed;text-align:left;cursor:pointer;overflow:hidden;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}.spellbookCard.school-fire{--school:#ef774f}.spellbookCard.school-frost{--school:#6ebcff}.spellbookCard.school-void{--school:#a879f4}.spellbookCard.school-restoration{--school:#6ad584}.spellbookCard.school-conjuring{--school:#d3a85c}.spellbookCard.school-universal{--school:#a7b7cc}.spellbookCard:hover,.spellbookCard:focus-visible{transform:translateY(-1px);border-color:color-mix(in srgb,var(--school) 72%,#fff 12%);outline:none}.spellbookCard.selected{border-color:#f0ce82;box-shadow:0 0 0 1px rgba(240,206,130,.34),inset 0 0 18px color-mix(in srgb,var(--school) 10%,transparent)}.spellbookCard.locked{opacity:.64;filter:saturate(.55)}.spellbookCard.equipped::after{content:"";position:absolute;inset:0;border:1px solid rgba(105,221,145,.45);border-radius:9px;pointer-events:none}
.spellbookCardIcon{grid-row:1/span 2;display:grid;place-items:center;width:46px;height:46px;align-self:center;border:1px solid color-mix(in srgb,var(--school) 52%,#fff 5%);border-radius:9px;background:radial-gradient(circle,color-mix(in srgb,var(--school) 30%,transparent),rgba(8,10,17,.92) 72%);font-size:25px;box-shadow:inset 0 0 15px color-mix(in srgb,var(--school) 11%,transparent)}.spellbookCardCopy{display:grid;gap:2px;min-width:0}.spellbookCardCopy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 12px Georgia,"Times New Roman",serif}.spellbookCardCopy small{color:#8f8997;font-size:7px}.spellbookCardState{justify-self:start;padding:2px 6px;border:1px solid rgba(99,175,119,.36);border-radius:999px;background:rgba(63,123,78,.14);color:#91d7a2;font-size:6px;font-weight:900;letter-spacing:.04em}.spellbookCard.locked .spellbookCardState{border-color:rgba(118,108,130,.25);background:rgba(85,79,93,.12);color:#8b8490}.spellbookEmpty{padding:18px;text-align:center;color:#867f8c;font-size:9px}.spellbookEmpty.hidden{display:none!important}

.spellbookDetails{display:flex;flex-direction:column;gap:8px;padding:11px;overflow:auto}
.spellbookDetailTop{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;align-items:center}.spellbookDetailIcon{--school:#9174d4;display:grid;place-items:center;width:70px;height:70px;border:1px solid rgba(210,174,91,.5);border-radius:12px;background:radial-gradient(circle at 45% 35%,rgba(90,119,255,.28),rgba(12,15,25,.96) 69%);font-size:40px;box-shadow:inset 0 0 24px rgba(119,92,194,.13)}.spellbookDetailTop>div:last-child{display:grid;gap:2px;min-width:0}.spellbookDetailState{color:#8d8498;font-size:6px;font-weight:950;letter-spacing:.14em}.spellbookDetailState.learned{color:#83d5a0}.spellbookDetailState.equipped{color:#f0d187}.spellbookDetailState.locked{color:#a2868b}.spellbookDetailName{font:700 22px Georgia,"Times New Roman",serif;color:#f1dfb8;line-height:1.05}.spellbookDetailSchool{color:#968e9c;font-size:8px}
.spellbookDetailTags{display:flex;gap:5px;flex-wrap:wrap}.spellbookDetailTags span{padding:3px 7px;border:1px solid rgba(124,105,160,.3);border-radius:999px;background:rgba(83,61,118,.13);color:#b9a9ce;font-size:6px;font-weight:850}
.spellbookDetailStats{display:grid;gap:4px;padding:7px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}.spellbookDetailStat{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:6px;align-items:center;min-height:24px;padding:3px 4px}.spellbookDetailStat>span{color:#dbb968;font-size:12px}.spellbookDetailStat small{color:#9d95a4;font-size:7px}.spellbookDetailStat strong{color:#e7e0ea;font-size:8px;text-align:right}.spellbookDetailStat em{grid-column:2/-1;color:#77717e;font-size:6px;font-style:normal;text-align:right}.spellbookDetailStat.empty{display:block;color:#827b89;font-size:7px;line-height:1.35}.spellbookDetailSummary{margin:0;color:#bcb5c2;font:9px/1.45 Georgia,"Times New Roman",serif}.spellbookUnlockSource{display:grid;gap:2px;padding:7px 8px;border:1px solid rgba(151,116,62,.22);border-radius:8px;background:rgba(75,53,24,.12)}.spellbookUnlockSource span{color:#b19361;font-size:6px;font-weight:950;letter-spacing:.12em}.spellbookUnlockSource strong{color:#d6c4a4;font-size:7.5px;line-height:1.3}.spellbookEquipActions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:auto}.spellbookEquipButton{min-height:32px;padding:5px 6px;border:1px solid rgba(107,84,155,.5);border-radius:8px;background:linear-gradient(180deg,rgba(82,60,121,.84),rgba(45,35,68,.94));color:#f0e8fb;font:800 8px Georgia,"Times New Roman",serif;cursor:pointer}.spellbookEquipButton:hover:not(:disabled),.spellbookEquipButton:focus-visible:not(:disabled){border-color:#d8b56e;outline:none;filter:brightness(1.08)}.spellbookEquipButton:disabled{opacity:.48;cursor:not-allowed}

.spellbookLoadout{position:relative;z-index:1;display:grid;gap:8px;padding:9px 11px;border:1px solid rgba(180,139,66,.38);border-radius:12px;background:linear-gradient(90deg,rgba(40,30,23,.48),rgba(20,22,39,.62))}.spellbookLoadoutHead{display:flex;align-items:center;justify-content:space-between;gap:12px}.spellbookLoadoutHead>div{display:grid;grid-template-columns:auto auto 1fr;gap:2px 8px;align-items:baseline}.spellbookLoadoutHead span{color:#ba9964;font-size:6px;font-weight:950;letter-spacing:.14em}.spellbookLoadoutHead strong{font:700 13px Georgia,"Times New Roman",serif;color:#f0dba9}.spellbookLoadoutHead small{color:#8f8692;font-size:7px}.spellbookSaveButton{min-width:122px;min-height:30px;padding:5px 12px;border:1px solid rgba(195,151,64,.62);border-radius:8px;background:linear-gradient(180deg,rgba(123,84,29,.96),rgba(75,49,20,.97));color:#fff0bf;font:850 9px Georgia,"Times New Roman",serif;cursor:pointer}.spellbookSaveButton:disabled{opacity:.48;cursor:not-allowed}.spellbookSaveButton:hover:not(:disabled),.spellbookSaveButton:focus-visible:not(:disabled){filter:brightness(1.08);outline:2px solid rgba(232,195,112,.35);outline-offset:1px}
.spellbookLoadoutSlots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.spellbookLoadoutSlots>button{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:1px 6px;align-items:center;min-height:46px;padding:6px 8px;border:1px solid rgba(102,88,126,.35);border-radius:9px;background:rgba(11,13,22,.72);color:#ddd5e4;text-align:left;cursor:pointer}.spellbookLoadoutSlots>button:hover,.spellbookLoadoutSlots>button:focus-visible{border-color:rgba(205,165,85,.6);outline:none}.spellbookLoadoutSlots>button.dirty{box-shadow:inset 0 0 15px rgba(224,177,72,.05)}.spellbookLoadoutSlots kbd{grid-row:1/span 2;display:grid;place-items:center;min-width:25px;height:25px;padding:0 4px;border:1px solid rgba(220,194,127,.42);border-radius:50%;background:rgba(28,24,35,.92);color:#f1dfb1;font:900 7px ui-monospace,monospace}.spellbookLoadoutSlots span{color:#817989;font-size:6px;font-weight:900;letter-spacing:.08em}.spellbookLoadoutSlots strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#eae1ed;font:700 8px Georgia,"Times New Roman",serif}.spellbookFooterHint{position:absolute;right:9px;bottom:-15px;display:flex;gap:5px;align-items:center;color:#706b74;font-size:6px}.spellbookFooterHint kbd{padding:2px 4px;border:1px solid rgba(255,255,255,.12);border-radius:5px;background:rgba(0,0,0,.26);color:#d9d1dc;font:900 6px ui-monospace,monospace}

/* Four Explore menu buttons should not crowd the combat dock. */
.exploreMenuPromptButton{width:82px;height:32px}.exploreMenuPromptButton.runicCorePrompt,.exploreMenuPromptButton.spellbookPrompt{width:96px;height:32px}.exploreRunicPromptLabel,.exploreSpellbookPromptLabel{font-size:8px}.exploreRunicPromptKey,.exploreSpellbookPromptKey{width:22px;height:22px;font-size:9px}
@media(max-width:1250px){.exploreMenuPrompts{right:14px;bottom:96px}.activeRuneHud{right:14px;bottom:143px}}
@media(max-width:980px){
  .spellbookShell{width:calc(100% - 14px);height:calc(100% - 14px);padding:10px}.spellbookBody{grid-template-columns:135px minmax(0,1fr) 290px;gap:7px}.spellbookGrid{grid-template-columns:1fr}.spellbookFilters{padding:7px}.spellbookFilters>button{min-height:33px}.spellbookDetails{padding:8px}.spellbookLoadoutSlots{gap:5px}.spellbookLoadoutHead small{display:none}
}
@media(max-width:760px){
  .exploreMenuPrompts{right:7px;bottom:76px;display:grid;grid-template-columns:repeat(2,82px);gap:3px}.exploreMenuPromptButton,.exploreMenuPromptButton.runicCorePrompt,.exploreMenuPromptButton.spellbookPrompt{width:82px;height:30px}.activeRuneHud{display:none!important}
  .spellbookShell{display:block;overflow:auto;width:calc(100% - 8px);height:calc(100% - 8px);padding:9px}.spellbookHeader{padding-right:38px}.spellbookTitleBlock>strong{font-size:22px}.spellbookDiscovery{justify-items:start;margin-top:6px}.spellbookBody{display:grid;grid-template-columns:1fr;overflow:visible}.spellbookFilters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-height:none;overflow:visible}.spellbookFilterLore{display:none}.spellbookLibrary{min-height:430px;margin-top:8px}.spellbookGrid{grid-template-columns:1fr 1fr;max-height:360px}.spellbookDetails{min-height:400px;margin-top:8px}.spellbookLoadout{margin-top:8px}.spellbookLoadoutHead{align-items:stretch;flex-direction:column}.spellbookLoadoutSlots{grid-template-columns:1fr 1fr}.spellbookLoadoutSlots>button:last-child{grid-column:1/-1}.spellbookFooterHint{display:none}
}

/* Phase 22 — Explore Mastery Tree + unified Quick HUD dock */
.exploreHudQuickDock{position:absolute;right:14px;bottom:12px;z-index:36;display:grid;justify-items:end;gap:8px;max-width:min(100vw - 22px,430px);pointer-events:none}
.exploreHudQuickDockTop{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:stretch;gap:8px;max-width:100%;pointer-events:none}
.exploreHudQuickDock .activeRuneHud,.exploreHudQuickDock .quickItemSlot,.exploreHudQuickDock .exploreMenuPrompts{position:static;right:auto;bottom:auto;pointer-events:auto}
.exploreHudQuickDock .exploreMenuPrompts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:max-content;max-width:100%}
.exploreHudQuickDock .activeRuneHud{width:172px;min-height:58px}
.exploreHudQuickDock .quickItemSlot{width:106px;min-height:58px}
.exploreHudQuickDock .exploreMenuPromptButton{height:36px;width:108px}
.exploreHudQuickDock .exploreMenuPromptButton.active{transform:translateY(-2px);border-color:#ece2ff;box-shadow:0 10px 20px rgba(0,0,0,.35),0 0 16px rgba(186,144,255,.2)}
.exploreMenuPromptButton.masteryPrompt{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:8px;padding:5px 7px;background:linear-gradient(180deg,rgba(29,22,44,.96),rgba(16,13,27,.96));border-color:rgba(187,153,255,.55)}
.exploreMasteryPromptKey,.exploreMasteryPromptLabel{display:block}
.exploreMasteryPromptKey{width:24px;height:24px;border-radius:8px;border:1px solid rgba(215,195,255,.7);display:grid;place-items:center;font:800 10px/1 Arial,sans-serif;background:linear-gradient(180deg,rgba(95,70,143,.98),rgba(57,41,95,.98));color:#fff7ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.exploreMasteryPromptLabel{font:800 9px/1.12 Georgia,"Times New Roman",serif;color:#efe8ff;letter-spacing:.02em}
.inventoryRunicCoreButton.inventoryMasteryButton{background:linear-gradient(180deg,#2e1f46,#161123);border-color:rgba(191,162,255,.48)}

.exploreMasteryPanel{position:absolute;inset:0;z-index:68;display:grid;place-items:center;pointer-events:auto}
.exploreMasteryDimmer{position:absolute;inset:0;background:rgba(5,7,13,.72);backdrop-filter:blur(5px)}
.exploreMasteryShell{position:relative;width:min(1280px,calc(100% - 22px));height:min(800px,calc(100% - 22px));display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;padding:14px 14px 12px;border-radius:26px;border:1px solid rgba(193,171,255,.28);background:radial-gradient(circle at top,rgba(65,51,101,.24),rgba(10,12,20,.97) 42%),linear-gradient(180deg,rgba(18,21,34,.98),rgba(7,8,14,.98));box-shadow:0 28px 70px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06)}
.exploreMasteryClose{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(14,16,25,.88);color:#f6f4ff;font-size:20px;font-weight:900;cursor:pointer}
.exploreMasteryClose:hover,.exploreMasteryClose:focus-visible{transform:translateY(-1px);outline:none;border-color:rgba(255,255,255,.42)}
.exploreMasteryHeader{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding-right:46px}
.exploreMasteryTitleBlock,.exploreMasterySummaryBadge,.exploreMasteryCenter,.exploreMasteryDetails,.exploreMasterySchoolList{border-radius:20px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(20,24,39,.94),rgba(11,13,23,.94))}
.exploreMasteryTitleBlock{padding:16px 18px 14px;display:grid;gap:4px}
.exploreMasteryTitleBlock span,.exploreMasterySummaryBadge span,.exploreMasteryCenterTitle span,.exploreMasterySelectedRank span,.exploreMasteryDetailHeader span,.exploreMasteryResetCard span{font:800 10px/1 Arial,sans-serif;color:#aab3cb;letter-spacing:.2em;text-transform:uppercase}
.exploreMasteryTitleBlock strong{font:900 28px/1.02 Georgia,"Times New Roman",serif;color:#fff2d6}
.exploreMasteryTitleBlock small{font:500 13px/1.45 Arial,sans-serif;color:#d4d8e6;max-width:720px}
.exploreMasterySummaryBadge{min-width:170px;padding:14px 16px;display:grid;align-content:center;justify-items:start;gap:4px}
.exploreMasterySummaryBadge strong{font:900 30px/1 Georgia,"Times New Roman",serif;color:#dcd2ff}
.exploreMasterySummaryBadge small{font:700 12px/1.3 Arial,sans-serif;color:#a9f4c8}
.exploreMasteryBody{min-height:0;display:grid;grid-template-columns:220px minmax(0,1.2fr) 330px;gap:10px}
.exploreMasterySchoolList{padding:10px;display:grid;grid-auto-rows:min-content;gap:8px;overflow:auto}
.exploreMasterySchoolButton{display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-areas:"icon copy" "rank rank";gap:4px 10px;align-items:center;padding:11px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg,rgba(28,33,54,.95),rgba(13,15,25,.95));color:#eef2ff;text-align:left;cursor:pointer}
.exploreMasterySchoolButton b{grid-area:icon;font-size:22px;line-height:1}
.exploreMasterySchoolButton span{grid-area:copy;display:grid;gap:1px;min-width:0}
.exploreMasterySchoolButton span strong{font:800 14px/1.12 Georgia,"Times New Roman",serif;color:#fff6de}
.exploreMasterySchoolButton span small{font:600 11px/1.25 Arial,sans-serif;color:#b8c0d5}
.exploreMasterySchoolButton i{grid-area:rank;font-style:normal;font:800 10px/1 Arial,sans-serif;color:#9de5bf;letter-spacing:.12em;text-transform:uppercase}
.exploreMasterySchoolButton.active,.exploreMasterySchoolButton:hover,.exploreMasterySchoolButton:focus-visible{outline:none;border-color:rgba(225,206,255,.5);transform:translateY(-1px);box-shadow:0 12px 24px rgba(0,0,0,.26),0 0 18px rgba(132,105,204,.14)}
.exploreMasteryCenter{padding:14px;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:10px;min-height:0}
.exploreMasteryCenterHead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.exploreMasteryCenterTitle{display:grid;gap:4px}
.exploreMasteryCenterTitle strong{font:900 26px/1.02 Georgia,"Times New Roman",serif;color:#fff1c8}
.exploreMasteryCenterTitle small{font:500 12px/1.42 Arial,sans-serif;color:#cfd5e5;max-width:580px}
.exploreMasterySelectedRank{min-width:94px;padding:10px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(34,40,64,.96),rgba(13,16,26,.96));display:grid;justify-items:start}
.exploreMasterySelectedRank strong{font:900 28px/1 Georgia,"Times New Roman",serif;color:#dfd3ff}
.exploreMasterySelectedRank small{font:700 11px/1 Arial,sans-serif;color:#97a1b8}
.exploreMasteryProgressBlock{display:grid;gap:6px;padding:10px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.06);background:rgba(10,12,21,.72)}
.exploreMasteryProgressBlock>div:first-child{display:flex;justify-content:space-between;gap:10px;align-items:center}
.exploreMasteryProgressBlock span{font:800 11px/1 Arial,sans-serif;color:#b2bad0;letter-spacing:.12em;text-transform:uppercase}
.exploreMasteryProgressBlock strong{font:800 12px/1 Arial,sans-serif;color:#f8f3ff}
.exploreMasteryProgressTrack{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.exploreMasteryProgressTrack i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#63de9f,#d4afff);box-shadow:0 0 16px rgba(164,255,212,.32)}
.exploreMasteryTree{min-height:0;overflow:auto;display:grid;align-content:start;gap:10px;padding-right:4px}
.exploreMasteryNode{position:relative;padding:12px 13px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(16,20,32,.98),rgba(9,11,18,.98));box-shadow:inset 0 1px 0 rgba(255,255,255,.03);display:grid;gap:8px}
.exploreMasteryNode::before{content:"";position:absolute;left:26px;top:-10px;bottom:calc(100% - 2px);width:2px;background:linear-gradient(180deg,rgba(124,154,255,.36),rgba(124,154,255,0))}
.exploreMasteryNode:first-child::before{display:none}
.exploreMasteryNode.reached{border-color:rgba(117,226,164,.34);background:linear-gradient(180deg,rgba(17,31,27,.98),rgba(9,14,16,.98))}
.exploreMasteryNode.next{border-color:rgba(205,170,255,.4);box-shadow:0 0 0 1px rgba(171,127,255,.12),0 18px 26px rgba(0,0,0,.22)}
.exploreMasteryNode.selected{outline:2px solid rgba(239,226,255,.28);transform:translateY(-1px)}
.exploreMasteryNodeHead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center}
.exploreMasteryNodeHead span,.exploreMasteryNodeHead i{padding:5px 8px;border-radius:999px;font:800 10px/1 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.exploreMasteryNodeHead span{background:rgba(255,255,255,.08);color:#c6d0e6}
.exploreMasteryNodeHead strong{font:800 15px/1.1 Georgia,"Times New Roman",serif;color:#fff7e7}
.exploreMasteryNodeHead i{font-style:normal;background:rgba(111,255,181,.12);color:#a6f0c7}
.exploreMasteryNodeText{margin:0;font:500 12px/1.46 Arial,sans-serif;color:#d1d8eb}
.exploreMasteryNodeRewards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.exploreMasteryNodeReward{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.05)}
.exploreMasteryNodeReward b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);font-size:14px}
.exploreMasteryNodeReward span{display:grid;min-width:0}
.exploreMasteryNodeReward strong{font:800 12px/1.15 Arial,sans-serif;color:#f5f7fe;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exploreMasteryNodeReward small{font:700 10px/1.12 Arial,sans-serif;color:#a7b2cc;letter-spacing:.12em;text-transform:uppercase}
.exploreMasteryNodeAction,.exploreMasteryChoiceAction,.exploreMasteryPrimaryAction,.exploreMasteryResetButton{border-radius:14px;border:1px solid rgba(228,208,255,.4);background:linear-gradient(180deg,#5d467e,#332549);color:#fff9ff;font:800 12px/1 Arial,sans-serif;letter-spacing:.03em;padding:11px 14px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.exploreMasteryNodeAction:disabled,.exploreMasteryChoiceAction:disabled,.exploreMasteryPrimaryAction:disabled,.exploreMasteryResetButton:disabled{opacity:.58;cursor:not-allowed;box-shadow:none}
.exploreMasteryChoiceRow{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px}
.exploreMasteryChoice{padding:10px;border-radius:16px;border:1px solid rgba(255,255,255,.07);background:linear-gradient(180deg,rgba(35,24,52,.95),rgba(16,13,24,.95));display:grid;gap:8px}
.exploreMasteryChoice.selectable{border-color:rgba(194,160,255,.38)}
.exploreMasteryChoice.selected{outline:2px solid rgba(255,245,204,.24)}
.exploreMasteryChoice.chosen{border-color:rgba(116,228,162,.34);background:linear-gradient(180deg,rgba(20,35,31,.98),rgba(10,15,14,.98))}
.exploreMasteryChoiceHead{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:center}
.exploreMasteryChoiceHead b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08)}
.exploreMasteryChoiceHead strong{font:800 13px/1.1 Georgia,"Times New Roman",serif;color:#fff6de}
.exploreMasteryChoiceHead small{font:800 9px/1 Arial,sans-serif;color:#b4c0d7;letter-spacing:.14em;text-transform:uppercase}
.exploreMasteryChoice p{margin:0;font:500 11px/1.42 Arial,sans-serif;color:#d2d7e6}
.exploreMasteryChoiceFoot{display:flex;justify-content:space-between;gap:8px;align-items:flex-end;flex-wrap:wrap}
.exploreMasteryChoiceFoot small{font:700 10px/1.25 Arial,sans-serif;color:#9be9bd}
.exploreMasteryDetails{padding:14px;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:10px;min-height:0}
.exploreMasteryDetailHeader{display:grid;gap:4px}
.exploreMasteryDetailHeader strong{font:900 24px/1.04 Georgia,"Times New Roman",serif;color:#fff0cd}
.exploreMasteryDetailHeader small{font:600 12px/1.4 Arial,sans-serif;color:#c5cbdd}
.exploreMasteryDetailText{margin:0;font:500 13px/1.52 Arial,sans-serif;color:#d5d9e7}
.exploreMasteryDetailRewards{display:grid;align-content:start;gap:8px;overflow:auto;min-height:0;padding-right:2px}
.exploreMasteryDetailRewards .masteryContentCard,.exploreMasteryDetailRewards .exploreMasteryEmptyRewards{width:100%}
.exploreMasteryEmptyRewards{padding:12px;border-radius:14px;border:1px dashed rgba(255,255,255,.12);background:rgba(255,255,255,.03);font:600 12px/1.4 Arial,sans-serif;color:#b2bad0}
.exploreMasteryActionArea{display:grid;gap:6px;padding:10px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05)}
.exploreMasteryActionArea small,.exploreMasteryResetCard small,.exploreMasteryStatus{font:600 11px/1.4 Arial,sans-serif;color:#b3bdd3}
.exploreMasteryResetCard{display:grid;gap:7px;padding:10px;border-radius:16px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03)}
.exploreMasteryStatus{padding:10px;border-radius:14px;border:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.03)}
.exploreMasteryStatus.success{color:#a7efc4;border-color:rgba(111,255,181,.2);background:rgba(31,67,47,.18)}
.exploreMasteryStatus.error{color:#ffb7bf;border-color:rgba(255,130,146,.2);background:rgba(72,28,35,.22)}
.exploreMasteryFooterHint{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;padding:3px 0 0;color:#bbc5dc;font:800 11px/1 Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.exploreMasteryFooterHint kbd{min-width:34px;height:26px;padding:0 9px;border-radius:9px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);display:grid;place-items:center;font:800 11px/1 Arial,sans-serif;color:#fff}

@media(max-width:1250px){
  .exploreHudQuickDock{max-width:min(100vw - 20px,370px)}
  .exploreHudQuickDock .activeRuneHud{width:150px}.exploreHudQuickDock .quickItemSlot{width:100px}
  .exploreHudQuickDock .exploreMenuPromptButton{width:100px}
  .exploreMasteryBody{grid-template-columns:200px minmax(0,1fr) 300px}
}
@media(max-width:1020px){
  .exploreHudQuickDock{right:10px;bottom:10px}.exploreHudQuickDock .exploreMenuPrompts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .exploreMasteryShell{height:min(860px,calc(100% - 18px))}
  .exploreMasteryBody{grid-template-columns:190px minmax(0,1fr);grid-template-areas:"schools details" "center center"}
  .exploreMasterySchoolList{grid-area:schools}
  .exploreMasteryDetails{grid-area:details}
  .exploreMasteryCenter{grid-area:center}
}
@media(max-width:760px){
  .exploreHudQuickDock{left:8px;right:8px;bottom:8px;justify-items:stretch;max-width:none}
  .exploreHudQuickDockTop{justify-content:stretch}.exploreHudQuickDock .activeRuneHud,.exploreHudQuickDock .quickItemSlot{width:auto;flex:1 1 140px}
  .exploreHudQuickDock .exploreMenuPrompts{width:100%;grid-template-columns:repeat(2,minmax(0,1fr))}
  .exploreHudQuickDock .exploreMenuPromptButton{width:100%}
  .exploreMasteryShell{width:min(100%,calc(100% - 10px));height:min(100%,calc(100% - 10px));padding:12px;gap:8px;border-radius:20px}
  .exploreMasteryHeader,.exploreMasteryBody{grid-template-columns:1fr}
  .exploreMasteryBody{grid-template-areas:none}
  .exploreMasteryCenterHead{flex-direction:column}
  .exploreMasteryDetails{grid-template-rows:auto auto auto auto auto}
}

/* Phase 22 Hotfix — lift Mastery Tree and declutter quick HUD */
.exploreMasteryPanel{
  place-items:start center;
  padding:10px 10px 8px;
}
.exploreMasteryShell{
  align-self:start;
  width:min(1288px,calc(100% - 20px));
  height:min(790px,calc(100% - 14px));
}
.exploreMasteryHeader{
  align-items:start;
}

.exploreHudQuickDock{
  right:18px;
  bottom:12px;
  gap:6px;
  max-width:min(100vw - 28px,346px);
}
.exploreHudQuickDockTop{
  gap:6px;
}
.exploreHudQuickDock .activeRuneHud{
  width:158px;
  min-height:54px;
}
.exploreHudQuickDock .quickItemSlot{
  width:100px;
  min-height:54px;
}
.exploreHudQuickDock .exploreMenuPrompts{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:5px;
  width:100%;
  max-width:346px;
}
.exploreHudQuickDock .exploreMenuPromptButton{
  width:auto;
  min-width:70px;
  height:30px;
  padding:4px 7px;
  border-radius:10px;
}
.exploreHudQuickDock .exploreMenuPromptButton img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.exploreHudQuickDock .exploreMenuPromptButton.spellbookPrompt,
.exploreHudQuickDock .exploreMenuPromptButton.masteryPrompt,
.exploreHudQuickDock .exploreMenuPromptButton.runicCorePrompt{
  grid-template-columns:24px minmax(0,1fr);
  gap:6px;
}
.exploreSpellbookPromptKey,
.exploreMasteryPromptKey,
.exploreRunicPromptKey{
  width:22px;
  height:22px;
  border-radius:7px;
  font-size:10px;
}
.exploreSpellbookPromptLabel,
.exploreMasteryPromptLabel,
.exploreRunicPromptLabel{
  font-size:8px;
  line-height:1.08;
}
.exploreHudQuickDock .exploreMenuPromptButton.cosmeticsPrompt{
  min-width:58px;
  opacity:.9;
}
.exploreHudQuickDock .exploreMenuPromptButton.cosmeticsPrompt span{
  font-size:7px;
}

@media(max-width:1250px){
  .exploreMasteryShell{
    height:min(772px,calc(100% - 14px));
  }
  .exploreHudQuickDock{
    max-width:min(100vw - 22px,322px);
  }
  .exploreHudQuickDock .activeRuneHud{
    width:148px;
  }
  .exploreHudQuickDock .quickItemSlot{
    width:96px;
  }
}

@media(max-width:900px){
  .exploreMasteryPanel{
    padding:8px 8px 6px;
  }
  .exploreMasteryShell{
    width:min(100%,calc(100% - 12px));
    height:min(100%,calc(100% - 10px));
  }
  .exploreHudQuickDock{
    right:10px;
    left:auto;
    max-width:min(100vw - 18px,286px);
  }
  .exploreHudQuickDock .activeRuneHud{
    width:136px;
  }
  .exploreHudQuickDock .quickItemSlot{
    width:92px;
  }
  .exploreHudQuickDock .exploreMenuPromptButton{
    min-width:64px;
    height:28px;
    padding:3px 6px;
  }
}

/* Phase 25 — F8 enemy progression / scaling editor */
.worldEditorEnemyProgression{display:grid;gap:8px;padding-top:3px;border-top:1px solid rgba(255,255,255,.08)}
.worldEditorEnemyProgressionGrid{align-items:end}
.worldEditorEnemyScaledPreview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:7px;border:1px solid rgba(118,151,201,.24);border-radius:9px;background:linear-gradient(180deg,rgba(18,25,39,.82),rgba(8,11,18,.72))}
.worldEditorEnemyScaledPreview>div{min-width:0;display:grid;gap:2px;padding:6px 7px;border-radius:7px;background:rgba(255,255,255,.035)}
.worldEditorEnemyScaledPreview span{font-size:7px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#8ea4bf}
.worldEditorEnemyScaledPreview strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:#edf7ff}
.worldEditorEnemyAbilityHead{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding-top:3px}.worldEditorEnemyAbilityHead>div{display:grid;gap:2px}.worldEditorEnemyAbilityHead strong{font-size:10px;color:#f2f7ff}.worldEditorEnemyAbilityHead small{font-size:8px;line-height:1.35;color:#8ca0b7}
.worldEditorEnemyAbilityTiers{display:grid;gap:6px;max-height:210px;overflow:auto;padding-right:2px}
.worldEditorEnemyAbilityRow{display:grid;grid-template-columns:minmax(0,1fr) 84px;gap:8px;align-items:center;padding:7px 8px;border:1px solid rgba(115,133,163,.24);border-radius:9px;background:rgba(9,12,20,.72)}
.worldEditorEnemyAbilityRow.active{border-color:rgba(100,215,151,.38);box-shadow:inset 0 0 14px rgba(73,183,119,.06)}
.worldEditorEnemyAbilityCopy{min-width:0;display:grid;gap:2px}.worldEditorEnemyAbilityCopy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:#edf5ff}.worldEditorEnemyAbilityCopy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:7px;color:#91a3b8}.worldEditorEnemyAbilityRow.active .worldEditorEnemyAbilityCopy small{color:#8fe0ae}
.worldEditorEnemyAbilityRow label{font-size:7px!important;text-align:right}.worldEditorEnemyAbilityRow input{text-align:center;padding:5px 4px!important}
.worldEditorEnemyAbilityEmpty{padding:9px;border:1px dashed rgba(120,139,170,.28);border-radius:9px;background:rgba(7,10,16,.48);color:#8fa3b8;font-size:8px;line-height:1.4}
@media(max-width:760px){.worldEditorEnemyScaledPreview{grid-template-columns:repeat(2,minmax(0,1fr))}.worldEditorEnemyProgressionGrid{grid-template-columns:1fr 1fr}.worldEditorEnemyAbilityRow{grid-template-columns:minmax(0,1fr) 76px}}