/* ============================================
   Mahjong Solitaire — Game-Specific Styles
   ============================================ */

/* --- Info Bar --- */
.game-info-bar {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 14px;
}

.info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.info-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
}

.info-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-heading);
}

/* --- Board Container --- */
#board-container {
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: 10px 0 16px;
  -webkit-user-select: none;
  user-select: none;
}

#board {
  position: relative;
  /* Sized dynamically by JS */
}

/* --- Tile Base --- */
.mj-tile {
  position: absolute;
  width: var(--tile-w, 44px);
  height: var(--tile-h, 58px);
  cursor: pointer;
  transition: opacity 0.15s ease, filter 0.15s ease, transform 0.12s ease;
  z-index: 0; /* overridden inline per layer */
}

/* 3D tile body */
.mj-tile .tile-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* Top face */
  background: linear-gradient(145deg, #f5f0e8, #e8e0d0);
  border: 1px solid #c9c0b0;
  box-shadow:
    2px 3px 0 0 #a89880,   /* right edge */
    0 3px 0 0 #a89880,     /* bottom edge */
    2px 0 0 0 #bfb49e,     /* right edge lighter */
    2px 3px 6px rgba(0,0,0,0.35); /* drop shadow */
  color: #2a2520;
  font-size: calc(var(--tile-h, 58px) * 0.38);
  font-weight: 700;
  line-height: 1;
}

.mj-tile .tile-label {
  font-size: calc(var(--tile-h, 58px) * 0.17);
  margin-top: 1px;
  opacity: 0.55;
  letter-spacing: 0.3px;
  font-weight: 400;
}

/* Suit-specific colors on face symbol */
.mj-tile[data-suit="bamboo"] .tile-symbol { color: #2e7d32; }
.mj-tile[data-suit="circle"] .tile-symbol { color: #1565c0; }
.mj-tile[data-suit="character"] .tile-symbol { color: #c62828; }
.mj-tile[data-suit="wind"] .tile-symbol { color: #37474f; }
.mj-tile[data-suit="dragon"] .tile-symbol { color: #6a1b9a; }
.mj-tile[data-suit="season"] .tile-symbol { color: #e65100; }
.mj-tile[data-suit="flower"] .tile-symbol { color: #ad1457; }

/* Dragon special colours */
.mj-tile[data-face="dragon_red"] .tile-symbol { color: #c62828; }
.mj-tile[data-face="dragon_green"] .tile-symbol { color: #2e7d32; }
.mj-tile[data-face="dragon_white"] .tile-symbol { color: #546e7a; }

/* --- States --- */

/* Blocked (not free) */
.mj-tile.blocked {
  cursor: default;
  filter: brightness(0.65);
}

/* Selected */
.mj-tile.selected .tile-face {
  border-color: var(--accent);
  box-shadow:
    2px 3px 0 0 #a89880,
    0 3px 0 0 #a89880,
    2px 0 0 0 #bfb49e,
    0 0 0 3px var(--accent),
    2px 3px 12px rgba(77, 166, 255, 0.45);
}

/* Hint glow */
.mj-tile.hint .tile-face {
  border-color: #ffb300;
  box-shadow:
    2px 3px 0 0 #a89880,
    0 3px 0 0 #a89880,
    2px 0 0 0 #bfb49e,
    0 0 0 3px #ffb300,
    0 0 16px rgba(255, 179, 0, 0.5);
}

/* Match / remove animation */
.mj-tile.matched {
  animation: tileMatch 0.4s ease forwards;
  pointer-events: none;
}

@keyframes tileMatch {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.7;
  }
  100% {
    transform: scale(0.5);
    opacity: 0;
  }
}

/* Undo / reappear animation */
.mj-tile.reappear {
  animation: tileReappear 0.3s ease forwards;
}

@keyframes tileReappear {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Hover (only for free tiles) */
.mj-tile:not(.blocked):hover .tile-face {
  background: linear-gradient(145deg, #fffdf5, #f0e8d8);
  border-color: #b0a890;
}

/* Active press */
.mj-tile:not(.blocked):active .tile-face {
  transform: translateY(1px);
}

/* --- Overlays --- */
.result-content p {
  color: var(--text-secondary);
  margin-bottom: 16px;
  font-size: 15px;
}

#win-overlay .result-content h2 {
  color: #4caf50;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .game-info-bar {
    gap: 20px;
    margin-bottom: 10px;
  }

  .info-value {
    font-size: 18px;
  }

  .game-controls {
    gap: 6px;
  }

  .game-controls .btn-secondary {
    padding: 8px 14px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .game-info-bar {
    gap: 16px;
  }

  .info-value {
    font-size: 16px;
  }

  .info-label {
    font-size: 10px;
  }

  .game-controls .btn-secondary {
    padding: 7px 10px;
    font-size: 12px;
  }
}