html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;    
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;    
    font-size: 16px;
}

#map-toolbar {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    image-rendering: pixelated;
    padding-bottom: 24px;
}

/* Minecraft inventory-style dimension switcher */
.mc-dimension-switcher {
    display: flex;
    gap: 6px;
    padding: 6px;
    background: #c6c6c6;
    border: 3px solid;
    border-color: #ffffff #555555 #555555 #ffffff;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}

.mc-dim-btn {
    position: relative;
    width: 52px;
    height: 52px;
    padding: 0;
    margin: 0;
    background: #8b8b8b;
    border: 3px solid;
    border-color: #373737 #ffffff #ffffff #373737;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: none;
}

.mc-dim-btn:hover {
    background: #969696;
}

.mc-dim-btn.active {
    background: #b0b0b0;
    border-color: #ffffff #373737 #373737 #ffffff;
    box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.15);
}

.mc-dim-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.mc-dim-btn::after {
    content: attr(title);
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    white-space: nowrap;
    text-shadow:
        1px 0 0 #000,
        -1px 0 0 #000,
        0 1px 0 #000,
        0 -1px 0 #000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
}

.mc-dim-btn:hover::after,
.mc-dim-btn.active::after {
    opacity: 1;
}

/* 32x32 Minecraft dimension icons */
.mc-icon {
    --px: 2px;
    position: relative;
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    flex-shrink: 0;
}

/* Overworld - grass block side (green top + dirt bottom) */
.mc-icon-overworld {
    background-color: #8b6914;
    background-image:
        linear-gradient(90deg,
            #79c05a 0 4px, #568018 4px 8px, #7cbd52 8px 12px, #6faa1e 12px 16px,
            #5ea818 16px 20px, #79c05a 20px 24px, #568018 24px 28px, #7cbd52 28px 32px),
        linear-gradient(180deg,
            #5ea818 0 2px, #79c05a 2px 4px, #568018 4px 6px, #7cbd52 6px 8px,
            #6faa1e 8px 10px, #5d9618 10px 12px, #3a5010 12px 14px, transparent 14px),
        linear-gradient(90deg,
            #8b6914 0 8px, #6b4f10 8px 16px, #5c4310 16px 24px, #7a5c18 24px 32px),
        linear-gradient(180deg,
            transparent 0 14px,
            #6b4f10 14px 18px, #8b6914 18px 22px,
            #5c4310 22px 26px, #8b6914 26px 30px, #6b4f10 30px 32px);
    background-size: 32px 14px, 32px 14px, 32px 18px, 32px 32px;
    background-position: 0 0, 0 0, 0 14px, 0 0;
    background-repeat: no-repeat;
}

/* Nether - netherrack + lava pool */
.mc-icon-nether {
    background-color: #612626;
    background-image:
        linear-gradient(90deg,
            #893535 0 4px, #4a1818 4px 8px, #612626 8px 12px, #7a2e2e 12px 16px,
            #893535 16px 20px, #612626 20px 24px, #4a1818 24px 28px, #7a2e2e 28px 32px),
        linear-gradient(180deg,
            #7a2e2e 0 4px, #612626 4px 8px, #893535 8px 12px, #4a1818 12px 16px,
            #612626 16px 20px, #7a2e2e 20px 24px, #893535 24px 28px, #612626 28px 32px),
        radial-gradient(circle at 30% 25%, #893535 0 3px, transparent 3px),
        radial-gradient(circle at 70% 60%, #4a1818 0 3px, transparent 3px),
        radial-gradient(circle at 20% 75%, #7a2e2e 0 2px, transparent 2px);
}

.mc-icon-nether::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 8px;
    width: 16px;
    height: 10px;
    background:
        linear-gradient(180deg,
            #ffd000 0 2px, #ff9500 2px 4px, #ff6a00 4px 6px,
            #ff4500 6px 8px, #cc2200 8px 10px);
    box-shadow:
        inset 2px 0 0 #ffea80,
        inset 0 0 0 2px #ffaa00;
}

/* End - end stone + end portal frame */
.mc-icon-end {
    background-color: #c9bc8f;
    background-image:
        linear-gradient(90deg,
            #ddd6b4 0 4px, #b5a57a 4px 8px, #dcd1a8 8px 12px, #c9bc8f 12px 16px,
            #ddd6b4 16px 20px, #b5a57a 20px 24px, #c9bc8f 24px 28px, #dcd1a8 28px 32px),
        linear-gradient(180deg,
            #b5a57a 0 4px, #dcd1a8 4px 8px, #c9bc8f 8px 12px, #ddd6b4 12px 16px,
            #c9bc8f 16px 20px, #b5a57a 20px 24px, #dcd1a8 24px 28px, #c9bc8f 28px 32px);
}

.mc-icon-end::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    background: #1a1a1a;
    box-shadow:
        inset 0 0 0 2px #0d0d0d,
        inset 0 0 0 4px #2a2a2a;
}

.mc-icon-end::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    width: 12px;
    height: 12px;
    background-color: #0a0014;
    border: 2px solid #2d1b69;
    box-sizing: border-box;
    background-image:
        radial-gradient(circle at 25% 30%, #c77dff 0 1px, transparent 1px),
        radial-gradient(circle at 75% 20%, #e0aaff 0 1px, transparent 1px),
        radial-gradient(circle at 20% 80%, #9d4edd 0 1px, transparent 1px),
        radial-gradient(circle at 85% 75%, #c77dff 0 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, #7b2cbf 0 2px, transparent 2px);
}

#map-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

#map {
    height: 100%;
    width: 100%;
    /* Matches mosaic placeholder outside rendered tiles */
    background-color: #8c8c8c;
}

/* Nearest-neighbor scaling so overzoom shows crisp block pixels (Minecraft-style). */
#map .ol-viewport canvas {
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.map-loading-panel {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #000;
    pointer-events: none;
    z-index: 500;
}

body.map-loading .map-loading-panel {
    display: flex;
}

body.map-loading #map {
    opacity: 0.6;
}

body.map-loading .mc-dim-btn {
    cursor: wait;
}

.mouseposition {
    background-color: white;
    padding: 3px;
    text-align: right;
}

.mousepositioncoord {
    min-width: 40px;
    display: inline-block;
}

div.ol-mouse-position {
    background-color: white;
    padding: 6px;
    border-radius: 3px;
    box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
}

.ol-ctx-menu-container {
    font-size: 16px;
}

.ol-scale-step-text {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: white;
    text-shadow:
        1px 0 0 black,
        0 1px 0 black,
        -1px 0 0 black,
        0 -1px 0 black;
    0px 0px 8px black;
}

.ol-scale-singlebar-odd {
    background: #ddd;
}

.ol-scale-singlebar-even {
    background: #444;
}

.toastify {
    color: black;
    background: yellow;
}

.ol-ctx-menu-container li {
    padding-left: 20px;
}

.menuitem-checked::before {
    content: '鈽?;
    width: 20px;
    display: inline-block;
    margin-left: -20px;
}

.menuitem-unchecked::before {
    content: '鈽?;
    width: 20px;
    display: inline-block;
    margin-left: -20px;
}