/* 마지막 단지 — 모바일 우선. 375×812 를 기준으로 짠다. */

:root{
  --bg:#0d1016; --bg2:#131924; --panel:#171e2a; --panel2:#1e2634;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --txt:#e9eef6; --dim:#8b99ad; --dim2:#5f6b7d;
  --gold:#ffb340; --green:#5ee39a; --red:#ff6b6b; --blue:#4a9eff; --purple:#b06cff;
  --N:#8d9bb0; --R:#4a9eff; --SR:#b06cff; --SSR:#ffb340;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; height:100%}
body{
  background:var(--bg); color:var(--txt);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard",
       "Malgun Gothic",system-ui,sans-serif;
  overscroll-behavior:none; user-select:none;
}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}
[hidden]{display:none !important}

/* ── 앱 틀 ───────────────────────────────── */
#app{max-width:520px; margin:0 auto; min-height:100%; display:flex; flex-direction:column;
     background:linear-gradient(180deg,#0d1016,#101724 60%,#0d1016)}

/* 상단 자원 바 */
#top{position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:8px;
     padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 10px;
     background:rgba(13,16,22,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
#top .logo{font-weight:800; letter-spacing:-.4px; font-size:15px; margin-right:auto}
#top .logo small{display:block; font-weight:500; font-size:10px; color:var(--dim2); letter-spacing:0}
.res{display:flex; align-items:center; gap:4px; background:var(--panel); border:1px solid var(--line);
     padding:5px 9px; border-radius:999px; font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums}
.res i{font-style:normal; font-size:13px}
.res.snd{padding:5px 8px; font-size:14px; line-height:1}
.res.snd.off{opacity:.42}
#bhud .sp.off{opacity:.45}

/* 본문 */
main{flex:1; padding:14px 14px 96px}
.screen{animation:fade .22s ease}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

h2.t{font-size:17px; margin:0 0 3px; letter-spacing:-.3px}
p.sub{margin:0 0 14px; color:var(--dim); font-size:12.5px}

/* 하단 탭 */
#nav{position:fixed; left:0; right:0; bottom:0; z-index:40;
     max-width:520px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr);
     background:rgba(16,20,28,.96); backdrop-filter:blur(12px); border-top:1px solid var(--line);
     padding-bottom:var(--safe-b)}
#nav button{padding:9px 0 10px; display:flex; flex-direction:column; align-items:center; gap:3px;
            color:var(--dim2); font-size:10.5px; font-weight:600; transition:color .15s}
#nav button i{font-style:normal; font-size:19px; filter:grayscale(1) opacity(.55); transition:filter .15s}
#nav button.on{color:var(--gold)}
#nav button.on i{filter:none}

/* ── 카드 공통 ───────────────────────────── */
.card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:13px}
.card + .card{margin-top:10px}
.row{display:flex; align-items:center; gap:10px}
.grow{flex:1; min-width:0}
.muted{color:var(--dim); font-size:12px}
.tiny{font-size:11px; color:var(--dim2)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px;
     padding:10px 16px; border-radius:11px; font-weight:700; font-size:14px;
     background:var(--panel2); border:1px solid var(--line2); transition:transform .08s}
.btn:active{transform:scale(.97)}
.btn.pri{background:linear-gradient(180deg,#ffc45c,#f59a1e); color:#2a1c05; border-color:#ffca6d}
.btn.go{background:linear-gradient(180deg,#5ee39a,#2fb873); color:#062616; border-color:#6ff0a8}
.btn.wide{width:100%}
.btn[disabled]{opacity:.38; pointer-events:none}

/* ── 거점 ────────────────────────────────── */
.hero{position:relative; border-radius:16px; overflow:hidden; padding:18px 16px;
      background:linear-gradient(135deg,#1b2534,#141b27); border:1px solid var(--line)}
.hero::after{content:"🏢"; position:absolute; right:-8px; bottom:-14px; font-size:88px; opacity:.07}
.hero h3{margin:0 0 4px; font-size:19px; letter-spacing:-.4px}
.hero p{margin:0; color:var(--dim); font-size:12.5px}
.hero .prog{margin-top:12px; height:6px; border-radius:99px; background:rgba(0,0,0,.4); overflow:hidden}
.hero .prog i{display:block; height:100%; background:linear-gradient(90deg,#f59a1e,#ffd36b)}

.fac{display:flex; align-items:center; gap:11px}
.fac .ic{width:42px; height:42px; display:grid; place-items:center; font-size:21px;
         background:var(--panel2); border:1px solid var(--line); border-radius:11px; flex:none}
.fac .lv{font-size:11px; color:var(--gold); font-weight:700}

/* ── 스테이지 ────────────────────────────── */
.stage{display:flex; align-items:center; gap:11px; position:relative}
.stage .no{width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:10px;
           background:var(--panel2); border:1px solid var(--line); font-weight:800; font-size:14px}
.stage.done .no{background:rgba(94,227,154,.14); border-color:rgba(94,227,154,.35); color:var(--green)}
.stage.lock{opacity:.4}
.stars{letter-spacing:1px; font-size:11px; color:var(--gold)}

/* ── 생존자 ──────────────────────────────── */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:9px}
.su{position:relative; border-radius:13px; overflow:hidden; background:var(--panel);
    border:1px solid var(--line); padding:9px 7px 8px; text-align:center; transition:transform .08s}
.su:active{transform:scale(.96)}
/* 이모지일 땐 38px 로 충분했지만 일러스트가 들어오면서 너무 작아 알아볼 수가 없다 */
.su .face{font-size:34px; line-height:1; height:62px; display:grid; place-items:center}
.su .face img{width:auto; height:62px; max-width:100%; object-fit:contain;
              filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.su .nm{font-size:11.5px; font-weight:700; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.su .gg{position:absolute; top:5px; left:5px; font-size:8.5px; font-weight:800; padding:1.5px 4px;
        border-radius:4px; background:rgba(0,0,0,.45)}
.su .lvb{font-size:10px; color:var(--dim); margin-top:1px}
.su .st{font-size:9px; color:var(--gold); letter-spacing:.5px; height:11px}
.su.pick{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset}
.su .no-{position:absolute; inset:0; background:rgba(0,0,0,.55); display:grid; place-items:center;
         font-size:11px; color:var(--dim)}
.su .ord{position:absolute; top:5px; right:5px; width:17px; height:17px; border-radius:50%;
         background:var(--gold); color:#2a1c05; font-size:10px; font-weight:800; display:grid; place-items:center}

/* 등급색 */
.g-N{color:var(--N)} .g-R{color:var(--R)} .g-SR{color:var(--SR)} .g-SSR{color:var(--SSR)}
.bd-N{border-color:rgba(141,155,176,.5)} .bd-R{border-color:rgba(74,158,255,.5)}
.bd-SR{border-color:rgba(176,108,255,.55)} .bd-SSR{border-color:rgba(255,179,64,.6)}
.bg-SSR{background:linear-gradient(180deg,rgba(255,179,64,.13),var(--panel))}
.bg-SR{background:linear-gradient(180deg,rgba(176,108,255,.11),var(--panel))}

/* ── 모집 ────────────────────────────────── */
.pullbox{text-align:center; padding:22px 16px;
         background:radial-gradient(120% 90% at 50% 0%,rgba(255,179,64,.16),transparent 62%),var(--panel);
         border:1px solid var(--line); border-radius:16px}
.pullbox .big{font-size:44px; margin-bottom:6px}
.pity{margin-top:12px; font-size:11.5px; color:var(--dim)}
.pity b{color:var(--gold)}

/* ── 전투 ────────────────────────────────── */
#battle{position:fixed; inset:0; z-index:100; background:#0a0d13; display:flex; flex-direction:column;
        max-width:520px; margin:0 auto}
#bhud{display:flex; align-items:center; gap:8px; padding:calc(env(safe-area-inset-top,0px) + 8px) 12px 8px;
      border-bottom:1px solid var(--line); background:rgba(10,13,19,.9)}
#bhud .sup{display:flex; align-items:center; gap:5px; font-weight:800; font-size:14px;
           font-variant-numeric:tabular-nums; color:var(--gold)}
#bhud .wv{flex:1; height:5px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden}
#bhud .wv i{display:block; height:100%; background:linear-gradient(90deg,#ff6b6b,#ffb340); transition:width .3s}
#bhud .x{font-size:19px; color:var(--dim); padding:0 4px}
#bhud .sp{font-size:11.5px; font-weight:800; padding:4px 8px; border-radius:8px;
          background:var(--panel2); border:1px solid var(--line)}

/* ★캔버스가 제 격자를 그리므로 배경에 줄무늬를 깔면 안 된다 — 칸 수가 두 배로 보인다 */
#fieldwrap{flex:1; position:relative; min-height:0;
  background:
    radial-gradient(120% 40% at 50% 0%,rgba(255,60,60,.12),transparent 60%),
    linear-gradient(180deg,#1a2130,#10161f 55%,#0c1119)}
#field{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:manipulation}

#deck{display:flex; gap:7px; padding:9px 10px calc(9px + var(--safe-b)); overflow-x:auto;
      border-top:1px solid var(--line); background:rgba(14,18,26,.96)}
#deck::-webkit-scrollbar{display:none}
.dk{position:relative; flex:none; width:60px; border-radius:11px; background:var(--panel);
    border:1px solid var(--line); padding:6px 3px 5px; text-align:center; overflow:hidden}
.dk .f{font-size:23px; line-height:1; height:34px; display:grid; place-items:center}
.dk .f img{width:auto; height:34px; max-width:100%; object-fit:contain}
.dk .c{font-size:11px; font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums}
.dk.sel{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset; background:rgba(255,179,64,.1)}
.dk.poor{opacity:.45}
.dk .cdmask{position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,.62);
            display:grid; place-items:center; font-size:12px; font-weight:800; color:#fff}

#btoast{position:absolute; left:50%; top:16%; transform:translateX(-50%); z-index:5;
        background:rgba(0,0,0,.8); border:1px solid var(--line2); color:#fff;
        padding:7px 14px; border-radius:999px; font-size:12.5px; font-weight:600;
        opacity:0; transition:opacity .2s; pointer-events:none; white-space:nowrap}
#btoast.on{opacity:1}

.shake{animation:shk .28s}
@keyframes shk{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* ── 시트 / 모달 ─────────────────────────── */
#sheet{position:fixed; inset:0; z-index:200; display:flex; align-items:flex-end; justify-content:center;
       background:rgba(0,0,0,.66); backdrop-filter:blur(3px)}
#sheet .box{width:100%; max-width:520px; background:var(--bg2); border-top-left-radius:20px;
            border-top-right-radius:20px; border:1px solid var(--line); border-bottom:0;
            padding:18px 16px calc(20px + var(--safe-b)); max-height:88vh; overflow:auto;
            animation:up .26s cubic-bezier(.2,.9,.3,1)}
@keyframes up{from{transform:translateY(24px); opacity:.4} to{transform:none; opacity:1}}
#sheet h3{margin:0 0 10px; font-size:17px; letter-spacing:-.3px}
.grab{width:34px; height:4px; border-radius:99px; background:var(--line2); margin:0 auto 14px}

/* 결과 */
.result{text-align:center; padding:6px 0 2px}
.result .bigstars{font-size:34px; letter-spacing:4px; color:var(--gold); margin-bottom:6px}
.result h3{font-size:22px; margin:0 0 4px}
.reward{display:flex; justify-content:center; gap:14px; margin:14px 0 4px}
.reward div{background:var(--panel); border:1px solid var(--line); border-radius:11px;
            padding:9px 15px; font-weight:800; font-size:14px}

/* 뽑기 연출 */
.pullone{text-align:center; padding:10px 0}
.pullone .f{font-size:64px; animation:pop .4s cubic-bezier(.2,1.5,.4,1)}
@keyframes pop{from{transform:scale(.3); opacity:0} to{transform:none; opacity:1}}
.pullgrid{display:grid; grid-template-columns:repeat(5,1fr); gap:7px; margin-top:6px}
.pullgrid .c{border-radius:10px; border:1px solid var(--line); background:var(--panel);
             padding:7px 2px; text-align:center}
.pullgrid .c .f{font-size:22px}
.pullgrid .c .n{font-size:8.5px; color:var(--dim); white-space:nowrap; overflow:hidden}
.newtag{position:absolute; top:3px; right:3px; font-size:8px; background:var(--red);
        color:#fff; padding:1px 3px; border-radius:3px; font-weight:800}

/* 상세 */
.statline{display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--line);
          font-size:13px}
.statline span:last-child{font-weight:700; font-variant-numeric:tabular-nums}