/* The Explorers' Lodge (views/exploration.mjs; docs/EXPLORATION.md): the painted chart with its fog, the ladder of the
   ways to travel, the scout's card, its orders, what it has charted and the reports of its trips. The chart is still
   but for a trip's report: when a trip is collected it plays back once on the chart and in the panel, every part at
   its moment (`--at`), and then stands still as the summary. The scout keeps its place on its route between two looks
   at the server, and nothing loops, shimmers or counts down. A page on a phone flows with the stage and keeps no
   scroller of its own; the desktop's window is laid out at the end, above a phone's width. */

/* ------------------------------------------------------------------ The chart */
.xr-chart-frame { position: relative; margin: 0; min-width: 0; }
.xr-chart { display: block; width: 100%; height: auto; border-radius: .6rem; background: #1b1610; box-shadow: 0 .5rem 1.4rem rgba(0, 0, 0, .45), 0 0 0 1px rgba(214, 170, 96, .28); user-select: none; -webkit-user-select: none; }
/* The chart's ink, at no weight of its own, so each kind of text below can take its own colour. */
:where(.xr-chart) text { font-family: var(--font-display); fill: #2a1d10; paint-order: stroke; stroke: rgba(246, 238, 216, .88); stroke-linejoin: round; }
/* The regions a level has not opened wear a darker veil over their fog. */
.xr-veil { fill: rgba(22, 26, 38, .1); stroke: rgba(40, 36, 48, .4); stroke-width: 2.5; stroke-dasharray: 10 9; }
.xr-chart.is-locked .xr-veil { fill: rgba(22, 26, 38, .06); }
/* A region's name and how far its fog has gone, in ink with a paper halo. */
.xr-labels, .xr-marks, .xr-lodge, .xr-trips, .xr-soon, .xr-places { pointer-events: none; }
.xr-label-name { font-size: 30px; font-weight: 600; letter-spacing: .02em; stroke-width: 7px; text-anchor: middle; }
.xr-numeral { fill: #7a4e1c; }
.xr-label-sub { font-size: 19px; font-style: italic; fill: #4a3924; stroke-width: 6px; text-anchor: middle; }
.xr-label-sub.is-rumour { fill: #7a2e1c; }
.xr-label.is-closed .xr-label-name { fill: #3a3440; }
/* The regions are the chart's buttons: an open one takes the skill's colour under the pointer, the chosen one keeps it. */
.xr-region { fill: transparent; stroke: transparent; stroke-width: 4; cursor: pointer; transition: fill .15s, stroke .15s; }
.xr-region:hover { fill: rgba(60, 196, 180, .07); stroke: rgba(60, 196, 180, .55); stroke-dasharray: 12 9; }
.xr-region.is-closed:hover { fill: rgba(20, 24, 34, .08); stroke: rgba(40, 36, 44, .5); }
.xr-region.is-selected { fill: rgba(60, 196, 180, .1); stroke: #3cc4b4; stroke-width: 5; stroke-dasharray: none; }
.xr-region.is-selected.is-closed { fill: rgba(20, 24, 34, .1); stroke: rgba(242, 198, 106, .7); }
.xr-region:focus { outline: none; }
/* The places the adventurer already knows, named once the fog has lifted from them. */
.xr-place { font-size: 15px; font-style: italic; fill: #3b2c1a; stroke-width: 4.5px; }
/* Charted sites and the leads still to follow. */
.xr-site-name { font-size: 17px; font-weight: 600; text-anchor: middle; stroke-width: 5px; }
.xr-first { font-size: 14px; font-style: italic; text-anchor: middle; fill: #6a3c12; stroke-width: 4px; }
.xr-lead circle { fill: rgba(246, 238, 216, .92); stroke: #2a1d10; stroke-width: 2.4; stroke-dasharray: 5 4; }
.xr-lead text { font-size: 22px; font-weight: 700; text-anchor: middle; fill: #2a1d10; stroke: none; }
.xr-lodge-name { font-size: 18px; font-weight: 600; stroke-width: 5px; }
/* The trip out: its route in a dotted line, the point where it turns, and the scout on it. */
.xr-route { fill: none; stroke: #1d2a2a; stroke-width: 3.6; stroke-dasharray: .1 9; stroke-linecap: round; opacity: .85; }
.xr-turn { fill: rgba(60, 196, 180, .25); stroke: #1d6f66; stroke-width: 2; }
.xr-trip.is-home .xr-route { opacity: .35; }
.xr-scout { transition: transform 1.9s linear; }
.xr-scout-ring { fill: #eaf8f4; stroke: #1d6f66; stroke-width: 3; }
.xr-scout.is-home .xr-scout-ring { fill: #fff4d4; stroke: #b07a26; }
/* The fog a trip lifted opens once, cell by cell as its report plays (`--at`), then the chart is still. The length is
   trip-replay.mjs PACE.lift: the view holds still for as long as the fog is opening. */
.xr-lift.is-new { animation: xr-lift .6s var(--ease-out) var(--at, 0s) both; transform-box: fill-box; transform-origin: center; }
@keyframes xr-lift { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

/* A trip, played back (views/exploration.mjs replayLayer, public/client/trip-replay.mjs). The camera moves in on the
   trip's ground as the scout walks out and back out as it walks home; the route draws itself behind the scout, who
   stops where it turned; what it found appears where it was found: a site or a lead with one ring, a find in its
   grade's round frame for a moment. A click anywhere on it skips to the summary. */
.xr-chart.is-replaying { cursor: pointer; }
.xr-cam.is-moving { animation: xr-cam-in var(--cam-in) cubic-bezier(.45, 0, .25, 1) both, xr-cam-out var(--cam-back) cubic-bezier(.45, 0, .25, 1) var(--cam-out) forwards; }
@keyframes xr-cam-in { from { transform: none; } to { transform: translate(var(--cam-x), var(--cam-y)) scale(var(--cam-s)); } }
@keyframes xr-cam-out { from { transform: translate(var(--cam-x), var(--cam-y)) scale(var(--cam-s)); } to { transform: none; } }
.xr-replay { pointer-events: none; }
.xr-trip-area { fill: rgba(60, 196, 180, .08); stroke: #3cc4b4; stroke-width: 4; stroke-dasharray: 12 9; animation: xr-appear .5s var(--ease-out) both; }
@keyframes xr-appear { from { opacity: 0; } to { opacity: 1; } }
.xr-trail-draw { fill: none; stroke: #fff; stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; animation: xr-trail var(--out) linear both; }
@keyframes xr-trail { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.xr-route.is-replay { stroke: #13302b; opacity: 1; }
/* The scout's walk: nested legs, each carrying it along one stretch of the route at its moment (views/exploration.mjs
   walker). It fades in at the lodge's door and out when it is home. */
.xr-walker { animation: xr-appear .18s var(--ease-out) both, xr-vanish .3s ease-in var(--home) forwards; }
.xr-leg { animation: xr-leg var(--for) linear var(--at) both; }
@keyframes xr-leg { from { transform: none; } to { transform: translate(var(--dx), var(--dy)); } }
@keyframes xr-vanish { to { opacity: 0; } }
.xr-rp-pop { animation: xr-pop .6s var(--ease-spring) var(--at) both; }
@keyframes xr-pop { from { opacity: 0; transform: scale(.2); } 60% { opacity: 1; transform: scale(1.3); } to { opacity: 1; transform: none; } }
.xr-rp-ping { fill: none; stroke: #fff4d0; stroke-width: 3.5; animation: xr-ping 1.1s var(--ease-out) var(--at) both; }
.xr-rp-ping.is-lair { stroke: #ffb38a; }
.xr-rp-ping.is-lead { stroke-dasharray: 6 5; }
@keyframes xr-ping { 0% { opacity: 0; transform: scale(.7); } 2% { opacity: .95; } 100% { opacity: 0; transform: scale(2.8); } }
.xr-rp-find { animation: xr-find 1.9s var(--ease-out) var(--at) both; }
.xr-rp-find-ring { fill: rgba(24, 18, 12, .86); stroke: var(--rar-common); stroke-width: 3; }
.xr-rp-find.r-uncommon .xr-rp-find-ring { stroke: var(--rar-uncommon); }
.xr-rp-find.r-rare .xr-rp-find-ring { stroke: var(--rar-rare); }
.xr-rp-find.r-epic .xr-rp-find-ring { stroke: var(--rar-epic); }
.xr-rp-find.r-legendary .xr-rp-find-ring { stroke: var(--rar-legendary); }
.xr-rp-find.r-mythic .xr-rp-find-ring { stroke: var(--rar-mythic); }
@keyframes xr-find { 0% { opacity: 0; transform: scale(.2); } 14% { opacity: 1; transform: scale(1.18); } 24% { opacity: 1; transform: none; } 76% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-16px) scale(.9); } }
.reduce-motion .xr-lift.is-new, .reduce-motion .xr-scout, .reduce-motion .xr-cam.is-moving { animation: none; transition: none; }
.reduce-motion .xr-replay { display: none; }
@media (prefers-reduced-motion: reduce) { .xr-lift.is-new, .xr-scout, .xr-cam.is-moving { animation: none; transition: none; } .xr-replay { display: none; } }
/* "Coming soon" over the chart of a server that has not opened Exploration. */
.xr-soon rect { fill: rgba(12, 17, 28, .82); stroke: rgba(242, 198, 106, .6); stroke-width: 2; }
.xr-soon text { text-anchor: middle; stroke: none; }
.xr-soon-kicker { font-size: 22px; letter-spacing: .24em; text-transform: uppercase; fill: #c9953f; }
.xr-soon-title { font-size: 46px; fill: #ffe7a6; }
/* The key under the chart. */
.xr-legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; padding: .45rem .2rem 0; font-size: .78rem; color: var(--text-3); }
.xr-legend > span { display: inline-flex; align-items: center; gap: .35rem; }
.xr-site-icon { flex: none; width: 1.35rem; height: 1.35rem; }
.xr-lead-mark { flex: none; display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 1.5px dashed #d8c8a0; color: var(--text-1); font: 700 .8rem var(--font-display); }

/* ------------------------------------------------------------------ The ladder of the ways to travel */
.xr-ladder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .45rem; margin-top: .6rem; }
.xr-rung { display: flex; align-items: center; gap: .45rem; min-width: 0; padding: .35rem .5rem; border-radius: .55rem; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); }
.xr-rung > span { display: grid; min-width: 0; }
.xr-rung strong { font: 400 .92rem/1.15 var(--font-display); color: var(--gold-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xr-rung small { font-size: .72rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xr-rung.is-live { border-color: color-mix(in srgb, var(--skill) 55%, transparent); background: color-mix(in srgb, var(--skill) 12%, transparent); }
.xr-rung.is-live small { color: color-mix(in srgb, var(--skill) 60%, #fff); }
.xr-rung.is-later { opacity: .62; }
.xr-rung.is-later .xr-vehicle-art { filter: grayscale(.85) brightness(.85); }
.xr-vehicle-art { flex: none; width: 2.2rem; height: 2.2rem; }
.xr-vehicle-art.is-large { width: 4rem; height: 4rem; padding: .3rem; border-radius: .8rem; background: radial-gradient(circle at 50% 40%, rgba(242, 236, 214, .95), rgba(214, 196, 150, .9)); box-shadow: inset 0 0 0 1px rgba(90, 60, 30, .5); }

/* ------------------------------------------------------------------ The lodge: the scout and its trip */
.xr-scout-card { display: flex; align-items: flex-start; gap: .8rem; }
.xr-scout-copy { display: grid; gap: .15rem; min-width: 0; }
.xr-scout-copy .t-caps { font-size: .72rem; letter-spacing: .1em; color: var(--gold-3); }
.xr-scout-copy strong { font: 400 1.3rem/1.2 var(--font-display); color: var(--gold-0); }
.xr-scout-copy p { margin: .2rem 0 0; font-size: .88rem; line-height: 1.4; color: var(--text-2); }
.xr-scout-card.is-home strong { color: color-mix(in srgb, var(--skill) 55%, #fff); }
.xr-hire { margin-top: .1rem; }
.xr-hire .ia-emblem { width: 1.6rem; height: 1.6rem; }
/* The trip in one line: the lodge, the farthest point, and the scout between them. Never a time. */
.xr-route-strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: .7rem; border: 1px solid rgba(255, 255, 255, .07); background: rgba(0, 0, 0, .2); }
.xr-strip-end { display: grid; justify-items: center; gap: .1rem; color: var(--text-3); font-size: .68rem; }
.xr-strip-end .ia-glyph, .xr-strip-end .ia-emblem { width: 1.2rem; height: 1.2rem; }
.xr-strip-line { position: relative; height: .3rem; border-radius: .3rem; background: repeating-linear-gradient(90deg, rgba(214, 196, 150, .55) 0 .35rem, transparent .35rem .7rem); }
.xr-strip-line i { position: absolute; top: 50%; width: .95rem; height: .95rem; border-radius: 50%; translate: -50% -50%; background: var(--skill); box-shadow: 0 0 0 3px rgba(12, 18, 30, .9), 0 0 0 4px color-mix(in srgb, var(--skill) 60%, transparent); transition: left 1.9s linear; }
.xr-strip-line i.is-back { background: #f2c66a; }
.xr-route-strip.is-home .xr-strip-line i { background: #f2c66a; }
.reduce-motion .xr-strip-line i { transition: none; }

/* ------------------------------------------------------------------ The tabs and the orders */
.xr-tabs { display: flex; width: 100%; }
.xr-tabs button { flex: 1; justify-content: center; }
.xr-tab-body { display: grid; gap: .6rem; }
/* The panel's headings are the window's small gold caps on a phone too. */
.explore-page .win-caps { margin: 0; font: 400 .79rem var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-3); }
.xr-tab-body .win-caps { margin-top: .35rem; }
.xr-region-list { display: grid; gap: .3rem; }
.xr-region-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; width: 100%; padding: .45rem .6rem; border-radius: .6rem; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .03); text-align: left; color: var(--text-2); transition: border-color .15s, background .15s; }
.xr-region-row:hover { border-color: rgba(242, 198, 106, .35); }
.xr-region-row.is-picked { border-color: color-mix(in srgb, var(--skill) 70%, transparent); background: color-mix(in srgb, var(--skill) 12%, transparent); }
.xr-region-row.is-closed { opacity: .6; }
.xr-region-row .ia-glyph { width: 1rem; height: 1rem; color: var(--text-3); }
.xr-numeral-badge { display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.9rem; padding: 0 .3rem; border-radius: .5rem; border: 1px solid rgba(214, 170, 96, .45); background: rgba(242, 198, 106, .1); color: var(--gold-1); font: 600 .82rem var(--font-display); }
.xr-region-copy { display: grid; min-width: 0; }
.xr-region-copy strong { font: 400 1rem/1.2 var(--font-display); color: var(--gold-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xr-region-copy small { font-size: .76rem; color: var(--text-3); }
.xr-fog-meter { width: 3.4rem; height: .32rem; border-radius: .3rem; background: rgba(255, 255, 255, .1); overflow: hidden; }
.xr-fog-meter i { display: block; height: 100%; background: var(--skill); }
.xr-reach { display: flex; width: 100%; }
.xr-reach button { flex: 1; display: grid; justify-items: center; gap: .05rem; padding: .35rem .4rem; }
.xr-reach button small { font-size: .68rem; font-weight: 500; opacity: .8; }
.xr-reach-note { margin: -.1rem 0 0; font-size: .82rem; color: var(--text-3); }
.xr-food-list { display: grid; gap: .3rem; }
.xr-food, .xr-load { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; width: 100%; padding: .4rem .6rem; border-radius: .6rem; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .03); text-align: left; color: var(--text-2); }
.xr-food { grid-template-columns: auto minmax(0, 1fr); }
.xr-food img, .xr-load img { width: 2rem; height: 2rem; object-fit: contain; }
.xr-food span, .xr-load span { display: grid; min-width: 0; }
.xr-food strong, .xr-load strong { font-size: .9rem; font-weight: 600; color: var(--text-1); }
.xr-food small, .xr-load small { font-size: .76rem; color: var(--text-3); }
.xr-food small b { font-weight: 600; color: var(--text-2); }
.xr-food.is-on, .xr-load.is-on { border-color: color-mix(in srgb, var(--skill) 70%, transparent); background: color-mix(in srgb, var(--skill) 12%, transparent); }
.xr-food.is-short { opacity: .7; }
.xr-check { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: .35rem; border: 1px solid rgba(255, 255, 255, .2); color: var(--skill); }
.xr-check .ia-glyph { width: .95rem; height: .95rem; }
.xr-pays { display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem; border-radius: .6rem; background: rgba(88, 214, 127, .07); border: 1px solid rgba(88, 214, 127, .22); font-size: .85rem; color: var(--text-2); }
.xr-pays .ia-emblem { flex: none; width: 1.5rem; height: 1.5rem; }
.xr-empty { display: flex; gap: .5rem; margin: 0; font-size: .84rem; line-height: 1.4; color: var(--text-3); }
.xr-empty .ia-glyph { flex: none; width: 1rem; height: 1rem; margin-top: .1rem; }
.xr-home-note { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: .5rem; background: color-mix(in srgb, var(--skill) 18%, transparent); color: color-mix(in srgb, var(--skill) 55%, #fff); font-size: .85rem; }
.xr-home-note .ia-glyph { width: 1rem; height: 1rem; }
.xr-foot { display: grid; gap: .45rem; }

/* ------------------------------------------------------------------ Charted: sites, leads and curios */
.xr-charted-region { display: grid; gap: .35rem; padding-bottom: .5rem; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.xr-charted-region h3 { display: flex; align-items: center; gap: .5rem; margin: .2rem 0; font: 400 1.05rem var(--font-display); color: var(--gold-0); }
.xr-charted-region h3 small { margin-left: auto; font-size: .8rem; color: var(--text-3); }
.xr-site-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .55rem; padding: .3rem .1rem; }
.xr-site-row > div { display: grid; min-width: 0; }
.xr-site-row strong { font-size: .9rem; font-weight: 600; color: var(--text-1); }
.xr-site-row small { font-size: .76rem; line-height: 1.35; color: var(--text-3); }
.xr-site-row .xr-site-icon { width: 1.8rem; height: 1.8rem; }
.xr-site-row.is-lead .xr-lead-mark { width: 1.8rem; height: 1.8rem; }
.xr-first-line { display: inline-flex; align-items: center; gap: .3rem; color: var(--gold-2) !important; }
.xr-first-line .ia-glyph { width: .85rem; height: .85rem; }
.xr-curios { display: flex; align-items: center; gap: .35rem; }
.xr-curios small { margin-left: .3rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.xr-curios .well { width: 2.4rem; height: 2.4rem; }
.xr-curio-unknown { display: grid; place-items: center; color: var(--text-4); font: 700 1rem var(--font-display); }

/* ------------------------------------------------------------------ A trip's report (views/exploration.mjs reportBody)
   The same report in the lodge's panel when a trip is collected and in the Trip log afterwards: the story, then a card
   of what was found and brought home, and the XP. While it plays each part rises into place at its moment, then it
   stands still; a Rare or better find rings once in its grade as it is laid out. */
.xr-trip { display: grid; gap: .75rem; }
.xr-trip-head { display: flex; align-items: center; gap: .8rem; }
.xr-trip-head .xr-scout-copy { flex: 1; }
.xr-skip { flex: none; align-self: flex-start; }
.xr-skip .ia-glyph { width: .9rem; height: .9rem; }
.xr-trip.is-log { gap: .55rem; padding: .7rem .8rem; border-radius: .75rem; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .03); }
.xr-trip.is-log.is-latest { border-color: rgba(242, 198, 106, .3); background: linear-gradient(180deg, rgba(242, 198, 106, .07), rgba(255, 255, 255, .02)); }
.xr-trip-head.is-log { gap: .55rem; }
.xr-trip-head.is-log > div { display: grid; flex: 1; min-width: 0; }
.xr-trip-head.is-log strong { font: 400 1rem/1.2 var(--font-display); color: var(--gold-0); }
.xr-trip-head.is-log small { font-size: .76rem; color: var(--text-3); }
.xr-trip-head.is-log .btn { flex: none; }
.xr-story { display: grid; gap: .25rem; padding-left: .7rem; border-left: 2px solid rgba(214, 170, 96, .3); }
.xr-story p { margin: 0; font: italic 400 .92rem/1.45 var(--font-display); color: var(--text-1); }
.xr-trip-card { display: grid; gap: .45rem; padding: .7rem .8rem .8rem; border-radius: .75rem; border: 1px solid rgba(242, 198, 106, .2); background: rgba(0, 0, 0, .2); }
.xr-trip-caps { margin: .1rem 0 0; font: 400 .72rem var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-3); }
.xr-found { display: grid; }
.xr-haul { display: grid; gap: .35rem; }
.xr-haul-item { --grade: var(--rar-common); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .55rem; padding: .35rem .55rem .35rem .35rem; border-radius: .65rem; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .03); }
.xr-haul-item.r-uncommon { --grade: var(--rar-uncommon); }
.xr-haul-item.r-rare { --grade: var(--rar-rare); }
.xr-haul-item.r-epic { --grade: var(--rar-epic); }
.xr-haul-item.r-legendary { --grade: var(--rar-legendary); }
.xr-haul-item.r-mythic { --grade: var(--rar-mythic); }
.xr-haul-item:not(.r-common) { border-color: color-mix(in srgb, var(--grade) 42%, transparent); background: color-mix(in srgb, var(--grade) 8%, transparent); }
.xr-haul-well { position: relative; display: grid; }
.xr-haul-well .well { width: 2.7rem; height: 2.7rem; }
.xr-haul-copy { display: grid; min-width: 0; }
.xr-haul-copy strong { overflow: hidden; font-size: .88rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.xr-haul-copy strong.r-common { color: var(--text-1); }
.xr-haul-copy strong b { font-weight: 600; color: var(--text-2); }
.xr-haul-copy small { font-size: .72rem; line-height: 1.3; color: var(--text-3); }
.xr-haul-item .welcome-new { top: -.45rem; right: .45rem; }
.xr-haul-item.is-graded .xr-haul-well::after { content: ""; position: absolute; inset: -.22rem; border-radius: .75rem; border: 2px solid var(--grade); opacity: 0; pointer-events: none; }
.xr-trip-note { display: flex; align-items: center; gap: .4rem; margin: .15rem 0 0; font-size: .8rem; color: var(--text-3); }
.xr-trip-note .ia-glyph { flex: none; width: .95rem; height: .95rem; }
.xr-trip-xp { display: flex; align-items: center; gap: .55rem; padding: .5rem .7rem; border-radius: .6rem; border: 1px solid rgba(88, 214, 127, .24); background: rgba(88, 214, 127, .08); font-size: .9rem; color: var(--text-2); }
.xr-trip-xp .ia-emblem { flex: none; width: 1.6rem; height: 1.6rem; }
.xr-trip-xp b { font-size: 1.05rem; font-weight: 700; color: #7fe39b; }
/* Playing: each part rises into place at its moment, the story's lines slide in from their rule, and the card's frame
   closes round what was found and brought home when the XP comes, which makes it the summary. */
.xr-trip.is-playing { cursor: pointer; }
.xr-trip.is-playing .xr-t { animation: xr-rise .45s var(--ease-out) var(--at, 0s) both; }
.xr-trip.is-playing .xr-story .xr-t { animation-name: xr-line; }
.xr-trip.is-playing .xr-trip-card { animation: xr-frame .5s var(--ease-out) var(--at, 0s) both; }
.xr-trip.is-playing .xr-haul-item.is-graded .xr-haul-well::after { animation: xr-ring 1.1s var(--ease-out) calc(var(--at, 0s) + .2s) both; }
@keyframes xr-rise { from { opacity: 0; transform: translateY(.45rem); } to { opacity: 1; transform: none; } }
@keyframes xr-line { from { opacity: 0; transform: translateX(-.5rem); } to { opacity: 1; transform: none; } }
@keyframes xr-frame { from { border-color: transparent; background-color: transparent; } }
@keyframes xr-ring { 0% { opacity: 0; transform: scale(.92); } 2% { opacity: 1; } 100% { opacity: 0; transform: scale(1.45); } }
.reduce-motion .xr-trip.is-playing :is(.xr-t, .xr-trip-card), .reduce-motion .xr-trip.is-playing .xr-haul-item.is-graded .xr-haul-well::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .xr-trip.is-playing :is(.xr-t, .xr-trip-card), .xr-trip.is-playing .xr-haul-item.is-graded .xr-haul-well::after { animation: none; } }

/* ------------------------------------------------------------------ Coming soon */
.xr-soon-card { display: flex; align-items: flex-start; gap: .9rem; }
.xr-soon-card > div { display: grid; gap: .3rem; }
.xr-soon-card .t-caps { font-size: .74rem; letter-spacing: .12em; color: var(--gold-3); }
.xr-soon-card strong { font: 400 1.35rem/1.2 var(--font-display); color: var(--gold-0); }
.xr-soon-card p { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--text-2); }

/* ------------------------------------------------------------------ Elsewhere: the Journal and the arena list */
.coll-lair { display: grid; gap: .4rem; margin-top: .55rem; padding-top: .5rem; border-top: 1px dashed rgba(214, 170, 96, .3); }
.coll-lair > .t-caps { display: inline-flex; align-items: center; gap: .35rem; font-size: .7rem; letter-spacing: .1em; color: var(--gold-3); }
.coll-lair .ia-glyph { width: .9rem; height: .9rem; }
.mon-card.is-lair-unknown .card-art.is-unknown { display: grid; place-items: center; font: 700 1.6rem var(--font-display); color: var(--text-3); }
.mon-card.is-lair-unknown { border-style: dashed; }

/* ------------------------------------------------------------------ A phone: bigger marks, and everything flows */
@media (max-width: 760px) {
  .explore-choose { padding-bottom: .6rem; }
  .explore-choose .xr-chart-frame { margin: 0 .6rem; }
  .explore-choose .xr-legend { padding: .45rem .7rem 0; }
  .explore-choose .xr-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: .6rem .6rem 0; }
  .xr-label-name { font-size: 54px; stroke-width: 10px; }
  .xr-label-sub, .xr-site-name, .xr-first, .xr-place, .xr-lodge-name { display: none; }
  .xr-soon-title { font-size: 64px; }
  .explore-detail .xr-scout-card { flex-wrap: wrap; }
  /* A trip's report on a phone: the chart and the report under it, without the key and the ladder between them. The
     page scrolls to the chart when a trip plays, leaving room for its plaque. */
  .explore-page.has-report .explore-choose :is(.xr-legend, .xr-ladder) { display: none; }
  .explore-page .explore-choose { scroll-margin-top: 1.5rem; }
}

/* ------------------------------------------------------------------ The desktop's window */
@media (min-width: 761px) {
  .is-hud .explore-body { grid-template-columns: minmax(0, 1fr) 27rem; }
  .is-hud .explore-main { gap: .55rem; }
  /* The chart takes every bit of the column the ladder leaves, whatever the window's shape, and stays whole. */
  .is-hud .explore-main .xr-chart-frame { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .is-hud .explore-main .xr-chart { flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; background: none; box-shadow: none; }
  .is-hud .explore-main .xr-legend { flex: none; justify-content: center; padding-top: .35rem; }
  .is-hud .explore-main .xr-ladder { flex: none; margin-top: .1rem; }
  .is-hud .explore-side .detail-scroll { gap: .75rem; }
  .is-hud .explore-side .xr-foot { display: grid; gap: .45rem; }
  .is-hud .explore-side .xr-tabs { border-color: rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .04); box-shadow: none; }
  .is-hud .explore-page .win-aside .xr-home-note { justify-self: end; }
}