/* Small site-specific CSS: smooth highlight transitions and metadata styling */
:root{
  --highlight-green: rgba(40, 167, 69, 0.6);
  --highlight-red: rgba(220, 53, 69, 0.6); /* red for incorrect move highlights */
  --highlight-blue: rgba(0, 123, 255, 0.6); /* blue for hint highlights */
  --highlight-selection: rgba(138, 43, 226, 0.5); /* purple for selected piece - visible on both light and dark squares */
  --highlight-duration: 1.2s; /* default duration for highlight visibility */
}
.square-55d63 {
  transition: background-color 0.35s ease;
}
.square-highlight-green {
  background-color: var(--highlight-green) !important;
}
.square-highlight-red {
  background-color: var(--highlight-red) !important;
}
.square-highlight-blue {
  background-color: var(--highlight-blue) !important;
}

/* Override chessboard.js default yellow highlight with a more visible purple */
.highlight1-32417 {
  background-color: var(--highlight-selection) !important;
  box-shadow: inset 0 0 3px 3px rgba(138, 43, 226, 0.4) !important;
}

#puzzleMeta { font-size: 0.95rem; }

/* Pulsing reveal animation for correct move: fade in brighter, then fade out */
@keyframes reveal-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.0); transform: scale(1); }
  30% { box-shadow: 0 0 12px 4px rgba(40,167,69,0.28); transform: scale(1.02); }
  70% { box-shadow: 0 0 8px 2px rgba(40,167,69,0.16); transform: scale(1.01); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.0); transform: scale(1); }
}

.square-reveal-anim {
  animation: reveal-pulse var(--highlight-duration) ease-in-out both;
}

/* Ribbon streak animations: subtle pulse for normal increments, prominent for records */
@keyframes streak-pulse-normal {
  0% { transform: scale(1); color: inherit; }
  40% { transform: scale(1.15); color: #28a745; }
  60% { transform: scale(1.08); color: #28a745; }
  100% { transform: scale(1); color: inherit; }
}

@keyframes streak-pulse-record {
  0% { transform: scale(1); color: inherit; text-shadow: none; }
  25% { transform: scale(1.3); color: #ffc107; text-shadow: 0 0 8px rgba(255, 193, 7, 0.6); }
  50% { transform: scale(1.2); color: #ffc107; text-shadow: 0 0 12px rgba(255, 193, 7, 0.8); }
  75% { transform: scale(1.25); color: #ffc107; text-shadow: 0 0 8px rgba(255, 193, 7, 0.6); }
  100% { transform: scale(1); color: inherit; text-shadow: none; }
}

.streak-pulse-normal {
  animation: streak-pulse-normal 1s ease-in-out;
}

.streak-pulse-record {
  animation: streak-pulse-record 1.2s ease-in-out;
}

/* Responsive board layout tweaks */
#board {
  width: 100%;          /* occupy column width */
  max-width: 520px;     /* avoid excessively large boards on wide screens */
  margin: 0 auto 1rem auto;
}

/* Prevent page scrolling/selection while interacting with the board on touch devices.
   This allows dragging pieces without the browser gesture dragging the page. */
#board, #board .board {
  touch-action: none; /* disable native panning when interacting with the board */
  -ms-touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* Chessboard contained element (chessboard.js sets an inner .board) */
.board {
  width: 100% !important;
  height: auto !important;
}

/* For small screens stack board above controls and avoid overlap */
@media (max-width: 767.98px) {
  .row {
    flex-wrap: wrap;
  }
  .col-md-6 {
    width: 100%;
    max-width: 100%;
  }
  /* make board occupy more of the viewport on small devices (allow room
     for padding) so the chessboard can be larger in portrait. */
  #board { max-width: calc(100vw - 1.5rem); }
  /* When controls stack below the board, add breathing room and ensure
     button sizing is comfortable on touch devices. */
  #info, #puzzleMeta { margin-top: 0.75rem; }
  #hint, #next { margin-top: 0.5rem; min-width: 6.5rem; }
}

/* Landscape phones: cap board height to viewport but allow scrolling so users
   can access the lower part of the board when it doesn't fit the initial
   viewport. Enable smooth native touch scrolling on iOS/Android. */
@media (max-height: 600px) and (orientation: landscape) {
  /* Let the board expand naturally and rely on the page's vertical
     scrolling so the bottom of the board is reachable by scrolling the
     whole page rather than a nested scroll area. */
  #board {
    max-height: none;
    overflow: visible; /* allow page scroll to reveal lower squares */
    display: block;
  }
  .board {
    width: 100% !important;
    height: auto !important;
    display: block;
  }
}