:root{
  --gold:#f6c34d; --red:#e84030; --green:#46d840; --green-glow:#5bff52;
  --blue:#4ab0ff; --hp:#f04040; --text:#f3ead4; --dark:#1a0e08;
  --m-w:72px; --m-h:84px; --c-w:64px; --c-h:90px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{height:100%;overflow:hidden;background:#000;color:var(--text);
  font-family:'Segoe UI','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;touch-action:manipulation}
#app{width:100vw;height:100vh;position:relative}
.screen{display:none;width:100%;height:100%}
.screen.active{display:flex;flex-direction:column}

/* ===== 메뉴 ===== */
#menu,#rules,#credits{background:radial-gradient(ellipse at 50% 30%,#3a2416 0%,#180c06 70%);align-items:center;justify-content:center;padding:5cqmin;text-align:center}
#menu h1{font-size:clamp(40px,11cqmin,86px);color:var(--gold);letter-spacing:3px;text-shadow:0 4px 12px #000,0 0 26px rgba(246,195,77,.4);font-weight:800}
#menu h1 span{color:#fff}
#menu .subtitle{color:#c4a878;font-size:clamp(12px,2.4cqmin,18px);margin:.3em 0 1.4em}
/* ===== 캐릭터 선택 (큰 초상화 + 원소색 카드) ===== */
#classPick{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;width:min(96vw,780px);margin-bottom:1.5em}
#classPick .cls{position:relative;width:min(29vw,140px);background:linear-gradient(180deg,#241712,#150e09);border:2px solid #463422;border-radius:18px;padding:14px 8px 11px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;overflow:hidden;transition:transform .16s cubic-bezier(.2,.8,.3,1),box-shadow .16s,border-color .16s}
#classPick .cls::before{content:'';position:absolute;top:0;left:0;right:0;height:54%;background:radial-gradient(ellipse at 50% 0%,var(--ac,#888),transparent 72%);opacity:.32;pointer-events:none}
#classPick .cls .clsimg{width:clamp(78px,20vw,104px);height:clamp(78px,20vw,104px);border-radius:16px;object-fit:cover;border:2.5px solid var(--ac,#888);box-shadow:0 5px 16px rgba(0,0,0,.6);z-index:1}
#classPick .cls > span{font-size:clamp(13px,2.4cqmin,15px);font-weight:800;color:#f6ecd6;z-index:1;text-shadow:0 1px 3px #000}
#classPick .cls small{font-size:clamp(10px,1.9cqmin,12px);color:#b6a082;font-weight:600;z-index:1}
#classPick .cls:hover{transform:translateY(-5px)}
#classPick .cls:active{transform:scale(.96)}
#classPick .cls.on{border-color:var(--ac,#f6c34d);box-shadow:0 0 0 2px var(--ac,#f6c34d),0 10px 28px color-mix(in srgb,var(--ac,#f6c34d) 40%,transparent)}
#classPick .cls.on::before{opacity:.55}
#classPick .cls.on::after{content:'✓';position:absolute;top:7px;right:9px;width:20px;height:20px;border-radius:50%;background:var(--ac,#f6c34d);color:#1a1206;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 2px 5px rgba(0,0,0,.6)}
#classPick .cls[data-cls=pyro]{--ac:#e8643a} #classPick .cls[data-cls=storm]{--ac:#f0c43a}
#classPick .cls[data-cls=stone]{--ac:#b08858} #classPick .cls[data-cls=life]{--ac:#46c87a} #classPick .cls[data-cls=frost]{--ac:#5ab4ff}
.menu-buttons{display:flex;flex-direction:column;gap:.9em;width:min(80vw,360px)}
.btn{font-family:inherit;padding:.85em 1.4em;border:none;border-radius:10px;font-size:clamp(15px,2.8cqmin,20px);font-weight:700;cursor:pointer;background:#3a2418;color:var(--text);border:1px solid #6e4a2c;transition:transform .12s,filter .12s}
.btn.primary{background:linear-gradient(180deg,#1f9d57,#127a40);border-color:#0c5e30;color:#fff}
.btn:active{transform:scale(.96);filter:brightness(1.1)}
.snd{position:absolute;top:2cqmin;right:2cqmin;background:rgba(0,0,0,.4);border:1px solid #6e4a2c;border-radius:50%;width:44px;height:44px;font-size:20px;cursor:pointer;color:#fff}
.version{position:absolute;bottom:1.5cqmin;right:2.5cqmin;color:#6a5440;font-size:11px}
#rules h2,#credits h2{color:var(--gold);margin-bottom:.7em;font-size:clamp(20px,4cqmin,30px)}
.rules-list{max-width:560px;line-height:1.9;font-size:clamp(13px,2.3cqmin,16px);text-align:left;padding-left:1.4em}
.rules-list b{color:var(--gold)}
#rules .btn,#credits .btn{margin-top:1.6em;width:min(60vw,240px)}
#credits p{margin:.5em 0;opacity:.9;font-size:clamp(13px,2.3cqmin,16px)}

/* ===== 보드 ===== */
#match{position:relative;background:#000;overflow:hidden}
/* ★ 고정 내부 해상도 1280×720(16:9) + transform:scale로 통째 확대/축소 → 카드 내부크기 절대 불변(창 바뀌면 줌만) */
#stage{position:absolute;left:50%;top:50%;width:1280px;height:720px;margin:-360px 0 0 -640px;transform-origin:center center;transform:scale(var(--gs,1));container-type:size;container-name:stage;will-change:transform}
#board{position:absolute;inset:0;overflow:hidden;
  background:radial-gradient(ellipse at 50% 50%,#3c2a18 0%,#241608 55%,#120a04 100%)}
#board::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 38%,rgba(90,60,30,.35),transparent 55%),
             radial-gradient(ellipse at 50% 62%,rgba(90,60,30,.3),transparent 55%);
  pointer-events:none}
#board::after{content:'';position:absolute;left:calc(4% + var(--lw,0));right:calc(4% + var(--tw,0));top:50%;height:2px;transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,rgba(246,195,77,.25),transparent);pointer-events:none}
#play{position:absolute;left:var(--lw,0);top:0;bottom:0;right:var(--tw,0);z-index:10}

/* ===== 유닛 (카드/미니언 공용 노드) ===== */
.unit{position:absolute;left:0;top:0;width:var(--c-w);height:var(--c-h);
  transition:transform .22s cubic-bezier(.2,.7,.3,1);will-change:transform;cursor:pointer;backface-visibility:hidden}
.unit .body{position:absolute;inset:0;border-radius:9px;
  background:linear-gradient(160deg,var(--c1,#7a6a4a),var(--c2,#3f3120));
  box-shadow:0 3px 7px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.12);
  transition:opacity .15s,filter .15s}
.unit .art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:calc(var(--c-w)*0.62);filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.unit .gem{position:absolute;top:-6px;left:-5px;height:16px;min-width:16px;border-radius:8px;padding:0 4px;
  color:#0a0e16;border:1.5px solid rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:10px;z-index:4;white-space:nowrap;
  box-shadow:0 2px 5px rgba(0,0,0,.7)}
.unit .nm{position:absolute;left:3px;right:3px;top:40%;transform:translateY(-50%);text-align:center;
  font-size:calc(var(--c-w)*0.16);font-weight:700;color:#fff;line-height:1.05;z-index:3;
  text-shadow:0 1px 2px #000,0 0 3px #000;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.unit .st{position:absolute;bottom:-5px;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;color:#fff;text-shadow:0 1px 2px #000;z-index:3;border:2px solid rgba(0,0,0,.4)}
.unit .atk{left:-5px;background:radial-gradient(circle at 32% 30%,#ffd86a,#d8a020)}
.unit .hp{right:-5px;background:radial-gradient(circle at 32% 30%,#ff7a6a,var(--hp))}
.unit .atk.buff{background:radial-gradient(circle at 32% 30%,#9bff6a,#46c820)}
.unit .atk.debuff{background:radial-gradient(circle at 32% 30%,#bbb,#777)}
.unit .hp.buff{background:radial-gradient(circle at 32% 30%,#9bff6a,#46c820)}
.unit .hp.dmg{background:radial-gradient(circle at 32% 30%,#ff5a4a,#b81808)}
.unit .kw{position:absolute;top:1px;left:0;right:0;text-align:center;font-size:11px;z-index:3;letter-spacing:-1px}
.unit .frost,.unit .ds{position:absolute;inset:0;border-radius:9px;pointer-events:none;opacity:0;transition:opacity .15s}
/* 빙결 = 투명한 얼음/유리 */
.unit .frost{background:linear-gradient(135deg,rgba(150,215,255,.52),rgba(95,175,240,.42) 55%,rgba(170,225,255,.52));
  box-shadow:inset 0 0 0 3px #8fd6ff, inset 0 0 22px rgba(190,238,255,.95), 0 0 20px rgba(110,200,255,.95)}
.unit .frost::after{content:'❄';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:34px;color:rgba(240,250,255,.95);text-shadow:0 0 14px #6fd0ff,0 0 5px #fff;z-index:4}
.unit.frozen .body{filter:saturate(.5) brightness(.88)}
/* 천상의 보호막 = 유리 느낌의 황금 보호막 */
.unit .ds{box-shadow:0 0 0 2px rgba(255,236,170,.95), 0 0 16px rgba(246,195,77,.75), inset 0 0 14px rgba(255,240,190,.6), inset 0 0 0 2px rgba(255,255,255,.4);
  background:linear-gradient(135deg,rgba(255,242,200,.22),rgba(255,210,110,.07) 55%,rgba(255,248,220,.2))}
.unit.frozen .frost{opacity:1}
.unit.ds-on .ds{opacity:1}

/* 손패 카드 형태 */
.unit.in-hand{width:var(--c-w);height:var(--c-h)}
.unit.in-hand .body{border-radius:8px;border:2px solid rgba(40,24,12,.6)}
.unit.in-hand.spell .body{background:linear-gradient(160deg,#5a78c0,#26345e)}
.unit.in-hand.weapon .body{background:linear-gradient(160deg,#b08040,#5e3a18)}
.unit.in-hand.legend .body{border-color:#f0a020;box-shadow:0 3px 7px rgba(0,0,0,.5),0 0 10px rgba(240,160,32,.5),inset 0 0 0 1px rgba(255,220,120,.4)}
.unit.in-hand.epic .body{border-color:#c050e0}
.unit.in-hand.rare .body{border-color:#4080d0}
/* 손패 카드: 아트(상단)·이름·효과 전문·스탯 — 요약 말고 내용이 보이게 */
.unit.in-hand .art{inset:auto;top:3%;left:4%;right:4%;height:46%;font-size:calc(var(--c-w)*0.55)}
.unit.in-hand .nm{top:49%;font-size:calc(var(--c-w)*0.145);background:linear-gradient(180deg,transparent,rgba(20,12,6,.6) 35%,rgba(20,12,6,.6) 65%,transparent);padding:1px 0}
.unit.in-hand .ctext{position:absolute;left:4%;right:4%;top:58%;bottom:10%;z-index:3;display:flex;align-items:center;justify-content:center;text-align:center;font-size:calc(var(--c-w)*0.118);line-height:1.2;color:#241a10;font-weight:600;background:rgba(245,236,205,.9);border-radius:5px;padding:3px;overflow:hidden}
/* 보드 미니언 = 손패와 동일한 풀 카드(아트 상단·이름·효과·스탯). 단축 토큰 X */
.unit.on-board{width:var(--m-w);height:var(--m-h)}
.unit.on-board .body{border-radius:8px;border:2px solid rgba(40,24,12,.6)}
.unit.on-board .gem{display:flex;top:-5px;left:-5px;height:15px;min-width:15px;font-size:9px;padding:0 3px;z-index:6}   /* 보드 카드에도 등급(동/은/금/전설) 표시 */
.unit.on-board .art{inset:auto;top:3%;left:4%;right:4%;height:46%;font-size:calc(var(--m-w)*0.52)}
.unit.on-board .nm{top:49%;font-size:calc(var(--m-w)*0.14);background:linear-gradient(180deg,transparent,rgba(20,12,6,.6) 35%,rgba(20,12,6,.6) 65%,transparent);padding:1px 0}
.unit.on-board .ctext{position:absolute;left:4%;right:4%;top:58%;bottom:10%;z-index:3;display:flex;align-items:center;justify-content:center;text-align:center;font-size:calc(var(--m-w)*0.11);line-height:1.16;color:#241a10;font-weight:600;background:rgba(245,236,205,.9);border-radius:4px;padding:2px;overflow:hidden}
.unit .cardart{position:absolute;top:3%;left:4%;width:92%;height:46%;object-fit:cover;border-radius:6px;z-index:2;display:none}
.unit.on-board.legend .body{border-color:#f0a020;box-shadow:0 3px 7px rgba(0,0,0,.5),0 0 9px rgba(240,160,32,.5)}
/* 재배치 화살표 */
.unit .mvbtn{position:absolute;top:50%;transform:translateY(-50%);width:25px;height:25px;border-radius:50%;background:rgba(16,26,40,.95);border:2px solid #5bd6ff;color:#bfeaff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;z-index:9;box-shadow:0 0 9px rgba(91,214,255,.7);pointer-events:auto}
.unit .mvL{left:-13px} .unit .mvR{right:-13px}
.unit.movable .body{box-shadow:0 0 0 2px #5bd6ff,0 0 12px rgba(91,214,255,.6)}
.unit.on-board.taunt .body{box-shadow:0 0 0 3px #d8a020,0 3px 7px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.15)}
.unit.on-board.stealth .body{opacity:.55;outline:1px dashed rgba(255,255,255,.5);outline-offset:-3px}
.unit.on-board.sleep .body{filter:brightness(.62) saturate(.7)}
.unit.on-board.ready .body{box-shadow:0 0 0 2px var(--green-glow),0 0 14px rgba(91,255,82,.55),0 3px 7px rgba(0,0,0,.5);animation:ready 1.4s ease-in-out infinite}
.unit.on-board.sel{z-index:60!important}
.unit.on-board.sel .body{box-shadow:0 0 0 3px var(--gold),0 0 20px var(--gold),0 4px 10px rgba(0,0,0,.6);transform:translateY(-6px)}
.unit.on-board.tgt .body{box-shadow:0 0 0 3px var(--red),0 0 18px var(--red);animation:tgtpulse .7s infinite}
.unit.in-hand.playable .body{box-shadow:0 0 0 2px var(--green-glow),0 0 12px rgba(91,255,82,.6),0 3px 7px rgba(0,0,0,.5)}
.unit.in-hand.playable{transform:translateY(-6px)}

/* 카드 뒷면 */
/* 카드 뒷면 = 공용 디자인(원소 절대 안 드러남, 모든 카드 동일) */
.unit.back .body{background:
  repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 6px,transparent 6px 12px),
  repeating-linear-gradient(-45deg,rgba(255,255,255,.05) 0 6px,transparent 6px 12px),
  linear-gradient(160deg,#2c3252,#171b2e);
  border:2px solid #c8a850;box-shadow:0 2px 6px rgba(0,0,0,.55),inset 0 0 0 3px rgba(0,0,0,.25),inset 0 0 14px rgba(120,150,220,.22)}
.unit.back .body::after{content:'✦';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:calc(var(--m-w,80px)*0.44);color:rgba(224,204,144,.9);text-shadow:0 1px 3px #000,0 0 8px rgba(224,204,144,.4);z-index:2;pointer-events:none}
.unit.back .art,.unit.back .cardart,.unit.back .gem,.unit.back .elem,.unit.back .nm,.unit.back .ctext,
.unit.back .kw,.unit.back .deb,.unit.back .st,.unit.back .dmgpv,.unit.back .frost,.unit.back .ds{display:none!important}

/* 타격감 키프레임 */
@keyframes summonPop{0%{transform:scale(.2);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.unit.summoning .body{animation:summonPop .34s cubic-bezier(.2,.9,.3,1.3)}
@keyframes hit{0%{filter:brightness(2.6) saturate(.4)}100%{filter:none}}
.unit.hit .body{animation:hit .24s}
@keyframes death{to{transform:scale(.3) rotate(16deg);opacity:0}}
.unit.dying{transition:none!important;z-index:940}
.unit.dying .body{animation:death .34s ease-in forwards}
@keyframes buffpop{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
.unit.buffpop .body{animation:buffpop .3s}
@keyframes ready{0%,100%{box-shadow:0 0 0 2px var(--green-glow),0 0 10px rgba(91,255,82,.4),0 3px 7px rgba(0,0,0,.5)}50%{box-shadow:0 0 0 3px var(--green-glow),0 0 20px rgba(91,255,82,.8),0 3px 7px rgba(0,0,0,.5)}}
@keyframes tgtpulse{0%,100%{box-shadow:0 0 0 3px var(--red),0 0 10px var(--red)}50%{box-shadow:0 0 0 4px var(--red),0 0 22px var(--red)}}
.unit.casting .body{box-shadow:0 0 24px rgba(120,200,255,.9),0 0 0 2px #9ad0ff}
.unit.spent .body{opacity:0;filter:brightness(2)}
.hitstop .unit .body{animation-play-state:paused!important}

/* ===== 영웅 크롬 ===== */
.hero{position:absolute;left:calc((100% - var(--tw,0px) + var(--lw,0px))/2);transform:translateX(-50%);width:13cqmin;height:13cqmin;min-width:80px;min-height:80px;max-width:116px;max-height:116px;
  border-radius:50%;background:radial-gradient(circle at 40% 35%,#5a4126,#2a1810);border:4px solid var(--gold);
  z-index:30;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.7);transition:box-shadow .18s,transform .1s}
.hero.opp{top:1cqmin;z-index:22} .hero.me{bottom:1cqmin}   /* 적 영웅 = 손패 뒷면(정보없음)보다 앞에 보이게 */
.hero .art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:7cqmin}
.hero .hp{position:absolute;bottom:-10px;right:-6px;background:var(--hp);color:#fff;border:3px solid #fff;
  min-width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;box-shadow:0 2px 6px rgba(0,0,0,.6);z-index:2}
.hero .armor{position:absolute;top:-8px;right:-6px;background:#9aa6b4;color:#1a2530;border:2px solid #fff;min-width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;z-index:2}
.hero.tgt{box-shadow:0 0 0 4px var(--red),0 0 26px var(--red);animation:tgtpulse .7s infinite}
.hero.sel,.hero.armed{box-shadow:0 0 0 4px var(--green-glow),0 0 24px var(--green-glow)}
.hero.frozen{box-shadow:0 0 0 4px #6fc0ff,0 0 22px #6fc0ff,inset 0 0 18px rgba(180,230,255,.8)}

.mana,.weaponslot.opp,.deckcount,.power.opp{pointer-events:none}  /* 데코 크롬은 탭 통과(내 무기슬롯은 탭 가능) */
.mana{position:absolute;z-index:31;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.mana.opp{top:2cqmin;left:2cqmin} .mana.me{bottom:2cqmin;left:2cqmin}
.mana .pips{display:flex;gap:2px;flex-wrap:wrap;max-width:96px}
.mana .pips i{width:9px;height:9px;border-radius:50%;background:#1a3050;border:1px solid #3a6fa0;display:block}
.mana .pips i.on{background:radial-gradient(circle at 35% 30%,#bfe4ff,#3a9bff);border-color:#bfe4ff;box-shadow:0 0 4px #4ab0ff}
.mana .pips i.lock{background:#444;border-color:#666}
.mana .txt{font-size:12px;font-weight:800;color:#bfe4ff;text-shadow:0 1px 2px #000}

.power{position:absolute;z-index:31;width:11cqmin;height:11cqmin;min-width:54px;min-height:54px;max-width:74px;max-height:74px;
  border-radius:50%;background:radial-gradient(circle,#8a6a40,#4a3020);border:2px solid #a98050;color:var(--gold);
  display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.power.opp{top:2.5cqmin;right:auto;left:calc((100% - var(--tw,0) + var(--lw,0))/2 + 13cqmin)} .power.me{bottom:2.5cqmin;right:14cqmin}
.power .picon{font-size:22px;line-height:1}
.power .pcost{position:absolute;bottom:-6px;right:-6px;width:22px;height:22px;border-radius:50%;background:#2080dd;color:#fff;border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.power.me.usable{box-shadow:0 0 0 2px var(--green-glow),0 0 14px rgba(91,255,82,.6);animation:ready 1.5s infinite}
.power.me.used{filter:grayscale(.8) brightness(.6);cursor:default}
.power.opp .picon{font-size:18px}

.weaponslot{position:absolute;z-index:33;width:11cqmin;height:11cqmin;min-width:54px;min-height:54px;max-width:74px;max-height:74px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:box-shadow .15s,opacity .15s;
  background:radial-gradient(circle,#5a4630,#2a1c10);border:2px dashed rgba(168,128,80,.5)}
.weaponslot .wicon{font-size:25px;filter:drop-shadow(0 2px 3px #000)}
.weaponslot.empty{opacity:.3}
.weaponslot.empty .wa,.weaponslot.empty .wd{display:none}
.weaponslot.armed{opacity:1;border:2px solid #c89020;background:radial-gradient(circle,#8a6a40,#4a3020);box-shadow:0 0 12px rgba(200,144,32,.55)}
.weaponslot .wa,.weaponslot .wd{position:absolute;bottom:-6px;width:24px;height:24px;border-radius:50%;border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#fff;text-shadow:0 1px 1px #000}
.weaponslot .wa{left:-6px;background:radial-gradient(circle at 32% 30%,#ffd86a,#d8a020)}
.weaponslot .wd{right:-6px;background:radial-gradient(circle at 32% 30%,#cfd8e3,#7a8898);color:#16202a;text-shadow:none}
.weaponslot.me.armed{box-shadow:0 0 0 2px var(--green-glow),0 0 16px rgba(91,255,82,.6)}
.weaponslot.opp.empty{display:none}   /* 상대 무기 없으면 숨김(내 슬롯은 비어도 표시) */

.deckcount{position:absolute;z-index:31;background:rgba(0,0,0,.45);border:1px solid #6e4a2c;border-radius:6px;padding:2px 7px;font-size:12px;font-weight:700;color:#d8c090}
.deckcount.opp{top:2cqmin;right:14cqmin} .deckcount.me{bottom:2cqmin;right:2cqmin}

.endturn{position:absolute;right:2cqmin;top:50%;transform:translateY(-50%);z-index:40;
  background:linear-gradient(180deg,#c8a050,#a07820);color:#2a1810;font-weight:800;font-family:inherit;
  border:3px solid #5a3a10;border-radius:26px;padding:.7em .9em;font-size:13px;line-height:1.1;cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.7);min-width:56px}
.endturn.hot{background:linear-gradient(180deg,#88f070,#56b840);color:#1a3a10;border-color:#2d6020;box-shadow:0 4px 10px rgba(0,0,0,.7),0 0 16px rgba(86,232,74,.6)}
.endturn:active{transform:translateY(-50%) scale(.95)}
.endturn:disabled{opacity:.5;cursor:default}

/* ===== 배너/토스트/힌트 ===== */
.banner{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(.8);z-index:200;
  font-size:clamp(28px,8cqmin,64px);font-weight:800;color:var(--gold);text-shadow:0 4px 14px #000,0 0 22px rgba(246,195,77,.6);
  opacity:0;pointer-events:none;letter-spacing:4px}
.banner.show{animation:banner 1.1s ease-out}
@keyframes banner{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
.toast{position:fixed;left:50%;bottom:14cqmin;transform:translateX(-50%);z-index:400;background:rgba(0,0,0,.85);color:#fff;
  padding:9px 16px;border-radius:9px;font-size:13px;font-weight:600;opacity:0;transition:opacity .2s;pointer-events:none;max-width:80vw;text-align:center}
.toast.show{opacity:1}
#targetHint{position:absolute;left:50%;top:46%;transform:translateX(-50%);z-index:70;display:none;
  background:rgba(184,32,24,.9);color:#fff;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:700;pointer-events:none;box-shadow:0 2px 10px rgba(0,0,0,.6)}
#oppFlash{position:absolute;top:1cqmin;left:50%;transform:translateX(-50%);z-index:55;font-size:12px;font-weight:700;color:var(--gold);
  background:rgba(0,0,0,.55);padding:3px 10px;border-radius:9px;opacity:0;transition:opacity .35s;pointer-events:none}

/* ===== 덱 트래커 ===== */
#deckPill{position:absolute;left:2cqmin;bottom:11cqmin;z-index:60;display:flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:14px;background:rgba(0,0,0,.55);color:#fff;font-weight:800;font-size:13px;
  border:1px solid rgba(255,255,255,.18);cursor:pointer;transition:transform .1s;max-width:62vw;overflow:hidden}
#deckPill:active{transform:scale(.94)}
#deckPill.low{box-shadow:0 0 0 2px rgba(255,80,80,.6);animation:tgtpulse .9s infinite}
#deckPill .ic{font-size:14px} #deckPill #peekRow{display:flex;gap:4px;align-items:center;overflow:hidden}
#peekRow .dk{font-weight:800} #peekRow .chip{font-size:10px;font-weight:600;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);border-radius:9px;padding:2px 6px;white-space:nowrap}
#peekRow .chip b{color:var(--gold);margin-left:3px}
#track{position:absolute;left:0;right:0;bottom:0;z-index:120;background:linear-gradient(160deg,rgba(40,28,16,.95),rgba(20,12,6,.97));
  backdrop-filter:blur(6px);border-top:1px solid rgba(255,255,255,.14);border-radius:14px 14px 0 0;
  max-height:0;overflow:hidden;transition:max-height .26s cubic-bezier(.2,.7,.3,1)}
#track.half{max-height:210px} #track.full{max-height:64vh;overflow:auto}
#track .grip{width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.3);margin:7px auto}
#trackBody{padding:0 12px 12px}
.thead{font-size:12px;font-weight:700;color:var(--gold);margin:8px 0 4px}
.curve{display:flex;align-items:flex-end;gap:4px;height:56px;margin:6px 0 16px}
.curve .bar{flex:1;background:linear-gradient(#5bb6ff,#1f6fd0);border-radius:3px 3px 0 0;position:relative;min-height:2px;transition:height .25s}
.curve .bar b{position:absolute;top:-14px;left:0;right:0;text-align:center;font-size:10px;font-weight:700;color:#cfe}
.curve .bar i{position:absolute;bottom:-14px;left:0;right:0;text-align:center;font-size:9px;opacity:.6;font-style:normal}
.clist,.oplist{display:flex;flex-direction:column}
.crow{display:flex;align-items:center;gap:7px;padding:4px 2px;border-bottom:1px solid rgba(255,255,255,.06);font-size:12px}
.crow.used{opacity:.4;text-decoration:line-through}
.crow .cc{width:20px;height:20px;border-radius:50%;background:#2080dd;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex:0 0 auto}
.crow .cn{flex:1} .crow .cq{opacity:.7;font-weight:700}

/* ===== 결과 / 선택 ===== */
.overlay{position:absolute;inset:0;background:rgba(0,0,0,.78);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:900;gap:1.4em}
.overlay.show{display:flex}
.opanel{display:flex;flex-direction:column;align-items:center;gap:1em;padding:8cqmin}
.ovtext{font-size:clamp(44px,14cqmin,120px);font-weight:800;letter-spacing:6px;text-shadow:0 4px 16px #000}
.ovtext.win{color:var(--gold);text-shadow:0 0 30px rgba(246,195,77,.8)}
.ovtext.lose{color:var(--red);text-shadow:0 0 30px rgba(232,64,48,.8)}
.opanel .btn{width:min(70vw,260px)}
.choose{position:absolute;inset:0;background:rgba(0,0,0,.7);display:none;flex-direction:column;align-items:center;justify-content:center;gap:1em;z-index:950}
.choose.show{display:flex}
.choose .ctitle{color:var(--gold);font-size:20px;font-weight:800;margin-bottom:.5em}
.choose .cbtn{font-family:inherit;background:linear-gradient(180deg,#3a6a3a,#1c4a1c);color:#fff;border:2px solid #5bff52;border-radius:12px;padding:1em 1.6em;font-size:18px;font-weight:700;cursor:pointer;min-width:min(70vw,260px)}
.choose .cbtn:active{transform:scale(.96)}

/* ===== 이펙트 레이어 ===== */
.fxnum-layer{position:fixed;inset:0;pointer-events:none;z-index:520}
.fxnum{position:absolute;transform:translate(-50%,-50%) scale(.5);font-weight:900;font-size:clamp(26px,7cqmin,52px);
  text-shadow:0 2px 6px #000,0 0 10px currentColor;opacity:0}
.fxnum.dmg{color:#ff5a4a} .fxnum.heal{color:#6bff6b} .fxnum.shield{color:var(--gold);font-size:clamp(16px,4cqmin,28px)}
.fxnum.go{animation:numpop .72s ease-out forwards}
@keyframes numpop{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}25%{transform:translate(-50%,-90%) scale(1.25);opacity:1}100%{transform:translate(-50%,-150%) scale(1);opacity:0}}
.flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:510;transition:opacity .09s}
.flash.on{opacity:.5;transition:none}
#fx{position:fixed;inset:0;pointer-events:none;z-index:500;width:100vw;height:100vh}

@media (max-width:560px){
  .endturn{font-size:12px;padding:.6em .7em}
  .hero{border-width:3px}
}
@media (prefers-reduced-motion:reduce){ .unit{transition:transform .05s} }

/* ===== 도발(수호) = 하스식 두꺼운 돌/황금 테두리. 카드 모양·아트 그대로(가리지 않음) ===== */
.unit.on-board.taunt .body{
  box-shadow:0 0 0 4px #ffd24a, 0 0 0 8px #6a4012, 0 0 0 11px #261806, inset 0 0 0 3px rgba(255,245,200,.78), 0 0 22px rgba(255,205,70,.95), 0 4px 11px rgba(0,0,0,.7) !important;
}   /* 도발 = 두꺼운 3겹 황금/돌 외각 + 강한 글로우(확연히 구분) */
.unit.on-board.taunt::after{ content:'🛡'; position:absolute; top:-11px; left:50%; transform:translateX(-50%); z-index:8;
  width:21px; height:21px; line-height:20px; text-align:center; font-size:13px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#ffe79a,#d89020); border:2px solid #5a3a10; box-shadow:0 1px 4px rgba(0,0,0,.7); pointer-events:none }   /* 도발 메달(상단중앙) */

/* ===== 하스스톤식 조준 화살표 ===== */
#aim{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:480;display:none}
#aimPath{fill:none;stroke:rgba(232,64,48,.92);stroke-width:7;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(232,64,48,.9))}
#aimHead{fill:#ff6a52;filter:drop-shadow(0 0 6px rgba(232,64,48,.9))}

/* ===== 카드 확대 정보 ===== */
.inspect{position:fixed;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(4px);display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:945;padding:20px}
.inspect.show{display:flex}
.iCard{position:relative;width:min(72vw,270px);aspect-ratio:5/7;border-radius:16px;background:linear-gradient(160deg,var(--c1),var(--c2));box-shadow:0 14px 44px rgba(0,0,0,.7),inset 0 0 0 2px rgba(255,255,255,.2);display:flex;flex-direction:column;align-items:center;padding:18px 16px;color:#fff;animation:pop .2s}
@keyframes pop{0%{transform:scale(.8);opacity:0}100%{transform:scale(1);opacity:1}}
.iCost{position:absolute;top:-12px;left:-12px;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#9ad0ff,#2080dd);border:3px solid #fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:24px;box-shadow:0 3px 8px rgba(0,0,0,.7)}
.iType{position:absolute;top:12px;right:16px;font-size:12px;opacity:.85;font-weight:700;letter-spacing:1px}
.iArt{position:relative;width:80%;aspect-ratio:1/1;margin:4px auto;display:flex;align-items:center;justify-content:center;font-size:min(64px,15cqmin);filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.iArtImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:10px;display:block;z-index:1}
.iName{font-size:20px;font-weight:800;text-shadow:0 2px 4px #000;text-align:center;margin-top:2px}
.iKws{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:5px 0}
.iKw{background:rgba(0,0,0,.4);border:1px solid var(--gold);color:var(--gold);border-radius:10px;padding:2px 8px;font-size:12px;font-weight:700}
.iText{flex:1;width:100%;display:flex;align-items:center;justify-content:center;text-align:center;font-size:15px;line-height:1.5;background:rgba(0,0,0,.25);border-radius:10px;padding:10px;margin-top:4px;overflow:hidden}
/* 멀리건 카드 = 세로로 긴 풀카드 비율(≈9:16) + 같은 높이(들쭉날쭉 방지) */
.mCard .iCard{height:min(45vw,260px);aspect-ratio:auto;overflow:hidden;padding:11px 9px;justify-content:flex-start}
.mCard .iArt{width:88%;height:44%;aspect-ratio:auto;margin:3px auto;flex:0 0 auto}
.mCard .iName{font-size:13px;line-height:1.14;margin-top:3px;flex:0 0 auto;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mCard .iKws{margin:2px 0;min-height:0;flex:0 0 auto}
.mCard .iText{font-size:10.5px;line-height:1.3;padding:5px;margin-top:3px;min-height:0;flex:1 1 auto}
.mCard .iCost{width:34px;height:34px;font-size:16px;top:-8px;left:-8px;border-width:2px}
.mCard .iStats{margin-top:4px;flex:0 0 auto}
.mCard .iStats .ia,.mCard .iStats .ih{width:32px;height:32px;font-size:15px}
.iStats{display:flex;justify-content:space-between;width:100%;margin-top:8px;padding:0 2px;flex:0 0 auto}
.iStats .ia,.iStats .ih{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;color:#fff;border:2px solid rgba(0,0,0,.4);text-shadow:0 1px 2px #000}
.iStats .ia{background:radial-gradient(circle at 32% 30%,#ffd86a,#d8a020)}
.iStats .ih{background:radial-gradient(circle at 32% 30%,#ff7a6a,var(--hp))}
.iHint{color:rgba(255,255,255,.6);font-size:13px}

/* ===== 덱 빌더 ===== */
#deckbuilder{background:radial-gradient(ellipse at 50% 18%,#2e2012,#140c06);padding:0;overflow:hidden}
.dbBar{display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(0,0,0,.32);flex-wrap:wrap;flex:0 0 auto}
.dbTabs{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.dbTab{background:#3a2418;border:1px solid #6e4a2c;border-radius:8px;width:34px;height:34px;font-size:17px;cursor:pointer}
.dbTab.on{background:linear-gradient(180deg,#f6c34d,#c89020);border-color:#c89020}
.dbCount{font-weight:800;font-size:16px} .dbCount b{color:var(--gold)}
.btn.sm{padding:.5em .8em;font-size:13px}
.dbBody{flex:1;display:flex;flex-direction:column;min-height:0;gap:8px;padding:8px}
.dbPool{flex:2;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px;align-content:start;-webkit-overflow-scrolling:touch}
.dbMini{position:relative;display:flex;align-items:center;gap:5px;padding:5px 7px;border-radius:8px;background:linear-gradient(160deg,var(--c1),var(--c2));cursor:pointer;border:1px solid rgba(255,255,255,.15);min-height:38px;color:#fff}
.dbMini:active{transform:scale(.96)} .dbMini.maxed{opacity:.42}
.dbMini .m-cost{width:21px;height:21px;border-radius:50%;background:#2080dd;border:1px solid #fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;flex:0 0 auto}
.dbMini .m-art{position:relative;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:19px;flex:0 0 auto;border-radius:6px;overflow:hidden}
.dbMini .m-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dbMini.r-legend{border:2px solid #f6c34d;box-shadow:0 0 8px rgba(246,195,77,.55)}
.dbMini.r-epic{border:2px solid #a335ee} .dbMini.r-rare{border:1.5px solid #4fa3ff}
.dbMini .m-nm{flex:1;font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 2px #000}
.dbMini .m-st{font-size:11px;font-weight:800}.dbMini .m-st.spell{opacity:.6}
.dbMini .m-have{position:absolute;top:-6px;right:-6px;background:var(--gold);color:#1a0e08;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}
.dbSide{flex:1.1;display:flex;flex-direction:column;min-height:0;gap:0}
.dbCurve .curve{display:flex;align-items:flex-end;gap:3px;height:40px;margin:4px 0 14px}
.dbCurve .bar{flex:1;background:linear-gradient(#5bb6ff,#1f6fd0);border-radius:2px 2px 0 0;position:relative;min-height:2px}
.dbCurve .bar b{position:absolute;top:-12px;left:0;right:0;text-align:center;font-size:9px;color:#cfe}
.dbCurve .bar i{position:absolute;bottom:-13px;left:0;right:0;text-align:center;font-size:8px;opacity:.6;font-style:normal}
.dbDeckList{flex:1;overflow-y:auto;background:rgba(0,0,0,.25);border-radius:8px;padding:4px;min-height:60px}
.dbRow{display:flex;align-items:center;gap:6px;padding:3px 4px;border-bottom:1px solid rgba(255,255,255,.06);font-size:12px;cursor:pointer}
.dbRow:active{background:rgba(255,80,80,.2)}
.dbRow .r-cost{width:18px;height:18px;border-radius:50%;background:#2080dd;color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex:0 0 auto}
.dbRow .r-nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dbRow .r-q{opacity:.8;font-weight:700}
.dbEmpty{opacity:.5;font-size:12px;text-align:center;padding:14px}
.dbSave{display:flex;gap:6px;margin-top:6px;flex:0 0 auto}
.dbSave input{flex:1;background:#1a120a;border:1px solid #6e4a2c;border-radius:8px;color:#fff;padding:6px 10px;font-family:inherit;font-size:14px;min-width:0}
.dbSaved{max-height:110px;overflow-y:auto;margin-top:6px;flex:0 0 auto}
.dbSavedRow{display:flex;align-items:center;gap:6px;padding:4px;font-size:12px;border-bottom:1px solid rgba(255,255,255,.06)}
.dbSavedRow .s-cls{font-size:14px}.dbSavedRow .s-nm{flex:1;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dbSavedRow .s-q{opacity:.6}
.s-load{background:#1f7a40;border:none;color:#fff;border-radius:6px;padding:3px 8px;font-size:11px;cursor:pointer;font-family:inherit}
.s-del{background:#7a2a22;border:none;color:#fff;border-radius:6px;width:22px;height:22px;cursor:pointer}
@media (min-width:760px){ .dbBody{flex-direction:row} .dbPool{flex:1.4} }
/* 덱빌더 분류 필터 */
.dbFilters{flex:0 0 auto;padding:4px 8px;display:flex;flex-direction:column;gap:3px;background:rgba(0,0,0,.22);max-height:32vh;overflow-y:auto}
.dbFGroup{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
.dbFGroup::-webkit-scrollbar{height:0}
.dbFL{font-size:10px;font-weight:800;color:var(--gold);flex:0 0 auto;width:30px}
.dbFChip{flex:0 0 auto;background:#2a1a10;border:1px solid #5a3a20;border-radius:8px;padding:3px 8px;font-size:11px;font-weight:600;color:var(--text);cursor:pointer;font-family:inherit;white-space:nowrap}
.dbFChip.on{background:linear-gradient(180deg,#f6c34d,#c89020);color:#1a0e08;border-color:#c89020}
/* 메뉴 덱 선택 */
#menuDeck{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:12px;max-width:min(92vw,420px)}
#menuDeck .md-label{font-size:13px;opacity:.7}
#menuDeck .md-deck{background:#3a2418;border:1px solid #6e4a2c;border-radius:8px;padding:5px 10px;font-size:12px;font-weight:700;color:var(--text);cursor:pointer;font-family:inherit}
#menuDeck .md-deck.on{background:linear-gradient(180deg,#1f9d57,#127a40);border-color:#0c5e30;color:#fff}
#menuDeck .md-none{font-size:12px;opacity:.5}

/* ===== 하스스톤식 우측 덱 트래커 ===== */
#tracker{position:absolute;right:0;top:11%;bottom:17%;width:var(--tw,0);z-index:46;
  background:linear-gradient(160deg,rgba(22,15,8,.84),rgba(10,7,4,.9));backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.12);border-radius:10px 0 0 10px;display:flex;flex-direction:column;overflow:hidden;box-shadow:-2px 0 10px rgba(0,0,0,.5)}
.trkHdr{font-size:11px;font-weight:800;color:var(--gold);padding:5px 6px;border-bottom:1px solid rgba(255,255,255,.1);text-align:center;flex:0 0 auto}
.trkHdr b{color:#fff;font-size:13px}
#trkList{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:3px 2px}
.trkRow{display:flex;align-items:center;gap:4px;padding:2px 3px;border-radius:4px;margin-bottom:1px;background:rgba(255,255,255,.05);font-size:11px;line-height:1.15;transition:opacity .25s}
.trkRow .trkCost{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#9ad0ff,#2080dd);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex:0 0 auto}
.trkRow .trkName{flex:1;font-weight:600;color:#f3ead4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trkRow .trkN{font-size:10px;font-weight:800;color:var(--gold);min-width:9px;text-align:right}
.trkRow.partial{opacity:.72}
.trkRow.used{opacity:.34;background:transparent}                 /* 사용한 카드 = 어둡게 */
.trkRow.used .trkName{text-decoration:line-through;color:#9a8a70}
.trkRow.used .trkCost{background:#4a4a4a}
.trkRow.used .trkN{color:#6a8a6a}

/* ===== 좌측 플레이 기록(냈던 카드 + 피해) ===== */
#history{position:absolute;left:0;top:11%;bottom:17%;width:var(--lw,0);z-index:46;
  background:linear-gradient(160deg,rgba(22,15,8,.82),rgba(10,7,4,.88));backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.12);border-radius:0 10px 10px 0;display:flex;flex-direction:column;overflow:hidden;box-shadow:2px 0 10px rgba(0,0,0,.5)}
.histHdr{font-size:10px;font-weight:800;color:var(--gold);padding:4px;text-align:center;border-bottom:1px solid rgba(255,255,255,.1);flex:0 0 auto}
#histList{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:2px}
.histRow{display:flex;align-items:center;gap:3px;padding:3px 2px;border-radius:5px;margin-bottom:2px;background:linear-gradient(160deg,var(--c1),var(--c2));border-left:3px solid #888;cursor:pointer}
.histRow.me{border-left-color:#5bff52} .histRow.opp{border-left-color:#ff6a52}
.histRow .hCost{width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#9ad0ff,#2080dd);color:#fff;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.histRow .hArt{font-size:15px;flex:0 0 auto}
.histRow .hNm{font-size:10px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 2px #000}

/* ===== 상대 손패 수 ===== */
.handcount{position:absolute;z-index:31;background:rgba(0,0,0,.55);border:1px solid #c89020;border-radius:11px;padding:2px 9px;font-size:13px;font-weight:800;color:#ffd86a;pointer-events:none;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.handcount.opp{top:2cqmin;right:24cqmin}

/* ===== 인스펙트 "내기" 버튼 ===== */
.iPlay{font-family:inherit;background:linear-gradient(180deg,#1f9d57,#127a40);border:2px solid #5bff52;color:#fff;border-radius:13px;padding:.8em 1.7em;font-size:17px;font-weight:800;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.5),0 0 14px rgba(91,255,82,.4)}
.iPlay:active{transform:scale(.96)}
.iPlay.dim{background:#3a2a18;border-color:#6a5030;color:#b8a888;box-shadow:none;cursor:default}

/* ===== END TURN 우하단 코너(트래커 아래) + 영능/무기 재배치 ===== */
.endturn{right:calc(var(--tw,0px) + 8px);top:50%;bottom:auto;transform:translateY(-50%)}   /* 턴종료=중앙 우측(하스 위치), 트래커 왼쪽 안 가리게 */
.endturn:active{transform:translateY(-50%) scale(.95)}
.power.me{bottom:2.5cqmin;right:auto;left:calc((100% - var(--tw,0px) + var(--lw,0px))/2 + 13cqmin)}   /* 영능=영웅 오른쪽 */
.weaponslot.me{bottom:2.5cqmin;left:calc((100% - var(--tw,0px) + var(--lw,0px))/2 - 24cqmin)}            /* 무기=영웅 왼쪽(영능과 대칭, 영웅과 안 겹치게) */
.weaponslot.opp{top:2.5cqmin;left:calc((100% - var(--tw,0) + var(--lw,0))/2 - 13cqmin)}
.deckcount.me{display:none}   /* 내 덱 수는 트래커 헤더가 표시 */
/* 비밀 표시기 */
.secrets{position:absolute;z-index:32;display:flex;gap:3px;pointer-events:none;left:calc((100% - var(--tw,0) + var(--lw,0))/2);transform:translateX(-50%)}
.secrets.opp{top:13cqmin} .secrets.me{bottom:13cqmin}
.secrets .sec{font-size:17px;filter:drop-shadow(0 0 4px #f6c34d);animation:secpulse 1.5s infinite}
@keyframes secpulse{50%{filter:drop-shadow(0 0 10px #f6c34d)}}
.power.firing{box-shadow:0 0 0 4px var(--gold),0 0 26px var(--gold)!important}
.unit.in-hand.secret .body{background:linear-gradient(160deg,#7a5ab0,#3a2660)}

/* 멀리건(시작 패 교체) */
.mulligan{position:absolute;inset:0;background:rgba(0,0,0,.84);backdrop-filter:blur(5px);display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;z-index:960;padding:16px}
.mulligan.show{display:flex}
.mTitle{color:var(--gold);font-size:clamp(15px,3.2cqmin,23px);font-weight:800;text-shadow:0 2px 6px #000;text-align:center}
.mCards{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;max-width:96vw}
.mCard{position:relative;width:min(26vw,150px);cursor:pointer;transition:transform .12s}
.mCard:active{transform:scale(.97)}
.mCard .iCard{width:100%;max-width:none;animation:none;box-shadow:0 8px 24px rgba(0,0,0,.6),inset 0 0 0 2px rgba(255,255,255,.2)}
.mCard .iStats{bottom:auto}
.mCard .mMark{position:absolute;top:6px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.75);color:#ff7a7a;border:1px solid #ff7a7a;border-radius:8px;padding:2px 9px;font-size:12px;font-weight:800;opacity:0;transition:opacity .12s;z-index:6}
.mCard.on .mMark{opacity:1}
.mCard.on .iCard{filter:grayscale(.55) brightness(.55);outline:3px solid #ff7a7a;outline-offset:-1px;border-radius:16px}
#mGo{width:min(60vw,240px)}
.banner{left:calc((100% - var(--tw,0) + var(--lw,0))/2)}
#targetHint{left:calc((100% - var(--tw,0) + var(--lw,0))/2)}

/* ===== 원소 배지 + 상태 글로우 ===== */
.unit .elem{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.62);border:2px solid rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;font-size:13px;z-index:5;box-shadow:0 1px 3px rgba(0,0,0,.6)}
.unit.on-board .elem{top:-6px;right:-6px;width:21px;height:21px;font-size:12px}
.unit.burning .body{box-shadow:0 0 0 2px #ff6a2e,0 0 14px rgba(255,106,46,.75),0 3px 7px rgba(0,0,0,.5);animation:burnpulse 1s infinite}
@keyframes burnpulse{50%{box-shadow:0 0 0 3px #ff9a5e,0 0 22px rgba(255,150,70,.95),0 3px 7px rgba(0,0,0,.5)}}
.unit.shocked .body{box-shadow:0 0 0 2px #f2d23a,0 0 14px rgba(242,210,58,.7),0 3px 7px rgba(0,0,0,.5)}

/* ===== 원소 구성 + 시너지 패널 (우측) ===== */
.synbar{position:absolute;display:flex;flex-direction:row;gap:5px;z-index:18;align-items:center;pointer-events:none;white-space:nowrap}
.synbar:empty{display:none}
.synbar.opp{top:4.5cqmin;left:calc(50% + 10.5cqmin)}   /* 적 영웅 오른쪽 옆 */
.synbar.me{bottom:4.5cqmin;left:calc(50% + 10.5cqmin)}   /* 내 영웅 오른쪽 옆 */
.syg{display:inline-flex;align-items:center;gap:4px;background:rgba(10,14,22,.82);border:1px solid #2e3645;border-radius:11px;padding:2px 8px;font-size:14px;line-height:1.1;color:#dfe6f0;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.syg.on{border-color:#f6c34d;background:rgba(60,46,12,.85);box-shadow:0 0 9px rgba(246,195,77,.55)}
.syg i{font-style:normal;font-weight:800;font-size:11px;color:#ffd45e}
@media(max-width:560px){.synbar{left:calc(50% + 9cqmin)} .syg{font-size:11px;padding:1px 6px}}
/* ===== 상성 색상 하이라이트 (내 미니언 선택 시 적에게) ===== */
.unit.on-board.adv-strong .body{box-shadow:0 0 0 2px #5be08a,0 0 14px rgba(91,224,138,.75)}
.unit.on-board.adv-strong::after{content:'▲강함';position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:800;color:#9af7b8;background:rgba(8,30,16,.9);border:1px solid #3aa86a;border-radius:6px;padding:0 5px;z-index:7;white-space:nowrap}
.unit.on-board.adv-weak .body{box-shadow:0 0 0 2px #e0685b,0 0 12px rgba(224,104,91,.6)}
.unit.on-board.adv-weak::after{content:'▼약함';position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:800;color:#ffb0a6;background:rgba(34,10,8,.9);border:1px solid #c84a4a;border-radius:6px;padding:0 5px;z-index:7;white-space:nowrap}
/* 드래그 재배치 */
.unit.on-board.ready,.unit.on-board.movable{cursor:grab}
.unit.dragging{cursor:grabbing}
.unit.dragging .body{box-shadow:0 10px 26px rgba(0,0,0,.7),0 0 0 2px #5bd6ff;filter:brightness(1.12)}
/* 패가 영웅 위로 보이게 (영웅은 클릭 통과) */
#play{pointer-events:none;z-index:12}
#play .unit{pointer-events:auto}
.hero{z-index:6}
/* 손패 마우스오버 = 살짝 튀어나오며 확대(하스식). transform은 JS가 적용, 여긴 부드럽게+그림자 */
.unit.in-hand.hovering{z-index:999!important;transform-origin:bottom center;transition:transform .12s ease-out}
.unit.in-hand.hovering .body{box-shadow:0 14px 34px rgba(0,0,0,.7),0 0 0 2px #ffd45e}
/* 상대 패 카운트 크고 잘 보이게 */
.handcount.opp{top:2cqmin;right:auto;left:calc((100% - var(--tw,0px) + var(--lw,0px))/2 + 9cqmin);font-size:17px;padding:4px 12px;background:rgba(20,10,8,.82);border-color:#e0a040;color:#ffe08a;z-index:33}
/* 버프(위)/디버프(아래) 아이콘 행 — WoW 애드온식 */
/* 버프=위에서 아래로 / 디버프=아래에서 위로, 한 줄 4~5개 wrap 다단 스택 */
/* 버프=카드 위(밖), 디버프=카드 아래(밖) — 카드 따라다님 */
.unit .kw.bufrow{position:absolute;bottom:calc(100% + 1px);top:auto;left:0;right:0;display:flex;flex-wrap:wrap-reverse;justify-content:center;align-content:flex-end;gap:1px;z-index:9;pointer-events:none}
.unit .deb{position:absolute;top:calc(100% + 1px);bottom:auto;left:0;right:0;display:flex;flex-wrap:wrap;justify-content:center;align-content:flex-start;gap:1px;z-index:9;pointer-events:none}
.unit .bchip,.unit .dchip{display:inline-flex;align-items:center;justify-content:center;font-size:11px;line-height:1;border-radius:6px;padding:1px 3px;background:rgba(8,12,20,.8);text-shadow:0 1px 1px #000}
.unit .bchip{border:1px solid rgba(120,225,150,.55)}
.unit .dchip{border:1px solid rgba(235,120,110,.6);color:#ffe6e2}
.unit.in-hand .bchip,.unit.in-hand .dchip{font-size:12px}
.unit.in-hand .deb,.unit.in-hand .kw{display:none}

/* ===== 드래프트 그리드 (색 그리드서 매턴 N장 픽) ===== */
.draftov{position:fixed;inset:0;z-index:300;display:none;flex-direction:column;align-items:center;justify-content:center;background:rgba(6,9,14,.84);backdrop-filter:blur(3px);padding:16px}
.draftov.show{display:flex}
.draftHdr{color:#e8edf4;font-size:clamp(15px,3.4vw,21px);font-weight:800;margin-bottom:16px;text-align:center}
.draftHdr b{color:#ffd45e}
.draftHdr .dsub{display:block;font-size:12px;color:#9aa6b8;font-weight:400;margin-top:4px}
.draftGrid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:92vw}
.dcard{width:clamp(76px,12.5vw,108px);height:clamp(108px,18vw,154px);border-radius:11px;cursor:pointer;position:relative;
  background:linear-gradient(160deg,var(--c1),var(--c2));border:2px solid rgba(0,0,0,.5);box-shadow:0 5px 14px rgba(0,0,0,.5);
  transition:transform .12s,box-shadow .12s;display:flex;align-items:center;justify-content:center;overflow:hidden}
.dcard:hover{transform:translateY(-7px) scale(1.04);box-shadow:0 11px 24px rgba(0,0,0,.6)}
.dcard .delem.big{font-size:clamp(38px,7.5vw,58px);filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.dcard .dq{position:absolute;bottom:7px;right:10px;font-size:24px;font-weight:800;color:rgba(255,255,255,.5)}
.dcard.dadv-strong{border-color:#5be08a;box-shadow:0 0 0 2px #5be08a,0 6px 16px rgba(91,224,138,.42)}
.dcard.dadv-strong::after{content:'▲강함';position:absolute;top:5px;left:5px;font-size:10px;font-weight:800;color:#063;background:rgba(180,255,200,.94);border-radius:5px;padding:0 4px;z-index:3}
.dcard.dadv-weak{border-color:#e0685b;box-shadow:0 0 0 2px #e0685b,0 6px 16px rgba(224,104,91,.38)}
.dcard.dadv-weak::after{content:'▼약함';position:absolute;top:5px;left:5px;font-size:10px;font-weight:800;color:#500;background:rgba(255,190,180,.94);border-radius:5px;padding:0 4px;z-index:3}
/* face-up "운명의 1장" = 미니 풀카드(아트 상단·이름·텍스트·스탯) */
.dcard.faceup .delem{position:absolute;top:4px;left:4px;right:4px;height:40%;display:flex;align-items:center;justify-content:center;z-index:1}
.dcard.faceup .delem .demoji{font-size:30px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.dcard.faceup .dcardart{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:7px}
.dcard.faceup .dnm{position:absolute;top:40%;left:0;right:0;text-align:center;font-size:10px;font-weight:800;color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000;padding:0 3px;line-height:1.05;z-index:2}
.dcard.faceup .dtext{position:absolute;top:54%;left:6%;right:6%;bottom:21%;background:rgba(245,236,205,.92);border-radius:5px;font-size:8.5px;color:#241a10;font-weight:600;display:flex;align-items:center;justify-content:center;text-align:center;padding:3px;overflow:hidden;line-height:1.18}
.dcard.faceup .dst{position:absolute;bottom:13px;left:0;right:0;display:flex;justify-content:space-between;padding:0 8px}
.dcard.faceup .da,.dcard.faceup .dh{font-weight:800;font-size:16px;text-shadow:0 1px 2px #000}
.dcard.faceup .da{color:#ffd86a} .dcard.faceup .dh{color:#ff8a7a}
.dcard.faceup .dfate{position:absolute;bottom:1px;left:50%;transform:translateX(-50%);font-size:9px;color:#ffd45e;font-weight:800}
.dcard .dpick2{position:absolute;bottom:6px;left:6px;font-size:11px;font-weight:800;color:#ffd45e;background:rgba(40,28,8,.92);border:1px solid #c89020;border-radius:5px;padding:0 5px;z-index:4}
.dcard.dunaff{opacity:.38;filter:grayscale(.55)}
.dcard.dunaff:hover{transform:none;box-shadow:0 5px 14px rgba(0,0,0,.5)}
.draftSkip{display:block;margin:14px auto 0;background:linear-gradient(180deg,#3a4a2e,#26331c);border:1px solid #5a7a3a;color:#cdeab0;font-weight:800;font-size:14px;padding:8px 20px;border-radius:10px;cursor:pointer}
.draftSkip:hover{filter:brightness(1.18)}
/* 직업 선택 버튼 — 한 줄 설명 */
.cls{display:inline-flex;flex-direction:column;align-items:center;line-height:1.15}
.cls small{font-size:11px;font-weight:400;color:#9aa6b8;margin-top:2px}
.cls.on small{color:#ffe6c0}
/* === 데미지 미리보기 + 버프 분해 (투명성) === */
.unit .dmgpv{position:absolute;top:-15px;left:50%;transform:translateX(-50%);font-size:15px;font-weight:800;color:#fff;background:rgba(20,10,8,.92);border:2px solid #999;border-radius:9px;padding:0 8px;z-index:30;white-space:nowrap;display:none;text-shadow:0 1px 2px #000}
.unit .dmgpv.show{display:block}
.unit .dmgpv.st{border-color:#5be08a;color:#bfffb0}
.unit .dmgpv.wk{border-color:#5aa0ff;color:#bcd8ff}
.unit .dmgpv.imm{border-color:#aaa;color:#ddd}
#atkTip{position:fixed;transform:translate(-50%,-100%);background:rgba(15,12,20,.97);border:1px solid #c89020;border-radius:10px;padding:6px 11px;z-index:9000;pointer-events:none;display:none;box-shadow:0 6px 20px rgba(0,0,0,.6);text-align:center}
#atkTip.show{display:block}
#atkTip .tipMain{font-size:15px;font-weight:700;color:#f3ead4;white-space:nowrap}
#atkTip .tipMain b{color:#ffd45e;font-size:18px}
#atkTip .tipSub{font-size:12px;color:#bcd;margin-top:2px;white-space:nowrap}
#atkTip .st{color:#5be08a}#atkTip .wk{color:#7ab8ff}#atkTip .imm{color:#bbb}
/* 버프/디버프 칩 — 숫자 텍스트 들어가도 보이게 */
.unit .bchip,.unit .dchip{font-size:9px;font-weight:800;border-radius:5px;padding:0 2px;line-height:1.35;white-space:nowrap;max-width:100%;overflow:hidden}
.unit .bchip{color:#cfffc0;background:rgba(20,60,20,.7);border:1px solid rgba(91,224,138,.45)}
.unit .dchip{color:#ffcabb;background:rgba(60,20,16,.7);border:1px solid rgba(224,104,91,.5)}
/* 영웅 초상화 (원형, 이모지 폴백) */
.hero .art .heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;z-index:1}
.hero .art .hemo{position:relative;z-index:0}
/* 메뉴 직업 버튼 초상화 */
.cls .clsimg{width:44px;height:44px;border-radius:50%;object-fit:cover;margin-bottom:3px;border:1.5px solid rgba(255,255,255,.35);box-shadow:0 2px 6px rgba(0,0,0,.5)}
/* 드래프트 선택(텐타티브) — 살짝 올라오고 다시 누르면 취소 */
.dcard.chosen{transform:translateY(-13px) scale(1.05)!important;border-color:#5be08a;box-shadow:0 13px 28px rgba(0,0,0,.6),0 0 0 3px #5be08a}
.dcard.chosen::before{content:'✓';position:absolute;top:3px;right:6px;font-size:17px;font-weight:800;color:#5be08a;z-index:6;text-shadow:0 1px 3px #000}
/* 드래프트 면면 카드 가운데 원소 이름(물/불/대지/무) */
.dcard .delem.big{position:absolute;top:30%;left:0;right:0;text-align:center}
.dcard .delemnm{position:absolute;top:56%;left:0;right:0;text-align:center;font-size:clamp(14px,2.6vw,18px);font-weight:800;color:#fff;text-shadow:0 2px 4px #000,0 0 7px #000,0 0 3px #000;z-index:3;letter-spacing:1px}
/* === 보드 겹침 수정 (감사 P2-P4): 보드 미니언만 배지/칩 안쪽으로, 손패는 그대로 === */
.unit.on-board .st{bottom:-3px;width:24px;height:24px;font-size:13px}
.unit.on-board .atk{left:-2px}
.unit.on-board .hp{right:-2px}
.unit.on-board .elem{top:-3px;right:-3px;width:20px;height:20px;font-size:11px}
.unit.on-board .kw.bufrow,.unit.on-board .deb{left:2px;right:2px}
/* === 버프칩 공격(주황)/체력(초록) 색 구분 + 사이 갭 (붙어있어 안 보이던 것) === */
.bchip.ba{background:linear-gradient(180deg,#f08a3a,#c85a1e);color:#fff;border-color:rgba(255,210,150,.7)}
.bchip.bh{background:linear-gradient(180deg,#46c85e,#1e8a3e);color:#fff;border-color:rgba(180,255,190,.7)}
.bgap{display:inline-block;width:11px;flex:0 0 11px}
/* === 인스펙트(카드 길게눌러 확대) = 글자 전부 보이게 (카드 높이 자동) === */
#inspect .iCard{aspect-ratio:auto;height:auto;min-height:min(96vw,376px);max-height:88vh;padding:16px 14px}
#inspect .iText{flex:0 0 auto;overflow:visible;font-size:clamp(13px,3.6vw,16px);line-height:1.45;align-items:flex-start}
#inspect .iArt{flex:0 0 auto}
/* 시너지바 = 내/적 라벨 + 원소×개수 +보너스 (해설 명확) */
.synwho{font-size:10px;font-weight:800;opacity:.9;margin-right:4px;white-space:nowrap}
.syg i{font-style:normal;font-weight:700}
/* === 정적 카드(.iCard: 멀리건/인스펙트) = 인게임 카드 모습으로 통일 === */
.iCard{padding:13px 12px 16px}
.iCost{top:-7px;left:-7px;width:auto;min-width:30px;height:30px;border-radius:15px;padding:0 8px;border:2.5px solid #fff;font-size:17px;background-image:none}
.iElem{position:absolute;top:-7px;right:-7px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.66);border:2px solid rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;font-size:16px;z-index:6}
.iArt{width:100%;height:50%;aspect-ratio:auto;margin:0 0 3px;border-radius:10px;overflow:hidden;flex:0 0 auto}
.iName{font-size:clamp(16px,5vw,22px);margin:1px 0 2px}
.iText{flex:1 1 auto;background:rgba(245,236,205,.95);color:#241a10;border-radius:9px;padding:9px;font-size:clamp(12.5px,3.5vw,15px);line-height:1.4;flex-direction:column;text-align:center}
.ikwline{color:#8a3a10;font-weight:800;font-size:.9em}
.isp{color:#caa6ff;font-weight:800;font-size:.95em}
/* 버프 출처 호버 강조: 그 카드가 버프 준 미니언 = 초록 글로우 (이 카드가 뭘 했는지 보이게) */
.unit.buffsrc-hl .body{box-shadow:0 0 0 3px #5be08a, 0 0 16px rgba(91,224,138,.9), 0 4px 9px rgba(0,0,0,.5) !important}
.unit.buffsrc-src .body{box-shadow:0 0 0 3px #b6ff96, 0 0 18px rgba(140,255,150,.95), 0 4px 9px rgba(0,0,0,.5) !important}
/* 드래그 중 도발/빙결 = 빨간 벽(여기 너머로 못 감) */
.unit.dragwall .body{box-shadow:0 0 0 3px #ff6a4a, 0 0 18px rgba(255,90,74,.9), 0 4px 9px rgba(0,0,0,.5) !important}
/* 키워드/원소 용어집 (좌측 하단) */
#glossary{position:absolute;left:5px;top:5px;width:152px;z-index:47;background:rgba(14,17,26,.95);border:1px solid #2e3645;border-radius:9px;overflow:hidden;box-shadow:0 3px 12px rgba(0,0,0,.5)}
.gloHdr{padding:5px 9px;font-weight:800;cursor:pointer;background:rgba(44,50,66,.9);color:#ffd45e;user-select:none;font-size:12px;display:flex;justify-content:space-between;align-items:center}
#glossary.collapsed .gloX{transform:rotate(-90deg)}
#gloBody{padding:5px 9px 9px;max-height:52vh;overflow-y:auto;font-size:11px}
#glossary.collapsed #gloBody{display:none}
.gloSec{font-weight:800;color:#7fd0ff;margin:7px 0 2px;font-size:10.5px;border-bottom:1px solid #2a3240;padding-bottom:1px}
.gloSec:first-child{margin-top:0}
.gloRow{color:#cdd6e2;line-height:1.5;margin:1px 0}
.gloRow b{color:#fff;display:inline-block;min-width:30px}
@media(max-width:560px){#glossary{width:132px;bottom:22%;left:3px}#gloBody{font-size:9.5px;padding:4px 6px 6px}.gloHdr{font-size:10px;padding:4px 6px}}
/* 드래프트 = 제안 1장 + 미스터리 1장 (2장 레이아웃) */
.draftGrid{gap:22px}
.dcard.mystery{opacity:.95}
.dcard .dfate.swap{color:#9ad0ff}
/* 전투 로그 줄(좌측 기록) */
.logRow{font-size:10px;line-height:1.4;padding:1px 7px;color:#c4ccd8;border-left:2px solid #3a4250;margin:1px 0;white-space:normal;word-break:keep-all}
.logRow.me{border-left-color:#5be08a}
.logRow.opp{border-left-color:#e0653a}
.logRow b{color:#fff;font-weight:800}
/* === 스탯 색 고정: 공격=빨강 / 체력=초록 (피해받아도 유지) === */
.unit .atk{background:radial-gradient(circle at 32% 30%,#ff8a6a,#d22818)!important;color:#fff}
.unit .hp{background:radial-gradient(circle at 32% 30%,#7be88a,#1e9a3e)!important;color:#fff}
.unit .atk.boosted,.unit .hp.boosted{outline:2px solid #ffd24a;outline-offset:-1px}
.unit .hp.hurt{outline:2px solid #ff5a4a;outline-offset:-1px}
/* === 버프를 스탯 옆으로: 공격버프(빨강)=공격쪽 위로, 체력버프(초록)=체력쪽 위로 쌓임 === */
.unit .atkbuffs{position:absolute;bottom:20px;left:-8px;display:flex;flex-direction:column-reverse;gap:1px;z-index:8;align-items:flex-start;pointer-events:none}
.unit .hpbuffs{position:absolute;bottom:20px;right:-8px;display:flex;flex-direction:column-reverse;gap:1px;z-index:8;align-items:flex-end;pointer-events:none}
.abf{background:linear-gradient(180deg,#ff7a5e,#c8301a);color:#fff;font-size:10.5px;font-weight:800;border-radius:6px;padding:0 4px;border:1px solid rgba(255,210,190,.55);white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.5);line-height:1.5}
.hbf{background:linear-gradient(180deg,#52d06a,#1e8a3e);color:#fff;font-size:10.5px;font-weight:800;border-radius:6px;padding:0 4px;border:1px solid rgba(190,255,200,.55);white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.5);line-height:1.5}
.unit.in-hand .atkbuffs,.unit.in-hand .hpbuffs{display:none}
/* 스탯 스택 원본값 칩(스택 맨 아래, 배지 바로 위) — 원본+버프=최종 보이게 */
.sbase{background:rgba(18,18,26,.9);color:#fff;font-size:9.5px;font-weight:800;border-radius:6px;padding:0 5px;border:1px solid rgba(255,255,255,.5);white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.5);line-height:1.5}