/* Аварийная смена — станция «Кран». Подключать после emergency-shift.css: перекрывает прежнее оформление
   крана, размеры элементов, по которым shift.js считает геометрию, сохранены. */

.cf-crane { --cf-ink: #10141C; --cf-steel: #2A3142; --cf-blue: #6A90FF; --cf-pale: #E4EBFF; --cf-bad: #E05252; --cf-ok: #2FA564; }

/* Цех: светлая стена и линия пола под платформами (без колонн по краям). */
.cf-hall { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(transparent calc(100% - 1.1rem), rgba(104,137,255,.08) calc(100% - 1.1rem)); }

/* Балка: ферма — тёмный пояс с решёткой раскосов и светлым рельсом сверху. */
.cf-crane .crane-beam { z-index: 1; height: 1rem; border-radius: .3rem; background: var(--cf-ink); box-shadow: 0 .3rem .6rem rgba(16,20,28,.12); }
.cf-crane .crane-beam::before { top: -2px; left: 0; right: 0; height: 3px; border-radius: 2px; background: #8D96A8; }
.cf-truss { position: absolute; inset: 3px .5rem; border-radius: 2px; background:
    repeating-linear-gradient(60deg, transparent 0 7px, rgba(157,184,255,.55) 7px 8.5px, transparent 8.5px 14px),
    repeating-linear-gradient(-60deg, transparent 0 7px, rgba(157,184,255,.55) 7px 8.5px, transparent 8.5px 14px); opacity: .8; }

/* Каретка: корпус с барабаном, колёса на рельсе, маячок мигает, пока каретка едет. */
.cf-crane .crane-trolley { z-index: 3; height: 1.25rem; border-radius: .35rem .35rem .45rem .45rem; background: linear-gradient(#7FA0FF, #5A7EF0); box-shadow: inset 0 -3px 0 rgba(16,20,28,.18), 0 .3rem .6rem rgba(104,137,255,.3); }
/* Без белых кружков: колёса, кольцо барабана, кольцо крюка и груза скрыты. */
.cf-crane .crane-trolley i { display: none; }
.cf-drum { position: absolute; left: 50%; top: 50%; width: 1.3rem; height: .5rem; margin: -.25rem 0 0 -.65rem; border-radius: .25rem; background: repeating-linear-gradient(90deg, #10141C 0 2px, #3A4256 2px 3.5px); }
.cf-beacon { position: absolute; right: .3rem; top: .22rem; width: .42rem; height: .42rem; border-radius: 50%; background: #FFD36B; opacity: .35; transition: opacity .3s; }
.crane-trolley.is-moving .cf-beacon { opacity: 1; animation: cf-beacon .5s steps(2) infinite; box-shadow: 0 0 .5rem #FFD36B; }
@keyframes cf-beacon { 50% { opacity: .25; box-shadow: none; } }

/* Трос — витой, двухцветный; обойма — блок со шкивом, под ней крюк. */
.cf-crane .crane-cable { z-index: 2; left: -1.5px; width: 3px; background: repeating-linear-gradient(-45deg, #10141C 0 2px, #5A6378 2px 4px); }
.cf-crane .crane-hook { bottom: -.95rem; width: 1rem; height: .62rem; margin-left: -.5rem; border-color: transparent; }
.cf-block { position: absolute; left: 50%; top: -.75rem; width: 1.05rem; height: .78rem; margin-left: -.525rem; border-radius: .25rem; background: var(--cf-ink); box-shadow: inset 0 0 0 2px #3A4256; }
.cf-block::after { content: ''; position: absolute; left: 50%; top: 50%; width: .32rem; height: .32rem; margin: -.16rem 0 0 -.16rem; border-radius: .08rem; background: var(--cf-blue); }
.cf-crane .crane-hook.is-open { rotate: 34deg; translate: .2rem -.1rem; }

/* Груз: стропы от крюка к углам ящика, ящик с синими уголками и рёбрами жёсткости. */
.cf-crane .crane-load { padding-top: 1.3rem; }
.cf-slings { position: absolute; left: 10%; top: .2rem; width: 80%; height: 1.15rem; overflow: visible; }
.cf-slings path { fill: none; stroke: #3A4256; stroke-width: 1.8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cf-crane .crane-box { border: 1.5px solid #C9D3F5; border-radius: .55rem; background: linear-gradient(#FFFFFF, #F3F6FF); box-shadow: 0 .45rem 1rem rgba(16,20,28,.12), inset 0 -3px 0 #E4EBFF; }
.cf-crane .crane-box::before { display: none; }
.cf-crane .crane-box::after { display: none; }
.cf-corners { position: absolute; inset: 3px; pointer-events: none; border-radius: .4rem; background:
    linear-gradient(var(--cf-blue), var(--cf-blue)) 0 0 / .55rem 2px, linear-gradient(var(--cf-blue), var(--cf-blue)) 0 0 / 2px .55rem,
    linear-gradient(var(--cf-blue), var(--cf-blue)) 100% 0 / .55rem 2px, linear-gradient(var(--cf-blue), var(--cf-blue)) 100% 0 / 2px .55rem,
    linear-gradient(var(--cf-blue), var(--cf-blue)) 0 100% / .55rem 2px, linear-gradient(var(--cf-blue), var(--cf-blue)) 0 100% / 2px .55rem,
    linear-gradient(var(--cf-blue), var(--cf-blue)) 100% 100% / .55rem 2px, linear-gradient(var(--cf-blue), var(--cf-blue)) 100% 100% / 2px .55rem;
  background-repeat: no-repeat; }
.cf-crane .crane-box b { position: relative; }


/* Платформы: настил — двустворчатый люк в предупредительную штриховку, табличка, опоры, лампа. */
.cf-crane .crane-platform { height: 4.4rem; }
.cf-crane .crane-hatch { height: .75rem; overflow: visible; background: #2A3142; border-radius: .35rem; transition: background-color .3s ease; }
/* Открытый люк — без чёрного: проём мягкий светло-красный, в тон табличке неверной платформы. */
.cf-crane .crane-platform.is-open .crane-hatch { background: #FFE3E8; }
.cf-crane .crane-hatch i { position: relative; z-index: 1; background: repeating-linear-gradient(-45deg, #2A3142 0 6px, #6A90FF 6px 12px); background-size: 200% 100%; box-shadow: inset 0 -2px 0 rgba(16,20,28,.35); transition: rotate .42s cubic-bezier(.34,1.35,.64,1), background-color .2s; }
/* Узор растянут на ширину всего люка: левая створка показывает левую половину, правая — правую, полосы сплошные. */
.cf-crane .crane-hatch i:first-child { transform-origin: 0 50%; background-position: 0 0; }
.cf-crane .crane-hatch i:last-child { transform-origin: 100% 50%; background-position: 100% 0; }
/* Люк: створки распахиваются вниз на петлях, под ними видна тёмная шахта. */
.cf-crane .crane-platform.is-open .crane-hatch i { scale: 1; }
.cf-crane .crane-platform.is-open .crane-hatch i:first-child { rotate: 72deg; }
.cf-crane .crane-platform.is-open .crane-hatch i:last-child { rotate: -72deg; }
.cf-pit { position: absolute; left: .4rem; right: .4rem; top: .75rem; z-index: 2; height: 0; border-radius: 0 0 .4rem .4rem; background: linear-gradient(rgba(224,82,104,.32), rgba(224,82,104,0)); transition: height .3s ease .08s; }
.cf-crane .crane-platform.is-open .cf-pit { height: 1.1rem; }
.cf-crane .crane-platform strong { border-radius: 0 0 .75rem .75rem; background: linear-gradient(#EEF2FF, #DCE5FF); box-shadow: inset 0 -3px 0 #C9D6FF; }
.cf-crane .crane-platform.is-target strong { background: linear-gradient(#DCE5FF, #C6D5FF); }
.cf-crane .crane-platform.is-target .crane-hatch i { background-image: repeating-linear-gradient(-45deg, #2A3142 0 6px, #8FB0FF 6px 12px); }
.cf-crane .crane-platform.is-answer strong { background: linear-gradient(#7FA0FF, #5A7EF0); color: #FCFDFF; box-shadow: inset 0 -3px 0 #4767D9; }
.cf-crane .crane-platform.is-wrong strong { background: linear-gradient(#FFF1F3, #FFE0E5); color: #B42323; box-shadow: inset 0 -3px 0 #F3B7C0; }
.cf-legs { position: absolute; left: 22%; right: 22%; bottom: -.55rem; height: .55rem; z-index: 0; background: linear-gradient(90deg, #3A4256 0 .3rem, transparent .3rem calc(100% - .3rem), #3A4256 calc(100% - .3rem)); }
.cf-lamp { position: absolute; right: .7rem; bottom: .45rem; z-index: 2; width: .42rem; height: .42rem; border-radius: 50%; background: #C9D3F5; transition: background-color .25s, box-shadow .25s; }
.cf-crane .crane-platform.is-landed .cf-lamp { background: var(--cf-ok); box-shadow: 0 0 .5rem rgba(47,165,100,.8); }
.cf-crane .crane-platform.is-wrong .cf-lamp { background: var(--cf-bad); box-shadow: 0 0 .5rem rgba(224,82,82,.8); animation: cf-beacon .32s steps(2) infinite; }
.cf-crane .crane-platforms { bottom: 1.15rem; }

.cf-dust { position: absolute; left: 0; top: 0; z-index: 4; width: .7rem; height: .7rem; margin: -.35rem 0 0 -.35rem; border-radius: 50%; pointer-events: none; filter: blur(.5px); }

@media (prefers-reduced-motion: reduce) {
  .cf-crane *, .cf-crane *::before, .cf-crane *::after { animation: none !important; transition: none !important; }
}