/* ============================================================
   推し活クリッカー！ スタイルシート
   Theme: VTuber LIVE STREAM — 黄金のステージ × 配信UI
   (基準コンセプト: concepts/concept_C.png)
   ============================================================ */
:root {
  --bg1: #120726;
  --bg2: #251148;
  --panel: rgba(34, 20, 66, .97);
  --panel-inner: #170a33;
  --pink: #ff77b9;
  --pink-deep: #f0559e;
  --pink-soft: #ffb0d8;
  --gold: #ffd23e;
  --cyan: #6fe3ff;
  --text: #f7efff;
  --muted: #b3a6d6;
  --danger: #ff5d7e;
  --radius: 16px;
  --font: 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', 'Yu Gothic UI', 'Meiryo', sans-serif;
}

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

html, body { height: 100%; }

body {
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 12% -8%, #4a2585 0%, transparent 58%),
    radial-gradient(1000px 760px at 96% 12%, #371a6e 0%, transparent 55%),
    radial-gradient(900px 560px at 50% 118%, #5a2170 0%, transparent 60%),
    linear-gradient(165deg, var(--bg1), var(--bg2) 58%, #170a33);
  background-attachment: fixed;
  overflow: hidden;
}
/* ---- 星空レイヤー ---- */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(2px 2px at 22px 34px, rgba(255,255,255,1), transparent 60%),
    radial-gradient(1.6px 1.6px at 130px 86px, rgba(255,233,163,.95), transparent 60%),
    radial-gradient(2.4px 2.4px at 210px 168px, rgba(208,196,255,.9), transparent 60%),
    radial-gradient(1.4px 1.4px at 68px 190px, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1.8px 1.8px at 300px 40px, rgba(255,210,62,.85), transparent 60%),
    radial-gradient(3px 3px at 250px 240px, rgba(255,255,255,.5), transparent 60%);
  background-size: 340px 300px;
  animation: starTwinkle 3.6s ease-in-out infinite;
}
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(2.6px 2.6px at 80% 22%, #fff, transparent 55%),
    radial-gradient(2.2px 2.2px at 12% 66%, #ffe9a3, transparent 55%),
    radial-gradient(2px 2px at 45% 88%, #d0c4ff, transparent 55%);
  background-size: 520px 480px, 460px 420px, 600px 540px;
  animation: starTwinkle 5.2s ease-in-out .9s infinite;
}
@keyframes starTwinkle { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

button { font-family: var(--font); cursor: pointer; border: none; background: none; color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--muted); font-weight: 400; }
.small { font-size: .78em; }

#app {
  position: relative; z-index: 1;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 10px;
}

/* ============ 金細工パネル共通 ============ */
.panel, #header {
  position: relative;
  border: 3px solid transparent;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, #2a1656 0%, #1d0f40 100%) padding-box,
    linear-gradient(135deg, #ffe9a3 0%, #d4a017 28%, #8a5a00 50%, #ffd700 76%, #a97b12 100%) border-box;
  box-shadow:
    0 10px 34px rgba(0, 0, 0, .6),
    inset 0 1px 0 rgba(255, 240, 200, .25),
    inset 0 0 0 1px rgba(255, 215, 90, .12);
}
.panel::before, #header::before {
  content: '';
  position: absolute; inset: -3px;
  pointer-events: none;
  background-image:
    radial-gradient(circle at center, #fffbe8 0%, #ffe066 30%, #b8860b 62%, rgba(122,88,0,0) 66%),
    radial-gradient(circle at center, #fffbe8 0%, #ffe066 30%, #b8860b 62%, rgba(122,88,0,0) 66%),
    radial-gradient(circle at center, #fffbe8 0%, #ffe066 30%, #b8860b 62%, rgba(122,88,0,0) 66%),
    radial-gradient(circle at center, #fffbe8 0%, #ffe066 30%, #b8860b 62%, rgba(122,88,0,0) 66%);
  background-size: 13px 13px;
  background-repeat: no-repeat;
  background-position: top left, top right, bottom left, bottom right;
}
.panel::after {
  content: '';
  position: absolute; inset: 5px;
  border-radius: calc(var(--radius) - 6px);
  border: 1px solid rgba(255, 220, 120, .22);
  pointer-events: none;
}

/* ================= ヘッダー ================= */
#header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 10px 20px;
  z-index: 20;
}
.logo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.logo-icon {
  font-size: 34px;
  filter: drop-shadow(0 0 10px rgba(255,119,185,.9)) drop-shadow(0 0 22px rgba(255,210,62,.45));
  animation: heartBeat 1.8s ease-in-out infinite;
}
@keyframes heartBeat {
  0%, 100% { transform: scale(1); } 12% { transform: scale(1.18); } 24% { transform: scale(1); } 36% { transform: scale(1.12); } 48% { transform: scale(1); }
}
.logo h1 {
  font-size: 20px; letter-spacing: .04em; font-weight: 800;
  background: linear-gradient(180deg, #fff7d6 8%, #ffe066 38%, #f5b800 60%, #fff2ae 82%, #d99e00 100%);
  background-size: 100% 200%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(74,44,0,.9)) drop-shadow(0 0 14px rgba(255,200,60,.35));
  white-space: nowrap;
  animation: titleSheen 4s ease-in-out infinite;
}
@keyframes titleSheen { 50% { background-position: 0 100%; } }
.logo-sub {
  display: block;
  font-size: 10.5px; letter-spacing: .12em;
  color: #e8cf9a; text-shadow: 0 1px 2px rgba(0,0,0,.8); opacity: .95;
  -webkit-text-fill-color: #e8cf9a;
}

/* --- ヘッダー中央：ファンカウンター --- */
#counters {
  text-align: center; user-select: none;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 18px;
  border-left: 1px solid rgba(255,215,90,.25);
  border-right: 1px solid rgba(255,215,90,.25);
}
#fanBig {
  display: inline-flex; align-items: center;
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 800; line-height: 1.12;
  color: transparent;
  background:
    linear-gradient(180deg, #fff7d6 10%, #ffe066 40%, #f0a800 62%, #ffef9e 85%) text;
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 0 rgba(80,48,0,.95)) drop-shadow(0 0 16px rgba(255,200,60,.4));
  white-space: nowrap;
}
#fanBig .heart-emoji {
  -webkit-text-fill-color: initial;
  font-size: .74em; margin-right: 9px;
  filter: drop-shadow(0 0 10px rgba(255,119,185,.95)) drop-shadow(0 0 22px rgba(255,210,62,.5));
}
.counter-sub { font-size: 12.5px; color: var(--pink-soft); font-weight: 500; white-space: nowrap; }
.dot-sep { opacity: .5; margin: 0 6px; }

/* --- ヘッダー右：ゴールバー --- */
.header-right { display: flex; align-items: center; gap: 14px; min-width: 0; }
#goalWrap { width: min(430px, 34vw); }
.goal-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; letter-spacing: .06em;
}
.goal-title { color: #ffe9b0; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
#goalPct {
  color: transparent; font-weight: 800; font-size: 13px;
  background: linear-gradient(180deg, #fff7d6, #ffc400);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 1px 0 rgba(74,44,0,.9));
}
#goalBar {
  position: relative; height: 18px; margin-top: 4px;
  background: linear-gradient(180deg, #120826, #241145);
  border-radius: 999px; overflow: visible;
  border: 1px solid rgba(255, 215, 90, .55);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.85), 0 0 10px rgba(255,210,62,.18);
}
#goalBar::before, #goalBar::after {
  content: '';
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #fffbe8, #ffd700 45%, #a97b12 80%);
  box-shadow: 0 0 8px rgba(255,215,62,.9);
  z-index: 2;
}
#goalBar::before { left: -5px; }
#goalBar::after { right: -5px; }
#goalFill {
  height: 100%; width: 0%;
  margin: 2px;
  border-radius: 999px;
  background: repeating-linear-gradient(-45deg, #ffe27a 0 10px, #ffb52e 10px 20px);
  background-size: 28px 28px;
  transition: width .5s ease;
  animation: barFlow 1.2s linear infinite;
  box-shadow: 0 0 14px rgba(255,210,62,.85), inset 0 2px 3px rgba(255,255,255,.75);
  position: relative;
}
@keyframes barFlow { to { background-position: 28px 0; } }
#goalLabel {
  position: absolute; inset: 0;
  font-size: 9.5px; line-height: 17px; text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.95);
  letter-spacing: .03em; white-space: nowrap;
  font-weight: 700;
}
#subBadge {
  margin-top: 4px;
  display: inline-block;
  font-size: 11px; padding: 1px 12px;
  background: linear-gradient(180deg, rgba(111,227,255,.18), rgba(30,90,140,.25));
  border: 1px solid rgba(111,227,255,.55);
  border-radius: 999px; color: var(--cyan);
  box-shadow: 0 0 12px rgba(111,227,255,.25), inset 0 1px 0 rgba(255,255,255,.2);
}
.hbtn {
  width: 44px; height: 44px; font-size: 19px;
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(255,235,170,.16), rgba(120,80,20,.12));
  border: 1px solid rgba(255, 215, 90, .45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
  transition: all .18s;
}
.hbtn:hover { background: rgba(255,119,185,.25); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(255,200,60,.35); }

/* ================= メイン2カラム ================= */
#main { flex: 1; display: flex; gap: 10px; min-height: 0; }
#leftPanel {
  flex: 1; display: flex; flex-direction: column;
  padding: 10px; gap: 8px; min-width: 0;
}
#rightPanel { width: clamp(360px, 26vw, 470px); flex-shrink: 0; display: flex; flex-direction: column; overflow: hidden; }

/* ================= 配信ウィンドウ ================= */
#streamWindow {
  position: relative; flex: 1; min-height: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #1a0c38;
  box-shadow: inset 0 0 60px rgba(10, 2, 30, .55);
}
/* ステージ背景 (生成画像) */
#streamBg {
  position: absolute; inset: -3%;
  background: url("../assets/stage_bg.webp") center 32% / cover no-repeat;
  animation: bgDrift 36s ease-in-out infinite alternate;
  transform-origin: 50% 60%;
}
@keyframes bgDrift {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.06) translateY(-8px); }
}
/* ビネット */
#streamWindow::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 130% 100% at 50% 42%, transparent 62%, rgba(10, 3, 24, .42) 100%),
    linear-gradient(180deg, rgba(10,3,24,.22), transparent 14% 82%, rgba(10,3,24,.34));
  pointer-events: none; z-index: 6;
}

/* 会場演出：サイド光柱 + 浮遊光粒子 */
#arenaFx { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
#arenaFx::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(78deg, transparent 3%, rgba(255,140,210,.10) 5.5%, transparent 9%),
    linear-gradient(84deg, transparent 11%, rgba(140,120,255,.09) 13.5%, transparent 17%),
    linear-gradient(-78deg, transparent 3%, rgba(255,190,120,.09) 5.5%, transparent 9%),
    linear-gradient(-84deg, transparent 11%, rgba(120,220,255,.08) 13.5%, transparent 17%);
  animation: beamSway 8s ease-in-out infinite;
}
@keyframes beamSway { 50% { opacity: .55; } }
#arenaFx::after {
  content: '';
  position: absolute; inset: -6% 0;
  background-image:
    radial-gradient(2.5px 2.5px at 12% 78%, rgba(255,180,230,.95), transparent 60%),
    radial-gradient(2px 2px at 28% 88%, rgba(140,220,255,.85), transparent 60%),
    radial-gradient(3px 3px at 45% 82%, rgba(255,220,140,.9), transparent 60%),
    radial-gradient(2px 2px at 63% 90%, rgba(255,180,230,.85), transparent 60%),
    radial-gradient(2.6px 2.6px at 78% 84%, rgba(180,150,255,.9), transparent 60%),
    radial-gradient(2px 2px at 90% 92%, rgba(255,220,140,.85), transparent 60%),
    radial-gradient(1.8px 1.8px at 8% 55%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1.8px 1.8px at 52% 50%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(1.8px 1.8px at 84% 56%, rgba(255,255,255,.7), transparent 60%);
  animation: ambientRise 9s ease-in-out infinite alternate;
}
@keyframes ambientRise {
  from { transform: translateY(4%); opacity: .4; }
  50% { opacity: .95; }
  to { transform: translateY(-4%); opacity: .4; }
}

.sw-topbar {
  position: absolute; top: 10px; left: 10px; right: 10px;
  display: flex; align-items: center; gap: 10px; z-index: 8;
  pointer-events: none;
}
#liveBadge {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(180deg, #ff5a52, #c81e18);
  color: #fff;
  font-weight: 800; font-size: 12.5px; letter-spacing: .12em;
  padding: 4px 12px; border-radius: 8px;
  border: 1px solid #ffb3ad;
  box-shadow: 0 2px 10px rgba(229,50,45,.65), inset 0 1px 0 rgba(255,255,255,.45);
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: livePulse 1.2s ease-in-out infinite; }
@keyframes livePulse { 50% { opacity: .25; transform: scale(.75);} }
#viewerCount {
  font-size: 12.5px; color: #e9defc;
  background: rgba(10, 4, 26, .72);
  border: 1px solid rgba(255,215,90,.35);
  padding: 4px 12px; border-radius: 999px;
  backdrop-filter: blur(4px);
}

/* バフチップ */
#buffChip {
  margin-left: auto;
  font-weight: 700; font-size: 13px;
  padding: 5px 14px; border-radius: 999px;
  color: #2b1503;
  background: linear-gradient(180deg, #ffe27a, #ffb52e);
  border: 2px solid #fff3c4;
  box-shadow: 0 0 20px rgba(255,210,62,.75), inset 0 2px 4px rgba(255,255,255,.8);
  animation: buffWobble 1s ease-in-out infinite;
}
@keyframes buffWobble { 50% { transform: scale(1.06) rotate(1.5deg); } }

/* ステージ（クリック領域） */
#stage { position: absolute; inset: 0; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; z-index: 3; }

/* キャラ背後のグロウ (bgの▶紋章を邪魔しない柔らかい光) */
#ringGlow {
  position: absolute; left: 50%; top: 58%;
  width: 62%; height: 74%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(255,190,235,.20) 0%, rgba(255,170,220,.08) 45%, transparent 70%);
  filter: blur(4px);
  pointer-events: none;
  animation: glowBreath 3.2s ease-in-out infinite;
}
@keyframes glowBreath { 50% { transform: translate(-50%,-50%) scale(1.06); opacity: .85; } }

/* --- キャラクター (バストアップ) --- */
#avatar {
  position: absolute; left: 50%; bottom: -3%;
  height: 101%;
  aspect-ratio: 1024 / 1536;
  transform: translateX(-50%);
  filter:
    drop-shadow(0 18px 22px rgba(20, 4, 40, .6))
    drop-shadow(0 0 34px rgba(255,160,220,.25));
  transition: transform .09s ease;
  z-index: 4;
  will-change: transform;
}
#stage.pressed #avatar { transform: translateX(-50%) scale(.965, .94); }
#avatarRoot {
  position: relative; width: 100%; height: 100%;
  animation: bob 3.8s ease-in-out infinite;
  transform-origin: center 90%;
}
@keyframes bob { 50% { transform: translateY(-9px) rotate(.4deg); } }
#avatarImg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: bottom center;
  user-select: none; -webkit-user-drag: none;
}
/* 表情オーバーレイ（idol_bust.webp の顔位置に画像解析で較正済み: 目L 474,419 / 目R 610,389 / 口 563,482） */
#faceFx {
  position: absolute;
  left: 40.43%; top: 21.48%;
  width: 25%; height: 17.58%;
  overflow: visible;
}
.lids g { transform: scaleY(0); transform-box: fill-box; transform-origin: center top; }
.blinking .lids g { animation: blinkAnim .18s linear; }
@keyframes blinkAnim { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); } }

/* ================= チャットパネル ================= */
#chatWrap {
  position: absolute; left: 10px; bottom: 10px; z-index: 7;
  width: min(320px, 42%);
  display: flex; flex-direction: column;
  pointer-events: none;
  border-radius: 12px;
  background: rgba(14, 7, 32, .62);
  border: 1px solid rgba(255,215,90,.22);
  box-shadow: 0 6px 22px rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  overflow: hidden;
}
.chat-head {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  font-size: 11.5px; font-weight: 700; color: #ffe9b0;
  background: linear-gradient(180deg, rgba(70, 36, 120, .55), rgba(40, 18, 80, .45));
  border-bottom: 1px solid rgba(255,215,90,.25);
  letter-spacing: .08em;
}
.chat-head-ic { font-size: 12px; }
.chat-head-live {
  margin-left: auto;
  font-size: 9.5px; color: #fff;
  background: linear-gradient(180deg, #ff5a8a, #e02a60);
  padding: 1px 8px; border-radius: 999px;
  box-shadow: 0 0 8px rgba(255,90,138,.7);
}
#chatBox {
  display: flex; flex-direction: column; gap: 4px;
  padding: 7px 8px;
  max-height: 172px;
  overflow: hidden;
  justify-content: flex-end;
}
.chat-msg {
  display: flex; align-items: center; gap: 7px;
  background: linear-gradient(180deg, rgba(24, 12, 48, .78), rgba(18, 9, 38, .72));
  border: 1px solid rgba(255,215,90,.16);
  padding: 3px 10px 3px 5px;
  border-radius: 10px;
  font-size: 12px; color: #efe6ff;
  animation: chatIn .28s cubic-bezier(.2,1.4,.4,1) both;
  white-space: nowrap; overflow: hidden;
}
.chat-msg .c-av {
  width: 21px; height: 21px; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.12);
}
.chat-msg b { font-weight: 700; margin-right: 2px; flex-shrink: 0; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.chat-msg .c-text { overflow: hidden; text-overflow: ellipsis; }
.chat-msg.fade { opacity: 0; transition: opacity .8s; }
.chat-msg.sys {
  border-color: rgba(255,215,90,.55);
  background: linear-gradient(180deg, rgba(90, 52, 10, .5), rgba(50, 26, 8, .48));
}
.chat-msg.sys .c-av { background: linear-gradient(135deg, #ffe27a, #ffb52e); border-color: #fff3c4; font-size: 11px; }
@keyframes chatIn { from { transform: translateX(-18px); opacity: 0; } }

/* ================= 設備ラック (購入した設備が配信画面に並ぶ) ================= */
#equipRack {
  position: absolute; right: 10px; bottom: 10px; z-index: 7;
  display: flex; flex-wrap: wrap-reverse; align-content: flex-end; justify-content: flex-end;
  gap: 6px;
  width: min(300px, 38%);
  pointer-events: none;
}
.er-chip {
  position: relative;
  width: 52px; height: 52px;
  border-radius: 12px;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,235,170,.3), rgba(120,80,20,.12) 72%),
    linear-gradient(180deg, #241145, #170a33);
  border: 2px solid rgba(255, 205, 90, .65);
  box-shadow: 0 4px 12px rgba(0,0,0,.5), 0 0 10px rgba(255,200,60,.2), inset 0 1px 0 rgba(255,240,200,.25);
  animation: chipIn .4s cubic-bezier(.2,1.6,.4,1) both;
}
.er-chip img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); position: relative; }
.er-fb { position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; }
.er-chip .er-n {
  position: absolute; right: -5px; top: -6px;
  min-width: 19px; height: 19px; line-height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 11px; font-weight: 800; color: #4a3000;
  background: linear-gradient(180deg, #fff3b0, #ffc400);
  border: 1.5px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.er-chip.pop { animation: chipPop .45s cubic-bezier(.2,1.8,.4,1); }
@keyframes chipIn { from { transform: scale(0) rotate(-18deg); } }
@keyframes chipPop { 40% { transform: scale(1.35) rotate(6deg); } }

/* ================= エフェクトレイヤ ================= */
#fxLayer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 9; }
.float-num {
  position: absolute;
  font-weight: 800; font-size: 29px;
  color: var(--gold);
  text-shadow: 0 0 14px rgba(255,210,62,.95), 0 3px 0 rgba(80,48,0,.85), 0 5px 10px rgba(0,0,0,.55);
  animation: floatUp 1s cubic-bezier(.2,.9,.4,1) both;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  white-space: nowrap;
}
.float-num.crit {
  font-size: 42px; color: #ffb1e6;
  text-shadow: 0 0 22px rgba(255,119,185,1), 0 0 50px rgba(255,119,185,.65), 0 3px 0 rgba(90,20,60,.85), 0 5px 10px rgba(0,0,0,.55);
}
@keyframes floatUp {
  0% { transform: translate(-50%, -50%) scale(.4) rotate(var(--rot, 0deg)); opacity: 1; }
  18% { transform: translate(-50%, -62%) scale(1.25) rotate(var(--rot, 0deg)); opacity: 1; }
  100% { transform: translate(-50%, -210%) scale(1.05) rotate(var(--rot, 0deg)); opacity: 0; }
}
.float-heart {
  position: absolute; font-size: 23px;
  animation: heartRise 1.1s ease-out both;
  pointer-events: none;
}
@keyframes heartRise {
  from { transform: translate(0,0) rotate(var(--rot)) scale(.5); opacity: 1; }
  to   { transform: translate(var(--dx), -140px) rotate(var(--rot)) scale(1.3); opacity: 0; }
}
/* スパチャ: 巨大テキスト */
.mega-float {
  position: absolute; left: 50%;
  font-weight: 800; font-size: 46px;
  letter-spacing: .04em;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(180deg, #fff7d6 12%, #ffe066 42%, #f5a300 64%, #ffef9e 88%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 3px 0 rgba(96,58,0,.95)) drop-shadow(0 0 22px rgba(255,205,60,.95)) drop-shadow(0 8px 16px rgba(0,0,0,.5));
  transform: translate(-50%, -50%);
  animation: megaFloat 1.9s cubic-bezier(.16,.9,.3,1) both;
  pointer-events: none;
  z-index: 5;
}
.mega-float.frenzy {
  font-size: 56px;
  background: linear-gradient(180deg, #fff0f6 12%, #ff9ed2 40%, #ff4d88 66%, #ffd23e 90%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 3px 0 rgba(120,10,50,.95)) drop-shadow(0 0 26px rgba(255,110,180,.95)) drop-shadow(0 8px 16px rgba(0,0,0,.5));
}
@keyframes megaFloat {
  0% { transform: translate(-50%, -50%) scale(.3) rotate(-5deg); opacity: 0; }
  14% { transform: translate(-50%, -58%) scale(1.22) rotate(2deg); opacity: 1; }
  26% { transform: translate(-50%, -62%) scale(1) rotate(0deg); }
  74% { transform: translate(-50%, -110%) scale(1.04); opacity: 1; }
  100% { transform: translate(-50%, -170%) scale(1); opacity: 0; }
}
/* スパチャ: 下から駆け上がるハートシャワー */
.rain-heart {
  position: absolute;
  pointer-events: none;
  animation: rainRise var(--dur, 1.9s) cubic-bezier(.3,.7,.6,1) both;
  filter: drop-shadow(0 0 8px rgba(255,170,220,.8));
}
@keyframes rainRise {
  0% { transform: translate(0, 0) scale(.5) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(var(--rdx, 0px), calc(-1 * var(--rrise, 700px))) scale(1.25) rotate(var(--rr, 30deg)); opacity: 0; }
}
/* クリック衝撃波 */
.shock {
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 4px solid rgba(255, 224, 130, .95);
  box-shadow: 0 0 20px rgba(255,210,62,.9), inset 0 0 12px rgba(255,230,150,.7);
  transform: translate(-50%, -50%);
  animation: shockAnim .55s cubic-bezier(.1,.8,.3,1) both;
  pointer-events: none;
}
.shock.pink { border-color: rgba(255, 150, 215, .95); box-shadow: 0 0 20px rgba(255,119,185,.9), inset 0 0 12px rgba(255,190,230,.7); }
@keyframes shockAnim {
  from { width: 16px; height: 16px; opacity: 1; }
  to   { width: 170px; height: 170px; opacity: 0; }
}
/* スパチャ: 金色の多重衝撃波 */
.shock.goldbig {
  width: 30px; height: 30px;
  border-width: 6px;
  border-color: rgba(255, 214, 90, 1);
  box-shadow: 0 0 34px rgba(255,200,50,1), inset 0 0 18px rgba(255,235,160,.9);
  animation: goldRingAnim .9s cubic-bezier(.1,.75,.3,1) forwards;
  animation-delay: var(--rd, 0s);
  opacity: 0;
}
@keyframes goldRingAnim {
  0% { width: 30px; height: 30px; opacity: 1; }
  100% { width: 420px; height: 420px; opacity: 0; }
}
/* キラ星 */
.spark {
  position: absolute;
  font-size: 19px;
  transform: translate(-50%, -50%);
  animation: sparkAnim .7s ease-out both;
  pointer-events: none;
  filter: drop-shadow(0 0 7px rgba(255,230,140,.95));
}
@keyframes sparkAnim {
  from { transform: translate(-50%,-50%) scale(.3) rotate(0deg); opacity: 1; }
  to   { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -46px))) scale(1.25) rotate(160deg); opacity: 0; }
}
/* 購入時：設備がキャラの上に浮かぶ */
.rise-item {
  position: absolute; left: 50%; top: 42%;
  font-size: 54px;
  transform: translate(-50%, -50%);
  animation: riseItem 1.2s cubic-bezier(.2,.9,.3,1) both;
  pointer-events: none;
  filter: drop-shadow(0 0 18px rgba(255,220,120,.95)) drop-shadow(0 4px 6px rgba(0,0,0,.5));
}
@keyframes riseItem {
  0% { transform: translate(-50%, -30%) scale(.4); opacity: 0; }
  22% { transform: translate(-50%, -70%) scale(1.25); opacity: 1; }
  70% { transform: translate(-50%, -120%) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, -190%) scale(.9); opacity: 0; }
}
.confetti {
  position: fixed; top: -30px; z-index: 300;
  font-size: 22px; pointer-events: none;
  animation: confettiFall linear both;
}
@keyframes confettiFall {
  to { transform: translateY(110vh) rotate(var(--spin)); opacity: .6; }
}
/* 配信画面のフラッシュ (強化購入など) */
#streamWindow.screen-flash #streamBg { animation: bgDrift 36s ease-in-out infinite alternate, flashBlink .5s ease; }
@keyframes flashBlink {
  0%, 100% { filter: brightness(1); }
  30% { filter: brightness(1.6) saturate(1.3); }
}
/* スパチャ: 金色フラッシュ + カメラシェイク */
#streamWindow.gold-flash #streamBg { animation: bgDrift 36s ease-in-out infinite alternate, goldBlink .9s ease; }
@keyframes goldBlink {
  0%, 100% { filter: brightness(1); }
  18% { filter: brightness(2) saturate(1.5) sepia(.25); }
  55% { filter: brightness(1.25) saturate(1.15) sepia(.1); }
}
#streamWindow.shake { animation: screenShake .6s cubic-bezier(.36,.07,.19,.97); }
@keyframes screenShake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-7px, 4px) rotate(-.35deg); }
  22% { transform: translate(6px, -5px) rotate(.3deg); }
  36% { transform: translate(-5px, 3px) rotate(-.22deg); }
  50% { transform: translate(4px, -3px) rotate(.18deg); }
  64% { transform: translate(-3px, 2px) rotate(-.12deg); }
  78% { transform: translate(2px, -1px) rotate(.06deg); }
}
/* バズタイム中: 配信窓の縁が金色に脈動 */
#streamWindow.frenzy::before {
  content: '';
  position: absolute; inset: 0; z-index: 8;
  border-radius: 14px;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 3px rgba(255, 210, 62, .85),
    inset 0 0 42px rgba(255, 190, 40, .5),
    0 0 34px rgba(255, 200, 50, .55);
  animation: frenzyPulse 1.1s ease-in-out infinite;
}
@keyframes frenzyPulse {
  50% { box-shadow:
    inset 0 0 0 3px rgba(255, 235, 140, 1),
    inset 0 0 64px rgba(255, 200, 50, .72),
    0 0 54px rgba(255, 210, 70, .8); }
}
/* スパチャ: キャラのジャンプリアクション ※avatarRoot(立ち絵+顔オーバーレイ全体)に掛ける。
   avatarImgだけに掛けるとfaceFx(口パッチ・閉じ口)が取り残されて口だけ浮いて見える */
#avatar.hype #avatarRoot { animation: hypeJump .85s cubic-bezier(.3,1.7,.4,1) both; }
@keyframes hypeJump {
  0% { transform: translateY(0) scale(1, 1); }
  18% { transform: translateY(6px) scale(1.06, .92); }
  45% { transform: translateY(-34px) scale(.96, 1.07) rotate(-1.6deg); }
  68% { transform: translateY(0) scale(1.04, .96); }
  82% { transform: translateY(-8px) scale(.99, 1.02); }
  100% { transform: translateY(0) scale(1, 1); }
}

/* ================= ニュースティッカー ================= */
#newsTicker {
  display: flex; align-items: center; gap: 10px;
  min-height: 34px;
  background: linear-gradient(180deg, rgba(14,7,32,.85), rgba(26,13,52,.85));
  border: 1px solid rgba(255,215,90,.3);
  border-radius: 10px;
  padding: 4px 12px; font-size: 13px; color: var(--muted);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.ticker-tag {
  color: var(--pink-soft); font-weight: 700; font-size: 12px;
  white-space: nowrap; letter-spacing: .04em;
}
#tickerText { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: opacity .4s; }

/* ================= 右パネル（ストア） ================= */
#tabs {
  display: flex; gap: 6px; padding: 12px 12px 0;
  border-bottom: 2px solid rgba(255, 215, 90, .3);
}
.tab {
  flex: 1; padding: 10px 4px;
  font-size: 13px; font-weight: 700;
  color: var(--muted);
  border-radius: 11px 11px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,215,90,.14);
  border-bottom: none;
  transition: all .15s; position: relative;
  white-space: nowrap;
}
.tab:hover { color: var(--text); background: rgba(255,255,255,.1); }
.tab.active {
  color: #fff;
  background:
    linear-gradient(180deg, #ff9ed2 0%, #f0559e 55%, #d63a86 100%);
  border-color: rgba(255, 200, 230, .75);
  text-shadow: 0 1px 3px rgba(120, 10, 60, .7);
  box-shadow: 0 -2px 14px rgba(240,85,158,.5), inset 0 2px 2px rgba(255,255,255,.45);
}
.badge {
  position: absolute; top: -5px; right: 2px;
  min-width: 18px; height: 18px; line-height: 18px;
  background: linear-gradient(180deg, #ffe27a, #ffb52e);
  color: #4a3000;
  border-radius: 999px; font-size: 11px; font-weight: 800;
  padding: 0 4px;
  animation: badgePop .3s ease;
  box-shadow: 0 0 10px rgba(255,210,62,.9), inset 0 1px 0 rgba(255,255,255,.6);
  border: 1px solid #fff;
}
@keyframes badgePop { from { transform: scale(0); } }

.tabpane { display: none; flex: 1; min-height: 0; overflow-y: auto; padding: 12px; }
.tabpane.active { display: block; }
.tabpane::-webkit-scrollbar { width: 10px; }
.tabpane::-webkit-scrollbar-track { background: transparent; }
.tabpane::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #d4a017, #8a5a00); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }

.store-note { font-size: 12.5px; color: var(--muted); margin: 2px 4px 12px; }
.sec-title {
  font-size: 15px; margin: 16px 4px 8px; letter-spacing: .06em;
  color: transparent;
  background: linear-gradient(180deg, #ffe9a3, #f0b400);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 1px 0 rgba(60,36,0,.9));
}
.sec-title:first-child { margin-top: 2px; }
.empty-note { text-align: center; color: var(--muted); font-size: 13px; padding: 26px 10px; }

/* --- ショップ行 (concept_C風カード) --- */
#shopList { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.shop-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left;
  padding: 10px 12px;
  border-radius: 14px;
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, #33205f 0%, #241344 100%) padding-box,
    linear-gradient(135deg, #c9a23f 0%, #6b4a08 40%, #e9c25a 70%, #7a5800 100%) border-box;
  transition: transform .12s, box-shadow .18s, opacity .15s;
  position: relative; overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,240,200,.12);
}
.shop-item::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,240,200,.22) 48%, transparent 62%);
  transform: translateX(-120%);
  transition: none;
}
.shop-item:not(.disabled):hover {
  transform: translateX(5px) translateY(-1px);
  box-shadow: 0 6px 20px rgba(255,190,60,.28), inset 0 1px 0 rgba(255,240,200,.2);
}
.shop-item:not(.disabled):hover::before { animation: sheen .7s ease; }
@keyframes sheen { to { transform: translateX(120%); } }
.shop-item.disabled { opacity: .45; filter: saturate(.35); cursor: not-allowed; }
.shop-icon {
  width: 56px; height: 56px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 12px;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,244,214,.5), rgba(255,200,120,.14) 52%, rgba(90,50,160,.25) 100%),
    linear-gradient(180deg, #3a2368, #221040);
  border: 1.5px solid rgba(255, 205, 90, .65);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.5), 0 0 10px rgba(255,200,60,.25);
  position: relative;
}
.shop-icon img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.55)) drop-shadow(0 0 8px rgba(255,150,220,.4)); position: relative; }
.shop-emoji { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; }
.shop-icon::before {
  content: '';
  position: absolute; top: -4px; right: -4px;
  width: 9px; height: 9px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #fffbe8, #ffd700 55%, #b8860b);
  box-shadow: 0 0 6px rgba(255,215,62,.9);
}
.shop-info { flex: 1; min-width: 0; }
.shop-name { display: block; font-weight: 700; font-size: 14.5px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.shop-meta { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.shop-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.shop-cost {
  font-weight: 800; font-size: 14px; white-space: nowrap;
  color: transparent;
  background: linear-gradient(180deg,#fff3b0,#ffcf33 55%,#e09a00);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 1px 0 rgba(74,44,0,.8));
}
.shop-cost.cant { background: linear-gradient(180deg,#ffb3c0,#ff4d6f); -webkit-background-clip: text; background-clip: text; }
.buy-pill {
  font-size: 11px; font-weight: 800; letter-spacing: .1em;
  color: #fff;
  padding: 3px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #3a2760, #2a1a4c);
  border: 1px solid rgba(255,215,90,.35);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  transition: all .15s;
}
.shop-item:not(.disabled) .buy-pill {
  background: linear-gradient(180deg, #ff9ed2 0%, #f0559e 55%, #d63a86 100%);
  border-color: #ffd3ea;
  text-shadow: 0 1px 3px rgba(120, 10, 60, .7);
  box-shadow: 0 0 12px rgba(240,85,158,.55), inset 0 1px 2px rgba(255,255,255,.5);
}
.shop-owned {
  position: absolute; top: -1px; right: -1px;
  min-width: 26px; height: 26px; line-height: 24px;
  text-align: center;
  font-size: 14px; font-weight: 800;
  color: #4a3000;
  background: linear-gradient(135deg, #fff3b0, #ffc400 60%, #e09a00);
  border-radius: 0 11px 0 12px;
  border: 1.5px solid #fffbe8;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  padding: 0 4px;
}
.shop-item.flash { animation: buyFlash .45s ease; }
@keyframes buyFlash { 30% { background: linear-gradient(180deg, rgba(255,210,62,.45), rgba(255,160,20,.3)) padding-box, linear-gradient(135deg, #ffe9a3, #ffd700) border-box; border-color: var(--gold); } }

/* --- グリッドリスト（強化・実績） --- */
.grid-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 9px; }
.g-cell {
  aspect-ratio: 1; border-radius: 13px;
  font-size: 25px; display: grid; place-items: center;
  background: linear-gradient(160deg, #3b2a66, #20123f);
  border: 1.5px solid rgba(255, 205, 90, .3);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.5);
  transition: transform .12s, box-shadow .15s, filter .15s;
  position: relative;
}
button.g-cell { cursor: pointer; }
button.g-cell.can {
  border-color: rgba(255,215,62,.95);
  box-shadow: 0 0 14px rgba(255,210,62,.45), inset 0 0 8px rgba(255,220,100,.3);
  animation: upgGlow 1.6s ease-in-out infinite;
}
@keyframes upgGlow { 50% { box-shadow: 0 0 26px rgba(255,210,62,.75), inset 0 0 10px rgba(255,230,130,.5); } }
button.g-cell.can:hover { transform: translateY(-3px) scale(1.05); }
button.g-cell.cant { opacity: .5; filter: grayscale(.6); cursor: not-allowed; }
.g-cell.locked { opacity: .26; filter: grayscale(1); }
.g-cell.got {
  border-color: rgba(111,227,255,.75);
  background: linear-gradient(160deg, #16405a, #101d38);
  box-shadow: 0 0 12px rgba(111,227,255,.35), inset 0 0 6px rgba(111,227,255,.25);
}

/* --- 実績ステータス欄 --- */
.stat-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.stat-list li {
  font-size: 12.5px; padding: 8px 10px;
  background: linear-gradient(180deg, rgba(12,6,28,.75), rgba(24,12,46,.75));
  border-radius: 10px;
  border: 1px solid rgba(255,205,90,.2);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.stat-list li span { color: var(--gold); font-weight: 700; float: right; text-shadow: 0 0 6px rgba(255,210,62,.4); }

/* --- 設定 --- */
.btn-col { display: flex; flex-direction: column; gap: 8px; }
.wide-btn {
  padding: 12px 16px; border-radius: 12px;
  font-size: 14px; font-weight: 700;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
  border: 1px solid rgba(255,215,90,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
  transition: all .15s;
}
.wide-btn:hover { background: rgba(255,255,255,.15); transform: translateY(-1px); }
.wide-btn.save {
  background: linear-gradient(180deg, #ffa1cf 0%, #f0559e 48%, #d63a86 100%);
  border-color: #ffd3ea;
  color: #fff;
  text-shadow: 0 1px 2px rgba(90,10,50,.6);
  box-shadow: 0 4px 16px rgba(240,85,158,.4), inset 0 2px 2px rgba(255,255,255,.55);
}
.wide-btn.save:hover { box-shadow: 0 6px 22px rgba(240,85,158,.6), inset 0 2px 2px rgba(255,255,255,.55); }
.wide-btn.danger { color: var(--danger); border-color: rgba(255,93,126,.5); }
.wide-btn.danger:hover { background: rgba(255,93,126,.16); }
.about-text { font-size: 13px; line-height: 1.75; color: #d5c9ee; padding: 0 4px; }

/* ================= スパチャ（ゴールデン） ================= */
.superchat {
  position: fixed; z-index: 250;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font);
  font-weight: 800; font-size: 15px; color: #4a3000;
  border-radius: 14px;
  padding: 10px 18px 10px 14px;
  border: 3px solid transparent;
  background:
    linear-gradient(135deg, #fff3ae 0%, #ffd23e 55%, #ffaa2e 100%) padding-box,
    linear-gradient(135deg, #fffbe8, #e8b400 45%, #fff7d6 100%) border-box;
  box-shadow:
    0 0 30px rgba(255,200,40,.95),
    0 0 70px rgba(255,170,20,.4),
    inset 0 2px 6px rgba(255,255,255,.85),
    inset 0 -4px 8px rgba(200,120,0,.35);
  cursor: pointer;
  overflow: hidden;
  animation: scSpawn .45s cubic-bezier(.2,1.6,.4,1) both, scIdle .9s ease-in-out .45s infinite alternate;
  transition: opacity .5s, transform .5s;
}
.superchat::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 7px;
  background: linear-gradient(180deg, #ff5a8a, #e02a60);
}
.superchat::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.65) 48%, transparent 62%);
  transform: translateX(-130%);
  animation: scShine 2.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes scShine { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.superchat .sc-icon { font-size: 24px; }
.superchat .sc-label { display: flex; flex-direction: column; line-height: 1.25; }
.superchat .sc-label small { font-size: 10.5px; font-weight: 700; color: #7a5a00; letter-spacing: .08em; }
.superchat.expiring { opacity: .25; transform: scale(.9); }
@keyframes scSpawn { from { transform: scale(0) rotate(-14deg); } }
@keyframes scIdle { from { transform: rotate(-2deg); } to { transform: rotate(2deg) scale(1.05); } }
.superchat:hover { filter: brightness(1.08); }

/* ================= 実績バナー ================= */
#achBanner {
  position: fixed; top: 18px; left: 50%; z-index: 450;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  padding: 10px 26px 10px 14px;
  border-radius: 14px;
  border: 2px solid transparent;
  background:
    linear-gradient(135deg, rgba(40, 22, 76, .97), rgba(26, 12, 54, .97)) padding-box,
    linear-gradient(135deg, #ffe9a3, #d4a017 30%, #fff3c0 55%, #b8860b 80%, #ffd700 100%) border-box;
  box-shadow: 0 10px 34px rgba(0,0,0,.6), 0 0 30px rgba(255,210,62,.4);
  overflow: hidden;
  animation: achIn .55s cubic-bezier(.2,1.5,.4,1) both;
}
#achBanner::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,240,200,.4) 48%, transparent 62%);
  transform: translateX(-130%);
  animation: scShine 1.6s ease-in-out .2s 2;
  pointer-events: none;
}
#achBanner.out { animation: achOut .45s ease both; }
@keyframes achIn { from { transform: translateX(-50%) translateY(-90px) scale(.85); opacity: 0; } }
@keyframes achOut { to { transform: translateX(-50%) translateY(-90px) scale(.9); opacity: 0; } }
.ab-icon { font-size: 34px; filter: drop-shadow(0 0 12px rgba(255,210,62,.95)); animation: medalSpin 2.2s ease-in-out infinite; }
@keyframes medalSpin { 50% { transform: rotateY(180deg) scale(1.1); } }
.ab-body { display: flex; flex-direction: column; }
.ab-body small { font-size: 10.5px; letter-spacing: .22em; color: #ffe9b0; font-weight: 700; }
.ab-body b { font-size: 17px; color: transparent; background: linear-gradient(180deg, #fff7d6 10%, #ffe066 45%, #f0a800 75%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 1px 0 rgba(74,44,0,.9)); }

/* ================= ツールチップ ================= */
#tooltip {
  position: fixed; z-index: 500;
  max-width: 270px;
  background: linear-gradient(180deg, rgba(18, 9, 40, .97), rgba(28, 14, 54, .97));
  border: 1px solid rgba(255,205,90,.55);
  border-radius: 13px;
  padding: 12px 14px;
  font-size: 12.5px; line-height: 1.55;
  pointer-events: none;
  box-shadow: 0 10px 34px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,240,200,.15);
}
.tt-title { font-weight: 800; font-size: 14px; color: var(--pink-soft); margin-bottom: 3px; }
.tt-desc { color: #d5c9ee; }
.tt-line { margin-top: 6px; color: var(--gold); font-weight: 700; }
.tt-line.dim { color: var(--cyan); font-weight: 500; }

/* ================= トースト ================= */
#toastArea {
  position: fixed; right: 16px; bottom: 16px; z-index: 400;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
  align-items: flex-end;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, rgba(22, 12, 46, .96), rgba(32, 17, 60, .96));
  border: 1px solid rgba(255,210,62,.65);
  border-radius: 13px; padding: 10px 16px;
  font-size: 13px; max-width: 320px;
  box-shadow: 0 8px 26px rgba(0,0,0,.55), 0 0 16px rgba(255,190,50,.25), inset 0 1px 0 rgba(255,255,255,.12);
  animation: toastIn .35s cubic-bezier(.2,1.4,.4,1) both;
  transition: opacity .5s, transform .5s;
}
.toast.out { opacity: 0; transform: translateX(20px); }
.toast .t-icon { font-size: 24px; }
.toast b { color: var(--gold); display: block; font-size: 13.5px; text-shadow: 0 0 8px rgba(255,210,62,.5); }
.toast small { color: var(--muted); }
@keyframes toastIn { from { transform: translateX(30px) scale(.9); opacity: 0; } }

/* 解放予告行 */
.shop-item.locked-teaser { opacity: .55; filter: grayscale(.75); cursor: default; box-shadow: none; }
.shop-item.locked-teaser:hover { transform: none; }

/* チャンネルカード */
#channelCard {
  margin-top: 14px;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 2px solid transparent;
  background:
    linear-gradient(135deg, rgba(60, 30, 110, .8), rgba(34, 16, 66, .8)) padding-box,
    linear-gradient(135deg, #c9a23f, #6b4a08 40%, #e9c25a 70%, #7a5800) border-box;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
  position: relative;
  overflow: hidden;
}
#channelCard::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,240,200,.18) 48%, transparent 62%);
  transform: translateX(-120%);
  animation: sheen 6s ease-in-out infinite;
}
#channelCard img {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 12%;
  border: 2px solid rgba(255, 205, 90, .8);
  box-shadow: 0 0 12px rgba(255,160,220,.5);
  flex-shrink: 0;
}
.cc-body { flex: 1; min-width: 0; }
.cc-body b { display: block; font-size: 14.5px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.cc-body small { font-size: 11.5px; color: var(--muted); }
.cc-bar {
  margin-top: 6px;
  height: 8px; border-radius: 99px;
  background: linear-gradient(180deg, #120826, #241145);
  border: 1px solid rgba(255, 215, 90, .4);
  overflow: hidden;
}
#cardSubsFill {
  height: 100%; width: 0%;
  border-radius: 99px;
  background: repeating-linear-gradient(-45deg, #ffe27a 0 8px, #ffb52e 8px 16px);
  transition: width .5s ease;
  box-shadow: 0 0 8px rgba(255,210,62,.8);
}
.cc-live {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: .1em; color: #fff;
  background: linear-gradient(180deg, #ff5a52, #c81e18);
  padding: 3px 9px; border-radius: 7px;
  border: 1px solid #ffb3ad;
  flex-shrink: 0;
}

/* ================= 勝利モーダル ================= */
.modal-overlay {
  position: fixed; inset: 0; z-index: 600;
  display: grid; place-items: center;
  background: radial-gradient(900px 500px at 50% 40%, rgba(80,40,140,.5), rgba(6, 2, 16, .92));
  backdrop-filter: blur(6px);
  animation: fadeIn .4s ease both;
}
@keyframes fadeIn { from { opacity: 0; } }
.modal-box {
  width: min(92vw, 520px);
  text-align: center;
  border-radius: 24px;
  padding: 36px 30px;
  border: 3px solid transparent;
  background:
    linear-gradient(170deg, #37236a 0%, #20113f 100%) padding-box,
    linear-gradient(135deg, #ffe9a3, #d4a017 30%, #fff3c0 55%, #b8860b 80%, #ffd700 100%) border-box;
  box-shadow:
    0 0 70px rgba(255,210,62,.4),
    0 26px 70px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,240,200,.3);
  animation: winPop .5s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes winPop { from { transform: scale(.7); opacity: 0; } }
.win-medal {
  font-size: 68px;
  animation: medalSpin 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 24px rgba(255,210,62,1)) drop-shadow(0 0 50px rgba(255,180,40,.5));
}
.modal-box h2 {
  font-size: 25px; margin: 12px 0 4px;
  color: transparent;
  background: linear-gradient(180deg, #fff7d6 10%, #ffe066 45%, #f0a800 70%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 0 rgba(74,44,0,.9)) drop-shadow(0 0 16px rgba(255,200,60,.5));
}
.win-sub { font-size: 15px; color: var(--pink-soft); margin-bottom: 18px; }
.win-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 0 0 20px; text-align: left;
}
.win-stats div {
  background: linear-gradient(180deg, rgba(10,4,26,.6), rgba(22,11,44,.6));
  border: 1px solid rgba(255,215,90,.25);
  border-radius: 11px;
  padding: 10px 12px; font-size: 13px;
}
.win-stats b {
  display: block; font-size: 17px; margin-top: 2px;
  color: transparent;
  background: linear-gradient(180deg,#fff3b0,#ffcf33 55%,#e09a00);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 1px 0 rgba(74,44,0,.8));
}
.btn-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.btn-row .wide-btn { flex: 1; min-width: 160px; }

/* ================= レスポンシブ ================= */
@media (max-width: 1100px) {
  #rightPanel { width: clamp(330px, 34vw, 420px); }
  #counters { padding: 0 10px; }
}
@media (max-width: 900px) {
  body { overflow: auto; }
  #app { height: auto; min-height: 100vh; }
  #main { flex-direction: column; }
  #rightPanel { width: auto; }
  #streamWindow { min-height: 380px; }
  #header { flex-wrap: wrap; justify-content: center; }
  #counters { border: none; order: 3; width: 100%; }
  #goalWrap { width: 200px; }
  .logo h1 { font-size: 16px; white-space: normal; }
  #chatWrap { width: min(300px, 60%); }
  #equipRack { width: min(240px, 44%); }
  .er-chip { width: 44px; height: 44px; }
  .er-chip img { width: 28px; height: 28px; }
}