/* Chess2256 V44 — plateau dernière passe : radial par case, plus transparent, plus techno */
.board-frame{
  background:
    radial-gradient(circle at 50% 50%, rgba(92, 215, 228, .10), transparent 46%),
    linear-gradient(135deg, rgba(92, 215, 228, .08), transparent 24%, transparent 76%, rgba(255, 161, 58, .08)),
    rgba(6, 12, 14, .42) !important;
  box-shadow:
    0 18px 54px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(156,228,233,.06),
    inset 0 0 44px rgba(92,215,228,.10),
    inset 0 0 80px rgba(5,18,22,.24),
    0 0 38px rgba(92,215,228,.06);
  backdrop-filter: blur(2.6px) saturate(1.08);
}
.board-glow{
  opacity:.20;
  filter: blur(44px);
}
.board{
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 18%),
    linear-gradient(135deg, rgba(92,215,228,.05), transparent 48%, rgba(255,161,58,.03)),
    rgba(8, 15, 18, .24) !important;
  border:1px solid rgba(156,228,233,.18);
  box-shadow:
    inset 0 0 22px rgba(92,215,228,.07),
    inset 0 -14px 24px rgba(0,0,0,.12),
    0 0 22px rgba(92,215,228,.04);
}
.board::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 14% 16%, rgba(255,255,255,.04), transparent 20%),
    radial-gradient(circle at 86% 84%, rgba(255,161,58,.025), transparent 20%),
    linear-gradient(90deg, transparent 0 10%, rgba(92,215,228,.025) 10% 10.4%, transparent 10.4% 89.6%, rgba(255,161,58,.018) 89.6% 90%, transparent 90% 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.007) 0 2px, transparent 2px 9px);
  mix-blend-mode:screen;
  opacity:.82;
}
.square{
  background:
    radial-gradient(circle at 50% 46%, rgba(255,255,255,.07) 0%, rgba(110,180,185,.030) 22%, rgba(18,33,36,.14) 60%, rgba(6,12,14,.04) 100%),
    linear-gradient(145deg, rgba(255,255,255,.03), transparent 34%),
    linear-gradient(320deg, rgba(0,0,0,.11), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.010) 0 2px, transparent 2px 8px),
    rgba(14, 24, 26, .20) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.015),
    inset 0 0 18px rgba(92,215,228,.03);
}
.square[data-tone="light"]{
  background:
    radial-gradient(circle at 50% 44%, rgba(255,250,230,.10) 0%, rgba(173,240,246,.055) 23%, rgba(63,95,99,.12) 64%, rgba(9,17,20,.03) 100%),
    linear-gradient(145deg, rgba(255,255,255,.04), transparent 34%),
    linear-gradient(320deg, rgba(92,215,228,.08), transparent 64%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 2px, transparent 2px 8px),
    rgba(92, 130, 134, .18) !important;
}
.square::before{
  content:"";
  position:absolute;
  inset:8%;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(92,215,228,.16), rgba(92,215,228,.16)) left 0 top 0 / 16% 1px no-repeat,
    linear-gradient(180deg, rgba(92,215,228,.16), rgba(92,215,228,.16)) left 0 top 0 / 1px 16% no-repeat,
    linear-gradient(90deg, rgba(255,161,58,.10), rgba(255,161,58,.10)) right 0 bottom 0 / 14% 1px no-repeat,
    linear-gradient(180deg, rgba(255,161,58,.10), rgba(255,161,58,.10)) right 0 bottom 0 / 1px 14% no-repeat;
  opacity:.28;
}
.square::after{
  border-color: rgba(156,228,233,.07);
}
.square--last{
  box-shadow:
    inset 0 0 0 2px rgba(255,161,58,.44),
    inset 0 0 34px rgba(255,161,58,.12),
    inset 0 0 0 1px rgba(255,255,255,.02);
}
.square--selected{
  box-shadow:
    inset 0 0 0 2px rgba(252,251,228,.78),
    inset 0 0 38px rgba(252,251,228,.18),
    0 0 14px rgba(252,251,228,.08);
}