/* 네온 도킹 v2 — 표준 인간능력 게임 패널(히어로 → .quiz_doc → #nd-wrap 100% → .answer_shadow 가이드 → 랭킹). 알까기(#ak-*) 패널과 같은 톤. */
#nd-wrap { width:100%; margin:0 auto; box-sizing:border-box; }
#nd-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(120,170,160,.16), transparent 55%), linear-gradient(170deg,#152430,#0b1520 70%);
    border:1px solid #2b3a48; box-shadow:0 16px 44px rgba(10,20,30,.35);
}
#nd-game * { box-sizing:border-box; }
#nd-game button { font:inherit; cursor:pointer; touch-action:manipulation; }
#nd-game button:focus-visible { outline:3px solid #fde68a; outline-offset:3px; }
.nd-topbar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.nd-hud { display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.nd-pill { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:60px; padding:5px 10px; border-radius:12px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); }
.nd-pill small { font-size:10px; letter-spacing:.1em; color:#94a3b8; font-weight:800; line-height:1.1; }
.nd-pill strong { font-size:17px; font-weight:900; line-height:1.2; font-variant-numeric:tabular-nums; color:#fff; white-space:nowrap; }
.nd-pill strong small { font-size:11px; letter-spacing:0; color:#64748b; font-weight:800; }
#nd-score { color:#fde68a; }
#nd-lives i { font-style:normal; color:#475569; font-size:15px; letter-spacing:1px; transition:color .2s, transform .2s; }
#nd-lives i.on { color:#fb7185; text-shadow:0 0 8px rgba(251,113,133,.6); }
#nd-lives.low i.on { animation:nd-beat .8s ease-in-out infinite; display:inline-block; }
@keyframes nd-beat { 0%,100% { transform:scale(1); } 50% { transform:scale(1.25); } }
#nd-combo { color:#94a3b8; } #nd-combo.hot { color:#fde68a; text-shadow:0 0 10px rgba(253,230,138,.5); }
#nd-drag.drag-low { color:#93c5fd; } #nd-drag.drag-mid { color:#b4f77a; } #nd-drag.drag-high { color:#fdba74; }
.nd-tools { display:flex; gap:6px; flex-shrink:0; }
.nd-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; }
.nd-tbtn:hover { background:rgba(255,255,255,.16); } .nd-tbtn:active { transform:scale(.92); } .nd-tbtn.off { opacity:.5; }
#nd-board { position:relative; display:flex; justify-content:center; align-items:center; width:100%; }
#nd-canvas { display:block; touch-action:none; border-radius:12px; box-shadow:0 14px 34px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.08); cursor:pointer; }
.nd-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(11,21,32,.88); 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:nd-drop .35s cubic-bezier(.16,1,.3,1);
}
.nd-banner b { margin-right:6px; color:#b4f77a; } .nd-banner.warn b { color:#fb7185; }
@keyframes nd-drop { from { transform:translate(-50%,-14px); opacity:0; } to { transform:translate(-50%,0); opacity:1; } }
.nd-card {
    position:absolute; z-index:7; left:50%; top:50%; transform:translate(-50%,-50%) scale(.8); opacity:0; pointer-events:none;
    width:min(300px, calc(100% - 40px)); padding:16px 18px 14px; border-radius:18px; text-align:center;
    background:rgba(11,21,32,.92); border:1px solid rgba(180,247,122,.35); box-shadow:0 18px 40px rgba(0,0,0,.45); backdrop-filter:blur(6px);
    transition:transform .28s cubic-bezier(.16,1,.3,1), opacity .2s;
}
.nd-card.show { transform:translate(-50%,-50%) scale(1); opacity:1; }
.nd-card.perfect { border-color:rgba(253,230,138,.6); box-shadow:0 18px 40px rgba(0,0,0,.45), 0 0 30px rgba(253,230,138,.25); }
.nd-card.fail { border-color:rgba(251,113,133,.5); }
.nd-chead { font-size:1.05rem; font-weight:900; color:#fff; }
.nd-cn { margin:4px 0 2px; font-size:2.3rem; line-height:1; font-weight:900; color:#b4f77a; }
.nd-card.perfect .nd-cn { color:#fde68a; } .nd-card.fail .nd-cn { color:#fb7185; font-size:1.6rem; }
.nd-csub { font-size:.8rem; color:#cbd5e1; font-weight:700; }
.nd-hint { margin-top:10px; text-align:center; font-size:12.5px; color:#94a3b8; line-height:1.5; min-height:19px; }
.nd-thrust {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:68px; width:100%; margin:10px 0 0; border-radius:15px;
    color:#b4f77a; background:rgba(180,247,122,.07); border:1px solid rgba(180,247,122,.4); user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:none !important;
    transition:background .12s, color .12s, box-shadow .12s;
}
.nd-thrust > span { font-size:16px; font-weight:900; } .nd-thrust small { font-size:11px; color:#8caaa5; font-weight:700; }
.nd-thrust:disabled { opacity:.45; cursor:default; }
.nd-thrust.nd-held { background:#b4f77a; color:#122619; box-shadow:0 0 28px rgba(180,247,122,.35); } .nd-thrust.nd-held small { color:#476143; }
.nd-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,36,48,.96),rgba(11,21,32,.98));
}
.nd-screen h2 { margin:0 0 8px; font-size:1.7rem; font-weight:900; color:#fff; word-break:keep-all; letter-spacing:-.02em; }
.nd-screen p { max-width:440px; margin:0 0 16px; color:#cbd5e1; line-height:1.65; font-size:.95rem; word-break:keep-all; }
.nd-screen p b { color:#b4f77a; }
.nd-eyebrow { font-size:12px; letter-spacing:.14em; color:#94a3b8; font-weight:800; margin-bottom:8px; }
.nd-title { font-size:44px; line-height:1; font-weight:900; color:#fff; letter-spacing:-.05em; margin:0; text-shadow:0 0 24px rgba(180,247,122,.35); }
.nd-title span { display:block; font-size:11px; letter-spacing:.3em; color:#b4f77a; margin-top:10px; font-weight:700; }
.nd-deco { display:flex; gap:10px; margin:14px 0 12px; font-size:22px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.nd-btns { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.nd-btn { min-width:180px; padding:13px 22px; border:0; border-radius:14px; color:#122619; background:linear-gradient(125deg,#d9ffb0,#b4f77a); font-size:15px; font-weight:900; box-shadow:0 8px 22px rgba(180,247,122,.3), inset 0 1px #fff8; transition:transform .15s, filter .15s; }
.nd-btn:hover { filter:brightness(1.06); transform:translateY(-1px); } .nd-btn:active { transform:translateY(1px); }
.nd-btn.nd-btn-ghost { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.2); box-shadow:none; }
.nd-btn small { display:block; font-size:11px; font-weight:700; opacity:.75; margin-top:2px; }
.nd-best-line { margin-top:14px; font-size:12px; color:#94a3b8; font-weight:700; min-height:1em; }
.nd-ricon { font-size:3.2rem; line-height:1; margin-bottom:8px; filter:drop-shadow(0 8px 14px rgba(0,0,0,.4)); }
.nd-rscore { margin:2px 0; font-size:3.4rem; line-height:1; font-weight:900; color:#fde68a; text-shadow:0 0 22px rgba(253,230,138,.3); }
.nd-rscore small { font-size:1rem; color:#94a3b8; }
.nd-grade { margin:6px 0 6px; font-size:1.25rem; font-weight:900; color:#fff; }
.nd-best { display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px; background:#f43f5e; color:#fff; font-size:.7rem; vertical-align:middle; }
.nd-detail { color:#94a3b8 !important; font-size:.82rem !important; font-weight:700; }
.nd-guide { text-align:left; line-height:1.7; margin-top:16px; }
.nd-guide h3 { margin:0 0 6px; font-size:1rem; font-weight:900; }
.nd-guide p { margin:0 0 6px; font-size:.9rem; }
.nd-guide ul { margin:4px 0 8px 18px; padding:0; font-size:.88rem; }
.nd-guide li { margin:2px 0; }
.nd-guide small { display:block; font-size:.8rem; color:#64748b; }
.quiz_doc.nd-intro { font-size:14px; line-height:1.8; text-align:left; margin:0 0 18px; }
/* 전체화면 (표준 + iOS Safari CSS 폴백) */
#nd-wrap:fullscreen, #nd-wrap:-webkit-full-screen, #nd-wrap.nd-pseudo-fs {
    background:#0b1118; 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;
}
#nd-wrap.nd-pseudo-fs { position:fixed !important; inset:0 !important; z-index:99999 !important; }
body.nd-pseudo-fs-active { overflow:hidden !important; }
body.nd-pseudo-fs-active #nd-wrap.nd-pseudo-fs { height:100dvh !important; }
#nd-wrap.nd-in-fs #nd-game { width:100%; max-height:100%; border-radius:16px; }
@media (prefers-reduced-motion:reduce) { .nd-card, .nd-btn, .nd-banner { transition:none; animation:none; } #nd-lives.low i.on { animation:none; } }
@media (max-width:600px) {
    #nd-game { padding:10px 8px 12px; border-radius:16px; }
    .nd-hud { gap:4px; } .nd-pill { min-width:44px; padding:4px 6px; border-radius:10px; } .nd-pill small { font-size:9px; letter-spacing:.04em; } .nd-pill strong { font-size:14px; } .nd-pill strong small { font-size:9px; } #nd-lives i { font-size:12px; letter-spacing:0; }
    .nd-tools { gap:4px; } .nd-tbtn { width:32px; height:32px; font-size:.9rem; border-radius:10px; }
    .nd-banner { top:8px; font-size:12px; padding:6px 11px; }
    .nd-title { font-size:38px; } .nd-screen h2 { font-size:1.45rem; } .nd-screen p { font-size:.9rem; } .nd-screen { padding:18px 14px; }
    .nd-rscore { font-size:2.9rem; } .nd-btn { min-width:150px; padding:12px 18px; font-size:14px; }
    .nd-hint { font-size:12px; } .nd-thrust { min-height:62px; } .nd-thrust > span { font-size:15px; }
    .nd-card { padding:14px 14px 12px; } .nd-cn { font-size:2rem; }
}