/* 화면 숫자(HUD) — 영상·앱 공통. 숫자는 Fredoka, 한글은 Pretendard. 1920×1080 무대 기준 px. */
:root {
  --ink: #3b3252; --mute: #a69dc0; --line: #cdc5de; --paper: #fffdf9;
  --b10: #b3831f; --b2: #7566c0; --b8: #2b968f; --b16: #2e77c8;
  --t10: #fff4dd; --t2: #f1edff; --t8: #e3f6f3; --t16: #e6f0fc;
  --lv0: #ffa3c4; --lv1: #ffbb8c; --lv2: #ffdc66; --lv3: #8ee0b8; --lv4: #9cc6ff; --lv5: #c4b3ff; --lv6: #eab3ea; --lv7: #a6e1f0;
  --zero: #e8e4f0; --ok: #8fdfb9;
  --num: Fredoka, "Pretendard Variable", Pretendard, sans-serif;
  --kr: "Pretendard Variable", Pretendard, "Malgun Gothic", sans-serif;
}
.hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--num); color: var(--ink); word-break: keep-all; }
.hud .a { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; }
.hud .card { background: linear-gradient(180deg, var(--tint, #fbf8ff), var(--paper) 62%); border-radius: 34px; box-shadow: 0 18px 50px rgba(96, 74, 150, .16), 0 2px 6px rgba(96, 74, 150, .08); }
.hud .tb10 { --tint: var(--t10); } .hud .tb2 { --tint: var(--t2); } .hud .tb8 { --tint: var(--t8); } .hud .tb16 { --tint: var(--t16); }

/* 숫자 + 진법 표시 (11101₍₂₎) — 진법은 숫자의 0.6 크기(잘 보이게), 굵게, 진법 색 알약 */
.hud .n { display: inline-flex; align-items: baseline; font-weight: 600; letter-spacing: .01em; }
.hud .bs { display: inline-block; font-size: .6em; font-weight: 700; margin-left: .12em; padding: .02em .32em .06em; border-radius: .6em; color: #fff; transform: translateY(.3em); line-height: 1.15; }
/* 예전 코드가 인라인으로 적은 옛 기본값(.5em)도 새 기본 크기로. 일부러 작게 하려면 px 로 적는다 */
.hud .bs[style*="font-size:.5em"] { font-size: .6em !important; }
.hud .b10 { background: var(--b10); } .hud .b2 { background: var(--b2); } .hud .b8 { background: var(--b8); } .hud .b16 { background: var(--b16); }
.hud .cb10 { color: var(--b10); } .hud .cb2 { color: var(--b2); } .hud .cb8 { color: var(--b8); } .hud .cb16 { color: var(--b16); }

.hud .chip { display: inline-grid; place-items: center; min-width: 1.3em; height: 1.3em; padding: 0 .24em; box-sizing: border-box; border-radius: .65em; font-weight: 700; line-height: 1; color: var(--ink); box-shadow: inset 0 -.07em 0 rgba(59, 50, 82, .14); }
.hud .lv0 { background: var(--lv0); } .hud .lv1 { background: var(--lv1); } .hud .lv2 { background: var(--lv2); } .hud .lv3 { background: var(--lv3); }
.hud .lv4 { background: var(--lv4); } .hud .lv5 { background: var(--lv5); } .hud .lv6 { background: var(--lv6); } .hud .lv7 { background: var(--lv7); }
/* 값 색 칩(같은 값 = 같은 색, 진법 무관) */
.hud .v1 { background: #ffa3c4; } .hud .v2 { background: #ffbb8c; } .hud .v4 { background: #ffdc66; } .hud .v8 { background: #8ee0b8; }
.hud .v16 { background: #9cc6ff; } .hud .v32 { background: #c4b3ff; } .hud .v64 { background: #eab3ea; } .hud .v128 { background: #a6e1f0; }
.hud .v10 { background: #f4837f; } .hud .v100 { background: #ccd2ff; } .hud .v256 { background: #e8e4f0; } .hud .v4096 { background: #e8e4f0; }
.hud .letter { background: #dceaff; color: #2e4f91; box-shadow: inset 0 0 0 4px #9cc6ff; }
.hud .icon { display: inline-block; vertical-align: middle; margin-right: 6px; }
.hud .zero { background: var(--zero); color: #958dab; } .hud .white { background: #fff; } .hud .okc { background: var(--ok); }
.hud .ring5 { background: #fff; box-shadow: inset 0 0 0 5px var(--lv5); }
.hud .op { color: var(--mute); font-weight: 600; }
.hud .faint { color: #cfc6e6; }

/* 말풍선 */
.hud .bub { display: flex; align-items: center; gap: 10px; padding: 8px 22px; border-radius: 26px; background: #fff; font-size: 46px; font-weight: 700; box-shadow: 0 10px 26px rgba(96, 74, 150, .2); }
.hud .bub::after { content: ""; position: absolute; left: 50%; bottom: -14px; margin-left: -12px; border: 12px solid transparent; border-top-color: #fff; border-bottom: 0; filter: drop-shadow(0 4px 2px rgba(96, 74, 150, .08)); }
.hud .bub.sm { font-size: 34px; padding: 6px 16px; border-radius: 20px; }
.hud .bub svg { width: 1em; height: 1em; }
.hud .bub svg.icon { width: auto; height: auto; }
.hud .bub.below::after { top: -14px; bottom: auto; border-top: 0; border-bottom: 12px solid #fff; }
.hud .v256 { background: #e8c49e; } .hud .v512 { background: #cbe8a8; } .hud .v1024 { background: #b3bdeb; } .hud .v2048 { background: #ead79c; } .hud .v1000 { background: #f7cdbb; }

/* 나눗셈 식 n ÷ d = q ··· r */
.hud .eq { display: flex; align-items: center; gap: 16px; font-size: 62px; font-weight: 600; padding: 8px 36px; }
.hud .eq > * { opacity: 0; }
.hud .eq .q { min-width: 1.15em; text-align: center; border-radius: 18px; padding: 0 10px; }
.hud .eq .q.cnt { color: #b3a6d6; box-shadow: inset 0 0 0 4px #e2dbf5; }
.hud .eq .r { font-size: 54px; display: flex; align-items: center; gap: 8px; }
.hud .board { display: flex; align-items: center; gap: 14px; font-size: 60px; font-weight: 600; padding: 8px 34px; }
.hud .cnum .chip { box-shadow: 0 4px 12px rgba(96,74,150,.2); }

/* 사다리 카드 */
.hud .ladder { width: 392px; }
.hud .lrow { position: absolute; left: 24px; width: 350px; height: 100px; font-size: 56px; font-weight: 600; }
.hud .lrow > span { position: absolute; top: 50%; opacity: 0; }
.hud .lrow .dv { left: 0; width: 38px; text-align: right; color: var(--mute); }
.hud .lrow .br { left: 48px; width: 128px; height: 76px; border-left: 5px solid var(--line); border-bottom: 5px solid var(--line); border-bottom-left-radius: 22px; box-sizing: border-box; }
.hud .lrow .nm { left: 48px; width: 128px; text-align: center; }
.hud .lrow .dots { left: 176px; width: 58px; text-align: center; color: var(--mute); }
/* 자릿값 칩 위의 작은 거듭제곱(2⁵) */
.hud .pwst { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.hud .pw { font: 700 24px/1 var(--num, inherit); color: #4a5468; background: rgba(255, 255, 255, .86); border-radius: 999px; padding: 3px 9px 4px; }
.hud .pw sup { font-size: .68em; margin-left: 1px; vertical-align: .55em; line-height: 0; }
.hud .ladder.d2 .lrow .dv { left: -8px; width: 48px; font-size: 44px; }   /* 나누는 수가 두 자리(10·16) */
.hud .lrow .rm { left: 236px; font-size: 48px; display: flex; align-items: center; gap: 8px; }
.hud .arw { position: absolute; left: 0; top: 0; overflow: visible; }
/* 16진 사다리(lx): 나머지 칸 13(10) → D 가 들어가게 (폭·화살표 x 는 hud.js LX 와 맞춘다) */
.hud .ladder.lx { width: 610px; }
.hud .ladder.lx .lrow { width: 540px; }
.hud .ladder.lx .lrow .br, .hud .ladder.lx .lrow .nm { width: 188px; }
.hud .ladder.lx .lrow .dots { left: 236px; width: 42px; }
.hud .ladder.lx .lrow .rm { left: 280px; gap: 5px; }
.hud .ladder.lx .lrow .rm .bs { margin-left: 0; }

/* 여권 도장 */
.hud .pstamp svg { display: block; overflow: visible; filter: drop-shadow(0 6px 10px rgba(96, 74, 150, .18)); }

/* 덧셈 판 16 + 8 + 4 + 1 = 29 */
.hud .sum { display: flex; align-items: center; gap: 14px; font-size: 60px; font-weight: 600; padding: 8px 34px; }
.hud .sum > * { opacity: 0; }

/* 규칙 카드 (●● → ▣) */
.hud .rule { display: flex; align-items: center; gap: 14px; padding: 14px 22px; font-size: 40px; font-weight: 700; }
.hud .rule svg { display: block; }

/* 챕터 칩 · 간지 */
/* 챕터 칩: 집 모양 차례 번호(세계 색) + 이름. 숏폼(0.56배)에서도 읽히게 30px */
.hud .cchip { display: flex; align-items: center; gap: 12px; padding: 5px 24px 5px 7px; border-radius: 999px; background: rgba(255, 253, 249, .94); box-shadow: 0 6px 18px rgba(96, 74, 150, .16); font: 700 30px/1 var(--kr); letter-spacing: -.01em; }
.hud .cchip svg.no { display: block; flex: none; }
.hud .cchip span[class^="cb"] { font-family: var(--num); font-weight: 700; }
.hud .cchip i { font-style: normal; color: var(--mute); margin: 0 8px; }
.hud .cchip em { font-style: normal; font-weight: 600; }
/* 간지(2.6초): 반투명 종이 + 세계 색 띠(--wc, 가운데서 펼쳐짐) + 지붕(차례 번호) + 진법 알약 제목 + 부제 + 젤리 넷 + 창문 불. 움직임은 main.js titleAnim(t) */
.hud .title { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(255, 253, 249, .9), rgba(255, 253, 249, .74) 62%, rgba(255, 253, 249, .5)); opacity: 0; overflow: hidden; }
.hud .title .in { position: absolute; inset: 0; }
.hud .title .band { position: absolute; left: 0; right: 0; top: 460px; height: 330px; box-sizing: border-box; border-top: 12px solid var(--wc); border-bottom: 12px solid var(--wc);
  background: linear-gradient(180deg, color-mix(in srgb, var(--wc) 15%, #fffdf9), color-mix(in srgb, var(--wc) 6%, #fffdf9)); box-shadow: 0 24px 60px rgba(96, 74, 150, .16); }
.hud .title .nosub .band { height: 290px; }
.hud .title .rf { position: absolute; left: 580px; top: 256px; width: 760px; height: 216px; }
.hud .title .rf .roof { display: block; filter: drop-shadow(0 -2px 0 rgba(255, 255, 255, .4)); }
.hud .title .rf .no { position: absolute; left: 325px; top: 70px; width: 110px; height: 110px; border-radius: 50%; background: #fffdf9; color: var(--wc); display: grid; place-items: center; font: 700 62px/1 var(--num); box-shadow: inset 0 -6px 0 rgba(59, 50, 82, .1); }
.hud .title h1 { position: absolute; left: 0; right: 0; top: 490px; height: 190px; margin: 0; display: flex; align-items: center; justify-content: center; gap: 24px; font: 800 112px/1.1 var(--kr); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.hud .title .nosub h1 { top: 510px; }
.hud .title h1 > span { display: inline-flex; align-items: center; gap: 16px; }
.hud .title .pill { display: inline-grid; place-items: center; min-width: 1.3em; padding: 0 .22em; height: 1.25em; border-radius: .4em; color: #fff; font: 700 1em var(--num); box-shadow: inset 0 -.07em 0 rgba(59, 50, 82, .18); }
.hud .title .dot { font-family: var(--num); color: var(--mute); }
.hud .title .arrow { color: var(--mute); font-family: var(--num); }
.hud .title .tx { font-size: 120px; }
.hud .title .wide h1 { font-size: 88px; gap: 18px; }
.hud .title .sub { position: absolute; left: 0; right: 0; top: 680px; text-align: center; font: 700 60px/1.2 var(--kr); color: var(--ink); text-wrap: balance; }
.hud .title .jel { position: absolute; top: 377px; width: 84px; height: 84px; transform-origin: 50% 100%; }
.hud .title .jel svg { display: block; }
.hud .title .win { position: absolute; top: 587px; width: 76px; height: 76px; border-radius: 20px; background: var(--zero); box-shadow: inset 0 0 0 7px #fffdf9; }
.hud .title .nosub .win { top: 567px; }
.hud .title .win.on { background: #ffd54a; box-shadow: inset 0 0 0 7px #fffdf9, 0 0 40px rgba(255, 213, 74, .85); }

/* 퀴즈 */
.hud .choices { display: flex; gap: 28px; }
.hud .choice { display: flex; align-items: center; justify-content: center; min-width: 200px; padding: 14px 30px; font-size: 60px; font-weight: 700; border-radius: 28px; background: #fffdf9; box-shadow: 0 12px 30px rgba(96, 74, 150, .16), inset 0 0 0 5px #ece6fb; position: relative; }
.hud .choice.right { box-shadow: 0 12px 30px rgba(53, 145, 90, .25), inset 0 0 0 6px #8fdfb9; background: #f1fbf5; }
.hud .choice.wrong { filter: grayscale(.85); opacity: .6; }
.hud .choice .mk { position: absolute; right: -30px; top: -34px; }   /* 오른쪽 아래 진법 알약을 가리지 않게 */
.hud .think { display: flex; align-items: center; gap: 16px; }
/* 틀린 예 */
.hud .mist { position: absolute; inset: 14px; border: 10px solid #ff6f7d; border-radius: 26px; opacity: 0; box-shadow: inset 0 0 0 4000px rgba(120, 110, 140, .18); }
.hud .xstamp { width: 220px; height: 220px; }
.hud .qcard { display: flex; align-items: center; gap: 22px; padding: 14px 34px 14px 18px; font-size: 64px; font-weight: 600; }
.hud .qbadge { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: #ffd54a; color: var(--ink); font-size: 60px; font-weight: 700; box-shadow: inset 0 -5px 0 rgba(59, 50, 82, .14); }
.hud .qbox { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5em; height: 1.35em; padding: 0 .25em; border-radius: .36em; border: 4px dashed var(--line); box-sizing: border-box; color: #b5aad3; }
.hud .qbox.on { border: 4px solid #cdebd9; background: #eefaf3; color: var(--ink); }
.hud .hint { display: flex; align-items: center; gap: 18px; padding: 12px 30px 12px 16px; font-size: 52px; font-weight: 600; }
.hud .hint .bulb { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: #fff3c4; }
.hud svg.ok { width: 80px; height: 80px; }   /* ✓ 도장 그림만(앱 말풍선 .say.ok 는 제외) */
.hud .timer { width: 240px; height: 240px; }

/* 정리 카드 */
.hud .recap { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 26px 34px; font-size: 52px; font-weight: 600; }

.hud .wipe { position: absolute; inset: 0; pointer-events: none; }

/* 자막 = 동물의 숲 느낌 대화창(video/dialog.js). 크림색 둥근 창 + 두툼한 부드러운 테두리 + 이름표 알약 + 통통 ▼. 글꼴 Jua(둥근 한글) 44px */
.hud .dlg { min-width: 520px; max-width: 1060px; box-sizing: border-box; padding: 40px 70px 44px; border-radius: 70px / 64px; white-space: normal;
  background: linear-gradient(180deg, var(--paper), var(--t10)); color: var(--ink); text-align: center;
  box-shadow: inset 0 0 0 8px color-mix(in srgb, var(--b10) 20%, var(--paper)), inset 0 -10px 0 8px color-mix(in srgb, var(--b10) 10%, var(--paper)), 0 18px 44px rgba(96, 74, 150, .22), 0 3px 8px rgba(96, 74, 150, .1); }
.hud .dlg .tx { font: 400 44px/1.38 Jua, var(--kr); letter-spacing: .01em; word-break: keep-all; text-wrap: balance; }
.hud .dlg .w { white-space: nowrap; }
.hud .dlg i { display: inline-block; font-style: normal; }
.hud .dlg .n { font-family: var(--num); font-weight: 600; }
.hud .dlg .qbox { min-width: 1.2em; height: 1.15em; border-width: 3px; }
.hud .dlg .who { position: absolute; left: 50px; top: -30px; padding: 9px 28px 11px; border-radius: 999px; background: var(--b2); color: #fff; font: 400 32px/1 Jua, var(--kr); transform: rotate(-4deg); box-shadow: 0 5px 0 rgba(59, 50, 82, .14); }
.hud .dlg .who.hana { background: #e0628f; }
.hud .dlg .nx { position: absolute; left: 50%; bottom: 8px; margin-left: -17px; opacity: 0; }
.hud .dlg .nx svg { display: block; }

/* 편 오프닝·마무리(video/episode_scenes.js) — 간지·정리 카드와 같은 결 */
.hud .title .rf .no.ep { font: 400 50px/1 Jua, var(--kr); }
.hud .epc .pl { display: inline-grid; place-items: center; min-width: 1.3em; padding: 0 .2em; height: 1.2em; border-radius: .4em; color: #fff; font: 700 1em/1 var(--num); box-shadow: inset 0 -.07em 0 rgba(59, 50, 82, .18); }
.hud .epc .dt, .hud .epc .ar { font-family: var(--num); color: var(--mute); margin: 0 .22em; }
.hud .epc.tag { padding: 14px 44px 16px; border-radius: 999px; color: #fff; font: 400 52px/1 Jua, var(--kr); box-shadow: 0 6px 0 rgba(59, 50, 82, .14); }
.hud .epc.recap { display: grid; grid-template-columns: auto auto auto; column-gap: 40px; row-gap: 24px; align-items: center; padding: 46px 64px 44px; font: 800 46px/1.2 var(--kr); letter-spacing: -.01em; white-space: nowrap; }
.hud .epc.recap .row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
.hud .epc.recap .sd { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.hud .epc.recap .ex { font-size: 44px; padding: 6px 22px; border-radius: 22px; background: rgba(255, 253, 249, .9); box-shadow: inset 0 0 0 3px var(--line); }
.hud .epc.recap .jl { position: absolute; right: 64px; top: -62px; display: flex; gap: 8px; }
.hud .epc.recap .jl > span { display: block; }
.hud .epc.next { display: flex; align-items: center; gap: 22px; padding: 20px 44px 20px 22px; font: 800 46px/1.2 var(--kr); white-space: nowrap; }
.hud .epc.next .nt { padding: 10px 26px 12px; border-radius: 999px; background: #e0628f; color: #fff; font: 400 36px/1 Jua, var(--kr); }
.hud .epc.next .nn { font: 400 46px/1 Jua, var(--kr); }
.hud .epc.next .ti { display: inline-flex; align-items: center; gap: 6px; }
.hud .epc.next .q { margin-left: 26px; font: 600 50px/1 var(--num); white-space: pre; }
.hud .epc .qbox { vertical-align: middle; }
.hud .epc.head { font: 800 64px/1.2 var(--kr); letter-spacing: -.02em; }
.hud .epc.lab { font: 400 44px/1 Jua, var(--kr); }
.hud .epc.link { padding: 18px 44px; font: 800 46px/1.2 var(--kr); }
.hud .epc.link b { font: 700 48px/1 var(--num); color: var(--b2); margin-left: 14px; }
.hud .epc.link .x { display: inline-block; margin-left: 14px; padding: 6px 20px 8px; border-radius: 18px; background: var(--t2); color: var(--ink); box-shadow: inset 0 0 0 3px var(--line); }
/* 자리 칸(7판 placeCells) */
.hud .pcs { display: inline-flex; align-items: stretch; vertical-align: middle; }
.hud .pc { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px 12px; border-radius: 22px;
  border: 3px solid var(--pcc); background: color-mix(in srgb, var(--pcc) 16%, #fffdf9); }
.hud .pc .pcl { font: 700 22px/1 var(--kr); color: #6b6185; letter-spacing: -.01em; white-space: nowrap; }
.hud .pc .pb { display: inline-flex; align-items: center; gap: 10px; }
/* 7판 편 틀: 인트로·아웃트로 시리즈 제목 · 오늘 배울 것 · 정리(칸) · 다음 편(칸) */
.hud .epc.stl { text-align: center; }
.hud .epc.stl .stt { font-family: Jua, var(--kr); line-height: 1.1; letter-spacing: .02em; white-space: nowrap;
  text-shadow: 0 6px 0 #fffdf9, 0 -6px 0 #fffdf9, 6px 0 0 #fffdf9, -6px 0 0 #fffdf9, 4px 4px 0 #fffdf9, -4px 4px 0 #fffdf9, 4px -4px 0 #fffdf9, -4px -4px 0 #fffdf9, 0 16px 30px rgba(96, 74, 150, .25); }
.hud .epc.stl .ch, .hud .epc.bye .ch { display: inline-block; transform-origin: 50% 90%; }
.hud .epc.stl .sp, .hud .epc.bye .sp { display: inline-block; width: .3em; }
.hud .epc.stl .stp { display: flex; gap: 16px; justify-content: center; margin-top: 18px; font-size: 52px; }
.hud .epc.stl .stp .pl { min-width: 1.5em; height: 1.3em; box-shadow: 0 6px 14px rgba(96, 74, 150, .2); }
.hud .epc.epno { padding: 14px 40px 16px; border-radius: 999px; background: #7566c0; color: #fff; font: 400 70px/1 Jua, var(--kr); box-shadow: 0 7px 0 rgba(59, 50, 82, .16); rotate: -6deg; }
.hud .epc.bye { font: 400 118px/1.1 Jua, var(--kr); color: #3b3252; white-space: nowrap;
  text-shadow: 0 6px 0 #fffdf9, 0 -6px 0 #fffdf9, 6px 0 0 #fffdf9, -6px 0 0 #fffdf9, 0 14px 28px rgba(96, 74, 150, .22); }
.hud .epc.goals { display: flex; flex-direction: column; gap: 18px; padding: 38px 60px 46px; font: 800 48px/1.2 var(--kr); letter-spacing: -.01em; white-space: nowrap; }
.hud .epc.goals .gh { font: 400 58px/1 Jua, var(--kr); color: #7566c0; text-align: center; margin-bottom: 6px; }
.hud .epc.goals .g { display: flex; align-items: center; gap: 24px; padding: 14px 34px 14px 16px; border-radius: 28px; background: rgba(255, 253, 249, .95); box-shadow: inset 0 0 0 3px var(--line); }
.hud .epc .gn { display: inline-grid; place-items: center; flex: none; width: 1.4em; height: 1.4em; border-radius: 50%; color: #fff; font: 400 40px/1 Jua, var(--kr); box-shadow: inset 0 -4px 0 rgba(59, 50, 82, .16); }
.hud .epc .gb, .hud .epc .sd { display: inline-flex; align-items: center; gap: 6px; }
.hud .epc .gt { padding: 8px 22px 10px; border-radius: 16px; background: #7566c0; color: #fff; font: 400 40px/1 Jua, var(--kr); }
.hud .epc.recap2 { display: grid; grid-template-columns: repeat(5, auto); column-gap: 24px; row-gap: 16px; align-items: center; padding: 36px 44px 40px; font: 800 38px/1.2 var(--kr); letter-spacing: -.01em; white-space: nowrap; }
.hud .epc.recap2 .row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; padding: 10px 18px 10px 12px; border-radius: 26px; background: rgba(255, 253, 249, .78); box-shadow: inset 0 0 0 3px var(--line); }
.hud .epc.recap2 .gn { font-size: 34px; }
.hud .epc.recap2 .cs { display: inline-flex; gap: 10px; }
.hud .epc.recap2 .c { padding: 7px 18px 9px; border-radius: 16px; background: #f4f0fb; box-shadow: inset 0 0 0 2px #e1d9ef; }
.hud .epc.recap2 .ex { padding: 7px 20px 9px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 3px #d9cff0; }
.hud .epc.recap2 .ok svg { display: block; }
.hud .epc.recap2 .jl { position: absolute; right: 54px; top: -62px; display: flex; gap: 8px; }
.hud .epc.recap2 .jl > span { display: block; }
.hud .epc.next .seg { display: inline-flex; align-items: center; gap: 6px; padding-left: 24px; border-left: 3px solid var(--line); }
.hud .epc.next .seg.q { margin-left: 0; }
.hud .epc.next b { font: 700 48px/1 var(--num); color: var(--b2); margin-left: 12px; }