/* assets/css/record.css - TEMA 2026 */

/* =========================================
   1. FONTS & VARIABILI
   ========================================= */
@font-face {
  font-family: 'DrukWide';
  src: url('/assets/doc/DrukTextWide-MediumItalic-Trial.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'HelveticaBold';
  src: url('/assets/doc/HelveticaBold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

:root {
  --rosa-neon: #ff19ff;
  --viola: #790cfd; 
  --bianco: #ffffff;
  --nero-transp: rgba(18, 0, 40, 0.85);
  --verde: #00ff66;
  --rosso: #ff3333;
}

/* =========================================
   2. BASE GLOBALE
   ========================================= */
body {
  color: var(--bianco);
  font-family: 'HelveticaBold', sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: #120028;
}

body::before {
  content: "";
  position: fixed;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100vh;
  z-index: -1;
  transform: translateZ(0);
  will-change: transform;
  background:
    linear-gradient(rgba(18, 0, 40, 0.5), rgba(18, 0, 40, 0.5)),
    url('/assets/imm/gradiente26.jpg') center/cover no-repeat;
}

.druk-font { 
  font-family: 'DrukWide', sans-serif; 
  letter-spacing: 0; 
  text-transform: uppercase;
}
.helvetica-font { 
  font-family: 'HelveticaBold', sans-serif; 
  letter-spacing: 0; 
  text-transform: uppercase;
}

.neon-text { 
  color: var(--rosa-neon); 
}

.container {
  max-width: 737px;
  width: 95%;
  margin: 13px auto;
  padding: 0;
  animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn { 
  from { opacity: 0; transform: translateY(13px); } 
  to { opacity: 1; transform: translateY(0); } 
}

/* =========================================
   3. HEADER & SEZIONI
   ========================================= */
.records-intro {
  text-align: center;
  background: var(--nero-transp);
  padding: 20px;
  border-radius: 11px;
  margin-bottom: 27px;
  border: 1px solid rgba(255, 25, 255, 0.15);
}

.main-title { font-size: 1.68rem; margin: 0; color: var(--bianco); }
.subtitle { font-size: 0.67rem; color: #aaa; margin-top: 7px; letter-spacing: 0px; }

.record-section { margin-bottom: 34px; }
.section-header {
  color: var(--bianco);
  border-bottom: 1px solid rgba(255, 25, 255, 0.3);
  padding-bottom: 7px; 
  margin-bottom: 17px;
  font-size: 0.94rem;
}

.records-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(214px, 1fr));
  gap: 13px;
}

/* =========================================
   4. RECORD CARDS
   ========================================= */
/* Reso applicabile anche ai tag <a> per la sezione match, con reset totale decorazioni */
.record-card, a.record-card {
  background: rgba(18, 0, 40, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 11px;
  padding: 17px;
  display: flex; 
  flex-direction: column;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  position: relative; 
  text-decoration: none !important; /* Forza rimozione sottolineature */
  color: inherit;
  outline: none !important; /* Rimuove bordi di focus del browser */
  -webkit-tap-highlight-color: transparent; /* Rimuove flash blu/rosso su mobile */
}

a.record-card:hover, a.record-card:focus, a.record-card:active {
  text-decoration: none !important;
  outline: none !important;
  transform: translateY(-3px);
  border-color: rgba(255, 25, 255, 0.4);
  box-shadow: 0 5px 13px rgba(0, 0, 0, 0.3);
}

/* Hover normale per i div .record-card */
div.record-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 25, 255, 0.4);
  box-shadow: 0 5px 13px rgba(0, 0, 0, 0.3);
}

.rec-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,0.05);
  padding-bottom: 10px;
}
.rec-header i { color: var(--rosa-neon); font-size: 0.87rem; }
.rec-header h4 { margin: 0; color: #ddd; font-size: 0.6rem; }

.rec-body { display: flex; align-items: center; gap: 13px; flex: 1; }
.rec-visual { flex-shrink: 0; position: relative; }

/* Giocatori: Mantengono il bordo rosa/vetro */
.rec-img-player {
  width: 60px; height: 60px; 
  object-fit: cover;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255,255,255,0.05);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.record-card:hover .rec-img-player {
  transform: scale(1.04);
  border-color: var(--rosa-neon);
}

/* Squadre: Clean, no bordi, solo glow all'hover */
.rec-img-team {
  width: 60px; height: 60px; 
  object-fit: contain;
  background: transparent;
  border: none;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.1));
}
.record-card:hover .rec-img-team {
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(255, 25, 255, 0.6));
}

.rec-multi-visual { display: flex; flex-wrap: wrap; gap: 5px; max-width: 67px; }
.rec-multi-img {
  width: 28px; height: 28px; border-radius: 5px; object-fit: cover;
  border: 1px solid rgba(255,255,255,0.2); transition: all 0.3s;
}
.rec-multi-img:hover { border-color: var(--rosa-neon); transform: scale(1.1); }

/* Dati (rimosso del tutto l'hover sul nome) */
.rec-data { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; }
.rec-value { font-size: 1rem; color: var(--rosa-neon); line-height: 1; margin-bottom: 5px; white-space: nowrap; }
.rec-name { color: var(--bianco); font-size: 0.67rem; line-height: 1.2; text-transform: uppercase; }
.rec-name.long-name { font-size: 0.57rem; }
.rec-sub { font-size: 0.47rem; color: #999; margin-top: 4px; padding: 3px 5px; background: rgba(255, 255, 255, 0.05); border-radius: 3px; }
.rec-desc { font-size: 0.54rem; line-height: 1.4; color: #bbb; margin-top: 8px; font-family: 'HelveticaBold', sans-serif; font-weight: normal; }

/* =========================================
   5. MATCH CARD
   ========================================= */
.match-card { grid-column: span 1; cursor: pointer; }
.rec-body-match { display: flex; flex-direction: column; align-items: center; width: 100%; }
.match-teams-display { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 7px; width: 100%; }
.match-teams-display img { width: 30px; height: 30px; object-fit: contain; }
.match-score-big { font-size: 1.34rem; color: var(--bianco); margin: 0 7px; text-decoration: none !important; }
.match-names { color: #aaa; font-size: 0.57rem; margin-bottom: 10px; letter-spacing: 0px; text-decoration: none !important; }

.match-main-stat {
  font-size: 0.8rem; color: var(--rosa-neon); 
  border: 1px solid rgba(255, 25, 255, 0.3); padding: 4px 11px;
  border-radius: 5px; background: rgba(255, 25, 255, 0.05); white-space: nowrap;
}

/* =========================================
   6. MOBILE
   ========================================= */
@media (max-width: 515px) {
  .records-intro { padding: 13px; margin-bottom: 20px; }
  .main-title { font-size: 1.2rem; }
  .section-header { font-size: 0.8rem; }
  .subtitle { font-size: 0.55rem; }  
  .records-grid { grid-template-columns: 1fr; gap: 10px; }
  .record-card { padding: 13px; }
  .rec-img-player, .rec-img-team { width: 47px; height: 47px; border-radius: 8px; }
  .rec-value { font-size: 1rem; }
  .rec-name { font-size: 0.6rem; }
  .match-score-big { font-size: 1.2rem; }
  .match-teams-display img { width: 27px; height: 27px; }
}