/* 물병 세우기 — 표준 인간능력 게임 패널(히어로 → .quiz_doc → #bf-wrap 100% → .answer_shadow 가이드 → 랭킹). 헬릭스 점프(#hx-*) 패널과 같은 뼈대. */
#bf-wrap { width:100%; margin:0 auto; box-sizing:border-box; }
#bf-game {
    position:relative; width:100%; box-sizing:border-box; padding:12px 12px 14px; border-radius:22px; overflow:hidden;
    color:#e2e8f0; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; text-align:left;
    background:radial-gradient(circle at 50% 0%, rgba(253,230,138,.16), transparent 55%), linear-gradient(170deg,#1d2238,#0d1122 70%);
    border:1px solid #313a5c; box-shadow:0 16px 44px rgba(8,12,32,.4);
}
#bf-game * { box-sizing:border-box; }
#bf-game button { font:inherit; cursor:pointer; touch-action:manipulation; }
#bf-game button:focus-visible { outline:3px solid #38e1ff; outline-offset:3px; }
.bf-topbar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.bf-hud { display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.bf-pill { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:62px; padding:5px 10px; border-radius:12px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); }
.bf-pill small { font-size:10px; letter-spacing:.1em; color:#94a3b8; font-weight:800; line-height:1.1; }
.bf-pill strong { font-size:17px; font-weight:900; line-height:1.2; font-variant-numeric:tabular-nums; color:#fff; white-space:nowrap; }
.bf-pill strong small { font-size:11px; letter-spacing:0; color:#64748b; font-weight:800; }
#bf-score { color:#38e1ff; }
#bf-spare.on { color:#86efac; text-shadow:0 0 10px rgba(134,239,172,.6); }
#bf-chain { color:#94a3b8; } #bf-chain.hot { color:#ffb347; text-shadow:0 0 10px rgba(255,179,71,.55); } #bf-chain.fever { color:#ff6a1a; text-shadow:0 0 12px rgba(255,106,26,.7); animation:bf-pulse .5s ease-in-out infinite; }
@keyframes bf-pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.12); } }
#bf-best { color:#fde68a; }
.bf-tools { display:flex; gap:6px; flex-shrink:0; }
.bf-tbtn { width:38px; height:38px; border-radius:12px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.08); color:#fff; font-size:1.05rem; display:flex; align-items:center; justify-content:center; transition:transform .1s, opacity .15s, background .15s; }
.bf-tbtn:hover { background:rgba(255,255,255,.16); } .bf-tbtn:active { transform:scale(.92); } .bf-tbtn.off { opacity:.5; }
#bf-board { position:relative; display:flex; justify-content:center; align-items:center; width:100%; }
#bf-canvas { display:block; touch-action:none; border-radius:14px; box-shadow:0 14px 34px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08); cursor:pointer; }
#bf-wrap.bf-charging #bf-canvas { cursor:grabbing; }
.bf-banner {
    position:absolute; z-index:4; left:50%; top:10px; transform:translateX(-50%); width:max-content; max-width:calc(100% - 20px);
    padding:7px 14px; border-radius:12px; text-align:center; pointer-events:none;
    background:rgba(12,16,38,.86); border:1px solid rgba(255,255,255,.14); font-size:13px; font-weight:600; color:#e2e8f0; box-shadow:0 8px 20px rgba(0,0,0,.3); line-height:1.4;
    animation:bf-drop .35s cubic-bezier(.16,1,.3,1);
}
.bf-banner b { margin-right:6px; color:#38e1ff; } .bf-banner.warn b { color:#ff5c6c; }
@keyframes bf-drop { from { transform:translate(-50%,-14px); opacity:0; } to { transform:translate(-50%,0); opacity:1; } }
.bf-hint { margin-top:10px; text-align:center; font-size:12.5px; color:#94a3b8; line-height:1.5; min-height:19px; }
.bf-ctrl { display:flex; gap:10px; margin-top:10px; }
.bf-hold {
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:64px; border-radius:15px;
    color:#38e1ff; background:rgba(56,225,255,.07); border:1px solid rgba(56,225,255,.4); user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:none !important;
    transition:background .12s, color .12s, box-shadow .12s;
}
.bf-hold > span { font-size:22px; font-weight:900; line-height:1; } .bf-hold small { font-size:11px; color:#7fb6c9; font-weight:700; }
.bf-hold:disabled { opacity:.45; cursor:default; }
.bf-hold.bf-held { background:#38e1ff; color:#05263a; box-shadow:0 0 28px rgba(56,225,255,.35); } .bf-hold.bf-held small { color:#0b4a63; }
.bf-hold > span { letter-spacing:-.02em; font-size:18px !important; }
.bf-screen {
    position:absolute; inset:0; z-index:8; display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:26px 22px; text-align:center; background:linear-gradient(160deg,rgba(21,27,64,.82),rgba(12,16,38,.9)); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); border-radius:14px;
}
.bf-screen h2 { margin:0 0 8px; font-size:1.7rem; font-weight:900; color:#fff; word-break:keep-all; letter-spacing:-.02em; }
.bf-screen p { max-width:440px; margin:0 0 16px; color:#dbe3f5; line-height:1.65; font-size:.95rem; word-break:keep-all; }
.bf-screen p b { color:#38e1ff; }
.bf-eyebrow { font-size:12px; letter-spacing:.14em; color:#fde68a; font-weight:800; margin-bottom:8px; }
.bf-title { font-size:46px; line-height:1; font-weight:900; color:#fff; letter-spacing:-.05em; margin:0; text-shadow:0 0 26px rgba(56,225,255,.35); }
.bf-title span { display:block; font-size:11px; letter-spacing:.3em; color:#38e1ff; margin-top:10px; font-weight:700; }
.bf-deco { display:flex; gap:10px; margin:14px 0 12px; font-size:22px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.bf-btns { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.bf-btn { min-width:180px; padding:13px 22px; border:0; border-radius:14px; color:#05263a; background:linear-gradient(125deg,#bdf4ff,#38bdf8); font-size:15px; font-weight:900; box-shadow:0 8px 22px rgba(56,225,255,.3), inset 0 1px #fff8; transition:transform .15s, filter .15s; }
.bf-btn:hover { filter:brightness(1.06); transform:translateY(-1px); } .bf-btn:active { transform:translateY(1px); }
.bf-btn.bf-btn-ghost { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.2); box-shadow:none; }
.bf-btn small { display:block; font-size:11px; font-weight:700; opacity:.75; margin-top:2px; }
.bf-best-line { margin-top:14px; font-size:12px; color:#a9b4cc; font-weight:700; min-height:1em; }
.bf-ricon { font-size:3.2rem; line-height:1; margin-bottom:8px; filter:drop-shadow(0 8px 14px rgba(0,0,0,.4)); }
.bf-rscore { margin:2px 0; font-size:3.6rem; line-height:1; font-weight:900; color:#38e1ff; text-shadow:0 0 22px rgba(56,225,255,.3); }
.bf-rscore small { font-size:1.1rem; color:#a9b4cc; }
.bf-grade { margin:6px 0 6px; font-size:1.25rem; font-weight:900; color:#fff; }
.bf-best { display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px; background:#f43f5e; color:#fff; font-size:.7rem; vertical-align:middle; }
.bf-detail { color:#a9b4cc !important; font-size:.82rem !important; font-weight:700; }
.bf-guide { text-align:left; line-height:1.7; margin-top:16px; }
.bf-guide h3 { margin:0 0 6px; font-size:1rem; font-weight:900; }
.bf-guide p { margin:0 0 6px; font-size:.9rem; }
.bf-guide ul { margin:4px 0 8px 18px; padding:0; font-size:.88rem; }
.bf-guide li { margin:2px 0; }
.bf-guide small { display:block; font-size:.8rem; color:#64748b; }
.quiz_doc.bf-intro { font-size:14px; line-height:1.8; text-align:left; margin:0 0 18px; }
/* 전체화면 (표준 + iOS Safari CSS 폴백) */
#bf-wrap:fullscreen, #bf-wrap:-webkit-full-screen, #bf-wrap.bf-pseudo-fs {
    background:#0c1026; width:100vw; height:100vh; max-width:100vw; max-height:100vh; margin:0 !important; padding:8px; box-sizing:border-box;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
}
#bf-wrap.bf-pseudo-fs { position:fixed !important; inset:0 !important; z-index:99999 !important; }
body.bf-pseudo-fs-active { overflow:hidden !important; }
body.bf-pseudo-fs-active #bf-wrap.bf-pseudo-fs { height:100dvh !important; }
#bf-wrap.bf-in-fs #bf-game { width:100%; max-height:100%; border-radius:16px; }
@media (prefers-reduced-motion:reduce) { .bf-btn, .bf-banner { transition:none; animation:none; } #bf-chain.fever { animation:none; } }
@media (max-width:600px) {
    #bf-game { padding:10px 8px 12px; border-radius:16px; }
    .bf-hud { gap:4px; } .bf-pill { min-width:46px; padding:4px 7px; border-radius:10px; } .bf-pill small { font-size:9px; letter-spacing:.04em; } .bf-pill strong { font-size:14px; } .bf-pill strong small { font-size:9px; }
    .bf-tools { gap:4px; } .bf-tbtn { width:32px; height:32px; font-size:.9rem; border-radius:10px; }
    .bf-banner { top:8px; font-size:12px; padding:6px 11px; }
    .bf-title { font-size:40px; } .bf-screen h2 { font-size:1.45rem; } .bf-screen p { font-size:.9rem; } .bf-screen { padding:18px 14px; }
    .bf-rscore { font-size:3rem; } .bf-btn { min-width:150px; padding:12px 18px; font-size:14px; }
    .bf-hint { font-size:12px; } .bf-hold { min-height:60px; } .bf-hold > span { font-size:20px; }
}
/* 물병 세우기 전용 */
.bf-intro b { color:#0e7490; }
.bf-guide ul li b { color:#0e7490; }