body {
  background:#111;
  color:#eee;
  font-family:sans-serif;
  text-align:center;
}
button {
  padding:10px 20px;
  min-height:44px;
  margin:4px;
  cursor:pointer;
  font-size:16px;
  border-radius:8px;
  background:#1c2230;
  color:#fff;
  border:1px solid #3a465e;
}
button:hover {
  border-color:#00c8c8;
  box-shadow:0 0 8px rgba(0,255,255,0.25);
}
input, select {
  min-height:44px;
  padding:8px 12px;
  font-size:16px; /* 16px+ отключает авто-зум iOS при фокусе */
  border-radius:8px;
  background:#0d1017;
  color:#eee;
  border:1px solid #3a465e;
  box-sizing:border-box;
}
input:focus, select:focus, button:focus-visible {
  outline:none;
  border-color:#00ffff;
  box-shadow:0 0 8px rgba(0,255,255,0.35);
}
table {
  margin:0 auto;
  border-collapse:collapse;
}
td,th {
  border:1px solid #555;
  padding:4px 8px;
}
h1 { color:#0ff; }
/* Подпись под заголовком первой страницы */
.main-subtitle {
  display:block;
  font-size:16px;
  font-weight:normal;
  color:#9fb0d0;
  margin-top:6px;
}
h1,h2,h3 { text-align:center; }
.hidden{display:none}

/* Контент выше фоновых фигурок */
#view-menu, #view-lobby, #view-journal { position: relative; z-index: 1; }

/* ===== Страницы меню (index, lobby) ===== */
.content {
  max-width:520px;
  margin:0 auto;
  padding:8px 12px 32px 12px;
  text-align:center;
}

/* SEO-вступление под заголовком (мелким шрифтом, до форм) */
.seo-intro {
  margin:6px auto 14px;
  max-width:720px;
  text-align:left;
  color:#a9b2c9;
  font-size:13px;
  line-height:1.5;
}
.seo-intro h2 {
  margin:0 0 6px;
  font-size:15px;
  color:#dfe5f5;
  text-align:center;
}
.seo-intro p { margin:0 0 8px; }
.seo-intro ul { margin:0; padding-left:18px; }
.seo-intro li { margin:1px 0; }
.seo-intro .seo-toggle {
  display:block;
  margin:2px auto 0;
  padding:2px 12px;
  min-height:auto;
  font-size:12px;
  background:transparent;
  border:1px solid rgba(255,255,255,0.2);
  border-radius:6px;
  color:#9fb0d0;
}
.seo-intro .seo-toggle:hover {
  border-color:#00c8c8;
  box-shadow:none;
}

.menu-box {
  background:rgba(14,18,30,0.6);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:10px;
  padding:14px 16px;
  margin:14px 0;
  text-align:left;
}
.menu-box h3 {
  margin:0 0 10px 0;
  font-size:18px;
  color:#fff;
  text-align:left;
}
.menu-box input[type="text"],
.menu-box input:not([type]),
.menu-box input[type="number"] {
  width:100%;
  margin:4px 0;
}
.menu-box label {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:16px;
  margin:8px 0;
  cursor:pointer;
}
.menu-box label input[type="checkbox"] {
  width:22px;
  height:22px;
  min-height:0;
  accent-color:#0af;
}
.menu-box .row {
  display:flex;
  gap:8px;
}
.menu-box .row input { flex:1; min-width:0; }
.menu-box .row button { flex:0 0 auto; }

/* Поля с подписью (select в форме создания игры) */
.menu-box .field {
  flex:1;
  min-width:0;
  text-align:left;
}
.menu-box .field label {
  display:block;
  margin:0 0 4px 0;
  font-size:14px;
  color:#9fb0d0;
}
.menu-box .field select {
  width:100%;
}

/* Поле seed: компактное, с подписью слева */
.seed-row {
  align-items:center;
  margin:6px 0;
}
.seed-row .field-label {
  flex:0 0 auto;
  font-size:14px;
  color:#9fb0d0;
}
.seed-row input {
  flex:1;
  min-width:0;
  min-height:34px;
  padding:5px 10px;
  font-size:14px;
}

/* Раскрывающийся блок создания игры */
/* Раскрывающийся блок создания игры — выделен другим фоном */
#createBox {
  background:linear-gradient(135deg, rgba(0,200,255,0.08), rgba(0,80,140,0.12));
  border-color:rgba(0,220,255,0.4);
}
.menu-box.collapsible .box-body { display:none; }
.menu-box.collapsible.open .box-body { display:block; }
.menu-box .box-toggle {
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:none;
  border:none;
  box-shadow:none;
  padding:4px 0;
  margin:0;
  font-size:18px;
  font-weight:bold;
  color:#fff;
  cursor:pointer;
}
.menu-box .box-toggle .arrow { transition:transform 0.2s; }
.menu-box.collapsible.open .box-toggle .arrow { transform:rotate(180deg); }
.menu-box .box-toggle:hover { border:none; box-shadow:none; }

/* Кнопка основного действия в боксе */
.primary-btn {
  width:100%;
  margin-top:10px;
  font-weight:bold;
}

/* Карточки публичных игр */
#games { margin:0; padding:0; }
.game-card {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:4px;
  background:rgba(14,18,30,0.6);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:10px;
  padding:12px 14px;
  margin:10px 0;
  text-align:left;
}
.game-card .game-name {
  font-size:17px;
  font-weight:bold;
  color:#fff;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.game-card .game-meta {
  font-size:14px;
  color:#9fb0d0;
}
.game-card .join-btn {
  width:100%;
  margin-top:6px;
  font-weight:bold;
}
#games-empty {
  color:#8a93a8;
  font-size:15px;
  padding:16px 0;
}

/* Журнал игр */
#journalBtn { width:100%; }
#view-journal .row {
  display:flex;
  gap:8px;
  margin:8px 0;
  flex-wrap:wrap;
}
#view-journal .join-btn { flex:1 1 auto; }
.journal-table {
  width:100%;
  border-collapse:collapse;
  margin-top:6px;
  font-family:monospace;
  font-size:14px;
}
.journal-table th, .journal-table td {
  padding:3px 6px;
  text-align:right;
  white-space:nowrap;
}
.journal-table th:first-child, .journal-table td:first-child {
  text-align:left;
  white-space:normal;
  overflow-wrap:anywhere;
}
.journal-table th {
  color:#9fb0d0;
  font-weight:normal;
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.journal-table td { color:#cfd8ff; }
.journal-table td.host-name { color:#ffa726; }
/* лидер DM по смертям (меньше всех): золото поверх цвета хоста */
.journal-table td.journal-leader { color:#ffd700; font-weight:bold; }
.journal-empty {
  color:#8a93a8;
  font-size:15px;
  padding:16px 0;
}

/* Поля ошибок/подсветки */
.input-error {
  border-color:#ff4444 !important;
  box-shadow:0 0 8px rgba(255,68,68,0.5) !important;
}

/* ===== Лобби ===== */
.lobby-title {
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  text-align: left;
}
#lobbyMeta { margin-top: 4px; }
#players {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 8px 0;
  text-align: left;
}
.player-row {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 16px;
}
#waitingText {
  color: #9fb0d0;
  font-size: 15px;
  text-align: left;
  margin: 4px 0 8px 0;
}


#game-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(3px);
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    color: white;
    margin-top: 20px;
    font-size: 18px;
}

/* Mobile Screen Requirements */
#screenRequirementOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  z-index: 10001;
  color: white;
  font-family: 'Arial', sans-serif;
  text-align: center;
  padding: 12px 16px;
  box-sizing: border-box;
  overflow-y: auto;
}

#orientationWarning,
#fullscreenWarning,
#bothWarning {
  background: rgba(255, 0, 0, 0.1);
  border: 2px solid #ff4444;
  border-radius: 10px;
  padding: 10px;
  margin: 6px;
  max-width: 400px;
  backdrop-filter: blur(10px);
}

.warning-icon {
  font-size: 30px;
  margin-bottom: 6px;
  animation: rotate 2s infinite linear;
  color: #ff9900;
}

.warning-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 6px;
  color: #ffcc00;
  text-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
}

.warning-text {
  font-size: 13px;
  margin-bottom: 10px;
  line-height: 1.4;
}

.fullscreen-btn {
  background: linear-gradient(45deg, #4CAF50, #45a049);
  border: none;
  border-radius: 30px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: bold;
  color: white;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
  margin-top: 8px;
}

.fullscreen-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(76, 175, 80, 0.4);
}

.continue-btn {
  background: linear-gradient(45deg, #2196F3, #1976D2);
  border: none;
  border-radius: 30px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: bold;
  color: white;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 5px 15px rgba(33, 150, 243, 0.3);
  margin-top: 8px;
}

.continue-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(33, 150, 243, 0.4);
}

.device-icon {
  font-size: 22px;
  margin: 6px;
  color: #4CAF50;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.pulse {
  animation: pulse 2s infinite;
}

#pauseOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.pause-box {
  background: linear-gradient(135deg, #333, #111);
  border: 4px solid #00ffff;
  border-radius: 15px;
  padding: 40px;
  text-align: center;
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
}

.pause-text {
  color: #00ffff;
  font-size: 48px;
  font-weight: bold;
  text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
  margin-bottom: 20px;
}

.pause-subtext {
  color: #fff;
  font-size: 18px;
  opacity: 0.8;
}

/* iOS Fullscreen Prompt */
#iosFullscreenPrompt {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10002;
  color: white;
  padding: 30px;
  box-sizing: border-box;
}

#iosFullscreenPrompt .prompt-content {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  border-radius: 20px;
  padding: 30px;
  max-width: 400px;
  text-align: center;
  border: 3px solid #3498db;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.prompt-icon {
  font-size: 48px;
  margin-bottom: 20px;
}

.prompt-hint {
  margin-top: 15px;
  font-size: 12px;
  opacity: 0.7;
}

/* Content Blocking */
.blocked {
  filter: blur(5px);
  pointer-events: none;
  opacity: 0.5;
  transition: all 0.3s ease;
}

/* ===== ���� ������� �� ���������� (index, lobby) ===== */
.controls-help {
  margin: 20px auto;
  max-width: 720px;
  padding: 12px 16px;
  background: rgba(14, 18, 30, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #cfd4e0;
  font-size: 13px;
}

.controls-help h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #ffffff;
}

.controls-help .controls-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.controls-help .controls-col {
  flex: 1 1 260px;
  min-width: 240px;
}

.controls-help h4 {
  margin: 10px 0 4px 0;
  font-size: 13px;
  color: #8fa3d8;
}

.controls-help table {
  width: 100%;
  border-collapse: collapse;
}

.controls-help td {
  padding: 2px 6px 2px 0;
  vertical-align: top;
}

.controls-help td:first-child {
  white-space: nowrap;
  font-family: monospace;
  color: #ffffff;
  padding-right: 12px;
}

/* Мобильная колонка справки: скрыта на десктопе, клавиатурные — на мобиле */
.controls-help .controls-col.mobile { display: none; }

/* Картинки раскладок: общий блок. Вырываем из узкого .content (520px),
   центрируем по экрану и растягиваем на всю ширину */
.controls-help .controls-art {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(1200px, 94vw);
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.controls-help .controls-art a { display: block; }
.controls-help .controls-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #000;
}

/* Цветовые секции клавиш (красим заголовок, клавиши и описание) */
.controls-help .kbd-1,
.controls-help .kbd-1 h4,
.controls-help .kbd-1 td { color: #ff8a8a; }        /* Раскладка 1 — светло-красный */

.controls-help .kbd-2,
.controls-help .kbd-2 h4,
.controls-help .kbd-2 td { color: #8ab6ff; }        /* Раскладка 2 — светло-синий */

.controls-help .kbd-common,
.controls-help .kbd-common h4,
.controls-help .kbd-common td { color: #90ee90; }   /* Общие клавиши — светло-зелёный */

.controls-help .controls-note {
  margin: 10px 0 0;
  text-align: center;
  color: #cfd4e0;
  font-size: 13px;
}

/* Картинки только для десктопа с мышью: на тач-устройствах скрыты */
@media (hover: none) {
  .controls-help .controls-art { display: none; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }

  .content { padding: 6px 10px 24px 10px; }
  .content h1 { font-size: 26px; margin: 10px 0; }

  .menu-box { padding: 12px; }

  /* Справка управления: только сенсорная часть */
  .controls-help { font-size: 15px; padding: 10px 12px; }
  .controls-help .controls-col.keyboard { display: none; }
  .controls-help .controls-col.mobile { display: block; }
  .controls-help .controls-art { display: none; }
  .controls-help .controls-col { min-width: 0; }
  .controls-help td { padding: 4px 8px 4px 0; font-size: 15px; }

  /* Мобилки: без backdrop-blur (производительность), фон панелей плотнее */
  .menu-box, .game-card, .controls-help {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(14, 18, 30, 0.85);
  }

  /* Лобби: крупный текст и кнопки */
  .lobby-title { font-size: 20px; }
  .player-row { font-size: 15px; }
  .content > button,
  .content .primary-btn {
    width: 100%;
    min-height: 52px;
    font-size: 18px;
    margin: 8px 0;
  }
}

/* ===== Фоновые падающие тетромино (меню/лобби) ===== */
:root { --piece: 22px; }

.pieces {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.piece {
  position: absolute;
  top: -25%;
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(4, var(--piece));
  grid-template-rows: repeat(2, var(--piece));
  opacity: .5;
  filter: drop-shadow(0 0 8px var(--c));
  animation: piece-fall linear infinite;
}
.piece b {
  display: block;
  border-radius: 3px;
  background: var(--c);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}
@keyframes piece-fall {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(150vh) rotate(300deg); }
}
@media (max-width: 600px) {
  :root { --piece: 14px; }
  .piece { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
  .piece { animation: none; }
}