:root {
	--bg: #1f2329;
	--bg-dark: #181b20;
	--panel: #20242b;
	--text: #abb2bf;
	--muted: #6b7280;
	--blue: #61afef;
	--green: #98c379;
	--purple: #c678dd;
	--red: #e06c75;
	--yellow: #e5c07b;
	--border: #3a3f4b;

	--accent-white: rgba(255, 255, 255, 0.68);
	--accent-soft: rgba(255, 255, 255, 0.08);
	--shadow: 0 14px 44px rgba(0, 0, 0, 0.42);
	--glow: 0 0 14px rgba(255, 255, 255, 0.07);
	--font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
	--edge: clamp(0.75rem, 2.5vw, 1rem);
	--panel-width: 280px;
}

* {
	box-sizing: border-box;
}

html {
	min-height: 100%;
	background: var(--bg);
}

#bg-canvas {
	position: fixed;
	inset: 0;

	width: 100%;
	height: 100dvh;

	z-index: 0;
	pointer-events: none;

	background: var(--bg);
}
.taskbar-left,
.taskbar-center,
.now-playing,
.info-row,
.ipbox,
.local-card,
.socials-card {
	z-index: 10;
}
body {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-mono);
	padding: 0;
	position: relative;
	overflow-x: hidden;
	overflow-y: auto;
	background: var(--bg);
}
* {
	cursor: none;
}

#cursor {
	position: fixed;
	top: 0;
	left: 0;

	width: 26px;
	height: 26px;

	border: 1px solid rgba(255, 255, 255, 0.75);
	border-radius: 50%;

	pointer-events: none;
	z-index: 99999;

	transform: translate(-50%, -50%);

	box-shadow:
		0 0 12px rgba(255, 255, 255, 0.12),
		0 0 18px rgba(97, 175, 239, 0.18);

	transition:
		width 0.12s ease,
		height 0.12s ease,
		border-color 0.12s ease,
		background 0.12s ease;
}

#cursor-dot {
	position: fixed;
	top: 0;
	left: 0;

	width: 4px;
	height: 4px;

	background: rgba(255, 255, 255, 0.9);
	border-radius: 50%;

	pointer-events: none;
	z-index: 100000;

	transform: translate(-50%, -50%);

	box-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
}

#cursor.cursor-hover {
	width: 34px;
	height: 34px;
	border-color: var(--blue);
	background: rgba(97, 175, 239, 0.08);
}

#cursor.cursor-click {
	width: 20px;
	height: 20px;
	border-color: var(--purple);
	background: rgba(198, 120, 221, 0.12);
}

/* ---------- Global text ---------- */

h1 {
	color: var(--blue);
	font-size: clamp(2rem, 6vw, 4rem);
	margin: 0 0 1rem;
}

h1::before {
	content: "> ";
	color: var(--green);
}

p {
	line-height: 1.7;
	font-size: 1rem;
}

a {
	color: var(--purple);
	text-decoration: none;
	transition: color 0.15s ease, opacity 0.15s ease;
}

a:hover {
	color: var(--yellow);
}

code {
	background: var(--bg-dark);
	color: var(--green);
	padding: 0.2rem 0.4rem;
	border: 1px solid var(--border);
	border-radius: 6px;
}

/* ---------- Shared panel style ---------- */

main,
.card,
.now-playing,
.taskbar-left,
.taskbar-center,
.ipbox {
	background: var(--bg-dark);
	border: 1px solid var(--accent-white);
	box-shadow: var(--shadow), var(--glow);
	font-family: var(--font-mono);
}

/* ---------- Main/card ---------- */

main {
	width: min(900px, 100%);
	border-radius: 14px;
	padding: 2rem;
}

.card {
	margin-top: 1.5rem;
	padding: 1rem;
	border-radius: 10px;
}

.cursor::after {
	content: "_";
	color: var(--green);
	animation: blink 1s steps(1) infinite;
}

/* ---------- Now playing card ---------- */

.now-playing {
	position: fixed;
	top: var(--edge);
	right: var(--edge);
	width: var(--panel-width);

	border-radius: 10px;
	padding: 0.9rem;

	z-index: 100;
}

.np-header {
	display: flex;
	justify-content: space-between;
	align-items: center;

	color: rgba(255, 255, 255, 0.85);
	font-size: 0.72rem;
	margin-bottom: 0.7rem;

	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.lastfm-link {
	display: flex;
	align-items: center;
}

.lastfm-icon {
	width: 16px;
	height: 16px;

	opacity: 0.75;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.lastfm-icon:hover {
	opacity: 1;
	transform: scale(1.08);
}

.np-body {
	display: flex;
	gap: 0.8rem;
	align-items: center;
	min-width: 0;
}

.np-text {
	min-width: 0;
	flex: 1;
}

.np-marquee {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
}

#np-track {
	color: var(--blue);
	font-weight: 700;
	font-size: 0.95rem;

	display: inline-block;
	white-space: nowrap;
	will-change: transform;
}

#np-track.scrolling {
	animation: npMarquee 8s linear infinite;
}

@keyframes npMarquee {
	0% {
		transform: translateX(0);
	}

	18% {
		transform: translateX(0);
	}

	75% {
		transform: translateX(var(--scroll-distance));
	}

	100% {
		transform: translateX(0);
	}
}

#np-artist {
	color: var(--muted);
	font-size: 0.8rem;
	margin-top: 0.25rem;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#np-cover {
	width: 56px;
	height: 56px;
	object-fit: cover;

	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 8px;
}

#np-track {
	color: var(--blue);
	font-weight: 700;
	font-size: 0.95rem;
}

#np-artist {
	color: var(--muted);
	font-size: 0.8rem;
	margin-top: 0.25rem;
}
.np-status-wrap {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.np-wave {
	display: none;
	align-items: end;
	gap: 2px;

	width: 18px;
	height: 12px;
}

.np-wave span {
	display: block;

	width: 3px;
	height: 4px;

	background: var(--green);
	border-radius: 999px;

	box-shadow: 0 0 8px rgba(152, 195, 121, 0.35);

	animation: npWave 0.75s ease-in-out infinite;
}

.np-wave span:nth-child(1) {
	animation-delay: 0s;
}

.np-wave span:nth-child(2) {
	animation-delay: 0.12s;
}

.np-wave span:nth-child(3) {
	animation-delay: 0.24s;
}

.np-wave span:nth-child(4) {
	animation-delay: 0.36s;
}

.np-wave.active {
	display: flex;
}

@keyframes npWave {
	0%, 100% {
		height: 4px;
		opacity: 0.55;
	}

	50% {
		height: 12px;
		opacity: 1;
	}
}
/* ---------- Top left taskbar ---------- */

.taskbar-left {
	position: fixed;
	top: var(--edge);
	left: var(--edge);

	width: min(500px, calc(100vw - var(--panel-width) - 4rem));
	height: 50px;

	border-radius: 30px;

	display: flex;
	align-items: center;
	justify-content: flex-start;

	padding-left: 10px;
	gap: 8px;

	z-index: 100;
}

.physics-sim-icon {
	width: 80px;
	height: 80px;

	display: block;
	object-fit: contain;
	flex-shrink: 0;

	opacity: 0.8;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.physics-sim-icon:hover {
	opacity: 1;
	transform: scale(1.04);
}

/* ---------- Physics active label ---------- */
.taskbar-center {
	position: fixed;
	top: 8rem;
	right: var(--edge);

	width: var(--panel-width);
	height: auto;

	background: var(--bg-dark);
	border: 1px solid var(--accent-white);
	border-radius: 10px;

	display: flex;
	align-items: stretch;
	justify-content: center;

	padding: 0.9rem;

	box-sizing: border-box;
	box-shadow: var(--shadow), var(--glow);

	z-index: 100;
}

.playcount {
	width: 100%;

	display: flex;
	flex-direction: column;
	gap: 0.45rem;

	background: transparent;
	border: none;
	box-shadow: none;

	color: rgba(255, 255, 255, 0.85);
	font-family: var(--font-mono);
	font-size: 0.72rem;
	line-height: 1.25;

	overflow: hidden;
}

.playcount-label {
	color: rgba(255, 255, 255, 0.85);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.65rem;
	font-weight: 700;
}

.playcount-main {
	color: var(--purple);
	font-size: 0.82rem;
	font-weight: 700;
	white-space: nowrap;
}

.playcount-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.4rem;
}

.playcount-grid div {
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 6px;
	padding: 0.35rem;
}

.stat-key {
	display: block;
	color: var(--muted);
	font-size: 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.stat-value {
	display: block;
	color: rgba(255, 255, 255, 0.88);
	font-size: 0.68rem;
	margin-top: 0.15rem;
}

.stat-section {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: 0.45rem;
}

.stat-section-title {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.62rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 0.25rem;
}

.playcount-sub {
	color: var(--muted);
	font-size: 0.68rem;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* ---------- Info row / intro / timeline ---------- */

.info-row {
	position: fixed;
	left: 3rem;
	bottom: 2.5rem;

	display: flex;
	align-items: center;
	gap: 2rem;
}

.introduction {
	min-width: 260px;

	background: var(--bg-dark);
	border: 1px solid var(--accent-white);
	border-radius: 10px;

	padding: 0.75rem 1rem;

	box-shadow: var(--shadow), var(--glow);
}

.introduction p {
	margin: 0.25rem 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.85rem;
}

.vertical-divider {
	width: 1px;
	height: 115px;
	background: rgba(255, 255, 255, 0.65);
	box-shadow: 0 0 12px rgba(255, 255, 255, 0.12);
}

.project-timeline {
	width: min(650px, calc(100vw - 36rem));

	background: var(--bg-dark);
	border: 1px solid var(--accent-white);
	border-radius: 10px;

	padding: 0.9rem 1rem;

	box-shadow: var(--shadow), var(--glow);
}

.timeline-title {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.72rem;
	margin-bottom: 0.9rem;

	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.timeline-track {
	position: relative;

	display: grid;
	grid-template-columns: repeat(5, 1fr);
	align-items: start;

	width: 100%;
	padding-top: 1.2rem;
}

.timeline-line {
	position: absolute;
	top: 1.55rem;
	left: 0;
	right: 0;

	height: 1px;
	background: rgba(255, 255, 255, 0.35);
	z-index: 0;
}

.timeline-item {
	position: relative;
	z-index: 1;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;

	text-align: center;

	margin: 0;
	top: 0;
	transform: none;
}

.timeline-dot {
	width: 10px;
	height: 10px;

	background: var(--bg-dark);
	border: 1px solid var(--accent-white);
	border-radius: 50%;

	box-shadow: 0 0 12px rgba(255, 255, 255, 0.16);
}

.timeline-date {
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.78rem;
	font-weight: 700;
}

.timeline-name {
	color: var(--muted);
	font-size: 0.72rem;
	line-height: 1.3;
	max-width: 120px;
}

.timeline-item:hover .timeline-dot {
	background: var(--blue);
	border-color: var(--blue);
	box-shadow: 0 0 14px rgba(97, 175, 239, 0.5);
}

.timeline-item:hover .timeline-name {
	color: var(--text);
}

/* ---------- IP box ---------- */
.ipbox {
	position: fixed;
	top: var(--edge);
	left: 0;
	right: 0;

	width: max-content;
	min-width: 360px;
	max-width: calc(100vw - (var(--edge) * 2));
	margin-inline: auto;

	background: var(--bg-dark);
	border: 1px solid var(--accent-white);
	border-radius: 6px;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 0.25rem 0.65rem;

	box-sizing: border-box;
	box-shadow: var(--shadow), var(--glow);

	color: var(--text);
	font-size: 0.72rem;
	font-family: var(--font-mono);
	letter-spacing: 0.04em;

	z-index: 1000;
}

.ip {
	display: block;
	width: 100%;
	text-align: center;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.72rem;
	line-height: 1;
	white-space: nowrap;
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px), (max-height: 760px) {
	body {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0.85rem;
		width: 100%;
		min-height: 100dvh;
		padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
	}

	.now-playing,
	.taskbar-left,
	.taskbar-center,
	.info-row,
	.ipbox,
	.socials-card,
	.local-card {
		position: static;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		transform: none;
		width: min(100%, 720px);
		max-width: 100%;
		margin: 0 auto;
	}

	.ipbox {
		order: 1;
		min-width: 0;
		padding-block: 0.45rem;
	}

	.now-playing {
		order: 2;
	}

	.taskbar-left {
		order: 3;
		height: 48px;
		border-radius: 14px;
	}

	.taskbar-center {
		order: 4;
	}

	.info-row {
		order: 5;
		display: grid;
		grid-template-columns: 1fr;
		align-items: stretch;
		gap: 0.85rem;
	}

	.local-card {
		order: 6;
	}

	.introduction,
	.project-timeline,
	.socials-card {
		width: 100%;
		min-width: 0;
	}

	.physics-sim-icon {
		width: 64px;
		height: 64px;
	}

	.playcount-main,
	.playcount-sub,
	.ip {
		white-space: normal;
		overflow-wrap: anywhere;
		line-height: 1.35;
	}

	.vertical-divider {
		display: none;
	}
}

@media (max-width: 700px) {
	body {
		gap: 0.7rem;
	}

	.now-playing,
	.taskbar-left,
	.taskbar-center,
	.info-row,
	.ipbox,
	.socials-card,
	.local-card {
		width: 100%;
	}

	.now-playing,
	.taskbar-center,
	.introduction,
	.project-timeline,
	.socials-card,
	.local-card {
		border-radius: 8px;
		padding: 0.75rem;
	}

	.np-body {
		gap: 0.65rem;
	}

	#np-cover {
		width: 48px;
		height: 48px;
	}

	.project-timeline {
		overflow: hidden;
	}

	.timeline-track {
		display: flex;
		flex-direction: column;
		gap: 0.85rem;
		padding-top: 0;
	}

	.timeline-line {
		top: 0;
		bottom: 0;
		left: 0.33rem;
		right: auto;
		width: 1px;
		height: auto;
	}

	.timeline-item {
		display: grid;
		grid-template-columns: 0.7rem 3.25rem 1fr;
		align-items: start;
		gap: 0.55rem;
		text-align: left;
	}

	.timeline-dot {
		margin-top: 0.2rem;
	}

	.timeline-name {
		max-width: none;
	}

	.socials-list,
	.playcount-grid {
		grid-template-columns: 1fr;
	}

	#localinfo {
		white-space: pre-wrap;
		overflow-wrap: anywhere;
	}
}

@media (hover: none), (pointer: coarse) {
	* {
		cursor: auto;
	}

	#cursor,
	#cursor-dot {
		display: none;
	}
}

/* ---------- Animations ---------- */

@keyframes blink {
	50% {
		opacity: 0;
	}
}

@keyframes bootFade {
	from {
		opacity: 0;
		filter: blur(4px);
		transform: translateY(8px) scale(0.98);
	}

	to {
		opacity: 1;
		filter: blur(0);
		transform: translateY(0) scale(1);
	}
}

.introduction,
.now-playing,
.taskbar-left,
.taskbar-center,
.project-timeline,
.ipbox,
.socials-card {
	opacity: 0;
	animation: bootFade 0.75s ease forwards;
}

.introduction {
	animation-delay: 0.1s;
}

.now-playing {
	animation-delay: 0.25s;
}

.taskbar-left {
	animation-delay: 0.4s;
}

.taskbar-center {
	animation-delay: 0.4s;
}

.project-timeline {
	animation-delay: 0.55s;
}

.ipbox {
	animation-delay: 0.15s;
}
.socials-card {
	position: fixed;
	top: 28rem;
	right: var(--edge);

	width: var(--panel-width);
	height: auto;

	background: var(--bg-dark);
	border: 1px solid var(--accent-white);
	border-radius: 10px;

	padding: 0.9rem;

	box-sizing: border-box;
	box-shadow: var(--shadow), var(--glow);

	z-index: 10;
}

.socials-title {
	color: rgba(255, 255, 255, 0.85);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.65rem;
	font-weight: 700;

	margin-bottom: 0.65rem;
}

.socials-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.45rem;
}

.socials-list a {
	display: flex;
	align-items: center;
	gap: 0.4rem;

	padding: 0.45rem 0.55rem;

	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 6px;

	color: var(--text);
	font-size: 0.72rem;
	text-decoration: none;

	transition:
		border-color 0.15s ease,
		background 0.15s ease,
		color 0.15s ease,
		transform 0.15s ease;
}

.socials-list a:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--blue);
	color: var(--blue);
	transform: translateY(-1px);
}

.social-icon {
	color: var(--purple);
	font-size: 0.8rem;
	width: 1rem;
	text-align: center;
}
.local-header {
	display: flex;
	justify-content: space-between;
	align-items: center;

	margin-bottom: 0.35rem;

	color: var(--purple);
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 700;
}

.unit-toggle {
	width: 34px;
	height: 18px;

	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;

	color: rgba(255, 255, 255, 0.85);
	font-family: var(--font-mono);
	font-size: 0.62rem;
	font-weight: 700;

	cursor: pointer;

	transition:
		border-color 0.15s ease,
		background 0.15s ease,
		color 0.15s ease;
}

.unit-toggle:hover {
	background: rgba(255, 255, 255, 0.07);
	border-color: var(--blue);
	color: var(--blue);
}

.local-card {
	position: fixed;
	right: var(--edge);
	bottom: var(--edge);

	width: var(--panel-width);
	height: auto;

	background: var(--bg-dark);
	border: 1px solid var(--accent-white);
	border-radius: 10px;

	padding: 0.9rem;

	box-sizing: border-box;
	box-shadow: var(--shadow), var(--glow);

	z-index: 10;
}
.local-header {
	display: flex;
	align-items: center;
	justify-content: space-between;

	margin-bottom: 0.45rem;

	color: var(--purple);
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 700;
}

#localinfo {
	margin: 0;

	color: rgba(255, 255, 255, 0.86);
	font-family: var(--font-mono);
	font-size: 0.72rem;
	line-height: 1.55;

	white-space: pre;
}

/* Keep these final so later desktop panel rules cannot override the adaptive layout. */
@media (max-width: 1180px), (max-height: 760px) {
	.now-playing,
	.taskbar-left,
	.taskbar-center,
	.info-row,
	.ipbox,
	.socials-card,
	.local-card {
		position: static;
		top: auto;
		right: auto;
		bottom: auto;
		left: auto;
		transform: none;
		width: min(100%, 720px);
		max-width: 100%;
		margin: 0 auto;
	}

	.socials-card,
	.local-card {
		z-index: 10;
	}
}

@media (max-width: 700px) {
	.now-playing,
	.taskbar-left,
	.taskbar-center,
	.info-row,
	.ipbox,
	.socials-card,
	.local-card {
		width: 100%;
	}

	#localinfo {
		white-space: pre-wrap;
		overflow-wrap: anywhere;
	}
}