/* ══ 전투 — 카제나 배치 ═══════════════════════════════════════════════════
   싸움터가 화면 전체다. 판(패널)을 걷어 내고 배경 그림 위에 사도와 적이 선다.
   나머지는 가장자리에 붙는다:

     층 이름 · 신탁                  턴                    기록 · 전체화면
     뽑을 더미
                   사도 셋                      적
     게이지 | 사도 초상                                            버린 더미
       ·궁극기                 [   손패 부채꼴   ]                 (턴 넘기기)
                                     AP

   다른 css 뒤에 읽혀서 덧씌운다. 크기는 논리 픽셀(js/stage.js 의 배율 안) —
   PC 는 높이 900, 휴대폰은 540 을 기준으로 적었다(.phone 아래). */

/* 머리띠·바닥글은 전투에서 치운다 — 전체화면 단추와 안내 한 줄만 싸움터 위에 띄운다 */
body:has(#screen.battle) .top {
  position: fixed; top: 10px; right: 12px; z-index: 40; padding: 0; border: 0; background: none;
}
body:has(#screen.battle) .top > :not(.fsbtn) { display: none; }
body:has(#screen.battle) .fsbtn { background: #0c0a16b0; backdrop-filter: blur(4px); }
body:has(#screen.battle) .bottom {
  position: fixed; left: 50%; bottom: 300px; transform: translateX(-50%); z-index: 40;
  min-height: 0; padding: 0; border: 0; background: none; pointer-events: none;
}
body:has(#screen.battle) #hint:not(:empty) {
  display: inline-block; padding: 6px 18px; border-radius: 99px; font-size: 14px; font-weight: 700;
  background: #0c0a16d9; border: 1px solid #ffcf6b88; color: #ffe7ad; box-shadow: 0 6px 18px #0008;
}

#screen.battle,
.phone #screen.battle {
  position: fixed; inset: 0; z-index: 1; display: block; max-width: none; margin: 0;
  width: auto; height: var(--app-h, 100vh); padding: 0; border-radius: 0; overflow: hidden;
  background:
    linear-gradient(180deg, #0a081466 0, transparent 22%, transparent 58%, #0a0814cc 86%, #0a0814 100%),
    var(--stagebg, none) center 30% / cover no-repeat,
    radial-gradient(ellipse at 50% 20%, #2a2340, #0e0c17 80%);
}

/* ── 싸움터 — 화면 전체. 발밑이 화면 높이의 2/3 쯤 ───────────────────── */
.battle .field,
.phone .battle .field {
  position: absolute; inset: 0; z-index: 1; min-height: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px;
  padding: 60px 200px 372px 250px;   /* 발밑 = 화면 아래에서 372 — 그 밑은 손패 몫 */
  background: none; border: 0; border-radius: 0; overflow: visible;
}
.battle .field:after { display: none; }
.battle .afield { padding-left: 0; gap: 10px; }
.battle .foes { padding-right: 0; gap: 18px; }
.stand .sname, .foe .fname { text-shadow: 0 1px 2px #000, 0 0 8px #000c; }
.stand .hpwrap .nums, .foe .hpwrap .nums { color: #fff; text-shadow: 0 1px 2px #000; justify-content: center; }
.stand .hpwrap .bar, .foe .hpwrap .bar { height: 8px; border: 1px solid #0008; box-shadow: 0 1px 3px #0009; }
.foe .hpwrap .bar i { background: linear-gradient(90deg, #e0607a, #ff8f8f); }
.stand .chips, .foe .chips { justify-content: center; max-width: 180px; }
.battle .chip, .battle .chips span { background: #120f1ed9; }
/* 사도의 말 — 머리 위 말풍선 */
.stand .bubble {
  position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); z-index: 7;
  width: max-content; max-width: 220px; margin: 0 0 4px; font-size: 12px;
  background: #fffdf6; color: #2a2238; border: 0; border-radius: 10px; padding: 6px 10px;
  box-shadow: 0 6px 16px #0009;
}
.stand .bubble:after {
  content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px;
  border: 6px solid transparent; border-top-color: #fffdf6;
}

.turntag { top: 14px; background: #0c0a16b0; backdrop-filter: blur(4px); }
.turnban { top: 38%; }

/* ── 머리 — 왼쪽 위 ───────────────────────────────────────────────────── */
.battle .bhead,
.phone .battle .bhead {
  position: absolute; left: 20px; top: 14px; z-index: 5; max-width: 40%;
  display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; padding: 0;
}
.bwhere { font-size: 18px; text-shadow: 0 2px 6px #000c; }
.bsub { color: #d9d2f2; text-shadow: 0 1px 4px #000; }
.bflash { display: flex; gap: 4px; flex-wrap: wrap; width: 100%; }

/* ── 더미 — 뽑을 것은 왼쪽, 버린 것은 오른쪽 ───────────────────────────── */
.battle .pile2,
.phone .battle .pile2 {
  position: absolute; z-index: 6; width: 62px; padding: 8px 4px 7px;
  background: #0c0a16c4; backdrop-filter: blur(4px); border-radius: 10px;
}
.battle .pile2.draw { left: 20px; bottom: 330px; }
.battle .pile2.disc { right: 34px; bottom: 200px; }
.pile2:before {                                  /* 카드 뭉치 모양 */
  content: ""; position: absolute; inset: -4px 4px auto; height: 6px; border-radius: 6px 6px 0 0;
  background: #3a3352; border: 1px solid #ffffff1f; border-bottom: 0;
}

/* ── 궁극기 게이지 — 왼쪽 가장자리에 세로로. 아래에서 차오른다 ───────────── */
.battle .gauge,
.phone .battle .gauge {
  position: absolute; left: 20px; bottom: 22px; z-index: 6; height: 272px; width: 40px; padding: 0;
  display: flex; flex-direction: column-reverse; align-items: center; gap: 6px;
}
.gauge .glabel { writing-mode: vertical-rl; font-size: 10px; letter-spacing: .3em; color: #d9d2f2; }
.gauge .gbar {
  flex: 1; width: 14px; height: auto; border-radius: 99px;
  background: #0a0812cc; border: 1px solid #ffffff2e; box-shadow: 0 0 0 1px #0008;
}
.gauge .gbar i:not(.tick) {
  position: absolute; left: 0; right: 0; bottom: 0; width: auto !important; height: var(--g, 0%);
  background: linear-gradient(0deg, #6fb6d9, #b79bff 55%, var(--hot2));
  transition: height .3s;
}
.gauge .gbar .tick {
  left: -4px !important; right: -4px; top: auto; bottom: var(--at); width: auto; height: 1px;
  transform: none; background: #ffffffa0;
}
.gauge .gbar .tick:after { left: auto; right: calc(100% + 4px); top: -6px; transform: none; font-size: 8.5px; color: #d9d2f2; }
.gauge .gnum { min-width: 0; font-size: 12px; color: #fff; text-shadow: 0 1px 3px #000; text-align: center; }
.gauge.ready .gnum { color: var(--hot2); }

/* ── 사도 초상 — 게이지 옆에 세로로. 누르면 궁극기 ─────────────────────── */
.battle .allies,
.phone .battle .allies {
  position: absolute; left: 70px; bottom: 22px; z-index: 6; width: 176px;
  display: flex; flex-direction: column-reverse; gap: 6px;
}
.battle .ally,
.phone .battle .ally {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px 5px 5px; border-radius: 12px;
  background: linear-gradient(90deg, #120f1ee6, #120f1e99); border: 1px solid #ffffff1f;
}
.battle .ally .art { width: 48px !important; height: 48px !important; border-radius: 9px; background: #0f0d18; flex: none; }
.battle .ally .atop { display: flex; align-items: center; gap: 5px; }
.battle .ally .nm { font-size: 13px; }
.battle .ally .row, .battle .ally .nature, .battle .ally .chips { display: none; }
.battle .ally .ultbtn { margin-top: 3px; padding: 3px 8px; gap: 6px; font-size: 10.5px; }
.battle .ally .ultbtn .uname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.battle .ally .ultbtn:not(.no) { animation: ultglow 1.1s ease-in-out infinite alternate; }
@keyframes ultglow { from { box-shadow: 0 0 0 2px #ffcf6b33; } to { box-shadow: 0 0 0 3px #ffcf6b88, 0 0 14px #ffcf6b66; } }
.battle .ally.dead { opacity: .4; filter: grayscale(1); }

/* ── 손패 — 가운데 아래 부채꼴 ──────────────────────────────────────────── */
.battle .hand,
.phone .battle .hand {
  position: absolute; left: 260px; right: 190px; bottom: 54px; z-index: 10;
  display: flex; flex-wrap: nowrap; justify-content: center; align-items: flex-end; gap: 0; padding: 0;
}
.battle .hand .card { flex: 0 1 184px; width: 184px; min-width: 0; margin: 0 -6px; box-shadow: 0 10px 22px #0009; }

/* ── AP — 손패 밑 가운데, 숫자를 크게 ───────────────────────────────────── */
.battle .deckrow { position: static; display: block; }
.battle .apbox,
.phone .battle .apbox {
  position: absolute; left: 50%; bottom: 8px; z-index: 11; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 4px 16px 4px 8px; border-radius: 99px;
  background: #0c0a16d9; border: 1px solid #ffcf6b99; box-shadow: 0 4px 14px #0009;
}
.battle .apbox .apnum {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  font-size: 24px; color: #221a08; background: radial-gradient(circle at 40% 35%, #ffe7a8, #ffb83c);
  box-shadow: 0 0 12px #ffcf6b88;
}
.battle .deckrow .pile { position: absolute; left: calc(50% + 120px); bottom: 20px; z-index: 11; color: #d9d2f2; text-shadow: 0 1px 3px #000; }

/* ── 턴 넘기기 — 오른쪽 아래 동그란 단추 ────────────────────────────────── */
.battle .endturn,
.phone .battle .endturn {
  position: absolute; right: 28px; bottom: 34px; z-index: 11; margin: 0;
  width: 128px; height: 128px; min-height: 0; padding: 0; border-radius: 50%;
  font-size: 16px; line-height: 1.25; white-space: normal;
  background: radial-gradient(circle at 40% 30%, #ffe9b0, #ffc24a 60%, #d8962a);
  border: 3px solid #fff3cf; box-shadow: 0 0 0 4px #0c0a1699, 0 10px 24px #000a;
}
.battle .endturn:hover:not(:disabled) { filter: brightness(1.08); background: radial-gradient(circle at 40% 30%, #fff0c4, #ffcb5c 60%, #e0a034); }

/* ── 기록 — 오른쪽 위, 접어 둔다 ────────────────────────────────────────── */
.battle .logwrap,
.phone .battle .logwrap {
  display: flex; position: absolute; right: 132px; top: 10px; z-index: 30; width: 380px; align-items: flex-end;
}
.battle .loglast { width: auto; max-width: 100%; padding: 6px 12px; background: #0c0a16b0; backdrop-filter: blur(4px); }
.battle .logwrap.open .log { width: 100%; background: #0c0a16eb; }

/* ══ 휴대폰 가로 — 높이 540 ══════════════════════════════════════════════ */
.phone body:has(#screen.battle) .top { top: 6px; right: 8px; }
.phone body:has(#screen.battle) .bottom { top: auto; bottom: 196px; }
.phone .battle .field { padding: 40px 150px 234px 196px; gap: 20px; }
.phone .battle .bhead { left: 12px; top: 8px; max-width: 34%; }
.phone .bwhere { font-size: 15px; }
.phone .bsub, .phone .bflash { display: none; }
.phone .turntag { top: 8px; }

.phone .battle .pile2 { width: 52px; padding: 5px 2px; }
.phone .battle .pile2.draw { left: 12px; bottom: 206px; }
.phone .battle .pile2.disc { right: 22px; bottom: 128px; }

.phone .battle .gauge { left: 10px; bottom: 10px; height: 178px; width: 34px; }
.phone .gauge .glabel { display: none; }
.phone .battle .allies { left: 52px; bottom: 10px; width: 150px; gap: 4px; }
.phone .battle .ally { padding: 3px 6px 3px 3px; gap: 6px; }
.phone .battle .ally .art { width: 40px !important; height: 40px !important; }
.phone .battle .ally .nm { font-size: 13px; }
.phone .battle .ally .ultbtn { min-height: 26px; font-size: 11px; padding: 2px 6px; margin-top: 2px; }

.phone .battle .hand { left: 206px; right: 120px; bottom: 44px; }
.phone .battle .hand .card { flex: 0 1 122px; width: 122px; margin: 0 -4px; }
.phone .battle .apbox { bottom: 4px; padding: 2px 12px 2px 4px; gap: 7px; }
.phone .battle .apbox .apnum { width: 34px; height: 34px; font-size: 20px; }
.phone .battle .deckrow .pile { display: none; }
.phone .battle .endturn { right: 14px; bottom: 16px; width: 92px; height: 92px; font-size: 15px; }
.phone .battle .logwrap { display: none; }

/* ── 서 있는 모습 — 크게, 모두 같은 배율로 ─────────────────────────────────
   스파인은 js/art.js 의 SPINE_UNIT(칸 높이 = 게임 세계 몇 단위)로 모두 같은 배율로 그린다 — 원작 전투처럼.
   칸은 자리만 잡는다: 발은 칸 바닥 가운데, 보통 사도의 머리는 칸 위끝 가까이. 날개·무기·큰 보스는 칸 밖으로 넘친다.
   보스는 칸 위로 크게 넘치니 의도를 그만큼 띄운다. */
.battle .field { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 90px; padding-left: 100px; padding-right: 110px; }
.battle .afield { gap: 0; }
.battle .foes { gap: 6px; }
.battle .stand, .battle .foe:not(.boss) { width: clamp(96px, 42cqh, 230px); }
.battle .stand .art, .battle .foe:not(.boss) .art {
  width: clamp(90px, 42cqh, 230px) !important; height: clamp(100px, 60cqh, 300px) !important;
}
.battle .foe.boss { width: clamp(150px, 56cqh, 360px); }
.battle .foe.boss .art { width: clamp(140px, 60cqh, 380px) !important; height: clamp(100px, 60cqh, 300px) !important; }
.battle .foe .intent { margin-bottom: 2cqh; }
.battle .foe.boss .intent { margin-bottom: 20cqh; }
.battle .stand .bubble { margin-bottom: 2cqh; }
.art.art-over { overflow: visible; position: relative; }
.art.art-over canvas { z-index: 0; }
/* 발밑 그림자 — 배경 위에 떠 보이지 않게 */
.battle .stand .art, .battle .foe .art { position: relative; }
.battle .stand .art:after, .battle .foe .art:after {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: 0; height: 9%; z-index: -1;
  border-radius: 50%; background: radial-gradient(closest-side, #000b, transparent);
}

/* 안내 한 줄은 턴 표시 밑 — 손패 위에 두면 사도 체력 숫자를 가렸다 */
body:has(#screen.battle) .bottom,
.phone body:has(#screen.battle) .bottom { top: 52px; bottom: auto; }
.phone body:has(#screen.battle) .bottom { top: 40px; }

/* 휴대폰 — 싸움터 높이가 약 280 이라 cqh 값이 그대로 줄어든다. 가장자리만 좁힌다 */
.phone .battle .field { gap: 40px; padding-left: 70px; padding-right: 80px; }
/* 휴대폰은 게이지 옆에 눈금 글자를 둘 자리가 없다 — 눈금 선만 */
.phone .gauge .gbar .tick:after { display: none; }

/* 성격 표시는 배경 그림 위에 뜬다 — 어두운 바탕을 깔아 색이 읽히게 */
.battle .nature { background: #0c0a16b8; }

/* ══ 결 — 어두운 유리 · 가는 금선 ═══════════════════════════════════════════
   판은 반투명 어둠에 흐림, 테두리는 1px 흰 선, 강조는 금빛 하나만. 글자는 흰색에 그림자.
   (크림·밤색 굵은 테두리로 원작 흉내를 냈더니 촌스러웠다 — 배경 그림과 사도가 주인공이다) */
.battle {
  --ui-glass: #0d0b16c7; --ui-glass2: #1a1628e6; --ui-line: #ffffff26; --ui-line2: #ffffff14;
  --ui-gold: #f6d58e; --ui-gold2: #d9a54a; --ui-ink: #f4f1ff; --ui-dim: #b9b2d6;
  --ui-turn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h2.2l7.6 8-7.6 8H5l7.6-8L5 4zm6 0h2.2l7.6 8-7.6 8H11l7.6-8L11 4z'/%3E%3C/svg%3E");
}

/* ── 사도를 띄운다 — 아군 칸을 넓히고 셋을 고르게 벌린다 ─────────────────── */
.battle .field { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 50px; padding-left: 96px; }
.battle .afield { justify-content: space-evenly; gap: 0; }
.phone .battle .field { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; padding-left: 64px; }
/* 스파인이 안 뜨고 그림 한 장으로 떨어졌을 때도 발을 바닥에 — 네모 칸에 잘리지 않게 */
.battle .stand .art:not(.art-spine), .battle .foe .art:not(.art-spine) { overflow: visible; border-radius: 0; background: none; }
.battle .stand .art > img, .battle .foe .art > img { object-fit: contain; object-position: 50% 100%; }

/* ── 고학년 게이지 — 가는 막대, 푸른빛에서 금빛으로 ─────────────────────── */
.battle .gauge .glabel {
  writing-mode: horizontal-tb; white-space: nowrap; letter-spacing: .12em;
  font-size: 10px; font-weight: 800; color: var(--ui-dim); text-shadow: 0 1px 3px #000;
}
.battle .gauge .gbar {
  width: 8px; background: #0a0812b3; border: 1px solid var(--ui-line);
  box-shadow: 0 0 0 1px #0006, 0 2px 8px #0008;
}
.battle .gauge .gbar i:not(.tick) { background: linear-gradient(0deg, #6fb6e6, #b79bff 55%, var(--ui-gold)); border-radius: 99px; box-shadow: 0 0 8px #b79bff88; }
.battle .gauge .gbar .tick { background: #ffffff55; left: -3px !important; right: -3px; }
.battle .gauge .gbar .tick:after { display: none; }
.battle .gauge .gnum { font-size: 12px; font-weight: 800; color: var(--ui-ink); text-shadow: 0 1px 3px #000; }
.battle .gauge.ready .gnum { color: var(--ui-gold); }
.gbar .gwho { position: absolute; left: 0; top: 0; width: 100% !important; height: 100%; pointer-events: none; }
.gface {
  position: absolute; left: calc(50% - 11px - var(--k, 0) * 14px); width: 22px; height: 22px; transform: translateY(50%);
  border-radius: 50%; overflow: hidden; border: 1.5px solid #ffffff66; background: #1a1628;
  box-shadow: 0 2px 6px #000a; filter: grayscale(.9) brightness(.6); transition: filter .25s, border-color .25s;
  display: grid; place-items: center; font-size: 10px; font-weight: 800; color: var(--ui-ink);
}
.gface img { width: 130%; height: 130%; object-fit: cover; object-position: 50% 30%; }
.gface.on { filter: none; border-color: var(--ui-gold); box-shadow: 0 0 0 1px #0008, 0 0 10px #f6d58eaa; }

/* ── 사도 칸 — 판 없이 둥근 고학년 아이콘과 이름만 ───────────────────────── */
.battle .ally,
.phone .battle .ally {
  position: relative; min-height: 62px; padding: 4px 8px 4px 70px; gap: 0;
  background: linear-gradient(90deg, #0d0b16b3 0, #0d0b1666 70%, transparent);
  border: 0; border-left: 2px solid var(--ui-line); border-radius: 0 10px 10px 0; box-shadow: none;
}
.battle .ally .nm { color: var(--ui-ink); font-size: 13.5px; font-weight: 800; text-shadow: 0 1px 3px #000; }
.battle .ally .abody { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.battle .ally .ultbtn.grad,
.phone .battle .ally .ultbtn.grad {
  margin: 1px 0 0; padding: 0; min-height: 0; border: 0; background: none; box-shadow: none; animation: none;
  display: flex; align-items: baseline; gap: 5px; font-size: 10.5px; opacity: 1; color: var(--ui-dim);
}
.battle .ally .ultbtn.grad .ucost { color: var(--ui-dim); font-weight: 800; }
.battle .ally .ultbtn.grad .uname { color: var(--ui-dim); font-weight: 600; }
.battle .ally .ultbtn.grad:not(.no) .ucost, .battle .ally .ultbtn.grad:not(.no) .uname { color: var(--ui-gold); }
/* 둥근 아이콘 — 둘레 고리가 게이지만큼 찬다(--pct) */
.uface {
  position: absolute; left: 6px; top: 50%; width: 56px; height: 56px; transform: translateY(-50%);
  border-radius: 50%; padding: 3px;
  background: conic-gradient(var(--ui-gold) calc(var(--pct, 0) * 1%), #ffffff22 0);
  box-shadow: 0 3px 10px #000a;
}
.uface img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%;
  border: 2px solid #0d0b16; filter: grayscale(.55) brightness(.7); transition: filter .25s;
}
.ultbtn.grad:not(.no) .uface { animation: gradready 1.2s ease-in-out infinite alternate; }
.ultbtn.grad:not(.no) .uface img { filter: none; }
@keyframes gradready {
  from { box-shadow: 0 0 0 1px #f6d58e66, 0 0 8px #f6d58e66; }
  to   { box-shadow: 0 0 0 2px #f6d58ecc, 0 0 20px #f6d58ecc; }
}
.battle .ally .ultbtn.grad:not(.no) { cursor: pointer; }
.battle .ally:has(.ultbtn.grad:not(.no)) { border-left-color: var(--ui-gold); }
.ultbtn.grad.no { cursor: default; }
.battle .ally.dead { filter: grayscale(1); opacity: .45; }

/* ── 턴 넘기기 — 어두운 원, 금빛 고리, 겹화살 ───────────────────────────── */
.battle .endturn,
.phone .battle .endturn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--ui-ink); font-weight: 800; font-size: 14px; letter-spacing: .02em;
  background: radial-gradient(circle at 50% 35%, #2c2544 0, #15121f 70%);
  border: 2px solid var(--ui-gold);
  box-shadow: inset 0 0 0 5px #15121f, inset 0 0 0 6px #f6d58e40, 0 0 0 1px #0008, 0 0 22px #f6d58e33, 0 10px 24px #000b;
  transition: box-shadow .2s, transform .1s;
}
.battle .endturn:before {
  content: ""; width: 30%; aspect-ratio: 1; flex: none; background: var(--ui-gold);
  -webkit-mask: var(--ui-turn) center / contain no-repeat; mask: var(--ui-turn) center / contain no-repeat;
}
.battle .endturn:hover:not(:disabled) {
  background: radial-gradient(circle at 50% 35%, #3a3158 0, #1a1628 70%); filter: none;
  box-shadow: inset 0 0 0 5px #1a1628, inset 0 0 0 6px #f6d58e80, 0 0 0 1px #0008, 0 0 34px #f6d58e66, 0 10px 24px #000b;
}
.battle .endturn:active:not(:disabled) { transform: scale(.96); }
.battle .endturn:disabled { filter: grayscale(.8) brightness(.7); }

/* ── AP — 금테 마름모 안에 큰 숫자, 옆에 비스듬한 눈금 ──────────────────── */
.battle .apbox,
.phone .battle .apbox {
  gap: 10px; padding: 4px 16px 4px 8px; border-radius: 10px;
  background: var(--ui-glass); backdrop-filter: blur(6px);
  border: 1px solid var(--ui-line); box-shadow: 0 8px 18px #000a;
}
.battle .apbox .apnum {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin: -10px 2px -10px 0;
  font-size: 22px; font-weight: 900; color: #fff; text-shadow: 0 0 10px #f6d58e, 0 1px 2px #000;
  background: none; box-shadow: none; isolation: isolate;
}
.battle .apbox .apnum:before {
  content: ""; position: absolute; inset: 6px; z-index: -1; transform: rotate(45deg); border-radius: 6px;
  background: linear-gradient(135deg, #3a3158, #15121f);
  border: 2px solid var(--ui-gold); box-shadow: 0 0 14px #f6d58e66, 0 4px 10px #000b;
}
.battle .apbox .aplabel { color: var(--ui-dim); font-weight: 800; letter-spacing: .18em; font-size: 9.5px; }
.battle .appips { gap: 4px; }
.battle .appips i { width: 7px; height: 16px; border-radius: 2px; transform: skewX(-18deg); background: #ffffff1f; }
.battle .appips i.on { background: linear-gradient(180deg, #fff1c4, var(--ui-gold2)); box-shadow: 0 0 6px #f6d58e99; }

/* 더미 · 기록 · 층 이름도 같은 결로 */
.battle .pile2 { background: var(--ui-glass); border: 1px solid var(--ui-line); border-radius: 8px; }
.battle .pile2:before { background: #2a2440; border-color: var(--ui-line); }
.battle .loglast, .turntag { background: var(--ui-glass); border: 1px solid var(--ui-line); }

/* 휴대폰 — 칸이 작다 */
.phone .battle .ally { min-height: 50px; padding: 3px 8px 3px 56px; }
.phone .uface { width: 46px; height: 46px; left: 4px; }
.phone .battle .apbox .apnum { width: 38px; height: 38px; font-size: 19px; }
.phone .gface { width: 20px; height: 20px; left: calc(50% - 10px - var(--k, 0) * 12px); }

/* ══ 카드 끌어서 내기 ═══════════════════════════════════════════════════════
   끄는 카드는 손패 자리에 흐리게 남고, 그 모양이 손을 따라온다. 카드에서 금빛 화살이 뻗는다.
   대상 위에 올라가면(.dover) 대상이 금빛으로 테를 두르고 화살 끝이 굵어진다. */
.battle .hand .card { touch-action: none; }          /* 손가락으로 끌 때 화면이 끌려가지 않게 */
.battle .hand .card.dragging { opacity: .25; transform: rotate(var(--tilt, 0deg)) translateY(var(--dip, 0px)) !important; }
.dragfx { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.dragfx svg { position: absolute; left: 0; top: 0; width: var(--app-w, 100vw); height: var(--app-h, 100vh); overflow: visible; }
.dragfx path {
  fill: none; stroke: #f6d58e; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 12;
  filter: drop-shadow(0 0 6px #f6d58e) drop-shadow(0 2px 3px #000a);
  animation: dragdash .6s linear infinite;
}
.dragfx.armed path { stroke: #fff4cf; stroke-width: 7; stroke-dasharray: none; }
@keyframes dragdash { to { stroke-dashoffset: -14; } }
.dghost {
  position: fixed !important; margin: 0 !important; width: 150px; transform: translate(-50%, -60%) rotate(-3deg) scale(.9);
  box-shadow: 0 18px 40px #000c, 0 0 0 2px #f6d58e !important; pointer-events: none; opacity: .95;
  transition: transform .12s;
}
.dragfx.armed .dghost { transform: translate(18px, 14px) rotate(0deg) scale(.55); transform-origin: 0 0; opacity: .85; }   /* 대상 위 피해 숫자를 가리지 않게 손 오른쪽 아래로 비킨다 */
/* 대상이 없는 카드 — 위로 올라오면 "놓으면 쓴다" */
.dragfx.armed:not(:has(svg)) .dghost { transform: translate(-50%, -60%) scale(1); transform-origin: 50% 50%; box-shadow: 0 0 0 3px #f6d58e, 0 0 30px #f6d58ecc, 0 18px 40px #000c !important; }

/* 끌 수 있는 대상 · 올라간 대상 */
.battle .foe.dtgt .art, .battle .stand.dtgt .art { filter: drop-shadow(0 0 6px #f6d58e88); }
.battle .foe.dover .art, .battle .stand.dover .art { filter: drop-shadow(0 0 3px #fff4cf) drop-shadow(0 0 14px #f6d58e); }
.battle .foe.dover .fname, .battle .stand.dover .sname { color: #f6d58e; }
.phone .dghost { width: 118px; }

/* ══ 실드 · 방어 — 체력 막대에 테 ═══════════════════════════════════════════
   방어(카드 종류로는 「쉴드」)가 생기면 파란 테, 실드(패시브 등)까지 있으면 파란 테가 빛난다. */
.battle .hpwrap.blocked .bar { border-color: #5fc8ff; box-shadow: 0 0 0 2px #5fc8ff, 0 0 6px #5fc8ff88, 0 1px 3px #0009; }
.battle .hpwrap.shielded .bar {
  border-color: #5fc8ff;
  box-shadow: 0 0 0 2px #5fc8ff, 0 0 10px #5fc8ffcc, 0 1px 3px #0009;
  animation: shieldglow 1.4s ease-in-out infinite alternate;
}
@keyframes shieldglow {
  from { box-shadow: 0 0 0 2px #5fc8ff, 0 0 6px #5fc8ff99, 0 1px 3px #0009; }
  to   { box-shadow: 0 0 0 2px #8fdcff, 0 0 14px #5fc8ffee, 0 1px 3px #0009; }
}
.battle .hpwrap .nums .sh { color: #8fdcff; font-weight: 800; }
.battle .hpwrap .nums .b { color: #8fdcff; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .battle .hpwrap.shielded .bar { animation: none; } }

/* ══ 글자 크기 — 한 치수씩 키운다 ═══════════════════════════════════════════
   배율(js/stage.js)이 PC 에서 0.9 안팎이라, 적어 둔 10px 은 화면에서 9px 로 보였다. */
.battle .stand .sname, .battle .foe .fname { font-size: 15px; font-weight: 800; }
.battle .hpwrap .nums, .battle .stand .hpwrap .nums, .battle .foe .hpwrap .nums { font-size: 13px; font-weight: 700; }
.battle .stand .hp, .battle .stand .hpwrap { width: 108px; }
.battle .foe .hpwrap { width: 124px; }
.battle .chip, .battle .chips span { font-size: 12px; padding: 1px 8px; }
.battle .nature { font-size: 11.5px; }
.battle .isay { font-size: 13px; }
.battle .igem { width: 34px; height: 34px; }
.battle .igem b { font-size: 15px; }
.battle .stand .bubble { font-size: 13.5px; max-width: 250px; }
.battle .foe .pv b { font-size: 30px; }

.bwhere { font-size: 20px; }
.battle .bsub { font-size: 13px; }
.battle .flash { font-size: 12px; }
.turntag { font-size: 13px; }
.battle .loglast { font-size: 13.5px; }
.battle .lglab, .battle .lgmore { font-size: 12px; }
.battle .logwrap.open .log { font-size: 13.5px; }
body:has(#screen.battle) #hint:not(:empty) { font-size: 16px; }
.battle .pile2 .pnum { font-size: 20px; }
.battle .pile2 .plab { font-size: 10.5px; }

.battle .ally .nm { font-size: 15px; }
.battle .ally .ultbtn.grad { font-size: 12px; }
.battle .gauge .gnum { font-size: 14px; }
.battle .gauge .glabel { font-size: 11.5px; }
.battle .apbox .aplabel { font-size: 11px; }
.battle .endturn { font-size: 16px; }

/* 손패 카드 — 이름 · 효과 글 */
.battle .hand .card .gcost { font-size: 17px; }
.battle .hand .card .gtitle b { font-size: 14px; }
.battle .hand .card .gtype { font-size: 11px; }
.battle .hand .card .gtext { font-size: 12.5px; line-height: 1.45; }

/* 휴대폰 — 배율이 작아(0.72~0.76) 조금 더 */
.phone .battle .stand .sname, .phone .battle .foe .fname { font-size: 15px; }
.phone .battle .hpwrap .nums { font-size: 14px; }
.phone .battle .foe .intent .isay { font-size: 13px; }
.phone .battle .ally .nm { font-size: 15px; }
.phone .battle .ally .ultbtn.grad { font-size: 12.5px; }
.phone .battle .hand .card .gtitle b { font-size: 13px; }
.phone .battle .hand .card .gtext { font-size: 12.5px; }
.phone .battle .hand .card .gtype { font-size: 11px; }

/* 휴대폰 — 글자를 키웠더니 적 이름끼리 붙고, 말풍선이 가운데 위 턴 표시를 덮었다 */
.phone .battle .field { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
.phone .battle .foes { gap: 18px; }
.phone .battle .foe .fname { font-size: 13.5px; }
.phone .battle .foe .nature { font-size: 10.5px; padding: 0 5px; }
.phone .battle .foe .hpwrap { width: 104px; }
.phone .turntag { left: auto; right: 62px; top: 8px; transform: none; }

/* 고학년 단추가 떨리던 것 — journey.css 의 button:hover { translateY(-2px) } 가 단추에 transform 을 걸면
   단추가 아이콘(absolute)의 기준이 되어 아이콘이 튀고, 마우스가 빠졌다 들어왔다 하며 떨었다. 사도 칸의 단추는 움직이지 않는다 */
.battle .ally .ultbtn, .battle .ally .ultbtn:hover { transform: none !important; }
.battle .ally .ultbtn.grad { cursor: pointer; }
.battle .ally:has(.ultbtn.grad) { cursor: pointer; }

/* ══ 가운데 창 — 고학년 스킬 · 카드 자세히 ═════════════════════════════════
   어두운 유리 한 장. 왼쪽에 그림(아이콘 · 카드), 오른쪽에 이름 · 하는 일 · 낱말 풀이 · 단추. */
.bmodal {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px;
  background: #07051099; backdrop-filter: blur(5px);
  animation: bmfade .16s ease-out;
}
@keyframes bmfade { from { opacity: 0; } }
.bmbox {
  display: flex; gap: 26px; align-items: flex-start; width: min(760px, 100%);
  max-height: calc(var(--app-h, 100vh) - 48px); overflow: auto;
  padding: 26px 28px; border-radius: 16px; color: #f4f1ff;
  background: linear-gradient(160deg, #221d36f2, #120f1cf2);
  border: 1px solid #ffffff26; box-shadow: 0 0 0 1px #0008, 0 30px 80px #000c, inset 0 1px 0 #ffffff14;
  animation: bmpop .18s ease-out;
}
@keyframes bmpop { from { transform: translateY(10px) scale(.97); opacity: 0; } }
.bmface {
  flex: none; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; padding: 4px;
  background: conic-gradient(#f6d58e, #d9a54a, #f6d58e); box-shadow: 0 0 30px #f6d58e55, 0 10px 24px #000b;
}
.bmface img, .bmface .art { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 50%; display: block; border: 3px solid #120f1c; }
.bmcard { flex: none; width: 250px; cursor: default !important; }
.bmcard:hover { transform: none !important; }
.bmbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.bmkind { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: #b9b2d6; }
.bmname { margin: 0; font-size: 26px; font-weight: 900; letter-spacing: -.3px; color: #fff; }
.bmmeter { display: flex; gap: 12px; align-items: baseline; font-size: 14px; color: #d9d2f2; }
.bmmeter b { color: #ff9f8f; }
.bmmeter b.ok { color: #f6d58e; }
.bmtext {
  margin: 4px 0 0; font-size: 17px; line-height: 1.65; color: #fff; word-break: keep-all;
  padding: 12px 14px; border-radius: 10px; background: #ffffff0d; border-left: 3px solid #f6d58e;
}
.bmterms { margin: 2px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 7px 12px; font-size: 14px; line-height: 1.55; }
.bmterms dt { font-weight: 800; color: #f6d58e; white-space: nowrap; }
.bmterms dd { margin: 0; color: #d9d2f2; word-break: keep-all; }
.bmwhy { margin: 0; font-size: 13.5px; color: #ff9f8f; }
.bmbtns { display: flex; gap: 10px; margin-top: 6px; }
.bmbtns button { min-height: 44px; padding: 0 22px; border-radius: 10px; font-size: 15px; font-weight: 800; }
.bmuse {
  color: #221a08; background: linear-gradient(180deg, #ffe7a8, #f0b94a); border: 0;
  box-shadow: 0 0 18px #f6d58e66;
}
.bmuse:disabled { color: #b9b2d6; background: #ffffff14; box-shadow: none; opacity: 1; font-weight: 600; }
.bmclose { color: #f4f1ff; background: #ffffff10; border: 1px solid #ffffff2e; }
.bmodal button:hover:not(:disabled) { transform: none; filter: brightness(1.08); }

/* 휴대폰 — 가로 540 줄. 그림을 줄이고 글은 그대로 크게 */
.phone .bmbox { gap: 18px; padding: 18px 20px; width: min(900px, 100%); }
.phone .bmface { width: 110px; height: 110px; }
.phone .bmcard { width: 190px; }
.phone .bmname { font-size: 22px; }
.phone .bmtext { font-size: 16px; }
.bmcard .gcost { font-size: 20px; }
.bmcard .gtitle b { font-size: 17px; }
.bmcard .gtype { font-size: 12px; }
.bmcard .gtext { font-size: 14px; line-height: 1.5; -webkit-line-clamp: 5; }

/* ── 적을 띄운다 — 둘 셋이 붙어 서면 끌어 놓을 때 옆 적에 걸렸다 ───────────── */
.battle .foes { justify-content: space-evenly; gap: 40px; padding-right: 10px; }
.phone .battle .foes { gap: 28px; }
.battle .foe { cursor: pointer; }
/* 옛 표적 표시(네모 테)는 걷는다 — 끄는 동안의 빛(.dtgt · .dover)이 대신한다. 누르면 적 정보 */
.battle .foe.tgt:hover .art, .battle .stand.tgt:hover .art { outline: none; }
.battle .foe:hover .fname { color: #f6d58e; }

/* ── 적 정보창 ───────────────────────────────────────────────────────────── */
.bmface.foe {
  width: 170px; height: 170px; border-radius: 16px; padding: 0;
  background: radial-gradient(circle at 50% 70%, #3a2a3c, #15121f 75%);
  border: 1px solid #ffffff26; box-shadow: 0 10px 24px #000b;
}
.bmface.foe .art, .bmface.foe img { border: 0 !important; border-radius: 0 !important; object-fit: contain !important; }
.bmmeter b.blk { color: #8fdcff; }
.bmnow { color: #f6d58e; }
.bmhelp { margin: -2px 0 0; font-size: 13.5px; line-height: 1.55; color: #b9b2d6; }
.bmsub { margin-top: 4px; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; color: #b9b2d6; }
.bmchips { display: flex; flex-wrap: wrap; gap: 6px; }
.bmchips .chip { font-size: 13px; padding: 2px 10px; border-radius: 99px; background: #ffffff12; border: 1px solid #ffffff2e; color: #f4f1ff; }
.bmmoves dt { color: #f4f1ff; }
.bmmoves dd { color: #d9d2f2; }
.phone .bmface.foe { width: 120px; height: 120px; }

/* ══ 메뉴 — 오른쪽 위 ☰ ════════════════════════════════════════════════════
   머리띠의 전체화면 단추는 전투에서 치운다(메뉴 안에 있다). 위쪽 안내 줄은 막혔을 때만 잠깐 뜬다. */
body:has(#screen.battle) .top { display: none; }
.battle .bmenu {
  position: absolute; right: 16px; top: 12px; z-index: 30; width: 46px; height: 46px; min-height: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border-radius: 12px; background: #0d0b16c7; backdrop-filter: blur(6px); border: 1px solid #ffffff26;
  box-shadow: 0 6px 16px #000a; transition: border-color .15s, box-shadow .15s;
}
.battle .bmenu i { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: #f4f1ff; }
.battle .bmenu:hover:not(:disabled) { transform: none; border-color: #f6d58e; box-shadow: 0 0 16px #f6d58e55, 0 6px 16px #000a; }
.battle .bmenu:hover i { background: #f6d58e; }
.phone .battle .bmenu { right: 10px; top: 8px; width: 44px; height: 44px; }

.menumodal .bmbox { width: min(460px, 100%); flex-direction: column; gap: 0; }
.menumodal .bmbody { width: 100%; gap: 8px; }
.menumodal .bmname { font-size: 24px; }
.mlist { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.mitem {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
  min-height: 52px; padding: 10px 16px; border-radius: 12px; text-align: left;
  background: #ffffff0c; border: 1px solid #ffffff1f; color: #f4f1ff; transition: background .15s, border-color .15s;
}
.mitem b { font-size: 16px; font-weight: 800; }
.mitem span { font-size: 12.5px; color: #b9b2d6; }
.mitem:hover:not(:disabled) { transform: none; background: #ffffff16; border-color: #f6d58e88; }
.mitem.main { align-items: center; background: linear-gradient(180deg, #ffe7a8, #f0b94a); border: 0; color: #221a08; }
.mitem.main:hover:not(:disabled) { background: linear-gradient(180deg, #fff0c4, #f6c55a); }
/* 켜고 끄는 단추 — 오른쪽에 스위치 */
.mitem.tog { padding-right: 70px; }
.mitem .sw {
  position: absolute; right: 16px; top: 50%; width: 42px; height: 24px; margin-top: -12px; border-radius: 99px;
  background: #ffffff22; border: 1px solid #ffffff2e; transition: background .15s;
}
.mitem .sw:after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #d9d2f2; transition: transform .15s, background .15s;
}
.mitem.tog.on .sw { background: #f0b94a; border-color: #f6d58e; }
.mitem.tog.on .sw:after { transform: translateX(18px); background: #fff; }
.mitem.quit b { color: #ffb3a8; }
.mitem.quit:hover:not(:disabled) { border-color: #ff9f8f; background: #ff9f8f14; }
.bmuse.danger { color: #fff; background: linear-gradient(180deg, #e0707f, #b04055); box-shadow: 0 0 16px #e0707f55; }

/* ── 설정: 움직임 줄이기 · 글자 크게 ───────────────────────────────────────── */
.calm .battle *, .calm .battle *:before, .calm .battle *:after,
.calm .bmodal, .calm .bmbox, .calm .dragfx path { animation: none !important; transition: none !important; }
.bigtext .battle .stand .sname, .bigtext .battle .foe .fname { font-size: 17px; }
.bigtext .battle .hpwrap .nums { font-size: 15px; }
.bigtext .battle .hand .card .gtitle b { font-size: 16px; }
.bigtext .battle .hand .card .gtext { font-size: 14.5px; }
.bigtext .battle .ally .nm { font-size: 17px; }
.bigtext .battle .ally .ultbtn.grad { font-size: 13.5px; }
.bigtext .battle .isay { font-size: 15px; }
.bigtext .bmtext { font-size: 19px; }
.bigtext .bmterms { font-size: 16px; }

/* ══ 서 있는 크기 — 높이만이 아니라 폭 · 인원수로 ═══════════════════════════════
   높이(cqh)로만 정했더니 세로가 긴 화면(16:10 · 5:4)에서 사도가 화면을 다 차지했고,
   적이 셋 넷이면 오른쪽 끝 적이 화면 밖으로 나갔다(1280×1024 에서 셋, 1920×1080 에서 넷).
   이제 칸 폭 = min(높이의 38%, 제 쪽 폭 ÷ 인원수). 칸 높이는 폭의 1.4배를 넘지 않는다.
   --na · --nf 는 ui.js 가 싸움터(.field)에 단다. cqw · cqh 는 싸움터 크기다. */
#screen.battle .field { --colA: 50cqw; --colF: 38cqw; }
#screen.battle .stand { --bw: clamp(78px, min(38cqh, calc(var(--colA) / var(--na, 3))), 220px); width: var(--bw); }
#screen.battle .stand .art {
  width: var(--bw) !important; height: clamp(90px, min(52cqh, calc(var(--bw) * 1.4)), 280px) !important;
}
#screen.battle .foe { --bw: clamp(70px, min(38cqh, calc(var(--colF) / var(--nf, 2) - 10px)), 220px); width: var(--bw); min-width: 0; }
#screen.battle .foe .art {
  width: var(--bw) !important; height: clamp(80px, min(52cqh, calc(var(--bw) * 1.4)), 280px) !important;
}
#screen.battle .foe.boss { --bw: clamp(110px, min(50cqh, calc(var(--colF) * 1.3 / var(--nf, 1) - 10px)), 320px); }
#screen.battle .foes { gap: calc(60px / var(--nf, 2)); }
/* 좁아진 칸에서도 이름 · 체력이 칸을 넘지 않게 — 이름은 두 줄까지, 성격 표시는 이름 밑으로 내려도 된다 */
#screen.battle .foe .fname { max-width: calc(var(--bw) + 24px); flex-wrap: wrap; justify-content: center; row-gap: 2px; white-space: normal; text-align: center; }
#screen.battle .foe .hpwrap { width: min(124px, calc(var(--bw) - 4px)); }
#screen.battle .foe .intent { max-width: calc(var(--bw) + 40px); }
#screen.battle .foe .intent .isay { overflow: hidden; text-overflow: ellipsis; }

/* ── 뽑을 더미 · 버린 더미 — 같은 높이에 ─────────────────────────────────── */
#screen.battle .pile2.draw { left: 20px; bottom: 330px; }
#screen.battle .pile2.disc { right: 34px; bottom: 330px; }
.phone #screen.battle .pile2.draw { left: 12px; bottom: 206px; }
.phone #screen.battle .pile2.disc { right: 22px; bottom: 206px; }

/* ── 사도 정보창 ─────────────────────────────────────────────────────────── */
.battle .stand { cursor: pointer; }
.battle .stand:hover .sname { color: #f6d58e; }
.bmface.hero {
  width: 180px; height: 240px; border-radius: 16px; padding: 0; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #3a3158, #15121f 80%);
  border: 1px solid #ffffff26; box-shadow: 0 10px 24px #000b;
}
.bmface.hero .art, .bmface.hero img { width: 100% !important; height: 100% !important; border: 0 !important; border-radius: 0 !important; object-fit: cover !important; object-position: 50% 8% !important; }
.bmchips .chip, .bmchips span { font-size: 13px; padding: 2px 10px; border-radius: 99px; background: #ffffff12; border: 1px solid #ffffff2e; color: #f4f1ff; }
.bmchips .chip.bad { color: #ffb3b3; border-color: #5d2f36; }
.bmchips .chip.key { color: #f6d58e; border-color: #f6d58e55; }
.heromodal .bmbox { width: min(820px, 100%); }
.phone .bmface.hero { width: 130px; height: 175px; }

/* 적이 여럿이면 옆 적의 그림(칸 밖으로 넘친 캔버스)이 의도 표시를 덮었다 — 의도 · 이름 · 체력은 그림 위에 */
#screen.battle .foe .intent, #screen.battle .foe .fname, #screen.battle .foe .hpwrap, #screen.battle .stand .sname, #screen.battle .stand .hpwrap { position: relative; z-index: 4; }

/* 배경 그림 몇 장(stage2_1 · stage3_1)은 위쪽 가장자리에 게임 UI 조각이 묻어 있다 — 위를 13% 잘라 낸다(아래에 맞춰 키운다) */
#screen.battle, .phone #screen.battle { background-size: auto, max(115%, calc(var(--app-h, 100vh) * 1.15 * 16 / 9)) auto, auto; background-position: 0 0, 50% 100%, 0 0; }
/* 이름은 한 줄 — 두 줄로 꺾이면 읽기 나쁘다(tools/shot.py 가 본다). 칸보다 넓어도 된다 */
#screen.battle .foe .fname { max-width: none; flex-wrap: nowrap; white-space: nowrap; }

/* 낱말 풀이 쪽지는 가운데 창(.bmodal 80) · 더미 창(60) 보다 위에 — 창 안의 낱말을 눌러도 풀이가 뒤에 숨지 않게 */
.kwnote { z-index: 95; }
.pilegrid .gcard.canzoom { cursor: zoom-in; transition: transform .12s, box-shadow .12s; }
.pilegrid .gcard.canzoom:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px #f6d58e, 0 10px 22px #000a; }

/* ══ 보상 — 전투 화면과 같은 배경 · 같은 결 ═════════════════════════════════
   이긴 자리 그대로(--stagebg, ui.js 의 setStageBg). 밝은 도감 판이던 것을 어두운 유리 + 금선으로. */
body:has(#screen.rewardscreen) .top { display: none; }
#screen.rewardscreen {
  --ink: #f4f1ff; --dim: #b9b2d6; --line: #ffffff26; --hot: #f6d58e; --sel: #f6d58e;
  position: fixed; inset: 0; z-index: 1; max-width: none; margin: 0; min-height: 0; height: var(--app-h, 100vh);
  border-radius: 0; padding: 0; overflow-y: auto; color: var(--ink);
  display: flex; flex-direction: column; align-items: center;
  background:
    linear-gradient(180deg, #0a0814cc 0, #0a081499 30%, #0a0814cc 75%, #0a0814f2 100%),
    var(--stagebg, none) 50% 100% / max(115%, calc(var(--app-h, 100vh) * 1.15 * 16 / 9)) auto no-repeat,
    radial-gradient(ellipse at 50% 20%, #2a2340, #0e0c17 80%);
}
#screen.rewardscreen .dbar2 {
  position: sticky; top: 0; z-index: 3; width: 100%; padding: 16px max(24px, calc((100% - 1180px) / 2));
  background: linear-gradient(180deg, #0d0b16f2, #0d0b16c7); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
#screen.rewardscreen .dtitle { color: #fff; font-size: 26px; text-shadow: 0 2px 10px #000; }
#screen.rewardscreen .rwhy { color: var(--dim); font-size: 13.5px; }
#screen.rewardscreen .sgold { color: #f6d58e; }
#screen.rewardscreen .dexbtn {
  background: #ffffff12; border: 1px solid var(--line); color: var(--ink); font-size: 13.5px; padding: 10px 18px;
}
#screen.rewardscreen .dexbtn:hover:not(:disabled) { transform: none; border-color: #f6d58e; }
#screen.rewardscreen .rbody { width: min(1180px, 100%); padding: 22px 24px 40px; gap: 6px; }
#screen.rewardscreen .rsec b { font-size: 17px; color: #fff; text-shadow: 0 1px 4px #000; }
#screen.rewardscreen .rsec .why, #screen.rewardscreen .rnone { color: var(--dim); font-size: 13px; }
#screen.rewardscreen .rrow { gap: 20px; }
#screen.rewardscreen .rpick { width: 210px; }
#screen.rewardscreen .rwho { background: #0d0b16c7; border: 1px solid var(--line); color: var(--ink); backdrop-filter: blur(4px); }
#screen.rewardscreen .rwho .art { background: #1a1628; }
#screen.rewardscreen .rwho b { font-size: 13.5px; }
#screen.rewardscreen .rpick .gcard { box-shadow: 0 12px 28px #000a; cursor: zoom-in; }
#screen.rewardscreen .rpick .gcard:hover { transform: translateY(-6px); box-shadow: 0 0 0 2px #f6d58e, 0 16px 32px #000c; }
#screen.rewardscreen .gcard .gtitle b { font-size: 14px; }
#screen.rewardscreen .gcard .gtext { font-size: 12.5px; }
/* 신탁 · 장비 카드도 유리판 */
#screen.rewardscreen .fcard, #screen.rewardscreen .ecard, #screen.rewardscreen .grow {
  background: #0d0b16d9; border: 1px solid var(--line); color: var(--ink); backdrop-filter: blur(4px);
  box-shadow: 0 10px 24px #0009;
}
#screen.rewardscreen .fcard:hover { transform: translateY(-4px); border-color: #f6d58e; box-shadow: 0 0 0 1px #f6d58e, 0 14px 28px #000b; }
#screen.rewardscreen .fnum { color: #f6d58e; }
#screen.rewardscreen .fko, #screen.rewardscreen .fbefore { color: var(--dim); }
#screen.rewardscreen .fbefore { border-top-color: var(--line); }
#screen.rewardscreen .ftext2 { font-size: 13.5px; }
#screen.rewardscreen .eqstat { color: #9fe3b4; }
#screen.rewardscreen .eaff { color: #ffb3c8; }
#screen.rewardscreen .eslot, #screen.rewardscreen .eoff { background: #ffffff14; color: var(--dim); }
#screen.rewardscreen .egrade, #screen.rewardscreen .eblurb, #screen.rewardscreen .eeff { color: var(--dim); }
#screen.rewardscreen .sprice { background: linear-gradient(180deg, #ffe7a8, #f0b94a); color: #221a08; border: 0; }
.phone #screen.rewardscreen .rpick { width: 170px; }
.phone #screen.rewardscreen .dtitle { font-size: 22px; }
#screen.rewardscreen .sgold { background: #0d0b16c7; border: 1px solid #f6d58e88; color: #f6d58e; font-weight: 800; }
#screen.rewardscreen .rsec { justify-content: center; }
#screen.rewardscreen .rrow { justify-content: center; }
#screen.rewardscreen .rpick { width: 230px; }
#screen.rewardscreen .rnone { text-align: center; }

/* ══ 지도 — 갈림길을 고르며 간다. 파티 미니미가 칸에서 칸으로 걷는다 ═══════════════
   배경은 이 층의 싸움터(--stagebg). 칸은 둥근 유리 단추 + 금선, 갈 수 있는 칸만 빛난다. */
body:has(#screen.mapscreen) .top { display: none; }
#screen.mapscreen {
  position: fixed; inset: 0; z-index: 1; max-width: none; margin: 0; padding: 0; border-radius: 0;
  height: var(--app-h, 100vh); overflow: hidden; color: #f4f1ff;
  background:
    linear-gradient(180deg, #0a0814d9 0, #0a081466 22%, #0a081440 55%, #0a0814cc 100%),
    var(--stagebg, none) 50% 100% / max(115%, calc(var(--app-h, 100vh) * 1.15 * 16 / 9)) auto no-repeat,
    radial-gradient(ellipse at 50% 20%, #2a2340, #0e0c17 80%);
}
/* 머리 */
.mhead {
  position: absolute; left: 0; right: 0; top: 0; z-index: 5; display: flex; align-items: center; gap: 18px;
  padding: 14px 20px; background: linear-gradient(180deg, #0d0b16e6, #0d0b1600);
}
.mwhere { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.mwhere b { font-size: 22px; font-weight: 900; text-shadow: 0 2px 8px #000; }
.mwhere span { font-size: 13px; color: #d9d2f2; text-shadow: 0 1px 4px #000; }
.mparty-hp { display: flex; gap: 10px; }
.mhero {
  display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 99px;
  background: #0d0b16c7; border: 1px solid #ffffff26; backdrop-filter: blur(4px);
}
.mhero.dead { opacity: .45; filter: grayscale(1); }
.mface { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: none; background: #1a1628; border: 1.5px solid #ffffff55; display: grid; place-items: center; }
.mface img { width: 100%; height: 100%; object-fit: cover; }
.minfo { display: flex; flex-direction: column; gap: 2px; min-width: 88px; }
.minfo b { font-size: 13px; }
.minfo .bar { height: 6px; margin: 0; background: #0a0812; border: 1px solid #0008; }
.minfo .bar i { background: linear-gradient(90deg, #6fd39a, #9fe3b4); }
.mhp { font-size: 11.5px; color: #d9d2f2; }
.mgold { font-size: 15px; font-weight: 800; color: #f6d58e; padding: 8px 14px; border-radius: 99px; background: #0d0b16c7; border: 1px solid #f6d58e66; }
.mdeck { font-size: 14px; font-weight: 800; padding: 9px 16px; border-radius: 10px; background: #0d0b16c7; border: 1px solid #ffffff26; color: #f4f1ff; }
.mdeck:hover:not(:disabled) { transform: none; border-color: #f6d58e; }
#screen.mapscreen .bmenu { position: static; flex: none; }

/* 판 */
.mboard { position: absolute; left: 0; right: 0; top: 70px; bottom: 16px; }
.medges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.medges path { fill: none; stroke: #ffffff4d; stroke-width: 2.5; stroke-dasharray: 2 9; stroke-linecap: round; }
.medges path.walked { stroke: #f6d58e99; stroke-dasharray: none; stroke-width: 3; }
.medges path.open { stroke: #f6d58e; stroke-width: 3.5; stroke-dasharray: 3 8; animation: mdash .8s linear infinite; filter: drop-shadow(0 0 4px #f6d58e); }
@keyframes mdash { to { stroke-dashoffset: -11; } }

.mnode {
  position: absolute; z-index: 2; transform: translate(-50%, -50%); padding: 0; min-height: 0; border: 0; background: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: default; color: #f4f1ff;
}
.mnode:hover:not(:disabled) { transform: translate(-50%, -50%); }
.mring {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #2c2544, #15121f 75%);
  border: 2px solid #ffffff40; box-shadow: 0 6px 16px #000b; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.mring svg { width: 28px; height: 28px; fill: #d9d2f2; }
.mlabel { font-size: 12.5px; font-weight: 800; text-shadow: 0 1px 3px #000, 0 0 8px #000; white-space: nowrap; }
.mnode.t-fight .mring svg { fill: #ff9f8f; }
.mnode.t-event .mring svg { fill: #b7a6ff; }
.mnode.t-shop .mring svg { fill: #f6d58e; }
.mnode.t-camp .mring svg, .mnode.t-campshop .mring svg { fill: #ffb86b; }
.mnode.t-boss .mring { width: 78px; height: 78px; border-color: #ff8f8f; background: radial-gradient(circle at 50% 35%, #4a2030, #1c0e16 75%); }
.mnode.t-boss .mring svg { width: 38px; height: 38px; fill: #ffb3b3; }
/* 지나온 칸 · 지금 칸 · 갈 수 있는 칸 */
.mnode.seen .mring { opacity: .55; border-color: #f6d58e66; }
.mnode.here .mring { opacity: 1; border-color: #f6d58e; }
.mnode:not(.can):not(.seen):not(.here) { opacity: .6; }
.mnode.can { cursor: pointer; opacity: 1; }
.mnode.can .mring { border-color: #f6d58e; box-shadow: 0 0 0 3px #f6d58e33, 0 0 22px #f6d58e88, 0 6px 16px #000b; animation: mpulse 1.2s ease-in-out infinite alternate; }
.mnode.can:hover .mring { transform: scale(1.12); box-shadow: 0 0 0 4px #f6d58e66, 0 0 30px #f6d58ecc, 0 6px 16px #000b; }
.mnode.can .mlabel { color: #f6d58e; }
@keyframes mpulse { from { box-shadow: 0 0 0 2px #f6d58e33, 0 0 12px #f6d58e66, 0 6px 16px #000b; } to { box-shadow: 0 0 0 4px #f6d58e44, 0 0 26px #f6d58eaa, 0 6px 16px #000b; } }
.mboard.going .mnode:not(.pick) { opacity: .35; }
.mnode.pick .mring { transform: scale(1.18); }

/* 파티 미니미 — 지금 칸 위에 선다. 고르면 그리로 걷는다(깡충거리며) */
.mwalkers {
  position: absolute; z-index: 4; display: flex; align-items: flex-end; pointer-events: none;
  transform: translate(-50%, -96%); transition: left .85s ease-in-out, top .85s ease-in-out;
}
.mwalkers .art { width: 84px !important; height: 84px !important; margin: 0 -22px; background: none; overflow: visible; }
.mwalkers .art:nth-child(2) { margin-bottom: 6px; }
.mwalkers .art img { object-fit: contain; object-position: bottom; }
.mwalkers.walking .art { animation: mhop .28s ease-in-out infinite alternate; }
.mwalkers.walking .art:nth-child(2) { animation-delay: .09s; }
.mwalkers.walking .art:nth-child(3) { animation-delay: .18s; }
@keyframes mhop { from { transform: translateY(0); } to { transform: translateY(-10px); } }
.calm .mwalkers { transition: none; }

/* 휴대폰 — 머리 줄을 줄인다 */
.phone .mhead { padding: 8px 12px; gap: 10px; }
.phone .mwhere b { font-size: 18px; }
.phone .mwhere span { display: none; }
.phone .minfo { min-width: 64px; }
.phone .minfo b { font-size: 12px; }
.phone .mface { width: 30px; height: 30px; }
.phone .mboard { top: 58px; }
.phone .mring { width: 50px; height: 50px; }
.phone .mnode.t-boss .mring { width: 64px; height: 64px; }
.phone .mwalkers .art { width: 70px !important; height: 70px !important; margin: 0 -18px; }
.mring svg.stroke { fill: none !important; stroke: #ff9f8f; stroke-width: 2.4; stroke-linecap: round; }
.mnode.t-fight .mring svg.stroke path { fill: none; }
#screen.mapscreen .mmenu { width: 46px; height: 46px; min-height: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 12px; background: #0d0b16c7; border: 1px solid #ffffff26; }
#screen.mapscreen .mmenu i { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: #f4f1ff; }
#screen.mapscreen .mmenu:hover:not(:disabled) { transform: none; border-color: #f6d58e; }
.mwalkers .art { width: 104px !important; height: 104px !important; margin: 0 -26px; }
.phone .mwalkers .art { width: 80px !important; height: 80px !important; margin: 0 -20px; }
/* 발이 칸 아이콘 위쪽 테에 닿게 — 아이콘을 가리지 않는다 */
.mwalkers { transform: translate(-50%, calc(-100% - 22px)); }

/* ══ 캠프 · 상점 · 이벤트도 같은 결 ═══════════════════════════════════════════
   셋 다 .rewardscreen 을 함께 달고 있어 배경과 글자색은 어두워졌는데, 칸들은 흰 판 그대로라
   흰 글자가 흰 바탕에 묻혔다. 칸을 모두 어두운 유리로. */
#screen.rewardscreen :is(.cmember, .cact, .grow, .gslot.full, .evscene, .evopt, .evresult, .evpickhero, .evfork, .shost, .sitem, .shaggle, .srmbtn, .dkcard, .ehero, .flashbox, .statc) {
  background: #0d0b16d1; border-color: #ffffff26; color: #f4f1ff; backdrop-filter: blur(4px);
}
#screen.rewardscreen .gslot { background: #ffffff0a; border-color: #ffffff2e; color: #d9d2f2; }
#screen.rewardscreen .gout { background: #ffffff14; border-color: #ffffff2e; color: #f4f1ff; }
#screen.rewardscreen :is(.cinfo b, .cact b, .evlabel, .evq, .evnpc, .stalk b, .evchose) { color: #fff; }
#screen.rewardscreen :is(.cnum, .cact span, .evout, .evnote, .evby, .evtext p, .stalk, .sline2, .sblurb, .evsay, .evlog, .evfork p, .evkind, .evlock) { color: #d9d2f2; }
#screen.rewardscreen .chp { background: #0a0812; }
#screen.rewardscreen .cact:hover:not(:disabled), #screen.rewardscreen .evopt:hover:not(:disabled),
#screen.rewardscreen .evfork:hover, #screen.rewardscreen .evpickhero:hover { transform: none; border-color: #f6d58e; box-shadow: 0 0 0 1px #f6d58e, 0 10px 22px #000a; }
#screen.rewardscreen .cact.on { border-color: #f6d58e; background: #2a2210d9; }
#screen.rewardscreen .cact:disabled:not(.on) { opacity: .45; }
#screen.rewardscreen .evopt.leave { background: #0d0b1699; border-style: dashed; }
#screen.rewardscreen .evopt.locked { opacity: .5; }
#screen.rewardscreen :is(.evgold, .sgold) { background: #0d0b16c7; border: 1px solid #f6d58e88; color: #f6d58e; }
#screen.rewardscreen .evscene .art { background: #1a1628; }
#screen.rewardscreen .srmbtn.on { background: #3a1f24; color: #ffb3b3; border-color: #5d2f36; }
#screen.rewardscreen .sgrade { background: #ffffff14; color: #d9d2f2; }

/* 줄 이름 1-1 … 1-12 — 판 위쪽에. 지금 줄 · 다음 줄은 금빛 */
.mcol { position: absolute; top: 0; z-index: 1; transform: translateX(-50%); font-size: 13px; font-weight: 800; letter-spacing: .04em; color: #d9d2f2b3; text-shadow: 0 1px 3px #000; padding: 2px 8px; border-radius: 99px; }
.mcol.now { color: #f6d58e; background: #0d0b16b3; }
.mcol.next { color: #fff; background: #0d0b16b3; border: 1px solid #f6d58e66; }
/* 엘리트 — 붉은 테 · 뿔 달린 얼굴 */
.mnode.t-elite .mring { border-color: #ff6f8f; background: radial-gradient(circle at 50% 35%, #4a1f30, #1c0e16 75%); }
.mnode.t-elite .mring svg { fill: #ff8fa6; }
.mnode.t-elite .mlabel { color: #ffb3c2; }
.mnode.t-elite.can .mring { border-color: #ff8fa6; }
.phone .mcol { font-size: 11.5px; }
/* 휴대폰 — 한 줄에 넷이면 칸 이름이 아래 칸에 겹쳤다. 칸을 줄이고 판을 머리 줄 밑으로 */
.phone .mboard { top: 72px; bottom: 6px; }
.phone .mring { width: 44px; height: 44px; }
.phone .mring svg { width: 22px; height: 22px; }
.phone .mlabel { font-size: 11px; }
.phone .mnode { gap: 1px; }
.phone .mcol { top: -4px; }

/* 길 — 곧은 선. 앞으로 갈 수 있는 길만 또렷하게, 이제 못 가는 칸 · 길은 가라앉힌다 */
.medges path { stroke-dasharray: none; stroke-width: 2; stroke: #ffffff2e; }
.medges path.live { stroke: #ffffff8c; stroke-width: 2.5; }
.medges path.gone { stroke: #ffffff14; }
.medges path.walked { stroke: #f6d58ecc; stroke-width: 3.5; }
.medges path.open { stroke: #f6d58e; stroke-width: 4; stroke-dasharray: 6 6; }
.mnode.gone { opacity: .28 !important; filter: grayscale(.7); }
.mnode:not(.can):not(.seen):not(.here):not(.gone) { opacity: .9; }

/* ══ 지도 v3 — 가로로 긴 띠 · 카제나 같은 납작한 마름모 칸 ═══════════════════════
   칸 사이는 늘 같은 간격(열 190px, 휴대폰 150px). 화면을 넘으면 끌어서(마우스) · 손가락 · 휠로 넘긴다.
   배율을 줄여 한 화면에 욱여넣지 않는다 — 전에는 12줄을 화면 폭에 흩어 놓아 칸끼리 퍼져 보였다. */
#screen.mapscreen .mboard {
  overflow-x: auto; overflow-y: hidden; cursor: grab; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
#screen.mapscreen .mboard::-webkit-scrollbar { display: none; }
#screen.mapscreen .mboard.dragging { cursor: grabbing; }
#screen.mapscreen .mboard.dragging .mnode { pointer-events: none; }
.mstrip { position: relative; height: 100%; min-width: 100%; }
.mstrip .medges { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* 길 — 곧게 나와 가운데서 꺾인다 */
#screen.mapscreen .medges path { stroke: #ffffff33; stroke-width: 2; stroke-dasharray: none; stroke-linejoin: round; animation: none; filter: none; }
#screen.mapscreen .medges path.live { stroke: #ffffffb3; stroke-width: 2.2; }
#screen.mapscreen .medges path.gone { stroke: #ffffff17; }
#screen.mapscreen .medges path.walked { stroke: #f6d58e; stroke-width: 3; }
#screen.mapscreen .medges path.open { stroke: #f6d58e; stroke-width: 3; stroke-dasharray: 7 6; animation: mdash .8s linear infinite; filter: drop-shadow(0 0 4px #f6d58e); }

/* 칸 — 납작한 마름모 타일. 종류마다 색: 일반 분홍 · 엘리트 보라 · 이벤트 청록 · 휴식 주황 · 보스 빨강 */
#screen.mapscreen .mnode { gap: 0; }
#screen.mapscreen .mring {
  --c1: #5a5570; --c2: #34304a; --edge: #ffffff55;
  width: 76px; height: 76px; border-radius: 12px; padding: 0; opacity: 1;
  transform: scaleY(.58) rotate(45deg);
  background: linear-gradient(135deg, var(--c1), var(--c2));
  border: 2px solid var(--edge);
  box-shadow: 0 0 0 5px #0d0b1666, 0 8px 18px #000c;
  display: grid; place-items: center; animation: none;
  transition: transform .15s, box-shadow .15s, filter .15s;
}
#screen.mapscreen .micon { display: grid; place-items: center; transform: rotate(-45deg) scaleY(1.724); }
#screen.mapscreen .micon svg { width: 30px; height: 30px; fill: #fff; filter: drop-shadow(0 1px 2px #0008); }
#screen.mapscreen .micon svg.stroke { fill: none !important; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
#screen.mapscreen .mlabel { margin-top: -14px; font-size: 12.5px; font-weight: 800; color: #f4f1ff; text-shadow: 0 1px 3px #000, 0 0 8px #000; }
#screen.mapscreen .t-fight .mring { --c1: #ff6f8f; --c2: #b8304f; --edge: #ffc2cf; }
#screen.mapscreen .t-elite .mring { --c1: #a57cf0; --c2: #5a37a8; --edge: #d8c4ff; }
#screen.mapscreen .t-event .mring { --c1: #4fd0e0; --c2: #1f7f96; --edge: #b8f2fa; }
#screen.mapscreen .t-camp .mring, #screen.mapscreen .t-campshop .mring { --c1: #ffb558; --c2: #c9701c; --edge: #ffe0b0; }
#screen.mapscreen .t-start .mring { --c1: #f6d58e; --c2: #a8823a; --edge: #fff3cf; width: 64px; height: 64px; }
#screen.mapscreen .t-boss .mring { --c1: #ff5a6a; --c2: #8c1f2c; --edge: #ffb3bb; width: 100px; height: 100px; }
#screen.mapscreen .t-boss .micon svg { width: 40px; height: 40px; }
#screen.mapscreen .t-elite .mlabel { color: #d8c4ff; }
#screen.mapscreen .t-boss .mlabel { margin-top: -18px; color: #ffb3bb; font-size: 14px; }
/* 상점이 붙은 휴식 — 오른쪽 위 작은 간판 */
#screen.mapscreen .t-campshop .mring::after {
  content: "₲"; position: absolute; right: -8px; top: -8px; width: 22px; height: 22px; border-radius: 6px;
  display: grid; place-items: center; font-size: 13px; font-weight: 900; color: #221a08; background: #f6d58e;
  transform: rotate(-45deg) scaleY(1.724); box-shadow: 0 0 0 2px #0d0b16;
}

/* 상태 — 갈 수 있는 칸은 빛나고 들썩인다. 지나온 칸 · 못 가는 칸은 잿빛 */
#screen.mapscreen .mnode.can { opacity: 1; }
#screen.mapscreen .mnode.can .mring { box-shadow: 0 0 0 4px #f6d58e, 0 0 26px #f6d58ecc, 0 8px 18px #000c; animation: mtile 1.1s ease-in-out infinite alternate; }
#screen.mapscreen .mnode.can:hover .mring { transform: scaleY(.58) rotate(45deg) scale(1.1); }
@keyframes mtile { from { filter: brightness(1); } to { filter: brightness(1.18); } }
#screen.mapscreen .mnode.can .mlabel { color: #f6d58e; }
#screen.mapscreen .mnode.seen .mring, #screen.mapscreen .mnode.gone .mring { --c1: #4a465c; --c2: #2a2738; --edge: #ffffff33; }
#screen.mapscreen .mnode.seen { opacity: .75; }
#screen.mapscreen .mnode.gone { opacity: .35 !important; filter: none; }
#screen.mapscreen .mnode.here { opacity: 1; }
#screen.mapscreen .mnode.here .mring { --edge: #fff; box-shadow: 0 0 0 4px #ffffff66, 0 8px 18px #000c; }
#screen.mapscreen .mnode:not(.can):not(.seen):not(.here):not(.gone) .mring { filter: saturate(.75) brightness(.85); }
#screen.mapscreen .mboard.going .mnode:not(.pick) { opacity: .35; }
#screen.mapscreen .mnode.pick .mring { transform: scaleY(.58) rotate(45deg) scale(1.15); }

/* 미니미는 지금 칸 위에 — 타일을 가리지 않게 조금 위로 */
#screen.mapscreen .mwalkers { transform: translate(-50%, calc(-100% - 18px)); }

/* 휴대폰 — 열 150px · 타일을 줄인다 */
.phone #screen.mapscreen .mring { width: 58px; height: 58px; }
.phone #screen.mapscreen .micon svg { width: 24px; height: 24px; }
.phone #screen.mapscreen .t-boss .mring { width: 76px; height: 76px; }
.phone #screen.mapscreen .t-start .mring { width: 50px; height: 50px; }
.phone #screen.mapscreen .mlabel { margin-top: -10px; font-size: 11.5px; }
.phone #screen.mapscreen .mboard { top: 62px; }
#screen.mapscreen .mlabel { margin-top: 0; }
#screen.mapscreen .t-boss .mlabel { margin-top: -4px; }
.phone #screen.mapscreen .mlabel { margin-top: 0; }

/* ══ 상태 칩 자리 — 칩이 늘어도 캐릭터가 밀려 올라가지 않게 ═══════════════════
   칩(버프 · 디버프 · 키워드)을 흐름에서 빼 체력 숫자 밑에 띄운다. 대신 캐릭터를 처음부터 위로 올려
   발밑과 손패 사이에 칩 두 줄 자리(약 56px)를 비워 둔다. */
#screen.battle .field { padding-bottom: 430px; }
.phone #screen.battle .field { padding-bottom: 272px; }
#screen.battle .stand, #screen.battle .foe { position: relative; }
#screen.battle .stand > .chips, #screen.battle .foe > .chips {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 4px; z-index: 5;
  width: max-content; max-width: 230px; flex-wrap: wrap; justify-content: center; gap: 3px; pointer-events: none;
}
.phone #screen.battle .stand > .chips, .phone #screen.battle .foe > .chips { max-width: 170px; }
/* 칩 줄은 제 캐릭터 폭까지만 — 넘으면 옆 적 · 옆 사도의 칩과 섞였다 */
#screen.battle .stand > .chips, #screen.battle .foe > .chips { max-width: calc(var(--bw, 160px) + 24px); }
#screen.battle :is(.stand, .foe) > .chips .chip { font-size: 11px; padding: 0 6px; line-height: 17px; }
.phone #screen.battle :is(.stand, .foe) > .chips .chip { font-size: 9.5px; padding: 0 4px; line-height: 14px; }
.phone #screen.battle .stand > .chips, .phone #screen.battle .foe > .chips { gap: 2px; margin-top: 2px; }

/* ══ 장비 아이콘 · 칸 ═══════════════════════════════════════════════════════
   둥근 네모 판에 종류 그림 — 테두리 · 그림 색은 등급(전설 금 · 희귀 보라 · 고급 초록 · 일반 회색).
   애착 장비는 그 사도의 얼굴이 오른쪽 아래에. 빈 칸은 그 칸 모양만 흐리게. */
.eicon {
  position: relative; flex: none; display: inline-grid; place-items: center; border-radius: 10px;
  color: var(--gc, #a8adbf);
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--gc, #a8adbf) 28%, #1a1628), #0d0b16 80%);
  border: 1.5px solid color-mix(in srgb, var(--gc, #a8adbf) 75%, transparent);
  box-shadow: inset 0 0 0 1px #0008, 0 3px 8px #0008;
}
.eicon svg { width: 64%; height: 64%; filter: drop-shadow(0 1px 2px #000a); }
.eicon.g-전설 { box-shadow: inset 0 0 0 1px #0008, 0 0 10px #f0b94a66, 0 3px 8px #0008; }
.eicon.empty { color: #ffffff26; background: #ffffff08; border: 1.5px dashed #ffffff33; box-shadow: none; }
.eaffface {
  position: absolute; right: -5px; bottom: -5px; width: 46%; height: 46%; border-radius: 50%; overflow: hidden;
  border: 1.5px solid var(--gc, #fff); background: #1a1628;
}
.eaffface img { width: 100%; height: 100%; object-fit: cover; }
.ecard .ehead { align-items: center; }
.gslot { display: grid !important; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.gslot .eicon { grid-row: span 4; }
/* 한 줄짜리 세 칸 — 지도 머리의 사도 옆 */
.gstrip { display: inline-flex; gap: 3px; margin-left: 4px; }
.gstrip .eicon { border-radius: 6px; }
.mhero { cursor: pointer; }
.mhero:hover { border-color: #f6d58e; }
/* 사도 정보창의 장비 */
.bmgear { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bmgslot { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: #ffffff0a; border: 1px solid #ffffff1f; }
.bmgslot div { display: flex; flex-direction: column; min-width: 0; }
.bmgslot b { font-size: 13px; color: #fff; }
.bmgslot span { font-size: 11.5px; color: #9fe3b4; }
.bmgslot.empty b { color: #b9b2d6; font-weight: 600; }
/* 장비 창(지도) — 캠프의 판을 어두운 유리 위에 */
.gearmodal .bmbox { width: min(980px, 100%); flex-direction: column; }
.gearmodal .bmbody { width: 100%; }
.gearmodal :is(.grow, .gslot.full, .ecard) { background: #0d0b16d1; border-color: #ffffff26; color: #f4f1ff; }
.gearmodal .gslot { background: #ffffff0a; border-color: #ffffff2e; color: #d9d2f2; }
.gearmodal :is(.gbagh, .rnone) { color: #b9b2d6; }
.gearmodal .eqstat { color: #9fe3b4; }
.gearmodal :is(.eslot, .eoff) { background: #ffffff14; color: #b9b2d6; }
.gearmodal :is(.egrade, .eblurb, .eeff) { color: #b9b2d6; }
/* 신탁 — 붙을 카드를 줄 맨 앞에 */
.flashrow { align-items: center; }
.ftarget { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
.ftarget .gcard { width: 170px; cursor: zoom-in; box-shadow: 0 0 0 2px #f6d58e, 0 0 22px #f6d58e66, 0 10px 22px #000a; }
.ftlab { font-size: 12.5px; font-weight: 800; color: #f6d58e; text-shadow: 0 1px 3px #000; }
.phone .ftarget .gcard { width: 130px; }

/* ══ 신탁 — 빛나는 카드 · 신탁 창 ════════════════════════════════════════
   손패의 빛나는 카드는 금빛 테가 숨 쉬듯 번지고 위로 빛가루가 오른다. 내는 순간 가운데에 「신탁!」. */
.battle .hand .card.glow {
  box-shadow: 0 0 0 2px #ffe08a, 0 0 18px #ffd23f, 0 0 36px #ffd23f88, 0 10px 22px #0009 !important;
  animation: glowcard 1.1s ease-in-out infinite alternate;
}
.battle .hand .card.glow::after {
  content: "신탁"; position: absolute; left: 50%; top: -2px; transform: translate(-50%, -100%); z-index: 5;
  font-size: 11px; font-weight: 900; letter-spacing: .08em; color: #221a08; padding: 1px 8px; border-radius: 99px;
  background: linear-gradient(180deg, #fff3b0, #ffc84a); box-shadow: 0 0 10px #ffd23f;
}
@keyframes glowcard { from { filter: brightness(1); } to { filter: brightness(1.15) saturate(1.1); } }
/* 은총으로 막 얻은 카드 — 이번 턴 비용 0 */
.battle .hand .card.fresh { box-shadow: 0 0 0 2px #9fe3ff, 0 0 18px #5fc8ff99, 0 10px 22px #0009 !important; }
.battle .hand .card.fresh .gcost { color: #9fe3ff; }

.epimodal { z-index: 90; background: radial-gradient(ellipse at 50% 45%, #3a2c0acc, #07051099 60%); backdrop-filter: blur(4px); }
.epimodal.divine { background: radial-gradient(ellipse at 50% 45%, #2a1a4acc, #07051099 60%); }
.epibox { display: flex; flex-direction: column; align-items: center; gap: 10px; animation: bmpop .25s ease-out; }
.epititle {
  font-size: 54px; font-weight: 900; letter-spacing: .04em; color: #fff4c8;
  text-shadow: 0 0 18px #ffd23f, 0 0 40px #ffb13c, 0 3px 0 #7a4a00;
  animation: epiflash .6s ease-out;
}
@keyframes epiflash { 0% { transform: scale(1.6); opacity: 0; filter: brightness(3); } 60% { transform: scale(.95); opacity: 1; } 100% { transform: scale(1); } }
.episub { margin: 0 0 8px; font-size: 16px; color: #f4f1ff; text-shadow: 0 1px 4px #000; }
.epirow { display: flex; gap: 22px; align-items: flex-end; }
.epiopt {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none;
  cursor: pointer; transition: transform .15s;
}
.epiopt .gcard { width: 210px; box-shadow: 0 0 0 2px #ffe08a88, 0 14px 30px #000c; }
.epiopt:hover:not(:disabled) { transform: translateY(-8px) scale(1.03); }
.epiopt:hover .gcard { box-shadow: 0 0 0 3px #ffe08a, 0 0 28px #ffd23f, 0 14px 30px #000c; }
.epikind { font-size: 14px; font-weight: 900; color: #ffe08a; text-shadow: 0 1px 3px #000; }
.epishin {
  position: absolute; top: 26px; left: 50%; transform: translateX(-50%); z-index: 6; white-space: nowrap;
  font-size: 12px; font-weight: 900; color: #fff; padding: 3px 10px; border-radius: 99px;
  background: linear-gradient(90deg, #8a5cff, #ff6fd8); box-shadow: 0 0 16px #b48cffcc;
}
.epiopt.shin .gcard { box-shadow: 0 0 0 3px #c9a8ff, 0 0 30px #9a6cffcc, 0 14px 30px #000c; }
.phone .epititle { font-size: 40px; }
.phone .epiopt .gcard { width: 150px; }
.phone .epirow { gap: 12px; }
/* 「신탁」 표는 카드 안 위쪽에 — 카드가 overflow:hidden 이라 밖에 두면 잘렸다 */
.battle .hand .card.glow::after { top: auto; bottom: 40px; transform: translateX(-50%); }
.battle .hand .card.glow::after { top: 7px; right: 7px; bottom: auto; left: auto; transform: none; }
.epishin { position: static; transform: none; order: 3; }

/* 은총 — 고르지 않는다. 가운데에 잠깐 떴다가 사라진다(손은 막지 않는다) */
.gracebanner { position: fixed; inset: 0; z-index: 88; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: radial-gradient(ellipse at 50% 45%, #3a2c0a99, transparent 60%); animation: gracefade 1.7s ease forwards; }
.gracebanner .gcard { width: 200px; box-shadow: 0 0 0 3px #ffe08a, 0 0 34px #ffd23f, 0 14px 30px #000c; }
@keyframes gracefade { 0% { opacity: 0; transform: scale(.9); } 15% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(40px) scale(.8); } }
.battle .hand .card.glow-hero::after { content: "은총"; }
.battle .hand .card.glow-card::after { content: "신탁"; }

/* ══ 쓰러진 적 · 떨어지는 것 · 얻은 것 ══════════════════════════════════════
   쓰러진 적은 반투명으로 남지 않는다 — 빛나며 사라지고(자리는 남긴다) 골드를 떨군다.
   떨어진 골드 · 카드는 오른쪽 「얻은 것」 목록으로 날아가 쌓인다. 이기면 목록을 잠깐 보여 주고 넘어간다. */
#screen.battle .foe.dead { visibility: hidden; }
#screen.battle .foe.dying { pointer-events: none; animation: foeout .6s ease-in forwards; }
#screen.battle .foe.dying .intent, #screen.battle .foe.dead .intent { display: none; }
@keyframes foeout {
  0% { opacity: 1; filter: brightness(1); transform: scale(1); }
  30% { opacity: 1; filter: brightness(2.2) saturate(0); transform: scale(1.04); }
  100% { opacity: 0; filter: brightness(3) saturate(0); transform: scale(.85) translateY(-10px); visibility: hidden; }
}

/* 떨어지는 골드 — 튀어 올랐다가 목록으로 */
.dropcoin {
  position: fixed; z-index: 85; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fff6c4, #ffd23f 45%, #c88a18);
  box-shadow: 0 0 10px #ffd23f, inset 0 -2px 0 #9a6410;
  animation: coinfly 1.1s cubic-bezier(.5, 0, .4, 1) forwards; animation-delay: calc(var(--k, 0) * 60ms);
}
@keyframes coinfly {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; }
  12% { transform: translate(calc((var(--k, 0) - 2) * 8px), -60px) scale(1.1); opacity: 1; }
  30% { transform: translate(calc((var(--k, 0) - 2) * 12px), -20px) scale(1); }
  100% { transform: translate(var(--dx), var(--dy)) scale(.5); opacity: .2; }
}
/* 떨어지는 카드 — 가운데에서 떠올라 목록으로 */
.dropcard {
  position: fixed !important; z-index: 86; width: 150px; margin: -110px 0 0 -75px; pointer-events: none;
  box-shadow: 0 0 0 2px #ffe08a, 0 0 26px #ffd23f, 0 12px 26px #000c !important;
  animation: cardfly 1.1s cubic-bezier(.5, 0, .4, 1) forwards;
}
@keyframes cardfly {
  0% { transform: translate(0, 30px) scale(.6); opacity: 0; }
  25% { transform: translate(0, 0) scale(1); opacity: 1; }
  55% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: .3; }
}

/* 얻은 것 — 오른쪽 목록. 처음 뭔가 떨어지면 나타난다 */
#screen.battle .lootbox {
  position: absolute; right: 16px; top: 76px; z-index: 12; width: 230px; max-height: 46%;
  display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px;
  background: #0d0b16d9; border: 1px solid #ffffff26; backdrop-filter: blur(6px); box-shadow: 0 10px 24px #000a;
  opacity: 0; transform: translateX(30px); pointer-events: none; transition: opacity .3s, transform .3s;
}
#screen.battle .lootbox.on { opacity: 1; transform: none; pointer-events: auto; }
#screen.battle .lootbox.done { border-color: #f6d58e; box-shadow: 0 0 0 1px #f6d58e66, 0 0 30px #f6d58e44, 0 10px 24px #000a; }
.lthead { font-size: 13px; font-weight: 900; letter-spacing: .06em; color: #f6d58e; }
.ltlist { display: flex; flex-direction: column; gap: 5px; overflow-y: auto; }
.ltrow {
  display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 9px; cursor: pointer;
  background: #ffffff0c; border: 1px solid #ffffff1a; transition: background .3s, border-color .3s;
}
.ltrow.ltnew { background: #f6d58e2e; border-color: #f6d58e; animation: ltin .35s ease-out; }
@keyframes ltin { from { transform: translateX(20px); opacity: 0; } }
.ltrow div { display: flex; flex-direction: column; min-width: 0; }
.ltrow b { font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ltrow span:not(.lticon):not(.ltthumb):not(.eicon) { font-size: 11px; color: #d9d2f2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ltgold b { color: #f6d58e; font-size: 15px; }
.lticon.coin { width: 22px; height: 22px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #fff6c4, #ffd23f 45%, #c88a18); box-shadow: 0 0 8px #ffd23f88; }
.ltthumb { width: 34px; height: 44px; flex: none; border-radius: 6px; overflow: hidden; background: #1a1628; border: 1px solid #f6d58e88; display: grid; place-items: center; }
.ltthumb img { width: 100%; height: 100%; object-fit: cover; }
.ltnone { margin: 0; font-size: 12px; color: #b9b2d6; }
/* 휴대폰 — 머리 줄(턴 · 메뉴) 밑, 좁게 */
.phone #screen.battle .lootbox { top: 56px; right: 10px; width: 190px; padding: 7px; }
.phone .ltrow b { font-size: 12px; }
/* 도는 장비 효과 — 흐리지 않게 */
.eeff.on { color: inherit; }
.eeff.on .eoff { background: #f6d58e26; color: #f6d58e; }
#screen.rewardscreen .eeff.on, .gearmodal .eeff.on { color: #f4f1ff; }

/* 장비 그림 — 원작 아티팩트 아이콘이 있으면 무늬 대신 그림(tools/extract-gear-icons.py) */
.eicon.haspic > img { width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 2px 3px #000b); pointer-events: none; }

/* 떨어지는 장비 — 쓰러진 적 자리에서 튀어 올라 목록으로 */
.dropequip {
  position: fixed !important; z-index: 86; margin: -32px 0 0 -32px; pointer-events: none;
  box-shadow: 0 0 0 2px #ffe08a, 0 0 24px #ffd23f, 0 10px 20px #000c !important;
  animation: equipfly 1.1s cubic-bezier(.5, 0, .4, 1) forwards;
}
@keyframes equipfly {
  0% { transform: translate(0, 10px) scale(.4); opacity: 0; }
  20% { transform: translate(0, -50px) scale(1.15); opacity: 1; }
  45% { transform: translate(0, -30px) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: .3; }
}

/* ══ 팀 편성 — 위는 무대, 아래는 명단 ═══════════════════════════════════════
   전투 · 지도와 같은 옷: 1층 싸움터(--stagebg) · 어두운 유리 · 금선.
   무대에는 고른 셋이 전투처럼 스파인으로 선다(후열이 왼쪽). 명단은 늘 펼쳐 두고 눌러서 올리고 내린다. */
body:has(#screen.teamscreen2) .top { display: none; }
#screen.teamscreen2 {
  position: fixed; inset: 0; z-index: 1; max-width: none; margin: 0; padding: 0; border-radius: 0;
  height: var(--app-h, 100vh); overflow: hidden; color: #f4f1ff;
  --dockh: 318px; --sidew: 390px;
  background:
    linear-gradient(180deg, #0a0814cc 0, #0a081440 16%, #0a081400 40%, #0a081499 62%, #0a0814 78%),
    var(--stagebg, none) 50% 72% / max(115%, calc(var(--app-h, 100vh) * 1.15 * 16 / 9)) auto no-repeat,
    radial-gradient(ellipse at 50% 20%, #2a2340, #0e0c17 80%);
}
/* 머리 */
.tm-fhead {
  position: absolute; left: 0; right: 0; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px;
  padding: 14px 20px; background: linear-gradient(180deg, #0d0b16e6, #0d0b1600);
}
.tm-fback, .tm-fdex {
  min-height: 0; padding: 9px 16px; border-radius: 10px; font-size: 14px; font-weight: 800;
  background: #0d0b16c7; border: 1px solid #ffffff2e; color: #f4f1ff; backdrop-filter: blur(4px);
}
.tm-fback { padding: 9px 14px; }
.tm-fback:hover:not(:disabled), .tm-fdex:hover:not(:disabled) { transform: none; border-color: #f6d58e; }
.tm-ftitle { display: flex; align-items: baseline; gap: 10px; }
.tm-ftitle b { font-size: 24px; font-weight: 900; text-shadow: 0 2px 8px #000; }
.tm-fcount2 { font-size: 15px; font-weight: 800; color: #f6d58e; }
.tm-fwhere { margin-right: auto; font-size: 13px; color: #d9d2f2; text-shadow: 0 1px 4px #000; }

/* 무대 — 발밑이 명단 바로 위 */
.tm-fstage { position: absolute; left: 0; right: var(--sidew); top: 64px; bottom: var(--dockh); }
.tm-fstands {
  position: absolute; left: 70px; right: 40px; bottom: 6px; top: 0;
  display: flex; align-items: flex-end; justify-content: center; gap: 34px;
}
.tm-fstand {
  position: relative; width: 230px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; animation: fstandin .35s ease-out;
}
@keyframes fstandin { from { opacity: 0; transform: translateY(14px); } }
.tm-fstand .art { width: 230px !important; height: 300px !important; position: relative; }
.tm-fstand .art:after {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: 0; height: 9%; z-index: -1;
  border-radius: 50%; background: radial-gradient(closest-side, #000b, transparent);
}
.tm-fstand:not(.empty):hover .art { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--tint) 70%, transparent)); }
.tm-fplate {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 14px; border-radius: 12px;
  background: #0d0b16cc; border: 1px solid color-mix(in srgb, var(--tint, #fff) 55%, transparent); backdrop-filter: blur(4px);
}
.tm-fpt { display: flex; align-items: center; gap: 6px; }
.tm-fpt b { font-size: 16px; font-weight: 900; }
.tm-fnat { width: 20px; height: 20px; }
.tm-fps { font-size: 12px; color: #d9d2f2; }
.tm-fx {
  position: absolute; top: 4px; right: 18px; z-index: 3; min-height: 0; width: 30px; height: 30px; padding: 0; border-radius: 50%;
  font-size: 14px; background: #0d0b16d9; border: 1px solid #ffffff40; color: #fff; opacity: 0; transition: opacity .15s;
}
.tm-fstand:hover .tm-fx, .touch .tm-fx { opacity: 1; }
.tm-fx:hover:not(:disabled) { transform: none; border-color: #ff8a8a; color: #ff8a8a; }
/* 빈 자리 — 흐린 실루엣 */
.tm-fstand.empty {
  height: 300px; justify-content: flex-end; padding: 0 0 18px; min-height: 0; border: 0; background: none; color: #d9d2f2;
}
.tm-fstand.empty:hover:not(:disabled) { transform: none; }
.tm-fghost {
  position: absolute; left: 50%; bottom: 60px; width: 150px; height: 210px; transform: translateX(-50%);
  border-radius: 75px 75px 26px 26px; border: 2px dashed #ffffff40; background: radial-gradient(ellipse at 50% 40%, #ffffff14, #ffffff05 70%);
}
.tm-fplus { position: relative; font-size: 34px; font-weight: 300; color: #ffffffaa; margin-bottom: 70px; }
.tm-fwho { position: relative; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 99px; background: #0d0b16b3; border: 1px solid #ffffff26; }

/* 오른쪽 — 함께 가면 · 시작 덱 · 떠납니다 */
.tm-fside {
  position: absolute; right: 16px; top: 72px; bottom: calc(var(--dockh) + 10px); width: calc(var(--sidew) - 32px); z-index: 4;
  display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 14px; overflow: hidden;
  background: #0d0b16d9; border: 1px solid #ffffff26; backdrop-filter: blur(6px); box-shadow: 0 10px 26px #000a;
}
.tm-flabel { font-size: 12px; font-weight: 900; letter-spacing: .08em; color: #f6d58e; }
.tm-fnote { margin: 0; font-size: 12.5px; line-height: 1.5; color: #b9b2d6; }
.tm-fsyn { display: flex; flex-direction: column; gap: 7px; }
.tm-fbond { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.tm-fbond b { font-weight: 800; }
.tm-ftier { padding: 1px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 800; background: #ffffff1a; border: 1px solid #ffffff33; }
.tm-fwhy { font-size: 11.5px; color: #b9b2d6; }
.tm-fnats { display: flex; gap: 6px; flex-wrap: wrap; }
.tm-fnatc {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 4px; border-radius: 99px; font-size: 12px; font-weight: 800;
  background: color-mix(in srgb, var(--tint) 22%, #0d0b16); border: 1px solid color-mix(in srgb, var(--tint) 60%, transparent);
}
.tm-fci { width: 18px; height: 18px; }
.tm-fap { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.tm-fap b { font-size: 22px; font-weight: 900; color: #f6d58e; }
.tm-fdeck2 { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.tm-fdkrow { display: flex; gap: 8px; align-items: flex-start; }
.tm-fdkwho { flex: none; width: 58px; font-size: 12px; font-weight: 800; padding-top: 3px; }
.tm-fdkcards { display: flex; flex-wrap: wrap; gap: 4px; }
.tm-fdk {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 3px; border-radius: 7px; font-size: 11.5px;
  background: #ffffff0f; border: 1px solid #ffffff22;
}
.tm-fdk i { font-style: normal; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 900; background: #2c2544; color: #f6d58e; }
.tm-fdk.t공격 { border-color: #d9737f66; } .tm-fdk.t방어 { border-color: #7fb7f566; } .tm-fdk.t스킬 { border-color: #9fe3b466; } .tm-fdk.t강화 { border-color: #f5dc5a66; }
.tm-fgo {
  flex: none; min-height: 0; padding: 14px; border-radius: 12px; font-size: 18px; font-weight: 900; letter-spacing: .04em;
  background: linear-gradient(180deg, #ffe7a8, #f0b94a); color: #2a1a05; border: 1px solid #fff3; box-shadow: 0 0 22px #f0b94a66, 0 6px 14px #0008;
}
.tm-fgo:disabled { background: #2c2544; color: #9d96bd; box-shadow: none; }
.tm-fgo:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); }

/* 명단 — 아래 전체, 늘 펼침 */
.tm-fdock {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--dockh); z-index: 3;
  display: flex; flex-direction: column; gap: 8px; padding: 10px 16px 12px;
  background: linear-gradient(180deg, #0d0b16cc, #0d0b16f2 30%); border-top: 1px solid #f6d58e44; backdrop-filter: blur(6px);
}
.tm-fbar { display: flex; align-items: center; gap: 10px; }
.tm-fchips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-right: auto; }
.tm-fchip {
  display: inline-flex; align-items: center; gap: 5px; min-height: 0; padding: 5px 11px; border-radius: 99px; font-size: 12.5px; font-weight: 700;
  background: #ffffff0d; border: 1px solid #ffffff26; color: #e8e3ff;
}
.tm-fchip.on { background: #f6d58e26; border-color: #f6d58e; color: #fff; }
.tm-fchip:hover:not(:disabled) { transform: none; border-color: #f6d58e99; }
.tm-fgap { width: 12px; }
.tm-fsearch {
  width: 200px; padding: 8px 12px; border-radius: 10px; font-size: 13px;
  background: #0d0b16; border: 1px solid #ffffff2e; color: #f4f1ff;
}
.tm-froster {
  flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 8px; padding: 2px 2px 6px;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); align-content: start;
}
.tm-fcard {
  position: relative; height: 128px; min-height: 0; padding: 0; overflow: hidden; border-radius: 10px;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--tint) 30%, #1a1628), #0d0b16 85%);
  border: 1.5px solid #ffffff22; transition: border-color .15s, transform .15s;
}
.tm-fcard .art { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.tm-fcard .art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.tm-fcard:hover:not(:disabled) { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tint) 80%, #fff); }
.tm-fcard.on { border-color: #f6d58e; box-shadow: 0 0 0 1px #f6d58e, 0 0 14px #f6d58e66; }
.tm-fcard.on .art { filter: brightness(.55); }
.tm-ffade { position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(180deg, transparent, #0d0b16f2); }
.tm-fbadges { position: absolute; left: 4px; top: 4px; display: flex; flex-direction: column; gap: 2px; }
.tm-fb { width: 20px; height: 20px; filter: drop-shadow(0 1px 2px #000); }
.tm-fcp { position: absolute; left: 0; right: 0; bottom: 5px; display: flex; flex-direction: column; align-items: center; gap: 0; }
.tm-fcp b { font-size: 13px; font-weight: 800; text-shadow: 0 1px 3px #000; white-space: nowrap; }
.tm-fcp span { font-size: 10.5px; color: #d9d2f2; }
.tm-fnum {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-size: 20px; font-weight: 900; color: #2a1a05; background: linear-gradient(180deg, #ffe7a8, #f0b94a); box-shadow: 0 0 14px #f0b94a99;
}
.tm-fecho { position: absolute; right: 4px; top: 4px; padding: 1px 6px; border-radius: 6px; font-size: 10px; font-weight: 800; background: #9a8cc0cc; }
.tm-fnone { grid-column: 1 / -1; padding: 24px; text-align: center; color: #b9b2d6; }

/* 휴대폰 — 높이 540. 무대를 줄이고 명단은 두 줄 */
.phone #screen.teamscreen2 { --dockh: 206px; --sidew: 300px; }
.phone .tm-fhead { padding: 8px 12px; gap: 10px; }
.phone .tm-ftitle b { font-size: 18px; }
.phone .tm-fwhere { display: none; }
.phone .tm-fstage { top: 46px; }
.phone .tm-fstands { left: 20px; right: 10px; gap: 6px; }
.phone .tm-fstand { width: 150px; }
.phone .tm-fstand .art { width: 150px !important; height: 190px !important; }
.phone .tm-fstand.empty { height: 190px; padding-bottom: 8px; }
.phone .tm-fghost { width: 100px; height: 130px; bottom: 44px; }
.phone .tm-fplus { margin-bottom: 40px; }
.phone .tm-fplate { padding: 3px 10px; }
.phone .tm-fside { top: 50px; padding: 10px 12px; gap: 6px; }
.phone .tm-fdk { font-size: 10.5px; }
.phone .tm-fgo { padding: 10px; font-size: 16px; }
.phone .tm-fcard { height: 86px; }
.phone .tm-froster { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.phone .tm-fchip { padding: 4px 8px; font-size: 11px; }
.phone .tm-fsearch { width: 130px; }
/* 성격 · 역할 아이콘 — <i><img></i>. 그림은 칸에 맞춘다 */
#screen.teamscreen2 i.tm-fnat, #screen.teamscreen2 i.tm-fb, #screen.teamscreen2 i.tm-fci { display: inline-grid; place-items: center; flex: none; font-style: normal; font-size: 11px; font-weight: 900; }
#screen.teamscreen2 i.tm-fnat > img, #screen.teamscreen2 i.tm-fb > img, #screen.teamscreen2 i.tm-fci > img { width: 100%; height: 100%; object-fit: contain; }
/* 오른쪽 판이 넘치면 속만 넘긴다 — 「떠납니다」는 늘 보인다 */
.tm-fsyn { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
.tm-fgo { margin-top: auto; }
.phone .tm-fside .tm-fnote, .phone .tm-fside > .tm-flabel, .phone .tm-fdeck2 { display: none; }
.phone .tm-fbond { font-size: 12px; gap: 5px; }
.phone .tm-fwhy { display: none; }

/* ══ 사도 도감 · 사도 정보 — 편성과 같은 옷 ═══════════════════════════════════
   1층 싸움터(--stagebg)를 흐리고 어둡게 깔고, 판은 어두운 유리 · 금선. 글이 빽빽해서 배경은 편성보다 더 누른다.
   옛 밝은 결(dex.css)을 화면 이름(#screen.dexscreen · #screen.detailscreen)으로 덮는다 — 같은 조각을 쓰는 보상 · 상점은 그대로. */
body:has(#screen.dexscreen) .top, body:has(#screen.detailscreen) .top { display: none; }
#screen.dexscreen, #screen.detailscreen,
.phone #screen.dexscreen, .phone #screen.detailscreen {
  position: fixed; inset: 0; z-index: 1; max-width: none; margin: 0; padding: 0; border-radius: 0;
  height: var(--app-h, 100vh); min-height: 0; overflow: hidden; isolation: isolate;
  --ink: #f4f1ff; --dim: #b9b2d6; --line: #ffffff1f; --hot: #f6d58e; --sel: #f6d58e;
  color: #f4f1ff; background: #0b0913;
}
/* 배경 — 싸움터 그림을 흐리게(아래 겹) · 그 위로 어둠(위 겹) */
#screen.dexscreen::before, #screen.detailscreen::before {
  content: ""; position: absolute; inset: -40px; z-index: -2; pointer-events: none;
  background: var(--stagebg, none) 50% 72% / max(115%, calc(var(--app-h, 100vh) * 1.15 * 16 / 9)) auto no-repeat;
  filter: blur(8px) saturate(.9) brightness(.7);
}
#screen.detailscreen::before { filter: blur(14px) saturate(.8) brightness(.5); }
#screen.dexscreen::after, #screen.detailscreen::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, #0a0814e0 0, #0a081466 18%, #0a081459 60%, #0a0814d9 100%),
    radial-gradient(ellipse at 50% 10%, #2a234033, #0a081480 80%);
}
/* 사도 정보 — 왼쪽 입상 뒤에 성격 빛을 흐리게 */
#screen.detailscreen::after {
  background:
    radial-gradient(ellipse 40% 60% at 22% 62%, color-mix(in srgb, var(--tint, #fff) 16%, transparent), transparent 70%),
    linear-gradient(180deg, #0a0814e6 0, #0a081480 18%, #0a081473 60%, #0a0814e0 100%);
}
/* 밝은 화면용으로 진하게 칠해 둔 성격 글자색(style.css)을 원래 색으로 */
#screen.dexscreen .n활발 { color: #f5dc5a; }
#screen.dexscreen .n냉정 { color: #7fd6f5; }

/* ── 머리 ─────────────────────────────────────────── */
#screen.dexscreen .dbar2, #screen.detailscreen .dbar2 {
  flex: none; gap: 14px; padding: 14px 20px 12px; border: 0; background: linear-gradient(180deg, #0d0b16e6, #0d0b1600);
}
#screen.dexscreen .iconbtn, #screen.detailscreen .iconbtn {
  width: auto; height: auto; min-height: 0; padding: 9px 14px; border-radius: 10px; font-size: 14px; font-weight: 800;
  background: #0d0b16c7; border: 1px solid #ffffff2e; color: #f4f1ff; backdrop-filter: blur(4px);
}
#screen.dexscreen .iconbtn:hover:not(:disabled), #screen.detailscreen .iconbtn:hover:not(:disabled) { transform: none; background: #0d0b16c7; border-color: #f6d58e; }
#screen.dexscreen .dtitle, #screen.detailscreen .dtitle { font-size: 24px; font-weight: 900; letter-spacing: -.3px; color: #f4f1ff; text-shadow: 0 2px 8px #000; }
#screen.detailscreen .dwho { font-size: 14px; color: #d9d2f2; text-shadow: 0 1px 4px #000; }
#screen.detailscreen .dcount { margin-right: auto; font-size: 15px; font-weight: 800; color: #f6d58e; }
#screen.dexscreen .dsearch {
  width: 200px; padding: 8px 12px; border-radius: 10px; font-size: 13px;
  background: #0d0b16d9; border: 1px solid #ffffff2e; color: #f4f1ff;
}
#screen.dexscreen .dsearch::placeholder { color: #8f88ad; }
#screen.dexscreen .dsearch:focus { border-color: #f6d58e; }
#screen.dexscreen .sortbtn {
  min-height: 0; padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 800;
  background: #0d0b16c7; border: 1px solid #ffffff2e; color: #f4f1ff; backdrop-filter: blur(4px);
}
#screen.dexscreen .sortbtn:hover:not(:disabled) { transform: none; border-color: #f6d58e; }
#screen.dexscreen .sortbtn .arrow { color: #f6d58e; }
/* 편성에 넣기 — 「떠납니다」와 같은 금 단추. 뺄 때는 붉은 테 */
#screen.detailscreen .takebtn {
  min-height: 0; padding: 10px 22px; border-radius: 11px; font-size: 14px; font-weight: 900; letter-spacing: .02em;
  background: linear-gradient(180deg, #ffe7a8, #f0b94a); color: #2a1a05; border: 1px solid #fff3; box-shadow: 0 0 18px #f0b94a55, 0 6px 14px #0008;
}
#screen.detailscreen .takebtn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); }
#screen.detailscreen .takebtn.on { background: #0d0b16c7; color: #ff9aa6; border-color: #ff8a9a88; box-shadow: none; }

/* ── 몸 ─────────────────────────────────────────── */
#screen.dexscreen .dbody, #screen.detailscreen .dbody { gap: 14px; padding: 0 18px 14px; }
#screen.dexscreen .dbody { grid-template-columns: 76px minmax(0, 1fr); }
/* 종족 레일 — 세로 유리 기둥 */
#screen.dexscreen .rail {
  gap: 2px; padding: 10px 0; border: 1px solid #ffffff26; border-radius: 14px; overflow-y: auto; scrollbar-width: none;
  background: #0d0b16b8; backdrop-filter: blur(6px);
}
#screen.dexscreen .railbtn { flex: none; min-height: 0; padding: 6px 0; color: #b9b2d6; }
#screen.dexscreen .railbtn:hover:not(:disabled) { transform: none; }
#screen.dexscreen .remb { width: 36px; height: 36px; background: #ffffff0d; border: 1px solid #ffffff26; color: #d9d2f2; }
#screen.dexscreen .rname { font-size: 10px; font-weight: 700; }
#screen.dexscreen .railbtn:hover .remb { border-color: #f6d58e99; }
#screen.dexscreen .railbtn.on { color: #f6d58e; }
#screen.dexscreen .railbtn.on .remb { background: #f6d58e26; border-color: #f6d58e; color: #f6d58e; box-shadow: 0 0 12px #f6d58e66; }

/* 오른쪽 — 거르개 · 머리 · 격자를 한 장의 유리에 */
#screen.dexscreen .dright {
  padding: 12px 16px 0; border: 1px solid #ffffff26; border-radius: 14px; overflow: hidden;
  background: #0d0b16b8; backdrop-filter: blur(6px); box-shadow: 0 10px 26px #0008;
}
#screen.dexscreen .chiprow { gap: 6px; padding-bottom: 8px; }
#screen.dexscreen .chip {
  min-height: 0; gap: 5px; padding: 5px 11px; border-radius: 99px; font-size: 12.5px; font-weight: 700;
  background: #ffffff0d; border: 1px solid #ffffff26; color: #e8e3ff;
}
#screen.dexscreen .chip:has(img) { padding-left: 6px; }
#screen.dexscreen .chip:hover:not(:disabled) { transform: none; border-color: #f6d58e99; }
#screen.dexscreen .chip.on { background: #f6d58e26; border-color: #f6d58e; color: #fff; }
#screen.dexscreen .cico:has(img) { width: 18px; height: 18px; }
#screen.dexscreen .dhead2 { padding: 2px 0 10px; border-bottom: 1px solid #f6d58e2e; margin-bottom: 10px; }
#screen.dexscreen .hemb { width: 36px; height: 36px; border-color: #f6d58e88; background: #f6d58e1a; color: #f6d58e; }
#screen.dexscreen .dhead2 b { font-size: 17px; font-weight: 900; }
#screen.dexscreen .hcount { color: #f6d58e; font-weight: 700; }

/* 격자 — 편성 명단 카드와 같은 결: 성격 빛 바탕 · 가는 테 · 고르면 금 */
#screen.dexscreen .dexgrid { gap: 10px; padding: 2px 4px 16px 2px; scrollbar-width: thin; scrollbar-color: #ffffff33 transparent; }
#screen.dexscreen .dexgrid { flex: 1; min-height: 0; grid-auto-rows: max-content; }
#screen.dexscreen .dex {
  height: auto; border-radius: 10px;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--tint, #9a8cc0) 30%, #1a1628), #0d0b16 85%);
  border: 1.5px solid #ffffff22; transition: border-color .15s, transform .15s, box-shadow .15s;
}
#screen.dexscreen .dex:hover:not(:disabled) { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tint) 80%, #fff); box-shadow: 0 10px 22px #000a; }
#screen.dexscreen .dex.on { border-color: #f6d58e; box-shadow: 0 0 0 1px #f6d58e, 0 0 16px #f6d58e66; }
#screen.dexscreen .dex .art { background: transparent; }
#screen.dexscreen .dfade { background: linear-gradient(to top, #0d0b16f2 0, #0d0b1699 24%, transparent 46%); }
#screen.dexscreen .dname { font-size: 13.5px; text-shadow: 0 1px 3px #000; }
#screen.dexscreen .dsub { font-size: 10px; color: #d9d2f2; }
#screen.dexscreen .decho { color: #fff; background: #9a8cc0cc; border: 0; border-radius: 6px; font-size: 10px; padding: 1px 6px; }
#screen.dexscreen .dmark { color: #2a1a05; background: linear-gradient(180deg, #ffe7a8, #f0b94a); border-radius: 6px; font-size: 10px; box-shadow: 0 0 10px #f0b94a88; }
#screen.dexscreen .brole { background: #0d0b16d9; color: #e8e3ff; }
#screen.dexscreen .more { color: #b9b2d6; }

/* 아래 — 고른 셋 · 편성으로 */
#screen.dexscreen .dfoot {
  flex: none; gap: 14px; padding: 10px 18px 12px; border-top: 1px solid #f6d58e44;
  background: linear-gradient(180deg, #0d0b16cc, #0d0b16f2 40%); backdrop-filter: blur(6px);
}
#screen.dexscreen .dsaid { font-size: 13.5px; color: #d9d2f2; }
#screen.dexscreen .dfoot .go {
  min-height: 0; padding: 11px 34px; border-radius: 11px; font-size: 15px; font-weight: 900;
  background: linear-gradient(180deg, #ffe7a8, #f0b94a); color: #2a1a05; border: 1px solid #fff3; box-shadow: 0 0 18px #f0b94a55, 0 6px 14px #0008;
}
#screen.dexscreen .dfoot .go:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); }

/* ── 사도 정보 — 왼쪽 갈피 ────────────────────────── */
#screen.detailscreen .dbody { grid-template-columns: 172px minmax(0, 1fr); }
#screen.detailscreen .side {
  gap: 4px; padding: 14px 10px; border: 1px solid #ffffff26; border-radius: 14px; overflow-y: auto;
  background: #0d0b16b8; backdrop-filter: blur(6px); align-self: start;
}
#screen.detailscreen .semb { gap: 1px; padding: 0 8px 14px; margin-bottom: 6px; border-bottom: 1px solid #f6d58e2e; }
#screen.detailscreen .sico:has(img) { width: 36px; height: 36px; }
#screen.detailscreen .semb span { font-size: 16px; font-weight: 900; }
#screen.detailscreen .semb i { font-size: 12px; font-weight: 700; color: var(--tint, #b9b2d6); }
#screen.detailscreen .sidebtn {
  min-height: 0; padding: 11px 14px; border-radius: 10px; font-size: 14.5px; font-weight: 800; color: #b9b2d6;
  border: 1px solid transparent;
}
#screen.detailscreen .sidebtn:hover:not(.on):not(:disabled) { transform: none; background: #ffffff0d; border-color: #ffffff1f; color: #f4f1ff; }
#screen.detailscreen .sidebtn.on {
  color: #fff; background: linear-gradient(90deg, #f6d58e33, #f6d58e0a); border-color: #f6d58e55; box-shadow: inset 3px 0 0 #f6d58e;
}
#screen.detailscreen .dmain { min-height: 0; scrollbar-width: thin; scrollbar-color: #ffffff33 transparent; }
#screen.detailscreen .pane { padding: 0 6px 20px 0; gap: 12px; }
#screen.detailscreen .pane .note { font-size: 12.5px; color: #b9b2d6; }

/* ── 능력치 — 왼쪽에 크게 선 사도, 오른쪽에 이름 · 능력치 · 능력 글 ─────────── */
#screen.detailscreen .dt-stpane { padding: 0; }
#screen.detailscreen .sthero { display: grid; grid-template-columns: minmax(300px, 40%) minmax(0, 1fr); gap: 10px; align-items: start; }
#screen.detailscreen .stshot {
  position: sticky; top: 0; width: auto; height: calc(var(--app-h, 100vh) - 92px); overflow: visible;
  border-radius: 0; background: none; display: flex; align-items: flex-end; justify-content: center;
}
/* 발밑 — 성격 빛 고리와 그림자 */
#screen.detailscreen .dt-glow {
  position: absolute; left: 12%; right: 12%; bottom: 3%; height: 12%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tint) 45%, transparent), transparent);
}
#screen.detailscreen .dt-glow::after {
  content: ""; position: absolute; left: 22%; right: 22%; top: 30%; bottom: 20%; border-radius: 50%; background: radial-gradient(closest-side, #000c, transparent);
}
#screen.detailscreen .stshot .art {
  position: relative; width: min(100%, 360px) !important; height: 84% !important; margin-bottom: 6%;
  border-radius: 0; background: none; animation: fstandin .4s ease-out;
}
#screen.detailscreen .stshot .art:not(.art-spine) img { object-fit: contain; object-position: 50% 100%; }
#screen.detailscreen .stinfo { padding: 22px 8px 0 4px; display: flex; flex-direction: column; gap: 12px; }
#screen.detailscreen .sttop { flex-wrap: wrap; gap: 12px; align-items: baseline; }
#screen.detailscreen .sttop h2 { font-size: 46px; line-height: 1.1; font-weight: 900; letter-spacing: -1.5px; color: #fff; text-shadow: 0 3px 14px #000c; }
#screen.detailscreen .star { font-size: 18px; letter-spacing: 2px; color: #f6d58e; text-shadow: 0 0 10px #f6d58e88; }
#screen.detailscreen .eldain { font-size: 11.5px; font-weight: 800; color: #9fe3b4; border-color: #9fe3b477; background: #9fe3b41a; padding: 2px 9px; }
#screen.detailscreen .stmeta { gap: 6px; margin: 0; }
#screen.detailscreen .mtag {
  font-size: 13px; font-weight: 700; color: #e8e3ff; padding: 4px 12px 4px 5px;
  background: #0d0b16b3; border: 1px solid #ffffff26; backdrop-filter: blur(4px);
}
#screen.detailscreen .mtag:first-child { border-color: color-mix(in srgb, var(--tint) 65%, transparent); background: color-mix(in srgb, var(--tint) 18%, #0d0b16cc); }
#screen.detailscreen .mtag.plain { padding-left: 12px; color: #b9b2d6; }
#screen.detailscreen .mico:has(img) { width: 20px; height: 20px; }
#screen.detailscreen .stblurb {
  margin: 0; font-size: 14px; line-height: 1.8; color: #d9d2f2; word-break: keep-all;
  padding: 8px 14px; border-left: 2px solid #f6d58e88; border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, #0d0b16c7, #0d0b1666); backdrop-filter: blur(4px);
}
/* 입상의 무기 · 날개가 글 쪽으로 넘어와도 글이 위에 온다 */
#screen.detailscreen .stinfo { position: relative; z-index: 1; }
#screen.detailscreen .statgrid { gap: 8px; margin: 2px 0 0; }
#screen.detailscreen .statc {
  position: relative; overflow: hidden; padding: 10px 14px 9px; border-radius: 12px;
  background: #0d0b16c7; border: 1px solid #ffffff26; backdrop-filter: blur(6px);
}
#screen.detailscreen .statc::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; background: linear-gradient(90deg, #f6d58e, #f6d58e00); }
#screen.detailscreen .statc small { font-size: 11px; font-weight: 800; color: #f6d58e; letter-spacing: .12em; }
#screen.detailscreen .statc strong { font-size: 26px; font-weight: 900; color: #fff; line-height: 1.2; }
#screen.detailscreen .ability {
  padding: 12px 16px; border-radius: 12px; background: #0d0b16c7; border: 1px solid #ffffff26; border-left: 3px solid #f6d58e;
  backdrop-filter: blur(6px);
}
#screen.detailscreen .ability.key { border-left-color: var(--tint, #7fd6f5); }
#screen.detailscreen .ability.src { border-left-color: #ffffff40; }
#screen.detailscreen .ability h3 { margin: 0 0 4px; font-size: 12px; font-weight: 900; letter-spacing: .1em; color: #f6d58e; }
#screen.detailscreen .ability.key h3 { color: var(--tint, #7fd6f5); }
#screen.detailscreen .ability.src h3 { color: #b9b2d6; }
#screen.detailscreen .ability p { font-size: 13.5px; line-height: 1.75; color: #e8e3ff; word-break: keep-all; }
#screen.detailscreen .ability.src p { font-size: 12.5px; color: #b9b2d6; }
#screen.detailscreen .psec { margin: 4px 0 0; font-size: 12px; font-weight: 900; letter-spacing: .08em; color: #f6d58e; }
#screen.detailscreen .bond { padding: 8px 14px; border-radius: 10px; background: #0d0b16c7; border: 1px solid #ffffff26; }
#screen.detailscreen .bond .why { color: #b9b2d6; }

/* ── 카드 ─────────────────────────────────────────── */
#screen.detailscreen .cardwrap { max-width: 1180px; gap: 18px; }
#screen.detailscreen .csec { margin-top: 4px; padding-bottom: 6px; border-bottom: 1px solid #f6d58e2e; }
#screen.detailscreen .csec:first-child { margin-top: 0; }
#screen.detailscreen .csec i { color: #f6d58e; }
#screen.detailscreen .csec b { font-size: 15px; font-weight: 900; }
#screen.detailscreen .csn { font-size: 12px; font-weight: 800; color: #f6d58e; }
#screen.detailscreen .gcard { box-shadow: 0 10px 22px #000a; transition: transform .15s, box-shadow .15s; }
#screen.detailscreen .gcard:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px #f6d58e99, 0 14px 26px #000c; }
/* 고학년 스킬 자리 — 유리 판에 금선 */
#screen.detailscreen .egoside {
  position: sticky; top: 0; gap: 6px; padding: 16px 12px 14px; border-radius: 14px;
  background: #0d0b16c7; border: 1px solid #f6d58e55; backdrop-filter: blur(6px); box-shadow: 0 10px 26px #0008;
}
#screen.detailscreen .hex { filter: drop-shadow(0 0 12px #f6d58e44); }
#screen.detailscreen .egoname { font-size: 15px; font-weight: 900; }
#screen.detailscreen .egolabel { font-size: 11px; font-weight: 800; color: #f6d58e; }
#screen.detailscreen .egotext { font-size: 12.5px; color: #d9d2f2; }

/* ── 신탁 ─────────────────────────────────────────── */
#screen.detailscreen .flashbox { padding: 12px 14px 14px; border-radius: 14px; background: #0d0b16c7; border: 1px solid #ffffff26; backdrop-filter: blur(6px); }
#screen.detailscreen .fhead b { font-size: 15px; font-weight: 900; }
#screen.detailscreen .fpic { width: 34px; height: 34px; background: #1a1628; border: 1px solid #ffffff26; }
#screen.detailscreen .ftype { color: #d9d2f2; border-color: #ffffff33; background: #ffffff0d; }
#screen.detailscreen .ftext { font-size: 12.5px; color: #d9d2f2; }
#screen.detailscreen .flashgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
#screen.detailscreen .flash {
  font-size: inherit; padding: 9px 12px 10px; border-radius: 10px; color: #f4f1ff;
  background: #ffffff0a; border: 1px solid #ffffff1f; border-top: 2px solid #f6d58e88;
}
#screen.detailscreen .fkind { font-size: 11px; color: #f6d58e; }
#screen.detailscreen .flash b { font-size: 13px; }
#screen.detailscreen .flash p { font-size: 11.5px; color: #cfc7ea; }

/* ── 고학년 스킬 ──────────────────────────────────── */
#screen.detailscreen .ultbig {
  gap: 30px; align-items: center; padding: 30px 34px; max-width: 1040px; margin-top: 24px; border-radius: 16px;
  background: #0d0b16c7; border: 1px solid #f6d58e55; backdrop-filter: blur(6px); box-shadow: 0 10px 26px #0008;
}
#screen.detailscreen .ultbig .hex { flex: none; filter: drop-shadow(0 0 18px #f6d58e55); }
#screen.detailscreen .ultbig h2 { font-size: 32px; font-weight: 900; color: #fff; text-shadow: 0 2px 10px #000a; }
#screen.detailscreen .hex.big { width: 220px; height: 220px; }
#screen.detailscreen .ultbig .egolabel { margin-bottom: 4px; font-size: 12px; letter-spacing: .2em; }
#screen.detailscreen .ultbig .egotext { font-size: 14.5px; line-height: 1.8; color: #e8e3ff; }
#screen.detailscreen .ultbig .note { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #ffffff26; }

/* 안내 한 줄(「셋까지만…」)은 화면 위에 띄운다 — 바닥글이 화면 밑에 깔려 안 보였다 */
body:has(#screen.detailscreen) .bottom, body:has(#screen.dexscreen) .bottom {
  position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%); z-index: 40;
  min-height: 0; padding: 0; border: 0; background: none; pointer-events: none;
}
body:has(#screen.detailscreen) #hint:not(:empty), body:has(#screen.dexscreen) #hint:not(:empty) {
  display: inline-block; padding: 6px 18px; border-radius: 99px; font-size: 14px; font-weight: 700;
  background: #0c0a16e6; border: 1px solid #f6d58e88; color: #ffe7ad; box-shadow: 0 6px 18px #0008;
}

/* ── 휴대폰 — 높이 540 ────────────────────────────── */
.phone #screen.dexscreen .dbar2, .phone #screen.detailscreen .dbar2 { padding: 7px 12px; gap: 10px; }
.phone #screen.dexscreen .dtitle, .phone #screen.detailscreen .dtitle { font-size: 19px; }
.phone #screen.dexscreen .iconbtn, .phone #screen.detailscreen .iconbtn { min-height: 40px; padding: 0 16px; }
.phone #screen.dexscreen .dsearch { width: 150px; min-height: 40px; }
.phone #screen.dexscreen .sortbtn, .phone #screen.detailscreen .takebtn { min-height: 40px; padding: 0 16px; }
.phone #screen.dexscreen .dbody, .phone #screen.detailscreen .dbody { gap: 8px; padding: 0 10px 8px; }
.phone #screen.dexscreen .dbody { grid-template-columns: 66px minmax(0, 1fr); }
.phone #screen.dexscreen .rail { padding: 6px 0; }
.phone #screen.dexscreen .railbtn { min-height: 0; padding: 4px 0; }
.phone #screen.dexscreen .remb { width: 32px; height: 32px; }
.phone #screen.dexscreen .dright { padding: 8px 10px 0; }
.phone #screen.dexscreen .chiprow { gap: 4px; padding-bottom: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.phone #screen.dexscreen .chip { flex: none; min-height: 34px; padding: 3px 10px; font-size: 12px; }
.phone #screen.dexscreen .chip:has(img) { padding-left: 5px; }
.phone #screen.dexscreen .chipgap { flex: none; width: 8px; }
.phone #screen.dexscreen .dhead2 { display: none; }
.phone #screen.dexscreen .dexgrid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 7px; }
.phone #screen.dexscreen .dfoot { padding: 5px 12px 6px; }
.phone #screen.dexscreen .dfoot .go { min-height: 40px; padding: 0 26px; font-size: 14px; }
.phone #screen.dexscreen .dsaid { font-size: 12.5px; }

.phone #screen.detailscreen .dbody { grid-template-columns: 124px minmax(0, 1fr); }
.phone #screen.detailscreen .side { padding: 8px 6px; gap: 3px; }
.phone #screen.detailscreen .semb { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 0 4px 8px; margin-bottom: 2px; }
.phone #screen.detailscreen .sico { margin: 0; }
.phone #screen.detailscreen .sico:has(img) { width: 28px; height: 28px; }
.phone #screen.detailscreen .semb span { font-size: 14px; }
.phone #screen.detailscreen .sidebtn { min-height: 42px; padding: 0 10px; font-size: 13.5px; }
.phone #screen.detailscreen .sthero { grid-template-columns: 262px minmax(0, 1fr); gap: 4px; }
.phone #screen.detailscreen .stshot { height: calc(var(--app-h, 100vh) - 66px); }
/* 폰은 입상을 조금 줄인다 — 머리칼 · 무기가 갈피 쪽 가장자리에서 잘렸다 */
.phone #screen.detailscreen .stshot .art { width: 220px !important; height: 76% !important; margin-left: 14px; }
.phone #screen.detailscreen .stinfo { padding-top: 6px; gap: 9px; }
.phone #screen.detailscreen .sttop h2 { font-size: 32px; }
.phone #screen.detailscreen .star { font-size: 15px; }
.phone #screen.detailscreen .mtag { font-size: 12px; padding: 2px 10px 2px 4px; }
.phone #screen.detailscreen .stblurb { font-size: 13px; line-height: 1.65; }
.phone #screen.detailscreen .statc { padding: 6px 10px; }
.phone #screen.detailscreen .statc strong { font-size: 21px; }
.phone #screen.detailscreen .ability { padding: 9px 12px; }
.phone #screen.detailscreen .ability p { font-size: 13px; }
.phone #screen.detailscreen .cardwrap { grid-template-columns: minmax(0, 1fr) 176px; gap: 10px; }
.phone #screen.detailscreen .cardrow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.phone #screen.detailscreen .gcard .gtitle b { font-size: 11px; }
.phone #screen.detailscreen .gcard .gtext { font-size: 10.5px; line-height: 1.35; }
.phone #screen.detailscreen .hex { width: 112px; height: 112px; }
.phone #screen.detailscreen .egoside { padding: 12px 8px; }
.phone #screen.detailscreen .egotext { font-size: 12px; }
.phone #screen.detailscreen .ultbig .egotext { font-size: 14px; line-height: 1.7; }
.phone #screen.detailscreen .flashgrid { gap: 6px; }
/* 낱말 밑줄(.kw)도 단추라 폰의 「단추는 40px」 에 걸려 줄 사이가 벌어졌다 */
.phone #screen.detailscreen .kw { min-height: 0; }
.phone #screen.detailscreen .flash p { font-size: 11.5px; }
.phone #screen.detailscreen .ultbig { padding: 16px 18px; gap: 18px; }
.phone #screen.detailscreen .hex.big { width: 150px; height: 150px; }
.phone body:has(#screen.detailscreen) .bottom, .phone body:has(#screen.dexscreen) .bottom { bottom: 56px; }

/* ── 편성 무대의 열 — 후열 · 중열 · 전열을 늘 깔고, 같은 열끼리는 ⇄ 로 자리를 바꾼다 ── */
.tm-fstands { gap: 14px; }
.tm-flane { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 150px; }
.tm-flanehero { display: flex; align-items: flex-end; gap: 0; }
.tm-flane .tm-fstand { width: 210px; }
.tm-flane .tm-fstand .art { width: 210px !important; height: 290px !important; }
.tm-flane.none .tm-flanehero { height: 290px; width: 150px; }
.tm-floor {
  display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 140px; padding: 4px 16px; border-radius: 8px;
  background: linear-gradient(180deg, #0d0b16aa, #0d0b16dd); border: 1px solid #ffffff2e; border-top: 2px solid var(--rowc, #ffffff55);
}
.tm-floor b { font-size: 14px; font-weight: 900; letter-spacing: .12em; color: var(--rowc, #fff); }
.tm-floor span { font-size: 11px; color: #b9b2d6; white-space: nowrap; }
.tm-flane.rback { --rowc: #9fc3ff; } .tm-flane.rmid { --rowc: #b7f0c8; } .tm-flane.rfront { --rowc: #ffb4a0; }
.tm-flane.none .tm-floor { opacity: .45; }
.tm-fswap {
  align-self: center; margin: 0 -14px 90px; z-index: 4; min-height: 0; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  font-size: 20px; font-weight: 900; color: #2a1a05; background: linear-gradient(180deg, #ffe7a8, #f0b94a);
  border: 1px solid #fff4; box-shadow: 0 0 14px #f0b94a88, 0 4px 10px #000a;
}
.tm-fswap:hover:not(:disabled) { transform: scale(1.1); }
/* 빈 자리 — 열 밖, 왼쪽 끝에 작게 */
.tm-fstands > .tm-fstand.empty { width: 120px; height: 290px; padding-bottom: 46px; }
.tm-fstands > .tm-fstand.empty .tm-fghost { width: 100px; height: 150px; bottom: 90px; }
.tm-fstands > .tm-fstand.empty .tm-fplus { margin-bottom: 44px; }
/* 휴대폰 */
.phone .tm-fstands { gap: 6px; }
.phone .tm-flane { min-width: 90px; gap: 4px; }
.phone .tm-flane .tm-fstand { width: 140px; }
.phone .tm-flane .tm-fstand .art { width: 140px !important; height: 180px !important; }
.phone .tm-flane.none .tm-flanehero { height: 180px; width: 80px; }
.phone .tm-floor { min-width: 80px; padding: 2px 8px; }
.phone .tm-floor b { font-size: 12px; }
.phone .tm-floor span { display: none; }
.phone .tm-fswap { width: 34px; height: 34px; min-height: 0; font-size: 17px; margin: 0 -12px 60px; }
.phone .tm-fstands > .tm-fstand.empty { width: 70px; height: 180px; padding-bottom: 30px; }
.phone .tm-fstands > .tm-fstand.empty .tm-fghost { width: 60px; height: 90px; bottom: 60px; }
.phone .tm-fstands > .tm-fstand.empty .tm-fwho { display: none; }

/* ── 편성 — 명단을 세 줄(FHD), 시작 덱은 눌러 본다 ── */
#screen.teamscreen2 { --dockh: 420px; }
.tm-fcard { height: 104px; }
.tm-froster { gap: 6px; }
.tm-fstands { bottom: 4px; }
.tm-flane .tm-fstand .art { height: 250px !important; }
.tm-flane.none .tm-flanehero { height: 250px; }
.tm-fstands > .tm-fstand.empty { height: 250px; }
.tm-fstand .tm-fplate { padding: 4px 12px; }
.tm-fswap { margin-bottom: 70px; }
.tm-fside > .tm-flabel { display: flex; align-items: center; justify-content: space-between; }
.tm-fdkbig {
  min-height: 0; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 800; letter-spacing: 0;
  background: #f6d58e1f; border: 1px solid #f6d58e88; color: #f6d58e;
}
.tm-fdkbig:hover:not(:disabled) { transform: none; background: #f6d58e33; }
button.tm-fdk { min-height: 0; color: #f4f1ff; cursor: pointer; }
button.tm-fdk:hover:not(:disabled) { transform: none; border-color: #f6d58e; background: #f6d58e14; }
/* 휴대폰은 그대로 두 줄 — 높이 540 에 무대가 있어야 한다 */
.phone #screen.teamscreen2 { --dockh: 206px; }
.phone .tm-fcard { height: 86px; }
.phone .tm-flane .tm-fstand .art { height: 180px !important; }
.phone .tm-flane.none .tm-flanehero, .phone .tm-fstands > .tm-fstand.empty { height: 180px; }
.phone .tm-fswap { margin-bottom: 60px; }

/* 「모든 열」 사도 — 이름표 밑에서 설 열을 고른다 */
.tm-frow { display: flex; gap: 3px; padding: 3px; border-radius: 99px; background: #0d0b16d9; border: 1px solid #f6d58e66; }
.tm-frowb {
  min-height: 0; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 800;
  background: transparent; border: 0; color: #b9b2d6;
}
.tm-frowb.on { background: linear-gradient(180deg, #ffe7a8, #f0b94a); color: #2a1a05; }
.tm-frowb:hover:not(:disabled):not(.on) { transform: none; color: #fff; background: #ffffff14; }
.phone .tm-frowb { padding: 2px 7px; font-size: 11px; min-height: 0; }
/* 열 고르기가 없는 사도도 같은 높이에 서게 — 이름표 줄을 맞춘다 */
.tm-flane .tm-fstand:not(:has(.tm-frow)) { padding-bottom: 34px; }
.phone .tm-flane .tm-fstand:not(:has(.tm-frow)) { padding-bottom: 26px; }

/* 성격 상성 그림 — 삼각형(광기 · 순수 · 냉정) + 세로 한 줄(활발 ↔ 우울) */
.natchart { position: relative; flex: none; margin: 2px auto 0; }
.natchart svg { position: absolute; inset: 0; overflow: visible; }
.natchart line { stroke: #f6d58e66; stroke-width: 2; }
.natchart line.hot { stroke: #f6d58e; stroke-width: 2.5; filter: drop-shadow(0 0 3px #f6d58e88); }
.natnode {
  position: absolute; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--tint) 35%, #1a1628), #0d0b16 80%);
  border: 2px solid color-mix(in srgb, var(--tint) 70%, transparent); transition: opacity .2s, box-shadow .2s;
}
.natnode.on { box-shadow: 0 0 0 2px #f6d58e, 0 0 14px color-mix(in srgb, var(--tint) 80%, transparent); }
.natnode.off { opacity: .45; }
.natnode i.natico { width: 24px; height: 24px; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 13px; }
.natnode i.natico > img { width: 100%; height: 100%; object-fit: contain; }
.natname {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 1px;
  font-size: 11px; font-weight: 800; white-space: nowrap; color: #f4f1ff; text-shadow: 0 1px 3px #000;
}
.natnode.off .natname { color: #b9b2d6; }
.natnote { font-size: 11.5px !important; margin-top: 8px !important; }
.phone .natchart, .phone .natnote { display: none; }
/* 상성 그림 크기 · 자리 — 그림이 있으니 성격 칩 줄은 휴대폰(그림을 숨기는 곳)에서만 */
.natnode { width: 40px; height: 40px; }
.natnode i.natico { width: 22px; height: 22px; }
.tm-fsyn { flex: none; overflow: visible; }
.natchart { margin: 0 auto 16px; }
.tm-fnats { display: none; }
.phone .tm-fnats { display: flex; }
.natnode.ntop .natname { top: auto; bottom: 100%; margin: 0 0 1px; }
.natchart { margin-bottom: 10px; }

/* ══ 도움말 모음 — 왼쪽 갈피, 오른쪽 글. 바깥 · Esc · 닫기로 닫는다 ══ */
.helpmodal { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; background: #05040acc; backdrop-filter: blur(3px); }
.helpbox {
  width: min(860px, calc(var(--app-w, 100vw) - 40px)); height: min(560px, calc(var(--app-h, 100vh) - 60px));
  display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; color: #f4f1ff;
  background: #0d0b16f2; border: 1px solid #f6d58e55; box-shadow: 0 20px 50px #000c;
}
.helphead { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #ffffff1f; }
.helphead b { font-size: 18px; font-weight: 900; color: #f6d58e; letter-spacing: .06em; }
.helpwrap { flex: 1; min-height: 0; display: grid; grid-template-columns: 170px minmax(0, 1fr); }
.helptabs { display: flex; flex-direction: column; gap: 4px; padding: 12px 10px; border-right: 1px solid #ffffff1a; overflow-y: auto; }
.helptab { min-height: 0; text-align: left; padding: 9px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 700; background: transparent; border: 1px solid transparent; color: #d9d2f2; }
.helptab.on { background: #f6d58e1f; border-color: #f6d58e88; color: #fff; }
.helptab:hover:not(:disabled):not(.on) { transform: none; background: #ffffff0d; }
.helppage { padding: 16px 22px; overflow-y: auto; }
.helppage h3 { margin: 0 0 12px; font-size: 20px; font-weight: 900; }
.helppage p { margin: 10px 0 0; font-size: 14px; line-height: 1.7; color: #e8e3ff; }
.helplist { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 9px; }
.helplist li { font-size: 14px; line-height: 1.65; color: #e8e3ff; }
.helppage .natchart { margin: 6px 0 18px; transform: scale(1.3); transform-origin: left top; margin-bottom: 64px; }
.tm-fsynhead { display: flex; align-items: center; justify-content: space-between; }
/* 편성 — 그림 대신 성격 칩(PC 에서도) */
.tm-fnats { display: flex; }
.phone .helpwrap { grid-template-columns: 120px minmax(0, 1fr); }
.phone .helptab { padding: 6px 8px; font-size: 12px; }
.phone .helppage { padding: 10px 14px; }
.phone .helppage .natchart { display: block; transform: none; margin-bottom: 14px; }
/* 편성 머리의 「도움말」 — 「사도 도감」 과 같은 모양 */
.tm-fhelp {
  min-height: 0; padding: 9px 16px; border-radius: 10px; font-size: 14px; font-weight: 800;
  background: #0d0b16c7; border: 1px solid #f6d58e66; color: #f6d58e; backdrop-filter: blur(4px);
}
.tm-fhelp:hover:not(:disabled) { transform: none; border-color: #f6d58e; }

/* ══ 골디의 상점 — 「골디 + 진열대」 ══════════════════════════════════════════
   왼쪽 셋째 몫에 골디(스탠딩 스파인)가 서서 말하고, 오른쪽 한 화면에 진열 여섯 칸 + 제거 · 새로고침 · 흥정.
   1600×900 에서 스크롤이 없다. 덱에서 빼기 · 가방은 위에 뜨는 창(.sh-modal).
   이름이 겹쳐 데인 적이 있어(.fcard · .top) 모두 #screen.shopscreen2 아래 · sh- 로 시작한다. */
body:has(#screen.shopscreen2) .top { display: none; }
#screen.shopscreen2 {
  --ink: #f4f1ff; --dim: #b9b2d6; --line: #ffffff1f; --gold: #f6d58e; --gold-deep: #f0b94a; --glass: #0d0b16c9;
  --cardh: 258px;
  position: fixed; inset: 0; z-index: 1; max-width: none; margin: 0; padding: 0; border-radius: 0; min-height: 0;
  height: var(--app-h, 100vh); overflow: hidden; isolation: isolate; color: var(--ink);
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: #0b0913;
}
/* 배경 — 이 층 싸움터를 흐리게 깔고, 골디 쪽에 금빛을 은은히 */
#screen.shopscreen2::before {
  content: ""; position: absolute; inset: -40px; z-index: -2; pointer-events: none;
  background: var(--stagebg, none) 50% 80% / max(115%, calc(var(--app-h, 100vh) * 1.15 * 16 / 9)) auto no-repeat;
  filter: blur(7px) saturate(.85) brightness(.55);
}
#screen.shopscreen2::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 26% 48% at 17% 64%, #f6c86a38, transparent 72%),
    linear-gradient(90deg, #120c0480 0, transparent 38%),
    linear-gradient(180deg, #0a0814e6 0, #0a081466 16%, #0a081459 62%, #0a0814e0 100%);
}

/* ① 머리 */
.sh-top { display: flex; align-items: center; gap: 14px; padding: 14px 24px 10px; }
.sh-title { display: flex; flex-direction: column; gap: 2px; margin-right: auto; min-width: 0; }
.sh-title b { font-size: 26px; font-weight: 900; letter-spacing: -.3px; color: #fff; text-shadow: 0 2px 10px #000; }
.sh-title b::before { content: "✦ "; color: var(--gold); }
.sh-title span { font-size: 13px; color: #d9d2f2; text-shadow: 0 1px 4px #000; }
.sh-gift {
  display: flex; align-items: center; gap: 8px; min-height: 0; max-width: 460px; padding: 7px 14px 7px 10px; border-radius: 99px;
  background: #2a1320cc; border: 1px solid #ffb3c877; color: #ffd9e4; font-size: 13px; font-weight: 700; backdrop-filter: blur(4px);
}
.sh-gift i { font-style: normal; color: #ff8fb0; }
.sh-gift span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-gift:hover:not(:disabled) { transform: none; border-color: #ffb3c8; }
.sh-gold {
  position: relative; display: flex; align-items: baseline; gap: 6px; padding: 7px 16px; border-radius: 99px;
  background: var(--glass); border: 1px solid #f6d58e88; color: var(--gold); backdrop-filter: blur(4px);
}
.sh-gold i { font-style: normal; font-size: 15px; }
.sh-gold b { font-size: 21px; font-weight: 900; font-variant-numeric: tabular-nums; }
.sh-gold span { font-size: 12.5px; color: #e9d3a0; }
.sh-spend {
  position: absolute; right: 12px; top: 100%; font-style: normal; font-size: 15px; font-weight: 900; color: #ff9aa8;
  text-shadow: 0 1px 4px #000; pointer-events: none; animation: sh-spend 1.2s ease-out both;
}
@keyframes sh-spend { 0% { opacity: 0; transform: translateY(-14px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(8px); } }
.sh-leave {
  min-height: 0; padding: 11px 22px; border-radius: 12px; font-size: 15px; font-weight: 900; border: 0;
  background: linear-gradient(180deg, #ffe7a8, var(--gold-deep)); color: #2a1a05; box-shadow: 0 6px 18px #0008;
}
.sh-leave:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 0 0 2px #fff6, 0 8px 22px #000a; }

/* 몸통 — 왼쪽 골디 · 오른쪽 진열대 */
.sh-main { display: grid; grid-template-columns: minmax(340px, 31%) minmax(0, 1fr); gap: 10px; padding: 0 24px 20px 10px; min-height: 0; }

/* ② 골디 */
.sh-goldy { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 0; }
.sh-bubble {
  position: relative; z-index: 2; max-width: 420px; margin: 0 16px -34px; padding: 12px 18px 14px; border-radius: 18px;
  background: linear-gradient(180deg, #fffaf0, #f7ecd2); color: #2a1f0a; border: 2px solid var(--gold);
  box-shadow: 0 10px 26px #000a, 0 0 0 4px #f6d58e22; transform-origin: 50% 100%;
}
.sh-bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -11px; width: 18px; height: 18px; margin-left: -9px;
  background: #f7ecd2; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg);
}
.sh-bubble b { display: inline-block; margin-bottom: 3px; font-size: 12px; font-weight: 900; letter-spacing: .08em; color: #a0660c; }
.sh-line { margin: 0; font-size: 15px; line-height: 1.6; font-weight: 600; word-break: keep-all; }
.sh-bubble.pop { animation: sh-pop .28s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes sh-pop { 0% { transform: scale(.94); } 100% { transform: scale(1); } }
.sh-stand {
  position: relative; flex: none; width: 100%; max-width: 540px; aspect-ratio: 666 / 640; min-height: 0; padding: 0; margin: 0;
  border: 0; border-radius: 0; background: transparent; cursor: pointer; display: grid; place-items: center;
}
.sh-stand:hover:not(:disabled) { transform: none; border: 0; }
.sh-stand:focus-visible { outline: 2px dashed #f6d58e99; outline-offset: -6px; border-radius: 20px; }
/* 발밑 — 금빛 받침 그림자 */
.sh-stand::before {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: 0; height: 10%; z-index: -1; border-radius: 50%;
  background: radial-gradient(ellipse at center, #f6d58e55, #f6d58e10 55%, transparent 72%);
}
.sh-stand canvas { position: absolute; inset: 0; }
.sh-emblem {
  width: 46%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: 96px; color: var(--gold);
  background: radial-gradient(circle at 40% 35%, #3b2c10, #140f06 75%); border: 2px solid #f6d58e88; box-shadow: 0 0 60px #f6d58e33;
}
.sh-stand.live .sh-emblem { display: none; }
.sh-plate { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-top: 2px; text-shadow: 0 1px 4px #000; }
.sh-plate b { font-size: 17px; font-weight: 900; color: var(--gold); letter-spacing: .1em; }
.sh-plate span { font-size: 12px; color: var(--dim); }

/* ③ 진열대 */
.sh-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
.sh-shelf { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.sh-row {
  flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 16px; border-radius: 16px;
  background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(6px);
  /* 진열대 선반 — 아래 금선 */
  box-shadow: inset 0 -3px 0 #f6d58e55, 0 14px 30px #0008;
}
.sh-rowhead { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.sh-rowhead b { flex: none; font-size: 16px; font-weight: 900; color: #fff; padding-left: 9px; border-left: 3px solid var(--gold); }
.sh-rowhead span { font-size: 12.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-slots { flex: 1; min-height: 0; display: flex; gap: 14px; }
.sh-none { margin: auto; color: var(--dim); font-size: 13px; }
.sh-slot { position: relative; flex: 1 1 0; min-width: 0; min-height: 0; border-radius: 12px; }
.sh-shelf.fresh .sh-slot { animation: sh-rise .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes sh-rise { 0% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: none; } }

/* 중립 카드 칸 — 카드 + 옆에 등급 · 한 줄 · 값 */
.sh-cardslot {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 10px 8px 8px;
  background: linear-gradient(180deg, #ffffff0d, #ffffff04); border: 1px solid #ffffff14;
}
.sh-cardbox .gcard { width: calc(var(--cardh) * 158 / 232); box-shadow: 0 10px 22px #000a; cursor: zoom-in; transition: transform .15s, box-shadow .15s; }
.sh-cardbox .gcard:hover { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--gold), 0 14px 28px #000c; }
.sh-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; align-self: stretch; padding: 4px 0; }
.sh-grade { align-self: flex-start; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 99px; background: #ffffff14; color: #d9d2f2; }
.sh-grade.g-전설 { background: #f6d58e26; color: #f6d58e; } .sh-grade.g-희귀 { background: #a592ff26; color: #c3b6ff; }
.sh-grade.g-고급 { background: #7fd3a826; color: #9fe3b4; } .sh-grade.g-일반 { color: #d9d2f2; }
.sh-blurb {
  margin: 0; font-size: 12.5px; line-height: 1.6; color: #d9d2f2; word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}

/* 장비 칸 — 장비 카드(어두운 유리) + 값 */
.sh-equipslot { display: flex; flex-direction: column; gap: 8px; }
#screen.shopscreen2 .ecard {
  width: auto; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #f6d58e55 transparent;
  background: #0d0b16d9; border: 1px solid #ffffff1f; border-top-width: 4px; color: var(--ink); box-shadow: 0 10px 22px #0009;
}
#screen.shopscreen2 .ecard.g-전설 { border-top-color: #d9a441; } #screen.shopscreen2 .ecard.g-희귀 { border-top-color: #7a6be0; }
#screen.shopscreen2 .ecard.g-고급 { border-top-color: #3aa37a; } #screen.shopscreen2 .ecard.g-일반 { border-top-color: #9aa0b4; }
#screen.shopscreen2 .eqstat { color: #9fe3b4; }
#screen.shopscreen2 .eaff { color: #ffb3c8; }
#screen.shopscreen2 :is(.eslot, .eoff) { background: #ffffff14; color: var(--dim); }
#screen.shopscreen2 :is(.egrade, .eblurb, .eeff) { color: var(--dim); }
#screen.shopscreen2 .eeff.on { color: #e8e3ff; }
.sh-equipslot .eblurb { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sh-equipslot.delivery .ecard { border-color: #ffb3c866; }
.sh-ribbon {
  position: absolute; top: -9px; right: 12px; z-index: 2; padding: 2px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 900;
  background: linear-gradient(180deg, #ffc2d4, #ff8fb0); color: #3a0c1c; box-shadow: 0 3px 10px #0008;
}

/* 사는 단추 — 금빛. 모자라면 흐리게 */
.sh-buy {
  flex: none; margin-top: auto; min-height: 42px; padding: 8px 12px; border-radius: 10px; border: 0;
  font-size: 16px; font-weight: 900; letter-spacing: .02em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffe7a8, var(--gold-deep)); color: #2a1a05; box-shadow: 0 4px 12px #0007, inset 0 1px 0 #fff8;
}
.sh-buy:hover:not(:disabled) { transform: translateY(-1px); border: 0; box-shadow: 0 0 0 2px #fff5, 0 6px 16px #000a; }
.sh-buy.short { background: #2a2540; color: #9a92ba; box-shadow: inset 0 0 0 1px #ffffff1f; }
.sh-buy:disabled { opacity: 1; background: transparent; color: var(--dim); box-shadow: inset 0 0 0 1px #ffffff26; }
/* 팔린 칸 — 흐리게, 도장 */
.sh-slot.sold > :not(.sh-stamp) { filter: grayscale(.85) brightness(.6); opacity: .55; }
.sh-slot.sold .sh-cardbox .gcard:hover { transform: none; box-shadow: 0 10px 22px #000a; }
.sh-stamp {
  position: absolute; left: 50%; top: 44%; z-index: 3; transform: translate(-50%, -50%) rotate(-8deg); pointer-events: none;
  padding: 6px 16px; border-radius: 8px; border: 2px solid var(--gold); background: #0d0b16e6; color: var(--gold);
  font-size: 17px; font-weight: 900; letter-spacing: .12em; white-space: nowrap; box-shadow: 0 6px 18px #000c;
}

/* 할 일 — 카드 제거 · 새로고침 · 가방 · 깎아 주세요 */
.sh-acts { flex: none; display: flex; gap: 12px; }
.sh-act {
  flex: 1 1 0; min-width: 0; min-height: 0; display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-radius: 14px; text-align: left;
  background: var(--glass); border: 1px solid #ffffff2e; color: var(--ink); backdrop-filter: blur(6px); box-shadow: 0 10px 24px #0008;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.sh-act:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 12px 26px #000a; }
.sh-act:disabled { opacity: .45; }
.sh-acttx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sh-acttx b { font-size: 16px; font-weight: 900; color: #fff; }
.sh-acttx span { font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-actprice {
  margin-left: auto; flex: none; font-style: normal; font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums;
  padding: 5px 12px; border-radius: 99px; background: #f6d58e1f; border: 1px solid #f6d58e77; color: var(--gold);
}
.sh-act.short .sh-actprice { background: transparent; border-color: #ffffff26; color: #9a92ba; }
.sh-haggle { flex: 0 1 auto; }
.sh-haggle .sh-actprice { background: transparent; border-style: dashed; color: #e9d3a0; }
.sh-bag { flex: 0 1 auto; }
.sh-bag.new { border-color: var(--gold); animation: sh-glow 1.4s ease-in-out infinite; }
@keyframes sh-glow { 50% { box-shadow: 0 0 0 2px #f6d58e, 0 0 22px #f6d58e88, 0 10px 24px #0008; } }

/* ④ 위에 뜨는 창 — 덱에서 빼기 · 가방 */
.sh-modal { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: #05040acc; backdrop-filter: blur(3px); animation: sh-fade .16s ease-out both; }
@keyframes sh-fade { from { opacity: 0; } }
.sh-sheet {
  width: min(1120px, calc(100% - 60px)); max-height: calc(100% - 60px); display: flex; flex-direction: column; overflow: hidden;
  border-radius: 16px; background: #0d0b16f2; border: 1px solid #f6d58e55; box-shadow: 0 20px 50px #000c;
}
.sh-sheethead { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #ffffff1f; }
.sh-sheethead > div { display: flex; flex-direction: column; gap: 2px; margin-right: auto; min-width: 0; }
.sh-sheethead b { font-size: 18px; font-weight: 900; color: var(--gold); }
.sh-sheethead span { font-size: 13px; color: var(--dim); }
.sh-close { min-height: 0; padding: 8px 16px; border-radius: 10px; font-size: 14px; font-weight: 800; background: #ffffff12; border: 1px solid #ffffff2e; color: var(--ink); }
.sh-close:hover:not(:disabled) { transform: none; border-color: var(--gold); }
.sh-sheetbody { min-height: 0; overflow-y: auto; padding: 16px 18px 20px; }
.sh-deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 14px; }
.sh-deckcard .gcard { width: 100%; cursor: pointer; box-shadow: 0 8px 18px #000a; transition: transform .12s, box-shadow .12s; }
.sh-deckcard .gcard:hover { transform: translateY(-4px); box-shadow: 0 0 0 2px #ff9aa8, 0 0 18px #ff9aa866, 0 12px 24px #000c; }
/* 가방 — gearPanel 을 어두운 유리로 */
.sh-bagbody .gearpanel { margin: 0; }
.sh-bagbody .grow { background: #ffffff08; border-color: #ffffff1f; color: var(--ink); }
.sh-bagbody .gwho .art { background: #1a1628; }
.sh-bagbody .gslot { background: #ffffff0a; border-color: #ffffff2e; color: #d9d2f2; }
.sh-bagbody .gslot.full { background: #0d0b16d1; border-color: #ffffff26; color: var(--ink); }
.sh-bagbody :is(.gsl, .gempty, .gbagh, .rnone) { color: var(--dim); }
.sh-bagbody .gst { color: #9fe3b4; }
.sh-bagbody .gbag { display: flex; flex-wrap: wrap; gap: 12px; }
#screen.shopscreen2 .sh-bagbody .ecard { width: 250px; flex: none; overflow: visible; }
.sh-bagbody .gtobtn { background: #ffffff1a; color: #fff; }
.sh-bagbody .gtobtn.aff { background: #b0406a; }
.sh-bagbody .gtobtn:disabled { background: #ffffff0a; color: #7d7699; }

/* ── 휴대폰(540 높이) — 골디는 작게, 진열대는 옆으로 민다 ── */
.phone #screen.shopscreen2 { --cardh: 244px; }
.phone .sh-top { padding: 8px 14px 6px; gap: 10px; }
.phone .sh-title b { font-size: 20px; }
.phone .sh-title span { display: none; }
.phone .sh-gift { max-width: 260px; padding: 5px 12px 5px 9px; font-size: 12px; }
.phone .sh-gold { padding: 5px 12px; }
.phone .sh-gold b { font-size: 18px; }
.phone .sh-leave { padding: 10px 16px; font-size: 14px; min-height: 44px; }
.phone .sh-main { grid-template-columns: 236px minmax(0, 1fr); gap: 8px; padding: 0 12px 10px 4px; }
.phone .sh-bubble { margin: 0 4px -16px; padding: 8px 12px 10px; border-radius: 14px; }
.phone .sh-bubble b { font-size: 11px; margin-bottom: 1px; }
.phone .sh-line { font-size: 12.5px; line-height: 1.5; }
.phone .sh-plate b { font-size: 14px; }
.phone .sh-plate span { display: none; }
.phone .sh-emblem { font-size: 56px; }
.phone .sh-right { gap: 8px; }
/* 진열대는 한 줄 — 카드 셋 · 장비 셋이 옆으로 이어진다. 넘치면 손가락으로 민다 */
.phone .sh-shelf { flex-direction: row; gap: 10px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #f6d58e66 transparent; }
.phone .sh-row { flex: none; padding: 8px 10px 12px; gap: 6px; scroll-snap-align: start; }
.phone .sh-rowhead b { font-size: 14px; }
.phone .sh-rowhead span { display: none; }
.phone .sh-slots { gap: 10px; }
.phone .sh-slot { flex: none; }
.phone .sh-cardslot { grid-template-columns: auto; grid-template-rows: auto minmax(0, 1fr); gap: 6px; align-items: start; padding: 6px; }
.phone .sh-info { gap: 6px; padding: 0; }
.phone .sh-grade { font-size: 11px; padding: 2px 8px; }
.phone .sh-blurb { display: none; }
.phone .sh-buy { min-height: 44px; font-size: 15px; }
.phone .sh-equipslot { width: 236px; }
.phone #screen.shopscreen2 .ecard { padding: 9px 10px; gap: 4px; }
.phone .sh-stamp { font-size: 14px; padding: 4px 12px; }
.phone .sh-acts { gap: 8px; }
.phone .sh-act { padding: 6px 12px; min-height: 48px; gap: 8px; border-radius: 12px; }
.phone .sh-acttx b { font-size: 14px; }
.phone .sh-acttx span { display: none; }
.phone .sh-actprice { font-size: 13px; padding: 3px 9px; }
.phone .sh-sheet { width: calc(100% - 24px); max-height: calc(100% - 20px); }
.phone .sh-sheethead { padding: 8px 12px; }
.phone .sh-sheethead b { font-size: 16px; }
.phone .sh-sheethead span { font-size: 12px; }
.phone .sh-close { min-height: 40px; }
.phone .sh-sheetbody { padding: 10px 12px 14px; }
.phone .sh-deck { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.phone #screen.shopscreen2 .sh-bagbody .ecard { width: 220px; }

@media (prefers-reduced-motion: reduce) {
  .sh-shelf.fresh .sh-slot, .sh-bubble.pop, .sh-bag.new, .sh-spend, .sh-modal { animation: none; }
}

/* 번뜩임(은총 · 신탁) 창에서 여는 덱 보기 — 번뜩임 창(z 90) 위에 */
.pilemodal.onepi { z-index: 96; }
.epideck {
  margin-top: 14px; min-height: 0; padding: 8px 18px; border-radius: 99px; font-size: 13px; font-weight: 800;
  background: #0d0b16cc; border: 1px solid #f6d58e88; color: #f6d58e;
}
.epideck:hover:not(:disabled) { transform: none; border-color: #f6d58e; background: #1a1628; }

/* ══ 캠프 — 「모닥불 + 고를 것」 ══════════════════════════════════════════════
   왼쪽 무대에 파티 셋이 모닥불을 둘러 서고(전투 SD 스파인), 발밑에 HP 줄 · 쉬면 찰 만큼(밝은 칸).
   오른쪽에 쉬기 · 수련 두 장, 그 아래 장비 · 골디의 좌판. 1600×900 에서 스크롤이 없다.
   신탁 고르기 · 장비는 위에 뜨는 창(.cp-modal). 이름이 겹치지 않게 모두 #screen.campscreen2 아래 · cp- 로 시작한다
   (.fcard · .ecard · gearPanel 은 남의 이름이라 #screen.campscreen2 아래에서만 칠한다). */
body:has(#screen.campscreen2) .top { display: none; }
#screen.campscreen2 {
  --ink: #f4f1ff; --dim: #b9b2d6; --line: #ffffff1f; --gold: #f6d58e; --gold-deep: #f0b94a; --glass: #0d0b16c9;
  --ember: #ff9a4a; --hpc: #5fcf93; --hpadd: #b8f7cf;
  --sidew: 500px; --artw: 250px; --arth: 330px; --platew: 214px;
  --spread: 350px; --frontb: 64px; --backb: 262px; --fireb: 30px; --fires: 1.18;
  position: fixed; inset: 0; z-index: 1; max-width: none; margin: 0; padding: 0; border-radius: 0; min-height: 0;
  height: var(--app-h, 100vh); overflow: hidden; isolation: isolate; color: var(--ink);
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: #0b0913;
}
/* 배경 — 이 층 싸움터를 흐리게, 해 진 뒤처럼 어둡게. 모닥불 쪽에 불빛 */
#screen.campscreen2::before {
  content: ""; position: absolute; inset: -40px; z-index: -2; pointer-events: none;
  background: var(--stagebg, none) 50% 80% / max(115%, calc(var(--app-h, 100vh) * 1.15 * 16 / 9)) auto no-repeat;
  filter: blur(6px) saturate(.7) brightness(.42) sepia(.25);
}
#screen.campscreen2::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 34% 40% at 34% 84%, #ff8a3a30, transparent 70%),
    radial-gradient(ellipse 60% 30% at 34% 100%, #ffb56a1c, transparent 70%),
    linear-gradient(180deg, #07060ef0 0, #07060e80 18%, #07060e66 60%, #07060ed9 100%);
}

/* ① 머리 */
.cp-top { display: flex; align-items: center; gap: 14px; padding: 14px 24px 10px; }
.cp-title { display: flex; flex-direction: column; gap: 2px; margin-right: auto; min-width: 0; }
.cp-title b { font-size: 26px; font-weight: 900; letter-spacing: -.3px; color: #fff; text-shadow: 0 2px 10px #000; }
.cp-title b::before { content: "✦ "; color: var(--gold); }
.cp-title span { font-size: 13px; color: #d9d2f2; text-shadow: 0 1px 4px #000; }
.cp-gold {
  display: flex; align-items: baseline; gap: 6px; padding: 7px 16px; border-radius: 99px;
  background: var(--glass); border: 1px solid #f6d58e88; color: var(--gold); backdrop-filter: blur(4px);
}
.cp-gold i { font-style: normal; font-size: 15px; }
.cp-gold b { font-size: 21px; font-weight: 900; font-variant-numeric: tabular-nums; }
.cp-gold span { font-size: 12.5px; color: #e9d3a0; }
.cp-leave {
  min-height: 0; padding: 11px 22px; border-radius: 12px; font-size: 15px; font-weight: 900; border: 0;
  background: linear-gradient(180deg, #ffe7a8, var(--gold-deep)); color: #2a1a05; box-shadow: 0 6px 18px #0008;
}
.cp-leave:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 0 0 2px #fff6, 0 8px 22px #000a; }

/* 몸통 — 왼쪽 무대 · 오른쪽 고를 것 */
.cp-main { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidew); gap: 16px; padding: 0 24px 20px; min-height: 0; }

/* ② 무대 */
.cp-stage { position: relative; min-width: 0; min-height: 0; }
/* 발밑 — 불빛이 닿는 둥근 땅 */
.cp-stage::before {
  content: ""; position: absolute; left: 50%; bottom: 0; width: min(100%, 980px); height: 44%; transform: translateX(-50%); z-index: 0;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse 50% 42% at 50% 78%, #ff9a4a26, #ff9a4a0a 55%, transparent 72%);
}
.cp-line {
  position: absolute; left: 50%; top: 8px; z-index: 5; transform: translateX(-50%); width: max-content; max-width: calc(100% - 40px);
  margin: 0; padding: 9px 20px; border-radius: 99px; text-align: center; word-break: keep-all;
  font-size: 14.5px; font-weight: 600; color: #fbeccb; background: #0d0b16b8; border: 1px solid #f6d58e44; backdrop-filter: blur(4px);
  box-shadow: 0 8px 22px #0008;
}
.cp-line:empty { display: none; }
.cp-line.pop { animation: cp-pop .3s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes cp-pop { 0% { transform: translateX(-50%) scale(.95); opacity: .4; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } }

/* 모닥불 — 장작 둘 · 불꽃 넷 · 불똥. 쉬면 한 번 확 인다(.flare) */
.cp-fire {
  position: absolute; left: 50%; bottom: var(--fireb); z-index: 3; width: 220px; height: 200px; pointer-events: none;
  transform: translateX(-50%) scale(var(--fires)); transform-origin: 50% 100%;
}
.cp-glow {
  position: absolute; left: -230px; right: -230px; top: -170px; bottom: -70px; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, #ffb0503d, #ff7a2a1a 45%, transparent 100%);
  mix-blend-mode: screen; animation: cp-breathe 2.6s ease-in-out infinite;
}
@keyframes cp-breathe { 0%, 100% { opacity: .85; transform: scale(1); } 40% { opacity: 1; transform: scale(1.04); } 70% { opacity: .75; transform: scale(.98); } }
.cp-logs { position: absolute; left: 22px; right: 22px; bottom: 6px; height: 40px; }
.cp-logs::before, .cp-logs::after {
  content: ""; position: absolute; left: 6px; right: 6px; top: 12px; height: 20px; border-radius: 10px;
  background: linear-gradient(180deg, #c8662a 0, #6a3316 30%, #3a1c0c 75%, #1c0d05);
  box-shadow: inset 0 2px 0 #ffb56a66, 0 6px 12px #000b;
}
.cp-logs::before { transform: rotate(13deg); }
.cp-logs::after { transform: rotate(-13deg); }
.cp-flames { position: absolute; left: 50%; bottom: 26px; width: 150px; height: 170px; transform: translateX(-50%); mix-blend-mode: screen; filter: blur(.6px); }
.cp-flame {
  position: absolute; left: 50%; bottom: 0; transform-origin: 50% 100%;
  border-radius: 50% 50% 46% 46% / 64% 64% 36% 36%;
  animation: cp-lick 1.1s ease-in-out infinite alternate;
}
.cp-flame.f0 { width: 116px; height: 150px; margin-left: -58px; background: radial-gradient(ellipse 50% 60% at 50% 78%, #ff7a2add, #e2401a88 52%, transparent 74%); animation-duration: 1.3s; }
.cp-flame.f1 { width: 76px; height: 124px; margin-left: -62px; background: radial-gradient(ellipse 50% 60% at 50% 78%, #ffab3ce6, #ff6a1a77 55%, transparent 76%); animation-duration: .9s; animation-delay: -.3s; }
.cp-flame.f2 { width: 70px; height: 112px; margin-left: -6px; background: radial-gradient(ellipse 50% 60% at 50% 78%, #ffb54ae6, #ff6a1a77 55%, transparent 76%); animation-duration: 1s; animation-delay: -.6s; }
.cp-flame.f3 { width: 50px; height: 86px; margin-left: -25px; bottom: 2px; background: radial-gradient(ellipse 50% 60% at 50% 80%, #fffbe0, #ffe08acc 38%, #ffb54a55 62%, transparent 78%); animation-duration: .7s; }
@keyframes cp-lick {
  0% { transform: scale(1, 1) skewX(0deg); }
  35% { transform: scale(.94, 1.08) skewX(-3deg); }
  70% { transform: scale(1.04, .95) skewX(3deg); }
  100% { transform: scale(.97, 1.05) skewX(-1deg); }
}
.cp-embers { position: absolute; left: 50%; bottom: 70px; width: 0; height: 0; }
.cp-embers i {
  position: absolute; left: calc((var(--e) - 4) * 9px); bottom: 0; width: 3px; height: 3px; border-radius: 50%;
  background: #ffd98a; box-shadow: 0 0 6px 1px #ff9a4a;
  animation: cp-ember 2.8s linear infinite; animation-delay: calc(var(--e) * -.37s);
}
.cp-embers i:nth-child(3n) { animation-duration: 3.4s; width: 2px; height: 2px; }
.cp-embers i:nth-child(2n) { --dx: -22px; }
@keyframes cp-ember {
  0% { opacity: 0; transform: translate(0, 0); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 26px), -230px); }
}
.cp-fire.flare .cp-flames { animation: cp-flare 1s cubic-bezier(.2, .8, .2, 1); }
.cp-fire.flare .cp-glow { animation: cp-flareglow 1.2s ease-out; }
@keyframes cp-flare { 0% { transform: translateX(-50%) scale(1); } 30% { transform: translateX(-50%) scale(1.35, 1.5); } 100% { transform: translateX(-50%) scale(1); } }
@keyframes cp-flareglow { 0% { opacity: 1; transform: scale(1); } 30% { opacity: 1; transform: scale(1.3); filter: brightness(1.6); } 100% { opacity: .85; transform: scale(1); } }

/* 사도 — 불을 둘러 선다. 가운데(p1)는 불 너머 조금 뒤에 */
.cp-hero {
  position: absolute; bottom: var(--frontb); left: 50%; z-index: 4; width: var(--artw);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transform: translateX(calc(-50% + var(--x, 0px))); animation: cp-heroin .5s ease-out both;
}
.cp-hero.p0 { --x: calc(var(--spread) * -1); }
.cp-hero.p1 { bottom: var(--backb); z-index: 2; animation-delay: .08s; }
.cp-hero.p2 { --x: var(--spread); animation-delay: .16s; }
@keyframes cp-heroin { from { opacity: 0; transform: translateX(calc(-50% + var(--x, 0px))) translateY(14px); } }
.cp-hero .art { width: var(--artw) !important; height: var(--arth) !important; position: relative; }
.cp-hero .art::after {
  content: ""; position: absolute; left: 16%; right: 16%; bottom: 0; height: 9%; z-index: -1;
  border-radius: 50%; background: radial-gradient(closest-side, #000c, transparent);
}
/* 불빛이 몸에 닿는다 — 불 쪽으로 따뜻하게 */
.cp-hero .art canvas, .cp-hero .art img { filter: drop-shadow(0 0 14px #ff9a4a33) sepia(.12) saturate(1.05); }
.cp-hero.down .art { filter: grayscale(1) brightness(.55); opacity: .6; }
.cp-plate {
  width: var(--platew); display: flex; flex-direction: column; gap: 5px; padding: 7px 12px 9px; border-radius: 12px;
  background: #0d0b16d4; border: 1px solid #ffffff26; backdrop-filter: blur(4px); box-shadow: 0 8px 20px #0009;
}
.cp-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.cp-name b { font-size: 15.5px; font-weight: 900; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-num { margin-left: auto; flex: none; font-size: 12.5px; font-weight: 700; color: #d9d2f2; font-variant-numeric: tabular-nums; white-space: pre; }
.cp-hero.down .cp-num { color: #ffb3c8; font-weight: 600; }
.cp-hp { position: relative; height: 10px; border-radius: 99px; background: #07060c; box-shadow: inset 0 0 0 1px #ffffff1f; overflow: hidden; }
.cp-fill {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px;
  background: linear-gradient(180deg, #8ef0b6, var(--hpc) 60%, #3a9c68); transition: width .9s cubic-bezier(.2, .8, .2, 1);
}
.cp-add {
  position: absolute; top: 0; bottom: 0; border-radius: 0 99px 99px 0;
  background: repeating-linear-gradient(-45deg, var(--hpadd) 0 4px, #b8f7cf88 4px 8px);
  animation: cp-addpulse 1.6s ease-in-out infinite; transition: width .4s, left .9s cubic-bezier(.2, .8, .2, 1);
}
@keyframes cp-addpulse { 50% { opacity: .45; } }
/* 쉬기에 손을 대면 찰 몫이 또렷해진다 */
#screen.campscreen2:has(.cp-rest:hover:not(:disabled)) .cp-add { animation: none; opacity: 1; box-shadow: 0 0 10px #b8f7cf; }
#screen.campscreen2:has(.cp-rest:hover:not(:disabled)) .cp-num { color: #c9f8da; }
.cp-float {
  position: absolute; left: 50%; top: 34%; z-index: 6; transform: translateX(-50%); pointer-events: none;
  font-size: 30px; font-weight: 900; color: #b8f7cf; text-shadow: 0 0 12px #3a9c68, 0 2px 4px #000;
  animation: cp-float 1.6s ease-out both;
}
@keyframes cp-float { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.8); } 18% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -60px) scale(1); } }

/* ③ 오른쪽 */
.cp-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 0; }
.cp-sidehead { flex: none; display: flex; flex-direction: column; gap: 2px; padding: 2px 4px 0; }
.cp-sidehead b { font-size: 17px; font-weight: 900; color: var(--gold); padding-left: 10px; border-left: 3px solid var(--gold); }
.cp-sidehead span { font-size: 12.5px; color: var(--dim); padding-left: 13px; }
.cp-choices { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.cp-choice {
  position: relative; flex: 1 1 0; min-height: 0; display: flex; align-items: center; gap: 18px; padding: 20px 22px; border-radius: 18px;
  text-align: left; overflow: hidden; color: var(--ink);
  background: linear-gradient(135deg, #1d1522e6, #0d0b16e0 60%); border: 1px solid #ffffff2e; backdrop-filter: blur(6px);
  box-shadow: inset 0 -3px 0 #f6d58e33, 0 14px 30px #0009; transition: transform .14s, border-color .14s, box-shadow .14s;
}
/* 카드 안쪽 — 불빛이 번진 자리 */
.cp-choice::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 60% 90% at 0% 50%, #ff9a4a1f, transparent 70%);
}
.cp-train::before { background: radial-gradient(ellipse 60% 90% at 0% 50%, #a592ff26, transparent 70%); }
.cp-choice:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 26px #f6d58e33, 0 16px 32px #000b; }
.cp-choice:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cp-choice:disabled { opacity: 1; cursor: default; }
.cp-cicon {
  flex: none; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
  font-size: 32px; color: var(--gold); border: 1px solid #f6d58e88;
  background: radial-gradient(circle at 40% 35%, #4a2c12, #160d06 75%); box-shadow: 0 0 24px #ff9a4a33;
}
.cp-rest .cp-cicon::before { content: "☾"; }
.cp-train .cp-cicon { background: radial-gradient(circle at 40% 35%, #2e2450, #0f0b1c 75%); box-shadow: 0 0 24px #a592ff33; }
.cp-train .cp-cicon::before { content: "✦"; }
.cp-cbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cp-cbody b { font-size: 30px; font-weight: 900; letter-spacing: .02em; color: #fff; }
.cp-csub { font-size: 14px; line-height: 1.55; color: #d9d2f2; word-break: keep-all; }
.cp-gain {
  align-self: flex-start; margin-top: 4px; font-style: normal; font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums;
  padding: 4px 12px; border-radius: 99px; background: #5fcf9322; border: 1px solid #5fcf9377; color: #b8f7cf;
}
.cp-gain:empty { display: none; }
.cp-mini { flex: none; pointer-events: none; transform: rotate(4deg); }
.cp-mini .gtext { display: none; }
.cp-mini .gcard { width: 118px; box-shadow: 0 0 0 2px #f6d58e99, 0 0 18px #f6d58e44, 0 10px 22px #000a; }
.cp-stamp { position: absolute; right: 16px; top: 14px; z-index: 2; font-size: 12.5px; font-weight: 900; padding: 4px 12px; border-radius: 99px; pointer-events: none; }
.cp-stamp:empty { display: none; }
/* 고른 것 — 금테 · 도장 */
.cp-choice.on { border-color: var(--gold); background: linear-gradient(135deg, #2e2410f0, #15100ae6 60%); box-shadow: 0 0 0 1px var(--gold), 0 0 30px #f6d58e2e, 0 14px 30px #0009; }
.cp-choice.on .cp-stamp { background: linear-gradient(180deg, #ffe7a8, var(--gold-deep)); color: #2a1a05; }
.cp-choice.on .cp-stamp::before { content: "✓ "; }
/* 못 고르는 것 — 흐리게, 까닭은 또렷이 */
.cp-choice.off > :not(.cp-stamp) { opacity: .38; filter: grayscale(.85); }
.cp-choice.off .cp-stamp { background: #0d0b16f0; border: 1px dashed #ffffff55; color: #f4f1ff; }

/* 선택을 쓰지 않는 것 — 장비 · 골디의 좌판 */
.cp-extra { flex: none; display: flex; flex-direction: column; gap: 12px; }
.cp-gear, .cp-shop {
  position: relative; min-height: 0; display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-radius: 14px; text-align: left;
  color: var(--ink); background: var(--glass); border: 1px solid #ffffff2e; backdrop-filter: blur(6px); box-shadow: 0 10px 24px #0008;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.cp-gear:hover:not(:disabled), .cp-shop:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 12px 26px #000a; }
.cp-gicon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-size: 22px; color: var(--gold); background: #f6d58e14; border: 1px solid #f6d58e55; }
.cp-gear.new .cp-gicon { animation: cp-gearglow 1.6s ease-in-out infinite; }
@keyframes cp-gearglow { 50% { box-shadow: 0 0 0 2px #f6d58e88, 0 0 16px #f6d58e66; } }
.cp-xtx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-xtx b { font-size: 16.5px; font-weight: 900; color: #fff; }
.cp-xtx span { font-size: 12.5px; color: var(--dim); word-break: keep-all; }
.cp-free {
  margin-left: auto; flex: none; font-style: normal; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 99px;
  background: transparent; border: 1px dashed #ffffff40; color: #d9d2f2; white-space: nowrap;
}
/* 좌판 — 골디가 오른쪽에서 고개를 내민다 */
.cp-shop { min-height: 120px; padding-right: 170px; overflow: hidden; background: linear-gradient(90deg, #0d0b16e6 40%, #2a1e0ae0); border-color: #f6d58e66; }
.cp-shop .cp-xtx b { color: var(--gold); }
.cp-shop { flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; }
.cp-shop .cp-free { margin: 0; border-style: solid; border-color: #f6d58e77; background: #f6d58e1f; color: var(--gold); font-size: 13px; font-variant-numeric: tabular-nums; }
.cp-goldy {
  position: absolute; right: -18px; top: -4px; width: 210px; aspect-ratio: 666 / 640; pointer-events: none; display: grid; place-items: start center;
}
.cp-goldy::before {
  content: ""; position: absolute; inset: 10% 8% 20%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, #f6d58e33, transparent);
}
.cp-goldy canvas { position: absolute; inset: 0; }
.cp-gemblem {
  margin-top: 18px; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font-size: 36px; color: var(--gold);
  background: radial-gradient(circle at 40% 35%, #3b2c10, #140f06 75%); border: 2px solid #f6d58e88; box-shadow: 0 0 30px #f6d58e33;
}
.cp-goldy.live .cp-gemblem { display: none; }

/* ④ 위에 뜨는 창 — 신탁 · 장비 */
.cp-modal { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: #05040acc; backdrop-filter: blur(3px); animation: cp-fade .16s ease-out both; }
@keyframes cp-fade { from { opacity: 0; } }
.cp-sheet {
  width: min(1240px, calc(100% - 60px)); max-height: calc(100% - 60px); display: flex; flex-direction: column; overflow: hidden;
  border-radius: 16px; background: #0d0b16f2; border: 1px solid #f6d58e55; box-shadow: 0 20px 50px #000c;
  animation: cp-rise .22s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes cp-rise { from { transform: translateY(12px); opacity: .6; } }
.cp-sheethead { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #ffffff1f; }
.cp-sheethead > div { display: flex; flex-direction: column; gap: 2px; margin-right: auto; min-width: 0; }
.cp-sheethead b { font-size: 18px; font-weight: 900; color: var(--gold); }
.cp-sheethead span { font-size: 13px; color: var(--dim); }
.cp-close { min-height: 0; padding: 8px 16px; border-radius: 10px; font-size: 14px; font-weight: 800; background: #ffffff12; border: 1px solid #ffffff2e; color: var(--ink); }
.cp-close:hover:not(:disabled) { transform: none; border-color: var(--gold); }
.cp-sheetbody { min-height: 0; overflow-y: auto; padding: 20px 22px 24px; scrollbar-width: thin; scrollbar-color: #f6d58e55 transparent; }
/* 신탁 — 붙을 카드 + 셋 */
.cp-flash { display: flex; align-items: stretch; justify-content: center; gap: 18px; }
.cp-flash .ftarget { justify-content: center; padding-right: 8px; }
#screen.campscreen2 .cp-flash .fcard {
  width: 300px; flex: none; min-height: 0; text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 14px;
  background: linear-gradient(180deg, #1c1830f0, #0d0b16f0); border: 1px solid #ffffff2e; color: var(--ink); box-shadow: 0 10px 24px #0009;
  transition: transform .14s, border-color .14s, box-shadow .14s;
}
#screen.campscreen2 .cp-flash .fcard:hover:not(:disabled) { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 24px #f6d58e33, 0 14px 28px #000b; }
#screen.campscreen2 .cp-flash .fnum { font-size: 18px; color: var(--gold); }
#screen.campscreen2 .cp-flash .fhead2 b { font-size: 15px; color: #fff; }
#screen.campscreen2 .cp-flash .fko { color: var(--dim); font-size: 12.5px; }
#screen.campscreen2 .cp-flash .ftext2 { font-size: 14px; line-height: 1.7; color: #ece8ff; }
#screen.campscreen2 .cp-flash .fbefore { color: var(--dim); border-top-color: #ffffff26; font-size: 12px; }
/* 장비 — gearPanel 을 어두운 유리로 */
.cp-gearbody .gearpanel { margin: 0; }
.cp-gearbody .grow { background: #ffffff08; border-color: #ffffff1f; color: var(--ink); }
.cp-gearbody .gwho .art { background: #1a1628; }
.cp-gearbody .gslot { background: #ffffff0a; border-color: #ffffff2e; color: #d9d2f2; }
.cp-gearbody .gslot.full { background: #0d0b16d1; border-color: #ffffff26; color: var(--ink); }
.cp-gearbody :is(.gsl, .gempty, .gbagh, .rnone) { color: var(--dim); }
.cp-gearbody .gst { color: #9fe3b4; }
.cp-gearbody .gout { background: #ffffff14; border-color: #ffffff2e; color: var(--ink); }
.cp-gearbody .gout:hover:not(:disabled) { border-color: #ff9aa8; color: #ffb3c8; transform: none; }
.cp-gearbody .gbag { display: flex; flex-wrap: wrap; gap: 12px; }
#screen.campscreen2 .cp-gearbody .ecard {
  width: 250px; flex: none; background: #0d0b16d9; border: 1px solid #ffffff1f; border-top-width: 4px; color: var(--ink); box-shadow: 0 10px 22px #0009;
}
#screen.campscreen2 .cp-gearbody .ecard.g-전설 { border-top-color: #d9a441; } #screen.campscreen2 .cp-gearbody .ecard.g-희귀 { border-top-color: #7a6be0; }
#screen.campscreen2 .cp-gearbody .ecard.g-고급 { border-top-color: #3aa37a; } #screen.campscreen2 .cp-gearbody .ecard.g-일반 { border-top-color: #9aa0b4; }
#screen.campscreen2 .cp-gearbody .eqstat { color: #9fe3b4; }
#screen.campscreen2 .cp-gearbody .eaff { color: #ffb3c8; }
#screen.campscreen2 .cp-gearbody :is(.eslot, .eoff) { background: #ffffff14; color: var(--dim); }
#screen.campscreen2 .cp-gearbody :is(.egrade, .eblurb, .eeff) { color: var(--dim); }
#screen.campscreen2 .cp-gearbody .eeff.on { color: #e8e3ff; }
.cp-gearbody .gtobtn { background: #ffffff1a; color: #fff; }
.cp-gearbody .gtobtn:hover:not(:disabled) { background: #f6d58e; color: #2a1a05; transform: none; }
.cp-gearbody .gtobtn.aff { background: #b0406a; }
.cp-gearbody .gtobtn:disabled { background: #ffffff0a; color: #7d7699; }

/* ── 휴대폰(540 높이) — 무대는 작게, 고를 것은 그대로 크게 누른다 ── */
.phone #screen.campscreen2 {
  --sidew: 372px; --artw: 150px; --arth: 196px; --platew: 172px;
  --spread: 196px; --frontb: 30px; --backb: 146px; --fireb: 12px; --fires: .62;
}
.phone .cp-top { padding: 8px 14px 6px; gap: 10px; }
.phone .cp-title b { font-size: 20px; }
.phone .cp-title span { display: none; }
.phone .cp-gold { padding: 5px 12px; }
.phone .cp-gold b { font-size: 18px; }
.phone .cp-leave { padding: 10px 16px; font-size: 14px; min-height: 44px; }
.phone .cp-main { gap: 10px; padding: 0 12px 10px; }
.phone .cp-line { top: 2px; padding: 6px 14px; font-size: 12px; max-width: calc(100% - 16px); width: auto; white-space: normal; }
.phone .cp-plate { padding: 5px 9px 7px; gap: 4px; border-radius: 10px; }
.phone .cp-name b { font-size: 13px; }
.phone .cp-num { font-size: 11px; }
.phone .cp-hp { height: 8px; }
.phone .cp-float { font-size: 22px; }
.phone .cp-side { gap: 8px; }
.phone .cp-sidehead b { font-size: 14px; }
.phone .cp-sidehead span { display: none; }
.phone .cp-choices { gap: 8px; }
.phone .cp-choice { gap: 12px; padding: 10px 14px; border-radius: 14px; }
.phone .cp-cicon { width: 44px; height: 44px; font-size: 22px; }
.phone .cp-cbody { gap: 3px; }
.phone .cp-cbody b { font-size: 21px; }
.phone .cp-csub { font-size: 12px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.phone .cp-gain { font-size: 12px; padding: 2px 9px; margin-top: 2px; }
.phone .cp-mini .gcard { width: 74px; }
.phone .cp-stamp { right: 10px; top: 8px; font-size: 11px; padding: 3px 9px; }
.phone .cp-extra { gap: 8px; }
.phone :is(.cp-gear, .cp-shop) { min-height: 48px; padding: 6px 12px; gap: 10px; border-radius: 12px; }
.phone .cp-gicon { width: 32px; height: 32px; font-size: 18px; border-radius: 10px; }
.phone .cp-xtx b { font-size: 14px; }
.phone .cp-xtx span { font-size: 11px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.phone .cp-free { font-size: 11px; padding: 3px 8px; }
.phone .cp-gear .cp-free { display: none; }
.phone .cp-shop { min-height: 76px; padding-right: 116px; }
.phone .cp-shop { gap: 4px; }
.phone .cp-shop .cp-free { font-size: 11.5px; }
.phone .cp-goldy { width: 140px; right: -16px; top: -2px; }
.phone .cp-gemblem { width: 52px; height: 52px; font-size: 24px; margin-top: 10px; }
.phone .cp-sheet { width: calc(100% - 24px); max-height: calc(100% - 20px); }
.phone .cp-sheethead { padding: 8px 12px; }
.phone .cp-sheethead b { font-size: 16px; }
.phone .cp-sheethead span { font-size: 12px; }
.phone .cp-close { min-height: 40px; }
.phone .cp-sheetbody { padding: 10px 12px 14px; }
.phone .cp-flash { gap: 10px; justify-content: flex-start; }
.phone #screen.campscreen2 .cp-flash .fcard { width: 208px; padding: 10px 12px; gap: 4px; }
.phone #screen.campscreen2 .cp-flash .ftext2 { font-size: 12.5px; line-height: 1.55; }
.phone #screen.campscreen2 .cp-flash .fbefore { font-size: 11px; }
.phone #screen.campscreen2 .cp-gearbody .ecard { width: 220px; }

@media (prefers-reduced-motion: reduce) {
  .cp-glow, .cp-flame, .cp-embers i, .cp-add, .cp-gear.new .cp-gicon, .cp-hero, .cp-line.pop, .cp-float, .cp-modal, .cp-sheet,
  .cp-fire.flare .cp-flames, .cp-fire.flare .cp-glow { animation: none; }
  .cp-embers { display: none; }
}

/* 전체화면 단추 — 머리 줄을 숨긴 화면들에 작게 */
.fsmini {
  flex: none; min-height: 0; width: 40px; height: 40px; padding: 0; border-radius: 10px; font-size: 18px; line-height: 1;
  display: inline-grid; place-items: center; background: #0d0b16c7; border: 1px solid #ffffff2e; color: #f4f1ff; backdrop-filter: blur(4px);
}
.fsmini:hover:not(:disabled) { transform: none; border-color: #f6d58e; color: #f6d58e; }
.fsmini.fsright { margin-left: auto; }
:fullscreen .fsmini { color: #f6d58e; }
.phone .fsmini { width: 38px; height: 38px; }

/* ── 메인 로비(js/lobby.js) — 메인 사도 + 오른쪽 메뉴 ─────────────────────────────
   이름이 겹쳐 데인 적이 있어(.fcard · .top) 모두 #screen.lobby2 아래 · lb- 로 시작한다. */
body:has(#screen.lobby2) .top { display: none; }
#screen.lobby2 {
  --ink: #f6f2e4; --dim: #c9c3ad; --gold: #f3d48c; --gold-deep: #e6b64e; --glass: #0f0d18c4; --line: #ffffff24;
  position: fixed; inset: 0; z-index: 1; max-width: none; margin: 0; padding: 0; border-radius: 0; min-height: 0;
  height: var(--app-h, 100vh); overflow: hidden; isolation: isolate; color: var(--ink);
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 30vw, 440px); grid-template-rows: auto minmax(0, 1fr) auto;
  background: #10131a;
}
/* 배경 — 에르피엔 마을을 살짝 흐리게, 메인 사도 뒤에 빛 · 메뉴 쪽은 어둡게 */
#screen.lobby2::before {
  content: ""; position: absolute; inset: -30px; z-index: -2; pointer-events: none;
  background: var(--stagebg, none) 40% 70% / cover no-repeat;
  filter: blur(3px) saturate(.95) brightness(.72);
}
#screen.lobby2::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 30% 55% at 36% 62%, #fff3cc40, transparent 70%),
    linear-gradient(90deg, transparent 0, transparent 52%, #0b0a12b8 74%, #0b0a12ee 100%),
    linear-gradient(180deg, #0b0a1299 0, transparent 18%, transparent 70%, #0b0a12d9 100%);
}

/* ① 머리 */
.lb-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 18px 26px 0; z-index: 3; }
.lb-logo { display: flex; flex-direction: column; margin-right: auto; }
.lb-logo b { font-size: 34px; font-weight: 900; letter-spacing: -1px; color: #fff; text-shadow: 0 3px 14px #000c; line-height: 1.05; }
.lb-logo b::before { content: "✦ "; color: var(--gold); font-size: .7em; vertical-align: .15em; }
.lb-logo span { font-size: 13px; color: var(--dim); letter-spacing: 2px; text-shadow: 0 1px 6px #000; }
#screen.lobby2 .lb-icon {
  flex: none; min-height: 0; width: 44px; height: 44px; padding: 0; border-radius: 12px; font-size: 20px; line-height: 1;
  display: inline-grid; place-items: center; background: var(--glass); border: 1px solid var(--line); color: var(--ink); backdrop-filter: blur(4px);
}
#screen.lobby2 .lb-icon:hover:not(:disabled) { transform: none; border-color: var(--gold); color: var(--gold); }

/* ② 메인 사도 */
.lb-stage { grid-column: 1; grid-row: 2 / 4; position: relative; min-height: 0; }
#screen.lobby2 .lb-stand {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(82%, calc(var(--app-h, 100vh) * .95)); height: 96%;
  padding: 0; border: 0; border-radius: 0; background: transparent; min-height: 0; cursor: pointer;
}
#screen.lobby2 .lb-stand:hover:not(:disabled) { transform: translateX(-50%); }
.lb-stand canvas { filter: drop-shadow(0 18px 24px #0009); }
.lb-stand.still .art { width: 100% !important; height: 100% !important; background: transparent !important; }
.lb-stand.still .art img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 18px 24px #0009); }
.lb-stand.still .art-ph { border-radius: 50%; width: 260px !important; height: 260px !important; margin: auto; font-size: 48px; }
.lb-bubble {
  position: absolute; left: clamp(20px, 6%, 90px); top: 16%; z-index: 2; max-width: min(360px, 34%);
  padding: 14px 18px 16px; border-radius: 18px 18px 18px 4px; background: #fffaf0f2; color: #3a2f22;
  box-shadow: 0 10px 30px #0007; pointer-events: none;
}
.lb-bubble b { display: block; font-size: 12px; font-weight: 900; color: #b0802a; margin-bottom: 4px; letter-spacing: 1px; }
.lb-line { margin: 0; font-size: 16px; line-height: 1.6; font-weight: 600; word-break: keep-all; }
.lb-bubble.pop { animation: lb-pop .32s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes lb-pop { from { transform: scale(.9) translateY(6px); opacity: .4; } to { transform: none; opacity: 1; } }
.lb-plate {
  position: absolute; left: clamp(20px, 6%, 90px); bottom: 58px; z-index: 2; display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 16px; border-radius: 99px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(4px);
}
.lb-plate b { font-size: 16px; font-weight: 900; }
.lb-plate b::before { content: "메인 사도 · "; color: var(--gold); font-weight: 700; font-size: 12px; }
.lb-plate span { font-size: 11px; color: var(--dim); }
#screen.lobby2 .lb-swap {
  min-height: 0; padding: 6px 14px; border-radius: 99px; font-size: 12px; font-weight: 800;
  background: #f3d48c22; border: 1px solid #f3d48c88; color: var(--gold);
}
#screen.lobby2 .lb-swap:hover:not(:disabled) { transform: none; background: #f3d48c44; }

/* ③ 메뉴 */
.lb-menu { grid-column: 2; grid-row: 2; align-self: center; display: flex; flex-direction: column; gap: 12px; padding: 0 30px 0 0; z-index: 2; min-height: 0; }
#screen.lobby2 .lb-start {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 0;
  padding: 22px 26px; border-radius: 18px; border: 0; text-align: left;
  background: linear-gradient(135deg, #f8e2a6, #e6b64e); color: #3a2a0c;
  box-shadow: 0 12px 30px #e6b64e40, inset 0 1px 0 #fff8; position: relative; overflow: hidden;
}
.lb-start b { font-size: 30px; font-weight: 900; letter-spacing: -.5px; }
.lb-start b::after { content: "  →"; }
.lb-start span { font-size: 13px; font-weight: 700; opacity: .8; }
.lb-start::before {
  content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, #fff6 45%, transparent 60%);
  transform: translateX(-100%); animation: lb-shine 3.6s ease-in-out infinite;
}
@keyframes lb-shine { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.calm .lb-start::before { animation: none; display: none; }
#screen.lobby2 .lb-start:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 36px #e6b64e66, inset 0 1px 0 #fff8; }
#screen.lobby2 .lb-item {
  display: flex; align-items: center; gap: 14px; min-height: 0; padding: 14px 18px; border-radius: 14px; text-align: left;
  background: var(--glass); border: 1px solid var(--line); color: var(--ink); backdrop-filter: blur(6px);
}
#screen.lobby2 .lb-item:hover:not(:disabled) { transform: translateX(-3px); border-color: #f3d48c99; background: #1b1726e0; }
.lb-item i { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-size: 18px; font-weight: 900; background: #f3d48c1f; color: var(--gold); }
.lb-item span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lb-item b { font-size: 17px; font-weight: 800; }
.lb-item small { font-size: 12px; color: var(--dim); }
.lb-route { margin-top: 6px; padding: 14px 16px; border-radius: 14px; background: #0f0d18a0; border: 1px solid #ffffff14; }
.lb-route small { font-size: 11px; letter-spacing: 3px; color: var(--gold); }
.lb-route ol { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lb-route li { display: grid; grid-template-columns: 22px auto 1fr; align-items: baseline; gap: 8px; font-size: 13px; }
.lb-route em { font-style: normal; font-weight: 900; color: var(--gold); text-align: center; }
.lb-route li span { font-size: 11px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-legal { grid-column: 2; grid-row: 3; margin: 0; padding: 0 30px 16px 0; font-size: 11px; line-height: 1.5; color: #ffffff8c; text-align: right; z-index: 2; }
.lb-legal b { color: #f3d48c; font-weight: 800; }

/* 창 — 메인 사도 바꾸기 · 설정 */
.lb-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: #06050bb8; backdrop-filter: blur(5px); }
.lb-box { width: min(900px, 92vw); max-height: 84vh; display: flex; flex-direction: column; border-radius: 20px; background: #16131f; border: 1px solid #ffffff22; color: #f6f2e4; box-shadow: 0 30px 80px #000a; overflow: hidden; }
.lb-settings { width: min(620px, 94vw); }
.lb-settings .setpanel { overflow-y: auto; scrollbar-width: thin; padding: 4px 18px 18px; }
.lb-boxhead { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid #ffffff14; }
.lb-boxhead b { font-size: 18px; font-weight: 900; margin-right: auto; }
.lb-search { width: 180px; padding: 8px 12px; border-radius: 10px; border: 1px solid #ffffff2a; background: #0c0a12; color: #fff; font-size: 14px; }
.lb-modal .lb-x { min-height: 0; width: 36px; height: 36px; padding: 0; border-radius: 10px; font-size: 20px; background: transparent; border: 1px solid #ffffff22; color: #ddd; }
.lb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); grid-auto-rows: 118px; gap: 10px; padding: 16px 18px 18px; overflow-y: auto; scrollbar-width: thin; }
.lb-modal .lb-pick {
  display: flex; flex-direction: column; align-items: center; gap: 4px; height: 118px; min-height: 0; padding: 6px 4px 8px; border-radius: 12px;
  background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--tone) 40%, transparent), #1f1b2b 75%); border: 1px solid #ffffff1a; color: #f6f2e4;
}
.lb-pick .art { flex: none; width: 84px !important; height: 84px !important; border-radius: 10px; overflow: hidden; background: transparent !important; }
.lb-pick .art img { width: 100%; height: 170%; object-fit: cover; object-position: 50% 0; }
.lb-pick span { font-size: 12px; font-weight: 700; }
.lb-modal .lb-pick.on { border-color: #f3d48c; box-shadow: 0 0 0 2px #f3d48c66; }
.lb-modal .lb-pick:hover:not(:disabled) { transform: translateY(-2px); border-color: #f3d48c99; }
.lb-none { grid-column: 1 / -1; text-align: center; color: #aaa; }

/* 휴대폰 · 좁은 화면 — 메뉴를 조금 좁히고 글을 줄인다 */
.phone #screen.lobby2 { grid-template-columns: minmax(0, 1fr) 280px; }
.phone .lb-top { padding: 8px 14px 0; }
.phone .lb-logo b { font-size: 22px; }
.phone .lb-logo span { display: none; }
.phone .lb-menu { gap: 7px; padding-right: 14px; }
.phone #screen.lobby2 .lb-start { padding: 12px 16px; }
.phone .lb-start b { font-size: 20px; }
.phone #screen.lobby2 .lb-item { padding: 8px 12px; }
.phone .lb-item i { width: 30px; height: 30px; font-size: 14px; }
.phone .lb-item small, .phone .lb-route, .phone .lb-legal, .phone .lb-plate span { display: none; }
.phone .lb-bubble { top: 8%; max-width: 46%; padding: 10px 12px; }
.phone .lb-line { font-size: 13px; }
.phone .lb-plate { bottom: 12px; }

/* ── 설정 창 내용(js/settings-panel.js) — 로비 · 전투 메뉴 · 지도 메뉴가 같이 쓴다 ── */
.setpanel { display: flex; flex-direction: column; gap: 6px; text-align: left; color: #f4f1ff; }
.setpanel .sp-sec { display: flex; flex-direction: column; gap: 6px; }
.setpanel .sp-sec h4 { margin: 12px 0 2px; font-size: 12px; letter-spacing: 3px; color: #f3d48c; font-weight: 800; }
.setpanel .sp-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px;
  background: #ffffff0a; border: 1px solid #ffffff14;
}
.setpanel .sp-label { display: flex; flex-direction: column; gap: 2px; margin-right: auto; min-width: 0; flex: 1 1 180px; }
.setpanel .sp-label b { font-size: 14px; font-weight: 800; }
.setpanel .sp-label small { font-size: 11px; color: #b9b2c8; line-height: 1.4; }
.setpanel .sp-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.setpanel .sp-opt {
  min-height: 0; padding: 6px 10px; border-radius: 99px; font-size: 12px; font-weight: 800;
  background: #ffffff10; border: 1px solid #ffffff22; color: #ddd8ea;
}
.setpanel .sp-opt:hover:not(:disabled) { transform: none; border-color: #f3d48c99; }
.setpanel .sp-opt.on { background: #f3d48c; border-color: #f3d48c; color: #3a2a0c; }
.setpanel .sp-tog {
  display: inline-flex; align-items: center; gap: 8px; min-height: 0; padding: 4px 10px 4px 4px; border-radius: 99px;
  background: #ffffff10; border: 1px solid #ffffff22; color: #aaa; font-size: 12px; font-weight: 800;
}
.setpanel .sp-tog i { width: 34px; height: 20px; border-radius: 99px; background: #ffffff22; position: relative; transition: background .15s; }
.setpanel .sp-tog i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; }
.setpanel .sp-tog.on { color: #f3d48c; border-color: #f3d48c88; }
.setpanel .sp-tog.on i { background: #e6b64e; }
.setpanel .sp-tog.on i::after { transform: translateX(14px); }
.setpanel .sp-tog:hover:not(:disabled) { transform: none; }
.setpanel .sp-vol { display: flex; align-items: center; gap: 10px; flex: 1 1 200px; }
.setpanel .sp-range {
  flex: 1; min-width: 120px; height: 6px; appearance: none; -webkit-appearance: none; border-radius: 99px; outline: none;
  background: linear-gradient(90deg, #e6b64e var(--fill, 50%), #ffffff22 var(--fill, 50%));
}
.setpanel .sp-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #e6b64e; cursor: pointer; }
.setpanel .sp-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #e6b64e; cursor: pointer; }
.setpanel .sp-num { width: 34px; text-align: right; font-size: 13px; color: #f3d48c; font-variant-numeric: tabular-nums; }
/* 전투 · 지도 메뉴 창 안에서 — 창이 좁고 길어지니 스크롤 */
.menumodal .setpanel { max-height: min(62vh, calc(var(--app-h, 100vh) * .62)); overflow-y: auto; scrollbar-width: thin; margin: 8px 0 12px; padding-right: 4px; }
.phone .setpanel .sp-label small { display: none; }
.phone .setpanel .sp-row { padding: 6px 10px; }

/* 골드 아이콘(js/ui.js goldIcon) — 원작 잎사귀 금화. 그림이 없으면 「✦」 글자(.noimg) */
.gico { display: inline-flex; align-items: center; justify-content: center; width: 1.25em; height: 1.25em; margin-right: .3em; vertical-align: -.28em; font-style: normal; flex: none; }
.gico img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1px 2px #0008); }
.gico.noimg { width: auto; height: auto; vertical-align: baseline; }
.cp-gold .gico, .sh-gold .gico { width: 22px; height: 22px; margin-right: 2px; }
.sh-buy .gico, .sh-actprice .gico { width: 1.15em; height: 1.15em; margin-right: .2em; }
/* 날아가는 동전 · 획득 목록 — 그림이 있으면 그리던 금화 대신 */
.dropcoin img, .lticon.coin img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dropcoin:has(img), .lticon.coin:has(img) { background: none; box-shadow: none; border-radius: 0; }
.dropcoin:has(img) { width: 26px; height: 26px; margin: -13px 0 0 -13px; filter: drop-shadow(0 0 6px #ffd23faa); }
.lticon.coin:has(img) { width: 24px; height: 24px; }
.dropcoin.noimg, .lticon.coin.noimg { font-size: 0; }

/* ── 아군 미리보기(ui.js paintAllies) — 회복 · 방어 · 실드 · 대가. 막대에는 찰 만큼 초록 ── */
.bar .gain {
  position: absolute; top: 0; bottom: 0; width: 0; text-decoration: none;
  background: repeating-linear-gradient(45deg, #b8ffcf 0 4px, #3fd27a 4px 8px);
  animation: pvblink 0.9s ease-in-out infinite alternate;
}
.stand .apv {
  position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); z-index: 6;
  display: none; flex-direction: column; align-items: center; gap: 2px; pointer-events: none;
}
.stand.pvon .apv { display: flex; }
.stand .apv b.pvheal {
  font-size: 26px; font-weight: 900; color: #fff; line-height: 1;
  -webkit-text-stroke: 1px #0f6a34; text-shadow: 0 2px 0 #0f6a34, 0 0 12px #3fd27a;
}
.stand .apv span { font-size: 13px; font-weight: 900; padding: 2px 8px; border-radius: 99px; background: #0b1020d9; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.stand .apv .pvblk { color: #bfe0ff; box-shadow: inset 0 0 0 1px #6fb4ff88; }
.stand .apv .pvsh { color: #d9c8ff; box-shadow: inset 0 0 0 1px #a98bff88; }
.stand .apv .pvlose { color: #ffb3a6; box-shadow: inset 0 0 0 1px #ff6a5488; }

/* ── 버릴 카드 고르기(ui.js pickDiscard) ── */
.dcpick { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: #06050bcc; backdrop-filter: blur(4px); }
.dcbox { width: min(1100px, 94vw); max-height: 88vh; display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; border-radius: 20px; background: #16131f; border: 1px solid #ffffff22; box-shadow: 0 30px 80px #000a; color: #f4f1ff; }
.dchead { display: flex; flex-direction: column; gap: 4px; }
.dchead b { font-size: 22px; font-weight: 900; }
.dchead span { font-size: 13px; color: #b9b2d6; }
.dcgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; overflow-y: auto; padding: 6px; }
.dcpick .dccell { position: relative; padding: 0; min-height: 0; border: 0; background: transparent; border-radius: 14px; transition: transform .12s; }
.dcpick .dccell:hover:not(:disabled) { transform: translateY(-4px); }
.dcpick .dccell .dcmark {
  position: absolute; inset: 0; display: none; place-items: center; border-radius: 14px; font-style: normal;
  font-size: 22px; font-weight: 900; color: #fff; background: #b8323a99; box-shadow: inset 0 0 0 3px #ff6a6a; text-shadow: 0 2px 6px #000;
}
.dcpick .dccell.on .dcmark { display: grid; }
.dcpick .dccell.on { transform: translateY(-6px); }
.dcfoot { display: flex; justify-content: flex-end; gap: 10px; }
.dcpick .dcok { min-height: 0; padding: 10px 26px; border-radius: 12px; font-size: 16px; font-weight: 900; background: linear-gradient(135deg, #ff8a7a, #d8454f); color: #fff; border: 0; }
.dcpick .dcok:disabled { background: #2a2540; color: #8d86a8; }
.dcpick .dccancel { min-height: 0; padding: 10px 20px; border-radius: 12px; font-size: 14px; font-weight: 800; background: transparent; border: 1px solid #ffffff33; color: #ddd; }

.stand .apv .pvfull { color: #d8ffe4; box-shadow: inset 0 0 0 1px #3fd27a66; opacity: .85; }

/* ── 이벤트(ui.js eventScreen) — 상점 · 캠프와 같은 옷. 이름이 겹쳐 데인 적이 있어 모두 #screen.eventscreen2 아래 · ev2- ── */
body:has(#screen.eventscreen2) .top { display: none; }
#screen.eventscreen2 {
  --ink: #f4f1ff; --dim: #b9b2d6; --line: #ffffff1f; --gold: #f6d58e; --glass: #0d0b16c9;
  position: fixed; inset: 0; z-index: 1; max-width: none; margin: 0; padding: 0; border-radius: 0; min-height: 0;
  height: var(--app-h, 100vh); overflow: hidden; isolation: isolate; color: var(--ink);
  display: grid; grid-template-rows: auto minmax(0, 1fr); background: #0b0913;
}
#screen.eventscreen2::before {
  content: ""; position: absolute; inset: -40px; z-index: -2; pointer-events: none;
  background: var(--stagebg, none) 50% 70% / cover no-repeat;
  filter: blur(4px) saturate(.9) brightness(.62);
}
#screen.eventscreen2::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 26% 50% at 24% 62%, #fff3cc30, transparent 72%),
    linear-gradient(90deg, transparent 0, transparent 40%, #0a0814b8 60%, #0a0814e6 100%),
    linear-gradient(180deg, #0a0814e6 0, #0a081455 16%, #0a081440 70%, #0a0814d9 100%);
}

/* ① 머리 */
.ev2-top { display: flex; align-items: center; gap: 14px; padding: 14px 24px 10px; z-index: 3; }
.ev2-title { display: flex; flex-direction: column; gap: 2px; margin-right: auto; min-width: 0; }
.ev2-title b { font-size: 26px; font-weight: 900; color: #fff; text-shadow: 0 2px 10px #000; }
.ev2-title b::before { content: "✦ "; color: var(--gold); }
.ev2-title span { font-size: 13px; color: var(--dim); text-shadow: 0 1px 4px #000; }
.ev2-party { display: flex; gap: 8px; }
.ev2-mem { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line); min-width: 150px; }
.ev2-mem .art { border-radius: 50%; overflow: hidden; flex: none; }
.ev2-mem > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ev2-mem b { font-size: 13px; }
.ev2-mem small { font-size: 11px; color: var(--dim); white-space: nowrap; }
.ev2-hp { display: block; height: 5px; border-radius: 99px; background: #ffffff1a; overflow: hidden; }
.ev2-hp s { display: block; height: 100%; background: linear-gradient(90deg, #3fd27a, #8af0ae); text-decoration: none; }
.ev2-mem.down { opacity: .5; }
.ev2-gold { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 99px; background: var(--glass); border: 1px solid #f6d58e66; color: var(--gold); font-size: 18px; font-weight: 900; }
#screen.eventscreen2 .ev2-leave {
  min-height: 0; padding: 12px 22px; border-radius: 12px; font-size: 15px; font-weight: 900; border: 0;
  background: linear-gradient(135deg, #f8e2a6, #e6b64e); color: #3a2a0c; box-shadow: 0 8px 20px #e6b64e40;
}

/* ② 무대 · 판 */
.ev2-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 0; }
.ev2-stage { position: relative; min-height: 0; }
.ev2-stand { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(88%, calc(var(--app-h, 100vh) * .8)); height: 92%; }
.ev2-stand canvas { filter: drop-shadow(0 18px 24px #0009); }
.ev2-stand.still .art { width: 100% !important; height: 100% !important; background: transparent !important; }
.ev2-stand.still .art img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 18px 24px #0009); }
.ev2-stand.mark { display: grid; place-items: center; }
.ev2-mark {
  width: 220px; height: 220px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #fff6d8, #f0c25a 55%, #9a6a18); box-shadow: 0 0 60px #f6d58e66, inset 0 -8px 0 #0003;
  animation: ev2-bob 3s ease-in-out infinite;
}
.ev2-mark span { font-size: 120px; font-weight: 900; color: #5a3b08; text-shadow: 0 3px 0 #fff8; }
@keyframes ev2-bob { 50% { transform: translateY(-10px); } }
.calm .ev2-mark { animation: none; }
.ev2-bubble {
  position: absolute; left: clamp(16px, 6%, 70px); top: 6%; z-index: 2; max-width: min(470px, 78%);
  padding: 14px 18px 16px; border-radius: 18px 18px 18px 4px; background: #fffaf0f2; color: #3a2f22; box-shadow: 0 10px 30px #0007;
}
.ev2-bubble.empty { display: none; }
.ev2-who { display: block; font-size: 12px; font-weight: 900; color: #b0802a; margin-bottom: 4px; letter-spacing: 1px; }
.ev2-line { margin: 0; font-size: 16px; line-height: 1.65; font-weight: 600; word-break: keep-all; }
.ev2-bubble.pop { animation: lb-pop .32s cubic-bezier(.3, 1.6, .5, 1); }
.ev2-plate { position: absolute; left: clamp(16px, 6%, 70px); bottom: 26px; z-index: 2; display: flex; flex-direction: column; gap: 2px; padding: 8px 16px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line); }
.ev2-plate b { font-size: 16px; font-weight: 900; }
.ev2-plate span { font-size: 11px; color: var(--dim); }

.ev2-panel { display: flex; flex-direction: column; gap: 10px; padding: 8px 28px 24px 8px; overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: #f6d58e55 transparent; }
.ev2-head { font-size: 12px; letter-spacing: 3px; font-weight: 900; color: var(--gold); margin: 6px 0 2px; }
#screen.eventscreen2 .ev2-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 0; padding: 16px 18px; border-radius: 16px; text-align: left;
  background: var(--glass); border: 1px solid var(--line); color: var(--ink); backdrop-filter: blur(6px); transition: transform .12s, border-color .12s, box-shadow .12s;
}
#screen.eventscreen2 .ev2-opt:hover:not(:disabled) { transform: translateX(-3px); border-color: #f6d58e88; }
#screen.eventscreen2 .ev2-opt.picked { border-color: var(--gold); box-shadow: 0 0 0 2px #f6d58e66, 0 10px 26px #0008; background: #231c2ee6; }
#screen.eventscreen2 .ev2-opt.leave { background: #0d0b1690; border-style: dashed; }
#screen.eventscreen2 .ev2-opt.locked { opacity: .45; }
.ev2-label { font-size: 17px; font-weight: 900; }
.ev2-out { font-size: 13px; color: #e8dcb4; line-height: 1.5; }
.ev2-note { font-size: 12px; color: #ffcf9a; }
.ev2-lock { font-size: 12px; color: #ff9d9d; }
.ev2-kind { font-size: 12px; color: var(--gold); }
.ev2-scene { margin: 0; font-size: 13px; color: var(--dim); line-height: 1.6; }
.ev2-by { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 2px; border-radius: 99px; background: #f6d58e22; font-size: 12px; color: var(--gold); }
.ev2-by .art { border-radius: 50%; overflow: hidden; }
.ev2-result { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 16px; background: var(--glass); border: 1px solid #f6d58e55; }
.ev2-chose { font-size: 18px; font-weight: 900; color: var(--gold); }
.ev2-logs { display: flex; flex-wrap: wrap; gap: 8px; }
.ev2-log { font-size: 14px; font-weight: 700; padding: 6px 12px; border-radius: 10px; background: #ffffff10; border: 1px solid #ffffff18; }
#screen.eventscreen2 .ev2-again { align-self: flex-start; min-height: 0; padding: 8px 16px; border-radius: 99px; font-size: 13px; font-weight: 800; background: #f6d58e22; border: 1px solid #f6d58e88; color: var(--gold); }

/* 두 단계 고르기(ui.js twoStep) — 이벤트 · 상점 카드 제거 · 캠프 수련 */
.twostep { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: #0d0b16d9; border: 1px solid #ffffff1f; position: sticky; bottom: 0; z-index: 4; }
.twostep .tsl { margin-right: auto; font-size: 14px; font-weight: 700; color: #b9b2d6; }
.twostep.ready .tsl { color: #fff; }
.twostep .tsok {
  min-height: 0; padding: 10px 22px; border-radius: 12px; font-size: 15px; font-weight: 900; border: 0;
  background: linear-gradient(135deg, #f8e2a6, #e6b64e); color: #3a2a0c;
}
.twostep .tsok.danger { background: linear-gradient(135deg, #ff9d8c, #d8454f); color: #fff; }
.twostep .tsok:disabled { background: #2a2540; color: #8d86a8; }
.twostep .ev2-skip { min-height: 0; padding: 10px 16px; border-radius: 12px; font-size: 13px; font-weight: 800; background: transparent; border: 1px solid #ffffff33; color: #ddd; }
/* 고른 카드 · 사도 · 신탁 — 금빛 테 + 살짝 떠오름 */
.picked { outline: 3px solid #f6d58e; outline-offset: 3px; border-radius: 14px; transform: translateY(-6px); box-shadow: 0 0 24px #f6d58e66; }
.fcard.picked { transform: translateY(-6px); }

/* 결과에서 고를 것 — 위에 뜨는 창 */
.ev2-sheet { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: #06050bb8; backdrop-filter: blur(4px); }
.ev2-sheetbox { width: min(1180px, 94%); max-height: 90%; display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 16px; border-radius: 20px; background: #16131f; border: 1px solid #ffffff22; box-shadow: 0 30px 80px #000a; overflow: hidden; }
.ev2-sheethead { display: flex; flex-direction: column; gap: 4px; }
.ev2-sheethead b { font-size: 22px; font-weight: 900; }
.ev2-sheethead span { font-size: 13px; color: #b9b2d6; }
.ev2-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); align-items: start; gap: 14px; overflow-y: auto; padding: 12px 8px; min-height: 0; }
.ev2-cards.big { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.ev2-cards .gcard { width: 100%; box-shadow: 0 8px 18px #000a; }
.ev2-cards.big .ev2-card { width: 210px; }
.phone .ev2-cards { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.phone .ev2-cards.big .ev2-card { width: 150px; }
.ev2-sheet .ev2-card { position: relative; align-self: start; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; min-height: 0; border: 0; background: transparent; border-radius: 14px; transition: transform .12s; }
.ev2-sheet .ev2-card:hover:not(:disabled) { transform: translateY(-4px); }
.ev2-sheet .ev2-card.picked { transform: translateY(-8px); }
.ev2-n { position: absolute; top: -6px; right: -6px; z-index: 2; padding: 2px 8px; border-radius: 99px; background: #f6d58e; color: #3a2a0c; font-size: 12px; font-weight: 900; }
.ev2-heroes { display: flex; justify-content: center; gap: 16px; padding: 10px; }
.ev2-sheet .ev2-hero { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 0; width: 180px; padding: 10px; border-radius: 16px; background: #221d2e; border: 1px solid #ffffff1a; color: #f4f1ff; }
.ev2-hero .art { width: 150px !important; height: 150px !important; background: transparent !important; }
.ev2-hero .art img { width: 100%; height: 100%; object-fit: contain; }
.ev2-hero b { font-size: 16px; }
.ev2-hero span { font-size: 12px; color: #b9b2d6; }
.ev2-gamble { display: flex; flex-direction: column; gap: 8px; }

/* 상점 카드 제거 · 캠프 수련 — 고른 뒤 확인 줄 */
.sh-deckwrap, .cp-trainwrap { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.sh-deckwrap .sh-deckcard { padding: 0; min-height: 0; border: 0; background: transparent; border-radius: 14px; transition: transform .12s; }
.sh-deckwrap .sh-deckcard:hover:not(:disabled) { transform: translateY(-4px); }

/* 휴대폰 */
.phone .ev2-top { padding: 6px 12px 4px; gap: 8px; }
.phone .ev2-title b { font-size: 18px; }
.phone .ev2-party { display: none; }
.phone .ev2-main { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.phone .ev2-bubble { max-width: 90%; padding: 8px 10px; }
.phone .ev2-line { font-size: 12px; }
.phone #screen.eventscreen2 .ev2-opt { padding: 10px 12px; }
.phone .ev2-label { font-size: 14px; }
.phone .ev2-out { font-size: 11px; }