:root {
  --safe-top: max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px));
  --safe-right: max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px), var(--tg-content-safe-area-inset-right, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px));
  --safe-left: max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px), var(--tg-content-safe-area-inset-left, 0px));
  padding: var(--safe-top) var(--safe-right) 0 var(--safe-left);
  scroll-padding-top: calc(var(--safe-top) + 12px);
}
:root[data-telegram][data-theme] {
  --bg: var(--tg-theme-bg-color, var(--telegram-default-bg));
  --card: var(--tg-theme-secondary-bg-color, var(--telegram-default-card));
  --ink: var(--tg-theme-text-color, var(--telegram-default-ink));
  --mute: var(--tg-theme-hint-color, var(--telegram-default-mute));
  --btn: var(--tg-theme-button-color, var(--telegram-default-btn));
  --btnink: var(--tg-theme-button-text-color, var(--telegram-default-btnink));
}
:root[data-theme="light"] {
  --telegram-default-bg: #eef1f6;
  --telegram-default-card: #fff;
  --telegram-default-ink: #101820;
  --telegram-default-mute: #5d6877;
  --telegram-default-btn: #101820;
  --telegram-default-btnink: #fff;
}
:root[data-theme="dark"] {
  --telegram-default-bg: #0e1420;
  --telegram-default-card: #172030;
  --telegram-default-ink: #eef2f8;
  --telegram-default-mute: #9aa6b8;
  --telegram-default-btn: #ffd400;
  --telegram-default-btnink: #101820;
}
body {
  min-height: 100vh;
  min-height: var(--tg-viewport-stable-height, 100dvh);
}
[hidden] { display: none !important; }
#game-tools {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  max-width: 600px;
  margin: 0 auto;
  padding: 8px 14px 0;
}
#game-tools details { min-width: 0; }
#game-tools summary {
  width: max-content;
  min-height: 44px;
  padding: 11px 9px;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
}
.progress-box {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.progress-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.progress-buttons label { display: inline-flex; align-items: center; }
#sync-conflict, #transfer-status { margin-top: 10px; }
.wrap { padding-bottom: calc(140px + var(--safe-bottom)); overflow-wrap: anywhere; }
#bar {
  z-index: 3;
  padding: 10px calc(14px + var(--safe-right)) calc(10px + var(--safe-bottom)) calc(14px + var(--safe-left));
}
#toast { z-index: 7; bottom: calc(130px + var(--safe-bottom)); }
#nt { top: calc(10px + var(--safe-top)); z-index: 7; }
.ov {
  z-index: 4;
  inset: auto max(8px, var(--safe-right)) calc(122px + var(--safe-bottom)) max(8px, var(--safe-left));
  max-height: 50vh;
  overflow: auto;
  border-radius: 16px;
}
.ov .c { max-width: 100%; }
.tabs.s { top: var(--safe-top); }
.btn, .act .btn, .tabs button, .tabs.s button, .folder-grid button { min-height: 44px; }
input[type="number"], input[type="text"] { min-height: 44px; max-width: 100%; font-size: 16px; }
.r > :first-child { min-width: 0; }
@media (max-width: 380px) {
  .wrap, #game-tools { padding-left: 10px; padding-right: 10px; }
  .c { padding: 10px; }
  .cash { font-size: clamp(19px, 7vw, 30px); }
  .tag { font-size: 11px; padding: 7px 7px 7px 15px; }
  .r, .tm { flex-wrap: wrap; gap: 6px; }
}