/* pairs.css — ぷにペアめくり専用スタイル（PuniBeats 本体の style.css とは独立） */
:root {
  --bg: #2a1640;
  --panel: #3b2160;
  --line: #6a45a0;
  --text: #fff7e8;
  --accent: #ffd34d;
  --pink: #ff8ac6;
  --mint: #7ee8c4;
  --cw: 120px;           /* カードの幅（JS が画面サイズから計算） */
  --cols: 4;
  --squash: 0;           /* JS が拍ごとに 1→0 で更新（ぷにっと伸び縮み） */
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background-color: var(--bg);
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 2px, transparent 2px);
  background-size: 24px 24px;
  color: var(--text);
  font-family: "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  flex-direction: column;
}

header { display: flex; align-items: center; gap: 12px; padding: 6px 12px; flex-wrap: wrap; }
header h1 { font-size: 1.2rem; margin: 0; color: var(--accent); white-space: nowrap; }
#hud { display: flex; gap: 14px; flex: 1; flex-wrap: wrap; font-size: 0.95rem; }
#hud b { color: var(--accent); font-size: 1.1rem; }
#hud .best b { color: var(--pink); }
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; padding: 4px 16px 12px; }
#grid { display: grid; grid-template-columns: repeat(var(--cols), var(--cw)); gap: 12px; }

/* カード（裏＝♪マーク／表＝キャラ）。めくりは Y 軸回転 */
.card {
  position: relative;
  width: var(--cw);
  aspect-ratio: 3 / 4;
  padding: 0; border: none; background: none; cursor: pointer;
  perspective: 600px;
}
.card .back, .card .front {
  position: absolute; inset: 0;
  border-radius: 16px;
  border: 3px solid var(--line);
  backface-visibility: hidden;
  transition: transform 0.25s ease;
  display: flex; align-items: center; justify-content: center;
}
.card .back {
  background: repeating-linear-gradient(45deg, #5a3590 0 10px, #4b2b7c 10px 20px);
  color: rgba(255, 255, 255, 0.35);
  font-size: calc(var(--cw) * 0.35);
}
.card .front { background: #fff7e8; transform: rotateY(180deg); padding: 8% 10% 4%; align-items: flex-end; }
.card.up .back { transform: rotateY(-180deg); }
.card.up .front { transform: rotateY(0); }
.card:hover:not(.up) .back { border-color: var(--accent); }
.card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 16px; }
.card.done .front { background: #fff3c4; border-color: var(--accent); box-shadow: 0 0 16px rgba(255, 211, 77, 0.6); }
.card.done { cursor: default; }
.card.pop .front { animation: pop 0.35s ease-out; }
@keyframes pop { 40% { scale: 1.12; } }

.card .front .char { width: 100%; transform-origin: 50% 100%; }
.card.done .front .char { transform: scale(calc(1 + var(--squash) * 0.06), calc(1 - var(--squash) * 0.08)); }
.ear-face { font-size: calc(var(--cw) * 0.5); color: var(--line); align-self: center; animation: wiggle 0.57s ease-in-out infinite alternate; }
@keyframes wiggle { from { rotate: -8deg; } to { rotate: 8deg; } }

/* 画像キャラの口パク: 閉じ口が基本、そろった子だけ拍の前半で口を開く。めくったばかりの子は口を開けて歌う */
.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-close { visibility: hidden; }
body.beat-on .card.done .img-char.has-close .img-open { visibility: hidden; }
body.beat-on .card.done .img-char.has-close .img-close { visibility: visible; }
svg.char .eyes-x { display: none; }

/* スタート・クリア画面 */
.overlay {
  position: fixed; inset: 0;
  background: rgba(15, 6, 28, 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: 20px 26px; text-align: center; max-width: 640px; width: 100%; max-height: 100%; overflow: auto;
}
.panel h2 { margin: 0 0 8px; color: var(--accent); }
.small { font-size: 0.85rem; opacity: 0.85; }
.result-score { font-size: 1.3rem; }
.result-score b { color: var(--accent); font-size: 1.9rem; }
#res-best-badge { color: var(--pink); font-size: 1rem; }
.stars-big { font-size: 2.2rem; color: var(--accent); margin: 4px 0; letter-spacing: 0.1em; }
.mode-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: #3a2a10; border: none; border-radius: 999px;
  font-size: 1.15rem; font-weight: bold; padding: 10px 26px; cursor: pointer;
}
.big-btn:disabled { opacity: 0.5; }
.mode-btn { display: flex; flex-direction: column; align-items: center; min-width: 150px; border-radius: 18px; }
.mode-btn small { font-size: 0.75rem; font-weight: normal; }
.mode-btn.ear { background: var(--mint); }