/* Realm First house style: ink panels, gold rules, filigree corners, the KingdomCome face. */
@font-face { font-family: "KingdomCome"; src: url("../fonts/KingdomCome-Regular.ttf"); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: "KingdomCome"; src: url("../fonts/KingdomCome-Bold.ttf"); font-weight: bold; font-style: normal; font-display: swap; }
@font-face { font-family: "KingdomCome"; src: url("../fonts/KingdomCome-Italic.ttf"); font-weight: normal; font-style: italic; font-display: swap; }

:root {
    --ink:    rgba(14, 11, 6, 0.9);
    --ink-2:  rgba(10, 8, 4, 0.86);
    --gold-d: #8a6d1f;
    --gold:   #d4af37;
    --gold-l: #f6e3a1;
    --text:   #f4ede0;
    --dim:    #c2b393;
    --faint:  #7a6c52;
    --red:    #b8282a;
    --font: "KingdomCome", "Palatino Linotype", "Book Antiqua", Georgia, serif;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    --panel-w: 320px;
    /** 1 at 1080p and below, more on larger screens; set by map.js. */
    --ui: 1;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0c0a06; }
body { font-family: var(--font); color: var(--text); text-shadow: var(--shadow); }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; text-shadow: inherit; padding: 0; }

/* ---------- the map ---------- */
#map { position: fixed; inset: 0; background: #0c0a06; }
.leaflet-container { font-family: var(--font); background: #0c0a06; }
.leaflet-container a { color: var(--gold-l); }

/* Between two snapshots a soul slides rather than jumps; never while the map itself zooms. */
.leaflet-marker-icon.soul { transition: transform 2.8s linear; }
.zooming .leaflet-marker-icon.soul { transition: none; }

/* Larger screens: the furniture grows with them, as the game's own panels do. */
.plaque, .panel, .panel-toggle, .coords, .leaflet-control-zoom { zoom: var(--ui); }

/* ---------- the frame: a 1px dark-gold border, an inset double rule, a soft shadow ---------- */
.plaque, .panel, .coords, .panel-toggle, .leaflet-control-zoom {
    background: linear-gradient(to bottom, var(--ink), var(--ink-2));
    border: 1px solid var(--gold-d);
    box-shadow: inset 0 0 0 4px rgba(12, 9, 5, 0.9), inset 0 0 0 5px rgba(212, 175, 55, 0.35), 0 0 24px rgba(0, 0, 0, 0.7);
}
.corner { position: absolute; width: 64px; height: 64px; overflow: visible; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.8)); }
.corner.tl { top: -9px; left: -9px; }
.corner.tr { top: -9px; right: -9px; transform: scaleX(-1); }
.corner.bl { bottom: -9px; left: -9px; transform: scaleY(-1); }
.corner.br { bottom: -9px; right: -9px; transform: scale(-1, -1); }

/* ---------- the title plaque ---------- */
.plaque {
    position: fixed; top: 18px; left: 18px; z-index: 1000; display: flex; align-items: center; gap: 14px;
    padding: 14px 26px 14px 20px; pointer-events: none;
}
.plaque .emblem { width: 34px; height: 40px; flex: 0 0 auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8)); }
.crest { display: block; font-size: 14px; font-style: italic; letter-spacing: .08em; color: var(--dim); }
h1 {
    margin: 0; font: bold 24px/1.1 var(--font); letter-spacing: .14em; text-transform: uppercase;
    background: linear-gradient(to bottom, var(--gold-l) 0%, var(--gold) 48%, #a07d1c 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.9));
}

/* ---------- the ledger on the right ---------- */
.panel {
    position: fixed; top: 18px; right: 18px; bottom: 18px; z-index: 1000; width: var(--panel-w);
    display: flex; flex-direction: column; padding: 18px 20px 14px;
    transition: transform .3s ease, opacity .3s ease;
}
.panel.closed { transform: translateX(calc(100% + 40px)); opacity: 0; pointer-events: none; }
.panel-toggle {
    position: fixed; top: 18px; right: calc(var(--panel-w) + 30px); z-index: 1001; width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center; color: var(--gold-l); transition: right .3s ease;
}
.panel-toggle svg { width: 22px; height: 22px; }
.panel-toggle.closed { right: 18px; }

.flourish { display: block; width: 240px; height: 21px; margin: 2px auto 4px; overflow: visible; }

.search { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 0 10px; height: 36px; border: 1px solid var(--gold-d); background: rgba(6, 5, 3, 0.85); box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8); color: var(--dim); }
.search:focus-within { border-color: var(--gold); }
.search svg { width: 16px; height: 16px; flex: 0 0 auto; }
.search input { flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: none; font: 16px var(--font); color: var(--text); caret-color: var(--gold); }
.search input::placeholder { color: var(--faint); font-style: italic; }

h3 {
    display: flex; align-items: center; gap: 10px; margin: 16px 0 9px;
    font-size: 12px; font-weight: bold; letter-spacing: .3em; text-transform: uppercase; color: var(--gold);
}
h3::before, h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.55)); }
h3::after { background: linear-gradient(to left, transparent, rgba(212, 175, 55, 0.55)); }
h3 .gem { width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); flex: 0 0 auto; }

.layers { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
/* An odd one out takes the whole last row. */
.layer:last-child:nth-child(odd) { grid-column: span 2; justify-content: center; }
.layer {
    display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
    border: 1px solid var(--gold-d); background: rgba(6, 5, 3, 0.7); transition: color .2s, background .2s, border-color .2s;
}
.layer:hover { color: var(--text); background: rgba(212, 175, 55, 0.1); }
.layer .tick { width: 9px; height: 9px; border: 1px solid var(--gold-d); transform: rotate(45deg); flex: 0 0 auto; }
.layer.on { color: var(--gold-l); border-color: var(--gold); background: rgba(212, 175, 55, 0.16); }
.layer.on .tick { background: var(--gold); border-color: var(--gold); }

.list { list-style: none; margin: 0; padding: 0 4px 0 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.list::-webkit-scrollbar { width: 5px; }
.list::-webkit-scrollbar-thumb { background: var(--gold-d); }
.list li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-bottom: 1px solid rgba(138, 109, 31, 0.22); cursor: pointer; border-left: 2px solid transparent; }
.list li:hover { background: rgba(212, 175, 55, 0.07); border-left-color: rgba(212, 175, 55, 0.5); }
.list li .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--gold); box-shadow: 0 0 6px rgba(246, 227, 161, 0.8); }
.list li .dot.fallen { background: #6d6252; box-shadow: none; }
.list li .dot.place { border-radius: 0; transform: rotate(45deg); width: 8px; height: 8px; background: none; border: 1px solid var(--gold); box-shadow: none; }
.list li .name { flex: 1; min-width: 0; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list li .meta { font-size: 12px; font-style: italic; color: var(--faint); white-space: nowrap; }
.list .empty { padding: 18px 6px; text-align: center; font-style: italic; color: var(--dim); cursor: default; border: none; }
.list .empty:hover { background: none; }

.panel footer { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(138, 109, 31, 0.3); }
.status { display: block; font-size: 14px; font-style: italic; color: var(--dim); }
.status.live::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #9fd27a; box-shadow: 0 0 6px #9fd27a; vertical-align: 1px; }
.status.stale { color: #e8a07a; }

/* ---------- the coordinates under the cursor ---------- */
.coords { position: fixed; left: 18px; bottom: 18px; z-index: 1000; padding: 7px 14px; font-size: 14px; letter-spacing: .08em; color: var(--dim); pointer-events: none; min-width: 170px; }
.coords:empty { display: none; }

/* ---------- Leaflet's own controls, in the house style ---------- */
/* Under the title plaque, which grows with the screen. */
.leaflet-top.leaflet-left { top: calc(108px * var(--ui)); left: calc(8px * var(--ui)); }
.leaflet-control-zoom.leaflet-bar { border: 1px solid var(--gold-d); border-radius: 0; }
.leaflet-control-zoom a, .leaflet-control-zoom a:hover {
    width: 38px; height: 38px; line-height: 36px; font: bold 22px/36px var(--font); color: var(--gold-l);
    background: transparent; border-bottom: 1px solid rgba(138, 109, 31, 0.4); border-radius: 0 !important;
}
.leaflet-control-zoom a:hover { background: rgba(212, 175, 55, 0.14); }
.leaflet-control-zoom a.leaflet-disabled { color: var(--faint); background: transparent; }
.leaflet-control-attribution { background: rgba(10, 8, 4, 0.75) !important; color: var(--faint); font: 11px var(--font); }
.leaflet-control-attribution a { color: var(--dim); }

/* ---------- places: the mark centred on its spot, the name under it ---------- */
.place-icon { position: relative; width: 0; height: 0; pointer-events: auto; --s: 30px; --fs: 17px; }
.place-icon.town { --s: 42px; --fs: 22px; }
.place-icon.village { --s: 34px; --fs: 18px; }
.place-icon .glyph { position: absolute; left: 0; top: 0; width: calc(var(--s) * var(--ui)); height: calc(var(--s) * var(--ui)); transform: translate(-50%, -50%); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.6)); }
.place-icon .glyph svg { display: block; width: 100%; height: 100%; }
.place-icon.other .glyph { transform: translate(-50%, -92%); }
.place-icon .label {
    position: absolute; left: 0; top: calc(var(--s) * var(--ui) * 0.5 + 1px); transform: translateX(-50%); white-space: nowrap;
    font-size: calc(var(--fs) * var(--ui)); line-height: 1.1; color: var(--text);
    text-shadow: 0 0 3px #000, 0 0 6px #000, 0 0 10px rgba(0, 0, 0, 0.8), 0 1px 2px #000;
}
.place-icon.town .label { font-weight: bold; letter-spacing: .04em; color: var(--gold-l); }
.place-icon.other .label { top: calc(4px * var(--ui)); font-style: italic; color: var(--dim); }
.hide-place-labels .place-icon.village .label, .hide-place-labels .place-icon.other .label { display: none; }

/* ---------- souls ---------- */
.soul-icon { position: relative; --p: 14px; }
.soul-icon .pip {
    position: absolute; left: 0; top: 0; width: calc(var(--p) * var(--ui)); height: calc(var(--p) * var(--ui)); transform: translate(-50%, -50%); border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #fff6d0, var(--gold) 55%, #8a6d1f);
    box-shadow: 0 0 0 2px rgba(12, 9, 5, 0.9), 0 0 10px 2px rgba(246, 227, 161, 0.75);
}
.soul-icon.mounted { --p: 17px; }
.soul-icon.mounted .pip { box-shadow: 0 0 0 2px rgba(12, 9, 5, 0.9), 0 0 0 4px rgba(212, 175, 55, 0.6), 0 0 12px 3px rgba(246, 227, 161, 0.7); }
.soul-icon.fallen .pip { background: radial-gradient(circle at 40% 35%, #b9ad98, #6d6252); box-shadow: 0 0 0 2px rgba(12, 9, 5, 0.9); }
/* The heading: a small gold wedge just beyond the pip, turned about the soul's own spot. */
.soul-icon .heading {
    position: absolute; left: 0; top: 0; width: 0; height: 0;
    border-left: calc(6px * var(--ui)) solid transparent; border-right: calc(6px * var(--ui)) solid transparent; border-bottom: calc(8px * var(--ui)) solid var(--gold-l);
    margin-left: calc(-6px * var(--ui)); margin-top: calc(var(--p) * var(--ui) * -0.5 - 9px * var(--ui));
    transform-origin: calc(6px * var(--ui)) calc(var(--p) * var(--ui) * 0.5 + 9px * var(--ui));
    filter: drop-shadow(0 0 2px #000);
}
.soul-icon.fallen .heading { display: none; }
.soul-icon .label { position: absolute; left: 0; top: calc(var(--p) * var(--ui) * 0.5 + 3px); transform: translateX(-50%); white-space: nowrap; font-size: calc(16px * var(--ui)); color: var(--text); text-shadow: 0 0 3px #000, 0 0 6px #000, 0 1px 2px #000; }
.hide-soul-labels .soul-icon .label { display: none; }
.soul-icon.found .pip { animation: found 1.2s ease-in-out 3; }
@keyframes found { 50% { box-shadow: 0 0 0 2px rgba(12, 9, 5, 0.9), 0 0 0 10px rgba(212, 175, 55, 0.35), 0 0 24px 8px rgba(246, 227, 161, 0.9); } }

/* ---------- territories ---------- */
.leaflet-interactive { cursor: pointer; }
.leaflet-interactive:focus { outline: none; }
.leaflet-tooltip.land-tip {
    padding: 6px 12px; border-radius: 0; color: var(--text); font: calc(15px * var(--ui))/1.3 var(--font); text-shadow: var(--shadow);
    background: linear-gradient(to bottom, var(--ink), var(--ink-2)); border: 1px solid var(--gold-d);
    box-shadow: inset 0 0 0 2px rgba(12, 9, 5, 0.9), inset 0 0 0 3px rgba(212, 175, 55, 0.3), 0 0 12px rgba(0, 0, 0, 0.6);
}
.leaflet-tooltip.land-tip::before { display: none; }
/* Kuttenberg's districts, named on the map once it is close: small capitals, like the gold rules' captions. */
.leaflet-tooltip.district-label {
    padding: 0; border: none; box-shadow: none; background: none; white-space: nowrap; pointer-events: none;
    font: bold calc(13px * var(--ui)) var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-l);
    text-shadow: 0 0 3px #000, 0 0 6px #000, 0 0 10px rgba(0, 0, 0, 0.85);
}
.leaflet-tooltip.district-label::before { display: none; }
.leaflet-tooltip.land-tip b { color: var(--gold-l); font-size: 1.1em; }
.leaflet-tooltip.land-tip .sub { display: block; font-style: italic; color: var(--dim); font-size: .9em; }
.land-popup .holder { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(138, 109, 31, 0.35); }
.land-popup .holder.neutral { color: var(--dim); font-style: italic; }
.land-popup .swatch { width: 12px; height: 12px; margin-top: 5px; flex: 0 0 auto; border: 1px solid var(--gold-l); transform: rotate(45deg); }
.land-popup .who { display: block; line-height: 1.35; }
.land-popup .who b { font-size: 1em; }
.land-popup .type { display: block; font-size: 13px; font-style: italic; color: var(--dim); }
.land-popup .note { display: block; margin-top: 6px; font-size: 13px; font-style: italic; color: var(--dim); }
.territory-label { white-space: nowrap; font: bold calc(17px * var(--ui)) var(--font); letter-spacing: .2em; text-transform: uppercase; text-shadow: 0 0 4px #000, 0 0 8px #000; }

/* ---------- popups ---------- */
.leaflet-popup-content-wrapper {
    border-radius: 0; color: var(--text);
    background: linear-gradient(to bottom, var(--ink), var(--ink-2));
    border: 1px solid var(--gold-d);
    box-shadow: inset 0 0 0 3px rgba(12, 9, 5, 0.9), inset 0 0 0 4px rgba(212, 175, 55, 0.35), 0 0 18px rgba(0, 0, 0, 0.7);
}
.leaflet-popup-tip { background: var(--gold-d); }
.leaflet-popup-content { margin: 12px 16px; font: calc(15px * var(--ui))/1.4 var(--font); }
.leaflet-popup-content b { color: var(--gold-l); font-size: 17px; }
.leaflet-popup-content .sub { display: block; color: var(--dim); font-style: italic; font-size: 13px; }
.leaflet-container a.leaflet-popup-close-button { color: var(--dim); }

/* ---------- narrow screens: the ledger folds away and the plaque shrinks ---------- */
@media (max-width: 760px) {
    :root { --panel-w: min(320px, calc(100vw - 36px)); }
    .plaque { padding: 10px 16px 10px 12px; gap: 10px; }
    .plaque .emblem { width: 26px; height: 30px; }
    h1 { font-size: 17px; }
    .crest { font-size: 12px; }
    .panel { top: 76px; }
    .panel-toggle { top: 18px; right: 18px; }
    .leaflet-top.leaflet-left { top: 82px; }
    .coords { display: none; }
}