/* Lakbay battle and result screens. Classes start with lkb-. Shared particle rules (lk-fx, lk-p, lk-float, lk-offer, lk-stars) are copied from lakbay.css. */
.lkb, .lkb *, .lkb *::before, .lkb *::after { box-sizing: border-box; }
.lkb { container-type: size; background: #1c1222; overflow: hidden; color: var(--cream, #ffe2a0); --pm: #e0a050; }
.lkb-bg-wrap { position: absolute; inset: 0; overflow: hidden; }
.lkb-bg { position: absolute; inset: 0; background: #2b1d33 center 60% / cover no-repeat; transform: scale(2.3); transform-origin: 50% 62%; filter: blur(3px) brightness(.78); }
.lkb-ground { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 180, 90, .1), rgba(43, 29, 51, 0) 35%, rgba(28, 18, 34, .55) 100%), radial-gradient(ellipse 80% 22% at 50% 66%, rgba(20, 14, 8, .35), transparent 70%); }

/* plates */
.lkb-plate { position: absolute; top: 52px; z-index: 3; display: grid; gap: 5px; width: min(290px, 40%); padding: 8px 12px; background: rgba(43, 29, 51, .9); border: 2px solid var(--amber, #e0a050); border-radius: 14px; box-shadow: 0 4px 0 var(--ink, #120a18); }
.lkb-plate > * { min-width: 0; }
.lkb-plate h3 > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lkb-pm { left: 8px; } .lkb-pf { right: 8px; }
.lkb-plate h3 { font-size: 17px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lkb-plate h3 small { font: 800 12px Nunito, sans-serif; color: var(--muted, #d9b98a); white-space: nowrap; }
.lkb-row { display: flex; align-items: center; gap: 8px; }
.lkb-row > span:first-child:not(.lkb-chip) { width: 24px; font-size: 11px; font-weight: 800; flex: none; }
.lkb-row .lkb-bar { flex: 1; }
.lkb-xp .lkb-bar { height: 10px; }
.lkb-bar { position: relative; height: 15px; background: var(--plum-d, #1c1222); border: 2px solid var(--amber, #e0a050); border-radius: 999px; overflow: hidden; }
.lkb-bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--hp, #6fbf5a); transition: width .25s; }
.lkb-bar.mp i { background: var(--mp, #5aa7e0); } .lkb-bar.foe i { background: var(--foe, #e0605a); } .lkb-bar.xp i { background: var(--xp, #e0a050); }
.lkb-bar.atk i { background: #ff9a3a; transition: none; }
.lkb-bar b { position: absolute; right: 8px; top: -1px; font-size: 10px; font-weight: 800; color: #fffaf0; text-shadow: 0 1px 0 #000; }
.lkb-xp .lkb-bar b { display: none; }
.lkb-chip { display: inline-block; font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--c, #888); color: #1c1222; text-transform: uppercase; letter-spacing: .05em; width: auto; }
.lkb-pf .lkb-row > .lkb-chip { flex: none; }
.lkb-status { min-height: 14px; font-size: 12px; font-weight: 800; color: #ffd23f; }
.lkb-pips { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; }
.lkb-pips i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #ff9a3a; display: block; }
.lkb-pips i.on { background: #ff9a3a; box-shadow: 0 0 10px #ff9a3a; }
.lkb-pips i.full { animation: lkb-glow .8s ease-in-out infinite alternate; }
@keyframes lkb-glow { to { box-shadow: 0 0 16px 3px #ffcf6a; background: #ffcf6a; } }

/* the element tip pill */
.lkb-tip { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 4; padding: 5px 16px; border-radius: 999px; font: 700 15px Fredoka, Nunito, sans-serif; background: rgba(43, 29, 51, .88); border: 2px solid #8a7a60; white-space: nowrap; max-width: calc(100% - 330px); overflow: hidden; text-overflow: ellipsis; }
.lkb-tip.good { border-color: #ffd23f; color: #ffe98a; box-shadow: 0 0 14px rgba(255, 210, 63, .45); }

/* field: lead spirit big in front, avatar small behind, wild spirit on the right */
.lkb-field { position: absolute; left: 0; right: 0; top: 22%; bottom: 31%; z-index: 2; }
.lkb-fig { position: absolute; bottom: 0; display: grid; place-items: end center; }
.lkb-fig::after { content: ""; position: absolute; left: 50%; bottom: -3%; width: 72%; height: 9%; transform: translateX(-50%); border-radius: 50%; background: rgba(10, 6, 14, .5); filter: blur(4px); z-index: -1; }
.lkb-fig.lkb-mine { left: 10%; height: 100%; aspect-ratio: 1; }
.lkb-fig.lkb-foe { right: 7%; height: 92%; aspect-ratio: 1; }
.lkb-fig > .lkb-sp { display: block; height: 100%; width: 100%; object-fit: contain; position: relative; }
.lkb-fig.lkb-foe > .lkb-sp { transform: scaleX(-1); }
.lkb-fig.lkb-foe.lkb-in > .lkb-sp { animation: lkb-in .5s ease-out; }
@keyframes lkb-in { from { translate: 80px 0; opacity: 0; } }
/* the avatar is big and faces the wild spirit; the lead spirit is small on the avatar's back, facing the same way */
.lkb-fig .lkb-av { position: absolute; left: 60%; bottom: 3%; image-rendering: pixelated; } /* a canvas; lakbay-battle.js sets its size in whole pixel steps */
.lkb-px { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.lkb-fig.lkb-mine > .lkb-sp { position: absolute; left: 14%; bottom: 36%; width: 42%; height: 42%; z-index: 2; }
.lkb-fig.lkb-mine::before { content: ""; position: absolute; left: 34%; bottom: 0; width: 42%; height: 5%; border-radius: 50%; background: rgba(10, 6, 14, .45); filter: blur(3px); }

/* log and action bar */
.lkb-bottom { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 4; display: grid; gap: 6px; justify-items: center; }
.lkb-log { max-width: 100%; padding: 5px 16px; border-radius: 999px; background: rgba(28, 18, 34, .82); border: 2px solid rgba(224, 160, 80, .6); font-size: 14px; font-weight: 700; text-align: center; }
.lkb-barwrap { position: relative; max-width: 100%; }
.lkb-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 8px; background: rgba(43, 29, 51, .88); border: 2px solid var(--amber, #e0a050); border-radius: 16px; box-shadow: 0 4px 0 var(--ink, #120a18); }
.lkb-a { position: relative; width: 92px; min-height: 84px; padding: 8px 4px 6px; display: grid; justify-items: center; align-content: center; gap: 1px; overflow: hidden; background: #14202c; border: 2px solid var(--c, #5a8ad0); border-radius: 14px; }
.lkb-a.lkb-sk { background: color-mix(in srgb, var(--c) 14%, #1f1630); }
.lkb-a.lkb-bagbtn { border-color: #e0a050; background: #2a2012; } .lkb-a.lkb-runbtn { border-color: #e0605a; background: #2a1618; }
.lkb-a.super { box-shadow: 0 0 0 2px var(--c), 0 0 18px 3px color-mix(in srgb, var(--c) 70%, transparent); animation: lkb-pulse 1.2s ease-in-out infinite alternate; }
@keyframes lkb-pulse { to { box-shadow: 0 0 0 2px var(--c), 0 0 26px 7px color-mix(in srgb, var(--c) 75%, transparent); } }
.lkb-a .lkb-ic { display: block; line-height: 0; color: var(--c, #cfe4ff); } .lkb-a.lkb-bagbtn .lkb-ic { color: #e0a050; } .lkb-a.lkb-runbtn .lkb-ic { color: #ff8a80; }
.lkb-a .lkb-ic svg { width: 30px; height: 30px; }
.lkb-a b { font: 700 13px/1.1 Fredoka, sans-serif; text-align: center; }
.lkb-a small { font-size: 11px; color: var(--muted, #d9b98a); font-weight: 800; }
.lkb-a kbd { position: absolute; left: 6px; top: 3px; font: 800 11px Nunito, sans-serif; opacity: .75; }
.lkb.touch .lkb-a kbd { display: none; }
.lkb-x2 { position: absolute; right: 5px; top: 4px; font: 800 11px Nunito, sans-serif; font-style: normal; padding: 0 6px; border-radius: 999px; background: var(--c); color: #1c1222; }
.lkb-a::after { content: ""; position: absolute; inset: 0; background: conic-gradient(rgba(0, 0, 0, .62) calc(var(--cd, 0) * 1turn), transparent 0); pointer-events: none; }
.lkb-a.dim { opacity: .55; }
.lkb-a.pend { opacity: 1; box-shadow: 0 0 0 2px #8fd3ff, 0 0 14px 2px #8fd3ff88; } /* pressed, not performed yet: no cooldown runs */
.lkb-a.pend small::after { content: " · ..."; color: #8fd3ff; }
.lkb-bag { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 6; display: grid; gap: 6px; min-width: 220px; padding: 8px; background: var(--plum, #2b1d33); border: 2px solid var(--amber, #e0a050); border-radius: 14px; box-shadow: 0 4px 0 var(--ink, #120a18); }
.lkb-bag:empty::before { content: "Your bag is empty."; font-weight: 700; padding: 4px 8px; }
.lkb-item { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; padding: 6px 10px; text-align: left; background: #2a2012; border: 2px solid #e0a050; border-radius: 10px; }
.lkb-item .lkb-ic { line-height: 0; color: #e0a050; } .lkb-item .lkb-ic svg { width: 22px; height: 22px; }
.lkb-item b { font: 700 14px Fredoka, sans-serif; } .lkb-item small { font-size: 12px; font-weight: 800; color: var(--muted, #d9b98a); }
.lkb-item.dim { opacity: .5; }
.lkb button:focus-visible { outline: 3px solid #8fd3ff; outline-offset: 2px; }

/* the sound and full-screen controls never cover the plates or the log */
.lk[data-screen="battle"] .lk-snd { top: 8px; right: 8px; left: auto; bottom: auto; transform: none; z-index: 10; }

/* effects (copied from lakbay.css) */
.lkb .lk-fx { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.lkb .lk-p { position: absolute; display: block; pointer-events: none; will-change: transform; }
.lkb .lk-float { position: absolute; z-index: 6; font: 700 30px "Pixelify Sans", Fredoka, sans-serif; color: #fff; text-shadow: 0 2px 0 #000, 0 0 10px rgba(0, 0, 0, .7); pointer-events: none; animation: lkb-up 1s ease-out forwards; white-space: nowrap; }
.lkb .lk-float.dmg { color: #ffd23f; } .lkb .lk-float.hurt { color: #ff7a6a; } .lkb .lk-float.heal { color: #7fe0a0; }
.lkb .lk-float.word { font-size: 40px; color: #ff9a3a; letter-spacing: .06em; }
.lkb .lk-float.fin { font-size: 44px; color: #ff5ab0; }
@keyframes lkb-up { from { transform: translate(-50%, 0) scale(.6); opacity: 0; } 15% { transform: translate(-50%, -10px) scale(1.15); opacity: 1; } to { transform: translate(-50%, -70px) scale(1); opacity: 0; } }
.lkb .lk-stars { position: absolute; left: 50%; top: 2%; width: 0; height: 0; pointer-events: none; }
.lkb .lk-stars i { position: absolute; left: -13px; top: -13px; font: normal 26px/1 Fredoka, sans-serif; color: #ffd23f; text-shadow: 0 0 6px #ff9a3a; animation: lkb-orbit 1.1s linear infinite; }
.lkb .lk-stars i:nth-child(2) { animation-delay: -.37s; } .lkb .lk-stars i:nth-child(3) { animation-delay: -.73s; }
@keyframes lkb-orbit { from { transform: rotate(0) translateX(64px) scaleY(.35) rotate(0); } to { transform: rotate(360deg) translateX(64px) scaleY(.35) rotate(-360deg); } }
.lkb .lk-offer { position: absolute; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 3px solid #a87b45; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 60%, #fff), var(--c) 70%); box-shadow: 0 0 12px var(--c); }
.lkb .lk-offer.t2 { border-color: #a9c4dc; } .lkb .lk-offer.t3 { border-color: #f0c64a; box-shadow: 0 0 18px 4px #f0c64a, 0 0 12px var(--c); }
.lkb .lk-ghost { --c: #888; -webkit-mask: url(/static/games/lakbay/spirits/bakunawa.webp) center / contain no-repeat; mask: url(/static/games/lakbay/spirits/bakunawa.webp) center / contain no-repeat; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 60%, color-mix(in srgb, var(--c) 60%, #000)); }

/* result */
.lkb-center { position: absolute; inset: 0; display: grid; place-items: safe center; padding: 14px; overflow: auto; background: rgba(18, 10, 24, .45); z-index: 3; }
.lkb-card { width: min(460px, 100%); display: grid; gap: 12px; justify-items: center; text-align: center; padding: 18px 20px; background: var(--plum, #2b1d33); border: 2px solid var(--amber, #e0a050); border-radius: 18px; box-shadow: 0 5px 0 var(--ink, #120a18); animation: lkb-card .35s ease-out; }
@keyframes lkb-card { from { transform: translateY(18px) scale(.95); opacity: 0; } }
.lkb-card h2 { font-size: 28px; }
.lkb-art { height: 170px; width: 170px; display: grid; place-items: center; }
.lkb-art .lkb-sp { height: 100%; width: 100%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45)); }
.lkb-artwrap { position: relative; }
.lkb-stamp { position: absolute; right: -48px; top: 8px; transform: rotate(10deg); padding: 3px 10px; border: 3px solid #ff5ab0; border-radius: 8px; color: #ff8acb; background: rgba(28, 18, 34, .85); font: 800 13px Nunito, sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; animation: lkb-stamp .4s ease-out .3s backwards; }
@keyframes lkb-stamp { from { transform: rotate(10deg) scale(2.2); opacity: 0; } }
.lkb-lore { margin: 0; color: var(--muted, #d9b98a); font-size: 14px; line-height: 1.4; }
.lkb-text { margin: 0; color: var(--muted, #d9b98a); }
.lkb-chips { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.lkb-reward { padding: 3px 12px; border-radius: 999px; font-weight: 800; font-size: 14px; background: #3b2848; border: 2px solid var(--amber, #e0a050); }
.lkb-reward.coin { color: #ffd23f; } .lkb-reward.hp { color: #7fe0a0; } .lkb-reward.xp { color: #ffb86a; }
.lkb-xpwrap { width: 100%; display: grid; gap: 4px; }
.lkb-xptop { display: flex; justify-content: space-between; font-weight: 800; }
.lkb-xptop small { color: var(--muted, #d9b98a); font-size: 12px; }
.lkb-bar.big { height: 16px; }
.lkb-levelup { margin: 0; font: 700 18px Fredoka, sans-serif; color: #ffd23f; }
.lkb-go { min-height: 44px; padding: 8px 28px; font-weight: 800; background: var(--amber, #e0a050); color: #3a1a05; border: 2px solid #ffd58a; border-radius: 12px; box-shadow: 0 3px 0 var(--ink, #120a18); }
.lkb-go:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink, #120a18); }

/* phone: the stage is under 560px wide */
@container (max-width: 559px) {
  .lkb-plate { width: calc(50% - 12px); top: 46px; padding: 5px 8px; gap: 3px; }
  .lkb-plate h3 { font-size: 14px; }
  .lkb-plate h3 small { font-size: 10px; }
  .lkb-row > span:first-child:not(.lkb-chip) { width: 18px; font-size: 10px; }
  .lkb-bar { height: 12px; } .lkb-bar b { font-size: 9px; top: -2px; }
  .lkb-pips { font-size: 10px; gap: 4px; } .lkb-pips i { width: 11px; height: 11px; }
  .lkb-pm .lkb-xp { display: none; }
  .lkb-tip { left: 8px; transform: none; font-size: 13px; padding: 3px 12px; max-width: calc(100% - 150px); }
  .lkb-field { top: 27%; bottom: 36%; }
  .lkb .lkb-chain { right: auto; left: 8px; top: 38%; transform-origin: left center; }
  .lkb-fig.lkb-foe { right: -1%; height: 66%; }
  .lkb-fig.lkb-mine { left: 4%; height: 80%; }
  .lkb-bottom { left: 4px; right: 4px; bottom: 4px; gap: 4px; }
  .lkb-log { font-size: 12px; padding: 3px 12px; }
  .lkb-acts { gap: 5px; padding: 5px; width: 100%; }
  .lkb-a { width: calc(25% - 4px); min-height: 62px; padding: 6px 2px 4px; }
  .lkb-a .lkb-ic svg { width: 24px; height: 24px; }
  .lkb-a b { font-size: 11px; } .lkb-a small { font-size: 10px; }
  .lkb-barwrap { width: 100%; }
  .lkb-bag { min-width: 0; left: 0; right: 0; }
  .lkb-card h2 { font-size: 24px; }
  .lkb-art { height: 140px; width: 140px; }
  .lkb-stamp { right: -20px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .lkb:not(.fx-full) *, .lkb:not(.fx-full) *::before { animation: none !important; transition: none !important; } }
/* a guardian fight: a gold plate with a "Guardian" badge */
.lkb-plate.guardian { border-color: var(--amber, #e0a050); box-shadow: 0 0 16px rgba(224, 160, 80, .5); }
.lkb-crown { display: inline-block; width: max-content; margin-bottom: 2px; padding: 0 9px; border-radius: 99px; background: var(--amber, #e0a050); color: var(--ink, #120a18); font: 800 10px/1.5 Nunito, sans-serif; letter-spacing: .1em; text-transform: uppercase; }

/* the Finisher button: a meter while the combo fills, gold when it is ready */
.lkb-a.lkb-fin { --c: #ff9a3a; background: #2a1a10; border-color: #6b4a2a; }
.lkb-a.lkb-fin .lkb-ic { color: #8a6a4a; }
.lkb-meter { position: absolute; left: 8px; right: 8px; bottom: 4px; height: 4px; border-radius: 2px; background: #3d2a1a; overflow: hidden; }
.lkb-meter i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: #ff9a3a; transition: width .2s; }
.lkb.fin-ready .lkb-a.lkb-fin { background: linear-gradient(170deg, #ffe08a, #ff9a3a 60%, #e0702a); border-color: #fff3d0; color: #2a1405; animation: lkb-finpulse .8s ease-in-out infinite alternate; }
.lkb.fin-ready .lkb-a.lkb-fin .lkb-ic, .lkb.fin-ready .lkb-a.lkb-fin small { color: #5a2a08; }
.lkb.fin-ready .lkb-meter { display: none; }
@keyframes lkb-finpulse { from { box-shadow: 0 0 0 2px #ff9a3a, 0 0 14px 3px rgba(255, 154, 58, .6); } to { box-shadow: 0 0 0 3px #ffcf6a, 0 0 28px 8px rgba(255, 190, 80, .85); } }
/* a full combo charges the avatar */
.lkb.fin-ready .lkb-av { animation: lkb-charge .6s ease-in-out infinite alternate; }
@keyframes lkb-charge { from { filter: drop-shadow(0 0 4px #ffcf6a) drop-shadow(0 0 10px rgba(255, 154, 58, .8)); } to { filter: drop-shadow(0 0 7px #fff3d0) drop-shadow(0 0 20px #ffcf6a); } }
@media (prefers-reduced-motion: reduce) { .lkb:not(.fx-full).fin-ready .lkb-a.lkb-fin, .lkb:not(.fx-full).fin-ready .lkb-av { animation: none; } }


/* ===== HUD v2: slate frames, vine corners, arrow bars, gem buttons ===== */
.lkb { --fr: #6f757d; --fr-l: #aeb5bd; --sl: #2a2d33; --sl-d: #17191d; --arrow: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%); }
.lkb-plate, .lkb-acts, .lkb-card, .lkb-bag { background: linear-gradient(180deg, var(--sl), var(--sl-d)); border: 2px solid var(--fr); border-radius: 6px; box-shadow: inset 0 0 0 2px #0b0c0e, inset 0 0 0 3px #464b52, 0 6px 14px #000a; }
.lkb-plate::before, .lkb-acts::before, .lkb-card::before { content: ""; position: absolute; inset: -6px; pointer-events: none; z-index: 1;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2028%2028'%3E%3Cg%20transform=''%20fill='none'%20stroke-linecap='round'%3E%3Cpath%20d='M3%2025V10Q3%203%2010%203H25'%20stroke='%23aeb5bd'%20stroke-width='2.5'/%3E%3Cpath%20d='M7%2021Q7%207%2021%207'%20stroke='%2346b39a'%20stroke-width='2'/%3E%3Cpath%20d='M7%2013q4%200%204%204M13%207q0%204%204%204'%20stroke='%2346b39a'%20stroke-width='1.6'/%3E%3Ccircle%20cx='5'%20cy='5'%20r='2.6'%20fill='%2346b39a'%20stroke='none'/%3E%3C/g%3E%3C/svg%3E") top left, url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2028%2028'%3E%3Cg%20transform='translate%2828%200%29%20scale%28-1%201%29'%20fill='none'%20stroke-linecap='round'%3E%3Cpath%20d='M3%2025V10Q3%203%2010%203H25'%20stroke='%23aeb5bd'%20stroke-width='2.5'/%3E%3Cpath%20d='M7%2021Q7%207%2021%207'%20stroke='%2346b39a'%20stroke-width='2'/%3E%3Cpath%20d='M7%2013q4%200%204%204M13%207q0%204%204%204'%20stroke='%2346b39a'%20stroke-width='1.6'/%3E%3Ccircle%20cx='5'%20cy='5'%20r='2.6'%20fill='%2346b39a'%20stroke='none'/%3E%3C/g%3E%3C/svg%3E") top right, url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2028%2028'%3E%3Cg%20transform='translate%280%2028%29%20scale%281%20-1%29'%20fill='none'%20stroke-linecap='round'%3E%3Cpath%20d='M3%2025V10Q3%203%2010%203H25'%20stroke='%23aeb5bd'%20stroke-width='2.5'/%3E%3Cpath%20d='M7%2021Q7%207%2021%207'%20stroke='%2346b39a'%20stroke-width='2'/%3E%3Cpath%20d='M7%2013q4%200%204%204M13%207q0%204%204%204'%20stroke='%2346b39a'%20stroke-width='1.6'/%3E%3Ccircle%20cx='5'%20cy='5'%20r='2.6'%20fill='%2346b39a'%20stroke='none'/%3E%3C/g%3E%3C/svg%3E") bottom left, url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2028%2028'%3E%3Cg%20transform='translate%2828%2028%29%20scale%28-1%20-1%29'%20fill='none'%20stroke-linecap='round'%3E%3Cpath%20d='M3%2025V10Q3%203%2010%203H25'%20stroke='%23aeb5bd'%20stroke-width='2.5'/%3E%3Cpath%20d='M7%2021Q7%207%2021%207'%20stroke='%2346b39a'%20stroke-width='2'/%3E%3Cpath%20d='M7%2013q4%200%204%204M13%207q0%204%204%204'%20stroke='%2346b39a'%20stroke-width='1.6'/%3E%3Ccircle%20cx='5'%20cy='5'%20r='2.6'%20fill='%2346b39a'%20stroke='none'/%3E%3C/g%3E%3C/svg%3E") bottom right; background-size: 22px 22px; background-repeat: no-repeat; }
.lkb-acts { position: relative; }
.lkb-bar { height: 17px; border: 0; border-radius: 0; overflow: visible; background: linear-gradient(180deg, var(--fr-l), #4b5057); clip-path: var(--arrow); }
.lkb-bar::before { content: ""; position: absolute; inset: 2px; background: #101216; clip-path: var(--arrow); }
.lkb-bar i { inset: 2px auto 2px 2px; max-width: calc(100% - 4px); clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%); background: linear-gradient(180deg, #b8f59a, #4fb43a 55%, #2c7a22); }
.lkb-bar.mp i { background: linear-gradient(180deg, #9fd4ff, #3f8fe0 55%, #22569a); }
.lkb-bar.xp i { background: linear-gradient(180deg, #ffe39a, #e0a83a 55%, #9a6a18); }
.lkb-bar.foe i { background: linear-gradient(180deg, #d07a70, #9a4038 55%, #6a241f); }
.lkb-bar.atk i { background: linear-gradient(180deg, #ffc27a, #ff9a3a 55%, #b8561a); }
.lkb-bar b { z-index: 1; right: 14px; top: 0; line-height: 17px; font-size: 10.5px; }
.lkb-xp .lkb-bar { height: 12px; }
.lkb-bar.big { height: 20px; }
.lkb-chip { background: #1d2025; color: color-mix(in srgb, var(--c) 55%, #fff); border: 2px solid var(--fr); border-radius: 4px; }
.lkb-pips i { border-color: #7a5a20; } .lkb-pips i.on { background: radial-gradient(circle at 35% 35%, #fff2a0, #f0b030 55%, #9a6410); }
.lkb-backline { font-size: 11px; font-weight: 800; color: var(--muted, #d9b98a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lkb-tip, .lkb-log { border-radius: 4px; }
.lkb-tip { background: linear-gradient(180deg, #1f4424, #12291a); border-color: #4fae5a; box-shadow: 0 0 0 1px #0a1a0c, 0 0 12px #4fae5a55; }
.lkb-log { background: linear-gradient(180deg, #3a1a1c, #220e10); border-color: #ff6a4a; box-shadow: 0 0 14px #ff5a3a66; }
.lkb-a { border-radius: 7px; background: linear-gradient(180deg, #33202c, #1f141c); box-shadow: inset 0 0 0 2px #0008, inset 0 1px 0 3px #ffffff0d; padding-bottom: 14px; }
.lkb-a.lkb-sk { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, #2a2030), #1a1320); }
.lkb-a.art { background: linear-gradient(180deg, #16304a, #0e1c2c); }
.lkb-a.sup { --c: #7fd8d0; background: linear-gradient(180deg, #123a34, #0b2420); }
.lkb-a.lkb-bagbtn { background: linear-gradient(180deg, #3a2c16, #231a0c); } .lkb-a.lkb-runbtn { background: linear-gradient(180deg, #3a1a1c, #220e10); }
.lkb-a kbd { left: 50%; top: auto; bottom: 2px; transform: translateX(-50%); min-width: 16px; padding: 0 4px; border-radius: 3px; text-align: center; opacity: 1; font: 900 9px/13px Nunito, sans-serif; color: #fff;
  background: color-mix(in srgb, var(--c, #c98a3a) 60%, #1a1014); border: 1.5px solid var(--c, #c98a3a); }

/* the spirits you can carry on your back (Q W E) */
.lkb-rail { display: flex; gap: 8px; justify-content: center; }
.lkb-rail[hidden] { display: none; }
.lkb-a.lkb-sw { width: 66px; min-height: 66px; padding: 4px 2px 14px; --c: #8a8f96; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 40%, #1e2024), #121418); }
.lkb-a.lkb-sw .lkb-sp { width: 34px; height: 34px; object-fit: contain; }
.lkb-a.lkb-sw b { font-size: 10px; } .lkb-a.lkb-sw small { font-size: 9px; }
.lkb-a.lkb-sw.on { box-shadow: 0 0 0 2px var(--c), 0 0 16px var(--c); }

/* the spirit on the avatar's back glows in its element colour */
.lkb-fig.lkb-mine > .lkb-sp { filter: drop-shadow(0 0 8px var(--bc, #fff)); }
.lkb-aura { position: absolute; left: 20%; bottom: 0; height: 80%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .25s; }
.lkb-mine.st-shield .lkb-aura { opacity: 1; border: 3px solid #8fe0ff; background: radial-gradient(circle, #4ab0ff00 58%, #4ab0ff2a); box-shadow: 0 0 22px #4ab0ffaa, inset 0 0 18px #4ab0ff66; }
.lkb-mine.st-stone .lkb-aura { opacity: 1; border: 4px solid #b89a6a; box-shadow: 0 0 16px #b89a6a99, inset 0 0 14px #b89a6a66; }
.lkb-mine.st-shade .lkb-aura { opacity: 1; background: radial-gradient(circle, #a77bff44, transparent 70%); box-shadow: 0 0 22px #a77bff88; }
.lkb-mine.st-haste .lkb-aura { opacity: 1; border: 2px dashed #c8f0b0; animation: lkb-spin 2.2s linear infinite; }
.lkb-mine.st-ember .lkb-av { filter: drop-shadow(0 0 8px #ff8a3a) drop-shadow(0 0 16px #ff5a1a); }
@keyframes lkb-spin { to { rotate: 360deg; } }

/* the bag: offerings in a frame coloured by tier */
.lkb-off { border: 2px solid #a87b45; border-radius: 50%; padding: 2px; color: var(--c); background: #1a1a1e; box-shadow: 0 0 6px color-mix(in srgb, var(--c) 60%, transparent); }
.lkb-off.t2 { border-color: #a9c4dc; } .lkb-off.t3 { border-color: #f0c64a; box-shadow: 0 0 10px 2px #f0c64a; }
.lkb-item { border-radius: 6px; background: linear-gradient(180deg, #33202c, #1f141c); border-color: var(--fr); }
.lkb-item.loved { border-color: #7fe0a0; } .lkb-item.disliked { border-color: #ff7a6a; }
.lkb-item.loved small::after { content: " · Loved"; color: #7fe0a0; } .lkb-item.disliked small::after { content: " · Dislikes"; color: #ff7a6a; }

@container (max-width: 559px) {
  .lkb-plate::before, .lkb-acts::before, .lkb-card::before { background-size: 16px 16px; inset: -4px; }
  .lkb-bar { height: 14px; } .lkb-bar b { line-height: 14px; font-size: 9px; top: 0; }
  .lkb-xp .lkb-bar { height: 10px; }
  .lkb-backline { font-size: 9.5px; }
  .lkb-a kbd { display: none; }
  .lkb-a { padding-bottom: 6px; }
  .lkb-rail { gap: 5px; }
  .lkb-a.lkb-sw { width: 50px; min-height: 46px; padding: 2px 1px; } .lkb-a.lkb-sw .lkb-sp { width: 24px; height: 24px; } .lkb-a.lkb-sw small { display: none; }
  .lkb-a { width: calc(20% - 4px); min-height: 56px; }
  .lkb-a .lkb-ic svg { width: 22px; height: 22px; } .lkb-a b { font-size: 10px; }
  .lkb-field { top: 24%; bottom: 40%; }
  .lkb-fig.lkb-foe { height: 62%; } .lkb-fig.lkb-mine { height: 74%; }
}

/* the Strike chain counter: "3 HIT COMBO" */
.lkb-chain { position: absolute; right: 36%; top: 10%; z-index: 6; pointer-events: none; transform-origin: right center; font: 700 clamp(22px, 4vw, 40px) "Pixelify Sans", Fredoka, sans-serif; color: #ffd36a; letter-spacing: .04em; white-space: nowrap; text-shadow: 0 3px 0 #3a2a1c, 0 0 3px #3a2a1c, 2px 0 0 #3a2a1c, -2px 0 0 #3a2a1c; }
.lkb-chain[hidden] { display: none; }

/* ===== juice: flash, low-HP vignette, finisher letterbox, bigger numbers, Effects control ===== */
.lkb-flash { position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: 0; }
.lkb-vig { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(200, 20, 20, .55) 100%); }
.lkb-vig[hidden] { display: none; }
.lkb-vig.pulse { animation: lkb-vig 1.4s ease-in-out infinite alternate; } /* slow: under 1 pulse a second */
@keyframes lkb-vig { from { opacity: .45; } to { opacity: 1; } }
.lkb-bar-t, .lkb-bar-b { position: absolute; left: 0; right: 0; height: 11%; z-index: 2; background: #07050a; pointer-events: none; transition: transform .22s ease-out; }
.lkb-bar-t { top: 0; transform: translateY(-100%); } .lkb-bar-b { bottom: 0; transform: translateY(100%); }
.lkb.cine .lkb-bar-t, .lkb.cine .lkb-bar-b { transform: none; }
.lkb .lk-float.dmg, .lkb .lk-float.hurt { font-size: calc(30px * var(--k, 1)); }
.lkb .lk-float.big { animation-name: lkb-pop; }
@keyframes lkb-pop { from { transform: translate(-50%, 0) scale(.3); opacity: 0; } 12% { transform: translate(-50%, -14px) scale(1.5); opacity: 1; } 28% { transform: translate(-50%, -10px) scale(1.1); } to { transform: translate(-50%, -70px) scale(1); opacity: 0; } }
.lkb .lk-float.sup { font-size: 54px; color: #ffd23f; letter-spacing: .08em; -webkit-text-stroke: 2px #7a2a00; animation-name: lkb-slam; animation-duration: 1.1s; }
@keyframes lkb-slam { from { transform: translate(-50%, 0) scale(3); opacity: 0; } 14% { transform: translate(-50%, 0) scale(1); opacity: 1; } 60% { transform: translate(-50%, -6px) scale(1.06); opacity: 1; } to { transform: translate(-50%, -50px) scale(1); opacity: 0; } }
.lkb-fxbtn { position: absolute; top: 8px; right: 100px; z-index: 10; min-height: 30px; padding: 2px 10px; font: 800 12px Nunito, sans-serif; color: var(--cream, #ffe2a0); background: var(--plum, #2b1d33); border: 2px solid var(--amber, #e0a050); border-radius: 999px; box-shadow: 0 3px 0 var(--ink, #120a18); }
@container (max-width: 559px) { .lkb-fxbtn { right: 78px; top: 6px; min-height: 26px; font-size: 11px; padding: 1px 8px; } }
@container (max-width: 559px) { .lkb .lk-float.sup { font-size: 34px; } .lkb .lk-float.fin { font-size: 32px; } }

/* ===== stage 3: weakness icons, the two rings, the stagger bar, the Dodge button ===== */
.lkb-weak { position: absolute; left: 50%; top: 3%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 3; pointer-events: none; }
.lkb-wk { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--c); background: #1a1620ee; color: var(--c); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 50%, transparent); }
.lkb-wk .lkb-ic { line-height: 0; } .lkb-wk .lkb-ic svg { width: 20px; height: 20px; }
.lkb-wk.on { box-shadow: 0 0 0 2px #ffd23f, 0 0 14px var(--c); } /* the element you carry on your back */
.lkb-ring { position: absolute; z-index: 5; width: var(--s); height: var(--s); border-radius: 50%; border: 5px solid #ff8a6a; box-shadow: 0 0 14px #ff8a6a99, inset 0 0 12px #ff8a6a55; transform: translate(-50%, -50%) scale(calc(2 - var(--p) * 1.1)); pointer-events: none; }
.lkb-ring[hidden] { display: none; }
.lkb-ring.good { border-color: #ffd23f; box-shadow: 0 0 18px #ffd23f, inset 0 0 14px #ffd23f88; }
.lkb-ring.strike { border-width: 4px; border-color: #9fd8ff; box-shadow: 0 0 12px #9fd8ffaa, inset 0 0 10px #9fd8ff55; }
.lkb-ring.strike.good { border-color: #ffd23f; box-shadow: 0 0 18px #ffd23f, inset 0 0 14px #ffd23f88; }
.lkb-ring b { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); font: 700 20px "Pixelify Sans", Fredoka, sans-serif; color: #ffd23f; text-shadow: 0 2px 0 #000; white-space: nowrap; }
.lkb-stagrow > span:first-child { width: auto !important; min-width: 24px; white-space: nowrap; }
.lkb-pf .lkb-bar.stag { height: 11px; } .lkb-pf .lkb-bar.stag b { line-height: 11px; font-size: 8.5px; top: 0; }
.lkb-bar.stag i { background: linear-gradient(180deg, #f0e0a0, #c9a227 55%, #8a6a10); }
.lkb-bar.stag.stun i { background: linear-gradient(180deg, #ffb8ff, #d34fd0 55%, #7a1f78); transition: none; }
.lkb-a.lkb-dodgebtn { --c: #9fd8ff; background: linear-gradient(180deg, #1c3040, #101c28); }
.lkb-a.strike.armed { box-shadow: 0 0 0 2px #ffd23f, 0 0 18px 3px #ffd23f99; }
.lkb-a.strike.armed small::after { content: " · CRIT"; color: #ffd23f; }
.lkb .lk-float.tim { font-size: 30px; color: #9fd8ff; }
.lkb .lk-float.sup { font-size: 68px; }
@container (max-width: 559px) { .lkb .lk-float.sup { font-size: 40px; } .lkb-wk { width: 26px; height: 26px; } .lkb-wk .lkb-ic svg { width: 16px; height: 16px; } .lkb-ring { border-width: 4px; } }

/* wide screens: the figures stay about one sprite apart, as on a phone. The field is no wider than 90% of the stage height. */
.lkb-field { left: max(0px, calc(50cqw - 45cqh)); right: max(0px, calc(50cqw - 45cqh)); }
.lkb-df { position: absolute; pointer-events: none; z-index: 6; } /* lakbay-battle.js sizes it to the whole screen */