/* ---------- 対戦（試遊版） ---------- */
#battle{justify-content:center;background:radial-gradient(ellipse at 50% 50%,#2c2160,#140d32 58%,#07051a);user-select:none}
#battle::before{content:'';position:absolute;inset:-3%;background:url(../img/title.jpg) center/cover;opacity:.16;filter:blur(4px)}
/* ハロウィン期間だけ、戦闘画面の背景にうっすらハロウィン柄（絵柄だけ透過）。js/game.js の GameEvent() が期間を判定し、js/battle.js が #battle に .hw を付ける。11/1 に自動で元へ戻る */
#battle.hw::before{background:url(../img/halloween_bg_t.png?v=1) center/cover;opacity:.07;filter:none;inset:0}
.b-wrap{--cw:min(24vw,12.4vh,140px);--hw:min(19vw,12.5vh,118px);position:relative;z-index:1;width:min(100%,900px);height:100%;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto minmax(0,1fr) auto;gap:3px;padding:8px 10px calc(6px + env(safe-area-inset-bottom))}

/* 配置：リーダーは自陣の中央（後列2枚のあいだ）。情報は四隅、ターン終了は手札の右上 */
.b-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr);min-height:0}
.corner{position:absolute;z-index:4;display:flex;flex-direction:column;align-items:center;gap:6px;width:clamp(64px,13%,112px)}
.corner.tl{left:0;top:4px}
.corner.tr{right:0;top:4px}
.corner.bl{left:0;bottom:4px}
.corner.br{right:0;bottom:4px}
.leader-spot{position:absolute;left:50%;z-index:3;transform:translate(-50%,-50%)}
.leader-spot.foe{top:26%}
.leader-spot.mine{top:74%}
.leader{position:relative;width:74px;height:74px;flex:none;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
  background:radial-gradient(circle at 35% 30%,#7a66d0,#2a1f62 55%,#140e34 72%,#e2c47e 74%,#8a6a2a 80%,#e2c47e 86%,rgba(0,0,0,0) 88%);transition:filter .2s}
.leader::before{content:'';position:absolute;inset:-9px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(232,203,140,0),rgba(232,203,140,.55),rgba(232,203,140,0) 25%,rgba(232,203,140,.55) 50%,rgba(232,203,140,0) 75%,rgba(232,203,140,.55));
  -webkit-mask:radial-gradient(circle,transparent 60%,#000 62%,#000 66%,transparent 68%);mask:radial-gradient(circle,transparent 60%,#000 62%,#000 66%,transparent 68%);animation:spin 18s linear infinite}
.leader.foe-ring::before{animation-direction:reverse}
.leader b{font-family:'Cinzel',serif;font-size:27px;color:#fff;text-shadow:0 2px 0 #1a1030,0 0 10px rgba(200,170,255,.8)}
.leader small{font-family:'Cinzel',serif;font-size:9px;letter-spacing:.15em;color:#e8d8a8}
.leader.walled{filter:drop-shadow(0 0 8px rgba(90,150,255,.95))}
.leader.walled::after{content:'守りの陣';position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;padding:1px 8px;border-radius:99px;font-size:10px;letter-spacing:.1em;
  color:#fff;background:linear-gradient(90deg,#1e3a8a,#3a6ad8,#1e3a8a);top:calc(100% + 6px)}
.leader-spot.mine .leader.walled::after{top:auto;bottom:calc(100% + 6px)}
.leader.target{cursor:pointer;filter:drop-shadow(0 0 0 #ff5a6e) drop-shadow(0 0 3px #ff5a6e) drop-shadow(0 0 3px #ff5a6e);animation:pulseT 1s ease-in-out infinite}
.leader.hit{animation:leaderHit .65s cubic-bezier(.2,.8,.3,1)}
@keyframes leaderHit{0%{filter:brightness(3.2) saturate(0)}10%{transform:translate(-9px,4px) scale(1.14)}24%{transform:translate(8px,-4px) scale(1.06);filter:brightness(1.4) sepia(1) saturate(6) hue-rotate(-40deg)}
  42%{transform:translate(-5px,2px)}62%{transform:translate(3px,-1px);filter:none}100%{transform:none}}
.b-name{font-size:11px;letter-spacing:.3em;padding-left:.3em;color:#ffb0b8;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-stat{display:flex;align-items:baseline;gap:5px;line-height:1.1;padding:2px 9px;border-radius:99px;background:rgba(14,9,36,.6);border:1px solid rgba(232,203,140,.25)}
.b-stat span{font-size:10px;letter-spacing:.1em;color:#b8acdf;white-space:nowrap}
.b-stat b{font-family:'Cinzel',serif;font-size:14px;color:#fff}
.stars{display:flex;align-items:center;justify-content:center;gap:5px 4px;flex-wrap:wrap;width:100%;padding:6px 4px 4px;border-radius:12px;background:rgba(14,9,36,.6);border:1px solid rgba(232,203,140,.25)}
.stars i{width:11px;height:11px;transform:rotate(45deg);border:1px solid #e2c47e;background:rgba(40,30,80,.6)}
.stars i.on{background:linear-gradient(135deg,#fff6cf,#e2b24a);box-shadow:0 0 6px rgba(255,214,120,.8)}
.stars b{width:100%;text-align:center;font-family:'Cinzel',serif;font-size:14px;color:#fff;margin-top:2px}
.stars b::before{content:'星力 ';font-family:'Shippori Mincho',serif;font-size:10px;color:#e8d8a8;letter-spacing:.1em}
#bEnd{min-width:0;width:100%;padding:12px 4px;font-size:15px;line-height:1.25;letter-spacing:.12em}
#bEnd:disabled{opacity:.4;filter:grayscale(.6);transform:none;cursor:default}
#bEnd.nudge{animation:pulseE 1.4s ease-in-out infinite}
@keyframes pulseE{50%{box-shadow:0 0 0 4px rgba(255,214,120,.9),0 0 10px 3px rgba(255,214,120,.6)}}
.b-mid{text-align:center;height:22px;position:relative}
.b-mid::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(232,203,140,.6),transparent)}
#bTurn{position:relative;padding:2px 14px;font-size:12px;letter-spacing:.3em;border-radius:99px;background:#1a1238;border:1px solid rgba(232,203,140,.6)}
#bTurn.cpu{color:#ffb0b8;border-color:rgba(255,140,150,.6)}

/* 盤面 */
.board{position:relative;min-height:0}
.board .lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.board .lines line{stroke:rgba(232,203,140,.28);stroke-width:2;stroke-dasharray:4 5;vector-effect:non-scaling-stroke}
.board .lines line.half{stroke:rgba(255,230,160,.65);stroke-dasharray:none;stroke-width:2}
.board .lines line.lit{stroke:#ffe6a0;stroke-dasharray:none;stroke-width:3;filter:drop-shadow(0 0 5px #ffd36a);animation:litLine 1.6s ease-in-out infinite}
@keyframes litLine{50%{stroke:#fff}}
/* 星の円は枠線・影・拡大アニメを使わず、グラデーションだけで描く
   （拡大縮小する丸い要素の枠や影は、画面の倍率によって中心に十字の線が出ることがあるため） */
.slot{position:absolute;width:calc(var(--cw) * .62);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle closest-side,#3a2c74 0%,#1c1442 84%,rgba(232,203,140,.4) 86%,rgba(232,203,140,.4) 92%,rgba(232,203,140,0) 94%)}
.slot::after{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;transform:translate(-50%,-50%) rotate(45deg);background:rgba(232,203,140,.5)}
.slot.target{cursor:pointer;background:radial-gradient(circle closest-side,#3a2c74 0%,#1c1442 80%,#ffe08a 82%,#ffe08a 93%,rgba(255,224,138,0) 95%)}
.slot.target::before{content:'';position:absolute;inset:-26%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle closest-side,rgba(255,214,120,0) 58%,rgba(255,214,120,.75) 64%,rgba(255,214,120,0) 100%);animation:slotGlow 1s ease-in-out infinite}
@keyframes slotGlow{50%{opacity:.25}}

.jin{position:absolute;left:50%;transform:translateX(-50%);z-index:3;padding:2px 12px;border-radius:99px;font-size:11px;letter-spacing:.2em;white-space:nowrap;
  color:#fff;background:linear-gradient(90deg,#1e3a8a,#3a6ad8,#1e3a8a);border:1px solid #cfe0ff;box-shadow:0 0 12px rgba(90,150,255,.7);pointer-events:none}
.jin.me{top:2%}.jin.cpu{bottom:2%}

/* ユニット */
.unit{position:absolute;width:var(--cw);aspect-ratio:5/7;transform:translate(-50%,-50%);border-radius:9px;cursor:pointer;z-index:2;
  --g:#7cb6ff;box-shadow:0 4px 12px rgba(0,0,0,.55),0 0 0 2px var(--g);transition:box-shadow .2s,filter .2s,transform .2s cubic-bezier(.2,.9,.3,1.2)}
.unit.t1{--g:#ffd56a}.unit.t2{--g:#ff9ae0}
.unit .u-art{position:absolute;inset:0;border-radius:inherit;background:#1a1238 center 14%/cover no-repeat}
.unit.down{box-shadow:0 4px 12px rgba(0,0,0,.55),0 0 0 2px var(--g),0 0 18px 3px var(--g)}
.unit.down.t2{animation:rainbow 2.4s linear infinite}
@keyframes rainbow{0%{--g:#ff7ac8}25%{--g:#ffd76a}50%{--g:#8cf0c0}75%{--g:#7cc4ff}100%{--g:#ff7ac8}}
@property --g{syntax:'<color>';inherits:true;initial-value:#7cb6ff}
.unit.foe.down .u-art{background-position:center}
/* 中身を知っている伏せ札（自分の伏せ札・見通した相手の伏せ札）：相手から見えるのと同じ裏面にして、
   真ん中の丸い小窓にだけキャラクターを見せる。下に「伏せ札」の帯 */
.u-veil{position:absolute;inset:0;z-index:1;border-radius:inherit;background:center/cover no-repeat;pointer-events:none}
.unit.kdown .u-art{visibility:hidden}
/* 小窓は角丸と塗り（グラデーション）だけで描く。clip-path や影は、拡大したときに十字の継ぎ目が出るため使わない */
.u-face{position:absolute;z-index:2;left:21%;top:21%;width:58%;aspect-ratio:1;border-radius:50%;pointer-events:none;background:#1a1238 50% 6%/175% auto no-repeat}
.u-window{position:absolute;z-index:3;left:18%;top:18.9%;width:64%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle closest-side,rgba(0,0,0,0) 84%,rgba(255,224,138,.35) 86%,#ffe08a 88%,#fff3c8 92%,#ffe08a 95%,rgba(255,224,138,0) 100%)}
.u-band{position:absolute;z-index:3;left:0;right:0;bottom:17%;text-align:center;font-size:11px;font-weight:800;letter-spacing:.2em;padding:2px 0 2px .2em;pointer-events:none;
  color:#2c1d10;background:linear-gradient(90deg,transparent,#ffe08a 18%,#ffe08a 82%,transparent)}
.unit.kdown .u-atk,.unit.kdown .u-hp,.unit.kdown .u-rc{z-index:4}
.u-glow{position:absolute;left:50%;top:8%;transform:translateX(-50%);font-size:10px;padding:1px 7px;border-radius:99px;background:rgba(10,6,30,.75);color:#fff;border:1px solid var(--g);white-space:nowrap}
.u-atk,.u-hp{position:absolute;bottom:-9px;width:31px;height:31px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Cinzel',serif;font-weight:900;font-size:18px;color:#fff;text-shadow:0 1px 2px #000,0 0 4px #000}
.u-atk{left:-8px;background:radial-gradient(circle closest-side,#e0605a 0%,#8a1a24 82%,#fff3cf 85%,#fff3cf 100%)}
.u-hp{right:-8px;background:radial-gradient(circle closest-side,#5aa0e0 0%,#1a4a8a 82%,#fff3cf 85%,#fff3cf 100%)}
.u-atk.up,.u-hp.up{color:#b8ffb0}
.u-hp.hurt{color:#ffb0b0}
.u-rc{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-size:12px;padding:1px 7px;border-radius:99px;background:linear-gradient(#fff6cf,#d9b25e);color:#2c1d10;font-weight:800;white-space:nowrap}
.unit.ready{box-shadow:0 4px 10px rgba(0,0,0,.5),0 0 0 7px #5cff78,0 0 6px 8px rgba(92,255,120,.45);animation:readyGlow 1.4s ease-in-out infinite;z-index:3}
@keyframes readyGlow{50%{box-shadow:0 4px 10px rgba(0,0,0,.5),0 0 0 7px #d8ffde,0 0 8px 9px rgba(92,255,120,.65)}}
.unit.sel{transform:translate(-50%,-50%) translateY(-12px) scale(1.6);box-shadow:0 18px 30px rgba(0,0,0,.6),0 0 0 4px #fff,0 0 8px 4px rgba(255,255,255,.7);z-index:8}
.unit.target{box-shadow:0 0 0 6px #ff5a6e,0 0 6px 7px rgba(255,90,110,.5);animation:pulseT 1s ease-in-out infinite;z-index:4}
@keyframes pulseT{50%{filter:brightness(1.25)}}
.unit.const::before{content:'';position:absolute;inset:-5px;border-radius:12px;border:2px solid #ffe08a;box-shadow:0 0 14px #ffd36a;animation:litLine 1.6s ease-in-out infinite}
.unit.frozen .u-art{filter:saturate(.3) brightness(1.1) hue-rotate(160deg)}
.unit.frozen::after{content:'凍';position:absolute;right:-6px;top:-6px;width:20px;height:20px;border-radius:50%;background:#5ab0f0;color:#fff;font-size:11px;display:grid;place-items:center;border:1px solid #e0f4ff}
.unit.shield .u-art{box-shadow:inset 0 0 0 3px #bfe6ff,inset 0 0 18px #9ad0ff}
.unit.peeked .u-art{filter:brightness(.75)}
.unit.peeked::after{content:'見';position:absolute;left:-6px;top:-6px;width:20px;height:20px;border-radius:50%;background:#8a5cf0;color:#fff;font-size:11px;display:grid;place-items:center}
.unit.enter{animation:uEnter .5s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes uEnter{from{transform:translate(-50%,-50%) translateY(-40px) scale(1.4);opacity:0;filter:brightness(3)}}
.unit.flipping{animation:uFlipOut .24s ease-in forwards}
@keyframes uFlipOut{to{transform:translate(-50%,-50%) scaleX(0);filter:brightness(2.5)}}
.unit.flipped{animation:uFlipIn .32s ease-out both}
@keyframes uFlipIn{from{transform:translate(-50%,-50%) scaleX(0);filter:brightness(2.5)}}
.unit.hit{animation:uHit .55s cubic-bezier(.2,.8,.3,1)}
@keyframes uHit{0%{transform:translate(-50%,-50%);filter:brightness(3.4) saturate(0)}12%{transform:translate(calc(-50% + var(--kx,0px)),calc(-50% + var(--ky,0px))) rotate(var(--kr,0deg));filter:brightness(2.4) saturate(.2)}30%{transform:translate(calc(-50% - var(--kx,0px) * .3),calc(-50% - var(--ky,0px) * .3));filter:brightness(1.1) sepia(.7) saturate(4) hue-rotate(-30deg)}48%{transform:translate(calc(-50% + 4px),-50%)}66%{transform:translate(calc(-50% - 3px),-50%);filter:none}100%{transform:translate(-50%,-50%)}}
.unit.dying{animation:uDie .42s ease-in forwards}
@keyframes uDie{to{transform:translate(-50%,-50%) scale(.5) rotate(-8deg);opacity:0;filter:brightness(2)}}

/* 選んだカードの上の吹き出し（説明）と、カードに重ねるボタン */
.b-pop{position:absolute;z-index:30;display:none;max-width:min(92vw,440px);padding:10px 15px;border-radius:12px;pointer-events:none;
  background:linear-gradient(170deg,rgba(40,28,92,.96),rgba(18,11,44,.96));border:1px solid rgba(232,203,140,.75);box-shadow:0 10px 26px rgba(0,0,0,.55)}
.b-pop.on{display:block;animation:popIn .18s ease-out}
@keyframes popIn{from{opacity:0;transform:translateY(6px)}}
.i-text{display:flex;flex-direction:column;gap:2px;font-size:15px;line-height:1.55;color:#e9e2ff}
.i-text b{font-size:16.5px;color:#fff;letter-spacing:.04em}
.i-text .i-hint{color:#ffd98a}
.b-acts{position:absolute;z-index:31;display:none;flex-direction:column;align-items:stretch;gap:5px;transform:translateX(-50%);min-width:96px}
.b-acts.on{display:flex}
.pa{padding:8px 12px;border-radius:99px;font-size:13px;font-weight:800;letter-spacing:.06em;white-space:nowrap;color:#fff;
  background:rgba(16,10,40,.88);border:1.5px solid rgba(255,255,255,.75);box-shadow:0 4px 12px rgba(0,0,0,.6)}
.pa.go{background:linear-gradient(135deg,#9a7ff0,#5a3fb8);border-color:#ffe9b4}
.pa.go2{background:linear-gradient(135deg,#4a9ae8,#1e4a9a);border-color:#d8f0ff}
.pa.off{opacity:.5}
.pa:active{transform:scale(.96)}

/* 手札 */
.hand{min-width:0;display:flex;justify-content:center;align-items:flex-end;min-height:calc(var(--hw) * 1.4 + 26px);padding-top:8px}
.hc{position:relative;flex:none;width:var(--hw);aspect-ratio:5/7;border-radius:9px;cursor:pointer;transform-origin:50% 100%;transition:transform .2s cubic-bezier(.2,.9,.3,1.2),filter .15s;
  box-shadow:0 6px 16px rgba(0,0,0,.55),0 0 0 1.5px rgba(232,203,140,.7);filter:brightness(.62) saturate(.6)}
.hc + .hc{margin-left:calc(var(--ov,0px) * -1)}
.hc:first-child{transform-origin:0 100%}
.hc:last-child{transform-origin:100% 100%}   /* 端の札は内側へ拡大して画面からはみ出さない */
.hc.ok{filter:none;box-shadow:0 6px 14px rgba(0,0,0,.55),0 0 0 7px #5cff78,0 0 6px 8px rgba(92,255,120,.45);animation:okGlow 1.4s ease-in-out infinite}
@keyframes okGlow{50%{box-shadow:0 6px 14px rgba(0,0,0,.55),0 0 0 7px #d8ffde,0 0 8px 9px rgba(92,255,120,.65)}}
@media (hover:hover) and (pointer:fine){
  .hc:hover{transform:translateY(-8px) scale(1.6);z-index:7}
  .unit:hover{transform:translate(-50%,-50%) scale(1.6);z-index:9}
}
.hc.sel{transform:translateY(-8px) scale(1.6);z-index:6;animation:none;box-shadow:0 16px 30px rgba(0,0,0,.6),0 0 0 4px #fff,0 0 8px 4px rgba(255,255,255,.7)}
.hc-art{position:absolute;inset:0;border-radius:inherit;background-size:cover,cover;background-position:center 14%,center}
.hc::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(transparent 55%,rgba(10,6,30,.92))}
.hc-cost{position:absolute;top:-9px;left:-9px;z-index:2;width:31px;height:31px;transform:rotate(45deg);display:grid;place-items:center;
  background:linear-gradient(135deg,#7ab8ff,#2a4ab8);border:1.5px solid #fff3cf;box-shadow:0 2px 6px rgba(0,0,0,.6)}
.hc-cost{font-family:'Cinzel',serif;font-weight:900;font-size:19px;color:#fff;text-shadow:0 1px 2px #000}
.hc-cost i{font-style:normal;transform:rotate(-45deg)}
.hc-name{position:absolute;left:0;right:0;bottom:26px;z-index:2;text-align:center;font-size:calc(var(--hw) * .105);font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 3px}
.hc-r{position:absolute;top:3px;right:4px;z-index:2;font-family:'Cinzel',serif;font-style:italic;font-weight:900;font-size:11px;color:#fff;text-shadow:0 0 6px var(--g),0 1px 2px #000}
.hc-r.t0{--g:#7cb6ff}.hc-r.t1{--g:#ffd56a}.hc-r.t2{--g:#ff9ae0}
.hc-atk,.hc-hp{position:absolute;bottom:2px;z-index:2;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-weight:900;font-size:15px;color:#fff;text-shadow:0 1px 2px #000,0 0 4px #000}
.hc-atk{left:2px;background:radial-gradient(circle closest-side,#e0605a 0%,#8a1a24 82%,#fff3cf 86%,#fff3cf 100%)}
.hc-hp{right:2px;background:radial-gradient(circle closest-side,#5aa0e0 0%,#1a4a8a 82%,#fff3cf 86%,#fff3cf 100%)}
.hc-kind{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);z-index:2;font-size:10px;padding:1px 8px;border-radius:99px;color:#2c1d10;font-weight:800;white-space:nowrap;background:linear-gradient(#fff6cf,#d9b25e)}
.hc.k-item .hc-kind{background:linear-gradient(#d8f6ff,#6ab0d8)}
.hc-kind{max-width:calc(100% - 4px);font-size:min(10px,2.6vw);padding-left:5px;padding-right:5px;letter-spacing:0}   /* 「SR 道具」が狭い端末でもはみ出さないように */

/* 浮かぶ文字・斬撃 */
.b-fx{position:absolute;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.fl{position:absolute;transform:translate(-50%,-50%);font-family:'Cinzel','Shippori Mincho',serif;font-weight:900;font-size:26px;white-space:nowrap;z-index:2;
  text-shadow:0 2px 0 #1a1030,0 0 10px currentColor;animation:flUp 1.1s ease-out forwards}
.fl.dmg{color:#fff;font-size:38px;text-shadow:0 0 2px #b0102a,0 0 3px #b0102a,0 3px 0 #6a0614,0 0 18px #ff3a5a;animation:flDmg 1.15s cubic-bezier(.2,.8,.3,1) forwards}.fl.heal{color:#d8ffde;font-size:32px;text-shadow:0 0 3px #0a7a3a,0 3px 0 #064a24,0 0 16px #3aff8a}.fl.buff{color:#fff6cf;font-size:30px;text-shadow:0 0 3px #8a5a0a,0 3px 0 #5a3a06,0 0 16px #ffc24a}.fl.info{color:#cfe6ff;font-size:15px;font-family:'Shippori Mincho',serif}
.fl.big{font-size:40px}
.fl.dmg.big{font-size:54px}
@keyframes flDmg{0%{opacity:0;transform:translate(-50%,-50%) scale(2.8)}9%{opacity:1;transform:translate(-50%,-50%) scale(.82)}18%{transform:translate(-50%,-62%) scale(1.18)}28%{transform:translate(-50%,-60%) scale(1)}72%{opacity:1;transform:translate(-50%,-78%)}100%{opacity:0;transform:translate(-50%,-135%) scale(.9)}}
@keyframes flUp{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-140%)}}
/* 幸運のコイン：表／裏の絵がくるくる回って止まる */
.coinfx{position:absolute;transform:translate(-50%,-50%);z-index:3;width:92px;height:92px;pointer-events:none;
  perspective:600px;animation:coinPop 1.4s cubic-bezier(.2,.8,.3,1) forwards}
.coinfx img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  box-shadow:0 0 0 3px rgba(255,214,140,.9),0 0 18px 4px rgba(255,210,140,.5),0 6px 16px rgba(0,0,0,.5)}
.coinfx.ura img{box-shadow:0 0 0 3px rgba(180,205,255,.95),0 0 18px 4px rgba(150,190,255,.5),0 6px 16px rgba(0,0,0,.5)}
@keyframes coinPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotateY(0deg)}
  12%{opacity:1}
  68%{opacity:1;transform:translate(-50%,-54%) scale(1) rotateY(1080deg)}
  100%{opacity:0;transform:translate(-50%,-92%) scale(1) rotateY(1080deg)}}
@media (max-width:480px){.coinfx{width:74px;height:74px}}
.slash{position:absolute;width:120px;height:120px;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,214,140,.6) 30%,transparent 62%);animation:slash .45s ease-out forwards}
.slash::before{content:'';position:absolute;left:-20%;right:-20%;top:46%;height:6px;background:linear-gradient(90deg,transparent,#fff,transparent);transform:rotate(-30deg)}
@keyframes slash{from{transform:translate(-50%,-50%) scale(.3);opacity:1}to{transform:translate(-50%,-50%) scale(1.4);opacity:0}}

/* 帯 */
.b-banner{position:absolute;left:0;right:0;top:44%;z-index:45;pointer-events:none;display:none;flex-direction:column;align-items:center;gap:4px;padding:14px 16px;
  background:linear-gradient(90deg,transparent,rgba(20,12,50,.92) 18%,rgba(20,12,50,.92) 82%,transparent);border-top:1px solid rgba(232,203,140,.7);border-bottom:1px solid rgba(232,203,140,.7);transform:translateY(-50%)}
.b-banner.on{display:flex;animation:bnIn .3s cubic-bezier(.2,.9,.3,1.2)}
.b-banner b{font-size:clamp(20px,4.4vh,32px);letter-spacing:.25em;color:#fff;text-shadow:0 0 16px rgba(255,214,140,.9)}
.b-banner span{font-size:13px;color:#ffe08a;letter-spacing:.06em;text-align:center}
.b-banner.cpu b{text-shadow:0 0 16px rgba(255,120,140,.9)}
@keyframes bnIn{from{opacity:0;transform:translateY(-50%) scaleY(.2)}}

/* 結果 */
.b-result{position:absolute;inset:0;z-index:50;display:none;align-items:center;justify-content:center;background:rgba(8,5,26,.72);backdrop-filter:blur(4px)}
.b-result.on{display:flex;animation:fade .4s}
.r-box{display:flex;flex-direction:column;align-items:center;gap:14px}
.r-title{font-size:clamp(46px,11vh,90px);font-weight:800;letter-spacing:.3em;padding-left:.3em}
.r-title.win{background:linear-gradient(180deg,#fffdf6,#ffeab4 35%,#d6a344 60%,#fff3cf);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(255,212,140,.8))}
.r-title.lose{color:#9a8ac8;text-shadow:0 0 18px rgba(80,60,160,.8)}
.r-sub{font-size:13px;color:#cfc4ee;letter-spacing:.15em}

/* 右上のボタン */
.b-tools{display:flex;gap:6px;margin-bottom:4px}
.tool{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:800;color:#fff;background:rgba(20,10,50,.6);border:1px solid rgba(255,255,255,.45)}
.tool:hover{background:rgba(255,255,255,.18)}
.rules{text-align:left;font-size:13px;line-height:1.7;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:4px 0}
.rules dt{font-weight:800;color:#ffe08a;white-space:nowrap}
.rules dd{margin:0;color:#ece6ff}
.rules b{color:#fff}
.c0,.c1,.c2{font-weight:800;padding:0 4px;border-radius:4px}
.c0{color:#7cb6ff}.c1{color:#ffd56a}.c2{background:linear-gradient(90deg,#ff7ac8,#ffd76a,#8cf0c0,#7cc4ff);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ホームの対戦ボタン */
.battle-btn{min-width:316px;background:linear-gradient(135deg,#2a2160,#120c2c);color:#ffe9b4;border-color:#e9d9a8}
.battle-btn em{color:#cfc4ee}

@media (max-width:600px){
  .b-wrap{--cw:min(22vw,11.4vh,132px);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .corner{width:72px;gap:5px}
  .leader{width:50px;height:50px}
  .leader b{font-size:19px}
  .b-stat{padding:1px 7px}
  .b-stat b{font-size:13px}
  .stars i{width:9px;height:9px}
  .stars{gap:4px 3px;padding:5px 3px 3px}
  .tool{width:26px;height:26px;font-size:12px}
  .b-tools{gap:4px}
  #bEnd{font-size:13px;padding:10px 2px}
  .pa{padding:7px 10px;font-size:12px}
  .battle-btn{min-width:0;width:100%}
}

/* ---------- チュートリアル ---------- */
.b-coach{position:absolute;left:50%;top:64px;z-index:44;width:min(92%,560px);transform:translateX(-50%);display:none;flex-direction:column;gap:6px;
  padding:12px 16px 10px;border-radius:14px;background:linear-gradient(170deg,rgba(46,34,100,.97),rgba(22,14,52,.97));
  border:1.5px solid #ffe08a;box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 22px rgba(255,214,120,.35)}
.b-coach.on{display:flex;animation:coachIn .3s cubic-bezier(.2,.9,.3,1.2)}
.b-coach.mid{top:38%}
.b-coach.nudge{animation:coachNudge .35s}
@keyframes coachIn{from{opacity:0;transform:translateX(-50%) translateY(-10px)}}
@keyframes coachNudge{25%{transform:translateX(calc(-50% - 6px))}75%{transform:translateX(calc(-50% + 6px))}}
.c-step{font-family:'Cinzel','Shippori Mincho',serif;font-size:10px;letter-spacing:.25em;color:#ffd98a}
.b-coach p{font-size:14px;line-height:1.7;color:#fff}
.b-coach p b{color:#ffe08a}
.c-btns{display:flex;justify-content:flex-end;gap:8px}
.coach-hl{outline:3px solid #ffe08a;outline-offset:4px;border-radius:10px;animation:coachHl 1s ease-in-out infinite !important;z-index:20 !important}
.slot.coach-hl{border-radius:50%;outline-offset:6px}
@keyframes coachHl{50%{outline-color:#fff;outline-offset:8px}}
@media (max-width:600px){.b-coach{top:50px;padding:8px 12px 7px;gap:4px}.b-coach p{font-size:12px;line-height:1.6}.c-btns .mini{padding:5px 10px}}
/* 移動：入れ替え先の味方 */
.unit.swap{box-shadow:0 0 0 6px #6ad0ff,0 0 6px 7px rgba(106,208,255,.5);animation:pulseT 1s ease-in-out infinite;z-index:4}
.mini.go2{background:linear-gradient(135deg,#3a8ad8,#1e4a9a)}

/* ---------- 演出 ---------- */
.b-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:42}
.b-vig{position:absolute;inset:0;pointer-events:none;z-index:43;opacity:0}
.unit.ghosted{visibility:hidden}
.unit.ghost{z-index:5;pointer-events:none;animation:none;box-shadow:0 22px 40px rgba(0,0,0,.6),0 0 0 3px #fff,0 0 26px rgba(255,230,170,.9)}
.shard{position:absolute;background-repeat:no-repeat;border-radius:2px;pointer-events:none;outline:1px solid rgba(255,240,220,.7)}
.flycard{position:absolute;z-index:6;border-radius:10px;transform:translate(-50%,-50%);pointer-events:none;background:#1a1238 center 14%/cover no-repeat;
  outline:3px solid #ffe9b4;box-shadow:0 0 30px 8px rgba(255,220,150,.75),0 18px 40px rgba(0,0,0,.6)}
.flycard.k-spell{outline-color:#e0c8ff;box-shadow:0 0 30px 8px rgba(190,140,255,.8),0 18px 40px rgba(0,0,0,.6)}
.flycard.k-item{outline-color:#d8f0ff;box-shadow:0 0 30px 8px rgba(120,200,255,.75),0 18px 40px rgba(0,0,0,.6)}
.b-banner.low{top:78%}
@media (max-width:600px){
  .leader{width:52px;height:52px}
  .leader b{font-size:20px}
  .leader small{font-size:7px}
  .leader::before{inset:-6px}
  .corner{width:56px}
  .corner.tl .b-stat,.corner.bl .b-stat{flex-direction:column;align-items:center;gap:0;padding:2px 6px;border-radius:10px}
  .b-name{letter-spacing:.15em}
  .fl.dmg{font-size:30px}.fl.dmg.big{font-size:42px}
}
.r-gain{font-family:'Cinzel','Shippori Mincho',serif;font-size:18px;color:#ffe08a;letter-spacing:.15em;text-shadow:0 0 12px rgba(255,214,120,.8)}
.b-away{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:46;display:none;align-items:center;gap:10px;padding:8px 14px;border-radius:12px;
  background:rgba(20,12,50,.92);border:1px solid #ffb0b8;color:#ffd0d6;font-size:12.5px;white-space:nowrap}
.b-away.on{display:flex}

/* スマホでは画面が狭いので、数字と説明は少し控えめに */
@media (max-width:600px){
  .u-atk,.u-hp{width:26px;height:26px;font-size:15px;bottom:-8px}
  .u-atk{left:-6px}.u-hp{right:-6px}
  .hc-cost{width:27px;height:27px;font-size:16px;top:-8px;left:-8px}
  .hc-atk,.hc-hp{width:23px;height:23px;font-size:13px}
  .hc-name{bottom:23px}
  .i-text{font-size:13.5px}
  .i-text b{font-size:14.5px}
}
.b-pop.narrow{padding:8px 9px}
.b-pop.narrow .i-text{font-size:12px;line-height:1.5}
.b-pop.narrow .i-text b{font-size:13px}
/* スマホ・タブレット：光っている選び先は、説明の吹き出しより手前に描く（吹き出しが重なっても見えて、押せる） */
@media (hover:none),(pointer:coarse){
  .slot.target,.unit.target,.unit.swap{z-index:35}
}

/* チュートリアルの吹き出し：説明している場所のすぐ近くに出し、矢印でそこを指す */
.b-coach.anchored{transform:none;width:min(calc(100% - 16px),420px)}
.b-coach.anchored::after{content:'';position:absolute;width:14px;height:14px;background:rgb(30,20,70);border:1.5px solid #ffe08a;transform:rotate(45deg)}
.b-coach.up::after{left:calc(var(--ax) - 7px);bottom:-8.5px;border-top:0;border-left:0}
.b-coach.down::after{left:calc(var(--ax) - 7px);top:-8.5px;border-bottom:0;border-right:0}
.b-coach.right::after{top:calc(var(--ay) - 7px);left:-8.5px;border-top:0;border-right:0}
.b-coach.left::after{top:calc(var(--ay) - 7px);right:-8.5px;border-bottom:0;border-left:0}
@keyframes coachIn2{from{opacity:0}}
.b-coach.anchored.on{animation:coachIn2 .25s ease-out}
@keyframes coachNudge2{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.b-coach.anchored.nudge{animation:coachNudge2 .35s}

/* チュートリアル：押す場所の印（光る輪と矢印） */
#bMarks{position:absolute;inset:0;z-index:43;pointer-events:none}
.tap-mark{position:absolute;width:0;height:0}
.tap-mark .ring{position:absolute;left:0;top:0;width:var(--w);height:var(--h);transform:translate(-50%,-50%);border-radius:16px;border:4px solid #ffe08a;
  box-shadow:0 0 16px rgba(255,224,138,.95),inset 0 0 12px rgba(255,224,138,.55)}
.tap-mark.round .ring{border-radius:50%}
.tap-mark .ring.wave{animation:tapWave 1.2s ease-out infinite}
@keyframes tapWave{0%{transform:translate(-50%,-50%) scale(1);opacity:.9}100%{transform:translate(-50%,-50%) scale(1.45);opacity:0}}
.tap-mark .arrow{position:absolute;left:0;bottom:calc(var(--h) / 2 + 4px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;line-height:1;
  color:#ffe08a;font-size:28px;text-shadow:0 0 10px rgba(255,200,80,.9),0 2px 3px #000;animation:tapBounce .7s ease-in-out infinite alternate;white-space:nowrap}
.tap-mark .arrow small{font-size:12px;font-weight:800;letter-spacing:.1em;color:#2c1d10;background:#ffe08a;border-radius:99px;padding:3px 10px;margin-bottom:2px;text-shadow:none;box-shadow:0 2px 8px rgba(0,0,0,.5)}
@keyframes tapBounce{to{transform:translateX(-50%) translateY(-8px)}}

/* 対戦中の音のON/OFF：OFF のときは斜線 */
#bSound{position:relative}
#bSound.off{opacity:.55}
#bSound.off::after{content:'';position:absolute;left:18%;right:18%;top:50%;height:2px;background:#ff8a9a;transform:rotate(-40deg);border-radius:2px}

/* 通常攻撃の斬撃（炎）の絵 */
.slash-img{position:absolute;pointer-events:none;z-index:6}
.slash-img img{display:block;width:100%;height:100%;filter:drop-shadow(0 0 10px rgba(255,110,30,.85)) brightness(1.12);will-change:transform,opacity,clip-path}

/* 命中のエフェクト（コマ画像）：光は背景に足し合わせる */
.hit-fx{position:absolute;pointer-events:none;z-index:7;background-repeat:no-repeat;background-position:0 0;mix-blend-mode:screen}

/* 対戦画面の音量ボタン */
.tool-vol{padding:0}
.tool-vol svg{width:16px;height:16px}
.corner.tr .b-tools{align-self:flex-end;margin-right:8px}   /* ボタンが角の幅より広いので、画面の内側に右寄せ */

/* ================= スマホの横向き：対戦（シャドーバースの横画面を参考に） =================
   ・盤面は中央に大きく（上が相手・下が自分。リーダーは盤面の中央）
   ・左端の列：相手の情報（上）と、自分の山札・星力（下）
   ・右の列：上に設定ボタン、真ん中に大きな丸い「ターン終了」、右下に手札を重ねて並べる */
@media (orientation:landscape) and (max-height:500px){
  .b-wrap{width:100%;max-width:none;--lw:clamp(70px,11vw,96px);--rw:clamp(220px,33vw,300px);
    --cw:min(14vh,8.6vw,110px);--hw:min(22vh,11vw,100px);
    grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto minmax(0,1fr);row-gap:2px;
    padding:6px calc(6px + env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left))}
  /* 盤面は左の列と右の列のあいだ */
  .board{margin:0 var(--rw) 0 var(--lw)}
  .b-mid{margin:0 var(--rw) 0 var(--lw)}
  .leader-spot,.jin{left:calc(var(--lw) + (100% - var(--lw) - var(--rw)) / 2)}
  .leader{width:52px;height:52px}
  .leader b{font-size:20px}
  .leader small{font-size:7px}
  .leader::before{inset:-6px}

  /* 左端の列：情報 */
  .corner.tl,.corner.bl{width:var(--lw)}
  .b-stat{padding:1px 8px}
  .b-stat b{font-size:13px}
  .stars i{width:9px;height:9px}
  .stars{gap:4px 3px;padding:5px 3px 3px}
  /* 右上：設定ボタン */
  .corner.tr{width:auto;align-items:flex-end}
  .corner.tr .b-tools{align-self:auto;margin-right:2px}
  .tool{width:30px;height:30px;font-size:13px}
  .b-tools{gap:6px}
  /* 右の真ん中：ターン終了（大きな丸いボタン） */
  .corner.br{top:-34px;bottom:auto;right:calc(8px + env(safe-area-inset-right));width:calc(var(--rw) - 16px);flex-direction:row;align-items:stretch;gap:8px}
  #bEnd{flex:1;width:auto;height:44px;padding:0 10px;border-radius:22px;justify-content:center;font-size:15px;letter-spacing:.16em;
    box-shadow:0 6px 18px rgba(0,0,0,.5),0 0 0 3px rgba(255,236,190,.55),0 0 22px rgba(160,120,255,.55)}
  #bEnd.nudge{animation:pulseE 1.4s ease-in-out infinite}
  #bEnd br{display:none}                                   /* 横長なので「ターン終了」を1行で */
  #bGiveUp{height:44px;padding:0 12px;width:auto;flex:none}

  /* 右下：手札。横に重ねて並べ、選ぶと持ち上がって大きくなる */
  .hand{position:absolute;right:calc(6px + env(safe-area-inset-right));bottom:calc(4px + env(safe-area-inset-bottom));z-index:5;
    width:calc(var(--rw) - 10px);min-height:0;padding:0 6px 12px 6px;justify-content:center;align-items:flex-end;--fan:2.6}
  .hand .hc,.hand .hc:first-child,.hand .hc:last-child{transform-origin:50% 140%;
    transform:translateY(calc(var(--d,0) * var(--d,0) * 1.4px)) rotate(calc(var(--d,0) * var(--fan) * 1deg))}   /* 扇形：外側の札ほど傾けて少し下げる */
  .hand .hc.sel{transform:translateY(-8px) scale(1.42) rotate(0deg);transform-origin:50% 100%}
  .hand .hc.sel:first-child{transform-origin:0 100%}
  .hand .hc.sel:last-child{transform-origin:100% 100%}
  .hc-cost{width:27px;height:27px;font-size:16px;top:-8px;left:-8px}
  .hc-atk,.hc-hp{width:24px;height:24px;font-size:14px}
  .hc-name{bottom:24px}
  .u-atk,.u-hp{width:24px;height:24px;font-size:14px;bottom:-7px}
  .u-atk{left:-6px}.u-hp{right:-6px}
  .u-band{font-size:9px;letter-spacing:.1em}

  .b-coach{top:40px}
  .b-banner{padding:8px 16px}
  .fl.dmg{font-size:30px}.fl.dmg.big{font-size:42px}
}

/* 対戦中のカードの詳しい表示（長押し・右クリック）と、降参の確認：盤面・操作ボタンより手前 */
.modal.b-detail{z-index:60}
.unit,.hc{-webkit-touch-callout:none}
.bd-body{flex-direction:row;align-items:center;gap:24px;max-width:860px;width:100%;justify-content:center}
.bd-art{width:min(36vw,58vh,300px);aspect-ratio:5/7;border-radius:14px;background:#1a1238 center/cover no-repeat;flex:none;
  box-shadow:0 14px 34px rgba(0,0,0,.6),0 0 0 2px #7cb6ff,0 0 26px rgba(124,182,255,.45)}
.bd-art.t1{box-shadow:0 14px 34px rgba(0,0,0,.6),0 0 0 2px #ffd56a,0 0 26px rgba(255,213,106,.5)}
.bd-art.t2{box-shadow:0 14px 34px rgba(0,0,0,.6),0 0 0 2px #ff9ae0,0 0 30px rgba(255,154,224,.55)}
.bd-art.magic{box-shadow:0 14px 34px rgba(0,0,0,.6),0 0 0 2px #e0c8ff,0 0 26px rgba(190,140,255,.5)}
.bd-side{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:400px;min-width:0}
.bd-text{color:#f3eeff;display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 120px);overflow-y:auto;text-align:left}
.bd-text h4{font-size:14px;color:#cfc4ee;letter-spacing:.1em;font-weight:500;display:flex;flex-direction:column}
.bd-text h4 b{font-size:24px;color:#fff;letter-spacing:.12em}
.bd-r{font-family:'Cinzel',serif;font-style:italic;font-weight:900;font-size:18px;color:#7cb6ff}
.bd-r.t1{color:#ffd56a}.bd-r.t2{color:#ff9ae0}
.bd-r small{font-family:'Shippori Mincho',serif;font-style:normal;font-weight:500;font-size:12px;color:#cfc4ee}
.bd-stats{display:flex;flex-wrap:wrap;gap:6px}
.bd-stats span{padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.08);font-size:12px;color:#cfc4ee}
.bd-stats b{font-family:'Cinzel',serif;font-size:16px;color:#fff;margin-left:4px}
.bd-stats .a b{color:#ffb0a8}.bd-stats .h b{color:#a8d4ff}
.bd-skill{padding:9px 12px;border-radius:10px;background:rgba(110,80,190,.25);border-left:3px solid #ffd98a;font-size:14px;line-height:1.7}
.bd-skill em{display:block;font-style:normal;font-size:11px;letter-spacing:.15em;color:#ffd98a}
.bd-state{font-size:12px;color:#9ad0ff;line-height:1.7}
.bd-flavor{font-size:12.5px;line-height:1.8;color:#cfc4ee}
@media (max-width:600px) and (orientation:portrait){
  .bd-body{flex-direction:column;gap:14px}
  .bd-art{width:min(52vw,34vh)}
  .bd-side{align-items:center;max-width:100%}
  .bd-text{max-height:calc(100vh - 34vh * 1.4 - 130px)}
}
/* 降参（白旗）：ターン終了のそば。縦画面ではターン終了の上、PC・横画面では左隣 */
.give-up-btn{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;padding:7px 8px;border-radius:99px;font-size:13px;font-weight:700;letter-spacing:.12em;white-space:nowrap;
  color:#ffd0d6;background:rgba(60,14,28,.78);border:1.5px solid rgba(255,140,160,.75);box-shadow:0 4px 12px rgba(0,0,0,.45);cursor:pointer}
.give-up-btn svg{width:14px;height:14px;flex:none}
.give-up-btn:hover{background:rgba(90,20,40,.85)}
.corner.br{gap:8px}
@media (min-width:601px) and (min-height:501px){
  .corner.br{flex-direction:row;align-items:stretch;width:auto}
  .corner.br #bEnd{width:112px}
  .give-up-btn{width:auto;padding:0 14px}
}
.btn.give-up{background:linear-gradient(135deg,#c0455a,#7a1a2c);border-color:#ffd0d6}

/* 対戦のログ */
.tool-log{width:auto;padding:0 10px;border-radius:99px;font-size:12px;letter-spacing:.06em;white-space:nowrap}   /* 「ログ」の文字のボタン */
.log-sheet{width:min(520px,100%);max-height:100%}
.b-log{list-style:none;margin:0;padding:6px 4px;width:100%;max-height:min(60vh,520px);overflow-y:auto;text-align:left;font-size:13px;line-height:1.6;color:#e9e2ff;
  border-radius:12px;background:rgba(10,6,30,.45)}
.b-log li{padding:2px 8px;white-space:pre-wrap;word-break:break-word}
.b-log li.turn{margin-top:8px;padding:4px 10px;border-radius:8px;font-weight:700;letter-spacing:.08em;color:#fff;background:rgba(122,92,214,.35)}
.b-log li.turn.foe{background:rgba(214,92,122,.3)}
.b-log li.turn:first-child{margin-top:0}
.b-log li.dmg{color:#ffc0c8}
.b-log li.heal{color:#b8ffcf}
.b-log li.dead{color:#a99cc9}
.b-log li.const{color:#ffe08a}
.b-log li.end{margin-top:8px;padding:6px 10px;border-radius:8px;text-align:center;font-weight:800;letter-spacing:.2em;color:#2c1d10;background:linear-gradient(90deg,#fff6cf,#e2b24a)}
.b-log li.empty{text-align:center;color:#a99cc9}

/* スマホ横向き：ターン終了の上の空いたところに、ログの最新の行をいつも出す（押すと全部）。「ログ」ボタンは隠す */
.b-logmini{display:none}
@media (orientation:landscape) and (max-height:500px){
  #bLogBtn{display:none}
  .b-logmini{display:flex;position:absolute;z-index:4;right:calc(8px + env(safe-area-inset-right));top:46px;width:calc(var(--rw) - 16px);height:calc(50% - 75px);
    border-radius:12px;background:rgba(10,6,30,.6);border:1px solid rgba(232,203,140,.35);cursor:pointer;overflow:hidden}
  .b-logmini ol{list-style:none;margin:0;padding:4px 6px;width:100%;overflow-y:auto;font-size:11px;line-height:1.5;color:#e9e2ff;text-align:left}
  .b-logmini li{padding:1px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .b-logmini li.turn{margin-top:4px;border-radius:6px;font-weight:700;color:#fff;background:rgba(122,92,214,.35)}
  .b-logmini li.turn.foe{background:rgba(214,92,122,.3)}
  .b-logmini li.turn:first-child{margin-top:0}
  .b-logmini li.dmg{color:#ffc0c8}.b-logmini li.heal{color:#b8ffcf}.b-logmini li.dead{color:#a99cc9}.b-logmini li.const{color:#ffe08a}
  .b-logmini li.end{font-weight:800;color:#ffe08a}
  .b-logmini li.empty{text-align:center;color:#a99cc9;letter-spacing:.3em}
}

/* パソコンなど横に余白のある画面：右上のボタン列は盤面の外（画面の右上の隅）へ出して、相手のカードと重ならないように */
@media (min-width:1000px) and (min-height:501px){
  .corner.tr{right:calc((900px - 100vw) / 2 + 16px)}
}
@media (max-width:600px){
  .give-up-btn{padding:6px 4px;font-size:12px;gap:3px;letter-spacing:.06em}
  .give-up-btn svg{width:12px;height:12px}
}

/* ================= PC版・スマホ横：星力と山札（相手の星力・手札・山札も）を大きく ================= */
@media (min-width:601px) and (min-height:501px){
  .corner.tl,.corner.bl{width:clamp(88px,14%,128px)}
  .b-stat{padding:4px 12px;gap:7px}
  .b-stat span{font-size:13px}
  .b-stat b{font-size:20px}
  .stars{padding:8px 6px 6px;gap:6px 5px}
  .stars i{width:14px;height:14px}
  .stars b{font-size:22px}
  .stars b::before{font-size:13px}
}
@media (orientation:landscape) and (max-height:500px){
  .b-stat{padding:3px 8px;gap:5px}
  .b-stat span{font-size:12px}
  .b-stat b{font-size:18px}
  .stars{padding:6px 4px 4px;gap:5px 4px}
  .stars i{width:12px;height:12px}
  .stars b{font-size:20px}
  .stars b::before{font-size:12px}
}

/* ================= PC版：画面の右端にログをいつも出す（盤面は少し左へ寄せる）。横幅が足りない画面は「ログ」ボタンのまま ================= */
.b-logmini ol{list-style:none;margin:0;width:100%;overflow-y:auto;color:#e9e2ff;text-align:left}
.b-logmini li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-logmini li.turn{border-radius:6px;font-weight:700;color:#fff;background:rgba(122,92,214,.35)}
.b-logmini li.turn.foe{background:rgba(214,92,122,.3)}
.b-logmini li.turn:first-child{margin-top:0}
.b-logmini li.dmg{color:#ffc0c8}.b-logmini li.heal{color:#b8ffcf}.b-logmini li.dead{color:#a99cc9}.b-logmini li.const{color:#ffe08a}
.b-logmini li.end{font-weight:800;color:#ffe08a}
.b-logmini li.empty{text-align:center;color:#a99cc9;letter-spacing:.3em}
@media (min-width:1180px) and (min-height:501px){
  .b-wrap{--M:min(300px, calc(100vw - 940px));margin-right:var(--M)}   /* 右に --M の幅を空けて、盤面を左へ寄せる */
  .corner.tr{right:calc((900px - var(--M) - 100vw) / 2 + 16px)}         /* 上のボタン列は画面の右上の隅 */
  #bLogBtn{display:none}
  .b-logmini{display:flex;position:absolute;z-index:4;right:calc((900px - var(--M) - 100vw) / 2 + 16px);top:56px;width:calc(var(--M) - 32px);height:calc(100% - 72px);
    border-radius:14px;background:rgba(10,6,30,.6);border:1px solid rgba(232,203,140,.35);cursor:pointer;overflow:hidden}
  .b-logmini ol{padding:8px 8px;font-size:13px;line-height:1.6}
  .b-logmini li{padding:2px 6px}
  .b-logmini li.turn{margin-top:8px;padding:4px 8px}
  .b-logmini li.end{margin-top:8px}
}

/* 降参とターン終了のあいだを広めに（押し間違えないように） */
@media (min-width:601px) and (min-height:501px){
  .corner.br{gap:28px}
}
@media (orientation:landscape) and (max-height:500px){
  .corner.br{gap:20px}
}
@media (max-width:600px) and (orientation:portrait){
  .corner.br{gap:22px}                                /* スマホ縦：降参の上にターン終了が近すぎないように */
}

/* 逆境の星座：リーダーのHPが8以下の側は、星座の線を赤く光らせ、リーダーに「逆境」の印 */
.board.adv .lines line{stroke:rgba(255,120,150,.45)}
.board.adv .lines line.half{stroke:rgba(255,150,175,.9)}
.board.adv .lines line.lit{stroke:#ffa0b8;filter:drop-shadow(0 0 6px #ff4a7a)}
.leader-spot.adv .leader{filter:drop-shadow(0 0 10px rgba(255,70,120,.95))}
.leader-spot.adv::after{content:'逆境';position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);white-space:nowrap;pointer-events:none;
  padding:2px 9px;border-radius:99px;font-size:11px;font-weight:800;letter-spacing:.15em;color:#fff;background:linear-gradient(90deg,#c0284e,#ff6a8a);
  box-shadow:0 0 12px rgba(255,70,120,.8);animation:advPulse 1.4s ease-in-out infinite}
@keyframes advPulse{50%{box-shadow:0 0 4px rgba(255,70,120,.4)}}

/* 逆境に入った瞬間：星座の線が光って上下にひっくり返る（W → M → W） */
.adv-flip{position:absolute;pointer-events:none;z-index:8}
.adv-flip svg{width:100%;height:100%;overflow:visible;transform-origin:50% 50%;animation:advFlip 2s cubic-bezier(.5,0,.3,1) forwards}
.adv-flip line{stroke:#ff8aa8;stroke-width:3.5;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px #ff3a6a) drop-shadow(0 0 14px #ff3a6a)}
@keyframes advFlip{0%{opacity:0;transform:scaleY(1)}15%{opacity:1;transform:scaleY(1)}55%{opacity:1;transform:scaleY(-1)}100%{opacity:0;transform:scaleY(-1)}}
/* 逆境のあいだ：盤面の後ろに、赤い M形の「逆さ星座」の紋章を薄く */
.board.adv::before{content:'';position:absolute;inset:6% 8%;z-index:0;pointer-events:none;opacity:.2;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60'%3E%3Cpolyline points='8,52 29,8 50,40 71,8 92,52' fill='none' stroke='%23ff4a78' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cg fill='%23ffd0dc'%3E%3Ccircle cx='8' cy='52' r='2.6'/%3E%3Ccircle cx='29' cy='8' r='2.6'/%3E%3Ccircle cx='50' cy='40' r='2.6'/%3E%3Ccircle cx='71' cy='8' r='2.6'/%3E%3Ccircle cx='92' cy='52' r='2.6'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 0 8px rgba(255,60,110,.9));animation:advSigil 3s ease-in-out infinite}
@keyframes advSigil{50%{opacity:.32}}

/* 逆境の M形：リーダーは M の谷の②のさらに後ろへ下がる（位置は js/battle.js の advLeaderTop） */
.leader-spot{transition:top .7s cubic-bezier(.3,.8,.3,1)}
/* 守護座：リーダーを守る光 */
.leader.guarded{filter:drop-shadow(0 0 8px rgba(255,200,90,.95))}
.leader.guarded::after{content:'守護座';position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);white-space:nowrap;pointer-events:none;padding:2px 9px;border-radius:99px;
  font-size:11px;font-weight:800;letter-spacing:.12em;color:#2c1d10;background:linear-gradient(90deg,#d9a94e,#ffe9a8,#d9a94e);box-shadow:0 0 10px rgba(255,200,90,.7)}

/* ログ：どの画面でもスクロールしてさかのぼれる。長い行は折り返して全文を出す */
.b-logmini ol{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(232,203,140,.55) transparent}
.b-logmini li{white-space:normal;overflow:visible;text-overflow:clip;word-break:break-word}
.b-log{overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch}

/* 逆境（M形）のあいだ：盤面全体に赤紫のオーラがもやもやと漂う。カードの後ろ、星座の線と同じ高さ */
.board.adv::after{content:'';position:absolute;inset:-6% -3%;z-index:0;pointer-events:none;border-radius:40px;
  background:
    radial-gradient(38% 46% at 22% 35%,rgba(255,60,140,.6),transparent 70%),
    radial-gradient(34% 40% at 78% 62%,rgba(170,50,255,.58),transparent 70%),
    radial-gradient(30% 36% at 55% 22%,rgba(230,40,90,.5),transparent 72%),
    radial-gradient(40% 44% at 40% 80%,rgba(140,40,220,.52),transparent 72%);
  background-size:140% 140%,150% 150%,160% 160%,140% 140%;
  filter:blur(18px);mix-blend-mode:screen;opacity:.85;
  animation:advMist 9s ease-in-out infinite alternate,advMistPulse 3.4s ease-in-out infinite}
@keyframes advMist{
  0%{background-position:0% 0%,100% 100%,50% 0%,0% 100%}
  33%{background-position:30% 20%,70% 60%,80% 30%,20% 70%}
  66%{background-position:10% 50%,90% 30%,30% 60%,40% 40%}
  100%{background-position:40% 10%,60% 90%,60% 10%,10% 80%}}
@keyframes advMistPulse{0%,100%{opacity:.7}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.board.adv::after{animation:none}}

/* 相手リーダーを攻撃できるとき：赤い照準が回り、外へ広がる波紋と「攻撃できる」の札で、ひと目で分かるように */
.leader.target{animation:pulseT 1s ease-in-out infinite,leaderBeat 1s ease-in-out infinite}
.leader.target::before{inset:-14px;animation:spin 3.2s linear infinite;
  background:conic-gradient(from 0deg,#ff4d6a 0 10%,transparent 10% 15%,#ff4d6a 15% 35%,transparent 35% 40%,#ff4d6a 40% 60%,transparent 60% 65%,#ff4d6a 65% 85%,transparent 85% 90%,#ff4d6a 90%);
  -webkit-mask:radial-gradient(circle,transparent 63%,#000 65%,#000 71%,transparent 73%);mask:radial-gradient(circle,transparent 63%,#000 65%,#000 71%,transparent 73%)}
.leader.target::after{content:'⚔ 攻撃できる';position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);white-space:nowrap;pointer-events:none;
  padding:2px 10px;border-radius:99px;font-size:11px;font-weight:800;letter-spacing:.1em;color:#fff;background:linear-gradient(90deg,#d0204a,#ff5a7a);
  box-shadow:0 0 12px rgba(255,70,110,.85);animation:leaderTag 1s ease-in-out infinite}
.leader-spot.target::before{content:'';position:absolute;left:50%;top:50%;width:100%;height:100%;border-radius:50%;pointer-events:none;
  border:2px solid rgba(255,80,110,.9);transform:translate(-50%,-50%) scale(1);animation:leaderRipple 1.2s ease-out infinite}
@keyframes leaderBeat{50%{transform:scale(1.08)}}
@keyframes leaderTag{50%{transform:translateX(-50%) translateY(2px)}}
@keyframes leaderRipple{0%{opacity:.9;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.9)}}
@media (prefers-reduced-motion:reduce){.leader.target,.leader.target::before,.leader.target::after,.leader-spot.target::before{animation:none}}

/* 第2弾の呪文・道具：カードに付いた状態の印（吸血・茨・毒・癒し・身代わり・翼） */
.u-st{position:absolute;left:50%;top:-9px;transform:translateX(-50%);display:flex;gap:2px;z-index:5;pointer-events:none}
.u-st .st{font-style:normal;font-size:10px;font-weight:800;line-height:15px;min-width:15px;padding:0 3px;border-radius:99px;text-align:center;color:#fff;box-shadow:0 0 6px rgba(0,0,0,.6)}
.st-fang{background:#c0284e}.st-thorn{background:#3f8f5a}.st-poison{background:#6aa83a}.st-regen{background:#2fae7a}.st-doll{background:#c79a3a}.st-wing{background:#6a8fd8}

.st-ward{background:#3a6ad8}.st-first{background:#d8a43a}.st-bane{background:#6a2a8a}.st-dstrike{background:#d84a8a}.st-trample{background:#b8602a}.st-bard{background:#4a4a6a}.st-reborn{background:#e0b850;color:#2c1d10!important}
.st-ash{background:#e0602a}.st-mark{background:#8a2a6a}
/* スマホ縦：右上のボタンは、相手のリーダーの真上に並ばないよう、右上の角にまとめる（リーダーを狙うときの押し間違いを防ぐ） */
@media (max-width:600px) and (orientation:portrait){
  .corner.tr{width:auto;right:calc(4px + env(safe-area-inset-right));align-items:flex-end}
  .corner.tr .b-tools{display:grid;grid-template-columns:repeat(2,32px);gap:6px;margin:0;align-self:auto;direction:rtl}   /* 右上の角に2列×3段（✕ を角に） */
  .corner.tr .tool{direction:ltr}
  #bQuit{order:1}#bHelp{order:2}#bLogBtn{order:3}#bSound{order:4}#bVol{order:5}
  .corner.tr .tool{width:32px;height:32px;font-size:13px}
  .corner.tr .tool-log{width:32px;padding:0;font-size:10px;letter-spacing:0}
}
/* スマホ縦：音のボタンは音量ボタン1つにまとめ（ON／OFF も音量の窓で）、✕（退出）はなくす。対戦をやめるときは「降参」 */
@media (max-width:600px) and (orientation:portrait){
  #bSound,#bQuit{display:none}
}
#bVol{position:relative}
#bVol.off{opacity:.6}
#bVol.off::after{content:'';position:absolute;left:18%;right:18%;top:50%;height:2px;background:#ff8a9a;transform:rotate(-40deg);border-radius:2px}
/* 第3弾の呪文・道具の状態の印 */
.st-armor{background:#5a6a80}.st-grudge{background:#8a1a2a}.st-tyrant{background:#b8862c}.st-stealth{background:#2a2a3a}.st-grow{background:#4aa84a}.st-harvest{background:#a8862a}
.st-cleave{background:#3a7ab8}.st-legacy{background:#c8a04a}.st-recoil{background:#6a2a8a}.st-leash{background:#4a5a6a}.st-beacon{background:#d89a2a}.st-soul{background:#2a8aa8}.st-seal{background:#5a5aa8}
/* リーダーの状態の印（障壁・呪詛返し・罠など） */
.leader{position:relative}
.ld-st{position:absolute;left:calc(100% + 4px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-start;gap:2px;z-index:5;pointer-events:none;white-space:nowrap}
.ld-st .st{font-style:normal;font-size:10px;font-weight:800;line-height:15px;min-width:15px;padding:0 4px;border-radius:99px;text-align:center;color:#fff;box-shadow:0 0 6px rgba(0,0,0,.6)}
.st-barrier{background:#3a7ad8}.st-gate{background:#5a7aa8}.st-counter{background:#8a4ad8}.st-trap{background:#8a6a2a}.st-doom{background:#d8602a}.st-block{background:#a84a4a}
/* 豊穣の祈り：次に召喚する1枚が安い */
.st-disc{background:#4aa84a}
.hc-cost.disc i{color:#9cffb0;text-shadow:0 0 6px rgba(120,255,160,.9)}
/* ヘルプ：状態の印の一覧 */
.st-legend-h{margin:14px 0 4px;font-size:15px;letter-spacing:.12em;color:#ffd98a;text-align:left}
.st-legend-note{margin:0 0 8px;font-size:12px;color:#cfc4ee;text-align:left}
.st-legend{text-align:left}
.st-legend-sub{margin:8px 0 4px;font-size:12px;font-weight:800;color:#e6dcff;letter-spacing:.1em}
.st-legend ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:5px}
.st-legend li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.55;color:#e8e0f8}
.st-legend .st{flex:none;font-style:normal;font-size:11px;font-weight:800;line-height:18px;min-width:20px;padding:0 4px;border-radius:99px;text-align:center;color:#fff;box-shadow:0 0 6px rgba(0,0,0,.6);margin-top:1px}
/* 第4弾の呪文・道具の印 */
.st-invuln{background:#5a8ab8}.st-aegis{background:#8a8ad8}.st-reflect{background:#4aa8c8}.st-veng{background:#b83a4a}.st-guardian{background:#b8903a}.st-saddle{background:#3a9a6a}
.st-bomb{background:#e0502a}.st-bounty{background:#a8802a}
.st-lock{background:#7a6a3a}.st-crystal{background:#3a9ad8}.st-altar{background:#3aa86a}.st-chalice{background:#c8a84a}
/* 倍速モードのボタン（×1／×2） */
.tool-spd{width:auto;min-width:34px;padding:0 8px;border-radius:99px;font-size:12px;letter-spacing:.02em;white-space:nowrap}
.tool-spd.on{background:linear-gradient(180deg,#ffe08a,#e0a83a);color:#2a1a00;border-color:#fff3c8;box-shadow:0 0 10px rgba(255,210,110,.7)}
.corner.tr .tool-spd{min-width:30px;padding:0 4px;font-size:10px}