html,body{background:#0a0e17;color:#fff;margin:0;padding:20px;font-family:sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}

.game-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 20px;
}

.top-hud{display:flex;gap:10px;margin-bottom:15px;grid-column:1/-1}
.hud-item {
	background: #141b2b;
	padding: 8px 15px;
	border-radius: 6px;
	border: 1px solid #222f47;
	font-weight: bold;
	font-size: 14px;
}
.hud-item i{color:#00cbd6;margin-right:5px}

.click-area{
background:#111622;
border-radius:8px;
padding:40px;
position:relative;
min-height:400px;
display:flex;flex-direction:column;align-items:center;justify-content:center;
border:1px solid #1f293d;
}

.btn-glow {
  position: absolute;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(6,182,212,0.04) 0%, transparent 70%);
  pointer-events: none;
}

#clickBtn {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  border: 4px solid #1a2333;
  background: #00e5ff;
  color: #0b0e14;
  font-size: 28px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 0 #009cb3;
  user-select: none;
}
#clickBtn:active {
  transform: translateY(4px);
  box-shadow: 0 4px 0 #009cb3;
}

#clickBtn.frenzy {
  background: #ffb700 !important;
  box-shadow: 0 8px 0 #cc9200 !important;
  color: #000;
}

.shop-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.shop-section {
  background: #131a2a;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #232f4c;
}
.section-title {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #8fa3c7;
  text-transform: uppercase;
}

#buildingsContainer {
  max-height: 500px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#buildingsContainer::-webkit-scrollbar { width: 6px; }
#buildingsContainer::-webkit-scrollbar-thumb { background: #2c3b59; border-radius: 3px; }

.box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background: #182238;
  border-radius: 6px;
  border: 1px solid transparent;
}
.box:hover {
  background: #1c2740;
  border-color: #364b7a;
}

.box-info { display: flex; gap: 10px; align-items: center; }
.box-icon {
  width: 50px; height: 50px;
  background: #111726;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  border-radius: 4px;
}
.box-details h3 { margin: 0; font-size: 15px; color: #fff; }
.box-details p { margin: 4px 0 0; color: #768ba3; font-size: 12px; }

.box-actions { text-align: right; }
.cost { font-size: 13px; color: #00e5ff; font-weight: bold; display: block; margin-bottom: 5px; }

.buy-btn {
  background: #7c3aed;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
}
.buy-btn:hover { background: #8b5cf6; }
.buy-btn[disabled] { background: #283142; color: #52627a; cursor: not-allowed; }

.owned-badge {
  background: #0f1422;
  padding: 2px 6px;
  font-size: 11px;
  border-radius: 3px;
  color: #8fa3c7;
}

.box.locked { opacity: 0.3; }
.box.locked .buy-btn { display: none; }

.pills-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.upgrade-pill {
  background: #182238;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 4px;
  color: #a0b2cc;
}
.upgrade-pill.bought { background: #00e5ff; color: #000; }

.prestige-btn {
  position: fixed; left: 20px; bottom: 50px;
  background: #22c55e; color: #000; padding: 10px 15px;
  border: none; font-weight: bold; cursor: pointer; border-radius: 4px;
}

.prestige-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center; z-index: 99;
}
.prestige-modal-content {
  background: #131a2a; padding: 20px; border-radius: 8px; width: 90%; max-width: 500px;
}

.golden-cookie {
  position: fixed; width: 50px; height: 50px; background: #ffb700;
  border-radius: 25px; display: none; z-index: 10; cursor: pointer;
}
.golden-cookie.active { display: block; }

.floating-text {
  position: absolute; color: #fff; font-weight: bold;
  animation: float 0.7s ease-out forwards;
}
@keyframes float { to { transform: translateY(-30px); opacity: 0; } }

.achievement-popup {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  background: #1c2740; border: 1px solid #22c55e; padding: 10px;
  display: none; align-items: center; gap: 10px; border-radius: 4px;
}
.achievement-popup.show { display: flex; }

.news-bar { position: fixed; bottom: 0; left: 0; width: 100%; background: #0b0e14; padding: 5px; text-align: center; font-size: 12px; color: #52627a; }

.welcome-modal { 
  position: fixed; 
  inset: 0; 
  background: rgba(0,0,0,0.8); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  z-index: 100;
}

@media (max-width: 980px) {
  .game-wrapper { grid-template-columns: 1fr; gap: 15px; }
  #buildingsContainer { max-height: 400px; }
}