/* ==========================================================================
   Live-data pages: Hordes & Choirs, Battles & Lectures, Leaderboards
   ========================================================================== */
.side-angel { --side: var(--holy); --side-2: var(--holy-2); --side-glow: rgba(156, 195, 230, .35); }
.side-demon { --side: var(--blood-glow); --side-2: #ffc9b8; --side-glow: rgba(224, 38, 44, .4); }

.empty-state { max-width: 640px; margin: 0 auto; padding: 34px 30px; text-align: center; border: 1px dashed var(--line-strong); color: var(--ink-soft); font-style: italic; }
.empty-state .empty-title { font: 700 1.1rem/1.3 var(--f-head); font-style: normal; color: var(--ink); margin-bottom: .5rem; }
.empty-state p:last-child { margin-bottom: 0; }

.t-rank { font: 700 .95rem/1 var(--f-head); color: var(--muted); width: 3em; }
.t-name { font: 600 1.02rem/1.25 var(--f-head); color: var(--ink) !important; letter-spacing: .02em; }
.t-name small { display: block; margin-top: .2em; font: italic 400 .88rem/1.2 var(--f-body); color: var(--muted); letter-spacing: 0; }
.t-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-wrap td.t-num { color: var(--ink); font-weight: 600; }
.row-angel .t-name { border-left: 2px solid var(--holy); }
.row-demon .t-name { border-left: 2px solid var(--blood-glow); }
.side-dot { display: inline-block; width: 8px; height: 8px; margin-right: .5em; border-radius: 50%; vertical-align: middle; }
.row-angel .side-dot { background: var(--holy); box-shadow: 0 0 8px var(--holy); }
.row-demon .side-dot { background: var(--blood-glow); box-shadow: 0 0 8px var(--blood-glow); }

/* ---------------------------------------------------------------- Hordes & Choirs */
.clan-side { padding-bottom: 40px; }
.clan-side .section-head h2 { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--side-2); text-shadow: 0 0 30px var(--side-glow); }
.clan-count { margin: 1rem 0 0; font-style: italic; color: var(--muted); }
.podium { max-width: var(--wrap); margin: 0 auto 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: end; }
.podium-card {
	position: relative; padding: 34px 26px 26px; text-align: center;
	border: 1px solid var(--line); border-top: 2px solid var(--side);
	background: radial-gradient(ellipse at 50% 0%, var(--side-glow), transparent 60%), linear-gradient(180deg, rgba(21, 16, 21, .95), rgba(9, 7, 10, .98));
	box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
}
.podium-1 { order: 2; padding-top: 50px; box-shadow: 0 0 60px var(--side-glow), 0 20px 50px rgba(0, 0, 0, .55); }
.podium-2 { order: 1; }
.podium-3 { order: 3; }
.podium-rank { display: block; margin-bottom: .8rem; font-size: 1.4rem; letter-spacing: .15em; color: var(--ember-2); text-shadow: 0 0 14px rgba(233, 183, 101, .7); }
.podium-card h3 { font-size: clamp(1.2rem, 2vw, 1.6rem); color: var(--side-2); margin-bottom: .3rem; }
.clan-lv { font: 700 .72rem/1 var(--f-head); letter-spacing: .3em; text-transform: uppercase; color: var(--ember); margin-bottom: .8rem; }
.lv-bar { height: 6px; margin: 0 auto .4rem; max-width: 220px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
.lv-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ember), var(--ember-2)); box-shadow: 0 0 10px rgba(233, 183, 101, .6); }
.clan-exp { font-size: .95rem; color: var(--muted); margin-bottom: 1.2rem; }
.officers { margin: 0; border-top: 1px solid var(--line); text-align: left; }
.officers div { display: flex; justify-content: space-between; gap: 12px; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.officers dt { font: 700 .62rem/1.6 var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.officers dd { margin: 0; font-size: 1rem; color: var(--ink); text-align: right; }
.clan-table { max-width: var(--wrap); margin: 0 auto; }
.lv-chip { display: inline-block; padding: .35em .6em; font: 700 .66rem/1 var(--f-head); letter-spacing: .12em; color: var(--ember-2); border: 1px solid var(--line-strong); white-space: nowrap; }
.clan-guide { background: linear-gradient(180deg, var(--bg), var(--bg-2)); }
.clan-guide-grid { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.clan-guide h3 { font-size: 1.15rem; color: var(--ember-2); margin: 0 0 .9rem; }
.clan-guide h3:not(:first-child) { margin-top: 2rem; }
.clan-guide p, .clan-guide li { color: var(--ink-soft); }
.clan-guide ul { padding-left: 1.2em; }
.clan-guide li::marker { color: var(--blood-glow); }

/* ---------------------------------------------------------------- Battles & Lectures */
.battle-section, .lecture-section { padding-bottom: 60px; }
.battle-card { max-width: 1000px; margin: 0 auto 30px; padding: 36px clamp(20px, 4vw, 44px); border: 1px solid var(--line-strong); background: radial-gradient(ellipse at 50% 0%, rgba(224, 38, 44, .18), transparent 60%), linear-gradient(180deg, rgba(21, 16, 21, .95), rgba(9, 7, 10, .98)); }
.battle-head { text-align: center; margin-bottom: 1.6rem; }
.battle-head h3 { font: 900 clamp(1.8rem, 4vw, 2.8rem)/1.1 var(--f-display); color: #ffe0c8; text-shadow: 0 0 30px rgba(224, 38, 44, .6); }
.battle-date { margin-top: .6rem; font: 600 .8rem/1 var(--f-head); letter-spacing: .25em; text-transform: uppercase; color: var(--ember-2); }
.battle-card h4 { font-size: .8rem; letter-spacing: .25em; text-transform: uppercase; color: var(--ember); margin: 1.6rem 0 .8rem; }
.rule-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.rule-chips li { padding: .45em .9em; font-size: .98rem; border: 1px solid var(--line-strong); background: rgba(122, 12, 12, .14); color: var(--ink); }
.count-badge { display: inline-block; min-width: 1.8em; padding: .2em .45em; margin-left: .4em; text-align: center; font-size: .75rem; color: #fff; background: var(--blood-2); letter-spacing: 0; }
.info-strip { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.info-strip > div { padding: 22px 24px; border: 1px solid var(--line); background: rgba(13, 10, 14, .85); }
.info-strip h4 { font-size: .95rem; color: var(--ember-2); margin-bottom: .4rem; }
.info-strip p { margin: 0; color: var(--ink-soft); font-size: 1.02rem; }
.lecture-list { max-width: 900px; margin: 0 auto; display: grid; gap: 16px; }
.lecture { display: grid; grid-template-columns: 96px 1fr; gap: 22px; padding: 24px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(21, 16, 21, .92), rgba(9, 7, 10, .96)); }
.lecture-pic { width: 96px; height: 96px; object-fit: cover; border: 1px solid var(--line-strong); filter: sepia(.2); }
.lecture-when { font: 700 .7rem/1 var(--f-head); letter-spacing: .25em; text-transform: uppercase; color: var(--blood-glow); margin-bottom: .5rem; }
.lecture h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.lecture p { color: var(--ink-soft); }
.lecture .lecture-by { margin: 0; font-style: italic; color: var(--muted); }
.lecture-by strong { color: var(--ink); font-style: normal; }

/* ---------------------------------------------------------------- Leaderboards */
.boards { max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter) 110px; }
.board-tabs { position: sticky; top: 44px; z-index: 20; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line); background: rgba(6, 5, 8, .94); backdrop-filter: blur(8px); margin: -34px 0 50px; }
.board-tab { position: relative; padding: 18px 12px; text-align: center; font: 700 .8rem/1.3 var(--f-head); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); border-right: 1px solid var(--line); transition: color .25s, background .25s; }
.board-tab:last-child { border-right: 0; }
.board-tab-top { display: block; margin-bottom: .35rem; font: 900 1.1rem/1 var(--f-display); color: var(--ember); letter-spacing: 0; text-transform: none; }
.board-tab:hover { color: var(--ink); background: rgba(122, 12, 12, .1); }
.board-tab[aria-selected="true"] { color: var(--ink); background: linear-gradient(180deg, rgba(122, 12, 12, .3), transparent); box-shadow: inset 0 -2px 0 var(--blood-glow); }
.board-tab[aria-selected="true"] .board-tab-top { color: var(--ember-2); text-shadow: 0 0 12px rgba(233, 183, 101, .6); }
.board-head { text-align: center; margin-bottom: 36px; }
.board-head h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); color: #f1e2c4; }
.board-head h2 em { font-style: normal; color: var(--ember-2); }
.board-head p { margin: .5rem 0 0; color: var(--muted); font-style: italic; }
.board-head { margin-bottom: 26px; }
.board-me { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; max-width: 620px; margin: 0 auto 34px; padding: 14px 24px;
	border: 1px solid rgba(233, 183, 101, .4); background: radial-gradient(ellipse at 50% 0%, rgba(233, 183, 101, .1), transparent 70%), rgba(10, 7, 10, .85); text-align: center; }
.board-me.is-listed { border-color: rgba(240, 208, 142, .75); box-shadow: 0 0 28px rgba(233, 183, 101, .18); }
.board-me-label { font: 700 .68rem/1 var(--f-head); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.board-me-rank { font: 900 1.9rem/1 var(--f-display); color: #f0d08e; text-shadow: 0 0 14px rgba(240, 208, 142, .35); }
.board-me-value { font-size: 1.2rem; color: var(--ink); text-align: left; }
.board-me-value small { color: var(--muted); font-size: .95rem; }
.board-me-value em { display: block; font-size: .9rem; color: var(--ember-2); }
.board-me-why { color: var(--ink-soft); font-style: italic; }
.board-me-why small { color: var(--muted); font-style: normal; }

.board-podium { list-style: none; padding: 0; margin: 0 0 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: end; }
.bp { position: relative; display: flex; flex-direction: column; align-items: center; padding: 30px 18px 24px; text-align: center; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(21, 16, 21, .95), rgba(9, 7, 10, .98)); }
.bp.is-angel { --side: var(--holy); --side-glow: rgba(156, 195, 230, .3); }
.bp.is-demon { --side: var(--blood-glow); --side-glow: rgba(224, 38, 44, .35); }
.bp { border-top: 2px solid var(--side); background: radial-gradient(ellipse at 50% 0%, var(--side-glow), transparent 65%), linear-gradient(180deg, rgba(21, 16, 21, .95), rgba(9, 7, 10, .98)); }
.bp-1 { order: 2; padding-top: 46px; box-shadow: 0 0 50px var(--side-glow); }
.bp-2 { order: 1; }
.bp-3 { order: 3; }
.bp-rank { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 1rem; font: 900 1.2rem/1 var(--f-display); color: var(--bg); background: linear-gradient(180deg, #f6d89a, #a8702f); transform: rotate(45deg); box-shadow: 0 0 20px rgba(233, 183, 101, .5); }
.bp-rank b { display: block; transform: rotate(-45deg); }
.bp-2 .bp-rank { background: linear-gradient(180deg, #e8e8ee, #8a8a96); }
.bp-3 .bp-rank { background: linear-gradient(180deg, #e0a878, #7a4a22); }
.bp-name { font: 700 1.2rem/1.2 var(--f-head); color: var(--ink); }
.bp-clan { margin-top: .3rem; font-size: .95rem; font-style: italic; color: var(--muted); }
.bp-title { display: block; margin-top: .15rem; font: 700 .7rem/1.2 var(--f-head); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--ember); }   /* Top Traders: the trader rank (2026-10-06) */
.bp-value { margin-top: 1rem; font: 700 1.6rem/1 var(--f-head); color: var(--ember-2); font-variant-numeric: tabular-nums; }
.bp-value small { display: block; margin-top: .4rem; font: 600 .6rem/1 var(--f-head); letter-spacing: .25em; text-transform: uppercase; color: var(--muted); }

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 900px) {
	.podium, .board-podium { grid-template-columns: 1fr; }
	.podium-1, .podium-2, .podium-3, .bp-1, .bp-2, .bp-3 { order: 0; }
	.clan-guide-grid, .info-strip { grid-template-columns: 1fr; }
	.board-tabs { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); top: 52px; }
	.board-tab:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* five boards: the last one across (2026-10-06) */
	.board-tab:nth-child(2) { border-right: 0; }
	.board-tab:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
	.lecture { grid-template-columns: 1fr; }
	.lecture-pic { width: 72px; height: 72px; }
}

/* fixes */
section.board-panel { padding: 0; }
.board-tabs { margin: -34px 0 44px; }
.battle-section .empty-state { margin-bottom: 24px; }
.table-wrap td:has(.side-dot) { white-space: nowrap; }

/* ---------------------------------------------------------------- Podium v2: champion always sits highest */
.podium, .board-podium { align-items: start; grid-template-columns: 1fr 1.18fr 1fr; padding-top: 34px; }
.podium-2, .podium-3, .bp-2, .bp-3 { margin-top: 44px; }
.podium-1, .bp-1 {
	z-index: 1;
	border: 1px solid rgba(233, 183, 101, .55);
	border-top: 2px solid var(--ember-2);
	background:
		radial-gradient(ellipse at 50% 0%, rgba(233, 183, 101, .28), transparent 55%),
		radial-gradient(ellipse at 50% 100%, var(--side-glow), transparent 70%),
		linear-gradient(180deg, rgba(30, 22, 20, .97), rgba(10, 7, 9, .99));
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .9), 0 0 70px rgba(233, 183, 101, .22), 0 0 50px var(--side-glow), 0 30px 60px rgba(0, 0, 0, .7);
	padding-top: 58px;
}
.podium-1::before, .bp-1::before {
	content: ""; position: absolute; top: -34px; left: 50%; width: 64px; height: 44px; margin-left: -32px;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff0c8'/%3E%3Cstop offset='.55' stop-color='%23e9b765'/%3E%3Cstop offset='1' stop-color='%238a5a2b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 40 8 12l14 12 10-20 10 20 14-12 4 28z' fill='url(%23g)' stroke='%233a200e' stroke-width='1.5'/%3E%3Ccircle cx='8' cy='11' r='3' fill='%23e0262c'/%3E%3Ccircle cx='32' cy='4' r='3.5' fill='%23e0262c'/%3E%3Ccircle cx='56' cy='11' r='3' fill='%23e0262c'/%3E%3C/svg%3E");
	filter: drop-shadow(0 0 12px rgba(233, 183, 101, .7));
}
.podium-1 h3, .bp-1 .bp-name { font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: #fff1d6; text-shadow: 0 0 24px rgba(233, 183, 101, .5); }
.podium-1 .podium-rank { font-size: 1.8rem; }
.bp-1 .bp-value { font-size: 2.1rem; text-shadow: 0 0 20px rgba(233, 183, 101, .5); }
.bp-1 .bp-rank { width: 54px; height: 54px; font-size: 1.4rem; }
.podium-champion { position: absolute; top: 14px; left: 0; right: 0; font: 700 .6rem/1 var(--f-head); letter-spacing: .4em; text-transform: uppercase; color: var(--ember-2); }
@media (max-width: 900px) {
	.podium, .board-podium { grid-template-columns: 1fr; padding-top: 40px; }
	.podium-2, .podium-3, .bp-2, .bp-3 { margin-top: 0; }
	.podium-1, .bp-1 { margin-bottom: 10px; }
}

/* ===================================================== Achievements, Hall of Records */
.records { max-width: var(--wrap); margin: 0 auto; padding: 70px var(--gutter) 0; }
.records:last-child { padding-bottom: 110px; }
.records-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.records-side { --side: var(--blood-glow); --side-soft: rgba(224, 38, 44, .14); }
.records-angel { --side: var(--holy); --side-soft: rgba(156, 195, 230, .12); }
.records-side-title {
	text-align: center; margin: 0 0 18px; padding-bottom: 12px;
	font: 700 1.25rem/1 var(--f-head); letter-spacing: .32em; text-transform: uppercase; color: var(--side);
	border-bottom: 1px solid var(--line);
	text-shadow: 0 0 18px var(--side-soft);
}
.records-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.record-card {
	padding: 16px 16px 12px;
	background: linear-gradient(180deg, var(--side-soft), transparent 60%), rgba(13, 10, 14, .85);
	border: 1px solid var(--line);
}
.record-card h4 { margin: 0 0 10px; font: 600 .78rem/1.2 var(--f-head); letter-spacing: .18em; text-transform: uppercase; color: var(--ember-2); }
.record-list { list-style: none; margin: 0; padding: 0; }
.record-list li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: baseline; padding: 4px 0; font-size: .98rem; border-top: 1px solid rgba(200, 147, 74, .08); }
.record-list li:first-child { border-top: 0; }
.record-rank { font: 700 .78rem/1 var(--f-head); color: var(--muted); text-align: center; }
.record-name { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-value { font: 600 .82rem/1 var(--f-head); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.record-list li.is-first { padding: 7px 8px; margin: 0 -8px 4px; background: var(--side-soft); border: 1px solid var(--side); }
.record-list li.is-first .record-rank { color: var(--side); font-size: .95rem; }
.record-list li.is-first .record-name { color: #f4e6c8; font-weight: 600; font-size: 1.05rem; }
.record-list li.is-first .record-value { color: var(--ember-2); font-size: .92rem; }
.record-empty { margin: 0; color: var(--muted); font-style: italic; }

.relic-top { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: grid; gap: 8px; }
.relic-top li { --side: var(--blood-glow); display: grid; grid-template-columns: 40px 1fr auto; gap: 16px; align-items: center; padding: 12px 18px; border: 1px solid var(--line); border-left: 2px solid var(--side); background: rgba(13, 10, 14, .85); }
.relic-top li.is-angel { --side: var(--holy); }
.relic-top li.is-first { padding: 20px 22px; border-color: var(--ember); border-left-width: 3px; background: linear-gradient(90deg, rgba(200, 147, 74, .16), rgba(13, 10, 14, .9) 70%); box-shadow: 0 0 30px rgba(200, 147, 74, .14); }
.relic-top li.is-first .record-rank { font-size: 1.5rem; color: var(--ember-2); }
.relic-top li.is-first .relic-who b { font-size: 1.35rem; color: #f4e6c8; }
.relic-who b { display: block; font: 600 1.05rem/1.2 var(--f-head); color: var(--ink); }
.relic-who small { color: var(--muted); font-size: .9rem; }
.relic-count { text-align: right; font: 700 1.2rem/1 var(--f-head); color: var(--ember-2); }
.relic-count small { display: block; margin-top: 4px; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.records-more { text-align: center; margin: 26px 0 0; }

.rank-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; text-align: center; }
.rank-steps li { padding: 18px 10px; border: 1px solid var(--line); background: rgba(13, 10, 14, .85); font: 600 .8rem/1.2 var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.rank-steps span { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 auto 10px; border-radius: 50%; border: 1px solid currentColor; font-size: 1.1rem; letter-spacing: 0; }
.rank-steps .tier-1 span { color: #b0794a; }
.rank-steps .tier-2 span { color: #c9ccd2; }
.rank-steps .tier-3 span { color: var(--ember-2); }
.rank-steps .tier-4 span { color: var(--blood-glow); box-shadow: 0 0 16px rgba(224, 38, 44, .35); }

.records-summary { margin: 0 auto 10px; }
.records-tabs { margin-top: 20px; padding-bottom: 0; }

@media (max-width: 1000px) { .records-sides { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
	.records-grid { grid-template-columns: 1fr; }
	.rank-steps { grid-template-columns: 1fr 1fr; }
	.relic-top li { grid-template-columns: 28px 1fr auto; gap: 10px; padding: 10px 12px; }
}

/* ===================================================== Battles: arena link, status, website sign-up */
.battle-arena-link { margin: 18px 0 0; }
.battle-status { display: inline-block; margin: 10px 0 0; padding: 4px 12px; font: 700 .62rem/1.4 var(--f-head); letter-spacing: .2em; text-transform: uppercase; border: 1px solid var(--line-strong); color: var(--ink-soft); }
.battle-status-1 { color: #c9f2c0; border-color: rgba(120, 200, 110, .6); background: rgba(60, 120, 50, .18); }
.battle-status-2 { color: var(--ember-2); }
.battle-status-3 { color: #ffd8c8; border-color: var(--blood-glow); background: rgba(168, 20, 26, .3); }
.battle-msg { max-width: 1000px; margin: 0 auto 18px; padding: 14px 20px; border: 1px solid var(--line-strong); font-size: 1.05rem; }
.battle-msg-ok { border-color: rgba(120, 200, 110, .6); background: rgba(60, 120, 50, .16); color: #d8f5d0; }
.battle-msg-error { border-color: var(--blood-glow); background: rgba(168, 20, 26, .22); color: #ffd8c8; }
.battle-signup { margin: 1.6rem 0 0; padding: 20px 22px; border: 1px solid var(--line); background: rgba(9, 7, 10, .7); }
.battle-signup p { margin: 0 0 .8rem; color: var(--ink-soft); }
.battle-signup p:last-child { margin-bottom: 0; }
.battle-signup b { color: var(--ink); }
.battle-signup-title { font-size: 1.1rem; }
.battle-signup fieldset { margin: 0 0 14px; padding: 0; border: 0; }
.battle-signup legend { margin-bottom: 8px; font: 600 .95rem/1.3 var(--f-head); color: var(--ember-2); }
.battle-signup label { display: inline-flex; align-items: center; gap: 8px; margin-right: 22px; color: var(--ink); cursor: pointer; }
.battle-signup input[type=radio] { accent-color: var(--blood-glow); width: 16px; height: 16px; }
.battle-signed { color: var(--ink) !important; }
.info-note { margin: .6rem 0 0; font-size: .92rem; font-style: italic; color: var(--muted); }

/* Battle card on the arena picture; Sign Up under the status badge */
.battle-card { position: relative; isolation: isolate; overflow: hidden;
	background: linear-gradient(180deg, rgba(9, 7, 10, .25), rgba(9, 7, 10, .62) 40%, rgba(9, 7, 10, .82)), url(../img/art/arena.webp) center top / cover no-repeat; }
.battle-head-cta { margin: 16px 0 0; }
.battle-head-cta .btn { min-width: 180px; }
.battle-signup.only-form { margin: 0; padding: 0; border: 0; background: none; }
.battle-signup.only-form .battle-signup-form { margin-top: 1.6rem; padding: 20px 22px; border: 1px solid var(--line); background: rgba(9, 7, 10, .82); }

/* Past Battles on the Battles page: matchups with the victors in gold, names coloured by species */
.past-battles { padding-top: 10px; }
.pb-key { margin: 10px 0 0; font-size: .95rem; color: var(--muted); }
.pb-win-key { color: #f0c64a; font-weight: 700; }
.pb-list { max-width: 1000px; margin: 0 auto; display: grid; gap: 18px; }
.pb-card { padding: 22px clamp(18px, 3vw, 32px); border: 1px solid var(--line-strong); background: radial-gradient(ellipse at 50% 0%, rgba(240, 198, 74, .08), transparent 60%), linear-gradient(180deg, rgba(21, 16, 21, .95), rgba(9, 7, 10, .98)); }
.pb-head h3 { margin: 0; font: 700 1.45rem/1.2 var(--f-head); color: #f1e2c4; }
.pb-meta { margin: 6px 0 14px; color: var(--muted); font-size: .95rem; }
.pb-round + .pb-round { margin-top: 12px; }
.pb-round-title { margin: 0 0 8px; font: 700 .75rem var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: var(--ember-2); }
.pb-matches { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pb-matches li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.pb-fighter { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 10px 14px; border: 1px solid var(--line); background: rgba(0, 0, 0, .3); min-width: 0; }
.pb-matches li .pb-fighter:last-child { justify-content: flex-end; text-align: right; }
.pb-fighter.is-win { border-color: rgba(240, 198, 74, .8); background: linear-gradient(90deg, rgba(240, 198, 74, .2), rgba(240, 198, 74, .06)); box-shadow: 0 0 18px rgba(240, 198, 74, .15); }
.pb-fighter.is-lose { opacity: .55; }
.pb-name, .pb-name a { font: 700 1rem var(--f-head); text-decoration: none; }
.pb-name.is-angel, .pb-name.is-angel a { color: #7cc0ff; }
.pb-name.is-demon, .pb-name.is-demon a { color: #ff7a5c; }
.pb-name a:hover { text-decoration: underline; }
.pb-age { color: var(--muted); font-size: .82rem; }
.pb-won { padding: 1px 8px; background: #f0c64a; color: #2a1a06; font: 700 .66rem/1.6 var(--f-head); letter-spacing: .16em; text-transform: uppercase; }
.pb-vs { color: var(--ember-2); font: italic 700 .95rem var(--f-head); }
.pb-fighters { margin: 0; line-height: 1.8; }
.pb-none { margin: 0; color: var(--muted); font-style: italic; }
@media (max-width: 600px) { .pb-matches li { grid-template-columns: 1fr; } .pb-matches li .pb-fighter:last-child { justify-content: flex-start; text-align: left; } .pb-vs { text-align: center; } }

/* Arena Champions: the big button to the Top 10 */
.arena-top-cta { margin: 16px 0 4px; text-align: center; }
.arena-top-cta .btn { padding: 10px 22px; font-size: .86rem; letter-spacing: .12em; }

/* Battle rewards (2026-10-03): for winning, for taking part, randomizer. Battles page, past battles and the Admin Panel. */
.br-rewards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 0 0 22px; }
.br-group { padding: 12px 14px; border: 1px solid var(--line); border-top: 2px solid rgba(233, 183, 101, .7); background: rgba(10, 7, 10, .55); }
.br-group.br-join { border-top-color: rgba(120, 220, 140, .75); }
.br-group.br-random { border-top-color: rgba(200, 140, 255, .75); }
.br-title { margin: 0 0 10px; font: 700 .72rem var(--f-head); letter-spacing: .16em; text-transform: uppercase; color: #f0d08e; }
.br-join .br-title { color: #8fe0a2; }
.br-random .br-title { color: #d9b8ff; }
.br-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.br-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.br-icon { width: 44px; height: 44px; flex: none; object-fit: contain; border: 1px solid rgba(233, 183, 101, .35); background: rgba(0, 0, 0, .4); padding: 3px; }
.br-text { display: grid; gap: 2px; flex: 1 1 140px; min-width: 0; }
.br-name { font: 700 .95rem/1.25 var(--f-head); color: var(--ink); }
.br-name b { color: #f0c64a; }
.br-winners { font-size: .82rem; color: #d9b8ff; }
.br-drawn { font-size: .85rem; color: var(--ink-soft); }
.br-acts { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.pb-rewards { margin-top: 14px; }
.pb-rewards .br-rewards { margin-bottom: 0; }
.br-admin { margin-bottom: 18px; }
.br-admin h3 small { margin-left: 8px; color: var(--muted); font-weight: 400; }
.br-add { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.br-add-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.br-add-row label { display: grid; gap: 4px; margin: 0; }
.br-add-item { flex: 1 1 260px; }
.br-pick { display: flex; align-items: center; gap: 8px; }
.br-pick select { flex: 1; min-width: 0; }
.br-add-num input { width: 110px; }
.br-add-label input { width: 200px; }
.bm-reopen-form { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }

/* Battle rewards on the Battles page (the active battle), 2026-10-03: a framed showcase with a lettered heading; For winning (gold),
   For taking part (green) side by side and the randomizer (violet) across the width; each reward a loot tile with its picture and amount. */
.br-showcase { position: relative; margin: 30px 0 4px; padding: 26px clamp(14px, 3vw, 28px) 28px; border: 1px solid rgba(233, 183, 101, .38);
	background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(240, 198, 74, .14), transparent 70%), radial-gradient(ellipse 80% 50% at 50% 100%, rgba(140, 24, 24, .16), transparent 70%), linear-gradient(180deg, #130d11, #07050a);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .8), inset 0 0 60px rgba(0, 0, 0, .6), 0 18px 40px rgba(0, 0, 0, .5); }
.br-showcase::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(233, 183, 101, .14); pointer-events: none; }
.br-show-head { position: relative; margin: 0 0 22px; text-align: center; }
.br-show-kicker { margin: 0; font: 700 .7rem var(--f-head); letter-spacing: .32em; text-transform: uppercase; color: var(--ember-2); }
.br-showcase .br-show-head h4 { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 6px 0 0; padding: 0; border: 0; font: 700 clamp(1.35rem, 2.6vw, 1.9rem)/1.15 var(--f-head); letter-spacing: .1em; text-transform: uppercase;
	background: linear-gradient(180deg, #fff3cf, #e9b765 55%, #9a6a22); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 10px rgba(240, 198, 74, .25)); }
.br-showcase .br-show-head h4::before, .br-showcase .br-show-head h4::after { content: ''; flex: 0 1 120px; height: 1px; background: linear-gradient(90deg, transparent, rgba(233, 183, 101, .8)); }
.br-showcase .br-show-head h4::after { background: linear-gradient(270deg, transparent, rgba(233, 183, 101, .8)); }

.br-rewards.is-showcase { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 18px; margin: 0; }
.is-showcase .br-group:only-child, .is-showcase .br-random { grid-column: 1 / -1; }
.is-showcase .br-win:has(+ .br-random), .is-showcase .br-join:first-child:has(+ .br-random) { grid-column: 1 / -1; }
@media (max-width: 700px) { .br-rewards.is-showcase { grid-template-columns: 1fr; } }

.is-showcase .br-group { --br-c: 240, 198, 74; position: relative; padding: 0; border: 1px solid rgba(var(--br-c), .4);
	background: linear-gradient(180deg, rgba(var(--br-c), .1), transparent 45%), rgba(8, 6, 9, .88);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7), inset 0 0 36px rgba(0, 0, 0, .5), 0 10px 26px rgba(0, 0, 0, .45); }
.is-showcase .br-group.br-join { --br-c: 120, 220, 140; }
.is-showcase .br-group.br-random { --br-c: 200, 150, 255; }
/* corner brackets */
.is-showcase .br-group::before, .is-showcase .br-group::after { content: ''; position: absolute; width: 18px; height: 18px; pointer-events: none; border: 2px solid rgba(var(--br-c), .9); }
.is-showcase .br-group::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.is-showcase .br-group::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
/* the banner */
.is-showcase .br-head { padding: 13px 16px 11px; text-align: center; background: linear-gradient(90deg, transparent, rgba(var(--br-c), .2), transparent); border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(var(--br-c), .75), transparent) 1; }
.is-showcase .br-title { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; font: 700 1.02rem var(--f-head); letter-spacing: .22em; text-transform: uppercase; color: rgb(var(--br-c)); text-shadow: 0 0 16px rgba(var(--br-c), .5); }
.is-showcase .br-title::before, .is-showcase .br-title::after { content: ''; width: 7px; height: 7px; flex: none; transform: rotate(45deg); background: rgba(var(--br-c), .95); box-shadow: 0 0 8px rgba(var(--br-c), .8); }
.is-showcase .br-sub { margin: 3px 0 0; color: var(--muted); font-style: italic; font-size: .88rem; }
/* the loot tiles */
.is-showcase .br-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; padding: 16px; }
.is-showcase .br-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 10px 12px; text-align: center; border: 1px solid rgba(255, 255, 255, .07);
	background: radial-gradient(circle at 50% 28%, rgba(var(--br-c), .16), transparent 65%), rgba(0, 0, 0, .35); transition: transform .2s, border-color .2s, box-shadow .2s; }
.is-showcase .br-item:hover { transform: translateY(-3px); border-color: rgba(var(--br-c), .55); box-shadow: 0 8px 20px rgba(0, 0, 0, .45), 0 0 16px rgba(var(--br-c), .2); }
.br-pic { position: relative; flex: none; width: 72px; height: 72px; display: grid; place-items: center; border: 1px solid rgba(var(--br-c), .65);
	background: radial-gradient(circle at 50% 40%, rgba(var(--br-c), .25), rgba(0, 0, 0, .65) 72%); box-shadow: 0 0 18px rgba(var(--br-c), .28), inset 0 0 12px rgba(0, 0, 0, .65); }
.br-pic .br-icon { width: 62px; height: 62px; border: 0; background: none; padding: 0; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .7)); }
.br-qty { position: absolute; right: -10px; bottom: -10px; min-width: 30px; padding: 2px 7px; text-align: center; font: 700 .86rem/1.5 var(--f-head);
	color: #1c1004; background: linear-gradient(180deg, #ffe7a3, #e0a93c 60%, #a8741c); border: 1px solid #3a2408; box-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.br-join .br-qty { background: linear-gradient(180deg, #e3ffe9, #8fdca2 60%, #4f9a63); border-color: #12301b; color: #0a1c10; }
.br-random .br-qty { background: linear-gradient(180deg, #f3e6ff, #c49af0 60%, #8a5cbf); border-color: #2a1640; color: #170a26; }
.is-showcase .br-text { display: grid; gap: 3px; justify-items: center; }
.is-showcase .br-name { font: 700 1rem/1.25 var(--f-head); letter-spacing: .02em; color: #f4e7cc; }
.is-showcase .br-winners { color: rgb(var(--br-c)); font-size: .82rem; }
.is-showcase .br-drawn { color: var(--ink-soft); font-size: .84rem; }
.is-showcase .br-text { flex: none; min-width: 0; }
/* reward order arrows (Admin Panel) */
.br-move { display: inline-flex; flex-direction: column; gap: 2px; }
.br-arrow { display: grid; place-items: center; width: 24px; height: 18px; padding: 0; border: 1px solid rgba(233, 183, 101, .4); background: rgba(0, 0, 0, .35); color: #f0d08e; cursor: pointer; }
.br-arrow:hover:not(:disabled), .br-arrow:focus-visible { background: rgba(233, 183, 101, .18); border-color: var(--ex-gold, #e9b765); outline: none; }
.br-arrow:disabled { opacity: .3; cursor: default; }
/* Randomizer rewards: the tiles centered in their row */
.is-showcase .br-random .br-list { display: flex; flex-wrap: wrap; justify-content: center; }
.is-showcase .br-random .br-item { flex: 0 1 180px; }

/* Rewards of Battle, compact (2026-10-03): the combatants are the focus, the rewards a slim strip under them with small tiles */
.br-showcase { margin: 22px 0 0; padding: 14px clamp(12px, 2vw, 18px) 16px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .8), inset 0 0 40px rgba(0, 0, 0, .5); }
.br-showcase::before { inset: 4px; }
.br-show-head { margin: 0 0 12px; }
.br-show-kicker { font-size: .6rem; letter-spacing: .28em; }
.br-showcase .br-show-head h4 { gap: 12px; margin-top: 2px; font-size: clamp(1rem, 1.6vw, 1.2rem); letter-spacing: .12em; }
.br-showcase .br-show-head h4::before, .br-showcase .br-show-head h4::after { flex-basis: 70px; }
.br-rewards.is-showcase { gap: 12px; }
.is-showcase .br-group { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7), inset 0 0 24px rgba(0, 0, 0, .45); }
.is-showcase .br-group::before, .is-showcase .br-group::after { width: 12px; height: 12px; border-width: 1px; }
.is-showcase .br-head { padding: 7px 12px 6px; }
.is-showcase .br-title { gap: 8px; font-size: .78rem; letter-spacing: .2em; }
.is-showcase .br-title::before, .is-showcase .br-title::after { width: 5px; height: 5px; }
.is-showcase .br-sub { margin: 1px 0 0; font-size: .74rem; }
.is-showcase .br-list, .is-showcase .br-random .br-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 10px 12px 12px; }
.is-showcase .br-item, .is-showcase .br-random .br-item { flex: 0 1 auto; flex-direction: row; align-items: center; gap: 10px; min-width: 0; padding: 6px 12px 6px 6px; text-align: left; }
.is-showcase .br-item:hover { transform: none; }
.br-showcase .br-pic { width: 44px; height: 44px; box-shadow: 0 0 10px rgba(var(--br-c), .22), inset 0 0 8px rgba(0, 0, 0, .6); }
.br-showcase .br-pic .br-icon { width: 38px; height: 38px; }
.br-showcase .br-qty { right: -7px; bottom: -7px; min-width: 22px; padding: 0 5px; font-size: .7rem; line-height: 1.55; }
.is-showcase .br-text { justify-items: start; gap: 1px; }
.is-showcase .br-name { font-size: .86rem; }
.is-showcase .br-winners, .is-showcase .br-drawn { font-size: .74rem; }
/* randomizer winners: confirmed or not yet (Admin Panel), and the public note before they are confirmed */
.br-reveal { font: 700 .62rem var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: #ffb36b; }
.br-reveal.is-shown { color: #8fe0a2; }
.br-drawn.is-pending { font-style: italic; color: var(--muted); }

/* Past battles: No Show and Challenge matches (2026-10-04) */
.pb-noshow { padding: 1px 8px; background: #7a2a1a; color: #ffe6dc; font: 700 .66rem/1.6 var(--f-head); letter-spacing: .16em; text-transform: uppercase; }
.pb-matches li.is-challenge { padding: 6px 8px; border: 1px solid rgba(240, 198, 74, .5); background: rgba(240, 198, 74, .07); }
.pb-chal { grid-column: 1 / -1; justify-self: center; padding: 1px 10px; border: 1px solid #f0c64a; color: #f8e39a; font: 700 .62rem/1.6 var(--f-head); letter-spacing: .2em; text-transform: uppercase; }

/* The randomizer note (2026-10-07): the Sators' note under a battle's randomizer rewards (Battles page, home page, Admin Panel) */
.br-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 9px 11px; border: 1px solid rgba(200, 140, 255, .35); background: rgba(120, 70, 180, .1); font: italic 400 .9rem/1.45 var(--f-body); color: #e6d6fb; }
.br-note svg { flex: none; margin-top: 2px; fill: none; stroke: #d9b8ff; stroke-width: 2; stroke-linecap: round; }
.br-note-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.br-note-form label { flex: 1 1 360px; display: grid; gap: 4px; margin: 0; }
.br-note-form label small { color: var(--muted); font-weight: 400; }
/* The home page's Rewards of Battle (2026-10-07) */
.home-battle { padding: clamp(36px, 6vw, 70px) clamp(16px, 4vw, 40px) 0; }
.home-br { max-width: 1100px; margin: 0 auto; }
.home-br-battle { margin: 10px 0 0; font-size: .95rem; color: var(--ink-soft); }
.home-br-battle b { color: #f4e6c8; font-family: var(--f-head); }
.home-br-go { position: relative; margin: 22px 0 0; text-align: center; }
@media (max-width: 640px) { .home-br .br-rewards.is-showcase { grid-template-columns: 1fr; } }

/* Home page rewards, icons only (2026-10-10): the pictures with their amounts; the name floats over the picture on hover (a tap on a phone) */
.home-br .is-showcase .br-list, .home-br .is-showcase .br-random .br-list { gap: 12px; }
.home-br .is-showcase .br-item.is-icon { padding: 8px 10px 10px 8px; cursor: default; outline: none; }
.home-br .is-showcase .br-item.is-icon:hover, .home-br .is-showcase .br-item.is-icon:focus-visible { border-color: rgba(var(--br-c), .6); box-shadow: 0 0 14px rgba(var(--br-c), .25); }
.br-item.is-icon .br-tip { position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 30; display: grid; gap: 2px; justify-items: center; width: max-content; max-width: 240px;
	padding: 7px 11px; border: 1px solid rgba(var(--br-c), .7); background: rgba(12, 9, 12, .97); box-shadow: 0 8px 22px rgba(0, 0, 0, .6), 0 0 12px rgba(var(--br-c), .2);
	text-align: center; white-space: normal; pointer-events: none; opacity: 0; visibility: hidden; transform: translate(-50%, 4px); transition: opacity .15s, transform .15s, visibility .15s; }
.br-item.is-icon .br-tip::after { content: ''; position: absolute; left: 50%; top: 100%; width: 9px; height: 9px; margin: -5px 0 0 -5px; transform: rotate(45deg);
	border: solid rgba(var(--br-c), .7); border-width: 0 1px 1px 0; background: rgba(12, 9, 12, .97); }
.br-item.is-icon:hover .br-tip, .br-item.is-icon:focus .br-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.br-item.is-icon:hover, .br-item.is-icon:focus { z-index: 31; }
.home-br .br-item.is-icon .br-name { font-size: .9rem; color: #f4e7cc; }

/* Home page battle title (2026-10-10): the Battles page's own (.battle-head), over the rewards */
.home-br .home-br-head { position: relative; margin: 4px 0 18px; }
.home-br .home-br-head .codex-kicker { margin-bottom: .55rem; }
.home-br-state { margin: .7rem 0 0; font: italic 400 .9rem/1.3 var(--f-body); color: var(--ink-soft); }

/* Land Dominion (2026-10-10): the lands each side holds, over the board; a bar of the whole realm under the three counts */
.land-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 30px; }   /* Angels and Demons (2026-10-10: no Neutral) */
.land-side { --side: var(--muted); --side-glow: rgba(255, 255, 255, .06); display: grid; justify-items: center; gap: 2px; padding: 14px 10px 12px; text-align: center;
	border: 1px solid var(--line); border-top: 2px solid var(--side); background: radial-gradient(circle at 50% 0%, var(--side-glow), transparent 70%), rgba(10, 7, 10, .55); }
.land-side.is-angel { --side: var(--holy); --side-glow: rgba(156, 195, 230, .22); }
.land-side.is-demon { --side: var(--blood-glow); --side-glow: rgba(224, 38, 44, .25); }
.land-side.is-neutral { --side: #b9ab8e; }
.land-side-label { font: 700 .68rem var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: var(--side); }
.land-side b { font: 700 clamp(1.6rem, 3.4vw, 2.3rem)/1.1 var(--f-head); color: #f4e7cc; font-variant-numeric: tabular-nums; }
.land-side small { color: var(--muted); font-size: .82rem; }
.land-bar { grid-column: 1 / -1; display: flex; height: 8px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .6); background: rgba(0, 0, 0, .4); }
.land-bar i { display: block; height: 100%; }
.land-bar .is-angel { background: linear-gradient(180deg, #d6ecff, var(--holy)); }
.land-bar .is-neutral { background: #6d6352; }
.land-bar .is-demon { background: linear-gradient(180deg, #ff6a5a, var(--blood-glow)); }
@media (max-width: 520px) { .land-sides { gap: 8px; } .land-side { padding: 10px 4px; } .land-side-label { font-size: .58rem; letter-spacing: .12em; } }   /* phones: still three columns */