/* Глава «Цистерна Базилика». Все селекторы с префиксом ci- или по типу модуля ci_. */

/* ---------- чертёж водовода (Хранитель) ---------- */
.as-keeper .panel[data-type^="ci_"] .pbody {
  position: relative; overflow: hidden;
  color: #1f3556;
  font-family: Georgia, "Times New Roman", serif;
  border-color: #9fb0bc;
  background:
    linear-gradient(#2c4f7a14 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, #2c4f7a14 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(#2c4f7a22 1px, transparent 1px) 0 0 / 90px 90px,
    linear-gradient(90deg, #2c4f7a22 1px, transparent 1px) 0 0 / 90px 90px,
    radial-gradient(130% 90% at 30% 15%, #f4f0e2 0%, #e6e0cc 65%, #d2cbb2 100%);
  box-shadow: inset 0 0 0 6px #f4f0e2, inset 0 0 0 7px #1f3a6355, inset 0 0 40px #5a6a7a33, 0 8px 22px #0006;
}
.ci-doc { position: relative; z-index: 1; padding-bottom: 50px; }
.ci-doc p { line-height: 1.5; }
.ci-doc .lead { font-style: italic; font-weight: 500; }
.ci-doc .tbl th, .ci-doc .tbl td { border-color: #8a9cb0; }
.ci-doc .tbl th { background: #dfe3dc; }
.ci-stain { position: absolute; z-index: 3; width: 90px; height: 70px; margin: -35px 0 0 -45px; pointer-events: none; border-radius: 48% 52% 40% 60%;
  background: radial-gradient(circle at 45% 50%, #2c4f7a55, #2c4f7a33 55%, transparent 70%); animation: ci-stain 1.9s ease-out forwards; }
@keyframes ci-stain { 0% { transform: scale(.2); opacity: 0; } 15% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
.ci-seal { position: absolute; z-index: 4; right: 10px; bottom: 8px; width: 60px; height: 60px; pointer-events: none; animation: ci-stamp .5s cubic-bezier(.3,1.6,.5,1) both; }
.ci-seal svg { width: 100%; height: 100%; display: block; }
@keyframes ci-stamp { from { transform: scale(2.4) rotate(20deg); opacity: 0; } to { transform: scale(1) rotate(8deg); opacity: .85; } }

/* отражение: чертежи */
.ci-fliphint { width: 100%; max-width: 240px; display: block; margin: 0 auto 10px; }
.ci-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 12px; }
.ci-plan { border: 1.5px solid #1f3a63; border-radius: 6px; padding: 4px; background: #ffffff40; }
.ci-plan-h { display: flex; justify-content: center; margin-bottom: 4px; }
.ci-lampsw { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 2px #1f3a63, 0 0 8px currentColor; }
.ci-lampsw .cmark { width: 64%; height: 64%; }
.ci-pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.ci-pc { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid #1f3a6366; border-radius: 4px; color: #1f3a63; }
.ci-pc .ic.big { width: 70%; height: 70%; }
.ci-shaft { width: 100%; height: 12px; display: block; }

/* лабиринт: карта */
.ci-kmap { width: 100%; max-width: 380px; display: block; margin: 4px auto 12px; }
.ci-kwall { stroke: #1f3a63; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 5 2; }

/* капли: таблица */
.ci-pat { display: inline-flex; align-items: center; gap: 6px; }
.ci-pat i { display: block; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #1f3a63; }
.ci-pat i.big { width: 18px; height: 22px; }
.ci-pat i.small { width: 9px; height: 11px; }
.ci-dlegend { display: flex; justify-content: center; gap: 22px; margin: 0 0 8px; }
.ci-dtbl td { padding: 7px 6px; }

/* уровень воды: краны */
.ci-ktube { display: inline-flex; align-items: flex-end; justify-content: center; width: 26px; height: 38px; padding-bottom: 4px; border: 1.5px solid #1f3a63; border-radius: 3px 3px 9px 9px; vertical-align: middle;
  background: linear-gradient(transparent 30%, var(--w) 30%); }
.ci-ktube .cmark { width: 16px; height: 16px; }
.ci-arrow { margin: 0 10px; font-size: 20px; }

/* факел: таблица и смотровое окно */
.ci-tk { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.ci-ttbl { flex: 1; margin: 0; }
.ci-kfl { display: inline-block; }
.ci-tflame { width: 42px; height: 56px; display: block; margin: 0 auto; }
.ci-tflame .ci-f1 { fill: var(--fl); stroke: #1f3a63; stroke-width: 2.4; }
.ci-tflame .ci-f2 { fill: #fff6d8; opacity: .7; }
.ci-window { flex: none; width: 110px; height: 110px; border-radius: 50%; padding: 8px; background: repeating-conic-gradient(#1f3a63 0 8deg, #f4f0e2 8deg 16deg); box-shadow: 0 0 0 2px #1f3a63; --fl: #ff8a2a; }
.ci-wglass { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--fl) 40%, #000) 0%, #0b0806 75%); box-shadow: inset 0 0 0 3px #1f3a63, inset 0 6px 16px #000; transition: background .25s; }
.ci-kflame { width: 56%; }
.ci-kflame .ci-f1 { transition: none !important; }   /* цвет и знак пламени меняются в один кадр */

/* ---------- общие огни и пламя ---------- */
.ci-flame .ci-f1, .ci-kflame .ci-f1 { fill: var(--fl); transform-box: fill-box; transform-origin: 50% 100%; animation: ci-lick .3s ease-in-out infinite alternate; transition: fill .25s; }
.ci-flame .ci-f2, .ci-kflame .ci-f2 { fill: #fff6d8; opacity: .8; transform-box: fill-box; transform-origin: 50% 100%; animation: ci-lick .22s ease-in-out infinite alternate-reverse; }
@keyframes ci-lick { from { transform: scale(1, .9) skewX(-4deg); } to { transform: scale(.94, 1.08) skewX(5deg); } }

/* ---------- отражение (Мастер) ---------- */
.ci-mirror { max-width: 360px; margin: 0 auto; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 2px #2c241c; }
.ci-wall svg { width: 100%; display: block; }
.ci-lamp { transform-box: view-box; transform-origin: 150px 0; animation: ci-sway 4s ease-in-out infinite alternate; }
@keyframes ci-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.ci-water { position: relative; padding: 10px 12px 16px; background: linear-gradient(color-mix(in srgb, var(--tint) 30%, #0b2230), #071820); border-top: 2px solid color-mix(in srgb, var(--tint) 60%, #fff); overflow: hidden; }
.ci-refl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; position: relative; z-index: 1; }
.ci-cap { position: relative; min-width: 0; overflow: hidden; aspect-ratio: 1.4; border: 0; border-radius: 10px; cursor: pointer; padding: 0; color: #f2ead6;
  background: linear-gradient(0deg, color-mix(in srgb, var(--tint) 22%, #2a3a40), #142228); box-shadow: inset 0 0 0 1.5px #ffffff22; }
.ci-capin { display: grid; place-items: center; width: 100%; height: 100%; animation: ci-ripple 2.6s ease-in-out infinite; opacity: .85; }
.ci-capic { width: 46%; height: 64%; transform: scaleY(-1); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--tint) 70%, transparent)); }
@keyframes ci-ripple { 0%, 100% { transform: translateX(0) skewX(0); } 30% { transform: translateX(2px) skewX(3deg) scaleY(.96); } 65% { transform: translateX(-2px) skewX(-2deg) scaleY(1.03); } }
.ci-cap:not(:disabled):active { transform: scale(.95); }
.ci-cap.fixed { color: #fff; box-shadow: inset 0 0 0 2px var(--tint), 0 0 16px color-mix(in srgb, var(--tint) 60%, transparent); cursor: default; }
.ci-cap.turn .ci-capic { animation: ci-turn .7s ease-out; }
@keyframes ci-turn { 0% { transform: scaleY(-1) rotateY(0); } 50% { transform: scaleY(-1) rotateY(90deg); } 100% { transform: scaleY(-1) rotateY(0); } }
.ci-ring { position: absolute; left: 50%; top: 50%; width: 30px; height: 12px; margin: -6px 0 0 -15px; border-radius: 50%; border: 2px solid var(--tint); pointer-events: none; animation: ci-ringa 1.1s ease-out forwards; }
.ci-ring.bad { border-color: #ff5a3a; }
@keyframes ci-ringa { to { transform: scale(5); opacity: 0; } }
.ci-caustic { position: absolute; inset: -40%; pointer-events: none; opacity: .18; background: repeating-linear-gradient(115deg, transparent 0 18px, var(--tint) 18px 20px, transparent 20px 44px); animation: ci-caus 7s linear infinite; }
.ci-caustic.b { opacity: .12; animation-duration: 11s; animation-direction: reverse; transform: rotate(40deg); }
@keyframes ci-caus { to { translate: 44px 20px; } }
.ci-mirror.done .ci-cap { animation: ci-calm 1.4s ease-in-out infinite; }
@keyframes ci-calm { 50% { box-shadow: inset 0 0 0 2px var(--tint), 0 0 22px var(--tint); } }

/* ---------- ряды колонн ---------- */
.ci-maze { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.ci-mstage { position: relative; width: 100%; max-width: 340px; aspect-ratio: 1; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 2px #2c241c, 0 8px 20px #0008; background: #000; }
.ci-msvg { width: 100%; height: 100%; display: block; }
.ci-cell { transition: none; }
.ci-cell.from-N { animation: ci-fromN .45s ease-out; }
.ci-cell.from-S { animation: ci-fromS .45s ease-out; }
.ci-cell.from-E { animation: ci-fromE .45s ease-out; }
.ci-cell.from-W { animation: ci-fromW .45s ease-out; }
@keyframes ci-fromN { from { transform: translateY(-180px); opacity: .2; } }
@keyframes ci-fromS { from { transform: translateY(180px); opacity: .2; } }
@keyframes ci-fromE { from { transform: translateX(180px); opacity: .2; } }
@keyframes ci-fromW { from { transform: translateX(-180px); opacity: .2; } }
.ci-rip { fill: none; stroke: #6ab0c8; stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ci-rip 4s ease-out infinite; }
@keyframes ci-rip { 0% { transform: scale(.3); opacity: .5; } 100% { transform: scale(1.6); opacity: 0; } }
.ci-torchlight { animation: ci-flicker 1.4s ease-in-out infinite alternate; }
@keyframes ci-flicker { 0% { opacity: .7; } 40% { opacity: 1; } 60% { opacity: .8; } 100% { opacity: .95; } }
.ci-me circle:last-child { animation: ci-flicker .7s ease-in-out infinite alternate; }
.ci-mark { filter: drop-shadow(0 0 3px #ffcf6a); }
.ci-wh { transform-box: fill-box; transform-origin: center; }
.ci-wh.tried { opacity: .55; }
.ci-maze.done .ci-whi { animation: ci-wspin 1.4s cubic-bezier(.3,1,.5,1) both; transform-box: view-box; transform-origin: 150px 150px; }
.ci-maze.done .ci-wh { filter: drop-shadow(0 0 10px #ffd36a); }
@keyframes ci-wspin { to { transform: rotate(540deg); } }
.ci-maze.done .ci-mstage { box-shadow: 0 0 0 2px #4fae61, 0 0 30px #6ab0c8aa; }
.ci-maze.gush .ci-mstage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, #9ad0e4cc, #3a86d866 40%, transparent 70%); animation: ci-gush 1.1s ease-out forwards; }
@keyframes ci-gush { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.ci-go { position: absolute; width: 52px; height: 52px; margin: -26px 0 0 -26px; border: 0; border-radius: 50%; cursor: pointer; z-index: 2;
  font-size: 20px; color: #2a1d0c; background: radial-gradient(circle at 40% 35%, #f3dc9b, #b48a35 70%); box-shadow: 0 3px 0 #6d501b, 0 4px 12px #000a; }
.ci-go-N { margin-top: -6px; } .ci-go-S { margin-top: -46px; } .ci-go-E { margin-left: -46px; } .ci-go-W { margin-left: -6px; }
.ci-go:disabled { opacity: 0; pointer-events: none; }
.ci-go:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 #6d501b; }
.ci-turnbtn { width: 100%; max-width: 340px; }
.ci-turnbtn[hidden] { display: none; }

/* ---------- капли ---------- */
.ci-drops { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ci-dsvg { width: 100%; max-width: 340px; display: block; }
.ci-splash ellipse { fill: none; stroke: #bfe6f4; stroke-width: 1.6; transform-box: fill-box; transform-origin: center; animation: ci-splash 1.6s ease-out forwards; }
.ci-splash .r2 { animation-delay: .2s; opacity: 0; }
.ci-splash.big ellipse { stroke-width: 2.4; animation-name: ci-splashb; }
@keyframes ci-splash { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(3); opacity: 0; } }
@keyframes ci-splashb { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(9); opacity: 0; } }
.ci-slot { fill: #ffffff10; stroke: #6ab0c855; stroke-width: 1.5; transition: fill .2s; }
.ci-slot.on.big { fill: #bfe6f4; r: 11px; }
.ci-slot.on.small { fill: #bfe6f4; r: 5px; }
.ci-wrow { display: flex; align-items: center; gap: 12px; }
.ci-swheel { width: 150px; height: 150px; display: block; }
.ci-wrot { transform-box: view-box; transform-origin: 100px 100px; transition: transform .45s cubic-bezier(.3,1.3,.6,1); }
.ci-wnums text { font: 700 17px Georgia, serif; fill: #e6c675; }
.ci-wsel { font: 700 30px Georgia, serif; fill: #2a1d0c; }
.ci-openbtn { width: 100%; max-width: 340px; }
.ci-drops.done .ci-swheel { filter: drop-shadow(0 0 12px #6ab0c8); }

/* ---------- уровень воды ---------- */
.ci-water-m { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ci-lamps { display: flex; gap: 8px; min-height: 22px; }
.ci-lamps i { width: 20px; height: 20px; border-radius: 50%; background: #3a3026; box-shadow: inset 0 0 0 2px #5a4a3a; transition: background .3s, box-shadow .3s; }
.ci-lamps i.on { background: radial-gradient(#fff3c0, #ffb02e 70%); box-shadow: 0 0 10px #ffb02e; }
.ci-wsvg { width: 100%; max-width: 340px; display: block; }
.ci-wcol { transform: scaleY(var(--lv)); transition: transform 1.1s cubic-bezier(.4,1.2,.6,1); }
.ci-surf { transition: transform 1.1s cubic-bezier(.4,1.2,.6,1); }
.ci-tmark { animation: ci-mark 1.6s ease-in-out infinite; }
@keyframes ci-mark { 50% { opacity: .55; } }
.ci-pipe { opacity: 0; }
.ci-pipe.show { animation: ci-pipe 1.8s ease-out forwards; }
@keyframes ci-pipe { 0% { opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: .18; } }
.ci-flow { animation: ci-flow .5s linear infinite; }
@keyframes ci-flow { to { stroke-dashoffset: -16; } }
.ci-valves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; max-width: 340px; }
.ci-valve { position: relative; border: 0; background: linear-gradient(#3a2c20, #241b13); border-radius: 14px; padding: 8px 6px 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: inset 0 0 0 1.5px #5a4630, 0 4px 10px #0007; }
.ci-vwheel { width: 64px; height: 64px; transition: transform .2s; }
.ci-valve.spin .ci-vwheel { animation: ci-vspin .9s ease-in-out; }
@keyframes ci-vspin { 50% { transform: rotate(200deg); } 100% { transform: rotate(360deg); } }
.ci-valve.dry { animation: ci-dry .4s; }
@keyframes ci-dry { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.ci-vplate { display: grid; place-items: center; width: 44px; height: 32px; border-radius: 6px; color: #2a1d0c; background: linear-gradient(#e6c675, #b48a35); }
.ci-valve:disabled { cursor: default; filter: grayscale(.4) brightness(.8); }
.ci-water-m.burst .ci-wsvg { animation: ci-shake .5s; }
.ci-water-m.burst .ci-wcol rect:first-child { filter: brightness(1.6); }
@keyframes ci-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } }
.ci-water-m.done .ci-tmark path { stroke: #7cf09a; fill: #7cf09a; }
.ci-water-m.done .ci-tmark { animation: none; }

/* ---------- факел ---------- */
.ci-torch { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ci-tstage { position: relative; width: 100%; max-width: 340px; }
.ci-tsvg { width: 100%; display: block; }
.ci-flame-box { position: absolute; left: 50%; top: 18%; width: 22%; margin-left: -11%; transform: scale(0); transform-origin: 50% 100%; transition: transform .5s cubic-bezier(.3,1.6,.5,1); pointer-events: none; filter: drop-shadow(0 0 14px var(--fl)); }
.ci-flame { width: 100%; display: block; }
.ci-torch.lit .ci-flame-box { transform: scale(1); }
.ci-tl, .ci-trefl { opacity: 0; transition: opacity .6s; }
.ci-torch.lit .ci-tl { opacity: 1; animation: ci-flicker 1.2s ease-in-out infinite alternate; }
.ci-torch.lit .ci-trefl { opacity: .45; animation: ci-flicker .9s ease-in-out infinite alternate; }
.ci-ember { animation: ci-ember 1.8s ease-in-out infinite; }
@keyframes ci-ember { 50% { fill: #ffa040; opacity: .5; } }
.ci-torch.lit .ci-ember { opacity: 0; animation: none; }
.ci-puff { position: absolute; left: 50%; top: 34%; width: 50px; height: 50px; margin: -25px; border-radius: 50%; background: radial-gradient(#d8d0c4cc, transparent 70%); opacity: 0; pointer-events: none; }
.ci-torch.fizz .ci-puff { animation: ci-puff 1.2s ease-out; }
@keyframes ci-puff { 0% { opacity: .9; transform: scale(.3); } 20% { opacity: 1; background: radial-gradient(#fff, #ffb02e88 40%, transparent 70%); } 100% { opacity: 0; transform: translateY(-60px) scale(2.4); } }
.ci-lightbtn { width: 100%; max-width: 340px; }

/* ---------- итог решённого модуля: вода спокойна, огни горят, кнопок нет ---------- */
.ci-mirror.done .ci-capin, .ci-mirror.done .ci-lamp, .ci-mirror.done .ci-caustic { animation: none; }
.ci-mirror.done .ci-caustic { opacity: .08; }
.ci-maze.done .ci-turnbtn { display: none; }
.ci-drops.done .ci-wrow .btn { visibility: hidden; }
.ci-drops.done .ci-openbtn, .ci-drops.done .ci-fdrop, .ci-drops.done .ci-slot, .ci-drops.done .ci-slotbg { display: none; }
.ci-water-m.done .ci-valves, .ci-water-m.done .ci-lamps, .ci-water-m.done .ci-pipe { display: none; }
.ci-water-m.done .ci-wsvg { filter: drop-shadow(0 0 10px #6ab0c866); }
.ci-torch.lit .ci-lightbtn { display: none; }

/* ---------- сцена победы ---------- */
.ci-scene { width: 100%; display: block; border-radius: 12px; margin: -6px 0 12px; }
.ci-swater { animation: ci-drain 2.6s .3s cubic-bezier(.5,0,.4,1) forwards; }
@keyframes ci-drain { to { transform: translateY(30px); } }
.ci-stream { opacity: 0; animation: ci-on .4s .4s forwards, ci-flow .4s linear infinite; }
@keyframes ci-on { to { opacity: 1; } }
.ci-sl { opacity: 0; animation: ci-on .6s ease-out forwards; }

@media (min-width: 900px) {
  .ci-mirror, .ci-mstage, .ci-dsvg, .ci-wsvg, .ci-tstage { max-width: 400px; }
}