/* Глава «Галатская башня». Все селекторы с префиксом gl- или по типу модуля gl_. */

/* ---------- журнал пожарного дозора (Хранитель) ---------- */
.as-keeper .panel[data-type^="gl_"] .pbody {
  position: relative; overflow: hidden;
  padding: 18px 14px 18px 40px;
  color: #3b2614;
  font-family: Georgia, "Times New Roman", serif;
  border-color: #b99a68;
  background:
    linear-gradient(90deg, transparent 27px, #b8483c66 27px, #b8483c66 28.5px, transparent 28.5px, transparent 31px, #b8483c44 31px, #b8483c44 32px, transparent 32px),
    repeating-linear-gradient(180deg, transparent 0 25px, #8a6a4a2e 25px 26px),
    radial-gradient(130% 90% at 30% 15%, #f7eed8 0%, #ecdcb6 60%, #d9c08e 100%);
  box-shadow: inset 0 0 36px #8a5a2a55, inset 0 0 0 1px #fff6, 0 8px 22px #0006;
}
.as-keeper .panel[data-type^="gl_"] .pbody::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 40% at 85% 95%, #8a5a2a22, transparent), radial-gradient(30% 20% at 10% 5%, #8a5a2a1a, transparent);
}
.gl-doc { position: relative; z-index: 1; padding-bottom: 52px; }
.gl-doc p { line-height: 1.5; }
.gl-doc .lead { font-style: italic; font-weight: 500; }
.gl-doc .tbl th, .gl-doc .tbl td { border-color: #a8885a; }
.gl-doc .tbl th { background: #e8d4a8; }
.gl-blot { position: absolute; z-index: 3; width: 70px; height: 70px; margin: -35px 0 0 -35px; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #2a1408ee 0 30%, transparent 31%), radial-gradient(circle at 20% 30%, #2a1408dd 0 9%, transparent 10%), radial-gradient(circle at 78% 70%, #2a1408dd 0 8%, transparent 9%), radial-gradient(circle at 70% 18%, #2a1408cc 0 5%, transparent 6%);
  animation: gl-blot 1.8s ease-out forwards; }
@keyframes gl-blot { 0% { transform: scale(.2); opacity: 0; } 12% { transform: scale(1.15); opacity: 1; } 70% { opacity: .9; } 100% { transform: scale(1); opacity: 0; } }
.gl-seal { position: absolute; z-index: 4; right: 10px; bottom: 8px; width: 62px; height: 62px; pointer-events: none; filter: drop-shadow(0 2px 2px #0005); animation: gl-stamp .5s cubic-bezier(.3,1.6,.5,1) both; }
.gl-seal svg { width: 100%; height: 100%; display: block; }
@keyframes gl-stamp { from { transform: scale(2.4) rotate(-25deg); opacity: 0; } to { transform: scale(1) rotate(-12deg); opacity: .92; } }

/* роза ветров в журнале */
.gl-rose { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 6px 0 14px; max-width: 360px; }
.gl-rc { aspect-ratio: 1; border: 1px solid #a8885a; border-radius: 8px; background: #fff8e844; }
.gl-rc svg { width: 100%; height: 100%; display: block; }
.gl-rcc { border-style: dashed; }
.gl-rn { font: 700 15px Georgia, serif; fill: #3b2614; }
.gl-pens { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gl-pens li { display: flex; align-items: center; gap: 10px; }
.gl-pen-ic { flex: none; width: 46px; height: 30px; display: block; filter: drop-shadow(0 1px 0 #fff8); }
.gl-legend { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px 22px; margin: 0; }
.gl-lg { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }

/* карта кварталов */
.gl-map { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 6px 0 14px; border: 2px solid #6a4a2a; border-radius: 6px; background: #fff8e833; }
.gl-plot { position: relative; border: 1px dashed #a8885a; padding: 2px; }
.gl-plot svg { width: 100%; display: block; }
.gl-num { position: absolute; left: 4px; top: 4px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 16px/1 Georgia, serif; color: #f7eed8; background: #8a2a1c; box-shadow: 0 0 0 2px #f7eed8, 0 0 0 3px #8a2a1c; }

/* корзины в журнале */
.gl-btbl td { padding: 3px 2px; }
.gl-btbl .ic { color: #3b2614; }
.gl-mini { width: 100%; max-width: 120px; display: block; margin: 0 auto; }
.gl-art { width: 100%; max-width: 260px; display: block; margin: 0 auto 10px; }

/* ---------- роза ветров (Мастер) ---------- */
.gl-wind-stage { position: relative; width: 100%; max-width: 360px; margin: 0 auto; aspect-ratio: 1; }
.gl-wind-svg { width: 100%; height: 100%; display: block; }
.gl-streak { stroke: #ffffffa0; stroke-width: 1.4; stroke-linecap: round; animation: gl-blow 1.4s linear infinite; }
@keyframes gl-blow { from { transform: translateY(-60px); } to { transform: translateY(330px); } }
.gl-cloud { fill: #ffffff30; animation: gl-drift 8s linear infinite; }
@keyframes gl-drift { from { transform: translateY(-40px); } to { transform: translateY(340px); } }
.gl-penflag { transform-box: fill-box; transform-origin: 0 50%; animation: gl-flap .35s ease-in-out infinite alternate; }
@keyframes gl-flap { from { transform: scaleX(1) skewY(-6deg); } to { transform: scaleX(.86) skewY(8deg); } }
.gl-lamp { position: absolute; width: 20%; aspect-ratio: 1; margin: -10% 0 0 -10%; border: 0; border-radius: 50%; padding: 0; cursor: pointer; background: none; }
.gl-glass { position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #6a5a48, #2a2018 70%); box-shadow: 0 0 0 3px #c9a24a, 0 0 0 5px #3a2a18, 0 4px 10px #0009; transition: background .3s, box-shadow .3s; }
.gl-fl { position: absolute; left: 50%; top: 50%; width: 46%; height: 46%; margin: -23% 0 0 -23%; border-radius: 50% 0 50% 50%; background: radial-gradient(circle at 60% 40%, #fff6c0, #ffb02e 55%, #e0540e); transform: rotate(calc(var(--lean, 0deg) - 45deg)) scale(0); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.gl-lamp.on .gl-glass { background: radial-gradient(circle at 45% 40%, #ffeaa0, #ff9a2a 60%, #a04010); box-shadow: 0 0 0 3px #e6c675, 0 0 0 5px #3a2a18, 0 0 26px 8px #ffb02e99; }
.gl-lamp.on .gl-fl { transform: rotate(calc(var(--lean, 0deg) - 45deg)) scale(1); animation: gl-flick .18s ease-in-out infinite alternate; }
@keyframes gl-flick { from { filter: brightness(1); } to { filter: brightness(1.3); } }
.gl-lamp::after { content: attr(data-n); position: absolute; right: -2px; top: -2px; min-width: 20px; height: 20px; border-radius: 10px; font: 700 13px/20px Georgia, serif; color: #2a1d0c; background: #e6c675; display: none; }
.gl-lamp.on::after { display: block; }
.gl-lamp:not(.on):not(:disabled):active .gl-glass { transform: scale(.92); }
.gl-wind.gust .gl-lamp .gl-glass { animation: gl-gust 1s ease-out; }
.gl-wind.gust .gl-wind-svg { animation: gl-shudder .5s; }
@keyframes gl-gust { 0% { box-shadow: 0 0 0 3px #c9a24a, 0 0 0 5px #3a2a18, 0 0 30px 10px #fff8; } 100% { box-shadow: 0 0 0 3px #c9a24a, 0 0 0 5px #3a2a18, 0 0 0 0 #fff0; } }
@keyframes gl-shudder { 25% { transform: rotate(-1.2deg); } 60% { transform: rotate(1deg); } }
.gl-wind.gust .gl-lamp::before { content: ""; position: absolute; left: 30%; top: 0; width: 40%; height: 40%; border-radius: 50%; background: #cfc6bacc; animation: gl-smoke 1s ease-out forwards; }
@keyframes gl-smoke { from { transform: translateY(10px) scale(.4); opacity: .9; } to { transform: translateY(-30px) scale(2); opacity: 0; } }
.gl-wind.done .gl-lamp .gl-glass { animation: gl-pulse 1.6s ease-in-out infinite; }
@keyframes gl-pulse { 50% { box-shadow: 0 0 0 3px #e6c675, 0 0 0 5px #3a2a18, 0 0 40px 16px #ffd36acc; } }

/* ---------- подзорная труба ---------- */
.gl-scope { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gl-eye { position: relative; width: min(100%, 300px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; touch-action: none; cursor: grab;
  box-shadow: 0 0 0 6px #c9a24a, 0 0 0 10px #5a4020, 0 0 0 12px #c9a24a, 0 10px 26px #000a; background: #000; }
.gl-eye:active { cursor: grabbing; }
.gl-view { position: absolute; inset: 0; overflow: hidden; contain: paint; clip-path: inset(0); }
.gl-pano { position: absolute; left: 0; top: 0; height: 100%; will-change: transform; }
.gl-ret { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gl-eye::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, transparent 58%, #0008 74%, #000 86%); }
.gl-hint { margin: 2px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.gl-glint { stroke: #ffffffaa; stroke-width: 1.4; animation: gl-glint 2.6s ease-in-out infinite; }
@keyframes gl-glint { 0%, 100% { opacity: 0; } 50% { opacity: .9; } }
.gl-puff { fill: #4a4440; opacity: 0; transform-box: fill-box; transform-origin: center; animation: gl-rise 3.3s ease-out infinite; }
@keyframes gl-rise { 0% { transform: translate(0, 0) scale(.6); opacity: .85; } 100% { transform: translate(14px, -70px) scale(3.2); opacity: 0; } }
.gl-flame { fill: #ff8a1a; transform-box: fill-box; transform-origin: 50% 100%; animation: gl-lick .25s ease-in-out infinite alternate; }
@keyframes gl-lick { from { transform: scale(1, .8) skewX(-6deg); fill: #ff7a14; } to { transform: scale(.9, 1.15) skewX(6deg); fill: #ffc040; } }
.gl-burn { animation: gl-burn .3s steps(2) infinite; }
@keyframes gl-burn { 50% { fill: #ff6a10; } }
.gl-scope.done .gl-puff { fill: #e8eef4; animation-duration: 4.5s; }
.gl-scope.done .gl-flame, .gl-scope.done .gl-burn { animation: none; opacity: 0; }
.gl-scope.done .gl-burn { opacity: 1; fill: #3c2a1e; }
.gl-lh { animation: gl-lh 2s ease-in-out infinite; }
@keyframes gl-lh { 50% { fill: #fff8d0; r: 8px; } }
.gl-scope-ctl { display: flex; align-items: center; gap: 12px; }
.gl-dial { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 14px; background: linear-gradient(#5a4430, #3c2d20); box-shadow: inset 0 0 0 2px #7a5c34; }
.gl-dbtn { width: 40px; height: 52px; border: 0; border-radius: 10px; background: #2a1f16; color: var(--brass2); font: 700 26px/1 Georgia, serif; cursor: pointer; }
.gl-dbtn:disabled { opacity: .4; cursor: default; }
.gl-digits { display: block; width: 52px; height: 60px; overflow: hidden; border-radius: 8px; background: linear-gradient(#efe2c0, #c9b07a 50%, #efe2c0); box-shadow: inset 0 4px 8px #0006, inset 0 -4px 8px #0006; }
.gl-dstrip { display: flex; flex-direction: column; transition: transform .35s cubic-bezier(.3,1.4,.6,1); }
.gl-dstrip b { height: 60px; display: grid; place-items: center; font: 700 36px/1 Georgia, serif; color: #2a1d0c; }
.gl-markbtn { width: min(100%, 300px); }

/* ---------- корзины сигнала ---------- */
.gl-bask { display: flex; flex-direction: column; gap: 12px; }
.gl-bstage { position: relative; width: 100%; max-width: 340px; margin: 0 auto; }
.gl-bsvg { width: 100%; display: block; border-radius: 14px; }
.gl-yard { transition: transform 1s cubic-bezier(.5,0,.3,1); }
.gl-bask.up .gl-yard { transform: translateY(-78px); }
.gl-bask.drop .gl-chain > g { animation: gl-fall .9s ease-in forwards; }
@keyframes gl-fall { to { transform: translateY(260px) rotate(40deg); opacity: 0; } }
.gl-bask.drop .gl-yard { transition-duration: .5s; transform: translateY(0); }
.gl-bask.done .gl-halo { animation: gl-halo 1.2s ease-in-out infinite; }
.gl-bask.done.day .gl-chain > g { filter: drop-shadow(0 0 6px #fff3b0); }
@keyframes gl-halo { 50% { opacity: .8; r: 18px; } }
.gl-rays { transform-box: view-box; transform-origin: 270px 168px; animation: gl-spin 24s linear infinite; }
@keyframes gl-spin { to { transform: rotate(360deg); } }
.gl-bcloud { animation: gl-cloudmove 22s linear infinite; }
@keyframes gl-cloudmove { from { transform: translateX(-120px); } to { transform: translateX(320px); } }
.gl-star { fill: #fff; animation: gl-twinkle 2.4s ease-in-out infinite; }
@keyframes gl-twinkle { 50% { opacity: .25; } }
.gl-win { animation: gl-twinkle 5s ease-in-out infinite; }
.gl-hookbtn { position: absolute; top: 28%; width: 26%; height: 50%; margin-left: -13%; border: 0; border-radius: 14px; background: transparent; cursor: pointer; }
.gl-hookbtn:not(:disabled):active { background: #ffffff18; }
.gl-cnt { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); min-width: 34px; height: 34px; padding: 0 8px; border-radius: 17px; font: 700 18px/34px Georgia, serif; font-style: normal; color: #2a1d0c; background: linear-gradient(#e6c675, #b48a35); box-shadow: 0 3px 0 #7a5a1f, 0 4px 10px #0007; }
.gl-hookbtn:disabled .gl-cnt { filter: grayscale(.5) brightness(.8); }
.gl-bask .row .btn:disabled { filter: grayscale(.8) brightness(.6); }

/* ---------- часы ---------- */
.gl-clock { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.gl-csvg { width: 100%; max-width: 340px; display: block; }
.gl-gl, .gl-gr { animation: gl-stall 1.6s ease-in-out infinite; }
.gl-gr { animation-delay: -.8s; }
@keyframes gl-stall { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(4deg); } 55% { transform: rotate(-1deg); } }
.gl-gi { animation: gl-in .35s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes gl-in { from { transform: scale(.2) rotate(-90deg); opacity: 0; } }
.gl-clock.jam .gl-gi { animation: gl-jam .9s ease-in-out both; }
@keyframes gl-jam { 0% { transform: rotate(0); } 10% { transform: rotate(8deg); } 20% { transform: rotate(-6deg); } 30% { transform: rotate(7deg); } 45% { transform: rotate(-4deg); filter: drop-shadow(0 0 6px #ff4020); } 75% { transform: scale(1); opacity: 1; } 100% { transform: translateY(60px) scale(.5); opacity: 0; } }
.gl-clock.jam .gl-csvg { animation: gl-shudder .4s 2; }
.gl-clock.run .gl-gl, .gl-clock.run .gl-gr { animation: gl-turn 3s linear infinite; }
.gl-clock.run .gl-gi { animation: none; }
.gl-clock.run .gl-gspin { animation: gl-turn 2.2s linear infinite reverse; }
@keyframes gl-turn { to { transform: rotate(360deg); } }
.gl-hh, .gl-mh { transform-box: view-box; transform-origin: 150px 72px; }
.gl-mh { transform: rotate(200deg); }
.gl-hh { transform: rotate(110deg); }
.gl-clock.run .gl-mh { animation: gl-turn 2s linear infinite; }
.gl-clock.run .gl-hh { animation: gl-turn 24s linear infinite; }
.gl-clock.run .gl-axle { opacity: 0; }
.gl-tray { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; max-width: 360px; padding: 8px; border-radius: 14px; background: linear-gradient(#2a1f16, #1f1812); box-shadow: inset 0 0 0 1.5px #5a4630; }
.gl-spare { border: 0; background: radial-gradient(circle, #3a2c20, #241b13 70%); border-radius: 12px; padding: 4px; cursor: pointer; aspect-ratio: 1; transition: transform .15s, opacity .3s; }
.gl-spare svg { width: 100%; height: 100%; display: block; }
.gl-spare:not(:disabled):hover .gl-sg { transform: rotate(18deg); }
.gl-sg { transition: transform .3s; }
.gl-spare:not(:disabled):active { transform: scale(.94); }
.gl-spare.used { opacity: .15; }
.gl-spare:disabled { cursor: default; }

/* ---------- итог решённого модуля: только результат, без кнопок ---------- */
.gl-scope.done .gl-dbtn, .gl-scope.done .btn.round { visibility: hidden; }
.gl-scope.done .gl-markbtn, .gl-scope.done .gl-hint { display: none; }
.gl-scope.done .gl-dial { box-shadow: inset 0 0 0 2px #e6c675, 0 0 18px #ffd36a88; }
.gl-bask.done .row, .gl-bask.done .gl-cnt { display: none; }
.gl-bask.done .gl-hookbtn { pointer-events: none; }
.gl-clock.run .gl-tray { display: none; }
.gl-clock.run .gl-csvg { filter: drop-shadow(0 0 10px #ffd36a55); }

/* ---------- сцена победы ---------- */
.gl-scene { width: 100%; display: block; border-radius: 12px; margin: -6px 0 12px; }
.gl-tl { fill: #3a3048; animation: gl-light .6s ease-out forwards; }
@keyframes gl-light { to { fill: #ffe08a; filter: drop-shadow(0 0 4px #ffcf4a); } }
.gl-tw { fill: #1c1828; animation: gl-light .5s ease-out forwards; }
.gl-cw { opacity: 0; animation: gl-on .6s ease-out forwards; }
@keyframes gl-on { to { opacity: 1; } }
.gl-halo2 { opacity: 0; animation: gl-on 1s 1.4s ease-out forwards, gl-breath 2.4s 2.4s ease-in-out infinite; }
@keyframes gl-breath { 50% { opacity: .6; } }
.gl-beams { transform-box: view-box; transform-origin: 160px 60px; opacity: 0; animation: gl-on 1s 1.6s forwards, gl-sweep 6s 1.6s ease-in-out infinite alternate; }
@keyframes gl-sweep { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
.gl-refl { animation: gl-twinkle 1.8s ease-in-out infinite; }

@media (min-width: 900px) {
  .gl-wind-stage, .gl-bstage, .gl-csvg { max-width: 400px; }
}

/* без анимаций (настройка «уменьшить движение»): дым стоит столбом, чтобы пожар было видно */
@media (prefers-reduced-motion: reduce) {
  .gl-puff { animation: none !important; opacity: .6; }
  .gl-puff:nth-child(2) { transform: translate(3px, -14px) scale(1.4); }
  .gl-puff:nth-child(3) { transform: translate(6px, -28px) scale(1.8); }
  .gl-puff:nth-child(4) { transform: translate(9px, -42px) scale(2.2); opacity: .45; }
  .gl-puff:nth-child(5) { transform: translate(12px, -56px) scale(2.6); opacity: .35; }
  .gl-puff:nth-child(6) { transform: translate(15px, -70px) scale(3); opacity: .25; }
}