/* Приложение ярмарки — главный экран команды на телефоне. Палитра сайта и Штаба: ночь, снег, сияние и золото. */
:root {
  --night: #0E1A2B;
  --depth: #15253B;
  --depth-2: #1B2F4A;
  --line: #22385A;
  --line-2: #2E4A70;
  --snow: #F3F0E8;
  --muted: #A9B6C6;
  --aurora: #6FE0B8;
  --aurora-hi: #9FF0D2;
  --aurora-ink: #0B2A20;
  --gold: #E8B96A;
  --display: "Forum", Georgia, serif;
  --body: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--snow); font: 400 16px/1.45 var(--body); min-height: 100dvh; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--aurora-hi); outline-offset: 2px; border-radius: 6px; }
.muted { color: var(--muted); margin: 0; }
h1 { margin: 0; font-weight: 600; }

.shapka { display: grid; gap: 2px; }
.brend { font-family: var(--display); font-size: 26px; line-height: 1; letter-spacing: 0.01em; }
.podbrend { font-size: 12px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; }

/* Вход, ожидание, ошибки — по центру */
.centr { min-height: 100dvh; display: grid; align-content: center; gap: 22px; padding: 32px 16px calc(32px + env(safe-area-inset-bottom)); max-width: 440px; margin: 0 auto; }
.centr h1 { font-size: 24px; }
.hint { margin: -8px 0 0; font-size: 14px; color: var(--muted); }
.adres { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--depth); border: 1px solid var(--line); font-size: 15px; overflow-wrap: anywhere; }
#vhod { display: flex; justify-content: center; }

.knopka { min-height: 48px; padding: 12px 18px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--depth); color: var(--snow); font-weight: 500; }
.knopka.osnovnaya { background: var(--aurora); color: var(--aurora-ink); border-color: var(--aurora); }
.ssylka { background: none; border: 0; padding: 12px 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; justify-self: start; }

/* Главный экран */
.ekran { max-width: 560px; margin: 0 auto; display: grid; gap: 24px; padding: calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); }
.kto { display: grid; gap: 4px; }
.kto h1 { font-size: 24px; }
.kto .muted { font-size: 14px; }

/* Плитки крупные — нажимать в перчатках на морозе */
.plitki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.plitka { position: relative; display: grid; align-content: end; gap: 4px; min-height: 128px; padding: 16px; border-radius: 16px; background: var(--depth); border: 1px solid var(--line); color: var(--snow); text-decoration: none; }
.plitka::before { content: ""; position: absolute; top: 18px; left: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--aurora); box-shadow: 0 0 12px var(--aurora); }
.plitka:active { background: var(--depth-2); border-color: var(--aurora); }
.plitka-imya { font-size: 18px; font-weight: 600; line-height: 1.2; }
.plitka-podpis { font-size: 13px; color: var(--muted); line-height: 1.3; }
.plitka.zakryta { opacity: 0.55; }
.plitka.zakryta::before { background: var(--line-2); box-shadow: none; }
.metka { position: absolute; top: 14px; right: 14px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.niz { display: grid; }

@media (max-width: 340px) { .plitki { grid-template-columns: 1fr; } }