/* recordsHistory.css
   RECORDS AND HISTORY pop-up (recordsHistory.js). Uses the colour sets and
   frame of scoreBoard.css (V-PopupStyle A, B, C); only its own extra
   colours are set here. Fixed height; the game list scrolls. */

#POP-RecordsHistory {
    --rh-thead: #071406;
    --rh-aborted: #ffb27a;
    --rh-tile-bg: transparent;
    --rh-scrollbar: #a3915e #071406;
}
.popstyle-fieldmanual #POP-RecordsHistory {
    --rh-thead: #d9cda3;
    --rh-aborted: #9a2a12;
    --rh-tile-bg: rgba(255, 255, 255, .35);
    --rh-scrollbar: #3f4b22 #e6dcb8;
    --sb-lose-bg: #8a2414;          /* The score board's is light, for its red header */
    --sb-lose-ink: #fff4e4;
}
.popstyle-nightops #POP-RecordsHistory {
    --rh-thead: #0b1d10;
    --rh-aborted: #ffb02e;
    --rh-tile-bg: transparent;
    --rh-scrollbar: #7dff9a #040c07;
}

#POP-RecordsHistory .rh-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 12px 18px 14px;
}

#POP-RecordsHistory .rh-message { font-size: 22px; padding: 10px 0; }

/* Player line and summary figures */
#POP-RecordsHistory .rh-who {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 6px 12px;
    background: var(--sb-you-bg);
    color: var(--sb-who-ink);
    font-size: 26px;
    font-weight: bold;
}
#POP-RecordsHistory .rh-tag { margin-left: auto; font-size: 22px; font-weight: normal; color: var(--sb-tag); }

#POP-RecordsHistory .rh-tiles {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 1.5px solid var(--sb-grid);
    border-top: none;
    margin-bottom: 14px;
}
#POP-RecordsHistory .rh-tile {
    padding: 6px 4px;
    text-align: center;
    background: var(--rh-tile-bg);
    border-left: 1.5px solid var(--sb-grid);
}
#POP-RecordsHistory .rh-tile:first-child { border-left: none; }
#POP-RecordsHistory .rh-tlabel { font-size: 21px; font-weight: bold; font-style: italic; color: var(--sb-ch-ink); }
#POP-RecordsHistory .rh-tvalue { font-size: 38px; font-weight: bold; line-height: 1.1; color: var(--sb-accent); }
#POP-RecordsHistory .rh-tnote { min-height: 22px; font-size: 19px; color: var(--sb-label); }

#POP-RecordsHistory .rh-section {
    margin: 0 0 4px;
    font-family: var(--sb-title-font, 'Freeman', sans-serif);
    font-size: 24px;
    font-weight: bold;
    letter-spacing: var(--sb-track);
    color: var(--sb-title2);
}

/* Game history */
#POP-RecordsHistory .rh-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border-bottom: 1.5px solid var(--sb-grid);
    scrollbar-width: thin;
    scrollbar-color: var(--rh-scrollbar);
}
#POP-RecordsHistory .rh-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 22px;
    color: var(--sb-ink);
}
#POP-RecordsHistory .rh-table th,
#POP-RecordsHistory .rh-table td {
    border: 1.5px solid var(--sb-grid);
    padding: 2px 6px;
    text-align: center;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#POP-RecordsHistory .rh-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: 23px;
    font-weight: bold;
    font-style: italic;
    line-height: 1.05;
    white-space: pre-line;
    color: var(--sb-ch-ink);
    background: var(--rh-thead);
}
#POP-RecordsHistory td.rh-left { text-align: left; }
#POP-RecordsHistory tr.rh-alt td { background: var(--sb-alt); }
#POP-RecordsHistory td.rh-mine { font-weight: bold; color: var(--sb-accent); }
#POP-RecordsHistory td.rh-aborted { font-style: italic; color: var(--rh-aborted); }

#POP-RecordsHistory .rh-badge {
    display: inline-block;
    min-width: 120px;
    padding: 0 8px;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 2px;
}
#POP-RecordsHistory .rh-badge.win { background: var(--sb-win-bg); color: var(--sb-win-ink); }
#POP-RecordsHistory .rh-badge.lose { background: var(--sb-lose-bg); color: var(--sb-lose-ink); }
#POP-RecordsHistory .rh-badge.drawn { background: var(--sb-drawn-bg); color: var(--sb-drawn-ink); }

/* ---------- Mobile (recordsHistory.js: .rh-mobile) ----------
   Tiles in two rows, one card per game; the whole body scrolls under the
   menu. Sizes for a phone (900-wide stage). */
#POP-RecordsHistory.rh-mobile {
    left: 8px;
    top: 150px;
    width: 884px;
    height: 1350px;
}
#POP-RecordsHistory.rh-mobile .sb-head {
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    padding: 10px 16px;
}
#POP-RecordsHistory.rh-mobile .sb-title { font-size: 44px; flex: 1; }
#POP-RecordsHistory.rh-mobile .sb-close {
    order: 2;
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    padding: 0;
    text-align: center;
    font: 700 38px/54px 'Roboto Condensed', sans-serif;
}
#POP-RecordsHistory.rh-mobile .sb-sub { order: 3; flex-basis: 100%; font-size: 30px; }
#POP-RecordsHistory.rh-mobile .rh-body {
    display: block;
    overflow-y: auto;
    padding: 12px 12px 24px;
    scrollbar-width: none;
}
#POP-RecordsHistory.rh-mobile .rh-body::-webkit-scrollbar { display: none; }
#POP-RecordsHistory.rh-mobile .rh-message { font-size: 34px; }
#POP-RecordsHistory.rh-mobile .rh-who { font-size: 36px; padding: 8px 14px; }
#POP-RecordsHistory.rh-mobile .rh-tag { font-size: 30px; }
#POP-RecordsHistory.rh-mobile .rh-tiles {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    border: none;
    margin: 12px 0 18px;
}
#POP-RecordsHistory.rh-mobile .rh-tile {
    border: 1.5px solid var(--sb-grid);
    padding: 8px 4px;
}
#POP-RecordsHistory.rh-mobile .rh-tlabel { font-size: 28px; }
#POP-RecordsHistory.rh-mobile .rh-tvalue { font-size: 52px; }
#POP-RecordsHistory.rh-mobile .rh-tnote { font-size: 26px; min-height: 30px; }
#POP-RecordsHistory.rh-mobile .rh-section { font-size: 36px; margin: 4px 0 10px; }
#POP-RecordsHistory.rh-mobile .rh-card {
    border: 1.5px solid var(--sb-grid);
    background: var(--sb-foot-bg);
    padding: 8px 14px;
    margin-bottom: 10px;
}
#POP-RecordsHistory.rh-mobile .rh-card.rh-alt { background: var(--sb-alt); }
#POP-RecordsHistory.rh-mobile .rh-line1 {
    display: flex;
    justify-content: space-between;
    font-size: 36px;
}
#POP-RecordsHistory.rh-mobile .rh-line1 b { color: var(--sb-accent); }
#POP-RecordsHistory.rh-mobile .rh-line2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    font-size: 32px;
    color: var(--sb-label);
}
#POP-RecordsHistory.rh-mobile .rh-pts { font-size: 36px; font-weight: bold; color: var(--sb-ink); }
#POP-RecordsHistory.rh-mobile .rh-pts b { color: var(--sb-accent); }
#POP-RecordsHistory.rh-mobile .rh-badge { font-size: 28px; padding: 2px 12px; }