/* Meme Party — гайды «как провести вечер» (src/web/guide.js).
   Логические свойства (inline-start/end) — чтобы иврит переворачивался сам. */

/* ── Блок «Как это работает — 3 шага» на экране создания игры ─────────────── */
.guide-home {
  width: 100%;
  max-width: 460px;
  margin: 14px auto 4px;
  text-align: start;
}
.guide-home.hidden { display: none; }
.guide-home-title {
  font-size: 15px;
  margin: 0 0 10px;
  color: var(--text);
  font-family: var(--font-display, inherit);
}
.guide-home-steps { display: grid; gap: 8px; }
.guide-home-step {
  position: relative;
  background: var(--glass, rgba(255, 255, 255, .04));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, .08));
  border-radius: var(--radius-sm, 12px);
  padding: 10px 12px 10px 46px;
}
[dir="rtl"] .guide-home-step { padding: 10px 46px 10px 12px; }
.guide-home-n {
  position: absolute;
  inset-inline-start: 10px;
  top: 10px;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--neon-pink, #ec4899), var(--neon-purple, #8b5cf6));
}
.guide-home-ico { font-size: 16px; margin-inline-end: 4px; }
.guide-home-step b { font-size: 14px; }
.guide-home-step p { margin: 2px 0 0; font-size: 13px; color: var(--muted, #a29dbd); line-height: 1.45; }
.guide-home-btn { margin-top: 10px; width: 100%; font-size: 14px; }

/* ── Кнопка «❓ Гайд» в шапке лобби ───────────────────────────────────────── */
#btn-guide { padding: 6px 12px; font-size: 13px; white-space: nowrap; }
#btn-guide.hidden { display: none; }

/* ── Модалка гайда ───────────────────────────────────────────────────────── */
.guide-ov {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(6, 5, 14, .82);
  backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
}
.guide-ov.hidden { display: none; }
body.guide-open { overflow: hidden; }
.guide-box {
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  display: flex; flex-direction: column;
  background: var(--bg2, #100e1c);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, .1));
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  box-shadow: var(--shadow-lg, 0 16px 48px rgba(0, 0, 0, .7));
  animation: guideUp .22s ease-out;
}
@keyframes guideUp { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (min-width: 640px) {
  .guide-ov { align-items: center; padding: 20px; }
  .guide-box { border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, .1)); border-radius: 20px; max-height: 86vh; }
}
.guide-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, .08));
}
.guide-title { flex: 1; margin: 0; font-size: 17px; font-family: var(--font-display, inherit); }
.guide-x {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--glass, rgba(255, 255, 255, .05));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, .1));
  color: var(--text, #f4f2fb); font-size: 14px; cursor: pointer;
}
.guide-tabs { display: flex; gap: 6px; padding: 10px 16px; }
.guide-tab {
  flex: 1; padding: 9px 8px; font-size: 14px; font-weight: 700; cursor: pointer;
  border-radius: 999px;
  border: 1px solid var(--glass-border, rgba(255, 255, 255, .1));
  background: var(--glass, rgba(255, 255, 255, .04));
  color: var(--muted, #a29dbd);
}
.guide-tab.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--neon-pink, #ec4899), var(--neon-purple, #8b5cf6));
}
.guide-body { flex: 1; overflow-y: auto; padding: 4px 16px 12px; -webkit-overflow-scrolling: touch; }
.guide-intro { margin: 6px 0 12px; font-size: 14px; color: var(--muted, #a29dbd); line-height: 1.5; }
.guide-loading { padding: 26px 0; text-align: center; color: var(--muted, #a29dbd); }

.guide-step {
  background: var(--glass, rgba(255, 255, 255, .04));
  border: 1px solid var(--glass-border, rgba(255, 255, 255, .08));
  border-radius: var(--radius-sm, 12px);
  margin-bottom: 8px;
  overflow: hidden;
}
.guide-step > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  padding: 11px 12px;
  font-size: 14px; font-weight: 700;
}
.guide-step > summary::-webkit-details-marker { display: none; }
.guide-step[open] > summary { border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, .07)); }
.guide-step-n {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--neon-pink, #ec4899), var(--neon-purple, #8b5cf6));
}
.guide-step-ico { flex: none; font-size: 16px; }
.guide-step-t { flex: 1; min-width: 0; }
.guide-step-body { padding: 10px 12px 12px; font-size: 14px; line-height: 1.55; }
.guide-step-body p { margin: 0; }
.guide-step-body b { color: var(--text, #f4f2fb); }

.guide-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.guide-chips-l { font-size: 12px; color: var(--muted, #a29dbd); }
.guide-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  white-space: nowrap;
  color: #ffd9ec;
  background: rgba(236, 72, 153, .15);
  border: 1px solid rgba(236, 72, 153, .45);
}
.guide-note {
  margin-top: 10px;
  padding: 8px 11px;
  border-radius: 10px;
  font-size: 13px; line-height: 1.5;
  border-inline-start: 3px solid var(--neon-cyan, #22d3ee);
  background: rgba(34, 211, 238, .09);
}
.guide-note-warn { border-inline-start-color: var(--neon-gold, #fbbf24); background: rgba(251, 191, 36, .1); }
.guide-note b { display: block; font-size: 12px; opacity: .85; margin-bottom: 2px; }
.guide-faq-t { margin: 18px 0 8px; font-size: 15px; font-family: var(--font-display, inherit); }

.guide-foot {
  display: flex; flex-direction: column; gap: 8px; align-items: stretch;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--glass-border, rgba(255, 255, 255, .08));
}
.guide-page-link { font-size: 13px; color: var(--neon-cyan, #22d3ee); text-align: center; text-decoration: none; }
.guide-ok { width: 100%; }

/* ── Компактный лист гостю при входе в комнату ───────────────────────────── */
.guide-sheet {
  position: fixed; inset: 0; z-index: 1190;
  background: rgba(6, 5, 14, .72);
  backdrop-filter: blur(4px);
  display: flex; align-items: flex-end; justify-content: center;
}
.guide-sheet-box {
  width: 100%; max-width: 480px;
  background: var(--bg2, #100e1c);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, .1));
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  padding: 16px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--shadow-lg, 0 16px 48px rgba(0, 0, 0, .7));
  animation: guideUp .22s ease-out;
}
@media (min-width: 640px) {
  .guide-sheet { align-items: center; padding: 20px; }
  .guide-sheet-box { border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, .1)); border-radius: 20px; }
}
.guide-sheet-box h3 { margin: 0 0 10px; font-size: 16px; font-family: var(--font-display, inherit); }
.guide-sheet-box ul { margin: 0; padding: 0; list-style: none; }
.guide-sheet-box li {
  font-size: 14px; line-height: 1.5;
  padding: 7px 0;
  border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, .06));
}
.guide-sheet-box li:last-child { border-bottom: 0; }
.guide-sheet-row { display: flex; gap: 8px; margin-top: 12px; }
.guide-sheet-row .btn { flex: 1; font-size: 14px; }