/* games/solitaire/style.css */

/* ── 遊戲板外層 ── */
#solitaire-board {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* ── 上排：牌堆列 ── */
#top-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sol-gap, 8px);
  margin-bottom: var(--sol-gap, 8px);
  padding: 0 4px;
}

.slot-spacer {
  flex: 1;
}

/* ── 牌槽（空位框） ── */
.card-slot {
  width: var(--sol-card-w, 66px);
  height: var(--sol-card-h, 94px);
  border: 2px dashed var(--color-border, #ccc);
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--color-border, #ccc);
  position: relative;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.card-slot.drop-target {
  border-color: #52c41a;
  background: rgba(82, 196, 26, 0.08);
}

.foundation-slot {
  font-size: 24px;
  font-weight: 700;
}
#foundation-0, #foundation-3 { color: #666; }
#foundation-1, #foundation-2 { color: #cf1322; }

[data-theme="dark"] .foundation-slot { color: #888; }
[data-theme="dark"] #foundation-1,
[data-theme="dark"] #foundation-2 { color: #ff7875; }

/* ── 下排：7 個牌列 ── */
#tableau-row {
  display: flex;
  gap: var(--sol-gap, 8px);
  align-items: flex-start;
  padding: 0 4px;
}

.tableau-col {
  flex: 1;
  min-width: 0;
  position: relative;
  /* 高度由卡片堆疊撐開 */
  min-height: var(--sol-card-h, 94px);
}

/* ── 卡片 ── */
.sol-card {
  position: absolute;
  width: 100%;
  height: var(--sol-card-h, 94px);
  border-radius: 8px;
  border: 1.5px solid rgba(0,0,0,0.15);
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  cursor: pointer;
  transition: box-shadow 0.12s, transform 0.08s;
  overflow: hidden;
  box-sizing: border-box;
  background: #fff;
}

.sol-card:active { transform: scale(0.97); }

/* 牌背面 */
.sol-card.face-down {
  background:
    repeating-linear-gradient(
      45deg,
      #b02020 0px, #b02020 4px,
      #d44040 4px, #d44040 8px
    );
  cursor: default;
}

/* 牌正面 */
.sol-card.face-up { background: #fff; }
[data-theme="dark"] .sol-card.face-up { background: #2a2a3a; }

/* 紅色花色 */
.sol-card.red .card-corner-tl,
.sol-card.red .card-corner-br,
.sol-card.red .card-center-suit { color: #cf1322; }

/* 黑色花色 */
.sol-card.black .card-corner-tl,
.sol-card.black .card-corner-br,
.sol-card.black .card-center-suit {
  color: #141414;
}
[data-theme="dark"] .sol-card.black .card-corner-tl,
[data-theme="dark"] .sol-card.black .card-corner-br,
[data-theme="dark"] .sol-card.black .card-center-suit { color: #e0e0e0; }

/* 角落值 */
.card-corner-tl {
  position: absolute;
  top: 4px;
  left: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}
.card-corner-br {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  transform: rotate(180deg);
}
.card-center-suit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 30px;
  opacity: 0.15;
  pointer-events: none;
}

/* 選取高亮 */
.sol-card.selected {
  box-shadow: 0 0 0 3px #1890ff, 0 4px 12px rgba(24,144,255,0.4);
  z-index: 100 !important;
}

/* 提示高亮 */
.sol-card.hint-glow {
  box-shadow: 0 0 0 3px #52c41a, 0 4px 12px rgba(82,196,26,0.5);
  animation: hint-pulse 0.7s ease-in-out 3;
}
@keyframes hint-pulse {
  0%, 100% { box-shadow: 0 0 0 3px #52c41a, 0 4px 12px rgba(82,196,26,0.3); }
  50% { box-shadow: 0 0 0 6px #52c41a, 0 4px 18px rgba(82,196,26,0.7); }
}

/* 廢棄堆上的牌（最上面那張） */
#waste-pile .sol-card {
  position: relative;
  width: var(--sol-card-w, 66px);
  cursor: pointer;
}

/* 牌堆（Stock）：顯示背面或「空」圖示 */
#stock-pile .sol-card {
  position: relative;
  width: 100%;
  cursor: pointer;
}
#stock-empty-icon {
  font-size: 28px;
  color: #aaa;
  pointer-events: none;
}

/* 響應式：螢幕較窄時縮小卡片 */
@media (max-width: 480px) {
  :root {
    --sol-card-w: 44px;
    --sol-card-h: 62px;
    --sol-gap: 5px;
  }
  .card-corner-tl, .card-corner-br { font-size: 10px; left: 3px; top: 3px; }
  .card-corner-br { right: 3px; bottom: 3px; }
  .card-center-suit { font-size: 20px; }
}

@media (min-width: 481px) and (max-width: 640px) {
  :root {
    --sol-card-w: 56px;
    --sol-card-h: 80px;
    --sol-gap: 7px;
  }
}

@media (min-width: 641px) {
  :root {
    --sol-card-w: 72px;
    --sol-card-h: 100px;
    --sol-gap: 10px;
  }
  .card-corner-tl, .card-corner-br { font-size: 14px; }
  .card-center-suit { font-size: 34px; }
}

/* 列高度（由 JS 動態設定 padding-bottom 撐開） */
.tableau-col { padding-bottom: 4px; }

/* 勝利動畫 */
@keyframes fly-to-foundation {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.3) translateY(-200px); opacity: 0; }
}
.sol-card.winning { animation: fly-to-foundation 0.4s ease-in forwards; }