style.css

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    /* Prevents the whole page from rubber-banding on Mac/Mobile */
    overscroll-behavior: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#map {
    height: 100%;
    width: 100%;
    /* TRICK: Change this color to match your map's ocean color!
       If your ocean is dark blue, put that hex code here.
       This makes the "black borders" invisible.

       #6d746b is the median ocean colour sampled from the exported map, so the
       area outside the tiles reads as more ocean instead of a grey void. This
       matters at minZoom, where the whole map fits on screen and there is
       necessarily empty space above and below it.
    */
    background: #6d746b;
    /* If you are using the texture: */
    /* background-image: url('assets/ocean.png'); */
    /* background-repeat: repeat; */
}

/* --- THE SIDEBAR ENCYCLOPEDIA --- */
#sidebar {
    position: fixed;
    top: 0;
    right: -450px; /* Hidden off-screen */
    width: 450px;  /* Nice wide reading area */
    height: 100%;
    background: #fdf6e3; /* Parchment color */
    box-shadow: -5px 0 15px rgba(0,0,0,0.5);
    transition: right 0.3s ease-in-out;
    z-index: 2000;
    box-sizing: border-box;

    /* The scroll lives on #sidebar-content, so the read-aloud bar can sit
       against the bottom edge instead of scrolling away with the prose. */
    display: flex;
    flex-direction: column;
}

#sidebar-content {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 30px;
    box-sizing: border-box;
}

#sidebar.active {
    right: 0; /* Slide in */
}

/* An entry the map cannot pan out from under a right-hand panel gets a
   left-hand one instead -- see MapFocus.preferredSide. Everything inside the
   panel is unchanged; only which edge it is docked to moves. */
#sidebar.side-left {
    right: auto;
    left: -450px;
    box-shadow: 5px 0 15px rgba(0,0,0,0.5);
    transition: left 0.3s ease-in-out;
}

#sidebar.side-left.active {
    left: 0;
}

#sidebar h2 {
    margin-top: 0;
    border-bottom: 2px solid #93403c;
    color: #2c3e50;
    padding-bottom: 10px;
}

/* Ribbon-style hero image (the entry's main `image` field, inserted as the first <img>) */
#sidebar img.ribbon {
    /* 1. FORCE FULL WIDTH (Ribbon Style) */
    display: block;
    width: calc(100% + 60px); /* Width of sidebar + left padding + right padding */
    max-width: none; /* Allow it to break the container */

    /* 2. PULL IT TO THE EDGES */
    /* We pull it -30px Up, Left, and Right to counteract the sidebar padding */
    margin: -30px -30px 20px -30px;

    /* 3. STYLING */
    border-bottom: 4px solid #93403c; /* A divider line below the art */
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);

    /* 4. INTERACTION */
    cursor: zoom-in; /* Tells user they can click to see details */
}

/* Inline images inside the entry body (e.g. maps, diagrams pasted into content HTML) */
#sidebar img:not(.ribbon) {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 16px auto;
    border: 2px solid #93403c;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    cursor: zoom-in;
}

#sidebar p {
    line-height: 1.6;
    color: #333;
    font-size: 16px;
}

/* Close Button (The X) */
.close-btn {
    /* Absolute inside the panel, not fixed to the window: it then rides along
       whichever edge the panel is docked to, and needs no off-screen parking
       trick of its own. #sidebar does not scroll, so it stays put over the
       ribbon image. */
    position: absolute;
    top: 10px;
    right: 30px;
    display: grid;
    place-items: center;

    /* Make it a circle */
    width: 32px;
    height: 32px;
    border-radius: 50%;

    /* The Contrast Fix: Semi-transparent parchment background */
    background: rgba(253, 246, 227, 0.85);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);

    box-sizing: border-box;

    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    
    cursor: pointer;
    color: #8b0000; /* Dark Red X */
    z-index: 2001; /* Sit on top of the ribbon image */
    transition: all 0.2s ease;
}

.close-x {
    display: block;
    /* The × glyph sits high in its font box; nudge it down to look centered */
    transform: translateY(-3px);
}

.close-btn:hover {
    background: #8b0000; /* Turn solid red on hover */
    color: #fdf6e3; /* Turn text parchment color */
    transform: scale(1.1);
}

/* Back: the close button's twin on the other corner. Same circle, same
   parchment, so the pair reads as one set of panel controls. Absolute inside
   the panel like .close-btn, so it rides whichever edge the panel docks to. */
#entry-back {
    position: absolute;
    top: 10px;
    left: 30px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    box-sizing: border-box;
    background: rgba(253, 246, 227, 0.85);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    font-family: inherit;
    font-size: 26px;
    font-weight: bold;
    line-height: 1;
    color: #8b0000;
    cursor: pointer;
    z-index: 2001;
    transition: all 0.2s ease;
}

/* The browser's own [hidden] rule is the same weight as the id-less display
   above but loses to it on order, so say it explicitly -- as #entry-bar does. */
#entry-back[hidden] { display: none; }

#entry-back:hover {
    background: #8b0000;
    color: #fdf6e3;
    transform: scale(1.1);
}

.entry-back-glyph {
    display: block;
    /* Matches .close-x: the glyph sits high in its font box. */
    transform: translateY(-2px);
}

/* --- CUSTOM MARKERS --- */
.marker-pin {
    border-radius: 50%;
    
    /* THE CHANGE: New Border Color */
    border: 2px solid #f6dfbf; 
    
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.9; 
    z-index: 500;
}

/* Hover Effect: Pop out and turn Gold */
.marker-pin:hover {
    transform: scale(1.2);
    opacity: 1.0;
    
    /* optional: Change border color on hover */
    border-color: #ffec00; 
    
    z-index: 1000 !important;
}

/* 1. REGION */
.type-region {
    background: #93403c; 
    width: 30px;
    height: 30px;
    border-width: 3px; /* Keep regions looking "heavy" */
}

/* 2. CITY */
.type-city {
    background: #d9a958;
    width: 22px;
    height: 22px;
}

/* 3. TOWN */
.type-town {
    background: #6A5D7B;
    width: 16px;
    height: 16px;
}

/* 4. POI */
.type-poi {
    background: #4A6D7C;
    width: 10px;
    height: 10px;
}

/* --- LEAFLET UI OVERRIDES --- */
.leaflet-control-layers {
    background: #fdf6e3 !important; 
    border: 2px solid #93403c !important; 
    border-radius: 4px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5) !important;
    color: #2c3e50;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    padding: 5px !important;
}
.leaflet-control-layers-expanded { padding: 10px !important; }
.leaflet-control-layers label { font-size: 14px; cursor: pointer; }

/* --- EDIT MODE --- */
#edit-toolbar {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2500;
    background: #fdf6e3;
    border: 2px solid #93403c;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    padding: 8px 14px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 14px;
    white-space: nowrap;
}
.edit-toolbar-label {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #93403c;
    border-right: 1px solid #93403c;
    padding-right: 12px;
}
.edit-type-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #93403c;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    color: #2c3e50;
    cursor: pointer;
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
    white-space: nowrap;
    line-height: 1;
    font-family: inherit;
}
.edit-type-btn:hover { background: #f6dfbf; }
.edit-type-btn.armed {
    background: #93403c;
    color: #fdf6e3;
}
.edit-type-swatch {
    display: inline-block;
    border-radius: 50%;
    border: 2px solid #f6dfbf;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
    flex-shrink: 0;
}
.edit-type-swatch.type-region { width: 14px; height: 14px; }
.edit-type-swatch.type-city   { width: 12px; height: 12px; }
.edit-type-swatch.type-town   { width: 10px; height: 10px; }
.edit-type-swatch.type-poi    { width: 8px;  height: 8px;  }
#edit-hint {
    font-size: 11px;
    color: #555;
    font-style: italic;
    border-left: 1px solid #ccc;
    padding-left: 12px;
    max-width: 260px;
    white-space: normal;
}

#edit-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 380px;
    height: 100%;
    background: #fdf6e3;
    border-right: 2px solid #93403c;
    box-shadow: 5px 0 15px rgba(0,0,0,0.4);
    z-index: 2400;
    overflow-y: auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #2c3e50;
}
.edit-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #93403c;
    color: #fdf6e3;
    font-weight: bold;
}
.edit-panel-close {
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}
.edit-panel-body {
    padding: 14px 16px;
}
.edit-panel-body label {
    display: block;
    font-size: 12px;
    font-weight: bold;
    margin: 10px 0 4px;
    color: #555;
}
.edit-panel-body label small {
    font-weight: normal;
    color: #888;
}
.edit-panel-body input[type="text"],
.edit-panel-body select,
.edit-panel-body textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-family: inherit;
    font-size: 13px;
    background: #fff;
}
.edit-panel-body textarea {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 12px;
    resize: vertical;
}
.edit-content-toolbar {
    margin: 4px 0;
}
.edit-content-toolbar button {
    padding: 4px 10px;
    border: 1px solid #93403c;
    border-radius: 3px;
    background: #fff;
    color: #2c3e50;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
}
.edit-content-toolbar button:hover { background: #f6dfbf; }
#edit-image-current {
    font-size: 11px;
    color: #888;
    margin-top: 4px;
    font-style: italic;
}
.edit-panel-actions {
    margin-top: 16px;
    display: flex;
    gap: 8px;
}
.edit-panel-actions button {
    padding: 8px 14px;
    border: 1px solid #93403c;
    border-radius: 4px;
    background: #fff;
    color: #2c3e50;
    font-weight: bold;
    cursor: pointer;
}
.edit-btn-primary { background: #93403c !important; color: #fdf6e3 !important; }
.edit-btn-danger  { background: #fff !important; color: #8b0000 !important; border-color: #8b0000 !important; }
.edit-panel-actions button:hover { opacity: 0.85; }
#edit-status {
    margin-top: 10px;
    font-size: 12px;
    min-height: 16px;
}

/* --- MOBILE OPTIMIZATIONS --- */
@media (max-width: 600px) {
    /* Make sidebar fill the whole screen on phones */
    #sidebar {
        width: 100%;
        right: -100%;
        /* `100%` can include browser chrome on mobile Safari. Dynamic viewport
           units keep the close and audio controls inside the visible screen. */
        height: 100dvh;
    }

    #sidebar-content {
        /* FIX: Prevent horizontal scrolling/swiping off-screen.
           The scroll container is #sidebar-content, so the rule belongs here
           and not on #sidebar. */
        overflow-x: hidden;

        /* FIX: Reduce padding to give text more room on small screens */
        padding: 20px;
    }
    
    /* Make Close Button bigger for thumbs */
    .close-btn {
        width: 40px;
        height: 40px;
        font-size: 28px;
        
        /* Adjust position to match new 20px padding */
        top: 10px;
        right: 10px;
    }

    /* Back keeps pace with its twin. */
    #entry-back {
        width: 40px;
        height: 40px;
        font-size: 30px;
        top: 10px;
        left: 10px;
    }
    
    /* Adjust ribbon images to match new padding.
       This has to be `img.ribbon`, not `img`: the desktop rule above is
       `#sidebar img.ribbon`, which outranks a plain `#sidebar img` even from
       inside a media query, so a less specific selector here loses and the
       ribbon keeps its 30px desktop margins -- overflowing a phone by 10px
       each side. */
    #sidebar img.ribbon {
        /* Recalculate width: 100% + Left Pad (20) + Right Pad (20) */
        width: calc(100% + 40px);

        /* Update negative margins to pull to the new edge */
        margin: -20px -20px 20px -20px;
    }

    /* Keep the map actions as proper thumb-sized targets. The layer switcher
       moves below them in the rule near the map controls, where Leaflet's
       positioning is defined. */
    .map-button, .map-menu-item {
        min-height: 44px;
        box-sizing: border-box;
        padding: 8px 11px;
    }

}
/* --- GENERATED ENTRY CONTENT ---------------------------------------------
   Markup produced by scripts/build-wiki.mjs. The older hand-written entries
   carry their colours inline; these rules give the generated prose the same
   look without repeating a style attribute on every element. */

.entry-body {
    line-height: 1.6;
    color: #333;
    font-size: 16px;
}

.entry-body .entry-section {
    color: #8B0000;
    font-size: 1.15em;
    margin: 24px 0 6px;
}

.entry-epigraph {
    margin: 0 0 20px;
    padding: 0 0 0 14px;
    border-left: 3px solid #93403c;
}
.entry-epigraph p {
    font-style: italic;
    color: #555 !important;
    margin: 0 0 6px;
}
.entry-epigraph .entry-cite,
.entry-epigraph .entry-tagline {
    font-style: normal;
    font-size: 0.85em;
    font-weight: bold;
    color: #7a6a55 !important;
}
.entry-epigraph .entry-cite::before { content: "\2014\00a0"; }

.entry-rumor { margin: 10px 0; }
.entry-rumor strong { color: #8B0000; }

.entry-table-wrap {
    /* A four-column guild roster is wider than a 450px sidebar; let the table
       scroll inside its own box rather than pushing the page sideways. */
    overflow-x: auto;
    margin: 16px 0;
}
.entry-table {
    border-collapse: collapse;
    font-size: 0.88em;
    min-width: 100%;
}
.entry-table th,
.entry-table td {
    border: 1px solid #d8cbb0;
    padding: 6px 9px;
    text-align: left;
    vertical-align: top;
}
.entry-table th {
    background: #efe3c8;
    color: #2c3e50;
}
.entry-table tbody tr:nth-child(even) { background: rgba(147, 64, 60, 0.05); }

.entry-appendix {
    margin: 1.5rem 0 0;
    border-top: 1px solid rgba(147, 64, 60, 0.35);
    padding-top: 0.7rem;
}

.entry-appendix summary {
    cursor: pointer;
    color: #8b0000;
    font-weight: 700;
}

.entry-appendix-body { margin-top: 0.8rem; }

/* Images imported from the .docx (scripts/import-docx-images.py). width and
   height are on the tag so the text does not reflow as they load. */
.entry-figure {
    margin: 18px 0;
}
.entry-figure img {
    display: block;
    /* Never upscale. The width/height attributes now carry the size the .docx
       places the picture at, not the size of the file, so this scales down
       when the column is narrower and leaves it alone when it is not. */
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border: 2px solid #93403c;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    cursor: zoom-in;
    background: #fdf6e3;
}

/* Sigils and runes -- marked by the importer as pictures the document sets
   well inside its column and no taller than they are wide.
   The .docx places them between 131px and 363px, which standardises them
   against each other but still reads as large here: its column is 554px and
   the reading panel's is nearer 390px, so the same picture occupies far more
   of the page. The cap is what makes a symbol look like a symbol; the ones
   the document already sets smaller than it keep their own size. */
.entry-symbol img {
    max-width: min(100%, 220px);
    border-width: 1px;
    box-shadow: none;
    background: transparent;
}

/* --- CROSS-LINKS --- */
a.wiki-link {
    color: #93403c;
    text-decoration: none;
    border-bottom: 1px dotted #93403c;
    cursor: pointer;
}
a.wiki-link:hover,
a.wiki-link:focus {
    background: rgba(147, 64, 60, 0.12);
    border-bottom-style: solid;
}

/* --- READ-ALONG HIGHLIGHT --- */
.seg-active {
    background: rgba(227, 181, 77, 0.32);
    border-radius: 2px;
    box-shadow: inset 0 -2px 0 rgba(159, 89, 32, 0.62);
    transition: background-color 160ms ease, box-shadow 160ms ease;
}
h2.seg-active { box-shadow: none; }

/* --- ENTRY BAR (back + read aloud) --- */
#entry-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #f2e7cf;
    border-top: 2px solid #93403c;
    flex-wrap: wrap;
    /* Anchors .narration-status, which floats above the bar instead of
       taking a row inside it. */
    position: relative;
}

/* The browser's built-in `[hidden] { display: none }` has lower specificity
   than `#entry-bar`, so declare it explicitly. Without this, map-only entries
   that have no narration still show an enabled-looking stale player. */
#entry-bar[hidden] { display: none; }
/* The controls, wrapped so the whole set can fold away and leave the toggle
   behind. */
.entry-bar-controls {
    /* Basis 0, not auto: with auto the controls ask for their natural width,
       take the whole line, and push the toggle onto a second row -- undoing
       the very thing that got this bar down to one. At 0 they take what is
       left after the toggle, which is more than they need. */
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
#entry-bar.is-collapsed .entry-bar-controls { display: none; }

/* Folded away means gone, not shorter. The bar collapses to no height at all
   and the button floats up out of it into the corner of the reading area --
   the same trick the close and back controls use over the ribbon image. In
   the sidebar that is the bottom corner of the panel; in the wiki the bar
   sits between the prose and the chapter pager, so zero height puts the
   button just above the pager without having to know how tall it is. */
#entry-bar.is-collapsed {
    height: 0;
    min-height: 0;
    padding: 0 14px;
    border-top: none;
    background: transparent;
    overflow: visible;
    justify-content: flex-end;
    align-items: flex-start;
}
#entry-bar.is-collapsed .narration-toggle {
    position: relative;
    top: -44px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(253, 246, 227, 0.9);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 5;
}
#entry-bar.is-collapsed .narration-toggle:hover {
    background: #93403c;
    color: #fdf6e3;
}

.narration-toggle {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid #93403c;
    border-radius: 4px;
    background: #fff;
    color: #93403c;
    cursor: pointer;
    transition: all 0.2s ease;
}
.narration-toggle svg { width: 16px; height: 16px; }
.narration-toggle:hover { background: #f6dfbf; }
/* Filled while the player is open, so the button reads as a state and not
   merely as another control. */
.narration-toggle[aria-expanded="true"] { background: #93403c; color: #fdf6e3; }

.entry-bar-btn {
    padding: 6px 10px;
    border: 1px solid #93403c;
    border-radius: 4px;
    background: #fff;
    color: #2c3e50;
    font-family: inherit;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.entry-bar-btn:hover:not(:disabled) { background: #f6dfbf; }
.entry-bar-btn:disabled { opacity: 0.4; cursor: default; }
.narration-play { min-width: 40px; font-size: 15px; }
.narration-jump { min-width: 32px; font-size: 18px; line-height: 1; }
.narration-play.is-playing { background: #93403c; color: #fdf6e3; }
#narration-seek { flex: 1 1 90px; min-width: 80px; accent-color: #93403c; }
.narration-time {
    font-size: 11px;
    color: #6b5c46;
    font-variant-numeric: tabular-nums;
    /* Without these the flex line squeezes this to ~50px and "0:00 / --:--"
       breaks across two lines, taking the speed control down with it. It is
       the one item here whose width is known, so it should never be the one
       that gives. */
    white-space: nowrap;
    flex: 0 0 auto;
}
/* The button costs a third of what the slider did, which is what let this row
   collapse to one line. The slider still exists -- it opens above the button,
   where it has room to be the vertical control a rate wants to be. */
.narration-speed-wrap { position: relative; display: inline-flex; }
.narration-speed {
    /* Fixed, not min-: "1x" and "1.6x" are different widths, and letting the
       button size to its label made the whole row shuffle every time the rate
       crossed a decimal. Wide enough for the longest value it can show. */
    width: 52px;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.narration-speed[aria-expanded="true"] { background: #93403c; color: #fdf6e3; }

.narration-speed-popover {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 8px;
    background: #fdf6e3;
    border: 1px solid #93403c;
    border-radius: 5px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}
.narration-speed-popover[hidden] { display: none; }
#narration-speed-value {
    font-size: 11px;
    font-weight: bold;
    color: #6b5c46;
    font-variant-numeric: tabular-nums;
}
#narration-speed-range {
    /* Bottom-to-top. `writing-mode` plus rtl is the standard spelling; the
       -webkit rule is what older WebKit understood, and is ignored where the
       standard one lands. */
    writing-mode: vertical-lr;
    direction: rtl;
    -webkit-appearance: slider-vertical;
    width: 20px;
    height: 104px;
    margin: 0;
    accent-color: #93403c;
    cursor: pointer;
}
/* Lifted out of the bar's flex flow. As a full-width flex item it took a row
   of its own the instant it had text, growing the bar and shoving the seek
   slider and every button upward -- a visible jolt for a message that is
   usually gone again immediately. Floating just above the bar, it can appear
   and go without anything else moving. */
.narration-status {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 100%;
    margin-bottom: 6px;
    padding: 6px 9px;
    background: #f2e7cf;
    border: 1px solid #d8cbb0;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    font-size: 11px;
    line-height: 1.4;
    color: #6b5c46;
}
.narration-status:empty { display: none; }
.narration-status.is-error { color: #8b0000; font-weight: bold; }

/* --- MAP FOCUS --- */
/* Selection is drawn in the map's own parchment rather than a saturated
   yellow. The map is a muted painting, and a pure hue sits on top of it
   instead of in it. A parchment ring set off from the pin, with a hairline
   so it still reads on pale ground, says "this one" without shouting. */
.marker-pin.marker-active {
    opacity: 1;
    border-color: #fdf6e3;
    box-shadow:
        0 0 0 3px rgba(253, 246, 227, 0.7),
        0 0 0 4px rgba(44, 62, 80, 0.3),
        0 2px 5px rgba(0, 0, 0, 0.35);
}

/* The pulse is a real element with its own fade-out, so turning animations
   off leaves a visible ring rather than nothing at all. */
.map-pulse {
    border-radius: 50%;
    border: 2px solid rgba(253, 246, 227, 0.85);
    background: rgba(253, 246, 227, 0.08);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
    animation: map-pulse 1.6s ease-out forwards;
    pointer-events: none;
}
.map-pulse.is-static { animation: none; opacity: 0.6; }
/* Opens closer to its final size than it used to: a ring that expands from
   almost nothing reads as an effect, one that just settles reads as a place. */
@keyframes map-pulse {
    0%   { transform: scale(0.6); opacity: 0.7; }
    100% { transform: scale(1);   opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .map-pulse { animation: none; opacity: 0.6; }
}

.region-outline { pointer-events: none; }

/* Photoshop's Regions group uses Linear Burn. CSS has no exact equivalent;
   Multiply gives the same restrained darkening for this pale overlay source. */
.region-photoshop-overlay { mix-blend-mode: multiply; }

/* --- MAP BUTTONS --- */
.map-buttons {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1200;
    display: flex;
    gap: 8px;
}
/* The sprite itself is never drawn; only its symbols are, through <use>. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.map-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px 8px 11px;
    background: #fdf6e3;
    border: 2px solid #93403c;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
    font-family: inherit;
    font-size: 13px;
    font-weight: bold;
    color: #2c3e50;
    cursor: pointer;
    transition: all 0.2s ease;
}
/* The mark is the red of the map's own labels; the word stays ink-coloured,
   so the icon leads and the label follows. */
.map-button-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: #93403c;
}
.map-button:hover { background: #f6dfbf; }
.map-button[hidden] { display:none; }
#offline-dialog { position:fixed; inset:0; z-index:5500; display:grid; place-items:center; padding:20px; background:rgba(20,16,10,.55); }
#offline-dialog[hidden] { display:none; }
.offline-card { position:relative; width:min(440px,100%); box-sizing:border-box; padding:24px; border:2px solid #93403c; border-radius:10px; background:#fdf6e3; box-shadow:0 16px 48px rgba(0,0,0,.5); color:#2c3e50; }
.offline-message { padding-right:34px; font-size:18px; line-height:1.45; }.offline-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:22px; }.offline-size-label { margin:0; color:#6b5c46; font-size:14px; white-space:nowrap; }.offline-size-label strong { color:#2c3e50; font-variant-numeric:tabular-nums; }.offline-card #offline-progress { margin:0 0 16px; color:#6b5c46; font-size:14px; }.offline-actions { display:flex; align-items:center; gap:8px; }.offline-card button { padding:8px 13px; border:1px solid #93403c; border-radius:5px; background:#93403c; color:#fdf6e3; font:inherit; font-weight:bold; cursor:pointer; }.offline-card #offline-cancel { background:transparent; color:#6b5c46; font-weight:normal; border-color:#b9aa8c; }.offline-card .offline-close { position:absolute; top:18px; right:18px; display:grid; place-items:center; width:28px; height:28px; padding:0; border:0; background:transparent; color:#8b0000; font-size:24px; line-height:1; }.offline-card .offline-close span { display:block; transform:translateY(-2px); }
@media (max-width: 420px) { .offline-bottom { align-items:flex-start; flex-direction:column; gap:14px; }.offline-actions { align-self:flex-end; } }
.map-button:hover .map-button-icon { color: #8b0000; }
body.edit-mode-active .map-buttons { display: none; }

/* The burger carries no word, so it drops the label's extra right padding
   and comes out square beside Search. */
.map-menu { position: relative; }
.map-menu-toggle { padding: 8px 10px; }
.map-menu-toggle[aria-expanded="true"] { background: #f6dfbf; }
.map-menu-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    display: flex;
    flex-direction: column;
    width: max-content;
    padding: 4px;
    background: #fdf6e3;
    border: 2px solid #93403c;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.map-menu-panel[hidden] { display: none; }
.map-menu-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px 9px 10px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: bold;
    color: #2c3e50;
    text-align: left;
    cursor: pointer;
}
.map-menu-item[hidden] { display: none; }
.map-menu-item:hover, .map-menu-item:focus-visible { background: #f6dfbf; }
.map-menu-item:hover .map-button-icon { color: #8b0000; }

@media (max-width: 600px) {
    /* Leaflet starts this control in the top-right corner, which is also where
       the last map action ends on a phone. Giving it its own row prevents the
       labels and radio buttons from sitting on top of each other. */
    .leaflet-top.leaflet-right { top: 54px; }
}

/* These stay pinned to their corner and let a left-docked panel cover them,
   exactly as the layer control lets a right-docked one cover it. A control
   that slides out of the way draws more attention than one that simply goes
   behind the thing you opened. */

/* --- BUILD ERRORS --- */
/* Only ever visible when the generated data and the map metadata disagree. */
#build-error {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6000;
    background: #8b0000;
    color: #fdf6e3;
    font-size: 13px;
    padding: 10px 14px;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.5);
}

/* --- THE WIKI AND THE BOOK OVERLAYS --- */
/* The book reuses the wiki's frame and header so the two read as one pair. */
#reader,
#book {
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: rgba(20, 16, 10, 0.6);
    display: flex;
    padding: 24px;
    box-sizing: border-box;
}
#reader[hidden], #book[hidden] { display: none; }

.book-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.book-open {
    color: #fdf6e3;
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}
.book-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}
.book-frame {
    flex: 1 1 auto;
    border: 0;
    background: #f6ecd6;
}
.book-missing {
    margin: auto;
    padding: 40px;
    color: #6b5c46;
    font-size: 14px;
    text-align: center;
}
.reader-frame {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    max-width: 1100px;
    margin: 0 auto;
    background: #fdf6e3;
    border: 2px solid #93403c;
    box-shadow: 0 6px 30px rgba(0,0,0,0.6);
    overflow: hidden;
}
.reader-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    background: #93403c;
    color: #fdf6e3;
}
.reader-head h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: 0.5px; }
.reader-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.reader-contents-toggle {
    display: none;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid rgba(253, 246, 227, 0.6);
    border-radius: 4px;
    color: #fdf6e3;
    font-family: inherit;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
}
.reader-contents-toggle:hover { background: rgba(253, 246, 227, 0.2); }
.reader-close {
    background: transparent;
    border: 1px solid rgba(253, 246, 227, 0.6);
    border-radius: 4px;
    color: #fdf6e3;
    font-size: 20px;
    line-height: 1;
    padding: 4px 10px;
    cursor: pointer;
}
.reader-close:hover { background: rgba(253, 246, 227, 0.2); }
.reader-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}
.reader-toc {
    flex: 0 0 240px;
    overflow-y: auto;
    border-right: 2px solid #d8cbb0;
    background: #f6ecd6;
}
.reader-toc ol { list-style: none; margin: 0; padding: 10px 0; }
.reader-toc-part {
    padding: 14px 16px 4px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #93403c;
}
.reader-toc-link {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 16px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 14px;
    color: #2c3e50;
    cursor: pointer;
}
.reader-toc-link:hover,
.reader-toc-link:focus { background: #efe0c0; }
.reader-toc-link.is-current {
    background: #93403c;
    color: #fdf6e3;
    font-weight: bold;
}
.reader-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}
.reader-page {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 26px 34px 60px;
}
.reader-loading {
    color: #6b5c46;
    font-style: italic;
}

/* Paging between chapters, so 33 of them can be read in order rather than
   selected one at a time from the contents. */
.reader-pager {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 10px 34px;
    background: #f2e7cf;
    border-top: 2px solid #d8cbb0;
}
.reader-pager[hidden] { display: none; }
.reader-pager-btn {
    flex: 0 1 auto;
    max-width: 48%;
    padding: 7px 12px;
    border: 1px solid #93403c;
    border-radius: 4px;
    background: #fff;
    color: #2c3e50;
    font-family: inherit;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.reader-pager-btn:hover:not(:disabled) { background: #f6dfbf; }
.reader-pager-btn:disabled { opacity: 0.35; cursor: default; }
.reader-pager-btn:last-child { margin-left: auto; }
.reader-page:focus { outline: none; }
/* Built like the sidebar's .entry-head, and for the same reason: the chapter
   title never fills the line, so the crossing costs no height. */
.reader-head-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid #93403c;
}
.reader-page h2 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: #2c3e50;
    border-bottom: none;      /* the row carries the rule */
}

/* What is left of the Preface's title page once the name comes off it: a
   tagline, sitting under the chapter title as a subtitle rather than as a
   quotation attributed to nobody. */
.reader-subtitle {
    margin: -8px 0 20px;
    color: #7a6a55;
    font-size: 15px;
    font-style: italic;
}

/* The mirror of .entry-wiki-link: same square, same size, opposite direction. */
.reader-jump {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #93403c;
    border-radius: 4px;
    background: #fff;
    color: #93403c;
    cursor: pointer;
    transition: all 0.2s ease;
}
.reader-jump svg { width: 17px; height: 17px; }
.reader-jump:hover { background: #93403c; color: #fdf6e3; }

@media (max-width: 700px) {
    #reader { padding: 0; }
    .reader-body { flex-direction: column; }
    .reader-contents-toggle { display: block; }
    .reader-toc {
        display: none;
        flex: 0 0 auto;
        max-height: 42dvh;
        border-right: none;
        border-bottom: 2px solid #d8cbb0;
    }
    .reader-frame.toc-open .reader-toc { display: block; }
    .reader-page { padding: 18px; }
    .reader-pager { padding: 8px 12px; }
    .reader-pager-btn { font-size: 11px; }
}

/* --- EDIT MODE: REGION BORDERS --- */
#edit-region-panel {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2500;
    background: #fdf6e3;
    border: 2px solid #93403c;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #2c3e50;
}
#edit-region-panel select {
    padding: 5px 8px;
    border: 1px solid #93403c;
    border-radius: 3px;
    font-family: inherit;
    font-size: 12px;
    background: #fff;
}
#edit-region-panel button {
    padding: 6px 12px;
    border: 1px solid #93403c;
    border-radius: 4px;
    background: #fff;
    color: #2c3e50;
    font-family: inherit;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}
#edit-region-panel button:hover:not(:disabled) { background: #f6dfbf; }
#edit-region-panel button:disabled { opacity: 0.45; cursor: default; }
#edit-region-status { font-style: italic; color: #6b5c46; max-width: 300px; }
.region-vertex {
    background: #ffec00;
    border: 2px solid #93403c;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0,0,0,0.6);
    cursor: move;
}

/* --- THE LIGHTBOX --- */
/* Was a div with inline styles and a click handler. It is a modal like the
   Wiki and the Book, so it is built like them: Escape closes it, focus goes
   in and comes back, and the backdrop is a click target but the picture is
   not -- a mis-drag while studying a map should not dismiss it. */
#lightbox {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.9);
    cursor: zoom-out;
}
#lightbox[hidden] { display: none; }
#lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: default;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.6);
}
.lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    z-index: 1;
    padding: 4px 12px;
    background: transparent;
    border: 1px solid rgba(253, 246, 227, 0.6);
    border-radius: 4px;
    color: #fdf6e3;
    font-family: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.lightbox-close:hover { background: rgba(253, 246, 227, 0.2); }

/* --- SEARCH --- */
/* Anchored near the button that opens it rather than centred, so the map stays
   the thing on screen and a result can be read against it. */
#search {
    position: fixed;
    inset: 0;
    /* Above the Wiki and the Book (4000), below the lightbox (5000) and the
       build banner (6000): search is reachable from inside the wiki, and
       choosing a result closes it. Stated rather than left to DOM order. */
    z-index: 4500;
    background: rgba(20, 22, 20, 0.45);
}
#search[hidden] { display: none; }
.search-panel {
    position: absolute;
    top: 10px;
    left: 10px;
    width: min(460px, calc(100vw - 20px));
    max-height: calc(100vh - 20px);
    display: flex;
    flex-direction: column;
    background: #fdf6e3;
    border: 2px solid #93403c;
    border-radius: 4px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}
.search-field {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #93403c;
}
.search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid #d8cbb0;
    border-radius: 3px;
    background: #fdf6e3;
    color: #2c3e50;
    font-family: inherit;
    font-size: 14px;
}
.search-input:focus { outline: 2px solid #f6dfbf; outline-offset: 1px; }
/* The panel has its own close button; the browser's clear "x" doubles it. */
.search-input::-webkit-search-cancel-button { display: none; }
.search-close {
    flex: 0 0 auto;
    padding: 3px 10px;
    background: transparent;
    border: 1px solid rgba(253, 246, 227, 0.6);
    border-radius: 4px;
    color: #fdf6e3;
    font-family: inherit;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
}
.search-close:hover { background: rgba(253, 246, 227, 0.2); }
.search-hint {
    flex: 0 0 auto;
    margin: 0;
    padding: 7px 14px;
    background: #f2e7cf;
    border-bottom: 1px solid #d8cbb0;
    color: #6b5c46;
    font-size: 11px;
}
/* With nothing typed there is nothing to say, and the empty strip would
   still show its padding and its rule. */
.search-hint:empty { display: none; }
.search-results {
    flex: 1 1 auto;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0;
}
.search-result {
    display: block;
    padding: 9px 14px;
    border-bottom: 1px solid #e8dcc2;
    cursor: pointer;
}
.search-result:last-child { border-bottom: none; }
.search-result:hover,
.search-result.is-active { background: #f6dfbf; }
.search-result-title {
    display: block;
    color: #2c3e50;
    font-size: 14px;
    font-weight: bold;
}
.search-result-type {
    color: #93403c;
    font-size: 11px;
    font-weight: normal;
    font-style: italic;
}
.search-result-snippet {
    display: block;
    margin-top: 2px;
    color: #6b5c46;
    font-size: 12px;
    line-height: 1.45;
}
.search-result-snippet mark {
    background: #f0d089;
    color: #2c3e50;
    padding: 0 1px;
    border-radius: 2px;
}

@media (max-width: 700px) {
    .search-panel {
        top: 0;
        left: 0;
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        border-width: 0 0 2px 0;
    }

    #lightbox { padding: 16px; }
}

/* --- ENTRY SWAP --- */
/* Following a link replaces every word in an already-open panel in one frame.
   The fade is short enough not to be a wait and long enough to read as a
   change of page rather than a glitch. */
@keyframes entry-enter {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
#sidebar-content.is-entering { animation: entry-enter 240ms ease-out; }

@media (prefers-reduced-motion: reduce) {
    #sidebar-content.is-entering { animation: none; }
}

/* Title and crossing share a line. The heading rarely fills the panel, so the
   button costs no vertical space at all -- where a full-width one under it
   pushed every paragraph down for something used once. */
.entry-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #93403c;
}
/* Has to be `#sidebar .entry-head h2`, not `.entry-head h2`: the base rule is
   `#sidebar h2`, and an id beats a class however much later this sits in the
   file. Without the extra weight the heading keeps its own border and the row
   draws a second one under it -- two rules, ten pixels apart. Same trap as
   `#sidebar img.ribbon` further down. */
#sidebar .entry-head h2 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border-bottom: none;      /* the row carries the rule now */
}

.entry-wiki-link {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #93403c;
    border-radius: 4px;
    background: #fff;
    color: #93403c;
    cursor: pointer;
    transition: all 0.2s ease;
}
.entry-wiki-link svg { width: 17px; height: 17px; }
.entry-wiki-link:hover { background: #93403c; color: #fdf6e3; }

/* This sits after the base player rules so the phone arrangement wins the
   cascade (the sidebar's phone rules can live above because their base rules
   are earlier in the file). */
@media (max-width: 600px) {
    .map-button { padding: 8px 11px; }

    #entry-bar {
        flex-wrap: nowrap;
        gap: 6px;
        padding: 8px 12px;
    }
    .entry-bar-controls {
        display: grid;
        grid-template-columns: 32px 40px 32px minmax(64px, 1fr) 52px;
        grid-template-rows: 36px 16px;
        align-items: center;
        gap: 3px 6px;
    }
    .entry-bar-btn { padding: 6px 4px; }
    .narration-play { min-width: 40px; }
    .narration-jump { min-width: 32px; }
    #narration-seek { min-width: 0; }
    .narration-time {
        grid-column: 4 / 6;
        grid-row: 2;
        align-self: start;
    }
    .narration-toggle { width: 36px; height: 36px; }
}