/* v3.15 폰 · 태블릿 손질 (js/mobile.js 가 <html class="mobile"> 을 붙일 때만) */
html.mobile { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior: none; }
html.mobile, html.mobile body { -webkit-tap-highlight-color: transparent; }
/* 길게 누르면 글자가 골라지거나 그림 저장 메뉴가 뜨던 것: 입력 칸만 남긴다 */
html.mobile body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.mobile input, html.mobile textarea, html.mobile [contenteditable] { -webkit-user-select: text; user-select: text; }
html.mobile img { -webkit-user-drag: none; }
/* 두 번 눌러 확대 · 확대 손짓 대신 바로 반응 */
html.mobile button, html.mobile a, html.mobile #board { touch-action: manipulation; }

/* v3.16.1 폰 · 앱에서 맞는 순간 연출을 가볍게 (js/impact.js 의 lite()와 짝). PC는 css/impact.css 그대로
   - 화면 전체 backdrop-filter(흑백 번쩍임) → 반투명 어두운 막 한 번
   - 화면 전체 mix-blend-mode · 큰 inset box-shadow → 일반 합성 그라데이션만 */
html.mobile .imp-frame { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(8, 6, 12, .42); }
html.mobile .imp-glow { mix-blend-mode: normal; background: radial-gradient(ellipse at center, var(--c) 0%, transparent 60%); }
html.mobile .imp-vig { box-shadow: none; background: radial-gradient(ellipse at center, transparent 34%, var(--c) 100%); }
html.mobile .imp-shield { mix-blend-mode: normal; filter: none; }
html.mobile .sfx-screen { mix-blend-mode: normal; }

/* v3.16.2 폰 · 앱: 전투 코인 창을 절반쯤으로 (js/game.js coinClash의 fitStage도 폰에서는 배율 1배)
   창 폭 980 × 1.25 → 600 × 1, 안쪽 여백 · 빈 높이를 줄인다. 코인은 89 → 72px 정도로 조금만 작아진다 */
html.mobile .coinstage { width: 600px; gap: 12px; }
html.mobile .cs-side { padding: 10px 12px 14px; gap: 5px; }
html.mobile .cs-side::before { inset: 4px; }
html.mobile .cs-coins { min-height: 74px; gap: 10px; }
html.mobile .cs-ctl { min-height: 0; gap: 5px; }
html.mobile .cs-res { min-height: 1.2em; }
html.mobile .cs-mid { gap: 6px; }
html.mobile .cs-mid::before, html.mobile .cs-mid::after { height: 34px; }
html.mobile .cs-vs { font-size: 26px; }
html.mobile .cs-stop { padding: 8px 20px; font-size: 16px; }
html.mobile .cs-sand { bottom: 7px; }

/* v3.16.2 폰 · 앱: 핸드 카드를 조금 크게(카드 폭 1.03 → 1.16배, 핸드 줄 높이 안에 들어간다) + 숫자 · 이름을 크게 */
html.mobile .screen-game { --hw: calc(var(--cw) * 1.16); }
html.mobile .hand-me .card.slim .c-vstats { font-size: 1.04em; }   /* 공 · 방 · 체 숫자 .7em → 약 1.5배 */
html.mobile .hand-me .card.slim .c-name { font-size: 1em; }        /* 이름 .78em → 약 1.3배 */
html.mobile .hand-me .card.slim .c-pips { font-size: .8em; }
html.mobile .hand-me .card.slim .c-clsico { font-size: .72em; }
html.mobile .hand-me .card.slim .c-cls { font-size: .66em; }
html.mobile .hand-me .hand-slot { top: calc(var(--cw) * -.1); }   /* 커진 만큼 살짝 올려 부채꼴 바깥 카드 아래(숫자)가 화면 밖으로 잘리지 않게 */

/* ================= v3.20.4 폰 · 앱 글자 크기 =================
   js/mobile.js 가 화면을 덜 줄인다(맞춤 높이 720 → 기본 620, 설정 "폰 글자 크기"). 그래서 px로 정한 글자 · 단추는 모두 커진다.
   전장의 카드는 화면 높이를 따라 크기가 정해져서(--cw) 그것만으로는 커지지 않는다 → 아래 손질.
   PC · 큰 화면은 html.mobile 이 붙지 않아 그대로다. */

/* 전장: 핸드 줄을 높여 핸드 카드를 키운다(약 1.2배). 대신 전장 칸 카드는 7% 남짓 작아진다.
   예전: 화면 높이 = 카드 폭 × 5.42 + 104 (핸드 줄 1.56배) → 이제 × 5.86 (핸드 줄 2배) */
@media (min-width: 761px) {
  html.mobile .screen-game { --cw0: clamp(54px, min(calc((100dvh - 104px) / 5.86), calc((100vw - 2 * var(--edge-x) - 12px) / 9.6)), 260px); --cw: var(--cw0); --hand-vis: calc(var(--cw) * 2 + 8px); --hw: calc(var(--cw) * 1.45); }
}
/* 핸드 카드 안 글자: 이름 · 종족 줄 · 능력 칩 · 코인 줄을 키운다(카드 폭 대비) */
html.mobile .hand-me .card.fm.slim .c-name { font-size: 1.04em; letter-spacing: -.05em; }
html.mobile .hand-me .card.fm .c-race { font-size: .74em; }
html.mobile .hand-me .card.fm .c-race .r-sep { margin: 0 .08em; }
html.mobile .hand-me .card.fm .c-box .c-cls { font-size: .7em; }
html.mobile .hand-me .card.fm .c-box .c-brief { font-size: .86em; }
/* 전장 칸 카드: 이름 · 공방체 숫자 */
html.mobile .frow .card.fm.slim .c-name { font-size: .98em; letter-spacing: -.05em; }
html.mobile .frow .card.fm .c-race { font-size: .68em; }
html.mobile .frow .card.fm .c-box .c-cls { font-size: .7em; }
html.mobile .frow .card.fm .c-vstats .st b { font-size: 1.24em; }

/* 카드를 눌러 크게 보기(오른쪽 창): 원본 카드를 키운다 */
html.mobile .zoom { --card-full: 380px; }
html.mobile .zoom .d-body p { font-size: 15px; }

/* 시작 핸드(멀리건): 6장이 한 줄에 들어가게 */
html.mobile .modal.mull-modal { width: min(1080px, 100%); }
html.mobile .mull-card .card { --cw: clamp(96px, calc((min(1080px, 100vw) - 160px) / 6.4), 150px); }

/* 작은 글씨 키우기 (화면 px — 0.67배 안팎으로 보이므로 13px ≈ 9px) */
html.mobile #board .prow-bot .np-sub, html.mobile #board .frow .np-sub, html.mobile #board .pi-role { font-size: 13px; }
html.mobile #board .zone-label { font-size: max(13px, calc(var(--cw) * .09)); }
html.mobile #board .ph-turn { font-size: 12.5px; }
/* 오른쪽 아래 생명 판: 핸드 장수 아래 "핸드" 글씨가 화면 밖으로 밀려 잘리던 것 — 손 모양 그림만 둔다(좁은 PC 창과 같이) */
html.mobile .pv-bot .ps span { display: none; }
html.mobile .pv-bot .pstats { padding-top: 4px; }

/* v3.20.5 폰 · 앱: 전장의 작은 게임 상자(파친코 · 결정)를 뺀다 (js/game.js render에서 붙이지도 않는다). 그 자리는 비운다 */
html.mobile .f-piles .arc-host { display: none; }

/* ================= v3.32.1 폰 · 앱 손질 =================
   1) 대기실: 깃발(덱 보관함)만 크게 보이고, 고른 덱의 카드 목록은 숨긴다(덱은 덱 조정실에서 본다).
      왼쪽 넓은 칸 = 진영 3개를 세로 줄 3개로 놓은 깃발 9개, 오른쪽 좁은 칸 = 고른 덱 이름 · 대전 단추들 · 수레바퀴 · 채팅 */
html.appui .screen-lobby .lobby { grid-template-columns: minmax(0, 1fr) 290px; gap: 10px 14px; padding-top: 10px; }
html.appui .screen-lobby .decks { grid-column: 1; grid-row: 1; }
html.appui .screen-lobby .deck-view { grid-column: 1; grid-row: 2; min-height: 0 !important; padding: 0; background: none; border: 0; box-shadow: none; }
html.appui .screen-lobby .deck-view::before, html.appui .screen-lobby .deck-view::after { display: none; }
html.appui .screen-lobby .side-col { grid-column: 2; grid-row: 1 / span 2; }
html.appui .screen-lobby .decks > .panel-title { margin-bottom: 4px; }
html.appui .screen-lobby .decks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; align-content: start; }
html.appui .screen-lobby .decks > .panel-title, html.appui .screen-lobby .decks > .note { grid-column: 1 / -1; }
html.appui .screen-lobby .decks > .note { display: none; }
html.appui .screen-lobby .deck-fac { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
html.appui .screen-lobby .df-head { margin-top: 2px; font-size: 14px; }
html.appui .screen-lobby .df-head small { display: none; }
html.appui .screen-lobby .deck-tile.rq { min-height: 0; padding: 8px 10px 8px 6px !important; gap: 8px !important; }
html.appui .screen-lobby .dt-seal { width: 50px; height: 50px; margin: 6px 0 0 2px; }
html.appui .screen-lobby .dt-seal .emblem { width: 40px !important; height: 40px !important; }
html.appui .screen-lobby .dt-body b { font-size: 16px; line-height: 1.2; }
html.appui .screen-lobby .dt-body .en { font-size: 12.5px; }
html.appui .screen-lobby .deck-tile.rq .dt-state { gap: 6px; }
html.appui .screen-lobby .dt-gauge { display: none; }
html.appui .screen-lobby .dt-st { font-size: 13px; }
/* 고른 덱: 카드 목록 · 거르기 · 머리(고른 깃발은 위 보관함에서 빛난다)를 숨기고 대전 단추 줄만 깃발 아래에 */
html.appui .screen-lobby .dv-head, html.appui .screen-lobby .dv-filter, html.appui .screen-lobby .dv-cards { display: none; }
html.appui .screen-lobby .dv-actions { margin: 0; padding-top: 4px; }
html.appui .screen-lobby .decks .panel-title small { display: none; }
html.appui .screen-lobby .deck-tile.rq .dt-mark { width: 80px; height: 80px; }
html.appui .screen-lobby .lobby { padding-bottom: 12px; }
html.appui .screen-lobby .df-head { margin-top: 0; }
html.appui .screen-lobby .deck-fac { gap: 6px; }
html.appui .screen-lobby .deck-tile.rq { padding-block: 6px !important; }

/* 2) 시작 핸드(멀리건): 위 3장 · 아래 3장, 오른쪽 빈 자리에 [그대로 시작] [바꾸기]. 아래 기준 설명은 뺀다 */
html.appui .modal.mull-modal { width: min(1000px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) 190px; column-gap: 22px; align-items: center; padding-block: 14px 16px; }
html.appui .mull-modal > h3, html.appui .mull-modal > .muted { grid-column: 1 / -1; }
html.appui .mull-modal > h3 { margin-bottom: 4px; }
html.appui .mull-modal > .muted { margin: 0 0 8px; font-size: 14px; }
html.appui .mull-modal .mull-tip { display: none; }
html.appui .mull-modal .mull-cards { grid-column: 1; display: grid; grid-template-columns: repeat(3, max-content); justify-content: center; gap: 10px 14px; margin: 0; }
html.appui .mull-card .card { --cw: clamp(80px, calc((100dvh - 170px) / 2 / 1.4), 150px); }
html.appui .mull-modal .modal-btns { grid-column: 2; grid-row: 3; display: flex; flex-direction: column-reverse; gap: 12px; margin: 0; padding: 0; border: 0; }
html.appui .mull-modal .modal-btns .btn { width: 100%; min-height: 54px; font-size: 17px; margin: 0; }

/* 3) 전장 */
/* 왼쪽 가운데의 기록 · 단축키 판(focus-idle)과 가운데 띠의 손짓 글(더블클릭 또는 …)은 폰에서 뺀다 */
html.appui .focus-idle { display: none !important; }
html.appui .midbar.v7 .actionbar { display: none; }
/* 가운데 띠를 얇게: 준비 완료는 내 덱 옆으로 갔다(js/game.js render) · 메뉴 단추도 작게 */
html.appui .lay-swap .midbar.v7 { min-height: 0; padding-block: 2px; }
html.appui .lay-swap .midbar.v7 .mb-right { min-height: 0; }
html.appui .lay-swap .midbar.v7 .toolbar { height: 42px; padding: 0 5px; min-height: 0; border-radius: 8px; }
html.appui .lay-swap .midbar.v7 .tb-btn { height: 34px; min-height: 0; padding-block: 0; }
html.appui .lay-swap .midbar.v7 .tb-btn .ui-ico, html.appui .lay-swap .midbar.v7 .tb-btn > svg { width: 24px; height: 24px; }
html.appui .lay-swap .midbar.v7 .tb-speed span { font-size: 16px; }
/* 얇아진 띠만큼(약 40px) 상대 전장 카드를 키운다: 상대 줄만 카드 폭 × 1.28 (--cw0 = 위 v3.20.4 절의 기본 카드 폭) */
@media (min-width: 761px) {
  html.mobile .lay-swap .frow-top .slots, html.mobile #board .lay-swap .frow-top .slot > .card, html.mobile #board .lay-swap .frow-top .slot > .card-back { --cw: calc(var(--cw0) * 1.28); }
}
/* 준비 완료(+모래시계): 내 덱 왼쪽에 세로로 쌓아 작게 */
html.appui .rd-wrap.rd-pile { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; flex: none; align-self: center; }
html.appui .rd-wrap.rd-pile .turn-clock { position: relative; top: auto; right: auto; height: 32px; padding: 0 8px 0 4px; gap: 4px; justify-content: center; }
html.appui .rd-wrap.rd-pile .turn-clock .tc-glass { height: 24px; }
html.appui .rd-wrap.rd-pile .turn-clock .tc-num { font-size: 15px; min-width: 2.6em; }
html.appui .rd-wrap.rd-pile .ready-btn { height: 54px; min-width: 0; padding: 0 12px; gap: 7px; border-radius: 8px; font-size: 15.5px; white-space: nowrap; }
html.appui .rd-wrap.rd-pile .ready-btn .rd-ico { width: 20px; height: 20px; }
html.appui .rd-wrap.rd-pile .ready-btn kbd { display: none; }
html.appui .rd-wrap.rd-pile .ready-btn.rd-wait { font-size: 14px; opacity: .8; }
/* 셔플: "셔플" 글자를 빼고 둥근 인장만(생명 −1 표시는 작게 남김). v3.32.4: 폰 · 앱만 — PC는 예전처럼 인장 옆에 "셔플 ♥ −1" 띠 */
html.mobile .f-piles > .shuffle-btn.v19 { width: auto; min-width: 0; padding: 0; }
html.mobile .shuffle-btn.v19 .sh-txt, html.mobile .shuffle-btn.v19 kbd { display: none; }
html.mobile .shuffle-btn.v19::before, html.mobile .shuffle-btn.v19::after { display: none; }
html.mobile .shuffle-btn.v19 .sh-seal { position: relative; left: auto; top: auto; transform: none; }
html.mobile .lay-swap .f-piles > .shuffle-btn.v19 .sh-cost { display: block; position: absolute; z-index: 2; left: 50%; right: auto; bottom: -9px; transform: translateX(-50%); margin: 0; font-family: var(--kfont, var(--body)), serif; font-size: 10px; padding: 1px 5px; white-space: nowrap; }   /* v3.33 "생명 −1"(예전 ♥−1) — 인장 아래 가운데 */
/* 오른쪽 아래 생명: 숫자 · /40이 판 밖으로 넘치지 않게 */
html.appui .lay-swap .pv-bot .pl { column-gap: 6px; }
html.appui .lay-swap .pv-bot .hgem { width: 34px; }
html.appui .lay-swap .pv-bot .pl-num { font-size: 32px; }
html.appui .lay-swap .pv-bot .pl-val small { font-size: 11px; }
html.appui .lay-swap .pv-bot .pl-val { min-width: 0; white-space: nowrap; }
/* 상대 깃발: 이름 · 단체가 다 보이게 길게(오른쪽 빈 자리로 100px 늘림) */
html.mobile .lay-swap .frow-top .f-flag { position: relative; z-index: 3; }
html.mobile .lay-swap .frow-top .f-flag .pside { width: calc(100% + 100px); flex: none; }

/* ================= v3.32.2 폰 · 앱: 대기실은 깃발만 · 깃발을 누르면 출정 창 =================
   덱 보기(카드 40장)와 출정의 단은 대기실에 그리지 않는다(js/screens.js renderDeckView · openDeckSheet).
   깃발 9개가 왼쪽 칸을 다 쓰고, 깃발을 누르면 가운데에 출정 창: 덱 이름 · 장수 · 레벨 곡선 · [덱 조정실] [컴퓨터와 대전] [순례] [대전] */
.dk-hint { display: none; }
html.appui .screen-lobby .deck-view { display: none; }
html.appui .screen-lobby .decks { grid-row: 1 / span 2; align-content: stretch; grid-template-rows: auto 1fr; }
html.appui .screen-lobby .deck-fac { justify-content: flex-start; gap: 10px; }
html.appui .screen-lobby .deck-tile.rq { flex: 1; max-height: 132px; padding-block: 10px !important; }
html.appui .screen-lobby .decks .panel-title .dk-hint { display: inline; order: 3; margin-left: auto; font-style: normal; font-family: var(--body); font-size: 14px; letter-spacing: .02em; color: var(--gold); opacity: .85; }
html.appui .screen-lobby .deck-tile.on { box-shadow: 0 0 0 2px var(--gc), 0 0 18px color-mix(in srgb, var(--gc) 45%, transparent); }

.deck-sheet-wrap { z-index: 120; }
.modal.deck-sheet { --fc: var(--gc); position: relative; width: min(860px, 100%); padding: 18px 22px 20px; display: grid; gap: 14px; border-color: color-mix(in srgb, var(--gc) 55%, var(--line-gold, #6b5a35)); background: linear-gradient(120deg, color-mix(in srgb, var(--gc) 20%, transparent), transparent 55%), var(--panel-2, #11121b); }
.deck-sheet .ds-x { position: absolute; top: 8px; right: 10px; width: 40px; height: 40px; border: 0; background: none; color: var(--muted); font-size: 22px; cursor: pointer; }
.deck-sheet .ds-head { display: flex; align-items: center; gap: 16px; padding-right: 36px; }
.deck-sheet .ds-head > .emblem { flex: none; }
.deck-sheet .ds-title { flex: 1; min-width: 0; display: grid; gap: 3px; }
.deck-sheet .ds-title .eyebrow { margin: 0; }
.deck-sheet .ds-title h3 { margin: 0; font-size: 24px; line-height: 1.2; }
.deck-sheet .ds-title .muted { margin: 0; font-size: 14px; }
.deck-sheet .ds-st { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; font-size: 15px; }
.deck-sheet .ds-kinds { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--muted); }
.deck-sheet .ds-kinds span { display: inline; white-space: nowrap; }
.deck-sheet .ds-kinds b { color: var(--ink); }
.deck-sheet .ds-draft { color: var(--gold); font-size: 13px; }
.deck-sheet .dv-curve { flex: none; height: 70px; }
.deck-sheet .dv-curve span { width: 16px; }
.deck-sheet .dv-actions { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; }
.deck-sheet .btn.rite-side:not(.rb) { flex-direction: column; font-size: 15px; min-height: 84px; }
.deck-sheet .btn.rite:not(.rb) { min-height: 84px; }
.deck-sheet .altar-gates.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.deck-sheet .btn.rite b { font-size: 17px; }
@media (max-width: 760px) {
  .deck-sheet .ds-head { gap: 12px; }
  .deck-sheet .ds-head > .emblem { width: 56px !important; height: 56px !important; }
  .deck-sheet .ds-head .dv-curve { display: none; }
  .deck-sheet .ds-title h3 { font-size: 20px; }
  .deck-sheet .dv-actions { grid-template-columns: minmax(0, 1fr); }
  .deck-sheet .altar-gates, .deck-sheet .altar-gates.n4 { grid-template-columns: minmax(0, 1fr); }
}
html.appui .screen-lobby .lobby { align-items: stretch; }
html.appui .screen-lobby .deck-fac { flex: 1; }

/* ================= v3.32.2 폰 · 앱: 덱 조정실 =================
   PC의 1.5배(zoom)는 폰에서 화면 폭이 모자라 거르기 칸이 겹치고 카드가 화면 밖으로 밀렸다.
   폰에서는 1.15배로, 위 띠는 한 줄(덱 이름 · 장수 계기판 · 단추), 아래는 왼쪽 운명의 서 · 오른쪽 카드.
   거르기는 [카드 보관함] [내 덱] 두 탭 — 고른 탭의 줄만 펼치고 줄마다 한 줄로(넘치면 옆으로 밀어 봄).
   대기실에서 들어오면 '내 덱'(덱에 든 카드)이 먼저 보인다(js/screens.js showEditor). */
html.mobile .screen-editor > .ed-bar, html.mobile .screen-editor > .editor { zoom: 1.15; }
html.appui .screen-editor .ed-bar { flex-wrap: nowrap; gap: 10px; padding-block: 6px; }
html.appui .screen-editor .ed-name { flex: 0 1 290px; min-width: 0; padding-block: 4px !important; }
html.appui .screen-editor .ed-name .emblem { width: 40px !important; height: 40px !important; flex: none; }
html.appui .screen-editor .ed-name input { font-size: 17px; padding-block: 6px; }
html.appui .screen-editor .ed-gauge { flex: 1 1 auto; min-width: 0; padding: 4px 10px; gap: 10px; }
html.appui .screen-editor .g-num b { font-size: 26px; }
html.appui .screen-editor .g-num span { font-size: 13px; }
html.appui .screen-editor .g-body { min-width: 0; flex: 1; }
html.appui .screen-editor .g-msg { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.appui .screen-editor .ed-btns { flex: none; flex-wrap: nowrap; gap: 6px; }
html.appui .screen-editor .ed-btns .btn { padding: 8px 12px; font-size: 14px; min-height: 40px; white-space: nowrap; }
html.appui .screen-editor .ed-btns .btn small { font-size: 11px; }
html.appui .screen-editor .ed-bar + .editor { padding-top: 8px; }
html.appui .screen-editor .editor { grid-template-columns: 262px minmax(0, 1fr); gap: 10px; padding-bottom: 6px; }
/* 운명의 서(왼쪽): 머리 · 촛대를 낮게, 목록이 나머지를 쓴다 */
html.appui .screen-editor .ed-deck { padding: 10px 10px 8px !important; }
html.appui .screen-editor .ed-deck > .panel-title { margin-bottom: 4px; font-size: 15px; }
html.appui .screen-editor .ed-mix { margin-bottom: 4px; font-size: 12.5px; }
html.appui .screen-editor .ed-curve { height: 50px; margin-bottom: 6px; }
html.appui .screen-editor .ed-deck-foot { margin-top: 4px; padding-top: 4px; }
html.appui .screen-editor .ed-deck-foot > .small { display: none; }
html.appui .screen-editor .ed-deck-foot { justify-content: flex-end; }
/* 카드 칸(오른쪽): [보유 칩 줄 | 검색] / [거르기 탭] / 카드 */
html.appui .screen-editor .ed-pool { display: grid !important; grid-template-columns: minmax(0, 1fr) 200px; grid-template-rows: auto auto minmax(0, 1fr); gap: 6px 10px; padding: 8px 10px 6px !important; }
html.appui .screen-editor .pool-head { display: contents; }
html.appui .screen-editor .pool-head > .panel-title { display: none; }
html.appui .screen-editor #ed-q { grid-column: 2; grid-row: 1; width: 100%; min-width: 0; padding-block: 5px; font-size: 14px; }
html.appui .screen-editor #ed-own { grid-column: 1; grid-row: 1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0; }
html.appui .screen-editor .ed-filts { grid-column: 1 / -1; grid-row: 2; display: flex; gap: 6px; margin: 0; }
html.appui .screen-editor .ed-help { display: none; }
html.appui .screen-editor #ed-pool { grid-column: 1 / -1; grid-row: 3; min-height: 0; padding-top: 8px; }
html.appui .screen-editor .ed-filt { padding: 4px 8px; }
html.appui .screen-editor .ed-filt:not(.active) { flex: none; display: flex; align-items: center; }
html.appui .screen-editor .ed-filt:not(.active) > :not(.edf-head) { display: none !important; }
html.appui .screen-editor .ed-filt.active { flex: 1; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 4px; align-items: center; }
html.appui .screen-editor .ed-filt.active > .edf-head { grid-column: 1; grid-row: 1 / span 3; align-self: center; }
html.appui .screen-editor .ed-filt.active > :not(.edf-head) { grid-column: 2; margin: 0 !important; }
html.appui .screen-editor .edf-head small { display: none; }
html.appui .screen-editor .edf-tab { font-size: 14px; white-space: nowrap; padding-block: 6px; }
html.appui .screen-editor .ed-filt .ed-kinds, html.appui .screen-editor .ed-filt .ed-grades, html.appui .screen-editor .ed-filt #ed-filter2 { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
html.appui .screen-editor .ed-filt .ed-kinds::-webkit-scrollbar, html.appui .screen-editor .ed-filt .ed-grades::-webkit-scrollbar, html.appui .screen-editor #ed-filter2::-webkit-scrollbar, html.appui .screen-editor #ed-own::-webkit-scrollbar { display: none; }
html.appui .screen-editor .ed-filt .ed-kinds > *, html.appui .screen-editor .ed-filt .ed-grades > *, html.appui .screen-editor #ed-filter2 > *, html.appui .screen-editor #ed-own > * { flex: none; }
html.appui .screen-editor .ed-spell-grp, html.appui .screen-editor .ed-sub { flex-wrap: nowrap; }
html.appui .screen-editor .ed-score { margin: 0; }
html.appui .screen-editor .ed-score { padding-block: 0; justify-self: start; }
html.appui .screen-editor .ed-score .sc-sub { flex-direction: row; gap: 10px; margin-left: 14px; }
html.appui .screen-editor .ed-score .sc-tier i { transform: scale(.85); }
html.appui .screen-editor .pool-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px 6px; }
html.appui .screen-editor .pool-card .card { --cw: 118px; }

/* ================= v3.32.3 PC 앱식 배치 (html.appui, html.mobile 없음) =================
   위 v3.32.1 · v3.32.2 절의 배치를 PC에서도 쓴다. 폰은 화면을 0.6배 안팎으로 줄여 보이지만 PC는 그대로라 몇 군데만 맞춘다. */
/* 덱 조정실: PC 1.5배(style.css)는 탭 배치에 너무 커서 1.25배로 */
html.appui:not(.mobile) .screen-editor > .ed-bar, html.appui:not(.mobile) .screen-editor > .editor { zoom: 1.25; }
/* 대기실: 폰은 화면 높이에 깃발 3줄이 꼭 맞지만 PC는 아래가 비었다 → 대기실이 화면 아래(안내 단추 자리 위)까지 차고, 깃발이 그 높이를 나눠 쓴다 */
html.appui:not(.mobile) .screen-lobby .lobby { min-height: calc(100dvh - 76px); padding-bottom: 96px; gap: 14px 18px; grid-template-columns: minmax(0, 1fr) 300px; }
html.appui:not(.mobile) .screen-lobby .decks { padding-bottom: 16px; }
html.appui:not(.mobile) .screen-lobby .deck-fac { gap: 14px; }
html.appui:not(.mobile) .screen-lobby .deck-tile.rq { max-height: 210px; padding: 14px 16px 14px 10px !important; gap: 14px !important; }
html.appui:not(.mobile) .screen-lobby .dt-seal { width: 64px; height: 64px; }
html.appui:not(.mobile) .screen-lobby .dt-seal .emblem { width: 52px !important; height: 52px !important; }
html.appui:not(.mobile) .screen-lobby .dt-body b { font-size: clamp(16px, 1.25vw, 20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.appui:not(.mobile) .screen-lobby .dt-body .en { font-size: 13.5px; }
html.appui:not(.mobile) .screen-lobby .dt-st { font-size: 14.5px; }
html.appui:not(.mobile) .screen-lobby .deck-tile.rq .dt-mark { width: 130px; height: 130px; }
html.appui:not(.mobile) .screen-lobby .df-head { font-size: 15px; }
html.appui:not(.mobile) .screen-lobby .side-col { align-self: stretch; display: flex; flex-direction: column; }
html.appui:not(.mobile) .screen-lobby .side-col .chat { flex: 1; }

/* ================= v3.32.4 PC 전장 (html.appui, html.mobile 없음) — 폰 · 앱은 위 절 그대로 =================
   준비 완료(+모래시계): 154 × 54px로 고정이라 큰 화면일수록 옆의 파친코(.arcade, 높이 = 카드 폭 × .924)보다 훨씬 작아 보였다.
   PC에서는 파친코와 줄을 맞춘다 — 묶음의 위 · 아래 끝 = 파친코의 위 · 아래 끝, 준비 완료 단추 높이 = 파친코 높이의 절반,
   모래시계는 위 끝에. 폭은 파친코와 같게(좁은 화면은 예전 154px), 글자도 카드 폭을 따라 커지고 넘치면 두 줄로 */
html.appui:not(.mobile) .rd-wrap.rd-pile { height: calc(var(--cw) * .924); width: max(154px, calc(var(--cw) * .78)); justify-content: space-between; gap: 0; }
html.appui:not(.mobile) .rd-wrap.rd-pile .turn-clock { height: clamp(32px, calc(var(--cw) * .22), 46px); }
html.appui:not(.mobile) .rd-wrap.rd-pile .turn-clock .tc-glass { height: clamp(24px, calc(var(--cw) * .16), 34px); }
html.appui:not(.mobile) .rd-wrap.rd-pile .turn-clock .tc-num { font-size: clamp(15px, calc(var(--cw) * .1), 22px); }
html.appui:not(.mobile) .rd-wrap.rd-pile .ready-btn { height: calc(var(--cw) * .462); padding: 0 .6em; gap: .4em; border-radius: 10px; font-size: clamp(15.5px, calc(var(--cw) * .095), 22px); justify-content: center; white-space: normal; line-height: 1.2; }
html.appui:not(.mobile) .rd-wrap.rd-pile .ready-btn .rd-t { text-align: center; word-break: keep-all; text-wrap: balance; }
html.appui:not(.mobile) .rd-wrap.rd-pile .ready-btn .rd-ico { width: 1.25em; height: 1.25em; }
html.appui:not(.mobile) .rd-wrap.rd-pile .ready-btn.rd-wait { font-size: clamp(14px, calc(var(--cw) * .09), 20px); }
/* 생명(오른쪽 아래): 폰 맞춤(32px)을 PC에서는 쓰지 않고 예전 크기로(css/swap.css "생명: 나") */
html.appui:not(.mobile) .lay-swap .pv-bot .pl { column-gap: 12px; }
html.appui:not(.mobile) .lay-swap .pv-bot .hgem { width: clamp(40px, calc(var(--cw) * .42), 84px); }
html.appui:not(.mobile) .lay-swap .pv-bot .pl-num { font-size: clamp(36px, calc(var(--cw) * .4), 80px); }
html.appui:not(.mobile) .lay-swap .pv-bot .pl-val small { font-size: clamp(13px, calc(var(--cw) * .1), 20px); }