/* Кристалл прохождения (идея 3 «Кристалл собирается по ходу»).
   Маленький камень в углу раннера: каждая пройденная методика батареи
   зажигает свою группу граней. Никакого WebGL — только SVG, чтобы не
   морозить главный поток на телефоне. */

.rcrystal{
  position:fixed;
  left:calc(12px + env(safe-area-inset-left, 0px));
  bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  z-index:880;
  width:52px;
  height:52px;
  font:inherit;
  -webkit-tap-highlight-color:transparent;
}
.rcrystal .rc-btn{
  display:block;
  width:100%;
  height:100%;
  padding:3px;
  border:1.5px solid rgba(14,74,56,.22);
  border-radius:15px;
  background:rgba(255,255,255,.94);
  box-shadow:0 5px 16px rgba(20,69,59,.16);
  cursor:pointer;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.rcrystal .rc-btn:hover,
.rcrystal .rc-btn:focus-visible{
  border-color:rgba(6,214,160,.75);
  box-shadow:0 6px 20px rgba(6,214,160,.22);
  outline:none;
}
.rcrystal.is-complete .rc-btn{border-color:rgba(6,214,160,.9); box-shadow:0 0 0 2px rgba(6,214,160,.18), 0 6px 20px rgba(6,214,160,.24)}
.rcrystal .rc-svg{display:block; width:100%; height:100%; overflow:visible; transform-origin:24px 24px; animation:rc-breathe 6s ease-in-out infinite}
.rcrystal .rc-facet{
  fill:#24413a;
  fill-opacity:.55;
  stroke:rgba(200,255,230,.22);
  stroke-width:.45;
  stroke-linejoin:round;
  transition:fill .18s linear, fill-opacity .18s linear;
}
.rcrystal .rc-facet[data-lit="1"]{
  fill:var(--rc-lit, #06d6a0);
  fill-opacity:.96;
  stroke:rgba(242,255,214,.9);
  stroke-width:.55;
}
.rcrystal .rc-outline{
  fill:none;
  stroke:#0e4a38;
  stroke-opacity:.55;
  stroke-width:.75;
  stroke-linejoin:round;
}
.rcrystal.is-complete .rc-outline{stroke:#06d6a0; stroke-opacity:.9}
.rcrystal .rc-flash{
  fill:none;
  stroke:#e9ff96;
  stroke-width:1.2;
  opacity:0;
  pointer-events:none;
}
.rcrystal.is-flash .rc-flash{animation:rc-flash 250ms var(--ease)}
.rcrystal .rc-facet.is-ignite{animation:rc-ignite 250ms var(--ease)}
@keyframes rc-breathe{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-1.5px) rotate(1.2deg)}
}
@keyframes rc-ignite{
  0%{fill-opacity:.2}
  55%{fill-opacity:1}
  100%{fill-opacity:.96}
}
@keyframes rc-flash{
  0%{opacity:.9; transform:scale(.86)}
  100%{opacity:0; transform:scale(1.12)}
}

/* Подсказка: что уже собрано и что осталось. */
.rc-panel{
  position:fixed;
  left:calc(12px + env(safe-area-inset-left, 0px));
  bottom:calc(74px + env(safe-area-inset-bottom, 0px));
  z-index:881;
  width:min(266px, calc(100vw - 24px));
  max-height:min(52vh, 420px);
  overflow:auto;
  padding:13px 14px 12px;
  border:1.5px solid rgba(14,74,56,.18);
  border-radius:15px;
  background:var(--surface, #fffdf7);
  box-shadow:0 14px 38px rgba(20,69,59,.2);
  color:var(--ink, #1c1a1a);
  text-align:left;
}
.rc-panel[hidden]{display:none!important}
.rc-panel-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px}
.rc-panel-head b{font-size:13px; letter-spacing:-.01em}
.rc-panel-head span{font-family:var(--fm, ui-monospace, monospace); font-size:10.5px; color:var(--ink3, #6b746f); white-space:nowrap}
.rc-list{list-style:none; margin:0; padding:0; display:grid; gap:5px}
.rc-list li{display:flex; align-items:baseline; gap:7px; font-size:12px; line-height:1.35}
.rc-list .rc-dot{width:7px; height:7px; flex:none; border-radius:2px; background:#24413a; opacity:.55; transform:translateY(-1px)}
.rc-list li.is-done .rc-dot{opacity:1; background:var(--rc-lit, #06d6a0)}
.rc-list .rc-name{flex:1; min-width:0; color:var(--ink2, #3f4a45)}
.rc-list li.is-done .rc-name{color:var(--ink, #1c1a1a); font-weight:600}
.rc-list .rc-state{font-family:var(--fm, ui-monospace, monospace); font-size:9.5px; letter-spacing:.02em; color:var(--ink3, #6b746f); white-space:nowrap}
.rc-list li.is-done .rc-state{color:#0e9f76}
.rc-list li.is-unmeasured .rc-name{color:var(--ink3, #6b746f)}
.rc-list li.is-unmeasured .rc-state{color:#9a7d4a}
.rc-panel-foot{margin-top:9px; padding-top:8px; border-top:1px solid rgba(14,74,56,.12); font-size:10.5px; line-height:1.4; color:var(--ink3, #6b746f)}

@media (max-width:640px){
  .rcrystal{width:44px; height:44px; left:calc(10px + env(safe-area-inset-left, 0px)); bottom:calc(6px + env(safe-area-inset-bottom, 0px))}
  .rc-panel{left:calc(10px + env(safe-area-inset-left, 0px)); bottom:calc(66px + env(safe-area-inset-bottom, 0px)); width:min(250px, calc(100vw - 20px))}
  /* запас под камень: кнопки «Назад / Далее» остаются выше него */
  .runner.rc-active{padding-bottom:124px}
}
@media (prefers-reduced-motion:reduce){
  .rcrystal .rc-svg{animation:none}
  .rcrystal .rc-facet.is-ignite{animation:none}
  .rcrystal.is-flash .rc-flash{animation:none}
  .rcrystal .rc-facet{transition:none}
}