body[data-realm="classic"] { --map-ink: #f6edcf; --map-muted: #d4c59e; --map-accent: #d5a64c; }
.classic-map-page { max-width: 1240px; margin: 0 auto; padding: 24px 18px 70px; color: var(--map-ink); }
.classic-map-header { text-align: center; margin-bottom: 22px; text-shadow: 0 3px 18px #000; }
.classic-map-header .hero-mark { width: 310px; height: 142px; margin: 6px auto 0; background: url('/template/light/images/WoW-1.12.1-logo.webp') center/contain no-repeat; }
.classic-map-header h1 { font-family: Georgia, serif; font-size: clamp(2rem, 5vw, 3.4rem); margin: 0; }
.map-intro { color: var(--map-muted); margin: 8px 0 0; }
.map-back-link { display: inline-block; color: var(--map-accent); margin-bottom: 4px; }
.classic-map-panel { background: rgba(22,18,12,.57); border: 1px solid rgba(224,190,115,.3); border-radius: 16px; overflow: hidden; box-shadow: 0 18px 55px rgba(0,0,0,.45); backdrop-filter: blur(6px); }
.classic-map-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; border-bottom: 1px solid rgba(224,190,115,.3); background: rgba(0,0,0,.26); }
.classic-map-toolbar h2 { font-family: Georgia, serif; margin: 0 0 3px; }
.map-status { color: var(--map-muted); font-size: .88rem; margin: 0; }
.map-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.map-choice, .map-control { border: 1px solid rgba(224,190,115,.42); border-radius: 7px; padding: 9px 12px; min-width: 38px; background: rgba(0,0,0,.33); color: var(--map-ink); font: inherit; font-weight: 700; cursor: pointer; }
.map-choice:hover, .map-choice:focus, .map-control:hover, .map-control:focus { border-color: var(--map-accent); outline: 2px solid rgba(213,166,76,.35); outline-offset: 1px; }
.map-choice.is-active { background: var(--map-accent); color: #24190a; }
.classic-map-frame { position: relative; height: min(72vh, 760px); min-height: 420px; overflow: hidden; background: #001d29; cursor: grab; touch-action: none; }
.classic-map-frame.is-dragging { cursor: grabbing; }
.classic-map-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.classic-map-tiles, .classic-map-markers { position: absolute; left: 0; top: 0; }
.classic-map-composite { position: absolute; left: 0; top: 0; display: block; max-width: none; user-select: none; pointer-events: none; }
.classic-map-tile { position: absolute; display: block; width: 256px; height: 256px; image-rendering: auto; user-select: none; pointer-events: none; }
.classic-map-marker { position: absolute; width: 16px; height: 16px; padding: 0; box-sizing: border-box; line-height: 0; appearance: none; -webkit-appearance: none; transform: translate(-50%, -50%); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 6px #000; cursor: pointer; z-index: 3; }
.classic-map-marker::after { content: ''; position: absolute; inset: var(--marker-inset, 3px); border-radius: 50%; background: rgba(255,255,255,.65); }
.classic-map-marker.marker-alliance { background: #287fc3; }
.classic-map-marker.marker-horde { background: #b83431; }
.classic-map-marker.marker-bot { box-shadow: 0 0 0 2px #d5a64c, 0 1px 7px #000; }
.classic-map-marker:hover, .classic-map-marker:focus { z-index: 10; transform: translate(-50%, -50%) scale(1.22); outline: 2px solid #fff; outline-offset: 2px; }
.classic-map-marker-label { position: absolute; left: 12px; top: 10px; display: none; white-space: nowrap; padding: 4px 7px; border-radius: 5px; background: rgba(12,9,5,.9); color: #fff; font-size: 12px; font-weight: 700; pointer-events: none; }
.classic-map-marker:hover .classic-map-marker-label, .classic-map-marker:focus .classic-map-marker-label { display: block; }
.classic-map-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 20px 16px; color: var(--map-muted); font-size: .85rem; }
.map-legend { display: flex; gap: 14px; flex-wrap: wrap; white-space: nowrap; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border: 1px solid #fff; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.legend-alliance { background: #287fc3; } .legend-horde { background: #b83431; } .legend-bot { background: #d5a64c; box-shadow: 0 0 0 1px #d5a64c; }
.map-help { margin: 0; text-align: right; }
@media (max-width: 720px) { .classic-map-header .hero-mark { width: 250px; height: 115px; } .classic-map-toolbar { align-items: flex-start; flex-direction: column; } .map-controls { justify-content: flex-start; } .classic-map-frame { height: 66vh; min-height: 360px; } .classic-map-footer { align-items: flex-start; flex-direction: column; } .map-help { text-align: left; } }
@media (prefers-reduced-motion: reduce) { .classic-map-canvas { transition: none !important; } }