/* v54.1 result recap (recap.js): your numbers as tiles, the match's top four as awards. Only on a 5v5 card that recap.js filled (#result.team.recap);
   otherwise the plain lines (#result-best, #result-build) stay. Gold marks only you, as on the floor. The route rows go 2×2 to make room, so the
   whole card fits a 360×740 or 375×667 phone and a short landscape one with REMATCH on screen. */
#result:not(.team.recap) #result-kpis,
#result:not(.team.recap) #result-awards {
	display: none;
}
#result.team.recap #result-best,
#result.team.recap #result-build {
	display: none;
}
#result.team.recap #result-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 8px;
	margin: 6px 0 4px;
	font-size: 13px;
	line-height: 1.55;
}
#result.team.recap .team-row {
	grid-template-columns: auto 1fr 0.8em 1fr;
	max-width: none;
	padding: 0 6px;
}
#result.team.recap .team-row span {
	text-align: left;
}
#result-kpis .kpi-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 4px;
	margin-top: 6px;
}
#result-kpis .kpi {
	min-width: 0;
	padding: 4px 1px 3px;
	border: 1px solid #6d9a9455;
	border-radius: 9px;
	background: #06151d99;
}
#result-kpis .kpi b {
	display: block;
	font: 900 19px/1.15 system-ui;
	color: #f6f0d6;
}
#result-kpis .kpi[data-kpi='kos'] b,
#result-kpis .kpi[data-kpi='kd'] b {
	color: #9bffe3;
}
#result-kpis .kpi span {
	font-size: 10px;
	font-weight: 800;
	color: #9fc2bb;
	white-space: nowrap;
}
#result-kpis .kpi-more {
	margin: 4px 0 6px;
	font-size: 12px;
	color: #9fc2bb;
}
#result-awards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 5px;
	margin: 0 0 8px;
}
#result-awards .award {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	padding: 2px 7px 2px 2px;
	border: 2px solid var(--c);
	border-radius: 12px;
	background: #06151dcc;
	text-align: left;
}
#result-awards .award.me {
	box-shadow: 0 0 0 2px #ffcf4d;
}
#result-awards canvas {
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #0b2330;
}
#result-awards .aw {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.15;
}
#result-awards .aw small {
	font-size: 10px;
	font-weight: 900;
	color: var(--c);
}
#result-awards .aw strong {
	overflow: hidden;
	font-size: 12px;
	white-space: nowrap;
	text-overflow: ellipsis;
}
#result-awards .you {
	flex: none;
	padding: 0 5px;
	border-radius: 999px;
	background: #ffcf4d;
	color: #07171f;
	font: 900 10px/16px system-ui;
	font-style: normal;
}
#result-awards .award > b {
	margin-left: auto;
	padding-left: 4px;
	font: 900 15px system-ui;
	color: #f6f0d6;
}
/* A short landscape phone: the four awards in one row and everything a little tighter. */
@media (orientation: landscape) and (max-height: 550px) {
	#result.team.recap #result-stats {
		grid-template-columns: repeat(4, auto);
		justify-content: center;
		gap: 0 14px;
		margin: 2px 0;
		font-size: 12px;
	}
	#result.team.recap .team-row {
		padding: 0;
	}
	#result-kpis .kpi-grid {
		margin-top: 2px;
	}
	#result-kpis .kpi {
		padding: 2px 1px;
	}
	#result-kpis .kpi b {
		font-size: 16px;
	}
	#result-kpis .kpi-more {
		margin: 2px 0 4px;
	}
	#result-awards {
		grid-template-columns: repeat(4, 1fr);
		gap: 4px;
		margin-bottom: 4px;
	}
	#result-awards canvas {
		width: 24px;
		height: 24px;
	}
	/* the gold ring alone says it is you here */
	#result-awards .you {
		display: none;
	}
}
/* v56.4: the room's people (recap.js people()), one row a side under the awards: a face ringed green while its line is up, grey with 離線 while it
   is down, the nickname cut short with an ellipsis (the whole name is its title), gold for you. A tall screen shows every tag; a phone shows one line
   a side (#result.roomy: the card has the list), so the card still fits 375×667, 360×740 and a short landscape phone with REMATCH on screen. */
#result-room {
	display: none;
}
#result.team.recap #result-room:not(:empty) {
	display: grid;
	gap: 4px;
	margin: 0 0 8px;
}
#result-room .room-side {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 3px;
	min-width: 0;
	padding: 3px;
	border-left: 3px solid var(--c);
	border-radius: 9px;
	background: #06151d99;
}
#result-room .who {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	min-width: 0;
	max-width: 100%;
	padding: 1px 5px 1px 1px;
	border: 1px solid #6d9a9455;
	border-radius: 999px;
	font: 800 11px/18px system-ui;
	color: #f6f0d6;
}
#result-room .who.me {
	border-color: #ffcf4d;
}
#result-room canvas {
	flex: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #0b2330;
	box-shadow: 0 0 0 2px #4fdc8f;
}
#result-room .who.away canvas {
	box-shadow: 0 0 0 2px #6b7a80;
	filter: grayscale(1);
	opacity: 0.7;
}
#result-room .who.away .nm {
	color: #93a6a3;
}
#result-room .nm {
	overflow: hidden;
	max-width: 6.5em;
	white-space: nowrap;
	text-overflow: ellipsis;
}
#result-room .who b {
	flex: none;
	padding: 0 4px;
	border-radius: 999px;
	background: #24444d;
	color: #cfe9e3;
	font: 900 9px/14px system-ui;
}
#result-room .who b.you {
	background: #ffcf4d;
	color: #07171f;
}
#result-room .who b.off {
	background: #5b3530;
	color: #ffd9cf;
}
/* A phone: one line a side. The gold border says 你; a 離線 chip is its face and 離線 (its nickname is in its title). */
@media (max-height: 760px) {
	#result.team.recap #result-room:not(:empty) {
		gap: 3px;
		margin-bottom: 6px;
	}
	#result-room .room-side {
		gap: 2px;
		padding: 2px;
	}
	#result-room .who {
		padding-right: 4px;
		font-size: 10px;
		line-height: 15px;
	}
	#result-room canvas {
		width: 15px;
		height: 15px;
	}
	#result-room .nm {
		max-width: 4em;
	}
	#result-room .who b.you,
	#result-room .who b.host,
	#result-room .who.away .nm {
		display: none;
	}
}
@media (max-width: 340px) {
	#result-room .nm {
		max-width: 3em;
	}
}
/* A short upright phone in a room: a smaller grade mark and closer lines make the room for the list. */
@media (orientation: portrait) and (max-height: 760px) {
	#result.team.roomy #result-grade {
		width: 44px;
		height: 44px;
		margin-bottom: 2px;
		border-width: 3px;
		border-radius: 11px;
		font-size: 24px;
	}
	#result.team.roomy #result-copy {
		margin: 6px 0 8px;
	}
}
/* A short landscape phone in a room: the two sides side by side (a side may take two lines), and the title alone says who won (the grade mark
   gives way). */
@media (orientation: landscape) and (max-height: 550px) {
	#result.team.recap #result-room:not(:empty) {
		grid-template-columns: 1fr 1fr;
		margin-bottom: 4px;
	}
	#result-room .nm {
		max-width: 4em;
	}
	#result.team.roomy #result-grade {
		display: none;
	}
}