/* Стили «Цепной реакции». Подключать после общего app.css Фабрики.
   Используются общие переменные, кнопки и оформление игрового экрана. */

.game-screen[data-game="duel"] .game-eyebrow,
.game-screen[data-game="duel"] .game-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
html.duel-open, html.duel-open body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.duel-open body { position: fixed; inset: 0; width: 100%; }
.game-screen[data-game="duel"] {
  position: fixed; top: var(--duel-top, 0px); left: 0; right: 0;
  height: var(--duel-height, 100dvh); margin: 0 auto;
  overflow: hidden; overflow: clip; overscroll-behavior: none;
  /* First paint only: the living background (factory-backdrop.js) covers it. */
  background: linear-gradient(#eef0ff, #f2f5ff 50%, #e6f1ff);
  transition: height .24s ease-out, top .24s ease-out, padding .24s ease-out;
}
.game-screen[data-game="duel"] .game-header, .duel-task { transition: height .24s ease-out, padding .24s ease-out; }
.game-screen[data-game="duel"] .game-dom { display: flex; flex: 1; min-height: 0; padding-top: 0.5rem; overflow: visible; }
.duel-card { display: flex; flex: 1; flex-direction: column; gap: 0.625rem; min-height: 0; }
.duel-composer { flex: none; display: grid; gap: 0.375rem; }

/* Task card. */
.duel-task { position: relative; flex: none; padding: 1rem; border-radius: 1.375rem; background: var(--accent); color: var(--surface); box-shadow: none; }
.duel-task > span { display: block; font-size: 0.5rem; font-weight: 700; }
.duel-task > strong { display: block; margin: 0.625rem 0; font-size: 2.25rem; overflow-wrap: anywhere; font-weight: 500; line-height: 1.1; text-transform: uppercase; }
.duel-task > .duel-sense { display: block; margin: -0.25rem 0 0.625rem; font-size: max(16px, 1rem); font-style: normal; line-height: 1.35; opacity: 1; }
.duel-task > .duel-sense[hidden] { display: none; }
.duel-task.is-topic > strong { font-size:clamp(1.15rem,4.6vw,1.6rem); line-height:1.2; text-transform:none; }
.duel-task.is-topic > .duel-sense { font-size:.8rem; }
.duel-progress[hidden] {display:none;}
.duel-task-foot { display: flex; align-items: center; gap: 0.75rem; }
.duel-task-foot > small { flex: none; font-size: 0.5rem; font-weight: 700; }
/* One segment per chain: done, current, upcoming. */
.duel-progress { display: flex; flex: 1; gap: 0.1875rem; min-width: 0; }
.duel-progress i { flex: 1; height: 0.25rem; border-radius: 1rem; background: rgba(252, 253, 255, 0.28); transition: background-color .4s ease; }
.duel-progress i.is-current { background: rgba(252, 253, 255, 0.6); }
.duel-progress i.is-done { background: var(--surface); }

/* History. */
.history-label { flex: none; margin: 0.25rem 0 0; color: var(--muted); font-size: 0.5625rem; font-weight: 600; }
.game-screen[data-game="duel"] .duel-chain {
  position: relative; display: block; flex: 1; min-height: 0; margin: 0;
  overflow-x: hidden; overflow-y: auto; contain: paint;
  overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: none;
  mask-image: none;
}
.duel-messages { position: relative; display: flex; min-height: 100%; flex-direction: column; justify-content: flex-end; gap: 0.625rem; padding-top: 22px; }
/* Bubbles: the corner nearest the speaker is tighter, like a chat tail. */
.duel-turn { position: relative; display: grid; flex: none; align-self: flex-start; width: min(80%, 16.25rem); min-height: 3.25rem; overflow-wrap: anywhere; padding: 0.625rem 0.875rem; border: 1px solid var(--line); border-radius: 1.0625rem 1.0625rem 1.0625rem 0.375rem; background: var(--surface); box-shadow: none; }
.duel-turn.player { align-self: flex-end; border-color: transparent; border-radius: 1.0625rem 1.0625rem 0.375rem 1.0625rem; background: var(--accent); color: var(--surface); box-shadow: none; }
.duel-turn small { color: var(--muted); font-size: 0.4375rem; font-weight: 700; }
.duel-turn b { margin-top: 0.25rem; font-size: 0.9375rem; font-weight: 600; }
.duel-turn.player small, .duel-turn.player b { color: var(--surface); }
/* Bot is typing: three dots in the bubble it will answer in. */
.duel-dots { display: flex; align-items: center; gap: 0.25rem; height: 1.1rem; margin-top: 0.25rem; }
.duel-dots i { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: #9d8cff; animation: duel-dot 1s ease-in-out infinite; }
.duel-dots i:nth-child(2) { animation-delay: .15s; }
.duel-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes duel-dot { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.duel-plus { position: absolute; top: -0.25rem; right: 0.75rem; padding: 0.125rem 0.4375rem; border-radius: 1rem; background: var(--surface); color: var(--accent); font-size: 0.5625rem; font-weight: 800; box-shadow: none; pointer-events: none; }
/* End of a chain: a small centred note. */
.duel-notice { align-self: center; margin: 0.25rem 0 0; padding: 0.5rem 0.875rem; border-radius: 1rem; background: rgba(252, 253, 255, 0.85); color: var(--ink); font-size: 0.5625rem; font-weight: 700; box-shadow: 0 0.25rem 0.75rem rgba(16, 20, 28, 0.06); }
.duel-notice.win { background: #27b36a; color: #fff; box-shadow: 0 0.375rem 1rem rgba(39, 179, 106, 0.3); }
.empty-chain { position: absolute; top: 0; left: 0; right: 0; display: grid; justify-items: center; gap: 0.375rem; width: fit-content; margin: 1.75rem auto 0; padding: 0.75rem 1rem; border-radius: 1rem; background: rgba(252, 253, 255, 0.82); box-shadow: 0 0.25rem 0.75rem rgba(16, 20, 28, 0.05); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--muted); font-size: 0.625rem; text-align: center; pointer-events: none; }
.empty-chain[hidden] { display: none; }
.empty-chain svg { width: 2.5rem; height: 1.25rem; color: #9d8cff; opacity: .7; }

/* Composer. */
.duel-composer { position: relative; }
.duel-skip-prompt {
  position: absolute; z-index: 3; bottom: calc(100% + 0.5rem); left: 50%;
  min-height: 2.5rem; padding: 0.625rem 1rem; transform: translateX(-50%);
  border: 0; border-radius: 999px; background: var(--accent); color: #fff;
  box-shadow: 0 0.5rem 1.25rem rgba(16, 20, 28, 0.16);
  font-size: 0.5625rem; font-weight: 700; white-space: nowrap;
  animation: duel-skip-enter 0.28s cubic-bezier(.22,.68,.25,1);
}
@keyframes duel-skip-enter {
  from { opacity: 0; transform: translate(-50%, 0.5rem) scale(.96); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.game-screen[data-game="duel"] .bot-line { height: 1.5rem; display: grid; place-content: center; margin: 0; color: var(--muted); font-size: 0.5rem; font-weight: 600; line-height: 1.3; text-align: center; }
.game-screen[data-game="duel"] .answer-form { position: relative; display: block; margin: 0; border: 2px solid var(--line); border-radius: 1.125rem; background: var(--surface); box-shadow: none; transition: border-color .16s ease, box-shadow .16s ease; }
.game-screen[data-game="duel"] .answer-form:focus-within { border-color: var(--accent); box-shadow: none; }
.game-screen[data-game="duel"] .answer-form input,
.game-screen[data-game="duel"] .answer-form input:focus { height: 3.5rem; padding: 0 3.75rem 0 1rem; border: 0; outline: 0; background: transparent; box-shadow: none; }
.game-screen[data-game="duel"] .answer-form .primary-button { position: absolute; top: 0.375rem; right: 0.375rem; display: grid; place-items: center; width: 2.75rem; min-height: 2.75rem; padding: 0; border-radius: 0.875rem; color: var(--surface); transition: transform .12s ease, opacity .2s ease, background-color .2s ease; }
.game-screen[data-game="duel"] .answer-form .primary-button svg { width: 1.125rem; height: 1.125rem; }
.game-screen[data-game="duel"] .answer-form .primary-button:active:not(:disabled) { transform: scale(.92); }
.game-screen[data-game="duel"] .answer-form .primary-button:disabled { opacity: .45; }
/* Keyboard compaction must preserve the space reserved for Telegram controls. */
.game-screen[data-game="duel"]:is(.is-typing, .is-compact) { padding-top: var(--app-safe-top); padding-bottom: 0.5rem; }
.game-screen[data-game="duel"]:is(.is-typing, .is-compact) .game-header { height: 2.75rem; }
.game-screen[data-game="duel"]:is(.is-typing, .is-compact) .game-dom { padding-top: 0; }
.game-screen[data-game="duel"]:is(.is-typing, .is-compact) .duel-task { padding: 0.625rem 0.875rem; }
.game-screen[data-game="duel"]:is(.is-typing, .is-compact) .duel-task > span { display: none; }
.game-screen[data-game="duel"]:is(.is-typing, .is-compact) .duel-task > strong { margin: 0 0 0.25rem; font-size: 1.25rem; }
.game-screen[data-game="duel"]:is(.is-typing, .is-compact) .duel-task > .duel-sense { margin: 0 0 0.25rem; font-size: max(16px, 0.875rem); }
.game-screen[data-game="duel"]:is(.is-typing, .is-compact) .duel-card { gap: 0.375rem; }
.game-screen[data-game="duel"]:is(.is-typing, .is-compact) .duel-turn { min-height: 2.75rem; padding: 0.5rem 0.75rem; }
.game-screen[data-game="duel"] .answer-form.is-error { animation: duel-answer-error 1.15s ease-out, duel-answer-shake .36s ease-out; }
.game-screen[data-game="duel"] .answer-form.is-error .primary-button { animation: duel-answer-button-error 1.15s ease-out both; }
@keyframes duel-answer-error {
  0%, 68% { border-color: #e24755; background: #fff2f3; box-shadow: none; }
  100% { border-color: var(--accent); background: var(--surface); }
}
@keyframes duel-answer-button-error {
  0%, 68% { background: #e24755; }
  100% { background: var(--ink); }
}
@keyframes duel-answer-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-2px); }
}

/* Living background: constellations light up word by word (factory-backdrop.js). */
.game-screen.has-backdrop { isolation: isolate; }
.factory-backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.factory-backdrop svg { display: block; width: 100%; height: 100%; }
.duel-sky .bond { stroke: #9aa6c8; stroke-opacity: .28; stroke-width: 2.5; stroke-linecap: round; }
.duel-sky .bond-lit { stroke-width: 4; stroke-linecap: round; opacity: 0; transition: stroke-dashoffset .5s cubic-bezier(.22,.68,.25,1), opacity .2s; }
.duel-sky .bond-lit.is-lit { stroke-dashoffset: 0; opacity: .8; }
.duel-sky .star .core { fill: #fcfdff; stroke: #9aa6c8; stroke-opacity: .5; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; transition: fill .3s, stroke .3s, transform .3s; }
.duel-sky .star .ring { fill: none; stroke: transparent; stroke-width: 3; }
.duel-sky .star .halo { fill: var(--star, #6889ff); opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .3s; }
.duel-sky .constellation { opacity: .75; transition: opacity .5s; }
.duel-sky .constellation.is-active, .duel-sky .constellation.is-done { opacity: 1; }
.duel-sky .is-active .star .core { stroke-opacity: .8; }
.duel-sky .star.is-lit .core { fill: var(--star); stroke: var(--star); stroke-opacity: 1; transform: scale(1.35); }
.duel-sky .star.is-lit .halo { opacity: .16; }
.duel-sky .star.is-lit.is-strong .halo { opacity: .26; }
.duel-sky .star.is-next .ring { stroke: #6889ff; stroke-opacity: .6; animation: duel-star-next 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.duel-sky .star.is-win .halo { fill: #27b36a; opacity: .35; }
@keyframes duel-star-next { 0%, 100% { transform: scale(.85); stroke-opacity: .2; } 50% { transform: scale(1.15); stroke-opacity: .7; } }
.duel-sky .sparkles path { stroke: #9d8cff; stroke-width: 3; stroke-linecap: round; opacity: .35; animation: duel-twinkle 4.5s ease-in-out infinite; }
@keyframes duel-twinkle { 0%, 100% { opacity: .12; } 50% { opacity: .5; } }
.duel-sky .late { transition: opacity 1s linear; }
@media (prefers-reduced-motion: reduce) {
  .duel-sky *, .duel-dots i { animation: none !important; transition: none !important; }
}

.game-screen[data-game="duel"] .game-info { background: transparent; color: var(--ink); box-shadow: none; }