/* Copyright 2026 davenonymous
 *
 * The server card of public/js/server-card.js, on the home page and the
 * admin pages: plan, scoreboard, players and connect links.
 */

/* ------------------------------------------------------------- server grid */

.server-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr));
	gap: clamp(16px, 2vw, 28px);
	align-items: start;
}

.server-card {
	display: flex; flex-direction: column;
	background: linear-gradient(180deg, var(--surface-2), var(--surface-1) 60%);
	border: 1px solid var(--edge-soft);
	border-radius: var(--radius-l);
	box-shadow: var(--shadow);
	overflow: hidden;
	min-width: 0;
}

.server-card__head {
	display: flex; align-items: center; gap: 12px;
	padding: 14px 18px;
	background:
		linear-gradient(180deg, rgba(70, 58, 49, 0.9), rgba(42, 35, 30, 0.95)),
		var(--texture-metal);
	background-size: auto, 256px 256px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
.server-card__title { min-width: 0; flex: 1; }
.server-card__name {
	font-family: var(--font-display); font-size: 1.35rem; letter-spacing: 0.04em; text-transform: uppercase;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55);
}
.server-card__meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; color: var(--text-muted); font-size: 0.88rem; }
.server-card__meta .sep { color: var(--text-dim); }
.server-card__count {
	display: inline-flex; align-items: center; gap: 6px; flex: none;
	padding: 4px 10px; border-radius: var(--radius-s);
	background: rgba(0, 0, 0, 0.28); border: 1px solid var(--edge-soft);
	font-variant-numeric: tabular-nums; font-size: 0.95rem;
}
.server-card__lock { color: var(--gold); }

/* the plan */
.server-card__plan {
	position: relative;
	aspect-ratio: 16 / 10;
	background:
		radial-gradient(90% 80% at 50% 45%, rgba(87, 72, 60, 0.55), rgba(21, 17, 15, 0.2) 70%),
		repeating-linear-gradient(0deg, rgba(236, 227, 203, 0.035) 0 1px, transparent 1px 32px),
		repeating-linear-gradient(90deg, rgba(236, 227, 203, 0.035) 0 1px, transparent 1px 32px),
		var(--surface-1);
	border-bottom: 1px solid rgba(0, 0, 0, 0.45);
	overflow: hidden;
}
.server-card__plan plan-view { position: absolute; inset: 0; }
.plan-chip {
	position: absolute; left: 12px; bottom: 12px; z-index: 2;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 10px; border-radius: var(--radius-s);
	background: rgba(21, 17, 15, 0.82); border: 1px solid var(--edge-soft);
	font-size: 0.88rem; color: var(--text); backdrop-filter: blur(4px);
	pointer-events: none;
}
.plan-controls {
	position: absolute; right: 12px; top: 12px; z-index: 2;
	display: flex; flex-direction: column; gap: 1px;
	border-radius: var(--radius-s); overflow: hidden; box-shadow: var(--shadow-s);
}
.plan-controls button {
	width: 34px; height: 34px; display: grid; place-items: center;
	color: var(--text); background: rgba(42, 35, 30, 0.92); border: 0; cursor: pointer;
}
.plan-controls button:hover { background: var(--surface-4); }
.plan-hint {
	position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
	background: rgba(21, 17, 15, 0.55); color: var(--text); font-size: 1rem;
	opacity: 0; transition: opacity 200ms ease; pointer-events: none;
}
.plan-hint.is-shown { opacity: 1; }
.plan-message {
	position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px;
	color: var(--text-dim); font-family: var(--font-hand); font-size: 1.15rem;
}

/* offline */
.server-card--offline .server-card__plan { display: grid; place-items: center; }
.server-offline { display: grid; justify-items: center; gap: 4px; padding: 16px; text-align: center; }
.server-offline img { width: min(220px, 50%); height: auto; opacity: 0.9; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5)); }
.server-offline strong { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); }
.server-offline span { color: var(--text-muted); font-size: 0.92rem; }

/* scoreboard */
.scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; border-bottom: 1px solid rgba(0, 0, 0, 0.45); }
.scoreboard__team {
	display: flex; align-items: center; gap: 12px; padding: 10px 18px;
	font-family: var(--font-display); letter-spacing: 0.06em;
}
.scoreboard__team--red { background: linear-gradient(90deg, rgba(184, 56, 59, 0.55), rgba(184, 56, 59, 0.12)); }
.scoreboard__team--blu { background: linear-gradient(270deg, rgba(88, 133, 162, 0.55), rgba(88, 133, 162, 0.12)); justify-content: flex-end; }
.scoreboard__label { font-size: 1.05rem; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }
.scoreboard__score { font-size: 2.1rem; line-height: 1; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.55); font-variant-numeric: tabular-nums; }
.scoreboard__middle {
	display: grid; justify-items: center; align-content: center; gap: 2px;
	min-width: 132px; padding: 8px 14px; background: rgba(0, 0, 0, 0.3);
	border-inline: 1px solid rgba(0, 0, 0, 0.4);
}
.scoreboard__clock { font-family: var(--font-display); font-size: 1.45rem; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.scoreboard__state { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.scoreboard--plain { grid-template-columns: 1fr; }
.scoreboard--plain .scoreboard__middle { border: 0; background: rgba(0, 0, 0, 0.22); grid-auto-flow: column; justify-content: center; align-items: baseline; gap: 14px; }

/* the teams' players */
.rosters { display: grid; grid-template-columns: 1fr 1fr; }
.roster-column { min-width: 0; padding: 10px 0 12px; }
.roster-column--red { background: linear-gradient(180deg, var(--red-soft), transparent 70%); border-right: 1px solid rgba(0, 0, 0, 0.35); }
.roster-column--blu { background: linear-gradient(180deg, var(--blu-soft), transparent 70%); }
.roster-column__head {
	display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
	padding: 0 16px 6px; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted);
}
.roster-column--red .roster-column__head strong { color: var(--red-bright); }
.roster-column--blu .roster-column__head strong { color: var(--blu-bright); }
.players { list-style: none; margin: 0; padding: 0; }
.player {
	display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px;
	padding: 4px 16px; min-height: 30px; font-size: 0.95rem;
}
.player:nth-child(even) { background: rgba(0, 0, 0, 0.12); }
.player__class { width: 22px; height: 22px; display: grid; place-items: center; }
.player__class img { width: 22px; height: 22px; display: block; }
.player__class-text { font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); }
.player__name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__score { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.player__bot { margin-left: 6px; font-size: 0.66rem; letter-spacing: 0.08em; padding: 0 5px; border-radius: 3px; color: var(--text-dim); border: 1px solid var(--edge); vertical-align: 1px; }
.player--dead .player__name, .player--dead .player__class { opacity: 0.45; }
.player--dead .player__name { text-decoration: line-through; text-decoration-color: rgba(236, 227, 203, 0.35); }
.players__empty { padding: 4px 16px; color: var(--text-dim); font-style: italic; font-size: 0.92rem; }

.spectators { padding: 8px 18px; font-size: 0.88rem; color: var(--text-muted); border-top: 1px solid rgba(0, 0, 0, 0.3); }
.spectators strong { font-weight: normal; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.78rem; margin-right: 6px; color: var(--text-dim); }

.server-card__foot {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	margin-top: auto; padding: 12px 18px;
	background: rgba(0, 0, 0, 0.28); border-top: 1px solid rgba(0, 0, 0, 0.45);
	box-shadow: 0 1px 0 var(--edge-soft) inset;
}
.server-card__foot .note { margin-left: auto; font-size: 0.82rem; color: var(--text-dim); }

.server-card--loading .server-card__plan { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.6; } }

@media (max-width: 560px) {
	.rosters { grid-template-columns: 1fr; }
	.roster-column--red { border-right: 0; }
	.scoreboard__team { padding: 10px 12px; }
	.scoreboard__middle { min-width: 104px; padding: 8px; }
	.scoreboard__score { font-size: 1.7rem; }
	.server-card__head, .server-card__foot { padding-inline: 14px; }
	.server-card__name { white-space: normal; font-size: 1.2rem; }
	.server-card__foot .btn { flex: 1; }
	.server-card__foot .note { width: 100%; margin-left: 0; text-align: center; }
}