/* Five-Handed Pinochle - live score sheet on top of w3style.css.
   Built for a laptop at the card table: the toolbar and player scores stay put,
   the hand rows scroll between a sticky header and a sticky FINAL SCORES footer.
   The script builds the hand rows (td.col-*, .set-badge) and swaps .score-card / .leader. */

/* Suit symbols: Roboto Flex draws ♠♥♦♣ very small, so take just those characters
   from a symbol font and leave every other character in the site font. */
@font-face {
    font-family: "pn-suits";
    src: local("Segoe UI Symbol"), local("Apple Symbols"), local("Noto Sans Symbols 2"), local("DejaVu Sans");
    unicode-range: U+2660-2667;
}
.pn-app, .pn-app input, .pn-app select, .pn-app button { font-family: "pn-suits", "Roboto Flex", sans-serif; }

.pn-app {
    --pn-green-dark: #1B5E20;
    --pn-green-mid: #2E7D32;
    --pn-purple: #6A1B9A;
    --pn-teal: #006064;
    --pn-orange: #BF360C;
    --pn-ink-blue: #1565C0;
    --pn-set: #C62828;
    --pn-hand-ink: #1B5E20;
    --pn-row: #fff;
    --pn-row-alt: #F1F8E9;
    --pn-meld: #fff;
    --pn-handpts: #FFFDE7;
    --pn-score: #E3F2FD;
    --pn-team-meld: #F3E5F5;
    --pn-team-tricks: #E0F7FA;
    --pn-opp-tricks: #FFF3E0;
    --pn-target: #C8E6C9;
    --pn-line: #d6d6d6;
    --pn-card: #E3F2FD;
    --pn-card-line: #1565C0;
    --pn-seat: #1B5E20;
    --pn-red: #C62828;
}
body.dark-mode .pn-app {
    --pn-ink-blue: #90caf9;
    --pn-set: #ff8a80;
    --pn-hand-ink: #a5d6a7;
    --pn-row: var(--dm-surface);
    --pn-row-alt: #2a332a;
    --pn-meld: var(--dm-surface);
    --pn-handpts: #39361f;
    --pn-score: #1e3247;
    --pn-team-meld: #3a2a40;
    --pn-team-tricks: #1d3a3d;
    --pn-opp-tricks: #42301e;
    --pn-target: #2e4d30;
    --pn-line: var(--dm-line);
    --pn-card: #1e3247;
    --pn-card-line: #64b5f6;
    --pn-seat: #a5d6a7;
    --pn-red: #ff8a80;
}

.pn-red { color: var(--pn-red); }

/* ---------- Toolbar ---------- */
.pn-title { font-size: 17px; white-space: nowrap; margin-right: 8px; }
.pn-suit { color: var(--pn-green-mid); }
body.dark-mode .pn-suit { color: #a5d6a7; }
#meta-bar label { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
#meta-bar .w3-input { padding: 3px 8px; font-size: 14px; }
#controls .w3-button { font-size: 13px; }

/* ---------- Winner banner ---------- */
#winner-banner {
    display: none;
    background: #FFF9C4;
    border: 3px solid #F9A825;
    border-radius: 8px;
    margin: 8px 16px 0;
    padding: 8px 16px;
    font-size: 1.25rem;
    font-weight: bold;
    color: #4E342E;
    text-align: center;
}

/* ---------- Player cards: name + running score ---------- */
#score-cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 8px 16px;
}
.score-card {
    position: relative;
    background: var(--pn-card);
    border: 2px solid var(--pn-card-line);
    border-radius: 8px;
    padding: 4px 10px 6px;
    text-align: center;
    min-width: 0;
}
.score-card .pn-seat {
    position: absolute;
    top: 4px;
    left: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--pn-seat);
    cursor: text;
}
.score-card .pn-name {
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px dashed transparent;
    background: transparent !important;
    color: var(--pn-seat) !important;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    padding: 1px 18px;
    outline: none;
}
.score-card .pn-name:hover,
.score-card .pn-name:focus { border-bottom-color: currentColor; }
.score-card .pn-name::placeholder { color: var(--pn-seat); opacity: .75; }
.score-card .sc-name { display: none; }  /* the name box above shows the same thing */
.score-card .sc-score {
    font-size: 1.8rem;
    line-height: 1.15;
    font-weight: bold;
    color: var(--pn-ink-blue);
    font-variant-numeric: tabular-nums;
}
.score-card.leader { background: #FFF9C4; border-color: #F9A825; }
.score-card.leader .sc-score,
.score-card.leader .pn-name,
.score-card.leader .pn-seat,
.score-card.leader .pn-name::placeholder { color: #4E342E !important; }

/* ---------- Score sheet ---------- */
#table-wrap { overflow: auto; border-top: 1px solid var(--pn-line); }

#score-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    min-width: 1100px;
    table-layout: fixed;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
#score-table col.pn-col-meld { width: 48px; }
#score-table thead { position: sticky; top: 0; z-index: 2; }
#score-table tfoot { position: sticky; bottom: 0; z-index: 2; }

#score-table th {
    padding: 4px 2px;
    text-align: center;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    border-right: 1px solid rgba(255,255,255,.35);
    border-bottom: 1px solid rgba(255,255,255,.35);
}
#score-table .hdr-info { background: var(--pn-green-mid); font-weight: bold; }
#score-table .hdr-team-meld { background: var(--pn-purple); }
#score-table .hdr-team-tricks { background: var(--pn-teal); }
#score-table .hdr-opp-tricks { background: var(--pn-orange); }
#score-table .hdr-p { background: var(--pn-green-mid); }
#score-table .hdr-score { background: var(--pn-green-dark); }
#score-table thead tr:first-child .hdr-p { font-size: 13px; }

#score-table td {
    height: 30px;
    padding: 0 2px;
    border-right: 1px solid var(--pn-line);
    border-bottom: 1px solid var(--pn-line);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}
/* a heavier line before each player's block */
#score-table td.col-meld, #score-table thead tr:last-child th:nth-child(3n+1) { border-left: 2px solid var(--pn-green-mid); }

#score-table tr.hand-row:nth-child(odd) td { background-color: var(--pn-row); }
#score-table tr.hand-row:nth-child(even) td { background-color: var(--pn-row-alt); }
#score-table tr.hand-row:hover td { box-shadow: inset 0 0 0 9999px rgba(33,150,243,.08); }

#score-table td.col-hand { font-weight: bold; color: var(--pn-hand-ink); }
#score-table td.col-team-meld { background: var(--pn-team-meld) !important; font-weight: 600; }
#score-table td.col-team-tricks { background: var(--pn-team-tricks) !important; }
#score-table td.col-opp-tricks { background: var(--pn-opp-tricks) !important; }
#score-table td.col-meld { background: var(--pn-meld) !important; }
#score-table td.col-handpts { background: var(--pn-handpts) !important; }
#score-table td.col-score {
    background: var(--pn-score) !important;
    color: var(--pn-ink-blue);
    font-weight: bold;
    font-size: 15px;
}
#score-table td.col-score.negative { color: var(--pn-set); }
#score-table td.col-score.target-reached { background: var(--pn-target) !important; }
body:not(.dark-mode) #score-table td.col-score.target-reached:not(.negative) { color: #0d47a1; }

/* Entry cells: borderless so the sheet reads like a grid */
#score-table td input,
#score-table td select {
    border: none !important;
    background: transparent !important;
    color: inherit;
    width: 100%;
    height: 28px;
    padding: 0 2px;
    font: inherit;
    text-align: center;
    text-align-last: center;
    outline: none;
    min-width: 0;
    cursor: pointer;
}
#score-table td input { cursor: text; -moz-appearance: textfield; appearance: textfield; }
#score-table td input::-webkit-outer-spin-button,
#score-table td input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#score-table td:focus-within { outline: 2px solid #1565C0; outline-offset: -2px; }
body.dark-mode #score-table td:focus-within { outline-color: #64b5f6; }
body.dark-mode #score-table td select option { background: var(--dm-raised); color: #eee; }

/* Trump picker: the script sets the chosen suit to 1.1rem; make it match the row and read at a glance */
#score-table td.col-trump select { font-size: 20px !important; line-height: 1; }

/* Trump picker: the script colors black suits #111 and red suits #C62828 inline; lift them in dark mode */
body.dark-mode #score-table td.col-trump select { color: #eee !important; }
body.dark-mode #score-table td.col-trump select:has(option[value="♥"]:checked),
body.dark-mode #score-table td.col-trump select:has(option[value="♦"]:checked) { color: #ff8a80 !important; }

.set-badge {
    display: inline-block;
    background: #C62828;
    color: #fff;
    font-size: 9px;
    border-radius: 3px;
    padding: 0 2px;
    margin-left: 2px;
    vertical-align: middle;
    font-weight: bold;
}

/* FINAL SCORES and WINNER rows (stick to the bottom of the sheet) */
#score-table tr.final-row td {
    background: var(--pn-green-mid) !important;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    border-color: rgba(255,255,255,.25);
}
#score-table tr.final-row td.col-score {
    background: var(--pn-green-dark) !important;
    color: #FFF9C4 !important;
    font-size: 16px;
}
#score-table tr.winner-row td {
    background: #FFF9C4 !important;
    color: #4E342E;
    font-weight: bold;
    font-size: 14px;
    border-color: #F9E79F;
}
#score-table tr.winner-row td.winning { color: #1B5E20; font-size: 15px; }

/* ---------- Quick reference modal ---------- */
/* The Quick ref button sets display:block on #quick-ref (a w3-modal); clicking outside, the x or Esc closes it */
#quick-ref { z-index: 20; padding-top: 50px; }
.pn-qr-box { max-width: 960px; overflow: hidden; font-size: 13px; }
.pn-qr-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 24px;
    padding: 8px 16px 12px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
}
.pn-qr-bar .w3-button:hover { background: rgba(255,255,255,.2) !important; color: #fff !important; }
#quick-ref h4 { font-size: 15px; margin: 6px 0 4px; color: var(--pn-hand-ink); }
#quick-ref .qr-section { margin-bottom: 8px; break-inside: avoid; }
#quick-ref .w3-table td { padding: 2px 6px; }
#quick-ref .w3-table td:last-child { text-align: right; font-weight: 600; }
#quick-ref .pn-rules td:first-child { width: 34%; font-weight: 600; }
#quick-ref .pn-rules td:last-child { text-align: left; font-weight: normal; }
@media (max-width: 700px) { .pn-qr-grid { grid-template-columns: 1fr; } }

/* ---------- Smaller laptops ---------- */
@media (max-height: 760px) {
    #score-cards { padding: 6px 16px; }
    .score-card .sc-score { font-size: 1.45rem; }
    #score-table td { height: 27px; }
    #score-table td input, #score-table td select { height: 25px; }
}

/* ---------- Tablets and phones: let the page scroll instead ---------- */
@media (max-width: 992px) {
    .pn-main { height: auto !important; }
    #score-cards { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
    #table-wrap { max-height: 75vh; }
}

/* ---------- Print: just the score sheet ---------- */
@media print {
    body { background: #fff !important; }
    [w3-include-html], .w3-top, #mySidebar, #myOverlay, .pn-footer, #controls, #quick-ref, #score-cards, #winner-banner { display: none !important; }
    .w3-main { margin: 0 !important; height: auto !important; }
    #table-wrap { overflow: visible; }
    #score-table { min-width: 0; font-size: 11px; }
    #score-table thead, #score-table tfoot { position: static; }
}