/* Scoreboard Styling mit FCS-Farben */
.st-scoreboard{display:flex;align-items:center;justify-content:space-between;background:#fff;padding:1rem;border-radius:4px;box-shadow:0 1px 5px rgba(0,0,0,0.1);margin-bottom:1rem;}
.st-scoreboard .team{display:flex;flex-direction:column;align-items:center;width:25%;}
.st-scoreboard .team img{max-height:50px;margin-bottom:0.5rem;}
.st-scoreboard .team-name{font-size:1rem;font-weight:600;text-align:center;}
.scoreboard-score{flex:1;text-align:center;}
.scoreboard-score .phase{font-size:0.85rem;color:#666;text-transform:uppercase;margin-bottom:0.25rem;}
.scoreboard-score .score-numbers{display:flex;justify-content:center;align-items:center;margin:0.25rem 0;}
.scoreboard-score .score-numbers .num{background:#e6f0ff;width:2rem;height:2rem;line-height:2rem;margin:0 0.25rem;border-radius:0.25rem;font-size:1.25rem;font-weight:700;color:#00519e;}
.scoreboard-score .score-numbers .colon{font-size:1.25rem;font-weight:700;color:#00519e;}
.game-time{font-weight:600;color:#00519e;}

/* Verbesserte Fanradio Styles */
.st-fanradio{margin:1rem 0;}
.st-fanradio-controls{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem;}
.st-fanradio-controls label{font-weight:600;display:flex;align-items:center;gap:0.5rem;}
.st-fanradio-minimize{background:#00519e;color:#fff;border:none;padding:0.25rem 0.5rem;border-radius:4px;cursor:pointer;font-size:0.85rem;}
.st-fanradio-minimize:hover{background:#003d75;}
.st-fanradio-player{margin:0.5rem 0;transition:all 0.3s ease;}
.st-fanradio-player.minimized{position:fixed;bottom:20px;right:20px;width:300px;z-index:1000;background:#fff;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.3);padding:0.5rem;}
.st-fanradio-player.minimized .st-fanradio-iframe{height:80px;}
.st-fanradio-iframe{width:100%;height:120px;border:none;border-radius:4px;}

/* Mobile Optimierung */
@media (max-width: 768px) {
  .st-fanradio-iframe{
    height:150px; /* Höher für mobile Geräte */
  }
  .st-fanradio-player.minimized{
    width:280px;
    bottom:10px;
    right:10px;
  }
  .st-fanradio-player.minimized .st-fanradio-iframe{
    height:100px;
  }
}

@media (max-width: 480px) {
  .st-fanradio-iframe{
    height:160px; /* Noch höher für sehr kleine Bildschirme */
  }
  .st-fanradio-player.minimized{
    width:260px;
  }
}

/* Game Settings Form */
.st-game-settings{display:flex;gap:0.5rem;margin:1rem 0;align-items:center;flex-wrap:wrap;}
.st-game-settings label{display:flex;align-items:center;gap:0.25rem;}
.st-game-settings select{padding:0.25rem;border:1px solid #ddd;border-radius:4px;}
.st-game-settings button{padding:0.25rem 0.75rem;background:#00519e;color:#fff;border:none;border-radius:4px;cursor:pointer;}
.st-game-settings button:hover{background:#003d75;}

.st-entry-form{display:flex;gap:0.5rem;margin-top:1rem;}
.st-entry-form input[type="text"]{flex:2;padding:0.5rem;border:1px solid #ddd;border-radius:4px;}
.st-entry-form select{flex:1;padding:0.5rem;border:1px solid #ddd;border-radius:4px;}
.st-entry-form button{padding:0.5rem 1rem;background:#00519e;color:#fff;border:none;border-radius:4px;cursor:pointer;}
.st-entry-form button:hover{background:#003d75;}

/* Admin Buttons */
.st-admin-buttons{margin-top:0.5rem;display:flex;gap:0.5rem;flex-wrap:wrap;}
.st-admin-button{background:#dc3545;color:#fff;border:none;padding:0.25rem 0.5rem;font-size:0.8rem;border-radius:4px;cursor:pointer;transition:background 0.2s;}
.st-admin-button:hover{background:#c82333;}
.st-admin-button.time-reset{background:#6c757d;}
.st-admin-button.time-reset:hover{background:#5a6268;}

/* Löschen-Button für Timeline-Einträge */
.st-delete{
  position: absolute !important;
  right: 1rem !important;
  bottom: 0.5rem !important;
  color: white !important;
  background: #dc3545 !important;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  text-decoration: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 14px !important;
  font-weight: bold;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(220,53,69,0.5);
  transition: all 0.2s ease;
}

.st-delete:hover{
  background: #c82333 !important;
  transform: scale(1.05);
  text-decoration: none !important;
  color: white !important;
}

/* Spezielle Klasse für sofort richtig positionierte Buttons */
.st-delete-positioned {
  /* Alle Styles sind bereits durch .st-delete abgedeckt - diese Klasse dient nur als Marker */
}
.st-delete{position:absolute;right:1rem;bottom:.5rem;color:#900;font-size:1.2rem;text-decoration:none;}

/* TIMELINE - KORRIGIERTE DOT-POSITIONIERUNG */
.st-timeline{position:relative;margin:1rem 0;padding-left:30px;}
.st-timeline::before{content:"";position:absolute;left:15px;top:0;bottom:0;width:2px;background:#00519e;}
.st-timeline-item{position:relative;margin-bottom:1.5rem;}
.st-entry-icon{position:absolute;top:.5rem;right:1rem;font-size:1.25rem;line-height:1;}
.st-entry-icon.yellow-red{font-size:1rem;} /* Kleiner für doppelte Karte */

/* DOT - KORRIGIERT: Perfekt auf der Timeline-Linie zentriert */
.st-dot{
  position:absolute;
  left:-20px; /* Korrekter Wert für perfekte Zentrierung auf der Timeline-Linie */
  top:.5rem;
  width:12px;
  height:12px;
  background:#fff;
  border:2px solid #00519e;
  border-radius:50%;
  z-index:2; /* Über der Timeline-Linie */
}

.st-content{position:relative;margin-left:40px;background:#fff;padding:.75rem 4.5rem .75rem 1rem;border-radius:4px;box-shadow:0 2px 5px rgba(0,0,0,0.1);min-width:300px;} /* Zurück zum ursprünglichen Wert */
.st-time{display:block;font-weight:bold;color:#00519e;margin-bottom:.5rem;font-size:.9rem;min-height:1.2rem;display:flex;align-items:center;} /* Flex für Logo-Alignment */
.st-time:empty{visibility:hidden;} /* Verstecken aber Platz behalten - nicht display:none */

/* Kleine Team-Logos in Posts */
.team-logo-small {
  width: 16px;
  height: 16px;
  margin-right: 0.3rem;
  border-radius: 2px;
  object-fit: contain;
}

/* Spieler-Name neben der Zeit */
.st-player-name {
  margin-left: 0.5rem;
  color: #00519e;
  font-weight: 600;
  font-size: 0.85rem;
}

/* Content Text */
.st-text {
  font-size: 1rem;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  position: relative;
}

.st-content-text {
  flex: 1;
}

/* Entry Icons - rechts positioniert wie im Screenshot */
.st-entry-icon {
  position: absolute;
  right: 0.5rem;
  top: 0.25rem;
  font-size: 1.5rem;
  line-height: 1;
  background: #fff;
  padding: 0.25rem;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.st-entry-icon.yellow-red {
  font-size: 1.2rem; /* Kleiner für doppelte Karte */
}

/* Spieler-Informationen wie im Screenshot - großes Bild */
.st-player-info {
  margin-right: 1rem;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}

.st-player-thumbnail {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid #00519e;
  display: block;
}

/* Styling für Icon-Labels */
.st-time .icon-label {
  background: #00519e;
  color: white;
  font-size: 0.7rem;
  font-weight: bold;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  margin-left: 0.5rem;
  text-transform: uppercase;
}

.st-text{font-size:1rem;line-height:1.4;}

/* Mobile Optimierung */
@media (max-width: 768px) {
  .st-scoreboard {
    padding: 0.75rem;
  }
  
  .st-scoreboard .team {
    width: 30%;
  }
  
  .st-scoreboard .team img {
    max-height: 40px;
  }
  
  .st-scoreboard .team-name {
    font-size: 0.9rem;
  }
  
  .st-entry-form {
    flex-direction: column;
  }
  
  .st-entry-form input[type="text"],
  .st-entry-form select {
    flex: none;
    width: 100%;
  }
  
  .st-content {
    padding-right: 3rem; /* Weniger Platz für Delete-Button */
    min-width: 250px; /* Auch auf Tablet etwas breiter */
  }
  
  /* Dot-Position auch auf Tablet korrekt - höhere Spezifität */
  .st-timeline-item .st-dot {
    left: -16px !important; /* Weniger weit links für Mobile Browser */
  }
  
  /* Icons kleiner auf mobilen Geräten */
  .st-entry-icon {
    font-size: 1.25rem;
  }
  
  .st-entry-icon.yellow-red {
    font-size: 1rem;
  }
  
  /* Spieler-Bilder etwas kleiner auf mobilen Geräten */
  .st-player-thumbnail {
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 480px) {
  .st-scoreboard {
    padding: 0.75rem;
    /* NICHT flex-direction: column - das war das Problem! */
  }
  
  .st-scoreboard .team {
    width: 25%; /* Zurück zur ursprünglichen Breite */
    flex-direction: column; /* Teams bleiben vertikal */
    align-items: center;
  }
  
  .st-scoreboard .team img {
    max-height: 35px;
    margin-bottom: 0.25rem; /* Namen wieder unter dem Logo */
  }
  
  .st-scoreboard .team-name {
    font-size: 0.8rem;
    text-align: center;
  }
  
  .st-timeline {
    padding-left: 25px;
  }
  
  .st-content {
    margin-left: 35px;
    padding: 0.5rem 3rem 0.5rem 0.75rem; /* Mehr Platz rechts für Icons */
    min-width: 200px; /* Auch auf Smartphone etwas breiter */
  }
  
  /* Dot-Position für Smartphone - höhere Spezifität */
  .st-timeline-item .st-dot {
    left: -14px !important; /* Noch weniger weit links für sehr kleine Bildschirme */
  }
  
  .st-player-name {
    font-size: 0.8rem;
  }
  
  /* Icons noch kleiner auf sehr kleinen Bildschirmen */
  .st-entry-icon {
    font-size: 1rem;
    right: 0.25rem; /* Noch näher am Rand auf sehr kleinen Bildschirmen */
  }
  
  .st-entry-icon.yellow-red {
    font-size: 0.9rem;
  }
  
  /* Spieler-Bilder noch kleiner */
  .st-player-thumbnail {
    width: 50px;
    height: 50px;
  }
}