:root{
  --bg:#0d1118;--panel:#161c27;--panel2:#1d2533;--line:#2a3446;--text:#eef2f8;--dim:#8d97ab;
  --gold:#ffc83d;--gem:#5ee6ff;--accent:#ff5b3d;--accent2:#ff8a3d;--red:#ff4d6a;--ok:#5fe07f;
  --t0:#c9d1dc;--t1:#5fe07f;--t2:#4aa8ff;--t3:#b46cff;--t4:#ffa53a;--t5:#ff4d6a;--t6:#ffe066;
}
*{box-sizing:border-box}
html,body{margin:0;background:radial-gradient(1200px 600px at 50% -10%,#1c2740 0,#0d1118 60%) fixed;color:var(--text);
  font-family:"Noto Sans KR","Malgun Gothic",system-ui,sans-serif;-webkit-tap-highlight-color:transparent;user-select:none}
/* 확대 막기 (dnd2 10-23, 이 게임 틀 안에서만 — 사이트 다른 화면은 그대로 확대됨)
   뽑기 · 합성을 빠르게 두 번 누르면 폰 브라우저가 '두 번 탭 확대'로 화면을 키웠음 → 게임 전체는 manipulation(두 번 탭 확대 없음, 스크롤 · 핀치는 됨)
   게임판은 끌기 전용(none: 스크롤 · 핀치도 없음), 위 막대 · 아래 조작판은 버튼만 있어 핀치도 막음. 창 · 상태창은 글을 읽으니 핀치 확대는 남겨 둠 */
html{touch-action:manipulation}
#stageWrap{touch-action:none}
#hud,#ctrl{touch-action:pan-x pan-y}
.jua{font-family:"Jua","Noto Sans KR",sans-serif;font-weight:400}
button{font:inherit;color:var(--text);cursor:pointer;border:0;background:none}
button:disabled{cursor:default}

#app{max-width:1300px;margin:0 auto;padding:10px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:10px;
  grid-template-areas:"hud hud" "stage side" "ctrl side"}
@media (max-width:1100px){#app{grid-template-columns:1fr;grid-template-areas:"hud" "stage" "ctrl" "side";padding:6px;gap:6px}}

/* HUD */
#hud{grid-area:hud;display:flex;align-items:center;gap:14px;padding:8px 14px;background:linear-gradient(180deg,#1e2738,#161c27);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 4px 18px rgba(0,0,0,.35);flex-wrap:wrap}
.hud-round{display:flex;align-items:baseline;gap:6px}
.hud-round .r{font-size:30px;line-height:1;color:#fff}
.hud-round .of{color:var(--dim);font-size:14px}
.hud-diff{font-size:12px;padding:2px 8px;border-radius:10px;background:#2a3446;color:var(--dim)}
.hud-timer{width:110px}
.hud-timer .lbl{font-size:12px;color:var(--dim);display:flex;justify-content:space-between}
.pbar{height:8px;border-radius:6px;background:#0a0e15;overflow:hidden;border:1px solid #273044}
.pbar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4aa8ff,#7bc6ff);transition:width .15s linear}
.hud-cap{flex:1;min-width:200px}
.hud-cap .lbl{display:flex;justify-content:space-between;font-size:13px;color:var(--dim)}
.hud-cap .lbl b{font-size:18px;color:#fff}
.hud-cap .pbar{height:12px}
.hud-cap .pbar>i{background:linear-gradient(90deg,#5fe07f,#ffc83d 55%,#ff4d6a)}
.hud-cap.danger .lbl b{color:var(--red);animation:blink .6s infinite alternate}
@keyframes blink{to{opacity:.4}}
.hud-boss{display:none;min-width:170px}
.hud-boss.on{display:block}
.hud-boss .lbl{font-size:12px;color:var(--red);display:flex;justify-content:space-between}
.hud-boss .pbar>i{background:linear-gradient(90deg,#ff4d6a,#ff8a3d)}
.money{display:flex;gap:12px;font-size:20px}
.money span{display:flex;align-items:center;gap:6px}
.coin{display:inline-block;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3b0,#ffc83d 45%,#c48a10);box-shadow:0 0 0 1px #8a5d00 inset}
.gem{display:inline-block;width:13px;height:13px;transform:rotate(45deg);background:linear-gradient(135deg,#d7fbff,#5ee6ff 50%,#1a8fb0);box-shadow:0 0 6px rgba(94,230,255,.6)}
.hud-btns{display:flex;gap:6px}
.ibtn{background:#2a3446;border:1px solid #36425a;border-radius:10px;padding:6px 10px;font-size:13px}
.ibtn:hover{background:#34405a}

/* 무대 */
#stageWrap{grid-area:stage;position:relative;width:100%;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 8px 30px rgba(0,0,0,.45);background:#1d3a24}
#stage{position:absolute;left:0;top:0;width:960px;height:560px;transform-origin:0 0}
#shake{position:absolute;inset:0}
#bg,#fx{position:absolute;left:0;top:0}
#fx{pointer-events:none}
#units,#enemies{position:absolute;inset:0}
#enemies{pointer-events:none}
.cell{position:absolute;width:96px;height:90px;display:flex;align-items:flex-end;justify-content:center;cursor:pointer}
.cell.bench{height:48px}
.cell.sel::before{content:"";position:absolute;inset:3px;border-radius:12px;border:2px solid #fff;box-shadow:0 0 14px rgba(255,255,255,.5);animation:selpulse 1s infinite alternate}
@keyframes selpulse{to{border-color:rgba(255,255,255,.4)}}
.cell.drop::before{content:"";position:absolute;inset:3px;border-radius:12px;border:2px dashed #ffc83d}
.u{position:relative;width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.u .base{position:absolute;bottom:9px;left:50%;width:62px;height:16px;margin-left:-31px;border-radius:50%;
  background:radial-gradient(ellipse at center,var(--tc) 0,transparent 70%);opacity:.75}
.u.t4 .base,.u.t5 .base,.u.t6 .base{width:80px;margin-left:-40px;height:20px;animation:glow 1.4s infinite alternate}
@keyframes glow{to{opacity:.35}}
.u img{position:relative;bottom:12px;image-rendering:pixelated;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5));transition:transform .08s}
.u.hit img{transform:scale(1.08)}
.u .mana{position:absolute;bottom:4px;left:50%;width:46px;margin-left:-23px;height:4px;border-radius:3px;background:rgba(0,0,0,.55)}
.u .mana i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#3d7dff,#7ad0ff)}
.u .tier{position:absolute;left:6px;top:5px;font-size:10px;line-height:1;padding:2px 4px;border-radius:6px;background:rgba(0,0,0,.55);color:var(--tc);font-weight:700}
.u .up{position:absolute;right:6px;top:4px;width:18px;height:18px;border-radius:50%;background:var(--gold);color:#3a2600;font-size:13px;font-weight:900;
  display:none;align-items:center;justify-content:center;box-shadow:0 0 10px var(--gold);animation:bob .7s infinite alternate}
.u.can .up{display:flex}
@keyframes bob{to{transform:translateY(-3px)}}
/* 끄는 그림 (game.js): 상자 크기를 고정하고(PC 40 · 폰 64, game.js 가 정함) translate3d 로만 옮김 — 예전엔 크기 없는 img 를 left/top + translate(-50%,-60%) 로 옮겨 파이어폭스 폰에서 지나간 자리에 잔상이 남았음 */
.ghost{position:fixed;left:0;top:0;width:40px;height:40px;pointer-events:none;z-index:50;will-change:transform;contain:strict}
.ghost img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;opacity:.88}

.en{position:absolute;left:0;top:0;will-change:transform;display:flex;flex-direction:column;align-items:center}
.en .hp{width:34px;height:4px;background:rgba(0,0,0,.6);border-radius:2px;margin-bottom:2px;overflow:hidden}
.en .hp i{display:block;height:100%;background:#5fe07f;width:100%}
.en.boss .hp{width:90px;height:7px;border:1px solid #000}
.en.boss .hp i{background:linear-gradient(90deg,#ff4d6a,#ff8a3d)}
.en.chal .hp i{background:linear-gradient(90deg,#5ee6ff,#b46cff)}
.en img{image-rendering:pixelated;filter:drop-shadow(0 3px 2px rgba(0,0,0,.45))}
.en.stun img{filter:drop-shadow(0 0 4px #ffe066) brightness(1.15)}
.en.slow img{filter:drop-shadow(0 0 4px #7ad0ff) hue-rotate(-10deg)}
.en.die{transition:opacity .35s,transform .35s;opacity:0}
.en .tag{font-size:11px;color:#fff;background:rgba(0,0,0,.6);padding:0 5px;border-radius:6px;margin-bottom:1px;white-space:nowrap}

/* 컨트롤 */
#ctrl{grid-area:ctrl;display:grid;grid-template-columns:200px 1fr;gap:8px}
@media (max-width:640px){#ctrl{grid-template-columns:1fr}}
.summon{position:relative;border-radius:14px;padding:12px;background:linear-gradient(180deg,#ff6b3d,#e0401f);box-shadow:0 4px 0 #9b2a12,0 8px 20px rgba(255,91,61,.35);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:86px}
.summon:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #9b2a12}
.summon:disabled{filter:grayscale(.7) brightness(.7)}
.summon .t{font-size:28px;line-height:1}
.summon .c{font-size:14px;display:flex;align-items:center;gap:5px}
.summon .k{position:absolute;right:8px;top:6px;font-size:10px;opacity:.7}
.ctrl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
@media (max-width:640px){.ctrl-grid{grid-template-columns:repeat(4,1fr)}}
.cbtn{position:relative;background:linear-gradient(180deg,#273246,#1e2738);border:1px solid #344058;border-radius:12px;padding:8px 4px;
  display:flex;flex-direction:column;align-items:center;gap:2px;font-size:13px;min-height:40px;justify-content:center}
.cbtn:hover:not(:disabled){background:linear-gradient(180deg,#2f3c55,#253047)}
.cbtn:disabled{opacity:.45}
.cbtn .ico{font-size:18px;line-height:1}
.cbtn .sub{font-size:11px;color:var(--dim)}
.cbtn .badge{position:absolute;right:6px;top:4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.quick{grid-column:1/-1;display:flex;align-items:center;gap:6px;min-height:52px;padding:6px 10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;flex-wrap:wrap}
.quick .lbl{font-size:12px;color:var(--dim);margin-right:4px}
.qitem{display:flex;align-items:center;gap:4px;padding:3px 10px 3px 4px;border-radius:20px;background:#232c3d;border:1px solid var(--tc);font-size:13px;animation:qin .3s}
.qitem:hover{background:#2c3850}
.qitem img{width:36px;height:36px;object-fit:contain;image-rendering:pixelated}
@keyframes qin{from{transform:scale(.8);opacity:0}}

/* 사이드 */
#side{grid-area:side;display:flex;flex-direction:column;gap:10px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px}
#unitCard{min-height:300px}
.uc-head{display:flex;gap:10px;align-items:center}
.uc-art{width:96px;height:96px;flex:none;border-radius:12px;background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--tc) 35%,transparent),#0f141d 70%);border:1px solid var(--tc);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.uc-art img{width:92px;height:92px;object-fit:contain}
.uc-name{font-size:22px;line-height:1.1}
.chip{display:inline-block;font-size:11px;padding:1px 7px;border-radius:9px;margin:4px 3px 0 0;font-weight:700}
.chip.tier{border:1px solid var(--tc);color:var(--tc)}
.chip.type{color:#111}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:10px;text-align:center}
.stats div{background:#10151f;border-radius:8px;padding:5px 2px}
.stats small{display:block;font-size:10px;color:var(--dim)}
.stats b{font-size:14px}
.box{margin-top:8px;padding:8px 10px;border-radius:10px;background:#10151f;font-size:13px;line-height:1.5}
.box .h{font-weight:700;margin-bottom:2px;display:flex;justify-content:space-between}
.box .h span{font-weight:400;font-size:11px;color:var(--dim)}
.box.trait .h{color:#ffd27a}
.box.skill .h{color:#7ad0ff}
.eff-up{color:var(--ok)}.eff-dn{color:#ff9a7a}
.recs{margin-top:8px}
.rec{display:flex;align-items:center;gap:3px;padding:6px;border-radius:10px;background:#10151f;margin-top:5px;font-size:12px;flex-wrap:wrap}
.rec img{width:34px;height:34px;object-fit:contain;image-rendering:pixelated;border-radius:8px;background:#1a2130;border:1px solid #2a3446;opacity:.4}
.rec img.have{opacity:1;border-color:var(--ok)}
.rec .arrow{color:var(--dim);margin:0 2px}
.rec .res{border-color:var(--tc)!important;opacity:1}
.rec .nm{font-weight:700;color:var(--tc)}
.rec button{margin-left:auto}
.btn{background:#2f3c55;border:1px solid #3d4b68;border-radius:9px;padding:7px 12px;font-size:13px}
.btn:hover:not(:disabled){background:#3a4968}
.btn:disabled{opacity:.4}
.btn.pri{background:linear-gradient(180deg,#ffb23d,#f08a1a);border-color:#ffc86d;color:#2a1700;font-weight:700}
.btn.gold{background:linear-gradient(180deg,#4aa8ff,#2f7fe0);border-color:#7ac0ff;font-weight:700}
.row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.dim{color:var(--dim)}
.enemyCard .ec{display:flex;gap:10px;align-items:center}
.enemyCard img{width:56px;height:56px;object-fit:contain;image-rendering:pixelated}
.guide{font-size:13px;line-height:1.7;color:#cfd6e3}
.guide b{color:#fff}

/* 모달 */
#modal{position:fixed;inset:0;z-index:40;background:rgba(5,8,14,.72);display:none;align-items:center;justify-content:center;padding:14px;backdrop-filter:blur(3px)}
#modal.on{display:flex}
.mbox{position:relative;width:100%;max-width:760px;max-height:90vh;overflow:auto;background:linear-gradient(180deg,#1b2333,#141a25);border:1px solid #33405a;border-radius:18px;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.6);animation:pop .18s}
@keyframes pop{from{transform:scale(.96);opacity:0}}
.mbox h2{margin:0 0 4px;font-size:28px}
/* 닫기 ✕: 창 안을 내려도 오른쪽 위에 붙어 있게 (dnd2 10-24: 조합표를 내린 뒤 닫으려면 맨 위까지 다시 올려야 했음) */
.mbox .x{position:sticky;top:8px;float:right;z-index:3;margin:-8px -8px 0 8px;width:40px;height:40px;border-radius:10px;background:#2a3446;font-size:16px;box-shadow:0 2px 8px rgba(0,0,0,.45)}
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin:10px 0}
.tab{padding:6px 12px;border-radius:20px;background:#232c3d;font-size:13px;border:1px solid transparent;color:var(--tc)}
.tab.on{border-color:var(--tc);background:#2c3850}
.book{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.bk{background:#10151f;border:1px solid #273044;border-left:3px solid var(--tc);border-radius:10px;padding:8px;font-size:12px}
.bk .t{display:flex;align-items:center;gap:6px}
.bk .t img{width:44px;height:44px;object-fit:contain;image-rendering:pixelated}
.bk .t b{font-size:14px;color:var(--tc)}
.bk .rc{display:flex;align-items:center;gap:2px;margin-top:4px;flex-wrap:wrap}
.bk .rc img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated;background:#1a2130;border-radius:6px;opacity:.45}
.bk .rc img.have{opacity:1;outline:1px solid var(--ok)}
.bk .ds{color:var(--dim);margin-top:4px;line-height:1.45}
.opt{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:#10151f;border:1px solid var(--tc);margin-top:8px}
.opt .big{font-size:20px;color:var(--tc)}
.opt .grow{flex:1}
@media (max-width:480px){.chalrow{flex-wrap:wrap}.chalrow .grow{flex:1 1 0;min-width:120px}.chalrow>.btn{flex:1 1 40%;white-space:nowrap;margin-top:2px}.chalrow>span{margin-left:auto}} /* 폰: 이름이 세로로 쪼개지지 않게 단추 둘은 아랫줄로 */
.opt .rate{font-size:13px;color:var(--dim)}
.miss{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:#10151f;margin-top:6px;font-size:14px}
.miss.done{opacity:.55}
.miss .st{width:22px;height:22px;border-radius:50%;border:2px solid #3d4b68;flex:none;display:flex;align-items:center;justify-content:center;font-size:12px}
.miss.done .st{background:var(--ok);border-color:var(--ok);color:#06210f}
.miss .rw{margin-left:auto;display:flex;align-items:center;gap:5px;color:var(--gem)}

/* 시작 화면 */
.start{text-align:center}
.start .logo{font-size:54px;line-height:1.05;background:linear-gradient(180deg,#ffe066,#ff9a3d 60%,#ff5b3d);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 0 #6b1f0c)}
.start .sub{color:var(--dim);margin:6px 0 14px}
.start .arts{display:flex;justify-content:center;gap:4px;margin:6px 0 12px}
.start .arts img{width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
.diffs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:600px){.diffs{grid-template-columns:1fr 1fr}.start .logo{font-size:40px}.start .arts img{width:64px;height:64px}}
.diff{padding:14px 8px;border-radius:14px;border:1px solid var(--tc);background:#10151f;display:flex;flex-direction:column;gap:4px;align-items:center}
.diff:hover{background:#1a2232}
.diff .n{font-size:24px;color:var(--tc)}
.diff .d{font-size:12px;color:var(--dim)}
.rules{text-align:left;font-size:13px;line-height:1.75;color:#cfd6e3;margin-top:14px;padding:12px 14px;background:#10151f;border-radius:12px}
.rules b{color:#fff}

#toasts{position:fixed;left:50%;top:70px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.toast{padding:7px 16px;border-radius:22px;background:rgba(12,16,24,.92);border:1px solid var(--tc,#3d4b68);font-size:14px;animation:tin 2.2s forwards;box-shadow:0 6px 20px rgba(0,0,0,.4);display:flex;align-items:center;gap:6px}
.toast img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated}
@keyframes tin{0%{opacity:0;transform:translateY(-8px)}8%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}

/* ---- 확장: 역할 태그 · 목표 · 재료 트리 ---- */
.u.t7 .base{width:84px;margin-left:-42px;height:22px;animation:glow 1.4s infinite alternate}
.u .gl{position:absolute;left:6px;bottom:16px;font-size:14px;color:var(--gold);text-shadow:0 0 6px #000,0 0 8px var(--gold);display:none}
.u.goal .gl{display:block}
.chip.role{background:#2a3446;color:#ffd27a;font-weight:700;border:1px solid #3d4b68}
.search{width:100%;padding:9px 12px;border-radius:10px;border:1px solid #3d4b68;background:#10151f;color:var(--text);font:inherit;margin-bottom:10px;user-select:text}
.tabs.roles .tab{font-size:12px;padding:4px 10px}
.bk{cursor:pointer;transition:background .12s}
.bk:hover{background:#161d2b}
.bk.isgoal{box-shadow:0 0 0 1px var(--gold) inset}
.bk .own{font-size:10px;padding:1px 6px;border-radius:8px;background:var(--ok);color:#06210f;font-weight:700;margin-left:4px}
.bk .chip.role{font-size:10px;padding:0 6px;margin-top:3px}
.tree{background:#10151f;border-radius:12px;padding:8px 10px;font-size:13px}
.tree details{margin:2px 0}
.tree summary{cursor:pointer;list-style:none;display:flex;align-items:center}
.tree summary::-webkit-details-marker{display:none}
.tree summary::before{content:"▸";color:var(--dim);width:14px;display:inline-block;transition:transform .15s}
.tree details[open]>summary::before{transform:rotate(90deg)}
.tkids{margin-left:14px;padding-left:10px;border-left:1px dashed #33405a}
.tleaf{padding-left:14px;margin:2px 0;display:flex;align-items:center;flex-wrap:wrap}
.tn{display:inline-flex;align-items:center;gap:5px;padding:2px 8px 2px 2px;border-radius:8px;border-left:3px solid var(--tc);background:#161d2b}
.tn img{width:28px;height:28px;object-fit:contain;image-rendering:pixelated}
.tn b{color:var(--tc)}
.tn .tt{font-size:10px;color:var(--dim)}
.tn .hv{font-size:10px;padding:0 5px;border-radius:6px;background:var(--ok);color:#06210f;font-weight:700}
.pill{display:inline-flex;align-items:center;gap:4px;padding:2px 10px 2px 2px;border-radius:16px;border:1px solid var(--tc);background:#161d2b;cursor:pointer;font-size:13px}
.pill img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated}
.goalbar{flex-basis:100%;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:4px 6px 6px;margin-bottom:4px;border-bottom:1px solid #273044}
.goalbar .gres{width:40px;height:40px;object-fit:contain;image-rendering:pixelated;cursor:pointer;filter:drop-shadow(0 0 6px var(--tc))}
.goalbar .gdir{display:flex;gap:3px}
.goalbar .gdir img{width:32px;height:32px;object-fit:contain;image-rendering:pixelated;border-radius:7px;background:#10151f;border:1px solid #2a3446;opacity:.4;cursor:pointer}
.goalbar .gdir img.have{opacity:1;border-color:var(--ok)}
.rec img{cursor:pointer}
.mbox.wide{max-width:1040px}

/* 넓은 화면: 오른쪽 카드 높이가 변해도 아래 버튼 줄이 움직이지 않게 */
@media (min-width:1101px){#side{contain:size;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#3d4b68 transparent}}

/* ===== 버튼 리뉴얼 ===== */
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
svg .f{fill:currentColor;stroke:none}
.ibtn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:11px;font-weight:700;font-size:13px;
  background:linear-gradient(180deg,#34405a,#262f43);border:1px solid #46557a;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 0 #151b28}
.ibtn svg{width:16px;height:16px;color:#9fc3ff}
.ibtn:hover{background:linear-gradient(180deg,#3d4b68,#2c364d)}
.ibtn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}

.cbtn{--bc:#4aa8ff;flex-direction:row;justify-content:flex-start;gap:10px;padding:9px 10px;min-height:58px;border-radius:14px;text-align:left;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bc) 22%,#2a3448),color-mix(in srgb,var(--bc) 8%,#1a2130));
  border:1px solid color-mix(in srgb,var(--bc) 45%,#1a2130);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 3px 0 color-mix(in srgb,var(--bc) 30%,#0b0f17),0 8px 16px rgba(0,0,0,.28);
  transition:transform .06s,box-shadow .06s,filter .12s}
.cbtn:hover:not(:disabled){background:linear-gradient(180deg,color-mix(in srgb,var(--bc) 32%,#2a3448),color-mix(in srgb,var(--bc) 14%,#1a2130));filter:brightness(1.05)}
.cbtn:active:not(:disabled){transform:translateY(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 #000}
.cbtn:disabled{opacity:.42;filter:grayscale(.6)}
.cbtn-fill{min-height:58px;border-radius:12px;background:rgba(120,170,255,.16);border:1px dashed rgba(170,200,255,.45)} /* 버튼이 11개라 마지막 칸이 비어 이 빠져 보임 → 반투명 블록으로 채움 */
.cbtn.on{border-color:var(--bc);box-shadow:0 0 0 2px color-mix(in srgb,var(--bc) 45%,transparent)} /* 켜진 토글(자동 대기) */
.cbtn .ico{flex:none;width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--bc);
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--bc) 35%,#1a2130),#121722 75%);border:1px solid color-mix(in srgb,var(--bc) 50%,transparent);
  box-shadow:0 0 12px color-mix(in srgb,var(--bc) 35%,transparent)}
.cbtn .ico svg{filter:drop-shadow(0 0 4px color-mix(in srgb,var(--bc) 70%,transparent))}
.cbtn .tx{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.cbtn .tx b{font-size:14px;color:#fff}
.cbtn .sub{font-size:11px;color:color-mix(in srgb,var(--bc) 45%,#9aa6bd);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbtn .badge{right:8px;top:6px}
@media (max-width:640px){.ctrl-grid{grid-template-columns:repeat(2,1fr)}.cbtn{min-height:52px}}

.summon{flex-direction:row;gap:12px;overflow:hidden;border:1px solid #ff9a6d;
  background:linear-gradient(180deg,#ff7a45 0%,#f04a24 55%,#c9351a 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.18),0 5px 0 #8c2410,0 12px 24px rgba(255,91,61,.35)}
.summon::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);animation:shine 3.2s infinite}
@keyframes shine{0%,70%{left:-60%}100%{left:130%}}
.summon:hover:not(:disabled){filter:brightness(1.07)}
.summon:active:not(:disabled){transform:translateY(4px);box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 1px 0 #8c2410}
.summon:disabled::after{display:none}
.summon .ball{position:relative;width:46px;height:46px;border-radius:50%;flex:none;border:3px solid #2a1a14;
  background:linear-gradient(180deg,#ff5040 0 48%,#2a1a14 48% 56%,#f4f4f4 56%);box-shadow:inset -5px -5px 0 rgba(0,0,0,.15),0 3px 6px rgba(0,0,0,.35)}
.summon .ball i{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;border:3px solid #2a1a14}
.summon:not(:disabled):hover .ball{animation:wob .5s}
@keyframes wob{25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}
.summon .tx{display:flex;flex-direction:column;align-items:flex-start}
.summon .t{font-size:30px;line-height:1;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.summon .c{font-size:15px;font-weight:700}

/* 몬스터: 그림자 · 맞을 때 번쩍 */
.en::after{content:"";position:absolute;left:50%;bottom:-3px;width:60%;height:8px;margin-left:-30%;border-radius:50%;background:rgba(0,0,0,.28);z-index:-1}
.en img{position:relative}
.en.hitf img{filter:brightness(2.4) saturate(.4) drop-shadow(0 0 3px #fff)}
.en.boss::after{height:14px}
#spr{position:absolute;left:0;top:0;pointer-events:none}
#bg,#spr,#fx{image-rendering:pixelated}

/* ================= 불가사의 던전 테마 (파란 메뉴 창 · 픽셀 글꼴) ================= */
:root{--win1:#2a4fd0;--win2:#1a2f96;--win3:#13237a;--edge:#dfe9ff;--edge2:#0a1450;--text:#ffffff;--dim:#b9c8f5;--panel:#1a2f96;--line:#0a1450}
html,body{font-family:"Galmuri11","Noto Sans KR",sans-serif;background:#05081c;image-rendering:pixelated}
body{background:radial-gradient(900px 500px at 50% -10%,#16246a 0,#05081c 70%) fixed}
.jua{font-family:"Galmuri14","Galmuri11",sans-serif;font-weight:700;letter-spacing:-.5px}
/* 창 기본형 */
#hud,.card,.mbox,.quick,.cbtn,.summon,.toast,.ibtn,.btn,.diff,.opt,.miss,.bk,.rec,.box,.stats div,.tree,.tab,.qitem,.search,.pill,.tn{
  border-radius:8px!important}
#hud,.card,.mbox,.quick,.toast{
  background:linear-gradient(180deg,rgba(42,79,208,.96),rgba(26,47,150,.96) 55%,rgba(19,35,122,.97))!important;
  border:2px solid var(--edge)!important;
  box-shadow:inset 0 0 0 2px var(--edge2),inset 0 0 0 3px rgba(255,255,255,.18),0 3px 0 rgba(0,0,0,.45)!important;color:#fff}
#stageWrap{border:3px solid var(--edge)!important;box-shadow:inset 0 0 0 2px var(--edge2),0 4px 0 rgba(0,0,0,.5)!important;border-radius:8px!important;background:#000}
.dim,.hud-timer .lbl,.hud-cap .lbl,.of{color:var(--dim)!important}
.hud-diff{background:#0f1c66;color:#ffe46b;border:1px solid #6f8ae0;border-radius:4px}
.pbar{background:#0a1240;border:1px solid #6f8ae0;border-radius:2px;height:8px}
.pbar>i{background:linear-gradient(180deg,#9fd8ff,#3f8cff)}
.hud-cap .pbar>i{background:linear-gradient(90deg,#5ae05a,#ffd23c 55%,#ff5a3c)}
.money{font-family:"Galmuri14",sans-serif}
.box,.stats div,.tree,.rec,.miss,.opt,.bk{background:rgba(8,16,70,.55)!important;border:1px solid #5b77d6!important}
.box.trait .h{color:#ffe46b}.box.skill .h{color:#9fe2ff}
/* 버튼 = 메뉴 항목: 고르면 노란 ▶ 커서 */
.cbtn,.ibtn,.btn,.tab,.qitem,.diff{background:linear-gradient(180deg,#3358d8,#1e369e)!important;border:2px solid var(--edge)!important;
  box-shadow:inset 0 0 0 1px var(--edge2),0 3px 0 #060b30!important;color:#fff!important;filter:none!important;position:relative}
.cbtn:hover:not(:disabled),.ibtn:hover,.btn:hover:not(:disabled),.tab:hover,.qitem:hover,.diff:hover{background:linear-gradient(180deg,#4a6ef0,#2a46b8)!important}
.cbtn:hover:not(:disabled)::before,.btn:hover:not(:disabled)::before,.qitem:hover::before,.diff:hover::before{content:"";position:absolute;left:-9px;top:50%;margin-top:-6px;
  border:6px solid transparent;border-left:8px solid #ffe46b;filter:drop-shadow(1px 1px 0 #000)}
.cbtn:active:not(:disabled),.btn:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 0 0 1px var(--edge2)!important}
.cbtn:disabled,.btn:disabled{opacity:.5}
.cbtn .ico{background:#0f1c66!important;border:1px solid #6f8ae0!important;border-radius:6px!important;box-shadow:none!important;color:var(--bc)}
.cbtn .ico svg{filter:none}
.cbtn .tx b{font-size:14px}
.cbtn .sub{color:#c8d6ff!important}
.btn.pri{background:linear-gradient(180deg,#ffd24a,#e89a12)!important;color:#2a1600!important;border-color:#fff3c4!important}
.btn.gold{background:linear-gradient(180deg,#46c0ff,#1f7ad8)!important}
.tab.on{background:linear-gradient(180deg,#ffd24a,#e89a12)!important;color:#2a1600!important}
.summon{background:linear-gradient(180deg,#ff8a3a,#e0521c 60%,#b83a10)!important;border:2px solid #fff1dc!important;border-radius:8px!important;
  box-shadow:inset 0 0 0 2px #6a1e06,inset 0 0 0 3px rgba(255,255,255,.25),0 4px 0 #3a0f02!important}
.summon .t{font-family:"Galmuri14",sans-serif}
.chip{border-radius:4px}
.chip.role{background:#0f1c66;border:1px solid #6f8ae0;color:#ffe46b}
.cell.sel::before{border-radius:4px;border-color:#ffe46b;box-shadow:0 0 0 1px #000,0 0 10px rgba(255,228,107,.6)}
.u .tier{border-radius:3px;background:rgba(8,16,70,.85);border:1px solid var(--tc)}
.u .mana{bottom:8px;border-radius:0;height:4px;background:#0a1240;border:1px solid #000}
.u .mana i{border-radius:0;background:linear-gradient(180deg,#9fe2ff,#2f7dff)}
/* 초상화 = 불가사의 던전 대화창 얼굴 */
.uc-art{background:#0a1240!important;border:2px solid var(--edge)!important;border-radius:6px!important;box-shadow:inset 0 0 0 2px var(--edge2)}
.uc-art img,.rec img,.bk .t img,.bk .rc img,.qitem img,.toast img,.tn img,.pill img,.goalbar img,.enemyCard img,.opt img{image-rendering:pixelated;object-fit:cover!important;border-radius:4px}
.uc-art img{width:80px!important;height:80px!important}
.toast{display:flex;gap:10px;align-items:center;padding:8px 14px!important;font-size:14px}
.toast img{width:40px;height:40px;border:2px solid var(--edge);box-shadow:inset 0 0 0 1px var(--edge2)}
#modal{background:rgba(2,4,20,.7)}
.mbox h2{font-family:"Galmuri14",sans-serif}
.start .logo{font-family:"Galmuri14",sans-serif;background:none;color:#ffe46b;-webkit-text-fill-color:#ffe46b;text-shadow:3px 3px 0 #b8400c,6px 6px 0 #0a1450;filter:none}
.start .arts img{image-rendering:pixelated}
.search{background:#0a1240!important;border:2px solid #6f8ae0!important}
.goalbar{border-bottom:1px solid #5b77d6}
.rules{background:rgba(8,16,70,.55)!important;border:1px solid #5b77d6;border-radius:8px}

/* ===== 사이트 게임장 안(iframe)에 들어갈 때 (?embed=1) ===== */
html.embed,html.embed body{background:#0b1030}
html.embed #app{max-width:none;padding:8px;gap:8px}
html.embed #modal{align-items:flex-start;padding-top:24px}
html.embed #toasts{top:16px}
/* 넓은 틀(1000 이상): 왼쪽 경기장 · 오른쪽 유닛 정보 (사이트 게임장 폭 1076 에 맞춤) */
@media (min-width:1000px){
  html.embed #app{grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"hud hud" "stage side" "ctrl side"}
  html.embed #side{contain:size;overflow-y:auto}
}
/* 좁은 틀: 위아래로 · 유닛 정보는 두 칸
   유닛 정보 칸은 높이를 고정하고 안에서 스크롤 (dnd2 10-24: 고른 유닛의 '만들 수 있는 것' 줄 수에 따라 415~820px 로 늘었다 줄며 게임 틀 전체가 아래로 늘어났음) */
@media (max-width:999px){
  html.embed #app{grid-template-columns:1fr;grid-template-areas:"hud" "stage" "ctrl" "side"}
  html.embed:not(.mob) #side{contain:none;height:460px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#3d4b68 transparent;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:8px;align-items:start}   /* 오른쪽 넓은 칸이 유닛 정보 (적 정보가 앞에 옴). 폰은 아래 시트라 빼 둠 */
  html.embed #unitCard{min-height:0}
  html.embed:not(.mob) #unitCard>.ucbar{flex-wrap:wrap}   /* 좁은 칸에서 [판매 · 랜덤 변경 · 재료 트리 · 해제] 가 칸 밖으로 잘렸음 → 두 줄로 */
  html.embed:not(.mob) #unitCard>.ucbar .btn{flex:1 1 40%}
}
@media (max-width:700px){html.embed #side{grid-template-columns:1fr}html.embed:not(.mob) #unitCard{order:-2}}   /* 한 칸일 땐 고른 유닛 정보가 위 (460px 칸에서 스크롤해야 보였음) */
/* 좁은 상단 막대: 줄을 정해서 넘치지 않게 */
@media (max-width:820px){
  #hud{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"round timer money" "cap cap btns" "boss boss boss";gap:6px 12px}
  .hud-round{grid-area:round}.hud-diff{display:none}.hud-timer{grid-area:timer;width:auto}.hud-cap{grid-area:cap;min-width:0}.hud-boss{grid-area:boss}.money{grid-area:money}.hud-btns{grid-area:btns}
  /* 보스 막대는 줄을 더하지 않고 게임판 위쪽에 겹쳐 띄움 (보스 때마다 위 막대가 한 줄 늘어 게임판 · 버튼이 아래로 밀렸음). 폰은 아래 폰 칸에서 따로 */
  html:not(.mob) #hud{position:relative}
  html:not(.mob) .hud-boss.on{grid-area:auto;position:absolute;left:50%;top:calc(100% + 10px);z-index:6;width:min(300px,60%);transform:translateX(-50%);padding:4px 8px 6px;background:rgba(8,12,40,.78);border:1px solid var(--edge);border-radius:6px;pointer-events:none}   /* 누르기는 밑의 게임판으로 */
}
#ctrl,#ctrl>*,.ctrl-grid,.quick{min-width:0}
.quick{overflow:hidden}
.goalbar .dim{flex:1 1 160px;min-width:0}
html.embed .rec{font-size:11px}
.ibtn{white-space:nowrap}
@media (max-width:520px){.ibtn{padding:6px 9px}#bPauseT,.ibtn[data-act=help] span{display:none}}
/* 버튼 글자가 칸보다 길어도 옆 칸을 덮지 않게 */
.cbtn{min-width:0;overflow:hidden}.cbtn .tx{overflow:hidden}.cbtn .tx b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 게임장 안 넓은 틀(경기장 | 유닛 정보): 버튼 칸이 좁아서 설명 줄을 빼고 작게 */
@media (min-width:1000px){
  html.embed #ctrl{grid-template-columns:150px minmax(0,1fr)}
  html.embed .cbtn{gap:7px;padding:7px 8px;min-height:46px}
  html.embed .cbtn .ico{width:28px;height:28px}
  html.embed .cbtn .ico svg{width:18px;height:18px}
  html.embed .cbtn .sub{display:none}
  html.embed .summon .ball{width:38px;height:38px}
  html.embed .summon .t{font-size:24px}
}
/* ===== 상태창을 바깥(게임장 오른쪽 랭킹 아래)에서 보여 줄 때: 바깥 페이지가 html 에 side-out 을 붙임 =====
   게임 안 상태창은 숨기고 경기장 · 버튼만 한 줄로. 바깥은 #side 를 그대로 비춰 보이고 누르면 이쪽 같은 자리를 눌러 줌 */
html.side-out #app{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"hud" "stage" "ctrl"!important}
html.side-out #side{display:none!important}
html.side-out #ctrl{grid-template-columns:150px minmax(0,1fr)}
html.side-out .cbtn{gap:7px;padding:7px 8px;min-height:46px}
html.side-out .cbtn .ico{width:28px;height:28px}
html.side-out .cbtn .ico svg{width:18px;height:18px}
html.side-out .cbtn .sub{display:none}
html.side-out .summon .ball{width:38px;height:38px}
html.side-out .summon .t{font-size:24px}
/* 바깥에 비춘 상태창 (그림자 DOM 안, .prd-mirror 가 :root 대신 색 변수를 가짐) */
.prd-mirror#side,.prd-mirror{contain:none!important;overflow:visible!important;height:auto!important;
  display:flex;flex-direction:column;gap:10px;color:var(--text);font-family:"Galmuri11","Noto Sans KR",sans-serif;font-size:14px;line-height:1.4}
.prd-mirror .card{padding:12px}
.prd-mirror #unitCard{min-height:0}
/* 시작 화면: 바깥 게임장이 랭크전을 열면 난이도 카드 = 랭크전 버튼 (연습 없음), 아래에 참가비 띠 */
.diff .diff-go{margin-top:auto;width:100%;padding:5px 4px;border-radius:6px;background:linear-gradient(180deg,#ffd24a,#e89a12);color:#2a1600;font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.diff:disabled{opacity:.55}
.diff:has(.diff-go){justify-content:flex-start}
.diff .diff-go{flex:none}
.diff:has(.diff-go)>.d:last-of-type{margin-bottom:6px}

/* ===== dnd2 10-21: 조작 칸 아래 '목표 · 지금 조합' 높이 고정 (늘었다 줄며 뽑기 단추 · 단추 위치가 움직였음) ===== */
.quick{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:4px;height:104px;min-height:0;padding:4px 8px}
.qgoal{flex:none;height:46px;min-width:0}
.goalbar{height:46px;flex-wrap:nowrap;margin:0;padding:2px 4px}
.goalbar .gneed{flex:1 1 auto;min-width:0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.goalbar .btn{flex:none;padding:4px 10px}
.goalbar.none .lbl{flex:none}
.qrow{display:flex;align-items:center;gap:6px;height:46px;min-width:0}
.qrow .lbl{flex:none}
.qlist{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none}
.qlist::-webkit-scrollbar{display:none}
.qlist .qitem{flex:none;white-space:nowrap}
.qnone{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qnav{flex:none;width:30px;height:38px;padding:0;font:700 20px/1 inherit;color:#fff;background:#1e369e;border:2px solid var(--edge);border-radius:6px;cursor:pointer}
.qnav:disabled{opacity:.3;cursor:default}
/* 조합표: 등급 탭은 칸 폭이 모자라면 두 줄로 (dnd2 10-24: 등급마다 종 수가 늘어 한 줄 9칸에서 '안흔함 27' 등이 잘렸음), 역할은 검색 옆 고르기 칸 */
.tabs.tiers{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px}
@media (max-width:1100px){.tabs.tiers{grid-template-columns:repeat(5,minmax(0,1fr))}}   /* 좁으면 5칸 × 2줄로 고르게 */
.tabs.tiers .tab{min-width:0;min-height:36px;padding:0 4px;font-size:12px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* 아주 좁은 폰(320)에서만 말줄임 */
.bookf{display:flex;gap:8px}
.bookf #bookSearch{flex:1 1 auto;min-width:0}
.bookf .rolesel{flex:0 0 130px;width:130px;cursor:pointer}
.goalbar .lbl,.goalbar>b,.qrow .lbl{flex:none;white-space:nowrap}   /* 좁은 칸에서 '목표' · 이름이 두 줄로 꺾이지 않게 */
/* dnd2 10-21: 처음 화면 설명 줄임 — 핵심 4줄 + [자세한 규칙] (예전엔 규칙 9줄이 꺾여 길게 이어졌음) */
.diff .d.nw{white-space:nowrap}
.qrules{list-style:none;margin:12px auto 0;padding:10px 14px;max-width:520px;text-align:left;font-size:13px;line-height:1.6;color:var(--text);background:#10151f;border:1px solid var(--line);border-radius:10px}
.qrules li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qrules b{display:inline-block;min-width:48px;color:var(--gold)}
.qmore{margin-top:8px;padding:6px 14px}
.rules{line-height:1.7}
.rules b:first-child,.rules br+b{color:var(--gold)}
/* 10-23: 상태창 — 이번 라운드 적을 맨 위로, 유닛 버튼 줄은 카드 맨 위에 고정 (랜덤 변경 자리가 내용 따라 움직였음) */
#enemyCard{order:-1}
#unitCard{display:flex;flex-direction:column}
#unitCard>.ucbar{order:-1;margin:0 0 8px;padding-bottom:8px;border-bottom:1px solid #5b77d6;flex-wrap:nowrap;gap:4px}
#unitCard>.ucbar .btn{flex:1 1 auto;padding:6px 3px;font-size:12px;white-space:nowrap}
/* 조합식은 가장 긴 경우(재료 3 + 결과 + 긴 이름 + 버튼)도 한 줄 — 320px 칸에서 81종 전부 확인 */
.rec{flex-wrap:nowrap;gap:2px;padding:4px}
.rec img{width:28px;height:28px;flex:none}
.rec .arrow{margin:0 1px;flex:none}
.rec .nm{flex:1 1 0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:2px}
.rec button{flex:none;padding:4px 6px}
/* 지금 조합: 2줄 고정 (세로로 채우고 ‹ › 로 옆으로 넘김), 목표 재료는 ★ */
.quick{height:auto}
.qrow{height:80px}
.qrow .lbl{width:30px;white-space:normal;line-height:1.25}
.qlist{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,36px);grid-auto-columns:max-content;align-content:center;height:80px}
.qlist .qitem{height:36px;padding:1px 10px 1px 3px}
.qlist .qitem img{width:30px;height:30px}
.qlist .qitem.g{box-shadow:0 0 0 2px #ffd84d inset}
.qlist .qitem.g::after{content:"★";color:#ffd84d;margin-left:2px}
.qlist .qnone{grid-row:1/3;align-self:center}
/* 버튼이 9개가 돼 줄이 늘어난 것을 줄임: 넓은 화면 5칸(2줄) · 폰 3칸(3줄, 작은 글 숨김) */
.ctrl-grid{grid-template-columns:repeat(5,1fr)}
/* 아이콘 위 · 글자 한 줄 아래, 6칸 2줄 (버튼이 11개라 5칸 · 3칸이면 3~4줄로 길어졌음) — 폰 · PC 모두 */
  .ctrl-grid{grid-template-columns:repeat(6,1fr);gap:5px}
  .cbtn .sub{display:none}
  .cbtn{flex-direction:column;justify-content:center;min-height:58px;padding:6px 2px 4px;gap:2px;text-align:center;border-radius:12px}
  .cbtn .ico{width:26px;height:26px}.cbtn .ico svg{width:16px;height:16px}
  .cbtn .tx{align-items:center}.cbtn .tx b{font-size:11.5px}
  .cbtn .hk{font-size:9px;right:4px;top:2px}

.cbtn .hk{position:absolute;right:5px;top:3px;font-size:10px;line-height:1;opacity:.6;color:#fff;pointer-events:none}
@media (hover:none){.cbtn .hk{display:none}}

/* ===== 폰(바깥 화면 768 이하, 10-23): 게임판은 크게 · 보는 창은 아래에서 올라오는 시트 =====
   위 = 얇은 상단 막대(라운드 · 돈 · ×1 · 정지 · ⋯) → 게임판 찬 폭, 아래 = 고정 조작판(목표 · 지금 조합 · 정보 줄 · 뽑기 + 아이콘 10개)
   유닛 정보 · 이번 적(#side)은 [정보 ▲] 로 여는 시트, 조합표 · 도박 등 창(#modal)도 아래 시트. 소리 · 규칙 · 새판은 ⋯ 메뉴
   #app 높이를 화면에 고정하지 않음 (바깥 게임장이 이 높이를 받아 iframe 을 맞추는 폭에서 서로 키우며 늘어나지 않게) */
.ibtn.more,.more-menu,.peek,.sheet-head{display:none}
/* 폰 여부는 바깥 화면 폭(768 이하)으로 정함 — 게임장 PC 화면에서도 이 틀은 700 정도라 틀 폭으로는 못 가름 (game.js mobCheck 가 html.mob) */
html.mob.embed #app,html.mob #app{display:flex;flex-direction:column;gap:6px;padding:6px 6px calc(var(--dock-h,300px) + 8px)}
/* 상단 막대: 1줄 라운드 · 돈 · 단추, 2줄 시간 · 몬스터 수 */
html.mob #hud{position:relative;row-gap:2px!important;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"round money btns" "cap cap timer" "boss boss boss";gap:4px 10px;padding:6px 8px}   /* 시간은 오른쪽 열(단추 폭)에 — 왼쪽 열이 넓어져 돈 칸이 좁아졌음 */
html.mob .hud-round .r{font-size:24px}html.mob .hud-round .of{font-size:12px}html.mob .hud-round .of-w{display:none}   /* 폭이 좁아 '라운드' 글자는 뺌 (보석이 잘렸음) */
html.mob .money{font-size:16px;gap:10px;min-width:0;white-space:nowrap}
html.mob #bSpeed svg{display:none}
html.mob .hud-timer .lbl{gap:6px;white-space:nowrap}
html.mob .hud-timer{min-width:104px}
html.mob .hud-btns{gap:4px}
html.mob .hud-btns .ibtn{height:44px;min-width:44px;justify-content:center;padding:0 8px}
html.mob .hud-btns .ibtn[data-act=sound],html.mob .hud-btns .ibtn[data-act=help],html.mob #bPauseT{display:none}
html.mob .ibtn.more{display:inline-flex}
html.mob .ibtn.on{border-color:#ffe46b!important;color:#ffe46b!important}
html.mob .more-menu{position:absolute;right:6px;top:calc(100% + 4px);z-index:35;min-width:180px;flex-direction:column;gap:2px;padding:6px;
  background:linear-gradient(180deg,#2a4fd0,#13237a);border:2px solid var(--edge);border-radius:8px;box-shadow:inset 0 0 0 2px var(--edge2),0 8px 24px rgba(0,0,0,.6)}
html.mob .more-menu.on{display:flex}
html.mob .more-menu button{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:6px;font-size:14px;text-align:left;white-space:nowrap}
html.mob .more-menu button:hover,html.mob .more-menu button:active{background:rgba(255,255,255,.14)}
html.mob .more-menu svg{width:18px;height:18px;color:#9fc3ff}
/* 아래 고정 조작판: 목표 · 지금 조합 → 정보 줄 → 뽑기(왼쪽 두 줄) + 아이콘 5칸 × 2줄 */
html.mob #ctrl{position:fixed;left:0;right:0;bottom:0;z-index:20;grid-template-columns:84px repeat(5,minmax(0,1fr));gap:5px;
  padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));background:rgba(5,8,28,.97);border-top:2px solid var(--edge)}
html.mob .ctrl-grid{display:contents}
html.mob .quick{grid-column:1/-1;order:-2;padding:4px 6px;gap:2px}
html.mob .cbtn[data-act=restartAsk],html.mob .cbtn-fill{display:none}
html.mob .cbtn{min-height:46px}
html.mob .summon{grid-row:span 2;min-height:0;flex-direction:column;gap:2px;padding:6px 4px}
html.mob .summon .k{display:none}
html.mob .summon .ball{width:34px;height:34px;border-width:2px}
html.mob .summon .ball i{width:10px;height:10px;margin:-5px 0 0 -5px;border-width:2px}
html.mob .summon .tx{align-items:center}
html.mob .summon .t{font-size:20px}html.mob .summon .c{font-size:13px}
html.mob .goalbar,html.mob .qgoal{height:46px}
html.mob .qrow,html.mob .qlist{height:44px}   /* 폰: 지금 조합은 한 줄 + ‹ › (두 줄이면 짧은 폰에서 조작판이 게임판을 가렸음) */
html.mob .qrow .lbl{display:none}
html.mob .qlist{grid-template-rows:44px}
html.mob .qlist .qnone{grid-row:1}
html.mob .qlist .qitem{height:44px}
html.mob .qnav{width:44px;height:44px}
html.mob .peek{display:flex;grid-column:1/-1;order:-1;align-items:center;gap:8px;min-height:44px;padding:2px 12px 2px 4px;color:#fff;text-align:left;
  background:linear-gradient(180deg,#3358d8,#1e369e);border:2px solid var(--edge);border-radius:8px;box-shadow:inset 0 0 0 1px var(--edge2)}
html.mob .peek img{flex:none;width:36px;height:36px;object-fit:cover;image-rendering:pixelated;border-radius:4px;background:#0a1240}
html.mob .peek .pk-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.25}
html.mob .peek .pk-t small{font-size:11px;color:var(--dim)}
html.mob .peek .pk-t b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.mob .peek .chip{flex:none;margin:0}
html.mob .peek .pk-go{flex:none;font-size:13px;color:#ffe46b;white-space:nowrap}
html.mob .peek .pk-go i{display:inline-block;font-style:normal;transition:transform .2s}
html.mob.sheet-on .peek .pk-go i{transform:rotate(180deg)}
/* 상태창 시트: 게임판 아래부터 올라옴 (게임판을 가리지 않아 유닛을 계속 고를 수 있음. 화면이 아주 짧으면 40dvh 를 지키느라 게임판 아래쪽을 조금 덮음) */
html.mob.embed #side,html.mob #side{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;flex-direction:column;align-items:stretch;gap:8px;
  max-height:max(40dvh,calc(100dvh - var(--stage-b,40dvh) - 6px));overflow-y:auto;overscroll-behavior:contain;
  padding:0 8px calc(10px + env(safe-area-inset-bottom,0px));background:#0b1030;border-top:3px solid var(--edge);border-radius:12px 12px 0 0;
  box-shadow:0 -10px 30px rgba(0,0,0,.6);transform:translateY(105%);visibility:hidden;transition:transform .22s ease,visibility 0s .22s}
html.mob.sheet-on #side{transform:none;visibility:visible;transition:transform .22s ease}
html.mob #unitCard{min-height:0}
html.mob .sheet-head{display:flex;order:-2;position:sticky;top:0;z-index:1;align-items:center;justify-content:space-between;margin:0 -8px;padding:8px 6px 6px 14px;
  background:#0b1030;border-bottom:1px solid #5b77d6;font-size:16px}
html.mob .sheet-head::before{content:"";position:absolute;left:50%;top:4px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:#6f8ae0}
html.mob .sheet-head .x{width:44px;height:44px;border-radius:8px;background:#2a3446;font-size:16px}
html.mob #unitCard>.ucbar .btn,html.mob .rec button{min-height:44px}
/* 창(#modal) = 아래 시트 */
html.mob #modal,html.mob.embed #modal{align-items:flex-end;padding:0}
html.mob .mbox{overscroll-behavior:contain;max-height:88dvh;border-radius:14px 14px 0 0!important;padding:16px 12px calc(16px + env(safe-area-inset-bottom,0px));animation:sheetup .22s ease}
html.mob .mbox:has(>.mfoot){padding-bottom:0}   /* 아래 [닫기] 줄이 바닥 여백(안전 영역 포함)을 맡음 */
html.mob .mbox h2{font-size:22px}
/* 폰 닫기: 위 ✕ 대신 엄지가 닿는 아래 고정 [닫기] 줄 + 위 손잡이(아래로 끌면 닫힘, game.js swipeClose) · 바깥 누르기 · 뒤로 가기 */
html.mob .mbox .x{display:none}
html.mob .mbox.swipe::before{content:"";display:block;width:40px;height:4px;margin:-8px auto 8px;border-radius:2px;background:#6f8ae0}
.mfoot{display:none}
html.mob .mfoot{display:block;position:sticky;bottom:0;z-index:2;margin:12px -12px 0;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));
  background:var(--win3);border-top:1px solid #5b77d6}
html.mob .mbox .mfoot .btn{display:block;width:100%;min-height:48px;font-size:16px}
html.mob .mbox .btn,html.mob .goalbar .btn{min-height:44px}
html.mob .opt:not(.chalrow){flex-wrap:wrap}
html.mob .opt:not(.chalrow) .grow{flex:1 1 100%}
html.mob .opt:not(.chalrow)>.btn{flex:1 1 0}
html.mob .tabs.tiers{grid-template-columns:repeat(5,minmax(0,1fr))}   /* 폰도 5칸 × 2줄 (예전엔 가로로 밀어야 보였음) */
html.mob .tabs.tiers .tab{min-height:44px;padding:0 2px}
html.mob .search{min-height:44px;font-size:16px}   /* 16px 보다 작은 입력칸은 누를 때 폰 브라우저가 화면을 확대함 */
@keyframes sheetup{from{transform:translateY(40px);opacity:0}}