/* Look and feel of the game client: the same weathered-wood scene background
   (MariasekMonoGame.GameBackground = "background2", dimmed by BackgroundTint = Color.Gray),
   the same Gold button nine-patch and LeftRightSelector arrows sliced out of buttons.png,
   and the same gold accent color (ButtonThemes.GoldAccentColor). */

:root {
    --gold: #fbdfb7;           /* ButtonThemes.GoldAccentColor */
    --gold-dim: #cba869;       /* ButtonThemes.GoldMidtone */
    --cream: #fff4e6;          /* ButtonThemes._defaultTextColor */
    --ink: #0a0b0d;            /* ButtonThemes._darkTextColor */
    --green: #34bf49;          /* ButtonThemes.DefaultHintColor */
    --panel: rgba(16, 12, 8, 0.62);
    --panel-strong: rgba(16, 12, 8, 0.82);
    --rule: rgba(203, 168, 105, 0.35);
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    font-family: "Trebuchet MS", "Segoe UI", Roboto, system-ui, sans-serif;
    color: var(--cream);
    background: #14100c url("../img/wood.jpg") center / cover no-repeat fixed;
    -webkit-text-size-adjust: 100%;
}

/* Stands in for the scene's BackgroundTint, which multiplies the wood texture by gray. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 50% 35%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.68));
    pointer-events: none;
    z-index: -1;
}

.page {
    max-width: 1600px;
    margin: 0 auto;
    padding: 24px clamp(12px, 3vw, 40px) 48px;
}

/* ---------- header ---------- */

.topbar {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--rule);
}

.brand-icon {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    border: 2px solid var(--gold-dim);
    box-shadow: var(--shadow);
}

.brand-text {
    flex: 1 1 auto;
}

.brand-text h1 {
    margin: 0;
    font-size: clamp(28px, 5vw, 46px);
    font-style: italic;
    letter-spacing: 0.5px;
    color: var(--gold);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7), 0 0 18px rgba(0, 0, 0, 0.6);
}

.brand-text p {
    margin: 2px 0 0;
    font-size: clamp(13px, 2vw, 17px);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 244, 230, 0.65);
}

.topnav {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* ---------- Gold nine-patch button (ButtonTheme.Gold, buttons.png at 0,0) ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 0;                       /* the nine-patch borders supply the whole 49px height */
    min-width: 101px;
    /* The button face in button-gold.png starts 5px in from the top and the left edge of the
       source rect (the right and bottom edges have no such gap), so the middle of the border box
       sits above and left of the middle of the face the user sees. The label is a zero-height,
       zero-leading line centred on the content box, so padding the content box down and right
       puts it in the middle of the face: 5px on the left, and 7px on top - twice the vertical
       offset, because the padding pushes the bottom of the face down along with the label. */
    padding: 7px 14px 0 19px;
    border-style: solid;
    border-width: 24px 24px 25px;
    border-image: url("../img/button-gold.png") 23 24 26 fill / 24px 24px 25px stretch;
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    line-height: 0;
    color: rgba(0, 0, 0, 0.78);      /* ButtonTheme.Gold TextColor */
    text-decoration: none;
    white-space: nowrap;
    background: none;
    cursor: pointer;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6));
}

.btn:hover {
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6)) brightness(1.08);
}

.btn:active {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)) brightness(0.86);
}

.btn:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* ---------- gilded oak plaque heading (ButtonTheme.GildedOak, buttons.png at 4,272) ---------- */

.plaque {
    /* the art is a plaque, not a rail - let it keep plaque proportions on wide screens */
    max-width: 760px;
    margin: 28px auto 22px;
    /* Same story as .btn: the face in plaque-oak.png does not sit in the middle of its source
       rect - it is inset 3px on the left against nothing on the right, and 3px at the bottom
       against 1px at the top. The extra 3px of left padding moves the heading right by half of
       that, and the 2px of bottom padding moves the face down past it, by half of that. */
    padding: 0 8px 2px 11px;
    border-style: solid;
    border-width: 38px 86px;
    border-image: url("../img/plaque-oak.png") 38 86 fill / 38px 86px stretch;
    min-height: 0;
    font-size: clamp(17px, 2.4vw, 22px);
    font-weight: 700;
    line-height: 0;
    text-align: center;
    letter-spacing: 1px;
    color: var(--ink);
    text-shadow: 0 1px 0 rgba(255, 235, 200, 0.35);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6));
}

/* ---------- landing page tiles ---------- */

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
}

.tile {
    padding: 18px 20px;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(251, 223, 183, 0.14), 0 4px 12px rgba(0, 0, 0, 0.5);
}

.tile-value {
    display: block;
    font-size: clamp(24px, 3.4vw, 34px);
    font-weight: 700;
    color: var(--gold);
    text-shadow: var(--shadow);
    overflow-wrap: anywhere;
}

/* dates and version strings need a lot more room than a counter does */
.tile-value.text {
    font-size: clamp(17px, 1.9vw, 22px);
    line-height: 1.35;
}

.tile-label {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 244, 230, 0.6);
}

.downloads {
    display: flex;
    gap: 24px;
    margin-top: 32px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

.store-link {
    display: flex;
    align-items: center;
    transition: transform 0.2s ease, filter 0.2s ease;
    text-decoration: none;
}

.store-link:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.app-badge {
    height: 40px;
    width: auto;
    display: block;
    vertical-align: middle;
}

.notice {
    margin: 32px 0;
    text-align: center;
    font-size: 22px;
    color: var(--gold);
    text-shadow: var(--shadow);
}

.footnote {
    margin-top: 22px;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 244, 230, 0.45);
}

/* ---------- rankings layout: the scene's left control column plus the table ---------- */

.rankings {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 24px;
}

.controls {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 14px;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(251, 223, 183, 0.14), 0 4px 12px rgba(0, 0, 0, 0.5);
    position: sticky;
    top: 16px;
}

.controls h2 {
    margin: 0;
    text-align: center;
    font-size: 26px;
    color: var(--gold);
    text-shadow: var(--shadow);
}

.control-label {
    margin: 4px 0 -8px;
    text-align: center;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 244, 230, 0.6);
}

.controls .btn {
    align-self: center;
    margin-top: 6px;
}

/* ---------- LeftRightSelector look-alike ---------- */

.selector {
    display: flex;
    align-items: center;
    gap: 6px;
}

.selector[hidden] {
    display: none;
}

.selector .arrow {
    flex: 0 0 auto;
    width: 44px;
    height: 49px;
    padding: 0;
    border: 0;
    background: transparent center / contain no-repeat;
    cursor: pointer;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7));
}

.selector .arrow:hover {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7)) brightness(1.15);
}

.selector .arrow:active {
    transform: scale(0.92);
}

.selector .arrow:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 4px;
}

.selector .arrow.left {
    background-image: url("../img/arrow-left.png");
}

.selector .arrow.right {
    background-image: url("../img/arrow-right.png");
}

.selector .value {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-size: 21px;
    font-weight: 600;
    color: var(--gold);
    text-shadow: var(--shadow);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selector.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ---------- rankings table ---------- */

.board {
    position: relative;
    min-height: 240px;
    padding: 10px 6px 6px;
    background: var(--panel-strong);
    border: 1px solid var(--rule);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(251, 223, 183, 0.14), 0 4px 12px rgba(0, 0, 0, 0.5);
    overflow-x: auto;
}

table.rankings-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

table.rankings-table th {
    position: sticky;
    top: 0;
    padding: 8px 10px;
    background: rgba(16, 12, 8, 0.95);
    border-bottom: 1px solid var(--rule);
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold-dim);
    text-align: right;
}

table.rankings-table th:first-child,
table.rankings-table th.name {
    text-align: left;
}

table.rankings-table td {
    padding: 7px 10px;
    border-bottom: 1px solid rgba(203, 168, 105, 0.12);
    font-size: 17px;
    text-align: right;
}

table.rankings-table td.rank {
    width: 1%;
    color: rgba(255, 244, 230, 0.5);
    text-align: left;
}

table.rankings-table td.name {
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

table.rankings-table tbody tr {
    cursor: pointer;
}

table.rankings-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.22);
}

table.rankings-table tbody tr:hover {
    background: rgba(251, 223, 183, 0.08);
}

/* TextBox.HighlightColor = Settings.HighlightedTextColor (gold) in the rankings scene */
table.rankings-table tbody tr.highlighted td {
    color: var(--gold);
    font-weight: 700;
    background: rgba(251, 223, 183, 0.12);
}

.deleted td.name {
    text-decoration: line-through;
    opacity: 0.6;
}

/* the name cell is a real link so a row can be opened in a new tab, but it should read as part
   of the row rather than as a blue link */
.player-link {
    color: inherit;
    text-decoration: none;
}

table.rankings-table tbody tr:hover .player-link {
    color: var(--gold);
    text-decoration: underline;
}

/* ---------- player detail page ---------- */

.player-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 6px 6px 10px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--gold);
    text-shadow: var(--shadow);
}

.session-count {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 244, 230, 0.55);
}

/* the summary is a single row - it reads as a headline, not as a table body */
table.summary-table td {
    font-size: 21px;
    font-weight: 700;
    color: var(--gold);
}

table.summary-table tbody tr,
table.session-table tbody tr {
    cursor: default;
}

table.summary-table tbody tr:hover,
table.session-table tbody tr:hover {
    background: rgba(251, 223, 183, 0.05);
}

/* ---------- charts ---------- */

.charts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 10px 4px 18px;
}

svg.radar {
    width: min(100%, 380px);
    height: auto;
}

.radar-grid {
    fill: none;
    stroke: rgba(203, 168, 105, 0.22);
    stroke-width: 1;
}

.radar-axis {
    stroke: rgba(203, 168, 105, 0.35);
    stroke-width: 1;
}

.radar-series {
    fill-opacity: 0.28;
    stroke-width: 2.5;
    stroke-linejoin: round;
}

.radar-label {
    font: 600 13px "Trebuchet MS", "Segoe UI", sans-serif;
    fill: var(--cream);
}

.radar-value {
    font-weight: 400;
    fill: rgba(255, 244, 230, 0.6);
}

.bars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    width: 100%;
}

.bar-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

svg.bar {
    width: 100%;
    height: 110px;
}

.bar-zero {
    stroke: rgba(203, 168, 105, 0.45);
    stroke-width: 1;
}

.bar-label {
    font-size: 14px;
    color: rgba(255, 244, 230, 0.7);
}

.bar-value {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------- history line chart ---------- */

.chart-legend {
    display: flex;
    gap: 18px;
    margin: 0 6px 6px;
    font-size: 14px;
}

.chart-legend .key::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 3px;
    margin-right: 7px;
    vertical-align: middle;
}

/* the two series keep the game's own colors: Player1Color for money, Player3Color for Elo */
.chart-legend .key.money::before {
    background: #ff4c4c;
}

.chart-legend .key.elo::before {
    background: #0399e5;
}

.line-chart svg.line {
    display: block;
    width: 100%;
    height: auto;
}

.line-grid {
    stroke: rgba(203, 168, 105, 0.16);
    stroke-width: 1;
}

.line-zero {
    stroke: rgba(203, 168, 105, 0.5);
    stroke-width: 1;
}

.line-label {
    font: 400 12px "Trebuchet MS", "Segoe UI", sans-serif;
    fill: rgba(255, 244, 230, 0.55);
}

.chart-footer {
    margin: 4px 8px 8px;
    text-align: right;
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    color: var(--gold);
    text-shadow: var(--shadow);
    white-space: pre;
}

/* ---------- session tables ---------- */

#sessions {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.sessions-title {
    margin: 8px 6px 0;
    font-size: 24px;
    color: var(--gold);
    text-shadow: var(--shadow);
}

.board.session {
    min-height: 0;
}

/* multi-row headers can't stick without overlapping each other */
table.session-table th {
    position: static;
}

table.session-table th.seat {
    text-align: center;
    font-size: 15px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--cream);
    border-bottom: 0;
}

table.session-table th.seat.me {
    color: var(--gold);
}

table.session-table th.seat.deleted-name {
    text-decoration: line-through;
    opacity: 0.6;
}

table.session-table th.seat .player-link:hover {
    text-decoration: underline;
}

/* the sitting's result, right under the names it belongs to */
table.session-table tr.session-total th {
    font-size: 17px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    border-bottom: 0;
}

table.session-table tr.session-units th {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 244, 230, 0.45);
}

table.session-table td.time,
table.session-table th.time {
    color: rgba(255, 244, 230, 0.5);
    font-size: 14px;
    text-align: left;
}

table.session-table td.me {
    font-weight: 700;
    background: rgba(251, 223, 183, 0.07);
}

/* the game type and who chose it stack in one cell; letting them wrap mid-word would shred
   long player names across four lines */
table.session-table td.name {
    white-space: nowrap;
    overflow-wrap: normal;
}

.starter {
    display: block;
    color: rgba(255, 244, 230, 0.4);
    font-size: 14px;
}

/* gains and losses, as the scenes color them */
.pos {
    color: #7ee081;
}

.neg {
    color: #ff8a8a;
}

.overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    background: rgba(16, 12, 8, 0.6);
    border-radius: 10px;
    font-size: 24px;
    color: var(--gold);
    text-shadow: var(--shadow);
}

[hidden] {
    display: none !important;
}

@media (max-width: 860px) {
    .rankings {
        grid-template-columns: minmax(0, 1fr);
    }

    .controls {
        position: static;
    }

    table.rankings-table td {
        font-size: 15px;
        padding: 6px 7px;
    }

    table.rankings-table th {
        padding: 7px;
        font-size: 12px;
    }
}