/* 15パズル スタイル。プラットフォームと同じダーク(シンセウェイブ・ネオン)で自己完結。 */
:root {
  --aqua: #2de2ff; --aqua-deep: #7ef0ff; --yellow: #ff3caf;
  --ink: #e9ecff; --mut: #9a9ed6; --line: #2c2a55; --bg: #08060f; --panel: #151129;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
html, body { margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", sans-serif;
  color: var(--ink); line-height: 1.5;
  padding: .8rem; max-width: 640px; margin: 0 auto; min-height: 100vh;
  background: var(--bg);
}
/* 背景演出をトップページ(サイト)に統一:夕焼けグロー + ネオングリッド床 */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 85% at 50% -25%, rgba(255,60,175,.38), transparent 55%),
    radial-gradient(90% 60% at 8% 0%, rgba(45,226,255,.26), transparent 60%),
    radial-gradient(90% 60% at 100% 8%, rgba(124,77,255,.26), transparent 60%),
    var(--bg);
  animation: skyPulse 5s ease-in-out infinite;
}
@keyframes skyPulse { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
body::after {
  content: ""; position: fixed; left: -25%; right: -25%; bottom: 0; height: 48vh; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(45,226,255,.7) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,60,175,.5) 2px, transparent 2px);
  background-size: 44px 44px;
  transform: perspective(300px) rotateX(66deg); transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(to top, #000 6%, transparent 84%);
          mask-image: linear-gradient(to top, #000 6%, transparent 84%);
  opacity: .85; filter: drop-shadow(0 0 6px rgba(45,226,255,.5));
  animation: gridScroll 2.4s linear infinite;
}
@keyframes gridScroll { from { background-position: 0 0, 0 0; } to { background-position: 0 44px, 0 44px; } }
@media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } }
.wrap { display: flex; flex-direction: column; gap: .7rem; }

.head { display: flex; align-items: baseline; gap: 1rem; }
.head h1 { font-size: 1.15rem; margin: 0; }
.stats { margin-left: auto; display: flex; gap: 1rem; font-variant-numeric: tabular-nums; }
.stat .lbl { color: var(--mut); font-size: .74rem; margin-right: .25rem; }
.stat b { font-size: 1.05rem; }

.board-area { display: flex; justify-content: center; }
.board {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 0; max-width: 100%;
}
.tile {
  position: absolute; width: 90px; height: 90px; margin: 0; padding: 0;
  border: 0; border-radius: 12px; cursor: pointer;
  background: var(--aqua); /* 実際の色は game.js が数字ごとに設定 */
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.16), 0 2px 5px rgba(0,0,0,.12);
  transition: left .12s ease, top .12s ease, box-shadow .2s, transform .1s;
  /* 数字: 白抜き + 濃い輪郭(二重線風)で、どの色の上でもくっきり見やすく。
     フォントは柔らかい丸ゴシック系(Webフォント無しで自己完結、無い環境は順にフォールバック) */
  color: #fff;
  font-family: ui-rounded, "Hiragino Maru Gothic ProN", "Rounded Mplus 1c",
               "M PLUS Rounded 1c", "Quicksand", system-ui, sans-serif;
  font-weight: 800; font-size: 2.55rem; line-height: 1;
  -webkit-text-stroke: 3px rgba(6, 28, 34, .92);
  paint-order: stroke fill;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
  letter-spacing: -.03em;
}
.tile:hover { filter: brightness(1.06); }
.tile:active { transform: scale(.96); }
.tile.done { cursor: default; box-shadow: 0 0 0 3px var(--yellow), inset 0 -4px 0 rgba(0,0,0,.16); }
.tile:disabled { cursor: default; }

.foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.btn {
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  padding: .45rem 1rem; border-radius: 999px;
}
.btn:hover { border-color: var(--aqua); color: var(--aqua-deep); }
.msg { margin: 0; font-size: .86rem; color: var(--mut); min-height: 1.2rem; }
.msg.clear { color: var(--aqua-deep); font-weight: 700; }

/* 盤面は 90px×4 + 6px×3 = 378px。狭い画面ではスケールで枠にフィット。 */
@media (max-width: 420px) {
  .board { transform: scale(.82); transform-origin: top center; }
}