/* chimera.css — ぷにキメラ合体パズル専用スタイル（PuniBeats 本体の style.css とは独立） */
:root {
  --bg: #0c2016;
  --panel: #173a28;
  --line: #2f6a4a;
  --text: #f4fff6;
  --accent: #ffd54a;
  --mint: #8dffc0;
  --pink: #ff8fb8;
  --cell: 90px;           /* JS が画面サイズと盤面サイズ（4/5）から計算して上書き */
  --n: 4;
  --squash: 0;            /* JS が拍ごとに 1→0 で更新（ぷにっと伸び縮み） */
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(circle at 50% 30%, #1d4a33, var(--bg) 70%);
  background-color: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  flex-direction: column;
}

header { display: flex; align-items: center; gap: 10px; padding: 6px 12px; flex-wrap: wrap; }
header h1 { font-size: 1.15rem; margin: 0; color: var(--mint); flex: 1; white-space: nowrap; }
header button, header a, .sub-btn {
  background: var(--panel); color: var(--text); border: 2px solid var(--line);
  border-radius: 999px; padding: 4px 12px; font-size: 0.9rem; text-decoration: none; cursor: pointer;
}

#stage {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 4px 16px 12px;
}
@media (orientation: portrait) { #stage { flex-direction: column; } }

/* 盤面: マスの下地は背景グラデーションで描く */
#board {
  position: relative;
  flex: none;
  width: calc(var(--cell) * var(--n));
  height: calc(var(--cell) * var(--n));
  border-radius: 16px;
  border: 3px solid var(--line);
  background-color: #0f2c1e;
  background-image:
    radial-gradient(circle at center, rgba(141, 255, 192, 0.07) 0 38%, transparent 40%),
    linear-gradient(rgba(255,255,255,0.06) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 2px, transparent 2px);
  background-size: var(--cell) var(--cell);
  overflow: hidden; /* 合体のぷにっと拡大が盤面の外にはみ出さないように */
}
#board.nudge { animation: nudge 0.2s; }
@keyframes nudge { 30% { translate: -4px 0; } 70% { translate: 4px 0; } }
body.over #board { animation: shake 0.35s; }
@keyframes shake {
  20% { translate: -6px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 3px 0; }
}

/* 1匹 = 1マス */
.tile {
  position: absolute; left: 0; top: 0;
  width: var(--cell); height: var(--cell);
  transition: transform 0.12s ease-out;
  will-change: transform;
}
.tile::before { /* レベルごとの台座 */
  content: ''; position: absolute; inset: 7%;
  border-radius: 22%;
  background: rgba(255, 255, 255, 0.07);
}
.tile.lv2::before { background: rgba(141, 255, 192, 0.16); border: 3px solid rgba(141, 255, 192, 0.65); }
.tile.lv3::before {
  background: rgba(255, 213, 74, 0.2); border: 3px solid var(--accent);
  box-shadow: 0 0 14px rgba(255, 213, 74, 0.6);
}
.chimera-tile::before {
  background: rgba(255, 143, 184, 0.18); border: 3px solid transparent;
  background-image: linear-gradient(#1a3a2a, #1a3a2a), conic-gradient(#ff8fb8, #ffd54a, #8dffc0, #8fd0ff, #ff8fb8);
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: 0 0 18px rgba(255, 143, 184, 0.6);
}
.tile-char {
  position: absolute;
  left: 50%; bottom: 14%;
  width: 62%;
  translate: -50% 0;
  transform-origin: 50% 100%;
}
.tile.lv1 .tile-char { width: 54%; }
.tile.lv3 .tile-char, .chimera-tile .tile-char { width: 74%; }
.tile.sing .tile-char {
  transform: scale(calc(1 + var(--squash) * 0.08), calc(1 - var(--squash) * 0.10));
}
.stars, .ttl { /* 台座の下端に小さなラベルで出す（絵に隠れないように） */
  position: absolute; left: 50%; bottom: 3%; translate: -50% 0;
  padding: 1px 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.45);
  font-size: calc(var(--cell) * 0.13); line-height: 1.15; white-space: nowrap;
  color: var(--accent); pointer-events: none;
}
.tile.lv1 .stars { color: #fff9; }
.tile.lv2 .stars { color: var(--mint); }
.ttl { color: var(--pink); font-weight: bold; }

.tile.spawn .tile-char { animation: pop-in 0.22s ease-out; }
@keyframes pop-in { from { scale: 0; } }
.tile.merge .tile-char { animation: merge 0.28s ease-out; }
@keyframes merge { 40% { scale: 1.25; } }
.tile.absorbed { opacity: 0; transition: transform 0.12s ease-out, opacity 0.12s 0.1s; z-index: 0; }
.tile.vanish { animation: vanish 0.26s ease-in forwards; }
@keyframes vanish { to { scale: 1.4; opacity: 0; } }

/* 画像キャラの口パク: 閉じ口が基本、歌っている子だけ拍の前半で口を開く */
.img-char { position: relative; }
.img-char img { width: 100%; height: auto; display: block; pointer-events: none; }
.img-char .img-close, .img-char .img-horror, .img-char .img-glitch { position: absolute; inset: 0; }
.img-char .img-horror, .img-char .img-glitch { visibility: hidden; }
.img-char.has-close .img-open { visibility: hidden; }
.img-char.has-close .img-close { visibility: visible; }
body.beat-on .tile.sing .img-char.has-close .img-open { visibility: visible; }
body.beat-on .tile.sing .img-char.has-close .img-close { visibility: hidden; }
/* キメラの切り貼り合成（専用絵が無いときのフォールバック・本体 style.css と同じ） */
.chimera .chi-top { width: 100%; height: auto; display: block; clip-path: inset(0 0 52% 0); pointer-events: none; }
.chimera .chi-bottom { position: absolute; inset: 0; width: 100%; height: auto; clip-path: inset(48% 0 0 0); pointer-events: none; }
/* SVGキャラ（画像なし環境）の口と目 */
svg.char .mouth-open, svg.char .eyes-x { display: none; }
body.beat-on .tile.sing svg.char .mouth-open { display: inline; }
body.beat-on .tile.sing svg.char .mouth-idle { display: none; }

/* ゲームオーバー: 全員 _horror 顔 */
body.over #board .img-char.has-horror img { visibility: hidden !important; }
body.over #board .img-char.has-horror .img-horror { visibility: visible !important; }
body.over #board svg.char .eyes-n { display: none; }
body.over #board svg.char .eyes-x { display: inline; }
body.over #board .chimera-tile { filter: saturate(0.3) brightness(0.7); }

/* 右のサイド情報 */
#side {
  width: 190px; flex: none;
  display: flex; flex-direction: column; gap: 8px;
}
@media (orientation: portrait) {
  #side { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; }
  #side .hint { display: none; }
}
.stat { background: var(--panel); border: 2px solid var(--line); border-radius: 12px; padding: 4px 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.stat b { color: var(--accent); font-size: 1.3rem; }
.stat.best b { color: var(--pink); }
.pool-title { font-size: 0.85rem; opacity: 0.8; }
#pool { display: flex; flex-wrap: wrap; gap: 2px; }
.pool-face { width: 40px; }
.hint { font-size: 0.8rem; opacity: 0.8; margin: 0; }

/* キメラ誕生・なかま解放のお知らせ */
#toast {
  position: fixed; left: 50%; top: 45%;
  translate: -50% -50%;
  z-index: 15; pointer-events: none;
  opacity: 0; text-align: center;
}
#toast.show { animation: toast 1.9s ease-out forwards; }
@keyframes toast {
  0% { opacity: 0; scale: 0.4; } 12% { opacity: 1; scale: 1.08; } 20% { scale: 1; }
  80% { opacity: 1; } 100% { opacity: 0; }
}
#toast .card { width: 200px; background: rgba(23, 58, 40, 0.92); border-color: var(--pink); box-shadow: 0 0 30px rgba(255, 143, 184, 0.5); }
#toast .card-name { font-size: 1.1rem; }
.toast-pts { color: var(--accent); font-weight: bold; font-size: 1.4rem; text-shadow: 0 2px 0 #0008; }
.new { color: var(--pink); font-weight: bold; }
.unlock { background: rgba(23, 58, 40, 0.92); border: 2px solid var(--mint); border-radius: 16px; padding: 10px 18px; font-weight: bold; }
.unlock .char { width: 70px; margin: 0 auto; }

/* キメラのカード（結果・図鑑・お知らせで共通） */
.cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0; }
.card {
  width: 104px; padding: 6px 4px;
  background: rgba(255, 255, 255, 0.06); border: 2px solid var(--line); border-radius: 14px;
  text-align: center;
}
.card .char { width: 80%; margin: 0 auto; }
.card-name { font-size: 0.78rem; margin-top: 2px; }
.card.unknown .q { font-size: 2.4rem; opacity: 0.35; height: 84px; display: flex; align-items: center; justify-content: center; }
.card.unknown .card-name { opacity: 0.5; }

/* スタート・結果・図鑑 */
.overlay {
  position: fixed; inset: 0;
  background: rgba(4, 14, 9, 0.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 20; padding: 16px;
}
.overlay[hidden] { display: none; }
.panel {
  background: var(--panel); border: 3px solid var(--line); border-radius: 20px;
  padding: 18px 24px; text-align: center;
  max-width: 600px; width: 100%; max-height: 100%; overflow: auto;
}
.panel.wide { max-width: 980px; }
.panel h2 { margin: 0 0 8px; color: var(--mint); }
.panel .small, .small { font-size: 0.85rem; opacity: 0.85; }
.result-score { font-size: 1.4rem; }
.result-score b { color: var(--accent); font-size: 2rem; }
#res-best-badge { color: var(--pink); font-size: 1rem; }
.size-row, .btn-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.big-btn {
  background: var(--accent); color: #2a2208; border: none; border-radius: 999px;
  font-size: 1.15rem; font-weight: bold; padding: 10px 26px; cursor: pointer;
}
.big-btn:disabled { opacity: 0.5; }
.size-btn { display: flex; flex-direction: column; align-items: center; min-width: 170px; border-radius: 18px; }
.size-btn small { font-size: 0.75rem; font-weight: normal; }