@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Oswald:wght@500;600;700&display=swap');

:root{
	--bg0:#07080a;
	--bg1:#0d1015;
	--panel:#10141b;
	--panel2:#0f131a;
	--border:rgba(255,255,255,.08);
	--text:#e8e9ec;
	--muted:#a3a7b0;
	--muted2:#7e8593;

	/* ValoLock brand palette — Valorant red */
	--valorant-red:#ff4655;
	--valorant-red-dark:#d63848;
	--valorant-blue:#12A09F;
	--accent:#ff4655;

	--font-display: "Tungsten", "Oswald", "Bebas Neue", "Impact", sans-serif;
	--font-body: "Inter", "Segoe UI", Roboto, Arial, sans-serif;

	--shadow: 0 10px 30px rgba(0,0,0,.35);
	--radius: 16px;
	--radius2: 22px;
}

*{ box-sizing:border-box; }
/* Moving the gradient to html (root element) keeps it painted on the
   canvas, which prevents background-attachment:fixed on a non-root
   element from creating a GPU compositing layer that breaks
   position:fixed on descendant elements in Chromium and Safari. */
html{
	min-height:100vh;
	background:
		radial-gradient(350px 350px at 0% 0%, rgba(18,160,159,.05), transparent 70%),
		radial-gradient(350px 350px at 100% 100%, rgba(255,70,85,.06), transparent 70%),
		linear-gradient(180deg, var(--bg0), var(--bg1));
	background-repeat: no-repeat;
	background-size: cover;
}
body{
	position: relative;
	min-height:100vh;
	margin:0;
	color:var(--text);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, .page-title, .card-title, .brand-name{
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.app-shell{
	min-height:100%;
	display:flex;
	flex-direction:row;
}

.topbar{
	position:absolute;
	top:0;
	left:0;
	right:0;
	display:flex;
	align-items:center;
	justify-content:flex-end;
	padding:12px 18px;
	width:100%;
	pointer-events: none;
	background: transparent;
	box-sizing: border-box;
	height: 64px;
}
.brand{
	position: absolute;
	top: 0;
	left: 110px;
	height: 64px;
	display:flex;
	gap:12px;
	align-items:center;
	pointer-events: auto;
}
.brand-name{ font-weight: 800; font-size: 20px; letter-spacing: 0px; color: var(--text); }
.brand-sub{ color:var(--muted); font-size:12px; margin-top:2px; }

.topbar-right{ display:flex; gap:12px; align-items:center; pointer-events: auto; }
.user-pill{
	border:1px solid var(--border);
	background: rgba(255,255,255,.03);
	padding:8px 12px;
	border-radius:999px;
	font-size:13px;
}
.muted{ color:var(--muted); }
.muted.small{ font-size:12px; }
.strong{ font-weight:700; }

.icon-btn{
	border:1px solid var(--border);
	background: rgba(255,255,255,.03);
	color:var(--text);
	border-radius:999px;
	padding:8px 12px;
	cursor:pointer;
}

.content{
	flex:1;
	padding: 72px 14px 20px 100px;
	max-width: 100%;
	width:100%;
	margin:0 auto;
}

.page-title{
	margin: 6px 0 16px;
	font-size: 28px;
	letter-spacing:.2px;
}

.grid{
	display:grid;
	grid-template-columns: repeat(2, minmax(0,1fr));
	gap: 14px;
}
.span-2{ grid-column: span 2; }

@media (max-width: 900px){
	.grid{ grid-template-columns: 1fr; }
	.span-2{ grid-column: auto; }
}

.card{
	border:1px solid var(--border);
	background: rgba(255,255,255,.03);
	border-radius: var(--radius2);
	box-shadow: var(--shadow);
	padding:16px;
}
.card-title{
	margin:0 0 12px;
	font-size:14px;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--muted);
}

.rank-row{ display:flex; align-items:flex-start; justify-content:space-between; gap: 16px; flex-wrap:wrap; }
.rank-ticker{ color:var(--muted); font-size:12px; }
.rank-value{ font-size:18px; font-weight:800; }
.rank-delta{
	margin-top:6px;
	font-size:12px;
	padding: 6px 10px;
	border-radius:999px;
	border:1px solid var(--border);
	background: rgba(255,255,255,.02);
}
.rank-delta.pos{ color: #7CFFB2; border-color: rgba(124,255,178,.35); }
.rank-delta.neg{ color: #FF8A8A; border-color: rgba(255,138,138,.35); }

.kda{ display:flex; gap:14px; flex-wrap:wrap; }
.kda-item{ flex: 1; min-width: 140px; padding: 10px 12px; border-radius: 14px; border:1px solid var(--border); background: rgba(0,0,0,.10); }
.kda-label{ color:var(--muted); font-size:12px; }
.kda-value{ font-size:20px; font-weight:800; }

.table{ width:100%; border-collapse: collapse; }
.table th{ text-align:left; color:var(--muted); font-weight:600; font-size:12px; padding: 10px 8px; border-bottom:1px solid var(--border); }
.table td{ padding: 12px 8px; border-bottom:1px solid rgba(255,255,255,.05); }
.table .win{ color:#7CFFB2; font-weight:800; }
.table .loss{ color:#FF8A8A; font-weight:800; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
	border:1px solid var(--border);
	background: rgba(255,255,255,.02);
	padding: 8px 10px;
	border-radius:999px;
	font-size:13px;
}

.bottombar{
	position:fixed;
	left:0; top:0; bottom:0;
	z-index:20;
	display:flex;
	flex-direction: column;
	justify-content:center;
	align-items: center;
	padding: 20px 10px;
	gap: 20px;
	background: transparent;
	border-right: 1px solid var(--border);
	width: 80px;
}
.tab{
	color: var(--muted);
	text-decoration:none;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content: center;
	gap:6px;
	width: 100%;
	padding: 15px 0;
	border-radius: 14px;
	border: 1px solid transparent;
	transition: all .15s ease;
}
.tab:hover{
	border-color: rgba(255,255,255,.10);
	color: var(--text);
	background: rgba(255,255,255,.03);
}
.tab-label{ font-size:12px; font-weight:650; }
.tab-icon{ font-size:16px; }

/* Accordion styling */
.accordion{ display:flex; flex-direction:column; gap: 10px; }
.acc-item{
	border:1px solid var(--border);
	border-radius: var(--radius2);
	background: rgba(255,255,255,.03);
	padding: 0;
	overflow:hidden;
}
.acc-summary{
	list-style:none;
	cursor:pointer;
	padding: 14px 16px;
	color: var(--text);
	font-weight:750;
	background: rgba(0,0,0,.14);
}
.acc-summary::-webkit-details-marker{ display:none; }
.acc-body{ padding: 14px 16px 16px; }

.subgrid{
	display:grid;
	grid-template-columns: repeat(2, minmax(0,1fr));
	gap: 12px;
}
@media (max-width: 900px){
	.subgrid{ grid-template-columns: 1fr; }
}
.subcard{ border:1px solid var(--border); border-radius: 14px; padding: 12px; background: rgba(0,0,0,.10); }
.subcard-title{ font-weight:800; margin-bottom: 8px; }

.list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 8px; }
.list-item{ display:flex; align-items:center; gap: 10px; padding: 8px 10px; border-radius: 12px; border:1px solid var(--border); background: rgba(255,255,255,.02); }
.bullet{ width: 20px; display:inline-flex; align-items:center; justify-content:center; border-radius: 999px; background: rgba(255,255,255,.06); }
.bullet.done{ background: rgba(124,255,178,.14); border:1px solid rgba(124,255,178,.35); color:#7CFFB2; }
.right{ margin-left:auto; }

.stack{ display:flex; flex-direction:column; }

.mission-card {
	border: 1px solid var(--border);
	background: rgba(255,255,255,.03);
	border-radius: 14px;
	padding: 14px;
	display: flex;
	flex-direction: column;
}

.progress-bar {
	background: rgba(0,0,0,.25);
	border-radius: 999px;
	height: 6px;
	width: 100%;
	overflow: hidden;
	margin-top: 8px;
	box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
}

.progress-fill {
	background: #7CFFB2;
	height: 100%;
	border-radius: 999px;
	transition: width 0.3s ease;
}

.row{ display:flex; align-items:center; justify-content:space-between; gap: 12px; margin: 8px 0; flex-wrap:wrap; }
.pill-pill{
	border:1px solid var(--border);
	background: rgba(255,255,255,.02);
	padding: 6px 10px;
	border-radius:999px;
	color: var(--muted);
	font-weight:700;
	font-size:12px;
}

.login-form{ display:flex; flex-direction:column; gap: 12px; margin-top: 4px; }
.field{ display:flex; flex-direction:column; gap: 8px; }
.label{ color: var(--muted); font-size: 12px; font-weight: 650; }
.input{
	padding: 12px 12px;
	border-radius: 14px;
	border: 1px solid var(--border);
	background: rgba(0,0,0,.10);
	color: var(--text);
	outline:none;
}
.input:focus{ border-color: rgba(255,70,85,.55); box-shadow: 0 0 0 3px rgba(255,70,85,.12); }

.btn{
	border-radius: 14px;
	border: 1px solid var(--border);
	padding: 12px 14px;
	cursor:pointer;
	font-weight:800;
	letter-spacing:.2px;
	background: rgba(255,255,255,.03);
	color: var(--text);
	transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:hover{ border-color: rgba(255,255,255,.18); }
.btn-primary{
	border-color: var(--valorant-red);
	background: var(--valorant-red);
	color: #ffffff;
}
.btn-primary:hover{
	background: var(--valorant-red-dark);
	border-color: var(--valorant-red-dark);
}
.btn-danger{ border-color: rgba(255,138,138,.35); background: rgba(255,138,138,.12); color: var(--text); }
.btn-danger:hover{ border-color: rgba(255,138,138,.6); background: rgba(255,138,138,.18); }

.tab.active, a.tab.active{
	color: var(--text);
	border-color: rgba(255,70,85,.45);
	background: rgba(255,70,85,.10);
}

/* Links styled as chips (used in Go templates) */
a.chip{
	text-decoration:none;
	color:inherit;
	display:inline-flex;
	align-items:center;
}

/* Agent detail page */
.agent-hero{
	display:flex;
	align-items:center;
	gap: 14px;
}
.agent-portrait img{
	width: 96px;
	height: 96px;
	border-radius: 22px;
	object-fit: cover;
	border: 1px solid var(--border);
}
.agent-role{ margin-bottom: 8px; }
.agent-tags{ margin-top: 6px; }

/* Abilities */
.abilities{ display:flex; flex-direction:column; gap: 10px; }
.ability-card{
	border: 1px solid var(--border);
	border-radius: 18px;
	background: rgba(0,0,0,.10);
	padding: 12px;
}
.ability-header{
	display:flex;
	gap: 12px;
	align-items:center;
}
.ability-icon{
	width: 44px;
	height: 44px;
	border-radius: 14px;
	object-fit: cover;
	border: 1px solid var(--border);
}
.ability-icon.placeholder{
	background: rgba(255,255,255,.03);
}

/* Weapon detail page */
.weapon-hero{
	display:flex;
	gap: 16px;
	align-items:flex-start;
}
.weapon-image img{
	width: 100%;
	max-width: 460px;
	height: auto;
	border-radius: 22px;
	border: 1px solid var(--border);
}
.weapon-meta{ min-width: 200px; }

.skins-grid{
	display:grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}
@media (max-width: 520px){
	.skins-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.skin-tile{
	border: 1px solid var(--border);
	border-radius: 18px;
	background: rgba(0,0,0,.10);
	padding: 10px;
	text-decoration:none;
	color: inherit;
	display:flex;
	flex-direction:column;
	gap: 8px;
	align-items:center;
	transition: transform .12s ease;
}
.skin-tile:hover{ transform: translateY(-1px); }
.skin-tile img{
	width: 100%;
	height: 70px;
	object-fit: contain;
	border-radius: 14px;
	background: rgba(255,255,255,.02);
}
.skin-name{ font-size: 12px; color: var(--muted); text-align:center; }

.chromas-grid{
	display:grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}
@media (max-width: 520px){
	.chromas-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.chroma-tile{
	border: 1px solid var(--border);
	border-radius: 18px;
	background: rgba(0,0,0,.10);
	padding: 10px;
	display:flex;
	flex-direction:column;
	gap: 8px;
	align-items:center;
}
.chroma-tile img{
	width: 100%;
	height: 60px;
	object-fit: contain;
	border-radius: 14px;
	background: rgba(255,255,255,.02);
}
.chroma-name{
	font-size: 12px;
	color: var(--muted);
	text-align:center;
}