:root{
  --bg:#05010b;
  --panel:rgba(18,8,26,0.72);
  --panel-strong:rgba(26,10,36,0.88);
  --line:rgba(255,160,220,0.18);
  --text:#f8eefc;
  --muted:#c8b7d3;
  --accent:#ff4f8b;
  --accent2:#8a5dff;
  --good:#7dffbe;
  --warn:#ffcd70;
  --bad:#ff6f7f;
  --legend:#ffd76e;
  --shadow:0 12px 32px rgba(0,0,0,0.5);
}
*{box-sizing:border-box}
html,body{
  margin:0;height:100%;overflow:hidden;
  background:radial-gradient(circle at 20% 15%, #180516 0%, #09010d 35%, #040108 100%);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text)
}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
#hud{
  position:fixed;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;
  padding:16px 18px 18px;
}
.hud-row{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.panel{
  background:linear-gradient(180deg, rgba(34,14,42,0.78), rgba(17,8,24,0.74));
  border:1px solid var(--line);
  box-shadow:var(--shadow), inset 0 0 26px rgba(255,255,255,0.035);
  backdrop-filter:blur(12px) saturate(1.08);
  border-radius:18px;
}
#statusPanel{padding:12px 14px; min-width:310px}
#bossPanel{padding:10px 14px; min-width:320px; opacity:0; transform:translateY(-10px); transition:all .25s ease}
#bossPanel.show{opacity:1; transform:translateY(0)}
.label{font-size:12px; text-transform:uppercase; letter-spacing:.18em; color:#e9c6dc; opacity:.78}
.big{font-size:18px; font-weight:800; letter-spacing:.02em}
.bar{
  width:100%; height:12px; background:rgba(255,255,255,0.08); border-radius:999px; overflow:hidden; margin-top:6px; position:relative
}
.bar > span{
  position:absolute; left:0; top:0; bottom:0; width:50%;
  background:linear-gradient(90deg, #ff567e, #ff86b5 45%, #ffd0e1 100%);
  box-shadow:0 0 18px rgba(255,100,158,.6), inset 0 0 12px rgba(255,255,255,.16);
  border-radius:999px;
}
.bar.blue > span{
  background:linear-gradient(90deg, #79a7ff, #a899ff 46%, #dbcfff 100%);
  box-shadow:0 0 18px rgba(149,129,255,.55), inset 0 0 12px rgba(255,255,255,.16);
}
.bar.gold > span{
  background:linear-gradient(90deg, #f7b948, #ffd76e 50%, #fff0bd 100%);
  box-shadow:0 0 18px rgba(255,205,112,.55), inset 0 0 12px rgba(255,255,255,.16);
}
.row{display:flex; gap:10px; align-items:center; justify-content:space-between}
.muted{color:var(--muted)}
.tiny{font-size:12px}
.miniGrid{display:grid; grid-template-columns:repeat(2, auto); gap:6px 14px; margin-top:8px}
#weaponsPanel{
  padding:12px 14px; min-width:250px; max-width:min(34vw,380px);
}
#weaponsList{display:grid; gap:8px; margin-top:8px}
.weaponItem{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 0; border-top:1px solid rgba(255,255,255,0.06)}
.weaponItem:first-child{border-top:none; padding-top:0}
.wname{font-weight:700; font-size:13px}
.lvlDots{display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end}
.lvlDots i{width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.12); box-shadow:inset 0 0 8px rgba(0,0,0,.35)}
.lvlDots i.on{background:linear-gradient(180deg, #ff76a7, #9d6bff); box-shadow:0 0 10px rgba(181,120,255,.55)}
.relicTag{
  display:inline-flex; align-items:center; gap:6px; margin-top:6px; padding:6px 10px;
  border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.07);
  font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:#ffe6a6
}
#centerMessage{
  position:fixed; left:50%; top:18%; transform:translateX(-50%); pointer-events:none; text-align:center;
  opacity:0; transition:opacity .2s ease, transform .2s ease;
  text-shadow:0 8px 32px rgba(0,0,0,.55), 0 0 26px rgba(255,120,190,.22);
}
#centerMessage.show{opacity:1; transform:translateX(-50%) translateY(0)}
#centerMessage .title{
  font-size:34px; line-height:1; font-weight:900; letter-spacing:.06em; text-transform:uppercase;
  background:linear-gradient(180deg,#fff7fc,#ffbfd9 50%, #ff74af 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.36));
}
#centerMessage .sub{margin-top:8px; font-size:13px; letter-spacing:.18em; color:#f0c5dc; text-transform:uppercase}
#overlay{position:fixed; inset:0; display:grid; place-items:center; background:radial-gradient(circle at center, rgba(35,5,24,.26), rgba(2,1,5,.72)); transition:opacity .22s ease; padding:18px}
.hidden{display:none !important}
.screen{
  width:min(1060px,100%); max-height:min(92vh,860px); overflow:auto; padding:28px;
  background:linear-gradient(180deg, rgba(21,7,29,0.88), rgba(9,4,14,0.92));
  border:1px solid rgba(255,186,229,0.14); border-radius:28px; box-shadow:0 20px 80px rgba(0,0,0,.55), inset 0 0 42px rgba(255,255,255,.03);
  backdrop-filter:blur(14px) saturate(1.15);
}
#titleScreen{
  text-align:center; padding:28px 26px 26px;
}
#titleScreen .kicker{
  font-size:12px; text-transform:uppercase; letter-spacing:.34em; color:#ffbfd8; opacity:.9; margin-bottom:14px
}
#titleScreen h1{
  margin:0;
  font-size:clamp(44px, 8vw, 88px);
  line-height:.92; letter-spacing:.06em; text-transform:uppercase;
  background:linear-gradient(180deg,#fff8fe 0%, #ffc6dc 32%, #ff6f9d 65%, #9b65ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 16px 42px rgba(0,0,0,.5)) drop-shadow(0 0 36px rgba(255,108,170,.16));
}
#titleScreen p{
  margin:16px auto 0; max-width:820px; color:#e8d5f0; font-size:17px; line-height:1.7
}
.titleGrid{
  margin-top:26px; display:grid; grid-template-columns:1.25fr .95fr; gap:16px; text-align:left
}
.infoCard{
  padding:18px 18px 16px; border-radius:20px; background:linear-gradient(180deg, rgba(42,14,50,0.65), rgba(16,7,23,0.7));
  border:1px solid rgba(255,255,255,.08)
}
.infoCard h3{margin:0 0 8px; font-size:14px; text-transform:uppercase; letter-spacing:.18em; color:#f3bfd7}
.infoCard .small{font-size:13px; line-height:1.65; color:#d8c6e2}
.badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.badge{
  padding:8px 11px; border-radius:999px; border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05); font-size:12px; letter-spacing:.06em; color:#f0e1f8
}
.buttonRow{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:26px}
button{
  appearance:none; border:none; cursor:pointer; pointer-events:auto;
  color:#fff8fc; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:15px 18px; border-radius:16px; font-size:13px;
  background:linear-gradient(180deg, #ff4f8b, #b945ff);
  box-shadow:0 12px 30px rgba(177,73,255,.26), inset 0 0 12px rgba(255,255,255,.18);
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
button:hover{transform:translateY(-1px); filter:brightness(1.04)}
button.secondary{
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  box-shadow:inset 0 0 10px rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.2)
}
#levelScreen h2, #gameOverScreen h2{
  margin:0; text-align:center; font-size:42px; letter-spacing:.08em; text-transform:uppercase;
  background:linear-gradient(180deg,#fffaf7,#ffdca2 45%, #ffbe5e 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
#levelScreen .sub, #gameOverScreen .sub{
  text-align:center; margin-top:6px; color:#efd9e6; letter-spacing:.18em; text-transform:uppercase; font-size:12px
}
#cardGrid{
  margin-top:22px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px
}
.upgradeCard{
  position:relative; padding:18px 16px 16px; border-radius:22px; overflow:hidden; min-height:225px;
  border:1px solid rgba(255,255,255,.09);
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.08), transparent 42%),
    linear-gradient(180deg, rgba(47,19,58,0.88), rgba(17,8,27,0.93));
  box-shadow:var(--shadow), inset 0 0 28px rgba(255,255,255,.03);
  display:flex; flex-direction:column; justify-content:space-between; gap:10px; cursor:pointer; pointer-events:auto;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.upgradeCard:hover{transform:translateY(-2px) scale(1.01); border-color:rgba(255,255,255,.18)}
.upgradeCard::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:linear-gradient(130deg, transparent 0%, rgba(255,255,255,.08) 12%, transparent 22%);
  transform:translateX(-120%);
  animation:shimmer 3.8s linear infinite;
}
.upgradeCard.common{outline:1px solid rgba(255,255,255,.04)}
.upgradeCard.rare{box-shadow:0 16px 34px rgba(124,88,255,.18), inset 0 0 28px rgba(255,255,255,.03)}
.upgradeCard.legendary{
  border-color:rgba(255,215,110,.22);
  background:
    radial-gradient(circle at 100% 0%, rgba(255,221,149,.14), transparent 45%),
    linear-gradient(180deg, rgba(69,38,11,0.82), rgba(34,15,23,0.93));
  box-shadow:0 16px 40px rgba(255,193,64,.22), inset 0 0 34px rgba(255,255,255,.03);
}
.upgradeCard .tier{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:#f6d9e7; opacity:.9
}
.upgradeCard.legendary .tier{color:#ffe6a6}
.upgradeCard .name{
  font-size:24px; font-weight:900; line-height:1.06; letter-spacing:.02em; margin-top:6px
}
.upgradeCard .desc{
  font-size:14px; line-height:1.6; color:#ead9ef;
  min-height:84px;
}
.upgradeCard .meta{
  display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:8px
}
.upgradeCard .key{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-weight:900;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.09)
}
.upgradeCard .choose{
  font-size:12px; text-transform:uppercase; letter-spacing:.18em; color:#ffd5e5
}
#summaryGrid{
  margin-top:22px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px
}
.summary{
  padding:16px; border-radius:18px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07)
}
.summary .n{font-size:30px; font-weight:900}
.summary .t{font-size:12px; text-transform:uppercase; letter-spacing:.18em; color:#e5cade}
.footNote{margin-top:18px; text-align:center; color:#d9c5e7; font-size:13px}
.kbd{display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); font-size:11px; font-weight:800}
.flex{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
@keyframes shimmer{0%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@media (max-width: 920px){
  .titleGrid{grid-template-columns:1fr}
  #cardGrid{grid-template-columns:1fr}
  #summaryGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #weaponsPanel{max-width:unset}
  #statusPanel{min-width:unset}
}
@media (max-width: 640px){
  #hud{padding:10px}
  .hud-row{flex-direction:column}
  #statusPanel,#weaponsPanel,#bossPanel{width:100%}
  .screen{padding:20px}
  #summaryGrid{grid-template-columns:1fr}
}