/* ==========================================================================
   BATTLE: lobby and the 2D tactical battlefield. No script anywhere: the battlefield is an SVG shown in <input type="image">,
   its on-screen width is one of six fixed sizes (one image input per size, CSS shows exactly one) so the server can turn a click
   position into battlefield units.
   ========================================================================== */
.bt-lobby { display: grid; gap: 1.2rem; }
.bt-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1.2rem; }
.bt-resume { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border-color: var(--gold); }
.bt-resume h2 { margin: 0; }
.bt-resume p { margin: .2rem 0 0; }

.bt-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: .6rem; max-height: 420px; overflow: auto; padding-right: .2rem; }
.bt-pick { position: relative; display: block; cursor: pointer; min-width: 0; }
.bt-pick input, .bt-opt input { position: absolute; opacity: 0; pointer-events: none; }
.bt-pick-in { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border: 1px solid var(--line); background: var(--panel2); border-radius: 3px; transition: border-color .2s, background .2s; min-width: 0; }
.bt-pick:hover .bt-pick-in { border-color: rgba(255, 255, 255, .25); }
.bt-pick input:checked + .bt-pick-in { border-color: var(--gold); background: rgba(245, 181, 61, .09); }
.bt-pick input:focus-visible + .bt-pick-in, .bt-opt input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.bt-pick-txt { display: grid; min-width: 0; flex: 1; }
.bt-pick-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-pick-txt small { color: var(--muted); font-size: .72rem; }
.bt-tick { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); color: transparent; flex: none; }
.bt-tick .ico { width: 12px; height: 12px; }
.bt-pick input:checked + .bt-pick-in .bt-tick { background: var(--gold); border-color: var(--gold); color: #1a1100; }
.bt-av { flex: none; width: 34px; height: 34px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #23233a; border: 2px solid rgba(255, 255, 255, .2); font: 400 1.1rem/1 var(--display); color: #fff; }
.bt-av img { width: 100%; height: 100%; object-fit: cover; }
.bt-opts { display: grid; gap: .5rem; }
.bt-opt { position: relative; display: block; cursor: pointer; }
.bt-opt > span { display: grid; gap: .1rem; padding: .7rem .85rem; border: 1px solid var(--line); background: var(--panel2); border-radius: 3px; }
.bt-opt small { color: var(--muted); font-size: .78rem; line-height: 1.35; }
.bt-opt input:checked + span { border-color: var(--gold); background: rgba(245, 181, 61, .09); }
.bt-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.bt-recent li { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }

/* ---- Battle screen ---- */
.bt-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.2rem; align-items: start; }
.bt-main { display: grid; gap: .9rem; min-width: 0; }
.bt-side { display: grid; gap: .9rem; min-width: 0; }
.bt-field-wrap { display: flex; justify-content: center; }
.bt-stage { display: grid; gap: .55rem; justify-items: center; max-width: 100%; }
.bt-board { position: relative; display: inline-block; max-width: 100%; line-height: 0; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 18px 50px rgba(0, 0, 0, .55), 0 0 70px rgba(245, 181, 61, .06); }
.bt-field { margin: 0; line-height: 0; }
.bt-map { display: none; height: auto; max-width: none; border: 0; border-radius: 10px; background: #0a0f14; padding: 0; }
input.bt-map { cursor: crosshair; }
input.bt-map:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (min-width: 1400px) { .bt-map.w940 { display: block; width: 940px; } }
@media (min-width: 1220px) and (max-width: 1399px) { .bt-map.w780 { display: block; width: 780px; } }
@media (min-width: 770px) and (max-width: 1219px) { .bt-map.w720 { display: block; width: 720px; } }
@media (min-width: 564px) and (max-width: 769px) { .bt-map.w520 { display: block; width: 520px; } }
@media (min-width: 444px) and (max-width: 563px) { .bt-map.w400 { display: block; width: 400px; } }
@media (min-width: 366px) and (max-width: 443px) { .bt-map.w320 { display: block; width: 320px; } }
@media (max-width: 365px) { .bt-map.w288 { display: block; width: 288px; } }
@media (max-width: 1219px) { .bt-layout { grid-template-columns: minmax(0, 1fr); } }

/* tooltips: any element with data-tip explains itself on hover, focus or tap (no script) */
[data-tip] { position: relative; }
[data-tip]:focus { outline: none; }
[data-tip]:focus-visible { outline: 1px dashed var(--gold); outline-offset: 2px; }
[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); translate: -50% 4px; width: max-content; max-width: min(250px, 72vw); padding: .5rem .65rem; background: #1c1c24; border: 1px solid var(--line2); border-radius: 7px; box-shadow: 0 10px 28px rgba(0, 0, 0, .55); color: var(--text); font: 500 .74rem/1.4 var(--body); letter-spacing: 0; text-transform: none; text-align: left; white-space: normal; opacity: 0; pointer-events: none; z-index: 80; transition: opacity .14s, translate .14s; }
[data-tip]:hover::after, [data-tip]:focus-visible::after, [data-tip]:focus::after { opacity: 1; translate: -50% 0; }
.bt-side [data-tip]::after { left: auto; right: 0; translate: 0 4px; }
.bt-side [data-tip]:hover::after, .bt-side [data-tip]:focus::after, .bt-side [data-tip]:focus-visible::after { translate: 0 0; }
.bt-order li:first-child[data-tip]::after, .bt-ini-h[data-tip]::after { left: 0; translate: 0 4px; }
.bt-order li:first-child[data-tip]:hover::after, .bt-ini-h[data-tip]:hover::after, .bt-ini-h[data-tip]:focus::after { translate: 0 0; }

.bt-card { background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 60%), var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.05rem; min-width: 0; }
.bt-card h2 { margin: 0; }
.bt-h3 { margin: 1rem 0 .45rem; font: 800 .68rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.bt-h3 i, .bt-ini-h i { display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; margin-left: .25rem; border-radius: 50%; border: 1px solid var(--line2); font: 700 .65rem/1 var(--body); font-style: normal; color: var(--muted); cursor: help; }
.bt-h3.side-p { color: #7fdcff; } .bt-h3.side-e { color: #ff8a98; }

/* ---- top strip: whose turn it is + turn order ---- */
.bt-hud { display: grid; grid-template-columns: minmax(250px, 380px) minmax(0, 1fr); gap: .8rem; margin-bottom: 1rem; align-items: stretch; }
@media (max-width: 900px) { .bt-hud { grid-template-columns: minmax(0, 1fr); } }
.bt-turn { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); min-width: 0; }
.bt-turn.mine { border-color: rgba(255, 212, 90, .6); background: linear-gradient(100deg, rgba(255, 212, 90, .16), rgba(255, 212, 90, .02) 70%), var(--panel); }
.bt-turn.wait { background: linear-gradient(100deg, rgba(255, 90, 110, .1), transparent 70%), var(--panel); }
.bt-pulse { flex: none; width: 14px; height: 14px; border-radius: 50%; background: #ff5a6e; box-shadow: 0 0 0 0 rgba(255, 90, 110, .6); animation: bt-pulse 1.8s infinite; }
.bt-turn.mine .bt-pulse { background: #ffd45a; box-shadow: 0 0 0 0 rgba(255, 212, 90, .6); }
@keyframes bt-pulse { 70% { box-shadow: 0 0 0 11px rgba(255, 212, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 212, 90, 0); } }
.bt-turn-t { display: grid; gap: .15rem; min-width: 0; flex: 1; }
.bt-turn-t b { font: 400 1.45rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.bt-turn-t b span { color: var(--muted); font-size: 1rem; }
.bt-turn-t small { color: var(--muted); font-size: .76rem; line-height: 1.35; }
.bt-clock { flex: none; font: 800 1.5rem/1 var(--body); font-variant-numeric: tabular-nums; padding: .3rem .55rem; border-radius: 8px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); }
.bt-clock.low { color: #ff5a6e; border-color: #ff5a6e; }
.bt-ini { display: flex; align-items: center; gap: .8rem; padding: .6rem .9rem; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); min-width: 0; }
.bt-ini-h { flex: none; font: 800 .68rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); cursor: help; }
.bt-order { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; min-width: 0; }
.bt-order li { display: flex; align-items: center; gap: .45rem; padding: .22rem .55rem .22rem .22rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); font-size: .8rem; max-width: 190px; }
.bt-order li.s-p { border-color: rgba(76, 201, 255, .5); }
.bt-order li.s-e { border-color: rgba(255, 90, 110, .5); }
.bt-order li.now { background: rgba(255, 212, 90, .16); border-color: #ffd45a; box-shadow: 0 0 18px rgba(255, 212, 90, .25); }
.bt-order li .bt-av { width: 30px; height: 30px; font-size: .95rem; border-width: 2px; }
.bt-order li.s-p .bt-av { border-color: #4cc9ff; } .bt-order li.s-e .bt-av { border-color: #ff5a6e; }
.bt-order li:nth-child(n+3) .bt-nm { display: none; }
.bt-order small { font: 800 .62rem/1 var(--body); letter-spacing: .1em; color: var(--muted); }
.bt-order li.now small { color: #ffd45a; }
.bt-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---- action deck ---- */
.bt-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 165px), 1fr)); gap: .6rem; }
.bt-tool { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: .2rem .65rem; align-items: center; padding: .7rem .8rem .6rem; min-width: 0; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .04), transparent), var(--panel2); border-radius: 12px; color: var(--text); text-decoration: none; transition: border-color .18s, transform .18s, background .18s, box-shadow .18s; }
.bt-tool:hover { border-color: rgba(255, 255, 255, .32); transform: translateY(-2px); color: var(--text); }
.bt-tool.on { border-color: var(--gold); background: linear-gradient(180deg, rgba(245, 181, 61, .18), rgba(245, 181, 61, .03)), var(--panel2); box-shadow: 0 0 0 1px var(--gold), 0 8px 26px rgba(245, 181, 61, .18); }
.bt-tool.off { opacity: .5; }
.bt-tool.off:hover { transform: none; }
.bt-ti { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(245, 181, 61, .13); color: var(--gold); }
.bt-ti .ico { width: 20px; height: 20px; }
.bt-ti.k-heal, .bt-tool.k-heal .bt-ti { background: rgba(61, 220, 132, .14); color: var(--green); }
.bt-ti.k-buff, .bt-tool.k-buff .bt-ti, .bt-tool.k-shield .bt-ti, .bt-ti.k-shield { background: rgba(255, 212, 90, .14); color: #ffd45a; }
.bt-ti.k-debuff, .bt-tool.k-debuff .bt-ti { background: rgba(166, 107, 255, .16); color: #c3a0ff; }
.bt-ti.k-move, .bt-tool.k-move .bt-ti { background: rgba(70, 214, 255, .14); color: var(--cyan); }
.bt-ti.k-terrain, .bt-tool.k-terrain .bt-ti, .bt-ti.k-utility, .bt-tool.k-utility .bt-ti { background: rgba(160, 200, 255, .12); color: #a8c8ff; }
.bt-tb { display: grid; gap: .1rem; min-width: 0; }
.bt-tb b { font: 700 .86rem/1.2 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-tb small { color: var(--muted); font-size: .72rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bt-tf { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding-top: .45rem; border-top: 1px solid var(--line); }
.bt-tf em { font-style: normal; font-size: .7rem; color: #c3c3cc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-tool.off .bt-tf em { color: #ff9aa6; }
kbd { display: inline-block; min-width: 1.3rem; padding: .1rem .35rem; border-radius: 5px; border: 1px solid var(--line2); border-bottom-width: 2px; background: rgba(0, 0, 0, .3); font: 700 .66rem/1.2 var(--body); text-align: center; color: var(--muted); }

/* ---- the selected action: what it does, in words ---- */
.bt-act { display: grid; gap: .8rem; }
.bt-act p, .bt-act ul, .bt-act ol { margin: 0; }
.bt-act-h { display: flex; gap: .85rem; align-items: flex-start; }
.bt-act-h .bt-ti { width: 46px; height: 46px; border-radius: 12px; }
.bt-act-h h2 { font: 400 1.7rem/1 var(--display); letter-spacing: .04em; }
.bt-act-h p.muted { margin-top: .25rem; font-size: .85rem; }
.bt-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem !important; }
.bt-tag { padding: .18rem .55rem; border-radius: 999px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .04); font-size: .7rem; font-weight: 600; color: #cfcfd6; cursor: default; }
.bt-tag[data-tip] { cursor: help; }
.bt-tag.k-attack { border-color: rgba(255, 122, 61, .6); color: #ffb48c; }
.bt-tag.k-heal { border-color: rgba(61, 220, 132, .6); color: #9ff0c4; }
.bt-tag.k-buff, .bt-tag.k-shield { border-color: rgba(255, 212, 90, .6); color: #ffe38c; }
.bt-tag.k-debuff { border-color: rgba(166, 107, 255, .6); color: #cdb3ff; }
.bt-flavor { font-style: italic; color: #bdbdc7; font-size: .88rem; line-height: 1.5; border-left: 2px solid var(--gold); padding-left: .75rem; }
.bt-fx-list { list-style: none; padding: 0; display: grid; gap: .35rem; }
.bt-fx-list li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: .65rem; align-items: start; padding: .5rem .65rem; border-radius: 8px; background: rgba(255, 255, 255, .035); }
.bt-fx-list li i { width: 10px; height: 10px; margin-top: .3rem; border-radius: 3px; background: #9a9aa6; }
.bt-fx-list li b { display: block; font-size: .85rem; font-weight: 700; line-height: 1.35; }
.bt-fx-list li small { display: block; margin-top: .1rem; color: var(--muted); font-size: .76rem; line-height: 1.4; }
.bt-fx-list .fx-dmg i { background: #ff7a3d; } .bt-fx-list .fx-heal i { background: #3ddc84; } .bt-fx-list .fx-shield i, .bt-fx-list .fx-buff i { background: #ffd45a; }
.bt-fx-list .fx-debuff i { background: #a66bff; } .bt-fx-list .fx-move i { background: #46d6ff; } .bt-fx-list .fx-zone i { background: #8fe0ff; border-radius: 50%; } .bt-fx-list .fx-clock i { background: #f5b53d; border-radius: 50%; }
.bt-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; counter-reset: s; }
@media (max-width: 560px) { .bt-steps { grid-template-columns: minmax(0, 1fr); } }
.bt-steps li { display: flex; gap: .5rem; align-items: center; padding: .45rem .6rem; border-radius: 8px; border: 1px dashed var(--line2); font-size: .74rem; line-height: 1.3; color: var(--muted); }
.bt-steps li b { flex: none; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: rgba(255, 255, 255, .08); font-size: .7rem; color: var(--text); }
.bt-steps li.done { border-style: solid; border-color: rgba(61, 220, 132, .45); color: #b9f0d2; } .bt-steps li.done b { background: var(--green); color: #05140c; }
.bt-steps li.cur { border-style: solid; border-color: var(--gold); color: var(--text); background: rgba(245, 181, 61, .1); } .bt-steps li.cur b { background: var(--gold); color: #1a1100; }
.bt-hint { color: #c3c3cc; font-size: .86rem; line-height: 1.45; }
.bt-bad { color: #ff8a98; font-size: .86rem; }
.bt-chip { display: inline-block; margin: 0 .25rem .2rem 0; padding: .12rem .55rem; border-radius: 999px; font-size: .76rem; font-weight: 700; border: 1px solid var(--line); background: var(--panel2); }
.bt-chip.s-p { border-color: #4cc9ff; color: #bfeaff; } .bt-chip.s-e { border-color: #ff5a6e; color: #ffc0c8; }
.bt-chip.good { border-color: #2fbf71; color: #9ff0c4; } .bt-chip.bad { border-color: #ff5a6e; color: #ffc0c8; }
.bt-coords summary { cursor: pointer; color: var(--muted); font-size: .76rem; }
.bt-coords form { margin-top: .5rem; align-items: end; }
.bt-coords label { display: grid; gap: .2rem; font-size: .75rem; color: var(--muted); }
.bt-coords input[type=number] { width: 6.5rem; }
.bt-endrow { justify-content: space-between; border-top: 1px solid var(--line); padding-top: .8rem; }
.bt-act .row { flex-wrap: wrap; }
.bt-idle { display: flex; align-items: center; gap: .8rem; color: var(--muted); }
.bt-idle p { margin: 0; }
.bt-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem .9rem; font-size: .7rem; color: var(--muted); line-height: 1.2; }
.bt-legend li { display: flex; align-items: center; gap: .35rem; }
.lg[class*="lg-"] { display: inline-block; width: 14px; height: 10px; border-radius: 3px; border: 2px solid; }
.lg-me { border-color: #4cc9ff; } .lg-foe { border-color: #ff5a6e; } .lg-now { border-color: #ffd45a; background: rgba(255, 212, 90, .3); }
.lg-tgt { border-color: #ff7a3d; background: rgba(255, 122, 61, .35); } .lg-reach { border: 2px dashed rgba(255, 255, 255, .6); } .lg-bad { border-color: #ff5470; background: rgba(255, 84, 112, .3); }

/* ---- result banner ---- */
.bt-end { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.2rem 1.4rem; margin-bottom: 1rem; border-radius: 14px; border: 1px solid var(--line); }
.bt-end-k { font: 800 .7rem/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.bt-end h2 { font: 400 3rem/1 var(--display); margin: .2rem 0 .3rem; letter-spacing: .05em; }
.bt-end p { margin: 0; color: #c3c3cc; }
.bt-end-xp { margin-top: .6rem !important; }
.bt-end-win { border-color: var(--green); background: linear-gradient(100deg, rgba(61, 220, 132, .16), transparent 70%), var(--panel); } .bt-end-win h2 { color: #7dffb5; }
.bt-end-loss { border-color: var(--red); background: linear-gradient(100deg, rgba(255, 61, 87, .16), transparent 70%), var(--panel); } .bt-end-loss h2 { color: #ff8a98; }

/* ---- side: the acting unit ---- */
.bt-av { flex: none; width: 34px; height: 34px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: #23233a; border: 2px solid rgba(255, 255, 255, .2); font: 400 1.1rem/1 var(--display); }
.bt-av img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.bt-fh { display: flex; align-items: center; gap: .75rem; }
.bt-fh .bt-av { width: 52px; height: 52px; font-size: 1.6rem; border-width: 3px; }
.bt-fh > div { flex: 1; min-width: 0; }
.bt-fh h2 { font: 400 1.55rem/1 var(--display); letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-fh small { color: var(--muted); font-size: .72rem; }
.bt-focus.s-p .bt-av { border-color: #4cc9ff; } .bt-focus.s-e .bt-av { border-color: #ff5a6e; }
.bt-focus.s-p { border-top: 3px solid #4cc9ff; } .bt-focus.s-e { border-top: 3px solid #ff5a6e; }
.bt-rar { font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); align-self: flex-start; }
.bt-bars { display: grid; gap: .5rem; margin: .9rem 0 .75rem; }
.bt-bar { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; gap: .6rem; align-items: center; font-size: .78rem; cursor: help; }
.bt-bar > span { color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.bt-bar b { font-variant-numeric: tabular-nums; } .bt-bar b small { color: var(--muted); font-weight: 500; }
.pip { width: 100%; height: .55rem; border-radius: 99px; background: rgba(255, 255, 255, .08); }
.pip.on { background: linear-gradient(90deg, #f5b53d, #ffd45a); }
.bt-unitstats { margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
.bt-unitstats > div { display: grid; gap: .15rem; padding: .45rem .2rem; border-radius: 8px; background: rgba(255, 255, 255, .04); text-align: center; cursor: help; }
.bt-unitstats dt { color: var(--muted); font-size: .56rem; font-weight: 800; letter-spacing: .06em; }
.bt-unitstats dd { margin: 0; font: 400 1.25rem/1 var(--display); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.bt-sts { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.bt-sts li { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; align-items: center; }
.bt-sts li small { color: var(--muted); font-size: .7rem; justify-self: end; }
.bt-sts li p { grid-column: 1 / -1; margin: 0; color: #b4b4be; font-size: .75rem; line-height: 1.4; }
.bt-pas { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.bt-pas li { padding: .5rem .65rem; border-radius: 8px; background: rgba(255, 255, 255, .035); border-left: 3px solid var(--line2); font-size: .82rem; }
.bt-pas li.pas-on { border-left-color: var(--green); }
.bt-pas small { display: block; color: var(--muted); font-size: .74rem; line-height: 1.4; margin-top: .1rem; }
.bt-pas .pas-state { display: inline; margin-left: .3rem; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.bt-pas li.pas-on .pas-state { color: var(--green); }
.bt-pas details { margin-top: .3rem; } .bt-pas summary { cursor: pointer; font-size: .7rem; color: var(--muted); }
.bt-pas .pfx { color: #9fa0ad; }

/* ---- side: teams, log, guide ---- */
.bt-teams { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.bt-teams li { display: grid; grid-template-columns: auto minmax(0, 1fr) 70px 2.6rem; gap: .55rem; align-items: center; padding: .3rem .4rem; border-radius: 8px; font-size: .84rem; border-left: 3px solid transparent; }
.bt-teams li.s-p { border-left-color: #4cc9ff; } .bt-teams li.s-e { border-left-color: #ff5a6e; }
.bt-teams li.now { background: rgba(255, 212, 90, .1); }
.bt-teams .bt-av { width: 28px; height: 28px; font-size: .9rem; }
.bt-teams .bt-nm { overflow: visible; white-space: normal; line-height: 1.3; }
.bt-teams small { color: var(--muted); font-size: .74rem; text-align: right; font-variant-numeric: tabular-nums; }
.bt-teams li.dead { opacity: .45; } .bt-teams li.dead .bt-nm { text-decoration: line-through; }
.bt-st { display: inline-block; padding: .05rem .32rem; border-radius: 4px; font-size: .6rem; font-weight: 800; cursor: help; }
.bt-st.good { background: #1c6b4a; } .bt-st.bad { background: #7a1f2c; }
.bt-log { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; max-height: 240px; overflow: auto; font-size: .78rem; color: #c5c5ce; }
.bt-log li { line-height: 1.4; padding: .25rem .5rem; border-radius: 6px; border-left: 2px solid var(--line2); }
.bt-log li:first-child { background: rgba(255, 255, 255, .05); border-left-color: var(--gold); color: var(--text); }
.bt-guide summary { cursor: pointer; display: flex; align-items: center; gap: .5rem; font: 800 .72rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.bt-guide summary .ico { width: 16px; height: 16px; color: var(--gold); }
.bt-guide ol { margin: .8rem 0 0; padding-left: 1.1rem; display: grid; gap: .5rem; font-size: .8rem; line-height: 1.45; color: #b4b4be; }
.bt-guide li b { color: var(--text); }

/* meters: green / yellow / red by remaining HP */
meter { appearance: none; -webkit-appearance: none; display: block; width: 100%; max-width: none; height: .55rem; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .09); overflow: hidden; }
meter::-webkit-meter-bar { background: rgba(255, 255, 255, .09); border: 0; height: .55rem; border-radius: 99px; }
meter::-webkit-meter-optimum-value { background: linear-gradient(90deg, #2fbf71, #59f0a6); border-radius: 99px; }
meter::-webkit-meter-suboptimum-value { background: linear-gradient(90deg, #d9a21c, #ffd45a); border-radius: 99px; }
meter::-webkit-meter-even-less-good-value { background: linear-gradient(90deg, #d63a50, #ff5a6e); border-radius: 99px; }
meter::-moz-meter-bar { background: #59f0a6; border-radius: 99px; }
meter:-moz-meter-sub-optimum::-moz-meter-bar { background: #ffd45a; }
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: #ff5a6e; }
.bt-bar.mv meter::-webkit-meter-optimum-value { background: linear-gradient(90deg, #2aa8d6, #46d6ff); }
.bt-bar.mv meter::-moz-meter-bar { background: #46d6ff; }
@media (prefers-reduced-motion: reduce) { .bt-tool, [data-tip]::after { transition: none; } .bt-pulse { animation: none; } }

/* ---- The units are real cards laid over the battlefield (CardLayer). Where they stand, their size, HP bars and the replay come from
   /battle/{id}/cards (a stylesheet per battle version: the page may not carry inline styles). Clicks go through to the picture. ---- */
.bt-cards, .bt-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bt-fx { z-index: 2000; }
.bt-cards .bu { position: absolute; translate: -50% -66%; container-type: inline-size; line-height: 1.2; perspective: 700px; }
.bu-card { transform-style: preserve-3d; animation: bu-sway 7s ease-in-out infinite alternate; }
.bt-cards .bu:nth-child(2n) .bu-card { animation-delay: -2.3s; }
.bt-cards .bu:nth-child(3n) .bu-card { animation-delay: -4.1s; }
@keyframes bu-sway { from { transform: rotateY(-9deg) rotateX(2deg); } to { transform: rotateY(9deg) rotateX(-1deg); } }
.bu .tcw { display: block; width: 100%; }
.bu.s-p .tcard { outline: 1.5cqw solid rgba(76, 201, 255, .55); outline-offset: 0; border-radius: 6cqw; }
.bu.s-e .tcard { outline: 1.5cqw solid rgba(255, 90, 110, .6); outline-offset: 0; border-radius: 6cqw; }
.bu.act::after { content: ""; position: absolute; inset: -5cqw -5cqw -4cqw; border: 2.4cqw solid #ffd45a; border-radius: 9cqw; animation: bu-act 1.4s ease-in-out infinite; }
@keyframes bu-act { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .35; scale: 1.04; } }
.bu.tgt::after { content: ""; position: absolute; inset: -4cqw; border: 2.4cqw solid #ff7a3d; border-radius: 9cqw; background: rgba(255, 122, 61, .18); }
.bu.cand::after { content: ""; position: absolute; inset: -3cqw; border: 1.6cqw dashed rgba(255, 255, 255, .8); border-radius: 8cqw; }
.bu.dead { opacity: .5; }
.bu.dead .bu-card { filter: grayscale(1) brightness(.55); }
.bu-hp { position: absolute; left: 4%; right: 4%; top: calc(100% + 3cqw); height: 9cqw; background: rgba(5, 5, 10, .88); border: .8cqw solid rgba(255, 255, 255, .25); border-radius: 5cqw; overflow: hidden; }
.bu-hp b, .bu-hp i { position: absolute; left: 0; top: 0; bottom: 0; }
.bu-hp b { background: #59f0a6; }
.bu-hp.mid b { background: #ffd45a; }
.bu-hp.lo b { background: #ff5a6e; }
.bu-hp i { background: rgba(127, 208, 255, .85); mix-blend-mode: screen; }
.bu-hp span { position: absolute; inset: 0; display: grid; place-items: center; font: 800 7cqw/1 var(--body); color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.bu.dead .bu-hp { display: none; }
.bu-st { position: absolute; left: 0; right: 0; bottom: calc(100% + 3cqw); display: flex; flex-wrap: wrap; justify-content: center; gap: 2cqw; margin: 0; padding: 0; list-style: none; }
.bu-st li { padding: 1.2cqw 3cqw; border-radius: 4cqw; font: 800 7.5cqw/1 var(--body); color: #fff; border: .8cqw solid rgba(255, 255, 255, .6); text-shadow: 0 0 2px #000; }
.bu-st li.good { background: #1c6b4a; }
.bu-st li.bad { background: #7a1f2c; }
@media (prefers-reduced-motion: reduce) { .bu-card, .bu.act::after { animation: none; } }

/* ---- live preview drawn by battle.js (the page works without it) ---- */
.bt-live { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 900; overflow: hidden; border-radius: 10px; }
.bt-live * { vector-effect: non-scaling-stroke; }
.bt-live .lv-ring { fill: rgba(255, 255, 255, .025); stroke: rgba(255, 255, 255, .22); stroke-width: 1; }
.bt-live .lv-fill { stroke-width: 1.5; }
.bt-live .lv-ok { fill: rgba(245, 181, 61, .22); stroke: #f5b53d; }
.bt-live .lv-bad { fill: rgba(255, 84, 112, .18); stroke: #ff5470; }
.bt-live .lv-beam.lv-ok { stroke: rgba(245, 181, 61, .3); fill: none; }
.bt-live .lv-beam.lv-bad { stroke: rgba(255, 84, 112, .26); fill: none; }
.bt-live .lv-dash { stroke: rgba(255, 255, 255, .35); stroke-width: 1; fill: none; }
.bt-live .lv-dash.lv-bad { stroke: #ff5470; }
.bt-live .lv-path { stroke: #f5b53d; stroke-width: 3; stroke-linecap: round; fill: none; }
.bt-live .lv-dest { fill: rgba(245, 181, 61, .35); stroke: #f5b53d; stroke-width: 2; }
.bu.tgl .bu-in { outline: 2px solid #ff5470; outline-offset: 3px; border-radius: 6px; }
.bt-js input.bt-map { cursor: crosshair; }
.bt-wait .bt-board { opacity: .96; }
.bt-wait { cursor: progress; }

/* a thin sweep while the server plays the turn */
.bt-wait .bt-board::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 35%; background: linear-gradient(90deg, transparent, #ffd45a, transparent); animation: bt-sweep 1s ease-in-out infinite; z-index: 3000; }
@keyframes bt-sweep { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { .bt-wait .bt-board::after { animation: none; width: 100%; opacity: .5; } }

.bu.hid .bu-card { opacity: .5; filter: saturate(.6) blur(.4px); }
.bt-pierce { filter: drop-shadow(0 0 .25px #ffe14d); }
.bu.sm .tcard { filter: saturate(.75) brightness(1.08) hue-rotate(-12deg); outline-style: dashed; }
.bu.sm .bu-card { opacity: .9; }
.bu.sm .bu-tag { position: absolute; left: 50%; top: -7cqw; translate: -50% 0; z-index: 3; padding: 1cqw 4cqw; border-radius: 4cqw; background: #5aa8ff; color: #fff; font: 800 7cqw/1 var(--body); letter-spacing: .6cqw; text-shadow: 0 0 2px #000; }
.bt-challenges .bt-recent li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.bt-challenges form.inline { display: inline; }
.bt-duel .row { align-items: end; gap: .75rem; }
.bt-wait-panel { text-align: center; padding: 2rem 1rem; }
.bt-waiting { display: flex; align-items: center; justify-content: center; gap: .75rem; font-size: 1.2rem; }
.bt-spin { width: 1.2rem; height: 1.2rem; border: .25rem solid rgba(255, 255, 255, .25); border-top-color: #ffd45a; border-radius: 50%; animation: bt-spin 1s linear infinite; }
@keyframes bt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bt-spin { animation: none; } }
.bt-ask { border-color: #5aa8ff; }
.bt-ask .row { flex-wrap: wrap; gap: .5rem; }

.bu.tgb .bu-in { outline: 2px dashed #ff5470; outline-offset: 3px; border-radius: 6px; opacity: .85; }
.bt-live .lv-reach { fill: rgba(70, 214, 255, .07); stroke: rgba(70, 214, 255, .35); stroke-width: 1; }
.bt-live .lv-path.lv-nogo, .bt-live .lv-dest.lv-nogo { stroke: #ff5470; fill: rgba(255, 84, 112, .3); }
.bt-live .lv-path.lv-detour { stroke-dasharray: 2 7; opacity: .8; }
.bt-live .lv-dest.lv-detour { stroke-dasharray: 4 3; }

/* ---- Play hub and campaigns. Accent colours come from data-accent: battle.js-free, the stripe uses --cs set by the server through a class-less attribute selector list below ---- */
.play-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1rem; }
.play-card { display: grid; gap: .8rem; align-content: start; padding: 1.4rem; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(245, 181, 61, .1), transparent 55%), var(--panel); }
.play-pvp { background: linear-gradient(160deg, rgba(255, 90, 110, .1), transparent 55%), var(--panel); }
.play-card h2 { font: 400 2.2rem/1 var(--display); letter-spacing: .04em; margin: 0; }
.play-card p { margin: 0; }
.play-card .btn { justify-self: start; }
.play-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.play-list a { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: 9px; background: rgba(255, 255, 255, .04); color: var(--text); text-decoration: none; }
.play-list a:hover { background: rgba(255, 255, 255, .08); }
.play-list span { flex: 1; min-width: 0; } .play-list small { display: block; color: var(--muted); font-size: .72rem; }
.play-list em { font-style: normal; color: var(--gold); font-weight: 800; font-size: .8rem; }
.cs-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); flex: none; }
.camp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
.camp-card { display: grid; gap: .5rem; padding: 1.2rem; border-radius: 14px; border: 1px solid var(--line); border-top: 3px solid var(--gold); background: var(--panel); color: var(--text); text-decoration: none; transition: transform .18s, border-color .18s; }
.camp-card:hover { transform: translateY(-3px); border-color: var(--gold); color: var(--text); }
.camp-card h2 { font: 400 1.8rem/1 var(--display); letter-spacing: .04em; margin: 0; }
.camp-card p { margin: 0; font-size: .85rem; }
.camp-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 900px) { .camp-layout { grid-template-columns: minmax(0, 1fr); } }
.camp-path { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; position: relative; }
.camp-path li a, .camp-path li > span { display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); text-decoration: none; }
.camp-path li.locked > span { opacity: .45; }
.camp-path li.on a, .camp-path li.on > span { border-color: var(--gold); background: rgba(245, 181, 61, .1); }
.camp-path li.done .camp-n { background: var(--green); color: #05140c; }
.camp-path li.open .camp-n { background: var(--gold); color: #1a1100; }
.camp-path li.boss .camp-n { background: #ff5a6e; color: #fff; }
.camp-n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .1); font-size: .85rem; }
.camp-n .ico { width: 16px; height: 16px; }
.camp-t { display: grid; font-weight: 700; font-size: .9rem; min-width: 0; } .camp-t small { color: var(--muted); font-weight: 500; font-size: .72rem; }
.camp-stage { display: grid; gap: .8rem; }
.camp-foes { display: flex; flex-wrap: wrap; gap: .6rem; }
.camp-foe { display: flex; align-items: center; gap: .6rem; padding: .45rem .8rem .45rem .45rem; border-radius: 999px; border: 1px solid rgba(255, 90, 110, .5); background: rgba(255, 90, 110, .07); }
.camp-foe small { display: block; color: var(--muted); font-size: .7rem; }
.camp-rew { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.camp-rew li { display: flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .05); font-size: .85rem; }
.camp-rew li .ico { width: 16px; height: 16px; color: var(--gold); } .camp-rew small { color: var(--muted); }
.cs-row { align-items: end; } .cs-grow { flex: 3; }
.bt-stagewin { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }

.ac-gold { --ac: #f5b53d; } .ac-red { --ac: #ff5a6e; } .ac-blue { --ac: #5aa8ff; } .ac-green { --ac: #3ddc84; } .ac-violet { --ac: #a66bff; } .ac-pink { --ac: #ff5fa2; } .ac-cyan { --ac: #46d6ff; }
.camp-card { border-top-color: var(--ac, var(--gold)); } .camp-card:hover { border-color: var(--ac, var(--gold)); }
.cs-dot { background: var(--ac, var(--gold)); }

.act-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.act-list li { display: flex; gap: .6rem; align-items: center; font-size: .88rem; } .act-list .ico { width: 16px; height: 16px; color: var(--gold); }
.rar-none { display: grid; place-items: center; gap: .5rem; min-height: 200px; border: 1px dashed var(--line2); border-radius: 12px; padding: 1rem; }
.notif.unread { background: rgba(245, 181, 61, .08); }
.notif-foot { padding: .5rem .8rem; border-top: 1px solid var(--line); }

/* ---- tutorial ---- */
.tut-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1rem; padding: .6rem 1rem; background: linear-gradient(90deg, rgba(245, 181, 61, .16), rgba(245, 181, 61, .04)); border-bottom: 1px solid rgba(245, 181, 61, .4); font-size: .88rem; }
.tut-banner span { display: flex; align-items: center; gap: .5rem; } .tut-banner .ico { width: 16px; height: 16px; color: var(--gold); } .tut-banner form { margin: 0; }
.tut-steps { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.tut-steps a { display: flex; align-items: center; gap: .5rem; padding: .4rem .8rem .4rem .4rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); text-decoration: none; font-size: .82rem; }
.tut-steps b { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgba(255, 255, 255, .08); font-size: .75rem; color: var(--text); } .tut-steps b .ico { width: 12px; height: 12px; }
.tut-steps li.cur a { border-color: var(--gold); color: var(--text); background: rgba(245, 181, 61, .1); } .tut-steps li.cur b { background: var(--gold); color: #1a1100; }
.tut-steps li.done a { color: #b9f0d2; } .tut-steps li.done b { background: var(--green); color: #05140c; }
.tut-body { display: grid; gap: .9rem; max-width: 760px; } .tut-body h2 { font: 400 1.9rem/1 var(--display); letter-spacing: .04em; margin: 0; } .tut-body p { margin: 0; line-height: 1.55; color: #d4d4dc; }
.tut-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .tut-list li { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem .8rem; border-radius: 10px; background: rgba(255, 255, 255, .04); line-height: 1.45; }
.tut-list .ico { flex: none; width: 18px; height: 18px; color: var(--gold); margin-top: .15rem; }
.tut-num { margin: 0; padding-left: 1.3rem; display: grid; gap: .5rem; line-height: 1.5; color: #d4d4dc; }
.tut-nav { margin-top: 1rem; gap: .6rem; flex-wrap: wrap; } .tut-nav form { margin: 0; } .tut-replay { margin: 0 0 .6rem; }

/* ---- play hub: two big sides ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; min-height: calc(100vh - 190px); min-height: calc(100svh - 190px); border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.split-side { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .6rem; padding: clamp(1.2rem, 4vw, 3rem); color: #fff; text-decoration: none; background-size: cover; background-position: center; isolation: isolate; transition: flex .3s, filter .3s; }
.split-side::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .1) 60%); transition: opacity .3s; }
.sp-camp { background-image: url('/assets/img/play-campaign.png'); }
.sp-pvp { background-image: url('/assets/img/play-pvp.png'); border-left: 1px solid rgba(255, 255, 255, .15); }
.split-side:hover::before, .split-side:focus-visible::before { opacity: .55; }
.split-side:hover .sp-go, .split-side:focus-visible .sp-go { background: var(--gold); color: #1a1100; }
.sp-kick { font-size: .75rem; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); font-weight: 800; }
.sp-title { font: 400 clamp(3rem, 9vw, 7rem)/.9 var(--display); letter-spacing: .05em; text-transform: uppercase; text-shadow: 0 4px 30px rgba(0, 0, 0, .7); }
.sp-text { max-width: 28ch; color: #e6e6ee; line-height: 1.4; }
.sp-meta { font-size: .82rem; color: #ffd98a; }
.sp-go { display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start; margin-top: .5rem; padding: .6rem 1.2rem; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; background: rgba(0, 0, 0, .35); }
.sp-go .ico { width: 16px; height: 16px; }
.split-foot { text-align: center; margin: .8rem 0 0; } .split-foot a { color: var(--muted); font-size: .85rem; }
@media (max-width: 700px) { .split { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; min-height: calc(100svh - 150px); } .sp-pvp { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .15); } }

/* ---- lobby 2.0 ---- */
.bt-step { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-right: .6rem; border-radius: 50%; background: var(--gold); color: #1a1100; font: 800 .85rem/1 var(--font, inherit); vertical-align: middle; }
.bt-roster2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: .8rem; }
.bt-pick2 .bt-pick-in { flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; border-radius: 12px; background: var(--panel); }
.bt-port { display: block; aspect-ratio: 5 / 4; background: #000; overflow: hidden; }
.bt-port img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: transform .3s; }
.bt-port i { display: grid; place-items: center; height: 100%; font: 400 3rem var(--display); font-style: normal; color: var(--muted); }
.bt-pick2:hover .bt-port img { transform: scale(1.06); }
.bt-pick2 .bt-pick-txt { padding: .6rem .8rem .8rem; gap: .15rem; }
.bt-pick2 .bt-pick-txt em { font-style: normal; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.bt-stats { display: flex; gap: .7rem; margin-top: .3rem; font-size: .78rem; color: #d4d4dc; } .bt-stats i { display: inline-flex; align-items: center; gap: .25rem; font-style: normal; } .bt-stats .ico { width: 13px; height: 13px; color: var(--gold); }
.bt-pick2 .bt-tick { position: absolute; top: .5rem; right: .5rem; }
.bt-arenas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: .8rem; }
.bt-arena { position: relative; display: block; cursor: pointer; }
.bt-arena input, .bt-diff input { position: absolute; opacity: 0; pointer-events: none; }
.bt-arena-in { position: relative; display: grid; align-content: end; gap: .2rem; min-height: 150px; padding: 1rem; border-radius: 12px; border: 2px solid var(--line); overflow: hidden; background: var(--ar, linear-gradient(160deg, #1d2236, #0c0e18)); transition: border-color .2s, transform .2s; }
.bt-arena-in::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .05) 70%); }
.bt-arena-in > * { position: relative; }
.bt-arena-in b { font: 400 1.5rem/1 var(--display); letter-spacing: .05em; text-transform: uppercase; } .bt-arena-in small { color: #d4d4dc; font-size: .78rem; line-height: 1.35; } .bt-arena-in em { font-style: normal; color: var(--gold); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.bt-arena-in .bt-tick { position: absolute; top: .6rem; right: .6rem; }
.bt-arena:hover .bt-arena-in { transform: translateY(-2px); }
.bt-arena input:checked + .bt-arena-in { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 8px 26px rgba(245, 181, 61, .18); }
.bt-arena input:checked + .bt-arena-in .bt-tick { background: var(--gold); border-color: var(--gold); color: #1a1100; }
.bt-arena input:focus-visible + .bt-arena-in, .bt-diff input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.ar-meadow { --ar: radial-gradient(circle at 70% 25%, #f4f0d0 0 7%, #0000 8%), radial-gradient(120% 60% at 30% 110%, #1d4d3a 0 50%, #0000 51%), linear-gradient(180deg, #121a3d, #2a4a64 70%, #1d4d3a); }
.ar-ruins { --ar: radial-gradient(60px 120px at 25% 100%, #2a2733 0 98%, #0000), radial-gradient(40px 160px at 55% 100%, #35313f 0 98%, #0000), radial-gradient(50px 110px at 80% 100%, #2a2733 0 98%, #0000), linear-gradient(180deg, #1a1626, #4a3a52 75%, #2b2430); }
.ar-canyon { --ar: radial-gradient(circle at 25% 30%, #ffb040 0 6%, #0000 7%), radial-gradient(90% 70% at 20% 110%, #5a1f12 0 55%, #0000 56%), radial-gradient(90% 60% at 90% 110%, #7a2a12 0 50%, #0000 51%), linear-gradient(180deg, #3a1020, #d2562a 80%); }
.ar-frost { --ar: radial-gradient(circle at 72% 22%, #f2fcff 0 5%, #0000 6%), radial-gradient(120% 55% at 25% 112%, #dff3fb 0 48%, #0000 49%), radial-gradient(90% 50% at 85% 112%, #b6dff0 0 45%, #0000 46%), linear-gradient(180deg, #0c1c3a, #2c6a96 75%, #8cc6e0); }
.ar-forest { --ar: radial-gradient(40px 130px at 12% 100%, #0f3520 0 98%, #0000), radial-gradient(50px 160px at 38% 100%, #144a2a 0 98%, #0000), radial-gradient(45px 140px at 66% 100%, #0f3520 0 98%, #0000), radial-gradient(50px 150px at 90% 100%, #144a2a 0 98%, #0000), linear-gradient(180deg, #08170d, #1f5a34 85%); }
.ar-volcano { --ar: radial-gradient(circle at 50% 20%, #ffd45a 0 4%, #ff6a1f 5% 9%, #0000 10%), radial-gradient(130% 65% at 50% 115%, #2a0c08 0 55%, #0000 56%), linear-gradient(180deg, #1a0606, #7a2410 70%, #ff7a2a); }
.ar-desert { --ar: radial-gradient(circle at 24% 26%, #fff1b8 0 7%, #0000 8%), radial-gradient(120% 50% at 30% 115%, #c9a05f 0 52%, #0000 53%), radial-gradient(100% 45% at 90% 115%, #a97f42 0 50%, #0000 51%), linear-gradient(180deg, #3a2a52, #e08a4a 62%, #d2a45f); }
.bt-diffs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: .8rem; }
.bt-diff { position: relative; display: block; cursor: pointer; }
.bt-diff > span { display: grid; gap: .2rem; padding: 1rem; border-radius: 12px; border: 2px solid var(--line); background: var(--panel); border-top: 4px solid var(--dc, var(--line)); transition: border-color .2s, transform .2s; }
.bt-diff b { font: 400 1.4rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--dc); } .bt-diff small { color: var(--muted); font-size: .78rem; } .bt-diff em { display: inline-flex; align-items: center; gap: .35rem; font-style: normal; font-weight: 800; color: var(--gold); margin-top: .3rem; } .bt-diff em .ico { width: 14px; height: 14px; }
.bt-diff:hover > span { transform: translateY(-2px); }
.bt-diff input:checked + span { border-color: var(--dc); background: color-mix(in srgb, var(--dc) 12%, var(--panel)); box-shadow: 0 0 0 1px var(--dc); }
.df-1 { --dc: #4ade80; } .df-2 { --dc: #f5b53d; } .df-3 { --dc: #ff5a6e; } .df-4 { --dc: #c084fc; } .df-5 { --dc: #ff2d95; }
.bt-go { position: sticky; bottom: .8rem; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; padding: .8rem 1.2rem; border-radius: 14px; border: 1px solid rgba(245, 181, 61, .4); background: rgba(12, 12, 16, .92); backdrop-filter: blur(10px); box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }

/* ---- campaign posters ---- */
.camp-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1.2rem; }
.camp-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 320px; padding: 0; overflow: hidden; border-top-width: 1px; isolation: isolate;
    background: radial-gradient(circle at 78% 22%, color-mix(in srgb, var(--ac) 55%, #fff) 0 5%, #0000 6%), radial-gradient(130% 70% at 20% 115%, color-mix(in srgb, var(--ac) 70%, #000) 0 45%, #0000 46%), radial-gradient(110% 60% at 95% 120%, color-mix(in srgb, var(--ac) 40%, #000) 0 50%, #0000 51%), linear-gradient(180deg, #0a0a14, color-mix(in srgb, var(--ac) 38%, #10101a)); }
.camp-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0) 65%); }
.camp-card:hover { border-color: var(--ac); box-shadow: 0 12px 40px color-mix(in srgb, var(--ac) 25%, transparent); }
.cc-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem; margin: 1rem; padding: .3rem .7rem; border-radius: 999px; background: rgba(0, 0, 0, .55); border: 1px solid color-mix(in srgb, var(--ac) 60%, transparent); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; } .cc-badge .ico { width: 13px; height: 13px; color: var(--ac); }
.cc-body { display: grid; gap: .45rem; padding: 1.2rem; } .cc-body .kicker { color: var(--ac); } .cc-body h2 { font-size: 2.2rem; text-shadow: 0 2px 20px rgba(0, 0, 0, .7); } .cc-body p { color: #d4d4dc; } .cc-body small { color: #c9c9d3; }
.cc-body progress { accent-color: var(--ac); }
.cc-body progress::-webkit-progress-value { background: var(--ac); } .cc-body progress::-moz-progress-bar { background: var(--ac); }

/* ---- announcement banner ---- */
.ann { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .55rem 1rem; font-size: .88rem; font-weight: 600; background: rgba(90, 168, 255, .14); border-bottom: 1px solid rgba(90, 168, 255, .45); }
.ann .ico { width: 16px; height: 16px; flex: none; }
.ann-event { background: rgba(245, 181, 61, .14); border-color: rgba(245, 181, 61, .5); } .ann-warn { background: rgba(255, 90, 110, .15); border-color: rgba(255, 90, 110, .55); }
input[type=number] { background: var(--panel-2, #0e0e12); color: var(--text); border: 1px solid var(--line); border-radius: 3px; padding: .6rem .7rem; font: inherit; max-width: 100%; }
.field input[type=number] { width: 100%; }

/* ---- admin test lab ---- */
.tb-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 1rem; }
.tb-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin-bottom: .6rem; } .tb-row .field { min-width: 90px; } .tb-row .grow { flex: 1 1 200px; }
.tb-a { border-top: 3px solid #5aa8ff; } .tb-b { border-top: 3px solid #ff5a6e; }
.bt-test { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border-radius: 999px; background: rgba(166, 107, 255, .18); border: 1px solid #a66bff; color: #e0ccff; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

/* ---- phones: the board first, everything else compact ---- */
@media (max-width: 640px) {
  #bt-root .page-head { margin-bottom: .5rem; }
  #bt-root .page-head .lede, #bt-root .page-head p { display: none; }
  #bt-root .page-head h1 { font-size: 1.5rem; margin: 0; }
  #bt-root .page-head .row, #bt-root .page-head .actions { display: none; }
  .bt-hud { gap: .45rem; margin-bottom: .5rem; }
  .bt-turn { padding: .5rem .7rem; gap: .55rem; }
  .bt-turn-t small { display: none; }
  .bt-ini { padding: .35rem .5rem; }
  .bt-ini .bt-ini-h { display: none; }
  .bt-order { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: .15rem; -webkit-overflow-scrolling: touch; }
  .bt-order::-webkit-scrollbar { display: none; }
  .bt-order li { flex: 0 0 auto; }
  /* the picture uses the whole screen width, edge to edge */
  .bt-stage { margin-inline: -.6rem; width: calc(100% + 1.2rem); max-width: none; }
  .bt-board { border-radius: 0; box-shadow: none; width: 100%; }
  .bt-map, .bt-fx { border-radius: 0; }
  .bt-map.w320, .bt-map.w288, .bt-map.w400 { width: 100%; }
  .bt-card { padding: .75rem .8rem; }
  .bt-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  .bt-tool { min-height: 3.2rem; }
  .btn { min-height: 2.6rem; }
  .tut-banner { padding: .35rem .7rem; font-size: .78rem; gap: .35rem .6rem; }
  .tut-banner .btn { min-height: 0; padding: .3rem .6rem; }
  /* the page keeps clear of the bottom tab bar */
  .shell { padding-bottom: 6rem; }
}
@media (max-width: 365px) { .bt-map.w288 { width: 100%; } }

.bt-zoom { display: none; }

/* ---- phones, round 2: the battlefield stays on screen while you pick a skill ---- */
@media (max-width: 640px) {
  body:has(#bt-root) .topbar, body:has(#bt-root) .tut-banner { display: none; }
  body:has(#bt-root) .shell { padding-top: .4rem; }
  #bt-root .page-head { display: none; }
  .bt-field-wrap { position: sticky; top: 0; z-index: 30; background: #05070a; margin-inline: -.6rem; box-shadow: 0 8px 16px rgba(0, 0, 0, .65); }
  .bt-stage { margin: 0; width: 100%; max-width: none; overflow-x: auto; justify-items: start; scrollbar-width: none; overscroll-behavior-x: contain; }
  .bt-stage::-webkit-scrollbar { display: none; }
  .bt-zoom { display: block; position: absolute; top: .4rem; right: .4rem; z-index: 40; padding: .35rem .65rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(8, 10, 14, .78); color: #fff; font: 800 .72rem/1 var(--body); letter-spacing: .06em; text-transform: uppercase; }
  body.bt-zoomed .bt-board { width: 180%; max-width: none; flex: none; }
  body.bt-zoomed .bt-map { width: 100% !important; }
  /* the confirm row sticks above the tab bar so you never scroll for it */
  .bt-act form.row { position: sticky; bottom: 4.3rem; z-index: 25; padding: .5rem; margin-inline: -.3rem; background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; box-shadow: 0 -6px 18px rgba(0, 0, 0, .55); }
  .bt-act form.row .btn.primary { flex: 1; min-height: 3rem; font-size: .95rem; }
  .bt-tools { margin-top: .1rem; }
}

.bt-charge { display: flex; align-items: center; gap: .6rem; margin: 0 0 .5rem; font: 700 .72rem var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.bt-charge b { color: #ffd45a; }
.bt-charge progress { flex: 1; height: 8px; accent-color: #ffd45a; }

/* ---- duel clock: big and on the board, so nobody misses it ---- */
@media (min-width: 641px) { .bt-field-wrap { position: relative; } }
.bt-timer { position: absolute; left: .5rem; top: .5rem; z-index: 41; display: flex; align-items: center; gap: .45rem; padding: .3rem .6rem .3rem .5rem; border-radius: 999px; background: rgba(8, 10, 14, .82); border: 1px solid rgba(255, 255, 255, .3); pointer-events: none; }
.bt-timer b { font: 800 1.15rem/1 var(--body); font-variant-numeric: tabular-nums; color: #fff; min-width: 2.6ch; }
.bt-timer progress { width: 4.5rem; height: 6px; accent-color: #5aa8ff; }
.bt-timer.mine progress { accent-color: #ffd45a; }
.bt-timer.low { border-color: #ff5a6e; animation: bt-tick 1s steps(2, jump-none) infinite; }
.bt-timer.low b { color: #ff5a6e; }
.bt-timer.low progress { accent-color: #ff5a6e; }
@keyframes bt-tick { 50% { background: rgba(80, 10, 20, .9); } }
@media (prefers-reduced-motion: reduce) { .bt-timer.low { animation: none; } }

/* ---- end of battle: scoreboard ---- */
.bt-stats { display: block; margin-top: 1rem; }
.bt-stats h2 { margin: 0 0 .7rem; }
.bt-awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .6rem; margin-bottom: .9rem; }
.bt-award { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .6rem .4rem; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); text-align: center; }
.bt-award.s-me { border-color: #5aa8ff; } .bt-award.s-foe { border-color: #ff5a6e; }
.bt-award-k { display: inline-flex; align-items: center; gap: .3rem; font: 800 .66rem var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.bt-award .bt-av { width: 2.6rem; height: 2.6rem; }
.bt-award b { font-size: .85rem; } .bt-award em { font: 800 1.15rem var(--body); font-style: normal; color: #ffd45a; font-variant-numeric: tabular-nums; }
.bt-stat-wrap { overflow-x: auto; }
.bt-stat-t { width: 100%; border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums; }
.bt-stat-t th, .bt-stat-t td { padding: .4rem .5rem; text-align: right; border-top: 1px solid var(--line); }
.bt-stat-t thead th { color: var(--muted); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; border-top: 0; }
.bt-stat-t th:first-child { text-align: left; }
.bt-stat-t tr.me th { color: #8fc8ff; } .bt-stat-t tr.foe th { color: #ff8a98; }
.bt-stat-t td.top { color: #ffd45a; font-weight: 800; }

/* ---- campaign cutscenes: cards talking before / after a stage ---- */
.cs-scene { position: relative; display: flex; flex-direction: column; min-height: min(78svh, 640px); border-radius: 16px; overflow: hidden; background: radial-gradient(90% 70% at 50% 30%, #1c1736, #07060d 75%); border: 1px solid var(--line); }
.cs-top { display: flex; justify-content: space-between; align-items: center; padding: .7rem 1rem; z-index: 3; }
.cs-skip { font: 800 .72rem var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 999px; }
.cs-stage { position: relative; flex: 1; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 3%; min-height: 18rem; }
.cs-ch { margin: 0; width: min(46%, 20rem); aspect-ratio: 5 / 7; border-radius: 14px; overflow: hidden; border: 2px solid rgba(255, 255, 255, .25); box-shadow: 0 10px 40px #000a; filter: brightness(.45) saturate(.7); translate: 0 4%; transition: filter .25s, translate .25s; background: #0a0a0d; }
.cs-ch.on { filter: none; translate: 0 0; border-color: var(--gold, #ffd45a); animation: cs-in .35s ease-out; }
.cs-ch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-noimg { display: grid; place-items: center; width: 100%; height: 100%; font: 800 4rem var(--display); color: #fff6; }
.cs-l { margin-right: auto; } .cs-r { margin-left: auto; }
.cs-box { position: relative; z-index: 2; margin: -2.2rem 3% 1rem; padding: 1rem 1.1rem .9rem; border-radius: 14px; background: rgba(10, 9, 18, .94); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 -8px 30px #0008; }
.cs-name { display: block; font: 400 1.3rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--gold, #ffd45a); margin-bottom: .35rem; }
.cs-line-r .cs-name { text-align: right; }
.cs-text { margin: 0 0 .7rem; font-size: 1.02rem; line-height: 1.5; min-height: 3em; animation: cs-text .4s ease-out; }
.cs-text.narr { font-style: italic; color: #cfcbe6; text-align: center; }
.cs-nav { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.cs-nav .muted { margin-right: auto; font-size: .8rem; }
@keyframes cs-in { from { translate: 0 6%; opacity: .6; } }
@keyframes cs-text { from { opacity: 0; translate: 0 4px; } }
@media (prefers-reduced-motion: reduce) { .cs-ch.on, .cs-text { animation: none; } }
@media (max-width: 640px) { .cs-ch { width: 44%; } .cs-stage { min-height: 15rem; } }
.cs-scene-ed { border: 1px solid var(--line); border-radius: 12px; padding: .8rem; display: grid; gap: .5rem; }
.cs-scene-ed legend { padding: 0 .4rem; font-weight: 800; }
.cs-row .cs-line-in { flex: 3 1 16rem; }

/* ---- tutorial: Frieren explains the rules ---- */
.tut-say { display: flex; align-items: flex-end; gap: 1rem; margin: 0 0 1rem; }
.tut-face { flex: none; width: clamp(5.5rem, 22vw, 9rem); height: auto; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .25); box-shadow: 0 8px 26px #0008; background: #0a0a0d; }
.tut-bubble { position: relative; flex: 1; min-width: 0; padding: .9rem 1.1rem; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line2, rgba(255, 255, 255, .2)); }
.tut-bubble::before { content: ""; position: absolute; left: -.5rem; bottom: 1.4rem; width: 1rem; height: 1rem; rotate: 45deg; background: inherit; border-left: 1px solid var(--line2, rgba(255, 255, 255, .2)); border-bottom: 1px solid var(--line2, rgba(255, 255, 255, .2)); }
.tut-bubble b { display: block; margin-bottom: .25rem; font: 400 1.15rem var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--gold, #ffd45a); }
.tut-bubble p { margin: 0; line-height: 1.5; }
.tut-warn { display: flex; gap: .5rem; align-items: center; padding: .6rem .8rem; border-radius: 10px; background: rgba(255, 212, 90, .1); border: 1px solid rgba(255, 212, 90, .45); }
.tut-admin { margin: 0 0 .6rem; font-size: .8rem; }

/* ---- ranked ---- */
.rk-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px; border: 1px solid var(--rk, #888); color: var(--rk, #888); background: rgba(255, 255, 255, .04); font-weight: 700; white-space: nowrap; }
.rk-badge svg { width: 1em; height: 1em; }
.bt-rankbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .5rem; }
.bt-ranked .row { align-items: center; gap: .75rem; }
.rk-tag { font-weight: 800; letter-spacing: .04em; }
.rk-iron { --rk: #8d8a86; }
.rk-bronze { --rk: #cd7f32; }
.rk-silver { --rk: #c3ccd6; }
.rk-gold { --rk: #ffd45a; }
.rk-platinum { --rk: #4fe0c8; }
.rk-diamond { --rk: #6cb8ff; }
.rk-master { --rk: #c279ff; }
.rk-legend { --rk: #ff5d73; }
.rk-tag { color: var(--rk); }

/* ---- collection: infinite list ---- */
.lz-more { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.5rem 0 2rem; }

/* ---- names list (admin) ---- */
.names-list { margin: .5rem 0; }
.names-list summary { display: inline-flex; cursor: pointer; }
.names-list textarea { display: block; width: 100%; margin: .5rem 0 .25rem; font-family: ui-monospace, monospace; }
.lz-more [hidden], .lz-pager[hidden] { display: none !important; }

.free-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.free-bar svg { width: 1.2em; height: 1.2em; }

/* transformation: the previous picture, shown only while the replay fades it out */
.bu .tc-alt{opacity:0;pointer-events:none}

/* script effects (sfx.js): canvases laid over the battlefield, above the cards */
.bt-jsfx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2001; }
.bt-jsfx-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.sfxjs-box { position: relative; max-width: 720px; aspect-ratio: 36 / 20; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); background: #0a0f18; }
.sfxjs-bg { display: block; width: 100%; height: 100%; }
.sfxjs-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; margin-top: .8rem; }
.bt-jsfx-st { z-index: 1500; }