/* ================= 앱 (가로 전용) =================
   #app 은 항상 가로. 세로 기기에서는 js/orient.js 가 90° 돌린다.
   크기 조건은 기기 화면이 아니라 #app 기준(@container app, cqw/cqh). */
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #0d0b1f; }
#app { position: fixed; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; container: app / size; }

/* ================= 로비 (게임식 UI) ================= */
:root {
  /* 셀화(툰) 팔레트: 황혼 코발트 하늘 + 잉크 외곽선 + 역할별 강조색 */
  --ink: #0e1433;      /* 외곽선·딱딱한 그림자 */
  --sky: #2b45b8; --night: #111a4a;
  --paper: #f4f7ff;
  --signal: #ffd23f;   /* 출격·주요 행동 */
  --pink: #ff4d8d;     /* 소환 */
  --mint: #35e0c0;     /* 받을 보상·준비됨 */
  --gold: var(--signal); --gold2: #e0a800;
  --text: var(--paper); --muted: #a8b6ee;
  --panel: linear-gradient(180deg, rgba(30, 46, 132, 0.96), rgba(16, 24, 72, 0.97));
  --line: #0e1433;
  --title: 'Gasoek One', 'Black Han Sans', 'Noto Sans KR', sans-serif;
  --hard: 4px 4px 0 var(--ink);
}
body { font-family: 'IBM Plex Sans KR', 'Noto Sans KR', system-ui, -apple-system, 'Apple SD Gothic Neo', sans-serif; background: var(--night); }

#lobby {
  position: fixed; inset: 0; overflow: hidden; color: var(--text);
  background: linear-gradient(180deg, var(--sky) 0%, #1e3192 48%, var(--night) 100%);
  user-select: none; -webkit-user-select: none;
}
#lobby::before { /* 바닥 쪽 망점(스크린톤) — 만화 원고의 톤 */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; pointer-events: none; opacity: 0.22;
  background-image: radial-gradient(circle, var(--paper) 1.1px, transparent 1.6px);
  background-size: 9px 9px;
  -webkit-mask-image: linear-gradient(transparent, #000); mask-image: linear-gradient(transparent, #000);
}
#lobbyStage { position: absolute; inset: 0; display: none; }
#lobby[data-screen="home"] #lobbyStage { display: block; }
#lobbyStage canvas { display: block; width: 100%; height: 100%; }
#lobby svg { width: 1em; height: 1em; fill: currentColor; flex: none; }
#lobby :focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }

/* ---------- 버튼 ---------- */
.gbtn {
  font-family: inherit; font-weight: 700; color: var(--paper); cursor: pointer;
  background: #3552c9; border: 2px solid var(--ink); border-radius: 8px;
  padding: 8px 14px; box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.06s, box-shadow 0.06s, filter 0.15s;
}
.gbtn:hover:not(:disabled) { filter: brightness(1.1); }
.gbtn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.gbtn.big { padding: 12px 22px; font-size: 17px; }
.gbtn.small { padding: 6px 10px; font-size: 13px; }
.gbtn.gold { background: var(--signal); color: var(--ink); box-shadow: var(--hard); }
.gbtn.gold:active:not(:disabled) { box-shadow: 0 0 0 var(--ink); }
.gbtn.red { background: #e8435e; box-shadow: 3px 3px 0 var(--ink); }
.gbtn.on { background: var(--signal); color: var(--ink); }
.gbtn small { font-weight: 400; opacity: 0.85; }
.icon-btn { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 8px; width: 40px; height: 40px; padding: 0; font-size: 20px; display: grid; place-items: center; box-shadow: 3px 3px 0 var(--ink); cursor: pointer; }
.chip {
  font-family: inherit; background: rgba(0, 0, 0, 0.35); color: var(--ink); border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px; padding: 4px 10px; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.chip.on { background: var(--signal); color: var(--ink); border-color: var(--ink); font-weight: 700; }
.chips { display: flex; gap: 5px; flex-wrap: wrap; }
.chips.wide { margin-bottom: 10px; }
.linkish { background: none; border: none; color: #b8c8ff; text-decoration: underline; padding: 0 4px; font-size: 13px; cursor: pointer; }

.panel {
  background: var(--panel); border: 2px solid var(--ink); border-radius: 10px; padding: 12px;
  box-shadow: 5px 5px 0 rgba(14, 20, 51, 0.85);
}
.gtitle { font-family: var(--title); font-weight: 400; font-size: 26px; margin: 0; color: var(--paper);
  -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.scr-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; }
.scr-head .timer { margin-left: auto; }
.timer { font-size: 13px; color: var(--muted); }
.timer b { color: var(--gold); font-size: 15px; }
.hint { color: var(--muted); font-size: 12px; }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.tag { background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 6px; padding: 2px 7px; font-size: 12px; }
.stats { font-size: 13px; color: #d8d4ff; margin: 6px 0; }
.row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.mats { display: flex; flex-wrap: wrap; gap: 5px; }
.mat { background: rgba(0, 0, 0, 0.35); border-radius: 8px; padding: 3px 8px; font-size: 12px; border: 1px solid rgba(255, 255, 255, 0.12); }
.mat.ok { color: #9dffb0; } .mat.no { color: #ff9aa8; }

/* ---------- 상단 바 ---------- */
#topbar {
  position: absolute; top: 0; left: 0; right: 0; height: 60px; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; padding: 0 14px;
}
.player { display: flex; align-items: center; gap: 8px; }
.avatar { width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center; font-size: 24px;
  background: var(--pink); color: var(--paper); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.pname { font-family: var(--title); font-size: 18px; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.prank { font-size: 11px; color: var(--paper); opacity: 0.8; }
.wallet { display: flex; gap: 8px; align-items: center; }
.res { display: inline-flex; align-items: center; gap: 6px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px;
  padding: 3px 12px 3px 5px; font-weight: 700; font-size: 14px; box-shadow: 3px 3px 0 var(--ink); font-variant-numeric: tabular-nums; }
.res svg { font-size: 20px; stroke: var(--ink); stroke-width: 2px; }
#lobby .res.gem svg { fill: var(--pink); }
#lobby .res.coin svg { fill: var(--signal); }
.res.small { padding: 2px 8px; font-size: 12px; box-shadow: none; border-width: 1.5px; }
.gift { position: relative; width: 44px; height: 44px; border-radius: 8px; padding: 0; font-size: 22px; line-height: 1; cursor: pointer;
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gift small { font-size: 9px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gift.ready { background: var(--mint); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { transform: translateY(-3px); } }
.gift:active, .icon-btn:active { transform: translate(3px, 3px); box-shadow: none; }

/* ---------- 화면 영역 ---------- */
#screens { position: absolute; top: 60px; bottom: 76px; left: 0; right: 0; }
.screen { position: absolute; inset: 0; overflow-y: auto; padding: 4px 18px 16px; display: none; }
.screen.on { display: block; }
.screen.enter { animation: screenIn 0.28s ease-out; }
@keyframes screenIn { from { opacity: 0; transform: translateY(12px); } }
#scr-home { overflow: hidden; pointer-events: none; }
#scr-home > * { pointer-events: auto; }

/* ---------- 하단 내비게이션 ---------- */
#navbar {
  position: absolute; bottom: 0; left: 0; right: 0; height: 76px; z-index: 5;
  display: flex; justify-content: center; align-items: flex-end; gap: 4px; padding-bottom: 6px;
}
#navbar::before { /* 기울어진 잉크 띠 */
  content: ''; position: absolute; left: 50%; bottom: 6px; width: 520px; height: 50px; transform: translateX(-50%) skewX(-12deg);
  background: var(--ink); border-radius: 6px; }
#navbar button {
  position: relative; background: none; border: none; color: var(--muted); width: 84px; height: 50px; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: inherit;
}
#navbar svg { font-size: 22px; }
#navbar span { font-size: 12px; font-weight: 700; }
#navbar button.on { color: var(--paper); }
#navbar button.on::after { content: ''; position: absolute; bottom: 3px; width: 30px; height: 3px; background: var(--signal); transform: skewX(-12deg); }
#navbar button.main { width: 104px; height: 64px; color: var(--ink); z-index: 1; }
#navbar button.main::before { content: ''; position: absolute; inset: 0 4px; z-index: -1; transform: skewX(-12deg);
  background: var(--signal); border: 2px solid var(--ink); border-radius: 6px; box-shadow: 4px 4px 0 var(--ink); }
#navbar button.main svg { font-size: 28px; }
#navbar button.main span { font-family: var(--title); font-size: 15px; font-weight: 400; }
#navbar button.main.on::after { display: none; }

/* ---------- 유닛 카드 ---------- */
.gcard {
  position: relative; width: 104px; height: 136px; border-radius: 12px; overflow: hidden; flex: none;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--wc) 55%, #1e3192), #111a4a 78%);
  border: 2px solid var(--rc);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 0 18px color-mix(in srgb, var(--rc) 35%, transparent);
}

.gcard .portrait { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 16px); object-fit: cover; object-position: 50% 30%; opacity: 0; transition: opacity 0.3s; }
.portrait.ready { opacity: 1; }

.gcard .gfoot { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 3px 3px; text-align: center;
  background: linear-gradient(transparent, rgba(14, 20, 51, 0.92) 45%); }
.gcard .stars { color: var(--rc); font-size: 10px; letter-spacing: -1px; text-shadow: 0 0 4px var(--rc); }
.gcard .nm { font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; }
.gcard .lvb { position: absolute; top: 3px; right: 3px; font-size: 10px; font-weight: 700; background: rgba(0, 0, 0, 0.65); border-radius: 6px; padding: 1px 5px; }
.gcard .up { position: absolute; top: 4px; right: 4px; background: #ff3b6b; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 6px; box-shadow: 0 0 8px #ff3b6b; }
.gcard .teamno { position: absolute; top: 26px; right: 3px; background: var(--gold); color: #3a2200; font-weight: 900; font-size: 11px; border-radius: 6px; padding: 0 5px; }
.gcard .lockb { position: absolute; top: 26px; left: 3px; font-size: 12px; }
.gcard .check { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; color: #fff; text-shadow: 0 0 8px #ff3b6b; }
.gcard.r5 { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 200, 60, 0.45), inset 0 0 20px rgba(255, 200, 60, 0.35); }
.gcard.r6 { border-color: transparent; background-clip: padding-box; }
.gcard.r6::after { content: ''; position: absolute; inset: 0; border-radius: 10px; padding: 2px; pointer-events: none;
  background: linear-gradient(135deg, #ff6ad0, #ffd35a, #6ad8ff, #b06aff); animation: hue 4s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@keyframes hue { to { filter: hue-rotate(360deg); } }
.gcard.mini { width: 64px; height: 84px; border-radius: 9px; }

.gcard.mini .nm { font-size: 9.5px; }

.gcard.hero { width: 176px; height: 230px; border-width: 3px; border-radius: 16px; }

.gcard.hero .nm { font-size: 15px; } .gcard.hero .stars { font-size: 14px; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; justify-items: center; padding: 4px 2px 8px; }
.pickc { cursor: pointer; border-radius: 14px; transition: transform 0.12s; }
.pickc:hover { transform: translateY(-3px); }
.pickc.sel .gcard, .pickc.picked .gcard { outline: 3px solid var(--gold); outline-offset: 2px; box-shadow: 0 0 16px rgba(255, 210, 90, 0.6); }
.pickc.picked .gcard { outline-color: #ff5a7a; }
.pickc.inteam .gcard { filter: saturate(0.6) brightness(0.8); }
.pickc.nosell { opacity: 0.35; cursor: not-allowed; }
.filters { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.filters .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.filters .chips::-webkit-scrollbar { display: none; }
.roster-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

/* ---------- 홈 ---------- */
/* 배너 티켓: 왼쪽 위, 기울어진 세계색 띠 */
.home-banners { position: absolute; left: 18px; top: 10px; width: 290px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.hb-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px; }
.hb-head > b { font-family: var(--title); font-weight: 400; font-size: 17px; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.hb-head .timer { color: var(--paper); font-size: 12px; }
.hb-head .timer b { color: var(--signal); font-variant-numeric: tabular-nums; }
.bm-row { position: relative; display: flex; gap: 10px; align-items: center; padding: 5px 14px 5px 6px; border: none; background: none; color: var(--paper);
  font-family: inherit; text-align: left; cursor: pointer; isolation: isolate; transition: transform 0.12s; }
.bm-row::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: skewX(-10deg); border-radius: 6px;
  background: var(--wc); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.bm-row::after { content: ''; position: absolute; inset: 0; z-index: -1; transform: skewX(-10deg); border-radius: 6px; pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, rgba(14, 20, 51, 0.55) 38%); } /* 셀 그림자 한 단 */
.bm-row:hover { transform: translateX(6px); }
.bm-row .gcard.mini { width: 54px; height: 70px; border-color: var(--ink); }
.bm-txt { display: flex; flex-direction: column; min-width: 0; }
.bm-w { font-family: var(--title); font-size: 17px; line-height: 1.1; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.bm-f { font-size: 12px; font-weight: 700; color: var(--signal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 타이틀 로고: 왼쪽 아래, 에피소드 타이틀 카드처럼 */
.home-logo { position: absolute; left: 22px; bottom: 16px; margin: 0; pointer-events: none !important; transform: rotate(-4deg); transform-origin: left bottom;
  font-family: var(--title); font-weight: 400; line-height: 0.95; color: var(--paper); -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill;
  text-shadow: 5px 5px 0 var(--ink); }
.home-logo span { display: block; }
.home-logo span:first-child { font-size: 22px; color: var(--signal); }
.home-logo span:last-child { font-size: 44px; }

/* 행동 판: 오른쪽 아래 */
.home-cta { position: absolute; right: 26px; bottom: 14px; width: 300px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.slab { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; text-align: left; isolation: isolate;
  border: none; background: none; font-family: inherit; cursor: pointer; padding: 10px 22px; color: var(--ink); transition: transform 0.08s; }
.slab::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: skewX(-12deg); border-radius: 8px;
  border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); background: var(--paper); transition: box-shadow 0.08s; }
.slab:active { transform: translate(5px, 5px); }
.slab:active::before { box-shadow: 1px 1px 0 var(--ink); }
.slab .sl-t { font-family: var(--title); font-size: 20px; line-height: 1.1; }
.slab .sl-s { grid-column: 1 / -1; font-size: 12px; font-weight: 700; }
.slab.party { width: 220px; }
.slab.party::before { background: var(--paper); }
.slab.go { width: 300px; padding: 14px 26px 14px 28px; grid-template-rows: auto auto; }
.slab.go::before { background: var(--signal); }
.slab.go::after { content: ''; position: absolute; inset: 0; z-index: -1; transform: skewX(-12deg); border-radius: 8px; pointer-events: none;
  background: linear-gradient(100deg, transparent 84%, rgba(224, 168, 0, 0.9) 84%); } /* 셀 그림자 한 단 */
.slab.go svg { grid-row: span 2; font-size: 46px; }
.slab.go .sl-t { font-size: 40px; }
.slab.go .sl-s { grid-column: 2; }

/* 홈에 들어올 때 한 번: 판들이 오른쪽에서, 배너는 왼쪽에서 밀려 들어온다 */
#scr-home.enter .home-banners { animation: inL 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
#scr-home.enter .slab { animation: inR 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
#scr-home.enter .slab.go { animation-delay: 0.06s; }
@keyframes inL { from { transform: translateX(-40px); opacity: 0; } }
@keyframes inR { from { transform: translateX(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  #scr-home.enter *, .gift.ready { animation: none !important; }
}

/* ---------- 모험 ---------- */
.mats-strip { display: flex; gap: 5px; flex-wrap: wrap; margin-left: auto; }
.adv-body { display: grid; grid-template-columns: 1fr 320px; gap: 14px; height: calc(100% - 56px); min-height: 380px; }
.map {
  position: relative; border-radius: 20px; overflow: hidden; border: 3px solid #7a6a3a;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(90, 170, 90, 0.55), transparent 45%),
    radial-gradient(ellipse at 45% 50%, rgba(220, 190, 110, 0.45), transparent 40%),
    radial-gradient(ellipse at 70% 30%, rgba(200, 80, 40, 0.45), transparent 35%),
    radial-gradient(ellipse at 90% 70%, rgba(110, 50, 140, 0.6), transparent 40%),
    linear-gradient(160deg, #3a6a4a, #6a5a3a 45%, #4a2a3a 75%, #2a1a3a);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6), 0 8px 24px rgba(0, 0, 0, 0.5);
}
.map::before { content: ''; position: absolute; inset: 0; opacity: 0.18; pointer-events: none;
  background-image: repeating-linear-gradient(45deg, #000 0 1px, transparent 1px 12px); }
.map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map .road { fill: none; stroke: #f3e0b0; stroke-width: 10; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0.9; }
.map .road-dash { fill: none; stroke: #7a5a2a; stroke-width: 2; stroke-dasharray: 8 10; vector-effect: non-scaling-stroke; }
.node {
  position: absolute; transform: translate(-50%, -50%); width: 78px; height: 78px; border-radius: 50%; cursor: pointer; padding: 0;
  background: radial-gradient(circle at 40% 30%, color-mix(in srgb, var(--sb) 60%, #fff), var(--sb) 70%);
  border: 4px solid var(--sp); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(0, 0, 0, 0.4); font-family: inherit; color: #fff;
  transition: transform 0.15s;
}
.node:hover { transform: translate(-50%, -50%) scale(1.08); }
.node .n-ic { font-size: 32px; }
.node .n-num { position: absolute; top: -8px; left: -8px; width: 26px; height: 26px; border-radius: 50%; background: #0e1433; border: 2px solid var(--gold); font-weight: 900; font-size: 13px; display: grid; place-items: center; }
.node .n-name { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 8px; white-space: nowrap; font-weight: 700; font-size: 13px;
  background: rgba(0, 0, 0, 0.6); padding: 2px 10px; border-radius: 999px; }
.node .n-stars { position: absolute; bottom: -4px; right: -10px; font-size: 13px; }
.node.locked { filter: grayscale(1) brightness(0.55); }
.node.sel { border-color: var(--gold); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.45), 0 0 0 4px var(--gold), 0 0 26px var(--gold); }
.node.current::after { content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 3px solid var(--gold); animation: ringPulse 1.6s infinite; }
@keyframes ringPulse { from { transform: scale(0.85); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
.stage-sheet { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.ss-art { position: relative; height: 110px; border-radius: 12px; overflow: hidden; display: flex; align-items: flex-end; padding: 10px;
  background: radial-gradient(circle at 75% 40%, color-mix(in srgb, var(--sp) 70%, #fff), var(--sb) 60%); border: 2px solid var(--sp); }
.ss-art > span { position: absolute; right: 14px; top: 8px; font-size: 64px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5)); }
.ss-title small { display: block; font-size: 11px; letter-spacing: 3px; color: var(--gold); }
.ss-title b { font-family: var(--title); font-weight: 400; font-size: 26px; text-shadow: 0 2px 4px #000; }
.diff { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.diff button { font-family: inherit; font-weight: 700; padding: 8px; border-radius: 10px; border: 2px solid var(--line); background: rgba(0, 0, 0, 0.3); color: var(--ink); cursor: pointer; }
.diff button.on { background: linear-gradient(#6a8aff, #3a4ac0); border-color: #aab8ff; }
.diff button.hardb.on { background: linear-gradient(#ff6a5a, #a02020); border-color: #ffaa9a; }
.diff button:disabled { opacity: 0.45; cursor: not-allowed; }
.ss-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 14px; }
.ss-row > span { color: var(--muted); flex: none; }
.ss-row b { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.enemy { font-size: 20px; }
.stage-sheet .gbtn.big { flex: none; }

/* ---------- 편성 ---------- */
.sortie-chip { background: linear-gradient(90deg, var(--sb), transparent); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; padding: 5px 14px; font-weight: 700; }
.hardtag { background: #c02a2a; border-radius: 6px; padding: 0 6px; font-size: 12px; }
.back { padding: 6px 12px; }
.fslots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.fslot {
  position: relative; min-height: 186px; border-radius: 16px; padding: 8px 6px 6px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: linear-gradient(180deg, rgba(43, 69, 184, 0.7), rgba(17, 26, 74, 0.85)); border: 2px solid var(--line);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.4);
}
.fslot.empty { justify-content: center; border-style: dashed; background: rgba(17, 26, 74, 0.5); }
.fslot .plus { font-size: 40px; color: var(--muted); }
.fslot .sn { position: absolute; bottom: 4px; left: 8px; font-family: var(--title); font-size: 22px; color: rgba(255, 255, 255, 0.25); }
.fslot.sel { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(255, 210, 90, 0.55); animation: pulse 1.4s infinite; }
.fslot .rm { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: #d02a4a; color: #fff; font-weight: 900; cursor: pointer; padding: 0; z-index: 2; }
.fs-info { display: flex; flex-direction: column; align-items: center; font-size: 11px; color: #ffcf8a; gap: 1px; }
.fs-info span:last-child { color: #7dff9a; }
.form-body, .units-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.form-body > *, .units-body > *, .adv-body > *, .summon-body > * { min-width: 0; }
.roster .card-grid { max-height: calc(100cqh - 470px); min-height: 180px; overflow-y: auto; }
.units-body .roster .card-grid { max-height: calc(100cqh - 300px); }
.form-side h4 { margin: 0 0 6px; }
.checks { font-size: 13px; display: flex; flex-direction: column; gap: 4px; margin: 10px 0 14px; }
.checks .ok { color: #9dffb0; } .checks .warn { color: #ffb070; }
.form-side .sortie { width: 100%; font-family: var(--title); font-weight: 400; font-size: 26px; padding: 14px; }
.form-side .gbtn.big { width: 100%; }

/* ---------- 유닛 상세 ---------- */
.detail { position: sticky; top: 0; }
.d-hero { position: relative; height: 220px; border-radius: 14px; overflow: hidden; margin: -2px -2px 8px;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--wc) 60%, #1e3192), #111a4a 75%); border: 2px solid var(--rc); }
.d-hero .portrait.big { position: absolute; left: 50%; top: 0; height: 100%; transform: translateX(-50%); }

.d-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 10px; background: linear-gradient(transparent, rgba(14, 20, 51, 0.95) 50%); }
.d-name b { font-family: var(--title); font-weight: 400; font-size: 24px; }
.d-name .stars { color: var(--rc); font-size: 13px; }
.lvbar { position: relative; height: 16px; border-radius: 999px; background: rgba(0, 0, 0, 0.5); overflow: hidden; margin-top: 4px; border: 1px solid rgba(255, 255, 255, 0.2); }
.lvbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #6a8aff, #b06aff); }
.lvbar span { position: relative; display: block; text-align: center; font-size: 11px; font-weight: 700; line-height: 14px; }
.evo { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.evo h4 { margin: 0; }
.evo-line { display: flex; align-items: center; gap: 8px; }
.evo-line .arrow, .evo .gbtn.big { width: 100%; margin-top: 8px; }
.sell-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: rgba(120, 20, 40, 0.35); border: 1px solid #a03a5a; border-radius: 10px; padding: 6px 8px; margin-bottom: 8px; }

/* ---------- 소환 ---------- */
.summon-body { display: grid; grid-template-columns: 210px 1fr; gap: 14px; }
.btabs { display: flex; flex-direction: column; gap: 10px; }
.btab {
  position: relative; height: 104px; border-radius: 14px; overflow: hidden; cursor: pointer; padding: 0; font-family: inherit; color: #fff;
  background: linear-gradient(120deg, color-mix(in srgb, var(--wc) 70%, #000), #16215e); border: 2px solid color-mix(in srgb, var(--wc) 60%, #fff);
  filter: brightness(0.7) saturate(0.7); transition: filter 0.15s, transform 0.15s;
}
.btab.on { filter: none; transform: translateX(6px); box-shadow: 0 0 18px var(--wc); border-color: #fff; }
.btab .portrait { position: absolute; right: -6px; top: 0; height: 125%; opacity: 0; }
.btab .portrait.ready { opacity: 1; }
.bt-w { position: absolute; left: 10px; bottom: 8px; font-family: var(--title); font-size: 15px; text-shadow: 0 2px 4px #000; text-align: left; max-width: 68%; line-height: 1.15; }
.banner-art {
  position: relative; border-radius: 20px; overflow: hidden; padding: 20px; min-height: 420px;
  display: grid; grid-template-columns: 1fr auto auto; grid-template-rows: auto 1fr auto auto; gap: 12px;
  border: 3px solid color-mix(in srgb, var(--wc) 60%, #fff);
  background: linear-gradient(115deg, color-mix(in srgb, var(--wc) 55%, #0e1433) 0%, #0e1433 70%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 80px rgba(0, 0, 0, 0.5);
}
.ba-bg { position: absolute; inset: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 72% 45%, rgba(255, 255, 255, 0.07) 0 6deg, transparent 6deg 18deg);
  animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ba-text { position: relative; grid-column: 1; grid-row: 1 / 3; }
.ba-text small { letter-spacing: 4px; color: var(--gold); font-weight: 700; }
.ba-text h2 { font-family: var(--title); font-weight: 400; font-size: 40px; margin: 4px 0; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5); }
.ba-text p { color: #e0dcff; max-width: 320px; font-size: 14px; }
.ba-feat5 { position: relative; grid-column: 2; grid-row: 1 / 3; align-self: center; }
.ba-feat4 { position: relative; grid-column: 3; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 10px; align-self: center; }
.ba-commons { position: relative; grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12px; }
.ba-commons > span:first-child { color: var(--gold); font-weight: 700; }
.lu { background: rgba(0, 0, 0, 0.4); border-radius: 6px; padding: 2px 8px; }
.ba-foot { position: relative; grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.rates { font-size: 12px; color: #d0ccf0; }
.summon-btns { display: flex; gap: 10px; }
.summon-btns .gbtn { min-width: 130px; }
.rate-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0; }
.rate-table td, .rate-table th { padding: 4px 6px; border-bottom: 1px solid #333650; text-align: left; }

/* 소환 연출 */
.reveal { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: radial-gradient(circle, rgba(30, 49, 146, 0.95), rgba(5, 4, 15, 0.97)); animation: fadeIn 0.2s; }
@keyframes fadeIn { from { opacity: 0; } }
.rv-flash { position: absolute; inset: 0; pointer-events: none; animation: flash 0.7s ease-out forwards; background: radial-gradient(circle, #fff, transparent 60%); }
.reveal.best5 .rv-flash { background: radial-gradient(circle, #ffe070, transparent 65%); animation-duration: 1.2s; }
.reveal.best4 .rv-flash { background: radial-gradient(circle, #c080ff, transparent 60%); }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
.rv-cards { display: grid; grid-template-columns: repeat(5, 104px); gap: 12px; }
/* 카드 뒤집기: 뒷면이 가로로 접히고 → 앞면이 펼쳐진다 (3D 변환 없이 어디서나 동작) */
.flip { position: relative; width: 104px; height: 136px; animation: dropIn 0.3s calc(var(--d) - 0.3s) both; }
.flip .back, .flip .front { position: absolute; inset: 0; }
.flip .back { border-radius: 12px; border: 2px solid #0e1433; animation: foldOut 0.18s var(--d) forwards;
  background: repeating-linear-gradient(45deg, #2b45b8 0 8px, #1e3192 8px 16px); box-shadow: 0 0 14px var(--rc); }
.flip .front { transform: scaleX(0); animation: foldIn 0.2s calc(var(--d) + 0.18s) forwards; }
.flip.r5 .back { border-color: var(--gold); box-shadow: 0 0 28px var(--gold); }
.flip.r5 .front .gcard { animation: legend 1.5s calc(var(--d) + 0.4s) 2; }
@keyframes dropIn { from { opacity: 0; transform: translateY(40px) scale(0.8); } }
@keyframes foldOut { to { transform: scaleX(0); } }
@keyframes foldIn { to { transform: scaleX(1); } }
@keyframes legend { 50% { box-shadow: 0 0 40px 10px rgba(255, 210, 90, 0.9); } }
.rv-ok { animation: fadeIn 0.3s 1.4s both; min-width: 160px; }

/* ---------- 도감 ---------- */

/* ---------- 모달·토스트 ---------- */
#modal { position: fixed; inset: 0; z-index: 60; }
.modal-box { background: var(--panel) !important; border: 2px solid var(--gold) !important; border-radius: 18px !important;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 210, 90, 0.25) !important; max-height: 86cqh; overflow-y: auto; }
.modal-box h2, .modal-box h3 { font-family: var(--title); font-weight: 400; }
.confirm-row { justify-content: center; }
.evo-anim { display: flex; justify-content: center; animation: evoPop 0.8s; }
@keyframes evoPop { 0% { transform: scale(0.3); filter: brightness(3); } 60% { transform: scale(1.15); } }
#lobbyToast { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 20; pointer-events: none; opacity: 0;
  background: rgba(10, 8, 30, 0.92); border: 1px solid var(--gold); border-radius: 999px; padding: 8px 18px; font-weight: 700; font-size: 14px; }
#lobbyToast.show { animation: toastIn 2.2s; }
@keyframes toastIn { 0% { opacity: 0; transform: translate(-50%, 10px); } 10%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }


/* ---------- 낮은 화면 (가로 폰) — 같은 배치를 촘촘하게 ---------- */
@container app (max-height: 520px) {
  #topbar { height: 44px; padding: 0 10px; }
  .avatar { width: 32px; height: 32px; font-size: 18px; }
  .pinfo { display: none; }
  .res { padding: 2px 9px 2px 4px; font-size: 12px; } .res svg { font-size: 16px; }
  .gift { width: 36px; height: 36px; font-size: 17px; }
  .icon-btn { width: 34px; height: 34px; font-size: 16px; }
  #screens { top: 44px; bottom: 54px; }
  .screen { padding: 2px 12px 10px; }
  #navbar { height: 54px; padding-bottom: 3px; }
  #navbar::before { height: 42px; bottom: 4px; width: 440px; }
  #navbar button { height: 42px; width: 70px; }
  #navbar svg { font-size: 18px; } #navbar span { font-size: 10px; }
  #navbar button.main { height: 50px; width: 88px; }
  #navbar button.main svg { font-size: 22px; }
  .scr-head { margin: 0 0 6px; gap: 8px; }
  .gtitle { font-size: 20px; }
  /* 홈 */
  .home-logo { display: none; }
  .home-banners { top: 4px; width: 230px; gap: 5px; }
  .hb-head > b { font-size: 14px; }
  .bm-row { padding: 4px 12px 4px 8px; }
  .bm-row .gcard.mini { display: none; }
  .bm-w { font-size: 14px; } .bm-f { font-size: 11px; }
  .home-cta { right: 16px; bottom: 6px; gap: 8px; width: 240px; }
  .slab.party { width: 180px; padding: 6px 16px; } .slab .sl-t { font-size: 16px; } .slab .sl-s { font-size: 11px; }
  .slab.go { width: 240px; padding: 8px 20px; } .slab.go svg { font-size: 30px; } .slab.go .sl-t { font-size: 28px; }
  /* 모험 */
  .adv-body { grid-template-columns: 1fr 250px; height: calc(100% - 38px); min-height: 0; gap: 10px; }
  .node { width: 50px; height: 50px; border-width: 3px; }
  .node .n-ic { font-size: 20px; }
  .node .n-num { width: 20px; height: 20px; font-size: 11px; top: -6px; left: -6px; }
  .node .n-name { font-size: 10px; margin-top: 4px; padding: 1px 6px; }
  .stage-sheet { padding: 8px; gap: 5px; }
  .ss-art { height: 60px; flex: none; } .ss-art > span { font-size: 38px; top: 4px; } .ss-title b { font-size: 18px; }
  .ss-row { padding: 3px 2px; font-size: 12px; }
  .stage-sheet .hint { display: none; }
  .diff button { padding: 5px; font-size: 12px; }
  .stage-sheet .gbtn.big { padding: 9px; font-size: 14px; }
  .mats-strip .res.small { font-size: 10px; padding: 1px 6px; }
  /* 편성·유닛 */
  .fslots { gap: 6px; margin-bottom: 8px; }
  .fslot { min-height: 0; padding: 6px 3px 4px; border-radius: 12px; }
  .fslot .gcard { width: 64px; height: 84px; }
.fslot .gcard .nm { font-size: 9.5px; }
  .fslot.empty { min-height: 98px; }
  .fs-info { display: none; }
  .fslot .sn { font-size: 14px; }
  .fslot .rm { width: 20px; height: 20px; font-size: 10px; top: -5px; right: -5px; }
  .form-body, .units-body { grid-template-columns: 1fr 220px; gap: 10px; }
  .roster .card-grid, .units-body .roster .card-grid { max-height: none; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 6px; }
  .card-grid .gcard { width: 80px; height: 105px; }
.card-grid .gcard .nm { font-size: 10px; }
  .form-side .sortie { font-size: 20px; padding: 10px; }
  .checks { margin: 6px 0 8px; font-size: 12px; }
  .d-hero { height: 150px; }
  .d-name b { font-size: 18px; }
  /* 소환 */
  .summon-body { grid-template-columns: 150px 1fr; gap: 10px; }
  .btabs { gap: 6px; } .btab { height: 64px; } .bt-w { font-size: 12px; }
  .banner-art { min-height: 0; padding: 12px; gap: 8px; }
  .ba-text h2 { font-size: 24px; } .ba-text p { display: none; }
  .filters { margin: 4px 0; gap: 4px; }
  .gcard.hero { width: 110px; height: 144px; }
.gcard.hero .nm { font-size: 12px; }
  .ba-feat4 { gap: 6px; } .ba-feat4 .gcard { width: 70px; height: 92px; }
  .summon-btns .gbtn { min-width: 90px; padding: 8px 12px; font-size: 14px; }
  /* 소환 연출 */
  .reveal { gap: 10px; }
  .rv-cards { grid-template-columns: repeat(5, 70px); gap: 6px; }
  .flip, .rv-cards .gcard { width: 70px; height: 92px; }
.rv-cards .gcard .nm { font-size: 9px; }
}

/* 모바일: 당겨서 새로고침·확대 방지, 노치 영역 여백 */
html, body { overscroll-behavior: none; touch-action: manipulation; }
#topbar { padding-top: env(safe-area-inset-top, 0px); padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); }
#navbar { padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)); }

/* 소환 연출 건너뛰기 / 가방 */
.reveal.skip .flip, .reveal.skip .back, .reveal.skip .front, .reveal.skip .rv-ok, .reveal.skip .front .gcard { animation-duration: 0.01s !important; animation-delay: 0s !important; }
.reveal { cursor: pointer; }
.rv-hint { font-size: 12px; color: var(--muted); animation: fadeIn 0.3s 0.3s both; }
.reveal.done .rv-hint { visibility: hidden; }
.bagfull { color: #ff8a9a; }

/* 능력치 표 */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 5px; margin: 8px 0; text-align: left; }
.stat-grid > div { background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 4px 8px; display: flex; flex-direction: column; }
.stat-grid span { font-size: 11px; color: var(--muted); }
.stat-grid b { font-size: 14px; }
.tags.center { justify-content: center; }
.info-evo { margin-top: 8px; font-size: 13px; }
.ie-link { color: #b8c8ff; text-decoration: underline; cursor: pointer; }
.modal-box .d-hero { margin: 0 0 8px; }
[data-uinfo] { cursor: pointer; }
.lu[data-uinfo]:hover { background: rgba(255, 255, 255, 0.15); }

/* 편성 머리의 출격 버튼 */
.sortie-top { margin-left: auto; font-family: var(--title); font-weight: 400; font-size: 22px; padding: 8px 22px; }
#scr-formation .scr-head { position: sticky; top: -4px; z-index: 4; padding: 6px 0; background: linear-gradient(rgba(17, 26, 74, 0.96), rgba(17, 26, 74, 0.85)); }

/* 유닛 상세: 넓은 화면은 옆 패널, 좁은 화면은 아래에서 올라오는 시트 */
.sheet-x { display: none; }

@container app (max-height: 520px) { .sortie-top { font-size: 17px; padding: 5px 14px; } }

#againBtn { display: block; margin: 14px auto 0; }

/* 퀘스트 */
.gift.quest { position: relative; }
.badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 4px;
  background: #ff3b5c; color: #fff; font-size: 11px; font-weight: 900; line-height: 18px; text-align: center; box-shadow: 0 0 8px #ff3b5c; }
.badge[hidden] { display: none; }
.qtabs { display: flex; gap: 8px; margin-bottom: 6px; }
.qtab { position: relative; flex: 1; max-width: 180px; padding: 10px; border-radius: 12px; font-family: inherit; font-weight: 800; font-size: 15px; cursor: pointer;
  background: rgba(0, 0, 0, 0.35); color: var(--muted); border: 2px solid var(--line); }
.qtab.on { background: linear-gradient(#3552c9, #1e3192); color: #fff; border-color: var(--gold); }
.qreset b { color: var(--gold); }
.qlist { display: flex; flex-direction: column; gap: 8px; }
.qrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px;
  background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.08); }
.qrow.all { background: linear-gradient(90deg, rgba(255, 200, 60, 0.25), rgba(0, 0, 0, 0.3)); border-color: var(--gold); }
.qrow.done:not(.claimed) { border-color: #7dff9a; box-shadow: 0 0 12px rgba(120, 255, 150, 0.25); }
.qrow.claimed { opacity: 0.5; }
.qi { font-size: 26px; text-align: center; }
.qbody b { font-size: 14px; } .qbody small { margin-left: 6px; color: var(--gold); font-size: 11px; }
.qbar { position: relative; height: 16px; border-radius: 999px; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.15); margin-top: 4px; overflow: hidden; }
.qbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #4a8aff, #7dff9a); }
.qrow.all .qbar i { background: linear-gradient(90deg, #ffb020, #ffe27a); }
.qbar span { position: relative; display: block; text-align: center; font-size: 10.5px; font-weight: 700; line-height: 14px; }
.qrew { font-size: 13px; white-space: nowrap; } .qrew b { color: #9fe8ff; }
.qrow .gbtn { min-width: 70px; padding: 7px 10px; font-size: 13px; }

.res { white-space: nowrap; }

/* 공격 대상 배지 (카드 왼쪽 위) */
.abadge { position: absolute; top: 3px; left: 3px; z-index: 1; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 900; line-height: 1; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.85); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.abadge.air { background: linear-gradient(#5ac8ff, #1a78d0); }
.abadge.ground { background: linear-gradient(#c8945a, #7a5020); }

.gcard .lockb { top: 28px; }
.gcard.mini .abadge { width: 16px; height: 16px; font-size: 9px; top: 2px; left: 2px; }

.gcard.hero .abadge { width: 30px; height: 30px; font-size: 16px; }

/* 유닛·편성: 가로 화면 높이를 꽉 채우고 목록·상세가 각자 스크롤 */
#scr-units.on, #scr-formation.on { display: flex; flex-direction: column; overflow: hidden; }
#scr-units .scr-head, #scr-formation .scr-head, .fslots { flex: none; }
.units-body, .form-body { flex: 1; min-height: 0; align-items: stretch; margin-bottom: 4px; }
.units-body > .panel, .form-body > .panel { min-height: 0; overflow-y: auto; }
.roster .card-grid, .units-body .roster .card-grid { max-height: none; min-height: 0; overflow: visible; }
.detail { position: static; }
#scr-formation .scr-head { position: static; }
@container app (max-height: 520px) {
  .filters { flex-direction: row; gap: 6px; margin: 4px 0; }
  .filters .chips:first-child { flex: 1; min-width: 0; }
  .filters .chips:last-child { flex: none; }
  .chip { padding: 3px 8px; font-size: 12px; }
  .roster-head .hint { display: none; }
  .roster { padding: 8px; }
  .ba-commons { flex-wrap: nowrap; overflow: hidden; font-size: 11px; }
  .ba-commons .hint { display: none; }
  .banner-art { grid-template-rows: auto 1fr auto auto; }
  .ba-foot { align-items: center; }
  .rates { font-size: 11px; }
}

/* 편성 (가로 배치): 왼쪽 파티 6칸(2열×3줄) · 가운데 보유 유닛 · 오른쪽 파티 구성 */
.form-body { grid-template-columns: auto minmax(0, 1fr) 240px; }
.fslots { grid-template-columns: repeat(2, 128px); grid-auto-rows: minmax(0, 1fr); gap: 8px; margin: 0; min-height: 0; }
.fslot { min-height: 0; padding: 6px 4px 4px; gap: 3px; }
.fslot .gcard { width: 88px; height: 115px; }
.fslot.empty { min-height: 120px; }
@container app (max-height: 620px) {
  .fslots { grid-template-columns: repeat(2, 96px); gap: 5px; }
  .fslot .gcard { width: 60px; height: 78px; }
.fslot .gcard .nm { font-size: 9px; } .fslot .gcard .stars { font-size: 8px; }
  .fslot .gcard .lvb { font-size: 8px; padding: 0 3px; }
  .fslot .gcard .abadge { width: 14px; height: 14px; font-size: 8px; }
  .fs-info { display: none; }
  .fslot.empty { min-height: 0; }
  .fslot .plus { font-size: 26px; }
  .form-body { grid-template-columns: auto minmax(0, 1fr) 190px; }
}
@container app (max-height: 520px) {
  .ba-feat4 { flex-direction: row; }
  .ba-feat4 .gcard { width: 60px; height: 79px; }
  .gcard.hero { width: 88px; height: 115px; }
.gcard.hero .nm { font-size: 11px; } .gcard.hero .stars { font-size: 10px; }
  .gcard.hero .abadge { width: 20px; height: 20px; font-size: 11px; }
  .banner-art { padding: 10px 12px; gap: 6px; }
  .ba-text h2 { font-size: 22px; margin: 0; }
  .summon-btns .gbtn { padding: 6px 12px; min-width: 80px; }
}

/* 유닛 얼굴 (이름 옆): 3D 모델 초상화의 머리 부분만 동그랗게 */
.face { width: 1.6em; height: 1.6em; border-radius: 50%; object-fit: cover; object-position: 50% 16%; vertical-align: middle; margin-right: 4px;
  background: rgba(255, 255, 255, 0.15); border: 1.5px solid var(--ink); }
.face:not(.ready) { visibility: hidden; }
.res b { font-family: var(--title); font-weight: 400; font-size: 1.05em; letter-spacing: 0.02em; }

/* ---------- 유닛 상세 (가로로 압축: 초상화 | 이름·레벨, 3열 능력치, 두 줄 버튼, 진화 요약) ---------- */
.detail { display: flex; flex-direction: column; gap: 8px; }
.d-head { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: center; }
.d-pic { position: relative; height: 104px; border-radius: 8px; overflow: hidden; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--wc) 60%, #1e3192), var(--night) 80%); }
.d-pic .portrait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; opacity: 0; transition: opacity 0.3s; }
.d-pic .portrait.ready { opacity: 1; }
.d-head.r6 .d-pic, .d-head.r5 .d-pic { border-color: var(--rc); }
.d-id { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.d-id .stars { color: var(--rc); font-size: 12px; } .d-id .stars small { color: var(--muted); font-size: 11px; }
.d-id b { font-family: var(--title); font-weight: 400; font-size: 20px; line-height: 1.1; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.d-sub { font-size: 11px; color: var(--muted); }
.lvbar { height: 14px; margin-top: 2px; background: var(--ink); border: 1.5px solid var(--ink); }
.lvbar i { background: var(--mint); }
.lvbar span { font-size: 10px; line-height: 11px; color: var(--paper); text-shadow: 0 1px 0 var(--ink); }
.stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0; }
.stat-grid > div { padding: 3px 7px; border-radius: 6px; background: rgba(14, 20, 51, 0.55); border: none; }
.stat-grid span { font-size: 10px; }
.stat-grid b { font-size: 13px; font-variant-numeric: tabular-nums; }
.mech { font-size: 11px; color: var(--signal); line-height: 1.4; }
.d-acts { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.d-acts.sub { grid-template-columns: 1fr 1fr 1fr; }
.d-acts .gbtn { padding: 7px 8px; font-size: 13px; white-space: nowrap; }
.d-acts.sub .gbtn { padding: 5px 4px; font-size: 12px; }
.detail .evo { margin: 0; padding-top: 8px; border-top: 2px dashed rgba(244, 247, 255, 0.18); display: flex; flex-direction: column; gap: 5px; }
.evo-head { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.evo-head > span:first-child { color: var(--muted); font-size: 11px; margin-right: 2px; }
.evo-head .face { margin-right: 0; }
.evo-head .stars { font-size: 10px; }
.evo-diff { font-size: 12px; }
.evo-diff s { color: var(--muted); } .evo-diff b { color: var(--mint); }
.evo-new { color: var(--signal); font-size: 11px; }
.detail .evo .mats { gap: 4px; } .detail .evo .mat { font-size: 11px; padding: 2px 6px; }
.detail .evo .gbtn { width: 100%; }
.modal-box .stat-grid { margin: 8px 0 4px; }
@container app (max-height: 520px) {
  .d-head { grid-template-columns: 64px minmax(0, 1fr); gap: 8px; }
  .d-pic { height: 78px; }
  .d-id b { font-size: 16px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container app (max-height: 520px) {
  .detail { gap: 5px; padding: 8px; }
  .d-head { grid-template-columns: 52px minmax(0, 1fr); }
  .d-pic { height: 64px; }
  .d-sub { display: none; }
  .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-grid > div { padding: 2px 6px; }
  .d-acts .gbtn { padding: 5px 6px; }
}

/* ---------- 유닛 화면: 목록 전체 폭 + 오른쪽 사이드바(상세) ---------- */
.units-body { display: block; position: relative; }
.units-body > .roster { height: 100%; transition: margin-right 0.22s ease; }
.units-body.open > .roster { margin-right: 312px; }
#unitDetail { position: absolute; top: 0; right: 0; bottom: 0; width: 300px; overflow-y: auto;
  transform: translateX(calc(100% + 40px)); transition: transform 0.22s ease; box-shadow: 6px 6px 0 var(--ink); }
.units-body.open > #unitDetail { transform: none; }
#unitDetail .sheet-x { display: grid; place-items: center; position: absolute; top: 6px; right: 6px; z-index: 2; width: 28px; height: 28px; padding: 0;
  border-radius: 6px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font-weight: 900; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .units-body > .roster, #unitDetail { transition: none; } }

/* 출전 파티 6칸 (목록 맨 위) */
.party-row { display: flex; align-items: center; gap: 6px; padding: 2px 0 8px; margin-bottom: 6px; border-bottom: 2px dashed rgba(244, 247, 255, 0.18); }
.pr-label { font-size: 12px; font-weight: 700; color: var(--muted); line-height: 1.3; min-width: 52px; }
.pr-label .linkish { padding: 0; font-size: 12px; color: var(--signal); }
.pslot { width: 64px; height: 84px; flex: none; }
.pslot.empty { display: grid; place-items: center; border: 2px dashed rgba(244, 247, 255, 0.35); border-radius: 9px; background: rgba(14, 20, 51, 0.35);
  color: var(--muted); font-size: 24px; cursor: pointer; padding: 0; }
.pslot .gcard.mini .lvb { font-size: 8px; padding: 0 3px; }

/* 상세의 진화 버튼 / 진화 창 */
.evo-btn { width: 100%; display: flex; justify-content: center; align-items: baseline; gap: 6px; }
.evo-btn small { font-weight: 600; opacity: 0.85; }
.evo-btn.ready { background: var(--mint); color: var(--ink); }
.detail .final { text-align: center; }
.evo-pair { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6px 0 10px; }
.evo-pair .arrow { font-size: 24px; color: var(--signal); }
.modal-box .evo-diff { text-align: center; margin-bottom: 8px; }
.evo-need { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 4px; min-width: 260px; }
.evo-need li { display: flex; justify-content: space-between; gap: 16px; padding: 5px 10px; border-radius: 6px; background: rgba(14, 20, 51, 0.55); font-size: 13px; }
.evo-need li b { font-variant-numeric: tabular-nums; }
.evo-need li.ok b { color: var(--mint); } .evo-need li.no b { color: #ff8a9a; }
.modal-box #evoBtn { display: block; margin: 0 auto; min-width: 180px; }

#navbar .badge { top: 2px; right: 20px; }

@container app (max-height: 520px) {
  .units-body.open > .roster { margin-right: 262px; }
  #unitDetail { width: 252px; }
  .party-row { padding-bottom: 5px; margin-bottom: 4px; }
  .pslot { width: 48px; height: 62px; }
  .pslot .gcard.mini { width: 48px; height: 62px; }
  .pslot .gcard.mini .nm, .pslot .gcard.mini .stars { display: none; }
  .pr-label { min-width: 40px; font-size: 10px; }
}