/* css/board.css — board housing + page */

:root {
  --page-bg:     #060606;
  --housing-bg:  #1c1a16;       /* warm brown-dark, lifts from the page */
  --bezel:       #2a2621;       /* inner frame edge */
  --tile-gap:    4px;
  --board-pad:   16px;
}

html, body {
  width: 100%;
  height: 100%;
  /* Page background derives from the active theme's --page-bg; the gradient is
     auto-computed (lighter toward the center, darker toward the edges) so every
     theme keeps the subtle "hanging on a wall" vignette. */
  background: radial-gradient(
    ellipse at 50% 38%,
    color-mix(in srgb, var(--page-bg, #060606), white 4%) 0%,
    var(--page-bg, #060606) 55%,
    color-mix(in srgb, var(--page-bg, #060606), black 60%) 100%
  );
  color: #fff;
}

.stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 32px;
  box-sizing: border-box;
}

.board {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 22), 1fr);
  grid-template-rows: repeat(var(--grid-rows, 6), auto);
  gap: var(--tile-gap);
  padding: var(--board-pad);
  background: var(--housing-bg);
  border-radius: 6px;
  box-shadow:
    /* Layered drop shadows — board hangs on the wall */
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 8px 16px -4px rgba(0, 0, 0, 0.55),
    0 22px 40px -10px rgba(0, 0, 0, 0.65),
    0 44px 90px -12px rgba(0, 0, 0, 0.75),
    /* Bezel (inner frame) + top highlight catching ambient light from above */
    inset 0 0 0 3px var(--bezel),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6);
  --tile-size: clamp(20px, 3.6vw, 80px);
  position: relative;
}

.board.with-screws::before,
.board.with-screws::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1a1a1a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 0 rgba(0,0,0,0.5);
}
.board.with-screws::before { top: 6px; left: 6px; }
.board.with-screws::after  { top: 6px; right: 6px; }

.corner-actions {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  gap: 8px;
  z-index: 10;
}

.corner-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,0.05);
  color: rgba(242,232,207,0.4);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.corner-btn:hover { background: rgba(255,255,255,0.1); color: rgba(242,232,207,0.85); }
.corner-btn.muted svg polygon ~ path { display: none; }