.battle-screen{background:#183018}
#battleCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}

.battle-top{
  position:absolute;top:0;left:0;right:0;display:flex;gap:var(--gap-3);align-items:center;
  padding:8px var(--gap-3);
  background:linear-gradient(rgba(40,28,12,.88),rgba(40,28,12,.35));
  color:var(--cream);z-index:2;
}
.base-hp{flex:1;display:flex;flex-direction:column;gap:2px;font-size:var(--fs-xs)}
.base-hp span{font-family:var(--font-display);font-size:var(--fs-sm)}
.base-hp b{font-size:11px;opacity:.85;font-family:var(--font-display)}
.hp-track{
  height:12px;border-radius:999px;background:rgba(0,0,0,.5);
  overflow:hidden;border:2px solid rgba(255,255,255,.28);
}
.hp-track i{display:block;height:100%;width:100%;transition:width .15s;border-radius:999px}
.player-hp .hp-track i{background:linear-gradient(180deg,#9aef7a,#4cba5c)}
.enemy-hp .hp-track i{background:linear-gradient(180deg,#c9a4ff,#9b78d4)}
.enemy-hp{text-align:right}
.battle-mid{display:flex;gap:var(--gap-2);align-items:center}
.battle-mid b{
  font-size:var(--fs-sm);font-family:var(--font-display);
  background:rgba(0,0,0,.4);border:2px solid rgba(255,255,255,.2);
  border-radius:999px;padding:4px 12px;
}
.battle-mid .icon-btn{min-width:42px;min-height:38px;font-size:var(--fs-sm)}

.battle-notice{
  position:absolute;top:58px;left:50%;transform:translateX(-50%);
  background:rgba(50,32,12,.88);color:#ffe27a;
  font-family:var(--font-display);font-size:var(--fs-md);
  padding:7px 20px;border-radius:999px;
  border:2px solid rgba(255,226,122,.4);pointer-events:none;z-index:2;
}
.edge-warn{
  position:absolute;top:40%;background:linear-gradient(180deg,var(--danger-hi),var(--danger));color:#fff;
  font-family:var(--font-display);padding:9px 12px;font-size:var(--fs-sm);
  animation:pulse .7s infinite alternate;z-index:5;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 0 #a83228;
}
.edge-warn.left{left:0;border-radius:0 14px 14px 0}
.edge-warn.right{right:0;border-radius:14px 0 0 14px}
@keyframes pulse{from{opacity:.75;transform:scale(1)}to{opacity:1;transform:scale(1.03)}}

.battle-bottom{
  position:absolute;left:0;right:0;bottom:0;display:flex;gap:var(--gap-2);align-items:stretch;
  padding:6px var(--gap-3);
  max-height:min(118px,24cqh);
  z-index:2;
  background:linear-gradient(rgba(28,20,8,.15),rgba(28,20,8,.92));
  box-sizing:border-box;
}
.mana-block{
  width:132px;max-width:26cqw;
  display:flex;flex-direction:column;gap:3px;color:var(--cream);
  justify-content:center;min-width:0;flex-shrink:0;
}
.mana-line{font-size:var(--fs-sm);line-height:1.15}
.mana-line b{color:#7ff0dd;font-size:var(--fs-xl)}
.mana-line small{font-size:var(--fs-xs);opacity:.85}
.mana-track{height:8px;border-radius:999px;background:rgba(0,0,0,.5);overflow:hidden;border:2px solid rgba(255,255,255,.2);flex-shrink:0}
.mana-track i{display:block;height:100%;width:0;background:linear-gradient(180deg,#a8fff0,#3ec9b8);border-radius:999px}
.mana-up-btn{
  position:relative;overflow:visible;
  margin-top:1px;
  background:linear-gradient(180deg,var(--teal-hi) 0%,var(--teal) 55%,var(--teal-dark) 100%);
  color:#043b34;font-family:var(--font-display);border-radius:10px;
  min-height:42px;height:auto;padding:5px 8px 4px;font-size:var(--fs-sm);line-height:1.2;
  border:2px solid #1b7d70;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.1),0 3px 0 #1b7d70;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  transition:transform .1s,box-shadow .1s,filter .15s;flex-shrink:0;
}
.mana-up-btn::after{
  content:"";position:absolute;left:12%;right:12%;top:2px;height:34%;
  border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.45),transparent);pointer-events:none;
}
.mana-up-title{
  position:relative;z-index:1;display:block;white-space:nowrap;font-size:var(--fs-sm);line-height:1.2;
}
.mana-up-title b{font-weight:400;font-size:inherit}
.mana-up-cost{
  position:relative;z-index:1;display:block;font-size:10px;line-height:1.2;opacity:.95;white-space:nowrap;
}
.mana-up-btn:disabled{filter:grayscale(.7);opacity:.55;box-shadow:none}
.mana-up-btn:hover:not(:disabled){filter:brightness(1.05)}
.mana-up-btn:active:not(:disabled){
  transform:translateY(2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 0 #1b7d70;
}
.energy-pot-btn{
  position:relative;flex:0 0 62px;align-self:stretch;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border:2px solid #4a8750;border-radius:12px;
  background:linear-gradient(180deg,#dffff0,#72d999 55%,#3ba867);
  color:#145236;font-family:var(--font-display);font-size:var(--fs-sm);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.7),0 3px 0 #287547;
}
.energy-pot-btn::before{content:"✦";font-size:18px;line-height:.8;color:#ffe47d;text-shadow:0 1px 0 #80661b}
.energy-pot-btn small{font-size:10px;line-height:1;color:#185439}
.energy-pot-btn.ready{animation:pot-ready 1.2s ease-in-out infinite alternate}
.energy-pot-btn:disabled{filter:grayscale(.7);opacity:.58;box-shadow:none}
@keyframes pot-ready{to{filter:brightness(1.14);box-shadow:inset 0 2px 0 rgba(255,255,255,.8),0 3px 0 #287547,0 0 12px rgba(135,255,188,.7)}}

.card-row-bar{
  flex:1;min-width:0;min-height:0;
  display:flex;align-items:stretch;gap:4px;
}
.card-scroll-btn{
  flex-shrink:0;align-self:stretch;
  width:34px;max-height:88px;border-radius:12px;border:2px solid var(--brown);
  background:linear-gradient(180deg,#fffef8,#ffe9c4 55%,#f0d8a8);
  color:var(--ink);font-size:14px;line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 3px 0 rgba(90,55,25,.22);
  transition:transform .1s,box-shadow .1s,filter .15s,opacity .15s;
}
.card-scroll-btn:hover{filter:brightness(1.04)}
.card-scroll-btn:active{
  transform:translateY(2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 0 rgba(90,55,25,.22);
}
.card-scroll-btn:disabled{opacity:.35;pointer-events:none;box-shadow:none}
.card-row-scroll{
  flex:1;min-width:0;min-height:0;
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,248,235,.35) transparent;
}
.card-row-scroll::-webkit-scrollbar{height:5px}
.card-row-scroll::-webkit-scrollbar-thumb{
  background:rgba(255,248,235,.35);border-radius:999px;
}
.card-row{
  display:flex;flex-wrap:nowrap;align-items:stretch;gap:6px;
  width:max-content;height:100%;
  padding:0 2px 2px;
}
.summon-card{
  position:relative;overflow:hidden;border-radius:12px;border:2px solid var(--brown);
  background:linear-gradient(180deg,#fffef8 0%,#ffe9c4 60%,#f0d8a8 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;
  flex:0 0 auto;
  width:clamp(56px, 9.5cqw, 78px);
  height:100%;max-height:88px;
  min-height:0;box-sizing:border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 3px 0 rgba(90,55,25,.25);
  transition:transform .1s,box-shadow .1s;
}
.summon-card img{
  width:min(34px,7.5cqh);height:min(34px,7.5cqh);flex-shrink:0;pointer-events:none;
  object-fit:contain;object-position:center bottom;
}
.summon-card .cost{font-size:var(--fs-sm);color:#0f7d6d;line-height:1}
.summon-card .lv{
  position:absolute;top:2px;left:4px;
  font-size:10px;font-family:var(--font-display);color:var(--green-dark);
}
.summon-card .cd-mask{
  position:absolute;inset:0;background:rgba(30,18,6,.65);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:var(--font-display);font-size:var(--fs-lg);pointer-events:none;
}
.summon-card.poor .cost{color:var(--danger)}
.summon-card.poor{filter:saturate(.45)}
.summon-card.full{filter:saturate(.35)}
.summon-card.empty{opacity:.35;border-style:dashed;background:rgba(255,248,235,.35);box-shadow:none}
.summon-card:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 0 rgba(90,55,25,.25)}

.battle-overlay{position:absolute;inset:0;background:rgba(10,8,2,.55);display:flex;z-index:10}
#screen-result{
  background:rgba(16,26,12,.9);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:10px;overflow:auto;-webkit-overflow-scrolling:touch;
  box-sizing:border-box;
}
.result-dialog{
  width:min(400px,100%);
  min-width:0;
  max-width:100%;
  max-height:100%;
  margin:auto;
  flex-shrink:0;
  box-sizing:border-box;
  overflow:hidden;
  gap:0;
  padding:0;
}
.result-dialog-body{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:18px 18px 10px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  scrollbar-width:thin;
}
.result-dialog-actions{
  flex-shrink:0;width:100%;
  padding:10px 18px 16px;
  display:flex;flex-direction:column;align-items:stretch;gap:8px;
  background:linear-gradient(180deg,rgba(255,248,235,.85),rgba(255,240,214,.98));
  border-top:2px solid rgba(90,55,25,.12);
  box-shadow:0 -6px 14px rgba(70,48,20,.06);
}
.result-dialog-actions .primary-btn,
.result-dialog-actions .text-btn{width:100%;box-sizing:border-box}
.result-label{font-size:var(--fs-sm);letter-spacing:4px;color:var(--orange-dark);margin:0}
#resultTitle{font-size:var(--fs-2xl);text-align:center;line-height:1.25}
.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-2);width:100%}
.result-stats div{
  background:var(--cream-2);border-radius:12px;padding:8px 12px;
  display:flex;justify-content:space-between;font-size:var(--fs-sm);
}
.result-stats dd{font-family:var(--font-display);font-size:var(--fs-md)}
.result-unlock{
  background:linear-gradient(180deg,var(--purple-hi),var(--purple));color:#fff;
  border-radius:12px;padding:8px 16px;font-family:var(--font-display);font-size:var(--fs-md);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 0 var(--purple-dark);
  text-align:center;width:100%;box-sizing:border-box;
}