/* ===================== МИНИ-ИГРА «ВНУТРЕННИЙ КРИТИК» — стили =====================
   Вынесено из production-ready/critic-game.js (инжектился через JS в document.head,
   теперь обычная ссылка на CSS-файл — ТЗ-редизайн-главной.md, раздел 5.2).
   Цвета берутся из токенов сайта (var(--c-*, --vf-*)), поэтому переключатель
   темы «яркая/нежная» автоматически красит и игру. */

critic-game {
  display: block;
  --cg-bg: var(--c-paper, #F7F1E6);
  --cg-ink: var(--c-ink, #211C2E);
  --cg-primary: var(--vf-game-primary, var(--c-pink, #FF4FA3));
  --cg-warm: var(--c-tomato, #F2552C);
  --cg-cool: var(--vf-lime, var(--c-lime, #CBE84B));
  --cg-low: var(--c-white, #FFFFFF);
  --cg-line: var(--c-ink-12, rgba(33,28,46,.12));
  font-family: var(--font-body, 'Rubik', system-ui, sans-serif);
  color: var(--cg-ink);
}
critic-game button {
  font-family: inherit; color: inherit;
  background: none; border: none; padding: 0; cursor: pointer;
}
critic-game a { color: inherit; text-decoration: none; }
critic-game [data-display] {
  font-family: var(--font-display, 'Unbounded', sans-serif);
  font-weight: 900; letter-spacing: -0.01em; line-height: 1.08;
  text-transform: uppercase;
}
.critic-section { outline: none; }
.critic-card {
  position: relative;
  background: var(--cg-low);
  border-radius: 38px 30px 40px 32px;
  box-shadow: var(--sh-2, 0 14px 34px -18px rgba(33,28,46,.35));
  padding: 2rem 1.25rem 2.5rem;
  max-width: 48rem; margin: 0 auto;
  overflow: hidden;
}
@media (min-width: 768px) { .critic-card { padding: 2.5rem 3rem 3rem; } }

.critic-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.25rem;
}
.critic-kicker { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3em; opacity: .45; }
.critic-skip {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .15em;
  border-bottom: 2px solid var(--cg-primary);
  padding-bottom: 2px; opacity: .7; transition: opacity .2s;
}
.critic-skip:hover { opacity: 1; }
.critic-share-wrap { position: relative; }
.critic-share-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 5;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 190px; padding: .5rem;
  background: var(--cg-low); border-radius: 18px 14px 20px 16px;
  box-shadow: var(--sh-2, 0 16px 32px -16px rgba(33,28,46,.45));
  opacity: 0; transform: translateY(-6px) rotate(-.5deg);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.critic-share-pop.critic-share-pop--open { opacity: 1; transform: none; pointer-events: auto; }
.critic-share-pop a, .critic-share-pop button {
  font-size: .9rem; font-weight: 600; text-align: left; padding: .45rem .7rem; border-radius: .6rem;
  transition: background .15s;
}
.critic-share-pop a:hover, .critic-share-pop button:hover {
  background: color-mix(in oklab, var(--cg-primary) 20%, transparent);
}

/* Экраны игры: виден только тот, чей ключ стоит в data-critic-state секции */
.critic-screen { display: none; }
.critic-section[data-critic-state="intro"] .critic-screen--intro,
.critic-section[data-critic-state="round"] .critic-screen--round,
.critic-section[data-critic-state="reaction"] .critic-screen--reaction,
.critic-section[data-critic-state="finalA"] .critic-screen--final,
.critic-section[data-critic-state="finalB"] .critic-screen--final,
.critic-section[data-critic-state="finalC"] .critic-screen--final {
  display: block;
  animation: critic-fade .45s ease both;
}
@keyframes critic-fade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.critic-title { font-size: 1.5rem; line-height: 1.15; margin: 0 0 1rem; }
@media (min-width: 768px) { .critic-title { font-size: 1.9rem; } }
.critic-text { font-size: 1.05rem; line-height: 1.6; opacity: .85; max-width: 40rem; margin: 0; }
.critic-text--twist { margin-top: 1rem; padding-top: 1rem; border-top: 1.5px solid var(--cg-line); }
.critic-note--replay { margin-top: .75rem; font-size: .85rem; opacity: .5; }
.critic-note--replay:empty { display: none; }

.critic-primary {
  display: inline-block; margin-top: 1.75rem;
  background: var(--cg-ink); color: var(--cg-bg);
  border-radius: 9999px; padding: 1rem 2.25rem;
  font-size: 1.05rem; font-weight: 700;
  transition: transform .15s var(--ease-bounce, ease), box-shadow .2s;
  box-shadow: var(--sh-1, 0 8px 18px -12px rgba(33,28,46,.4));
}
.critic-primary:hover { transform: translateY(-2px) rotate(-1deg); }
.critic-primary:active { transform: scale(.97); }

/* Сцена: рисунок «неумело, но с душой». Девушка — маркерный контур primary,
   окно и стол — карандашная линия ink. Стадии через data-girl-stage. */
.critic-scene { position: relative; height: 150px; margin-bottom: 1rem; }
.critic-scene svg { display: block; width: 100%; height: 100%; overflow: visible; }
.critic-scene path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cg-ground { stroke: var(--cg-ink); stroke-width: 2; opacity: .3; }
.cg-window { opacity: .45; }
.cg-window path { stroke: var(--cg-ink); stroke-width: 2.2; }
.cg-spark--1 {
  stroke: var(--cg-primary); stroke-width: 2.5;
  animation: critic-twinkle 2.8s ease-in-out infinite;
  transform-origin: center; transform-box: fill-box;
}
.cg-spark--2 {
  stroke: var(--cg-warm); stroke-width: 2; opacity: .8;
  animation: critic-twinkle 3.6s ease-in-out .9s infinite;
  transform-origin: center; transform-box: fill-box;
}
.cg-zzz {
  font-family: var(--font-hand, 'Caveat', cursive); font-size: 22px; letter-spacing: .25em;
  fill: var(--cg-ink); opacity: 0; transition: opacity .6s;
}
.cg-girl {
  transition: transform .8s ease, opacity .6s;
  transform-origin: 50% 100%; transform-box: fill-box;
}
.cg-girl__bob {
  animation: critic-bob 3.4s ease-in-out infinite;
  transform-origin: center; transform-box: fill-box;
}
.cg-girl path { stroke: var(--cg-primary); stroke-width: 3; }
.cg-girl__head { fill: color-mix(in oklab, var(--cg-primary) 12%, transparent); }
.cg-girl__dress { fill: color-mix(in oklab, var(--cg-primary) 8%, transparent); }
.cg-table { stroke: var(--cg-ink); stroke-width: 2.5; opacity: .75; }
.cg-tablet { opacity: .35; transition: opacity .6s, filter .6s; }
.cg-tablet__screen {
  stroke: var(--cg-ink); stroke-width: 2.5;
  fill: color-mix(in oklab, var(--cg-ink) 8%, transparent);
  transition: fill .6s;
}
.cg-art { stroke: var(--cg-warm); stroke-width: 2.5; opacity: .9; transition: opacity .5s; }
@keyframes critic-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(-1.2deg); }
}
@keyframes critic-twinkle {
  0%, 100% { opacity: .9; transform: scale(1); }
  50% { opacity: .35; transform: scale(.8) rotate(10deg); }
}
/* Стадии: 0 у окна, 1 ближе, 2 у планшета, drawing рисует, sleep ушла спать */
#critic-game[data-girl-stage="1"] .cg-girl { transform: translateX(70px); }
#critic-game[data-girl-stage="1"] .cg-tablet { opacity: .65; }
#critic-game[data-girl-stage="2"] .cg-girl { transform: translateX(130px); }
#critic-game[data-girl-stage="2"] .cg-tablet { opacity: 1; }
#critic-game[data-girl-stage="2"] .cg-tablet__screen { fill: color-mix(in oklab, var(--cg-primary) 30%, transparent); }
#critic-game[data-girl-stage="drawing"] .cg-girl { transform: translateX(150px); }
#critic-game[data-girl-stage="drawing"] .cg-tablet {
  opacity: 1;
  filter: drop-shadow(0 0 10px color-mix(in oklab, var(--cg-primary) 60%, transparent));
}
#critic-game[data-girl-stage="drawing"] .cg-tablet__screen { fill: color-mix(in oklab, var(--cg-primary) 40%, transparent); }
#critic-game[data-girl-stage="drawing"] .cg-art { opacity: 1; }
#critic-game[data-girl-stage="sleep"] .cg-girl { transform: rotate(80deg); opacity: .5; }
#critic-game[data-girl-stage="sleep"] .cg-girl__bob { animation: none; }
#critic-game[data-girl-stage="sleep"] .cg-tablet { opacity: .2; }
#critic-game[data-girl-stage="sleep"] .cg-zzz { opacity: .7; }

.critic-narration {
  font-family: var(--font-hand, 'Caveat', cursive); font-weight: 700;
  font-size: 1.8rem; line-height: 1.2;
  margin: 0 0 .35rem; min-height: 1.9em;
}
/* Розовая волна-подчёркивание под репликой раунда (маска, цвет из темы) */
.critic-narration::after {
  content: ''; display: block; width: 170px; height: 9px; margin-top: .2rem;
  background: var(--cg-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 10'%3E%3Cpath d='M3,6 C20,2 35,8 52,5 C70,2 86,8 104,5 C122,2 140,8 158,5 C163,4 166,4 167,5' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 170px 9px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 10'%3E%3Cpath d='M3,6 C20,2 35,8 52,5 C70,2 86,8 104,5 C122,2 140,8 158,5 C163,4 166,4 167,5' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 170px 9px;
}

/* Таймер раунда: ширина полосы приходит из скрипта через --critic-timer */
.critic-timer {
  height: 6px; border-radius: 9999px; overflow: hidden;
  background: color-mix(in oklab, var(--cg-ink) 10%, transparent);
  margin-bottom: 1rem;
}
.critic-timer__bar {
  height: 100%; background: var(--cg-warm);
  transform-origin: left;
  transform: scaleX(var(--critic-timer, 1));
  transition: transform .12s linear;
}

.critic-progress { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.critic-progress__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; opacity: .55; white-space: nowrap; }
.critic-progress__track {
  flex: 1; height: 8px; border-radius: 9999px; overflow: hidden;
  background: color-mix(in oklab, var(--cg-ink) 10%, transparent);
}
.critic-progress__bar {
  height: 100%; background: var(--cg-cool);
  transform-origin: left;
  transform: scaleX(var(--critic-progress, 0));
  transition: transform .5s ease;
}

.critic-choices { display: grid; gap: .75rem; }
.critic-choice {
  width: 100%; min-height: 60px;
  border-radius: 22px 16px 24px 18px;
  background: var(--cg-bg);
  box-shadow: var(--sh-1, 0 10px 22px -14px rgba(33,28,46,.45));
  padding: .9rem 1.25rem;
  font-size: 1rem; font-weight: 500; line-height: 1.35; text-align: left;
  transform: rotate(-.5deg);
  transition: background .15s, transform .15s var(--ease-bounce, ease);
}
.critic-choice:nth-child(2) { border-radius: 16px 24px 18px 22px; transform: rotate(.45deg); }
.critic-choice:nth-child(3) { border-radius: 20px 18px 22px 16px; transform: rotate(-.35deg); }
.critic-choice:hover { background: color-mix(in oklab, var(--cg-primary) 25%, var(--cg-bg)); transform: rotate(-.5deg) translateY(-2px); }
.critic-choice:nth-child(2):hover { transform: rotate(.45deg) translateY(-2px); }
.critic-choice:nth-child(3):hover { transform: rotate(-.35deg) translateY(-2px); }
.critic-choice:active { transform: scale(.98); }

.critic-reaction { font-size: 1.3rem; line-height: 1.5; min-height: 6em; padding: 2rem 0; margin: 0; }

.critic-final-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; }
.critic-final-actions .critic-primary { margin-top: 0; }
.critic-cta { border-bottom: 2px solid var(--cg-primary); padding-bottom: 2px; font-size: 1.05rem; font-weight: 700; }
.critic-replay { font-size: .9rem; font-weight: 600; opacity: .55; transition: opacity .2s; }
.critic-replay:hover { opacity: 1; }

/* Красная плашка паники «системы»: выскакивает при поддерживающей реплике */
.critic-alert {
  position: absolute; top: .75rem; left: .75rem; right: .75rem;
  z-index: 5;
  background: var(--c-red, #EB4213); color: #FFF6EF;
  border-radius: 18px 14px 20px 16px;
  padding: .9rem 1.25rem;
  font-size: .95rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  transform: translateY(-140%); opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
  pointer-events: none;
}
.critic-alert--show {
  transform: translateY(0); opacity: 1;
  animation: critic-shake .5s ease .35s;
}
@keyframes critic-shake {
  0%, 100% { transform: translateY(0) translateX(0); }
  20% { transform: translateY(0) translateX(-5px); }
  40% { transform: translateY(0) translateX(5px); }
  60% { transform: translateY(0) translateX(-3px); }
  80% { transform: translateY(0) translateX(3px); }
}

/* Плашка-ачивка */
.critic-toast {
  position: fixed; right: 1.25rem; top: 5.25rem;
  z-index: 90;
  background: var(--cg-ink); color: var(--cg-bg);
  border-radius: 20px 16px 22px 18px; padding: .9rem 1.4rem 1rem;
  font-size: .95rem; max-width: 320px;
  box-shadow: var(--sh-3, 0 20px 44px -18px rgba(33,28,46,.55));
  transform: translateX(130%); opacity: 0;
  transition: transform .45s cubic-bezier(.2,.9,.2,1.2), opacity .35s ease;
  pointer-events: none;
}
.critic-toast::before {
  content: '✳ Достижение получено';
  display: block;
  font-size: 10px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--cg-cool);
  margin-bottom: .35rem;
}
.critic-toast--show { transform: translateX(0); opacity: 1; }

/* Без анимаций для prefers-reduced-motion: игра остается полностью проходимой */
@media (prefers-reduced-motion: reduce) {
  .critic-screen, .critic-alert, .critic-toast,
  .cg-girl, .cg-girl__bob, .cg-tablet, .cg-art, .cg-zzz, .cg-spark--1, .cg-spark--2,
  .critic-timer__bar, .critic-progress__bar {
    transition: none !important;
    animation: none !important;
  }
}