Add monthly MVP top 3 historical UI

frontend/assets/css/historico.css

@@ -152,8 +152,15 @@
   gap: 14px;
 }
 
+.historical-mvp-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
+  gap: 14px;
+}
+
 .historical-stat-card,
-.historical-match-card {
+.historical-match-card,
+.historical-mvp-card {
   position: relative;
   overflow: hidden;
   padding: 18px;
@@ -167,7 +174,10 @@
 .historical-stat-card p,
 .historical-stat-card strong,
 .historical-match-card p,
-.historical-match-card strong {
+.historical-match-card strong,
+.historical-mvp-card p,
+.historical-mvp-card strong,
+.historical-mvp-card span {
   margin: 0;
 }
 
@@ -185,6 +195,83 @@
   line-height: 1.4;
 }
 
+.historical-mvp-card {
+  display: grid;
+  gap: 16px;
+}
+
+.historical-mvp-card--rank-1 {
+  border-color: rgba(210, 182, 118, 0.34);
+  background:
+    radial-gradient(circle at top right, rgba(210, 182, 118, 0.16), transparent 42%),
+    linear-gradient(180deg, rgba(36, 32, 20, 0.96), rgba(12, 15, 11, 0.98));
+}
+
+.historical-mvp-card__top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.historical-mvp-card__rank {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 42px;
+  min-height: 42px;
+  padding: 0 12px;
+  border: 1px solid rgba(210, 182, 118, 0.26);
+  border-radius: 999px;
+  color: var(--accent-warm);
+  font-size: 0.76rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.historical-mvp-card__player {
+  font-size: 1.18rem;
+  line-height: 1.3;
+}
+
+.historical-mvp-card__score-label {
+  margin-bottom: 6px;
+  color: var(--muted);
+  font-size: 0.72rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.historical-mvp-card__score-value {
+  color: var(--accent-strong);
+  font-size: 1.8rem;
+  line-height: 1;
+}
+
+.historical-mvp-card__meta {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.historical-mvp-card__meta span {
+  display: block;
+  margin-bottom: 6px;
+  color: var(--muted);
+  font-size: 0.7rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.historical-mvp-card__footer {
+  padding-top: 12px;
+  border-top: 1px solid rgba(159, 168, 141, 0.12);
+  color: var(--text-soft);
+  font-size: 0.88rem;
+  line-height: 1.5;
+}
+
 .historical-state {
   margin: 0 0 16px;
   padding: 14px 16px;
@@ -306,6 +393,14 @@
     flex-direction: column;
   }
 
+  .historical-mvp-card__top {
+    flex-direction: column;
+  }
+
+  .historical-mvp-card__meta {
+    grid-template-columns: 1fr;
+  }
+
   .historical-tab {
     width: 100%;
   }