/* ==========================================
   8パズル
   共通部分（色・ボタン・ダイアログ・効果）は ../../assets/css/game-base.css
   ========================================== */
:root {
  --board-pad: 8px;       /* 盤面の枠とピースの間 */
  --tile-gap: 8px;        /* ピース同士の隙間（main.js が読み取って配置に使う） */
  --tile-radius: 12px;
  --slide-ms: 140ms;      /* 1手のスライド時間 */
  --morph-ms: 450ms;      /* 完成時にピースがくっつく時間 */
  --color-hint: #fbbf24;  /* ヒントと評価の星 */
}

/* ==========================================
   Layout
   ========================================== */
.app {
  width: min(100%, 560px);
  margin: 0 auto;
  padding: 16px;
  display: grid;
  gap: 14px;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.app-header__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: clamp(20px, 5vw, 26px);
  letter-spacing: .02em;
}
.app-header__tools { display: flex; gap: 6px; }


.game { display: grid; gap: 12px; }

.app-footer {
  padding-top: 4px;
  text-align: center;
  font-size: 12px;
  color: var(--color-muted);
}

/* ==========================================
   Levels（難易度の切り替え）
   ========================================== */
.levels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(2, 6, 23, .35);
}
.levels__btn {
  appearance: none;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1px;
  min-height: var(--tap);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-muted);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.levels__btn:hover { color: var(--color-text); }
.levels__btn[aria-pressed="true"] { background: var(--color-surface-raised); color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.levels__stars { font-size: 10px; line-height: 1; letter-spacing: 1px; color: var(--color-hint); }
.levels__stars:empty { display: none; }

/* ==========================================
   Stats
   ========================================== */
.stats {
  display: flex;
  justify-content: center;
  gap: 28px;
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(2, 6, 23, .35);
}
.stats__item {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: 8px;
  margin: 0;
}
.stats__label { font-size: 13px; color: var(--color-muted); }
.stats__value {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.stats__best {
  grid-column: 1 / -1;
  font-size: 11px;
  text-align: center;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

/* ==========================================
   Board
   ========================================== */
.board-wrap { display: grid; justify-items: center; }

.board {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  box-shadow: var(--shadow-panel);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: box-shadow .6s ease;
}

.board__tiles {
  position: absolute;
  inset: var(--board-pad);
  border-radius: var(--tile-radius);
  overflow: hidden;
}

/* 盤面の下に完成図をうっすら敷く */
.board__tiles::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--picture);
  background-size: 100% 100%;
  opacity: .28;
  pointer-events: none;
}

.board--celebrate {
  box-shadow: 0 0 0 2px rgba(34, 211, 238, .45), 0 0 44px rgba(34, 211, 238, .3);
}

/* ==========================================
   Tile
   ========================================== */
.tile {
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 1;
  transform: translate3d(0, 0, 0);
  transition:
    transform var(--slide-ms) cubic-bezier(.25, .9, .2, 1),
    opacity .3s ease;
  will-change: transform;
}
.tile:focus-visible { z-index: 2; outline-offset: -3px; border-radius: var(--tile-radius); }

.tile__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--tile-radius);
  background-image: var(--picture);
  background-repeat: no-repeat;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: transform .08s ease, filter .15s ease, border-radius var(--morph-ms) ease, box-shadow var(--morph-ms) ease;
}
@media (hover: hover) {
  .tile:hover .tile__face { filter: brightness(1.08); }
}
.tile:active .tile__face { transform: scale(.95); }

/* 正しい位置に入った瞬間に縁を光らせる */
.tile__face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  box-shadow: inset 0 0 0 3px rgba(34, 211, 238, .95), inset 0 0 22px rgba(34, 211, 238, .55);
  pointer-events: none;
}
.tile--landed .tile__face::after { animation: tile-landed .7s ease-out; }
@keyframes tile-landed {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* ヒント：次に動かすピースを点滅させる */
.tile__face::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  opacity: 0;
  box-shadow: inset 0 0 0 3px var(--color-hint), inset 0 0 26px rgba(251, 191, 36, .6);
  pointer-events: none;
}
/* 4×4 以上：すぐ次に動かすピースは白く控えめに（揃えるピースの黄色と区別する） */
.tile--next .tile__face::before {
  opacity: 1;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .9), inset 0 0 20px rgba(255, 255, 255, .45);
}
.tile--hint .tile__face::before {
  box-shadow: inset 0 0 0 3px var(--color-hint), inset 0 0 26px rgba(251, 191, 36, .6);
  animation: tile-hint .8s ease-in-out infinite alternate;
}
@keyframes tile-hint {
  from { opacity: .3; }
  to { opacity: 1; }
}

/* 4×4 以上：揃えるピースの行き先を点線で示す */
.board__goal {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  border: 2px dashed var(--color-hint);
  border-radius: var(--tile-radius);
  background: rgba(251, 191, 36, .12);
  pointer-events: none;
  animation: board-goal 1.1s ease-in-out infinite alternate;
}
@keyframes board-goal {
  from { opacity: .45; }
  to { opacity: 1; }
}

/* 空きマス（完成時だけ最後のピースとして現れる） */
.tile--empty { opacity: 0; pointer-events: none; cursor: default; }

/* ==========================================
   Board states
   ========================================== */
/* 完成：隙間が閉じて 1 枚の絵に戻る */
.board--complete .tile { cursor: default; }
.board--complete .tile--empty { opacity: 1; }
.board--complete .tile__face { border-radius: 0; box-shadow: none; filter: none; transform: none; }

/* 完成形への変形中・完成形から戻る途中 */
.board--morph .tile {
  transition:
    transform var(--morph-ms) cubic-bezier(.2, .8, .2, 1),
    width var(--morph-ms) cubic-bezier(.2, .8, .2, 1),
    height var(--morph-ms) cubic-bezier(.2, .8, .2, 1),
    opacity .35s ease;
}

/* シャッフル中：少し弾むように、順番に散らばる（遅延は JS が入れる） */
.board--shuffling .tile {
  transition: transform .38s cubic-bezier(.3, 1.3, .5, 1), opacity .3s ease;
}

.board--instant .tile,
.board--instant .tile__face { transition: none !important; }

/* 完成時に光の帯が横切る */
.board__shine {
  position: absolute;
  inset: var(--board-pad);
  border-radius: var(--tile-radius);
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}
.board__shine::after {
  content: "";
  position: absolute;
  inset: -10%;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
  transform: translateX(-110%);
}
.board--shine .board__shine::after { animation: board-shine .9s ease-out; }
@keyframes board-shine {
  to { transform: translateX(110%); }
}

/* ==========================================
   Win card
   ========================================== */
/* 完成した絵をなるべく隠さないよう、盤面の下端に細長く出す */
.win {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 12px;
  padding: 10px 10px 10px 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: rgba(3, 7, 18, .88);
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.96);
  transition: opacity .3s ease, transform .35s cubic-bezier(.3, 1.3, .5, 1), visibility 0s linear .35s;
}
.win.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity .3s ease, transform .35s cubic-bezier(.3, 1.3, .5, 1), visibility 0s;
}
.win__head { display: flex; align-items: center; gap: 10px; }
.win__title { margin: 0; font-size: 18px; letter-spacing: .06em; white-space: nowrap; }
.win__stars { display: flex; gap: 2px; margin: 0; font-size: 20px; line-height: 1; }
.star { display: inline-block; color: rgba(255, 255, 255, .18); }
.star.is-on { color: var(--color-hint); animation: star-pop .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes star-pop {
  0% { transform: scale(.3); }
  60% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.win__result,
.win__detail {
  grid-column: 1;
  margin: 0;
  font-size: 13px;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.win__detail { font-size: 12px; }
.win__detail:empty { display: none; }
.win__detail--perfect { color: var(--color-hint); font-weight: 700; }
.win .btn { grid-column: 2; grid-row: 1 / span 3; padding: 0 14px; font-size: 14px; }

/* ==========================================
   Controls
   ========================================== */
.controls {
  display: grid;
  grid-template-columns: 1.25fr repeat(3, 1fr);
  gap: 8px;
}
.controls .btn { padding: 0 4px; font-size: 14px; }

.hint {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--color-muted);
}

/* ==========================================
   縦が短い画面（iPhone SE など）：説明文を隠し、余白を詰めて盤面を大きく残す
   ========================================== */
@media (orientation: portrait) and (max-height: 700px) {
  .app { gap: 8px; padding: 12px 16px; }
  .game { gap: 8px; }
  .hint { display: none; }
}

/* ==========================================
   スマホ横向き：盤面を左、ボタン類を右に並べて 1 画面に収める
   条件は main.js の LANDSCAPE_QUERY と合わせる
   ========================================== */
@media (orientation: landscape) and (max-height: 600px) {
  .app {
    width: 100%;
    min-height: 100svh;
    padding: 12px 16px;
    grid-template-columns: auto minmax(0, var(--side-width, 320px));
    grid-template-rows: auto auto auto 1fr auto auto;
    grid-template-areas:
      "board header"
      "board levels"
      "board stats"
      "board ."
      "board controls"
      "board footer";
    gap: 10px 20px;
    justify-content: center;
    align-content: center;
  }
  .game { display: contents; }
  .app-header { grid-area: header; }
  .levels { grid-area: levels; }
  .stats { grid-area: stats; }
  .board-wrap { grid-area: board; align-self: center; }
  .controls { grid-area: controls; }
  .hint { display: none; } /* 横向きのスマホでは高さが足りないため隠す */
  .app-footer { grid-area: footer; padding-top: 0; }
  .app-header__title { font-size: 20px; }
  .stats { gap: 20px; }
  .stats__value { font-size: 20px; }
}

/* ==========================================
   演出を減らす
   ========================================== */
.fx-reduced .tile,
.fx-reduced .tile__face { transition: none !important; }
.fx-reduced .tile--hint .tile__face::before { animation: none; opacity: 1; }
.fx-reduced .board__goal { animation: none; }
.fx-reduced .star.is-on { animation: none; }
.fx-reduced .tile--landed .tile__face::after,
.fx-reduced .board--shine .board__shine::after { animation: none; }
.fx-reduced .board,
.fx-reduced .tile__face { box-shadow: none; }
.fx-reduced .win { backdrop-filter: none; transition: none; }