/* 오토 아레나: 기물 군단 — 다크 판타지 보드 오토배틀러 */
:root{
  --bg0:#0c0814; --bg1:#15101f; --bg2:#1d1630;
  --ink:#f3eefb; --mut:#a99fc4; --dim:#6f6790;
  --gold:#ffcf4a; --gold2:#e8a52a;
  --line:rgba(255,255,255,.10);
  --c1:#8a93a6; --c2:#4cae6a; --c3:#3d8bd6; --c4:#a85fd6; --c5:#e8a52a; /* 비용 색 */
  --good:#5fd08a; --bad:#ff5d6c; --mana:#3aa0ff;
  --safe-t:env(safe-area-inset-top); --safe-b:env(safe-area-inset-bottom);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg0);
  color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo",system-ui,sans-serif;
  -webkit-user-select:none;user-select:none;touch-action:none}

#topbar{position:fixed;top:0;left:0;right:0;height:46px;z-index:40;display:flex;align-items:center;gap:10px;
  padding:calc(var(--safe-t)) 12px 0;background:linear-gradient(180deg,rgba(12,8,20,.92),rgba(12,8,20,.55) 70%,transparent);
  font-size:14px}
#topbar .back{color:var(--mut);text-decoration:none;font-weight:600}
#topbar .brand{font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:5px}
#topbar .brand .ic{font-size:17px}
#topbar .spacer{flex:1}
#topbar .hs{color:var(--mut);font-size:12px}
#topbar .hs b{color:var(--gold);font-weight:800;margin-left:3px}

#stage{position:fixed;inset:0}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;
  background:radial-gradient(120% 80% at 50% 12%,#241a3c 0%,#15101f 46%,#0c0814 100%)}

/* ===== 패널 (플레이어/시너지) ===== */
.panel{position:absolute;z-index:20;background:rgba(18,13,32,.72);border:1px solid var(--line);
  border-radius:13px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 8px 26px rgba(0,0,0,.4);padding:8px;font-size:12px}
#players{top:calc(50px + var(--safe-t));left:8px;width:152px;display:flex;flex-direction:column;gap:5px}
.prow{display:flex;align-items:center;gap:7px;padding:3px 5px;border-radius:8px;position:relative}
.prow.you{background:rgba(255,207,74,.12);outline:1px solid rgba(255,207,74,.35)}
.prow.dead{opacity:.34;filter:grayscale(.7)}
.prow .pav{width:18px;height:18px;border-radius:6px;flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#0c0814}
.prow .pnm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.prow.you .pnm{color:var(--gold)}
.prow .php{width:34px;text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.prow .pbar{position:absolute;left:5px;right:5px;bottom:1px;height:2px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.prow .pbar i{display:block;height:100%;background:linear-gradient(90deg,#ff5d6c,#ffcf4a)}
.prow .vs{position:absolute;right:4px;top:-2px;font-size:9px;color:var(--mut)}

#synergy{top:calc(50px + var(--safe-t));right:8px;width:158px;display:flex;flex-direction:column;gap:4px;max-height:62vh;overflow:auto}
#synergy .stt{font-size:10px;color:var(--dim);font-weight:700;letter-spacing:.04em;padding:0 2px 2px}
.syn{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:8px;background:rgba(255,255,255,.04)}
.syn.on{background:rgba(120,90,200,.22);outline:1px solid rgba(160,120,230,.4)}
.syn .si{font-size:13px;width:15px;text-align:center}
.syn .sn{flex:1;min-width:0;font-weight:600;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.syn .sc{font-weight:800;font-variant-numeric:tabular-nums;font-size:11px;color:var(--mut)}
.syn.on .sc{color:var(--gold)}
.syn .tier{font-size:9px;color:var(--dim)}
.syn.on .tier{color:#cdbcff}

/* ===== 라운드 배너 / 토스트 ===== */
#roundBanner{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);z-index:30;text-align:center;
  pointer-events:none;text-shadow:0 4px 18px rgba(0,0,0,.7);animation:bnr 1.7s ease forwards}
#roundBanner .bt{font-size:30px;font-weight:900;letter-spacing:-.02em}
#roundBanner .bs{font-size:14px;color:var(--gold);font-weight:700;margin-top:2px}
@keyframes bnr{0%{opacity:0;transform:translate(-50%,-40%) scale(.9)}14%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0}}
#toast{position:absolute;left:50%;top:54px;transform:translateX(-50%);z-index:34;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.tmsg{background:rgba(20,14,34,.92);border:1px solid var(--line);color:var(--ink);padding:7px 13px;border-radius:11px;
  font-size:13px;font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,.4);animation:tm 1.9s ease forwards}
.tmsg.bad{color:#ffd0d4}.tmsg.good{color:#cdffd9}
@keyframes tm{0%{opacity:0;transform:translateY(-8px)}12%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0;transform:translateY(-6px)}}

/* ===== 선택 기물 정보 ===== */
#unitInfo{position:absolute;z-index:33;left:50%;bottom:172px;transform:translateX(-50%);
  background:rgba(20,14,34,.96);border:1px solid var(--line);border-radius:13px;padding:10px 12px;width:248px;
  box-shadow:0 10px 30px rgba(0,0,0,.5)}
#unitInfo .ut{display:flex;align-items:center;gap:8px;margin-bottom:6px}
#unitInfo .ut .uic{font-size:22px}
#unitInfo .ut .un{font-weight:800;font-size:15px}
#unitInfo .ut .ust{color:var(--gold);font-size:12px;font-weight:800}
#unitInfo .traits{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:6px}
#unitInfo .tg{font-size:10px;background:rgba(255,255,255,.07);border-radius:6px;padding:2px 6px;color:var(--mut)}
#unitInfo .ab{font-size:11px;color:var(--mut);line-height:1.4;margin-bottom:8px}
#unitInfo .ab b{color:#cdbcff}
#unitInfo .row{display:flex;gap:7px}
#unitInfo button{flex:1;padding:8px;border:0;border-radius:9px;font-weight:800;font-size:13px;cursor:pointer}
#unitInfo .sell{background:#3a2a1a;color:var(--gold)}
#unitInfo .close{background:rgba(255,255,255,.08);color:var(--ink)}

/* ===== 하단 도크 ===== */
#dock{position:absolute;left:0;right:0;bottom:0;z-index:25;padding:7px 8px calc(7px + var(--safe-b));
  background:linear-gradient(0deg,rgba(8,5,14,.96),rgba(8,5,14,.78) 60%,transparent);
  display:flex;flex-direction:column;gap:7px}
#shopRow{display:flex;gap:7px;align-items:stretch}
#shopBtns{display:flex;flex-direction:column;gap:6px;flex:none}
.dbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:58px;flex:1;
  border:1px solid var(--line);border-radius:11px;background:rgba(28,20,46,.9);color:var(--ink);cursor:pointer;padding:3px}
.dbtn .bi{font-size:16px;line-height:1}
.dbtn .bl{font-size:9px;color:var(--mut);margin-top:1px}
.dbtn .bc{font-size:10px;font-weight:800;color:var(--gold)}
.dbtn:active{transform:scale(.96)}
.dbtn:disabled{opacity:.4;cursor:default}
#shop{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;min-width:0}
.scard{position:relative;border-radius:11px;overflow:hidden;cursor:pointer;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(40,28,64,.95),rgba(22,15,38,.95));display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;padding:8px 4px 5px;min-width:0;transition:transform .1s}
.scard:active{transform:scale(.95)}
.scard.empty{opacity:.28;pointer-events:none}
.scard.cant{opacity:.55}
.scard .si2{font-size:26px;line-height:1;margin-bottom:3px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.scard .sn2{font-size:11px;font-weight:700;text-align:center;line-height:1.05;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;width:100%}
.scard .str{display:flex;gap:2px;flex-wrap:wrap;justify-content:center;margin:2px 0}
.scard .tag2{font-size:8.5px;color:var(--mut);line-height:1.1;text-align:center;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.scard .cost{position:absolute;top:0;left:0;right:0;height:4px}
.scard .price{position:absolute;bottom:3px;right:5px;font-size:11px;font-weight:800;color:var(--gold)}
.scard .price .gc{font-size:9px}
.cb1{border-top:3px solid var(--c1)} .cb2{border-top:3px solid var(--c2)}
.cb3{border-top:3px solid var(--c3)} .cb4{border-top:3px solid var(--c4)} .cb5{border-top:3px solid var(--c5)}

#ctrlRow{display:flex;align-items:center;gap:8px}
.meter{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap}
.meter .mi{font-size:13px}
.meter b{font-variant-numeric:tabular-nums}
.meter.gold b{color:var(--gold);font-size:16px;font-weight:900}
.meter.hp b{color:#ff869a}
.meter .mlab{font-size:11px;color:var(--mut)}
.meter.lvl{flex-direction:column;align-items:flex-start;gap:2px}
.meter.lvl .xpbar{width:54px;height:4px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.meter.lvl .xpbar i{display:block;height:100%;background:linear-gradient(90deg,#7a5fd6,#cdbcff)}
.meter.rnd .mlab{margin-right:2px}
.cspacer{flex:1}
.iconbtn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:rgba(28,20,46,.9);
  color:var(--ink);font-size:16px;cursor:pointer}
.readybtn{padding:9px 16px;border:0;border-radius:11px;font-weight:900;font-size:14px;cursor:pointer;
  background:linear-gradient(180deg,#6a4fc0,#4a2f9a);color:#fff;box-shadow:0 4px 14px rgba(90,50,180,.5)}
.readybtn:active{transform:scale(.96)}
.readybtn.fight{background:linear-gradient(180deg,#d04a5a,#9a2f3f);box-shadow:0 4px 14px rgba(180,50,70,.5);pointer-events:none}

/* ===== 오버레이 화면 ===== */
.screen{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(8,5,14,.72);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.screen.hidden,.panel.hidden,#dock.hidden,#roundBanner.hidden,#unitInfo.hidden{display:none!important}
.card{width:100%;max-width:380px;background:linear-gradient(180deg,#1d1630,#140f24);border:1px solid var(--line);
  border-radius:22px;padding:26px 22px;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.card .logo{font-size:54px;line-height:1;margin-bottom:6px;filter:drop-shadow(0 6px 16px rgba(150,100,255,.4))}
.card h1{margin:0 0 4px;font-size:27px;font-weight:900;letter-spacing:-.02em}
.card h1 small{display:block;font-size:12px;color:var(--mut);font-weight:600;margin-top:3px;letter-spacing:.02em}
.card .tag{color:var(--mut);font-size:13.5px;line-height:1.6;margin:6px 0 16px}
.card .tag b{color:var(--ink)}
.feats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:18px;text-align:left}
.feat{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mut);background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:10px;padding:8px 9px}
.feat span{font-size:15px}
.play{width:100%;padding:14px;border:0;border-radius:14px;font-weight:900;font-size:16px;cursor:pointer;
  background:linear-gradient(180deg,#ffcf4a,#e8a52a);color:#2a1a05;box-shadow:0 6px 18px rgba(232,165,42,.4)}
.play:active{transform:scale(.98)}
.howto{width:100%;margin-top:9px;padding:11px;border:1px solid var(--line);border-radius:13px;background:transparent;
  color:var(--mut);font-weight:700;font-size:13px;cursor:pointer}
.card.help{max-width:420px;text-align:left}
.card.help h2{margin:0 0 12px;font-size:20px;text-align:center}
.card.help ul{margin:0 0 16px;padding-left:18px;color:var(--mut);font-size:13px;line-height:1.65}
.card.help li{margin-bottom:9px}
.card.help b{color:var(--ink)}
.placeline{color:var(--mut);font-size:14px;margin:4px 0 12px}
.placeline b{color:var(--gold);font-size:18px}
.scorebox{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0 0 8px}
.scorebox span{font-size:12px;color:var(--mut)}
.scorebox b{font-size:40px;font-weight:900;color:var(--gold);letter-spacing:-.02em}
.bestline{color:var(--mut);font-size:13px;margin:0 0 18px}
.bestline b{color:var(--ink)}

@media (max-width:560px){
  #players{width:128px}
  #synergy{width:138px}
  .feats{grid-template-columns:1fr}
  #unitInfo{bottom:178px}
}
@media (max-height:520px){
  #players,#synergy{max-height:54vh}
}