/* Trinity-RO theme for FluxCP (honey style). Loaded after flux.css and overrides it. */

:root {
	--bg: #f7fafc;
	--paper: #ffffff;
	--paper-2: #f6f9fc;
	--paper-3: #eef7fc;
	--ink: #173b56;
	--ink-soft: #4f6b80;
	--ink-faint: #5f788b;
	--line: #dce8ef;
	--line-strong: #c5d9e6;
	--accent: #44a8fc;
	--accent-hover: #168bd9;
	--gold-text: #136fb0;
	--gold-bright: #8fd0ff;
	--espresso: #14213a;
	--danger: #b03224;
	--ok: #2f7a1f;
	--nav: 68px;
	--r-sm: 6px;
	--r: 10px;
	--shadow: 0 2px 10px rgba(28, 65, 101, .1);
	--shadow-lg: 0 12px 32px -14px rgba(28, 65, 101, .35);
	--font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--comb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cpath fill='none' stroke='%23168bd9' stroke-opacity='.11' stroke-width='2' d='M30 0l30 17.3v34.6L30 69.3 0 51.9V17.3zM30 69.3V104'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */

body {
	margin: 0;
	padding: 0;
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink);
	background: var(--bg);
}
table { font-family: var(--font); font-size: 15px; }
a { color: var(--gold-text); text-decoration: none; transition: color .15s; }
a:hover { color: var(--ink); text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
	outline: 3px solid var(--gold-text);
	outline-offset: 2px;
}

.tr-skip {
	position: absolute;
	left: 12px;
	top: -60px;
	z-index: 100;
	padding: 10px 16px;
	background: var(--paper);
	color: var(--ink);
	border-radius: var(--r-sm);
	font-weight: 800;
}
.tr-skip:focus { top: 12px; }

.tr-shell {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
	position: relative;
}

/* ---------- Logo ---------- */

.tr-logo {
	position: relative;
	display: inline-block;
	margin: 0;
	font-family: var(--font);
	font-style: italic;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.03em;
	background: linear-gradient(180deg, #eaf6ff 0%, #8fd0ff 38%, #2f95e6 72%, #138de9 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	filter:
		drop-shadow(1.5px 0 0 #0f3d63) drop-shadow(-1.5px 0 0 #0f3d63)
		drop-shadow(0 1.5px 0 #0f3d63) drop-shadow(0 -1.5px 0 #0f3d63)
		drop-shadow(0 4px 0 #0f3d63);
	padding: .06em .18em .1em .04em;
	text-decoration: none;
}
.tr-logo span {
	background: linear-gradient(180deg, #ffffff 0%, #f0f7fd 60%, #d6e6f1 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.tr-logo-gem {
	position: absolute;
	right: -.08em;
	top: -.02em;
	width: .26em;
	height: .26em;
	background: linear-gradient(135deg, #fff 0%, #bfe3ff 35%, #2f95e6 100%);
	transform: rotate(45deg);
	border-radius: 3px;
	-webkit-text-fill-color: initial;
}
.tr-logo-sm { font-size: 28px; }
.tr-logo-xl { font-size: clamp(60px, 10vw, 120px); }
.tr-logo:hover { -webkit-text-fill-color: transparent; text-decoration: none; }

/* Image logo (img/logo.png, 357x118). */
.tr-logo-img { display: inline-block; margin: 0; padding: 0; border: 0; line-height: 0; }
.tr-logo-img img { display: block; width: 100%; height: auto; }
.tr-logo-nav { flex-shrink: 0; width: 150px; }
.tr-logo-foot { width: 190px; }
.tr-logo-hero { width: min(540px, 86vw); }
.tr-logo-hero img { filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .65)); }
.tr-logo-nav img { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45)); }
.tr-scrolled .tr-logo-nav img, .tr-menu-open .tr-logo-nav img { filter: none; }

.tr-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #5fe36a; vertical-align: middle; }
.tr-dot-off { background: #ff6b5b; }

/* ---------- Buttons ---------- */

.tr-btn, .tr-card button,
input[type=submit], input[type=button], input[type=reset], .submit_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 12px 24px;
	box-sizing: border-box;
	font-family: var(--font);
	font-weight: 800;
	font-size: 14px;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink);
	background: var(--accent);
	border: 1px solid #2f95e6;
	border-radius: var(--r-sm);
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
	text-decoration: none;
}
.tr-btn:hover, .tr-card button:hover,
input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover, .submit_button:hover {
	color: var(--ink);
	background: var(--accent-hover);
	text-decoration: none;
}
.tr-btn-gold {
	background: linear-gradient(135deg, #8fd0ff, #44a8fc);
	box-shadow: 0 2px 12px -6px rgba(22, 139, 217, .5), inset 0 0 0 1px rgba(255, 255, 255, .26);
}
.tr-btn-gold:hover { background: linear-gradient(135deg, #5cb6fd, #168bd9); }
.tr-btn-ghost {
	background: rgba(20, 33, 58, .55);
	border: 1.5px solid rgba(255, 255, 255, .7);
	color: #fff;
}
.tr-btn-ghost:hover { background: rgba(20, 33, 58, .8); color: #fff; }
.tr-btn-line { background: var(--paper); border: 1px solid var(--line-strong); }
.tr-btn-line:hover { background: var(--paper-3); border-color: #168bd9; }

/* ---------- Top bar ---------- */

.tr-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 26px;
	height: var(--nav);
	padding: 0 32px;
	box-sizing: border-box;
	transition: background .2s, box-shadow .2s;
}
.tr-scrolled .tr-nav, .tr-menu-open .tr-nav {
	background: var(--paper);
	box-shadow: 0 1px 0 var(--line), 0 6px 18px -12px rgba(28, 65, 101, .4);
}
.tr-nav .tr-logo { flex-shrink: 0; }

.tr-menu { display: flex; align-items: center; flex: 1; min-width: 0; }
.tr-menu > ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; flex: 1; }
.tr-menu > ul > li { position: relative; }
.tr-menu > ul > li > a {
	display: flex;
	align-items: center;
	height: var(--nav);
	padding: 0 12px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
	white-space: nowrap;
}
.tr-menu > ul > li > a:hover { text-decoration: none; }
.tr-scrolled .tr-menu > ul > li > a, .tr-menu-open .tr-menu > ul > li > a { color: var(--ink); text-shadow: none; }
.tr-menu > ul > li > a:hover, .tr-menu > ul > li.tr-current > a { color: var(--gold-bright); }
.tr-scrolled .tr-menu > ul > li > a:hover, .tr-scrolled .tr-menu > ul > li.tr-current > a { color: var(--gold-text); }
.tr-menu > ul > li.tr-current > a { box-shadow: inset 0 -3px 0 var(--accent); }

.tr-drop > a::after {
	content: "";
	margin-left: 7px;
	border: 4px solid transparent;
	border-top-color: currentColor;
	border-bottom: 0;
}
.tr-drop > ul {
	position: absolute;
	top: calc(100% - 6px);
	left: 0;
	min-width: 220px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--paper);
	border: 1px solid var(--line-strong);
	border-radius: var(--r);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transition: opacity .12s, visibility .12s;
	z-index: 60;
}
.tr-drop:hover > ul, .tr-drop:focus-within > ul { opacity: 1; visibility: visible; }
.tr-drop > ul a {
	display: block;
	padding: 9px 12px;
	border-radius: var(--r-sm);
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
	white-space: nowrap;
}
.tr-drop > ul a:hover { background: var(--paper-3); color: var(--gold-text); text-decoration: none; }
.tr-admin > ul { columns: 2; column-gap: 6px; min-width: 440px; }
.tr-admin > ul li { break-inside: avoid; }

.tr-account { display: flex; align-items: center; gap: 10px; }
.tr-pill {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 18px;
	box-sizing: border-box;
	border-radius: var(--r-sm);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}
.tr-pill:hover { text-decoration: none; }
.tr-pill-gold { color: var(--ink); background: var(--accent); border: 1px solid #2f95e6; }
.tr-pill-gold:hover { color: var(--ink); background: var(--accent-hover); }
.tr-pill-line { color: #fff; border: 1.5px solid rgba(255, 255, 255, .7); background: rgba(20, 33, 58, .35); }
.tr-pill-line:hover { color: #fff; background: rgba(20, 33, 58, .6); }
.tr-scrolled .tr-pill-line, .tr-menu-open .tr-pill-line { color: var(--ink); border-color: var(--line-strong); background: transparent; }
.tr-scrolled .tr-pill-line:hover { background: var(--paper-3); }
.tr-user { position: relative; }
.tr-user > ul { left: auto; right: 0; top: 100%; }

.tr-burger {
	display: none;
	margin-left: auto;
	width: 44px;
	height: 44px;
	padding: 12px 10px;
	background: none;
	border: 0;
	cursor: pointer;
}
.tr-burger span { display: block; height: 2.5px; margin: 4px 0; background: #fff; border-radius: 2px; }
.tr-scrolled .tr-burger span, .tr-menu-open .tr-burger span { background: var(--ink); }

.tr-serverbar { padding: calc(var(--nav) + 8px) 24px 8px; font-size: 14px; text-align: right; }

/* ---------- Hero (home) and banner (inner pages) ---------- */

.tr-hero, .tr-banner {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	color: #fff;
	text-align: center;
	background: linear-gradient(180deg, #14213a 0%, #1d3a55 45%, #3d8fd0 78%, #5aa8e6 100%);
}
.tr-hero::before, .tr-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--comb);
	opacity: .5;
	filter: brightness(2.2);
}
.tr-hero.tr-has-img, .tr-banner.tr-has-img {
	background:
		linear-gradient(180deg, rgba(13, 27, 45, .65) 0%, rgba(13, 27, 45, .35) 35%, rgba(13, 27, 45, .35) 70%, rgba(13, 27, 45, .5) 100%),
		var(--tr-hero-img) center 40% / cover no-repeat;
}
.tr-has-img::before { display: none; }

/* Home hero video: under a dark layer so the logo stays readable. */
.tr-hero-video {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
	pointer-events: none;
}
.tr-hero.tr-has-img, .tr-hero.tr-has-video {
	background-color: #0b1a2b;
}
.tr-hero.tr-has-img::before, .tr-hero.tr-has-video::before {
	display: block;
	opacity: 1;
	filter: none;
	background:
		radial-gradient(ellipse 50% 45% at 50% 45%, rgba(13, 27, 45, .55) 0%, rgba(13, 27, 45, 0) 100%),
		linear-gradient(180deg, rgba(13, 27, 45, .7) 0%, rgba(13, 27, 45, .3) 30%, rgba(13, 27, 45, .3) 70%, rgba(13, 27, 45, .45) 100%);
}

/* Home hero: full screen, fades into the cream page at the bottom. */
.tr-hero {
	display: flex;
	align-items: center;
	min-height: min(100vh, 960px);
	padding: calc(var(--nav) + 40px) 0 180px;
	box-sizing: border-box;
}
.tr-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 220px;
	z-index: -1;
	background: linear-gradient(180deg, rgba(247, 250, 252, 0) 0%, rgba(247, 250, 252, .7) 55%, var(--bg) 100%);
	pointer-events: none;
}
.tr-hero-inner { display: flex; flex-direction: column; align-items: center; }
.tr-stats {
	display: inline-flex;
	margin: 30px 0 0;
	background: rgba(20, 33, 58, .72);
	border: 1px solid rgba(68, 168, 252, .25);
	border-radius: 999px;
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
	overflow: hidden;
}
.tr-stats span {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #e6f1fa;
}
.tr-stats span + span { border-left: 1px solid rgba(68, 168, 252, .25); }
.tr-stats .tr-dot { margin: 0; }
.tr-stats strong { font-size: 22px; font-weight: 800; letter-spacing: 0; color: #fff; font-variant-numeric: tabular-nums; }
.tr-hero-text {
	max-width: 560px;
	margin: 22px 0 26px;
	font-size: 18px;
	font-weight: 600;
	color: rgba(255, 255, 255, .95);
	text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
.tr-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.tr-banner { padding: calc(var(--nav) + 48px) 0 130px; }
.tr-banner h1 {
	margin: 0;
	font-size: clamp(34px, 5vw, 54px);
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -.01em;
	color: #fff;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.tr-home-msg { padding-top: calc(var(--nav) + 16px); }

/* ---------- Home sections (honey layout) ---------- */

.tr-sec { position: relative; padding: 72px 0 84px; }
/* flux.css gives every h3 a dotted line and capitals; the home cards set their own. */
.tr-sec h3 { border: 0; padding: 0; text-transform: none; }
.tr-sec-comb, .tr-sec-podium { background-image: var(--comb); }
.tr-sec-steps { background: linear-gradient(180deg, var(--bg) 0%, #e9f2f9 100%); }
.tr-center { margin: 34px 0 0; text-align: center; }

/* Section title between two gold lines with a gem on each side. */
.tr-orn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 0 0 44px;
	padding: 0;
	border: 0;
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: .01em;
	color: var(--ink);
	text-align: center;
}
.tr-orn::before, .tr-orn::after {
	content: "";
	flex: 0 1 150px;
	height: 16px;
	--gem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 0l8 8-8 8-8-8z' fill='%2344a8fc'/%3E%3Cpath d='M8 3l5 5-5 5-5-5z' fill='%23bfe3ff'/%3E%3C/svg%3E");
}
.tr-orn::before {
	background:
		var(--gem) right center / 16px 16px no-repeat,
		linear-gradient(90deg, transparent, #7cc3fb) left center / calc(100% - 26px) 1.5px no-repeat;
}
.tr-orn::after {
	background:
		var(--gem) left center / 16px 16px no-repeat,
		linear-gradient(90deg, #7cc3fb, transparent) right center / calc(100% - 26px) 1.5px no-repeat;
}

/* Small gold-lined label over a big title (honey style section head). */
.tr-sec-head { margin: 0 0 44px; text-align: center; }
.tr-orn.tr-orn-sm {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.tr-sec-head h2 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: .01em;
	color: var(--ink);
}
.tr-sec-sub { margin: 10px 0 0; font-size: 18px; font-weight: 700; color: var(--gold-text); }

/* Gold corner brackets (top left, bottom right). */
.tr-corners { position: relative; }
.tr-corners::before, .tr-corners::after {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	border: 0 solid #168bd9;
	pointer-events: none;
}
.tr-corners::before { left: -1px; top: -1px; border-left-width: 2px; border-top-width: 2px; border-top-left-radius: 6px; }
.tr-corners::after { right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px; border-bottom-right-radius: 6px; }

/* Latest news: big dark card with a date ring. */
.tr-feature {
	position: relative;
	display: flex;
	align-items: center;
	gap: 44px;
	padding: 48px 56px;
	overflow: hidden;
	isolation: isolate;
	color: #e6f1fa;
	background: radial-gradient(70% 90% at 85% 10%, rgba(68, 168, 252, .2), transparent 70%), linear-gradient(135deg, #1d3a55 0%, #14213a 100%);
	border: 1px solid rgba(68, 168, 252, .25);
	border-radius: 22px;
	box-shadow: 0 30px 60px -28px rgba(20, 33, 58, .7);
}
.tr-feature::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--comb);
	opacity: .5;
	filter: brightness(2.4);
}
.tr-feature-ring {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 156px;
	height: 156px;
	border-radius: 50%;
	background: radial-gradient(circle, #16304a 0%, #0f2135 100%);
	border: 3px solid #7cc3fb;
	box-shadow: 0 0 0 8px rgba(20, 33, 58, .6), 0 0 0 10px rgba(68, 168, 252, .45);
}
.tr-feature-ring span { font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #e6f1fa; }
.tr-feature-ring strong {
	font-size: 56px;
	font-weight: 900;
	line-height: 1;
	background: linear-gradient(180deg, #eaf6ff 0%, #8fd0ff 45%, #138de9 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.tr-feature-body { min-width: 0; }
.tr-feature-body time { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-bright); }
.tr-feature-body h3 { margin: 6px 0 10px; font-size: clamp(28px, 4vw, 46px); font-weight: 800; line-height: 1.1; color: #fff; }
.tr-feature-body p { max-width: 620px; margin: 0 0 24px; font-size: 16px; color: rgba(230, 241, 250, .9); }

/* Coming soon banner in place of the news card. */
.tr-soon {
	display: block;
	max-width: 1024px;
	margin: 0 auto;
	overflow: hidden;
	border: 1px solid var(--line-strong);
	border-radius: 22px;
	box-shadow: 0 30px 60px -28px rgba(20, 33, 58, .6);
	transition: transform .3s;
}
.tr-soon:hover { transform: translateY(-4px); }
.tr-soon img { display: block; width: 100%; height: auto; }

.tr-news-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 20px 0 0; padding: 0; }
.tr-news-more li { padding: 16px 18px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r); }
.tr-news-more time { display: block; font-size: 13px; font-weight: 700; color: var(--ink-faint); }
.tr-news-more a { font-weight: 800; color: var(--ink); }
.tr-news-more a:hover { color: var(--gold-text); }

/* Server information cards. */
.tr-info-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tr-info {
	padding: 30px 22px 32px;
	text-align: center;
	background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
	border: 1px solid var(--line-strong);
	border-radius: 6px;
	box-shadow: 0 18px 40px -26px rgba(28, 65, 101, .45);
	transition: transform .3s, border-color .3s;
}
.tr-info:hover { transform: translateY(-4px); border-color: #168bd9; }
/* Chibi picture: white background blends into the card, soft gold glow behind. */
.tr-info-art {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 112px;
	margin: 0 auto 12px;
	background: radial-gradient(55% 60% at 50% 62%, rgba(68, 168, 252, .22), transparent 72%);
}
.tr-info-art img { display: block; width: auto; height: 96px; mix-blend-mode: multiply; transition: transform .3s; }
.tr-info:hover .tr-info-art img { transform: translateY(-3px); }
.tr-info h3 { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.tr-info strong { display: block; padding-bottom: 16px; font-size: 26px; font-weight: 800; line-height: 1.1; color: var(--gold-text); }
.tr-info p {
	margin: 0;
	padding-top: 16px;
	font-size: 15px;
	color: var(--ink-soft);
	background: linear-gradient(90deg, transparent, var(--line-strong), transparent) top center / 70% 1px no-repeat;
}

/* Top players podium. */
.tr-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 26px; padding-top: 30px; }
.tr-champ {
	padding: 26px 22px 28px;
	text-align: center;
	border: 1px solid var(--line-strong);
	border-radius: 6px;
	box-shadow: 0 24px 40px -24px rgba(28, 65, 101, .5);
}
.tr-champ-first { margin-bottom: 64px; }
.tr-champ-red { background: linear-gradient(180deg, #fff3ec 0%, #fbe4d8 100%); box-shadow: 0 24px 40px -24px rgba(214, 53, 50, .45); }
.tr-champ-blue { background: linear-gradient(180deg, #f3f5f9 0%, #e5eaf2 100%); box-shadow: 0 24px 40px -24px rgba(47, 111, 214, .45); }
.tr-champ-gold { background: linear-gradient(180deg, #fffaee 0%, #fbf0d6 100%); box-shadow: 0 24px 40px -24px rgba(22, 139, 217, .5); }
.tr-champ h3 { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.tr-champ-red h3 { color: #8f2a1d; }
.tr-champ-blue h3 { color: #234a8a; }
.tr-champ-gold h3 { color: var(--gold-text); }
.tr-champ strong { display: block; font-size: 26px; font-weight: 800; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.tr-champ strong.tr-none { font-size: 22px; color: var(--ink-faint); }
.tr-champ p { margin: 6px 0 0; font-size: 14px; color: var(--ink-soft); }

/* How to play: tabs on the left, one card on the right. */
.tr-steps-wrap { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }
.tr-tabs { display: flex; flex-direction: column; gap: 12px; }
.tr-tab {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 62px;
	padding: 0 20px;
	font-family: var(--font);
	font-size: 15px;
	font-weight: 800;
	text-align: left;
	color: var(--ink-soft);
	background: var(--paper);
	border: 1px solid var(--line-strong);
	border-radius: 4px;
	cursor: pointer;
	transition: border-color .15s, color .15s, background .15s;
}
.tr-tab span { font-size: 17px; color: var(--gold-text); font-variant-numeric: tabular-nums; }
.tr-tab:hover { border-color: #168bd9; color: var(--ink); }
.tr-tab.tr-on { color: var(--ink); border-color: #168bd9; background: linear-gradient(90deg, #e3f1fc 0%, var(--paper) 100%); }
.tr-step {
	padding: 40px 44px 44px;
	background: linear-gradient(160deg, var(--paper) 0%, var(--paper-2) 100%);
	border: 1px solid var(--line-strong);
	border-radius: var(--r);
	box-shadow: var(--shadow-lg);
}
.tr-step[hidden] { display: none; }
.tr-step-count { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); }
.tr-step h3 { margin: 4px 0 10px; font-size: clamp(30px, 4vw, 46px); font-weight: 800; line-height: 1.05; text-transform: uppercase; color: var(--ink); }
.tr-step-text { max-width: 520px; margin: 0 0 18px; font-size: 18px; color: var(--ink-soft); }
.tr-step-rows { max-width: 520px; margin: 0 0 26px; border-top: 1px solid var(--line-strong); }
.tr-step-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-strong); }
.tr-step-rows dt { font-size: 15px; color: var(--ink-soft); }
.tr-step-rows dd { margin: 0; font-size: 15px; font-weight: 800; color: var(--ink); }
.tr-step-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tr-arrow {
	width: 44px;
	height: 44px;
	font-size: 22px;
	line-height: 1;
	color: var(--gold-text);
	background: var(--paper);
	border: 1px solid var(--line-strong);
	border-radius: 4px;
	cursor: pointer;
}
.tr-arrow:hover { border-color: #168bd9; background: var(--paper-3); }

/* Dark call to action band. */
.tr-cta {
	position: relative;
	padding: 72px 0 80px;
	overflow: hidden;
	isolation: isolate;
	text-align: center;
	color: #e6f1fa;
	background: linear-gradient(135deg, #1d3a55 0%, #14213a 100%);
}
.tr-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--comb);
	opacity: .4;
	filter: brightness(2.4);
}
.tr-cta h2 { margin: 0 0 12px; padding: 0; border: 0; font-size: clamp(32px, 5vw, 52px); font-weight: 800; line-height: 1.1; color: #fff; }
.tr-cta p { margin: 0 0 28px; font-size: 17px; color: rgba(230, 241, 250, .9); }

/* ---------- Inner pages ---------- */

.tr-page { padding-bottom: 72px; }
.tr-page > .tr-shell { z-index: 2; }
.tr-card, #content {
	position: relative;
	width: auto;
	margin-top: -84px;
	padding: 32px 36px 36px;
	background: var(--paper);
	border: 1px solid var(--line-strong);
	border-radius: var(--r);
	box-shadow: var(--shadow-lg);
	overflow-x: auto;
}
.tr-card h2 {
	margin: 0 0 18px;
	font-size: clamp(26px, 3.2vw, 34px);
	font-weight: 900;
	line-height: 1.2;
	color: var(--ink);
}
.tr-card h3 {
	margin: 28px 0 14px;
	padding-bottom: 8px;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
	border-bottom: 2px solid var(--accent);
}
.tr-card h4 { color: var(--ink); font-weight: 800; }
.tr-card p { color: var(--ink-soft); }
.tr-card strong { color: var(--ink); }

/* Messages */
.message, .notice {
	margin: 0 0 18px;
	padding: 13px 16px;
	border-radius: var(--r-sm);
	border: 1px solid;
	border-left-width: 4px;
	font-weight: 700;
}
.message { background: #eaf6ff; border-color: #b9dcf7; border-left-color: var(--accent); color: var(--ink); }
.notice { background: #fdeceb; border-color: #f2c4bf; border-left-color: var(--danger); color: #7a2219; }
.red { color: var(--danger); }
.green { color: var(--ok); }
.up, .online { color: var(--ok); font-weight: 800; }
.down, .offline { color: var(--danger); font-weight: 800; }

/* Sub menu and page menu: hide the plain text separators, show links as tabs. */
#submenu, #pagemenu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 22px;
	padding: 10px 12px;
	background: var(--paper-3);
	border: 1px solid var(--line);
	border-radius: var(--r);
	font-size: 0;
	color: var(--ink-faint);
}
#submenu::before, #pagemenu::before {
	content: "Menu:";
	margin: 0 4px 0 4px;
	font-size: 13px;
	font-weight: 800;
}
#pagemenu::before { content: "Actions:"; }
#submenu a, #pagemenu a {
	display: inline-block;
	padding: 7px 14px;
	background: var(--paper);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
}
#submenu a:hover, #pagemenu a:hover { border-color: var(--gold-text); color: var(--gold-text); text-decoration: none; }
#submenu a.current-sub-menu { background: var(--accent); border-color: #2f95e6; font-weight: 800; }

/* Tables */
.horizontal-table, .vertical-table, .woe-table, #server_status, .install_table, .shop-table {
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--line-strong);
	border-radius: var(--r);
	overflow: hidden;
	background: var(--paper);
	margin-bottom: 20px;
}
.horizontal-table { width: 100%; }
.horizontal-table th, .vertical-table th, .woe-table th, #server_status th, .install_table th {
	padding: 11px 14px;
	background: var(--paper-3);
	border: 0;
	border-bottom: 1px solid var(--line-strong);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .02em;
	color: var(--ink);
	text-align: left;
}
.horizontal-table td, .vertical-table td, .woe-table td, #server_status td, .install_table td {
	padding: 11px 14px;
	border: 0;
	border-bottom: 1px solid var(--line);
	background: var(--paper);
	color: var(--ink);
	font-weight: 600;
}
.horizontal-table tr:last-child td, .vertical-table tr:last-child td, .vertical-table tr:last-child th,
.woe-table tr:last-child td, #server_status tr:last-child td { border-bottom: 0; }
.horizontal-table tr:hover td { background: var(--paper-2); }
.vertical-table th { width: 190px; }
.generic-form-table th { padding: 12px 14px 4px 0; text-align: left; color: var(--ink); }
.generic-form-table td { padding: 6px 0; }

/* Forms */
input[type=text], input[type=password], input[type=file], input[type=email], input[type=number], textarea, select {
	min-height: 44px;
	padding: 10px 14px;
	font-family: var(--font);
	font-size: 16px;
	font-weight: 600;
	color: var(--ink);
	background: #fff;
	border: 1.5px solid var(--line-strong);
	border-radius: var(--r-sm);
	box-sizing: border-box;
	max-width: 100%;
	transition: border-color .15s;
}
input[type=text]:focus, input[type=password]:focus, input[type=file]:focus, input[type=email]:focus,
input[type=number]:focus, textarea:focus, select:focus {
	outline: 3px solid var(--gold-text);
	outline-offset: 1px;
	border-color: var(--gold-text);
}
label { color: var(--ink); font-weight: 700; }
#register_form input[type=text], #register_form input[type=password],
#login_form input[type=text], #login_form input[type=password] { width: 300px; }
.security-code img { border-radius: var(--r-sm); border: 1.5px solid var(--line-strong); }

.search-form, .search-form2 {
	margin: 0 0 20px;
	padding: 18px;
	background: var(--paper-2);
	border: 1px solid var(--line);
	border-radius: var(--r);
}
.toggler a { font-weight: 800; }

/* Pagination */
.pages { margin: 18px 0; text-align: center; }
.pages a, .pages .page-num, .pages .current-page, .pages .page-prev, .pages .page-next {
	display: inline-block;
	min-width: 36px;
	margin: 2px;
	padding: 8px 10px;
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	background: var(--paper);
	font-weight: 800;
	color: var(--ink);
	box-sizing: border-box;
}
.pages .current-page { background: var(--accent); border-color: #2f95e6; }

.info-text, .info-text-total, .info-text-results { color: var(--ink-soft); }

/* ---------- Wiki (side menu + one topic at a time) ---------- */

.tr-wiki { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 44px; align-items: start; }
.tr-wiki-menu { position: sticky; top: calc(var(--nav) + 16px); }
.tr-card .tr-wiki-group {
	position: relative;
	margin: 0 0 6px;
	padding: 12px 10px;
	overflow: hidden;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: center;
	color: #fff;
	background: linear-gradient(135deg, #1d3a55 0%, #14213a 100%);
	border-radius: 6px;
	box-shadow: 0 6px 14px -8px rgba(20, 33, 58, .7);
}
.tr-wiki-menu ul { list-style: none; margin: 0 0 18px; padding: 0; }
.tr-wiki-menu li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: var(--r-sm);
	font-size: 15px;
	font-weight: 600;
	color: var(--ink-soft);
}
.tr-wiki-menu li a::before {
	content: "";
	flex: 0 0 10px;
	height: 10px;
	border-radius: 3px;
	background: var(--c, var(--gold-text));
	transform: rotate(45deg);
}
.tr-wiki-menu li a:hover { color: var(--ink); background: var(--paper-3); text-decoration: none; }
.tr-wiki-menu li a.tr-on { color: var(--ink); font-weight: 800; background: var(--paper-3); box-shadow: inset 3px 0 0 var(--accent); }
.tr-wiki-soon { padding: 8px 10px; font-size: 14px; font-style: italic; color: var(--ink-faint); }

.tr-wiki-topic[hidden] { display: none; }
.tr-card .tr-wiki-title, .tr-card .tr-wiki-sub {
	margin: 0 0 22px;
	padding: 0;
	border: 0;
	font-size: clamp(22px, 2.6vw, 28px);
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-align: center;
	color: var(--ink);
}
.tr-card .tr-wiki-sub { margin-top: 40px; font-size: 20px; }
.tr-wiki-title strong, .tr-wiki-sub strong { color: var(--gold-text); }

.tr-wiki-list { list-style: none; margin: 0 0 10px; padding: 0; }
.tr-wiki-list li { position: relative; padding: 9px 0 9px 22px; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--ink-soft); }
.tr-wiki-list li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 16px;
	border: 6px solid transparent;
	border-left-color: var(--gold-text);
	border-right-width: 0;
}
.tr-wiki-list li span { font-weight: 800; color: var(--ink); }

.tr-wiki-table { width: 100%; border-collapse: collapse; margin: 0 0 10px; }
.tr-wiki-table th, .tr-wiki-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line-strong); }
.tr-wiki-table th { font-size: 15px; font-weight: 800; color: var(--ink); }
.tr-wiki-table td { font-size: 15px; color: var(--ink-soft); }
.tr-wiki-table-gold { border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--shadow); }
.tr-wiki-table-gold thead tr { background: linear-gradient(135deg, #8fd0ff, #44a8fc); }
.tr-wiki-table-gold th { background: transparent; border-bottom: 0; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.tr-wiki-table-gold td { background: var(--paper); }
.tr-wiki-table code { padding: 2px 6px; font-size: 14px; font-weight: 800; color: var(--gold-text); background: var(--paper-3); border-radius: 4px; }

@media (max-width: 900px) {
	.tr-wiki { grid-template-columns: 1fr; gap: 24px; }
	.tr-wiki-menu { position: static; }
}

/* ---------- Footer ---------- */

.tr-footer {
	background: var(--espresso);
	color: rgba(234, 246, 255, .78);
	padding: 48px 0 24px;
	font-size: 15px;
}
.tr-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.tr-footer-brand p { margin: 16px 0 0; max-width: 300px; }
.tr-footer-col { display: flex; flex-direction: column; gap: 8px; }
.tr-footer h4 { margin: 0 0 6px; font-size: 14px; font-weight: 900; color: var(--gold-bright); }
.tr-footer a { color: rgba(234, 246, 255, .88); }
.tr-footer a:hover { color: var(--gold-bright); }
.tr-footer a:focus-visible { outline-color: var(--gold-bright); }
.tr-footer label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: rgba(234, 246, 255, .75); font-weight: 700; }
.tr-footer select { background: #14213a; color: #fff; border-color: rgba(68, 168, 252, .35); }
.tr-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 20px;
	margin-top: 36px;
	padding-top: 18px;
	border-top: 1px solid rgba(68, 168, 252, .15);
	font-size: 13px;
	color: rgba(234, 246, 255, .7);
}
.tr-footer-bottom strong { color: var(--gold-bright); }
.tr-render { width: 100%; font-size: 12px; color: rgba(234, 246, 255, .6); }

/* ---------- Small screens ---------- */

@media (max-width: 1200px) {
	.tr-nav { gap: 14px; padding: 0 20px; }
	.tr-menu > ul > li > a { padding: 0 9px; font-size: 12px; letter-spacing: .04em; }
}

@media (max-width: 1080px) {
	.tr-nav { background: var(--paper); box-shadow: 0 1px 0 var(--line); }
	.tr-burger { display: block; }
	.tr-burger span { background: var(--ink); }
	.tr-menu {
		display: none;
		position: fixed;
		top: var(--nav);
		left: 0;
		right: 0;
		bottom: 0;
		flex-direction: column;
		align-items: stretch;
		background: var(--paper);
		overflow-y: auto;
		padding: 10px 20px 30px;
		border-top: 1px solid var(--line);
	}
	body.tr-menu-open .tr-menu { display: flex; }
	.tr-menu > ul { flex-direction: column; align-items: stretch; flex: none; gap: 0; }
	.tr-menu > ul > li > a, .tr-scrolled .tr-menu > ul > li > a {
		height: auto;
		padding: 14px 4px;
		font-size: 14px;
		color: var(--ink);
		text-shadow: none;
		border-bottom: 1px solid var(--line);
	}
	.tr-menu > ul > li.tr-current > a { box-shadow: none; color: var(--gold-text); }
	.tr-drop > ul, .tr-admin > ul {
		position: static;
		opacity: 1;
		visibility: visible;
		box-shadow: none;
		border: 0;
		background: transparent;
		columns: 1;
		min-width: 0;
		padding: 4px 0 8px 12px;
	}
	.tr-account { padding: 18px 0; flex-wrap: wrap; }
	.tr-pill-line { color: var(--ink); border-color: var(--line-strong); background: transparent; }
	.tr-user { width: 100%; }

	.tr-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tr-steps-wrap { grid-template-columns: 1fr; }
	.tr-tabs { flex-direction: row; flex-wrap: wrap; }
	.tr-tab { flex: 1 1 200px; }
	.tr-footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
	.tr-feature { flex-direction: column; align-items: flex-start; gap: 26px; padding: 34px 26px; }
	.tr-feature-ring { width: 120px; height: 120px; }
	.tr-feature-ring strong { font-size: 42px; }
	.tr-news-more { grid-template-columns: 1fr; }
	.tr-podium { grid-template-columns: 1fr; padding-top: 0; }
	.tr-champ-first { order: -1; margin-bottom: 0; }
}

@media (max-width: 700px) {
	.tr-shell { padding: 0 16px; }
	.tr-hero { min-height: 0; padding: calc(var(--nav) + 40px) 0 150px; }
	.tr-sec { padding: 52px 0 60px; }
	.tr-orn { margin-bottom: 30px; gap: 10px; }
	.tr-orn::before, .tr-orn::after { flex-basis: 40px; }
	.tr-info-grid { grid-template-columns: 1fr; }
	.tr-step { padding: 28px 20px 30px; }
	.tr-stats span { padding: 8px 14px; letter-spacing: .08em; }
	.tr-stats strong { font-size: 18px; }
	.tr-card, #content { padding: 24px 18px; margin-top: -76px; }
	.tr-banner { padding: calc(var(--nav) + 36px) 0 110px; }
	.tr-footer-grid { grid-template-columns: 1fr; }
	.vertical-table th { width: auto; }
	#register_form input[type=text], #register_form input[type=password],
	#login_form input[type=text], #login_form input[type=password] { width: 100%; }
}

@media (max-width: 480px) {
	.tr-logo-xl { font-size: 56px; }
	.tr-hero-actions .tr-btn { flex: 1 1 100%; }
}

/* ---------- Donate page (donation/index.php) ---------- */

.tr-don { max-width: 860px; margin: 0 auto; }
.tr-don-sec { padding: 28px 0; border-bottom: 1px solid var(--line); }
.tr-don-sec:first-child { padding-top: 4px; }
.tr-don-sec:last-child { border-bottom: 0; padding-bottom: 4px; }
.tr-don-sec > p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
.tr-card .tr-don-h {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	font-size: clamp(22px, 2.6vw, 28px);
	font-weight: 800;
	color: var(--ink);
	text-transform: none;
}
.tr-don-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 30px;
	height: 30px;
	font-size: 15px;
	font-style: normal;
	font-weight: 800;
	color: var(--espresso);
	background: linear-gradient(135deg, var(--gold-bright), var(--accent));
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.tr-don-note { margin: 12px 0 0; font-size: 14px; color: var(--ink-faint); text-align: center; }

.tr-don-rate {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 18px;
	padding: 22px 16px;
	font-size: 20px;
	color: var(--ink);
	background: var(--paper-3);
	border: 1px solid var(--line-strong);
	border-radius: var(--r);
}
.tr-don-rate strong, .tr-don-modal-rate strong { color: var(--gold-text); font-weight: 800; }
.tr-don-dot { color: var(--line-strong); }

.tr-don-conv { display: grid; grid-template-columns: 1fr 1fr auto 1fr 1fr; gap: 12px; align-items: end; }
.tr-don-conv label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.tr-don-conv input, .tr-don-conv select, .tr-don-result {
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	padding: 0 12px;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
}
.tr-don-result { display: flex; align-items: center; font-weight: 800; color: var(--gold-text); background: var(--paper-3); }
/* .tr-card prefix: beats the general ".tr-card button" style. */
.tr-card .tr-don-swap {
	width: 44px;
	height: 44px;
	min-height: 0;
	padding: 0;
	font-size: 20px;
	color: var(--espresso);
	background: linear-gradient(135deg, var(--gold-bright), var(--accent));
	border: 0;
	border-radius: var(--r-sm);
	cursor: pointer;
}
.tr-card .tr-don-swap:hover { background: var(--accent-hover); }

.tr-don-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tr-card .tr-don-method {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 6px;
	min-height: 0;
	padding: 18px 20px;
	text-align: left;
	font-family: var(--font);
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	background: var(--paper);
	border: 1px solid var(--line-strong);
	border-left: 4px solid var(--accent);
	border-radius: var(--r-sm);
	box-shadow: var(--shadow);
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease;
}
.tr-card .tr-don-method:hover { transform: translateY(-2px); background: var(--paper); box-shadow: var(--shadow-lg); }
.tr-don-method strong { font-size: 18px; font-weight: 800; color: var(--ink); }
.tr-don-method span { font-size: 14px; font-weight: 400; color: var(--ink-faint); }

.tr-don-steps { list-style: none; counter-reset: trdon; margin: 0; padding: 0; display: grid; gap: 10px; }
.tr-don-steps li {
	counter-increment: trdon;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px 14px 60px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
}
.tr-don-steps li::before {
	content: counter(trdon);
	position: absolute;
	left: 16px;
	top: 14px;
	width: 28px;
	height: 28px;
	line-height: 28px;
	text-align: center;
	font-weight: 800;
	color: var(--espresso);
	background: linear-gradient(135deg, var(--gold-bright), var(--accent));
	border-radius: 50%;
}
.tr-don-steps strong { font-size: 16px; color: var(--ink); }
.tr-don-steps span { font-size: 15px; color: var(--ink-soft); }

.tr-don-policy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tr-don-pol { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.tr-card .tr-don-pol h3 {
	margin: 0;
	padding: 8px 14px;
	border: 0;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(135deg, #1d3a55, var(--espresso));
}
.tr-don-pol p { margin: 0; padding: 12px 14px 14px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

/* Payment popup (native <dialog>). */
.tr-don-modal {
	width: min(560px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	padding: 0;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line-strong);
	border-top: 4px solid var(--accent);
	border-radius: var(--r);
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6);
}
.tr-don-modal::backdrop { background: rgba(13, 27, 45, .7); }
.tr-don-modal-in { position: relative; padding: 26px 26px 22px; font-family: var(--font); }
.tr-card .tr-don-close, .tr-don-close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 36px;
	height: 36px;
	min-height: 0;
	padding: 0;
	font-size: 26px;
	font-weight: 400;
	line-height: 1;
	color: var(--ink-faint);
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}
.tr-card .tr-don-close:hover, .tr-don-close:hover { color: var(--ink); background: var(--paper-3); }
.tr-don-kicker { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); }
.tr-don-modal h2 { margin: 0 0 6px; padding: 0; border: 0; font-size: 24px; font-weight: 800; color: var(--ink); }
.tr-don-modal-rate { margin: 0 0 18px; font-size: 15px; color: var(--ink-soft); }
.tr-don-modal h3 { margin: 18px 0 8px; padding: 0; border: 0; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.tr-don-msteps { margin: 0; padding-left: 22px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.tr-don-msteps li { margin-bottom: 4px; }
.tr-don-box { padding: 12px 14px; font-size: 15px; color: var(--ink-soft); background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--r-sm); }
.tr-don-box p { margin: 0 0 4px; }
.tr-don-box p:last-child { margin-bottom: 0; }
.tr-don-box span { font-weight: 800; color: var(--ink); }
.tr-don-template { font-family: Consolas, "Courier New", monospace; font-size: 14px; }
.tr-don-modal .tr-don-note { text-align: left; }

@media (max-width: 700px) {
	.tr-don-conv { grid-template-columns: 1fr 1fr; }
	.tr-don-conv label:first-child, .tr-don-conv label:last-child { grid-column: 1 / -1; }
	.tr-card .tr-don-swap { display: none; }
	.tr-don-methods, .tr-don-policy { grid-template-columns: 1fr; }
	.tr-don-rate { font-size: 17px; }
}

/* ---------- Download page (download/index.php) ---------- */

.tr-dl { max-width: 900px; margin: 0 auto; }
.tr-dl-head { margin: 8px 0 22px; text-align: center; }
.tr-dl-head + .tr-dl-client { margin-top: 0; }
.tr-card .tr-dl-head h2 {
	margin: 0;
	padding: 0 0 14px;
	border: 0;
	border-bottom: 1px solid var(--line-strong);
	font-size: clamp(22px, 2.8vw, 30px);
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gold-text);
}
.tr-dl-head p { margin: 12px 0 0; font-size: 15px; font-style: italic; color: var(--ink-faint); }

.tr-dl-client {
	margin: 0 0 44px;
	padding: 34px 24px 30px;
	text-align: center;
	background: var(--paper);
	border: 1px solid var(--line-strong);
	border-top: 3px solid var(--accent);
	border-radius: var(--r);
	box-shadow: var(--shadow);
}
.tr-dl-box { width: 64px; height: 64px; margin: 0 auto 10px; display: block; filter: drop-shadow(0 4px 6px rgba(28, 65, 101, .25)); }
.tr-card .tr-dl-client h3 { margin: 0 0 8px; padding: 0; border: 0; font-size: 24px; font-weight: 800; text-transform: none; color: var(--ink); }
.tr-dl-ver { margin: 0 0 6px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); }
.tr-dl-meta { margin: 0 0 22px; font-size: 13px; color: var(--ink-faint); white-space: pre-wrap; }

.tr-dl-mirrors { display: grid; gap: 10px; max-width: 460px; margin: 0 auto; }
.tr-dl-mirror {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	text-align: left;
	color: var(--ink);
	background: var(--paper-2);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-sm);
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
a.tr-dl-mirror:hover { text-decoration: none; color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.tr-dl-main { background: linear-gradient(135deg, var(--gold-bright), var(--accent)); border-color: #2f95e6; }
.tr-dl-off { cursor: default; opacity: .7; }
.tr-dl-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 34px;
	height: 34px;
	background: rgba(20, 33, 58, .1);
	border-radius: var(--r-sm);
}
.tr-dl-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--espresso); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tr-dl-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.tr-dl-txt strong { font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tr-dl-txt small { font-size: 12px; color: var(--ink-soft); }
.tr-dl-arrow { font-size: 18px; color: var(--ink-soft); }

.tr-dl-panel { margin: 0 0 40px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.tr-card .tr-dl-bar {
	margin: 0;
	padding: 12px 18px;
	border: 0;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(135deg, #1d3a55, var(--espresso));
}
.tr-dl-steps { list-style: none; counter-reset: trdl; margin: 0; padding: 8px 18px; }
.tr-dl-steps li {
	counter-increment: trdl;
	position: relative;
	padding: 14px 0 14px 44px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-soft);
	border-bottom: 1px solid var(--line);
}
.tr-dl-steps li:last-child { border-bottom: 0; }
.tr-dl-steps li::before {
	content: counter(trdl);
	position: absolute;
	left: 0;
	top: 13px;
	width: 28px;
	height: 28px;
	line-height: 28px;
	text-align: center;
	font-weight: 800;
	color: var(--espresso);
	background: linear-gradient(135deg, var(--gold-bright), var(--accent));
	border-radius: 50%;
}
.tr-dl-steps strong { color: var(--ink); }
.tr-dl-steps code { padding: 1px 6px; font-size: 13px; font-weight: 700; color: var(--gold-text); background: var(--paper-3); border: 1px solid var(--line-strong); border-radius: 4px; }

.tr-dl-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tr-dl-specs .tr-dl-panel { margin-bottom: 30px; }
.tr-dl-table { width: 100%; border-collapse: collapse; }
.tr-dl-table th, .tr-dl-table td { padding: 11px 18px; font-size: 14px; text-align: left; border-bottom: 1px solid var(--line); background: none; }
.tr-dl-table tr:last-child th, .tr-dl-table tr:last-child td { border-bottom: 0; }
.tr-dl-table th { width: 38%; font-weight: 800; color: var(--ink); }
.tr-dl-table td { color: var(--ink-soft); }

.tr-dl-alert {
	margin: 0 0 16px;
	padding: 16px 18px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-soft);
	background: var(--paper-3);
	border: 1px solid var(--line-strong);
	border-left: 4px solid var(--accent);
	border-radius: var(--r-sm);
}
.tr-dl-alert strong { color: var(--gold-text); }

@media (max-width: 700px) {
	.tr-dl-specs { grid-template-columns: 1fr; gap: 0; }
	.tr-dl-client { padding: 26px 16px 22px; }
}

/* ---------- Discord box, home page (footer.php) ---------- */

.tr-dc {
	position: fixed;
	top: calc(var(--nav) + 18px);
	right: 18px;
	z-index: 80;
	width: 300px;
	overflow: hidden;
	background: #1e1f22;
	border: 1px solid rgba(68, 168, 252, .35);
	border-radius: var(--r);
	box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7);
}
.tr-dc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: #2b2d31; }
.tr-dc-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: #fff; }
.tr-dc svg, .tr-dc-pill svg { width: 18px; height: 18px; fill: currentColor; }
.tr-dc-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	color: #b5bac1;
	background: none;
	border: 0;
	border-radius: var(--r-sm);
	cursor: pointer;
}
.tr-dc-toggle:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.tr-dc-toggle svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.tr-dc-body { padding: 10px; }
.tr-dc-body iframe { display: block; border-radius: var(--r-sm); background: #313338; }
.tr-dc-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 10px;
	padding: 11px 12px;
	font-size: 14px;
	font-weight: 800;
	color: #fff;
	background: #5865f2;
	border-radius: var(--r-sm);
}
.tr-dc-btn:hover { color: #fff; text-decoration: none; background: #4752c4; }
.tr-dc-min .tr-dc-body { display: none; }
.tr-dc-min .tr-dc-toggle svg { transform: rotate(180deg); }

/* Small screens: only a round Discord button (left of the music button). */
.tr-dc-pill {
	display: none;
	position: fixed;
	right: 76px;
	bottom: 18px;
	z-index: 90;
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: #5865f2;
	border-radius: 50%;
	box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .6);
}
.tr-dc-pill svg { width: 24px; height: 24px; }
.tr-dc-pill:hover { color: #fff; background: #4752c4; }

@media (max-width: 1100px) {
	.tr-dc { display: none; }
	.tr-dc-pill { display: flex; }
}
@media (max-width: 480px) {
	.tr-dc-pill { right: 64px; bottom: 12px; width: 42px; height: 42px; }
}

/* ---------- Background music button (footer.php) ---------- */

.tr-bgm {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(68, 168, 252, .55);
	border-radius: 50%;
	background: rgba(13, 27, 45, .82);
	box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .6);
	cursor: pointer;
	transition: transform .15s ease, background .15s ease;
}
.tr-bgm:hover { transform: scale(1.06); background: rgba(20, 33, 58, .92); }
.tr-bgm svg { width: 22px; height: 22px; fill: none; stroke: #8fd0ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
/* Off: line through the note. */
.tr-bgm::after {
	content: "";
	position: absolute;
	width: 30px;
	height: 2px;
	background: #8fd0ff;
	border-radius: 2px;
	transform: rotate(-45deg);
}
.tr-bgm-on svg { opacity: 1; animation: tr-bgm-beat 1.6s ease-in-out infinite; }
.tr-bgm-on::after { display: none; }
@keyframes tr-bgm-beat { 50% { transform: scale(1.12); } }

@media (max-width: 480px) {
	.tr-bgm { right: 12px; bottom: 12px; width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
	.tr-bgm-on svg { animation: none; }
}

/* ---------- Account page (account/view.php, DarkRO-style layout) ---------- */

.tr-account-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 24px; }
.tr-account-actions:empty { display: none; }
.tr-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tr-scroll .horizontal-table { min-width: 640px; }
.tr-account-table { width: 100%; }
.tr-account-table th { width: 160px; }
.tr-account-note { font-size: 14px; color: var(--ink-soft); margin: 10px 0 0; }
@media (max-width: 700px) {
	.tr-account-table th, .tr-account-table td { display: block; width: auto; }
	.tr-account-table th { padding-bottom: 2px; border-bottom: 0; }
}

/* ---------- Online / Shops counter in the top bar (header.php) ---------- */

.tr-stats-nav { margin: 0; box-shadow: none; flex: none; }
.tr-stats-nav span { min-height: 38px; padding: 0 14px; font-size: 11px; letter-spacing: .12em; box-sizing: border-box; }
.tr-stats-nav strong { font-size: 16px; }
.tr-hero-text-top { margin-top: 30px; }
@media (max-width: 1080px) {
	.tr-stats-nav { flex-basis: 100%; justify-content: center; }
}

/* ==========================================================================
   2026-11-11 Light blue look (new layout). Loaded last, so it wins.
   ========================================================================== */

:root {
	--tk-bg: #f7fafc;
	--tk-soft: #eef7fc;
	--tk-card: #ffffff;
	--tk-border: #dce8ef;
	--tk-ink: #173b56;
	--tk-muted: #668094;
	--tk-blue: #168bd9;
	--tk-blue-2: #44a8fc;
	--tk-navy: #14213a;
	--tk-radius: 22px;
	--tk-shadow: 0 18px 50px rgba(37, 78, 108, .09);
	--tk-shadow-lg: 0 24px 70px rgba(28, 65, 101, .13);
	--comb: none;
}
body { background: var(--tk-bg); color: var(--tk-ink); }
h1, h2, h3, h4 { font-family: var(--font); }

/* Buttons */
.tr-btn, .tr-card button,
input[type=submit], input[type=button], input[type=reset], .submit_button {
	min-height: 46px;
	padding: 13px 26px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
	background: var(--tk-blue);
	border: 0;
	border-radius: 8px;
	box-shadow: 0 10px 24px -10px rgba(22, 139, 217, .7);
}
.tr-btn:hover, .tr-card button:hover,
input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover, .submit_button:hover {
	color: #fff;
	background: #0f77bd;
}
.tr-btn-gold { background: var(--tk-blue); box-shadow: 0 10px 24px -10px rgba(22, 139, 217, .7); }
.tr-btn-gold:hover { background: #0f77bd; }
.tr-btn-ghost {
	color: #fff;
	background: rgba(120, 150, 170, .55);
	border: 1px solid rgba(255, 255, 255, .35);
	box-shadow: none;
	backdrop-filter: blur(6px);
}
.tr-btn-ghost:hover { color: #fff; background: rgba(100, 130, 150, .75); }
.tr-btn-line, .tk-btn-white {
	color: var(--tk-ink);
	background: #fff;
	border: 1px solid var(--tk-border);
	box-shadow: 0 6px 18px -10px rgba(28, 65, 101, .35);
}
.tr-btn-line:hover, .tk-btn-white:hover { color: var(--tk-blue); background: #fff; border-color: #b9d6ea; }
.tk-btn-outline { color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, .55); box-shadow: none; }
.tk-btn-outline:hover { color: #fff; background: rgba(255, 255, 255, .1); }

/* Top bar */
.tr-nav { gap: 22px; padding: 0 40px; }
.tr-scrolled .tr-nav, .tr-menu-open .tr-nav {
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(10px);
	box-shadow: 0 1px 0 var(--tk-border), 0 10px 30px -18px rgba(28, 65, 101, .35);
}
.tr-menu > ul > li > a {
	padding: 0 10px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	text-shadow: 0 1px 6px rgba(20, 50, 80, .45);
}
.tr-menu > ul > li > a:hover, .tr-menu > ul > li.tr-current > a { color: #fff; }
.tr-scrolled .tr-menu > ul > li > a:hover, .tr-scrolled .tr-menu > ul > li.tr-current > a { color: var(--tk-blue); }
.tr-menu > ul > li.tr-current > a { box-shadow: inset 0 -2px 0 var(--tk-blue-2); }
.tr-drop > ul { border-color: var(--tk-border); border-radius: 14px; box-shadow: var(--tk-shadow-lg); }
.tr-drop > ul a { font-size: 14px; font-weight: 600; }
.tr-drop > ul a:hover { background: var(--tk-soft); color: var(--tk-blue); }
.tr-pill {
	min-height: 42px;
	padding: 0 18px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}
.tr-pill-line { color: #fff; background: rgba(120, 150, 170, .5); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(6px); }
.tr-pill-line:hover { color: #fff; background: rgba(100, 130, 150, .7); }
.tr-scrolled .tr-pill-line, .tr-menu-open .tr-pill-line { color: var(--tk-ink); background: #fff; border-color: var(--tk-border); }
.tr-scrolled .tr-pill-line:hover { background: var(--tk-soft); }
.tr-pill-gold { color: var(--tk-blue); background: #fff; border: 0; box-shadow: 0 8px 22px -10px rgba(20, 60, 100, .5); }
.tr-pill-gold:hover { color: #0f77bd; background: #fff; }
.tr-scrolled .tr-pill-gold, .tr-menu-open .tr-pill-gold { color: #fff; background: linear-gradient(135deg, #44a8fc, #168bd9); }
.tr-scrolled .tr-pill-gold:hover { color: #fff; background: linear-gradient(135deg, #3a9ef2, #0f77bd); }
.tr-stats-nav {
	margin: 0;
	background: rgba(120, 150, 170, .45);
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 10px;
	box-shadow: none;
}
.tr-scrolled .tr-stats-nav { background: #fff; border-color: var(--tk-border); }
.tr-stats-nav span { padding: 8px 14px; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #fff; }
.tr-stats-nav strong { font-size: 14px; color: #fff; }
.tr-scrolled .tr-stats-nav span, .tr-scrolled .tr-stats-nav strong { color: var(--tk-ink); }
.tr-stats-nav span + span { border-left-color: rgba(255, 255, 255, .3); }
.tr-scrolled .tr-stats-nav span + span { border-left-color: var(--tk-border); }
.tr-is-home .tr-stats-nav { display: none; }
.tr-dot { background: #33d17a; box-shadow: 0 0 0 3px rgba(51, 209, 122, .2); }

/* Shared hero and inner page banner: picture under a soft blue wash. */
.tk-media { position: relative; overflow: hidden; isolation: isolate; }
.tk-media-bg, .tk-media .tr-hero-video {
	position: absolute;
	inset: 0;
	z-index: -3;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
	background: center 40% / cover no-repeat;
	filter: saturate(.35) brightness(1.2) contrast(.9);
	transform: scale(1.03);
}
.tk-media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
	opacity: 1;
	filter: none;
	background:
		radial-gradient(ellipse 60% 50% at 50% 42%, rgba(200, 225, 238, .55) 0%, rgba(200, 225, 238, 0) 100%),
		linear-gradient(180deg, rgba(118, 155, 182, .78) 0%, rgba(150, 186, 207, .68) 45%, rgba(184, 211, 225, .72) 78%, rgba(247, 250, 252, .9) 100%);
}
.tk-media::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 200px;
	z-index: -1;
	background: linear-gradient(180deg, rgba(247, 250, 252, 0) 0%, rgba(247, 250, 252, .75) 60%, var(--tk-bg) 100%);
	pointer-events: none;
}
.tr-hero.tk-media, .tr-banner.tk-media { background: #9dbbd0; color: #fff; }

.tr-hero { min-height: min(100vh, 900px); padding: calc(var(--nav) + 40px) 0 170px; }
.tk-kicker {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--tk-blue);
}
.tk-kicker-hero { color: #fff; text-shadow: 0 1px 8px rgba(20, 50, 80, .45); }
.tr-logo-hero { width: min(470px, 82vw); margin: 4px 0 26px; }
.tr-logo-hero img { filter: drop-shadow(0 10px 26px rgba(20, 50, 80, .45)); }
.tk-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 22px; }
.tk-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	background: rgba(95, 125, 145, .55);
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 999px;
	box-shadow: 0 10px 24px -14px rgba(20, 50, 80, .6);
	backdrop-filter: blur(6px);
}
.tk-pill strong { font-size: 14px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.tk-pill .tr-dot { margin: 0; }
.tk-pill-off .tr-dot { background: #ff6b5b; box-shadow: 0 0 0 3px rgba(255, 107, 91, .25); }
.tk-star { color: #8fd0ff; font-style: normal; }
.tr-hero-text {
	max-width: 640px;
	margin: 0 0 28px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
	color: #fff;
	text-shadow: 0 1px 8px rgba(20, 50, 80, .5);
}
.tr-hero-actions .tr-btn { min-width: 150px; }

.tr-banner { padding: calc(var(--nav) + 52px) 0 130px; }
.tr-banner h1 { font-weight: 800; letter-spacing: -.02em; text-shadow: 0 2px 14px rgba(20, 50, 80, .45); }

/* Home sections */
.tk-sec { position: relative; padding: 84px 0; background: var(--tk-bg); }
.tk-sec-soft { background: linear-gradient(180deg, var(--tk-bg) 0%, #eef5fa 100%); }
.tk-sec h3 { border: 0; padding: 0; text-transform: none; }
.tk-head { margin: 0 0 36px; }
.tk-head h2 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.025em;
	color: var(--tk-ink);
}
.tk-head-split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 40px; }
.tk-head-center { text-align: center; }
.tk-sub { margin: 0; max-width: 420px; font-size: 14px; color: var(--tk-muted); }
.tk-head-center .tk-sub { margin: 12px auto 0; }
.tk-center { margin: 30px 0 0; text-align: center; }

/* News cards */
.tk-news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tk-news-grid.tk-one { grid-template-columns: minmax(0, 520px); justify-content: center; }
.tk-news-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--tk-card);
	border: 1px solid var(--tk-border);
	border-radius: 18px;
	box-shadow: var(--tk-shadow);
	transition: transform .2s, box-shadow .2s;
}
.tk-news-card:hover { transform: translateY(-4px); box-shadow: var(--tk-shadow-lg); }
.tk-news-img { display: block; aspect-ratio: 16 / 8.5; background: #cfe2ee center / cover no-repeat; }
.tk-news-body { display: flex; flex-direction: column; flex: 1; padding: 20px 20px 18px; }
.tk-news-meta { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.tk-tag {
	display: inline-block;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 700;
	color: var(--tk-blue);
	background: var(--tk-soft);
	border: 1px solid #cfe6f6;
	border-radius: 999px;
}
.tk-news-meta time { font-size: 11px; font-weight: 700; color: var(--tk-muted); }
.tk-news-card h3 { margin: 0 0 10px; font-size: 20px; font-weight: 600; line-height: 1.25; color: var(--tk-ink); }
.tk-news-card p { flex: 1; margin: 0 0 18px; font-size: 13px; line-height: 1.6; color: var(--tk-muted); }
.tk-news-foot { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--tk-muted); }
.tk-news-foot a { font-weight: 700; color: var(--tk-blue); }

/* Server info cards */
.tk-info-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.tk-info { text-align: center; }
.tk-info-art {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	margin: 0 0 18px;
	background: linear-gradient(180deg, #fff 0%, var(--tk-soft) 100%);
	border: 1px solid var(--tk-border);
	border-radius: 18px;
	box-shadow: var(--tk-shadow);
	transition: transform .2s;
}
.tk-info:hover .tk-info-art { transform: translateY(-4px); }
.tk-info-art img { width: auto; height: 46%; }
.tk-info .tk-kicker { margin-bottom: 6px; }
.tk-info strong { display: block; font-size: 19px; font-weight: 700; color: var(--tk-ink); }
.tk-info p { margin: 6px 0 0; font-size: 12px; color: var(--tk-muted); }

/* Top players */
.tk-champs { display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); justify-content: center; gap: 28px; }
.tk-champ { position: relative; padding: 18px 10px 0; text-align: center; }
.tk-rank {
	position: absolute;
	top: 0;
	left: 10px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 800;
	color: var(--tk-muted);
}
.tk-rank::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.tk-champ .tk-kicker { margin: 22px 0 0; color: var(--tk-ink); }
.tk-champ .tk-initial { display: block; margin: 4px 0 0; font-size: 12px; font-weight: 800; color: var(--c); }
.tk-orb {
	position: relative;
	display: block;
	width: 150px;
	height: 150px;
	margin: 16px auto 18px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 45%, var(--c) 0%, color-mix(in srgb, var(--c) 55%, transparent) 38%, transparent 70%);
	filter: blur(2px);
	opacity: .8;
}
.tk-orb::after {
	content: "";
	position: absolute;
	left: 8%;
	right: 8%;
	bottom: -6px;
	height: 26px;
	border: 2px solid color-mix(in srgb, var(--c) 70%, #fff);
	border-radius: 50%;
	box-shadow: 0 0 18px var(--c);
}
.tk-champ strong { display: block; font-size: 15px; font-weight: 700; color: var(--tk-ink); }
.tk-champ strong.tr-none { color: var(--tk-muted); }
.tk-champ p { margin: 4px 0 0; font-size: 11px; color: var(--tk-muted); }
.tk-c-red { --c: #ff5a5f; }
.tk-c-purple { --c: #a66bff; }
.tk-c-gold { --c: #ffc145; }
.tk-c-blue { --c: #44a8fc; }

/* How to play: tabs in a row, panel under them */
.tk-steps .tr-steps-wrap { display: block; max-width: 860px; margin: 0 auto; }
.tk-steps .tr-tabs {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0 0 26px;
	padding-bottom: 0;
	border-bottom: 1px solid var(--tk-border);
}
.tk-steps .tr-tab {
	flex: 0 0 auto;
	min-height: 0;
	padding: 10px 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tk-muted);
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	box-shadow: none;
}
.tk-steps .tr-tab span { display: none; }
.tk-steps .tr-tab:hover { color: var(--tk-ink); background: transparent; }
.tk-steps .tr-tab.tr-on { color: var(--tk-blue); background: transparent; border-bottom-color: var(--tk-blue); }
.tk-steps .tr-step {
	padding: 34px 36px;
	background: var(--tk-card);
	border: 1px solid var(--tk-border);
	border-radius: 18px;
	box-shadow: var(--tk-shadow);
}
.tk-steps .tr-step::before, .tk-steps .tr-step::after { display: none; }
.tk-steps .tr-step-count { font-size: 11px; letter-spacing: .2em; color: var(--tk-blue); }
.tk-steps .tr-step h3 { font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -.02em; color: var(--tk-ink); }
.tk-steps .tr-step-text { font-size: 14px; color: var(--tk-muted); }
.tk-steps .tr-step-rows { border-top-color: var(--tk-border); }
.tk-steps .tr-step-rows div { border-bottom-color: var(--tk-border); }
.tk-steps .tr-step-rows dt { font-size: 13px; color: var(--tk-muted); }
.tk-steps .tr-step-rows dd { font-size: 13px; font-weight: 700; color: var(--tk-ink); }
.tk-steps .tr-arrow { min-height: 46px; color: var(--tk-ink); background: #fff; border: 1px solid var(--tk-border); border-radius: 8px; box-shadow: none; }
.tk-steps .tr-arrow:hover { color: var(--tk-blue); background: var(--tk-soft); }

/* Dark call to action band */
.tr-cta.tk-cta { padding: 90px 0 96px; color: #c9d7e4; background: linear-gradient(180deg, #1b2a3d 0%, #14213a 100%); }
.tr-cta.tk-cta::before {
	opacity: 1;
	filter: none;
	background: radial-gradient(ellipse 50% 70% at 50% 0%, rgba(68, 168, 252, .16) 0%, rgba(68, 168, 252, 0) 100%);
}
.tk-cta .tk-kicker { color: #8fd0ff; }
.tk-cta h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -.02em; }
.tk-cta p { font-size: 14px; color: #b7c7d6; }

/* Inner pages */
.tr-card, #content { border-color: var(--tk-border); border-radius: 18px; box-shadow: var(--tk-shadow-lg); }
.tr-card h2 { font-weight: 700; letter-spacing: -.02em; color: var(--tk-ink); }
.tr-card h3 { color: var(--tk-ink); }
.message { background: var(--tk-soft); border-color: #cfe6f6; border-left-color: var(--tk-blue); }
#submenu a.current-sub-menu, .pages .current-page { color: #fff; background: var(--tk-blue); border-color: var(--tk-blue); }
.horizontal-table th, .vertical-table th, .woe-table th, #server_status th, .install_table th { color: var(--tk-ink); }

/* Footer: light, like the rest of the page */
.tr-footer { color: var(--tk-muted); background: #fff; border-top: 1px solid var(--tk-border); padding: 44px 0 22px; font-size: 14px; }
.tr-footer h4 { color: var(--tk-ink); font-weight: 700; }
.tr-footer a { color: var(--tk-muted); }
.tr-footer a:hover { color: var(--tk-blue); }
.tr-footer a:focus-visible { outline-color: var(--tk-blue); }
.tr-footer label { color: var(--tk-muted); }
.tr-footer select { color: var(--tk-ink); background: #fff; border-color: var(--tk-border); }
.tr-footer-bottom { color: var(--tk-muted); border-top-color: var(--tk-border); }
.tr-footer-bottom strong { color: var(--tk-ink); }
.tr-render { color: var(--tk-muted); }

@media (max-width: 1200px) {
	.tr-nav { padding: 0 20px; }
	.tr-menu > ul > li > a { padding: 0 8px; font-size: 13px; letter-spacing: 0; }
}
@media (max-width: 1080px) {
	.tr-nav { background: rgba(255, 255, 255, .96); }
	.tr-menu > ul > li > a, .tr-scrolled .tr-menu > ul > li > a { text-shadow: none; }
	.tr-pill-line { color: var(--tk-ink); background: #fff; border-color: var(--tk-border); }
	.tr-pill-gold { color: #fff; background: linear-gradient(135deg, #44a8fc, #168bd9); }
	.tr-stats-nav { background: #fff; border-color: var(--tk-border); }
	.tr-stats-nav span, .tr-stats-nav strong { color: var(--tk-ink); }
	.tk-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tk-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Mobile menu fix 2026-11-14: backdrop-filter makes the bar the box for its fixed children,
	   so the full-screen menu panel was squashed to the bar height. No blur on small screens. */
	.tr-nav, .tr-scrolled .tr-nav, .tr-menu-open .tr-nav { -webkit-backdrop-filter: none; backdrop-filter: none; }
	.tr-menu-open .tr-nav { background: #fff; }
	.tr-menu { background: #fff; z-index: 60; }
	body.tr-menu-open { overflow: hidden; }
}
@media (max-width: 760px) {
	.tk-sec { padding: 56px 0; }
	.tk-news-grid { grid-template-columns: 1fr; }
	.tk-champs { grid-template-columns: minmax(0, 300px); }
	.tk-steps .tr-step { padding: 26px 20px; }
}
@media (max-width: 480px) {
	.tk-info-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.tk-news-card, .tk-info-art { transition: none; }
}

/* Download page: main mirror as a soft blue row so the text stays readable. */
.tr-dl-main { background: var(--tk-soft); border-color: var(--tk-blue-2); box-shadow: inset 3px 0 0 var(--tk-blue); }
.tr-dl-main .tr-dl-txt strong { color: var(--tk-blue); }

/* 2026-11-13 Home: Top rankings + Agit Lords tables */
.tk-rank-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tk-agit-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.tk-rank-card {
	min-width: 0;
	padding: 24px 24px 16px;
	background: var(--tk-card);
	border: 1px solid var(--tk-border);
	border-radius: var(--tk-radius);
	box-shadow: var(--tk-shadow);
}
.tk-rank-card h3 { margin: 0 0 14px; font-size: 18px; font-weight: 700; color: var(--tk-ink); }
.tk-rank-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tk-rank-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 14px; color: var(--tk-ink); background: none; border: 0; }
.tk-rank-table th {
	padding: 0 10px 10px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: left;
	color: var(--tk-muted);
	background: none;
	border: 0;
	border-bottom: 1px solid var(--tk-border);
	white-space: nowrap;
}
.tk-rank-table td { padding: 11px 10px; background: none; border: 0; border-bottom: 1px solid var(--tk-border); vertical-align: middle; }
.tk-rank-table tbody tr:last-child td { border-bottom: 0; }
.tk-rank-table tbody tr:hover td { background: var(--tk-soft); }
.tk-rank-table .tk-col-rank { width: 34px; text-align: center; font-weight: 800; color: var(--tk-muted); }
.tk-rank-table .tk-col-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tk-rank-table td:nth-child(2) { font-weight: 600; }
.tk-rank-table tr.tk-r1 .tk-col-rank { color: #b7860b; }
.tk-rank-table tr.tk-r2 .tk-col-rank { color: #6b7c8c; }
.tk-rank-table tr.tk-r3 .tk-col-rank { color: #a55a2a; }
.tk-agit-table { min-width: 620px; }
.tk-guild { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tk-emblem { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 4px; image-rendering: pixelated; }
.tk-emblem-none { display: inline-block; background: var(--tk-soft); border: 1px solid var(--tk-border); }
.tk-ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-rank-none { margin: 6px 0 10px; font-size: 14px; color: var(--tk-muted); }
@media (max-width: 1080px) {
	.tk-agit-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	.tk-rank-grid { grid-template-columns: 1fr; }
	.tk-rank-card { padding: 20px 16px 12px; }
}

/* 2026-11-13 Top players: anime job art standing on the orb ring */
.tk-champ-art { position: relative; display: block; width: 210px; height: 210px; margin: 8px auto 10px; }
.tk-champ-art .tk-orb { position: absolute; left: 30px; top: 40px; margin: 0; }
.tk-champ-img {
	position: absolute;
	left: 50%;
	bottom: -14px;
	z-index: 1;
	width: 250px;
	height: 250px;
	max-width: none;
	transform: translateX(-50%);
	object-fit: contain;
	filter: drop-shadow(0 10px 14px rgba(20, 50, 80, .22));
	transition: transform .25s ease;
}
.tk-champ:hover .tk-champ-img { transform: translateX(-50%) translateY(-4px); }
.tk-champ-emblem {
	position: absolute;
	right: 22px;
	bottom: 6px;
	z-index: 2;
	width: 28px;
	height: 28px;
	padding: 2px;
	background: #fff;
	border: 1px solid var(--tk-border);
	border-radius: 6px;
	image-rendering: pixelated;
	box-shadow: var(--tk-shadow);
}
@media (prefers-reduced-motion: reduce) { .tk-champ-img { transition: none; } }

/* 2026-11-13 Item spotlight slider in the news section */
.tk-spot { max-width: 860px; margin: 0 auto 28px; background: var(--tk-card); border: 1px solid var(--tk-border); border-radius: var(--tk-radius); box-shadow: var(--tk-shadow); padding: 16px 18px 14px; }
.tk-spot-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.tk-spot-nav { display: flex; gap: 8px; }
.tk-spot-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--tk-border); background: var(--tk-card); color: var(--tk-ink); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 2px; transition: background .15s, color .15s, border-color .15s; }
.tk-spot-btn:hover { background: var(--tk-blue); border-color: var(--tk-blue); color: #fff; }
.tk-spot-btn:focus-visible, .tk-spot-dots button:focus-visible, .tk-spot-track:focus-visible, .tk-spot-pic:focus-visible { outline: 2px solid var(--tk-blue); outline-offset: 2px; }
.tk-spot-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 14px; }
.tk-spot-track::-webkit-scrollbar { display: none; }
.tk-spot-slide { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: 210px minmax(0, 1fr); border: 1px solid var(--tk-border); border-radius: 14px; overflow: hidden; min-height: 260px; }
.tk-spot-pic { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px 14px; background: var(--tk-soft); border-right: 1px solid var(--tk-border); text-align: center; color: var(--tk-ink); text-decoration: none; }
.tk-spot-pic img { width: 113px; height: 150px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 6px 10px rgba(28, 65, 101, .18)); }
.tk-spot-card img { width: 135px; height: 180px; image-rendering: auto; border-radius: 6px; }
.tk-spot-pic strong { font-size: 15px; line-height: 1.3; }
.tk-spot-pic small { font-size: 12px; color: var(--tk-muted); }
.tk-spot-pic:hover strong { color: var(--tk-blue); }
.tk-spot-info { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.tk-spot-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; color: var(--tk-ink); }
.tk-spot-lines b { color: #1f8a3a; font-weight: 600; }
.tk-spot-stats { margin: 0; padding-top: 12px; border-top: 1px dashed var(--tk-border); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; font-size: 13.5px; }
.tk-spot-stats div { display: flex; gap: 6px; min-width: 0; }
.tk-spot-stats dt { color: var(--tk-blue); font-weight: 600; white-space: nowrap; }
.tk-spot-stats dt::after { content: ":"; }
.tk-spot-stats dd { margin: 0; color: var(--tk-ink); }
.tk-spot-dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.tk-spot-dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: var(--tk-border); cursor: pointer; transition: width .2s, background .2s; }
.tk-spot-dots button[aria-current="true"] { width: 24px; border-radius: 5px; background: var(--tk-blue); }
@media (max-width: 640px) {
	.tk-spot { padding: 12px; }
	.tk-spot-slide { grid-template-columns: 1fr; }
	.tk-spot-pic { border-right: 0; border-bottom: 1px solid var(--tk-border); padding: 14px; }
	.tk-spot-pic img { width: 75px; height: 100px; }
	.tk-spot-card img { width: 75px; height: 100px; }
	.tk-spot-info { padding: 14px; }
	.tk-spot-stats { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .tk-spot-btn, .tk-spot-dots button { transition: none; } }
/* 2026-11-13 spotlight: Coming Soon first slide + offset fix */
.tk-spot-track { position: relative; }
.tk-spot-slide { box-sizing: border-box; }
.tk-spot-soon { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.tk-spot-soon-img { display: block; min-height: 260px; background-size: cover; background-position: center; border-right: 1px solid var(--tk-border); }
.tk-spot-soon-body { justify-content: center; align-items: flex-start; gap: 10px; }
.tk-spot-soon-body h3 { margin: 0; font-size: 22px; color: var(--tk-ink); }
.tk-spot-soon-body p { margin: 0; color: var(--tk-muted); }
@media (max-width: 640px) { .tk-spot-soon { grid-template-columns: 1fr; } .tk-spot-soon-img { min-height: 180px; border-right: 0; border-bottom: 1px solid var(--tk-border); } }
.tk-spot-soon-body h3 { font-weight: 700; }
.tk-spot-soon-body h3::first-letter { font: inherit; color: inherit; float: none; margin: 0; padding: 0; }
.tk-spot-soon { grid-template-columns: 1fr; }
.tk-spot-soon-img { min-height: 0; aspect-ratio: 1024 / 473; border-right: 0; background-size: cover; }
@media (max-width: 640px) { .tk-spot-soon-img { min-height: 0; border-bottom: 0; } }

/* 2026-11-13 Server rules page (CMS page path rules) */
.tr-rules { max-width: 860px; color: var(--ink); font-size: 15px; line-height: 1.65; }
.tr-rules-lead { font-size: 16.5px; background: var(--paper-3); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--r); padding: 14px 18px; margin: 0 0 22px; }
.tr-rules a { color: var(--accent-hover); font-weight: 600; }
.tr-rules-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 28px; }
.tr-rules-quick > div { border-radius: var(--r); padding: 14px 18px; border: 1px solid; }
.tr-rules-quick h3 { margin: 0 0 8px; font-size: 16px; }
.tr-rules-quick ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.tr-rules-quick li { position: relative; padding-left: 26px; }
.tr-rules-quick li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.tr-rules-do { background: #eefaf0; border-color: #bfe5c6 !important; }
.tr-rules-do h3 { color: #1f7a33; }
.tr-rules-do li::before { content: "\2713"; color: #1f7a33; }
.tr-rules-dont { background: #fdf0ee; border-color: #f1c7c0 !important; }
.tr-rules-dont h3 { color: #b03224; }
.tr-rules-dont li::before { content: "\2715"; color: #b03224; }
.tr-rules-h { display: flex; align-items: center; gap: 10px; margin: 26px 0 10px; font-size: 19px; color: var(--ink); }
.tr-rules-h span { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 14px; display: grid; place-items: center; }
.tr-rules-list { margin: 0; padding: 0 0 0 40px; display: grid; gap: 8px; }
.tr-rules-list li::marker { color: var(--accent); }
.tr-rules-table { width: 100%; border-collapse: collapse; margin: 4px 0 0; }
.tr-rules-table th, .tr-rules-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.tr-rules-table th { background: var(--paper-3); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.tr-rules-table tr:last-child td { color: #b03224; font-weight: 600; }
.tr-rules-end { margin: 30px 0 0; padding: 14px 18px; border-radius: var(--r); background: var(--paper-3); text-align: center; font-weight: 600; }
@media (max-width: 640px) {
	.tr-rules-quick { grid-template-columns: 1fr; }
	.tr-rules-list { padding-left: 22px; }
	.tr-rules-table th, .tr-rules-table td { padding: 8px 10px; }
}
.tr-wiki-topic .tr-rules { max-width: none; }
.tr-wiki-topic .tr-rules-h { font-size: 18px; }
/* 2026-11-13 home hero stat strip */
.tk-hstats { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tk-hstats li { min-width: 92px; padding: 10px 16px 9px; display: flex; flex-direction: column; align-items: center; gap: 2px; background: rgba(95, 125, 145, .5); border: 1px solid rgba(255, 255, 255, .3); border-radius: 12px; box-shadow: 0 12px 26px -16px rgba(20, 50, 80, .7); backdrop-filter: blur(6px); }
.tk-hstats-wide { min-width: 150px; }
.tk-hstats strong { font-size: 20px; font-weight: 800; line-height: 1.2; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 2px 10px rgba(20, 50, 80, .45); }
.tk-hstats span { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #d8ecfb; }
@media (max-width: 480px) { .tk-hstats li { min-width: calc(50% - 5px); flex: 1 1 calc(50% - 5px); } .tk-hstats-wide { flex-basis: 100%; } }