/* ============================================================
   MahjongSensei — tiles.css
   Flat 2D tile display — clean, cute, minimal chrome.
   Inspired by illustrated mahjong game aesthetics.
   ============================================================ */

/* ----------------------------------------------------------
   1. TILE BASE
   ---------------------------------------------------------- */
.tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 80px;
  background-color: var(--tile-bg, #f5edd4);
  border: 1.5px solid var(--tile-border, #c8bea0);
  border-radius: var(--tile-radius, 6px);
  box-shadow: var(--tile-shadow, 0 2px 4px rgba(5, 15, 8, 0.20));
  color: var(--tile-text, #2a2520);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  cursor: pointer;
  user-select: none;
  position: relative;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease;
}

/* Tile face image / text */
.tile__face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.tile__face img,
.tile__face svg {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

/* ----------------------------------------------------------
   2. TILE STATES
   ---------------------------------------------------------- */

/* Hovered — gentle lift */
.tile:hover:not(.tile--disabled):not(.tile--locked) {
  transform: translateY(-4px);
  border-color: var(--color-primary);
  box-shadow:
    var(--tile-shadow, 0 2px 4px rgba(5, 15, 8, 0.20)),
    0 6px 16px rgba(61, 168, 120, 0.2);
  z-index: 2;
}

/* Selected / active */
.tile--selected {
  transform: translateY(-8px);
  border-color: var(--color-primary);
  box-shadow:
    0 0 0 2px var(--color-primary),
    0 6px 16px rgba(61, 168, 120, 0.25);
  z-index: 3;
}

/* Disabled (cannot interact) */
.tile--disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Locked (no interaction but fully visible) */
.tile--locked {
  cursor: default;
}

/* Danger highlight */
.tile--danger {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 2px rgba(224, 72, 88, 0.35);
}
.tile--danger::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: rgba(224, 72, 88, 0.08);
  pointer-events: none;
}

/* Safe tile indicator */
.tile--safe {
  border-color: var(--color-success);
  box-shadow: 0 0 0 2px rgba(72, 184, 112, 0.35);
}
.tile--safe::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: rgba(72, 184, 112, 0.08);
  pointer-events: none;
}

/* Highlighted (tutorial / hint emphasis) */
.tile--highlighted {
  border-color: var(--color-warning);
  box-shadow: 0 0 0 2px rgba(232, 176, 64, 0.4);
  animation: tile-pulse 1.5s ease-in-out infinite;
}

@keyframes tile-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(232, 176, 64, 0.4); }
  50%      { box-shadow: 0 0 0 5px rgba(232, 176, 64, 0.15); }
}

/* Ghost tile (placeholder / empty slot) */
.tile--ghost {
  background: transparent;
  border-style: dashed;
  border-color: var(--color-border);
  box-shadow: none;
  opacity: 0.35;
}

/* Face-down tile */
.tile--facedown {
  background: linear-gradient(145deg, #1a5a3e 0%, #0f3a28 100%);
  border-color: #2a7a56;
  cursor: default;
}
.tile--facedown .tile__face {
  visibility: hidden;
}

/* ----------------------------------------------------------
   3. TILE SIZES
   ---------------------------------------------------------- */
.tile--sm {
  width: 40px;
  height: 54px;
  font-size: var(--fs-base);
  border-radius: calc(var(--tile-radius, 6px) * 0.75);
}

.tile--md {
  width: 48px;
  height: 64px;
  font-size: var(--fs-lg);
}

/* .tile (default) = 60x80 */

.tile--lg {
  width: 72px;
  height: 96px;
  font-size: var(--fs-2xl);
}

/* ----------------------------------------------------------
   4. HAND LAYOUT
   ---------------------------------------------------------- */
.hand {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  padding: var(--sp-2);
}

/* Separator between closed hand and drawn tile */
.hand__drawn-separator {
  width: var(--sp-3);
  flex-shrink: 0;
}

/* Drawn tile (the 14th tile, slightly separated) */
.hand .tile--drawn {
  margin-left: var(--sp-3);
}

/* Open melds (called tiles) shown to the side */
.hand__melds {
  display: inline-flex;
  align-items: flex-end;
  gap: var(--sp-3);
  margin-left: var(--sp-4);
}

.meld {
  display: inline-flex;
  align-items: flex-end;
  gap: 1px;
}

/* Sideways tile in a meld (called tile) */
.meld .tile--sideways {
  transform: rotate(90deg);
  transform-origin: bottom center;
  margin-bottom: 10px;
}

/* ----------------------------------------------------------
   5. TILE ANIMATIONS
   ---------------------------------------------------------- */

/* Draw animation: tile slides up from below */
@keyframes tile-draw {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.tile--anim-draw {
  animation: tile-draw 0.3s ease-out forwards;
}

/* Discard animation */
@keyframes tile-discard {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(16px) scale(0.85);
  }
}
.tile--anim-discard {
  animation: tile-discard 0.3s ease-in forwards;
}

/* Call animation (chi/pon/kan) */
@keyframes tile-call {
  0% { transform: scale(1); }
  40% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.tile--anim-call {
  animation: tile-call 0.35s ease-out forwards;
}

/* Reveal animation: tile flips from facedown */
@keyframes tile-reveal {
  0% {
    transform: rotateY(90deg);
    opacity: 0.5;
  }
  50% {
    transform: rotateY(-5deg);
    opacity: 1;
  }
  100% {
    transform: rotateY(0deg);
  }
}
.tile--anim-reveal {
  animation: tile-reveal 0.35s ease-out forwards;
}

/* Shake animation for incorrect action */
@keyframes tile-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-3px); }
  40%      { transform: translateX(3px); }
  60%      { transform: translateX(-2px); }
  80%      { transform: translateX(2px); }
}
.tile--anim-shake {
  animation: tile-shake 0.35s ease-in-out;
}

/* ----------------------------------------------------------
   6. DISCARD POOL TILE APPEARANCE
   ---------------------------------------------------------- */
.discard-tile {
  width: 40px;
  height: 54px;
  font-size: var(--fs-sm);
  border-radius: calc(var(--tile-radius, 6px) * 0.65);
}

/* Last discard highlighted */
.discard-tile--last {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(61, 168, 120, 0.3);
}

/* Tile called from discard (grayed / removed) */
.discard-tile--called {
  opacity: 0.3;
}

/* Riichi sideways discard */
.discard-tile--riichi {
  transform: rotate(90deg);
}

/* ----------------------------------------------------------
   7. RESPONSIVE TILE SIZING
   ---------------------------------------------------------- */

/* Tablet: <= 1024px */
@media (max-width: 1024px) {
  .tile {
    width: 48px;
    height: 64px;
    font-size: var(--fs-lg);
  }

  .tile--sm {
    width: 34px;
    height: 46px;
    font-size: var(--fs-sm);
  }

  .tile--lg {
    width: 60px;
    height: 80px;
    font-size: var(--fs-xl);
  }

  .discard-tile {
    width: 34px;
    height: 46px;
    font-size: var(--fs-xs);
  }
}

/* Mobile: <= 768px */
@media (max-width: 768px) {
  .tile {
    width: 40px;
    height: 54px;
    font-size: var(--fs-base);
  }

  .tile--sm {
    width: 30px;
    height: 40px;
    font-size: var(--fs-xs);
  }

  .tile--lg {
    width: 48px;
    height: 64px;
    font-size: var(--fs-lg);
  }

  .hand {
    gap: 1px;
    padding: var(--sp-1);
  }

  .hand .tile--drawn {
    margin-left: var(--sp-2);
  }

  .hand__melds {
    gap: var(--sp-2);
    margin-left: var(--sp-3);
  }

  .discard-tile {
    width: 30px;
    height: 40px;
    font-size: 0.65rem;
  }
}

/* ── Tile Highlight (chi spotting) ────────────────────── */
/* Exact match — bright yellow dashed box + glow */
.mj-tile--highlight {
  outline: 3px dashed #f0d040 !important;
  outline-offset: 2px;
  filter: brightness(1.2) drop-shadow(0 0 6px rgba(240, 208, 64, 0.7));
  z-index: 3;
}
/* Adjacent tiles (chi candidates) — softer yellow dashed */
.mj-tile--highlight-adj {
  outline: 2px dashed rgba(240, 208, 64, 0.6) !important;
  outline-offset: 2px;
  filter: brightness(1.1) drop-shadow(0 0 4px rgba(240, 208, 64, 0.4));
  z-index: 2;
}