/* ══ 화면 배율 — 16:9 한 화면 ═══════════════════════════════════════════
   js/stage.js 가 1600×900(휴대폰은 높이 540)을 기준으로 zoom 을 건다. 이 파일은 그 위에서의 배치다.
   다른 css 뒤에 읽혀서 덧씌운다.

   - 크기는 논리 픽셀로 쓴다. vw·vh 는 zoom 을 먹어 어긋나니 --app-w · --app-h 를 쓴다.
   - 좁은 창용 @media (max-width) 는 모두 걷었다. 배율을 걸면 논리 폭은 늘 1200 이상이라
     그 규칙들이 휴대폰 가로(실제 폭 844~915px)에서 켜져 오히려 한 줄로 접어 버렸다.
     휴대폰은 아래 .phone 이 맡는다. */

html { background: var(--bg); }
body { min-height: var(--app-h, 100vh); }
* { -webkit-tap-highlight-color: transparent; }
/* 두 번 두드림 확대를 막는다 — 카드를 빨리 낼 때 화면이 커져 버린다 */
button, .card, .foe, .stand, .ally, .dex, .tcard, .pcard { touch-action: manipulation; }

/* ── 머리띠 — 900 줄 가운데 한 줄이다. 얇게 ─────────────────────────── */
.top { padding: 10px max(24px, calc((var(--app-w, 1600px) - 1560px) / 2)); gap: 16px; }
.top h1 { font-size: 20px; }
.unofficial { margin-left: auto; }
.fsbtn {
  flex: none; font-size: 12px; padding: 6px 12px; border-radius: 8px;
  background: #ffffff0d; border-color: #ffffff26;
}
.fsbtn.on { border-color: var(--gold); color: var(--gold); }
.bottom { padding: 6px 28px; min-height: 28px; }

/* ── 본문 폭 — 화면마다 따로 적혀 있던 것(1100~1440)을 한데 모은다 ───────────
   화면 이름(battle·dexscreen…)은 main#screen **자신**에 붙는다. 그래서 다른 css 의
   main:has(.battle) 같은 규칙은 한 번도 맞은 적이 없다 — 여기서는 #screen.battle 로 쓴다. */
#screen { max-width: 1560px; }
#screen.endscreen, #screen.swapscreen { max-width: 1200px; }

/* ── 전투 — 스크롤 없이 한 화면 ───────────────────────────────────────
   몸통 높이를 화면에 묶고, 남는 세로는 싸움터가 먹는다. 손패는 늘 바닥에 붙는다. */
body:has(#screen.battle) { height: var(--app-h, 100vh); min-height: 0; overflow: hidden; }
#screen.battle { min-height: 0; max-width: 1720px; overflow: hidden; }
.battle .field { flex: 1 1 0; min-height: 0; }
.battle > :not(.field) { flex: none; }

/* 서 있는 사도와 적은 싸움터 높이에 맞춘다 — 크기는 ui.js 가 인라인으로 주므로 여기서 덮는다.
   고정 크기로 두면 싸움터가 낮은 창에서 적 머리 위 예고(「웅크린다」)가 위로 잘려 나갔다. */
.battle .field { container-type: size; }
.stand { width: clamp(100px, 50cqh, 176px); }
.stand .art { width: clamp(84px, 48cqh, 170px) !important; height: clamp(84px, 48cqh, 170px) !important; }
.foe { width: clamp(120px, 56cqh, 200px); }
.foe .art { width: clamp(84px, 48cqh, 170px) !important; height: clamp(84px, 48cqh, 170px) !important; }
.foe.boss { width: clamp(150px, 70cqh, 250px); }
.foe.boss .art { width: clamp(110px, 60cqh, 220px) !important; height: clamp(110px, 60cqh, 220px) !important; }

/* ══ 휴대폰 가로 ═════════════════════════════════════════════════════════
   논리 크기는 약 1200×540(실제 844~915 × 390~412 를 0.72~0.76 배로). 글자는 배율을 먹어 작아지니
   여기서 한 치수씩 키운다 — 실제 화면에서 9px 아래로는 안 내려가게. */
.phone body { font-size: 16px; }
.phone .top { padding: 6px 16px; }
.phone .top h1 { font-size: 17px; }
.phone .unofficial { font-size: 10px; }
.phone .bottom { padding: 4px 16px; min-height: 22px; font-size: 13px; }
.phone #screen { padding: 10px 14px 16px; }
.phone button { min-height: 40px; }                    /* 손가락 한 마디 — 실제 약 30px */

/* 손가락에는 hover 가 없다 — 두드린 뒤 카드가 들린 채로 남지 않게 */
.touch .hand .card:hover:not(.sel) { transform: none; box-shadow: none; }

/* ── 휴대폰 전투 — 540 줄 안에 다 넣는다 ─────────────────────────────────
   머리띠·바닥글은 치우고(전체화면 단추만 오른쪽 위에 띄운다), 손패 옆에 AP·턴 넘기기를 세운다.
     머리   머리
     싸움터 싸움터
     게이지 게이지
     상태창 상태창
     손패   AP·턴 */
.phone body:has(#screen.battle) .top {
  position: fixed; top: 4px; right: 6px; z-index: 40; padding: 0; border: 0; background: none;
}
.phone body:has(#screen.battle) .top > :not(.fsbtn) { display: none; }
.phone body:has(#screen.battle) .fsbtn { min-height: 30px; padding: 3px 10px; font-size: 12px; background: #0c0a16c4; }
.phone body:has(#screen.battle) .fsbtn span { display: none; }
/* 바닥글의 안내(「칠 적을 고릅니다」)는 싸움터 위에 띄운다 — 자리를 먹지 않게 */
.phone body:has(#screen.battle) .bottom {
  position: fixed; left: 50%; top: 6px; transform: translateX(-50%); z-index: 40;
  min-height: 0; padding: 0; border: 0; pointer-events: none;
}
.phone body:has(#screen.battle) #hint:not(:empty) {
  display: inline-block; padding: 4px 14px; border-radius: 99px;
  background: #0c0a16d9; border: 1px solid #ffcf6b88; color: #ffe7ad; font-size: 14px; font-weight: 700;
}

.phone #screen.battle {
  display: grid; grid-template-columns: minmax(0, 1fr) 168px;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas: "head head" "field field" "gauge gauge" "allies allies" "hand deck";
  gap: 6px 10px; padding: 6px 12px 8px; border-radius: 0; max-width: none;
}
.phone .battle .bhead { grid-area: head; padding: 0 60px 0 0; }
.phone .battle .field { grid-area: field; min-height: 0; padding: 8px 10px 6px; }
.phone .battle .gauge { grid-area: gauge; padding: 12px 0 0; }
.phone .battle .allies { grid-area: allies; gap: 6px; }
.phone .battle .hand { grid-area: hand; flex-wrap: nowrap; gap: 6px; padding: 2px 0 0; align-self: end; }
.phone .battle .deckrow {
  grid-area: deck; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 8px;
}
.phone .battle .logwrap { display: none; }

.phone .field { grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr) 48px; gap: 6px; }
.phone .field:after { height: 40px; }
.phone .pile2 { padding: 5px 2px; }
.phone .turntag { top: 4px; }
.phone .stand .sname, .phone .foe .fname { font-size: 13px; }
.phone .intent .isay { font-size: 12px; }

.phone .ally { padding: 4px 8px; gap: 6px; }
.phone .ally .art { width: 34px !important; height: 34px !important; }
.phone .ally .nm { font-size: 14px; }
.phone .ally .atop { gap: 5px; }
.phone .ultbtn { margin-top: 2px; padding: 3px 8px; font-size: 13px; min-height: 32px; }
/* 대사 말풍선은 상태창을 한 줄 늘려 싸움터를 밀어냈다 — 폰에서는 접는다(기록에 남는다) */
.phone .ally .bubble { display: none; }

.phone .hand .card { width: 120px; flex: none; }
.phone .apbox { justify-content: center; }
.phone .endturn { margin: 0; min-height: 56px; font-size: 17px; }
.phone .deckrow .pile { text-align: center; font-size: 12px; }

/* ── 휴대폰 가로에서 잘리던 것 세 가지 ──────────────────────────────────
   ① 적 머리 위 의도가 싸움터 위로 밀려 잘렸다 — 의도·그림·이름·체력이 세로로 쌓인 기둥이
      싸움터보다 높았다. 폰에서는 그림을 조금 줄이고 의도를 그림 위에 겹쳐 띄운다.
   ② 「요정 무리(뒤)」 가 두 줄로 꺾이고 성격 표시가 「활/발」 로 세로로 찢어졌다 — 줄바꿈을 막는다.
   ③ 손패가 화면 아래로 잘렸다 — 카드를 한 치수 줄인다(글은 두 줄까지). */
.phone .foe { position: relative; width: auto; min-width: clamp(96px, 44cqh, 170px); gap: 3px; }
.phone .foe .art, .phone .stand .art { width: clamp(70px, 40cqh, 150px) !important; height: clamp(70px, 40cqh, 150px) !important; }
/* 의도는 그림 위 제자리(흐름 안)에 둔다 — 그림 위에 겹쳐 띄웠더니 얼굴을 가리고 옆 적의 의도와 붙었다.
   그림을 줄인 것만으로 기둥이 싸움터 안에 들어온다. 말이 길면 줄여 자르고, 칸 폭을 넘지 않는다 */
.phone .foe .intent { max-width: 100%; gap: 4px; }
.phone .foe .intent .isay { overflow: hidden; text-overflow: ellipsis; }
.phone .foe .intent .igem { width: 24px; height: 24px; }
.phone .foe .intent .igem b { font-size: 11px; }
.phone .foe .intent .isay { font-size: 11px; white-space: nowrap; }
.phone .foe .fname, .phone .stand .sname { white-space: nowrap; flex-wrap: nowrap; font-size: 12px; }
.phone .nature { flex: none; white-space: nowrap; font-size: 9.5px; padding: 0 5px; margin-left: 4px; }

.phone .hand .card { width: 106px; }
.phone .hand .card .gtext { -webkit-line-clamp: 2; font-size: 10.5px; }
/* 카드 이름은 작게, 두 줄까지 — 한 줄로 자르면 「도끼 올…」 처럼 무슨 카드인지 몰랐다 */
.phone .hand .card .gtitle b { font-size: 10.5px; line-height: 1.15; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; word-break: keep-all; }
.phone .hand .card .gtype { font-size: 9.5px; }
.phone .hand .card .gtext { line-height: 1.25; }
.phone .battle .hand { padding: 10px 0 12px; }   /* 부채꼴로 펼치면 바깥 카드가 내려간다(--dip) — 그 자리를 남겨 둔다 */
.phone .hand .card:hover:not(.no) { transform: rotate(var(--tilt, 0deg)) translateY(var(--dip, 0px)); }
.phone .hand .card.sel { transform: rotate(0deg) translateY(-12px) scale(1.03); }

/* ── 휴대폰을 세로로 들었을 때 ───────────────────────────────────────── */
.rotate { display: none; }
.portrait .rotate {
  position: fixed; inset: 0; z-index: 999; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center;
  background: var(--bg); color: var(--ink);
}
.portrait .rotate p { margin: 0; font-size: 20px; }
.portrait .rotate small { color: var(--dim); font-size: 13px; }
.rotate-phone {
  width: 54px; height: 92px; border: 3px solid var(--gold); border-radius: 10px;
  animation: turn 1.8s ease-in-out infinite;
}
@keyframes turn { 0%, 25% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
.portrait body > :not(.rotate) { display: none !important; }