From 7f6cac409ae753a680c93a81eea2d1379139a222 Mon Sep 17 00:00:00 2001
From: Pandipipas <62224708+Pandipipas@users.noreply.github.com>
Date: Fri, 20 Feb 2026 23:34:54 +0100
Subject: [PATCH 1/3] Inline 2XKO template CSS into scoreboard main.vue

---
 src/graphics/scoreboard/main.vue | 412 +++++++++++++++++++++++++++++++
 1 file changed, 412 insertions(+)

diff --git a/src/graphics/scoreboard/main.vue b/src/graphics/scoreboard/main.vue
index 1fba7cd..5f12c8a 100644
--- a/src/graphics/scoreboard/main.vue
+++ b/src/graphics/scoreboard/main.vue
@@ -323,6 +323,418 @@ watch(
   </div>
 </template>
 
+<style scoped>
+/* ==== SVG ELEMENTS COLOR SETTINGS ==== */
+
+/* == Player Plaques == */
+
+/* Gradient for background/fill - Player 1 */
+#linear-gradient-p1-noimg,
+#linear-gradient-p1-full {
+	--gradient-stop-1: #15bcba; /* 15bcba */
+	--gradient-stop-2: #19c2a4; /* 19c2a4 */
+	--gradient-stop-3: #1ecb8b; /* 1ecb8b */
+}
+/* Gradient for background/fill - Player 2 */
+#linear-gradient-p2-noimg,
+#linear-gradient-p2-full {
+	--gradient-stop-1: #15bcba; /* 15bcba */
+	--gradient-stop-2: #19c2a4; /* 19c2a4 */
+	--gradient-stop-3: #1ecb8b; /* 1ecb8b */
+}
+
+/* Stroke color - Player 1 */
+#P1_bg_stroke_noimg polygon,
+#P1_diag_noimg line,
+#P1_vert_noimg line,
+#P1_bg_stroke polygon,
+#P1_diag line,
+#P1_vert line {
+	stroke: #232323; /* 232323 */
+}
+/* Stroke color - Player 2 */
+#P2_bg_stroke_noimg polygon,
+#P2_diag_noimg line,
+#P2_vert_noimg line,
+#P2_bg_stroke polygon,
+#P2_diag line,
+#P2_vert line {
+	stroke: #232323; /* 232323 */
+}
+
+/* Faint outer glow effect on stroke - Player 1 */
+#coloredGlow_p1 {
+	--glow-color: #232323; /* 232323 */
+	--glow-opacity: 1;
+}
+/* Faint outer glow effect on stroke - Player 2 */
+#coloredGlow_p2 {
+	--glow-color: #232323; /* 232323 */
+	--glow-opacity: 1;
+}
+
+/* Drop shadow */
+.playerPlaque {
+	filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 0px 0.2rem);
+}
+
+/* == Team Plaques == */
+
+/* Background color - Team 1 */
+#T1_noimg_bg,
+#T1_full_bg {
+	fill: #000000; /* 000000 */
+	opacity: 0.9; /* 0.9 */
+}
+/* Background color - Team 2 */
+#T2_noimg_bg,
+#T2_full_bg {
+	fill: #000000; /* 000000 */
+	opacity: 0.9; /* 0.9 */
+}
+
+/* Line color - Team 1 */
+#T1_noimg_line line,
+#T1_full_line line {
+	stroke: #ffffff; /* ffffff */
+}
+/* Line color - Team 2 */
+#T2_noimg_line line,
+#T2_full_line line {
+	stroke: #ffffff; /* ffffff */
+}
+
+/* Drop shadow */
+#T1_noimg_bg,
+#T1_full_bg,
+#T2_noimg_bg,
+#T2_full_bg {
+	filter: drop-shadow(rgba(0, 0, 0, 0.4) 0px 0px 0.3rem);
+}
+
+/* == Top Row == */
+
+/* Drop shadow */
+#topRowShadow {
+	fill: #000000; /* 000000 */
+	opacity: 0.8; /* 0.8 */
+}
+/* Element body */
+#topRowBody {
+	stroke: #000000; /* 000000 */
+	fill: #000000; /* 000000 */
+	opacity: 0.9; /* 0.9 */
+}
+
+/* ==== END OF SVG ELEMENTS COLOR SETTINGS ==== */
+
+
+
+@font-face {
+	font-family: 'Shapiro 115 Plus Ext';
+	src: url('fonts/Shapiro-115-Plus-Extd.otf');
+	font-weight: normal;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Shapiro 55 Middle Ext';
+	src: url('fonts/Shapiro 55 Middle Extd.otf');
+	font-weight: normal;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Shapiro 45 Welter Text';
+	src: url('fonts/Shapiro 45 Welter Text.otf');
+	font-weight: normal;
+	font-style: normal;
+}
+
+body {
+	margin: 0;
+	font-family: 'Titillium Web', sans-serif; /*<--- Default placeholder font*/
+	font-family: 'Akko Pro', sans-serif;
+	color: white;
+	background: transparent;
+}
+.debug {
+	background-color: var(--debug-bg-color, black) !important; 
+	/* border: solid 1px red;*/
+}
+
+.debug-bg-container {
+	position: fixed;
+	width: 1920px;
+	height: 1080px;
+	overflow: hidden;
+}
+
+.debug-bg {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	object-fit: cover; /* keep aspect ratio while filling space */
+	z-index: 0;
+}
+
+.bg-img {
+	z-index: 0;
+}
+
+.scoreboardContainer {
+	display: flex;
+	justify-content: center;
+	align-items: flex-start;
+	height: 54px;
+	padding: 0 20px;
+	background-color: transparent;
+	position: relative;
+	z-index: 1;
+}
+
+.nameBlock {
+	background-color: transparent;
+	width: 334px;
+	height: 36px;
+	padding: 0px 5px 0px 5px;
+	align-content: center;
+	text-align: center;
+	text-shadow: 0 0 10px black, 2px 0 black, -2px 0 black, 0 2px black, 0 -2px black, 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
+}
+
+.name {
+	font-family: 'Shapiro 55 Middle Ext';
+	font-size: 20px;
+	white-space: nowrap;
+	text-align: center;
+	color: #ffffff;
+}
+
+#nameBlockP1 {
+	margin: 0px 0px 0px 0px;
+}
+
+#nameBlockP2 {
+	margin: 0px 0px 0px 0px;
+}
+
+.scoreBlock {
+	background-color: transparent;
+	padding: 0px;
+	width: 58px;
+	height: 36px;
+	align-content: center;
+	text-align: center;
+	align-items: center;
+	text-shadow: 0 0 4px black, 2px 0 black, -2px 0 black, 0 2px black, 0 -2px black, 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black, 0px 5px 0px black;
+}
+
+.score {
+	font-family: 'Shapiro 115 Plus Ext';
+	font-size: 24px;
+	text-align: center;
+	color: #ffffff;
+}
+
+.centerPanel {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 4px;
+	margin: 0px 0px;
+}
+
+.infoRow {
+	background-color: transparent;
+	display: flex;
+	width: 582px;
+	justify-content: center;
+}
+
+.infoBar {
+	background-color: transparent;
+	text-align: center;
+	align-content: center;
+	padding: 2px 10px;
+	margin: 0px 0px;
+	color: #ffffff;
+}
+
+#topText {
+	width: 240px;
+	height: 50px;
+	font-size: 20px;
+	font-family: 'Shapiro 45 Welter Text';
+	padding: 2px 0px;
+	line-height: 1.2;
+}
+
+#stageText, #matchTypeText {
+	width: 170px;
+	height: 32px;
+	font-family: 'Shapiro 45 Welter Text';
+	font-size: 16px;
+	padding-left: 0px;
+	padding-right: 0px;
+    padding-bottom: 4px;
+}
+
+.imgBlock {
+	min-width: 65px;
+	height: 49px;
+	vertical-align: middle;
+	align-items: center;
+	display: flex;
+	justify-content: center;
+	margin-top: 14px;
+}
+
+.playerImg {
+	vertical-align: middle;
+}
+
+.flag-style {
+	height: 34.5px;
+	width: 46px;
+}
+
+.custom-image-style {
+	max-height: 34.5px;
+	max-width: 46px;
+}
+
+.team-custom-image-style {
+	max-height: 29px;
+	max-width: 39px;
+}
+
+.teamsContainer {
+	position: absolute;
+	display: flex;
+	justify-content: center;
+	width: 100%;
+	margin-top: -13px;
+}
+
+#teamsDivider {
+	width: 348px;
+}
+
+.team {
+	display: flex;
+	min-width: 276px;
+	min-height: 28px;
+	align-items: center;
+	padding-top: 1px;
+}
+
+.team-left {
+	justify-content: flex-end;
+}
+
+.team-right {
+	justify-content: flex-start;
+}
+
+.teamText {
+	display: flex;
+	gap: 0px;
+}
+
+#team1Name,
+#team2Name {
+	width: 236px;
+	height: 28px;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 16px;
+	font-family: 'Shapiro 55 Middle Ext';
+}
+
+#team1Score,
+#team2Score {
+	height: 28px;
+	width: 40px;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 16px;
+	font-family: 'Shapiro 55 Middle Ext';
+}
+
+.teamImg {
+	width: 39px;
+	height: 29px;
+	object-fit: contain;
+}
+
+:root {
+	--fade-duration: 500ms;
+}
+
+.fade {
+	opacity: 1;
+	transition: opacity var(--fade-duration) ease-in-out;
+}
+
+.fade-hidden {
+	opacity: 0;
+}
+
+[data-anim] {
+	opacity: 0;
+	will-change: transform, opacity;
+	--delay: 0ms;
+	--dur: 500ms;
+}
+
+/* After the entrance animations finish, keep everything visible and prevent any replays */
+body.post-entrance [data-anim] {
+	opacity: 1;
+	transform: none;
+	animation: none !important;
+}
+
+/* Types of animations */
+body.anim-start [data-anim="fade"]  { animation: fade-in         var(--dur) ease-out var(--delay) both; }
+body.anim-start [data-anim="up"]    { animation: slide-up-fade   var(--dur) ease-out var(--delay) both; }
+body.anim-start [data-anim="down"]  { animation: slide-down-fade var(--dur) ease-out var(--delay) both; }
+body.anim-start [data-anim="left"]  { animation: slide-left-fade var(--dur) ease-out var(--delay) both; }
+body.anim-start [data-anim="right"] { animation: slide-right-fade var(--dur) ease-out var(--delay) both; }
+
+.bg-img[data-anim] { pointer-events: none; }
+
+/* Overlay animation keyframes */
+@keyframes fade-in {
+	from { opacity: 0 }
+	to   { opacity: 1 }
+}
+
+@keyframes slide-up-fade {
+	from { transform: translateY(24px); opacity: 0 }
+	to   { transform: none;             opacity: 1 }
+}
+
+@keyframes slide-down-fade {
+	from { transform: translateY(-24px); opacity: 0 }
+	to   { transform: none;             opacity: 1 }
+}
+
+@keyframes slide-left-fade {
+	from { transform: translateX(50px); opacity: 0 }
+	to   { transform: none;             opacity: 1 }
+}
+
+@keyframes slide-right-fade {
+	from { transform: translateX(-50px); opacity: 0 }
+	to   { transform: none;              opacity: 1 }
+}
+</style>
+
 <style scoped>
 :global(:root) {
   --main-panel-height: 60px;

From 102c0b7e61d9d5ae5535f6612921a4ba22a9c19d Mon Sep 17 00:00:00 2001
From: Pandipipas <62224708+Pandipipas@users.noreply.github.com>
Date: Sat, 21 Feb 2026 00:59:24 +0100
Subject: [PATCH 2/3] Remove template.css and inline 2xko styles

---
 src/graphics/scoreboard-2xko/main.vue     | 412 +++++++++++++++++++++-
 src/graphics/scoreboard-2xko/template.css | 409 ---------------------
 2 files changed, 411 insertions(+), 410 deletions(-)
 delete mode 100644 src/graphics/scoreboard-2xko/template.css

diff --git a/src/graphics/scoreboard-2xko/main.vue b/src/graphics/scoreboard-2xko/main.vue
index 5e6512a..7b81d3e 100644
--- a/src/graphics/scoreboard-2xko/main.vue
+++ b/src/graphics/scoreboard-2xko/main.vue
@@ -358,4 +358,414 @@ const gameText = computed(() => scoreboard.value.game || '2XKO');
   </div>
 </template>
 
-<style scoped src="./template.css"></style>
+<style scoped>
+/* ==== SVG ELEMENTS COLOR SETTINGS ==== */
+
+/* == Player Plaques == */
+
+/* Gradient for background/fill - Player 1 */
+#linear-gradient-p1-noimg,
+#linear-gradient-p1-full {
+	--gradient-stop-1: #15bcba; /* 15bcba */
+	--gradient-stop-2: #19c2a4; /* 19c2a4 */
+	--gradient-stop-3: #1ecb8b; /* 1ecb8b */
+}
+/* Gradient for background/fill - Player 2 */
+#linear-gradient-p2-noimg,
+#linear-gradient-p2-full {
+	--gradient-stop-1: #15bcba; /* 15bcba */
+	--gradient-stop-2: #19c2a4; /* 19c2a4 */
+	--gradient-stop-3: #1ecb8b; /* 1ecb8b */
+}
+
+/* Stroke color - Player 1 */
+#P1_bg_stroke_noimg polygon,
+#P1_diag_noimg line,
+#P1_vert_noimg line,
+#P1_bg_stroke polygon,
+#P1_diag line,
+#P1_vert line {
+	stroke: #232323; /* 232323 */
+}
+/* Stroke color - Player 2 */
+#P2_bg_stroke_noimg polygon,
+#P2_diag_noimg line,
+#P2_vert_noimg line,
+#P2_bg_stroke polygon,
+#P2_diag line,
+#P2_vert line {
+	stroke: #232323; /* 232323 */
+}
+
+/* Faint outer glow effect on stroke - Player 1 */
+#coloredGlow_p1 {
+	--glow-color: #232323; /* 232323 */
+	--glow-opacity: 1;
+}
+/* Faint outer glow effect on stroke - Player 2 */
+#coloredGlow_p2 {
+	--glow-color: #232323; /* 232323 */
+	--glow-opacity: 1;
+}
+
+/* Drop shadow */
+.playerPlaque {
+	filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 0px 0.2rem);
+}
+
+/* == Team Plaques == */
+
+/* Background color - Team 1 */
+#T1_noimg_bg,
+#T1_full_bg {
+	fill: #000000; /* 000000 */
+	opacity: 0.9; /* 0.9 */
+}
+/* Background color - Team 2 */
+#T2_noimg_bg,
+#T2_full_bg {
+	fill: #000000; /* 000000 */
+	opacity: 0.9; /* 0.9 */
+}
+
+/* Line color - Team 1 */
+#T1_noimg_line line,
+#T1_full_line line {
+	stroke: #ffffff; /* ffffff */
+}
+/* Line color - Team 2 */
+#T2_noimg_line line,
+#T2_full_line line {
+	stroke: #ffffff; /* ffffff */
+}
+
+/* Drop shadow */
+#T1_noimg_bg,
+#T1_full_bg,
+#T2_noimg_bg,
+#T2_full_bg {
+	filter: drop-shadow(rgba(0, 0, 0, 0.4) 0px 0px 0.3rem);
+}
+
+/* == Top Row == */
+
+/* Drop shadow */
+#topRowShadow {
+	fill: #000000; /* 000000 */
+	opacity: 0.8; /* 0.8 */
+}
+/* Element body */
+#topRowBody {
+	stroke: #000000; /* 000000 */
+	fill: #000000; /* 000000 */
+	opacity: 0.9; /* 0.9 */
+}
+
+/* ==== END OF SVG ELEMENTS COLOR SETTINGS ==== */
+
+
+
+@font-face {
+	font-family: 'Shapiro 115 Plus Ext';
+	src: url('fonts/Shapiro-115-Plus-Extd.otf');
+	font-weight: normal;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Shapiro 55 Middle Ext';
+	src: url('fonts/Shapiro 55 Middle Extd.otf');
+	font-weight: normal;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Shapiro 45 Welter Text';
+	src: url('fonts/Shapiro 45 Welter Text.otf');
+	font-weight: normal;
+	font-style: normal;
+}
+
+body {
+	margin: 0;
+	font-family: 'Titillium Web', sans-serif; /*<--- Default placeholder font*/
+	font-family: 'Akko Pro', sans-serif;
+	color: white;
+	background: transparent;
+}
+.debug {
+	background-color: var(--debug-bg-color, black) !important; 
+	/* border: solid 1px red;*/
+}
+
+.debug-bg-container {
+	position: fixed;
+	width: 1920px;
+	height: 1080px;
+	overflow: hidden;
+}
+
+.debug-bg {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	object-fit: cover; /* keep aspect ratio while filling space */
+	z-index: 0;
+}
+
+.bg-img {
+	z-index: 0;
+}
+
+.scoreboardContainer {
+	display: flex;
+	justify-content: center;
+	align-items: flex-start;
+	height: 54px;
+	padding: 0 20px;
+	background-color: transparent;
+	position: relative;
+	z-index: 1;
+}
+
+.nameBlock {
+	background-color: transparent;
+	width: 334px;
+	height: 36px;
+	padding: 0px 5px 0px 5px;
+	align-content: center;
+	text-align: center;
+	text-shadow: 0 0 10px black, 2px 0 black, -2px 0 black, 0 2px black, 0 -2px black, 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
+}
+
+.name {
+	font-family: 'Shapiro 55 Middle Ext';
+	font-size: 20px;
+	white-space: nowrap;
+	text-align: center;
+	color: #ffffff;
+}
+
+#nameBlockP1 {
+	margin: 0px 0px 0px 0px;
+}
+
+#nameBlockP2 {
+	margin: 0px 0px 0px 0px;
+}
+
+.scoreBlock {
+	background-color: transparent;
+	padding: 0px;
+	width: 58px;
+	height: 36px;
+	align-content: center;
+	text-align: center;
+	align-items: center;
+	text-shadow: 0 0 4px black, 2px 0 black, -2px 0 black, 0 2px black, 0 -2px black, 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black, 0px 5px 0px black;
+}
+
+.score {
+	font-family: 'Shapiro 115 Plus Ext';
+	font-size: 24px;
+	text-align: center;
+	color: #ffffff;
+}
+
+.centerPanel {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 4px;
+	margin: 0px 0px;
+}
+
+.infoRow {
+	background-color: transparent;
+	display: flex;
+	width: 582px;
+	justify-content: center;
+}
+
+.infoBar {
+	background-color: transparent;
+	text-align: center;
+	align-content: center;
+	padding: 2px 10px;
+	margin: 0px 0px;
+	color: #ffffff;
+}
+
+#topText {
+	width: 240px;
+	height: 50px;
+	font-size: 20px;
+	font-family: 'Shapiro 45 Welter Text';
+	padding: 2px 0px;
+	line-height: 1.2;
+}
+
+#stageText, #matchTypeText {
+	width: 170px;
+	height: 32px;
+	font-family: 'Shapiro 45 Welter Text';
+	font-size: 16px;
+	padding-left: 0px;
+	padding-right: 0px;
+    padding-bottom: 4px;
+}
+
+.imgBlock {
+	min-width: 65px;
+	height: 49px;
+	vertical-align: middle;
+	align-items: center;
+	display: flex;
+	justify-content: center;
+	margin-top: 14px;
+}
+
+.playerImg {
+	vertical-align: middle;
+}
+
+.flag-style {
+	height: 34.5px;
+	width: 46px;
+}
+
+.custom-image-style {
+	max-height: 34.5px;
+	max-width: 46px;
+}
+
+.team-custom-image-style {
+	max-height: 29px;
+	max-width: 39px;
+}
+
+.teamsContainer {
+	position: absolute;
+	display: flex;
+	justify-content: center;
+	width: 100%;
+	margin-top: -13px;
+}
+
+#teamsDivider {
+	width: 348px;
+}
+
+.team {
+	display: flex;
+	min-width: 276px;
+	min-height: 28px;
+	align-items: center;
+	padding-top: 1px;
+}
+
+.team-left {
+	justify-content: flex-end;
+}
+
+.team-right {
+	justify-content: flex-start;
+}
+
+.teamText {
+	display: flex;
+	gap: 0px;
+}
+
+#team1Name,
+#team2Name {
+	width: 236px;
+	height: 28px;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 16px;
+	font-family: 'Shapiro 55 Middle Ext';
+}
+
+#team1Score,
+#team2Score {
+	height: 28px;
+	width: 40px;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 16px;
+	font-family: 'Shapiro 55 Middle Ext';
+}
+
+.teamImg {
+	width: 39px;
+	height: 29px;
+	object-fit: contain;
+}
+
+:root {
+	--fade-duration: 500ms;
+}
+
+.fade {
+	opacity: 1;
+	transition: opacity var(--fade-duration) ease-in-out;
+}
+
+.fade-hidden {
+	opacity: 0;
+}
+
+[data-anim] {
+	opacity: 0;
+	will-change: transform, opacity;
+	--delay: 0ms;
+	--dur: 500ms;
+}
+
+/* After the entrance animations finish, keep everything visible and prevent any replays */
+body.post-entrance [data-anim] {
+	opacity: 1;
+	transform: none;
+	animation: none !important;
+}
+
+/* Types of animations */
+body.anim-start [data-anim="fade"]  { animation: fade-in         var(--dur) ease-out var(--delay) both; }
+body.anim-start [data-anim="up"]    { animation: slide-up-fade   var(--dur) ease-out var(--delay) both; }
+body.anim-start [data-anim="down"]  { animation: slide-down-fade var(--dur) ease-out var(--delay) both; }
+body.anim-start [data-anim="left"]  { animation: slide-left-fade var(--dur) ease-out var(--delay) both; }
+body.anim-start [data-anim="right"] { animation: slide-right-fade var(--dur) ease-out var(--delay) both; }
+
+.bg-img[data-anim] { pointer-events: none; }
+
+/* Overlay animation keyframes */
+@keyframes fade-in {
+	from { opacity: 0 }
+	to   { opacity: 1 }
+}
+
+@keyframes slide-up-fade {
+	from { transform: translateY(24px); opacity: 0 }
+	to   { transform: none;             opacity: 1 }
+}
+
+@keyframes slide-down-fade {
+	from { transform: translateY(-24px); opacity: 0 }
+	to   { transform: none;             opacity: 1 }
+}
+
+@keyframes slide-left-fade {
+	from { transform: translateX(50px); opacity: 0 }
+	to   { transform: none;             opacity: 1 }
+}
+
+@keyframes slide-right-fade {
+	from { transform: translateX(-50px); opacity: 0 }
+	to   { transform: none;              opacity: 1 }
+}
+</style>
diff --git a/src/graphics/scoreboard-2xko/template.css b/src/graphics/scoreboard-2xko/template.css
deleted file mode 100644
index e7e98df..0000000
--- a/src/graphics/scoreboard-2xko/template.css
+++ /dev/null
@@ -1,409 +0,0 @@
-/* ==== SVG ELEMENTS COLOR SETTINGS ==== */
-
-/* == Player Plaques == */
-
-/* Gradient for background/fill - Player 1 */
-#linear-gradient-p1-noimg,
-#linear-gradient-p1-full {
-	--gradient-stop-1: #15bcba; /* 15bcba */
-	--gradient-stop-2: #19c2a4; /* 19c2a4 */
-	--gradient-stop-3: #1ecb8b; /* 1ecb8b */
-}
-/* Gradient for background/fill - Player 2 */
-#linear-gradient-p2-noimg,
-#linear-gradient-p2-full {
-	--gradient-stop-1: #15bcba; /* 15bcba */
-	--gradient-stop-2: #19c2a4; /* 19c2a4 */
-	--gradient-stop-3: #1ecb8b; /* 1ecb8b */
-}
-
-/* Stroke color - Player 1 */
-#P1_bg_stroke_noimg polygon,
-#P1_diag_noimg line,
-#P1_vert_noimg line,
-#P1_bg_stroke polygon,
-#P1_diag line,
-#P1_vert line {
-	stroke: #232323; /* 232323 */
-}
-/* Stroke color - Player 2 */
-#P2_bg_stroke_noimg polygon,
-#P2_diag_noimg line,
-#P2_vert_noimg line,
-#P2_bg_stroke polygon,
-#P2_diag line,
-#P2_vert line {
-	stroke: #232323; /* 232323 */
-}
-
-/* Faint outer glow effect on stroke - Player 1 */
-#coloredGlow_p1 {
-	--glow-color: #232323; /* 232323 */
-	--glow-opacity: 1;
-}
-/* Faint outer glow effect on stroke - Player 2 */
-#coloredGlow_p2 {
-	--glow-color: #232323; /* 232323 */
-	--glow-opacity: 1;
-}
-
-/* Drop shadow */
-.playerPlaque {
-	filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 0px 0.2rem);
-}
-
-/* == Team Plaques == */
-
-/* Background color - Team 1 */
-#T1_noimg_bg,
-#T1_full_bg {
-	fill: #000000; /* 000000 */
-	opacity: 0.9; /* 0.9 */
-}
-/* Background color - Team 2 */
-#T2_noimg_bg,
-#T2_full_bg {
-	fill: #000000; /* 000000 */
-	opacity: 0.9; /* 0.9 */
-}
-
-/* Line color - Team 1 */
-#T1_noimg_line line,
-#T1_full_line line {
-	stroke: #ffffff; /* ffffff */
-}
-/* Line color - Team 2 */
-#T2_noimg_line line,
-#T2_full_line line {
-	stroke: #ffffff; /* ffffff */
-}
-
-/* Drop shadow */
-#T1_noimg_bg,
-#T1_full_bg,
-#T2_noimg_bg,
-#T2_full_bg {
-	filter: drop-shadow(rgba(0, 0, 0, 0.4) 0px 0px 0.3rem);
-}
-
-/* == Top Row == */
-
-/* Drop shadow */
-#topRowShadow {
-	fill: #000000; /* 000000 */
-	opacity: 0.8; /* 0.8 */
-}
-/* Element body */
-#topRowBody {
-	stroke: #000000; /* 000000 */
-	fill: #000000; /* 000000 */
-	opacity: 0.9; /* 0.9 */
-}
-
-/* ==== END OF SVG ELEMENTS COLOR SETTINGS ==== */
-
-
-
-@font-face {
-	font-family: 'Shapiro 115 Plus Ext';
-	src: url('fonts/Shapiro-115-Plus-Extd.otf');
-	font-weight: normal;
-	font-style: normal;
-}
-
-@font-face {
-	font-family: 'Shapiro 55 Middle Ext';
-	src: url('fonts/Shapiro 55 Middle Extd.otf');
-	font-weight: normal;
-	font-style: normal;
-}
-
-@font-face {
-	font-family: 'Shapiro 45 Welter Text';
-	src: url('fonts/Shapiro 45 Welter Text.otf');
-	font-weight: normal;
-	font-style: normal;
-}
-
-body {
-	margin: 0;
-	font-family: 'Titillium Web', sans-serif; /*<--- Default placeholder font*/
-	font-family: 'Akko Pro', sans-serif;
-	color: white;
-	background: transparent;
-}
-.debug {
-	background-color: var(--debug-bg-color, black) !important; 
-	/* border: solid 1px red;*/
-}
-
-.debug-bg-container {
-	position: fixed;
-	width: 1920px;
-	height: 1080px;
-	overflow: hidden;
-}
-
-.debug-bg {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	object-fit: cover; /* keep aspect ratio while filling space */
-	z-index: 0;
-}
-
-.bg-img {
-	z-index: 0;
-}
-
-.scoreboardContainer {
-	display: flex;
-	justify-content: center;
-	align-items: flex-start;
-	height: 54px;
-	padding: 0 20px;
-	background-color: transparent;
-	position: relative;
-	z-index: 1;
-}
-
-.nameBlock {
-	background-color: transparent;
-	width: 334px;
-	height: 36px;
-	padding: 0px 5px 0px 5px;
-	align-content: center;
-	text-align: center;
-	text-shadow: 0 0 10px black, 2px 0 black, -2px 0 black, 0 2px black, 0 -2px black, 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
-}
-
-.name {
-	font-family: 'Shapiro 55 Middle Ext';
-	font-size: 20px;
-	white-space: nowrap;
-	text-align: center;
-	color: #ffffff;
-}
-
-#nameBlockP1 {
-	margin: 0px 0px 0px 0px;
-}
-
-#nameBlockP2 {
-	margin: 0px 0px 0px 0px;
-}
-
-.scoreBlock {
-	background-color: transparent;
-	padding: 0px;
-	width: 58px;
-	height: 36px;
-	align-content: center;
-	text-align: center;
-	align-items: center;
-	text-shadow: 0 0 4px black, 2px 0 black, -2px 0 black, 0 2px black, 0 -2px black, 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black, 0px 5px 0px black;
-}
-
-.score {
-	font-family: 'Shapiro 115 Plus Ext';
-	font-size: 24px;
-	text-align: center;
-	color: #ffffff;
-}
-
-.centerPanel {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: 4px;
-	margin: 0px 0px;
-}
-
-.infoRow {
-	background-color: transparent;
-	display: flex;
-	width: 582px;
-	justify-content: center;
-}
-
-.infoBar {
-	background-color: transparent;
-	text-align: center;
-	align-content: center;
-	padding: 2px 10px;
-	margin: 0px 0px;
-	color: #ffffff;
-}
-
-#topText {
-	width: 240px;
-	height: 50px;
-	font-size: 20px;
-	font-family: 'Shapiro 45 Welter Text';
-	padding: 2px 0px;
-	line-height: 1.2;
-}
-
-#stageText, #matchTypeText {
-	width: 170px;
-	height: 32px;
-	font-family: 'Shapiro 45 Welter Text';
-	font-size: 16px;
-	padding-left: 0px;
-	padding-right: 0px;
-    padding-bottom: 4px;
-}
-
-.imgBlock {
-	min-width: 65px;
-	height: 49px;
-	vertical-align: middle;
-	align-items: center;
-	display: flex;
-	justify-content: center;
-	margin-top: 14px;
-}
-
-.playerImg {
-	vertical-align: middle;
-}
-
-.flag-style {
-	height: 34.5px;
-	width: 46px;
-}
-
-.custom-image-style {
-	max-height: 34.5px;
-	max-width: 46px;
-}
-
-.team-custom-image-style {
-	max-height: 29px;
-	max-width: 39px;
-}
-
-.teamsContainer {
-	position: absolute;
-	display: flex;
-	justify-content: center;
-	width: 100%;
-	margin-top: -13px;
-}
-
-#teamsDivider {
-	width: 348px;
-}
-
-.team {
-	display: flex;
-	min-width: 276px;
-	min-height: 28px;
-	align-items: center;
-	padding-top: 1px;
-}
-
-.team-left {
-	justify-content: flex-end;
-}
-
-.team-right {
-	justify-content: flex-start;
-}
-
-.teamText {
-	display: flex;
-	gap: 0px;
-}
-
-#team1Name,
-#team2Name {
-	width: 236px;
-	height: 28px;
-	display: inline-flex;
-	justify-content: center;
-	align-items: center;
-	font-size: 16px;
-	font-family: 'Shapiro 55 Middle Ext';
-}
-
-#team1Score,
-#team2Score {
-	height: 28px;
-	width: 40px;
-	display: inline-flex;
-	justify-content: center;
-	align-items: center;
-	font-size: 16px;
-	font-family: 'Shapiro 55 Middle Ext';
-}
-
-.teamImg {
-	width: 39px;
-	height: 29px;
-	object-fit: contain;
-}
-
-:root {
-	--fade-duration: 500ms;
-}
-
-.fade {
-	opacity: 1;
-	transition: opacity var(--fade-duration) ease-in-out;
-}
-
-.fade-hidden {
-	opacity: 0;
-}
-
-[data-anim] {
-	opacity: 0;
-	will-change: transform, opacity;
-	--delay: 0ms;
-	--dur: 500ms;
-}
-
-/* After the entrance animations finish, keep everything visible and prevent any replays */
-body.post-entrance [data-anim] {
-	opacity: 1;
-	transform: none;
-	animation: none !important;
-}
-
-/* Types of animations */
-body.anim-start [data-anim="fade"]  { animation: fade-in         var(--dur) ease-out var(--delay) both; }
-body.anim-start [data-anim="up"]    { animation: slide-up-fade   var(--dur) ease-out var(--delay) both; }
-body.anim-start [data-anim="down"]  { animation: slide-down-fade var(--dur) ease-out var(--delay) both; }
-body.anim-start [data-anim="left"]  { animation: slide-left-fade var(--dur) ease-out var(--delay) both; }
-body.anim-start [data-anim="right"] { animation: slide-right-fade var(--dur) ease-out var(--delay) both; }
-
-.bg-img[data-anim] { pointer-events: none; }
-
-/* Overlay animation keyframes */
-@keyframes fade-in {
-	from { opacity: 0 }
-	to   { opacity: 1 }
-}
-
-@keyframes slide-up-fade {
-	from { transform: translateY(24px); opacity: 0 }
-	to   { transform: none;             opacity: 1 }
-}
-
-@keyframes slide-down-fade {
-	from { transform: translateY(-24px); opacity: 0 }
-	to   { transform: none;             opacity: 1 }
-}
-
-@keyframes slide-left-fade {
-	from { transform: translateX(50px); opacity: 0 }
-	to   { transform: none;             opacity: 1 }
-}
-
-@keyframes slide-right-fade {
-	from { transform: translateX(-50px); opacity: 0 }
-	to   { transform: none;              opacity: 1 }
-}

From f3d7b8b1e03c04b74997e90a0d594cfcb1385868 Mon Sep 17 00:00:00 2001
From: Pandipipas <62224708+Pandipipas@users.noreply.github.com>
Date: Sat, 21 Feb 2026 00:59:29 +0100
Subject: [PATCH 3/3] Revert unintended inline CSS changes in main scoreboard

---
 src/graphics/scoreboard/main.vue | 412 -------------------------------
 1 file changed, 412 deletions(-)

diff --git a/src/graphics/scoreboard/main.vue b/src/graphics/scoreboard/main.vue
index 5f12c8a..1fba7cd 100644
--- a/src/graphics/scoreboard/main.vue
+++ b/src/graphics/scoreboard/main.vue
@@ -323,418 +323,6 @@ watch(
   </div>
 </template>
 
-<style scoped>
-/* ==== SVG ELEMENTS COLOR SETTINGS ==== */
-
-/* == Player Plaques == */
-
-/* Gradient for background/fill - Player 1 */
-#linear-gradient-p1-noimg,
-#linear-gradient-p1-full {
-	--gradient-stop-1: #15bcba; /* 15bcba */
-	--gradient-stop-2: #19c2a4; /* 19c2a4 */
-	--gradient-stop-3: #1ecb8b; /* 1ecb8b */
-}
-/* Gradient for background/fill - Player 2 */
-#linear-gradient-p2-noimg,
-#linear-gradient-p2-full {
-	--gradient-stop-1: #15bcba; /* 15bcba */
-	--gradient-stop-2: #19c2a4; /* 19c2a4 */
-	--gradient-stop-3: #1ecb8b; /* 1ecb8b */
-}
-
-/* Stroke color - Player 1 */
-#P1_bg_stroke_noimg polygon,
-#P1_diag_noimg line,
-#P1_vert_noimg line,
-#P1_bg_stroke polygon,
-#P1_diag line,
-#P1_vert line {
-	stroke: #232323; /* 232323 */
-}
-/* Stroke color - Player 2 */
-#P2_bg_stroke_noimg polygon,
-#P2_diag_noimg line,
-#P2_vert_noimg line,
-#P2_bg_stroke polygon,
-#P2_diag line,
-#P2_vert line {
-	stroke: #232323; /* 232323 */
-}
-
-/* Faint outer glow effect on stroke - Player 1 */
-#coloredGlow_p1 {
-	--glow-color: #232323; /* 232323 */
-	--glow-opacity: 1;
-}
-/* Faint outer glow effect on stroke - Player 2 */
-#coloredGlow_p2 {
-	--glow-color: #232323; /* 232323 */
-	--glow-opacity: 1;
-}
-
-/* Drop shadow */
-.playerPlaque {
-	filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 0px 0.2rem);
-}
-
-/* == Team Plaques == */
-
-/* Background color - Team 1 */
-#T1_noimg_bg,
-#T1_full_bg {
-	fill: #000000; /* 000000 */
-	opacity: 0.9; /* 0.9 */
-}
-/* Background color - Team 2 */
-#T2_noimg_bg,
-#T2_full_bg {
-	fill: #000000; /* 000000 */
-	opacity: 0.9; /* 0.9 */
-}
-
-/* Line color - Team 1 */
-#T1_noimg_line line,
-#T1_full_line line {
-	stroke: #ffffff; /* ffffff */
-}
-/* Line color - Team 2 */
-#T2_noimg_line line,
-#T2_full_line line {
-	stroke: #ffffff; /* ffffff */
-}
-
-/* Drop shadow */
-#T1_noimg_bg,
-#T1_full_bg,
-#T2_noimg_bg,
-#T2_full_bg {
-	filter: drop-shadow(rgba(0, 0, 0, 0.4) 0px 0px 0.3rem);
-}
-
-/* == Top Row == */
-
-/* Drop shadow */
-#topRowShadow {
-	fill: #000000; /* 000000 */
-	opacity: 0.8; /* 0.8 */
-}
-/* Element body */
-#topRowBody {
-	stroke: #000000; /* 000000 */
-	fill: #000000; /* 000000 */
-	opacity: 0.9; /* 0.9 */
-}
-
-/* ==== END OF SVG ELEMENTS COLOR SETTINGS ==== */
-
-
-
-@font-face {
-	font-family: 'Shapiro 115 Plus Ext';
-	src: url('fonts/Shapiro-115-Plus-Extd.otf');
-	font-weight: normal;
-	font-style: normal;
-}
-
-@font-face {
-	font-family: 'Shapiro 55 Middle Ext';
-	src: url('fonts/Shapiro 55 Middle Extd.otf');
-	font-weight: normal;
-	font-style: normal;
-}
-
-@font-face {
-	font-family: 'Shapiro 45 Welter Text';
-	src: url('fonts/Shapiro 45 Welter Text.otf');
-	font-weight: normal;
-	font-style: normal;
-}
-
-body {
-	margin: 0;
-	font-family: 'Titillium Web', sans-serif; /*<--- Default placeholder font*/
-	font-family: 'Akko Pro', sans-serif;
-	color: white;
-	background: transparent;
-}
-.debug {
-	background-color: var(--debug-bg-color, black) !important; 
-	/* border: solid 1px red;*/
-}
-
-.debug-bg-container {
-	position: fixed;
-	width: 1920px;
-	height: 1080px;
-	overflow: hidden;
-}
-
-.debug-bg {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	object-fit: cover; /* keep aspect ratio while filling space */
-	z-index: 0;
-}
-
-.bg-img {
-	z-index: 0;
-}
-
-.scoreboardContainer {
-	display: flex;
-	justify-content: center;
-	align-items: flex-start;
-	height: 54px;
-	padding: 0 20px;
-	background-color: transparent;
-	position: relative;
-	z-index: 1;
-}
-
-.nameBlock {
-	background-color: transparent;
-	width: 334px;
-	height: 36px;
-	padding: 0px 5px 0px 5px;
-	align-content: center;
-	text-align: center;
-	text-shadow: 0 0 10px black, 2px 0 black, -2px 0 black, 0 2px black, 0 -2px black, 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black;
-}
-
-.name {
-	font-family: 'Shapiro 55 Middle Ext';
-	font-size: 20px;
-	white-space: nowrap;
-	text-align: center;
-	color: #ffffff;
-}
-
-#nameBlockP1 {
-	margin: 0px 0px 0px 0px;
-}
-
-#nameBlockP2 {
-	margin: 0px 0px 0px 0px;
-}
-
-.scoreBlock {
-	background-color: transparent;
-	padding: 0px;
-	width: 58px;
-	height: 36px;
-	align-content: center;
-	text-align: center;
-	align-items: center;
-	text-shadow: 0 0 4px black, 2px 0 black, -2px 0 black, 0 2px black, 0 -2px black, 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black, 0px 5px 0px black;
-}
-
-.score {
-	font-family: 'Shapiro 115 Plus Ext';
-	font-size: 24px;
-	text-align: center;
-	color: #ffffff;
-}
-
-.centerPanel {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: 4px;
-	margin: 0px 0px;
-}
-
-.infoRow {
-	background-color: transparent;
-	display: flex;
-	width: 582px;
-	justify-content: center;
-}
-
-.infoBar {
-	background-color: transparent;
-	text-align: center;
-	align-content: center;
-	padding: 2px 10px;
-	margin: 0px 0px;
-	color: #ffffff;
-}
-
-#topText {
-	width: 240px;
-	height: 50px;
-	font-size: 20px;
-	font-family: 'Shapiro 45 Welter Text';
-	padding: 2px 0px;
-	line-height: 1.2;
-}
-
-#stageText, #matchTypeText {
-	width: 170px;
-	height: 32px;
-	font-family: 'Shapiro 45 Welter Text';
-	font-size: 16px;
-	padding-left: 0px;
-	padding-right: 0px;
-    padding-bottom: 4px;
-}
-
-.imgBlock {
-	min-width: 65px;
-	height: 49px;
-	vertical-align: middle;
-	align-items: center;
-	display: flex;
-	justify-content: center;
-	margin-top: 14px;
-}
-
-.playerImg {
-	vertical-align: middle;
-}
-
-.flag-style {
-	height: 34.5px;
-	width: 46px;
-}
-
-.custom-image-style {
-	max-height: 34.5px;
-	max-width: 46px;
-}
-
-.team-custom-image-style {
-	max-height: 29px;
-	max-width: 39px;
-}
-
-.teamsContainer {
-	position: absolute;
-	display: flex;
-	justify-content: center;
-	width: 100%;
-	margin-top: -13px;
-}
-
-#teamsDivider {
-	width: 348px;
-}
-
-.team {
-	display: flex;
-	min-width: 276px;
-	min-height: 28px;
-	align-items: center;
-	padding-top: 1px;
-}
-
-.team-left {
-	justify-content: flex-end;
-}
-
-.team-right {
-	justify-content: flex-start;
-}
-
-.teamText {
-	display: flex;
-	gap: 0px;
-}
-
-#team1Name,
-#team2Name {
-	width: 236px;
-	height: 28px;
-	display: inline-flex;
-	justify-content: center;
-	align-items: center;
-	font-size: 16px;
-	font-family: 'Shapiro 55 Middle Ext';
-}
-
-#team1Score,
-#team2Score {
-	height: 28px;
-	width: 40px;
-	display: inline-flex;
-	justify-content: center;
-	align-items: center;
-	font-size: 16px;
-	font-family: 'Shapiro 55 Middle Ext';
-}
-
-.teamImg {
-	width: 39px;
-	height: 29px;
-	object-fit: contain;
-}
-
-:root {
-	--fade-duration: 500ms;
-}
-
-.fade {
-	opacity: 1;
-	transition: opacity var(--fade-duration) ease-in-out;
-}
-
-.fade-hidden {
-	opacity: 0;
-}
-
-[data-anim] {
-	opacity: 0;
-	will-change: transform, opacity;
-	--delay: 0ms;
-	--dur: 500ms;
-}
-
-/* After the entrance animations finish, keep everything visible and prevent any replays */
-body.post-entrance [data-anim] {
-	opacity: 1;
-	transform: none;
-	animation: none !important;
-}
-
-/* Types of animations */
-body.anim-start [data-anim="fade"]  { animation: fade-in         var(--dur) ease-out var(--delay) both; }
-body.anim-start [data-anim="up"]    { animation: slide-up-fade   var(--dur) ease-out var(--delay) both; }
-body.anim-start [data-anim="down"]  { animation: slide-down-fade var(--dur) ease-out var(--delay) both; }
-body.anim-start [data-anim="left"]  { animation: slide-left-fade var(--dur) ease-out var(--delay) both; }
-body.anim-start [data-anim="right"] { animation: slide-right-fade var(--dur) ease-out var(--delay) both; }
-
-.bg-img[data-anim] { pointer-events: none; }
-
-/* Overlay animation keyframes */
-@keyframes fade-in {
-	from { opacity: 0 }
-	to   { opacity: 1 }
-}
-
-@keyframes slide-up-fade {
-	from { transform: translateY(24px); opacity: 0 }
-	to   { transform: none;             opacity: 1 }
-}
-
-@keyframes slide-down-fade {
-	from { transform: translateY(-24px); opacity: 0 }
-	to   { transform: none;             opacity: 1 }
-}
-
-@keyframes slide-left-fade {
-	from { transform: translateX(50px); opacity: 0 }
-	to   { transform: none;             opacity: 1 }
-}
-
-@keyframes slide-right-fade {
-	from { transform: translateX(-50px); opacity: 0 }
-	to   { transform: none;              opacity: 1 }
-}
-</style>
-
 <style scoped>
 :global(:root) {
   --main-panel-height: 60px;