/* The world atlas's own rules; the shared look is shared/site.css. */
a { color: var(--gold); }

.find { position: relative; flex: 1 1 240px; max-width: 340px; }

.find input {
 width: 100%;
 padding: 8px 10px;
 border: 1px solid var(--edge);
 border-radius: 3px;
 background: #0e0c10;
 color: var(--ink);
 font: 14px/1.2 "Segoe UI", Verdana, sans-serif;
}

.find input:focus { border-color: var(--gold); outline: none; }

.found {
 position: absolute;
 z-index: 5;
 top: 100%;
 right: 0;
 left: 0;
 margin-top: 4px;
 border: 1px solid var(--gold-soft);
 border-radius: 4px;
 background: #121014;
 box-shadow: 0 8px 22px rgba(0, 0, 0, .8);
}

.found a { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; color: var(--ink); text-decoration: none; }
.found a:hover, .found a:focus-visible { background: #2c2630; outline: none; }
.found small { color: var(--dim); white-space: nowrap; }
.found p { margin: 0; padding: 8px 10px; color: var(--dim); }

.crumbs { max-width: 1320px; margin: 0 auto 12px; color: var(--dim); font-size: 14px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs > * + *::before { content: "\203A"; margin: 0 8px; color: var(--dim); }
.crumbs span { color: var(--ink); }

/* A map or a plan beside its panel. */
.atlas {
 display: grid;
 grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
 gap: 18px;
 align-items: start;
 margin-bottom: 26px;
}

.atlas.enemy, .atlas.item-view { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
/* A dungeon of several floors: its panel across the top, the floors side by side under it. */
.atlas.floors { grid-template-columns: 1fr; }
.atlas.floors .side { order: -1; }
.atlas.floors .pad { columns: 2 340px; column-gap: 28px; }
.atlas.floors .pad > * { break-inside: avoid; }

.map-frame {
 margin: 0;
 padding: 8px;
 border: 1px solid var(--gold-soft);
 border-radius: 6px;
 background: linear-gradient(#2b2218, #15110c);
 box-shadow: inset 0 0 0 1px #000, 0 8px 24px rgba(0, 0, 0, .5);
}

/* --ratio is the width over the height of what is shown: a tall map is narrowed to fit the window, never cut. */
.map, .plan {
 display: block;
 width: min(100%, calc(86vh * var(--ratio, 1)));
 height: auto;
 aspect-ratio: var(--ratio, 1);
 margin: 0 auto;
 border: 1px solid #000;
 background: #2b2a22;
}

/* Lines, marks and names are sized in --u, a hundredth of the side shown. */
.map .area path {
 fill: transparent;
 stroke: rgba(52, 22, 8, .8);
 stroke-width: calc(var(--u) * .28px);
 stroke-linejoin: round;
 transition: fill .12s;
}

.map a.area { cursor: pointer; outline: none; }
.map a.area:hover path, .map a.area:focus-visible path { fill: rgba(255, 214, 110, .24); stroke: #fff0b8; stroke-width: calc(var(--u) * .45px); }
.map .area.near path { stroke: rgba(52, 22, 8, .4); stroke-dasharray: calc(var(--u) * 1px) calc(var(--u) * .8px); }
.map .area.here path { fill: rgba(255, 214, 110, .1); stroke: #fff0b8; stroke-width: calc(var(--u) * .45px); pointer-events: none; }
.map .area.footprint path { fill: rgba(194, 57, 47, .1); stroke: #5a0f0a; stroke-width: calc(var(--u) * .16px); pointer-events: none; }

.map .road {
 fill: none;
 stroke: #fff0b8;
 stroke-width: calc(var(--u) * .45px);
 stroke-dasharray: calc(var(--u) * 1.2px) calc(var(--u) * .9px);
 stroke-linecap: round;
}

.map .labels text, .plan .north text {
 pointer-events: none;
 text-anchor: middle;
 dominant-baseline: middle;
 paint-order: stroke;
 stroke: rgba(16, 9, 4, .9);
 stroke-width: calc(var(--u) * .55px);
 stroke-linejoin: round;
 fill: #fff3d6;
 font-family: "Wild Breath", Georgia, serif;
 letter-spacing: .03em;
}

.map .labels .sub { fill: var(--gold); font-family: "Segoe UI", Verdana, sans-serif; font-weight: 700; letter-spacing: 0; }

/* A mark is drawn in units round its point, so its lines are in units too. */
.mark > * { stroke: #140c06; stroke-width: .24px; }
a > .mark { cursor: pointer; }
.mark[data-tip]:hover > *, a:focus-visible > .mark > * { stroke: #fff0b8; }
a:focus-visible { outline: none; }
.mark-dungeon path { fill: var(--gold); }
.mark-boss circle { fill: #c2392f; }
.mark-boss .core { fill: #140c06; stroke: none; }
.mark-landmark circle { fill: #f4ecd8; }
.mark-site rect { fill: #a9773f; }
.mark-spawn circle { fill: #d2594a; stroke-width: .14px; }
.mark-cave path { fill: #6d6578; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 2px 0; color: var(--dim); font-size: 13px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend .key { width: 18px; height: 18px; }
.legend.column { flex-direction: column; }
.swatch { width: 18px; height: 9px; border: 1px solid #000; }

/* A dungeon's floor plan: the plan sheets' floor and door colours on paper. */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.plan { background: #d9d0b8; }
.plan .room { stroke: #2e2824; stroke-width: calc(var(--u) * .45px); }
.plan .room.side, .plan .room.optional { stroke-dasharray: calc(var(--u) * 1.1px) calc(var(--u) * .6px); }
.plan .room.other { fill: none; stroke: rgba(46, 40, 36, .22); stroke-width: calc(var(--u) * .2px); }
.plan .room:hover { stroke: #8a1a12; }
.plan .door { stroke: #141414; stroke-width: calc(var(--u) * .12px); }
.plan text {
 pointer-events: none;
 text-anchor: middle;
 dominant-baseline: middle;
 paint-order: stroke;
 stroke: rgba(246, 240, 226, .9);
 stroke-width: calc(var(--u) * .5px);
 stroke-linejoin: round;
 fill: #1e1712;
 font: 700 10px "Segoe UI", Verdana, sans-serif;
}
.plan text.stair { pointer-events: auto; fill: #8a1a12; font-family: Georgia, serif; font-weight: 700; }
.plan .north line { stroke: #2e2824; stroke-width: calc(var(--u) * .35px); }
.plan-frame figcaption { margin-top: 6px; color: var(--dim); font-size: 13px; text-align: center; }

.side .pad { padding: 14px 16px 18px; }
.side .panel-head .levels, .place .levels { color: var(--gold); font: 700 14px/1.2 "Segoe UI", Verdana, sans-serif; white-space: nowrap; }
.lead { margin: 0 0 12px; color: #b9b0a2; }
.dim { color: var(--dim); }
.gold { color: var(--gold); }

.facts { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0 0 6px; font-size: 14px; }
.facts dt { color: var(--dim); }
.facts dd { margin: 0; }
.inline + .inline::before { content: ", "; color: var(--ink); }

.heading {
 display: flex;
 align-items: center;
 gap: 10px;
 margin: 22px 0 12px;
 color: var(--gold);
 font: 400 11px/1.2 "Segoe UI", Verdana, sans-serif;
 letter-spacing: 2px;
 text-transform: uppercase;
}

.heading::before, .heading::after { content: ""; flex: 1; height: 1px; background: var(--edge); }
.pad > .heading:first-child { margin-top: 0; }
.rank { margin: 14px 0 8px; color: var(--dim); font: 600 13px/1.2 "Segoe UI", Verdana, sans-serif; }

.empty {
 margin: 0 0 18px;
 padding: 14px;
 border: 1px dashed #47424b;
 border-radius: 5px;
 color: #7d7783;
 text-align: center;
}

/* A row that opens a place: a region, a zone, a dungeon. */
.place {
 display: grid;
 grid-template-columns: 1fr auto;
 gap: 2px 12px;
 margin-bottom: 8px;
 padding: 9px 12px;
 border: 1px solid var(--edge);
 border-radius: 5px;
 background: rgba(0, 0, 0, .28);
 color: var(--ink);
 text-decoration: none;
}

a.place:hover, a.place:focus-visible { border-color: var(--gold); background: #211c24; outline: none; }
.place strong { color: #fff3d6; font: 400 21px/1.1 "Wild Breath", Georgia, serif; letter-spacing: .5px; }
.place small { grid-column: 1 / -1; color: var(--dim); font-size: 13px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.cards .place { margin: 0; }

.mob {
 display: grid;
 grid-template-columns: 84px 1fr;
 gap: 12px;
 padding: 8px;
 border: 1px solid var(--edge);
 border-radius: 5px;
 background: rgba(0, 0, 0, .28);
 color: var(--ink);
 text-decoration: none;
}

.mob:hover, .mob:focus-visible { border-color: var(--gold); background: #211c24; outline: none; }
.portrait { width: 84px; height: 84px; border: 1px solid var(--gold-soft); border-radius: 4px; background: #0e0c10; }
.none { display: flex; align-items: center; justify-content: center; border: 1px dashed #47424b; color: #5d5762; font-size: 11px; text-align: center; }
.mob-name { color: #fff3d6; font: 400 20px/1.1 "Wild Breath", Georgia, serif; letter-spacing: .5px; }
.mob-line { font-size: 13px; }
.mob-line.note { color: var(--gold); }

.chip {
 display: inline-block;
 margin: 3px 0 2px;
 padding: 1px 7px 2px;
 border: 1px solid var(--edge);
 border-radius: 9px;
 color: var(--dim);
 font: 700 10px/1.4 "Segoe UI", Verdana, sans-serif;
 letter-spacing: 1px;
 text-transform: uppercase;
}

.chip[data-rank="sleeper"] { border-color: #6d6578; color: #a59db0; }
.chip[data-rank="elite"] { border-color: var(--gold-soft); color: var(--gold); }
.chip[data-rank="zone_boss"], .chip[data-rank="dungeon_boss"], .chip[data-rank="final_boss"] { border-color: #8a2a22; color: #ff7a6a; }

.figure-art { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; border: 1px solid var(--gold-soft); border-radius: 6px; }
.figure-art.none { aspect-ratio: 1; font-size: 15px; }
.figure .item-card { margin: 0 auto; }

.found-list { margin: 0; padding-left: 18px; font-size: 14px; }
.found-list li { margin-bottom: 4px; }

.table-wrap { overflow-x: auto; margin-bottom: 12px; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { padding: 4px 10px 4px 0; border-bottom: 1px solid var(--edge); color: var(--dim); font-weight: 600; text-align: left; white-space: nowrap; }
.table td { padding: 4px 10px 4px 0; border-bottom: 1px solid #221d26; }

.loot { max-width: 860px; }

.loot-row {
 display: grid;
 grid-template-columns: var(--item) minmax(0, 1.5fr) minmax(0, 1fr) 70px;
 gap: 12px;
 align-items: center;
 padding: 5px 0;
 border-bottom: 1px solid #221d26;
}

.loot-head { color: var(--dim); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.loot-name small { display: block; color: var(--dim); font-size: 12.5px; }
.loot-note { color: var(--dim); font-size: 13px; }
.loot-chance { color: #fff3d6; font: 700 15px/1 "Segoe UI", Verdana, sans-serif; text-align: right; }
.loot-head .loot-chance { color: var(--dim); font-size: 12px; }

.rarity { color: var(--rarity-common); font-weight: 600; text-decoration: none; }
.rarity:hover { text-decoration: underline; }
.rarity[data-rarity="Uncommon"] { color: var(--rarity-uncommon); }
.rarity[data-rarity="Rare"] { color: var(--rarity-rare); }
.rarity[data-rarity="Epic"] { color: var(--rarity-epic); }
.rarity[data-rarity="Legendary"] { color: var(--rarity-legendary); }

.tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.tile { width: var(--item); text-align: center; }
.tile small { display: block; margin-top: 2px; color: var(--dim); font-size: 11.5px; }

.rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.room-row { padding: 10px 12px; border: 1px solid var(--edge); border-radius: 5px; background: rgba(0, 0, 0, .28); font-size: 13.5px; }
.room-row h4 { margin: 0 0 4px; color: #fff3d6; font: 400 19px/1.1 "Wild Breath", Georgia, serif; letter-spacing: .5px; }
.room-row h4 .n { margin-right: 8px; color: var(--gold); font: 700 15px/1 "Segoe UI", Verdana, sans-serif; }
.room-row p { margin: 0 0 5px; }
.room-row .holds { color: #ff9a8a; }

.tag {
 margin-left: 8px;
 padding: 1px 6px;
 border: 1px dashed var(--edge);
 border-radius: 3px;
 color: var(--dim);
 font: 700 10px/1.4 "Segoe UI", Verdana, sans-serif;
 letter-spacing: 1px;
 text-transform: uppercase;
 vertical-align: middle;
}

.tip h4 + .hint { margin-top: 2px; font-size: 13px; }

@media (max-width: 860px) {
 .atlas, .atlas.enemy, .atlas.item-view { grid-template-columns: 1fr; }
 .atlas.dungeon .side { order: -1; }
}

@media (max-width: 560px) {
 .find { max-width: none; }
 .cards { grid-template-columns: 1fr; }
 .loot-row { grid-template-columns: var(--item) minmax(0, 1fr) 54px; }
 .loot-note { display: none; }
 .mob { grid-template-columns: 68px 1fr; }
 .portrait { width: 68px; height: 68px; }
}