:root {
    --sidebar-color: rgba(0, 0, 0, 0.2);
    --popup-width: clamp(240px, min(34vw, 48vh), 460px);
    --popup-height: clamp(180px, min(52vh, 42vw), 520px);
    --popup-scale: 1.15;
    --glow-scale: 1; /* updated by JS to 1/scale */
    --flag-size: 20px; /* used for precise timer alignment */
}

/* Stage: transform layer + baseline (static) glow via drop-shadow */
#map-stage {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
    will-change: transform;
    z-index: 0;

    /* Static glow that renders reliably across engines (not animated) */
    filter:
        drop-shadow(0 0 calc(18px * var(--glow-scale)) rgba(162, 219, 255, 0.35))
        drop-shadow(0 0 calc(42px * var(--glow-scale)) rgba(120, 200, 255, 0.26))
        drop-shadow(0 0 calc(78px * var(--glow-scale)) rgba(80, 170, 255, 0.20));
}

/* Map image below the animated glow */
#map-stage > img { position: absolute; z-index: 0; }

/* Animated aura on a real child (cheap: opacity-only) */
#map-stage .stage-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2; /* above image/markers within stage */
    box-shadow:
        0 0 calc(28px * var(--glow-scale)) calc(12px * var(--glow-scale)) rgba(162, 219, 255, 0.42),
        0 0 calc(72px * var(--glow-scale)) calc(28px * var(--glow-scale)) rgba(120, 200, 255, 0.30),
        0 0 calc(140px * var(--glow-scale)) calc(56px * var(--glow-scale)) rgba(80, 170, 255, 0.22);
    animation: icy-aura-opacity 2.6s ease-in-out infinite;
    will-change: opacity;
}

/* Remove any #map-stage::after rule to avoid conflicts */

/* Opacity-only pulse */
@keyframes icy-aura-opacity {
    0%   { opacity: 0.78; }
    50%  { opacity: 1.00; }
    100% { opacity: 0.78; }
}

body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    background: #000;
}

img {
    max-width: none;
    max-height: none;
    object-fit: contain;
    position: absolute;
    cursor: grab;
}

/* Flag size via variable (keeps alignment correct if you ever change it) */
.marker_flag {
    width: var(--flag-size);
    height: var(--flag-size);
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: pointer;
}

/* Timer badge element */
.timer-badge {
    position: absolute;
    background: rgba(13, 110, 253, 0.95);
    color: #fff;

    /* compact */
    font-size: clamp(10px, 0.8vw, 13px);
    line-height: 1.1;
    padding: 0.20em 0.40em;
    border-radius: 0.4em;

    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
    z-index: 20;

    transform-origin: top left;
}

/* Exact alignment: bottom-left of badge == top-left of flag */
#map-stage .timer-badge {
    /* Apply scale(1/s) first so subsequent translates are in screen px (no drift) */
    transform:
        scale(var(--glow-scale, 1))
        translate(
            calc(-0.5 * var(--flag-size, 20px) * var(--map-scale, 1)),
            calc(-100% - 0.5 * var(--flag-size, 20px) * var(--map-scale, 1))
        );
    will-change: transform;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.timer-badge.timer-running { background: rgba(13, 110, 253, 0.95); }
.timer-badge.timer-done    { background: rgba(220, 53, 69, 0.95); }

.timer-badge .timer-badge-label { font-weight: 600; margin-bottom: 0.10em; }
.timer-badge .timer-badge-time  { font-variant-numeric: tabular-nums; letter-spacing: 0.2px; }

/* Apply the aura effect to individual elements */
#search-bar, #min-value, #max-value, #rbslider .noUi-handle, #mobile-level-inputs select {
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5);
    animation: dark-pulsating-aura 2s infinite;
}

/* Preserve dark glow on focus (override Bootstrap’s blue focus shadow) */
#search-bar:focus,
#mobile-level-inputs select:focus {
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5) !important;
    outline: none;
}

/* Hint arrows overlay (disappear on first move) */
#map-hint-arrows {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2000; /* above stripes (1001) and header (1000) */
    transition: opacity .3s ease;
}

#map-hint-arrows.fade-out {
    opacity: 0;
}

#map-hint-arrows .arrow {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0.85;
    /* Right-pointing triangle; other directions are rotations via placement transforms */
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 22px solid rgba(150, 200, 255, 0.95);
    filter: drop-shadow(0 0 6px rgba(120, 200, 255, 0.85));
    animation: hint-pulse 1.6s ease-in-out infinite;
}

/* Placement and direction */
#map-hint-arrows .arrow-top {
    top: 12vh;
    left: 50%;
    transform: translate(-50%, 0) rotate(-90deg);
}
#map-hint-arrows .arrow-right {
    right: 16%;
    top: 50%;
    transform: translate(0, -50%) rotate(0deg);
}
#map-hint-arrows .arrow-bottom {
    bottom: 6vh;
    left: 50%;
    transform: translate(-50%, 0) rotate(90deg);
}
#map-hint-arrows .arrow-left {
    left: 16%;
    top: 50%;
    transform: translate(0, -50%) rotate(180deg);
}

@keyframes hint-pulse {
    0%   { opacity: 0.55; filter: drop-shadow(0 0 4px rgba(120, 200, 255, 0.7)); }
    50%  { opacity: 1.0;  filter: drop-shadow(0 0 14px rgba(120, 200, 255, 1)); }
    100% { opacity: 0.55; filter: drop-shadow(0 0 4px rgba(120, 200, 255, 0.7)); }
}

/* Click-a-flag timer hint overlay (disappears on first move) */
#map-timer-hint {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2000; /* above stripes (1001) and header (1000) */
    transition: opacity .3s ease;
    display: flex;
    align-items: center; /* was flex-start */
    justify-content: center;
}

#map-timer-hint.fade-out {
    opacity: 0;
}

/* Larger, clearer timer hint bubble for new readers */
#map-timer-hint .timer-hint-bubble {
    font-size: clamp(18px, 2.4vw, 24px);
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: 0.2px;

    padding: 16px 22px;
    border-radius: 12px;
    max-width: min(90vw, 560px);
    white-space: normal; /* allow wrapping for better readability */

    color: #fff;
    background: rgba(8, 16, 28, 0.92); /* higher contrast */
    border: 2px solid rgba(170, 215, 255, 0.85);
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}

/* --- Popup sizing guards (prevent viewport clipping) --- */
.popup {
    position: absolute;             /* ensure left/top positioning works */
    width: var(--popup-width);      /* fluid width */
    height: var(--popup-height);    /* fluid height */
    box-sizing: border-box;

    /* Constrain size to the viewport so content never forces overflow */
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    overflow: hidden;
    z-index: 1600; /* above side stripes (1001) and header (1000), below hints (2000) */
}

/* Iframe fills the popup (no scaling) */
.popup iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* --- Mobile flicker fixes --- */

/* Stabilize viewport height on mobile (override Bootstrap's vh-100) */
@supports (height: 100dvh) {
  body { height: 100dvh; }
  .vh-100 { height: 100dvh !important; }

}

/* Reduce GPU load on touch devices */
@media (hover: none), (pointer: coarse) {
  /* Map glow drop-shadows are expensive on mobile; the stage-glow still provides a nice effect */
  #map-stage { filter: none; }

  /* Stop the animated stage glow (opacity/box-shadow) on mobile */
  #map-stage .stage-glow {
    animation: none !important;
  }
}

/* Give fixed overlays their own compositor layer */
#button-container,
#left-stripe, #right-stripe,
#clan-note,
#map-hint-arrows,
#map-timer-hint,
#suggestions {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* Improve touch-gesture interoperability and keep the map on the compositor */
#map-stage { touch-action: none; }

/* --- Legal Notice Modal --- */
.legal-modal {
    position: fixed;
    inset: 0;
    z-index: 3000; /* above hints (2000), popup (1600), header/stripes */
    background: rgba(0, 0, 0, 0.55);
    display: none;
}

.legal-modal[aria-hidden="false"] { display: block; }

.legal-dialog {
    position: absolute;
    left: 50%;
    top: 8vh;
    transform: translateX(-50%);
    width: min(92vw, 720px);
    max-height: 84vh;
    overflow: auto;

    /* Dark theme from provided notice */
    color-scheme: dark;
    background: #0a1018;
    color: #e7eef7;

    border: 1px solid #1c2a3a;
    border-radius: 12px;
    box-shadow: 0 12px 34px rgba(0,0,0,0.55);
}

.legal-dialog .wrap { padding: 16px 18px 20px; }
.legal-dialog h1 { font-size: 1.1rem; margin: 0 0 10px; }
.legal-dialog h2 { font-size: 1rem; margin: 16px 0 8px; }
.legal-dialog p,
.legal-dialog li { font-size: .9rem; line-height: 1.45; margin: 8px 0; }
.legal-dialog small, .legal-dialog .muted { color:#a9bfd8; }
.legal-dialog a { color: #9fd0ff; text-decoration: underline; }
.legal-dialog .hr { height:1px; background:#1c2a3a; margin:12px 0; }

.legal-close {
    position: sticky;
    top: 0;
    margin-left: auto;
    display: inline-block;
    border: 0;
    background: transparent;
    color: #a9bfd8;
    font-size: 22px;
    line-height: 1;
    padding: 10px 12px;
    cursor: pointer;
}