/* =========================================================
   FOOTBALL.CSS — Match, FM panel, kartalar, stat blok
   ========================================================= */

/* ---------- FM PANEL ---------- */
.fm-panel {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: #e6d88f;
    padding: 4px 0;
    margin: 0;
}
.fm-item {
    flex: 1;
    text-align: center;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.fm-item img { width: 22px; height: 22px; display: block; }
.fm-item.club img { width: 26px; height: 26px; border-radius: 50%; }
.fm-item.badge span {
    position: absolute;
    top: -4px;
    right: 4px;
    background: #f00;
    color: #fff;
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 10px;
    font-weight: bold;
}
.fm-item:active { background: rgba(0,0,0,.1); }

/* ---------- MATCH ---------- */
.match-link { display: block; text-decoration: none !important; color: inherit; }
.match-item {
    background: #f7f7f4;
    border: .5px solid #dfe3d7;
    border-radius: 4px;
    padding: 10px;
    overflow: hidden;
}
.match-item .match-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #9a9a9a;
    text-align: center;
    line-height: 1.4;
    flex-wrap: wrap;
}
.match-item .league-logo { width: 14px; height: 14px; object-fit: contain; }
.match-item .match-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.match-item .club        { flex: 1; min-width: 0; }
.match-item .club a      { display: flex; align-items: center; gap: 7px; text-decoration: none !important; }
.match-item .home        { text-align: right; }
.match-item .home a      { justify-content: flex-end; }
.match-item .away        { text-align: left; }
.match-item .away a      { justify-content: flex-start; }
.match-item .club-name {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    word-break: normal;
    overflow-wrap: break-word;
    white-space: normal;
}
.match-item .myclub .club-name    { color: #111; }
.match-item .enemyclub .club-name { color: #7da12e; }
.match-item .club-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}
.match-item .score {
    min-width: 30px;
    height: 25px;
    padding: 0 14px;
    background: #000;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    flex-shrink: 0;
}

.club a, .club a:hover, .club a:active, .club a:visited {
    text-decoration: none !important;
    color: inherit !important;
}
.match-link, .match-link:hover, .match-link:active, .match-link:visited {
    text-decoration: none !important;
    color: inherit !important;
    display: block;
}

/* ---------- STAT BLOCK ---------- */
.stat-block {
    background: #f8f8f8;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    margin: 1px;
    padding: 8px 10px;
    box-shadow: inset 0 1px 0 #fff;
}
.stat-block div {
    padding: 4px 0;
    color: #222;
    font-weight: 700;
    border-bottom: 1px dotted #dcdcdc;
}
.stat-block div:last-child   { border-bottom: 0; }
.stat-block .label           { color: #222; font-weight: 700; }
.stat-block .value           { color: #3f8f2f; font-weight: bold; }
.stat-block a, .stat-block a:link, .stat-block a:visited {
    color: #2e7d32 !important;
    font-weight: bold;
    text-decoration: none;
}
.stat-block a:hover { text-decoration: underline; }

/* ---------- MODERN CARD ---------- */
.card-modern {
    background: #fff;
    border: 1px solid #d9e2cf;
    border-radius: 4px;
    overflow: hidden;
}
.card-head {
    background: linear-gradient(180deg, #49b13f, #368f2d);
    color: #fff;
    padding: 10px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid #2d7e25;
}
.card-body { padding: 0; background: #fff; }
.card-row {
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.45;
    border-bottom: 1px solid #edf2e8;
    background: #fff;
}
.card-row:last-child  { border-bottom: none; }
.card-flex            { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-time            {
    padding: 8px 12px;
    font-size: 11px;
    color: #777;
    background: #fafcf8;
    border-bottom: 1px solid #edf2e8;
}
.card-modern a        { text-decoration: none !important; color: inherit !important; }

/* ---------- BADGES ---------- */
.badge-ok    { background: #edf8ee; color: #1d7f33; padding: 10px 12px; font-size: 13px; line-height: 1.45; border-top: 1px solid #cfe8d4; border-bottom: 1px solid #cfe8d4; }
.badge-wait  { background: #fff9e7; color: #9a7300; padding: 10px 12px; font-size: 13px; line-height: 1.45; border-top: 1px solid #f0df9b; border-bottom: 1px solid #f0df9b; }
.badge-error { background: #fff0f0; color: #b32626; padding: 10px 12px; font-size: 13px; line-height: 1.45; border-top: 1px solid #efc1c1; border-bottom: 1px solid #efc1c1; }

/* ---------- MATCH VS ---------- */
.match-vs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px;
    background: #fafcf8;
    border-bottom: 1px solid #edf2e8;
}
.match-team {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #2f7f27;
    line-height: 1.3;
    word-break: break-word;
}
.match-center {
    width: 42px;
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    color: #888;
}
.action-box    { padding: 12px; background: #f7faf4; border-top: 1px solid #e4ecdc; }
.soft-divider  { height: 1px; background: #edf2e8; }

/* ---------- MOBILE ---------- */
@media (max-width: 480px) {
    .match-item .club-name { font-size: 10px; }
    .match-item .score     { min-width: 30px; height: 25px; font-size: 10px; }
    .match-item .club-logo { width: 20px; height: 20px; }
    .card-head             { font-size: 14px; padding: 9px; }
    .card-row              { font-size: 12px; padding: 9px 10px; }
    .match-team            { font-size: 13px; }
}