/* ===== ПЕРЕМЕННЫЕ ===== */
:root {
  --bg:           #16100B;
  --bg-card:      #1E1710;
  --bg-card2:     #231C14;
  --gold:         #FDC86C;
  --gold-dim:     rgba(253,200,108,0.15);
  --gold-border:  rgba(253,200,108,0.12);
  --gold-border2: rgba(253,200,108,0.2);
  --gold-glow:    rgba(253,200,108,0.08);
  --red:          #8B1A1A;
  --red-bright:   #C0392B;
  --red-dark:     #5C1010;
  --red-darker:   #2A0808;
  --white:        #F2F2F2;
  --muted:        #6B6860;
  --muted2:       #4A4742;
  --pill-bg:      #2A2420;
  --tab-bg:       #0E0B08;
}

/* ===== RESET ===== */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--white);
  font-family: 'Science Gothic', 'Arial Black', 'Impact', sans-serif;
  font-stretch: condensed;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
}

/* ===== LAYOUT ===== */
#app {
  width: 100%;
  max-width: 390px;
  min-height: 100vh;
  position: relative;
  background: var(--bg);
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

.screen {
  display: none;
  padding: 16px 16px 80px 16px;
  opacity: 0;
  transition: opacity 0.15s ease;
  min-height: calc(100vh - 64px);
}
.screen.active {
  display: block;
  opacity: 1;
}

/* ===== ТИПОГРАФИКА ===== */
.h1 {
  font-size: 48px;
  font-weight: 900;
  font-stretch: condensed;
  text-transform: uppercase;
  color: var(--white);
  letter-spacing: -1px;
  line-height: 0.95;
  margin: 0 0 16px 0;
}
.h1.italic { font-style: italic; }
.h1.big { font-size: 56px; }

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--white);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 0 0 16px 0;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.back-btn svg { width: 18px; height: 18px; }

/* ===== УТИЛИТЫ ===== */
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.col2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.col2 .card { margin-bottom: 0; }
.col2 .mini-card { margin-bottom: 0; }
.muted { color: var(--muted); }
.muted2 { color: var(--muted2); }
.small-text { font-size: 12px; color: var(--muted); }
.section-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 8px 0;
}
.section-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
  margin: 16px 0 8px 0;
}