/* «Танчики вслепую» на большом экране: тёмное поле, следы боя цветом бойца,
   линия последнего выстрела поверх. Размеры от --tk-cell, цвет — из палитры. */

.tk-stage{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;--tk-cell:46px;}
.tk-stage.big{--tk-cell:clamp(46px,9.4vh,110px);}

/* шапка: имя, броня квадратами, чей ход */
.tk-head{display:flex;align-items:center;gap:clamp(14px,3vw,48px);flex-wrap:wrap;justify-content:center;}
.tk-who{display:flex;align-items:center;gap:.4em;font-size:calc(var(--tk-cell) * .4);}
.tk-name{font-weight:900;}
.tk-who.s0 .tk-name{color:var(--accent);}
.tk-who.s1 .tk-name{color:var(--blue);}
.tk-mini{
  width:1em;height:1em;
  -webkit-mask:var(--tk-tank-svg) center/contain no-repeat;
  mask:var(--tk-tank-svg) center/contain no-repeat;
}
.tk-who.s0 .tk-mini{background:var(--accent);}
.tk-who.s1 .tk-mini{background:var(--blue);}
.tk-armour{display:flex;gap:.2em;}
.tk-hp{display:block;width:.5em;height:.5em;border-radius:2px;background:var(--up);}
.tk-hp.gone{background:var(--card-hi);}
.tk-turn{font-size:.55em;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--live);}
.tk-vs{color:var(--muted);font-weight:800;font-size:calc(var(--tk-cell) * .3);}

/* поле */
.tk-fieldwrap{position:relative;}
.tk-grid{
  display:grid;gap:calc(var(--tk-cell) * .09);
  grid-template-columns:repeat(var(--tk-n,7), var(--tk-cell));
  padding:calc(var(--tk-cell) * .16);
  background:var(--ink-deep);border:1px solid var(--line);border-radius:var(--radius-l);
}
.tk-cell{
  width:var(--tk-cell);height:var(--tk-cell);border-radius:var(--radius-s);
  background:var(--card-hi);
  display:flex;align-items:center;justify-content:center;
  font-size:calc(var(--tk-cell) * .46);line-height:1;
}
/* Вода: та же штриховка, что в самой игре — зритель и игрок узнают одно поле. */
.tk-water{
  background:repeating-linear-gradient(45deg,
    var(--ink-deep) 0 calc(var(--tk-cell) * .12),
    var(--card) calc(var(--tk-cell) * .12) calc(var(--tk-cell) * .24));
}
.tk-sunk{font-size:calc(var(--tk-cell) * .3);opacity:.7;}
/* След манёвра — тихая заливка цветом того, кто уехал. */
.tk-dust.s0{background:color-mix(in srgb, var(--accent) 18%, var(--card-hi));}
.tk-dust.s1{background:color-mix(in srgb, var(--blue) 18%, var(--card-hi));}
/* Откуда стреляли — заливка с рамкой: роль различается формой, не оттенком. */
.tk-shot.s0{background:color-mix(in srgb, var(--accent) 34%, var(--ink-deep));
  border:calc(var(--tk-cell) * .05) solid var(--accent);}
.tk-shot.s1{background:color-mix(in srgb, var(--blue) 34%, var(--ink-deep));
  border:calc(var(--tk-cell) * .05) solid var(--blue);}
/* Промах — только значок цветом стрелявшего, поле под ним пустое. */
.tk-miss.s0{color:var(--accent);opacity:.6;}
.tk-miss.s1{color:var(--blue);opacity:.6;}
.tk-miss.now{opacity:1;font-weight:900;}
/* Попадание. Дышит только свежее — иначе доска станет гирляндой. */
.tk-boom{background:var(--live);}
.tk-boom.now{animation:tk-boom 1.1s ease-in-out infinite;}
@keyframes tk-boom{50%{opacity:.5;}}
.tk-hit{background:var(--live);}
/* Танк виден — силуэт машины, ни с одной меткой боя не спутать. */
.tk-tank{position:relative;}
.tk-tank::after{
  content:"";position:absolute;inset:12%;
  -webkit-mask:var(--tk-tank-svg) center/contain no-repeat;
  mask:var(--tk-tank-svg) center/contain no-repeat;
}
.tk-tank.s0::after{background:var(--accent);}
.tk-tank.s1::after{background:var(--blue);}

/* Трассер последнего выстрела — поверх поля, к кликам глух. */
.tk-tracer{
  position:absolute;inset:calc(var(--tk-cell) * .16);
  width:calc(100% - var(--tk-cell) * .32);height:calc(100% - var(--tk-cell) * .32);
  pointer-events:none;overflow:visible;
}
.tk-trace-line{
  stroke:var(--gold);stroke-width:.07;stroke-linecap:round;
  stroke-dasharray:.3 .2;opacity:.9;
  animation:tk-fly 1.4s linear infinite;
}
@keyframes tk-fly{to{stroke-dashoffset:-1;}}
.tk-trace-hit{fill:var(--live);opacity:.85;}

.tk-legend{font-size:calc(var(--tk-cell) * .24);color:var(--muted);text-align:center;max-width:44em;}

:root{
  /* Танк сверху: корпус, башня, ствол. Тот же силуэт, что в клиенте игры. */
  --tk-tank-svg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="12" y="24" width="15" height="54" rx="5"/><rect x="73" y="24" width="15" height="54" rx="5"/><rect x="25" y="30" width="50" height="44" rx="7"/><rect x="45" y="3" width="10" height="46" rx="3"/><circle cx="50" cy="53" r="15"/></svg>');
}

@media (prefers-reduced-motion: reduce){
  .tk-boom.now,.tk-trace-line{animation:none;}
}