/* ?ui=wide — 1280×720 가로 고정 화면 (폰은 가로로 돌려 비율 맞춰 확대) */
html.wide,html.wide body{overflow:hidden;height:100%;background:#050608}
html.wide #app,html.wide .battle{position:fixed;left:50%;top:50%;width:1280px;height:720px;max-width:none;min-height:0;margin:0;padding:0;
  transform:translate(-50%,-50%) scale(var(--k,1));transform-origin:center center;overflow:hidden;background:var(--bg)}
html.wide #app{padding:8px 10px 0}
/* 세로로 들고 있을 때 */
#rot{display:none}
@media (orientation:portrait){html.wide #rot{display:flex;position:fixed;inset:0;z-index:999;background:#0b0d12;color:#f1c24a;font-weight:800;font-size:18px;align-items:center;justify-content:center;text-align:center;flex-direction:column;gap:10px}
 html.wide #rot i{font-size:46px;font-style:normal}}

/* ---------- 전투 ---------- */
html.wide .battle{background:radial-gradient(ellipse at 50% 38%,#3b2a1f 0%,#1e1814 45%,#0a0a0d 100%);display:block}
html.wide .battle:before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:linear-gradient(90deg,transparent,#7a5a38aa,transparent)}
html.wide .bhead{position:absolute;left:0;right:0;top:0;height:50px;padding:0 16px;z-index:5;background:linear-gradient(#000a,transparent)}
html.wide .bhead b{font-size:20px}
html.wide details.bmsg{position:absolute;right:12px;top:54px;width:156px;max-height:200px;z-index:6;margin:0;font-size:12px}
html.wide .bsyn{position:absolute;left:12px;top:62px;width:150px;z-index:4;display:flex;flex-direction:column;gap:6px}
html.wide .bsyn .sy2{display:flex;align-items:center;gap:6px;height:42px;border-radius:24px 10px 10px 24px;background:#171310d8;border:1.5px solid #3a3228;padding:0 8px 0 4px;opacity:.5}
html.wide .bsyn .sy2.on{opacity:1;border-color:var(--fc);box-shadow:0 0 10px color-mix(in srgb,var(--fc) 60%,transparent)}
html.wide .bsyn .sg{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--fc) 80%,#fff),var(--fc) 70%);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px;color:#fff;border:1.5px solid #0009;flex:0 0 auto}
html.wide .bsyn .sc{font-size:19px;font-weight:900;width:20px;text-align:center}
html.wide .bsyn .pips{display:flex;gap:3px;flex:1}
html.wide .bsyn .pips s{width:9px;height:9px;transform:rotate(45deg);background:#3a3228;display:block}
html.wide .bsyn .pips s.on{background:#f1c24a}
html.wide .bsyn .nx{font-size:12px;color:#aaa}
html.wide .bfield{position:absolute;left:176px;right:176px;top:56px;bottom:66px;padding:0;display:flex;flex-direction:column;justify-content:space-between;gap:0}
html.wide .brows{display:contents}
html.wide .brow{order:0;justify-content:center;padding:0;gap:0}
html.wide .brow:first-child{order:-1}
html.wide .brow .bwho{display:none}
html.wide .brow .bcol{--cw:96px;--ch:calc(var(--cw)*1.25);flex:0 0 auto;justify-content:center;gap:12px;padding:6px 0}
html.wide .brow:first-child .bcol{padding-bottom:14px}
html.wide .stage{order:0;flex:1;min-height:0;--cw:168px;--ch:calc(var(--cw)*1.22);gap:40px}
html.wide .stage .stm{min-width:140px}
html.wide .stage .calc2{font-size:19px}html.wide .stage .calc2 .ci{width:32px;height:32px}
html.wide .stage .calc{font-size:36px}
html.wide .cap{position:absolute;left:176px;right:176px;bottom:10px;font-size:16px;padding:7px 14px;border-radius:12px}
html.wide .cap small{display:inline;margin-left:10px}
html.wide .brows{padding-bottom:0}
html.wide .bfield{padding-bottom:0}
html.wide .bfield .bmid{inset:0}

/* ---------- 준비 화면 ---------- */
html.wide #app{display:block;padding:0}
html.wide .top{position:absolute;left:0;right:0;top:0;height:40px;padding:0 14px;z-index:5}
html.wide .tbar{position:absolute;left:0;right:0;top:40px;margin:0}
html.wide .pbar{position:absolute;left:14px;right:14px;top:46px;margin:0;gap:8px;height:50px}
html.wide .pbar .pl{padding:2px 8px}
html.wide .g2{position:absolute;left:14px;right:14px;top:104px;bottom:8px;margin:0;padding:0;display:grid;gap:8px 12px;
  grid-template-columns:210px 1fr 236px;grid-template-rows:176px 190px 116px 1fr;
  grid-template-areas:"lord shop gold" "syn board btn" "syn bench pw" "syn bench go"}
html.wide .g2 .gl-lord{grid-area:lord;font-size:12px;overflow:auto}
html.wide .g2 .gl-shop{grid-area:shop;margin:0;align-self:center}
html.wide .g2 .gl-syn{grid-area:syn;overflow:auto}
html.wide .g2 .gl-board{grid-area:board;flex-direction:row;justify-content:center;align-items:center;gap:10px}
html.wide .g2 .gl-bench{grid-area:bench;align-self:start;margin-top:4px}
html.wide .g2 .gl-gold{grid-area:gold}
html.wide .g2 .gl-btn{grid-area:btn}
html.wide .g2 .gl-pw{grid-area:pw}
html.wide .g2 .gl-go{grid-area:go;align-self:end}
html.wide .g2 .gl-bl,html.wide .g2 .gl-bnl{display:none}
html.wide .g2 .shopr .card{--cw:112px;--ch:calc(var(--cw)*1.36)}
html.wide .g2 .boardv2 .card{--cw:92px;--ch:calc(var(--cw)*1.3)}
html.wide .g2 .benchv2 .card{--cw:78px;--ch:calc(var(--cw)*1.32)}
html.wide .g2 .boardv2 .row2{gap:8px}
html.wide .pbar{height:52px;top:44px}
html.wide .pbar .pl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;padding:3px 8px}
html.wide .pbar .pl .hpb{flex:1 1 100%;order:3}
html.wide .g2{top:106px}
html.wide .g2 .row2{flex-direction:row!important;flex-wrap:nowrap;justify-content:center}
html.wide .g2 .gl-lord{font-size:11.5px;line-height:1.35;padding:5px 8px}
html.wide .g2 .gl-lord .spbn{font-size:11px;margin-top:4px;padding:4px 6px}
html.wide .g2 .synl{display:flex!important;flex-direction:column;gap:3px!important}
html.wide .g2 .synr{display:none!important}
html.wide .g2 .sl2{grid-template-columns:18px 54px 34px 1fr!important;padding:5px 8px!important;gap:4px!important}
html.wide .g2 .sl2 .en{display:none}
html.wide .g2 .sl2 .lv{font-size:11px;text-align:right}
html.wide .g2 .sl2 .kn{font-size:14px!important}
html.wide .g2 .sl2 .cn{font-size:14px}
html.wide .g2 .gbox{gap:6px}
html.wide .g2 .itray{flex-wrap:wrap;padding:5px 8px;gap:5px}
html.wide .g2 .itray .lb{width:auto;flex:none}
html.wide .g2 .itray .islot{width:34px;height:34px}
html.wide .g2 .itray .hint{flex:1 1 100%;margin:0}
html.wide .g2 .goldl{font-size:17px;padding:5px 8px;gap:6px;flex-wrap:wrap}
html.wide .g2 .bottomv2{flex-direction:column}
html.wide .g2 .bottomv2 .bcol{flex:none;width:100%}
html.wide .g2 .bcol .btn{padding:8px 6px;font-size:15px}
html.wide .g2 .pwr{flex-direction:column;align-items:stretch;gap:4px}
html.wide .g2 .pwr .btn{min-width:0;width:100%;padding:8px 6px;font-size:15px}
html.wide .g2 .pwr small{font-size:11.5px}
html.wide .g2 .poolrow{display:grid;grid-template-columns:1fr;gap:5px}
html.wide .g2 .poolrow .pc{justify-content:space-between;padding:3px 14px;height:28px}
html.wide .g2 .goV2{padding:12px}
html.wide .g2{grid-template-rows:190px 160px 128px 1fr;grid-template-areas:"lord shop right" "syn board right" "syn bench right" "syn bench right"}
html.wide .g2 .gl-right{display:flex;flex-direction:column;gap:8px;grid-area:right;min-height:0}
html.wide .g2 .gl-gold,html.wide .g2 .gl-btn,html.wide .g2 .gl-pw,html.wide .g2 .gl-go{grid-area:auto}
html.wide .g2 .gl-go{margin-top:auto}
html.wide .g2 .shopr .card{--cw:132px}
html.wide .g2 .boardv2 .card{--cw:100px}
html.wide .g2 .benchv2 .card{--cw:92px}
html.wide .g2 .shopr{container-type:normal}
html.wide .g2 .shopr .card{--cw:132px!important;--ch:calc(var(--cw)*1.36)!important}
html.wide .g2 .gl-shop{gap:10px}
/* 폰 가로(작은 높이)에서도 PC와 똑같이 보이도록 명시 */
html.wide .g2 .sl2{display:grid;align-items:center;border-radius:8px;background:var(--panel);border-left:4px solid var(--fc);opacity:.65;cursor:pointer}
html.wide .g2 .sl2.on{opacity:1;background:var(--panel2)}
html.wide .g2 .sl2.cur{outline:2px solid #fff;opacity:1}
html.wide .g2 .sl2 .h{font-size:13px;opacity:.8;color:var(--fc);filter:brightness(1.5);font-weight:400}
html.wide .g2 .sl2 .kn{font-weight:800;color:var(--fc);filter:brightness(1.6)}
html.wide .g2 .sl2 .cn{font-weight:800}
html.wide .g2 .sl2 .lv{color:var(--gold);white-space:nowrap}

/* ===== 2차: 플레이어 목록을 왼쪽으로, 군주 설명은 위쪽 한 줄로 ===== */
html.wide .lordchip{display:inline-block;max-width:520px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#2a2218;border:1px solid #8a6a3a;color:#f1c24a;border-radius:14px;padding:2px 12px;font-size:13px;font-weight:700;cursor:pointer}
html.wide .g2 .gl-lord{display:none}
html.wide .pbar{left:14px;right:auto;top:46px;width:210px;height:auto;flex-direction:column;gap:4px}
html.wide .pbar .pl{display:grid;grid-template-columns:1fr auto;grid-template-areas:"av hp" "bar bar";align-items:center;padding:3px 8px 2px;text-align:left;height:36px}
html.wide .pbar .pl .av{grid-area:av;font-size:12px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.wide .pbar .pl .pn{display:none}
html.wide .pbar .pl .hpn{grid-area:hp;font-size:13px!important}
html.wide .pbar .pl .hpb{grid-area:bar;margin:1px 0 0;flex:none;order:0}
html.wide .pbar .pl.opp:after{content:"이번 상대";position:absolute;right:46px;top:3px;font-size:10px;color:#ff8a8a;font-weight:800}
html.wide .pbar .pl{position:relative}
html.wide .g2{top:46px;grid-template-rows:200px 172px 140px 1fr;grid-template-areas:"pl shop right" "syn board right" "syn bench right" "syn bench right"}
html.wide .g2 .shopr .card{--cw:150px!important}
html.wide .g2 .boardv2 .card{--cw:104px}
html.wide .g2 .benchv2 .card{--cw:96px}
html.wide .g2 .sl2{padding:4px 8px!important}
/* 전투: 양쪽 시너지 패널 */
html.wide .bsyn .bsh{font-size:12px;color:#c9a24a;font-weight:800;margin:0 0 2px}
html.wide .bsyn .bsn{font-size:12px;color:#888}
html.wide .bsyn{left:12px;top:58px;position:absolute}
html.wide .bright{position:absolute;right:12px;top:58px;width:150px;z-index:6;display:flex;flex-direction:column;gap:8px}
html.wide .bright .bsyn{position:static;width:150px}
html.wide .bright details.bmsg{position:static;width:150px}
html.wide .bsyn .sy2{opacity:1}
html.wide .bsyn.opp .sy2.on{border-color:#ff6a5a}
html.wide .pbar{gap:3px}
html.wide .pbar .pl{height:34px;padding:2px 8px 1px}
html.wide .g2{grid-template-rows:208px 186px 150px 1fr}
html.wide .g2 .gl-shop{gap:6px}
html.wide .g2 .gl-shop .card{margin:0}
html.wide .spop .spc .card{--cw:170px!important;--ch:calc(var(--cw)*1.36)!important}
html.wide .spop{max-width:420px}
html.wide .spop .spc{align-items:center}html.wide .spop .spc .sdesc{width:100%}

/* ===== 카드 능력치: 공격 배지(왼쪽 아래 빨강) + 체력 배지(오른쪽 아래 초록) / 전투에서는 체력 막대 ===== */
html.wide .battle .brow:first-child .bcol{padding-bottom:26px}
html.wide .battle .brow:last-child .bcol{padding-bottom:26px}
html.wide .battle .stage{padding-bottom:26px}
/* 설명 칸: 가운데 아래 */
html.wide .g2 .gl-syn{position:static}
html.wide .g2 .synwrap .strip{position:absolute;left:236px;right:250px;bottom:2px;top:auto;min-height:0;height:112px;z-index:30;padding:8px 12px;font-size:14px}
html.wide .g2 .strip .t{font-size:14px}
html.wide .g2 .strip .t small{font-size:13px}
html.wide .modal{max-height:660px}

/* ===== 이미지 에셋 ===== */
.si{width:1.5em;height:1.5em;object-fit:contain;vertical-align:-.35em;pointer-events:none}
html.wide .bsyn .sg,html.wide .sy2 .sg{background:none!important;border:0!important;width:36px;height:36px}
html.wide .bsyn .sg .si{width:36px;height:36px}
html.wide .g2 .sl2 .h .si{width:28px;height:28px;vertical-align:middle}
html.wide .g2 .sl2{grid-template-columns:30px 54px 34px 1fr!important}
html.wide .pbar .pl .av{white-space:nowrap}
html.wide #app:has(.g2){background:linear-gradient(#0b0d12d9,#0b0d12ee),url(img/bg/battle.webp) center/cover no-repeat}
html.wide .battle{background:linear-gradient(#0b0d12a6,#0b0d12cc),url(img/bg/battle.webp) center/cover no-repeat}
html.wide .battle:before{display:none}
html.wide .g2 .sl2{grid-template-columns:28px 52px 30px minmax(0,1fr)!important;gap:3px!important}
html.wide .g2 .sl2 .lv{font-size:10.5px;overflow:visible}
html.wide .g2 .sl2 .kn{font-size:13px!important;white-space:nowrap}
html.wide .g2 .sl2 .h{filter:none;opacity:1}
html.wide .g2 .sl2{opacity:.8}
html.wide .g2 .sl2.on{opacity:1}
/* 연무장 배경: 막을 얇게 (이미지가 더 보이도록) */
html.wide #app:has(.g2){background:linear-gradient(#0b0d12a6,#0b0d12c4),url(img/bg/battle.webp) center/cover no-repeat}
html.wide .battle{background:linear-gradient(#0b0d1266,#0b0d1288),url(img/bg/battle.webp) center/cover no-repeat}
html.wide #app:has(.g2){background:linear-gradient(#0b0d12bd,#0b0d12d6),url(img/bg/battle.webp) center/cover no-repeat}
html.wide .battle{background:linear-gradient(#0b0d1285,#0b0d12a3),url(img/bg/battle.webp) center/cover no-repeat}
html.wide body:has(#app .title)::before{background-size:cover;background-position:center}
html.wide #app:not(:has(.g2)){background:transparent}
html.wide body:has(#app .title)::before{z-index:0}

/* ===== 3.5차: 인장 크게, 능력치 배지 작고 카드 안쪽으로 ===== */
html:not(.wide) .sealc{display:none}
.sealc{position:absolute;top:calc(var(--cw)*.02);right:calc(var(--cw)*.02);width:calc(var(--cw)*.34);height:calc(var(--cw)*.34);object-fit:contain;z-index:3;pointer-events:none;filter:drop-shadow(0 1px 2px #000)}
html.wide .card:not(.tok):not(.mon) .seal{display:none}
html.wide .g2 .sl2 .h .si{width:38px;height:38px}
html.wide .g2 .sl2{grid-template-columns:40px 52px 30px minmax(0,1fr)!important;padding:2px 8px!important}
html.wide .g2 .sl2 .h{filter:none;opacity:1}
html.wide .g2 .sl2:not(.on){opacity:.9}
html.wide .g2 .sl2:not(.on) .h .si{filter:grayscale(.55) brightness(.85)}
html.wide .pbar .pl .av .si{width:24px;height:24px;vertical-align:middle}
html.wide .bsyn .sg .si{width:40px;height:40px}
html.wide .bsyn .sy2{height:46px}
html.wide .pbar .pl .av .si{width:18px;height:18px}
html.wide .pbar .pl{height:34px;overflow:hidden}
html.wide .g2 .sl2{grid-template-columns:40px 50px 28px minmax(0,1fr)!important}
html.wide .g2 .sl2 .lv{white-space:normal!important;text-align:right;line-height:1.15;font-size:10px}
html.wide .g2 .sl2 .kn{font-size:13px!important}
html.wide .g2 .sl2:not(.on) .h .si{filter:brightness(.85)}

/* 공격(왼쪽) · 체력(오른쪽) 한 줄, 아이콘과 숫자 크게 */
html.wide .card .stt{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-end;left:5%;right:5%;bottom:3%;gap:0}
html.wide .card .stt .pr{height:auto;font-size:calc(var(--cw)*.16);gap:calc(var(--cw)*.03)}
html.wide .card .stt .ic{width:1.35em;height:1.35em}
html.wide .card .stt b{font-size:1.45em}
/* 전투 배경: 다시 더 잘 보이게 (막 약 40~53%) */
html.wide .battle{background:linear-gradient(#0b0d1266,#0b0d1288),url(img/bg/battle.webp) center/cover no-repeat}
html.wide .fl.stfl,html.wide .stage .stc:last-of-type .fl.stfl{bottom:calc(var(--cw)*.24)}
/* 원거리 표시는 공격 아이콘(활)로 대신하니 카드 위 배지는 숨김 */
html.wide .card .rgb{display:none}
/* 플레이어 목록 클릭이 판(g2)에 가려지지 않게 */
html.wide .pbar{z-index:8}
html.wide .g2{z-index:1}
/* 공/체 숫자·아이콘 크기(px): 상점 28/28 · 대기 20/20 · 전투 무대 큰 카드 둘 다 28/26 (판·상대는 기존 비율 그대로) */
html.wide .g2 .shopr .card .stt b{font-size:28px}
html.wide .g2 .shopr .card .stt .ic{width:28px;height:28px}
html.wide .g2 .benchv2 .card .stt b{font-size:20px}
html.wide .g2 .benchv2 .card .stt .ic{width:20px;height:20px}
html.wide .stage .stc .card .stt b{font-size:28px}
html.wide .stage .stc .card .stt .ic{width:26px;height:26px}
.flinks{margin-top:10px;display:flex;gap:14px;justify-content:center;font-size:12px}.flinks a{color:var(--mut);text-decoration:none}.flinks a:hover{color:var(--tx);text-decoration:underline}
html.wide .flinks{position:absolute;left:0;right:0;bottom:8px;margin:0}html.wide .flinks a{color:#d9d2bf;text-shadow:0 1px 3px #000}
html.wide .flinks{right:auto;left:16px;justify-content:flex-start}
/* 대기실 */
html.wide .title.lobby{padding:86px 0 0;margin:0}
html.wide .lobby h1{font-size:34px;margin:0 0 22px}
html.wide .lbody{display:flex;gap:28px;justify-content:center;align-items:stretch;padding:0 44px}
html.wide .lcode{flex:0 0 300px;background:#0f1218cc;border:1px solid #ffffff22;border-radius:16px;padding:26px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
html.wide .lcl{font-size:15px;color:var(--mut);font-weight:700}
html.wide .lcode .bigcode{font-size:48px;letter-spacing:8px;margin:4px 0 10px}
html.wide .lcode .note{margin:14px 0 0;line-height:1.5}
html.wide .lcnt{margin-top:14px;font-size:16px}html.wide .lcnt small{color:var(--mut)}
html.wide .lseats{display:flex;gap:12px;flex:1 1 auto;min-width:0}
html.wide .lseat{flex:1 1 0;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:36px 8px 14px;border-radius:14px;background:#0f1218d9;border:1px solid #ffffff1f;border-bottom:5px solid var(--fc,#555);text-align:center}
html.wide .lseat.me{box-shadow:0 0 0 2px #e8b94a}
html.wide .lseat.off{opacity:.55}
html.wide .lseat .si{width:84px;height:84px;margin:0}
html.wide .lseat .ln{font-size:24px;font-weight:800}
html.wide .lseat .lf{font-size:14px;color:var(--fc,#aaa);font-weight:700}
html.wide .lseat .pn{margin-top:4px;font-size:18px;font-weight:700;background:#ffffff14;border-radius:999px;padding:3px 14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.wide .lseat .la{margin-top:auto;font-size:12.5px;line-height:1.45;color:#c9cfdc}html.wide .lseat .la b{display:block;color:#e8b94a;font-size:13.5px}
html.wide .lseat .tags{position:absolute;top:8px;left:8px;right:8px;display:flex;gap:4px;justify-content:center}
html.wide .tg{font-style:normal;font-size:12px;font-weight:800;padding:1px 8px;border-radius:999px;background:#2a3040}
html.wide .tg.host{background:#e8b94a;color:#2b1d00}html.wide .tg.me{background:#4f86d6;color:#fff}html.wide .tg.off{background:#a33}
html.wide .lseat.empty{border-style:dashed;border-bottom-style:dashed;border-bottom-color:#ffffff33;justify-content:center;background:#0f121299}
html.wide .lseat .ai{font-size:44px;font-weight:800;color:#ffffff44}
html.wide .lfoot{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:26px}
html.wide .lfoot .btn.big{font-size:20px;padding:14px 46px}
/* 첫 화면: 이름 옆에 규칙 보기, 혼자 하기·친구와 하기 한 줄 */
html.wide .nmrow{display:flex;gap:8px;justify-content:center;align-items:center;margin:10px 0 6px}
html.wide .nmrow .inp{width:260px;margin:0}
html.wide .mrow{display:flex;gap:10px;justify-content:center}
html.wide .mrow .btn{width:240px;margin:0}
html.wide .g2 .gl-right .gl-go{width:100%;align-self:stretch}html.wide .g2 .gl-go .poolrow{width:100%}
/* 카드 글자·아이콘 크기(px) 확정값 2026-10-22 */
html.wide .g2 .shopr .card .nmp span{font-size:20px!important}
html.wide .g2 .shopr .card .nmp b{font-size:15px!important}
html.wide .g2 .shopr .card .stt b{font-size:25px}
html.wide .g2 .shopr .card .sealc{width:44px;height:44px}
html.wide .g2 .shopr .card .ops{width:38px!important;height:38px!important}
html.wide .g2 .boardv2 .card .nm{font-size:18px!important}
html.wide .g2 .boardv2 .card .stt b{font-size:21px}
html.wide .g2 .boardv2 .card .sealc{width:32px;height:32px}
html.wide .g2 .boardv2 .card .ops{width:26px!important;height:26px!important}
html.wide .g2 .benchv2 .card .nm{font-size:17px!important}
html.wide .g2 .benchv2 .card .stt b{font-size:16px}
html.wide .g2 .benchv2 .card .stt .ic{width:18px;height:18px}
html.wide .g2 .benchv2 .card .sealc{width:30px;height:30px}
html.wide .stage .stc .card .nm{font-size:32px!important}
html.wide .stage .stc .card .stt b{font-size:25px}
html.wide .stage .stc .card .sealc{width:51px;height:51px}
html.wide .stage .stc .card .tr{font-size:18px}
html.wide .brow .bcol .card .nm{font-size:18px!important}
html.wide .brow .bcol .card .stt b{font-size:21px}
html.wide .brow .bcol .card .sealc{width:32px;height:32px}
html.wide .spop .spc .card{margin-left:auto;margin-right:auto}
/* 상점 팝업 설명: 줄 사이를 띄우고 전법 아이콘 1.6배 */
html.wide .spop .sdesc .sd2{margin-top:10px;display:flex;align-items:center;gap:8px}
html.wide .spop .sdesc .sd3{margin-top:8px}
html.wide .spop .sdesc .opic{width:32px;height:32px;margin:0;vertical-align:middle;border-radius:50%}
/* 상점 팝업 카드: 초상화를 팝업 폭에 가득, 안쪽 글자·아이콘은 기존 크기 유지(공/체 아이콘 -4, 숫자 -3) */
html.wide .spop .spc .card{--cw:259px!important;--ch:calc(var(--cw)*1.36)!important}
html.wide .spop .spc .card .nm{font-size:22px!important}
html.wide .spop .spc .card .tr{font-size:20px}
html.wide .spop .spc .card .ops{width:46px!important;height:46px!important;top:46px}
html.wide .spop .spc .card .sealc{width:58px;height:58px;right:24px;top:4px}
html.wide .spop .spc .card .sealt{right:8px;top:4px;height:58px;line-height:58px;font-size:22px}
html.wide .spop .spc .card .stt .pr{font-size:16px;align-items:center;gap:6px}
html.wide .spop .spc .card .stt .ic{width:33px;height:33px}
html.wide .spop .spc .card .stt b{font-size:36px;line-height:1}
html.wide .spop .spc .card .stt .ic{flex:none;min-width:33px}html.wide .spop .spc .card .stt .ic .sw,html.wide .spop .spc .card .stt .ic img{width:33px;height:33px}

/* 깃발 옆 세력 글자: 깃발이 있는 모든 카드. 깃발을 왼쪽으로 조금 밀고 글자를 살짝 겹치게, 색은 세력 고유색(목록 이름과 같은 색) */
.sealt{display:none}
html.wide .card .sealc{right:calc(var(--cw)*.11)}
html.wide .card .sealt{display:block;position:absolute;right:calc(var(--cw)*.025);top:calc(var(--cw)*.02);height:calc(var(--cw)*.34);line-height:calc(var(--cw)*.34);font-size:calc(var(--cw)*.14);font-weight:800;z-index:4;pointer-events:none;color:var(--fc,#fff);filter:brightness(1.6);text-shadow:0 0 3px #000,0 1px 3px #000,0 0 6px #000}
html.wide .card.f-xi .sealt{color:#a35cff;filter:none}
/* 칸 번호: 글꼴이 달라도 위아래 한가운데 */
html.wide .card.empty.bnum{line-height:1;text-box:trim-both cap alphabetic}
/* 깃발 옆 글자 크기(px)·겹침: 글자 폭의 약 65%가 깃발에 겹침 */
html.wide .card{--sf:calc(var(--cw)*.14)}
html.wide .card .sealt{font-size:var(--sf)!important;right:calc(var(--cw)*.11 - var(--sf)*.35)!important}
html.wide .g2 .shopr .card{--sf:13px}
html.wide .g2 .boardv2 .card{--sf:9px}
html.wide .g2 .benchv2 .card{--sf:9px}
html.wide .stage .stc .card{--sf:13px}
html.wide .brow .bcol .card{--sf:10px}
html.wide .spop .spc .card{--sf:13px}
html.wide .spop .spc .card .sealt{right:calc(24px - var(--sf)*.35)!important}
/* 깃발+글자를 한 묶음으로 카드 오른쪽 끝에 맞춤: 글자 오른쪽 끝이 가장자리, 깃발은 글자와 35%만큼 떨어진 곳 */
html.wide .card .sealt{right:calc(var(--cw)*.025)!important}
html.wide .card .sealc{right:calc(var(--cw)*.025 + var(--sf)*.35)!important}
html.wide .spop .spc .card .sealt{right:8px!important}
html.wide .spop .spc .card .sealc{right:calc(8px + var(--sf)*.35)!important}
/* 깃발+글자 겹침 85% */
html.wide .card .sealc{right:calc(var(--cw)*.025 + var(--sf)*.15)!important}
html.wide .spop .spc .card .sealc{right:calc(8px + var(--sf)*.15)!important}
/* 전법 아이콘이 작아진 만큼 티어 표시 바로 아래로 올려 간격을 맞춤(티어 아래 + 카드 폭의 4%) */
html.wide .g2 .shopr .card .ops{top:31px!important}
html.wide .g2 .boardv2 .card .ops{top:23px!important}
html.wide .g2 .benchv2 .card .ops{top:22px!important}
html.wide .spop .spc .card .ops{top:38px!important}
/* 고정 표시: 아이콘 2배(28px) + 흰 글씨 "고정", 깃발 아래 오른쪽 */
html.wide .card .fzb{display:flex;align-items:center;gap:3px;top:58px;right:6px;font-size:28px;line-height:1;background:#000a;border-radius:999px;padding:2px 10px 2px 6px;z-index:7}
html.wide .card .fzb i{font-style:normal;font-size:28px}
html.wide .card .fzb b{font-size:22px;font-weight:800;color:#fff}
html.wide .spop .spc .card .fzb{top:78px;right:8px}
/* 오른쪽 패널: 아이템 칸 1.5배, 현재 상점 글씨 -4, 군주 기술 버튼 초록 그라데이션, 기술 설명 +2 */
html.wide .g2 .itray .islot{width:51px!important;height:51px!important}
html.wide .g2 .tierinfo{font-size:11px!important}html.wide .g2 .tierinfo b{font-size:12px!important}
html.wide .g2 .pwb{background:linear-gradient(180deg,#3fa66a,#1f6b41)!important;border-color:#5cc488!important;color:#fff!important}
html.wide .g2 .pwb:disabled{background:linear-gradient(180deg,#2c5a40,#1b3a29)!important;border-color:#2f5a42!important;color:#ffffffaa!important}
html.wide .g2 .pwr small{font-size:13.5px!important;line-height:1.35}
html.wide .g2 .shopr .card .stt .pr.h{gap:8px}
/* 장비 아이템 원: 전법 아이콘 바로 아래에 같은 크기로, 살짝 겹치게(전법 아이콘이 위) */
html.wide .card{--os:calc(var(--cw)*.27);--ot:calc(var(--cw)*.27)}
html.wide .g2 .shopr .card{--os:38px;--ot:31px}
html.wide .g2 .boardv2 .card{--os:26px;--ot:23px}
html.wide .g2 .benchv2 .card{--ot:22px}
html.wide .spop .spc .card{--os:46px;--ot:38px}
html.wide .card .eqb{left:3px!important;right:auto!important;bottom:auto!important;top:calc(var(--ot) + var(--os)*.78)!important;width:var(--os)!important;height:var(--os)!important;aspect-ratio:auto;border-width:1.5px;z-index:5}
html.wide .stage .card .eqb,html.wide .brow .card .eqb{top:var(--ot)!important}
/* 전투 중 시너지 눌러서 효과 보기 */
html.wide .bsyn .sy2{cursor:pointer}
.bsynpop{z-index:999}
.bsynpop .modal{max-width:460px;border-left:5px solid var(--fc)}
.bsynpop h2{display:flex;align-items:center;gap:8px;font-size:22px}.bsynpop h2 .si{width:40px;height:40px}
.bsynpop .bsl{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:8px}
.bsynpop .bsl li{padding:8px 10px;border-radius:8px;background:#ffffff0a;font-size:15px;line-height:1.45;color:#c9cfdc}
.bsynpop .bsl li b{color:var(--gold);margin-right:6px}
.bsynpop .bsl li.cur{background:#e8b94a22;outline:1px solid #e8b94a88;color:#fff}
/* 아직 열리지 않은 판 칸 */
html.wide .card.empty.bnum.locked{flex-direction:column;gap:6px;background:#00000040;border-style:dashed;border-color:#ffffff1a;cursor:not-allowed}
html.wide .card.empty.bnum.locked .lkn{color:#ffffff1c}
html.wide .card.empty.bnum.locked .lk{font-size:11px;font-weight:700;color:#cfc6b0;line-height:1.3;text-align:center;padding:0 6px;word-break:keep-all;text-box:none}

/* 전투: 왼쪽 = 내 시너지 + 나의 전법 효과, 오른쪽 = 상대 시너지 + 상대 전법 효과 */
html.wide .bleft{position:absolute;left:12px;top:58px;width:150px;z-index:6;display:flex;flex-direction:column;gap:8px}
html.wide .bleft .bsyn{position:static;width:150px}
html.wide .bleft details.bmsg{position:static;width:150px}



/* ---- 랭킹·티어 ---- */
.tb{--tb:24px;position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--tb);height:var(--tb);border-radius:50%;vertical-align:middle;flex:0 0 auto;font-style:normal;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--tc) 70%,#fff),var(--tc) 70%);border:1.5px solid #0009;box-shadow:0 0 0 1px color-mix(in srgb,var(--tc) 60%,#000)}
.tb i{font-style:normal;font-weight:900;font-size:calc(var(--tb)*.5);color:#fff;text-shadow:0 1px 2px #000a}
.tb img{position:absolute;inset:-8%;width:116%;height:116%;object-fit:contain}
.tb.ok{background:none;border:0;box-shadow:none}.tb.ok i{display:none}
.tk-bronze{--tc:#b07a45}.tk-silver{--tc:#9fb0c0}.tk-gold{--tc:#e0b030}.tk-platinum{--tc:#38c0b0}.tk-diamond{--tc:#5ac8ff}.tk-master{--tc:#9a55e0}.tk-grandmaster{--tc:#e0443a}
.myrank{display:flex;align-items:center;justify-content:center;gap:8px;margin:6px 0 0;font-size:15px;color:#ffe9a8}
.rkbtn{margin-top:10px}
.rkm{max-width:640px}.rkm h2{margin:0 0 8px}
.rkme{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1.5px solid #f1c24a;border-radius:12px;background:#1a1610;margin-bottom:8px;font-size:15px;line-height:1.4}
.rkrule{font-size:12px;color:var(--mut);margin:0 0 8px;line-height:1.45}
.rkt{width:100%;border-collapse:collapse;font-size:14px}
.rkt td{padding:4px 6px;border-bottom:1px solid #ffffff14;vertical-align:middle}
.rkt tr.me{background:#f1c24a22}.rkt .rn{width:30px;text-align:center;font-weight:800;color:#f1c24a}.rkt .nm{font-weight:700}.rkt .tn{color:var(--mut);font-size:13px}.rkt .pt{text-align:right;font-weight:800}.rkt .gw{text-align:right;color:var(--mut);font-size:12px;white-space:nowrap}
.rkres{display:flex;align-items:center;justify-content:center;gap:12px;margin:12px 0 4px;font-size:20px;color:#ffe9a8}
.rkres b{font-size:26px;color:#fff}.rkres.none{font-size:13px;color:var(--mut)}
.rkres .up{color:#6fe08a;font-style:normal;font-weight:800}.rkres .dn{color:#ff7a6a;font-style:normal;font-weight:800}
.lseat .pn .tb{margin-right:2px}

/* 세로로 든 폰: 전체를 시계 방향 90° 돌려서 가로 화면으로 보여줌 */
html.wide.pr,html.wide.pr body{width:100%;height:100%;overflow:hidden}
html.wide.pr body{position:fixed;left:0;top:0;width:var(--pw);height:var(--ph);transform-origin:0 0;transform:translateX(var(--ph)) rotate(90deg);margin:0;padding:0}
html.wide.pr #rot{display:none}

/* 폰(터치 기기)에서만: 어두운 화면에서도 배치칸·대기칸 테두리가 잘 보이게 밝게 */
html.mob .g2 .card.empty{border:2px dashed #ffffffa6;background:#ffffff1c;color:#ffffff80}
html.mob .g2 .card.empty.bnum{color:#ffffff8c;border:2px dashed #ffffffb0}
html.mob html.wide .card.empty.bnum.locked,html.mob.wide .card.empty.bnum.locked{background:#ffffff14;border:2px dashed #ffffff80;color:#ffffffa0}
html.mob.wide .g2 .card.empty.bnum.locked .lk,html.mob.wide .g2 .card.empty.bnum.locked{color:#ffffffb8}
html.mob .colF .slot,html.mob .colB .slot{border-color:#ffffffa0}