:root {
  --ink: #0d0914;
  --ink-2: #160f22;
  --ink-3: #20172f;
  --moon: #f1ebff;
  --muted: #b2a6c6;
  --gold: #e9b949;
  --gold-soft: #f6d98a;
  --gold-deep: #9c7426;
  --violet: #8b5cff;
  --violet-soft: #c5a8ff;
  --hp: #3fc46b;
  --hp-deep: #1f7d3d;
  --mob: #d8344b;
  --xp: #a560ff;
  --line: rgba(241, 235, 255, 0.12);
  --rim: linear-gradient(180deg, #f6d98a, #9c7426 55%, #f2cd6e);
  --common: #e6e2ee;
  --uncommon: #3ee06a;
  --rare: #3e9bff;
  --epic: #b45cff;
  --legendary: #ff9a1f;
  --shadow: 0 22px 50px -22px rgba(0, 0, 0, 0.9);
  --display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--moon);
  background: var(--ink);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }

.backdrop {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(13, 9, 20, 0.35), rgba(13, 9, 20, 0.92) 70%),
    url('/realm/art/realm-wide.webp') center top / cover no-repeat;
  filter: saturate(1.1);
}

.realm { position: relative; z-index: 1; max-width: 540px; margin: 0 auto; padding: 8px 12px calc(116px + env(safe-area-inset-bottom)); }

/* ---- header ---- */
.top { text-align: center; padding: 2px 0 8px; position: relative; }
.back {
  position: absolute; left: 0; top: 8px; color: var(--muted); text-decoration: none;
  font-weight: 800; font-size: .82rem; padding: 4px 8px; border-radius: 8px;
}
.back:hover { color: var(--gold-soft); }
.title {
  font-family: var(--display); font-weight: 800; font-size: clamp(1.7rem, 7vw, 2.3rem);
  letter-spacing: .04em; line-height: 1.05;
  background: linear-gradient(180deg, #fff6d9 10%, var(--gold) 55%, #b9832a 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #2a1a05) drop-shadow(0 0 18px rgba(233, 185, 73, .35));
}
.title em { font-style: normal; }
.tag { color: var(--muted); font-weight: 700; font-size: .78rem; letter-spacing: .04em; margin-top: 2px; }

/* ---- frames & bars ---- */
.hud { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.unit {
  flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0;
  background: linear-gradient(180deg, rgba(32, 23, 47, .92), rgba(18, 12, 28, .92));
  border: 1px solid rgba(233, 185, 73, .45); border-radius: 14px; padding: 6px 10px 6px 6px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.portrait {
  flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--gold); background: radial-gradient(circle at 50% 30%, #3a2a57, #160f22);
  box-shadow: 0 0 0 2px #2a1a05, 0 0 14px rgba(233, 185, 73, .35);
}
.portrait img { width: 130%; max-width: none; margin: -6% 0 0 -15%; }
.unit__body { flex: 1; min-width: 0; }
.unit__name { font-family: var(--display); font-weight: 800; font-size: .95rem; display: flex; align-items: center; gap: 6px; }
.stars { color: var(--gold); font-size: .8rem; letter-spacing: .05em; }
.lvl {
  display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 5px;
  border-radius: 6px; background: #120c1c; border: 1px solid var(--gold-deep);
  color: var(--gold-soft); font: 900 .72rem 'Nunito', sans-serif;
}
.unit__sub { display: flex; gap: 10px; font-size: .74rem; font-weight: 800; color: var(--muted); margin-top: 2px; }

.bar {
  position: relative; height: 16px; border-radius: 6px; overflow: hidden;
  background: #0b0710; border: 1px solid rgba(0, 0, 0, .8);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6), 0 0 0 1px rgba(233, 185, 73, .25);
  margin-top: 3px;
}
.bar > i {
  position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--f, 1));
  transition: transform .25s ease-out;
}
.bar > span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: .68rem; font-weight: 900; letter-spacing: .03em; text-shadow: 0 1px 2px #000, 0 0 2px #000;
}
.bar--hp > i { background: linear-gradient(180deg, #6ff08f, var(--hp) 45%, var(--hp-deep)); }
.bar--hp.low > i { background: linear-gradient(180deg, #ff8a8a, #e0404f 45%, #8e1c2a); }
.bar--mob > i { background: linear-gradient(180deg, #ff7a8a, var(--mob) 45%, #7d1424); }
.bar--warn > i { background: linear-gradient(180deg, #ff9aa8, #ff3a55 50%, #8e1c2a); transition: none; }
.bar--warn.heavy > i { background: linear-gradient(180deg, #ffe7a3, var(--gold) 50%, var(--gold-deep)); }
.bar--warn > span { animation: blink .5s steps(2, start) infinite; }
.bar--xp { height: 12px; margin: 6px 0 0; border-radius: 4px; }
.bar--xp > i { background: linear-gradient(180deg, #d4a8ff, var(--xp) 50%, #5a24a8); }
.bar--xp > span { font-size: .6rem; }

.purse {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(32, 23, 47, .92), rgba(18, 12, 28, .92));
  border: 1px solid rgba(233, 185, 73, .45); font-weight: 900; color: var(--gold-soft);
  box-shadow: var(--shadow); min-width: 84px; justify-content: center;
}
.purse.bump { animation: bump .35s ease; }
.coin {
  width: 16px; height: 16px; border-radius: 50%; flex: 0 0 16px;
  background: radial-gradient(circle at 35% 30%, #fff3c4, var(--gold) 45%, #8a5f17);
  box-shadow: 0 0 0 1px #5a3b0a, 0 0 8px rgba(233, 185, 73, .6);
}

/* ---- zone tabs ---- */
.zones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 8px; }
.zone {
  border: 1px solid var(--line); background: rgba(22, 15, 34, .9); border-radius: 10px;
  padding: 6px 4px; font-weight: 800; font-size: .7rem; line-height: 1.15; cursor: pointer;
  color: var(--muted); min-height: 40px;
}
.zone b { display: block; font-family: var(--display); font-size: .72rem; color: var(--moon); }
.zone[aria-pressed="true"] { border-color: var(--gold); background: linear-gradient(180deg, #3a2958, #1c1330); box-shadow: 0 0 14px rgba(233, 185, 73, .3); }
.zone[aria-pressed="true"] b { color: var(--gold-soft); }
.zone:disabled { opacity: .5; cursor: not-allowed; }
.zone.fresh { animation: glow 1.4s ease-in-out 3; }

/* ---- arena ---- */
.arena {
  position: relative; overflow: hidden; border-radius: 18px;
  height: clamp(180px, calc(100vh - 384px), 600px);
  height: clamp(180px, calc(100svh - 384px), 600px);
  background: #160f22 center bottom / cover no-repeat;
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 0 1px rgba(233, 185, 73, .55), var(--shadow), inset 0 -60px 80px -40px rgba(0, 0, 0, .55);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.arena[data-zone="whisperwood"] { background-image: url('/realm/art/zone-whisperwood.webp'); }
.arena[data-zone="crystal"] { background-image: url('/realm/art/zone-crystal.webp'); }
.arena[data-zone="shadowspire"], .arena[data-zone="lair"] { background-image: url('/realm/art/zone-shadowspire.webp'); }
.arena[data-zone="lair"]::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 60% at 70% 60%, rgba(139, 92, 255, .28), transparent 70%), rgba(20, 0, 30, .25);
}
.arena.hurt { animation: hurt .3s ease; }

.kitty {
  position: absolute; left: -2%; bottom: 3%; width: 50%; max-width: 280px; z-index: 3;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .55));
  animation: bob 2.6s ease-in-out infinite; transform-origin: 50% 90%;
  pointer-events: none;
}
.kitty.lunge { animation: lunge .32s cubic-bezier(.2, .9, .3, 1); }
.kitty.emote { width: 44%; bottom: 5%; animation: pop .5s cubic-bezier(.2, 1.4, .4, 1); }
.kitty.down { animation: down .7s ease forwards; }

.mob {
  position: absolute; right: 2%; bottom: 6%; width: 46%; max-width: 260px; z-index: 2;
  background: none; border: 0; padding: 0; cursor: crosshair; -webkit-tap-highlight-color: transparent;
}
.mob img { width: 100%; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .6)); animation: menace 2.2s ease-in-out infinite; }
.mob:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; border-radius: 20px; }
.mob.boss { width: 66%; max-width: 380px; right: -4%; bottom: 8%; }
.mob.enter img { animation: enter .45s cubic-bezier(.2, 1.3, .5, 1), menace 2.2s ease-in-out .45s infinite; }
.mob.hit img { animation: hitflash .18s ease; }
.mob.dying { pointer-events: none; }
.mob.dying img { animation: die .55s ease forwards; }
.mob.winding img { animation: windup .9s ease-in infinite alternate; filter: drop-shadow(0 0 16px rgba(255, 58, 85, .95)) drop-shadow(0 10px 10px rgba(0, 0, 0, .6)); }
.mob.dying.winding img { animation: die .55s ease forwards; }
.mob.enraged img { filter: drop-shadow(0 0 22px rgba(255, 60, 90, .9)) drop-shadow(0 10px 10px rgba(0, 0, 0, .6)); }

.pet { position: absolute; left: 38%; bottom: 4%; width: 13%; max-width: 70px; z-index: 4; animation: bob 1.6s ease-in-out infinite; pointer-events: none; }
.pet.swipe { animation: petswipe .3s ease; }
.pet svg { width: 100%; height: auto; filter: drop-shadow(0 0 6px rgba(246, 217, 138, .5)); }

.target {
  position: absolute; top: 10px; right: 10px; width: min(54%, 300px); z-index: 6;
  background: linear-gradient(180deg, rgba(32, 23, 47, .9), rgba(18, 12, 28, .9));
  border: 1px solid rgba(233, 185, 73, .5); border-radius: 12px; padding: 6px 8px 7px;
  box-shadow: var(--shadow);
}
.target__name { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 800; font-size: .8rem; white-space: nowrap; overflow: hidden; }
#targetName { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bossfight .target { left: 10px; right: 10px; width: auto; max-width: 420px; margin: 0 auto; border-color: rgba(255, 90, 115, .7); }
.bossfight .quest-pin { display: none; }
.target__name .lvl.elite { color: #ff9aa8; border-color: #ff5a73; }
.target__name .lvl.grey { color: #9a94a3; border-color: #4a4552; }
.target__name .lvl.hard { color: #ffb057; border-color: #d47a1f; }

.quest-pin {
  position: absolute; top: 10px; left: 10px; z-index: 6; max-width: 38%;
  font-size: .7rem; font-weight: 800; line-height: 1.25; color: var(--gold-soft);
  text-shadow: 0 1px 3px #000, 0 0 2px #000;
}
.quest-pin b { display: block; font-family: var(--display); color: #ffd36a; font-size: .74rem; }
.quest-pin span { color: #fff; }
.quest-pin.done { animation: glow 1s ease 2; }

.fx { position: absolute; inset: 0; pointer-events: none; z-index: 8; }
.num {
  position: absolute; font: 900 1.25rem 'Nunito', sans-serif; color: #fff;
  text-shadow: 0 2px 0 #000, 0 0 6px rgba(0, 0, 0, .9); animation: floatup .9s ease-out forwards; white-space: nowrap;
}
.num.crit { color: #ffd84a; font-size: 1.9rem; }
.num.crit::after { content: '!'; }
.num.pet { color: var(--violet-soft); font-size: 1rem; }
.num.heal { color: #6ff08f; }
.num.hurt { color: #ff5a6e; }
.num.gold { color: var(--gold-soft); font-size: 1rem; }
.num.xp { color: var(--violet-soft); font-size: 1rem; }
.num.word { font-family: var(--display); font-size: 1.1rem; color: var(--violet-soft); }
.spark {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4, var(--gold) 50%, #8a5f17);
  animation: coinfly .8s cubic-bezier(.3, .7, .4, 1) forwards;
}
.slash {
  position: absolute; width: 46%; height: 7px; border-radius: 99px; z-index: 7;
  background: linear-gradient(90deg, transparent, #fff 40%, var(--violet-soft) 70%, transparent);
  box-shadow: 0 0 14px var(--violet); animation: slash .26s ease-out forwards;
}

.toasts { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 9; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 8px; max-width: 100%;
  background: rgba(12, 8, 18, .92); border: 1px solid var(--line); border-left: 3px solid var(--rc, var(--gold));
  border-radius: 10px; padding: 6px 10px; font-size: .78rem; font-weight: 800;
  box-shadow: var(--shadow); animation: toastin .25s ease, toastout .4s ease 3.1s forwards;
}
.toast svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--rc, var(--gold)); }
.toast .nm { color: var(--rc, var(--moon)); }
.toast small { color: var(--muted); font-weight: 700; }

.banner {
  position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; place-content: center; pointer-events: none; opacity: 0;
  font-family: var(--display); font-weight: 800; text-align: center; font-size: clamp(1.8rem, 9vw, 2.8rem); line-height: 1.05;
  color: var(--gold-soft); text-shadow: 0 3px 0 #2a1a05, 0 0 30px rgba(233, 185, 73, .9);
}
.banner small { display: block; font-family: 'Nunito', sans-serif; font-size: .9rem; font-weight: 900; color: #fff; margin-top: 6px; text-shadow: 0 2px 4px #000; }
.banner.show { animation: banner 2.4s ease forwards; }
.banner.bad { color: #ff9aa8; text-shadow: 0 3px 0 #2a0510, 0 0 30px rgba(255, 60, 90, .8); }

.vault-door {
  position: absolute; left: 50%; bottom: 46%; transform: translateX(-50%); z-index: 9;
  border: 0; border-radius: 999px; padding: 12px 20px; cursor: pointer;
  font: 800 .95rem var(--display); color: #2a1c00; letter-spacing: .02em;
  background: linear-gradient(180deg, #fff3c4, var(--gold) 50%, #b9832a);
  box-shadow: 0 0 0 2px #2a1a05, 0 0 30px rgba(233, 185, 73, .8); animation: glow 1.6s ease-in-out infinite;
  max-width: 92%;
}

/* ---- action bar ---- */
.actionbar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 8px; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
@media (hover: none) { .ab .key { display: none; } }
.ab.ab--block {
  grid-column: span 2; aspect-ratio: auto; display: flex; gap: 6px; justify-content: center; align-items: center;
  background: radial-gradient(circle at 50% 30%, #6a3fd0, #2a1650 75%); color: #fff3c4; border-color: var(--gold);
}
.ab.ab--block svg { width: 34px; height: 34px; }
.ab__label { font: 800 1rem var(--display); letter-spacing: .06em; text-shadow: 0 2px 2px rgba(0, 0, 0, .8); }
.ab.ab--block.urgent { animation: alarm .35s ease-in-out infinite alternate; }
.ab {
  position: relative; aspect-ratio: 1; border-radius: 12px; cursor: pointer; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #3b2a5c, #160f22 75%);
  border: 2px solid var(--gold-deep); padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7), 0 6px 14px -6px rgba(0, 0, 0, .9);
  display: grid; place-items: center; color: var(--gold-soft);
  transition: transform .08s ease, border-color .15s ease;
}
.ab svg { width: 58%; height: 58%; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .8)); }
.ab:active { transform: scale(.93); }
.ab:hover:not(:disabled) { border-color: var(--gold-soft); }
.ab .key { position: absolute; top: 2px; left: 5px; font-size: .62rem; font-weight: 900; color: rgba(255, 255, 255, .7); }
.ab .cnt { position: absolute; right: 5px; bottom: 2px; font-size: .72rem; font-weight: 900; color: #fff; text-shadow: 0 1px 2px #000; }
.ab .cd {
  position: absolute; inset: 0; pointer-events: none;
  background: conic-gradient(rgba(5, 2, 10, .78) calc(var(--p, 0) * 360deg), transparent 0);
}
.ab .secs { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-size: 1rem; color: #fff; text-shadow: 0 1px 3px #000; pointer-events: none; }
.ab.locked { filter: grayscale(1) brightness(.45); cursor: not-allowed; }
.ab.locked .lock { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font-size: .58rem; font-weight: 900; color: #fff; }
.ab.ready { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7), 0 0 12px rgba(233, 185, 73, .45); }
.ab.new { animation: glow 1.2s ease-in-out 4; }
.ab.urgent { animation: urgent .6s ease-in-out infinite alternate; }
.ab[data-id="claw"] { color: #fff; }
.ab[data-id="purr"], .ab[data-id="potion"] { color: #ff8fb4; }
.ab[data-id="fury"] { color: #ffb84a; }

.log {
  min-height: 2.6em; margin-top: 8px; font-size: .8rem; font-weight: 700; color: var(--muted);
  text-align: center; line-height: 1.3;
}

/* ---- secret cave ---- */
.cave {
  /* native buttons keep the old links' look */
  appearance: none; -webkit-appearance: none; width: 100%; cursor: pointer; text-align: inherit; font-family: inherit;
  display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; padding: 10px 16px 10px 10px;
  border-radius: 16px; text-decoration: none; color: var(--moon); font-weight: 800;
  background: linear-gradient(120deg, #2e2140, #16213a);
  border: 1px solid rgba(233, 185, 73, .6);
  box-shadow: var(--shadow), 0 0 26px -6px rgba(139, 92, 255, .55);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cave:hover { transform: translateY(-2px); box-shadow: var(--shadow), 0 0 32px -4px rgba(233, 185, 73, .55); }
.cave:focus-visible, .cavebar:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }
.cave img { width: 54px; height: 54px; flex: 0 0 54px; object-fit: contain; }
.cave__label { flex: 1; font-size: 1.02rem; }
.cave__sub { display: block; font-weight: 700; font-size: .76rem; color: var(--muted); margin-top: 1px; }
.cave__arrow { color: var(--gold); font-weight: 900; font-size: 1.2rem; }
.cave__key { font-size: 1.8rem; width: 44px; text-align: center; }
.cave--primary { background: linear-gradient(180deg, #fff3c4, var(--gold) 50%, #b9832a); color: #2a1c00; border-color: #2a1a05; }
.cave--primary .cave__sub { color: #4a3510; }
.cave--primary .cave__arrow { color: #2a1c00; }

/* ---- sticky cave bar: the most important thing on the page ---- */
.cavebar {
  appearance: none; -webkit-appearance: none; cursor: pointer; text-align: inherit; font-family: inherit;
  position: fixed; z-index: 30; left: 50%; transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom)); width: min(516px, calc(100% - 20px)); min-height: 74px;
  display: flex; align-items: center; gap: 12px; padding: 9px 18px 9px 10px; border-radius: 20px;
  text-decoration: none; color: var(--moon); font-weight: 800;
  background: linear-gradient(120deg, #4a2a6c, #1f2a58);
  border: 2px solid var(--gold);
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .9), 0 0 28px -4px rgba(233, 185, 73, .55);
  animation: beckon 6s ease-in-out infinite;
}
.cavebar img { width: 60px; height: 60px; flex: 0 0 60px; object-fit: contain; margin-top: -16px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
.cavebar__label { flex: 1; font: 800 1.32rem var(--display); color: var(--gold-soft); line-height: 1.1; }
.cavebar__sub { display: block; font: 700 .8rem 'Nunito', sans-serif; color: #d2c6e4; margin-top: 2px; }
.cavebar__arrow {
  flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  font-size: 1.35rem; font-weight: 900; color: #2a1c00;
  background: linear-gradient(180deg, #fff3c4, var(--gold) 55%, #b9832a); box-shadow: 0 0 14px rgba(233, 185, 73, .6);
}
.cavebar:hover, .cavebar:focus-visible { border-color: #fff3c4; }

/* ---- journal panel ---- */
.panel { margin-top: 18px; background: rgba(22, 15, 34, .94); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.tabs button {
  background: none; border: 0; padding: 11px 4px; cursor: pointer; font-family: var(--display);
  font-weight: 800; font-size: .76rem; color: var(--muted); border-bottom: 2px solid transparent;
}
.tabs button[aria-selected="true"] { color: var(--gold-soft); border-bottom-color: var(--gold); background: rgba(233, 185, 73, .06); }
.tabs button.ping { color: #fff; }
.tabs button.ping::after { content: ' •'; color: var(--gold); }
.pane { padding: 14px; }
.pane h3 { font-family: var(--display); font-size: .95rem; color: var(--gold-soft); margin-bottom: 4px; }
.pane p { color: var(--muted); font-weight: 700; font-size: .86rem; }

.quest { background: var(--ink-3); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.quest .bar { height: 12px; margin-top: 8px; }
.quest .bar > i { background: linear-gradient(180deg, #ffe7a3, var(--gold) 50%, var(--gold-deep)); }
.quest__reward { margin-top: 8px; font-size: .76rem; font-weight: 800; color: var(--gold-soft); }
.quest-done { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.quest-done span { font-size: .7rem; font-weight: 800; color: var(--muted); background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; text-decoration: line-through; text-decoration-color: rgba(233, 185, 73, .6); }

.statline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.stat { background: var(--ink-3); border: 1px solid var(--line); border-radius: 10px; padding: 6px; text-align: center; }
.stat .k { font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); font-weight: 900; }
.stat .v { font-weight: 900; font-size: .95rem; }
.slots { display: grid; gap: 6px; }
.slot { display: flex; align-items: center; gap: 10px; background: var(--ink-3); border: 1px solid var(--line); border-radius: 10px; padding: 7px 9px; }
.slot svg { width: 30px; height: 30px; flex: 0 0 30px; color: var(--rc, #4a4255); padding: 4px; border-radius: 8px; border: 1px solid var(--rc, #4a4255); background: #120c1c; }
.slot .nm { font-weight: 900; font-size: .84rem; color: var(--rc, var(--muted)); }
.slot .st { font-size: .72rem; font-weight: 700; color: var(--muted); }
.r-common { --rc: var(--common); }
.r-uncommon { --rc: var(--uncommon); }
.r-rare { --rc: var(--rare); }
.r-epic { --rc: var(--epic); }
.r-legendary { --rc: var(--legendary); }

.goods { display: grid; gap: 8px; }
.good { display: flex; align-items: center; gap: 10px; background: var(--ink-3); border: 1px solid var(--line); border-radius: 12px; padding: 9px 10px; }
.good__txt { flex: 1; min-width: 0; }
.good__txt b { font-size: .88rem; }
.good__txt small { display: block; color: var(--muted); font-weight: 700; font-size: .74rem; }
.good__rank { color: var(--gold); font-size: .72rem; font-weight: 900; margin-left: 4px; }

.btn {
  border: 1px solid rgba(233, 185, 73, .5); background: linear-gradient(180deg, #3a2958, #1f1533);
  border-radius: 10px; padding: 8px 12px; font-weight: 900; font-size: .8rem; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--gold { background: linear-gradient(180deg, #fff3c4, var(--gold) 50%, #b9832a); color: #2a1c00; border-color: #2a1a05; font-family: var(--display); }
.btn .coin { width: 12px; height: 12px; flex: 0 0 12px; }
.link-btn { background: none; border: 0; color: var(--gold-soft); text-decoration: underline; cursor: pointer; font-weight: 800; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.card {
  aspect-ratio: 3 / 4; border-radius: 12px; display: grid; place-items: center; padding: 6px; position: relative;
  background: radial-gradient(circle at 50% 30%, #3b2a5c, #120c1c 80%);
  border: 2px solid var(--gold-deep); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7);
}
.card img { width: 100%; height: 80%; object-fit: contain; }
.card figcaption { font-size: .66rem; font-weight: 900; text-align: center; color: var(--gold-soft); }
.card.missing { border-color: #3a3346; }
.card.missing::before { content: '?'; font: 800 2rem var(--display); color: #3a3346; }
.card--big { width: min(240px, 60vw); margin: 10px auto 12px; border-color: var(--gold); box-shadow: 0 0 40px rgba(233, 185, 73, .45); animation: flip .7s cubic-bezier(.2, 1.2, .4, 1); }

/* ---- dialogs ---- */
dialog {
  margin: auto; border: 1px solid rgba(233, 185, 73, .6); color: var(--moon); background: #150e20;
  border-radius: 22px; box-shadow: var(--shadow), 0 0 60px rgba(139, 92, 255, .35);
  max-height: 92svh; overflow: auto;
}
dialog::backdrop { background: rgba(6, 3, 10, .78); backdrop-filter: blur(6px); }
.vault { width: min(480px, calc(100vw - 24px)); padding: 0; position: relative; }
.vault__x {
  position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(233, 185, 73, .6); background: rgba(12, 8, 18, .8); color: var(--gold-soft);
  font-weight: 900; cursor: pointer;
}
@media (max-height: 760px) {
  .vault__art { height: 150px; }
  .vault__kitty { width: 130px; }
}
.vault__art { height: 230px; background: url('/realm/art/vault.webp') center 40% / cover no-repeat; display: grid; place-items: end center; }
.vault__kitty { width: 190px; margin-bottom: -26px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .7)); animation: pop .6s cubic-bezier(.2, 1.4, .4, 1); }
.vault__body { padding: 30px 18px 18px; text-align: center; }
.vault__eyebrow, .cardpop__eyebrow { font-size: .7rem; font-weight: 900; letter-spacing: .14em; color: var(--gold); text-transform: uppercase; }
.vault h2, .cardpop h2 { font-family: var(--display); font-size: 1.6rem; color: var(--gold-soft); margin: 2px 0 6px; }
.vault p, .cardpop p { color: var(--muted); font-weight: 700; }
.vault__loot { list-style: none; margin: 12px 0 4px; display: grid; gap: 6px; text-align: left; }
.vault__loot li { background: var(--ink-3); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; font-weight: 800; font-size: .84rem; }
.vault__loot li b { color: var(--legendary); }
.vault__row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.cave--key { text-align: left; }
.cardpop { width: min(360px, calc(100vw - 24px)); padding: 20px 18px; text-align: center; }

/* ---- how to & footer ---- */
.howto { margin-top: 22px; background: rgba(22, 15, 34, .9); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; }
.howto h2 { font-family: var(--display); font-size: 1.05rem; color: var(--gold-soft); margin-bottom: 8px; }
.howto ul { list-style: none; display: grid; gap: 6px; }
.howto li { color: var(--muted); font-weight: 700; font-size: .85rem; padding-left: 16px; position: relative; }
.howto li::before { content: '✦'; position: absolute; left: 0; color: var(--gold); font-size: .7rem; top: 3px; }
.howto b { color: var(--moon); }
.saved { margin-top: 10px; font-size: .78rem; color: var(--muted); font-weight: 700; }
footer { text-align: center; margin-top: 30px; color: var(--muted); font-size: .8rem; font-weight: 700; }
footer .tiny { opacity: .6; margin-top: 4px; font-size: .72rem; }

/* ---- motion ---- */
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes menace { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-1.5deg); } }
@keyframes lunge { 0% { transform: translateX(0); } 45% { transform: translateX(26%) rotate(4deg); } 100% { transform: translateX(0); } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes down { to { transform: translateY(20%) rotate(-12deg); opacity: .3; } }
@keyframes enter { 0% { transform: translateX(40%) scale(.7); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes hitflash { 0% { filter: brightness(2.4) drop-shadow(0 0 0 #fff); transform: translateX(6px); } 100% { filter: none; transform: none; } }
@keyframes die { to { transform: translateY(14%) scale(.4) rotate(14deg); opacity: 0; filter: brightness(3) saturate(0); } }
@keyframes floatup { 0% { transform: translate(-50%, 0) scale(.6); opacity: 0; } 15% { transform: translate(-50%, -10px) scale(1.15); opacity: 1; } 100% { transform: translate(-50%, -70px) scale(1); opacity: 0; } }
@keyframes coinfly { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; } }
@keyframes slash { 0% { transform: rotate(-24deg) scaleX(.1); opacity: 1; } 100% { transform: rotate(-24deg) scaleX(1); opacity: 0; } }
@keyframes toastin { from { transform: translateY(10px); opacity: 0; } }
@keyframes toastout { to { transform: translateY(-6px); opacity: 0; } }
@keyframes banner { 0% { opacity: 0; transform: scale(.6); } 12% { opacity: 1; transform: scale(1.08); } 20% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px); } }
@keyframes hurt { 0%, 100% { box-shadow: 0 0 0 1px rgba(233, 185, 73, .55), var(--shadow); } 40% { box-shadow: 0 0 0 3px #ff3a55, 0 0 40px rgba(255, 58, 85, .6), inset 0 0 60px rgba(255, 0, 40, .45); } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 1px rgba(233, 185, 73, .5); } 50% { box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(233, 185, 73, .8); } }
@keyframes urgent { from { box-shadow: 0 0 0 1px var(--gold); } to { box-shadow: 0 0 0 3px #9ef0c8, 0 0 20px #9ef0c8; } }
@keyframes bump { 50% { transform: scale(1.12); } }
@keyframes petswipe { 50% { transform: translateX(40%) rotate(8deg); } }
@keyframes flip { from { transform: rotateY(90deg) scale(.8); } }
@keyframes windup { from { transform: translateX(0) scale(1); } to { transform: translateX(6%) scale(1.06) rotate(3deg); } }
@keyframes alarm { from { box-shadow: 0 0 0 2px #ff3a55, 0 0 10px rgba(255, 58, 85, .6); } to { box-shadow: 0 0 0 4px #ff8a9a, 0 0 26px rgba(255, 58, 85, .95); } }
@keyframes blink { to { visibility: hidden; } }
@keyframes shieldup { from { transform: scale(.6); opacity: 0; } }
@keyframes recoil { 30% { transform: translateX(-12%) rotate(-6deg); filter: brightness(1.8) saturate(.4) drop-shadow(0 0 12px #ff3a55); } }
@keyframes clang { 40% { transform: translateX(-4px); } 70% { transform: translateX(3px); } }
@keyframes beckon { 0%, 88%, 100% { box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .9), 0 0 28px -4px rgba(233, 185, 73, .55); } 94% { box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .9), 0 0 44px 2px rgba(233, 185, 73, .95); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  .num, .toast, .banner.show { animation: none !important; opacity: 1; }
}

@media (min-width: 720px) {
  .realm { padding-top: 22px; }
  .arena { height: clamp(260px, calc(100vh - 410px), 620px); }
}

/* Laptops and desktops: the game on the left; on the right, the cave as a big card
   that stays in view while you scroll, with the journal under it. */
@media (min-width: 1000px) and (min-height: 560px) {
  .realm {
    max-width: 1000px; display: grid; grid-template-columns: minmax(0, 560px) minmax(320px, 1fr);
    gap: 32px; align-items: start; padding-bottom: 40px;
  }
  .arena { height: clamp(250px, calc(100vh - 330px), 640px); }
  .col-side { padding-top: 92px; }
  .cavebar {
    position: sticky; top: 92px; left: auto; bottom: auto; transform: none; width: 100%; z-index: 5;
    flex-direction: column; gap: 6px; text-align: center; padding: 0 22px 22px; border-radius: 26px;
    background: radial-gradient(120% 80% at 50% 0%, #5a3384, #1f2a58 75%);
  }
  .cavebar img { width: 168px; height: 168px; flex-basis: auto; margin: -84px auto 0; }
  .cavebar__label { font-size: 2rem; }
  .cavebar__sub { font-size: .95rem; margin-top: 6px; }
  .cavebar__arrow { display: flex; justify-content: center; align-items: center; width: 100%; height: 54px; margin-top: 12px; border-radius: 16px; font: 800 1.15rem var(--display); }
  .cavebar__arrow::before { content: 'Enter my cave\00a0\00a0'; }
  .col-side .panel { margin-top: 22px; }
}

@media (max-width: 359px) {
  .top { padding-inline: 52px; }
  .zones { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .zone { font-size: .62rem; padding-inline: 2px; }
  .zone b { font-size: .6rem; hyphens: auto; overflow-wrap: anywhere; }
  .arena { height: clamp(170px, calc(100svh - 415px), 600px); }
}

/* short screens: a slimmer cave bar so it never sits on the controls */
@media (max-height: 640px) {
  .cavebar { min-height: 58px; padding: 7px 14px 7px 8px; }
  .cavebar img { width: 44px; height: 44px; flex-basis: 44px; margin-top: -8px; }
  .cavebar__label { font-size: 1.15rem; }
  .cavebar__sub { display: none; }
  .cavebar__arrow { width: 34px; height: 34px; font-size: 1.15rem; }
  .realm { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
}

/* ---- telegraph & defence ---- */
.warn {
  position: absolute; right: 18%; bottom: 52%; z-index: 7; width: 64px; height: 64px; pointer-events: none;
  display: grid; place-items: center; border-radius: 50%;
  background: conic-gradient(#ff3a55 calc(var(--f, 0) * 360deg), rgba(255, 58, 85, .2) 0);
  box-shadow: 0 0 22px rgba(255, 58, 85, .8);
}
.warn::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #1a0710; }
.warn b { position: relative; font: 900 2.2rem 'Nunito', sans-serif; color: #ff5a6e; text-shadow: 0 0 10px rgba(255, 90, 110, .9); }
.warn.heavy { background: conic-gradient(var(--gold) calc(var(--f, 0) * 360deg), rgba(233, 185, 73, .2) 0); box-shadow: 0 0 26px rgba(233, 185, 73, .9); width: 76px; height: 76px; }
.warn.heavy b { color: var(--gold-soft); }
.warn.show { animation: pop .25s cubic-bezier(.2, 1.4, .4, 1); }
.warn.now { background: conic-gradient(#fff3c4 360deg, #fff3c4 0); box-shadow: 0 0 30px #fff3c4, 0 0 60px rgba(233, 185, 73, .9); }
.warn.now b { color: #2a1c00; font-size: 1.05rem; letter-spacing: .04em; }
.warn.now::before { background: var(--gold); }
.bar--warn.now > i { background: linear-gradient(180deg, #fff3c4, var(--gold) 50%, var(--gold-deep)); }
.bossfight .warn { right: 30%; bottom: 60%; }

.shield {
  position: absolute; left: 4%; bottom: 8%; width: 44%; max-width: 250px; aspect-ratio: 1; z-index: 4; pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle at 60% 45%, rgba(197, 168, 255, .05) 45%, rgba(197, 168, 255, .35) 62%, rgba(246, 217, 138, .75) 70%, transparent 72%);
  filter: drop-shadow(0 0 14px rgba(197, 168, 255, .8));
}
.shield.up { animation: shieldup .18s ease-out; }

.combo {
  position: absolute; left: 10px; top: 25%; z-index: 6; padding: 4px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 900; color: #fff3c4; background: rgba(120, 30, 10, .85);
  border: 1px solid #ffb84a; box-shadow: 0 0 14px rgba(255, 140, 40, .6);
}

.bubble {
  position: absolute; left: 6%; top: 30%; z-index: 9; max-width: 58%; pointer-events: none;
  background: #fffaf0; color: #1a0f24; font-weight: 900; font-size: .8rem; line-height: 1.25;
  padding: 7px 11px; border-radius: 14px; box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .7);
}
.bubble::after {
  content: ''; position: absolute; left: 26px; bottom: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: #fffaf0;
}
.bubble.pop { animation: pop .3s cubic-bezier(.2, 1.4, .4, 1); }
.bossfight .bubble { top: 34%; }

.num.parry { font-family: var(--display); font-size: 1.5rem; color: var(--gold-soft); text-shadow: 0 2px 0 #2a1a05, 0 0 16px rgba(233, 185, 73, .9); }
.num.combo { font-family: var(--display); color: #ffb84a; font-size: 1.15rem; }
.num.lost { font-family: var(--display); color: #ff9aa8; font-size: 1.05rem; }
.kitty.recoil { animation: recoil .35s ease; }
.arena.clang { animation: clang .25s ease; }

.keypop { width: min(380px, calc(100vw - 24px)); padding: 0 18px 18px; text-align: center; }
.keypop.armed .cave, .keypop.armed .btn { pointer-events: none; }
@media (max-height: 520px) { .keypop__kitty { display: none; } }
.keypop__kitty { width: 190px; margin: -10px auto 4px; }
.keypop h2 { font-family: var(--display); font-size: 1.35rem; color: var(--gold-soft); margin: 2px 0 6px; }
.keypop p { color: var(--muted); font-weight: 700; }
.keypop .cave { margin: 14px 0 10px; }

/* ---- boss lair ---- */
.lair {
  position: absolute; right: 4%; top: 52%; z-index: 9;
  width: min(52%, 260px); text-align: center; display: grid; gap: 8px; justify-items: center;
}
.lair__go { font-size: .95rem; padding: 12px 16px; box-shadow: 0 0 0 2px #2a1a05, 0 0 30px rgba(233, 185, 73, .7); white-space: normal; }
.lair__tip { font-size: .76rem; font-weight: 800; color: #fff; text-shadow: 0 1px 3px #000, 0 0 2px #000; }
.vault-door { bottom: auto; top: 28%; left: auto; right: 4%; transform: none; max-width: 56%; white-space: normal; text-align: center; }