:root{
  --cell: 56px;

  /* линии */
  --line: rgba(255,255,255,.40);
  --line-w: 2px;

  /* подсветка строки/колонки */
  --hover: rgba(255,255,255,.18);

  --bg: #050505;
}

/* ===== BASE ===== */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:transparent;
  font-family:system-ui, Segoe UI, Arial, sans-serif;
  color:#eee;
}

#wrap{
  padding:18px;
  display:flex;
  justify-content:center;
}

#boardWrap{
  display:flex;
  flex-direction:column;
  gap:10px;
}

#midRow{
  display:flex;
  gap:10px;
}

/* =======================
   LABELS (COORDINATES)
======================= */
.labels{
  user-select:none;
  font-weight:800;
  letter-spacing:.04em;
  opacity:.96;
}

/* 👇 КЛЮЧЕВОЕ ИСПРАВЛЕНИЕ */
.labels.top{
  display:grid;
  grid-template-columns:repeat(8, var(--cell));
  padding-left: calc(48px + var(--line-w) / 2);
}

.labels.left{
  display:grid;
  grid-template-rows:repeat(8, var(--cell));
  margin-top: calc(var(--line-w) / 2);
}

.label{
  display:flex;
  align-items:center;
  justify-content:center;
  height:var(--cell);
  color:#fff;

  font-size:28px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;

  text-shadow: 0 0 4px rgba(0,0,0,.65);
}

.label.topCell{ width:var(--cell); }
.label.leftCell{ width:48px; }

/* =======================
   GRID
======================= */
#grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(8, var(--cell));
  grid-template-rows:repeat(8, var(--cell));
  background:var(--bg);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 0 22px rgba(0,0,0,.45);
}

/* =======================
   CELLS + LINES
======================= */
.cell{
  position:relative;
  width:var(--cell);
  height:var(--cell);
  background:#000;
  cursor:pointer;

  border-right: var(--line-w) solid var(--line);
  border-bottom: var(--line-w) solid var(--line);
}

/* крайние линии */
.cell[data-x="0"]{
  border-left: var(--line-w) solid var(--line);
}
.cell[data-y="0"]{
  border-top: var(--line-w) solid var(--line);
}

/* =======================
   HOVER ROW / COLUMN (через JS vars)
======================= */
#grid{
  --hover-x: -1;
  --hover-y: -1;
}

#grid::before,
#grid::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
}

/* колонка */
#grid[style*="--hover-x"]::before{
  opacity:1;
  background:
    linear-gradient(
      to right,
      transparent 0 calc(var(--cell) * var(--hover-x)),
      var(--hover) calc(var(--cell) * var(--hover-x))
                   calc(var(--cell) * (var(--hover-x) + 1)),
      transparent calc(var(--cell) * (var(--hover-x) + 1)) 100%
    );
}

/* строка */
#grid[style*="--hover-y"]::after{
  opacity:1;
  background:
    linear-gradient(
      to bottom,
      transparent 0 calc(var(--cell) * var(--hover-y)),
      var(--hover) calc(var(--cell) * var(--hover-y))
                   calc(var(--cell) * (var(--hover-y) + 1)),
      transparent calc(var(--cell) * (var(--hover-y) + 1)) 100%
    );
}

/* =======================
   PIXELS
======================= */
.cell.on{
  background:var(--pix, #000);
  transition:background 220ms ease;
}

/* гало пикселя */
.cell.on::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  box-shadow:
    0 0 6px 1px color-mix(in srgb, var(--halo,#fff) 55%, transparent),
    0 0 14px 4px color-mix(in srgb, var(--halo,#fff) 28%, transparent);

  opacity:0;
  animation:glowSoft 700ms ease-out forwards;
}

.cell.on.steady::after{
  animation:
    glowSoft 700ms ease-out forwards,
    breatheSoft 3600ms ease-in-out 700ms infinite;
}

@keyframes glowSoft{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes breatheSoft{
  0%,100%{ opacity:.7; }
  50%{ opacity:.5; }
}

/* =======================
   STATUS / PALETTE
======================= */
#hint{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  font-size:13px;
  opacity:.92;
}

#hint span{
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.12);
  padding:6px 10px;
  border-radius:10px;
}

#palette{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:6px;
}

.pbtn{
  width:34px;
  height:26px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.18);
  cursor:pointer;
  box-shadow:0 0 10px rgba(0,0,0,.25);
}

.pbtn.active{
  outline:2px solid rgba(255,255,255,.35);
}