/* ============================================================
   yoyo's BAR — ライブビンゴ 共有スタイル (collection.html / customer.html)
   ============================================================ */
/* ════════ ライブビンゴ ════════ */
.bingo-section { padding: 8px 16px 4px; }
.section-heading {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.02rem; font-weight: 900; color: #ffd700;
  text-shadow: 0 0 12px rgba(255,215,0,0.35); margin: 14px 0 8px;
}
.section-heading .sub { font-size: 0.66rem; font-weight: 600; color: #888; text-shadow: none; }

.bingo-card-wrap {
  background: linear-gradient(160deg, #1c1638, #120c24);
  border: 1px solid rgba(255,215,0,0.28);
  border-radius: 18px; padding: 14px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.5), inset 0 0 24px rgba(255,215,0,0.04);
}
.bingo-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.bingo-points {
  font-size: 0.74rem; color: #cbb8ff; white-space: nowrap;
}
.bingo-points b { color: #ffd700; font-size: 1.1rem; margin: 0 2px; }
.bingo-lines-badge {
  display: flex; gap: 4px;
}
.bingo-line-dot {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; font-weight: 900;
  border: 1.5px solid rgba(255,255,255,0.18); color: #666;
}
.bingo-line-dot.lit {
  border-color: #ffd700; background: rgba(255,215,0,0.2); color: #ffd700;
  box-shadow: 0 0 8px rgba(255,215,0,0.5);
}

/* グリッド */
.bingo-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px;
  position: relative;
}
.bingo-cell {
  position: relative; border-radius: 9px;
  aspect-ratio: 1; min-width: 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  display: flex; align-items: center; justify-content: center;
  padding: 3px; text-align: center; overflow: hidden;
  transition: transform 0.12s;
}
.bingo-cell .song {
  font-size: 0.5rem; line-height: 1.15; font-weight: 700; color: #d8d0f0;
  word-break: break-word; z-index: 1; position: relative;
}
@media (min-width: 420px) { .bingo-cell .song { font-size: 0.58rem; } }

/* 中央セル */
.bingo-cell.center {
  background: radial-gradient(circle, rgba(255,215,0,0.25), rgba(255,140,60,0.1));
  border-color: rgba(255,215,0,0.5);
}
.bingo-cell.center img { width: 100%; height: 100%; object-fit: contain; }
.bingo-cell.center .center-fallback { font-size: 1.4rem; }

/* 埋まったセル（穴あき／スタンプ） */
.bingo-cell.filled { border-color: rgba(255,215,0,0.55); background: rgba(255,215,0,0.08); }
.bingo-cell.filled .song { color: #fff4cf; opacity: 0.85; }
.bingo-cell .stamp {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center; z-index: 2;
}
.bingo-cell.filled .stamp { display: flex; }
.bingo-cell .stamp::before {
  content: ""; width: 66%; height: 66%; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #ffe27a, #ffae33 62%, #e07c12);
  box-shadow: 0 2px 6px rgba(0,0,0,0.45), inset 0 0 8px rgba(255,255,255,0.5);
  opacity: 0.82;
}
.bingo-cell .stamp .mark {
  position: absolute; font-size: 0.85rem; color: #08395f; font-weight: 900; z-index: 1;
}
/* リクエストで埋まったセル（別色） */
.bingo-cell.filled.by-request { border-color: rgba(93,180,255,0.6); background: rgba(93,180,255,0.1); }
.bingo-cell.filled.by-request .stamp::before {
  background: radial-gradient(circle at 38% 32%, #b6e3ff, #5db4ff 62%, #2a7fd6);
}

/* 揃ったライン上のセル */
.bingo-cell.in-line { animation: lineGlow 1.4s ease-in-out infinite; }
@keyframes lineGlow {
  0%,100% { box-shadow: 0 0 0 rgba(255,215,0,0); }
  50%      { box-shadow: 0 0 12px rgba(255,215,0,0.7); border-color:#ffd700; }
}

/* 新規スタンプ pop */
@keyframes stampPop {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  60%  { transform: scale(1.25) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.bingo-cell .stamp.pop { animation: stampPop 0.5s cubic-bezier(0.34,1.56,0.64,1); }

/* リーチ案内 */
.bingo-reach {
  margin-top: 12px; display: none;
  background: linear-gradient(135deg, rgba(255,94,156,0.16), rgba(255,154,60,0.12));
  border: 1px solid rgba(255,94,156,0.4); border-radius: 12px; padding: 11px 13px;
}
.bingo-reach.show { display: block; animation: reachIn 0.4s ease; }
@keyframes reachIn { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.bingo-reach .r-label { font-size: 0.82rem; font-weight: 900; color: #ff7eb6; margin-bottom: 6px; }
.bingo-reach .r-songs { font-size: 0.78rem; color: #ffe9b0; margin-bottom: 9px; line-height: 1.5; }
.bingo-reach .r-songs b { color: #fff; }
.bingo-reach .r-btn {
  display: block; width: 100%; padding: 10px; border-radius: 10px; border: none;
  background: linear-gradient(135deg, #ff5e9c, #ff9a3c); color: #fff;
  font-size: 0.88rem; font-weight: 900; cursor: pointer;
  box-shadow: 0 4px 14px rgba(255,94,156,0.4);
}

/* 回す機能 */
.bingo-rotate-overlay {
  position: absolute; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,215,0,0.96); color: #3a2200; border: 2px solid #fff;
  font-size: 1.05rem; font-weight: 900; z-index: 12; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.6);
  animation: rotPulse 1.2s ease-in-out infinite;
}
@keyframes rotPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,215,0,0.55); }
  50%      { box-shadow: 0 0 0 7px rgba(255,215,0,0); }
}
.bingo-grid.rotating .bingo-cell.rot-block { box-shadow: inset 0 0 0 2px rgba(124,92,255,0.6); }
.bingo-grid.rotating .bingo-cell.rot-fixed { opacity: 0.4; }
.rotate-toggle {
  width: 100%; margin-top: 10px; padding: 11px; border-radius: 10px; cursor: pointer;
  background: rgba(124,92,255,0.14); border: 1px solid #8a6bff; color: #c9b8ff;
  font-weight: 800; font-size: 0.86rem;
}
.rotate-toggle.on { background: linear-gradient(135deg,#7c5cff,#a06bff); color: #fff; border: none; }
.rotate-hint { margin-top: 8px; font-size: 0.72rem; color: #9a8cc8; text-align: center; line-height: 1.6; }
.rotate-locked { margin-top: 11px; text-align: center; font-size: 0.82rem; font-weight: 800; color: #9dff6e; }

.bingo-actions { display: flex; gap: 8px; margin-top: 12px; }
.bingo-save-btn {
  flex: 1; padding: 11px; border-radius: 10px;
  border: 1px solid rgba(255,215,0,0.4); background: rgba(255,215,0,0.08);
  color: #ffd700; font-size: 0.85rem; font-weight: 800; cursor: pointer;
}
.bingo-empty {
  background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 14px; padding: 28px 16px; text-align: center; color: #9a8cc8;
  font-size: 0.85rem; line-height: 1.6;
}
.bingo-empty .be-icon { font-size: 2.2rem; margin-bottom: 8px; }

/* ── 全画面演出オーバーレイ ── */
.bingo-fx {
  position: fixed; inset: 0; z-index: 2000;
  display: none; align-items: center; justify-content: center;
  pointer-events: none; background: rgba(8,4,18,0.4);
}
.bingo-fx.show { display: flex; }
.bingo-fx-text {
  font-size: 3rem; font-weight: 900; text-align: center;
  letter-spacing: 0.06em; animation: fxPop 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
.bingo-fx-text.reach   { color: #ff7eb6; text-shadow: 0 0 30px rgba(255,94,156,0.9); }
.bingo-fx-text.dreach  { color: #ff5e5e; text-shadow: 0 0 30px rgba(255,80,80,0.9); }
.bingo-fx-text.bingo   { color: #ffd700; text-shadow: 0 0 36px rgba(255,215,0,1); font-size: 3.6rem; }
.bingo-fx-text .small  { display: block; font-size: 1rem; color: #fff; margin-top: 10px; letter-spacing: 0.1em; }
@keyframes fxPop {
  0%   { transform: scale(0.3); opacity: 0; }
  55%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
/* ポイント獲得ポップ */
.point-pop {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 2100; display: none;
  font-size: 2.6rem; font-weight: 900; color: #9dff6e;
  text-shadow: 0 0 26px rgba(157,255,110,0.9);
}
.point-pop.show { display: block; animation: ptUp 1.6s ease forwards; }
@keyframes ptUp {
  0%   { transform: translate(-50%,-30%) scale(0.4); opacity: 0; }
  25%  { transform: translate(-50%,-50%) scale(1.1); opacity: 1; }
  75%  { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%,-80%) scale(1); opacity: 0; }
}
/* 紙吹雪 */
.fx-confetti { position: fixed; inset: 0; z-index: 1990; pointer-events: none; display: none; overflow: hidden; }
.fx-confetti.show { display: block; }
.confetti-piece { position: absolute; top: -20px; width: 9px; height: 14px; opacity: 0.95; animation: confettiFall linear forwards; }
@keyframes confettiFall {
  to { transform: translateY(110vh) rotate(720deg); opacity: 0.7; }
}

/* リーチ中：線をなぞって光り続ける演出 */
.bingo-cell.reach-line {
  animation: reachTrace 1.3s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes reachTrace {
  0%, 100% { box-shadow: inset 0 0 0 rgba(255,94,156,0); border-color: rgba(255,255,255,0.10); }
  45%      { box-shadow: inset 0 0 14px rgba(255,94,156,0.9), 0 0 12px rgba(255,94,156,0.7);
             border-color: #ff5e9c; }
}
.bingo-cell.reach-line.filled { } /* 塗り済みでもトレース光は出す */