/* OBSブラウザソース用 1920x1080想定・背景は完全透過 */
:root {
  --navy: #0b101c;
  --navy-2: #141c30;
  --gold: #d9b45b;
  --gold-light: #f2e28a;
  --cyan: #58c6e2;
  --text: #eef2fa;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  background: transparent;
  overflow: hidden;
  font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', sans-serif;
  color: var(--text);
}

.hidden { display: none !important; }

/* ---- 演出・UI要素の自由配置（ゾーン）----
   位置は画面に対する%のCSS変数で受ける（overlay.js が effects.json の layouts から設定。既定は従来と同じ位置）。
   quiz=クイズカード（左上・幅）、odai=お題帯（左上・最大幅）、toast=通知（左上・幅、右寄せ）、banner=中央バナーの中心 */
:root {
  --quiz-x: 29.7%;
  --quiz-y: 74%;
  --quiz-w: 40.6%;
  --odai-x: 1.3%;
  --odai-y: 2.2%;
  --odai-w: 29.2%;
  --toast-x: 73.8%;
  --toast-y: 2.2%;
  --toast-w: 25%;
  --banner-x: 50%;
  --banner-y: 36%;
}

/* ---- 共通パネル（クイズ/解説/結果カード。quiz ゾーン） ---- */
.panel {
  position: absolute;
  left: var(--quiz-x);
  top: var(--quiz-y);
  width: var(--quiz-w);
  min-width: 320px;
  max-width: calc(100% - var(--quiz-x));
  background: linear-gradient(160deg, rgba(11,16,28,0.94), rgba(20,28,48,0.94));
  border: 2px solid var(--gold);
  border-radius: 14px;
  box-shadow: 0 0 24px rgba(217,180,91,0.35), 0 8px 30px rgba(0,0,0,0.5);
  padding: 18px 24px 20px;
  z-index: 45; /* ポロ演出レイヤー(35)より上・トースト(50)より下 */
  animation: panel-in 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes panel-in {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- クイズカード ---- */
.quiz-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.quiz-brand {
  font-weight: 900;
  font-size: 20px;
  color: var(--gold);
  letter-spacing: 0.08em;
  text-shadow: 0 0 10px rgba(217,180,91,0.6);
}
.quiz-badge {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  background: var(--cyan);
  border-radius: 999px;
  padding: 2px 12px;
}
.quiz-hint {
  margin-left: auto;
  font-size: 13px;
  color: var(--cyan);
  font-weight: 700;
}
.quiz-q {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.4;
  margin-bottom: 14px;
}
.quiz-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.choice {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(88,198,226,0.08);
  border: 1.5px solid rgba(88,198,226,0.4);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 17px;
  font-weight: 700;
  transition: opacity 0.4s, border-color 0.4s, background 0.4s;
}
.choice-key {
  flex: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-2);
  border: 1.5px solid var(--cyan);
  color: var(--cyan);
  border-radius: 8px;
  font-weight: 900;
  font-size: 15px;
}
.choice.correct {
  background: rgba(217,180,91,0.22);
  border-color: var(--gold);
  box-shadow: 0 0 14px rgba(217,180,91,0.5);
  animation: pulse-gold 0.9s ease-in-out infinite alternate;
}
.choice.correct .choice-key {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold-light);
}
.choice.dim { opacity: 0.3; }
@keyframes pulse-gold {
  from { box-shadow: 0 0 8px rgba(217,180,91,0.35); }
  to   { box-shadow: 0 0 20px rgba(217,180,91,0.7); }
}

.timer {
  height: 8px;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  overflow: hidden;
}
.timer-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  border-radius: 999px;
}

/* ---- 解説カード ---- */
.note-head {
  font-size: 16px;
  font-weight: 900;
  color: var(--gold);
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}
.note-body {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

/* ---- 結果カード ---- */
.result-head {
  font-size: 17px;
  font-weight: 900;
  color: var(--gold);
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}
.result-body { font-size: 18px; font-weight: 700; }
.result-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.result-row.first {
  font-size: 22px;
  color: var(--gold-light);
  text-shadow: 0 0 12px rgba(217,180,91,0.6);
}
.result-pts { margin-left: auto; color: var(--cyan); font-weight: 900; }
.result-none { color: rgba(238,242,250,0.75); }
.result-foot {
  margin-top: 8px;
  font-size: 13px;
  color: rgba(238,242,250,0.6);
  font-weight: 500;
}

/* ---- 今日のお題ティッカー（左上・常設・控えめ） ---- */
.odai {
  position: absolute;
  top: var(--odai-y);
  left: var(--odai-x);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: var(--odai-w);
  background: linear-gradient(160deg, rgba(11,16,28,0.88), rgba(20,28,48,0.88));
  border: 1.5px solid rgba(217,180,91,0.55);
  border-radius: 10px;
  padding: 7px 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  z-index: 40; /* トースト(50)より下 */
  animation: odai-in 0.5s ease;
}
@keyframes odai-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.odai-label {
  flex: none;
  font-size: 12px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 0.06em;
}
.odai-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
}
.odai-text.swap { animation: odai-swap 0.45s ease; }
@keyframes odai-swap {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- トースト（toast ゾーン。既定は右上・右寄せ） ---- */
#toasts {
  position: absolute;
  top: var(--toast-y);
  left: var(--toast-x);
  width: var(--toast-w);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  z-index: 50;
}
.toast {
  background: linear-gradient(160deg, rgba(11,16,28,0.95), rgba(20,28,48,0.95));
  border: 2px solid var(--cyan);
  border-radius: 12px;
  padding: 12px 20px;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 0 18px rgba(88,198,226,0.35), 0 6px 20px rgba(0,0,0,0.5);
  animation: toast-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.25);
  max-width: 100%;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}
.toast.out { transition: opacity 0.5s, transform 0.5s; opacity: 0; transform: translateX(60px); }
.toast.rankup { border-color: var(--gold); box-shadow: 0 0 18px rgba(217,180,91,0.45); }
.toast.special {
  border-color: var(--gold-light);
  background: linear-gradient(160deg, rgba(52,38,10,0.96), rgba(20,28,48,0.96));
  box-shadow: 0 0 26px rgba(242,226,138,0.6);
  font-size: 21px;
  animation: toast-in 0.45s cubic-bezier(0.2,0.9,0.3,1.25), pulse-gold 1s infinite alternate;
}
.toast .sub { display: block; font-size: 13px; font-weight: 700; color: rgba(238,242,250,0.7); margin-top: 2px; }

/* （人生初チャットの歓迎はポロの初コメ演出 .fx-first-* に統合済み） */

/* セッション初チャット（再訪者）の控えめな「おかえり」 */
.toast.small {
  font-size: 14px;
  padding: 8px 14px;
  border-width: 1.5px;
  border-color: rgba(88,198,226,0.6);
  box-shadow: 0 0 10px rgba(88,198,226,0.2), 0 4px 12px rgba(0,0,0,0.4);
}
.toast.small .fire { color: var(--gold-light); }

/* ---- ゲリラ抽選 ---- */
#raffle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
}
.raffle-box {
  background: linear-gradient(160deg, rgba(11,16,28,0.96), rgba(20,28,48,0.96));
  border: 3px solid var(--gold);
  border-radius: 18px;
  padding: 36px 70px;
  text-align: center;
  box-shadow: 0 0 40px rgba(217,180,91,0.5), 0 12px 50px rgba(0,0,0,0.6);
  animation: panel-in-center 0.4s cubic-bezier(0.2,0.9,0.3,1.2);
}
@keyframes panel-in-center {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
.raffle-title {
  font-size: 26px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 0.15em;
  margin-bottom: 16px;
}
.raffle-name {
  font-size: 46px;
  font-weight: 900;
  min-width: 420px;
  min-height: 66px;
  color: var(--text);
}
.raffle-name.winner {
  color: var(--gold-light);
  text-shadow: 0 0 24px rgba(242,226,138,0.8);
  animation: winner-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
@keyframes winner-pop {
  from { transform: scale(0.6); }
  to   { transform: scale(1); }
}
.raffle-sub {
  margin-top: 12px;
  font-size: 17px;
  font-weight: 700;
  color: var(--cyan);
}

/* ---- エンドロール ---- */
#endroll {
  position: absolute;
  inset: 0;
  z-index: 70;
  background: linear-gradient(180deg, rgba(11,16,28,0.55), rgba(11,16,28,0.75));
  overflow: hidden;
}
.endroll-scroll {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(100vh);
  text-align: center;
  width: 700px;
}
.endroll-title {
  font-size: 34px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 0.2em;
  margin-bottom: 40px;
  text-shadow: 0 0 16px rgba(217,180,91,0.6);
}
.endroll-name {
  font-size: 26px;
  font-weight: 700;
  padding: 8px 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
.endroll-new {
  display: inline-block;
  margin-left: 10px;
  font-size: 13px;
  font-weight: 900;
  color: var(--navy);
  background: var(--gold-light);
  border-radius: 999px;
  padding: 1px 10px;
  vertical-align: middle;
}
/* ありがとうコーナー（サブスク・ビッツ） */
.endroll-title.thanks { color: #ffb3c9; text-shadow: 0 0 16px rgba(255,134,176,0.6); margin-bottom: 24px; }
.endroll-title.thanks.bits { color: #c9a6ff; text-shadow: 0 0 16px rgba(145,71,255,0.6); }
.endroll-thanks-name { font-size: 28px; }
.endroll-label {
  display: inline-block;
  margin-left: 12px;
  font-size: 15px;
  font-weight: 900;
  color: var(--navy);
  background: #ffb3c9;
  border-radius: 999px;
  padding: 2px 12px;
  vertical-align: middle;
}
.endroll-label.bits { background: #c9a6ff; }
.endroll-title.thanks.raid { color: #ffcf7a; text-shadow: 0 0 16px rgba(255,179,71,0.6); }
.endroll-label.raid { background: #ffcf7a; }
.endroll-label.streak { background: #ffb08f; font-size: 13px; }
.endroll-gap { height: 48px; }
.endroll-closing {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 900;
  color: var(--gold-light);
  text-shadow: 0 0 24px rgba(242,226,138,0.8);
  animation: closing-in 1.2s ease;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 0 40px;
}
@keyframes closing-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* ============================================================
   ポロ演出（初コメ・連投・キリ番）
   - 位置・サイズは %/vw/vh 基準（OBS 1920x1080 でも他解像度でも崩れない）
   - 動きは transform/opacity のみ + will-change（ブラウザソースで軽快に）
   - レイヤーはクイズカード(45)・お題(40)・トースト(50)より下に置き、文字を隠さない
   ============================================================ */
:root {
  --pink: #ff86b0;
  --pink-light: #ffd9e6;
  --pink-pale: #ffe3ee;
}
.fx-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 35;
  font-family: 'Zen Maru Gothic', 'Zen Kaku Gothic New', 'Hiragino Maru Gothic ProN', sans-serif;
}
.fx-poro-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  will-change: transform;
}
/* 画像が1枚も無いときの簡易表示（白い丸） */
.fx-poro-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffffff, #efe6dd 70%, #d9c8b8);
  box-shadow: 0 0.3vw 0.8vw rgba(0,0,0,0.35);
}

/* ---- ① 初コメ: 左から跳ねて登場 → 旗で歓迎 → 右へ退場 ---- */
.fx-first-poro {
  position: absolute;
  left: 0;
  bottom: 35vh; /* クイズカード(下部0〜約33vh)の上のレーン */
  width: 9vw;
  height: 9vw;
  will-change: transform;
  animation: fx-first-walk 6s forwards;
  animation-timing-function: ease-in-out;
}
@keyframes fx-first-walk {
  0%   { transform: translateX(-12vw); animation-timing-function: ease-in-out; }
  28%  { transform: translateX(20vw); }
  72%  { transform: translateX(20vw); animation-timing-function: ease-in; }
  100% { transform: translateX(106vw); }
}
.fx-poro-img.bounce { animation: fx-bounce 0.38s ease-in-out infinite; }
@keyframes fx-bounce {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-14%) rotate(4deg); }
}
.fx-poro-img.idle { animation: fx-idle 1.1s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes fx-idle {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.03, 0.96); }
}
.fx-flag {
  position: absolute;
  left: 29.6vw; /* ポロ(20vw + 幅9vw)の右隣 */
  bottom: 36vh;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  transform-origin: left bottom;
  will-change: transform, opacity;
  animation: fx-flag-show 6s ease forwards;
}
@keyframes fx-flag-show {
  0%, 26%   { opacity: 0; transform: translateY(1vh) scale(0.8); }
  31%, 70%  { opacity: 1; transform: translateY(0) scale(1); }
  75%, 100% { opacity: 0; transform: translateY(-1vh) scale(0.9); }
}
.fx-flag-pole {
  flex: none;
  width: 0.45vw;
  height: 13vh;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  box-shadow: 0 0.2vw 0.6vw rgba(0,0,0,0.4);
}
.fx-flag-cloth {
  margin-left: -0.1vw;
  margin-bottom: 4.6vh;
  padding: 0.7vw 1.6vw 0.8vw 1.3vw;
  background: linear-gradient(135deg, var(--pink-pale), #ffc2d6);
  border: 0.22vw solid var(--gold);
  border-radius: 0.3vw 1.4vw 1.4vw 0.3vw;
  color: #a02c54;
  font-weight: 900;
  white-space: nowrap;
  max-width: 42vw;
  box-shadow: 0 0.5vw 1.4vw rgba(0,0,0,0.4);
  transform-origin: left center;
  will-change: transform;
  animation: fx-flag-wave 1.7s ease-in-out infinite;
}
@keyframes fx-flag-wave {
  0%, 100% { transform: rotate(-1.2deg); }
  50%      { transform: rotate(1.2deg); }
}
.fx-flag-title { font-size: 1.15vw; color: #7c3f57; letter-spacing: 0.04em; }
.fx-flag-name {
  font-size: 1.9vw;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fx-flag-pts {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.6vw;
  padding: 0.05vw 0.8vw;
  font-size: 1vw;
  border-radius: 999px;
  background: var(--gold);
  color: #3d2b06;
}

/* ---- 中央バナー（連投=ピンク / キリ番=金） ---- */
/* ポロが降る・跳ねる範囲（poroArea ゾーン。既定は画面全体。JS が left/top/width/height を%で指定） */
.fx-poro-area {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  --area-h: 100vh;
}
.fx-banner {
  position: absolute;
  z-index: 2; /* レイヤー内でポロより前に出し、文字がポロに隠れないようにする */
  left: var(--banner-x);
  top: var(--banner-y); /* 既定 36%: お題(左上)・トースト(右上)の下、クイズカード(下部)の上。banner ゾーンの中心 */
  max-width: 56vw;
  padding: 1.1vw 2.6vw 1.3vw;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(160deg, rgba(11,16,28,0.88), rgba(20,28,48,0.88));
  border: 0.22vw solid var(--pink);
  border-radius: 1.3vw;
  box-shadow: 0 0 2vw rgba(255,134,176,0.45), 0 0.6vw 2vw rgba(0,0,0,0.5);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  will-change: transform, opacity;
  animation: fx-banner-pop 4s cubic-bezier(0.2, 1.3, 0.4, 1) forwards;
}
@keyframes fx-banner-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  20%  { transform: translate(-50%, -50%) scale(1); }
  85%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.04); }
}
.fx-banner-big {
  font-size: 2.9vw;
  font-weight: 900;
  line-height: 1.2;
  color: var(--pink);
  text-shadow: 0 0.15vw 0 rgba(0,0,0,0.3), 0 0 1.2vw rgba(255,134,176,0.6);
}
.fx-banner-small {
  margin-top: 0.4vw;
  font-size: 1.45vw;
  font-weight: 700;
  color: var(--pink-light);
  overflow: hidden;
  text-overflow: ellipsis;
}
.fx-banner.gold {
  border-color: var(--gold);
  box-shadow: 0 0 2vw rgba(217,180,91,0.5), 0 0.6vw 2vw rgba(0,0,0,0.5);
}
.fx-banner.gold .fx-banner-big { color: #ffe08a; text-shadow: 0 0.15vw 0 rgba(0,0,0,0.3), 0 0 1.2vw rgba(255,224,138,0.6); }
.fx-banner.gold .fx-banner-small { color: #fff3cf; }

/* ---- ② 連投: 画面下からポロがぽんぽん跳ね上がる ---- */
.fx-poro.jump {
  position: absolute;
  bottom: -12vw; /* 画面外から */
  --peak: -60vh;
  --tilt: 8deg;
  will-change: transform;
  animation: fx-jump 1.4s ease-out forwards;
}
@keyframes fx-jump {
  0%   { transform: translateY(0) scale(0.92) rotate(0deg); }
  38%  { transform: translateY(var(--peak)) scale(1) rotate(var(--tilt)); }
  55%  { transform: translateY(calc(var(--peak) * 1.07)) scale(1) rotate(calc(var(--tilt) * -0.7)); }
  100% { transform: translateY(0) scale(0.92) rotate(0deg); }
}

/* ---- ③ キリ番: 範囲の上からポロが降る + 紙吹雪 ---- */
.fx-poro.rain {
  position: absolute;
  top: -14vw; /* 範囲の外から */
  --tilt: 20deg;
  --fall: 130vh; /* 落下距離（範囲の高さ×1.3。JS が指定） */
  opacity: 0;
  will-change: transform, opacity;
  animation: fx-rain 3s cubic-bezier(0.4, 0.1, 0.7, 1) forwards;
}
@keyframes fx-rain {
  0%   { transform: translateY(0) rotate(calc(var(--tilt) * -0.5)); opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translateY(var(--fall)) rotate(var(--tilt)); opacity: 1; }
}
.fx-confetti {
  position: absolute;
  top: -3vh;
  width: 0.5vw;
  height: 0.85vw;
  border-radius: 0.12vw;
  --spin: 600deg;
  --drift: 0vw;
  opacity: 0;
  will-change: transform, opacity;
  animation: fx-confetti 3s ease-in forwards;
}
@keyframes fx-confetti {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  8%   { opacity: 1; }
  100% { opacity: 0.95; transform: translate(var(--drift), 115vh) rotate(var(--spin)); }
}

/* ---- ④ サブスク: ポロ大集合が中央にぽんっと登場 → キープ → ふわっと消える ---- */
.fx-party {
  position: absolute;
  z-index: 1;
  left: var(--banner-x);
  top: clamp(30%, calc(var(--banner-y) + 22%), 78%); /* バナー（中心）の下に置く */
  width: 44vw;
  aspect-ratio: 1400 / 788; /* poro-party.png の比率（横長） */
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transform-origin: center;
  will-change: transform, opacity;
  filter: drop-shadow(0 0.8vw 1.6vw rgba(0,0,0,0.45)) drop-shadow(0 0 1.2vw rgba(255,224,138,0.35));
  animation: fx-party-pop 7s cubic-bezier(0.2, 1.1, 0.4, 1) forwards;
}
@keyframes fx-party-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  9%   { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  14%  { transform: translate(-50%, -50%) scale(0.97); }
  19%  { transform: translate(-50%, -50%) scale(1); }
  86%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -52%) scale(1.06); }
}
.fx-party-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
}
/* サブスクのバナーは画像の上に置くので位置を上げ、長い文言に合わせて少し小さめに */
.fx-banner.sub {
  top: max(6%, calc(var(--banner-y) - 15%));
  max-width: 82vw;
  border-color: #ffd700;
  box-shadow: 0 0 2.4vw rgba(255,215,0,0.55), 0 0.6vw 2vw rgba(0,0,0,0.5);
}
.fx-banner.sub .fx-banner-big { font-size: 2.5vw; }
.fx-banner.sub .fx-banner-small { font-size: 1.35vw; }
.fx-tier-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.7vw;
  padding: 0.1vw 0.8vw 0.15vw;
  font-size: 1.15vw;
  font-weight: 900;
  letter-spacing: 0.04em;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #9147ff, #6f2dd6);
  border: 0.15vw solid #ffe08a;
  box-shadow: 0 0 0.8vw rgba(145,71,255,0.6);
}
.fx-banner-pts {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.6vw;
  padding: 0.05vw 0.8vw;
  font-size: 1vw;
  font-weight: 900;
  border-radius: 999px;
  background: var(--gold);
  color: #3d2b06;
}

/* ---- ⑤ 滞在時間: 中サイズの水色バナー（連投と同じ優先度・控えめ） ---- */
.fx-banner.cyan {
  border-color: var(--cyan);
  box-shadow: 0 0 2vw rgba(88,198,226,0.45), 0 0.6vw 2vw rgba(0,0,0,0.5);
}
.fx-banner.cyan .fx-banner-big { color: #9fe4f5; text-shadow: 0 0.15vw 0 rgba(0,0,0,0.3), 0 0 1.2vw rgba(88,198,226,0.6); }
.fx-banner.cyan .fx-banner-small { color: #dff7fd; }
.fx-banner.mid { top: max(4%, calc(var(--banner-y) - 6%)); padding: 0.8vw 2.2vw 1vw; }
.fx-banner.mid .fx-banner-big { font-size: 2.1vw; }
.fx-banner.mid .fx-banner-small { font-size: 1.2vw; }

/* ---- ⑦ レイド: オレンジの大バナー ＋ ポロ大集合 ＋ 大量のポロ ＋ 紙吹雪 ---- */
.fx-banner.raid {
  border-color: #ffb347;
  box-shadow: 0 0 2.6vw rgba(255,179,71,0.6), 0 0.6vw 2vw rgba(0,0,0,0.5);
}
.fx-banner.raid .fx-banner-big { color: #ffcf7a; text-shadow: 0 0.15vw 0 rgba(0,0,0,0.3), 0 0 1.4vw rgba(255,179,71,0.7); }
.fx-banner.raid .fx-banner-small { color: #fff1d6; }
.fx-party.raid { filter: drop-shadow(0 0.8vw 1.6vw rgba(0,0,0,0.45)) drop-shadow(0 0 1.4vw rgba(255,179,71,0.45)); }

/* ---- ⑧ 連続配信視聴: 炎色の中バナー（控えめ・連投と同じ優先度） ---- */
.fx-banner.streak {
  border-color: #ff7a59;
  box-shadow: 0 0 2vw rgba(255,122,89,0.5), 0 0.6vw 2vw rgba(0,0,0,0.5);
}
.fx-banner.streak .fx-banner-big { color: #ffb08f; text-shadow: 0 0.15vw 0 rgba(0,0,0,0.3), 0 0 1.2vw rgba(255,122,89,0.65); }
.fx-banner.streak .fx-banner-small { color: #ffe4da; }

/* ---- ⑥ ビッツ: 紫（Twitch bits 色）の中バナー。ポロは 3〜12匹だけ跳ねる ---- */
.fx-banner.bits {
  border-color: #b48cff;
  box-shadow: 0 0 2vw rgba(145,71,255,0.5), 0 0.6vw 2vw rgba(0,0,0,0.5);
}
.fx-banner.bits .fx-banner-big { color: #d9c2ff; text-shadow: 0 0.15vw 0 rgba(0,0,0,0.3), 0 0 1.2vw rgba(180,140,255,0.7); }
.fx-banner.bits .fx-banner-small { color: #efe6ff; }

/* ---- 初コメ演出の「アバターの隣」バリエーション（ステージに本人が居るとき） ----
   帯の高さに収まる小さめのポロと旗。大きさはアイコン直径に比例する単位 --u（4.5vw のとき 1vw）。
   --stop / --y / --left / --right は JS が指定（再生中にレイアウトが変わっても JS が更新して追従） */
.fx-first-poro.near {
  bottom: auto;
  top: var(--y, 1vh);
  width: calc(5.5 * var(--u));
  height: calc(5.5 * var(--u));
  animation-name: fx-first-walk-near;
}
@keyframes fx-first-walk-near {
  0%   { transform: translateX(-12vw); animation-timing-function: ease-in-out; }
  28%  { transform: translateX(var(--stop, 40vw)); }
  72%  { transform: translateX(var(--stop, 40vw)); animation-timing-function: ease-in; }
  100% { transform: translateX(106vw); }
}
.fx-flag.near {
  bottom: auto;
  top: var(--y, 0vh);
  left: var(--left, 50vw);
  align-items: flex-start;
  transform-origin: left top;
}
.fx-flag.near .fx-flag-pole { height: 9.5vh; width: calc(0.35 * var(--u)); }
.fx-flag.near .fx-flag-cloth {
  margin-bottom: 0;
  margin-top: 0.2vh;
  padding: calc(0.45 * var(--u)) calc(1.1 * var(--u)) calc(0.5 * var(--u)) calc(0.9 * var(--u));
  max-width: 30vw;
}
.fx-flag.near .fx-flag-title { font-size: calc(0.9 * var(--u)); }
.fx-flag.near .fx-flag-name { font-size: calc(1.4 * var(--u)); }
.fx-flag.near .fx-flag-pts { font-size: calc(0.8 * var(--u)); margin-left: calc(0.4 * var(--u)); }
/* 右端寄りのアバター: ポロは左隣に止まり、旗は左へ開く */
.fx-flag.near.flip {
  left: auto;
  right: var(--right, 50vw);
  flex-direction: row-reverse;
  transform-origin: right top;
}
.fx-flag.near.flip .fx-flag-cloth {
  margin-left: 0;
  margin-right: -0.1vw;
  border-radius: 1.4vw 0.3vw 0.3vw 1.4vw;
  transform-origin: right center;
}

/* ============================================================
   視聴者アバターステージ
   - コメントした人が帯状エリア（stage.layout で自由配置。横並び/縦並び）に丸アイコンで並ぶ
   - 位置は .av の transform（translate/scale）だけで指定。動きも transform/opacity のみ
   - 大きさは全て --u（アイコン直径 / 4.5。通常 1vw）に比例。/stage 単体ページで細長いソースに置いても崩れない
   - 吹き出しの向きは .stage-layer の bubble-down / bubble-up / bubble-left / bubble-right、
     登場方向は enter-top / enter-bottom / enter-left / enter-right（JS がレイアウトから決める）
   - 30人表示でも軽いよう、無限アニメは1人につき「ぴょこぴょこ(bob)」「ゆらゆら(sway)」の2本だけ
   ============================================================ */
:root {
  --size: 4.5vw;
  --u: 1vw;
}
.stage-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 30; /* ポロ演出(35)・お題(40)・クイズ(45)・トースト(50)より下 */
  font-family: 'Zen Maru Gothic', 'Zen Kaku Gothic New', 'Hiragino Maru Gothic ProN', sans-serif;
}
.av {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size);
  transform: translate(-20vw, 0);
  transform-origin: top left;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.8s ease;
  will-change: transform, opacity;
  opacity: 1;
}
.av.dim { opacity: 0.45; }
/* 退場: ふわっと消える（移動先の transform は JS がインラインで指定） */
.av.out { opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease; }

/* 一発もののアニメ層（登場・ホップ・ジャンプ） */
.av-fx {
  width: var(--size);
  height: var(--size);
  transform-origin: 50% 100%;
  will-change: transform;
}
.av-fx.in { animation: st-in-top 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.35) both; }
.stage-layer.enter-bottom .av-fx.in { animation-name: st-in-bottom; }
.stage-layer.enter-left .av-fx.in { animation-name: st-in-left; }
.stage-layer.enter-right .av-fx.in { animation-name: st-in-right; }
@keyframes st-in-top {
  0%   { opacity: 0; transform: translateY(-14vh) scale(0.6); }
  55%  { opacity: 1; transform: translateY(0.6vh) scale(1.08, 0.9); }
  75%  { transform: translateY(-0.6vh) scale(0.96, 1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes st-in-bottom {
  0%   { opacity: 0; transform: translateY(14vh) scale(0.6); }
  55%  { opacity: 1; transform: translateY(-0.8vh) scale(1.08, 0.9); }
  75%  { transform: translateY(0.4vh) scale(0.96, 1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes st-in-left {
  0%   { opacity: 0; transform: translateX(-10vw) scale(0.6); }
  55%  { opacity: 1; transform: translateX(0.5vw) scale(0.9, 1.08); }
  75%  { transform: translateX(-0.3vw) scale(1.05, 0.96); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes st-in-right {
  0%   { opacity: 0; transform: translateX(10vw) scale(0.6); }
  55%  { opacity: 1; transform: translateX(-0.5vw) scale(0.9, 1.08); }
  75%  { transform: translateX(0.3vw) scale(1.05, 0.96); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
.av-fx.hop { animation: st-hop 0.55s cubic-bezier(0.3, 0.9, 0.4, 1) both; }
@keyframes st-hop {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-22%) scale(0.96, 1.06); }
  70%  { transform: translateY(0) scale(1.06, 0.94); }
  100% { transform: translateY(0) scale(1); }
}
.av-fx.jump { animation: st-jump 1.3s cubic-bezier(0.3, 0.8, 0.4, 1) both; }
@keyframes st-jump {
  0%   { transform: translateY(0) scale(1) rotate(0deg); }
  12%  { transform: translateY(6%) scale(1.12, 0.86); }
  40%  { transform: translateY(-70%) scale(0.94, 1.1) rotate(-8deg); }
  58%  { transform: translateY(-58%) scale(1) rotate(8deg); }
  80%  { transform: translateY(4%) scale(1.1, 0.9) rotate(0deg); }
  100% { transform: translateY(0) scale(1); }
}

/* 常時: ゆらゆら（横）× ぴょこぴょこ（縦）。位相・周期は JS がランダムに与える */
.av-sway {
  --dur: 3.6s;
  --delay: 0s;
  width: 100%;
  height: 100%;
  animation: st-sway var(--dur) ease-in-out var(--delay) infinite;
  will-change: transform;
}
@keyframes st-sway {
  0%, 100% { transform: translateX(-4%) rotate(-2deg); }
  50%      { transform: translateX(4%) rotate(2deg); }
}
.av-body {
  --dur: 1.8s;
  --delay: 0s;
  position: relative;
  width: 100%;
  height: 100%;
  animation: st-bob var(--dur) ease-in-out var(--delay) infinite;
  transform-origin: 50% 100%;
  will-change: transform;
}
@keyframes st-bob {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  30%      { transform: translateY(-11%) scale(0.98, 1.03); }
  55%      { transform: translateY(0) scale(1.03, 0.97); }
}

/* 丸アイコン。本人画像は img、無ければポロに名前色の hue-rotate ＋ 色付きの丸 */
.av-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 40% 35%, #1a2338, #0b101c);
  border: calc(0.18 * var(--u)) solid rgba(255,255,255,0.85);
  box-shadow: 0 calc(0.25 * var(--u)) calc(0.7 * var(--u)) rgba(0,0,0,0.45), 0 0 calc(0.6 * var(--u)) rgba(88,198,226,0.25);
}
.av-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}
.av-img.poro {
  --hue: 0deg;
  --bg: #ffd9e6;  /* 名前ハッシュ由来の色。JS が --bg/--bg2/--hue を与える（古いCEFでも動く素の hsl 指定） */
  --bg2: #ff86b0;
  background: radial-gradient(circle at 45% 35%, var(--bg), var(--bg2));
  border-color: rgba(255,255,255,0.92);
}
.av-img.poro img {
  object-fit: contain;
  padding: 6%;
  filter: hue-rotate(var(--hue)) saturate(1.15) drop-shadow(0 calc(0.1 * var(--u)) calc(0.15 * var(--u)) rgba(0,0,0,0.25));
}
/* バッジ（右上）。複数は横に並ぶ */
.av-badges {
  position: absolute;
  top: calc(-0.35 * var(--u));
  right: calc(-0.45 * var(--u));
  font-size: calc(1.05 * var(--u));
  line-height: 1;
  letter-spacing: -0.15em;
  filter: drop-shadow(0 calc(0.1 * var(--u)) calc(0.2 * var(--u)) rgba(0,0,0,0.6));
  white-space: nowrap;
}
/* 名前ラベル */
.av-name {
  margin-top: calc(0.15 * var(--u));
  width: 150%;
  margin-left: -25%;
  text-align: center;
  font-size: calc(0.72 * var(--u));
  font-weight: 900;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 0 calc(0.3 * var(--u)) rgba(0,0,0,0.9), 0 calc(0.08 * var(--u)) calc(0.2 * var(--u)) rgba(0,0,0,0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 吹き出し。最大60文字・2行。向きは .stage-layer の bubble-* クラス（帯が上半分→下 / 下半分→上 / 左右の縦並び→内側）
   --bx は画面の左右にはみ出す分の横ずらし（JS が指定）。--tx は pop アニメと共有する基本の平行移動 */
.av-bubble {
  --bx: 0vw;
  --tx: calc(-50% + var(--bx));
  --ty: 0%;
  position: absolute;
  left: 50%;
  width: calc(12 * var(--u));
  transform: translate(var(--tx), var(--ty));
  padding: calc(0.35 * var(--u)) calc(0.6 * var(--u));
  background: rgba(255,255,255,0.96);
  color: #1b2233;
  border-radius: calc(0.7 * var(--u));
  font-size: calc(0.78 * var(--u));
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  overflow: hidden; /* 2行クランプに必要 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  box-shadow: 0 calc(0.3 * var(--u)) calc(0.9 * var(--u)) rgba(0,0,0,0.4);
  z-index: 3;
  will-change: transform, opacity;
}
.av-bubble.pop { animation: st-bubble 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
.av-bubble::before {
  content: '';
  position: absolute;
  width: calc(0.8 * var(--u));
  height: calc(0.8 * var(--u));
  background: inherit;
}
/* 下に出す（帯が画面上半分） */
.stage-layer.bubble-down .av-bubble { top: calc(100% + 0.5 * var(--u)); }
.stage-layer.bubble-down .av-bubble::before {
  left: calc(50% - var(--bx));
  top: calc(-0.4 * var(--u));
  transform: translateX(-50%) rotate(45deg);
}
/* 上に出す（帯が画面下半分） */
.stage-layer.bubble-up .av-bubble { bottom: calc(100% + 0.5 * var(--u)); }
.stage-layer.bubble-up .av-bubble::before {
  left: calc(50% - var(--bx));
  bottom: calc(-0.4 * var(--u));
  transform: translateX(-50%) rotate(45deg);
}
/* 右に出す（左端の縦並び）: アイコンの右隣・アイコン中心の高さ */
.stage-layer.bubble-right .av-bubble {
  --tx: 0%;
  --ty: -50%;
  left: calc(100% + 0.7 * var(--u));
  top: calc(var(--size) / 2);
}
.stage-layer.bubble-right .av-bubble::before {
  left: calc(-0.4 * var(--u));
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
/* 左に出す（右端の縦並び） */
.stage-layer.bubble-left .av-bubble {
  --tx: 0%;
  --ty: -50%;
  left: auto;
  right: calc(100% + 0.7 * var(--u));
  top: calc(var(--size) / 2);
}
.stage-layer.bubble-left .av-bubble::before {
  right: calc(-0.4 * var(--u));
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
@keyframes st-bubble {
  0%   { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.6); }
  100% { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(1); }
}
/* 滞在演出: アバター周りの小さな紙吹雪 */
.av-confetti {
  position: absolute;
  left: 50%;
  top: 40%;
  width: calc(0.32 * var(--u));
  height: calc(0.55 * var(--u));
  border-radius: calc(0.08 * var(--u));
  --dx: 0%;
  --dy: 80%;
  --spin: 400deg;
  opacity: 0;
  will-change: transform, opacity;
  animation: st-confetti 1.6s ease-out both;
}
@keyframes st-confetti {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  10%  { opacity: 1; transform: translate(calc(var(--dx) * 0.4), -60%) rotate(calc(var(--spin) * 0.2)); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--spin)); }
}

/* ---- 大群（サブスク・レイド）: 画面左の外から右の外へ、大量のキャラが駆け抜ける ---- */
.fx-stampede { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fx-run {
  position: absolute;
  left: -30vw;
  --tilt: 0deg;
  will-change: transform;
  animation: fx-run linear forwards;
}
@keyframes fx-run {
  0%   { transform: translateX(0) rotate(var(--tilt)); }
  100% { transform: translateX(160vw) rotate(var(--tilt)); }
}
.fx-run-bob { width: 100%; height: 100%; will-change: transform; animation: fx-run-bob ease-in-out infinite alternate; }
@keyframes fx-run-bob {
  0%   { transform: translateY(0) scale(1.02, 0.96); }
  100% { transform: translateY(-38%) scale(0.96, 1.04); }
}

/* ---- ビッツの「むくむく」ペット: 演出レイヤーとは別に居続け、連続ビッツで大きくなる → 破裂 ---- */
.fx-cheer-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 34; /* 演出レイヤー（35）のすぐ下: バナーの文字は隠れない */
}
.fx-pet {
  position: absolute;
  --size: 8vw;
  width: var(--size);
  height: var(--size);
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%;
  transition: width 0.55s cubic-bezier(0.2, 1.4, 0.4, 1), height 0.55s cubic-bezier(0.2, 1.4, 0.4, 1);
  filter: drop-shadow(0 0.6vw 1vw rgba(0,0,0,0.4));
  will-change: transform, width, height;
}
.fx-pet .fx-poro-img.pet { animation: fx-pet-breathe 1.6s ease-in-out infinite; }
@keyframes fx-pet-breathe {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.04, 0.96); }
}
.fx-pet.grow .fx-poro-img.pet { animation: fx-pet-munch 0.7s ease-out 1, fx-pet-breathe 1.6s ease-in-out 0.7s infinite; }
@keyframes fx-pet-munch {
  0%   { transform: scale(1, 1); }
  20%  { transform: scale(0.9, 1.1) rotate(-6deg); }
  45%  { transform: scale(1.18, 0.86) rotate(5deg); }
  70%  { transform: scale(0.96, 1.06); }
  100% { transform: scale(1, 1); }
}
.fx-pet.shake { animation: fx-pet-shake 0.12s linear infinite; }
@keyframes fx-pet-shake {
  0%   { transform: translate(-52%, -100%) rotate(-4deg) scale(1.02); }
  50%  { transform: translate(-48%, -101%) rotate(4deg) scale(1.06); }
  100% { transform: translate(-51%, -99%) rotate(-3deg) scale(1.03); }
}
.fx-pet.pop { animation: fx-pet-pop 0.4s ease-out forwards; }
@keyframes fx-pet-pop {
  0%   { transform: translate(-50%, -100%) scale(1.1); opacity: 1; filter: brightness(1.4); }
  100% { transform: translate(-50%, -100%) scale(1.9); opacity: 0; filter: brightness(3); }
}
.fx-pet.leave { animation: fx-pet-leave 1.2s ease-in forwards; }
@keyframes fx-pet-leave {
  0%   { transform: translate(-50%, -100%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -100%) scale(0.2); opacity: 0; }
}
.fx-piece {
  position: absolute;
  --dx: 0vw; --dy: -20vw; --spin: 180deg;
  transform: translate(-50%, -100%);
  will-change: transform, opacity;
  animation: fx-piece 1.8s cubic-bezier(0.2, 0.7, 0.5, 1) forwards;
}
@keyframes fx-piece {
  0%   { transform: translate(-50%, -100%) scale(0.4) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  55%  { transform: translate(calc(-50% + var(--dx)), calc(-100% + var(--dy))) scale(1) rotate(var(--spin)); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx) * 1.2), calc(-100% + var(--dy) + 60vh)) scale(0.9) rotate(calc(var(--spin) * 1.4)); opacity: 0; }
}
.fx-banner-chain {
  margin-top: 0.35vw;
  font-size: 1.1vw;
  font-weight: 900;
  color: #ffe08a;
  text-shadow: 0 0 0.8vw rgba(255,224,138,0.6);
}

/* ---- ⑨ ビッツ累計チェキ: 枠がせり上がる → 窓でカウント → フラッシュ → 現像 → 右下へ飛ぶ ---- */
.fx-banner.cheki {
  border-color: #ffd1e0;
  box-shadow: 0 0 2vw rgba(255,209,224,0.55), 0 0.6vw 2vw rgba(0,0,0,0.5);
  top: max(4%, calc(var(--banner-y) - 26%));
}
.fx-banner.cheki .fx-banner-big { color: #ffe1ec; text-shadow: 0 0.15vw 0 rgba(0,0,0,0.3), 0 0 1.2vw rgba(255,182,206,0.7); }
.fx-banner.cheki .fx-banner-small { color: #fff3f7; }
.fx-cheki {
  position: absolute;
  left: var(--banner-x);
  top: 50%;
  height: 78vh;
  aspect-ratio: 1024 / 1536;
  transform: translate(-50%, -50%) rotate(-3deg);
  transform-origin: center;
  filter: drop-shadow(0 1.2vw 2.4vw rgba(0,0,0,0.5));
  will-change: transform, opacity;
  animation: fx-cheki-in 0.9s cubic-bezier(0.2, 1.3, 0.4, 1) both;
  z-index: 1;
}
@keyframes fx-cheki-in {
  0%   { transform: translate(-50%, 60%) rotate(8deg); opacity: 0; }
  100% { transform: translate(-50%, -50%) rotate(-3deg); opacity: 1; }
}
.fx-cheki.developed { animation: fx-cheki-wiggle 0.7s ease-in-out 1; }
@keyframes fx-cheki-wiggle {
  0%, 100% { transform: translate(-50%, -50%) rotate(-3deg); }
  30%      { transform: translate(-50%, -50%) rotate(2deg) scale(1.03); }
  65%      { transform: translate(-50%, -50%) rotate(-5deg) scale(1.01); }
}
.fx-cheki.fly { animation: fx-cheki-fly 1.6s cubic-bezier(0.4, 0, 0.8, 0.4) forwards; }
@keyframes fx-cheki-fly {
  0%   { transform: translate(-50%, -50%) rotate(-3deg) scale(1); opacity: 1; }
  100% { transform: translate(90vw, 55vh) rotate(25deg) scale(0.25); opacity: 0; }
}
.fx-cheki-frame { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 2; pointer-events: none; }
/* 窓: 撮影前は「ファインダー」（暗い半透明＋四隅のかぎ括弧＋カウント）。撮影の瞬間に白く */
.fx-cheki-view {
  position: absolute;
  z-index: 1;
  background: transparent; /* 窓は透明: 配信映像（りおの顔）がそのまま見える */
  overflow: hidden;
}
.fx-cheki-view.shoot { background: #fff; }
.fx-cheki-view .c { position: absolute; width: 10%; height: 7%; border: 0.35vw solid rgba(255,255,255,0.9); }
.fx-cheki-view .c.tl { left: 5%; top: 5%; border-right: 0; border-bottom: 0; }
.fx-cheki-view .c.tr { right: 5%; top: 5%; border-left: 0; border-bottom: 0; }
.fx-cheki-view .c.bl { left: 5%; bottom: 5%; border-right: 0; border-top: 0; }
.fx-cheki-view .c.br { right: 5%; bottom: 5%; border-left: 0; border-top: 0; }
.fx-cheki-count {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14vh; font-weight: 900; color: #fff;
  text-shadow: 0 0.3vw 0 rgba(0,0,0,0.35), 0 0 2vw rgba(255,182,206,0.9);
}
.fx-cheki-count.tick { animation: fx-cheki-tick 0.9s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes fx-cheki-tick {
  0%   { transform: scale(1.8); opacity: 0; }
  30%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.85; }
}
.fx-cheki-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  z-index: 3; /* 枠ごと焼き込んだ完成画像なので枠より前に置き換わる */
  opacity: 0;
  filter: sepia(0.6) brightness(1.5) contrast(0.7);
  transition: opacity 1.6s ease-out, filter 2.2s ease-out;
  pointer-events: none;
}
.fx-cheki.developed .fx-cheki-photo { opacity: 1; filter: none; }
.fx-cheki-flash {
  position: absolute; inset: 0; background: #fff; z-index: 5;
  animation: fx-cheki-flash 0.7s ease-out forwards;
}
@keyframes fx-cheki-flash { 0% { opacity: 1; } 100% { opacity: 0; } }
/* チェキ: 窓の上部に「りお、こっち向いて！」、残り3秒はカウントを大きく金色に */
.fx-cheki-label {
  position: absolute; left: 0; right: 0; top: 9%;
  text-align: center;
  font-size: 2.6vh; font-weight: 900; color: #fff;
  text-shadow: 0 0.2vw 0 rgba(0,0,0,0.35), 0 0 1.2vw rgba(255,182,206,0.8);
  animation: fx-cheki-label 1.2s ease-in-out infinite alternate;
}
@keyframes fx-cheki-label { 0% { transform: translateY(0); } 100% { transform: translateY(-6%); } }
.fx-cheki-count.last { font-size: 20vh; color: #ffe08a; text-shadow: 0 0.3vw 0 rgba(0,0,0,0.35), 0 0 2.4vw rgba(255,224,138,0.95); }
/* 音の許可待ちバッジ（ブラウザで直接開いたとき。OBS では出ない） */
.sound-badge {
  position: fixed; left: 1vw; bottom: 1vh; z-index: 99;
  padding: 0.6vw 1.2vw; border-radius: 999px;
  background: rgba(11,16,28,0.85); color: #ffe08a; border: 0.15vw solid #ffe08a;
  font-size: 1.2vw; font-weight: 900; pointer-events: none;
}
.fx-cheki-view.done { opacity: 0; transition: opacity 0.4s; }

/* ============================================================
   サブスクランク（アイアン〜チャレンジャー）: アイコンのフチ・光・ラベル。上位ほど豪華に
   ============================================================ */
.av-rank {
  position: absolute; left: 50%; top: calc(100% - 0.25vw); transform: translateX(-50%);
  --rank-color: #fff;
  font-size: 0.62vw; font-weight: 900; letter-spacing: 0.06em; line-height: 1;
  padding: 0.12vw 0.5vw; border-radius: 999px; white-space: nowrap;
  color: #0b101c; background: var(--rank-color);
  box-shadow: 0 0 0.6vw var(--rank-color);
  pointer-events: none;
}
.av-rank.hidden { display: none; }
.av[class*="rank-"] .av-img { box-shadow: 0 0 0 0.22vw var(--ring, #fff), 0 0 0.9vw var(--ring, #fff); }
.av.rank-iron { --ring: #9aa1ab; }
.av.rank-bronze { --ring: #c98a4b; }
.av.rank-silver { --ring: #d6dde6; }
.av.rank-gold { --ring: #ffd45c; }
.av.rank-gold .av-img { box-shadow: 0 0 0 0.26vw #ffd45c, 0 0 1.2vw rgba(255,212,92,0.9); }
.av.rank-platinum { --ring: #4fe0d6; }
.av.rank-platinum .av-img { box-shadow: 0 0 0 0.28vw #4fe0d6, 0 0 1.4vw rgba(79,224,214,0.9); }
.av.rank-emerald { --ring: #3ddc84; }
.av.rank-emerald .av-img { box-shadow: 0 0 0 0.3vw #3ddc84, 0 0 1.5vw rgba(61,220,132,0.95); }
.av.rank-diamond { --ring: #8fd3ff; }
.av.rank-diamond .av-img { box-shadow: 0 0 0 0.3vw #8fd3ff, 0 0 1.6vw rgba(143,211,255,1), inset 0 0 0.6vw rgba(255,255,255,0.5); }
/* マスター以上: 回るオーラ */
.av.rank-master, .av.rank-grandmaster, .av.rank-challenger { --ring: #c17bff; }
.av.rank-grandmaster { --ring: #ff6b6b; }
.av.rank-challenger { --ring: #ffe9a8; }
.av.rank-master .av-img::before, .av.rank-grandmaster .av-img::before, .av.rank-challenger .av-img::before {
  content: ''; position: absolute; inset: -0.55vw; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg, var(--ring), transparent 30%, var(--ring) 50%, transparent 80%, var(--ring));
  filter: blur(0.25vw); opacity: 0.9;
  animation: av-aura 3s linear infinite;
}
.av.rank-challenger .av-img::before {
  inset: -0.75vw;
  background: conic-gradient(from 0deg, #ff6b6b, #ffd45c, #3ddc84, #4fe0d6, #8fd3ff, #c17bff, #ff6b6b);
  filter: blur(0.2vw); opacity: 1;
  animation: av-aura 2s linear infinite;
}
.av.rank-challenger .av-img { box-shadow: 0 0 0 0.3vw #fff, 0 0 2vw rgba(255,233,168,1); }
.av.rank-challenger .av-rank { background: linear-gradient(90deg, #ff6b6b, #ffd45c, #3ddc84, #8fd3ff, #c17bff); color: #0b101c; box-shadow: 0 0 1vw rgba(255,255,255,0.9); }
@keyframes av-aura { to { transform: rotate(360deg); } }
.av-img { position: relative; }

/* ============================================================
   着せ替え（RtoMポイントで交換）: 帽子・顔・動き・ふち
   ============================================================ */
.av-mo { position: relative; width: 100%; height: 100%; }
.av-hat, .av-face {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: calc(var(--size) * 0.55); line-height: 1; pointer-events: none;
  filter: drop-shadow(0 0.1vw 0.2vw rgba(0,0,0,0.35));
  z-index: 2;
}
.av-hat { top: calc(var(--size) * -0.42); }
.av-face { top: calc(var(--size) * 0.28); font-size: calc(var(--size) * 0.5); }
.av-hat img, .av-face img { width: calc(var(--size) * 0.8); height: auto; display: block; }
.av-hat.hidden, .av-face.hidden { display: none; }
/* 動き */
.av.mo-spin .av-mo { animation: mo-spin 2.4s linear infinite; }
@keyframes mo-spin { to { transform: rotate(360deg); } }
.av.mo-wobble .av-mo { animation: mo-wobble 0.32s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes mo-wobble { 0% { transform: scale(1.08, 0.92) rotate(-3deg); } 100% { transform: scale(0.94, 1.08) rotate(3deg); } }
.av.mo-float .av-mo { animation: mo-float 2.6s ease-in-out infinite alternate; }
@keyframes mo-float { 0% { transform: translateY(0) rotate(-3deg); } 100% { transform: translateY(-45%) rotate(3deg); } }
.av.mo-jumpy .av-fx.hop { animation: st-hop-big 0.8s cubic-bezier(0.3, 0.9, 0.4, 1) both; }
@keyframes st-hop-big {
  0%   { transform: translateY(0) scale(1); }
  15%  { transform: translateY(6%) scale(1.15, 0.85); }
  50%  { transform: translateY(-110%) scale(0.9, 1.15) rotate(-6deg); }
  85%  { transform: translateY(4%) scale(1.1, 0.9) rotate(0deg); }
  100% { transform: translateY(0) scale(1); }
}
/* ふち（着せ替え。ランクのフチより優先） */
.av.ring-heart .av-img { box-shadow: 0 0 0 0.28vw #ff86b0, 0 0 1.4vw rgba(255,134,176,1); }
.av.ring-fire .av-img { box-shadow: 0 0 0 0.28vw #ff7a1a, 0 0 1.6vw rgba(255,122,26,1), 0 -0.6vw 1.2vw rgba(255,200,60,0.8); }
.av.ring-ice .av-img { box-shadow: 0 0 0 0.28vw #9fe4f5, 0 0 1.6vw rgba(159,228,245,1); }
.av.ring-leaf .av-img { box-shadow: 0 0 0 0.28vw #6fd08c, 0 0 1.2vw rgba(111,208,140,0.9); }
.av.ring-rainbow .av-img::after {
  content: ''; position: absolute; inset: -0.45vw; border-radius: 50%; z-index: -1;
  background: conic-gradient(#ff6b6b, #ffd45c, #3ddc84, #4fe0d6, #8fd3ff, #c17bff, #ff6b6b);
  animation: av-aura 2.5s linear infinite;
}
.av.ring-rainbow .av-img { box-shadow: 0 0 0 0.22vw #fff; }

/* ---- チャンネルポイント交換: 小さめの緑バナー（Twitch のチャンネルポイント色） ---- */
.fx-banner.redeem {
  border-color: #8be28b;
  box-shadow: 0 0 2vw rgba(139,226,139,0.45), 0 0.6vw 2vw rgba(0,0,0,0.5);
}
.fx-banner.redeem .fx-banner-big { color: #c8f5c8; text-shadow: 0 0.15vw 0 rgba(0,0,0,0.3), 0 0 1.2vw rgba(139,226,139,0.7); }
.fx-banner.redeem .fx-banner-small { color: #eafbea; }
.fx-banner.redeem.shout { top: var(--banner-y); max-width: 80vw; white-space: normal; padding: 1.2vw 2.6vw 1.3vw; }
.fx-banner.redeem.shout .fx-banner-big { font-size: 3.2vw; line-height: 1.25; white-space: normal; word-break: break-word; }

/* ---- クリップ用ブックマークのトースト: ⭐りお＝金、🔖視聴者＝水色 ---- */
.toast.bm-streamer { border-color: #ffd45c; box-shadow: 0 0 1.2vw rgba(255,212,92,0.5); }
.toast.bm-viewer { border-color: #58c6e2; box-shadow: 0 0 1.2vw rgba(88,198,226,0.45); }

/* 常設の案内（初見さん歓迎など）: 左下の小さなピル。guide:state で文面が交互に変わる */
.guide { position: absolute; left: 1.2vw; bottom: 1.6vh; z-index: 32; max-width: 40vw; padding: 0.55vw 1vw; border-radius: 999px; background: rgba(11, 16, 28, 0.78); border: 2px solid rgba(88, 198, 226, 0.7); color: #eef2fa; font-size: 1.15vw; font-weight: 900; font-family: 'Zen Maru Gothic', 'Zen Kaku Gothic New', sans-serif; box-shadow: 0 6px 16px rgba(0,0,0,0.35); }
.guide.pop { animation: guide-pop 0.5s cubic-bezier(.2,1.4,.4,1); }
@keyframes guide-pop { 0% { transform: translateY(8px) scale(0.96); opacity: 0.4; } 100% { transform: none; opacity: 1; } }
.fx-banner.redeem.hello { border-color: #58c6e2; box-shadow: 0 0 22px rgba(88,198,226,0.5); }

/* チャット投票（右下）: 質問＋選択肢のバー＋残り秒。番号をコメントすると票が入る */
.poll { position: absolute; right: 1.2vw; bottom: 8vh; z-index: 33; width: 22vw; padding: 0.8vw 1vw; border-radius: 1vw; background: rgba(11, 16, 28, 0.86); border: 2px solid rgba(217, 180, 91, 0.8); color: #eef2fa; font-family: 'Zen Maru Gothic', 'Zen Kaku Gothic New', sans-serif; box-shadow: 0 8px 22px rgba(0,0,0,0.4); }
.poll.pop { animation: guide-pop 0.5s cubic-bezier(.2,1.4,.4,1); }
.poll .poll-q { font-size: 1.15vw; font-weight: 900; margin-bottom: 0.4vw; }
.poll .poll-how { font-size: 0.8vw; color: #ffe08a; font-weight: 700; margin-bottom: 0.5vw; }
.poll .poll-opt { position: relative; margin: 0.3vw 0; padding: 0.35vw 0.6vw; border-radius: 0.5vw; background: rgba(255,255,255,0.08); overflow: hidden; font-size: 0.95vw; font-weight: 900; display: flex; justify-content: space-between; }
.poll .poll-opt .bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(88, 198, 226, 0.35); transition: width 0.4s; }
.poll .poll-opt.top .bar { background: rgba(217, 180, 91, 0.5); }
.poll .poll-opt span { position: relative; }
.poll .poll-foot { display: flex; justify-content: space-between; font-size: 0.8vw; color: #93a0ba; margin-top: 0.4vw; }
.poll.ended { border-color: rgba(88, 198, 226, 0.9); }
.odai.ask::after { content: '答えてね！'; margin-left: 0.6vw; color: #ffe08a; font-weight: 900; }