/* domino-balance.css — Game-specific styles for Domino Balance */
@layer components {

  /* Neutral max-width wrapper — no background, no radius.
     Visual framing is handled by the .card wrappers inside. */
  .domino-balance-container {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--spacing-4);
  }

  /* Override the shared grey board — green felt, no dark border frame.
     Only applies inside domino-balance; the admin demo keeps grey. */
  .domino-balance-container .domino-board {
    background: var(--color-game-felt-bg);
    border: none;
  }

  /* Tile pool — layout only; the .card wrapper provides the visual frame. */
  .domino-balance-tile-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    min-height: 60px;
  }


  /* Info button — matches Hangman / Letter Shuffle style */
  .domino-balance-info-btn {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.9rem;
  }
  .domino-balance-info-btn:hover {
    color: var(--color-text-inverse);
  }

  /* Locked (pre-placed) tiles */
  .domino-tile--locked {
    opacity: 0.85;
    cursor: default !important;
    pointer-events: none;
  }
  .domino-tile--locked .domino-rotate-btn {
    display: none;
  }

  /* Target satisfied / over states applied by JS */
  .board-target--satisfied {
    color: var(--color-success) !important;
    font-weight: 800;
  }

  .board-target--over {
    color: var(--color-danger) !important;
    font-weight: 800;
  }

  /* Hint cell highlight */
  .domino-cell--hinted {
    animation: domino-hint-pulse 0.8s ease-out;
  }

  .domino-hint-ghost {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary);
    opacity: 0.6;
    pointer-events: none;
  }

  @keyframes domino-hint-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.5); }
    70%  { box-shadow: 0 0 0 8px rgba(13, 110, 253, 0); }
    100% { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0); }
  }

  /* Animation tier suppression */
  .domino-balance-anim-none .domino-tile--placed,
  .domino-balance-anim-none .domino-balance-celebrate {
    animation: none !important;
    transition: none !important;
  }

  .domino-balance-anim-reduced .domino-tile--placed {
    animation-duration: 0.15s !important;
  }

  /* Responsive: compact on mobile */
  @media (max-width: 575.98px) {
    .domino-balance-container {
      padding: var(--spacing-2);
    }
  }
}