/* 戰鬥盤配置：對齊本機練習版 (play/)：左右區域群＋中央舞台＋底部大手牌。
   所有尺寸由 .duel-mat 容器 (container-type:size) 推算，任何螢幕都按比例縮放。
   載入順序在 style.css 之後；只作用於 body.battle-view 內的 .ws-* 新結構。 */
.battle-view .duel-mat{grid-template-rows:minmax(0,1fr) clamp(14px,3.2cqh,26px) minmax(0,1.3fr)!important;position:relative}
.battle-view .duel-mat>.ws-side,.battle-view .duel-mat>.ws-public-zones{
  --sh:clamp(38px,min(14.2cqh,calc(29cqw - 10px),190px),190px);   /* 舞台格高 */
  --sw:calc(var(--sh)*.72);                                         /* 舞台格寬 */
  --side:clamp(76px,15.5cqw,230px);                                 /* 兩側區域欄寬 */
  --u:clamp(7px,1.55cqh,16px);                                      /* 文字基準 */
  --hand-h:clamp(46px,17.5cqh,175px);
  --opp-hand-h:clamp(14px,5cqh,44px);
  --cz:1;                                                           /* 區域格縮放（窄螢幕縮小） */
}
.battle-view .ws-side{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;margin:0!important;box-shadow:none!important;display:flex;flex-direction:column;align-items:stretch;min-height:0;min-width:0;height:100%;overflow:visible;gap:calc(var(--u)*.2)}
.battle-view .ws-half{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,var(--side)) auto minmax(0,var(--side));justify-content:center;align-items:center;column-gap:calc(var(--sh)*.14)}
.battle-view .ws-col-side{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--sh)*.07);min-width:0;min-height:0}
.battle-view .ws-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--sh)*.05)}
.battle-view .ws-stage-row{display:flex;justify-content:center;gap:calc(var(--sh)*.09)}

/* 深綠色矩形格（舞台格／區域格共用） */
.battle-view .ws-half .ws-mat-slot,.battle-view .ws-half .slot{
  position:relative;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:2px;margin:0!important;
  width:var(--sw)!important;min-width:var(--sw)!important;max-width:var(--sw)!important;
  height:var(--sh)!important;min-height:var(--sh)!important;max-height:var(--sh)!important;
  background:#5d826d;border:1px solid #486957;border-radius:2px;box-shadow:inset 0 0 0 1px #72998355;overflow:visible;
  transition:box-shadow .15s,border-color .15s,background .15s,transform .15s}
.battle-view .ws-half button.ws-mat-slot{cursor:pointer;color:inherit}
.battle-view .ws-half .ws-mat-slot.horiz,.battle-view .ws-half .climax-slot{
  position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;transform:none!important;
  width:var(--sh)!important;min-width:var(--sh)!important;max-width:var(--sh)!important;
  height:var(--sw)!important;min-height:var(--sw)!important;max-height:var(--sw)!important}
.battle-view .ws-half .slot.in-battle{border:2px solid #ffe066;box-shadow:0 0 14px #ffe066aa}
.battle-view .ws-half .slot.drop-target{border:2px dashed #fff59d;box-shadow:0 0 12px #ffe875aa;background:#68947b;outline:0}
.battle-view .ws-half .slot.drag-over,.battle-view .ws-half .climax-slot.drag-over{border:2px solid #fff;background:#79ad8f;box-shadow:0 0 18px #ffffffcc}
.battle-view .ws-half .ws-slot-label,.battle-view .ws-half .slot>small{position:absolute;bottom:2px;right:4px;left:auto;top:auto;font-size:calc(var(--u)*.78);color:#b8d1c2;pointer-events:none;text-shadow:0 1px 1px #0008;display:block}
.battle-view .ws-half .cx-label{position:static;font-size:calc(var(--u)*.95);color:#cfe5d8}
.battle-view .ws-half .slot.drop-target:after{font-size:calc(var(--u)*.85);bottom:2px;left:2px;padding:1px 4px}

/* 格內的卡片貼滿格子 */
.battle-view .ws-half .ws-mat-slot .card,.battle-view .ws-half .slot .card{
  width:100%!important;min-width:0!important;max-width:100%!important;height:100%!important;min-height:0!important;max-height:100%!important;
  padding:0!important;margin:0!important;border-radius:3px;flex:none}
.battle-view .ws-half .ws-mat-slot .card img,.battle-view .ws-half .slot .card img{width:100%!important;height:100%!important;object-fit:cover!important}
.battle-view .ws-half .climax-slot .card,.battle-view .ws-half .memory-slot .card{width:var(--sw)!important;height:var(--sh)!important;max-width:none!important;max-height:none!important;transform:rotate(-90deg);flex:none}
.battle-view .ws-half .card .card-name{font-size:calc(var(--u)*.78)!important}
.battle-view .ws-half .card .card-stats{font-size:calc(var(--u)*.74)!important;padding:0 1px!important}
.battle-view .ws-half .card .pos-badge{font-size:calc(var(--u)*.7)}

/* 區域群：休息室／牌庫／庫存＋高潮區 */
.battle-view .ws-zone-row{display:flex;align-items:center;justify-content:center;gap:calc(var(--sh)*.06);min-width:0}
.battle-view .ws-counter-stack{display:flex;flex-direction:column;align-items:center;line-height:1.12;min-width:0}
.battle-view .red-counter{color:#d11515;font-size:calc(var(--u)*1.55);font-weight:800;text-shadow:0 1px 0 #ffffff80}
.battle-view .cx-counter,.battle-view .hand-counter{color:#18201c;font-size:calc(var(--u)*.98);font-weight:700;white-space:nowrap}
.battle-view .deck-3d{position:relative;flex:none;width:calc(var(--sw)*.88);height:calc(var(--sh)*.88);border-radius:4px;background:linear-gradient(145deg,#2a312d,#121715);border:1px solid #75827b;
  box-shadow:-4px 4px 0 #3d4742,-7px 7px 0 #262e2a,-8px 9px 5px #0006;display:flex;align-items:center;justify-content:center;transform:rotate(-5deg);margin-left:4px}
.battle-view .deck-3d:before{content:"Weiβ Schwarz";font-size:calc(var(--u)*.78);font-weight:800;color:#cfd8d3;border:1px solid #6b7871;padding:1px 3px;border-radius:2px;background:#1b221fcc;text-align:center;line-height:1.1}
.battle-view .deck-3d.low-deck{border-color:#ff7b6b;box-shadow:-4px 4px 0 #6e2d26,-7px 7px 0 #421915,-8px 9px 6px #f006}
.battle-view .ws-stock-area{display:flex;align-items:center;gap:4px;background:transparent;border:0;padding:0;color:inherit;cursor:pointer}
.battle-view .stock-stack{display:flex;flex-direction:column;gap:2px}
.battle-view .stock-card-back{display:block;height:calc(var(--u)*.85);width:calc(var(--sw)*.62);min-width:22px;background:linear-gradient(90deg,#232b27,#3a4740);border:1px solid #8ca196;border-radius:2px;box-shadow:1px 1px 2px #0005}

/* 等級／時計框 */
.battle-view .ws-lv-clock{display:flex;flex-direction:column;gap:calc(var(--u)*.3);width:100%;max-width:var(--side);background:#5d826d;border:1px solid #486957;padding:calc(var(--u)*.4) calc(var(--u)*.5);border-radius:3px;box-sizing:border-box}
.battle-view .ws-lc-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:2px;font-size:calc(var(--u)*.85);font-weight:700;color:#eff7f2;line-height:1.2}
.battle-view .ws-lc-cards{display:flex;gap:2px;flex-wrap:wrap;align-items:center;min-height:calc(var(--u)*1.9)}
.battle-view .ws-lc-label{font-size:calc(var(--u)*.85);color:#eff7f2;margin-right:1px}
.battle-view .mini-card{padding:0 2px;font-size:calc(var(--u)*.78);min-width:calc(var(--u)*1.6);height:calc(var(--u)*1.9);border-radius:3px;background:#20382e;color:#fff;border:1px solid #6d9683;line-height:1}
.battle-view .mini-card.color-Yellow{background:#6b5a12}.battle-view .mini-card.color-Red{background:#6a2424}.battle-view .mini-card.color-Green{background:#1f5632}.battle-view .mini-card.color-Blue{background:#1f4668}
.battle-view .mini-slot{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--u)*1.6);height:calc(var(--u)*1.9);border:1px dashed #8ab09a;border-radius:2px;font-size:calc(var(--u)*.7);color:#b8d4c3}
.battle-view .color-badges{display:flex;gap:2px}
.battle-view .ws-lv-clock .color-pill{font-size:calc(var(--u)*.74);padding:0 4px;border-radius:99px;font-weight:700;border:1px solid #fff6;color:#fff}
.battle-view .ws-lv-clock .color-pill.color-Yellow{background:#665518;color:#ffea9f}.battle-view .ws-lv-clock .color-pill.color-Green{background:#1c4d2c;color:#aff7c6}
.battle-view .ws-lv-clock .color-pill.color-Red{background:#612020;color:#ffb8b3}.battle-view .ws-lv-clock .color-pill.color-Blue{background:#1b3e5c;color:#b5dcff}
.battle-view .ws-lv-clock .color-pill.color-none{background:#344a40;color:#b8ccc2}

/* 手牌：自己的大手牌托盤（青色框）＋對手的小卡背列 */
.battle-view .ws-hand-tray{display:flex;align-items:center;justify-content:center;gap:calc(var(--sh)*.06);box-sizing:border-box;min-width:0;overflow:hidden}
.battle-view .ws-side-own .ws-hand-tray{height:var(--hand-h);flex:0 0 auto;margin:0 calc(var(--side)*.1);padding:calc(var(--u)*.45) calc(var(--u)*.8);
  background:#5d826d;border:2px solid #2ee6d6;box-shadow:0 0 8px #2ee6d655,inset 0 0 10px #0005;border-radius:4px}
.battle-view .ws-side-own .ws-hand-tray.empty{opacity:.55}
.battle-view .ws-side-own .ws-hand-tray .card{height:100%!important;width:auto!important;aspect-ratio:.72;max-width:none!important;min-width:0!important;flex:0 1 auto;padding:0!important;margin:0!important;overflow:visible;border-radius:4px}
.battle-view .ws-side-own .ws-hand-tray .card img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:3px}
.battle-view .ws-side-own .ws-hand-tray .card .card-name{font-size:calc(var(--u)*.85)!important}
.battle-view .ws-side-own .ws-hand-tray .card .card-stats{font-size:calc(var(--u)*.8)!important}
.battle-view .ws-hand-tray .inline-selectable{border-color:#b8f5dc;cursor:pointer}
.battle-view .ws-hand-tray .inline-selected{border:2px solid #fff380!important;transform:translateY(-6px);box-shadow:0 0 16px 4px #ffe659cc,0 -14px 18px 2px #fff9b3aa}
.battle-view .ws-side-opp .ws-hand-tray{height:var(--opp-hand-h);flex:0 0 auto;gap:calc(var(--u)*.4)}
.battle-view .ws-side-opp .ws-hand-tray .card-back{height:100%!important;width:auto!important;aspect-ratio:.72;min-width:0!important;max-width:none!important;padding:0!important;flex:0 0 auto;border-radius:2px}

/* 動作列（完成／下一步按鈕）置中 */
.battle-view .ws-side-own .ws-action-bar{display:flex;justify-content:center;align-items:center;gap:6px;margin:0;flex:0 0 auto;min-height:0}
.battle-view .ws-side-own .ws-action-bar :is(.ws-done-btn,.ws-cancel-btn){font-size:clamp(11px,2.1cqh,17px);padding:calc(var(--u)*.35) calc(var(--u)*2.2);border-radius:7px;line-height:1.2;max-width:100%;white-space:normal}

/* 中央提示：白字黑邊 */
.battle-view .ws-center-prompt{font-size:clamp(11px,2.5cqh,20px);font-weight:800;color:#fff;text-shadow:-1.5px -1.5px 0 #000,1.5px -1.5px 0 #000,-1.5px 1.5px 0 #000,1.5px 1.5px 0 #000,0 2px 5px #000a}

/* 公開判定區（處理中／傷害／觸發／標記）：浮在中央列，不影響版面 */
.battle-view .ws-public-zones{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:12;display:flex;gap:10px;pointer-events:none;max-width:90%}
.battle-view .ws-public-group{background:#12261dd9;border:1px solid #6d9683;border-radius:6px;padding:3px 6px;color:#eaf6ef;pointer-events:auto}
.battle-view .ws-public-group small{display:block;font-size:calc(var(--u)*.85);margin-bottom:2px}
.battle-view .ws-public-cards{display:flex;gap:3px}
.battle-view .ws-public-cards .card{width:calc(var(--sw)*.72)!important;height:calc(var(--sh)*.72)!important;min-width:0!important;padding:0!important}
.battle-view .ws-public-cards .card img{width:100%!important;height:100%!important;object-fit:cover!important}

/* 區域檢視視窗 */
.zone-viewer{max-height:62vh;overflow:auto}
.zone-viewer .card{width:96px}

/* 區域格（休息室／回憶／高潮）略小於舞台格，三格直排後不超過舞台高度 */
.battle-view .duel-mat>.ws-side{--zh:calc(var(--sh)*.8);--zw:calc(var(--zh)*.72)}
.battle-view .ws-half .ws-col-side .ws-mat-slot:not(.slot){width:var(--zw)!important;min-width:var(--zw)!important;max-width:var(--zw)!important;height:var(--zh)!important;min-height:var(--zh)!important;max-height:var(--zh)!important}
.battle-view .ws-half .ws-col-side .ws-mat-slot.horiz,.battle-view .ws-half .ws-col-side .climax-slot{width:var(--zh)!important;min-width:var(--zh)!important;max-width:var(--zh)!important;height:var(--zw)!important;min-height:var(--zw)!important;max-height:var(--zw)!important}
.battle-view .ws-half .ws-col-side .climax-slot .card,.battle-view .ws-half .ws-col-side .memory-slot .card{width:var(--zw)!important;height:var(--zh)!important}
.battle-view .ws-half .deck-3d{width:calc(var(--zw)*.9);height:calc(var(--zh)*.9)}

/* 窄螢幕（容器寬度 < 640px）：同一配置等比縮小，區域群改直排，不互相重疊 */
@container (max-width:640px){
  .battle-view .duel-mat>.ws-side,.battle-view .duel-mat>.ws-public-zones{
    --sh:clamp(34px,calc(23.5cqw - 4px),110px);--side:calc(21.5cqw);--u:clamp(6px,1.3cqh,11px);--cz:.0}
  .battle-view .ws-half{column-gap:calc(var(--sh)*.08)}
  .battle-view .ws-col-side{gap:2px;justify-content:center}
  .battle-view .ws-zone-row{flex-direction:column;gap:1px}
  .battle-view .ws-side .ws-half .ws-col-side .ws-mat-slot:not(.slot){width:calc(var(--side)*.66)!important;min-width:0!important;max-width:none!important;height:calc(var(--side)*.66*1.33)!important;min-height:0!important;max-height:none!important}
  .battle-view .ws-side .ws-half .ws-col-side .ws-mat-slot.horiz,.battle-view .ws-side .ws-half .ws-col-side .climax-slot{width:calc(var(--side)*.96)!important;height:calc(var(--side)*.68)!important;min-height:0!important;max-height:none!important;max-width:none!important}
  .battle-view .ws-half .climax-slot .card,.battle-view .ws-half .memory-slot .card{width:calc(var(--side)*.64)!important;height:calc(var(--side)*.9)!important}
  .battle-view .ws-half .deck-3d{width:calc(var(--side)*.5);height:calc(var(--side)*.7);margin:0 0 0 3px}
  .battle-view .deck-3d:before{font-size:6px;padding:0 1px}
  .battle-view .stock-card-back{width:calc(var(--side)*.5);min-width:0}
  .battle-view .ws-lv-clock{max-width:none;padding:2px}
  .battle-view .ws-lv-clock .color-badges{display:none}
  .battle-view .ws-lc-cards{gap:1px}
  .battle-view .mini-card,.battle-view .mini-slot{min-width:0;width:calc(var(--side)*.19);height:calc(var(--side)*.24);font-size:6px}
  .battle-view .red-counter{font-size:calc(var(--u)*1.6)}
  .battle-view .cx-counter,.battle-view .hand-counter{font-size:calc(var(--u)*.9)}
  .battle-view .ws-side-own .ws-hand-tray{margin:0 2px;padding:3px}
}

/* 低高度（短橫向手機）：縮小格子與手牌，雙方舞台仍完整可見 */
@container (max-height:430px){
  .battle-view .duel-mat>.ws-side,.battle-view .duel-mat>.ws-public-zones{
    --sh:clamp(28px,min(11cqh,calc(22cqw)),100px);--hand-h:clamp(38px,15cqh,80px);--opp-hand-h:clamp(9px,3.5cqh,22px)}
  .battle-view .ws-side-own .ws-action-bar :is(.ws-done-btn,.ws-cancel-btn){font-size:clamp(9px,3.4cqh,13px);padding:1px 12px}
}

@container (max-width:640px){
  .battle-view .ws-lc-cards{flex-wrap:nowrap;min-height:0}
  .battle-view .ws-lc-label{display:none}
  .battle-view .mini-card,.battle-view .mini-slot{flex:1 1 0;width:auto;min-width:0;max-width:calc(var(--side)*.17);height:calc(var(--side)*.22);font-size:5px;padding:0;overflow:hidden}
  .battle-view .ws-lc-header{font-size:calc(var(--u)*.8)}
}

@container (max-width:640px) and (min-height:431px) and (max-height:640px){
  .battle-view .duel-mat>.ws-side{--sh:clamp(28px,min(10.6cqh,calc(23.5cqw - 4px)),90px);--hand-h:clamp(44px,15cqh,100px)}
}

@container (max-width:640px) and (max-height:640px){
  .battle-view .cx-counter,.battle-view .hand-counter{display:none}
  .battle-view .ws-side .ws-half .ws-col-side .ws-mat-slot:not(.slot){width:calc(var(--side)*.58)!important;height:calc(var(--side)*.58*1.33)!important}
}

/* ===== 抽牌演出 ===== */
@keyframes wsDrawIn{0%{opacity:0;transform:translateY(-46px) scale(.62)}55%{opacity:1;transform:translateY(5px) scale(1.09)}100%{opacity:1;transform:none}}
@keyframes wsDrawGlow{0%,100%{box-shadow:0 0 0 0 #ffe66000}30%{box-shadow:0 0 0 3px #ffe660,0 0 22px 6px #ffe660aa}}
.battle-view .ws-hand-tray .card.fx-draw{animation:wsDrawIn .55s cubic-bezier(.2,.8,.2,1) both,wsDrawGlow 1.4s ease-out both;z-index:3}
.battle-view .ws-side-opp .ws-hand-tray .card-back.fx-draw{animation:wsDrawIn .5s cubic-bezier(.2,.8,.2,1) both,wsDrawGlow 1.2s ease-out both}
.ws-toast{position:fixed;transform:translate(-50%,-100%);z-index:90;pointer-events:none;padding:4px 14px;border-radius:99px;font-weight:800;font-size:15px;color:#2b2200;background:#ffe66b;border:2px solid #fff6c4;box-shadow:0 3px 12px #0007;animation:wsToast 1.6s ease-out both;white-space:nowrap}
.ws-toast-opp{background:#bfe3ff;border-color:#eaf6ff;color:#0d2a40}
@keyframes wsToast{0%{opacity:0;transform:translate(-50%,-70%) scale(.8)}15%{opacity:1;transform:translate(-50%,-100%) scale(1.06)}75%{opacity:1;transform:translate(-50%,-125%)}100%{opacity:0;transform:translate(-50%,-150%)}}

/* ===== 判定／傷害逐張翻牌 ===== */
.ws-reveal{position:fixed;z-index:80;pointer-events:none;display:none;align-items:center;justify-content:center}
.ws-reveal.show{display:flex}
.ws-reveal-box{position:absolute;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 16px 14px;border-radius:14px;background:#0f1f19ee;border:2px solid #7fc4a3;box-shadow:0 12px 40px #000a;opacity:0;transform:translateY(14px) scale(.9);transition:opacity .3s,transform .3s;max-width:30%}
.ws-reveal-box.ws-reveal-opp{right:1.5%;top:12%}
.ws-reveal-box.ws-reveal-own{left:1.5%;bottom:21%}
.ws-reveal-box.ws-reveal-center{left:50%;top:50%;max-width:92%;margin:0;translate:-50% -50%;box-shadow:0 12px 40px #000a,0 0 0 100vmax #0003}
.ws-flip-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.ws-reveal-box.multi .ws-flip{width:clamp(80px,15vh,140px)}
.ws-reveal-box.in{opacity:1;transform:none}
.ws-reveal-box.out{opacity:0;transform:translateY(-10px) scale(.95)}
.ws-reveal-damage{border-color:#e07a6b}.ws-reveal-trigger{border-color:#f0cf75}
.ws-reveal-title{font-size:clamp(13px,2.4vh,20px);font-weight:800;color:#fff;text-shadow:0 1px 3px #000}
.ws-reveal-sub{min-height:1.4em;font-size:clamp(12px,2.1vh,17px);color:#dff3ea;font-weight:700}
.ws-reveal-sub.result{color:#ffe27a;font-size:clamp(14px,2.6vh,22px)}
.ws-flip{width:clamp(110px,24vh,210px);aspect-ratio:.72;perspective:900px}
.ws-flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,.7,.2,1)}
.ws-flip-inner.flipped{transform:rotateY(180deg)}
.ws-flip-face{position:absolute;inset:0;border-radius:8px;backface-visibility:hidden;overflow:hidden;box-shadow:0 4px 18px #000b}
.ws-flip-back{background:var(--ws-card-back-url,none) center/cover,linear-gradient(145deg,#2a312d,#121715);border:2px solid #8fa398}
.ws-flip-front{transform:rotateY(180deg);background:#12241e;border:2px solid #fff}
.ws-flip-front img{width:100%;height:100%;object-fit:cover;display:block}
.ws-flip-name{position:absolute;left:0;right:0;bottom:0;padding:2px 4px;background:#000b;color:#fff;font-size:clamp(9px,1.7vh,13px);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== 區域檢視視窗（休息室／回憶／等級／時計）：寬、有預覽、不擁擠 ===== */
dialog#detail.zone-dialog{width:min(1120px,96vw);max-width:96vw;max-height:90vh;padding:16px 18px;overflow:hidden;display:flex;flex-direction:column}
dialog#detail.zone-dialog #detail-content{overflow:hidden;display:flex;flex-direction:column;min-height:0;flex:1}
.zv-head{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}.zv-head h2{margin:0;font-size:20px}.zv-count{color:#bfe3d2;font-weight:700}
.zv-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:16px;min-height:0;flex:1;overflow:hidden}
.zv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px;align-content:start;overflow:auto;padding:4px 6px 10px 2px;max-height:68vh}
.zv-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:5px;border-radius:8px;background:#1b3029;border:2px solid #3e6455;color:#eaf6ef;cursor:pointer;text-align:center;min-width:0}
.zv-item img{width:100%;aspect-ratio:.72;object-fit:cover;border-radius:5px;display:block}
.zv-item.active{border-color:#ffe27a;box-shadow:0 0 14px #ffe27a88}
.zv-name{font-size:11.5px;line-height:1.3;width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.zv-preview{overflow:auto;max-height:68vh;background:#13241e;border:1px solid #3e6455;border-radius:10px;padding:10px}
.zv-preview img{width:100%;border-radius:8px;display:block;margin-bottom:8px}
.zv-text h3{margin:4px 0;font-size:16px}.zv-text small{display:block;color:#b8d6c7;margin-bottom:6px}.zv-text p{font-size:12.5px;line-height:1.65;white-space:pre-wrap;margin:6px 0}
@media(max-width:760px){.zv-wrap{grid-template-columns:minmax(0,1fr)}.zv-preview{display:none}.zv-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));max-height:70vh}}
dialog#detail.zone-dialog #detail-content img{float:none!important;margin:0!important;width:100%!important;max-width:100%}
dialog#detail.zone-dialog #detail-content{white-space:normal}
dialog#detail.zone-dialog .zv-item img{aspect-ratio:.72;height:auto!important}
dialog#detail.zone-dialog #detail-close{margin-bottom:6px}

/* ===== 卡片移動：離開／進入任何區域的飛行與區域閃光 ===== */
.ws-fly{position:fixed;z-index:85;pointer-events:none;border-radius:6px;overflow:visible;will-change:transform,opacity;filter:drop-shadow(0 6px 10px #000a)}
.ws-fly img{width:100%;height:100%;object-fit:cover;border-radius:6px;border:2px solid #fff;display:block;box-shadow:0 0 14px #ffffffaa}
.ws-fly-back{background:var(--ws-card-back-url,none) center/cover,linear-gradient(145deg,#2a312d,#121715);border:2px solid #9fb2a8;box-shadow:0 0 14px #ffffff88}
.ws-fly-count{position:absolute;right:-8px;top:-8px;min-width:22px;padding:1px 6px;border-radius:99px;background:#ffd84d;color:#111;font-size:12px;font-weight:800;text-align:center;border:1px solid #000}
@keyframes wsPulseOut{0%{box-shadow:0 0 0 0 #ff9a4a00}25%{box-shadow:0 0 0 3px #ff9a4a,0 0 22px 6px #ff9a4ab0}100%{box-shadow:0 0 0 0 #ff9a4a00}}
@keyframes wsPulseIn{0%{box-shadow:0 0 0 0 #6bf2a800}25%{box-shadow:0 0 0 3px #6bf2a8,0 0 22px 6px #6bf2a8b0}100%{box-shadow:0 0 0 0 #6bf2a800}}
.battle-view .ws-pulse-out{animation:wsPulseOut .65s ease-out}
.battle-view .ws-pulse-in{animation:wsPulseIn .65s ease-out}