/**
 * Joyn Bible Quiz - Game Styles v2.0
 * Sacred Gold x Midnight Theme
 * Location: assets/css/game.css
 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;700;900&family=Cinzel:wght@600;700;900&display=swap');

/* === VARIABLES === */
:root {
  --jbq-ink:#0d0c14; --jbq-deep:#12112a; --jbq-mid:#1c1b3a; --jbq-surface:#252447;
  --jbq-overlay:rgba(255,255,255,0.04);
  --jbq-border:rgba(212,175,80,0.22); --jbq-border-hi:rgba(212,175,80,0.65);
  --jbq-gold:#d4af50; --jbq-gold-light:#f0d080; --jbq-gold-pale:rgba(212,175,80,0.12); --jbq-amber:#e8a030;
  --jbq-jade:#4ecdc4; --jbq-jade-pale:rgba(78,205,196,0.10); --jbq-jade-glow:0 0 28px rgba(78,205,196,0.40);
  --jbq-rose:#e8627a; --jbq-rose-pale:rgba(232,98,122,0.10); --jbq-rose-glow:0 0 28px rgba(232,98,122,0.40);
  --jbq-text:#f0eada; --jbq-muted:#9990c8; --jbq-dim:#6a648a;
  --jbq-r:16px; --jbq-r-lg:24px; --jbq-shadow:0 0 40px rgba(212,175,80,0.12);
  --jbq-font-serif:"Noto Serif KR","맑은 고딕",serif;
  --jbq-font-display:"Cinzel",serif;
  /* 대결·첫 화면 등과 동일 — Pretendard는 플러그인/테마에서 enqueue */
  --jbq-font-ui:"Pretendard",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}

/* === BASE === */
.joyn-bq-container {
  max-width:680px; margin:0 auto; padding:24px 18px 40px;
  font-family:var(--jbq-font-serif); color:var(--jbq-text);
  background:transparent; position:relative; z-index:1;
}

#joyn-bq-bg-canvas { position:fixed; inset:0; z-index:0; pointer-events:none; }

/* === SCREEN TRANSITION === */
.joyn-bq-screen { animation:jbqScreenIn 0.45s cubic-bezier(0.23,1,0.32,1) forwards; }
@keyframes jbqScreenIn { from{opacity:0;transform:translateY(18px) scale(0.97)} to{opacity:1;transform:none} }

/* === HEADER / BRAND === */
.joyn-bq-header { text-align:center; margin-bottom:30px; }
.joyn-bq-brand-cross { font-size:28px; display:block; margin-bottom:6px; filter:drop-shadow(0 0 12px var(--jbq-gold)); animation:jbqFloatCross 4s ease-in-out infinite; }
@keyframes jbqFloatCross { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.joyn-bq-title {
  font-family:var(--jbq-font-display); font-size:clamp(22px,5vw,32px); font-weight:900;
  letter-spacing:0.08em;
  background:linear-gradient(135deg,var(--jbq-gold) 0%,var(--jbq-gold-light) 45%,var(--jbq-amber) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin:0 0 4px; filter:drop-shadow(0 0 18px rgba(212,175,80,0.35));
}
.joyn-bq-subtitle { font-size:11px; color:var(--jbq-muted); letter-spacing:0.28em; text-transform:uppercase; font-family:var(--jbq-font-display); }

/* === STATS === */
.joyn-bq-stats-box { display:flex; gap:8px; justify-content:center; margin-bottom:26px; flex-wrap:wrap; }
.joyn-bq-stat { display:flex; align-items:center; gap:6px; background:var(--jbq-surface); border:1px solid var(--jbq-border); border-radius:100px; padding:6px 14px; font-size:12px; }
.joyn-bq-stat-label { color:var(--jbq-muted); font-size:10px; }
.joyn-bq-stat-value { color:var(--jbq-gold); font-weight:700; font-size:14px; }
.joyn-bq-stat-value.depleted { color:var(--jbq-rose); }

/* 첫 화면(구약·신약 선택): 오늘 남은 / 누적 점수 — Pretendard 14pt */
#joyn-bq-testament-screen .joyn-bq-stats-box .joyn-bq-stat {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 14pt;
  line-height: 1.35;
}
#joyn-bq-testament-screen .joyn-bq-stats-box .joyn-bq-stat-label,
#joyn-bq-testament-screen .joyn-bq-stats-box .joyn-bq-stat-value {
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
}
#joyn-bq-testament-screen .joyn-bq-stats-box .joyn-bq-stat-value {
  font-weight: 700;
}

/* 첫 화면: 구약성경·신약성경·랜덤 제목 16pt, 설명 14pt — Pretendard */
#joyn-bq-testament-screen .joyn-bq-testament-name {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 16pt;
}
#joyn-bq-testament-screen .joyn-bq-testament-desc {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 14pt;
}

/* === TESTAMENT CARDS === */
.joyn-bq-testament-selection { margin-bottom:0; }
.joyn-bq-testament-cards { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-bottom:11px; }
.joyn-bq-testament-card {
  position:relative; background:var(--jbq-surface); border:1px solid var(--jbq-border);
  border-radius:var(--jbq-r-lg); padding:26px 16px; text-align:center;
  cursor:pointer; overflow:hidden; transition:all 0.35s cubic-bezier(0.23,1,0.32,1);
}
.joyn-bq-testament-card::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,transparent 45%,var(--jbq-gold-pale) 100%); opacity:0; transition:opacity 0.35s; }
.joyn-bq-testament-card:hover { border-color:var(--jbq-gold); transform:translateY(-4px); box-shadow:var(--jbq-shadow); }
.joyn-bq-testament-card:hover::before { opacity:1; }
.joyn-bq-testament-card.selected { border-color:var(--jbq-jade); background:var(--jbq-jade-pale); box-shadow:var(--jbq-jade-glow); }
.joyn-bq-testament-icon { font-size:32px; margin-bottom:11px; display:block; filter:drop-shadow(0 0 7px rgba(212,175,80,0.4)); }
.joyn-bq-testament-name { font-size:15px; font-weight:700; color:var(--jbq-text); margin:0 0 4px; }
.joyn-bq-testament-desc { font-size:11px; color:var(--jbq-muted); line-height:1.5; }
/* Random full-width — 아이콘+글자 묶음 가로 중앙, 제목·설명은 베이스라인 정렬 */
.joyn-bq-testament-card[data-testament="random"] {
  grid-column:1/-1; display:flex; flex-direction:row; align-items:center; justify-content:center;
  gap:16px; padding:16px 20px; text-align:center;
}
.joyn-bq-testament-card[data-testament="random"] .joyn-bq-testament-icon { font-size:26px; margin-bottom:0; flex-shrink:0; align-self:center; }
.joyn-bq-testament-card[data-testament="random"] .joyn-bq-testament-random-copy {
  display:flex; flex-direction:row; flex-wrap:wrap; align-items:baseline; justify-content:center;
  gap:0.5em 0.65em;
  flex:0 1 auto; min-width:0; text-align:left;
}
.joyn-bq-testament-card[data-testament="random"] .joyn-bq-testament-random-copy .joyn-bq-testament-name,
.joyn-bq-testament-card[data-testament="random"] .joyn-bq-testament-random-copy .joyn-bq-testament-desc {
  margin:0;
}
#joyn-bq-testament-screen .joyn-bq-testament-card[data-testament="random"] .joyn-bq-testament-random-copy .joyn-bq-testament-name,
#joyn-bq-testament-screen .joyn-bq-testament-card[data-testament="random"] .joyn-bq-testament-random-copy .joyn-bq-testament-desc {
  margin:0;
}

/* Battle Home Card */
.joyn-bq-battle-home-card {
  display:flex; align-items:center; gap:14px; padding:18px;
  background:var(--jbq-surface); border:1px solid rgba(232,98,122,0.3);
  border-radius:var(--jbq-r-lg); cursor:pointer; overflow:hidden;
  transition:all 0.35s cubic-bezier(0.23,1,0.32,1); margin-top:11px;
  font-family:var(--jbq-font-ui);
}
.joyn-bq-battle-home-card:hover { border-color:var(--jbq-rose); transform:translateY(-3px); box-shadow:var(--jbq-rose-glow); }
.joyn-bq-battle-home-icon { font-size:34px; flex-shrink:0; filter:drop-shadow(0 0 9px rgba(232,98,122,0.5)); }
.joyn-bq-battle-home-info { flex:1; }
.joyn-bq-battle-home-title { font-size:15px; font-weight:700; margin-bottom:3px; }
.joyn-bq-battle-home-desc { font-size:11px; color:var(--jbq-muted); line-height:1.5; }
.joyn-bq-battle-home-meta { display:flex; gap:7px; margin-top:7px; flex-wrap:wrap; }
.joyn-bq-battle-meta-pill { font-size:10px; padding:2px 9px; border-radius:100px; border:1px solid; font-family:var(--jbq-font-ui); letter-spacing:0.04em; }
.joyn-bq-meta-rp { border-color:rgba(212,175,80,0.4); color:var(--jbq-gold); }
.joyn-bq-meta-online { border-color:rgba(232,98,122,0.4); color:var(--jbq-rose); display:flex; align-items:center; gap:4px; }
.joyn-bq-online-dot { width:5px; height:5px; border-radius:50%; background:var(--jbq-rose); animation:jbqDotPulse 1s ease infinite; }
@keyframes jbqDotPulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.joyn-bq-battle-home-btns { display:flex; flex-direction:column; gap:6px; flex-shrink:0; }
.joyn-bq-battle-home-btn {
  padding:6px 12px; border-radius:var(--jbq-r);
  background:var(--jbq-overlay); color:var(--jbq-muted);
  border:1px solid var(--jbq-border); font-family:var(--jbq-font-ui);
  font-size:11px; cursor:pointer; transition:all 0.2s; font-weight:600; white-space:nowrap;
}
.joyn-bq-battle-home-btn:hover { border-color:var(--jbq-border-hi); color:var(--jbq-text); }
.joyn-bq-battle-home-btn.rose { border-color:rgba(232,98,122,.4); color:var(--jbq-rose); }
.joyn-bq-battle-home-btn.rose:hover { border-color:var(--jbq-rose); }

/* === BOOK SELECTION === */
.joyn-bq-book-selection { margin:20px 0; }
.joyn-bq-books-grid { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px; }
.joyn-bq-book-card { padding:5px 11px; background:transparent; border:1px solid var(--jbq-border); border-radius:100px; cursor:pointer; transition:all 0.2s; text-align:center; }
.joyn-bq-book-card:hover { border-color:var(--jbq-gold); color:var(--jbq-gold); background:var(--jbq-gold-pale); }
.joyn-bq-book-card.selected { border-color:var(--jbq-jade); color:var(--jbq-jade); background:var(--jbq-jade-pale); }
.joyn-bq-book-short { font-size:12px; font-weight:700; color:var(--jbq-jade); }
.joyn-bq-book-name { font-size:10px; color:var(--jbq-muted); }

/* === LEVEL SELECTION === */
.joyn-bq-level-selection { margin:18px 0; }
.joyn-bq-level-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:18px; }
.joyn-bq-level-card { background:var(--jbq-surface); border:2px solid transparent; border-radius:var(--jbq-r); padding:19px 11px; text-align:center; cursor:pointer; transition:all 0.3s; position:relative; }
.joyn-bq-level-card:hover:not(.selected) { border-color:var(--jbq-border-hi); transform:translateY(-2px); }
.joyn-bq-level-card.selected { border-color:var(--jbq-jade); background:var(--jbq-jade-pale); box-shadow:var(--jbq-jade-glow); }
.joyn-bq-level-icon { font-size:26px; margin-bottom:7px; }
.joyn-bq-level-name { font-size:12px; font-weight:700; margin-bottom:4px; color:var(--jbq-text); }
.joyn-bq-level-desc { font-size:10px; color:var(--jbq-muted); line-height:1.4; }

/* === BUTTONS === */
.joyn-bq-actions { display:flex; gap:8px; justify-content:center; align-items:center; margin-top:20px; flex-wrap:wrap; }
.joyn-bq-btn {
  padding:12px 22px; border:none; border-radius:var(--jbq-r);
  font-family:var(--jbq-font-serif); font-size:13px; font-weight:700;
  cursor:pointer; transition:all 0.3s cubic-bezier(0.23,1,0.32,1);
  position:relative; overflow:hidden; display:inline-block; text-align:center;
}
.joyn-bq-btn::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,0.1),transparent); pointer-events:none; }
.joyn-bq-btn-primary { background:linear-gradient(135deg,#c4943a,var(--jbq-gold),var(--jbq-gold-light)); color:var(--jbq-ink); box-shadow:0 4px 18px rgba(212,175,80,0.32); }
.joyn-bq-btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(212,175,80,0.48); }
.joyn-bq-btn-secondary { background:var(--jbq-overlay); color:var(--jbq-muted); border:1px solid var(--jbq-border); }
.joyn-bq-btn-secondary:hover { border-color:var(--jbq-border-hi); color:var(--jbq-text); }
.joyn-bq-btn-jade { background:linear-gradient(135deg,#2aa19a,var(--jbq-jade)); color:var(--jbq-ink); box-shadow:0 4px 18px rgba(78,205,196,0.28); }
.joyn-bq-btn-jade:hover { transform:translateY(-2px); box-shadow:var(--jbq-jade-glow); }
.joyn-bq-btn-rose { background:linear-gradient(135deg,#b84060,var(--jbq-rose)); color:#fff; box-shadow:0 4px 18px rgba(232,98,122,0.28); }
.joyn-bq-btn-rose:hover { transform:translateY(-2px); box-shadow:var(--jbq-rose-glow); }
.joyn-bq-btn-large { padding:14px 30px; font-size:16px; font-weight:700; }
.joyn-bq-btn-small { padding:7px 14px; font-size:11px; }
.joyn-bq-btn:disabled { opacity:0.35; cursor:not-allowed; transform:none!important; box-shadow:none!important; }
/* Sound toggle button */
.joyn-bq-sound-btn {
  position:fixed; bottom:20px; right:20px; z-index:200;
  width:40px; height:40px; border-radius:50%;
  background:var(--jbq-surface); border:1px solid var(--jbq-border);
  color:var(--jbq-gold); font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s; box-shadow:0 4px 12px rgba(0,0,0,0.3);
}
.joyn-bq-sound-btn:hover { border-color:var(--jbq-gold); }
.joyn-bq-sound-btn.muted { color:var(--jbq-dim); }

/* === GAME HUD === */
.joyn-bq-game-header { margin-bottom:14px; }
.joyn-bq-game-hud-row { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.joyn-bq-hud-back { width:34px; height:34px; padding:0; margin:0; border-radius:50%; background:var(--jbq-surface); border:1px solid var(--jbq-border); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:14px; font-family:inherit; transition:all 0.2s; flex-shrink:0; color:var(--jbq-text); }
.joyn-bq-hud-back:hover { border-color:var(--jbq-gold); color:var(--jbq-gold); }
.joyn-bq-btn-home-menu { flex:0 1 auto; }
.joyn-bq-feedback-home-btn { width:100%; max-width:320px; margin-bottom:8px; }
.joyn-bq-progress-bar { flex:1; height:5px; background:var(--jbq-surface); border-radius:100px; overflow:hidden; }
.joyn-bq-progress-fill { height:100%; background:linear-gradient(90deg,var(--jbq-jade),var(--jbq-gold)); border-radius:100px; transition:width 0.6s cubic-bezier(0.23,1,0.32,1); }
.joyn-bq-game-info { display:flex; gap:10px; align-items:center; font-size:11px; flex-shrink:0; }
.joyn-bq-question-counter { color:var(--jbq-muted); }
.joyn-bq-score-display { color:var(--jbq-gold); font-weight:700; }
.joyn-bq-streak-badge { background:var(--jbq-surface); border:1px solid var(--jbq-border); border-radius:100px; padding:2px 9px; font-size:10px; color:var(--jbq-jade); transition:all 0.3s; }
.joyn-bq-streak-badge.hot { border-color:var(--jbq-rose); color:var(--jbq-rose); animation:jbqStreakPulse 1s ease infinite; }
@keyframes jbqStreakPulse { 0%,100%{box-shadow:none} 50%{box-shadow:var(--jbq-rose-glow)} }
.joyn-bq-timer-bar { height:4px; background:var(--jbq-surface); border-radius:100px; overflow:hidden; margin-bottom:14px; }
.joyn-bq-timer-fill { height:100%; background:linear-gradient(90deg,var(--jbq-jade),var(--jbq-gold)); border-radius:100px; transition:width 1s linear; }
.joyn-bq-timer-fill.urgent { background:var(--jbq-rose); }

/* === QUESTION CARD === */
.joyn-bq-question-container { margin-bottom:14px; }
.joyn-bq-question-card {
  background:var(--jbq-mid); border:1px solid var(--jbq-border); border-radius:var(--jbq-r-lg);
  padding:24px; position:relative; overflow:hidden; color:var(--jbq-text);
}
.joyn-bq-question-card::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--jbq-gold),transparent); }
.joyn-bq-question-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.joyn-bq-difficulty-badge { font-size:10px; font-family:var(--jbq-font-display); letter-spacing:0.1em; padding:3px 10px; border-radius:100px; font-weight:600; }
.joyn-bq-difficulty-very_easy,.joyn-bq-difficulty-easy { background:rgba(78,205,196,0.14); color:var(--jbq-jade); border:1px solid rgba(78,205,196,0.3); }
.joyn-bq-difficulty-normal { background:rgba(212,175,80,0.14); color:var(--jbq-gold); border:1px solid rgba(212,175,80,0.3); }
.joyn-bq-difficulty-hard,.joyn-bq-difficulty-very_hard { background:rgba(232,98,122,0.14); color:var(--jbq-rose); border:1px solid rgba(232,98,122,0.3); }
.joyn-bq-bible-ref { font-size:11px; color:var(--jbq-muted); font-style:italic; }

/* 문제 본문 — 최소 16px로 가독성 (모바일 포함) */
.joyn-bq-question-text {
  font-size:clamp(16px,3.6vw,20px);
  font-weight:800;
  line-height:1.62;
  color:var(--jbq-text);
  margin:0 0 20px;
  font-family:var(--jbq-font-serif);
  /* 긴 문장·인용 전체 표시 (테마 h3 line-clamp·말줄임 상속 방지) */
  display:block;
  overflow:visible;
  max-height:none;
  white-space:normal;
  word-break:keep-all;
  overflow-wrap:break-word;
  text-overflow:clip;
  -webkit-line-clamp:unset;
  line-clamp:unset;
  -webkit-box-orient:unset;
}

/* 테마·페이지 빌더가 heading에 거는 말줄임 무력화 (특이도 보강) */
#joyn-bible-quiz .joyn-bq-question-text,
#joyn-bq-game-screen .joyn-bq-question-text,
#joyn-bq-battle-game-screen .joyn-bq-question-text {
  display:block !important;
  overflow:visible !important;
  -webkit-line-clamp:unset !important;
  line-clamp:unset !important;
  -webkit-box-orient:unset !important;
  text-overflow:clip !important;
  white-space:normal !important;
}

/* === ANSWERS === */
.joyn-bq-answers { margin:0; }
.joyn-bq-answers-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.joyn-bq-answer-btn {
  background:var(--jbq-surface); border:2px solid var(--jbq-border); border-radius:var(--jbq-r);
  padding:14px 14px; text-align:left; cursor:pointer;
  display:flex; align-items:flex-start; gap:10px; position:relative; overflow:hidden;
  color:var(--jbq-text); transition:border-color 0.2s,box-shadow 0.2s,transform 0.2s;
  -webkit-tap-highlight-color:transparent; user-select:none;
}
.joyn-bq-answer-btn * { pointer-events:none; }
.joyn-bq-answer-btn:hover { border-color:var(--jbq-gold); transform:translateY(-2px); }
.joyn-bq-answer-btn.selected { border-color:var(--jbq-jade); background:var(--jbq-jade-pale); box-shadow:var(--jbq-jade-glow); }
.joyn-bq-answer-btn.answer-correct { border-color:var(--jbq-jade); background:rgba(78,205,196,0.12); animation:jbqCorrectFlash 0.5s ease; }
.joyn-bq-answer-btn.answer-wrong { border-color:var(--jbq-rose); background:rgba(232,98,122,0.08); animation:jbqWrongShake 0.4s ease; }
@keyframes jbqCorrectFlash { 0%{box-shadow:none} 50%{box-shadow:0 0 40px rgba(78,205,196,0.6)} 100%{box-shadow:var(--jbq-jade-glow)} }
@keyframes jbqWrongShake { 0%,100%{transform:none} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }
.joyn-bq-answer-btn:disabled { opacity:0.6; cursor:not-allowed; transform:none!important; }
.joyn-bq-answer-number {
  width:28px; height:28px; border-radius:50%; background:var(--jbq-mid); border:1px solid var(--jbq-border);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800;
  flex-shrink:0; font-family:var(--jbq-font-display); color:var(--jbq-muted); transition:all 0.2s;
}
.joyn-bq-answer-btn.selected .joyn-bq-answer-number { background:var(--jbq-jade); border-color:var(--jbq-jade); color:var(--jbq-ink); }

/* 객관식 선택지 문구 — 16px·세미볼드 */
.joyn-bq-answer-text {
  font-size:16px;
  font-weight:600;
  line-height:1.55;
  color:var(--jbq-text);
  margin-top:1px;
  flex:1;
}

/* OX — 라벨 기준 16px·굵게 (아이콘은 비율 유지) */
.joyn-bq-ox-buttons { display:flex; gap:14px; justify-content:center; }
.joyn-bq-ox-btn {
  flex:1; max-width:180px; padding:28px 18px; background:var(--jbq-surface); border:2px solid var(--jbq-border);
  border-radius:var(--jbq-r-lg); cursor:pointer; transition:all 0.25s;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-size:16px; font-weight:800; color:var(--jbq-text);
  -webkit-tap-highlight-color:transparent; user-select:none;
}
.joyn-bq-ox-btn * { pointer-events:none; }
.joyn-bq-ox-btn:hover { border-color:var(--jbq-gold); transform:translateY(-3px); }
.joyn-bq-ox-btn.selected { border-color:var(--jbq-jade); background:var(--jbq-jade-pale); box-shadow:var(--jbq-jade-glow); }
.joyn-bq-ox-btn:disabled { opacity:0.6; cursor:not-allowed; transform:none!important; }
.joyn-bq-ox-icon { font-size:2.35em; line-height:1; }

/* Text input — 16px: 가독성 + iOS 입력 시 자동 확대 완화 */
.joyn-bq-text-input { margin:14px 0; }
.joyn-bq-input { width:100%; padding:14px 16px; font-size:16px; background:var(--jbq-surface); border:2px solid var(--jbq-border); border-radius:var(--jbq-r); color:var(--jbq-text); font-family:var(--jbq-font-serif); transition:border-color 0.2s,box-shadow 0.2s; }
.joyn-bq-input:focus { outline:none; border-color:var(--jbq-gold); box-shadow:0 0 0 3px var(--jbq-gold-pale); }
.joyn-bq-input::placeholder { color:var(--jbq-dim); }
.joyn-bq-text-length-indicator { margin-top:7px; text-align:center; font-size:11px; color:var(--jbq-muted); }

/* Hint box — 힌트는 읽기 핵심 */
.joyn-bq-hint-box { margin-top:13px; padding:12px 16px; background:rgba(212,175,80,0.07); border:1px solid rgba(212,175,80,0.3); border-radius:var(--jbq-r); font-size:14px; color:var(--jbq-gold-light); line-height:1.6; }
.joyn-bq-hint-box p { margin:0; color:var(--jbq-gold-light); }

/* Disabled hint/btn */
.joyn-bq-btn.disabled { opacity:0.5; cursor:not-allowed; pointer-events:none; }

/* === GAME ACTIONS === */
.joyn-bq-game-actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }

/* === FEEDBACK === */
.joyn-bq-feedback-card {
  background:var(--jbq-mid); border:1px solid var(--jbq-border); border-radius:var(--jbq-r-lg);
  padding:32px 24px; text-align:center; max-width:620px; margin:0 auto;
  color:var(--jbq-text); position:relative; overflow:hidden; animation:jbqScreenIn 0.45s cubic-bezier(0.23,1,0.32,1);
}
.joyn-bq-feedback-card::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; }
.joyn-bq-feedback-card.feedback-correct::before { background:linear-gradient(90deg,transparent,var(--jbq-jade),transparent); }
.joyn-bq-feedback-card.feedback-wrong::before { background:linear-gradient(90deg,transparent,var(--jbq-rose),transparent); }
.joyn-bq-feedback-card.feedback-timeout::before { background:linear-gradient(90deg,transparent,var(--jbq-gold),transparent); }
.joyn-bq-feedback-icon { font-size:56px; margin-bottom:12px; display:inline-block; animation:jbqFeedbackBounce 0.6s cubic-bezier(0.23,1,0.32,1); }
@keyframes jbqFeedbackBounce { 0%{transform:scale(0) rotate(-10deg);opacity:0} 60%{transform:scale(1.12) rotate(3deg)} 100%{transform:scale(1) rotate(0);opacity:1} }
.joyn-bq-feedback-title { font-size:21px; font-weight:900; margin-bottom:9px; color:var(--jbq-text); }
.feedback-correct .joyn-bq-feedback-title { color:var(--jbq-jade); }
.feedback-wrong .joyn-bq-feedback-title   { color:var(--jbq-rose); }
.feedback-timeout .joyn-bq-feedback-title { color:var(--jbq-gold); }
.joyn-bq-feedback-pts { display:inline-flex; align-items:center; gap:5px; background:var(--jbq-gold-pale); border:1px solid rgba(212,175,80,0.3); border-radius:100px; padding:4px 13px; font-size:12px; color:var(--jbq-gold); font-weight:700; margin-bottom:18px; }
.joyn-bq-answer-section { background:var(--jbq-surface); border-radius:var(--jbq-r); padding:12px 16px; text-align:left; margin-bottom:12px; }
.joyn-bq-answer-label { font-size:10px; color:var(--jbq-muted); margin-bottom:4px; letter-spacing:0.1em; font-family:var(--jbq-font-display); }
.joyn-bq-answer-value { font-size:16px; font-weight:800; color:var(--jbq-jade); word-break:keep-all; }
/* 해설은 길어질 수 있어 16px 고정보다 한 단계만 상향 */
/* 정답 해설 — 본문과 유사한 명도·16px·살짝 굵게 (jbq-muted 단독 사용 시 대비 부족) */
.joyn-bq-explanation {
  background:rgba(212,175,80,0.11);
  border:1px solid rgba(212,175,80,0.22);
  border-left:4px solid var(--jbq-gold);
  border-radius:0 var(--jbq-r) var(--jbq-r) 0;
  padding:14px 18px;
  text-align:left;
  margin-bottom:18px;
  font-size:16px;
  font-weight:600;
  line-height:1.68;
  color:rgba(240,234,218,0.96);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.joyn-bq-explanation p { margin:0; color:inherit; line-height:inherit; }
.joyn-bq-explanation p + p { margin-top:0.65em; }
.joyn-bq-explanation strong { color:var(--jbq-gold-light); font-weight:800; }
.joyn-bq-feedback-stats { display:flex; justify-content:center; gap:10px; margin:16px 0; flex-wrap:wrap; }
.joyn-bq-feedback-stats span { font-size:12px; font-weight:600; color:var(--jbq-muted); padding:7px 14px; background:var(--jbq-surface); border:1px solid var(--jbq-border); border-radius:var(--jbq-r); }
.joyn-bq-feedback-actions { display:flex; gap:8px; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.joyn-bq-feedback-next-btn { margin-top:12px; }

/* === RESULT === */
.joyn-bq-result-card { background:var(--jbq-mid); border:1px solid var(--jbq-border); border-radius:var(--jbq-r-lg); padding:38px 24px; text-align:center; max-width:620px; margin:0 auto; color:var(--jbq-text); position:relative; overflow:hidden; }
.joyn-bq-result-card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--jbq-jade),var(--jbq-gold),var(--jbq-rose)); }
.joyn-bq-result-trophy { font-size:62px; display:block; margin-bottom:11px; filter:drop-shadow(0 0 18px rgba(212,175,80,0.5)); animation:jbqTrophySpin 1s cubic-bezier(0.23,1,0.32,1); }
@keyframes jbqTrophySpin { from{transform:scale(0) rotateY(180deg);opacity:0} to{transform:scale(1) rotateY(0);opacity:1} }
.joyn-bq-result-title { font-family:var(--jbq-font-display); font-size:21px; font-weight:900; color:var(--jbq-gold); margin-bottom:4px; letter-spacing:0.05em; }
.joyn-bq-result-subtitle { font-size:12px; color:var(--jbq-muted); margin-bottom:26px; }
.joyn-bq-stars { display:flex; justify-content:center; gap:6px; margin-bottom:24px; font-size:28px; }
.joyn-bq-star { filter:grayscale(1) brightness(0.4); }
.joyn-bq-star.lit { filter:none; animation:jbqStarPop 0.5s cubic-bezier(0.23,1,0.32,1) forwards; }
@keyframes jbqStarPop { from{transform:scale(0);filter:grayscale(1)} 60%{transform:scale(1.3)} to{transform:scale(1);filter:none} }
.joyn-bq-result-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin:0 0 20px; }
.joyn-bq-result-stat { background:var(--jbq-surface); border:1px solid var(--jbq-border); border-radius:var(--jbq-r); padding:13px; }
.joyn-bq-result-label { display:block; font-size:9px; color:var(--jbq-muted); margin-bottom:4px; letter-spacing:0.1em; font-family:var(--jbq-font-display); }
.joyn-bq-result-value { display:block; font-size:20px; font-weight:900; color:var(--jbq-gold); }
.joyn-bq-jseeds-reward { background:linear-gradient(135deg,var(--jbq-jade-pale),var(--jbq-gold-pale)); border:1px solid rgba(212,175,80,0.3); border-radius:var(--jbq-r); padding:11px 15px; margin-bottom:18px; font-size:13px; }
.joyn-bq-jseeds-reward p { margin:0; color:var(--jbq-text); }
.joyn-bq-jseeds-reward strong { color:var(--jbq-jade); font-size:16px; }
.joyn-bq-result-actions { display:flex; gap:9px; justify-content:center; flex-wrap:wrap; }

/* === ERROR === */
.joyn-bq-error-card { background:var(--jbq-mid); border:1px solid var(--jbq-border); border-radius:var(--jbq-r-lg); padding:38px 24px; text-align:center; max-width:500px; margin:0 auto; color:var(--jbq-text); }
.joyn-bq-error-icon { font-size:3.8em; margin-bottom:16px; }
.joyn-bq-error-title { font-size:1.35em; font-weight:bold; color:var(--jbq-rose); margin-bottom:11px; }
.joyn-bq-error-message { color:var(--jbq-muted); line-height:1.6; margin-bottom:20px; }

/* === LEADERBOARD === */
.joyn-bq-lb-mode-tabs,.joyn-bq-leaderboard-period-selector { display:flex; background:var(--jbq-surface); border:1px solid var(--jbq-border); border-radius:var(--jbq-r); padding:3px; margin-bottom:12px; gap:2px; }
.joyn-bq-lb-mode-tab,.joyn-bq-period-btn { flex:1; padding:7px; border-radius:calc(var(--jbq-r) - 3px); font-size:11px; font-family:var(--jbq-font-serif); cursor:pointer; transition:all 0.2s; background:transparent; border:none; color:var(--jbq-muted); text-align:center; font-weight:600; }
.joyn-bq-period-btn.active,.joyn-bq-lb-mode-tab.active { background:var(--jbq-gold); color:var(--jbq-ink); font-weight:700; }
.joyn-bq-lb-mode-tab.battle-active { background:var(--jbq-rose); color:#fff; font-weight:700; }
.joyn-bq-dimension-selector { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:12px; }
.joyn-bq-dimension-btn { padding:5px 11px; background:transparent; border:1px solid var(--jbq-border); border-radius:100px; cursor:pointer; font-size:11px; color:var(--jbq-muted); transition:all 0.2s; font-family:var(--jbq-font-serif); }
.joyn-bq-dimension-btn:hover { border-color:var(--jbq-gold); color:var(--jbq-gold); }
.joyn-bq-dimension-btn.active { background:var(--jbq-gold-pale); border-color:var(--jbq-gold); color:var(--jbq-gold); }
.joyn-bq-leaderboard-wrapper { margin:12px 0; overflow-x:auto; }
.joyn-bq-leaderboard-table { width:100%; border-collapse:collapse; background:transparent; }
.joyn-bq-leaderboard-table thead tr { border-bottom:1px solid var(--jbq-border); }
.joyn-bq-leaderboard-table th { padding:7px 11px; text-align:left; font-size:9px; font-weight:700; color:var(--jbq-dim); letter-spacing:0.1em; font-family:var(--jbq-font-display); }
.joyn-bq-leaderboard-table th:first-child { text-align:center; }
.joyn-bq-leaderboard-table th:last-child { text-align:right; }
.joyn-bq-leaderboard-table tbody tr { border-bottom:none; transition:background 0.2s; }
.joyn-bq-leaderboard-table tbody tr:hover { background:var(--jbq-overlay); }
.joyn-bq-leaderboard-table tbody tr.is-current-user { background:var(--jbq-jade-pale); }
.joyn-bq-leaderboard-table td { padding:9px 11px; color:var(--jbq-text); font-size:13px; }
.joyn-bq-leaderboard-rank { display:inline-flex; width:25px; height:25px; align-items:center; justify-content:center; border-radius:50%; font-weight:900; font-size:10px; font-family:var(--jbq-font-display); }
.joyn-bq-leaderboard-rank.rank-1 { background:var(--jbq-gold); color:var(--jbq-ink); }
.joyn-bq-leaderboard-rank.rank-2 { background:#aaa; color:var(--jbq-ink); }
.joyn-bq-leaderboard-rank.rank-3 { background:#c07030; color:#fff; }
.joyn-bq-leaderboard-rank.rank-other { background:var(--jbq-surface); color:var(--jbq-muted); }
.joyn-bq-leaderboard-user { display:flex; align-items:center; gap:9px; }
.joyn-bq-leaderboard-avatar { width:30px; height:30px; border-radius:50%; background:var(--jbq-surface); border:1px solid var(--jbq-border); display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:12px; color:var(--jbq-gold); flex-shrink:0; }
.joyn-bq-leaderboard-name { font-size:13px; font-weight:600; color:var(--jbq-text); }
.joyn-bq-leaderboard-points { text-align:right; font-size:14px; font-weight:900; color:var(--jbq-gold); }

/* === LOADING === */
#joyn-bq-loading { text-align:center; padding:60px 20px; color:var(--jbq-muted); }
.joyn-bq-spinner { width:44px; height:44px; margin:0 auto 16px; border:3px solid var(--jbq-surface); border-top:3px solid var(--jbq-gold); border-radius:50%; animation:jbqSpin 0.9s linear infinite; }
@keyframes jbqSpin { to{transform:rotate(360deg)} }

/* === NOTICE === */
.joyn-bq-notice { position:fixed; top:20px; right:20px; padding:12px 18px; background:var(--jbq-surface); border:1px solid var(--jbq-border); border-radius:var(--jbq-r); box-shadow:var(--jbq-shadow); z-index:9999; max-width:370px; color:var(--jbq-text); font-size:13px; animation:jbqScreenIn 0.35s ease; }
.joyn-bq-notice-success { border-left:3px solid var(--jbq-jade); }
.joyn-bq-notice-error   { border-left:3px solid var(--jbq-rose); }
.joyn-bq-notice-info    { border-left:3px solid var(--jbq-gold); }
/* 로그인 필요 토스트·세션 만료 등 — hc-bible-memory `.hcjoyn-login-prompt` 와 동일 흰색 단순 박스 */
.joyn-bq-notice.joyn-bq-notice-plain {
  background:#fff !important;
  color:#1f2937 !important;
  border:1px solid rgba(0,0,0,0.08) !important;
  border-left:3px solid rgba(0,0,0,0.12) !important;
  box-shadow:0 8px 32px rgba(0,0,0,0.12) !important;
  font-family:var(--jbq-font-ui);
}
/* 비회원 숏코드 안내 — 흰 카드 (하단 hcjoyn-login-prompt 와 통일) */
.joyn-bq-login-required.hcjoyn-login-prompt { text-align:center; padding:48px 16px; }
.joyn-bq-login-required .joyn-bq-notice.hcjoyn-login-prompt__card,
.joyn-bq-login-required .hcjoyn-login-prompt__card {
  position:static;
  max-width:420px;
  margin:0 auto;
  padding:28px 24px 24px;
  background:#fff !important;
  color:#1f2937 !important;
  border:1px solid rgba(0,0,0,0.08) !important;
  border-radius:12px;
  box-shadow:0 4px 24px rgba(0,0,0,0.08) !important;
  font-family:var(--jbq-font-ui);
}
.joyn-bq-login-required .joyn-bq-notice h3 {
  margin:0 0 8px;
  font-size:1.0625rem;
  font-weight:700;
  color:#111827;
}
.joyn-bq-login-required .joyn-bq-notice p {
  margin:0 0 20px;
  font-size:0.9375rem;
  line-height:1.5;
  color:#4b5563;
}
.joyn-bq-login-required .joyn-bq-btn-primary {
  background:#f3f4f6 !important;
  color:#111827 !important;
  border:1px solid rgba(0,0,0,0.1) !important;
  box-shadow:none !important;
  font-family:var(--jbq-font-ui);
  font-weight:600;
}
.joyn-bq-login-required .joyn-bq-btn-primary:hover {
  background:#e5e7eb !important;
  transform:none;
}

/* === SUBTITLE === */
.joyn-bq-subtitle { font-size:12px; color:var(--jbq-muted); letter-spacing:0.28em; text-transform:uppercase; font-family:var(--jbq-font-display); }

/* === DIVIDER === */
.joyn-bq-divider,.joyn-bq-section-divider { display:flex; align-items:center; gap:9px; margin:18px 0; color:var(--jbq-dim); font-size:10px; letter-spacing:0.14em; font-family:var(--jbq-font-display); }
.joyn-bq-divider::before,.joyn-bq-divider::after,.joyn-bq-section-divider::before,.joyn-bq-section-divider::after { content:""; flex:1; height:1px; background:var(--jbq-border); }

/* 대결 모드 6화면 + 공통 컨트롤: 본문·제목·버튼 Pretendard */
#joyn-bq-battle-match-screen,
#joyn-bq-battle-ready-screen,
#joyn-bq-battle-game-screen,
#joyn-bq-battle-round-screen,
#joyn-bq-battle-result-screen,
#joyn-bq-battle-lb-screen {
  font-family:var(--jbq-font-ui);
}
[id^="joyn-bq-battle-"][id$="-screen"] .joyn-bq-title,
[id^="joyn-bq-battle-"][id$="-screen"] .joyn-bq-subtitle {
  font-family:var(--jbq-font-ui);
}
[id^="joyn-bq-battle-"][id$="-screen"] .joyn-bq-btn,
[id^="joyn-bq-battle-"][id$="-screen"] .joyn-bq-lb-mode-tab,
[id^="joyn-bq-battle-"][id$="-screen"] .joyn-bq-period-btn {
  font-family:var(--jbq-font-ui);
}
#joyn-bq-battle-game-screen .joyn-bq-difficulty-badge,
#joyn-bq-battle-game-screen .joyn-bq-question-text,
#joyn-bq-battle-game-screen .joyn-bq-answer-number,
#joyn-bq-battle-game-screen .joyn-bq-answer-text,
#joyn-bq-battle-game-screen .joyn-bq-input,
#joyn-bq-battle-game-screen .joyn-bq-ox-btn {
  font-family:var(--jbq-font-ui);
}
#joyn-bq-battle-round-screen .joyn-bq-explanation {
  font-family:var(--jbq-font-ui);
}
#joyn-bq-battle-lb-screen .joyn-bq-leaderboard-rank {
  font-family:var(--jbq-font-ui);
}

/* === BATTLE — MATCHING === */
.joyn-bq-battle-search-card { background:var(--jbq-mid); border:1px solid rgba(232,98,122,0.3); border-radius:var(--jbq-r-lg); padding:22px; text-align:center; }
.joyn-bq-battle-online-badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; padding:4px 12px; border-radius:100px; background:var(--jbq-rose-pale); border:1px solid rgba(232,98,122,0.3); color:var(--jbq-rose); margin-bottom:16px; }
.joyn-bq-battle-vs-row { display:flex; align-items:center; justify-content:center; gap:16px; margin:16px 0; }
.joyn-bq-battle-player-card { flex:1; background:var(--jbq-surface); border:1px solid var(--jbq-border); border-radius:var(--jbq-r-lg); padding:18px 12px; text-align:center; }
.joyn-bq-battle-player-card.me-card  { border-color:rgba(78,205,196,0.4); }
.joyn-bq-battle-player-card.opp-card { border-color:rgba(232,98,122,0.2); }
.joyn-bq-battle-avatar { font-size:36px; display:block; margin-bottom:8px; }
.joyn-bq-battle-nick   { font-size:13px; font-weight:700; margin-bottom:4px; color:var(--jbq-text); }
.joyn-bq-battle-tier-badge { display:inline-flex; align-items:center; gap:4px; font-size:10px; padding:2px 9px; border-radius:100px; border:1px solid; margin-bottom:3px; }
.joyn-bq-tier-me  { border-color:rgba(78,205,196,0.4); color:var(--jbq-jade); }
.joyn-bq-tier-opp { border-color:rgba(232,98,122,0.3); color:var(--jbq-rose); }
.joyn-bq-battle-rp { font-size:12px; font-weight:700; font-family:var(--jbq-font-ui); color:var(--jbq-gold); }
.joyn-bq-battle-search-spinner { width:48px; height:48px; border-radius:50%; border:3px solid rgba(232,98,122,0.2); border-top-color:var(--jbq-rose); animation:jbqSpin 0.9s linear infinite; margin:0 auto 9px; }
.joyn-bq-battle-searching-label { font-size:11px; color:var(--jbq-muted); animation:jbqBlink 1.5s ease infinite; }
@keyframes jbqBlink { 0%,100%{opacity:.4} 50%{opacity:1} }
.joyn-bq-vs-divider { font-family:var(--jbq-font-ui); font-size:21px; font-weight:900; color:var(--jbq-rose); filter:drop-shadow(0 0 9px rgba(232,98,122,0.5)); flex-shrink:0; animation:jbqVsPulse 1.5s ease-in-out infinite; }
@keyframes jbqVsPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.18)} }

/* === BATTLE — COUNTDOWN === */
.joyn-bq-battle-countdown { text-align:center; padding:18px 0 26px; }
.joyn-bq-battle-cd-num { font-family:var(--jbq-font-ui); font-size:96px; font-weight:900; line-height:1; animation:jbqCountPop 0.45s cubic-bezier(0.23,1,0.32,1); background:linear-gradient(135deg,var(--jbq-rose),var(--jbq-gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
@keyframes jbqCountPop { from{transform:scale(0.4);opacity:0} to{transform:scale(1);opacity:1} }
.joyn-bq-battle-cd-label { font-size:11px; color:var(--jbq-muted); letter-spacing:0.2em; font-family:var(--jbq-font-ui); }

/* === BATTLE — GAME HUD === */
.joyn-bq-battle-hud { display:grid; grid-template-columns:1fr auto 1fr; background:var(--jbq-surface); border:1px solid var(--jbq-border); border-radius:var(--jbq-r); margin-bottom:11px; overflow:hidden; }
.joyn-bq-bh-me,.joyn-bq-bh-opp { padding:10px 13px; }
.joyn-bq-bh-me  { border-right:1px solid var(--jbq-border); }
.joyn-bq-bh-opp { border-left:1px solid var(--jbq-border); text-align:right; }
.joyn-bq-bh-label { font-size:8px; color:var(--jbq-muted); letter-spacing:0.1em; font-family:var(--jbq-font-ui); margin-bottom:2px; }
.joyn-bq-bh-name  { font-size:11px; font-weight:700; margin-bottom:2px; color:var(--jbq-text); }
.joyn-bq-bh-score { font-size:21px; font-weight:900; }
.joyn-bq-bh-score.me-score  { color:var(--jbq-jade); }
.joyn-bq-bh-score.opp-score { color:var(--jbq-rose); }
.joyn-bq-bh-center { padding:9px 13px; text-align:center; }
.joyn-bq-bh-timer { font-family:var(--jbq-font-ui); font-size:21px; font-weight:900; color:var(--jbq-gold); line-height:1; }
.joyn-bq-bh-timer.urgent { color:var(--jbq-rose); animation:jbqTimerUrge 0.5s ease infinite; }
@keyframes jbqTimerUrge { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
.joyn-bq-bh-tlabel { font-size:8px; color:var(--jbq-muted); }
.joyn-bq-opp-status { display:flex; align-items:center; justify-content:flex-end; gap:5px; font-size:10px; color:var(--jbq-muted); margin-top:11px; padding-top:10px; border-top:1px solid var(--jbq-border); }
.joyn-bq-opp-dot { width:6px; height:6px; border-radius:50%; background:var(--jbq-dim); flex-shrink:0; }
.joyn-bq-opp-dot.thinking { background:var(--jbq-gold); animation:jbqDotPulse 0.8s ease infinite; }
.joyn-bq-opp-dot.done { background:var(--jbq-jade); }

/* === BATTLE — ROUND RESULT === */
.joyn-bq-round-result-card { background:var(--jbq-mid); border:1px solid var(--jbq-border); border-radius:var(--jbq-r-lg); padding:22px; margin-bottom:11px; position:relative; overflow:hidden; }
.joyn-bq-round-result-card::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--jbq-gold),transparent); }
.joyn-bq-round-header { font-family:var(--jbq-font-ui); font-size:11px; letter-spacing:0.15em; color:var(--jbq-gold); margin-bottom:14px; text-align:center; }
.joyn-bq-round-compare { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:14px; }
.joyn-bq-round-player { background:var(--jbq-surface); border-radius:var(--jbq-r); padding:13px; }
.joyn-bq-rp-label  { font-size:9px; color:var(--jbq-muted); margin-bottom:5px; font-family:var(--jbq-font-ui); letter-spacing:0.07em; }
.joyn-bq-rp-answer { font-size:13px; font-weight:700; margin-bottom:3px; display:flex; align-items:center; gap:5px; color:var(--jbq-text); }
.joyn-bq-rp-pts    { font-size:16px; font-weight:900; color:var(--jbq-jade); }
.joyn-bq-rp-pts.zero { color:var(--jbq-rose); }
.joyn-bq-rp-speed  { font-size:10px; color:var(--jbq-muted); }
.joyn-bq-round-score-bar { display:flex; align-items:center; gap:10px; background:var(--jbq-surface); border-radius:var(--jbq-r); padding:10px 13px; }
.joyn-bq-rsb-label { font-size:9px; color:var(--jbq-muted); font-family:var(--jbq-font-ui); flex-shrink:0; }
.joyn-bq-rsb-me    { font-size:16px; font-weight:900; color:var(--jbq-jade); flex:1; text-align:center; }
.joyn-bq-rsb-sep   { color:var(--jbq-dim); font-size:12px; }
.joyn-bq-rsb-opp   { font-size:16px; font-weight:900; color:var(--jbq-rose); flex:1; text-align:center; }

/* === BATTLE — FINAL === */
.joyn-bq-battle-final { border-radius:var(--jbq-r-lg); padding:36px 24px; text-align:center; position:relative; overflow:hidden; }
.joyn-bq-battle-final.win  { background:var(--jbq-mid); border:1px solid rgba(212,175,80,0.4); }
.joyn-bq-battle-final.lose { background:var(--jbq-mid); border:1px solid rgba(232,98,122,0.25); }
.joyn-bq-battle-final.win::before  { content:""; position:absolute; top:0;left:0;right:0; height:3px; background:linear-gradient(90deg,var(--jbq-jade),var(--jbq-gold),var(--jbq-jade)); }
.joyn-bq-battle-final.lose::before { content:""; position:absolute; top:0;left:0;right:0; height:3px; background:linear-gradient(90deg,var(--jbq-rose),rgba(232,98,122,.3),var(--jbq-rose)); }
.joyn-bq-bf-icon  { font-size:64px; display:block; margin-bottom:11px; animation:jbqTrophySpin 0.8s cubic-bezier(0.23,1,0.32,1); }
.joyn-bq-bf-title { font-family:var(--jbq-font-ui); font-size:24px; font-weight:900; margin-bottom:5px; letter-spacing:0.05em; }
.joyn-bq-bf-title.win  { color:var(--jbq-gold); }
.joyn-bq-bf-title.lose { color:var(--jbq-rose); }
.joyn-bq-bf-msg   { font-size:12px; color:var(--jbq-muted); margin-bottom:22px; line-height:1.6; }
.joyn-bq-bf-score-compare { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:18px; background:var(--jbq-surface); border-radius:var(--jbq-r); padding:15px; }
.joyn-bq-bsc-side { text-align:center; }
.joyn-bq-bsc-name { font-size:10px; color:var(--jbq-muted); margin-bottom:3px; font-family:var(--jbq-font-ui); letter-spacing:0.05em; }
.joyn-bq-bsc-num  { font-size:28px; font-weight:900; }
.joyn-bq-bsc-num.win  { color:var(--jbq-jade); }
.joyn-bq-bsc-num.lose { color:var(--jbq-rose); }
.joyn-bq-bsc-vs   { font-family:var(--jbq-font-ui); font-size:13px; color:var(--jbq-dim); }
.joyn-bq-rp-change-box { display:flex; flex-direction:column; align-items:center; background:var(--jbq-gold-pale); border:1px solid rgba(212,175,80,0.3); border-radius:var(--jbq-r); padding:15px; margin-bottom:20px; }
.joyn-bq-rp-change-label  { font-size:9px; color:var(--jbq-muted); font-family:var(--jbq-font-ui); letter-spacing:0.1em; margin-bottom:6px; }
.joyn-bq-rp-change-val    { font-size:24px; font-weight:900; font-family:var(--jbq-font-ui); }
.joyn-bq-rp-change-val.plus  { color:var(--jbq-gold); }
.joyn-bq-rp-change-val.minus { color:var(--jbq-rose); }
.joyn-bq-rp-change-detail { font-size:11px; color:var(--jbq-muted); margin-top:3px; }
.joyn-bq-rp-change-detail span { color:var(--jbq-gold); font-weight:700; }

/* === BATTLE — LEADERBOARD === */
.joyn-bq-battle-lb-heads,.joyn-bq-battle-lb-row { display:grid; grid-template-columns:36px 36px 1fr 68px 82px; gap:5px; }
.joyn-bq-battle-lb-heads { padding:5px 11px; font-size:9px; color:var(--jbq-dim); font-family:var(--jbq-font-ui); letter-spacing:0.07em; }
.joyn-bq-battle-lb-row { align-items:center; padding:8px 11px; border-radius:var(--jbq-r); transition:background 0.2s; margin-bottom:3px; }
.joyn-bq-battle-lb-row:hover { background:var(--jbq-overlay); }
.joyn-bq-battle-lb-row.top-1 { background:rgba(212,175,80,0.08); border:1px solid rgba(212,175,80,0.2); }
.joyn-bq-battle-lb-row.top-2 { background:rgba(200,200,220,0.04); }
.joyn-bq-battle-lb-row.top-3 { background:rgba(205,127,50,0.04); }
.joyn-bq-battle-lb-row.lb-me { background:var(--jbq-jade-pale); border:1px solid rgba(78,205,196,0.2); }
.joyn-bq-blb-rank   { display:flex; align-items:center; justify-content:center; }
.joyn-bq-blb-avatar { display:flex; align-items:center; justify-content:center; font-size:14px; }
.joyn-bq-blb-name   { font-size:12px; font-weight:600; display:flex; align-items:center; gap:4px; color:var(--jbq-text); }
.joyn-bq-blb-rp     { font-size:13px; font-weight:900; color:var(--jbq-rose); text-align:center; }
.joyn-bq-blb-record { font-size:10px; color:var(--jbq-muted); text-align:right; }
.joyn-bq-tier-legend { margin-top:15px; padding:12px; background:var(--jbq-surface); border-radius:var(--jbq-r); border:1px solid var(--jbq-border); }
.joyn-bq-tier-legend-title { font-size:9px; color:var(--jbq-muted); font-family:var(--jbq-font-ui); letter-spacing:0.1em; margin-bottom:8px; }
.joyn-bq-tier-legend-grid { display:flex; flex-wrap:wrap; gap:7px; }
.joyn-bq-tier-item { font-size:10px; color:var(--jbq-muted); }
.joyn-bq-tier-item.me   { color:var(--jbq-jade); }
.joyn-bq-tier-item.high { color:var(--jbq-gold); }

/* === EFFECT OVERLAY LAYERS === */
#joyn-bq-flash-layer { position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:0; transition:opacity 0.08s; }
.joyn-bq-float-text { position:fixed; z-index:9999; pointer-events:none; font-family:var(--jbq-font-display); font-weight:900; animation:jbqFloatUp 1.2s cubic-bezier(0.23,1,0.32,1) forwards; }
@keyframes jbqFloatUp { 0%{opacity:1;transform:translateY(0) scale(1)} 60%{opacity:1;transform:translateY(-55px) scale(1.2)} 100%{opacity:0;transform:translateY(-95px) scale(0.9)} }
.joyn-bq-particle { position:fixed; z-index:9998; pointer-events:none; border-radius:50%; animation:jbqParticleFly var(--dur,1.2s) ease-out forwards; }
@keyframes jbqParticleFly { 0%{opacity:1;transform:translate(0,0) scale(1) rotate(0deg)} 100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(0) rotate(var(--rot))} }
.joyn-bq-ripple { position:fixed; z-index:9997; pointer-events:none; border-radius:50%; transform:scale(0); animation:jbqRippleOut 0.6s ease-out forwards; }
@keyframes jbqRippleOut { to{transform:scale(4);opacity:0} }
.joyn-bq-combo-ring { position:fixed; z-index:9997; pointer-events:none; border-radius:50%; border:2px solid var(--jbq-jade); animation:jbqComboRing 0.8s ease-out forwards; }
@keyframes jbqComboRing { 0%{width:60px;height:60px;margin:-30px 0 0 -30px;opacity:0.8} 100%{width:200px;height:200px;margin:-100px 0 0 -100px;opacity:0;border-width:1px} }
.joyn-bq-lightning { position:fixed; z-index:9999; pointer-events:none; font-size:44px; animation:jbqLightning 0.6s ease forwards; }
@keyframes jbqLightning { 0%{opacity:0;transform:scale(0.5) translateY(18px)} 30%{opacity:1;transform:scale(1.3) translateY(0)} 70%{opacity:1;transform:scale(1) translateY(0)} 100%{opacity:0;transform:scale(0.8) translateY(-28px)} }
#joyn-bq-course-clear { position:fixed; inset:0; z-index:10000; background:rgba(13,12,20,0.92); display:flex; flex-direction:column; align-items:center; justify-content:center; backdrop-filter:blur(18px); opacity:0; pointer-events:none; transition:opacity 0.4s; }
#joyn-bq-course-clear.visible { opacity:1; pointer-events:auto; }
.joyn-bq-course-clear-title { font-family:var(--jbq-font-display); font-size:clamp(26px,5.5vw,44px); font-weight:900; letter-spacing:0.06em; background:linear-gradient(135deg,var(--jbq-jade),var(--jbq-gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:7px; }
.joyn-bq-sound-toggle { position:fixed; bottom:20px; right:20px; z-index:200; width:40px; height:40px; border-radius:50%; background:var(--jbq-surface); border:1px solid var(--jbq-border); color:var(--jbq-gold); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; box-shadow:0 4px 12px rgba(0,0,0,0.3); }
.joyn-bq-sound-toggle:hover { border-color:var(--jbq-gold); }
.joyn-bq-sound-toggle.muted { color:var(--jbq-dim); border-color:var(--jbq-dim); }

/* === RESPONSIVE === */
@media(max-width:520px) {
  .joyn-bq-container{padding:14px 11px 28px}
  .joyn-bq-answers-grid{grid-template-columns:1fr}
  .joyn-bq-result-stats{grid-template-columns:1fr 1fr}
  .joyn-bq-round-compare{grid-template-columns:1fr}
  .joyn-bq-battle-lb-heads,.joyn-bq-battle-lb-row{grid-template-columns:32px 32px 1fr 54px 65px}
  .joyn-bq-game-actions{flex-wrap:nowrap}
  #joyn-bq-submit-btn{order:1;flex:2}
  #joyn-bq-hint-btn{order:2}
  #joyn-bq-skip-btn{order:3}
  .joyn-bq-level-cards{grid-template-columns:repeat(3,1fr)}

  /* 홈(첫 페이지) — 모바일 가독성 */
  #joyn-bq-testament-screen .joyn-bq-header { margin-bottom: 22px; }
  #joyn-bq-testament-screen .joyn-bq-title {
    font-size: clamp(26px, 7.2vw, 34px);
    letter-spacing: 0.06em;
  }
  #joyn-bq-testament-screen .joyn-bq-stats-box { gap: 10px; margin-bottom: 22px; }
  #joyn-bq-testament-screen .joyn-bq-stat {
    padding: 9px 16px;
    gap: 8px;
  }
  #joyn-bq-testament-screen .joyn-bq-testament-cards { gap: 12px; margin-bottom: 12px; }
  #joyn-bq-testament-screen .joyn-bq-testament-card { padding: 22px 16px; }
  #joyn-bq-testament-screen .joyn-bq-testament-icon { font-size: 38px; margin-bottom: 12px; }
  #joyn-bq-testament-screen .joyn-bq-testament-name { margin-bottom: 6px; }
  #joyn-bq-testament-screen .joyn-bq-testament-desc { line-height: 1.55; }
  #joyn-bq-testament-screen .joyn-bq-testament-card[data-testament="random"] {
    padding: 16px 18px;
    gap: 14px;
  }
  #joyn-bq-testament-screen .joyn-bq-testament-card[data-testament="random"] .joyn-bq-testament-icon { font-size: 32px; }
  .joyn-bq-battle-home-card {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 20px 16px;
    gap: 14px;
  }
  .joyn-bq-battle-home-info { text-align: center; }
  .joyn-bq-battle-home-btns {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 8px;
  }
  .joyn-bq-battle-home-icon { font-size: 40px; }
  .joyn-bq-battle-home-title { font-size: 17px; margin-bottom: 5px; }
  .joyn-bq-battle-home-desc { font-size: 13px; }
  .joyn-bq-battle-home-meta { justify-content: center; gap: 8px; margin-top: 9px; }
  .joyn-bq-battle-meta-pill { font-size: 12px; padding: 4px 11px; }
  .joyn-bq-battle-home-btn {
    font-size: 14px;
    padding: 10px 16px;
    white-space: normal;
    text-align: center;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  #joyn-bq-loading { font-size: 15px; }
  #joyn-bq-loading p { font-size: 15px; }
}
@media(max-width:360px){
  .joyn-bq-testament-cards{grid-template-columns:1fr}
  .joyn-bq-level-cards{grid-template-columns:1fr 1fr}
}
::-webkit-scrollbar{width:4px} ::-webkit-scrollbar-track{background:var(--jbq-ink)} ::-webkit-scrollbar-thumb{background:var(--jbq-surface);border-radius:2px}