@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg: #0a0906; --bg-alt: #100e0a; --panel: #16130d; --panel-alt: #1c1811;
  --line: #3a2e18; --line-soft: #2a2213; --gold: #d9b34d; --gold-bright: #f0cd6b;
  --gold-dim: #8a7332; --text: #f3ecd8; --text-dim: #b6ac95; --text-faint: #7d7460;
  --c0:#efe9d6; --c2:#d9772e; --c5:#3f7fc4; --c8:#b6392c; --c10:#e8bd2e; --c20:#4a9d54;
  --radius-lg: 14px; --radius-md: 9px; --radius-sm: 6px;
}
*{ box-sizing:border-box; }
html,body{ 
  margin:0; 
  padding:0; 
  background-color: var(--bg);
  
  /* Image on top, gradient on the bottom */
  background-image: 
    url('imageai.png'),
    radial-gradient(ellipse at top, #191408 0%, var(--bg) 60%);
    
  /* Image at top right, gradient at top center */
  background-position: 
    top right, 
    top center;
    
  background-repeat: 
    no-repeat, 
    no-repeat;
    
  /* ADJUST THE 160px HERE:
     160px is roughly the height of the top padding + the header. 
     If it overlaps the table, lower it to 140px. 
     If it's too short, increase it to 180px. */
  background-size: 
    auto 180px, 
    cover; 
  
  background-blend-mode: lighten, normal;
  
  color: var(--text); 
  font-family:'Inter', sans-serif; 
  min-height:100vh; 
}
/* html,body{ margin:0; padding:0; 
    background: var(--bg); color: var(--text);
    background: radial-gradient(ellipse at top, #191408 0%, var(--bg) 55%); color: var(--text);
    font-family:'Inter', sans-serif; min-height:100vh; } */
.app{ max-width:1680px; margin:0 auto; padding: clamp(12px, 2.2vw, 28px); display:grid;
  grid-template-columns: minmax(0,1fr) minmax(260px, 320px);
  grid-template-areas: "header header" "table  side" "foot   foot"; gap: clamp(10px, 1.6vw, 20px); }
@media (max-width: 980px){ .app{ grid-template-columns: 1fr; grid-template-areas: "header" "table" "side" "foot"; } }

.header{ 
    grid-area:header; display:flex; align-items:center; gap:20px; 
    /* background: linear-gradient(180deg, var(--panel-alt), var(--panel));  */
    /* border:1px solid var(--line); border-radius: var(--radius-lg);  */
    padding: 16px 24px; position:relative; overflow:hidden; }
.header::after{ content:""; position:absolute; inset:0; 
    /* background: repeating-linear-gradient(90deg, transparent 0 38px, rgba(217,179,77,.05) 38px 39px);  */
    pointer-events:none; }
.crest{ width:64px; height:64px; border-radius:50%; border:2px solid var(--gold); display:flex; align-items:center; justify-content:center; font-size:28px; flex-shrink:0; background: radial-gradient(circle at 35% 30%, #2a2110, #120f08); box-shadow: inset 0 0 0 3px rgba(217,179,77,.15); overflow:hidden; }
.header-titles{ flex:1; min-width:0; text-align:center; }
.header-titles h1{ font-family:'Cinzel', serif; font-weight:900; letter-spacing:3px; font-size: clamp(20px, 3vw, 34px); margin:0 0 4px; color: var(--gold-bright); text-shadow: 0 0 18px rgba(217,179,77,.25); }
.header-titles .sub{ font-family:'Cinzel', serif; font-weight:700; letter-spacing:5px; font-size: clamp(11px, 1.3vw, 15px); color: var(--text-dim); margin:0 0 6px; }
.header-titles .dates{ font-size:12px; color: var(--gold-dim); letter-spacing:2px; }
.header-side{ width:64px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.live-dot{ display:flex; align-items:center; gap:6px; font-size:10px; color:var(--text-faint); letter-spacing:1px; }
.live-dot span.dot{ width:8px; height:8px; border-radius:50%; background:#4a9d54; box-shadow:0 0 6px #4a9d54; }
.live-dot.stale span.dot{ background:#7d7460; box-shadow:none; }
@media (max-width:640px){ .header{ flex-wrap:wrap; justify-content:center; text-align:center; } .header-side{ display:none; } }

.table-card{ grid-area:table; background: var(--panel); border:1px solid var(--line); border-radius: var(--radius-lg); padding:16px; min-width:0; }
.table-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.table-toolbar h2{ font-family:'Cinzel',serif; font-size:14px; letter-spacing:2px; color: var(--gold); margin:0; text-transform:uppercase; }
.btn{ font-family:'Inter',sans-serif; font-size:12px; font-weight:600; color: var(--text); background: var(--panel-alt); border:1px solid var(--line); border-radius: var(--radius-sm); padding:7px 12px; cursor:pointer; letter-spacing:.3px; transition: border-color .15s, color .15s; }
.btn:hover{ border-color: var(--gold-dim); color: var(--gold-bright); }
.btn.active{ background: rgba(217,179,77,.12); border-color: var(--gold); color: var(--gold-bright); }

.table-scroll{ overflow-x:auto; }
table.scoretable{ border-collapse:separate; border-spacing:0; width:100%; min-width:820px; font-size:13px; }
.scoretable thead th{ font-weight:700; text-transform:uppercase; letter-spacing:.5px; font-size:10.5px; color: var(--text-faint); padding:6px 4px; text-align:center; border-bottom:1px solid var(--line-soft); white-space:nowrap; }
.scoretable thead tr.grp th{ font-family:'Cinzel',serif; font-size:11px; letter-spacing:1.5px; color: var(--gold); padding-bottom:8px; border-bottom:1px solid var(--line); }
.scoretable thead th.col-team{ text-align:left; }
.scoretable tbody td{ padding:6px 4px; text-align:center; vertical-align:middle; border-bottom:1px solid var(--line-soft); }
.scoretable tbody tr.rank-1 td{ background: rgba(217,179,77,.08); }
.td-num{ color: var(--text-faint); font-weight:700; font-size:13px; width:26px; }
.td-team{ text-align:left; min-width:150px; }
.team-cell{ display:flex; align-items:center; gap:8px; }
.team-icon{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; border:1px solid var(--line); background: var(--panel-alt); overflow:hidden; }
.team-icon img { width: 100%; height: 100%; object-fit: cover; }
.team-name{ font-weight:700; letter-spacing:.5px; font-size:12.5px; }
.shot{ width:26px; height:26px; border-radius:50%; margin:0 auto; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); border:1px solid rgba(0,0,0,.35); position:relative; }
.shot.unset{ background:transparent !important; border:1px dashed var(--line); box-shadow:none; }
.shot.bonus-green{ border: 2px solid #4a9d54; box-shadow: 0 0 6px #4a9d54; }
.shot.bonus-red{ border: 2px solid #c0392b; box-shadow: 0 0 6px #c0392b; }
.shot.highlight-next { 
    border: 2px solid var(--gold-bright); 
    box-shadow: 0 0 8px var(--gold-bright); 
    animation: pulse .8s infinite alternate; 
    z-index: 10;
}
@keyframes pulse { 
    from { box-shadow: 0 0 2px var(--gold-bright); } 
    to { box-shadow: 0 0 12px var(--gold-bright); } 
}
.sum-cell{ font-weight:800; font-size:14px; color: var(--text); width:44px; }
.sum-cell.r1{ border-left:1px solid var(--line-soft); }
.sum-cell.grand{ font-family:'Cinzel',serif; font-size:17px; color: var(--gold-bright); border-left:1px solid var(--line); width:54px; }
.rank-badge{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; font-weight:800; font-size:13px; font-family:'Cinzel',serif; color: var(--text); background: var(--panel-alt); border:1px solid var(--line); }
.rank-badge.r1{ background: linear-gradient(160deg,#e9c765,#a8842a); color:#2a1f06; border-color:#e9c765; }
.rank-badge.r2{ background: linear-gradient(160deg,#d7d7d7,#8f8f8f); color:#222; border-color:#d7d7d7; }
.rank-badge.r3{ background: linear-gradient(160deg,#c98f5c,#8c5a30); color:#2a1a08; border-color:#c98f5c; }

.side{ grid-area:side; display:flex; flex-direction:column; gap:16px; min-width:0; }
/* .side-card{ background: var(--panel); border:1px solid var(--line); border-radius: var(--radius-lg); padding:16px; text-align:center; } */
.side-card { 
  background: var(--panel); 
  border: 1px solid var(--line); 
  border-radius: var(--radius-lg); 
  padding: 16px; 
  text-align: center; 
  
  /* ΝΕΕΣ ΠΡΟΣΘΗΚΕΣ */
  flex: 1; /* Αναγκάζει τις κάρτες να μοιραστούν ομοιόμορφα όλο το διαθέσιμο ύψος της στήλης */
  display: flex; 
  flex-direction: column; 
  justify-content: center; /* Κεντράρει το περιεχόμενο (στόχος, χρονόμετρο) κατακόρυφα */
  align-items: center;     /* Κεντράρει το περιεχόμενο οριζόντια */
}
.side-card h3{ font-family:'Cinzel',serif; font-size:12px; letter-spacing:1.5px; color: var(--gold); margin:0 0 12px; text-transform:uppercase; }
.legend{ display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; text-align:left; margin-top:12px; font-size:12px; }
.legend-item{ display:flex; align-items:center; gap:6px; color: var(--text-dim); }
.legend-dot{ width:12px; height:12px; border-radius:50%; flex-shrink:0; border:1px solid rgba(0,0,0,.3); }
.target-svg{ display:block; margin:0 auto; }
.countdown-wrap{ position:relative; width:150px; height:150px; margin:0 auto; }
.countdown-num{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Cinzel',serif; font-size:44px; font-weight:900; color: var(--text); }
.countdown-state{ margin-top:10px; font-size:11px; letter-spacing:1.5px; font-weight:700; }
.countdown-state.run{ color:#4a9d54; }
.countdown-state.pause{ color:#e8bd2e; }
.countdown-state.done{ color:#c0392b; }

.foot{ grid-area:foot; display:grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
@media (max-width:1200px){ .foot{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:640px){ .foot{ grid-template-columns: repeat(2,1fr); } }
/* .foot-box{ background: var(--panel); border:1px solid var(--line); border-radius: var(--radius-lg); padding:14px 12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:118px; text-align:center; } */
/* .foot-label{ font-size:10px; letter-spacing:1.2px; color: var(--gold-dim); font-weight:700; text-transform:uppercase; } */
.foot-box { 
  background: var(--panel); 
  border: 1px solid var(--line); 
  border-radius: var(--radius-lg); 
  
  /* Αυξάνουμε το πάνω padding (34px) για να υπάρχει "κενός" χώρος αποκλειστικά για την ετικέτα */
  padding: 34px 12px 14px 12px; 
  
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; /* Το περιεχόμενο θα κεντράρεται πάντα κατακόρυφα */
  gap: 6px; 
  min-height: 118px; 
  text-align: center; 
  
  position: relative; /* Απαραίτητο σημείο αναφοράς για να τοποθετήσουμε την ετικέτα */
}

.foot-label { 
  font-size: 10px; 
  letter-spacing: 1.2px; 
  color: var(--gold-dim); 
  font-weight: 700; 
  text-transform: uppercase; 
  
  /* Βγάζουμε την ετικέτα από τη ροή του flexbox και την "καρφώνουμε" στο πάνω μέρος */
  position: absolute; 
  top: 14px; 
  left: 0; 
  width: 100%; /* Εξασφαλίζει ότι το κείμενο θα παραμείνει στο κέντρο οριζόντια */
}
.foot-value-lg{ font-family:'Cinzel',serif; font-weight:900; font-size:30px; color: var(--gold-bright); }
.foot-team-icon{ width:70px; height:70px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; border:1px solid var(--line); background: var(--panel-alt); overflow:hidden; }
.foot-team-icon img { width:100%; height:100%; object-fit:cover; }
.foot-team-name{ font-weight:800; font-size:13px; letter-spacing:.5px; }
.foot-player-name{ font-weight:700; font-size:13px; text-align:center; }
.foot-sub{ font-size:11px; color:var(--text-dim); }
/* .laurel{ font-size:22px; } */
/* Container to hold both the laurel and the text */
.laurel-wrap {
  position: relative;
  width: 130px;   /* Adjust this to make the laurel bigger or smaller */
  height: 130px;  /* Keep width and height equal for a square aspect ratio */
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The SVG acts as a background layer */
.laurel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Optional: filter: drop-shadow(0 0 6px rgba(217,179,77,.3)); */
}

/* The rank text sits perfectly on top */
.rank-inside {
  position: relative;
  z-index: 1;
  font-size: 45px; /* Size of the number */
  line-height: 1;
  margin-top: -10px; /* Uncomment and tweak if the laurel's visual center is slightly off */
}

.pass-badge{ font-family:'Cinzel',serif; font-weight:800; font-size:13px; letter-spacing:1px; padding:6px 10px; border-radius:6px; display:inline-flex; align-items:center; gap:6px;}
.pass-badge.pass{ color:#4a9d54; background: rgba(74,157,84,.14); border:1px solid #3a6d40; box-shadow: 0 0 12px rgba(74,157,84,.2); }
.pass-badge.idle{ color:var(--text-faint); background:var(--panel-alt); border:1px solid var(--line); filter:grayscale(100%); opacity:0.6; }
.footer-strip{ grid-column:1/-1; text-align:center; padding-top:6px; font-size:11px; letter-spacing:3px; color: var(--text-faint); font-family:'Cinzel',serif; }
.footer-strip a{ color: var(--gold-bright); text-decoration:none; font-weight:700; transition: color .2s ease, text-shadow .2s ease; }
.footer-strip a:hover,
.footer-strip a:focus-visible{ color: var(--gold); text-shadow: 0 0 8px rgba(240,205,107,.35); text-decoration: underline; text-underline-offset: 3px; }