@import url('https://fonts.googleapis.com/css2?family=BBH+Sans+Bartle&family=Bungee&family=Candal&family=Outfit:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Righteous&display=swap');
/* ============================
   VIDE Styles
   ============================ */
:root{
  --bg:#05060a;
  --grid1: rgba(60,200,255,0.08);
  --grid2: rgba(120,80,255,0.04);
  --ui:#e6f7ff;
  --accent:#00ffd5;
  --danger:#ff5c5c;
  --panel: rgba(0,0,0,0.45);
  --glass: rgba(255,255,255,0.04);
}
*{box-sizing:border-box; font-family: "Righteous", sans-serif; color: #fff;user-select: none;} 
html,body{height:100%;margin:0;background:var(--bg); color: #fff;-webkit-font-smoothing:antialiased;overflow:hidden}
canvas{display:block;width:100vw;height:100vh}

/* HUD */
.hud{
  position:fixed;
  left:16px;
  top:22px;
  display:flex;
  gap:12px;
  align-items:center;
  z-index:60;
  pointer-events:none;
}

/* Modern HP/Shield Bars */
.hp-shield-container{
  position:fixed;
  left:16px;
  bottom:26px;
  z-index:60;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  gap:8px;
  background:linear-gradient(135deg, rgba(20, 20, 40, 0.7),rgba(10, 10, 30, 0.5));
  padding:16px 18px;
  border-radius:16px;
  backdrop-filter:blur(12px);
  border:2px solid rgba(255,255,255,0.15);
  box-shadow:0 8px 32px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08);
  min-width:480px;
}

.stat-row{
  display:flex;
  align-items:center;
  gap:12px;
}

.stat-icon-label{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:80px;
}

.stat-label{
  font-family:"Bungee",sans-serif;
  font-size:0.9rem;
  font-weight:600;
  color:rgba(255,255,255,0.95);
  text-transform:uppercase;
  letter-spacing:1px;
}

.stat-bar-wrapper{
  flex:1;
  display:flex;
  align-items:center;
  position:relative;
}

.hp-bar, .shield-bar{
  flex:1;
  height:32px;
  border-radius:20px;
  overflow:visible;
  position:relative;
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(6px);
  border:2px solid rgba(255,255,255,0.2);
  box-shadow:inset 0 2px 6px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3);
}

.hp-fill{
  height:100%;
  background:linear-gradient(90deg,#ff4757,#ff6b6b);
  transition:width 0.3s ease;
  position:relative;
  overflow:hidden;
  box-shadow:0 0 15px rgba(255,107,107,0.6), inset 0 2px 8px rgba(255,255,255,0.2);
  border-radius:18px;
}

.shield-fill{
  height:100%;
  background:linear-gradient(90deg,#4a90e2,#66b3ff);
  transition:width 0.3s ease;
  position:relative;
  overflow:hidden;
  box-shadow:0 0 15px rgba(102,179,255,0.6), inset 0 2px 8px rgba(255,255,255,0.2);
  border-radius:18px;
}

.hp-fill::after, .shield-fill::after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);
  animation:shimmer 2s infinite;
}

@keyframes shimmer{
  0%{
    transform:translateX(-100%);
  }
  100%{
    transform:translateX(100%);
  }
}

.stat-value{
  font-family:"Righteous",sans-serif;
  font-size:1rem;
  font-weight:400;
  color:#ffffff;
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  text-shadow:0 0 6px rgb(0, 0, 0);
  z-index:10;
  pointer-events:none;
}

/* Damage/Shield loss effects */
.hp-bar.damage-flash{
  animation:damageFlash 0.4s ease;
}
.shield-bar.shield-flash{
  animation:shieldFlash 0.4s ease;
}

@keyframes damageFlash{
  0%,100%{
    transform:scale(1);box-shadow:0 0 0 rgba(255,71,87,0);
  }
  50%{
    transform:scale(1.02);box-shadow:0 0 20px rgba(255,71,87,0.6);
  }
}

@keyframes shieldFlash{
  0%,100%{
    transform:scale(1);box-shadow:0 0 0 rgba(55,66,250,0);
  }
  50%{
    transform:scale(1.02);box-shadow:0 0 20px rgba(55,66,250,0.6);
  }
}

/* Modern Phase/Score Display */
.modern-stats{
  position:fixed;
  left:16px;
  top:10%;
  z-index:60;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.stat-card{
  background:linear-gradient(135deg,rgba(255,255,255,0.08),rgba(255,255,255,0.02));
  backdrop-filter:blur(8px);
  border-radius:12px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,0.1);
  min-width:120px;
}

.stat-label{
  font-size:10px;
  color:rgba(255,255,255,0.6);
  text-transform:uppercase;
  letter-spacing:0.8px;
  margin-bottom:2px;
  font-weight:500;
}

.stat-value{
  font-size:16px;
  font-weight:700;
  color:#fff;
  text-shadow:0 0 10px rgba(255,255,255,0.3);
}

.stat-value.phase{
  color:#00ffd5;
  text-shadow:0 0 15px rgba(0,255,213,0.5);
}
.stat-value.score{
  color:#ffd54a;
  text-shadow:0 0 15px rgba(255,213,74,0.5);
}
.coin-box{
  border:1px solid rgba(255,255,255,0.1);
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(255, 228, 141, 0.13), rgba(97, 97, 97, 0.26));
  box-shadow: 0 6px 24px rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  pointer-events:auto;
  cursor:pointer;
  transition:transform .18s ease;
}
.coin-box:hover{
  transform:translateY(-2px)
}
.coin-box .icon{
  font-size:18px;
  color:#ffd54a
}
.coin-amount{
  font-weight:800;
  font-size:16px
}
.coin-flash{
  transition:transform .24s ease, background .24s ease
}
.coin-flash.flash{
  transform:scale(1.06);
  background:linear-gradient(135deg, rgba(255, 210, 62, 0.233), rgba(97, 97, 97, 0.26))}

.stats{
  display:flex;
  flex-direction:column;
  padding:8px 12px;
  border-radius:12px;
  background:var(--panel);
  gap:6px;
  font-size:13px;
  pointer-events:auto;
  display:none;
}

/* Shop button */
.btn-shop{
  position:fixed;
  right:18px;
  top:12px;
  z-index:9999260;
  padding:8px 12px;
  background:linear-gradient(90deg,#122, #0b0f15);
  border-radius:12px;
  color:var(--ui);
  border:1px solid rgba(255,255,255,0.04);
  cursor:pointer;
  pointer-events:auto;
  box-shadow:0 8px 28px rgba(0,0,0,0.6)
}
.btn-shop:hover{
  transform:translateY(-2px)
}

/* Shop Overlay */
.shop{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(0.98);
  width:min(1000px,96vw);
  max-height:86vh;
  padding:24px;
  z-index:9999200;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(20, 20, 40, 0.96), rgba(10, 10, 30, 0.98));
  backdrop-filter: blur(12px);
  box-shadow:0 20px 60px rgba(255, 208, 0, 0.281), 0 0 0 1px rgba(238, 255, 0, 0.15);
  display:none;
  border:2px solid rgba(238, 255, 0, 0.25);
  overflow:auto;
}
.shop.open{
  display:block;
  animation:pop .14s ease-out forwards
}
@keyframes pop{
  from{
    transform:translate(-50%,-50%) scale(.96);opacity:0
  }
  to{
    transform:translate(-50%,-50%) scale(1);opacity:1
  }
}
.shop h2{
  margin:0 0 10px 0
}
.shop-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:0 0 20px 0;
  border-bottom:2px solid rgba(0, 255, 213, 0.15);
  margin-bottom:24px;
}
.shop-title-main{
  font-family:"Bungee",sans-serif;
  font-size:1.8rem;
  margin-bottom:8px;
  color:#ffc400;
  text-shadow:0 0 20px rgba(255, 196, 0, 0.5), 0 0 40px rgba(255, 208, 0, 0.2);
  letter-spacing:1px;
}
.shop-title-sub{
  font-size:0.95rem;
  color:rgba(255,255,255,0.65);
  line-height:1.5;
  max-width:500px;
}
.shop-title{display:flex;flex-direction:column;gap:4px}
.shop-balance{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 20px;
  border-radius:12px;
  margin-top:42px;
  background:linear-gradient(135deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.1));
  border:1px solid rgba(255, 255, 255, 0.3);
  flex-shrink:0;
}
.shop-balance i{
  color:#ffd700;
  font-size:1.3rem;
  filter:drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}
.shop-balance #shopCoins{
  font-weight:800;
  color:#ffffff;
  font-size:1.3rem;
  text-shadow:0 0 15px rgba(255, 215, 0, 0.5);
  font-family:"Righteous",sans-serif;
}
.shop-content{display:flex;flex-direction:column;gap:12px}
.shop-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:12px;
}

/* Upgrade card */
.upgrade{
  padding:16px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  border:1px solid rgba(0, 255, 213, 0.1);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  will-change: transform, box-shadow;
  backface-visibility: hidden;
  transform: translateZ(0);
}
.upgrade:hover{ 
  transform: translateY(-2px); 
  box-shadow: 0 8px 30px rgba(0, 255, 213, 0.15), 0 0 0 1px rgba(0, 255, 213, 0.2); 
  border-color: rgba(0, 255, 213, 0.25);
}
.upgrade.affordable{ 
  border-color: rgba(0,255,160,0.35); 
  box-shadow: 0 4px 20px rgba(0,255,160,0.15), inset 0 1px 0 rgba(0,255,160,0.1); 
  background:linear-gradient(135deg, rgba(0,255,160,0.06), rgba(0,255,160,0.03));
}
.upgrade.unaffordable{ 
  border-color: rgba(255,80,80,0.2); 
  box-shadow: 0 4px 20px rgba(255,60,60,0.1); 
  background:linear-gradient(135deg, rgba(255,60,60,0.04), rgba(255,60,60,0.02));
}
.upgrade.maxed{ 
  border-color: rgba(180,180,180,0.15); 
  opacity:0.75; 
  background:linear-gradient(135deg, rgba(100,100,100,0.04), rgba(80,80,80,0.02));
}
.upgrade .meta{ display:flex; gap:12px; align-items:center; color:var(--ui); flex:1 1 auto; min-width:0; }
.upgrade .meta > .info{ display:flex; flex-direction:column; gap:4px; flex:1 1 auto; min-width:0; }
.upgrade b{ 
  display:block; 
  white-space:nowrap; 
  overflow:hidden; 
  text-overflow:ellipsis;
  font-size:1.05rem;
  color:rgba(255,255,255,0.95);
}
.upgrade small{
  display:block;
  font-size:13px;
  color:rgba(255,255,255,0.55);
  line-height:1.4;
}
.upgrade .right{ display:flex; align-items:flex-end; gap:8px; flex:0 0 auto; flex-direction:column; }
.upgrade .price{
  display:flex; 
  align-items:center; 
  gap:6px;
  padding:8px 12px; 
  border-radius:999px; 
  margin-top:4px;
  font-weight:800; 
  color:#ffd700; 
  text-shadow:0 0 12px rgba(255,215,0,0.5);
  background:rgba(255, 215, 0, 0.08);
  border:1px solid rgba(255, 215, 0, 0.2);
}
.upgrade .price i{ 
  color:#ffd700;
  filter:drop-shadow(0 0 4px rgba(255, 215, 0, 0.4));
}

.upgrade button{
  background:linear-gradient(135deg,#00cc5e,#00ff7f);
  border:none;
  padding:10px 16px;
  border-radius:10px;
  font-weight:800;
  color:#fff;
  cursor:pointer;
  box-shadow: 0 4px 15px rgba(0,255,100,0.25);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  font-size:0.95rem;
}
.upgrade button:hover{ 
  transform: translateY(-2px); 
  box-shadow: 0 6px 20px rgba(0,255,120,0.35);
  filter:brightness(1.1);
}
.upgrade button:disabled{ cursor:not-allowed; filter: grayscale(0.4) brightness(0.8); box-shadow:none; }
.upgrade.unaffordable button{ 
  background:linear-gradient(135deg,#ff5566,#ff7788); 
  box-shadow: 0 4px 15px rgba(255,80,80,0.2); 
}
.upgrade.maxed button{ 
  background:linear-gradient(135deg,#555,#777); 
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.upgrade.affordable button{ background:linear-gradient(135deg,#00a516,#00ff4c); }

/* Level progress */
.upgrade .levelbar{ 
  width:100%; 
  height:6px; 
  border-radius:8px; 
  background:rgba(0,0,0,0.3); 
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.05);
}
.upgrade .levelbar > span{ 
  display:block; 
  height:100%; 
  background:linear-gradient(90deg,#00ffd5,#00aaff); 
  box-shadow:0 0 12px rgba(0,255,213,0.5);
  transition: width 0.3s ease;
}
.upgrade .levels{ 
  font-size:11px; 
  color:rgba(255,255,255,0.6); 
  margin-top:6px; 
  white-space:nowrap;
  font-weight:600;
}

/* Purchase pop effect (longer, more visible) */
.upgrade.purchase-pop{ position:relative; animation: purchasePop 1.1s cubic-bezier(.22,1,.36,1); }
.upgrade.purchase-pop::after{
  content:''; position:absolute; inset:0; border-radius:14px; pointer-events:none;
  background: radial-gradient(ellipse at center, rgba(0,255,170,0.26), rgba(0,255,170,0.0) 60%);
  opacity:0; transform: scale(0.85);
  animation: purchaseRipple 0.9s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes purchasePop{
  0%{ transform:scale(1); box-shadow:0 12px 30px rgba(0,0,0,0.35); }
  24%{ transform:scale(1.06); box-shadow:0 22px 40px rgba(0,255,160,0.35); }
  55%{ transform:scale(1.02); box-shadow:0 16px 34px rgba(0,255,160,0.2); }
  100%{ transform:scale(1); box-shadow:0 12px 30px rgba(0,0,0,0.35); }
}
@keyframes purchaseRipple{
  0%{ opacity:0.0; transform: scale(0.85); }
  25%{ opacity:0.75; transform: scale(1.05); }
  100%{ opacity:0; transform: scale(1.2); }
}

/* Prevent horizontal overflow inside shop */
.shop{ overflow:auto; }

/* Custom Scrollbar for Shop */
.shop::-webkit-scrollbar {
  width: 12px;
}

.shop::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.shop::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 217, 0, 0.7), rgba(197, 200, 0, 0.9));
  border-radius: 10px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 15px rgba(255, 217, 0, 0.5);
}

.shop::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(255, 217, 0, 0.9), rgb(236, 240, 0));
  box-shadow: 0 0 20px rgba(255, 238, 0, 0.8);
}

.shop::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, rgba(255, 251, 0, 0.9), rgb(240, 224, 0));
}

/* Shop Close Button (like Tutorial) */
.close-shop {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transform-origin: center center;
  will-change: transform, color;
}

.close-shop:hover {
  color: #ff6b6b;
  transform: rotate(90deg);
}

/* Notifications & boss bar */
.notif{
  font-family: "Righteous", sans-serif;
  position:fixed;
  left:50%;
  top:8%;
  transform:translateX(-50%);
  background:linear-gradient(90deg,#2b071391,#1b0b0b81);
  padding:12px 18px;
  border-radius:12px;color:#fff;
  font-weight:800;
  z-index:300;
  opacity:0;
  pointer-events:none;
  border:2px solid rgba(255, 0, 0, 0.377);
  backdrop-filter: blur(6px);
  transition:opacity .2s}
.notif.show{
  opacity:1
}

/* Confirmation notification */
.confirm-notif{
  font-family: "Righteous", sans-serif;
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:linear-gradient(135deg,rgba(20, 20, 20, 0.507)rgba(20, 20, 20, 0.404));
  backdrop-filter:blur(28px);
  padding:24px 32px;
  border-radius:16px;
  color:#fff;
  font-weight:400;
  z-index:1600;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s;
  text-align:center;
  border:2px solid rgba(255, 0, 55, 0.637);
  box-shadow:0 0 60px rgba(255, 0, 64, 0.486)
}
.confirm-notif.show{
  opacity:1;
  pointer-events:auto
}
.confirm-notif .message{
  margin-bottom:20px;
  font-size:16px;
  line-height:1.4;
  color: rgb(255, 255, 255);
}
.confirm-notif .message small{
  color: rgb(255, 15, 15);
}
.confirm-notif .buttons{
  display:flex;
  gap:12px;
  justify-content:center
}
.confirm-notif .confirm-btn{
  background:linear-gradient(135deg,#00a5163d,#00ff4c49);
  border:1px solid #00ca1b;
  padding:10px 20px;
  border-radius:8px;
  font-family:"Righteous",sans-serif;
  font-weight:600;
  color:#fff;
  cursor:pointer;
  transition:all 0.3s ease;
  min-width:80px
}
.confirm-notif .confirm-btn:hover{
  transform:translateY(-2px);
  border:1px solid #45ff5d;
  box-shadow:0 6px 20px rgba(55, 255, 82, 0.61);
}
.confirm-notif .cancel-btn{
  background:linear-gradient(135deg,#ff47564d,#ff6b7a42);
  border:1px solid #dd0016;
  padding:10px 20px;
  border-radius:8px;
  font-family:"Righteous",sans-serif;
  font-weight:600;
  color:#fff;
  cursor:pointer;
  transition:all 0.3s ease;
  min-width:80px
}
.confirm-notif .cancel-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(255,71,87,0.4)
}

/* Session summary overlay */
#sessionSummaryOverlay{
  position:fixed;
  inset:0;
  background:rgba(4, 8, 18, 0.82);
  backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.22s ease;
  z-index:999999999999;
}

#sessionSummaryOverlay.show{
  opacity:1;
  pointer-events:auto;
}

.session-summary-card{
  width:min(520px, 92vw);
  background:linear-gradient(160deg, rgba(10, 18, 36, 0.94), rgba(7, 12, 26, 0.92));
  border:2px solid rgba(0, 255, 213, 0.25);
  border-radius:28px;
  padding:36px 42px 32px;
  box-shadow:0 26px 90px rgba(0, 0, 0, 0.65), inset 0 0 36px rgba(0, 255, 213, 0.16);
  display:flex;
  flex-direction:column;
  gap:28px;
  transform:translateY(12px);
  transition:transform 0.22s ease;
}

#sessionSummaryOverlay.show .session-summary-card{
  transform:translateY(0);
}

.session-summary-card h2{
  margin:0;
  font-size:2.4rem;
  text-align:center;
  letter-spacing:2px;
  text-transform:uppercase;
  text-shadow:0 0 26px rgba(0, 255, 140, 0.55);
}


.session-summary-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
}

.session-summary-item{
  background:linear-gradient(165deg, rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0.54));
  border:1px solid rgba(255, 255, 255, 0.08);
  border-radius:20px;
  padding:20px 18px 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  text-align:center;
  box-shadow:0 14px 38px rgba(0,0,0,0.55);
  position:relative;
  overflow:hidden;
}

.session-summary-item::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at top, rgba(255,255,255,0.12), transparent 70%);
  opacity:0.4;
  pointer-events:none;
}

.session-summary-icon{
  width:64px;
  height:64px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.08);
  box-shadow:0 0 24px rgba(255,255,255,0.18), inset 0 0 18px rgba(255,255,255,0.12);
}

.session-summary-icon::before{
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  font-size:1.8rem;
}

.session-summary-icon.skull{
  background:linear-gradient(135deg, rgba(255,87,34,0.35), rgba(220,20,60,0.25));
  box-shadow:0 0 32px rgba(255,87,34,0.4);
}
.session-summary-icon.skull::before{
  content:"\f54c";
}

.session-summary-icon.coins{
  background:linear-gradient(135deg, rgba(255,215,0,0.28), rgba(255,165,0,0.18));
  box-shadow:0 0 28px rgba(255,215,0,0.35);
}
.session-summary-icon.coins::before{
  content:"\f51e";
}

.session-summary-icon.streak{
  background:linear-gradient(135deg, rgba(255,69,0,0.3), rgba(255,140,0,0.2));
  box-shadow:0 0 28px rgba(255,107,0,0.32);
}
.session-summary-icon.streak::before{
  content:"\f06d";
}

.session-summary-icon.score{
  background:linear-gradient(135deg, rgba(0,191,255,0.28), rgba(0,128,255,0.2));
  box-shadow:0 0 28px rgba(0,191,255,0.32);
}
.session-summary-icon.score::before{
  content:"\f201";
}

.session-summary-icon.time{
  background:linear-gradient(135deg, rgba(0,255,170,0.28), rgba(0,200,150,0.2));
  box-shadow:0 0 28px rgba(0,255,170,0.32);
}
.session-summary-icon.time::before{
  content:"\f017";
}

.session-summary-item .label{
  font-size:0.95rem;
  text-transform:uppercase;
  letter-spacing:1.6px;
  color:rgba(255,255,255,0.68);
}

.session-summary-item .value{
  font-size:2.2rem;
  font-weight:800;
  text-shadow:0 0 18px rgba(0,0,0,0.45);
}

.session-summary-item.streak-card .value{
  color:#ff5c5c;
  text-shadow:0 0 20px rgba(255,92,92,0.6);
}

.session-summary-item .value.coins{
  color:#ffd54a;
  text-shadow:0 0 20px rgba(255, 213, 74, 0.7);
}

.session-summary-item.score-card .value{
  color:#00d2ff;
  text-shadow:0 0 22px rgba(0,210,255,0.6);
}

.session-summary-item.time-card .value{
  color:#4dffcf;
  text-shadow:0 0 22px rgba(77,255,207,0.6);
}

.session-summary-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:1rem;
  padding:14px 18px;
  border-radius:16px;
  background:linear-gradient(120deg, rgba(0, 255, 213, 0.15), rgba(0, 120, 255, 0.12));
  border:1px solid rgba(0, 255, 213, 0.22);
}

.session-summary-close{
  align-self:center;
  padding:14px 38px;
  border-radius:999px;
  border:none;
  background:linear-gradient(135deg, #00ff95, #00d7ff);
  font-weight:800;
  font-size:1rem;
  color:#03121f;
  cursor:pointer;
  box-shadow:0 18px 46px rgba(0, 255, 213, 0.38);
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}

.session-summary-close:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 55px rgba(0, 255, 213, 0.5);
}

.session-summary-close:active{
  transform:translateY(0);
  box-shadow:0 12px 36px rgba(0, 255, 213, 0.32);
}

@media (max-width:720px){
  .session-summary-card{
    padding:28px 24px 26px;
    gap:24px;
  }

  .session-summary-card h2{
    font-size:2rem;
  }

  .session-summary-grid{
    grid-template-columns:repeat(1, minmax(0, 1fr));
  }

  .session-summary-meta{
    flex-direction:column;
    text-align:center;
  }
}

.session-summary-sparkles{
  position:fixed;
  pointer-events:none;
  width:0;
  height:0;
  z-index:999999999998;
}

.session-summary-sparkles span{
  position:absolute;
  left:0;
  top:0;
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,255,255,0));
  opacity:0;
  transform:translate(-50%, -50%) scale(0.6);
  animation:sparklePop 1.8s ease forwards;
  animation-delay:var(--delay);
}

.session-summary-sparkles.show span{
  animation-play-state:running;
}

@keyframes sparklePop{
  0%{
    opacity:0;
    transform:translate(-50%, -50%) scale(0.6);
  }
  12%{
    opacity:1;
  }
  40%{
    transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.05);
    opacity:0.85;
  }
  75%{
    opacity:0.4;
  }
  100%{
    transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.3);
    opacity:0;
  }
}
.boss-bar{
  position:fixed;
  left:50%;
  top:6%;
  transform:translateX(-50%);
  width:72%;
  max-width:1200px;
  height:14px;
  border-radius:10px;
  overflow:hidden;
  background:rgba(255, 0, 0, 0.05);
  z-index:290;display:none
}
.boss-fill{height:100%;background:linear-gradient(90deg,#ff6b6b,#ff00ff);width:0%}

/* hint */
.hint{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;background:rgba(0,0,0,0.45);padding:8px 12px;border-radius:10px;font-size:13px;z-index:60}

/* small */
.small{font-family: "Righteous", sans-serif;font-size:12px;color:rgba(255,255,255,0.7)}

/* flash effect for hit */
.screen-flash{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none;background:rgba(255,0,0,0.06);z-index:999;display:none}

/* Startscreen */
.startscreen{
  position:fixed;left:0;top:0;width:100%;height:100%;background:linear-gradient(135deg,#0a0a0f,#1a1a2e);z-index:99999999999;display:flex;flex-direction:column;align-items:center;justify-content:center;backdrop-filter:blur(10px);overflow:hidden;
}

.startscreen-grid{
  position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0.4;
}

.startscreen-content{
  position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;
}

.startscreen-right-stats{
  position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:10;display:flex;flex-direction:column;gap:14px;
}

@keyframes statCardFadeIn {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.right-stat-card{
  background:linear-gradient(135deg,rgba(255,255,255,0.08),rgba(255,255,255,0.02));
  backdrop-filter:blur(12px);
  border-radius:16px;
  padding:16px;
  border:2px solid rgba(255,255,255,0.12);
  min-width:180px;
  display:flex;
  align-items:center;
  gap:14px;
  transition:all 0.3s ease;
  box-shadow:0 4px 20px rgba(0,0,0,0.2);
  animation: statCardFadeIn 0.6s ease-out forwards;
  opacity: 0;
}

.streak-card { animation-delay: 0.1s; }
.kills-card { animation-delay: 0.2s; }
.coins-card { animation-delay: 0.25s; }
.phase-card { animation-delay: 0.3s; }
.boss-card { animation-delay: 0.4s; }
.time-card { animation-delay: 0.5s; }

.right-stat-card:hover{
  transform:translateX(-5px);
  border-color:rgba(255,255,255,0.25);
  box-shadow:0 6px 30px rgba(0,0,0,0.3);
}

/* Enhanced glow on hover */
.streak-card:hover .right-stat-value{
  text-shadow:0 0 15px rgba(255,107,53,0.8), 0 0 30px rgba(255,107,53,0.5);
}

.kills-card:hover .right-stat-value{
  text-shadow:0 0 15px rgba(255,140,0,0.8), 0 0 30px rgba(255,140,0,0.5);
}

.coins-card:hover .right-stat-value{
  text-shadow:0 0 15px rgba(255,215,0,0.8), 0 0 30px rgba(255,215,0,0.5);
}

.phase-card:hover .right-stat-value{
  text-shadow:0 0 15px rgba(0,191,255,0.8), 0 0 30px rgba(0,191,255,0.5);
}

.boss-card:hover .right-stat-value{
  text-shadow:0 0 15px rgba(220,20,60,0.8), 0 0 30px rgba(220,20,60,0.5);
}

.time-card:hover .right-stat-value{
  text-shadow:0 0 15px rgba(56,239,125,0.8), 0 0 30px rgba(56,239,125,0.5);
}

.stat-icon{
  width:48px;
  height:48px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.stat-icon svg{
  width:28px;
  height:28px;
  stroke-width:2.5;
}

.stat-content{
  flex:1;
  text-align:left;
}

/* Individual card colors */
.streak-card .stat-icon{
  background:linear-gradient(135deg,rgba(255,107,53,0.2),rgba(255,107,53,0.1));
  color:#ff6b35;
}

.kills-card .stat-icon{
  background:linear-gradient(135deg,rgba(255,140,0,0.2),rgba(255,140,0,0.1));
  color:#ff8c00;
}

.coins-card .stat-icon{
  background:linear-gradient(135deg,rgba(255,215,0,0.2),rgba(255,215,0,0.1));
  color:#ffd700;
}

.phase-card .stat-icon{
  background:linear-gradient(135deg,rgba(0,191,255,0.2),rgba(0,191,255,0.1));
  color:#00bfff;
}

.boss-card .stat-icon{
  background:linear-gradient(135deg,rgba(220,20,60,0.2),rgba(220,20,60,0.1));
  color:#dc143c;
}

.time-card .stat-icon{
  background:linear-gradient(135deg,rgba(56,239,125,0.2),rgba(56,239,125,0.1));
  color:#38ef7d;
}

/* Value colors with glow effect */
.streak-card .right-stat-value{
  color:#ff6b35;
  text-shadow:0 0 10px rgba(255,107,53,0.6), 0 0 20px rgba(255,107,53,0.3);
}

.kills-card .right-stat-value{
  color:#ff8c00;
  text-shadow:0 0 10px rgba(255,140,0,0.6), 0 0 20px rgba(255,140,0,0.3);
}

.coins-card .right-stat-value{
  color:#ffd700;
  text-shadow:0 0 10px rgba(255,215,0,0.6), 0 0 20px rgba(255,215,0,0.3);
}

.phase-card .right-stat-value{
  color:#00bfff;
  text-shadow:0 0 10px rgba(0,191,255,0.6), 0 0 20px rgba(0,191,255,0.3);
}

.boss-card .right-stat-value{
  color:#dc143c;
  text-shadow:0 0 10px rgba(220,20,60,0.6), 0 0 20px rgba(220,20,60,0.3);
}

.time-card .right-stat-value{
  color:#38ef7d;
  text-shadow:0 0 10px rgba(56,239,125,0.6), 0 0 20px rgba(56,239,125,0.3);
}

.right-stat-label{
  font-size:0.7rem;
  color:rgba(255,255,255,0.6);
  text-transform:uppercase;
  letter-spacing:0.1em;
  margin-bottom:4px;
  font-weight:600;
}

.right-stat-value{
  font-size:1.4rem;
  font-weight:700;
  font-family:'Righteous',sans-serif;
  letter-spacing:0.05em;
}

.startscreen.hidden{display:none;}

a {
  margin-top: 12px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}
.game-title{
  font-family:"Bungee",sans-serif;font-size:4rem;font-weight:900;color:#00ffd5;text-shadow:0 0 30px rgba(0,255,213,0.8),0 0 60px rgba(0,255,213,0.4);margin-bottom:1rem;letter-spacing:0.1em;
  opacity: 0;
  animation: fadeInBounce 1s ease-out 0.2s forwards;
}

.game-subtitle{
  font-family:"Righteous",sans-serif;font-size:1.2rem;color:rgba(255,255,255,0.7);margin-bottom:3rem;letter-spacing:0.05em;
  opacity: 0;
  animation: fadeInUp 0.8s ease-out 0.8s forwards;
}

@keyframes fadeInBounce {
  0% {
    opacity: 0;
    transform: translateY(-50px) scale(0.8);
  }
  60% {
    opacity: 1;
    transform: translateY(10px) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.start-devlog {
  opacity: 0;
  animation: fadeInUp 0.8s ease-out 1.2s forwards;
}

#gameFooter {
  opacity: 0;
  animation: fadeInUp 0.8s ease-out 1.4s forwards;
}

.startscreen-stats{
  display:none;gap:2rem;margin-bottom:3rem;flex-wrap:wrap;justify-content:center;
}

.start-stat-card{
  background:linear-gradient(135deg,rgba(255,255,255,0.1),rgba(255,255,255,0.05));backdrop-filter:blur(8px);border-radius:16px;padding:1rem 1.5rem;border:1px solid rgba(255,255,255,0.2);text-align:center;min-width:120px;
}

.start-stat-label{
  font-size:0.8rem;color:rgba(255,255,255,0.6);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.5rem;
}

.start-stat-value{
  font-size:1.5rem;font-weight:700;color:#fff;
}

.start-stat-value.coins{color:#ffdf29;text-shadow:0 0 15px rgba(255, 232, 104, 0.541);}
.start-stat-value.highscore{color:#00ff55;text-shadow:0 0 15px rgba(0, 255, 42, 0.5);}

.play-frame{
  background:linear-gradient(135deg,rgba(0,255,213,0.1),rgba(0,170,255,0.05));border:2px solid rgba(0,255,213,0.3);border-radius:20px;padding:2rem 3rem;cursor:pointer;transition:all 0.3s ease;position:relative;overflow:hidden;min-width:300px;text-align:center;
}

/* Endless Mode Hover */
.play-frame:hover:not(.stage-mode):not(.capture-mode):not(.boss-rush-mode) {
  border-color: rgba(0,255,213,0.6);
  background: linear-gradient(135deg, rgba(0,255,213,0.12), rgba(0,170,255,0.06));
  box-shadow: 0 10px 30px rgba(0,255,213,0.12);
}

/* Stage Mode - Orange */
.play-frame.stage-mode{
  background:linear-gradient(135deg,rgba(255,165,0,0.1),rgba(255,140,0,0.05));
  border:2px solid rgba(255,165,0,0.3);
}

.play-frame.stage-mode:hover{
  border-color: rgba(255,165,0,0.6);
  background: linear-gradient(135deg, rgba(255,165,0,0.12), rgba(255,140,0,0.06));
  box-shadow: 0 10px 30px rgba(255,165,0,0.12);
}

.play-frame.stage-mode .play-frame-title{
  color:#ffa500;
  text-shadow:0 0 20px rgba(255,165,0,0.6);
}

/* Capture Mode - Purple/Blue */
.play-frame.capture-mode{
  background:linear-gradient(135deg,rgba(138,43,226,0.1),rgba(75,0,130,0.05));
  border:2px solid rgba(138,43,226,0.3);
}

.play-frame.capture-mode:hover{
  border-color: rgba(138,43,226,0.6);
  background: linear-gradient(135deg, rgba(138,43,226,0.12), rgba(75,0,130,0.06));
  box-shadow: 0 10px 30px rgba(138,43,226,0.12);
}

.play-frame.capture-mode .play-frame-title{
  color:#9370db;
  text-shadow:0 0 20px rgba(138,43,226,0.6);
}

.play-frame-title{
  font-family:"Bungee",sans-serif;font-size:2rem;font-weight:900;color:#00ffd5;text-shadow:0 0 20px rgba(0,255,213,0.6);margin-bottom:0.5rem;
}

.play-frame-stats{
  font-family:"Righteous",sans-serif;
  font-size:1.6rem;
  color:rgba(255,255,255,0.7);
  line-height:1.4;
  opacity:1;
  transform:translateY(10px);
  transition:all 0.3s ease;
  margin-top:0.3rem;
}

/* Endless Mode Stats - Orange/Cyan */
#playFrame .play-frame-stats #endlessBestScore{
  color:#00ffd5;
  font-weight:700;
  text-shadow:0 0 10px rgba(0,255,213,0.5);
}

/* Stage Mode Stats - Orange */
#stageModeFrame .play-frame-stats #stageProgress{
  color:#ffa500;
  font-weight:700;
  text-shadow:0 0 10px rgba(255,165,0,0.6);
}

/* Capture Mode Stats - Purple */
#captureModeFrame .play-frame-stats #captureBestTime{
  color:#9370db;
  font-weight:700;
  text-shadow:0 0 10px rgba(138,43,226,0.6);
}

.play-frame-description{
  font-family:"Righteous",sans-serif;font-size:0.9rem;color:rgba(255,255,255,0.7);line-height:1.4;opacity:0;transform:translateY(10px);transition:all 0.3s ease;position:absolute;bottom:12px;left:14px;right:14px;
}

.play-frame:hover .play-frame-stats{
  opacity:0;transform:translateY(-10px);
}

.play-frame:hover .play-frame-description{
  opacity:1;transform:translateY(0);
}

.play-frame:not(.stage-mode):not(.capture-mode)::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background: linear-gradient(90deg, transparent, rgba(0,255,213,0.10), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
}
.play-frame:not(.stage-mode):not(.capture-mode):hover::before{
  left:100%;
}

/* Stage mode - warm/orange shimmer */
.stage-mode::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,160,60,0.10), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
}
.stage-mode:hover::before{
  left:100%;
}

/* Capture mode - blue shimmer */
.capture-mode::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background: linear-gradient(90deg, transparent, rgba(80,140,255,0.10), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
}
.capture-mode:hover::before{
  left:100%;
}

/* Game Over Effect */
.game-over-effect{
  position:fixed;left:0;top:0;width:100%;height:100%;background:radial-gradient(circle,rgba(255,0,0,0.3),rgba(0,0,0,0.8));z-index:2000;display:none;align-items:center;justify-content:center;
}

.game-over-effect.show{
  display:flex;animation:gameOverFade 2s ease-out forwards;
}

@keyframes gameOverFade{
  0%{opacity:0;transform:scale(1);}
  50%{opacity:1;transform:scale(1.3);}
  100%{opacity:0;transform:scale(1.5);}
}

.explosion-text{
  font-family:"Bungee",sans-serif;font-size:3rem;color:#ff4757;text-shadow:0 0 30px rgba(255,71,87,0.8);animation:explosionPulse 0.5s ease-out;
}

@keyframes explosionPulse{
  0%{transform:scale(0.5);opacity:0;}
  50%{transform:scale(1.2);opacity:1;}
  100%{transform:scale(1);opacity:0.8;}
}

/* Weapon Demo Container */
.weapon-demo-container{
  background:rgba(0,0,0,0.3);
  border-radius:12px;
  padding:20px;
  margin-top:15px;
  border:1px solid rgba(255,255,255,0.1);
}

#weaponDemoCanvas{
  width:100%;
  max-width:600px;
  height:300px;
  background:linear-gradient(135deg, rgba(10,10,30,0.8), rgba(20,20,50,0.8));
  border-radius:8px;
  display:block;
  margin:0 auto;
  border:2px solid rgba(255,255,255,0.1);
}

.weapon-demo-controls{
  display:flex;
  gap:10px;
  margin-top:15px;
  flex-wrap:wrap;
  justify-content:center;
}

.demo-weapon-btn{
  background:linear-gradient(135deg, rgba(60,60,100,0.8), rgba(40,40,80,0.8));
  border:2px solid rgba(255,255,255,0.2);
  color:white;
  padding:10px 20px;
  border-radius:8px;
  font-family:"Righteous",sans-serif;
  font-size:0.9rem;
  cursor:pointer;
  transition:all 0.3s ease;
  display:flex;
  align-items:center;
  gap:8px;
}

.demo-weapon-btn:hover{
  background:linear-gradient(135deg, rgba(80,80,120,0.9), rgba(60,60,100,0.9));
  border-color:rgba(255,255,255,0.4);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,0.4);
}

.demo-weapon-btn.active{
  background:linear-gradient(135deg, rgba(0,200,255,0.4), rgba(0,150,200,0.4));
  border-color:rgba(0,200,255,0.6);
  box-shadow:0 0 20px rgba(0,200,255,0.4);
}

/* Enemy Showcase */
.enemy-showcase{
  background:rgba(0,0,0,0.3);
  border-radius:12px;
  padding:20px;
  margin-top:15px;
  border:1px solid rgba(255,255,255,0.1);
}

#enemyShowcaseCanvas{
  width:100%;
  max-width:600px;
  height:200px;
  background:linear-gradient(135deg, rgba(10,10,30,0.8), rgba(20,20,50,0.8));
  border-radius:8px;
  display:block;
  margin:0 auto;
  border:2px solid rgba(255,255,255,0.1);
  cursor:pointer;
}

/* Phase Transition Effect */
.phase-effect{
  position:fixed;left:0;top:0;width:100%;height:100%;z-index:1500;display:none;align-items:center;justify-content:center;pointer-events:none;
}

.phase-effect.show{
  display:flex;animation:phaseTransition 1.2s ease-out forwards;
}

@keyframes phaseTransition{
  0%{opacity:0;transform:scale(0.9);}
  30%{opacity:1;transform:scale(1.05);}
  100%{opacity:0;transform:scale(1.1);}
}

.phase-text{
  font-family:"Bungee",sans-serif;font-size:2.5rem;font-weight:900;text-shadow:0 0 25px rgba(0,255,213,0.8);animation:phasePulse 0.8s ease-out;
}

@keyframes phasePulse{
  0%{transform:scale(0.7);opacity:0;}
  40%{transform:scale(1.1);opacity:1;}
  100%{transform:scale(1);opacity:0.9;}
}

/* Bot Demo Mode */
.bot-demo{
  position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0.4;filter:blur(0.5px);
}

.bot-demo .hud{display:none;}
.bot-demo .hp-shield-container{display:none;}
.bot-demo .modern-stats{display:none;}

/* Pause Mode */
.pause-overlay{
  position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(66, 24, 0, 0.199);backdrop-filter:blur(8px);z-index:1500;display:none;align-items:center;justify-content:center;pointer-events:auto;
}

.pause-overlay.show{
  display:flex;animation:pauseFade 0.3s ease-out forwards;
}

@keyframes pauseFade{
  0%{opacity:0;backdrop-filter:blur(0px);}
  100%{opacity:1;backdrop-filter:blur(8px);}
}

.pause-text{
  font-family:"Bungee",sans-serif;font-size:3rem;font-weight:900;color:#ff9900;text-shadow:0 0 30px rgba(255, 145, 0, 0.8);animation:pausePulse 2s ease-in-out infinite;
}

@keyframes pausePulse{
  0%,100%{transform:scale(1);opacity:0.8;}
  50%{transform:scale(1.05);opacity:1;}
}

.pause-buttons{
  position:absolute;bottom:15%;left:50%;transform:translateX(-50%);display:flex;gap:20px;flex-direction:column;align-items:center;pointer-events:auto;
}

.pause-button{
  background:linear-gradient(135deg,rgba(0,255,213,0.2),rgba(0,170,255,0.1));border:2px solid rgba(0,255,213,0.4);border-radius:12px;padding:12px 24px;font-family:"Righteous",sans-serif;font-size:1rem;font-weight:600;color:#00ffd5;cursor:pointer;transition:all 0.3s ease;min-width:160px;text-align:center;pointer-events:auto;
}

.pause-button:hover{
  background:linear-gradient(135deg,rgba(0,255,213,0.3),rgba(0,170,255,0.15));border-color:rgba(0,255,213,0.6);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,255,213,0.2);
}

.pause-button.danger{
  background:linear-gradient(135deg,rgba(255,107,107,0.2),rgba(255,0,0,0.1));border-color:rgba(255,107,107,0.4);color:#ff6b6b;
}

.pause-button.danger:hover{
  background:linear-gradient(135deg,rgba(255,107,107,0.3),rgba(255,0,0,0.15));border-color:rgba(255,107,107,0.6);box-shadow:0 8px 20px rgba(255,107,107,0.2);
}

.pause-button.pause-shop{
  background:linear-gradient(135deg, rgba(255,213,74,0.35), rgba(255,179,0,0.25));
  border-color:rgba(255,213,74,0.65);
  color:#ffe066;
  text-shadow:0 0 10px rgba(255,213,74,0.35);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.pause-button.pause-shop:hover{
  background:linear-gradient(135deg, rgba(255,213,74,0.5), rgba(255,179,0,0.35));
  border-color:rgba(255,213,74,0.85);
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(255,179,0,0.35);
}

/* Ensure shop button behaves like a normal pause button inside overlay */
.pause-buttons #openShopBtn{
  position: static !important;
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content !important;
  min-width: 160px !important;
  align-self: center !important;
  right: auto !important;
  top: auto !important;
  left: auto !important;
}

/* Move the cart icon to the left within the Shop button */
.pause-buttons #openShopBtn i{
  order: -1;
  margin-right: 6px;
  color: #ffffff;
  width: auto;
  display: inline-block;
}

/* Stage HUD */
.stage-hud{position:fixed;right:16px;bottom:26px;z-index:60;pointer-events:none;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.stage-hud{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:1200;pointer-events:none;display:flex;flex-direction:column;gap:8px;align-items:center}
.stage-card{background:linear-gradient(135deg,rgba(0,0,0,0.45),rgba(255,255,255,0.02));padding:8px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);min-width:220px;text-align:center;backdrop-filter:blur(6px)}
.stage-label{font-size:12px;color:rgba(255,255,255,0.85);text-transform:uppercase;font-weight:700}
.stage-progress{font-size:16px;font-weight:900;color:#adffbf;text-shadow:0 0 12px rgba(173,255,191,0.12)}
.stage-complete{color:#38ef7d;text-shadow:0 0 18px rgba(56,239,125,0.35);font-size:20px}

/* Centered Stage Complete overlay */
.mode-button .play-frame-description{display:none;font-size:0.92rem}
.mode-button:hover .play-frame-description{display:block}

/* Stage Complete uses same animation style as Game Over but green */
.stage-complete-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(0,200,100,0.15), rgba(0,0,0,0.85));
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.stage-complete-overlay.show {
  display: flex;
  animation: stageCompleteFade 0.5s ease-out forwards;
}

@keyframes stageCompleteFade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.stage-complete-container {
  background: rgba(0,0,0,0.7);
  border: 2px solid rgba(56,239,125,0.4);
  border-radius: 20px;
  padding: 30px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 600px;
  width: 90%;
  box-shadow: 0 0 40px rgba(56,239,125,0.3), 0 0 100px rgba(0,0,0,0.5);
  transform: scale(0.9);
  animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.2s;
}

@keyframes popIn {
  0% { transform: scale(0.9); opacity: 0.8; }
  70% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

.stage-complete-overlay .text {
  font-family: "Bungee", sans-serif;
  font-size: 3.5rem;
  color: #38ef7d;
  text-shadow: 0 0 30px rgba(56,239,125,0.8);
  margin-bottom: 30px;
  text-align: center;
  animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
  0%, 100% { text-shadow: 0 0 20px rgba(56,239,125,0.6); }
  50% { text-shadow: 0 0 40px rgba(56,239,125,0.9), 0 0 60px rgba(56,239,125,0.4); }
}

.stage-complete-stats {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  margin-bottom: 30px;
}

.stage-complete-stats .stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  border-left: 3px solid rgba(56,239,125,0.6);
}

.stage-complete-stats .stat-row.reward {
  background: rgba(255,215,0,0.1);
  border-left: 3px solid rgba(255,215,0,0.6);
  margin-top: 10px;
}

.stage-complete-stats .stat-label {
  font-size: 1.2rem;
  color: rgba(255,255,255,0.8);
}

.stage-complete-stats .stat-value {
  font-size: 1.4rem;
  font-weight: bold;
  color: #fff;
}

.stage-complete-buttons {
  display: flex;
  gap: 15px;
  margin-top: 10px;
}


.confetti-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #f00;
  opacity: 0.8;
  animation: confettiFall linear forwards;
}

@keyframes confettiFall {
  0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}

.capture-complete-overlay{position:fixed;left:0;top:0;width:100%;height:100%;background:radial-gradient(circle,rgba(90,200,140,0.12),rgba(0,0,0,0.85));z-index:2200;display:none;align-items:center;justify-content:center}
.capture-complete-overlay.show{display:flex;animation:gameOverFade 1.6s ease-out forwards}
.capture-complete-overlay .text{font-family:"Bungee",sans-serif;font-size:2.6rem;color:#9df5b5;text-shadow:0 0 24px rgba(156,245,181,0.7);}

/* Stage selection buttons */
.stage-btn{
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.164);
  background:linear-gradient(135deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));
  border-radius:10px;
  padding:15px 17px;
  cursor:pointer;
  border:1px solid rgba(255,255,255,0.04);
  min-width:70px;
  text-align:center;
  position:relative;
  transition: all 0.1s ease;
  /* Einblende-Animation */
  opacity:0;
  transform:translateY(10px);
  animation: stageButtonFadeIn 0.3s ease forwards;
}
@keyframes stageButtonFadeIn {
  to {
    opacity:1;
    transform:translateY(0);
  }
}
.stage-btn:hover{box-shadow: 0 0 20px rgba(0, 255, 242, 0.5);padding:8px 12px;border:2px solid rgba(0, 255, 242, 0.37);box-shadow:0 8px 30px rgba(0,0,0,0.35);transform:none}
.stage-btn .stage-hover-desc{display:none;position:absolute;left:50%;transform:translateX(-50%);top:110%;background:rgba(0,0,0,0.5);padding:8px 10px;border-radius:8px;font-size:0.85rem;white-space:nowrap;z-index:10}
.stage-btn:hover .stage-hover-desc{display:block}
.stage-btn.completed{background:linear-gradient(135deg,rgba(20,120,40,0.3),rgba(0,200,120,0.12));border:1px solid rgba(50,200,100,0.14);color:#eaffea}
.stage-btn.incomplete{background:linear-gradient(135deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));opacity:0.9;color:#ddd}

/* Stage Filter Buttons */
.stage-filter-btn{
  background:linear-gradient(135deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02));
  border:2px solid rgba(255,255,255,0.1);
  border-radius:14px;
  padding:14px 28px;
  font-family:"Bungee",sans-serif;
  font-size:0.95rem;
  color:#aaa;
  cursor:pointer;
  transition:all 0.3s ease;
  position:relative;
  overflow:hidden;
  min-width:160px;
}
.stage-filter-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 25px rgba(0,0,0,0.4);
}
.stage-filter-btn.active{
  color:#fff;
  border-width:2px;
  box-shadow:0 8px 25px rgba(0,0,0,0.4);
}
/* Easy - Green */
#filterEasy:hover{
  border-color:rgba(80,200,120,0.6);
  box-shadow:0 0 25px rgba(80,200,120,0.4);
}
#filterEasy.active{
  background:linear-gradient(135deg,rgba(80,200,120,0.25),rgba(50,180,100,0.15));
  border-color:rgba(80,200,120,0.5);
  box-shadow:0 0 20px rgba(80,200,120,0.3);
}
/* Medium - Orange */
#filterMedium:hover{
  border-color:rgba(255,160,60,0.6);
  box-shadow:0 0 25px rgba(255,160,60,0.4);
}
#filterMedium.active{
  background:linear-gradient(135deg,rgba(255,160,60,0.25),rgba(255,140,40,0.15));
  border-color:rgba(255,160,60,0.5);
  box-shadow:0 0 20px rgba(255,160,60,0.3);
}
/* Hard - Red */
#filterHard:hover{
  border-color:rgba(255,80,80,0.6);
  box-shadow:0 0 25px rgba(255,80,80,0.4);
}
#filterHard.active{
  background:linear-gradient(135deg,rgba(255,80,80,0.25),rgba(255,60,60,0.15));
  border-color:rgba(255,80,80,0.5);
  box-shadow:0 0 20px rgba(255,80,80,0.3);
}
/* Extreme - Purple */
#filterExtreme:hover{
  border-color:rgba(180,80,255,0.6);
  box-shadow:0 0 25px rgba(180,80,255,0.4);
}
#filterExtreme.active{
  background:linear-gradient(135deg,rgba(180,80,255,0.25),rgba(160,60,255,0.15));
  border-color:rgba(180,80,255,0.5);
  box-shadow:0 0 20px rgba(180,80,255,0.3);
}

/* Capture Filter Buttons - Same styling as Stage Mode */
/* Capture Easy - Green */
#filterCaptureEasy:hover{
  border-color:rgba(80,200,120,0.6);
  box-shadow:0 0 25px rgba(80,200,120,0.4);
}
#filterCaptureEasy.active{
  background:linear-gradient(135deg,rgba(80,200,120,0.25),rgba(50,180,100,0.15));
  border-color:rgba(80,200,120,0.5);
  box-shadow:0 0 20px rgba(80,200,120,0.3);
}
/* Capture Medium - Orange */
#filterCaptureMedium:hover{
  border-color:rgba(255,160,60,0.6);
  box-shadow:0 0 25px rgba(255,160,60,0.4);
}
#filterCaptureMedium.active{
  background:linear-gradient(135deg,rgba(255,160,60,0.25),rgba(255,140,40,0.15));
  border-color:rgba(255,160,60,0.5);
  box-shadow:0 0 20px rgba(255,160,60,0.3);
}
/* Capture Hard - Red */
#filterCaptureHard:hover{
  border-color:rgba(255,80,80,0.6);
  box-shadow:0 0 25px rgba(255,80,80,0.4);
}
#filterCaptureHard.active{
  background:linear-gradient(135deg,rgba(255,80,80,0.25),rgba(255,60,60,0.15));
  border-color:rgba(255,80,80,0.5);
  box-shadow:0 0 20px rgba(255,80,80,0.3);
}

#captureProgress{
  color:#b261ff;
  font-weight: 700;
  text-shadow:0 0 10px rgb(174, 52, 255);
}

/* Home button style (red) */
.home-button{background:linear-gradient(135deg,rgba(255,100,100,0.18),rgba(255,40,40,0.08));border:1px solid rgba(255,80,80,0.18);color:#fff}
.home-button i{color:#fff}

/* Achievements Top Button */
.achievements-top-button:hover{
  border-color:rgba(255,215,0,0.6);
  box-shadow:0 0 30px rgba(255,215,0,0.4);
  transform:translateY(-2px);
}
.achievements-top-button:active{
  transform:translateY(0);
}

/* Ship Skins Top Button */
.ship-skins-button:hover{
  border-color:rgba(15,255,217,0.6);
  box-shadow:0 0 30px rgba(15,255,217,0.4);
  transform:translateY(-2px);
  margin-right: -200px;
}
.ship-skins-button:active{
  transform:translateY(0);
}

/* Settings Bottom Button */
.settings-bottom-button:hover{
  border-color:rgba(100,100,255,0.6);
  box-shadow:0 0 30px rgba(100,100,255,0.4);
  transform:translateY(-2px);
}
.settings-bottom-button:active{
  transform:translateY(0);
}

#skinsOwned {
  color:rgba(15,255,217,0.6);
  text-shadow:0 0 10px rgba(15, 255, 219, 0.884);
}

/* Achievement Card */
.achievement-card{
  background:linear-gradient(135deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02));
  border:2px solid rgba(255,255,255,0.1);
  border-radius:12px;
  padding:16px;
  transition:all 0.3s ease;
  position:relative;
  overflow:hidden;
}
.achievement-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,0.3);
}
.achievement-card.unlocked{
  background:linear-gradient(135deg,rgba(56,239,125,0.15),rgba(56,239,125,0.05));
  border-color:rgba(56,239,125,0.3);
}
.achievement-card.locked{
  opacity:0.6;
}
.achievement-icon{
  font-size:3rem;
  margin-bottom:12px;
  filter:grayscale(100%);
  opacity:0.5;
  transition:all 0.3s ease;
}
.achievement-icon svg{
  width:48px;
  height:48px;
  stroke-width:2;
}
.achievement-card.unlocked .achievement-icon{
  filter:grayscale(0%);
}
.achievement-title{
  font-family:"Bungee",sans-serif;
  font-size:1rem;
  color:#fff;
  margin-bottom:6px;
}
.achievement-desc{
  font-size:0.85rem;
  color:#aaa;
  margin-bottom:10px;
  line-height:1.4;
}
.achievement-progress{
  font-size:0.8rem;
  color:#efd338;
  font-weight:bold;
}
#achievementsProgress {
  color:#efd338;
  text-shadow:0 0 10px #efd338;
}
.achievement-reward{
  position:absolute;
  top:10px;
  right:10px;
  background:rgba(255,215,0,0.2);
  border:1px solid rgba(255,215,0,0.4);
  border-radius:6px;
  padding:4px 8px;
  font-size:0.75rem;
  color:#ffd700;
  font-weight:bold;
}

/* Achievement Navigation Buttons */
.achievements-nav-btn{
  background:rgba(255,255,255,0.1);
  border:2px solid rgba(255, 255, 255, 0.116);
  outline:none;
}
.achievements-nav-btn:hover{
  background:rgba(255, 255, 255, 0.2);
  border-color:rgba(255, 255, 255, 0.699);
  box-shadow:0 0 20px rgba(255, 255, 255, 0.253);
  transform:translateY(-50%) scale(1.1);
}
.achievements-nav-btn:disabled{
  opacity:0.3;
  cursor:not-allowed;
  pointer-events:none;
}
.achievements-nav-btn i{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Make description absolute inside mode-button so it doesn't change box size */
.mode-button{position:relative}
/* Description sits inside the button and wraps to multiple lines to match button width */
.mode-button .play-frame-description{position:static;display:block;opacity:0;transform:translateY(10px);transition:all 0.28s ease;box-sizing:border-box;margin-top:8px;padding:0 6px;white-space:normal;word-break:break-word;width:100%;max-width:240px;margin-left:auto;margin-right:auto}
.mode-button:hover .play-frame-description{opacity:1;transform:translateY(0)}

/* Make both mode buttons equal height */
.mode-button{min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center}

/* Startscreen button fade-in animation */
@keyframes buttonFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.play-frame, .mode-button, #tutorialButton, #devlogButton, .achievements-top-button, .ship-skins-button {
  animation: buttonFadeIn 0.6s ease-out forwards;
  opacity: 0;
}

.play-frame {
  animation-delay: 0.1s;
}

#stageModeFrame {
  animation-delay: 0.2s;
}

#captureModeFrame {
  animation-delay: 0.3s;
}

.achievements-top-button {
  animation-delay: 0.4s;
}

.ship-skins-button {
  animation-delay: 0.45s;
}

#tutorialButton {
  animation-delay: 0.5s;
}

#devlogButton {
  animation-delay: 0.6s;
}

/* Title and stats fade-in */
.startscreen-title, .start-stats {
  animation: buttonFadeIn 0.8s ease-out forwards;
  opacity: 0;
}

.startscreen-title {
  animation-delay: 0s;
}

.start-stats {
  animation-delay: 0.05s;
}

/* Stage mode distinct color (more vibrant like Endless) */
.stage-mode{background:linear-gradient(135deg, rgba(255,160,60,0.08), rgba(255,120,60,0.03));border:2px solid rgba(255,140,40,0.14);box-shadow:0 12px 40px rgba(255,120,40,0.06)}
.stage-mode:hover{background:linear-gradient(135deg, rgba(255,180,80,0.12), rgba(255,140,60,0.06));border-color:rgba(255,160,60,0.25);box-shadow:0 12px 40px rgba(255, 109, 25, 0.144)} 
.stage-mode .play-frame-title{color:#ffb04d;text-shadow:0 0 14px rgba(255,160,80,0.18)}

/* Hover label above the button */
.mode-hover-label{display:none;position:absolute;top:-30px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.6);padding:6px 10px;border-radius:8px;font-size:0.85rem}
.stage-mode:hover .mode-hover-label{display:block}

/* Capture & Hold Mode styling */
.capture-mode{background:linear-gradient(135deg, rgba(70,120,255,0.06), rgba(60,100,220,0.03));border:2px solid rgba(80,140,255,0.12);box-shadow:0 12px 40px rgba(60,100,220,0.06)}
.capture-mode:hover{background:linear-gradient(135deg, rgba(100,160,255,0.12), rgba(80,130,255,0.06));border-color:rgba(100,160,255,0.25);box-shadow:0 12px 40px rgba(40, 133, 255, 0.120)}
.capture-mode .play-frame-title{color:#9fbaff;text-shadow:0 0 14px rgba(120,165,255,0.18)}

/* Flappy Shooter Mode styling - Orange/Yellow */
.flappy-mode{background:linear-gradient(135deg, rgba(255,165,0,0.08), rgba(255,140,0,0.04));border:2px solid rgba(255,165,0,0.15);box-shadow:0 12px 40px rgba(255,140,0,0.08)}
.flappy-mode:hover{background:linear-gradient(135deg, rgba(255,180,0,0.14), rgba(255,150,0,0.08));border-color:rgba(255,180,0,0.3);box-shadow:0 12px 40px rgba(255,165,0,0.15)}
.flappy-mode .play-frame-title{color:#ffb347;text-shadow:0 0 14px rgba(255,165,0,0.25)}
.flappy-mode::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,200,100,0.15),transparent);transition:left 0.6s ease;pointer-events:none}
.flappy-mode:hover::before{left:100%}
.flappy-mode .mode-hover-label{display:none;position:absolute;top:-35px;left:50%;transform:translateX(-50%);background:rgba(255,165,0,0.95);color:#fff;padding:6px 14px;border-radius:6px;font-size:0.75rem;white-space:nowrap;box-shadow:0 4px 12px rgba(255,140,0,0.3);z-index:10}
.flappy-mode:hover .mode-hover-label{display:block}

/* Capture HUD */
.capture-hud{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:1201;pointer-events:none;display:flex;gap:12px;align-items:center}
.capture-zone-indicator{background:linear-gradient(135deg,rgba(0,0,0,0.45),rgba(255,255,255,0.02));padding:6px 10px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);min-width:160px;text-align:center}
.capture-progress{font-size:14px;font-weight:800;color:#ffd38a}


/* Position HOME buttons inside selection panels top-right */
.difficulty-selection, #stageSelection{position:relative}
.home-button{position:absolute;top:12px;right:12px;z-index:40}
.home-button{transition:all 0.18s ease}
.home-button:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(255,60,60,0.28);border: 1px solid #ff0000d3;background: #c700003f;}

/* Difficulty Selection */
.difficulty-selection{
  display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:2rem;
}

.difficulty-title{
  font-family:"Bungee",sans-serif;font-size:1.8rem;font-weight:500;color:#ffffff;text-shadow:0 0 20px rgba(0, 0, 0, 0.6);margin-bottom:2rem;text-align:center;
}

.difficulty-options{
  display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center;max-width:900px;
}

.difficulty-option{
  background:linear-gradient(135deg,rgba(0,255,213,0.1),rgba(0,170,255,0.05));border:2px solid rgba(0,255,213,0.3);border-radius:16px;padding:1.5rem 2rem;cursor:pointer;transition:all 0.3s ease;position:relative;overflow:hidden;min-width:200px;text-align:center;flex:1;max-width:250px;
}

.difficulty-option:hover{
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 15px 40px rgba(0,255,213,0.2);
}

#easyOption:hover{
  border-color:rgba(0, 255, 21, 0.6);
  background:linear-gradient(135deg,rgba(0, 255, 13, 0.15),rgba(0, 255, 21, 0.08));
  box-shadow:0 15px 40px rgba(0,255,213,0.2);
}

#mediumOption:hover{
  border-color:rgba(255,140,0,0.6);
  background:linear-gradient(135deg,rgba(255,140,0,0.15),rgba(255,100,0,0.08));
  box-shadow:0 15px 40px rgba(255,140,0,0.2);
}

#hardOption:hover{
  border-color:rgba(255,68,68,0.6);
  background:linear-gradient(135deg,rgba(255,68,68,0.15),rgba(255,40,40,0.08));
  box-shadow:0 15px 40px rgba(255,68,68,0.2);
}

.difficulty-option::before{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,255,213,0.1),transparent);transition:left 0.6s ease;
}

.difficulty-option:hover::before{
  left:100%;
}

.difficulty-name{
  font-family:"Righteous",sans-serif;font-size:1.4rem;font-weight:900;margin-bottom:0.8rem;
}

#easyOption .difficulty-name{color:#00ff2a;text-shadow:0 0 15px rgba(9, 255, 0, 0.5);}
#mediumOption .difficulty-name{color:#ff8c00;text-shadow:0 0 15px rgba(255,140,0,0.5);}
#hardOption .difficulty-name{color:#ff4444;text-shadow:0 0 15px rgba(255,68,68,0.5);}

.difficulty-desc{
  font-family:"Righteous",sans-serif;font-size:0.85rem;color:rgba(255,255,255,0.7);line-height:1.4;
}

/* Weapon Inventory */
.weapon-inventory{
  position:fixed;right:20px;bottom:2%;z-index:60;pointer-events:auto;display:flex;flex-direction:row;gap:8px;
}

.weapon-slot{
  width:60px;height:60px;border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,0.08),rgba(255,255,255,0.02));backdrop-filter:blur(8px);border:2px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s ease;position:relative;
}

.weapon-slot:hover{
  border-color:rgba(0,255,213,0.6);background:linear-gradient(135deg,rgba(0,255,213,0.15),rgba(0,170,255,0.08));transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,255,213,0.2);
}

.weapon-slot.active{
  border-color:rgba(0,255,213,0.8);background:linear-gradient(135deg,rgba(0,255,213,0.2),rgba(0,170,255,0.1));box-shadow:0 0 20px rgba(0,255,213,0.4);
}

.weapon-slot .weapon-icon{
  font-size:24px;color:#00ffd5;text-shadow:0 0 10px rgba(0,255,213,0.5);
}

.weapon-slot .slot-number{
  position:absolute;top:4px;right:4px;font-size:10px;font-weight:800;color:rgb(255, 255, 255);background:rgba(0,0,0,0.6);border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;
}

.weapon-slot.unlocked .weapon-icon{
  color:#00ffd5;
}

.weapon-slot.locked{
  opacity:0.3;cursor:not-allowed;
}

.weapon-slot.locked .weapon-icon{
  color:#666;
}

/* Minimap / Radar */
#minimap {
  position: fixed;
  top: 12px;
  right: 10px;
  width: 200px !important;
  height: 150px !important;
  background: rgba(0, 0, 0, 0.082);
  border:2px solid rgba(255,255,255,0.1);
  border-radius: 28px;
  z-index: 100;
  pointer-events: none;
  opacity: 1;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.pause-overlay.show ~ #minimap {
  opacity: 0.3;
}

.tutorial-button {
  margin-top: 20px;
  background: linear-gradient(135deg, rgba(255, 0, 0, 0.2),rgba(255, 0, 0, 0.15));
  border: 2px solid rgba(255, 0, 0, 0.4);
  border-radius: 12px;
  padding: 12px 24px;
  font-family: "Righteous", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #ff2e2e;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tutorial-button:hover {
  background: linear-gradient(135deg, rgba(255, 0, 0, 0.3),rgba(255, 0, 0, 0.25));
  border-color: rgba(255, 0, 0, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 0, 0, 0.3);
}

.tutorial-button i {
  font-size: 1.2rem;
}

/* Shop Button in Pause Menu */
.pause-button.shop-btn {
  background: linear-gradient(135deg, rgba(218, 165, 32, 0.35), rgba(184, 134, 11, 0.25));
  border-color: rgba(218, 165, 32, 0.65);
  color: #daa520;
}

.pause-button.shop-btn:hover {
  background: linear-gradient(135deg, rgba(218, 165, 32, 0.5), rgba(184, 134, 11, 0.35));
  border-color: rgba(218, 165, 32, 0.85);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(218, 165, 32, 0.35);
}

/* Settings Button in Pause Menu */
.pause-button.settings-btn {
  background: linear-gradient(135deg, rgba(100, 150, 255, 0.35), rgba(50, 120, 255, 0.25));
  border-color: rgba(100, 150, 255, 0.65);
  color: #7eb3ff;
}

.pause-button.settings-btn:hover {
  background: linear-gradient(135deg, rgba(100, 150, 255, 0.5), rgba(50, 120, 255, 0.35));
  border-color: rgba(100, 150, 255, 0.85);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(50, 120, 255, 0.35);
}

/* Settings Overlay */
.settings-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.92);
  z-index: 99999999999;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  overflow-y: auto;
  padding: 20px;
}

.settings-overlay.show {
  display: flex;
}

.settings-content {
  background: linear-gradient(135deg, rgba(20, 20, 40, 0.95), rgba(10, 10, 30, 0.98));
  border: 2px solid rgba(100, 150, 255, 0.3);
  border-radius: 16px;
  padding: 40px;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 16px 48px rgba(100, 150, 255, 0.2);
}

/* Custom Scrollbar for Settings */
.settings-content::-webkit-scrollbar {
  width: 12px;
}

.settings-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.settings-content::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(100, 150, 255, 0.6), rgba(80, 130, 230, 0.8));
  border-radius: 10px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 10px rgba(100, 150, 255, 0.4);
}

.settings-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(120, 170, 255, 0.8), rgba(100, 150, 240, 0.9));
  box-shadow: 0 0 15px rgba(100, 150, 255, 0.6);
}

.settings-content::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, rgba(140, 190, 255, 0.9), rgba(120, 170, 250, 1));
}

.settings-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  will-change: transform, color;
}

.settings-close:hover {
  color: #ff6b6b;
  transform: rotate(90deg);
}

.settings-title {
  font-family: "Bungee", sans-serif;
  font-size: 1.8rem;
  color: #7eb3ff;
  text-align: center;
  margin: 0 0 30px 0;
  text-shadow: 0 0 20px rgba(100, 150, 255, 0.4);
}

.settings-title i {
  margin-right: 12px;
}

.settings-sections {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.settings-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
}

.settings-section h3 {
  font-family: "Righteous", sans-serif;
  font-size: 1.2rem;
  color: #7eb3ff;
  margin: 0 0 20px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.setting-item {
  margin-bottom: 20px;
}

.setting-item:last-child {
  margin-bottom: 0;
}

.setting-item label {
  display: block;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  margin-bottom: 10px;
  font-family: "Righteous", sans-serif;
}

.slider-container {
  display: flex;
  align-items: center;
  gap: 15px;
}

.volume-slider {
  flex: 1;
  height: 8px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #7eb3ff, #5a8fff);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(100, 150, 255, 0.6);
  border: 2px solid rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

.volume-slider::-webkit-slider-thumb:hover {
  background: linear-gradient(135deg, #a0c8ff, #7eb3ff);
  box-shadow: 0 0 15px rgba(100, 150, 255, 0.8);
  transform: scale(1.1);
}

.volume-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #7eb3ff, #5a8fff);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(100, 150, 255, 0.6);
  border: 2px solid rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

.volume-slider::-moz-range-thumb:hover {
  background: linear-gradient(135deg, #a0c8ff, #7eb3ff);
  box-shadow: 0 0 15px rgba(100, 150, 255, 0.8);
  transform: scale(1.1);
}

.volume-value {
  min-width: 50px;
  text-align: right;
  color: #7eb3ff;
  font-weight: 700;
  font-family: "Righteous", sans-serif;
  font-size: 1.1rem;
  text-shadow: 0 0 10px rgba(100, 150, 255, 0.4);
}

.tutorial-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.438);
  z-index: 999923423499999;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  overflow-y: auto;
  padding: 20px;
}

.tutorial-overlay.show {
  display: flex;
}

/* Hide tutorial when startscreen is hidden (game is running) */
.startscreen.hidden ~ .tutorial-overlay {
  display: none !important;
}

.tutorial-content {
  background: linear-gradient(135deg, rgba(20, 20, 40, 0.95), rgba(10, 10, 30, 0.98));
  border: 2px solid rgba(255, 0, 0, 0.3);
  border-radius: 16px;
  padding: 40px;
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 16px 48px rgba(255, 0, 0, 0.2);
}

/* Custom Scrollbar for Tutorial */
.tutorial-content::-webkit-scrollbar {
  width: 12px;
}

.tutorial-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.tutorial-content::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 50, 50, 0.6), rgba(200, 30, 30, 0.8));
  border-radius: 10px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 10px rgba(255, 50, 50, 0.4);
}

.tutorial-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(255, 80, 80, 0.8), rgba(220, 50, 50, 0.9));
  box-shadow: 0 0 15px rgba(255, 80, 80, 0.6);
}

.tutorial-content::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, rgba(255, 100, 100, 0.9), rgba(240, 70, 70, 1));
}

.tutorial-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  will-change: transform, color;
}

.tutorial-close:hover {
  color: #ff6b6b;
  transform: rotate(90deg);
}

.tutorial-title {
  font-family: "Bungee", sans-serif;
  font-size: 2rem;
  color: #ff0000;
  text-align: center;
  margin: 0 0 30px 0;
  text-shadow: 0 0 20px rgba(255, 0, 0, 0.4);
}

.tutorial-title i {
  margin-right: 12px;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
}

.tutorial-sections {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.tutorial-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
}

.tutorial-section h3 {
  font-family: "Righteous", sans-serif;
  font-size: 1.3rem;
  color: #ff3c3c;
  margin: 0 0 15px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tutorial-section p {
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  margin: 0 0 10px 0;
}

.control-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
  margin-top: 15px;
}

.control-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(0, 255, 213, 0.05);
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 255, 213, 0.1);
}

.control-item kbd {
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 6px 12px;
  font-family: "Courier New", monospace;
  font-size: 0.9rem;
  color: #ff9b9b;
  display: inline-block;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.control-item span {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
}

.mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  margin-top: 15px;
}

.mode-item {
  background: rgba(0, 255, 213, 0.05);
  border: 1px solid rgba(0, 255, 213, 0.15);
  border-radius: 8px;
  padding: 15px;
}

.mode-item strong {
  display: block;
  color: #ff3d3d;
  font-size: 1.1rem;
  margin-bottom: 8px;
  font-family: "Righteous", sans-serif;
}

.mode-item p {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
}

.upgrade-list, .tips-list {
  list-style: none;
  padding: 0;
  margin: 15px 0 0 0;
}

.upgrade-list li, .tips-list li {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.8;
  padding-left: 20px;
  position: relative;
}

.upgrade-list li::before {
  content: "●";
  position: absolute;
  left: 0;
  color: #4affc9;
}

.tips-list li::before {
  content: "●";
  position: absolute;
  left: 0;
  color: #4affc9;
}

.enemy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 15px;
}

.enemy-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 10px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  flex-wrap: wrap;
}

.enemy-item > i {
  margin-top: 2px;
}

.enemy-color {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* responsive */
@media (max-width:720px){
  .shop{width:96vw}
  .boss-bar{width:92%}
  .shop-grid{grid-template-columns:1fr}
  .hud{left:8px;top:8px}
  .hp-shield-container{left:8px;bottom:8px;min-width:280px;padding:10px 12px;}
  .stat-icon-label{min-width:60px;}
  .stat-label{font-size:0.75rem;}
  .hp-bar, .shield-bar{height:12px;}
  .stat-value{font-size:0.75rem;min-width:40px;}
  .modern-stats{left:8px;bottom:90px}
  .stat-card{min-width:100px;padding:6px 10px}
  .game-title{font-size:2.5rem}
  .game-subtitle{font-size:1rem}
  .startscreen-stats{gap:1rem}
  .start-stat-card{padding:0.8rem 1rem;min-width:100px}
  .play-button{padding:0.8rem 2rem;font-size:1.2rem}
  .difficulty-options{flex-direction:column;align-items:center;}
  .difficulty-option{max-width:280px;width:100%;}
  .weapon-inventory{right:8px;bottom:8px;}
  .weapon-slot{width:50px;height:50px;}
  .weapon-slot .weapon-icon{font-size:20px;}
}

/* ============================
   DAILY SPIN SYSTEM
   ============================ */
.slot-machine-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  position:relative;
}

.slot-machine{
  display:flex;
  gap:20px;
  padding:40px;
  background:linear-gradient(135deg, rgba(20,20,40,0.9), rgba(10,10,30,0.8));
  border-radius:20px;
  border:3px solid rgba(255,100,255,0.4);
  box-shadow:0 0 40px rgba(255,100,255,0.3), inset 0 0 30px rgba(0,0,0,0.5);
  position:relative;
}

.slot-reel{
  width:180px;
  height:220px;
  background:linear-gradient(180deg, rgba(10,10,20,0.95), rgba(5,5,15,0.98));
  border-radius:16px;
  border:3px solid rgba(100,200,255,0.3);
  overflow:hidden;
  position:relative;
  box-shadow:inset 0 0 20px rgba(0,0,0,0.8), 0 4px 20px rgba(0,0,0,0.6);
}

.slot-reel::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:60px;
  background:linear-gradient(180deg, rgba(0,0,0,0.9), transparent);
  z-index:2;
  pointer-events:none;
}

.slot-reel::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:60px;
  background:linear-gradient(0deg, rgba(0,0,0,0.9), transparent);
  z-index:2;
  pointer-events:none;
}

.slot-item{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-family:'Bungee', sans-serif;
  font-size:1.1rem;
  color:#fff;
  text-align:center;
  padding:20px;
  position:relative;
}

.slot-item i{
  font-size:3.5rem;
  margin-bottom:12px;
  filter:drop-shadow(0 0 15px currentColor);
}

.slot-item-name{
  font-size:0.9rem;
  color:#aaa;
  margin-top:8px;
  text-transform:uppercase;
  letter-spacing:1px;
}

.slot-indicator{
  position:absolute;
  top:50%;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg, transparent, #ff3b3b 20%, #ff3b3b 80%, transparent);
  transform:translateY(-50%);
  box-shadow:0 0 20px #ff3b3b;
  pointer-events:none;
  z-index:10;
}

.spin-button{
  padding:16px 60px;
  font-family:'Bungee', sans-serif;
  font-size:1.4rem;
  background:linear-gradient(135deg, #4ade80, #22c55e);
  border:none;
  border-radius:16px;
  color:#fff;
  cursor:pointer;
  transition:all 0.3s ease;
  box-shadow:0 8px 25px rgba(34,197,94,0.4), 0 0 0 3px rgba(74,222,128,0.2);
  text-shadow:0 2px 4px rgba(0,0,0,0.3);
  position:relative;
  overflow:hidden;
}

.spin-button:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 35px rgba(34,197,94,0.5), 0 0 0 3px rgba(74,222,128,0.3);
}

.spin-button:active{
  transform:translateY(0);
}

.spin-button.disabled{
  background:linear-gradient(135deg, #6b7280, #4b5563);
  cursor:not-allowed;
  box-shadow:0 4px 15px rgba(0,0,0,0.3);
  opacity:0.6;
}

.spin-button.disabled:hover{
  transform:none;
}

.spin-button i{
  margin-right:10px;
}

.spin-timer{
  margin-top:20px;
  font-family:'Righteous', sans-serif;
  font-size:1rem;
  color:#999;
  text-align:center;
}

.spin-timer.hidden{
  display:none;
}

#spinTimerValue{
  color:#ff64ff;
  font-weight:bold;
  font-size:1.1rem;
}

/* Spinning Animation */
@keyframes spin-reel{
  0%{transform:translateY(0);}
  100%{transform:translateY(-100%);}
}

.slot-reel.spinning .slot-item{
  animation:spin-reel 0.1s linear infinite;
}

/* Slot Blink Animation */
@keyframes slotBlink{
  0%, 100%{
    transform:scale(1);
    box-shadow:0 0 0 rgba(255,215,0,0);
  }
  50%{
    transform:scale(1.1);
    box-shadow:0 0 40px rgba(255,215,0,0.8);
  }
}

/* Rainbow Skin Animation */
@keyframes rainbowSlot{
  0%{
    filter:hue-rotate(0deg) saturate(1.5);
  }
  100%{
    filter:hue-rotate(360deg) saturate(1.5);
  }
}

/* Plasma Skin Animation */
@keyframes plasmaSlot{
  0%, 100%{
    filter:brightness(1) saturate(1.5);
    box-shadow:0 0 20px rgba(206,100,255,0.6);
  }
  50%{
    filter:brightness(1.3) saturate(2);
    box-shadow:0 0 35px rgba(206,100,255,0.9);
  }
}

/* Daily Spin Button Hover */
.daily-spin-button:hover{
  background:linear-gradient(135deg,rgba(255,100,255,0.25),rgba(255,50,150,0.15));
  border-color:rgba(255,100,255,0.5);
  box-shadow:0 0 20px rgba(255,100,255,0.3);
}

#rewardsContainer {
  transition: all 0.6s;
  transform: scale(1.25);
}

/* Stage Complete Overlay Styling */
.stage-complete-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out;
}

.stage-complete-overlay.show {
  opacity: 1;
  pointer-events: auto;
  animation: overlayPulse 2s ease-in-out;
}

@keyframes overlayPulse {
  0% { background: rgba(0, 0, 0, 0.95); }
  50% { background: rgba(0, 0, 0, 0.8); }
  100% { background: rgba(0, 0, 0, 0.85); }
}

.stage-complete-container {
  background: linear-gradient(135deg, rgba(20, 20, 40, 0.9), rgba(10, 10, 30, 0.85));
  border: 2px solid rgba(0, 255, 213, 0.3);
  border-radius: 24px;
  padding: 40px;
  width: min(600px, 90%);
  text-align: center;
  box-shadow: 0 0 80px rgba(0, 255, 213, 0.3), 0 0 30px rgba(0, 255, 213, 0.2);
  transform: translateY(30px);
  opacity: 0;
  animation: containerSlideIn 0.8s ease-out 0.3s forwards;
}

@keyframes containerSlideIn {
  0% { transform: translateY(30px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.stage-complete-container .text {
  font-family: 'Bungee', sans-serif;
  font-size: 3rem;
  color: #00ffd5;
  margin-bottom: 30px;
  text-shadow: 0 0 20px rgba(0, 255, 213, 0.8), 0 0 40px rgba(0, 255, 213, 0.4);
  animation: textPulse 2s infinite;
  letter-spacing: 2px;
  transform: scale(0.8);
  opacity: 0;
  animation: textReveal 1s ease-out 0.5s forwards;
}

@keyframes textPulse {
  0%, 100% { text-shadow: 0 0 20px rgba(0, 255, 213, 0.8), 0 0 40px rgba(0, 255, 213, 0.4); }
  50% { text-shadow: 0 0 30px rgba(0, 255, 213, 1), 0 0 60px rgba(0, 255, 213, 0.6); }
}

@keyframes textReveal {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.stage-complete-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 16px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stage-complete-stats .stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  transform: translateX(-20px);
}

.stage-complete-stats .stat-row:nth-child(1) { animation: statSlideIn 0.5s ease-out 0.8s forwards; }
.stage-complete-stats .stat-row:nth-child(2) { animation: statSlideIn 0.5s ease-out 1.0s forwards; }
.stage-complete-stats .stat-row:nth-child(3) { animation: statSlideIn 0.5s ease-out 1.2s forwards; }
.stage-complete-stats .stat-row:nth-child(4) { animation: statSlideIn 0.5s ease-out 1.4s forwards; }

@keyframes statSlideIn {
  0% { opacity: 0; transform: translateX(-20px); }
  100% { opacity: 1; transform: translateX(0); }
}

.stage-complete-stats .stat-label {
  font-family: 'Righteous', sans-serif;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stage-complete-stats .stat-value {
  font-family: 'Bungee', sans-serif;
  font-size: 1.5rem;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.stage-complete-stats .reward {
  margin-top: 10px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.stage-complete-stats .reward .stat-value {
  color: #ffd700;
  text-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
  font-size: 1.8rem;
}

.stage-complete-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px);
  animation: buttonsAppear 0.5s ease-out 1.8s forwards;
}

@keyframes buttonsAppear {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}


/* Überschreiben des allgemeinen Hover-Effekts für den Home-Button */
.home-btn:hover {
  transform: none !important;
}

/* Roter Home-Button */
.home-btn {
  background: linear-gradient(135deg, rgba(255, 50, 50, 0.3), rgba(200, 30, 30, 0.2));
  border: 2px solid rgba(255, 50, 50, 0.5);
  color: #ffffff;
  font-size: 1.2rem;
  padding: 16px 30px;
  min-width: 200px;
}

.home-btn:hover {
  background: linear-gradient(135deg, rgba(255, 70, 70, 0.4), rgba(220, 40, 40, 0.3));
  border-color: rgba(255, 70, 70, 0.7);
  box-shadow: 0 10px 30px rgba(255, 50, 50, 0.4);
  transform: none;
}

/* Confetti Animation */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.confetti {
  position: absolute;
  top: -20px;
  animation: confettiFall 4s ease-in-out forwards;
}

@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  50% { opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* Last Kill Zoom Effect */
@keyframes lastKillZoom {
  0% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.05); filter: brightness(1.2); }
  100% { transform: scale(1); filter: brightness(1); }
}

.last-kill-zoom {
  animation: lastKillZoom 1s ease-out forwards;
}

/* Victory Effect - ähnlich wie Game-Over-Effekt */
.victory-effect {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(0, 255, 128, 0.3), rgba(0, 0, 0, 0.8));
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

.victory-effect.show {
  opacity: 1;
  animation: victoryFade 2.5s ease-out forwards;
}

@keyframes victoryFade {
  0% { opacity: 0; transform: scale(1); }
  30% { opacity: 1; transform: scale(1.2); }
  70% { opacity: 1; transform: scale(1.3); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* Victory Text Animation */
.victory-text {
  font-family: 'Bungee', sans-serif;
  font-size: 5rem;
  color: #00ff80;
  text-shadow: 0 0 30px rgba(0, 255, 128, 0.8), 0 0 60px rgba(0, 255, 128, 0.4);
  animation: victoryPulse 0.8s ease-out;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 4px;
}

@keyframes victoryPulse {
  0% { transform: scale(0.5); opacity: 0; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes confettiFall {
  0% { 
    transform: translateY(-20px) translateX(0) rotate(0deg); 
    opacity: 0; 
  }
  10% {
    opacity: 1;
  }
  50% { 
    opacity: 1; 
    transform: translateY(50vh) translateX(var(--drift)) rotate(var(--rotation)); 
  }
  100% { 
    transform: translateY(calc(100vh + 30px)) translateX(calc(var(--drift) * 2)) rotate(calc(var(--rotation) * 2)); 
    opacity: 0; 
  }
}

/* Goldenes Konfetti mit Glitzereffekt */
.confetti.golden {
  animation: confettiFall 5s ease-in-out forwards, glitter 0.3s ease-in-out infinite alternate;
}

@keyframes glitter {
  from { opacity: 0.8; box-shadow: 0 0 10px rgba(255, 215, 0, 0.6); }
  to { opacity: 1; box-shadow: 0 0 20px rgba(255, 215, 0, 0.9); }
}