/* ═══════════════════════════════════════════════════════════════════════════
   EXPEDITION — "Into the Deep"
   Everything from the Set Forth muster to the victory, retreat or defeat
   screen (public/static/screens/expedition.js). Namespaced .xp-*; built on the
   Gilt & Obsidian tokens in game.css. Art lives in /static/expedition/.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The expedition paints its own scenes (no shared screen backdrop), on the
   darkest obsidian so the art's fades land on the same colour. */
body[data-screen="expedition"] #screen-container {
  background-image: none;
  background-color: var(--ob-0);
}

/* A run is full screen: no tab bar or chat strip under the map (the HUD's
   menu holds the way out). Scoped to the expedition screen so a stale class
   can never hide the nav anywhere else. */
body[data-screen="expedition"].xp-immersive #bottom-nav,
body[data-screen="expedition"].xp-immersive #chat-bar { display: none !important; }
body[data-screen="expedition"].xp-immersive #screen-container { bottom: 0 !important; top: env(safe-area-inset-top, 0px) !important; }
body[data-screen="expedition"].xp-immersive #discord-banner { display: none !important; }

/* ── Shared type ─────────────────────────────────────────────────────────── */
.xp-kicker {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gilt);
}
.xp-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.08;
  letter-spacing: 0.03em;
  background: var(--gilt-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.9));
}
.xp-lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--tx-1);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.95);
}
.xp-h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gilt-hi);
}
.xp-muted { color: var(--tx-3); }
.xp-small { font-family: var(--font-ui); font-size: 12.5px; color: var(--tx-2); line-height: 1.4; }
.xp-rule {
  height: 1px; border: 0; margin: 14px 0;
  background: linear-gradient(90deg, transparent, var(--gilt-line-strong), transparent);
}
.xp-num { font-family: var(--font-ui); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── Sections & buttons ──────────────────────────────────────────────────── */
/* A section is a heading over a hairline, never a box: nothing nests in cards. */
.xp-panel { position: relative; padding-top: 14px; border-top: 1px solid var(--ob-line); }
.xp-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.xp-panel--risk { border-top-color: rgba(229, 72, 77, 0.3); }
.xp-panel--safe { border-top-color: rgba(63, 207, 142, 0.3); }

.xp-cta {
  width: 100%;
  min-height: 54px;
  font-size: 17px;
  letter-spacing: 0.04em;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  position: relative;
  overflow: hidden;
}
.xp-cta::after {                                   /* slow sheen across the metal */
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-18deg);
  animation: xpSheen 4.5s ease-in-out infinite 1.2s;
  pointer-events: none;
}
.xp-cta:disabled { filter: grayscale(0.85) brightness(0.6); cursor: not-allowed; }
.xp-cta:disabled::after { display: none; }
.xp-cta:active:not(:disabled) { transform: translateY(1px) scale(0.99); }
.xp-cta__cost { display: inline-flex; align-items: center; gap: 3px; padding-left: 10px; border-left: 1px solid rgba(34, 22, 10, 0.3); font-size: 14px; }
.xp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 16px; width: 100%;
  border-radius: 10px;
  font-family: var(--font-ui); font-weight: 800; font-size: 14.5px; letter-spacing: 0.02em;
  color: var(--tx-1);
  background: linear-gradient(180deg, rgba(40, 33, 54, 0.9), rgba(24, 20, 33, 0.95));
  border: 1px solid var(--gilt-line);
  transition: transform 0.12s var(--ease-out), border-color 0.2s, filter 0.2s;
}
.xp-btn:hover { border-color: var(--gilt-line-strong); }
.xp-btn:active { transform: translateY(1px); }
.xp-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.xp-btn--quiet { background: transparent; border-color: transparent; color: var(--tx-3); min-height: 40px; }
.xp-btn--quiet:hover { color: var(--tx-1); }
.xp-btn--blood { color: #ffd9d9; border-color: rgba(229, 72, 77, 0.45); background: linear-gradient(180deg, rgba(110, 24, 32, 0.9), rgba(60, 12, 18, 0.95)); }
.xp-btn--jade { color: #d6ffea; border-color: rgba(63, 207, 142, 0.45); background: linear-gradient(180deg, rgba(20, 90, 60, 0.9), rgba(12, 50, 36, 0.95)); }

/* transform, not left, so the sheen never re-lays the page out each frame:
   475% of its own 40% width is the old left: -60% -> 130% sweep. */
@keyframes xpSheen { 0%, 70% { transform: translateX(0) skewX(-18deg); } 100% { transform: translateX(475%) skewX(-18deg); } }

/* Staggered entrance for anything marked .xp-rise (delay set inline). */
.xp-rise { animation: xpRise 0.6s var(--ease-out) both; }
@keyframes xpRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes xpFade { from { opacity: 0; } to { opacity: 1; } }

/* Floating embers (lobby + endings) */
.xp-embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.xp-embers i {
  position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%;
  background: radial-gradient(circle, #ffd27a 0%, #ff8a3d 60%, transparent 100%);
  box-shadow: 0 0 6px 1px rgba(255, 150, 60, 0.7);
  opacity: 0;
  animation: xpEmber var(--d, 8s) linear infinite var(--delay, 0s);
}
@keyframes xpEmber {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  10%  { opacity: 0.9; }
  80%  { opacity: 0.6; }
  100% { transform: translate(var(--dx, 20px), -420px) scale(0.4); opacity: 0; }
}

/* ═══ THE MUSTER (lobby) ═════════════════════════════════════════════════ */
.xp-lobby { position: relative; padding-bottom: 8px; }
.xp-hero {
  position: relative;
  height: min(400px, 54vh);
  overflow: hidden;
  margin-bottom: -64px;
}
.xp-hero__art {
  position: absolute; inset: -4% -4% 0 -4%;
  background-size: cover;
  background-position: center 28%;
  transform-origin: 50% 38%;
  animation: xpKen 38s ease-in-out infinite alternate;
}
@keyframes xpKen { from { transform: scale(1.02); } to { transform: scale(1.12) translateY(1.5%); } }
.xp-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 6, 11, 0.55) 0%, transparent 18%, transparent 46%, rgba(7, 6, 11, 0.7) 74%, var(--ob-0) 100%),
    radial-gradient(ellipse 90% 60% at 50% 30%, transparent 40%, rgba(7, 6, 11, 0.5) 100%);
}
.xp-lobby .xp-hero__art { background-position: 62% center; }   /* the doorway backdrop: keep the arch in frame */
.xp-hero__caption { position: absolute; left: 18px; right: 18px; bottom: 76px; z-index: 2; }
.xp-hero__caption .xp-title { font-size: 38px; margin: 6px 0 6px; }
.xp-hero__caption .xp-kicker { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95); }

.xp-lobby__body { position: relative; z-index: 3; padding: 0 14px; display: flex; flex-direction: column; gap: 12px; }

/* Depth chooser */
.xp-depth__scroller {
  display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 10px; margin: 0 -14px; padding-left: 14px; padding-right: 14px;
  scroll-snap-type: x proximity; scrollbar-width: none;
}
.xp-depth__scroller::-webkit-scrollbar { display: none; }
.xp-depth__stage { flex-shrink: 0; scroll-snap-align: start; }
.xp-depth__stage-label {
  display: flex; align-items: baseline; gap: 6px; margin: 0 0 6px 2px;
  font-family: var(--font-ui); font-weight: 800; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tx-3);
}
.xp-depth__stage-label b { color: var(--tx-2); }
.xp-depth__stage-label .is-low { color: var(--ember); }
.xp-depth__floors { display: flex; gap: 6px; }
.xp-floor {
  position: relative;
  width: 50px; height: 64px;
  border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: linear-gradient(180deg, rgba(36, 30, 49, 0.9), rgba(19, 16, 27, 0.95));
  border: 1px solid var(--ob-line);
  color: var(--tx-2);
  transition: transform 0.18s var(--ease-spring), border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.xp-floor__n { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1; }
.xp-floor__tag { font-family: var(--font-ui); font-weight: 800; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tx-3); height: 12px; display: flex; align-items: center; gap: 2px; }
.xp-floor--boss { border-color: rgba(229, 72, 77, 0.28); }
.xp-floor--boss .xp-floor__tag { color: #ff9ea0; }
.xp-floor--camp { border-color: rgba(63, 207, 142, 0.45); }
.xp-floor--camp .xp-floor__tag { color: var(--jade); }
.xp-floor--low .xp-floor__n { color: #ffc27a; }
.xp-floor.is-selected {
  transform: translateY(-3px);
  border-color: var(--gilt-line-strong);
  background: linear-gradient(180deg, rgba(92, 70, 32, 0.55), rgba(34, 26, 16, 0.95));
  color: var(--gilt-hi);
}
.xp-floor.is-selected::after {
  content: ''; position: absolute; left: 50%; bottom: -7px; width: 8px; height: 8px; margin-left: -4px;
  transform: rotate(45deg); background: var(--gilt);
}
.xp-depth__note { margin-top: 6px; }
.xp-depth__note .is-warn { color: #ffc27a; }
.xp-depth__note .is-camp { color: var(--jade); }

.xp-mats { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.xp-mat { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-weight: 700; font-size: 12.5px; color: var(--tx-2); }
.xp-mat b { color: var(--gilt-hi); }

/* Party builder: the hero, then one seat per party slot (locked slots show
   the level that opens them). Shared with the titan muster (titan.js). */
.xp-seats { display: grid; grid-template-columns: repeat(var(--seats, 4), minmax(0, 1fr)); gap: 4px; }
.xp-seat {
  position: relative; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 4px 0 2px; margin: 0;
  background: none; border: 0; border-radius: 12px;
  color: var(--tx-1); font-family: var(--font-ui); text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s var(--ease-out);
}
button.xp-seat { cursor: pointer; }
button.xp-seat:active { transform: scale(0.95); }
.xp-seat__disc {
  --sz: 56px;
  position: relative; flex-shrink: 0;
  width: var(--sz); height: var(--sz); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, #2b2338, #0f0c15);
  box-shadow: 0 0 0 2px #0b0910, 0 0 0 3.5px var(--role, var(--gilt-mid)), 0 6px 14px rgba(0, 0, 0, 0.7);
  transition: box-shadow 0.2s;
}
.xp-seat__disc > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.xp-seat__disc--hero { box-shadow: 0 0 0 2px #0b0910, 0 0 0 4px var(--gilt), 0 0 18px rgba(224, 188, 106, 0.28), 0 6px 14px rgba(0, 0, 0, 0.7); }
.xp-seat__role {
  position: absolute; top: -3px; left: -3px;
  width: calc(var(--sz) * 0.39); height: calc(var(--sz) * 0.39); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #120e18;
  box-shadow: 0 0 0 1.5px var(--role, var(--gilt-mid)), 0 2px 6px rgba(0, 0, 0, 0.8);
}
.xp-seat__rank {
  position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  min-width: 22px; height: 15px; padding: 0 5px; border-radius: 4px;
  font-family: var(--font-display); font-weight: 700; font-size: 10px; line-height: 15px; letter-spacing: 0.04em;
  color: #2a1c08; background: var(--gilt-metal);
  box-shadow: 0 0 0 1.5px #0b0910, 0 2px 4px rgba(0, 0, 0, 0.7);
}
.xp-seat__name {
  max-width: 100%; margin-top: 5px; padding: 0 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 800; font-size: 12px; line-height: 1.15; color: var(--tx-1);
}
.xp-seat__sub { height: 10px; font-weight: 800; font-size: 9.5px; line-height: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tx-3); }
.xp-seat--hero .xp-seat__name { color: var(--gilt-hi); }
.xp-seat__disc--empty {
  background: rgba(224, 188, 106, 0.04); box-shadow: none;
  border: 1.5px dashed rgba(224, 188, 106, 0.5);
  font-family: var(--font-display); font-size: 26px; line-height: 1; color: var(--gilt);
}
.xp-seat.is-empty .xp-seat__name { color: var(--tx-3); }
.xp-seat.is-empty .xp-seat__sub { color: var(--gilt-mid); }
@media (hover: hover) {
  .xp-seat.is-empty:hover .xp-seat__disc--empty { border-color: var(--gilt); background: rgba(224, 188, 106, 0.09); }
  button.xp-seat:not(.is-empty):hover .xp-seat__disc { box-shadow: 0 0 0 2px #0b0910, 0 0 0 3.5px var(--gilt-hi), 0 6px 14px rgba(0, 0, 0, 0.7); }
}
.xp-seat__disc--locked { background: var(--ob-2); box-shadow: 0 0 0 1px var(--ob-line), inset 0 2px 10px rgba(0, 0, 0, 0.7); }
.xp-seat__disc--locked svg { width: 20px; height: 20px; fill: var(--tx-4); }
.xp-seat.is-locked .xp-seat__name { color: var(--tx-3); }
.xp-seat.is-locked .xp-seat__sub { color: var(--tx-4); }
/* Death's Door: one more fall kills them */
.xp-seat__disc.is-dd {
  box-shadow: 0 0 0 2px #0b0910, 0 0 0 3.5px var(--ruby), 0 0 16px rgba(229, 72, 77, 0.5), 0 6px 14px rgba(0, 0, 0, 0.7);
  animation: xpDoor 2.6s ease-in-out infinite;
}
@keyframes xpDoor { 50% { box-shadow: 0 0 0 2px #0b0910, 0 0 0 3.5px var(--ruby), 0 0 26px rgba(229, 72, 77, 0.85), 0 6px 14px rgba(0, 0, 0, 0.7); } }

/* Wound pips: Bruised, Battered, Death's Door. A hollow pip is a wound
   still to come home (fell this run). */
.xp-wounds { display: inline-flex; align-items: center; gap: 3px; height: 10px; }
.xp-wounds i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.13); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6); }
.xp-wounds i.is-on { background: radial-gradient(circle at 40% 35%, #ff8a8d, var(--ruby) 60%, #8a1a20); box-shadow: 0 0 5px rgba(229, 72, 77, 0.6); }
.xp-wounds i.is-due { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ruby); }
.xp-wounds--sm { height: 6px; gap: 2px; }
.xp-wounds--sm i { width: 5px; height: 5px; }

/* Party strength: attack and HP with the hero counted, then the role mix */
.xp-strength {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 16px;
  font-family: var(--font-ui); font-weight: 700; font-size: 12px; color: var(--tx-3);
}
.xp-strength__stat { display: inline-flex; align-items: center; gap: 5px; }
.xp-strength__stat b { color: var(--tx-1); font-size: 14px; }
.xp-strength__roles {
  flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px;
  font-weight: 800; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
}
.xp-strength__roles i { width: 3px; height: 3px; border-radius: 50%; background: var(--tx-4); }
/* Companion Command chips (PartyBuilder.commandHtml) */
.xp-cmd { margin-top: 14px; }
.xp-cmd__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.xp-cmd__k { font-family: var(--font-ui); font-weight: 800; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tx-3); }
.xp-cmd__all { display: inline-flex; border: 1px solid var(--ob-line); border-radius: 999px; overflow: hidden; }
.xp-cmd__opt {
  display: inline-flex; align-items: center; gap: 3px; padding: 4px 9px; background: none; border: 0; cursor: pointer;
  font-family: var(--font-ui); font-weight: 800; font-size: 11px; color: var(--tx-3);
}
.xp-cmd__opt + .xp-cmd__opt { border-left: 1px solid var(--ob-line); }
.xp-cmd__opt.is-on { color: var(--gilt-hi); background: rgba(224, 188, 106, 0.14); }
.xp-cmd__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.xp-cmd__chip {
  display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; padding: 5px 10px; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--ob-line); background: rgba(255, 255, 255, 0.03);
  font-family: var(--font-ui); font-size: 11.5px; color: var(--tx-2);
}
.xp-cmd__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-cmd__chip b { font-weight: 800; color: var(--tx-1); }
.xp-cmd__chip.is-advanced b { color: #9fc4ff; }
.xp-cmd__chip.is-manual b { color: var(--gilt-hi); }
.xp-party__note { display: block; margin-top: 12px; }
.xp-party__note + .xp-party__note { margin-top: 6px; }
.xp-party__note--dd { color: #ff9ea0; }
.xp-linkbtn {
  padding: 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-ui); font-weight: 800; font-size: 12.5px; color: var(--gilt);
  text-decoration: underline; text-decoration-color: rgba(224, 188, 106, 0.45); text-underline-offset: 3px;
}

/* Slot picker (a sheet) and the run's party sheet: rows over hairlines */
.xp-picks { display: flex; flex-direction: column; }
.xp-pick {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 4px 13px; margin: 0;
  background: none; border: 0; border-bottom: 1px solid var(--ob-line); border-radius: 0;
  color: var(--tx-1); font-family: var(--font-ui);
  -webkit-tap-highlight-color: transparent;
}
.xp-pick:last-child { border-bottom: 0; }
button.xp-pick:not(:disabled) { cursor: pointer; }
button.xp-pick:not(:disabled):active { background: rgba(255, 255, 255, 0.04); }
.xp-pick.is-on { background: linear-gradient(90deg, rgba(224, 188, 106, 0.13), transparent 75%); }
.xp-pick.is-away { opacity: 0.5; filter: grayscale(0.85); cursor: not-allowed; }
.xp-pick__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.xp-pick__name { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.02em; color: var(--tx-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-pick__role { font-size: 12px; color: var(--tx-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-pick__role b { font-weight: 800; }
.xp-pick__side { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.xp-pick__tag { font-weight: 800; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tx-3); }
.xp-pick.is-on .xp-pick__tag { color: var(--gilt); }
.xp-pick__atk { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--tx-2); }
.xp-pick__dd { font-weight: 800; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #ff9ea0; }

/* The run's party in the dock: portrait, wound pips, a skull for a fall */
.xp-crew {
  flex-shrink: 0; display: flex; align-items: flex-start; gap: 6px;
  padding: 0; margin: 0; background: none; border: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.xp-crew:active { transform: scale(0.96); }
.xp-crew__member { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.xp-crew__face {
  position: relative; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, #2b2338, #0f0c15);
  box-shadow: 0 0 0 1.5px #0b0910, 0 0 0 3px var(--role, var(--gilt-mid)), 0 4px 10px rgba(0, 0, 0, 0.7);
}
.xp-crew__face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.xp-crew__initial { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--gilt-hi); }
.xp-crew__skull {
  position: absolute; right: -5px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #1c0b0e; box-shadow: 0 0 0 1.5px var(--ruby), 0 2px 4px rgba(0, 0, 0, 0.8);
}
.xp-crew__skull svg { width: 11px; height: 11px; fill: #ff9ea0; }
.xp-crew__member.is-fell .xp-crew__face img { filter: saturate(0.55) brightness(0.8); }
.xp-crew__member.is-dd .xp-crew__face { box-shadow: 0 0 0 1.5px #0b0910, 0 0 0 3px var(--ruby), 0 0 10px rgba(229, 72, 77, 0.6); }
.xp-crew__member.is-dead .xp-crew__face { box-shadow: 0 0 0 1.5px #0b0910, 0 0 0 3px #4a2a2e; }
.xp-crew__member.is-dead .xp-crew__face img { filter: grayscale(1) brightness(0.4); }
.xp-crew__member.is-dead .xp-crew__skull { inset: 0; margin: auto; width: 20px; height: 20px; background: none; box-shadow: none; }
.xp-crew__member.is-dead .xp-crew__skull svg { width: 16px; height: 16px; }
.xp-crew__status { font-size: 12.5px; line-height: 1.3; color: var(--tx-3); }
.xp-crew__status.is-fell { color: #ffc27a; }
.xp-crew__status.is-dead { color: #ff9ea0; }
@media (prefers-reduced-motion: reduce) {
  .xp-seat__disc.is-dd { animation: none; }
}

/* Rules */
.xp-rules summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.xp-rules summary::-webkit-details-marker { display: none; }
.xp-rules summary::after { content: '+'; font-family: var(--font-display); color: var(--gilt); font-size: 18px; transition: transform 0.25s; }
.xp-rules[open] summary::after { transform: rotate(45deg); }
.xp-rules ol { list-style: none; counter-reset: rule; margin-top: 10px; display: flex; flex-direction: column; gap: 9px; }
.xp-rules li { counter-increment: rule; display: flex; gap: 10px; font-family: var(--font-serif); font-size: 14.5px; line-height: 1.4; color: var(--tx-2); }
.xp-rules li::before {
  content: counter(rule, upper-roman); flex-shrink: 0; width: 24px; text-align: right;
  font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--gilt-mid); padding-top: 2px;
}

/* Sticky muster bar */
.xp-musterbar {
  position: sticky; bottom: 0; z-index: 6;
  margin-top: 6px;
  padding: 18px 14px 12px;
  background: linear-gradient(180deg, transparent 0, var(--ob-0) 16px);
}
.xp-stam { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; font-family: var(--font-ui); font-weight: 700; font-size: 12.5px; color: var(--tx-2); }
.xp-stam__bar { flex: 1; height: 6px; border-radius: 99px; background: var(--ob-4); overflow: hidden; position: relative; }
.xp-stam__fill { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, #1f9e62, #3fcf8e); }
.xp-stam__cost { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: repeating-linear-gradient(45deg, rgba(255, 230, 170, 0.85) 0 3px, rgba(255, 200, 110, 0.55) 3px 6px); }
.xp-stam__need { color: #ff9ea0; }
.xp-topups { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

/* ═══ THE RUN (map) ══════════════════════════════════════════════════════ */
.xp-run { position: relative; min-height: 100%; background: #06050a; display: flex; flex-direction: column; }
.xp-hud {
  position: sticky; top: 0; z-index: 30;
  padding: 8px 10px 14px;
  background: linear-gradient(180deg, rgba(6, 5, 10, 0.97) 0%, rgba(6, 5, 10, 0.9) 62%, rgba(6, 5, 10, 0) 100%);
}
.xp-hud__row { display: flex; align-items: center; gap: 8px; }
.xp-depthbadge {
  flex-shrink: 0; width: 52px; height: 56px; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #2a2112, #120d07);
  padding-bottom: 8px;
  /* a heater shield: flat top, straight sides, curving to a point */
  clip-path: polygon(0 0, 100% 0, 100% 48%, 98% 60%, 93% 71%, 85% 81%, 74% 89%, 62% 95%, 50% 100%, 38% 95%, 26% 89%, 15% 81%, 7% 71%, 2% 60%, 0 48%);
}
.xp-depthbadge::before { content: ''; position: absolute; inset: 1.5px; background: linear-gradient(180deg, #1b1522, #0c0a11); clip-path: inherit; }
.xp-depthbadge::after { content: ''; position: absolute; inset: 0; background: var(--gilt-metal); clip-path: inherit; z-index: -1; }
.xp-depthbadge { isolation: isolate; }
.xp-depthbadge span { position: relative; font-family: var(--font-ui); font-weight: 800; font-size: 8.5px; letter-spacing: 0.18em; color: var(--gilt-mid); margin-top: -2px; }
.xp-depthbadge b { position: relative; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1; color: var(--gilt-hi); }
.xp-hud__mid { flex: 1; min-width: 0; }
.xp-hud__place { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; color: var(--tx-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-pips { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; margin-top: 5px; }
.xp-pips__label { font-family: var(--font-ui); font-weight: 800; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tx-3); margin-right: 3px; white-space: nowrap; }
.xp-pip { width: 18px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); }
.xp-pip.is-done { background: linear-gradient(90deg, #b88f45, #e0bc6a); }
.xp-pip.is-here { background: var(--gilt-hi); }
.xp-pip--boss { width: 14px; height: 14px; border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; }
.xp-pip--boss svg { width: 14px; height: 14px; fill: rgba(255, 255, 255, 0.18); }
.xp-pip--boss.is-here svg, .xp-pip--boss.is-done svg { fill: #ff7a7e; }
.xp-pip--boss.is-here { background: transparent; }
.xp-ledgerbtn {
  flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  padding: 5px 9px; border-radius: 10px;
  background: rgba(20, 16, 28, 0.85); border: 1px solid var(--gilt-line);
  font-family: var(--font-ui); font-weight: 800; font-size: 12.5px; color: var(--tx-1); line-height: 1.25;
}
.xp-ledgerbtn span { display: inline-flex; align-items: center; gap: 4px; }
.xp-ledgerbtn .xp-xp { color: #9cc2ff; }
.xp-ledgerbtn .xp-ledgerbtn__top { gap: 9px; }
.xp-ledgerbtn .xp-stamhud { color: #6fe0a8; }
.xp-ledgerbtn.is-bump { animation: xpBump 0.6s var(--ease-spring); }
@keyframes xpBump { 30% { transform: scale(1.12); border-color: var(--gilt); } }
.xp-iconbtn {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 16, 28, 0.85); border: 1px solid var(--gilt-line); color: var(--gilt);
}
.xp-iconbtn svg { width: 20px; height: 20px; }
.xp-blessings { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; }
.xp-blessing {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 38%, #2c2210, #120d04 75%);
  border: 1.5px solid #d7b45e;
}

/* Map */
.xp-map { position: relative; flex: 0 0 auto; overflow: hidden; margin-top: -14px; touch-action: pan-y; }
.xp-map__bg { position: absolute; inset: 0; overflow: hidden; }
.xp-map__tile { display: block; width: 100%; background-size: 100% 100%; }
.xp-map__tile--flip { transform: scaleY(-1); }
.xp-map__shade {                         /* torchlight: the ground darkens away from you */
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at var(--lx, 50%) var(--ly, 90%), rgba(255, 190, 110, 0.16) 0, rgba(255, 170, 90, 0.06) 100px, rgba(6, 5, 10, 0.08) 170px, rgba(6, 5, 10, 0.34) 340px, rgba(6, 5, 10, 0.5) 100%);
  transition: --lx 0.6s, --ly 0.6s;
}
.xp-map__edges { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 5, 10, 0.75), transparent 14%, transparent 86%, rgba(6, 5, 10, 0.75)); pointer-events: none; }
.xp-map svg.xp-map__paths { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.xp-path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.xp-path--under { stroke: rgba(0, 0, 0, 0.55); stroke-width: 6; }
.xp-path--walked { stroke: #e0bc6a; stroke-width: 3; }
.xp-path--open { stroke: #f7e6b0; stroke-width: 3.2; stroke-dasharray: 1 9; }
.xp-path--far { stroke: rgba(242, 233, 216, 0.3); stroke-width: 2; stroke-dasharray: 1 7; }

.xp-map__nodes { position: absolute; inset: 0; }
.xp-node {
  position: absolute;
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%;
  padding: 0; border: 0; background: none;
  -webkit-tap-highlight-color: transparent;
}
.xp-node__disc {
  position: absolute; inset: 0; border-radius: 50%;
  background: #120e18 center / cover no-repeat;
  box-shadow:
    0 0 0 2px #0a0810,
    0 0 0 4px #9a7436,
    0 0 0 5px #2a1f0f,
    0 8px 16px rgba(0, 0, 0, 0.75);
  transition: filter 0.3s, transform 0.25s var(--ease-spring);
}
.xp-node--big { width: 70px; height: 70px; margin: -35px 0 0 -35px; }
.xp-node--big .xp-node__disc { box-shadow: 0 0 0 2px #0a0810, 0 0 0 4px #b58a3e, 0 0 0 5px #2a1f0f, 0 10px 20px rgba(0, 0, 0, 0.8); }
.xp-node--start { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
.xp-node--far .xp-node__disc { filter: saturate(0.75) brightness(0.72); }
.xp-node--visited .xp-node__disc { filter: grayscale(0.85) brightness(0.45); }
.xp-node--open { cursor: pointer; z-index: 3; }
.xp-node--open .xp-node__disc { box-shadow: 0 0 0 2px #0a0810, 0 0 0 4px var(--gilt-hi), 0 0 0 5px #2a1f0f, 0 8px 16px rgba(0, 0, 0, 0.75); }
.xp-node--open:active .xp-node__disc { transform: scale(0.92); }
.xp-node__label {
  position: absolute; left: 50%; top: 100%; transform: translate(-50%, 6px);
  white-space: nowrap; pointer-events: none;
  font-family: var(--font-ui); font-weight: 800; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tx-2);
  text-shadow: 0 0 3px #06050a, 0 0 6px #06050a, 0 1px 2px #06050a;
}
.xp-node--open .xp-node__label { color: var(--gilt-hi); }
.xp-node--big .xp-node__label { color: #ffb3b5; }
.xp-node--stairs .xp-node__label { color: #bcd0ff; }
.xp-node.is-chosen .xp-node__disc { transform: scale(1.08); }
.xp-node.omen-revealing .xp-node__disc { filter: brightness(1.4) drop-shadow(0 0 16px rgba(240, 208, 96, 0.9)); }

/* A choice made: the branches it rules out go up in smoke */
.xp-node.is-vanishing { pointer-events: none; transition: opacity 0.6s ease 0.1s, transform 0.7s ease, filter 0.6s ease; opacity: 0; transform: scale(0.55); filter: blur(3px); }
.xp-path.is-vanishing { transition: opacity 0.5s ease; opacity: 0; }
.xp-smoke { position: absolute; z-index: 4; width: 0; height: 0; pointer-events: none; }
.xp-smoke i {
  position: absolute; left: -28px; top: -28px; width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle, rgba(206, 198, 218, 0.9) 0%, rgba(160, 152, 178, 0.5) 45%, rgba(120, 112, 140, 0) 72%);
  filter: blur(2px); opacity: 0;
  animation: xpPuff 1.1s ease-out forwards;
}
.xp-smoke i:nth-child(1) { --px: -26px; --py: -18px; }
.xp-smoke i:nth-child(2) { --px: 24px; --py: -22px; animation-delay: 0.05s; }
.xp-smoke i:nth-child(3) { --px: -6px; --py: -34px; animation-delay: 0.1s; }
.xp-smoke i:nth-child(4) { --px: -20px; --py: 14px; animation-delay: 0.08s; }
.xp-smoke i:nth-child(5) { --px: 22px; --py: 12px; animation-delay: 0.12s; }
.xp-smoke i:nth-child(6) { --px: 2px; --py: -4px; animation-delay: 0s; }
@keyframes xpPuff {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--px), var(--py)) scale(1.6); }
}

/* The hero's token */
.xp-token {
  position: absolute; z-index: 6; width: 50px; height: 50px; margin: -25px 0 0 -25px;
  pointer-events: none; will-change: left, top;
}
.xp-token__face {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #2b2338, #0f0c15);
  box-shadow: 0 0 0 2px #0b0910, 0 0 0 4.5px var(--gilt), 0 0 0 5.5px #3a2a10, 0 10px 18px rgba(0, 0, 0, 0.8);
  animation: xpBob 2.6s ease-in-out infinite;
}
.xp-token__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xp-token.is-walking .xp-token__face { animation: xpWalk 0.32s ease-in-out infinite; }
@keyframes xpBob { 50% { transform: translateY(-3px); } }
@keyframes xpWalk { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } }

/* Fog of the unknown */
.xp-map__fog { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; z-index: 5; transition: height 0.9s var(--ease-out); }
.xp-map__fog::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 22% at 30% 38%, rgba(96, 84, 128, 0.22), transparent 70%),
    radial-gradient(ellipse 55% 20% at 72% 64%, rgba(96, 84, 128, 0.2), transparent 70%),
    linear-gradient(180deg, rgba(6, 5, 10, 0.9) 0%, rgba(10, 8, 16, 0.84) calc(100% - 170px), rgba(10, 8, 16, 0.55) calc(100% - 70px), rgba(10, 8, 16, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 90px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 90px), transparent 100%);
}
.xp-map__fog::after {
  content: ''; position: absolute; left: -30%; right: -30%; bottom: 0; height: 220px; opacity: 0.75;
  background:
    radial-gradient(ellipse 30% 40% at 20% 70%, rgba(120, 104, 150, 0.35), transparent 70%),
    radial-gradient(ellipse 26% 34% at 55% 55%, rgba(140, 124, 170, 0.28), transparent 70%),
    radial-gradient(ellipse 34% 40% at 85% 72%, rgba(110, 96, 140, 0.32), transparent 70%);
  animation: xpFogDrift 16s ease-in-out infinite alternate;
}
@keyframes xpFogDrift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }

.xp-map__embers { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }

/* Dock: health, flask */
.xp-dock {
  position: sticky; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 18px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(0deg, rgba(6, 5, 10, 0.98) 0%, rgba(6, 5, 10, 0.94) 64%, rgba(6, 5, 10, 0) 100%);
}
.xp-hp { flex: 1; min-width: 0; }
.xp-hp__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; font-family: var(--font-ui); font-weight: 800; font-size: 12px; color: var(--tx-2); }
.xp-hp__top b { color: var(--tx-1); font-size: 13px; }
.xp-hp__bar { height: 10px; border-radius: 99px; background: #1b0d10; overflow: hidden; position: relative; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05); }
.xp-hp__fill { position: absolute; inset: 0 auto 0 0; border-radius: 99px; transition: width 0.8s var(--ease-out); background: linear-gradient(180deg, #ff6b6f, #c3262d); }
.xp-hp__fill.is-ok { background: linear-gradient(180deg, #5be3a3, #1f9e62); }
.xp-hp__fill.is-mid { background: linear-gradient(180deg, #ffd27a, #d98e1f); }
.xp-hp__fill::after { content: ''; position: absolute; inset: 0 0 50% 0; background: rgba(255, 255, 255, 0.22); border-radius: 99px; }
.xp-flask {
  flex-shrink: 0; display: flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 12px 0 8px; border-radius: 10px;
  background: rgba(20, 16, 28, 0.85); border: 1px solid var(--gilt-line); color: var(--tx-1);
  font-family: var(--font-ui); font-weight: 800; font-size: 14px;
}
.xp-flask:disabled { border-color: var(--ob-line); color: var(--tx-4); }
.xp-flask__count { color: var(--tx-3); font-size: 12px; }
.xp-flask.is-drinking { animation: xpBump 0.6s var(--ease-spring); }

/* ═══ SHEETS (menu, ledger, retreat) ═════════════════════════════ */
.xp-sheet { position: fixed; inset: 0; z-index: 420; display: flex; align-items: flex-end; justify-content: center; }
.xp-sheet__scrim { position: absolute; inset: 0; background: rgba(4, 3, 7, 0.66); animation: xpFade 0.25s ease both; }
.xp-sheet__panel {
  position: relative; width: 100%; max-width: 448px; max-height: 82vh; overflow-y: auto;
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  border-radius: 20px 20px 0 0;
  background: linear-gradient(180deg, #1b1624 0%, #0e0b14 100%);
  border-top: 1px solid var(--gilt-line-strong);
  box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.8);
  animation: xpSheetUp 0.38s var(--ease-out) both;
}
.xp-sheet__grip { width: 40px; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.18); margin: 0 auto 12px; }
@keyframes xpSheetUp { from { transform: translateY(100%); } to { transform: none; } }
.xp-menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 2px; border-bottom: 1px solid var(--ob-line);
}
.xp-menu-item:active { background: rgba(255, 255, 255, 0.04); }
.xp-menu-item__icon { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: #120e18 center/cover; box-shadow: 0 0 0 2px #0a0810, 0 0 0 3px #9a7436; }
.xp-menu-item b { display: block; font-family: var(--font-display); font-size: 14.5px; color: var(--tx-1); letter-spacing: 0.02em; }
.xp-menu-item > span > span { display: block; font-family: var(--font-ui); font-size: 12.5px; color: var(--tx-3); margin-top: 1px; }
.xp-menu-item--danger b { color: #ffb3b5; }

/* Loot lists */
.xp-loot { display: flex; flex-direction: column; gap: 5px; }
.xp-loot__row { display: flex; align-items: center; gap: 9px; min-height: 26px; font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: var(--tx-1); }
.xp-loot__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--rar-text, var(--tx-1)); }
.xp-loot__meta { color: var(--tx-3); font-size: 11.5px; flex-shrink: 0; }
.xp-loot__row.is-lost .xp-loot__name { text-decoration: line-through; text-decoration-color: rgba(229, 72, 77, 0.8); opacity: 0.6; }
.xp-sub { font-family: var(--font-ui); font-weight: 800; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tx-3); margin: 10px 0 6px; }
.xp-sub:first-child { margin-top: 0; }
.xp-tally { display: grid; grid-template-columns: repeat(3, 1fr); }
.xp-tally__cell { padding: 2px 6px; text-align: center; }
.xp-tally__cell + .xp-tally__cell { border-left: 1px solid var(--ob-line); }
.xp-tally__cell b { display: flex; align-items: center; justify-content: center; gap: 4px; font-family: var(--font-ui); font-weight: 800; font-size: 19px; color: var(--gilt-hi); font-variant-numeric: tabular-nums; }
.xp-tally__cell > span { display: block; margin-top: 2px; font-family: var(--font-ui); font-weight: 800; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tx-3); }
.xp-tally__cell--xp b { color: #a9c8ff; }

/* ═══ SCENES (encounters) ════════════════════════════════════════════════ */
.xp-scene {
  position: fixed; inset: 0; z-index: 400;
  overflow-y: auto; overflow-x: hidden;
  background: rgba(3, 2, 6, 0.86);
  opacity: 0; transition: opacity 0.3s ease;
}
.xp-scene.is-open { opacity: 1; }
.xp-scene__col {
  position: relative; max-width: 448px; min-height: 100%; margin: 0 auto;
  display: flex; flex-direction: column;
  background: var(--ob-1);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.9);
}
.xp-scene__art { position: relative; flex-shrink: 0; height: min(52vh, 300px); overflow: hidden; }
.xp-scene__art-img { position: absolute; inset: 0; background-size: cover; background-position: center 45%; animation: xpSceneIn 1.4s var(--ease-out) both; }
@keyframes xpSceneIn { from { transform: scale(1.14); opacity: 0; filter: brightness(0.3); } to { transform: scale(1.02); opacity: 1; filter: none; } }
.xp-scene__art::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(12, 10, 18, 0.35) 0%, transparent 30%, transparent 55%, var(--ob-1) 100%);
}
.xp-scene__close {
  position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px; z-index: 5;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 6, 12, 0.7); border: 1px solid var(--gilt-line); color: var(--tx-1); font-size: 18px;
}
.xp-scene__body { position: relative; z-index: 2; margin-top: -56px; padding: 0 18px 8px; flex: 1; }
.xp-scene__title { font-size: 30px; margin: 6px 0 8px; }
.xp-scene__text { font-family: var(--font-serif); font-size: 16.5px; line-height: 1.55; color: var(--tx-1); }
.xp-scene__text em { color: var(--gilt-hi); font-style: normal; }
.xp-scene__actions {
  position: sticky; bottom: 0; z-index: 4;
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(12, 10, 18, 0) 0%, rgba(12, 10, 18, 0.95) 30%, var(--ob-1) 100%);
}
.xp-scene.is-leaving { opacity: 0; }
.xp-scene__swap { animation: xpFade 0.45s ease both; }

/* Treasure */
.xp-haul { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.xp-coinburst { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 4px 0; }
.xp-coinburst b { font-family: var(--font-display); font-weight: 700; font-size: 34px; color: var(--gilt-hi); font-variant-numeric: tabular-nums; }
.xp-coinburst img.coin-icon { width: 30px; height: 30px; }
.xp-coinburst small { font-family: var(--font-ui); font-weight: 800; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gilt); }
.xp-card-in { animation: xpCardIn 0.7s var(--ease-spring) both; }
@keyframes xpCardIn { from { opacity: 0; transform: translateY(18px) rotateX(35deg) scale(0.94); } to { opacity: 1; transform: none; } }
/* Shared item cards (UI.itemCard) lie flat in a scene: a hairline between
   items, no box, no rarity glow; the Lv tag loses its chip. */
.xp-scene .dungeon-card { background: none; border: 0; border-top: 1px solid var(--ob-line); border-radius: 0; box-shadow: none; padding: 12px 0 4px; }
.xp-scene .dungeon-card span[style*="border:1px solid"] { background: none !important; border: 0 !important; padding: 0 !important; }

/* Chance */
.xp-choice {
  display: flex; align-items: stretch; gap: 12px; width: 100%; text-align: left;
  padding: 14px; border-radius: var(--r);
  background: linear-gradient(180deg, rgba(36, 30, 49, 0.95), rgba(19, 16, 27, 0.98));
  border: 1px solid var(--gilt-line);
  transition: transform 0.15s var(--ease-out), border-color 0.2s;
}
.xp-choice:hover, .xp-choice:focus-visible { border-color: var(--gilt-line-strong); }
.xp-choice:active { transform: scale(0.985); }
.xp-choice__main { flex: 1; min-width: 0; }
.xp-choice__title { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--gilt-hi); line-height: 1.25; }
.xp-choice__desc { font-family: var(--font-serif); font-size: 14px; line-height: 1.4; color: var(--tx-2); margin-top: 3px; }
.xp-choice__pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.xp-pill { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-weight: 800; font-size: 11.5px; color: #ffc49a; }
.xp-choice__odds {
  flex-shrink: 0; width: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-left: 1px solid var(--ob-line); padding-left: 10px;
}
.xp-choice__pct { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1; }
.xp-choice__check { font-family: var(--font-ui); font-weight: 800; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tx-3); margin-top: 4px; text-align: center; line-height: 1.3; }
.xp-choice__check b { color: var(--stat, var(--tx-1)); }
.xp-choice.is-picked { border-color: var(--gilt); }
.xp-choice.is-dim { opacity: 0.35; filter: grayscale(0.6); }

/* Outcome seal */
.xp-seal {
  --seal: #e0bc6a;
  width: 132px; height: 132px; margin: 4px auto 6px; position: relative;
  display: flex; align-items: center; justify-content: center; text-align: center;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 36%, color-mix(in srgb, var(--seal) 85%, #fff 15%), var(--seal) 45%, color-mix(in srgb, var(--seal) 55%, #000 45%) 100%);
  box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--seal) 60%, #000 40%), inset 0 0 0 7px color-mix(in srgb, var(--seal) 90%, #fff 10%), 0 12px 30px rgba(0, 0, 0, 0.7);
  animation: xpStamp 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) both 0.1s;
}
.xp-seal span { font-family: var(--font-display); font-weight: 900; font-size: 15px; letter-spacing: 0.06em; line-height: 1.1; color: #1c1206; text-transform: uppercase; padding: 0 12px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
.xp-seal b { display: block; font-size: 40px; line-height: 1; margin-bottom: 2px; }
.xp-seal--bad span { color: #fff1f1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.xp-seal--crack::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(115deg, transparent 47%, rgba(0, 0, 0, 0.55) 48%, transparent 50%), linear-gradient(60deg, transparent 58%, rgba(0, 0, 0, 0.45) 59%, transparent 61%);
}
@keyframes xpStamp { from { transform: scale(2.4) rotate(-14deg); opacity: 0; } 70% { transform: scale(0.94) rotate(2deg); opacity: 1; } to { transform: scale(1) rotate(-4deg); } }
.xp-rollmath { display: flex; justify-content: center; gap: 10px; align-items: center; margin: 6px 0 12px; font-family: var(--font-ui); font-weight: 800; font-size: 13px; color: var(--tx-2); }
.xp-rollmath .d { font-family: var(--font-display); font-size: 20px; color: var(--tx-1); }
.xp-effects { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.xp-effect { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-weight: 700; font-size: 14px; }
.xp-effect--good { color: #9ff0c8; }
.xp-effect--bad { color: #ffb3b5; }
.xp-effect--note { color: #ffcf9e; }

/* Merchant */
.xp-shop-greet { display: flex; gap: 10px; align-items: flex-start; margin-top: 2px; }
.xp-shop-greet__quote { font-family: var(--font-serif); font-style: italic; font-size: 16px; line-height: 1.45; color: var(--tx-1); }
.xp-purse { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-weight: 800; font-size: 15px; color: var(--gilt-hi); }
.xp-service { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--ob-line); }
.xp-service__icon { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.xp-service__main { flex: 1; min-width: 0; }
.xp-service__main b { display: block; font-family: var(--font-display); font-size: 14.5px; color: var(--tx-1); }
.xp-service__main > span { display: block; font-family: var(--font-ui); font-size: 12px; color: var(--tx-3); line-height: 1.35; }
.xp-service__price { color: var(--gilt-hi) !important; font-weight: 800; }
.xp-service__price.is-short { color: #ff9ea0 !important; }
.xp-service .xp-btn { width: auto; min-width: 72px; }

/* Floor cleared: the two roads */
.xp-roads { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.xp-road { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px; border-radius: 14px; border: 1px solid var(--gilt-line); transition: transform 0.15s var(--ease-out), box-shadow 0.2s; }
.xp-road:active:not(:disabled) { transform: scale(0.985); }
.xp-road:disabled { opacity: 0.5; cursor: not-allowed; }
.xp-road__icon { width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0; background: #120e18 center/cover; box-shadow: 0 0 0 2px #0a0810, 0 0 0 4px #9a7436; }
.xp-road__main { flex: 1; min-width: 0; }
.xp-road__main b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.2; }
.xp-road__main > span { display: block; font-family: var(--font-ui); font-weight: 600; font-size: 12.5px; line-height: 1.35; margin-top: 2px; opacity: 0.8; }
.xp-road__tag { flex-shrink: 0; font-family: var(--font-ui); font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; gap: 3px; }
.xp-road--deeper { color: #ffe3e3; background: linear-gradient(135deg, rgba(120, 26, 36, 0.95), rgba(52, 10, 18, 0.98)); border-color: rgba(229, 72, 77, 0.55); }
.xp-road--home { color: #231708; background: var(--gilt-metal); border-color: #f3d990; }
.xp-road--home .xp-road__main span { opacity: 0.85; }
.xp-road--home .xp-road__icon { box-shadow: 0 0 0 2px #3a2a10, 0 0 0 4px #fff2c8; }

/* ═══ TRANSITIONS ════════════════════════════════════════════════════════ */
.xp-curtain {
  position: fixed; inset: 0; z-index: 450; pointer-events: all;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  background: #030206; opacity: 0; transition: opacity 0.45s ease;
  overflow: hidden;
}
.xp-curtain.is-in { opacity: 1; }
.xp-curtain__art { position: absolute; inset: -6%; background-size: cover; background-position: center; opacity: 0.8; animation: xpDive 2.8s cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes xpDive { from { transform: scale(1); filter: blur(0); } to { transform: scale(1.35); filter: blur(1.5px); } }
.xp-curtain::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 45% at center, rgba(3, 2, 6, 0.72) 0%, rgba(3, 2, 6, 0.35) 60%, rgba(3, 2, 6, 0.85) 100%); }
.xp-curtain__inner { position: relative; z-index: 2; text-align: center; padding: 0 24px; }
.xp-curtain__num { font-family: var(--font-display); font-weight: 900; font-size: 96px; line-height: 0.9; background: var(--gilt-text); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.8)); animation: xpNumIn 1s var(--ease-out) both 0.25s; }
.xp-curtain__inner .xp-kicker { animation: xpRise 0.7s var(--ease-out) both 0.15s; }
.xp-curtain__inner .xp-h { margin-top: 12px; animation: xpRise 0.7s var(--ease-out) both 0.5s; }
.xp-curtain__inner .xp-lede { margin-top: 8px; max-width: 300px; text-wrap: balance; animation: xpRise 0.7s var(--ease-out) both 0.7s; }
@keyframes xpNumIn { from { opacity: 0; transform: scale(1.5); letter-spacing: 0.3em; filter: blur(8px); } to { opacity: 1; transform: none; } }

.xp-clash { position: fixed; inset: 0; z-index: 450; pointer-events: all; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(120, 16, 22, 0.35), rgba(3, 2, 6, 0.96) 70%); opacity: 0; transition: opacity 0.2s ease; }
.xp-clash.is-in { opacity: 1; }
.xp-clash__icon { width: 120px; height: 120px; border-radius: 50%; background: center/cover; box-shadow: 0 0 0 3px #0a0810, 0 0 0 6px #b58a3e; animation: xpClash 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.xp-clash__label { position: absolute; left: 0; right: 0; top: calc(50% + 86px); text-align: center; animation: xpRise 0.5s var(--ease-out) both 0.15s; }
.xp-clash__label .xp-title { font-size: 28px; }
@keyframes xpClash { from { transform: scale(2.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ═══ ENDINGS ════════════════════════════════════════════════════════════ */
.xp-end { position: relative; min-height: 100%; padding-bottom: 8px; background: var(--ob-0); }
.xp-end__art { position: relative; height: min(430px, 50vh); overflow: hidden; margin-bottom: calc(-1 * min(150px, 17vh)); }
.xp-end__art .xp-hero__art { animation-duration: 30s; }
.xp-end__art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7, 6, 11, 0.3) 0%, transparent 25%, rgba(7, 6, 11, 0.6) 58%, var(--ob-0) 96%);
}
/* The homeward cart and the two figures leaving the dungeon sit low in their
   paintings: frame lower, and let the crest overlap less so they show. */
.xp-end__art--home, .xp-end__art--victory { height: min(470px, 56vh); margin-bottom: calc(-1 * min(70px, 8vh)); }
.xp-end__art--home .xp-hero__art { background-position: center 96%; transform-origin: 50% 85%; }
.xp-end__art--victory .xp-hero__art { background-position: center 78%; transform-origin: 50% 70%; }
.xp-end__art--home::after, .xp-end__art--victory::after { background: linear-gradient(180deg, rgba(7, 6, 11, 0.3) 0%, transparent 22%, transparent 66%, rgba(7, 6, 11, 0.7) 86%, var(--ob-0) 100%); }
.xp-end--defeat .xp-end__art::after { background: linear-gradient(180deg, rgba(7, 6, 11, 0.35) 0%, transparent 25%, rgba(20, 4, 8, 0.65) 58%, var(--ob-0) 96%); }
.xp-end__head { position: relative; z-index: 2; text-align: center; padding: 0 18px; }
.xp-end__head .xp-title { font-size: 36px; margin: 4px 0 6px; }
.xp-end--defeat .xp-title { background: linear-gradient(180deg, #ffd0d0 0%, #f0787c 55%, #a8262d 100%); -webkit-background-clip: text; background-clip: text; }
.xp-end__body { position: relative; z-index: 2; padding: 16px 14px 0; display: flex; flex-direction: column; gap: 12px; }
.xp-record {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-family: var(--font-ui); font-weight: 800; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gilt-hi);
  animation: xpRise 0.6s var(--ease-out) both 1.2s;
}
.xp-war__bar { height: 10px; border-radius: 99px; background: var(--ob-4); position: relative; overflow: hidden; margin-top: 8px; }
.xp-war__was { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #6e5226, #b88f45); border-radius: 99px; }
.xp-war__gain { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, #f7e6b0, #fff7dc); border-radius: 0 99px 99px 0; transform-origin: left; animation: xpGrow 1.2s var(--ease-out) both 0.9s; }
@keyframes xpGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.xp-reckon summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.xp-reckon summary::-webkit-details-marker { display: none; }
.xp-reckon summary::after { content: '+'; font-family: var(--font-display); color: var(--gilt); font-size: 18px; transition: transform 0.25s; }
.xp-reckon[open] summary::after { transform: rotate(45deg); }
.xp-line { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; font-family: var(--font-ui); font-size: 13px; color: var(--tx-2); }
.xp-line b { font-weight: 800; color: var(--tx-1); font-variant-numeric: tabular-nums; }
.xp-line--sub { border-top: 1px solid var(--ob-line); margin-top: 4px; padding-top: 6px; color: var(--tx-3); text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; }
.xp-line--total { border-top: 1px solid var(--gilt-line-strong); margin-top: 4px; padding-top: 7px; font-family: var(--font-display); font-size: 14px; color: var(--gilt-hi); }
.xp-line--total b { font-size: 16px; color: var(--gilt-hi); }
.xp-line--bonus, .xp-line--bonus b { color: #9ff0c8; }
.xp-line--minus, .xp-line--minus b { color: #ffb3b5; }
.xp-next { display: flex; align-items: center; gap: 12px; }
.xp-next__icon { width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; background: #120e18 center/cover; box-shadow: 0 0 0 2px #0a0810, 0 0 0 3.5px #9a7436; }
.xp-endbar {
  position: sticky; bottom: 0; z-index: 6; margin-top: 12px;
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 14px 12px;
  background: linear-gradient(180deg, transparent 0, var(--ob-0) 16px);
}

/* The settling-up loader */
.xp-settle { position: relative; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 28px; overflow: hidden; background: var(--ob-0); }
.xp-settle .xp-hero__art { opacity: 0.35; filter: blur(1px); }
.xp-settle::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(7, 6, 11, 0.35), var(--ob-0) 80%); }
.xp-settle__inner { position: relative; z-index: 2; }
.xp-settle__coin {
  width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff4c8, #e0bc6a 42%, #8a6424 100%);
  box-shadow: inset 0 0 0 3px rgba(110, 72, 20, 0.5);
  animation: xpFlip 1.4s ease-in-out infinite;
}
@keyframes xpFlip { 0% { transform: rotateY(0); } 50% { transform: rotateY(180deg) translateY(-10px); } 100% { transform: rotateY(360deg); } }
.xp-settle__line { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--gilt-hi); min-height: 50px; transition: opacity 0.3s; }

@media (prefers-reduced-motion: reduce) {
  .xp-hero__art, .xp-embers i, .xp-cta::after,
  .xp-token__face, .xp-map__fog::after, .xp-scene__art-img, .xp-curtain__art,
  .xp-curtain__num, .xp-seal, .xp-settle__coin, .xp-war__gain,
  .xp-rise, .xp-card-in, .xp-record { animation: none !important; }
}

/* First-run coach line beside the hero (one time per device) */
.xp-coach {
  position: absolute; z-index: 7; width: 220px; margin-left: -110px; pointer-events: none;
  padding: 9px 12px; border-radius: 12px; text-align: center;
  background: rgba(12, 10, 18, 0.94); border: 1px solid var(--gilt-line-strong);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.7);
  font-family: var(--font-ui); font-weight: 700; font-size: 13px; line-height: 1.35; color: var(--tx-1);
  animation: xpRise 0.6s var(--ease-out) both 0.8s;
}
.xp-coach::before {
  content: ''; position: absolute; top: -6px; left: 50%; width: 10px; height: 10px; margin-left: -5px;
  background: rgba(12, 10, 18, 0.94); border-left: 1px solid var(--gilt-line-strong); border-top: 1px solid var(--gilt-line-strong);
  transform: rotate(45deg);
}

/* Loot floating out of the HUD ledger after a fight or a find */
.xp-float {
  position: fixed; z-index: 60; transform: translateX(-50%); pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: var(--font-ui); font-weight: 800; font-size: 14px; color: var(--gilt-hi);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95);
  animation: xpFloat 2.1s var(--ease-out) forwards;
}
.xp-float > span { display: inline-flex; align-items: center; gap: 3px; }
@keyframes xpFloat {
  0% { opacity: 0; transform: translate(-50%, -6px) scale(0.9); }
  15% { opacity: 1; transform: translate(-50%, 4px) scale(1.05); }
  70% { opacity: 1; transform: translate(-50%, 10px); }
  100% { opacity: 0; transform: translate(-50%, 18px); }
}
@media (prefers-reduced-motion: reduce) {
  .xp-float { animation: none; opacity: 0; }
  .xp-node.is-vanishing { transform: none; filter: none; transition: opacity 0.3s ease; }
}

/* Short and narrow phones: tighter chrome so the scene still reads first */
@media (max-width: 380px) {
  .xp-pip { width: 13px; }
  .xp-ledgerbtn { padding: 5px 7px; }
  .xp-ledgerbtn .xp-ledgerbtn__top { gap: 6px; }
  .xp-hud__place { font-size: 12px; letter-spacing: 0.04em; }
  .xp-hero__caption .xp-title { font-size: 32px; }
  .xp-end__head .xp-title { font-size: 30px; }
  .xp-scene__title { font-size: 26px; }
}
@media (max-height: 720px) {
  .xp-endbar, .xp-musterbar { padding-top: 14px; }
  .xp-endbar { flex-direction: row; }
  .xp-endbar > * { flex: 1 1 0; min-width: 0; }
  .xp-endbar .xp-cta, .xp-endbar .xp-btn { min-height: 48px; font-size: 14px; padding: 8px 10px; }
  .xp-cta { min-height: 48px; font-size: 16px; }
  .xp-end__head .outcome-crest img { width: 96px; height: 96px; }
  .xp-end__head .outcome-crest--defeat img { width: 84px; height: 84px; }
}

/* Battery Saver (Settings → Visual; see game.css): the looping decoration stills. */
html.battery-saver .xp-cta::after,
html.battery-saver .xp-hero__art,
html.battery-saver .xp-seat__disc.is-dd,
html.battery-saver .xp-token:not(.is-walking) .xp-token__face,
html.battery-saver .xp-map__fog::after { animation: none !important; }
html.battery-saver .xp-embers i,
html.battery-saver .xp-map__embers i { display: none !important; }