/* Pack Legends：バトル画面と手札のドット部品（画像は bui.js が --bui-* に作る）。角丸・グラデ・ぼかしは使わない */

/* 1) カードの絵の窓の背景は yami.html の .art.tb の行（var(--tbg) の url は この css の場所で解決されてしまうので ここには書かない） */

/* 2) コスト：ドットの宝珠＋ドットの数字（画像は .cost[data-n] に bui.js が付ける） */
.card .cost{border:0!important;border-radius:0!important;background-color:transparent!important;background-repeat:no-repeat!important;background-position:center!important;background-size:100% 100%!important;box-shadow:none!important;font-size:0!important;color:transparent!important;text-shadow:none!important;image-rendering:pixelated;filter:drop-shadow(0 .14em 0 rgba(11,8,24,.75))}

/* 3) 場のカード：かばう（盾）は 枠の外に 鋼色のかたい縁＋盾のマーク。ずっと効く効果・凍結中は 小さなドットのマーク */
.bcard.taunt{outline:none;border-radius:0;box-shadow:0 0 0 .1em #0b0818,0 0 0 .26em #9fd8ff,0 0 0 .36em #2a3a5a,0 0 0 .46em #0b0818,0 .35em 0 rgba(0,0,0,.55)}
.bcard.foe.taunt{box-shadow:0 0 0 .1em #0b0818,0 0 0 .26em #9fd8ff,0 0 0 .36em #2a3a5a,0 0 0 .46em #0b0818,0 0 0 .58em #ff6a8a,0 .35em 0 rgba(0,0,0,.55)}
.bcard .bc-kw{position:absolute;left:3%;right:3%;top:auto;bottom:25.5%;display:flex;flex-wrap:wrap-reverse;justify-content:center;align-content:flex-start;gap:.08em;z-index:3;pointer-events:none}
.bcard .bc-kw img{display:block;height:1.6em;width:auto;image-rendering:pixelated;flex:none}
.bcard.frz{filter:saturate(.45) brightness(1.12)}
.bcard.frz::after{background:#bfefff33!important}

/* 4) HUD：HP ゲージ・マナの宝珠・山札の束（ドットの部品と ドットの数字） */
.hpbar{height:18px!important;border-radius:0!important;border:2px solid #0b0818!important;background:var(--bui-hpBack) 0 0/12px 14px repeat-x #1c1030!important;box-shadow:0 2px 0 #0b0818;overflow:hidden;image-rendering:pixelated}
.hpbar i{background:var(--bui-hpR) 0 0/12px 14px repeat-x #e0405a!important;transition:width .35s steps(6)!important;border-right:2px solid #0b0818;box-sizing:border-box}
#pHpWrap .hpbar i{background:var(--bui-hpG) 0 0/12px 14px repeat-x #38c860!important}
.hpbar span{display:flex!important;align-items:center;justify-content:center;font-size:0!important;line-height:0!important;text-shadow:none!important}
.hpbar span img,.bnum{display:block;image-rendering:pixelated;flex:none;pointer-events:none}
#pHpWrap>span:first-child{font-family:var(--f-deco,'DotGothic16',sans-serif);font-weight:400;text-shadow:1px 0 #0b0818,-1px 0 #0b0818,0 1px #0b0818,0 -1px #0b0818,0 2px #0b0818}
#energy{gap:2px!important}
#energy i{width:22px!important;height:22px!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:var(--bui-orb) 0 0/100% 100% no-repeat!important;image-rendering:pixelated;filter:drop-shadow(0 2px 0 #0b0818)}
#energy i.off{background-image:var(--bui-orbOff)!important}
.deckIc{width:34px!important;height:44px!important;background:var(--bui-deck) 0 4px/30px 38px no-repeat;image-rendering:pixelated;filter:drop-shadow(0 2px 0 #0b0818)}
.deckIc i{display:none!important}
.deckIc b{left:auto!important;right:-6px!important;top:auto!important;bottom:-4px!important;width:auto!important;height:auto!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;display:block!important;font-size:0!important;text-shadow:none!important}

/* 5) 場のカードの下の段：左下に 攻撃（剣の紋章）・右下に 体力（ハート）。形の中に 太いドットの数字（画像は bui.js の statURL）。
      カードは 傾けず 正面を向いた平らな板。紋章も そのまま正面。大きさは 1ドット＝--bs（JS が 端末の画素の整数倍にする）。
      まん中は 効果の印（unitMarks）のまま */
.bcard .bc-atk,.bcard .bc-hp{position:absolute;bottom:0;width:calc(var(--bs,2px) * 19);height:calc(var(--bs,2px) * 19);padding:0;margin:0;border:0;background:none!important;box-shadow:none;font-size:0;line-height:0;color:transparent;text-shadow:none;display:block;transform:none;z-index:5;pointer-events:none}
.bcard .bc-atk img,.bcard .bc-hp img{display:block;width:100%;height:100%;image-rendering:pixelated;filter:drop-shadow(0 var(--bs,2px) 0 rgba(11,8,24,.8))}
.bcard .bc-atk{left:0}
.bcard .bc-hp{right:0}
/* 5a) 枠と一体の 下の段：枠の色で 縁どった 暗い板。攻撃・体力の紋章は この板の 左右に はめこむ（枠の外に はみ出さない）。属性は 絵の窓の 左上の台座 */
.bcard .bc-art{bottom:13%!important}   /* 紋章の上半分は 絵に かぶせる（シャドウバース風） */
.bcard .bc-band{position:absolute;left:-.32em;right:-.32em;bottom:-.32em;z-index:2;pointer-events:none;line-height:0}
.bcard .bc-band img{display:block;width:100%;height:auto;image-rendering:pixelated}
.bcard .bc-atk,.bcard .bc-hp{display:none!important}
.bcard .bc-el{left:2%!important;top:2%!important;width:30%!important;border:.12em solid var(--fc,#fff)!important;box-shadow:0 0 0 .08em #0b0818;z-index:3}
.bcard .bc-lv{right:auto!important;left:5%;top:34%}   /* 強化の＋は 属性の丸の下（右はしは 効果の印） */
.bcard .bc-kw{left:3%;right:3%;bottom:31%;top:auto;height:auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.06em;z-index:4}
.bcard .bc-kw{left:auto!important;right:2%!important;top:3%!important;bottom:auto!important;width:auto!important;min-height:0!important;flex-direction:column!important;align-items:flex-end!important;justify-content:flex-start!important}   /* 効果の印は 絵の窓の 右はしに 縦に（絵と 数字を 隠さない） */
.bcard .bc-kw .kr{flex-direction:column!important;align-items:flex-end}
.bcard .bc-kw img{height:min(var(--mh,1.2em),1.15em)!important}
.bcard .bc-kw .kr{display:flex;flex:none;width:max-content;height:auto;aspect-ratio:auto;border:0;background:none;border-radius:0;justify-content:center;gap:.06em}   /* 古い .bc-kw span（暗い四角）を 打ち消す：絵を 暗く隠していた */
.bcard .bc-kw img{height:var(--mh,1.6em);filter:drop-shadow(0 .08em 0 #0b0818)}

/* 5b) 場のカードの厚み：下へ 3段の ドットの側面（明るい縁→金属→暗い底）＋ 置いた台への 影。ぷかぷか浮かせない */
.bcard{--slab:0 .1em 0 #4a4478,0 .2em 0 #2c2850,0 .3em 0 #1c1838,0 .4em 0 #0b0818,0 .58em 0 rgba(5,3,12,.55);box-shadow:var(--slab)!important}
.bcard.foe{box-shadow:0 0 0 .14em #ff6a8a,0 .1em 0 .14em #a83a5a,0 .2em 0 .14em #5a1a38,0 .3em 0 .14em #2a0c20,0 .4em 0 .14em #0b0818,0 .58em 0 .14em rgba(5,3,12,.55)!important}
.bcard.taunt{box-shadow:0 0 0 .1em #0b0818,0 0 0 .26em #9fd8ff,0 0 0 .36em #2a3a5a,0 0 0 .46em #0b0818,0 .2em 0 .46em #1c2440,0 .34em 0 .46em #0b0818,0 .5em 0 .46em rgba(5,3,12,.55)!important}
.bcard.foe.taunt{box-shadow:0 0 0 .1em #0b0818,0 0 0 .26em #9fd8ff,0 0 0 .36em #2a3a5a,0 0 0 .46em #0b0818,0 0 0 .58em #ff6a8a,0 .2em 0 .58em #5a1a38,0 .34em 0 .58em #0b0818,0 .5em 0 .58em rgba(5,3,12,.55)!important}

/* 5c) HP ゲージの中の まもり（青いゲージ）と その値 */
.hpbar b.blk{position:absolute;top:0;bottom:0;left:0;width:0;display:none;background:var(--bui-hpB) 0 0/12px 14px repeat-x #3aa0ff;border-left:2px solid #0b0818;box-sizing:border-box;transition:left .35s steps(6),width .35s steps(6);z-index:1;image-rendering:pixelated}
.hpbar b.blk.on{display:block}
.hpbar span{z-index:2}
em.blkN{display:none;align-items:center;gap:1px;flex:none;margin-left:-4px;padding:1px 3px 1px 2px;background:#0e1a3a;border:2px solid #0b0818;box-shadow:inset 0 0 0 1px #3aa0ff,0 2px 0 #0b0818;font-style:normal;pointer-events:none}
em.blkN.on{display:flex}
em.blkN svg{width:10px;height:12px;image-rendering:pixelated;display:block}
#bossBlock,#pBlock{display:none!important}

/* 5d) マナ：上限（6）まで いつも並べる。光る＝使える／くすむ＝このターン使った／黒い丸＝まだ届いていない */
#energy i.none{background-image:var(--bui-orbNone)!important;filter:none}

/* 5e) 使ったカードのログ：メニューの下に いつも出す 小さなドットのボタン */
#bLogBtn{top:calc(env(safe-area-inset-top) + 142px);left:auto;right:12px;width:36px;height:36px;padding:0}
#bLogBtn svg{width:20px;height:20px;image-rendering:pixelated;color:#e8e0ff}
#bLogBtn:disabled{opacity:.45;filter:grayscale(.6)}

/* 6) 今夜の属性：暗い幕＋真ちゅうの輪（canvas は bui.js の wx が描く）。文字は読みやすいまま、×1.5 などはドットの数字 */
#wxRoul{background:rgba(5,3,12,.9)!important;gap:10px!important}
#wxRoul h4{font-size:19px;color:#ffe08a;letter-spacing:.2em;text-shadow:2px 2px 0 #0b0818;padding:4px 14px;border-top:2px solid #8a5a1a;border-bottom:2px solid #8a5a1a}
#wxRing{display:block;image-rendering:pixelated}
#wxRoul .wxr{gap:12px;padding:4px 12px;background:#140e22;border:2px solid #0b0818;box-shadow:0 0 0 2px #8a5a1a,0 4px 0 #0b0818}
#wxRoul .wxr .slot{width:60px!important;height:60px!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:none!important;display:block}
#wxRoul .wxr .slot .wxc{display:block;width:60px;height:60px;image-rendering:pixelated}
#wxRoul .wxr .slot.land{animation:wxLand .24s steps(3)}
@keyframes wxLand{0%{transform:scale(1.33)}100%{transform:none}}
#wxRoul .wxr .lbl2{text-shadow:2px 2px 0 #0b0818}
#wxRoul .wxr .mul{display:flex;align-items:center}
#wxRoul .wxr .mul img{display:block;image-rendering:pixelated}

/* 7) カード名の帯（cardEl のカード すべて：手札・拡大・開封・店・一覧）：ドットの金属の帯＋金の縁（画像は bui.js の nameBand）。
      レア度で帯の色を少し変える。術は 8角形の枠に合わせて 角を斜めに落とした帯。長い名前は 字の数で 文字を小さくして はみ出さない（--nl） */
.card .nm{top:.5%;left:2%;right:2%;height:12.5%;padding:0 5% 0 20%;box-sizing:border-box;display:flex;align-items:center;z-index:1;
  --fs:min(.1127,calc(.84 / var(--nl,5)));font-size:calc(var(--cw,92px) * var(--fs));line-height:1;color:#fff;text-shadow:0 .09em 0 #0b0818,.06em 0 0 #0b0818,-.06em 0 0 #0b0818;letter-spacing:-.03em;white-space:nowrap;overflow:hidden}
.card .nm::before{content:"";position:absolute;inset:0;z-index:-1;border:solid transparent;border-width:calc(var(--cw,92px) * .06);border-image:var(--bui-nm1) 4 fill / calc(var(--cw,92px) * .06) stretch;image-rendering:pixelated}
.card.r0 .nm::before{border-image-source:var(--bui-nm0)}.card.r2 .nm::before{border-image-source:var(--bui-nm2)}.card.r3 .nm::before{border-image-source:var(--bui-nm3)}
.card.r4 .nm::before{border-image-source:var(--bui-nm4)}.card.r5 .nm::before{border-image-source:var(--bui-nm5)}.card.r6 .nm::before{border-image-source:var(--bui-nm6)}
.card.magic .nm{left:4%;right:4%;padding-right:7%}
.card.magic.r0 .nm::before{border-image-source:var(--bui-nmM0)}.card.magic.r1 .nm::before{border-image-source:var(--bui-nmM1)}.card.magic.r2 .nm::before{border-image-source:var(--bui-nmM2)}.card.magic.r3 .nm::before{border-image-source:var(--bui-nmM3)}
.card.magic.r4 .nm::before{border-image-source:var(--bui-nmM4)}.card.magic.r5 .nm::before{border-image-source:var(--bui-nmM5)}.card.magic.r6 .nm::before{border-image-source:var(--bui-nmM6)}
.card .nm>span{display:block;white-space:nowrap;transform-origin:0 50%;transform:scaleX(min(1,calc(.6 / (var(--nl,5) * var(--fs)))))}   /* 長い名前は 少し小さく＋横に つめる */
.card.magic .nm>span{transform:scaleX(min(1,calc(.56 / (var(--nl,5) * var(--fs)))))}

/* 名前の帯：縁は なし。暗い無地の帯＋白い字で、カードの絵の色と まざらない（レア度の色は 左端の細い線だけ） */
.card .nm::before,.card.magic .nm::before{border:none!important;border-image:none!important;background:linear-gradient(90deg,#0c0818f0,#1a1430e8 70%,#0c0818d8);box-shadow:inset calc(var(--cw,92px) * .025) 0 0 var(--rc,#8a84a8)}
/* 5c) 場のカードは 平ら（奥へ倒さない）。3D の重なりは 使わない */
.bcard{transform-style:flat!important}

/* 6b) つよい行の一言：売値 ×1.5（前のラウンドからのカード・上限）。375幅でも はみ出さないように 折り返す */
#wxRoul .wxr{flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 32px);box-sizing:border-box}
#wxRoul .wxr .wxNote{flex:0 0 100%;margin:-2px 0 2px;text-align:center;font-size:13px;font-weight:700;line-height:1.45;color:#f0e6ff;text-shadow:1px 1px 0 #0b0818;white-space:nowrap}
#wxRoul .wxr .wxNote:empty{display:none}
#wxRoul .wxr .wxNote b{font-size:15px;font-weight:900;color:#ffb35a}
#wxRoul .wxr .wxNote span{font-size:12px;color:#c8b8e8}
/* 背の低い画面（375×667 など）：一言の行が増えた分、すき間を詰めて「タップで つぎへ」を いちばん下へ */
@media (max-height:720px){#wxRoul{gap:6px!important;padding-bottom:30px}#wxRoul h4{font-size:17px}#wxTap{bottom:2%!important}}