/* 阅读闯关游戏 · 共用样式（基于 s-class-theme.css 令牌） */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
    font-family: var(--sc-font-body);
    color: var(--sc-gray-900);
    background: linear-gradient(180deg, var(--sc-sky-100) 0%, #fff 60%);
    min-height: 100dvh;
    -webkit-tap-highlight-color: transparent;
}
body.ngr-dark { background: linear-gradient(180deg, #0c4a6e, #082f49); color: #fff; }
#stage { position: relative; max-width: 64rem; margin: 0 auto; padding: 0 1rem 3rem; }
@media (min-width: 640px) { #stage { padding: 0 1.5rem 4rem; } }

/* 贴纸插画（透明 PNG）：尺寸跟随 font-size（1em = 原 emoji 字号），失败时回退 data-emoji */
.ngr-sprite { display: inline-flex; align-items: center; justify-content: center; width: 1.15em; height: 1.15em; line-height: 1; vertical-align: middle; flex-shrink: 0; }
.ngr-sprite img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; -webkit-user-drag: none; }
.ngr-sprite:empty::before { content: attr(data-emoji); font-size: 1em; line-height: 1; }
.ngr-sprite--block { display: flex; margin: 0 auto; }
.ngr-hud-emoji.ngr-sprite { width: 2.6rem; height: 2.6rem; }
.ngr-result-emoji .ngr-sprite { width: 6.5rem; height: 6.5rem; animation: sc-pop 0.5s var(--sc-ease-pop) both; }
.ngr-intro .big .ngr-sprite { width: 7.5rem; height: 7.5rem; filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.15)); }
.ngr-intro .big .ngr-sprite:empty::before { font-size: 4rem; }
.ngr-intro .actions .sc-btn .ngr-sprite { width: 1.5em; height: 1.5em; margin-right: 0.2em; }

/* HUD */
.ngr-hud {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    max-width: 64rem; margin: 1rem auto 0.5rem; padding: 0 1rem;
}
@media (min-width: 640px) { .ngr-hud { padding: 0 1.5rem; } }
.ngr-hud-title { display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 10rem; }
.ngr-hud-emoji { font-size: 2rem; line-height: 1; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.15)); }
.ngr-hud-title b { display: block; font-family: var(--sc-font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.1; }
.ngr-hud-title small { display: block; color: var(--sc-gray-600); font-weight: 600; font-size: 0.82rem; }
body.ngr-dark .ngr-hud-title small { color: #bae6fd; }
.ngr-hud-right { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.ngr-progress { display: flex; align-items: center; gap: 0.75rem; max-width: 64rem; margin: 0 auto 1rem; padding: 0 1rem; }
@media (min-width: 640px) { .ngr-progress { padding: 0 1.5rem; } }
.ngr-progress .sc-progress { flex: 1; }
.ngr-progress-text { font-family: var(--sc-font-display); font-weight: 700; font-size: 0.9rem; min-width: 3.5rem; text-align: right; }

/* 开场卡 */
.ngr-intro { max-width: 40rem; margin: 1rem auto; text-align: center; padding: 2rem 1.5rem; }
.ngr-intro .big { font-size: 4rem; line-height: 1; margin-bottom: 0.5rem; }
.ngr-intro h1 { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0 0 0.5rem; }
.ngr-intro p { color: var(--sc-gray-600); margin: 0 0 1.25rem; line-height: 1.6; }
.ngr-intro .rules { display: grid; gap: 0.5rem; text-align: left; margin: 0 auto 1.5rem; max-width: 26rem; padding: 0; list-style: none; }
.ngr-intro .rules li { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 600; color: var(--sc-gray-700); }
.ngr-intro .rules li::before { content: "✔"; color: #16a34a; font-weight: 900; }
.ngr-intro .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

/* 题卡 */
.ngr-question { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 820px) { .ngr-question.has-img { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.ngr-img { position: relative; overflow: hidden; border: var(--sc-border) solid var(--sc-line); border-radius: var(--sc-radius-lg); box-shadow: var(--sc-shadow); background: #fff; aspect-ratio: 4 / 3; }
.ngr-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ngr-img .ngr-img-tag { position: absolute; left: 0.6rem; top: 0.6rem; }
.ngr-prompt { background: #fff; border: var(--sc-border) solid var(--sc-line); border-radius: var(--sc-radius-lg); box-shadow: var(--sc-shadow); padding: 1.25rem; }
.ngr-prompt .q { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.35; margin: 0 0 0.35rem; }
.ngr-prompt .q-zh { color: var(--sc-gray-600); font-weight: 600; margin: 0 0 1rem; }
.ngr-prompt .q-row { display: flex; align-items: flex-start; gap: 0.6rem; }
.ngr-options { display: grid; gap: 0.7rem; }
.ngr-opt {
    display: flex; align-items: center; gap: 0.8rem; width: 100%; text-align: left;
    min-height: 56px; padding: 0.7rem 1rem; font-family: var(--sc-font-body); font-weight: 700; font-size: 1.05rem; color: var(--sc-gray-900);
    background: #fff; border: var(--sc-border-sm) solid var(--sc-line); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow-sm); cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.ngr-opt:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 #000; background: var(--sc-sky-50); }
.ngr-opt:active { transform: translate(3px, 3px); box-shadow: none; }
.ngr-opt .k { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0; border: 2px solid var(--sc-line); border-radius: 50%; background: var(--sc-yellow); font-family: var(--sc-font-display); font-weight: 700; }
.ngr-opt.good { background: var(--sc-green); animation: sc-pop 0.3s var(--sc-ease-pop); }
.ngr-opt.bad { background: var(--sc-red); animation: sc-shake 0.5s both; }
.ngr-opt[disabled] { cursor: default; opacity: 0.85; transform: none; }
.ngr-opt.dim { opacity: 0.45; }
.ngr-explain { margin-top: 0.9rem; padding: 0.75rem 1rem; border: 2px dashed var(--sc-line); border-radius: var(--sc-radius); background: #fefce8; font-weight: 600; color: var(--sc-gray-700); display: flex; gap: 0.6rem; align-items: flex-start; flex-wrap: wrap; }
.ngr-next { margin-top: 1rem; display: flex; justify-content: flex-end; gap: 0.6rem; }

/* 结算 */
.ngr-overlay { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(17, 24, 39, 0.55); backdrop-filter: blur(4px); overflow: auto; }
.ngr-result { width: min(100%, 34rem); text-align: center; padding: 2rem 1.5rem; }
.ngr-result-emoji { font-size: 4rem; line-height: 1; }
.ngr-stars { font-size: 2.6rem; line-height: 1; margin: 0.4rem 0 0.6rem; letter-spacing: 0.1em; }
.ngr-star { color: #d1d5db; -webkit-text-stroke: 2px #000; }
.ngr-star.on { color: var(--sc-yellow); animation: sc-pop 0.4s var(--sc-ease-pop) both; }
.ngr-star.on:nth-child(2) { animation-delay: 0.15s; }
.ngr-star.on:nth-child(3) { animation-delay: 0.3s; }
.ngr-result-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin: 1.25rem 0; }
.ngr-result-grid > div { background: var(--sc-sky-50); border: 2px solid var(--sc-line); border-radius: var(--sc-radius); padding: 0.6rem 0.25rem; }
.ngr-result-grid b { display: block; font-family: var(--sc-font-display); font-size: 1.3rem; }
.ngr-result-grid span { font-size: 0.75rem; font-weight: 700; color: var(--sc-gray-600); }
.ngr-result-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.ngr-best { margin: 1rem 0 0; font-size: 0.85rem; }
@media (max-width: 480px) { .ngr-result-grid { grid-template-columns: repeat(2, 1fr); } }

/* 彩带 */
.ngr-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 950; overflow: hidden; }
.ngr-confetti i { position: absolute; top: -2vh; width: 10px; height: 16px; border: 2px solid #000; border-radius: 3px; animation: sc-confetti-fall 2.4s linear forwards; }

/* 场景通用 */
.ngr-scene { position: relative; overflow: hidden; border: var(--sc-border) solid var(--sc-line); border-radius: var(--sc-radius-xl); box-shadow: var(--sc-shadow-lg); }
.ngr-hearts { display: inline-flex; gap: 0.2rem; font-size: 1.3rem; }
.ngr-hearts span.off { filter: grayscale(1); opacity: 0.35; }

/* 通用小按钮组 */
.ngr-toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0 0 1rem; }

@media (prefers-reduced-motion: reduce) {
    .ngr-confetti { display: none; }
}