/*
Theme Name:   SquadForce Child
Theme URI:    https://themeforest.net/user/_nK/portfolio
Author:       nK
Template:     squadforce
Author URI:   https://nkdev.info/
Description:  SquadForce Child Theme
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  squadforce-child
Tags:
*/


/* Theme customization starts here
-------------------------------------------------------------- */

/* Top 100: a readable, searchable ranking with compact game-label tiles. */
.top-games-directory {
    --top-games-red: #dd163b;
    --top-games-panel: #171a21;
    --top-games-panel-raised: #1d212a;
    --top-games-line: rgba(255, 255, 255, .09);
    margin: 24px 0 38px;
    color: #e9eaf0;
}
.top-games-intro {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-bottom: 21px;
    padding: 18px 21px;
    border: 1px solid var(--top-games-line);
    border-left: 3px solid var(--top-games-red);
    border-radius: 5px;
    background: linear-gradient(110deg, rgba(221, 22, 59, .10), rgba(23, 26, 33, .92) 46%);
}
.top-games-count {
    flex: 0 0 auto;
    color: #fff;
    font-size: 37px;
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1;
}
.top-games-intro strong,
.top-games-intro small { display: block; }
.top-games-intro strong { color: #fff; font-size: 15px; letter-spacing: .2px; }
.top-games-intro small { margin-top: 4px; color: rgba(233, 234, 240, .62); font-size: 12px; line-height: 1.5; }
.top-games-controls {
    display: grid;
    grid-template-columns: auto minmax(200px, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin: 0 0 11px;
}
.top-games-controls label {
    margin: 0;
    color: rgba(233, 234, 240, .72);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}
.top-games-controls input {
    width: 100%;
    min-height: 42px;
    margin: 0;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 4px;
    outline: none;
    background: #111319;
    color: #fff;
    font: inherit;
    font-size: 13px;
}
.top-games-controls input::placeholder { color: rgba(233, 234, 240, .42); }
.top-games-controls input:focus { border-color: var(--top-games-red); box-shadow: 0 0 0 2px rgba(221, 22, 59, .18); }
.top-games-result-count { color: rgba(233, 234, 240, .58); font-size: 12px; white-space: nowrap; }
.top-games-scroll { overflow-x: auto; border: 1px solid var(--top-games-line); border-radius: 5px; background: var(--top-games-panel); }
.top-games-table { width: 100%; min-width: 700px; margin: 0; border: 0; border-collapse: separate; border-spacing: 0; color: inherit; }
.top-games-table thead th {
    padding: 13px 14px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    background: #20242d;
    color: rgba(233, 234, 240, .64);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-align: left;
    text-transform: uppercase;
}
.top-games-table thead th:first-child { width: 65px; padding-left: 18px; }
.top-games-table thead th:nth-child(2) { width: 40%; }
.top-games-table tbody tr { transition: background-color .16s ease; }
.top-games-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .018); }
.top-games-table tbody tr:hover { background: rgba(221, 22, 59, .075); }
.top-games-table tbody tr[hidden] { display: none !important; }
.top-games-table tbody th,
.top-games-table tbody td { padding: 11px 14px; border: 0; border-bottom: 1px solid var(--top-games-line); vertical-align: middle; }
.top-games-table tbody tr:last-child th,
.top-games-table tbody tr:last-child td { border-bottom: 0; }
.top-games-rank { width: 65px; padding-left: 18px !important; }
.top-games-rank span { color: rgba(233, 234, 240, .42); font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 800; }
.top-games-table tbody tr:nth-child(-n+10) .top-games-rank span { color: #ff617e; }
.top-games-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.top-games-mark {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    overflow: hidden;
    border: 1px solid hsla(var(--game-hue), 82%, 70%, .27);
    border-radius: 5px;
    background: linear-gradient(145deg, hsla(var(--game-hue), 68%, 48%, .35), rgba(15, 17, 23, .96));
    color: hsl(var(--game-hue), 80%, 81%);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: -.4px;
    text-shadow: 0 1px 8px hsla(var(--game-hue), 90%, 65%, .3);
}
.top-games-icon-link {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    overflow: hidden;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 5px;
    background: #eef0f3;
}
.top-games-icon-link--dark { background: #111319; }
.top-games-icon-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.top-games-icon-credit { color: rgba(233, 234, 240, .52); font-size: 9px; line-height: 1.3; text-decoration: underline dotted; text-underline-offset: 2px; }
.top-games-icon-credit:hover,
.top-games-icon-credit:focus { color: #ff859a; }
.top-games-title-wrap { min-width: 0; }
.top-games-title { display: block; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.35; }
.top-games-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 6px; }
.top-games-year { color: rgba(233, 234, 240, .5); font-size: 11px; font-variant-numeric: tabular-nums; }
.top-games-genre { display: inline-block; padding: 2px 7px; border: 1px solid rgba(221, 22, 59, .24); border-radius: 20px; background: rgba(221, 22, 59, .08); color: #ff859a; font-size: 10px; font-weight: 700; line-height: 1.45; }
.top-games-description { width: 48%; color: rgba(233, 234, 240, .72); font-size: 13px; line-height: 1.55; }
.top-games-empty { margin: 0; padding: 25px 15px; border: 1px solid var(--top-games-line); border-top: 0; border-radius: 0 0 5px 5px; color: rgba(233, 234, 240, .68); text-align: center; }
.top-games-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 767px) {
    .top-games-directory { margin-top: 19px; }
    .top-games-intro { gap: 13px; padding: 15px; }
    .top-games-count { font-size: 32px; }
    .top-games-controls { grid-template-columns: 1fr auto; gap: 8px 10px; }
    .top-games-controls label { grid-column: 1 / -1; }
    .top-games-table { display: block; min-width: 0; }
    .top-games-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
    .top-games-table tbody { display: grid; }
    .top-games-table tbody tr { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; padding: 11px 12px; }
    .top-games-table tbody th,
    .top-games-table tbody td { padding: 0; border: 0; }
    .top-games-table tbody tr + tr { border-top: 1px solid var(--top-games-line); }
    .top-games-rank { width: auto; padding-left: 0 !important; align-self: start; padding-top: 13px !important; }
    .top-games-identity { gap: 10px; }
    .top-games-mark { flex-basis: 40px; width: 40px; height: 40px; }
    .top-games-description { grid-column: 2; width: auto; margin-top: 8px; padding-left: 50px !important; font-size: 12px; }
}
@media (max-width: 420px) {
    .top-games-intro small { font-size: 11px; }
    .top-games-title { font-size: 13px; }
    .top-games-result-count { font-size: 11px; }
}