/* =====================================================================
   Stellar Idle — мультяшный интерфейс (по мотивам Doodle God)
   Тёмно-синие карточки с толстым контуром и «3D»-тенью,
   глянцевые золотые кнопки, круглые пузыри-иконки, шрифты Rubik + Nunito.
   ===================================================================== */
:root {
  --out: #1a1033;
  --bg: #0d0b2e;
  --panel: #171344;
  --card: #2a2470;
  --card-2: #221d5e;
  --card-hi: #353090;
  --text: #fff7e6;
  --muted: #b3a9e6;
  --accent: #7dd3ff;
  --gold: #ffc93c;
  --gold-hi: #ffe58a;
  --gold-lo: #e09a18;
  --gold-sh: #8a5208;
  --dm: #c08bff;
  --good: #7dff9a;
  --bad: #ff6b7d;
  --radius: 16px;
  --shadow: 0 4px 0 #0a0720;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 700;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
button { font-family: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
.hidden { display: none !important; }
kbd {
  display: inline-block; padding: 0 6px; border-radius: 6px; font-size: 11px; font-family: inherit; font-weight: 900;
  background: var(--card-2); border: 2px solid var(--out); box-shadow: 0 2px 0 var(--out);
}

/* обводка текста в мультяшном стиле */
.outline, .bld .count, .logo-t, .res-main, #planet-name, .big-num, #modal h3, .warp-card h3, .tal-head h3, .q-head, .exo-num, .sec-name {
  text-shadow: 0 3px 0 var(--out), 2px 2px 0 var(--out), -2px 2px 0 var(--out), 2px -2px 0 var(--out), -2px -2px 0 var(--out), 2px 0 0 var(--out), -2px 0 0 var(--out), 0 -2px 0 var(--out);
}

/* общий вид «карточки» */
.card, .bld, .upg, .quest, .mega, .warp-card, .prod, .chart-card, .kpi, .exo-card, .tal-col, #tracker, #comms, .toast, #tip, #modal, .day, .sec-card {
  background: linear-gradient(180deg, var(--card-hi) 0%, var(--card) 18%, var(--card-2) 100%);
  border: 3px solid var(--out);
  border-radius: var(--radius);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.14), var(--shadow);
}

/* глянцевые кнопки */
.btn-gold, .btn-buyall, .q-claim, .mega-btn, .btn-warp, #modal .btns button, #modal .set-btns button {
  border: 3px solid var(--out);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 45%, var(--gold-lo) 100%);
  color: var(--out);
  font-weight: 900;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.65), 0 4px 0 var(--gold-sh), 0 5px 0 var(--out);
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.btn-buyall:hover:not(:disabled), .q-claim:hover, .mega-btn:hover:not(:disabled), .btn-warp:hover:not(:disabled), #modal .btns button:hover, #modal .set-btns button:hover { filter: brightness(1.08); }
.btn-buyall:active:not(:disabled), .q-claim:active, .mega-btn:active:not(:disabled), .btn-warp:active:not(:disabled), #modal .btns button:active, #modal .set-btns button:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.65), 0 1px 0 var(--gold-sh), 0 2px 0 var(--out);
}
button:disabled.btn-buyall, .mega-btn:disabled, .btn-warp:disabled { filter: grayscale(.85) brightness(.7); }
#modal .btns button.danger, #modal .set-btns button.danger {
  background: linear-gradient(180deg, #ff9aa6 0%, #ff5a6e 45%, #d43048 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55), 0 4px 0 #7a1020, 0 5px 0 var(--out);
}

/* круглые «пузыри» под иконки */
.bubble, .bld .ico, .upg img, .q-ico img, .mega > img, .exo-card img, .tal img, #upg-done img, .art, .day img {
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #6a62d8 0%, #3a3396 45%, #1d1858 100%);
  border: 3px solid var(--out);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.18), 0 3px 0 #0a0720;
}

#app { display: flex; flex-direction: column; height: 100vh; }

/* платформа: без выделения текста, браузерного скролла, pull-to-refresh и подсветки нажатий */
html, body { overflow: hidden; overscroll-behavior: none; height: 100%; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
#space-canvas { touch-action: none; }
textarea, input { -webkit-user-select: text; user-select: text; }