/* 헬릭스 점프 — 표준 인간능력 게임 패널(히어로 → .quiz_doc → #hx-wrap 100% → .answer_shadow 가이드 → 랭킹). 네온 도킹(#nd-*) 패널과 같은 뼈대. */
#hx-wrap { width:100%; margin:0 auto; box-sizing:border-box; }
#hx-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(99,199,255,.18), transparent 55%), linear-gradient(170deg,#1b2140,#0c1026 70%);
    border:1px solid #2c3560; box-shadow:0 16px 44px rgba(8,12,32,.4);
}
#hx-game * { box-sizing:border-box; }
#hx-game button { font:inherit; cursor:pointer; touch-action:manipulation; }
#hx-game button:focus-visible { outline:3px solid #ffd23f; outline-offset:3px; }
.hx-topbar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.hx-hud { display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.hx-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); }
.hx-pill small { font-size:10px; letter-spacing:.1em; color:#94a3b8; font-weight:800; line-height:1.1; }
.hx-pill strong { font-size:17px; font-weight:900; line-height:1.2; font-variant-numeric:tabular-nums; color:#fff; white-space:nowrap; }
.hx-pill strong small { font-size:11px; letter-spacing:0; color:#64748b; font-weight:800; }
#hx-floor { color:#ffd23f; }
#hx-combo { color:#94a3b8; } #hx-combo.hot { color:#ffb347; text-shadow:0 0 10px rgba(255,179,71,.55); } #hx-combo.fever { color:#ff6a1a; text-shadow:0 0 12px rgba(255,106,26,.7); animation:hx-pulse .5s ease-in-out infinite; }
@keyframes hx-pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.12); } }
#hx-level { color:#7ee8fa; }
.hx-tools { display:flex; gap:6px; flex-shrink:0; }
.hx-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; }
.hx-tbtn:hover { background:rgba(255,255,255,.16); } .hx-tbtn:active { transform:scale(.92); } .hx-tbtn.off { opacity:.5; }
#hx-board { position:relative; display:flex; justify-content:center; align-items:center; width:100%; }
#hx-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:grab; }
#hx-wrap.hx-drag #hx-canvas { cursor:grabbing; }
.hx-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:hx-drop .35s cubic-bezier(.16,1,.3,1);
}
.hx-banner b { margin-right:6px; color:#ffd23f; } .hx-banner.warn b { color:#ff5c6c; }
@keyframes hx-drop { from { transform:translate(-50%,-14px); opacity:0; } to { transform:translate(-50%,0); opacity:1; } }
.hx-hint { margin-top:10px; text-align:center; font-size:12.5px; color:#94a3b8; line-height:1.5; min-height:19px; }
.hx-ctrl { display:flex; gap:10px; margin-top:10px; }
.hx-hold {
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:64px; border-radius:15px;
    color:#ffd23f; background:rgba(255,210,63,.07); border:1px solid rgba(255,210,63,.4); user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:none !important;
    transition:background .12s, color .12s, box-shadow .12s;
}
.hx-hold > span { font-size:22px; font-weight:900; line-height:1; } .hx-hold small { font-size:11px; color:#b8a86b; font-weight:700; }
.hx-hold:disabled { opacity:.45; cursor:default; }
.hx-hold.hx-held { background:#ffd23f; color:#2a2200; box-shadow:0 0 28px rgba(255,210,63,.35); } .hx-hold.hx-held small { color:#6b5a16; }
.hx-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;
}
.hx-screen h2 { margin:0 0 8px; font-size:1.7rem; font-weight:900; color:#fff; word-break:keep-all; letter-spacing:-.02em; }
.hx-screen p { max-width:440px; margin:0 0 16px; color:#dbe3f5; line-height:1.65; font-size:.95rem; word-break:keep-all; }
.hx-screen p b { color:#ffd23f; }
.hx-eyebrow { font-size:12px; letter-spacing:.14em; color:#7ee8fa; font-weight:800; margin-bottom:8px; }
.hx-title { font-size:46px; line-height:1; font-weight:900; color:#fff; letter-spacing:-.05em; margin:0; text-shadow:0 0 26px rgba(255,210,63,.35); }
.hx-title span { display:block; font-size:11px; letter-spacing:.3em; color:#ffd23f; margin-top:10px; font-weight:700; }
.hx-deco { display:flex; gap:10px; margin:14px 0 12px; font-size:22px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.hx-btns { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.hx-btn { min-width:180px; padding:13px 22px; border:0; border-radius:14px; color:#2a2200; background:linear-gradient(125deg,#ffe58a,#ffd23f); font-size:15px; font-weight:900; box-shadow:0 8px 22px rgba(255,210,63,.3), inset 0 1px #fff8; transition:transform .15s, filter .15s; }
.hx-btn:hover { filter:brightness(1.06); transform:translateY(-1px); } .hx-btn:active { transform:translateY(1px); }
.hx-btn.hx-btn-ghost { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.2); box-shadow:none; }
.hx-btn small { display:block; font-size:11px; font-weight:700; opacity:.75; margin-top:2px; }
.hx-best-line { margin-top:14px; font-size:12px; color:#a9b4cc; font-weight:700; min-height:1em; }
.hx-ricon { font-size:3.2rem; line-height:1; margin-bottom:8px; filter:drop-shadow(0 8px 14px rgba(0,0,0,.4)); }
.hx-rscore { margin:2px 0; font-size:3.6rem; line-height:1; font-weight:900; color:#ffd23f; text-shadow:0 0 22px rgba(255,210,63,.3); }
.hx-rscore small { font-size:1.1rem; color:#a9b4cc; }
.hx-grade { margin:6px 0 6px; font-size:1.25rem; font-weight:900; color:#fff; }
.hx-best { display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px; background:#f43f5e; color:#fff; font-size:.7rem; vertical-align:middle; }
.hx-detail { color:#a9b4cc !important; font-size:.82rem !important; font-weight:700; }
.hx-guide { text-align:left; line-height:1.7; margin-top:16px; }
.hx-guide h3 { margin:0 0 6px; font-size:1rem; font-weight:900; }
.hx-guide p { margin:0 0 6px; font-size:.9rem; }
.hx-guide ul { margin:4px 0 8px 18px; padding:0; font-size:.88rem; }
.hx-guide li { margin:2px 0; }
.hx-guide small { display:block; font-size:.8rem; color:#64748b; }
.quiz_doc.hx-intro { font-size:14px; line-height:1.8; text-align:left; margin:0 0 18px; }
/* 전체화면 (표준 + iOS Safari CSS 폴백) */
#hx-wrap:fullscreen, #hx-wrap:-webkit-full-screen, #hx-wrap.hx-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;
}
#hx-wrap.hx-pseudo-fs { position:fixed !important; inset:0 !important; z-index:99999 !important; }
body.hx-pseudo-fs-active { overflow:hidden !important; }
body.hx-pseudo-fs-active #hx-wrap.hx-pseudo-fs { height:100dvh !important; }
#hx-wrap.hx-in-fs #hx-game { width:100%; max-height:100%; border-radius:16px; }
@media (prefers-reduced-motion:reduce) { .hx-btn, .hx-banner { transition:none; animation:none; } #hx-combo.fever { animation:none; } }
@media (max-width:600px) {
    #hx-game { padding:10px 8px 12px; border-radius:16px; }
    .hx-hud { gap:4px; } .hx-pill { min-width:46px; padding:4px 7px; border-radius:10px; } .hx-pill small { font-size:9px; letter-spacing:.04em; } .hx-pill strong { font-size:14px; } .hx-pill strong small { font-size:9px; }
    .hx-tools { gap:4px; } .hx-tbtn { width:32px; height:32px; font-size:.9rem; border-radius:10px; }
    .hx-banner { top:8px; font-size:12px; padding:6px 11px; }
    .hx-title { font-size:40px; } .hx-screen h2 { font-size:1.45rem; } .hx-screen p { font-size:.9rem; } .hx-screen { padding:18px 14px; }
    .hx-rscore { font-size:3rem; } .hx-btn { min-width:150px; padding:12px 18px; font-size:14px; }
    .hx-hint { font-size:12px; } .hx-hold { min-height:60px; } .hx-hold > span { font-size:20px; }
}