/* SEFO KIDS : ENERGY RUN — 화면 (어린이클럽 색: 보라 #6244BE · 연보라 #B9A4FF · 노랑 #FFD873/#F5B800 · 크림 #FFFDF6) */
:root {
  --purple: #6244BE; --lilac: #B9A4FF; --yellow: #FFD873; --gold: #F5B800; --cream: #FFFDF6; --ink: #2B1F57; --pink: #FF8FB1; --mint: #5FD6C4;
  --f: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Nanum Gothic", system-ui, sans-serif;
  --sb: env(safe-area-inset-bottom, 0px); --st: env(safe-area-inset-top, 0px); --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #8fd3ff; font-family: var(--f); color: var(--ink); overscroll-behavior: none; }
body { position: fixed; inset: 0; touch-action: none; }
canvas#c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#ui { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hide { display: none !important; }
button { font-family: var(--f); border: 0; cursor: pointer; pointer-events: auto; touch-action: manipulation; color: var(--ink); }
.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }

.scr { position: absolute; inset: 0; display: none; pointer-events: none; z-index: 3; }
.scr.show { display: flex; }
.scr.dim { background: rgba(43, 31, 87, 0.45); }
.panelScr { align-items: center; justify-content: center; padding: calc(14px + var(--st)) 14px calc(14px + var(--sb)); pointer-events: auto; }
.panel { position: relative; width: 100%; max-width: 440px; max-height: 100%; background: var(--cream); border-radius: 30px; padding: 22px 18px 20px; box-shadow: 0 10px 0 rgba(43,31,87,.18), 0 0 0 5px #fff inset; }
.panel.small { max-width: 380px; text-align: center; }
.panel h2 { margin: 6px 0 12px; font-size: 22px; font-weight: 900; text-align: center; color: var(--purple); letter-spacing: -0.5px; }
.back { position: absolute; left: 12px; top: 12px; width: 52px; height: 52px; border-radius: 50%; background: #EDE7FB; font-size: 34px; font-weight: 900; line-height: 46px; color: var(--purple); z-index: 2; }

.big { display: block; width: 100%; min-height: 72px; border-radius: 26px; font-size: 28px; font-weight: 900; letter-spacing: -0.5px; background: var(--yellow); box-shadow: 0 7px 0 var(--gold); margin-top: 14px; }
.big:active, .mid:active, .pbtn:active, .pbtn.on { transform: translateY(4px); filter: brightness(.96); }
.big.go { background: linear-gradient(#FFE38F, #FFD15A); }
#scrTitle .big.go { animation: goBounce .75s ease-in-out infinite alternate; }
@keyframes goBounce { from { transform: scale(1); } to { transform: scale(1.045); } }
.mid { flex: 1; min-height: 58px; border-radius: 20px; font-size: 18px; font-weight: 800; background: #fff; box-shadow: 0 5px 0 #D9CEF7; }
.mid.wide { width: 100%; margin-top: 12px; }
.row2 { display: flex; gap: 10px; margin-top: 12px; }

/* 불러오는 중 */
#scrBoot { background: linear-gradient(#7B5BE0, #B9A4FF); align-items: center; justify-content: center; }
.bootBox { text-align: center; color: #fff; }
.logoS { font-size: 44px; font-weight: 900; letter-spacing: 1px; text-shadow: 0 4px 0 rgba(43,31,87,.35); }
.bootTxt { margin-top: 10px; font-size: 18px; font-weight: 700; opacity: .92; }

/* 타이틀 */
#scrTitle { flex-direction: column; justify-content: space-between; padding: calc(26px + var(--st)) 18px calc(18px + var(--sb)); pointer-events: auto; }
.titleTop { text-align: center; }
.club { display: inline-block; padding: 7px 16px; border-radius: 99px; background: #fff; color: var(--purple); font-weight: 900; font-size: 17px; box-shadow: 0 4px 0 rgba(43,31,87,.15); }
.logo { margin-top: 12px; line-height: .98; font-weight: 900; }
.logo span { display: block; -webkit-text-stroke: 9px var(--ink); paint-order: stroke fill; text-shadow: 0 7px 0 var(--ink); letter-spacing: 0; }
.logo .l1 { font-size: 46px; color: #fff; }
/* 2026-11-13 이름: 붐붐 세포런 로고 그림(게임_비서캐릭터/로고/logos.html 의 R1) */
.logoImg { display: block; width: min(340px, 86vw); height: auto; margin: 0 auto; animation: boing 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes boing { 0%,100% { transform: translateY(0) scale(1,1); } 45% { transform: translateY(-4px) scale(1.01,.99); } 55% { transform: translateY(0) scale(1.03,.96); } }
.srName { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.logo .l2 { font-size: 54px; color: var(--yellow); margin-top: 6px; }
.slogan { margin-top: 16px; display: inline-block; font-size: 20px; font-weight: 900; color: #fff; background: var(--purple); padding: 7px 18px; border-radius: 99px; transform: rotate(-2deg); box-shadow: 0 4px 0 rgba(43,31,87,.3); }
.titleBottom { width: 100%; max-width: 440px; margin: 0 auto; }
.fine { margin-top: 12px; text-align: center; }
.fine span { display: inline-block; padding: 5px 12px; border-radius: 99px; background: rgba(255,255,255,.9); font-size: 14px; line-height: 1.3; font-weight: 800; color: var(--ink); letter-spacing: -0.3px; }

/* 고르기 */
.charRow { display: flex; gap: 10px; padding: 4px 2px 12px; align-items: stretch; }
.cc { flex: 0 0 116px; pointer-events: auto; border-radius: 22px; background: #fff; padding: 8px 6px 10px; text-align: center; box-shadow: 0 5px 0 #D9CEF7; position: relative; scroll-snap-align: start; }
.cc img { width: 88px; height: 104px; object-fit: contain; display: block; margin: 0 auto; pointer-events: none; }
.cc b { display: block; font-size: 18px; font-weight: 900; }
.cc span { display: block; font-size: 12px; font-weight: 700; color: #7b6fa8; margin-top: 1px; }
.cc.sel { background: #FFF2CC; box-shadow: 0 5px 0 var(--gold), 0 0 0 4px var(--gold) inset; }
.soonBox { flex: 1; min-width: 0; border-radius: 22px; background: #EFEAFB; padding: 10px 8px 10px; text-align: center; display: flex; flex-direction: column; justify-content: center; pointer-events: auto; }
.soonFaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 2px; }
.soonFaces img { width: 100%; max-width: 58px; height: 50px; object-fit: cover; object-position: 50% 8%; margin: 0 auto; display: block; border-radius: 14px; background: #fff; opacity: .8; }
.soonBox b { display: block; margin-top: 7px; font-size: 15px; font-weight: 900; color: var(--purple); }
.stageRow { display: flex; gap: 10px; }
.sc { flex: 1; min-height: 132px; border-radius: 22px; padding: 12px 8px; text-align: center; color: #fff; box-shadow: 0 5px 0 rgba(43,31,87,.25); position: relative; overflow: hidden; }
.sc.town { background: linear-gradient(#6EC8FF 0%, #A9E4FF 55%, #8BD96B 56%, #6FC454 100%); }
.sc.ocean { background: linear-gradient(#35B6E8 0%, #1C7CC9 70%, #F3D9A0 71%, #E5C583 100%); }
.sc.school { background: linear-gradient(#5FC4FF 0%, #BFE9FF 52%, #E3B06A 53%, #D29A54 100%); }   /* r8 운동장: 하늘 + 황토 트랙 */
.sc b { display: block; font-size: 17px; line-height: 1.15; font-weight: 900; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; word-break: keep-all; }   /* r8: 카드 3장 — 낱말 단위로 줄바꿈 */
.sc span { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 800; word-break: keep-all; background: rgba(43,31,87,.55); border-radius: 99px; padding: 3px 8px; }
.sc em { display: block; margin-top: 8px; font-style: normal; font-size: 20px; letter-spacing: 2px; color: var(--yellow); text-shadow: 0 2px 0 var(--ink); min-height: 26px; }
.sc.sel { outline: 5px solid var(--gold); outline-offset: -5px; }
.sc.sel::after { content: "✓"; position: absolute; right: 7px; bottom: 7px; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: var(--ink); font-weight: 900; line-height: 30px; font-size: 18px; }
.diffRow { display: flex; gap: 10px; margin-top: 14px; }
.diff { flex: 1; min-height: 64px; border-radius: 20px; background: #fff; box-shadow: 0 5px 0 #D9CEF7; }
.diff b { display: block; font-size: 20px; font-weight: 900; }
.diff span { display: block; font-size: 12px; font-weight: 700; color: #7b6fa8; word-break: keep-all; line-height: 1.25; }   /* 보통 난이도: 3칸 — 좁으면 낱말 단위로 두 줄 */
.diff { padding: 6px 4px; min-width: 0; }
.diff.sel { background: #EDE7FB; box-shadow: 0 5px 0 var(--purple), 0 0 0 4px var(--purple) inset; }

/* 게임 화면 */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 1; }   /* r6: 게임 화면 묶음(통통 커진 버튼·게이지 번개도)이 멈춤·결과 창 위로 못 올라오게 */
#prog { position: absolute; left: 14px; right: 14px; top: calc(8px + var(--st)); height: 10px; border-radius: 9px; background: rgba(255,255,255,.55); box-shadow: 0 0 0 2px rgba(43,31,87,.35); }
#progFill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 9px; background: var(--purple); }
#progDot { position: absolute; top: -5px; left: 0; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 3px var(--ink); }
#hudTop { position: absolute; left: 12px; right: 12px; top: calc(28px + var(--st)); display: flex; justify-content: space-between; align-items: flex-start; }
#hearts { display: flex; gap: 5px; }
#hearts i { width: 34px; height: 31px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 31'%3E%3Cpath d='M17 29 C5 20 2 14 2 9.5 C2 5 5.5 2 9.5 2 C12.6 2 15.3 3.7 17 6.4 C18.7 3.7 21.4 2 24.5 2 C28.5 2 32 5 32 9.5 C32 14 29 20 17 29 Z' fill='%23FF5C8A' stroke='%232B1F57' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M9 8 q2 -3 5 -1' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform .25s, opacity .25s, filter .25s; }
#hearts i.off { filter: grayscale(1) brightness(1.5); opacity: .45; transform: scale(.82); }
#gauge { margin-top: 8px; display: flex; align-items: center; }
#gauge .bolt { width: 34px; height: 34px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 3px var(--ink); font-size: 20px; line-height: 34px; text-align: center; z-index: 1; }
#gaugeTrack { width: 150px; height: 20px; margin-left: -8px; border-radius: 0 12px 12px 0; background: rgba(255,255,255,.7); box-shadow: 0 0 0 3px var(--ink); overflow: hidden; }
#gaugeFill { height: 100%; width: 0; background: linear-gradient(90deg, #FFD15A, #FF9F45); border-radius: 0 10px 10px 0; }
#gauge.full #gaugeFill { background: linear-gradient(90deg, #FF8FB1, #B9A4FF, #5FD6C4); }
#hudR { display: flex; align-items: center; gap: 8px; }
#orbBox { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 8px; border-radius: 99px; background: rgba(255,255,255,.85); box-shadow: 0 0 0 3px var(--ink); font-size: 20px; font-weight: 900; }
.orbIcon { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 18%, #FFE27A 30%, #F5A700 100%); box-shadow: 0 0 0 2px var(--ink); }
#pauseBtn { width: 56px; height: 56px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--ink), 0 4px 0 3px rgba(43,31,87,.4); display: flex; gap: 7px; align-items: center; justify-content: center; }
#pauseBtn i { width: 8px; height: 22px; border-radius: 3px; background: var(--ink); }

#card { position: absolute; left: 50%; top: calc(150px + var(--st)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 7px 9px 7px 8px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 4px var(--purple), 0 6px 0 4px rgba(43,31,87,.25); max-width: 94%; animation: cardIn .35s cubic-bezier(.2,1.6,.4,1); }
#card img { width: 54px; height: 54px; border-radius: 50%; background: #EDE7FB; object-fit: cover; object-position: 50% 12%; flex: none; }
#card b { display: block; font-size: 22px; font-weight: 900; color: var(--purple); white-space: nowrap; }
#card span { display: none; }   /* r3: 카드는 그림 크게·글은 한 줄 */
#cardPic { flex: none; width: 64px; height: 64px; border-radius: 50%; background: #FFF2CC; box-shadow: 0 0 0 3px var(--gold) inset; display: flex; align-items: center; justify-content: center; }
#cardPic svg { width: 46px; height: 46px; display: block; }
@keyframes cardIn { from { transform: translateX(-50%) scale(.6); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
/* 도움말: 움직이는 손가락 그림 + 짧은 글 */
#hint { position: absolute; left: 50%; top: calc(250px + var(--st)); transform: translateX(-50%); padding: 10px 18px 10px; border-radius: 24px; background: rgba(43,31,87,.9); color: #fff; text-align: center; box-shadow: 0 5px 0 rgba(0,0,0,.2), 0 0 0 3px #fff; }
#hintT { display: block; font-size: 19px; font-weight: 900; white-space: nowrap; }
#hintPic { position: relative; width: 190px; height: 86px; margin: 0 auto 4px; }
#hintPic i { position: absolute; display: block; }
#hintPic svg { width: 100%; height: 100%; display: block; }
#hintPic .hh { left: 50%; top: 18px; width: 62px; height: 62px; margin-left: -26px; }
#hintPic .ha { width: 34px; height: 34px; opacity: .95; }
#hintPic .ha.l { left: 2px; top: 26px; } #hintPic .ha.r { right: 2px; top: 26px; }
#hintPic .ha.t { left: 50%; margin-left: -64px; top: 2px; width: 40px; height: 40px; } #hintPic .ha.b { left: 50%; margin-left: -64px; bottom: 0; width: 40px; height: 40px; }
.mv-lr { animation: mvLR 1.5s ease-in-out infinite; } .mv-up { animation: mvUp 1.2s ease-in-out infinite; } .mv-down { animation: mvDown 1.2s ease-in-out infinite; }
@keyframes mvLR { 0%, 100% { transform: translateX(-46px); } 50% { transform: translateX(46px); } }
/* r3: 손 그림은 늘 또렷하게(사라졌다 나타나지 않음) */
@keyframes mvUp { 0%, 12% { transform: translateY(18px); } 62%, 100% { transform: translateY(-16px); } }
@keyframes mvDown { 0%, 12% { transform: translateY(-18px); } 62%, 100% { transform: translateY(14px); } }
#pop { position: absolute; inset: 0; }
#pop b { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); font-size: 40px; font-weight: 900; color: #fff; -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; white-space: nowrap; animation: popUp .9s ease-out forwards; padding: 2px 16px; border-radius: 99px; background: rgba(255,255,255,.72); box-shadow: 0 0 0 3px rgba(255,255,255,.5); }   /* r8b: 반투명 흰 띠(학교 건물·풍경 위에서도 또렷) */
#pop b.bst { font-size: 44px; -webkit-text-stroke-width: 9px; animation-duration: 1.3s; }
/* 부스트 중 화면 가장자리에 따뜻한 빛 테두리(움직이지 않음 — 번쩍임 아님). 속도선·별빛은 3D 쪽에서 그림 */
#boostFx { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 54px 16px rgba(255,214,90,.55), inset 0 0 0 5px rgba(255,255,255,.6); }
#pop b.y { color: var(--yellow); } #pop b.p { color: #FFB3CB; } #pop b.sm { font-size: 28px; -webkit-text-stroke-width: 6px; }
@keyframes popUp { 0% { transform: translate(-50%, -30%) scale(.5); opacity: 1; } 18% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 30% { transform: translate(-50%, -50%) scale(1); } 85% { opacity: 1; } 100% { transform: translate(-50%, -110%) scale(1); opacity: 0; } }
/* 부스트 꼬리표: 게이지 아래 왼쪽에 작게 1.6초만 (게이지·체조 제목을 가리지 않음) */
#boostTag { position: absolute; left: 12px; top: calc(108px + var(--st)); font-size: 17px; font-weight: 900; color: #fff; padding: 3px 14px; border-radius: 99px; background: linear-gradient(90deg, #FF8FB1, #B58CFF, #4FCFC0); box-shadow: 0 0 0 3px var(--ink); white-space: nowrap; animation: boostIn .3s cubic-bezier(.2,1.6,.4,1); }
@keyframes boostIn { from { transform: scale(.5); opacity: 0; } }
#gauge.charge { animation: gaugeShake .12s linear infinite alternate; }
#gauge.ending { animation: gaugeEnd .36s ease-in-out infinite alternate; transform-origin: 0 50%; }
@keyframes gaugeEnd { from { transform: scale(1); } to { transform: scale(1.1); } }
@keyframes gaugeShake { from { transform: translateX(-2px) scale(1.04); } to { transform: translateX(2px) scale(1.04); } }
/* 쉬움: 잠깐 쉬었다 가자 */
#restMsg { position: absolute; left: 50%; top: 27%; transform: translateX(-50%); padding: 14px 24px 14px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 5px var(--lilac), 0 7px 0 5px rgba(43,31,87,.2); text-align: center; white-space: nowrap; animation: cardIn .35s cubic-bezier(.2,1.6,.4,1); }
#restMsg b { display: block; font-size: 27px; font-weight: 900; color: var(--purple); }
#restMsg span { display: block; font-size: 15px; font-weight: 800; margin-top: 2px; }
.restCloud { display: block; position: relative; width: 74px; height: 34px; margin: 0 auto 8px; border-radius: 20px; background: #DDEBFF; box-shadow: 0 0 0 3px var(--ink); }
.restCloud::before { content: ""; position: absolute; left: 12px; top: -15px; width: 30px; height: 30px; border-radius: 50%; background: #DDEBFF; box-shadow: 22px 4px 0 -3px #DDEBFF; }
.restCloud::after { content: "z z"; position: absolute; right: -30px; top: -20px; font-size: 18px; font-weight: 900; font-style: normal; color: var(--purple); letter-spacing: 2px; }
#countIn { position: absolute; left: 0; right: 0; top: 34%; text-align: center; font-size: 64px; font-weight: 900; color: var(--yellow); -webkit-text-stroke: 10px var(--ink); paint-order: stroke fill; }

#gym { position: absolute; left: 0; right: 0; top: calc(146px + var(--st)); text-align: center; }
#gymTitle { display: inline-block; font-size: 22px; font-weight: 900; color: #fff; background: var(--purple); padding: 5px 18px; border-radius: 99px; box-shadow: 0 0 0 3px #fff; }
#gymIcon { position: relative; width: 118px; height: 118px; margin: 30px auto 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px var(--purple), 0 7px 0 6px rgba(43,31,87,.3); }
#gymIcon.good { background: #C9F5DF; box-shadow: 0 0 0 6px #35C98F, 0 7px 0 6px rgba(43,31,87,.3); } #gymIcon.rest { opacity: .0; }
#gymPic { position: absolute; inset: 8px; }
#gymPic svg { width: 100%; height: 100%; display: block; }
#gymBadge { position: absolute; right: -16px; top: -12px; width: 50px; height: 50px; }
#gymBadge svg { width: 100%; height: 100%; display: block; }
#gymRing { position: absolute; inset: -8px; border-radius: 50%; border: 6px solid var(--yellow); transform: scale(2); opacity: 0; }
#gymWord { position: relative; margin-top: 26px; font-size: 32px; font-weight: 900; color: #fff; -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; min-height: 42px; }
#gymDots { margin-top: 4px; display: flex; gap: 9px; justify-content: center; }
#gymDots i { width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.6); box-shadow: 0 0 0 3px var(--ink); }
#gym.done #gymDots, #gym.done #gymWord { visibility: hidden; }
#gymDots i.ok { background: #35C98F; } #gymDots i.no { background: #C9C2DD; } #gymDots i.now { background: var(--yellow); transform: scale(1.2); }

/* r8 그대로 멈춰라(운동장): 오른쪽 아래 엄지 자리에 [작은 글자 / 신호등 점 3개 / 빨간 손바닥 버튼]. 버튼은 판정 창 직전에 「통」 나타남, 판정은 40px 더 넓게(::before) */
#stop { position: absolute; inset: 0; pointer-events: none; }
#stopBox { position: absolute; right: calc(18px + var(--sr)); bottom: calc(14px + var(--sb)); width: 150px; display: flex; flex-direction: column; align-items: center; gap: 7px; pointer-events: none; }
#stopMsg { font-size: 22px; font-weight: 900; color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; white-space: nowrap; text-align: center; }
#stopLight { display: flex; gap: 10px; padding: 5px 10px; border-radius: 99px; background: var(--ink); box-shadow: 0 0 0 3px #fff; }
#stopLight i { width: 22px; height: 22px; border-radius: 50%; background: #5a5078; transition: background .12s, box-shadow .12s; }
#stopLight i:nth-child(1).on { background: #35C98F; box-shadow: 0 0 10px #35C98F; } #stopLight i:nth-child(2).on { background: var(--yellow); box-shadow: 0 0 10px var(--yellow); } #stopLight i:nth-child(3).on { background: #FF4D5A; box-shadow: 0 0 10px #FF4D5A; }
#stopBtn { position: relative; width: 150px; height: 150px; border-radius: 50%; background: #E8303A; box-shadow: 0 0 0 6px #fff, 0 9px 0 6px rgba(43,31,87,.3); padding: 0; pointer-events: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; animation: stopIn .28s cubic-bezier(.2,1.6,.4,1), stopBlink .5s ease-in-out .3s infinite alternate; }
#stopBtn::before { content: ""; position: absolute; inset: -20px; border-radius: 50%; }
#stopBtn.off { visibility: hidden; pointer-events: none; animation: none; }
#stopBtn i { width: 72px; height: 72px; display: block; pointer-events: none; } #stopBtn i svg { width: 100%; height: 100%; display: block; }
#stopBtn b { font-size: 27px; font-weight: 900; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; margin-top: -4px; pointer-events: none; }
#stopBtn.st-ok { background: #35C98F; animation: stopIn .28s cubic-bezier(.2,1.6,.4,1); } #stopBtn.st-no { background: #B9B0CF; animation: none; }
@keyframes stopIn { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes stopBlink { from { transform: scale(1); } to { transform: scale(1.07); } }
/* 갤럭시탭 등 큰 터치 화면: 버튼 170px */
@media (min-width: 1000px) and (pointer: coarse) { #stopBox, #stopBtn { width: 170px; } #stopBtn { height: 170px; } #stopBtn i { width: 82px; height: 82px; } #stopBtn b { font-size: 30px; } }
/* 작은 폰(높이 380 아래): 버튼 130px */
@media (max-height: 380px) { #stopBox, #stopBtn { width: 130px; } #stopBtn { height: 130px; } #stopBtn i { width: 60px; height: 60px; } #stopBtn b { font-size: 23px; } #stopLight i { width: 18px; height: 18px; } #stopMsg { font-size: 19px; } #stopBox { gap: 5px; } }
#pad.lr .padR { visibility: hidden; }   /* r8 멈춰라 구간: ◀▶만 */
/* r8 다시 해 볼까? 카드 */
.retryHearts { display: flex; justify-content: center; gap: 6px; margin: 4px 0 6px; }
.retryHearts i { width: 40px; height: 36px; filter: grayscale(1) brightness(1.5); opacity: .55; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 31'%3E%3Cpath d='M17 29 C5 20 2 14 2 9.5 C2 5 5.5 2 9.5 2 C12.6 2 15.3 3.7 17 6.4 C18.7 3.7 21.4 2 24.5 2 C28.5 2 32 5 32 9.5 C32 14 29 20 17 29 Z' fill='%23FF5C8A' stroke='%232B1F57' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; animation: retryBeat 1s ease-in-out infinite alternate; }
.retryHearts i:nth-child(2) { animation-delay: .2s; } .retryHearts i:nth-child(3) { animation-delay: .4s; }
@keyframes retryBeat { from { transform: scale(.9); } to { transform: scale(1.08); } }
#scrRetry h2 { line-height: 1.3; }

#boostBtn { position: absolute; right: 12px; bottom: calc(116px + var(--sb)); width: 124px; height: 124px; border-radius: 50%; background: none; padding: 0; z-index: 3; animation: bbPulse .42s ease-in-out infinite alternate; }
#boostBtn .bbRay { position: absolute; inset: -14px; border-radius: 50%; background: repeating-conic-gradient(#FFE27A 0 15deg, rgba(255,255,255,0) 15deg 30deg); animation: bbSpin 5s linear infinite; opacity: .9; pointer-events: none; }
#boostBtn .bbCore { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, #FF8FB1, #FFD23A, #5FD6C4, #B9A4FF, #FF8FB1); box-shadow: 0 0 0 5px #fff, 0 0 0 9px var(--ink), 0 9px 0 9px rgba(43,31,87,.35); display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
#boostBtn .bbCore em { font-style: normal; font-size: 40px; line-height: 1; }
#boostBtn .bbCore b { font-size: 23px; font-weight: 900; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; margin-top: 2px; }
#bbHand { position: absolute; right: -14px; bottom: -34px; width: 66px; height: 66px; display: block; animation: pressDn .6s ease-in-out infinite; pointer-events: none; }
#bbHand svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 0 rgba(43,31,87,.35)); }
@keyframes bbPulse { from { transform: scale(.95); } to { transform: scale(1.08); } }
@keyframes bbSpin { to { transform: rotate(360deg); } }
#stkBadge { position: absolute; right: 16px; top: calc(92px + var(--st)); width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--gold), 0 4px 0 3px rgba(43,31,87,.25); font-size: 26px; line-height: 44px; text-align: center; }
#resNext { margin-top: 10px; padding: 8px 12px 10px; border-radius: 16px; background: #F3EEFF; font-size: 15px; font-weight: 900; }
.nxTrack { margin-top: 6px; height: 14px; border-radius: 9px; background: #fff; box-shadow: 0 0 0 2px var(--lilac) inset; overflow: hidden; }
#resNextFill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #FFD15A, #FF9F45); border-radius: 9px; }
#pad { position: absolute; left: 0; right: 0; bottom: calc(12px + var(--sb)); display: flex; justify-content: center; gap: 8px; padding: 0 8px; }
.padG { display: contents; }   /* 세로(예비): 한 줄 */
.pbtn { flex: 1; max-width: 104px; height: 88px; border-radius: 26px; background: rgba(255,255,255,.88); box-shadow: 0 0 0 3px var(--ink), 0 6px 0 3px rgba(43,31,87,.4); color: var(--purple); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; }
.pbtn svg { width: 46px; height: 46px; pointer-events: none; }
.pbtn span { font-size: 15px; font-weight: 900; margin-top: -2px; pointer-events: none; color: var(--ink); }
.pbtn.c1 { background: rgba(255,240,180,.95); } .pbtn.c2 { background: rgba(214,242,255,.95); }
.pbtn.c1 svg, .pbtn.c2 svg { width: 42px; height: 42px; }
/* 곧 닿을 장애물에 맞는 버튼은 1.1배로 통통(크기만, 번쩍임 없음) · 도움말이 가리키는 버튼도 통통 */
.pbtn.cue { transform: scale(1.1); box-shadow: 0 0 0 5px var(--ink), 0 6px 0 5px rgba(43,31,87,.4); z-index: 2; }
.pbtn.teach { animation: teachPulse .5s ease-in-out infinite alternate; z-index: 2; }
@keyframes teachPulse { from { transform: scale(1); } to { transform: scale(1.1); } }

/* r3: 결승·실패 글자는 처음부터 또렷한 띠 위에(흐리게 겹치지 않음 — 크기만 통) */
#finaleMsg, #loseMsg { position: absolute; left: 0; right: 0; top: 13%; text-align: center; animation: cardIn2 .45s cubic-bezier(.2,1.6,.4,1); }
#finaleMsg span, #loseMsg span { display: inline-block; padding: 12px 26px 14px; border-radius: 30px; background: var(--purple); box-shadow: 0 0 0 5px #fff, 0 8px 0 5px rgba(43,31,87,.3); font-size: 33px; line-height: 1.2; font-weight: 900; color: var(--yellow); letter-spacing: -0.5px; }
#loseMsg { top: 30%; } #loseMsg span { background: #fff; color: var(--purple); box-shadow: 0 0 0 5px var(--lilac), 0 8px 0 5px rgba(43,31,87,.25); }
@keyframes cardIn2 { from { transform: scale(.6); } to { transform: scale(1); } }

/* 잠깐 멈춤 */
.vol { display: flex; align-items: center; gap: 12px; margin: 12px 4px; font-size: 18px; font-weight: 800; }
.vol span { flex: 0 0 64px; text-align: left; }
.vol input { flex: 1; height: 44px; accent-color: var(--purple); touch-action: pan-x; pointer-events: auto; }
.vib { display: flex; align-items: center; gap: 12px; width: calc(100% - 8px); margin: 8px 4px; padding: 0 14px 0 0; min-height: 44px; border: 0; border-radius: 22px; background: transparent; font-size: 18px; font-weight: 800; cursor: pointer; text-align: left; }
.vib span { flex: 0 0 64px; }
.vib b { flex: 1; display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 20px; background: var(--purple); color: #fff; font-size: 17px; box-shadow: 0 4px 0 rgba(43,31,87,.18); }
.vib.off b { background: #D9D3EA; color: #5B5276; box-shadow: none; }
/* 2026-11-13 화질: 「진동」 옆에 「화질 자동/높게」를 한 줄로 (멈춤 창 높이 그대로) */
.vibRow { display: flex; gap: 10px; margin: 0 4px; }
.vibRow .vib { flex: 1 1 0; width: auto; min-width: 0; margin-left: 0; margin-right: 0; gap: 8px; padding-right: 8px; }
.vibRow .vib span { flex: 0 0 auto; }
.guide { text-align: left; font-size: 14px; font-weight: 600; line-height: 1.5; background: #F3EEFF; border-radius: 16px; padding: 4px 14px; margin-top: 10px; }
.guide p { margin: 8px 0; } .guide b { color: var(--purple); margin-right: 4px; }

/* 결과 */
#resHead { font-size: 30px; font-weight: 900; color: var(--purple); }
#resHead .dTag { display: inline-block; vertical-align: middle; margin-left: 10px; padding: 3px 12px; border-radius: 99px; font-size: 15px; font-weight: 900; color: #fff; background: #8BC34A; position: relative; top: -3px; }   /* 보통 난이도: 결과에 난이도 */
#resHead .dTag.d-normal { background: #FF9F1C; } #resHead .dTag.d-hard { background: #E8456B; }
#resStars { display: flex; justify-content: center; gap: 6px; margin: 10px 0 4px; }
#resStars i { width: 66px; height: 66px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 66'%3E%3Cpath d='M33 5 L41.5 23.5 L61 26 L46.5 39.5 L50.5 59 L33 49.5 L15.5 59 L19.5 39.5 L5 26 L24.5 23.5 Z' fill='%23E4DDF5' stroke='%23B9ADD9' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
#resStars i.on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 66'%3E%3Cpath d='M33 5 L41.5 23.5 L61 26 L46.5 39.5 L50.5 59 L33 49.5 L15.5 59 L19.5 39.5 L5 26 L24.5 23.5 Z' fill='%23FFD15A' stroke='%232B1F57' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E"); animation: starIn .5s cubic-bezier(.2,1.8,.4,1) backwards; }
#resStars i.on:nth-child(2) { animation-delay: .25s; transform: translateY(-8px); } #resStars i.on:nth-child(3) { animation-delay: .5s; }
#resStars i:nth-child(2) { transform: translateY(-8px); }
@keyframes starIn { from { transform: scale(0) rotate(-40deg); } }
#resPraise { font-size: 19px; font-weight: 900; margin: 6px 0 12px; }
.resGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.resGrid div { background: #F3EEFF; border-radius: 16px; padding: 8px 6px; }
.resGrid span { display: block; font-size: 13px; font-weight: 800; color: #7b6fa8; }
.resGrid b { display: block; font-size: 22px; font-weight: 900; }
#resSticker { margin-top: 10px; padding: 10px; border-radius: 16px; background: #FFF2CC; font-size: 16px; font-weight: 900; }
#resSticker em { font-style: normal; font-size: 30px; vertical-align: middle; margin-right: 6px; }

/* 스티커 도감 */
.stSub { text-align: center; font-size: 15px; font-weight: 800; margin-bottom: 12px; }
.stGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stk { aspect-ratio: 1; border-radius: 22px; background: #fff; box-shadow: 0 4px 0 #D9CEF7; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.stk em { font-style: normal; font-size: 42px; line-height: 1.1; }
.stk span { font-size: 13px; font-weight: 800; margin-top: 2px; }
.stk.lock { background: #EEE9F8; box-shadow: none; }
.stk.lock em { filter: grayscale(1); opacity: .22; }
.stk.lock span { color: #9a90bd; }
.famBox { margin-top: 14px; background: #F3EEFF; border-radius: 16px; padding: 10px 14px; font-size: 14.5px; font-weight: 700; line-height: 1.7; }
.famBox b { color: var(--purple); }
.restIcon { font-size: 56px; }
.restTxt { font-size: 18px; font-weight: 700; line-height: 1.5; }

/* 가로·넓은 화면: 가운데 폰 폭으로 */
@media (orientation: portrait) and (max-height: 700px) {
  .logo .l1 { font-size: 38px; } .logo .l2 { font-size: 44px; }
  .cc img { height: 84px; } .sc { min-height: 104px; }
}

/* 작은 폰: 체조 안내를 조금 작게 (캐릭터를 가리지 않게) */
@media (orientation: portrait) and (max-height: 720px) {
  #gym { top: calc(136px + var(--st)); }
  #gymIcon { width: 92px; height: 92px; margin-top: 22px; }
  #gymWord { font-size: 27px; min-height: 34px; margin-top: 18px; }
  #gymTitle { font-size: 19px; }
  #boostBtn { width: 104px; height: 104px; bottom: calc(112px + var(--sb)); } #boostBtn .bbCore em { font-size: 32px; } #boostBtn .bbCore b { font-size: 20px; } #finaleMsg span, #loseMsg span { font-size: 28px; }
  #hint { top: calc(112px + var(--st)); padding: 6px 16px 8px; } #hintPic { height: 64px; margin-bottom: 0; } #hintPic .hh { top: 4px; width: 46px; height: 46px; margin-left: -20px; } #hintT { font-size: 17px; position: relative; z-index: 1; }
  #hintPic .mv-up { animation-name: mvUpS; } #hintPic .mv-down { animation-name: mvDownS; }   /* r5: 작은 폰에서 손 그림이 글자를 덮지 않게 움직임을 작게 */ #restMsg b { font-size: 23px; }
}
/* r6 가로형: 폰을 세로로 들면 가로로 돌려 달라고 안내(그림 + 큰 글자). PC(넓은 창)는 안 뜸 */
#rotate { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; text-align: center; background: linear-gradient(#7B5BE0, #B9A4FF); color: #fff; z-index: 50; pointer-events: auto; padding: 20px; }
.rotPic { display: block; width: 220px; height: 154px; margin: 0 auto 8px; }
.rotPhone { transform-origin: 100px 66px; animation: rotTurn 2.4s ease-in-out infinite; }
@keyframes rotTurn { 0%, 25% { transform: rotate(0deg); } 55%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }
#rotate b { display: block; font-size: 34px; font-weight: 900; margin-top: 6px; -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; }
#rotate span { display: block; font-size: 19px; font-weight: 800; margin-top: 12px; }
@media (orientation: portrait) and (max-width: 600px) { #rotate { display: flex; } }

/* PC(마우스·키보드): 큰 버튼 대신 키 안내 */
#keyHint { display: none; position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 8px 18px; border-radius: 99px; background: rgba(255,255,255,.85); box-shadow: 0 0 0 3px var(--ink); font-size: 15px; font-weight: 800; white-space: nowrap; }
#keyHint b { color: var(--purple); }
@media (hover: hover) and (pointer: fine) { #pad { display: none; } #keyHint { display: block; } #boostBtn { bottom: 70px; } }

/* r5: 작은 폰 손 그림 움직임(글자 위로 안 내려옴) */
@keyframes mvUpS { 0%, 12% { transform: translateY(8px); } 62%, 100% { transform: translateY(-8px); } }
@keyframes mvDownS { 0%, 12% { transform: translateY(-8px); } 62%, 100% { transform: translateY(8px); } }

/* ================= r6 가로형(기본): 폰 가로 844×390 · 작은 폰 640×360 · PC 16:9 =================
   왼손 = ◀ ▶ (왼쪽 아래) · 오른손 = 숙이기 ▼ · 점프 ▲ (오른쪽 아래) · 「부스트!」는 오른쪽 아래 엄지 자리(버튼 묶음 위).
   글자·카드는 위쪽 가운데 / 도움말은 왼쪽 가운데 — 라온(가운데 아래)을 가리지 않게. 노치·홈바 안전영역(--sl·--sr·--sb) 안쪽. */
@media (orientation: landscape) {
  .panelScr { padding: calc(10px + var(--st)) calc(14px + var(--sr)) calc(10px + var(--sb)) calc(14px + var(--sl)); }
  .panel { padding: 14px 18px 16px; border-radius: 26px; }
  .panel h2 { margin: 2px 0 8px; font-size: 20px; }
  .back { width: 48px; height: 48px; line-height: 42px; left: 10px; top: 10px; }
  .big { min-height: 62px; font-size: 26px; margin-top: 10px; border-radius: 22px; }
  .mid { min-height: 52px; font-size: 17px; }
  .row2 { margin-top: 10px; }

  /* 타이틀: 왼쪽 로고 · 가운데 라온(3D) · 오른쪽 버튼 */
  #scrTitle { flex-direction: row; align-items: center; justify-content: space-between; padding: calc(12px + var(--st)) calc(16px + var(--sr)) calc(12px + var(--sb)) calc(16px + var(--sl)); }
  .titleTop { text-align: left; width: 40%; }
  .club { font-size: 16px; padding: 6px 14px; }
  .logo { margin-top: 10px; }
  .logo span { -webkit-text-stroke-width: 8px; text-shadow: 0 6px 0 var(--ink); }
  .logo .l1 { font-size: clamp(26px, 4.6vw, 54px); }
  .logo .l2 { font-size: clamp(30px, 5.3vw, 62px); margin-top: 4px; }
  .logoImg { width: clamp(220px, 40vw, 520px); margin: 0; }
  .slogan { margin-top: 14px; font-size: 18px; }
  .titleBottom { width: min(300px, 36vw); margin: 0; align-self: flex-end; }
  .fine span { font-size: 14px; }

  /* 고르기: 왼쪽 「누구랑」 · 오른쪽 「어디로」 + 아래 난이도 · 출발 */
  #scrSelect .panel { max-width: 820px; display: grid; grid-template-columns: 1fr 1.15fr; column-gap: 18px; align-items: start; }
  #scrSelect h2:nth-of-type(1) { grid-column: 1; grid-row: 1; padding-left: 40px; }
  #scrSelect .charRow { grid-column: 1; grid-row: 2; padding-bottom: 4px; }
  #scrSelect h2:nth-of-type(2) { grid-column: 2; grid-row: 1; }
  #scrSelect .stageRow { grid-column: 2; grid-row: 2; }
  #scrSelect .diffRow { grid-column: 1; grid-row: 3; margin-top: 12px; }
  #scrSelect .big { grid-column: 2; grid-row: 3; margin-top: 12px; }
  .cc { flex-basis: 108px; }
  .cc img { width: 82px; height: min(100px, 21vh); }
  .sc { min-height: min(132px, 29vh); padding: 10px 6px; }
  .diff { min-height: 62px; }

  /* 게임 화면 위쪽: 진행 막대 · 하트·게이지(왼쪽) · 구슬·멈춤(오른쪽) */
  #prog { left: calc(16px + var(--sl)); right: calc(16px + var(--sr)); top: calc(6px + var(--st)); }
  #hudTop { left: calc(12px + var(--sl)); right: calc(12px + var(--sr)); top: calc(22px + var(--st)); }
  #hearts i { width: 30px; height: 27px; }
  #gauge { margin-top: 6px; }
  #gaugeTrack { width: 128px; }
  #stkBadge { right: calc(18px + var(--sr)); top: calc(86px + var(--st)); width: 40px; height: 40px; line-height: 40px; font-size: 23px; }
  #boostTag { left: calc(12px + var(--sl)); top: calc(96px + var(--st)); }

  /* 카드: 위 가운데(하트·게이지와 구슬·멈춤 사이) */
  #card { top: calc(26px + var(--st)); gap: 8px; padding: 5px 8px 5px 6px; max-width: calc(100% - 2 * (190px + var(--sl))); }
  #card img { width: 46px; height: 46px; }
  #cardPic { width: 52px; height: 52px; } #cardPic svg { width: 38px; height: 38px; }
  #card b { font-size: 20px; }
  @keyframes cardIn { from { transform: translateX(-50%) scale(.6); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }

  /* 도움말: 왼쪽 가운데(왼손 ◀ ▶ 위) — 라온·길을 안 가림 */
  #hint { left: calc(12px + var(--sl)); top: calc(112px + var(--st)); transform: none; padding: 8px 14px 9px; }
  #hintPic { width: 170px; height: 76px; }
  #hintPic .hh { top: 14px; width: 54px; height: 54px; margin-left: -22px; }
  #hintT { font-size: 18px; position: relative; z-index: 1; }
  #hintPic .mv-up { animation-name: mvUpS; } #hintPic .mv-down { animation-name: mvDownS; }
  @keyframes mvLR { 0%, 100% { transform: translateX(-40px); } 50% { transform: translateX(40px); } }

  /* 큰 글자: 위 가운데, 라온 머리 위 */
  #pop b { top: 33%; font-size: 38px; }   /* r8b: 자리는 그대로(위 게이지 아래·라온 머리 위), 반투명 흰 띠로 건물 위에서도 또렷하게 */
  #pop b.bst { font-size: 42px; }
  #countIn { top: 26%; font-size: 60px; }
  #restMsg { top: calc(24px + var(--st)); padding: 10px 22px 12px; }
  #restMsg b { font-size: 25px; }
  .restCloud { margin-bottom: 6px; }

  /* 체조: 위 가운데에 가로로 [그림] [제목·구령·점] — 라온은 그 아래 */
  #gym { top: calc(24px + var(--st)); display: flex; align-items: center; justify-content: center; gap: 18px; }
  #gym.hide { display: none; }
  #gymIcon { width: 96px; height: 96px; margin: 0; order: 1; flex: none; }
  #gymBadge { width: 42px; height: 42px; right: -14px; top: -10px; }
  #gymTitle { order: 0; font-size: 18px; padding: 4px 12px; flex: none; }
  #gymWord { order: 2; margin: 0; font-size: 32px; min-height: 40px; min-width: 150px; text-align: left; }
  #gymDots { order: 3; margin: 0; flex-direction: column; gap: 6px; }
  #gymDots i { width: 14px; height: 14px; }

  /* 그대로 멈춰라: 말풍선 위 가운데 · 안내 글·남은 시간 막대는 그 아래 · 「꾹」 동그라미는 오른쪽 아래 */

  /* 두 손 버튼: 왼쪽 아래 ◀ ▶ · 오른쪽 아래 ▼ ▲ (버튼 사이 14px — 통통 커져도 8px 넘게 떨어짐) */
  #pad { left: calc(12px + var(--sl)); right: calc(12px + var(--sr)); bottom: calc(10px + var(--sb)); justify-content: space-between; gap: 0; padding: 0; }
  .padG { display: flex; gap: 14px; }
  .pbtn { flex: none; width: 92px; max-width: none; height: 80px; border-radius: 24px; }
  .pbtn svg { width: 42px; height: 42px; } .pbtn.c1 svg, .pbtn.c2 svg { width: 38px; height: 38px; }
  .pbtn span { font-size: 14px; }

  /* 부스트: 오른쪽 아래 엄지 자리(▼ ▲ 위) — 손가락 그림은 왼쪽 아래로(버튼을 안 덮음) */
  #boostBtn { right: calc(14px + var(--sr)); bottom: calc(108px + var(--sb)); width: 104px; height: 104px; }
  #boostBtn .bbCore em { font-size: 32px; } #boostBtn .bbCore b { font-size: 20px; }
  #bbHand { right: auto; left: -42px; bottom: -6px; width: 56px; height: 56px; }

  /* 결승·실패 글자: 한 줄 띠로 위쪽에 */
  #finaleMsg { top: calc(26px + var(--st)); } #finaleMsg br { display: none; }
  #finaleMsg span, #loseMsg span { font-size: 30px; padding: 10px 24px 12px; }
  #loseMsg { top: 24%; }

  /* 멈춤·소리: 왼쪽 소리 조절 + 버튼 / 오른쪽 안내 */
  #scrPause .panel { max-width: 760px; display: grid; grid-template-columns: 1fr 1.1fr; column-gap: 18px; text-align: left; overflow-y: auto; }
  #scrPause .panel > * { grid-column: 1; }
  #scrPause #guideBox { grid-column: 2; grid-row: 1 / span 7; margin-top: 0; align-self: center; font-size: 13.5px; line-height: 1.45; }
  #scrPause h2 { text-align: left; }
  .vol { margin: 6px 4px; }
  .vol input { height: 38px; }
  .vib { margin: 4px 4px; min-height: 38px; } .vib b { height: 34px; }

  /* 결과: 왼쪽 별·칭찬·버튼 / 오른쪽 숫자·스티커 */
  #scrResult .panel { max-width: 760px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; align-items: start; }
  #scrResult .panel > * { grid-column: 1; }
  #scrResult .resGrid, #scrResult #resSticker, #scrResult #resNext { grid-column: 2; }
  #scrResult .resGrid { grid-row: 1 / span 3; align-self: center; }
  #scrResult #resSticker { grid-row: 4; margin-top: 0; align-self: start; }
  #scrResult #resNext { grid-row: 5; align-self: start; margin-top: 8px; }
  #scrResult #resHead { grid-row: 1; } #scrResult #resStars { grid-row: 2; } #scrResult #resPraise { grid-row: 3; }
  #scrResult .big { grid-row: 4; } #scrResult .row2 { grid-row: 5; }
  #resHead { font-size: 28px; }
  #resStars { margin: 6px 0 2px; } #resStars i { width: 58px; height: 58px; }
  #resPraise { margin: 4px 0 4px; font-size: 18px; }

  /* 스티커 도감: 한 줄에 6개 */
  #scrStickers .panel { max-width: 800px; }
  .stGrid { grid-template-columns: repeat(6, 1fr); gap: 8px; }
  .stk { aspect-ratio: auto; height: 86px; border-radius: 18px; }
  .stk em { font-size: 34px; }
  .stk span { font-size: 12px; }
  .stSub { margin-bottom: 8px; }
  .famBox { margin-top: 10px; padding: 8px 14px; }

  /* 쉬어 가기 */
  .restIcon { font-size: 44px; } .restTxt { font-size: 17px; margin: 6px 0; }
}
/* 작은 폰(가로 640×360 등): 조금씩 작게 */
@media (orientation: landscape) and (max-height: 370px) {
  #hearts i { width: 28px; height: 25px; }
  #gaugeTrack { width: 112px; }
  .pbtn { width: 84px; height: 76px; }
  #boostBtn { bottom: calc(100px + var(--sb)); width: 96px; height: 96px; }
  #boostBtn .bbCore em { font-size: 28px; } #boostBtn .bbCore b { font-size: 18px; }
  #gymIcon { width: 86px; height: 86px; } #gymWord { font-size: 29px; min-width: 128px; } #gymTitle { display: none; }   /* 작은 폰: 「세포체조!」 제목은 카드가 이미 말해서 뺌(폭이 모자람) */
  #hint { top: calc(108px + var(--st)); padding: 6px 12px 8px; } #hintPic { width: 150px; height: 66px; } #hintPic .hh { top: 10px; width: 48px; height: 48px; margin-left: -20px; } #hintT { font-size: 17px; }
  .big { min-height: 58px; font-size: 24px; }
  .slogan { font-size: 16px; margin-top: 10px; }
  #scrPause #guideBox { font-size: 12.5px; }
  #scrPause .vol, #scrPause .vib { margin-top: 3px; margin-bottom: 3px; }   /* 진동 단추가 들어와도 멈춤 창이 한 화면에 */
  .stk { height: 76px; } .stk em { font-size: 30px; }
}
/* PC·큰 화면(가로, 높이 600 이상): 버튼·글자 원래 크기 */
@media (orientation: landscape) and (min-height: 600px) {
  .panel h2 { font-size: 24px; margin-bottom: 12px; }
  .big { min-height: 72px; font-size: 28px; }
  #hearts i { width: 34px; height: 31px; }
  #gaugeTrack { width: 160px; }
  #card { top: calc(40px + var(--st)); } #card b { font-size: 24px; }
  #gym { top: calc(44px + var(--st)); } #gymIcon { width: 118px; height: 118px; }
  #hint { top: calc(150px + var(--st)); }
  #finaleMsg span, #loseMsg span { font-size: 36px; }
  .cc img { height: 120px; } .sc { min-height: 150px; }
}
@media (orientation: landscape) and (hover: hover) and (pointer: fine) { #boostBtn { bottom: 72px; right: 24px; } #keyHint { bottom: calc(14px + var(--sb)); } }

/* ================= r7: 반쪽 톡 가르치기 · 도움말 그림(▲ 점프 버튼·화면 반쪽) · 체조 점 가로 · 작은 폰 결승 띠·도감 ================= */
#halfTap { position: absolute; left: 0; right: 0; top: calc(84px + var(--st)); bottom: calc(100px + var(--sb)); display: flex; pointer-events: none; }
#halfTap.hide { display: none; }
#halfTap > div { flex: 1; position: relative; border-radius: 26px; margin: 0 6px; background: rgba(255,216,115,.0); box-shadow: inset 0 0 0 4px rgba(255,255,255,0); }
#halfTap .htL { animation: htBlink 1.6s ease-in-out infinite; }
#halfTap .htR { animation: htBlink 1.6s ease-in-out .8s infinite; }
@keyframes htBlink { 0%, 100% { background: rgba(255,216,115,0); box-shadow: inset 0 0 0 4px rgba(255,255,255,0); } 30%, 60% { background: rgba(255,216,115,.26); box-shadow: inset 0 0 0 4px rgba(255,255,255,.85); } }
#halfTap b { position: absolute; bottom: 10px; padding: 4px 16px 6px; border-radius: 99px; background: var(--purple); color: #fff; font-size: 24px; font-weight: 900; box-shadow: 0 0 0 3px #fff; white-space: nowrap; }
#halfTap .htL b { right: 18%; } #halfTap .htR b { left: 18%; }
#hintPic .hs { left: 50%; top: 0; width: 96px; height: 96px; margin-left: -48px; }
#hintPic .hb { left: 50%; top: 4px; width: 62px; height: 62px; margin-left: -70px; }
.mv-tap { animation: mvTap 1.6s ease-in-out infinite; }
@keyframes mvTap { 0%, 8% { transform: translate(-34px, 4px); } 18% { transform: translate(-34px, -4px); } 26%, 50% { transform: translate(-34px, 4px); } 58% { transform: translate(34px, 4px); } 68% { transform: translate(34px, -4px); } 76%, 100% { transform: translate(34px, 4px); } }
.mv-press { animation: mvPress 1.0s ease-in-out infinite; }
@keyframes mvPress { 0%, 40%, 100% { transform: translate(-16px, 2px); } 20% { transform: translate(-16px, -6px) scale(.94); } }
@media (orientation: landscape) {
  #gymDots { flex-direction: row; gap: 6px; flex-wrap: nowrap; position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); padding: 4px 8px; border-radius: 99px; background: rgba(43,31,87,.35); }   /* r7: 점 6개는 체조 줄 아래 가운데 가로 한 줄(구슬 칸과 안 겹침) */
  #gymDots i { width: 13px; height: 13px; }
}
.famBox span { display: block; }
#hud.fin #hudL, #hud.fin #orbBox, #hud.fin #prog, #hud.fin #stkBadge, #hud.fin #boostTag { visibility: hidden; }
@media (orientation: landscape) {
  .famBox { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; line-height: 1.5; }
  .famBox b { grid-column: 1 / span 2; }
  .stk { height: 80px; }
}
@media (orientation: landscape) and (max-height: 370px) {
  .stk { height: 64px; } .stk em { font-size: 26px; } .stk span { font-size: 11.5px; }
  .famBox { font-size: 13px; padding: 6px 12px; margin-top: 8px; line-height: 1.45; }
  #scrStickers .panel h2 { margin-bottom: 4px; } .stSub { margin-bottom: 6px; font-size: 14px; }
  #finaleMsg span { font-size: 26px; padding: 8px 20px 10px; }
  .fine span { font-size: 12px; white-space: nowrap; letter-spacing: -0.3px; }   /* r7: 작은 폰 타이틀 아래 안내 한 줄 */
}
@media (orientation: landscape) and (hover: hover) and (pointer: fine) and (min-height: 600px) { #keyHint { font-size: 18px; padding: 9px 22px; } }   /* r7: PC 키 안내 글자 조금 크게 */
/* r8c: 고르기 화면 — 장소 카드 줄과 출발 줄 사이를 넓혀 꼬마 쎌이 그 틈에 앉음(카드·✓·출발을 안 덮게, js/kkoma.js place('select')) */
@media (orientation: landscape) and (max-height: 600px) { #scrSelect .diffRow, #scrSelect .big { margin-top: 24px; } }