/* 科二独立命名空间，沿用站点暖白、陶橙、鼠尾草绿。无全局触摸或滚动覆盖。 */
.s2-home-entry { display:flex; gap:14px; align-items:center; padding:18px; width:100%; text-align:left; border:1px solid #d5dfcf; background:#edf1e4; border-radius:20px; color:var(--text); }
.s2-home-entry>span:nth-child(2) { flex:1; } .s2-home-entry b,.s2-home-entry small { display:block; } .s2-home-entry small { color:#697663; margin-top:4px; font-size:12px; }
.s2-entry-icon { font-size:34px; color:#527561; }
.s2-center { max-width:960px; margin:auto; padding:12px 24px calc(38px + var(--safe-bottom)); }
.s2-center-head { display:flex; align-items:center; gap:12px; color:var(--text2); font-size:13px; min-height:48px; padding-top:var(--safe-top); }
.s2-back { border:1px solid var(--line); border-radius:50%; height:42px; width:42px; background:var(--card); color:var(--text); font-size:28px; }
.s2-pill { margin-left:auto; background:#e6ecda; color:#45644e; padding:3px 12px; border-radius:30px; font-size:12px; }
.s2-welcome { display:flex; align-items:center; justify-content:space-between; min-height:182px; }
.s2-eyebrow { color:#708169; font-size:11px; letter-spacing:2px; margin:0 0 9px; font-weight:600; }
.s2-welcome h1 { font-size:36px; letter-spacing:1px; margin:0; line-height:1.3; font-weight:750; }
.s2-welcome h1 span { display:block; font-size:10px; color:#a39b7e; letter-spacing:4px; margin:9px 0; font-weight:500; }
.s2-welcome p:last-child { margin:10px 0; font-size:14px; color:var(--text2); }
.s2-mascot { width:105px; height:160px; } .s2-mascot .miffy-scene { width:100%; height:100%; }
.s2-test-badge { background:#f3ead9; color:#836742; border-radius:10px; padding:8px 12px; font-size:12px; margin-bottom:12px; }
.s2-map-wrap { height:410px; position:relative; overflow:hidden; border-radius:28px; border:1px solid #d3dfc5; box-shadow:0 10px 30px #52644912; background:#dae6cf; }
.s2-map { position:absolute; inset:0; } .s2-map canvas { width:100%; height:100%; display:block; }
.s2-map-title { position:absolute; left:22px; top:20px; color:#46634d; display:flex; flex-direction:column; gap:3px; pointer-events:none; }
.s2-map-title span { font-weight:700; font-size:17px; } .s2-map-title small { font-size:11px; }
.s2-map-pins { position:absolute; inset:0; pointer-events:none; }
.s2-pin { position:absolute; border:1px solid #fffc; border-radius:14px; background:#fff9; backdrop-filter:blur(12px); box-shadow:0 4px 12px #2542251a; color:#314c3c; font-size:12px; font-weight:600; padding:8px 12px; display:flex; align-items:center; gap:8px; pointer-events:auto; }
.s2-pin span { display:grid; place-items:center; background:#527761; color:white; border-radius:50%; width:25px; height:25px; font-size:11px; }
.pin-0 { left:19%; top:32%; } .pin-1 { right:16%; top:38%; } .pin-2 { left:17%; top:66%; } .pin-3 { right:15%; top:73%; }
.s2-map-note { position:absolute; bottom:12px; left:20px; color:#4c664b; font-size:10px; letter-spacing:2px; }
.s2-next { display:flex; justify-content:space-between; align-items:center; gap:15px; margin:22px 0 32px; padding:24px; background:#f0eddb; border-radius:20px; }
.s2-next h2 { margin:4px 0; font-size:22px; } .s2-next p { margin:0; color:#7c796a; font-size:12px; } .s2-next .btn { font-size:14px; white-space:nowrap; }
.s2-section-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:22px 0 14px; }
.s2-section-heading h2 { font-size:18px; margin:0; } .s2-section-heading>span { font-size:12px; color:#7a806d; white-space:nowrap; }
.s2-courses { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.s2-course { display:flex; align-items:center; gap:14px; text-align:left; background:#fffdf6; border:1px solid #e7e2d1; border-radius:18px; padding:20px; color:#323c32; }
.s2-course>div { flex:1; } .s2-course-number { align-self:flex-start; color:#9baa90; font-size:23px; font-weight:300; }
.s2-course b { font-size:16px; display:block; } .s2-course small { display:block; color:#888678; font-size:11px; margin:5px 0 14px; }
.s2-course div>span { font-size:11px; color:#618063; } .s2-course.is-locked { opacity:.6; }
.s2-exam-card { margin:24px 0; padding:26px; border-radius:22px; color:#fff9e9; background:#476c58; position:relative; }
.s2-exam-card h2 { margin:7px 0; font-size:24px; } .s2-exam-card p { font-size:13px; color:#e0e8d1; }
.s2-exam-card .s2-eyebrow { color:#d3ddbd; font-size:11px; } .s2-exam-card .btn { background:#f4e5c3; color:#3c5746; font-size:14px; margin-top:20px; }
.s2-preferences { display:flex; gap:18px; flex-wrap:wrap; font-size:12px; margin:22px 0; color:var(--text2); }
.s2-preferences label { display:flex; gap:8px; align-items:center; } .s2-preferences select { border:1px solid var(--line); background:var(--card); border-radius:10px; min-height:44px; color:var(--text); padding:8px; font-size:14px; }
.s2-preferences input { accent-color:#55765c; width:18px; height:18px; }
.s2-disclaimer { text-align:center; color:#8c887a; font-size:11px; line-height:1.8; margin:22px 0 0; }
.s2-locked,.s2-loading { max-width:500px; margin:auto; min-height:90dvh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:30px; gap:12px; }
.s2-locked .miffy-scene,.s2-loading .miffy-scene { width:100px; height:150px; }
.s2-locked p,.s2-loading p { color:var(--text2); font-size:14px; } .s2-locked h1 { margin:8px 0; }
.s2-unlock { padding:22px; background:#edf3e4; color:#456346; border-radius:20px; animation:s2-unlock 3s ease both; }
@keyframes s2-unlock { 0% { transform:translateY(20px) scale(.92); opacity:0; } 30% { transform:translateY(0) scale(1.025); opacity:1; } 65%,100% { transform:scale(1); } }
.s2-playing { position:fixed; inset:0; z-index:30; }
.s2-game { width:100%; height:100vh; height:100dvh; position:relative; overflow:hidden; background:#dce8d5; color:#2e3e36; user-select:none; -webkit-user-select:none; }
.s2-stage { position:absolute; inset:0; touch-action:none; } .s2-stage canvas { display:block; width:100%; height:100%; touch-action:none; }
.s2-hud { position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:calc(10px + var(--safe-top)) max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left)); background:linear-gradient(#fff9e9ef,#fff9e900); }
.s2-hud-left,.s2-hud-right { display:flex; align-items:center; gap:9px; } .s2-hud-left b { font-size:16px; } .s2-hud-left small { display:block; font-size:10px; color:#60725c; }
.s2-round { height:40px; width:40px; border:1px solid #fff8; border-radius:50%; background:#fff8; color:#345642; font-size:27px; }
.s2-chip { min-height:40px; background:#fff9; border:1px solid #fff9; border-radius:12px; padding:5px 12px; color:#46634d; font-size:12px; }
#s2-clock { font-size:13px; font-variant-numeric:tabular-nums; }
.s2-coach { position:absolute; top:calc(72px + var(--safe-top)); left:50%; transform:translateX(-50%); width:max-content; max-width:min(510px,76%); background:#fffaf0ed; border:1px solid #fff; border-radius:16px; padding:10px 15px; display:flex; gap:10px; align-items:center; font-size:12px; box-shadow:0 4px 20px #30462c12; pointer-events:none; }
.s2-coach-ears { color:#bb763f; font-size:24px; }
.s2-controls { position:absolute; bottom:calc(22px + var(--safe-bottom)); left:max(24px, env(safe-area-inset-left)); right:max(24px, env(safe-area-inset-right)); display:flex; justify-content:space-between; align-items:flex-end; pointer-events:none; }
.s2-steering,.s2-pedals { pointer-events:auto; } .s2-steering { text-align:center; }
.s2-steering-label { font-size:10px; color:#4e654c; margin-bottom:8px; text-shadow:0 1px #fff; }
.s2-wheel { width:174px; height:174px; border-radius:50%; cursor:grab; touch-action:none; position:relative; padding:5px; background:#faf8ea45; border:1px solid #fff7; box-shadow:0 8px 32px #31462926; }
.s2-wheel-face { width:100%; height:100%; position:relative; border:15px solid #314941; border-radius:50%; background:radial-gradient(circle,#59695f33,transparent 70%); box-shadow:inset 0 2px 4px #0003,0 2px 3px #fff6; }
.s2-wheel-face>b { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; width:53px; height:53px; background:#40584d; color:#eee6d1; display:grid; place-items:center; font-size:24px; box-shadow:inset 0 1px 2px #fff6; }
.s2-wheel-marker { position:absolute; width:10px; height:16px; background:#efbc76; top:-16px; left:calc(50% - 5px); border-radius:2px; }
.s2-spoke { position:absolute; top:calc(50% - 5px); left:0; height:10px; width:50%; background:#314941; transform-origin:100% 50%; } .s2-spoke.two { transform:rotate(180deg); } .s2-spoke.three { transform:rotate(-90deg); }
.s2-steering>small { font-size:9px; color:#4e654c; display:block; margin-top:8px; text-shadow:0 1px #fff; }
.s2-pedals { display:flex; gap:14px; align-items:flex-end; }
.s2-gears { display:flex; flex-direction:column; gap:8px; }
.s2-gears button { min-width:62px; min-height:62px; border:1px solid #fffc; border-radius:16px; background:#fff9; color:#4b6553; font-size:23px; font-weight:700; }
.s2-gears button small { display:block; font-weight:400; font-size:9px; } .s2-gears button.selected { background:#416d56; color:#fff8df; box-shadow:0 4px 15px #25492f30; }
.s2-brake { display:flex; flex-direction:column; align-items:center; justify-content:center; width:118px; height:157px; background:linear-gradient(140deg,#f6e6c5,#e0ca9f); border:2px solid #fff8; border-radius:26px; color:#695338; box-shadow:0 7px 0 #ae9470,0 12px 25px #384b292b; touch-action:none; }
.s2-brake span { font-size:29px; opacity:.55; } .s2-brake b { font-size:18px; letter-spacing:3px; } .s2-brake small { font-size:9px; margin-top:7px; }
.s2-brake.pressed { transform:translateY(5px); box-shadow:0 2px 0 #a28962; background:#ccb285; }
.s2-drive-status { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); text-align:center; color:#3e5c49; }
.s2-drive-status b { font-size:27px; font-weight:400; display:block; line-height:1; } .s2-drive-status small { font-size:9px; } .s2-drive-status span { display:block; font-size:11px; margin-top:4px; }
.s2-end { position:absolute; bottom:calc(16px + var(--safe-bottom)); left:50%; transform:translateX(-50%); font-size:10px; background:#fff8; border:0; border-radius:16px; padding:8px 12px; color:#52654b; }
.s2-drive-status { bottom:40px; }
.s2-overlay { position:absolute; inset:0; display:grid; place-items:center; background:#2f413350; backdrop-filter:blur(5px); padding:calc(18px + var(--safe-top)) 18px calc(18px + var(--safe-bottom)); z-index:10; overflow:auto; }
.s2-dialog { background:#fffbef; border:1px solid #fff; border-radius:26px; padding:28px; max-width:440px; width:100%; max-height:100%; overflow:auto; box-shadow:0 20px 70px #26362233; }
.s2-dialog h2 { font-size:25px; margin:4px 0 16px; } .s2-dialog p { color:#71806a; font-size:13px; line-height:1.8; }
.s2-dialog-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; } .s2-dialog-actions .btn { flex:1; font-size:14px; white-space:nowrap; }
.s2-landscape-note { color:#a0865b; font-size:11px; }
.s2-mirror-labels { position:absolute; top:80px; left:14px; right:14px; display:flex; justify-content:space-between; font-size:10px; color:#314937; pointer-events:none; }
.s2-mirror-labels span { background:#fff9; padding:0 8px; border-radius:5px; }
.s2-replay-panel { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:min(680px,100%); max-height:46%; overflow:auto; background:#fffbefef; border:1px solid #fff; border-radius:24px 24px 0 0; padding:20px 24px calc(14px + var(--safe-bottom)); backdrop-filter:blur(16px); }
.s2-replay-title { display:flex; align-items:center; justify-content:space-between; } .s2-replay-title h2 { font-size:20px; margin:0; } .s2-replay-title>b { font-size:32px; color:#5e7d5b; } .s2-replay-title>b small { font-size:12px; }
.s2-replay-panel p { font-size:12px; color:#6b7960; margin:8px 0; } .s2-replay-metrics { display:flex; flex-wrap:wrap; gap:14px; font-size:11px; color:#7f8374; margin:12px 0; } .s2-replay-metrics b { color:#3e5844; }
.s2-replay-slider { display:flex; align-items:center; gap:12px; font-size:10px; color:#6b7960; } .s2-replay-slider input { flex:1; accent-color:#57785c; min-width:60px; height:32px; }
.s2-replay-actions { display:flex; gap:8px; } .s2-replay-actions .btn { flex:1; min-height:43px; font-size:12px; padding:0 10px; } .s2-replay-panel>small { display:block; font-size:9px; color:#8d907f; margin-top:8px; }
.s2-error-list { display:flex; overflow-x:auto; gap:6px; margin:8px 0; } .s2-error-chip { flex:none; font-size:10px; border:1px solid #eedbd0; background:#fbede3; color:#a16343; border-radius:9px; padding:6px; }
.s2-replay-panel.compact { max-height:100px; } .s2-replay-panel.compact>:not(.s2-replay-actions) { display:none; }
.s2-debug { position:absolute; right:5px; top:110px; font-size:9px; background:#000b; color:#b5ffbf; max-height:46%; overflow:auto; pointer-events:none; width:210px; z-index:15; }
.s2-records article { background:var(--card); border:1px solid var(--line); border-radius:18px; margin:12px 0; padding:20px; } .s2-records h2 { font-size:18px; margin:0; } .s2-records small { color:var(--text2); font-size:11px; }
@media(max-width:600px) {
 .s2-center { padding-left:18px; padding-right:18px; } .s2-welcome { min-height:160px; } .s2-welcome h1 { font-size:30px; } .s2-map-wrap { height:330px; }
 .s2-mascot { width:86px; height:136px; } .s2-map-title { left:15px; top:15px; } .s2-map-title span { font-size:14px; }
 .s2-pin { font-size:10px; padding:5px 8px; gap:5px; } .s2-pin span { width:20px; height:20px; font-size:9px; }
 .pin-0 { left:10%; top:35%; } .pin-1 { right:7%; top:40%; } .pin-2 { left:7%; top:65%; } .pin-3 { right:5%; top:72%; }
 .s2-next { padding:18px; } .s2-next h2 { font-size:19px; } .s2-next .btn { font-size:12px; padding:0 12px; }
 .s2-courses { grid-template-columns:1fr; } .s2-course { padding:18px; } .s2-course small { margin:3px 0 7px; }
 .s2-section-heading h2 { font-size:16px; } .s2-hud-left b { font-size:13px; } .s2-hud-right { gap:5px; } .s2-hud { padding-left:10px; padding-right:10px; }
 .s2-chip { padding:4px 9px; font-size:11px; } .s2-sound-toggle { display:none; } #s2-clock { font-size:11px; } .s2-round { height:36px; width:36px; }
 .s2-controls { left:14px; right:14px; bottom:calc(42px + var(--safe-bottom)); } .s2-wheel { width:148px; height:148px; } .s2-wheel-face { border-width:13px; }
 .s2-pedals { gap:9px; } .s2-gears button { min-height:52px; min-width:45px; border-radius:13px; font-size:20px; } .s2-brake { width:83px; height:131px; border-radius:21px; } .s2-brake small { font-size:7px; }
 .s2-drive-status { bottom:185px; } .s2-drive-status b { font-size:22px; } .s2-coach { max-width:90%; top:calc(68px + var(--safe-top)); font-size:11px; }
 .s2-replay-panel { max-height:42%; padding:15px 18px calc(12px + var(--safe-bottom)); } .s2-replay-title h2 { font-size:17px; }
}
@media(orientation:landscape) and (max-height:540px) {
 .s2-controls { bottom:calc(10px + var(--safe-bottom)); } .s2-wheel { width:140px; height:140px; } .s2-steering-label { display:none; }
 .s2-brake { height:120px; width:96px; } .s2-gears button { min-height:50px; min-width:50px; } .s2-drive-status { bottom:32px; }
 .s2-dialog { max-width:560px; padding:18px 24px; } .s2-dialog p { margin:8px 0; font-size:12px; } .s2-dialog h2 { margin-bottom:6px; font-size:21px; }
 .s2-dialog-actions { margin-top:10px; } .s2-coach { top:calc(62px + var(--safe-top)); max-width:52%; padding:7px 12px; }
 .s2-replay-panel { left:auto; right:0; top:66px; bottom:0; width:330px; max-height:calc(100% - 66px); transform:none; border-radius:20px 0 0 0; }
}
@media(prefers-reduced-motion:reduce) { .s2-unlock { animation:none; } }
.s2-coach-ears { display:block; width:25px; height:38px; flex:none; }
.s2-coach-ears .miffy-scene { width:25px; height:38px; }
@media(max-width:360px) { .s2-controls { left:10px; right:10px; } .s2-wheel { width:135px; height:135px; } .s2-brake { width:76px; } .s2-hud-left b { font-size:12px; } .s2-chip { padding:4px 7px; } }
.s2-stage-tabs { display:flex; gap:6px; overflow-x:auto; margin-bottom:10px; } .s2-stage-tabs button { flex:none; min-height:32px; font-size:10px; padding:4px 8px; background:#e8eddf; }