*{ box-sizing:border-box; }

@font-face{
	font-family:'Minecraft';
	src:url('../fonts/minecraft.ttf') format('truetype');
	font-weight:normal;
	font-style:normal;
	font-display:swap;
}

:root{
	--bg-deep:#1b140e;
	--ink:#f3e9da;
	--dim:#a9917a;
	--line:#000000;
	--amber:#d9a441;
	--edge:rgba(58,36,20,0.6);
	--hover-dur:0.28s;
}

html,body{
	margin:0;
	padding:0;
	min-height:100%;
	background:var(--bg-deep);
	color:var(--ink);
	font-family:'Lucida Console', Consolas, Menlo, monospace;
	overflow-x:hidden;
}

body{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:100vh;
	padding:calc(1.5rem + env(safe-area-inset-top,0px)) 1rem calc(1.5rem + env(safe-area-inset-bottom,0px));
}

.scanlines{
	position:fixed; inset:0; z-index:1;
	pointer-events:none;
	background:
		repeating-linear-gradient(to bottom, rgba(0,0,0,0.22) 0px, rgba(0,0,0,0.22) 1px, transparent 2px, transparent 3px),
		radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
	mix-blend-mode:multiply;
}

.panel{
	position:relative;
	z-index:2;
	width:100%;
	max-width:23rem;
	background:transparent;
	padding:1.75rem 1.5rem 1.5rem;
	text-align:center;
}

.avatar-frame{
	width:9.5rem;
	height:9.5rem;
	margin:0 auto 1.25rem;
}
.avatar-frame img{
	width:100%; height:100%;
	display:block;
	object-fit:cover;
	filter:contrast(1.1) saturate(1.25);
	-webkit-mask-image:radial-gradient(circle closest-side, #000 50%, transparent 88%);
	        mask-image:radial-gradient(circle closest-side, #000 50%, transparent 88%);
}

h1{
	margin:0 0 1.25rem;
	font-size:1.9rem;
	font-weight:400;
	letter-spacing:0.08em;
	text-transform:none;
	color:#ffffff;
	text-shadow:2px 2px 0 rgba(0,0,0,0.55);
	font-family:'Minecraft', 'Lucida Console', Consolas, Menlo, monospace;
	-webkit-font-smoothing:none;
	font-smooth:never;
	image-rendering:pixelated;
}

.socials{
	display:flex;
	justify-content:center;
	gap:0.6rem;
	margin-bottom:1.4rem;
}
.social{
	width:2.6rem; height:2.6rem;
	display:flex; align-items:center; justify-content:center;
	background:#241b12;
	border:3px solid var(--line);
	box-shadow:0 0 0 1px var(--ink);
	color:var(--ink);
	text-decoration:none;
	transition:transform .1s steps(2), background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.social svg{ width:1.1rem; height:1.1rem; }
.social:hover,
.social:focus-visible{
	transform:translate(-2px,-2px);
}
.social--yt:hover     { background:#ff0000; border-color:#ff0000; box-shadow:0 0 20px -2px rgba(255,0,0,.75); color:#fff; }
.social--twitch:hover { background:#9146ff; border-color:#9146ff; box-shadow:0 0 20px -2px rgba(145,70,255,.75); color:#fff; }
.social--ig:hover {
	border:none;
	background:conic-gradient(from 220deg, #fdf497, #fd5949 30%, #d6249f 55%, #285aeb 80%, #fdf497);
	box-shadow:0 0 20px -2px rgba(214,36,159,.7);
	color:#fff;
}
.social--tiktok:hover {
	border:none;
	background:linear-gradient(160deg, #25f4ee 0%, #4c4c9e 48%, #fe2c55 100%);
	box-shadow:0 0 20px -2px rgba(254,44,85,.65);
	color:#fff;
}

.links{ display:flex; flex-direction:column; gap:0.7rem; }
.link{
	position:relative;
	display:flex;
	align-items:center;
	gap:0.6rem;
	text-decoration:none;
	color:var(--ink);
	padding:0.85rem 3.25rem;
	transition:transform var(--hover-dur) ease, filter var(--hover-dur) ease;
}
.link::after{
	content:"";
	position:absolute;
	inset:0;
	z-index:-1;
	background:rgba(58,36,20,0.35);
	border:1.5px solid var(--edge);
	backdrop-filter:blur(6px);
	-webkit-backdrop-filter:blur(6px);
	clip-path:polygon(
		12px 0, calc(100% - 12px) 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px, 100% 12px,
		100% calc(100% - 12px), 100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%, calc(100% - 12px) 100%,
		12px 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px), 0 calc(100% - 12px),
		0 12px, 0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0
	);
}
.link:hover,
.link:focus-visible{
	transform:translateY(-3px);
	z-index:5;
}
.link:hover::after,
.link:focus-visible::after{
	animation:edge-blink 0.9s steps(2) infinite;
}
@keyframes edge-blink{
	0%,49%{ border-color:var(--amber); }
	50%,100%{ border-color:var(--edge); }
}

.link::before{
	content:"";
	position:absolute;
	top:50%;
	left:-0.9rem;
	width:3px; height:3px;
	margin-top:-1.5px;
	background:#fff;
	box-shadow:
		0 -3px 0 0 #fff,
		3px 0 0 0 #fff,
		0 3px 0 0 #fff;
	opacity:0;
	z-index:1;
}
.link:hover::before,
.link:focus-visible::before{
	opacity:1;
}

.avatar-frame,
h1,
.socials,
footer{
	transition:filter var(--hover-dur) ease;
}
.panel:has(.link:hover, .link:focus-visible) .avatar-frame,
.panel:has(.link:hover, .link:focus-visible) h1,
.panel:has(.link:hover, .link:focus-visible) .socials,
.panel:has(.link:hover, .link:focus-visible) footer,
.links:has(.link:hover, .link:focus-visible) .link:not(:hover):not(:focus-visible){
	filter:blur(4px);
}

.badge{
	position:absolute;
	left:1rem; top:50%;
	margin-top:-1rem;
	width:2rem; height:2rem;
	display:flex; align-items:center; justify-content:center;
	font-size:0.65rem;
	color:var(--dim);
}
.badge img{ width:100%; height:100%; object-fit:contain; filter:contrast(1.1) saturate(1.2) drop-shadow(0 0 4px rgba(255,255,255,0.3)); }
.label{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:1px; flex:1; min-width:0; }
.label b{ font-size:0.85rem; letter-spacing:0.03em; text-transform:uppercase; text-shadow:1px 1px 0 rgba(0,0,0,0.45); }
.label span{ font-size:0.65rem; color:var(--dim); text-transform:uppercase; letter-spacing:0.03em; }

footer{
	margin-top:1.4rem;
	font-size:0.6rem;
	letter-spacing:0.15em;
	text-transform:uppercase;
	color:var(--dim);
}

@media (max-width:600px){
	body{
		align-items:flex-start;
		min-height:100dvh;
		padding-top:calc(0.25rem + env(safe-area-inset-top,0px));
	}
	.panel{
		padding-top:0.25rem;
	}
}