/* =====================================================================
   Liga znanja — the public board
   ---------------------------------------------------------------------
   Its own sheet. liga.css keeps the teacher panel, the modals and the
   reversal dialog; nothing here touches them.

   Tokens come from the theme when it is active and fall back to their
   own values otherwise, so the page looks finished under any theme.
   ===================================================================== */

.rml-league-page {
	--l-text: var(--text, #eef0ff);
	--l-soft: var(--text-soft, #c3c7e8);
	--l-dim: var(--text-dim, #9096c2);
	--l-blue: var(--neon-blue, #4d7cff);
	--l-cyan: var(--neon-blue-2, #63c8f5);
	--l-violet: var(--neon-violet, #b46bff);
	--l-brd: var(--glass-brd, rgba(255, 255, 255, 0.10));
	--l-glass: var(--glass-bg, rgba(255, 255, 255, 0.045));
	--l-radius: var(--radius, 22px);
	--l-ease: var(--ease, cubic-bezier(0.22, 1, 0.36, 1));

	--l-gold: #f2b544;
	--l-silver: #b9c6e8;
	--l-bronze: #cf8a52;

	box-sizing: border-box;
}

.rml-league-page *,
.rml-league-page *::before,
.rml-league-page *::after { box-sizing: border-box; }

/* ---------- hero ---------------------------------------------------- */

.rml-lhero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(96px, 12vw, 150px) 0 clamp(40px, 6vw, 72px);
}

.rml-lhero__deco {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	color: var(--l-blue);
}

.rml-lhero__glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
}
.rml-lhero__glow--a {
	width: 44vw; height: 44vw; max-width: 600px; max-height: 600px;
	top: -18%; left: -10%; background: rgba(77, 124, 255, 0.22);
}
.rml-lhero__glow--b {
	width: 40vw; height: 40vw; max-width: 540px; max-height: 540px;
	right: -8%; bottom: -22%; background: rgba(180, 107, 255, 0.20);
}

.rml-lhero__grid-lines {
	position: absolute;
	inset: 0;
	opacity: 0.16;
	background-image:
		linear-gradient(rgba(160, 180, 255, 0.10) 1px, transparent 1px),
		linear-gradient(90deg, rgba(160, 180, 255, 0.10) 1px, transparent 1px);
	background-size: 46px 46px;
	mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 78%);
	-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 20%, transparent 78%);
}

.rml-lhero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.75fr);
	align-items: center;
	gap: clamp(24px, 4vw, 56px);
}

.rml-lhero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--l-dim);
}
.rml-lhero__eyebrow::before {
	content: "";
	width: 30px; height: 2px; border-radius: 2px;
	background: linear-gradient(90deg, var(--l-gold), transparent);
}

.rml-lhero__title {
	margin: 0 0 14px;
	font-size: clamp(2.3rem, 6vw, 4.1rem);
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: var(--l-text);
}

.rml-lhero__slogan {
	margin: 0 0 16px;
	font-size: clamp(1.05rem, 2.1vw, 1.4rem);
	font-weight: 650;
	background: linear-gradient(120deg, #9dbaff, #cfa6ff 55%, #ffc7f0);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.rml-lhero__lead {
	margin: 0;
	max-width: 54ch;
	line-height: 1.75;
	color: var(--l-soft);
}

.rml-lhero__visual {
	display: grid;
	place-items: center;
	position: relative;
}

.rml-trophy3d {
	width: min(300px, 62vw);
	height: auto;
	filter: drop-shadow(0 24px 44px rgba(240, 169, 60, 0.28));
	animation: rml-float 6s ease-in-out infinite;
}

@keyframes rml-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

/* ---------- statistics ---------------------------------------------- */

.rml-lstats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 1.8vw, 20px);
}

.rml-lstat {
	position: relative;
	padding: clamp(18px, 2.2vw, 26px);
	border: 1px solid var(--l-brd);
	border-radius: 18px;
	background: var(--l-glass);
	backdrop-filter: blur(12px);
}

/* The first card carries the number the page is actually about. */
.rml-lstat--lead {
	background:
		radial-gradient(90% 130% at 0% 0%, rgba(140, 92, 255, 0.20), transparent 62%),
		var(--l-glass);
	border-color: rgba(155, 92, 255, 0.34);
	box-shadow: 0 0 42px -18px rgba(140, 105, 255, 0.8);
}

.rml-lstat__icon {
	display: inline-flex;
	width: 34px; height: 34px;
	margin-bottom: 12px;
	align-items: center; justify-content: center;
	border-radius: 11px;
	border: 1px solid rgba(99, 200, 245, 0.24);
	background: rgba(77, 124, 255, 0.12);
	color: var(--l-cyan);
}
.rml-lstat__icon svg { width: 18px; height: 18px; }

.rml-lstat__value {
	display: block;
	font-size: clamp(1.7rem, 3.4vw, 2.5rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--l-text);
}
.rml-lstat--lead .rml-lstat__value { font-size: clamp(2rem, 4.2vw, 3.1rem); }

.rml-lstat__label { display: block; margin-top: 6px; color: var(--l-soft); font-size: 0.94rem; }
.rml-lstat__note { display: block; margin-top: 4px; color: var(--l-dim); font-size: 0.82rem; }

/* ---------- podium --------------------------------------------------
 * Source order is 1, 2, 3. The desktop places them 2 · 1 · 3 with grid
 * columns, so the eye gets the winner in the middle while the keyboard
 * and the screen reader still meet them in rank order.
 */

.rml-podium {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: end;
	gap: clamp(12px, 2vw, 26px);
	margin: 0 0 clamp(24px, 3vw, 38px);
	padding: 0;
	list-style: none;
}

.rml-pod {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: clamp(16px, 2vw, 24px) 12px 0;
	border: 1px solid var(--l-brd);
	border-radius: var(--l-radius) var(--l-radius) 0 0;
	background: var(--l-glass);
	backdrop-filter: blur(12px);
}

.rml-pod--1 { grid-column: 2; order: 2; }
.rml-pod--2 { grid-column: 1; order: 1; }
.rml-pod--3 { grid-column: 3; order: 3; }

/* One place only: it fills the middle rather than leaning left. */
.rml-podium--1 .rml-pod--1 { grid-column: 2; }

.rml-pod__rank {
	position: absolute;
	top: -16px;
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	font-weight: 800;
	font-size: 1.05rem;
	color: #12102a;
	border: 2px solid rgba(255, 255, 255, 0.5);
}

.rml-pod__ring {
	display: block;
	border-radius: 50%;
	padding: 4px;
	margin-bottom: 12px;
}
.rml-pod__ring img { display: block; border-radius: 50%; width: 100%; height: auto; }

.rml-pod__name {
	font-weight: 700;
	font-size: clamp(0.98rem, 1.7vw, 1.15rem);
	color: var(--l-text);
	line-height: 1.25;
}
.rml-pod__meta { margin-top: 4px; font-size: 0.83rem; color: var(--l-dim); }

.rml-pod__title {
	margin-top: 8px;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 0.76rem;
	font-weight: 650;
	letter-spacing: 0.02em;
	border: 1px solid var(--l-brd);
	background: rgba(255, 255, 255, 0.05);
	color: var(--l-soft);
}

.rml-pod__points {
	margin: 12px 0 14px;
	font-size: clamp(1.05rem, 2vw, 1.35rem);
	font-weight: 750;
	color: var(--l-text);
}
.rml-pod__points small { font-size: 0.62em; font-weight: 500; color: var(--l-dim); }

/* The step below each card — this is what makes it a podium. */
.rml-pod__step {
	display: block;
	width: 100%;
	margin-top: auto;
	border-radius: 6px 6px 0 0;
}

.rml-pod--1 .rml-pod__rank { background: linear-gradient(140deg, #ffe08a, var(--l-gold)); }
.rml-pod--2 .rml-pod__rank { background: linear-gradient(140deg, #eaf1ff, var(--l-silver)); }
.rml-pod--3 .rml-pod__rank { background: linear-gradient(140deg, #f0bb8a, var(--l-bronze)); }

.rml-pod--1 .rml-pod__ring { background: linear-gradient(140deg, #ffe08a, var(--l-gold), #b46bff); }
.rml-pod--2 .rml-pod__ring { background: linear-gradient(140deg, #eaf1ff, var(--l-silver), #6f8fd8); }
.rml-pod--3 .rml-pod__ring { background: linear-gradient(140deg, #f0bb8a, var(--l-bronze), #a05fd0); }

.rml-pod--1 { box-shadow: 0 0 62px -18px rgba(242, 181, 68, 0.85); border-color: rgba(242, 181, 68, 0.42); }
.rml-pod--2 { box-shadow: 0 0 44px -20px rgba(185, 198, 232, 0.7); border-color: rgba(185, 198, 232, 0.3); }
.rml-pod--3 { box-shadow: 0 0 44px -20px rgba(207, 138, 82, 0.7); border-color: rgba(207, 138, 82, 0.32); }

.rml-pod--1 .rml-pod__step { height: clamp(58px, 7vw, 86px); background: linear-gradient(180deg, rgba(242, 181, 68, 0.5), rgba(242, 181, 68, 0.08)); }
.rml-pod--2 .rml-pod__step { height: clamp(38px, 4.6vw, 58px); background: linear-gradient(180deg, rgba(185, 198, 232, 0.42), rgba(185, 198, 232, 0.06)); }
.rml-pod--3 .rml-pod__step { height: clamp(28px, 3.4vw, 42px); background: linear-gradient(180deg, rgba(207, 138, 82, 0.42), rgba(207, 138, 82, 0.06)); }

/* ---------- rows 4 and down ----------------------------------------- */

.rml-lrows { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }

.rml-lrow {
	display: grid;
	grid-template-columns: 34px auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border: 1px solid var(--l-brd);
	border-radius: 16px;
	background: var(--l-glass);
	transition: transform 0.28s var(--l-ease), border-color 0.28s var(--l-ease);
}
.rml-lrow:hover { transform: translateY(-2px); border-color: rgba(155, 92, 255, 0.4); }

.rml-lrow__pos { font-weight: 750; color: var(--l-dim); text-align: center; }
.rml-lrow img { display: block; border-radius: 50%; }
.rml-lrow__body { min-width: 0; }
.rml-lrow__name { display: block; font-weight: 650; color: var(--l-text); }
.rml-lrow__meta { display: block; margin-top: 2px; font-size: 0.82rem; color: var(--l-dim); }

.rml-lrow__bar {
	display: block;
	margin-top: 8px;
	height: 4px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.09);
	overflow: hidden;
}
.rml-lrow__bar i {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--l-cyan), var(--l-violet));
}

.rml-lrow__points { font-weight: 750; color: var(--l-text); white-space: nowrap; }

.rml-lrows--compact .rml-lrow { grid-template-columns: 26px auto minmax(0, 1fr) auto; padding: 10px 12px; gap: 10px; }
.rml-lrows--compact .rml-lrow__meta { font-size: 0.78rem; }

/* ---------- teacher columns ----------------------------------------- */

.rml-leagues { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); }

.rml-league {
	padding: clamp(18px, 2.2vw, 26px);
	border: 1px solid var(--l-brd);
	border-radius: var(--l-radius);
	background: var(--l-glass);
	backdrop-filter: blur(12px);
}
.rml-league__head { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--l-brd); }
.rml-league__name { margin: 0; font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--l-text); }
.rml-league__facts { margin: 4px 0 0; font-size: 0.86rem; color: var(--l-dim); }

.rml-lempty {
	margin: 0;
	padding: 22px;
	border: 1px dashed var(--l-brd);
	border-radius: 16px;
	text-align: center;
	color: var(--l-dim);
}

.rml-lsection { margin-bottom: clamp(38px, 6vw, 72px); }
.rml-lsection__title {
	margin: 0 0 clamp(16px, 2.4vw, 26px);
	font-size: clamp(1.35rem, 2.8vw, 1.9rem);
	letter-spacing: -0.015em;
	color: var(--l-text);
}

/* ---------- tablet --------------------------------------------------- */

@media (max-width: 1024px) {
	.rml-lstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rml-leagues { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
	.rml-lhero__grid { grid-template-columns: minmax(0, 1fr); }
	.rml-lhero__visual { order: -1; }
	.rml-trophy3d { width: min(220px, 52vw); }
}

/* ---------- phone ----------------------------------------------------
 * The podium stops being a podium: first place takes the full width,
 * second and third sit beside it. Steps would be meaningless at this
 * size, so they go.
 */

@media (max-width: 620px) {

	.rml-podium { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 12px; }

	/* The desktop puts the winner in the middle with order; here the middle
	   does not exist, so the order is reset and first place is simply first. */
	.rml-pod--1 { grid-column: 1 / -1; order: 1; }
	.rml-pod--2 { grid-column: 1; order: 2; }
	.rml-pod--3 { grid-column: 2; order: 3; }

	.rml-pod { border-radius: 18px; padding-bottom: 16px; }
	.rml-pod__step { display: none; }
	.rml-pod__ring img { max-width: 96px; }
	.rml-pod--1 .rml-pod__ring img { max-width: 120px; }

	.rml-lrow { grid-template-columns: 26px auto minmax(0, 1fr); gap: 10px; padding: 11px 12px; }
	.rml-lrow__points { grid-column: 3; justify-self: end; }
	.rml-lstats { gap: 12px; }
}

@media (max-width: 400px) {
	.rml-lstats { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- motion ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.rml-trophy3d { animation: none; }
	.rml-lrow { transition: none; }
	.rml-lrow:hover { transform: none; }
}

/* ---------- leading classes ------------------------------------------ */

.rml-lclasses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }

.rml-lclass {
	padding: clamp(18px, 2.2vw, 26px);
	border: 1px solid var(--l-brd);
	border-radius: 18px;
	background: var(--l-glass);
	backdrop-filter: blur(12px);
}
.rml-lclass--lead {
	border-color: rgba(242, 181, 68, 0.38);
	box-shadow: 0 0 46px -20px rgba(242, 181, 68, 0.75);
}

.rml-lclass__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rml-lclass__name { margin: 0; font-size: clamp(1.15rem, 2.2vw, 1.5rem); color: var(--l-text); }
.rml-lclass__tags { display: flex; gap: 6px; flex-wrap: wrap; }

.rml-ltag {
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--l-soft);
	border: 1px solid var(--l-brd);
	background: rgba(255, 255, 255, 0.05);
}

.rml-lclass__prof { margin: 6px 0 0; font-size: 0.85rem; color: var(--l-dim); }
.rml-lclass__points { margin: 14px 0 8px; font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 750; color: var(--l-text); }
.rml-lclass__points small { font-size: 0.58em; font-weight: 500; color: var(--l-dim); }

.rml-lclass__bar { display: block; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.rml-lclass__bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--l-cyan), var(--l-violet)); }

.rml-lclass__facts { margin: 10px 0 0; font-size: 0.82rem; color: var(--l-dim); }

/* ---------- the ladder ----------------------------------------------- */

.rml-llevels {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rml-llevel {
	position: relative;
	padding: 20px 18px 18px;
	border: 1px solid var(--l-brd);
	border-radius: 16px;
	background: var(--l-glass);
}

/* The line that turns a list into a path. */
.rml-llevel::after {
	content: "";
	position: absolute;
	top: 34px;
	right: -16px;
	width: 16px;
	height: 2px;
	background: linear-gradient(90deg, var(--l-violet), transparent);
}
.rml-llevel:last-child::after { display: none; }

.rml-llevel__dot {
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	margin-bottom: 12px;
	border-radius: 50%;
	font-size: 1rem;
	border: 1px solid rgba(155, 92, 255, 0.4);
	background: rgba(140, 92, 255, 0.16);
}

.rml-llevel__name { display: block; font-weight: 700; color: var(--l-text); }
.rml-llevel__range { display: block; margin-top: 3px; font-size: 0.8rem; color: var(--l-cyan); }
.rml-llevel__desc { display: block; margin-top: 8px; font-size: 0.84rem; line-height: 1.6; color: var(--l-dim); }

/* ---------- activity feed --------------------------------------------- */

.rml-lfeed { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }

.rml-lfeed__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border: 1px solid var(--l-brd);
	border-radius: 14px;
	background: var(--l-glass);
}

.rml-lfeed__pts {
	display: grid;
	place-items: center;
	min-width: 52px;
	padding: 6px 10px;
	border-radius: 999px;
	font-weight: 750;
	color: #0e0b22;
	background: linear-gradient(140deg, #8fe3ff, var(--l-violet));
}

.rml-lfeed__who { display: block; font-weight: 650; color: var(--l-text); }
.rml-lfeed__meta { display: block; margin-top: 2px; font-size: 0.82rem; color: var(--l-dim); }

/* ---------- closing call ---------------------------------------------- */

.rml-lcta {
	padding: clamp(30px, 4.4vw, 56px) clamp(22px, 3.6vw, 48px);
	border: 1px solid var(--l-brd);
	border-radius: var(--l-radius);
	text-align: center;
	background:
		radial-gradient(70% 130% at 50% 0%, rgba(140, 92, 255, 0.20), transparent 66%),
		var(--l-glass);
	backdrop-filter: blur(14px);
}
.rml-lcta__title { margin: 0 0 10px; font-size: clamp(1.4rem, 3vw, 2.1rem); color: var(--l-text); }
.rml-lcta__lead { margin: 0 auto 24px; max-width: 56ch; color: var(--l-soft); line-height: 1.7; }
.rml-lcta__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 1024px) {
	.rml-lclasses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
	.rml-lclasses { grid-template-columns: minmax(0, 1fr); }
	.rml-llevels { grid-template-columns: minmax(0, 1fr); }
	.rml-llevel::after { display: none; }
	.rml-lcta__actions { flex-direction: column; }
	.rml-lcta__actions .rml-btn { width: 100%; }
}