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

.rank-table thead th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.rank-table thead th.sortable:hover { color: var(--accent); }
.guild-link  { color: inherit; text-decoration: none; }
.guild-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* No per-name online dot on this board: every character listed here is
   online by definition, so a marker saying so on all of them carries no
   information. The green dot stays meaningful on rank.php and gold.php,
   where a name may or may not be connected. */

/* ──── Map chip buttons ──── */
.map-chips {
    display: flex; flex-wrap: wrap; gap: 10px;
    justify-content: center;
    margin: 0 auto 1.2rem;
    max-width: min(960px, 100%);
}
.map-chip {
    position: relative;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 9px 16px 9px 14px;
    background: linear-gradient(180deg, #181819 0%, #101011 100%);
    color: var(--text-main);
    border: 1px solid var(--border-light);
    border-radius: 999px;
    font-family: inherit;
    font-size: var(--fs-sm);
    letter-spacing: var(--ls-button);
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.map-chip:hover {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
    transform: translateY(-1px);
}
.map-chip-icon {
    display: inline-block;
    width: 18px; height: 18px;
    background-color: currentColor;
    -webkit-mask: url('../img/icons/village.svg') no-repeat center / contain;
            mask: url('../img/icons/village.svg') no-repeat center / contain;
    opacity: 0.8;
    transition: opacity .15s;
}
.map-chip:hover .map-chip-icon { opacity: 1; }
.map-chip .map-chip-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; padding: 2px 7px;
    background: var(--accent);
    color: #fff;
    border-radius: 999px;
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0;
}
.map-chip .map-chip-count.is-zero {
    background: #232325;
    color: var(--text-dim);
}

/* ──── Peak stat pills (24h / all-time): read-only siblings of the map chips ──── */
/* Same neutral body as the map chips so it doesn't read as red-on-red
   against the header; the value is the only accent-coloured element. */
.peak-pill {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 16px 9px 14px;
    background: linear-gradient(180deg, #181819 0%, #101011 100%);
    border: 1px solid var(--border-light);
    border-radius: 999px;
    font-family: inherit;
    font-size: var(--fs-sm);
    letter-spacing: var(--ls-button);
    text-transform: uppercase;
    color: var(--text-mid);
    cursor: default;
}
.peak-pill-icon {
    display: inline-block;
    width: 17px; height: 17px;
    background-color: currentColor;
    -webkit-mask: url('../img/icons/laurel-crown.svg') no-repeat center / contain;
            mask: url('../img/icons/laurel-crown.svg') no-repeat center / contain;
    opacity: 0.8;
}
/* All-time pill: same pill, its own emblem so the two don't read as a
   duplicated chip sitting side by side. */
.peak-pill-icon-all {
    -webkit-mask-image: url('../img/icons/flying-flag.svg');
            mask-image: url('../img/icons/flying-flag.svg');
}
.peak-pill-label { color: var(--text-dim); }
.peak-pill-value {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.4ch;
    color: var(--accent);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0;
    transition: color .3s ease;
}
/* Brief highlight when a live value updates: both peak pill values and
   the header player count share the same pulse. */
.peak-pill-value.bump,
#player-count.bump {
    animation: peakBump 0.6s ease;
}
/* inline-block so the scale in peakBump can take effect on the count. */
#player-count { display: inline-block; }
@keyframes peakBump {
    0%   { color: #f0ede8; transform: scale(1); }
    35%  { color: #f0ede8; transform: scale(1.18); }
    100% { color: var(--accent); transform: scale(1); }
}

/* Slim divider between the map chips and the stat pills. */
.chip-divider {
    align-self: stretch;
    width: 1px;
    margin: 4px 2px;
    background: var(--border-light);
    opacity: 0.7;
}
@media (max-width: 520px) {
    .chip-divider { display: none; }
}

/* ──── Map modal — same aesthetic family as .prelaunch-modal ──── */
.map-modal {
    position: fixed; inset: 0;
    display: none;
    align-items: center; justify-content: center;
    padding: clamp(12px, 3vw, 32px);
    background: rgba(4, 4, 6, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9999;
    opacity: 0;
    animation: mapFade 0.32s ease forwards;
}
.map-modal.is-open { display: flex; }
.map-modal.is-closing { animation: mapFadeOut 0.22s ease forwards; }
@keyframes mapFade    { to { opacity: 1; } }
@keyframes mapFadeOut { to { opacity: 0; } }

.map-modal-dialog {
    position: relative;
    max-width: min(92vw, 1100px);
    max-height: 92vh;
    padding: 32px 28px 24px;
    background:
        radial-gradient(ellipse at top, rgba(154,35,35,0.10) 0%, transparent 60%),
        linear-gradient(180deg, #0d0d10 0%, #0a0a0c 100%);
    border: 1px solid var(--border-light);
    box-shadow:
        0 30px 80px rgba(0,0,0,0.7),
        0 0 0 1px rgba(154,35,35,0.08),
        inset 0 1px 0 rgba(255,255,255,0.04);
    display: flex; flex-direction: column;
    overflow: hidden;
    text-align: center;
    transform: translateY(18px) scale(0.97);
    opacity: 0;
    animation: mapRise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.06s;
}
@keyframes mapRise { to { transform: translateY(0) scale(1); opacity: 1; } }

.map-modal-dialog::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
    opacity: 0.85;
}

.map-modal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 auto 12px;
}
.map-modal-eyebrow::before,
.map-modal-eyebrow::after {
    content: '';
    display: block;
    width: 26px;
    height: 1px;
    background: var(--accent);
    opacity: 0.55;
}

.map-modal-title {
    font-family: 'Beaulieux', sans-serif;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: normal;
    letter-spacing: 0.05em;
    color: var(--text-main);
    line-height: 1.2;
    margin: 0 0 22px;
}

.map-modal-close {
    position: absolute;
    top: 12px; right: 12px;
    background: transparent;
    color: var(--text-mid);
    border: 1px solid var(--border-light);
    border-radius: 2px;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: color .18s, border-color .18s, background .18s, transform .12s;
    font-size: 18px; line-height: 1;
    z-index: 2;
}
.map-modal-close:hover {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--accent-glow);
}

.map-modal-body {
    overflow: auto;
    display: flex; justify-content: center; align-items: center;
    padding: 4px 0 6px;
}
/* The frame is drawn MAP_MODAL_SCALE times the source image (see the JS):
   background-size stretches the art to the frame, and the JS multiplies
   every marker position by the same factor, so the two stay in step. */
.map-modal-frame {
    position: relative;
    /* Never let the flex parent squeeze it: the art is stretched to the
       frame while marker positions are not, so a shrunk frame would put
       the two out of register. Narrow screens scroll the body instead. */
    flex-shrink: 0;
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border: 1px solid rgba(154, 35, 35, 0.22);
    box-shadow:
        0 0 32px rgba(0, 0, 0, 0.55),
        inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.map-modal-readout {
    position: absolute; bottom: 6px; left: 8px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    color: #d8c98c;
    background: rgba(0, 0, 0, 0.6);
    padding: 2px 8px;
    border-radius: 3px;
    font-size: var(--fs-2xs);
    pointer-events: none;
    opacity: 0.9;
    letter-spacing: 0;
}

@media (max-width: 520px) {
    .map-modal-dialog { padding: 26px 16px 18px; }
}
.char-marker {
    position: absolute;
    margin: 0;
    transform: translate(-50%, -50%);
    font-size: 18px;
    line-height: 1;
    text-shadow: 0 0 3px #000, 0 0 6px #000;
    pointer-events: auto;
    cursor: default;
}
.char-marker::before { content: "\2617"; }
.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; }
.char-label {
    position: absolute;
    transform: translate(10px, -50%);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 11px;
    color: #fff;
    background: rgba(0, 0, 0, 0.65);
    padding: 1px 5px;
    border-radius: 2px;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: 0 0 2px #000;
}

/* Reduce-motion: style.css cancels every animation site-wide
   (animation: none !important). The modal & dialog start at opacity:0
   and are only revealed by their mapFade/mapRise entrance animations,
   so with motion reduced they'd open invisibly — the chip click would
   appear to "do nothing". Force the opened state to be visible. */
@media (prefers-reduced-motion: reduce) {
    .map-modal        { opacity: 1 !important; }
    .map-modal-dialog { opacity: 1 !important; transform: none !important; }
}