/* ==========================================================
   Split Flap Board — Broken Stones
   Edit the :root variables below to change colors.
   Board content is controlled in split-flap-board.js
   ========================================================== */

:root {
  /* --- Board colors --- */
  --sf-board-bg:  #000000;   /* outer board background */
  --sf-tile-bg:   #1c1c1e;   /* settled tile color */
  --sf-tile-text: #f5f5f0;   /* character color on settled tiles */
  --sf-hinge:     rgba(0,0,0,0.55);
  --sf-gap:       3px;
  --sf-radius:    0px;       /* 0 to prevent anti-alias fringing on 3D flip */

  /* --- Flip animation colors (cycle during loading) --- */
  --sf-c1: #000000;
  --sf-c2: #0a0a0a;
  --sf-c3: #111111;
  --sf-c4: #161616;
  --sf-c5: #1c1c1e;
  --sf-c6: #111111;
  --sf-c7: #0a0a0a;
  --sf-c8: #000000;
  --sf-c9: #1c1c1e;
}

/* ---- Full-bleed: break out of WordPress content column ---- */
#sf-board-root {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}

/* ---- Match page background to board so no white shows above/below ---- */
body:has(#sf-board-root) {
  background: var(--sf-board-bg) !important;
}

/* ---- Board wrapper: rigid object, owns its own proportions ---- */
/* aspect-ratio = 26 cols × 3 : 9 rows × 4  →  78:36  →  13:6       */
.sf-board-wrapper {
  width: 100%;
  aspect-ratio: 13 / 6;
  background: var(--sf-board-bg);
  padding: var(--sf-gap);
  box-sizing: border-box;
}

/* ---- CSS grid: 26 cols × 9 rows, fills the wrapper exactly ---- */
.sf-board {
  display: grid;
  grid-template-columns: repeat(26, 1fr);
  grid-template-rows: repeat(9, 1fr);
  width: 100%;
  height: 100%;
  gap: var(--sf-gap);
}

/* ---- Individual tile: sized by grid, not by its own aspect-ratio ---- */
.sf-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--sf-radius);
  isolation: isolate;
  perspective: 800px;
  background: var(--sf-tile-bg);
  transform: translateZ(0);
}

.sf-tile.sf-has-link {
  cursor: pointer;
}

/* ---- Color panels (4 per tile, like the original) ---- */
.sf-panel {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  background: var(--sf-tile-bg);
}
.sf-panel-top      { top: 0;   z-index: 4; }
.sf-panel-bot      { top: 50%; z-index: 3; }
.sf-panel-next-top { top: 0;   z-index: 1; }
.sf-panel-next-bot { top: 50%; z-index: 1; }

/* ---- Character label (only visible after settling) ---- */
.sf-char-label {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', Consolas, monospace;
  font-weight: 700;
  font-size: clamp(5px, 2.8vw, 52px);
  color: var(--sf-tile-text);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.02em;
  line-height: 1;
}

.sf-tile.sf-settled .sf-char-label {
  opacity: 1;
  transition: opacity 0.1s ease;
}

.sf-tile.sf-has-link:hover .sf-char-label {
  color: #ffffff;
}

/* ---- Animated flap ---- */
.sf-flap {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  transform-origin: center bottom;
  transform-style: preserve-3d;
  z-index: 6;
  will-change: transform;
  pointer-events: none;
}

.sf-flap.sf-flipping {
  animation: sfFlipDown var(--sf-dur, 300ms) cubic-bezier(.58,.04,.34,1) forwards;
}

@keyframes sfFlipDown {
  from { transform: rotateX(0deg); }
  to   { transform: rotateX(-180deg); }
}

.sf-flap-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--sf-tile-bg);
}

.sf-flap-back {
  transform: rotateX(180deg);
}

/* ---- Hinge ---- */
.sf-hinge {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: var(--sf-hinge);
  z-index: 10;
  pointer-events: none;
}