/* Глава «Тюнель»: латунь, дерево и пар у Мастера; технический паспорт 1875 года у Хранителя.
   Двигаются только transform и opacity; тяжёлых фильтров нет. */

.panel[data-type="levers"] > .pbody, .panel[data-type="gauge"] > .pbody,
.panel[data-type="bell"] > .pbody, .panel[data-type="switch"] > .pbody { position: relative; }

/* ---------- частицы: искры и пар ---------- */
.tn-spk {
  position: absolute; z-index: 8; width: 3px; height: 12px; margin: -6px 0 0 -1.5px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(#fffbe0, #ffc23a 50%, #ff6a00);
  animation: tn-spk .62s cubic-bezier(.15,.7,.3,1) both;
}
@keyframes tn-spk {
  from { opacity: 1; transform: translate(0, 0) rotate(var(--r)) scale(1); }
  to { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.35); }
}
.tn-puff {
  position: absolute; z-index: 7; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 42% 40%, #fffaf2f0, #ece6daaa 45%, #ddd6c800 70%);
  animation: tn-puff 1.3s ease-out both;
}
@keyframes tn-puff {
  from { opacity: 0; transform: translate(0, 0) scale(.3); }
  15% { opacity: .95; }
  to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(calc(var(--s) * 2.4)); }
}
@keyframes tn-jolt { 15% { transform: translate(-6px, 2px) rotate(-1.5deg); } 35% { transform: translate(5px, -2px) rotate(1deg); } 60% { transform: translate(-3px, 1px); } 80% { transform: translate(2px, 0); } }
@keyframes tn-pop { from { transform: scale(1.45); } to { transform: scale(1); } }

/* ---------- рычаги ---------- */
.tn-levers { display: flex; flex-direction: column; gap: 8px; }
.tn-lv-board {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 14px 10px 12px; border-radius: 14px;
  background:
    radial-gradient(circle at 12px 12px, #e6c675 0 3px, #7a5a1f 3.5px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 12px) 12px, #e6c675 0 3px, #7a5a1f 3.5px, transparent 4.5px),
    radial-gradient(circle at 12px calc(100% - 12px), #e6c675 0 3px, #7a5a1f 3.5px, transparent 4.5px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), #e6c675 0 3px, #7a5a1f 3.5px, transparent 4.5px),
    repeating-linear-gradient(90deg, #ffffff06 0 2px, transparent 2px 9px, #00000012 9px 11px, transparent 11px 23px),
    linear-gradient(#55402a, #34261a);
  box-shadow: inset 0 0 0 2px #6a4e30, inset 0 10px 22px #0007, 0 6px 14px #0006;
}
.tn-lv-board::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 50% 40%, #ffb04a88, #ff6a0000 70%); opacity: 0; }
.tn-lv-board.zap::after { animation: tn-zap .5s ease-out; }
@keyframes tn-zap { 10% { opacity: 1; } to { opacity: 0; } }
/* жест — только за ручку (кнопка и кольцо); с остального рычага страница прокручивается, тап работает */
.tn-lever { position: relative; height: 252px; border: 0; background: none; padding: 0; cursor: grab; touch-action: manipulation; border-radius: 12px; }
.tn-lv-knob, .tn-lv-ring { touch-action: none; }
.tn-lever:disabled { cursor: default; }
.tn-lever:focus-visible { outline: 2px solid var(--brass2); outline-offset: 2px; }
.tn-lv-slot { position: absolute; left: 50%; top: 18px; height: 164px; width: 14px; margin-left: -7px; border-radius: 7px; background: #0b0805; box-shadow: inset 0 3px 6px #000, 0 1px 0 #ffffff1a; }
.tn-lv-slot::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 6px; border-radius: 2px; background: repeating-linear-gradient(180deg, #c9a24a 0 3px, #5a4020 3px 4px, transparent 4px 12px); opacity: .8; }
.tn-lv-arm {
  position: absolute; z-index: 2; left: 50%; top: 4px; width: 52px; height: 150px; margin-left: -26px;
  transform: translateY(var(--dy, 0px)); transition: transform .52s cubic-bezier(.3,1.65,.45,1) var(--delay, 0ms); will-change: transform;
}
.tn-lever.down .tn-lv-arm { transform: translateY(96px); }
.tn-lever.drag .tn-lv-arm { transition: none; }
.tn-lv-rod { position: absolute; left: 50%; top: 30px; width: 12px; height: 112px; margin-left: -6px; border-radius: 6px; background: linear-gradient(90deg, #6d4a14, #f6dd95 38%, #c9a24a 62%, #6d4a14); box-shadow: 0 2px 4px #0008; }
.tn-lv-ring {
  position: absolute; left: 50%; top: 52px; width: 42px; height: 22px; margin-left: -21px; border-radius: 11px;
  background: linear-gradient(#ffffff80, #ffffff10 42%, #00000030 60%, #0000004d), var(--rc);
  box-shadow: 0 0 0 2px #1a120b, 0 4px 6px #0009;
}
.tn-lv-ring::after { content: ""; position: absolute; left: 6px; right: 6px; top: 3px; height: 4px; border-radius: 2px; background: #ffffff8c; }
/* знак цвета, выбитый на кольце: тень снизу, блик сверху — как штамп по эмали */
.tn-lv-ring .cmark { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.tn-lv-ring .cmark path, .tn-lv-ring .cmark circle:not([fill="none"]), .tn-lv-ring .cmark rect { paint-order: stroke; stroke-width: 1.3px; stroke: #0000004d; }
.tn-lv-ring::before { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -9px 0 0 -10px; border-radius: 50%; background: radial-gradient(#00000038, #00000000 70%); }
.tn-lv-knob {
  position: absolute; left: 50%; top: 0; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fffbe6 0 7%, #f3dc9b 17%, #c9a24a 48%, #6d501b 100%);
  box-shadow: 0 6px 10px #000a, inset 0 -4px 7px #0007;
}
.tn-lever.boing .tn-lv-knob { animation: tn-squash .55s ease-out var(--delay, 0ms); }
@keyframes tn-squash { 20% { transform: scale(1.12, .86); } 45% { transform: scale(.93, 1.08); } 70% { transform: scale(1.03, .97); } }
.tn-lv-plaque {
  position: absolute; z-index: 3; left: 2px; right: 2px; bottom: 0; height: 62px; display: grid; place-items: center; border-radius: 10px;
  background: linear-gradient(#ecd08a, #b48a35 60%, #94702a); color: #2a1d0c;
  box-shadow: inset 0 0 0 2px #7a5a1f, inset 0 2px 0 #fff8, 0 4px 8px #0008;
  transition: box-shadow .4s;
}
.tn-lv-plaque::before, .tn-lv-plaque::after { content: ""; position: absolute; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: #6d4a14; box-shadow: inset 0 1px 0 #fff6; }
.tn-lv-plaque::before { left: 6px; }
.tn-lv-plaque::after { right: 6px; }
.tn-lv-plaque .ic { width: 38px; height: 38px; stroke-width: 2; }
.tn-levers.solved .tn-lv-plaque { box-shadow: inset 0 0 0 2px #2f8a46, 0 0 0 2px #4fae61, 0 0 16px #4fae6188; }
.tn-levers.pop-in .tn-lv-plaque { animation: tn-pop .5s ease-out both; }
.tn-levers.pop-in .tn-lever:nth-child(2) .tn-lv-plaque { animation-delay: .1s; }
.tn-levers.pop-in .tn-lever:nth-child(3) .tn-lv-plaque { animation-delay: .2s; }
.tn-levers.pop-in .tn-lever:nth-child(4) .tn-lv-plaque { animation-delay: .3s; }
.tn-hint { margin: 0; text-align: center; color: var(--muted); font-size: 13px; }
.tn-levers.solved .tn-hint { visibility: hidden; }

/* ---------- манометр ---------- */
.tn-gauge { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.tn-dial-wrap { width: 100%; max-width: 300px; }
.tn-dial-wrap.jolt { animation: tn-jolt .5s; }
.tn-dial { display: block; width: 100%; }
.tn-calm { opacity: 0; transition: opacity 1.4s; }
.tn-gauge.solved .tn-calm { opacity: 1; }
.tn-boiler {
  position: relative; display: flex; align-items: center; gap: 16px; padding: 12px 22px; margin-top: 12px; border-radius: 34px / 26px;
  background:
    radial-gradient(circle, #f0b080 0 1.6px, transparent 2.2px) 0 4px / 18px 100% repeat-x,
    linear-gradient(90deg, #3a1c14, #8a4a32 28%, #b0684a 40%, #6a3424 72%, #3a1c14);
  box-shadow: inset 0 -7px 12px #0007, inset 0 3px 0 #ffffff26, 0 6px 12px #0007;
}
.tn-pipe { position: absolute; left: 22px; top: -24px; width: 14px; height: 26px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, #6d4a14, #f0d48a 45%, #8a6020); }
.tn-pipe::before { content: ""; position: absolute; left: -3px; right: -3px; top: -4px; height: 6px; border-radius: 3px; background: #c9a24a; }
.tn-pipe i { position: absolute; left: 50%; top: 0; width: 1px; height: 1px; }
.tn-plate { font: 700 32px/1 Georgia, serif; font-variant-numeric: lining-nums; color: #2a1d0c; background: linear-gradient(#f0d48a, #b48a35); border-radius: 8px; padding: 8px 18px; box-shadow: inset 0 0 0 2px #7a5a1f, inset 0 2px 0 #fff8, 0 3px 6px #0007; }
.tn-blamp { position: relative; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #4a3a2a, #1d150e); color: #6a5a48; box-shadow: inset 0 0 0 3px #7a5c34, 0 3px 6px #0007; }
.tn-blamp .ic { position: relative; z-index: 1; }
.tn-blamp.lit { background: radial-gradient(circle at 42% 38%, #fffbe6, #ffd36a 45%, #f09a20); color: #6a3a00; }
.tn-blamp.lit::after { content: ""; position: absolute; inset: -22px; border-radius: 50%; background: radial-gradient(circle, #ffc85a99, #ffb43a00 68%); animation: tn-glowpulse 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes tn-glowpulse { 50% { opacity: .55; transform: scale(.9); } }
.tn-valve-row { display: flex; align-items: center; justify-content: center; gap: 22px; }
.tn-valve { position: relative; width: 132px; height: 132px; border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; touch-action: manipulation; }
.tn-valve::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: -6px; height: 16px; border-radius: 50%; background: #0007; }
.tn-valve:disabled { cursor: default; }
.tn-valve:focus-visible { outline: 2px solid var(--brass2); outline-offset: 3px; }
.tn-valve.kick { animation: tn-press .3s ease-out; }
@keyframes tn-press { 30% { transform: scale(.93); } }
.tn-vwheel { position: relative; display: block; width: 100%; height: 100%; transition: transform 1.15s cubic-bezier(.12,.82,.25,1.05); will-change: transform; }
.tn-turns { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 92px; }
.tn-turns .lbl { color: var(--muted); font-size: 14px; }
.tn-tnum { font: 700 42px/1 Georgia, serif; font-variant-numeric: lining-nums; color: var(--brass2); display: inline-block; }
.tn-tnum.pop { animation: tn-pop .35s ease-out; }
.tn-tpips { display: flex; gap: 5px; flex-wrap: wrap; max-width: 104px; min-height: 12px; }
.tn-tpips i { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff2c0, #e6c675 50%, #a07a2a); box-shadow: 0 0 5px #e6c67588; }
.tn-tpips i:last-child { animation: tn-pop .35s ease-out; }
.tn-gauge .row { width: 100%; }

/* ---------- колокол ---------- */
.tn-bell { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tn-sig { display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; }
.tn-sig-house { position: relative; flex: none; width: 94px; height: 94px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(#3a2c20, #1a120c); box-shadow: inset 0 0 0 5px #8a6a3a, inset 0 0 0 8px #2a1e14, 0 5px 12px #0009; }
.tn-halo { position: absolute; inset: -58px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, #ffd27a90 0%, #ffb43a45 32%, #ffb43a00 66%); opacity: 0; transform: scale(.75); transition: opacity .1s, transform .16s; }
.tn-lamp { position: relative; z-index: 1; width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #6a5030, #241a10); box-shadow: inset 0 0 0 2px #00000080; }
.tn-lamp::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 42% 38%, #fffdf0, #ffd774 38%, #f2a024 78%, #c06a10); opacity: 0; transition: opacity .07s; }
.tn-lamp::before { content: ""; position: absolute; z-index: 1; left: 13px; top: 9px; width: 18px; height: 10px; border-radius: 50%; background: #ffffff55; transform: rotate(-25deg); }
.tn-sig-house.lit .tn-lamp::after { opacity: 1; }
.tn-sig-house.lit .tn-halo { opacity: 1; transform: scale(1); }
.tn-sig-house.done .tn-lamp::after { opacity: 1; background: radial-gradient(circle at 42% 38%, #f0fff2, #8ef0a2 40%, #3f9a52); }
.tn-sig-house.done .tn-halo { opacity: .6; transform: scale(.9); background: radial-gradient(circle, #8ef0a270, #8ef0a200 64%); }
.tn-sig-side { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.tn-ticks { display: flex; gap: 9px; }
.tn-ticks i { width: 14px; height: 14px; border-radius: 50%; background: #4a3b2c; box-shadow: inset 0 1px 2px #0008; transition: background-color .15s; }
.tn-ticks i.on { background: #ffcf4a; box-shadow: 0 0 7px #ffa500; }
.tn-bell.solved .tn-ticks i { background: #5ae07a; box-shadow: 0 0 7px #3f9a52; }
.tn-replay { min-height: 40px; }
.tn-bell-stage { position: relative; width: 176px; height: 158px; }
.tn-bsvg { display: block; width: 100%; height: 100%; overflow: visible; }
.tn-bswing { transform-box: view-box; transform-origin: 80px 24px; }
.tn-clap { transform-box: view-box; transform-origin: 80px 34px; }
.tn-bflash { opacity: 0; }
.tn-bell-stage.hit-s .tn-bswing { animation: tn-sws .7s ease-out; }
.tn-bell-stage.hit-s .tn-clap { animation: tn-cls .7s ease-out; }
.tn-bell-stage.hit-s .tn-bflash { animation: tn-bf .3s ease-out; }
.tn-bell-stage.hit-l .tn-bswing { animation: tn-swl 1.9s ease-out; }
.tn-bell-stage.hit-l .tn-clap { animation: tn-cll 1.9s ease-out; }
.tn-bell-stage.hit-l .tn-bflash { animation: tn-bf 1.1s ease-out; }
@keyframes tn-sws { 18% { transform: rotate(-8deg); } 45% { transform: rotate(5deg); } 72% { transform: rotate(-2deg); } }
@keyframes tn-cls { 14% { transform: rotate(13deg); } 30% { transform: rotate(-5deg); } 60% { transform: rotate(3deg); } }
@keyframes tn-swl { 12% { transform: rotate(-17deg); } 30% { transform: rotate(13deg); } 48% { transform: rotate(-9deg); } 66% { transform: rotate(6deg); } 84% { transform: rotate(-2.5deg); } }
@keyframes tn-cll { 9% { transform: rotate(24deg); } 22% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(2deg); } }
@keyframes tn-bf { from { opacity: .6; } to { opacity: 0; } }
.tn-waves { position: absolute; left: 50%; top: 64%; width: 0; height: 0; pointer-events: none; }
.tn-waves i { position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%; border: 2px solid #ffd77a; opacity: 0; }
.tn-bell-stage.hit-s .tn-waves i:first-child { animation: tn-wave .6s ease-out; }
.tn-bell-stage.hit-l .tn-waves i { border-width: 3.5px; animation: tn-wave 1.5s ease-out; }
.tn-bell-stage.hit-l .tn-waves i:nth-child(2) { animation-delay: .28s; }
.tn-bell-stage.hit-l .tn-waves i:nth-child(3) { animation-delay: .56s; }
@keyframes tn-wave { from { opacity: .85; transform: scale(.45); } to { opacity: 0; transform: scale(1.65); } }
.tn-bslots { display: flex; gap: 8px; }
.tn-bslot { width: 56px; height: 42px; border-radius: 10px; display: grid; place-items: center; color: var(--brass2); background: #1f1812; box-shadow: inset 0 0 0 1.5px #5a4630, inset 0 3px 6px #0008; }
.tn-bslot.on { background: #33281b; box-shadow: inset 0 0 0 1.5px #a07a3a, 0 0 10px #e6c67533; }
.tn-bslot.pop { animation: tn-pop .3s ease-out; }
.tn-bslot.bad { color: #ffb0a4; box-shadow: inset 0 0 0 2px #d4463b, 0 0 12px #d4463b66; animation: tn-jolt .45s; }
.tn-bslot.good { color: #c8ffd2; box-shadow: inset 0 0 0 2px #4fae61, 0 0 12px #4fae6166; }
.tn-bslot .pulses i { height: 10px; }
.tn-bslot .ps { width: 10px; }
.tn-bslot .pl { width: 30px; }
.tn-strike { flex-direction: column; gap: 6px; min-height: 80px; }
.tn-strike .pulses i { height: 12px; }
.tn-strike .ps { width: 12px; }
.tn-strike .pl { width: 38px; }

/* ---------- стрелочный перевод ---------- */
.tn-switch { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tn-splate { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 12px; background: linear-gradient(#5a4430, #3c2d20); box-shadow: inset 0 0 0 2px #7a5c34, 0 4px 8px #0006; color: var(--brass2); }
.tn-splate .lbl { font-size: 13px; color: var(--muted); }
.slamp { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; vertical-align: middle; }
.slamp .cmark { width: 62%; height: 62%; }
.slamp.sm { width: 20px; height: 20px; }
.tn-sh { display: inline-flex; align-items: center; gap: 6px; }
.slamp.white { background: radial-gradient(#fff, #d8d2c4); box-shadow: 0 0 10px #fff8, inset 0 0 0 1.5px #0004; }
.slamp.black { background: radial-gradient(#4a4440, #111); box-shadow: inset 0 0 0 1.5px #ffffff40; }
.tn-sdots { display: flex; gap: 5px; }
.tn-sdots i { width: 12px; height: 12px; border-radius: 50%; background: var(--brass2); box-shadow: 0 0 5px #e6c67588; }
.tn-track { width: 100%; max-width: 360px; }
.tn-track.jolt { animation: tn-jolt .5s; }
.tn-rails { display: block; width: 100%; border-radius: 10px; }
.tn-blade { transform-box: view-box; transform-origin: 70px 65px; transition: transform .6s cubic-bezier(.3,1.6,.5,1) .12s; }
.tn-switch.solved .tn-blade { transform: rotate(-6deg); }
.tn-route { opacity: 0; transition: opacity .6s .5s; }
.tn-switch.solved .tn-route { opacity: .85; }
.tn-sw-red { fill: #e2483a; transition: fill .3s .4s; }
.tn-sw-green { fill: #1c2a1e; transition: fill .3s .4s; }
.tn-switch.solved .tn-sw-red { fill: #3a1a14; }
.tn-switch.solved .tn-sw-green { fill: #5ae07a; }
.tn-sw-mech { display: flex; align-items: center; justify-content: center; gap: 20px; width: 100%; }
.tn-wheel-wrap { flex: 0 1 220px; min-width: 0; }
.tn-swheel { display: block; width: 100%; touch-action: none; cursor: grab; }
.tn-dragging .tn-swheel { cursor: grabbing; }
.tn-switch.solved .tn-swheel { cursor: default; }
.tn-rot { transform-box: view-box; transform-origin: 50px 50px; transition: transform .55s cubic-bezier(.25,1.5,.5,1); }
.tn-up { transform-box: view-box; transition: transform .55s cubic-bezier(.25,1.5,.5,1); }
.tn-dragging .tn-rot, .tn-dragging .tn-up, .tn-noanim .tn-rot, .tn-noanim .tn-up, .tn-noanim .tn-harm { transition: none !important; }
.tn-handle { position: relative; flex: none; width: 64px; height: 170px; margin-right: 26px; }
.tn-handle::before { content: ""; position: absolute; left: -14px; right: -14px; bottom: 26px; height: 46px; border-radius: 46px 46px 0 0; border: 6px solid #5a4430; border-bottom: 0; }
.tn-hbase { position: absolute; z-index: 2; left: 50%; bottom: 8px; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #f6dd95, #b8892f 55%, #6d4a14); box-shadow: 0 4px 8px #0009; }
.tn-harm {
  position: absolute; z-index: 1; left: 50%; bottom: 28px; width: 12px; height: 118px; margin-left: -6px; border-radius: 6px; transform-origin: 50% 100%;
  background: linear-gradient(90deg, #6d4a14, #f6dd95 40%, #c9a24a 60%, #6d4a14); transform: rotate(-26deg);
  transition: transform .5s cubic-bezier(.3,1.6,.5,1);
}
.tn-handle.down .tn-harm { transform: rotate(26deg); }
.tn-hknob { position: absolute; left: 50%; top: -14px; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd0c0 0 8%, #e2584a 30%, #8a241a); box-shadow: 0 4px 8px #0009; }
.tn-handle.boing .tn-hknob { animation: tn-squash .55s ease-out; }
.tn-pull { width: 100%; }
.tn-switch .row { width: 100%; }
.tn-switch .row > .tn-rotb { flex: 0 1 120px; min-width: 88px; border-radius: 32px; }

/* ---------- Хранитель: паспорт механизма ---------- */
.as-keeper .panel[data-type="levers"] > .pbody, .as-keeper .panel[data-type="gauge"] > .pbody,
.as-keeper .panel[data-type="bell"] > .pbody, .as-keeper .panel[data-type="switch"] > .pbody {
  padding: 0; background: none; border: 0; box-shadow: none;
}
.tn-page {
  position: relative; overflow: hidden; padding: 20px 20px 14px; border-radius: 6px; color: #3a2a1a; font-variant-numeric: lining-nums;
  background:
    repeating-linear-gradient(0deg, #7a502808 0 1px, transparent 1px 4px),
    radial-gradient(ellipse 120% 90% at 50% 38%, #f8eed7 0%, #f0e2c2 62%, #e0c99c 100%);
  box-shadow: 0 0 0 1px #b89a68, 0 10px 24px #0007;
}
.tn-page::before { content: ""; position: absolute; inset: 8px; border: 3px double #8a6a3e; border-radius: 3px; pointer-events: none; }
.tn-page::after {
  content: ""; position: absolute; inset: 4px; pointer-events: none;
  background:
    radial-gradient(circle at 4px 4px, #8a6a3e 0 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 4px) 4px, #8a6a3e 0 3px, transparent 3.5px),
    radial-gradient(circle at 4px calc(100% - 4px), #8a6a3e 0 3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), #8a6a3e 0 3px, transparent 3.5px);
}
.tn-ph { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 2px 4px 7px; border-bottom: 1px solid #a88a5a; font: italic 12px/1.3 Georgia, serif; color: #6a4a2a; letter-spacing: .02em; }
.tn-ph::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; border-bottom: 1px solid #a88a5a66; }
.tn-pt { flex: 1; }
.tn-sheet { flex: none; font-style: normal; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
.tn-fig { margin: 12px 4px 10px; padding: 8px 6px 4px; border: 1px solid #b89a6a; background: #fbf4e266; }
.tn-fig svg { display: block; width: 100%; max-width: 330px; height: auto; margin: 0 auto; }
.tn-fig figcaption { text-align: center; font: italic 12px Georgia, serif; color: #6a4a2a; margin-top: 2px; }
.tn-pbody { position: relative; padding: 0 4px; }
.tn-pbody p { margin: 0 0 12px; }
.tn-pbody .lead { font-weight: 600; }
.tn-page .tbl th { background: #e6d3ac; }
.tn-page .tbl th, .tn-page .tbl td { border-color: #a88a5a; }
.tn-page .myflag { background: #fff8e8aa; }
.tn-pf { display: flex; align-items: center; gap: 10px; margin-top: 4px; font: 700 13px Georgia, serif; color: #6a4a2a; }
.tn-pf i { flex: 1; height: 0; border-top: 1px solid #a88a5a; }
.tn-stamp { position: absolute; right: 18px; bottom: 26px; width: 104px; height: 104px; color: #2b8a45; opacity: 0; transform: rotate(-14deg); pointer-events: none; mix-blend-mode: multiply; }
.tn-stamp svg { display: block; width: 100%; height: 100%; }
.tn-page.stamped .tn-stamp { opacity: .8; }
.tn-page.stamp-in .tn-stamp { animation: tn-stamp .6s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes tn-stamp { from { opacity: 0; transform: rotate(-32deg) scale(2.3); } 55% { opacity: .95; transform: rotate(-12deg) scale(.9); } to { opacity: .8; transform: rotate(-14deg) scale(1); } }
.tn-page.tremble { animation: tn-tremble .5s; }
@keyframes tn-tremble { 12% { transform: translate(-4px, 1px) rotate(-.8deg); } 30% { transform: translate(4px, -1px) rotate(.6deg); } 52% { transform: translate(-2px, 0) rotate(-.3deg); } 75% { transform: translate(1px, 0); } }
.tn-scorch { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 30%, #ff8a3a40, #ff6a0000 70%); opacity: 0; }
.tn-page.singe .tn-scorch { animation: tn-zap .6s ease-out; }
.tn-wave .ic { transform-origin: 20% 50%; animation: tn-flag 2.6s ease-in-out infinite; }
@keyframes tn-flag { 50% { transform: skewY(-5deg) scaleX(.94); } }

/* ---------- сцена победы ---------- */
.tn-win { margin: -6px -4px 14px; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px #5a4630, 0 6px 16px #0008; }
.tn-win svg { display: block; width: 100%; height: auto; }
.tn-car { animation: tn-car 5.5s cubic-bezier(.55,0,.3,1) .5s both; }
@keyframes tn-car { from { transform: translateX(0); } to { transform: translateX(196px); } }
.tn-wl { animation: tn-wl 2.6s ease-in-out infinite; }
@keyframes tn-wl { 50% { opacity: .6; } }
.tn-wsteam circle { fill: #ece4d6; opacity: 0; transform-box: fill-box; transform-origin: center; animation: tn-ws 2.8s ease-out infinite; }
.tn-wsteam circle:nth-child(2) { animation-delay: .7s; }
.tn-wsteam circle:nth-child(3) { animation-delay: 1.4s; }
.tn-wsteam circle:nth-child(4) { animation-delay: 2.1s; }
@keyframes tn-ws { from { opacity: 0; transform: translate(0, 0) scale(.4); } 20% { opacity: .75; } to { opacity: 0; transform: translate(16px, -64px) scale(2.3); } }

/* ---------- знаки цвета (цвет никогда не единственный признак) ---------- */
.tn-zmark { pointer-events: none; }
.tn-zmark path, .tn-zmark circle:not([fill="none"]), .tn-zmark rect { paint-order: stroke; stroke-width: 1.4px; stroke: #00000040; }
.tn-sw-rm { transition: opacity .3s .4s; }
.tn-sw-gm { opacity: 0; transition: opacity .3s .4s; }
.tn-switch.solved .tn-sw-rm { opacity: 0; }
.tn-switch.solved .tn-sw-gm { opacity: 1; }
.tn-lamp .cmark { position: absolute; z-index: 2; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; opacity: 0; transition: opacity .3s; }
.tn-sig-house.done .tn-lamp .cmark { opacity: 1; }
.tn-flag { overflow: visible; }
.tn-page .tbl.bells th .flag .ic { width: 38px; height: 38px; }
.tn-page .flag.big .ic { width: 52px; height: 52px; }
.tn-bslot { position: relative; }
.tn-bslot.good::after, .tn-bslot.bad::after {
  position: absolute; right: -6px; top: -7px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font: 700 12px/1 system-ui, sans-serif; color: #fff; box-shadow: 0 0 0 2px #1f1812;
}
.tn-bslot.good::after { content: "✓"; background: #3f9a52; }
.tn-bslot.bad::after { content: "✕"; background: #d4463b; }

/* ---------- огонёк «готово»: зелёное стекло со знаком ◆, один на всех модулях ---------- */
.tn-pilot {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #3a4a3a, #141a14); box-shadow: inset 0 0 0 2.5px #8a6a3a, 0 2px 4px #0008;
  transition: background .4s;
}
.tn-pilot .cmark { width: 13px; height: 13px; opacity: .25; transition: opacity .4s; }
.tn-pilot::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(circle, #7dffa070, #7dffa000 66%); opacity: 0; transition: opacity .5s; pointer-events: none; }
.solved .tn-pilot { background: radial-gradient(circle at 40% 35%, #e6ffe9, #6fe08a 45%, #2f8a46); }
.solved .tn-pilot .cmark { opacity: 1; }
.solved .tn-pilot::after { opacity: 1; }

/* ---------- решённый модуль: механизм зафиксирован, управление убрано ---------- */
.tn-ctl { display: grid; grid-template-rows: 1fr; width: 100%; transition: grid-template-rows .45s ease .35s, opacity .3s ease .35s; }
.tn-ctl > div { min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.solved > .tn-ctl > div { overflow: hidden; }
.solved > .tn-ctl { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }
.tn-ctl .row { width: 100%; }
.tn-bell.solved, .tn-switch.solved, .tn-gauge.solved { gap: 6px; }
/* рычаги: засов ложится поперёк опущенных ручек, на конце горит огонёк */
.tn-lv-lock { position: absolute; z-index: 4; left: 8px; right: 8px; top: 110px; height: 0; pointer-events: none; }
.tn-lv-lock i {
  position: absolute; left: 0; right: 22px; top: -7px; height: 14px; border-radius: 7px;
  background: linear-gradient(#f6dd95, #c9a24a 45%, #7a5418); box-shadow: 0 3px 6px #000a, inset 0 0 0 1px #5a3c10;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s cubic-bezier(.3,1.3,.5,1) .5s;
}
.tn-lv-lock .tn-pilot { position: absolute; right: 0; top: -15px; }
.tn-levers.solved .tn-lv-lock i { transform: scaleX(1); }
.tn-levers .tn-lv-lock { opacity: 0; transition: opacity .2s .45s; }
.tn-levers.solved .tn-lv-lock { opacity: 1; }
.tn-levers.solved .tn-lever { cursor: default; }
.tn-levers.solved .tn-hint { display: none; }
/* манометр: вентиль закрыт стопорной планкой, обороты сменяет огонёк */
.tn-vlock {
  position: absolute; z-index: 2; left: 50%; top: 50%; width: 92%; height: 14px; margin: -7px 0 0 -46%; border-radius: 7px;
  background: linear-gradient(#f6dd95, #c9a24a 45%, #7a5418); box-shadow: 0 3px 6px #000a, inset 0 0 0 1px #5a3c10;
  transform: rotate(-35deg) scaleX(0); transition: transform .5s cubic-bezier(.3,1.3,.5,1) .5s; pointer-events: none;
}
.tn-gauge.solved .tn-vlock { transform: rotate(-35deg) scaleX(1); }
.tn-gpilot { display: none; width: 40px; height: 40px; }
.tn-gpilot .cmark { width: 17px; height: 17px; }
.tn-gauge.solved .tn-turns { display: none; }
.tn-gauge.solved .tn-gpilot { display: inline-grid; }
/* колокол замер: без качания, лампа ровно горит зелёным со знаком */
.tn-bell.solved .tn-bswing, .tn-bell.solved .tn-clap, .tn-bell.solved .tn-waves i { animation: none !important; }
.tn-bell.solved .tn-bslots:not(:has(.on)) { display: none; }
.tn-bell.solved .tn-replay { display: none; }
/* стрелка: колесо и рукоять стоят, путь подсвечен */
.tn-switch.solved .tn-hknob { background: radial-gradient(circle at 35% 30%, #e6ffe9 0 8%, #6fe08a 30%, #2f8a46); }

@media (min-width: 900px) {
  .tn-lever { height: 262px; }
}
@media (max-width: 360px) {
  .tn-valve { width: 116px; height: 116px; }
  .tn-handle { width: 54px; }
}
/* меньше движения: без бесконечных анимаций; искры и пар — коротко и мало */
@media (prefers-reduced-motion: reduce) {
  .tn-wl, .tn-wsteam circle, .tn-blamp.lit::after, .tn-wave .ic { animation: none !important; }
  .tn-car { animation: none !important; transform: translateX(196px); }
  .tn-wsteam circle:nth-child(1) { opacity: .4; transform: translate(6px, -22px) scale(1.2); }
  .tn-wsteam circle:nth-child(2) { opacity: .25; transform: translate(12px, -44px) scale(1.8); }
}

/* ---------- стиль А: фотореалистичная панель рычагов (static/img/mod/tn_levers_bg.webp) ----------
   В картинке четыре паза с центрами на 20, 40, 60 и 80 % ширины; пазы идут от 23 до 77 % высоты. */
.tn-lv-board {
  container-type: size; aspect-ratio: 1; padding: 0 10%; gap: 0;
  background: #1a120b url(/static/img/mod/tn_levers_bg.webp) center / cover no-repeat;
  box-shadow: 0 10px 26px #000a, inset 0 0 0 1px #00000080;
}
.tn-lv-board .tn-lever { height: 100%; }
.tn-lv-board .tn-lv-slot { display: none; }
.tn-lv-board .tn-lv-arm { top: calc(23cqh - 26px); height: 46cqh; }
.tn-lv-board .tn-lv-rod { top: 30px; height: calc(46cqh - 24px); }
.tn-lever.down .tn-lv-arm { transform: translateY(30cqh); }
.tn-lv-board .tn-lv-plaque {
  left: 8%; right: 8%; bottom: 3cqh; height: 15cqh; min-height: 46px;
  background: linear-gradient(#d9bb72, #9b742c 60%, #6e5020); box-shadow: inset 0 0 0 2px #4a3410, inset 0 2px 0 #fff6, 0 4px 10px #000c;
}
.tn-lv-board .tn-lv-plaque .ic { width: 62%; height: 62%; }
.tn-lv-board::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% 0%, #ffd49a22, transparent 60%); }