/* 톱니골 던전 — 거품 UI (시스템 폰트만, 굵게 + 검은 외곽선) */
:root { --s: 1; --ink: #1b1424; --yel: #ffd23f; --sky: #4fc3f7; --red: #e5352b; --brass: #c9a23a; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; height: 100dvh; overflow: hidden; background: #2a1f3d; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; }
body { font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Segoe UI", sans-serif; font-weight: 900; color: #fff; }
/* 화면 아래 잘림(11-13): 100vh 는 폰 주소창이 숨은 큰 높이라 아래가 잘림 → 100dvh, JS(R.resize)가 visualViewport 로 잰 --vw·--vh 를 우선 */
#c { position: fixed; left: 0; top: 0; width: 100vw; width: var(--vw, 100vw); height: 100vh; height: 100dvh; height: var(--vh, 100dvh); display: block; }
#ui { position: fixed; left: 0; top: 0; width: 100vw; width: var(--vw, 100vw); height: 100vh; height: 100dvh; height: var(--vh, 100dvh); pointer-events: none; }
.hide { display: none !important; }
button { font: inherit; cursor: pointer; pointer-events: auto; }

/* 검은 외곽선 글씨 */
.ol { color: #fff; text-shadow:
  0 calc(3px * var(--s)) 0 var(--ink),
  2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink),
  2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink),
  1px 3px 0 var(--ink), -1px 3px 0 var(--ink); letter-spacing: 0.5px; }

/* 거품 버튼 (아트디렉션 3절) */
.bub { border: 3px solid var(--ink); border-radius: calc(18px * var(--s)); padding: calc(8px * var(--s)) calc(22px * var(--s));
  font-size: calc(20px * var(--s)); color: #fff; position: relative;
  box-shadow: 0 4px 0 var(--ink), inset 0 calc(4px * var(--s)) 0 rgba(255,255,255,0.55), inset 0 calc(-5px * var(--s)) 0 rgba(0,0,0,0.16);
  transition: transform 0.06s; }
.bub:active, .bub.press { transform: translateY(3px) scale(0.97); box-shadow: 0 1px 0 var(--ink), inset 0 4px 0 rgba(255,255,255,0.5), inset 0 -3px 0 rgba(0,0,0,0.16); }
.bub.yel { background: linear-gradient(#ffe778, var(--yel) 55%, #f0b400); }
.bub.sky { background: linear-gradient(#8fdcff, var(--sky) 55%, #2a9fd8); }
.bub.red { background: linear-gradient(#ff7a6c, var(--red) 55%, #b8231b); }
.bub.big { font-size: calc(30px * var(--s)); padding: calc(10px * var(--s)) calc(56px * var(--s)); border-radius: calc(24px * var(--s)); }

/* ── HUD ── */
#hud { position: absolute; inset: 0; padding: max(env(safe-area-inset-top), 6px) max(env(safe-area-inset-right), 10px) max(env(safe-area-inset-bottom), 6px) max(env(safe-area-inset-left), 10px); }
#hpBox { position: absolute; left: max(env(safe-area-inset-left), calc(10px * var(--s))); top: calc(8px * var(--s)); display: flex; align-items: center; gap: calc(6px * var(--s)); }
#face { width: calc(64px * var(--s)); height: calc(64px * var(--s)); border-radius: 50%; border: 3px solid var(--ink);
  background: radial-gradient(circle at 50% 35%, #ffe9a8, #f2b84b 70%, #c9862a); box-shadow: 0 3px 0 var(--ink), inset 0 0 0 3px #ffd966; overflow: hidden; position: relative; }
#faceCv { width: 100%; height: 100%; display: block; }
#hpCol { display: flex; flex-direction: column; gap: 2px; }
#nameTag { font-size: calc(15px * var(--s)); line-height: 1; padding-left: 4px; }
#nameTag #lvTag { color: #ffd23f; font-size: calc(13px * var(--s)); margin-left: 4px; }
#lives { display: flex; gap: calc(3px * var(--s)); height: calc(30px * var(--s)); align-items: center; }
#lives .lf { width: calc(32px * var(--s)); height: calc(30px * var(--s)); position: relative; transition: transform 0.15s; }
#lives .lf svg { width: 100%; height: 100%; display: block; overflow: visible; }
#lives .lf .bb { fill: #ff5a4a; stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
#lives .lf .wv { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; }
#lives .lf.off .bb { fill: #4a3f5a; }
#lives .lf.off .wv { stroke: #7b6f8c; }
#lives .lf.off { transform: scale(0.86); }
#lives .lf.lost { animation: lfLost 0.45s cubic-bezier(.2,1.6,.4,1); }
#lives .lf.gain { animation: lfGain 0.4s cubic-bezier(.2,1.8,.4,1); }
#lives .lf.shield .bb { fill: #8fdcff; }
#lives .lf.shield .wv { stroke: #1f86c9; }
@keyframes lfLost { 0% { transform: scale(1.5) rotate(-14deg); } 100% { transform: scale(0.86) rotate(0); } }
@keyframes lfGain { 0% { transform: scale(0.3); } 100% { transform: scale(1); } }
#xpRow { display: flex; align-items: center; gap: calc(4px * var(--s)); font-size: calc(14px * var(--s)); line-height: 1; padding-left: 2px; }
#xpRow .nIco { color: #ffd23f; }
#xpBar { position: relative; width: calc(92px * var(--s)); height: calc(11px * var(--s)); border: 2px solid var(--ink); border-radius: 7px; background: #14213d; overflow: hidden; }
#xpFill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(#fff3a0, #ffc21f); transition: width 0.12s; }

#prog { position: absolute; left: 50%; top: calc(8px * var(--s)); transform: translateX(-50%); display: flex; flex-direction: row; align-items: center; gap: calc(8px * var(--s)); }
#progBar { position: relative; display: flex; width: calc(310px * var(--s)); height: calc(26px * var(--s)); border: 3px solid var(--ink); border-radius: calc(14px * var(--s)); overflow: visible; background: #14213d; box-shadow: 0 3px 0 var(--ink); }
#progBar .seg { flex: 1; display: flex; align-items: center; justify-content: center; font-size: calc(13px * var(--s)); position: relative; border-right: 2px solid rgba(27,20,36,0.7); overflow: hidden; }
#progBar .seg:first-child { border-radius: calc(10px * var(--s)) 0 0 calc(10px * var(--s)); }
#progBar .seg.boss { flex: 0.9; border-right: 0; border-radius: 0 calc(10px * var(--s)) calc(10px * var(--s)) 0; }
#progBar .seg span { position: relative; z-index: 2; }
#progBar .seg .fog { position: absolute; right: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(#41609f, #2b4580 60%, #1f3566); box-shadow: inset 0 3px 0 rgba(255,255,255,0.22); transition: width 0.15s; }
#progBar .seg.boss .fog { background: linear-gradient(#34508c, #223a70 60%, #182c58); }
#progBar .seg.done { background: linear-gradient(#ffe778, #ffc21f 55%, #e89c00); }
#progBar .seg.now span { color: #fff7b0; }
#progGear { position: absolute; top: calc(100% + 1px); width: calc(22px * var(--s)); height: calc(22px * var(--s)); transform: translate(-50%, 0); z-index: 3; filter: drop-shadow(0 2px 0 var(--ink)); transition: left 0.2s; }
#progGear svg { width: 100%; height: 100%; }

#topRight { position: absolute; right: max(env(safe-area-inset-right), calc(10px * var(--s))); top: calc(8px * var(--s)); display: flex; gap: calc(8px * var(--s)); align-items: flex-start; }
#pauseBtn { width: calc(44px * var(--s)); height: calc(44px * var(--s)); padding: 0; border-radius: calc(14px * var(--s)); display: flex; align-items: center; justify-content: center; }
#pauseBtn svg { width: 72%; height: 72%; }
#mapBox { width: calc(128px * var(--s)); height: calc(90px * var(--s)); border: 3px solid var(--ink); border-radius: calc(16px * var(--s)); overflow: hidden; box-shadow: 0 3px 0 var(--ink); background: #e9d3a8; }
#map { width: 100%; height: 100%; display: block; }

#bossBar { position: absolute; left: 50%; top: calc(46px * var(--s)); transform: translateX(-50%); width: calc(380px * var(--s)); max-width: 46vw; display: flex; flex-direction: column; align-items: center; }
#bossBar .bname { font-size: calc(15px * var(--s)); }
#bossTrack { position: relative; width: 100%; height: calc(20px * var(--s)); border: 3px solid var(--ink); border-radius: calc(11px * var(--s)); background: #2c2438; overflow: hidden; box-shadow: 0 3px 0 var(--ink); }
#bossFill, #bossGhost { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; }
#bossGhost { background: #fff; transition: width 0.45s 0.2s; }
#bossFill { background: linear-gradient(#b7b0e0, #8a82bf 55%, #625a96); box-shadow: inset 0 3px 0 rgba(255,255,255,0.4); transition: width 0.1s; }
#bossTrack .btick { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--ink); }

#combo { position: absolute; right: calc(24px * var(--s)); top: 36%; text-align: center; transform-origin: 50% 50%; }
#comboN { font-size: calc(37px * var(--s)); line-height: 1; color: #ffd23f; }
#combo .cl { font-size: calc(14px * var(--s)); margin-top: -2px; }
#combo.bump { animation: bump 0.22s ease-out; }
@keyframes bump { 0% { transform: scale(1.5) rotate(-6deg); } 100% { transform: scale(1) rotate(0); } }

#overPips { position: absolute; left: 0; top: 0; display: flex; gap: 3px; opacity: 0; transition: opacity 0.15s; }
#overPips i { display: block; width: calc(10px * var(--s)); height: calc(10px * var(--s)); border-radius: 50%; border: 2px solid var(--ink); background: #5b4f6b; }
#overPips i.on { background: #ffd23f; box-shadow: 0 0 8px #ffd23f; }
#overPips.show { opacity: 1; }

#speech { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: calc(16px * var(--s));
  padding: calc(6px * var(--s)) calc(14px * var(--s)); font-size: calc(18px * var(--s)); white-space: nowrap; box-shadow: 0 3px 0 var(--ink); animation: popIn 0.3s cubic-bezier(.2,1.6,.4,1); }
#speech::after { content: ""; position: absolute; left: 50%; bottom: calc(-12px * var(--s)); width: calc(16px * var(--s)); height: calc(16px * var(--s)); background: #fff; border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: translateX(-50%) rotate(45deg); }
@keyframes popIn { 0% { transform: translate(-50%, -100%) scale(0.2); } 100% { transform: translate(-50%, -100%) scale(1); } }
@keyframes popInBar { 0% { transform: translateX(-50%) scale(0.3); } 100% { transform: translateX(-50%) scale(1); } }

#zoneVig { position: absolute; inset: 0; pointer-events: none; opacity: 0; box-shadow: inset 0 0 calc(34px * var(--s)) calc(6px * var(--s)) rgba(126,120,168,0.5); }
#zoneVig.on { animation: zoneFlash 0.3s ease-out; }
@keyframes zoneFlash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* 이동 스틱 */
#stick { position: absolute; left: 0; top: 0; width: 0; height: 0; }
#stickBase { position: absolute; width: calc(120px * var(--s)); height: calc(120px * var(--s)); transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(79,195,247,0.30), rgba(30,90,160,0.45)); border: 3px solid rgba(27,20,36,0.8); box-shadow: inset 0 0 0 4px rgba(255,255,255,0.35), 0 3px 0 rgba(27,20,36,0.6); }
#stickKnob { position: absolute; width: calc(58px * var(--s)); height: calc(58px * var(--s)); transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #b6ecff, #4fc3f7 50%, #1f86c9); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink), inset 0 4px 0 rgba(255,255,255,0.6); }
#stick { opacity: 0.75; }
#stick.idle { opacity: 0.35; }
#keyHint { position: absolute; left: calc(14px * var(--s)); bottom: max(calc(12px * var(--s)), env(safe-area-inset-bottom, 0px)); font-size: calc(13px * var(--s)); background: rgba(27,20,36,0.55); border-radius: 12px; padding: 6px 12px; color: #fff; }
#keyHint b { color: #ffd23f; }

/* 오른쪽 아래 둥근 버튼 */
.rbtn { position: absolute; pointer-events: auto; display: flex; align-items: center; justify-content: center; touch-action: none; }
.rbtn .core { width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--ink); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 0 var(--ink), inset 0 6px 0 rgba(255,255,255,0.45), inset 0 -7px 0 rgba(0,0,0,0.18); }
.rbtn .ico { width: 62%; height: 62%; filter: drop-shadow(0 2px 0 rgba(27,20,36,0.6)); }
.rbtn .lbl { position: absolute; bottom: calc(-6px * var(--s)); font-size: calc(15px * var(--s)); white-space: nowrap; }
#btnBig { right: calc(152px * var(--s)); bottom: calc(128px * var(--s)); width: calc(84px * var(--s)); height: calc(84px * var(--s)); z-index: 2; }
#bigRing { position: absolute; inset: calc(-9px * var(--s)); width: calc(100% + 18px * var(--s)); height: calc(100% + 18px * var(--s)); }
#btnBig .core { width: 100%; height: 100%; background: radial-gradient(circle at 40% 30%, #c9efff, #4fc3f7 55%, #1f8fd0); transition: transform 0.06s; }
#btnBig .lbl { font-size: calc(15px * var(--s)); bottom: calc(-9px * var(--s)); }
#btnBig.press .core { transform: scale(0.92); }
#btnBig.ready .core { background: radial-gradient(circle at 40% 30%, #fff7b0, #ffd23f 50%, #f0a000); animation: ready 0.7s ease-in-out infinite; }
#btnBig.ready #bigArc { stroke: #fff; filter: drop-shadow(0 0 4px #ffe778); animation: arcBlink 0.5s ease-in-out infinite; }
#btnBig.ready::after { content: ""; position: absolute; inset: calc(-16px * var(--s)); border-radius: 50%; border: 4px solid rgba(255,230,120,0.9); animation: ring 0.9s ease-out infinite; pointer-events: none; }
#btnBig.ready::before { content: "✦"; position: absolute; right: calc(-6px * var(--s)); top: calc(-12px * var(--s)); font-size: calc(26px * var(--s)); color: #fff; text-shadow: 0 0 6px #ffe778, 0 2px 0 var(--ink); animation: twinkle 0.6s ease-in-out infinite; pointer-events: none; z-index: 2; }
@keyframes ready { 0%,100% { transform: rotate(-7deg) scale(1); } 50% { transform: rotate(7deg) scale(1.08); } }
@keyframes ring { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes arcBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes twinkle { 0%,100% { transform: scale(0.6) rotate(0); opacity: 0.6; } 50% { transform: scale(1.2) rotate(40deg); opacity: 1; } }
body.lefty #btnBig { right: auto; left: calc(152px * var(--s)); }
body.lefty #btnSnd { right: auto; left: max(calc(26px * var(--s)), env(safe-area-inset-left, 0px)); }
body.lefty #keyHint { left: auto; right: 14px; }

/* 떠오르는 숫자·글자 */
#fxText { position: absolute; inset: 0; overflow: hidden; }
.ftext { position: absolute; left: 0; top: 0; font-size: calc(24px * var(--s)); white-space: nowrap; will-change: transform; color: #fff;
  text-shadow: 0 3px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink); }
/* 숫자: 크고 또렷하게 (굵은 외곽선 2겹, 단계별 색) */
.ftext.dmg { font-size: calc(27px * var(--s)); letter-spacing: 1px;
  text-shadow: 0 calc(4px * var(--s)) 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 3px 3px 0 var(--ink), -3px 3px 0 var(--ink), 3px -3px 0 var(--ink), -3px -3px 0 var(--ink), 0 calc(6px * var(--s)) 0 rgba(27,20,36,0.45); }
.ftext.d0 { color: #fff; }
.ftext.d1 { color: #ffe778; font-size: calc(31px * var(--s)); }
.ftext.d2 { color: #ffb21a; font-size: calc(37px * var(--s)); }
.ftext.d3 { color: #ff6a4a; font-size: calc(46px * var(--s)); }
.ftext.boing { font-size: calc(30px * var(--s)); color: #ffb3c7; }
.ftext.thanks { font-size: calc(28px * var(--s)); color: #fff3a0; }
.ftext.echo { font-size: calc(26px * var(--s)); color: #9fd0ff; }
.ftext.cheer { font-size: calc(32px * var(--s)); color: #ffd23f; }
.ftext.hint { font-size: calc(16px * var(--s)); color: #bdf0ff; }
.mhp { position: absolute; left: 0; top: 0; width: calc(40px * var(--s)); height: calc(7px * var(--s)); border: 2px solid var(--ink); border-radius: 5px; background: #3a2f48; overflow: hidden; display: none; }
.mhp i { display: block; height: 100%; width: 100%; background: #b9b0f0; }
.mhp.tick i { background: #2fb7a8; }
.ftext.word { font-size: calc(26px * var(--s)); color: #8ff0ff; }
.ftext.heal { color: #8cf06a; }
.ftext.zone { color: #c7c0e8; font-size: calc(18px * var(--s)); }
.ftext.pop { font-size: calc(30px * var(--s)); color: #ffe7f7; }

/* 배너·카운트다운 */
#banner { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
#banner .inner { font-size: calc(40px * var(--s)); white-space: nowrap; background: linear-gradient(90deg, rgba(229,53,43,0), rgba(229,53,43,0.92) 15%, rgba(229,53,43,0.92) 85%, rgba(229,53,43,0)); padding: calc(6px * var(--s)) calc(70px * var(--s)); }
#banner.boss .inner { background: linear-gradient(90deg, rgba(94,90,122,0), rgba(94,90,122,0.95) 15%, rgba(94,90,122,0.95) 85%, rgba(94,90,122,0)); }
#banner.gold .inner { background: linear-gradient(90deg, rgba(240,180,0,0), rgba(240,180,0,0.95) 15%, rgba(240,180,0,0.95) 85%, rgba(240,180,0,0)); }
#banner .sub { font-size: calc(18px * var(--s)); margin-top: 4px; }
#banner.show { animation: bannerIn 0.45s cubic-bezier(.2,1.5,.4,1); }
@keyframes bannerIn { 0% { transform: translate(-50%, -50%) scale(0.2, 0.2); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
#count { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font-size: calc(110px * var(--s)); color: #ffd23f; }
#count.go { color: #fff; font-size: calc(80px * var(--s)); }
#count.show { animation: countIn 0.5s cubic-bezier(.2,1.6,.4,1); }
@keyframes countIn { 0% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); } }

/* 화면들 */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: auto; }
.screen.dim { background: rgba(27,20,40,0.55); }
.panel { max-width: 92vw; background: linear-gradient(#fff6e0, #f3e3c3); border: 4px solid var(--ink); border-radius: calc(26px * var(--s)); box-shadow: 0 6px 0 var(--ink), inset 0 -8px 0 rgba(201,162,58,0.35); padding: calc(14px * var(--s)) calc(26px * var(--s)) calc(18px * var(--s)); color: var(--ink); min-width: calc(360px * var(--s)); max-height: 94vh; position: relative; animation: panelIn 0.35s cubic-bezier(.2,1.5,.4,1); }
@keyframes panelIn { 0% { transform: scale(0.4); } 100% { transform: scale(1); } }
.panel::before { content: ""; position: absolute; left: -4px; right: -4px; top: -4px; height: calc(16px * var(--s)); border-radius: calc(26px * var(--s)) calc(26px * var(--s)) 0 0; background: linear-gradient(#e0bb52, var(--brass)); border: 4px solid var(--ink); border-bottom: 0; }
.ptitle { text-align: center; font-size: calc(26px * var(--s)); line-height: 1.18; white-space: pre-line; word-break: keep-all; max-width: calc(330px * var(--s)); margin: calc(10px * var(--s)) auto calc(6px * var(--s)); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 18px; font-size: calc(17px * var(--s)); padding: calc(6px * var(--s)) 0; pointer-events: auto; }
.tog { width: calc(62px * var(--s)); height: calc(32px * var(--s)); border-radius: 20px; border: 3px solid var(--ink); background: #b9aec7; position: relative; padding: 0; box-shadow: 0 3px 0 var(--ink); }
.tog i { position: absolute; top: 2px; left: 2px; width: calc(22px * var(--s)); height: calc(22px * var(--s)); border-radius: 50%; background: #fff; border: 2px solid var(--ink); transition: left 0.15s; }
.tog.on { background: #4cc93a; }
.tog.on i { left: calc(100% - 2px - 22px * var(--s)); }
input[type=range] { width: calc(150px * var(--s)); accent-color: #e5352b; pointer-events: auto; }
.btns { display: flex; gap: 14px; justify-content: center; margin-top: calc(12px * var(--s)); }

/* 타이틀 */
#title { background: linear-gradient(90deg, rgba(27,20,40,0.45), rgba(27,20,40,0) 55%); justify-content: flex-start; align-items: flex-start; padding: 5vh 0 0 7vw; }
.logo { position: relative; text-align: center; transform: rotate(-3deg); }
.logo .l1, .logo .l2 { display: flex; justify-content: center; gap: 2px; line-height: 0.95; }
.logo span { display: inline-block; font-size: calc(78px * var(--s)); color: #ffd23f; position: relative;
  text-shadow: 0 6px 0 var(--ink), 4px 0 0 var(--ink), -4px 0 0 var(--ink), 0 4px 0 var(--ink), 0 -4px 0 var(--ink), 4px 4px 0 var(--ink), -4px 4px 0 var(--ink), 4px -4px 0 var(--ink), -4px -4px 0 var(--ink), 2px 8px 0 var(--ink), -2px 8px 0 var(--ink), 0 10px 0 rgba(27,20,36,0.4);
  animation: wob 2.4s ease-in-out infinite; }
.logo .l2 span { color: #ff6a4a; font-size: calc(88px * var(--s)); }
.logo span:nth-child(2) { animation-delay: 0.2s; } .logo span:nth-child(3) { animation-delay: 0.4s; }
.logo .l2 span:nth-child(1) { animation-delay: 0.3s; } .logo .l2 span:nth-child(2) { animation-delay: 0.5s; }
@keyframes wob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
/* 2026-11-13 이름: 에코 제로 로고 그림(게임_비서캐릭터/로고/logos.html 의 E1) */
.logoImg { display: block; width: calc(420px * var(--s)); max-width: 46vw; height: auto; margin: 0 auto; animation: wob 2.8s ease-in-out infinite; filter: drop-shadow(0 4px 0 rgba(0,0,0,.25)); }
.srName { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.logo .tag { font-size: calc(17px * var(--s)); margin-top: 8px; transform: rotate(3deg); }
.gearL { position: absolute; left: calc(-46px * var(--s)); top: calc(-8px * var(--s)); width: calc(70px * var(--s)); height: calc(70px * var(--s)); border-radius: 50%;
  background: radial-gradient(circle, #e5352b 0 22%, var(--ink) 22% 28%, #ffd23f 28% 62%, var(--ink) 62% 70%, transparent 70%); animation: spin 6s linear infinite; }
.gearL::before { content: ""; position: absolute; inset: -10%; background: repeating-conic-gradient(#ffd23f 0 12deg, transparent 12deg 30deg); border-radius: 50%; mask: radial-gradient(circle, transparent 55%, #000 56% 70%, transparent 71%); -webkit-mask: radial-gradient(circle, transparent 55%, #000 56% 70%, transparent 71%); }
@keyframes spin { to { transform: rotate(360deg); } }
#startBtn { position: absolute; bottom: 17vh; bottom: calc(var(--vh, 100dvh) * 0.17); left: calc(7vw + 150px * var(--s)); transform: translateX(-50%); }
#startBtn:active { transform: translateX(-50%) translateY(3px); }
#startBtn > span { display: inline-block; animation: breathe 1.3s ease-in-out infinite; }
#startBtn::after { content: ""; position: absolute; inset: -8px; border-radius: inherit; border: 4px solid rgba(255,226,120,0.85); animation: ring 1.3s ease-out infinite; pointer-events: none; }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
#howto { position: absolute; bottom: 2vh; bottom: max(calc(var(--vh, 100dvh) * 0.02), env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; width: 94vw; font-size: calc(13px * var(--s)); }
.hrow { background: rgba(27,20,36,0.6); border-radius: 12px; padding: 4px 10px; }
.hrow b { color: #ffd23f; }
body.touch .pcOnly { display: none; }
body:not(.touch) .touchOnly { display: none; }

/* 결과 */
.res { text-align: center; margin-left: 30vw; }
body.ended #btnBig, body.ended #btnSnd, body.ended #stick, body.ended #keyHint, body.ended #combo, body.ended #overPips, body.ended #hint { display: none !important; }
#stars { display: flex; justify-content: center; gap: calc(8px * var(--s)); margin: 0 0 calc(8px * var(--s)); }
#stars .st { width: calc(64px * var(--s)); height: calc(64px * var(--s)); display: block; background: #b9aec7;
  clip-path: polygon(50% 2%, 63% 36%, 98% 37%, 70% 59%, 80% 95%, 50% 74%, 20% 95%, 30% 59%, 2% 37%, 37% 36%); position: relative; transform: scale(0); }
#stars .st:nth-child(2) { transform: scale(0) translateY(-10px); }
#stars .st.on { background: radial-gradient(circle at 40% 35%, #fff7b0, #ffd23f 45%, #f0a000); }
#stars .st.show { animation: starIn 0.45s cubic-bezier(.2,1.8,.4,1) forwards; }
#stars .st:nth-child(2).show { animation-name: starIn2; }
@keyframes starIn { 0% { transform: scale(0) rotate(-90deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes starIn2 { 0% { transform: scale(0) rotate(-90deg) translateY(-10px); } 100% { transform: scale(1.15) rotate(0) translateY(-10px); } }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: calc(6px * var(--s)) calc(12px * var(--s)); margin: calc(6px * var(--s)) 0 calc(12px * var(--s)); }
.srow { display: flex; justify-content: space-between; gap: 12px; background: rgba(201,162,58,0.22); border: 2px solid rgba(27,20,36,0.25); border-radius: 12px; padding: calc(5px * var(--s)) calc(12px * var(--s)); font-size: calc(16px * var(--s)); }
.srow b { color: #e5352b; }

/* 세로 안내 */
#rotate { background: #2a1f3d; z-index: 50; font-size: 22px; gap: 20px; }
#rotate .phone { width: 54px; height: 92px; border: 5px solid #fff; border-radius: 12px; animation: rot 1.6s ease-in-out infinite; }
@keyframes rot { 0%,30% { transform: rotate(0); } 60%,100% { transform: rotate(-90deg); } }

/* 로딩 */
#loading { background: radial-gradient(circle at 50% 40%, #4a3a66, #2a1f3d); gap: 14px; }
.ltitle { font-size: 44px; color: #ffd23f; }
.lbar { width: 260px; height: 22px; border: 3px solid var(--ink); border-radius: 12px; background: #3a2f48; overflow: hidden; box-shadow: 0 3px 0 var(--ink); }
#lfill { height: 100%; width: 5%; background: linear-gradient(#ffe778, #ffc21f); transition: width 0.2s; }
.ltxt { font-size: 16px; }

/* 한 줄 안내 (첫 30초: 움직이기 → 줍기 → 큰 소리) */
#hint { position: absolute; left: 50%; bottom: max(calc(18px * var(--s)), env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); font-size: calc(19px * var(--s)); white-space: nowrap; background: rgba(27,20,36,0.62); border-radius: calc(16px * var(--s)); padding: calc(5px * var(--s)) calc(16px * var(--s)); animation: popInBar 0.3s cubic-bezier(.2,1.6,.4,1); }

/* 비서 쎌 (진행자, 11-13) — 빨간 젤리 세포. 왼쪽 얼굴 아래에 작게(가로 폰 390 높이에서 캐릭터 22% 이하), 조작 버튼·체력 칸과 안 겹치게 */
.ssel { pointer-events: none; }
.ssel .sselImg { display: block; width: auto; flex: none; filter: drop-shadow(0 3px 0 rgba(27,20,36,0.55)); transform-origin: 50% 100%; -webkit-user-drag: none; user-select: none; }
.ssel .sselImg.noimg { visibility: hidden; width: 0 !important; }
.ssel .sselImg.pop { animation: sselPop 0.55s cubic-bezier(.2,1.6,.4,1), sselBob 1.5s ease-in-out 0.55s infinite; }
.ssel .gtxt { position: relative; display: flex; flex-direction: column; line-height: 1.18; background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: calc(16px * var(--s)); box-shadow: 0 3px 0 var(--ink);
  padding: calc(4px * var(--s)) calc(12px * var(--s)) calc(5px * var(--s)); word-break: keep-all; animation: popInSsel 0.3s cubic-bezier(.2,1.6,.4,1); }
.ssel .gtxt b { font-size: calc(12px * var(--s)); color: #e5352b; letter-spacing: 1px; }
.ssel .gtxt span { font-size: calc(16px * var(--s)); }
@keyframes sselPop { 0% { transform: translateY(18%) scale(0.55, 0.45); } 45% { transform: translateY(-14%) scale(0.92, 1.12); } 70% { transform: translateY(0) scale(1.08, 0.92); } 100% { transform: none; } }
@keyframes sselBob { 0%,100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-5%) scale(0.98, 1.02); } }
@keyframes sselWave { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes popInSsel { 0% { transform: scale(0.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
/* 게임 중: 얼굴·소리 칸 아래 왼쪽 */
#grunt { position: absolute; z-index: 26; left: max(env(safe-area-inset-left, 0px), calc(8px * var(--s))); top: calc(102px * var(--s)); display: flex; align-items: center; gap: calc(4px * var(--s)); max-width: 46vw; }
#grunt .sselImg { height: min(calc(82px * var(--s)), 21vh); }
#grunt .gtxt { max-width: calc(262px * var(--s)); }
#grunt .gtxt::before { content: ""; position: absolute; left: calc(-9px * var(--s)); top: 50%; width: calc(12px * var(--s)); height: calc(12px * var(--s)); background: #fff; border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: translateY(-50%) rotate(45deg); }
body.lefty #grunt { left: max(env(safe-area-inset-left, 0px), calc(8px * var(--s))); }
/* 한 줄 안내 왼쪽에 쎌 얼굴 (그림 못 불러와도 빈 자리만) */
#hint { padding-left: calc(44px * var(--s)) !important; }
#hint::before { content: ""; position: absolute; left: calc(4px * var(--s)); bottom: calc(-2px * var(--s)); width: calc(38px * var(--s)); height: calc(40px * var(--s)); background: url(../assets/img/assistant/ssel/smile.webp) center bottom / contain no-repeat; }
/* 타이틀: 오른쪽에서 손 흔들며 안내 */
#sselTitle { position: absolute; right: max(env(safe-area-inset-right, 0px), 2.5vw); bottom: calc(var(--vh, 100dvh) * 0.02 + 34px * var(--s)); display: flex; flex-direction: column; align-items: flex-end; gap: calc(6px * var(--s)); }
#sselTitle .sselImg { height: min(calc(86px * var(--s)), 21vh); }
#sselTitle .sselImg.wave { animation: sselWave 1.1s ease-in-out infinite; }
#sselTitle .sselImg.wave.pop { animation: sselPop 0.55s cubic-bezier(.2,1.6,.4,1), sselWave 1.1s ease-in-out 0.55s infinite; }
#sselTitle .gtxt { order: -1; width: max-content; max-width: calc(210px * var(--s)); }
#sselTitle .gtxt::after { content: ""; position: absolute; right: calc(34px * var(--s)); bottom: calc(-9px * var(--s)); width: calc(12px * var(--s)); height: calc(12px * var(--s)); background: #fff; border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg); }
/* 결과: 패널 오른쪽 아래에 붙어서 (왼쪽은 SEFO 자리) */
#sselRes { position: absolute; left: calc(100% - 16px * var(--s)); bottom: calc(-6px * var(--s)); display: flex; flex-direction: column; align-items: flex-start; gap: calc(2px * var(--s)); }
#sselRes .sselImg { height: min(calc(92px * var(--s)), 24vh); margin-left: calc(4px * var(--s)); }
#sselRes .gtxt { width: max-content; max-width: calc(128px * var(--s)); text-align: left; }
#sselRes .gtxt::after { content: ""; position: absolute; left: calc(30px * var(--s)); bottom: calc(-9px * var(--s)); width: calc(12px * var(--s)); height: calc(12px * var(--s)); background: #fff; border-right: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg); }
/* 로딩 */
#sselLoad { height: min(110px, 26vh); width: auto; animation: sselBob 1.2s ease-in-out infinite; transform-origin: 50% 100%; }

/* 쉼터: 3택1 */
#shelter { position: absolute; left: 50%; top: calc(54px * var(--s)); transform: translateX(-50%); display: flex; gap: calc(10px * var(--s)); pointer-events: none; animation: popInBar 0.35s cubic-bezier(.2,1.6,.4,1); }
#shelter .sc { pointer-events: auto; display: flex; align-items: center; gap: calc(6px * var(--s)); background: linear-gradient(#fff6e0, #f3e3c3); color: var(--ink); border: 3px solid var(--ink); border-radius: calc(18px * var(--s)); padding: calc(4px * var(--s)) calc(14px * var(--s)) calc(4px * var(--s)) calc(6px * var(--s));
  box-shadow: 0 4px 0 var(--ink), inset 0 -5px 0 rgba(201,162,58,0.35); font-size: calc(17px * var(--s)); white-space: nowrap; transition: transform 0.06s; }
#shelter .sc canvas { width: calc(46px * var(--s)); height: calc(46px * var(--s)); }
#shelter .sc:active, #shelter .sc.pick { transform: translateY(3px) scale(0.96); box-shadow: 0 1px 0 var(--ink); }
#shelter .sc.pick { background: linear-gradient(#fff7b0, #ffd23f); }
#shelter .sc .k { font-size: calc(11px * var(--s)); color: #8a6420; margin-left: 2px; }
body.touch #shelter .sc .k, body.touch #cards .k { display: none; }

/* 리믹스 카드 */
#cards { gap: calc(8px * var(--s)); z-index: 20; }
#cards .ctitle { font-size: calc(34px * var(--s)); color: #ffd23f; animation: bannerIn 0.4s cubic-bezier(.2,1.5,.4,1); transform: none; }
#cards .csub { font-size: calc(15px * var(--s)); }
#cardRow { display: flex; gap: calc(16px * var(--s)); }
.card { position: relative; width: calc(150px * var(--s)); padding: calc(10px * var(--s)) calc(6px * var(--s)) calc(10px * var(--s)); display: flex; flex-direction: column; align-items: center; gap: calc(2px * var(--s)); color: var(--ink);
  background: linear-gradient(#fff6e0, #f3e3c3); border: 4px solid var(--ink); border-radius: calc(22px * var(--s)); box-shadow: 0 6px 0 var(--ink), inset 0 -8px 0 rgba(201,162,58,0.35); animation: cardIn 0.4s cubic-bezier(.2,1.5,.4,1) backwards; transition: transform 0.08s; }
.card:nth-child(2) { animation-delay: 0.07s; } .card:nth-child(3) { animation-delay: 0.14s; }
.card::before { content: ""; position: absolute; left: -4px; right: -4px; top: -4px; height: calc(14px * var(--s)); border-radius: calc(22px * var(--s)) calc(22px * var(--s)) 0 0; background: var(--cc, #c9a23a); border: 4px solid var(--ink); border-bottom: 0; }
.card:active, .card.pick { transform: translateY(4px) scale(0.97); box-shadow: 0 2px 0 var(--ink); }
.card.pick { background: linear-gradient(#fff7b0, #ffd23f); }
.card canvas { width: calc(104px * var(--s)); height: calc(104px * var(--s)); margin-top: calc(8px * var(--s)); }
.card .ctag { font-size: calc(12px * var(--s)); height: calc(15px * var(--s)); color: #7a3c00; letter-spacing: 1px; }
.card .cname { font-size: calc(21px * var(--s)); white-space: nowrap; }
.card .pips { display: flex; gap: 4px; margin-top: 2px; }
.card .pips i { width: calc(13px * var(--s)); height: calc(13px * var(--s)); border-radius: 50%; border: 2px solid var(--ink); background: #cfc3b0; }
.card .pips i.on { background: #ffc21f; }
.card .pips i.new { background: #4cc93a; animation: twinkle 0.7s ease-in-out infinite; }
.card .k { position: absolute; right: calc(8px * var(--s)); top: calc(16px * var(--s)); font-size: calc(12px * var(--s)); color: #8a6420; }
@keyframes cardIn { 0% { transform: translateY(60px) scale(0.5) rotate(-8deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
/* 고치 풀림 막대 */
.mhp.coc i { background: #ffd23f; }
#banner.name .inner { font-size: calc(48px * var(--s)); letter-spacing: 4px; color: #e9e4ff; }

/* 카드가 떠 있는 동안: 떠 있는 글자·안내·배너·말풍선은 숨기고(카드 뒤로 비치지 않게), 위쪽 HUD(얼굴·말풍선 칸·층 게이지·미니맵)는 어두운 막 위로 올려 탁해지지 않게 */
body.cardsOpen #fxText, body.cardsOpen #hint, body.cardsOpen #banner, body.cardsOpen #speech, body.cardsOpen #grunt, body.cardsOpen #combo, body.cardsOpen #overPips,
body.cardsOpen .mhp, body.cardsOpen #keyHint, body.cardsOpen #count, body.cardsOpen #shelter, body.cardsOpen #bossBar { visibility: hidden; }
#hpBox, #prog, #topRight { z-index: 25; }
body.cardsOpen #pauseBtn { pointer-events: none; }
#cards.screen.dim { background: radial-gradient(ellipse at 50% 58%, rgba(27,20,40,0.62) 0%, rgba(27,20,40,0.56) 55%, rgba(27,20,40,0.42) 100%); }

/* 패널(카드·결과·쉬어가기·멈춤)이 뜨면 미니맵·멈춤 버튼·진행 바를 숨김 (패널과 겹치지 않게). 결과·멈춤 때는 HUD 전체 */
body.cardsOpen #topRight, body.cardsOpen #prog { visibility: hidden; }
body.panelOpen #hud { visibility: hidden; }
body.panelOpen #fxText { visibility: hidden; }
/* 보스 등장 확대 동안 HUD 를 잠깐 숨김 (SEFO·보스가 버튼 밑에 깔리지 않게). 조작은 그대로 됨 */
#hpBox, #prog, #topRight, #bossBar, #btnBig, #btnSnd, #stick, #hint, #keyHint, #combo { transition: opacity 0.25s; }
body.cine #hpBox, body.cine #prog, body.cine #topRight, body.cine #bossBar, body.cine #btnBig, body.cine #btnSnd, body.cine #stick, body.cine #hint, body.cine #keyHint, body.cine #combo, body.cine #overPips { opacity: 0 !important; pointer-events: none; }

/* 큰 소리 버튼 반응: 누른 즉시 번쩍·눌림, 못 쓸 때 흔들림 + 「아직!」, 가득 차면 더 크게 맥박·빛 */
#btnBig.fire .core { animation: bigFire 0.4s ease-out; }
@keyframes bigFire { 0% { transform: scale(0.82); filter: brightness(2.2); } 45% { transform: scale(1.12); filter: brightness(1.5); } 100% { transform: scale(1); filter: none; } }
#btnBig.deny { animation: bigDeny 0.36s ease-in-out; }
@keyframes bigDeny { 0%,100% { transform: translateX(0); } 20% { transform: translateX(calc(-7px * var(--s))); } 40% { transform: translateX(calc(7px * var(--s))); } 60% { transform: translateX(calc(-5px * var(--s))); } 80% { transform: translateX(calc(4px * var(--s))); } }
#bigNo { position: absolute; left: 50%; top: calc(-30px * var(--s)); transform: translateX(-50%); font-size: calc(20px * var(--s)); white-space: nowrap; color: #bdf0ff; display: none; pointer-events: none; }
#btnBig.deny #bigNo { display: block; animation: popInBar 0.2s cubic-bezier(.2,1.6,.4,1); }
#btnBig.ready .core { box-shadow: 0 5px 0 var(--ink), inset 0 6px 0 rgba(255,255,255,0.55), inset 0 -7px 0 rgba(0,0,0,0.16), 0 0 calc(22px * var(--s)) calc(8px * var(--s)) rgba(255,214,70,0.95); animation: ready 0.6s ease-in-out infinite; }
@keyframes ready { 0%,100% { transform: rotate(-7deg) scale(1); } 50% { transform: rotate(7deg) scale(1.14); } }
#btnBig.ready .lbl { color: #ffe778; animation: breathe 0.6s ease-in-out infinite; }
#btnBig.ready::after { border-width: 5px; animation-duration: 0.7s; }
#stars { margin-top: calc(10px * var(--s)); }

/* 「소리」 버튼(11-12 대표 결정): 오른쪽 아래 엄지 자리에 크게 — 누르고 있는 동안 소리 파동, 누른 채 끌면 그쪽으로. 큰 소리 버튼은 그 왼쪽 위에 조금 작게 */
#btnSnd { right: max(calc(26px * var(--s)), env(safe-area-inset-right, 0px)); bottom: max(calc(24px * var(--s)), env(safe-area-inset-bottom, 0px)); width: calc(124px * var(--s)); height: calc(124px * var(--s)); --kx: 0px; --ky: 0px; }
#btnSnd::before { content: ""; position: absolute; inset: calc(-20px * var(--s)); border-radius: 50%; }                     /* 엄지가 조금 빗나가도 눌리게 */
#btnSnd::after { content: ""; position: absolute; inset: calc(-7px * var(--s)); border-radius: 50%; border: calc(4px * var(--s)) solid rgba(27,20,36,0.55); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.3); pointer-events: none; }
#btnSnd .core { background: radial-gradient(circle at 40% 30%, #ffb0a2, #e5352b 55%, #a81f17); transform: translate(var(--kx), var(--ky)); transition: transform 0.05s, filter 0.05s; }
#btnSnd .lbl { font-size: calc(18px * var(--s)); bottom: calc(-6px * var(--s)); pointer-events: none; }
#btnSnd.held .core { transform: translate(var(--kx), var(--ky)) scale(0.93); filter: brightness(1.25); box-shadow: 0 2px 0 var(--ink), inset 0 6px 0 rgba(255,255,255,0.45), inset 0 -7px 0 rgba(0,0,0,0.18), 0 0 calc(16px * var(--s)) calc(4px * var(--s)) rgba(255,120,90,0.8); }
#btnSnd.held::after { border-color: rgba(255,214,70,0.9); }
body:not(.touch) #btnSnd { opacity: 0.85; }

/* 소리 방울 자동/수동 (11-13) — 타이틀(시작 버튼 오른쪽)·멈춤 창·결과 표시 */
.atkSeg { display: inline-flex; align-items: center; gap: calc(4px * var(--s)); pointer-events: auto; }
.atkSeg .atkB { font: inherit; color: var(--ink); border: 3px solid var(--ink); background: #e6dcef; border-radius: calc(14px * var(--s)); padding: calc(5px * var(--s)) calc(14px * var(--s)); box-shadow: 0 3px 0 var(--ink); cursor: pointer; font-size: calc(17px * var(--s)); line-height: 1.1; }
.atkSeg .atkB.on { background: linear-gradient(#ffe778, var(--yel) 55%, #f0b400); }
.atkSeg .atkB:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
#atkPick { position: absolute; bottom: calc(var(--vh, 100dvh) * 0.17 + 6px * var(--s)); left: calc(7vw + 270px * var(--s)); background: rgba(27,20,36,0.62); border-radius: calc(18px * var(--s)); padding: calc(6px * var(--s)) calc(8px * var(--s)) calc(8px * var(--s)) calc(12px * var(--s)); }
#atkPick .atkL { font-size: calc(15px * var(--s)); color: #fff; margin-right: calc(4px * var(--s)); }
#atkPick .atkB { color: #fff; background: #6b5d80; font-size: calc(19px * var(--s)); }
#atkPick .atkB.on { color: #fff; background: linear-gradient(#ff8a6a, #e5352b 60%, #b8241b); }
.atkSeg.sm .atkB { font-size: calc(15px * var(--s)); padding: calc(3px * var(--s)) calc(12px * var(--s)); }
body.atkAuto .manOnly { display: none !important; }
body:not(.atkAuto) .autoOnly { display: none !important; }
#rMode { display: inline-block; margin: 0 auto calc(4px * var(--s)); padding: calc(2px * var(--s)) calc(14px * var(--s)); border: 3px solid var(--ink); border-radius: calc(14px * var(--s)); background: #ffe9a8; font-size: calc(15px * var(--s)); color: var(--ink); }
#rMode.hide { display: none; }

/* 멈춤 창이 가로 폰(390 높이)에서 넘쳐 「계속하기」가 화면 아래로 나가던 것 고침(11-13, 화질 줄 추가 뒤): 줄 간격만 줄이고, 그래도 넘치면 창 안에서 스크롤 */
#pause .panel { overflow-y: auto; padding-top: calc(10px * var(--s)); padding-bottom: calc(12px * var(--s)); }
#pause .ptitle { margin: calc(6px * var(--s)) auto calc(2px * var(--s)); }
#pause .row { padding: calc(3px * var(--s)) 0; }
#pause .btns { margin-top: calc(8px * var(--s)); }
#pause .fsTop { position: absolute; z-index: 2; top: calc(14px * var(--s)); right: calc(12px * var(--s)); pointer-events: auto; cursor: pointer; white-space: nowrap; font: 800 calc(12px * var(--s))/1.15 inherit; padding: calc(4px * var(--s)) calc(9px * var(--s)); color: var(--ink); background: #e6dcff; border: 3px solid var(--ink); border-radius: calc(14px * var(--s)); box-shadow: 0 3px 0 var(--ink); }
#pause .fsTop.on { background: #ffd23a; }
#pause .fsTop:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }   /* 11-14 멈춤 창 「⛶ 전체화면」: 창 오른쪽 위 — 설정 줄을 늘리지 않음(가로 폰에서 계속하기가 밀리지 않게) */