/* 이세계출근 휴대폰 화면 (2026-10-15 상위 모바일 격투·액션 게임 벤치마킹, MOBILE-UX.md)
   html.touch(터치 기기)에서만 적용. 크기 단위 --u = 게임 화면 높이의 1% (game.js fitShell이 넣는다)
   버튼 최소 크기: 애플 44pt · 구글 48dp. 주 버튼(약공격)은 화면 높이 23%. */
[hidden]{display:none!important}
.touch-guide,.menu-tools,.dlg-tap{display:none}
html:not(.touch) .touch-only,html:not(.touch) #mobile,html:not(.touch) #ctlPanel,html:not(.touch) #tapStart{display:none!important}

/* 대화: 말하는 전사만 밝게 · 건너뛰기 (PC 공통) */
.dialogue-screen{cursor:pointer}
.dialogue-screen .dlg-char img{transition:filter .2s}
.dialogue-screen[data-spk=left] .dlg-char.right img,.dialogue-screen[data-spk=right] .dlg-char.left img{filter:brightness(.42) saturate(.55)!important}
.dlg-skip{position:absolute;z-index:4;top:4%;right:3%;padding:8px 14px;border:1px solid #b99c62;background:#1c2136e6;color:#f3e0b6;cursor:pointer;font:14px BlackHan;border-radius:8px}

/* ---------- 화면 틀: 휴대폰 화면 전체 ---------- */
html.touch,html.touch body{background:#000}
html.touch body{-webkit-touch-callout:none}
html.touch #app{display:block;background:#000}
html.touch #game-shell{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);aspect-ratio:auto;box-shadow:none;
  --u:3.9px;--sl:max(10px,env(safe-area-inset-left));--sr:max(10px,env(safe-area-inset-right));--sb:max(6px,env(safe-area-inset-bottom))}
html.touch.rot #game-shell{transform:translate(-50%,-50%) rotate(90deg);--sl:10px;--sr:10px;--sb:6px}
html.touch #game-shell::after{display:none}
html.touch #keyGuide,html.touch #soundBtn,html.touch #cornerBrand{display:none!important}
html.touch #pauseBtn{left:50%;right:auto;top:calc(15.5*var(--u));transform:translateX(-50%);width:max(40px,calc(10*var(--u)));height:max(40px,calc(10*var(--u)));font-size:calc(4*var(--u));opacity:.92}
html.touch #onlineBadge{top:calc(17*var(--u));right:var(--sr);font-size:calc(2.8*var(--u));padding:calc(1*var(--u)) calc(1.6*var(--u));border-radius:8px}
html.touch #onlineBadge button{min-height:40px;padding:0 calc(2*var(--u));border-radius:8px}

/* ---------- 전투 조작: 떠다니는 스틱 + 부채꼴 버튼 ---------- */
html.touch #mobile{display:block;position:absolute;inset:0;z-index:15;padding:0;pointer-events:none;--cs:1;--op:.9;--cx:13.5;--cy:14.5;--sp:0;--up:0}
html.touch #game-shell.ctl-open #mobile{display:block!important;z-index:30}
html.touch #game-shell.ctl-open #mobile *{pointer-events:none!important}
.stick-zone{position:absolute;left:0;bottom:0;width:46%;height:80%;pointer-events:auto;touch-action:none}
.stick-base{position:absolute;pointer-events:none;width:calc(30*var(--u)*var(--cs));height:calc(30*var(--u)*var(--cs));left:calc(var(--sl) + 19*var(--u)*var(--cs));top:calc(100% - var(--sb) - 19*var(--u)*var(--cs));
  transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#ffffff10 0 44%,#0a0c1a73 45% 100%);border:2px solid #e6c78899;opacity:calc(var(--op)*.7);transition:opacity .15s}
.stick-base.on{opacity:1;border-color:#ffe3a2;transition:none}
.stick-knob{position:absolute;left:50%;top:50%;width:44%;height:44%;margin:-22% 0 0 -22%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff8e6,#d9b876 55%,#8a6a3a);box-shadow:0 3px 10px #000a}
.stick-base .sd{position:absolute;font:calc(2.3*var(--u)*var(--cs)) BlackHan;font-style:normal;color:#fff;opacity:.8;text-shadow:0 1px 2px #000}
.sd.up{top:5%;left:50%;transform:translateX(-50%)}.sd.down{bottom:5%;left:50%;transform:translateX(-50%)}.sd.left{left:6%;top:50%;transform:translateY(-50%)}.sd.right{right:6%;top:50%;transform:translateY(-50%)}

#mobile .tb{position:absolute;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;margin:0;padding:0;
  width:calc(var(--s)*var(--u)*var(--cs));height:calc(var(--s)*var(--u)*var(--cs));
  right:calc(var(--sr) + (var(--cx) + var(--x) - var(--s)/2)*var(--u)*var(--cs));bottom:calc(var(--sb) + (var(--cy) + var(--y) - var(--s)/2)*var(--u)*var(--cs));
  border-radius:50%;border:2px solid #f3dfb0cc;background:radial-gradient(circle at 50% 32%,#3a345699,#14142899);color:#fff;opacity:var(--op);text-shadow:0 1px 3px #000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;font-family:BlackHan;box-shadow:0 4px 0 #0009,inset 0 0 0 3px #ffffff12;backdrop-filter:none;transition:transform .06s,filter .06s}
#mobile .tb b{font-weight:400;font-size:calc(var(--s)*.3*var(--u)*var(--cs));letter-spacing:-.5px}
#mobile .tb small{font-family:Jua;font-size:calc(var(--s)*.15*var(--u)*var(--cs));opacity:.92;margin-top:.15em;white-space:nowrap}
#mobile .tb.main b{font-size:calc(var(--s)*.36*var(--u)*var(--cs))}
#mobile .tb.main{background:radial-gradient(circle at 50% 30%,#4f8cf5b8,#173d93b0);border-color:#cfe2ff}
#mobile .tb.heavy{background:radial-gradient(circle at 50% 30%,#f0645ab0,#8c1f1aa8);border-color:#ffd0c8}
#mobile .tb.jump{background:radial-gradient(circle at 50% 30%,#4c5a78a8,#1b2236a0)}
#mobile .tb.dash{background:radial-gradient(circle at 50% 30%,#4a4f60a8,#1a1d27a0)}
#mobile .tb.special{border-color:#ffd28a;background:radial-gradient(circle closest-side,#7a4316b0 0 82%,transparent 84%),conic-gradient(#ffc463 calc(var(--sp)*360deg),#ffffff26 0)}
#mobile:not(.sp-ready) .tb.special{filter:grayscale(.55) brightness(.82)}
#mobile .tb.ultimate{border-color:#d9c3ff;background:radial-gradient(circle closest-side,#3b1f6ec0 0 80%,transparent 82%),conic-gradient(#ffd75e calc(var(--up)*360deg),#ffffff22 0)}
#mobile .tb.ultimate b{font-size:calc(var(--s)*.27*var(--u)*var(--cs))}
#mobile.up-ready .tb.ultimate{opacity:1;border-color:#fff3b0;animation:ultReady .7s ease-in-out infinite;box-shadow:0 0 calc(3*var(--u)) #c48bff,0 0 calc(7*var(--u)) #ffd75e99}
#mobile.up-ready .tb.ultimate small{color:#ffe98a}
@keyframes ultReady{50%{transform:scale(1.07);filter:brightness(1.35)}}
#mobile .tb.skill{border-color:#9ff0e2cc;background:radial-gradient(circle at 50% 30%,#2b5866a8,#0e2230a0)}
#mobile .tb.skill em{font:calc(3.5*var(--u)*var(--cs)) BlackHan;font-style:normal;color:#a6f7e9;line-height:1}
#mobile .tb.skill small{font-size:calc(1.8*var(--u)*var(--cs));line-height:1.12;white-space:normal;word-break:keep-all;text-align:center;max-width:90%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#mobile.no-skill .tb.skill{display:none}
#mobile .tb.down{transform:scale(.9);filter:brightness(1.5)!important;opacity:1}
#mobile .tb.tag{--s:13;--x:0;--y:0;left:calc(var(--sl) + 3*var(--u));top:calc(24*var(--u));right:auto;bottom:auto;border-color:#8fd0ff;background:radial-gradient(circle at 50% 30%,#2f6aa8ee,#102742ee)}
.touch-hint{position:absolute;inset:0;pointer-events:none;animation:hintIn .35s ease-out}
.touch-hint span{position:absolute;padding:calc(1.6*var(--u)) calc(2.6*var(--u));background:#0b0f20e0;border:1px solid #e6c788;border-radius:12px;font:calc(3*var(--u))/1.4 Jua;color:#f5ead0;text-align:center}
.touch-hint .l{left:calc(var(--sl) + 4*var(--u));bottom:calc(38*var(--u))}
.touch-hint .r{right:calc(var(--sr) + 82*var(--u));bottom:calc(var(--sb) + 4*var(--u))}
.touch-hint b{color:#ffd75e;font-family:BlackHan;font-weight:400}
@keyframes hintIn{from{opacity:0;transform:translateY(8px)}}

/* ---------- 시작 화면: 터치 = 전체화면·가로·소리 ---------- */
.tap-start{position:absolute;inset:0;z-index:40;cursor:pointer;background:linear-gradient(90deg,#070914f0,#070914a0 55%,#07091440),url(assets/keyart.webp) 60% center/cover no-repeat,#08090d}
.tap-start .ts-in{position:absolute;left:calc(var(--sl) + 5*var(--u));top:50%;transform:translateY(-50%)}
.tap-start small{display:block;font:calc(3*var(--u)) Jua;letter-spacing:.5em;color:#e4cf9c}
.tap-start h1{margin:calc(1*var(--u)) 0 0;font:900 calc(15*var(--u))/1 Georgia,serif;color:#f1dfb3;text-shadow:0 2px 0 #8a6539,0 0 40px #d4a66b55}
.tap-start h2{margin:calc(1.5*var(--u)) 0 0;font:700 calc(6.5*var(--u)) Georgia,Batang,serif;color:#fff}
.tap-start h2 em{font-style:normal;color:#e6c788}
.tap-start .ts-go{display:inline-block;margin-top:calc(6*var(--u));padding:calc(2.2*var(--u)) calc(4.5*var(--u));border:2px solid #f3dfb0;border-radius:999px;background:#1c1830cc;font:400 calc(4.4*var(--u)) BlackHan;color:#fff3d0;animation:tapPulse 1.2s ease-in-out infinite}
.tap-start p{margin:calc(2.4*var(--u)) 0 0;font:calc(2.9*var(--u))/1.5 Jua;color:#cfc7d8;max-width:calc(90*var(--u))}
@keyframes tapPulse{50%{transform:scale(1.05);box-shadow:0 0 calc(4*var(--u)) #e6c78888}}

/* ---------- 메인 메뉴(로비) ---------- */
html.touch .title-screen{padding:0}
html.touch .title-copy{position:absolute;left:calc(var(--sl) + 3*var(--u));top:calc(8*var(--u));width:48%}
html.touch .title-copy .kicker,html.touch .title-copy .overline,html.touch .title-copy .synopsis,html.touch .title-footer{display:none!important}
html.touch .title-copy h1{font-size:calc(14*var(--u))!important;line-height:1!important;white-space:nowrap!important}
html.touch .title-copy h1 small{font-size:calc(2.8*var(--u))!important;letter-spacing:.5em!important;margin:0 0 calc(1.5*var(--u))!important}
html.touch .title-copy h2{font-size:calc(6.5*var(--u))!important;margin:calc(2*var(--u)) 0 0!important}
html.touch .main-menu{position:absolute;top:calc(4*var(--u))!important;right:var(--sr)!important;bottom:calc(var(--sb) + 3*var(--u))!important;width:47%!important;
  display:grid!important;grid-template-columns:1fr 1fr;grid-template-rows:auto 1.55fr 1fr .8fr;gap:calc(2*var(--u))!important}
html.touch .difficulty-panel{grid-column:1/-1;display:flex;align-items:center;gap:calc(2*var(--u));padding:calc(1.2*var(--u)) calc(2*var(--u))!important;border-radius:10px}
html.touch .difficulty-panel>span{font-size:calc(2.6*var(--u))!important;white-space:nowrap;letter-spacing:0!important}
html.touch #difficultyChoices{flex:1;margin:0!important;gap:calc(1*var(--u))}
html.touch #difficultyChoices button{min-height:max(40px,calc(10*var(--u)))!important;font-size:calc(3.6*var(--u))!important;border-radius:8px;padding:0!important}
html.touch .difficulty-panel small{display:none!important}
html.touch .menu-btn,html.touch .menu-btn.hot{display:flex!important;flex-direction:column;justify-content:center;align-items:flex-start;min-height:44px;padding:calc(1.4*var(--u)) calc(3*var(--u))!important;border-radius:12px;clip-path:none;transform:none!important;text-align:left;line-height:1.15!important}
html.touch .menu-btn[data-open=story]{grid-column:1/-1;background:linear-gradient(110deg,#8a6a3c,#3a2c4a)!important;border:2px solid #f0d697!important;box-shadow:0 0 calc(3*var(--u)) #e6c78855}
html.touch .menu-btn>span{display:block!important;font-size:calc(2.4*var(--u))!important;letter-spacing:.15em!important}
html.touch .menu-btn b{font-size:calc(4.8*var(--u))!important}
html.touch .menu-btn[data-open=story] b{font-size:calc(7.2*var(--u))!important}
html.touch .menu-btn i{display:block!important;font-size:calc(2.6*var(--u))!important;margin-top:calc(.6*var(--u))!important;opacity:.85}
html.touch .menu-btn[data-open=guide] i,html.touch .menu-btn[data-open=gallery] i{display:none!important}
html.touch .menu-btn[data-open=guide] b,html.touch .menu-btn[data-open=gallery] b{font-size:calc(3.8*var(--u))!important}
html.touch .menu-tools{display:flex;position:absolute;z-index:5;left:calc(var(--sl) + 3*var(--u));bottom:calc(var(--sb) + 3*var(--u));gap:calc(2*var(--u))}
html.touch .menu-tools button{display:flex;align-items:center;gap:calc(1*var(--u));height:max(44px,calc(11*var(--u)));padding:0 calc(3*var(--u));border:1px solid #c7aa73;border-radius:999px;background:#151a2ce6;color:#f3e0b6;font:calc(4.2*var(--u)) BlackHan}
html.touch .menu-tools small{font:calc(2.8*var(--u)) Jua}
html.touch #fsBtn.on{background:#5a4a2e}
html.touch.app #fsBtn{display:none}

/* ---------- 공통 머리줄: 뒤로는 왼쪽 위(엄지·모바일 관례) ---------- */
html.touch .screen-head,html.touch .guide-screen .screen-head,html.touch .gallery-screen .screen-head,html.touch .online-screen .screen-head{height:calc(13*var(--u))!important;min-height:0!important;padding:0 calc(var(--sr) + 2*var(--u)) 0 var(--sl)!important;justify-content:flex-start;gap:calc(3*var(--u))}
html.touch .screen-head .back-btn{order:-1;flex:none;min-width:max(70px,calc(17*var(--u)));height:max(40px,calc(9.5*var(--u)));padding:0 calc(2.2*var(--u));border:1px solid #c7aa73;border-radius:10px;background:#1c2136;color:#f3e0b6;text-decoration:none;font:calc(3.6*var(--u)) BlackHan}
html.touch .screen-head h2{font-size:calc(5.4*var(--u))!important;margin-top:calc(.4*var(--u))!important}
html.touch .screen-head span{font-size:calc(2.2*var(--u))!important;letter-spacing:.25em!important}

/* ---------- 캐릭터 선택: 왼쪽 6×4 로스터(스크롤 없이 23명) · 오른쪽 큰 원화 + 출근 버튼(오른손 엄지) ---------- */
html.touch .select-layout{height:calc(100% - 13*var(--u))!important;grid-template-columns:58% 42%!important}
html.touch .roster{padding:calc(1.6*var(--u)) calc(1.4*var(--u)) calc(2*var(--u)) var(--sl)!important;gap:calc(1.2*var(--u))!important}
html.touch .roster-card{border-radius:8px}
html.touch .roster-card span{font-size:calc(2.2*var(--u));left:5px;top:4px}
html.touch .roster-card b{font-size:calc(2.6*var(--u))!important;line-height:1.15;left:4px;right:3px;bottom:4px;word-break:keep-all;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
html.touch .roster-card.on::before{font-size:calc(1.8*var(--u))}
html.touch .fighter-card{padding:calc(2*var(--u)) calc(3*var(--u)) 0!important}
html.touch .fighter-num{font-size:calc(30*var(--u))}
html.touch .fighter-card>img{width:60%!important;height:86%!important;right:calc(var(--sr) - 4%)!important;bottom:-2%!important}
html.touch .fighter-meta{max-width:66%!important;margin-top:0!important}
html.touch .fighter-meta span{font-size:calc(2.3*var(--u))!important;padding:calc(.6*var(--u)) calc(1.4*var(--u))!important}
html.touch .fighter-meta h3{font-size:calc(6.8*var(--u))!important;margin:calc(1.2*var(--u)) 0 calc(.8*var(--u))!important;white-space:nowrap}
html.touch .fighter-meta p{font-size:calc(2.7*var(--u))!important;line-height:1.35;margin:0 0 calc(1.4*var(--u))!important;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
html.touch .stat{width:52%!important;font-size:calc(2.4*var(--u))!important;margin:calc(.5*var(--u)) 0!important;grid-template-columns:calc(9*var(--u)) 1fr!important}
html.touch .signature{display:block!important;width:68%!important;margin-top:calc(1.4*var(--u))!important;padding:calc(1*var(--u)) calc(1.6*var(--u))!important}
html.touch .signature small{font-size:calc(2.1*var(--u))!important}
html.touch .signature b{font-size:calc(3.2*var(--u))!important}
html.touch #fighterMission{display:none}
html.touch .fighter-moves{font-size:calc(2.4*var(--u))!important;line-height:1.45!important;padding:calc(.8*var(--u)) calc(1.2*var(--u))!important;margin-top:calc(.8*var(--u))!important}
html.touch .fighter-card .confirm-btn{left:calc(3*var(--u))!important;right:var(--sr);bottom:calc(var(--sb) + 2*var(--u))!important;min-width:0;height:max(48px,calc(13*var(--u)));padding:0 calc(3*var(--u));font-size:calc(4.6*var(--u))!important;text-align:center;border-radius:12px}

/* ---------- 스토리 지도: 가로로 넘기는 챕터 줄 + 아래 미션 카드 · FIGHT는 오른쪽 아래 ---------- */
html.touch .route{position:absolute!important;left:0!important;right:0!important;top:calc(14*var(--u))!important;bottom:auto!important;height:calc(31*var(--u));display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;align-items:center!important;gap:0 calc(3.2*var(--u))!important;
  overflow-x:auto;overflow-y:hidden;touch-action:pan-x;scrollbar-width:none;padding:0 45% 0 calc(var(--sl) + 4*var(--u))!important}
html.touch .route::-webkit-scrollbar{display:none}
html.touch .route-node{transform:none!important;flex:none;width:calc(13*var(--u))!important;height:calc(13*var(--u))!important;box-shadow:0 0 0 calc(1*var(--u)) #101426!important}
html.touch .route-node.on{width:calc(17*var(--u))!important;height:calc(17*var(--u))!important;box-shadow:0 0 0 calc(1*var(--u)) #101426,0 0 calc(5*var(--u)) #dec58d88!important}
html.touch .route-node b{font-size:calc(4.2*var(--u))}
html.touch .route-node span{top:calc(100% + 1.2*var(--u));left:50%;transform:translateX(-50%);width:auto;white-space:nowrap;font-size:calc(2.2*var(--u))}
html.touch .route-node:not(:last-child)::after{content:'';position:absolute;left:100%;top:50%;width:calc(3.2*var(--u) + 4px);height:2px;background:#d8b67888;pointer-events:none}
html.touch .route-copy{position:absolute!important;left:calc(var(--sl) + 3*var(--u))!important;right:var(--sr)!important;top:auto!important;bottom:calc(var(--sb) + 3*var(--u))!important;width:auto!important;max-height:calc(48*var(--u));padding:calc(2.4*var(--u)) calc(3*var(--u))!important;
  display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto 1fr;column-gap:calc(4*var(--u));border-radius:12px}
html.touch .route-copy>span{grid-column:1;font-size:calc(2.4*var(--u))!important}
html.touch .route-copy h3{grid-column:1;font-size:calc(5.6*var(--u))!important;margin:calc(1*var(--u)) 0!important}
html.touch .route-copy p{grid-column:1;min-height:0!important;margin:0!important;font-size:calc(2.9*var(--u))!important;line-height:1.45;overflow-y:auto;touch-action:pan-y}
html.touch .route-copy .confirm-btn{grid-column:2;grid-row:1/4;align-self:center;width:auto!important;min-width:calc(34*var(--u));height:max(52px,calc(16*var(--u)));margin:0!important;font-size:calc(5*var(--u))!important;text-align:center;border-radius:12px}
html.touch .route-copy .confirm-btn span{float:none;display:block;font-size:calc(2.4*var(--u));margin:calc(.6*var(--u)) 0 0}

/* ---------- 대화(스토리): 넓은 대사창 · 화면 톡 = 다음 · 건너뛰기 ---------- */
html.touch .chapter-badge{top:calc(3*var(--u))}
html.touch .chapter-badge small{font-size:calc(2.4*var(--u))}
html.touch .chapter-badge b{font-size:calc(5*var(--u));margin-top:calc(.6*var(--u))}
html.touch .dialogue-fighters{left:var(--sl);right:var(--sr);top:calc(11*var(--u));bottom:calc(29*var(--u))}
html.touch .dlg-char b{font-size:calc(4*var(--u));bottom:2%}
html.touch .versus{font-size:calc(13*var(--u))}
html.touch .dialogue-box{left:calc(var(--sl) + 3*var(--u))!important;right:calc(var(--sr) + 3*var(--u))!important;bottom:calc(var(--sb) + 3*var(--u))!important;min-height:calc(27*var(--u));padding:calc(2.2*var(--u)) calc(3.4*var(--u)) calc(5*var(--u))!important;border-radius:12px}
html.touch .dialogue-box span{font-size:calc(3.2*var(--u))}
html.touch .dialogue-box p{font-size:calc(4.6*var(--u))!important;line-height:1.45!important;margin:calc(1*var(--u)) 0 0!important}
html.touch #dialogueNext{display:none}
html.touch .dlg-tap{display:block;position:absolute;right:calc(3*var(--u));bottom:calc(1.4*var(--u));font:normal calc(2.7*var(--u)) Jua;color:#e6c788;animation:tapBlink 1.1s steps(2) infinite}
@keyframes tapBlink{50%{opacity:.25}}
html.touch .dlg-skip{top:calc(3*var(--u));right:calc(var(--sr) + 2*var(--u));height:max(40px,calc(10*var(--u)));padding:0 calc(3*var(--u));font-size:calc(3.3*var(--u));border-radius:10px}

/* ---------- 결과: 왼쪽 성적 · 오른쪽 큰 버튼 ---------- */
html.touch .result-screen:not(.hidden){display:grid!important;grid-template-columns:1.15fr .85fr;grid-auto-flow:dense;align-content:center;justify-items:center;column-gap:calc(4*var(--u));padding:calc(3*var(--u)) var(--sr) calc(3*var(--u)) var(--sl)}
html.touch .result-screen>*{grid-column:1}
html.touch .result-screen>#resultNext,html.touch .result-screen>#resultRetry,html.touch .result-screen>.share-actions,html.touch .result-screen>#shareStatus,html.touch .result-screen>#resultMenu{grid-column:2;width:100%;max-width:calc(80*var(--u))}
html.touch .result-seal{font-size:calc(5.4*var(--u))!important;margin-bottom:calc(1.5*var(--u))!important;padding:calc(.6*var(--u)) calc(2*var(--u)) 0!important}
html.touch .result-screen>span{font-size:calc(2.4*var(--u))}
html.touch .result-screen h2{font-size:calc(8*var(--u))!important;margin:calc(1*var(--u)) 0!important}
html.touch .result-screen>p{font-size:calc(3*var(--u))!important;max-width:100%!important;margin:0 0 calc(2*var(--u))!important}
html.touch .result-stats{margin:0!important}
html.touch .result-stats div{min-width:0!important;padding:calc(1.2*var(--u)) calc(3.4*var(--u))!important}
html.touch .result-stats small{font-size:calc(2.1*var(--u))}
html.touch .result-stats b{font-size:calc(5.6*var(--u))!important}
html.touch #resultNext,html.touch #resultRetry{min-width:0;height:max(48px,calc(13*var(--u)));margin:0 0 calc(2*var(--u))!important;padding:0;font-size:calc(4.6*var(--u))!important;text-align:center;border-radius:12px}
html.touch #resultRetry{display:block;border:1px solid #c7aa73;background:#2a2740;color:#f3e0b6;text-decoration:none;font-family:BlackHan}
html.touch .share-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:calc(2*var(--u));margin:0!important}
html.touch .share-actions button{height:max(44px,calc(11*var(--u)));padding:0!important;font-size:calc(3*var(--u))!important;border-radius:10px}
html.touch #shareStatus{height:auto;min-height:calc(3*var(--u));font-size:calc(2.4*var(--u));margin:calc(.8*var(--u)) 0}
html.touch #resultMenu{height:max(44px,calc(10*var(--u)));margin:0!important;border:1px solid #6d6380;border-radius:10px;background:#161b2c;text-decoration:none;color:#c8c2d6;font:calc(3.4*var(--u)) BlackHan}

/* ---------- 일시정지: 큰 계속하기 + 조작 설정·소리·기술표 ---------- */
html.touch .pause-screen>div{width:min(84%,calc(118*var(--u)));padding:calc(4*var(--u)) calc(5*var(--u));border-radius:14px}
html.touch .pause-screen span{font-size:calc(2.4*var(--u))}
html.touch .pause-screen h2{font-size:calc(7*var(--u));margin:calc(1*var(--u)) 0 calc(3*var(--u))}
html.touch #resumeBtn{width:100%;height:max(52px,calc(14*var(--u)));margin:0 0 calc(2.5*var(--u))!important;font-size:calc(5*var(--u));text-align:center;border-radius:12px}
html.touch .pause-row{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(2*var(--u))}
html.touch .pause-screen .text-btn{display:block;width:100%;margin:0!important;height:max(44px,calc(11*var(--u)));border:1px solid #c7aa73;border-radius:10px;background:#1c2136;color:#f3e0b6;text-decoration:none;font:calc(3.4*var(--u)) BlackHan}
html.touch #pauseMenu{margin-top:calc(2*var(--u))!important;border-color:#6d6380;color:#c8c2d6;background:#161b2c}

/* ---------- 조작 설정 창(뒤에 실제 버튼이 비쳐 보인다) ---------- */
.ctl-panel{position:absolute;inset:0;z-index:45;display:flex;align-items:flex-start;justify-content:flex-start;padding-left:var(--sl);background:linear-gradient(90deg,#05070de6 0,#05070dcc 50%,#05070d33 75%,#0000)}
.ctl-box{margin-top:calc(3*var(--u));width:min(56%,calc(118*var(--u)));max-height:calc(94*var(--u));overflow-y:auto;touch-action:pan-y;padding:calc(2*var(--u)) calc(3.4*var(--u));background:linear-gradient(135deg,#28283ef2,#131a2bf2);border:1px solid #c5aa71;border-radius:14px;box-shadow:0 10px 30px #000a}
.ctl-box header{display:flex;align-items:center;justify-content:space-between;margin-bottom:calc(1*var(--u))}
.ctl-box header b{font:calc(5*var(--u)) BlackHan;color:#f3e0b6}
.ctl-close{height:max(40px,calc(10*var(--u)));padding:0 calc(4*var(--u));border:0;border-radius:10px;background:linear-gradient(115deg,#eddbad,#b8975d);color:#211d28;font:calc(3.6*var(--u)) BlackHan}
.ctl-row{display:flex;align-items:center;justify-content:space-between;gap:calc(3*var(--u));padding:calc(.9*var(--u)) 0;border-top:1px solid #c5aa7133}
.ctl-row>span{font:calc(3.3*var(--u)) Jua;color:#e9e1f0;white-space:nowrap}
.seg{display:flex;gap:calc(1.2*var(--u))}
.seg button{min-width:calc(15*var(--u));height:max(40px,calc(9.5*var(--u)));border:1px solid #6a6378;border-radius:8px;background:#20253b;color:#e9e1f0;font:calc(3.2*var(--u)) BlackHan}
.seg button[aria-pressed=true]{background:#bda16d;color:#10182b;border-color:#f5dfaa}
.ctl-tip{margin:calc(1.2*var(--u)) 0 0;font:calc(2.6*var(--u))/1.5 Jua;color:#a9dace}

/* ---------- 기술표: 휴대폰 조작 그림 + 목록 ---------- */
html.touch .touch-guide{display:grid;grid-template-columns:1.05fr 1fr;gap:calc(3*var(--u));align-items:center;padding:calc(2.5*var(--u)) var(--sr) calc(1*var(--u)) var(--sl)}
html.touch .guide-grid,html.touch .cancel-route{display:none!important}
.tg-map{position:relative;aspect-ratio:2.16;border:1px solid #c7aa7366;border-radius:12px;background:linear-gradient(#26324c,#141a2c);overflow:hidden;--g:calc(var(--u)*.52)}
.tg-stick{position:absolute;left:6%;bottom:9%;width:calc(30*var(--g));height:calc(30*var(--g));border-radius:50%;border:2px solid #e6c78899;background:#0a0c1a73}
.tg-stick b{position:absolute;left:28%;top:28%;width:44%;height:44%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff8e6,#d9b876 55%,#8a6a3a)}
.tg-stick i{position:absolute;left:50%;top:-34%;transform:translateX(-50%);white-space:nowrap;font:normal calc(5*var(--g)) Jua;color:#f3e0b6}
.tg-pad .tb{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1.5px solid #f3dfb0cc;color:#fff;background:#25233a;
  width:calc(var(--s)*var(--g));height:calc(var(--s)*var(--g));right:calc(3% + (13.5 + var(--x) - var(--s)/2)*var(--g));bottom:calc(5% + (14.5 + var(--y) - var(--s)/2)*var(--g))}
.tg-pad .tb b,.tg-pad .tb em{font:normal calc(var(--s)*.3*var(--g)) BlackHan}
.tg-pad .main{background:#2c5fc4}.tg-pad .heavy{background:#b8372f}.tg-pad .special{background:#9a5a1c}.tg-pad .skill{background:#1d4552;border-color:#9ff0e2}.tg-pad .skill em{font-size:calc(4*var(--g))}.tg-pad .ultimate{background:#4b2a86}
.tg-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:calc(1.2*var(--u))}
.tg-list li{font:calc(2.9*var(--u))/1.5 Jua;color:#ddd6e6;padding:calc(.8*var(--u)) calc(1.6*var(--u));background:#151b2dcc;border-left:3px solid #c9a66b;border-radius:4px}
.tg-list b{color:#ffd98e;font-family:BlackHan;font-weight:400}
html.touch .guide-screen .combo-book{margin:calc(2*var(--u)) var(--sr) calc(3*var(--u)) var(--sl);padding:calc(2*var(--u)) calc(3*var(--u))}
html.touch .combo-book h3{font-size:calc(3.8*var(--u))!important}
html.touch .combo-book td,html.touch .combo-book th{font-size:calc(2.8*var(--u))!important;padding:calc(1.2*var(--u))!important}
html.touch .combo-book td:nth-child(2){font-size:calc(3*var(--u))!important}
html.touch .combo-book p{font-size:calc(2.6*var(--u))!important}
html.touch .guide-go{height:max(48px,calc(12*var(--u)));font-size:calc(4.2*var(--u))!important;text-align:center;border-radius:12px;margin-bottom:calc(4*var(--u))!important}

/* ---------- 필살기 도감 ---------- */
html.touch .gallery-roster{top:calc(14*var(--u));left:var(--sl);width:24%;bottom:calc(var(--sb) + 2*var(--u));gap:calc(1*var(--u))}
html.touch .gallery-roster button{min-height:max(44px,calc(11*var(--u)))!important;font-size:calc(2.9*var(--u))!important;border-radius:8px;gap:calc(1*var(--u))}
html.touch .gallery-roster img{width:calc(8*var(--u))!important;height:calc(9.5*var(--u))!important}
html.touch .gallery-controls{left:calc(var(--sl) + 25%);right:var(--sr);bottom:calc(var(--sb) + 2*var(--u));gap:calc(1.5*var(--u));padding:calc(1.4*var(--u));border-radius:12px}
html.touch .gallery-controls button{height:max(44px,calc(11*var(--u)));padding:0 calc(2.4*var(--u))!important;font-size:calc(3*var(--u))!important;border-radius:8px}
html.touch .gallery-controls span{font-size:calc(2.6*var(--u))!important}
html.touch .gallery-screen h2{font-size:calc(4.4*var(--u))!important}

/* ---------- 온라인: 글자 16px 이상(아이폰 입력 확대 방지) · 버튼 44px 이상 ---------- */
html.touch .online-panel{max-width:none;margin:0;padding:calc(2*var(--u)) calc(var(--sr) + 2*var(--u)) calc(4*var(--u)) calc(var(--sl) + 2*var(--u))}
html.touch .online-panel p{font-size:calc(2.9*var(--u))!important;margin:calc(1*var(--u)) 0!important;line-height:1.5}
html.touch .online-panel label{font-size:calc(3.2*var(--u))!important;margin:calc(1*var(--u)) calc(3*var(--u)) calc(1*var(--u)) 0!important}
html.touch .online-panel select,html.touch .online-panel input{font-size:16px!important;height:max(44px,calc(11*var(--u)));padding:0 calc(2*var(--u))!important;border-radius:8px}
html.touch .online-panel button{min-height:max(44px,calc(11*var(--u)));font-size:calc(3.4*var(--u))!important;border-radius:8px;padding:0 calc(3*var(--u))!important}
html.touch .online-panel .confirm-btn{min-width:calc(26*var(--u))!important;text-align:center}
html.touch .join-row{margin-top:calc(1.4*var(--u))}
html.touch #onlineSeats>div{font-size:calc(3*var(--u))!important;padding:calc(1.2*var(--u)) calc(2*var(--u))!important}
html.touch .online-buttons{flex-wrap:wrap;gap:calc(2*var(--u))!important}
html.touch .online-panel small{font-size:calc(2.4*var(--u))!important}