/* Demonwing Server identity on top of the Time Sand layout. */

:root {
	--nz-bg: #120D0E;
	--nz-bg-deep: #0B0708;
	--nz-panel: #1C1314;
	--nz-panel-raised: #271A1A;
	--nz-tile: #231718;
	--nz-tile-hover: #331F1E;
	--nz-sunken: #160E0F;
	--nz-border: #5C2421;
	--nz-border-soft: #3A1A19;
	--nz-border-hover: #9C3B22;
	--nz-border-active: #B9481E;
	--nz-text: #EEE4DB;
	--nz-text-dim: #C2A491;
	--nz-text-mute: #8E756A;
	--nz-text-brand: #F2A93B;
	--nz-text-value: #E3C9A8;
	--nz-gold: #F39A2B;
	--nz-gold-dim: #C9802F;
	--nz-gold-hover: #FFB94F;
	--nz-gold-bright: #FFC233;
	--nz-gold-deep: #C4521A;
	--nz-on-gold: #2A0E04;
	--nz-gold-fill: linear-gradient(180deg, #F7B035, #D9601C);
	--nz-gold-wash: linear-gradient(90deg, rgba(243, 154, 43, .16), rgba(243, 154, 43, .03));
	--nz-error: #D2412F;
	--color-primary: var(--nz-gold);

	--dw-crimson: #A3172A;
	--dw-ember: #FF5B1F;
	--dw-fire-text: linear-gradient(180deg, #FFD36B 0%, #F7A531 45%, #E2561C 100%);

	/* roxo da asa da logo e dourado em faixas duras, iguais aos posts do Instagram */
	--dw-wing: #6E4466;
	--dw-wing-light: #9A6A8E;
	--dw-wing-deep: #4A2A45;
	--dw-wing-night: #2A1020;
	--dw-px-gold: #FFC12E;
	--dw-px-gold-light: #FFE36B;
	--dw-px-gold-dark: #C8621A;
	--dw-px-gold-text: linear-gradient(180deg, #FFF6B0 0 18%, #FFE36B 18% 40%, #FFC12E 40% 64%, #F28C1B 64% 84%, #C8621A 84% 100%);
}

/* Jersey 15 only replaces the digits; letters keep the surrounding font */
@font-face {
	font-family: "DW Digitos";
	src: url("../fonts/jersey15-latin.woff2") format("woff2");
	unicode-range: U+0030-0039;
	size-adjust: 135%;
	font-display: swap;
}

.dw-num,
.online-count,
.nz-stat__value {
	font-family: "DW Digitos", Inter, sans-serif;
	font-variant-numeric: normal;
}

::selection { background: var(--dw-crimson); color: #fff; }
html { scrollbar-color: var(--nz-border) var(--nz-bg-deep); }

/* ------------------------------------------------------------ backdrop */
.wrapper {
	background:
		radial-gradient(110% 48% at 50% 0%, rgba(255, 91, 31, .10) 0%, transparent 60%),
		radial-gradient(60% 40% at 50% 100%, rgba(163, 23, 42, .10) 0%, transparent 70%),
		linear-gradient(180deg, var(--nz-bg-deep) 0%, var(--nz-bg) 34%, var(--nz-bg) 100%);
	background-color: var(--nz-bg);
}

.particle { background: rgba(255, 106, 40, .7); }
.ember {
	background: radial-gradient(circle, #fff 0%, #FFC233 35%, var(--dw-ember) 70%, transparent 100%);
	box-shadow: 0 0 10px rgba(255, 91, 31, .55), 0 0 22px rgba(163, 23, 42, .45);
}

/* --------------------------------------------------------------- header */
.header__logo img { height: 54px; max-width: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); }
.header--scrolled .header__logo img { height: 46px; }
@media (max-width: 600px) {
	.header__logo img { height: 44px; }
}
.header.header--scrolled { box-shadow: 0 1px 0 rgba(163, 23, 42, .35), 0 8px 24px rgba(0, 0, 0, .45); }

/* ------------------------------------------------------- boosted widget */
.dw-boosted {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 900;
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 6px 4px 6px 8px;
	background: color-mix(in srgb, var(--nz-panel) 94%, transparent);
	backdrop-filter: blur(6px);
	border: 1px solid var(--nz-border-soft);
	border-radius: var(--nz-r-md, 6px);
	box-shadow: 0 1px 0 rgba(163, 23, 42, .35), 0 8px 24px rgba(0, 0, 0, .45);
}
.dw-boosted::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: 1px;
	pointer-events: none;
	background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--nz-border) 70%, transparent) 16%, color-mix(in srgb, var(--nz-gold) 55%, transparent) 50%, color-mix(in srgb, var(--nz-border) 70%, transparent) 84%, transparent 100%);
}
.dw-boosted__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 2px 12px 2px 2px;
	border-radius: var(--nz-r, 4px);
	text-decoration: none;
	transition: background-color var(--nz-t, .2s);
}
.dw-boosted__item + .dw-boosted__item { border-left: 1px solid var(--nz-border-soft); border-radius: 0 var(--nz-r, 4px) var(--nz-r, 4px) 0; padding-left: 10px; }
.dw-boosted__item:hover { background: var(--nz-panel-raised); }
.dw-boosted__sprite {
	position: relative;
	flex: none;
	width: 64px;
	height: 44px;
}
.dw-boosted__sprite::after {
	content: "";
	position: absolute;
	right: 6px;
	bottom: 2px;
	width: 34px;
	height: 8px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent);
}
.dw-boosted__sprite img {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 1;
	width: 64px;
	height: 64px;
	image-rendering: pixelated;
	filter: drop-shadow(0 0 6px rgba(255, 91, 31, .35));
	animation: dw-boosted-float 3.2s ease-in-out infinite;
}
.dw-boosted__item--boss .dw-boosted__sprite img { animation-delay: -1.6s; filter: drop-shadow(0 0 7px rgba(163, 23, 42, .65)); }
@keyframes dw-boosted-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}
.dw-boosted__text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.dw-boosted__label { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--nz-text-brand); }
.dw-boosted__name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--nz-text); }
.dw-boosted__item:hover .dw-boosted__name { color: var(--nz-gold-hover); }
.dw-boosted__boss { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--nz-text-mute); }
.dw-boosted__boss b { font-weight: 600; color: var(--nz-text-dim, var(--nz-text)); }
.dw-boosted__item--dungeon .dw-boosted__sprite img { animation-delay: -.8s; filter: drop-shadow(0 0 7px rgba(239, 151, 47, .55)); transition: opacity .5s ease; }
.dw-boosted__item--dungeon .dw-boosted__sprite img:not(.is-active) { opacity: 0; }
.dw-boosted__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	width: 24px;
	margin-left: 2px;
	padding: 0;
	color: var(--nz-text-mute);
	background: transparent;
	border: 0;
	border-radius: var(--nz-r, 4px);
	cursor: pointer;
	transition: color var(--nz-t, .2s), background-color var(--nz-t, .2s);
}
.dw-boosted__toggle:hover { color: var(--nz-gold); background: var(--nz-panel-raised); }
.dw-boosted__toggle .material-icons { font-size: 20px; transition: transform var(--nz-t, .2s); }
.dw-boosted.is-collapsed .dw-boosted__text { display: none; }
.dw-boosted.is-collapsed .dw-boosted__item { padding-right: 2px; }
.dw-boosted.is-collapsed .dw-boosted__toggle .material-icons { transform: rotate(180deg); }
@media (max-width: 600px) {
	.dw-boosted { left: 8px; bottom: 8px; }
	.dw-boosted__sprite { width: 48px; height: 36px; }
	.dw-boosted__sprite img { width: 48px; height: 48px; }
	.dw-boosted__name, .dw-boosted__boss { max-width: 96px; font-size: 12px; }
	.dw-boosted__boss { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
	.dw-boosted__sprite img { animation: none; }
}

/* ------------------------------------------------------ language switch */
.dw-lang {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border: 1px solid var(--nz-border-soft);
	border-radius: var(--nz-r-pill);
	background: rgba(11, 7, 8, .55);
}

.dw-lang__opt {
	min-width: 32px;
	padding: 4px 8px;
	border-radius: var(--nz-r-pill);
	color: var(--nz-text-dim);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: color .2s ease, background .2s ease;
}

.dw-lang__opt:hover { color: var(--nz-gold-hover); }

.dw-lang__opt.is-active {
	background: var(--nz-gold-fill);
	color: var(--nz-on-gold);
	pointer-events: none;
}

/* ----------------------------------------------------------- home hero */
.ts-home.dw-has-art {
	--dw-hero-h: max(480px, 53.2vw);
}

.ts-home.dw-has-art .home {
	--hero-art-h: calc(var(--dw-hero-h) * .92);
	--ember-rise: calc(var(--dw-hero-h) * .8);
	padding-top: 0;
	background:
		linear-gradient(180deg, rgba(11, 7, 8, .5) 0, rgba(11, 7, 8, 0) 9%, rgba(11, 7, 8, 0) 50%, rgba(18, 13, 14, .7) 76%, var(--nz-bg) 100%) top center / 100% var(--dw-hero-h) no-repeat,
		var(--dw-hero-art) top center / max(100%, calc(var(--dw-hero-h) * 1.88)) auto no-repeat,
		var(--nz-bg) !important;
}

.ts-home.dw-has-art .home::before { display: none; }

.ts-home.dw-has-art .hero-intro {
	min-height: 0;
	padding-top: calc(var(--dw-hero-h) * .56);
}

.ts-home.dw-has-art .intro-tagline {
	color: var(--nz-gold-bright);
	letter-spacing: 4px;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .9);
}

.ts-home.dw-has-art .intro-title {
	color: #F6EADF;
	text-shadow: 0 3px 0 rgba(0, 0, 0, .55), 0 4px 18px rgba(0, 0, 0, .8);
}

.intro-title .accent {
	background: var(--dw-fire-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: none;
	filter: drop-shadow(0 3px 10px rgba(226, 86, 28, .45));
}

.ts-home.dw-has-art .intro-subtitle {
	max-width: 680px;
	margin: 0 auto;
	color: #E2CFC1;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .95);
}

.ts-home.dw-has-art .hero-cta-block {
	background: transparent;
	padding-top: 28px;
}

.ts-home.dw-has-art .hero-cta-block::before { display: none; }

.hero-btn-play {
	box-shadow: 0 0 0 1px rgba(255, 194, 51, .35), 0 10px 30px rgba(226, 86, 28, .35), 0 0 42px rgba(163, 23, 42, .3);
}

/* ------------------------------------------------ pixel divider (posts) */
.section-divider .divider-line,
.section-divider .ornament-wing {
	height: 4px;
	background: repeating-linear-gradient(90deg, var(--dw-px-gold) 0 4px, transparent 4px 8px);
	filter: drop-shadow(2px 2px 0 #000);
}
.section-divider .divider-line:first-child { -webkit-mask-image: linear-gradient(90deg, transparent, #000 75%); mask-image: linear-gradient(90deg, transparent, #000 75%); }
.section-divider .divider-line:last-child { -webkit-mask-image: linear-gradient(270deg, transparent, #000 75%); mask-image: linear-gradient(270deg, transparent, #000 75%); }
.section-divider .divider-line::before,
.section-divider .ornament-wing::before,
.section-divider .ornament-wing::after { display: none; }
.section-divider .ornament-wing { width: 28px; }

.ornament-gem {
	width: 14px;
	height: 14px;
	margin: 0 12px;
	border-radius: 0;
	transform: none;
	background: var(--dw-wing);
	box-shadow: inset 3px 3px 0 var(--dw-wing-light), inset -3px -3px 0 var(--dw-wing-deep), 0 0 0 3px var(--dw-px-gold), 0 0 0 5px #000, 0 0 20px rgba(154, 106, 142, .55);
	animation: dw-gem-glow 2.4s steps(4) infinite;
}
.ornament-gem::before { display: none; }
@keyframes dw-gem-glow {
	50% { box-shadow: inset 3px 3px 0 var(--dw-wing-light), inset -3px -3px 0 var(--dw-wing-deep), 0 0 0 3px var(--dw-px-gold-light), 0 0 0 5px #000, 0 0 30px rgba(154, 106, 142, .85); }
}

/* "how to join" steps: square pixel marker instead of the round dot */
.step__title::after,
.step.active .step__title::after,
.step.completed .step__title::after {
	border-radius: 0;
	border: 3px solid var(--dw-px-gold);
	background: var(--dw-wing);
	box-shadow: 0 0 0 3px #000, inset 3px 3px 0 var(--dw-wing-light), inset -3px -3px 0 var(--dw-wing-deep), 0 0 18px rgba(154, 106, 142, .55);
}

/* --------------------------------------- gold pixel corners on key cards */
.step__content,
.nz-auth__card { position: relative; }
.step__content::after,
.nz-auth__card::after,
.dw-launch__count::after {
	content: "";
	position: absolute;
	inset: -5px;
	z-index: 3;
	pointer-events: none;
	--dw-c: var(--dw-px-gold);
	--dw-i: var(--dw-wing);
	background:
		linear-gradient(var(--dw-i), var(--dw-i)) left 3px top 3px / 4px 4px,
		linear-gradient(var(--dw-i), var(--dw-i)) right 3px top 3px / 4px 4px,
		linear-gradient(var(--dw-i), var(--dw-i)) left 3px bottom 3px / 4px 4px,
		linear-gradient(var(--dw-i), var(--dw-i)) right 3px bottom 3px / 4px 4px,
		linear-gradient(var(--dw-c), var(--dw-c)) left top / 10px 10px,
		linear-gradient(var(--dw-c), var(--dw-c)) right top / 10px 10px,
		linear-gradient(var(--dw-c), var(--dw-c)) left bottom / 10px 10px,
		linear-gradient(var(--dw-c), var(--dw-c)) right bottom / 10px 10px;
	background-repeat: no-repeat;
	filter: drop-shadow(1px 1px 0 #000) drop-shadow(-1px -1px 0 #000);
}

/* ---------------------------------------------------- wing purple accents */
.dropdown__item .nav__link:hover { background: color-mix(in srgb, var(--dw-wing) 30%, transparent); }
.footer__social-link:hover { border-color: var(--dw-wing-light); background: color-mix(in srgb, var(--dw-wing) 35%, transparent); }

/* --------------------------------------------- launch countdown / live */
.dw-launch { display: flex; justify-content: center; margin-bottom: 14px; }
.dw-launch [hidden] { display: none !important; }
.dw-launch__count {
	position: relative;
	padding: 14px 22px 12px;
	text-align: center;
	background: linear-gradient(180deg, rgba(58, 31, 51, .9), rgba(34, 17, 29, .94));
	box-shadow: inset 3px 3px 0 rgba(154, 106, 142, .35), inset -3px -3px 0 rgba(0, 0, 0, .45), 0 0 0 2px var(--dw-wing-night), 0 0 0 4px var(--dw-px-gold), 0 0 0 6px #000, 0 14px 34px rgba(0, 0, 0, .6);
	backdrop-filter: blur(4px);
}
.dw-launch__kicker {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--dw-px-gold-light);
	text-shadow: 2px 2px 0 #000;
}
.dw-launch__units { display: flex; justify-content: center; gap: 6px; }
.dw-launch__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 74px;
	padding: 6px 8px 6px;
	background: rgba(11, 7, 8, .62);
	box-shadow: inset 0 0 0 1px rgba(154, 106, 142, .4), inset 0 -3px 0 rgba(0, 0, 0, .45);
}
.dw-launch__unit b {
	font-size: 46px;
	font-weight: 400;
	line-height: 1;
	background: var(--dw-px-gold-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(2px 2px 0 #000);
}
.dw-launch__unit small {
	margin-top: 3px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--nz-text-dim);
}
.dw-launch__when { margin: 9px 0 0; font-size: 12px; color: var(--nz-text-dim); }
.dw-launch__live {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 9px 18px;
	font-size: 14px;
	font-weight: 700;
	color: var(--nz-text);
	text-decoration: none;
	background: rgba(11, 7, 8, .7);
	box-shadow: inset 2px 2px 0 rgba(63, 163, 63, .35), 0 0 0 2px #1d5c1d, 0 0 0 4px #000;
	transition: background-color var(--nz-t, .2s);
}
.dw-launch__live:hover { background: rgba(29, 92, 29, .35); color: #fff; }
.dw-launch__live b { font-size: 22px; font-weight: 400; color: #8CFF8C; }
.dw-launch__dot {
	flex: none;
	width: 10px;
	height: 10px;
	background: #6BFF6B;
	box-shadow: 0 0 0 2px #0E330E, 0 0 10px #6BFF6B;
	animation: dw-blink 1.6s steps(2, jump-none) infinite;
}
@keyframes dw-blink { 50% { opacity: .35; } }
@media (max-width: 600px) {
	.dw-launch__count { padding: 12px 12px 10px; }
	.dw-launch__unit { min-width: 56px; padding: 5px 4px; }
	.dw-launch__unit b { font-size: 36px; }
	.dw-launch__unit small { font-size: 9px; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
	.ornament-gem, .dw-launch__dot { animation: none; }
}

/* highscores: rank/level columns use the pixel digits too */
.ts-inner .dw-num { font-size: 1.1em; color: var(--nz-text-value); }
.ts-inner tr[bgcolor] td.dw-rank { color: var(--dw-px-gold); }

/* ------------------------------------------- inner pages: faded hero art */
.ts-myaac.dw-has-art:not(.ts-home) .wrapper {
	position: relative;
	isolation: isolate;
}

.ts-myaac.dw-has-art:not(.ts-home) .wrapper::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 560px;
	z-index: -1;
	pointer-events: none;
	background: var(--dw-hero-art) center bottom / cover no-repeat;
	opacity: .3;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 100%);
}

/* --------------------------------------------------------------- panels */
.nz-panel {
	box-shadow: inset 0 1px 0 rgba(255, 91, 31, .07), 0 6px 22px rgba(0, 0, 0, .45);
}

.ts-page-title,
.section-title {
	background: var(--dw-fire-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* --------------------------------------------------------------- footer */
.footer {
	background-image:
		linear-gradient(180deg, var(--nz-bg) 0%, transparent 160px),
		radial-gradient(70% 120% at 50% 100%, rgba(163, 23, 42, .14) 0%, transparent 70%);
	border-top: 1px solid rgba(163, 23, 42, .25);
}

.footer__column--brand { align-items: center; text-align: center; }
.footer__logo { align-self: center; height: 64px !important; width: auto !important; max-width: 100%; margin-top: -14px; }
@media (max-width: 768px) {
	.footer__logo { margin-top: 0; }
}
.footer__brand-line { max-width: 300px; color: var(--nz-text-dim); text-wrap: balance; }

/* --------------------------------------------------------------- datatables (magias) */
.ts-inner table.dataTable { border-collapse: collapse; }
.ts-inner table.dataTable tbody tr,
.ts-inner table.dataTable.stripe tbody tr.odd,
.ts-inner table.dataTable.display tbody tr.odd,
.ts-inner table.dataTable.display tbody tr > .sorting_1,
.ts-inner table.dataTable.display tbody tr.odd > .sorting_1,
.ts-inner table.dataTable.order-column tbody tr > .sorting_1 { background-color: transparent; }
.ts-inner table.dataTable.hover tbody tr:hover,
.ts-inner table.dataTable.display tbody tr:hover,
.ts-inner table.dataTable tbody tr:hover { background-color: var(--nz-tile-hover); }
.ts-inner table.dataTable tbody td { color: var(--nz-text); border-top: 1px solid var(--nz-border-soft); }
.ts-inner table.dataTable thead th, .ts-inner table.dataTable thead td { border-bottom: 1px solid var(--nz-border); }
.ts-inner table.dataTable.no-footer { border-bottom: 1px solid var(--nz-border-soft); }
.ts-inner .dataTables_wrapper .dataTables_info,
.ts-inner .dataTables_wrapper .dataTables_length,
.ts-inner .dataTables_wrapper .dataTables_filter { color: var(--nz-text-dim); }
.ts-inner .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--nz-text-dim) !important; border: 1px solid transparent; }
.ts-inner .dataTables_wrapper .dataTables_paginate .paginate_button:hover { color: var(--nz-gold) !important; background: var(--nz-sunken); border-color: var(--nz-border-soft); }
.ts-inner .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.ts-inner .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { color: var(--nz-on-gold) !important; background: var(--nz-gold-fill); border-color: transparent; }
.ts-inner .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { color: var(--nz-text-mute) !important; }