/* 政壇大亂鬥 V0.3.3｜漫畫紙雕戰鬥畫面
 * 純呈現層，不改變英雄、六角格、拖曳／戰鬥的互動與計算。
 */
:root{--comic-ink:#1c1b24;--comic-paper:#f1e4cf;--comic-gold:#ffdb82}
html,body{background:#29242b;color:#fff;overscroll-behavior:none}
body{
  background-image:radial-gradient(ellipse at 50% 15%,#776b67 0%,#4c4447 47%,#1b202b 100%),
    repeating-linear-gradient(30deg,#ffffff06 0 3px,transparent 3px 19px);
  min-width:280px;
}
.app{
  width:100%;max-width:1800px;min-height:100dvh;margin:auto;
  display:grid;grid-template-columns:clamp(95px,10.5vw,148px) minmax(0,1fr) clamp(125px,14vw,205px);
  grid-template-rows:clamp(55px,7.5vh,76px) minmax(365px,1fr) auto;
  column-gap:8px;row-gap:5px;padding:7px 9px 9px;
  background-image:
   radial-gradient(ellipse at 12% 18%,#fff7 0%,transparent 22%),
   repeating-linear-gradient(110deg,#00000008 0 1px,transparent 1px 7px);
  isolation:isolate;
}
.topbar{
  grid-area:1/1/2/4;margin:0;z-index:10;position:relative;
  gap:10px;padding:3px 12px 5px 8px;min-width:0;flex-direction:row;align-items:center;
  border-bottom:4px solid #111d27;
  background:linear-gradient(115deg,#1a2736 8%,#3d343a 58%,#1a222c);
  clip-path:polygon(0 0,100% 0,100% 93%,94% 99%,43% 95%,12% 100%,0 95%);
  box-shadow:0 5px 0 #e6d2b166;
}
.topbar>div:first-child{min-width:0;max-width:248px}
.topbar h1{
  margin:0;line-height:.95;font-size:clamp(19px,2.35vw,38px);letter-spacing:-.06em;
  transform:rotate(-3deg);white-space:nowrap;overflow:visible;
  color:#fafbf3;-webkit-text-stroke:1px #0d1320;
  text-shadow:3px 3px 0 #151b2b,-2px -2px 0 #151b2b,5px 6px 0 #ac7155;
}
.topbar h1 span{display:block;color:#8af0ba;font-size:.58em;letter-spacing:.04em;margin-left:38px}
.topbar p{display:none}
.topbar .eyebrow{font-size:9px;letter-spacing:.07em;line-height:1.2;color:#e6cc9f}
.header-actions{gap:5px;flex-wrap:nowrap;margin-left:auto}
.header-actions button{
  flex:none!important;min-height:35px;padding:5px 9px;border:2px solid #121926!important;
  border-radius:5px;background:#253246;color:#fff9e7;font-size:11px;
  box-shadow:2px 3px 0 #0d151d;white-space:nowrap;
}
.header-actions button:active{transform:translate(2px,2px);box-shadow:none}
#shopToggle{background:#f0c878;color:#20202b}
#loadoutToggle{background:#4a6b72}
#codexToggle{background:#554a61}
.hud{
  grid-area:1/2/2/3;z-index:11;pointer-events:none;
  display:flex;gap:5px;align-items:center;justify-content:center;min-width:0;margin:0;padding:0;
}
.hud .stat{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:43px;flex:none;padding:3px 7px;border:2px solid #25212b;border-radius:3px;
  background:#1e202bf2;box-shadow:2px 2px 0 #a77c55;line-height:1.1;
}
.hud .stat span{font-size:9px;font-weight:800;color:#ecdcca}
.hud .stat strong{font-size:clamp(13px,1.6vw,23px);color:white;line-height:1.2}
.hud .stat.gold strong{color:#ffdb7d}
.hud .stat.status{border-color:#9f443e;background:#802e2a;min-width:70px}
.hud .stat.status strong{font-size:clamp(11px,1.5vw,20px)}
/* 隱藏原本縱向資訊區，但可用右上角按鈕叫出 */
.players-strip,.spotlight-section{
 display:none;position:fixed;top:66px;left:50%;transform:translateX(-50%);
 max-width:min(92vw,850px);width:94vw;max-height:74dvh;overflow:auto;z-index:70;
 border:4px solid #1b2029;padding:12px;background:#343a47f5;box-shadow:0 15px 0 #131722a8;
}
body.event-open .players-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
body.codex-open .spotlight-section{display:block;margin:0}
.spotlight-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
/* 內容保留在原 DOM，grid 直接拉到舞台位置 */
.columns,.sidebar{display:contents}
.battle-area{
 grid-area:2/2/3/3;position:relative;min-width:0;min-height:0;height:100%;
 border:5px solid #24222a;border-radius:8px;padding:0;
 background:linear-gradient(135deg,#b7ada2,#656564 50%,#9f9b87);
 box-shadow:0 0 0 2px #ecd3ad,6px 7px 0 #1f212bb0;overflow:hidden;
}
.battle-area:before{
 content:"";pointer-events:none;position:absolute;inset:0;z-index:1;
 background-image:repeating-linear-gradient(35deg,#ffffff00 0 24px,#b5ac9b12 25px 27px),
 linear-gradient(to bottom,#262d3799,transparent 45%,#27252866);
}
.board-wrap,.board-scroller{height:100%;margin:0;border:0;border-radius:0;position:relative;z-index:2}
.board-wrap{background:none}
.arena-scenery{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;opacity:.93;z-index:0}
.board-scroller{
 overflow:auto;scrollbar-width:thin;scrollbar-color:#ad9573 #1c2b37;
 background:linear-gradient(to bottom,#393b4044,#4e554118 44%,#4c483c2b 100%);
 display:flex;align-items:center;justify-content:center;
}
#board{
 position:relative;z-index:2;min-width:0;max-width:100%;
 width:100%;height:100%;margin:0;flex:none;overflow:visible;
 filter:drop-shadow(0 2px 2px #13182290)
}
/* 石板六角，盤面覆蓋下方美術背景但讓背景紋理透出 */
#board .hex{stroke:#3f3b41aa;stroke-width:2;fill:#c2c0b45e;transition:fill .12s,stroke .12s}
#board .hex.ally{fill:#a9cabb59;stroke:#425c62b3}
#board .hex.enemy{fill:#cbafa55c;stroke:#68545cb3}
#board .hex.valid{stroke:#ffee8e;stroke-width:3}
#board .hex.drag-valid{stroke:#e8ffab;fill:#55ca9477;stroke-width:5}
#board .hex.drag-invalid{stroke:#ff8d96;stroke-width:5}
#board .unit{filter:drop-shadow(3px 4px 0 #101822ad)}
#board .unit .hero-name{
 fill:#1a1d27;stroke:#f7e4c5;stroke-width:2px;paint-order:stroke;
 font-size:12px;font-weight:1000;letter-spacing:.1px;
}
#board .unit .mark{font-size:15px;fill:#ffdc6d;stroke:#2a2733;stroke-width:2px;paint-order:stroke}
#board .unit .unit-emoji{font-size:34px;filter:drop-shadow(2px 2px #181820)}
#board .unit .hp-track{fill:#131a27}
#board .unit .hp{fill:#65ed9e}
#board .unit .hp.foe{fill:#eb7774}
#board .unit.legendary .legend-label{fill:#fff0af;stroke:#171823;stroke-width:2;paint-order:stroke;font-size:11px}
/* 漫畫技能剪影：半透明不會攔住戰鬥點擊 */
#skillCutin{
 display:none;position:absolute;top:8%;left:5%;width:min(65%,480px);
 min-height:42%;z-index:6;pointer-events:none;isolation:isolate;
 align-items:center;justify-content:center;gap:8px;
 transform:rotate(-5deg);
 animation:comicSlam .45s cubic-bezier(.16,1.5,.45,1) both;
}
#skillCutin.active{display:flex}
#skillCutin:before{
 content:"";position:absolute;inset:5% -3% -6% -3%;z-index:-1;
 background:repeating-conic-gradient(from 6deg,#fff 0 9deg,#6dffb6 9deg 21deg,#1a593f 21deg 30deg);
 clip-path:polygon(4% 6%,30% 0,38% 12%,68% 0,73% 12%,95% 0,89% 35%,100% 52%,88% 65%,99% 88%,69% 80%,51% 100%,31% 86%,4% 98%,14% 69%,0 44%);
 border:6px solid #121622;box-shadow:7px 8px 0 #152026ad;
}
#skillCutin[data-camp="藍"]:before{background:repeating-conic-gradient(#74aef5 0deg 20deg,#f6dfaf 20deg 37deg,#1c457d 37deg 48deg)}
#skillCutin[data-camp="白"]:before{background:repeating-conic-gradient(#bda9f9 0deg 20deg,#f4e5f9 20deg 37deg,#64498c 37deg 48deg)}
#skillCutin[data-camp="中立"]:before{background:repeating-conic-gradient(#fbd37b 0deg 20deg,#fff4d4 20deg 37deg,#b47534 37deg 48deg)}
#skillPortrait{
 flex:0 0 clamp(55px,14%,100px);height:110px;
 display:grid;place-items:center;background:#faf0db;border:5px solid #101722;border-radius:30% 20% 35% 20%;
 box-shadow:6px 8px 0 #161721;overflow:hidden;font-size:55px;
}
#skillPortrait img{width:100%;height:100%;object-fit:cover}
.skill-lettering{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
#skillName{font-size:clamp(20px,4vw,54px);font-weight:1000;color:#fffef6;line-height:1.03;
 -webkit-text-stroke:2px #16151d;text-shadow:5px 5px 0 #131a27,7px 8px 0 #ffffffb0}
#skillQuote{font-size:clamp(10px,1.4vw,18px);font-weight:900;max-width:260px;color:#151622;
 background:#fff8e8;border:3px solid #131825;box-shadow:4px 4px 0 #202532;transform:rotate(3deg);padding:4px 9px}
@keyframes comicSlam{0%{opacity:0;transform:translate(-55px,-10px) rotate(-12deg) scale(.48)}65%{opacity:1;transform:rotate(3deg) scale(1.07)}100%{transform:rotate(-5deg) scale(1)}}
@media(prefers-reduced-motion:reduce){#skillCutin{animation:none}}
/* 棋盤上方小標籤、下方按鈕 */
.battle-area .section-title{position:absolute;top:8px;left:8px;right:8px;z-index:4;pointer-events:none}
.section-title>div h2,.section-title>div p{display:none}
#fieldMessage{padding:4px 10px;font-size:12px;font-weight:1000;color:#fff0d0;letter-spacing:1px;
 background:#643d38;border:3px solid #171d29;border-radius:3px;box-shadow:3px 3px #1a222b}
.battle-toolbar{z-index:7;position:absolute;bottom:6px;right:7px;left:7px;display:flex;gap:5px;align-items:center;justify-content:flex-end;margin:0;pointer-events:none}
.battle-toolbar>*{pointer-events:auto}
.battle-toolbar .autofill-label{padding:5px 7px;border-radius:4px;font-size:10px;border:2px solid #18212b;background:#29463dda}
.battle-toolbar .autofill-label input{width:13px;height:13px}
.battle-toolbar .primary-btn,.battle-toolbar .secondary-btn{
 min-height:35px;border:3px solid #161822;border-radius:5px;padding:6px 11px;
 font-size:12px;box-shadow:3px 3px 0 #191b22;background:#ecd9a4;color:#121c29;
}
.battle-toolbar #nextBtn{background:#5bae9d;color:#101b24}
.battle-toolbar .message{flex:1;min-width:0;max-width:45%;font-size:10px;font-weight:700;
 text-align:left;color:#fff6df;text-shadow:1px 1px #121927,0 2px 5px #101721}
.battle-area .legend{display:none}
/* 左側：仿圖像羈絆清單 */
.synergy-panel{grid-area:2/1/3/2;z-index:4;display:flex;flex-direction:column;
 border:3px solid #191d28;border-radius:3px;padding:6px 4px;background:#25232edb;
 box-shadow:3px 4px 0 #1a1b23;min-height:0;overflow:hidden}
.synergy-panel h2{font-size:12px;text-align:center;margin:0 0 6px;color:#f6deb2}
.synergies{display:flex;flex-direction:column;gap:3px;min-height:0;overflow:auto;scrollbar-width:thin}
.synergy-row{padding:4px 3px;background:#22252e;border:1px solid #625e5a;border-radius:3px;min-height:35px}
.synergy-row.synergy-active{background:linear-gradient(110deg,#304a4a,#214332);border:1px solid #a7d4a2}
.synergy-head b{font-size:11px;color:#f9edce;line-height:1.1}
.synergy-head span{font-size:10px;color:#ffe0a4}
.synergy-row>small{font-size:9px;line-height:1.1;display:block;margin-top:2px;color:#bac4c7}
.synergy-row.synergy-active>small{color:#c2ecc2}
/* 右側戰傷面板 */
.damage-panel{grid-area:2/3/3/4;z-index:4;overflow:hidden;min-height:0;
 border:3px solid #151d2b;border-radius:5px;padding:7px 5px;background:#23252fef;
 box-shadow:3px 3px 0 #131722}
.damage-panel h2{font-size:13px;margin:0 0 9px;color:#fff0d1;text-align:center}
#damageBoard{display:flex;flex-direction:column;gap:8px}
.damage-entry{display:grid;grid-template-columns:28px 1fr;gap:4px;align-items:center;min-width:0}
.damage-face{height:33px;width:28px;border:2px solid #dfdfcd;background:#516078;
 overflow:hidden;display:grid;place-items:center;font-size:19px;box-shadow:2px 2px #111b26}
.damage-face img{height:100%;width:100%;object-fit:cover}
.damage-meta{min-width:0}
.damage-meta b{display:flex;justify-content:space-between;gap:3px;font-size:10px;line-height:1.3}
.damage-meta b span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.damage-meta em{font-size:10px;color:#ffdd99;font-style:normal}
.damage-track{height:7px;border:1px solid #171e25;background:#595a57;margin-top:3px}
.damage-track i{height:100%;display:block;background:#6cdb96;transition:width .18s}
.damage-entry:nth-child(2) i{background:#f6a46a}.damage-entry:nth-child(3) i{background:#8daee8}
.damage-empty{font-size:11px;color:#c6c5b7;line-height:1.6;text-align:center;padding:8px 3px}
/* 小型佈陣提示 / 商店開闔 */
.deck-section{
 grid-area:3/1/4/4;min-width:0;margin:0;padding:6px 10px 7px;
 border:4px solid #21202a;border-radius:6px;
 background:linear-gradient(#30303c,#171d2b);
 box-shadow:0 0 0 2px #d9bd9577,inset 0 4px 0 #8e7b65;
 display:grid;grid-template-columns:minmax(100px,145px) minmax(0,1fr) minmax(93px,125px);
 grid-template-rows:auto minmax(73px,1fr);gap:5px 10px;position:relative;z-index:8;
}
.deck-section:before{content:"";position:absolute;top:-14px;left:3%;right:3%;height:11px;z-index:-1;
 background:repeating-linear-gradient(96deg,#b5ad9e 0 27px,#35313a 29px 31px);
 clip-path:polygon(0 40%,6% 0,12% 70%,20% 12%,28% 90%,36% 5%,43% 60%,55% 0,68% 80%,76% 15%,89% 73%,100% 0,100% 100%,0 100%)}
.deck-section .bench-heading{grid-area:1/2/2/3;display:flex;align-items:center;justify-content:flex-start;margin:0}
.bench-heading h2{font-size:11px;color:#f7dcb1;margin:0}.bench-heading span{display:none}
#bench{grid-area:2/2/3/3;grid-template-columns:repeat(9,minmax(0,1fr));gap:3px;min-width:0}
#bench .mini-card{min-width:0;min-height:64px;height:100%;padding:3px;border:2px solid #7e7772;
 background:linear-gradient(#31405c,#233042);box-shadow:2px 3px #101824;border-radius:3px;gap:1px}
#bench .mini-card.empty{background:#151f2b;color:#aab4c7;font-size:10px;border:2px solid #4f5662}
#bench .mini-card .icon.art-frame{height:34px;width:33px;margin:0 auto;border-width:1px}
#bench .mini-card .name{font-size:10px;font-weight:850;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bench .mini-card .stars{font-size:10px;line-height:1;letter-spacing:0;color:#ffe16b}
#bench .mini-card .caption,#bench .mini-card .inspiration,#bench .mini-card .legend-corner{display:none}
#bench .mini-card[data-team="藍"]{border-color:#4c99fa}
#bench .mini-card[data-team="綠"]{border-color:#50d49b}
#bench .mini-card[data-team="白"]{border-color:#aa99d5}
#bench .mini-card[data-team="中立"]{border-color:#f4c16d}
.shop-heading{grid-area:1/3/3/4;margin:0;display:flex;flex-direction:column;justify-content:center;gap:3px}
.shop-heading>div{display:none}
#rerollBtn{min-height:49px;padding:5px;border:3px solid #171b26;border-radius:5px;
 background:linear-gradient(#fff0c9,#ebc57d);color:#1b202a;font-weight:900;
 box-shadow:3px 3px #0b141f;font-size:12px}
#shop{
 display:none;position:absolute;left:16%;right:9%;bottom:calc(100% + 7px);
 background:#293547ed;border:4px solid #141c2a;box-shadow:4px 5px #121722;
 border-radius:5px;padding:9px;grid-template-columns:repeat(5,minmax(0,1fr));
 z-index:30;gap:5px;
}
body.market-open #shop{display:grid}

/* V0.3.3.1：商店永久可關閉，橫向手機不再被彈出卡片覆蓋所有控制項。 */
#shop{
 max-height:min(62dvh,430px);overflow-y:auto;overflow-x:hidden;
 overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
 align-content:start;scrollbar-width:thin;
}
#shop .shop-controls{
 grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;
 gap:8px;position:sticky;top:-9px;z-index:8;
 min-height:44px;padding:5px 7px;
 color:#fff0d0;background:#283342;
 border-bottom:2px solid #e7c898;
 box-shadow:0 2px 2px #10182390;
}
#shop .shop-controls strong{font-size:13px;white-space:nowrap}
#shop .shop-close{
 flex:none;min-height:40px;min-width:112px;border:2px solid #211d23;
 border-radius:5px;padding:7px 10px;background:#eac984;
 color:#24212a;font-size:14px;font-weight:1000;
 box-shadow:2px 2px #111923;touch-action:manipulation;
}
#shop .shop-close:active{transform:translate(2px,2px);box-shadow:none}
body.market-open #shopToggle{background:#eac984;color:#1e202b}
@media (orientation:landscape) and (pointer:coarse) and (max-height:640px){
 #shop{max-height:calc(100dvh - 155px);padding:5px;gap:4px}
 #shop .shop-controls{top:-5px;min-height:38px;padding:2px 4px}
 #shop .shop-close{min-height:35px;min-width:95px;font-size:12px;padding:4px 7px}
}

#shop .mini-card{min-height:150px;padding:5px;border-radius:4px;border-width:2px}
#shop .mini-card .icon.art-frame{width:51px;height:52px}
#shop .mini-card .caption{font-size:10px}
.deck-economy{grid-area:1/1/3/2;display:flex;flex-direction:column;gap:5px;justify-content:center}
.economy-level{font-weight:1000;color:#ffe1a0;font-size:clamp(14px,1.8vw,26px)}
.economy-level small{display:block;font-weight:600;color:#e6e5dd;font-size:11px}
#economyXp{height:7px;width:100%;background:#111b25;border:1px solid #88949e}
#economyXp i{height:100%;width:42%;display:block;background:#ffcb62}
#buyXpBtn{border:2px solid #102039;background:#285ca4;color:#fff3d1;padding:6px 4px;
 font-size:12px;min-height:36px;box-shadow:2px 3px #0f1a2a}
/* 裝備詳情收在有按鈕的浮動側抽屜，功能維持 */
.sidebar>.selected-panel,.sidebar>.inventory-panel{
 display:none;position:fixed;z-index:65;right:12px;width:min(410px,80vw);
 max-height:39dvh;overflow:auto;border:3px solid #ddcba8;border-radius:6px;
 box-shadow:5px 6px #121822;background:#243148;
}
.sidebar>.selected-panel{top:65px}
.sidebar>.inventory-panel{top:calc(65px + 40dvh)}
body.loadout-open .sidebar>.selected-panel,
body.loadout-open .sidebar>.inventory-panel{display:block}
.panel h2{font-size:13px}
#selectedInfo{font-size:11px}
.attribute-grid{margin:5px 0;gap:3px}
.attribute-grid>div{padding:3px}.attribute-grid strong{font-size:13px}
footer{display:none}

/* Activity log shares the same compact drawer pattern, avoids creating a spare CSS-grid row. */
.sidebar>.feed-panel{
 display:none;position:fixed;z-index:66;right:12px;top:65px;width:min(400px,80vw);
 max-height:70dvh;overflow:auto;border:3px solid #e7cd95;border-radius:6px;
 background:#243148f7;box-shadow:5px 6px #121822;
}
body.feed-open .sidebar>.feed-panel{display:block}
.feed-panel .feed{margin:0;padding-left:18px;font-size:11px;line-height:1.5}


/* 玩家需要精確拖曳時可切換 1:1 放大棋盤，讓小螢幕仍保有可用的落點。 */
.zoom-battle-btn{margin-left:auto;min-height:24px;padding:2px 7px;pointer-events:auto;
 background:#efdcb5;color:#22283a;border:2px solid #1e2632;border-radius:4px;
 box-shadow:2px 2px #171b28;font-weight:900;font-size:10px}
body.arena-zoom #board{width:760px!important;height:695px!important;min-width:760px!important;min-height:695px!important;max-width:none!important;flex:none!important}
body.arena-zoom .board-scroller{justify-content:flex-start;align-items:flex-start}

/* Compact landscape: preserve card hit boxes and pan within central arena on phones. */
@media (orientation:landscape) and (pointer:coarse) and (max-height:640px){
 html,body{overflow:hidden}
 .app{height:100dvh;min-height:0;grid-template-columns:clamp(70px,8vw,100px) minmax(0,1fr) clamp(85px,11vw,115px);
  grid-template-rows:44px minmax(0,1fr) 93px;gap:3px;padding:3px 4px}
 .topbar{margin:0;padding:2px 5px;gap:5px}
 .topbar h1{font-size:19px}.topbar h1 span{margin-left:20px}
 .topbar .eyebrow{font-size:7px;letter-spacing:0}
 .topbar>div:first-child{max-width:123px}
 .header-actions{gap:3px}
 .header-actions button{min-height:30px;font-size:9px;padding:3px 5px;box-shadow:1px 2px #14191e}
 .hud{gap:2px}
 .hud .stat{padding:2px 3px;min-width:35px;border-width:1px}
 .hud .stat span{font-size:7px}.hud .stat strong{font-size:12px}
 .hud .stat.status{min-width:47px}.hud .stat.status strong{font-size:10px}
 .battle-area{border-width:3px;min-height:0}
 .synergy-panel,.damage-panel{padding:3px;border-width:2px}
 .synergy-panel h2,.damage-panel h2{font-size:10px;margin-bottom:3px}
 .synergy-row{padding:2px 1px;min-height:23px}
 .synergy-head b{font-size:9px}.synergy-head span,.synergy-row>small{font-size:8px}
 .damage-face{height:25px;width:23px;font-size:15px}.damage-entry{grid-template-columns:23px 1fr}
 .damage-meta b,.damage-meta em{font-size:9px}
 .board-scroller{justify-content:flex-start}
 #board{width:100%;height:100%;min-height:0;min-width:0}
 .deck-section{grid-template-columns:80px minmax(0,1fr) 91px;grid-template-rows:14px minmax(0,1fr);
  padding:3px 6px;gap:2px 5px;border-width:2px}
 .bench-heading h2{font-size:9px}
 #bench .mini-card{min-height:0;padding:1px}
 #bench .mini-card .icon.art-frame{height:30px;width:27px}
 #bench .mini-card .name{font-size:9px}
 #bench .mini-card .stars{font-size:8px}
 #rerollBtn{font-size:10px;min-height:42px}
 .economy-level{font-size:13px}.economy-level small{font-size:8px}
 #buyXpBtn{font-size:9px;min-height:27px}
 .battle-toolbar .primary-btn,.battle-toolbar .secondary-btn{font-size:9px;min-height:26px;padding:4px 5px;border-width:1px}
 .battle-toolbar .message{font-size:8px}
 .battle-toolbar .autofill-label{font-size:8px;padding:3px}
 #skillCutin{left:3%;top:8%;min-height:36%}
 #skillPortrait{height:68px;flex-basis:68px;font-size:32px}
 #skillName{font-size:23px;-webkit-text-stroke:1px #15131b}
 #skillQuote{font-size:10px}
 #shop{left:10%;right:8%;padding:4px}
 #shop .mini-card{min-height:110px;font-size:9px}
 #shop .mini-card .icon.art-frame{height:34px;width:35px}
}
@media(max-width:680px) and (orientation:landscape){
 .header-actions #resetBtn,.header-actions #eventToggle{display:none}
 .topbar>div:first-child{max-width:100px}.topbar h1{font-size:16px}
 .hud .stat:nth-child(2),.hud .stat:nth-child(4){display:none}
 .deck-section{grid-template-columns:62px minmax(0,1fr) 70px}
 #rerollBtn{font-size:9px}
 .synergy-row>small{display:none}
}


/* V0.3.4：正式36英雄美術通道與完整圖鑑 */
#skillCutin{width:min(54%,430px);min-height:64%;top:2%;align-items:flex-end;padding:10px;overflow:visible}
#skillCutin:before{inset:-2% -3%;opacity:.8}
#skillCutin .skill-poster{
 position:absolute;inset:0;width:100%;height:100%;z-index:1;
 object-fit:contain;border:5px solid #fff5dc;border-radius:3px;
 background:#1c283a;box-shadow:7px 7px 0 #131927;
 transform:rotate(-1.5deg)
}
#skillCutin #skillPortrait{display:none}
#skillCutin .skill-lettering{
 position:absolute;z-index:2;bottom:3px;left:12px;right:12px;
 align-items:center;gap:3px;filter:drop-shadow(1px 2px 0 #121824)
}
#skillCutin #skillName{
 max-width:100%;font-size:clamp(14px,2.3vw,27px);
 border:3px solid #141c29;border-radius:4px;
 padding:4px 7px;background:#101827dc;color:#fff5d5;
 transform:rotate(2deg);-webkit-text-stroke:0;
 text-shadow:2px 2px #152033;text-align:center
}
#skillCutin #skillQuote{
 max-width:100%;font-size:clamp(9px,1.1vw,13px);
 border-width:2px;margin:0;transform:rotate(-1deg);
 padding:2px 6px
}
.codex-filters{
 display:flex;gap:8px;flex-wrap:wrap;align-items:center;
 padding:8px 9px;margin-bottom:8px;background:#192433;border:2px solid #ded0b7;
 border-radius:5px;color:#f7e7c6
}
.codex-filters strong{font-size:12px;margin-right:auto}
.codex-filters select{
 min-height:35px;min-width:90px;padding:5px 7px;
 background:#fff3db;color:#1e2a39;border:2px solid #111d29;border-radius:4px;
 font-weight:750
}
#codexResultCount{font-size:11px;color:#aef5ce;white-space:nowrap}
.spotlight-skill-art img{
 display:block;max-height:min(53dvh,440px);max-width:100%;object-fit:contain;
 margin:6px auto 12px;border:3px solid #e8d7b4;box-shadow:4px 4px 0 #111822
}
.hero-mini-portrait{
 width:60px;height:68px;object-fit:cover;float:left;margin:0 10px 6px 0;
 border:3px solid #eed3a0;background:#1f2b39;box-shadow:2px 2px 0 #151c28
}
@media(orientation:landscape) and (pointer:coarse) and (max-height:640px){
 #skillCutin{width:min(42%,305px);min-height:75%;top:2%;padding:2px}
 #skillCutin .skill-poster{border-width:2px;box-shadow:3px 3px #131927}
 #skillCutin #skillName{font-size:12px;padding:2px 4px;border-width:1px}
 #skillCutin #skillQuote{font-size:8px;padding:2px}
 .codex-filters{gap:4px;padding:4px}
 .codex-filters strong{width:100%;font-size:10px}
 .codex-filters select{min-height:30px;font-size:11px}
 .spotlight-skill-art img{max-height:48dvh}
}


/* V0.4.2: 商店的「開啟」與「刷新（2金）」為兩個不同操作。
   跨手機橫向與桌面，戰場底列有可直接點擊的免費商店入口。 */
.battle-toolbar #shopQuickBtn{
  min-width:98px;
  border-color:#6d4a1f;
  background:linear-gradient(#ffe9a5,#eaa83c);
  color:#1f1b18;
  font-weight:1000;
  touch-action:manipulation;
}
#shopReopenBtn{
  min-height:35px;
  padding:4px 3px;
  border:2px solid #e8c783;
  border-radius:5px;
  background:linear-gradient(#345f75,#1a394f);
  color:#f5eacb;
  font-size:11px;
  font-weight:900;
  touch-action:manipulation;
}
.shop-heading #rerollBtn{min-height:35px;padding:3px;font-size:11px}
body.market-open #shopQuickBtn,
body.market-open #shopReopenBtn{box-shadow:0 0 0 2px #fff1ae,0 0 10px #f1c65c;filter:brightness(1.06)}
@media (orientation:landscape) and (pointer:coarse) and (max-height:640px){
  .battle-toolbar #shopQuickBtn{min-width:79px;padding:5px 6px;font-size:10px}
  .shop-heading #rerollBtn,#shopReopenBtn{min-height:31px;font-size:9px;padding:3px 2px}
}

/* v0.4.4：商店鎖定一次下一回合；強調啟用狀態並支援手機橫向。 */
#shopLockBtn{
 min-height:31px;padding:3px;border:2px solid #9faec2;border-radius:5px;
 background:linear-gradient(#536b80,#304155);color:#fff0d9;font-size:11px;font-weight:900;
 touch-action:manipulation;
}
#shopLockBtn[aria-pressed="true"],#shop .shop-lock[aria-pressed="true"]{
 border-color:#ffe198;background:linear-gradient(#ffe1a1,#d19e53);color:#17232a;
}
#shop .shop-controls-actions{display:flex;align-items:center;gap:5px;flex:none}
#shop .shop-lock{
 min-width:94px;min-height:35px;padding:4px 7px;border:2px solid #9faec2;border-radius:5px;
 background:#344d65;color:#fff0d9;font-size:12px;font-weight:900;touch-action:manipulation;
}
#shop .shop-controls strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (orientation:landscape) and (pointer:coarse) and (max-height:640px){
 #shopLockBtn{min-height:29px;font-size:9px;padding:2px}
 #shop .shop-lock{min-height:32px;min-width:75px;font-size:10px;padding:3px}
 #shop .shop-controls-actions{gap:3px}
}

/* V0.4.6 — non-interactive SVG overlays for card collisions.
   Future purchased attack particles can replace only this visual layer. */
#board .card-attack-fx-layer,#board .card-attack-ghost,
#board .card-attack-defeated,#board .card-attack-spark{pointer-events:none!important}
#board .card-attack-ghost{filter:drop-shadow(0 5px 5px #111726d0) drop-shadow(0 0 6px #ffe29a8c)}
#board .card-attack-defeated{filter:drop-shadow(0 0 7px #ffe0a0)}
@media(prefers-reduced-motion:reduce){
 #board .card-attack-fx-layer{display:none!important}
}

/* V0.4.7 — selected card inspector. Fixed overlay never shrinks the game board. */
#unitPopover[hidden]{display:none!important}
#unitPopover{
 position:fixed;left:0;top:0;z-index:90;box-sizing:border-box;
 width:min(278px,calc(100vw - 16px));max-height:min(66dvh,360px);
 overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
 padding:0;border:2px solid #efd19d;border-radius:8px;
 background:#1e2d43f7;color:#f5f3e7;
 box-shadow:0 8px 24px #070f1ddc,3px 3px 0 #09121f;
 touch-action:pan-y;-webkit-overflow-scrolling:touch;
}
#unitPopover .unit-popover-header{
 position:sticky;top:0;z-index:1;display:flex;align-items:center;
 justify-content:space-between;gap:5px;min-height:37px;padding:4px 6px;
 border-bottom:1px solid #9c9e9f;background:#263a52;
}
#unitPopover .unit-popover-header strong{font-size:12px;white-space:nowrap;color:#ffe1a5}
#unitPopover .unit-popover-actions{display:flex;gap:5px;align-items:center}
#unitPopover .unit-popover-sell{
 border:1px solid #ffd4a5;border-radius:5px;background:#a94639;color:#fff4db;
 font-size:11px;font-weight:950;min-height:30px;padding:3px 8px;
 white-space:nowrap;touch-action:manipulation;
}
#unitPopover .unit-popover-close{
 border:1px solid #9faec4;border-radius:5px;background:#314a63;color:#fff;
 min-width:30px;min-height:30px;padding:2px 5px;touch-action:manipulation;
}
#unitPopover .unit-popover-content{padding:8px;font-size:11px;line-height:1.32}
#unitPopover .unit-popover-identity{display:flex;gap:8px;align-items:center}
#unitPopover .unit-popover-identity img{
 width:55px;height:64px;object-fit:cover;flex:none;border:2px solid #d3b378;border-radius:5px;
}
#unitPopover .unit-popover-identity>div{min-width:0}
#unitPopover .unit-popover-identity b{display:block;font-size:13px;color:#ffe09c}
#unitPopover .unit-popover-identity small{display:block;color:#b4dfd5;font-size:10px}
#unitPopover .unit-popover-identity p{margin:4px 0 0;color:#d8dce4;font-size:10px}
#unitPopover .unit-popover-stats{display:flex;flex-wrap:wrap;gap:4px;margin:7px 0}
#unitPopover .unit-popover-stats span{
 border:1px solid #476075;border-radius:4px;padding:3px 5px;
 background:#102239;color:#e7f7ff;font-size:10px;
}
#unitPopover .unit-popover-skill{margin:5px 0 0}
#unitPopover .unit-popover-skill b{display:block;color:#ffda8c}
#unitPopover .unit-popover-skill span{display:block;margin-top:3px;color:#cdd9e8}
#unitPopover .unit-popover-equip{margin:7px 0 0;color:#fbd38c}
@media (orientation:landscape) and (pointer:coarse) and (max-height:640px){
 #unitPopover{width:min(240px,calc(100vw - 16px));max-height:64dvh}
 #unitPopover .unit-popover-identity img{width:44px;height:52px}
 #unitPopover .unit-popover-content{padding:6px}
}

/* V0.4.8 — playful victory/defeat banners. Same instance, interchangeable skins. */
#outcomeOverlay.outcome.has-banner{
 position:absolute;inset:0;z-index:9;display:grid;place-items:center;
 background:#0a1126b3;border:0;border-radius:0;pointer-events:none;
 isolation:isolate;overflow:hidden;
}
#outcomeOverlay.has-banner .outcome-card{
 position:absolute!important;width:1px!important;height:1px!important;min-width:0!important;
 overflow:hidden!important;clip-path:inset(50%)!important;
 padding:0!important;margin:-1px!important;border:0!important;white-space:nowrap;
}
#resultBannerImage[hidden]{display:none!important}
#resultBannerImage{
 width:min(94%,770px);max-width:100%;max-height:88%;object-fit:contain;
 filter:drop-shadow(0 8px 17px #0009);
 animation:cuteResultEnter .48s cubic-bezier(.15,1.2,.3,1) both;
}
@keyframes cuteResultEnter{
 0%{opacity:0;transform:translateY(14px) scale(.73) rotate(-3deg)}
 68%{opacity:1;transform:translateY(-3px) scale(1.045) rotate(1deg)}
 100%{opacity:1;transform:translateY(0) scale(1) rotate(0deg)}
}
@media (orientation:landscape) and (pointer:coarse) and (max-height:640px){
 #resultBannerImage{width:min(92%,630px);max-height:90%}
}
@media (prefers-reduced-motion:reduce){
 #resultBannerImage{animation:none!important}
}