feat: Prepare per-team cooldown and cooldown fixing

public/style.css

@@ -302,6 +302,16 @@ body {
   flex: 1;
 }
 
+.scoreTeam--blue {
+  align-items: flex-end;
+  text-align: right;
+}
+
+.scoreTeam--red {
+  align-items: flex-start;
+  text-align: left;
+}
+
 .scoreTeamName {
   font-size: 10px;
   font-weight: 700;
@@ -365,6 +375,7 @@ body {
   font-size: 18px;
   font-weight: 800;
   flex-shrink: 0;
+  flex: 0 0 auto;
 }
 
 /* ── Main app layout ──────────────────────────────────────────────────────── */
@@ -482,12 +493,6 @@ body {
 /* Countdown row */
 #countdownWrap {
   opacity: 1;
-  transition: opacity 0.2s;
-}
-
-#countdownWrap.hidden {
-  visibility: hidden;
-  pointer-events: none;
 }
 
 .countdownLabel {
@@ -508,6 +513,21 @@ body {
   font-family: "Courier New", Courier, monospace;
 }
 
+/* When cooldown is available (not active) */
+#countdownWrap.cooldown--available .countdownLabel {
+  color: inherit;
+  opacity: 0.65 !important;
+  font-weight: normal;
+  text-transform: none;
+  letter-spacing: normal;
+}
+
+#countdownWrap.cooldown--available .countdownVal {
+  color: inherit;
+  font-size: 11px;
+  font-weight: normal;
+}
+
 .countdown {
   font-family: "Courier New", Courier, monospace;
   font-variant-numeric: tabular-nums;
@@ -657,9 +677,6 @@ button:hover {
   flex-direction: column;
   gap: 6px;
   padding: 8px 12px;
-  border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.03);
   font-family: "Courier New", Courier, monospace;
   font-size: 12px;
 }
@@ -668,6 +685,15 @@ button:hover {
   display: flex;
   align-items: center;
   gap: 8px;
+  flex: 1;
+}
+
+.econSummaryTeam--blue {
+  justify-content: flex-end;
+}
+
+.econSummaryTeam--red {
+  justify-content: flex-start;
 }
 
 .econSummaryTeam--blue .econSummaryLabel { color: rgba(90, 200, 255, 0.85); }
@@ -677,6 +703,8 @@ button:hover {
 
 .econSummarySep {
   opacity: 0.3;
+  flex: 0 0 auto;
+  margin: 0 6px;
 }
 
 /* ── Economic score (cumulative) ──────────────────────────────────────────── */
@@ -684,9 +712,9 @@ button:hover {
 .econSummaryRow {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
   width: 100%;
-  gap: 8px;
+  gap: 0;
 }
 
 .econSummaryRow--score {
@@ -844,34 +872,31 @@ button:hover {
   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);
+  padding: 8px 12px;
   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;
+  justify-content: center;
+  gap: 0;
 }
 
 .elemBonusTeam {
   display: flex;
   align-items: center;
   gap: 5px;
+  flex: 1;
+}
+
+.elemBonusTeam--blue {
+  justify-content: flex-end;
+}
+
+.elemBonusTeam--red {
+  justify-content: flex-start;
 }
 
 .elemBonusTeam--blue .elemBonusLabel { color: rgba(90, 200, 255, 0.75); font-size: 10px; }
@@ -886,6 +911,8 @@ button:hover {
 
 .elemBonusSep {
   opacity: 0.3;
+  flex: 0 0 auto;
+  margin: 0 6px;
 }
 
 .elemBonusDetail {
@@ -990,8 +1017,10 @@ button:hover {
   width: var(--map-size);
   height: var(--map-size);
   flex-shrink: 0;
+  flex-grow: 0;
   background: #050810;
   overflow: hidden;
+  align-self: flex-start;
 }
 
 canvas {