* {
    box-sizing: border-box;
}

:root {
    --minimap-bg: black;
    --minimap-border: #222;
    --minimap-land: #222;
    --minimap-accent: yellow;
    --minimap-moth: white;
    --minimap-moth-stroke: #222;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    background: black;
}

body.click-to-start {
    cursor: pointer;
}

canvas {
    position: fixed;
    inset: 0;
    z-index: 1;
}

#earth {
    position: absolute;
    inset: 0;
    z-index: 0;
}

#caption {
    position: fixed;
    bottom:0;
    left: 0;
    right: 0;
    padding-bottom: 30px;
    width: 100%;
    z-index: 2;
    color:yellow;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 24px;
    -webkit-text-stroke: 2px black;
    paint-order: stroke fill;
    text-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}

#caption-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 30px;
    z-index: 2;
    color:yellow;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 24px;
    -webkit-text-stroke: 2px black;
    paint-order: stroke fill;
    text-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
    transition: opacity 0.5s ease-out;
}

#caption-top.caption-top-faded {
    opacity: 0;
    pointer-events: none;
}

#mini-map {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 150px;
    height: 100px;
    background: var(--minimap-bg);
    border: 1px solid var(--minimap-border);
    transition: opacity 0.5s ease-out;
    pointer-events: none;
}

#mini-map.minimap-hidden {
    opacity: 0;
}

#mini-map .minimap-moth-icon {
    background: none !important;
    border: none !important;
    transform-origin: 50% 50%;
}

#mini-map .minimap-moth-icon path {
    fill: var(--minimap-moth);
    fill-opacity: 1 !important;
    stroke: var(--minimap-moth-stroke);
    stroke-width: 0.5px;
}

#mini-map .minimap-start-circle {
    fill: var(--minimap-accent) !important;
    fill-opacity: 1 !important;
    stroke-width: 0px !important;
}

#mini-map .minimap-end-circle {
    fill: url(#minimap-end-circle-gradient) !important;
    fill-opacity: 1 !important;
    stroke-width: 0 !important;
}

#mini-map .minimap-route-line {
    fill: none !important;
    stroke: var(--minimap-accent) !important;
    stroke-width: 1px !important;
    stroke-dasharray: 2, 4;
}

#mini-map.minimap-hide-route .minimap-start-circle,
#mini-map.minimap-hide-route .minimap-route-line {
    visibility: hidden;
}

#minimap-end-circle-gradient stop {
    stop-color: var(--minimap-accent);
}

#earth .leaflet-pane,
#earth .leaflet-tile,
#earth .leaflet-tile-container,
#earth .leaflet-pane > svg,
#earth .leaflet-pane > canvas,
#earth .leaflet-image-layer,
#earth .leaflet-layer {
    position: absolute;
    left: 0;
    top: 0;
}

#mini-map .leaflet-pane,
#mini-map .leaflet-tile,
#mini-map .leaflet-tile-container,
#mini-map .leaflet-pane > svg,
#mini-map .leaflet-pane > canvas,
#mini-map .leaflet-image-layer {
    position: absolute;
    left: 0;
    top: 0;
}

.leaflet-container {
    overflow: hidden;
}
.leaflet-container .leaflet-overlay-pane svg,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
    max-width: none !important;
    max-height: none !important;
    width: auto;
    padding: 0;
}
.leaflet-pane         { z-index: 400; }
.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg  { z-index: 200; }
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
    pointer-events: none;
}