/* 小火箭练搭配 · 游戏样式（由 rocket-game-handoff/game-fragment.html 拆出，2026-09-05 真人男声版）
   选择器由原型的 #star-pilot-mature-voice / #sf-* 改为 .sf-root / .sf-*，同一页可挂多个实例。
   配套脚本：rocket-game.js（window.RocketGame.mount(container, options)）。 */
.sf-root { width:100%; font-family:inherit; }
.sf-root * { box-sizing:border-box; }
.sf-root [hidden] { display:none !important; }
.sf-root .sf-game { position:relative; max-width:736px; margin:auto; overflow:hidden; border-radius:18px; background:#03050b; color:#edf5ff; color-scheme:dark; }
.sf-root button { font:inherit; cursor:pointer; color:inherit; }
.sf-root button:focus-visible { outline:2px solid #89e6ff; outline-offset:3px; }
.sf-root .sf-header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px 4px; font-weight:500; }
.sf-root .sf-tools { display:flex; gap:8px; }
.sf-root .sf-tools button { min-height:44px; padding:6px 10px; border:1px solid #26384e; border-radius:10px; background:#0c1425; font-weight:400; }
.sf-root button:disabled { opacity:.45; cursor:default; }
.sf-root .sf-status { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:10px 18px 0; font-variant-numeric:tabular-nums; color:#b7c7dd; }
/* 这一组词的进度：一条细条 + 一句话（还剩几个 · 共几个）。没有阴影 */
.sf-root .sf-progress { display:flex; align-items:center; gap:10px; padding:8px 18px 0; color:#b7c7dd; font-size:.86em; font-variant-numeric:tabular-nums; }
.sf-root .sf-progress[hidden] { display:none; }
.sf-root .sf-progress-track { flex:1; min-width:60px; height:6px; border-radius:99px; background:#1b2a40; overflow:hidden; }
.sf-root .sf-progress-fill { display:block; width:0; height:100%; border-radius:99px; background:#80f1df; transition:width .3s ease; }
.sf-root .sf-progress-text { flex:none; max-width:70%; text-align:right; }
@media (prefers-reduced-motion:reduce) { .sf-root .sf-progress-fill { transition:none; } }
.sf-root .sf-score { color:#edf5ff; }
.sf-root .sf-health { color:#a1ead4; }
.sf-root .sf-health[data-critical="true"] { color:#ffb99e; }
.sf-root .sf-task { min-height:88px; padding:10px 16px 0; text-align:center; }
.sf-root .sf-prompt { margin:0 0 6px; font-weight:500; color:#edf5ff; overflow-wrap:anywhere; }
.sf-root .sf-hint { color:#a9bcd7; }
/* 接入层：题面重播喇叭。只有当前题带音频时才出现，44px 触控区，别和题面文字挤在一起 */
.sf-root .sf-taskrow { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.sf-root .sf-speak { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; border:1px solid #41637c; border-radius:50%; background:#0b1829; color:#b7f4ff; }
.sf-root .sf-speak:hover { background:#164258; }
.sf-root .sf-speak:active { transform:scale(.94); }
.sf-root .sf-stage { height:clamp(410px,64vw,470px); position:relative; overflow:hidden; touch-action:pan-y; }
/* 接入层：只在飞行中锁定触摸（frame() 按状态切 .sf-live），未开始 / 暂停 / 结束时手指可以照常滑动页面 */
.sf-root .sf-stage.sf-live, .sf-root .sf-stage.sf-live .sf-canvas { touch-action:none; }
.sf-root .sf-canvas { display:block; position:absolute; inset:0; width:100%; height:100%; touch-action:pan-y; cursor:grab; }
.sf-root .sf-canvas:active { cursor:grabbing; }
/* 光门上的两个选项：框跟着字变宽（最少 108、最多 43%：两个框分别在 28% / 72% 处居中，44% 才碰到彼此，43% 留一点缝、也不出边），
   只在空格处折行——原来 overflow-wrap:anywhere + 定宽 108，contemporary 被拆成 contempor / ary（2026-10-07 站主：词放到两行不方便）。
   左右内边距 8；手机上（屏宽 ≤ 420，棋盘 280~380）字号降到 14、内边距 6：360 宽的手机棋盘 316、框最宽 136，
   disproportionately 这种 18 个字母的词也放得下一行；320 宽的老手机再降到 13。break-word 只在一个词比框还宽时才拆 */
.sf-root .sf-label { position:absolute; z-index:2; top:14px; transform:translateX(-50%); width:max-content; min-width:108px; max-width:43%; padding:9px 8px 5px; border:1px solid #41637c; border-radius:10px; background:#0b1829; color:#edf5ff; text-align:center; font-weight:500; touch-action:manipulation; overflow-wrap:break-word; word-break:normal; hyphens:manual; }
@media (max-width:420px) { .sf-root .sf-label { font-size:14px; padding:9px 6px 5px; } }
@media (max-width:340px) { .sf-root .sf-label { font-size:13px; min-width:96px; } }
.sf-root .sf-label::after { content:attr(data-status); display:block; min-height:20px; padding-top:3px; font-weight:400; color:#b7f4ff; }
.sf-root .sf-label[data-aligned="true"] { border-color:#a5ebff; background:#164258; box-shadow:0 0 14px #69d3ed26; }
.sf-root .sf-damage { position:absolute; z-index:3; transform:translate(-50%,-100%); color:#ffcfb2; background:#3b1515e8; padding:5px 10px; border-radius:8px; pointer-events:none; }
.sf-root .sf-throttle { position:absolute; z-index:3; left:14px; bottom:14px; width:80px; min-height:62px; padding:10px 12px; border:1px solid #48768a; border-radius:16px; background:#123144dd; color:#b7f4ff; touch-action:none; user-select:none; -webkit-user-select:none; }
.sf-root .sf-throttle[aria-pressed="true"] { background:#81e9f4; color:#052331; }
.sf-root .sf-energy { display:block; width:100%; height:4px; margin-top:8px; border:0; appearance:none; background:#244a5a; color:#80f1df; }
.sf-root .sf-energy::-webkit-progress-bar { background:#244a5a; }
.sf-root .sf-energy::-webkit-progress-value { background:#80f1df; }
.sf-root .sf-energy::-moz-progress-bar { background:#80f1df; }
.sf-root .sf-start { position:absolute; z-index:3; top:26px; inset-inline:0; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; padding:0 14px; }
.sf-root .sf-preview { min-height:46px; padding:10px 14px; background:#0b1829; border:1px solid #41637c; border-radius:12px; }
.sf-root .sf-credits { padding:0 16px 12px; color:#a9bcd7; }
.sf-root .sf-credits summary { cursor:pointer; padding:8px 0; }
.sf-root .sf-credits p { margin:8px 0 0; }
.sf-root .sf-credits a { color:#b7f4ff; }
.sf-root .sf-launch, .sf-root .sf-replay { min-height:46px; padding:12px 23px; border:0; border-radius:12px; background:#89e6ff; color:#071522; font-weight:500; }
.sf-root .sf-paused { position:absolute; z-index:5; inset:0; display:grid; place-items:center; align-content:center; gap:14px; padding:0 24px; text-align:center; line-height:1.6; background:#03050bf0; }
/* 暂停时两个钮：继续 / 结束这一局（2026-10-21）。结束＝和撞完命一样落地、存档 */
.sf-root .sf-paused-text { margin:0; }
.sf-root .sf-paused-row { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.sf-root .sf-resume, .sf-root .sf-quit { min-height:44px; padding:10px 20px; border-radius:12px; font:inherit; font-weight:500; cursor:pointer; }
.sf-root .sf-resume { border:0; background:#89e6ff; color:#071522; }
.sf-root .sf-quit { border:1px solid #89e6ff99; background:transparent; color:#e6f3ff; }   /* 焦点跑了停下来那句比「已暂停」长：两边留空、居中折行 */
.sf-root .sf-finish { position:relative; z-index:4; margin:12px 16px; min-height:365px; padding:24px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:16px; border:1px solid #273c58; border-radius:16px; background:#0c1425; }
.sf-root .sf-finish h2 { margin:0; font-weight:500; color:#edf5ff; }
.sf-root .sf-finish ul { margin:0; padding-left:18px; display:grid; gap:7px; color:#a9bcd7; }
.sf-root .sf-record { color:#89e6ff; }
.sf-root .sf-stage.sf-complete { height:auto; min-height:410px; }
.sf-root .sf-feedback { position:relative; min-height:48px; padding:10px 16px 16px; color:#a9bcd7; text-align:center; overflow-wrap:anywhere; }
/* 接入层追加：结束面板动作区 + 「返回学习页」链接（mount 传 backHref 时渲染） */
.sf-root .sf-finish-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.sf-root .sf-back { display:inline-flex; align-items:center; min-height:46px; padding:12px 18px; border:1px solid #41637c; border-radius:12px; background:#0b1829; color:#edf5ff; text-decoration:none; font-weight:500; }
.sf-root .sf-back:hover { background:#122238; }