/* live-show.css - AIアイドルライブ配信ステージUI */
:root {
  --ls-bg:#0a0a0f; --panel:rgba(10,10,20,0.92); --border:rgba(255,255,255,0.12);
  --accent:#c084fc; --green:#4ade80; --red:#f43f5e; --yellow:#fbbf24;
  --text:#f1f5f9; --muted:#94a3b8; --panel-h:auto;
}

/* ===== ステージ ===== */
#stage-wrap { position:relative;width:100%;height:100%;overflow:hidden;background:var(--ls-bg); }
#vrm-canvas { display:block;width:100%;height:100%;position:relative;z-index:1; }

/* ===== ローディング/エラー ===== */
#loading-overlay {
  position:absolute;inset:0;background:rgba(0,0,0,0.85);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:100;
}
#loading-overlay.hidden { display:none; }
.loading-spinner { width:36px;height:36px;border:3px solid #333;border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
#loading-text { color:var(--muted);font-size:14px; }
#loading-progress { color:var(--accent);font-size:12px; }
#error-overlay { position:absolute;inset:0;background:rgba(0,0,0,0.9);display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;z-index:101; }
#error-overlay.visible { display:flex; }

/* ===== バッジ/ラベル ===== */
#live-badge { position:absolute;top:12px;left:14px;background:var(--red);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:4px;letter-spacing:1px;z-index:50;display:none; }
#live-badge.visible { display:block; }
#show-state-label { position:absolute;top:12px;left:50%;transform:translateX(-50%);background:rgba(10,10,20,0.7);border:1px solid var(--border);border-radius:20px;padding:4px 16px;font-size:12px;color:var(--muted);z-index:50;pointer-events:none; }
#show-state-label.mc { color:var(--accent);border-color:rgba(192,132,252,0.4); }
#show-state-label.singing { color:var(--yellow);border-color:rgba(251,191,36,0.4); }

/* ===== コメントオーバーレイ ===== */
#comment-overlay { position:absolute;inset:0;pointer-events:none;z-index:40;overflow:hidden; }
#comment-flow-area { position:absolute;top:0;left:0;right:0;bottom:60px;overflow:hidden; }

.flow-comment {
  position:absolute;right:-100%;white-space:nowrap;font-size:18px;font-weight:bold;
  text-shadow:1px 1px 3px #000,-1px -1px 3px #000;color:#fff;
  animation:flow-right 8s linear forwards;pointer-events:none;line-height:1;
}
.flow-comment.superchat { color:var(--yellow);font-size:22px; }
.flow-comment.highlighted { color:#a5f3fc; }
@keyframes flow-right { from{right:-100%} to{right:110%} }

#comment-list { position:absolute;bottom:10px;right:10px;width:260px;max-height:200px;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:4px;pointer-events:auto; }
#comment-list::-webkit-scrollbar { width:4px; }
#comment-list::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.2);border-radius:2px; }

.comment-item { display:flex;align-items:flex-start;gap:6px;background:rgba(10,10,25,0.75);border:1px solid rgba(255,255,255,0.08);border-radius:8px;padding:5px 8px;font-size:12px;animation:slide-in .2s ease-out; }
@keyframes slide-in { from{opacity:0;transform:translateX(12px)} to{opacity:1;transform:none} }
.comment-item.superchat { border-color:rgba(251,191,36,0.4);background:rgba(30,20,0,0.82); }
.comment-item.highlighted { border-color:rgba(165,243,252,0.4);background:rgba(5,20,30,0.82); }
.comment-author { color:var(--accent);font-weight:bold;white-space:nowrap;flex-shrink:0;font-size:11px; }
.comment-item.superchat .comment-author { color:var(--yellow); }
.comment-item.highlighted .comment-author { color:#a5f3fc; }
.comment-text { color:#e2e8f0;word-break:break-all;line-height:1.4; }

/* ===== 管理パネル ===== */
#admin-panel { position:fixed;bottom:0;left:0;right:0;background:var(--panel);border-top:1px solid var(--border);backdrop-filter:blur(12px);z-index:60;display:flex;flex-direction:column;gap:6px;padding:8px 14px;overflow-y:auto;max-height:50vh; }
.panel-row { display:flex;align-items:center;gap:10px;flex-wrap:wrap; }
.status-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0;background:#555; }
.status-dot.mc { background:var(--accent);animation:pulse 2s infinite; }
.status-dot.singing { background:var(--yellow);animation:pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
#show-status-text { font-size:13px;color:var(--muted); }

.btn-show { padding:7px 18px;border:none;border-radius:20px;font-size:13px;font-weight:bold;cursor:pointer;transition:background .15s,opacity .15s; }
.btn-show:disabled { opacity:.4;cursor:default; }
#btn-start { background:linear-gradient(135deg,#7c3aed,#c084fc);color:#fff; }
#btn-start:hover:not(:disabled) { background:linear-gradient(135deg,#6d28d9,#a855f7); }
#btn-stop { background:rgba(244,63,94,0.8);color:#fff;display:none; }
#btn-stop:hover:not(:disabled) { background:rgba(244,63,94,1); }

#setlist-wrap { display:flex;align-items:center;gap:8px;overflow-x:auto;flex:1;padding:2px 0;scrollbar-width:none; }
#setlist-wrap::-webkit-scrollbar { display:none; }
.setlist-label { font-size:11px;color:var(--muted);white-space:nowrap; }
.setlist-item { padding:3px 10px;border-radius:12px;font-size:11px;white-space:nowrap;background:rgba(255,255,255,0.06);border:1px solid var(--border);color:var(--muted);flex-shrink:0; }
.setlist-item.current { background:rgba(251,191,36,0.15);border-color:rgba(251,191,36,0.5);color:var(--yellow);font-weight:bold; }
.setlist-item.done { opacity:.4;text-decoration:line-through; }

#sse-status { font-size:10px;color:var(--muted);margin-left:auto;white-space:nowrap; }
#sse-status.connected { color:var(--green); }
#sse-status.error { color:var(--red); }

/* ===== 歌唱演出 ===== */
#stage-wrap.singing { animation: stage-pulse 2s ease-in-out infinite; }
@keyframes stage-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3) hue-rotate(10deg); }
}

/* ===== MC吹き出し ===== */
#mc-bubble {
  position: absolute; bottom: 20%; left: 50%; transform: translateX(-50%);
  background: rgba(10,10,30,0.85); border: 1px solid rgba(192,132,252,0.4);
  border-radius: 16px; padding: 10px 18px; color: #f1f5f9;
  font-size: 15px; max-width: 80%; z-index: 45;
  display: none; animation: bubble-in 0.3s ease-out;
  text-align: center; pointer-events: none;
}
#mc-bubble.visible { display: block; }
@keyframes bubble-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%); }
}

/* ===== ペンライトCanvas ===== */
#penlight-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 35;
}

/* ===== スパチャバナー ===== */
#sc-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  background: linear-gradient(135deg, rgba(251,191,36,0.95), rgba(245,158,11,0.95));
  border: 2px solid #fbbf24;
  border-radius: 16px;
  padding: 16px 28px;
  text-align: center;
  z-index: 55;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
  min-width: 220px;
  max-width: 80%;
  box-shadow: 0 0 40px rgba(251,191,36,0.6), 0 0 80px rgba(251,191,36,0.3);
}
#sc-banner.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.sc-banner-amount {
  font-size: 28px;
  font-weight: 900;
  color: #1c1a00;
  line-height: 1;
}
.sc-banner-author {
  font-size: 14px;
  font-weight: bold;
  color: #3b2000;
  margin-top: 4px;
}
.sc-banner-text {
  font-size: 15px;
  color: #1c1000;
  margin-top: 6px;
  word-break: break-all;
}

/* ===== モバイル ===== */
@media (max-width:640px) {
  .flow-comment { font-size:14px; }
  .flow-comment.superchat { font-size:17px; }
  #comment-list { width:200px;max-height:150px; }
  .comment-item { font-size:11px;padding:4px 6px; }
  #admin-panel {
    padding: 6px 10px;
    gap: 4px;
    max-height: 40vh;
  }
  .btn-show { padding:6px 14px;font-size:12px; }
  #show-state-label { font-size:11px;padding:3px 12px; }
}

/* ===== dvh対応（スマホアドレスバー） ===== */
@supports (height: 100dvh) {
  #scroll-wrapper { height: 100dvh; }
}