@font-face {
	font-family: "tf2b";
	font-display: swap;
	src: url("/TF2Build.woff2")
}

:root {
	scrollbar-color: #888 #202020;
	scrollbar-width: thin
}

a {
	color: #EEE;
	font-weight: 700;
	transition: color .2s ease-in, text-shadow .2s ease-in;
	text-decoration: none
}

a:hover,
.menucell:hover {
	color: #FF8349;
	text-shadow: 0 0 4px #FF8349
}

body {
	background: repeating-linear-gradient(-45deg, #202020, #202020 2px, #242424 4px, #242424 6px) fixed #222;
	color: #EEE;
	font-family: "Segoe UI", Tahoma, sans-serif;
	margin: 0
}

em,
i {
	color: var(--c, #B0B0B0);
	font-style: normal;
	font-size: 10px
}

i {
	opacity: .6
}

strong,
span {
	color: var(--c, #EEE)
}

.wrn {
	font-style: oblique;
	color: #FFB516
}

h1,
h3,
h4,
h5 {
	text-shadow: 1px 1px 1px #000;
	position: absolute
}

h1 {
	font-size: 46px;
	left: 24px;
	top: -34px
}

h3 {
	font-size: 31px;
	left: 232px;
	top: -29px
}

h4 {
	font-size: 11px;
	top: 59px;
	right: 10px
}

h5 {
	font-size: 11px;
	left: 232px;
	top: 48px
}

header {
	background: linear-gradient(#343434E9, #181818E9), repeating-linear-gradient(45deg, #000, #000 8px, #111 12px, #111 20px);
	border-bottom: 1px solid #000A;
	box-shadow: 0 1px 8px #111;
	height: 94px;
	width: 100%
}

input,
select,
#menubtn,
#filt {
	background: #111B;
	border: 1px solid #000B;
	border-radius: 6px;
	color: #CCC;
	position: absolute;
	text-align: center;
	transition: color .2s ease-in, border .2s ease-in, box-shadow .2s ease-in;
	padding: 3px
}

select {
	font-size: 11px;
	text-align: left;
	text-align-last: center;
	right: 48px;
	top: 8px;
	height: 28px;
	width: 140px
}

select:focus,
input:focus {
	box-shadow: 0 0 8px #888;
	border-color: #999;
	color: #FFF
}

.ip {
	display: grid;
	grid-template-columns: repeat(10, 102px);
	grid-auto-rows: 84px;
	gap: 5px;
	content-visibility: auto;
	contain-intrinsic-height: 440px;
	padding: 5px
}

.ic {
	background: var(--kf, ) calc(100px * var(--x, 0)) calc(82px * var(--y, 0))/calc(96px * var(--z, 1)), var(--if, ) center/96px, var(--ef, ) center/96px #323230CC;
	background-repeat: no-repeat;
	border: 1px solid var(--c, #363634CC);
	border-radius: 6px;
	box-shadow: 1px 1px 0 #191919;
	cursor: pointer;
	position: relative
}

.nt {
	background-color: #262624CC;
}

.ic:hover {
	--op: 0;
	--hc: oklch(from var(--c) calc(l + .11) c h);
	--bc: oklch(from var(--c) 39% min(c, .08) h / .8);
	background-color: var(--bc, #545452CC);
	border-color: var(--hc, #7F7F7DEE);
	box-shadow: 0 0 4px var(--hc, #7F7F7DEE), 0 0 25px var(--hc, #7F7F7DEE) inset
}

[data-tt]::before,
[data-ct]::after {
	background: #111A;
	border-radius: 4px;
	padding: 4px;
	font-weight: 700;
	line-height: 85%;
	position: absolute;
	transition: opacity .2s ease-in;
	opacity: var(--op, 1);
	left: 4px
}

[data-tt]::before {
	color: var(--ttc, #BBB);
	content: attr(data-tt);
	font-size: 9px;
	top: 4px
}

[data-ct]::after {
	color: #CF6A32;
	content: attr(data-ct);
	font-size: 8px;
	bottom: 4px
}

.cd {
	position: absolute;
	transition: opacity .2s ease-in;
	opacity: var(--op, 1)
}

.decal {
	width: 42px;
	height: 42px;
	border: 1px solid #0003;
	border-radius: 6px;
	background-color: #1113;
	top: 23%;
	left: 4px
}

.pdot {
	height: 16px;
	width: 16px;
	background: linear-gradient(#FFF2, #0003 60%), linear-gradient(105deg, var(--p, #0000) 46%, var(--p2, #0000) 54%), var(--p, url("/imc/e.svg") 0/8px);
	background-origin: border-box;
	border: 1px solid #FFFFFF18;
	border-radius: 16px;
	box-shadow: 0 0 5px #EEE1 inset;
	right: 4px;
	top: 4px
}

.sdot {
	height: 10px;
	width: 10px;
	background: linear-gradient(#FFF2, #0003 60%), linear-gradient(135deg, var(--s, #0000) 46%, var(--s2, var(--s, #0000)) 54%);
	background-origin: border-box;
	border: 1px solid #FFFFFF18;
	border-radius: 3px;
	right: 4px;
	bottom: 4px
}

.gift {
	--bgs: 48px;
	background: var(--kf, ) calc(var(--bgs) * var(--x, 0)) calc(var(--bgs) * var(--y, 0))/calc(var(--bgs) * var(--z, 1)) no-repeat, var(--if, ) center/var(--bgs), var(--ef, ) center/var(--bgs) #111A;
	border-left: 3px solid var(--c, #000);
	border-radius: 6px;
	bottom: 4px;
	left: 4px;
	height: var(--bgs);
	width: var(--bgs)
}

.ic>.gift>.cd {
	display: none
}

.seed::before {
	color: oklch(80% 80% mod(attr(data-s type(<number>)), 360));
	content: attr(data-s)
}

#bpct {
	margin: 8px auto 120px;
	width: fit-content
}

#blind {
	width: 100%;
	height: 100%;
	background: #0D0D0DF2;
	backdrop-filter: blur(9px) grayscale(1);
	opacity: 0;
	display: none;
	transition: opacity .2s ease-in, display .2s allow-discrete;
	position: fixed;
	top: 0;
	z-index: 8
}

#blind.on {
	opacity: 1;
	display: block
}

#exit {
	position: fixed;
	font-size: 42px;
	width: 64px;
	padding: 10px;
	text-align: center;
	user-select: none;
	cursor: pointer;
	transition: all .2s ease-in;
	right: 0;
	top: 0
}

#exit:hover {
	text-shadow: 0 0 12px #FF4040;
	color: #FF4040
}

#hbox {
	background: linear-gradient(#323232FA, #141414FA) border-box;
	border: 1px solid #0007;
	border-radius: 6px;
	box-shadow: 1px 1px 6px #111;
	text-shadow: 1px 1px 1px #000;
	text-align: center;
	position: absolute;
	content-visibility: hidden;
	opacity: 0;
	transition: content-visibility .15s allow-discrete, opacity .15s ease;
	padding: 5px;
	font-size: 12px;
	font-weight: 600;
	z-index: 9;
	width: 390px;
	height: fit-content;
	white-space: pre-wrap;
	text-wrap: balance;
	overflow-wrap: break-word
}

#hbox.vb {
	opacity: 1;
	content-visibility: auto
}

#hname {
	font: 18px "tf2b", "Segoe UI", sans-serif;
	margin: 4px 0 auto
}

#hstat::first-line {
	font-size: 13px;
	line-height: 220%;
	color: #FFF
}

#eseg {
	text-align: center;
	text-shadow: 1px 1px 2px #111;
	color: #AAA;
	font-weight: 700;
	font-size: 20px
}

#etitle {
	font-size: 42px;
	color: #EEE;
	margin: 20px 0
}

#exec,
#menu {
	background: #323230CC;
	border: 1px solid #363634CC;
	border-radius: 6px;
	box-shadow: 1px 1px 0 #1A1A1A
}

#exec {
	font-size: 12px;
	white-space: pre;
	margin: 20px auto;
	padding: 4px;
	text-align: center;
	width: 330px
}

#filt {
	display: flex;
	right: 8px;
	top: 42px
}

.filtb {
	border: 1px solid #FFF2;
	border-radius: 6px;
	background: linear-gradient(#F7F7F726, #08080826 60%) var(--c, #84847F) border-box;
	transition: box-shadow .2s ease-in, text-shadow .2s ease-in, color .2s ease-in, border .2s ease-in;
	cursor: pointer;
	user-select: none;
	font-size: 12px;
	font-weight: 700;
	text-shadow: 1px 1px 2px #FFF5;
	color: #111;
	text-align: center;
	height: 16px;
	margin: 1px 1.5px;
	padding: 1px;
	min-width: 22px
}

.filtb:hover {
	color: #FFF;
	box-shadow: 0 0 5px #EEE;
	text-shadow: 0 0 4px #FFFA;
	border-color: #FFF4
}

#filtall {
	color: #EEE;
	text-shadow: -1px -1px 0 #111, 1px -1px 0 #111, -1px 1px 0 #111, 1px 1px 0 #111;
	border-color: #EEE9;
	background-image: linear-gradient(#F7F7F726, #08080826 60%), linear-gradient(-90deg, #F00, #FFA500, #FF0, #20FF20, #0D0DFF, #9500FF, #E8E)
}

#filtall:hover {
	color: #FFF;
	text-shadow: 0 0 4px #FFF
}

#pcl {
	width: 22px;
	position: absolute;
	top: 11px;
	right: 378px
}

#identry {
	left: 8px;
	top: 56px;
	width: 130px
}

#menubtn {
	cursor: pointer;
	height: 20px;
	line-height: 19px;
	position: absolute;
	right: 8px;
	top: 8px;
	width: 24px
}

#menu {
	position: absolute;
	right: 10px;
	text-align: center;
	display: none;
	top: 34px;
	width: 128px
}

.menucell {
	border-top: 1px solid #34342F;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	padding: 6px
}

.menucell:hover {
	background: #525250
}

#menu:hover,
#menubtn:hover~#menu {
	display: block
}

#motd {
	position: absolute;
	top: 36px;
	left: 232px;
	font-size: 12px;
	font-weight: 200;
	color: #CCC
}

#motd>span {
	font-weight: 700;
	color: #DDD
}

#search {
	font-style: italic;
	height: 28px;
	right: 196px;
	top: 8px;
	width: 180px
}

.fuzzit {
	opacity: .6;
	filter: blur(4px) grayscale(.75)
}

.ava {
	border: 3px solid #666;
	border-radius: 6px;
	width: 64px;
	height: 64px;
	box-shadow: 0 1px 2px #111;
	left: 154px;
	position: absolute;
	top: 10px
}

.rc {
	font-style: oblique
}

.pos {
	color: #9CF
}

.neg {
	color: #FF4040
}

.unu {
	color: #8650AC
}

.lim {
	color: #FF0
}

.ptab {
	font-size: 12px;
	padding: 3px 5px;
	margin: -22px;
	text-align: center;
	background: #1118;
	color: #AAA;
	user-select: none;
	border-radius: 6px
}

.nbdr {
	border-color: #363634CC
}

.ibig {
	width: 384px;
	height: 384px;
	margin: auto;
	background: var(--kf, ) calc(384px * var(--x, 0)) calc(384px * var(--y, 0))/calc(384px * var(--z, 1)), var(--if, ) center/384px, var(--ef, ) center/384px;
	background-repeat: no-repeat;
	position: relative
}

.ibig>.pdot {
	width: 24px;
	height: 24px;
	top: 16px;
	right: 16px
}

.ibig>.sdot {
	bottom: 16px;
	right: 16px
}

.ibig>.gift {
	--bgs: 186px;
	border-left-width: 4px;
	left: 16px;
	bottom: 16px
}

.ibig>.decal {
	width: 128px;
	height: 128px;
	left: 16px
}

.ibig-t {
	max-width: 620px;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	font-size: 13px;
	font-weight: 600;
	margin: auto;
	text-shadow: 1px 1px 2px #000;
	text-align: center;
	line-height: 140%
}

.ibig-t::first-line {
	font-size: 14px;
	line-height: 280%;
	color: #FFF
}

.ibig-n {
	margin: 5px auto;
	text-align: center;
	max-width: 820px;
	text-wrap: balance;
	text-shadow: 1px 1px 4px #000;
	font: 28px "tf2b", "Segoe UI", sans-serif
}

.ibig-t a {
	font-weight: 900
}

.ibig-t a::after {
	content: "  🔗";
	font-size: 65%
}

.tot {
	width: 200px;
	font-size: 10px;
	font-weight: 600;
	text-align: center;
	color: #5559;
	margin: auto
}

.alist {
	display: flex;
	position: fixed;
	width: 100%;
	bottom: 20px
}

.aitem {
	text-align: center;
	display: block;
	background: #0004;
	border-radius: 16px;
	font-size: 13px;
	padding: 10px;
	width: 128px;
	margin: auto
}

.aitem::first-letter {
	font-size: 15px
}

.arr {
	position: fixed;
	font-size: 28px;
	cursor: pointer;
	user-select: none;
	color: #666;
	transition: all .2s ease-in;
	padding: 20px;
	top: calc(50% - 38px)
}

.arr:hover {
	color: #FFF;
	text-shadow: 0 0 8px #FFF
}

.q0 {
	--c: #B2B2B2
}

.q1 {
	--c: #4D7455
}

.q3 {
	--c: #476291
}

.q6 {
	--c: #FFD700
}

.q8 {
	--c: #A50F79
}

.q11 {
	--c: #CF6A32
}

.q13 {
	--c: #38F3AB
}

.q14 {
	--c: #830000
}

.q15 {
	--c: #FAFAFA
}

.r1 {
	--c: #B0C3D9
}

.r2 {
	--c: #5E98D9
}

.r3 {
	--c: #4B69FF
}

.r4 {
	--c: #8847FF
}

.r5 {
	--c: #D32CE6
}

.r6,
.r0 {
	--c: #EB4B4B
}

.q5 {
	--c: #8650AC
}

.q7,
.q9 {
	--c: #70B04A
}