/* games/link-game/style.css */

/* ── 棋盤容器（相對定位以覆蓋 SVG） ── */
.llk-board-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 10px;
}

.llk-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 10;
  overflow: visible;
}

.llk-board {
  display: grid;
  grid-template-columns: repeat(9, 60px);
  grid-template-rows: repeat(8, 56px);
  gap: 4px;
  background: var(--card-bg, #fff);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  user-select: none;
}

/* ── 牌格 ── */
.llk-cell {
  width: 60px;
  height: 56px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: 0 2px 6px rgba(0,0,0,0.14);
  transition: transform 0.1s, box-shadow 0.1s;
  position: relative;
}

.llk-cell:hover {
  transform: scale(0.94);
}

.llk-cell.empty {
  background: transparent;
  box-shadow: none;
  border-color: transparent;
  cursor: default;
}
.llk-cell.empty:hover { transform: none; }

/* 牌的顏色主題（與麻將接龍一致） */
.llk-cell.tile-man    { background: #fff1f0; border-color: #ff7875; color: #cf1322; }
.llk-cell.tile-pin    { background: #e6f4ff; border-color: #69b1ff; color: #0958d9; }
.llk-cell.tile-sou    { background: #f6ffed; border-color: #95de64; color: #237804; }
.llk-cell.tile-honor  { background: #f9f0ff; border-color: #b37feb; color: #531dab; }
.llk-cell.tile-flower { background: #fff7e6; border-color: #ffa940; color: #ad4e00; }

/* 選中狀態 */
.llk-cell.selected {
  transform: scale(1.08) !important;
  box-shadow: 0 0 0 3px #D4380D, 0 4px 12px rgba(212,56,13,0.35) !important;
  z-index: 5;
}

/* 可配對高亮 */
.llk-cell.matchable {
  box-shadow: 0 0 0 2px #52c41a, 0 2px 8px rgba(82,196,26,0.35) !important;
}

/* 消除動畫 */
@keyframes llk-pop {
  0%   { transform: scale(1); opacity: 1; }
  40%  { transform: scale(1.2); opacity: 0.8; }
  100% { transform: scale(0); opacity: 0; }
}
.llk-cell.removing {
  animation: llk-pop 0.25s ease-out forwards;
  pointer-events: none;
}

/* 連線動畫 */
.llk-line {
  stroke: #D4380D;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  opacity: 0;
  animation: llk-line-fade 0.35s ease-out forwards;
}
@keyframes llk-line-fade {
  0%   { opacity: 0.9; }
  100% { opacity: 0; }
}

/* ── 覆蓋層 ── */
.llk-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.llk-overlay.hidden { display: none; }

.llk-overlay-box {
  background: var(--card-bg, #fff);
  border-radius: 20px;
  padding: 28px 36px;
  text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,0.3);
  max-width: 340px;
  width: 90%;
}
.llk-overlay-title { font-size: 1.6rem; font-weight: 800; margin-bottom: 10px; }
.llk-overlay-body  { font-size: 1rem; color: var(--text-secondary, #666); line-height: 1.6; }

/* ── RWD ── */
@media (max-width: 620px) {
  .llk-board {
    grid-template-columns: repeat(9, 44px);
    grid-template-rows: repeat(8, 42px);
    gap: 3px;
    padding: 7px;
  }
  .llk-cell { width: 44px; height: 42px; font-size: 0.65rem; }
}

@media (max-width: 430px) {
  .llk-board {
    grid-template-columns: repeat(9, 36px);
    grid-template-rows: repeat(8, 34px);
    gap: 2px;
    padding: 5px;
  }
  .llk-cell { width: 36px; height: 34px; font-size: 0.58rem; }
}