.board-frame {
  padding: var(--frame-pad, 12px);
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--border);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  position: relative;
}
[data-theme='light'] .board-frame { background: linear-gradient(160deg, #ffffff, #e9ecf7); }

.board {
  --gap: 3px;
  --tile-radius: 10px;
  --cell: 80px;
  position: relative;
  width: calc(var(--n) * var(--cell));
  height: calc(var(--n) * var(--cell));
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.35);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 0.3s;
}
[data-theme='light'] .board { background: rgba(20, 30, 70, 0.08); box-shadow: inset 0 2px 10px rgba(20, 30, 70, 0.15); }
.board.no-anim .tile, .board.no-anim .tile-face { transition: none !important; }
.board.locked { cursor: default; }

.tile {
  position: absolute; left: 0; top: 0;
  width: var(--cell); height: var(--cell);
  transform: translate(calc(var(--c) * var(--cell)), calc(var(--r) * var(--cell)));
  transition: transform var(--slide-ms) var(--ease-out);
  will-change: transform;
  z-index: 1;
}
.board.interactive .tile:not(.blank) { cursor: grab; }
.board.interactive .tile:not(.blank):active { cursor: grabbing; }

.tile-face {
  position: absolute; inset: var(--gap);
  border-radius: var(--tile-radius);
  background-color: #1b2340;
  background-image: var(--img);
  background-size: calc(var(--n) * var(--cell)) calc(var(--n) * var(--cell));
  background-position: calc(-1 * (var(--hc) * var(--cell) + var(--gap))) calc(-1 * (var(--hr) * var(--cell) + var(--gap)));
  background-repeat: no-repeat;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -2px 0 rgba(0, 0, 0, 0.28), 0 6px 14px -5px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  transition: inset 0.5s var(--ease-out), border-radius 0.5s, background-position 0.5s var(--ease-out), transform 0.16s var(--ease-out), box-shadow 0.2s, opacity 0.45s;
}
.tile-face::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.05) 38%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.16));
  transition: opacity 0.5s;
}
.board.interactive .tile:not(.blank):hover .tile-face {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.28), 0 12px 22px -6px rgba(0, 0, 0, 0.7);
}
.board.interactive .tile:not(.blank):active .tile-face { transform: scale(0.96); }

/* numbers skin: rainbow gradient by home position */
.board[data-skin='numbers'] .tile-face {
  background-image: linear-gradient(150deg, hsl(var(--hue) 84% 68%), hsl(calc(var(--hue) + 28) 80% 47%));
  background-size: 100% 100%; background-position: 0 0;
}
.tile-label {
  font-weight: 800; color: #fff; font-size: calc(var(--cell) * 0.42); line-height: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25), 0 4px 14px rgba(0, 0, 0, 0.35);
  letter-spacing: -0.03em; position: relative; z-index: 1;
}
.board[data-skin='image'] .tile-label {
  position: absolute; top: 6%; left: 6%;
  font-size: calc(var(--cell) * 0.17); padding: 0.12em 0.4em; border-radius: 0.5em;
  background: rgba(0, 0, 0, 0.55); text-shadow: none; opacity: 0; transition: opacity 0.2s; backdrop-filter: blur(4px);
}
.board[data-skin='image'].show-numbers .tile-label { opacity: 1; }
.board.small-cells[data-skin='image'] .tile-label { font-size: calc(var(--cell) * 0.22); }

/* blank */
.tile.blank { z-index: 0; pointer-events: none; }
.tile.blank .tile-face { opacity: 0; box-shadow: none; }
.tile.blank::before {
  content: ''; position: absolute; inset: var(--gap); border-radius: var(--tile-radius);
  background: rgba(0, 0, 0, 0.32); box-shadow: inset 0 3px 12px rgba(0, 0, 0, 0.55);
  transition: opacity 0.4s;
}
[data-theme='light'] .tile.blank::before { background: rgba(20, 30, 70, 0.12); box-shadow: inset 0 3px 10px rgba(20, 30, 70, 0.22); }

/* correct-position highlight */
.tile-face::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 0 2px rgba(60, 227, 138, 0.75), inset 0 0 14px rgba(60, 227, 138, 0.35);
  opacity: 0; transition: opacity 0.3s;
}
.board.hl-correct .tile.correct .tile-face::before { opacity: 1; }
.board.solved .tile.correct .tile-face::before { opacity: 0; }
.board.solved[data-skin='image'] .tile-label { opacity: 0; }

.tile.landed .tile-face { animation: land 0.38s var(--ease-spring); }
@keyframes land { 0% { transform: scale(1); } 40% { transform: scale(1.07); } 100% { transform: scale(1); } }

/* solved: gaps close and the picture becomes whole */
.board.solved { --gap: 0px; --tile-radius: 0px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2); overflow: hidden; }
.board.solved .tile.blank .tile-face { opacity: 1; }
.board.solved .tile.blank::before { opacity: 0; }
.board.solved .tile-face::after { opacity: 0.35; }
.board.solved[data-skin='numbers'] .tile-face { border-radius: 0; }
.board.celebrate { animation: board-glow 1.6s ease-out; }
@keyframes board-glow {
  0% { box-shadow: 0 0 0 0 rgba(139, 108, 255, 0.9), 0 0 60px rgba(56, 217, 255, 0.6); }
  100% { box-shadow: 0 0 0 46px rgba(139, 108, 255, 0), 0 0 0 rgba(56, 217, 255, 0); }
}
.board.shake { animation: shake 0.3s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* overlay: tutor arrow + home markers */
.board-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.board-overlay > * { position: absolute; left: 0; top: 0; width: var(--cell); height: var(--cell); transform: translate(calc(var(--c) * var(--cell)), calc(var(--r) * var(--cell))); }
.board-overlay > [hidden] { display: none; }
.home-marker::before {
  content: ''; position: absolute; inset: calc(var(--gap) + 2px); border-radius: var(--tile-radius);
  border: 2px dashed rgba(255, 255, 255, 0.85); box-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
  animation: marker-pulse 1.4s ease-in-out infinite;
}
.home-marker.secondary::before { border-color: rgba(56, 217, 255, 0.9); }
@keyframes marker-pulse { 50% { opacity: 0.45; } }
.tutor-arrow { display: flex; align-items: center; justify-content: center; color: #fff; }
.tutor-arrow::before {
  content: ''; position: absolute; inset: var(--gap); border-radius: var(--tile-radius);
  box-shadow: 0 0 0 3px #fff, 0 0 22px 6px rgba(56, 217, 255, 0.85);
  animation: ring-pulse 1.1s ease-in-out infinite;
}
@keyframes ring-pulse { 50% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7), 0 0 10px 2px rgba(56, 217, 255, 0.5); } }
.tutor-arrow svg { width: 58%; height: 58%; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8)); }
.tutor-arrow[data-dir='down'] svg { transform: rotate(180deg); }
.tutor-arrow[data-dir='left'] svg { transform: rotate(-90deg); }
.tutor-arrow[data-dir='right'] svg { transform: rotate(90deg); }
.tutor-arrow[data-dir='up'] svg { animation: nudge-up 0.8s ease-in-out infinite; }
.tutor-arrow[data-dir='down'] svg { animation: nudge-down 0.8s ease-in-out infinite; }
.tutor-arrow[data-dir='left'] svg { animation: nudge-left 0.8s ease-in-out infinite; }
.tutor-arrow[data-dir='right'] svg { animation: nudge-right 0.8s ease-in-out infinite; }
@keyframes nudge-up { 50% { transform: translateY(-16%); } }
@keyframes nudge-down { 50% { transform: rotate(180deg) translateY(-16%); } 0%, 100% { transform: rotate(180deg); } }
@keyframes nudge-left { 50% { transform: rotate(-90deg) translateY(-16%); } 0%, 100% { transform: rotate(-90deg); } }
@keyframes nudge-right { 50% { transform: rotate(90deg) translateY(-16%); } 0%, 100% { transform: rotate(90deg); } }
.tutor-arrow.pop { animation: arrow-pop 0.35s var(--ease-spring); }
@keyframes arrow-pop { 0% { scale: 0.6; opacity: 0; } 100% { scale: 1; opacity: 1; } }

/* ghost mini board */
.ghost-stage { width: 100%; aspect-ratio: 1; max-width: 220px; margin: 0 auto 0.6rem; }
.board.ghost { opacity: 0.9; }
.board.ghost .tile-face { filter: saturate(0.6) brightness(0.9); }
.board.ghost .tile-label { font-size: calc(var(--cell) * 0.5); }
.board.ghost.solved .tile-face { filter: none; }

/* tile heat map */
.heatmap { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 4px; max-width: 360px; }
.heatmap.compact { max-width: 240px; gap: 3px; }
.heat-cell {
  aspect-ratio: 1; border-radius: 8px; position: relative; display: grid; place-items: center;
  background: hsl(calc(215 - var(--heat, 0) * 215) 80% calc(48% + var(--heat, 0) * 8%));
  color: #fff; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.heat-cell.blank { background: var(--surface); box-shadow: none; }
.heat-num { font-size: 0.9rem; line-height: 1; }
.heat-count { font-size: 0.62rem; opacity: 0.85; line-height: 1; margin-top: 2px; }
.heatmap.compact .heat-num { font-size: 0.7rem; }
.heatmap.compact .heat-count { font-size: 0.55rem; }