/* ===== Theme ===== */
:root{
  --bg:#0a0e14; --panel:#161b22; --panel-2:#0e131a; --text:#f3efe2; --muted:#b9b4a0; --gold:#c8a448; --blue:#2f6db5; --border:rgba(255,255,255,.10); --border-2:rgba(255,255,255,.18);
}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans";background:radial-gradient(1200px 700px at 10% -10%,#1b2430 0,transparent 50%),radial-gradient(1200px 700px at 90% 110%,#0b2a5a 0,transparent 55%),var(--bg);color:var(--text)}
.container{max-width:1200px;margin:0 auto;padding:16px}
header{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:12px}
.h2{margin:0 0 4px}
.h3{margin:10px 0 6px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.stat-title{font-size:.82rem;color:var(--muted);margin-bottom:6px}
.stat-value{font-size:1.3rem;font-weight:700}
.small{font-size:.9rem;color:var(--muted)}
/* Small inline tooltip for the Ascension card */
.hint{
  display:inline-block;margin-left:6px;width:18px;height:18px;
  border-radius:50%;background:#243042;color:#d9d4c6;
  font-weight:700;font-size:.75rem;text-align:center;line-height:18px;
  cursor:help;position:relative;user-select:none;
}
.hint:hover::after{
  content:attr(data-tip);
  position:absolute;top:100%;left:0;transform:translateY(8px);
  background:#0e131a;color:var(--text);
  border:1px solid var(--border);border-radius:8px;
  padding:8px 10px;width:280px;max-width:min(75vw,320px);
  box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:50;white-space:normal;
}
.block{display:block}
.grid{display:grid;grid-template-columns:1.25fr .75fr;gap:16px;margin-top:16px;align-items:start}
.clicker{display:flex;gap:12px;align-items:center;margin:8px 0 14px}
.btn{appearance:none;border:none;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer;transition:transform .04s ease,opacity .2s,filter .2s}
.btn:active{transform:translateY(1px) scale(.995)}
.btn.primary{background:linear-gradient(180deg,#e7c36b,var(--gold));color:#2b2205;box-shadow:0 2px 0 rgba(0,0,0,.35)}
.btn.secondary{background:linear-gradient(180deg,#5c8fd1,var(--blue));color:#061a35}
.btn.warn{background:linear-gradient(180deg,#ffd86b,#f0b020);color:#2b2205}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--border-2)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
select{background:#0b1220;color:var(--text);border:1px solid var(--border-2);border-radius:10px;padding:8px 10px}
.shop{display:flex;flex-direction:column;gap:10px}
.shop-row{display:grid;grid-template-columns:36px 1fr 110px 210px 120px;gap:8px;align-items:center;padding:10px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--border)}
/* Upgrades compact layout: icon | text | cost | button */
.shop-row.upg{
  display: grid;
  /* icon | title+desc | cost | button */
  grid-template-columns: 36px minmax(260px,1fr) max-content 88px;
  gap: 12px;
  align-items: center;
}
.upg-text, .upg-title { min-width: 0; }
.upg-title{
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* shows … instead of chopping */
}
.upg-title .owned{color:var(--muted);font-weight:600}
.upg-desc{
  margin-top: 4px;
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.25;
}
.upg-cost{
  justify-self: end;
  text-align: right;
  white-space: nowrap;      /* keep “250 gold” on one line */
}
#upgrades{min-height:320px}
.icon{width:28px;height:28px;border-radius:6px;background:#0e131a;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:18px}
.shop-title{font-weight:700}
.shop-meta{font-size:.85rem;color:var(--muted)}
.howto{margin-bottom:10px}
.sep{border-color:var(--border)}
footer.footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-top: 60px;
  padding: 20px 16px 35px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
  border-top: 1px solid var(--border);
}
footer.footer p {
  margin: 4px 0;
}
footer.footer .copyright {
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--muted);
  opacity: 0.9;
}
.bar-wrap{margin-top:8px;height:10px;background:#1b2430;border-radius:6px;overflow:hidden;border:1px solid var(--border-2)}
.bar{height:100%;width:0%;background:linear-gradient(90deg,var(--blue),var(--gold))}
@media (max-width:980px){.grid{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}}
/* Optional: nudge for narrower viewports */
@media (max-width: 1200px){
  .shop-row.upg{
    grid-template-columns: 36px minmax(200px,1fr) max-content 88px;
  }
}