/* 政壇大亂鬥 V0.5.8｜手遊式對戰版面（參考圖：頂部羈絆＋回合招牌、左側招式大卡、底部常駐商店）
 * 純呈現層：沿用原本所有 id、按鈕與拖曳／戰鬥邏輯；棋盤 SVG 與後方斜視角透視完全不變。
 * 版面：全幅戰場（場景鋪滿頂部到備戰席）→ 備戰席 → 底部商店列
 *       底部列 = 左：等級／金幣／鎖定刷新　中：五張商店卡　右：自動補位＋開戰
 */
:root{
  --a-top:clamp(36px,9.5vh,66px);
  --a-bench:clamp(40px,11.5vh,96px);
  --a-tray:clamp(88px,23vh,252px);
  --a-econ:clamp(148px,18vw,300px);
  --a-fight:clamp(96px,12.5vw,210px);
  --a-ink:#0d1320;
  --a-gold:#ffd46e;
  --a-panel:#0b1220d9;
  --a-line:#31405a;
  --cost1:#a7b0bd;--cost2:#4fd18b;--cost3:#4aa3ff;--cost4:#c77dff;--cost5:#ffc94a;
  --safe-l:max(6px,env(safe-area-inset-left));
  --safe-r:max(6px,env(safe-area-inset-right));
}
html,body{height:100%;overflow:hidden}
body{background:#0c111c}
.app{
  position:relative;box-sizing:border-box;display:grid;
  width:100%;max-width:none;height:100dvh;min-height:0;margin:0;padding:0;
  grid-template-columns:var(--a-econ) minmax(0,1fr) var(--a-fight);
  grid-template-rows:var(--a-top) minmax(0,1fr) var(--a-bench)
    calc(var(--a-tray)*.34) calc(var(--a-tray)*.25) calc(var(--a-tray)*.41);
  gap:0;background:none;
}
/* 原本的外框容器改由各自內容直接排進畫面格線 */
.battle-area,.battle-toolbar,.deck-section,.section-title{display:contents}
.battle-area:before,.deck-section:before{display:none}
.section-title>div,#fieldMessage,.battle-area .ai-league,.battle-area .legend,
#shopQuickBtn,#shopReopenBtn,.bench-heading,#shopToggle,#buyXpBtn,
.topbar>div:first-child{display:none!important}

/* ===== 戰場：場景鋪滿頂部到備戰席，棋盤夾在頂部列與備戰席之間 ===== */
.board-wrap{
  grid-area:1/1/4/4;position:relative;min-height:0;min-width:0;z-index:1;height:auto;
  border-radius:0;overflow:hidden;
  background:
    radial-gradient(ellipse 62% 58% at 50% 56%,#5b7a6e 0%,#344c4d 45%,#17222d 100%);
}
.board-wrap:after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(#0a0f1acc,#0a0f1a00 calc(var(--a-top) + 30px)),
    linear-gradient(0deg,#0a0f1aee,#0a0f1a00 calc(var(--a-bench) + 40px)),
    radial-gradient(ellipse 75% 80% at 50% 55%,transparent 55%,#05080fb0 100%);
}
.arena-scenery{opacity:.5;object-position:center 30%;mix-blend-mode:normal;filter:saturate(.8) brightness(.9);z-index:0}
.board-scroller{
  position:absolute!important;left:0;right:0;top:var(--a-top);bottom:var(--a-bench);height:auto!important;
  overflow:hidden;background:none;display:flex;align-items:center;justify-content:center;z-index:2;
}
#board{width:100%;height:100%;max-width:100%;filter:drop-shadow(0 10px 14px #03060c99)}
#board .hex{stroke:#16201fcc;stroke-width:2.2;fill:#b9b3a046}
#board .hex.enemy{fill:#c4a79a3a;stroke:#2a1a1ccc}
#board .hex.ally{fill:#9fd2bb40;stroke:#163631d9}
#board .hex.valid{stroke:#ffe68a;stroke-width:3.2;fill:#8ee0bb66}
#board .unit{filter:drop-shadow(0 3px 2px #050a12aa)}
#board .unit-shadow{fill:#04080eb0}
#board .unit.ally .unit-ring{fill:none;stroke:#7ff0bd;stroke-width:3}
#board .unit.foe .unit-ring{fill:none;stroke:#ff7f7f;stroke-width:3}
#board .unit-ribbon{fill:#0b1220e8}
#board .unit .mark{font-size:13px;fill:#ffd94f;stroke:#1a1520;stroke-width:3px;paint-order:stroke}
#board .unit .hp-track{fill:#0b111c;stroke:#000;stroke-width:1}
#board .unit .hp{fill:#5ff08f}
#board .unit .hp.foe{fill:#ff5d5d}
#board .unit-selected{fill:none;stroke:#ffe27a;stroke-width:3.5;filter:drop-shadow(0 0 6px #ffd66b)}
#board .unit.legendary .legend-label{font-size:11px;text-anchor:middle}
#board .unit.hit .unit-body{fill:#7d2f2f}
body.arena-zoom #board{width:1080px!important;height:614px!important;min-width:1080px!important;min-height:614px!important}
body.arena-zoom .board-scroller{overflow:auto;justify-content:flex-start;align-items:flex-start}
#boardZoomToggle{
  grid-area:2/3/3/4;justify-self:end;align-self:end;z-index:6;margin:0 var(--safe-r) 6px 0;
  border-radius:999px;font-size:clamp(9px,1.2vh + .2vw,12px);min-height:26px;padding:2px 9px;
}
/* 提示訊息：棋盤下緣置中的氣泡 */
.battle-toolbar .message{
  grid-area:2/2/3/3;justify-self:center;align-self:end;z-index:7;pointer-events:none;
  max-width:min(92%,560px);margin-bottom:4px;padding:3px 12px;flex:none;
  font-size:clamp(9px,1.5vh + .2vw,13px);font-weight:800;text-align:center;
  color:#fff6df;background:#0b1220c9;border:1px solid #e9d4ad66;border-radius:999px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:none;
}
.battle-toolbar .message:empty{display:none}

/* ===== 頂部：回合招牌（置中，往下垂掛） ===== */
.hud{
  grid-area:1/1/2/4;justify-self:center;align-self:start;z-index:12;pointer-events:none;
  display:grid;grid-template-columns:auto auto auto;align-items:center;gap:0 clamp(6px,1.2vw,18px);
  min-height:calc(var(--a-top) + 8px);padding:0 clamp(16px,2.4vw,34px) 3px;margin:0;
  background:linear-gradient(#1a2440f5,#0e1528f2);
  clip-path:polygon(0 0,100% 0,95% 100%,5% 100%);
  filter:drop-shadow(0 3px 0 #05080f);
}
.hud:before{ /* 招牌下緣金線 */
  content:"";position:absolute;left:5%;right:5%;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#e3b85c,transparent);
}
.hud .stat{
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:3px;
  min-width:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;line-height:1.05;
}
.hud .stat span{font-size:clamp(9px,1.3vh + .25vw,15px);font-weight:900;color:#f4e6c8}
.hud .stat strong{font-size:clamp(11px,1.9vh + .3vw,20px);font-weight:1000;color:#fff}
/* 左：第 N 回合 */
.hud .stat.round{grid-column:1;grid-row:1/3;padding:2px 10px;border-radius:999px;background:#ffffff12;border:1px solid #ffffff22}
.hud .stat.round strong{color:var(--a-gold)}
/* 中：狀態＋大倒數 */
.hud .stat.status{grid-column:2;grid-row:1/3;flex-direction:column;gap:0;background:none;min-width:clamp(70px,10vw,140px)}
.hud .stat.status span{display:none}
.hud .stat.status strong{font-size:clamp(10px,1.7vh + .3vw,19px);color:#fff3d6;letter-spacing:.06em;white-space:nowrap}
body[data-phase="battle"] .hud .stat.status strong:before{content:"⚔ "}
body[data-phase="battle"] .hud .stat.status strong:after{content:" ⚔"}
.arena-clock{
  display:block;font-size:clamp(18px,4.6vh + .3vw,46px);font-weight:1000;line-height:1;color:var(--a-gold);
  text-shadow:0 2px 0 #6b4a10,0 0 10px #ffcf6a66;font-variant-numeric:tabular-nums;
}
.arena-clock[hidden]{display:none}
/* 右：生命、人口 */
.hud .stat.life,.hud .stat.pop{display:flex;grid-column:3}
.hud .stat.life{grid-row:1}.hud .stat.pop{grid-row:2}
.hud .stat.life span,.hud .stat.pop span{font-size:0}
.hud .stat.life span:before{content:"❤️";font-size:clamp(9px,1.4vh + .2vw,14px)}
.hud .stat.pop span:before{content:"👥";font-size:clamp(9px,1.4vh + .2vw,14px)}
.hud .stat.life strong,.hud .stat.pop strong{font-size:clamp(9px,1.5vh + .2vw,15px);white-space:nowrap}

/* ===== 頂部左右：羈絆圖示條 ===== */
.trait-strip{
  grid-area:1/1/2/4;align-self:start;z-index:11;display:flex;gap:clamp(2px,.5vw,8px);
  padding-top:clamp(2px,.6vh,6px);min-width:0;overflow:hidden;
  max-width:calc(50vw - clamp(115px,15vw,230px));
}
.trait-strip.ally{justify-self:start;margin-left:var(--safe-l);cursor:pointer;border-radius:8px}
.trait-strip.ally:focus-visible{outline:2px solid #ffe27a}
.trait-strip.foe{justify-self:end;margin-right:calc(var(--safe-r) + clamp(30px,7vh,44px) + 6px);flex-direction:row-reverse;pointer-events:none}
.trait-chip{display:flex;flex-direction:column;align-items:center;gap:1px;flex:none}
.trait-chip i{
  --hex:clamp(20px,5.4vh,42px);
  display:grid;place-items:center;width:var(--hex);height:calc(var(--hex)*1.08);font-style:normal;
  font-size:calc(var(--hex)*.5);line-height:1;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:#3a4458;box-shadow:inset 0 0 0 2px #0006;filter:grayscale(.85) brightness(.85);
}
.trait-chip i img{width:72%;height:72%;object-fit:contain}
.trait-chip small{font-size:clamp(8px,1.25vh + .1vw,13px);font-weight:900;color:#c7d0de;line-height:1;text-shadow:0 1px 0 #000}
.trait-chip.on i{filter:none;background:linear-gradient(#d89a55,#8a4d22)}
.trait-chip.on.lv2 i{background:linear-gradient(#e7eef8,#8d9bb2)}
.trait-chip.on.lv3 i,.trait-chip.on.max i{background:linear-gradient(#ffe48a,#c8891d)}
.trait-chip.on small{color:#fff}
.trait-empty{font-size:clamp(9px,1.4vh,12px);color:#c7d0de;padding:4px 8px;border-radius:999px;background:#0b1220aa;border:1px solid #ffffff22}
.trait-strip.foe .trait-chip.on i{background:linear-gradient(#ff8f7a,#9b2f25)}
/* 點羈絆條：展開完整羈絆說明 */
.synergy-panel{
  display:none;grid-area:2/1/4/3;justify-self:start;align-self:start;z-index:30;
  width:min(310px,46vw);max-height:100%;overflow:auto;margin:4px 0 0 var(--safe-l);
  padding:6px 5px;border-radius:12px;border:2px solid #e3b85c88;background:#0b1220f2;box-shadow:0 10px 30px #000b;
}
body.traits-open .synergy-panel{display:block}
.synergy-panel h2{font-size:clamp(10px,1.6vh,14px);margin:0 0 4px}
.synergy-row{border-radius:7px;background:#ffffff08;border-color:#ffffff1a;opacity:.62}
.synergy-row.synergy-active{order:-1;opacity:1;background:linear-gradient(110deg,#2d6a52,#1d3f37);border-color:#8ff0bf}
.synergies{display:flex}

/* ===== 右上角選單 ===== */
.topbar{
  grid-area:1/3/2/4;justify-self:end;align-self:start;z-index:40;position:relative;
  margin:clamp(2px,.6vh,6px) var(--safe-r) 0 0;padding:0;background:none;border:0;clip-path:none;box-shadow:none;
}
.menu-toggle{
  width:clamp(30px,7vh,44px);height:clamp(30px,7vh,44px);padding:0;display:grid;place-items:center;
  font-size:clamp(15px,3vh,22px);color:#fff3d6;border-radius:10px;border:2px solid var(--a-ink);
  background:linear-gradient(#2c3b5a,#1a2438);box-shadow:0 2px 0 #05080f;cursor:pointer;
}
.header-actions{
  display:none;position:absolute;top:calc(100% + 4px);right:0;flex-direction:column;gap:4px;
  padding:6px;border-radius:12px;background:#0b1220f5;border:2px solid #e3b85c88;box-shadow:0 10px 30px #000b;
}
body.menu-open .header-actions{display:flex}
body.menu-open .menu-toggle{background:linear-gradient(#ffe8a3,#e6a53b);color:#1d1710}
.header-actions button{
  min-height:34px;padding:4px 14px;font-size:13px!important;text-align:left;white-space:nowrap;
  border-radius:8px;border:2px solid var(--a-ink)!important;background:#25324a;color:#fff9e7;box-shadow:0 2px 0 #05080f;
}
.header-actions button::before{content:none!important}

/* ===== 左側：招式發動大卡（費用色卡框＋上方招式字＋左下政營徽章＋名牌） ===== */
#skillCutin{
  position:absolute;z-index:8;pointer-events:none;isolation:isolate;
  left:var(--safe-l);top:calc(var(--a-top) + 6px);bottom:calc(var(--a-bench) + 4px);
  width:auto;min-height:0;aspect-ratio:3/4;max-width:calc(var(--a-econ) + 30px);
  flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:0;
  --cf:var(--cost3);
  border:clamp(3px,.7vh,6px) solid var(--cf);border-radius:clamp(10px,2vh,18px);
  background:#121a2c;transform:none;outline:2px solid #ffe7a855;outline-offset:-7px;
  box-shadow:0 0 0 2px var(--a-ink),0 0 24px color-mix(in srgb,var(--cf) 60%,transparent),0 10px 24px #000c;
  animation:arenaCardIn .32s cubic-bezier(.2,1.4,.4,1) both;
}
#skillCutin[data-cost="1"]{--cf:var(--cost1)}#skillCutin[data-cost="2"]{--cf:var(--cost2)}
#skillCutin[data-cost="3"]{--cf:var(--cost3)}#skillCutin[data-cost="4"]{--cf:var(--cost4)}
#skillCutin[data-cost="5"]{--cf:var(--cost5)}
#skillCutin:before{ /* 背後放射光 */
  content:"";position:absolute;inset:-14%;z-index:-1;clip-path:none;border:0;box-shadow:none;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--cf) 55%,transparent) 0 8deg,transparent 8deg 20deg);
  -webkit-mask:radial-gradient(closest-side,#000 40%,transparent);mask:radial-gradient(closest-side,#000 40%,transparent);
  animation:arenaSpin 6s linear infinite;
}
#skillCutin .skill-poster{
  position:absolute;inset:3% 3% 17% 3%;width:94%;height:80%;object-fit:cover;object-position:center 20%;
  border-radius:clamp(6px,1.2vh,12px);opacity:1;transform:none;z-index:1;border:0;box-shadow:none;background:#1c283a;
}
#skillCutin #skillPortrait{position:absolute;inset:3% 3% 17% 3%;width:auto;height:auto;flex:none;border:0;border-radius:clamp(6px,1.2vh,12px);box-shadow:none;background:#26344d;z-index:0}
#skillCutin .skill-lettering{position:absolute;left:-6%;right:-6%;top:-3%;bottom:auto;z-index:3;align-items:center;gap:2px;transform:rotate(-5deg);filter:none}
#skillCutin #skillName{
  display:block;max-width:none;border:0;border-radius:0;transform:none;padding:.12em .45em .18em;font-size:clamp(15px,4.2vh + .4vw,44px);line-height:1;text-align:center;
  color:#ffe14d;background:none;-webkit-text-fill-color:#ffe14d;paint-order:stroke fill;
  -webkit-text-stroke:clamp(2px,.5vh,4px) #2a1608;filter:drop-shadow(0 3px 0 #2a1608) drop-shadow(0 0 10px #ffcf6a99);
  letter-spacing:-.02em;white-space:nowrap;text-shadow:none;
}
#skillCutin .skill-lettering:before{ /* 字後爆炸底 */
  content:"";position:absolute;inset:-18% 4%;z-index:-1;background:linear-gradient(#5a1d12f0,#2a0d08f0);
  clip-path:polygon(0 30%,8% 8%,22% 22%,34% 0,48% 18%,62% 2%,74% 20%,90% 6%,100% 34%,94% 60%,100% 88%,80% 78%,64% 100%,48% 82%,30% 98%,18% 80%,2% 92%,6% 62%);
}
#skillCutin #skillQuote{display:none}
.skill-card-plate{
  position:absolute;left:3%;right:3%;bottom:2.5%;height:13%;z-index:3;
  display:flex;align-items:center;justify-content:center;
  border-radius:clamp(5px,1vh,10px);background:linear-gradient(#22304b,#0f1729);border:2px solid color-mix(in srgb,var(--cf) 70%,#000);
}
.skill-card-plate img{position:absolute;left:-4%;bottom:-8%;height:150%;width:auto;filter:drop-shadow(0 2px 2px #000a)}
.skill-card-plate b{font-size:clamp(10px,2.2vh + .2vw,22px);font-weight:1000;color:#fff;padding-left:22%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#skillStars{
  position:absolute;left:0;right:0;bottom:100%;text-align:center;
  font-size:clamp(12px,3vh,28px);line-height:1;color:#ffd94f;letter-spacing:.05em;
  -webkit-text-stroke:1px #5a3a06;text-shadow:0 2px 0 #3a2504;
}
@keyframes arenaCardIn{from{opacity:0;transform:translateX(-40px) scale(.85)}to{opacity:1;transform:none}}
@keyframes arenaSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#skillCutin,#skillCutin:before{animation:none}}

/* ===== 右側：可切換資訊欄（👥 對手生命與戰績 ／ ⚔ 我方傷害與攻擊），浮在戰場右緣 ===== */
:root{--a-side:clamp(150px,17vw,270px);--a-tabs:clamp(24px,6vh,38px)}
.side-tabs{
  grid-area:2/3/3/4;align-self:start;justify-self:end;z-index:6;
  width:var(--a-side);height:var(--a-tabs);margin:6px var(--safe-r) 0 0;
  display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;box-sizing:border-box;
  border-radius:999px;background:#0b1220e0;border:1px solid #ffffff26;
}
.side-tabs button{
  min-height:0;height:100%;padding:0 4px;border:0;border-radius:999px;background:none;cursor:pointer;
  color:#b8c4d8;font-size:clamp(9px,1.5vh + .1vw,14px);font-weight:900;white-space:nowrap;
}
.side-tabs button[aria-selected="true"]{background:linear-gradient(#ffe8a3,#e6a53b);color:#1d1710;box-shadow:0 2px 0 #6b4a10}
.side-tabs button:focus-visible{outline:2px solid #ffe27a;outline-offset:1px}
.standings-panel,.damage-panel{
  grid-area:2/3/3/4;align-self:start;justify-self:end;z-index:5;
  width:var(--a-side);box-sizing:border-box;max-height:calc(100% - var(--a-tabs) - 50px);overflow:auto;
  margin:calc(var(--a-tabs) + 10px) var(--safe-r) 0 0;padding:5px 5px;border-radius:12px;
  border:1px solid #ffffff22;background:#0b1220c4;box-shadow:none;backdrop-filter:blur(2px);
}
.standings-panel h2,.damage-panel h2{font-size:clamp(9px,1.4vh,13px);margin:0 0 4px;text-align:center;color:#f6deb2}
.standings-panel,.damage-panel{display:none!important}
body[data-side="players"] .standings-panel,body[data-side="damage"] .damage-panel{display:block!important}
.standings{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.standing{
  display:grid;grid-template-columns:clamp(20px,4vh,32px) minmax(0,1fr) auto;gap:2px 5px;align-items:center;
  padding:3px 5px;border-radius:9px;background:#ffffff0b;border:1px solid #ffffff14;
}
.standing-face{
  display:grid;place-items:center;width:clamp(20px,4vh,32px);height:clamp(20px,4vh,32px);
  border-radius:50%;background:#26344d;border:2px solid #7d8796;font-size:clamp(11px,2.2vh,18px);line-height:1;
}
.standing-meta{min-width:0;display:flex;flex-direction:column;gap:2px}
.standing-meta b{font-size:clamp(8px,1.4vh,13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#eef2fb}
.standing-bar{display:block;height:clamp(3px,.7vh,6px);border-radius:2px;background:#000a;overflow:hidden}
.standing-bar>i{display:block;height:100%;background:#5ff08f}
.standing-record{display:flex;align-items:center;gap:4px;min-width:0;flex-wrap:wrap}
.standing-record small{font-size:clamp(7px,1.15vh,11px);color:#c9d3e3;white-space:nowrap}
.standing-dots{display:flex;gap:2px}
.standing-dots i{display:block;width:clamp(5px,1vh,8px);height:clamp(5px,1vh,8px);border-radius:50%;background:#7d8796}
.standing-dots .dot-w{background:#5ff08f}.standing-dots .dot-l{background:#ff6b6b}.standing-dots .dot-d{background:#c9d3e3}
.standing-streak{font-style:normal;font-size:clamp(7px,1.15vh,11px);font-weight:900;white-space:nowrap}
.standing-streak.hot{color:#ffb36b}.standing-streak.cold{color:#8fd0ff}
.standing-vs{font-size:clamp(7px,1.1vh,10px);font-weight:900;color:#ff9a7f}
.standing-hp{font-style:normal;font-weight:1000;font-size:clamp(11px,2.1vh,18px);color:#fff}
.standing.me{border-color:#7ff0bd88;background:#1d3f37aa}
.standing.me .standing-face{border-color:#7ff0bd}
.standing.current{border-color:#ff8a6b;background:#5a252099}
.standing.current .standing-face{border-color:#ff8a6b}
.standing.current .standing-bar>i{background:#ff8a6b}
.standing.out{opacity:.4;filter:grayscale(1)}
.damage-sub{display:block;margin-top:1px;font-size:clamp(7px,1.15vh,11px);color:#c9d3e3;white-space:nowrap}

#damageBoard{display:flex;flex-direction:column;gap:clamp(3px,.8vh,8px)}
.damage-entry{grid-template-columns:clamp(22px,4.6vh,44px) 1fr!important;gap:clamp(3px,.6vw,8px)}
.damage-face{width:clamp(22px,4.6vh,44px)!important;height:clamp(25px,5.2vh,50px)!important;border-radius:6px;overflow:hidden}
.damage-meta b,.damage-meta em{font-size:clamp(9px,1.5vh + .1vw,16px)!important}
.damage-track{height:clamp(4px,.8vh,8px);border-radius:3px;overflow:hidden}
.damage-empty{font-size:clamp(9px,1.4vh,13px)}

/* ===== 備戰席：戰場下緣一排 ===== */
#bench{
  grid-area:3/1/4/4;justify-self:center;align-self:stretch;z-index:4;
  display:flex;gap:clamp(4px,.8vw,12px);min-height:0;height:100%;padding:3px 0 4px;
}
#bench .mini-card{
  position:relative;min-height:0;height:100%;aspect-ratio:1/1;padding:0;gap:0;overflow:hidden;flex:none;
  border:2px solid #7d8796;border-radius:9px;background:linear-gradient(#24324b,#141c2c);box-shadow:0 3px 0 #05080f;
  display:flex;flex-direction:column;justify-content:flex-end;
}
#bench .mini-card .icon.art-frame{position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;box-shadow:none;background:none}
#bench .mini-card .icon.art-frame img{object-position:center 18%}
#bench .mini-card .name{position:relative;z-index:1;display:block;padding:1px 2px;font-size:clamp(8px,1.3vh + .15vw,12px);background:#0b1220d9;color:#fff;text-align:center}
#bench .mini-card .stars{position:absolute;z-index:1;top:1px;left:3px;font-size:clamp(8px,1.3vh,12px);color:#ffd94f;text-shadow:0 1px 0 #000,0 0 3px #000}
#bench .mini-card.selected{outline:3px solid #ffe27a;outline-offset:-1px}
#bench .mini-card.empty{
  justify-content:center;align-items:center;border:2px dashed #ffffff30;background:#0b122077;color:#ffffff45;
  font-size:clamp(7px,1.1vh,11px);box-shadow:none;
}

/* ===== 底部商店列 ===== */
.app:after{ /* 整列底板 */
  content:"";grid-area:4/1/7/4;z-index:0;pointer-events:none;
  background:linear-gradient(#18223b,#0b1120);border-top:2px solid #e3b85c66;box-shadow:0 -8px 20px #000a;
}
.app:before{ /* 左側經濟面板 */
  content:"";grid-area:4/1/7/2;z-index:1;pointer-events:none;
  margin:clamp(4px,1vh,8px) 0 max(clamp(4px,1vh,8px),env(safe-area-inset-bottom)) var(--safe-l);
  border-radius:12px;background:#0b1220e6;border:2px solid var(--a-line);
}
.deck-economy{
  grid-area:4/1/5/2;z-index:2;display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr auto;
  align-items:end;gap:2px 6px;min-width:0;margin:clamp(6px,1.4vh,12px) 8px 0 calc(var(--safe-l) + 8px);
  padding:0;background:none;border:0;
}
.economy-level{
  grid-column:1/3;grid-row:1;display:flex;align-items:baseline;justify-content:space-between;gap:6px;
  font-size:clamp(13px,2.6vh + .2vw,28px);line-height:1;color:#fff;font-weight:1000;white-space:nowrap;
}
.economy-level small{display:inline;font-size:clamp(7px,1.15vh + .1vw,13px);font-weight:700;color:#c9d3e3}
#economyXp{display:block;grid-column:1/3;grid-row:2;height:clamp(4px,.9vh,8px);width:100%;border-radius:99px;background:#1b2740;border:1px solid #000;overflow:hidden}
#economyXp i{height:100%;display:block;background:linear-gradient(90deg,#5fb8ff,#8fd8ff);border-radius:99px}
.stat.economy-gold{
  grid-area:5/1/6/2;z-index:2;display:flex;flex-direction:row;align-items:center;gap:6px;
  margin:0 8px 0 calc(var(--safe-l) + 8px);padding:0;border:0;background:none;box-shadow:none;min-width:0;
}
.stat.economy-gold span{display:none}
.stat.economy-gold strong{font-size:clamp(15px,3.4vh + .3vw,36px);font-weight:1000;color:var(--a-gold);line-height:1}
.stat.economy-gold strong:before{content:"🪙";margin-right:4px;font-size:.8em}
.shop-heading{
  grid-area:6/1/7/2;z-index:2;display:flex;flex-direction:row;align-items:stretch;gap:clamp(4px,.6vw,8px);
  margin:clamp(2px,.6vh,6px) 8px max(clamp(9px,1.8vh,16px),calc(env(safe-area-inset-bottom) + 6px)) calc(var(--safe-l) + 8px);
}
.shop-heading>div{display:none}
#shopLockBtn,.shop-heading #rerollBtn{
  flex:1;min-width:0;min-height:0;height:100%;border-radius:10px;border:2px solid var(--a-ink);box-shadow:0 3px 0 #05080f;
  font-size:clamp(8px,1.45vh + .15vw,14px);font-weight:900;padding:2px 4px;line-height:1.1;white-space:normal;
}
.shop-heading #rerollBtn{background:linear-gradient(#3d5c94,#24386a);color:#fff}
#shopLockBtn{background:linear-gradient(#3a4a63,#222e42);color:#f3ead6}
#shopLockBtn[aria-pressed="true"]{background:linear-gradient(#ffe8a3,#e6a53b);color:#1d1710}

/* 商店卡列（常駐，不再是彈出視窗） */
#shop,body.market-open #shop{
  grid-area:4/2/7/3;position:relative;inset:auto;z-index:2;display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;justify-items:center;
  gap:0 clamp(4px,1vw,14px);max-height:none;overflow:visible;
  margin:0;padding:clamp(10px,2.4vh,22px) clamp(4px,1vw,14px) 0;
  border:0;border-radius:0;background:none;box-shadow:none;animation:none;
}
#shop .shop-controls{display:none}
.app:has(#shopLockBtn[aria-pressed="true"]) #shop{background:linear-gradient(#e3b85c18,transparent)}
#shop .mini-card.empty{
  --card:calc(var(--a-tray) - clamp(10px,2.4vh,22px) - clamp(18px,4.2vh,36px));
  display:grid;place-items:center;align-self:start;min-height:0;padding:0;margin:0;
  width:min(100%,var(--card));height:var(--card);
  border:2px dashed #ffffff26;border-radius:10px;background:#0b122066;color:#ffffff55;font-size:clamp(8px,1.3vh,12px);
}
body[data-phase="battle"] #shop .mini-card.shop-card,body[data-phase="result"] #shop .mini-card.shop-card{filter:saturate(.75) brightness(.8)}

/* 右下：自動補位＋開戰 */
.battle-toolbar .autofill-label{
  grid-area:4/3/5/4;justify-self:center;align-self:center;z-index:2;
  margin-right:var(--safe-r);padding:3px 9px;border-radius:999px;border:1px solid var(--a-line);background:var(--a-panel);
  font-size:clamp(8px,1.4vh,12px);white-space:nowrap;
}
.battle-toolbar #fightBtn,.battle-toolbar #nextBtn{
  grid-area:5/3/7/4;z-index:2;align-self:stretch;min-height:0;height:auto;width:auto;
  margin:0 var(--safe-r) max(clamp(9px,1.8vh,16px),calc(env(safe-area-inset-bottom) + 6px)) 0;
  border:3px solid var(--a-ink);border-radius:14px;box-shadow:0 4px 0 #05080f;
  font-size:clamp(10px,2vh + .2vw,19px);font-weight:1000;padding:2px 6px;line-height:1.15;
}
.battle-toolbar #fightBtn{background:linear-gradient(#ff8a6b,#d9442f);color:#fff;text-shadow:0 1px 0 #6b1b12}
.battle-toolbar #fightBtn:disabled{filter:grayscale(.5) brightness(.75)}
.battle-toolbar #nextBtn{background:linear-gradient(#7ff0bd,#2fa978);color:#0b1d16;z-index:3}
body[data-phase="result"] .battle-toolbar #fightBtn{visibility:hidden}

/* 戰鬥結果畫面維持在戰場內 */
.outcome{inset:var(--a-top) 0 var(--a-bench)!important}

/* ===== 戰鬥中棋子資訊欄（即時血量／魔力） ===== */
#unitPopover .unit-popover-down{margin:3px 0 0;color:#ff9a8a;font-weight:900}
#unitPopover .unit-popover-bars{display:flex;flex-direction:column;gap:4px;margin:7px 0 2px}
#unitPopover .unit-popover-bars small{display:block;font-size:10px;color:#e7eefb}
#unitPopover .pop-bar{display:block;height:7px;border-radius:3px;background:#05080fcc;overflow:hidden;margin-top:2px;border:1px solid #000}
#unitPopover .pop-bar>i{display:block;height:100%;transition:width .2s}
#unitPopover .hp-bar>i{background:#5ff08f}
#unitPopover .hp-bar.foe>i{background:#ff6b6b}
#unitPopover .mana-bar>i{background:#7fb4ff}
#unitSellBtn[hidden]{display:none!important}

/* ===== V0.5.7d 卡框素材庫 v4.1：費用色卡框＋左下政營徽章＋上緣星級＋三星翅膀 ===== */
#board .unit .hero-name{font-size:11.5px;font-weight:900;fill:#fff;stroke:#071021;stroke-width:3px;paint-order:stroke;text-anchor:middle}
#board .unit-body{stroke:none}
#board .unit-frame-img,#board .unit-badge,#board .unit-star,#board .unit-wings{pointer-events:none}
#board .unit-badge{filter:drop-shadow(0 1px 1px #000a)}
#board .unit-items{fill:#ffe9a8;stroke:#1a1520;stroke-width:2px;paint-order:stroke}
/* HTML 卡片共用 */
#bench .mini-card[data-uid],#shop .mini-card.shop-card{
  position:relative;overflow:visible;padding:0;border:0!important;border-radius:0;
  background:none;box-shadow:none;aspect-ratio:1/var(--ar,1);
}
.mini-card .cf-frame{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;filter:drop-shadow(0 3px 2px #000a)}
.mini-card .cf-wings{position:absolute;left:-18%;bottom:-6%;width:136%;z-index:0;pointer-events:none}
.mini-card .cf-badge{position:absolute;left:4%;bottom:-3%;width:25%;z-index:4;pointer-events:none;filter:drop-shadow(0 1px 1px #000a)}
.mini-card .cf-stars{position:absolute;top:-9%;left:0;right:0;z-index:5;display:flex;justify-content:center;gap:1%;pointer-events:none}
.mini-card .cf-stars img{width:19%;height:auto}
#bench .mini-card[data-uid] .icon.art-frame,#shop .mini-card.shop-card .icon.art-frame{
  position:absolute;left:calc(var(--wl,.045)*100%);top:calc(var(--wt,.07)*100%);right:calc((1 - var(--wr,.95))*100%);bottom:calc((1 - var(--wb,.785))*100%);width:auto;height:auto;margin:0;z-index:1;
  border:0;border-radius:3px;box-shadow:none;background:#16233a;overflow:hidden;
}
#bench .mini-card[data-uid] .icon.art-frame img,#shop .mini-card.shop-card .icon.art-frame img{object-position:center 18%}
#bench .mini-card[data-uid] .name,#shop .mini-card.shop-card .name{
  position:absolute!important;left:calc(var(--bl,.31)*100%);right:calc((1 - var(--br,.9))*100%);top:calc(var(--bt,.8)*100%);bottom:calc((1 - var(--bb,.95))*100%);z-index:3;color:var(--nc,#fff)!important;
  display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:0;border-radius:0;
  background:none!important;color:#fff;font-weight:900;line-height:1;white-space:nowrap;overflow:hidden;
  text-shadow:0 1px 0 #000,0 0 3px #000;font-size:clamp(7px,1.25vh + .1vw,13px);
}
#bench .mini-card[data-uid] .stars,#shop .mini-card.shop-card .stars,
#bench .mini-card[data-uid] .caption,#shop .mini-card.shop-card .caption,
#bench .mini-card[data-uid] .legend-corner,#shop .mini-card.shop-card .legend-corner{display:none!important}
#bench .mini-card[data-uid].selected{outline:none}
#bench .mini-card[data-uid].selected .cf-frame{filter:drop-shadow(0 0 5px #ffe27a) drop-shadow(0 0 2px #ffe27a)}
/* 備戰席：正方形卡片置中 */
#bench .mini-card[data-uid]{height:calc(100% - 6px);width:auto;max-width:100%;justify-self:center;align-self:end;margin-top:6px}
/* 商店：正方形卡片，價格標在右上 */
#shop .mini-card.shop-card{height:auto;min-height:0}
#shop .mini-card.shop-card .cost{position:absolute!important;top:9%;right:8%;bottom:auto;z-index:5;font-size:clamp(9px,1.6vh,14px)}
#shop{padding-top:6px}
#shop .mini-card.shop-card{margin-top:8%}
.frame-picker[hidden]{display:none}
.frame-picker{border:1px solid #41536f;border-radius:12px;padding:9px 10px 11px;margin:11px 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.frame-picker legend{font-size:13px;font-weight:800;padding:0 5px}
.frame-choice{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:8px 4px;border:1px solid #4b6080;border-radius:12px;background:#28354e;cursor:pointer;text-align:center}
.frame-choice input{position:absolute;opacity:0;pointer-events:none}
.frame-choice:has(input:checked){outline:2px solid #86e7ba;background:#29544f}
.frame-choice.locked{cursor:not-allowed;opacity:.72}
.frame-choice b{font-size:11px}.frame-choice small{font-size:10px;color:#c3cfe2}
.frame-sample{width:52px;height:52px;object-fit:contain}
.mini-card .cf-stars{position:absolute!important;z-index:6!important}
#shop .mini-card.shop-card{width:min(100%,32dvh);justify-self:center;margin-top:12px}

/* ===== V0.5.8 商店／備戰席卡片尺寸（覆蓋上方卡框預設）＋價格硬幣置於卡片下方 ===== */
#shop .mini-card.shop-card{
  width:auto;max-width:100%;aspect-ratio:1/1;margin:0;align-self:start;justify-self:center;
  height:calc(var(--a-tray) - clamp(10px,2.4vh,22px) - clamp(18px,4.2vh,36px));
}
#shop .mini-card.shop-card .cost{
  position:absolute!important;top:calc(100% + clamp(2px,.6vh,6px));left:50%;right:auto;bottom:auto;transform:translateX(-50%);
  display:flex;align-items:center;gap:4px;padding:1px 9px 1px 4px;border-radius:999px;
  background:#0b1220;border:1px solid #ffffff2a;color:#fff;line-height:1.15;z-index:5;
  font-size:clamp(9px,1.9vh + .1vw,18px);font-weight:1000;
}
#shop .mini-card.shop-card .cost i{
  display:block;width:1em;height:1em;border-radius:50%;background:var(--cc,var(--cost1));
  box-shadow:inset 0 -2px 0 #0006,inset 0 2px 0 #fff5,0 0 0 1px #000;
}
#shop .mini-card[data-cost="1"]{--cc:var(--cost1)}#shop .mini-card[data-cost="2"]{--cc:var(--cost2)}
#shop .mini-card[data-cost="3"]{--cc:var(--cost3)}#shop .mini-card[data-cost="4"]{--cc:var(--cost4)}
#shop .mini-card[data-cost="5"]{--cc:var(--cost5)}
#shop .mini-card.shop-card:not(:disabled):hover .cf-frame{filter:drop-shadow(0 0 6px #ffe27a) drop-shadow(0 3px 2px #000a)}
#bench .mini-card[data-uid]{height:calc(100% - 8px);margin-top:7px;align-self:end}

/* ===== 矮螢幕（手機橫向）微調 ===== */
@media (max-height:460px){
  .hud{gap:0 6px;padding:0 14px 2px}
  .trait-chip small{font-size:8px}
  #skillCutin #skillName{-webkit-text-stroke:1px #2a1608}
  .standing{padding:2px 3px}
}
@media (max-width:760px){
  .trait-strip{max-width:calc(50vw - 105px)}
}

/* ===== V0.5.9 羈絆詳情小卡：點任一羈絆圖示（我方或敵方） ===== */
.trait-strip.foe{pointer-events:auto}
.trait-chip{cursor:pointer;border-radius:8px}
.trait-chip:focus-visible{outline:2px solid #ffe27a;outline-offset:2px}
.trait-popover[hidden]{display:none!important}
.trait-popover{
  position:fixed;z-index:95;box-sizing:border-box;width:min(300px,calc(100vw - 16px));
  max-height:min(72dvh,440px);overflow-y:auto;overscroll-behavior:contain;padding:8px 10px 10px;
  border:2px solid #efd19d;border-radius:10px;background:#16233af7;color:#f4f1e8;
  box-shadow:0 10px 28px #050a14e0,0 2px 0 #05080f;font-size:12px;line-height:1.35;
}
.trait-popover[data-side="foe"]{border-color:#ff9a8a}
.trait-popover header{display:grid;grid-template-columns:30px 1fr auto;grid-template-rows:auto auto;column-gap:7px;align-items:center;margin-bottom:6px}
.trait-popover header i{grid-row:1/3;width:30px;height:30px;display:grid;place-items:center;border-radius:7px;background:#2b3a55;font-style:normal;font-size:16px;overflow:hidden}
.trait-popover header i img{width:80%;height:80%;object-fit:contain}
.trait-popover header b{font-size:14px;color:#ffe09c}
.trait-popover header em{font-style:normal;font-weight:900;font-size:14px}
.trait-popover header small{grid-column:2/4;font-size:10px;color:#b6c4d8}
.trait-tiers{list-style:none;margin:0 0 7px;padding:0;display:flex;flex-direction:column;gap:3px}
.trait-tiers li{display:grid;grid-template-columns:38px 1fr;gap:6px;padding:4px 6px;border-radius:6px;background:#ffffff0a;color:#9fb0c6}
.trait-tiers li span:first-child{font-weight:900}
.trait-tiers li.reached{color:#e7f7ec}
.trait-tiers li.current{background:linear-gradient(110deg,#2d6a52,#1d3f37);color:#fff;outline:1px solid #8ff0bf}
.trait-popover[data-side="foe"] .trait-tiers li.current{background:linear-gradient(110deg,#6a2d2d,#3f1d1d);outline-color:#ff9a8a}
.trait-members{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-bottom:5px}
.trait-member{display:flex;flex-direction:column;align-items:center;gap:1px;opacity:.38;filter:grayscale(.85)}
.trait-member.in{opacity:1;filter:none}
.trait-member img{width:100%;aspect-ratio:1;object-fit:cover;object-position:center 18%;border-radius:6px;border:2px solid #7d8796;background:#1f2f4b}
.trait-member[data-cost="2"] img{border-color:#4fd18b}.trait-member[data-cost="3"] img{border-color:#4aa3ff}
.trait-member[data-cost="4"] img{border-color:#c77dff}.trait-member[data-cost="5"] img{border-color:#ffc94a}
.trait-member.in img{box-shadow:0 0 0 2px #ffe27a}
.trait-member small{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.trait-hint{margin:2px 0 0;font-size:10px;color:#9fb0c6}
.trait-all{margin-top:7px;width:100%;min-height:32px;border:2px solid #0d1320;border-radius:8px;background:linear-gradient(#ffe8a3,#e6a53b);color:#1d1710;font-weight:900;font-size:12px}
@media (max-height:520px){
  .trait-popover{width:min(330px,calc(100vw - 16px));padding:6px 8px 8px}
  .trait-members{grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
  .trait-member small{font-size:8px}
  .trait-tiers li{padding:3px 6px}
}

/* ===== V0.5.8 造型幾何：圓槽徽記、淺色名牌、直式卡框 ===== */
.mini-card .cf-badge.slot{left:calc((var(--cx) - var(--cr))*100%);top:calc((var(--cy) - var(--cr) / var(--ar))*100%);bottom:auto;width:calc(var(--cr)*200%)}
#bench .mini-card[data-uid]:not([data-frame="classic"]) .name{text-shadow:none;font-weight:900}
#board .unit .hero-name.on-light{fill:#3a2410;stroke:#f6ead0;stroke-width:2px}
#bench .mini-card[data-uid][data-frame="voters"]{height:calc(100% + 2px);margin-top:0;align-self:end}
.frame-sample{width:auto;height:64px}