/*
 * FoxtMC Earth map - rail theme.
 *
 * Full rewrite. The previous build kept a gold-heavy top bar with a floating
 * right panel; this one has no top bar at all. A single full-height rail on the
 * left owns every control, and the map occupies the remaining area for real -
 * #map is repositioned rather than covered, so nothing is ever hidden behind a
 * panel.
 *
 * Palette is neutral charcoal with exactly one accent (orange). Colour is used
 * for meaning only: accent = interactive/current, green = online, red = war.
 * Town swatches come from each town's own Towny mapColorHexCode.
 */

:root {
    color-scheme: dark;

    --fx-rail: 328px;

    --fx-bg:      #0d0f11;
    --fx-s1:      #131619;
    --fx-s2:      #191d21;
    --fx-s3:      #21262b;
    --fx-line:    rgba(255, 255, 255, 0.07);
    --fx-line-2:  rgba(255, 255, 255, 0.13);

    --fx-tx:      #e6e8ea;
    --fx-dim:     #868d94;
    --fx-dim-2:   #5f666d;

    --fx-accent:  #ff7a2f;
    --fx-accent-d: rgba(255, 122, 47, 0.13);
    --fx-green:   #4ade80;
    --fx-red:     #f87171;
    --fx-warn:    #fbbf24;

    --fx-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
    --fx-r: 10px;
}

* { box-sizing: border-box; }

html, body { overflow-x: hidden; overscroll-behavior-x: none; }

body {
    margin: 0;
    background: var(--fx-bg);
    font-family: var(--fx-font);
    color: var(--fx-tx);
}

/* The map is genuinely resized, not overlaid. Without !important squaremap's
   own bundled stylesheet keeps it pinned to the full viewport and the rail
   would sit on top of the map instead of beside it. */
#map {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
    background: var(--fx-bg);
    transition: left 220ms ease;
}

body.fx-rail-open #map { left: var(--fx-rail) !important; }

#fx {
    position: fixed;
    inset: 0;
    z-index: 20000;
    pointer-events: none;
    font-family: var(--fx-font);
    color: var(--fx-tx);
}

.fx-rail, .fx-open, .fx-toast, .fx-boot { pointer-events: auto; }

/* -------------------------------------------------------------------- rail */

.fx-rail {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--fx-rail);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--fx-line);
    background: var(--fx-s1);
    transform: translateX(-100%);
    transition: transform 220ms ease;
}

.fx-rail.is-on { transform: translateX(0); }

.fx-open {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--fx-line-2);
    border-radius: var(--fx-r);
    background: var(--fx-s2);
    color: var(--fx-tx);
    font-size: 17px;
    cursor: pointer;
    opacity: 1;
    transition: opacity 160ms ease;
}

body.fx-rail-open .fx-open { opacity: 0; pointer-events: none; }
.fx-open:hover { border-color: var(--fx-accent); color: var(--fx-accent); }

/* ------------------------------------------------------------------- brand */

.fx-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 14px;
    border-bottom: 1px solid var(--fx-line);
}

.fx-brand__logo {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 8px;
}

.fx-brand__txt { min-width: 0; flex: 1 1 auto; display: grid; gap: 2px; line-height: 1.1; }
.fx-brand__txt b { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.fx-brand__txt small { color: var(--fx-dim-2); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; }

.fx-x {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--fx-dim);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

.fx-x:hover { background: var(--fx-s3); color: var(--fx-tx); }

/* ------------------------------------------------------------------ search */

.fx-search { position: relative; padding: 12px 14px 10px; }

.fx-search input {
    width: 100%;
    height: 38px;
    padding: 0 32px 0 12px;
    border: 1px solid var(--fx-line-2);
    border-radius: var(--fx-r);
    background: var(--fx-bg);
    color: var(--fx-tx);
    font: 500 13px var(--fx-font);
}

.fx-search input::placeholder { color: var(--fx-dim-2); }
.fx-search input:focus { border-color: var(--fx-accent); outline: none; }
.fx-search input::-webkit-search-cancel-button { display: none; }
.fx-search .fx-x { position: absolute; top: 18px; right: 18px; }

/* -------------------------------------------------------------------- tabs */

.fx-tabs {
    display: flex;
    gap: 2px;
    margin: 0 14px;
    padding: 3px;
    border-radius: var(--fx-r);
    background: var(--fx-bg);
}

.fx-tab {
    flex: 1 1 0;
    min-width: 0;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--fx-dim);
    font: 600 11px var(--fx-font);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

.fx-tab b { color: var(--fx-dim-2); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fx-tab:hover { color: var(--fx-tx); }
.fx-tab.is-on { background: var(--fx-s3); color: var(--fx-tx); }
.fx-tab.is-on b { color: var(--fx-accent); }

/* ------------------------------------------------------------------- tools */

.fx-tools { display: grid; gap: 5px; padding: 10px 14px 4px; }
.fx-tools[hidden] { display: none; }
.fx-pills { display: flex; flex-wrap: wrap; gap: 4px; }

.fx-pill {
    height: 24px;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--fx-s2);
    color: var(--fx-dim);
    font: 600 10px var(--fx-font);
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.fx-pill:hover { color: var(--fx-tx); }
.fx-pill.is-on { border-color: rgba(255, 122, 47, 0.4); background: var(--fx-accent-d); color: var(--fx-accent); }

.fx-backbtn {
    margin: 10px 14px 0;
    height: 30px;
    border: 1px solid var(--fx-line);
    border-radius: 8px;
    background: transparent;
    color: var(--fx-dim);
    font: 600 11px var(--fx-font);
    cursor: pointer;
}

.fx-backbtn:hover { border-color: var(--fx-accent); color: var(--fx-accent); }
.fx-backbtn[hidden] { display: none; }

/* -------------------------------------------------------------------- body */

.fx-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 10px 14px 14px;
}

.fx-body::-webkit-scrollbar { width: 8px; }
.fx-body::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--fx-s3); }
.fx-body::-webkit-scrollbar-thumb:hover { background: #2c3238; }

.fx-list { display: grid; gap: 2px; }

.fx-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 9px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--fx-tx);
    text-align: left;
    cursor: pointer;
    transition: background 120ms ease;
}

.fx-row:hover, .fx-row:focus-visible { background: var(--fx-s2); outline: none; }

.fx-row__n {
    flex: 0 0 16px;
    color: var(--fx-dim-2);
    font: 600 10px var(--fx-font);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.fx-sw { width: 3px; height: 24px; flex: 0 0 3px; border-radius: 2px; }

.fx-head {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 6px;
    background: var(--fx-s3);
    color: var(--fx-dim);
    font: 700 11px var(--fx-font);
}

.fx-head.is-lg { width: 32px; height: 32px; flex-basis: 32px; border-radius: 8px; font-size: 14px; }

.fx-row__main { min-width: 0; flex: 1 1 auto; display: grid; gap: 1px; }

.fx-row__title {
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fx-row__sub {
    overflow: hidden;
    color: var(--fx-dim-2);
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fx-row__val {
    flex: 0 0 auto;
    color: var(--fx-dim);
    font: 600 11px var(--fx-font);
    font-variant-numeric: tabular-nums;
}

.fx-row__val.fx-online { color: var(--fx-green); font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; }

.fx-row__kind {
    flex: 0 0 auto;
    color: var(--fx-dim-2);
    font: 600 9px var(--fx-font);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.fx-war {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 5px;
    border-radius: 999px;
    background: var(--fx-red);
    vertical-align: middle;
}

.fx-empty {
    margin: 18px 4px;
    color: var(--fx-dim-2);
    font-size: 11.5px;
    line-height: 1.6;
    text-align: center;
}

.fx-empty.is-error { color: var(--fx-red); }

/* ------------------------------------------------------------------ detail */

.fx-detail { display: block; }

.fx-detail__top { display: flex; align-items: center; gap: 9px; padding: 2px 0 12px; }
.fx-detail__top h2 { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; text-overflow: ellipsis; }
.fx-detail__top .fx-sw { height: 28px; width: 4px; flex-basis: 4px; }

.fx-kind { flex: 0 0 auto; color: var(--fx-dim-2); font: 600 9px var(--fx-font); letter-spacing: 0.09em; text-transform: uppercase; }

.fx-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }

.fx-chip {
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--fx-s2);
    color: var(--fx-dim);
    font: 600 10px var(--fx-font);
}

.fx-chip.is-red { background: rgba(248, 113, 113, 0.13); color: var(--fx-red); }
.fx-chip.is-green { background: rgba(74, 222, 128, 0.12); color: var(--fx-green); }
.fx-chip.is-warn { background: rgba(251, 191, 36, 0.13); color: var(--fx-warn); }

.fx-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 5px; margin-bottom: 12px; }

.fx-metric {
    display: grid;
    gap: 3px;
    padding: 9px 10px;
    border-radius: 9px;
    background: var(--fx-s2);
}

.fx-metric span { color: var(--fx-dim-2); font-size: 9px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.fx-metric strong { overflow: hidden; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }

.fx-facts { display: grid; gap: 6px; margin: 0 0 12px; }
.fx-facts > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.fx-facts dt { color: var(--fx-dim-2); font-size: 10px; font-weight: 600; }
.fx-facts dd { margin: 0; font-size: 12px; font-weight: 500; }

.fx-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--fx-accent);
    font: 600 12px var(--fx-font);
    text-align: left;
    cursor: pointer;
}

.fx-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.fx-dim { color: var(--fx-dim-2); }

.fx-board {
    margin: 0 0 12px;
    padding: 9px 11px;
    border-left: 2px solid var(--fx-s3);
    border-radius: 0 8px 8px 0;
    background: var(--fx-s2);
    color: var(--fx-dim);
    font-size: 11px;
    font-style: italic;
    line-height: 1.55;
}

.fx-sub {
    margin: 14px 0 6px;
    color: var(--fx-dim-2);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.fx-acts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }

.fx-btn {
    flex: 1 1 auto;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid var(--fx-line-2);
    border-radius: 8px;
    background: var(--fx-s2);
    color: var(--fx-tx);
    font: 600 11px var(--fx-font);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.fx-btn:hover, .fx-btn:focus-visible { border-color: var(--fx-accent); color: var(--fx-accent); outline: none; }

.fx-btn.is-accent {
    border-color: transparent;
    background: var(--fx-accent);
    color: #17110b;
}

.fx-btn.is-accent:hover { background: #ff8f4f; color: #17110b; }
.fx-btn.is-on { border-color: rgba(255, 122, 47, 0.4); background: var(--fx-accent-d); color: var(--fx-accent); }

/* ------------------------------------------------------------------ footer */

.fx-foot { border-top: 1px solid var(--fx-line); padding: 10px 14px 12px; background: var(--fx-s1); }

.fx-live { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--fx-dim); }
.fx-live b { color: var(--fx-tx); font-weight: 700; font-variant-numeric: tabular-nums; }
.fx-live__sep { flex: 1 1 auto; }

.fx-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 999px; background: var(--fx-dim-2); }
.fx-dot.is-on { background: var(--fx-green); box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.14); }
.fx-dot.is-busy { background: var(--fx-warn); box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.14); }
.fx-dot.is-off { background: var(--fx-red); box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.13); }

.fx-more { margin-top: 9px; }

.fx-more summary {
    color: var(--fx-dim-2);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
}

.fx-more summary::-webkit-details-marker { display: none; }
.fx-more summary::before { content: "+ "; color: var(--fx-accent); }
.fx-more[open] summary::before { content: "\2212 "; }

.fx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 9px 0; }
.fx-grid > div { display: grid; gap: 2px; padding: 7px 8px; border-radius: 7px; background: var(--fx-s2); }
.fx-grid span { color: var(--fx-dim-2); font-size: 8.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.fx-grid b { overflow: hidden; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }

.fx-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; color: var(--fx-dim); font-size: 10px; }
.fx-bar b { color: var(--fx-accent); font-variant-numeric: tabular-nums; }
.fx-track { height: 4px; margin: 4px 0 3px; overflow: hidden; border-radius: 999px; background: var(--fx-bg); }
.fx-track i { display: block; width: 0; height: 100%; background: var(--fx-accent); transition: width 500ms ease; }
.fx-foot small { display: block; color: var(--fx-dim-2); font-size: 9px; font-variant-numeric: tabular-nums; }

.fx-worlds { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 10px; }
.fx-worlds .fx-btn { min-height: 28px; font-size: 10px; }

.fx-foot__acts { display: flex; gap: 5px; margin-top: 10px; }

.fx-foot__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 9px;
    color: var(--fx-dim-2);
    font-size: 9px;
    font-variant-numeric: tabular-nums;
}

.fx-foot__meta b { color: var(--fx-dim); font-weight: 700; }

/* ------------------------------------------------------------------- toast */

.fx-toast {
    position: absolute;
    left: 50%;
    bottom: 22px;
    max-width: calc(100vw - 32px);
    padding: 9px 14px;
    border: 1px solid var(--fx-line-2);
    border-radius: 9px;
    background: var(--fx-s3);
    color: var(--fx-tx);
    font: 600 11px var(--fx-font);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity 160ms ease, visibility 160ms ease, transform 160ms ease;
}

.fx-toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* -------------------------------------------------------------------- boot */

.fx-boot {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: grid;
    place-items: center;
    background: var(--fx-bg);
    transition: opacity 380ms ease, visibility 380ms ease;
}

.fx-boot.is-off { opacity: 0; visibility: hidden; pointer-events: none; }
.fx-boot__in { display: grid; justify-items: center; gap: 12px; }
.fx-boot__in img { width: 44px; height: 44px; border-radius: 11px; }
.fx-boot__in span { color: var(--fx-dim); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.fx-boot__in i { display: block; width: 88px; height: 2px; overflow: hidden; border-radius: 999px; background: var(--fx-s3); }

.fx-boot__in i::after {
    content: "";
    display: block;
    width: 42%;
    height: 100%;
    background: var(--fx-accent);
    animation: fx-load 1.05s ease-in-out infinite;
}

@keyframes fx-load {
    from { transform: translateX(-110%); }
    to { transform: translateX(250%); }
}

/* ------------------------------------------- native squaremap / Leaflet chrome */

.leaflet-control-container .leaflet-top { top: 10px; }
body:not(.fx-rail-open) .leaflet-control-container .leaflet-top.leaflet-left { top: 62px; }

.leaflet-bar,
.leaflet-control-layers,
.leaflet-control-attribution,
.leaflet-control-scale-line {
    border: 1px solid var(--fx-line-2) !important;
    border-radius: 9px !important;
    background-color: var(--fx-s2) !important;
    color: var(--fx-tx) !important;
    box-shadow: none !important;
}

.leaflet-bar a,
.leaflet-bar a:hover,
.leaflet-bar a:focus {
    border-color: var(--fx-line) !important;
    background: var(--fx-s2) !important;
    color: var(--fx-tx) !important;
}

.leaflet-bar a:hover { color: var(--fx-accent) !important; }

.leaflet-control-layers-expanded,
.leaflet-control-layers-expanded label,
.leaflet-control-attribution a { color: var(--fx-tx) !important; }

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    border: 1px solid var(--fx-line-2);
    border-radius: 9px !important;
    background: var(--fx-s2) !important;
    color: var(--fx-tx) !important;
}

.leaflet-container a.leaflet-popup-close-button { color: var(--fx-dim) !important; }

/* squaremap's own sidebar duplicates what the rail already shows - world list
   and player list - so it is retired rather than left to fight with it. */
#sidebar, #pin { display: none !important; }

#coordinates {
    border: 1px solid var(--fx-line) !important;
    border-radius: 8px !important;
    background: var(--fx-s2) !important;
    color: var(--fx-dim) !important;
    font: 600 10px var(--fx-font) !important;
}

/* ------------------------------------------------------------- breakpoints */

@media (max-width: 900px) {
    /* The rail becomes an overlay drawer: on a phone the map needs the whole
       screen, and a 328 px rail would leave almost nothing beside it. */
    body.fx-rail-open #map { left: 0 !important; }

    .fx-rail {
        width: min(360px, calc(100vw - 40px));
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.55);
    }

    body.fx-rail-open .fx-open { opacity: 0; }
}

@media (max-width: 420px) {
    .fx-rail { width: 100vw; border-right: 0; }
    .fx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fx-facts > div { grid-template-columns: 1fr; gap: 1px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}