/* ==========================================================================
   90+ POLISH (Phase 10) — βελτιώσεις εμφάνισης, σε ΕΝΑ σημείο.
   Φορτώνεται ΤΕΛΕΥΤΑΙΟ, ώστε να υπερισχύει. Αν κάτι δεν σου αρέσει, αλλάζει εδώ.
   ========================================================================== */

/* ---------------- ΜΕΝΟΥ (navbar) ---------------- */
/* Πιο φαρδύ: το 90+ πιο αριστερά, και χώρος ώστε τίποτα να μη σπάει σε δύο γραμμές */
.navbar .nav-container { max-width: 1520px !important; width: 96% !important; gap: 2rem; }
.navbar { padding: .85rem 0 !important; }

.navbar .logo { font-size: 2.35rem !important; padding: .35rem 1rem !important; flex-shrink: 0; line-height: 1.1; }
.navbar .logo::after { font-size: 1.75rem !important; }

.navbar .nav-links { flex: 1; display: flex !important; align-items: center; justify-content: flex-end; gap: 1.55rem !important; flex-wrap: nowrap; }
.navbar .nav-links > a,
.navbar .nav-links .auth-widget a,
.navbar .nav-links .auth-widget span { white-space: nowrap; }
.navbar .nav-links > a {
    font-size: 1.02rem !important; font-weight: 700 !important; color: #f1f5f9 !important; letter-spacing: .01em;
    position: relative; padding: .35rem 0; transition: color .2s ease;
}
.navbar .nav-links > a:hover { color: #fff !important; }
/* Η ενεργή σελίδα: λεπτή υπογράμμιση στο χρώμα του site */
.navbar .nav-links > a.active { color: #fff !important; }
.navbar .nav-links > a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; border-radius: 2px; background: #ef4444; }

/* Δεξιά ομάδα: 🔔 · χρήστης · ομάδα · θέμα — ίδιο ύψος, στοιχισμένα */
.navbar .auth-widget { flex-wrap: nowrap !important; gap: .8rem !important; font-size: 1rem; }
.navbar .auth-widget > span { font-size: 1.02rem !important; }
.navbar .nt-bell { font-size: 1.3rem; }
.navbar .team-dropdown-btn, .navbar .theme-btn { white-space: nowrap; height: 40px; font-size: .9rem !important; padding: 0 1rem !important; }

/* Μεσαίες οθόνες (laptop): λίγο πιο πυκνά, αλλά πάντα σε μία γραμμή */
@media (max-width: 1400px) {
    .navbar .nav-links { gap: 1.1rem !important; }
    .navbar .nav-links > a { font-size: .95rem !important; }
    .navbar .logo { font-size: 2.05rem !important; }
}
@media (max-width: 1180px) {
    .navbar .nav-container { flex-wrap: wrap; justify-content: center; row-gap: .6rem; }
    .navbar .nav-links { justify-content: center; flex-wrap: wrap; row-gap: .5rem; }
}

/* ---------------- LIGHT MODE: τίποτα να μη «χάνεται» ---------------- */
body.light-mode .navbar .nav-links > a { color: #0f172a !important; }
body.light-mode .navbar .nav-links > a:hover, body.light-mode .navbar .nav-links > a.active { color: #000 !important; }
body.light-mode .navbar .auth-widget span, body.light-mode .navbar .auth-widget a { color: #0f172a !important; }

/* Πρωταθλήματα (Αγγλία, Ισπανία…): σκούρα γράμματα σε λευκό κουμπί */
body.light-mode .league-pill { background: #ffffff !important; color: #0f172a !important; border: 1px solid #cbd5e1 !important; box-shadow: 0 2px 8px rgba(15, 23, 42, .06); }
body.light-mode .league-pill:hover, body.light-mode .league-pill-wrapper.is-open .league-pill { background: #e0f2fe !important; border-color: #0284c7 !important; color: #0c4a6e !important; }

/* Μπάρα ειδήσεων (ticker): ανοιχτό φόντο, σκούρα γράμματα */
body.light-mode .live-ticker-bar { background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%) !important; border-color: #cbd5e1 !important; }
body.light-mode .ticker-content, body.light-mode .ticker-content span { color: #1e293b !important; }
body.light-mode .ticker-content b { color: #0369a1 !important; }

/* Κουμπί θέματος / ομάδας στο light mode */
body.light-mode .theme-btn, body.light-mode .team-dropdown-btn { color: #0f172a !important; }

/* ---------------- ΑΡΘΡΑ: «πριν 5΄» ---------------- */
.card-footer .ago, .article-meta .ago { font-weight: 700; }

/* «⚙️ Admin» και «Έξοδος»: ίδια έμφαση με τα υπόλοιπα */
.navbar .auth-widget a { font-weight: 700 !important; color: #e2e8f0 !important; font-size: .98rem !important; }
.navbar .auth-widget a:hover { color: #fff !important; }

/* ---------------- LIGHT MODE: διορθώσεις αντίθεσης (βρέθηκαν με αυτόματο έλεγχο WCAG) ---------------- */
body.light-mode .smart-match-title, body.light-mode .phone-title { color: #0369a1 !important; }
body.light-mode .phone-subtitle { color: #047857 !important; }
body.light-mode .phone-subtitle.tc-off { color: #475569 !important; }
body.light-mode .smart-mode-btn { background: #f1f5f9 !important; color: #334155 !important; border-color: #cbd5e1 !important; }
body.light-mode .smart-mode-btn.active { background: #0284c7 !important; color: #fff !important; border-color: #0284c7 !important; }
body.light-mode .smart-match-card span, body.light-mode .smart-desc { color: #334155 !important; }
body.light-mode .leaderboard-title { color: #b45309 !important; }
body.light-mode .leaderboard-row strong { color: #b45309 !important; }
body.light-mode .user-badge-tag { color: #075985 !important; background: #e0f2fe !important; }
body.light-mode .lb-more, body.light-mode .tc-note a { color: #0369a1 !important; }
body.light-mode .tc-note { color: #475569 !important; }
/* Στέκια: οι κάρτες μένουν ΣΚΟΥΡΕΣ και στο light mode, ώστε να διαβάζονται τα χρώματα των ομάδων (π.χ. κίτρινο ΑΕΚ) */
body.light-mode .phone-bubble.hot-topic-item { background: #1e293b !important; color: #e2e8f0 !important; border-color: #334155 !important; }
body.light-mode .phone-bubble.hot-topic-item strong, body.light-mode .phone-bubble.hot-topic-item .user-badge-tag { color: #e2e8f0 !important; }
body.light-mode .phone-bubble.hot-topic-item .user-badge-tag { background: rgba(255,255,255,.1) !important; }
/* Το γήπεδο είναι πράσινο και στο light mode: λευκά γράμματα στις θέσεις */
body.light-mode .player-slot, body.light-mode .player-slot .player-name { color: #fff !important; }
body.light-mode .player-slot .pos-tag { color: #cbd5e1 !important; }
body.light-mode .footer p, body.light-mode .footer-copyright { color: #94a3b8 !important; }
body.light-mode .radio-title { color: #fff !important; }
body.light-mode th { color: #475569 !important; }
.footer-copyright, .footer p { color: #94a3b8 !important; }

/* Ενεργό tab του hub στο χρώμα της ομάδας: γράμματα που ΔΙΑΒΑΖΟΝΤΑΙ (π.χ. σκούρα στο κίτρινο της ΑΕΚ).
   Το --team-ink το υπολογίζει το polish.js από το χρώμα της ομάδας. */
.team-tab-btn.active { color: var(--team-ink, #fff) !important; }

/* ---------------- SMART MATCHDAY HUB: πιο φαρδύ, οριζόντιο γήπεδο ---------------- */
/* Η ενότητα «Τελευταία» ανοίγει λίγο (κυρίως προς τα αριστερά) ώστε το Hub να γίνει ~520px χωρίς να στριμωχτούν τα άρθρα */
@media (min-width: 993px) {
    #latest > .content-with-phone-grid { max-width: 1480px !important; width: 96% !important; grid-template-columns: minmax(440px, 520px) 1fr !important; gap: 2.2rem !important; }
}
/* Οριζόντιο γήπεδο (υπολογιστής): αναλογία πραγματικού γηπέδου, τέρματα αριστερά/δεξιά */
.interactive-pitch.landscape { height: auto !important; aspect-ratio: 105 / 68; background: linear-gradient(90deg, #15803d 0%, #166534 100%) !important; }
.interactive-pitch.landscape .pitch-center-line { top: 0 !important; bottom: 0; left: 50% !important; right: auto !important; width: 2px; height: auto !important; }
.interactive-pitch.landscape .pitch-box-left, .interactive-pitch.landscape .pitch-box-right {
    position: absolute; top: 24%; bottom: 24%; width: 15%; border: 2px solid rgba(255,255,255,0.35);
}
.interactive-pitch.landscape .pitch-box-left { left: 0; border-left: none; }
.interactive-pitch.landscape .pitch-box-right { right: 0; border-right: none; }
.interactive-pitch.landscape .player-slot { width: 74px; height: 38px; }
.interactive-pitch.landscape .player-slot .player-name { max-width: 68px; }

/* Κινητό: οι στήλες δεν «φουσκώνουν» από μεγάλα κείμενα (π.χ. «⚽ ΑΕΚ vs Ολυμπιακός · 🔴 1-0 (23΄)» στο dropdown).
   Χωρίς αυτό, η σελίδα έβγαινε πιο φαρδιά από την οθόνη και «κυλούσε» στο πλάι. */
.content-with-phone-grid > *, .layout-grid > *, .team-layout > * { min-width: 0; }
.smart-match-card .smart-match-select { width: 100%; }

/* Ονόματα ομάδων στο live σκορ: να μη «σπάνε» στη μέση της λέξης (π.χ. «Ολυμπια-κός») — μικραίνουν λίγο */
.live-board .lb-team { overflow-wrap: normal !important; word-break: keep-all; hyphens: none; font-size: clamp(.8rem, 3.4vw, 1.25rem) !important; }

/* ---------------- Λίστα παικτών (ενδεκάδα): χωράει στην οθόνη, με ✕ ---------------- */
.player-picker-modal .picker-card { display: flex; flex-direction: column; max-height: min(560px, 82vh); max-width: 360px !important; padding: 1rem 1rem .9rem !important; }
.picker-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding-bottom: .7rem; margin-bottom: .6rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.picker-head h3 { font-size: 1.05rem; }
.picker-x { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; font-size: 1rem; cursor: pointer; }
.picker-x:hover, .picker-x:focus-visible { background: #ef4444; border-color: #ef4444; outline: none; }
/* ΜΟΝΟ η λίστα κυλάει — τίτλος, ✕ και «Ακύρωση» μένουν πάντα ορατά */
#picker-options-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: .2rem; }
#picker-options-list .picker-option-btn { padding: .5rem .7rem; margin-bottom: .3rem; font-size: .88rem; }
body.picker-open { overflow: hidden; }

/* ---------------- Αρχική: «Περισσότερα άρθρα» & σειρά στο κινητό ---------------- */
.more-articles { display: block; text-align: center; margin-top: .4rem; padding: .8rem 1rem; border-radius: 12px; font-weight: 800; text-decoration: none;
    background: rgba(56, 189, 248, .12); border: 1px solid rgba(56, 189, 248, .45); color: #38bdf8 !important; }
.more-articles:hover { background: rgba(56, 189, 248, .22); }
#latest-articles, #featured, #leagues, #about { scroll-margin-top: 110px; } /* να μην κρύβεται κάτω από το μενού */
@media (max-width: 992px) {
    /* Κινητό: slides → τελευταία άρθρα → Smart Hub → Στέκια → Predictor → ψηφοφορία → πρωταθλήματα */
    .content-with-phone-grid > .layout-grid { order: -1; }
}
body.light-mode .more-articles { background: #e0f2fe; color: #075985 !important; border-color: #7dd3fc; }

/* ==========================================================================
   ΚΙΝΗΤΟ: μενού ☰ (panel από αριστερά) — στην κορυφή μόνο ☰ και το 90+
   ========================================================================== */
.nav-burger, .nav-close, .nav-overlay { display: none; }
@media (max-width: 900px) {
    .navbar { padding: .55rem 0 !important; }
    .navbar .nav-container { flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center; gap: .5rem !important; }
    .navbar .logo { font-size: 2.3rem !important; margin: 0 auto; order: 2; }
    .nav-burger { display: grid; place-items: center; order: 1; position: relative; width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px;
        border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
    .nav-burger span, .nav-burger span::before, .nav-burger span::after { display: block; width: 22px; height: 2.5px; border-radius: 2px; background: currentColor; position: relative; }
    .nav-burger span::before, .nav-burger span::after { content: ''; position: absolute; left: 0; }
    .nav-burger span::before { top: -7px; } .nav-burger span::after { top: 7px; }
    .nav-burger .dot { position: absolute; top: 7px; right: 7px; width: 10px; height: 10px; border-radius: 50%; background: #ef4444; border: 2px solid #0b1220; }
    .nav-burger .dot[hidden] { display: none; }
    .nav-spacer { order: 3; width: 46px; flex-shrink: 0; }

    /* Το ίδιο το μενού γίνεται panel που μπαίνει από αριστερά */
    .navbar .nav-links { position: fixed !important; top: 0; left: 0; bottom: 0; z-index: 5000; width: min(310px, 86vw);
        display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important;
        gap: .15rem !important; padding: 4.2rem 1rem 1.5rem !important; overflow-y: auto; overscroll-behavior: contain;
        background: #0b1426; border-right: 1px solid rgba(255,255,255,.1); box-shadow: 12px 0 40px rgba(0,0,0,.5);
        transform: translateX(-105%); transition: transform .28s ease; visibility: hidden; }
    body.nav-open .navbar .nav-links { transform: none; visibility: visible; }
    .navbar .nav-links > a { font-size: 1.08rem !important; padding: .8rem .6rem !important; border-radius: 10px; border-bottom: 1px solid rgba(255,255,255,.06); }
    .navbar .nav-links > a:hover, .navbar .nav-links > a:focus-visible { background: rgba(56,189,248,.1); }
    .navbar .nav-links > a.active::after { display: none; }
    .navbar .nav-links > a.active { background: rgba(239,68,68,.12); }
    .navbar .nav-links .nt-wrap { margin: .6rem 0 .2rem; }
    .navbar .nav-links .auth-widget { flex-wrap: wrap !important; justify-content: flex-start; padding: .5rem .2rem; gap: .6rem 1rem !important; }
    .navbar .nav-links .team-dropdown-wrapper, .navbar .nav-links .theme-btn, .navbar .nav-links .team-dropdown-btn { width: 100%; margin: .35rem 0 0 !important; }
    .navbar .nav-links .team-dropdown-btn, .navbar .nav-links .theme-btn { justify-content: center; height: 46px; }
    .navbar .nav-links .nt-panel { position: fixed; top: 58px; left: 8px; right: 8px; width: auto; }
    .nav-close { display: grid; place-items: center; position: absolute; top: .8rem; right: .8rem; width: 40px; height: 40px; border-radius: 50%;
        border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; font-size: 1.1rem; cursor: pointer; }
    .nav-overlay { display: block; position: fixed; inset: 0; z-index: 4999; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .25s; }
    body.nav-open .nav-overlay { opacity: 1; pointer-events: auto; }
    body.nav-open { overflow: hidden; }
    body.light-mode .navbar .nav-links { background: #ffffff; border-color: #cbd5e1; }
    body.light-mode .nav-burger, body.light-mode .nav-close { color: #0f172a; border-color: #cbd5e1; background: #f1f5f9; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .navbar .nav-links, .nav-overlay { transition: none; } }

/* ==========================================================================
   ΚΙΝΗΤΟ/TABLET (χωρίς ποντίκι): τα πρωταθλήματα ανοίγουν με ΠΑΤΗΜΑ το ίδιο panel με τον υπολογιστή
   ========================================================================== */
@media (hover: none), (max-width: 768px) {
    .leagues-pills { position: relative; }
    .leagues-pills .league-pill-wrapper { position: static; }
    .leagues-pills .league-pill-wrapper.is-open .league-mega-menu,
    .leagues-pills .league-pill-wrapper.is-open .europe-mega-menu {
        display: block !important; position: absolute !important; top: calc(100% + 12px) !important; left: 0 !important; right: 0 !important;
        width: auto !important; transform: none !important; max-height: 72vh; overflow-y: auto; overscroll-behavior: contain; z-index: 999; padding: 1.1rem !important; }
    .leagues-pills .league-mega-menu::before { display: none; }
    .leagues-pills .mega-menu-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
    .leagues-pills .top-clubs-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .leagues-pills .europe-container-flex { flex-direction: column; }
    .leagues-pills .europe-tabs-nav { width: 100% !important; flex-direction: row; flex-wrap: wrap; border-right: 0 !important; padding-right: 0 !important; }
    .leagues-pills .euro-tab-btn { width: auto; flex: 1 1 45%; }
    .leagues-pills .league-pill-wrapper.is-open .league-pill { background: rgba(56, 189, 248, .2) !important; border-color: #38bdf8 !important; }
}
@media (max-width: 900px) {
    /* Το μενού ζει μέσα στη μπάρα (που έχει δικό της «επίπεδο») — όσο είναι ανοιχτό, η μπάρα πάει ΠΑΝΩ από το σκοτεινό φόντο */
    body.nav-open .navbar { z-index: 6000 !important; }
}
@media (max-width: 900px) {
    /* ΠΑΓΙΔΑ CSS: το «θόλωμα» (backdrop-filter) της μπάρας κάνει κάθε position:fixed μέσα της να «κλειδώνεται»
       στα όρια της μπάρας — και το panel του μενού έβγαινε σαν λωρίδα. Στο κινητό η μπάρα γίνεται συμπαγής. */
    .navbar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #0b1426 !important; transform: none !important; filter: none !important; }
    body.light-mode .navbar { background: #ffffff !important; }
    .navbar .nav-links { flex-wrap: nowrap !important; height: 100dvh; }
}

/* ==========================================================================
   ΜΕΝΟΥ ΥΠΟΛΟΓΙΣΤΗ (v2): όλα χωράνε — πιο φαρδιά μπάρα (όλα πιο αριστερά), μεγαλύτερο 90+,
   και σε μικρότερες οθόνες το Dark Mode/Admin γίνονται εικονίδια (το όνομα φαίνεται στο «πέρασμα»).
   ========================================================================== */
@media (min-width: 901px) {
    .navbar .nav-container { max-width: 1760px !important; width: 97% !important; gap: 1.6rem !important; }
    .navbar .logo { font-size: 2.75rem !important; padding: .3rem 1.05rem !important; }
    .navbar .logo::after { font-size: 2rem !important; }
    .navbar .nav-links { gap: 1.25rem !important; }
    .navbar .nav-links > a { font-size: 1rem !important; }
    .navbar .auth-widget { gap: .7rem !important; }
    .navbar .team-dropdown-btn, .navbar .theme-btn { padding: 0 .9rem !important; }
    .navbar .team-dropdown-btn { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
    .nav-ico-lbl { display: inline; }
}
@media (min-width: 901px) and (max-width: 1720px) {
    .navbar .nav-links { gap: 1rem !important; }
    .navbar .nav-links > a { font-size: .95rem !important; }
    .navbar .logo { font-size: 2.5rem !important; }
    /* Μόνο το εικονίδιο (🌙 / ☀️ / ⚙️) — το κείμενο μένει για αναγνώστες οθόνης και στο tooltip */
    .navbar .nav-ico-lbl { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .navbar .theme-btn { width: 44px; padding: 0 !important; justify-content: center; }
}
@media (min-width: 901px) and (max-width: 1440px) {
    .navbar .nav-links { gap: .8rem !important; }
    .navbar .nav-links > a { font-size: .9rem !important; }
    .navbar .logo { font-size: 2.25rem !important; }
    .navbar .team-dropdown-btn { max-width: 120px; }
}
@media (min-width: 901px) and (max-width: 1280px) {
    /* Laptop μικρής οθόνης: τα emoji των συνδέσμων φεύγουν για να χωρέσουν όλα */
    .navbar .nav-links > a .nav-emoji { display: none; }
    .navbar .nav-links { gap: .7rem !important; }
    .navbar .nav-links > a { font-size: .86rem !important; }
}
@media (min-width: 901px) and (max-width: 1540px) {
    .navbar .nav-links > a .nav-emoji { display: none; }
    .navbar .nav-links { gap: .85rem !important; }
    .navbar .nav-container { gap: 1.1rem !important; width: 98% !important; }
}
@media (min-width: 901px) and (max-width: 1380px) {
    .navbar .nav-links { gap: .62rem !important; }
    .navbar .nav-links > a { font-size: .86rem !important; }
    .navbar .logo { font-size: 2.1rem !important; padding: .25rem .8rem !important; }
    .navbar .auth-widget { gap: .5rem !important; }
    .navbar .auth-widget > span, .navbar .auth-widget a { font-size: .88rem !important; }
    .navbar .team-dropdown-btn { max-width: 104px; padding: 0 .6rem !important; font-size: .82rem !important; }
}

/* Το λογότυπο 90+ ίδιο σε ΟΛΕΣ τις σελίδες (οι τιμές της αρχικής — εδώ, ώστε να τις έχει και η σελίδα άρθρου) */
.navbar .logo { background: linear-gradient(135deg, rgba(30, 41, 59, .9) 0%, rgba(15, 23, 42, .95) 100%); border: 1px solid rgba(56, 189, 248, .3);
    border-radius: 12px; box-shadow: 0 0 15px rgba(56, 189, 248, .15); display: inline-flex; align-items: center; gap: 2px; font-weight: 800; text-decoration: none; }
.navbar .logo .logo-accent { color: #ef4444 !important; }
.navbar .logo .logo-plus { color: #38bdf8; font-weight: 900; }