/* ==========================================================================
   지옥문 결투 — 대진 화면(VS)과 왕펀치 컷인 (11.11)
   대진: 스포츠 게임 대진표 구도. 위 = 지옥문 띠, 가운데 = 사선으로 나뉜 두 판(망자 저승 청색 · 옥지 핏빛) + VS, 아래 = 이름판.
   컷인: 게임 필살기 컷인 구도. 검은 화면에 가로 띠 세 줄(지옥문 · 눈 클로즈업 · 주먹)이 엇갈려 밀려 들어왔다 빠진다.
   그림은 작가 원화(assets/duel)만, 불씨는 실사 footage(assets/fx)를 screen으로. 불·연기를 CSS로 그려 흉내 내지 않는다.
   ========================================================================== */
:root{--vs-me:#1d3a55;--vs-me-hi:#7b9aae;--vs-foe:#a8231a;--vs-plate:#2a2622}

/* ---------- 전신 망자: 몸통 + 얼굴 파츠/셀카 (앵커 = screen-duel.css .du-man, MANIFEST §3) ---------- */
.man{position:absolute;display:block;aspect-ratio:489/640}
.man>img,.man>span,.man span>img{position:absolute;display:block;max-width:none}
.man .m-body{left:0;top:0;width:100%;height:100%}
.man .m-feat{left:18.17%;top:-11.73%;width:65.32%;height:62.43%}
.man .m-hair{left:16.42%;top:-10.87%;width:68.77%;height:65.73%}
.man span>img{left:0;top:0;width:100%;height:100%}
.man .m-photo{left:31.3%;top:17.6%;width:40%;height:auto;aspect-ratio:1;translate:0 -50%;border-radius:50%;object-fit:cover;border:3px solid #000}

/* ---------- 대진 화면 ---------- */
.arena.vs{position:relative;margin:calc(-1 * var(--ctop, 24px)) -20px 0;background:#000;border-bottom:3px solid #000;overflow:hidden}
.vs-sky{position:relative;height:118px;overflow:hidden;border-bottom:4px solid #000}
.vs-sky img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%;filter:brightness(.62)}
.arena.vs .arena-title{position:absolute;z-index:3;left:0;right:0;top:20px;margin:0;text-align:center;line-height:1.1}
.arena.vs .arena-title b{display:block;font:var(--t-display);letter-spacing:var(--t-display-ls);color:#fff;-webkit-text-stroke:5px #000;paint-order:stroke fill;text-shadow:3px 3px 0 #000}
.arena-welcome{display:block;margin-top:6px;font:var(--t-label);letter-spacing:var(--t-label-ls);color:var(--paper);text-shadow:2px 2px 0 #000,-1px -1px 0 #000}

/* 가운데: 두 판 사이 사선 이음매는 바탕 검정이 비쳐 보이는 틈 */
.vs-court{position:relative;height:252px;background:#000}
.vs-side{position:absolute;inset:0;overflow:hidden}
.vs-side.me{background:var(--vs-me);clip-path:polygon(0 0,58.5% 0,42.5% 100%,0 100%);animation:vsInL .4s cubic-bezier(.2,.9,.3,1) both}
.vs-side.foe{background:var(--vs-foe);clip-path:polygon(60.5% 0,100% 0,100% 100%,44.5% 100%);animation:vsInR .4s cubic-bezier(.2,.9,.3,1) both}
/* 바닥: 작가 용암 바닥 원화를 원근으로 눕히고 명도만 남겨 판 색에 물들인다 */
.vs-floor{position:absolute;left:-30%;right:-30%;bottom:-8%;height:62%;background:url('assets/duel/lava-floor.webp') 50% 0/cover;transform:perspective(220px) rotateX(48deg);transform-origin:50% 100%;mix-blend-mode:luminosity;opacity:.5}
.vs-side.foe .vs-floor{mix-blend-mode:multiply;opacity:.55}
.vs-embers{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;opacity:.85;pointer-events:none}
.vs-man{left:3%;bottom:-18px;height:228px;transform-origin:50% 100%;filter:drop-shadow(4px 4px 0 #000);animation:vsRise .42s .18s cubic-bezier(.3,1.4,.5,1) both,vsBob 2.2s .7s ease-in-out infinite alternate}
.vs-okji{position:absolute;right:-3%;bottom:-12px;height:258px;width:auto;max-width:none;transform-origin:50% 100%;filter:drop-shadow(5px 5px 0 #000);animation:vsRise .42s .24s cubic-bezier(.3,1.4,.5,1) both,bossIdle 2.4s .8s ease-in-out infinite}
.vs-mark{position:absolute;z-index:3;left:51.5%;top:47%;translate:-50% -50%;rotate:-8deg;font:var(--fw-solmoe) 76px/1 var(--font-solmoe);letter-spacing:-2px;color:var(--tal);-webkit-text-stroke:7px #000;paint-order:stroke fill;text-shadow:5px 5px 0 #000;animation:slam .45s .36s cubic-bezier(.3,1.6,.5,1) both}

/* 아래: 이름판. 가운데 쪽 끝을 이음매와 같은 기울기로 자른다 */
.vs-names{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:-30px;padding:0 0 14px}
.vs-name{margin:0;padding:8px 18px 7px;background:var(--vs-plate);border-top:3px solid var(--vs-me-hi);border-bottom:3px solid #000;text-align:center;animation:vsUp .32s .3s ease-out both}
.vs-name.me{clip-path:polygon(0 0,100% 0,calc(100% - 22px) 100%,0 100%);padding-right:28px}
.vs-name.foe{clip-path:polygon(22px 0,100% 0,100% 100%,0 100%);padding-left:28px;border-top-color:var(--seal)}
.vs-name b{display:block;font:var(--fw-solmoe) var(--fs-xl)/var(--sl-lh-xl) var(--font-solmoe);color:#fff;-webkit-text-stroke:3px #000;paint-order:stroke fill;overflow-wrap:anywhere}
.vs-name small{display:block;font:var(--t-body-sm-strong);letter-spacing:var(--t-body-sm-strong-ls);color:var(--tal)}

@keyframes vsInL{from{transform:translateX(-100%)}}
@keyframes vsInR{from{transform:translateX(100%)}}
@keyframes vsRise{from{transform:translateY(60%) scale(.9);opacity:0}}
@keyframes vsBob{to{transform:translateY(-6px) rotate(1deg)}}
@keyframes vsUp{from{transform:translateY(100%);opacity:0}}

/* ---------- 왕펀치 컷인 ---------- */
/* .signal(옥지 무대) 높이에 걸치게 둔다 */
.cutin{position:absolute;left:0;right:0;top:20%;height:42%;z-index:12;pointer-events:none;visibility:hidden;overflow:hidden}
.cutin.go{visibility:visible}
.cutin:before{content:'';position:absolute;inset:0;background:#000;opacity:0}
.cutin.go:before{animation:ciDim .82s linear both}
.ci-band{position:absolute;left:0;right:0;overflow:hidden;border-top:2px solid #fff;border-bottom:2px solid #fff}
.ci-top{top:2%;height:22%;background:#3a0b07}
.ci-mid{top:29%;height:40%;background:var(--vs-me)}
.ci-bot{top:74%;height:24%;background:var(--seal)}
.ci-top img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 72%}
/* 가운데: 눈 클로즈업. 눈 중심 = 몸통 기준 (53.1%, 15.7%) — 파츠 캔버스의 눈 위치(53.5%, 44%)를 얼굴 상자 앵커로 옮긴 값 */
.ci-eyes{left:50%;top:50%;width:250%;translate:-53.1% -15.7%}
/* 아래: 치켜든 주먹과 머리 윗부분 */
.ci-fist{left:-6%;top:-38%;width:78%;rotate:-6deg}
.ci-word{position:absolute;right:5%;top:50%;translate:0 -50%;font:var(--fw-solmoe) 54px/1 var(--font-solmoe);color:var(--tal);-webkit-text-stroke:6px #000;paint-order:stroke fill;text-shadow:4px 4px 0 #000;white-space:nowrap}
.ci-line{position:absolute;left:0;height:2px;width:46%;background:#fff;opacity:0}
.l1{top:26.5%}.l2{top:71.5%;width:60%}.l3{top:27.8%;width:22%;height:1px}

.cutin.go .ci-top{animation:ciFromR .74s cubic-bezier(.2,.9,.25,1) both}
.cutin.go .ci-mid{animation:ciFromL .74s .04s cubic-bezier(.2,.9,.25,1) both}
.cutin.go .ci-bot{animation:ciFromR .74s .08s cubic-bezier(.2,.9,.25,1) both}
.cutin.go .ci-eyes{animation:ciPush .74s .04s linear both}
.cutin.go .ci-word{animation:ciWord .7s .12s cubic-bezier(.3,1.5,.5,1) both}
.cutin.go .l1{animation:ciStreakR .5s .1s linear both}
.cutin.go .l2{animation:ciStreakL .45s .16s linear both}
.cutin.go .l3{animation:ciStreakR .35s .22s linear both}
@keyframes ciDim{0%{opacity:0}10%{opacity:.9}82%{opacity:.9}100%{opacity:0}}
@keyframes ciFromR{0%{transform:translateX(105%)}16%{transform:translateX(0)}80%{transform:translateX(-3%)}100%{transform:translateX(-105%)}}
@keyframes ciFromL{0%{transform:translateX(-105%)}16%{transform:translateX(0)}80%{transform:translateX(3%)}100%{transform:translateX(105%)}}
@keyframes ciPush{from{scale:1}to{scale:1.12}}
@keyframes ciWord{0%{opacity:0;scale:2.2}22%{opacity:1;scale:1}80%{opacity:1}100%{opacity:0}}
@keyframes ciStreakR{0%{opacity:1;transform:translateX(-100%)}100%{opacity:1;transform:translateX(260%)}}
@keyframes ciStreakL{0%{opacity:1;transform:translateX(220%)}100%{opacity:1;transform:translateX(-100%)}}

/* ---------- 대진 아래: [결투 시작] 바로 배치 (11.11: 조작 안내 글 묶음 삭제) ---------- */
.vs-go{margin:18px 0 0}
.vs-go .gate-left{margin:0 0 10px}
.vs-go .secondary{margin-top:12px}

/* ---------- 결투 조작 튜토리얼 팝업 (app.js duelTut): 쥐 찾기 안내처럼 한 장에 하나씩 ---------- */
dialog.tut-dlg{max-width:360px;padding:14px 16px 16px;text-align:center}
.tut-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;margin:0 0 10px}
.tut-top>b{font:var(--t-body-sm-strong);letter-spacing:var(--t-body-sm-strong-ls);color:var(--muted)}
.tut-top .textbtn{min-height:36px;padding:6px 2px}
.tut-dots{display:flex;align-items:center;gap:6px;margin-left:auto;margin-right:auto}
.tut-dots i{width:8px;height:8px;background:var(--line2);border-radius:4px}
.tut-dots i.on{width:22px;background:var(--tal)}
.tut-top>b+.tut-dots:last-child{margin-right:0}
.tut-body{animation:guideIn .3s ease-out both}
.tut-body h3{margin:16px 0 8px;font:var(--t-title);letter-spacing:var(--t-title-ls);color:var(--text)}
.tut-body p{margin:0;font:var(--t-body);letter-spacing:var(--t-body-ls);color:var(--muted)}
.tut-left{margin:14px 0 0;font:var(--t-body-strong);letter-spacing:var(--t-body-strong-ls)}
.tut-left b{color:var(--tal);font-variant-numeric:tabular-nums}
.tut-cta{display:flex;gap:8px;margin-top:16px}
.tut-cta{align-items:stretch}
.tut-cta>*{flex:1 1 0;min-height:60px;margin:0!important;padding-left:12px;padding-right:12px}
.tut-cta>.primary{flex-grow:2}
.tut-art{position:relative;height:180px;display:flex;align-items:center;justify-content:center;gap:16px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
/* 1. 공격 링: 실제 공격 버튼과 같은 그림, 점이 1초에 한 바퀴 돈다(맨 위 = 0.5초) */
.t-atk .mini-btn{width:150px;height:150px;min-height:0}
.t-atk .ring{width:96px;height:96px}
.t-atk .ring-dot{transform-box:view-box;transform-origin:50% 50%;animation:tutSpin 1s linear infinite}
.t-tag{position:absolute;right:14px;top:16px;font:var(--fw-solmoe) var(--fs-xl)/1 var(--font-solmoe);color:#fff;-webkit-text-stroke:3px #000;paint-order:stroke fill;opacity:0;animation:tutTag 1s linear infinite}
@keyframes tutSpin{from{transform:rotate(-180deg)}to{transform:rotate(180deg)}}
@keyframes tutTag{0%,46%{opacity:0;scale:.6}52%{opacity:1;scale:1.1}80%{opacity:1;scale:1}86%,100%{opacity:0}}
/* 2. 화살표: 뜬 화살표(왼쪽) → 화살표 버튼의 같은 방향 */
.t-warn{display:grid;place-items:center;width:96px;height:96px;background:#3a110d;border:2px solid var(--seal);color:var(--tal);font-size:68px;animation:tutBlink 1.2s steps(1) infinite}
.t-to{font:var(--fw-bold) var(--fs-2xl)/1 var(--font-sans);color:var(--dim)}
.t-pad{display:grid;grid-template-columns:repeat(3,34px);grid-template-rows:repeat(3,34px);gap:4px;font-size:20px}
.t-pad i{display:grid;place-items:center;background:var(--text);color:var(--ink);border:2px solid #000}
.t-pad .ar-up{grid-area:1/2}.t-pad .ar-left{grid-area:2/1}.t-pad .ar-right{grid-area:2/3}.t-pad .ar-down{grid-area:3/2}
.t-pad i.on{outline:3px solid var(--tal);outline-offset:1px;animation:tutPress 1.2s steps(1) infinite}
@keyframes tutBlink{0%{opacity:1}85%{opacity:.25}}
@keyframes tutPress{0%,40%{transform:none}50%,80%{transform:translateY(3px);background:var(--tal)}}
/* 3. 왕펀치 게이지: 한 칸씩 차고 가득 차면 왕펀치 */
.t-power{flex-direction:column;gap:14px}
.t-gauge{display:flex;gap:6px}
.t-gauge i{width:46px;height:16px;background:var(--bg3);border:1.5px solid #000;animation:tutFill 2.8s calc(var(--i) * .45s) steps(1) infinite}
.t-word{font:var(--fw-solmoe) 46px/1 var(--font-solmoe);color:var(--tal);-webkit-text-stroke:5px #000;paint-order:stroke fill;text-shadow:3px 3px 0 #000;opacity:0;animation:tutWord 2.8s .8s infinite}
@keyframes tutFill{0%{background:var(--tal)}68%{background:var(--bg3)}}
@keyframes tutWord{0%{opacity:0;scale:2}10%{opacity:1;scale:1}45%{opacity:1}52%,100%{opacity:0}}
/* 4. 시작: 옥지와 제한 시간 */
.t-go img{height:164px;width:auto;margin-top:22px;filter:drop-shadow(4px 4px 0 #000)}
.t-go .hud-time{position:absolute;right:12px;top:12px}

@media (max-height:700px){
  .vs-sky{height:96px}.arena.vs .arena-title{top:12px}
  .vs-court{height:214px}.vs-man{height:196px}.vs-okji{height:220px}.vs-mark{font-size:64px}
}
@media (prefers-reduced-motion:reduce){
  .vs-embers{display:none}
  .cutin{display:none}
}