/* ═══ HELHEIMRS — fx layer (portal, mist, lantern secrets, ravens, dice, guide, eggs, tools) ═══ */
#app { position: relative; isolation: isolate; }
/* ── realm skies ──
   A painting behind each realm's front page, graded into the night: dark and
   cold on the reading side (inline-start, where the title sits in RTL), the
   picture showing through on the far side, and dissolving downward into the
   ground so the page never ends at a hard edge. It sits under everything
   (z-index -1 inside #app's isolation) and never moves. */
#app[data-sky]::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; z-index: -1; pointer-events: none;
  height: clamp(420px, 78vh, 760px);
  background-image:
    linear-gradient(to left, rgba(10,10,11,.9) 0%, rgba(10,10,11,.66) 38%, rgba(10,14,13,.3) 72%, rgba(10,14,13,.2) 100%),
    linear-gradient(rgba(10,12,12,.32), rgba(10,12,12,.32)),
    radial-gradient(90% 70% at 20% 30%, rgba(47,211,154,.09), transparent 70%),
    var(--sky);
  background-size: cover; background-position: center, center, center, 30% 40%; background-repeat: no-repeat;
  /* the same cold grade as the gate's realm, so a warm painting cannot pull the page brown */
  filter: saturate(.28) brightness(.9) contrast(1.04);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
}
#app[data-sky="hall"] { --sky: url(../assets/art/longhouse.jpg); }
#app[data-sky="quests"] { --sky: url(../assets/art/map.jpg); }
#app[data-sky="fate"] { --sky: url(../assets/art/tree.jpg); }
#app[data-sky="niflheim"] { --sky: url(../assets/art/mist.jpg); }
/* the phone reads top-down, not side-by-side: grade from the top instead */
@media (max-width: 760px) {
  #app[data-sky]::before {
    height: clamp(360px, 62vh, 560px);
    background-image: linear-gradient(to bottom, rgba(10,10,11,.55) 0%, rgba(10,10,11,.78) 55%, rgba(10,10,11,.92) 100%), var(--sky);
    background-position: center, 40% 30%;
  }
}
/* Frost: the same sky, washed pale so dark type still reads on it */
:root[data-theme="light"] #app[data-sky]::before {
  background-image: linear-gradient(to left, rgba(230,232,226,.94) 0%, rgba(230,232,226,.78) 40%, rgba(230,232,226,.45) 75%, rgba(230,232,226,.3) 100%), var(--sky);
  background-position: center, 30% 40%; filter: saturate(.35);
}
@media (max-width: 760px) {
  :root[data-theme="light"] #app[data-sky]::before { background-image: linear-gradient(to bottom, rgba(230,232,226,.7), rgba(230,232,226,.94)), var(--sky); background-position: center, 40% 30%; }
}

/* ── Portal transition: center the frame & rune ── */
.portal-x__frame { inset: 0; margin: auto; will-change: transform; }
.portal-x__rune { inset: 0; display: grid; place-items: center; }
.portal-x.is-open .portal-x__frame::after { background: transparent; }

/* ── Mist of Niflheim ── */
[data-mist] { position: relative; }
.mist-veil { position: absolute; inset: -8% -3%; z-index: 6; pointer-events: none; overflow: hidden; }
.mist-veil i { position: absolute; top: 0; bottom: 0; width: 62%; filter: blur(16px); will-change: transform, opacity; transition: transform 1.7s var(--ease-out), opacity 1.5s var(--ease-out);
  background: radial-gradient(ellipse at 40% 50%, rgba(var(--fog-color), .82), transparent 64%), radial-gradient(ellipse at 72% 18%, rgba(var(--fog-color), .55), transparent 58%), radial-gradient(ellipse at 22% 84%, rgba(var(--fog-color), .6), transparent 60%); }
.mist-veil i.l { left: -6%; }
.mist-veil i.r { right: -6%; }
.mist-veil.is-parted i.l { transform: translateX(-75%); opacity: 0; }
.mist-veil.is-parted i.r { transform: translateX(75%); opacity: 0; }
:root[data-theme="light"] .mist-veil i { mix-blend-mode: multiply; }

/* ── Ravens: message cards ── */
.raven-msg { display: grid; gap: var(--s-2); }
.raven-msg .toast { position: relative; padding-inline-end: 40px; animation: hx-drop .55s var(--ease-out) both; }
.toast__close { position: absolute; top: 6px; inset-inline-end: 4px; width: 28px; height: 28px; border: 0; background: none; color: var(--fg-muted); cursor: pointer; font-size: 14px; }
.toast__close:hover { color: var(--fg-strong); }
@keyframes hx-drop { from { opacity: 0; transform: translateY(-28px) scale(.92); } to { opacity: 1; transform: none; } }
.raven > svg { transition: transform .25s; }

/* ── Dice tray extras ── */
.tray__result { opacity: 0; transition: opacity var(--t-ui); }
.tray__result.is-on { opacity: 1; }
.tray__result .total.is-pop { animation: hx-pop .5s var(--ease-out) both; }
@keyframes hx-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: none; } }
.tray__slab .hint { position: absolute; inset: 0; display: grid; place-items: center; color: #9EA39C; font-size: var(--fs-sm); pointer-events: none; transition: opacity var(--t-ui); }
.tray__slab .hint.is-off { opacity: 0; }
.tray__log div { display: flex; gap: 6px; align-items: baseline; }
.tray__log .expr { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; direction: ltr; unicode-bidi: isolate; }
.is-shaking { animation: hx-shake .5s linear both; }
@keyframes hx-shake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(3px, -2px); } 30%, 70% { transform: translate(-4px, 2px); } 40%, 60% { transform: translate(4px, -1px); } 50% { transform: translate(-3px, 3px); } }
.crit-fx__text { position: relative; z-index: 2; }

/* ── Gatekeeper guide ── */
.guide .speech p { margin: 0; line-height: 1.7; color: var(--fg-strong); }
.guide .speech .row { gap: 6px; }

/* ── Ragnarök extras ── */
.ragnarok { cursor: pointer; pointer-events: auto; }
.ragnarok.is-out { animation: fade .9s ease-in reverse forwards; }
.ragnarok__sub { position: absolute; top: calc(18% + 7rem); left: 0; right: 0; text-align: center; color: var(--emerald-soft); font-size: var(--fs-md); opacity: 0; animation: fade 1s 1.4s both; }

/* ── Mimic chest ── */
.mimic { position: relative; display: inline-block; width: 52px; height: 46px; padding: 0; border: 0; background: none; cursor: pointer; vertical-align: middle; }
.mimic svg { width: 52px; height: 46px; overflow: visible; }
.mimic__lid { transform-origin: 4px 20px; transition: transform .25s var(--ease-stone); }
.mimic:hover .mimic__lid { transform: rotate(-8deg); }
.mimic__teeth, .mimic__eyes, .mimic__tongue { opacity: 0; transition: opacity .15s; }
.mimic.is-biting { animation: hx-shake .6s .25s linear; }
.mimic.is-biting .mimic__lid { animation: hx-mimic-lid .9s var(--ease-heavy) both; }
.mimic.is-biting .mimic__teeth, .mimic.is-biting .mimic__eyes, .mimic.is-biting .mimic__tongue { opacity: 1; }
@keyframes hx-mimic-lid { 0% { transform: rotate(0); } 30% { transform: rotate(-70deg); } 45% { transform: rotate(-62deg); } 60% { transform: rotate(-4deg); } 72% { transform: rotate(-40deg); } 85% { transform: rotate(0); } 100% { transform: rotate(0); } }
.mimic__bubble { position: absolute; top: -22px; inset-inline-start: 50%; transform: translateX(50%) scale(0); background: var(--ember); color: #fff; font-size: var(--fs-2xs); font-weight: 800; padding: 2px 8px; clip-path: var(--clip-facet); --facet: 5px; transition: transform .25s var(--ease-out); white-space: nowrap; }
.mimic.is-biting .mimic__bubble { transform: translateX(50%) scale(1); }

/* ── Tools: name generator ── */
.tool { display: grid; gap: var(--s-4); }
.tool__bar { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: space-between; }
.tool__group { display: flex; gap: var(--s-half); flex-wrap: wrap; align-items: center; }
.tool__group > span { font-size: var(--fs-xs); color: var(--fg-muted); margin-inline-end: 4px; }
.namegen__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-2); }
.namegen__list li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) var(--s-3); background: var(--bg-elev); border: 1px solid var(--line); clip-path: var(--clip-facet); --facet: 8px; }
.namegen__list li b { font-family: var(--font-display); font-weight: 700; color: var(--fg-strong); }
.namegen__list li { animation: hx-drop .4s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms); }
.npc-card { display: grid; gap: var(--s-2); padding: var(--s-5); background: var(--stone-grad); border: 1px solid var(--line-glow); --facet: 14px; clip-path: var(--clip-facet); box-shadow: var(--shadow-stone), var(--glow-inset-soft); animation: rise .5s var(--ease-out) both; }
.npc-card :is(h3,h4) { margin: 0; font-size: var(--fs-xl); }
.npc-card .role { color: var(--accent-text); font-size: var(--fs-sm); }
.npc-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px var(--s-3); font-size: var(--fs-sm); }
.npc-card dt { color: var(--fg-muted); }
.npc-card dd { margin: 0; color: var(--fg); }

/* ── Tools: initiative tracker ── */
.init__add { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: var(--s-2); align-items: end; }
.init__add .input { min-height: 40px; }
.init__add .input[type="number"] { direction: ltr; text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .init__add { grid-template-columns: 1fr 1fr; } .init__add .btn { grid-column: 1 / -1; } }
.init__bar { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; justify-content: space-between; padding: var(--s-2) 0; border-block: 1px solid var(--line); }
.init__bar .round { font-family: var(--font-display); font-weight: 800; color: var(--fg-strong); }
.init__bar .round b { color: var(--emerald); text-shadow: 0 0 10px rgba(47,211,154,.5); }
:root[data-theme="light"] .init__bar .round b { color: var(--jade); text-shadow: none; }
.init__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.init__row { display: grid; grid-template-columns: 48px 1.6fr auto auto 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-2) var(--s-3); background: var(--bg-elev); border: 1px solid var(--line); border-inline-start: 3px solid transparent; clip-path: var(--clip-facet); --facet: 8px; transition: border-color var(--t-ui), box-shadow var(--t-ui), background var(--t-ui); }
.init__row.is-active { border-color: var(--line-glow); border-inline-start-color: var(--emerald); background: rgba(47,211,154,.07); box-shadow: var(--glow-inset); }
.init__row.is-down { opacity: .85; }
.init__row.is-down .init__init { opacity: .5; text-decoration: line-through; }
.init__row.is-monster .init__name::after { content: "هیولا"; font-size: var(--fs-2xs); color: var(--fg-muted); margin-inline-start: 6px; border: 1px solid var(--line); padding: 0 5px; }
.init__init { display: grid; place-items: center; width: 44px; height: 40px; clip-path: var(--clip-hex); background: var(--bg-elev-2); font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); color: var(--fg-strong); }
.init__row.is-active .init__init { background: var(--emerald-grad); color: var(--accent-fg); }
.init__name { font-weight: 700; color: var(--fg-strong); display: flex; align-items: center; flex-wrap: wrap; }
.init__hp { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.init__hp b { min-width: 2.2em; text-align: center; color: var(--fg-strong); }
.init__hp .btn { width: 28px; min-height: 28px; padding: 0; }
.init__hp.is-low b { color: var(--danger); }
.init__ac { font-size: var(--fs-xs); color: var(--fg-muted); white-space: nowrap; }
.init__conds { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.init__conds .chip { min-height: 24px; padding: 0 8px; }
.init__conds .select { min-height: 26px; width: auto; padding: 0 8px 0 28px; font-size: var(--fs-xs); background-position: left 8px center; }
.init__del { width: 28px; min-height: 28px; padding: 0; color: var(--fg-muted); }
@media (max-width: 760px) { .init__row { grid-template-columns: 44px 1fr auto; } .init__conds { grid-column: 1 / -1; } .init__ac { display: none; } }