/* Единый вид стартового экрана и экранов онлайна для карточных игр (образец — «Ятзи»):
   слева лого и название, справа каталог и тема; ниже выбор режима, «Играть» и «Правила».
   Подключается после theme.css. Классы совпадают с «Ятзи» и «Сапёром». */
.start {
  max-width: 440px; margin: 0 auto; width: 100%; padding: 16px; box-sizing: border-box;
  min-height: calc(100vh - 0px); min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center; gap: clamp(10px, 2.8vh, 26px);
}
.brand-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.brand { min-width: 0; display: flex; flex-direction: column; gap: clamp(6px, 1.6vh, 14px); align-items: flex-start; }
.brand h1 { margin: 0; font-size: clamp(26px, min(6.5vh, 10vw), 48px); letter-spacing: -0.02em; line-height: 1; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.theme-btn {
  width: 44px; height: 44px; flex: none; padding: 0; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); color: var(--ink);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 20px; font-family: inherit;
}
.theme-btn svg { width: 22px; height: 22px; }
.logo { --d: clamp(34px, 6vh, 44px); display: flex; gap: 8px; }
.logo .lc {
  width: var(--d); height: calc(var(--d) * 1.38); border-radius: calc(var(--d) * .2); background: oklch(0.985 0.005 90); color: oklch(0.24 0.02 260);
  box-shadow: var(--game-shadow, 0 2px 0 oklch(0.85 0.01 90), 0 8px 20px -8px oklch(0.3 0.03 260 / .25));
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; font-weight: 800; font-size: calc(var(--d) * .42);
}
.logo .lc i { font-style: normal; font-size: calc(var(--d) * .5); }
.logo .lc.red { color: oklch(0.55 0.19 25); }
.logo .lc:first-child { transform: rotate(-8deg); }
.logo .lc:last-child { transform: rotate(5deg); }
.field { display: flex; flex-direction: column; gap: clamp(6px, 1.2vh, 10px); }
.field-title { font-size: 14px; font-weight: 600; color: var(--muted); }
.modes { display: flex; flex-direction: column; gap: 8px; }
.mode-btn {
  padding: clamp(8px, 1.8vh, 14px) 16px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface);
  color: var(--ink); font-size: clamp(15px, 2.5vh, 17px); min-height: clamp(44px, 7vh, 56px); font-family: inherit; text-align: left; cursor: pointer;
}
.mode-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.mode-btn small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.muted-text { color: var(--muted); line-height: 1.5; }
.start-actions { display: flex; gap: 10px; }
.start-actions .btn-play { flex: 1; }
.btn-play {
  min-height: clamp(46px, 7vh, 56px); border-radius: 14px; border: none; background: var(--accent); color: var(--accent-ink);
  font-size: 18px; font-weight: 700; cursor: pointer; font-family: inherit; box-shadow: var(--game-shadow, 0 2px 0 oklch(0.85 0.01 90), 0 8px 20px -8px oklch(0.3 0.03 260 / .25));
}
.btn-play:disabled { background: var(--line); color: var(--muted); cursor: not-allowed; box-shadow: none; }
.btn-secondary {
  min-height: 52px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font-size: 16px; cursor: pointer; font-family: inherit;
}
.btn-secondary.wide { padding: 0 22px; min-height: clamp(46px, 7vh, 56px); font-size: 17px; }
.btn-secondary.small { min-height: 44px; padding: 0 14px; border-radius: 12px; font-size: 15px; }
.bal-line { text-align: center; color: var(--ink); font-weight: 700; font-size: 15px; }
/* Шапка экранов онлайна: слева выход или назад, посередине название, справа переключатель темы */
.o-head { display: flex; align-items: center; gap: 10px; }
.o-head h2 { margin: 0; font-size: 22px; flex: 1; min-width: 0; }
.o-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }