/* js/demo_game/demo_game_qa.css */

.qmodal[hidden]{ display:none !important; }

.board-surface { --board-inset: .65rem; } /* как у грида */

/* MOBILE: чтобы модалка почти полностью закрывала доску */
@media (max-width: 900px) {
  .board-surface {
    --board-inset: 0.15rem;   /* или 0, если хочешь вообще без отступа */
  }
}

.qmodal{
  position:absolute;
  inset:0;
  z-index: 20;

  /* анимация/плавность */
  --qmodal-dur: 260ms;
  --qmodal-ease: cubic-bezier(.2,.8,.2,1);

  pointer-events: none;
  opacity: 0;
  transform: scale(.985);
  transition:
    opacity var(--qmodal-dur) ease,
    transform var(--qmodal-dur) var(--qmodal-ease);
}

.qmodal.is-open{
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* затемнение по всей доске */
.qmodal-backdrop{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(7,10,30,.60), rgba(7,10,30,.78));
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--qmodal-dur) ease;
}
.qmodal.is-open .qmodal-backdrop{ opacity: 1; }

/* Контент модалки: занимает ту же «рабочую» область, что и грид */
.qmodal-content{
  position:absolute;
  inset: var(--board-inset);      /* <<< ключ: как у .game-grid */
  width: auto;
  height: auto;

  display:flex;
  flex-direction:column;
  overflow:hidden;

  border-radius: 16px;
  background: linear-gradient(180deg, rgba(10,14,38,.96), rgba(10,14,38,.90));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04);
  color: var(--fg);

  transform: translateY(8px) scale(.985);
  opacity: 0;
  transition:
    opacity var(--qmodal-dur) ease,
    transform var(--qmodal-dur) var(--qmodal-ease);
}
.qmodal.is-open .qmodal-content{
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Header */
.qmodal-header{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  column-gap:12px;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(15,20,48,.26), rgba(15,20,48,0));
  min-height:52px;
}
.qmodal-title{
  grid-column:1 / -1;
  text-align:center;
  margin:0;
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size: clamp(16px, 2.2cqi, 22px);
  background:linear-gradient(90deg,#ffe76a,#ffbb55,#ffe76a);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 12px rgba(255,231,106,.35), 0 4px 18px rgba(255,187,85,.25);
  animation: qmodal-title-sheen 6s linear infinite;
}
@keyframes qmodal-title-sheen{
  0%{ background-position:0% center; }
  100%{ background-position:200% center; }
}
.qmodal-capline{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; overflow:hidden; }
.qbadge{
  display:inline-flex; align-items:center; gap:6px;
  height:26px; padding:0 10px; border-radius:999px;
  font: 800 12px/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  letter-spacing:.04em;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#e9ecff;
}
.qbadge-type,.qbadge-points{
  background: rgba(255,231,106,.16);
  border-color: rgba(255,231,106,.36);
  color:#ffe76a;
}

/* Body: текст слева, медиа справа; тянется на всю высоту между header и footer */
.qmodal-body{
  position:relative;
  flex:1 1 auto;
  min-height:0;                 /* критично: сжиматься между header/footer */
  padding:16px;
  display:grid;
  grid-template-columns:1fr 1fr; /* текст | медиа */
  align-items:stretch;
  gap:16px;
  overflow:auto;
  box-sizing:border-box;
}

.qtext{
  border-radius:12px;
  padding:14px 16px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
  font-weight:800;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  line-height:1.2;
  font-size: clamp(14px, 2.8cqi, 34px);
  overflow:auto;
  max-height:70vh;
}
.qtext.is-anim{ animation: fadeUp .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(12px) scale(.98); }
  to  { opacity:1; transform: translateY(0)   scale(1); }
}

.qmedia{
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  max-height:70vh;
}
.qmedia img, .qmedia video{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}
.qmedia audio{ width:100%; max-width:100%; }

/* когда медиа нет — центрируем текст */
.qmodal-body.no-media{
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.qmodal-body.no-media .qtext{
  max-height:none; font-size: clamp(16px, 6cqi, 40px);
}

/* Footer */
.qmodal-footer{
  display:flex; align-items:center; justify-content:flex-end;
  gap:10px; padding:8px 12px 12px;
  border-top:1px solid rgba(255,255,255,.06);
}

/* уважение reduce-motion */
@media (prefers-reduced-motion: reduce){
  .qmodal, .qmodal *{ animation:none !important; transition:none !important; }
}


/* ===== Эквалайзер аудио ===== */
.audio-visualizer {
  --viz-bars: 28;
  --viz-bar-w: 7px;
  --viz-gap: 6px;
  --viz-h: 72px;
  --viz-glow: 18px;
  --viz-c1: #18ffff;
  --viz-c2: #4fc3f7;
  --viz-c3: #7c4dff;

  display: grid;
  grid-template-columns: repeat(var(--viz-bars), var(--viz-bar-w));
  gap: var(--viz-gap);
  align-items: end;
  width: min(560px, 90%);
  height: var(--viz-h);
  margin: 0 auto;
  position: relative;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .25));
  justify-content: center;
}

.audio-visualizer::before {
  content: "";
  position: absolute;
  inset: 0;
  translate: 0 16px;
  height: 60%;
  background: radial-gradient(60% 120% at 50% 100%, color-mix(in oklab, var(--viz-c3) 35%, transparent) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(10px);
}

.audio-visualizer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .18) 50%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: viz-sheen 3200ms ease-in-out infinite;
  pointer-events: none;
}

@keyframes viz-sheen {
  0%,100% { opacity: 0; transform: translateX(-40%); }
  45% { opacity: .35; }
  90% { opacity: 0; transform: translateX(40%); }
}

.audio-visualizer .bar {
  height: 22%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--viz-c1), var(--viz-c2), var(--viz-c3));
  box-shadow:
    0 0 var(--viz-glow) color-mix(in oklab, var(--viz-c2) 55%, transparent),
    0 0 calc(var(--viz-glow)*.6) color-mix(in oklab, var(--viz-c1) 55%, transparent);
  transform-origin: bottom;
  will-change: transform;
}

.audio-visualizer:not(.active) .bar { animation: viz-bounce 1000ms ease-in-out infinite; }

@keyframes viz-bounce {
  0%,100% { transform: scaleY(.28); }
  50% { transform: scaleY(1); }
}

.audio-visualizer.active .bar { animation: none; transition: transform 60ms linear; }

@media (prefers-reduced-motion: reduce) {
  .audio-visualizer::after { display: none; }
  .audio-visualizer .bar { animation: none !important; transition: none !important; }



/* ==== MOBILE: модалки вопроса/ответа — текст слева, медиа справа ==== */
@media (max-width: 900px) {

  /* МОДАЛКА — почти на весь экран */
  #question-modal .qmodal-content,
  #answer-modal  .qmodal-content {
    inset: 0.15rem !important;          /* минимальный внутренний отступ */
    border-radius: 16px;
    max-height: 100%;
  }

  /* ТЕЛО МОДАЛКИ: TEXT | MEDIA */
  #question-modal .qmodal-body,
  #answer-modal  .qmodal-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) !important;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
    padding: 12px;
    overflow-y: auto;
  }

  /* ТЕКСТ */
  #question-text,
  #answer-text {
    max-height: none;
    font-size: clamp(15px, 4vw, 20px);
    padding: 14px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* МЕДИА */
  #question-media,
  #answer-media {
    max-height: 45vh;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  #question-media img,
  #question-media video,
  #answer-media   img,
  #answer-media   video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
  }

  #question-media audio,
  #answer-media   audio {
    width: 100%;
  }

  /* ЕСЛИ НЕТ МЕДИА → один столбец */
  #question-modal .qmodal-body.no-media,
  #answer-modal  .qmodal-body.no-media {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    padding: 20px 14px;
  }

  #question-modal .qmodal-body.no-media .qtext,
  #answer-modal  .qmodal-body.no-media .qtext {
    font-size: clamp(18px, 5vw, 26px);
  }
}

/* === FORCE: всегда TEXT | MEDIA (desktop + mobile fallback) === */
#question-modal .qmodal-body,
#answer-modal  .qmodal-body {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) !important;
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
  padding: 16px;
  overflow-y: auto;
}

/* ТЕКСТ */
#question-text,
#answer-text {
  max-height: none;
  font-size: clamp(15px, 3vw, 22px);
  padding: 14px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* МЕДИА */
#question-media,
#answer-media {
  max-height: 60vh;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#question-media img,
#question-media video,
#answer-media   img,
#answer-media   video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

#question-media audio,
#answer-media   audio {
  width: 100%;
}

/* ОДНА КОЛОНКА ЕСЛИ НЕТ МЕДИА */
#question-modal .qmodal-body.no-media,
#answer-modal  .qmodal-body.no-media {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto !important;
}