/* Match details page styles */
/* Styles inherited from style.css (table, table-container, etc.) */

/* ===== Match settings — wrapped in an .aa-player__card with a Reaver
   header (matches the "Соперники" card on /player). Inside, the items
   flow as a horizontal grid (auto-fill) so the listing reads as one or
   two compact rows of chips rather than a tall narrow ledger. ===== */
.match-settings-card {
    margin-top: 20px;
}
.match-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}
.match-setting-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(8, 16, 21, 0.55);
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    transition: box-shadow 150ms;
}
.match-setting-item:hover {
    box-shadow: inset 0 0 0 1px rgba(251, 140, 7, 0.32);
}
.match-setting-item .setting-icon {
    width: 22px;
    height: 22px;
    border-radius: 2px;
    object-fit: cover;
    flex-shrink: 0;
}
.match-setting-label {
    flex: 1;
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: 13px;
    letter-spacing: 0.02em;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.match-setting-value {
    color: var(--color-text-strong);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    white-space: nowrap;
}
.setting-bool-yes { color: #4ade80 !important; }
.setting-bool-no  { color: #f87171 !important; }

/* ============================================
   Combined player cell
   ============================================ */
.match-player-cell {
    padding: 6px 8px !important;
    white-space: nowrap;
}
.match-player-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Hero block: icon + level + rating stacked */
.match-hero-block {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.match-hero-icon {
    flex: none;
    position: relative;           /* anchors the level badge */
}
.match-hero-icon img {
    width: 80px;                 /* up from 57px so it reads clearer */
    height: 45px;                /* keep 16:9 (80×45) */
    border-radius: 2px;
    display: block;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
/* Hero level badge — small dark circle in the upper-left corner of
   the hero portrait, same pattern as the pick/ban count chips on the
   player profile. White tabular-num digit on dark fill, golden hairline
   to echo the rating chip below. */
.match-hero-level-badge {
    position: absolute;
    top: -6px;
    left: -6px;
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #0c1a23 0%, #050a0d 100%);
    border: 1px solid #c89233;
    border-radius: 999px;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.55),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
    pointer-events: none;
}
/* Season-rating chip below the hero icon — matched to the icon's
   width (80px) and proportionally tall (24px). Golden 1px outline
   (#c89233) makes the chip read as a "medallion" of the player's
   season rating, picking up the same tone as the top-1 crown. */
.match-hero-rating {
    width: 80px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-strong);
    background: linear-gradient(180deg, rgba(8, 16, 21, 0.95), rgba(5, 10, 13, 0.95));
    border: 1px solid #c89233;
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
                inset 0 0 14px rgba(0, 0, 0, 0.5),
                0 0 8px -2px rgba(200, 146, 51, 0.45);
    letter-spacing: 0.02em;
}

/* Player info: name + kd + ministats */
.match-player-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.match-player-top {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Player nickname — white (the legacy default was the indigo accent
 * which looked off against the dota1x6 palette). Stays white on hover;
 * we already removed underline on hover globally for tables. */
.match-player-name {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text-strong) !important;
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
    transition: color 150ms;
}
.match-player-name:hover {
    color: var(--color-primary-500) !important;
    text-decoration: none !important;
}
/* K/D — two coloured spans (kills green, deaths red) separated by
 * a muted slash. Marked up as `<span class="kd-kills">N</span>/<span
 * class="kd-deaths">N</span>` from the template. */
.match-player-kd {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-muted);
    flex: none;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.match-player-kd .kd-kills  { color: var(--color-positive, #4ade80); }
.match-player-kd .kd-deaths { color: var(--color-negative, #ef4444); }
.match-player-kd .kd-sep    { color: var(--color-text-subtle); margin: 0 1px; }
.match-player-ministats {
    display: flex;
    gap: 6px;
    align-items: center;
}
.match-ministat {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    color: var(--text-muted, #888);
}
.match-ministat .stat-icon {
    width: 14px;
    height: 14px;
}

/* Gold cell */
.match-gold-cell {
    text-align: right;
    white-space: nowrap;
    font-size: 13px;
}
.match-gold-main {
    display: flex;
    align-items: center;
    gap: 3px;
    justify-content: flex-end;
    color: #ffd700;
    font-weight: 600;
}
.match-gold-bet {
    display: flex;
    align-items: center;
    gap: 3px;
    justify-content: flex-end;
    font-size: 11px;
    color: var(--text-muted, #888);
}
.match-gold-icon {
    width: 14px;
    height: 14px;
    flex: none;
}

/* Match table — unified numeric-cell typography.
   Книги / Рейтинг / Дуэль / Волна / Время all share the same body
   size (14px tabular Roboto) and centred alignment so the columns
   read as one consistent block, not a mix of sizes. */
.match-details .table-container > table > tbody td.match-books-cell,
.match-details .table-container > table > tbody td.match-duel-cell,
.match-details .table-container > table > tbody td.match-aghs-cell,
.match-details .table-container > table > tbody td:nth-child(5),  /* Рейтинг */
.match-details .table-container > table > tbody td:nth-child(7),  /* Волна */
.match-details .table-container > table > tbody td:nth-child(8) { /* Время */
    text-align: center !important;
    white-space: nowrap;
    font-family: var(--font-sans);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-strong);
}
/* Rating value — bold, coloured by sign (green / red / muted). The
   span carries .positive / .negative / .neutral from the template. */
.match-details .table-container > table > tbody td:nth-child(5) span {
    font-weight: 700;
    font-size: 15px;
}
.positive { color: var(--color-positive, #4ade80); }
.negative { color: var(--color-negative, #ef4444); }
.neutral  { color: var(--color-text-muted, #8e97a4); }

/* Place cell — chunky rank number on the left edge */
.match-place {
    text-align: center !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 16px;
    width: 2.5rem;
    position: relative;
    vertical-align: middle;
}
/* Top-1: golden crown above the "1" via ::before pseudo. Drop-shadow
   keeps it readable on the dark row, scales with the cell. */
.match-place--crown::before {
    content: '👑';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(-12deg);
    font-size: 18px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6))
            drop-shadow(0 0 6px rgba(255, 200, 60, 0.55));
    pointer-events: none;
}
.match-place--crown {
    color: #ffd34a;
    text-shadow: 0 0 12px rgba(255, 200, 60, 0.45);
    padding-top: 14px;            /* makes room for the crown above the "1" */
}

/* Info button */
.match-info-cell {
    text-align: center;
}
.info-button {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    background: var(--accent, #6366f1);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}
.info-button:hover {
    background: var(--accent-hover, #4f46e5);
}

/* Abilities — all 7 in one row, sized 38px so they read clearly
   without crowding the row. Up from 32px (felt cramped) but still
   fits 7 icons + 2-digit wave badge in the 272px abilities column. */
.table-container .abilities-inline {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    align-items: center;
}
.table-container .ability-icon-shared {
    width: 38px;
    height: 38px;
    border-radius: 2px;
}
.table-container .abilities-inline .ability-item {
    position: relative;
}
.table-container .abilities-inline .wave-number {
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 2px;
    letter-spacing: 0.04em;
}

/* Clickable rows for info tooltip */
tr[data-player-id] {
    cursor: pointer;
    transition: background 0.15s;
}
tr[data-player-id]:hover {
    background: rgba(99, 102, 241, 0.08) !important;
}