:root{
  --bg:#0c0e16;
  --panel:#11162a;
  --panel2:#151a2e;
  --text:#e7eaf5;
  --muted:#aab1d6;
  --accent:#5eead4;
  --accent2:#7c3aed;
  --danger:#fb7185;
  --gold:#fbbf24;
  --border:rgba(255,255,255,.10);
  --shadow: 0 12px 24px rgba(0,0,0,.35);
  --radius: 18px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --biome-a: radial-gradient(1200px 700px at 20% 0%, rgba(124,58,237,.25), transparent 60%);
  --biome-b: radial-gradient(900px 600px at 90% 10%, rgba(94,234,212,.20), transparent 55%);
  --biome-c: radial-gradient(900px 700px at 40% 110%, rgba(251,191,36,.10), transparent 60%);
  --biome-art: none;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  background:
    var(--biome-art),
    var(--biome-a),
    var(--biome-b),
    var(--biome-c),
    var(--bg);
  color:var(--text);
  transition: background 450ms ease;
}
.container{max-width:980px;margin:0 auto;padding:16px 14px 90px}
.topbar{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border:1px solid var(--border);
  border-radius:var(--radius);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:var(--shadow); position:sticky; top:10px; z-index:10;
  backdrop-filter: blur(10px);
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand .avatar{
  width:38px;height:38px;border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(17,22,42,.6);
  overflow:hidden;
}
.brand h1{font-size:16px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{
  font-family:var(--mono);font-size:12px;
  padding:6px 10px;border:1px solid var(--border);border-radius:999px;
  color:var(--muted);
}
.nav{
  position:fixed;left:0;right:0;bottom:0;
  background:rgba(12,14,22,.75);
  border-top:1px solid var(--border);
  backdrop-filter: blur(12px);
}
.nav .inner{max-width:980px;margin:0 auto;display:flex;gap:8px;padding:10px 10px}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:10px 8px;border-radius:16px;border:1px solid transparent;
  color:var(--muted);font-size:11px;
}
.tab.active{border-color:rgba(94,234,212,.35);color:var(--text);background:rgba(17,22,42,.60)}
.tab svg{width:20px;height:20px}
.grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}
@media (min-width:820px){ .grid{grid-template-columns:1.3fr .7fr} }
.card{
  border:1px solid var(--border);border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:var(--shadow);
  padding:14px;
}
.card h2{margin:0 0 10px;font-size:14px;color:var(--text)}
.kv{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.12)}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--muted);font-size:12px}
.kv .v{font-family:var(--mono);font-size:13px}
.big{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:14px;border:1px solid var(--border);
  background:rgba(17,22,42,.55); color:var(--text); font-size:12px;
}
.badge b{font-family:var(--mono)}
.system{
  font-family:var(--mono);
  font-size:12px;line-height:1.35;
  padding:12px;border-radius:16px;border:1px solid rgba(94,234,212,.30);
  background:linear-gradient(180deg, rgba(94,234,212,.10), rgba(124,58,237,.08));
}
.system .label{color:rgba(94,234,212,.95);font-weight:700;letter-spacing:.06em}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
button{
  appearance:none;border:1px solid var(--border);background:rgba(17,22,42,.72);
  color:var(--text);padding:10px 12px;border-radius:16px;
  font-weight:600;cursor:pointer;
}
button.primary{border-color:rgba(94,234,212,.35);background:rgba(94,234,212,.12)}
button.danger{border-color:rgba(251,113,133,.35);background:rgba(251,113,133,.10)}
input, select, textarea{
  width:100%;
  background:rgba(9,11,18,.55);
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 10px;
  border-radius:14px;
  outline:none;
}
label{font-size:12px;color:var(--muted)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:520px){ .row{grid-template-columns:1fr} }
.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.tr{background:rgba(17,22,42,.55);border:1px solid var(--border)}
.table th{font-size:11px;color:var(--muted);text-align:left;padding:6px 10px}
.table td{padding:10px 10px;border-top:1px solid rgba(255,255,255,.06);font-size:12px}
.table .cell{display:flex;gap:10px;align-items:center;justify-content:space-between}
.chip{
  font-family:var(--mono);font-size:11px;padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);color:var(--muted);
}
.chip.ok{border-color:rgba(94,234,212,.35);color:rgba(94,234,212,.95)}
.chip.warn{border-color:rgba(251,191,36,.35);color:rgba(251,191,36,.95)}
.chip.bad{border-color:rgba(251,113,133,.35);color:rgba(251,113,133,.95)}
hr.sep{border:0;border-top:1px solid rgba(255,255,255,.10);margin:12px 0}
.spark{
  width:100%; height:120px; border-radius:16px;
  background:rgba(9,11,18,.45);
  border:1px solid rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:center;
}
.small{font-size:11px;color:var(--muted)}


/* -------- Themes -------- */
body.theme-dark{ --bg:#0c0e16; --panel:#11162a; --panel2:#151a2e; --text:#e7eaf5; --muted:#aab1d6; --accent:#5eead4; --accent2:#7c3aed; }
body.theme-light{ --bg:#f6f7fb; --panel:#ffffff; --panel2:#f0f2f8; --text:#0b1020; --muted:#475569; --accent:#0ea5e9; --accent2:#7c3aed; --border:rgba(2,6,23,.12); --shadow: 0 10px 20px rgba(2,6,23,.10); }
body.theme-cyber{ --bg:#050510; --panel:#0b0b18; --panel2:#10102a; --text:#f3f4ff; --muted:#b9baf5; --accent:#22c55e; --accent2:#06b6d4; }
body.theme-nature{ --bg:#0b1b12; --panel:#0f2a1c; --panel2:#123524; --text:#eafff2; --muted:#b2e6c9; --accent:#34d399; --accent2:#a3e635; }

/* -------- Animations -------- */
@keyframes pop { 0%{transform:scale(.95);opacity:.0} 100%{transform:scale(1);opacity:1} }
@keyframes pulseGlow { 0%{box-shadow:0 0 0 rgba(94,234,212,.0)} 50%{box-shadow:0 0 28px rgba(94,234,212,.25)} 100%{box-shadow:0 0 0 rgba(94,234,212,.0)} }
@keyframes floaty { 0%{transform:translateY(0)} 50%{transform:translateY(-3px)} 100%{transform:translateY(0)} }
@keyframes wiggle { 0%,100%{transform:rotate(0)} 30%{transform:rotate(-4deg)} 60%{transform:rotate(4deg)} }

.badge.animate{ animation: pop 220ms ease-out; }
.pulse{ animation: pulseGlow 900ms ease-out; }
.flame{ display:inline-block; animation: floaty 1.4s ease-in-out infinite; }
.wiggle{ display:inline-block; animation: wiggle 1.2s ease-in-out infinite; transform-origin: bottom center; }

/* -------- Toast -------- */
.toastWrap{ position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:99; width:min(520px, calc(100% - 24px)); pointer-events:none; }
.toast{
  pointer-events:auto;
  border:1px solid rgba(94,234,212,.30);
  background:linear-gradient(180deg, rgba(94,234,212,.14), rgba(124,58,237,.10));
  border-radius:18px;
  padding:12px 14px;
  box-shadow:var(--shadow);
  font-family:var(--mono);
  font-size:12px;
  margin-bottom:10px;
  animation: pop 220ms ease-out;
}
.toast .t{ color:rgba(94,234,212,.95); font-weight:800; letter-spacing:.06em; margin-bottom:6px; }

/* -------- Progress bar -------- */
.bar{
  height:12px; border-radius:999px; border:1px solid rgba(255,255,255,.12);
  background:rgba(9,11,18,.45);
  overflow:hidden;
}
.bar > i{ display:block; height:100%; width:0%; background:linear-gradient(90deg, rgba(94,234,212,.9), rgba(124,58,237,.9)); transition: width 650ms ease; }

/* -------- Boss Week Overlay -------- */
body.bossweek::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 20%, rgba(239,68,68,.14), rgba(239,68,68,0) 55%);
  box-shadow: inset 0 0 0 9999px rgba(239,68,68,.03);
  z-index:2;
}
.bossBanner{
  position:sticky; top:0;
  z-index:3;
  margin:10px 0 0;
  padding:10px 12px;
  border-radius:18px;
  border:1px solid rgba(239,68,68,.35);
  background:linear-gradient(180deg, rgba(239,68,68,.15), rgba(124,58,237,.08));
  box-shadow: var(--shadow);
  font-family: var(--mono);
}
.bossBanner b{ letter-spacing:.06em; }
.bossBanner .small{ color: rgba(255,255,255,.72); }

/* -------- Modal -------- */
.modalBack{
  position:fixed; inset:0; z-index:50;
  background: rgba(3,6,23,.62);
  display:flex; align-items:center; justify-content:center;
  padding:18px;
}
.modal{
  width:min(620px, 100%);
  border-radius:22px;
  border:1px solid rgba(94,234,212,.22);
  background: linear-gradient(180deg, rgba(17,22,42,.95), rgba(12,14,22,.98));
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  padding:14px;
}
.cards3{ display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width: 700px){ .cards3{ grid-template-columns:1fr 1fr 1fr; } }
.pickCard{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(9,11,18,.45);
  padding:12px;
  cursor:pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.pickCard:hover{ transform: translateY(-2px); border-color: rgba(94,234,212,.35); }
.pickCard .name{ font-weight:900; letter-spacing:.04em; color: rgba(94,234,212,.95); }
.pickCard .lore{ margin-top:6px; color: rgba(255,255,255,.78); font-size:12px; }
.pickCard .bonus{ margin-top:10px; font-family: var(--mono); font-size:12px; color: rgba(255,255,255,.86); }

/* -------- Micro Animations -------- */
@keyframes pop {
  0%{ transform:scale(.96); opacity:.0; }
  55%{ transform:scale(1.02); opacity:1; }
  100%{ transform:scale(1); opacity:1; }
}
@keyframes glowPulse {
  0%{ box-shadow: 0 0 0 rgba(94,234,212,0); }
  50%{ box-shadow: 0 0 22px rgba(94,234,212,.18); }
  100%{ box-shadow: 0 0 0 rgba(94,234,212,0); }
}
@keyframes floatUp {
  0%{ transform:translate(-50%, 0) scale(.95); opacity:0; }
  15%{ opacity:1; }
  100%{ transform:translate(-50%, -26px) scale(1.02); opacity:0; }
}
.xpBurst{
  position:fixed;
  left:50%; top:64px;
  z-index:60;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(94,234,212,.35);
  background:rgba(17,22,42,.92);
  font-family: var(--mono);
  animation: floatUp .9s ease forwards;
  pointer-events:none;
}
.pulse{ animation: glowPulse .9s ease; }
.lootShake{ animation: pop .22s ease; }
.lootGlowRare{ animation: glowPulse .9s ease; }
.lootGlowLegendary{ animation: glowPulse .9s ease; }
.bigAvatar{
  width:64px;height:64px;border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  background: rgba(9,11,18,.45);
}
.bigAvatar svg{ width:100%; height:100%; display:block; }

/* -------- Avatar Frame + Title Banner -------- */
@keyframes breathe {
  0%{ transform:scale(1); }
  50%{ transform:scale(1.015); }
  100%{ transform:scale(1); }
}
.avatarWrap{
  display:flex;
  align-items:center;
  gap:12px;
}
.avatarFrame{
  width:72px;height:72px;
  border-radius:22px;
  padding:4px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  position:relative;
}
.avatarFrame.idle{
  animation: breathe 3.2s ease-in-out infinite;
}
.avatarFrame.common{
  box-shadow: 0 0 14px rgba(148,163,184,.10);
}
.avatarFrame.rare{
  box-shadow: 0 0 18px rgba(94,234,212,.20), 0 0 0 1px rgba(94,234,212,.14) inset;
}
.avatarFrame.legendary{
  box-shadow: 0 0 22px rgba(251,191,36,.22), 0 0 0 1px rgba(251,191,36,.16) inset;
}
.avatarFrame .bigAvatar{
  width:64px;height:64px;border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
}
.titleBanner{
  margin-top:6px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(9,11,18,.35);
  font-family: var(--mono);
  font-size:12px;
  color: rgba(255,255,255,.86);
}
.titleBanner .sigil{
  width:10px;height:10px;border-radius:3px;
  background: rgba(167,139,250,.75);
  box-shadow: 0 0 10px rgba(167,139,250,.25);
}

/* -------- Illustrated Layered Avatar (V6) -------- */
.avatarPortraitFrame{
  width: 124px;
  height: 196px;
  border-radius: 26px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  position: relative;
  overflow: hidden;
}
.avatarPortraitFrame.idle{
  animation: breathe 3.2s ease-in-out infinite;
}
.avatarPortrait{
  width: 100%;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  background: rgba(9,11,18,.45);
  border: 1px solid rgba(255,255,255,.10);
}
.avatarPortrait img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
  filter: contrast(1.05) saturate(1.05);
}
.avatarOverlay{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.avatarHair, .avatarEyes, .avatarOutfit{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
}
.avatarHair{ top: 14%; width: 62%; height: 28%; opacity:.96; }
.avatarEyes{ top: 25.5%; width: 46%; height: 14%; opacity:.9; }
.avatarOutfit{ bottom: 18%; width: 84%; height: 28%; opacity:.55; mix-blend-mode: screen; }
.avatarTag{
  position:absolute;
  left:10px; right:10px;
  bottom:10px;
  display:flex;
  gap:6px;
  align-items:center;
  justify-content:center;
  padding:6px 8px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(9,11,18,.55);
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(255,255,255,.88);
}
.avatarTag .dot{
  width:8px;height:8px;border-radius:3px;
  background: rgba(167,139,250,.85);
  box-shadow: 0 0 10px rgba(167,139,250,.25);
}

/* Dashboard layout tweak for portrait */
.profile{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.profile .badges{
  flex:1;
}

/* -------- Gear Overlays (V6.1) -------- */
.gearLayer{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  pointer-events:none;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
}
.gearLayer svg{ width:100%; height:100%; display:block; }
.gear-cloak{ top:18%; width:92%; height:70%; opacity:.55; }
.gear-shoulders{ top:34%; width:88%; height:22%; opacity:.70; }
.gear-chest{ top:44%; width:64%; height:26%; opacity:.75; }
.gear-belt{ top:60%; width:62%; height:14%; opacity:.78; }
.gear-legs{ top:66%; width:58%; height:24%; opacity:.70; }
.gear-boots{ top:84%; width:62%; height:14%; opacity:.72; }
.gear-weapon{ top:34%; left:82%; transform: translateX(-50%) rotate(6deg); width:34%; height:54%; opacity:.80; }

@keyframes tierPulse {
  0%{ filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
  50%{ filter: drop-shadow(0 0 18px rgba(251,191,36,.18)); }
  100%{ filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
}
.tier-legendary{ animation: tierPulse 2.4s ease-in-out infinite; }
.tier-ascendant{ animation: tierPulse 2.0s ease-in-out infinite; }

/* -------- Set Bonus Aura -------- */
.setAura{
  position:absolute;
  inset:-10px;
  pointer-events:none;
  opacity:.55;
  mix-blend-mode: screen;
}
.setAura svg{ width:100%; height:100%; display:block; }