/* The site pages: the log in / register / server list page, the admin portal and its tools. The look itself (the timber-and-gold palette, the
   pixel unit, the bevels, the outlined text) comes from theme.css, which is loaded first - this file only says where each part is used. */

:root {
    --font-xs: 14px;
    --font-sm: 16px;
    --font-base: 18px;
    --font-lg: 22px;
    --font-xl: 28px;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    color: var(--text);
    background-color: var(--ink);
    font-family: "Forum", Arial, Helvetica, sans-serif;
    font-size: var(--font-base);
}

/* The photograph, darkened towards the edges with the same brown the rest of the look is made of */
.hero-backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        radial-gradient(ellipse 70% 60% at 50% 38%, transparent 0%, rgba(28, 16, 8, 0.6) 65%, var(--ink) 100%),
        url('/assets/home-page-bg.png');
    background-repeat: no-repeat;
    background-position: center, center 30%;
    background-size: cover, cover;
}

#page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 20px;
    padding: 12px 36px 14px;
    background-color: var(--wood-1);
    background-image: var(--texture-dither);
    background-size: 4px 4px;
    image-rendering: pixelated;
    border-bottom: var(--px) solid var(--ink);
    /* A gold moulding under the header: dark, gold, shaded gold, dark */
    box-shadow:
        inset 0 var(--px) 0 var(--line),
        0 calc(var(--px) * 1) 0 var(--ink),
        0 calc(var(--px) * 2) 0 var(--logo-gold-hi),
        0 calc(var(--px) * 3) 0 var(--logo-gold),
        0 calc(var(--px) * 4) 0 var(--logo-gold-lo),
        0 calc(var(--px) * 5) 0 var(--ink);
}

/* The name of the game: big, white, with a thick dark outline and a hard shadow beneath */
.site-header__brand {
    font-size: 46px;
    line-height: 1;
    color: var(--text-hi);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    text-shadow:
        -3px -1px 0 var(--outline),
        -3px 1px 0 var(--outline),
        -1px -3px 0 var(--outline),
        -1px 3px 0 var(--outline),
        1px -3px 0 var(--outline),
        1px 3px 0 var(--outline),
        3px -1px 0 var(--outline),
        3px 1px 0 var(--outline),
        -3px 0px 0 var(--outline),
        0px -3px 0 var(--outline),
        0px 3px 0 var(--outline),
        3px 0px 0 var(--outline),
        -2px -2px 0 var(--outline),
        -2px 2px 0 var(--outline),
        2px -2px 0 var(--outline),
        2px 2px 0 var(--outline),
        -2px -1px 0 var(--outline),
        -2px 1px 0 var(--outline),
        -1px -2px 0 var(--outline),
        -1px 2px 0 var(--outline),
        1px -2px 0 var(--outline),
        1px 2px 0 var(--outline),
        2px -1px 0 var(--outline),
        2px 1px 0 var(--outline),
        -2px 0px 0 var(--outline),
        0px -2px 0 var(--outline),
        0px 2px 0 var(--outline),
        2px 0px 0 var(--outline),
        -1px -1px 0 var(--outline),
        -1px 1px 0 var(--outline),
        1px -1px 0 var(--outline),
        1px 1px 0 var(--outline),
        -1px 0px 0 var(--outline),
        0px -1px 0 var(--outline),
        0px 1px 0 var(--outline),
        1px 0px 0 var(--outline),
        0 7px 0 var(--outline),
        0 8px 0 rgba(0, 0, 0, 0.45);
}

.site-header__nav {
    display: flex;
    gap: 10px;
}

.site-header__nav a {
    background: var(--fill-ctrl);
    border: var(--px) solid var(--ink);
    box-shadow: var(--bevel-raised);
    color: var(--text);
    text-decoration: none;
    padding: 7px 20px;
    font-size: 20px;
}

.site-header__nav a:hover,
.site-header__nav a:focus-visible {
    background: var(--accent-wash);
    border-color: var(--gold);
    color: var(--text-hi);
}

/* The page you are on, solid gold like the game's selected tab */
.site-header__nav a[aria-current="page"] {
    background: var(--gold);
    border-color: var(--ink);
    box-shadow: var(--bevel-gold);
    color: var(--on-gold);
    text-shadow: none;
}

.site-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 32px;
}

.panel-heading {
    margin: 0 0 20px;
    font-size: var(--font-lg);
    font-weight: normal;
    color: var(--text-hi);
    text-align: center;
}

.panel {
    width: 100%;
    max-width: 400px;
    background-color: var(--wood-1);
    background-image: var(--texture-dither);
    background-size: 4px 4px;
    image-rendering: pixelated;
    border: var(--px) solid var(--ink);
    box-shadow: var(--bevel-panel), var(--shadow-hard);
    padding: 20px 24px;
    text-align: center;
}

/* The crest at the top of the log in panel - the same art, gold frame and live-text banner as the logo in the game's sidebar, here at 4x. The
   text sits in the blank banner at the bottom of the art, which is why it is written over the picture instead of being part of it. */
.crest {
    --crest-border: 6px;
    position: relative;
    width: calc(256px + 2 * var(--crest-border));
    max-width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 auto 16px;
    border: var(--crest-border) solid transparent;
    isolation: isolate;
    box-shadow: 0 0 0 var(--px) var(--ink);
}

.crest::before {
    content: '';
    position: absolute;
    inset: calc(var(--crest-border) * -1);
    z-index: -1;
    background: var(--logo-gold);
    box-shadow: inset var(--px) var(--px) 0 var(--logo-gold-hi), inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--logo-gold-lo);
}

.crest::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 var(--px) var(--ink);
    pointer-events: none;
}

.crest__art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

.crest__label {
    position: absolute;
    left: 11%;
    right: 12%;
    top: 83%;
    bottom: 2%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-size: 24px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
}

.tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}

.tab {
    flex: 1;
    background: var(--fill-ctrl);
    border: var(--px) solid var(--ink);
    box-shadow: var(--bevel-raised);
    color: var(--text-2);
    font-family: inherit;
    font-size: 21px;
    padding: 9px 0;
    cursor: pointer;
}

.tab:hover {
    background: var(--accent-wash);
    border-color: var(--gold);
    color: var(--text-hi);
}

.tab.is-active {
    background: var(--gold);
    border-color: var(--ink);
    box-shadow: var(--bevel-gold);
    color: var(--on-gold);
    text-shadow: none;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
}

.auth-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: var(--font-sm);
    color: var(--text-2);
}

/* A tick box and its words, side by side (the generate-server form's options) rather than the box over the words */
.auth-form label.admin-toggle {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
}

.auth-form label.admin-toggle input {
    flex-shrink: 0;
    margin-top: 1px;
}

.auth-form input {
    padding: 8px 10px;
    border: var(--px) solid var(--ink);
    background: var(--wood-0);
    box-shadow: var(--bevel-well);
    color: var(--text-hi);
    font-family: inherit;
    font-size: var(--font-base);
    text-shadow: none;
}

.auth-form input:focus {
    outline: var(--px) solid var(--gold);
    outline-offset: 0;
}

/* The main action of a panel: solid gold */
.button,
.auth-form button[type="submit"] {
    margin-top: 10px;
    padding: 9px 16px;
    border: var(--px) solid var(--ink);
    background: var(--gold);
    box-shadow: var(--bevel-gold);
    color: var(--on-gold);
    text-shadow: none;
    font-family: inherit;
    font-size: var(--font-base);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.button:hover,
.auth-form button[type="submit"]:hover {
    background: var(--gold-hi);
}

/* Log In / Register is the thing to press on this page */
.auth-form button[type="submit"] {
    padding: 12px 16px;
    font-size: 24px;
    letter-spacing: 0.03em;
}

.button--secondary {
    background: var(--fill-ctrl);
    box-shadow: var(--bevel-raised);
    color: var(--text);
    text-shadow: var(--text-outline);
}

.button--secondary:hover {
    background: var(--accent-wash);
    border-color: var(--gold);
    color: var(--text-hi);
}

.button--destructive {
    background: var(--fill-attack);
    box-shadow: var(--bevel-raised);
    color: var(--text-hi);
    text-shadow: var(--text-outline);
}

.button--destructive:hover {
    background: var(--fill-attack);
    border-color: var(--gold);
    filter: brightness(1.2);
}

.button--destructive:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.button:active:not(:disabled),
.tab:active,
.auth-form button[type="submit"]:active:not(:disabled),
.server-button:active,
.site-header__nav a:active {
    box-shadow: var(--bevel-pressed);
}

.auth-form button[type="submit"]:disabled,
.auth-form input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* A square that turns in eighths, so it ticks round instead of gliding */
.spinner {
    width: 28px;
    height: 28px;
    margin: 20px auto 0;
    border: 4px solid var(--wood-3);
    border-top-color: var(--gold);
    animation: spin 0.8s steps(8) infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.auth-message {
    margin: 16px 0 0;
    font-size: var(--font-sm);
    color: var(--bad);
}

.auth-message.is-success {
    color: var(--good);
}

/* "Play as a guest", under both tabs: lead-in in quiet type, the invitation itself in gold */
.guest-button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 16px;
    padding: 10px 16px;
    line-height: 1.3;
}

.guest-button__lead {
    display: block;
    font-size: var(--font-sm);
    color: var(--text-2);
}

.guest-button__action {
    display: block;
    font-size: 22px;
    color: var(--gold-hi);
}

.panel-note {
    margin: 16px 0 0;
    font-size: var(--font-sm);
    color: var(--text-2);
}

.server-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 16px;
}

/* A server: two rows - its name and kind on top; below, how long it has run, who is on it and how far away it is */
.server-button {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--fill-ctrl);
    border: var(--px) solid var(--ink);
    box-shadow: var(--bevel-raised);
    color: var(--text);
    font-family: inherit;
    font-size: var(--font-base);
    padding: 8px 12px;
    cursor: pointer;
    text-align: left;
}

.server-button__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.server-button__bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

/* The name gives way (with an ellipsis) before the kind of server does */
.server-button__name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--gold);
    font-size: var(--font-lg, 1.4em);
    text-shadow: var(--text-outline);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.server-button__age {
    color: var(--text-3);
    font-size: var(--font-sm);
}

.server-button__type {
    flex: 0 0 auto;
    white-space: nowrap;
    color: var(--text);
    text-shadow: var(--text-outline);
}

.server-button__ping {
    justify-self: end;
}

.server-button__players,
.server-button__ping {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-sm);
    text-shadow: var(--text-outline);
}

.server-button__icon {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
}

/* "Developers only", beside the kind of server it is - smaller, in gold */
.server-button__tag {
    margin-left: 6px;
    font-size: var(--font-sm);
    color: var(--gold);
}

.server-button:hover {
    background: var(--accent-wash);
    border-color: var(--gold);
    color: var(--text-hi);
}

.account-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.panel--wide {
    max-width: 1200px;
    text-align: left;
}

.battle-columns {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.battle-column {
    flex: 1 1 320px;
    min-width: 280px;
}

.battle-column--left {
    flex-basis: 380px;
}

.battle-column--right {
    flex-basis: 480px;
}

/* manage-servers.html's explanation - plain text, unlike .auth-message (which is an error colour) */
.manage-servers-note {
    font-size: var(--font-sm);
    line-height: 1.5;
    color: var(--text-2);
    margin: 0 0 8px;
}

.battle-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: var(--font-sm);
}

.battle-table th,
.battle-table td {
    padding: 6px 8px;
    border-bottom: var(--px) solid var(--line-dim);
    text-align: left;
}

.battle-table th {
    color: var(--text-2);
    font-weight: normal;
    border-bottom-color: var(--ink);
}

.battle-quickset-row td {
    background: var(--fill-sub);
    font-style: italic;
    color: var(--text-2);
}

.battle-table input[type="number"],
.battle-table select {
    padding: 4px 8px;
    border: var(--px) solid var(--ink);
    background: var(--wood-0);
    box-shadow: var(--bevel-well);
    color: var(--text-hi);
    font-family: inherit;
    font-size: var(--font-sm);
    text-shadow: none;
}

.battle-table input[type="number"] {
    width: 96px;
}

.battle-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

/* The defender preset picker above the calculator's columns */
.battle-preset-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.battle-preset-row select {
    padding: 4px 8px;
    border: var(--px) solid var(--ink);
    background: var(--wood-0);
    box-shadow: var(--bevel-well);
    color: var(--text-hi);
    font-family: inherit;
    font-size: var(--font-sm);
    text-shadow: none;
}

.battle-preset-note {
    font-size: var(--font-sm);
    color: var(--text-2);
}

/* ---- battle-calc.html's round-by-round view (src/battleTraceView.js) ---- */
.battle-debug-option {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    font-size: var(--font-sm);
    color: var(--text);
    cursor: pointer;
}

.battle-trace {
    margin-top: 32px;
    padding-top: 24px;
    border-top: var(--px) solid var(--ink);
    box-shadow: inset 0 var(--px) 0 var(--line);
}

.trace-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.trace-button {
    margin-top: 0;
    padding: 5px 12px;
    font-size: var(--font-sm);
}

.trace-button:disabled {
    opacity: 0.4;
    cursor: default;
}

.trace-slider {
    flex: 1 1 200px;
    min-width: 160px;
    accent-color: var(--gold);
}

.trace-round-label {
    min-width: 120px;
}

.trace-copy-note {
    font-size: var(--font-xs);
    color: var(--text-2);
}

.trace-log {
    width: 100%;
    height: 240px;
    margin-top: 12px;
    background: var(--wood-0);
    box-shadow: var(--bevel-well);
    color: var(--text);
    border: var(--px) solid var(--ink);
    font-family: monospace;
    font-size: var(--font-xs);
    text-shadow: none;
}

.trace-details {
    margin: 0 0 16px;
}

.trace-details > summary {
    cursor: pointer;
    font-size: var(--font-base);
    color: var(--text);
}

.trace-overview-scroll {
    max-height: 220px;
    overflow-y: auto;
}

.trace-overview-row {
    cursor: pointer;
}

.trace-overview-row:hover {
    background: var(--fill-hover);
}

.trace-overview-row.is-current {
    background: var(--accent-wash-2);
}

.trace-section {
    margin: 20px 0;
}

.trace-section-title {
    margin: 0 0 6px;
    font-size: var(--font-base);
    font-weight: normal;
    color: var(--text-hi);
}

.trace-side-heading {
    margin: 8px 0 0;
    font-size: var(--font-sm);
    font-weight: normal;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.trace-side-heading.is-attacker {
    color: var(--info);
}

.trace-side-heading.is-defender {
    color: var(--bad);
}

.trace-none,
.trace-field-legend {
    margin: 6px 0;
    font-size: var(--font-xs);
    color: var(--text-2);
}

.trace-table {
    margin: 6px 0 12px;
    font-size: var(--font-xs);
}

/* The two sides' turn tables go one above the other - they have a lot of columns */
.trace-turn-column {
    flex: 1 1 100%;
    overflow-x: auto;
}

.trace-volley-head td {
    background: var(--fill-sub);
}

.trace-wasted {
    color: var(--gold);
}

/* The battlefield: one row per unit, positions drawn to scale along the field */
.trace-field {
    padding: 8px 10px;
    background: var(--wood-0);
    box-shadow: var(--bevel-well);
    border: var(--px) solid var(--ink);
}

.trace-field-axis {
    display: flex;
    justify-content: space-between;
    margin-left: 190px;
    margin-bottom: 4px;
    font-size: var(--font-xs);
    color: var(--text-3);
}

.trace-field-divider {
    margin: 6px 0;
    border-top: var(--px) dashed var(--line);
}

.trace-field-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 3px 0;
}

.trace-field-row.is-waiting {
    opacity: 0.45;
}

.trace-field-label {
    flex: 0 0 180px;
    font-size: var(--font-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trace-field-row.is-attacker .trace-field-label {
    color: var(--info);
}

.trace-field-row.is-defender .trace-field-label {
    color: var(--bad);
}

.trace-field-track {
    position: relative;
    flex: 1;
    height: 18px;
    background: var(--fill-sub);
    border-right: 4px solid var(--text-2);
}

.trace-field-reach,
.trace-field-trail {
    position: absolute;
    top: 0;
    bottom: 0;
}

/* How far a unit could strike: a tint over the track, which has to be see-through to show the track beneath it */
.trace-field-reach {
    opacity: 0.28;
}

.trace-field-trail {
    top: 8px;
    bottom: 8px;
}

.trace-field-marker {
    position: absolute;
    top: 3px;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border: var(--px) solid;
    background: transparent;
}

.is-attacker .trace-field-reach,
.is-attacker .trace-field-trail,
.is-attacker .trace-field-marker.is-end {
    background: var(--info);
}

.is-defender .trace-field-reach,
.is-defender .trace-field-trail,
.is-defender .trace-field-marker.is-end {
    background: var(--bad);
}

.is-attacker .trace-field-marker {
    border-color: var(--info);
}

.is-defender .trace-field-marker {
    border-color: var(--bad);
}

/* Phone-width windows: a smaller title and tighter header so the nav drops underneath instead of squeezing */
@media (max-width: 640px) {
    .site-header {
        padding: 10px 16px 12px;
    }

    .site-header__brand {
        font-size: 32px;
    }

    .site-main {
        padding: 16px;
    }
}

/* The strip at the foot of the home page and the guide: the same timber as the header, with plain links */
.site-footer {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 28px;
    padding: 14px 36px;
    background-color: var(--wood-1);
    background-image: var(--texture-dither);
    background-size: 4px 4px;
    border-top: var(--px) solid var(--ink);
}

.site-footer a {
    color: var(--text-3);
    font-size: var(--font-sm);
    text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
    color: var(--gold-hi);
    text-decoration: underline;
}

/* The admin portal: the stack of buttons on the left, the monitoring dashboard (src/adminDashboard.js) filling the rest */
.admin-layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    max-width: 1800px;
}

.admin-menu {
    flex: 0 0 400px;
}

.admin-dashboard {
    flex: 1;
    min-width: 0;
    max-width: none;
    text-align: left;
}

/* The tabs along the top (they are .tab, which stretches to fill - here each is only as wide as its name), then which server, then Refresh */
.admin-dashboard__bar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.admin-dashboard__tabs {
    flex: 1;
    margin-bottom: 0;
    flex-wrap: wrap;
}

.admin-dashboard__tabs .tab {
    flex: 0 0 auto;
    padding: 9px 22px;
}

.admin-dashboard__server {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-2);
    font-size: var(--font-sm);
}

.admin-dashboard__server select {
    padding: 6px 8px;
    border: var(--px) solid var(--ink);
    background: var(--fill-sub);
    color: var(--text);
    font-family: inherit;
    font-size: var(--font-sm);
}

.admin-dashboard__bar .button {
    margin-top: 0;
}

/* A table that scrolls inside the panel, its headings staying put */
.admin-table-scroll {
    max-height: calc(100vh - 340px);
    min-height: 160px;
    overflow: auto;
    border: var(--px) solid var(--ink);
    background: var(--fill-sub);
}

.admin-table {
    margin: 0;
}

.admin-table th {
    position: sticky;
    top: 0;
    background: var(--wood-1);
}

.admin-table td:nth-child(3),
.admin-table th:nth-child(3) {
    text-align: center;
    white-space: nowrap;
}

/* The "Track location" button in a row: small, like the cell it sits in */
.admin-track-button {
    margin: 0;
    padding: 3px 12px;
    font-size: var(--font-sm);
    white-space: nowrap;
}

.admin-table td:nth-child(1) {
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .admin-layout {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-menu {
        flex: none;
        max-width: none;
    }
}

/* The Player activity tab (src/adminActivityTab.js): the period picker, sortable headings, and the graph view of one player */
.admin-activity-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    color: var(--text-2);
    font-size: var(--font-sm);
}

.admin-activity-toolbar label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-activity-toolbar select {
    padding: 6px 8px;
    border: var(--px) solid var(--ink);
    background: var(--fill-sub);
    color: var(--text);
    font-family: inherit;
    font-size: var(--font-sm);
}

/* What is shown stays up, dimmed, while the next answer is fetched - the picture does not jump */
#admin-activity-list.is-loading,
#admin-activity-detail.is-loading {
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.admin-sort-button {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.admin-sort-button:hover,
.admin-sort-button:focus-visible {
    color: var(--text-hi);
}

.admin-sort-arrow {
    color: var(--gold);
}

/* Figures line up on the right; the first column stays left (and the shared-IP table's centred third column is not wanted here) */
.admin-activity-table td:nth-child(n+2):nth-child(-n+4),
.admin-activity-table th:nth-child(n+2):nth-child(-n+4) {
    text-align: right;
    white-space: nowrap;
}

.admin-table-scroll--short {
    max-height: 260px;
    min-height: 0;
}

#admin-activity-detail {
    position: relative;
}

.admin-activity-detail-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 8px;
}

.admin-activity-detail-header .button {
    margin-top: 0;
}

.admin-activity-detail-title {
    margin: 0;
    font-size: var(--font-lg);
    font-weight: normal;
    color: var(--text-hi);
}

.admin-chart {
    margin: 14px 0 0;
}

.admin-chart-title {
    margin: 0 0 6px;
    font-size: var(--font-base);
    font-weight: normal;
    color: var(--text-2);
}

.admin-chart-frame {
    position: relative;
    background: var(--fill-sub);
    border: var(--px) solid var(--ink);
}

.admin-chart-canvas {
    display: block;
    width: 100%;
}

.admin-chart-marker {
    position: absolute;
    pointer-events: none;
}

.admin-chart-marker--line {
    background: var(--text-2);
    opacity: 0.7;
}

.admin-chart-marker--cell {
    border: 1px solid var(--text-hi);
    box-sizing: border-box;
}

.admin-chart-tooltip {
    position: absolute;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
    background: var(--wood-0);
    border: var(--px) solid var(--ink);
    font-size: var(--font-sm);
    pointer-events: none;
    white-space: nowrap;
}

.admin-chart-tooltip-value {
    color: var(--text-hi);
}

.admin-chart-tooltip-label {
    color: var(--text-2);
}

.admin-chart-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin-top: 10px;
    color: var(--text-2);
    font-size: var(--font-sm);
}

.admin-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.admin-chart-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
}

.admin-chart-legend-note {
    color: var(--text-3);
}

.admin-activity-days {
    margin-top: 16px;
    color: var(--text-2);
}

.admin-activity-days summary {
    cursor: pointer;
    margin-bottom: 8px;
}

/* The Manage players tab (src/adminPlayersTab.js): the table, and the windows that open over the page */
.admin-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.admin-toggle input {
    width: 18px;
    height: 18px;
    accent-color: var(--gold);
    cursor: pointer;
}

.admin-loadtest-heading,
.admin-accounts-heading {
    margin: 18px 0 6px;
    color: var(--text);
    font-size: var(--font-base);
}

.admin-loadtest-progress {
    width: 100%;
    height: 14px;
    accent-color: var(--gold);
}

.admin-loadtest-lines {
    margin: 0 0 10px;
    padding-left: 20px;
    color: var(--text-2);
    font-size: var(--font-sm);
}

.admin-select {
    padding: 6px 8px;
    border: var(--px) solid var(--ink);
    background: var(--fill-sub);
    color: var(--text);
    font-family: inherit;
    font-size: var(--font-sm);
}

.admin-search {
    margin-left: auto;
    min-width: 260px;
}

.admin-players-table td:nth-child(n+3):nth-child(-n+4),
.admin-players-table th:nth-child(n+3):nth-child(-n+4),
.admin-players-table td:nth-child(7),
.admin-players-table th:nth-child(7) {
    text-align: right;
}

.admin-players-table td {
    white-space: nowrap;
}

.admin-player-name {
    color: var(--text-hi);
}

/* What a player is under, beside their name */
.admin-player-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 0 8px;
    font-size: var(--font-xs);
    line-height: 1.5;
    border: var(--px) solid var(--ink);
}

.admin-player-tag--suspended {
    background: var(--fill-attack);
    color: var(--text-hi);
}

.admin-player-tag--muted {
    background: var(--accent-wash-2);
    color: var(--text-hi);
}

#admin-players-list.is-loading {
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.admin-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(18, 10, 5, 0.72);
}

.admin-modal {
    width: min(560px, 100%);
    max-height: 100%;
    overflow-y: auto;
    text-align: left;
    background-color: var(--wood-1);
    background-image: var(--texture-dither);
    background-size: 4px 4px;
    image-rendering: pixelated;
    border: var(--px) solid var(--ink);
    box-shadow: var(--bevel-panel), var(--shadow-hard);
}

.admin-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: var(--px) solid var(--ink);
}

.admin-modal-title {
    margin: 0;
    font-size: var(--font-lg);
    font-weight: normal;
    color: var(--text-hi);
}

.admin-modal-close {
    padding: 2px 10px;
    border: var(--px) solid var(--ink);
    background: var(--fill-ctrl);
    box-shadow: var(--bevel-raised);
    color: var(--text);
    font-family: inherit;
    font-size: var(--font-base);
    cursor: pointer;
}

.admin-modal-close:hover {
    background: var(--accent-wash);
    color: var(--text-hi);
}

.admin-modal-body {
    padding: 16px 18px 20px;
}

.admin-modal-summary {
    margin: 0 0 14px;
    color: var(--text-2);
    font-size: var(--font-sm);
}

.admin-modal-section {
    margin-top: 12px;
    padding: 12px 14px 14px;
    background: var(--fill-sub);
    border: var(--px) solid var(--ink);
}

.admin-modal-section-title {
    margin: 0 0 4px;
    font-size: var(--font-base);
    font-weight: normal;
    color: var(--gold-hi);
}

.admin-modal-section-text {
    margin: 0 0 10px;
    color: var(--text-2);
    font-size: var(--font-sm);
    line-height: 1.45;
}

.admin-modal-status {
    margin-bottom: 8px;
    color: var(--text-3);
    font-size: var(--font-sm);
}

.admin-modal-status.is-active {
    color: var(--gold);
}

.admin-modal-status.is-warning {
    color: var(--bad);
}

.admin-modal-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-modal .button {
    margin-top: 0;
}

.admin-modal .button:disabled {
    opacity: 0.4;
    cursor: default;
}

.admin-confirm-input {
    display: block;
    width: 100%;
    margin: 4px 0 14px;
    padding: 9px 10px;
    border: var(--px) solid var(--ink);
    background: var(--fill-sub);
    color: var(--text-hi);
    font-family: inherit;
    font-size: var(--font-base);
}

.admin-confirm-input:focus {
    outline: var(--px) solid var(--gold);
}

.admin-modal .auth-message {
    margin: 10px 0 0;
}

/* The Grant window of the Manage players tab (src/adminPlayersTab.js): the shop's products to pick from, then what was paid and a note */
.admin-grant-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.admin-grant-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--fill-sub);
    border: var(--px) solid var(--ink);
    cursor: pointer;
}

.admin-grant-option.is-selected {
    border-color: var(--gold);
}

.admin-grant-icon {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex: none;
}

.admin-grant-option-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.admin-grant-option-name {
    color: var(--text);
}

.admin-grant-option-description {
    color: var(--text-3);
    font-size: var(--font-sm);
}

.admin-grant-option-price {
    flex: none;
    color: var(--gold);
}

.admin-grant-field {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.admin-grant-field-label {
    flex: none;
    width: 120px;
    color: var(--text-3);
    font-size: var(--font-sm);
}

.admin-grant-amount,
.admin-grant-note {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    border: var(--px) solid var(--ink);
    background: var(--fill-sub);
    color: var(--text);
    font-family: inherit;
    font-size: var(--font-sm);
}

.admin-grant-amount {
    max-width: 140px;
}

.admin-grant-content .admin-modal-controls {
    margin-top: 12px;
}

/* The player history window (src/adminHistoryView.js): wide, with the filters on top and the list scrolling below them */
.admin-players-actions {
    white-space: nowrap;
}

.admin-players-actions .button + .button {
    margin-left: 6px;
}

.admin-history-modal {
    width: min(1100px, 100%);
    height: min(860px, 100%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.admin-history-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.admin-history-filters {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.admin-history-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.admin-history-chip {
    padding: 3px 12px;
    border: var(--px) solid var(--ink);
    background: var(--fill-ctrl);
    box-shadow: var(--bevel-raised);
    color: var(--text-2);
    font-family: inherit;
    font-size: var(--font-sm);
    cursor: pointer;
}

.admin-history-chip:hover {
    color: var(--text-hi);
    background: var(--accent-wash);
}

.admin-history-chip.is-active {
    background: var(--gold);
    box-shadow: var(--bevel-gold);
    color: var(--on-gold);
}

.admin-history-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.admin-history-controls label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-sm);
    color: var(--text-2);
}

.admin-history-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border: var(--px) solid var(--ink);
    background: var(--fill-sub);
}

.admin-history-day {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 4px 12px;
    background: var(--wood-0);
    border-bottom: var(--px) solid var(--ink);
    color: var(--gold-hi);
    font-size: var(--font-sm);
}

.admin-history-row {
    display: grid;
    grid-template-columns: 110px 140px 1fr;
    gap: 4px 12px;
    padding: 5px 12px;
    border-bottom: var(--px) solid rgba(0, 0, 0, 0.25);
    font-size: var(--font-sm);
    line-height: 1.4;
}

.admin-history-row:hover {
    background: var(--accent-wash);
}

.admin-history-row.is-bot {
    background: rgba(255, 255, 255, 0.025);
}

.admin-history-row.is-failed .admin-history-text {
    color: var(--text-3);
    text-decoration: line-through;
}

.admin-history-time {
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}

.admin-history-city {
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-history-text {
    color: var(--text);
}

.admin-history-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 0 6px;
    font-size: var(--font-xs);
    line-height: 1.5;
    border: var(--px) solid var(--ink);
    color: var(--text-hi);
}

.admin-history-tag--bot {
    background: var(--accent-wash-2);
}

.admin-history-tag--failed {
    background: var(--fill-attack);
}

.admin-history-error,
.admin-history-detail-toggle,
.admin-history-detail {
    grid-column: 3;
}

.admin-history-error {
    color: var(--bad);
}

.admin-history-detail-toggle {
    justify-self: start;
    padding: 0;
    border: 0;
    background: none;
    color: var(--gold);
    font-family: inherit;
    font-size: var(--font-xs);
    cursor: pointer;
}

.admin-history-detail {
    margin: 0;
    padding: 8px 10px;
    max-height: 260px;
    overflow: auto;
    background: var(--wood-0);
    border: var(--px) solid var(--ink);
    color: var(--text-2);
    font-size: var(--font-xs);
    white-space: pre-wrap;
}

.admin-history-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}

/* The home page and the "for Evony players" page: the log in panel, then the words about the game under it (.landing) - what search engines
   read, since the panel itself is only a form */
.home-main {
    flex-direction: column;
    justify-content: flex-start;
    gap: 28px;
    padding-top: 40px;
    padding-bottom: 40px;
}

.landing {
    max-width: 860px;
    padding: 28px 36px 32px;
    text-align: left;
    line-height: 1.5;
}

.landing p {
    margin: 0 0 12px;
}

.landing a {
    color: var(--gold-hi);
}

.landing a:hover,
.landing a:focus-visible {
    color: var(--text-hi);
}

.landing__title {
    margin: 0 0 8px;
    font-size: var(--font-xl);
    font-weight: normal;
    color: var(--gold);
}

.landing__lead {
    font-size: var(--font-lg);
    color: var(--text-hi);
}

.landing__heading {
    margin: 28px 0 10px;
    padding-bottom: 6px;
    border-bottom: var(--px) solid var(--line);
    font-size: var(--font-lg);
    font-weight: normal;
    color: var(--gold-hi);
}

.landing__features {
    margin: 0;
    padding-left: 22px;
}

.landing__features li {
    margin-bottom: 8px;
}

.landing strong {
    font-weight: normal;
    color: var(--gold-hi);
}

.landing__faq {
    margin: 0;
}

.landing__faq dt {
    margin-top: 14px;
    color: var(--gold-hi);
}

.landing__faq dd {
    margin: 4px 0 0;
    color: var(--text-2);
}

/* The table comparing the classic games with this one */
.landing__table-scroll {
    overflow-x: auto;
}

.landing__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-sm);
}

.landing__table th,
.landing__table td {
    padding: 8px 10px;
    border: var(--px) solid var(--line-dim);
    text-align: left;
    vertical-align: top;
}

.landing__table th {
    background: var(--wood-2);
    color: var(--gold-hi);
    font-weight: normal;
}

.landing__cta {
    display: inline-block;
    margin-top: 8px;
    padding: 10px 22px;
    background: var(--gold);
    box-shadow: var(--bevel-gold);
    color: var(--on-gold) !important;
    border: var(--px) solid var(--ink);
    /* Dark text on gold: none of the thick dark outline the page's lettering has - it fills the letters in and makes them a blur (like the other gold buttons) */
    text-shadow: none;
    text-decoration: none;
}

.landing__cta:hover,
.landing__cta:focus-visible {
    background: var(--gold-hi);
}

.landing__disclaimer {
    margin-top: 28px !important;
    font-size: var(--font-xs);
    color: var(--text-3);
}

/* The "this is a sandbox server" question over the server list */
.confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(28, 16, 8, 0.75);
}

.confirm-dialog {
    max-width: 440px;
}

.confirm-dialog__message {
    margin: 0 0 8px;
    line-height: 1.4;
}

.confirm-dialog__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}