/* «Цепная реакция» на большом экране. Размеры — от --cr-cell, цвет — только из
   палитры мероприятия (brand/palette.css): оранжевый первый боец, синий второй. */

.cr-stage{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;--cr-cell:44px;}
.cr-stage.big{--cr-cell:clamp(46px,9vh,104px);}

/* шапка: кто играет, сколько зарядов, чей ход */
.cr-head{display:flex;align-items:center;gap:clamp(14px,3vw,48px);flex-wrap:wrap;justify-content:center;}
.cr-who{display:flex;align-items:baseline;gap:.4em;font-size:calc(var(--cr-cell) * .42);}
.cr-name{font-weight:900;}
.cr-who.s0 .cr-name{color:var(--accent);}
.cr-who.s1 .cr-name{color:var(--blue);}
.cr-dot{
  width:.6em;height:.6em;border-radius:50%;align-self:center;
  box-shadow:0 0 calc(var(--cr-cell) * .18) currentColor;
}
.cr-who.s0 .cr-dot{background:var(--accent);color:var(--accent);}
.cr-who.s1 .cr-dot{background:var(--blue);color:var(--blue);}
/* Счёт — заряды на поле. Не золотой: золото на этом экране значит БАЛЛЫ. */
.cr-score{font-weight:900;color:var(--text);}
.cr-turn{
  font-size:.6em;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:var(--live);align-self:center;
}
.cr-vs{color:var(--muted);font-weight:800;font-size:calc(var(--cr-cell) * .3);}

/* доска */
.cr-boardwrap{position:relative;}
.cr-grid{
  display:grid;gap:calc(var(--cr-cell) * .12);
  grid-template-columns:repeat(var(--cr-cols,6), var(--cr-cell));
  padding:calc(var(--cr-cell) * .18);
  background:var(--ink-deep);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
}
.cr-cell{
  width:var(--cr-cell);height:var(--cr-cell);
  border-radius:var(--radius-m);
  background:var(--card-hi);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
/* Клетка хозяина — заливка его цветом «в подсветку», а не плашкой: заряды
   внутри должны оставаться главными. */
.cr-cell.s0{background:color-mix(in srgb, var(--accent) 26%, var(--ink-deep));}
.cr-cell.s1{background:color-mix(in srgb, var(--blue) 26%, var(--ink-deep));}

/* заряды */
.cr-orbs{display:flex;flex-wrap:wrap;gap:calc(var(--cr-cell) * .07);
  align-items:center;justify-content:center;width:76%;}
.cr-orb{
  display:block;border-radius:50%;
  width:calc(var(--cr-cell) * .3);height:calc(var(--cr-cell) * .3);
  background:var(--muted);
}
.cr-cell.s0 .cr-orb{background:var(--accent);box-shadow:0 0 calc(var(--cr-cell) * .12) var(--accent);}
.cr-cell.s1 .cr-orb{background:var(--blue);box-shadow:0 0 calc(var(--cr-cell) * .12) var(--blue);}
/* Один заряд — крупнее: пустая на вид клетка с точкой читалась как мусор. */
.cr-orbs.n1 .cr-orb{width:calc(var(--cr-cell) * .38);height:calc(var(--cr-cell) * .38);}

/* Бочка на взводе: ещё один заряд — и рванёт. Это главный саспенс игры, и он
   обязан быть виден с последнего ряда — отсюда кольцо, а не оттенок. */
.cr-cell.crit::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  border:calc(var(--cr-cell) * .06) solid currentColor;
  animation:cr-pulse 1.1s ease-in-out infinite;
}
.cr-cell.crit.s0{color:var(--accent);}
.cr-cell.crit.s1{color:var(--blue);}
@keyframes cr-pulse{50%{opacity:.25;transform:scale(1.06);}}

/* Клетки последнего каскада — вспышка по контуру. */
.cr-cell.lit{box-shadow:0 0 0 calc(var(--cr-cell) * .05) var(--text) inset;}

/* Плашка размаха цепи — поверх доски, крупно и коротко. */
.cr-boom{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-4deg);
  font-size:calc(var(--cr-cell) * .78);font-weight:900;letter-spacing:.04em;
  color:var(--text);background:color-mix(in srgb, var(--live) 82%, transparent);
  padding:.12em .5em;border-radius:var(--radius-m);
  box-shadow:0 0 calc(var(--cr-cell) * .5) color-mix(in srgb, var(--live) 60%, transparent);
  pointer-events:none;animation:cr-boomin .5s ease-out;
}
@keyframes cr-boomin{from{transform:translate(-50%,-50%) scale(.5) rotate(-4deg);opacity:0;}}

.cr-legend{font-size:calc(var(--cr-cell) * .26);color:var(--muted);text-align:center;}
.cr-critword{color:var(--text);}

@media (prefers-reduced-motion: reduce){
  .cr-cell.crit::after,.cr-boom{animation:none;}
}