/* ============================================================
Empyria IV — LIVE sea-chart skin (additive, load AFTER styles.css)
Frames the real squaremap/Leaflet map as the Claude Design preview:
a brass-bracketed document on a felt desk, dossier header + footer,
a right pinned sheet combining MAP TYPES + worlds + players, and a
left Territory report. Pairs with js/addons/dossier-chrome.js.
============================================================ */
:root {
--sea: #cadbd6;
--dz-ink: #2c1308;
--dz-oxblood: #7c1f16;
--dz-brass: #b08431;
--dz-parch: #e9dcb7;
--dz-m: 22px; /* desk margin (gray frame band) around the document */
--dz-hdr: 44px; /* header height */
--dz-ftr: 30px; /* footer height */
--dz-grain: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJz48ZmlsdGVyIGlkPSdnJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdHlwZT0nc2F0dXJhdGUnIHZhbHVlcz0nMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNnKScgb3BhY2l0eT0nMC40MicvPjwvc3ZnPg==");
--dz-grain-coarse: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNjAnIGhlaWdodD0nMjYwJz48ZmlsdGVyIGlkPSdjJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC42NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjxmZUNvbG9yTWF0cml4IHR5cGU9J3NhdHVyYXRlJyB2YWx1ZXM9JzAnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWx0ZXI9J3VybCgjYyknIG9wYWNpdHk9JzAuNCcvPjwvc3ZnPg==");
}
/* desk: dark felt/leather behind the framed document */
body {
background-color: #1c1a13;
background-image:
var(--dz-grain-coarse),
radial-gradient(120% 100% at 50% -10%, #2a2719, transparent 60%),
radial-gradient(140% 120% at 50% 120%, #0c0b07, transparent 55%),
linear-gradient(160deg, #23211799, #13110b99);
background-size: 260px 260px, auto, auto, auto;
background-blend-mode: soft-light, normal, normal, normal;
}
/* ---------- the map is inset between header & footer = the chart sheet ---------- */
#map {
position: absolute !important;
top: calc(var(--dz-m) + var(--dz-hdr)) !important;
/* 3px each side = 6px less width total, kept centered (no sideways shift) */
left: calc(var(--dz-m) + 3px) !important;
right: calc(var(--dz-m) + 3px) !important;
bottom: calc(var(--dz-m) + var(--dz-ftr)) !important;
width: auto !important;
height: auto !important;
background-color: var(--sea) !important;
background-image:
var(--dz-grain),
radial-gradient(closest-side, transparent 60%, rgba(80,108,108,.10) 61%, transparent 63%) 64% 30% / 520px 520px no-repeat,
radial-gradient(closest-side, transparent 60%, rgba(80,108,108,.08) 61%, transparent 63%) 30% 72% / 640px 640px no-repeat,
radial-gradient(120% 90% at 35% 42%, rgba(120,140,96,.16), transparent 55%);
background-size: 200px 200px, auto, auto, auto;
background-blend-mode: soft-light, normal, normal, multiply;
}
/* hide the native squaremap/Leaflet chrome that isn't in the dossier design */
.leaflet-control-zoom,
.leaflet-control-layers:not(.coordinates),
.leaflet-control-attribution { display: none !important; }
/* hide the live mouse-follow coordinate readout — it floated over the map and is
now redundant: left-click copies the coords + flashes a toast instead */
.leaflet-bottom.leaflet-left { display: none !important; }
/* squaremap fetches each tile and only sets the ![]()
src once the blob is ready;
the empty ![]()
in between renders as a gray loading square that floats then
vanishes. Only reveal a tile once it's actually loaded — kills those boxes. */
.leaflet-tile-container img.leaflet-tile:not(.leaflet-tile-loaded) { visibility: hidden !important; }
/* "COORDS COPIED" note — a Leaflet popup pinned to the clicked map point (so it
pans with the map), styled as the parchment toast pill (no bubble / tip / close) */
.nk-coords-toast .leaflet-popup-content-wrapper { background: #efe4c8; color: var(--dz-ink); border: 1px solid rgba(90,58,22,.5); border-radius: 2px; box-shadow: 0 8px 20px -6px rgba(0,0,0,.6); padding: 0; }
.nk-coords-toast .leaflet-popup-content { margin: 6px 14px; font: 700 11px "Special Elite","Courier New",monospace; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: var(--dz-ink); }
.nk-coords-toast .leaflet-popup-tip-container, .nk-coords-toast .leaflet-popup-tip { display: none; }
.nk-coords-toast a.leaflet-popup-close-button { display: none; }
/* subtle chart aging over the map only (never blocks pointer) */
#dossier-overlay {
position: absolute; z-index: 449; pointer-events: none;
top: calc(var(--dz-m) + var(--dz-hdr)); left: var(--dz-m); right: var(--dz-m); bottom: calc(var(--dz-m) + var(--dz-ftr));
background-image:
linear-gradient(rgba(60,86,86,.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(60,86,86,.06) 1px, transparent 1px),
radial-gradient(130% 120% at 50% 50%, transparent 54%, rgba(120,92,48,.22));
background-size: 54px 54px, 54px 54px, auto;
mix-blend-mode: multiply;
}
/* ---------- brass-bracketed frame around the whole document ---------- */
#dossier-frame {
position: fixed; inset: var(--dz-m); z-index: 12300; pointer-events: none;
box-shadow:
inset 0 0 0 2px rgba(176,132,49,.9),
inset 0 0 0 5px rgba(28,26,19,.55),
inset 0 0 46px rgba(28,26,19,.5),
0 0 0 1px rgba(0,0,0,.5);
}
#dossier-frame .dz-bracket { position: absolute; width: 46px; height: 46px; border: 3px solid var(--dz-brass); filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
#dossier-frame .dz-bracket.tl { top: -2px; left: -2px; border-right: none; border-bottom: none; }
#dossier-frame .dz-bracket.tr { top: -2px; right: -2px; border-left: none; border-bottom: none; }
#dossier-frame .dz-bracket.bl { bottom: -2px; left: -2px; border-right: none; border-top: none; }
#dossier-frame .dz-bracket.br { bottom: -2px; right: -2px; border-left: none; border-top: none; }
/* ---------- header (top of the framed document) ---------- */
#dossier-header {
position: fixed; top: var(--dz-m); left: var(--dz-m); right: var(--dz-m); height: var(--dz-hdr); z-index: 12000;
display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; box-sizing: border-box;
background-color: rgba(44,19,8,.95); background-image: var(--dz-grain-coarse); background-size: 260px 260px; background-blend-mode: soft-light;
color: #fff6d8; border-bottom: 3px double var(--dz-brass);
font-family: "Special Elite","Courier New",monospace;
}
#dossier-header .dz-brand { font: 700 17px/1 "Cinzel","IM Fell English",Georgia,serif; letter-spacing: .14em; display: flex; align-items: baseline; gap: 10px; }
#dossier-header .dz-brand small { font: 9px "Special Elite",monospace; letter-spacing: .30em; opacity: .72; }
#dossier-header .dz-right { display: flex; align-items: center; gap: 10px; }
#dossier-header .dz-file { font: 10px "Special Elite",monospace; letter-spacing: .16em; opacity: .82; text-transform: uppercase; }
.dz-hdrbtn {
width: 26px; height: 26px; flex: none; padding: 0; cursor: pointer; border-radius: 0;
background: transparent; border: 1.5px solid #fff6d8; color: #fff6d8;
font: 700 13px "Cinzel",serif; display: grid; place-items: center; transition: background .15s ease, color .15s ease;
}
.dz-hdrbtn:hover, .dz-hdrbtn[aria-pressed="true"] { background: #fff6d8; color: var(--dz-ink); }
.dz-hdrbtn .dz-i { font: italic 700 14px "IM Fell English",Georgia,serif; }
.dz-hdrbtn.dz-q { font: 700 14px "Cinzel",serif; }
/* ---------- footer (bottom of the framed document) ---------- */
#dossier-footer {
position: fixed; bottom: var(--dz-m); left: var(--dz-m); right: var(--dz-m); height: var(--dz-ftr); z-index: 12000;
display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 0 120px 0 16px; box-sizing: border-box;
background-color: rgba(44,19,8,.92); background-image: var(--dz-grain-coarse); background-size: 260px 260px; background-blend-mode: soft-light;
color: #fff6d8; border-top: 2px solid rgba(176,132,49,.7);
font: 10px "Special Elite",monospace; letter-spacing: .14em;
}
/* wax seal in the footer's right corner */
#dossier-footer .dz-seal {
position: absolute; right: 16px; bottom: 6px; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
background: radial-gradient(circle at 38% 32%, #9c2b22, #5e130d 72%);
box-shadow: 0 6px 14px rgba(0,0,0,.5), inset 0 3px 8px rgba(255,255,255,.18), inset 0 -6px 12px rgba(0,0,0,.45);
font: 700 15px "Cinzel",serif; color: rgba(255,225,200,.6);
}
#dossier-footer .dz-seal::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 2px dashed rgba(255,220,190,.32); }
/* ---------- RIGHT pinned sheet: MAP TYPES + worlds + players ---------- */
#dz-command {
position: fixed; z-index: 1500;
top: calc(var(--dz-m) + var(--dz-hdr) + 30px); right: calc(var(--dz-m) + 14px);
width: 296px; max-height: calc(100vh - var(--dz-m)*2 - var(--dz-hdr) - var(--dz-ftr) - 44px);
overflow: visible; transform: rotate(1.2deg);
background-color: #efe4c8; background-image: var(--dz-grain); background-size: 180px; background-blend-mode: soft-light;
border: 1px solid rgba(90,58,22,.5); border-radius: 3px;
box-shadow: 0 16px 26px -10px rgba(20,34,34,.55), inset 0 0 24px rgba(120,92,48,.12);
filter: drop-shadow(0 10px 14px rgba(20,34,34,.3));
padding: 8px 12px 12px;
font-family: "Special Elite","Courier New",monospace; color: var(--dz-ink);
}
/* the moved MAP TYPES panel: strip its own card chrome, inherit the sheet */
#dz-command #nk-maptypes {
position: static !important; transform: none !important; width: 100% !important;
background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important;
}
#dz-command #nk-maptypes .nk-maptypes__head { padding-left: 0; padding-right: 0; }
/* the moved sidebar (worlds + players): become a static block inside the sheet */
#dz-command #sidebar {
position: static !important; display: block !important; width: 100% !important; height: auto !important;
padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important;
text-align: left !important; transition: none !important; box-shadow: none !important;
max-height: 46vh; overflow-y: auto;
}
#dz-command #sidebar #pin { display: none !important; }
#dz-command #sidebar fieldset { margin: 12px 0 0 !important; border-top: 1px solid rgba(90,58,22,.4) !important; }
#dz-command #sidebar legend { font-family: "Cinzel","IM Fell English",Georgia,serif !important; color: var(--dz-ink) !important; }
#dz-command #sidebar a, #dz-command #sidebar a:visited { color: var(--dz-ink) !important; }
#dz-command .dz-sheet-title { font: 700 12px "Cinzel",serif; letter-spacing: .14em; color: var(--dz-ink); border-bottom: 1.5px solid rgba(90,58,22,.5); padding-bottom: 3px; margin: 4px 0 2px; }
/* ---------- LEFT: Territory report (squaremap's #nk-ui-br, repositioned) ---------- */
#nk-ui-br {
position: fixed !important; z-index: 1500 !important;
top: calc(var(--dz-m) + var(--dz-hdr) + 30px) !important; left: calc(var(--dz-m) + 14px) !important;
right: auto !important; bottom: auto !important; align-items: flex-start !important; overflow: visible !important;
}
#nk-ui-br > #nk-territory-panel { position: relative; overflow: visible !important; transform: rotate(-1.3deg); filter: drop-shadow(0 14px 20px rgba(20,34,34,.42)); }
/* on deselect the report is emptied but keeps its red-tack child, so :empty
never matches — hide it whenever there's no actual report content, so the
tack doesn't stay stranded at the map edge */
#nk-ui-br > #nk-territory-panel:not(:has(.nk-panel)) { display: none !important; }
/* ---------- thumbtack close buttons (injected) ---------- */
.dz-tack {
position: absolute; z-index: 8; top: -13px; left: 50%; transform: translateX(-50%);
/* #nk-ui-br is pointer-events:none (so it never blocks the map); force the
tack back to interactive or its clicks fall through to the map below. */
pointer-events: auto !important;
width: 23px; height: 23px; padding: 0; border: none; border-radius: 50%; cursor: pointer;
display: grid; place-items: center; font: 700 11px/1 system-ui, sans-serif; color: rgba(38,30,24,.5);
box-shadow: 0 4px 7px rgba(0,0,0,.5), inset 0 2px 3px rgba(255,255,255,.45), inset 0 -3px 5px rgba(0,0,0,.35);
transition: transform .12s ease, filter .12s ease;
}
.dz-tack:hover { filter: brightness(1.08); transform: translateX(-50%) scale(1.08); }
.dz-tack--red { background: radial-gradient(circle at 36% 30%, #e8786a 0 18%, #c43a2e 45%, #7c1f16 72%); }
.dz-tack--blue { background: radial-gradient(circle at 36% 30%, #8fb0d8 0 18%, #3f6aa0 45%, #243a5c 72%); }
.dz-hidden { display: none !important; }
/* ---------- decorations + guide ---------- */
.dz-deco { position: fixed; pointer-events: none; z-index: 470; }
.dz-stamp {
top: calc(var(--dz-m) + var(--dz-hdr) + 36px); left: 50%; transform: translateX(-50%) rotate(-7deg);
font: 700 28px/1 "Special Elite",monospace; letter-spacing: .14em; color: rgba(124,31,22,.46);
border: 4px solid rgba(124,31,22,.46); border-radius: 6px; padding: 6px 14px; text-transform: uppercase; mix-blend-mode: multiply;
-webkit-mask-image: var(--dz-grain); mask-image: var(--dz-grain); -webkit-mask-size: 90px; mask-size: 90px;
}
/* "? Guide" button on the desk margin, bottom-left (as in the Claude Design preview) */
#dossier-guide-btn {
position: fixed; left: 16px; bottom: 13px; z-index: 12500; cursor: pointer;
display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 2px;
background-color: var(--dz-parch); background-image: var(--dz-grain); background-size: 160px; background-blend-mode: soft-light;
border: 1px solid rgba(90,58,22,.5); color: var(--dz-ink);
font: 700 9px "Special Elite",monospace; letter-spacing: .16em; text-transform: uppercase;
box-shadow: 0 8px 18px -8px rgba(0,0,0,.7);
}
#dossier-guide-btn:hover { background-color: #f4ead0; }
#dossier-guide-btn .dz-q { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--dz-oxblood); color: #f4ead0; font: 700 10px "Cinzel",serif; }
#dossier-guide { position: fixed; inset: 0; z-index: 60000; display: none; place-items: center; background: rgba(12,11,7,.66); padding: 24px; }
#dossier-guide.show { display: grid; }
#dossier-guide .dz-card {
position: relative; width: min(460px,100%); max-height: 88vh; overflow: auto; padding: 26px 28px 24px; border-radius: 3px; color: #33240f;
background-color: #efe4c8; background-image: var(--dz-grain); background-size: 200px; background-blend-mode: soft-light;
border: 1px solid rgba(90,58,22,.55); box-shadow: 0 30px 70px -20px rgba(0,0,0,.85); transform: rotate(-.4deg);
}
#dossier-guide .dz-kicker { font: 700 10px "Special Elite",monospace; letter-spacing: .32em; color: var(--dz-oxblood); text-transform: uppercase; }
#dossier-guide h3 { margin: 4px 0 2px; font: 700 23px "Cinzel",serif; letter-spacing: .04em; color: var(--dz-ink); }
#dossier-guide .dz-sub { margin: 0 0 14px; font: 13px/1.4 "IM Fell English",Georgia,serif; color: #5a4423; border-bottom: 1px solid rgba(90,58,22,.35); padding-bottom: 12px; }
#dossier-guide .dz-row { display: flex; align-items: flex-start; gap: 14px; padding: 11px 0; border-bottom: 1px dotted rgba(90,58,22,.3); font: 13px/1.45 "IM Fell English",Georgia,serif; color: #3a2a12; }
#dossier-guide .dz-row:last-child { border-bottom: none; }
#dossier-guide .dz-row b { font-family: "Special Elite",monospace; font-size: 12px; color: var(--dz-oxblood); }
#dossier-guide .dz-chip { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font: 700 12px system-ui; color: rgba(38,30,24,.55); box-shadow: inset 0 2px 3px rgba(255,255,255,.45), inset 0 -3px 5px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.4); }
#dossier-guide .dz-chip.red { background: radial-gradient(circle at 36% 30%, #e8786a 0 18%, #c43a2e 45%, #7c1f16 72%); }
#dossier-guide .dz-chip.blue { background: radial-gradient(circle at 36% 30%, #8fb0d8 0 18%, #3f6aa0 45%, #243a5c 72%); }
#dossier-guide .dz-chip.btn { border-radius: 0; border: 1.5px solid var(--dz-ink); color: var(--dz-ink); box-shadow: none; font: 700 13px "Cinzel",serif; }
#dossier-guide .dz-x { position: absolute; top: 12px; right: 14px; width: 28px; height: 28px; border: none; cursor: pointer; background: transparent; color: var(--dz-oxblood); font: 700 18px system-ui; border-radius: 50%; }
#dossier-guide .dz-x:hover { background: rgba(124,31,22,.12); }