/* lane-battle.css: battle readability (owned by the battle lane). Loads after battle.css / board.css / fx.css. */

/* ---- duel layout: each board sits directly above its hero + status card, heroes face the centre on one ground line ---- */
.battlefield { grid-template-rows: auto 1fr; min-height: min(640px, calc(100svh - 150px)); }
.bf-duel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; align-items: end; min-width: 0; }
.bf-col { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; justify-content: flex-end; }
.bf-col .board-wrap { background: none; box-shadow: none; padding: 0; position: relative; }
.bf-hero-row { display: flex; align-items: flex-end; gap: 4px; width: 100%; justify-content: center; padding-bottom: 6px; }
.bf-col.a .bf-hero-row { justify-content: flex-end; }
.bf-col.b .bf-hero-row { justify-content: flex-start; }
.bf-duel .stage { width: 210px; height: 330px; margin: 0 -14px; }
.bf-duel .status-card { width: 232px; flex: none; border-radius: 6px; }
@media (max-width: 900px) {
  .battlefield { min-height: 0; }
  .bf-duel { grid-template-columns: 1fr; gap: 6px; }
  .bf-col.a .bf-hero-row, .bf-col.b .bf-hero-row { justify-content: center; }
  .bf-duel .stage { width: 84px; height: 130px; margin: 0; }
  .bf-duel .status-card { flex: 1; width: auto; min-width: 0; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .battlefield { min-height: 0; padding-top: 24px; }
  .bf-duel { grid-template-columns: 1fr 1fr; gap: 4px 8px; }
  .bf-duel .stage { width: 70px; height: 100px; margin: 0; }
  .bf-duel .status-card { width: auto; flex: 1; min-width: 0; }
  .bf-col .board-wrap { transform: scale(.85); transform-origin: 50% 100%; }
}

/* ---- per-item cooldown clocks ---- */
.piece .cd-bar { position: absolute; left: 2px; right: 2px; bottom: 1px; height: 6px; z-index: 7; pointer-events: none; border-radius: 3px; overflow: hidden;
  background: rgba(10,8,4,.82); box-shadow: 0 0 0 1px #000; }
.piece .cd-fill { display: block; width: 100%; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(#ffe08a, #e0a020); will-change: transform; }
.piece .cd-bar.soon .cd-fill { background: linear-gradient(#fff6c8, #ffd34a); animation: cdsoon .28s ease-in-out infinite alternate; }
.piece .cd-bar.tired .cd-fill { background: linear-gradient(#ff8a7a, #a3241c); }
.piece .cd-badge { position: absolute; right: 2px; top: 2px; z-index: 8; pointer-events: none; font: bold 11px/14px var(--font-body, sans-serif); padding: 0 5px; border-radius: 7px;
  color: #fff3c4; background: rgba(12,8,2,.9); box-shadow: 0 0 0 1px #8a6200; }
.piece .cd-badge.full { color: #1a1000; background: #ffd34a; }
.piece .cd-badge[hidden], .piece .cd-bar[hidden] { display: none; }
@keyframes cdsoon { to { filter: brightness(1.4); } }

/* ---- bag-Tetris grid + footprints ---- */
.bg-layer { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.bg-cell { position: absolute; box-sizing: border-box; border: 1px solid rgba(0,0,0,.38); background: rgba(255,255,255,.035); }
.bg-fp { position: absolute; overflow: visible; }
.bg-fp path { fill: none; stroke: var(--qc, #fff); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: .55; }

/* ---- item pop (replaces the 0.32s brightness blink from board.css) ---- */
.piece.flash .frame, .piece.flash .cell.fill, .piece.has-art.flash .art, .piece.item.shaped.flash .frame.shape, .piece.item.has-sprite.flash .sprite-holder { animation: none; }
.piece.flash { animation: itempop .38s cubic-bezier(.2,.9,.3,1.2); z-index: 5; }
.piece.flash::after { content: ""; position: absolute; inset: -2px; border-radius: 7px; pointer-events: none; z-index: 8;
  box-shadow: 0 0 0 2px var(--ring, #ffd34a), 0 0 14px var(--ring, #ffd34a); animation: ringfade .42s ease-out forwards; }
@keyframes itempop { 0% { transform: none; } 35% { transform: translateY(-3px) scale(1.12); } 100% { transform: none; } }
@keyframes ringfade { from { opacity: 1; } to { opacity: 0; } }
.piece .proc-tag { position: absolute; left: 50%; top: -6px; z-index: 9; pointer-events: none; transform: translateX(-50%); font: bold 11px/14px var(--font-body, sans-serif); font-style: normal;
  padding: 0 6px; border-radius: 7px; color: #fff; background: rgba(12,8,2,.92); box-shadow: 0 0 0 1px #ffd34a; animation: proctag .9s ease-out forwards; white-space: nowrap; }
.piece .proc-tag.crit { color: #ffd34a; }
@keyframes proctag { 0% { opacity: 0; transform: translate(-50%, 6px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -12px); } }
.piece.charged::before { content: ""; position: absolute; inset: -3px; z-index: 8; pointer-events: none; border-radius: 8px; padding: 2px;
  background: conic-gradient(from 0deg, #ffd34a, #ff7a3a, #ffd34a); -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: chargespin 1.6s linear infinite; }
@keyframes chargespin { to { filter: hue-rotate(40deg) brightness(1.3); } }
.piece.src-hl { outline: 2px solid #fff; outline-offset: 2px; z-index: 6; }

/* ---- persistent state overlays on the hero stage ---- */
.st-ward { position: absolute; inset: 8% 14% 4%; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .25s; z-index: 3;
  background: radial-gradient(closest-side, rgba(143,183,255,.05), rgba(143,183,255,.32)); box-shadow: 0 0 0 2px rgba(180,210,255,.7), 0 0 22px rgba(120,170,255,.7); }
.st-ward.on { opacity: 1; }
.st-mark { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); font-size: 54px; line-height: 1; color: #ff4a3a; text-shadow: 0 0 10px #ff4a3a, 0 0 2px #000;
  pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 3; }
.st-mark.on { opacity: .9; animation: markspin 3s linear infinite; }
@keyframes markspin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.exec-notch { position: absolute; top: -2px; bottom: -2px; width: 0; border-left: 2px solid #ff4a3a; pointer-events: none; z-index: 3; box-shadow: 0 0 4px #ff4a3a; }

/* ---- HP duel bar: instant fill + pale lag layer, big numbers, low-HP pulse ---- */
.hpbar { height: 26px; }
.bar .fill.lag { background: linear-gradient(#f4e8c0, #c9b98a); opacity: .85; transition: width .4s ease-out .12s; box-shadow: none; }
.hpbar span { font-size: 16px; font-weight: bold; position: relative; z-index: 2; }
.srow2.hprow { grid-template-columns: 1fr; }
.srow2.hprow > span { display: none; }
.srow2.empty { display: none; }
.srow2:not(.hprow) > span { font-size: 11px; opacity: .8; }
.status-card.lowhp { animation: lowhp 1s ease-in-out infinite; }
@keyframes lowhp { 50% { box-shadow: 0 0 0 2px #e0443a, 0 0 18px #e0443a; } }
.battlefield.stalemate::after, .battlefield.late::after, .battlefield.fatigue::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.battlefield.late::after { box-shadow: inset 0 0 70px rgba(255,170,40,.28); }
.battlefield.fatigue::after { box-shadow: inset 0 0 90px rgba(224,68,58,.38); }
.battlefield.stalemate::after { background: radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(120,130,150,.55)); }
.battlefield.stalemate { filter: saturate(.55); }
.fatigue-banner { position: absolute; left: 50%; top: 44px; transform: translateX(-50%); z-index: 12; padding: 3px 14px; border-radius: 12px; pointer-events: none; font-weight: bold; font-size: 13px;
  color: #ffd2c8; background: rgba(60,8,4,.88); box-shadow: 0 0 0 1px #e0443a; white-space: nowrap; }
.fatigue-banner[hidden] { display: none; }
.bf-ctrl .clock { min-width: 74px; }

/* ---- round intro card ---- */
.round-intro { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); z-index: 25; text-align: center; padding: 14px 34px; border-radius: 6px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.78) 18%, rgba(0,0,0,.78) 82%, transparent); transition: opacity .35s; animation: introin .3s ease-out; }
.round-intro.out { opacity: 0; }
.round-intro b { display: block; font-family: var(--font-head); font-size: clamp(30px, 8vw, 54px); color: var(--gold); text-shadow: 0 3px 0 #000; font-weight: normal; }
.round-intro small { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #f1d58a; }
.round-intro span { font-size: 15px; color: #e8dcc0; }
@keyframes introin { from { opacity: 0; transform: translate(-50%, -40%); } }

/* ---- skip prominence ---- */
.skip-btn.prominent { background: var(--gold); color: #2a1a00; border-color: #000; animation: skippulse 1.1s ease-in-out infinite; }
@keyframes skippulse { 50% { box-shadow: 0 0 0 3px rgba(255,209,0,.45); } }

/* ---- result: a bottom sheet so Continue is always on screen; the recap scrolls under it ---- */
.bf-result.has-recap { position: fixed; left: 0; right: 0; bottom: 0; top: auto; transform: none; width: auto; max-height: 52svh; overflow-y: auto; z-index: 40; padding: 0 8px 8px;
  background: linear-gradient(rgba(14,10,6,0), rgba(14,10,6,.94) 14px); overscroll-behavior: contain; }
.bf-result.has-recap .banner { position: sticky; top: 0; z-index: 2; margin: 0 auto 6px; padding: 8px 16px 10px; max-width: 560px; }
.bf-result.has-recap .banner h1 { font-size: clamp(26px, 7vw, 40px); }
.bf-result.has-recap .banner p { margin: 2px 0 8px; font-size: 13px; }
.fight-recap { max-width: 560px; margin: 0 auto; text-align: left; font-size: 13px; }
.fr-head { display: flex; justify-content: space-between; padding: 4px 6px; color: #f1d58a; font-size: 12px; border-bottom: 1px solid #3a2a14; }
.fr-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 6px; background: rgba(0,0,0,.35); border: 0; border-bottom: 1px solid #241a0c; color: var(--text); text-align: left; cursor: pointer; font: inherit; min-height: 40px; }
.fr-row.mvp { background: rgba(255,209,0,.12); }
.fr-row.idle .fr-sub { color: #ff9a8a; }
.fr-ico { width: 30px; height: 30px; border-radius: 4px; flex: none; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--qc); }
.fr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fr-name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-name em { color: var(--gold); font-style: normal; font-weight: bold; }
.fr-bar { display: block; height: 5px; background: #120d06; border-radius: 3px; overflow: hidden; }
.fr-bar i { display: block; height: 100%; }
.fr-bar .dmg { background: #e0603a; }
.fr-bar .heal { background: #3fd65a; }
.fr-bar .blk { background: #6f9bff; }
.fr-sub { font-size: 11px; color: #a39578; min-height: 13px; }
.fr-num { font-size: 12px; text-align: right; flex: none; max-width: 38%; color: #f1e6c8; }
.fr-foe { margin-top: 4px; }
.fr-foe summary { padding: 6px; cursor: pointer; color: #f1d58a; font-size: 12px; }
.fr-moments { padding: 6px; font-size: 12px; }
.fr-mom { display: flex; gap: 8px; padding: 2px 0; }
.fr-mom i { font-style: normal; color: #a39578; min-width: 40px; }

@media (prefers-reduced-motion: reduce) {
  .piece.flash { animation: none; }
  .piece .proc-tag { animation: none; opacity: 1; }
  .st-mark.on, .piece.charged::before, .skip-btn.prominent, .status-card.lowhp, .piece .cd-bar.soon .cd-fill, .round-intro { animation: none; }
  .bar .fill.lag, .round-intro { transition: none; }
}

/* owner 11-06 'make it fullscreen larger': on desktop the arena takes the whole viewport height and the heroes scale with it */
@media (min-width: 901px) { #app[data-screen="battle"] { max-width: 1600px; }
  .battlefield { min-height: calc(100svh - 40px); --stage-h: clamp(300px, 46svh, 560px); }
  .bf-duel .stage, .bf-ground .stage { height: var(--stage-h); width: calc(var(--stage-h) * 0.645); margin: 0 calc(var(--stage-h) * -0.045); }
  .battlefield { grid-template-rows: auto minmax(0, 1fr); }
  .bf-duel { align-self: center; align-items: end; padding-bottom: 4svh; }
  .bf-col { gap: 2svh; } }