:root{
  --void:#080718;
  --deep:#0E0C28;
  --panel:#15113A;
  --line:#2C2560;
  --signal:#63E6D2;
  --signal-soft:rgba(99,230,210,.16);
  --ember:#FFC163;
  --flare:#FF6B9D;
  --text:#EDEAFF;
  --dim:#8B86BE;
  --cut:11px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--void);
  color:var(--text);
  font-family:'Manrope',system-ui,sans-serif;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  touch-action:manipulation;
}
/* Туманность — крупные мягкие облака на canvas, перерисовываются только при
   смене галактики/ресайзе. Дрейф — чисто CSS-трансформ, дёшево по кадрам. */
#nebula{
  position:fixed;inset:-15%;width:130%;height:130%;z-index:0;
  pointer-events:none;filter:blur(2px);opacity:.85;
  animation:nebulaDrift 70s ease-in-out infinite alternate;
}
@keyframes nebulaDrift{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-2%,1.5%) scale(1.05)}
  100%{transform:translate(1.5%,-1%) scale(1.03)}
}
#stars{position:fixed;inset:0;z-index:0}
#drifters{position:fixed;inset:0;z-index:0;pointer-events:none}
.glowfield{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 40% at 70% 15%, var(--glow1,rgba(99,230,210,.10)), transparent 70%),
    radial-gradient(50% 35% at 20% 85%, var(--glow2,rgba(255,107,157,.09)), transparent 70%);
}

.app{
  position:relative;z-index:2;
  width:min(100vw,480px);height:100dvh;
  display:flex;flex-direction:column;
  padding:14px 16px 18px;
}

/* ---------- HUD ---------- */
.hud{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sector{min-width:0}
.eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;
  color:var(--dim);text-transform:uppercase;
}
.sector-name{
  font-family:'Unbounded',sans-serif;font-weight:600;font-size:15px;
  letter-spacing:.02em;margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hud-right{display:flex;align-items:center;gap:8px;flex:none}
.wallet{
  display:flex;align-items:center;gap:7px;flex:none;
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:15px;
  color:var(--ember);padding:7px 11px;
  background:rgba(255,193,99,.07);
  border:1px solid rgba(255,193,99,.25);
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}
.wallet svg{filter:drop-shadow(0 0 5px rgba(255,193,99,.6))}
.wallet.bump{animation:bump .45s ease}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.14)}100%{transform:scale(1)}}

.icon-btn{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:34px;height:34px;padding:0;cursor:pointer;
  color:var(--signal);background:rgba(99,230,210,.07);
  border:1px solid rgba(99,230,210,.25);
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));
  transition:background .18s,border-color .18s,color .18s;
}
.icon-btn:active{background:rgba(99,230,210,.14)}
.icon-btn.muted{color:var(--dim);background:rgba(255,255,255,.03);border-color:var(--line)}
.icon-btn .snd-off{display:none}
.icon-btn.muted .snd-on{display:none}
.icon-btn.muted .snd-off{display:block}
.icon-btn:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

.logline{
  font-size:12.5px;color:var(--dim);line-height:1.5;
  margin:12px 0 0;min-height:19px;
  border-left:2px solid var(--line);padding-left:10px;
}

/* ---------- board ---------- */
.stage{flex:1;display:flex;align-items:center;justify-content:center;position:relative}
.board{position:relative;touch-action:none}
.trail{position:absolute;inset:0;overflow:visible;pointer-events:none;z-index:1}
/* Обучающая линия первого уровня: пульсирует и течёт в сторону маяка. */
.trail .guide{animation:guidepulse 1.6s ease-in-out infinite,guideflow 1.2s linear infinite}
@keyframes guidepulse{0%,100%{stroke-opacity:.2}50%{stroke-opacity:.6}}
@keyframes guideflow{to{stroke-dashoffset:-13}}
.tile{
  position:absolute;
  background:linear-gradient(158deg,rgba(99,230,210,.17),rgba(99,230,210,.035));
  border:1px solid rgba(99,230,210,.34);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
  transition:transform .28s cubic-bezier(.3,1.4,.5,1),opacity .28s ease,border-color .2s,background .2s;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;
  z-index:2;
}
.tile.multi{
  border-color:rgba(255,107,157,.5);
  background:linear-gradient(158deg,rgba(255,107,157,.18),rgba(255,107,157,.04));
}
/* Трипл-плита — три захода, оранжевая (даблы остаются розовыми). */
.tile.multi.triple{
  border-color:rgba(255,138,61,.55);
  background:linear-gradient(158deg,rgba(255,138,61,.19),rgba(255,138,61,.04));
}
.tile.multi.triple .pip{background:#FF8A3D;box-shadow:0 0 6px rgba(255,138,61,.85)}
.tile.reach{border-color:rgba(99,230,210,.85);box-shadow:0 0 14px rgba(99,230,210,.22) inset}
.tile.multi.reach{border-color:rgba(255,107,157,.9);box-shadow:0 0 14px rgba(255,107,157,.2) inset}
.tile.multi.triple.reach{border-color:rgba(255,138,61,.95);box-shadow:0 0 14px rgba(255,138,61,.22) inset}
.tile.gone{transform:scale(.55) rotate(6deg);opacity:0;pointer-events:none}
.tile.hint{animation:hintpulse 1.1s ease-in-out infinite}
/* Номер шага подсказки: 1-2-3 в углу плиты, чтобы порядок ходов был однозначен. */
.hint-n{
  position:absolute;top:3px;left:6px;
  font:700 12px 'JetBrains Mono',monospace;
  color:#FFC163;text-shadow:0 0 7px rgba(255,193,99,.9);
}
@keyframes hintpulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,193,99,0) inset,0 0 0 0 rgba(255,193,99,0)}
  50%{box-shadow:0 0 20px 2px rgba(255,193,99,.3) inset,0 0 14px rgba(255,193,99,.3)}
}
/* Стартовая плита — едва заметный тёплый оттенок, площадка запуска. */
.tile.start{
  border-color:rgba(237,234,255,.55);
  background:linear-gradient(158deg,rgba(237,234,255,.15),rgba(237,234,255,.03));
}
/* Финальная плита — цель маршрута, видна с начала уровня как маяк.
   Усилено 20.08.2026 («выход должен быть заметнее»): яркое ядро крупнее
   и расходящееся кольцо-пинг, как отметка цели на радаре. */
.tile.end{
  border-color:rgba(99,230,210,1);
  border-width:2px;
  animation:endpulse 2.4s ease-in-out infinite;
}
.tile.end::before{
  content:'';position:absolute;left:50%;top:50%;
  width:18%;height:18%;transform:translate(-50%,-50%);
  border-radius:50%;background:var(--signal);
  box-shadow:0 0 10px 3px rgba(99,230,210,.95);
}
.tile.end::after{
  content:'';position:absolute;left:50%;top:50%;
  width:58%;height:58%;border-radius:50%;
  border:1.5px solid rgba(99,230,210,.9);
  transform:translate(-50%,-50%) scale(.35);
  animation:endping 2s ease-out infinite;
}
@keyframes endping{
  0%{transform:translate(-50%,-50%) scale(.35);opacity:1}
  75%,100%{transform:translate(-50%,-50%) scale(1.25);opacity:0}
}
@keyframes endpulse{
  0%,100%{box-shadow:0 0 14px 2px rgba(99,230,210,.3) inset}
  50%{box-shadow:0 0 24px 5px rgba(99,230,210,.5) inset}
}
/* Пары «переключатель → барьер»: цвет пары общий для обеих плит (--pairc, RGB). */
.tile.pair0{--pairc:255,184,77}
.tile.pair1{--pairc:184,140,255}
.tile.pair2{--pairc:96,170,255}
/* Запертый барьер: штрихованное силовое поле и скобы по углам в цвете пары. */
.tile.bar.locked{
  border-color:rgba(var(--pairc),.7);
  background:
    repeating-linear-gradient(45deg,rgba(var(--pairc),.16) 0 4px,transparent 4px 10px),
    linear-gradient(158deg,rgba(var(--pairc),.1),rgba(var(--pairc),.03));
  animation:barpulse 2s ease-in-out infinite;
}
@keyframes barpulse{
  0%,100%{box-shadow:0 0 8px 0 rgba(var(--pairc),.12) inset}
  50%{box-shadow:0 0 16px 3px rgba(var(--pairc),.3) inset}
}
/* Открытый барьер — лёгкий след цвета пары, чтобы было видно, что открыл. */
.tile.bar:not(.locked){border-color:rgba(var(--pairc),.35)}
/* Переключатель: ромб-ядро в цвете пары; после срабатывания гаснет. */
.tile.sw{border-color:rgba(var(--pairc),.55)}
.sw-mark,.bar-mark{
  position:absolute;left:50%;top:50%;
  width:46%;height:46%;transform:translate(-50%,-50%);
  pointer-events:none;
}
.sw-core{fill:rgba(var(--pairc),.16);stroke:rgba(var(--pairc),.85);stroke-width:1.4}
.sw-dot{fill:rgb(var(--pairc));filter:drop-shadow(0 0 3px rgba(var(--pairc),.9))}
.tile.sw.spent .sw-core{stroke:rgba(var(--pairc),.3);fill:none}
.tile.sw.spent .sw-dot{fill:rgba(var(--pairc),.3);filter:none}
.bar-mark{width:74%;height:74%}
.bar-brace{fill:none;stroke:rgba(var(--pairc),.8);stroke-width:1.6;stroke-linecap:round}

.pips{display:flex;gap:3px}

/* ---------- вступительная история ---------- */
.story-art{margin:6px 0 2px}
.story-art svg{width:100%;height:auto;display:block}
.story-dots{display:flex;gap:6px;justify-content:center;margin:10px 0 4px}
.story-dot{width:6px;height:6px;border-radius:50%;background:rgba(207,203,245,.25)}
.story-dot.on{background:#FFC163;box-shadow:0 0 6px rgba(255,193,99,.7)}

/* ---------- стартовая карта маршрута ---------- */
#routeMapStart .route-node.current{cursor:pointer}
#routeMapStart .route-node.current .route-dot{
  animation:startnode 1.6s ease-in-out infinite;
}
@keyframes startnode{
  0%,100%{filter:drop-shadow(0 0 2px rgba(99,230,210,.4))}
  50%{filter:drop-shadow(0 0 10px rgba(99,230,210,.9))}
}
.map-hint{color:#FFC163;font-size:13px;text-align:center;animation:hintblink 2.2s ease-in-out infinite}
@keyframes hintblink{0%,100%{opacity:.55}50%{opacity:1}}

/* ---------- мини-демо в обучалках ---------- */
.tut-demo{position:relative;margin:16px auto 8px}
.tut-tile{
  position:absolute;width:30px;height:30px;
  background:linear-gradient(158deg,rgba(99,230,210,.17),rgba(99,230,210,.035));
  border:1px solid rgba(99,230,210,.4);
  clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px));
  transition:opacity .35s ease,transform .35s ease;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px;
}
.tut-tile.gone{opacity:0;transform:scale(.6) rotate(6deg)}
.tut-tile.end{border-color:rgba(99,230,210,.9)}
.tut-tile.end::before{
  content:'';position:absolute;left:50%;top:50%;width:5px;height:5px;
  margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--signal);
  box-shadow:0 0 6px 1px rgba(99,230,210,.8);
}
.tut-tile.multi{border-color:rgba(255,107,157,.55);background:linear-gradient(158deg,rgba(255,107,157,.18),rgba(255,107,157,.04))}
.tut-tile.multi.triple{border-color:rgba(255,138,61,.6);background:linear-gradient(158deg,rgba(255,138,61,.19),rgba(255,138,61,.04))}
.tut-pips{display:flex;gap:2px}
.tut-pips i{width:4px;height:4px;background:#FF6B9D;box-shadow:0 0 4px rgba(255,107,157,.8)}
.tut-tile.triple .tut-pips i{background:#FF8A3D;box-shadow:0 0 4px rgba(255,138,61,.8)}
.tut-tile.sw{border-color:rgba(255,184,77,.7)}
.tut-tile.sw::before{
  content:'';position:absolute;left:50%;top:50%;width:9px;height:9px;
  margin:-4.5px 0 0 -4.5px;border:1px solid rgba(255,184,77,.9);
  transform:rotate(45deg);
}
.tut-tile.bar.locked{
  border-color:rgba(255,184,77,.75);
  background:repeating-linear-gradient(45deg,rgba(255,184,77,.2) 0 3px,transparent 3px 7px);
}
.tut-probe{
  position:absolute;left:0;top:0;z-index:2;pointer-events:none;
  transition:transform .5s cubic-bezier(.3,1.3,.5,1);
}
.tut-probe.win svg{filter:drop-shadow(0 0 7px rgba(255,193,99,.9))}
.pip{width:5px;height:5px;background:var(--flare);box-shadow:0 0 6px rgba(255,107,157,.8)}

.probe{
  position:absolute;z-index:4;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  transition:transform .22s cubic-bezier(.32,1.35,.45,1);
}
/* Победа: зонд разгоняется и уходит вглубь экрана, тает и уменьшается. */
.probe.launching{
  transition:transform .82s cubic-bezier(.5,0,.85,1),opacity .82s ease-in;
  opacity:0;
}
/* Цвета зонда — через переменные: виды зонда открываются за обломки данных
   (см. content/archive.js) и меняют только палитру, силуэт остаётся. */
.probe svg{filter:drop-shadow(0 0 9px rgba(var(--probe-glow,255,193,99),.85))}
.probe-hull{fill:var(--probe-hull,#FFC163)}
.probe-hull-light{fill:var(--probe-light,#FFE7BE)}
.probe-fin{fill:var(--probe-fin,#C98A4A);opacity:.9}
.probe-eye{fill:var(--signal);filter:drop-shadow(0 0 3px rgba(99,230,210,.9))}
.probe-flame{
  fill:var(--probe-flame,var(--flare));
  transform-box:fill-box;transform-origin:50% 0%;
  animation:probeIdle 1.6s ease-in-out infinite;
}
@keyframes probeIdle{
  0%,100%{opacity:.55;transform:scaleY(.8)}
  50%{opacity:1;transform:scaleY(1.2)}
}
.probe-body.land{animation:probeLand .34s cubic-bezier(.3,1.6,.4,1)}
@keyframes probeLand{
  0%{transform:scale(.72)}
  55%{transform:scale(1.14)}
  100%{transform:scale(1)}
}
.ripple{
  position:absolute;z-index:3;pointer-events:none;border:1px solid var(--signal);
  opacity:.7;animation:ripple .55s ease-out forwards;
}
@keyframes ripple{to{transform:scale(1.9);opacity:0}}

/* ---------- controls ---------- */
.controls{display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:9px;margin-top:16px}
.btn{
  font-family:'Manrope',sans-serif;font-weight:600;font-size:13px;
  color:var(--text);background:rgba(255,255,255,.04);
  border:1px solid var(--line);padding:13px 8px;cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));
  transition:background .18s,border-color .18s,opacity .18s;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.btn:active{background:rgba(255,255,255,.1)}
.btn:disabled{opacity:.35;cursor:default}
.btn.primary{border-color:rgba(255,193,99,.4);background:rgba(255,193,99,.09);color:var(--ember)}
.btn .cost{font-family:'JetBrains Mono',monospace;font-size:11px;opacity:.75}
.btn:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

.counter{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
  color:var(--dim);text-transform:uppercase;margin-top:14px;
}
.counter b{color:var(--signal);font-weight:700}

/* ---------- overlays ---------- */
.veil{
  position:fixed;inset:0;z-index:20;background:rgba(8,7,24,.9);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  display:flex;align-items:center;justify-content:center;padding:26px;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.veil.on{opacity:1;pointer-events:auto}
.card{
  width:100%;max-width:360px;background:var(--panel);
  border:1px solid var(--line);padding:26px 24px;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  transform:translateY(14px);transition:transform .34s cubic-bezier(.2,1.2,.4,1);
}
.veil.on .card{transform:translateY(0)}
/* Экран победы — более пружинистое появление, отдельно от обычных оверлеев. */
#veilWin .card{
  transform:translateY(28px) scale(.9);
  transition:transform .5s cubic-bezier(.22,1.5,.36,1),opacity .3s ease;
}
#veilWin.on .card{transform:translateY(0) scale(1)}
.card h1{
  font-family:'Unbounded',sans-serif;font-weight:800;font-size:34px;
  letter-spacing:-.01em;margin:6px 0 0;line-height:1;
}
.card h2{
  font-family:'Unbounded',sans-serif;font-weight:600;font-size:21px;
  margin:8px 0 0;line-height:1.15;
}
.card p{font-size:14px;line-height:1.65;color:var(--dim);margin:14px 0 0}
.card .btn{width:100%;margin-top:22px;padding:15px}
.card-wide{max-width:480px;padding-left:18px;padding-right:18px}

/* ---------- карта маршрута между галактиками ---------- */
.route-svg{width:100%;height:auto;margin-top:18px;overflow:visible}
.route-path{fill:none;stroke:var(--line);stroke-width:2.5}
.route-path.traveled{stroke:rgba(255,193,99,.55)}
.route-dot{fill:var(--panel);stroke:var(--line);stroke-width:2.5;transition:all .3s ease}
.route-node.done .route-dot{fill:var(--ember);stroke:var(--ember)}
.route-node.current .route-dot{fill:var(--signal);stroke:var(--signal)}
.route-node.locked .route-dot{stroke-dasharray:3 3;opacity:.6}
.route-num{
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;
  text-anchor:middle;dominant-baseline:central;fill:var(--dim);
  pointer-events:none;
}
.route-node.done .route-num,.route-node.current .route-num{fill:var(--void)}
.route-ring{
  fill:none;stroke:var(--signal);stroke-width:2;opacity:.7;
  animation:routePulse 1.8s ease-out infinite;
  transform-origin:center;transform-box:fill-box;
}
@keyframes routePulse{
  0%{transform:scale(.75);opacity:.7}
  100%{transform:scale(1.7);opacity:0}
}
.route-label{
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.04em;
  text-anchor:middle;fill:var(--dim);text-transform:uppercase;
}
.route-node.current .route-label{fill:var(--signal);font-weight:700}

/* ---------- карта уровней галактики ---------- */
.map-summary{
  display:flex;align-items:center;gap:8px;margin-top:14px;
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dim);
}
.map-summary b{color:var(--ember);font-weight:700}
.map-summary svg{flex:none;filter:drop-shadow(0 0 4px rgba(255,193,99,.6))}
.level-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:11px;margin-top:16px;max-height:50vh;overflow-y:auto;padding:3px}
.level-chip{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  padding:16px 6px;cursor:pointer;
  background:linear-gradient(158deg,rgba(99,230,210,.11),rgba(99,230,210,.02));
  border:1px solid rgba(99,230,210,.3);color:var(--text);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  transition:transform .12s ease,background .18s,border-color .18s;
}
.level-chip:active{transform:scale(.94);background:rgba(99,230,210,.18)}
.level-chip.perfect{
  border-color:rgba(255,193,99,.55);
  background:linear-gradient(158deg,rgba(255,193,99,.16),rgba(255,193,99,.03));
}
.level-chip .lvl-num{
  font-family:'Unbounded',sans-serif;font-weight:700;font-size:20px;
  line-height:1;color:var(--text);
}
.mini-stars{display:flex;gap:4px}
.mini-star{
  width:9px;height:9px;background:var(--dim);opacity:.3;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.mini-star.lit{
  background:var(--ember);opacity:1;
  filter:drop-shadow(0 0 3px rgba(255,193,99,.7));
}
.rewards{margin-top:20px;border-top:1px solid var(--line);padding-top:14px}
.row{
  display:flex;justify-content:space-between;font-size:13px;
  padding:6px 0;color:var(--dim);
}
.row b{font-family:'JetBrains Mono',monospace;color:var(--ember);font-weight:700}
.row.total{border-top:1px solid var(--line);margin-top:8px;padding-top:11px;color:var(--text);font-weight:600}
.stars{display:flex;gap:7px;margin-top:16px}
.star{width:22px;height:22px;opacity:.2}
.star.lit{opacity:1;filter:drop-shadow(0 0 7px rgba(255,193,99,.7))}
/* Звёзды и строки наград на экране победы появляются по очереди, не разом. */
#veilWin .star{
  animation:starPop .5s cubic-bezier(.3,1.7,.4,1) both;
  animation-delay:calc(var(--i,0) * .1s + .15s);
}
@keyframes starPop{
  0%{transform:scale(0) rotate(-35deg)}
  65%{transform:scale(1.25) rotate(6deg)}
  100%{transform:scale(1) rotate(0)}
}
#veilWin .row{
  opacity:0;
  animation:rowIn .38s ease-out both;
  animation-delay:calc(var(--i,0) * .08s + .4s);
}
@keyframes rowIn{
  from{opacity:0;transform:translateX(-8px)}
  to{opacity:1;transform:translateX(0)}
}

.toast{
  position:fixed;left:50%;bottom:100px;transform:translate(-50%,10px);z-index:30;
  background:var(--panel);border:1px solid var(--line);color:var(--text);
  padding:11px 17px;font-size:13px;opacity:0;transition:all .28s ease;pointer-events:none;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.05ms!important}
}

/* ---------- меню, статистика, карта глав ---------- */
.btn.danger{color:#FF8FAE;border-color:rgba(255,107,157,.35)}
.btn.danger:hover{border-color:rgba(255,107,157,.6)}
/* Полоса собранных звёзд на экране статистики. */
.stat-bar{
  height:6px;margin:14px 0 4px;border-radius:3px;
  background:rgba(207,203,245,.12);overflow:hidden;
}
.stat-bar span{
  display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,#FFC163,#FF6B9D);
  box-shadow:0 0 10px rgba(255,193,99,.5);
  transition:width .6s cubic-bezier(.3,1,.4,1);
}
/* Кликабельные узлы на карте глав из меню. */
#routeMapChapters .route-node:not(.locked){cursor:pointer}
#routeMapChapters .route-node:not(.locked):hover .route-dot{
  filter:drop-shadow(0 0 8px rgba(255,193,99,.8));
}
#routeMapChapters .route-node.locked{opacity:.5}

/* ---------- односторонние плиты ---------- */
/* Стрелка показывает единственное направление, в котором можно уйти. */
.tile.oneway{
  border-color:rgba(150,230,255,.55);
  background:linear-gradient(158deg,rgba(120,200,255,.15),rgba(120,200,255,.03));
}
.tile.oneway.reach{border-color:rgba(150,230,255,.95);box-shadow:0 0 14px rgba(120,200,255,.22) inset}
.ow-mark{
  position:absolute;left:50%;top:50%;
  width:56%;height:56%;pointer-events:none;
}
.ow-arrow{
  fill:none;stroke:rgba(160,225,255,.9);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(120,200,255,.7));
}
/* Мини-плита в обучалке. */
.tut-tile.oneway{border-color:rgba(150,230,255,.6);background:linear-gradient(158deg,rgba(120,200,255,.16),rgba(120,200,255,.03))}
.tut-tile.oneway::before{
  content:'→';position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  color:rgba(160,225,255,.95);font:700 15px 'JetBrains Mono',monospace;
}

/* ---------- телепорты ---------- */
/* Пара порталов красится в свой цвет, как и пары барьеров. */
.tile.wpair0{--ptc:150,120,255}
.tile.wpair1{--ptc:80,220,180}
.tile.portal{
  border-color:rgba(var(--ptc),.65);
  background:linear-gradient(158deg,rgba(var(--ptc),.17),rgba(var(--ptc),.03));
}
.tile.portal.reach{border-color:rgba(var(--ptc),.95);box-shadow:0 0 14px rgba(var(--ptc),.25) inset}
.pt-mark{
  position:absolute;left:50%;top:50%;
  width:60%;height:60%;transform:translate(-50%,-50%);
  pointer-events:none;
}
.pt-ring{fill:none;stroke:rgba(var(--ptc),.75);stroke-width:1.4;stroke-dasharray:7 5;
  transform-origin:12px 12px;animation:ptspin 6s linear infinite}
.pt-ring2{stroke-dasharray:4 4;animation:ptspin 4s linear infinite reverse;opacity:.8}
.pt-core{fill:rgb(var(--ptc));filter:drop-shadow(0 0 5px rgba(var(--ptc),.9))}
@keyframes ptspin{to{transform:rotate(360deg)}}
/* Мини-плита в обучалке. */
.tut-tile.portal{border-color:rgba(150,120,255,.7);background:linear-gradient(158deg,rgba(150,120,255,.18),rgba(150,120,255,.03))}
.tut-tile.portal::before{
  content:'';position:absolute;left:50%;top:50%;
  width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  border:1.5px dashed rgba(170,140,255,.95);
  animation:ptspin 4s linear infinite;
}

/* ---------- зеркальный зонд (эхо) ---------- */
.probe.echo{z-index:3;transition:transform .22s cubic-bezier(.32,1.35,.45,1)}
.echo-hull{fill:rgba(143,168,255,.35);stroke:rgba(143,168,255,.9);stroke-width:1}
.echo-eye{fill:#8FA8FF;filter:drop-shadow(0 0 4px rgba(143,168,255,.9))}
/* Мини-эхо в обучалке. */
.tut-echo{
  position:absolute;left:0;top:0;z-index:2;pointer-events:none;
  transition:transform .5s cubic-bezier(.3,1.3,.5,1);
}

/* ---------- затухающие плиты ---------- */
/* Счётчик показывает, сколько ходов осталось, чтобы успеть зайти. */
.tile.fading{
  border-color:rgba(255,138,61,.5);
  background:linear-gradient(158deg,rgba(120,110,140,.16),rgba(255,138,61,.05));
}
.tile.fading.urgent{
  border-color:rgba(255,107,157,.9);
  animation:fadewarn 1s ease-in-out infinite;
}
@keyframes fadewarn{
  0%,100%{box-shadow:0 0 8px 0 rgba(255,107,157,.15) inset}
  50%{box-shadow:0 0 20px 4px rgba(255,107,157,.45) inset}
}
.tile.fading.dead{opacity:.35;filter:grayscale(1)}
.fade-n{
  position:absolute;top:3px;right:6px;
  font:700 12px 'JetBrains Mono',monospace;
  color:#FF8A3D;text-shadow:0 0 7px rgba(255,138,61,.9);
}
.tile.fading.urgent .fade-n{color:#FF6B9D;text-shadow:0 0 8px rgba(255,107,157,1)}
/* Мини-плита в обучалке. */
.tut-tile.fading{border-color:rgba(255,138,61,.6);background:linear-gradient(158deg,rgba(120,110,140,.18),rgba(255,138,61,.05))}
.tut-fade{position:absolute;top:1px;right:4px;font:700 10px 'JetBrains Mono',monospace;color:#FF8A3D}

/* ---------- экран загрузки: зонд прыгает по плитам ---------- */
/* Поверх интро — интро уже отрисовано под ним, поэтому снятие загрузки
   не даёт вспышки пустого фона. */
#veilBoot{z-index:30;background:rgba(8,7,24,.97)}
.boot-track{position:relative;display:flex;gap:6px;margin-top:24px}
.boot-tile{
  flex:1 1 0;aspect-ratio:1;position:relative;
  background:linear-gradient(158deg,rgba(99,230,210,.17),rgba(99,230,210,.035));
  border:1px solid rgba(99,230,210,.34);
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));
  transition:opacity .45s ease,transform .45s cubic-bezier(.3,1.4,.5,1);
}
/* Плита, с которой зонд ушёл, гаснет — то же правило, что и в игре. */
.boot-tile.spent{opacity:.12;transform:scale(.8) rotate(5deg)}
.boot-tile.beacon{border-color:rgba(99,230,210,1);border-width:2px}
.boot-tile.beacon::before{
  content:'';position:absolute;left:50%;top:50%;
  width:20%;height:20%;transform:translate(-50%,-50%);
  border-radius:50%;background:var(--signal);
  box-shadow:0 0 10px 3px rgba(99,230,210,.95);
}
.boot-tile.beacon::after{
  content:'';position:absolute;left:50%;top:50%;
  width:58%;height:58%;border-radius:50%;
  border:1.5px solid rgba(99,230,210,.9);
  transform:translate(-50%,-50%) scale(.35);
  animation:endping 2s ease-out infinite;
}
.boot-probe{
  position:absolute;top:0;left:0;
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s cubic-bezier(.32,1.35,.45,1);
  pointer-events:none;z-index:3;
}
.boot-probe-body{display:block;width:56%}
.boot-probe svg{
  display:block;width:100%;height:auto;
  transform:rotate(90deg);      /* зонд смотрит по маршруту — вправо */
  filter:drop-shadow(0 0 9px rgba(255,193,99,.85));
}
/* Подскок в момент прыжка — зонд не «едет», а перепрыгивает. */
.boot-probe-body.hop{animation:bootHop .3s cubic-bezier(.3,1,.5,1)}
@keyframes bootHop{
  0%{transform:translateY(0) scale(1)}
  45%{transform:translateY(-26%) scale(1.08)}
  100%{transform:translateY(0) scale(1)}
}
.boot-meter{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-top:18px;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;
  color:var(--dim);text-transform:uppercase;
}
.boot-pct{
  font-size:22px;font-weight:700;letter-spacing:.02em;
  color:var(--signal);text-shadow:0 0 12px rgba(99,230,210,.45);
}

/* ---------- скан сектора на время генерации уровня ---------- */
.scan-card{max-width:280px;padding:20px 22px}
.scan-bar{
  height:3px;margin-top:14px;overflow:hidden;
  background:rgba(99,230,210,.14);
}
/* Только transform: анимация идёт мимо основного потока и не замирает,
   пока генератор синхронно считает уровень. */
.scan-bar span{
  display:block;width:38%;height:100%;
  background:linear-gradient(90deg,transparent,var(--signal),transparent);
  animation:scanSweep .9s linear infinite;
}
@keyframes scanSweep{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(263%)}
}

/* ---------- «сигнал потерян»: тихая замена модалке ---------- */
/* Появлялось модальное окно после каждого неверного хода и прерывало партию
   ровно тогда, когда игрок начал думать (фидбэк 25.08.2026). Модалка теперь
   только для настоящего тупика, а это — предупреждение, которое можно и
   не заметить. */
.signal-lost{
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--flare);
  /* В одну строку: колонка HUD узкая, перенос толкал вниз строку сюжета. */
  white-space:nowrap;
  margin-top:4px;max-height:0;opacity:0;overflow:hidden;
  transition:opacity .3s ease,max-height .3s ease;
}
.signal-lost.on{
  max-height:20px;opacity:1;
  animation:signalPulse 2.2s ease-in-out infinite;
}
@keyframes signalPulse{
  0%,100%{opacity:.55}
  50%{opacity:1}
}

/* ---------- обломки данных: необязательные плиты ---------- */
/* Плита не нужна для победы — её можно подобрать по дороге. Цвет —
   холодное серебро, а не янтарь: янтарь почти совпадал с оранжевой парой
   «переключатель → барьер» (255,184,77), и вместе с ромбом-меткой обломки
   читались как двери (живой отзыв 14.09.2026). */
:root{--shard:226,232,255}
.tile.shard{
  border-color:rgba(var(--shard),.5);
  background:linear-gradient(158deg,rgba(var(--shard),.13),rgba(var(--shard),.02));
}
.tile.shard.reach{border-color:rgba(var(--shard),.95);box-shadow:0 0 14px rgba(var(--shard),.22) inset}
.shard-mark{
  position:absolute;left:50%;top:50%;
  width:46%;height:46%;transform:translate(-50%,-50%);
  pointer-events:none;
  fill:none;stroke:rgba(var(--shard),.9);stroke-width:1.5;stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(var(--shard),.6));
  animation:shardPulse 2.6s ease-in-out infinite;
}
.shard-core{fill:rgba(var(--shard),.95);stroke:none}
@keyframes shardPulse{
  0%,100%{opacity:.65}
  50%{opacity:1}
}
/* Счётчик добычи в HUD — рядом с кошельком, но своим цветом. */
.shards{
  display:flex;align-items:center;gap:6px;flex:none;
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;
  color:rgb(var(--shard));
}
.shards.hidden{display:none}
/* Строка добычи на экране победы — янтарная, отделена от кристаллов. */
#winRewards .shard-row b{color:rgb(var(--shard))}

/* ---------- архив «Мирты» ---------- */
.arch-sub{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);margin:18px 0 10px;
}
.skin-row{display:flex;gap:8px;flex-wrap:wrap}
.skin{
  /* Ровно два в ряд: при четырёх видах зонда третий-четвёртый иначе
     переносятся и растягиваются на всю ширину. */
  flex:1 1 calc(50% - 4px);display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:10px 6px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);color:var(--text);cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  font-size:10px;font-family:'JetBrains Mono',monospace;letter-spacing:.08em;
  transition:border-color .2s,background .2s,opacity .2s;
}
.skin.on{border-color:var(--ember);background:rgba(255,193,99,.1)}
.skin.locked{opacity:.32;cursor:default}
.skin.locked svg{filter:grayscale(1)}
.arch-item{
  display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line);
}
.arch-item b{font-size:14px}
.arch-item p{margin:5px 0 0;font-size:13px;line-height:1.55;color:var(--dim)}
.arch-code{
  flex:none;width:52px;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.1em;color:var(--signal);padding-top:2px;
}
.arch-item.locked .arch-code{color:var(--line)}
.arch-item.locked b{color:var(--dim);font-weight:400}
/* Архив длинный (восемь записей) и на телефоне не влезал: карточка уезжала
   за край вместе с кнопкой «Назад». Прокручиваем содержимое внутри карточки. */
#veilArchive .card{
  max-height:calc(100dvh - 52px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
/* Кнопка прилипает к низу карточки — иначе до неё надо доскроллить весь
   архив. Фон непрозрачный: сквозь неё просвечивал текст записей. */
#veilArchive .btn{
  position:sticky;bottom:-1px;margin-bottom:0;
  background:var(--panel);box-shadow:0 -14px 18px -6px var(--panel);
}
/* Кнопка предлагает докупить действие за обломок — янтарная рамка, как у
   самих обломков, чтобы связь читалась без объяснений. */
.btn.shard-buy{
  border-color:rgba(var(--shard),.55);
  color:rgb(var(--shard));
}
.btn.shard-buy .cost{opacity:1;color:rgb(var(--shard))}
/* «рекорд не побит» — длиннее числа, поэтому мельче и тусклее. */
#winRewards .shard-row b{color:rgb(var(--shard));font-size:12px}
/* Строка состояния архива на финальном экране — тише основного текста. */
.finale-note{
  font-size:13px;line-height:1.6;color:var(--ember);
  border-left:2px solid rgba(255,193,99,.4);padding-left:12px;margin-top:16px;
}

/* ---------- вкладки архива ---------- */
.arch-tabs{display:flex;gap:6px;margin:18px 0 4px}
.arch-tab{
  flex:1 1 0;padding:10px 6px;cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  transition:color .2s,border-color .2s,background .2s;
}
.arch-tab.on{color:var(--ember);border-color:rgba(255,193,99,.5);background:rgba(255,193,99,.08)}
.arch-hint{font-size:12px;line-height:1.5;color:var(--dim);margin:12px 0 0}
.skin-row{margin-top:14px}