/* Shared progressive artwork for the feed and standalone comic viewer. */
.comic-redraw-placeholder[data-loading-image="true"] .redraw-visual { animation: comic-image-loading-float 3s ease-in-out infinite; animation-play-state: paused; }
.comic-redraw-placeholder[data-loading-image="true"].is-visible .redraw-visual { animation-play-state: running; }
@keyframes comic-image-loading-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (prefers-reduced-motion: reduce) { .comic-redraw-placeholder[data-loading-image="true"] .redraw-visual { animation: none; } }
.comic-redraw-placeholder.is-illustrated { position: relative; isolation: isolate; padding: 0; min-height: 430px; overflow: hidden; line-height: normal; font-family: Arial, Helvetica, sans-serif; }
.comic-redraw-placeholder.is-illustrated [hidden] { display: none; }
/* Точки фона ровными горизонтальными рядами */
.comic-redraw-placeholder.is-illustrated::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .4; background-image: radial-gradient(#b7d5e8 .55px, transparent .7px); background-size: 37px 41px; mask-image: linear-gradient(transparent, #0006 20%, #000 60%, transparent); }
/* Анимация ожидания: сверху вниз по точкам проходит мягкая световая полоса — те же точки ярче и белее */
.comic-redraw-placeholder .redraw-shimmer { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(#f2f9fd .9px, transparent 1.1px); background-size: 37px 41px; -webkit-mask-image: linear-gradient(180deg, transparent 28%, #0000001a 38%, #0000004d 50%, #0000001a 62%, transparent 72%); mask-image: linear-gradient(180deg, transparent 28%, #0000001a 38%, #0000004d 50%, #0000001a 62%, transparent 72%); -webkit-mask-size: 100% 300%; mask-size: 100% 300%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; animation: redraw-shimmer 10.8s ease-in-out infinite; }
@keyframes redraw-shimmer { from { -webkit-mask-position: 0 100%; mask-position: 0 100%; } to { -webkit-mask-position: 0 0%; mask-position: 0 0%; } }
/* Остановленная генерация и ошибка загрузки — без волны */
.comic-redraw-placeholder[data-static-artwork="true"] .redraw-shimmer, .comic-redraw-placeholder[data-failed-art="true"] .redraw-shimmer { display: none; }
@media (prefers-reduced-motion: reduce) { .comic-redraw-placeholder .redraw-shimmer { display: none; } }
/* Раскадровка выбранного сценария: рамки кадров прорисовываются по очереди, затем строки подписей; иллюстрация остаётся по центру */
.comic-redraw-placeholder .redraw-sketch { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .42; }
.comic-redraw-placeholder .redraw-sketch svg { display: block; width: 100%; height: 100%; overflow: visible; }
.comic-redraw-placeholder .redraw-sketch-frame, .comic-redraw-placeholder .redraw-sketch-caption { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: redraw-sketch-draw 1.6s cubic-bezier(.45, 0, .2, 1) var(--sketch-delay, 0s) forwards; }
/* Прозрачность — у всего слоя: общие стороны соседних кадров не ярче внешних */
.comic-redraw-placeholder .redraw-sketch-frame { stroke: #a9d4e8; stroke-width: 1.4px; }
.comic-redraw-placeholder .redraw-sketch-caption { stroke: #6f93a6; stroke-width: 3px; animation-duration: .9s; }
@keyframes redraw-sketch-draw { to { stroke-dashoffset: 0; } }
.comic-redraw-placeholder.has-sketch .redraw-composition { height: 100%; }
.comic-redraw-placeholder.has-sketch .redraw-copy { max-width: calc(100% - 24px); padding: 16px 22px 18px; box-sizing: border-box; border-radius: 14px; background: #07111c33; box-shadow: 0 0 28px 10px #07111c1f; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.comic-redraw-placeholder[data-failed-art="true"] .redraw-sketch { display: none; }
@media (prefers-reduced-motion: reduce) { .comic-redraw-placeholder .redraw-sketch-frame, .comic-redraw-placeholder .redraw-sketch-caption { animation: none; stroke-dashoffset: 0; } }
.comic-redraw-placeholder .redraw-composition { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: min(100%, 620px); padding: 28px 20px; box-sizing: border-box; }
.comic-redraw-placeholder .redraw-visual { position: relative; display: block; flex: 0 0 230px; width: 250px; max-width: 100%; margin-bottom: 23px; }
.comic-redraw-placeholder .redraw-art { position: absolute; display: block; inset: 0; }
.comic-redraw-placeholder .redraw-art * { box-sizing: border-box; }
.comic-redraw-placeholder .redraw-glow { position: absolute; pointer-events: none; opacity: .7; }
.comic-redraw-placeholder .redraw-star { position: absolute; width: 3px; height: 3px; background: #afcddd; border-radius: 50%; box-shadow: 0 0 8px #a3d8f44d; }
.comic-redraw-placeholder .redraw-spark { position: absolute; width: 12px; height: 12px; background: #e7d5a9; clip-path: polygon(50% 0, 58% 40%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 40%); }
.comic-redraw-placeholder .redraw-copy { display: block; position: relative; text-align: center; }
.comic-redraw-placeholder .redraw-kicker { display: block; margin-bottom: 12px; font-size: 10px; line-height: 1.4; font-weight: 400; letter-spacing: 2.5px; text-transform: uppercase; color: #89a7ba; }
.comic-redraw-placeholder .redraw-title { display: block; margin: 0; font-size: 20px; line-height: 1.4; font-weight: 400; letter-spacing: -.25px; color: #e2eff6; }
.comic-redraw-placeholder .redraw-hint { display: block; margin-top: 12px; font-size: 12px; line-height: 1.65; font-weight: 400; color: #94adbd; }
.comic-fullscreen .comic-redraw-placeholder.is-illustrated { padding: 0; min-height: 0; }
.comic-fullscreen .redraw-composition { top: 50%; transform: translateY(-50%); }
/* Лунная мастерская: мягкий свет и астрономический рисунок. */
.comic-redraw-placeholder[data-redraw-design="moon"]{background:radial-gradient(ellipse at 50% 30%,#142f3d 0,#0b1c29 35%,#07111c 80%)}
.comic-redraw-placeholder[data-redraw-design="moon"] .redraw-halo{inset:15px 26px 0;border-radius:50%;background:radial-gradient(ellipse,#8dd9e033,transparent 66%);filter:blur(16px)}
.comic-redraw-placeholder[data-redraw-design="moon"] .redraw-orbit{position:absolute;left:28px;top:23px;width:196px;height:196px;border-radius:50%;border:1px solid #9cc5d32e;transform:rotate(-28deg)}
.comic-redraw-placeholder[data-redraw-design="moon"] .redraw-orbit:before{content:"";position:absolute;inset:16px;border:1px dashed #8cbbc127;border-radius:50%}
.comic-redraw-placeholder[data-redraw-design="moon"] .redraw-orbit-b{left:7px;top:88px;width:238px;height:85px;transform:rotate(-26deg);border-color:#d7c7a052}
.comic-redraw-placeholder[data-redraw-design="moon"] .redraw-orbit-b:before{display:none}
.comic-redraw-placeholder[data-redraw-design="moon"] .redraw-crescent{position:absolute;left:88px;top:60px;width:88px;height:100px;border-radius:50%;background:radial-gradient(ellipse at 32% 60%,#e8dfba,#9bd7d6 65%,#5e99a8);transform:rotate(-25deg);box-shadow:-10px 12px 35px #88bfc92e}
.comic-redraw-placeholder[data-redraw-design="moon"] .redraw-crescent:after{content:"";position:absolute;width:81px;height:88px;border-radius:50%;background:#102631;left:24px;top:-6px}
.comic-redraw-placeholder[data-redraw-design="moon"] .redraw-cloud{position:absolute;left:53px;top:151px;width:148px;height:30px;background:linear-gradient(0deg,#102534ee,#263e4ad9);border-radius:60% 55% 40% 40%;box-shadow:0 11px 20px #050f19a0}
.comic-redraw-placeholder[data-redraw-design="moon"] .redraw-cloud:before{content:"";position:absolute;left:26px;bottom:8px;width:54px;height:30px;background:#253e49;border-radius:50% 70% 0 0}
.comic-redraw-placeholder[data-redraw-design="moon"] .redraw-page{position:absolute;left:171px;top:135px;width:38px;height:48px;transform:rotate(18deg);border:1px solid #a5c7cf80;border-radius:3px;background:#16303a;box-shadow:0 4px 12px #0003}
.comic-redraw-placeholder[data-redraw-design="moon"] .redraw-page:before{content:"";position:absolute;inset:6px 5px 20px;border:1px solid #92c8cf66}
.comic-redraw-placeholder[data-redraw-design="moon"] .redraw-page:after{content:"";position:absolute;inset:29px 5px 6px;border-top:1px solid #92c8cf66;border-bottom:1px solid #92c8cf33}
.comic-redraw-placeholder[data-redraw-design="moon"] .redraw-star-a{left:32px;top:68px}
.comic-redraw-placeholder[data-redraw-design="moon"] .redraw-star-b{left:192px;top:50px}
.comic-redraw-placeholder[data-redraw-design="moon"] .redraw-star-c{left:65px;top:202px;width:2px;height:2px}
.comic-redraw-placeholder[data-redraw-design="moon"] .redraw-star-d{left:210px;top:106px;width:2px;height:2px}
.comic-redraw-placeholder[data-redraw-design="moon"] .redraw-spark-a{left:55px;top:121px}
.comic-redraw-placeholder[data-redraw-design="moon"] .redraw-spark-b{left:167px;top:23px;width:8px;height:8px}
/* Живые кадры: страница собирается из линий и цветовых плоскостей. */
.comic-redraw-placeholder[data-redraw-design="panels"]{background:radial-gradient(ellipse at 50% 37%,#1c2a32,#0d1925 47%,#08121c 85%)}
.comic-redraw-placeholder[data-redraw-design="panels"] .redraw-halo{inset:8px 8px -18px;background:radial-gradient(ellipse,#70bfc62e,transparent 66%);filter:blur(19px)}
.comic-redraw-placeholder[data-redraw-design="panels"] .redraw-sheet-shadow{position:absolute;width:143px;height:186px;left:60px;top:26px;border:1px solid #7b9daa30;border-radius:4px;transform:rotate(9deg);background:#10232c}
.comic-redraw-placeholder[data-redraw-design="panels"] .redraw-sheet{position:absolute;left:49px;top:16px;width:149px;height:194px;padding:10px;border:1px solid #9bbfc37a;border-radius:5px;background:linear-gradient(125deg,#23414b,#132b36);transform:rotate(-9deg);box-shadow:0 14px 35px #02080c66}
.comic-redraw-placeholder[data-redraw-design="panels"] .redraw-frames{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:77px 84px;gap:6px}
.comic-redraw-placeholder[data-redraw-design="panels"] .redraw-frame{position:relative;overflow:hidden;border:1px solid #90b8ba65;background:linear-gradient(#284555,#172d3a)}
.comic-redraw-placeholder[data-redraw-design="panels"] .redraw-frame-wide{grid-column:span 2;background:linear-gradient(160deg,#c0b58e2b,#182b38 72%)}
.comic-redraw-placeholder[data-redraw-design="panels"] .redraw-mountain{position:absolute;width:80px;height:55px;left:-15px;bottom:-8px;clip-path:polygon(0 100%,45% 0,100% 100%);background:#61918f}
.comic-redraw-placeholder[data-redraw-design="panels"] .redraw-mountain:after{content:"";position:absolute;inset:0;background:#a9b8a27a;clip-path:polygon(45% 0,55% 18%,48% 15%,38% 21%)}
.comic-redraw-placeholder[data-redraw-design="panels"] .redraw-sun{position:absolute;left:30px;top:15px;width:16px;height:16px;background:#dcc69b;border-radius:50%;box-shadow:0 0 15px #dcc69b35}
.comic-redraw-placeholder[data-redraw-design="panels"] .redraw-vertical{position:absolute;bottom:0;left:15px;width:13px;height:44px;background:#305663;box-shadow:20px 9px 0 #436b74}
.comic-redraw-placeholder[data-redraw-design="panels"] .redraw-bridge{position:absolute;left:4px;right:4px;bottom:13px;height:30px;border-radius:80% 80% 0 0;border-top:2px solid #c3bea296;transform:rotate(-5deg)}
.comic-redraw-placeholder[data-redraw-design="panels"] .redraw-bridge:after{content:"";position:absolute;inset:14px 0 -8px;background:repeating-linear-gradient(90deg,transparent 0 13px,#8db0ad60 13px 14px)}
.comic-redraw-placeholder[data-redraw-design="panels"] .redraw-water{position:absolute;left:0;right:0;bottom:0;height:15px;background:repeating-linear-gradient(0deg,#62999b2b 0 1px,transparent 1px 4px)}
.comic-redraw-placeholder[data-redraw-design="panels"] .redraw-pencil{position:absolute;left:177px;top:108px;width:12px;height:94px;border-radius:4px 4px 1px 1px;background:linear-gradient(90deg,#b6cfd0,#74a9b7 43%,#355c72 45%,#7eb5c4);transform:rotate(34deg);box-shadow:0 2px 14px #8ac8d02b}
.comic-redraw-placeholder[data-redraw-design="panels"] .redraw-pencil:after{content:"";position:absolute;top:100%;width:12px;height:17px;background:linear-gradient(#d8c7a3 72%,#182a38 73%);clip-path:polygon(0 0,100% 0,50% 100%)}
.comic-redraw-placeholder[data-redraw-design="panels"] .redraw-gesture{position:absolute;left:25px;top:191px;width:118px;height:31px;border-bottom:1px solid #d5bd876e;border-radius:50%;transform:rotate(-17deg)}
.comic-redraw-placeholder[data-redraw-design="panels"] .redraw-spark-a{top:51px;left:207px;width:9px;height:9px}
.comic-redraw-placeholder[data-redraw-design="panels"] .redraw-spark-b{top:160px;left:20px;width:7px;height:7px}
/* Врата сна: арка, внутренний пейзаж и свет на воде. */
.comic-redraw-placeholder[data-redraw-design="portal"]{background:radial-gradient(ellipse at 50% 28%,#262739,#141d2b 38%,#090f1b 83%)}
.comic-redraw-placeholder[data-redraw-design="portal"] .redraw-halo{inset:0 20px -5px;border-radius:50%;background:radial-gradient(ellipse,#b1a4db44,transparent 69%);filter:blur(13px)}
.comic-redraw-placeholder[data-redraw-design="portal"] .redraw-arch-outer{position:absolute;left:48px;top:5px;width:154px;height:187px;border:1px solid #b4a8cb38;border-radius:85px 85px 0 0}
.comic-redraw-placeholder[data-redraw-design="portal"] .redraw-arch-middle{position:absolute;left:60px;top:17px;width:130px;height:175px;border:1px solid #cabda465;border-radius:72px 72px 0 0}
.comic-redraw-placeholder[data-redraw-design="portal"] .redraw-gate{position:absolute;left:72px;top:29px;width:106px;height:163px;border:1px solid #a4d0d0bb;border-radius:58px 58px 0 0;overflow:hidden;background:linear-gradient(#3d4b67,#253c55 52%,#5d7c8566);box-shadow:0 0 14px #93c3ce26,inset 0 0 18px #a4cbd025}
.comic-redraw-placeholder[data-redraw-design="portal"] .redraw-moon-disc{position:absolute;left:42px;top:32px;width:25px;height:25px;background:#dfd7b6;border-radius:50%;box-shadow:0 0 22px #e2d4bd66}
.comic-redraw-placeholder[data-redraw-design="portal"] .redraw-hill{position:absolute;width:170px;height:85px;background:#263d53;bottom:4px;left:-40px;border-radius:50%;transform:rotate(-25deg)}
.comic-redraw-placeholder[data-redraw-design="portal"] .redraw-hill-b{background:#426170;bottom:-32px;left:0;transform:rotate(22deg)}
.comic-redraw-placeholder[data-redraw-design="portal"] .redraw-path{position:absolute;bottom:-10px;left:40px;width:22px;height:63px;background:linear-gradient(#c5bea89c,#97c6cd55);clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);transform:rotate(16deg)}
.comic-redraw-placeholder[data-redraw-design="portal"] .redraw-reflection{position:absolute;left:23px;top:190px;width:204px;height:39px;border-radius:50%;background:radial-gradient(ellipse,#9fc7cc27,transparent 69%);border-top:1px solid #8eb4c250}
.comic-redraw-placeholder[data-redraw-design="portal"] .redraw-reflection:before{content:"";position:absolute;left:30px;right:30px;top:8px;height:12px;border-top:1px solid #a0bfc32e;border-bottom:1px solid #a0bfc31f;border-radius:50%}
.comic-redraw-placeholder[data-redraw-design="portal"] .redraw-spark-a{left:32px;top:73px;width:9px;height:9px}
.comic-redraw-placeholder[data-redraw-design="portal"] .redraw-spark-b{left:209px;top:119px}
.comic-redraw-placeholder[data-redraw-design="portal"] .redraw-star-a{left:212px;top:37px;width:2px;height:2px}
.comic-redraw-placeholder[data-redraw-design="portal"] .redraw-star-b{left:43px;top:155px;width:2px;height:2px}

@media (max-width: 380px) {
  .comic-redraw-placeholder .redraw-composition { padding: 20px 14px; }
  .comic-redraw-placeholder .redraw-visual { flex-basis: 200px; margin-bottom: 10px; transform: scale(.86); transform-origin: center bottom; }
  .comic-redraw-placeholder .redraw-title { font-size: 19px; }
}
@media (max-height: 460px) {
  .comic-fullscreen .redraw-composition { flex-direction: row; gap: 18px; }
  .comic-fullscreen .redraw-visual { flex: 0 0 230px; height: 230px; margin: 0; transform: scale(.8); }
}
.comic-redraw-placeholder .redraw-retry { display: inline-block; margin-top: 18px; padding: 9px 22px; border: 1px solid #4a6b7d; border-radius: 999px; background: #12293799; color: #e2eff6; font: inherit; font-size: 13px; letter-spacing: .2px; cursor: pointer; transition: background-color .15s, border-color .15s; }
.comic-redraw-placeholder .redraw-retry:hover { border-color: #7fb4c9; background: #1a3a4c; }
.comic-redraw-placeholder .redraw-retry:focus-visible { outline: 2px solid #41b4e5; outline-offset: 3px; }