html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    font-family: system-ui, "Hiragino Sans", "Yu Gothic UI", sans-serif;
}

#app {
    display: flex;
    height: 100%;
    width: 100%;
}

#mapWrap {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 100%;
}

#map {
    width: 100%;
    height: 100%;
    background: #0b2740;
}


/*  Zoom Controls  */

.ol-zoom {
    top: auto !important;
    /* bottom: 3.8em !important; */
    bottom: 0.5em !important;
    left: 0.5em !important;
    z-index: 10 !important;
}


/*  Download Buttons  */

#btnDownloadData,
#btnDownloadVoxy {
    position: absolute;
    left: 0.5em;
    z-index: 20;
    background: rgba(20, 24, 30, 0.92);
    color: #9fb6d4;
    border: 1px solid #444;
    border-radius: 4px;
    height: 26px;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    display: none;
}

#btnDownloadData {
    bottom: 3em;
}

#btnDownloadVoxy {
    bottom: 0.5em;
}

#btnDownloadData:hover,
#btnDownloadVoxy:hover {
    background: #2e3646;
    color: #eee;
}


/*  Top-Left Info Panel  */

#panel {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    background: rgba(20, 24, 30, 0.92);
    color: #eee;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    width: 194px;
}

#panel label {
    display: block;
    margin: 4px 0;
    cursor: pointer;
}

#panel .row {
    margin-top: 6px;
    display: flex;
    gap: 5px;
}

#panel button {
    flex: 1;
    cursor: pointer;
    font-size: 12px;
    padding: 4px;
    background: #2a313d;
    color: #eee;
    border: 1px solid #444;
    border-radius: 4px;
}

#panel button:hover {
    background: #3d4a5c;
}

#panel select {
    flex: 1;
    background: #2a313d;
    color: #eee;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 3px;
    font-size: 12px;
}

#btnDiscord {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    background: #5865F2;
    color: #fff;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
    cursor: pointer;
}

#btnDiscord:hover {
    background: #4752c4;
}

#btnDiscord svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

#panelCredit {
    margin-top: 6px;
    color: #556;
    font-size: 10px;
    line-height: 1.5;
}

#serverVersion {
    position: absolute;
    margin-top: 6px;
    color: #666688;
    font-size: 12px;
    line-height: 1.5;
    top: 72px;
    left: 264px;
}


/*  Online Players Panel  */

#playersPanel {
    position: absolute;
    top: calc(10px + var(--panel-h, 300px) + 2.6px);
    left: 10px;
    z-index: 10;
    background: rgba(20, 24, 30, 0.92);
    color: #eee;
    border-radius: 8px;
    font-size: 13px;
    width: 194px;
    overflow: hidden;
}

#playersPanelToggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    color: #eee;
    font-size: 12px;
    cursor: pointer;
    padding: 8px 12px;
    text-align: left;
}

#playersPanelToggle:hover {
    background: rgba(255, 255, 255, 0.05);
}

#playersPanelTitle {
    font-weight: 600;
    color: #9fb6d4;
}

#playersPanelChevron {
    font-size: 10px;
    color: #556;
    transition: transform 0.2s;
}

#playersPanelChevron.open {
    transform: rotate(90deg);
}

#playersPanelBody {
    padding: 4px 8px 8px;
    max-height: 220px;
    overflow-y: auto;
}

#playersLoading {
    font-size: 11px;
    color: #556;
    padding: 4px 0;
    display: block;
}

.player-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 2px;
    border-bottom: 1px solid #1e2530;
}

.player-row:last-child {
    border-bottom: none;
}

.player-name {
    font-size: 12px;
    color: #eee;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.players-empty {
    font-size: 11px;
    color: #556;
    padding: 4px 2px;
}


/*  Coordinate Input Bar  */

#coordBar {
    position: absolute;
    top: 10px;
    left: 230px;
    z-index: 10;
    background: rgba(20, 24, 30, 0.92);
    color: #eee;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 200px;
}

#coordBar input {
    background: #2a313d;
    color: #eee;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 12px;
    width: 100%;
    box-sizing: border-box;
}

#coordBar input::placeholder {
    color: #668;
}


/*  Top Center Buttons  */

#topBtns {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 22;
    display: flex;
    gap: 6px;
}

#topBtns button {
    background: rgba(20, 24, 30, 0.92);
    color: #eee;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

#topBtns button:hover {
    background: #2e3646;
}

#topBtns button.active {
    background: #2e3646;
    border-color: #9fb6d4;
    color: #fff;
}


/*  Warps Toggle Button  */

#btnSidePanel {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 22;
    background: rgba(20, 24, 30, 0.92);
    color: #eee;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.22s ease;
}

#sidePanel.open ~ #btnSidePanel,
#btnSidePanel.open {
    transform: translateX(-280px);
}

#btnSidePanel:hover {
    background: #2e3646;
}


/*  Side Panel  */

#sidePanel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 280px;
    z-index: 17;
    background: rgba(20, 24, 30, 0.97);
    color: #eee;
    display: flex;
    flex-direction: column;
    font-size: 13px;
    transform: translateX(100%);
    transition: transform 0.22s ease;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.4);
}

#sidePanel.open {
    transform: translateX(0);
}

#spHeader {
    display: flex;
    align-items: center;
    background: #12151b;
    padding: 0;
    flex-wrap: nowrap;
}

#spHeader button {
    flex: 1;
    padding: 10px 2px;
    background: none;
    border: 0;
    color: #9fb6d4;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    min-width: 0;
}

#spHeader button.active {
    background: #2e3646;
    color: #fff;
}

#spClose {
    flex: none !important;
    padding: 10px 10px !important;
    font-size: 15px !important;
    color: #9fb6d4 !important;
    background: none !important;
    flex: 0 0 auto !important;
}

#spClose:hover {
    color: #fff !important;
}

#spSearch {
    margin: 7px 8px;
    padding: 5px 8px;
    background: #2a313d;
    border: 1px solid #444;
    color: #eee;
    border-radius: 4px;
    width: calc(100% - 30px);
}

#spList {
    overflow-y: auto;
    flex: 1;
    padding: 0 4px 8px;
}

.sp-item {
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sp-item:hover {
    background: #2e3646;
}

.dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
    border: 1px solid rgba(0, 0, 0, 0.4);
}

.nm {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.cp {
    flex: none;
    opacity: 0.55;
    cursor: pointer;
    font-size: 14px;
}

.cp:hover {
    opacity: 1;
}

.sp-back {
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #9fb6d4;
    font-size: 12px;
    margin-bottom: 2px;
}

.sp-back:hover {
    background: #2e3646;
}

.sp-player {
    padding: 7px 8px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sp-player:hover {
    background: #2e3646;
}

.sp-player-name {
    font-weight: 600;
    color: #b388ff;
}

.sp-player-count {
    font-size: 11px;
    color: #9fb6d4;
}

.sp-warp-closest {
    font-size: 10px;
    color: #556;
    margin-left: auto;
    padding-right: 2px;
    white-space: nowrap;
}
.sp-warp-closest-link {
    cursor: pointer;
    color: #7a9cbf;
    text-decoration: underline;
}
.sp-warp-closest-link:hover {
    color: #9fb6d4;
}


/*  Context Menu  */

#ctx {
    position: absolute;
    display: none;
    z-index: 25;
    background: #1d222b;
    color: #eee;
    border: 1px solid #444;
    border-radius: 6px;
    overflow: hidden;
    font-size: 13px;
    min-width: 220px;
}

#ctx .hdr {
    padding: 6px 10px;
    background: #12151b;
    color: #9fb6d4;
    font-size: 11px;
    line-height: 1.5;
}

#ctx button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    background: none;
    border: 0;
    color: #eee;
    cursor: pointer;
}

#ctx button:hover {
    background: #2e3646;
}

.sep {
    border-top: 1px solid #333;
}


/*  Compass Directions  */

.nesw {
    position: absolute;
    z-index: 11;
    pointer-events: none;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-shadow: 0 0 4px #000, 0 0 8px #000;
    font-family: monospace;
}

#dir-n {
    top: 38px;
    left: 50%;
    transform: translateX(-50%);
}

#dir-s {
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
}

#dir-e {
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
}

#dir-w {
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
}

.edge-dot {
    position: absolute;
    z-index: 12;
    pointer-events: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.5);
}


/*  Hover Tooltip  */

#hover {
    position: absolute;
    display: none;
    z-index: 15;
    pointer-events: none;
    background: rgba(15, 18, 24, 0.95);
    color: #fff;
    padding: 4px 9px;
    border-radius: 5px;
    font-size: 12px;
    border: 1px solid #555;
}


/*  Toast Notification  */

#toast {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: #2e7d32;
    color: #fff;
    padding: 6px 14px;
    border-radius: 6px;
    display: none;
    z-index: 30;
    font-size: 13px;
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/*  Language Selection Modal  */

#langModal {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
}

#langModal .box {
    background: #1d222b;
    color: #eee;
    padding: 26px 32px;
    border-radius: 10px;
    text-align: center;
}

#langModal button {
    margin: 12px 8px 0;
    padding: 10px 26px;
    font-size: 15px;
    border-radius: 6px;
    border: 1px solid #555;
    background: #2e3646;
    color: #fff;
    cursor: pointer;
}

#langModal button:hover {
    background: #3d4a5c;
}


/*  Welcome Modal  */

#welcomeModal {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(0, 0, 0, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
}

#welcomeModal .wbox {
    background: #1d222b;
    color: #eee;
    padding: 32px 38px;
    border-radius: 10px;
    text-align: center;
    max-width: 400px;
    line-height: 1.75;
}

#welcomeModal h2 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #fff;
}

#welcomeModal p {
    font-size: 13px;
    color: #b0bec5;
    margin: 0 0 6px;
}

#welcomeModal .wok {
    margin-top: 18px;
    padding: 9px 34px;
    font-size: 14px;
    background: #5865F2;
    border: none;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

#welcomeModal .wok:hover {
    background: #4752c4;
}


/*  Image Panel  */

#imagePanel {
    width: 0;
    overflow: hidden;
    height: 100%;
    background: #0d1117;
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease;
    border-left: 1px solid #222;
    flex-shrink: 0;
    position: relative;
    z-index: 18;
}

#imagePanel.open {
    width: 50%;
}

#imgHeader {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    background: #12151b;
    border-bottom: 1px solid #222;
    min-height: 38px;
    flex-shrink: 0;
}

#imgHeader span {
    font-size: 11px;
    color: #9fb6d4;
    white-space: nowrap;
    flex: none;
}

#imgAuthorSel {
    flex: 1;
    background: #2a313d;
    color: #eee;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 12px;
    min-width: 0;
}

#imgSortBtn {
    flex: none;
    background: #2a313d;
    border: 1px solid #444;
    color: #9fb6d4;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    padding: 3px 7px;
    white-space: nowrap;
}

#imgSortBtn:hover {
    background: #3a4350;
    color: #fff;
}

#imgClose {
    flex: none;
    background: none;
    border: none;
    color: #9fb6d4;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
}

#imgClose:hover {
    color: #fff;
}

#imgView {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #08090d;
    min-height: 0;
}

#imgBig {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: pointer;
    border: none;
    display: none;
}

#imgGeoTag {
    position: absolute;
    top: 8px;
    left: 10px;
    z-index: 4;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.6);
    color: #9fb6d4;
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 10px;
    display: none;
}

#imgMeta {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    padding: 22px 14px 10px;
    color: #eee;
    font-size: 12px;
    pointer-events: none;
    display: none;
}

#imgMeta .img-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}

#imgMeta .img-sub {
    color: #9fb6d4;
    font-size: 11px;
}

#imgDownload {
    position: absolute;
    bottom: 10px;
    right: 12px;
    z-index: 5;
    background: rgba(20, 24, 30, 0.88);
    color: #eee;
    border: 1px solid #555;
    border-radius: 5px;
    padding: 5px 11px;
    font-size: 12px;
    cursor: pointer;
    display: none;
}

#imgDownload:hover {
    background: #2e3646;
}

#imgEmpty {
    color: #555;
    font-size: 14px;
    text-align: center;
}

#imgCarousel {
    height: 20%;
    min-height: 90px;
    max-height: 170px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding: 6px 10px;
    background: #0d1117;
    border-top: 1px solid #1e2530;
    scroll-behavior: smooth;
}

#imgCarousel::-webkit-scrollbar {
    height: 4px;
}

#imgCarousel::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 2px;
}

.car-thumb {
    flex: none;
    height: calc(100% - 8px);
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s, opacity 0.15s;
    opacity: 0.55;
}

.car-thumb:hover {
    opacity: 0.85;
}

.car-thumb.active {
    border-color: #b388ff;
    opacity: 1;
}

.car-empty {
    color: #444;
    font-size: 12px;
    margin: auto;
}


/*  Screenshot Tool Button  */

#ssBtn {
    position: absolute;
    z-index: 10;
    left: 230px;
    top: 79px;
}

#btnScreenshot {
    background: rgba(20, 24, 30, 0.92);
    border: 1px solid #2a313d;
    color: #9fb6d4;
    border-radius: 8px;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
}

#btnScreenshot:hover {
    background: rgba(30, 37, 48, 0.98);
}

#btnScreenshot.active {
    background: #1a2d1a;
    border-color: #3a6a3a;
    color: #6fcf6f;
}


/*  Screenshot Drag Selection  */

#ssDragOverlay {
    position: absolute;
    inset: 0;
    z-index: 9;
    cursor: crosshair;
    display: none;
}

#ssDragBox {
    position: absolute;
    border: 2px solid #6fcf6f;
    background: rgba(111, 207, 111, 0.12);
    pointer-events: none;
    z-index: 9;
    display: none;
}


/*  Screenshot Modal  */

#ssModal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    z-index: 50;
    display: none;
    flex-direction: column;
    pointer-events: none;
}

#ssModalInner {
    background: rgba(20, 24, 30, 0.97);
    border-left: 1px solid #2a313d;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: all;
    overflow: hidden;
    flex: 1;
}

#ssModalHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #2a313d;
    font-size: 13px;
    font-weight: 700;
    color: #9fb6d4;
    flex-shrink: 0;
}

#ssClose {
    background: none;
    border: none;
    color: #778;
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
}

#ssModalBody {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ss-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    gap: 8px;
}

.ss-row label {
    color: #9fb6d4;
    flex-shrink: 0;
}

.ss-row span {
    color: #eee;
    font-size: 11px;
    text-align: right;
}

.ss-row select {
    background: #2a313d;
    border: 1px solid #444;
    color: #eee;
    border-radius: 4px;
    padding: 3px 0px;
    font-size: 12px;
}

.ss-row input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: #6fcf6f;
    cursor: pointer;
}

.ss-sep {
    height: 1px;
    background: #2a313d;
    margin: 3px 0;
}

#ssDl {
    background: #2d4a2d;
    border: 1px solid #3a6a3a;
    color: #6fcf6f;
    border-radius: 5px;
    padding: 8px;
    font-size: 13px;
    cursor: pointer;
    margin-top: 4px;
}

#ssDl:disabled {
    background: #1a2020;
    border-color: #2a313d;
    color: #445;
    cursor: not-allowed;
}

#ssDl:not(:disabled):hover {
    background: #3a6a3a;
}

/* Category groups in warp/waypoint sidebar */
.sp-cat-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #9fb6d4;
    padding: 5px 8px;
    cursor: pointer;
    user-select: none;
    border-top: 1px solid #1e2530;
    margin-top: 2px;
}
.sp-cat-header:hover { background: rgba(255,255,255,.04); }
.sp-cat-arrow { font-size: 9px; color: #556; flex-shrink: 0; }
.sp-cat-label { flex: 1; }
.sp-cat-count { font-size: 10px; color: #556; }
.sp-cat-group { padding-left: 8px; border-left: 2px solid #1e2530; margin-left: 10px; }

/* Linked image highlight in carousel */
.car-thumb-linked {
    outline: 2px solid #9fb6d4;
    outline-offset: 1px;
}
.car-linked-badge {
    position: absolute;
    top: 4px;
    right: 2px;
    font-size: 16px;
    background: rgba(20,24,30,.85);
    border-radius: 3px;
    padding: 2px;
    pointer-events: none;
    z-index: 2;
    line-height: 1;
    width: 16px;
    height: 16px;
    text-align: center;
}