/* =========================================================
   RESULT -- Screen-spezifische Praezisierung fuer #view-end, gegen dieselbe
   Designgrammatik wie Profil/Rangliste. Die Datenschicht war hier schon vorher
   vollstaendig real (renderEndPerformanceBreakdown/renderEndPercentile in app.js)
   -- reine visuelle Politur, keine Datenlogik angefasst.
   ========================================================= */

/* Hero: eigenes Panel statt nur Unterstrich-Trennung, groesseres Klassen-Emblem,
   kraeftigerer Score als klarer Blickfang (Master Brief Abschnitt 29: Ergebnis
   dramatisieren, danach Analyse liefern). */
.end-hero {
    border: 1px solid var(--ec-border-white); border-radius: var(--radius-md);
    background: linear-gradient(110deg, var(--ec-panel), var(--ec-panel-elevated));
    box-shadow: 0 12px 40px rgba(0,0,0,.30);
    padding: var(--space-6) var(--space-6); gap: var(--space-6);
}
.end-badge-wrap { width: 120px; height: 120px; }
.end-badge-img { width: 120px; height: 120px; filter: drop-shadow(0 0 18px rgba(255,215,0,0.28)); }
.end-hero-text .honor-title { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.25; margin-bottom: var(--space-2); }
.end-hero-text .end-comment { font-size: var(--text-md); line-height: 1.6; }
.end-score-block { padding-left: var(--space-6); border-left: 1px solid var(--ec-border-white); }
.end-score-label { font-size: var(--text-xs); letter-spacing: 0.16em; color: var(--ec-cyan); }
.end-score-block .end-score { font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--ec-cyan); text-shadow: 0 0 20px rgba(0,240,255,0.20); }

/* Stat-Kacheln (RICHTIG/BESTE SERIE/DAUER/PUNKTE): durchgehende Leiste statt
   einzeln umrandeter Kacheln -- gleiches Prinzip wie .profile-stat-tiles-row/
   .lb-stats-grid. Ersetzt gleichzeitig die zwei !important-Regeln, die vorher
   noetig waren, um die urspruengliche Profil-Kachel-Regel zu ueberstimmen --
   echte Kaskaden-Ordnung (diese Datei laedt zuletzt) macht das ueberfluessig. */
.end-stat-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: var(--space-4) 0;
    border: 1px solid var(--ec-border-white); border-radius: var(--radius-sm); overflow: hidden;
    background: var(--ec-panel-elevated);
}
@media (min-width: 640px) { .end-stat-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.end-stat-tiles .header-stat-tile {
    border: 0; border-right: 1px solid var(--ec-border-white); border-bottom: 1px solid var(--ec-border-white);
    border-radius: 0; background: transparent; padding: var(--space-3) var(--space-4);
}
/* Mobil: 2 Spalten x 2 Reihen -- rechte Spalte und letzte Reihe ohne Trennlinie. */
.end-stat-tiles .header-stat-tile:nth-child(2n) { border-right: 0; }
.end-stat-tiles .header-stat-tile:nth-child(n+3) { border-bottom: 0; }
/* Ab 640px: 4 Spalten x 1 Reihe -- keine Reihen-Trennlinie noetig, nur die letzte
   Spalte bleibt ohne rechten Rand. */
@media (min-width: 640px) {
    .end-stat-tiles .header-stat-tile { border-right: 1px solid var(--ec-border-white); border-bottom: 0; }
    .end-stat-tiles .header-stat-tile:last-child { border-right: 0; }
}

/* Buttons: zentriert, feste Mindestbreiten statt zufaelliger Auto-Breite --
   Primaeraktion (NEUE RUNDE) muss die Aktion sein, die am meisten Gewicht traegt. */
.end-btn-row { justify-content: center; gap: var(--space-3); margin-top: var(--space-5); }
.end-btn-row #new-round-btn { min-width: 240px; }
.end-btn-row #replay-same-btn, .end-btn-row #share-btn { min-width: 190px; }