/* ==== Общие карточки новых механик — та же палитра, что у КАРТИНОК ==== */
:root{
  --gm-ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --gm-ease-move:cubic-bezier(0.77, 0, 0.175, 1);
  --gm-purple:rgba(45,27,94,.96);
  --gm-orange:#F39C12;
  --gm-yellow:#F2D811;
  --gm-green:#7ED957;
  --gm-red:#E24B4A;
}
.gm-card{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3em;
  background:rgba(255,255,255,.08);
  border:2px solid rgba(255,255,255,.28);
  border-radius:calc(var(--stage-w, 100vw) * .008);
  padding:.5em;
  color:#fff;
  cursor:pointer;
  min-width:44px;min-height:44px;
  transition:transform .1s var(--gm-ease-out), border-color .2s ease, filter .2s ease, opacity .3s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.gm-card:active{transform:scale(.96)}
.gm-card:focus-visible{outline:3px solid var(--gm-yellow);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .gm-card:hover{filter:brightness(1.1);border-color:rgba(255,255,255,.6)}
}
.gm-card-img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:.4em;background:#fff;pointer-events:none;display:block}
.gm-card-char{font-size:calc(var(--stage-w, 100vw) * .016);font-weight:800;letter-spacing:.02em;pointer-events:none;line-height:1.1}
.gm-card.is-wrong{animation:gm-shake .45s var(--gm-ease-out);border-color:var(--gm-red)}
.gm-card.is-hit,.gm-card.is-right{border-color:var(--gm-green);animation:gm-pulse .5s var(--gm-ease-out)}
.gm-card.is-right .gm-card-img{box-shadow:0 0 22px rgba(126,217,87,.7)}
@keyframes gm-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
@keyframes gm-pulse{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
/* иероглиф-вспышка после верного ответа */
.gm-flash{
  position:absolute;left:50%;top:45%;
  transform:translate(-50%,-50%) scale(.9);
  font-size:calc(var(--stage-w, 100vw) * .09);
  font-weight:900;color:var(--gm-yellow);
  text-shadow:0 0 30px rgba(242,216,17,.7), 3px 3px 0 #2A1145;
  pointer-events:none;z-index:20;
  animation:gm-flash .9s var(--gm-ease-out) both;
}
@keyframes gm-flash{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}100%{opacity:0;transform:translate(-50%,-60%) scale(1)}}

/* ==== ЛОВИ СЛОВО ==== */
.cw-arena{position:absolute;left:0;right:0;top:15%;bottom:0;overflow:hidden}
.cw-card{
  position:absolute;top:0;
  width:calc(var(--stage-w, 100vw) * .1);
  background:var(--gm-purple);
  border-color:var(--gm-orange);
  transform:translateY(-120%);
  animation:cw-fall linear both;
  will-change:transform;
}
@keyframes cw-fall{from{transform:translateY(-120%)}to{transform:translateY(calc(var(--stage-h, 100vh) * .95))}}
.cw-card.is-burst{animation-play-state:paused;border-color:var(--gm-green);opacity:0;transform:none;transition:opacity .4s ease, transform .4s var(--gm-ease-out)}
.cw-card.is-burst{animation:cw-burst .45s var(--gm-ease-out) forwards}
@keyframes cw-burst{0%{opacity:1}100%{opacity:0}}
.cw-card.is-gone{opacity:0;transition:opacity .4s ease}
.cw-card.is-wrong{border-color:var(--gm-red)}
.cw-card.is-wrong .gm-card-img{animation:gm-shake .45s var(--gm-ease-out)}

/* ==== ШАРИКИ ==== */
.bp-arena{position:absolute;left:0;right:0;top:15%;bottom:0;overflow:hidden}
.bp-bubble{
  position:absolute;left:0;top:0;
  border-radius:50%;padding:0;border:3px solid rgba(255,255,255,.55);
  background:radial-gradient(circle at 30% 28%, rgba(255,255,255,.95), rgba(180,220,255,.85) 45%, rgba(120,170,255,.75));
  box-shadow:0 8px 24px rgba(0,0,0,.35), inset 0 0 18px rgba(255,255,255,.5);
  cursor:pointer;overflow:hidden;
  min-width:44px;min-height:44px;
  will-change:transform;
  -webkit-tap-highlight-color:transparent;
  transition:opacity .3s ease;
}
.bp-bubble:focus-visible{outline:3px solid var(--gm-yellow)}
.bp-img{width:74%;height:74%;object-fit:cover;border-radius:50%;margin:13%;display:block;pointer-events:none;background:#fff}
.bp-bubble.is-pop{opacity:0}
.bp-bubble.is-pop .bp-img{animation:bp-pop .35s var(--gm-ease-out) forwards}
@keyframes bp-pop{to{transform:scale(1.4);opacity:0}}
.bp-bubble.is-wobble .bp-img{animation:bp-wobble .5s var(--gm-ease-out)}
@keyframes bp-wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg) scale(1.05)}50%{transform:rotate(9deg)}75%{transform:rotate(-6deg)}}
.bp-particle{
  position:absolute;width:10px;height:10px;border-radius:50%;background:#fff;
  box-shadow:0 0 8px rgba(255,255,255,.8);pointer-events:none;
  animation:bp-particle .65s var(--gm-ease-out) forwards;
}
@keyframes bp-particle{from{opacity:1;transform:translate(-50%,-50%)}to{opacity:0;transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.3)}}

/* ==== ЦЕПОЧКА ==== */
.ch-board{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:70%;display:grid;gap:calc(var(--stage-w, 100vw) * .008);
  background:var(--gm-purple);border:3px solid var(--gm-orange);
  border-radius:calc(var(--stage-w, 100vw) * .0125);padding:1.2% 1.4%;
  box-shadow:0 0 80px rgba(243,156,18,.35);
}
.ch-cols-3{grid-template-columns:repeat(3, 1fr);width:44%}
.ch-cols-4{grid-template-columns:repeat(4, 1fr)}
.ch-board .gm-card{padding:.35em}
.ch-board .gm-card-char{font-size:calc(var(--stage-w, 100vw) * .013)}
.ch-cols-4 .gm-card-img{max-height:calc(var(--stage-h, 100vh) * .16)}
.ch-cols-3 .gm-card-img{max-height:calc(var(--stage-h, 100vh) * .17)}
.ch-board.is-listening .gm-card{pointer-events:none;filter:saturate(.7) brightness(.85)}
.ch-status{
  position:absolute;left:50%;bottom:3%;transform:translateX(-50%);
  font-size:calc(var(--stage-w, 100vw) * .016);font-weight:800;color:var(--gm-yellow);
  text-shadow:2px 2px 0 #2A1145;letter-spacing:.04em;white-space:nowrap;
}

/* ==== ПОТЯНИКА ==== */
.dw-wrap{position:absolute;left:4%;right:4%;top:12%;bottom:4%;display:flex;gap:3%;align-items:stretch}
.dw-pics{flex:1 1 62%;display:grid;grid-template-columns:repeat(4, 1fr);grid-auto-rows:1fr;gap:calc(var(--stage-w, 100vw) * .008);
  background:var(--gm-purple);border:3px solid var(--gm-orange);border-radius:calc(var(--stage-w, 100vw) * .0125);padding:1.2%}
.dw-pic{padding:.3em;cursor:pointer}
.dw-pic .gm-card-img{max-height:calc(var(--stage-h, 100vh) * .28)}
.dw-pic.is-matched{border-color:var(--gm-green);box-shadow:0 0 22px rgba(126,217,87,.5);animation:gm-pulse .5s var(--gm-ease-out)}
.dw-locked{position:absolute;right:6%;bottom:6%;background:rgba(45,27,94,.95);border:2px solid var(--gm-green);border-radius:.4em;
  padding:.1em .4em;font-size:calc(var(--stage-w, 100vw) * .018);font-weight:900;color:#fff}
.dw-words{flex:0 0 26%;display:flex;flex-direction:column;justify-content:center;gap:calc(var(--stage-h, 100vh) * .03)}
.dw-chip{
  position:relative;z-index:5;
  min-height:44px;height:calc(var(--stage-h, 100vh) * .13);
  border-radius:calc(var(--stage-w, 100vw) * .01);
  background:linear-gradient(135deg,#5D2E8F,#2A1145);
  border:3px solid var(--gm-orange);color:#fff;
  font-size:calc(var(--stage-w, 100vw) * .03);font-weight:900;letter-spacing:.02em;
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
  transition:box-shadow .2s ease, border-color .2s ease;
  will-change:transform;
}
.dw-chip.is-pressed{box-shadow:0 10px 26px rgba(0,0,0,.5)}
.dw-chip.is-dragging{cursor:grabbing;z-index:50;transition:none;border-color:var(--gm-yellow)}
.dw-chip.is-returning{transition:transform .3s var(--gm-ease-out)}
.dw-chip.is-selected{border-color:var(--gm-yellow);box-shadow:0 0 0 4px rgba(242,216,17,.35), 0 6px 18px rgba(0,0,0,.4)}
.dw-chip.is-wrong{animation:gm-shake .45s var(--gm-ease-out)}
.dw-chip.is-locked{opacity:.35;pointer-events:none;border-color:var(--gm-green);cursor:default}
.dw-chip:focus-visible{outline:3px solid var(--gm-yellow);outline-offset:3px}

/* ==== ВОПРОСЫ ПО ФРАЗАМ ==== */
.pq-card{
  position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);
  width:72%;background:var(--gm-purple);border:3px solid var(--gm-orange);
  border-radius:calc(var(--stage-w, 100vw) * .0125);padding:1.4% 2.5%;
  box-shadow:0 0 80px rgba(243,156,18,.4);
}
.pq-question{display:flex;align-items:center;gap:1.2%;margin-bottom:1.4%}
.pq-replay{
  flex:0 0 auto;width:calc(var(--stage-w, 100vw) * .034);height:calc(var(--stage-w, 100vw) * .034);
  min-width:44px;min-height:44px;border-radius:50%;
  background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.4);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .1s var(--gm-ease-out), background .2s ease;
}
.pq-replay svg{width:55%;height:55%;fill:#fff}
.pq-replay:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){.pq-replay:hover{background:rgba(255,255,255,.22)}}
.pq-text{display:flex;flex-wrap:wrap;gap:.35em;font-size:calc(var(--stage-w, 100vw) * .034);font-weight:900;color:#fff;line-height:1.2}
.pq-w{padding:0 .12em;border-radius:.2em;transition:color .15s ease, background .15s ease}
.pq-w.is-on{color:#2A1145;background:var(--gm-yellow)}
.pq-options{display:grid;grid-template-columns:repeat(4, 1fr);gap:1.2vw}
.pq-options .gm-card{background:rgba(255,255,255,.06)}
.pq-options .gm-card-img{max-height:calc(var(--stage-h, 100vh) * .3)}

/* ==== ФРАЗОВЫЕ СЛАЙДЫ (сцена 5) ==== */
#scene5 .bg-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.65)}
.ps-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:78%;max-height:84%;
  background:var(--gm-purple);border:3px solid var(--gm-orange);
  border-radius:calc(var(--stage-w, 100vw) * .0125);padding:1.2% 2%;
  box-shadow:0 0 80px rgba(243,156,18,.4);z-index:5;
  display:flex;flex-direction:column;gap:1%;
}
.ps-header{display:flex;align-items:center;justify-content:space-between;gap:1em;margin-bottom:.6%}
.ps-rows{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--stage-h, 100vh) * .012) calc(var(--stage-w, 100vw) * .014)}
.ps-row{
  display:flex;align-items:center;justify-content:flex-start;gap:calc(var(--stage-w, 100vw) * .006);
  background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.22);
  border-radius:calc(var(--stage-w, 100vw) * .008);padding:.5% .8%;
  min-height:44px;cursor:pointer;color:#fff;
  transition:transform .1s var(--gm-ease-out), border-color .2s ease, background .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.ps-row:active{transform:scale(.985)}
.ps-row:focus-visible{outline:3px solid var(--gm-yellow);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.ps-row:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}}
.ps-row.is-playing{border-color:var(--gm-orange)}
.ps-word{
  display:flex;align-items:center;justify-content:center;
  width:calc(var(--stage-h, 100vh) * .11);height:calc(var(--stage-h, 100vh) * .11);
  border-radius:.5em;background:#fff;overflow:hidden;flex:0 0 auto;
  transition:transform .15s var(--gm-ease-out), box-shadow .15s ease;
}
.ps-word.ps-char{
  width:auto;min-width:calc(var(--stage-h, 100vh) * .11);padding:0 .35em;
  background:rgba(255,255,255,.1);color:#fff;
  font-size:calc(var(--stage-w, 100vw) * .03);font-weight:900;letter-spacing:.02em;
}
.ps-img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ps-word.is-on{transform:scale(1.08);box-shadow:0 0 0 4px var(--gm-yellow), 0 0 22px rgba(242,216,17,.6)}
.ps-word.ps-char.is-on{background:var(--gm-yellow);color:#2A1145}


/* ==== Кнопка «?» — объяснение игры голосом Наташи (слева внизу) ==== */
.help-btn{
  position:absolute;left:1.6%;bottom:3%;z-index:60;
  width:calc(var(--stage-w, 100vw) * .031);height:calc(var(--stage-w, 100vw) * .031);
  min-width:44px;min-height:44px;
  border-radius:50%;padding:0;cursor:pointer;
  background:linear-gradient(135deg,#F39C12,#F2D811);
  border:3px solid #fff;color:#2A1145;
  box-shadow:0 6px 18px rgba(0,0,0,.45), 0 0 0 0 rgba(242,216,17,.5);
  display:flex;align-items:center;justify-content:center;
  transition:transform .1s var(--gm-ease-out), box-shadow .2s ease, filter .2s ease;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.help-btn svg{width:70%;height:70%;fill:#2A1145;pointer-events:none}
.help-btn:active{transform:scale(.92)}
.help-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (hover:hover) and (pointer:fine){.help-btn:hover{filter:brightness(1.08)}}
/* первые секунды новой игры кнопка мягко пульсирует, чтобы её заметили */
.help-btn.is-nudge{animation:help-nudge 1.4s var(--gm-ease-out) 3}
@keyframes help-nudge{0%,100%{transform:scale(1);box-shadow:0 6px 18px rgba(0,0,0,.45), 0 0 0 0 rgba(242,216,17,.5)}50%{transform:scale(1.08);box-shadow:0 6px 18px rgba(0,0,0,.45), 0 0 0 14px rgba(242,216,17,0)}}
/* пока звучит объяснение */
.help-btn.is-talking{background:linear-gradient(135deg,#7ED957,#5BAFE8);animation:help-talk 1s ease-in-out infinite}
@keyframes help-talk{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){
  .help-btn.is-nudge,.help-btn.is-talking{animation:none}
  .help-btn.is-talking{filter:brightness(1.15)}
  .help-btn:active{transform:none}
}

/* ==== Бережная анимация ==== */
@media (prefers-reduced-motion:reduce){
  .gm-card,.ps-row,.pq-replay,.dw-chip,.bp-bubble{transition:border-color .2s ease, background .2s ease, opacity .3s ease}
  .gm-card:active,.ps-row:active,.pq-replay:active{transform:none}
  .gm-card.is-wrong,.dw-chip.is-wrong,.cw-card.is-wrong .gm-card-img{animation:none;border-color:var(--gm-red)}
  .gm-card.is-hit,.gm-card.is-right,.dw-pic.is-matched{animation:none}
  .gm-flash{animation:gm-flash-soft .9s ease both}
  @keyframes gm-flash-soft{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
  .bp-bubble.is-wobble .bp-img,.bp-bubble.is-pop .bp-img,.bp-particle{animation:none}
  .bp-bubble.is-pop{opacity:0}
  .ps-word.is-on{transform:none}
  .cw-card{animation-duration:12s !important}  /* падение вдвое медленнее, но игра остаётся */
}