:root{
	--accent: #6A1E55;
	--bg: #1A1A1D;
	--surface: rgba(255,255,255,0.02);
	--text: #E6E6E6;
	--muted: #BDBDBD;
	--radius: 10px;
	--container-width: 900px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	background:var(--bg);
	color:var(--text);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	line-height:1.45;
}

.page-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:40px 20px}
.site-header{margin-bottom:18px;text-align:center}
.site-title{margin:0;font-weight:800;letter-spacing:-0.02em}
.site-sub{margin:6px 0 0;color:var(--muted);font-weight:300}

.container{width:100%;max-width:var(--container-width);display:flex;flex-direction:column;gap:20px;align-items:center}

.card{
	width:100%;
	border-radius:var(--radius);
	padding:18px;
	background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
	border:1px solid rgba(106,30,85,0.12);
	box-shadow: 0 2px 8px rgba(0,0,0,0.4);
	transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{transform:translateY(-6px);box-shadow:0 8px 28px rgba(106,30,85,0.12);border-color:var(--accent)}

.card h2{margin:0 0 10px 0;font-size:1.1rem}
.card p{margin:0 0 12px 0}
.muted{color:var(--muted);font-size:0.95rem}

.peripherals .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.item{border-radius:8px;padding:12px;border:1px solid rgba(255,255,255,0.02);background:transparent;display:flex;flex-direction:column}
.item h3{margin:0 0 6px 0;font-size:1rem}
.desc{margin:0 0 10px 0;color:var(--muted);font-size:0.95rem}

.link-btn{display:inline-block;padding:8px 10px;border-radius:8px;border:1px solid var(--accent);color:var(--accent);background:transparent;text-decoration:none;font-weight:600;transition:all .14s ease;margin-top:auto}
.link-btn:hover,.link-btn:focus{background:var(--accent);color:#fff;box-shadow:0 6px 18px rgba(106,30,85,0.18);transform:translateY(-2px)}

.links-list{list-style:none;padding:0;margin:0;display:flex;gap:12px;flex-wrap:wrap}
.links-list a{color:var(--text);text-decoration:underline;color:var(--muted)}
.links-list a:hover{color:var(--accent);text-decoration:none}

.site-footer{margin-top:26px;color:var(--muted);font-size:0.9rem;text-align:center}

@media (max-width:640px){
	.page-wrap{padding:28px 14px}
	.card{padding:14px}
}

/* About header: avatar, name, flags */
.about-header{display:flex;gap:14px;align-items:center;margin-bottom:10px}
.avatar{width:96px;height:96px;border-radius:12px;object-fit:cover;border:2px solid rgba(255,255,255,0.04);background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));}
.about-meta{min-width:0}
.about-name{margin:0;font-size:1.25rem;line-height:1}
.flags{display:flex;gap:8px;margin-top:6px;align-items:center}
.flag{font-size:1.25rem;display:inline-flex;align-items:center}
.flag-img{width:36px;height:24px;display:inline-block;object-fit:cover;border-radius:4px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 2px 6px rgba(0,0,0,0.45);transition:transform .12s ease, box-shadow .12s ease}
.flag-img:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(106,30,85,0.14)}
.tagline{margin:6px 0 0 0}

/* Lanyard / Discord status */
#discord-status{display:flex;align-items:center;gap:10px}
#discord-status .status-dot{width:10px;height:10px;border-radius:50%;display:inline-block;box-shadow:0 2px 8px rgba(0,0,0,0.6)}
#discord-status .status-online{background:#3BA55D}
#discord-status .status-idle{background:#FAA61A}
#discord-status .status-dnd{background:#ED4245}
#discord-status .status-offline{background:rgba(255,255,255,0.06)}
#discord-status .small{color:var(--muted);font-size:0.95rem}


@media (max-width:520px){
	.about-header{flex-direction:row;align-items:flex-start}
	.avatar{width:72px;height:72px}
	.about-name{font-size:1.05rem}
}

@media (max-width:420px){
	.flag-img{width:28px;height:18px}
}

/* View / extra action panel */
.view-wrap{display:flex;flex-direction:column;gap:8px}
.extra-actions{overflow:hidden;max-height:0;transition:max-height .18s ease,opacity .12s ease;padding:0}
.extra-actions[hidden]{display:block} /* we control visibility via max-height and hidden attr in JS */
.extra-actions.open{max-height:160px;padding-top:6px}
.small-action{display:inline-block;padding:6px 8px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--muted);text-decoration:none;font-size:0.9rem;margin-right:8px;transition:all .12s ease}
.small-action:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}





/* PC specs styles */
.specs-list{margin:12px 0 0 0;padding:0;display:grid;grid-template-columns:1fr 2fr;gap:8px 18px;align-items:start}
.spec-row{display:contents}
.specs-list dt{font-weight:700;color:var(--text);}
.specs-list dd{margin:0;color:var(--muted);}

@media (max-width:640px){
	.specs-list{grid-template-columns:1fr;}
}