/* Page sheet for online_map.php. Linked after style.css by includes/css.php,
   so these rules win ties against the shared sheet. */

.map-wrap { display:flex; justify-content:center; padding:1rem 0 3rem; }
.map-frame {
    position: relative;
    width: var(--map-w);
    height: var(--map-h);
    background: var(--map-img) no-repeat top left;
    border: 1px solid rgba(201,168,76,0.25);
    box-shadow: 0 0 24px rgba(0,0,0,0.6);
    max-width: 100%;
}
.char-marker {
    position: absolute;
    margin: 0;
    transform: translate(-50%, -50%);
    font-size: 18px;
    line-height: 1;
    pointer-events: auto;
    cursor: default;
    text-shadow: 0 0 3px #000, 0 0 6px #000;
}
.char-marker::before { content: "\2617"; }
.char-label {
    position: absolute;
    transform: translate(8px, -50%);
    font-family: monospace;
    font-size: 11px;
    color: #fff;
    background: rgba(0,0,0,0.65);
    padding: 1px 4px;
    border-radius: 2px;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 0 2px #000;
}
/* Per-slot colors, mirroring the realmofanarchy style. */
.char-1::before  { color:var(--gold); }
.char-2::before  { color:#d96b6b; }
.char-3::before  { color:#6fa8dc; }
.char-4::before  { color:#a4c96a; }
.char-5::before  { color:#c08adf; }
.char-6::before  { color:#e0a05a; }
.char-7::before  { color:#7dd1c1; }
.char-8::before  { color:#dca0c0; }
.char-9::before  { color:#b0b0b0; }
.char-10::before { color:#e6cf6c; }

.map-counter {
    position:absolute; top:6px; right:8px;
    font-family: var(--font-display, serif);
    color: var(--accent, var(--gold));
    background: rgba(0,0,0,0.55);
    padding: 2px 8px; border-radius: 2px;
    font-size: 0.9rem; letter-spacing:1px;
}
.map-cursor-readout {
    position:absolute; bottom:6px; left:8px;
    font-family: monospace;
    color: var(--gold);
    background: rgba(0,0,0,0.55);
    padding: 2px 8px; border-radius: 2px;
    font-size: 0.75rem;
    pointer-events:none;
    opacity: 0.85;
}