/* 연습하기(시뮬레이터) — 연습 페이지에서만 불러온다. 색은 사이트 변수(site.css) 그대로 */
/* 틀: 시작 안내(.sim-intro) → 연습 틀(.sim-frame). 연습 틀은 고정 머리글(64px) 아래 브라우저 높이에 딱 맞춤.
   배치는 JS 가 고름 — side(무대 | 오른쪽 할 일 패널) · stack(할 일 / 무대 / 결과 문구) · flow(휴대폰: 높이 고정 없이 흐름) */
.sim { margin:4px 0 40px; --stage:radial-gradient(900px 420px at 12% 0%, #DCE6FF 0%, transparent 62%), radial-gradient(800px 420px at 100% 100%, #D9F3EA 0%, transparent 58%), #EEF2F8; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .sim { --stage:radial-gradient(900px 420px at 12% 0%, rgba(91,140,255,.2) 0%, transparent 62%), radial-gradient(800px 420px at 100% 100%, rgba(56,217,169,.12) 0%, transparent 58%), #0F141C; } }
:root[data-theme="dark"] .sim { --stage:radial-gradient(900px 420px at 12% 0%, rgba(91,140,255,.2) 0%, transparent 62%), radial-gradient(800px 420px at 100% 100%, rgba(56,217,169,.12) 0%, transparent 58%), #0F141C; }
.sim [hidden] { display:none !important; }
.sim-k { margin:0; font-size:13px; font-weight:700; color:var(--brand-ink); }
/* 시작 안내 */
.sim-intro { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:36px; align-items:center; padding:28px; border:1px solid var(--line); border-radius:24px; background:var(--surface); box-shadow:var(--sh-2); }
.sim-thumb { position:relative; display:flex; align-items:center; justify-content:center; min-height:300px; padding:28px; border:0; border-radius:16px; background:var(--stage); cursor:pointer; overflow:hidden; }
.sim-thumb img { display:block; max-width:100%; max-height:340px; box-shadow:0 18px 40px -18px rgba(20,30,60,.45), 0 0 0 1px rgba(0,0,0,.08); transition:transform .25s; }
.sim-thumb:hover img { transform:scale(1.02); }
.sim-play { position:absolute; width:68px; height:68px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding-left:5px; box-sizing:border-box;
  background:var(--brand); color:#fff; font-size:24px; box-shadow:0 12px 28px -8px rgba(51,102,255,.7), 0 0 0 8px rgba(255,255,255,.55); transition:transform .2s; }
.sim-thumb:hover .sim-play { transform:scale(1.08); }
.sim-intro-txt h2 { margin:8px 0 16px; font-size:26px; letter-spacing:-.03em; line-height:1.3; }
.sim-facts { list-style:none; margin:0 0 18px; padding:0; display:grid; gap:10px; }
.sim-facts li { position:relative; padding-left:26px; font-size:15.5px; color:var(--ink-2); }
.sim-facts li::before { content:'✓'; position:absolute; left:0; top:2px; width:18px; height:18px; border-radius:50%; background:var(--brand-soft); color:var(--brand); font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.sim-facts b { color:var(--ink); }
.sim-intro .sim-best { margin:0 0 18px; color:var(--muted); font-size:15px; line-height:1.9; } .sim-intro .sim-best b { color:var(--mint); }
.sim-go { height:52px; padding:0 28px; font-size:16.5px; }
/* 연습 틀 */
.sim-frame { display:flex; flex-direction:column; height:calc(100vh - 89px); height:calc(100svh - 89px); min-height:520px; scroll-margin-top:77px;
  border:1px solid var(--line); border-radius:20px; background:var(--surface); overflow:hidden; box-shadow:var(--sh-2); }
.sim.flow .sim-frame { height:auto; min-height:0; }
.sim-head { flex:0 0 auto; display:flex; align-items:center; gap:14px; padding:9px 14px; border-bottom:1px solid var(--line); background:var(--surface); }
.sim-exit { flex:0 0 auto; border:0; background:none; color:var(--muted); font:inherit; font-size:14px; font-weight:600; padding:6px 10px; border-radius:8px; cursor:pointer; }
.sim-exit:hover { background:var(--bg-soft); color:var(--ink); }
.sim-name { flex:0 0 auto; font-size:15px; letter-spacing:-.01em; white-space:nowrap; }
.sim-prog { flex:1; min-width:0; display:flex; align-items:center; gap:5px; margin:0 6px; }
.sim-prog span { flex:1; height:6px; border-radius:3px; background:var(--line); transition:background .3s; }
.sim-prog span.ok { background:var(--mint); }
.sim-prog span.on { background:var(--brand); }
.sim-prog em { font-style:normal; font-size:13px; color:var(--muted); margin-left:6px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.sim-score { flex:0 0 auto; display:inline-flex; align-items:baseline; gap:5px; padding:5px 14px; border-radius:999px; background:var(--brand-soft); color:var(--brand-ink); font-variant-numeric:tabular-nums; }
.sim-score small { font-size:12.5px; font-weight:600; } .sim-score b { font-size:17px; }
.sim-body { flex:1 1 auto; min-height:0; display:grid; }
.sim-stage { position:relative; display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; padding:24px; background:var(--stage); overflow:hidden; }
.sim-panel { display:flex; flex-direction:column; gap:14px; min-height:0; padding:22px 20px 18px; overflow:auto; }
.sim-mission { display:flex; flex-direction:column; gap:6px; }
.sim-title { margin:0; font-size:21px; letter-spacing:-.02em; line-height:1.35; }
.sim-task { margin:0; color:var(--ink-2); font-size:15.5px; line-height:1.65; }
.sim-foot { display:flex; flex-direction:column; gap:10px; margin-top:auto; }
.sim-fb { padding:12px 14px; border-radius:12px; font-size:15px; line-height:1.6; background:var(--bg-soft); color:var(--muted); }
/* side: 무대 | 할 일 패널 */
.sim.side .sim-body { grid-template-columns:minmax(0,1fr) 340px; }
.sim.side .sim-panel { border-left:1px solid var(--line); }
.sim.side .sim-foot { flex:1 0 auto; margin-top:4px; } .sim.side .sim-bar { margin-top:auto; } .sim.side .sim-bar .btn:first-child { flex:1; }
/* stack · flow: 할 일(+안내 카드) / 무대 / 선택지 / 결과 문구·버튼 */
.sim.stack .sim-panel, .sim.flow .sim-panel { display:contents; }
.sim.stack .sim-body { grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto minmax(0,1fr) auto auto;
  grid-template-areas:"mission card" "stage stage" "choices choices" "foot foot"; }
.sim.stack .sim-stage { grid-area:stage; } .sim.stack .sim-mission { grid-area:mission; } .sim.stack .sim-card { grid-area:card; } .sim.stack .sim-choices { grid-area:choices; } .sim.stack .sim-foot { grid-area:foot; }
.sim.stack .sim-mission { padding:12px 20px; gap:4px; } .sim.stack .sim-stage { padding:16px; }
.sim.stack .sim-card { margin:0; padding:10px 16px 10px 0; max-width:560px; align-self:center; }
.sim.stack .sim-note-card { padding:10px 14px; font-size:14px; } .sim.stack .sim-note-card dl { margin:6px 0 2px; gap:2px 14px; } .sim.stack .sim-note-card p { margin:2px 0 0; }
.sim.stack .sim-choices { margin:0; padding:12px 20px 0; }
.sim.stack .sim-foot { flex-direction:row; align-items:center; gap:12px; margin:0; padding:8px 16px; border-top:1px solid var(--line); }
/* stack 에선 결과 문구 높이가 바뀌면 무대(=캡처 창)가 매번 줄었다 늘어나므로 3줄 높이로 고정 */
.sim.stack .sim-fb { flex:1; min-width:0; height:calc(1.5em * 3 + 14px); box-sizing:border-box; padding:7px 14px; font-size:14.5px; line-height:1.5; overflow:auto; }
.sim.stack .sim-bar { flex:0 0 auto; flex-wrap:nowrap; }
.sim.flow .sim-body { display:flex; flex-direction:column; }
.sim.flow .sim-mission { order:1; padding:16px 16px 12px; } .sim.flow .sim-card { order:2; margin:0; padding:0 16px 12px; }
.sim.flow .sim-stage { order:3; padding:14px 10px; } .sim.flow .sim-choices { order:4; padding:12px 16px 0; } .sim.flow .sim-foot { order:5; padding:12px 16px 16px; margin:0; }
/* 결과 화면: 틀 안에서 스크롤 */
.sim.done .sim-stage, .sim.done .sim-panel { display:none !important; }
.sim.done .sim-body { display:flex; flex-direction:column; overflow:auto; } .sim.done .sim-result { margin:auto; }
@media (max-width:900px) { .sim-intro { grid-template-columns:minmax(0,1fr); gap:22px; padding:18px; } .sim-thumb { min-height:0; padding:20px; } }
@media (max-width:760px) { .sim-name { display:none; } .sim-head { gap:8px; padding:8px 10px; } .sim-exit { padding:6px; } }
/* 캡처가 창 테두리째라 둥글게 자르면 모서리가 끊겨 보임 — 각진 채로 (누를 영역 좌표가 그림 크기 기준이라 여백도 두지 않음) */
.sim-win { position:relative; flex:0 0 auto; width:100%; margin:0; border-radius:0; overflow:hidden; box-shadow:0 18px 40px -18px rgba(20,30,60,.35), 0 0 0 1px var(--line);
  background:#f0f0f0; user-select:none; -webkit-user-select:none; }
.sim-win > img { display:block; width:100%; height:100%; image-rendering:auto; }
.sim-layer { position:absolute; inset:0; }
.sim-spr { position:absolute; pointer-events:none; image-rendering:pixelated; }
.sim-hot { position:absolute; padding:0; margin:0; border:0; background:transparent; cursor:pointer; border-radius:4px; -webkit-tap-highlight-color:transparent; }
.sim-hot:hover { background:rgba(51,102,255,.08); }
.sim-hot:focus-visible { outline:2px solid var(--brand); outline-offset:1px; }
.sim-hot.hl { box-shadow:0 0 0 3px var(--amber); animation:simpulse 1.2s ease-in-out infinite; }
@keyframes simpulse { 50% { box-shadow:0 0 0 6px rgba(232,137,11,.35); } }
/* 설치 중 막대: 캡처의 진행 막대(1배 x24~474, y123~141) 위를 덮고 다시 채움 */
.sim-installbar { position:absolute; left:4.81%; width:90.18%; top:29.57%; height:4.57%; background:#e6e6e6; border:1px solid #bcbcbc; box-sizing:border-box; overflow:hidden; }
.sim-installbar i { display:block; height:100%; width:0; background:#0f7b0f; animation:simfill 2.1s linear forwards; }
@keyframes simfill { to { width:100%; } }
.sim-fb:empty::before { content:'화면 속 버튼과 체크 상자를 직접 눌러 보세요.'; }
.sim-fb.info { background:var(--brand-soft); color:var(--ink); }
.sim-fb.warn { background:var(--amber-soft); color:var(--ink); }
.sim-fb.hint { background:var(--amber-soft); color:var(--ink); }
.sim-fb.bad { background:var(--red-soft); color:var(--ink); }
.sim-fb.good { background:var(--mint-soft); color:var(--ink); }
.sim-fb.bad em { font-style:normal; color:var(--red); font-weight:700; }
.sim-fb a { font-weight:700; }
.sim-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sim-bar .btn { height:42px; padding:0 16px; font-size:15px; }
.sim-bar .btn small { color:var(--muted); font-weight:500; }
/* 결과 화면 (④): 점수 고리 · 배지 · 기록 · 틀린 곳 · 다음 연습 · 내 배지 모음 */
.sim-result { width:100%; max-width:760px; box-sizing:border-box; margin:0 auto; padding:36px 24px 32px; text-align:center; }
.sim-res-top { display:flex; align-items:center; justify-content:center; gap:36px; text-align:left; }
.sim-ring { position:relative; flex:0 0 176px; width:176px; height:176px; }
.sim-ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.sim-ring circle { fill:none; stroke-width:11; }
.sim-ring .bg { stroke:var(--line); }
.sim-ring .fg { stroke:var(--brand); stroke-linecap:round; transition:stroke-dashoffset 1s cubic-bezier(.3,.7,.3,1); }
.sim-ring .fg.gold { stroke:#F2B705; } .sim-ring .fg.silver { stroke:var(--brand); } .sim-ring .fg.bronze { stroke:#D9822B; } .sim-ring .fg.low { stroke:var(--red); }
.sim-ring > div { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.sim-ring b { font-size:54px; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.sim-ring small { font-size:14px; color:var(--muted); margin-top:4px; }
.sim-res-txt { min-width:0; max-width:400px; }
.sim-tier { display:inline-flex; align-items:center; gap:8px; margin:0 0 8px; padding:6px 16px 6px 8px; border-radius:999px; font-size:19px; font-weight:800; letter-spacing:-.02em;
  animation:simtier .5s .75s cubic-bezier(.2,.9,.3,1.3) both; }
.sim-tier span { font-size:28px; line-height:1; }
.sim-tier.gold { background:#FFF6D6; color:#8A6300; } .sim-tier.silver { background:var(--brand-soft); color:var(--brand-ink); }
.sim-tier.bronze { background:#FDEBD9; color:#9A4E0E; } .sim-tier.none { background:var(--bg-soft); color:var(--ink-2); }
:root[data-theme="dark"] .sim-tier.gold { background:rgba(242,183,5,.16); color:#F7D36A; } :root[data-theme="dark"] .sim-tier.bronze { background:rgba(217,130,43,.16); color:#F0B27A; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .sim-tier.gold { background:rgba(242,183,5,.16); color:#F7D36A; } :root:not([data-theme="light"]) .sim-tier.bronze { background:rgba(217,130,43,.16); color:#F0B27A; } }
@keyframes simtier { from { opacity:0; transform:scale(.6); } to { opacity:1; transform:none; } }
.sim-rec { margin:2px 0 6px; color:var(--mint); font-weight:700; font-size:15px; }
.sim-prev { margin:2px 0 6px; color:var(--muted); font-size:15px; }
.sim-grade { font-size:16.5px; font-weight:700; margin:6px 0 14px; line-height:1.5; }
.sim-stats { list-style:none; display:flex; gap:8px; margin:0; padding:0; }
.sim-stats li { flex:1; display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:12px; background:var(--bg-soft); color:var(--muted); font-size:13px; white-space:nowrap; }
.sim-stats b { color:var(--ink); font-size:17px; font-variant-numeric:tabular-nums; }
.sim-perfect { margin:26px 0 0; color:var(--mint); font-weight:700; }
.sim-result h3 { margin:28px 0 10px; font-size:17px; }
.sim-miss { list-style:none; padding:0; margin:0 auto; text-align:left; }
.sim-miss li { padding:12px 16px; border-radius:12px; background:var(--red-soft); margin-bottom:8px; }
.sim-miss em { font-style:normal; color:var(--red); font-weight:700; margin-left:6px; }
.sim-miss p { margin:4px 0 0; color:var(--ink); font-size:14.5px; line-height:1.55; }
.sim-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
.sim-actions .btn { height:50px; padding:0 24px; font-size:16px; }
.sim-guides { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:12px; }
.sim-guides .btn { height:38px; padding:0 14px; font-size:14px; box-shadow:none; }
.sim-coll { margin-top:30px; padding-top:22px; border-top:1px solid var(--line); }
.sim-coll p { margin:0 0 12px; color:var(--muted); font-size:14.5px; } .sim-coll p b { color:var(--ink); }
.sim-coll > div { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.sim-medal { width:74px; display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--muted); font-size:12.5px; text-decoration:none !important; }
.sim-medal i { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-style:normal; font-size:26px;
  background:var(--bg-soft); border:2px dashed var(--line-2); transition:transform .2s; }
.sim-medal:hover i { transform:translateY(-2px); }
.sim-medal.gold i, .sim-medal.silver i, .sim-medal.bronze i { border-style:solid; background:var(--surface); }
.sim-medal.gold i { border-color:#F2B705; } .sim-medal.silver i { border-color:var(--brand-line); } .sim-medal.bronze i { border-color:#E8B07A; }
.sim-medal.me span { color:var(--ink); font-weight:700; }
.sim-medal.me i { box-shadow:0 0 0 4px var(--brand-soft); }
.sim-chip { display:inline-block; padding:2px 10px; border-radius:999px; font-size:13.5px; font-weight:700; margin-right:4px; }
.sim-chip.gold { background:#FFF6D6; color:#8A6300; } .sim-chip.silver { background:var(--brand-soft); color:var(--brand-ink); } .sim-chip.bronze { background:#FDEBD9; color:#9A4E0E; }
.sim-conf { position:absolute; top:-18px; border-radius:2px; opacity:.95; animation-name:simconf; animation-timing-function:cubic-bezier(.3,.6,.6,1); animation-fill-mode:forwards; }
@keyframes simconf { to { transform:translate(var(--dx), 105vh) rotate(var(--r)); opacity:.85; } }
@media (max-width:640px) {
  .sim-result { padding:26px 16px 24px; }
  .sim-res-top { flex-direction:column; gap:18px; text-align:center; }
  .sim-ring { flex-basis:auto; width:150px; height:150px; } .sim-ring b { font-size:46px; }
  .sim-stats li { padding:8px; }
  .sim-actions .btn { flex:1 1 100%; }
}
.sim-err { padding:20px; background:var(--red-soft); border-radius:12px; }
.sim-note { color:var(--muted); font-size:14px; margin-top:18px; }
/* 입력 칸 (사이트 관리자 등): 캡처 글자 크기에 맞춰 --k 배율로 */
.sim-in { position:absolute; box-sizing:border-box; margin:0; border:1px solid #7a7a7a; border-radius:0; background:#fff; color:#000;
  font:calc(12px * var(--k, 1)) / 1.2 "Malgun Gothic", "Segoe UI", sans-serif; padding:0 calc(3px * var(--k, 1)); outline:none; }
.sim-in:focus { border-color:#0078d7; box-shadow:0 0 0 1px #0078d7 inset; }
select.sim-in { padding:0 calc(2px * var(--k, 1)); cursor:pointer; }
.sim-in.hl { box-shadow:0 0 0 3px var(--amber); animation:simpulse 1.2s ease-in-out infinite; }
/* 오른쪽 클릭 메뉴 (윈도 메뉴 모양) */
.sim-menu { position:absolute; z-index:3; min-width:calc(200px * var(--k, 1)); max-width:60%; padding:calc(3px * var(--k, 1)) 0; background:#f9f9f9; border:1px solid #a0a0a0;
  box-shadow:2px 3px 8px rgba(0,0,0,.25); font:calc(12px * var(--k, 1)) / 1.2 "Malgun Gothic", "Segoe UI", sans-serif; }
.sim-menu button { display:block; width:100%; text-align:left; border:0; background:none; color:#000; font:inherit; padding:calc(4px * var(--k, 1)) calc(18px * var(--k, 1)); cursor:pointer; }
.sim-menu button:hover { background:#cce8ff; }
.sim-menu button.hl { background:#fff1dc; box-shadow:inset 0 0 0 2px var(--amber); }
.sim-menu hr { border:0; border-top:1px solid #d7d7d7; margin:calc(3px * var(--k, 1)) calc(6px * var(--k, 1)); }
.sim-ghost { position:absolute; z-index:4; transform:translate(8px, 8px); pointer-events:none; padding:4px 10px; border-radius:6px; background:rgba(0,120,215,.9); color:#fff; font-size:13px; font-weight:700; white-space:nowrap; }
/* 호스팅 안내문 카드 (업로드 연습) */

.sim-note-card { padding:14px 18px; border-radius:14px; background:var(--surface); border:1px dashed var(--brand-line); font-size:14.5px; }
.sim-note-card small { color:var(--muted); }
.sim-note-card dl { display:grid; grid-template-columns:auto 1fr auto 1fr; gap:4px 14px; margin:10px 0 6px; }
.sim-note-card dt { color:var(--muted); } .sim-note-card dd { margin:0; font-weight:600; }
.sim-note-card p { margin:4px 0 0; color:var(--muted); }
.sim-note-card dl.tasks { grid-template-columns:auto 1fr; } .sim-note-card dl.tasks dt { font-weight:700; color:var(--brand); }
@media (max-width:640px) { .sim-note-card dl { grid-template-columns:auto 1fr; } }
/* 선택지 버튼 (오류 연습 등) · 화면 속 강조 표시 */
.sim-choices { display:flex; flex-direction:column; gap:8px; }
.sim-choices .btn { height:auto; min-height:46px; padding:10px 16px; justify-content:flex-start; text-align:left; white-space:normal; line-height:1.45; font-size:15px; }
.sim-choices .btn.hl { box-shadow:0 0 0 3px var(--amber); }
.sim-mark { position:absolute; pointer-events:none; border:2px solid var(--amber); border-radius:4px; background:rgba(232,137,11,.12); }
/* 연습 목록 */
.plist { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.pcard { display:flex; flex-direction:column; gap:8px; padding:22px; border:1px solid var(--line); border-radius:18px; background:var(--surface); color:var(--ink); }
.pcard:hover { text-decoration:none; border-color:var(--brand-line); box-shadow:0 12px 28px -18px rgba(51,102,255,.5); }
.pcard .pi { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--brand-soft); color:var(--brand); }
.pcard b { font-size:18px; letter-spacing:-.02em; }
.pcard { overflow:hidden; }
/* 목록 카드 썸네일: 연습 화면처럼 연한 바탕 위에 캡처 창 (카드 위쪽을 꽉 채움) */
.pthumb { display:flex; align-items:center; justify-content:center; aspect-ratio:16 / 9; margin:-22px -22px 6px; padding:18px; box-sizing:border-box;
  background:var(--stage, radial-gradient(420px 220px at 12% 0%, #DCE6FF 0%, transparent 62%), radial-gradient(380px 220px at 100% 100%, #D9F3EA 0%, transparent 58%), #EEF2F8);
  border-bottom:1px solid var(--line); overflow:hidden; }
.pthumb img { display:block; max-width:100%; max-height:100%; box-shadow:0 10px 24px -12px rgba(20,30,60,.45), 0 0 0 1px rgba(0,0,0,.08); transition:transform .25s; }
.pcard:hover .pthumb img { transform:scale(1.03); }
:root[data-theme="dark"] .pthumb { background:radial-gradient(420px 220px at 12% 0%, rgba(91,140,255,.2) 0%, transparent 62%), radial-gradient(380px 220px at 100% 100%, rgba(56,217,169,.12) 0%, transparent 58%), #0F141C; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .pthumb { background:radial-gradient(420px 220px at 12% 0%, rgba(91,140,255,.2) 0%, transparent 62%), radial-gradient(380px 220px at 100% 100%, rgba(56,217,169,.12) 0%, transparent 58%), #0F141C; } }
.pcard small { color:var(--muted); font-size:13px; }
@media (max-width:520px) { .sim-title { font-size:19px; } .sim-task { font-size:15px; } }
/* 움직임 효과 (③): 맞음 ✓ · 실수 흔들림 · -점수 떠오름 · 점수 굴러감 · 단계 들어옴 · 진행 칸 차오름 */
.sim-frame { position:relative; }
.sim-fx { position:absolute; inset:0; pointer-events:none; z-index:6; overflow:hidden; }
.sim-ok { position:absolute; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; background:var(--mint); color:#fff; font-size:24px; font-weight:800;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px -6px rgba(12,166,120,.6); animation:simok .9s cubic-bezier(.2,.9,.3,1.2) forwards; }
.sim-ok::after { content:''; position:absolute; inset:0; border-radius:50%; border:3px solid var(--mint); animation:simring .7s ease-out forwards; }
@keyframes simok { 0% { transform:scale(.3); opacity:0; } 25% { transform:scale(1.1); opacity:1; } 45% { transform:scale(1); } 75% { opacity:1; } 100% { transform:scale(.9) translateY(-14px); opacity:0; } }
@keyframes simring { from { transform:scale(1); opacity:.8; } to { transform:scale(2.6); opacity:0; } }
.sim-minus { position:absolute; transform:translate(-50%, -50%); padding:4px 12px; border-radius:999px; background:var(--red); color:#fff; font-size:18px; font-weight:800;
  font-variant-numeric:tabular-nums; white-space:nowrap; box-shadow:0 8px 20px -6px rgba(224,49,49,.55); animation:simminus 1.05s ease-out forwards; }
@keyframes simminus { 0% { opacity:0; transform:translate(-50%, -20%) scale(.6); } 20% { opacity:1; transform:translate(-50%, -80%) scale(1.08); } 70% { opacity:1; } 100% { opacity:0; transform:translate(-50%, -260%) scale(1); } }
.sim-tap { position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; border:2px solid var(--muted); opacity:.5; animation:simtap .5s ease-out forwards; }
@keyframes simtap { from { transform:scale(.4); opacity:.6; } to { transform:scale(1.4); opacity:0; } }
.sim-win.shake { animation:simshake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes simshake { 10%, 90% { transform:translateX(-2px); } 20%, 80% { transform:translateX(4px); } 30%, 50%, 70% { transform:translateX(-8px); } 40%, 60% { transform:translateX(8px); } }
.sim-win.enter, .sim-mission.enter { animation:simenter .32s ease-out; }
@keyframes simenter { from { opacity:.35; transform:translateY(8px); } to { opacity:1; transform:none; } }
.sim-score { transition:background .2s, color .2s; }
.sim-score.down { animation:simdown .6s ease-out; }
@keyframes simdown { 0% { transform:scale(1); } 25% { transform:scale(1.18); background:var(--red-soft); color:var(--red); } 100% { transform:scale(1); } }
.sim-prog span { position:relative; overflow:hidden; }
.sim-prog span.just { background:var(--line); }
.sim-prog span.just::after { content:''; position:absolute; inset:0; background:var(--mint); transform-origin:left; animation:simgrow .5s ease-out forwards; }
@keyframes simgrow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.sim-prog span.on { animation:simon 1.6s ease-in-out infinite; }
@keyframes simon { 50% { opacity:.55; } }
@media (prefers-reduced-motion:reduce) {
  .sim-fx { display:none; }
  .sim-win.shake, .sim-win.enter, .sim-mission.enter, .sim-score.down, .sim-prog span.on, .sim-prog span.just::after { animation:none; }
}