/* games-web/depth.css — the shared "2.5D" depth system.
 *
 * The look of a polished board game is mostly layered gradients, bevels and soft
 * shadows — not a 3D scene. Everything here is compositor-friendly (transform, opacity,
 * box-shadow, gradients), costs no download beyond this file, and adds no WebGL context.
 * Real 3D stays reserved for the dice, where tumbling actually needs it.
 *
 * Deliberately NOT used: perspective/rotateX on the boards. It looks good in a
 * screenshot and then it moves every click target — these boards are drag-and-drop and
 * tap-a-token, so precision beats tilt.
 *
 * No `filter: blur()` on large surfaces and no `backdrop-filter` on boards: those are
 * the two things that actually hurt on cheap Android.
 */

:root {
  --d3-lift-1: 0 1px 2px rgba(0, 0, 0, 0.28);
  --d3-lift-2: 0 3px 6px rgba(0, 0, 0, 0.34), 0 1px 2px rgba(0, 0, 0, 0.24);
  --d3-lift-3: 0 10px 22px rgba(0, 0, 0, 0.42), 0 3px 6px rgba(0, 0, 0, 0.3);
  --d3-rim: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --d3-well: inset 0 3px 8px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

/* =============================================================================
 * CHESS — the biggest gap: pieces are outline glyphs today, so they read flat.
 * A gradient fill plus a cast shadow turns the same glyph into a carved piece.
 * ============================================================================= */
.board .sq {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), inset 0 -1px 0 rgba(0, 0, 0, 0.16);
}
/* the highlight states paint over the whole square, so they must win the bevel */
.board .sq.last, .board .sq.sel, .board .sq.check, .board .sq.pre, .board .sq.mark { box-shadow: inset 0 0 0 60px currentColor; }

.board .piece {
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)) drop-shadow(0 5px 6px rgba(0, 0, 0, 0.28));
  transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.15s;
}
/* Gradient-filled glyphs. Guarded: where background-clip:text is unsupported the piece
   keeps its existing solid colour and simply loses the sheen. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  /* Most of a white piece must stay white: push the shading into the bottom third, or
     the glyph greys out and stops reading as "white" against a light square. */
  .board .piece.w {
    background: linear-gradient(170deg, #ffffff 42%, #f6efe0 72%, #d9cbae 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .board .piece.b {
    background: linear-gradient(170deg, #7b7166 6%, #332d26 46%, #0d0a08 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
/* picking a piece up should feel like picking it up */
.board .piece:active,
.board .sq.sel .piece {
  transform: translateY(-3px) scale(1.06);
  filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.5)) drop-shadow(0 12px 14px rgba(0, 0, 0, 0.35));
}

/* =============================================================================
 * LUDO — tokens become domes with a ground shadow; bases become wells.
 * ============================================================================= */
.board .token {
  border: none !important;
  box-shadow:
    var(--d3-lift-2),
    inset 0 2px 3px rgba(255, 255, 255, 0.55),
    inset 0 -3px 5px rgba(0, 0, 0, 0.32);
  transition: transform 0.14s cubic-bezier(0.2, 1.4, 0.4, 1), box-shadow 0.2s;
}
/* contact shadow on the board under each token — sells "sitting on" rather than "drawn on" */
.board .token::before {
  content: "";
  position: absolute;
  left: 8%; right: 8%; bottom: -14%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0) 70%);
  z-index: -1;
  pointer-events: none;
}
.board .token.movable,
.board .token:active {
  transform: translateY(-8%) scale(1.06);
  box-shadow: var(--d3-lift-3), inset 0 2px 3px rgba(255, 255, 255, 0.6), inset 0 -3px 5px rgba(0, 0, 0, 0.32);
}
/* Home bases carry NO per-cell shading. Even a 1px bevel repeats 25 times across a
   quadrant and reads as banding; ludo.css now shades each quadrant with a single .quad
   overlay, which is one continuous light instead of 25 restarts. */
/* path squares get a hairline bevel so the track reads as tiles, not paint */
.board .cell.path { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.12); }

/* the board itself sits on the table */
.board {
  box-shadow: var(--d3-lift-3), 0 0 0 1px rgba(0, 0, 0, 0.35);
  border-radius: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .board .piece, .board .token { transition: none; }
  .board .piece:active, .board .sq.sel .piece, .board .token.movable, .board .token:active { transform: none; }
}