feat(gameplay): Adding % bonus for planet type

public/style.css

@@ -276,61 +276,94 @@ body {
 .scoreBoard {
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 16px;
-  padding: 10px 16px;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 12px;
   border-radius: 14px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   background: rgba(255, 255, 255, 0.04);
-  font-size: 22px;
-  font-weight: 800;
   font-family: "Courier New", Courier, monospace;
   font-variant-numeric: tabular-nums;
-  letter-spacing: 0.5px;
+}
+
+.team-logo {
+  width: 54px;
+  height: 54px;
+  display: block;
+  flex-shrink: 0;
 }
 
 .scoreTeam {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  gap: 10px;
-}
-
-.team-logo {
-  width: 64px;
-  height: 64px;
-  display: block;
+  gap: 4px;
+  flex: 1;
 }
 
 .scoreTeamName {
-  font-size: 12px;
+  font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.08em;
-  opacity: 0.8;
+  opacity: 0.75;
 }
 
-.scoreTeam--blue .scoreTeamName {
-  color: rgba(90, 200, 255, 0.9);
+.scoreTeam--blue .scoreTeamName { color: rgba(90, 200, 255, 0.9); }
+.scoreTeam--red  .scoreTeamName { color: rgba(220, 75, 85, 0.9); }
+
+.scoreStats {
+  display: flex;
+  gap: 10px;
+  align-items: flex-end;
+}
+
+.scoreStat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1px;
+}
+
+.scoreStatVal {
+  font-size: 20px;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.scoreStatLabel {
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  opacity: 0.55;
 }
 
 .scoreTeam--blue .scoreValue {
   color: rgba(90, 200, 255, 1);
-  text-shadow: 0 0 20px rgba(90, 200, 255, 0.4);
+  text-shadow: 0 0 16px rgba(90, 200, 255, 0.4);
 }
 
-.scoreTeam--red .scoreTeamName {
-  color: rgba(220, 75, 85, 0.9);
+.scoreTeam--blue .scoreVP {
+  color: rgba(130, 230, 130, 1);
+  text-shadow: 0 0 16px rgba(90, 200, 130, 0.35);
 }
 
 .scoreTeam--red .scoreValue {
   color: rgba(220, 75, 85, 1);
-  text-shadow: 0 0 20px rgba(220, 75, 85, 0.4);
+  text-shadow: 0 0 16px rgba(220, 75, 85, 0.4);
+}
+
+.scoreTeam--red .scoreVP {
+  color: rgba(230, 150, 80, 1);
+  text-shadow: 0 0 16px rgba(220, 130, 60, 0.35);
 }
 
 .scoreSep {
-  opacity: 0.4;
+  opacity: 0.35;
   font-size: 18px;
+  font-weight: 800;
+  flex-shrink: 0;
 }
 
 /* ── Main app layout ──────────────────────────────────────────────────────── */
@@ -402,33 +435,36 @@ body {
 .infoTable {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 4px;
   font-family: "Courier New", Courier, monospace;
 }
 
 .infoRow {
   display: flex;
   align-items: baseline;
-  gap: 8px;
+  gap: 0;
   min-height: 22px;
 }
 
 .infoKey {
-  flex: 0 0 auto;
+  flex: 0 0 55%;
   font-size: 11px;
   opacity: 0.65;
   white-space: nowrap;
-  min-width: 130px;
   text-align: right;
+  padding-right: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .infoVal {
-  flex: 1;
+  flex: 0 0 45%;
   font-size: 11px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-family: "Courier New", Courier, monospace;
+  text-align: left;
 }
 
 .infoVal code {
@@ -801,6 +837,75 @@ button:hover {
   font-weight: 700;
 }
 
+/* ── Element bonus section ────────────────────────────────────────────────── */
+
+.elemBonusSection {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 14px;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 220, 100, 0.15);
+  background: rgba(255, 200, 50, 0.04);
+  font-family: "Courier New", Courier, monospace;
+  font-size: 12px;
+}
+
+.elemBonusSectionTitle {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  opacity: 0.7;
+  margin-bottom: 2px;
+}
+
+.elemBonusRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+}
+
+.elemBonusTeam {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.elemBonusTeam--blue .elemBonusLabel { color: rgba(90, 200, 255, 0.75); font-size: 10px; }
+.elemBonusTeam--blue .elemBonusVal   { color: rgba(90, 200, 255, 1); font-weight: 800; font-size: 13px; }
+.elemBonusTeam--red  .elemBonusLabel { color: rgba(220, 75, 85, 0.75); font-size: 10px; }
+.elemBonusTeam--red  .elemBonusVal   { color: rgba(220, 75, 85, 1); font-weight: 800; font-size: 13px; }
+
+.elemBonusUnit {
+  font-size: 10px;
+  opacity: 0.6;
+}
+
+.elemBonusSep {
+  opacity: 0.3;
+}
+
+.elemBonusDetail {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  padding-top: 6px;
+  margin-top: 2px;
+  font-size: 11px;
+}
+
+.elemBonusDetailLabel {
+  opacity: 0.55;
+}
+
+.elemBonusDetailVal {
+  font-weight: 700;
+  color: rgba(255, 220, 100, 0.9);
+}
+
 /* ── Options / admin section ──────────────────────────────────────────────── */
 
 .infoSection--options {
@@ -984,11 +1089,14 @@ canvas {
   /* Scoreboard wraps nicely on narrow screens */
   .scoreBoard {
     flex-wrap: wrap;
-    font-size: 18px;
   }
 
   .team-logo {
-    width: 44px;
-    height: 44px;
+    width: 40px;
+    height: 40px;
+  }
+
+  .scoreStatVal {
+    font-size: 16px;
   }
 }