/*
 * ImperialCraft - i dati dal vivo del server (js/regno.js): voce della lista server, giocatori online,
 * numeri, grafico delle presenze, classifiche e gilde.
 */

/* ---------- stato piccolo nella barra in alto ---------- */

.barra-stato {
	display: none;
	align-items: center;
	gap: 8px;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .35);
	box-shadow: inset 0 0 0 1px rgba(212, 174, 98, .3);
	color: var(--pergamena);
	font-size: .95rem;
	text-decoration: none;
	white-space: nowrap;
}

.barra-stato:hover {
	box-shadow: inset 0 0 0 1px var(--oro);
}

@media (min-width: 1200px) {
	.barra-stato:not([hidden]) {
		display: inline-flex;
	}
}

/* ---------- la voce del server, come nella lista Multigiocatore ---------- */

.voce-server-cornice {
	margin: 0;
}

.voce-server-cornice figcaption {
	margin-bottom: 10px;
	font-family: var(--maiuscoletto);
	font-size: .98rem;
	color: var(--pergamena-2);
}

.voce-server {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	gap: 0 12px;
	align-items: start;
	padding: 8px 10px 8px 8px;
	background: rgba(0, 0, 0, .62);
	box-shadow: inset 0 0 0 2px #a0a0a0, 0 8px 24px rgba(0, 0, 0, .5);
	font-family: 'VT323', 'Courier New', monospace;
	font-size: 21px;
	line-height: 1.05;
	color: #fff;
	text-align: left;
}

.voce-server img {
	width: 64px;
	height: 64px;
	image-rendering: pixelated;
}

.voce-server .vuota {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	background: #2a2a2a;
}

.voce-nome {
	display: block;
	margin: 1px 0 3px;
	color: #fff;
	text-shadow: 2px 2px 0 #3f3f3f;
}

.voce-motd {
	margin: 0;
	white-space: pre-line;
	color: #aaa;
}

.voce-motd span {
	text-shadow: 2px 2px 0 rgba(0, 0, 0, .55);
}

.voce-destra {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #aaa;
	text-shadow: 2px 2px 0 #2a2a2a;
	white-space: nowrap;
}

.voce-destra b {
	font-weight: 400;
	color: #fff;
}

.tacche {
	display: inline-flex;
	align-items: flex-end;
	gap: 1px;
	height: 14px;
}

.tacche i {
	width: 3px;
	background: #00e01b;
	box-shadow: 1px 1px 0 #003a07;
}

.tacche i:nth-child(1) { height: 30%; }
.tacche i:nth-child(2) { height: 45%; }
.tacche i:nth-child(3) { height: 62%; }
.tacche i:nth-child(4) { height: 80%; }
.tacche i:nth-child(5) { height: 100%; }

.voce-server.spenta .tacche i {
	background: #5a5a5a;
	box-shadow: none;
}

.voce-server.spenta .voce-motd {
	color: #c05050;
}

/* ---------- numeri del regno ---------- */

.numeri-regno {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.numero {
	padding: 16px 16px 14px;
	background: linear-gradient(180deg, var(--cuoio-2), var(--cuoio));
	box-shadow: var(--cornice);
}

.numero .icona {
	width: 22px;
	height: 22px;
	color: var(--oro);
}

.numero strong {
	display: block;
	margin-top: 6px;
	font-family: var(--gotico);
	font-size: 2.4rem;
	font-weight: 800;
	line-height: 1;
	color: var(--oro-luce);
}

.numero span {
	font-size: .95rem;
	color: var(--pergamena-2);
}

/* ---------- giocatori online ---------- */

.regno-griglia {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

.online-titolo {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	font-size: 1.8rem;
}

.online-titolo .stato-punto {
	flex: none;
}

.giocatori {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.giocatore {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	padding: 12px 14px;
	background: linear-gradient(90deg, rgba(212, 174, 98, .09), rgba(212, 174, 98, .02));
	box-shadow: inset 0 0 0 1px rgba(212, 174, 98, .22);
	animation: entrata .6s cubic-bezier(.2, .8, .2, 1) both;
}

.volto {
	width: 44px;
	height: 44px;
	border-radius: 3px;
	image-rendering: pixelated;
	box-shadow: 0 0 0 2px var(--oro), 0 3px 8px rgba(0, 0, 0, .5);
	background: #2a1d14;
}

span.volto {
	display: grid;
	place-items: center;
	font-family: var(--gotico);
	font-size: 1.4rem;
	color: var(--oro-luce);
}

.giocatore strong {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 1.08rem;
	color: var(--pergamena);
}

.giocatore-info {
	display: block;
	font-size: .92rem;
	color: var(--pergamena-2);
}

.giocatore-info b {
	font-family: var(--maiuscoletto);
	color: var(--oro);
}

.giocatore-zona {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: .9rem;
	color: var(--pergamena-2);
}

.giocatore-zona .icona {
	width: 15px;
	height: 15px;
	color: var(--oro);
}

/* 13 tacche: i capitoli della storia completati */
.tacche-storia {
	display: flex;
	gap: 2px;
	margin-top: 6px;
}

.tacche-storia i {
	flex: 1;
	height: 4px;
	border-radius: 1px;
	background: rgba(212, 174, 98, .16);
}

.tacche-storia i.fatto {
	background: linear-gradient(90deg, var(--oro-scuro), var(--oro-luce));
}

.vuoto {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0;
	padding: 18px 20px;
	background: rgba(0, 0, 0, .25);
	box-shadow: inset 0 0 0 1px rgba(212, 174, 98, .18);
	font-style: italic;
	color: var(--pergamena-2);
}

.vuoto .icona {
	width: 24px;
	height: 24px;
	color: var(--oro);
}

/* ---------- grafico delle presenze ---------- */

.grafico {
	position: relative;
	margin: 0;
	padding: 18px 18px 12px;
	background: linear-gradient(180deg, var(--cuoio-2), var(--cuoio));
	box-shadow: var(--cornice);
}

.grafico h3 {
	margin: 0 0 4px;
	font-size: 1.6rem;
}

.grafico-sotto {
	margin: 0 0 12px;
	font-size: .95rem;
	color: var(--pergamena-2);
}

.grafico-area {
	position: relative;
	height: 220px;
}

.grafico svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.grafico .griglia line {
	stroke: rgba(212, 174, 98, .12);
	stroke-width: 1;
}

.grafico .assi text {
	fill: var(--pergamena-3);
	font-family: var(--testo);
	font-size: 12px;
}

.grafico .linea {
	fill: none;
	stroke: var(--oro-luce);
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.grafico .riempi {
	fill: url(#sfumatura-presenze);
}

.grafico .mirino {
	stroke: var(--pergamena-2);
	stroke-width: 1;
	stroke-dasharray: 3 3;
}

.grafico .punto {
	fill: var(--oro-luce);
	stroke: var(--cuoio);
	stroke-width: 2;
}

.grafico-suggerimento {
	position: absolute;
	z-index: 2;
	top: 0;
	padding: 6px 10px;
	border-radius: 3px;
	background: rgba(14, 9, 6, .95);
	box-shadow: inset 0 0 0 1px rgba(212, 174, 98, .45), 0 4px 12px rgba(0, 0, 0, .5);
	font-size: .92rem;
	white-space: nowrap;
	pointer-events: none;
	transform: translateX(-50%);
}

.grafico-suggerimento b {
	color: var(--oro-luce);
}

/* ---------- classifiche ---------- */

.classifiche {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

.classifica {
	padding: 24px 22px 18px;
	background: linear-gradient(180deg, var(--cuoio-2), var(--cuoio));
	box-shadow: var(--cornice), var(--ombra);
}

.classifica h3 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 4px;
	font-size: 1.8rem;
}

.classifica h3 .icona {
	width: 28px;
	height: 28px;
	color: var(--oro);
}

.classifica > p {
	margin: 0 0 14px;
	font-size: .95rem;
	color: var(--pergamena-2);
}

.classifica ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.riga-classifica {
	display: grid;
	grid-template-columns: 30px 30px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
	padding: 8px 4px;
	border-bottom: 1px solid rgba(212, 174, 98, .12);
	animation: entrata .5s cubic-bezier(.2, .8, .2, 1) both;
}

.riga-classifica:last-child {
	border-bottom: 0;
}

.posto {
	display: grid;
	place-items: center;
	width: 28px;
	height: 32px;
	padding-bottom: 4px;
	clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
	background: rgba(212, 174, 98, .14);
	font-family: var(--gotico);
	font-weight: 800;
	font-size: 1rem;
	color: var(--pergamena-2);
}

.riga-classifica:nth-child(1) .posto {
	background: linear-gradient(180deg, #f6dc8c, #b8892e);
	color: #3a2808;
}

.riga-classifica:nth-child(2) .posto {
	background: linear-gradient(180deg, #e6e8ee, #9aa0ad);
	color: #2a2d33;
}

.riga-classifica:nth-child(3) .posto {
	background: linear-gradient(180deg, #e3a877, #9a5a2c);
	color: #3a1e08;
}

.riga-classifica .volto {
	width: 30px;
	height: 30px;
	box-shadow: 0 0 0 1px rgba(212, 174, 98, .6);
}

.riga-classifica span.volto {
	font-size: 1rem;
}

.riga-nome {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--pergamena);
}

.riga-nome small {
	display: block;
	font-size: .82rem;
	color: var(--pergamena-3);
}

.riga-valore {
	font-family: var(--maiuscoletto);
	font-weight: 700;
	color: var(--oro-luce);
	white-space: nowrap;
}

/* ---------- gilde ---------- */

.gilde {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gilda {
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	padding: 18px 16px;
	background: linear-gradient(180deg, var(--cuoio-2), var(--cuoio));
	box-shadow: var(--cornice);
	animation: entrata .5s cubic-bezier(.2, .8, .2, 1) both;
}

.gilda-stendardo {
	display: grid;
	place-items: center;
	height: 72px;
	padding-bottom: 14px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
	background:
		linear-gradient(90deg, transparent 40%, rgba(233, 220, 192, .2) 40% 60%, transparent 60%),
		linear-gradient(180deg, hsl(var(--tono, 0) 55% 34%), hsl(var(--tono, 0) 60% 20%));
	box-shadow: inset 0 0 0 2px rgba(212, 174, 98, .7);
	font-family: var(--gotico);
	font-weight: 800;
	font-size: .9rem;
	color: var(--oro-luce);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
	writing-mode: vertical-rl;
	text-orientation: upright;
	letter-spacing: -.1em;
}

.gilda h4 {
	margin: 0 0 4px;
	font-size: 1.4rem;
}

.gilda p {
	margin: 0;
	font-size: .95rem;
	color: var(--pergamena-2);
}

@media (max-width: 960px) {
	.regno-griglia {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.voce-server {
		grid-template-columns: 48px minmax(0, 1fr);
		font-size: 18px;
	}

	.voce-server img,
	.voce-server .vuota {
		width: 48px;
		height: 48px;
	}

	.voce-destra {
		grid-column: 2;
		margin-top: 4px;
	}
}

.barra-stato.spento .stato-punto {
	background: #c0574a;
}