:root{
  --fg:#cfe8ff;
  --cyan:#00f7ff;
  --mag:#ff1cf7;
  --yel:#ffd166;
  --grn:#68f8a7;
  --red:#ff4d6d;
}
html,body{
  height:100%;
  margin:0;
  color:var(--fg);
  font:14px/1.4 "JetBrains Mono","Cascadia Code",ui-monospace,Consolas,monospace;
  background:#05070c;
  overflow:hidden;
}
body{
  display:block;
  background:radial-gradient(1200px 620px at 60% 30%,#111b3b 0%,#070b17 60%,#04060d 100%);
}
body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.65;
  background:radial-gradient(600px 360px at 18% 24%,rgba(0,247,255,.22) 0%,rgba(0,0,0,0) 62%),
             radial-gradient(680px 400px at 88% 68%,rgba(255,28,247,.18) 0%,rgba(0,0,0,0) 70%);
  z-index:0;
  animation:slow-pan 16s ease-in-out infinite alternate;
}
body::after{
  opacity:.4;
  background:radial-gradient(520px 340px at 72% 18%,rgba(255,209,102,.22) 0%,rgba(0,0,0,0) 68%),
             radial-gradient(800px 460px at 30% 78%,rgba(104,248,167,.16) 0%,rgba(0,0,0,0) 72%);
  filter:blur(1px);
  animation:slow-pan 22s ease-in-out infinite alternate-reverse;
}
canvas#game{
  position:fixed;
  inset:0;
  display:block;
  z-index:1;
}
.bg-deco{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.bg-grid{
  position:absolute;
  inset:-100px;
  background-image:linear-gradient(rgba(60,120,200,.14) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(60,120,200,.14) 1px,transparent 1px);
  background-size:140px 140px;
  transform:perspective(900px) rotateX(54deg) translateY(80px);
  opacity:.3;
  animation:grid-scroll 28s linear infinite;
}
.bg-aurora{
  position:absolute;
  width:620px;
  height:620px;
  border-radius:50%;
  filter:blur(110px);
  opacity:.45;
  transform:translateZ(0);
  animation:aurora-float 18s ease-in-out infinite;
}
.bg-aurora.left{
  left:-180px;
  top:-160px;
  background:radial-gradient(circle at 40% 40%,rgba(0,247,255,.55),rgba(0,0,0,0) 70%);
}
.bg-aurora.right{
  right:-160px;
  bottom:-140px;
  background:radial-gradient(circle at 60% 40%,rgba(255,28,247,.45),rgba(0,0,0,0) 72%);
  animation-delay:-6s;
}
.scanlines{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:4;
  background-image:repeating-linear-gradient(transparent 0,transparent 2px,rgba(15,24,50,.35) 3px);
  mix-blend-mode:soft-light;
  opacity:.45;
}
.hud{
  position:fixed;
  left:16px;
  top:16px;
  display:grid;
  gap:10px;
  z-index:5;
}
.panel{
  backdrop-filter:blur(18px) saturate(160%);
  background:linear-gradient(135deg,rgba(10,16,30,.78),rgba(18,26,46,.58));
  border:1px solid rgba(138,180,255,.28);
  border-radius:14px;
  padding:14px 16px;
  min-width:300px;
  box-shadow:0 0 0 1px rgba(70,120,255,.12) inset,0 18px 40px rgba(0,0,0,.45);
}
.title{
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--cyan);
  text-shadow:0 0 14px rgba(0,247,255,.95),0 0 40px rgba(0,247,255,.45);
}
.row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:6px;
}
.chip{
  padding:4px 10px;
  border:1px solid rgba(42,54,90,.8);
  border-radius:999px;
  color:#d0e7ff;
  background:linear-gradient(135deg,rgba(12,18,36,.9),rgba(14,22,42,.6));
  box-shadow:inset 0 0 16px rgba(0,247,255,.08);
}
.bar{
  height:12px;
  background:rgba(16,24,50,.8);
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(31,43,74,.8);
  margin-top:8px;
}
.fill{
  height:100%;
  background:linear-gradient(90deg,#45f4c0,#18a981 55%,#45f4c0 100%);
  width:100%;
  transition:width .2s ease-out;
}
.corner{
  position:fixed;
  right:16px;
  top:16px;
  z-index:5;
}
.fps{
  padding:8px 12px;
  border:1px solid rgba(27,45,79,.85);
  border-radius:12px;
  background:linear-gradient(140deg,rgba(11,18,36,.92),rgba(9,16,30,.72));
  color:#9ecbff;
  box-shadow:0 12px 26px rgba(0,0,0,.45);
}
.tip{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:12px;
  z-index:5;
  padding:10px 16px;
  border:1px solid rgba(27,45,79,.85);
  border-radius:14px;
  background:linear-gradient(140deg,rgba(11,18,36,.94),rgba(9,16,30,.7));
  color:#b7d4ff;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
}
.card{
  padding:22px 24px;
  border:1px solid rgba(44,71,126,.78);
  border-radius:18px;
  background:linear-gradient(160deg,rgba(9,15,32,.94),rgba(12,18,40,.72));
  box-shadow:0 26px 90px rgba(0,0,0,.55),inset 0 0 120px rgba(0,255,255,.08);
}
.btn{
  cursor:pointer;
  user-select:none;
  display:inline-block;
  padding:10px 16px;
  border:1px solid rgba(27,45,79,.85);
  border-radius:12px;
  background:linear-gradient(135deg,rgba(24,38,69,.92),rgba(20,32,56,.72));
  color:#e9f2ff;
  transition:transform .15s ease,box-shadow .15s ease;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 30px rgba(0,0,0,.45);
}
.btn:disabled,
.btn.disabled{
  cursor:default;
  opacity:.55;
  transform:none;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.btn:disabled:hover,
.btn.disabled:hover{
  transform:none;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}

.launch-hud{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:7;
  background:radial-gradient(circle at center,rgba(10,18,34,.62),rgba(3,6,14,.94) 60%,rgba(1,3,10,.98) 100%);
  overflow:hidden;
}
.launch-hud::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:radial-gradient(circle at center,rgba(0,247,255,.18) 0,rgba(0,247,255,0) 60%);
  opacity:.4;
  animation:launchPulse 3.6s ease-in-out infinite;
}
.launch-hud::after{
  content:"";
  position:absolute;
  inset:-20%;
  background:repeating-linear-gradient(120deg,rgba(0,247,255,.08) 0 2px,transparent 2px 16px);
  opacity:.32;
  animation:launchGrid 14s linear infinite;
}
.launch-hud.show{
  display:flex;
  animation:launchFade .25s ease-out forwards;
}
.launch-core{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  transform:translateZ(0);
}
.launch-ring{
  --pct:0;
  position:relative;
  width:clamp(200px,32vw,340px);
  aspect-ratio:1;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at center,rgba(0,247,255,.16),rgba(0,247,255,.05) 55%,rgba(0,0,0,0) 76%),
    conic-gradient(from -90deg, rgba(0,247,255,.92) calc(var(--pct) * 360deg), rgba(0,247,255,.16) calc(var(--pct) * 360deg));
  box-shadow:0 0 40px rgba(0,247,255,.6),0 0 120px rgba(255,28,247,.28);
  animation:ringSpin 3.6s linear infinite;
}
.launch-ring::after{
  content:"";
  position:absolute;
  inset:12%;
  border-radius:50%;
  background:radial-gradient(circle at center,rgba(6,12,24,.95),rgba(4,9,20,.9));
  box-shadow:inset 0 0 40px rgba(0,247,255,.24),0 0 26px rgba(0,247,255,.18);
}
.launch-count{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(112px,17vw,240px);
  font-weight:700;
  color:#eaffff;
  letter-spacing:.08em;
  text-shadow:0 0 30px rgba(0,247,255,.86),0 0 80px rgba(255,28,247,.48);
}
.launch-info{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
  color:#9ecbff;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.launch-map{
  font-size:clamp(18px,2.6vw,30px);
  font-weight:600;
  text-shadow:0 0 20px rgba(0,247,255,.42);
}
.launch-status{
  font-size:clamp(24px,3.6vw,40px);
  font-weight:700;
  color:#e3f8ff;
  text-shadow:0 0 24px rgba(0,247,255,.72);
}
.launch-hud.launching .launch-ring{
  animation-duration:1.4s;
  box-shadow:0 0 50px rgba(0,247,255,.7),0 0 150px rgba(255,28,247,.32);
}
.launch-hud.launching .launch-ring::after{
  animation:launchCorePulse .5s ease-in-out 2 alternate;
}
.launch-hud.launching .launch-status{
  color:#7df6ff;
}
@keyframes ringSpin{to{transform:rotate(360deg);}}
@keyframes launchPulse{0%,100%{opacity:.22;}50%{opacity:.48;}}
@keyframes launchGrid{to{transform:rotate(360deg);}}
@keyframes launchFade{from{opacity:0;transform:scale(1.04);}to{opacity:1;transform:scale(1);}}
@keyframes launchCorePulse{from{box-shadow:inset 0 0 34px rgba(0,247,255,.22);}to{box-shadow:inset 0 0 80px rgba(255,255,255,.55);}}

.muted{opacity:.75;}
.overlay{ 
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  z-index:9;
  background:linear-gradient(180deg,rgba(2,4,10,.45),rgba(2,4,10,.78));
  padding:16px;
}
.overlay.show{display:grid;}
.exfil-report{background:radial-gradient(circle at top,rgba(8,20,42,.9) 0%,rgba(3,6,14,.86) 55%,rgba(1,3,8,.92) 100%);}
.report-card{
  width:min(940px,94vw);
  border-radius:24px;
  padding:36px 38px 28px;
  border:1px solid rgba(58,92,154,.7);
  background:linear-gradient(160deg,rgba(6,14,28,.96),rgba(10,22,46,.88));
  box-shadow:0 42px 120px rgba(0,0,0,.65),0 0 70px rgba(0,247,255,.18);
  position:relative;
  overflow:hidden;
}
.report-card::before{
  content:"";
  position:absolute;
  inset:20px;
  border-radius:18px;
  border:1px solid rgba(114,168,255,.08);
  pointer-events:none;
}
.report-card::after{
  content:"";
  position:absolute;
  inset:-140px -40px auto;
  height:240px;
  background:radial-gradient(circle at 50% 50%,rgba(0,247,255,.2),rgba(255,28,247,.05) 52%,rgba(0,0,0,0));
  pointer-events:none;
  opacity:.65;
}
.report-header{position:relative;z-index:1;margin-bottom:24px;}
.report-header h2{
  margin:6px 0 8px;
  font-size:32px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#f2fcff;
  text-shadow:0 0 28px rgba(0,247,255,.6);
}
.report-badge{
  display:inline-block;
  padding:6px 14px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#68f8ff;
  border:1px solid rgba(104,248,255,.4);
  box-shadow:0 0 20px rgba(0,247,255,.4);
}
.report-body{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:26px;
}
.report-col{
  flex:1 1 320px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.report-col.stats{max-width:360px;}
.report-block{
  padding:18px 20px 20px;
  border-radius:16px;
  border:1px solid rgba(74,110,174,.5);
  background:linear-gradient(150deg,rgba(10,18,36,.92),rgba(8,14,32,.7));
  box-shadow:0 18px 60px rgba(0,0,0,.45);
}
.report-block .label{display:block;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#7ecfff;opacity:.75;}
.report-block .value{margin-top:6px;font-size:24px;letter-spacing:.12em;color:#e4f7ff;text-transform:uppercase;}
.report-block .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.report-block .tags .tag{
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(74,110,174,.6);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#9fd8ff;
  background:linear-gradient(135deg,rgba(8,14,30,.88),rgba(10,18,34,.62));
  box-shadow:0 0 16px rgba(111,182,255,.16);
}
.report-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(120px,1fr));
  gap:14px;
}
.report-grid .stat{
  padding:16px 18px;
  border-radius:14px;
  border:1px solid rgba(66,102,162,.46);
  background:linear-gradient(150deg,rgba(6,12,26,.92),rgba(8,16,34,.72));
  box-shadow:0 16px 42px rgba(0,0,0,.4);
}
.report-grid .stat .label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8fc4ff;opacity:.7;}
.report-grid .stat .value{display:block;margin-top:6px;font-size:20px;letter-spacing:.08em;color:#f5fbff;}
.value-line{display:flex;align-items:flex-end;gap:12px;margin-top:6px;}
.value-line .value.main{font-size:30px;color:#e7fbff;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 0 24px rgba(0,247,255,.45);}
.value-line .value.gain{font-size:18px;color:#6dffb8;text-shadow:0 0 18px rgba(109,255,184,.35);}
.report-col.loot .report-block{margin-bottom:12px;}
.report-col.loot .muted{font-size:13px;margin-top:6px;color:#c4e5ff;opacity:.78;}
.loot-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height:220px;
  overflow-y:auto;
  padding-right:6px;
}
.loot-list::-webkit-scrollbar{width:6px;}
.loot-list::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(104,248,255,.6),rgba(255,118,248,.45));border-radius:999px;}
.loot-list li{
  padding:12px 16px;
  border-radius:12px;
  border:1px solid rgba(78,116,182,.42);
  background:linear-gradient(150deg,rgba(6,12,26,.92),rgba(8,14,30,.7));
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:#d2e9ff;
}
.loot-list li .name{display:flex;align-items:center;gap:10px;letter-spacing:.04em;}
.loot-list li .rar{width:10px;height:10px;border-radius:50%;box-shadow:0 0 14px currentColor;}
.loot-list li .rar.legendary{color:#ffe56d;}
.loot-list li .rar.epic{color:#ff6bd1;}
.loot-list li .rar.rare{color:#68f8ff;}
.loot-list li .rar.uncommon{color:#68f8a7;}
.loot-list li .rar.common{color:#9ecbff;opacity:.6;}
.loot-list li .value{font-size:16px;color:#fff;text-shadow:0 0 14px rgba(255,255,255,.28);}
.loot-list li.empty{justify-content:center;color:#8aa7d6;font-style:italic;}
.report-actions{margin-top:32px;display:flex;justify-content:flex-end;position:relative;z-index:1;}
.report-actions .btn{min-width:160px;font-size:14px;letter-spacing:.22em;text-transform:uppercase;}
.map-card-shell{
  width:min(880px,92vw);
  position:relative;
}
.map-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
}
.map-card{
  position:relative;
  border-radius:18px;
  padding:18px 18px 20px;
  cursor:pointer;
  border:1px solid rgba(48,76,132,.7);
  background:linear-gradient(165deg,rgba(8,14,30,.92),rgba(11,20,44,.74));
  box-shadow:0 26px 60px rgba(0,0,0,.55);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  overflow:hidden;
}
.map-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:20px;
  background:radial-gradient(circle at 20% 20%,var(--accent-soft,rgba(0,247,255,.18)) 0%,rgba(0,0,0,0) 70%);
  opacity:.65;
  pointer-events:none;
  filter:blur(0.5px);
}
.map-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  border:1px solid rgba(135,176,255,.14);
  pointer-events:none;
  box-shadow:inset 0 0 60px rgba(0,0,0,.32);
}
.map-card:hover{
  transform:translateY(-4px);
  box-shadow:0 34px 70px rgba(0,0,0,.6);
  border-color:color-mix(in srgb,var(--accent,#00f7ff) 60%,rgba(48,76,132,.7));
}
.map-card.active{
  border-color:var(--accent,#00f7ff);
  box-shadow:0 34px 90px rgba(0,0,0,.65),0 0 32px var(--accent-glow,rgba(0,247,255,.35));
}
.map-card h3{
  margin:0;
  font-size:18px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent,#00f7ff);
  text-shadow:0 0 18px color-mix(in srgb,var(--accent,#00f7ff) 70%,rgba(0,0,0,0));
}
.map-card .subtitle{
  margin-top:6px;
  font-size:13px;
  color:#d7e7ff;
  opacity:.75;
}
.map-card .map-desc{
  margin-top:12px;
  font-size:13px;
  line-height:1.6;
  color:#c5dcff;
  min-height:56px;
}
.map-card .tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.map-pill{
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(44,71,126,.8);
  font-size:11px;
  letter-spacing:.08em;
  color:#d0e9ff;
  background:linear-gradient(135deg,rgba(12,18,36,.85),rgba(10,16,32,.58));
  text-transform:uppercase;
}
.map-card .footer{
  margin-top:18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  color:#89b6ff;
  opacity:.8;
}
.map-card .footer span{
  display:flex;
  align-items:center;
  gap:6px;
}
.map-card .footer svg{
  width:16px;
  height:16px;
  fill:currentColor;
  opacity:.85;
}
.map-actions .btn:first-child{
  background:linear-gradient(135deg,rgba(0,247,255,.32),rgba(0,130,180,.68));
  border-color:rgba(0,180,220,.65);
  box-shadow:0 16px 36px rgba(0,247,255,.35);
}
.map-actions .btn:first-child:hover{
  box-shadow:0 22px 46px rgba(0,247,255,.45);
}
.grid2{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
}
.group{
  border:1px solid rgba(43,70,122,.78);
  border-radius:14px;
  padding:12px;
  background:linear-gradient(160deg,rgba(11,18,36,.88),rgba(12,20,40,.68));
  box-shadow:inset 0 0 32px rgba(0,247,255,.06);
}
.group h3{
  margin:0 0 10px;
  color:#c9e6ff;
  font-size:15px;
}
.melee-group{margin-top:18px;}
.melee-headline{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.melee-headline h3{margin:0;font-size:16px;letter-spacing:.18em;text-transform:uppercase;color:#d7ecff;}
.melee-headline .muted{font-size:12px;line-height:1.6;color:#adc9ff;opacity:.78;}
.melee-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
.melee-card{
  --accent:#00f7ff;
  --accent-soft:rgba(0,247,255,.18);
  --accent-glow:rgba(0,247,255,.45);
  position:relative;
  border:1px solid rgba(48,76,132,.68);
  border-radius:14px;
  padding:16px 18px 18px;
  background:linear-gradient(180deg,rgba(10,18,32,.92),rgba(8,14,28,.74));
  box-shadow:0 20px 36px rgba(0,0,0,.35);
  overflow:hidden;
  cursor:pointer;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  color:#cfe5ff;
}
.melee-card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle at center, color-mix(in srgb,var(--accent) 45%, transparent) 0%, transparent 60%);
  opacity:0;
  filter:blur(24px);
  transition:opacity .3s ease;
  pointer-events:none;
}
.melee-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  border:1px solid rgba(110,140,210,.12);
  pointer-events:none;
}
.melee-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 24px rgba(0,247,255,.16);}
.melee-card:hover::before{opacity:.35;}
.melee-card.active{border-color:var(--accent);box-shadow:0 32px 72px rgba(0,0,0,.6),0 0 32px var(--accent-glow);}
.melee-card.active::before{opacity:.55;}
.melee-card input{position:absolute;inset:0;opacity:0;pointer-events:none;}
.melee-card .blade-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8cbcff;}
.melee-card .blade-tag{padding:3px 8px;border-radius:999px;background:rgba(12,24,40,.72);border:1px solid rgba(62,88,146,.68);color:var(--accent);}
.melee-card .blade-dmg{font-weight:600;color:#f8fdff;text-shadow:0 0 12px var(--accent-glow);}
.melee-card .blade-title{margin:10px 0 0;font-size:16px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);text-shadow:0 0 14px color-mix(in srgb,var(--accent) 60%, transparent);}
.melee-card .blade-sub{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#9ec8ff;opacity:.82;}
.melee-card .blade-desc{margin:10px 0 0;font-size:12px;line-height:1.65;color:#d5e9ff;opacity:.86;}
.melee-card .blade-stats{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px;font-size:11px;letter-spacing:.08em;color:#8fb7ff;}
.melee-card .blade-stats span{padding:4px 8px;border-radius:8px;border:1px solid rgba(60,92,150,.6);background:linear-gradient(160deg,rgba(10,18,32,.9),rgba(14,24,42,.7));}
.melee-card .blade-stats span strong{color:#f8fdff;font-weight:600;}
.melee-card .blade-foot{margin-top:12px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#93c5ff;opacity:.75;}
.opt{
  margin:8px 0;
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:#9cc5ff;
  font-size:13px;
}
.item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border:1px solid rgba(42,54,90,.78);
  background:linear-gradient(140deg,rgba(11,18,36,.92),rgba(9,16,30,.68));
  border-radius:12px;
  padding:10px 12px;
  margin-top:10px;
  box-shadow:0 16px 28px rgba(0,0,0,.35);
}
.baglist{
  margin-top:18px;
  display:grid;
  gap:10px;
  max-height:340px;
  overflow-y:auto;
  padding-right:6px;
}
.baglist::-webkit-scrollbar{width:6px;}
.baglist::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(0,247,255,.65),rgba(0,140,255,.35));border-radius:999px;}
.baglist::-webkit-scrollbar-track{background:rgba(9,16,30,.45);border-radius:999px;}
.baglist{scrollbar-width:thin;scrollbar-color:rgba(0,200,255,.6) rgba(9,16,30,.45);}
.rar{padding:2px 6px;border-radius:999px;border:1px solid rgba(42,54,90,.78);}
.rar.common{color:#b7c2d1;}
.rar.uncommon{color:#68f8a7;border-color:#2d5447;}
.rar.rare{color:#45c7ff;border-color:#1f4b66;}
.rar.epic{color:#ff84ff;border-color:#5a2a66;}
.rar.legendary{color:#ffd166;border-color:#664a1f;}
.baglist .rowi{
  display:grid;
  grid-template-columns:1fr auto auto auto auto;
  gap:8px;
  align-items:center;
  border:1px solid rgba(42,54,90,.78);
  background:linear-gradient(140deg,rgba(11,18,36,.92),rgba(9,16,30,.68));
  border-radius:12px;
  padding:10px 12px;
  margin-top:10px;
}
.baglist .rowi-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
.upgrade-box{
  margin:18px 0 22px;
  padding:16px 20px;
  border:1px solid rgba(54,88,146,.6);
  border-radius:14px;
  background:linear-gradient(160deg,rgba(8,14,28,.92),rgba(12,18,42,.68));
  box-shadow:inset 0 0 40px rgba(0,247,255,.08);
  display:flex;
  gap:18px;
  align-items:flex-start;
  justify-content:space-between;
}
.upgrade-info{flex:1;display:flex;flex-direction:column;gap:6px;}
.upgrade-title{
  font-size:15px;
  letter-spacing:.08em;
  font-weight:600;
  color:var(--cyan);
  text-shadow:0 0 18px rgba(0,247,255,.32);
}
.upgrade-title span{color:#fff;margin-left:6px;font-size:13px;opacity:.85;}
.upgrade-req{font-size:13px;color:#b5c5e0;}
.upgrade-req.insufficient{color:var(--red);}
.upgrade-action{display:flex;flex-direction:column;gap:12px;align-items:flex-end;min-width:160px;}
.upgrade-cost{font-weight:600;color:#e2f3ff;text-align:right;}
.upgrade-cost.insufficient{color:var(--red);}
.btn.ghost{
  background:linear-gradient(135deg,rgba(16,27,52,.52),rgba(12,19,36,.18));
  color:#9cc5ff;
  border-color:rgba(45,71,126,.58);
  box-shadow:0 8px 18px rgba(0,0,0,.25),inset 0 0 18px rgba(0,174,255,.12);
}
.btn.ghost:hover{
  box-shadow:0 12px 24px rgba(0,0,0,.35),inset 0 0 24px rgba(0,214,255,.18);
}
.cin{
  position:fixed;
  inset:0;
  display:none;
  z-index:8;
}
.cin.show{display:block;}
.bars{
  position:absolute;
  left:0;
  right:0;
  height:12vh;
  background:#000;
}
.bar-top{top:0;}
.bar-bot{bottom:0;}
.bill{
  margin-top:10px;
  padding:10px;
  border:1px solid rgba(42,54,90,.78);
  border-radius:12px;
  background:linear-gradient(140deg,rgba(11,18,36,.92),rgba(9,16,30,.68));
  color:#9ecbff;
}
@keyframes slow-pan{
  from{transform:scale(1) translate3d(0,0,0);}
  to{transform:scale(1.05) translate3d(12px,-14px,0);}
}
@keyframes grid-scroll{
  from{transform:perspective(900px) rotateX(54deg) translateY(80px) translateZ(0);}
  to{transform:perspective(900px) rotateX(54deg) translateY(160px) translateZ(0);}
}
@keyframes aurora-float{
  0%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(20px,-10px,0) scale(1.05);}
  100%{transform:translate3d(-10px,16px,0) scale(.98);}
}