/* Дошка Lucena — один файл на всі чотири місця (кабінет, тренажер-в'ю, майстри-в'ю, дитяча).
   Було: суцільні гліфи, залиті чистим білим із мʼякою тінню — на світлих клітках білі фігури
   не читалися. Стало: тепле біле тіло + справжній темний контур (text-stroke, з тіньовим
   фолбеком), і розмір, привʼязаний до ширини дошки, а не вгаданий clamp-ом.

   Розмітка: .cb на контейнері-сітці, .sq на клітці, .light/.dark на фоні, .wp/.bp на фігурі.
   Кольори клітин можна перебити змінними --sq-l / --sq-d (так робить дитяча сторінка). */

.cb{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(8,1fr);
  aspect-ratio:1;
  border-radius:10px;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  container-type:inline-size;          /* 1cqw = 1% ширини дошки → клітка це 12.5cqw */
}

.cb .sq{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  font-size:9.6cqw;                    /* ≈77% клітки: фігура крупна, але не торкається сусідніх */
  font-family:"Apple Symbols","Segoe UI Symbol","DejaVu Sans",sans-serif;
}
@supports not (font-size:1cqw){        /* старі рушії: приблизно, як було, але більше */
  .cb .sq{font-size:clamp(22px,10.5vw,52px)}
}

.cb .light{background:var(--sq-l,#eee3ca)}
.cb .dark {background:var(--sq-d,#9a7049)}

/* Діаграми з FEN малюють фігуру в <span> усередині клітки — стилі мусять ловити обидва
   випадки, тож селектори без прив'язки до того, чи це сама клітка, чи вкладений елемент. */
.cb .sq > span{display:block;line-height:1}

/* Білі: тепле тіло (чисто-біле сліпить) + контур, який тримає силует на будь-якій клітці. */
.cb .wp{
  color:#fbf8f1;
  -webkit-text-stroke:.055em #1b1712;
  paint-order:stroke fill;
  text-shadow:0 .03em .05em rgba(0,0,0,.45);
}
/* Чорні: не абсолютно чорні, зі світлим ореолом — щоб читалися на темній клітці. */
.cb .bp{
  color:#171310;
  -webkit-text-stroke:.045em rgba(255,255,255,.5);
  paint-order:stroke fill;
  text-shadow:0 .03em .05em rgba(255,255,255,.18);
}
/* Рушії без text-stroke: обводка чотирма тінями, той самий читабельний результат. */
@supports not (-webkit-text-stroke:1px #000){
  .cb .wp{text-shadow:.04em 0 0 #1b1712,-.04em 0 0 #1b1712,0 .04em 0 #1b1712,0 -.04em 0 #1b1712}
  .cb .bp{text-shadow:.03em 0 0 rgba(255,255,255,.5),-.03em 0 0 rgba(255,255,255,.5),
                      0 .03em 0 rgba(255,255,255,.5),0 -.03em 0 rgba(255,255,255,.5)}
}

.cb .sq.sel{outline:.06em solid var(--accent,#245a94);outline-offset:-.06em}
.cb .sq.hint{box-shadow:inset 0 0 0 .055em rgba(91,155,208,.62)}
.cb .sq.lastmv{box-shadow:inset 0 0 0 .06em rgba(91,155,208,.85)}
.cb.click .sq{cursor:pointer}

/* Координати (клас .coords на .cb): ранги в лівій колонці, вертикалі в нижньому рядку.
   Колір підписів — контрастний до клітки, без обведення фігур. */
.cb .sq{position:relative}
.cb.coords .sq[data-rank]::before,
.cb.coords .sq[data-file]::after{
  position:absolute;font-size:max(9px,.36em);font-weight:800;line-height:1;opacity:.9;pointer-events:none;
  -webkit-text-stroke:0;text-shadow:none;font-family:ui-rounded,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.cb.coords .sq[data-rank]::before{content:attr(data-rank);top:.09em;left:.13em}
.cb.coords .sq[data-file]::after{content:attr(data-file);bottom:.07em;right:.15em}
.cb.coords .light[data-rank]::before,.cb.coords .light[data-file]::after{color:#7a6444}
.cb.coords .dark[data-rank]::before,.cb.coords .dark[data-file]::after{color:#f1e7cf}