/* ═══ HELHEIMRS — Runestone of Quests «سنگ‌نبشته‌ی مأموریت‌ها» ═══ */
/* A chipped, quarried outline: uneven shoulders and a split-off corner, so the
   silhouette reads as broken rock rather than a rounded card. */
.pg-quests {
  --stone-clip: polygon(5% 11%, 13% 3.5%, 29% 6%, 46% 0, 62% 4.5%, 79% 1.5%, 93% 8%, 100% 22%,
                        98.6% 46%, 100% 69%, 98% 100%, 2.4% 100%, 0 74%, 1.4% 51%, 0 26%);
}

/* ── page head ── */
.pg-quests .q-head { padding-block: var(--s-8) var(--s-5); position: relative; }
.pg-quests .q-head h1 { margin-bottom: var(--s-2); }
.pg-quests .q-head .lede { color: var(--fg-muted); font-size: var(--fs-lg); max-width: 60ch; }
/* .rune-band is direction:ltr, so `start` would resolve LEFT — opposite the RTL heading */
.pg-quests .q-head .rune-band { text-align: right; margin-bottom: var(--s-3); font-size: var(--rune-sm); }
.pg-quests .q-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); }
.pg-quests .q-bar .tab { padding: var(--s-2) var(--s-4); display: inline-flex; align-items: center; gap: var(--s-half); }
/* the view switcher is navigation, so it carries aria-current, not aria-selected —
   re-state the shared underline-tab treatment for that attribute */
.pg-quests .q-bar .tab[aria-current="page"] { color: var(--accent-text); }
.pg-quests .q-bar .tab[aria-current="page"]::after { content: ""; position: absolute; inset-inline: var(--s-3); bottom: -1px; height: 2px; background: var(--emerald); box-shadow: var(--glow-soft); }
.pg-quests .q-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-bottom: var(--s-6); }
.pg-quests .q-filters .sep { width: 1px; height: 22px; background: var(--line-strong); margin-inline: var(--s-2); }
.pg-quests .q-count { color: var(--fg-muted); font-size: var(--fs-sm); margin-inline-start: auto; }

/* ── the misty field: ground haze behind the stones, a mist band drifting in front ── */
.pg-quests .qfield { position: relative; padding: var(--s-6) 0 var(--s-9); isolation: isolate; overflow-x: clip; }
/* the ground the stones are planted in */
.pg-quests .qfield::before { content: ""; position: absolute; inset: auto 0 0 0; height: 340px; z-index: 0; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(var(--fog-color), .07) 45%, rgba(var(--fog-color), .16) 78%, rgba(var(--fog-color), .22)); }
/* two slow banks of fog pooling between the stones */
.pg-quests .qfield::after { content: ""; position: absolute; inset-inline: 0; bottom: 24px; height: 200px; z-index: 0; pointer-events: none; background: radial-gradient(60% 70% at 24% 62%, rgba(var(--fog-color), .17), transparent 70%), radial-gradient(52% 64% at 72% 44%, rgba(var(--fog-color), .13), transparent 72%); }
/* mist crossing IN FRONT of the stone feet: the depth cue that makes them stand in a field */
.pg-quests .qfield__mist { position: absolute; inset-inline: 0; bottom: 0; height: 128px; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(var(--fog-color), .16) 55%, rgba(var(--fog-color), .3)); }
.pg-quests .stones { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-8) var(--s-6); align-items: end; perspective: 1400px; }

/* ── runestone ── */
.pg-quests .stone { --rot: -1.6deg; --lift: 0px; position: relative; transform: rotate(var(--rot)) translateY(var(--lift)); transition: transform var(--t-slow) var(--ease-stone); }
.pg-quests .stone:nth-child(3n+1) { --rot: -2.1deg; --lift: 14px; }
.pg-quests .stone:nth-child(3n+2) { --rot: 1.4deg; --lift: -6px; }
.pg-quests .stone:nth-child(3n+3) { --rot: -0.8deg; --lift: 8px; }
.pg-quests .stone:nth-child(5n) { --rot: 2.3deg; }
.pg-quests .stone.revealed { transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-stone); }
.pg-quests .stone:hover, .pg-quests .stone:focus-within { transform: rotate(0deg) translateY(-6px); z-index: 2; }
/* fog pooling at the foot of each stone — kept inside the column: a negative
   inline inset here made the pseudo 444px wide in a 358px track and pushed the
   whole mobile document sideways. */
.pg-quests .stone::after { content: ""; position: absolute; inset-inline: 0; bottom: -30px; height: 76px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 40%, rgba(var(--fog-color), .3), transparent 72%); }
/* the lit rim: light rakes the top-right shoulder, dies along the shaded flank */
.pg-quests .stone__body { position: relative; clip-path: var(--stone-clip); padding: 1px; background: linear-gradient(196deg, var(--line-glow), var(--line-strong) 26%, var(--line) 62%, rgba(47,211,154,.22)); transition: background var(--t-slow); }
.pg-quests .stone:hover .stone__body { background: linear-gradient(196deg, var(--emerald), var(--line-glow) 32%, var(--line-strong) 68%, var(--emerald)); }
/* Carved basalt: one light direction (upper right), three cut planes, and the
   vertical columnar jointing basalt actually fractures into. */
.pg-quests .stone__face {
  position: relative; clip-path: var(--stone-clip); padding: var(--s-7) var(--s-5) var(--s-5);
  min-height: 470px; display: flex; flex-direction: column; gap: var(--s-3);
  background:
    linear-gradient(196deg, rgba(255,255,255,.055) 0 13%, transparent 13.4%),
    repeating-linear-gradient(93deg, rgba(0,0,0,.15) 0 1px, rgba(255,255,255,.012) 1px 2px, transparent 2px 37px),
    var(--stone-grad);
  box-shadow: var(--shadow-stone);
}
.pg-quests .stone__face::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.02 .06' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.pg-quests .stone__face::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; pointer-events: none; background: radial-gradient(ellipse at 50% 110%, rgba(47,211,154,.22), transparent 65%); opacity: 0; transition: opacity var(--t-slow); }
.pg-quests .stone:hover .stone__face::after, .pg-quests .stone.is-registered .stone__face::after { opacity: 1; }
.pg-quests .stone__face > * { position: relative; z-index: 1; }
/* the band is cut into the stone's shoulder: sunk, not printed, and it catches
   the emerald only when the stone turns toward you */
.pg-quests .stone .rune-band { font-size: var(--rune-sm); letter-spacing: .34em; color: var(--ornament); text-shadow: 0 1px 0 rgba(255,255,255,.06); transition: color var(--t-slow), text-shadow var(--t-slow); margin: 0; }
.pg-quests .stone:hover .rune-band { color: var(--accent-text); text-shadow: 0 0 10px rgba(47,211,154,.7); }
.pg-quests .stone__kind { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--fg-muted); }
/* engraved, not printed: a dark rim where the chisel enters, a lit lip where it leaves */
.pg-quests .stone__title { font-size: var(--fs-xl); margin: 0; line-height: 1.3; color: #C4C8C2; text-shadow: 0 -1px 0 rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.1), 0 2px 3px rgba(0,0,0,.55); transition: color var(--t-slow), text-shadow var(--t-slow); }
:root[data-theme="light"] .pg-quests .stone__title { color: #3C423E; text-shadow: 0 -1px 0 rgba(20,24,22,.3), 0 1px 0 rgba(255,255,255,.95); }
.pg-quests .stone:hover .stone__title { color: var(--fg-strong); text-shadow: 0 -1px 0 rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.1), 0 0 16px rgba(47,211,154,.45); }
.pg-quests .stone__title a { color: inherit; }
.pg-quests .stone__title a:hover { text-decoration: none; color: var(--accent-text); }
.pg-quests .stone__dm { display: flex; align-items: center; gap: var(--s-2); color: var(--fg-muted); font-size: var(--fs-sm); }
.pg-quests .stone__dm .avatar { width: 30px; height: 30px; font-size: var(--fs-2xs); }
.pg-quests .stone__facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-3); font-size: var(--fs-sm); color: var(--fg); margin-top: var(--s-1); }
.pg-quests .stone__facts div { display: flex; align-items: center; gap: var(--s-half); }
.pg-quests .stone__facts .ico { width: 15px; height: 15px; color: var(--fg-faint); flex: none; }
.pg-quests .stone__tones { display: flex; flex-wrap: wrap; gap: var(--s-half); align-items: center; }
.pg-quests .stone__seats { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--line); }
.pg-quests .stone__seats small { color: var(--fg-muted); white-space: nowrap; }
.pg-quests .stone__cta { display: flex; align-items: center; gap: var(--s-2); }
.pg-quests .stone__cta .btn { flex: 1; }
.pg-quests .engraved-tag { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4); color: var(--accent-text); border: 1px solid var(--line-glow); clip-path: var(--clip-facet); --facet: 8px; background: rgba(47,211,154,.08); font-weight: 700; font-size: var(--fs-sm); flex: 1; box-shadow: var(--glow-inset); }
.pg-quests .engraved-tag .rune { font-size: var(--rune-md); opacity: 1; }
.pg-quests .engraved-tag--dim { color: var(--fg-muted); border-color: var(--line-strong); background: transparent; box-shadow: none; }
.pg-quests .engraved-tag--dim .rune { color: var(--ornament); }
.pg-quests .stone--full .stone__face { filter: saturate(.7); }
@media (max-width: 700px) { .pg-quests .stones { grid-template-columns: 1fr; gap: var(--s-6); } .pg-quests .stone { --rot: 0deg !important; --lift: 0px !important; } .pg-quests .stone__face { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .pg-quests .stone { transition: none; --rot: 0deg; --lift: 0px; } }

/* ── list view ── */
.pg-quests .qlist { display: grid; gap: var(--s-2); }
.pg-quests .qrow { display: grid; grid-template-columns: minmax(0, 2fr) 1fr 1fr 1fr auto auto; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); background: var(--bg-elev); border: 1px solid var(--line); clip-path: var(--clip-facet); --facet: 10px; transition: border-color var(--t-ui), background var(--t-ui); }
.pg-quests .qrow:hover { border-color: var(--line-glow); background: var(--bg-elev-2); }
.pg-quests .qrow__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); color: var(--fg-strong); margin: 0; }
.pg-quests .qrow__title a { color: inherit; }
.pg-quests .qrow__meta { color: var(--fg-muted); font-size: var(--fs-xs); display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: 2px; }
.pg-quests .qrow__cell { font-size: var(--fs-sm); display: grid; gap: 2px; }
.pg-quests .qrow__cell small { color: var(--fg-faint); font-size: var(--fs-xs); }
@media (max-width: 900px) { .pg-quests .qrow { grid-template-columns: 1fr 1fr; } .pg-quests .qrow > :first-child { grid-column: 1 / -1; } .pg-quests .qrow > :last-child { grid-column: 1 / -1; } }

/* ── calendar view ── */
.pg-quests .cal { background: var(--bg-elev); border: 1px solid var(--line); clip-path: var(--clip-facet); padding: var(--s-5); }
.pg-quests .cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.pg-quests .cal__head h2 { margin: 0; font-size: var(--fs-2xl); }
.pg-quests .cal__head .num { font-family: var(--font-body); color: var(--fg-muted); font-weight: 400; font-size: var(--fs-lg); }
.pg-quests .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.pg-quests .cal__wd { text-align: center; font-size: var(--fs-xs); color: var(--fg-muted); padding: var(--s-2) 0; font-weight: 700; }
.pg-quests .cal__wd .short { display: none; }
.pg-quests .cal__day { position: relative; min-height: 86px; padding: 6px 8px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-1); text-align: start; display: flex; flex-direction: column; gap: 4px; transition: border-color var(--t-ui), box-shadow var(--t-ui); cursor: pointer; }
.pg-quests .cal__day:hover { border-color: var(--line-strong); }
.pg-quests .cal__day.is-empty { background: transparent; border-color: transparent; cursor: default; }
.pg-quests .cal__day.is-today .cal__n { color: var(--accent-text); }
.pg-quests .cal__day.is-today::before { content: ""; position: absolute; top: 6px; inset-inline-end: 8px; width: 6px; height: 6px; clip-path: var(--clip-hex); background: var(--emerald); box-shadow: var(--glow); }
.pg-quests .cal__day.is-sel { border-color: var(--accent); box-shadow: var(--glow-inset); }
.pg-quests .cal__day.is-past { opacity: .55; }
.pg-quests .cal__n { font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--fs-sm); color: var(--fg); }
.pg-quests .cal__ev { display: flex; align-items: center; gap: 5px; font-size: var(--fs-2xs); line-height: 1.5; color: var(--fg); overflow: hidden; }
.pg-quests .cal__ev i { flex: none; width: 6px; height: 6px; clip-path: var(--clip-hex); background: var(--emerald); box-shadow: 0 0 6px var(--emerald); }
.pg-quests .cal__ev span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-quests .cal__ev.is-recur i { background: var(--jade); box-shadow: none; }
.pg-quests .cal__sel { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.pg-quests .cal__sel :is(h2,h3) { font-size: var(--fs-lg); margin-bottom: var(--s-3); }
.pg-quests .cal__legend { display: flex; gap: var(--s-4); font-size: var(--fs-xs); color: var(--fg-muted); margin-top: var(--s-3); }
.pg-quests .cal__legend i { display: inline-block; width: 8px; height: 8px; clip-path: var(--clip-hex); background: var(--emerald); margin-inline-end: 4px; }
.pg-quests .cal__legend i.recur { background: var(--jade); }
@media (max-width: 720px) { .pg-quests .cal { padding: var(--s-3); } .pg-quests .cal__wd .long { display: none; } .pg-quests .cal__wd .short { display: inline; } .pg-quests .cal__day { min-height: 56px; padding: 4px 5px; } .pg-quests .cal__ev span { display: none; } .pg-quests .cal__ev i { width: 8px; height: 8px; } }

/* ── detail page ── */
.pg-quests .qd-hero { position: relative; padding: var(--s-7) 0 var(--s-6); border-bottom: 1px solid var(--line); overflow: hidden; }
.pg-quests .qd-hero .rune-band { text-align: right; margin-bottom: var(--s-3); color: var(--accent-text); opacity: .6; text-shadow: 0 0 12px rgba(47,211,154,.45); }
.pg-quests .qd-hero__meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.pg-quests .qd-hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-top: var(--s-5); }
.pg-quests .qd-hero__cta .count { color: var(--fg-muted); font-size: var(--fs-sm); }
.pg-quests .qd-hero .lede { margin-top: var(--s-3); max-width: 60ch; }
.pg-quests .qd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-7); padding-block: var(--s-7); align-items: start; }
.pg-quests .qd-side { position: sticky; top: 90px; display: grid; gap: var(--s-4); }
.pg-quests .qd-main { display: grid; gap: var(--s-7); min-width: 0; }
.pg-quests .qd-main h2 { font-size: var(--fs-2xl); }
@media (max-width: 960px) { .pg-quests .qd-grid { grid-template-columns: 1fr; } .pg-quests .qd-side { position: static; } }

.pg-quests .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); clip-path: var(--clip-facet); }
.pg-quests .fact { padding: var(--s-3) var(--s-4); background: var(--bg-elev); display: grid; gap: 2px; }
.pg-quests .fact small { color: var(--fg-muted); font-size: var(--fs-xs); }
.pg-quests .fact b { color: var(--fg-strong); font-size: var(--fs-md); display: flex; align-items: center; gap: var(--s-half); }

.pg-quests .dm-card { display: grid; gap: var(--s-3); }
.pg-quests .dm-card__top { display: flex; align-items: center; gap: var(--s-3); }
.pg-quests .dm-card__top b { display: block; color: var(--fg-strong); font-family: var(--font-display); font-size: var(--fs-lg); }
.pg-quests .dm-card__top small { color: var(--fg-muted); }
.pg-quests .dm-card p { font-size: var(--fs-sm); color: var(--fg); margin: 0; }
.pg-quests .dm-card__stats { display: flex; gap: var(--s-4); font-size: var(--fs-xs); color: var(--fg-muted); }
.pg-quests .dm-card__stats b { color: var(--accent-text); font-family: var(--font-display); font-size: var(--fs-md); }

.pg-quests .qmap { position: relative; aspect-ratio: 900 / 420; clip-path: var(--clip-facet); border: 1px solid var(--line-strong); background: var(--bg-elev); overflow: hidden; }
.pg-quests .qmap svg.hx-cover { position: absolute; inset: 0; width: 100%; height: 100%; }
.pg-quests .qmap__pin { position: absolute; transform: translate(-50%, -100%); display: grid; justify-items: center; gap: 2px; z-index: 1; }
.pg-quests .qmap__pin i { width: 10px; height: 10px; clip-path: var(--clip-hex); background: var(--emerald); box-shadow: var(--glow); }
.pg-quests .qmap__pin span { font-size: var(--fs-xs); font-weight: 700; color: var(--frost); background: rgba(10,10,11,.78); padding: 2px 8px; border: 1px solid var(--line-glow); white-space: nowrap; }
.pg-quests .qmap__title { position: absolute; top: var(--s-3); inset-inline-start: var(--s-4); font-family: var(--font-display); font-weight: 800; color: var(--frost); z-index: 1; padding: 2px 10px; background: rgba(10,10,11,.72); clip-path: var(--clip-facet); --facet: 6px; }

.pg-quests .tl { list-style: none; padding: 0; margin: 0; position: relative; display: grid; gap: var(--s-4); padding-inline-start: 28px; }
.pg-quests .tl::before { content: ""; position: absolute; top: 8px; bottom: 8px; inset-inline-start: 7px; width: 2px; background: linear-gradient(180deg, var(--emerald) var(--done, 0%), var(--line-strong) var(--done, 0%)); }
.pg-quests .tl li { position: relative; }
.pg-quests .tl li::before { content: ""; position: absolute; top: 6px; inset-inline-start: -28px; width: 16px; height: 16px; clip-path: var(--clip-hex); background: var(--bg-elev-2); border: 1px solid var(--line-strong); }
.pg-quests .tl li.is-done::before { background: var(--emerald); box-shadow: var(--glow); }
.pg-quests .tl li.is-next::before { background: var(--bg); box-shadow: inset 0 0 0 2px var(--emerald), var(--glow-strong); animation: breathe 2.2s ease-in-out infinite; }
.pg-quests .tl__t { display: flex; align-items: baseline; gap: var(--s-2); }
.pg-quests .tl__t b { color: var(--fg-strong); }
.pg-quests .tl__t small { color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.pg-quests .tl li.is-next .tl__t b { color: var(--accent-text); }
.pg-quests .tl p { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--fg-muted); }

.pg-quests .roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s-3); }
.pg-quests .roster__p { display: grid; justify-items: center; gap: var(--s-half); padding: var(--s-3); background: var(--bg-elev); border: 1px solid var(--line); clip-path: var(--clip-facet); --facet: 8px; font-size: var(--fs-sm); text-align: center; }
.pg-quests .roster__p .shield { width: 44px; height: 52px; font-size: 14px; }
.pg-quests .roster__p.is-free { color: var(--fg-muted); border-style: dashed; }
.pg-quests .rules { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.pg-quests .rules li { display: flex; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--bg-elev); border-inline-start: 2px solid var(--jade); font-size: var(--fs-sm); }
.pg-quests .rules li .rune { font-size: var(--rune-md); flex: none; }
.pg-quests .wait { display: grid; gap: var(--s-3); }
.pg-quests .wait :is(h2,h3) { margin: 0; }
.pg-quests .wait p { margin: 0; font-size: var(--fs-sm); }
.pg-quests .avatar--md { width: 64px; height: 64px; font-size: var(--fs-lg); }

/* ── registration: the stone turns toward you ── */
.reg { perspective: 1400px; }
.reg__stone { position: relative; transform-origin: 50% 60%; transform: rotateY(-72deg) translateZ(-40px); opacity: .4; transition: transform var(--t-slow) var(--ease-heavy), opacity var(--t-slow); }
.reg__stone.is-facing { transform: none; opacity: 1; }
.reg__stone.no-motion { transform: none; opacity: 1; transition: none; }
.reg__body { clip-path: var(--stone-clip, polygon(7% 13%, 21% 4%, 47% 0, 73% 3%, 91% 9%, 100% 21%, 98.5% 100%, 1.5% 100%, 0 25%)); padding: 1px; background: linear-gradient(180deg, var(--emerald), var(--line-glow) 30%, var(--line) 70%, rgba(47,211,154,.3)); }
.reg__face { clip-path: var(--stone-clip, polygon(7% 13%, 21% 4%, 47% 0, 73% 3%, 91% 9%, 100% 21%, 98.5% 100%, 1.5% 100%, 0 25%)); background: var(--stone-grad); padding: var(--s-8) var(--s-6) var(--s-6); position: relative; min-height: 420px; }
.reg__face::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.02 .06' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.reg__face > * { position: relative; }
.reg__head { text-align: center; margin-bottom: var(--s-5); }
.reg__head .rune-band { font-size: var(--rune-sm); }
.reg__head :is(h2,h3) { margin: var(--s-2) 0 0; font-size: var(--fs-2xl); }
.reg__head p { margin: 4px auto 0; color: var(--fg-muted); font-size: var(--fs-sm); }
.reg__form { display: grid; gap: var(--s-4); opacity: 0; transform: translateY(8px); transition: opacity var(--t-slow) var(--ease-out) 320ms, transform var(--t-slow) var(--ease-out) 320ms; }
.is-facing .reg__form, .no-motion .reg__form { opacity: 1; transform: none; }
.reg__form .field { transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out); }
.reg__form .two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 600px) { .reg__form .two { grid-template-columns: 1fr; } }
.reg__radios { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.reg__radios label { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 var(--s-4); border: 1px solid var(--line-strong); background: var(--bg); clip-path: var(--clip-facet); --facet: 7px; cursor: pointer; font-size: var(--fs-sm); transition: border-color var(--t-ui), color var(--t-ui); }
.reg__radios label:has(input:checked) { border-color: var(--accent); color: var(--accent-text); box-shadow: var(--glow-inset); }
.reg__radios input { appearance: none; width: 10px; height: 10px; clip-path: var(--clip-hex); background: var(--fg-faint); }
.reg__radios input:checked { background: var(--emerald); box-shadow: 0 0 6px var(--emerald); }
.reg__actions { display: flex; gap: var(--s-3); justify-content: flex-end; flex-wrap: wrap; margin-top: var(--s-2); }

/* engraving */
.reg__engrave { display: grid; justify-items: center; gap: var(--s-5); text-align: center; min-height: 300px; align-content: center; }
.reg__engrave .lead { color: var(--fg-muted); margin: 0; }
.engrave { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: .02em; font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.3; color: var(--fg-strong); min-height: 1.4em; direction: rtl; }
.engrave .ch { display: inline-block; opacity: 0; transform: scale(1.6) translateY(-6px); color: var(--emerald); text-shadow: 0 0 22px var(--emerald), 0 0 44px rgba(47,211,154,.7); }
.engrave .ch.is-in { animation: chIn .5s var(--ease-heavy) forwards; }
.engrave .ch.is-set { opacity: 1; transform: none; color: var(--fg-strong); text-shadow: 0 1px 0 rgba(255,255,255,.06), 0 -1px 0 rgba(0,0,0,.9), 0 0 0 transparent; transition: color .6s, text-shadow .6s; }
.engrave .ch.is-space { width: .35em; }
@keyframes chIn { 0% { opacity: 0; transform: scale(1.6) translateY(-6px); } 40% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: none; } }
.spark { position: absolute; width: 4px; height: 4px; clip-path: var(--clip-hex); background: var(--emerald); box-shadow: 0 0 8px var(--emerald); pointer-events: none; animation: spark .65s var(--ease-out) forwards; }
@keyframes spark { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); } }
.reg__done { display: grid; justify-items: center; gap: var(--s-2); opacity: 0; transition: opacity var(--t-slow); }
.reg__done.is-on { opacity: 1; }
.reg__done b { color: var(--accent-text); font-size: var(--fs-lg); }
.reg__raven { position: absolute; bottom: 24px; inset-inline-end: 30px; width: 110px; opacity: 0; pointer-events: none; }
.reg__raven.is-off { animation: ravenOff 1.5s var(--ease-heavy) forwards; }
@keyframes ravenOff { 0% { opacity: 0; transform: translate(0, 20px) scale(.8); } 15% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(-60vw, -50vh) scale(.5) rotate(-12deg); } }
@media (prefers-reduced-motion: reduce) { .reg__stone { transform: none; opacity: 1; transition: none; } .reg__form { opacity: 1; transform: none; transition: none; } .engrave .ch { opacity: 1; transform: none; } .reg__raven.is-off { animation: fade .4s reverse both; } }