: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:5vmin;text-align:center}
#menu h1{font-size:clamp(40px,11vmin,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.4vmin,18px);margin:.3em 0 1.4em}
#classPick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(92vw,420px);margin-bottom:1.4em}
#classPick .cls{background:#3a2418;color:var(--text);border:1px solid #6e4a2c;border-radius:9px;padding:.7em .3em;font:600 clamp(11px,2.2vmin,14px)/1.1 inherit;cursor:pointer;transition:transform .1s,filter .1s}
#classPick .cls.on{background:linear-gradient(180deg,#f6c34d,#c89020);color:var(--dark);border-color:#c89020;box-shadow:0 0 0 2px rgba(246,195,77,.5)}
#classPick .cls:active{transform:scale(.95)}
.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.8vmin,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:2vmin;right:2vmin;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.5vmin;right:2.5vmin;color:#6a5440;font-size:11px}
#rules h2,#credits h2{color:var(--gold);margin-bottom:.7em;font-size:clamp(20px,4vmin,30px)}
.rules-list{max-width:560px;line-height:1.9;font-size:clamp(13px,2.3vmin,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.3vmin,16px)}

/* ===== 보드 ===== */
#match{position:relative}
#stage{position:absolute;inset:0;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:-7px;left:-7px;width:24px;height:24px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#9ad0ff,#2080dd);color:#fff;border:2px solid #fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;z-index:3;
  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(205,238,255,.4),rgba(150,205,250,.22) 60%,rgba(200,235,255,.38));
  box-shadow:inset 0 0 16px rgba(225,248,255,.95), inset 0 0 0 2px rgba(255,255,255,.55), 0 0 10px rgba(150,210,255,.6)}
.unit .frost::after{content:'❄';position:absolute;top:3px;right:4px;font-size:13px;color:rgba(255,255,255,.85);text-shadow:0 0 4px #aef}
/* 천상의 보호막 = 유리 느낌의 황금 보호막 */
.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:4%;left:0;right:0;height:31%;font-size:calc(var(--c-w)*0.44)}
.unit.in-hand .nm{top:34%;font-size:calc(var(--c-w)*0.15);background:linear-gradient(180deg,transparent,rgba(20,12,6,.55) 35%,rgba(20,12,6,.55) 65%,transparent);padding:1px 0}
.unit.in-hand .ctext{position:absolute;left:5%;right:5%;top:46%;bottom:11%;z-index:3;display:flex;align-items:center;justify-content:center;text-align:center;font-size:calc(var(--c-w)*0.125);line-height:1.18;color:#241a10;font-weight:600;background:rgba(245,236,205,.85);border-radius:5px;padding:3px;overflow:hidden}
.unit.on-board .ctext{display:none}

/* 보드 미니언 형태 */
.unit.on-board{width:var(--m-w);height:var(--m-h)}
.unit.on-board .body{border-radius:14px/16px}
.unit.on-board .gem{display:none}
.unit.on-board .nm{display:none}
.unit.on-board .art{font-size:calc(var(--m-w)*0.66)}
.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,.1) 0 5px,transparent 5px 10px),
  repeating-linear-gradient(-45deg,rgba(255,255,255,.1) 0 5px,transparent 5px 10px),#7a2e2e;
  border:2px solid #c89020;box-shadow:0 2px 5px rgba(0,0,0,.5),inset 0 0 0 3px rgba(0,0,0,.2)}
.unit.back .art,.unit.back .gem,.unit.back .nm,.unit.back .st,.unit.back .kw{display:none}

/* 타격감 키프레임 */
@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,0) + var(--lw,0))/2);transform:translateX(-50%);width:15vmin;height:15vmin;min-width:84px;min-height:84px;max-width:130px;max-height:130px;
  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:1vmin} .hero.me{bottom:1vmin}
.hero .art{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:7vmin}
.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:2vmin;left:2vmin} .mana.me{bottom:2vmin;left:2vmin}
.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:11vmin;height:11vmin;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.5vmin;right:auto;left:calc((100% - var(--tw,0) + var(--lw,0))/2 + 13vmin)} .power.me{bottom:2.5vmin;right:14vmin}
.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:11vmin;height:11vmin;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:2vmin;right:14vmin} .deckcount.me{bottom:2vmin;right:2vmin}

.endturn{position:absolute;right:2vmin;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,8vmin,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:14vmin;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:1vmin;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:2vmin;bottom:11vmin;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:8vmin}
.ovtext{font-size:clamp(44px,14vmin,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,7vmin,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,4vmin,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{
  border-radius:16px 16px 48% 48% / 14px 14px 40% 40%;     /* 방패형(아래가 뾰족) */
  box-shadow:0 0 0 3px #e0b850, 0 0 0 6px #6a4a1a, inset 0 0 0 2px rgba(255,238,180,.5), 0 0 12px rgba(224,184,80,.5), 0 4px 9px rgba(0,0,0,.6);
}
.unit.on-board.taunt::before{ content:'🛡'; position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  font-size:calc(var(--m-w)*0.5); filter:drop-shadow(0 1px 3px #000); z-index:4; pointer-events:none }
.unit.on-board.taunt::after{ content:''; position:absolute; left:-3px; right:-3px; bottom:18%; height:8px; z-index:3; pointer-events:none;
  background:repeating-linear-gradient(90deg,#6a4a28 0 6px,#3a2814 6px 9px); border-radius:2px; box-shadow:0 1px 2px rgba(0,0,0,.6) }  /* 나무 바리케이드 띠 */

/* ===== 하스스톤식 조준 화살표 ===== */
#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{font-size:70px;margin-top:2px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
.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:auto}
.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{font-size:19px}.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:2vmin;right:24vmin}

/* ===== 인스펙트 "내기" 버튼 ===== */
.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:2vmin;bottom:2vmin;top:auto;transform:none}
.endturn:active{transform:scale(.95)}
.power.me{bottom:2.5vmin;right:auto;left:calc((100% - var(--tw,0) + var(--lw,0))/2 + 13vmin)}   /* 영능=영웅 오른쪽 */
.weaponslot.me{bottom:2.5vmin;left:calc((100% - var(--tw,0) + var(--lw,0))/2 - 13vmin)}            /* 무기=영웅 왼쪽 */
.weaponslot.opp{top:2.5vmin;left:calc((100% - var(--tw,0) + var(--lw,0))/2 - 13vmin)}
.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:13vmin} .secrets.me{bottom:13vmin}
.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.2vmin,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)}