.mission-stage{display:grid;gap:14px;margin-top:18px}.mission-stage.is-complete .mission-interaction{box-shadow:0 0 0 1px rgba(89,223,173,.34),0 24px 64px rgba(0,0,0,.24)}.mission-context{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.mission-context span{padding:7px 10px;border:1px solid rgba(120,216,255,.28);border-radius:999px;background:rgba(65,181,231,.09);color:#82ddff;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.mission-context strong{color:rgba(235,243,252,.68);font-size:.78rem;font-weight:650}.mission-audience-cue{position:relative;margin:0;padding:12px 14px 12px 42px;border:1px solid rgba(255,205,112,.19);border-radius:14px;background:linear-gradient(135deg,rgba(255,196,86,.10),rgba(255,255,255,.025));color:#e7edf5;font-size:.88rem;line-height:1.55}.mission-audience-cue:before{content:'↳';position:absolute;left:15px;top:11px;color:#ffd071;font-size:1.1rem}.mission-interaction{overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:linear-gradient(160deg,rgba(20,31,48,.96),rgba(8,15,26,.98));box-shadow:0 20px 50px rgba(0,0,0,.25);transition:.3s ease}.mission-validation{min-height:22px;margin:0;padding:0 2px;color:rgba(225,235,245,.58);font-size:.8rem;line-height:1.45}.mission-validation[data-tone="success"]{color:#76e3b8}.mission-validation[data-tone="retry"]{color:#ffd071}.mission-check,.draw-actions button,.rhythm-actions button,.order-actions button,.photo-actions button,.photo-input{appearance:none;min-height:45px;border:1px solid rgba(107,209,249,.27);border-radius:13px;background:rgba(81,189,234,.09);color:#dff7ff;font:inherit;font-size:.84rem;font-weight:750;cursor:pointer;transition:.2s ease}.mission-check{display:block;width:calc(100% - 28px);margin:14px;padding:0 16px;background:linear-gradient(135deg,#45bce9,#6e86ff);border-color:transparent;color:#06101b;box-shadow:0 10px 28px rgba(63,170,231,.22)}.mission-check:hover,.draw-actions button:hover,.rhythm-actions button:hover,.order-actions button:hover,.photo-actions button:hover,.photo-input:hover{transform:translateY(-1px);filter:brightness(1.08)}

.mission-visual,.draw-wrap,.light-lab,.photo-preview{position:relative;min-height:300px;background-position:center;background-size:cover}.mission-visual:after,.draw-wrap:after,.light-lab:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(3,8,17,.65))}.hotspot-wrap,.align-wrap{position:relative;overflow:hidden}.hotspot-wrap p{position:absolute;z-index:2;left:16px;bottom:12px;margin:0;padding:7px 10px;border-radius:10px;background:rgba(3,8,17,.72);color:#fff;font-size:.76rem;backdrop-filter:blur(10px)}.hotspot-pin,.align-token,.photo-sticker{position:absolute;z-index:4;left:22%;top:28%;display:grid;place-items:center;width:58px;height:58px;border:1px solid rgba(255,255,255,.65);border-radius:50%;background:radial-gradient(circle,#fff4b2 0 12%,#ffc95c 13% 26%,rgba(255,185,56,.16) 27% 66%,transparent 67%);color:#fff3bd;font-size:1.6rem;text-shadow:0 0 16px #ffb12f;box-shadow:0 0 32px rgba(255,184,47,.55);cursor:grab;touch-action:none}.hotspot-pin{opacity:0;pointer-events:none;transform:translate(-50%,-50%);transition:opacity .2s}.hotspot-pin.is-visible{opacity:1}.align-token:active,.photo-sticker:active{cursor:grabbing}.mission-range{display:grid;grid-template-columns:max-content 1fr;gap:14px;align-items:center;padding:14px 16px 0;color:#d9e6f3;font-size:.8rem}.mission-range input{width:100%;accent-color:#65d9ff}

.switch-board{padding:14px}.switch-board-top{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px;border:1px solid rgba(104,226,255,.16);border-radius:12px;background:#07111e;color:#72dfff;font:700 .66rem/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;text-align:center}.switch-board-top i{width:8px;height:8px;border-radius:50%;background:#57d8ff;box-shadow:0 0 12px #57d8ff}.switch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}.toggle-switch{display:grid;grid-template-columns:20px 1fr max-content;align-items:center;gap:10px;min-height:62px;padding:10px 12px;border:1px solid rgba(255,255,255,.10);border-radius:14px;background:linear-gradient(180deg,#142136,#0c1626);color:#dce8f4;text-align:left;cursor:pointer}.toggle-switch b{font-size:.82rem}.toggle-switch small{color:#71839a;font:800 .68rem ui-monospace,SFMono-Regular,Consolas,monospace}.toggle-lamp{width:13px;height:13px;border:2px solid #607087;border-radius:50%;background:#263548}.toggle-switch.is-on{border-color:rgba(103,230,174,.38);background:linear-gradient(180deg,rgba(26,78,66,.7),#0c1b20)}.toggle-switch.is-on .toggle-lamp{border-color:#82edbd;background:#4dde9b;box-shadow:0 0 14px #4dde9b}.toggle-switch.is-on small{color:#79e6b5}

.draw-wrap{min-height:0}.draw-canvas{position:relative;z-index:2;display:block;width:100%;height:auto;aspect-ratio:8/5;touch-action:none}.draw-actions{position:relative;z-index:3;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;background:rgba(4,10,19,.86)}.draw-actions .mission-check{grid-column:1/-1;width:100%;margin:0}.draw-actions button{padding:0 10px}

.light-lab{overflow:hidden}.light-beam{position:absolute;z-index:2;left:50%;top:0;width:var(--beam,65%);height:100%;transform:translateX(-50%);opacity:var(--bright,.5);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);background:hsl(calc(205 - var(--warm,50)*1.55) 100% 76% / .72);filter:blur(7px);mix-blend-mode:screen}.mixer-controls{display:grid;gap:10px;padding:14px}.mixer-controls label{display:grid;grid-template-columns:100px 1fr 30px;align-items:center;gap:10px;color:#dce7f4;font-size:.8rem}.mixer-controls input{width:100%;accent-color:#67dfff}.mixer-controls output{color:#81defe;font:700 .75rem ui-monospace,SFMono-Regular,Consolas,monospace;text-align:right}

.palette-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px}.color-chip{position:relative;display:grid;gap:7px;padding:8px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.035);color:#cbd8e6;cursor:pointer}.color-chip span{display:block;aspect-ratio:1.35;border-radius:10px;background:var(--chip);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 8px 22px color-mix(in srgb,var(--chip),transparent 72%)}.color-chip small{font:700 .65rem ui-monospace,SFMono-Regular,Consolas,monospace}.color-chip.is-active{border-color:#fff;transform:translateY(-2px);box-shadow:0 0 0 2px rgba(107,221,255,.33)}

.rhythm-reference{display:flex;align-items:end;justify-content:center;gap:10px;min-height:180px;padding:24px;background:radial-gradient(circle at 50% 100%,rgba(74,181,232,.14),transparent 64%)}.rhythm-reference i{display:block;width:34px;height:calc(34px + var(--length)*42px);border:1px solid rgba(124,222,255,.32);border-radius:17px 17px 7px 7px;background:linear-gradient(180deg,rgba(107,224,255,.82),rgba(91,103,230,.28));box-shadow:0 0 24px rgba(74,200,246,.14);transition:.18s ease}.rhythm-reference i.is-playing{background:linear-gradient(180deg,#fff2a8,#ffae3f);box-shadow:0 0 30px rgba(255,181,60,.72);transform:translateY(-8px)}.rhythm-actions{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:8px;padding:0 14px}.rhythm-actions button{padding:0 8px}.rhythm-tap{background:linear-gradient(135deg,rgba(79,194,235,.28),rgba(101,112,238,.22))!important}.rhythm-tap.is-tapped{transform:scale(.97);filter:brightness(1.35)}

.order-pool{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:14px}.order-pool button{display:flex;align-items:center;gap:10px;min-height:58px;padding:9px 11px;border:1px solid rgba(255,255,255,.11);border-radius:13px;background:rgba(255,255,255,.04);color:#e5edf6;font:inherit;font-size:.8rem;text-align:left;cursor:pointer}.order-pool button span,.order-result span b{display:grid;flex:0 0 26px;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(98,209,249,.15);color:#72dcff;font-size:.7rem}.order-pool button:disabled{opacity:.35;cursor:default}.order-result{display:flex;gap:7px;overflow-x:auto;min-height:62px;margin:0 14px;padding:10px;border:1px dashed rgba(105,215,252,.25);border-radius:13px;color:rgba(220,232,244,.54);font-size:.77rem}.order-result span{display:flex;align-items:center;gap:7px;min-width:max-content;padding:7px 9px;border-radius:10px;background:rgba(73,178,222,.10);color:#e4f2fa}.order-actions{display:grid;grid-template-columns:1fr 2fr;gap:8px;padding:12px 14px 0}.order-actions .mission-check{width:100%;margin:0}

.photo-shell{padding-bottom:1px}.photo-preview{display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 35%,#20334c,#09111e 70%)}.photo-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:.25s ease}.photo-preview img.is-loaded{opacity:1}.photo-placeholder{position:relative;z-index:2;display:grid;gap:8px;max-width:270px;padding:20px;color:#dbe8f5;text-align:center}.photo-placeholder:before{content:'▣';color:#78ddff;font-size:2.1rem}.photo-placeholder b{font-size:.92rem}.photo-placeholder span{color:#93a4b7;font-size:.76rem;line-height:1.5}.photo-placeholder[hidden]{display:none}.photo-sticker{transform:translate(-50%,-50%)}.photo-actions{display:grid;grid-template-columns:1.35fr 1fr;gap:8px;padding:12px 14px 0}.photo-input{display:grid;place-items:center;padding:0 10px;text-align:center}.photo-input input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.photo-actions button{padding:0 10px}

@media (max-width:620px){.mission-visual,.light-lab,.photo-preview{min-height:240px}.switch-grid,.order-pool{grid-template-columns:1fr}.palette-grid{grid-template-columns:repeat(3,1fr)}.rhythm-actions{grid-template-columns:1fr 1fr}.rhythm-actions .rhythm-tap{grid-column:1/-1;grid-row:1}.mixer-controls label{grid-template-columns:80px 1fr 26px}.photo-actions{grid-template-columns:1fr}.mission-context{align-items:flex-start;flex-direction:column}.draw-actions{grid-template-columns:1fr}.draw-actions .mission-check{grid-column:auto}.order-actions{grid-template-columns:1fr}.rhythm-reference{gap:7px}.rhythm-reference i{width:28px}.mission-range{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.mission-stage *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Игровые задания маршрутов */
.mission-guide{display:grid;grid-template-columns:max-content 1fr;gap:12px;align-items:start;padding:12px 14px;border:1px solid rgba(126,216,255,.14);border-left:3px solid #66d9ff;border-radius:14px;background:rgba(75,184,228,.06)}
.mission-guide span{padding-top:2px;color:#71dfff;font-size:.69rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.mission-guide p{margin:0;color:#e4edf6;font-size:.9rem;line-height:1.5}
.game-objective{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:14px;border-bottom:1px solid rgba(255,255,255,.1);background:linear-gradient(135deg,rgba(255,175,58,.12),rgba(90,205,245,.05))}
.game-objective>div:first-child{display:grid;gap:4px}
.game-objective>div:first-child span{color:#ffbd5e;font-size:.67rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.game-objective strong{color:#f4f7fb;font-size:.96rem;line-height:1.28}
.game-counters{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.game-counters span{min-height:30px;padding:6px 9px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(4,10,18,.46);color:#aebdcc;font-size:.72rem;white-space:nowrap}
.game-counters b{color:#ffd07b;font-size:.84rem}
.game-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(142px,1fr));gap:8px;padding:12px 14px 14px}
.game-actions button{appearance:none;min-width:44px;min-height:46px;padding:9px 12px;border:1px solid rgba(106,215,255,.25);border-radius:12px;background:rgba(77,188,232,.09);color:#e3f6ff;font:inherit;font-size:.79rem;font-weight:760;line-height:1.25;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease}
.game-actions button:last-child{border-color:rgba(255,190,91,.28);background:rgba(255,170,49,.09);color:#ffe1a8}
.game-actions button:hover:not(:disabled){transform:translateY(-1px);border-color:rgba(111,222,255,.55);background:rgba(79,195,240,.16)}
.game-actions button:disabled{opacity:.4;cursor:default}
.game-status{min-height:42px;margin:0;padding:11px 14px;color:#aebdcc;font-size:.78rem;line-height:1.45}
.mission-stage button:focus-visible,.mission-stage input:focus-visible{outline:3px solid #83e7ff;outline-offset:3px}

.match3-shell{padding-bottom:1px;background:radial-gradient(circle at 50% 35%,rgba(255,170,48,.09),transparent 56%)}
.match3-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;width:min(calc(100% - 12px),344px);margin:12px auto;padding:2px;border:1px solid rgba(255,201,104,.22);border-radius:17px;background:linear-gradient(145deg,#07111e,#101d2d);box-shadow:inset 0 0 28px rgba(0,0,0,.38)}
.bulb-cell{position:relative;display:grid;min-width:0;min-height:44px;aspect-ratio:1;place-items:center;padding:0;border:1px solid transparent;border-radius:10px;background:transparent;cursor:pointer;overflow:hidden;transition:transform .16s ease,background .16s ease,border-color .16s ease}
.bulb-cell:before{content:'';position:absolute;width:55%;height:55%;border:2px solid color-mix(in srgb,var(--bulb),#fff 22%);border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 37% 32%,#fff 0 7%,var(--bulb) 24%,color-mix(in srgb,var(--bulb),#131c28 55%) 74%);box-shadow:0 0 8px color-mix(in srgb,var(--bulb),transparent 55%),inset 0 -5px 8px rgba(0,0,0,.28);transition:.16s ease}
.bulb-cell .bulb-glow{position:absolute;width:78%;height:78%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--bulb),transparent 55%),transparent 68%);opacity:.55}
.bulb-cell .bulb-base{position:absolute;top:68%;width:22%;height:13%;border-radius:2px 2px 5px 5px;background:linear-gradient(90deg,#657080,#d7dce0 48%,#56616e)}
.bulb-cell .bulb-base:after{content:'';position:absolute;left:14%;right:14%;bottom:-4px;height:4px;border-radius:0 0 3px 3px;background:#7d8791}
.bulb-cell:hover:not(:disabled){background:rgba(255,255,255,.04)}
.bulb-cell.is-selected{border-color:#fff2b3;background:rgba(255,210,106,.13);transform:scale(.92)}
.bulb-cell.is-selected:before{box-shadow:0 0 19px var(--bulb),0 0 34px color-mix(in srgb,var(--bulb),transparent 45%)}
.bulb-cell.is-clearing{animation:bulb-pop .32s ease both}
.bulb-cell:disabled:not(.is-clearing){cursor:default}
@keyframes bulb-pop{50%{transform:scale(1.12);filter:brightness(1.7)}100%{transform:scale(.35);opacity:.1}}

.circuit-shell{padding-bottom:1px;background:radial-gradient(circle at 20% 80%,rgba(255,162,45,.12),transparent 45%)}
.circuit-grid{display:grid;grid-template-columns:repeat(var(--grid),1fr);gap:7px;width:min(calc(100% - 28px),360px);margin:14px auto;padding:8px;border:1px solid rgba(114,220,255,.18);border-radius:18px;background:linear-gradient(145deg,#07101b,#0d1a2a)}
.circuit-cell{position:relative;min-width:44px;aspect-ratio:1;padding:0;border:1px solid rgba(255,255,255,.07);border-radius:13px;background:rgba(255,255,255,.025);color:#93a3b4;cursor:pointer;overflow:hidden}
.circuit-cell i{position:absolute;z-index:1;display:none;background:#3f5268;box-shadow:0 0 0 1px rgba(255,255,255,.04)}
.circuit-cell .wire-n,.circuit-cell .wire-s{left:calc(50% - 3px);width:6px;height:52%}
.circuit-cell .wire-e,.circuit-cell .wire-w{top:calc(50% - 3px);width:52%;height:6px}
.circuit-cell .wire-n{top:0}.circuit-cell .wire-s{bottom:0}.circuit-cell .wire-e{right:0}.circuit-cell .wire-w{left:0}
.circuit-cell.has-n .wire-n,.circuit-cell.has-e .wire-e,.circuit-cell.has-s .wire-s,.circuit-cell.has-w .wire-w{display:block}
.circuit-node{position:absolute;z-index:2;left:50%;top:50%;width:16px;height:16px;transform:translate(-50%,-50%);border:3px solid #52657a;border-radius:50%;background:#111c2a}
.circuit-cell b{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);color:#aab8c7;font-size:.55rem}
.circuit-cell.is-powered i{background:#ffae3a;box-shadow:0 0 9px rgba(255,174,58,.8)}
.circuit-cell.is-powered .circuit-node{border-color:#ffcb70;background:#ff9f24;box-shadow:0 0 14px rgba(255,168,43,.82)}
.circuit-cell.is-source{border-color:rgba(255,180,61,.5);background:rgba(255,158,34,.1)}
.circuit-cell.is-source b{color:#201303;font-weight:900}
.circuit-cell.is-target:not(.is-powered){border-color:rgba(105,220,255,.32)}
.circuit-cell.is-target:not(.is-powered) .circuit-node{border-color:#62d9ff;box-shadow:0 0 11px rgba(87,211,255,.35)}
.circuit-cell:disabled:not(.is-powered){opacity:.36}
.circuit-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px;padding:0 14px;color:#9fb0c1;font-size:.7rem}
.circuit-legend span{display:flex;align-items:center;gap:6px}.circuit-legend i{width:9px;height:9px;border:2px solid #68dcff;border-radius:50%}.circuit-legend i.is-source{border-color:#ffbd56;background:#ff9d22}

.memory-shell{padding-bottom:1px;background:linear-gradient(180deg,rgba(72,143,189,.04),transparent)}
.memory-building{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:min(calc(100% - 44px),330px);margin:16px auto;padding:22px 18px 18px;border:1px solid rgba(255,255,255,.14);border-radius:18px 18px 8px 8px;background:linear-gradient(135deg,#172231,#0a111c);box-shadow:inset 0 0 0 6px rgba(255,255,255,.015),0 18px 42px rgba(0,0,0,.28)}
.memory-window{position:relative;min-width:44px;min-height:52px;padding:0;border:2px solid #314156;border-radius:4px 4px 2px 2px;background:linear-gradient(135deg,#07101c,#101c2b);cursor:pointer;overflow:hidden}
.memory-window:before,.memory-window:after{content:'';position:absolute;background:#2f4258}.memory-window:before{left:50%;top:0;bottom:0;width:2px}.memory-window:after{left:0;right:0;top:50%;height:2px}
.memory-window span{position:absolute;inset:4px;background:radial-gradient(circle at 50% 50%,rgba(255,208,116,.02),transparent);transition:.2s ease}
.memory-window.is-lit{border-color:#f7c66a;background:linear-gradient(135deg,#ffe9ad,#d99831);box-shadow:0 0 18px rgba(255,188,77,.48)}
.memory-window.is-lit span{background:radial-gradient(circle,#fff6c9,#ffbc4b 68%)}
.memory-window.is-preview{animation:window-breathe 1.2s ease-in-out infinite alternate}
@keyframes window-breathe{to{filter:brightness(1.25);box-shadow:0 0 25px rgba(255,192,82,.76)}}

.difference-shell{padding-bottom:1px}
.difference-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:14px 10px 4px}
.difference-compare figure{min-width:0;margin:0}
.difference-scene{position:relative;display:block;width:100%;aspect-ratio:4/3;padding:0;border:1px solid rgba(255,255,255,.12);border-radius:12px;background-image:linear-gradient(180deg,rgba(6,13,23,.04),rgba(6,13,23,.28)),var(--scene);background-position:center;background-size:cover;overflow:hidden}
button.difference-scene{cursor:crosshair}
.difference-compare figcaption{padding:7px 2px 0;color:#8293a5;font-size:.65rem;text-align:center}
.difference-effect{position:absolute;left:calc(var(--x) - var(--r));top:calc(var(--y) - var(--r));width:calc(var(--r)*2);height:calc(var(--r)*2);border-radius:50%;pointer-events:none}
.difference-effect.is-off{background:rgba(3,8,15,.64);box-shadow:0 0 14px rgba(2,6,12,.8)}
.difference-effect.is-glare{background:radial-gradient(circle,#fff 0 8%,rgba(255,224,145,.92) 10%,rgba(255,205,94,.18) 45%,transparent 72%);filter:brightness(1.2)}
.difference-effect.is-cold{background:radial-gradient(circle,rgba(82,210,255,.5),rgba(67,123,255,.18) 55%,transparent 72%);mix-blend-mode:screen}
.difference-effect.is-found{outline:2px solid #75e6b7;outline-offset:2px}
.difference-effect.is-found:after{content:'✓';position:absolute;left:50%;top:50%;display:grid;width:28px;height:28px;place-items:center;transform:translate(-50%,-50%);border-radius:50%;background:#58dda6;color:#061b13;font-style:normal;font-weight:950;box-shadow:0 0 18px rgba(88,221,166,.68)}
.difference-hint{position:absolute;left:calc(var(--x) - var(--r));top:calc(var(--y) - var(--r));width:calc(var(--r)*2);height:calc(var(--r)*2);border:2px solid #ffbc55;border-radius:50%;opacity:0;pointer-events:none;box-shadow:0 0 0 7px rgba(255,179,62,.12)}
.difference-hint.is-visible{opacity:1;animation:hint-ring 1.1s ease-in-out infinite}
@keyframes hint-ring{50%{transform:scale(1.1);box-shadow:0 0 0 12px rgba(255,179,62,.04)}}

.balance-shell{padding-bottom:1px}
.balance-city{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:16px 12px 8px;background:linear-gradient(180deg,rgba(84,184,224,.05),transparent)}
.balance-city span{display:grid;gap:6px;justify-items:center;min-width:0;color:#8194a7;font-size:.58rem;text-align:center}
.balance-city i{display:block;width:32px;height:32px;border:1px solid #43566b;border-radius:50%;background:radial-gradient(circle,rgba(109,216,255,.12),transparent);opacity:calc(.36 + var(--power)*.64)}
.balance-city span.is-ready{color:#ffd386}.balance-city span.is-ready i{border-color:#ffc55e;background:radial-gradient(circle,#fff1b2 0 12%,#ffb343 22%,rgba(255,175,65,.14) 65%);box-shadow:0 0 18px rgba(255,178,65,.48)}
.balance-loads{display:grid;gap:8px;padding:8px 12px}
.balance-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:11px;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:rgba(255,255,255,.025)}
.balance-row>div:first-child{display:grid;gap:3px;min-width:0}.balance-row strong{color:#e7eff7;font-size:.82rem}.balance-row small{color:#8596a8;font-size:.67rem;line-height:1.35}
.balance-row.is-required small{color:#d1a75f}.balance-row.is-ready{border-color:rgba(101,226,172,.28);background:rgba(54,172,124,.06)}
.balance-stepper{display:grid;grid-template-columns:44px 38px 44px;align-items:center}
.balance-stepper button{width:44px;height:44px;padding:0;border:1px solid rgba(105,214,255,.26);background:rgba(70,180,225,.09);color:#dff8ff;font-family:inherit;font-size:1.2rem;font-weight:800;cursor:pointer}
.balance-stepper button:first-child{border-radius:10px 0 0 10px}.balance-stepper button:last-child{border-radius:0 10px 10px 0}
.balance-stepper button:disabled{opacity:.32}.balance-stepper output{display:grid;height:44px;place-items:center;border-block:1px solid rgba(105,214,255,.2);background:#0b1725;color:#ffd079;font-weight:850}
.balance-meter{position:relative;grid-column:1/-1;height:7px;border-radius:99px;background:#1d2a3b;overflow:visible}.balance-meter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#58cff3,#ffb449);transition:width .2s ease}.balance-meter span{position:absolute;top:-3px;width:2px;height:13px;background:#fff0bd;box-shadow:0 0 5px #ffc55e}

.mosaic-shell{padding-bottom:1px}
.mosaic-board{position:relative;display:grid;grid-template-columns:repeat(var(--grid),1fr);gap:3px;width:min(calc(100% - 28px),390px);aspect-ratio:4/3;margin:14px auto;padding:5px;border:1px solid rgba(255,191,85,.25);border-radius:16px;background:#07101b;overflow:hidden}
.mosaic-piece{position:relative;min-width:44px;min-height:44px;padding:0;border:1px solid rgba(255,255,255,.12);border-radius:6px;background-image:linear-gradient(180deg,rgba(5,10,18,.02),rgba(5,10,18,.18)),var(--scene);background-position:var(--piece-x) var(--piece-y);background-size:calc(var(--grid)*100%) calc(var(--grid)*100%);cursor:pointer;overflow:hidden;transition:transform .18s ease,filter .18s ease,border-color .18s ease}
.mosaic-piece span{position:absolute;right:4px;bottom:4px;display:grid;width:19px;height:19px;place-items:center;border-radius:50%;background:rgba(4,10,18,.7);color:#d8e4ef;font-size:.58rem;backdrop-filter:blur(5px)}
.mosaic-piece.is-selected{z-index:2;border-color:#fff0aa;transform:scale(.94);filter:brightness(1.15);box-shadow:0 0 0 2px rgba(255,196,83,.35)}
.mosaic-piece.is-correct{border-color:rgba(101,225,173,.52)}.mosaic-piece.is-correct span{background:#50dba3;color:#072017}
.mosaic-preview{position:absolute;z-index:5;inset:5px;border-radius:10px;background-image:linear-gradient(180deg,rgba(4,9,17,.02),rgba(4,9,17,.12)),var(--scene);background-position:center;background-size:cover;opacity:0;pointer-events:none;transition:opacity .2s ease}
.mosaic-preview.is-visible{opacity:1}.mosaic-board.is-previewing:after{content:'ЦЕЛЬНЫЙ КАДР';position:absolute;z-index:6;left:50%;bottom:15px;transform:translateX(-50%);padding:6px 9px;border-radius:8px;background:rgba(4,10,18,.72);color:#ffe2a4;font-size:.62rem;font-weight:850;letter-spacing:.1em}

@media (max-width:420px){
  .game-objective{display:grid}.game-counters{justify-content:flex-start}
  .game-actions{grid-template-columns:1fr}
  .mission-guide{grid-template-columns:1fr;gap:4px}
  .match3-grid{width:calc(100% - 8px);margin:8px auto}
  .circuit-grid{width:calc(100% - 16px);margin:10px auto;gap:5px;padding:6px}
  .memory-building{width:calc(100% - 24px);margin:12px auto;padding:15px 12px 12px;gap:6px}
  .difference-compare{gap:5px;padding-inline:7px}
  .difference-compare figcaption{font-size:.58rem}
  .balance-city{grid-template-columns:repeat(2,1fr)}
  .balance-row{grid-template-columns:1fr}
  .balance-stepper{justify-content:start}
  .mosaic-board{width:calc(100% - 16px);margin:10px auto}
}

/* Финальная мобильная полировка заданий */
.mission-stage{
  --mission-bg:#07101a;
  --mission-panel:#0d1928;
  --mission-panel-strong:#132235;
  --mission-line:rgba(137,220,255,.18);
  --mission-line-strong:rgba(137,220,255,.36);
  --mission-ink:#f2f7fc;
  --mission-copy:#d8e3ee;
  --mission-muted:#a7b8c9;
  --mission-cyan:#74dcff;
  --mission-amber:#ffbd59;
  --mission-green:#72e2b2;
  --mission-focus:#a5edff;
  display:grid;
  gap:12px;
  margin-top:14px;
  color:var(--mission-ink);
  font-size:16px;
}
.mission-stage,
.mission-stage *{box-sizing:border-box;min-width:0}
.mission-stage :where(p,span,strong,b,small,summary,button,label,output,figcaption){
  overflow-wrap:anywhere;
}
.mission-stage :where(button,input,summary,[tabindex]){
  font-family:inherit;
}
.mission-stage :where(button,.photo-input,summary){
  min-height:44px;
  touch-action:manipulation;
}
.mission-stage :where(button,input,summary,[tabindex]):focus-visible{
  outline:3px solid var(--mission-focus);
  outline-offset:3px;
  box-shadow:0 0 0 5px rgba(72,202,255,.18);
}
.mission-stage p{font-size:14px}
.mission-stage button:disabled,
.mission-stage input:disabled{
  cursor:default;
  opacity:.56;
}

/* Компактная оболочка */
.mission-context{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.mission-context span{
  padding:6px 10px;
  border:1px solid rgba(116,220,255,.32);
  border-radius:999px;
  background:rgba(61,178,226,.1);
  color:#8ce4ff;
  font-size:13px;
  font-weight:850;
  letter-spacing:.06em;
  line-height:1.25;
  text-transform:uppercase;
}
.mission-context strong{
  color:#becddb;
  font-size:13px;
  font-weight:700;
  line-height:1.35;
}
.mission-guide{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  gap:4px 12px;
  align-items:start;
  padding:11px 13px;
  border:1px solid rgba(126,216,255,.18);
  border-left:3px solid var(--mission-cyan);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(69,180,225,.09),rgba(255,255,255,.018));
}
.mission-guide>span{
  padding-top:2px;
  color:var(--mission-cyan);
  font-size:13px;
  font-weight:850;
  letter-spacing:.07em;
  line-height:1.35;
  text-transform:uppercase;
}
.mission-guide>p{
  margin:0;
  color:var(--mission-copy);
  font-size:14px;
  line-height:1.5;
}
.mission-guide details{
  grid-column:2;
  margin:0;
  border-top:1px solid rgba(126,216,255,.12);
}
.mission-guide summary,
.mission-audience-cue summary{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  padding:9px 38px 9px 0;
  list-style:none;
  color:#bcd0df;
  font-size:13px;
  font-weight:750;
  line-height:1.35;
  cursor:pointer;
}
.mission-guide summary::-webkit-details-marker,
.mission-audience-cue summary::-webkit-details-marker{display:none}
.mission-guide summary::after,
.mission-audience-cue summary::after{
  content:'⌄';
  position:absolute;
  right:4px;
  top:50%;
  color:var(--mission-cyan);
  font-size:18px;
  line-height:1;
  transform:translateY(-56%);
  transition:transform .18s ease;
}
.mission-guide details[open] summary::after,
.mission-audience-cue[open] summary::after{
  transform:translateY(-42%) rotate(180deg);
}
.mission-guide details p{
  margin:0;
  padding:0 0 10px;
  color:#b9c9d8;
  font-size:14px;
  line-height:1.5;
}
.mission-audience-cue{
  position:relative;
  margin:0;
  padding:0;
  border:1px solid rgba(255,196,86,.2);
  border-radius:13px;
  background:linear-gradient(135deg,rgba(255,184,64,.075),rgba(255,255,255,.018));
  color:var(--mission-copy);
}
.mission-audience-cue::before{content:none}
.mission-audience-cue summary{
  padding:9px 42px 9px 38px;
  color:#e4d3ae;
  font-size:13px;
}
.mission-audience-cue summary::before{
  content:'';
  position:absolute;
  left:14px;
  width:10px;
  height:10px;
  border:2px solid #ffd078;
  border-radius:50%;
  background:#ffac36;
  box-shadow:0 0 12px rgba(255,174,52,.52);
}
.mission-audience-cue summary::after{
  right:14px;
  color:var(--mission-amber);
}
.mission-audience-cue p{
  margin:0;
  padding:0 14px 12px 38px;
  color:#cfdae5;
  font-size:14px;
  line-height:1.5;
}
.mission-interaction{
  isolation:isolate;
  overflow:hidden;
  max-width:100%;
  border:1px solid rgba(148,215,244,.18);
  border-radius:20px;
  background:
    linear-gradient(160deg,rgba(19,33,51,.98),rgba(7,14,24,.99)),
    var(--mission-bg);
  box-shadow:0 18px 42px rgba(0,0,0,.28);
  transition:border-color .22s ease,box-shadow .22s ease;
}
.mission-stage.is-complete .mission-interaction{
  border-color:rgba(114,226,178,.46);
  box-shadow:0 0 0 1px rgba(91,222,169,.16),0 20px 50px rgba(0,0,0,.28),0 0 34px rgba(70,214,158,.08);
}
.mission-stage.is-complete .game-objective{
  background:linear-gradient(135deg,rgba(61,192,137,.15),rgba(81,196,238,.055));
}
.mission-stage.is-complete .game-status{color:#bcebd8}
.mission-validation{
  min-height:0;
  margin:0;
  padding:6px 3px;
  border-left:3px solid transparent;
  color:#aebdcc;
  font-size:14px;
  line-height:1.45;
}
.mission-validation[data-tone]{
  min-height:44px;
  padding:10px 12px;
  border:1px solid rgba(125,205,239,.14);
  border-left:3px solid #70d8ff;
  border-radius:11px;
  background:rgba(73,172,216,.055);
}
.mission-validation[data-tone="success"]{
  border-color:rgba(94,223,170,.24);
  border-left-color:var(--mission-green);
  background:rgba(58,184,129,.08);
  color:#86edc3;
}
.mission-validation[data-tone="retry"]{
  border-color:rgba(255,194,87,.22);
  border-left-color:var(--mission-amber);
  background:rgba(255,174,49,.07);
  color:#ffda91;
}

/* Кнопки, поля и неподвижные поверхности 4:3 */
.mission-check,
.draw-actions button,
.rhythm-actions button,
.order-actions button,
.photo-actions button,
.photo-input,
.game-actions button{
  appearance:none;
  min-height:48px;
  border:1px solid rgba(112,212,250,.3);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(78,186,230,.13),rgba(39,112,149,.08));
  color:#e8f8ff;
  font-family:inherit;
  font-size:14px;
  font-weight:750;
  line-height:1.3;
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,filter .16s ease;
}
.mission-check{
  display:block;
  width:calc(100% - 24px);
  margin:12px;
  padding:10px 16px;
  border-color:rgba(255,202,105,.5);
  background:linear-gradient(135deg,#ffd47d,#f5a53c);
  color:#211506;
  box-shadow:0 10px 26px rgba(246,166,57,.16);
}
.mission-check:hover:not(:disabled),
.draw-actions button:hover:not(:disabled),
.rhythm-actions button:hover:not(:disabled),
.order-actions button:hover:not(:disabled),
.photo-actions button:hover:not(:disabled),
.photo-input:hover,
.game-actions button:hover:not(:disabled){
  border-color:rgba(139,229,255,.58);
  filter:brightness(1.07);
  transform:translateY(-1px);
}
.mission-stage button:active:not(:disabled),
.photo-input:active{transform:translateY(1px) scale(.99)}
.mission-visual,
.photo-preview,
.light-lab{
  position:relative;
  display:block;
  width:100%;
  min-height:0;
  aspect-ratio:4/3;
  background-position:center;
  background-size:cover;
  overflow:hidden;
}
.mission-scene-image{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center;
  pointer-events:none;
  user-select:none;
}
.mission-scene-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(4,9,17,.025) 40%,rgba(4,9,17,.58));
  pointer-events:none;
}
.draw-canvas{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  aspect-ratio:4/3;
  touch-action:none;
}
.hotspot-wrap,
.align-wrap{
  position:relative;
  width:100%;
  max-width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  background:#07101b;
}
.hotspot-surface,
.align-surface{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
}
.hotspot-wrap>.mission-visual,
.align-wrap>.mission-visual,
.hotspot-surface>.mission-visual,
.align-surface>.mission-visual,
.light-lab>.mission-visual{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  aspect-ratio:auto;
}
.mission-visual::after,
.draw-wrap::after,
.light-lab::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(3,8,16,.02) 46%,rgba(3,8,17,.58));
}

/* Ползунки */
.mission-range{
  display:grid;
  grid-template-columns:minmax(112px,.72fr) minmax(120px,1.28fr);
  gap:10px 14px;
  align-items:center;
  min-height:58px;
  padding:8px 14px 2px;
  color:#dce8f3;
  font-size:14px;
  line-height:1.4;
}
.mission-range>span{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
}
.mission-range output{
  color:#88e2ff;
  font-size:13px;
  font-weight:800;
}
.mission-stage input[type="range"]{
  appearance:none;
  width:100%;
  height:44px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}
.mission-stage input[type="range"]::-webkit-slider-runnable-track{
  height:8px;
  border:1px solid rgba(133,219,255,.2);
  border-radius:999px;
  background:linear-gradient(90deg,#39c2ee,#ffb348);
}
.mission-stage input[type="range"]::-webkit-slider-thumb{
  appearance:none;
  width:26px;
  height:26px;
  margin-top:-10px;
  border:3px solid #07111d;
  border-radius:50%;
  background:#fff0c2;
  box-shadow:0 0 0 2px #ffbb4d,0 4px 12px rgba(0,0,0,.32);
}
.mission-stage input[type="range"]::-moz-range-track{
  height:8px;
  border:1px solid rgba(133,219,255,.2);
  border-radius:999px;
  background:linear-gradient(90deg,#39c2ee,#ffb348);
}
.mission-stage input[type="range"]::-moz-range-thumb{
  width:22px;
  height:22px;
  border:3px solid #07111d;
  border-radius:50%;
  background:#fff0c2;
  box-shadow:0 0 0 2px #ffbb4d,0 4px 12px rgba(0,0,0,.32);
}

/* Схема управления */
.switch-board{padding:12px}
.switch-board-top{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:44px;
  padding:9px 11px;
  border:1px solid rgba(104,226,255,.18);
  border-radius:11px;
  background:#07111e;
  color:#8ae5ff;
  font:750 13px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.035em;
  text-align:center;
}
.switch-board-top i{
  flex:0 0 9px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#57d8ff;
  box-shadow:0 0 12px #57d8ff;
}
.switch-summary{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:12px 3px 2px;
  color:#aebfd0;
  font-size:13px;
}
.switch-summary strong{color:#f0f6fb;font-size:14px}
.switch-summary b{color:var(--mission-amber);font-size:16px}
.switch-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin-top:10px;
}
.toggle-switch{
  display:grid;
  grid-template-columns:20px minmax(0,1fr) max-content;
  align-items:center;
  gap:9px;
  min-height:64px;
  padding:10px 11px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:13px;
  background:linear-gradient(180deg,#142136,#0c1626);
  color:#e0ebf5;
  text-align:left;
  cursor:pointer;
}
.toggle-switch b{font-size:14px;line-height:1.35}
.toggle-switch small{
  color:#9aadc0;
  font:800 13px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;
}
.toggle-lamp{
  width:14px;
  height:14px;
  border:2px solid #728399;
  border-radius:50%;
  background:#28384b;
}
.toggle-switch.is-on{
  border-color:rgba(103,230,174,.42);
  background:linear-gradient(180deg,rgba(27,83,69,.72),#0c1b20);
}
.toggle-switch.is-on .toggle-lamp{
  border-color:#a0f4cf;
  background:#50e09f;
  box-shadow:0 0 15px #4dde9b;
}
.toggle-switch.is-on small{color:#8aedbd}

/* Контур, точка и композиция */
.draw-wrap{
  position:relative;
  min-height:0;
  overflow:hidden;
  background-position:center top;
  background-size:100% auto;
}
.draw-surface{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  background-position:center;
  background-size:cover;
}
.draw-surface .draw-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  aspect-ratio:auto;
}
.draw-anchor{
  position:absolute;
  z-index:3;
  left:var(--x);
  top:var(--y);
  min-height:28px;
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  background:rgba(3,9,17,.76);
  color:#f7fbff;
  font-size:13px;
  font-weight:800;
  line-height:1.2;
  overflow-wrap:normal;
  pointer-events:none;
  transform:translate(-50%,-50%);
  white-space:nowrap;
  backdrop-filter:blur(7px);
}
.draw-anchor.is-start{
  border-color:rgba(112,224,255,.5);
  color:#9aeaff;
  transform:translate(-20%,-50%);
}
.draw-anchor.is-finish{
  border-color:rgba(255,197,89,.5);
  color:#ffdc98;
  transform:translate(-80%,-50%);
}
.draw-point-controls{
  position:absolute;
  z-index:4;
  inset:0;
  pointer-events:none;
}
.draw-point-controls button{
  position:absolute;
  left:var(--x);
  top:var(--y);
  display:grid;
  width:44px;
  height:44px;
  min-height:44px;
  place-items:center;
  padding:0;
  border:2px solid #8ce7ff;
  border-radius:50%;
  background:rgba(5,20,31,.88);
  color:#eafbff;
  font-size:14px;
  font-weight:900;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-50%);
  transition:opacity .16s ease,background .16s ease;
}
.draw-surface.is-point-mode .draw-point-controls button{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,-50%);
}
.draw-point-controls button.is-done{
  border-color:#77e4b6;
  background:#4bd79b;
  color:#061b13;
}
.draw-meter{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:9px 12px;
  border-top:1px solid rgba(118,214,251,.14);
  background:rgba(5,12,22,.9);
  color:#b6c6d5;
  font-size:14px;
}
.draw-meter i{
  flex:0 0 10px;
  width:10px;
  height:10px;
  border:2px solid #65788b;
  border-radius:50%;
  background:#1c2b3d;
}
.draw-meter.is-ready{color:#a9e8cf}
.draw-meter.is-ready i{
  border-color:#8cecc6;
  background:#56d99f;
  box-shadow:0 0 12px rgba(86,217,159,.7);
}
.draw-help{
  min-height:44px;
  margin:0;
  padding:9px 12px 2px;
  color:#b6c6d5;
  font-size:14px;
  line-height:1.45;
}
.draw-actions{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:10px 12px 12px;
  background:rgba(4,10,19,.94);
}
.draw-actions button{padding:9px 10px}
.draw-actions .mission-check{
  grid-column:1/-1;
  width:100%;
  margin:0;
}
.hotspot-grid{
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  opacity:.34;
  background-image:
    linear-gradient(rgba(113,217,255,.11) 1px,transparent 1px),
    linear-gradient(90deg,rgba(113,217,255,.11) 1px,transparent 1px);
  background-size:25% 25%;
}
.hotspot-wrap p,
.align-wrap p{
  position:absolute;
  z-index:3;
  left:10px;
  right:10px;
  bottom:10px;
  margin:0;
  padding:9px 11px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:10px;
  background:rgba(3,9,17,.78);
  color:#f1f5f9;
  font-size:14px;
  line-height:1.4;
  backdrop-filter:blur(10px);
}
.hotspot-pin,
.align-token,
.photo-sticker{
  position:absolute;
  z-index:4;
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  min-height:58px;
  padding:0;
  border:1px solid rgba(255,255,255,.72);
  border-radius:50%;
  background:radial-gradient(circle,#fff5bd 0 12%,#ffc85a 13% 27%,rgba(255,181,46,.16) 28% 66%,transparent 67%);
  color:#fff3bd;
  font-size:26px;
  text-shadow:0 0 16px #ffb12f;
  box-shadow:0 0 30px rgba(255,184,47,.52);
  cursor:grab;
  touch-action:none;
}
.hotspot-pin{
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-50%);
  transition:opacity .18s ease;
}
.hotspot-pin.is-visible{opacity:1}
.composition-safe{
  position:absolute;
  z-index:2;
  inset:12%;
  border:1px dashed rgba(132,225,255,.42);
  border-radius:16px;
  pointer-events:none;
  box-shadow:inset 0 0 28px rgba(62,191,237,.035);
}
.align-token:active,
.photo-sticker:active{cursor:grabbing}

/* Световая лаборатория */
.light-lab{overflow:hidden}
.light-beam{
  position:absolute;
  z-index:2;
  left:50%;
  top:0;
  width:var(--beam,65%);
  height:100%;
  transform:translateX(-50%);
  opacity:var(--bright,.5);
  clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);
  background:hsl(calc(205 - var(--warm,50)*1.55) 100% 76% / .72);
  filter:blur(7px);
  mix-blend-mode:screen;
}
.light-lab-label{
  position:absolute;
  z-index:4;
  left:12px;
  top:12px;
  padding:7px 10px;
  border:1px solid rgba(134,223,255,.22);
  border-radius:999px;
  background:rgba(3,9,17,.68);
  color:#cfefff;
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  backdrop-filter:blur(8px);
}
.mixer-controls{
  display:grid;
  gap:5px;
  padding:9px 12px 2px;
}
.mixer-controls label{
  display:grid;
  grid-template-columns:1fr;
  align-items:stretch;
  gap:2px;
  min-height:92px;
  color:#dce7f4;
  font-size:14px;
}
.mixer-heading{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.mixer-heading b{font-size:14px;line-height:1.3}
.mixer-heading output{
  color:#8ce5ff;
  font:800 13px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;
  text-align:right;
}
.mixer-endpoints{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:-5px;
  color:#a9bac9;
}
.mixer-endpoints i{
  font-size:13px;
  font-style:normal;
  line-height:1.25;
}

/* Палитра */
.palette-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  padding:12px;
}
.color-chip{
  position:relative;
  display:grid;
  grid-template-rows:auto auto auto;
  gap:7px;
  min-height:112px;
  padding:8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(255,255,255,.035);
  color:#d6e2ec;
  cursor:pointer;
}
.color-chip>span{
  display:grid;
  min-height:48px;
  aspect-ratio:1.45;
  place-items:center;
  border-radius:9px;
  background:var(--chip);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 8px 22px color-mix(in srgb,var(--chip),transparent 72%);
}
.color-chip>span b{
  color:rgba(255,255,255,.72);
  font-size:18px;
  line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.28);
}
.color-chip small{font-size:13px;font-weight:750;line-height:1.3}
.color-chip i{
  color:#a8b9c9;
  font-size:13px;
  font-style:normal;
  line-height:1.25;
}
.color-chip.is-active{
  border-color:#dff8ff;
  background:rgba(111,221,255,.08);
  transform:translateY(-2px);
  box-shadow:0 0 0 2px rgba(107,221,255,.3);
}
.color-chip.is-active i{color:#9ce8c7}
.palette-choice{
  min-height:44px;
  margin:0;
  padding:10px 14px 2px;
  color:#bdccda;
  font-size:14px;
  line-height:1.4;
}

/* Ритм */
.rhythm-reference{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:9px;
  min-height:190px;
  padding:24px 14px 18px;
  background:radial-gradient(circle at 50% 100%,rgba(74,181,232,.16),transparent 66%);
}
.rhythm-reference i{
  position:relative;
  display:block;
  width:34px;
  height:calc(42px + var(--length)*42px);
  border:1px solid rgba(124,222,255,.36);
  border-radius:17px 17px 7px 7px;
  background:linear-gradient(180deg,rgba(107,224,255,.82),rgba(91,103,230,.3));
  box-shadow:0 0 24px rgba(74,200,246,.14);
  transition:transform .18s ease,filter .18s ease,background .18s ease;
}
.rhythm-reference i span{
  position:absolute;
  left:50%;
  bottom:8px;
  color:#06131d;
  font-size:13px;
  font-style:normal;
  font-weight:900;
  transform:translateX(-50%);
}
.rhythm-reference i.is-playing{
  background:linear-gradient(180deg,#fff2a8,#ffae3f);
  box-shadow:0 0 30px rgba(255,181,60,.72);
  transform:translateY(-8px);
}
.rhythm-reference i.is-preview{
  border-color:#fff1b1;
  filter:brightness(1.18);
}
.rhythm-status{
  min-height:44px;
  margin:0;
  padding:10px 14px;
  color:#b9c8d7;
  font-size:14px;
  line-height:1.45;
}
.rhythm-actions{
  display:grid;
  grid-template-columns:1fr 1.4fr 1fr;
  gap:8px;
  padding:0 12px;
}
.rhythm-actions button{padding:8px}
.rhythm-tap{
  background:linear-gradient(135deg,rgba(73,194,237,.3),rgba(99,111,239,.23))!important;
}
.rhythm-tap.is-tapped{transform:scale(.97);filter:brightness(1.3)}

/* Порядок действий */
.order-pool{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  padding:12px;
}
.order-pool button{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:58px;
  padding:9px 11px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(255,255,255,.04);
  color:#e5edf6;
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  line-height:1.35;
  text-align:left;
  cursor:pointer;
}
.order-pool button>span,
.order-result span b{
  display:grid;
  flex:0 0 28px;
  width:28px;
  height:28px;
  place-items:center;
  border-radius:50%;
  background:rgba(98,209,249,.15);
  color:#7ae0ff;
  font-size:13px;
}
.order-pool button:disabled{opacity:.52}
.order-result{
  display:block;
  overflow-x:auto;
  max-width:calc(100% - 24px);
  min-height:64px;
  margin:0 12px;
  padding:10px;
  border:1px dashed rgba(105,215,252,.28);
  border-radius:12px;
  color:#aebdcc;
  font-size:14px;
  line-height:1.35;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
}
.order-result>p{
  margin:0;
  padding:10px 3px;
  color:#aebdcc;
  font-size:14px;
}
.order-result ol{
  display:flex;
  gap:7px;
  width:max-content;
  min-width:100%;
  margin:0;
  padding:0;
  list-style:none;
}
.order-result li{flex:0 0 auto}
.order-result li button{
  display:grid;
  grid-template-columns:28px minmax(90px,1fr) max-content;
  gap:7px;
  align-items:center;
  min-height:48px;
  max-width:250px;
  padding:7px 9px;
  border:1px solid rgba(105,215,252,.18);
  border-radius:9px;
  background:rgba(73,178,222,.1);
  color:#e6f2f9;
  font-family:inherit;
  font-size:14px;
  line-height:1.3;
  text-align:left;
}
.order-result li button i{
  color:#9eb0c0;
  font-size:13px;
  font-style:normal;
}
.order-result>span{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:7px;
  max-width:230px;
  padding:7px 9px;
  border-radius:9px;
  background:rgba(73,178,222,.1);
  color:#e6f2f9;
}
.order-help{
  min-height:44px;
  margin:0;
  padding:9px 14px 2px;
  color:#aebecd;
  font-size:14px;
  line-height:1.45;
}
.order-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:10px 12px 0;
}
.order-actions .mission-check{
  grid-column:1/-1;
  width:100%;
  margin:0;
}

/* Фото и коллаж */
.photo-shell{padding-bottom:1px}
.photo-preview{
  display:grid;
  place-items:center;
  overflow:hidden;
  background:radial-gradient(circle at 50% 35%,#20334c,#09111e 70%);
}
.photo-backdrop{
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(121,216,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(121,216,255,.035) 1px,transparent 1px),
    radial-gradient(circle at 50% 38%,rgba(93,188,229,.16),transparent 54%);
  background-size:25% 25%,25% 25%,auto;
  pointer-events:none;
}
.photo-preview img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .24s ease;
}
.photo-preview img.is-loaded{opacity:1}
.photo-placeholder{
  position:relative;
  z-index:2;
  display:grid;
  gap:8px;
  max-width:290px;
  padding:20px;
  color:#dbe8f5;
  text-align:center;
}
.photo-placeholder::before{content:'▣';color:#78ddff;font-size:34px}
.photo-placeholder b{font-size:15px;line-height:1.35}
.photo-placeholder span{color:#aabaca;font-size:14px;line-height:1.5}
.photo-placeholder[hidden]{display:none}
.photo-guide{
  position:absolute;
  z-index:3;
  inset:10%;
  border:1px solid rgba(151,228,255,.34);
  border-radius:10px;
  background-image:
    linear-gradient(90deg,transparent 33.15%,rgba(151,228,255,.28) 33.15% 33.5%,transparent 33.5% 66.5%,rgba(151,228,255,.28) 66.5% 66.85%,transparent 66.85%),
    linear-gradient(180deg,transparent 33.15%,rgba(151,228,255,.28) 33.15% 33.5%,transparent 33.5% 66.5%,rgba(151,228,255,.28) 66.5% 66.85%,transparent 66.85%);
  pointer-events:none;
  opacity:.72;
}
.photo-guide i{display:none}
.photo-demo-badge{
  position:absolute;
  z-index:5;
  left:10px;
  top:10px;
  max-width:calc(100% - 20px);
  min-height:32px;
  padding:7px 10px;
  border:1px solid rgba(255,202,102,.26);
  border-radius:9px;
  background:rgba(4,10,18,.76);
  color:#ffe1a6;
  font-size:13px;
  font-weight:800;
  line-height:1.3;
  backdrop-filter:blur(8px);
}
.photo-demo-badge[hidden]{display:none}
.photo-status{
  min-height:44px;
  margin:0;
  padding:10px 13px 2px;
  color:#b8c7d5;
  font-size:14px;
  line-height:1.45;
}
.photo-sticker{transform:translate(-50%,-50%)}
.photo-actions{
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:8px;
  padding:10px 12px 0;
}
.photo-input{
  display:grid;
  place-items:center;
  padding:9px 11px;
  text-align:center;
  cursor:pointer;
}
.photo-input input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.photo-actions button{padding:9px 10px}
.photo-checklist{
  display:grid;
  gap:6px;
  min-width:0;
  margin:10px 12px 2px;
  padding:10px;
  border:1px solid rgba(125,215,251,.16);
  border-radius:12px;
  background:rgba(255,255,255,.022);
}
.photo-checklist legend{
  padding:0 6px;
  color:#dbe7f1;
  font-size:14px;
  font-weight:800;
  line-height:1.35;
}
.photo-checklist label{
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  gap:9px;
  align-items:center;
  min-height:44px;
  padding:7px 8px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:9px;
  background:rgba(255,255,255,.018);
  color:#c6d4df;
  cursor:pointer;
}
.photo-checklist input[type="checkbox"]{
  appearance:none;
  display:grid;
  width:22px;
  height:22px;
  min-height:22px;
  margin:0;
  place-items:center;
  border:2px solid #678098;
  border-radius:5px;
  background:#0c1826;
}
.photo-checklist input[type="checkbox"]::after{
  content:'✓';
  color:#062017;
  font-size:15px;
  font-weight:950;
  opacity:0;
  transform:scale(.6);
}
.photo-checklist input[type="checkbox"]:checked{
  border-color:#7be7ba;
  background:#64dca9;
}
.photo-checklist input[type="checkbox"]:checked::after{
  opacity:1;
  transform:scale(1);
}
.photo-checklist label>span{font-size:14px;line-height:1.4}

/* Общая шапка игровых движков */
.game-objective{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px 14px;
  align-items:start;
  padding:13px;
  border-bottom:1px solid rgba(255,255,255,.11);
  background:linear-gradient(135deg,rgba(255,175,58,.12),rgba(90,205,245,.055));
}
.game-objective>div:first-child{display:grid;gap:4px}
.game-objective>div:first-child>span{
  color:#ffc46e;
  font-size:13px;
  font-weight:850;
  letter-spacing:.08em;
  line-height:1.25;
  text-transform:uppercase;
}
.game-objective strong{
  color:#f5f8fc;
  font-size:16px;
  line-height:1.32;
}
.game-counters{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
}
.game-counters>span{
  display:flex;
  align-items:baseline;
  gap:4px;
  min-height:36px;
  padding:7px 9px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:9px;
  background:rgba(4,10,18,.5);
  color:#b3c2d0;
  font-size:13px;
  white-space:nowrap;
}
.game-counters b{color:#ffd27f;font-size:15px}
.game-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:11px 12px 12px;
}
.game-actions button{
  min-width:44px;
  padding:9px 10px;
  font-size:14px;
  line-height:1.3;
}
.game-actions button:last-child{
  border-color:rgba(255,190,91,.3);
  background:rgba(255,170,49,.08);
  color:#ffe3b1;
}
.game-status{
  min-height:44px;
  margin:0;
  padding:10px 13px;
  color:#b7c6d4;
  font-size:14px;
  line-height:1.45;
}

/* Три в ряд */
.match3-shell{
  padding-bottom:1px;
  background:radial-gradient(circle at 50% 35%,rgba(255,170,48,.105),transparent 58%);
}
.match3-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:2px;
  width:min(calc(100% - 8px),356px);
  margin:9px auto;
  padding:4px;
  border:1px solid rgba(255,201,104,.26);
  border-radius:16px;
  background:
    linear-gradient(rgba(112,213,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(112,213,255,.035) 1px,transparent 1px),
    linear-gradient(145deg,#07111e,#101d2d);
  background-size:25% 25%,25% 25%,auto;
  box-shadow:inset 0 0 28px rgba(0,0,0,.4),0 10px 26px rgba(0,0,0,.18);
}
.bulb-cell{
  position:relative;
  display:grid;
  min-width:44px;
  min-height:44px;
  aspect-ratio:1;
  place-items:center;
  padding:0;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  cursor:pointer;
  overflow:hidden;
  transition:transform .16s ease,background .16s ease,border-color .16s ease;
}
.bulb-cell::before{
  content:'';
  position:absolute;
  width:56%;
  height:56%;
  border:2px solid color-mix(in srgb,var(--bulb),#fff 24%);
  border-radius:50% 50% 45% 45%;
  background:radial-gradient(circle at 37% 31%,#fff 0 7%,var(--bulb) 24%,color-mix(in srgb,var(--bulb),#121b27 54%) 74%);
  box-shadow:0 0 9px color-mix(in srgb,var(--bulb),transparent 52%),inset 0 -5px 8px rgba(0,0,0,.3);
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
.bulb-cell::after{
  content:'';
  position:absolute;
  top:42%;
  width:18%;
  height:9%;
  border-bottom:2px solid rgba(255,255,255,.64);
  border-radius:50%;
  opacity:.72;
}
.bulb-cell .bulb-glow{
  position:absolute;
  width:80%;
  height:80%;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--bulb),transparent 52%),transparent 69%);
  opacity:.58;
}
.bulb-cell .bulb-base{
  position:absolute;
  top:68%;
  width:22%;
  height:13%;
  border-radius:2px 2px 5px 5px;
  background:linear-gradient(90deg,#657080,#d7dce0 48%,#56616e);
}
.bulb-cell .bulb-base::after{
  content:'';
  position:absolute;
  left:14%;
  right:14%;
  bottom:-4px;
  height:4px;
  border-radius:0 0 3px 3px;
  background:#7d8791;
}
.bulb-cell:hover:not(:disabled){background:rgba(255,255,255,.045)}
.bulb-cell.is-selected{
  border-color:#fff2b3;
  background:rgba(255,210,106,.14);
  transform:scale(.92);
  box-shadow:inset 0 0 0 2px rgba(255,246,195,.32);
}
.bulb-cell.is-selected::before{
  box-shadow:0 0 20px var(--bulb),0 0 34px color-mix(in srgb,var(--bulb),transparent 43%);
}
.bulb-cell.is-clearing{animation:bulb-pop .32s ease both}
.bulb-cell:disabled:not(.is-clearing){opacity:.72}

/* Световая линия */
.circuit-shell{
  padding-bottom:1px;
  background:radial-gradient(circle at 20% 80%,rgba(255,162,45,.12),transparent 46%);
}
.circuit-grid{
  display:grid;
  grid-template-columns:repeat(var(--grid),minmax(0,1fr));
  gap:5px;
  width:min(calc(100% - 16px),368px);
  margin:10px auto;
  padding:7px;
  border:1px solid rgba(114,220,255,.2);
  border-radius:17px;
  background:
    linear-gradient(rgba(113,219,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(113,219,255,.035) 1px,transparent 1px),
    linear-gradient(145deg,#07101b,#0d1a2a);
  background-size:25% 25%,25% 25%,auto;
}
.circuit-cell{
  position:relative;
  min-width:44px;
  min-height:44px;
  aspect-ratio:1;
  padding:0;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.025);
  color:#9fb0c1;
  cursor:pointer;
  overflow:hidden;
  transition:border-color .16s ease,background .16s ease,filter .16s ease;
}
.circuit-cell i{
  position:absolute;
  z-index:1;
  display:none;
  background:#52667c;
  box-shadow:0 0 0 1px rgba(255,255,255,.04);
  transition:background .16s ease,box-shadow .16s ease;
}
.circuit-cell .wire-n,
.circuit-cell .wire-s{left:calc(50% - 3px);width:6px;height:52%}
.circuit-cell .wire-e,
.circuit-cell .wire-w{top:calc(50% - 3px);width:52%;height:6px}
.circuit-cell .wire-n{top:0}
.circuit-cell .wire-s{bottom:0}
.circuit-cell .wire-e{right:0}
.circuit-cell .wire-w{left:0}
.circuit-cell.has-n .wire-n,
.circuit-cell.has-e .wire-e,
.circuit-cell.has-s .wire-s,
.circuit-cell.has-w .wire-w{display:block}
.circuit-node{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:24px;
  height:24px;
  transform:translate(-50%,-50%);
  border:3px solid #62758a;
  border-radius:50%;
  background:#111c2a;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.circuit-cell b{
  position:absolute;
  z-index:3;
  left:50%;
  top:50%;
  color:#c2ced9;
  font-size:13px;
  font-weight:900;
  line-height:1;
  transform:translate(-50%,-50%);
}
.circuit-cell.is-powered i{
  background:#ffae3a;
  box-shadow:0 0 10px rgba(255,174,58,.82);
}
.circuit-cell.is-powered .circuit-node{
  border-color:#ffe09a;
  background:#ff9f24;
  box-shadow:0 0 16px rgba(255,168,43,.82);
}
.circuit-cell.is-source{
  border-color:rgba(255,180,61,.54);
  background:rgba(255,158,34,.11);
}
.circuit-cell.is-source .circuit-node{width:32px;height:32px}
.circuit-cell.is-source b{color:#241506}
.circuit-cell.is-target:not(.is-powered){
  border-color:rgba(105,220,255,.38);
  background:rgba(75,185,229,.045);
}
.circuit-cell.is-target:not(.is-powered) .circuit-node{
  border-color:#6bdcff;
  box-shadow:0 0 12px rgba(87,211,255,.32);
}
.circuit-cell:not(.has-n):not(.has-e):not(.has-s):not(.has-w):not(.is-source):not(.is-target){
  border-color:transparent;
  background:transparent;
  box-shadow:none;
}
.circuit-cell:not(.has-n):not(.has-e):not(.has-s):not(.has-w):not(.is-source):not(.is-target) .circuit-node{
  opacity:0;
}
.circuit-cell:disabled:not(.is-powered){opacity:.68}
.circuit-legend{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 14px;
  padding:1px 12px 2px;
  color:#b0bfcd;
  font-size:13px;
  line-height:1.35;
}
.circuit-legend span{display:flex;align-items:center;gap:6px}
.circuit-legend i{
  flex:0 0 12px;
  width:12px;
  height:12px;
  border:2px solid #68dcff;
  border-radius:50%;
}
.circuit-legend i.is-source{
  border-color:#ffce75;
  background:#ff9d22;
}

/* Окна памяти */
.memory-shell{
  padding-bottom:1px;
  background:linear-gradient(180deg,rgba(72,143,189,.05),transparent);
}
.memory-building{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  width:min(calc(100% - 18px),342px);
  margin:11px auto;
  padding:17px 13px 13px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px 18px 7px 7px;
  background:
    linear-gradient(90deg,transparent 49.5%,rgba(255,255,255,.025) 50%,transparent 50.5%),
    linear-gradient(135deg,#172536,#0a111c);
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.014),0 16px 36px rgba(0,0,0,.25);
}
.memory-window{
  position:relative;
  min-width:44px;
  min-height:56px;
  padding:0;
  border:2px solid #40536a;
  border-radius:5px 5px 2px 2px;
  background:linear-gradient(135deg,#07101c,#101c2b);
  cursor:pointer;
  overflow:hidden;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,filter .18s ease;
}
.memory-window::before,
.memory-window::after{content:'';position:absolute;background:#3b5068}
.memory-window::before{left:50%;top:0;bottom:0;width:2px}
.memory-window::after{left:0;right:0;top:50%;height:2px}
.memory-window>span{
  position:absolute;
  inset:4px;
  background:radial-gradient(circle,rgba(255,208,116,.025),transparent);
  transition:background .18s ease;
}
.memory-window.is-lit{
  border-color:#ffe19a;
  background:linear-gradient(135deg,#fff0ba,#d99831);
  box-shadow:0 0 19px rgba(255,188,77,.5);
}
.memory-window.is-lit>span{background:radial-gradient(circle,#fff8d4,#ffbc4b 68%)}
.memory-window.is-preview{animation:window-breathe 1.2s ease-in-out infinite alternate}

/* Три отличия: текущая и следующая крупная разметка */
.difference-shell{padding-bottom:1px}
.difference-compare{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  padding:12px 10px 4px;
}
.difference-compare figure{min-width:0;margin:0}
.difference-scene{
  position:relative;
  display:block;
  width:100%;
  max-width:100%;
  min-height:44px;
  aspect-ratio:4/3;
  padding:0;
  border:1px solid rgba(255,255,255,.15);
  border-radius:13px;
  background-image:linear-gradient(180deg,rgba(6,13,23,.03),rgba(6,13,23,.24)),var(--scene);
  background-position:center;
  background-size:cover;
  object-fit:cover;
  overflow:hidden;
}
button.difference-scene{cursor:crosshair;touch-action:manipulation}
.difference-compare figcaption{
  padding:7px 2px 0;
  color:#a4b5c5;
  font-size:13px;
  line-height:1.35;
  text-align:center;
}
.difference-effect{
  position:absolute;
  left:calc(var(--x) - var(--r));
  top:calc(var(--y) - var(--r));
  width:calc(var(--r)*2);
  height:calc(var(--r)*2);
  border-radius:50%;
  pointer-events:none;
}
.difference-effect.is-off{
  background:radial-gradient(circle,rgba(2,7,13,.74),rgba(3,8,15,.5) 58%,transparent 76%);
}
.difference-effect.is-glare{
  background:radial-gradient(circle,#fff 0 7%,rgba(255,229,159,.92) 10%,rgba(255,205,94,.2) 44%,transparent 72%);
  filter:brightness(1.16);
}
.difference-effect.is-cold{
  background:radial-gradient(circle,rgba(92,218,255,.48),rgba(67,123,255,.16) 55%,transparent 72%);
  mix-blend-mode:screen;
}
.difference-effect.is-found{
  outline:3px solid #7aebbe;
  outline-offset:2px;
}
.difference-effect.is-found::after{
  content:'✓';
  position:absolute;
  left:50%;
  top:50%;
  display:grid;
  width:30px;
  height:30px;
  place-items:center;
  transform:translate(-50%,-50%);
  border:2px solid rgba(255,255,255,.75);
  border-radius:50%;
  background:#59dca5;
  color:#061b13;
  font-size:16px;
  font-style:normal;
  font-weight:950;
  box-shadow:0 0 18px rgba(88,221,166,.54);
}
.difference-hint{
  position:absolute;
  left:calc(var(--x) - var(--r));
  top:calc(var(--y) - var(--r));
  width:calc(var(--r)*2);
  height:calc(var(--r)*2);
  border:3px solid #ffbd59;
  border-radius:50%;
  opacity:0;
  pointer-events:none;
  box-shadow:0 0 0 7px rgba(255,179,62,.12);
}
.difference-hint.is-visible{opacity:1;animation:hint-ring 1.1s ease-in-out infinite}
.difference-stage{
  position:relative;
  display:grid;
  gap:8px;
  width:min(calc(100% - 20px),520px);
  max-width:100%;
  margin:11px auto;
  border:0;
  background:transparent;
  box-shadow:none;
  isolation:isolate;
  overflow:visible;
}
.difference-stage>.difference-scene,
.difference-stage .difference-layer{
  width:100%;
  max-width:none;
}
.difference-stage>.difference-scene{
  position:relative;
  inset:auto;
  height:auto;
  aspect-ratio:4/3;
  border:1px solid rgba(132,219,255,.22);
  border-radius:16px;
  box-shadow:inset 0 0 28px rgba(0,0,0,.3),0 12px 30px rgba(0,0,0,.2);
}
.difference-stage .difference-layer{
  position:absolute;
  inset:0;
  height:100%;
  aspect-ratio:auto;
  border:0;
  border-radius:0;
  background-position:center;
  background-size:cover;
  object-fit:cover;
}
.difference-layer{
  z-index:2;
  opacity:var(--layer-opacity,1);
  pointer-events:none;
  transition:opacity .2s ease;
}
.difference-hit{
  position:absolute;
  z-index:4;
  left:var(--x,50%);
  top:var(--y,50%);
  width:max(44px,var(--size,12%));
  height:max(44px,var(--size,12%));
  min-height:44px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:transparent;
  cursor:crosshair;
  transform:translate(-50%,-50%);
}
.difference-hit:hover:not(:disabled){background:rgba(118,224,255,.08)}
.difference-marker{
  position:absolute;
  z-index:5;
  left:var(--x,50%);
  top:var(--y,50%);
  display:grid;
  width:36px;
  height:36px;
  place-items:center;
  border:3px solid #78e9ba;
  border-radius:50%;
  background:rgba(5,19,16,.68);
  color:#90f1c9;
  font-size:18px;
  font-weight:950;
  pointer-events:none;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 6px rgba(92,225,172,.12);
}
.difference-compare-toggle{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  width:min(calc(100% - 24px),520px);
  margin:10px auto 0;
  padding:4px;
  border:1px solid rgba(125,215,252,.18);
  border-radius:13px;
  background:rgba(2,8,15,.56);
}
.difference-compare-toggle button{
  min-height:44px;
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:#b8c8d6;
  font-size:14px;
  font-weight:750;
}
.difference-compare-toggle button[aria-pressed="true"]{
  border-color:rgba(255,195,89,.32);
  background:rgba(255,174,49,.13);
  color:#ffe1a8;
}
.difference-found-list{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:0;
  padding:10px 12px 2px;
  list-style:none;
  color:#bfd0de;
  font-size:13px;
}
.difference-found-list li{
  min-height:32px;
  padding:6px 9px;
  border:1px solid rgba(118,226,179,.2);
  border-radius:999px;
  background:rgba(63,181,132,.07);
}

/* Резерв района */
.balance-shell{padding-bottom:1px}
.balance-city{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  padding:13px 12px 7px;
  background:linear-gradient(180deg,rgba(84,184,224,.06),transparent);
}
.balance-city span{
  display:grid;
  gap:6px;
  justify-items:center;
  min-width:0;
  color:#9fb1c3;
  font-size:13px;
  line-height:1.25;
  text-align:center;
}
.balance-city i{
  display:block;
  width:34px;
  height:34px;
  border:2px solid #52667b;
  border-radius:50%;
  background:radial-gradient(circle,rgba(109,216,255,.13),transparent);
  opacity:calc(.46 + var(--power)*.54);
}
.balance-city span.is-ready{color:#ffdc9b}
.balance-city span.is-ready i{
  border-color:#ffd17a;
  background:radial-gradient(circle,#fff1b2 0 12%,#ffb343 22%,rgba(255,175,65,.14) 65%);
  box-shadow:0 0 18px rgba(255,178,65,.46);
}
.balance-loads{
  display:grid;
  gap:8px;
  padding:8px 11px;
}
.balance-row{
  display:grid;
  grid-template-columns:minmax(100px,1fr) auto;
  gap:8px 10px;
  align-items:center;
  padding:10px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}
.balance-row>div:first-child{display:grid;gap:3px;min-width:0}
.balance-row strong{color:#e8f0f7;font-size:14px;line-height:1.3}
.balance-row small{color:#a0b0c1;font-size:13px;line-height:1.35}
.balance-row.is-required small{color:#e4ba72}
.balance-row.is-ready{
  border-color:rgba(101,226,172,.3);
  background:rgba(54,172,124,.07);
}
.balance-stepper{
  display:grid;
  grid-template-columns:44px 44px 44px;
  align-items:center;
}
.balance-stepper button{
  width:44px;
  height:44px;
  padding:0;
  border:1px solid rgba(105,214,255,.28);
  background:rgba(70,180,225,.1);
  color:#e3f8ff;
  font-size:20px;
  font-weight:850;
  cursor:pointer;
}
.balance-stepper button:first-child{border-radius:10px 0 0 10px}
.balance-stepper button:last-child{border-radius:0 10px 10px 0}
.balance-stepper button:disabled{opacity:.5}
.balance-stepper output{
  display:grid;
  height:44px;
  place-items:center;
  border-block:1px solid rgba(105,214,255,.22);
  background:#0b1725;
  color:#ffd27f;
  font-size:15px;
  font-weight:850;
}
.balance-meter{
  position:relative;
  grid-column:1/-1;
  height:9px;
  border-radius:999px;
  background:#223247;
  overflow:visible;
}
.balance-meter i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#58cff3,#ffb449);
  transition:width .2s ease;
}
.balance-meter span{
  position:absolute;
  top:-4px;
  width:3px;
  height:17px;
  border-radius:3px;
  background:#fff0bd;
  box-shadow:0 0 6px #ffc55e;
}

/* Световой кадр */
.mosaic-shell{padding-bottom:1px}
.mosaic-board{
  position:relative;
  display:grid;
  grid-template-columns:repeat(var(--grid),minmax(0,1fr));
  gap:3px;
  width:min(calc(100% - 12px),408px);
  max-width:100%;
  aspect-ratio:4/3;
  margin:10px auto;
  padding:5px;
  border:1px solid rgba(255,191,85,.28);
  border-radius:15px;
  background:#07101b;
  box-shadow:0 12px 28px rgba(0,0,0,.2);
  overflow:hidden;
}
.mosaic-piece{
  position:relative;
  min-width:44px;
  min-height:44px;
  padding:0;
  border:1px solid rgba(255,255,255,.13);
  border-radius:6px;
  background-image:linear-gradient(180deg,rgba(5,10,18,.015),rgba(5,10,18,.16)),var(--scene);
  background-position:var(--piece-x) var(--piece-y);
  background-size:calc(var(--grid)*100%) calc(var(--grid)*100%);
  cursor:pointer;
  overflow:hidden;
  transition:transform .18s ease,filter .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.mosaic-piece>span{
  position:absolute;
  right:5px;
  bottom:5px;
  display:grid;
  width:26px;
  height:26px;
  place-items:center;
  border:1px solid rgba(255,255,255,.2);
  border-radius:50%;
  background:rgba(4,10,18,.76);
  color:#edf5fb;
  font-size:13px;
  font-weight:850;
  opacity:0;
  transform:scale(.82);
  transition:opacity .16s ease,transform .16s ease;
  backdrop-filter:blur(5px);
}
.mosaic-piece:focus-visible>span,
.mosaic-piece.is-selected>span{
  opacity:1;
  transform:scale(1);
}
.mosaic-piece.is-selected{
  z-index:2;
  border-color:#fff0aa;
  transform:scale(.95);
  filter:brightness(1.13);
  box-shadow:0 0 0 2px rgba(255,196,83,.34);
}
.mosaic-piece.is-correct{border-color:rgba(101,225,173,.36)}
.mosaic-preview{
  position:absolute;
  z-index:5;
  inset:5px;
  border-radius:10px;
  background-image:linear-gradient(180deg,rgba(4,9,17,.015),rgba(4,9,17,.1)),var(--scene);
  background-position:center;
  background-size:cover;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.mosaic-preview.is-visible{opacity:1}
.mosaic-board.is-previewing::after{
  content:'ЦЕЛЬНЫЙ КАДР';
  position:absolute;
  z-index:6;
  left:50%;
  bottom:14px;
  min-height:32px;
  padding:7px 10px;
  border:1px solid rgba(255,218,147,.22);
  border-radius:8px;
  background:rgba(4,10,18,.76);
  color:#ffe2a4;
  font-size:13px;
  font-weight:850;
  letter-spacing:.07em;
  transform:translateX(-50%);
  white-space:nowrap;
}

/* Адаптация до 320 px */
@media (max-width:620px){
  .mission-stage{gap:11px;margin-top:12px}
  .mission-context{align-items:center;flex-direction:row}
  .mission-visual,
  .light-lab,
  .photo-preview{min-height:0}
  .switch-grid{grid-template-columns:1fr}
  .draw-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .draw-actions .mission-check{grid-column:1/-1}
  .mixer-controls label{grid-template-columns:1fr}
  .photo-actions{grid-template-columns:1fr}
  .order-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rhythm-reference{gap:7px}
  .rhythm-reference i{width:30px}
}
@media (max-width:520px){
  .order-pool{grid-template-columns:1fr}
  .rhythm-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rhythm-actions .rhythm-tap{grid-column:1/-1;grid-row:1}
  .difference-compare{grid-template-columns:1fr;gap:12px;padding-inline:10px}
}
@media (max-width:420px){
  .mission-guide{grid-template-columns:82px minmax(0,1fr);gap:4px 10px;padding:10px 11px}
  .mission-guide details{grid-column:2}
  .game-objective{grid-template-columns:1fr}
  .game-counters{justify-content:flex-start}
  .game-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .match3-grid{width:calc(100% - 8px);margin:8px auto}
  .circuit-grid{width:calc(100% - 14px);margin:9px auto}
  .memory-building{width:calc(100% - 16px);margin:10px auto}
  .balance-city{grid-template-columns:repeat(2,minmax(0,1fr))}
  .balance-row{grid-template-columns:minmax(96px,1fr) auto}
  .balance-stepper{justify-content:start}
  .mosaic-board{width:calc(100% - 10px);margin:9px auto}
}
@media (max-width:360px){
  .mission-guide{grid-template-columns:76px minmax(0,1fr)}
  .mission-guide>p,
  .mission-guide details p{line-height:1.45}
  .mission-range{grid-template-columns:1fr;gap:0;padding-top:7px}
  .palette-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mixer-controls label{grid-template-columns:1fr;gap:2px}
  .balance-row{grid-template-columns:minmax(88px,1fr) auto;padding:9px}
  .balance-stepper{grid-template-columns:44px 42px 44px}
  .game-actions button{padding-inline:7px}
}
@media (max-width:330px){
  .mission-guide{grid-template-columns:1fr}
  .mission-guide details{grid-column:1}
  .match3-grid{gap:1px;padding:3px}
  .mixer-controls label{grid-template-columns:1fr}
  .balance-row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .mission-stage *,
  .mission-stage *::before,
  .mission-stage *::after{
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }
}

/* Финальная синхронизация игровых поверхностей с реальными кадрами */
.mission-visual,
.light-lab,
.draw-surface,
.draw-canvas,
.hotspot-wrap,
.align-wrap,
.difference-scene,
.difference-stage>.difference-scene,
.mosaic-board{
  aspect-ratio:3/2;
}
.draw-wrap::after{display:none}
.difference-scene{touch-action:pan-y}
.photo-preview{aspect-ratio:4/3}
.photo-preview .photo-backdrop{
  background-position:center;
  background-size:cover;
  filter:blur(18px) brightness(.42) saturate(.8);
  opacity:.82;
  transform:scale(1.08);
}
.photo-preview img{object-fit:contain}

/* В changed-слое меняются сами пиксели фотографии, а не рисуются условные пятна. */
.difference-scene .difference-effect{
  position:absolute;
  inset:auto;
  left:calc(var(--x) - var(--rx));
  top:calc(var(--y) - var(--ry));
  width:calc(var(--rx)*2);
  height:calc(var(--ry)*2);
  border:0;
  border-radius:46% 54% 50% 50%/52% 47% 53% 48%;
  background-image:none;
  opacity:1;
  outline:0;
  pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 0 44%,rgba(0,0,0,.86) 62%,rgba(0,0,0,.34) 82%,transparent 100%);
  mask-image:radial-gradient(ellipse at center,#000 0 44%,rgba(0,0,0,.86) 62%,rgba(0,0,0,.34) 82%,transparent 100%);
}
.difference-scene .difference-effect.is-off{
  background:rgba(0,3,8,.035);
  -webkit-backdrop-filter:brightness(.34) saturate(.5) contrast(.98);
  backdrop-filter:brightness(.34) saturate(.5) contrast(.98);
  filter:none;
}
.difference-scene .difference-effect.is-cold{
  background:rgba(0,102,255,.14);
  -webkit-backdrop-filter:hue-rotate(155deg) saturate(2.15) brightness(1.04) contrast(1.06);
  backdrop-filter:hue-rotate(155deg) saturate(2.15) brightness(1.04) contrast(1.06);
  filter:none;
  mix-blend-mode:normal;
}
.difference-scene .difference-effect.is-glare{
  background:radial-gradient(ellipse at center,#fff 0 9%,rgba(255,247,211,.9) 15%,rgba(255,188,61,.62) 35%,rgba(255,143,29,.24) 64%,transparent 96%);
  -webkit-backdrop-filter:brightness(1.72) saturate(.82);
  backdrop-filter:brightness(1.72) saturate(.82);
  filter:none;
}
.difference-marker{
  position:absolute;
  z-index:8;
  left:var(--x);
  top:var(--y);
  display:grid;
  width:28px;
  height:28px;
  place-items:center;
  border:2px solid rgba(255,255,255,.86);
  border-radius:50%;
  background:#62e0aa;
  color:#071a13;
  font-size:13px;
  font-weight:950;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.72);
  transition:opacity .16s ease,transform .2s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 0 0 5px rgba(98,224,170,.16),0 5px 16px rgba(0,0,0,.38);
}
.difference-marker.is-visible{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
.toggle-switch.is-risk{
  border-color:rgba(255,139,114,.22);
}
.toggle-switch.is-risk small{color:#e8a79a}
.toggle-switch.is-risk.is-on{
  border-color:rgba(255,105,89,.72);
  background:linear-gradient(180deg,rgba(91,34,32,.82),rgba(39,18,21,.94));
  box-shadow:inset 3px 0 #ff715f;
}
.toggle-switch.is-risk.is-on .toggle-lamp{
  border-color:#ff9a87;
  background:#ff6558;
  box-shadow:0 0 14px rgba(255,101,88,.72);
}
.photo-input:focus-within{
  outline:3px solid rgba(115,224,255,.88);
  outline-offset:3px;
}
.difference-scene.is-original .difference-marker{opacity:0}
@media (forced-colors:active){
  .mission-stage :where(button,input,summary,[tabindex]):focus-visible{outline:3px solid Highlight}
  .mission-interaction,
  .mission-guide,
  .mission-audience-cue,
  .game-objective{border-color:CanvasText}
}

/* Состояния, добавленные в финальные игровые движки */
.game-counters i{
  font-size:13px;
  font-style:normal;
  font-weight:650;
}
.match3-city{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:5px;
  width:min(calc(100% - 24px),356px);
  height:76px;
  margin:9px auto 0;
  padding:18px 12px 15px;
  border:1px solid rgba(112,216,255,.15);
  border-radius:13px;
  background:
    linear-gradient(180deg,rgba(76,184,230,.035),rgba(3,8,15,.42)),
    linear-gradient(180deg,#122135,#08111d);
  overflow:hidden;
}
.match3-city::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:12px;
  height:2px;
  background:linear-gradient(90deg,transparent,#456079 12%,#456079 88%,transparent);
}
.match3-city>i{
  position:relative;
  z-index:1;
  display:block;
  width:30px;
  height:34px;
  border:1px solid #385069;
  border-bottom:0;
  border-radius:3px 3px 0 0;
  background:
    repeating-linear-gradient(90deg,transparent 0 6px,rgba(119,187,219,.13) 6px 9px),
    repeating-linear-gradient(180deg,transparent 0 7px,rgba(119,187,219,.12) 7px 10px),
    #101d2d;
  opacity:.66;
  transition:height .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease,opacity .22s ease;
}
.match3-city>i:nth-child(2){height:43px}
.match3-city>i:nth-child(3){height:51px}
.match3-city>i:nth-child(4){height:39px}
.match3-city>i:nth-child(5){height:47px}
.match3-city>i.is-lit{
  border-color:#ffc768;
  background:
    repeating-linear-gradient(90deg,transparent 0 6px,rgba(255,237,180,.84) 6px 9px),
    repeating-linear-gradient(180deg,transparent 0 7px,rgba(255,196,77,.8) 7px 10px),
    linear-gradient(180deg,#9f5a18,#3a260f);
  box-shadow:0 0 15px rgba(255,177,56,.36);
  opacity:1;
}
.match3-city>span{
  position:absolute;
  z-index:2;
  left:10px;
  top:7px;
  color:#a8bdcf;
  font-size:13px;
  font-weight:750;
  line-height:1.25;
}
.bulb-symbol{
  position:absolute;
  z-index:3;
  left:50%;
  top:41%;
  color:rgba(4,13,22,.76);
  font-size:13px;
  font-weight:950;
  line-height:1;
  text-shadow:0 1px rgba(255,255,255,.34);
  transform:translate(-50%,-50%);
}
.memory-legend{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px 16px;
  padding:0 12px 2px;
  color:#a9bac9;
  font-size:13px;
  line-height:1.35;
}
.memory-legend>span{display:flex;align-items:center;gap:7px}
.memory-legend i{
  display:block;
  width:14px;
  height:14px;
  border:2px solid #50657d;
  border-radius:3px;
  background:#101c2b;
}
.memory-legend i.is-lit{
  border-color:#ffe19a;
  background:#ffbb4a;
  box-shadow:0 0 9px rgba(255,188,77,.58);
}
.balance-scenario{
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  gap:8px 11px;
  align-items:start;
  margin:10px 11px 2px;
  padding:10px 11px;
  border:1px solid rgba(255,195,88,.2);
  border-radius:11px;
  background:linear-gradient(135deg,rgba(255,176,48,.085),rgba(80,191,232,.035));
}
.balance-scenario>span{
  padding-top:2px;
  color:#ffca75;
  font-size:13px;
  font-weight:850;
  letter-spacing:.055em;
  line-height:1.35;
  text-transform:uppercase;
}
.balance-scenario p{
  margin:0;
  color:#d5e0e9;
  font-size:14px;
  line-height:1.45;
}
.balance-row em{
  color:#a9b8c7;
  font-size:13px;
  font-style:normal;
  font-weight:750;
  line-height:1.25;
}
.balance-row.is-required em{color:#e8bd74}
.balance-row.is-ready em{color:#83e6bb}

/* Точная разметка крупного сравнения «до / после» */
.difference-scene .difference-layer{
  background-position:center;
  background-size:cover;
}
.difference-scene .difference-layer.is-base{background-image:var(--scene)}
.difference-scene .difference-layer.is-changed{opacity:1}
.difference-scene.is-original .difference-layer.is-changed{opacity:0}
.difference-scene .difference-effect{
  left:calc(var(--x) - var(--rx,var(--r)));
  top:calc(var(--y) - var(--ry,var(--r)));
  width:calc(var(--rx,var(--r))*2);
  height:calc(var(--ry,var(--r))*2);
}
.difference-scene .difference-hit{
  left:var(--x,50%);
  top:var(--y,50%);
  width:max(44px,calc(var(--rx,6%)*2));
  height:max(44px,calc(var(--ry,8%)*2));
  transform:translate(-50%,-50%);
}
.difference-scene .difference-hit[aria-hidden="true"]{pointer-events:none}
.difference-scene .difference-hint{
  left:calc(var(--x) - var(--rx,var(--r)));
  top:calc(var(--y) - var(--ry,var(--r)));
  width:calc(var(--rx,var(--r))*2);
  height:calc(var(--ry,var(--r))*2);
}
.difference-cursor{
  position:absolute;
  z-index:7;
  left:var(--x,50%);
  top:var(--y,50%);
  display:block;
  width:30px;
  height:30px;
  border:2px solid #fff3b9;
  border-radius:50%;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 5px rgba(255,196,79,.18),0 0 16px rgba(255,183,53,.5);
}
.difference-cursor::before,
.difference-cursor::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  background:#fff3b9;
  transform:translate(-50%,-50%);
}
.difference-cursor::before{width:42px;height:1px}
.difference-cursor::after{width:1px;height:42px}
.difference-cursor.is-visible{opacity:1}
.difference-scene-label{
  position:absolute;
  z-index:8;
  left:10px;
  bottom:10px;
  min-height:32px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:9px;
  background:rgba(3,9,17,.74);
  color:#edf5fb;
  font-size:13px;
  font-weight:800;
  line-height:1.3;
  pointer-events:none;
  backdrop-filter:blur(8px);
}
.difference-compare-bar{
  position:relative;
  z-index:9;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:7px 10px;
  align-items:center;
  padding:7px;
  border:1px solid rgba(133,219,255,.18);
  border-radius:12px;
  background:rgba(3,9,17,.82);
  backdrop-filter:blur(10px);
}
.difference-stage:has(.difference-compare-bar) .difference-scene-label{bottom:10px}
.difference-compare-bar .difference-compare-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-height:44px;
  margin:0;
  padding:8px 10px;
  border:1px solid rgba(255,197,91,.3);
  border-radius:9px;
  background:rgba(255,174,49,.11);
  color:#ffe3b0;
  font-size:13px;
  font-weight:800;
  line-height:1.3;
  text-align:center;
}
.difference-compare-bar .difference-compare-toggle[aria-pressed="true"]{
  border-color:rgba(113,222,255,.4);
  background:rgba(75,187,230,.14);
  color:#dff7ff;
}
.difference-compare-bar>span{
  max-width:116px;
  color:#aebdca;
  font-size:13px;
  line-height:1.3;
}
.difference-found-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}
.difference-found-list li{
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  gap:6px;
  align-items:center;
  min-height:48px;
  padding:6px;
  border:1px solid rgba(128,204,235,.14);
  border-radius:10px;
  background:rgba(255,255,255,.025);
  color:#aebdca;
  font-size:13px;
  line-height:1.25;
}
.difference-found-list li>b{
  display:grid;
  width:24px;
  height:24px;
  place-items:center;
  border:1px solid rgba(120,214,251,.26);
  border-radius:50%;
  color:#84defd;
  font-size:13px;
}
.difference-found-list li.is-found{
  border-color:rgba(105,226,178,.28);
  background:rgba(58,180,131,.075);
  color:#b9e9d5;
}
.difference-found-list li.is-found>b{
  border-color:#72e2b2;
  background:#72e2b2;
  color:#071a13;
}
@media (max-width:420px){
  .difference-compare-bar{
    grid-template-columns:minmax(0,1fr) 104px;
    gap:6px;
  }
  .difference-compare-bar>span{
    max-width:none;
    text-align:center;
  }
  .difference-stage:has(.difference-compare-bar) .difference-scene-label{bottom:10px}
  .balance-scenario{
    grid-template-columns:1fr;
    gap:3px;
  }
}
@media (max-width:520px){
  .difference-found-list{grid-template-columns:1fr}
  .difference-found-list li{
    grid-template-columns:28px minmax(0,1fr);
    min-height:44px;
    padding:8px 10px;
  }
}

/* Собранная последовательность читается целиком и не прячется в горизонтальном скролле. */
.order-result{overflow-x:hidden}
.order-result ol{
  display:grid;
  gap:7px;
  width:100%;
  min-width:0;
}
.order-result li{
  position:relative;
  width:100%;
}
.order-result li button{
  width:100%;
  max-width:none;
}
.order-result li:not(:last-child)::after{
  content:'';
  position:absolute;
  z-index:2;
  left:23px;
  bottom:-8px;
  width:2px;
  height:9px;
  background:linear-gradient(#5ed9fb,rgba(94,217,251,.16));
  pointer-events:none;
}