/* World map page. Tiles come from the R2 bucket at map.antiquusmundus.net.
   The map fills everything below the nav (the page has no footer); its controls sit in a side panel. */

.map-page {
    --map-void: #0e0d0d;
    --map-panel-w: 300px;
    --map-border: #ff4d3d;
    --map-mark: #ffd24a;
}

.map-main {
    position: relative;
    display: flex;
    width: 100%;
    height: calc(100vh - var(--map-nav-h, 64px));
    height: calc(100svh - var(--map-nav-h, 64px));
    min-height: 420px;
    box-sizing: border-box;
    overflow: hidden;
}

/* --- side panel ------------------------------------------------------------ */

.map-panel {
    position: relative;
    z-index: 1001;
    flex: 0 0 var(--map-panel-w);
    width: var(--map-panel-w);
    display: flex;
    flex-direction: column;
    background: var(--mc-surface);
    border-right: 2px solid var(--mc-black);
    box-shadow: var(--bevel-panel), 4px 0 0 rgba(0, 0, 0, 0.3);
    transition: margin-left 0.2s ease;
}

.map-main.panel-closed .map-panel {
    margin-left: calc(-1 * var(--map-panel-w) - 6px);
}

.map-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 14px;
    background: var(--mc-card);
    border-bottom: 2px solid var(--mc-black);
}

.map-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.map-title h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--mc-heading);
    line-height: 1.1;
}

.map-updated {
    font-size: 0.8rem;
    color: var(--mc-faint);
    min-height: 1em;
}

.map-panel-close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--mc-well);
    border: 2px solid var(--mc-black);
    box-shadow: var(--bevel-well);
    color: var(--mc-muted);
    font-family: var(--font-display);
    font-size: 0.9rem;
    cursor: pointer;
}

.map-panel-close:hover {
    background: var(--mc-raised);
    color: var(--mc-text);
}

.map-panel-close:focus-visible,
.map-panel-open:focus-visible,
.map-layer:focus-visible {
    outline: 2px solid var(--am-gold-light);
    outline-offset: 2px;
}

.map-panel-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 4px 16px 16px;
}

.map-section {
    padding: 14px 0;
    border-bottom: 2px solid rgba(0, 0, 0, 0.3);
}

.map-section:last-child {
    border-bottom: 0;
}

.map-section-title {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--am-gold-light);
}

/* --- world picker: a chip like the issues page's user bar, opening a panel like its notifications --- */

.map-world-picker {
    position: relative;
}

.map-world-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 12px 6px 6px;
    background: var(--mc-well);
    border: 2px solid var(--mc-black);
    box-shadow: var(--bevel-well);
    color: var(--mc-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.map-world-toggle:hover:not(:disabled),
.map-world-toggle[aria-expanded="true"] {
    background: var(--mc-raised);
    box-shadow: var(--bevel-panel);
}

.map-world-toggle:focus-visible {
    outline: 2px solid var(--am-gold-light);
    outline-offset: 2px;
}

.map-world-toggle:disabled {
    cursor: default;
}

.map-world-toggle:disabled .map-world-caret {
    visibility: hidden;
}

.map-world-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 auto;
    min-width: 0;
}

.map-world-name {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mc-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-world-dim {
    font-size: 0.75rem;
    color: var(--am-gold-light);
    min-height: 1em;
}

/* The world's season, from MundusWorld */
.map-season {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 6px 10px;
    background: var(--mc-well);
    border: 2px solid var(--mc-black);
    border-left: 3px solid var(--season, var(--am-gold-light));
    box-shadow: var(--bevel-well);
}

.map-season[hidden] {
    display: none;
}

.map-season-glyph {
    flex: 0 0 auto;
    width: 20px;
    text-align: center;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--season, var(--am-gold-light));
}

.map-season-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.map-season-name {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--mc-heading);
}

.map-season-line {
    font-size: 0.75rem;
    color: var(--mc-muted);
}

.map-world-caret {
    font-size: 0.75rem;
    color: var(--mc-muted);
    transition: transform 0.15s ease;
}

.map-world-toggle[aria-expanded="true"] .map-world-caret {
    transform: rotate(180deg);
}

/* A tiny block for each dimension: grass, netherrack, end stone */
.map-world-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    box-sizing: border-box;
    border: 2px solid var(--mc-black);
    background:
        linear-gradient(to bottom, #6aa84f 0 32%, #4f8a35 32% 40%, transparent 40%),
        repeating-linear-gradient(90deg, #866043 0 6px, #79553a 6px 12px);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
    image-rendering: pixelated;
}

.map-world-icon[data-dimension="nether"] {
    background:
        repeating-linear-gradient(45deg, #7a2a2a 0 5px, #6a2222 5px 10px),
        #6f2525;
}

.map-world-icon[data-dimension="the_end"] {
    background:
        repeating-linear-gradient(135deg, #e6e3a6 0 5px, #d9d48f 5px 10px),
        #dedb9c;
}

.map-world-icon.is-loading {
    background: var(--mc-line);
}

.map-world-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--ore-card-bg);
    border: 2px solid var(--ore-card-border);
    box-shadow: var(--drop);
    z-index: 1100;
    animation: oreFadeIn 0.15s ease-in-out;
}

.map-world-menu[hidden] {
    display: none;
}

.map-world-menu-header {
    padding: 10px 14px;
    border-bottom: 2px solid var(--ore-card-border);
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--mc-text);
}

.map-world-list {
    display: flex;
    flex-direction: column;
    max-height: 320px;
    overflow-y: auto;
}

.map-world-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 14px 8px 11px;
    background: none;
    border: 0;
    border-left: 3px solid transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    color: var(--mc-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.map-world-option:last-child {
    border-bottom: 0;
}

.map-world-option:hover,
.map-world-option:focus-visible {
    background: var(--mc-raised);
    outline: none;
}

.map-world-option[aria-selected="true"] {
    background: rgba(74, 173, 47, 0.1);
    border-left-color: var(--ore-green);
}

.map-world-option .map-world-icon {
    width: 28px;
    height: 28px;
}

.map-world-option-check {
    margin-left: auto;
    color: var(--ore-green);
    font-family: var(--font-display);
    visibility: hidden;
}

.map-world-option[aria-selected="true"] .map-world-option-check {
    visibility: visible;
}

/* --- marker toggles: a row each, with a little switch ------------------------ */

.map-layers {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.map-layer {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: var(--mc-well);
    border: 2px solid var(--mc-black);
    box-shadow: var(--bevel-well);
    color: var(--mc-muted);
    font: inherit;
    font-size: 0.92rem;
    text-align: left;
    cursor: pointer;
}

.map-layer[hidden] {
    display: none;
}

.map-layer:hover {
    background: var(--mc-raised);
}

.map-layer[aria-pressed="true"] {
    color: var(--mc-text);
}

.map-layer-name {
    flex: 1 1 auto;
    font-weight: 600;
}

.map-layer-swatch {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--mc-black);
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    color: var(--mc-black);
}

.map-layer-swatch-player {
    border-radius: 50%;
    background: #fff;
}

.map-layer-swatch-place {
    background: #ffb347;
}

.map-layer-swatch-waystone {
    background: #b48cff;
}

.map-layer-swatch-village {
    background: #7ed957;
}

.map-layer-swatch-event {
    background: #e05cff;
}

.map-layer-swatch-biome-borders {
    background:
        linear-gradient(135deg, transparent 45%, #fff 45%, #fff 58%, transparent 58%),
        linear-gradient(135deg, #6aa84f 50%, #e8c46a 50%);
}

.map-layer-swatch-biome-colours {
    background: linear-gradient(90deg, #2f7d32 0 33%, #e8c46a 33% 66%, #3f76e4 66%);
}

.map-layer-swatch-claim {
    border: 2px solid #e6b450;
    background: rgba(230, 180, 80, 0.3);
    outline: 1px solid var(--mc-black);
}

.map-layer-swatch-border {
    border: 2px solid var(--map-border);
    background: rgba(255, 77, 61, 0.18);
    outline: 1px solid var(--mc-black);
}

.map-layer[aria-pressed="false"] .map-layer-swatch {
    opacity: 0.4;
}

.map-layer-count {
    font-size: 0.8rem;
    color: var(--mc-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.map-layer-count:empty {
    display: none;
}

.map-layer-switch {
    flex: 0 0 auto;
    position: relative;
    width: 30px;
    height: 16px;
    box-sizing: border-box;
    background: var(--btn-stone-lo);
    border: 2px solid var(--mc-black);
}

.map-layer-switch::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    background: var(--btn-stone-hi);
    transition: left 0.12s ease;
}

.map-layer[aria-pressed="true"] .map-layer-switch {
    background: var(--btn-green);
}

.map-layer[aria-pressed="true"] .map-layer-switch::after {
    left: 14px;
    background: #fff;
}

/* --- online players ------------------------------------------------------------ */

.map-section-count {
    color: var(--mc-faint);
    letter-spacing: 0;
}

.map-section-count:empty {
    display: none;
}

.map-player-filter {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
    padding: 7px 10px;
    background: var(--mc-well);
    border: 2px solid var(--mc-black);
    box-shadow: var(--bevel-well);
    color: var(--mc-text);
    font: inherit;
    font-size: 0.9rem;
}

.map-player-filter:focus-visible {
    outline: 2px solid var(--am-gold-light);
    outline-offset: 2px;
}

.map-player-filter[hidden] {
    display: none;
}

.map-player-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 260px;
    overflow-y: auto;
}

.map-player-list:empty {
    display: none;
}

.map-player {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 10px;
    background: var(--mc-well);
    border: 2px solid var(--mc-black);
    box-shadow: var(--bevel-well);
    color: var(--mc-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.map-player:hover {
    background: var(--mc-raised);
}

.map-player:focus-visible {
    outline: 2px solid var(--am-gold-light);
    outline-offset: 2px;
}

.map-player.is-here {
    border-left: 3px solid var(--ore-green);
    padding-left: 8px;
}

/* Online but not on the map: nothing to click, so it reads as quieter than the players you can go to */
.map-player.is-hidden {
    cursor: default;
    opacity: 0.75;
}

.map-player.is-hidden:hover {
    background: var(--mc-well);
}

.map-player.is-hidden .map-player-dot {
    background: transparent;
    border-style: dashed;
    border-color: var(--mc-text);
}

.map-player.is-hidden .map-player-world {
    color: var(--mc-muted);
    font-style: italic;
}

.map-player-dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border: 2px solid var(--mc-black);
    border-radius: 50%;
    background: #fff;
}

.map-player-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.map-player-name {
    font-weight: 700;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.map-player-world {
    font-size: 0.75rem;
    color: var(--am-gold-light);
}

.map-player-go {
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-size: 0.8rem;
    color: var(--mc-faint);
}

.map-player:hover .map-player-go {
    color: var(--mc-text);
}

/* World events in the panel: a glyph in the event's colour and a ticking countdown */
.map-event-glyph {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 2px solid var(--mc-black);
    background: var(--pin);
    color: var(--mc-black);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.map-event-time {
    color: var(--mc-text);
    font-variant-numeric: tabular-nums;
}

/* The player you jumped to gets a pulsing ring for a moment */
.map-marker.is-found .map-pin-dot {
    animation: mapFound 0.8s ease-out 3;
}

@keyframes mapFound {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9); }
    100% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .map-marker.is-found .map-pin-dot {
        animation: none;
        outline: 3px solid var(--am-gold-light);
    }
}

/* --- cursor readout ---------------------------------------------------------- */

.map-readout {
    display: flex;
    gap: 8px;
}

.map-coords {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--mc-text);
    background: var(--mc-well);
    box-shadow: var(--bevel-well);
    border: 2px solid var(--mc-black);
    padding: 6px 8px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    font-variant-numeric: tabular-nums;
}

.map-copy {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
}

.map-section .map-coords {
    display: block;
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}

.map-biome {
    margin: -4px 0 8px;
    min-height: 1.1em;
    text-align: center;
    font-size: 0.82rem;
    color: var(--am-gold-light);
}

.map-biome:empty {
    display: none;
}

.map-mark-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 4px 4px 4px 8px;
    background: var(--mc-well);
    border: 2px solid var(--mc-black);
    border-left: 3px solid var(--map-mark);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.map-mark-row[hidden] {
    display: none;
}

.map-mark-icon {
    color: var(--map-mark);
}

.map-mark-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-mark-clear {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--mc-faint);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.map-mark-clear:hover {
    color: var(--mc-text);
}

.map-mark-clear:focus-visible,
.map-format-select:focus-visible,
.map-mark-go:focus-visible,
.map-mark-remove:focus-visible {
    outline: 2px solid var(--am-gold-light);
    outline-offset: 2px;
}

.map-format {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--mc-faint);
}

.map-format-label {
    flex: 0 0 auto;
}

.map-format-select {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 6px;
    font: inherit;
    font-size: 0.82rem;
    color: var(--mc-text);
    background: var(--mc-well);
    border: 2px solid var(--mc-black);
    box-shadow: var(--bevel-well);
    border-radius: 0;
}

.map-hint {
    margin: 8px 0 0;
    font-size: 0.78rem;
    color: var(--mc-faint);
}

/* --- the map ----------------------------------------------------------------- */

.map-frame {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.map-canvas {
    position: absolute;
    inset: 0;
    background: var(--map-void);
    font-family: var(--font-body);
}

.map-canvas[data-dimension="nether"] {
    --map-void: #1d0c0b;
    background: var(--map-void);
}

.map-canvas[data-dimension="the_end"] {
    --map-void: #120f17;
    background: var(--map-void);
}

/* Shown on the map when the panel is hidden */
.map-panel-open {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 900;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: var(--mc-card);
    border: 2px solid var(--mc-black);
    box-shadow: var(--bevel-panel), var(--drop);
    color: var(--mc-text);
    font-family: var(--font-display);
    font-size: 0.9rem;
    cursor: pointer;
}

.map-panel-open:hover {
    background: var(--mc-raised);
}

.map-main.panel-closed .map-panel-open {
    display: flex;
}

/* The open button takes the top left, so Leaflet's zoom buttons go top right */
.map-canvas .leaflet-top.leaflet-left {
    left: auto;
    right: 0;
}

.map-canvas .leaflet-top.leaflet-left .leaflet-control {
    margin-left: 0;
    margin-right: 12px;
    margin-top: 12px;
}

/* Keep the map's blocky look when zoomed past one block per pixel */
.map-canvas .leaflet-tile {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.map-canvas .leaflet-control-zoom a {
    background: var(--mc-card);
    color: var(--mc-text);
    border-color: var(--mc-black);
    font-family: var(--font-display);
}

.map-canvas .leaflet-control-zoom a:hover {
    background: var(--mc-raised);
}

/* Fully zoomed out (or in): the button that can't go further is greyed out */
.map-canvas .leaflet-control-zoom a.leaflet-disabled,
.map-canvas .leaflet-control-zoom a.leaflet-disabled:hover {
    background: var(--mc-well);
    color: var(--mc-faint);
    cursor: default;
    opacity: 0.6;
}

/* Which of the four zoom stops the view is on, between the + and - buttons */
.map-canvas .map-zoom-level {
    display: block;
    width: 30px;
    line-height: 22px;
    text-align: center;
    background: var(--mc-well);
    color: var(--am-gold-light);
    font-family: var(--font-display);
    font-size: 0.85rem;
    border-bottom: 1px solid var(--mc-black);
    user-select: none;
}

.map-canvas .leaflet-bar {
    border: 2px solid var(--mc-black);
    border-radius: 0;
    box-shadow: var(--drop);
}

.map-canvas .leaflet-bar a {
    border-radius: 0;
}

.map-canvas .leaflet-control-attribution {
    background: rgba(14, 13, 13, 0.7);
    color: var(--mc-faint);
}

.map-canvas .leaflet-control-attribution a {
    color: var(--am-gold-light);
}

/* A note floating over the map (e.g. nothing mapped yet) that still lets it be dragged.
   .is-blocking covers the whole map instead, for when there's no map to show. */
.map-message {
    position: absolute;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
    z-index: 800;
    width: max-content;
    max-width: calc(100% - 48px);
    box-sizing: border-box;
    padding: 10px 16px;
    text-align: center;
    color: var(--mc-text);
    background: var(--mc-card);
    border: 2px solid var(--mc-black);
    box-shadow: var(--bevel-panel), var(--drop);
    pointer-events: none;
}

.map-message.is-blocking {
    inset: 0;
    transform: none;
    width: auto;
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: var(--mc-muted);
    background: var(--map-void);
    border: 0;
    box-shadow: none;
    pointer-events: auto;
}

.map-message[hidden] {
    display: none;
}

/* The staff /countdown (e.g. a server update in 5 minutes), pinned to the top middle of the map while it runs */
.map-staff-countdown {
    position: absolute;
    left: 50%;
    top: 12px;
    transform: translateX(-50%);
    z-index: 850;
    display: flex;
    align-items: baseline;
    gap: 10px;
    max-width: calc(100% - 140px);
    box-sizing: border-box;
    padding: 8px 16px;
    color: var(--mc-text);
    background: var(--mc-card);
    border: 2px solid var(--mc-black);
    border-top: 3px solid var(--am-gold);
    box-shadow: var(--bevel-panel), var(--drop);
    pointer-events: none;
}

.map-staff-countdown[hidden] {
    display: none;
}

.map-staff-countdown-reason {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-display);
}

.map-staff-countdown-time {
    flex: 0 0 auto;
    color: var(--am-gold-bright);
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
}

/* The last minute */
.map-staff-countdown.is-urgent {
    border-top-color: #d9534f;
}

.map-staff-countdown.is-urgent .map-staff-countdown-time {
    color: #ff7a73;
}

/* Copy notes drop below the countdown instead of covering it */
.map-frame.has-staff-countdown .map-toast {
    top: 64px;
}

/* A short note when something is copied */
.map-toast {
    position: absolute;
    left: 50%;
    top: 16px;
    z-index: 900;
    max-width: calc(100% - 48px);
    box-sizing: border-box;
    padding: 8px 14px;
    transform: translate(-50%, -8px);
    color: var(--mc-text);
    background: var(--mc-card);
    border: 2px solid var(--mc-black);
    box-shadow: var(--bevel-panel), var(--drop);
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.map-toast.is-shown {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
    .map-toast {
        transition: none;
    }
}

/* --- the marked spot --------------------------------------------------------- */

.map-mark-pin {
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    transform: translate(-13px, -26px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: var(--map-mark);
    border: 2px solid var(--mc-black);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
    clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
    color: var(--mc-black);
    font-size: 14px;
    line-height: 1;
    pointer-events: auto;
    cursor: pointer;
}

.map-mark-flag {
    transform: translateY(-3px);
}

.map-mark-coords {
    margin: 4px 0 8px;
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--mc-text);
    font-variant-numeric: tabular-nums;
}

.map-mark-buttons {
    display: flex;
    gap: 6px;
}

.map-mark-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 8px;
    font-size: 0.8rem;
    white-space: nowrap;
}

.map-mark-linked {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.82rem;
    color: var(--mc-muted);
    font-variant-numeric: tabular-nums;
}

.map-mark-go,
.map-mark-remove {
    padding: 2px 0;
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
}

.map-mark-go {
    flex: 0 0 auto;
    color: var(--am-gold-light);
    font-size: 0.82rem;
    font-weight: 700;
}

.map-mark-remove {
    display: block;
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--mc-faint);
    text-decoration: underline;
}

.map-mark-go:hover,
.map-mark-remove:hover {
    color: var(--mc-text);
}

/* --- world border ------------------------------------------------------------ */

.map-canvas .map-border-label {
    background: rgba(14, 13, 13, 0.88);
    color: var(--map-border);
    border: 2px solid var(--mc-black);
    border-radius: 0;
    box-shadow: var(--drop);
    font-family: var(--font-display);
    font-size: 12px;
    padding: 2px 6px;
    white-space: nowrap;
}

.map-canvas .map-border-label::before {
    display: none;
}

/* --- markers ----------------------------------------------------------------- */

.map-marker {
    background: none;
    border: 0;
}

.map-pin {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    transform: translate(-9px, -9px);
    white-space: nowrap;
    pointer-events: auto;
}

.map-pin-dot {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 2px solid var(--mc-black);
    background: var(--pin, var(--am-gold-light));
    color: var(--mc-black);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}

.map-pin-player .map-pin-dot {
    border-radius: 50%;
    background: #ffffff;
    width: 14px;
    height: 14px;
    transform: translate(2px, 0);
}

.map-pin-label {
    font-family: var(--font-display);
    font-size: 12px;
    color: #fff;
    background: rgba(14, 13, 13, 0.78);
    border: 1px solid rgba(0, 0, 0, 0.6);
    padding: 1px 5px;
    text-shadow: 0 1px 0 #000;
}

/* Place names stay up only at the closest zoom; further out they show on hover, focus or tap */
.map-canvas.hide-place-labels .map-pin-place .map-pin-label,
.map-canvas.hide-place-labels .map-pin-waystone .map-pin-label {
    display: none;
}

.map-canvas.hide-place-labels .map-marker:hover .map-pin-label,
.map-canvas.hide-place-labels .map-marker:focus .map-pin-label,
.map-canvas.hide-place-labels .map-marker:focus-visible .map-pin-label {
    display: inline;
}

/* Waystones are diamonds, so they don't read as places */
.map-pin-waystone .map-pin-dot {
    transform: rotate(45deg) scale(0.85);
}

.map-pin-waystone .map-pin-dot span {
    transform: rotate(-45deg);
}

/* World events pulse so they stand out; ones still warming up pulse slower, with a dashed area */
.map-pin-event .map-pin-dot {
    width: 22px;
    height: 22px;
    font-size: 13px;
    transform: translate(-2px, 0);
    animation: mapEvent 1.6s ease-out infinite;
}

.map-pin-event.is-warmup .map-pin-dot {
    animation-duration: 2.8s;
}

.map-pin-event .map-pin-label {
    border-color: var(--mc-black);
    font-weight: 700;
}

@keyframes mapEvent {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.75), 0 2px 0 rgba(0, 0, 0, 0.45); }
    100% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0), 0 2px 0 rgba(0, 0, 0, 0.45); }
}

@media (prefers-reduced-motion: reduce) {
    .map-pin-event .map-pin-dot {
        animation: none;
    }
}

.map-popup-countdown {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.map-canvas .map-claim-label {
    background: rgba(14, 13, 13, 0.88);
    color: #fff;
    border: 2px solid var(--mc-black);
    border-radius: 0;
    box-shadow: var(--drop);
    font-family: var(--font-display);
    font-size: 12px;
    padding: 2px 6px;
}

.map-canvas .map-claim-label::before {
    display: none;
}

.map-canvas .map-village-label {
    border-color: #3f7a26;
}

/* The biome under the cursor, following it across the map while a biome layer is on */
.map-hover-label {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
    pointer-events: none;
    background: rgba(14, 13, 13, 0.88);
    color: #fff;
    border: 2px solid var(--mc-black);
    box-shadow: var(--drop);
    font-family: var(--font-display);
    font-size: 12px;
    padding: 2px 6px;
    white-space: nowrap;
}

.map-hover-label[hidden] {
    display: none;
}

.map-canvas .leaflet-popup-content-wrapper,
.map-canvas .leaflet-popup-tip {
    background: var(--mc-card);
    color: var(--mc-text);
    border-radius: 0;
    border: 2px solid var(--mc-black);
    box-shadow: var(--drop);
}

.map-canvas .leaflet-popup-content {
    margin: 10px 14px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.4;
}

.map-popup-title {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--mc-heading);
}

.map-popup-category {
    font-size: 0.8rem;
    color: var(--am-gold-light);
    margin-bottom: 4px;
}

.map-popup-text {
    color: var(--mc-muted);
    margin: 0;
}

.map-popup-coords {
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--mc-faint);
    font-variant-numeric: tabular-nums;
}

.map-canvas .leaflet-popup-close-button {
    color: var(--mc-muted);
}

/* --- phones: the panel becomes a drawer over the map ------------------------- */

@media (max-width: 720px) {
    .map-page {
        --map-panel-w: min(320px, 86vw);
    }

    .map-panel {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        transition: transform 0.2s ease;
    }

    .map-main.panel-closed .map-panel {
        margin-left: 0;
        transform: translateX(calc(-100% - 6px));
    }

    .map-message:not(.is-blocking) {
        bottom: 20px;
    }
}