/* RookX daily puzzle board theme
   Drop this file next to daily-puzzle.html and styles.css,
   then load it AFTER styles.css. */

.puzzle-board-shell::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:32px;
  background:
    radial-gradient(55% 55% at 20% 15%, rgba(236,72,153,0.22), transparent 72%),
    radial-gradient(60% 60% at 82% 20%, rgba(139,92,246,0.22), transparent 72%),
    radial-gradient(60% 60% at 50% 90%, rgba(34,197,94,0.12), transparent 74%);
  filter: blur(18px);
  pointer-events:none;
  z-index:0;
}

.puzzle-board{
  position:relative;
  z-index:1;
  border:1px solid rgba(236,72,153,0.18);
  box-shadow:
    0 22px 70px rgba(0,0,0,0.52),
    0 0 0 1px rgba(139,92,246,0.16),
    0 0 36px rgba(139,92,246,0.16);
}

/* Dark mode: plum / violet board */
.puzzle-square.light{
  background: linear-gradient(180deg, #ccb9ff 0%, #ae92ff 100%);
}

.puzzle-square.dark{
  background: linear-gradient(180deg, #7c3aed 0%, #4c1d95 100%);
}

.puzzle-square:hover{
  filter: brightness(1.07) saturate(1.05);
}

.puzzle-square.selected{
  box-shadow:
    inset 0 0 0 4px rgba(236,72,153,0.86),
    inset 0 0 26px rgba(236,72,153,0.18);
}

.puzzle-piece{
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.34));
}

.puzzle-piece.white{
  color: #fff8ff;
  text-shadow:
    0 0 1px rgba(37,17,74,0.22),
    0 2px 8px rgba(0,0,0,0.16);
}

.puzzle-piece.black{
  color: #1c1233;
  text-shadow:
    0 0 1px rgba(255,255,255,0.22),
    0 2px 8px rgba(0,0,0,0.2);
}

.puzzle-coordinate{
  color: rgba(18, 7, 39, 0.58);
  font-weight: 900;
}

/* Light mode: softer pastel version */
:root[data-theme="light"] .puzzle-board{
  border-color: rgba(139,92,246,0.16);
  box-shadow:
    0 18px 60px rgba(15,23,42,0.14),
    0 0 0 1px rgba(139,92,246,0.10),
    0 0 26px rgba(139,92,246,0.10);
}

:root[data-theme="light"] .puzzle-square.light{
  background: linear-gradient(180deg, #f1eaff 0%, #e2d4ff 100%);
}

:root[data-theme="light"] .puzzle-square.dark{
  background: linear-gradient(180deg, #b794ff 0%, #8b5cf6 100%);
}

:root[data-theme="light"] .puzzle-piece.white{
  color: #fffaff;
  text-shadow:
    0 0 1px rgba(44, 20, 94, 0.18),
    0 2px 6px rgba(255,255,255,0.16);
}

:root[data-theme="light"] .puzzle-piece.black{
  color: #24123f;
  text-shadow: 0 0 1px rgba(255,255,255,0.22);
}

:root[data-theme="light"] .puzzle-coordinate{
  color: rgba(44, 20, 94, 0.62);
}