/* 箱入り娘(Klotski) スタイル。盤面 4×84 × 5×84 = 336×420。
   背景はプラットフォームと同じダーク(シンセウェイブ調)。駒は木製の質感。 */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: #e9ecff;
  background: #08060f;
  min-height: 100vh;
  padding: 14px;
  -webkit-user-select: none; user-select: none;
  touch-action: none; /* ドラッグ中のスクロール/ズームを抑止 */
}
/* 背景演出をトップページ(サイト)に統一:夕焼けグロー + ネオングリッド床 */
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%),
    #08060f;
  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; gap: 20px; align-items: flex-start; flex-wrap: wrap; }

/* ---- 盤面(木箱) ---- */
.board-area { flex: 0 0 auto; }
.board {
  position: relative;
  /* 箱の内側=濃い木目 */
  background-color: #4a3419;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 1px, transparent 1px 5px),
    linear-gradient(180deg, rgba(255,220,170,.06), rgba(0,0,0,.25));
  border: 8px solid #7a5426;
  border-bottom-color: transparent;    /* 下辺は出口側で開ける */
  border-radius: 10px 10px 0 0;
  box-shadow: inset 0 3px 12px rgba(0,0,0,.55), 0 0 22px rgba(45,226,255,.12);
}
.exit {
  width: 336px; height: 28px; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.exit::before, .exit::after {
  content: ""; position: absolute; top: 0; width: 84px; height: 8px; background: #7a5426;
}
.exit::before { left: 0; }
.exit::after { right: 0; }
.exit span {
  font-size: .72rem; letter-spacing: .3em; color: #2de2ff; font-weight: 700;
  border: 2px dashed rgba(45,226,255,.6); border-top: 0; padding: 2px 12px; border-radius: 0 0 8px 8px;
  text-shadow: 0 0 8px rgba(45,226,255,.6);
}

/* ---- ピース(木製) ---- */
.piece {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  font-weight: 800; font-size: 1.15rem;
  color: rgba(52,28,6,.9);
  text-shadow: 0 1px 0 rgba(255,236,205,.5);
  border: 1px solid rgba(0,0,0,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,240,210,.55),
    inset 0 -4px 7px rgba(0,0,0,.32),
    0 2px 3px rgba(0,0,0,.45);
  cursor: grab;
  transition: left .12s ease, top .12s ease;
  touch-action: none;
  /* 共通の木目(縦の年輪) */
  background-blend-mode: multiply, multiply, normal;
}
.piece:active { cursor: grabbing; }
.piece.sel { outline: 3px solid #2de2ff; outline-offset: -3px; z-index: 5;
  box-shadow: 0 0 14px rgba(45,226,255,.7), inset 0 1px 0 rgba(255,240,210,.55), inset 0 -4px 7px rgba(0,0,0,.32); }

/* 木の質感: 種類ごとに木の色味を変える(細い年輪 + ハイライト筋 + 上明下暗) */
.p-musume, .p-chichi, .p-haha, .p-banto, .p-jochu, .p-ani, .p-kozo {
  background-image:
    repeating-linear-gradient(90deg, rgba(50,25,8,.22) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255,225,180,.12) 0 2px, transparent 2px 10px),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.2));
}
/* 娘 = 赤みの強い木(桜・漆塗り風)。目立たせる。文字はクリーム色。 */
.p-musume { background-color: #a24632; color: #fff2e0; text-shadow: 0 1px 2px rgba(0,0,0,.5); font-size: 1.55rem; }
/* 父・母 = オーク(明るい茶) */
.p-chichi, .p-haha { background-color: #b47b3f; }
/* 番頭・女中 = ウォルナット(濃い茶) */
.p-banto, .p-jochu { background-color: #7c5730; color: rgba(255,240,215,.92); text-shadow: 0 1px 0 rgba(0,0,0,.35); }
/* 兄 = パイン(黄みの明るい木) */
.p-ani { background-color: #c8a05e; }
/* 小僧 = バーチ(淡い木) */
.p-kozo { background-color: #cdaa72; font-size: 1rem; }

/* クリア演出: 娘が出口から滑り出る */
.piece.escape { transition: transform .8s ease-in, opacity .8s ease-in; opacity: 0; z-index: 9; }

/* ---- 右パネル ---- */
.panel { flex: 1 1 220px; min-width: 200px; padding-top: 4px; }
.panel h1 { font-size: 1.5rem; margin: 0 0 14px; color: #eaffff;
  text-shadow: 0 0 10px rgba(45,226,255,.6); letter-spacing: .02em; }
.stats { display: flex; gap: 18px; margin-bottom: 16px; }
.stat { display: flex; flex-direction: column; }
.stat .lbl { font-size: .68rem; color: #7ef0ff; letter-spacing: .12em; text-transform: uppercase;
  font-family: ui-monospace, "Courier New", monospace; }
.stat b { font-size: 1.6rem; font-variant-numeric: tabular-nums; font-family: ui-monospace, "Courier New", monospace; }
.controls { display: flex; gap: 10px; margin-bottom: 14px; }
.btn {
  font: inherit; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  border: 0; border-radius: 8px; cursor: pointer; padding: .5rem 1.15rem;
  background: linear-gradient(135deg, #2de2ff, #13b6d6); color: #04121a;
  box-shadow: 0 0 12px rgba(45,226,255,.6);
}
.btn.ghost { background: transparent; color: #7ef0ff; border: 1px solid #2de2ff;
  box-shadow: inset 0 0 12px rgba(45,226,255,.12); text-shadow: 0 0 8px rgba(45,226,255,.5); }
.btn:disabled { opacity: .4; cursor: default; box-shadow: none; }
.msg { min-height: 1.4em; font-size: .92rem; font-weight: 700; color: #7ef0ff; margin: .5rem 0;
  text-shadow: 0 0 8px rgba(45,226,255,.4); }
.msg.clear { color: #ff86d2; font-size: 1.05rem; text-shadow: 0 0 10px rgba(255,60,175,.6); }
.hint { font-size: .8rem; color: #9a9ed6; line-height: 1.6; }