:root {
  --bg: #07060a;
  --side: #0c0b10;
  --card: #17161f;
  --card-2: #1c1b26;
  --line: rgba(255, 255, 255, 0.08);
  --text: #f6f3ee;
  --muted: #9b95a8;
  --dim: #6f6a7a;
  --ember: #ff7a2e;
  --ember-2: #ff9a4a;
  --gold: #c9a24a;
  --gold-hi: #f6e7b2;
  --gold-deep: #8a6420;
  --magenta: #e23b78;
  --arcane: #6eb6ff;
  --mind: #8b7cff;
  --body: #ffb020;
  --skills: #ff5d8f;
  --connect: #3dceb0;
  --sans: "Outfit", "Segoe UI", sans-serif;
  --radius: 0px;
  --serif: "Cinzel", Palatino, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

.app { display: grid; grid-template-columns: 268px minmax(0, 1fr); min-height: 100vh; }
aside {
  background: linear-gradient(180deg, #14131c, #0e0d14);
  border-right: 1px solid var(--line);
  padding: 22px 16px;
  display: flex; flex-direction: column; gap: 22px;
}
.brand { display: flex; gap: 12px; align-items: center; padding: 0 8px; }
.logo {
  width: 42px; height: 42px; border-radius: 14px;
  background: radial-gradient(circle at 30% 30%, #ffb078, var(--ember) 42%, #9a2a4a);
  display: grid; place-items: center; font-weight: 720; box-shadow: 0 0 24px rgba(255, 122, 46, 0.35);
}
.brand strong { display: block; font-size: 20px; letter-spacing: -0.03em; }
.brand small { color: var(--dim); letter-spacing: 0.12em; font-size: 11.5px; white-space: nowrap; }
.nav .ico { width: 22px; height: 22px; display: grid; place-items: center; color: var(--ember); flex: none; }
.nav-label { color: var(--dim); font-size: 11px; letter-spacing: 0.18em; padding: 0 10px; }
.nav { display: grid; gap: 6px; }
.nav button, .player {
  text-align: left; background: transparent; border: 1px solid transparent;
  border-radius: 14px; padding: 10px 12px; display: flex; gap: 10px; align-items: center;
}
.nav button small, .player small { display: block; color: var(--muted); font-size: 12px; }
.nav button.on {
  background: linear-gradient(90deg, rgba(255, 122, 46, 0.16), transparent);
  border-color: rgba(255, 122, 46, 0.45);
}
.nav .ico { width: 18px; text-align: center; color: var(--ember); }
.player { margin-top: auto; background: #191821; border-color: var(--line); }
.avatar-sm {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: #2a211c; color: var(--ember); font-weight: 650; border: 1px solid rgba(255,122,46,0.5);
}

.main {
  position: relative;
  padding: 18px 28px 32px;
  background: #1a242c;
  overflow: hidden;
}
.world .ground { position: absolute; inset: 0; z-index: 0; transform-origin: 0 0; }
.world .tile {
  position: absolute;
  width: 256px;
  height: 256px;
  max-width: none;
  display: block;
  filter: grayscale(0.85) sepia(0.5) contrast(1.3) brightness(0.48) saturate(1.1);
}
.world .tile.stained, .world .tile[data-stained="1"] { filter: none; }
.world .marks { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.world .marks .node, .world .marks .player-pin, .world .marks .horde, .world .marks .field-cache, .world .marks .other-pin, .world .marks .life, .world .marks .npc { pointer-events: auto; }
.other-pin {
  position: absolute;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  border: 2px solid #7aa0c4;
  background: #1a2430;
  color: #d7e6f4;
  font-weight: 700;
  z-index: 3;
}
.other-pin small {
  position: absolute;
  left: 50%;
  top: 38px;
  transform: translateX(-50%);
  font-size: 11px;
  white-space: nowrap;
  background: rgba(10, 14, 18, 0.86);
  border: 1px solid #7aa0c4;
  padding: 1px 5px;
}
.abyss {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.abyss-ink, .abyss-ash, .abyss-fog, .abyss-cracks, .abyss-embers { position: absolute; inset: 0; }
.abyss-ink {
  background:
    radial-gradient(ellipse at 50% 42%, transparent 8%, rgba(0, 0, 0, 0.28) 46%, rgba(0, 0, 0, 0.78) 100%),
    linear-gradient(180deg, rgba(12, 6, 4, 0.18), rgba(0, 0, 0, 0.42));
}
.abyss-ash {
  inset: -12%;
  background:
    repeating-linear-gradient(118deg, transparent 0 38px, rgba(90, 28, 10, 0.05) 38px 39px),
    radial-gradient(circle at 18% 30%, rgba(120, 36, 12, 0.14), transparent 26%),
    radial-gradient(circle at 74% 68%, rgba(20, 6, 4, 0.28), transparent 42%);
  mix-blend-mode: multiply;
  animation: ash-drift 54s linear infinite;
}
.abyss-fog {
  inset: -18%;
  background:
    radial-gradient(ellipse at 28% 38%, rgba(70, 58, 48, 0.16), transparent 42%),
    radial-gradient(ellipse at 72% 64%, rgba(30, 12, 8, 0.22), transparent 48%);
  filter: blur(10px);
  animation: fog-drift 32s ease-in-out infinite alternate;
}
.abyss-cracks {
  background:
    linear-gradient(108deg, transparent 47%, rgba(255, 84, 24, 0.16) 50%, transparent 53%),
    linear-gradient(18deg, transparent 63%, rgba(180, 40, 12, 0.12) 64.5%, transparent 66%),
    linear-gradient(164deg, transparent 30%, rgba(255, 120, 40, 0.08) 31%, transparent 33%);
  mix-blend-mode: screen;
  opacity: 0.7;
}
.abyss-embers {
  background-image: radial-gradient(circle, rgba(255, 150, 70, 0.9) 0 1px, transparent 2.2px);
  background-size: 220px 160px;
  animation: ember-rise 16s linear infinite;
  opacity: 0.28;
}
.abyss-town {
  background:
    radial-gradient(circle at 22% 34%, rgba(90, 40, 16, 0.16), transparent 24%),
    repeating-linear-gradient(90deg, transparent 0 84px, rgba(80, 40, 16, 0.05) 84px 85px);
  mix-blend-mode: multiply;
}
.cottage {
  position: absolute;
  width: 54px;
  height: 44px;
  margin: -40px 0 0 -27px;
  pointer-events: none;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.6));
  z-index: 1;
}
.field-cache, .horde {
  position: absolute;
  transform: translate(-50%, -100%);
  background: transparent;
  border: 0;
  z-index: 3;
  text-align: center;
}
.horde img { width: 92px; height: 62px; object-fit: cover; border-radius: 8px; border: 1px solid #e23b78; }
.cutscene.ritual { position: relative; overflow: hidden; }
.cutscene .backdrop, .cutscene .surge { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.38; pointer-events: none; }
.cutscene .surge { opacity: 0.22; mix-blend-mode: screen; }
.cutscene .flash { position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 186, 72, 0.7), transparent 62%); animation: flash-pop 0.7s ease-out; pointer-events: none; }
.xp-count { position: relative; display: block; font-family: Cinzel, serif; font-size: 42px; color: #c9a24a; animation: loot-pop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1); }
.loot-pop { position: relative; animation: loot-pop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1); box-shadow: 0 0 32px rgba(255, 168, 60, 0.55); }
.pack-wrap { position: relative; }
.dmg { position: absolute; left: 30%; top: 8px; z-index: 2; color: #c9a24a; font-size: 28px; animation: loot-pop 0.4s ease-out; }
.cutscene.shake { animation: gate-shake 0.35s linear; }
.cutscene.hit .pack { width: 180px; height: 110px; object-fit: cover; animation: horde-loom 1.6s ease-in-out infinite alternate; }
@keyframes flash-pop { from { opacity: 1; } to { opacity: 0; } }
@keyframes loot-pop { from { transform: scale(0.4) rotate(-6deg); filter: brightness(2); } to { transform: none; filter: none; } }
@keyframes horde-loom { to { transform: scale(1.06); filter: brightness(1.2); } }
@keyframes gate-shake { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
.field-cache small, .horde small {
  display: block;
  font-size: 11px;
  color: #f6e7c8;
  background: rgba(18, 10, 8, 0.86);
  border: 1px solid #8a6230;
  padding: 2px 6px;
}
.cutscene { color: #f6e7c8; }
.duel { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: end; margin: 12px 0; }
.duelist { text-align: center; }
.duelist img, .duel .pack { width: 92px; height: 92px; object-fit: cover; border-radius: 8px; border: 1px solid #8a6230; background: #120c08; }
.duelist i { display: block; height: 8px; margin-top: 6px; background: linear-gradient(180deg, #f6e7b2, #c9a24a 45%, #6b4e16); border-radius: 4px; }
.duelist small { display: block; color: #c9b89a; }
body.reduce .abyss-ash, body.reduce .abyss-fog, body.reduce .abyss-embers { animation: none; }
@keyframes ash-drift { to { transform: translate3d(-4%, -3%, 0); } }
@keyframes fog-drift { to { transform: translate3d(5%, -4%, 0); } }
@keyframes ember-rise { to { background-position: 40px -180px; } }
.sanctuary-mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(28, 18, 12, 0.15) 12%, rgba(18, 12, 8, 0.5) 58%, rgba(6, 4, 3, 0.82) 100%),
    linear-gradient(180deg, rgba(70, 58, 40, 0.35), rgba(36, 14, 10, 0.5)),
    url("assets/sanctuary-mask.jpg") center / 520px repeat;
  mix-blend-mode: multiply;
  opacity: 0.94;
}
.world {
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background-color: #1a1612;
  background-blend-mode: multiply;
  touch-action: none;
}
.world .range {
  position: absolute;
  border: 2px solid rgba(226, 59, 120, 0.7);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 8px rgba(226, 59, 120, 0.12);
  pointer-events: none;
}
.world .player-pin {
  position: absolute;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 40% 30%, #ffb078, #ff7a2e);
  color: #1a0e08;
  font-weight: 720;
  border: 3px solid #fff6e8;
  box-shadow: 0 0 0 8px rgba(255, 122, 46, 0.28);
  z-index: 2;
}
.world .node {
  position: absolute;
  transform: translate(-50%, -100%);
  background: transparent;
  border: 0;
  color: #1a120c;
  text-align: center;
  z-index: 2;
}
.world .node em {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0 auto 2px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: #9a3b16;
  border: 2px solid #f0d7a2;
  box-shadow: 0 0 0 4px rgba(154, 59, 22, 0.25);
}
.world .node small {
  display: block;
  font-size: 11px;
  background: rgba(244, 232, 206, 0.94);
  border: 1px solid #8a7044;
  padding: 2px 6px;
  white-space: nowrap;
}
.world-chrome {
  position: absolute;
  right: 16px;
  bottom: 36px;
  z-index: 3;
  display: grid;
  gap: 6px;
}
.world-chrome button {
  width: 42px;
  height: 42px;
  background: rgba(244, 232, 206, 0.94);
  color: #1c140e;
  border: 1px solid #8a7044;
}
.nordic-compass {
  position: absolute;
  left: 16px;
  bottom: 42px;
  z-index: 3;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 3px solid #8a7044;
  background:
    radial-gradient(circle at 50% 50%, rgba(244, 232, 206, 0.95), rgba(196, 154, 90, 0.9) 62%, #2a2118 78%);
  box-shadow: inset 0 0 0 6px #1a140e, 0 8px 16px rgba(0, 0, 0, 0.35);
  color: #1a140e;
}
.nordic-compass .rose {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 1px dashed #6a4520;
}
.nordic-compass .rose::before, .nordic-compass .rose::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: rgba(90, 58, 28, 0.45);
}
.nordic-compass .rose::after { transform: rotate(90deg); }
.nordic-compass .needle {
  position: absolute;
  left: 50%;
  top: 18px;
  width: 4px;
  height: 30px;
  margin-left: -2px;
  background: linear-gradient(#6b4e16, #c9a24a);
  transform-origin: 50% 28px;
  border-radius: 2px;
}
.nordic-compass small {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  text-align: center;
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.map-credit {
  position: absolute;
  left: 12px;
  bottom: 8px;
  z-index: 3;
  margin: 0;
  color: #f6f3ee;
  background: rgba(7, 6, 10, 0.62);
  font-size: 11px;
  padding: 3px 6px;
}
#top, #view { position: relative; z-index: 5; pointer-events: none; }
#top, #view .panel, #view .hero, #view .stat, #view .quest, #view .skill, #view .forge-card, #view .figure-card, #view .win, #view .mile, #view .constellation, #view .lens-frame, #view button, #view input, #view select, #view textarea, #view a { pointer-events: auto; }
#top { background: rgba(7, 6, 10, 0.78); padding: 8px 12px; color: #f6f3ee; }
.play-hud { display: flex; justify-content: flex-end; min-height: calc(100vh - 140px); }
.play-hud .panel { width: min(380px, 100%); max-height: calc(100vh - 160px); overflow: auto; }
.top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; color: var(--muted); font-size: 14px; }
.crumb b { color: var(--text); font-weight: 520; }
.hud { display: flex; gap: 18px; }
.hud span { display: flex; align-items: center; gap: 6px; }

.hero {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr); gap: 16px;
  background:
    linear-gradient(180deg, rgba(28,22,16,0.92), rgba(10,8,12,0.94));
  border: 1px solid #8a7044; border-radius: 0; padding: 22px;
  box-shadow: inset 0 0 0 1px #1a140e, inset 0 0 0 5px rgba(0,0,0,0.45);
}
.kicker, .board-head h2, .page-title, .sheet h2, .cache h2 { font-family: var(--serif); }
.kicker { margin: 0 0 8px; font-size: 42px; letter-spacing: -0.05em; font-weight: 720; color: var(--ember); }
.hero p { margin: 0 0 16px; color: #d9d3e4; font-size: 16px; max-width: 520px; line-height: 1.45; }
.who { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.lvl {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 30%, #ffb078, var(--ember));
  color: #1a0e08; font-weight: 720; box-shadow: 0 0 0 6px rgba(255,122,46,0.12);
}
.lvl small { display: block; font-size: 11.5px; letter-spacing: 0.08em; }
.who strong { font-size: 18px; }
.who span { color: var(--muted); font-size: 13px; }
.forge-card, .figure-card, .stat, .panel, .skill, .balance article, .mile, .win, .quest {
  background:
    linear-gradient(180deg, rgba(32,26,20,0.96), rgba(14,11,14,0.96));
  border: 1px solid #8a7044;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px #120e0a, inset 0 0 0 4px rgba(0,0,0,0.35);
}
.forge-card { padding: 18px 16px 14px; margin-top: 8px; }
.forge-card header, .stat header, .panel header { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11px; letter-spacing: 0.14em; }
.forge-card h3 { margin: 10px 0 8px; font-size: 18px; line-height: 1.2; }
.forge-card h3 em { font-style: normal; color: var(--ember); }
.track { height: 8px; background: #2a2833; border-radius: 99px; overflow: hidden; }
.track i { display: block; height: 100%; background: linear-gradient(90deg, #9a2a4a, var(--ember), var(--gold)); }
.fine { display: flex; justify-content: space-between; color: var(--dim); font-size: 11px; letter-spacing: 0.08em; margin-top: 8px; }

.figure-card { padding: 12px; text-align: center; background:
  radial-gradient(circle at 50% 40%, rgba(226,59,120,0.2), transparent 55%), var(--card); }
.figure-card img { width: 100%; height: 230px; object-fit: cover; object-position: center 20%; border-radius: 14px; }
.figure-card.glow-2 img { filter: saturate(1.15) brightness(1.06); }
.figure-card.glow-3 { box-shadow: 0 0 32px rgba(226,59,120,0.25); }
.chip { display: inline-flex; gap: 6px; border: 1px solid var(--line); border-radius: 99px; padding: 6px 10px; font-size: 11px; letter-spacing: 0.12em; color: var(--gold); }
.figure-card p { color: var(--muted); font-size: 12px; line-height: 1.4; }
.vials { display: flex; justify-content: space-between; margin-top: -8px; }
.vials b { font-size: 11.5px; letter-spacing: 0.14em; color: var(--dim); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0; }
.stat { padding: 16px; }
.stat strong { display: block; font-size: 32px; letter-spacing: -0.04em; margin: 8px 0 4px; }
.stat p { margin: 0; color: var(--muted); font-size: 13px; }

.panel { padding: 18px; }
.board-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 12px; }
.board-head h2 { margin: 0; font-size: 36px; letter-spacing: -0.04em; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.filters button.on { border-color: #6a4520; color: #1c140e; background: #f0d7a2; box-shadow: inset 0 -2px 0 #9a2a4a; }
.nav button, .player, .gear-row button, .chip { border-radius: 0; }
.panel, .hero, .stat, .forge-card { position: relative; }
.panel::before, .hero::before, .stat::before {
  content: ""; position: absolute; width: 12px; height: 12px; top: 4px; left: 4px;
  border-top: 1px solid #c9a24a; border-left: 1px solid #c9a24a; pointer-events: none;
}
.filters button, .ghost, .tiny {
  background: rgba(247, 236, 214, 0.85);
  border: 1px solid #8a7044;
  color: #2c2116;
  border-radius: 0;
  padding: 8px 12px;
}
.panel, .hero, .stat, .forge-card { padding-top: 20px; }
.primary {
  background: linear-gradient(180deg, #f6e7b2, #c9a24a 40%, #6b4e16);
  color: #1a0d07; border: 1px solid #f0d7a2; border-radius: 0; padding: 12px 16px; font-weight: 650;
  box-shadow: inset 0 0 0 1px #5a3a18;
}
.quest-list { display: grid; gap: 10px; margin-top: 8px; }
.quest {
  display: grid; grid-template-columns: 4px minmax(0, 1fr); gap: 10px 12px; align-items: center;
  padding: 14px;
}
.quest .actions { grid-column: 2; display: flex; gap: 8px; justify-content: flex-end; }
.gear-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.gear-row button { background: #100f16; border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.gear-row button.on { border-color: var(--gold); }
.gear-row img { height: 46px; width: 100%; object-fit: contain; }
.gear-row small { display: block; color: var(--dim); font-size: 11.5px; letter-spacing: 0.06em; }
.quest .rail { width: 4px; align-self: stretch; border-radius: 99px; background: var(--ember); }
.quest.mind .rail { background: var(--mind); }
.quest.body .rail { background: var(--body); }
.quest.skills .rail { background: var(--skills); }
.quest.connect .rail { background: var(--connect); }
.quest h3 { margin: 0 0 4px; font-size: 16px; }
.quest p { margin: 0; color: var(--muted); font-size: 13px; }
.tag { font-size: 11.5px; letter-spacing: 0.12em; color: var(--dim); }
.actions { display: flex; gap: 6px; }
.empty { padding: 28px; text-align: center; color: var(--muted); }

.branches { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 4px; }
.branch h3 { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.14em; color: var(--muted); position: static; }
.skill { padding: 14px; margin-bottom: 10px; text-align: left; width: 100%; }
.skill.on { border-color: rgba(226,59,120,0.45); box-shadow: inset 0 0 0 1px rgba(226,59,120,0.15); }
.skill strong { display: block; font-size: 18px; }
.skill p { color: var(--muted); margin: 6px 0; }
.online { color: var(--connect); font-size: 11px; letter-spacing: 0.12em; }
.two { display: grid; grid-template-columns: 1.4fr 0.8fr; gap: 12px; margin-top: 12px; }
.note { color: var(--muted); line-height: 1.45; }
.big { font-size: 36px; color: var(--ember); font-weight: 720; }

.profile-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 12px; }
.page-title { font-size: 48px; margin: 6px 0 14px; letter-spacing: -0.045em; }
.eyebrow { color: var(--dim); letter-spacing: 0.16em; font-size: 12px; }
.identity { padding: 18px; }
.counts { display: flex; gap: 22px; margin-top: 16px; }
.counts strong { display: block; font-size: 28px; }
.counts span { color: var(--dim); font-size: 11px; letter-spacing: 0.12em; }
.balance { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.balance article { padding: 12px; }
.balance i { display: block; height: 3px; border-radius: 99px; margin-top: 8px; background: var(--ember); }
.win, .mile { padding: 12px 14px; display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; }
.gold { color: var(--gold); }

.modal { position: fixed; inset: 0; background: rgba(4,3,6,0.82); display: grid; place-items: center; z-index: 5; padding: 18px; }
.sheet, .cache {
  width: min(520px, 92vw);
  max-height: min(88vh, 860px);
  overflow: auto;
  position: relative;
  background: url("assets/tatter-fiber.png") center / 100% 100% no-repeat;
  color: #2a2116;
  border: 0;
  border-radius: 0;
  padding: 88px 72px 72px;
  animation: none;
}
.ink { width: min(300px, 100%); margin: 0 auto; text-align: left; }
.ink h2, .ink .eyebrow { text-align: center; }
.ink .actions button { white-space: nowrap; }
.sheet::before, .cache::before, .sheet::after, .cache::after { content: none; }
@keyframes unroll {
  from { transform: scaleY(0.08); transform-origin: top center; opacity: 0.35; }
  to { transform: scaleY(1); transform-origin: top center; opacity: 1; }
}
.loot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; align-items: start; }
.loot-grid button { background: rgba(255,248,236,0.55); border: 1px solid #8a7044; color: #2a2116; padding: 6px; height: auto; }
.cache .loot-grid img { width: 100%; height: 84px; object-fit: cover; margin: 0; }
.loot-grid small { display: block; font-size: 11px; margin-top: 4px; }
.modal[hidden], .toast[hidden] { display: none; }
.sheet h2, .cache h2 { color: #3a2718; margin: 2px 0 8px; font-size: 26px; letter-spacing: 0.04em; line-height: 1.15; }
.sheet p, .cache p, .sheet label, .cache .note, .sheet .note, .sheet .eyebrow, .cache .eyebrow { color: #4e3b28; }
.sheet .field input, .sheet .field select, .sheet .field textarea, .sheet .ghost, .cache .ghost {
  background: #f7edd8;
  color: #2a2116;
  border: 1px solid #8a7044;
  border-radius: 0;
}
.sheet .field { color: #4e3b28; }
.cache img { width: min(100%, 240px); height: 120px; object-fit: contain; margin: 8px auto; }
.loot div { background: rgba(255,248,236,0.7); border: 1px solid #8a7044; border-radius: 0; color: #2a2116; }
.loot strong { color: #7a4e16; }
.hero, .panel, .stat, .forge-card, .figure-card, .quest, .skill, .win, .mile, .balance article {
  background: url("assets/tatter-fiber.png") center / cover;
  color: #2c2116;
  border: 0;
  box-shadow: none;
  padding: 28px 34px 30px;
  text-align: left;
  overflow: visible;
}
.page-head { margin-bottom: 12px; }
.page-head .page-title, .page-head .eyebrow { margin-left: 0; }
.lens-key, .lens-frame { padding: 22px 26px; }
.plate { width: max-content; max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rune { overflow: visible; }
.hero h2, .panel h2, .stat strong, .forge-card h3 { font-family: var(--serif); text-align: left; }
.hero p, .panel p, .stat p, .forge-card p, .figure-card p { text-align: left; line-height: 1.45; max-width: 62ch; }
.constellation {
  background:
    linear-gradient(180deg, rgba(247,237,216,0.96), rgba(232,214,184,0.94)),
    url("assets/tatter-fiber.png") center / cover;
  color: #2a1c12;
  position: relative;
  z-index: 2;
  min-height: 680px;
  padding: 48px 56px 44px;
  border: 8px solid #2a2318;
  box-shadow: inset 0 0 0 2px #8a7044, 0 18px 30px rgba(0,0,0,0.45);
}
.tree-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.tree-bar h2 { margin: 0; font-family: var(--serif); font-size: 34px; letter-spacing: 0.04em; }
.talent-orb {
  width: 74px; height: 74px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 40% 35%, #f0d7a4, #8a5a22 62%, #2a1c10);
  border: 3px solid #1a140e; color: #1a140e;
}
.talent-orb b { font-family: var(--serif); font-size: 22px; line-height: 1; }
.talent-orb small { font-size: 11.5px; letter-spacing: 0.08em; }
.plate {
  position: absolute; top: 90px; left: 50%; transform: translateX(-50%);
  display: block; background: rgba(20, 16, 12, 0.88); color: #f3e6cf;
  border: 1px solid #8a7044; padding: 3px 8px; min-width: 92px;
}
.plate strong { display: block; font-size: 11px; letter-spacing: 0.06em; color: #f3e6cf; background: none; }
.plate small { color: #c9a24a; background: none; }
.tree-note { margin: 8px 0 0; color: #d9c7a4; font-size: 13px; }
.constellation .ink { width: min(460px, 100%); text-align: left; margin: 0 0 8px; }
.constellation .ink h2 { text-align: left; }
.constellation h2 { margin: 4px 0; font-family: var(--serif); font-size: 40px; }
.sky { position: relative; height: 520px; }
.sky svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky line, .sky path { fill: none; stroke: rgba(90, 62, 28, 0.55); stroke-width: 0.55; }
.sky path.live { stroke: #c9a24a; stroke-width: 0.9; filter: drop-shadow(0 0 1px #8a6420); }
.rune img {
  width: 84px; height: 84px; object-fit: cover; border-radius: 50%;
  border: 2px solid #6a5030; box-shadow: 0 8px 16px rgba(0,0,0,0.35);
}
.rune.on img { box-shadow: 0 0 18px rgba(196, 90, 26, 0.75); border-color: #c9a24a; }
.rune:not(.on) img { filter: grayscale(0.75) brightness(0.72); }
.rune {
  position: absolute; transform: translate(-50%, -50%);
  width: 132px; background: transparent; border: 0; color: #2a1c12; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.rune i {
  display: block; width: 54px; height: 54px; border-radius: 50%;
  border: 2px solid #6a5030; background: radial-gradient(circle at 40% 35%, #efe2c8, #b89a6a 70%);
  box-shadow: inset 0 0 0 6px rgba(90, 62, 28, 0.25);
}
.rune.on i { background: radial-gradient(circle at 35% 30%, #f6e7b2, #c9a24a 55%, #6b4e16); box-shadow: 0 0 10px rgba(201, 162, 74, 0.4); }
.rune strong, .rune small {
  display: block; background: rgba(244, 232, 206, 0.92); padding: 1px 6px; line-height: 1.25;
  font-family: var(--serif); letter-spacing: 0.04em;
}
.rune { z-index: 2; }
.rune strong { font-size: 13px; margin-top: 8px; position: relative; z-index: 2; }
.rune small { font-size: 11px; color: #5a4632; font-family: var(--sans); }
.hero p, .stat p, .quest p, .figure-card p, .note, .who span, .eyebrow, .tag, .fine, .forge-card header, .stat header {
  color: #5a4632;
}
.hero h2, .hero h3, .panel h2, .panel h3, .quest h3, .stat strong, .who strong, .board-head h2 {
  color: #2a1c12;
}
body, button, input, select, textarea, label, small, strong, h2, h3, p, span {
  text-shadow: 0 0 0.6px rgba(42, 28, 16, 0.4), 0.35px 0.5px 0.45px rgba(62, 40, 18, 0.2);
}
.panel::after, .hero::after, .stat::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  right: 4px;
  bottom: 4px;
  border-right: 1px solid #c9a24a;
  border-bottom: 1px solid #c9a24a;
  pointer-events: none;
}
.sheet h2, .cache h2 { margin: 6px 0 8px; font-size: 28px; letter-spacing: -0.04em; }
.field { display: grid; gap: 6px; margin: 10px 0; color: var(--muted); font-size: 13px; }
.field input, .field select, .field textarea {
  background: #0f0e14; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
}
.cache { text-align: center; }
.cache img { width: min(100%, 420px); height: 210px; object-fit: contain; margin: 8px auto; }
.loot { display: flex; justify-content: center; gap: 10px; margin: 10px 0; }
.loot div { background: #100f16; border-radius: 14px; padding: 10px 14px; min-width: 100px; }
.loot strong { display: block; font-size: 26px; color: var(--gold); }
.toast {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: #1b1a24; border: 1px solid rgba(231,177,92,0.5); border-radius: 14px;
  padding: 10px 12px; display: flex; gap: 10px; align-items: center; z-index: 6;
}
.toggle { display: flex; gap: 8px; align-items: center; margin: 10px 0; }
.lens { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, 0.7fr); gap: 14px; }
.lens-frame { background: #14110e; border: 10px solid #3a3228; box-shadow: inset 0 0 0 2px #8a7044, 0 0 0 1px #1a140e; padding: 10px; }
.lens-top, .lens-bar { display: flex; justify-content: space-between; align-items: center; color: #e7d3ae; font-family: var(--serif); letter-spacing: 0.12em; font-size: 12px; }
.lens-top b { color: #9b95a8; font-weight: 500; letter-spacing: 0.04em; font-family: var(--sans); }
.lens-map { position: relative; height: 520px; margin: 8px 0; overflow: hidden; background: #cbb892 url("assets/tatter-fiber.png") center / cover; }
.road { position: absolute; background: #6d5436; opacity: 0.7; }
.road.a { left: 8%; right: 6%; top: 46%; height: 10px; transform: rotate(-6deg); }
.road.b { left: 40%; top: 8%; bottom: 8%; width: 8px; }
.road.c { left: 12%; right: 20%; top: 70%; height: 7px; }
.water { position: absolute; left: 8%; top: 58%; width: 28%; height: 16%; background: #3d4e46; opacity: 0.55; border-radius: 40% 60% 50% 40%; }
.moor { position: absolute; right: 8%; top: 12%; width: 24%; height: 22%; background: #3f4a32; opacity: 0.4; }
.fog { position: absolute; inset: 0; background: radial-gradient(circle at 48% 48%, transparent 32%, rgba(20,16,12,0.72) 78%); pointer-events: none; }
.poi { position: absolute; transform: translate(-50%, -50%); background: transparent; border: 0; color: #2a1c12; text-align: center; }
.poi em { display: block; width: 14px; height: 14px; margin: 0 auto 2px; border-radius: 50%; background: #9a3b16; box-shadow: 0 0 0 4px rgba(154,59,22,0.25); }
.poi small { display: block; font-size: 11.5px; letter-spacing: 0.02em; background: rgba(244,232,206,0.9); padding: 1px 4px; white-space: nowrap; }
.you { position: absolute; left: 48%; top: 48%; color: #1a120c; font-size: 11px; letter-spacing: 0.08em; }
.lens-bar { gap: 12px; }
.globe { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; color: #f6f3ee; font-size: 11px; border: 3px solid #2a2118; }
.globe.health { background: radial-gradient(circle at 40% 35%, #ffb0a0, #8d1d1d 60%, #3a0c0c); }
.globe.mana { background: radial-gradient(circle at 40% 35%, #b9dcff, #1d4e8d 60%, #0c1c3a); }
.compass { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; border: 1px solid #c9a24a; color: #c9a24a; background: #1a140e; }
.ar { position: relative; width: min(860px, 94vw); height: min(78vh, 640px); background: #07060a; overflow: hidden; }
.ar video, .ar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ar img { object-fit: contain; width: 280px; height: 360px; margin: auto; filter: drop-shadow(0 12px 18px rgba(0,0,0,0.6)); }
.ar-card { position: absolute; left: 16px; right: 16px; bottom: 16px; background: rgba(20,16,12,0.82); color: #f3e6cf; padding: 12px; }
.ar-card b { display: block; font-family: var(--serif); font-size: 22px; }
.lens-row { display: flex; justify-content: space-between; width: 100%; margin-top: 6px; background: rgba(255,248,236,0.55); border: 1px solid #8a7044; color: #2a1c12; padding: 8px; text-align: left; }
.lens-row small { color: #5a4632; }
@media (max-width: 980px) { .lens { grid-template-columns: 1fr; } .lens-map { height: 380px; } }
@media (max-width: 980px) {
  .app { grid-template-columns: 1fr; }
  aside { border-right: 0; border-bottom: 1px solid var(--line); }
  .hero, .stats, .branches, .profile-grid, .two { grid-template-columns: 1fr; }
  .main { padding: 14px; }
  .kicker, .page-title, .board-head h2 { font-size: 32px; }
}

.hero, .panel, .stat, .forge-card, .figure-card, .quest, .skill, .win, .mile, .balance article, .page-head, .constellation, .lens-key {
  padding: 72px 96px 64px;
  background-color: transparent;
}
.sheet, .cache {
  padding: 112px 96px 88px;
}
.ink { width: min(420px, 100%); }
.field input, .field select, .field textarea,
.panel input, .panel select, .panel textarea,
.sheet input, .sheet select, .sheet textarea,
.cache input, .cache select, .cache textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: #f7edd8;
  color: #1c140e;
  border: 1px solid #6d5434;
  border-radius: 0;
  padding: 10px 12px;
}
.field select option, select option {
  background: #f7edd8;
  color: #1c140e;
}
.panel, .hero, .stat, .forge-card, .figure-card, .quest, .skill, .sheet, .cache, .page-head, .win, .mile {
  color: #24180f;
}
.panel .note, .sheet .note, .cache .note, .hero p, .quest p, .skill p, .panel label, .sheet label, .toggle, .eyebrow, .fine, .tag {
  color: #3a2a1c;
}
.toggle input { accent-color: #8a4e16; width: 16px; height: 16px; }
.filters button, .ghost, .tiny, .primary { position: relative; z-index: 1; }

.armory { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr); gap: 16px; }
.doll, .class-set { display: grid; gap: 8px; }
.class-set { margin-top: 14px; }
.class-set b { font-family: var(--serif); letter-spacing: 0.04em; }
.slot, .ward { display: flex; gap: 10px; align-items: center; text-align: left; background: rgba(255,248,236,0.45); border: 1px solid #8a7044; color: #2a2116; padding: 6px; }
.slot img, .ward img { width: 72px; height: 72px; object-fit: cover; }
.slot small, .ward em { display: block; color: #5a4632; font-style: normal; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.bars { display: grid; gap: 8px; margin: 12px 0; }
.bar { display: grid; grid-template-columns: 72px 1fr 28px; gap: 8px; align-items: center; font-size: 13px; }
.bar i { display: block; height: 8px; background: linear-gradient(180deg, #f6e7b2, #c9a24a 50%, #6b4e16); }
.ward.on { border-color: #c9a24a; box-shadow: inset 0 0 0 1px #c9a24a; }
.ward:disabled { opacity: 0.45; }
.seal-read { background: rgba(255,248,236,0.7); border: 1px solid #8a7044; padding: 8px 10px; color: #4e3b28; }
@media (max-width: 900px) { .armory { grid-template-columns: 1fr; } }

.ward.locked { opacity: 0.62; }

.slot-row { display: flex; gap: 8px; align-items: stretch; overflow: auto; margin: 8px 0; }
.slot-row i { writing-mode: vertical-rl; transform: rotate(180deg); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; font-size: 11.5px; color: #d7b56d; align-self: center; }

/* Scrolls: torn edge stays on the rim, words stay on the parchment. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.75fr);
  gap: 18px;
  align-items: start;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* Outer scroll only. The torn mask matches the parchment.
   Inner cards stay unmasked so their words are not eaten by the rim. */
.panel, .page-head, .figure-card, .constellation, .sheet, .cache, .lens-key, .stat {
  background: url("assets/tatter.png") center / 100% 100% no-repeat !important;
  border: 0 !important;
  border-image: none !important;
  box-shadow: none !important;
  -webkit-mask-image: url("assets/tatter.png");
  mask-image: url("assets/tatter.png");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  color: #24180f !important;
  padding: clamp(36px, 10%, 96px) clamp(64px, 14%, 140px) clamp(32px, 9%, 88px) !important;
  border-radius: 0 !important;
  align-self: start;
}
.figure-card {
  padding: clamp(28px, 8%, 48px) clamp(24px, 9%, 40px) clamp(24px, 7%, 40px) !important;
}
.forge-card, .quest, .skill, .panel .forge-card, .panel .quest, .panel .skill, .win, .mile {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.page-head { margin-bottom: 14px; }
.stat { padding: clamp(28px, 14%, 40px) clamp(22px, 12%, 32px) !important; }
.panel .forge-card, .panel .quest {
  background: rgba(255, 248, 236, 0.5) !important;
  border: 1px solid #8a7044 !important;
  border-image: none !important;
  box-shadow: none !important;
  padding: 10px 12px !important;
}
.win, .mile, .balance article {
  background: rgba(255, 248, 236, 0.55) !important;
  border: 1px solid #8a7044 !important;
  border-image: none !important;
  box-shadow: none !important;
  padding: 10px 12px !important;
  color: #24180f !important;
}
.figure-card img { width: 100%; height: 220px; object-fit: cover; object-position: center 18%; border: 1px solid #8a7044; }
.kicker { color: #6a2a18 !important; font-size: 40px; }
.hero p, .panel p, .stat p, .quest p, .skill p, .figure-card p, .note, .eyebrow, .tag, .fine, .who span {
  color: #4a3726 !important;
}
.hero h2, .panel h2, .quest h3, .stat strong, .who strong, .board-head h2, .forge-card h3 {
  color: #2a1c12 !important;
}
#view { display: grid; gap: 16px; position: relative; z-index: 5; }
#view .panel, #view .page-head, #view .stat, #view .quest, #view .skill, #view .forge-card, #view .figure-card, #view .constellation, #view button {
  pointer-events: auto;
}
.stats { margin: 16px 0; }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .panel, .page-head, .constellation, .sheet, .cache, .lens-key, .stat {
    border-image-width: 28px !important;
    padding: clamp(32px, 10%, 72px) clamp(56px, 14%, 120px) clamp(28px, 9%, 64px) !important;
  }
  .figure-card { padding: 32px 28px 24px !important; }
}


/* Depth plates — cottages, caches, hordes, battle gate, guild seals */
.cottage.deep {
  width: 44px;
  height: 58px;
  margin: -52px 0 0 -22px;
  object-fit: contain;
  filter: drop-shadow(0 14px 10px rgba(0, 0, 0, 0.72)) drop-shadow(0 0 12px rgba(226, 59, 120, 0.18));
}
.field-cache.deep img {
  width: 36px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #c9a24a;
  box-shadow: 0 10px 16px rgba(0, 0, 0, 0.65), 0 0 18px rgba(80, 160, 255, 0.28);
}
.field-cache .glow, .horde .aura {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 90px;
  height: 48px;
  margin: 0 0 0 -45px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(255, 186, 72, 0.45), transparent 70%);
  filter: blur(2px);
}
.horde.deep img {
  width: 48px;
  height: 32px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e23b78;
  box-shadow: 0 10px 16px rgba(0, 0, 0, 0.7), 0 0 16px rgba(226, 59, 120, 0.35);
}
.horde .aura { background: radial-gradient(ellipse, rgba(226, 59, 120, 0.5), transparent 70%); }
.cutscene.gate { position: relative; overflow: hidden; }
.cutscene.gate .backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; pointer-events: none; }
.cutscene.gate .duel, .cutscene.gate h2, .cutscene.gate .eyebrow, .cutscene.gate .note, .cutscene.gate .actions { position: relative; z-index: 1; }
.hall-card { display: grid; grid-template-columns: 72px 1fr auto; gap: 10px; align-items: center; }
.hall-card .seal { width: 72px; height: 96px; object-fit: cover; border-radius: 6px; border: 1px solid #8a6230; box-shadow: 0 8px 14px rgba(0, 0, 0, 0.45); }


/* Deeper land, duel, and halls */
.abyss-ink {
  background:
    radial-gradient(ellipse at 50% 40%, transparent 4%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0.86) 100%),
    linear-gradient(180deg, rgba(8, 4, 3, 0.22), rgba(0, 0, 0, 0.55)),
    url("assets/land-cracks.jpg") center / 680px repeat;
  mix-blend-mode: multiply;
  opacity: 0.72;
}
.cottage.deep { transform: scale(var(--s, 1)); transform-origin: 50% 100%; }
.field-cache.deep, .horde.deep { filter: drop-shadow(0 16px 8px rgba(0, 0, 0, 0.55)); }
.cutscene.gate .backdrop { opacity: 0.72; }
.cutscene.gate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, transparent 20%, rgba(0, 0, 0, 0.72) 100%);
  pointer-events: none;
}
.duelist img { width: 108px; height: 140px; object-fit: cover; object-position: center 20%; border: 1px solid #c9a36a; box-shadow: 0 10px 18px rgba(0, 0, 0, 0.6); }
.duel .pack { width: 220px; height: 140px; object-fit: cover; border: 1px solid #e23b78; box-shadow: 0 12px 22px rgba(0, 0, 0, 0.65), 0 0 24px rgba(226, 59, 120, 0.25); }
.duelist i { height: 10px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 8px rgba(255, 122, 46, 0.35); }
.dmg { font-size: 36px; letter-spacing: 0.04em; }
.hall-banner {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  align-items: center;
  margin: 10px 0;
  padding: 8px;
  background: rgba(12, 8, 6, 0.55);
  border: 1px solid #8a6230;
}
.hall-banner img { width: 88px; height: 112px; object-fit: cover; border-radius: 4px; }
.hall-banner .molten {
  display: block;
  height: 8px;
  margin-top: 8px;
  width: 0;
  background: linear-gradient(180deg, #f6e7b2, #c9a24a 42%, #6b4e16);
  box-shadow: 0 0 10px rgba(255, 168, 60, 0.55);
  border-radius: 4px;
}
.hall-card .seal { width: 84px; height: 108px; }


/* Reward rush — flash, motes, ticking XP. A loss still takes nothing. */
.cutscene.rush { animation: gate-shake 0.45s linear; }
.cutscene.rush .backdrop { opacity: 0.62; }
.cutscene.rush .surge { opacity: 0.4; animation: surge-breathe 1.4s ease-in-out infinite alternate; }
.cutscene .flash.late { animation-delay: 0.18s; background: radial-gradient(circle, rgba(226, 59, 120, 0.55), transparent 58%); }
.xp-count.tick { animation: xp-hit 0.18s ease-out; }
@keyframes xp-hit { from { transform: scale(1.18); filter: brightness(1.8); } to { transform: none; filter: none; } }
@keyframes surge-breathe { to { opacity: 0.62; transform: scale(1.04); } }
.mote {
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f6e7b2, #c9a24a 60%, #6b4e16);
  box-shadow: 0 0 8px #e23b78;
  pointer-events: none;
  animation: mote-rise 1.1s ease-out forwards;
  animation-delay: calc(var(--d) * 0.04s);
}
@keyframes mote-rise {
  0% { transform: translate(-50%, 0) scale(0.4); opacity: 1; }
  100% { transform: translate(calc(-50% + (var(--d) - 7) * 18px), -180px) scale(1); opacity: 0; }
}
.loot-pop { box-shadow: 0 0 42px rgba(255, 186, 72, 0.7), 0 0 8px rgba(226, 59, 120, 0.6); }


/* Realistic gold — brushed metal. Bright edge, warm body, dark cut. */
.xp-count, .dmg, .gold, .loot strong, .plate small, .compass {
  background-image: linear-gradient(185deg, #fff6d2 0%, #f0d78a 18%, #d7b25a 40%, #a8832e 68%, #6e5218 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 1px 0 #3c2a0c);
}
.hall-banner .molten, .bar i, .track i {
  background: linear-gradient(90deg, #6b4e16, #c9a24a 40%, #f6e7b2 70%, #c9a24a);
  box-shadow: inset 0 1px 0 rgba(255, 244, 210, 0.6), 0 0 8px rgba(201, 162, 74, 0.35);
}
.mote { background: radial-gradient(circle at 35% 30%, #f6e7b2, #c9a24a 55%, #6b4e16); box-shadow: 0 0 6px rgba(201, 162, 74, 0.6); }
.loot-pop { box-shadow: 0 0 28px rgba(201, 162, 74, 0.45), 0 8px 16px rgba(0, 0, 0, 0.55); }
.compass, .rune.on img { border-color: #c9a24a; }


/* Gold reflections — a specular sweep, the way light moves on metal. */
.xp-count, .dmg, .gold, .loot strong {
  background-image: linear-gradient(115deg,
    #6e5218 0%, #a8832e 28%, #f6e7b2 46%, #fff8dc 50%, #f0d78a 54%, #8a6420 78%, #6e5218 100%);
  background-size: 220% 100%;
  background-position: 100% 0;
  animation: gold-sheen 2.8s ease-in-out infinite;
}
@keyframes gold-sheen {
  0% { background-position: 120% 0; }
  45% { background-position: -20% 0; }
  100% { background-position: -20% 0; }
}
.hall-banner .molten, .bar i, .track i {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f6e7b2 0%, #c9a24a 42%, #6b4e16 100%);
}
.hall-banner .molten::after, .bar i::after, .track i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 248, 220, 0.85) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: bar-sheen 2.4s ease-in-out infinite;
}
@keyframes bar-sheen { to { transform: translateX(120%); } }
.loot-pop { position: relative; }
.cutscene.rush .loot-pop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 36%, rgba(255, 246, 210, 0.55) 50%, transparent 64%);
  mix-blend-mode: screen;
  transform: translateX(-130%);
  animation: bar-sheen 1.8s ease-out 0.2s 1;
  pointer-events: none;
}
.mote {
  background: radial-gradient(circle at 32% 28%, #fff6d2, #f0d78a 30%, #c9a24a 62%, #6b4e16);
  box-shadow: inset -1px -1px 2px #4e3810, 0 0 6px rgba(201, 162, 74, 0.55);
}
body.reduce .xp-count, body.reduce .dmg, body.reduce .gold, body.reduce .loot strong,
body.reduce .hall-banner .molten::after, body.reduce .bar i::after { animation: none; }


/* Living land — caches breathe, hordes loom, ravens cross, a pane watches. */
.field-cache.deep img { animation: cache-breathe 2.4s ease-in-out infinite; }
@keyframes cache-breathe { 50% { filter: brightness(1.25); transform: translateY(-3px); } }
.field-cache .glow { animation: glow-pulse 2.4s ease-in-out infinite; }
@keyframes glow-pulse { 50% { opacity: 0.9; transform: scale(1.15); } }
.horde.deep img { animation: horde-loom 1.8s ease-in-out infinite alternate; }
.horde .aura { animation: glow-pulse 1.8s ease-in-out infinite; }
.raven {
  position: absolute;
  width: 120px;
  height: 72px;
  object-fit: contain;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.6));
  animation: raven-cross 8s linear forwards;
}
.raven.long { width: 150px; animation-duration: 14s; }
@keyframes raven-cross {
  0% { left: -12%; top: 18%; transform: scaleX(1); }
  100% { left: 108%; top: 42%; transform: scaleX(1); }
}
.startle {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.55);
  animation: startle-pop 1.6s ease-out forwards;
  pointer-events: none;
}
.startle img { width: 220px; height: 300px; object-fit: cover; border: 1px solid #8a6230; box-shadow: 0 0 30px rgba(0, 0, 0, 0.8); }
.startle p { position: absolute; bottom: 18%; color: #f6e7c8; font-family: Cinzel, serif; }
@keyframes startle-pop { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
body.reduce .field-cache.deep img, body.reduce .horde.deep img, body.reduce .raven, body.reduce .startle { animation: none; }


/* Living marks the player can touch. A skip takes nothing. */
.life {
  position: absolute;
  transform: translate(-50%, -100%);
  background: transparent;
  border: 0;
  z-index: 3;
  text-align: center;
  filter: drop-shadow(0 12px 8px rgba(0, 0, 0, 0.6));
}
.life img { width: 84px; height: 100px; object-fit: contain; }
.life small { display: block; font-size: 11px; color: #f6e7c8; background: rgba(18, 10, 8, 0.86); border: 1px solid #8a6230; padding: 2px 6px; }
.life.wisp img { animation: wisp-drift 3.2s ease-in-out infinite; }
@keyframes wisp-drift { 50% { transform: translateY(-10px) scale(1.06); filter: brightness(1.3); } }
.life.gate img { animation: gate-ease 4s ease-in-out infinite; }
@keyframes gate-ease { 50% { transform: scaleX(1.04); filter: brightness(1.2); } }
.life.bell img { transform-origin: 50% 0; animation: bell-sway 2.6s ease-in-out infinite; }
@keyframes bell-sway { 50% { transform: rotate(4deg); } }
.life.moths img { animation: moth-flicker 1.6s ease-in-out infinite; }
@keyframes moth-flicker { 50% { filter: brightness(1.35); transform: translateY(-4px); } }
.life.answered img { animation: loot-pop 0.4s ease-out; }
body.reduce .life img { animation: none; }


/* Weighted duel motion. Anticipation, impact, settle. A loss still takes nothing. */
.duelist img, .duel .pack { will-change: transform; }
.duelist i { transition: width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); }
.phase-open .duelist.you img { animation: step-in 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.phase-open .pack { animation: gate-loom 2.2s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate; }
@keyframes step-in { from { transform: translateX(-18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes gate-loom { to { transform: scale(1.025); filter: brightness(1.08); } }
.phase-strike .duelist.you img { animation: lunge 0.62s cubic-bezier(0.22, 0.61, 0.36, 1); }
.phase-strike .pack { animation: recoil 0.62s cubic-bezier(0.22, 0.61, 0.36, 1); }
.phase-strike .flash { animation: flash-pop 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes lunge {
  0% { transform: translateX(0) scale(1); }
  22% { transform: translateX(-10px) scale(0.97, 1.02); }
  46% { transform: translateX(26px) scale(1.05, 0.96); }
  70% { transform: translateX(8px) scale(1.01, 0.99); }
  100% { transform: none; }
}
@keyframes recoil {
  0%, 30% { transform: none; filter: none; }
  48% { transform: translateX(18px) rotate(1.2deg) scale(0.98, 1.02); filter: brightness(1.6); }
  72% { transform: translateX(6px) rotate(0.3deg); }
  100% { transform: none; filter: none; }
}
.phase-guard .duelist.you img { animation: brace 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes brace { 0% { transform: none; } 40% { transform: scale(0.97) translateY(2px); filter: brightness(0.86); } 100% { transform: none; } }
.phase-answer .pack { animation: lunge-back 0.62s cubic-bezier(0.22, 0.61, 0.36, 1); }
.phase-answer .duelist.you img { animation: recoil-you 0.62s cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes lunge-back {
  0% { transform: none; }
  20% { transform: translateX(6px) scale(0.98, 1.02); }
  44% { transform: translateX(-20px) scale(1.04, 0.97); }
  100% { transform: none; }
}
@keyframes recoil-you {
  0%, 28% { transform: none; filter: none; }
  46% { transform: translateX(-16px) scale(0.98, 1.02); filter: brightness(1.35); }
  100% { transform: none; filter: none; }
}
.dmg { animation: dmg-float 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes dmg-float { 0% { transform: translateY(4px) scale(0.8); opacity: 0; } 18% { opacity: 1; transform: translateY(-8px); } 100% { transform: translateY(-22px); opacity: 0; } }
.cutscene.shake { animation: gate-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes gate-shake { 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(1px); } }
body.reduce .phase-open .pack, body.reduce .phase-strike .duelist.you img,
body.reduce .phase-strike .pack, body.reduce .phase-guard .duelist.you img,
body.reduce .phase-answer .pack, body.reduce .cutscene.shake { animation: none; }


.spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #f6e7b2; box-shadow: 0 0 8px #c9a24a; z-index: 3; animation: spark-out 0.45s ease-out forwards; }
.spark.s1 { left: 46%; top: 40%; }
.spark.s2 { left: 58%; top: 30%; animation-delay: 0.05s; }
.spark.s3 { left: 40%; top: 55%; animation-delay: 0.08s; }
@keyframes spark-out { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 40% { transform: translate(10px, -16px) scale(0.8); } 100% { transform: translate(16px, 6px) scale(0.2); opacity: 0; } }
.dmg.foe { left: 8%; color: #e23b78; }
.cutscene.gate .actions button { transition: transform 0.15s ease; }
.cutscene.gate .actions button:active { transform: scale(0.96); }


/* One curve per motion. Rewards overshoot. Impacts snap. Ambient breathes. */
:root {
  --ease-reward: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-impact: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-breath: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --ease-settle: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-snap: cubic-bezier(0.4, 0, 0.2, 1);
}
.xp-count { animation: loot-pop 0.6s var(--ease-reward); }
.loot-pop { animation: loot-pop 0.55s var(--ease-reward); }
.xp-count.tick { animation: xp-hit 0.22s var(--ease-reward); }
.cutscene .flash { animation: flash-pop 0.55s var(--ease-snap); }
.mote { animation: mote-rise 1.2s var(--ease-impact) forwards; }
.phase-strike .duelist.you img { animation: lunge 0.5s var(--ease-impact); }
.phase-strike .pack { animation: recoil 0.5s var(--ease-settle); }
.phase-answer .pack { animation: lunge-back 0.5s var(--ease-impact); }
.phase-answer .duelist.you img { animation: recoil-you 0.5s var(--ease-settle); }
.phase-guard .duelist.you img { animation: brace 0.55s var(--ease-breath); }
.phase-open .duelist.you img { animation: step-in 0.7s var(--ease-reward); }
.phase-open .pack { animation: gate-loom 2.4s var(--ease-breath) infinite alternate; }
.dmg { animation: dmg-float 0.85s var(--ease-impact); }
.cutscene.shake { animation: gate-shake 0.42s var(--ease-snap); }
.field-cache.deep img { animation: cache-breathe 2.6s var(--ease-breath) infinite; }
.horde.deep img { animation: horde-loom 1.7s var(--ease-breath) infinite alternate; }
.life.wisp img { animation: wisp-drift 3.4s var(--ease-breath) infinite; }
.life.bell img { animation: bell-sway 2.8s var(--ease-breath) infinite; }
.life.moths img { animation: moth-flicker 1.4s var(--ease-snap) infinite; }
.life.gate img { animation: gate-ease 4.2s var(--ease-breath) infinite; }
.raven { animation: raven-cross 8s linear forwards; }
.spark { animation: spark-out 0.5s var(--ease-impact) forwards; }
.hall-banner .molten, .bar i, .track i { transition: width 0.5s var(--ease-reward); }


/* Anticipation, then the pay. Waiting costs nothing. */
.cache.sealed .loom { animation: cache-loom 1.6s var(--ease-breath, ease-in-out) infinite alternate; }
@keyframes cache-loom { to { transform: scale(1.04); filter: brightness(1.2); } }
.primary.pulse { animation: btn-pulse 1.4s var(--ease-breath, ease-in-out) infinite; }
@keyframes btn-pulse { 50% { box-shadow: 0 0 18px rgba(201, 162, 74, 0.55); } }
.gold-count { display: block; font-family: Cinzel, serif; font-size: 22px; margin-top: 4px; }


/* The drop varies. The pay does not. */
.rarity-rare .loot-pop { box-shadow: 0 0 36px rgba(110, 182, 255, 0.55), 0 8px 16px rgba(0, 0, 0, 0.55); }
.rarity-rare .eyebrow { color: #6eb6ff; }
.rarity-epic .loot-pop { box-shadow: 0 0 48px rgba(201, 162, 74, 0.7), 0 0 12px rgba(226, 59, 120, 0.4); animation: loot-pop 0.7s var(--ease-reward, ease) , epic-hold 1.6s ease-in-out 0.7s infinite alternate; }
.rarity-epic .eyebrow { color: #f6e7b2; }
@keyframes epic-hold { to { filter: brightness(1.15); } }


.cutscene.tour { padding: 28px 24px; }
.cutscene.tour h2 { font-family: Cinzel, serif; }


/* One iron shell for every room. */
aside {
  background:
    linear-gradient(180deg, rgba(201, 162, 74, 0.08), transparent 18%),
    linear-gradient(180deg, #12100e, #0a0908);
  border-right: 1px solid #3a2c1c;
  box-shadow: inset -1px 0 0 rgba(201, 162, 74, 0.25);
}
.brand strong { font-family: Cinzel, serif; letter-spacing: 0.04em; color: #f6e7c8; }
.logo {
  border-radius: 4px;
  background: radial-gradient(circle at 35% 30%, #f6e7b2, #c9a24a 45%, #6b4e16);
  color: #1a1208;
  border: 1px solid #f6e7b2;
}
.nav button {
  border-radius: 2px;
  border: 1px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.nav button:hover { border-color: rgba(201, 162, 74, 0.35); background: rgba(201, 162, 74, 0.06); }
.nav button.on {
  background: linear-gradient(90deg, rgba(201, 162, 74, 0.16), transparent 70%);
  border-color: #c9a24a;
  box-shadow: inset 3px 0 0 #c9a24a;
}
.nav .ico { color: #c9a24a; }
.player {
  border-radius: 2px;
  background: #14110e;
  border: 1px solid #3a2c1c;
}
.avatar-sm { border-radius: 2px; border-color: #c9a24a; color: #c9a24a; }
.main { background: radial-gradient(ellipse at 50% 0%, #1a1410, #0c0a09 60%); }
.hud span {
  border: 1px solid #3a2c1c;
  background: rgba(12, 10, 8, 0.7);
  padding: 6px 10px;
  font-variant-numeric: tabular-nums;
}
.primary {
  background: linear-gradient(180deg, #f6e7b2, #c9a24a 45%, #6b4e16);
  color: #1a1208;
  border: 1px solid #f6e7b2;
  border-radius: 2px;
  font-weight: 650;
}
.ghost {
  background: transparent;
  border: 1px solid #3a2c1c;
  color: #f6e7c8;
  border-radius: 2px;
}
.panel, .hero {
  background: rgba(16, 13, 11, 0.72);
  border: 1px solid #3a2c1c;
}

.player span:last-child { flex: 1; }
.player .lvl { display: block; height: 4px; margin-top: 6px; background: linear-gradient(90deg, #6b4e16, #c9a24a 60%, #f6e7b2); }

.class-grid { display: grid; gap: 8px; margin: 12px 0; }
.class-card { text-align: left; background: #14110e; border: 1px solid #3a2c1c; padding: 10px 12px; color: #f6e7c8; }
.class-card small { display: block; color: #c9b89a; }
.class-card.on { border-color: #c9a24a; box-shadow: inset 3px 0 0 #c9a24a; }

#coach { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 30; display: flex; gap: 12px; align-items: center; background: #14110e; border: 1px solid #c9a24a; color: #f6e7c8; padding: 10px 14px; max-width: 640px; }
#coach b { font-family: Cinzel, serif; color: #c9a24a; white-space: nowrap; }

#saved { opacity: 0.45; transition: opacity 0.3s ease; }
#saved.on { opacity: 1; color: #c9a24a; }


#view.enter { animation: room-enter 0.38s cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes room-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.nav button { transition: border-color 0.25s ease, background 0.25s ease, transform 0.2s ease; }
.nav button.on { transform: translateX(2px); }
body.reduce #view.enter { animation: none; }


/* Staggered plates. Each arrives a beat after the last. */
#view.enter > *,
#view.enter .panel,
#view.enter .quest,
#view.enter .hero > * {
  animation: plate-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#view.enter > *:nth-child(1) { animation-delay: 0.02s; }
#view.enter > *:nth-child(2) { animation-delay: 0.08s; }
#view.enter > *:nth-child(3) { animation-delay: 0.14s; }
#view.enter .quest:nth-child(1) { animation-delay: 0.1s; }
#view.enter .quest:nth-child(2) { animation-delay: 0.16s; }
#view.enter .quest:nth-child(3) { animation-delay: 0.22s; }
#view.enter .quest:nth-child(4) { animation-delay: 0.28s; }
@keyframes plate-in { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
.nav button .ico { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.nav button.on .ico { transform: scale(1.15); }
.hud span { transition: transform 0.3s ease; }
body.reduce #view.enter > *,
body.reduce #view.enter .panel,
body.reduce #view.enter .quest { animation: none; }


.dust {
  position: fixed;
  width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6d2, #c9a24a 60%, #6b4e16);
  pointer-events: none; z-index: 40;
  animation: dust-rise 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes dust-rise { to { transform: translate(var(--dx), -70px) scale(0.4); opacity: 0; } }
body.reduce .dust { display: none; }


.burst {
  position: fixed; width: 5px; height: 5px; border-radius: 50%;
  pointer-events: none; z-index: 45;
  animation: burst-out 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.burst.gold { background: radial-gradient(circle at 35% 30%, #fff6d2, #c9a24a); box-shadow: 0 0 10px rgba(246, 231, 178, 0.9), 0 0 4px rgba(201, 162, 74, 0.8); }
.burst.red { background: radial-gradient(circle at 35% 30%, #ffd0df, #e23b78); box-shadow: 0 0 10px rgba(255, 208, 223, 0.9), 0 0 4px rgba(226, 59, 120, 0.8); }
@keyframes burst-out { to { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; } }
body.reduce .burst { display: none; }


.ring { position: fixed; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 2px solid #c9a24a; box-shadow: 0 0 12px rgba(201, 162, 74, 0.8), inset 0 0 6px rgba(246, 231, 178, 0.6); pointer-events: none; z-index: 44; animation: ring-out 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.ring.red { border-color: #e23b78; box-shadow: 0 0 12px rgba(226, 59, 120, 0.8), inset 0 0 6px rgba(255, 208, 223, 0.6); }
@keyframes ring-out { to { transform: scale(8); opacity: 0; } }
.burst.heavy { width: 8px; height: 8px; }
.burst { animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
body.reduce .ring { display: none; }


.quest { display: grid; grid-template-columns: 6px 1fr auto; gap: 12px; align-items: center; }
.quest.pinned { box-shadow: inset 0 0 0 1px #c9a24a; }
.q-pay { display: flex; gap: 12px; align-items: baseline; margin-top: 6px; }
.q-pay small { color: #9b95a8; }
.q-pay .gold { font-family: Cinzel, serif; }


.sense { height: 8px; background: #1a120c; border: 1px solid #3a2c1c; margin: 8px 0; }
.sense i { display: block; height: 100%; background: linear-gradient(90deg, #6b4e16, #c9a24a 60%, #f6e7b2); transition: width 0.3s ease; }


.you-pin.strode { animation: stride-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes stride-pop { 50% { transform: translate(-50%, -100%) scale(1.2); } }


.levelbar { display: flex; align-items: center; gap: 8px; }
.levelbar b { font-family: var(--serif); color: #f6e7b2; letter-spacing: 0.04em; }
.levelbar .track { width: 120px; height: 8px; background: #1a120c; border: 1px solid #3a2c1c; }
.levelbar .track i { display: block; height: 100%; background: linear-gradient(90deg, #6b4e16, #c9a24a 60%, #f6e7b2); }
.levelbar small { color: #b9a88a; font-size: 11px; }

/* Compact headers and market layout */
.compact-head { padding: 28px 48px 24px !important; margin-bottom: 8px; }
.compact-head h2 { margin: 4px 0; font-size: 32px; }
.market-wrap { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 16px; }
.market-grid { display: grid; gap: 10px; margin-top: 12px; }
.market-card { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 8px; background: rgba(255,248,236,0.6); border: 1px solid #8a7044; }
.market-card img { width: 64px; height: 64px; object-fit: cover; }
.market-card strong { display: block; color: #2a1c12; }
.market-card small, .market-card em { display: block; color: #4a3726; font-style: normal; font-size: 12px; }
@media (max-width: 900px) { .market-wrap { grid-template-columns: 1fr; } }

/* Map marks stay small until zoom */
.field-cache.deep, .horde.deep { transform-origin: center bottom; }
.field-cache small, .horde small { opacity: 0.85; }

.armory aside.panel, .hero aside.panel { padding-top: 120px !important; }

/* Map icons stay small until the player zooms in. Size comes from --s so the loom animation does not override it. */
.field-cache.deep, .horde.deep { transform: scale(var(--s, 0.4)); transform-origin: center bottom; }
.field-cache.deep img, .horde.deep img { transform: none; }
.field-cache.deep small, .horde.deep small { display: none; }
.world[data-zoom="16"] .field-cache.deep small,
.world[data-zoom="17"] .field-cache.deep small,
.world[data-zoom="18"] .field-cache.deep small,
.world[data-zoom="19"] .field-cache.deep small,
.world[data-zoom="16"] .horde.deep small,
.world[data-zoom="17"] .horde.deep small,
.world[data-zoom="18"] .horde.deep small,
.world[data-zoom="19"] .horde.deep small { display: block; }

/* Icons sit on the land. No black box. They grow with zoom via --s. */
.field-cache.deep, .horde.deep, .cottage.deep {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.field-cache.deep img, .horde.deep img, .cottage.deep {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,0.55));
}
.field-cache.deep, .horde.deep { transform: scale(var(--s, 0.3)); transform-origin: center bottom; }
.cottage.deep { transform: scale(var(--s, 0.5)); transform-origin: center bottom; }

/* Life marks sit on the land and grow with zoom. Animations stay gentle. */
.life { transform: translate(-50%, -100%) scale(var(--s, 0.4)); transform-origin: center bottom; transition: transform 0.25s ease; }
.life img { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.life.wisp img { animation: wisp-drift 3.4s ease-in-out infinite; }
.life.bell img { animation: bell-sway 2.8s ease-in-out infinite; }
.life.moths img { animation: moth-flicker 1.8s ease-in-out infinite; }
@keyframes wisp-drift { 50% { filter: brightness(1.4) drop-shadow(0 0 8px #c9a24a); } }
@keyframes bell-sway { 50% { filter: brightness(1.2); } }
@keyframes moth-flicker { 50% { filter: brightness(1.5) drop-shadow(0 0 6px #f6e7b2); } }
.field-cache.deep, .horde.deep { transition: transform 0.25s ease; }

.field-cache.deep img { animation: cache-glow 2.6s ease-in-out infinite; }
.horde.deep img { animation: horde-glow 1.8s ease-in-out infinite alternate; }
@keyframes cache-glow { 50% { filter: brightness(1.3) drop-shadow(0 0 10px #c9a24a); } }
@keyframes horde-glow { to { filter: brightness(1.25) drop-shadow(0 0 8px #e23b78); } }

/* Player character on the map. A soft walk. Class colors tint the figure. */
.player-pin.char {
  width: 36px; height: 52px; margin: -46px 0 0 -18px;
  background: transparent; border: 0; border-radius: 0;
  box-shadow: none; display: block;
}
.player-pin.char .fig {
  display: block; width: 22px; height: 36px; margin: 0 auto;
  background:
    radial-gradient(circle at 50% 18%, #f6e7c8 0 6px, transparent 7px),
    linear-gradient(180deg, #c9a24a 0 8px, #8a6230 8px 14px, #3a2a22 14px);
  border-radius: 4px 4px 2px 2px;
  position: relative;
  animation: char-walk 0.9s ease-in-out infinite;
  filter: drop-shadow(0 6px 4px rgba(0,0,0,0.6));
}
.player-pin.char .fig::before,
.player-pin.char .fig::after {
  content: ""; position: absolute; bottom: 0; width: 6px; height: 12px;
  background: #2a2018; border-radius: 1px;
}
.player-pin.char .fig::before { left: 2px; animation: leg-a 0.9s ease-in-out infinite; }
.player-pin.char .fig::after { right: 2px; animation: leg-b 0.9s ease-in-out infinite; }
.player-pin.char small {
  display: block; margin-top: 2px; font-size: 11.5px; color: #f6e7c8;
  background: rgba(18,10,8,0.8); padding: 1px 4px; border-radius: 2px;
  white-space: nowrap;
}
.player-pin.char[data-cls="Necromancer"] .fig { background: radial-gradient(circle at 50% 18%, #d0e8d0 0 6px, transparent 7px), linear-gradient(180deg, #6a8a6a 0 8px, #2a3a2a 8px 14px, #1a2018 14px); }
.player-pin.char[data-cls="Sorcerer"] .fig { background: radial-gradient(circle at 50% 18%, #d0d8f0 0 6px, transparent 7px), linear-gradient(180deg, #6a7aaa 0 8px, #2a2a4a 8px 14px, #181828 14px); }
.player-pin.char[data-cls="Assassin"] .fig { background: radial-gradient(circle at 50% 18%, #f0d0e0 0 6px, transparent 7px), linear-gradient(180deg, #aa6a8a 0 8px, #4a2a3a 8px 14px, #281820 14px); }
.player-pin.char[data-cls="Barbarian"] .fig { background: radial-gradient(circle at 50% 18%, #f0d8c0 0 6px, transparent 7px), linear-gradient(180deg, #aa6a3a 0 8px, #4a2a1a 8px 14px, #281810 14px); }
.player-pin.char[data-cls="Holy Knight"] .fig { background: radial-gradient(circle at 50% 18%, #f6e7c8 0 6px, transparent 7px), linear-gradient(180deg, #c9a24a 0 8px, #8a6230 8px 14px, #3a2a18 14px); }
@keyframes char-walk { 50% { transform: translateY(-3px); } }
@keyframes leg-a { 50% { transform: translateY(2px); } }
@keyframes leg-b { 50% { transform: translateY(-2px); } }
body.reduce .player-pin.char .fig,
body.reduce .player-pin.char .fig::before,
body.reduce .player-pin.char .fig::after { animation: none; }

.player-pin.char img.fig {
  width: 48px; height: 64px; object-fit: contain; background: transparent !important;
  animation: char-walk 1.1s ease-in-out infinite;
  filter: drop-shadow(0 6px 4px rgba(0,0,0,0.65));
}

/* Class strike light. Female figures keep the same walk, with a brighter hit. */
.cutscene[data-cls="Necromancer"] .duelist.you img { filter: drop-shadow(0 0 16px rgba(120,255,170,0.7)); }
.cutscene[data-cls="Sorcerer"] .duelist.you img { filter: drop-shadow(0 0 16px rgba(120,180,255,0.7)); }
.cutscene[data-cls="Assassin"] .duelist.you img { filter: drop-shadow(0 0 16px rgba(220,60,120,0.7)); }
.cutscene[data-cls="Barbarian"] .duelist.you img { filter: drop-shadow(0 0 16px rgba(255,140,60,0.7)); }
.cutscene[data-cls="Holy Knight"] .duelist.you img { filter: drop-shadow(0 0 16px rgba(246,220,140,0.7)); }
.cutscene[data-gender="female"] .duelist.you img { animation: lunge 0.62s cubic-bezier(0.22, 0.61, 0.36, 1), class-pulse 0.62s ease-out; }
.phase-strike .duelist.you img { animation: lunge 0.62s cubic-bezier(0.22, 0.61, 0.36, 1); }
.player-pin.char img.fig { animation: char-walk 1.1s ease-in-out infinite; }
body.reduce .cutscene .duelist.you img,
body.reduce .player-pin.char img.fig { animation: none; }

/* Class glow on the map pin. Same light for male and female. */
.player-pin.char[data-cls="Necromancer"] img.fig { filter: drop-shadow(0 0 8px rgba(120,255,170,0.5)) drop-shadow(0 6px 4px rgba(0,0,0,0.65)); }
.player-pin.char[data-cls="Sorcerer"] img.fig { filter: drop-shadow(0 0 8px rgba(120,180,255,0.5)) drop-shadow(0 6px 4px rgba(0,0,0,0.65)); }
.player-pin.char[data-cls="Assassin"] img.fig { filter: drop-shadow(0 0 8px rgba(220,60,120,0.5)) drop-shadow(0 6px 4px rgba(0,0,0,0.65)); }
.player-pin.char[data-cls="Barbarian"] img.fig { filter: drop-shadow(0 0 8px rgba(255,140,60,0.5)) drop-shadow(0 6px 4px rgba(0,0,0,0.65)); }
.player-pin.char[data-cls="Holy Knight"] img.fig { filter: drop-shadow(0 0 8px rgba(246,220,140,0.5)) drop-shadow(0 6px 4px rgba(0,0,0,0.65)); }

/* Male class strike flourishes. Same light, stronger trail. */
.cutscene[data-gender="male"] .phase-strike .duelist.you img { animation: lunge 0.62s cubic-bezier(0.22, 0.61, 0.36, 1), class-pulse 0.62s ease-out; }
.cutscene[data-cls="Necromancer"][data-gender="male"] .phase-strike .duelist.you img { filter: drop-shadow(0 0 16px rgba(120,255,170,0.7)); }
.cutscene[data-cls="Sorcerer"][data-gender="male"] .phase-strike .duelist.you img { filter: drop-shadow(0 0 16px rgba(120,180,255,0.7)); }
.cutscene[data-cls="Assassin"][data-gender="male"] .phase-strike .duelist.you img { filter: drop-shadow(0 0 16px rgba(220,60,120,0.7)); }
.cutscene[data-cls="Barbarian"][data-gender="male"] .phase-strike .duelist.you img { filter: drop-shadow(0 0 16px rgba(255,140,60,0.7)); }
.cutscene[data-cls="Holy Knight"][data-gender="male"] .phase-strike .duelist.you img { filter: drop-shadow(0 0 16px rgba(246,220,140,0.7)); }
@keyframes class-pulse {
  0% { filter: brightness(1); }
  30% { filter: brightness(1.4); }
  100% { filter: brightness(1); }
}
.player-pin.char[data-cls] img.fig { animation: char-walk 1.1s ease-in-out infinite; }

/* Class strike motions. Same for male and female. */
.cutscene[data-cls="Necromancer"] .phase-strike .duelist.you img { animation: necro-bolt 0.62s cubic-bezier(0.22, 0.61, 0.36, 1), class-pulse 0.62s ease-out; }
.cutscene[data-cls="Sorcerer"] .phase-strike .duelist.you img { animation: sorc-lance 0.62s cubic-bezier(0.22, 0.61, 0.36, 1), class-pulse 0.62s ease-out; }
.cutscene[data-cls="Assassin"] .phase-strike .duelist.you img { animation: sin-cut 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), class-pulse 0.5s ease-out; }
.cutscene[data-cls="Barbarian"] .phase-strike .duelist.you img { animation: barb-cleave 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), class-pulse 0.7s ease-out; }
.cutscene[data-cls="Holy Knight"] .phase-strike .duelist.you img { animation: knight-flare 0.62s cubic-bezier(0.22, 0.61, 0.36, 1), class-pulse 0.62s ease-out; }
@keyframes necro-bolt { 0% { transform: translateX(0); } 40% { transform: translateX(18px) scale(1.04); } 100% { transform: translateX(0); } }
@keyframes sorc-lance { 0% { transform: translateX(0); } 35% { transform: translateX(22px) scale(1.06); } 100% { transform: translateX(0); } }
@keyframes sin-cut { 0% { transform: translateX(0) rotate(0); } 30% { transform: translateX(14px) rotate(4deg); } 100% { transform: translateX(0); } }
@keyframes barb-cleave { 0% { transform: translateX(0) scale(1); } 45% { transform: translateX(20px) scale(1.08); } 100% { transform: translateX(0); } }
@keyframes knight-flare { 0% { transform: translateX(0); } 40% { transform: translateX(16px) scale(1.05); } 100% { transform: translateX(0); } }
.mote.mnecro { background: radial-gradient(circle, #d0ffe8, #4ae08a); }
.mote.msorc { background: radial-gradient(circle, #d0e8ff, #4a8ae0); }
.mote.msin { background: radial-gradient(circle, #ffd0e0, #e04a8a); }
.mote.mbarb { background: radial-gradient(circle, #ffe0c0, #e08a4a); }
.mote.mknight { background: radial-gradient(circle, #fff6d0, #e0c24a); }

.spellbook { margin-top: 18px; padding: 14px 16px; border: 1px solid rgba(201,162,74,0.35); background: rgba(12,10,14,0.55); }
.spellbook h3 { margin: 4px 0 10px; font-size: 1rem; }
.spellbook ul { list-style: none; padding: 0; margin: 0; }
.spellbook li { display: grid; grid-template-columns: 36px 1fr auto; gap: 4px 12px; padding: 8px 0; border-top: 1px solid rgba(201,162,74,0.2); align-items: center; }
.spellbook li img { width: 36px; height: 36px; object-fit: cover; grid-row: span 2; border: 1px solid rgba(201,162,74,0.4); }
.spellbook li b { color: #f6e7b2; }
.spellbook li small { color: #8a7a5a; }
.spellbook li.on small { color: #c9a24a; }
.spellbook li span { grid-column: 2 / -1; color: #cfc6b4; font-size: 0.9rem; }

/* Armory text. Light ink on the dark plate so the list can be read. */
.armory .panel { color: #2a1c12; }
.armory .panel h2, .armory .panel .eyebrow { color: #2a1c12; }
.armory .panel p, .armory .panel .note, .armory .panel small, .armory .panel em { color: #3a2718; }
.armory .panel .slot span, .armory .panel .ward small, .armory .panel .ward em { color: #3a2718; }
.armory .panel .slot strong { color: #1a120c; }

.armory .panel {
  background: linear-gradient(180deg, rgba(247,237,216,0.96), rgba(232,214,184,0.94)), url("assets/tatter-fiber.png") center / cover;
  color: #2a1c12;
}
.armory .panel h2 { color: #1a120c; }
.armory .panel p, .armory .panel .note { color: #3a2718; font-weight: 500; }

.armory .panel, .armory .panel * { color: #1a120c !important; }
.armory .panel h2 { font-weight: 700; }
.armory .panel p, .armory .panel .note { text-shadow: 0 1px 0 rgba(255,248,236,0.6); }

/* Options plate. Opaque so the preview and the tools can be read. */
#view .panel { background: linear-gradient(180deg, rgba(247,237,216,0.97), rgba(232,214,184,0.95)), url("assets/tatter-fiber.png") center / cover; color: #2a1c12; position: relative; z-index: 2; }
#view .panel h2, #view .panel .eyebrow, #view .panel p, #view .panel label { color: #2a1c12; }

/* Force plates visible. The enter animation was leaving them at opacity 0. */
#view .panel, #view .hero, #view .stat, #view .quest { opacity: 1 !important; }

/* People on the ground. A gold frame means they will speak. Walking away takes nothing. */
.npc {
  position: absolute;
  z-index: 5;
  width: 74px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  transform: translate(-50%, -100%) scale(var(--s, 0.55));
  transform-origin: center bottom;
  filter: drop-shadow(0 10px 6px rgba(0, 0, 0, 0.65));
  cursor: pointer;
}
.npc img {
  width: 64px;
  height: 76px;
  object-fit: cover;
  object-position: center 20%;
  border: 1px solid #f6e7b2;
  box-shadow: 0 0 0 1px #8a6420, 0 0 14px rgba(226, 59, 120, 0.45);
  background: #120c0a;
}
.npc small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: #f6e7c8;
  background: rgba(18, 10, 8, 0.88);
  border: 1px solid #c9a24a;
  padding: 2px 6px;
  white-space: nowrap;
}
.npc.met img { box-shadow: 0 0 0 1px #c9a24a, 0 0 12px rgba(201, 162, 74, 0.7); }
.npc:hover, .npc:focus-visible { z-index: 7; }
.world[data-zoom="13"] .npc small,
.world[data-zoom="14"] .npc small,
.world[data-zoom="15"] .npc small { display: none; }

.voice-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.panel .voice {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  height: auto;
  text-align: left;
  padding: 8px;
  background: rgba(255, 248, 236, 0.62);
  border: 1px solid #8a6230;
  color: #2a1c12;
}
.panel .voice img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  object-position: center 20%;
  border: 1px solid #c9a24a;
  flex: none;
}
.panel .voice span { display: flex; flex-direction: column; min-width: 0; }
.panel .voice b { font-family: var(--serif); font-size: 15px; color: #2a1c12; }
.panel .voice small { color: #4e3b28; font-size: 12px; white-space: normal; }
.panel .voice:hover, .panel .voice:focus-visible { border-color: #c9a24a; box-shadow: inset 0 0 0 1px #c9a24a; }

.cache.dialogue { text-align: center; padding: 56px 48px 44px; }
.cache.dialogue .npc-face {
  width: 96px;
  height: 96px;
  object-fit: cover;
  object-position: center 18%;
  margin: 0 auto 10px;
  border: 1px solid #8a6420;
  box-shadow: 0 0 0 1px #c9a24a, 0 0 18px rgba(226, 59, 120, 0.28);
}
.cache.dialogue .talk-choices {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 14px;
}
.cache.dialogue .talk-choices button {
  width: 100%;
  height: auto;
  white-space: normal;
  text-align: left;
  line-height: 1.35;
}
.cache.dialogue .talk-choices button b { display: block; font-weight: 650; }
.cache.dialogue .talk-choices button small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.35;
  color: #5c4328;
  font-weight: 420;
}
.cache.dialogue .stake,
.cache.dialogue .memory {
  text-align: left;
  margin: 10px 0 0;
  padding: 8px 10px;
  border: 1px solid #8a7044;
  background: rgba(255, 248, 236, 0.72);
  color: #3a2718;
  font-size: 13px;
}
.cache.dialogue .stake { border-color: #c9a24a; }
.cache.dialogue .stake b,
.cache.dialogue .memory b {
  display: block;
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #6b4e16;
  margin-bottom: 2px;
}


/* ---- Missing-art fallback ----
   The torn-parchment mask (assets/tatter.png) hides any panel completely when the
   image is absent. Until the art loads (html.art-ok), draw panels as solid parchment
   so every word stays readable. Once assets/ is shipped the original look returns. */
html:not(.art-ok) .panel, html:not(.art-ok) .page-head, html:not(.art-ok) .figure-card,
html:not(.art-ok) .constellation, html:not(.art-ok) .sheet, html:not(.art-ok) .cache,
html:not(.art-ok) .lens-key, html:not(.art-ok) .stat {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background: linear-gradient(160deg, #efe0bf 0%, #e2cc9f 55%, #cdb27e 100%) !important;
  border: 1px solid #8a6420 !important;
  box-shadow: 0 0 0 1px #3a2718, 0 10px 30px rgba(0,0,0,0.55) !important;
}
html:not(.art-ok) .sheet, html:not(.art-ok) .cache { padding: 32px 28px !important; }
html:not(.art-ok) .panel, html:not(.art-ok) .page-head, html:not(.art-ok) .constellation,
html:not(.art-ok) .lens-key, html:not(.art-ok) .stat { padding: 22px 24px !important; }
img.art-missing { object-fit: contain; background: #1a140e; }
.gender-row button.on { border-color: #6a4520; color: #1c140e; background: #f0d7a2; box-shadow: inset 0 -2px 0 #9a2a4a; }
#coach[hidden] { display: none; }

/* Readability on parchment: ghost buttons and small print were pale-on-pale. */
.quest .ghost, .panel .ghost, .board-head .ghost, .page-head .ghost, .stat .ghost {
  color: #2a1d10 !important;
  -webkit-text-fill-color: #2a1d10;
  background: rgba(255, 248, 236, 0.55) !important;
  border: 1px solid #6a4520 !important;
}
.quest .ghost:disabled, .panel .ghost:disabled { opacity: 0.7; }
.q-pay small, .figure-card small, .quest .tag, .panel .tag { color: #4e3b28 !important; }
.q-pay .gold { background-image: linear-gradient(115deg, #5a3f10 0%, #8a6420 45%, #6e5218 100%) !important; }
.privacy-note a { color: #6a2a10; text-decoration: underline; }
@media (max-width: 600px) {
  .hud { flex-wrap: wrap; gap: 8px; }
  .hud span { white-space: nowrap; }
  .hud .levelbar { flex: 1 1 100%; }
}
/* Armory rows: keep each piece's name and status stacked beside its picture, no overlap. */
#view .slot-row .ward { display: grid !important; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: center; flex: 0 0 196px !important; width: 196px; min-width: 196px; }
#view .slot-row .ward img { grid-row: 1 / span 2; width: 64px !important; height: 64px !important; }
#view .slot-row .ward small { grid-column: 2; align-self: end; font-size: 13px; line-height: 1.25; position: static !important; }
#view .slot-row .ward em { grid-column: 2; align-self: start; font-size: 11px; position: static !important; transform: none !important; }
/* Class portraits */
.class-card { display: grid !important; grid-template-columns: 52px 1fr; column-gap: 12px; align-items: center; }
.class-card .class-thumb { grid-row: 1 / span 2; width: 52px; height: 64px; object-fit: cover; object-position: top; border: 1px solid #3a2c1c; }
.class-set > b { display: flex; align-items: center; gap: 10px; }
.class-set .class-thumb { width: 40px; height: 52px; object-fit: cover; object-position: top; border: 1px solid #8a6420; }
.armory-portrait { display: block; width: 140px; height: 190px; object-fit: cover; object-position: top; margin: 8px 0 4px; border: 1px solid #8a6420; }
.profile-portrait { width: 64px; height: 84px; object-fit: cover; object-position: top; border: 1px solid #8a6420; }
.avatar-sm img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.figure-card img.char-portrait { object-fit: cover; object-position: top; }
.avatar-sm { overflow: hidden; }
#dev-badge { position: fixed; top: 8px; right: 8px; z-index: 50; background: rgba(20,17,14,.75); color: #c9b89a; font: 600 11px/1 system-ui, sans-serif; letter-spacing: .1em; padding: 5px 8px; border: 1px solid #5a4632; cursor: pointer; opacity: .7; }
#dev-badge.on { background: #e23b78; color: #fff; border-color: #fff; font-weight: 800; opacity: 1; }

/* ---- Every popup fits the screen ----
   The overlay respects safe-area insets; whatever sits inside it is capped to the
   visible viewport (dvh, with vh fallback) and scrolls internally. Action rows stick
   to the bottom of the scroll so Close / primary buttons stay reachable. */
.modal {
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
  overflow: hidden;
  place-items: center;
  box-sizing: border-box;
  height: 100vh; height: 100dvh;
}
.modal > * {
  box-sizing: border-box;
  max-width: 100% !important;
  max-height: calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  max-height: min(90dvh, calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))) !important;
  overflow-y: auto !important;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  margin: 0 auto;
}
.modal > .ar { height: min(78vh, 640px, calc(100dvh - 24px)) !important; overflow: hidden !important; }
.modal > * img { max-width: 100%; }
.modal > .cutscene img, .modal > .cache img { max-height: 42dvh; object-fit: contain; }
.modal > * .actions { position: sticky; bottom: 0; z-index: 2; flex-wrap: wrap; padding-top: 8px; padding-bottom: 4px; background: linear-gradient(to top, rgba(14,11,16,0.0), rgba(14,11,16,0.0)); }
.modal > .sheet .actions, .modal > .cache .actions { background: linear-gradient(to top, #e8d6ae 70%, rgba(232,214,174,0)); }
.modal > .cutscene .actions { background: linear-gradient(to top, rgba(10,8,12,0.92) 70%, rgba(10,8,12,0)); }
@media (max-width: 480px) {
  .modal > .sheet, .modal > .cache { padding: 56px 34px 40px !important; }
  html:not(.art-ok) .modal > .sheet, html:not(.art-ok) .modal > .cache { padding: 24px 18px !important; }
  .modal > * .actions button { flex: 1 1 auto; }
}
/* While a popup is open, the toast moves to the top so it never covers the popup's buttons. */
body:has(#modal:not([hidden])) .toast { top: max(10px, env(safe-area-inset-top)) !important; bottom: auto !important; }
.toast { max-width: calc(100vw - 24px); box-sizing: border-box; }
/* Parchment sheets are masked at the edges: keep their action rows in normal flow (they scroll into view) instead of sticking into the torn rim. */
.modal > .sheet .actions, .modal > .cache .actions { position: static !important; background: none !important; }
/* Reward reveal: a scroll/parchment drop carries its words on the scroll (it read as a blank scroll before),
   and the reward line under the art is bright and readable. */
.loot-scroll { position: relative; display: block; width: min(560px, 100%); margin: 8px auto; }
.loot-scroll img { display: block; width: 100%; height: auto; max-height: 42dvh; object-fit: contain; }
.loot-scroll .scroll-text { position: absolute; inset: 18% 22%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; color: #2a1a0c; text-shadow: 0 1px 0 rgba(255,244,214,.75); overflow: hidden; }
.loot-scroll .scroll-text b { font-family: Cinzel, Georgia, serif; font-size: clamp(15px, 3.6vw, 24px); line-height: 1.15; }
.loot-scroll .scroll-text span { font-size: clamp(12px, 2.6vw, 16px); line-height: 1.35; font-weight: 600; }
.cutscene .reward-note { color: #f6e7c8 !important; font-size: 15px; line-height: 1.45; position: relative; z-index: 2; text-shadow: 0 1px 3px #000; }
/* Tour hint bar ("Tour step 2 / 5"): sits under popups and hides while any popup is open, so it never blocks a popup button. */
#coach { z-index: 4 !important; max-width: calc(100vw - 24px); box-sizing: border-box; bottom: max(12px, env(safe-area-inset-bottom)) !important; flex-wrap: wrap; }
body:has(#modal:not([hidden])) #coach { display: none !important; }
#coach .tiny { margin-left: auto; }

/* ===================== Map-first layout (Pokémon GO style) ===================== */
html, body { height: 100%; }
body { overflow: hidden; overscroll-behavior: none; }
.app { height: 100vh; height: 100dvh; min-height: 0; }
.main { padding: 0 !important; overflow: visible; background: transparent !important; }
#world.world {
  position: fixed; top: 0; bottom: 0; left: 268px; right: 0; z-index: 0;
  background: #070605; touch-action: none; overflow: hidden; user-select: none; -webkit-user-select: none;
}
#world .stage { position: absolute; inset: 0; overflow: hidden; perspective: 600px; }
#world .tilt { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
#world .plane { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
#world .ground { position: absolute; left: 0; top: 0; width: 0; height: 0; inset: auto; transform: none !important; }
#world .marks { position: absolute; left: 0; top: 0; width: 0; height: 0; inset: auto; transform-style: preserve-3d; }
#world .geo-overlay {
  position: absolute; pointer-events: none; z-index: 1;
  background-image: url("assets/land-cracks.jpg"), url("assets/sanctuary-mask.jpg"),
    linear-gradient(108deg, transparent 47%, rgba(255, 84, 24, 0.22) 50%, transparent 53%);
  background-repeat: repeat, repeat, repeat;
  mix-blend-mode: multiply; opacity: 0.42;
}
/* Screen-space atmosphere only (vignette + weather). The ground texture lives in .geo-overlay. */
#world .abyss { z-index: 2; }
#world .abyss .abyss-ink { background: radial-gradient(ellipse at 50% 45%, transparent 10%, rgba(0,0,0,0.12) 45%, rgba(0,0,0,0.62) 100%) !important; opacity: 1; mix-blend-mode: normal; }
#world .horizon { position: absolute; left: 0; right: 0; top: 0; height: 46%; pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
  background: linear-gradient(180deg, #070505 0%, rgba(14, 8, 6, 0.92) 30%, rgba(30, 12, 8, 0.45) 62%, transparent 100%); }
#world.third .horizon { opacity: 1; }
#world.third .marks .bb { rotate: var(--bb, none); transform-origin: 50% 100%; }
#world.third .marks .range { opacity: 0.55; }
#world.third .player-pin.char { width: 96px; height: 132px; margin: -128px 0 0 -48px; }
#world.third .player-pin.char img.fig { width: 96px; height: 116px; filter: drop-shadow(0 0 10px rgba(255,170,90,0.75)) drop-shadow(0 8px 6px rgba(0,0,0,0.7)) brightness(1.25); }
#world.third .player-pin.char small { font-size: 13px; }
#world .walk-target { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 3px solid #e23b78; box-shadow: 0 0 0 6px rgba(226,59,120,.25); pointer-events: none; z-index: 3; }
#world .walk-line { position: absolute; height: 0; border-top: 3px dashed rgba(246, 231, 178, 0.85); transform-origin: 0 0; pointer-events: none; z-index: 3; }
#world .geo-note { position: absolute; left: 50%; transform: translateX(-50%); top: 58px; margin: 0; max-width: min(92vw, 560px); z-index: 3;
  background: rgba(14, 11, 16, 0.82); border: 1px solid #5a4632; color: #f6e7c8; font-size: 12.5px; line-height: 1.35; padding: 5px 10px; text-align: center; pointer-events: none; }
#world .geo-note:empty { display: none; }
#world .geo-note[data-mode="gps"] { border-color: #4a8a5a; }
#world .geo-note[data-mode="sim"] { border-color: #e23b78; }
#world .map-credit { position: absolute; left: 6px; bottom: 4px; z-index: 3; margin: 0; font-size: 11px; color: #c9b89a; background: rgba(0,0,0,.5); padding: 1px 5px; pointer-events: auto; }
#world .world-chrome { position: absolute; right: 12px; bottom: 24px; top: auto; left: auto; z-index: 3; display: grid; gap: 8px; }
#world .world-chrome button { width: 46px; height: 46px; font-size: 20px; border-radius: 50%; background: rgba(14, 11, 16, 0.86); border: 1px solid #c9a24a; color: #f6e7b2; display: grid; place-items: center; padding: 0; }
#world .world-chrome button[hidden] { display: none; }
#world .nordic-compass { z-index: 3; }
#world .dev-pad { display: none; position: absolute; left: 12px; bottom: 30px; z-index: 3; grid-template-columns: repeat(3, 42px); grid-template-rows: repeat(3, 42px); }
body.dev #world .dev-pad { display: grid; }
#world .dev-pad button { background: rgba(226, 59, 120, 0.85); color: #fff; border: 1px solid #fff; border-radius: 8px; font-size: 16px; padding: 0; }
#world .dev-pad [data-id=n] { grid-area: 1 / 2; } #world .dev-pad [data-id=w] { grid-area: 2 / 1; }
#world .dev-pad [data-id=e] { grid-area: 2 / 3; } #world .dev-pad [data-id=s] { grid-area: 3 / 2; }
#world .tile { will-change: auto; }

/* HUD floats over the map */
#top { position: fixed !important; z-index: 3; top: 8px; left: calc(268px + 12px); right: auto; max-width: calc(100vw - 268px - 24px - min(600px, 46vw) - 12px); pointer-events: auto; border: 1px solid #3a2c1c; }
body:not(.sheet-open) #top { max-width: calc(100vw - 268px - 90px); }

/* Desktop: side nav stays; views open in a right-hand panel over the map. */
#pane {
  position: fixed; z-index: 3; top: 10px; right: 10px; bottom: 10px; width: min(600px, 46vw);
  display: flex; flex-direction: column; background: rgba(10, 8, 12, 0.9); border: 1px solid #5a4632;
  box-shadow: 0 12px 40px rgba(0,0,0,.6); transform: translateX(calc(100% + 20px)); transition: transform 0.28s cubic-bezier(.2,.7,.3,1); pointer-events: auto;
}
body.sheet-open #pane { transform: none; }
#pane .pane-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-bottom: 1px solid #3a2c1c; color: #f6e7b2; font-family: Cinzel, Georgia, serif; flex: none; }
#pane .pane-bar b { flex: 1; font-size: 15px; letter-spacing: .06em; }
#pane .grip { display: none; }
#pane .pane-close { background: #1a140e; border: 1px solid #c9a24a; color: #f6e7b2; padding: 7px 12px; font-size: 13px; font-family: var(--sans); }
#pane #view { flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 12px; pointer-events: auto; -webkit-overflow-scrolling: touch; }
#pane #view.enter { animation: none; }
#pane .hero, #pane .stats, #pane .two, #pane .profile-grid, #pane .armory, #pane .lens, #pane .market-wrap, #pane .branches { grid-template-columns: 1fr !important; }
#pane #view .panel, #pane #view .page-head, #pane #view .stat, #pane #view .constellation {
  padding: clamp(36px, 10%, 72px) clamp(52px, 13%, 96px) clamp(30px, 9%, 64px) !important;
}
#dock, #drawer-scrim { display: none; }

/* Phones / narrow: full-screen map, bottom dock, bottom sheet, nav drawer. */
@media (max-width: 980px) {
  .app { display: block; }
  #world.world { left: 0; }
  #top { left: 8px !important; right: 8px !important; top: max(6px, env(safe-area-inset-top)) !important; max-width: none !important; padding: 5px 8px !important; }
  #top .crumb { display: none; }
  #top .hud { gap: 6px !important; font-size: 12.5px; }
  #top .hud span { padding: 3px 6px !important; }
  #top #saved { display: none !important; }
  #world .geo-note { top: calc(max(6px, env(safe-area-inset-top)) + 64px); }
  #world .nordic-compass { top: calc(max(6px, env(safe-area-inset-top)) + 64px) !important; }
  #world .world-chrome { bottom: calc(76px + env(safe-area-inset-bottom)); right: 10px; }
  #world .dev-pad { bottom: calc(80px + env(safe-area-inset-bottom)); }
  #world .map-credit { bottom: calc(64px + env(safe-area-inset-bottom)); }
  #dock {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 4;
    padding: 4px max(6px, env(safe-area-inset-left)) max(4px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-right));
    background: rgba(10, 8, 12, 0.94); border-top: 1px solid #5a4632;
  }
  #dock button { background: none; border: 0; color: #c9b89a; display: grid; justify-items: center; gap: 1px; padding: 6px 0 4px; min-height: 52px; }
  #dock button span { font-size: 19px; line-height: 1; }
  #dock button small { font-size: 11.5px; }
  #dock button.on { color: #f6e7b2; box-shadow: inset 0 2px 0 #c9a24a; }
  #pane {
    left: 0; right: 0; top: auto; width: auto; bottom: calc(60px + env(safe-area-inset-bottom));
    height: calc(100dvh - 60px - env(safe-area-inset-bottom) - max(56px, env(safe-area-inset-top) + 50px)); max-height: 82dvh;
    border-left: 0; border-right: 0; border-radius: 14px 14px 0 0; transform: translateY(calc(100% + 80px));
  }
  #pane .grip { display: block; position: absolute; left: 50%; top: 4px; width: 44px; height: 4px; margin-left: -22px; border-radius: 3px; background: #5a4632; }
  #pane .pane-bar { position: relative; padding-top: 12px; }
  #pane #view { padding: 8px; }
  aside#side {
    position: fixed; z-index: 4; top: 0; bottom: 0; left: 0; width: min(300px, 84vw); overflow-y: auto;
    transform: translateX(-105%); transition: transform 0.25s ease; border-right: 1px solid var(--line); border-bottom: 0;
    padding-top: max(18px, env(safe-area-inset-top)); padding-bottom: calc(70px + env(safe-area-inset-bottom));
  }
  body.drawer-open aside#side { transform: none; }
  body.drawer-open #drawer-scrim { display: block; position: fixed; inset: 0; z-index: 3; background: rgba(0,0,0,.5); }
  .toast { bottom: calc(70px + env(safe-area-inset-bottom)) !important; }
  #coach { bottom: calc(68px + env(safe-area-inset-bottom)) !important; }
}
@media (min-width: 981px) {
  aside#side { position: fixed; top: 0; bottom: 0; left: 0; width: 268px; box-sizing: border-box; overflow-y: auto; z-index: 3; }
}

#top .hud, #top .hud span { white-space: nowrap; }
@media (min-width: 981px) {
  body.sheet-open #world .world-chrome { right: calc(min(600px, 46vw) + 24px); }
  body.sheet-open #world .geo-note { left: calc((100vw - 268px - min(600px, 46vw)) / 2); }
  #world .nordic-compass { top: auto !important; bottom: 24px !important; left: 14px !important; }
}
@media (max-width: 980px) {
  #world .nordic-compass { top: calc(max(6px, env(safe-area-inset-top)) + 100px) !important; left: 10px !important; width: 64px !important; height: 64px !important; }
  #world .geo-note { left: auto; right: 8px; transform: none; max-width: calc(100vw - 96px); text-align: left; }
}
#world .horizon { height: 58%; }
@media (min-width: 981px) { #world .geo-note { top: 88px; } }

/* Torch light: warm radius around the player, screen-space, above the vignette. */
#world .torch { position: absolute; width: min(110vw, 760px); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 120, 0.34) 0%, rgba(255, 150, 70, 0.18) 28%, rgba(255, 110, 40, 0.06) 52%, transparent 70%);
  mix-blend-mode: screen; animation: torch-flicker 3.2s ease-in-out infinite; }
#world.third .torch { width: min(140vw, 1000px); aspect-ratio: 1.7; }
@keyframes torch-flicker { 0%,100% { opacity: 1; } 40% { opacity: 0.86; } 70% { opacity: 0.95; } }
body.reduce #world .torch { animation: none; }
/* Flat-view figure: larger, glowing. */
#world .player-pin.char { width: 64px; height: 92px; margin: -86px 0 0 -32px; }
#world .player-pin.char img.fig { width: 64px; height: 80px; filter: drop-shadow(0 0 2px #fff3d6) drop-shadow(0 0 9px rgba(255,170,90,0.8)) drop-shadow(0 6px 4px rgba(0,0,0,0.7)) brightness(1.2); }
#world .player-pin.char small { color: #fff3d6; text-shadow: 0 1px 3px #000, 0 0 6px #000; font-weight: 700; }
#world .player-pin.char::before { content: ""; position: absolute; left: 50%; bottom: 8px; width: 46px; height: 14px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,0.6), transparent 70%); }
#world.third .player-pin.char { width: 64px; height: 92px; margin: -86px 0 0 -32px; }
/* Third-person hero: screen space, feet on the ground point, ~22% of screen height. */
#world .hero3d { position: absolute; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 0.25s;
  height: calc(var(--u, 34px) * 1.8); aspect-ratio: 0.67; transform: translate(-50%, -96%) scale(var(--hs, 1)); transform-origin: 50% 96%; }
#world .hero3d .hero-fig { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
  filter: drop-shadow(0 0 1.5px #ffe9c4) drop-shadow(0 0 12px rgba(255, 170, 90, 0.75)) drop-shadow(0 0 26px rgba(255, 120, 50, 0.35)) brightness(1.18) contrast(1.05);
  animation: char-walk 1.1s ease-in-out infinite; }
#world .hero3d .hero-shadow { position: absolute; left: 50%; bottom: -6%; width: 92%; height: 13%; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 45%, transparent 72%); }
#world .hero3d small { position: absolute; left: 50%; bottom: -16%; transform: translateX(-50%); color: #fff3d6; font: 700 13px/1 inherit; text-shadow: 0 1px 3px #000, 0 0 6px #000; white-space: nowrap; }
body.reduce #world .hero3d .hero-fig { animation: none; }
/* Third-person icons: upright billboards with a pedestal and ground shadow. Perspective sizes them by distance; preserve-3d depth-sorts them. */
#world.third .marks .bb:not([data-pin]) { transform-style: preserve-3d; filter: drop-shadow(0 0 6px rgba(255, 190, 120, 0.35)); }
#world.third .marks .bb:not([data-pin])::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 120%; height: 20px; transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(255, 196, 120, 0.4) 0%, rgba(90, 50, 24, 0.55) 38%, rgba(0,0,0,0.55) 56%, transparent 74%);
  box-shadow: inset 0 -3px 0 rgba(201, 162, 74, 0.55); z-index: -1; }
#world .marks .node, #world .marks .npc, #world .marks .horde, #world .marks .field-cache, #world .marks .life, #world .marks .other-pin { filter: brightness(1.15); }

/* ---- Cut-out map figures: no frames, boxes or card backgrounds (flat and 3D). ---- */
#world .marks .npc img, #world .marks .horde img, #world .marks .field-cache img, #world .marks .life img, #world .marks .cottage {
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; object-fit: contain !important; }
#world .marks .npc img { width: 46px; height: 76px; object-position: 50% 100%; filter: drop-shadow(0 0 1px #f6e7c8) drop-shadow(0 0 6px rgba(255, 190, 120, 0.45)); }
#world .marks .npc.met img { filter: drop-shadow(0 0 1px #f6e7c8) drop-shadow(0 0 8px rgba(201, 162, 74, 0.8)); }
#world .marks .horde img { width: 96px; height: 54px; filter: drop-shadow(0 0 6px rgba(226, 59, 120, 0.55)); }
#world .marks .field-cache img { width: 46px; height: 44px; }
#world .marks small { background: none !important; border: 0 !important; color: #fff1d6; font-weight: 700; text-shadow: 0 1px 2px #000, 0 0 5px #000, 0 0 9px #000; padding: 0 !important; white-space: nowrap; }
#world .marks .horde .aura, #world .marks .field-cache .glow { opacity: 0.6; }
/* ---- Close view: real-world sizes in metres via --u (px per metre on the ground plane). ---- */
#world.third .marks .npc, #world.third .marks .horde, #world.third .marks .field-cache, #world.third .marks .life {
  transform: translate(-50%, -100%) !important; transform-origin: 50% 100%; width: auto; margin: 0; }
#world.third .marks .cottage { transform: translate(-50%, -100%) !important; transform-origin: 50% 100%; margin: 0 !important; width: auto !important; height: calc(var(--u) * 6.5) !important; }
#world.third .marks .npc img { width: auto; height: calc(var(--u) * 1.8); }
#world.third .marks .horde img { width: auto; height: calc(var(--u) * 1.9); }
#world.third .marks .field-cache img { width: auto; height: calc(var(--u) * 0.8); }
#world.third .marks .life img { width: auto; height: calc(var(--u) * 1.2); }
#world.third .marks .life.gate img { height: calc(var(--u) * 3.2); }
#world.third .marks .life.bell img { height: calc(var(--u) * 2.2); }
#world.third .marks .horde .aura, #world.third .marks .field-cache .glow { display: none; }
#world.third .marks small { font-size: 12px; }

/* ---- Close-view sprites (screen space). --k = perspective scale at the ground point. ---- */
#world .sprites { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
#world .sprites[hidden] { display: none; }
#world.third .marks .bb:not([data-pin]) { visibility: hidden; }
#world .sprites .sprite { position: absolute; margin: 0 !important; width: auto !important; pointer-events: auto; padding: 0; border: 0; background: none;
  transform: translate(-50%, -100%) scale(var(--k, 1)) !important; transform-origin: 50% 100%; text-align: center; animation: none; filter: none; }
#world .sprites .sprite::before { content: ""; position: absolute; left: 50%; bottom: -0.35em; width: 110%; min-width: 30px; height: 0.9em; transform: translateX(-50%); border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.35) 50%, transparent 72%); font-size: calc(var(--u) * 0.9); }
#world .sprites .sprite img { display: block; margin: 0 auto; border: 0 !important; box-shadow: none !important; background: none !important; border-radius: 0 !important; object-fit: contain !important; width: auto !important;
  filter: drop-shadow(0 0 1px rgba(255, 233, 196, 0.8)) drop-shadow(0 0 7px rgba(255, 170, 90, 0.4)); }
#world .sprites img.sprite.cottage { height: calc(var(--u) * 5.5) !important; transition: opacity 0.3s; filter: drop-shadow(0 10px 8px rgba(0,0,0,0.7)) brightness(1.15); pointer-events: none; }
#world .sprites .npc img { height: calc(var(--u) * 1.8) !important; }
#world .sprites .horde img { height: calc(var(--u) * 1.9) !important; filter: drop-shadow(0 0 8px rgba(226, 59, 120, 0.6)) brightness(1.2); }
#world .sprites .field-cache img { height: calc(var(--u) * 0.8) !important; }
#world .sprites .life img { height: calc(var(--u) * 1.2) !important; }
#world .sprites .life.gate img { height: calc(var(--u) * 3.2) !important; }
#world .sprites .life.bell img { height: calc(var(--u) * 2.2) !important; }
#world .sprites .glow, #world .sprites .aura { display: none; }
#world .sprites .node { position: absolute; }
#world .sprites small { display: block; background: none !important; border: 0 !important; color: #fff1d6; font: 700 12px/1.2 inherit; text-shadow: 0 1px 2px #000, 0 0 5px #000, 0 0 9px #000; white-space: nowrap; margin-top: 4px; }
#world .sprites .sprite img, #world .sprites img.sprite { max-width: none !important; min-width: 0 !important; width: auto !important; }
#world .sprites .sprite { max-width: none !important; }
#world .tile.stained, #world .tile[data-stained="1"] { filter: brightness(1.75) contrast(1.12) saturate(1.1); }
/* Dialogue: full-body cut-out figure instead of a framed portrait. */
.dialogue img.npc-face.npc-figure { width: auto !important; height: clamp(150px, 26vh, 240px) !important; max-width: 60%; object-fit: contain !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; display: block; margin: 0 auto 6px;
  filter: drop-shadow(0 0 2px rgba(255, 233, 196, 0.7)) drop-shadow(0 10px 10px rgba(0,0,0,0.55)); }
/* ---- Realm layer: real streets and houses redrawn as a decrepit dark-fantasy town. ---- */
#world .realm { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 1; }
#world.realm-on .ground { opacity: 0.28; }
#world.realm-on .geo-overlay { opacity: 0.12; }
#world .realm .rg.park { fill: url(#rp-park); }
#world .realm .rg.wood { fill: url(#rp-wood); }
#world .realm .rg.grave { fill: url(#rp-grave); }
#world .realm .rg { stroke: #14160f; stroke-width: 1.2; opacity: 0.95; }
#world .realm .rw { fill: url(#rp-marsh); stroke: #0e1513; stroke-width: 1.5; }
#world .realm .rwl { fill: none; stroke: #1c2a25; stroke-linecap: round; stroke-linejoin: round; }
#world .realm path[class^="rr-"] { fill: none; stroke-linecap: round; stroke-linejoin: round; }
#world .realm .rr-major-edge, #world .realm .rr-minor-edge { stroke: #1a120c; }
#world .realm .rr-major { stroke: #7b6a52; }
#world .realm .rr-minor { stroke: #6b5b46; }
#world .realm .rr-major-stones, #world .realm .rr-minor-stones { stroke: #4e4234; stroke-dasharray: 2.5 3.5; stroke-linecap: butt !important; opacity: 0.85; }
#world .realm .rr-path-edge { stroke: #1d150e; opacity: 0.7; }
#world .realm .rr-path { stroke: #8a7556; stroke-dasharray: 5 3; }
#world .realm .rr-path-stones { stroke: none; }
#world .realm .rb-shadow { fill: rgba(0, 0, 0, 0.55); transform: translate(2px, 3px); }
#world .realm .rb { fill: url(#rp-roof); stroke: #0b0706; stroke-width: 1.3; stroke-linejoin: round; }
#world .realm .rb.chapel { fill: #3a3634; stroke: #c9a24a; }
#world .realm .rb.hall { stroke: #8a6230; }
#world .realm .rl { fill: #f2e6c9; stroke: #140d08; stroke-width: 3px; paint-order: stroke; font-family: Cinzel, Georgia, serif; font-weight: 700; letter-spacing: 0.04em; }
#world .realm .rpl { fill: #f2e6c9; stroke: #140d08; stroke-width: 3px; paint-order: stroke; text-anchor: middle; font-weight: 700; }
#world .realm .rp use { filter: drop-shadow(0 2px 2px rgba(0,0,0,0.7)); }
#world.third .realm .rl, #world.third .realm .rps { display: none; }
#world .sprites img.sprite.cottage.realm-house { height: calc(var(--u) * var(--m, 6) * 0.32) !important; pointer-events: none; filter: drop-shadow(0 10px 8px rgba(0,0,0,0.7)) brightness(1.1) sepia(0.15); }
#world .sprites img.sprite.cottage.realm-house.flip { transform: translate(-50%, -100%) scale(var(--k, 1)) scaleX(-1) !important; }
#world .world-chrome [data-act=street-names] { font: 700 14px/1 Cinzel, Georgia, serif; }
#world.realm-on .marks .cottage, #world.realm-on .sprites .cottage:not(.realm-house) { display: none !important; }
/* Intro film overlay */
html.intro-on, html.intro-on body { overflow: hidden; }
#intro { position: fixed; inset: 0; z-index: 10000; background: #000; display: grid; place-items: center; transition: opacity 0.7s ease; }
#intro.out { opacity: 0; pointer-events: none; }
#intro video { width: 100%; height: 100%; object-fit: contain; background: #000; }
#intro .intro-begin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; gap: 6px; padding: 22px 46px; cursor: pointer;
  font: 700 clamp(22px, 5vw, 34px)/1 Cinzel, serif; letter-spacing: 0.08em; color: #ffe6b0; text-transform: uppercase;
  background: radial-gradient(ellipse at 50% 40%, rgba(120, 30, 10, 0.92), rgba(20, 8, 4, 0.95)); border: 2px solid #c9a24a; border-radius: 6px;
  box-shadow: 0 0 0 4px rgba(0,0,0,0.6), 0 0 38px rgba(255, 120, 40, 0.55), inset 0 0 22px rgba(255, 170, 80, 0.25); text-shadow: 0 0 10px rgba(255, 140, 50, 0.8);
  animation: intro-pulse 1.8s ease-in-out infinite; }
#intro .intro-begin small { font: 600 13px/1 Outfit, sans-serif; letter-spacing: 0.2em; color: #d9b98a; }
#intro .intro-begin[hidden] { display: none; }
#intro .intro-skip { position: absolute; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); padding: 8px 14px; color: #ffe6b0; background: rgba(0,0,0,0.55); border: 1px solid #c9a24a; border-radius: 4px; font: 600 14px Outfit, sans-serif; cursor: pointer; }
@keyframes intro-pulse { 50% { box-shadow: 0 0 0 4px rgba(0,0,0,0.6), 0 0 60px rgba(255, 140, 50, 0.85), inset 0 0 26px rgba(255, 170, 80, 0.35); } }
@media (prefers-reduced-motion: reduce) { #intro .intro-begin { animation: none; } }
/* Close-view WebGL realm: sits above the CSS plane, below sprites, torch and hero. */
#world .gl3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; opacity: 0; display: block; }
#world.gl-full .stage .ground, #world.gl-full .stage .geo-overlay, #world.gl-full .stage .realm, #world.gl-full .stage .horizon { visibility: hidden; }
#world.gl-full .torch { opacity: 0.55; }
#world.deep .stage .ground, #world.deep .stage .geo-overlay, #world.deep .stage .realm { display: none; }
#world.deep .stage { background: radial-gradient(ellipse at 50% 75%, #2a221b 0%, #120e0b 70%); }
#world.gl-full .abyss-ink { opacity: 0.55; }
/* Satchel chip (battle.js) sits bottom-left so it never covers the map zoom/recenter/street-name buttons. */
body #lc-satchel { right: auto; left: 10px; bottom: calc(108px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { body #lc-satchel { left: auto; right: 70px; bottom: 24px; } }
/* WebGL standees replace the sprite pictures (depth-tested against houses); the DOM sprites stay for taps + labels. */
#world.gl-figs .sprites .sprite img, #world.gl-figs .sprites img.sprite { opacity: 0 !important; }
#world.gl-figs .sprites .sprite::before { display: none; }