/* ── MAHJONG: spielspezifisch ── */
main {
  flex: 1;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 16px 40px;
}

/* Info-Bar */
.info-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 1100px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.score-box {
  flex: 1;
  min-width: 80px;
  padding: 8px 16px;
}

/* Spielfeld-Wrapper */
.board-outer {
  position: relative;
  width: 100%;
  max-width: 1100px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg2);
  box-shadow: 0 0 40px rgba(0,245,255,0.06), 0 0 0 1px rgba(0,245,255,0.04);
  overflow: hidden;
}
.board-outer::before, .board-outer::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  z-index: 2;
  pointer-events: none;
}
.board-outer::before { top: 0; left: 0; border-top: 2px solid var(--neon1); border-left: 2px solid var(--neon1); }
.board-outer::after  { bottom: 0; right: 0; border-bottom: 2px solid var(--neon2); border-right: 2px solid var(--neon2); }

/* Deko-Canvas für Tile-Silhouetten im Hintergrund */
#mjBg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* Scrollbarer Bereich für das Spielfeld */
.board-scroll {
  overflow-x: auto;
  overflow-y: visible;
  position: relative;
  z-index: 1;
}

#board {
  position: relative;
  margin: 24px;
  min-height: 300px;
}

/* Steine */
.mj-tile {
  position: absolute;
  width: 56px; height: 72px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  border-radius: 4px;
  box-shadow:
    1px 0 0 1px rgba(0,245,255,0.15),
    2px 2px 0 0 rgba(0,245,255,0.1),
    3px 3px 0 0 rgba(0,180,200,0.12),
    4px 4px 0 0 rgba(0,120,150,0.15),
    5px 5px 5px rgba(0,0,0,0.5);
  transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
  filter: brightness(0.92);
}
.mj-tile img {
  width: 100%; height: 100%;
  object-fit: fill;
  border-radius: 3px;
  display: block;
  pointer-events: none;
  filter: saturate(0.85) hue-rotate(5deg);
}
.mj-tile:hover {
  transform: translate(-1px, -1px);
  filter: brightness(1.05);
  box-shadow:
    1px 0 0 1px rgba(0,245,255,0.3),
    2px 2px 0 0 rgba(0,245,255,0.2),
    4px 4px 0 0 rgba(0,180,200,0.2),
    5px 5px 8px rgba(0,0,0,0.5);
}
.mj-tile.selected {
  outline: 2px solid var(--neon1);
  outline-offset: 1px;
  transform: translate(-1px, -2px);
  filter: brightness(1.1);
  box-shadow:
    2px 2px 0 0 rgba(0,245,255,0.3),
    4px 4px 0 0 rgba(0,180,200,0.2),
    5px 5px 12px rgba(0,245,255,0.35);
}
.mj-tile.hint {
  outline: 2px solid var(--neon4);
  outline-offset: 1px;
  animation: hint-pulse 0.7s ease-in-out infinite alternate;
}
@keyframes hint-pulse {
  from { filter: brightness(0.95); box-shadow: 0 0 6px rgba(0,255,136,0.3); }
  to   { filter: brightness(1.15); box-shadow: 0 0 16px rgba(0,255,136,0.6); }
}
.mj-tile.removing {
  animation: tile-remove 0.28s ease-out forwards;
  pointer-events: none;
}
@keyframes tile-remove {
  0%   { opacity: 1; transform: scale(1); filter: brightness(1.5); }
  100% { opacity: 0; transform: scale(0.7); filter: brightness(2) blur(2px); }
}

/* Mahjong Overlay — relativ im board-outer, z-index über dem Canvas */
.overlay {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(8, 11, 20, 0.72);
  gap: 10px;
  text-align: center;
  padding: 60px 24px;
  border-radius: 7px;
  z-index: 10;
}
.overlay.hidden { display: none; }

/* HINT / NEW als echte Buttons */
.btn-action {
  border-color: var(--neon1);
  color: var(--neon1);
  box-shadow: 0 0 10px rgba(0,245,255,0.15);
  border-radius: 6px;
  padding: 10px 22px;
}
.btn-action:hover {
  background: rgba(0,245,255,0.08);
  box-shadow: 0 0 18px rgba(0,245,255,0.35);
}
.btn-action.hint-btn {
  border-color: var(--neon4);
  color: var(--neon4);
  box-shadow: 0 0 10px rgba(0,255,136,0.15);
}
.btn-action.hint-btn:hover {
  background: rgba(0,255,136,0.08);
  box-shadow: 0 0 18px rgba(0,255,136,0.35);
}