/* CCレモン固有のスタイル（共通部分は assets/css/game.css） */

.moves { margin: 8px auto; border-collapse: collapse; font-size: 0.9rem; }
.moves th, .moves td { border: 2px solid var(--ink); padding: 4px 10px; background: #fff; text-align: left; }
.moves th { background: #fff3a8; white-space: nowrap; }

/* ---------- シーン（教室で円になって座る） ---------- */
.scene {
  position: relative;
  height: min(70vh, 640px);
  min-height: 500px;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background:
    linear-gradient(to bottom, #f3ead7 0 16%, #b5864f 16% 17%, transparent 17%),
    repeating-linear-gradient(90deg, #d9ae78 0 46px, #cc9f69 46px 48px);
  user-select: none;
}
.ring {
  position: absolute;
  left: 50%; top: 44%;
  width: 84%; height: 58%;
  transform: translate(-50%, -50%);
  border: 5px dashed rgba(255, 255, 255, 0.7);
  border-radius: 50%;
}
.scene.flash-hit { animation: shake 0.35s; }
@keyframes shake {
  20% { translate: -8px 0; } 40% { translate: 8px 0; } 60% { translate: -5px 0; } 80% { translate: 5px 0; }
}

/* ビームなどのエフェクト */
.fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.fx .beam { stroke: #ffe14d; stroke-linecap: round; filter: drop-shadow(0 0 6px #fff3a8); animation: beam 0.5s ease-out forwards; }
.fx .beam.core { stroke: #fff; }
@keyframes beam { from { stroke-dashoffset: 1000; opacity: 1; } 70% { stroke-dashoffset: 0; opacity: 1; } to { stroke-dashoffset: 0; opacity: 0.2; } }

/* ---------- 相手の席 ---------- */
.seat {
  position: absolute;
  width: 120px;
  text-align: center;
  transform: translate(-50%, -32%) scale(var(--s, 1));
  z-index: 2;
  transition: filter 0.3s, opacity 0.3s;
}
.seat .body { width: 74px; height: 120px; margin: 0 auto; }
.seat .body .art-svg { width: 100%; height: 100%; }
.seat.beat-on .body { animation: bounce 0.18s ease-out; }
.seat.charge .body { filter: drop-shadow(0 0 10px #ffe14d) drop-shadow(0 0 4px #ffe14d); }
.seat.guard .body { filter: drop-shadow(0 0 8px #7ec8f0) drop-shadow(0 0 3px #7ec8f0); }
.seat.down { filter: grayscale(0.9); opacity: 0.55; }
.seat.down .body { rotate: -8deg; translate: 0 10px; }
.seat.targetable { cursor: pointer; }
.seat.targetable .body { outline: 3px dashed var(--red); outline-offset: 4px; border-radius: 12px; }
.seat.targeted .body { outline: 4px solid var(--red); outline-offset: 4px; border-radius: 12px; }
.seat .name {
  display: inline-block;
  font-weight: 900;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0 10px;
  font-size: 0.85rem;
}
.seat .act {
  position: absolute; left: 50%; top: -26px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-weight: 900;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 0 8px;
  animation: pop 0.25s ease-out;
}
.seat .act.beam, .seat .act.big { background: #ffe14d; }
.seat .act.guard { background: #cfe9f8; }
@keyframes bounce { 50% { translate: 0 -6px; } }

.lemons { display: flex; justify-content: center; gap: 1px; min-height: 20px; }
.lemons .art { width: 18px; height: 18px; }
.me-lemons .art { width: 26px; height: 26px; }

/* ---------- 中央 ---------- */
.center {
  position: absolute;
  left: 50%; top: 36%;
  transform: translateX(-50%);
  width: min(56%, 460px);
  text-align: center;
  z-index: 4;
  pointer-events: none;
}
.beat {
  font-size: clamp(2.4rem, 9vw, 4rem);
  font-weight: 900;
  color: #fff;
  min-height: 1.3em;
  text-shadow: 3px 3px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink);
}
.beat.on { animation: pop 0.2s ease-out; }
.beat.mon { color: #ffe14d; }

/* ---------- 自分（一人称の両手） ---------- */
.me {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 40%;
  z-index: 3;
  pointer-events: none;
}
.me-lemons { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 2; background: rgba(255,255,255,0.8); border: 2px solid var(--ink); border-radius: 999px; padding: 2px 10px; }
.fp { position: absolute; left: 50%; bottom: -40px; width: 0; height: 0; }
.fp-hand {
  position: absolute;
  bottom: 0;
  width: clamp(90px, 17vw, 140px);
  aspect-ratio: 1;
  transition: transform 0.12s ease-out;
}
.fp-hand .art-svg { width: 100%; height: 100%; }
.fp-hand.left { right: 0; }
.fp-hand.right { left: 0; }
/* ポーズ（左手は左右反転して使う） */
.fp .fp-hand.left { transform: translateX(-60%) rotate(-12deg) scaleX(-1); }
.fp .fp-hand.right { transform: translateX(60%) rotate(12deg); }
.fp.pose-clap .fp-hand.left { transform: translateX(8%) rotate(8deg) scaleX(-1); }
.fp.pose-clap .fp-hand.right { transform: translateX(-8%) rotate(-8deg); }
.fp.pose-charge .fp-hand.left { transform: translateX(-90%) translateY(18%) rotate(-25deg) scaleX(-1); }
.fp.pose-charge .fp-hand.right { transform: translateX(90%) translateY(18%) rotate(25deg); }
.fp.pose-guard .fp-hand.left { transform: translateX(15%) translateY(-10%) rotate(40deg) scaleX(-1); }
.fp.pose-guard .fp-hand.right { transform: translateX(-15%) translateY(-10%) rotate(-40deg); }
.fp.pose-beam .fp-hand.left,
.fp.pose-big .fp-hand.left { transform: translateX(10%) translateY(-22%) scale(1.15) scaleX(-1); }
.fp.pose-beam .fp-hand.right,
.fp.pose-big .fp-hand.right { transform: translateX(-10%) translateY(-22%) scale(1.15); }
.fp.down { filter: grayscale(1); opacity: 0.5; }
.fp-glow {
  position: absolute; left: -110px; bottom: 40px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 241, 140, 0.95), rgba(255, 225, 77, 0) 70%);
  opacity: 0;
  transition: opacity 0.15s;
}
.fp.pose-charge .fp-glow { opacity: 0.5; }
.fp.pose-big .fp-glow { opacity: 1; transform: scale(1.4); }
.fp.pose-guard .fp-glow { opacity: 0.6; background: radial-gradient(circle, rgba(126, 200, 240, 0.8), rgba(126, 200, 240, 0) 70%); }

/* ---------- 技ボタン ---------- */
.moves-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.move-btn {
  display: grid; justify-items: center;
  padding: 8px 4px;
  font-family: inherit;
  background: #fff;
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.move-btn b { font-size: clamp(0.9rem, 3.4vw, 1.15rem); }
.move-btn small { font-size: 0.72rem; color: var(--ink-soft); font-weight: 700; }
.move-btn:hover:not(:disabled) { background: #fff8c4; }
.move-btn.chosen { background: #ffe14d; transform: translateY(2px); box-shadow: 0 2px 0 rgba(59, 42, 30, 0.25); }
.move-btn.big { background: #fff3a8; }
.move-btn.big.chosen { background: #ffd000; }
.move-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.target-hint { text-align: center; font-weight: 700; color: var(--red); min-height: 1.4em; margin: 6px 0 0; }

@media (max-width: 560px) {
  .seat { width: 96px; }
  .seat .body { width: 58px; height: 94px; }
  .center { width: 70%; }
}