/* Orbitron: only for the outdated-build badge below -- borrowed from the website's own
   retrowave identity (web/public/style.css), used sparingly the same way that palette does. */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap');

.minimap-container {
  display: flex;
  margin: 8px;
  justify-content: center;
  align-items: center;
}

.minimap-wrapper {
  height: 160px;
  display: block;
  position: relative;
}

.minimap-wrapper canvas {
  background-color: black;
}

.minimap-wrapper .crosshair {
  position: absolute;
  left: 72px;
  top: 72px;
  width: 16px;
  height: 16px;
  pointer-events: none;
  image-rendering: pixelated;
}

/* Outdated-build pill: hidden until BuildCheck (src/build-check.js) actually detects a deploy
   that happened mid-session, so it borrows the site's neon sparingly -- same "glow means
   something happened" rule the website's own CSS documents at its top. Top-left corner because
   the time display + zoom/map buttons already own the right side (below). */
.minimap-outdated-badge {
  display: none;
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 2px 5px;
  font-family: "Orbitron", sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ff3db0;
  background: rgba(7, 3, 14, 0.85);
  border: 1px solid rgba(255, 61, 176, 0.55);
  border-radius: 4px;
  text-shadow: 0 0 6px rgba(255, 61, 176, 0.65);
  box-shadow: 0 0 8px rgba(255, 61, 176, 0.35);
  pointer-events: auto;
  cursor: default;
  animation: minimap-outdated-pulse 2.4s ease-in-out infinite;
}

.minimap-outdated-badge.visible {
  display: block;
}

@keyframes minimap-outdated-pulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

/* The little "time display glass" ball: a day/night scroll spinning behind a fixed bezel,
   top-right corner of the minimap -- see Clock.__updateTimeDisplay for the animation */
.minimap-time-display {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 36px;
  height: 36px;
  pointer-events: none;
}

.minimap-time-scroll {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  background-image: url("../png/minimap/timedisplay-scroll-full.png");
  background-repeat: repeat-x;
  image-rendering: pixelated;
}

.minimap-time-glass {
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  image-rendering: pixelated;
}

/* Zoom in/out and open-map buttons, stacked along the right edge below the time display */
.minimap-buttons {
  position: absolute;
  top: 44px;
  right: 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* button {} in new.css sets its own background-image and border, and on :hover swaps in
   bg2.png -- both need beating back here, with the same idle image the button already has by
   default, so hovering one of these doesn't flash the generic grey board look */
.minimap-icon-button {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  box-shadow: none;
  image-rendering: pixelated;
}

.minimap-icon-button:hover {
  border: 0;
}

.minimap-zoom-in-button,
.minimap-zoom-in-button:hover {
  background-image: url("../png/minimap/automap-button-zoomin-up.png");
}

.minimap-zoom-in-button:active {
  background-image: url("../png/minimap/automap-button-zoomin-down.png");
}

.minimap-zoom-out-button,
.minimap-zoom-out-button:hover {
  background-image: url("../png/minimap/automap-button-zoomout-up.png");
}

.minimap-zoom-out-button:active {
  background-image: url("../png/minimap/automap-button-zoomout-down.png");
}

.minimap-open-map-button,
.minimap-open-map-button:hover {
  background-image: url("../png/minimap/automap-button-cyclopediamap-up.png");
}

.minimap-open-map-button:active {
  background-image: url("../png/minimap/automap-button-cyclopediamap-down.png");
}

/* The floor gauge: real Tibia's own automap-indicator-maplayers.png, one 14x67 frame per
   floor. Clicking the top half goes up a floor (towards the sky-blue end of the frame),
   the bottom half goes down (towards the earthy end) -- see Minimap.__handleFloorGaugeClick */
.minimap-floor-gauge {
  position: absolute;
  left: 4px;
  top: 30px;
  width: 14px;
  height: 67px;
  background-image: url("../png/minimap/automap-indicator-maplayers.png");
  background-repeat: no-repeat;
  cursor: pointer;
  image-rendering: pixelated;
}

#minimap-current-layer {
  position: absolute;
  left: 4px;
  bottom: 4px;
  color: white;
  font-size: 10px;
  font-weight: bold;
  pointer-events: none;
}

/* Keep the desktop controls beside the map, without changing the mobile tool window. */
body:not(.mobile-layout) .minimap-container {
  margin: 4px 8px;
}

body:not(.mobile-layout) .minimap-wrapper {
  width: 156px;
  height: 112px;
}

body:not(.mobile-layout) #minimap {
  display: block;
  width: 112px;
  height: 112px;
  image-rendering: pixelated;
  cursor: pointer;
  outline: 1px solid #131313;
}

body:not(.mobile-layout) .minimap-wrapper .crosshair {
  left: 48px;
  top: 48px;
}

body:not(.mobile-layout) .minimap-time-display {
  top: 0;
  right: 0;
}

body:not(.mobile-layout) #clock-time {
  display: none;
}

body:not(.mobile-layout) .minimap-buttons {
  top: 48px;
  left: 116px;
  right: auto;
  gap: 2px;
}

body:not(.mobile-layout) .minimap-zoom-out-button {
  order: -1;
}

body:not(.mobile-layout) .minimap-icon-button {
  margin: 0;
  border-radius: 0;
}

body:not(.mobile-layout) .minimap-floor-gauge {
  left: auto;
  right: 0;
  top: 45px;
}

body:not(.mobile-layout) #minimap-current-layer {
  left: 115px;
  bottom: auto;
  top: 33px;
  width: 22px;
  text-align: center;
}