:root {
  --bg: #070b13;
  --panel: rgba(9, 16, 28, .82);
  --panel2: rgba(17, 26, 42, .86);
  --line: rgba(255, 209, 122, .28);
  --gold: #d69a35;
  --gold2: #ffd37a;
  --blue: #42b7ff;
  --green: #3ddc84;
  --text: #f8f1df;
  --muted: #aab3c2;
  --danger: #f45454;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; min-height:100%; background: var(--bg); color:var(--text); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { display:flex; justify-content:center; overflow-x:hidden; }

.app {
  width:100%;
  max-width:520px;
  min-height:100vh;
  position:relative;
  padding:12px 12px 92px;
  background:
    radial-gradient(circle at 50% 0%, rgba(55, 138, 202, .23), transparent 32%),
    radial-gradient(circle at 50% 45%, rgba(214, 154, 53, .12), transparent 34%),
    #070b13;
}

.glass {
  background: linear-gradient(180deg, rgba(19, 31, 50, .88), rgba(7, 11, 19, .82));
  border:1px solid var(--line);
  box-shadow: 0 16px 45px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}

.top-panel {
  border-radius:22px;
  padding:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.player-block { display:flex; align-items:center; gap:10px; min-width:0; }
.avatar {
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  background: radial-gradient(circle, #2d4467, #0d1422);
  border:2px solid var(--gold);
  box-shadow: 0 0 22px rgba(214,154,53,.35);
}
.game-title { font-weight:900; letter-spacing:.2px; line-height:1.1; }
.link-btn { border:0; background:transparent; color:var(--blue); padding:0; font-size:12px; cursor:pointer; }

.resource-chip {
  display:flex; align-items:center; gap:6px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.1);
  padding:8px 10px;
  border-radius:999px;
  font-weight:850;
  white-space:nowrap;
}

.stage-panel {
  text-align:center;
  border-radius:24px;
  padding:14px;
  margin-bottom:10px;
}
.chapter {
  color:var(--gold2);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em;
}
h1 { margin:4px 0 8px; font-size:25px; text-shadow:0 3px 0 rgba(0,0,0,.35); }
.stage-meta { display:flex; justify-content:space-between; color:var(--muted); font-size:12px; margin-bottom:7px; }

.progress {
  height:16px;
  border-radius:999px;
  background:#050811;
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
}
.progress-fill {
  width:0%;
  height:100%;
  background: linear-gradient(90deg, #9f5b1e, var(--gold2));
  box-shadow: 0 0 18px rgba(255,211,122,.45);
  transition: width .25s ease;
}
.progress-text { color:var(--muted); font-size:12px; margin-top:5px; }

.scene {
  height:360px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  position:relative;
  display:grid;
  place-items:center;
  background-size:cover;
  background-position:center;
  background-image:
    linear-gradient(180deg, rgba(15,23,42,.25), rgba(7,11,19,.85)),
    radial-gradient(circle at center, #283955, #07101c);
  box-shadow: inset 0 -80px 90px rgba(0,0,0,.36);
}
.scene-overlay {
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 54%, rgba(255, 197, 96, .24), transparent 18%),
    linear-gradient(180deg, transparent 50%, rgba(0,0,0,.55));
  pointer-events:none;
}
.tap-object {
  position:relative;
  z-index:2;
  width:190px; height:190px;
  border:0;
  background: radial-gradient(circle, rgba(255,211,122,.16), rgba(66,183,255,.05), transparent 68%);
  border-radius:50%;
  cursor:pointer;
  display:grid;
  place-items:center;
  animation: idlePulse 2.4s ease-in-out infinite;
}
.tap-object:active { transform: scale(.92); filter: brightness(1.18); }
.tap-object img {
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.5)) drop-shadow(0 0 15px rgba(255,180,80,.2));
  display:none;
}
.tap-object.has-img img { display:block; }
.tap-object.has-img #fallbackEmoji { display:none; }
#fallbackEmoji { font-size:86px; filter:drop-shadow(0 14px 18px rgba(0,0,0,.5)); }
.tap-hint {
  position:absolute; z-index:3; bottom:28px;
  font-weight:950; font-size:34px; letter-spacing:.06em;
  color:var(--gold2);
  text-shadow: 0 3px 0 #000, 0 0 18px rgba(255,211,122,.6);
}
@keyframes idlePulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.035); } }

.float {
  position:absolute;
  z-index:20;
  pointer-events:none;
  color:#fff2c4;
  font-size:26px;
  font-weight:950;
  text-shadow:0 3px 0 #000, 0 0 16px rgba(255,211,122,.8);
  animation: floatUp .75s ease-out forwards;
}
@keyframes floatUp {
  0% { opacity:0; transform:translateY(0) scale(.85); }
  20% { opacity:1; }
  100% { opacity:0; transform:translateY(-82px) scale(1.12); }
}

.stats-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:10px 0;
}
.stat-card {
  border-radius:18px;
  padding:11px;
}
.stat-label { color:var(--muted); font-size:12px; }
.stat-value { font-size:19px; font-weight:950; margin-top:3px; overflow-wrap:anywhere; }

.main-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.gold-btn, .blue-btn {
  border:0;
  border-radius:17px;
  padding:13px 10px;
  color:#130c03;
  font-weight:950;
  cursor:pointer;
  box-shadow: 0 12px 25px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.28);
}
.gold-btn { background: linear-gradient(180deg, #ffe19a, #c47a23); }
.blue-btn { background: linear-gradient(180deg, #89dcff, #2183d2); color:#06111e; }
button:disabled { opacity:.45; filter:grayscale(.4); cursor:not-allowed; }

.upgrade-panel {
  border-radius:24px;
  padding:12px;
}
.panel-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:950;
  margin-bottom:9px;
}
.mini-text { color:var(--muted); font-size:12px; font-weight:700; }
.upgrades { display:grid; gap:8px; }
.upgrade {
  display:grid;
  grid-template-columns:54px 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px;
  background:linear-gradient(180deg, rgba(24, 37, 58, .9), rgba(10, 15, 25, .9));
  border:1px solid rgba(255,211,122,.2);
  border-radius:19px;
}
.upgrade-icon {
  width:54px; height:54px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background: radial-gradient(circle, rgba(255,211,122,.22), rgba(0,0,0,.3));
  border:1px solid rgba(255,255,255,.1);
  overflow:hidden;
}
.upgrade-icon img { width:100%; height:100%; object-fit:contain; display:none; }
.upgrade-icon.has-img img { display:block; }
.upgrade-icon.has-img span { display:none; }
.upgrade-name { font-weight:900; font-size:14px; }
.upgrade-desc { color:var(--muted); font-size:12px; margin-top:2px; }
.buy-btn {
  min-width:92px;
  border:1px solid rgba(255,211,122,.38);
  background:linear-gradient(180deg, #342718, #15100a);
  color:var(--gold2);
  padding:10px 8px;
  border-radius:14px;
  font-weight:950;
  cursor:pointer;
}

.bottom-nav {
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:10px;
  width:calc(100% - 24px);
  max-width:496px;
  border-radius:22px;
  padding:8px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:6px;
  z-index:30;
}
.bottom-nav button, .small-dark-btn {
  border:0;
  border-radius:16px;
  background:rgba(0,0,0,.22);
  color:var(--text);
  font-weight:850;
  padding:9px 6px;
  cursor:pointer;
}
.bottom-nav span { display:block; font-size:11px; color:var(--muted); margin-top:2px; }

.leaderboard-panel {
  position:fixed;
  z-index:60;
  left:50%;
  bottom:92px;
  transform:translateX(-50%);
  width:calc(100% - 24px);
  max-width:496px;
  max-height:65vh;
  overflow:auto;
  border-radius:24px;
  padding:14px;
}
.lb-row {
  display:grid;
  grid-template-columns:42px 1fr auto;
  gap:8px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.lb-name { font-weight:850; }
.lb-meta { color:var(--muted); font-size:12px; }

.toast {
  position:fixed;
  left:50%;
  top:18px;
  transform:translateX(-50%);
  z-index:90;
  width:calc(100% - 28px);
  max-width:480px;
  padding:13px;
  border-radius:18px;
  background:rgba(8, 13, 23, .96);
  border:1px solid var(--line);
  box-shadow:0 16px 45px rgba(0,0,0,.4);
  text-align:center;
  font-weight:850;
}
.hidden { display:none !important; }

@media (max-width:390px) {
  .scene { height:320px; }
  .tap-object { width:165px; height:165px; }
  h1 { font-size:22px; }
  .upgrade { grid-template-columns:48px 1fr; }
  .buy-btn { grid-column:1 / -1; width:100%; }
}
.player-links{display:flex;gap:10px;align-items:center}.modal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.72);display:grid;place-items:center;padding:18px}.modal-card{width:100%;max-width:430px;border-radius:24px;padding:18px}.auth-note{color:var(--muted);font-size:13px;line-height:1.5}.auth-providers{display:grid;gap:12px;margin-top:14px}.provider-wrap{display:flex;justify-content:center;min-height:46px}.provider-btn{display:block;text-align:center;text-decoration:none;border-radius:14px;padding:13px 16px;font-weight:900}.provider-btn.vk{background:#2787f5;color:white}.provider-btn.logout{margin-top:14px;background:#381b20;color:#ffb5bd;border:1px solid rgba(244,84,84,.35)}.auth-identity{padding:12px;border-radius:14px;background:rgba(61,220,132,.1);border:1px solid rgba(61,220,132,.28);color:#bdf6d3}.scene.no-asset::after{content:'Загрузите фон этапа в админке';position:absolute;top:16px;color:var(--muted);font-size:12px;z-index:3}
.bottom-nav a{appearance:none;border:0;background:transparent;color:inherit;text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:inherit;font-weight:800}.bottom-nav a span{font-size:12px}