/* ══════════════════════════════════════════════════════════════
   Общий каркас игровых страниц Тулкита.
   Эталон — /filword-game: модалка выбора режима, верхняя панель со счётом,
   поле в карточке и боковая панель с подсказками. Чтобы кроссворд и лабиринт
   выглядели так же, стили вынесены сюда — правятся в одном месте.
   ══════════════════════════════════════════════════════════════ */

.game-wrap {
  max-width: 1200px; width: 100%; box-sizing: border-box;
  margin: 0 auto; padding: 16px 20px 48px;
  display: flex; flex-direction: column; gap: 14px;
}

/* ── верхняя панель ── */
.game-topbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0);
  border-radius: 16px; padding: 10px 16px;
}
.gtb-back {
  padding: 7px 14px; border-radius: 10px; font-size: 13px; font-weight: 600;
  background: var(--surface2, #f1f5f9); border: 1px solid var(--border2, #e2e8f0);
  color: var(--text2, #64748b); cursor: pointer; text-decoration: none;
  font-family: inherit; transition: background .18s, color .18s;
}
.gtb-back:hover { background: var(--surface3, #e2e8f0); color: var(--text, #1a202c); }
.gtb-item {
  display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700;
  padding: 5px 12px; border-radius: 10px; background: var(--surface2, #f1f5f9); white-space: nowrap;
}
.gtb-item .lbl { font-size: 11px; font-weight: 500; color: var(--text3, #94a3b8); }
.gtb-item .val { font-size: 16px; font-weight: 900; line-height: 1; }
.gtb-timer { font-variant-numeric: tabular-nums; }
.gtb-timer.urgent { color: #ef4444; }
.gtb-spacer { flex: 1; }

/* ── полоса выполнения ── */
.progress-bar {
  height: 6px; border-radius: 99px; background: var(--surface2, #f1f5f9); overflow: hidden;
}
.progress-fill {
  height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6); transition: width .35s ease;
}

/* ── раскладка: поле + панель ── */
.game-main { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
.grid-section {
  background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 20px;
  padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.grid-meta { font-size: 12.5px; color: var(--text3, #94a3b8); text-align: center; }

/* ── боковая панель ── */
.game-panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gp-box {
  background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0);
  border-radius: 16px; padding: 14px 16px; box-sizing: border-box; min-width: 0;
}
.gp-title {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text3, #94a3b8); margin-bottom: 10px;
}
.hint-btn {
  width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--border2, #e2e8f0);
  border-radius: 11px; background: var(--surface, #fff); color: var(--text, #1a202c);
  font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.hint-btn:last-child { margin-bottom: 0; }
.hint-btn:hover:not(:disabled) { border-color: var(--tk-c1, #6366f1); color: var(--tk-c1, #6366f1); }
.hint-btn:disabled { opacity: .45; cursor: not-allowed; }
.hint-btn > span { display: inline-flex; align-items: center; gap: 8px; }
.hint-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.hint-left {
  font-size: 12px; font-weight: 800; color: var(--text3, #94a3b8);
  background: var(--surface2, #f1f5f9); border-radius: 20px; padding: 3px 9px;
}
.gp-note { font-size: 12.5px; line-height: 1.55; color: var(--text2, #64748b); }
.streak {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
  color: #b45309; background: #fef3c7; border-radius: 12px; padding: 10px 14px;
}

/* ── модальные окна ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px);
}
.modal-overlay.hidden { display: none; }
.modal {
  position: relative; width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto;
  background: var(--surface, #fff); border-radius: 22px; padding: 26px 24px 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
.modal-close {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: none;
  border-radius: 9px; background: transparent; color: var(--text3, #94a3b8);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.modal-close:hover { background: var(--surface2, #f1f5f9); color: var(--text, #1a202c); }
.modal-title {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 22px; font-weight: 900; margin-bottom: 4px;
}
.modal-title svg { width: 24px; height: 24px; color: var(--tk-c1, #6366f1); }
.modal-sub { font-size: 13.5px; color: var(--text2, #64748b); text-align: center; margin-bottom: 18px; }
.modal-lbl {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text3, #94a3b8); text-align: center; margin: 16px 0 10px;
}

/* Выбор режима и сложности — карточки как в филворде (.sel-item):
   рамка 2px, серая подложка, иконка слева, подпись под названием. */
.opt-row, .diff-opt {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 12px 20px; border-radius: 12px; cursor: pointer; text-align: center;
  border: 2px solid var(--border2, #e2e8f0); background: var(--surface2, #f1f5f9);
  font: inherit; color: var(--text, #1a202c); transition: border-color .18s, background .18s;
}
.opt-row { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
/* иконка и текст едут вместе по центру кнопки, а подписи внутри выровнены по левому краю
   относительно названия — иначе строка выглядела сдвинутой влево */
.opt-row > span { align-items: flex-start; text-align: left; }
.opt-row b, .opt-row > span > span { text-align: left; }
.opt-row:hover, .diff-opt:hover { border-color: var(--tk-c1, #6366f1); background: rgba(99,102,241,.08); }
.opt-row.on, .diff-opt.on { border-color: var(--tk-c1, #6366f1); background: rgba(99,102,241,.15); color: var(--tk-c1, #6366f1); }
.opt-row svg, .diff-opt svg { width: 22px; height: 22px; flex-shrink: 0; }
.opt-row.on svg { color: var(--tk-c1, #6366f1); }
.opt-row > span { display: flex; flex-direction: column; gap: 1px; }
.opt-row b, .diff-opt b { font-size: 14px; font-weight: 700; text-align: center; }
.opt-row span span, .opt-row > span > span, .diff-opt span {
  font-size: 11px; color: var(--text3, #94a3b8); text-align: center; font-weight: 500;
}
.opt-row.on b { color: var(--tk-c1, #6366f1); }

/* сложность — три карточки в ряд, иконка над подписью */
.diff-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.diff-opt { flex-direction: column; gap: 4px; padding: 12px 8px; }

.modal-btn {
  width: 100%; min-height: 54px; margin-top: 20px; border: none; border-radius: 14px;
  background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff;
  font: inherit; font-size: 16px; font-weight: 800; cursor: pointer;
}
.modal-btn:hover { filter: brightness(1.05); }
.modal-btn.secondary {
  margin-top: 10px; min-height: 48px; font-size: 14.5px;
  background: transparent; color: var(--text2, #64748b); border: 1.5px solid var(--border2, #e2e8f0);
}


/* ── подсказки: как в филворде — иконка и название слева, цена с монетой справа ── */
.hint-btn { text-align: left; }
.hint-cost {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; color: var(--text3, #94a3b8);
  background: var(--surface3, #e2e8f0); border-radius: 6px; padding: 3px 8px;
}
.hint-cost.free { color: #b45309; background: #fef3c7; }
.hint-cost svg { width: 13px; height: 13px; flex-shrink: 0; }
.hint-btn svg.hi { width: 16px; height: 16px; flex-shrink: 0; }

/* ── визуальные клавиши управления ── */
.keys-hint { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.keys-row { display: flex; gap: 6px; }
.kbd {
  min-width: 34px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 8px; border-radius: 8px; font-size: 12.5px; font-weight: 700;
  background: var(--surface2, #f1f5f9); border: 1.5px solid var(--border2, #e2e8f0);
  box-shadow: 0 2px 0 var(--border2, #cbd5e1); color: var(--text2, #64748b);
}
.kbd svg { width: 15px; height: 15px; }
.keys-or { font-size: 12px; color: var(--text3, #94a3b8); }
[data-theme="dark"] .kbd { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); box-shadow: none; color: #cbd5e1; }

/* ── экран победы: как в филворде ── */
.win-icon-wrap {
  width: 84px; height: 84px; margin: 0 auto 12px; position: relative;
  display: flex; align-items: center; justify-content: center;
  animation: winIn .7s cubic-bezier(.34, 1.8, .64, 1) both;
}
.win-icon-wrap::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,158,11,.35), transparent 65%);
  animation: winPulse 2.2s ease-in-out infinite;
}
.win-icon-wrap svg { position: relative; width: 66px; height: 66px; color: #f59e0b;
  filter: drop-shadow(0 4px 14px rgba(245,158,11,.45)); }
.win-icon-wrap .ring { position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(245,158,11,.35); animation: winRing 2.5s ease-out infinite; }
@keyframes winIn { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes winPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes winRing { 0% { transform: scale(.9); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }

.win-score {
  text-align: center; padding: 18px; border-radius: 18px; margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(99,102,241,.14), rgba(16,185,129,.12));
  border: 1px solid rgba(99,102,241,.16);
}
.win-score-lbl { font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  font-weight: 700; color: var(--text2, #64748b); margin-bottom: 2px; }
.win-score-num { font-size: 46px; font-weight: 900; line-height: 1.1;
  background: linear-gradient(135deg, #4f46e5, #10b981);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.win-rewards { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.win-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 20px;
  font-size: 13px; font-weight: 700; background: #fef3c7; color: #b45309;
}
.win-chip svg { width: 14px; height: 14px; }
.win-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-game {
  flex: 1 1 130px; min-height: 48px; padding: 12px 16px; border-radius: 12px;
  font: inherit; font-size: 14px; font-weight: 700; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: transform .18s;
}
.btn-game svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-game.primary { background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff;
  box-shadow: 0 4px 16px rgba(99,102,241,.3); }
.btn-game.primary:hover { transform: translateY(-2px); }
.btn-game.secondary { background: var(--surface2, #f1f5f9); color: var(--text, #1a202c);
  border: 1.5px solid var(--border2, #e2e8f0); }
[data-theme="dark"] .btn-game.secondary { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #e2e8f0; }

/* ── кнопки в боковой панели (вместо ссылок в тексте) ── */
.gp-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; box-sizing: border-box; max-width: 100%;
  min-height: 42px; margin-top: 8px; padding: 9px 12px; border-radius: 10px;
  font: inherit; font-size: 13.5px; font-weight: 700; text-decoration: none; cursor: pointer;
  border: 1.5px solid var(--border2, #e2e8f0); background: var(--surface, #fff);
  color: var(--text, #1a202c); transition: border-color .15s, color .15s, transform .15s;
}
.gp-btn:first-of-type { margin-top: 0; }
.gp-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.gp-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-btn:hover { border-color: var(--tk-c1, #6366f1); color: var(--tk-c1, #6366f1); transform: translateY(-1px); }
.gp-btn.accent { background: linear-gradient(135deg, #7c3aed, #6366f1); border: none; color: #fff; }
.gp-btn.accent:hover { color: #fff; filter: brightness(1.06); }
[data-theme="dark"] .gp-btn { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: #e2e8f0; }

/* ── тёмная тема ── */
[data-theme="dark"] .game-topbar,
[data-theme="dark"] .grid-section,
[data-theme="dark"] .gp-box,
[data-theme="dark"] .modal { background: var(--surface, #1e293b); border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .hint-btn { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: #e2e8f0; }

/* ── телефон ── */
@media (max-width: 900px) {
  .game-main { grid-template-columns: 1fr; }
  .game-panel { order: 2; }
}
@media (max-width: 560px) {
  .game-wrap { padding: 12px 12px 40px; gap: 12px; }
  .game-topbar { padding: 9px 12px; gap: 8px; }
  .gtb-item { padding: 4px 9px; font-size: 13px; }
  .gtb-item .val { font-size: 15px; }
  .grid-section { padding: 14px; border-radius: 16px; }
  .modal { padding: 22px 18px 20px; }
  .modal-title { font-size: 20px; }
  .diff-row { grid-template-columns: 1fr; }
  .diff-opt { flex-direction: row; justify-content: center; gap: 8px; padding: 12px; }
}