/* === Базовый layout: html/body, .app, button, input. Подключается ВСЕМИ страницами. === */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; overscroll-behavior: none; }
/* html overflow:hidden + body scrolling — убирает stable scrollbar gutter:
   браузер не резервирует место под scrollbar когда контент влезает.
   Body становится единственным скроллящимся контейнером. */
html { height: 100dvh; overflow: hidden; }
body {
  font-family: 'EmojiFont', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Inter", sans-serif;
  background-color: var(--bg);
  color: var(--text);
  height: 100dvh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Фоновый градиент — фиксированный слой за всем контентом (не reflow'ит с клавиатурой). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--bg);
  background-image:
    radial-gradient(900px 700px at 90% -10%, var(--bg-grad-1) 0%, transparent 60%),
    radial-gradient(700px 500px at -10% 110%, var(--bg-grad-2) 0%, transparent 65%);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%;
  pointer-events: none;
}

/* Скрываем декорации type=search (крестик/иконка). Используем type=search чтобы
   Samsung Keyboard не показывал quick-insert панель. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; display: none; }
input[type="search"] { -webkit-appearance: textfield; appearance: textfield; }

/* SEO: невидимый h1 для поисковых ботов и screen-readers. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.app {
  max-width: 720px; margin: 0 auto;
  /* Top: статус-бар iOS + safe-area. Bottom: bottom-nav + reactions-bar + safe-area. */
  padding:
    calc(20px + env(safe-area-inset-top))
    16px
    calc(140px + env(safe-area-inset-bottom));
  /* z-index поднимает контент над .emoji-rain (z-index 0). */
  position: relative;
  z-index: var(--z-content);
}

/* Default button. Конкретные .primary/.ghost/.icon-btn — в IconButton/InputCard. */
button {
  font: inherit; cursor: pointer; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  padding: 12px 16px; border-radius: var(--radius-sm);
  transition: transform 0.06s, border-color var(--t-quick), background var(--t-quick);
}
button:hover { border-color: var(--border-strong); }
button:active { transform: translateY(1px); }
button.primary {
  border-color: transparent; color: #fff;
  background: var(--grad-primary);
  box-shadow: 0 6px 20px rgba(79,125,255,0.35);
}
button.ghost { background: transparent; }
button:disabled { opacity: 0.4; cursor: not-allowed; }

@media (prefers-color-scheme: light) {
  button.primary { box-shadow: 0 6px 20px rgba(59,130,246,0.28); }
}
[data-theme="light"] button.primary { box-shadow: 0 6px 20px rgba(59,130,246,0.28); }

/* Square-кнопки с иконкой в шапке (share / new-game / install / back). */
.icon-btn {
  width: 36px; height: 36px;
  min-width: 36px; min-height: 36px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.icon-btn:hover { border-color: var(--border-strong); }
.icon-btn[hidden] { display: none !important; }
.icon-btn svg { display: block; }

.muted.small { font-size: 12px; line-height: 1.45; margin: 0 0 12px; color: var(--muted); }

/* <details> — общий стиль summary (используется на /create в SuggestList). */
details > summary {
  cursor: pointer; padding: 8px 0; font-size: 13px; color: var(--muted);
  user-select: none;
}
details > summary:hover { color: var(--text); }

/* PWA-режим = такая же игра, только без кнопки «установить». */
body.pwa-mode #install-pwa { display: none !important; }

/* Кэш скрытия для оверлеев (ставится на body когда открыт share/install/nick).
   Скрывает базовый игровой UI. На отдельных компонент-CSS лежат :hidden обработчики
   их собственных контейнеров. */
body.share-open #input-card,
body.share-open #win,
body.share-open #stats,
body.share-open #active-guess,
body.share-open #me-stat,
body.share-open #me-nick,
body.share-open #share,
body.share-open #new-game,
body.share-open #install-pwa,
body.install-open #input-card,
body.install-open #win,
body.install-open #stats,
body.install-open #active-guess,
body.install-open #me-stat,
body.install-open #me-nick,
body.install-open #share,
body.install-open #new-game,
body.install-open #install-pwa,
body.nick-open #input-card,
body.nick-open #win,
body.nick-open #stats,
body.nick-open #active-guess,
body.nick-open #me-stat,
body.nick-open #me-nick,
body.nick-open #share,
body.nick-open #new-game,
body.nick-open #install-pwa,
body.create-open #input-card,
body.create-open #win,
body.create-open #stats,
body.create-open #board-tabs,
body.create-open #attempts-board,
body.create-open #active-guess,
body.create-open #me-stat,
body.create-open #me-nick,
body.create-open .reactions-bar,
body.create-open #share-panel,
body.create-open #install-panel,
body.create-open #share,
body.create-open #new-game,
body.create-open #install-pwa { display: none !important; }
body.nick-open #nick-panel { display: block !important; }