:root {
  color-scheme: dark;
  /* palette:start — the only colours the game uses (docs/ui-guide.md). Name = family + OKLab lightness 0-100;
     values are R G B channels, used as rgb(var(--gold-78)) or rgb(var(--gold-78) / .25). */
  --stone-0:0 0 0; --stone-15:11 11 9; --stone-17:16 15 12; --stone-20:23 21 15; --stone-26:42 36 24; --stone-88:224 216 199; --stone-100:255 255 255;
  --bone-32:59 48 32; --bone-36:74 59 36; --bone-40:88 69 40; --bone-55:125 112 88; --bone-62:143 133 110; --bone-69:163 155 134; --bone-73:183 166 127; --bone-77:198 177 138; --bone-83:214 199 166; --bone-96:255 241 202;
  --gold-46:109 81 41; --gold-55:141 105 51; --gold-66:176 138 74; --gold-76:224 164 88; --gold-78:212 180 116; --gold-82:255 178 77; --gold-83:232 194 122; --gold-87:239 210 152;
  --ember-48:155 59 27; --ember-60:208 85 59; --ember-68:255 90 46; --ember-71:224 137 44; --ember-75:224 154 128;
  --blood-27:68 18 10; --blood-38:106 44 36; --blood-53:192 48 31; --blood-67:208 123 123;
  --moss-44:69 91 48; --moss-49:86 104 63; --moss-59:114 136 78; --moss-64:111 154 82; --moss-73:125 187 84; --moss-74:145 184 119; --moss-76:159 188 116; --moss-78:111 209 138; --moss-80:159 208 122; --moss-83:159 214 169; --moss-84:159 224 122; --moss-85:127 230 194; --moss-86:185 224 143; --moss-87:201 217 168; --moss-88:126 240 154; --moss-90:189 240 144; --moss-97:226 255 200;
  --spirit-69:111 155 232; --spirit-76:159 179 198; --spirit-89:159 230 255; --spirit-92:180 245 222;
  --arcane-37:74 54 86; --arcane-50:107 90 138; --arcane-52:122 79 176; --arcane-62:143 111 208; --arcane-67:155 124 242; --arcane-72:169 159 186; --arcane-78:201 162 242; --arcane-82:203 185 234; --arcane-90:228 214 242;
  /* palette:end */
  /* Roles: reach for these first. */
  --bg:rgb(var(--stone-15)); --panel:rgb(var(--stone-20)); --panel-dark:rgb(var(--stone-17)); --line:rgb(var(--bone-32));
  --gold:rgb(var(--gold-78)); --gold-bright:rgb(var(--gold-87)); --ink:rgb(var(--stone-88)); --muted:rgb(var(--bone-69)); --green:rgb(var(--moss-74));
  font-family: 'Segoe UI', Arial, sans-serif; font-size:15px;
}
* {box-sizing:border-box}
html {scroll-padding-top:120px}
/* Every digit is the same width, so a ticking number never re-spaces what sits beside it. */
body {margin:0;padding:var(--chat-top,0px) var(--chat-right,0px) var(--chat-bottom,0px) var(--chat-left,0px);font-variant-numeric:tabular-nums;color:var(--ink);background:radial-gradient(ellipse at 50% 0,rgb(var(--stone-26) / .2),transparent 65%),var(--bg)}
[hidden] {display:none!important}
button,input {font:inherit}
button,a {touch-action:manipulation}
button {cursor:pointer}
button:disabled {cursor:not-allowed;opacity:.4;filter:saturate(.4)}
a {color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible {outline:2px solid var(--gold-bright);outline-offset:3px}
.skip-link {position:absolute;left:12px;top:-60px;z-index:100;background:rgb(var(--stone-20));color:var(--gold-bright);border:1px solid rgb(var(--gold-46));padding:10px 14px;border-radius:3px}
.skip-link:focus {top:12px}
h1,h2,h3,p {margin:0}
h1,h2,h3 {font-family:Georgia,'Times New Roman',serif;font-weight:400}
p {color:var(--muted);line-height:1.5}
.icon-library {position:absolute;width:0;height:0;overflow:hidden}
.icon {width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:middle}
.label,.eyebrow,.rarity {font-size:13px;letter-spacing:1.5px;font-weight:600}
.label,.eyebrow {color:var(--muted)}
.rarity {color:var(--green);font-size:12px}
/* One button box: .primary, .secondary and .small-button differ only in colour, so a button that changes rank
   (primary to secondary) or sits beside another keeps its size (docs/ui-guide.md). */
.primary,.secondary,.small-button {border:1px solid rgb(var(--gold-55));border-radius:3px;padding:9px 14px;color:var(--gold-bright);background:linear-gradient(rgb(var(--bone-36)),rgb(var(--stone-26)));box-shadow:inset 0 1px rgb(var(--gold-78) / .13),0 2px 5px rgb(var(--stone-0) / .33);font-weight:600;font-size:14.5px;display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;transition:filter .15s,box-shadow .15s,border-color .15s}
.primary:hover:not(:disabled),.secondary:hover:not(:disabled),.small-button:hover:not(:disabled) {filter:brightness(1.25);border-color:var(--gold-bright)}
/* Pressed: the button darkens and sinks inward, but never moves; nothing around it may shift (docs/ui-guide.md). */
.primary:active:not(:disabled),.secondary:active:not(:disabled),.small-button:active:not(:disabled) {filter:brightness(.85);box-shadow:inset 0 2px 5px rgb(var(--stone-0) / .6)}
.secondary {background:linear-gradient(rgb(var(--stone-26)),rgb(var(--stone-20)));border-color:rgb(var(--bone-40))}
.small-button {background:rgb(var(--stone-26))}
.text-button {background:none;border:0;color:var(--muted);padding:3px 0;font-size:13.5px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgb(var(--gold-46))}
.text-button:hover:not(:disabled) {color:var(--gold-bright)}
/* Words that swap in place (steadyLabel in layout.js) all sit in one cell; the widest sets the size. */
.steady {display:inline-grid;place-items:center}
.steady>span {grid-area:1/1}
.steady>[data-off] {visibility:hidden}
.game-shell {max-width:1740px;margin:0 auto;padding:18px 24px 0}
.masthead {display:flex;align-items:center;justify-content:space-between;min-height:100px;padding:16px 23px;border:1px solid rgb(var(--bone-40));border-radius:5px;background:radial-gradient(ellipse at 45% 0,rgb(var(--bone-40) / .17),transparent 60%),linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-17)));box-shadow:inset 0 1px rgb(var(--gold-76) / .09),0 8px 24px rgb(var(--stone-0) / .73);gap:22px;scroll-margin:20px}
.brand {display:flex;align-items:center;gap:12px}
.brand-seal {width:45px;height:54px;display:grid;place-items:center;color:var(--gold);border:1px solid rgb(var(--gold-55));background:linear-gradient(145deg,rgb(var(--bone-36)),rgb(var(--stone-20)));clip-path:polygon(0 0,100% 0,100% 76%,50% 100%,0 76%)}
.brand-seal .icon {width:30px;height:30px}
.wordmark {font:small-caps 27px Georgia,serif;letter-spacing:1.1px;color:var(--gold-bright);text-shadow:0 2px 2px rgb(var(--stone-0))}
.wordmark small {display:block;font:12px 'Segoe UI',sans-serif;letter-spacing:3.6px;color:var(--muted);margin-top:6px}
.resource {display:flex;align-items:center;gap:13px;min-width:115px}
/* Balances tick ten times a second; equal fixed slots keep a growing number from re-spacing the bar. */
.masthead>.resource {flex:1 1 0}
.masthead>.brand,.masthead>.account {flex:none}
.resource>div {min-width:0}
.resource strong,.resource small {white-space:nowrap}
.resource small {display:block;overflow:hidden;text-overflow:ellipsis}
.resource>.icon {width:28px;height:32px;color:var(--gold);filter:drop-shadow(0 0 7px rgb(var(--gold-66) / .17))}
.energy-resource>.icon {color:var(--green);width:31px;height:38px;filter:drop-shadow(0 0 8px rgb(var(--moss-74) / .25))}
.resource strong {display:block;font:30px Georgia,serif;letter-spacing:1px;color:var(--gold-bright);margin:2px 0;font-variant-numeric:tabular-nums}
.energy-resource strong {font-size:37px;color:rgb(var(--moss-87))}
.energy-resource>div {position:relative}
.energy-gain {position:absolute;left:100%;top:24px;margin-left:10px;font:italic 700 17px Georgia,serif;color:rgb(var(--moss-86));text-shadow:0 0 8px rgb(var(--moss-74) / .5);white-space:nowrap;pointer-events:none}
.energy-gain[hidden] {display:none}
.resource strong em {font:18px Georgia,serif;color:rgb(var(--bone-62))}
.resource small,.resource .rate-tip {font-size:13.5px;color:var(--green)}
/* The Dark Energy rate opens its breakdown (the shared note of public/info-tip.js). */
.resource .rate-tip {display:block;max-width:100%;padding:0;border:0;border-bottom:1px dotted rgb(var(--moss-74) / .53);background:none;font-family:inherit;line-height:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;cursor:help}
.resource .rate-tip:hover,.resource .rate-tip[aria-expanded="true"] {color:rgb(var(--moss-86));border-bottom-color:rgb(var(--moss-86))}
.info-note .energy-tip-note {display:block;color:var(--muted);font-size:13.5px;line-height:1.35}
.info-note .energy-tip-legions {list-style:none;padding:0}
.info-note .energy-tip-legions li+li {margin-top:4px}
.info-note .energy-tip-total {margin-top:8px;padding-top:7px;border-top:1px solid rgb(var(--arcane-37));color:var(--gold-bright)}
.account {border-left:1px solid var(--line);padding-left:23px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:115px}
.account strong {font-size:14.5px;color:rgb(var(--bone-83));max-width:170px;overflow:hidden;text-overflow:ellipsis}
.account .label {font-size:12px;color:rgb(var(--gold-66))}
.entitlement {font-size:12px;letter-spacing:1px;color:rgb(var(--gold-66));white-space:nowrap}
.entitlement.premium {color:rgb(var(--arcane-82))}
.hall-rank {font-size:13.5px;font-weight:700;letter-spacing:1px;color:rgb(var(--gold-83));white-space:nowrap;text-decoration:none;border-bottom:1px dotted rgb(var(--gold-46))}
.hall-rank:hover,.hall-rank:focus-visible {color:var(--gold-bright)}
.board-tabs {flex-wrap:wrap}
.board-tabs button {flex:1 1 30%}
.board-tabs button:first-child {flex-basis:100%}
button.entitlement {padding:0;border:0;background:none;cursor:pointer;font-family:inherit;text-align:right}
button.entitlement:hover,button.entitlement:focus-visible {color:var(--gold-bright);text-decoration:underline}
/* Premium: the Eternal Vigil purchase dialog, in the premium note's violet. */
.premium-shop {width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 32px)}
.premium-shop #premium-status {margin:0;color:rgb(var(--arcane-82))}
.premium-perks {margin:0;padding-left:18px;display:grid;gap:6px;font-size:15px}
.premium-perks b {color:var(--gold-bright)}
.premium-free {display:grid;gap:8px;justify-items:center;text-align:center;padding:16px 14px;border:2px solid var(--gold-bright);border-radius:6px;background:radial-gradient(ellipse at top,rgb(var(--bone-36)),rgb(var(--stone-20)) 70%);box-shadow:0 0 22px rgb(var(--gold-83) / .2)}
.premium-free-title {font-size:25px;line-height:1.2;color:var(--gold-bright);letter-spacing:.5px;text-transform:uppercase}
.premium-free p {margin:0;font-size:15px;color:var(--ink)}
.premium-claim {font-size:16px;padding:11px 20px}
.premium-free-note {font-size:14px;color:var(--gold-bright)}
.premium-free-note:empty {display:none}
.premium-free-banner {display:block;width:100%;margin:11px 0 0;padding:9px 14px;border:1px solid var(--gold-bright);border-radius:4px;background:linear-gradient(90deg,rgb(var(--bone-32)),rgb(var(--stone-20)) 50%,rgb(var(--bone-32)));color:var(--ink);font:inherit;font-size:15px;text-align:center;cursor:pointer;box-shadow:0 0 14px rgb(var(--gold-83) / .13)}
.premium-free-banner strong {color:var(--gold-bright);text-transform:uppercase;letter-spacing:.5px}
.premium-free-banner:hover,.premium-free-banner:focus-visible {box-shadow:0 0 18px rgb(var(--gold-83) / .33)}
.premium-free-banner[hidden],.premium-free[hidden],.premium-plans[hidden] {display:none}
/* A new build is live (noticeBuild in app.js): a glowing call-out pinned at the top of the screen, over the game, under dialogs. */
.update-call {position:fixed;top:14px;left:50%;translate:-50% 0;z-index:60;display:flex;align-items:center;gap:16px;width:min(620px,calc(100vw - 24px));padding:14px 16px 14px 14px;border:2px solid rgb(var(--gold-83));border-radius:6px;background:linear-gradient(100deg,rgb(var(--bone-36)),rgb(var(--stone-20)) 55%,rgb(var(--bone-32)));box-shadow:0 0 0 1px rgb(var(--stone-15)),0 10px 40px rgb(var(--stone-0) / .7),0 0 34px rgb(var(--gold-83) / .45);color:rgb(var(--bone-83))}
.update-call[hidden] {display:none}
.update-sigil {flex:none;display:grid;place-items:center;width:52px;height:52px;border:1px solid rgb(var(--gold-78));border-radius:50%;background:radial-gradient(rgb(var(--gold-66) / .35),rgb(var(--stone-15)) 70%);color:rgb(var(--gold-87))}
.update-sigil .icon {width:28px;height:28px}
.update-copy {flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.update-copy .eyebrow {color:rgb(var(--gold-76));letter-spacing:2px}
.update-copy strong {font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:20px;color:rgb(var(--gold-87))}
.update-copy > span:last-child {font-size:14px;color:rgb(var(--bone-77))}
.update-reload {flex:none;padding:11px 20px;border:1px solid rgb(var(--gold-87));border-radius:4px;background:linear-gradient(rgb(var(--gold-76)),rgb(var(--gold-55)));color:rgb(var(--stone-15));font:inherit;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:1px;cursor:pointer;box-shadow:0 0 16px rgb(var(--gold-82) / .5)}
.update-reload:hover,.update-reload:focus-visible {filter:brightness(1.15);box-shadow:0 0 24px rgb(var(--gold-82) / .8)}
@media(max-width:560px) {.update-call {flex-wrap:wrap;gap:12px}.update-sigil {width:42px;height:42px}.update-copy {flex-basis:calc(100% - 60px)}.update-reload {width:100%}}
@media(prefers-reduced-motion:no-preference) {.update-call {animation:update-drop .5s cubic-bezier(.2,1.4,.4,1),update-glow 2.4s ease-in-out .5s infinite}.update-sigil {animation:update-throb 2.4s ease-in-out .5s infinite}
  @keyframes update-drop {from {opacity:0;translate:-50% -40px}to {opacity:1;translate:-50% 0}}
  @keyframes update-glow {50% {box-shadow:0 0 0 1px rgb(var(--stone-15)),0 10px 40px rgb(var(--stone-0) / .7),0 0 56px rgb(var(--gold-83) / .8)}}
  @keyframes update-throb {50% {scale:1.08;color:rgb(var(--stone-100))}}}
.premium-plans {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.premium-plan {display:grid;gap:4px;justify-items:center;padding:14px 8px;border:1px solid rgb(var(--arcane-50));border-radius:4px;background:linear-gradient(rgb(var(--stone-26)),rgb(var(--stone-20)));color:var(--ink);font:inherit;cursor:pointer}
.premium-plan:hover:not(:disabled),.premium-plan:focus-visible {border-color:rgb(var(--arcane-82));box-shadow:0 0 14px rgb(var(--arcane-62) / .27)}
.premium-plan:disabled {cursor:default;opacity:.6}
.premium-plan strong {font-size:15px;color:rgb(var(--arcane-90))}
.premium-plan .price {font-size:23px;color:var(--gold-bright);font-variant-numeric:tabular-nums}
.premium-plan small {font-size:13.5px;color:var(--muted)}
.premium-shop .hint {margin:0;font-size:14px;color:var(--muted)}
.admin-premium {display:flex;gap:6px;flex-wrap:wrap}
/* Notifications and the installable app. */
.notifications {width:min(520px,calc(100% - 32px));max-height:calc(100dvh - 32px)}
.notifications p {margin:0;font-size:15px}
.notify-events {display:grid;gap:8px}
.notify-events label {display:flex;gap:10px;align-items:flex-start;font-size:15px;cursor:pointer}
.notify-events input {margin-top:3px}
.notify-events b {color:var(--gold-bright)}
.notify-events small {display:block;color:var(--muted);font-size:14px}
.notify-actions {display:flex;flex-wrap:wrap;gap:10px}
.notify-actions:empty,#install-app[hidden],.notify-events[hidden] {display:none}
@media(max-width:520px) {.premium-plans {grid-template-columns:1fr}.premium-plan {grid-template-columns:1fr auto;justify-items:start;text-align:left}.premium-plan .price {grid-row:1/3;grid-column:2;align-self:center}}
.nav-row {display:flex;justify-content:space-between;align-items:center;margin:11px 0 18px;gap:15px}
nav {display:flex;gap:5px;flex-wrap:wrap}
nav a {font-size:14px;border:1px solid rgb(var(--bone-32));padding:7px 13px;border-radius:3px;color:rgb(var(--bone-73));background:rgb(var(--stone-20))}
nav a:hover {color:var(--gold-bright);border-color:rgb(var(--gold-55))}
nav a.active {color:rgb(var(--gold-87));background:linear-gradient(rgb(var(--bone-32)),rgb(var(--stone-20)));border-color:rgb(var(--gold-46));box-shadow:inset 0 0 8px rgb(var(--ember-48) / .13)}
nav a span {background:rgb(var(--gold-55));color:rgb(var(--bone-96));font-size:13px;padding:1px 4px;border-radius:2px;margin-left:5px}
.connection,.live-label {font-size:13px;color:rgb(var(--bone-69));display:flex;align-items:center;gap:6px;white-space:nowrap}
i,.green-dot {width:5px;height:5px;border-radius:50%;background:var(--green);display:inline-block;box-shadow:0 0 5px rgb(var(--moss-74) / .25)}
.dominion-banner {position:relative;isolation:isolate;min-height:225px;border:1px solid rgb(var(--bone-40));border-radius:4px;overflow:hidden;background:rgb(var(--stone-17));margin-bottom:12px}
.dominion-banner:before {content:'';position:absolute;inset:0;z-index:-2;background:url('/assets/necromancer.jpg') right 30%/auto 660px no-repeat;opacity:.92}
.dominion-banner:after {content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(var(--stone-17)) 0%,rgb(var(--stone-17) / .93) 25%,rgb(var(--stone-17) / .52) 50%,rgb(var(--stone-17) / .02) 75%),linear-gradient(0deg,rgb(var(--stone-15) / .73),transparent 50%)}
.hero-copy {padding:24px 30px}
.hero-copy .eyebrow {color:rgb(var(--bone-73));font-size:13px}
.hero-copy .eyebrow span {font-size:11px;margin:0 10px;color:rgb(var(--gold-55))}
.hero-copy h1 {font-size:35px;line-height:1.08;color:rgb(var(--stone-88));margin:10px 0 9px;text-shadow:0 2px 8px rgb(var(--stone-0))}
.hero-copy p {font-size:14px;color:rgb(var(--bone-73))}
.hero-actions {display:flex;align-items:center;gap:15px;margin-top:18px}
.hero-actions .primary {border-color:rgb(var(--moss-59));background:linear-gradient(rgb(var(--bone-36)),rgb(var(--stone-26)));color:rgb(var(--stone-88));padding:10px 15px}
.hero-actions .icon {width:17px;height:19px}
.hero-actions strong {display:block;font-size:13.5px;color:rgb(var(--moss-87));font-weight:500}
.hero-actions strong b {padding:0 5px;color:rgb(var(--bone-55))}
.hero-actions small {display:block;font-size:13px;color:rgb(var(--bone-69));margin-top:4px}
.hero-caption {position:absolute;right:25px;bottom:22px;text-align:right;text-shadow:0 2px 6px rgb(var(--stone-0))}
.hero-caption span {font:13.5px Georgia,serif;letter-spacing:2px;color:rgb(var(--bone-83))}
.hero-caption small {display:block;color:rgb(var(--bone-73));font-size:13.5px;margin-top:6px}
.next-step {display:flex;align-items:center;gap:13px;padding:11px 15px;background:linear-gradient(90deg,rgb(var(--stone-26)),rgb(var(--stone-20)));border:1px solid rgb(var(--bone-40));border-radius:3px;margin-bottom:17px;min-height:56px}
.quest-diamond {font:bold 21px Georgia,serif;color:var(--gold);width:27px;height:31px;display:grid;place-items:center;border:1px solid rgb(var(--gold-46));clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:rgb(var(--bone-36))}
.next-step .eyebrow {font-size:11px;letter-spacing:1.4px;display:block;color:rgb(var(--gold-66));margin-bottom:4px}
.next-step strong {font-size:14.5px;color:var(--gold-bright)}
#step-copy {font-size:13.5px;color:rgb(var(--bone-73));margin-left:12px}
.next-step button {margin-left:auto}
.dashboard {display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.9fr);gap:16px;align-items:start}
.column {min-width:0;display:grid;gap:16px}
.panel {background:linear-gradient(135deg,rgb(var(--stone-20) / .35),transparent 70%),var(--panel);border:1px solid var(--line);border-radius:4px;box-shadow:inset 0 1px rgb(var(--gold-78) / .13),0 3px 12px rgb(var(--stone-0) / .2);overflow:hidden;scroll-margin-top:15px}
.panel-heading {display:flex;justify-content:space-between;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid rgb(var(--bone-32) / .5);background:linear-gradient(rgb(var(--stone-26) / .29),transparent)}
.panel-heading h2 {font-size:19px;color:var(--gold);display:flex;align-items:center;gap:9px;letter-spacing:.25px}
.panel-heading .icon {width:18px;height:20px;color:rgb(var(--gold-66))}
.panel-heading .eyebrow {font-size:11px;color:rgb(var(--bone-62));white-space:nowrap}
.warrior-card {position:relative;display:flex;gap:16px;min-height:156px;background:linear-gradient(90deg,rgb(var(--stone-15)),rgb(var(--stone-20)))}
.warrior-card>img {width:133px;height:166px;object-fit:cover;object-position:40% 10%;border-right:1px solid rgb(var(--bone-36));mask-image:linear-gradient(90deg,rgb(var(--stone-0)) 80%,rgb(var(--stone-0) / .33))}
.warrior-info {padding:18px 0 12px;min-width:0}
.warrior-info h3 {font-size:22px;color:rgb(var(--gold-87));margin:7px 0}
.warrior-info p {font-size:14px;color:rgb(var(--bone-69));font-style:italic;font-family:Georgia,serif;line-height:1.5}
.unit-stats {display:flex;gap:12px;margin-top:13px;font-size:12px;color:rgb(var(--bone-62))}
.unit-stats b {font-size:14px;color:rgb(var(--bone-83));font-weight:500;margin-right:2px}
.weapon-label {display:inline-block;color:rgb(var(--bone-69));font-size:13px;margin-top:9px}
.unit-trait {display:block;color:rgb(var(--moss-76));font-size:13px;margin-top:8px;line-height:1.4}
.unit-trait b {color:rgb(var(--moss-87));font-weight:500;letter-spacing:.5px}
.legion-traits {font-size:13px;color:rgb(var(--bone-62));margin:8px 0 0;line-height:1.5}
.legion-traits b {color:rgb(var(--moss-87));font-weight:500}
.legion-wounds {display:flex;align-items:center;gap:10px;margin-top:8px;padding:8px 10px;border:1px solid rgb(var(--blood-38));background:rgb(var(--stone-20) / .8);font-size:13px;color:rgb(var(--bone-77));line-height:1.5}
.legion-wounds[hidden] {display:none}
.legion-wounds b {color:rgb(var(--stone-88));font-weight:500}
.legion-wounds button {margin-left:auto;font-size:13px;white-space:nowrap}
.owned {position:absolute;right:15px;bottom:14px;text-align:right}
.owned strong {font:28px Georgia,serif;color:var(--gold-bright);display:block}
.owned small {font-size:11px;letter-spacing:1px;color:rgb(var(--bone-62))}
.purchase-block {padding:15px 16px 10px;display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid rgb(var(--bone-36) / .33)}
.price>span {display:block;font-size:11px;letter-spacing:1px;color:rgb(var(--bone-69));margin-bottom:7px}
.price strong {font-size:14.5px;color:var(--gold-bright);font-weight:500;display:flex;align-items:center;gap:6px}
.price small {font-size:11px;letter-spacing:1px;color:rgb(var(--bone-55));margin-left:1px}
.price .icon {width:14px;height:14px;color:var(--green)}
.price .icon:nth-of-type(2) {color:rgb(var(--bone-77));margin-left:10px}
.purchase-actions {display:flex;gap:5px}
.summon-choice {min-width:52px;padding:7px 9px;border:1px solid rgb(var(--gold-46));border-radius:3px;color:rgb(var(--bone-73));background:linear-gradient(rgb(var(--stone-26)),rgb(var(--stone-20)));box-shadow:inset 0 1px rgb(var(--gold-78) / .09),0 2px 5px rgb(var(--stone-0) / .33);display:flex;align-items:baseline;justify-content:center;gap:6px;white-space:nowrap}
.summon-choice span {font-size:12px;text-transform:uppercase;letter-spacing:.7px}
.summon-choice strong {font:17px Georgia,serif;color:var(--gold-bright);font-variant-numeric:tabular-nums}
.summon-choice.max {border-color:rgb(var(--gold-55));background:linear-gradient(rgb(var(--bone-36)),rgb(var(--stone-26)))}
.summon-choice:hover:not(:disabled) {filter:brightness(1.25);border-color:var(--gold-bright)}
.summon-choice:active:not(:disabled) {filter:brightness(.85);box-shadow:inset 0 2px 5px rgb(var(--stone-0) / .6)}
.hint {font-size:13.5px;color:rgb(var(--bone-69));padding:0 16px 13px;line-height:1.5}
.hint.ready {color:var(--green)}
.unit-row {position:relative;display:grid;grid-template-columns:42px minmax(120px,1fr) auto auto;align-items:center;gap:10px;padding:13px 16px;border-top:1px solid rgb(var(--bone-36));background:linear-gradient(90deg,rgb(var(--stone-17)),rgb(var(--stone-20)))}
.unit-row-icon {width:38px;height:42px;display:grid;place-items:center;color:rgb(var(--bone-83));border:1px solid rgb(var(--moss-49));background:rgb(var(--stone-26));border-radius:3px}
.unit-row-icon .icon {width:25px;height:25px}
.unit-row-icon.ranger {color:rgb(var(--bone-77));border-color:rgb(var(--gold-46));background:rgb(var(--stone-26))}
.unit-row-copy h3 {font-size:17px;color:rgb(var(--bone-83));margin:3px 0}
.unit-row-copy h3 small {font:11px 'Segoe UI',sans-serif;color:rgb(var(--bone-62));margin-left:5px}
.unit-row-copy p,.unit-lock {font-size:12px;color:rgb(var(--bone-62))}
.guardian-price strong {font-size:13.5px}.unit-row .purchase-actions {justify-self:end}
.unit-lock {position:absolute;left:68px;bottom:3px;color:rgb(var(--bone-69))}
.line {display:flex;align-items:center;justify-content:space-between;gap:10px}
.badge {font-size:11px;color:rgb(var(--bone-83));background:rgb(var(--stone-26));border:1px solid rgb(var(--moss-44));padding:3px 5px;border-radius:2px;letter-spacing:.8px}
.badge.idle {color:rgb(var(--bone-69));background:rgb(var(--stone-26));border-color:rgb(var(--bone-40))}
.small {font-size:13.5px;color:rgb(var(--bone-69))}
.small strong {color:var(--green);font-weight:500}
progress {appearance:none;height:5px;border:0;width:100%;display:block;margin:8px 0 0;background:rgb(var(--stone-15));border-radius:2px;overflow:hidden}
progress::-webkit-progress-bar {background:rgb(var(--stone-15));box-shadow:inset 0 1px 2px rgb(var(--stone-0))}
progress::-webkit-progress-value {background:linear-gradient(90deg,rgb(var(--moss-44)),rgb(var(--moss-76)));border-radius:2px;box-shadow:0 0 6px rgb(var(--moss-76) / .25)}
progress::-moz-progress-bar {background:rgb(var(--moss-74))}
.territory-row {margin:0 15px;padding:14px 0;border-bottom:1px solid rgb(var(--bone-32))}
.territory-row:last-child {border-bottom:0}
.territory-name {display:flex;gap:11px;align-items:center}
.territory-name>.icon {width:28px;height:32px;color:rgb(var(--bone-62));background:rgb(var(--stone-26));border:1px solid rgb(var(--bone-36));padding:4px;border-radius:2px}
.territory-name h3 {font-size:18px;color:rgb(var(--gold-78))}
.territory-name p {font-size:13px;margin-top:4px}
.territory-name .badge {margin-left:auto}
.territory-row.locked .badge.idle {color:rgb(var(--bone-77))}
.territory-detail {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}
.territory-detail span {font-size:13.5px;color:var(--green)}
.territory-detail small {display:block;font-size:12px;color:rgb(var(--bone-62));margin-top:5px}
.territory-detail button {font-size:13.5px;padding:7px 10px}
.territory-row.locked {opacity:.75}
.territory-row.active h3 {color:rgb(var(--bone-83))}
/* Land cards (Lemp, 2026-09-26): the land's own picture, darkened, behind readable text; the numbers wait behind the ?. */
/* The chapter switch (Lemp, 2026-09-28): one plate per chapter over its own darkened painting, a wax-seal
   numeral, what is held and a pip per land. The chosen plate burns gold and points down at its lands. */
.chapter-switch {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:12px 15px 4px}
.chapter-tab {position:relative;isolation:isolate;overflow:visible;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"seal words" "name name" "pips pips";align-items:center;gap:7px 10px;padding:10px 11px 10px;border:1px solid rgb(var(--bone-32));border-radius:4px;background:rgb(var(--stone-17));color:var(--ink);text-align:left;cursor:pointer;transition:border-color .2s,transform .2s,box-shadow .2s}
.chapter-tab:before {content:'';position:absolute;inset:0;z-index:-2;border-radius:3px;background:rgb(var(--stone-20)) center/cover no-repeat;filter:saturate(.6) brightness(.55);transition:filter .25s}
.chapter-tab:after {content:'';position:absolute;inset:0;z-index:-1;border-radius:3px;background:linear-gradient(180deg,rgb(var(--stone-15) / .6),rgb(var(--stone-15) / .9) 75%)}
.chapter-tab[data-chapter="1"]:before {background-image:url('/assets/reference/graveyard.jpg')}
.chapter-tab[data-chapter="2"]:before {background-image:url('/assets/reference/lava-golem.jpg')}
.chapter-tab[data-chapter="3"]:before {background-image:url('/assets/reference/ritual.jpg')}
.chapter-tab[data-chapter="4"]:before {background-image:url('/assets/reference/kingdom.jpg')}
.chapter-tab:hover:not(:disabled) {border-color:rgb(var(--gold-55))}
.chapter-tab:hover:not(:disabled):before {filter:saturate(.8) brightness(.7)}
.chapter-tab[aria-selected="true"] {border-color:var(--gold);box-shadow:0 0 0 1px rgb(var(--gold-78) / .2),0 0 18px rgb(var(--gold-78) / .19),inset 0 1px rgb(var(--gold-87) / .25)}
.chapter-tab[aria-selected="true"]:before {filter:saturate(.95) brightness(.8)}
.chapter-tab[aria-selected="true"]:after {background:linear-gradient(180deg,rgb(var(--stone-15) / .33),rgb(var(--stone-15) / .85) 80%)}
/* A small gold point under the chosen plate, aimed at the land cards below. */
.chapter-point {display:none}
.chapter-tab[aria-selected="true"] .chapter-point {display:block;position:absolute;left:50%;bottom:-7px;width:12px;height:12px;margin-left:-6px;background:rgb(var(--stone-17));border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);transform:rotate(45deg)}
.chapter-seal {grid-area:seal;display:grid;place-items:center;width:40px;height:48px;font:700 18px/1 Georgia,serif;letter-spacing:.5px;color:rgb(var(--bone-77));background:linear-gradient(145deg,rgb(var(--bone-32)),rgb(var(--stone-20)));border:1px solid rgb(var(--gold-46));clip-path:polygon(0 0,100% 0,100% 76%,50% 100%,0 76%);padding-bottom:8px;box-sizing:border-box;text-shadow:0 1px 2px rgb(var(--stone-0))}
.chapter-tab[aria-selected="true"] .chapter-seal {color:var(--gold-bright);background:linear-gradient(145deg,rgb(var(--gold-46)),rgb(var(--stone-20)));text-shadow:0 0 10px rgb(var(--gold-87) / .53),0 1px 2px rgb(var(--stone-0))}
.chapter-seal .icon {width:18px;height:18px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:1.6}
.chapter-words {grid-area:words;display:grid;gap:2px;min-width:0}
.chapter-words small {font-size:11px;letter-spacing:1.3px;color:rgb(var(--bone-62))}
.chapter-words small em {font-style:normal;color:rgb(var(--stone-17));background:rgb(var(--moss-80));border-radius:2px;padding:1px 4px;margin-left:4px;letter-spacing:.8px}
.chapter-name {grid-area:name;font:600 16px/1.2 Georgia,serif;color:rgb(var(--gold-87));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;text-shadow:0 1px 3px rgb(var(--stone-0))}
.chapter-tab[aria-selected="true"] .chapter-name {color:var(--gold-bright)}
.chapter-status {display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.chapter-live {flex:none;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 6px rgb(var(--moss-74))}
.chapter-live.marching {background:rgb(var(--gold-76));box-shadow:0 0 6px rgb(var(--gold-76))}
.chapter-pips {grid-area:pips;position:relative;display:flex;gap:3px}
.chapter-pips i {flex:1;height:4px;border-radius:2px;background:rgb(var(--stone-26));border:1px solid rgb(var(--bone-32))}
.chapter-pips i.open {background:rgb(var(--bone-36));border-color:rgb(var(--gold-55))}
.chapter-pips i.held {background:linear-gradient(90deg,rgb(var(--gold-66)),rgb(var(--gold-87)));border-color:rgb(var(--gold-78))}
.chapter-tab.sealed {cursor:not-allowed;border-style:dashed}
.chapter-tab.sealed:before {filter:grayscale(1) brightness(.35)}
.chapter-tab.sealed .chapter-seal {color:rgb(var(--bone-55))}
.chapter-tab.sealed .chapter-name,.chapter-tab.sealed .chapter-status {color:rgb(var(--bone-55))}
.chapter-tab.fresh:not([aria-selected="true"]) {border-color:rgb(var(--moss-59));animation:chapter-call 2.4s ease-in-out infinite}
@keyframes chapter-call {50% {box-shadow:0 0 14px rgb(var(--moss-80) / .33)}}
@media(prefers-reduced-motion:reduce) {.chapter-tab {transition:none}.chapter-tab.fresh:not([aria-selected="true"]) {animation:none}}
.chapter-caption {display:none}
@media(max-width:720px) {
  .chapter-switch {gap:6px;padding:10px 12px 2px}
  .chapter-tab {grid-template-columns:1fr;grid-template-areas:"seal" "words" "pips";justify-items:center;text-align:center;gap:5px;min-height:0;padding:8px 6px 7px}
  .chapter-seal {width:34px;height:40px;font-size:16px;padding-bottom:6px}
  .chapter-words small,.chapter-name {display:none}
  .chapter-status {justify-content:center;font-size:12px}
  .chapter-pips {width:100%}
  .chapter-caption {display:block;margin:8px 12px 0;font:600 15px/1.2 Georgia,serif;color:var(--gold);text-align:center;letter-spacing:.3px}
}
#territory-list {display:grid;gap:10px;padding:12px 15px}
.land-card {position:relative;margin:0;padding:0;border:1px solid rgb(var(--bone-32));border-radius:4px;overflow:hidden;isolation:isolate;background:rgb(var(--stone-17))}
.land-card:last-child {border-bottom:1px solid rgb(var(--bone-32))}
.land-card:before {content:'';position:absolute;inset:0;z-index:-2;background:rgb(var(--stone-20)) center/cover no-repeat}
.land-card:after {content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(var(--stone-15) / .93) 0%,rgb(var(--stone-15) / .77) 50%,rgb(var(--stone-15) / .35) 100%)}
.land-card.active {border-color:rgb(var(--gold-46));box-shadow:inset 3px 0 0 rgb(var(--moss-76))}
.land-card.locked {opacity:1}
.land-card.locked:before {filter:grayscale(.85) brightness(.7)}
.land-card-inner {display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head head" "copy copy" "yield actions" "meter actions" "lore lore";gap:6px 14px;padding:14px 16px;align-items:center}
.land-card-head {grid-area:head;display:flex;align-items:center;gap:10px}
.land-title {display:flex;align-items:center;min-width:0}
.land-title h3 {font:23px Georgia,serif;color:rgb(var(--gold-87));text-shadow:0 1px 3px rgb(var(--stone-0))}
.land-card.locked .land-title h3 {color:rgb(var(--bone-73))}
.land-card-head .badge {margin-left:auto;font-size:13.5px;padding:3px 7px}
.land-copy {grid-area:copy;margin:0;font-size:15px;color:rgb(var(--bone-77))}
.land-yield {grid-area:yield;margin:4px 0 0;font-size:16px;color:rgb(var(--bone-83))}
.land-yield strong {font-size:19px;font-weight:600;color:var(--green)}
.land-yield.sealed-need strong {font-size:17px;color:rgb(var(--bone-83))}
.land-cost {grid-area:meter;margin:0;font-size:15px;color:rgb(var(--bone-69))}
.land-actions {grid-area:actions;display:flex;justify-content:flex-end}
.land-actions button {font-size:15px;padding:9px 14px}
.land-actions .legion-buttons {display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:260px}
.land-actions .legion-buttons .secondary {padding:7px 9px;font-size:15px}
.land-actions .legion-buttons small {font-size:14px;color:rgb(var(--bone-73))}
.land-actions .conquest-status {font-size:15px}
.efficiency-meter {grid-area:meter;display:grid;gap:4px;max-width:420px}
.efficiency-label {display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0;border:0;background:none;color:rgb(var(--bone-69));font-size:13.5px;letter-spacing:1.2px;text-align:left;cursor:help}
.efficiency-label b {font:20px Georgia,serif;letter-spacing:0;color:rgb(var(--gold-87));font-variant-numeric:tabular-nums}
.efficiency-label:hover b,.efficiency-label[aria-expanded="true"] b {text-decoration:underline dotted rgb(var(--gold-55));text-underline-offset:4px}
/* 500% fills the bar: past it no peril touches the legion. Faint ticks mark each 100%. */
.efficiency-meter progress {height:9px;margin:0;border-radius:5px;background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1px),rgb(var(--stone-100) / .1) calc(20% - 1px) 20%),rgb(var(--stone-15))}
.efficiency-meter progress::-webkit-progress-bar {background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1px),rgb(var(--stone-100) / .1) calc(20% - 1px) 20%),rgb(var(--stone-15));border-radius:5px}
.efficiency-meter progress::-webkit-progress-value {background:linear-gradient(90deg,rgb(var(--gold-46)),rgb(var(--gold-78)));border-radius:5px}
.efficiency-meter progress::-moz-progress-bar {background:linear-gradient(90deg,rgb(var(--gold-46)),rgb(var(--gold-78)))}
.efficiency-meter.safe progress::-webkit-progress-value {background:linear-gradient(90deg,rgb(var(--moss-44)),rgb(var(--moss-76)))}
.efficiency-meter.safe progress::-moz-progress-bar {background:linear-gradient(90deg,rgb(var(--moss-44)),rgb(var(--moss-76)))}
.efficiency-meter.weak .efficiency-label b {color:rgb(var(--gold-76))}
.land-lore {grid-area:lore;display:flex;align-items:center;gap:8px;font-size:14.5px;color:rgb(var(--bone-73));max-width:420px}
.land-lore b {color:rgb(var(--bone-83));font-weight:600;white-space:nowrap}
.land-lore .lore-bar {flex:1;height:5px;margin:0}
.land-card>.siege-progress,.land-card>.conquest-line {margin:0 16px 14px}
.land-card[data-land="forgotten-graveyard"]:before {background-image:url('/assets/reference/graveyard.jpg')}
.land-card[data-land="abandoned-crypt"]:before {background-image:url('/assets/illustrations/abandoned-crypt.jpg')}
.land-card[data-land="old-mausoleum"]:before {background-image:url('/assets/reference/lair.jpg')}
.land-card[data-land="forsaken-battlefield"]:before {background-image:url('/assets/reference/battlefield.jpg')}
.land-card[data-land="spirit-hollow"]:before {background-image:url('/assets/reference/wasteland.jpg')}
.land-card[data-land="blood-marshes"]:before {background-image:url('/assets/reference/ritual.jpg')}
.land-card[data-land="hollow-cathedral"]:before {background-image:url('/assets/reference/altar.jpg')}
.land-card[data-land="weeping-fen"]:before {background-image:url('/assets/reference/wasteland.jpg');background-position:center bottom}
.land-card[data-land="gallows-hill"]:before {background-image:none}
.land-card[data-land="warded-abbey"]:before {background-image:url('/assets/reference/altar.jpg');background-position:right center}
.land-card[data-land="pit-of-the-fallen"]:before {background-image:url('/assets/reference/bones.jpg')}
.land-card[data-land="ashen-ramparts"]:before {background-image:url('/assets/reference/kingdom.jpg');background-position:left top}
.land-card[data-land="cinder-garrison"]:before {background-image:url('/assets/reference/lava-golem.jpg')}
.land-card[data-land="kingdom-of-ash"]:before {background-image:url('/assets/reference/kingdom.jpg')}
/* A peril's slight warning above the lands, and its short note in the corner that never takes a click but its own ×. */
.peril-banner {display:flex;align-items:flex-start;gap:10px;margin:12px 15px 0;padding:10px 12px;border:1px solid rgb(var(--gold-46));border-left:3px solid rgb(var(--gold-76));border-radius:3px;background:rgb(var(--stone-26));color:rgb(var(--gold-87));font-size:15px;line-height:1.45}
.peril-banner[hidden] {display:none}
.peril-banner .icon {flex:none;width:18px;height:18px;margin-top:1px;color:rgb(var(--gold-76))}
.peril-toast {position:fixed;z-index:55;top:calc(var(--hud-height, 180px) + 12px + var(--chat-top,0px));right:calc(16px + var(--chat-right,0px));width:min(340px,calc(100vw - 32px));box-sizing:border-box;padding:12px 36px 12px 14px;border:1px solid rgb(var(--gold-55));border-left:3px solid rgb(var(--gold-76));border-radius:4px;background:rgb(var(--stone-20) / .95);box-shadow:0 8px 24px rgb(var(--stone-0) / .73);color:rgb(var(--gold-87));pointer-events:none;animation:peril-in .3s ease-out}
.peril-toast[hidden] {display:none}
.peril-toast .eyebrow {color:rgb(var(--gold-76));font-size:13.5px;letter-spacing:1.4px}
.peril-toast p {margin:4px 0;font:17px/1.35 Georgia,serif;color:rgb(var(--stone-88))}
.peril-toast small {font-size:14.5px;color:rgb(var(--bone-77))}
.peril-toast-close {position:absolute;top:6px;right:6px;width:26px;height:26px;padding:0;border:0;background:none;color:rgb(var(--bone-77));font-size:20px;cursor:pointer;pointer-events:auto}
@keyframes peril-in {from {opacity:0;transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce) {.peril-toast {animation:none}}
@media(max-width:720px) {
  #territory-list {padding:10px}
  .land-card:after {background:linear-gradient(90deg,rgb(var(--stone-15) / .9) 0%,rgb(var(--stone-15) / .72) 60%,rgb(var(--stone-15) / .5) 100%)}
  .land-card-inner {grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "copy" "yield" "meter" "lore" "actions";padding:12px}
  .land-title h3 {font-size:21px}
  .land-actions {justify-content:stretch}
  .land-actions>button,.land-actions .legion-buttons {flex:1;max-width:none}
  .land-actions .legion-buttons .secondary {flex:1}
  .efficiency-meter,.land-lore {max-width:none}
  .peril-banner {margin:10px 10px 0}
  .peril-toast {right:10px;width:calc(100vw - 20px)}
}
.panel-foot {display:flex;gap:6px;align-items:center;padding:11px 15px;border-top:1px solid var(--line);font-size:12px;color:rgb(var(--bone-69));background:rgb(var(--stone-17))}
.panel-foot strong {font-size:13px;color:rgb(var(--bone-73));margin-left:auto;white-space:nowrap}
.altar-panel {border-color:rgb(var(--bone-40))}
.altar-scene {height:142px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 85%,rgb(var(--moss-44) / .19),transparent 65%),linear-gradient(rgb(var(--stone-17)),rgb(var(--stone-20)))}
.ritual-circle {width:114px;height:114px;border:1px solid rgb(var(--moss-59) / .29);border-radius:50%;position:relative;display:grid;place-items:center;background:radial-gradient(rgb(var(--moss-49) / .16),transparent 70%);box-shadow:0 0 25px rgb(var(--moss-59) / .07),inset 0 0 20px rgb(var(--moss-49) / .08)}
.ritual-circle:before,.ritual-circle:after {content:'';position:absolute;inset:12px;border:1px solid rgb(var(--moss-59) / .29);transform:rotate(45deg)}
.ritual-circle:after {transform:rotate(15deg);inset:20px;border-color:rgb(var(--moss-64) / .21)}
.ritual-circle>.icon {width:46px;height:46px;color:rgb(var(--moss-87));filter:drop-shadow(0 0 10px rgb(var(--moss-76) / .6));stroke-width:.8;z-index:1}
.ritual-circle>span {position:absolute;top:-9px;color:rgb(var(--bone-73));background:rgb(var(--stone-17));font-size:21px;padding:0 7px}
.altar-stone {position:absolute;width:148px;height:13px;bottom:6px;background:linear-gradient(rgb(var(--gold-46)),rgb(var(--bone-32)));border:1px solid rgb(var(--bone-55) / .4);transform:perspective(30px) rotateX(12deg);box-shadow:0 8px 18px rgb(var(--stone-0))}
.offering {padding:17px 18px 12px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgb(var(--stone-26))}
.offering .rarity {font-size:11px;letter-spacing:1px}
.offering h3 {color:rgb(var(--bone-83));font-size:23px;margin:5px 0}
.offering p {font-size:13.5px;max-width:245px}
.offering>strong {font:25px Georgia,serif;color:var(--gold-bright);margin-left:10px}
.altar-value {display:flex;justify-content:space-between;align-items:center;padding:0 18px 14px}
.altar-value>span {font-size:12px;letter-spacing:1px;color:rgb(var(--bone-62))}
.altar-value strong {font-size:19px;color:var(--gold-bright);font-weight:500}
.altar-value .icon {width:17px;height:17px;color:var(--green)}
.altar-value small {font-size:13px;color:rgb(var(--bone-69))}
.altar-actions {display:flex;gap:8px;margin:0 18px 17px}
.altar-actions button:first-child, #ritual-start {flex:1}
.encounter {border-top:1px solid rgb(var(--bone-32));padding:14px 18px;background:rgb(var(--stone-17))}
.encounter .small {font-size:13px}
.forge-content {display:flex;gap:14px;align-items:center;padding:19px 18px 14px}
.forge-icon {width:46px;height:54px;display:grid;place-items:center;background:linear-gradient(135deg,rgb(var(--bone-36)),rgb(var(--stone-20)));border:1px solid rgb(var(--gold-46));border-radius:3px;color:rgb(var(--bone-77))}
.forge-icon .icon {width:30px;height:35px}
.forge-content .rarity {color:rgb(var(--arcane-72));font-size:11px}
.forge-content h3 {font-size:21px;color:rgb(var(--bone-83));margin:5px 0}
.forge-content p {font-size:13.5px}
.upgrade-benefits {display:flex;gap:15px;margin:0 18px 15px;font-size:13px;color:rgb(var(--bone-69))}
.upgrade-benefits strong {color:var(--green);font-weight:500}
.forge-bottom {display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;border-top:1px solid rgb(var(--bone-32))}
.forge-bottom>span {color:rgb(var(--bone-77));font-size:14px}
.reinforcement {border-top:1px solid rgb(var(--bone-36));padding-top:16px}
.reinforcement>div:first-child {padding:0 18px 14px}
.reinforcement h3 {font-size:19px;color:rgb(var(--bone-83));margin:5px 0}
.reinforcement p {font-size:13px}
.command-forge {border-top:1px solid rgb(var(--bone-36));padding-top:16px}
.command-forge>div:first-child {padding:0 18px 14px}
.command-forge h3 {font-size:19px;color:rgb(var(--bone-83));margin:5px 0}
.command-forge p {font-size:13px}
.panel-description {font-size:13.5px;padding:12px 16px 3px;color:rgb(var(--bone-62))}
#goals {margin:12px 13px 15px;padding:2px 16px 2px 0;border:1px solid rgb(var(--bone-32));background:linear-gradient(90deg,transparent 55px,rgb(var(--gold-55) / .4) 55px 56px,transparent 56px 59px,rgb(var(--gold-55) / .23) 59px 60px,transparent 60px),radial-gradient(ellipse at 28% 0,rgb(var(--bone-32) / .28),transparent 62%),linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-17)));box-shadow:inset 0 0 0 3px rgb(var(--stone-15)),inset 0 0 0 4px rgb(var(--stone-26)),inset 0 0 30px rgb(var(--stone-0) / .52)}
.goal {position:relative;isolation:isolate;padding:15px 0;display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:0 16px;align-items:center;background:linear-gradient(90deg,transparent 60px,rgb(var(--bone-36) / .44) 60px) left bottom/100% 1px no-repeat}
.goal:last-child {background-image:none}
.goal-symbol {position:relative;justify-self:center;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:url('/assets/deeds/seal-stone.svg') center/contain no-repeat;color:rgb(var(--bone-69));font:700 15px/1 Georgia,serif;text-shadow:0 -1px 0 rgb(var(--stone-0)),0 1px 0 rgb(var(--stone-100) / .09)}
.goal.ready .goal-symbol {color:rgb(var(--bone-96));text-shadow:0 0 8px rgb(var(--moss-74)),0 0 2px rgb(var(--moss-83))}
.goal.claimed .goal-symbol {background-image:url('/assets/deeds/seal-gold.svg');color:var(--gold-bright);text-shadow:0 0 8px rgb(var(--gold-87) / .6),0 1px 1px rgb(var(--stone-0))}
.goal h3 {font:17px/1.3 Georgia,serif;color:rgb(var(--stone-88))}
.goal p {font-size:14px;margin-top:3px;color:rgb(var(--bone-69))}
.goal small {display:block;font-size:14px;color:rgb(var(--gold-78));margin-top:4px}
.goal button {position:relative;overflow:hidden;min-width:88px;min-height:40px;padding:8px 16px;border:1px solid rgb(var(--gold-66));border-radius:2px;background:radial-gradient(ellipse at 50% -20%,rgb(var(--gold-87) / .28),transparent 70%),linear-gradient(rgb(var(--bone-40)),rgb(var(--stone-26)));color:var(--gold-bright);font:700 15px Georgia,serif;letter-spacing:.5px;text-shadow:0 1px 1px rgb(var(--stone-0));box-shadow:inset 0 0 0 1px rgb(var(--stone-15)),inset 0 0 0 2px rgb(var(--gold-78) / .19),0 0 16px rgb(var(--gold-78) / .22)}
.goal-progress {font:600 15px Georgia,serif;color:rgb(var(--bone-73));white-space:nowrap;font-variant-numeric:tabular-nums}
.goal.claimed h3 {color:rgb(var(--bone-73))}
.goal.claimed small {color:rgb(var(--bone-69))}
.goal.claimed p {color:rgb(var(--bone-62))}
.activity {list-style:none;margin:0;padding:0 15px;max-height:250px;overflow:auto;scrollbar-width:thin;scrollbar-color:rgb(var(--bone-40)) transparent}
.activity li {font:13.5px/1.6 Consolas,monospace;padding:10px 0;border-bottom:1px solid rgb(var(--stone-26));color:rgb(var(--bone-77))}
.activity time {color:rgb(var(--bone-55));font-size:13px;display:block;margin-bottom:2px}
.activity li:first-child {color:rgb(var(--moss-87))}
.activity li:last-child {border:0}
footer {display:flex;justify-content:space-between;gap:12px;margin-top:24px;padding:18px 0 22px;border-top:1px solid rgb(var(--stone-26));font-size:12px;letter-spacing:1.3px;color:rgb(var(--bone-55))}
footer b {font-size:11px;padding:0 8px;color:rgb(var(--gold-66))}
.notice {padding:12px 16px;border:1px solid rgb(var(--gold-46));background:rgb(var(--stone-26));color:rgb(var(--moss-87));border-radius:3px;margin-bottom:15px;font-size:14px;line-height:1.5}
.briefing {width:min(480px,calc(100% - 32px));padding:0;border:1px solid rgb(var(--gold-55));border-radius:5px;color:var(--ink);background:radial-gradient(ellipse at 50% 0,rgb(var(--bone-40) / .17),transparent 60%),linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-17)));box-shadow:inset 0 1px rgb(var(--gold-76) / .09),0 18px 60px rgb(var(--stone-0) / .87)}
.briefing::backdrop {background:rgb(var(--stone-0) / .8)}
.briefing form {display:grid;gap:12px;padding:24px}
.briefing h2 {font-size:23px;color:var(--gold-bright)}
.briefing .toll {border-left:2px solid rgb(var(--gold-55));padding-left:12px;color:var(--ink)}
.briefing h3 {font:600 14px 'Segoe UI',sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);margin:4px 0 -4px}
.ledger {display:grid;grid-template-columns:1fr auto;gap:6px 16px;margin:0;padding:12px 14px;border:1px solid rgb(var(--bone-32));border-radius:3px;background:rgb(var(--stone-15) / .55);font-size:14.5px}
.ledger dt {color:var(--muted)}
.ledger dd {margin:0;text-align:right;color:var(--green);font:600 15px Georgia,serif;font-variant-numeric:tabular-nums}
.ledger.lost {border-color:rgb(var(--blood-38));background:rgb(var(--stone-20) / .55)}
.ledger.lost dd {color:rgb(var(--ember-75))}
.welcome-events {list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px;line-height:1.5;color:rgb(var(--moss-87))}
.welcome-events:empty {display:none}
.welcome-events li:before {content:'◆';color:rgb(var(--gold-66));font-size:11px;margin-right:8px;vertical-align:2px}
/* The welcome back dialog (Lemp, 2026-09-29: "an actual eye catcher" with "everything in sight"): one screen,
   no scrolling for an ordinary return. A wide banner, then the haul on the left (Dark Energy banner, the three
   harvests, and every other stack as dense chips grouped by kind) and the night's news on the right (worldbosses,
   what the dark took, the premium pitch). Phones stack the two columns; the Rise again bar stays pinned. */
.welcome {width:min(1180px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:hidden;border-color:rgb(var(--gold-66));box-shadow:inset 0 1px rgb(var(--gold-87) / .19),0 0 0 1px rgb(var(--stone-0)),0 0 70px rgb(var(--moss-78) / .14),0 24px 80px rgb(var(--stone-0) / .93)}
.welcome[open] {display:flex}
.welcome::backdrop {background:radial-gradient(ellipse at 50% 30%,rgb(var(--stone-26) / .53),rgb(var(--stone-0) / .87) 70%)}
.welcome:before,.welcome:after {content:'';position:absolute;z-index:3;width:46px;height:46px;pointer-events:none;border:2px solid rgb(var(--gold-83));opacity:.7;filter:drop-shadow(0 0 5px rgb(var(--gold-83) / .4))}
.welcome:before {top:6px;left:6px;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.welcome:after {bottom:6px;right:6px;border-left:0;border-top:0;border-radius:0 0 6px 0}
.welcome form {display:flex;flex-direction:column;gap:0;padding:0;width:100%;min-height:0}
.welcome h2:focus {outline:none}
.welcome h3 {margin:0}
.welcome-hero {position:relative;isolation:isolate;flex:none;display:grid;align-content:end;justify-items:start;gap:4px;min-height:140px;padding:16px 30px 14px;overflow:hidden;border-bottom:1px solid rgb(var(--gold-46));
  background:linear-gradient(90deg,rgb(var(--stone-15)) 0%,rgb(var(--stone-15) / .95) 40%,rgb(var(--stone-15) / .33) 72%,rgb(var(--stone-15) / .06)),linear-gradient(0deg,rgb(var(--stone-17)) 0%,rgb(var(--stone-17) / 0) 50%),url('/assets/necromancer.jpg') right 18% / 44% auto no-repeat,rgb(var(--stone-15))}
.welcome-hero:after {content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgb(var(--gold-83)) 30%,rgb(var(--moss-83)) 60%,transparent)}
.welcome-hero .eyebrow {color:rgb(var(--moss-83));text-shadow:0 0 10px rgb(var(--moss-78) / .53)}
.welcome-hero h2 {font-size:38px;line-height:1.02;color:var(--gold-bright);text-shadow:0 2px 3px rgb(var(--stone-0)),0 0 26px rgb(var(--gold-83) / .4)}
.welcome-away {display:inline-flex;align-items:center;gap:8px;margin:4px 0 0;padding:4px 12px 4px 8px;border:1px solid rgb(var(--gold-55));border-radius:999px;background:rgb(var(--stone-15) / .8);color:var(--gold-bright);font:600 14px 'Segoe UI',sans-serif;letter-spacing:.3px}
.welcome-away .icon {width:16px;height:16px;color:rgb(var(--moss-83))}
#welcome-intro {max-width:62ch;margin:2px 0 0;font-size:14px;line-height:1.45;color:rgb(var(--bone-83));text-shadow:0 1px 2px rgb(var(--stone-0))}
.welcome-embers,.welcome-embers:before,.welcome-embers:after {position:absolute;inset:0;z-index:-1;pointer-events:none}
.welcome-embers {background:radial-gradient(circle at 18% 70%,rgb(var(--moss-88)) 0 1.5px,transparent 2.5px),radial-gradient(circle at 42% 40%,rgb(var(--moss-88)) 0 1px,transparent 2px),radial-gradient(circle at 63% 82%,rgb(var(--spirit-92)) 0 1.5px,transparent 2.5px),radial-gradient(circle at 85% 30%,rgb(var(--moss-88)) 0 1px,transparent 2px),radial-gradient(circle at 30% 20%,rgb(var(--gold-83)) 0 1px,transparent 2px);opacity:.75}
.welcome-embers:before {content:'';background:radial-gradient(circle at 10% 40%,rgb(var(--moss-88)) 0 1px,transparent 2px),radial-gradient(circle at 55% 65%,rgb(var(--gold-83)) 0 1.5px,transparent 2.5px),radial-gradient(circle at 78% 55%,rgb(var(--moss-88)) 0 1.5px,transparent 2.5px),radial-gradient(circle at 92% 88%,rgb(var(--spirit-92)) 0 1px,transparent 2px)}
.welcome-embers:after {content:'';background:radial-gradient(ellipse at 80% 35%,rgb(var(--moss-78) / .16),transparent 40%)}
.welcome-body {flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:grid;gap:16px;padding:18px 24px}
.welcome-main,.welcome-side {display:grid;align-content:start;gap:12px;min-width:0}
.welcome.quiet .welcome-side {display:none}
.welcome-foot {display:grid;gap:12px;min-width:0}
@media(min-width:880px) {
  .welcome-body {grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:18px 22px;padding:20px 28px}
  .welcome-side {padding-left:22px;border-left:1px solid rgb(var(--bone-32))}
  .welcome-foot {grid-column:1/-1}
  /* A quiet night has no news column: the haul takes the whole width. */
  .welcome.quiet .welcome-main {grid-column:1/-1}
  .welcome.quiet .welcome-haul {grid-template-columns:minmax(0,1.2fr) minmax(0,2fr)}
  .welcome.quiet .welcome-stats {grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .welcome.quiet .welcome-stats li {grid-template-columns:22px 1fr;grid-template-rows:auto auto;row-gap:0;align-content:center}
  .welcome.quiet .welcome-stats .icon {grid-row:1/3;width:24px;height:24px}
  .welcome.quiet .welcome-stats b {font-size:22px}
  .welcome.quiet .welcome-stats span {text-align:left}
  .welcome.quiet .welcome-loot {display:block;columns:2;column-gap:26px}
  .welcome.quiet .welcome-loot-group {break-inside:avoid;margin-bottom:8px}
  /* The premium pitch as a banner across the foot: the promise, the two perks, the button. */
  .welcome-pitch {grid-template-columns:minmax(0,1.15fr) minmax(0,2fr) auto;align-items:center;gap:2px 22px;padding:12px 20px}
  .welcome-pitch-perks li {font-size:13px;line-height:1.35}
  .welcome-pitch .eyebrow,.welcome-pitch-title {grid-column:1}
  .welcome-pitch-perks {grid-column:2;grid-row:1/3;grid-template-columns:1fr 1fr;gap:14px}
  .welcome-pitch-cta {grid-column:3;grid-row:1/3;align-self:center}
}
/* The haul: Dark Energy as a banner, the three harvests stacked beside it. */
.welcome-haul {display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:8px}
.welcome-haul.alone {grid-template-columns:1fr}
.welcome-de {position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;align-content:center;column-gap:14px;padding:14px 18px;border:1px solid rgb(var(--moss-64));border-radius:5px;
  background:radial-gradient(ellipse at 0 50%,rgb(var(--moss-59) / .33),transparent 65%),radial-gradient(ellipse at 100% 100%,rgb(var(--gold-83) / .08),transparent 50%),linear-gradient(rgb(var(--stone-26)),rgb(var(--stone-17)));box-shadow:inset 0 1px rgb(var(--moss-86) / .18),inset 0 0 28px rgb(var(--moss-78) / .11),0 0 22px rgb(var(--moss-78) / .1)}
.welcome-de .icon {grid-row:1/3;align-self:center;width:44px;height:44px;color:rgb(var(--moss-83));filter:drop-shadow(0 0 8px rgb(var(--moss-78) / .67))}
.welcome-de span {font:600 13px 'Segoe UI',sans-serif;letter-spacing:1.8px;text-transform:uppercase;color:rgb(var(--moss-83))}
.welcome-de b {font:600 34px/1.1 Georgia,serif;color:rgb(var(--moss-90));text-shadow:0 0 18px rgb(var(--moss-78) / .47);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.welcome-stats {list-style:none;margin:0;padding:0;display:grid;gap:6px;align-content:stretch}
.welcome-stats li {display:grid;grid-template-columns:22px auto 1fr;align-items:center;gap:8px;padding:6px 12px;border:1px solid rgb(var(--bone-32));border-radius:4px;background:linear-gradient(90deg,rgb(var(--stone-20)),rgb(var(--stone-17)))}
.welcome-stats .icon {width:20px;height:20px;color:var(--gold)}
.welcome-stats b {font:600 18px Georgia,serif;color:var(--green);font-variant-numeric:tabular-nums}
.welcome-stats span {font-size:13.5px;color:var(--muted);text-align:right;min-width:0;overflow-wrap:anywhere}
/* Every other stack: a row per kind, the kind's name on a gilt rule, chips that wrap. */
.welcome-loot {display:grid;gap:8px;margin-top:6px}
.welcome-loot-group {display:grid;gap:6px}
.welcome-loot-group h4 {display:flex;align-items:center;gap:10px;margin:0;font:600 12px 'Segoe UI',sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:rgb(var(--gold-66))}
.welcome-loot-group h4:after {content:'';flex:1;height:1px;background:linear-gradient(90deg,rgb(var(--gold-46) / .6),transparent)}
.welcome-loot-group ul,.welcome-losses,.welcome-tail-gains {list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.welcome-chip {display:inline-flex;align-items:center;gap:6px;min-width:0;padding:3px 10px 3px 4px;border:1px solid rgb(var(--bone-36));border-radius:999px;background:linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-17)));box-shadow:inset 0 1px rgb(var(--gold-87) / .08)}
.welcome-chip .icon,.welcome-chip img {flex:none;width:22px;height:22px;padding:2px;border-radius:50%;background:rgb(var(--stone-15));color:var(--gold)}
.welcome-chip b {font:600 15px Georgia,serif;color:var(--green);font-variant-numeric:tabular-nums}
.welcome-chip span {font-size:13px;color:rgb(var(--bone-77))}
.welcome-loot-group[data-kind="sigil"] .welcome-chip .icon {color:rgb(var(--arcane-78))}
.welcome .welcome-events {font-size:13.5px}
/* The night's news: worldbosses, losses and the pitch, each a compact card. */
.welcome-bosses {display:grid;gap:8px;padding:12px;border:1px solid rgb(var(--arcane-37));border-radius:5px;background:radial-gradient(ellipse at 50% 0,rgb(var(--blood-38) / .2),transparent 70%),rgb(var(--stone-17))}
.welcome-bosses h3 {font-size:13px;color:rgb(var(--ember-75))}
.welcome-bosses > p {margin:0;font-size:13.5px;line-height:1.4}
.welcome-boss-list {list-style:none;margin:0;padding:0;display:grid;gap:6px}
.welcome-boss {display:grid;grid-template-columns:40px 1fr auto;gap:4px 10px;align-items:center;padding:6px;border:1px solid rgb(var(--bone-32));border-radius:4px;background:rgb(var(--stone-15))}
.welcome-boss-scene {position:relative;isolation:isolate;grid-row:1/3;align-self:start;width:40px;height:40px;border-radius:3px;overflow:hidden;border:1px solid rgb(var(--bone-36));background:radial-gradient(ellipse at 50% 100%,rgb(var(--blood-27)),rgb(var(--stone-15)) 70%)}
.welcome-boss-scene:before {content:'';position:absolute;inset:0;z-index:-1;opacity:.6;background-size:cover;background-position:center}
.welcome-boss-scene[data-land="forgotten-graveyard"]:before {background-image:url('/assets/graveyard.svg')}
.welcome-boss-scene[data-land="abandoned-crypt"]:before {background-image:url('/assets/illustrations/abandoned-crypt.jpg')}
.welcome-boss-scene[data-land="old-mausoleum"]:before {background-image:url('/assets/reference/lair.jpg')}
.welcome-boss-scene[data-land="forsaken-battlefield"]:before {background-image:url('/assets/reference/battlefield.jpg')}
.welcome-boss-scene[data-land="spirit-hollow"]:before {background-image:url('/assets/reference/wasteland.jpg')}
.welcome-boss-scene[data-land="eclipse-rift"]:before {background-image:url('/assets/reference/ritual.jpg')}
.welcome-boss-scene span {position:absolute;left:50%;bottom:-5px;width:32px;height:32px;translate:-50% 0;border-radius:50% 50% 12% 12%;background:radial-gradient(circle at 38% 34%,rgb(var(--blood-67)) 0 1.5px,transparent 2.5px),radial-gradient(circle at 62% 34%,rgb(var(--blood-67)) 0 1.5px,transparent 2.5px),radial-gradient(ellipse at 50% 45%,rgb(var(--stone-15)) 55%,transparent 72%);filter:drop-shadow(0 0 6px rgb(var(--blood-53) / .53))}
.welcome-boss-body {display:contents}
.welcome-boss-body strong {grid-column:2;font:15.5px/1.2 Georgia,serif;color:rgb(var(--bone-96))}
.welcome-boss-body small {display:none}
.welcome-boss-body p {grid-column:2/4;margin:0;font-size:13px;line-height:1.4}
.welcome-boss-premium {display:flex;align-items:center;gap:6px;color:rgb(var(--arcane-82))!important}
.welcome-boss-premium .icon {width:14px;height:14px;flex:none;color:rgb(var(--arcane-78))}
.welcome-boss-badge {grid-column:3;grid-row:1;padding:2px 8px;border:1px solid rgb(var(--arcane-37));border-radius:999px;font:600 11.5px 'Segoe UI',sans-serif;letter-spacing:1px;text-transform:uppercase;white-space:nowrap;color:rgb(var(--blood-67));background:rgb(var(--stone-20))}
.welcome-boss[data-outcome="won"] {border-color:rgb(var(--gold-55));background:radial-gradient(ellipse at 100% 0,rgb(var(--gold-55) / .2),transparent 60%),rgb(var(--stone-17))}
.welcome-boss[data-outcome="won"] .welcome-boss-badge {color:var(--gold-bright);border-color:rgb(var(--gold-66));background:rgb(var(--stone-26));box-shadow:0 0 10px rgb(var(--gold-83) / .27)}
.welcome-boss[data-outcome="fought"] .welcome-boss-badge {color:rgb(var(--moss-86));border-color:rgb(var(--moss-49));background:rgb(var(--stone-20))}
.welcome-boss[data-outcome="quiet"] .welcome-boss-badge {color:var(--muted);border-color:rgb(var(--bone-32));background:rgb(var(--stone-20))}
.welcome-boss[data-outcome="missed"] .welcome-boss-scene {filter:grayscale(.6)}
.welcome-boss-more {font-size:13px;color:var(--muted);padding:0 4px}
.welcome .toll {display:grid;gap:6px;margin:0;padding:12px;border:1px solid rgb(var(--blood-38));border-left-width:1px;border-radius:5px;background:radial-gradient(ellipse at 0 0,rgb(var(--ember-48) / .16),transparent 60%),rgb(var(--stone-17))}
.welcome .toll h3 {font-size:13px;color:rgb(var(--ember-75))}
.welcome .toll p {margin:0;font-size:13.5px;line-height:1.4}
.welcome .toll .hint {padding:0;font-size:12.5px;line-height:1.4;color:rgb(var(--bone-62))}
/* The offline tail (schema 66): what the legions brought in at a fifth of their pace after the vigil. */
.welcome .toll.tail {border-color:rgb(var(--moss-64));background:radial-gradient(ellipse at 0 0,rgb(var(--moss-59) / .16),transparent 60%),rgb(var(--stone-17))}
.welcome .toll.tail h3 {color:rgb(var(--moss-83))}
.welcome-losses .welcome-chip {border-color:rgb(var(--blood-38));background:rgb(var(--stone-20))}
.welcome-losses .welcome-chip b {color:rgb(var(--ember-75))}
.welcome-losses .welcome-chip .icon {color:rgb(var(--ember-75))}
.welcome-pitch {position:relative;isolation:isolate;display:grid;gap:8px;padding:14px 16px;border:1px solid rgb(var(--arcane-62));border-radius:6px;overflow:hidden;
  background:radial-gradient(ellipse at 100% 0,rgb(var(--arcane-62) / .27),transparent 55%),radial-gradient(ellipse at 0 100%,rgb(var(--gold-83) / .12),transparent 50%),linear-gradient(rgb(var(--stone-26)),rgb(var(--stone-17)));box-shadow:inset 0 1px rgb(var(--arcane-90) / .2),0 0 28px rgb(var(--arcane-62) / .2)}
.welcome-pitch:before {content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 30%,rgb(var(--arcane-90) / .08) 45%,transparent 60%);background-size:250% 100%;background-position:120% 0}
.welcome-pitch .eyebrow {color:rgb(var(--arcane-78));font-size:12px}
.welcome-pitch-title {margin:0;font:19px/1.25 Georgia,serif;color:rgb(var(--arcane-90));text-shadow:0 0 18px rgb(var(--arcane-62) / .53)}
.welcome-pitch-perks {list-style:none;margin:0;padding:0;display:grid;gap:6px}
.welcome-pitch-perks li {display:grid;grid-template-columns:18px 1fr;gap:8px;align-items:start;font-size:13.5px;line-height:1.4;color:rgb(var(--arcane-90))}
.welcome-pitch-perks .icon {width:17px;height:17px;color:var(--gold-bright);margin-top:1px}
.welcome-pitch-cta {justify-self:start;padding:9px 18px;border:1px solid rgb(var(--gold-83));border-radius:4px;color:rgb(var(--stone-20));font:700 14.5px 'Segoe UI',sans-serif;letter-spacing:.4px;background:linear-gradient(rgb(var(--gold-87)),rgb(var(--gold-76)));box-shadow:inset 0 1px rgb(var(--stone-100) / .4),0 0 18px rgb(var(--gold-83) / .33),0 3px 8px rgb(var(--stone-0) / .67);transition:filter .15s,transform .15s}
.welcome-pitch-cta:hover {filter:brightness(1.1)}
.welcome-pitch-cta:active {filter:brightness(.85);box-shadow:inset 0 2px 5px rgb(var(--stone-0) / .6)}
.welcome .premium-note {font-size:13.5px}
.welcome .welcome-actions {flex:none;justify-content:center;margin:0;padding:12px 24px 14px;border-top:1px solid rgb(var(--bone-32));background:linear-gradient(rgb(var(--stone-17)),rgb(var(--stone-20)))}
.welcome .welcome-actions .primary {min-width:220px;padding:11px 28px;font-size:16px;letter-spacing:.6px;box-shadow:0 0 22px rgb(var(--gold-83) / .2)}
@media(prefers-reduced-motion:no-preference) {
  .welcome[open] {animation:welcome-rise .6s cubic-bezier(.2,.7,.2,1)}
  .welcome-embers {animation:welcome-drift 9s linear infinite}
  .welcome-embers:before {animation:welcome-drift 13s linear infinite reverse}
  .welcome-de b {animation:welcome-glow 3.5s ease-in-out infinite}
  .welcome-de:after {content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgb(var(--moss-97) / .1) 50%,transparent 65%);background-size:250% 100%;animation:welcome-sheen 4.5s ease-in-out infinite .4s;pointer-events:none}
  .welcome-loot-group,.welcome-stats li {animation:welcome-chips .5s .25s cubic-bezier(.2,.7,.2,1) backwards}
  .welcome-loot-group:nth-child(2) {animation-delay:.35s}
  .welcome-loot-group:nth-child(3) {animation-delay:.45s}
  .welcome-loot-group:nth-child(4) {animation-delay:.55s}
  .welcome-pitch:before {animation:welcome-sheen 5s ease-in-out infinite 1s}
  @keyframes welcome-rise {from {opacity:0;translate:0 18px;scale:.98}to {opacity:1;translate:0 0;scale:1}}
  @keyframes welcome-drift {from {translate:0 20px;opacity:.2}30% {opacity:.9}to {translate:0 -40px;opacity:0}}
  @keyframes welcome-glow {0%,100% {text-shadow:0 0 12px rgb(var(--moss-78) / .27)}50% {text-shadow:0 0 24px rgb(var(--moss-78) / .67)}}
  @keyframes welcome-sheen {0%,60% {background-position:120% 0}100% {background-position:-120% 0}}
  @keyframes welcome-chips {from {opacity:0;translate:0 6px}}
}
@media(max-width:600px) {
  .welcome {width:calc(100% - 16px);max-height:calc(100dvh - 16px)}
  .welcome:before,.welcome:after {width:30px;height:30px;top:4px;left:4px}
  .welcome:after {top:auto;left:auto;bottom:4px;right:4px}
  .welcome-hero {min-height:0;padding:14px 16px 10px;gap:1px;background-position:0 0,0 0,right -40px top 12%,0 0;background-size:auto,auto,62% auto,auto}
  .welcome-hero h2 {font-size:27px}
  .welcome-main > h3 {display:none}
  .welcome-hero .eyebrow {font-size:11px}
  .welcome-away {margin-top:2px;padding:2px 10px 2px 7px;font-size:13px}
  #welcome-intro {font-size:13px;max-width:none}
  .welcome-body {padding:12px 12px 14px;gap:12px}
  .welcome-main,.welcome-side {gap:10px}
  /* One banner: Dark Energy on top, the three harvests as a line along its foot. */
  .welcome-haul {grid-template-columns:1fr;gap:0;border:1px solid rgb(var(--moss-64));border-radius:5px;overflow:hidden;background:radial-gradient(ellipse at 0 40%,rgb(var(--moss-59) / .33),transparent 65%),linear-gradient(rgb(var(--stone-26)),rgb(var(--stone-17)));box-shadow:inset 0 1px rgb(var(--moss-86) / .18),0 0 22px rgb(var(--moss-78) / .1)}
  .welcome-de {padding:10px 14px 6px;column-gap:12px;border:0;border-radius:0;background:none;box-shadow:none}
  .welcome-de .icon {width:34px;height:34px}
  .welcome-de b {font-size:28px}
  .welcome-stats {display:flex;flex-wrap:wrap;gap:2px 14px;padding:6px 14px 8px;border-top:1px solid rgb(var(--moss-64) / .25);background:rgb(var(--stone-15) / .5)}
  .welcome-stats li {display:flex;align-items:center;gap:5px;padding:0;border:0;background:none}
  .welcome-stats .icon {width:16px;height:16px}
  .welcome-stats b {font-size:15px}
  .welcome-stats span {font-size:12px;text-align:left}
  .welcome-loot {gap:6px;margin-top:2px}
  .welcome-loot-group {gap:4px}
  .welcome-loot-group h4 {font-size:11px}
  .welcome-loot-group ul,.welcome-losses,.welcome-tail-gains {gap:4px}
  .welcome-chip {gap:4px;padding:1px 8px 1px 2px}
  .welcome-chip .icon,.welcome-chip img {width:18px;height:18px;padding:1px}
  .welcome-chip b {font-size:14px}
  .welcome-chip span {font-size:12px}
  .welcome-pitch {grid-template-columns:1fr auto;align-items:center;gap:4px 12px;padding:10px 12px}
  .welcome-pitch .eyebrow {grid-column:1/-1;font-size:11px}
  .welcome-pitch-title {font-size:14.5px;line-height:1.3}
  .welcome-pitch-perks {display:none}
  .welcome-pitch-cta {max-width:42vw;padding:7px 10px;font-size:13px;line-height:1.25}
  .welcome .welcome-actions {padding:10px 12px 12px}
  .welcome .welcome-actions .primary {width:100%}
}
}
.premium-note {margin:0;padding:10px 12px;border:1px dashed rgb(var(--arcane-50));border-radius:3px;background:rgb(var(--stone-20));color:rgb(var(--arcane-82));font-size:14px}
.premium-note b {color:rgb(var(--arcane-90))}
.briefing-actions {display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:6px}
.toast {position:fixed;left:calc(50% + (var(--chat-left,0px) - var(--chat-right,0px)) / 2);bottom:calc(28px + var(--chat-bottom,0px));transform:translateX(-50%);max-width:min(560px,90vw);border:1px solid rgb(var(--gold-66));background:linear-gradient(rgb(var(--bone-32)),rgb(var(--stone-20)));box-shadow:0 8px 40px rgb(var(--stone-0) / .6);color:rgb(var(--gold-87));padding:15px 22px;border-radius:4px;font-size:14.5px;z-index:20;text-align:center}
.error {color:rgb(var(--ember-75));font-size:14.5px;min-height:18px;margin:10px 0}
.loading {min-height:100vh;display:flex;gap:16px;align-items:center;justify-content:center;font:24px Georgia,serif;color:var(--gold)}
.auth-shell {display:grid;grid-template-columns:1.2fr 1fr;min-height:100vh}
.auth-art {background:linear-gradient(0deg,rgb(var(--stone-15)) 2%,rgb(var(--stone-15) / .13) 80%),url('/assets/necromancer.jpg') 70% center/cover;position:relative;border-right:1px solid rgb(var(--bone-36));min-height:700px}
.auth-art>div {position:absolute;bottom:10%;left:10%;text-shadow:0 2px 15px rgb(var(--stone-0))}
.auth-art .eyebrow {color:var(--gold)}
.auth-art h1 {font-size:50px;color:rgb(var(--gold-87));margin:16px 0}
.auth-art p {color:rgb(var(--bone-77));font-size:17px}
.auth-panel {max-width:430px;width:100%;padding:50px 38px;margin:auto}
.auth-panel .wordmark {display:block;font-size:32px;margin-bottom:65px}
.auth-panel .eyebrow {display:block;font-size:13px;color:var(--gold)}
.auth-panel h1,.auth-panel h2 {font-size:30px;margin:12px 0;color:rgb(var(--stone-88))}
.auth-panel>p {font-size:14.5px}
.auth-panel form {margin-top:28px}
.auth-panel label {display:block;font-size:14px;color:rgb(var(--bone-73));margin:19px 0 8px}
.auth-panel input {width:100%;padding:13px;border:1px solid rgb(var(--bone-40));background:rgb(var(--stone-20));color:rgb(var(--stone-88));border-radius:3px}
.auth-panel .primary {width:100%;padding:13px}
.auth-panel>.text-button {display:block;margin:23px auto 36px;color:var(--gold);font-size:14px}
.auth-promise {padding:20px 0;border-top:1px solid var(--line);display:flex;gap:16px;align-items:center}
.auth-promise .icon {color:var(--gold);width:28px;height:28px}
.auth-promise p {font-size:13.5px}
.auth-promise strong {font-weight:400;color:rgb(var(--bone-77))}
.sr-only {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(min-width:1600px) {.dominion-banner:before {background-size:auto 750px;background-position:right 29%}.hero-copy {padding-left:35px}.warrior-card>img {width:153px;height:180px}.warrior-card {min-height:180px}.warrior-info {padding-top:25px}.warrior-info h3 {font-size:24px}.panel-heading {padding:15px 18px}}
@media(max-width:1250px) {.game-shell {padding:14px 16px 0}.masthead {padding:15px;gap:16px}.brand-seal {display:none}.wordmark {font-size:23px}.wordmark small {font-size:11px;letter-spacing:2.5px}.resource {min-width:95px;gap:8px}.resource>.icon {width:22px}.resource strong {font-size:26px}.energy-resource strong {font-size:31px}.account {padding-left:15px;min-width:95px}.account strong {font-size:13.5px}.dashboard {gap:12px;grid-template-columns:minmax(0,1.07fr) minmax(0,1fr) minmax(0,.9fr)}.column {gap:12px}.panel-heading {padding:12px}.panel-heading h2 {font-size:18px}.panel-heading .eyebrow {font-size:11px}.warrior-card {gap:10px}.warrior-card>img {width:104px;height:162px}.warrior-info h3 {font-size:20px}.unit-stats {gap:8px}.purchase-block {padding:13px 12px 10px;gap:5px}.purchase-actions .primary {padding:9px 10px;font-size:14px}.owned {right:12px;bottom:10px}.owned strong {font-size:23px}.owned small {font-size:11px}.hero-caption {right:18px}.hero-actions small {font-size:12px}}
@media(max-width:1050px) {.dashboard {grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.journal-column {grid-column:1/-1;grid-template-columns:1fr 1fr;align-items:start}.connection {display:none}.account .label {display:none}.command-resource>.icon {display:none}.resource>.icon {display:none}.masthead {gap:20px}.brand .wordmark {font-size:23px}.resource {min-width:80px}.resource .label {font-size:12px}.resource strong {font-size:25px}.account {min-width:90px}.account strong {max-width:115px}.hero-caption {display:none}#step-copy {display:block;margin:4px 0 0}.dominion-banner:before {background-size:auto 610px}.hero-copy h1 {font-size:33px}.warrior-card>img {width:137px;height:171px}.warrior-info h3 {font-size:23px}.panel-heading h2 {font-size:20px}.panel-heading .eyebrow {font-size:12px}}
@media(max-width:720px) {html {scroll-padding-top:190px}.game-shell {padding:10px 10px 0}.masthead {display:grid;grid-template-columns:repeat(3,1fr);gap:17px 10px;padding:15px}.brand {grid-column:1/3}.brand .wordmark {font-size:25px}.account {grid-column:3;grid-row:1;padding-left:0;border:0;min-width:0}.account strong {max-width:110px}.resource {min-width:0;border-top:1px solid rgb(var(--bone-32));padding-top:10px;grid-row:2}.resource .label {font-size:11px;letter-spacing:1px}.resource strong,.energy-resource strong {font-size:26px}.resource strong em {font-size:16px}.resource small,.resource .rate-tip {font-size:13px}.nav-row {margin:10px 0 12px}nav {gap:5px}nav a {font-size:13.5px;padding:7px 10px}.dominion-banner {min-height:236px}.dominion-banner:before {background-size:auto 510px;background-position:66% 23%;opacity:.75}.dominion-banner:after {background:linear-gradient(90deg,rgb(var(--stone-17) / .98),rgb(var(--stone-17) / .83) 34%,rgb(var(--stone-17) / .19) 90%)}.hero-copy {padding:22px 19px}.hero-copy h1 {font-size:31px}.hero-copy .eyebrow {font-size:12px}.hero-actions {align-items:flex-start;flex-direction:column;gap:9px;margin-top:14px}.hero-actions small {display:none}.hero-actions strong {font-size:13px}.hero-actions .primary {padding:9px 13px}.next-step {padding:11px 10px;gap:9px;flex-wrap:wrap}.next-step>div {flex:1}.next-step strong {font-size:14px}#step-copy {font-size:13px}.next-step .small-button {font-size:13.5px;padding:8px}.dashboard {display:flex;flex-direction:column;gap:14px}.column {width:100%;gap:14px}.journal-column {display:grid;grid-template-columns:1fr}.warrior-card>img {width:135px;height:172px}.warrior-info {padding-top:22px}.warrior-info h3 {font-size:23px}.owned {bottom:15px;right:17px}.owned strong {font-size:30px}.owned small {font-size:11px}.purchase-block {padding:16px}.purchase-actions .primary {padding:10px 16px;font-size:14.5px}.altar-scene {height:120px}.ritual-circle {width:95px;height:95px}.panel-heading {padding:14px 16px}.panel-heading h2 {font-size:20px}.panel-heading .eyebrow {font-size:12px}.auth-shell {display:block}.auth-art {display:none}.auth-panel {min-height:100vh;padding:40px 28px}.auth-panel:before {content:'';position:fixed;inset:0;z-index:-1;background:linear-gradient(rgb(var(--stone-15) / .85),rgb(var(--stone-15) / .98)),url('/assets/necromancer.jpg') 70% top/auto 100vh no-repeat}.auth-panel .wordmark {margin-bottom:55px}footer {font-size:11px;flex-direction:column;gap:8px}.toast {font-size:14px;bottom:16px;padding:12px 16px}}
@media(max-width:720px) {.unit-row {grid-template-columns:42px minmax(0,1fr) auto;padding-bottom:30px}.unit-row .guardian-price {display:none}.unit-row .purchase-actions {grid-column:3;grid-row:1/3}.unit-lock {bottom:7px}}
@media(prefers-reduced-motion:no-preference) {html {scroll-behavior:smooth}.toast {animation:toast-in .2s ease-out}@keyframes toast-in {from {opacity:0;translate:0 10px}to {opacity:1;translate:0 0}}}

/* Etched resource ledger, bound to the viewport at every screen size. */
html {scroll-padding-top:calc(var(--hud-height, 180px) + 16px + var(--chat-top,0px))}
.game-shell {padding-top:calc(var(--hud-height, 180px) + 12px)}
.grave-hit-area {position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;z-index:2;cursor:pointer;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.grave-hit-area:focus-visible {outline:2px solid var(--gold-bright);outline-offset:-5px}

.harvest-land[data-land="forgotten-graveyard"]:before,.scene-tap[data-land="forgotten-graveyard"]:before,.reaper-art[data-land="forgotten-graveyard"]:before,.scene-note[data-land="forgotten-graveyard"]:before {background-image:url('/assets/graveyard.svg');background-size:cover;background-position:center}
.harvest-land[data-land="abandoned-crypt"]:before,.scene-tap[data-land="abandoned-crypt"]:before,.reaper-art[data-land="abandoned-crypt"]:before,.scene-note[data-land="abandoned-crypt"]:before {background-image:url('/assets/illustrations/abandoned-crypt.jpg');background-size:cover;background-position:center}
.harvest-land[data-land="old-mausoleum"]:before,.scene-tap[data-land="old-mausoleum"]:before,.reaper-art[data-land="old-mausoleum"]:before,.scene-note[data-land="old-mausoleum"]:before {background-image:url('/assets/reference/lair.jpg');background-size:cover;background-position:center}
.harvest-land[data-land="forsaken-battlefield"]:before,.scene-tap[data-land="forsaken-battlefield"]:before,.reaper-art[data-land="forsaken-battlefield"]:before,.scene-note[data-land="forsaken-battlefield"]:before {background-image:url('/assets/reference/battlefield.jpg');background-size:cover;background-position:center}
.harvest-land[data-land="spirit-hollow"]:before,.scene-tap[data-land="spirit-hollow"]:before,.reaper-art[data-land="spirit-hollow"]:before,.scene-note[data-land="spirit-hollow"]:before {background-image:url('/assets/reference/wasteland.jpg');background-size:cover;background-position:center}
.harvest-land[data-land="blood-marshes"]:before,.scene-tap[data-land="blood-marshes"]:before,.reaper-art[data-land="blood-marshes"]:before,.scene-note[data-land="blood-marshes"]:before,.battle-scene[data-land="blood-marshes"]:before {background-image:url('/assets/reference/ritual.jpg');background-size:cover;background-position:center}
.harvest-land[data-land="hollow-cathedral"]:before,.scene-tap[data-land="hollow-cathedral"]:before,.reaper-art[data-land="hollow-cathedral"]:before,.scene-note[data-land="hollow-cathedral"]:before,.battle-scene[data-land="hollow-cathedral"]:before {background-image:url('/assets/reference/altar.jpg');background-size:cover;background-position:center}
.harvest-land[data-land="weeping-fen"]:before,.scene-tap[data-land="weeping-fen"]:before,.reaper-art[data-land="weeping-fen"]:before,.scene-note[data-land="weeping-fen"]:before,.battle-scene[data-land="weeping-fen"]:before {background-image:url('/assets/reference/wasteland.jpg');background-size:cover;background-position:center bottom}
.harvest-land[data-land="gallows-hill"]:before,.scene-tap[data-land="gallows-hill"]:before,.reaper-art[data-land="gallows-hill"]:before,.scene-note[data-land="gallows-hill"]:before,.battle-scene[data-land="gallows-hill"]:before {background-image:none}
.harvest-land[data-land="warded-abbey"]:before,.scene-tap[data-land="warded-abbey"]:before,.reaper-art[data-land="warded-abbey"]:before,.scene-note[data-land="warded-abbey"]:before,.battle-scene[data-land="warded-abbey"]:before {background-image:url('/assets/reference/altar.jpg');background-size:cover;background-position:right center}
.harvest-land[data-land="pit-of-the-fallen"]:before,.scene-tap[data-land="pit-of-the-fallen"]:before,.reaper-art[data-land="pit-of-the-fallen"]:before,.scene-note[data-land="pit-of-the-fallen"]:before,.battle-scene[data-land="pit-of-the-fallen"]:before {background-image:url('/assets/reference/bones.jpg');background-size:cover;background-position:center}
.harvest-land[data-land="ashen-ramparts"]:before,.scene-tap[data-land="ashen-ramparts"]:before,.reaper-art[data-land="ashen-ramparts"]:before,.scene-note[data-land="ashen-ramparts"]:before,.battle-scene[data-land="ashen-ramparts"]:before {background-image:url('/assets/reference/kingdom.jpg');background-size:cover;background-position:left top}
.harvest-land[data-land="cinder-garrison"]:before,.scene-tap[data-land="cinder-garrison"]:before,.reaper-art[data-land="cinder-garrison"]:before,.scene-note[data-land="cinder-garrison"]:before,.battle-scene[data-land="cinder-garrison"]:before {background-image:url('/assets/reference/lava-golem.jpg');background-size:cover;background-position:center}
.harvest-land[data-land="kingdom-of-ash"]:before,.scene-tap[data-land="kingdom-of-ash"]:before,.reaper-art[data-land="kingdom-of-ash"]:before,.scene-note[data-land="kingdom-of-ash"]:before,.battle-scene[data-land="kingdom-of-ash"]:before {background-image:url('/assets/reference/kingdom.jpg');background-size:cover;background-position:center}
.dominion-banner.chapter-two[hidden] {display:none}
.dominion-banner.chapter-two h2 {margin:0;font:28px Georgia,serif;font-weight:400;color:rgb(var(--stone-88))}
.hero-copy h1 {max-width:480px}
.grave-reward {position:absolute;right:12%;top:35%;pointer-events:none;z-index:3;color:rgb(var(--moss-97));text-shadow:0 2px 8px rgb(var(--stone-0));font:20px Georgia,serif}
.unit-equipment {margin:0 12px 20px;border:1px solid rgb(var(--bone-36));border-left:3px solid rgb(var(--moss-59));background:rgb(var(--stone-17))}
.unit-equipment h4 {margin:0;padding:12px 16px;font:14.5px Georgia,serif;letter-spacing:1px;color:var(--gold)}
.unit-equipment .reinforcement:first-child {border-top:0}
.goal-tabs {display:flex;gap:1px;margin:12px 13px 2px;padding:3px;border:1px solid rgb(var(--stone-26));border-radius:2px;background:rgb(var(--stone-15));box-shadow:inset 0 1px 3px rgb(var(--stone-0)),0 1px 0 rgb(var(--stone-100) / .04)}
.goal-tabs button {position:relative;flex:1;padding:10px 8px 11px;border:0;border-radius:1px;background:linear-gradient(rgb(var(--stone-26)),rgb(var(--stone-20)));box-shadow:inset 0 1px rgb(var(--stone-100) / .07),inset 0 -1px rgb(var(--stone-0) / .67);color:rgb(var(--bone-69));font-size:14px;font-weight:600;letter-spacing:.3px;text-shadow:0 -1px 0 rgb(var(--stone-0)),0 1px 0 rgb(var(--stone-100) / .06)}
.goal-tabs button[aria-pressed="true"] {color:var(--gold-bright);background:radial-gradient(ellipse at 50% 135%,rgb(var(--gold-66) / .4),transparent 70%),linear-gradient(rgb(var(--bone-32)),rgb(var(--stone-20)));box-shadow:inset 0 1px rgb(var(--gold-87) / .24),inset 0 -2px rgb(var(--gold-66));text-shadow:0 0 10px rgb(var(--gold-87) / .35),0 1px 1px rgb(var(--stone-0))}
.goal-tabs span {margin-left:6px;color:var(--green);font-variant-numeric:tabular-nums}

@media(max-width:720px) {.hero-copy h1 {max-width:240px}.hero-actions small {display:block;max-width:260px}.unit-equipment {margin-inline:10px}}

/* One pinned ledger for resources and all quick-navigation links. */
.pinned-hud {position:fixed;top:var(--chat-top,0px);z-index:15;left:calc(50% + (var(--chat-left,0px) - var(--chat-right,0px)) / 2);transform:translateX(-50%);width:calc(100% - 48px - var(--chat-left,0px) - var(--chat-right,0px));max-width:1692px;background:rgb(var(--stone-15));box-shadow:0 8px 24px rgb(var(--stone-0) / .73)}
.pinned-hud .masthead {box-shadow:none}
.pinned-hud .nav-row {margin:0;padding:9px 0}
.pinned-hud nav {flex-wrap:nowrap;overflow-x:auto;min-width:0;scrollbar-width:thin;scrollbar-color:rgb(var(--gold-46)) rgb(var(--stone-17));padding:3px}
.pinned-hud nav a {flex-shrink:0}
.undead-card {border-bottom:1px solid rgb(var(--bone-40));margin-bottom:18px}
.undead-card .warrior-card {min-height:190px;gap:14px}
.undead-card .warrior-card>img {width:36%;height:190px;object-fit:cover;object-position:center 20%;flex-shrink:0}
.undead-card .warrior-info {padding:18px 12px 40px 0}
.undead-card .warrior-info h3 {font-size:23px}
.undead-card .unit-stats {flex-wrap:wrap;gap:8px 12px}
.undead-card .owned {bottom:10px;display:flex;align-items:baseline;gap:5px}
.undead-card .owned strong {font-size:24px}
.undead-card .purchase-block {display:block;padding:14px 14px 10px}
.undead-card .price {margin-bottom:12px}
.undead-card .price>small {display:block;margin-top:5px;font-size:13px;letter-spacing:0}
.undead-card .purchase-actions {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.undead-card .summon-choice {display:grid;grid-template-columns:auto auto;gap:4px;padding:9px 4px;min-width:0;white-space:normal}
.summon-choice [data-summon-cost] {grid-column:1/-1;font-size:12px;line-height:1.5;overflow-wrap:anywhere;color:rgb(var(--bone-77))}
.undead-card .unit-equipment {margin:0 14px 16px}
@media(max-width:1250px) {.pinned-hud {width:calc(100% - 32px)}}
@media(max-width:720px) {.pinned-hud {width:calc(100% - 20px)}.pinned-hud .nav-row {padding:5px 0}.undead-card .warrior-info h3 {font-size:22px}}

.roster-panel {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:16px;align-items:stretch}
.roster-panel>.panel-heading,.roster-panel>.legion-hall {grid-column:1/-1}
.roster-panel>.undead-card {margin:0;min-width:0;border-right:1px solid var(--line);display:flex;flex-direction:column}
.roster-panel>.undead-card:last-of-type {border-right:0}
.roster-panel .warrior-info {flex:1}
.roster-panel .unit-equipment {flex:1}
@media(max-width:1050px) {.roster-panel {grid-template-columns:1fr}.roster-panel>.undead-card {border-right:0}}

/* Souls join the etched ledger; four balances share its mobile row. */
.soul-resource strong,.soul-resource>.icon {color:var(--green)}
@media(max-width:720px) {
  .masthead {grid-template-columns:minmax(0,1.45fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.1fr);gap:12px 6px}
  .account {grid-column:3/5}
  .resource {gap:4px}
  .resource>.icon {display:none}
  .resource strong,.energy-resource strong {font-size:clamp(16px,calc(6.9vw - 5px),22px)}
  .resource strong em {font-size:.64em}
  .resource small,.resource .rate-tip {font-size:12px}
}

@media(min-width:721px) and (max-width:1050px) {
  .masthead {gap:10px;padding:12px}
  .resource {min-width:76px}
  .brand .wordmark {font-size:20px}
  .wordmark small {letter-spacing:1px}
  .account {min-width:80px;padding-left:8px}
}
.conquest-line {display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:9px;border-top:1px dashed rgb(var(--bone-32));font-size:13px;color:rgb(var(--bone-62));line-height:1.6}
.conquest-line b {color:rgb(var(--bone-77));font-weight:500;letter-spacing:.5px}
.conquest-line .met {color:rgb(var(--moss-76))}
.conquest-line .unmet {color:rgb(var(--ember-75))}
.conquest-line button {margin-left:auto;white-space:nowrap}
.conquest-line .conquest-help+button {margin-left:0}
.conquest-line.active b {color:rgb(var(--moss-87))}
/* The conquest muster: the legions to send, the host's stats against the land's needs, and the verdict. */
.conquest-line.host-muster {display:grid;gap:10px;align-items:stretch}
.host-head {display:flex;align-items:center;gap:10px}
.host-head>span {flex:1;min-width:0}
.host-legions {display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.host-legions .legion-label {margin:0 4px 0 0;font-size:11px;letter-spacing:1.3px;color:rgb(var(--bone-55));font-weight:600}
.conquest-line .host-chip, .endless-host-legions .host-chip {margin:0;display:inline-flex;align-items:center;gap:6px;height:auto;min-height:32px;padding:4px 10px;font:13px 'Segoe UI',sans-serif;white-space:nowrap;cursor:pointer}
.host-chip b {font:600 14px Georgia,serif;color:inherit;letter-spacing:0}
.host-chip[aria-pressed="false"] {border-style:dashed;color:rgb(var(--bone-55));background:rgb(var(--stone-17))}
.host-chip[aria-pressed="false"] b {color:rgb(var(--bone-55))}
.host-chip[aria-pressed="true"]::before {content:"✓";color:rgb(var(--moss-76));font-size:12px}
.host-chip small {font-size:11px;color:rgb(var(--ember-75))}
.host-chip:disabled {opacity:.55;cursor:default}
.host-chip.hurt {border-color:rgb(var(--ember-48))}
.host-stats {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.host-stat {display:grid;gap:2px;padding:8px 10px;border:1px solid rgb(var(--bone-32));border-left:3px solid rgb(var(--ember-75));border-radius:3px;background:rgb(var(--stone-17));line-height:1.3}
.host-stat.met {border-left-color:rgb(var(--moss-76))}
.host-stat-label {font-size:11px;letter-spacing:1.3px;color:rgb(var(--bone-55));font-weight:600}
.host-stat strong {font:17px Georgia,serif;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.host-stat strong small {font-size:13px;color:rgb(var(--bone-62))}
.host-stat progress {margin:4px 0 2px;height:4px}
.host-stat.short progress::-webkit-progress-value {background:linear-gradient(90deg,rgb(var(--blood-38)),rgb(var(--ember-75)))}
.host-stat.short progress::-moz-progress-bar {background:rgb(var(--ember-75))}
.host-stat-state {font-size:12px;font-weight:600}
.host-stat.met .host-stat-state {color:rgb(var(--moss-76))}
.host-stat.short .host-stat-state {color:rgb(var(--ember-75))}
.host-go {display:flex;align-items:center;gap:10px}
.host-verdict {flex:1;min-width:0;font-size:14px;font-weight:600;line-height:1.35}
.host-verdict.met {color:rgb(var(--moss-76))}
.host-verdict.short {color:rgb(var(--ember-75))}
.conquest-line .host-go button {margin-left:auto}
@media(max-width:560px) {
  .host-stats {gap:6px}
  .host-stat {padding:7px 8px}
  .host-stat strong {font-size:15px}
  .host-stat strong small {display:block;font-size:12px}}
.ritual {border-top:1px solid rgb(var(--bone-32));padding-top:12px}
.ritual-heading {display:flex;justify-content:space-between;align-items:center;margin:0 18px 6px}
.ritual-heading strong {font-size:13.5px;color:var(--gold-bright);font-weight:500;letter-spacing:1px}
.ritual-copy {font-size:13px;color:rgb(var(--bone-62));line-height:1.5;margin:0 18px 10px}
.ritual-stats {display:grid;grid-template-columns:repeat(2,1fr);gap:4px 12px;margin:0 18px 8px;font-size:12px;color:rgb(var(--bone-62));letter-spacing:.5px}
.ritual-stats b {font-size:14px;color:rgb(var(--bone-83));font-weight:500;margin-left:4px}
#ritual-stability {display:block;width:calc(100% - 36px);margin:0 18px 8px}
.ritual-automation {display:flex;align-items:center;gap:8px;margin:0 18px 10px;font-size:13px;color:rgb(var(--bone-73))}
.ritual-automation[hidden] {display:none}
.ritual-automation label {display:flex;align-items:center;gap:6px}
.ritual-automation select {margin-left:auto;background:rgb(var(--stone-20));color:rgb(var(--bone-83));border:1px solid rgb(var(--bone-36));font:inherit;padding:3px 6px}
.research-list {padding:4px 16px 14px}
.research-item {border-top:1px solid rgb(var(--bone-32));padding:12px 0 4px}
.research-item:first-child {border-top:0}
.research-item h3 {font-size:17px;color:rgb(var(--bone-83));margin:3px 0 2px}
.deathbind p small {color:rgb(var(--bone-62))}
.deathbind progress {width:100%;margin-top:4px}
.artifact-shelf {padding:12px 16px 14px;border-top:1px solid var(--line)}
.artifact-shelf h3 {font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:rgb(var(--bone-73));margin:0 0 8px}
.artifact-list {list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px}
.artifact-list li:not(.relic-note) {display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:7px 9px;border:1px solid var(--line);font-size:13.5px;color:rgb(var(--bone-83))}
.artifact-list li strong {color:var(--green)}
.artifact-list li small {grid-column:1/-1;color:rgb(var(--bone-62));font-size:13px}
.artifact-list li.perfect {border-color:rgb(var(--gold-66))}
.artifact-list li.perfect strong {color:rgb(var(--gold-83))}
.research-item p {font-size:13px;color:rgb(var(--bone-62));line-height:1.5;margin:0}
.research-item .research-next {color:rgb(var(--moss-76));margin-top:3px}
.territory-detail .legion-buttons {display:flex;gap:6px}
.relic-list {margin:0 18px 14px;display:grid;gap:6px}
.relic-row {display:flex;align-items:center;gap:8px;font-size:13.5px;color:rgb(var(--bone-77))}
.relic-row small {font-size:13px;color:rgb(var(--bone-62))}
.relic-row b {color:var(--gold-bright);font-weight:500}
.relic-row .relic-buttons {margin-left:auto;display:flex;gap:4px}
.relic-row button {font-size:13px;padding:3px 8px}
.relic-note {font-size:13px;color:rgb(var(--bone-62));line-height:1.5}
.territory-detail small.sigil-drops {color:rgb(var(--bone-73))}
.sigil-stash {padding:12px 15px;border-top:1px solid var(--line)}
.sigil-stash h3 {font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:rgb(var(--bone-73));margin:0 0 8px}
.sigil-list {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px}
.sigil-list li:not(.relic-note) {display:flex;justify-content:space-between;gap:8px;padding:6px 8px;border:1px solid var(--line);font-size:13px;color:rgb(var(--bone-83))}
.sigil-list li.rare {border-color:rgb(var(--gold-46))}
.sigil-list li strong {color:var(--green)}
#ritual-offering {background:rgb(var(--stone-20));color:rgb(var(--bone-83));border:1px solid rgb(var(--bone-36));font:inherit;font-size:13.5px;padding:0 6px;max-width:44%}
#ritual-offering[hidden] {display:none}
/* Ritual of Ascension: a live percentage that burns violet from 200% and blood-gold from 500%. */
.ritual-heading .ritual-mute {margin-left:auto;margin-right:12px;font-size:13px}
.ritual-percent {display:block;text-align:center;font-size:34px;font-weight:500;color:var(--gold-bright);letter-spacing:1px;margin:2px 18px 8px;transition:color .4s,text-shadow .4s}
.ritual-next {margin:0 18px 4px;font-size:12px;color:rgb(var(--bone-62));letter-spacing:.5px}
.ritual-pulse {display:block;width:calc(100% - 36px);height:4px;margin:0 18px 8px}
.altar-panel.ritual-burning .ritual-circle {box-shadow:0 0 34px rgb(var(--moss-73) / .27),inset 0 0 26px rgb(var(--moss-73) / .2)}
.altar-panel.ritual-empowered {border-color:rgb(var(--arcane-52));box-shadow:0 0 22px rgb(var(--arcane-52) / .2)}
.altar-panel.ritual-empowered .altar-scene {background:radial-gradient(ellipse at 50% 80%,rgb(var(--arcane-52) / .33),transparent 68%),linear-gradient(rgb(var(--stone-17)),rgb(var(--stone-20)))}
.altar-panel.ritual-empowered .ritual-circle {border-color:rgb(var(--arcane-67) / .67);box-shadow:0 0 40px rgb(var(--arcane-62) / .4),inset 0 0 30px rgb(var(--arcane-62) / .33)}
.altar-panel.ritual-empowered .ritual-circle>.icon {color:rgb(var(--arcane-82));filter:drop-shadow(0 0 12px rgb(var(--arcane-67) / .8))}
.altar-panel.ritual-empowered .ritual-percent,.altar-panel.ritual-empowered .ritual-heading strong {color:rgb(var(--arcane-82));text-shadow:0 0 14px rgb(var(--arcane-67) / .6)}
.altar-panel.ritual-empowered #ritual-claim {border-color:rgb(var(--arcane-62));background:linear-gradient(rgb(var(--arcane-37)),rgb(var(--stone-26)));color:rgb(var(--arcane-90))}
.altar-panel.ritual-ascendant {border-color:rgb(var(--ember-60));box-shadow:0 0 30px rgb(var(--ember-60) / .33)}
.altar-panel.ritual-ascendant .altar-scene {background:radial-gradient(ellipse at 50% 80%,rgb(var(--blood-53) / .47),transparent 70%),linear-gradient(rgb(var(--stone-17)),rgb(var(--stone-20)))}
.altar-panel.ritual-ascendant .ritual-circle {border-color:rgb(var(--gold-82) / .8);box-shadow:0 0 60px rgb(var(--ember-68) / .53),inset 0 0 36px rgb(var(--gold-82) / .4)}
.altar-panel.ritual-ascendant .ritual-circle>.icon {color:rgb(var(--bone-96));filter:drop-shadow(0 0 16px rgb(var(--ember-71) / .93))}
.altar-panel.ritual-ascendant .ritual-percent,.altar-panel.ritual-ascendant .ritual-heading strong {color:rgb(var(--gold-87));text-shadow:0 0 12px rgb(var(--ember-68) / .8),0 0 28px rgb(var(--ember-68) / .53)}
.altar-panel.ritual-ascendant #ritual-claim {border-color:rgb(var(--ember-71));background:linear-gradient(rgb(var(--blood-38)),rgb(var(--blood-27)));color:rgb(var(--bone-96))}
@media(prefers-reduced-motion:no-preference) {
  .altar-panel.ritual-burning .ritual-circle {animation:ritual-spin 12s linear infinite}
  .altar-panel.ritual-empowered .ritual-circle {animation:ritual-spin 6s linear infinite}
  .altar-panel.ritual-ascendant .ritual-circle {animation:ritual-spin 2.5s linear infinite}
  .altar-panel.ritual-ascendant .ritual-percent {animation:ritual-flare 1.2s ease-in-out infinite}
  @keyframes ritual-spin {to {rotate:360deg}}
  @keyframes ritual-flare {50% {text-shadow:0 0 20px rgb(var(--ember-71)),0 0 44px rgb(var(--ember-68) / .73);scale:1.06}}
}
/* Dark achievements and the Hall of the Damned. */
.achievement-list {display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,262px),1fr));gap:1px;margin:13px 13px 16px;border:1px solid rgb(var(--stone-26));background:rgb(var(--stone-15));box-shadow:0 0 0 3px rgb(var(--stone-17)),0 0 0 4px rgb(var(--stone-26))}
.achievement .rarity {font-size:11px;letter-spacing:1.8px;color:rgb(var(--bone-62))}
.achievement small {color:rgb(var(--bone-62))}
.achievement.earned h3 {color:var(--gold-bright)}
.achievement.earned small {color:rgb(var(--moss-87))}
.board-list {position:relative;display:grid;grid-template-columns:minmax(0,1fr) repeat(3,minmax(0,196px)) minmax(0,1fr);align-items:end;list-style:none;margin:12px 13px 0;padding:0}
.board-list li {grid-column:1/-1;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid rgb(var(--stone-26));font-size:14px;color:rgb(var(--bone-83))}
.board-list li:last-child {border-bottom:0}
.board-list li.you {color:var(--gold-bright)}
.board-list li b {font:600 14px Georgia,serif;color:rgb(var(--bone-83));text-align:right;font-variant-numeric:tabular-nums}
.board-list .board-rank {font:600 20px/1 Georgia,serif;color:var(--gold);text-align:right;text-shadow:0 1px 0 rgb(var(--stone-0)),0 0 10px rgb(var(--gold-78) / .25)}
.board-list .board-name {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-list .board-empty {display:block;grid-row:1;align-self:center;position:relative;z-index:1;padding:70px 18px;border:0;text-align:center;font:italic 16px/1.5 Georgia,serif;color:rgb(var(--bone-83));text-shadow:0 1px 8px rgb(var(--stone-0)),0 0 2px rgb(var(--stone-0))}
#board-you {margin:12px 13px 15px;padding:11px 14px;border:1px solid rgb(var(--stone-26));background:linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-17)));box-shadow:inset 0 1px 0 rgb(var(--stone-100) / .03);font-size:14px;color:rgb(var(--bone-69))}
.goal-tabs+.goal-tabs {margin-top:9px}
.board-season {padding:14px 18px 2px;font:italic 14.5px/1.5 Georgia,serif;color:rgb(var(--bone-69))}
.board-list button.board-name {min-width:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;text-decoration:underline dotted rgb(var(--gold-46));text-underline-offset:3px}
.board-list button.board-name:hover,.board-list button.board-name:focus-visible {color:var(--gold-bright)}
.board-last {margin:-3px 13px 15px;padding:0 2px;font:italic 14.5px/1.5 Georgia,serif;color:rgb(var(--bone-73))}
.profile #profile-realm {font:italic 15px/1.5 Georgia,serif;color:rgb(var(--bone-83));text-shadow:0 1px 4px rgb(var(--stone-0))}

/* Etched inventory ledger: one action reserves the entire stack. */
.offering-ledger {margin:0 14px 16px;border-top:1px solid rgb(var(--bone-40))}
.offering-ledger-heading {display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 0 8px}
.offering-ledger-heading h3 {font:700 18px Georgia,serif;color:var(--gold);margin:0}
.offering-ledger-heading>span {font-size:13.5px;color:var(--muted)}
.offering-columns,.offering-row {display:grid;grid-template-columns:minmax(0,1fr) 44px 65px 72px;gap:6px;align-items:center}
.offering-columns {font-size:12px;color:var(--muted);padding:6px 0;border-bottom:1px solid rgb(var(--bone-40))}
.offering-ledger .relic-list {padding:0;max-height:310px;overflow-y:auto}
.offering-note {margin:8px 0 0;color:rgb(var(--bone-77))}
.offering-row {padding:10px 0;border-bottom:1px solid rgb(var(--bone-40) / .33);font-size:14px}
.offering-name {display:flex;gap:7px;align-items:center;min-width:0;color:rgb(var(--bone-83))}
.offering-name .icon {width:19px;min-width:19px;height:22px;color:var(--gold)}
.offering-name .offering-art {width:30px;min-width:30px;height:30px;border:1px solid rgb(var(--gold-55));border-radius:3px}
.offering-name strong {font:700 14.5px Georgia,serif;overflow-wrap:anywhere}
.offering-count,.offering-worth {text-align:right;font-variant-numeric:tabular-nums}
.offering-worth {color:var(--gold)}
.offering-row button {padding:6px 4px;font-size:13.5px;color:rgb(var(--bone-77));border-color:rgb(var(--gold-46))}
.auto-targets {display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.auto-targets button {font-size:13.5px;padding:5px 7px}
.auto-targets [aria-pressed="true"] {color:var(--gold-bright);border-color:var(--gold);background:rgb(var(--bone-36))}
.ritual-automation {display:block}
.auto-restake {margin:8px 0 0;font-size:13px;color:rgb(var(--bone-73))}
.auto-restake[hidden] {display:none}
.auto-target-field {display:flex;align-items:center;gap:5px;margin-top:8px}
.auto-target-field input {width:84px;padding:5px 7px;background:rgb(var(--stone-20));color:var(--gold-bright);border:1px solid rgb(var(--bone-36));border-radius:3px;text-align:right;font-variant-numeric:tabular-nums}
.auto-target-field input:focus {outline:1px solid var(--gold);border-color:var(--gold)}
.auto-target-field button {font-size:13.5px;padding:5px 9px}
/* Guided tutorial: the elder necromancer's speech and a spotlight on the part being explained. */
.account-actions {display:flex;gap:12px;align-items:center}
.tutorial {position:fixed;inset:0;z-index:40}
.tutorial:not(.spotlit) {background:rgb(var(--stone-15) / .78)}
.tutorial-spotlight {position:fixed;display:none;border:1px solid var(--gold-bright);border-radius:5px;box-shadow:0 0 0 9999px rgb(var(--stone-15) / .76),0 0 26px rgb(var(--gold-78) / .33),inset 0 0 18px rgb(var(--gold-78) / .2);pointer-events:none}
.tutorial.spotlit .tutorial-spotlight {display:block}
.tutorial-card {position:fixed;left:50%;transform:translateX(-50%);width:min(560px,calc(100% - 32px));display:grid;grid-template-columns:104px minmax(0,1fr);gap:18px;padding:18px;border:1px solid rgb(var(--gold-55));border-radius:5px;background:linear-gradient(135deg,rgb(var(--bone-32) / .95),rgb(var(--stone-20) / .97) 62%);box-shadow:0 14px 50px rgb(var(--stone-0) / .87),inset 0 1px rgb(var(--gold-78) / .2)}
.tutorial-card[data-place=bottom] {bottom:24px}
.tutorial-card[data-place=top] {top:24px}
.tutorial-card[data-place=center] {top:50%;transform:translate(-50%,-50%)}
.tutorial-portrait {width:104px;height:124px;border:1px solid rgb(var(--gold-46));border-radius:4px;background:url('/assets/necromancer.jpg') -300px -30px/436px auto no-repeat rgb(var(--stone-15));box-shadow:inset 0 0 22px rgb(var(--stone-0) / .8),0 0 18px rgb(var(--moss-74) / .13)}
.tutorial-copy {display:flex;flex-direction:column;gap:8px;min-width:0}
.tutorial-copy .eyebrow {display:flex;justify-content:space-between;gap:10px;color:rgb(var(--gold-66))}
.tutorial-copy .eyebrow b {color:var(--muted);font-weight:600}
.tutorial-copy h2 {font-size:23px;color:var(--gold-bright)}
.tutorial-copy p {font-size:15px;color:var(--ink)}
.tutorial-actions {display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:6px}
.tutorial-actions .text-button {margin-right:auto;font-size:14px}
/* A step that asks for a tap is played: a finger taps the thing itself, and pressing it pops up what it paid. */
.tutorial-hit {position:fixed;padding:0;border:0;border-radius:5px;background:transparent;cursor:pointer}
.tutorial-hit:focus-visible {outline:2px solid var(--gold-bright);outline-offset:3px}
/* The guide holds the page still while it points at something, so a drifting spirit can be caught. */
body:has(> .tutorial:not([hidden])) .spirit {animation-play-state:paused}
/* The elder necromancer's gilded bone hand, rendered in Blender: --tip is where its fingertip sits in the box, which lands on the tap point. */
.tutorial-finger {--tip-x:28px;--tip-y:.4px;position:fixed;width:72px;height:104.3px;margin:calc(-1 * var(--tip-y)) 0 0 calc(-1 * var(--tip-x));pointer-events:none;filter:drop-shadow(0 4px 6px rgb(var(--stone-0) / .8))}
.tutorial-finger img {display:block;width:100%;height:100%;transform-origin:var(--tip-x) var(--tip-y)}
.tutorial-ripple {position:absolute;left:var(--tip-x);top:var(--tip-y);width:46px;height:46px;margin:-23px 0 0 -23px;border:2px solid rgb(var(--moss-86));border-radius:50%;box-shadow:0 0 10px rgb(var(--moss-74) / .53);opacity:0}
.tutorial-gain {position:fixed;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 18px;transform:translate(-50%,-50%);border:1px solid rgb(var(--gold-55));border-radius:5px;background:rgb(var(--stone-20) / .95);box-shadow:0 10px 30px rgb(var(--stone-0) / .8),0 0 26px rgb(var(--gold-78) / .27);pointer-events:none;text-align:center;white-space:nowrap}
.tutorial-gain strong {font-size:26px;color:rgb(var(--moss-86));text-shadow:0 0 14px rgb(var(--moss-78) / .53)}
.tutorial-gain small {font-size:13px;color:var(--muted)}
/* A reward on the way (the Grimoire's step harvests until a rank is learned) pops up without the prompt to go on. */
.tutorial-gain.brief small {display:none}
/* The popup keeps its own width wherever it sits (a fixed box near the right edge would otherwise shrink), and
   only a reward too long for the screen breaks onto a second line. */
.tutorial-gain {width:max-content;max-width:calc(100vw - 24px)}
.tutorial-gain strong {white-space:normal;text-wrap:balance}
@media(prefers-reduced-motion:no-preference) {
  .tutorial-finger img {animation:tutorial-tap 1.1s ease-in-out infinite}
  .tutorial-ripple {animation:tutorial-ripple 1.1s ease-out infinite}
  .tutorial-gain:not([hidden]) {animation:tutorial-gain .5s cubic-bezier(.2,1.6,.4,1) both}
  .tutorial.paid .tutorial-spotlight {animation:tutorial-flash .6s ease-out}
}
@keyframes tutorial-tap {0%,100% {transform:translateY(14px)} 40% {transform:translateY(0) scale(.94)} 55% {transform:translateY(1px) scale(.94)}}
@keyframes tutorial-ripple {0%,35% {opacity:0;transform:scale(.3)} 45% {opacity:.9;transform:scale(.4)} 100% {opacity:0;transform:scale(1.1)}}
@keyframes tutorial-gain {from {opacity:0;transform:translate(-50%,-20%) scale(.4)} to {opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes tutorial-flash {from {box-shadow:0 0 0 9999px rgb(var(--stone-15) / .76),0 0 60px rgb(var(--gold-87) / .67),inset 0 0 40px rgb(var(--gold-87) / .4)}}
@media(max-width:720px) {
  .tutorial-card {grid-template-columns:64px minmax(0,1fr);gap:12px;padding:14px;width:calc(100% - 20px)}
  .tutorial-card[data-place=bottom] {bottom:10px}
  .tutorial-card[data-place=top] {top:10px}
  .tutorial-portrait {width:64px;height:76px;background-position:-185px -18px;background-size:268px auto}
  .tutorial-copy h2 {font-size:20px}
  .tutorial-copy p {font-size:14.5px}
  .tutorial-actions {flex-wrap:wrap;gap:8px}
}

/* The legion hall: the shared command bar, a card per legion, and the muster that moves undead between them. */
.legion-hall {border-top:1px solid rgb(var(--bone-36));background:linear-gradient(rgb(var(--stone-17) / .93),rgb(var(--stone-15)));padding:16px}
[data-class=warrior] {--unit:rgb(var(--bone-77))}
[data-class=guardian] {--unit:rgb(var(--bone-83))}
[data-class=ranger] {--unit:rgb(var(--ember-71))}
[data-class=mage] {--unit:rgb(var(--arcane-72))}
.command-strip {margin-bottom:14px}
.legion-hall>.legion-wounds {margin:0 0 14px}
.command-strip .rarity {color:rgb(var(--bone-62));font-size:11px;letter-spacing:1.4px}
.command-split {font-size:13.5px;color:rgb(var(--bone-62));text-align:right}
.command-split b {color:rgb(var(--bone-83));font-weight:500;font-variant-numeric:tabular-nums}
.command-bar {display:flex;gap:4px;height:12px;margin-top:7px;padding:2px;background:rgb(var(--stone-15));border:1px solid rgb(var(--stone-26));border-radius:2px;box-shadow:inset 0 1px 3px rgb(var(--stone-0))}
.command-legion {display:flex;gap:1px;min-width:0;transition:width .5s ease-out}
.command-legion i {display:block;min-width:2px;background:var(--unit);opacity:.8;border-radius:1px}
.command-legion.legion-2 i {background:repeating-linear-gradient(135deg,rgb(var(--stone-0) / 0) 0 3px,rgb(var(--stone-0) / .47) 3px 5px),var(--unit)}
.legion-cards {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.legion-card {position:relative;display:flex;flex-direction:column;min-width:0;padding:14px 16px 10px;border:1px solid rgb(var(--bone-32));border-radius:3px;background:radial-gradient(ellipse at 0 0,rgb(var(--stone-26) / .25),transparent 60%),rgb(var(--stone-17));box-shadow:0 6px 18px rgb(var(--stone-0) / .4)}
.legion-card:before {content:'';position:absolute;inset:3px;border:1px solid rgb(var(--gold-78) / .07);pointer-events:none}
.legion-card-head {display:flex;align-items:center;gap:12px}
.legion-card-head h3 {font-size:20px;color:rgb(var(--gold-87))}
.legion-card-head .badge {margin-left:auto;align-self:flex-start}
.legion-numeral {flex-shrink:0;width:36px;height:40px;display:grid;place-items:center;font:17px Georgia,serif;color:var(--gold);background:linear-gradient(rgb(var(--gold-46)),rgb(var(--bone-32)));clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);position:relative}
.legion-numeral:before {content:'';position:absolute;inset:1px;background:radial-gradient(rgb(var(--stone-26)),rgb(var(--stone-17)));clip-path:inherit;z-index:-1}
.legion-numeral {isolation:isolate}
.legion-epithet,.legion-label {display:block;font-size:11px;letter-spacing:1.4px;color:rgb(var(--bone-55));font-weight:600;margin-top:3px}
.legion-post {display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:16px}
.legion-post>div:first-child strong {display:block;font:17px Georgia,serif;color:rgb(var(--bone-83));margin-top:3px}
.legion-yield {text-align:right}
.legion-yield strong {display:block;font:23px Georgia,serif;color:rgb(var(--moss-87));font-variant-numeric:tabular-nums;line-height:1}
.legion-yield small {font-size:13px;color:rgb(var(--bone-62))}
.legion-card progress {height:6px;margin-top:8px}
.legion-ranks {list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:6px}
.ranks-head {display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.ranks-head + .legion-ranks {margin-top:6px}
.ranks-head .legion-label {margin-top:0}
.legion-fill {font-size:13px;color:rgb(var(--bone-62));letter-spacing:.6px}
.legion-fill.full {color:rgb(var(--gold-76))}
.rank {display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:11px;align-items:center;padding:6px 10px 6px 7px;border:1px solid rgb(var(--stone-26));border-left:2px solid var(--unit);border-radius:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--unit) 13%,transparent),transparent 75%),rgb(var(--stone-15))}
.unit-portrait {display:block;object-fit:cover;object-position:center 18%;border:1px solid var(--unit);border-radius:2px;background:rgb(var(--stone-15));box-shadow:0 0 0 2px rgb(var(--stone-15)),0 2px 6px rgb(var(--stone-0) / .67);filter:saturate(.85)}
.rank .unit-portrait {grid-row:1/3;width:36px;height:45px}
.rank span {align-self:end;font-size:13.5px;color:rgb(var(--bone-77))}
.rank strong {grid-row:1/3;grid-column:3;font:22px Georgia,serif;color:var(--ink);font-variant-numeric:tabular-nums}
.rank small {align-self:start;margin-top:2px;font-size:12px;color:rgb(var(--bone-55));letter-spacing:.5px;line-height:1.4}
.rank em {color:rgb(var(--ember-75));font-style:normal}
.rank.empty {opacity:.45}
.rank.empty .unit-portrait {filter:grayscale(1)}
.legion-stats {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:10px;background:rgb(var(--stone-26));border:1px solid rgb(var(--stone-26));border-radius:2px;overflow:hidden}
.legion-stats span {display:flex;flex-direction:column;gap:2px;padding:6px 9px;background:rgb(var(--stone-17))}
.legion-stats small {font-size:11px;letter-spacing:1.2px;color:rgb(var(--bone-55));font-weight:600}
.legion-stats b {font-size:16px;color:rgb(var(--bone-83));font-weight:500;font-variant-numeric:tabular-nums}
.legion-card .legion-traits {font-size:13.5px;margin-top:10px}
.crypt-traits {font-size:13.5px;margin-top:10px}
.legion-foot {display:flex;justify-content:flex-end;margin-top:auto;padding-top:8px}
.legion-locked {flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;margin:14px 0 6px;padding:22px 14px;text-align:center;border:1px dashed rgb(var(--bone-32));background:repeating-linear-gradient(135deg,rgb(var(--stone-100) / .02) 0 6px,transparent 6px 12px)}
.legion-locked .icon {width:34px;height:34px;color:rgb(var(--gold-46))}
.legion-locked .legion-traits {margin:0;font-size:13.5px;max-width:280px}
.legion-locked button {white-space:nowrap}
.legion-muster {margin-top:14px;padding:12px 14px;border:1px solid rgb(var(--bone-32));border-radius:3px;background:rgb(var(--stone-17))}
.legion-muster h4 {margin:0;font:17px Georgia,serif;color:rgb(var(--bone-77));font-weight:400}
.legion-transfer {display:grid;margin-top:8px}
.muster-row {display:grid;grid-template-columns:150px 48px auto auto 48px;justify-content:center;align-items:center;gap:6px 10px;padding:6px 0;border-top:1px solid rgb(var(--stone-26))}
.muster-head {border-top:0;padding:0 0 2px;font-size:11px;letter-spacing:1.3px;color:rgb(var(--bone-55));font-weight:600;text-transform:uppercase}
.muster-head span {text-align:center}.muster-head .to-first {text-align:right}.muster-head .to-second {text-align:left}
.muster-name {display:flex;align-items:center;gap:8px;font-size:14px;color:rgb(var(--bone-77))}
.muster-name .unit-portrait {width:24px;height:30px}
.muster-count {text-align:center;font:19px Georgia,serif;color:var(--ink);font-variant-numeric:tabular-nums}
.transfer-buttons {display:flex;gap:4px}
.transfer-buttons.to-first {justify-content:flex-end}
.transfer-buttons button {font-size:13.5px;padding:5px 7px;min-width:40px;white-space:nowrap}
@media(max-width:720px) {
  .legion-hall {padding:14px 12px}
  .legion-cards {grid-template-columns:1fr}
  .legion-card {padding:14px 12px 10px}
  .legion-epithet {font-size:11px}
  .muster-row {grid-template-columns:30px auto auto 30px;justify-content:space-between;gap:6px}
  .muster-name {grid-column:1/-1}
  .muster-head>span:first-child {display:none}
  .transfer-buttons button {min-width:0;padding:6px 7px}
}
/* An ink-and-brass ledger within the existing grimoire, with open bracket corners. */
.binding-ledger {position:relative;margin:12px 0;padding:14px;background:linear-gradient(100deg,rgb(var(--stone-26) / .53),rgb(var(--stone-20) / .2));border-block:1px solid rgb(var(--gold-46))}
.binding-ledger::before,.binding-ledger::after {content:"";position:absolute;width:9px;height:9px;border:1px solid var(--gold-bright);pointer-events:none}
.binding-ledger::before {top:-1px;left:0;border-right:0;border-bottom:0}
.binding-ledger::after {bottom:-1px;right:0;border-left:0;border-top:0}
.binding-ledger .line {flex-wrap:wrap;gap:6px}
.binding-ledger strong {color:var(--gold-bright);font-family:Georgia,serif;letter-spacing:.08em}
.binding-ledger p,.binding-ledger span,.binding-gate {font-size:14.5px;color:var(--ink)}
.binding-ledger progress {width:100%;margin:8px 0}

.artifact-controls {grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.artifact-controls button {min-height:36px;white-space:normal;text-align:left}
#artifact-slots {display:grid;gap:10px;margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.artifact-list li small {font-size:14px;color:var(--muted)}

.patron-ledger {padding:14px 16px;border-top:1px solid var(--line)}
.patron-ledger h3 {font-family:Georgia,serif;color:var(--gold-bright);font-size:15px}
#patron-list {display:grid;gap:12px;margin:12px 0}
#patron-list>div {padding-left:10px;border-left:2px solid rgb(var(--gold-46))}
#patron-list p,#patron-list strong,#grave-luck {font-size:14.5px}
#patron-list p {color:var(--muted);margin:4px 0}
.collection .artifact-list {margin:8px 0;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.collection progress {width:100%;margin-top:4px}
.collection.locked h3 {color:rgb(var(--bone-69))}
.binding-controls {display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;font-size:13.5px;color:rgb(var(--bone-73))}
.binding-controls label {display:flex;align-items:center;gap:6px}
.binding-controls input {width:64px}
.binding-controls button {font-size:13.5px;padding:6px 9px}
.deathbind .bind-buttons {display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}

/* The Delve: a shared descent with a wager box beside it. */
.delve-panel {margin-top:16px}
.delve-panel>.panel-description {padding:12px 16px 0}
.delve-history {list-style:none;display:flex;flex-wrap:wrap;gap:5px;margin:0;padding:12px 16px 0}
.delve-chip {font-size:13.5px;padding:3px 8px;border-radius:10px;border:1px solid rgb(var(--bone-40));color:rgb(var(--bone-77));font-variant-numeric:tabular-nums;white-space:nowrap}
.delve-chip.magic {border-color:rgb(var(--arcane-50));color:rgb(var(--arcane-78))}
.delve-chip.rare {border-color:rgb(var(--moss-76));color:rgb(var(--gold-87))}
.delve-chip.mythic {border-color:rgb(var(--moss-64));color:rgb(var(--moss-84))}
.delve-chip.complete {border-color:var(--gold-bright);color:rgb(var(--stone-20));background:var(--gold-bright);font-weight:700}
.delve-body {display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:14px;padding:12px 16px 16px}
.delve-scene {position:relative;min-height:320px;border:1px solid rgb(var(--bone-36));border-radius:4px;overflow:hidden;background:rgb(var(--stone-15))}
.delve-scene canvas {position:absolute;inset:0;width:100%;height:100%;display:block}
.delve-overlay {position:absolute;left:0;right:0;top:34%;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;pointer-events:none;padding:0 12px}
.delve-overlay strong {font-family:Georgia,'Times New Roman',serif;font-size:42px;font-weight:400;color:var(--gold-bright);text-shadow:0 2px 12px rgb(var(--stone-0)),0 0 20px rgb(var(--gold-78) / .33);font-variant-numeric:tabular-nums;letter-spacing:1px}
.delve-overlay span {font-size:14px;letter-spacing:2px;color:rgb(var(--stone-88));text-shadow:0 1px 6px rgb(var(--stone-0));font-weight:600}
.delve-overlay em {font-size:14.5px;color:rgb(var(--bone-83));text-shadow:0 1px 6px rgb(var(--stone-0));max-width:420px}
.delve-scene[data-phase="ended"] .delve-overlay strong {color:rgb(var(--ember-60));font-size:34px;text-shadow:0 2px 14px rgb(var(--stone-0)),0 0 22px rgb(var(--blood-53) / .53);text-transform:uppercase}
.delve-scene.complete .delve-overlay strong {color:rgb(var(--gold-87));text-shadow:0 0 14px rgb(var(--ember-68) / .8),0 0 30px rgb(var(--ember-68) / .53)}
.delve-scene[data-phase="betting"] .delve-overlay strong {font-size:56px}
.delve-bet {display:flex;flex-direction:column;gap:8px;min-width:0}
.delve-bet label,.delve-bet .line span {font-size:13px;letter-spacing:1.5px;color:var(--muted);font-weight:600}
.delve-bet .line {display:flex;justify-content:space-between;align-items:center}
.delve-amount,.delve-target {display:flex;gap:5px;align-items:center}
.delve-amount input,.delve-target input {flex:1;min-width:0;padding:8px 9px;background:rgb(var(--stone-20));color:var(--gold-bright);border:1px solid rgb(var(--bone-36));border-radius:3px;text-align:right;font-variant-numeric:tabular-nums}
.delve-target input {max-width:110px;flex:0 1 110px}
.delve-amount .secondary {padding:8px 9px}
.delve-auto {display:flex;align-items:center;gap:6px;text-transform:none;letter-spacing:0!important;font-size:14.5px!important;color:var(--ink)!important;font-weight:400!important}
.delve-bet .primary {width:100%;padding:12px}
.delve-bet .primary.cash-out {border-color:rgb(var(--moss-59));background:linear-gradient(rgb(var(--moss-44)),rgb(var(--bone-32)));color:rgb(var(--moss-97))}
.delve-status {min-height:18px;font-size:14.5px;color:var(--ink)}
.delve-bet h3 {font-size:15px;color:var(--gold);margin-top:4px}
.delve-bettors {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;max-height:170px;overflow:auto}
.delve-bettors li {display:grid;grid-template-columns:minmax(0,1fr) auto 86px;gap:8px;font-size:14px;padding:4px 6px;background:rgb(var(--stone-17));border-radius:2px;font-variant-numeric:tabular-nums}
.delve-bettors li span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.delve-bettors li.you {outline:1px solid rgb(var(--gold-46))}
.delve-bettors li em {font-style:normal;text-align:right;color:var(--muted)}
.delve-bettors li em.out {color:var(--green)}
.delve-bettors li em.lost {color:rgb(var(--ember-60))}
.delve-bettors li.empty {display:block;color:var(--muted)}
.delve-record,.delve-note {font-size:14px}
.delve-locked {font-size:14.5px;color:rgb(var(--gold-78));border:1px solid rgb(var(--gold-46));padding:8px;border-radius:3px}
@media(max-width:900px) {.delve-body {grid-template-columns:1fr}.delve-scene {min-height:260px}}
@media(max-width:720px) {.delve-overlay strong {font-size:34px}.delve-scene[data-phase="ended"] .delve-overlay strong {font-size:24px}.delve-panel>.panel-description {font-size:14.5px}}
/* Schema 31: up to five legion cards, each with a farming route of numbered dropdowns. */
.legion-extra {display:contents}
.command-legion.legion-3 i {background:repeating-linear-gradient(45deg,rgb(var(--stone-0) / 0) 0 3px,rgb(var(--stone-0) / .47) 3px 5px),var(--unit)}
.command-legion.legion-4 i {background:repeating-linear-gradient(90deg,rgb(var(--stone-0) / 0) 0 3px,rgb(var(--stone-0) / .53) 3px 4px),var(--unit)}
.command-legion.legion-5 i {background:radial-gradient(rgb(var(--stone-0) / .53) 1px,rgb(var(--stone-0) / 0) 1.5px) 0 0/4px 4px,var(--unit)}
.command-legion.legion-6 i {background:repeating-linear-gradient(0deg,rgb(var(--stone-0) / 0) 0 3px,rgb(var(--stone-0) / .53) 3px 4px),var(--unit)}
.command-legion.legion-7 i {background:repeating-linear-gradient(45deg,rgb(var(--stone-0) / .47) 0 1px,rgb(var(--stone-0) / 0) 1px 4px),repeating-linear-gradient(135deg,rgb(var(--stone-0) / .47) 0 1px,rgb(var(--stone-0) / 0) 1px 4px),var(--unit)}
.legion-route {margin-top:12px;padding-top:10px;border-top:1px solid rgb(var(--stone-26))}
.route-head,.route-foot {display:flex;align-items:center;justify-content:space-between;gap:10px}
.route-slots {font-size:13px;color:rgb(var(--bone-62));letter-spacing:.6px}
.route-list {list-style:none;margin:8px 0;padding:0;display:grid;gap:6px}
.route-stop {display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:6px 8px;padding:6px 8px;border:1px solid rgb(var(--stone-26));border-radius:3px;background:rgb(var(--stone-17))}
.route-stop.next {border-color:rgb(var(--gold-46));box-shadow:inset 3px 0 var(--gold)}
.route-num {font:15px Georgia,serif;color:var(--gold);text-align:center}
.route-stop select {min-width:0;width:100%;font:14.5px Georgia,serif;color:rgb(var(--gold-87));background:rgb(var(--stone-20));border:1px solid rgb(var(--gold-46));border-radius:3px;padding:6px 26px 6px 8px;appearance:none;background-image:linear-gradient(45deg,rgb(var(--stone-0) / 0) 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,rgb(var(--stone-0) / 0) 50%);background-position:calc(100% - 13px) 50%,calc(100% - 8px) 50%;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer}
.route-stop select:disabled {opacity:.5;cursor:not-allowed}
.route-stop option {background:rgb(var(--stone-20));color:rgb(var(--gold-87))}
.route-tags {grid-column:2/-1;grid-row:2;display:flex;flex-wrap:wrap;gap:4px}
.route-tag {display:inline-flex;align-items:center;gap:4px;font-size:11px;letter-spacing:.8px;font-weight:600;color:rgb(var(--bone-69));border:1px solid rgb(var(--bone-32));border-radius:2px;padding:2px 5px;background:rgb(var(--stone-20))}
.route-tag.rare {color:rgb(var(--arcane-78));border-color:rgb(var(--arcane-37))}
.route-tag.material {color:rgb(var(--gold-87));border-color:rgb(var(--gold-55));background:rgb(var(--stone-26))}
.route-tag.material.sealed {color:rgb(var(--bone-55));border-color:rgb(var(--bone-32));background:rgb(var(--stone-20))}
.route-tag.material.sealed img {filter:grayscale(1) brightness(.6)}
.route-tag img {width:14px;height:14px}
.route-remove {grid-column:3;grid-row:1;width:26px;height:26px;border:1px solid rgb(var(--bone-36));border-radius:3px;background:rgb(var(--stone-20));color:rgb(var(--bone-73));font-size:16px;line-height:1}
.route-remove:hover:not(:disabled) {border-color:var(--gold);color:var(--gold-bright)}
.route-note {font-size:13px;color:rgb(var(--bone-62));line-height:1.4}
.route-add {padding:6px 10px;font-size:13.5px}
.muster-pick {display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:8px}
.muster-side {display:inline-flex;align-items:center;gap:5px}
.muster-chip {min-width:32px;height:28px;border:1px solid rgb(var(--bone-36));border-radius:3px;background:rgb(var(--stone-20));color:rgb(var(--bone-69));font:14.5px Georgia,serif}
.muster-chip[aria-pressed="true"] {border-color:var(--gold);color:var(--gold-bright);background:linear-gradient(rgb(var(--bone-36)),rgb(var(--stone-26)))}
.territory-detail .legion-buttons {flex-wrap:wrap;justify-content:flex-end}
.territory-detail .legion-buttons .secondary {padding:6px 8px;font-size:13.5px}
.sigil-drops b {color:rgb(var(--gold-87));font-weight:600}
.sigil-drops b.sealed {color:rgb(var(--bone-62))}
/* The Summoning Altar */
.summoning-panel .panel-description {padding:0 18px}
.material-list {list-style:none;margin:12px 18px 4px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:6px}
.material-list li {display:flex;align-items:center;gap:6px;padding:6px;border:1px solid rgb(var(--bone-36));border-radius:3px;background:rgb(var(--stone-20));min-width:0}
.material-list li.empty {opacity:.55}
.material-list li.empty img {filter:grayscale(1)}
.material-list span {display:flex;flex-direction:column;min-width:0}
.material-list small {font-size:11px;letter-spacing:.5px;color:rgb(var(--bone-62));overflow-wrap:anywhere}
.material-list b {font:18px Georgia,serif;color:var(--gold-bright);font-weight:400;font-variant-numeric:tabular-nums}
.item-image {width:28px;height:28px;flex-shrink:0}
.forge-light {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 18px 0;padding:10px 12px;border:1px solid rgb(var(--bone-36));border-radius:3px;background:radial-gradient(ellipse at 100% 50%,rgb(var(--blood-38) / .25),transparent 60%),rgb(var(--stone-17));font-size:13.5px;color:rgb(var(--bone-83))}
.forge-light[hidden] {display:none}
.material-list.forge-materials {grid-template-columns:repeat(2,minmax(0,1fr))}
.golem-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:10px;padding:10px 18px 6px}
.golem-card {display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;padding:10px;border:1px solid rgb(var(--bone-32));border-radius:3px;background:rgb(var(--stone-17))}
.golem-card img {width:72px;height:90px;object-fit:cover;border-radius:2px;filter:saturate(.8)}
.golem-card h3 {margin:2px 0;font:19px Georgia,serif;font-weight:400;color:rgb(var(--stone-88))}
.golem-card p {margin:0;font-size:13px;color:rgb(var(--bone-69));line-height:1.4}
.golem-card .unit-stats {flex-wrap:wrap;gap:6px 10px;margin-top:8px}
.golem-card .golem-price {grid-column:1/-1;display:flex;flex-direction:column;gap:2px;font-size:13px;color:rgb(var(--bone-83))}
.golem-card .golem-price span {display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.golem-card .golem-price .item-image {width:16px;height:16px}
.golem-card .golem-price small {color:rgb(var(--bone-62));font-size:12px}
.golem-card>button {grid-column:1/-1;white-space:normal;overflow-wrap:anywhere}
.golem-anvil {display:grid;gap:6px;margin:6px 18px 0;padding:10px 12px;border:1px solid rgb(var(--blood-38));border-radius:3px;background:rgb(var(--stone-20));font-size:13.5px;color:rgb(var(--gold-78))}
.golem-anvil[hidden] {display:none}
.golem-anvil progress {width:100%;height:5px}
.golem-roster-title {margin:14px 18px 6px;font:15px Georgia,serif;font-weight:400;color:rgb(var(--bone-83))}
.golem-roster {list-style:none;margin:0 18px 16px;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.golem-roster li {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 10px;padding:6px 8px;border:1px solid rgb(var(--bone-32));border-radius:3px;background:rgb(var(--stone-17));font-size:13.5px}
.golem-roster li>span {display:flex;align-items:center;gap:8px}
.golem-roster li b {font:16px Georgia,serif;font-weight:400;color:rgb(var(--stone-88))}
.golem-roster small {color:rgb(var(--bone-62));font-size:12px}
.golem-legions {display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-left:auto}
.golem-name {display:flex;flex-direction:column;gap:2px}
.golem-name .unit-stats {margin-top:2px;gap:8px}
.golem-ability {color:rgb(var(--bone-77))}
.golem-ability b {font:inherit;color:var(--gold-bright)}
.golem-dust {color:rgb(var(--moss-87))}
/* The Revival Pit (schema 60): each Revived monster in its own niche over the pit, drawn at the end of this sheet. */
.golem-roster .golem-upgrade {flex-basis:100%;font-size:13.5px;padding:6px 8px;white-space:normal;text-align:left}
.golem-roster .golem-max {flex-basis:100%;color:var(--gold-bright)}
.golem-roster .relic-note {border:0;background:none;padding:0}
[data-class=golem] {--unit:rgb(var(--spirit-76))}
/* A boss shows its painted drop, framed like a Deathbinding rite (Lemp, 2026-09-27). */
.summoning-panel .panel-heading h2 {display:flex;align-items:center}
/* The Reliquary's trophy room: grey until found, framed in gold once it is yours. */
.trophy-room {padding:4px 18px 18px}
.trophy-room h3 {display:flex;align-items:baseline;justify-content:space-between;font-size:16px;color:rgb(var(--bone-77));margin:14px 0 8px;letter-spacing:.5px}
.trophy-room h3 small {font:13.5px 'Segoe UI',Arial,sans-serif;color:var(--gold)}
.trophy-grid {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px}
.trophy-large {grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.trophy {display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px 8px;text-align:center;border:1px solid rgb(var(--stone-26));border-radius:4px;background:rgb(var(--stone-17));min-width:0}
.trophy img,.trophy-glyph {filter:grayscale(1) brightness(.45);opacity:.7}
.trophy-glyph .icon {width:34px;height:34px;color:rgb(var(--gold-46))}
.trophy-name {font-size:13px;color:rgb(var(--bone-55));line-height:1.3;overflow-wrap:anywhere}
.trophy small {font-size:12px;color:rgb(var(--gold-46))}
.trophy.found {border-color:rgb(var(--gold-76));background:radial-gradient(ellipse at 50% 30%,rgb(var(--gold-46) / .33),transparent 70%),rgb(var(--stone-20));box-shadow:0 0 0 1px rgb(var(--gold-78) / .25),0 0 14px rgb(var(--gold-76) / .2)}
.trophy.found img,.trophy.found .trophy-glyph {filter:none;opacity:1}
.trophy.found .trophy-glyph .icon {color:var(--gold-bright)}
.trophy.found .trophy-name {color:rgb(var(--gold-87))}
.trophy.found small {color:var(--gold-bright);font-weight:600}
.collection-list {display:grid;gap:10px}
.collection {padding:10px;border:1px solid rgb(var(--stone-26));border-radius:3px}
.collection.complete {border-color:rgb(var(--gold-55))}
.collection.locked {opacity:.55}
.collection h4 {margin:0;font:15px Georgia,serif;color:rgb(var(--bone-77));font-weight:400}
.collection .relic-note {font-size:13px;margin:6px 0 0}
.collection progress {height:4px;margin-top:4px;width:100%}
@media(max-width:720px) {
  .material-list {margin-inline:12px}
  .material-list.forge-materials {grid-template-columns:repeat(2,minmax(0,1fr))}
  .forge-light {margin-inline:12px;flex-wrap:wrap}
  .golem-grid {grid-template-columns:minmax(0,1fr);padding-inline:12px}
  .golem-anvil {margin-inline:12px}
  .golem-roster-title {margin-inline:12px}
  .golem-roster {margin-inline:12px}
  .trophy-room {padding:4px 12px 14px}
  .trophy-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
  .summoning-panel .panel-description {padding:0 12px}
}

/* Siege Works: stage progress under a sealed branch land. */
.siege-progress {display:block;width:calc(100% - 32px);height:5px;margin:0 16px 12px;accent-color:rgb(var(--gold-66))}

/* Restless Spirits: a wisp over the haunted land, and the coffin hunt it may lead to. */
.spirit {position:absolute;z-index:3;width:54px;height:54px;margin:-27px 0 0 -27px;border:0;border-radius:50%;padding:0;cursor:pointer;
  background:radial-gradient(circle,rgb(var(--stone-100) / .93) 0 14%,rgb(var(--spirit-89) / .67) 30%,rgb(var(--spirit-69) / .27) 55%,transparent 70%);box-shadow:0 0 24px 8px rgb(var(--spirit-89) / .33)}
.spirit span {position:absolute;inset:18px;border-radius:50%;background:rgb(var(--stone-100));opacity:.85}
.spirit:hover {filter:brightness(1.3)}
@media(prefers-reduced-motion:no-preference) {.spirit {animation:spirit-drift 3.2s ease-in-out infinite}@keyframes spirit-drift {0%,100% {translate:0 0;opacity:.85}50% {translate:14px -10px;opacity:1}}}
.coffin-grid {--coffin:112px;display:grid;grid-template-columns:repeat(3,var(--coffin));gap:10px 20px;justify-content:center;margin:0}
/* A coffin is its painting (the crypt section at the end of this file): no box, no border, just the object. */
.coffin {position:relative;display:block;width:var(--coffin);aspect-ratio:120/190;padding:0;border:0;border-radius:0;background:none;color:var(--gold-bright);font:inherit;-webkit-tap-highlight-color:transparent}
.coffin:disabled {opacity:1;filter:none;cursor:default}
.coffin.opened {cursor:default}
/* The Coffin Hunt's panel on the Games tab: the same coffins, played in place in a torchlit crypt. */
.coffins-panel>.panel-description {padding:12px 16px 0}
.coffins-copy {margin:0;padding:10px 16px 0;color:var(--gold-bright);font:15px/1.5 Georgia,'Times New Roman',serif;text-shadow:0 1px 3px rgb(var(--stone-0))}
.coffins-panel .coffin-grid {margin:0}
/* Every game spans the Games tab's full width. */
.view-games .view-grid>.coffins-panel {grid-column:1/-1}
.coffin-grid.waiting .coffin {cursor:default}
.coffins-hint {margin:0;padding:0 16px 14px;color:rgb(var(--bone-69));font-size:14px}
.coffins-hint .text-button {font-size:inherit}
.coffins-auto {display:flex;align-items:center;justify-self:center;gap:9px;font-size:14px;color:rgb(var(--bone-77));cursor:pointer;text-shadow:0 1px 3px rgb(var(--stone-0))}

/* The harvest banner (schema 34): one panel per held land, split side by side. */
.dominion-banner {display:flex;flex-direction:column}
.dominion-banner:after {background:linear-gradient(0deg,rgb(var(--stone-15) / .95) 0%,rgb(var(--stone-15) / .69) 45%,rgb(var(--stone-17) / .25) 100%)}
.banner-head {padding:18px 26px 12px;position:relative;z-index:1}
.banner-head h1 {font-size:28px;line-height:1.1;color:rgb(var(--stone-88));margin:8px 0 6px;text-shadow:0 2px 8px rgb(var(--stone-0))}
.banner-head p {font-size:14px;color:rgb(var(--bone-73));max-width:560px}
.banner-head .eyebrow {color:rgb(var(--bone-73));font-size:13px}
.banner-head .eyebrow span {font-size:11px;margin:0 10px;color:rgb(var(--gold-55))}
.harvest-lands {display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:1px;flex:1;min-height:150px;background:rgb(var(--bone-40));border-top:1px solid rgb(var(--bone-40))}
.harvest-land {position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;min-height:150px;padding:14px 16px;border:0;border-radius:0;background:rgb(var(--stone-17));color:inherit;text-align:left;cursor:pointer;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.harvest-land:before {content:'';position:absolute;inset:0;z-index:-2;opacity:.8;transition:opacity .2s,transform .4s}
.harvest-land:after {content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgb(var(--stone-15) / .96) 0%,rgb(var(--stone-15) / .66) 45%,rgb(var(--stone-15) / .13) 100%)}
.harvest-land:hover:before,.harvest-land:focus-visible:before {opacity:1;transform:scale(1.03)}
.harvest-land:active {box-shadow:inset 0 0 0 2px var(--green)}
.harvest-land:focus-visible {outline:2px solid var(--gold-bright);outline-offset:-4px}
.harvest-land[aria-disabled="true"] {cursor:default}
.harvest-land[aria-disabled="true"]:before {opacity:.5}
.harvest-land.open:before {opacity:.8}
.harvest-land.sealed,.harvest-land.open {cursor:pointer}
.land-card.spotlight {border-color:rgb(var(--gold-76));box-shadow:0 0 0 2px rgb(var(--gold-76) / .53)}
.legion-route.spotlight {border-radius:5px;box-shadow:0 0 0 2px rgb(var(--gold-76) / .53);transition:box-shadow .3s}
.harvest-land.sealed:before {opacity:.4;filter:grayscale(1)}
.harvest-land.sealed .harvest-name,.harvest-land.sealed .harvest-caption {color:rgb(var(--bone-69))}
.harvest-name {font:20px Georgia,serif;color:rgb(var(--stone-88));text-shadow:0 2px 6px rgb(var(--stone-0))}
.harvest-caption {font:13px Georgia,serif;letter-spacing:1.5px;color:rgb(var(--bone-83))}
.harvest-foot strong {display:block;font-size:13.5px;color:rgb(var(--moss-87));font-weight:500}
.harvest-foot strong b {padding:0 4px;color:rgb(var(--bone-55))}
.harvest-foot small {display:block;font-size:13px;color:rgb(var(--bone-69));margin-top:3px}
.harvest-foot .harvest-find {color:rgb(var(--gold-78));margin-top:1px}
/* The reward floats up from the middle of the land on a dark wash, so it reads over the land's name. */
.harvest-reward {position:absolute;left:50%;top:34%;z-index:2;translate:-50% 0;white-space:nowrap;padding:2px 8px;border-radius:4px;background:rgb(var(--stone-0) / .72);pointer-events:none;color:rgb(var(--moss-97));text-align:center;text-shadow:0 2px 8px rgb(var(--stone-0));font:17px Georgia,serif;opacity:0}
.grave-reward {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dominion-banner[data-lands="1"] .harvest-name {font-size:24px}
.conquer-first {white-space:nowrap;color:rgb(var(--bone-77))}
@media(max-width:720px) {.banner-head {padding:16px 16px 10px}.banner-head h1 {font-size:24px}.harvest-lands {grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}.dominion-banner[data-lands="1"] .harvest-lands,.dominion-banner[data-lands="3"] .harvest-land:first-child,.dominion-banner[data-lands="5"] .harvest-land:first-child {grid-column:1/-1}.dominion-banner[data-lands="1"] .harvest-lands {grid-template-columns:1fr}.harvest-land {min-height:110px;padding:12px}.harvest-name {font-size:18px}.harvest-caption {font-size:12px;letter-spacing:1px}.harvest-foot strong {font-size:13px}}
/* Drag and drop between legions */
.rank.draggable {grid-template-columns:auto minmax(0,1fr) auto auto}
.drag-handle {grid-row:1/3;grid-column:4;width:26px;height:40px;margin-left:2px;padding:0;border:1px solid rgb(var(--bone-36));border-radius:3px;background:rgb(var(--stone-20));color:rgb(var(--bone-69));cursor:grab;touch-action:none}
.drag-handle .icon {width:14px;height:14px;fill:none;stroke:currentColor}
.drag-handle:hover:not(:disabled),.drag-handle:focus-visible {border-color:var(--gold);color:var(--gold-bright)}
.drag-handle:disabled {opacity:.4;cursor:default}
body.dragging,body.dragging * {cursor:grabbing!important;user-select:none}
.legion-card.drop-ok {outline:1px dashed rgb(var(--gold-55));outline-offset:2px}
.legion-card.drop-no {opacity:.6}
.legion-card.drop-over {outline:2px solid var(--gold);outline-offset:2px;box-shadow:0 0 0 4px rgb(var(--gold-78) / .15),0 6px 18px rgb(var(--stone-0) / .4)}
.drag-ghost {position:fixed;left:0;top:0;z-index:1000;display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border:1px solid var(--gold);border-radius:3px;background:rgb(var(--stone-20) / .95);box-shadow:0 8px 20px rgb(var(--stone-0) / .8);pointer-events:none;color:rgb(var(--gold-87));font-size:14px}
.drag-ghost .unit-portrait {width:28px;height:35px}
.drag-ghost span {display:flex;flex-direction:column;gap:2px}
.drag-ghost small {font-size:13px;color:rgb(var(--bone-69))}

/* One hunting scene per legion, under its card header. */
.legion-scene {display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:1px;margin:0 0 12px;background:rgb(var(--bone-40));border:1px solid rgb(var(--bone-40))}
.legion-scene:empty {display:none}
.scene-tap,.scene-note {position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;min-height:96px;padding:10px 12px;border:0;border-radius:0;background:rgb(var(--stone-17));color:inherit;text-align:left;overflow:hidden}
.scene-note {grid-column:1/-1}
.scene-tap {cursor:pointer;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.scene-tap:before,.scene-note:before {content:'';position:absolute;inset:0;z-index:-2;opacity:.75;background-size:cover;background-position:center}
.scene-tap:after,.scene-note:after {content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgb(var(--stone-15) / .96) 0%,rgb(var(--stone-15) / .69) 55%,rgb(var(--stone-15) / .19) 100%)}
.scene-tap:active {box-shadow:inset 0 0 0 2px var(--green)}
.scene-tap:focus-visible {outline:2px solid var(--gold-bright);outline-offset:-4px}
.scene-tap[aria-disabled="true"] {cursor:default}
.scene-tap strong,.scene-note strong {font:19px Georgia,serif;color:rgb(var(--stone-88));text-shadow:0 2px 6px rgb(var(--stone-0))}
.scene-reward {font-size:13.5px;color:rgb(var(--moss-87))}
.scene-tap small,.scene-note small {font-size:13px;color:rgb(var(--bone-73))}
.scene-note.idle strong {color:rgb(var(--bone-83))}
.scene-encounter {display:flex;flex-direction:column;justify-content:center;gap:6px;padding:10px 12px;background:rgb(var(--stone-20))}
.scene-encounter progress {width:100%}
.scene-encounter small {font-size:13.5px;color:rgb(var(--bone-73))}
@media(max-width:720px) {.legion-scene {grid-template-columns:1fr}.scene-tap,.scene-note {min-height:84px}}

/* Worldboss events: the floating omen, its chip after dismissal, the battle and the relic vault. */
.omen {position:fixed;left:calc(16px + var(--chat-left,0px) + var(--omen-shift,0px));bottom:calc(16px + var(--chat-bottom,0px) + var(--omen-lift,0px));z-index:18;display:flex;gap:14px;align-items:flex-start;width:min(380px,calc(100% - 32px));padding:16px 40px 16px 16px;border:1px solid rgb(var(--arcane-50));border-radius:4px;color:var(--ink);
  background:radial-gradient(ellipse at 15% 20%,rgb(var(--arcane-52) / .2),transparent 60%),linear-gradient(160deg,rgb(var(--stone-26)),rgb(var(--stone-17)) 70%);box-shadow:0 0 0 1px rgb(var(--stone-0) / .53),0 0 28px rgb(var(--arcane-52) / .27),0 14px 40px rgb(var(--stone-0) / .8)}
.omen-close {position:absolute;top:6px;right:6px;width:30px;height:30px;border:0;background:none;color:rgb(var(--arcane-82));font-size:21px;line-height:1}
.omen-close:focus-visible,.omen-chip:focus-visible {outline:2px solid var(--gold-bright);outline-offset:2px}
.omen-sigil {flex:none;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 50% 38%,rgb(var(--stone-15)) 30%,rgb(var(--stone-15)) 34%,transparent 35%),radial-gradient(circle at 50% 60%,rgb(var(--stone-15)) 44%,transparent 45%),radial-gradient(circle,rgb(var(--arcane-62)) 0%,rgb(var(--arcane-37)) 55%,rgb(var(--stone-20)) 72%);box-shadow:0 0 18px rgb(var(--arcane-62) / .4)}
.omen[data-phase="active"] .omen-sigil {background:radial-gradient(circle at 50% 38%,rgb(var(--stone-15)) 30%,rgb(var(--stone-15)) 34%,transparent 35%),radial-gradient(circle at 50% 60%,rgb(var(--stone-15)) 44%,transparent 45%),radial-gradient(circle,rgb(var(--blood-67)) 0%,rgb(var(--blood-38)) 55%,rgb(var(--stone-20)) 72%);box-shadow:0 0 18px rgb(var(--blood-67) / .4)}
.omen-body {display:grid;gap:6px;min-width:0}
.omen-body .eyebrow {color:rgb(var(--arcane-78))}
.omen-title {margin:0;font:17px/1.35 Georgia,serif;color:rgb(var(--bone-96))}
.omen-time {margin:0;font-size:14px;color:rgb(var(--arcane-72))}
.omen-body .primary {justify-self:start;white-space:normal;text-align:left}
.omen-chip {position:fixed;left:calc(16px + var(--chat-left,0px) + var(--omen-shift,0px));bottom:calc(16px + var(--chat-bottom,0px) + var(--omen-lift,0px));z-index:18;display:flex;align-items:center;gap:8px;max-width:calc(100% - 32px);padding:9px 14px;border:1px solid rgb(var(--arcane-50));border-radius:18px;background:rgb(var(--stone-20));color:rgb(var(--arcane-90));font-size:14px;box-shadow:0 6px 20px rgb(var(--stone-0) / .67)}
.omen-chip-dot {width:8px;height:8px;border-radius:50%;background:rgb(var(--arcane-62));box-shadow:0 0 8px rgb(var(--arcane-62))}
.omen-chip[data-phase="active"] .omen-chip-dot {background:rgb(var(--blood-67));box-shadow:0 0 8px rgb(var(--blood-67))}
@media(prefers-reduced-motion:no-preference) {.omen {animation:omen-rise .5s ease-out}.omen-sigil {animation:omen-pulse 3s ease-in-out infinite}
  @keyframes omen-rise {from {opacity:0;translate:0 16px}to {opacity:1;translate:0 0}}@keyframes omen-pulse {0%,100% {filter:brightness(1)}50% {filter:brightness(1.35)}}}
.battle {width:min(560px,calc(100% - 32px))}
.battle-scene {position:relative;isolation:isolate;height:150px;margin:-24px -24px 4px;overflow:hidden;background:radial-gradient(ellipse at 50% 100%,rgb(var(--blood-27)),rgb(var(--stone-15)) 70%)}
.battle-scene:before {content:'';position:absolute;inset:0;z-index:-2;opacity:.55;background-size:cover;background-position:center}
.battle-scene[data-land="forgotten-graveyard"]:before {background-image:url('/assets/graveyard.svg')}
.battle-scene[data-land="abandoned-crypt"]:before {background-image:url('/assets/illustrations/abandoned-crypt.jpg')}
.battle-scene[data-land="old-mausoleum"]:before {background-image:url('/assets/reference/lair.jpg')}
.battle-scene[data-land="forsaken-battlefield"]:before {background-image:url('/assets/reference/battlefield.jpg')}
.battle-scene[data-land="spirit-hollow"]:before {background-image:url('/assets/reference/wasteland.jpg')}
.battle-scene:after {content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgb(var(--stone-17)) 0%,rgb(var(--stone-17) / 0) 60%)}
.battle progress {width:100%}
.battle-stats {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.battle-stats span {display:grid;gap:2px;padding:8px 10px;border:1px solid rgb(var(--bone-32));background:rgb(var(--stone-17))}
.battle-stats small {font-size:13px;letter-spacing:1.2px;color:var(--gold)}
.battle-stats b {font:20px Georgia,serif;color:rgb(var(--bone-96))}
.battle-rules {font-size:14px;color:var(--muted);line-height:1.5}
.wb-relics .trophy small {max-width:100%}
/* The Reliquary (schema 47): a header picture that opens the codex, and a shelf per collection. */
.reliquary-banner {position:relative;display:flex;align-items:flex-end;width:calc(100% - 36px);margin:0 18px;min-height:150px;padding:0;border:1px solid rgb(var(--gold-46));border-radius:4px;overflow:hidden;background:rgb(var(--stone-15)) url('/assets/illustrations/reliquary-vault.jpg') center/cover no-repeat;cursor:pointer;text-align:left;color:var(--ink)}
.reliquary-banner:after {content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,rgb(var(--stone-0) / .7) 60%,rgb(var(--stone-0) / .93));pointer-events:none}
.reliquary-banner-text,.codex-head>div {text-shadow:0 1px 3px rgb(var(--stone-0)),0 0 10px rgb(var(--stone-0))}
.reliquary-banner:hover,.reliquary-banner:focus-visible {border-color:var(--gold-bright);box-shadow:0 0 18px rgb(var(--moss-84) / .2)}
.reliquary-banner-text {position:relative;z-index:1;display:grid;gap:2px;padding:12px 14px}
.reliquary-banner-text strong {font:21px Georgia,serif;color:var(--gold-bright)}
.reliquary-banner-text small {font-size:14.5px;color:rgb(var(--bone-83))}
.reliquary-shelves {list-style:none;margin:10px 18px 18px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px}
.reliquary-shelf {display:grid;grid-template-columns:1fr auto;gap:4px 8px;width:100%;padding:8px 10px;border:1px solid rgb(var(--stone-26));border-radius:3px;background:rgb(var(--stone-17));color:rgb(var(--bone-77));font:15px Georgia,serif;text-align:left;cursor:pointer}
.reliquary-shelf:hover,.reliquary-shelf:focus-visible {border-color:rgb(var(--gold-55))}
.reliquary-shelf b {font:600 14px 'Segoe UI',sans-serif;color:var(--gold)}
.reliquary-shelf progress {grid-column:1/-1;width:100%;height:4px}
.codex {position:fixed;inset:0;z-index:50;width:min(900px,calc(100% - 24px));max-height:calc(100dvh - 24px);margin:auto;padding:0;border:1px solid rgb(var(--gold-55));border-radius:5px;color:var(--ink);background:var(--bg);box-shadow:0 0 0 100vmax rgb(var(--stone-0) / .8),0 18px 60px rgb(var(--stone-0));overflow:hidden}
.codex[open] {display:flex;flex-direction:column}
body.codex-open {overflow:hidden}
.codex-head {position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;min-height:120px;padding:14px 16px;background:rgb(var(--stone-15)) url('/assets/illustrations/reliquary-vault.jpg') center/cover no-repeat;border-bottom:1px solid rgb(var(--gold-46))}
.codex-head:before {content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgb(var(--stone-0) / .87))}
.codex-head>* {position:relative}
.codex-head h2 {margin:2px 0 0;font:24px Georgia,serif;color:var(--gold-bright)}
.codex-body {overflow-y:auto;padding:4px 18px 20px;overscroll-behavior:contain}
.codex-body>.panel-description {padding:10px 0 0}
.codex-section {scroll-margin-top:8px}
.codex-section h3 {display:flex;align-items:center;justify-content:space-between;gap:8px;font:17px Georgia,serif;color:rgb(var(--bone-77));margin:18px 0 4px}
.codex-section h3 small {font:600 14px 'Segoe UI',Arial,sans-serif;color:var(--gold)}
.codex-section>.relic-note {margin:0 0 8px;font-size:14.5px}
.codex .trophy-grid {grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px}
.codex .trophy {padding:12px 8px 10px}
.codex .trophy-name {font-size:14.5px}
.codex .trophy small {font-size:13.5px;line-height:1.35;color:rgb(var(--bone-62))}
.codex .collection .relic-note {font-size:14px}
.trophy.mystery {border-style:dashed;border-color:rgb(var(--bone-32))}
.trophy.mystery .trophy-name {color:rgb(var(--bone-62));font-style:italic}
.mystery-glyph {display:grid;place-items:center;width:40px;height:40px;border:1px dashed rgb(var(--bone-40));border-radius:50%;font:600 23px/1 Georgia,serif;color:rgb(var(--bone-55));filter:none;opacity:1}
.hud-reliquary {display:flex;align-items:center;gap:10px;flex:none;margin-right:18px;padding:6px 10px 6px 6px;border:1px solid rgb(var(--bone-36));border-radius:4px;background:rgb(var(--stone-17));color:var(--ink);text-align:left;cursor:pointer}
.hud-reliquary[hidden] {display:none}
.hud-reliquary:hover,.hud-reliquary:focus-visible {border-color:var(--gold-bright);box-shadow:0 0 12px rgb(var(--moss-84) / .15)}
.hud-reliquary-art {width:48px;height:48px;flex:none;border:1px solid rgb(var(--gold-55));border-radius:3px;background:rgb(var(--stone-15)) url('/assets/illustrations/reliquary-vault.jpg') 50% 38%/auto 62px no-repeat}
.hud-reliquary-text {display:grid;gap:2px;min-width:0}
.hud-reliquary .label {font-size:12px;letter-spacing:1.6px;color:rgb(var(--gold-66))}
.hud-reliquary strong {font:20px Georgia,serif;color:var(--gold-bright);font-variant-numeric:tabular-nums;white-space:nowrap}
.hud-reliquary-bars {display:flex;gap:3px}
.hud-reliquary-bars progress {width:16px;height:4px}
@media(max-width:720px) {.codex {width:100%;max-width:100%;max-height:100dvh;height:100dvh;border-radius:0}.codex .trophy-grid {grid-template-columns:repeat(2,minmax(0,1fr))}.codex-head {min-height:96px}.reliquary-banner {min-height:120px;width:calc(100% - 24px);margin:0 12px}.reliquary-shelves {margin:10px 12px 14px}}
@media(max-width:720px) {.omen {left:16px;right:16px;width:auto;bottom:calc(16px + var(--omen-lift,0px))}.battle-stats b {font-size:17px}}
/* Land Lore (schema 43): a bar and the next checkpoint on every land card, and the Lore panel. */
.territory-detail small.lore-line {display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:rgb(var(--bone-73))}
.lore-line b {color:rgb(var(--bone-83));font-weight:600}
.lore-bar {width:72px;height:5px;accent-color:rgb(var(--moss-76));vertical-align:middle}
/* The Lore panel itself is a lorebook (September 2026 art refresh), drawn at the end of this sheet. */

/* One resource to start (schema 42): Dark Energy stands alone in the ledger until Souls join it in
   Chapter II. Command is the size of the army, so it lives with the legions, not with the coin. */
.masthead>.resource[hidden] {display:none}
.command-count {font:17px Georgia,serif;color:var(--gold-bright);letter-spacing:0;margin-left:6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.command-strip>.line {flex-wrap:wrap;gap:6px 12px}
.command-count em {font-style:normal;font-size:14.5px;color:rgb(var(--bone-62))}
.command-note {display:block;margin-top:4px;font-size:13.5px;color:var(--muted)}
.command-note.command-full {color:rgb(var(--gold-76))}
@media(max-width:720px) {
  .masthead {grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .brand {grid-column:1}
  .account {grid-column:2}
  .masthead>.energy-resource {grid-column:1/-1}
  .masthead:has(#bones-resource:not([hidden]))>.energy-resource {grid-column:1}
  .masthead>.bone-resource {grid-column:2}
  /* Chapter IV: Souls join as a third balance, after Bonedust. */
  .masthead:has(#souls-resource:not([hidden])) {grid-template-columns:repeat(3,minmax(0,1fr))}
  .masthead:has(#souls-resource:not([hidden]))>.brand {grid-column:1/3}
  .masthead:has(#souls-resource:not([hidden]))>.account {grid-column:3}
  .masthead>.soul-resource {grid-column:3}
}
.admin {width:min(640px,calc(100% - 32px));max-height:calc(100dvh - 32px)}
.admin-table-wrap {max-height:320px;overflow:auto;border:1px solid rgb(var(--bone-32));border-radius:3px}
.admin-table {width:100%;border-collapse:collapse;font-size:14.5px}
.admin-table th {position:sticky;top:0;background:rgb(var(--stone-20));color:var(--gold);font:600 13.5px 'Segoe UI',sans-serif;letter-spacing:1.2px;text-transform:uppercase;text-align:left;padding:8px}
.admin-table td {padding:6px 8px;border-top:1px solid rgb(var(--stone-26));overflow-wrap:anywhere}
.admin-table td:first-child {color:var(--muted);font-variant-numeric:tabular-nums}
.admin-table td:last-child {text-align:right}
.admin-message {min-height:1em;font-size:14.5px;color:var(--gold-bright)}
.admin-reset {display:grid;gap:8px;border-left-color:rgb(var(--ember-48))}
.admin-reset input {padding:9px 10px;border:1px solid rgb(var(--bone-40));border-radius:3px;background:rgb(var(--stone-15));color:var(--ink);font:inherit}
.danger {border:1px solid rgb(var(--ember-48));border-radius:3px;padding:10px 16px;color:rgb(var(--stone-88));background:linear-gradient(rgb(var(--blood-38)),rgb(var(--blood-27)));font-weight:600;font-size:14.5px}
.danger:disabled {opacity:.45;cursor:not-allowed}

/* Release the dead (2026-09-25): healthy undead return to the grave for nothing, freeing command. */
.legion-release {border-top-color:rgb(var(--bone-32))}
.legion-release h4 {color:rgb(var(--ember-75))}
.release-row {display:grid;grid-template-columns:150px 48px auto;justify-content:start;align-items:center;gap:6px 10px;padding:6px 0;border-top:1px solid rgb(var(--stone-26))}
.release-row:first-child {border-top:0}
@media(max-width:720px) {.release-row {grid-template-columns:minmax(0,1fr) auto auto}.release-row .muster-name {grid-column:auto}}

/* Omens of the Dead: today's omen and tomorrow's. */
/* The omen of the day sits in the top bar as one sigil; hover or tap it for the boon, the price and tomorrow. */
.omen-icon {display:grid;place-items:center;width:34px;height:34px;flex:none;padding:0;border:1px solid rgb(var(--arcane-37));border-radius:50%;background:radial-gradient(circle,rgb(var(--stone-26)),rgb(var(--stone-20)));color:rgb(var(--arcane-82));cursor:help}
.omen-icon[hidden] {display:none}
.omen-icon:hover,.omen-icon[aria-expanded="true"] {border-color:rgb(var(--arcane-62));color:rgb(var(--arcane-90))}
.omen-icon[data-omen="bloodmoon"] {border-color:rgb(var(--blood-38));background:radial-gradient(circle,rgb(var(--blood-27)),rgb(var(--stone-17)));color:rgb(var(--blood-67))}
.omen-icon[data-omen="stillgrave"] {color:rgb(var(--bone-62))}
.info-note .omen-tip-eyebrow {display:block;font-size:11px;letter-spacing:1.4px;color:rgb(var(--arcane-72))}
.info-note .omen-tip-name {display:block;font:18px Georgia,serif;color:rgb(var(--arcane-90));margin-top:2px}
.info-note .omen-tip-boon {color:var(--green)}
.info-note .omen-tip-bane {color:rgb(var(--blood-67));margin-top:2px}
.info-note .omen-tip-left {display:block;color:var(--muted);font-size:13.5px;margin-bottom:6px}
.info-note .omen-tip-next {margin-top:8px;padding-top:7px;border-top:1px solid rgb(var(--arcane-37))}
.info-note .omen-tip-next .omen-tip-name {font-size:15px;color:rgb(var(--arcane-82))}
.info-note .omen-tip-next small {display:block;color:var(--muted);font-size:13.5px;margin-top:2px}

/* First session (progressive disclosure): command grows right under its bar, and the crypt's classes
   wait behind a seal that says what opens it. */
.command-grow {margin-top:10px;padding:10px 12px;border:1px solid rgb(var(--bone-32));background:rgb(var(--stone-17));display:grid;gap:8px}
.command-grow p {margin:0;font-size:14px;line-height:1.5;color:rgb(var(--bone-73))}
.command-grow p b {color:var(--gold)}
.command-next {display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.command-next>span {font-size:14.5px;color:rgb(var(--bone-83));display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}
.command-next b {font:17px Georgia,serif;color:rgb(var(--bone-83));font-weight:400}
.command-next #command-upgrade-cost.command-locked {color:rgb(var(--gold-76))}
.hint {font-size:14px}
.hint.blocked {color:rgb(var(--gold-76))}
.seal-note {display:none}
.undead-card.sealed .seal-note {display:grid;gap:9px;margin:12px 14px 16px;padding:12px;border:1px solid rgb(var(--gold-46));border-left:3px solid rgb(var(--gold-76));background:rgb(var(--stone-20))}
.seal-note p {margin:0;font-size:14.5px;line-height:1.5;color:rgb(var(--bone-83))}
.seal-note button {justify-self:start}
.undead-card.sealed .purchase-block,.undead-card.sealed .unit-equipment,.undead-card.sealed .hint {display:none}
.undead-card.sealed .warrior-card>img {filter:grayscale(.65) brightness(.6)}
.undead-card.sealed .owned {display:none}
@media(min-width:1051px) {.roster-panel.crypt-sealed {grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))}
  .roster-panel.crypt-sealed>.undead-card.sealed .warrior-card {flex-direction:column;gap:0;min-height:0}
  .roster-panel.crypt-sealed>.undead-card.sealed .warrior-card>img {width:100%;height:150px;border-right:0;mask-image:linear-gradient(rgb(var(--stone-0)) 70%,rgb(var(--stone-0) / 0))}
  .roster-panel.crypt-sealed>.undead-card.sealed .warrior-info {padding:4px 14px 6px}
  .roster-panel.crypt-sealed>.undead-card.sealed:nth-of-type(3) {border-right:1px solid var(--line)}}
.lands-beyond {margin:0;padding:11px 15px;border-top:1px solid var(--line);font-size:14px;color:rgb(var(--bone-69));line-height:1.5}
@media(min-width:1051px) {.dashboard[data-columns="2"] {grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr)}.dashboard[data-columns="1"] {grid-template-columns:minmax(0,1fr)}}
@media(max-width:1050px) {.dashboard[data-columns="2"]>.journal-column {grid-column:auto;grid-template-columns:1fr}}
/* A running conquest: a banner on the land's card with its countdown and a filling bar. */
.conquest-line.active {border-top:1px solid rgb(var(--moss-49));margin-top:12px;padding:0}
.conquest-march {flex:1;display:grid;gap:6px;padding:12px 14px;border:1px solid rgb(var(--moss-49));border-left:3px solid rgb(var(--moss-76));background:linear-gradient(90deg,rgb(var(--stone-26)),rgb(var(--stone-20)))}
.conquest-march strong {font:17px Georgia,serif;font-weight:400;color:rgb(var(--moss-87))}
.conquest-march span {font-size:14.5px;color:rgb(var(--bone-83))}
.conquest-line .conquest-abandon {justify-self:start;margin:0;font-size:13px}
.conquest-march span b {font-size:16px;color:rgb(var(--bone-96));font-variant-numeric:tabular-nums}
.conquest-march progress {width:100%;height:8px;accent-color:rgb(var(--moss-76))}
.conquest-status {padding:7px 11px;border:1px solid rgb(var(--moss-49));border-radius:3px;background:rgb(var(--stone-26));color:rgb(var(--moss-87));font-size:14.5px;white-space:nowrap}
.conquest-status b {font-variant-numeric:tabular-nums;color:rgb(var(--bone-96))}
.harvest-land.marching [data-harvest-state] {color:rgb(var(--moss-87))}

/* Your legion: a compact summary on the main page; the full army opens in the Manage your legion window. */
.legion-summary {margin-bottom:16px}
.legion-summary .panel-heading {align-items:center}
.summary-body {display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:14px 20px;align-items:center;padding:14px 16px}
.summary-army {list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.summary-army li {display:flex}
.summary-pick {display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border:1px solid rgb(var(--bone-32));border-left:3px solid var(--unit,rgb(var(--gold-55)));border-radius:2px;background:rgb(var(--stone-17));font-size:14.5px;color:rgb(var(--bone-83));text-align:left}
.summary-pick:hover {border-color:rgb(var(--gold-55));border-left-color:var(--unit,rgb(var(--gold-55)));background:rgb(var(--stone-20))}
.summary-pick[aria-pressed="true"] {border-color:var(--gold);border-left-color:var(--unit,rgb(var(--gold-55)));background:linear-gradient(rgb(var(--stone-26)),rgb(var(--stone-20)));box-shadow:0 0 0 1px rgb(var(--gold-78) / .33)}
.summary-classes {display:grid;gap:6px}
.summary-tip {font-size:13.5px;color:rgb(var(--bone-62))}
.quick-label {font-size:12px;letter-spacing:1.4px;color:rgb(var(--bone-62))}
.quick-label b {font:15px Georgia,serif;letter-spacing:0;color:rgb(var(--bone-83));font-weight:400}
.summary-army li b {font:18px Georgia,serif;color:var(--gold-bright);font-weight:400;font-variant-numeric:tabular-nums}
.summary-army li em {font-style:normal;color:rgb(var(--gold-76));font-size:14px}
.summary-army .unit-portrait {width:28px;height:35px;object-fit:cover;border-radius:2px}
.summary-facts {display:grid;gap:6px;min-width:0}
.summary-command {display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:4px 10px}
.summary-command .rarity {font-size:12px;letter-spacing:1.4px;color:rgb(var(--bone-62))}
.summary-command strong {font:18px Georgia,serif;font-weight:400;color:rgb(var(--bone-83));font-variant-numeric:tabular-nums}
.summary-command progress {width:100%;height:8px;accent-color:rgb(var(--moss-76))}
.summary-command small {grid-column:1/-1;font-size:14px;color:var(--muted)}
.summary-command small.command-full {color:rgb(var(--gold-76))}
.summary-post {margin:0;font-size:14.5px;color:rgb(var(--bone-73));line-height:1.5}
.summary-raise {display:grid;gap:6px;justify-items:end}
.summary-raise .purchase-actions {display:flex;gap:6px}
.summary-raise .summon-choice {display:grid;grid-template-columns:auto auto;gap:2px 6px;padding:8px 12px}
.summary-raise .summon-choice small {grid-column:1/-1;font-size:13.5px}
.summary-raise .hint {padding:0;text-align:right;max-width:300px}
.summary-seal {margin:0 16px 14px;padding:10px 12px;border-left:3px solid rgb(var(--gold-76));background:rgb(var(--stone-20));font-size:14.5px;color:rgb(var(--bone-83));line-height:1.5}
@media(max-width:900px) {.summary-body {grid-template-columns:1fr}.summary-raise {justify-items:stretch}.summary-raise .purchase-actions {display:grid;grid-template-columns:1fr 1fr}.summary-raise .hint {text-align:left;max-width:none}}

.legion-manager {width:min(1400px,calc(100% - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid rgb(var(--gold-55));border-radius:5px;color:var(--ink);background:var(--bg);box-shadow:0 18px 60px rgb(var(--stone-0) / .87);overflow:auto;overscroll-behavior:contain}
.legion-manager::backdrop {background:rgb(var(--stone-0) / .8)}
.manager-head {position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid rgb(var(--bone-36));background:linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-20)))}
.manager-head h2 {margin:2px 0 0;font:23px Georgia,serif;color:var(--gold-bright)}
.legion-manager .roster-panel {margin:0;border:0;border-radius:0}
/* Smaller portraits inside the window: the pictures no longer fill a quarter of the screen. */
.legion-manager .undead-card .warrior-card {min-height:120px}
.legion-manager .undead-card .warrior-card>img {width:96px;height:120px}
.legion-manager .undead-card .warrior-info {padding:12px 10px 30px 0}
.legion-manager .undead-card .warrior-info h3 {font-size:20px}
.legion-manager .undead-card .warrior-info>p {display:none}
@media(min-width:1051px) {.legion-manager .roster-panel.crypt-sealed>.undead-card.sealed .warrior-card>img {width:100%;height:96px}}
@media(max-width:720px) {.legion-manager {width:100%;max-width:100%;max-height:100dvh;height:100dvh;border-radius:0;margin:0}}
.legion-manager .roster-panel>.panel-heading {display:none}
/* The Forbidden Grimoire as an upgrade tree: three branches, cheapest studies at the top, joined by
   paths that glow once the study above is started. The chosen study opens below the tree. */
.research-tree {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:4px 12px 0;padding:14px 8px 16px;border:1px solid rgb(var(--stone-26));border-radius:4px;background:radial-gradient(ellipse at 50% 0,rgb(var(--bone-32) / .2),transparent 70%),repeating-linear-gradient(0deg,rgb(var(--stone-0) / 0) 0 38px,rgb(var(--stone-100) / .02) 38px 39px),linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-15)));box-shadow:inset 0 0 30px rgb(var(--stone-0) / .8)}
.tree-branch h3 {display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-height:64px;gap:4px;margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid rgb(var(--bone-32));font-size:14px;letter-spacing:.8px;text-align:center;color:var(--gold);text-transform:uppercase}
.tree-branch h3 .icon {width:18px;height:18px;opacity:.8}
.tree-branch ol {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.tree-node {position:relative;width:100%;display:flex;justify-content:center}
.tree-node button {position:relative;z-index:1}
.tree-node+.tree-node:before {content:'';position:absolute;left:50%;top:-12px;height:24px;width:2px;translate:-1px 0;background:linear-gradient(rgb(var(--stone-26)),rgb(var(--bone-32)))}
.tree-node.lit:before {background:linear-gradient(rgb(var(--gold-66)),rgb(var(--gold-83)));box-shadow:0 0 6px rgb(var(--gold-76) / .53)}
.tree-node button {display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;max-width:130px;padding:0;background:none;border:0;color:inherit;text-align:center}
.node-sigil {position:relative;display:grid;place-items:center;width:68px;height:68px}
.node-frame {position:absolute;display:block;inset:11px;border:1px solid rgb(var(--bone-40));background:radial-gradient(circle at 50% 35%,rgb(var(--bone-32)),rgb(var(--stone-20)) 70%);box-shadow:inset 0 0 0 3px rgb(var(--stone-15)),inset 0 0 0 4px rgb(var(--bone-32)),0 3px 8px rgb(var(--stone-0) / .67);rotate:45deg;transition:box-shadow .2s,border-color .2s,filter .2s}
.node-sigil .icon {position:relative;width:22px;height:22px;color:rgb(var(--bone-73))}
.node-sigil em {position:absolute;left:50%;bottom:-3px;translate:-50% 0;min-width:28px;padding:1px 5px;border:1px solid rgb(var(--bone-40));border-radius:8px;background:rgb(var(--stone-17));font:600 12px 'Segoe UI',sans-serif;font-style:normal;color:rgb(var(--bone-77));font-variant-numeric:tabular-nums;white-space:nowrap;text-align:center}
.node-name {margin-top:4px;font:14px/1.25 Georgia,serif;color:rgb(var(--bone-83))}
.node-price {font-size:13px;margin-top:1px;color:rgb(var(--bone-69));font-variant-numeric:tabular-nums}
.tree-node.started .node-frame {border-color:rgb(var(--gold-66))}
.tree-node.started .node-sigil .icon {color:var(--gold-bright)}
.tree-node.mastered .node-frame {border-color:rgb(var(--gold-83));background:radial-gradient(circle at 50% 35%,rgb(var(--gold-46)),rgb(var(--stone-20)) 72%);box-shadow:inset 0 0 0 3px rgb(var(--stone-15)),inset 0 0 0 4px rgb(var(--gold-66)),0 0 14px rgb(var(--gold-76) / .4)}
.tree-node.mastered .node-sigil .icon,.tree-node.mastered .node-sigil em {color:rgb(var(--bone-96))}
.tree-node.mastered .node-price {color:rgb(var(--bone-73))}
.tree-node.sealed .node-sigil {filter:grayscale(1) brightness(.55)}
.tree-node.sealed .node-name,.tree-node.sealed .node-price {color:rgb(var(--bone-55))}
.tree-node button.ready .node-frame {border-color:rgb(var(--moss-74));box-shadow:inset 0 0 0 3px rgb(var(--stone-15)),inset 0 0 0 4px rgb(var(--moss-49)),0 0 12px rgb(var(--moss-74) / .33)}
.tree-node button.ready .node-price {color:var(--green)}
.tree-node button[aria-pressed="true"] .node-frame {outline:2px solid var(--gold-bright);outline-offset:4px}
.tree-node button[aria-pressed="true"] .node-name {color:var(--gold-bright)}
.tree-node button:hover .node-sigil {filter:brightness(1.3)}
.tree-node button:focus-visible {outline:0}
.tree-node button:focus-visible .node-frame {outline:2px solid var(--gold-bright);outline-offset:4px}
.node-perk {max-width:100%;font-size:13.5px;line-height:1.3;color:rgb(var(--moss-80))}
.tree-node.mastered .node-perk {color:rgb(var(--gold-78))}
.tree-node.sealed .node-perk {color:rgb(var(--bone-55))}
/* The Reaper's Harvest is learned by hand (tap objectives): a note under its studies, and in each study's card
   the objectives still open, nearest first. */
.objective-count {font-size:13px;color:var(--muted)}
.hand-objectives {list-style:none;margin:4px 0 0;padding:0;display:grid;gap:3px}
.hand-objectives li {display:flex;justify-content:space-between;gap:14px;font-size:13.5px}
.hand-objectives b {color:var(--gold-bright);font-variant-numeric:tabular-nums;white-space:nowrap}
.hand-objectives .more {color:var(--muted);font-size:13px}
/* The chosen study's Research bar: sticks to the bottom of the screen while the tree is in view. */
/* overflow:clip keeps the rounded corners without making the panel a scroll box, which would stop the bar sticking. */
#grimoire.panel {overflow:clip}
.study-detail {position:sticky;bottom:0;z-index:5;margin:10px 12px 0;padding-bottom:12px;background:linear-gradient(rgb(var(--stone-0) / 0),var(--panel) 12px)}
.study-bar {display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid rgb(var(--gold-46));border-radius:4px;background:linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-20)));box-shadow:0 -6px 18px rgb(var(--stone-0) / .8)}
.study-bar-text {flex:1;min-width:0}
.study-bar h3 {font-size:17px;color:var(--gold-bright);margin:2px 0 1px}
.study-bar p {font-size:14px;line-height:1.4;margin:0}
.study-bar .research-next {color:rgb(var(--moss-76))}
.study-bar .study-now {color:rgb(var(--bone-69))}
.study-bar .study-seal {color:rgb(var(--ember-75))}
.study-buy {display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.study-buy>span {font-size:14px;color:rgb(var(--bone-77));text-align:right}
.research-buttons {display:flex;gap:5px;justify-content:flex-end}
.research-buttons .secondary {padding-left:10px;padding-right:10px}
@media(max-width:720px) {.study-detail {margin:8px 8px 0;bottom:calc(57px + env(safe-area-inset-bottom))}.study-bar {padding:9px 10px;gap:8px}.study-bar {flex-wrap:wrap}.study-buy {flex:1 1 100%;flex-direction:row;align-items:center;justify-content:space-between}.study-buy>span {max-width:150px;text-align:left}.node-perk {font-size:13px}.research-tree {margin:4px 8px 0;padding:12px 2px 14px;gap:2px}.tree-branch h3 {font-size:13px;letter-spacing:.4px}.node-sigil {width:60px;height:60px}.node-frame {inset:10px}.node-name {font-size:13.5px}}
@media(prefers-reduced-motion:no-preference) {.tree-node button.ready .node-frame {animation:node-ready 2.4s ease-in-out infinite}@keyframes node-ready {50% {box-shadow:inset 0 0 0 3px rgb(var(--stone-15)),inset 0 0 0 4px rgb(var(--moss-49)),0 0 18px rgb(var(--moss-74) / .53)}}}
/* The shared ? beside a name (public/info-tip.js) and its floating note. */
.info-tip {display:inline-grid;place-items:center;width:20px;height:20px;flex:none;margin-left:6px;padding:0;border:1px solid rgb(var(--gold-46));border-radius:50%;background:rgb(var(--stone-20));color:rgb(var(--gold-78));font:600 14.5px/1 Georgia,serif;cursor:help;vertical-align:middle}
.info-tip:hover,.info-tip[aria-expanded="true"] {border-color:var(--gold-bright);color:var(--gold-bright);background:rgb(var(--stone-26))}
.info-note {position:absolute;z-index:60;box-sizing:border-box;padding:10px 12px;border:1px solid rgb(var(--gold-55));border-radius:4px;background:rgb(var(--stone-20));box-shadow:0 6px 18px rgb(var(--stone-0) / .67);color:rgb(var(--stone-88));font-size:15px;line-height:1.45;pointer-events:none}
.info-note-long {overflow-y:auto;overscroll-behavior:contain;pointer-events:auto}
.info-note b {color:var(--gold-bright);font-weight:600}
.info-note p {margin:0}
.info-note p+p,.info-note ul+p,.info-note p+ul {margin-top:6px}
.info-note ul {margin:0;padding-left:16px}
.info-note .info-gap {display:block;margin-top:6px}

/* Deathbinding: a tab per rite (locked ones show the rank they wait on) and one readable card. */
.deathbind-tabs {display:flex;flex-wrap:wrap;gap:6px;padding:2px 16px 10px}
.deathbind-tab {flex:1 1 auto;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:7px 10px;border:1px solid rgb(var(--bone-36));border-radius:4px;background:rgb(var(--stone-20));color:var(--ink);font:600 15px/1.2 Georgia,serif;text-align:left;cursor:pointer}
.deathbind-tab span {white-space:nowrap}
.deathbind-tab small {display:inline-flex;align-items:center;gap:3px;font:500 14px/1 system-ui,sans-serif;color:var(--muted)}
.deathbind-tab small.star {color:rgb(var(--moss-80))}
.deathbind-tab small.new {color:rgb(var(--moss-80))}
.deathbind-tab small .icon {width:11px;height:11px}
.deathbind-tab:hover {border-color:rgb(var(--gold-55))}
.deathbind-tab.chosen {border-color:var(--gold-bright);background:linear-gradient(rgb(var(--bone-32)),rgb(var(--stone-20)));color:var(--gold-bright)}
.deathbind-tab.locked {color:rgb(var(--bone-62))}
.deathbind-card {padding:4px 16px 14px}
.deathbind-rite {display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px 14px;align-items:start}
.deathbind-art {width:96px;height:96px;padding:6px;box-sizing:border-box;border:1px solid rgb(var(--bone-36));border-radius:4px;background:radial-gradient(circle at 50% 45%,rgb(var(--stone-26)),rgb(var(--stone-17)) 75%)}
.deathbind-art.relic-art {width:96px;height:96px;padding:0;overflow:hidden}
.deathbind-rite.locked .deathbind-art {filter:grayscale(1) brightness(.55)}
.deathbind-title {display:flex;align-items:center;gap:2px}
.deathbind-body h3 {margin:0;font:600 20px/1.2 Georgia,serif;color:var(--gold-bright)}
.deathbind-body p {margin:3px 0 0;font-size:15px;line-height:1.4;color:var(--ink)}
.deathbind-body .deathbind-kind {font-size:14.5px;color:var(--muted)}
.deathbind-body .deathbind-traits {color:rgb(var(--bone-77))}
.deathbind-chips {display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.deathbind-chips .chip {padding:4px 8px;border:1px solid rgb(var(--bone-36));border-radius:3px;background:rgb(var(--stone-20));font-size:14.5px;color:var(--ink);white-space:nowrap}
.deathbind-chips .chip small {color:var(--muted)}
.deathbind-chips .chip.cost {color:var(--gold-bright);border-color:rgb(var(--gold-46))}
.deathbind-chips .chip.short {border-color:rgb(var(--blood-38));color:rgb(var(--ember-75))}
.deathbind-body .deathbind-odds {margin-top:8px;color:rgb(var(--bone-83))}
.deathbind-odds .star {color:rgb(var(--moss-80))}
.deathbind-body .bind-buttons {display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.deathbind-body .bind-buttons button {padding:9px 14px;font-size:15px}
.deathbind-insight {grid-column:1/-1;margin-top:6px}
.deathbind-insight .line {display:flex;justify-content:space-between;align-items:center;font-size:15px;color:var(--ink)}
.deathbind-insight .insight-label {display:inline-flex;align-items:center}
.deathbind-insight progress {width:100%;margin-top:5px}
.deathbind-insight p {margin:4px 0 0;font-size:14.5px;color:rgb(var(--moss-80))}
.deathbind-sealed {display:flex;align-items:center;gap:6px;margin-top:10px !important;color:var(--gold) !important}
.deathbind-sealed .icon {width:14px;height:14px}
.deathbind-needs {margin:4px 0 0;padding-left:18px;font-size:15px;color:var(--muted)}
#deathbinding .binding-ledger {margin:10px 16px;padding:10px 12px}
#deathbinding .binding-ledger p {margin:0;font-size:14.5px;color:var(--muted)}
#deathbinding .binding-controls {padding:0 16px}
@media(max-width:420px) {.deathbind-rite {grid-template-columns:72px minmax(0,1fr)}.deathbind-art,.deathbind-art.relic-art {width:72px;height:72px}.deathbind-body h3 {font-size:19px}.deathbind-body .bind-buttons button {flex:1}}

/* Covens (schema 48): members, the Paladin Citadel's five walls and the legion lent to them. */
.coven-form {display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 16px 10px}
.coven-form[hidden] {display:none}
.coven-form label {width:100%}
.coven-form input {flex:1 1 140px;min-width:0;padding:8px 10px;border:1px solid rgb(var(--bone-36));border-radius:3px;background:rgb(var(--stone-17));color:var(--ink)}
.coven-body {padding:0 16px 14px}
.coven-body h3 {margin:14px 0 6px;font:600 15px Georgia,serif;color:var(--gold)}
.coven-body h3 small {font:400 14px 'Segoe UI',sans-serif;color:var(--muted);margin-left:6px}
.coven-members,.coven-open,.coven-walls,.coven-relics {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.coven-members li,.coven-open li {display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:7px 9px;border:1px solid rgb(var(--bone-32));border-radius:3px;background:rgb(var(--stone-20));font-size:14.5px}
.coven-members li.you {border-color:rgb(var(--gold-46))}
.coven-members li>span:first-child,.coven-open li>span {flex:1;min-width:0}
.coven-members small,.coven-open small {color:var(--muted);font-size:13.5px;letter-spacing:.6px}
.coven-lending {color:var(--muted);font-size:14px}
.coven-members b:last-of-type {font-variant-numeric:tabular-nums;color:var(--gold-bright)}
.coven-walls li {padding:4px 0}
.coven-walls .line {display:flex;justify-content:space-between;gap:8px;font-size:14.5px;color:var(--ink)}
.coven-walls small {color:var(--muted);font-size:13.5px}
.coven-walls progress {width:100%;margin-top:3px}
.coven-walls li.broken span {color:var(--green)}
.coven-lend {margin-top:12px;padding:10px;border:1px solid rgb(var(--bone-36));border-radius:3px;background:rgb(var(--stone-20))}
.coven-lend p {margin:0 0 8px;font-size:14.5px}
.coven-lend-picks {display:flex;flex-wrap:wrap;gap:6px}
.coven-lend-picks small {color:var(--muted);margin-left:4px}
.coven-relics {flex-direction:row;flex-wrap:wrap}
.coven-relics li {flex:1 1 120px;padding:6px 8px;border:1px solid rgb(var(--bone-32));border-radius:3px;background:rgb(var(--stone-17));font-size:14px;color:rgb(var(--bone-55))}
.coven-relics li.found {border-color:rgb(var(--gold-55));color:var(--ink)}
.coven-relics small {display:block;color:var(--muted)}
.coven-leave {margin-top:12px}
.coven-panel.coven-closed .panel-heading,.coven-panel.coven-closed .panel-description,.coven-panel.coven-closed .coven-body>:not(.coven-wip) {opacity:.55;filter:grayscale(.8)}
.coven-wip {display:inline-block;margin:0 0 10px;padding:4px 10px;border:1px dashed rgb(var(--gold-55));border-radius:3px;color:var(--gold);font-size:13px;letter-spacing:.8px;text-transform:uppercase}

/* Phone: the Reliquary overview takes a narrow last column of the balance row, so the bar keeps its height. */
@media(max-width:720px) {
  .masthead:has(#hud-reliquary:not([hidden])) {grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
  .masthead:has(#hud-reliquary:not([hidden]))>.account {grid-column:2/-1}
  .masthead:has(#hud-reliquary:not([hidden]))>.energy-resource {grid-column:1/3}
  .masthead:has(#hud-reliquary:not([hidden])):has(#bones-resource:not([hidden]))>.energy-resource {grid-column:1}
  .masthead:has(#hud-reliquary:not([hidden])):has(#souls-resource:not([hidden])) {grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr) auto}
  .masthead:has(#hud-reliquary:not([hidden])):has(#souls-resource:not([hidden]))>.account {grid-column:3/-1}
  /* With three balances the overview shrinks to the vault and its count. */
  .masthead:has(#souls-resource:not([hidden]))>.hud-reliquary {flex-direction:column;justify-content:center;gap:3px}
  .masthead:has(#souls-resource:not([hidden]))>.hud-reliquary .label,.masthead:has(#souls-resource:not([hidden]))>.hud-reliquary .hud-reliquary-bars {display:none}
  .masthead:has(#souls-resource:not([hidden]))>.hud-reliquary strong {font-size:14.5px;text-align:center}
  .masthead>.hud-reliquary {grid-row:2;grid-column:-2;align-self:stretch;margin:0;padding:10px 0 0;gap:6px;border:0;border-top:1px solid rgb(var(--bone-32));border-radius:0;background:none}
  .hud-reliquary-art {width:30px;height:30px;background-size:auto 40px}
  .hud-reliquary strong {font-size:clamp(14px,calc(4.6vw - 2px),18px)}
  .hud-reliquary .label {font-size:11px;letter-spacing:1px}
  .hud-reliquary-bars progress {width:9px;height:3px}
}

/* Grave Contracts (schema 48): three tasks with progress bars, and the Seal shop. */
.contract-list {list-style:none;margin:0;padding:0 16px;display:flex;flex-direction:column;gap:8px}
.contract {padding:9px 10px;border:1px solid rgb(var(--bone-32));border-radius:3px;background:rgb(var(--stone-20))}
.contract.done {border-color:rgb(var(--moss-59));background:linear-gradient(rgb(var(--stone-26)),rgb(var(--stone-20)))}
.contract.empty {color:var(--muted);font-size:14.5px;border-style:dashed}
.contract .line {display:flex;justify-content:space-between;align-items:center;gap:8px}
.contract strong {font:15px Georgia,serif;color:var(--ink)}
.contract-pay {font-size:14px;color:var(--gold);white-space:nowrap}
.contract progress {width:100%;margin:6px 0 4px}
.contract small {color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
.contract .primary {padding:6px 12px}
.contract-shop-title {margin:14px 16px 6px;font:600 15px Georgia,serif;color:var(--gold)}
.contract-shop {padding:0 16px 14px;display:flex;flex-direction:column;gap:6px}
.contract-goods {display:flex;align-items:center;gap:10px;padding:7px 9px;border:1px solid rgb(var(--bone-32));border-radius:3px;background:rgb(var(--stone-17))}
.contract-goods>div {flex:1;min-width:0}
.contract-goods strong {display:block;font-size:14.5px;color:var(--ink)}
.contract-goods small {color:var(--muted);font-size:14px}
/* Accounts (schema 50): guest play, the register banner and dialog, and the mail-link modes of the sign-in screen. */
.auth-info {color:rgb(var(--bone-77));font-size:14.5px;margin:0 0 10px;min-height:0}
.auth-info:empty {display:none}
.auth-panel>.auth-forgot {margin:14px auto 0;color:rgb(var(--bone-73))}
.auth-guest {margin:22px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:8px}
.auth-guest .secondary {width:100%;padding:12px;font-size:15px}
.auth-guest p {font-size:14px;color:rgb(var(--bone-69));line-height:1.5}
.auth-guest[hidden],.auth-forgot[hidden] {display:none}
.auth-panel>#auth-switch {margin:18px auto 30px}
.account-banner {display:flex;align-items:center;gap:13px;padding:12px 15px;margin-bottom:17px;border:1px solid rgb(var(--gold-46));border-left:3px solid var(--gold);border-radius:3px;background:linear-gradient(90deg,rgb(var(--stone-26)),rgb(var(--stone-20)))}
.account-banner[hidden] {display:none}
.account-banner>.icon {flex:none;width:26px;height:26px;color:var(--gold)}
.account-banner>div {flex:1;display:grid;gap:3px;min-width:0}
.account-banner strong {font-size:15px;color:rgb(var(--gold-87))}
.account-banner span {font-size:14px;color:rgb(var(--bone-77));line-height:1.5}
.account-banner.confirm {border-left-color:rgb(var(--moss-74))}
.account-banner.confirm>.icon {color:rgb(var(--moss-76))}
.entitlement.guest {color:rgb(var(--gold-78))}
.register-perks {display:grid;gap:6px;margin:0;padding-left:18px;font-size:14.5px;color:var(--ink);line-height:1.5}
.register label {font-size:14px;color:rgb(var(--bone-73));margin-bottom:-6px}
.register input {width:100%;padding:11px;border:1px solid rgb(var(--bone-40));background:rgb(var(--stone-20));color:rgb(var(--stone-88));border-radius:3px}
#register-name-field {display:grid;gap:12px}
#register-name-field[hidden] {display:none}
@media(max-width:720px) {.account-banner {flex-wrap:wrap;gap:9px;padding:11px 10px}.account-banner>div {flex-basis:calc(100% - 40px)}.account-banner .small-button {margin-left:auto}.account-banner strong {font-size:14.5px}.account-banner span {font-size:13.5px}}

/* The Bone Garden (schema 51) */
.garden-plot {position:relative;z-index:0;list-style:none;margin:0 auto;padding:0;max-width:600px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px}
.grave {container:garden-grave/inline-size;position:relative;min-width:0;padding:0 0 6px;border-radius:4px;display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center}
.grave b {font:15px/1.25 Georgia,serif;color:var(--ink);overflow-wrap:anywhere;margin-top:2px}
.grave small {color:var(--muted);font-size:14px;line-height:1.3}
.grave.ripe {background:radial-gradient(ellipse 58% 34% at 50% 58%,rgb(var(--moss-84) / .09),transparent 72%)}
.grave.sprouted b {color:var(--gold)}
.grave .primary {position:absolute;z-index:3;left:50%;top:calc(84cqw - 36px);translate:-50% 0;padding:5px 12px;border-color:rgb(var(--moss-64));background:linear-gradient(rgb(var(--moss-49)),rgb(var(--bone-32)));color:rgb(var(--bone-96));box-shadow:0 0 16px rgb(var(--moss-84) / .24),inset 0 1px rgb(var(--moss-97) / .18)}
.grave .text-button {margin-top:auto;padding:2px 0 0;font-size:14px;color:rgb(var(--bone-62));text-decoration-color:rgb(var(--bone-40) / .6)}
.grave.empty {padding:0}
.grave-pick {all:unset;box-sizing:border-box;width:100%;height:100%;padding:0 0 8px;border-radius:4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--muted);font-size:14.5px;text-align:center}
.grave-pick:focus-visible {outline:2px solid var(--gold);outline-offset:-2px}
.grave.chosen {background:radial-gradient(ellipse 62% 38% at 50% 58%,rgb(var(--gold-78) / .1),transparent 72%)}
.garden-title {margin:0 2px 8px;font:600 15px Georgia,serif;letter-spacing:.4px;color:var(--gold)}
.garden-seeds {padding:0;display:flex;flex-direction:column;gap:10px}
.garden-log {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.garden-log li {position:relative;padding:0 0 10px;border:1px solid rgb(var(--stone-26));border-radius:2px;background:linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-17)));display:flex;flex-direction:column;gap:0;color:var(--muted);min-width:0}
.garden-log li.found {border-color:rgb(var(--bone-36));background:linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-17)));color:var(--ink)}
.garden-log .line {display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:2px 8px}
.garden-log small {font-size:14px;line-height:1.4;color:var(--muted)}
.garden-log .garden-total {grid-column:1/-1;border:0;background:none;padding:2px 2px 0}

/* Compact layout: one view per tab, Home carries an overview of every unlocked system. On phones the tabs
   sit in a bar at the bottom of the screen and the balances fold into two short lines. */
.view-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));grid-auto-rows:4px;gap:0 16px;align-items:start}
.view-grid>.panel {margin:0;min-width:0}
.view-home {display:grid;grid-template-columns:minmax(0,1.4fr) minmax(340px,1fr);gap:16px;align-items:start}
.home-main,.home-side {display:grid;gap:14px;min-width:0;align-content:start}
.home-main>*,.home-side>* {margin:0}
.home-harvest {display:grid;gap:10px}
.home-harvest .dominion-banner {min-height:0}
.home-harvest .chapter-two .banner-head p {display:none}
.home-harvest .banner-head {padding:12px 18px 8px}
.home-harvest .banner-head h1,.home-harvest .banner-head h2 {font-size:23px;margin:4px 0 2px}
.home-harvest .harvest-lands,.home-harvest .harvest-land {min-height:104px}
.home-harvest .harvest-land {padding:10px 12px}
.home-harvest .harvest-name {font-size:18px}
.home-harvest .harvest-caption {display:none}
/* The Reaper's Harvest's next objective, under the banner's title: shown on phones too, where the banner's
   description folds away. */
.hand-quest {display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:6px;font-size:14px;line-height:1.35;color:rgb(var(--bone-83))}
.home-harvest .banner-head .hand-quest {display:flex}
.hand-quest .icon {width:16px;height:16px;flex:none;color:rgb(var(--moss-86))}
.hand-quest .hand-goal-text {flex:0 1 auto;min-width:0}
.hand-quest progress {width:90px;height:6px;margin:0;flex:none}
.hand-quest .hand-strength {font-size:13px;color:var(--muted)}
.hand-quest .hand-strength.weary {flex-basis:100%;color:rgb(var(--ember-75))}

.view-tabs a {display:inline-flex;align-items:center;gap:7px;position:relative}
.view-tabs .icon {width:15px;height:15px}
.view-tabs .tab-badge {background:rgb(var(--ember-48));color:rgb(var(--bone-96));font-size:13px;font-weight:700;min-width:16px;height:16px;line-height:16px;padding:0 4px;border-radius:8px;text-align:center}

.overview-panel .panel-heading {padding:11px 14px}
.overview-list {list-style:none;margin:0;padding:4px 0}
.overview-row {display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) auto;align-items:center;gap:10px;min-height:40px;padding:4px 14px;border-top:1px solid rgb(var(--stone-26))}
.overview-row:first-child {border-top:0}
.overview-name {display:flex;align-items:center;gap:7px;min-width:0;color:rgb(var(--bone-83))}
.overview-name b {font:15px Georgia,serif;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.overview-name .icon {width:15px;height:15px;color:rgb(var(--bone-62))}
.overview-text {font-size:14px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.overview-action {min-width:74px;padding:6px 10px;font-size:14px}
/* A ready row: its system's picture in a glowing ring, its colour washed across the row, a stamp before the
   text and a lit button, so whatever waits on the player stands out from the calm rows. */
.overview-panel {position:relative}
.overview-art,.overview-tag {display:none}
.overview-row.ready {--tone:var(--gold-bright);position:relative;grid-template-columns:46px minmax(0,1fr) auto;grid-template-areas:'art name action' 'art text action';gap:2px 12px;min-height:62px;padding:8px 14px 8px 12px;background:linear-gradient(90deg,rgb(var(--bone-32) / .33),transparent 80%);background:linear-gradient(90deg,color-mix(in srgb,var(--tone) 16%,transparent),transparent 80%);box-shadow:inset 3px 0 0 var(--tone)}
.overview-row.ready .overview-art {display:block;grid-area:art;width:44px;height:44px;border-radius:50%;background:var(--art,none) center/cover rgb(var(--stone-20));box-shadow:0 0 0 2px rgb(var(--stone-15)),0 0 0 3px var(--tone);box-shadow:0 0 0 2px rgb(var(--stone-15)),0 0 0 3px var(--tone),0 0 14px color-mix(in srgb,var(--tone) 55%,transparent)}
.overview-row.ready .overview-name {grid-area:name;color:var(--tone)}
.overview-row.ready .overview-name .icon {display:none}
.overview-row.ready .overview-text {grid-area:text;color:var(--ink)}
.overview-row.ready .overview-tag {display:inline-block;margin-right:8px;padding:0 7px;border-radius:9px;background:var(--tone);color:rgb(var(--stone-17));font:normal 700 12px/18px system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;vertical-align:1px}
.overview-row.ready .overview-action {grid-area:action;border-color:var(--tone);background:var(--tone);color:rgb(var(--stone-17));box-shadow:0 0 12px color-mix(in srgb,var(--tone) 45%,transparent)}
.overview-row[data-look="conquest"] {--tone:rgb(var(--blood-67));--art:url('/assets/reference/battlefield.jpg')}
.overview-row[data-look="idle"] {--tone:rgb(var(--bone-83));--art:url('/assets/reference/warrior.jpg')}
.overview-row[data-look="endless"] {--tone:rgb(var(--spirit-76));--art:url('/assets/reference/wasteland.jpg')}
.overview-row[data-look="ritual"] {--tone:rgb(var(--gold-76));--art:url('/assets/reference/ritual.jpg')}
.overview-row[data-look="summoning"] {--tone:rgb(var(--arcane-78));--art:url('/assets/reference/lair.jpg')}
.overview-row[data-look="golem-forge"] {--tone:rgb(var(--ember-71));--art:url('/assets/reference/fire-golem.jpg')}
.overview-row[data-look="revival"] {--tone:rgb(var(--moss-85));--art:url('/assets/reference/souls.jpg')}
.overview-row[data-look="grimoire"] {--tone:rgb(var(--moss-85));--art:url('/assets/reference/mage.jpg')}
.overview-row[data-look="grave-games"] {--tone:rgb(var(--gold-83));--art:url('/assets/reference/dark-energy.jpg')}
.overview-row[data-look="garden"] {--tone:rgb(var(--moss-84));--art:url('/assets/reference/bones.jpg')}
.overview-row[data-look="objectives"] {--tone:rgb(var(--gold-87));--art:url('/assets/reference/dark-energy.jpg')}
.overview-row[data-look="contracts"] {--tone:rgb(var(--gold-87));--art:url('/assets/reference/relic.jpg')}
.reward-pop {position:absolute;left:50%;z-index:3;pointer-events:none;white-space:nowrap;padding:4px 14px;border:1px solid currentColor;border-radius:16px;background:rgb(var(--stone-15) / .93);box-shadow:0 0 16px currentColor;font:700 16px Georgia,serif;color:var(--gold-bright);text-shadow:0 0 8px currentColor}
@media(prefers-reduced-motion:no-preference) {
  .overview-row.ready .overview-art {animation:overview-breathe 2.6s ease-in-out infinite}
  .overview-row.ready:after {content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 40%,color-mix(in srgb,var(--tone) 14%,transparent) 50%,transparent 60%) 150% 0/250% 100% no-repeat;animation:overview-sweep 5s ease-in-out infinite}
  .overview-row.fresh {animation:overview-bloom 1.5s ease-out}
  .overview-row.fresh .overview-art {animation:overview-arrive .7s cubic-bezier(.3,1.6,.5,1),overview-breathe 2.6s ease-in-out .7s infinite}
  @keyframes overview-breathe {50% {box-shadow:0 0 0 2px rgb(var(--stone-15)),0 0 0 3px var(--tone),0 0 26px color-mix(in srgb,var(--tone) 85%,transparent)}}
  @keyframes overview-sweep {0% {background-position:150% 0} 55%,100% {background-position:-50% 0}}
  @keyframes overview-bloom {0% {background-color:color-mix(in srgb,var(--tone) 45%,transparent)} 100% {background-color:transparent}}
  @keyframes overview-arrive {0% {scale:.2;opacity:0} 100% {scale:1;opacity:1}}
}
.account-toggle {display:none}
.account-menu {display:contents}

/* Desktop: a shorter top bar. */
@media(min-width:721px) {
  .pinned-hud .masthead {min-height:72px;padding:10px 20px}
  .pinned-hud .brand-seal {width:36px;height:43px}
  .pinned-hud .brand-seal .icon {width:24px;height:24px}
}
@media(max-width:1100px) {.view-home {grid-template-columns:1fr}.home-main,.home-side {display:contents}.view-home>*>* {order:3}.view-home .next-step {order:1}.view-home #overview {order:2}.view-home .home-harvest {order:3}.view-home .legion-summary {order:4}.view-home #chronicle {order:6}}

/* Phones: two short lines of balances on top, the tabs as a bar at the bottom. */
@media(max-width:720px) {
  html {scroll-padding-top:calc(var(--hud-height, 110px) + 10px)}
  .game-shell {padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .pinned-hud {left:6px;right:6px;width:auto;transform:none}
  .pinned-hud .masthead {display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 12px;min-height:0;position:relative}
  .pinned-hud .masthead:after {content:'';order:1;flex-basis:100%;height:0}
  .pinned-hud .brand {order:0;flex:1 1 auto;min-width:0}
  .pinned-hud .brand-seal {display:none}
  .pinned-hud .brand .wordmark {font-size:19px}
  .pinned-hud .wordmark small {display:none}
  .pinned-hud .account {order:0;flex:none;flex-direction:row;align-items:center;gap:6px;border:0;padding:0;min-width:0}
  .pinned-hud .account .label {display:none}
  .pinned-hud .account strong {font-size:14.5px;max-width:140px}
  .pinned-hud .masthead>.resource,.pinned-hud .masthead>.hud-reliquary {order:2;flex:1 1 0;min-width:0;border:0;padding:0;margin:0}
  .pinned-hud .masthead>.hud-reliquary {flex:none;flex-direction:row;background:none}
  .pinned-hud .masthead>.hud-reliquary .hud-reliquary-bars,.pinned-hud .masthead>.hud-reliquary .label {display:none}
  .pinned-hud .hud-reliquary-art {width:26px;height:26px;background-size:auto 34px}
  .pinned-hud .resource .label {font-size:11px;letter-spacing:1px}
  .pinned-hud .resource strong,.pinned-hud .energy-resource strong {font-size:clamp(15px,5vw,20px);line-height:1.15}
  .pinned-hud .resource small {font-size:12px}
  .pinned-hud .nav-row {position:fixed;left:0;right:0;bottom:0;z-index:16;padding:0 0 env(safe-area-inset-bottom);background:rgb(var(--stone-17));border-top:1px solid rgb(var(--bone-36));box-shadow:0 -6px 18px rgb(var(--stone-0) / .67)}
  .pinned-hud nav.view-tabs {display:flex;width:100%;overflow:visible;padding:0;gap:0}
  .view-tabs a {flex:1 1 0;min-width:0;flex-direction:column;justify-content:center;gap:3px;height:56px;padding:4px 0 2px;border:0;border-radius:0;background:none;font-size:13px;letter-spacing:.2px;color:rgb(var(--bone-69))}
  .view-tabs a.active {background:linear-gradient(rgb(var(--bone-32)),rgb(var(--stone-20)));box-shadow:inset 0 2px 0 rgb(var(--ember-71));color:rgb(var(--gold-87))}
  .view-tabs .icon {width:20px;height:20px}
  .view-tabs .tab-badge {position:absolute;top:4px;left:calc(50% + 6px);font-size:12px;min-width:14px;height:14px;line-height:14px}
  /* German tab names run longer ("Schmiede", "Grimoire" side by side): a hair smaller, no tracking. */
  html[lang="de"] .view-tabs a {font-size:12.5px;letter-spacing:0}
  @media(max-width:380px) {html[lang="de"] .view-tabs a {font-size:11.5px}}
  .view-tabs a span {max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .view-home {gap:10px}
  .view-grid {column-gap:12px}
  .home-harvest {gap:8px}
  .home-harvest .banner-head {padding:9px 12px 6px}
  .home-harvest .banner-head p {display:none}
  .home-harvest .banner-head h1,.home-harvest .banner-head h2 {font-size:19px}
  .home-harvest .banner-head .eyebrow {font-size:11px}
  .home-harvest .harvest-lands {grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));min-height:0}
  .home-harvest .harvest-land {min-height:64px;padding:7px 8px;gap:2px}
  .home-harvest .harvest-name {font-size:15px;line-height:1.15}
  .home-harvest .harvest-foot strong {font-size:13px}
  .home-harvest .harvest-foot small {font-size:12px}
  .home-harvest .harvest-find {display:none}
  .view-home .next-step {margin:0}
  .overview-row {grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'name action' 'text action';gap:1px 10px;padding:6px 12px}
  .overview-name {grid-area:name}
  .overview-text {grid-area:text;font-size:13.5px}
  .overview-action {grid-area:action}
  .overview-row.ready {grid-template-columns:42px minmax(0,1fr) auto;padding:8px 12px 8px 10px}
  .overview-row.ready .overview-art {width:40px;height:40px}
}
/* Phones and tablets (up to 880px): the account menu folds behind the ▾ beside the name. On a tablet the five
   links in one row were wider than the space beside the balances and ran off the bar. */
@media(max-width:880px) {
  .account-toggle {display:grid;place-items:center;width:30px;height:30px;border:1px solid rgb(var(--bone-40));border-radius:3px;background:rgb(var(--stone-20));color:var(--gold);font-size:14.5px;padding:0}
  .account-menu {display:none}
  .masthead.account-open .account-menu {display:flex;position:absolute;z-index:3;top:calc(100% + 4px);right:0;flex-direction:column;align-items:flex-end;gap:10px;padding:12px 14px;border:1px solid rgb(var(--bone-40));border-radius:4px;background:rgb(var(--stone-20));box-shadow:0 10px 24px rgb(var(--stone-0) / .8)}
  .masthead.account-open .account-actions {flex-direction:column;align-items:flex-end;gap:10px}
  .masthead.account-open .account-actions .text-button {font-size:15px}
  /* A label that wraps ("DARK ENERGY", "KNOCHEN-STAUB") grows upward, so the figures stay on one line across. */
  .masthead>.resource {align-self:flex-end}
}
@media(min-width:721px) and (max-width:880px) {
  .pinned-hud .masthead {position:relative}
  .masthead>.account {flex:0 1 auto;min-width:0;flex-direction:row;align-items:center;gap:8px}
  .account strong {max-width:150px}
}
/* German runs longer ("Meldungen", "Gruft verlassen"), so its account menu folds up to 1340px. Unfolded, the links
   squeezed the balances until KNOCHENSTAUB ran into SEELEN and the Dark Energy figures spilled. */
@media(min-width:881px) and (max-width:1340px) {
  html[lang="de"] .account-toggle {display:grid;place-items:center;width:30px;height:30px;border:1px solid rgb(var(--bone-40));border-radius:3px;background:rgb(var(--stone-20));color:var(--gold);font-size:14.5px;padding:0}
  html[lang="de"] .account-menu {display:none}
  html[lang="de"] .masthead.account-open .account-menu {display:flex;position:absolute;z-index:3;top:calc(100% + 4px);right:0;flex-direction:column;align-items:flex-end;gap:10px;padding:12px 14px;border:1px solid rgb(var(--bone-40));border-radius:4px;background:rgb(var(--stone-20));box-shadow:0 10px 24px rgb(var(--stone-0) / .8)}
  html[lang="de"] .masthead.account-open .account-actions {flex-direction:column;align-items:flex-end;gap:10px}
  html[lang="de"] .masthead.account-open .account-actions .text-button {font-size:15px}
  html[lang="de"] .pinned-hud .masthead {position:relative}
  html[lang="de"] .masthead>.account {flex:0 1 auto;min-width:0;flex-direction:row;align-items:center;gap:8px}
  html[lang="de"] .account .label {display:none}
  html[lang="de"] .account strong {max-width:150px}
  html[lang="de"] .masthead>.resource {align-self:flex-end}
}
.view-tabs a span {background:none;color:inherit;font-size:inherit;padding:0;margin:0;border-radius:0}
.view-jumps {display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.view-jumps a {font-size:14px;padding:6px 11px;border:1px solid rgb(var(--bone-32));border-radius:14px;color:rgb(var(--bone-77));background:rgb(var(--stone-20))}
.view-jumps a:hover {border-color:rgb(var(--gold-55));color:var(--gold-bright)}
.view-waiting {display:flex;flex-direction:column;gap:4px;margin:0 0 12px;padding:8px 12px;border:1px solid rgb(var(--bone-32));border-left:3px solid rgb(var(--ember-48));border-radius:6px;background:rgb(var(--stone-20));font-size:14.5px}
.view-waiting a {color:rgb(var(--gold-87))}
.view-waiting a:before {content:'!';display:inline-block;width:14px;height:14px;margin-right:7px;border-radius:7px;background:rgb(var(--ember-48));color:rgb(var(--bone-96));font-size:13px;font-weight:700;line-height:14px;text-align:center;vertical-align:1px}
.view-waiting a:hover {color:var(--gold-bright)}
@media(min-width:1101px) {.view-jumps {display:none}}
@media(max-width:720px) {
  .view-jumps {flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -2px 10px;padding:0 2px}
  .view-jumps a {flex:none}
  /* Six narrow columns so three, two or five lands always fill their rows. */
  .home-harvest .dominion-banner .harvest-lands {grid-template-columns:repeat(6,minmax(0,1fr))}
  .home-harvest .dominion-banner .harvest-lands .harvest-land {grid-column:span 2}
  .home-harvest .dominion-banner .harvest-lands .harvest-land:first-child:nth-last-child(2),.home-harvest .dominion-banner .harvest-lands .harvest-land:first-child:nth-last-child(2)~.harvest-land,
  .home-harvest .dominion-banner .harvest-lands .harvest-land:first-child:nth-last-child(4),.home-harvest .dominion-banner .harvest-lands .harvest-land:first-child:nth-last-child(4)~.harvest-land,
  .home-harvest .dominion-banner .harvest-lands .harvest-land:first-child:nth-last-child(5)~.harvest-land:nth-child(n+4) {grid-column:span 3}
  .home-harvest .dominion-banner .harvest-lands .harvest-land:only-child {grid-column:1/-1}
}

/* The Endless Dark (schema 52) is a stair going down (September 2026 art refresh), drawn at the end of this sheet. */
/* Options: per-device settings, one checkbox row each. */
.option-row {display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:12px;border:1px solid var(--line);border-radius:4px;background:rgb(var(--stone-0) / .18);cursor:pointer}
.option-row input {width:18px;height:18px;margin:2px 0 0;accent-color:rgb(var(--gold-76));cursor:pointer}
.option-row b {display:block;color:var(--gold-bright);font-size:16px}
.option-row small {display:block;margin-top:4px;color:var(--muted);font-size:14.5px;line-height:1.45}
.option-language,.option-choice {grid-template-columns:1fr;cursor:default}
.language-choice,.option-choices {display:flex;gap:8px;flex-wrap:wrap}
.language-choice button {min-width:110px}
.option-choices button {min-width:72px}
.language-choice button[aria-pressed="true"],.option-choices button[aria-pressed="true"] {border-color:var(--gold-bright);background:rgb(var(--bone-36));color:rgb(var(--bone-96))}
.language-choice button[aria-pressed="true"]::before,.option-choices button[aria-pressed="true"]::before {content:"✓ "}
.auth-language {display:flex;justify-content:center;gap:18px;margin:-18px 0 22px}
.auth-language button[aria-pressed="true"] {color:var(--gold-bright);text-decoration:underline;text-underline-offset:4px}

/* The Grave Games (schema 53): four tomb doors set in one crypt wall, drawn by the tomb-door rules at the
   end of this file. Each door wears its name on a plaque, its step is the button that unseals or plays it,
   and its tablet below says what the game is. */
.games-panel {margin-top:16px;container-type:inline-size}
.games-panel>.panel-description {padding:12px 16px 0}
.games-list {isolation:isolate;list-style:none;margin:14px 0 0;padding:20px 14px 22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 14px;border-top:1px solid rgb(var(--stone-26));background:linear-gradient(rgb(var(--stone-15) / .9),rgb(var(--stone-15) / 0) 64px,rgb(var(--stone-15) / 0) calc(100% - 40px),rgb(var(--stone-15) / .8)),linear-gradient(rgb(var(--stone-0) / .22),rgb(var(--stone-0) / .22)),url('/assets/games/wall.svg') 0 0/192px 128px}
@container (max-width:1000px) {.games-list {grid-template-columns:repeat(2,minmax(0,1fr))}}
.game-card {position:relative;display:grid;grid-template-rows:auto auto auto 1fr;justify-items:center;align-content:start;min-width:0;text-align:center}
.game-body {display:contents}
.game-body .line {position:relative;isolation:isolate;grid-row:1;display:flex;flex-direction:column;align-items:center;gap:3px;max-width:100%;margin:0 0 10px;padding:7px 34px 8px;filter:drop-shadow(0 3px 3px rgb(var(--stone-0) / .8))}
/* The plaque is a tabula ansata: a bronze frame with a dovetail ear either side, pinned through the ears,
   round a slate field that carries the name. */
.game-body .line::before,.game-body .line::after {content:'';position:absolute;z-index:-1}
.game-body .line::before {inset:0;clip-path:polygon(15px 0,calc(100% - 15px) 0,calc(100% - 15px) 27%,100% 5%,100% 95%,calc(100% - 15px) 73%,calc(100% - 15px) 100%,15px 100%,15px 73%,0 95%,0 5%,15px 27%);background:radial-gradient(circle at 7.5px 50%,rgb(var(--gold-87)) 0 .8px,rgb(var(--gold-46)) 1.5px,rgb(var(--stone-20)) 2.3px,rgb(var(--stone-0) / 0) 2.9px),radial-gradient(circle at calc(100% - 7.5px) 50%,rgb(var(--gold-87)) 0 .8px,rgb(var(--gold-46)) 1.5px,rgb(var(--stone-20)) 2.3px,rgb(var(--stone-0) / 0) 2.9px),linear-gradient(rgb(var(--gold-66)),rgb(var(--gold-55)) 45%,rgb(var(--bone-40)) 80%,rgb(var(--gold-46)))}
.game-body .line::after {inset:2px 17px;background:linear-gradient(rgb(var(--stone-0) / .67) 0 1.5px,rgb(var(--stone-0) / 0) 1.5px calc(100% - 1px),rgb(var(--gold-83) / .19) calc(100% - 1px)),linear-gradient(90deg,rgb(var(--stone-0) / .67) 0 1px,rgb(var(--stone-0) / 0) 1px calc(100% - 1px),rgb(var(--gold-83) / .14) calc(100% - 1px)),linear-gradient(rgb(var(--stone-26)),rgb(var(--stone-26)) 50%,rgb(var(--stone-20)))}
.game-body strong {color:var(--gold-bright);font:17px/1.2 Georgia,'Times New Roman',serif;letter-spacing:.3px;text-shadow:0 1px 2px rgb(var(--stone-0))}
.game-body p {grid-row:4;width:100%;max-width:calc(var(--h)*1.25);margin:12px 0 0;padding:11px 14px 12px;color:rgb(var(--bone-73));font-size:14.5px;line-height:1.45;border:1px solid rgb(var(--bone-32));border-radius:2px;outline:1px solid rgb(var(--gold-78) / .09);outline-offset:-5px;background:linear-gradient(rgb(var(--stone-20) / .92),rgb(var(--stone-17) / .92));box-shadow:inset 0 1px 4px rgb(var(--stone-0) / .73),0 1px rgb(var(--gold-78) / .08),0 3px 8px rgb(var(--stone-0) / .53)}
.game-state {font-size:12px;letter-spacing:1.5px;color:rgb(var(--ember-60))}
.game-card.unsealed .game-state {color:var(--green)}
/* A door out of reach has no step to press: its threshold is sunk and worn, the reason cut into it. */
.game-note {grid-row:3;width:calc(var(--h)*196/240);min-height:48px;display:grid;place-items:center;padding:8px 12px 9px;font-size:14px;color:rgb(var(--bone-69));font-style:italic;line-height:1.35;border:1px solid rgb(var(--stone-20));border-bottom-color:rgb(var(--bone-32));border-radius:1px 1px 3px 3px;background:linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-26)) 55%,rgb(var(--stone-26)));box-shadow:inset 0 3px 8px rgb(var(--stone-0) / .93),0 1px rgb(var(--bone-77) / .08);text-shadow:0 1px rgb(var(--stone-0))}
.game-body .primary,.game-body .small-button {grid-row:3;width:calc(var(--h)*196/240);min-height:48px;padding:8px 12px 9px;white-space:normal;text-align:center;line-height:1.3;border-color:rgb(var(--gold-66)) rgb(var(--gold-46)) rgb(var(--bone-32));border-radius:1px 1px 3px 3px;background:linear-gradient(rgb(var(--gold-46)),rgb(var(--bone-36)) 40%,rgb(var(--stone-26)));box-shadow:inset 0 1px rgb(var(--gold-87) / .3),0 6px 10px rgb(var(--stone-0) / .8);text-shadow:0 1px 2px rgb(var(--stone-0))}
.game-card.unsealed .game-body .small-button {background:radial-gradient(ellipse 58% 90% at 50% 0,var(--tomb-haze),rgb(var(--stone-0) / 0) 70%),linear-gradient(rgb(var(--gold-46)),rgb(var(--bone-36)) 40%,rgb(var(--stone-26)))}
/* A step not yet affordable stays solid stone, its words worn faint. */
.game-body .primary:disabled {opacity:1;filter:none;color:rgb(var(--bone-62));border-color:rgb(var(--bone-40)) rgb(var(--bone-36)) rgb(var(--stone-26));background:linear-gradient(rgb(var(--bone-36)),rgb(var(--bone-32)) 40%,rgb(var(--stone-26)));text-shadow:none}
/* Pressed, the step gives under the foot. */
.game-body .primary:active:not(:disabled),.game-body .small-button:active {filter:brightness(.85);box-shadow:inset 0 2px 5px rgb(var(--stone-0) / .6)}
@container (max-width:560px) {
  .games-list {grid-template-columns:1fr;gap:18px;padding:16px 12px 18px}
  .game-card {grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:14px;justify-items:start;text-align:left}
  .game-body .line {grid-column:2;align-items:flex-start;margin:0;padding:0;filter:none}
  .game-body .line::before,.game-body .line::after {display:none}
  .game-body p {grid-column:2;grid-row:2;max-width:none;margin:8px 0 0;align-self:start}
  .game-note,.game-body .primary,.game-body .small-button {grid-column:1/-1;grid-row:3;width:100%;margin-top:12px}
}
/* Summoning show: the boss fight bar, the drop's roll and its tier (public/summon-show.js). */
.summon-show {--tier:rgb(var(--bone-62));margin:0 18px 18px;padding:10px 12px;border:1px solid rgb(var(--bone-32));border-left:3px solid var(--tier);border-radius:3px;background:radial-gradient(ellipse at 0 0,rgb(var(--blood-38) / .15),transparent 60%),rgb(var(--stone-17));cursor:pointer}
.summon-show.done {cursor:default}
.summon-show.tier-average {--tier:rgb(var(--stone-88))}
.summon-show.tier-good {--tier:rgb(var(--spirit-69))}
.summon-show.tier-great {--tier:rgb(var(--moss-78))}
.summon-show.tier-perfect {--tier:rgb(var(--gold-87));box-shadow:0 0 18px rgb(var(--gold-87) / .25),inset 0 0 12px rgb(var(--gold-87) / .13)}
.show-fight {display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center}
.show-art {display:grid;place-items:center;width:40px;height:40px;border:1px solid rgb(var(--blood-38));border-radius:50%;background:radial-gradient(rgb(var(--blood-27)),rgb(var(--stone-15)))}
.show-art .item-image {width:30px;height:30px}
.show-art:has(.relic-art) {width:52px;height:52px;overflow:hidden}
.show-art .relic-art {width:100%;height:100%}
.show-line {display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0}
.show-line b {font:17px Georgia,serif;color:rgb(var(--gold-87));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.show-line small {font:italic 14.5px Georgia,serif;color:var(--muted)}
.show-count {font-size:14px;letter-spacing:1px;color:rgb(var(--blood-53));font-variant-numeric:tabular-nums;white-space:nowrap}
.summon-show.rolling .show-count,.summon-show.done .show-count {color:var(--muted)}
.show-bar {height:7px;margin-top:6px;border-radius:2px;background:rgb(var(--stone-26));overflow:hidden}
.show-bar i {display:block;height:100%;width:0;border-radius:2px}
.show-hp i {background:linear-gradient(90deg,rgb(var(--blood-38)),rgb(var(--blood-53)));transition:width .12s ease-out}
.show-pips {display:flex;flex-wrap:wrap;gap:2px;margin-top:6px}
.show-pips i {width:6px;height:6px;border-radius:1px;background:rgb(var(--bone-62))}
.show-pips i.tier-average {background:rgb(var(--stone-88))}
.show-pips i.tier-good {background:rgb(var(--spirit-69))}
.show-pips i.tier-great {background:rgb(var(--moss-78))}
.show-pips i.tier-perfect {background:rgb(var(--gold-87));box-shadow:0 0 5px rgb(var(--gold-87))}
.show-drop {margin-top:10px;padding-top:9px;border-top:1px solid rgb(var(--stone-26))}
.show-tier {font-size:14px;font-weight:700;letter-spacing:1.5px;color:var(--tier);white-space:nowrap}
.show-rollrow {display:flex;align-items:center;gap:10px}
.show-rollrow .show-bar {flex:1;height:9px;margin-top:0}
.show-roll i {background:var(--tier)}
.show-pct {min-width:52px;text-align:right;font:600 16px Georgia,serif;color:var(--tier);font-variant-numeric:tabular-nums}
.show-foot {margin-top:6px;align-items:center}
.show-foot:has(.show-badges:empty):has(.show-reward:empty) {display:none}
.show-badges {display:flex;flex-wrap:wrap;gap:5px}
.show-badge {font-size:13.5px;font-weight:700;letter-spacing:1px;padding:2px 6px;border:1px solid currentColor;border-radius:2px}
.show-badge.perfect {color:rgb(var(--gold-87))}
.show-badge.best {color:rgb(var(--moss-78))}
.show-badge.burned {color:rgb(var(--arcane-78))}
.show-reward {font:600 17px Georgia,serif;color:var(--gold-bright);white-space:nowrap}
.show-summary {margin:5px 0 0;font-size:14.5px;color:var(--muted)}
.show-summary:empty {display:none}
@media(max-width:640px) {.summon-show {margin:0 12px 14px}}
@media(prefers-reduced-motion:no-preference) {
  .show-art.struck {animation:show-struck .18s ease-out}
  @keyframes show-struck {0% {transform:translateX(0);box-shadow:0 0 0 rgb(var(--blood-53))}30% {transform:translateX(-3px) scale(1.08);box-shadow:0 0 14px rgb(var(--blood-53))}60% {transform:translateX(3px)}100% {transform:none;box-shadow:0 0 0 rgb(var(--blood-53))}}
  .show-pips i {animation:show-pip .2s ease-out}
  @keyframes show-pip {from {transform:scale(2.2);opacity:0}to {transform:none;opacity:1}}
  .summon-show.landed {animation:show-landed .45s ease-out}
  @keyframes show-landed {0% {box-shadow:0 0 0 var(--tier)}40% {box-shadow:0 0 22px var(--tier)}100% {box-shadow:0 0 0 transparent}}
  .summon-show.tier-perfect.landed {animation:show-landed .45s ease-out 3}
  .summon-show.done .show-tier,.summon-show.done .show-badge {animation:show-pop .3s ease-out}
  @keyframes show-pop {from {transform:scale(1.5);opacity:0}to {transform:none;opacity:1}}
}

/* Seal shop shelves (Grave Contracts, shop version 2): a heading per shelf; closed goods fade. */
.contract-shelf {margin:8px 0 2px;font:600 14px Georgia,serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.contract-shelf:first-child {margin-top:0}
.contract-goods.closed {opacity:.6}

/* Keep the title clear of the account controls on narrow phones. */
@media(max-width:420px) {
  .brand .wordmark {font-size:clamp(18px,5.5vw,23px)}
  .brand .wordmark small {font-size:11px;letter-spacing:1px}
}
/* Torchlit cabinet and crypt dioramas. Artwork has room to read as a collectible. */
.trophy-grid {grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:10px}
.trophy {border-radius:0;padding:0 0 12px;gap:7px;background:rgb(var(--stone-17));border-color:rgb(var(--bone-32));position:relative}
.relic-art,.relic-unknown {display:block;width:100%;aspect-ratio:1;background-color:rgb(var(--stone-17))}
.relic-art {background-image:url('/assets/illustrations/reliquary.png');background-size:800% 500%;background-position:var(--relic-x) var(--relic-y)}
.relic-unknown {display:grid;place-items:center;font:52px Georgia,serif;color:rgb(var(--gold-46));background:radial-gradient(ellipse,rgb(var(--stone-26)),transparent 70%);text-shadow:0 2px 0 rgb(var(--stone-0))}
.trophy .trophy-name {font-family:Georgia,serif;font-size:14.5px;padding:0 8px;line-height:1.35}
.trophy small {font-size:13.5px;padding:0 6px}
.trophy.found {border-color:rgb(var(--gold-55));background:rgb(var(--stone-20));box-shadow:inset 0 -2px rgb(var(--gold-55))}
.trophy.found:after {content:'';position:absolute;inset:5px;pointer-events:none;border:1px solid rgb(var(--gold-66) / .2)}
.wb-relic.traded .relic-art {filter:saturate(.45);opacity:.65}
.delve-scene {min-height:450px;border-radius:0;border:1px solid rgb(var(--bone-55));background:rgb(var(--stone-17))}
.delve-scene-heading {position:absolute;top:16px;left:18px;right:18px;z-index:2;display:flex;flex-direction:column;gap:6px;pointer-events:none;text-shadow:0 2px 8px rgb(var(--stone-0))}
.delve-scene-heading span {font-size:13px;letter-spacing:3px;color:rgb(var(--bone-69))}
.delve-scene-heading strong {font:clamp(16px,2.2vw,23px) Georgia,serif;color:rgb(var(--stone-88))}
.delve-overlay {top:auto;bottom:34px;align-items:flex-end;text-align:right;z-index:2;padding:0 18px;gap:3px;background:linear-gradient(0deg,rgb(var(--stone-15) / .66),transparent)}
.delve-overlay strong {font-size:32px}
.delve-overlay span {font-size:13.5px;letter-spacing:1.6px}
.delve-overlay em {font-size:14px;max-width:80%;color:rgb(var(--bone-77))}
.delve-scene[data-phase="ended"] .delve-overlay strong {font-size:clamp(17px,2vw,25px)}
.delve-scene[data-phase="betting"] .delve-overlay strong {font-size:36px}
.delve-army-note {position:absolute;bottom:10px;left:16px;right:16px;z-index:2;color:rgb(var(--bone-69));font-size:13.5px;letter-spacing:.6px;text-shadow:0 1px 5px rgb(var(--stone-0));pointer-events:none}
.battle {width:min(1120px,calc(100vw - 32px));max-width:1120px}
.battle-scene {height:360px;margin-bottom:18px;border-bottom:1px solid rgb(var(--gold-46))}
.battle-scene canvas {position:absolute;inset:0;width:100%;height:100%;display:block}
.battle-scene-caption {position:absolute;bottom:12px;left:18px;z-index:2;letter-spacing:3px;font-size:13px;color:rgb(var(--bone-77));text-shadow:0 2px 8px rgb(var(--stone-0))}
.combat-webgl[hidden] {display:none}
/* The worldboss window (schema 68): scene with its clock, the boss's stats, the legion choice or the fight. */
/* The battle scene is the window's centrepiece (Lemp, 2026-09-30): big, the boss looming on it, its name and
   clock over the art, the boss's numbers as small chips with their meaning behind a ?. */
.battle form {gap:12px}
.battle .battle-scene {height:clamp(320px,58vh,560px);margin-bottom:2px;border-bottom:1px solid rgb(var(--gold-55))}
.battle[data-mode="choose"] .battle-scene {height:clamp(240px,40vh,380px)}
.battle .battle-scene progress {position:absolute;left:0;right:0;bottom:0;z-index:5;margin:0;height:4px;border-radius:0}
.battle[data-phase="warning"] .battle-scene progress {display:none}
.battle-scene:after {background:linear-gradient(0deg,rgb(var(--stone-17)) 0%,rgb(var(--stone-17) / 0) 45%),radial-gradient(ellipse at 50% 50%,transparent 55%,rgb(var(--stone-0) / .55))}
.battle-embers {position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;background:linear-gradient(0deg,rgb(var(--stone-0) / .8),rgb(var(--stone-0) / 0) 36%),linear-gradient(180deg,rgb(var(--stone-0) / .72),rgb(var(--stone-0) / 0) 34%),radial-gradient(ellipse at 50% 55%,transparent 45%,rgb(var(--stone-0) / .6))}
.battle-embers:before {content:'';position:absolute;inset:0;opacity:.6;background-image:radial-gradient(circle,rgb(var(--ember-71) / .9) 0 1.5px,transparent 2.5px),radial-gradient(circle,rgb(var(--gold-83) / .7) 0 1px,transparent 2px);background-size:180px 220px,110px 150px;background-position:20px 0,70px 40px;animation:battle-embers 9s linear infinite}
@keyframes battle-embers {to {background-position:20px -220px,70px -110px}}
.battle-boss {position:absolute;z-index:2;right:24px;bottom:18px;height:calc(100% - 40px);width:auto;aspect-ratio:4/5;object-fit:contain;transform-origin:50% 90%;filter:drop-shadow(0 0 26px rgb(var(--arcane-72) / .45)) drop-shadow(0 16px 28px rgb(var(--stone-0) / .85));animation:boss-breathe 5s ease-in-out infinite}
.battle-boss.struck {animation:boss-struck .55s ease-out,boss-breathe 5s ease-in-out .55s infinite}
.battle[data-phase="warning"] .battle-boss {filter:brightness(.32) grayscale(.4) drop-shadow(0 0 24px rgb(var(--ember-68) / .6))}
@keyframes boss-breathe {50% {transform:translateY(-5px) scale(1.015)}}
@keyframes boss-struck {0% {filter:brightness(2.1) drop-shadow(0 0 30px rgb(var(--ember-71) / .9))} 20% {transform:translateX(-7px) rotate(-1deg)} 45% {transform:translateX(5px) rotate(.6deg)} 100% {transform:none}}
.battle-hits {position:absolute;z-index:4;right:24px;bottom:18px;height:calc(100% - 40px);aspect-ratio:4/5;pointer-events:none}
.battle-hit {position:absolute;left:50%;top:34%;translate:calc(-50% + var(--hit-x,0px)) 0;white-space:nowrap;font:700 32px Georgia,serif;color:rgb(var(--ember-75));text-shadow:0 0 14px rgb(var(--ember-68) / .85),0 2px 4px rgb(var(--stone-0));animation:battle-hit 1.9s ease-out forwards}
@keyframes battle-hit {0% {opacity:0;transform:translateY(14px) scale(.6)} 15% {opacity:1;transform:translateY(0) scale(1.18)} 100% {opacity:0;transform:translateY(-80px) scale(1)}}
.battle-head {position:absolute;z-index:3;top:18px;left:22px;max-width:52%;display:grid;justify-items:start;gap:4px}
.battle-head .eyebrow {text-shadow:0 1px 6px rgb(var(--stone-0))}
.battle-name {display:flex;align-items:center;gap:2px}
.battle-head h2 {margin:0;font-size:40px;line-height:1.08;letter-spacing:.4px;text-shadow:0 2px 14px rgb(var(--stone-0)),0 0 32px rgb(var(--gold-76) / .3)}
.boss-stats {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.boss-stat {display:grid;gap:3px;padding:8px 10px;border:1px solid rgb(var(--bone-32));border-radius:3px;background:rgb(var(--stone-15) / .6)}
.boss-stat small {font-size:12px;letter-spacing:1.4px;color:var(--gold)}
.boss-stat b {font:22px Georgia,serif;color:rgb(var(--bone-96))}
.boss-stat em {font-style:normal;font-size:13px;color:var(--muted);line-height:1.35}
.boss-stat meter {width:100%;height:6px;display:block;appearance:none;border:0;border-radius:3px;background:rgb(var(--stone-15))}
.boss-stat meter::-webkit-meter-bar {background:rgb(var(--stone-15));border:0;border-radius:3px;height:6px;box-shadow:inset 0 1px 2px rgb(var(--stone-0))}
.boss-stat meter::-webkit-meter-optimum-value,.boss-stat meter::-webkit-meter-suboptimum-value,.boss-stat meter::-webkit-meter-even-less-good-value {background:linear-gradient(90deg,rgb(var(--gold-55)),rgb(var(--gold-83)));border-radius:3px}
.battle-head .boss-stats {display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
.battle-head .boss-stat {grid-template-columns:auto auto;align-items:baseline;gap:1px 6px;padding:4px 8px 5px;background:rgb(var(--stone-15) / .72)}
.battle-head .boss-stat small {font-size:11px;letter-spacing:1.1px}
.battle-head .boss-stat b {font-size:15px}
.battle-head .boss-stat meter {grid-column:1/-1;height:3px;border-radius:2px}
.battle-head .boss-stat meter::-webkit-meter-bar {height:3px;border-radius:2px;box-shadow:none}
.boss-stat[data-stat="resist"] meter::-webkit-meter-optimum-value,.boss-stat[data-stat="resist"] meter::-webkit-meter-suboptimum-value,.boss-stat[data-stat="resist"] meter::-webkit-meter-even-less-good-value {background:linear-gradient(90deg,rgb(var(--arcane-52)),rgb(var(--arcane-78)))}
.boss-stat[data-stat="might"] meter::-webkit-meter-optimum-value,.boss-stat[data-stat="might"] meter::-webkit-meter-suboptimum-value,.boss-stat[data-stat="might"] meter::-webkit-meter-even-less-good-value {background:linear-gradient(90deg,rgb(var(--blood-38)),rgb(var(--blood-53)))}
.boss-stat meter::-moz-meter-bar {background:rgb(var(--gold-78));border-radius:3px}
.battle-clock {position:absolute;z-index:3;left:22px;bottom:16px;display:flex;align-items:baseline;gap:10px;text-shadow:0 2px 8px rgb(var(--stone-0))}
.battle-clock small {font-size:12px;letter-spacing:2px;color:var(--gold)}
.battle-clock b {font:44px/1 Georgia,serif;color:var(--gold-bright);text-shadow:0 0 18px rgb(var(--gold-76) / .5),0 2px 8px rgb(var(--stone-0))}
.battle[data-phase="warning"] .battle-clock b {color:rgb(var(--ember-71));text-shadow:0 0 18px rgb(var(--ember-68) / .55)}
.battle-clock .battle-scene-caption {position:static;font-size:12px;letter-spacing:3px}
.battle-assure {margin:0;padding:9px 14px 9px 36px;position:relative;border:1px solid rgb(var(--moss-59));border-radius:3px;background:linear-gradient(90deg,rgb(var(--moss-44) / .28),rgb(var(--stone-17) / .2));color:rgb(var(--moss-87));font-size:14.5px;line-height:1.45}
.battle-assure:before {content:'✓';position:absolute;left:13px;top:8px;font:600 16px 'Segoe UI',sans-serif;color:rgb(var(--moss-80))}
.battle-assure[data-tone="paused"] {border-color:rgb(var(--ember-48));background:linear-gradient(90deg,rgb(var(--blood-27) / .6),rgb(var(--stone-17) / .2));color:rgb(var(--ember-75))}
.battle-assure[data-tone="paused"]:before {content:'!';color:rgb(var(--ember-71))}
.battle-choose h3 {margin:0}
.boss-hint {margin:0;font-size:14px;color:rgb(var(--bone-83))}
@media(prefers-reduced-motion:reduce) {.battle-boss,.battle-boss.struck,.battle-embers:before {animation:none}.battle-hit {animation:none;top:24%}}
.battle-choose,.battle-fight {display:grid;gap:10px}
.battle-choose[hidden],.battle-fight[hidden] {display:none}
.battle-legions {display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.battle-pick {display:grid;gap:4px;align-content:start;text-align:left;padding:10px 12px;border:1px solid rgb(var(--bone-36));border-radius:3px;background:linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-17)));color:var(--muted);font-size:13.5px;line-height:1.35;cursor:pointer;transition:border-color .15s,box-shadow .15s,filter .15s}
.battle-pick:hover:not(:disabled) {border-color:rgb(var(--gold-66));filter:brightness(1.12)}
.battle-pick[aria-checked="true"] {border-color:var(--gold-bright);box-shadow:0 0 0 1px rgb(var(--gold-87) / .5),0 0 18px rgb(var(--gold-76) / .22),inset 0 1px rgb(var(--gold-78) / .15);background:linear-gradient(rgb(var(--bone-36) / .7),rgb(var(--stone-17)))}
.battle-pick:disabled {opacity:.5;cursor:not-allowed}
.battle-pick-head {display:flex;align-items:center;justify-content:space-between;gap:6px}
.battle-pick-head b {font:17px Georgia,serif;color:var(--gold-bright)}
.battle-pick-head em {font-style:normal;white-space:nowrap;font-size:11.5px;letter-spacing:1px;padding:2px 6px;border-radius:2px;color:rgb(var(--stone-15));background:rgb(var(--gold-78))}
.battle-pick-damage {display:grid;gap:1px;padding:4px 0}
.battle-pick-damage small {font-size:11.5px;letter-spacing:1.3px;color:var(--gold)}
.battle-pick-damage b {font:21px Georgia,serif;color:rgb(var(--bone-96))}
.battle-note {margin:0;font-size:14px}
.battle-fight {grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 18px}
.battle-legion {display:grid;gap:1px;min-width:0}
.battle-legion small {font-size:11px;letter-spacing:1.3px;color:var(--gold)}
.battle-legion b {font:19px Georgia,serif;color:var(--gold-bright)}
.battle-legion > span {font-size:13px;color:var(--muted)}
.battle-wounds {grid-column:1/-1;display:grid;gap:3px}
.battle-wounds small {font-size:12.5px;color:var(--muted)}
.battle-wounds meter {width:100%;height:5px;appearance:none;border:0;border-radius:3px;background:rgb(var(--stone-15))}
.battle-wounds meter::-webkit-meter-bar {background:rgb(var(--stone-15));border:0;border-radius:3px;height:5px;box-shadow:inset 0 1px 2px rgb(var(--stone-0))}
.battle-wounds meter::-webkit-meter-optimum-value {background:rgb(var(--moss-64));border-radius:3px}
.battle-wounds meter::-webkit-meter-suboptimum-value {background:rgb(var(--ember-71));border-radius:3px}
.battle-wounds meter::-webkit-meter-even-less-good-value {background:rgb(var(--blood-53));border-radius:3px}
.battle .battle-stats {display:flex;flex-wrap:wrap;gap:0}
.battle .battle-stats span {gap:0;padding:1px 14px;border:0;border-left:1px solid rgb(var(--bone-32));background:none}
.battle .battle-stats small {font-size:11px;letter-spacing:1px}
.battle .battle-stats b {font-size:18px}
.battle-pick-squad {font-size:12.5px;color:rgb(var(--bone-77))}
.battle-squad {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 14px;padding:10px 14px;border:1px dashed rgb(var(--gold-46));border-radius:3px;background:linear-gradient(90deg,rgb(var(--gold-46) / .14),rgb(var(--stone-17) / .2))}
.battle-squad p {margin:0;flex:1 1 260px;font-size:14px;line-height:1.45;color:rgb(var(--bone-83))}
.battle-pick.preset {border-style:dashed}
.battle-pick-head em.quiet {color:var(--gold);background:none;border:1px solid rgb(var(--gold-46))}
.battle-pick-units {display:flex;flex-wrap:wrap;gap:6px;min-height:34px;align-items:center}
.battle-pick-units .pick-unit {display:flex;align-items:center;gap:4px}
.battle-pick-units .unit-portrait {width:22px;height:28px}
.battle-pick-units b {font:15px Georgia,serif;color:rgb(var(--bone-96))}
.battle-pick-stats {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding-top:6px;border-top:1px solid rgb(var(--bone-32))}
.battle-pick-stats span {display:grid;gap:1px;font:15px Georgia,serif;color:rgb(var(--bone-96))}
.battle-pick-stats small {font:11px 'Segoe UI',sans-serif;letter-spacing:1.2px;color:var(--gold)}
/* The Bosses tab (schema 68) */
.view-bosses .view-grid>.panel {grid-column:1/-1;padding-bottom:16px}
.wb-panel>:not(.panel-heading):not(.panel-description),.wb-squads-panel>:not(.panel-heading):not(.panel-description) {margin-left:16px;margin-right:16px}
.wb-squads-panel>.panel-description {margin-bottom:12px}
.wb-now {display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px 16px;margin:4px 0 16px;padding:12px 16px;border:1px solid rgb(var(--bone-36));border-radius:3px;background:linear-gradient(90deg,rgb(var(--stone-20)),rgb(var(--stone-17)))}
.wb-now[data-phase="warning"] {border-color:rgb(var(--ember-48));background:linear-gradient(90deg,rgb(var(--blood-27) / .55),rgb(var(--stone-17)))}
.wb-now[data-phase="active"] {border-color:var(--gold-bright);box-shadow:0 0 18px rgb(var(--gold-76) / .2);background:linear-gradient(90deg,rgb(var(--gold-46) / .3),rgb(var(--stone-17)))}
.wb-now-sigil {width:44px;height:50px;background:url('/assets/omens/worldboss.svg') center/contain no-repeat;opacity:.55}
.wb-now[data-phase="quiet"] .wb-now-sigil {filter:grayscale(1)}
.wb-now[data-phase="warning"] .wb-now-sigil,.wb-now[data-phase="active"] .wb-now-sigil {opacity:1}
.wb-now-text {display:grid;gap:2px;min-width:0}
.wb-now-text b {font:20px Georgia,serif;color:var(--gold-bright)}
.wb-now-text small {font-size:14px;color:var(--muted)}
.wb-book {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:0 0 16px;padding:0;list-style:none}
.wb-card {position:relative;display:block;width:100%;padding:0;overflow:hidden;border:1px solid rgb(var(--bone-36));border-radius:3px;background:rgb(var(--stone-15));cursor:pointer;text-align:left;transition:filter .15s,border-color .15s,box-shadow .15s}
.wb-card img {display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.wb-card:hover:not(:disabled) {border-color:rgb(var(--gold-66));filter:brightness(1.1)}
.wb-card[aria-pressed="true"] {border-color:var(--gold-bright);box-shadow:0 0 0 1px rgb(var(--gold-87) / .5),0 0 22px rgb(var(--gold-76) / .28)}
.wb-card.unknown {cursor:default}
.wb-card.unknown img {filter:saturate(.4) brightness(.8)}
.wb-card-plate {position:relative;display:grid;gap:5px;min-height:76px;padding:12px 10px;border-top:1px solid rgb(var(--gold-46));background:linear-gradient(115deg,rgb(var(--stone-20)),rgb(var(--stone-15)))}
.wb-card-plate b {font:15px/1.2 Georgia,serif;color:var(--gold-bright)}
.wb-card.unknown .wb-card-plate b {color:rgb(var(--bone-77))}
.wb-card-plate small {font-size:11.5px;color:rgb(var(--bone-77))}
.wb-card-tags {position:absolute;top:6px;left:6px;right:6px;display:flex;flex-wrap:wrap;gap:4px}
.wb-card-tags em {font-style:normal;font-size:11px;letter-spacing:.6px;padding:2px 6px;border-radius:2px;color:rgb(var(--bone-96));background:rgb(var(--stone-0) / .72);border:1px solid rgb(var(--bone-36))}
.wb-card-tags em.relic {color:rgb(var(--stone-15));background:rgb(var(--gold-78));border-color:transparent}
.wb-card-tags em.squad {border-color:rgb(var(--gold-66));color:var(--gold-bright)}
.wb-detail {display:grid;grid-template-columns:minmax(180px,260px) minmax(0,1fr);gap:16px 20px;padding:16px;border:1px solid rgb(var(--gold-46));border-radius:3px;background:radial-gradient(ellipse at 0 0,rgb(var(--gold-46) / .18),transparent 60%),rgb(var(--stone-17))}
.wb-detail[hidden] {display:none}
.wb-detail-art img {display:block;width:100%;height:auto;border:1px solid rgb(var(--gold-55));border-radius:3px;box-shadow:0 10px 30px rgb(var(--stone-0) / .6)}
/* Bestiary plates: painted portraits held in narrow, aged brass mounts. */
.wb-book li {min-width:0;display:flex}
.wb-card {align-self:stretch;border-radius:0;border-color:rgb(var(--gold-46));box-shadow:inset 0 0 0 3px rgb(var(--stone-15))}
.wb-card::after {content:"";position:absolute;inset:5px;pointer-events:none;border:1px solid rgb(var(--gold-66) / .4)}
.wb-card[aria-pressed="true"] {box-shadow:0 3px 0 var(--gold-bright),0 0 0 1px rgb(var(--gold-66));border-color:var(--gold-bright)}
.wb-card:focus-visible {outline:2px solid var(--gold-bright);outline-offset:4px}
.wb-card-tags {top:10px;left:10px;right:10px}
.wb-card-plate b {overflow-wrap:anywhere}
.wb-detail-art {position:relative;align-self:start;padding:5px;border:1px solid rgb(var(--gold-55));background:rgb(var(--stone-15))}
.wb-detail-art::after {content:"";position:absolute;inset:10px;border:1px solid rgb(var(--gold-76) / .4);pointer-events:none}
.wb-detail-art img {aspect-ratio:4/5;object-fit:cover;border:0;border-radius:0;box-shadow:none}
@media(prefers-reduced-motion:no-preference) {
  .wb-card {transition:border-color .2s ease,filter .2s ease}
}
.wb-detail-body {display:grid;gap:10px;align-content:start;min-width:0}
.wb-detail-body h3 {margin:0;font:28px Georgia,serif;color:var(--gold-bright)}
.wb-detail-body p {margin:0}
.wb-record {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0}
.wb-record div {display:grid;gap:2px;padding:8px 10px;border:1px solid rgb(var(--bone-32));background:rgb(var(--stone-15))}
.wb-record dt {font-size:12px;letter-spacing:1.2px;color:var(--gold)}
.wb-record dd {margin:0;font:17px Georgia,serif;color:rgb(var(--bone-96))}
.wb-answered {font-size:14px;color:rgb(var(--bone-83))}
.wb-ranking {grid-column:1/-1;display:grid;gap:6px}
.wb-ranking h4 {margin:0;font:18px Georgia,serif;color:var(--gold-bright)}
.wb-ranking-line {margin:0;font-size:14px;color:var(--muted)}
.wb-ranking-table {width:100%;border-collapse:collapse;font-size:14px}
.wb-ranking-table th {text-align:left;font-size:12px;letter-spacing:1.2px;font-weight:400;color:var(--gold);padding:4px 8px;border-bottom:1px solid rgb(var(--gold-46))}
.wb-ranking-table td {padding:6px 8px;border-bottom:1px solid rgb(var(--bone-32));color:rgb(var(--bone-83))}
.wb-ranking-table td:first-child {width:3ch;font:16px Georgia,serif;color:var(--gold-bright)}
.wb-ranking-table tr:nth-child(-n+3) td:first-child {color:var(--gold-bright);text-shadow:0 0 10px rgb(var(--gold-76) / .45)}
.wb-ranking-table td:nth-child(3),.wb-ranking-table td:nth-child(4),.wb-ranking-table th:nth-child(3),.wb-ranking-table th:nth-child(4) {text-align:right}
.wb-ranking-table tr.me td {background:rgb(var(--gold-46) / .22);color:rgb(var(--bone-96))}
.wb-ranking-table tr.gap td {border-top:2px dashed rgb(var(--bone-36))}
.wb-won {font-style:normal;font-size:11px;letter-spacing:.6px;padding:1px 5px;border-radius:2px;color:rgb(var(--stone-15));background:rgb(var(--gold-78))}
.wb-slots {display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;margin-bottom:12px}
.wb-slot {position:relative;display:grid;gap:1px;justify-items:start;text-align:left;padding:8px 10px;border:1px solid rgb(var(--bone-36));border-radius:3px;background:rgb(var(--stone-17));color:var(--muted);cursor:pointer;min-width:0}
.wb-slot b {max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:14px Georgia,serif;color:rgb(var(--bone-96))}
.wb-slot small {font-size:11.5px}
.wb-slot-numeral {font:12px Georgia,serif;letter-spacing:1.4px;color:var(--gold)}
.wb-slot.saved {border-color:rgb(var(--gold-55))}
.wb-slot.locked {opacity:.62}
.wb-slot.locked .icon {position:absolute;top:8px;right:8px;width:14px;height:14px}
.wb-slot[aria-selected="true"] {border-color:var(--gold-bright);box-shadow:0 0 0 1px rgb(var(--gold-87) / .5),0 0 14px rgb(var(--gold-76) / .2);background:linear-gradient(rgb(var(--bone-36) / .5),rgb(var(--stone-17)))}
.wb-locked {margin:0;padding:10px 14px;border:1px dashed rgb(var(--gold-46));border-radius:3px;font-size:14px;color:rgb(var(--bone-83))}
.wb-locked[hidden] {display:none}
/* The squad page (Lemp, 2026-09-30): a muster roll on the war table. Bracket-cornered cards with tall portraits and
   what each brings, golems with their boss roles, and a strength panel with the bosses the squad fights by default. */
.wb-slots {gap:8px}
.wb-slot {min-height:78px;padding:10px 12px 16px;border-top:3px solid rgb(var(--bone-36));background:linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-15)));clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),50% 100%,0 calc(100% - 8px))}
.wb-slot.saved {border-top-color:rgb(var(--gold-66))}
.wb-slot[aria-selected="true"] {border-top-color:var(--gold-bright);background:radial-gradient(ellipse at 50% 0,rgb(var(--blood-27) / .9),transparent 75%),linear-gradient(rgb(var(--stone-26)),rgb(var(--stone-17)))}
.wb-slot-numeral {font-size:17px}
.wb-slot-bosses {display:flex;gap:2px;margin-top:3px}
.wb-slot-bosses img {width:16px;height:20px;border:1px solid rgb(var(--gold-46));display:block}
.wb-editor {display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:18px;align-items:start}
.muster-roster {display:grid;gap:10px;min-width:0}
.wb-name {display:grid;gap:4px}
.wb-name small {font-size:12px;letter-spacing:1.2px;color:var(--gold)}
.muster-group-head {display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;margin-top:6px;padding-bottom:6px;border-bottom:1px solid rgb(var(--gold-46))}
.muster-group-head h4 {margin:0;font:600 13px 'Segoe UI',sans-serif;letter-spacing:2.4px;text-transform:uppercase;color:var(--gold)}
.muster-group-head > small {font-size:13px;color:var(--muted)}
.wb-size {display:grid;gap:3px;justify-items:end}
.wb-size b {font:19px Georgia,serif;color:rgb(var(--bone-96))}
.wb-size[data-full="true"] b {color:var(--gold-bright)}
.wb-size meter {width:170px;height:6px}
.squad-units {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.squad-units > .squad-empty {grid-column:1/-1;margin:0;font-size:14px;color:var(--muted)}
.squad-unit {position:relative;display:grid;grid-template-columns:58px minmax(0,1fr);grid-template-areas:"art name" "art step";align-items:start;gap:8px 12px;padding:10px 12px;border:1px solid rgb(var(--bone-32));border-radius:2px;background:radial-gradient(ellipse at 0 0,rgb(var(--bone-36) / .28),transparent 60%),linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-15)));transition:border-color .15s,box-shadow .15s}
.squad-unit:before,.squad-unit:after {content:'';position:absolute;width:12px;height:12px;border:2px solid rgb(var(--gold-55));opacity:.5;pointer-events:none}
.squad-unit:before {top:-2px;left:-2px;border-right:0;border-bottom:0}
.squad-unit:after {right:-2px;bottom:-2px;border-left:0;border-top:0}
.squad-unit.chosen {border-color:rgb(var(--gold-66));box-shadow:0 0 0 1px rgb(var(--gold-76) / .2),0 0 20px rgb(var(--gold-76) / .14)}
.squad-unit.chosen:before,.squad-unit.chosen:after {opacity:1;border-color:var(--gold-bright)}
.squad-unit.golem {background:radial-gradient(ellipse at 0 0,rgb(var(--ember-48) / .22),transparent 60%),linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-15)))}
.squad-unit.barred {opacity:.45;filter:grayscale(.7)}
.squad-unit .unit-portrait {grid-area:art;width:58px;height:73px;border:1px solid rgb(var(--gold-46));border-radius:2px;object-fit:cover;box-shadow:0 6px 14px rgb(var(--stone-0) / .6)}
.muster-name {grid-area:name;display:grid;gap:3px;min-width:0}
.muster-name > b {font:18px Georgia,serif;color:rgb(var(--bone-96))}
.squad-unit.chosen .muster-name > b {color:var(--gold-bright)}
.muster-name > small {font-size:12.5px;color:var(--muted)}
.muster-each {display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px}
.muster-each > small {font-size:11px;letter-spacing:1.2px;color:var(--muted)}
.muster-pills {display:flex;flex-wrap:wrap;gap:4px}
.muster-pills span {display:inline-flex;align-items:baseline;gap:3px;padding:1px 6px;border:1px solid rgb(var(--bone-32));border-radius:2px;background:rgb(var(--stone-15));font:14px Georgia,serif;color:rgb(var(--bone-96));font-variant-numeric:tabular-nums}
.muster-pills small,.muster-stats small {font:600 11px 'Segoe UI',sans-serif;letter-spacing:1px;color:var(--gold)}
:is(.muster-pills,.muster-stats) [data-stat="attack"] small {color:rgb(var(--ember-75))}
:is(.muster-pills,.muster-stats) [data-stat="magic"] small {color:rgb(var(--arcane-78))}
:is(.muster-pills,.muster-stats) [data-stat="vitality"] small {color:rgb(var(--blood-67))}
.muster-role {font-size:13px;line-height:1.35;color:rgb(var(--bone-83))}
.muster-role b {color:rgb(var(--ember-75));font-weight:600}
.muster-stepper {grid-area:step;display:flex;align-items:center;gap:4px}
.muster-stepper button {display:grid;place-items:center;min-width:32px;padding:5px 7px}
.muster-stepper .icon {width:14px;height:14px}
.muster-stepper input {width:60px;padding:4px 6px;text-align:center;font:17px Georgia,serif}
.muster-stepper .muster-max {margin-left:auto;padding-inline:10px}
.muster-summary {position:sticky;top:12px;display:grid;gap:16px;padding:16px;border:1px solid rgb(var(--gold-55));border-radius:2px;background:radial-gradient(ellipse at 50% 0,rgb(var(--blood-27) / .6),transparent 70%),linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-15)));box-shadow:inset 0 1px rgb(var(--gold-76) / .12),0 12px 30px rgb(var(--stone-0) / .5)}
.muster-strength {display:grid;gap:10px}
.muster-stats {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.muster-stats span {display:grid;justify-items:center;gap:2px;padding:8px 4px;border:1px solid rgb(var(--bone-32));background:rgb(var(--stone-15) / .75)}
.muster-stats b {font:25px Georgia,serif;color:rgb(var(--bone-96));font-variant-numeric:tabular-nums;text-shadow:0 0 14px rgb(var(--gold-76) / .2)}
.muster-mix {display:flex;gap:2px;height:8px;overflow:hidden;border-radius:2px;background:rgb(var(--stone-15))}
.muster-mix i {display:block;flex:1 1 0;min-width:4px;background:rgb(var(--bone-62))}
.muster-mix [data-class="warrior"] {background:rgb(var(--ember-68))}
.muster-mix [data-class="guardian"] {background:rgb(var(--gold-66))}
.muster-mix [data-class="ranger"] {background:rgb(var(--moss-64))}
.muster-mix [data-class="mage"] {background:rgb(var(--arcane-67))}
.muster-mix [data-class="fire"] {background:rgb(var(--blood-53))}
.muster-mix [data-class="frost"] {background:rgb(var(--spirit-76))}
.muster-mix [data-class="blood"] {background:rgb(var(--blood-38))}
.muster-mix [data-class="revived"] {background:rgb(var(--spirit-89))}
.squad-unit.revived {background:radial-gradient(ellipse at 0 0,rgb(var(--arcane-37) / .35),transparent 60%),linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-15)))}
.squad-unit .revived-portrait {object-fit:cover;background:rgb(var(--stone-15))}
.muster-group-head[hidden],.squad-units[hidden] {display:none}
.muster-roles {display:grid;gap:4px;margin:0;padding:0;list-style:none;font-size:13.5px;line-height:1.4;color:rgb(var(--bone-83))}
.muster-roles b {color:rgb(var(--ember-75));font-weight:600}
.muster-roles .squad-empty {color:var(--muted)}
.muster-targets h4 {margin:0;font:17px Georgia,serif;color:var(--gold-bright)}
.muster-explain {margin:4px 0 10px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.wb-answers {display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.wb-answers > .squad-empty {grid-column:1/-1;margin:0;font-size:14px;color:var(--muted)}
.wb-answer {position:relative;display:grid;justify-items:center;align-content:start;gap:4px;padding:6px 6px 8px;border:1px solid rgb(var(--bone-32));border-radius:2px;background:rgb(var(--stone-15));color:var(--muted);text-align:center;cursor:pointer}
.wb-answer img {display:block;width:100%;height:auto;aspect-ratio:4/5;filter:grayscale(.8) brightness(.5);transition:filter .2s}
.wb-answer b {font:13px/1.2 Georgia,serif;color:rgb(var(--bone-83))}
.wb-answer small {font-size:11px;letter-spacing:.4px;color:var(--muted)}
.wb-answer:hover:not(:disabled) img {filter:grayscale(.2) brightness(.85)}
.wb-answer[aria-pressed="true"] {border-color:var(--gold-bright);box-shadow:0 0 0 1px rgb(var(--gold-87) / .4),0 0 18px rgb(var(--blood-53) / .4)}
.wb-answer[aria-pressed="true"] img {filter:none}
.wb-answer[aria-pressed="true"] b,.wb-answer[aria-pressed="true"] small {color:var(--gold-bright)}
.wb-answer[aria-pressed="true"]:after {content:'✓';position:absolute;top:10px;right:10px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgb(var(--blood-53));box-shadow:0 0 0 2px rgb(var(--gold-87)),0 2px 6px rgb(var(--stone-0));color:rgb(var(--bone-96));font:700 13px 'Segoe UI',sans-serif}
.muster-lenders summary {cursor:pointer;font:15px Georgia,serif;color:var(--gold)}
.muster-lenders[open] summary {margin-bottom:8px}
.wb-editor[data-locked="true"] .muster-roster,.wb-editor[data-locked="true"] .wb-answers {opacity:.55}
.wb-editor-actions {display:flex;justify-content:flex-end;gap:8px}
@media(prefers-reduced-motion:no-preference) {.squad-unit.chosen .unit-portrait {animation:muster-rise .35s ease-out}}
@keyframes muster-rise {from {transform:translateY(3px) scale(.96)}}
/* The battle log (Lemp, 2026-09-30): past battles, each opening to its damage ranking. */
/* The battle log as a war chronicle (Lemp, 2026-09-30: "remodel it for a AAA game like battle log"). The campaign's
   record stands on four engraved plaques. Each battle is a banner: its boss's painting smoulders behind it, the
   portrait hangs in a gilt frame, and the necromancer's place is a struck medal, gold, silver, bronze or iron,
   a sword seal for a battle only held, a dim plate for one missed. The bar is their blow against the best blow
   on the field; opened, the field's roll gives every necromancer's damage the same way. */
.wb-chronicle {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 16px 12px}
.wb-chronicle div {position:relative;display:grid;justify-items:center;gap:2px;padding:10px 6px 11px;border:1px solid rgb(var(--gold-46));background:radial-gradient(ellipse at 50% 0,rgb(var(--gold-66) / .18),transparent 70%),linear-gradient(rgb(var(--stone-26)),rgb(var(--stone-17)));box-shadow:inset 0 0 0 3px rgb(var(--stone-15)),inset 0 0 0 4px rgb(var(--gold-46) / .45),0 6px 14px rgb(var(--stone-0) / .45);clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
.wb-chronicle dt {font-size:11px;letter-spacing:1.4px;color:var(--gold);text-align:center}
.wb-chronicle dd {margin:0;font:700 26px/1.1 Georgia,serif;color:var(--gold-bright);text-shadow:0 -1px 0 rgb(var(--stone-0)),0 0 14px rgb(var(--gold-76) / .4)}
.wb-log {display:grid;gap:10px;margin:0 16px 16px;padding:0;list-style:none}
.wb-log > .squad-empty {font-size:14px;color:var(--muted)}
.wb-war {--metal:rgb(var(--bone-55));--metal-hi:rgb(var(--bone-77));--metal-lo:rgb(var(--stone-26));--glow:rgb(var(--bone-55) / 0)}
.wb-war[data-place="1"] {--metal:rgb(var(--gold-76));--metal-hi:rgb(var(--gold-87));--metal-lo:rgb(var(--gold-46));--glow:rgb(var(--gold-78) / .5)}
.wb-war[data-place="2"] {--metal:rgb(var(--bone-77));--metal-hi:rgb(var(--stone-100));--metal-lo:rgb(var(--bone-55));--glow:rgb(var(--bone-83) / .35)}
.wb-war[data-place="3"] {--metal:rgb(var(--ember-60));--metal-hi:rgb(var(--gold-82));--metal-lo:rgb(var(--ember-48));--glow:rgb(var(--ember-68) / .35)}
.wb-war details {position:relative;overflow:hidden;border:1px solid rgb(var(--bone-36));background:rgb(var(--stone-15));box-shadow:0 8px 18px rgb(var(--stone-0) / .5),inset 0 1px rgb(var(--stone-100) / .06);transition:border-color .2s,box-shadow .2s}
.wb-war details:hover,.wb-war details[open] {border-color:rgb(var(--gold-55));box-shadow:0 10px 22px rgb(var(--stone-0) / .6),0 0 0 1px rgb(var(--gold-46) / .5),0 0 26px var(--glow)}
.wb-war[data-place="1"] details {border-color:rgb(var(--gold-55))}
.wb-war-row {position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) auto 14px;align-items:center;gap:8px 18px;padding:12px 16px 12px 12px;cursor:pointer;list-style:none;isolation:isolate}
.wb-war-row::-webkit-details-marker {display:none}
.wb-war-row::after {content:'';width:9px;height:9px;margin-bottom:4px;border-right:2px solid rgb(var(--gold-66));border-bottom:2px solid rgb(var(--gold-66));rotate:45deg;transition:rotate .2s}
.wb-war details[open] .wb-war-row::after {rotate:225deg;margin:4px 0 0}
.wb-war-veil {position:absolute;inset:0 0 0 auto;z-index:-2;width:62%;height:100%;object-fit:cover;object-position:50% 24%;opacity:.8;filter:blur(1px) saturate(1.15);-webkit-mask-image:linear-gradient(90deg,transparent,rgb(var(--stone-0)) 40%);mask-image:linear-gradient(90deg,transparent,rgb(var(--stone-0)) 40%)}
.wb-war-row::before {content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgb(var(--stone-15) / .7),rgb(var(--stone-15) / .94) 22%,rgb(var(--stone-15) / .9) 46%,rgb(var(--stone-15) / .35) 78%,rgb(var(--stone-15) / .55)),linear-gradient(rgb(var(--stone-0) / 0) 50%,rgb(var(--stone-0) / .5))}
.wb-war[data-place="absent"] .wb-war-veil {opacity:.35;filter:blur(1px) grayscale(.8)}
.wb-war-portrait {position:relative;padding:3px;background:linear-gradient(150deg,var(--metal-hi),var(--metal) 40%,var(--metal-lo));box-shadow:0 6px 12px rgb(var(--stone-0) / .6),0 0 16px var(--glow)}
.wb-war-portrait img {display:block;width:72px;height:90px;object-fit:cover;border:1px solid rgb(var(--stone-0) / .7)}
.wb-war[data-place="absent"] .wb-war-portrait img {filter:grayscale(.7) brightness(.75)}
.wb-war-title {display:grid;gap:4px;min-width:0}
.wb-war-title > b {font:700 20px/1.15 Georgia,serif;color:rgb(var(--bone-96));text-shadow:0 2px 8px rgb(var(--stone-0))}
.wb-war-title > small {font-size:12.5px;letter-spacing:.4px;color:rgb(var(--bone-77))}
.wb-war-tally {display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11.5px;letter-spacing:1px;color:var(--gold)}
.wb-war-tally span {display:inline-flex;align-items:center;gap:5px}
.wb-war-tally .icon {width:14px;height:14px;color:rgb(var(--gold-66))}
.wb-war-blow {display:grid;gap:4px;max-width:360px;margin-top:2px}
.wb-war-blow small {font-size:12.5px;color:rgb(var(--bone-77))}
.wb-war-blow small b {font:700 15px Georgia,serif;color:rgb(var(--bone-96))}
.wb-war[data-place="held"] .wb-war-blow small {font-style:italic}
.wb-war-bar {position:relative;display:block;height:7px;border:1px solid rgb(var(--stone-0) / .8);background:rgb(var(--stone-0) / .55);box-shadow:inset 0 1px 2px rgb(var(--stone-0))}
.wb-war-bar i {position:absolute;inset:0 auto 0 0;width:var(--share,0%);background:linear-gradient(rgb(var(--blood-67)),rgb(var(--blood-53)) 55%,rgb(var(--blood-38)));box-shadow:0 0 8px rgb(var(--blood-53) / .6)}
.wb-war-bar i::after {content:'';position:absolute;right:-1px;top:-2px;bottom:-2px;width:2px;background:rgb(var(--gold-87));box-shadow:0 0 6px rgb(var(--gold-87))}
.wb-war-relic {justify-self:start;margin-top:2px;padding:3px 12px 3px 10px;font:italic 600 12.5px Georgia,serif;letter-spacing:.3px;color:rgb(var(--stone-15));background:linear-gradient(rgb(var(--gold-87)),rgb(var(--gold-76)) 55%,rgb(var(--gold-66)));clip-path:polygon(0 0,100% 0,calc(100% - 7px) 50%,100% 100%,0 100%);box-shadow:0 0 14px rgb(var(--gold-78) / .5)}
.wb-war-medal {position:relative;display:grid;justify-items:center;align-content:center;min-width:76px;min-height:88px;padding:8px 8px 16px;background:repeating-linear-gradient(90deg,rgb(var(--stone-100) / .05) 0 1px,transparent 1px 3px),linear-gradient(160deg,var(--metal-hi),var(--metal) 38%,var(--metal-lo));clip-path:polygon(0 0,100% 0,100% 72%,50% 100%,0 72%);filter:drop-shadow(0 4px 6px rgb(var(--stone-0) / .7));text-align:center}
.wb-war-medal small {font-size:10.5px;font-weight:700;letter-spacing:1.2px;color:rgb(var(--stone-15) / .85)}
.wb-war-medal b {font:700 30px/1 Georgia,serif;color:rgb(var(--stone-15));text-shadow:0 1px 0 rgb(var(--stone-100) / .45)}
.wb-war-medal .icon {width:26px;height:26px;color:rgb(var(--stone-15))}
.wb-war[data-place="held"] .wb-war-medal,.wb-war[data-place="absent"] .wb-war-medal {--metal-hi:rgb(var(--bone-55));--metal:rgb(var(--bone-40));--metal-lo:rgb(var(--stone-26))}
.wb-war[data-place="held"] .wb-war-medal small,.wb-war[data-place="absent"] .wb-war-medal small,.wb-war[data-place="held"] .wb-war-medal .icon {color:rgb(var(--bone-96))}
.wb-war[data-place="1"] .wb-war-medal {animation:war-gleam 3.2s ease-in-out infinite}
@keyframes war-gleam {50% {filter:drop-shadow(0 4px 6px rgb(var(--stone-0) / .7)) drop-shadow(0 0 10px rgb(var(--gold-78) / .6))}}
.wb-war-field {padding:12px 16px 14px;border-top:1px solid rgb(var(--gold-46) / .6);background:linear-gradient(rgb(var(--stone-17)),rgb(var(--stone-15)))}
.wb-war-field > p {margin:0 0 10px;font-size:13px;font-style:italic;color:rgb(var(--bone-77))}
.wb-war-roll {display:grid;gap:4px;margin:0;padding:0;list-style:none}
.wb-war-roll li {display:grid;grid-template-columns:30px minmax(0,1fr) minmax(80px,2fr) minmax(64px,auto) 76px;align-items:center;gap:12px;padding:6px 10px;background:linear-gradient(90deg,rgb(var(--stone-20)),rgb(var(--stone-20) / .3));font-size:14px;color:rgb(var(--bone-83))}
.wb-war-roll.plain li {grid-template-columns:30px minmax(0,1fr) auto}
.wb-war-roll li[data-gap] {margin-top:8px;border-top:1px dashed rgb(var(--bone-36))}
.wb-war-roll li.me {background:linear-gradient(90deg,rgb(var(--moss-74) / .2),rgb(var(--moss-74) / .04));box-shadow:inset 3px 0 rgb(var(--moss-74));color:rgb(var(--bone-96))}
.wb-war-pos {font:700 17px Georgia,serif;color:rgb(var(--bone-62));text-align:center}
.wb-war-roll li[data-place="1"] .wb-war-pos {color:var(--gold-bright);text-shadow:0 0 10px rgb(var(--gold-76) / .6)}
.wb-war-roll li[data-place="2"] .wb-war-pos {color:rgb(var(--stone-100))}
.wb-war-roll li[data-place="3"] .wb-war-pos {color:rgb(var(--ember-71))}
.wb-war-who {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-war-who em {font-style:normal;font-size:11px;letter-spacing:.6px;padding:1px 5px;color:rgb(var(--stone-15));background:rgb(var(--gold-78))}
.wb-war-dmg {font:600 14px Georgia,serif;color:rgb(var(--bone-96));text-align:right}
.wb-war-tix {font-size:12px;color:var(--muted);text-align:right;white-space:nowrap}
@media(prefers-reduced-motion:no-preference) {
  .wb-war details[open] .wb-war-roll .wb-war-bar i {animation:war-bar .7s cubic-bezier(.2,.8,.3,1) both}
  .wb-war details[open] .wb-war-roll li {animation:deed-roll-in .4s ease-out both}
  @keyframes war-bar {from {width:0}}
}
@media(prefers-reduced-motion:reduce) {.wb-war[data-place="1"] .wb-war-medal {animation:none}}
.squad-draw {display:grid;gap:4px;margin:0;padding:0;list-style:none}
.squad-draw li {display:grid;grid-template-columns:minmax(120px,auto) minmax(0,1fr);gap:0 12px;padding:7px 10px;border-left:3px solid rgb(var(--gold-66));background:rgb(var(--stone-17));font-size:14px}
.squad-draw li b {font:15px Georgia,serif;color:var(--gold-bright)}
.squad-draw li small {grid-column:2;font-size:12.5px;color:var(--muted)}
.squad-draw li.squad-spared {border-left-color:rgb(var(--bone-36));opacity:.7}
.squad-draw li.squad-empty {display:block;border-left-color:rgb(var(--bone-36));color:var(--muted)}
@media(max-width:680px) {
  .battle .battle-scene {height:clamp(320px,56vh,440px)}
  .battle[data-mode="choose"] .battle-scene {height:280px}
  .battle-boss,.battle-hits {right:10px;bottom:12px;width:46%;height:auto}
  .battle[data-mode="choose"] :is(.battle-boss,.battle-hits) {width:34%}
  .battle-head {top:12px;left:14px;right:14px;max-width:none}
  .battle-head h2 {font-size:26px}
  .boss-stats {gap:6px}
  .boss-stat {padding:6px 8px}
  .boss-stat small {font-size:11px;letter-spacing:.6px}
  .boss-stat b {font-size:19px}
  .boss-stat em {display:none}
  .battle-head .boss-stats {flex-wrap:nowrap;gap:4px;margin-top:4px}
  .battle-head .boss-stat {padding:3px 6px 4px;gap:1px 4px}
  .battle-head .boss-stat small {letter-spacing:0}
  .battle-head .boss-stat b {font-size:14px}
  .battle-clock {left:14px;bottom:12px;flex-direction:column;align-items:flex-start;gap:0}
  .battle-clock b {font-size:34px}
  .battle-clock .battle-scene-caption {display:none}
  .battle-hit {font-size:24px}
  .battle-fight {grid-template-columns:1fr}
  .battle .battle-stats {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 0}
  .battle .battle-stats span:nth-child(odd) {border-left:0;padding-left:0}
  .battle-legions {grid-template-columns:1fr 1fr}
  .squad-draw li {grid-template-columns:1fr}
  .wb-editor {grid-template-columns:1fr}
  .muster-summary {position:static;padding:12px}
  .squad-units {grid-template-columns:1fr}
  .muster-stats b {font-size:20px}
  .wb-chronicle {grid-template-columns:repeat(2,minmax(0,1fr));margin:0 10px 10px}
  .wb-log {margin:0 10px 12px}
  .wb-war-row {grid-template-columns:56px minmax(0,1fr) auto;gap:8px 10px;padding:10px 10px 10px 8px}
  .wb-war-portrait img {width:56px;height:70px}
  .wb-war-title > b {font-size:17px}
  .wb-war-medal {min-width:60px;max-width:84px;padding:6px 6px 12px}
  .wb-war-medal b {font-size:24px}
  .wb-war-medal small {font-size:9.5px;letter-spacing:.8px}
  .wb-war-row::after {display:none}
  .wb-war-roll li {grid-template-columns:26px minmax(0,1fr) auto;gap:2px 8px}
  .wb-war-roll.plain .wb-war-tix {display:block}
  .wb-war-roll .wb-war-bar {grid-column:2/-1;grid-row:2}
  .wb-war-tix {display:none}
  .wb-book {grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .wb-card-plate {padding:16px 6px 5px}
  .wb-card-plate b {font-size:12.5px}
  .wb-card-plate small {display:none}
  .wb-detail {grid-template-columns:1fr;padding:12px}
  .wb-detail-art {max-width:220px;margin:0 auto}
  .wb-detail-body h3 {font-size:23px}
  .wb-record {grid-template-columns:1fr 1fr 1fr}
  .wb-slots {grid-template-columns:repeat(4,minmax(0,1fr))}
  .wb-now {grid-template-columns:auto minmax(0,1fr)}
  .wb-now button {grid-column:1/-1}
  .battle-pick-stats span {font-size:14px}
  .squad-draw li small {grid-column:1}
}
@media(max-width:680px) {
  .delve-scene {min-height:370px}
  .battle-scene {height:300px}
  .trophy-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .trophy .trophy-name {font-size:14px;padding:0 4px}
  .delve-overlay em {max-width:100%}
}

.relic-art-0 {--relic-x:0.00000%;--relic-y:0%}
.relic-art-1 {--relic-x:14.28571%;--relic-y:0%}
.relic-art-2 {--relic-x:28.57143%;--relic-y:0%}
.relic-art-3 {--relic-x:42.85714%;--relic-y:0%}
.relic-art-4 {--relic-x:57.14286%;--relic-y:0%}
.relic-art-5 {--relic-x:71.42857%;--relic-y:0%}
.relic-art-6 {--relic-x:85.71429%;--relic-y:0%}
.relic-art-7 {--relic-x:100.00000%;--relic-y:0%}
.relic-art-8 {--relic-x:0.00000%;--relic-y:25%}
.relic-art-9 {--relic-x:14.28571%;--relic-y:25%}
.relic-art-10 {--relic-x:28.57143%;--relic-y:25%}
.relic-art-11 {--relic-x:42.85714%;--relic-y:25%}
.relic-art-12 {--relic-x:57.14286%;--relic-y:25%}
.relic-art-13 {--relic-x:71.42857%;--relic-y:25%}
.relic-art-14 {--relic-x:85.71429%;--relic-y:25%}
.relic-art-15 {--relic-x:100.00000%;--relic-y:25%}
.relic-art-16 {--relic-x:0.00000%;--relic-y:50%}
.relic-art-17 {--relic-x:14.28571%;--relic-y:50%}
.relic-art-18 {--relic-x:28.57143%;--relic-y:50%}
.relic-art-19 {--relic-x:42.85714%;--relic-y:50%}
.relic-art-20 {--relic-x:57.14286%;--relic-y:50%}
.relic-art-21 {--relic-x:71.42857%;--relic-y:50%}
.relic-art-22 {--relic-x:85.71429%;--relic-y:50%}
.relic-art-23 {--relic-x:100.00000%;--relic-y:50%}
.relic-art-24 {--relic-x:0.00000%;--relic-y:75%}
.relic-art-25 {--relic-x:14.28571%;--relic-y:75%}
.relic-art-26 {--relic-x:28.57143%;--relic-y:75%}
.relic-art-27 {--relic-x:42.85714%;--relic-y:75%}
.relic-art-28 {--relic-x:57.14286%;--relic-y:75%}
.relic-art-29 {--relic-x:71.42857%;--relic-y:75%}
.relic-art-30 {--relic-x:85.71429%;--relic-y:75%}
.relic-art-31 {--relic-x:100.00000%;--relic-y:75%}
.relic-art-32 {--relic-x:0.00000%;--relic-y:100%}
.relic-art-33 {--relic-x:14.28571%;--relic-y:100%}
.relic-art-34 {--relic-x:28.57143%;--relic-y:100%}
.relic-art-35 {--relic-x:42.85714%;--relic-y:100%}
.relic-art-36 {--relic-x:57.14286%;--relic-y:100%}
.relic-art-37 {--relic-x:71.42857%;--relic-y:100%}
.relic-art-38 {--relic-x:85.71429%;--relic-y:100%}
.relic-art-39 {--relic-x:100.00000%;--relic-y:100%}
/* The Delve on the Games tab: a panel narrower than scene plus wager column stacks them, so the crawl
   keeps its width, and the army line stays on one line under the overlay. */
.delve-panel {container-type:inline-size}
@container (max-width:760px) {.delve-body {grid-template-columns:1fr}.delve-scene {min-height:400px}}
.delve-army-note {white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.delve-muster {position:absolute;top:88px;left:18px;z-index:2;display:grid;gap:5px;max-width:calc(100% - 36px);color:rgb(var(--stone-88));text-shadow:0 2px 5px rgb(var(--stone-0));pointer-events:none}
.delve-muster b {font:700 14px Georgia,serif;letter-spacing:1px;font-variant-numeric:tabular-nums}
.delve-muster small {font-size:12px;color:rgb(var(--bone-77))}
.delve-bones {display:flex;gap:6px;width:150px}
.delve-bones i {display:block;flex:1;height:7px;background:rgb(var(--bone-83));clip-path:polygon(0 0,15% 0,20% 30%,80% 30%,85% 0,100% 0,100% 100%,85% 100%,80% 70%,20% 70%,15% 100%,0 100%)}
.delve-bones i.fallen {background:rgb(var(--bone-40))}
.delve-muster[data-strength="bloodied"] b {color:rgb(var(--gold-83))}
.delve-muster[data-strength="critical"] b,.delve-muster[data-strength="critical"] small {color:rgb(var(--bone-83))}
.delve-hazard {position:absolute;top:16px;right:18px;max-width:52%;z-index:3;padding:10px 14px;text-align:center;background:rgb(var(--stone-20) / .94);border-block:2px solid rgb(var(--gold-66));pointer-events:none}
.delve-hazard strong {display:block;font:700 clamp(18px,2.4vw,27px) Georgia,serif;color:rgb(var(--gold-87))}
.delve-hazard span {display:block;margin-top:5px;font-size:12px;letter-spacing:1px;color:rgb(var(--bone-83))}
.delve-hazard[data-kind="flood"] {border-color:rgb(var(--spirit-76));background:rgb(var(--stone-26) / .93)}
.delve-hazard[data-kind="shockwave"] {border-color:rgb(var(--moss-87))}
.delve-hazard[data-kind="gas"] {border-color:rgb(var(--moss-76));background:rgb(var(--stone-26) / .93)}
.delve-muster[hidden],.delve-hazard[hidden] {display:none}
@container (max-width:760px) {
  .has-hazard .delve-scene-heading {visibility:hidden}
  .has-hazard .delve-muster {top:112px}
  .delve-hazard {left:18px;max-width:none}
  .delve-hazard strong {font-size:18px}
  .delve-hazard span {font-size:11px;letter-spacing:.4px}
}
/* Grave Contracts on Home: a small copy of the board (progress and Claim); the full panel stays on Deeds. */
.home-contracts .panel-heading {padding:11px 14px}
.home-contracts-shop {text-decoration:none}
.home-contract-list {list-style:none;margin:0;padding:4px 14px;display:flex;flex-direction:column;gap:6px}
.home-contract {display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid rgb(var(--stone-26))}
.home-contract:first-child {border-top:0}
.home-contract-text {flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.home-contract-text span {font:14px Georgia,serif;color:var(--ink)}
.home-contract-text progress {width:100%;height:6px}
.home-contract-text small {color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.home-contract.done .home-contract-text span {color:var(--gold-bright)}
.home-contract.empty {color:var(--muted);font-size:13px}
.home-contract .primary {padding:6px 12px}
.home-contracts-more {display:block;margin:2px 14px 12px;font-size:13px}

/* Artifact stars (schema 56): one short row per kind with stars: its painted icon, its stars and what
   they give now; the next star shows on hover or tap. Rite tabs are small painted icons with a badge. */
.star-grid {list-style:none;margin:8px 0 6px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:5px}
.star-tile {width:100%;height:100%;display:grid;grid-template-columns:36px auto 1fr;align-items:center;gap:8px;padding:5px 8px 5px 5px;border:1px solid rgb(var(--gold-55));border-radius:4px;background:rgb(var(--stone-20));color:var(--muted);text-align:left;cursor:help;font:inherit}
.star-tile .relic-art {width:36px;border-radius:3px}
.star-tile .star-count {font:700 14.5px/1 Georgia,serif;color:var(--gold-bright);white-space:nowrap}
.star-tile .star-now {font-size:13.5px;line-height:1.35}
.star-tile .star-now b {color:rgb(var(--gold-87));font-weight:600}
.star-tile:hover,.star-tile[aria-expanded="true"] {border-color:var(--gold)}
.star-sum {margin:4px 0 0;font-size:14px;color:var(--muted);line-height:1.5}
.star-sum b {color:var(--gold-bright);font-weight:600}
.star-tip {display:grid;gap:5px}
.deathbind-tabs {gap:5px}
.deathbind-tab {flex:0 0 auto;position:relative;width:54px;align-items:center;gap:0;padding:3px 3px 4px}
.deathbind-tab .relic-art {width:46px;border-radius:3px}
.deathbind-tab.locked .relic-art {filter:grayscale(1) brightness(.45)}
.deathbind-tab small {justify-content:center;width:100%;margin-top:3px;font:600 13px/1 system-ui,sans-serif;white-space:nowrap}
.deathbind-tab small.star {color:var(--gold-bright)}
@media(max-width:600px) {.star-grid {grid-template-columns:1fr}}

/* Games tab: a sticky bar in the tab bar's style jumps to each game, sealed ones marked, and every game
   spans the full width of the page. */
.view-jumps.jump-bar {position:sticky;top:var(--hud-height, 0px);z-index:12;display:flex;flex-wrap:nowrap;gap:5px;margin:0 0 14px;padding:8px 0;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid rgb(var(--bone-32));background:rgb(var(--stone-15));box-shadow:0 8px 14px -6px rgb(var(--stone-0) / .8)}
.view-jumps.jump-bar::-webkit-scrollbar {display:none}
.view-jumps.jump-bar[hidden] {display:none}
.view-jumps.jump-bar a {flex:none;display:inline-flex;align-items:center;gap:7px;font-size:14px;padding:7px 13px;border:1px solid rgb(var(--bone-32));border-radius:3px;color:rgb(var(--bone-73));background:rgb(var(--stone-20))}
.view-jumps.jump-bar a:hover {color:var(--gold-bright);border-color:rgb(var(--gold-55))}
.view-jumps.jump-bar a.active {color:rgb(var(--gold-87));background:linear-gradient(rgb(var(--bone-32)),rgb(var(--stone-20)));border-color:rgb(var(--gold-46));box-shadow:inset 0 0 8px rgb(var(--ember-48) / .13)}
.view-jumps.jump-bar .tomb-glyph {flex:none;width:20px;height:24px;margin:-4px -2px -4px -5px;filter:drop-shadow(0 1px 1px rgb(var(--stone-0) / .8))}
.view-jumps.jump-bar a span {background:none;color:inherit;font-size:inherit;padding:0;margin:0;border-radius:0}
.view-jumps.jump-bar a.locked {color:rgb(var(--bone-55));border-style:dashed}
.view-jumps.jump-bar a.locked small {font-size:11px;letter-spacing:1px;text-transform:uppercase;color:rgb(var(--gold-55))}
.view-games .games-grid {grid-template-columns:minmax(0,1fr)}
.view-games .games-grid>.panel {scroll-margin-top:62px}
.view-games .delve-scene {min-height:min(62vh,640px)}
@container (min-width:761px) {.view-games .delve-body {grid-template-columns:minmax(0,1fr) 340px}}
/* A full-width Bone Garden in two rows: the burial plot beside the seed pouch, which stretches to the
   plot's height and fills as more species are found, then the herbarium across the whole panel. */
@media(min-width:1000px) {
  .view-games .garden-panel {container-type:inline-size;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-content:start}
  .view-games .garden-panel>.panel-heading,.view-games .garden-panel>.panel-description {grid-column:1/-1}
  .view-games .garden-scene {grid-column:1;grid-row:3;width:min(652px,54cqw);margin:12px 0 0 16px}
  .view-games .garden-plot {max-width:none}
  .view-games .garden-panel>.garden-pouch {grid-column:2;grid-row:3;margin:12px 16px 0 0}
  .view-games .garden-panel>.garden-herbarium {grid-column:1/-1;grid-row:4;margin:12px 16px 16px}
}
@media(min-width:1101px) {.view-jumps.jump-bar {display:flex}}
@media(max-width:720px) {
  .view-jumps.jump-bar {top:var(--hud-height, 110px);margin:0 -10px 10px;padding:6px 10px;gap:4px}
  .view-jumps.jump-bar a {font-size:13.5px;padding:7px 10px}
  .view-games .delve-scene {min-height:400px}
}

/* The Black Arts (schema 60): a card per spell, its eight steps as a track, and the spell each legion carries. */
.spell-desk {margin:0 18px 8px;padding:8px 12px;border:1px solid rgb(var(--arcane-37));border-radius:3px;background:rgb(var(--stone-20));color:rgb(var(--arcane-82));font-size:14px}
.spell-list {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:10px;padding:4px 18px 8px}
.spell-card {display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px;padding:12px;border:1px solid rgb(var(--arcane-37));border-radius:3px;background:rgb(var(--stone-17))}
.spell-card.sealed {opacity:.6}
.spell-card.learned {border-color:rgb(var(--arcane-50))}
.spell-card img {width:56px;height:56px}
.spell-body h3 {margin:2px 0;font:19px Georgia,serif;font-weight:400;color:rgb(var(--arcane-90))}
.spell-body p {margin:0 0 4px;font-size:13px;line-height:1.4;color:rgb(var(--arcane-72))}
.spell-body .spell-benefit {color:rgb(var(--arcane-78))}
.spell-benefit b {margin-right:6px;font-size:11px;font-weight:600;letter-spacing:1.5px;color:rgb(var(--arcane-67))}
.spell-steps {grid-column:1/-1;display:grid;grid-template-columns:repeat(8,1fr);gap:3px;margin:4px 0 0;padding:0;list-style:none}
.spell-steps li {height:8px;border-radius:2px;background:rgb(var(--stone-26));position:relative}
.spell-steps li.trial {background:rgb(var(--bone-32))}
.spell-steps li.done {background:rgb(var(--arcane-67))}
.spell-steps li.trial.done {background:rgb(var(--blood-67))}
.spell-steps li.current {box-shadow:0 0 0 1px rgb(var(--arcane-78))}
.spell-steps li span {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.spell-action {grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
.spell-action span {display:flex;flex-direction:column;gap:2px;font-size:14px;color:rgb(var(--arcane-90))}
.spell-action small {font-size:12px;color:rgb(var(--arcane-72))}
.spell-note {grid-column:1/-1;margin:4px 0 0;font-size:13px;color:rgb(var(--arcane-72))}
.spell-note.learned {color:rgb(var(--arcane-78))}
.spell-note.studying {color:rgb(var(--arcane-82))}
.spell-boost {margin:0 18px 6px;font-size:14px;color:rgb(var(--arcane-78))}
.spell-boost.resting {color:rgb(var(--bone-62))}
.spell-legions {display:flex;flex-direction:column;gap:6px;margin:0;padding:4px 18px 14px;list-style:none}
.spell-legions li {display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.spell-legions .legion-label {min-width:120px}
.spell-chips {display:flex;flex-wrap:wrap;gap:4px}
.spell-chips small {color:rgb(var(--bone-62));font-size:12px}
.spell-line b {color:rgb(var(--arcane-78))}
.overview-row[data-look="spells"] {--tone:rgb(var(--arcane-78));--art:url('/assets/reference/mage.jpg')}
.spell-chips .muster-chip {padding:0 10px}
/* Mana (schema 60): a thin pool beside the necromancer's name, and the Grimoire's arcane trees. */
.wordmark.has-mana small {display:none}
.mana-meter {display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:2px 8px;margin-top:6px;font:13px 'Segoe UI',sans-serif;letter-spacing:0;color:rgb(var(--arcane-82));text-shadow:none}
.mana-meter .label {font-size:11px;letter-spacing:2px;color:rgb(var(--arcane-72))}
.mana-meter b {font-weight:600;color:rgb(var(--arcane-78));font-variant-numeric:tabular-nums}
.mana-bar {grid-column:1/-1;display:block;width:170px;max-width:100%;height:5px;border-radius:3px;background:rgb(var(--stone-26));overflow:hidden}
.mana-bar i {display:block;height:100%;width:100%;background:linear-gradient(90deg,rgb(var(--arcane-62)),rgb(var(--arcane-67)));transition:width .3s linear}
.mana-meter em {font-style:normal;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:rgb(var(--bone-62))}
.mana-meter.resting b {color:rgb(var(--bone-62))}
.mana-meter.resting .mana-bar i {background:rgb(var(--arcane-37))}
.spell-mana {margin:0 18px 8px;font-size:13px;line-height:1.4;color:rgb(var(--arcane-72))}
.spell-mana:empty {display:none}
.arcana {padding:0 0 14px}
.arcana-note {margin:0 18px 8px;font-size:13px;color:rgb(var(--arcane-72))}
.arcana-trees {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px;padding:0 18px}
.arcana-tree {display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid rgb(var(--arcane-37));border-radius:3px;background:rgb(var(--stone-17))}
.arcana-tree p {margin:0;font-size:13px;line-height:1.4;color:rgb(var(--arcane-72))}
.arcana-head {display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.arcana-head h4 {margin:0;font:17px Georgia,serif;font-weight:400;color:rgb(var(--arcane-90))}
.arcana-ranks {display:grid;grid-template-columns:repeat(10,1fr);gap:3px;margin:0;padding:0;list-style:none}
.arcana-ranks li {height:8px;border-radius:2px;background:rgb(var(--stone-26))}
.arcana-ranks li.done {background:rgb(var(--arcane-67))}
.arcana-ranks li.next {box-shadow:0 0 0 1px rgb(var(--arcane-78))}
.arcana-tree .spell-action {margin-top:auto}
@media(max-width:720px) {.mana-bar {width:150px}}
/* The Grave Lottery (schema 59): the Gravekeeper's shroud, six relics and the five rarities they come up in. */
.lottery-panel {--worn:rgb(var(--stone-88));--haunted:rgb(var(--moss-73));--cursed:rgb(var(--spirit-69));--unholy:rgb(var(--arcane-67));--deathless:rgb(var(--gold-83))}
.lottery-panel>.panel-description {padding:12px 16px 0}
.rarity-name {font-size:12px;letter-spacing:1.5px;font-weight:700;text-transform:uppercase}
.rarity-name.white,.draw-tile.white {--tone:var(--worn)}
.rarity-name.green,.draw-tile.green {--tone:var(--haunted)}
.rarity-name.blue,.draw-tile.blue {--tone:var(--cursed)}
.rarity-name.purple,.draw-tile.purple {--tone:var(--unholy)}
.rarity-name.gold,.draw-tile.gold {--tone:var(--deathless)}
.rarity-name {color:var(--tone)}
.lottery-stage {scroll-margin-top:40px;margin:14px 16px 0;min-height:132px;display:grid;place-items:center;border:1px solid rgb(var(--bone-32));border-radius:4px;background:radial-gradient(ellipse at 50% 110%,rgb(var(--bone-32)) 0,rgb(var(--stone-17)) 70%);overflow:hidden}
.lottery-idle {color:rgb(var(--bone-62));font-style:italic}
.draw-result {--tone:var(--worn);width:100%;display:flex;align-items:center;gap:18px;padding:16px 18px}
.draw-result.white {--tone:var(--worn)}.draw-result.green {--tone:var(--haunted)}.draw-result.blue {--tone:var(--cursed)}.draw-result.purple {--tone:var(--unholy)}.draw-result.gold {--tone:var(--deathless)}
.draw-result.batch {flex-direction:column;align-items:stretch}
.draw-relic {width:96px;height:96px;flex:none;display:grid;place-items:center;border:2px solid var(--tone);border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--tone) 28%,transparent),rgb(var(--stone-15)) 70%);box-shadow:0 0 26px color-mix(in srgb,var(--tone) 55%,transparent)}
.draw-relic .icon {width:54px;height:54px;color:var(--tone)}
.draw-copy {display:flex;flex-direction:column;gap:4px;min-width:0}
.draw-copy strong {font:21px Georgia,serif;color:var(--tone)}
.draw-net {font-size:15px;color:var(--ink)}
.draw-net.up {color:var(--green)}
.draw-net.down {color:rgb(var(--bone-77))}
.draw-copy em,.draw-tile em {font-style:normal;font-size:12px;letter-spacing:1px;color:var(--gold-bright)}
.draw-tiles {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
.draw-tile {display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;border:1px solid color-mix(in srgb,var(--tone) 60%,rgb(var(--stone-0)));border-radius:3px;background:linear-gradient(color-mix(in srgb,var(--tone) 16%,rgb(var(--stone-20))),rgb(var(--stone-17)));text-align:center;min-width:0}
.draw-tile .icon {width:26px;height:26px;color:var(--tone)}
.draw-tile b {font-size:11px;letter-spacing:.5px;color:var(--tone);font-weight:700}
.draw-tile small {font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.draw-tally {list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:15px}
.draw-tally b {margin-left:6px;font-variant-numeric:tabular-nums}
.draw-tile.gold,.draw-tile.purple {box-shadow:0 0 14px color-mix(in srgb,var(--tone) 45%,transparent)}
.lottery-ticket-line {margin:10px 16px 0;font-size:14px}
.lottery-relics {list-style:none;margin:0;padding:12px 16px 4px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.relic-card {display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto;gap:8px 12px;padding:12px;border:1px solid rgb(var(--bone-32));border-radius:4px;background:linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-17)))}
.relic-card.deathless {border-color:rgb(var(--gold-55));box-shadow:0 0 16px rgb(var(--gold-83) / .15)}
.lottery-relic-art {width:64px;height:64px;display:grid;place-items:center;border:1px solid rgb(var(--bone-36));border-radius:50%;background:radial-gradient(circle at 50% 60%,rgb(var(--bone-36)),rgb(var(--stone-20)) 72%)}
.lottery-relic-art .icon {width:36px;height:36px;color:var(--gold-bright)}
.relic-body {display:flex;flex-direction:column;gap:3px;min-width:0}
.relic-body strong {color:var(--gold-bright);font-size:16px}
.relic-price {font-size:14px;color:rgb(var(--moss-87))}
.relic-body small {font-size:13px;color:var(--muted)}
.relic-body .relic-boon {color:rgb(var(--gold-78))}
.draw-copy .perfect-gamble {color:var(--deathless);font-size:14px;letter-spacing:.5px}
.relic-pips {display:flex;gap:5px;margin:2px 0}
.pip {width:12px;height:12px;border-radius:50%;border:1.5px solid var(--tone);opacity:.45}
.pip.white {--tone:var(--worn)}.pip.green {--tone:var(--haunted)}.pip.blue {--tone:var(--cursed)}.pip.purple {--tone:var(--unholy)}.pip.gold {--tone:var(--deathless)}
.pip.found {background:var(--tone);opacity:1;box-shadow:0 0 6px var(--tone)}
.relic-actions {grid-column:1/-1;display:flex;gap:8px}
.relic-actions button {flex:1}
.lottery-odds {margin:10px 16px 0;border:1px solid rgb(var(--stone-26));border-radius:3px;padding:8px 12px}
.lottery-odds summary {cursor:pointer;color:var(--gold);font-size:14.5px}
.lottery-odds p {font-size:14px;margin-top:8px}
.lottery-table {width:100%;max-width:600px;border-collapse:collapse;margin-top:8px;font-size:14px}
.lottery-table th {text-align:left;font-size:12px;letter-spacing:1px;color:var(--muted);font-weight:600;padding:4px 6px;border-bottom:1px solid rgb(var(--bone-32))}
.lottery-table td {padding:6px;border-bottom:1px solid rgb(var(--stone-26));font-variant-numeric:tabular-nums}
.lottery-record {margin:10px 16px 16px;font-size:14px}
.lottery-controls {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 16px 10px;color:rgb(var(--bone-69));font-size:11px;letter-spacing:2px}
.lottery-controls button {font-size:12px;letter-spacing:0;padding:6px 12px}
.lottery-rarities {display:flex;flex-wrap:wrap;gap:10px 22px;margin:0 16px;padding:12px 0;border-block:1px solid rgb(var(--bone-40))}
.lottery-rarities .rarity-name {display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:1px}
.lottery-rarities i {width:7px;height:7px;background:var(--tone);transform:rotate(45deg)}
.lottery-rarities small {color:rgb(var(--bone-77));letter-spacing:0}
.lottery-stage {position:relative;min-height:248px;border:1px solid rgb(var(--gold-55));border-radius:0;background:radial-gradient(ellipse at 50% 110%,rgb(var(--bone-36)) 0,rgb(var(--stone-17)) 65%);box-shadow:inset 0 0 0 4px rgb(var(--stone-15)),inset 0 0 0 5px rgb(var(--bone-32))}
.lottery-idle {text-align:center;padding:26px 16px;font-style:normal}
.lottery-idle>span {display:block;color:rgb(var(--gold-66));font-size:34px;text-shadow:0 0 28px rgb(var(--gold-76))}
.lottery-idle strong {display:block;font:24px Georgia,serif;color:rgb(var(--bone-83));margin:12px 0}
.lottery-idle p {font-size:14px;color:rgb(var(--bone-69))}
.lottery-machine {width:100%;min-width:0;padding:14px 0}
.reel-heading {display:flex;justify-content:space-between;gap:10px;padding:0 18px 14px;color:rgb(var(--bone-73));font-size:10px;letter-spacing:1.8px}
.reel-heading b {color:rgb(var(--gold-87));font-weight:400;letter-spacing:.5px}
.reel-window {position:relative;height:160px;overflow:hidden;background:rgb(var(--stone-15));border-block:1px solid rgb(var(--bone-40))}
.reel-window::after {content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgb(var(--stone-15) / .91),transparent 22%,transparent 78%,rgb(var(--stone-15) / .91))}
.reel-track {display:flex;gap:8px;position:absolute;left:0;top:7px;will-change:transform}
.reel-item {flex:0 0 120px;height:144px;display:flex;align-items:center;flex-direction:column;background:radial-gradient(ellipse at bottom,color-mix(in srgb,var(--tone) 24%,rgb(var(--stone-17))),rgb(var(--stone-17)) 80%);border:1px solid rgb(var(--bone-32));border-bottom:3px solid var(--tone);color:var(--tone)}
.lottery-panel .white {--tone:var(--worn)}.lottery-panel .green {--tone:var(--haunted)}.lottery-panel .blue {--tone:var(--cursed)}.lottery-panel .purple {--tone:var(--unholy)}.lottery-panel .gold {--tone:var(--deathless)}
.relic-image {display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:screen;mask-image:radial-gradient(ellipse,black 48%,transparent 74%)}
.reel-item .relic-image {width:92px;height:100px}
.reel-item b {font-size:12px;letter-spacing:1px;text-transform:uppercase}
.reel-item small {font-size:11px;color:rgb(var(--bone-83));margin-top:3px}
.reel-window .reel-pointer {display:block;position:absolute;z-index:2;left:50%;top:0;bottom:0;width:2px;height:100%;border-radius:0;background:rgb(var(--gold-87));box-shadow:0 0 12px rgb(var(--gold-76))}
.reel-pointer::before,.reel-pointer::after {content:"";position:absolute;left:-5px;border-inline:6px solid transparent}
.reel-pointer::before {top:0;border-top:8px solid rgb(var(--bone-96))}.reel-pointer::after {bottom:0;border-bottom:8px solid rgb(var(--bone-96))}
.reel-caption {text-align:center;color:rgb(var(--bone-77));font:italic 14px Georgia,serif;margin:14px 0 0}
.relic-card {grid-template-columns:92px 1fr;border-radius:0;border-color:rgb(var(--bone-40));background:linear-gradient(120deg,rgb(var(--stone-26)),rgb(var(--stone-17)));transition:border-color .2s}
.relic-card:hover {border-color:rgb(var(--gold-66))}
.lottery-relic-art {width:92px;height:108px;border-radius:0;border:0;background:radial-gradient(ellipse,rgb(var(--bone-40) / .2),transparent 70%)}
.draw-relic {width:142px;height:142px;border-radius:0;border-width:1px}
.draw-result {padding:24px;animation:relic-reveal .55s ease-out both}
.draw-tile .relic-image {height:64px;width:64px;max-width:100%}
.draw-tile {border-radius:0;border-bottom:3px solid var(--tone)}
@keyframes relic-reveal {from {opacity:0;transform:translateY(8px) scale(.97)}to {opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce) {.draw-result {animation:none}.relic-card {transition:none}}
@media(max-width:480px) {.lottery-controls>span {font-size:9px;letter-spacing:1px}.lottery-rarities {gap:9px 12px}.reel-heading {font-size:9px;letter-spacing:0}.draw-tiles {grid-template-columns:repeat(2,minmax(0,1fr))}.relic-card {grid-template-columns:76px 1fr}.lottery-relic-art {width:76px}}
@media(max-width:1250px) {.lottery-relics {grid-template-columns:repeat(2,minmax(0,1fr))}.draw-tiles {grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:720px) {.lottery-relics {grid-template-columns:1fr}.draw-result {gap:12px;padding:12px}.draw-relic {width:72px;height:72px}.draw-relic .icon {width:40px;height:40px}.draw-copy strong {font-size:18px}}
@media(max-width:480px) {.lottery-panel .draw-tiles {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:no-preference) {
  .draw-relic {animation:shroud-lift .9s cubic-bezier(.2,.8,.3,1.2) both}
  .draw-result.gold .draw-relic,.draw-result.purple .draw-relic {animation:shroud-lift .9s cubic-bezier(.2,.8,.3,1.2) both,relic-blaze 1.6s ease-in-out .9s 3}
  .draw-copy {animation:draw-copy .5s ease-out .6s both}
  .draw-result.batch .draw-copy {animation-delay:1.9s}
  .draw-tile {animation:tile-turn .45s ease-out both}
  .draw-tile.d1 {animation-delay:.15s}.draw-tile.d2 {animation-delay:.3s}.draw-tile.d3 {animation-delay:.45s}.draw-tile.d4 {animation-delay:.6s}
  .draw-tile.d5 {animation-delay:.75s}.draw-tile.d6 {animation-delay:.9s}.draw-tile.d7 {animation-delay:1.05s}.draw-tile.d8 {animation-delay:1.2s}.draw-tile.d9 {animation-delay:1.35s}
  @keyframes shroud-lift {from {opacity:0;scale:.3;filter:brightness(3) blur(4px)}to {opacity:1;scale:1;filter:none}}
  @keyframes relic-blaze {50% {box-shadow:0 0 48px var(--tone),0 0 90px color-mix(in srgb,var(--tone) 50%,transparent)}}
  @keyframes draw-copy {from {opacity:0;translate:0 8px}to {opacity:1;translate:0 0}}
  @keyframes tile-turn {from {opacity:0;transform:rotateY(90deg) scale(.8)}to {opacity:1;transform:none}}
}

/* Funerary seals: separate artwork for compact HUD, daily portents and boss warnings. */
.hud-reliquary-art,.pinned-hud .hud-reliquary-art {
  background:rgb(var(--stone-17)) url('/assets/illustrations/reliquary.png') 28.57143% 100%/800% 500% no-repeat;
  border-color:rgb(var(--gold-55));border-radius:0;
}
.reliquary-banner,.codex-head {background-position:50% 48%;border-radius:0}
.codex-head {background-image:linear-gradient(90deg,rgb(var(--stone-15) / .85),transparent 65%,rgb(var(--stone-15) / .5)),url('/assets/illustrations/reliquary-vault.jpg')}
.omen .omen-sigil,.omen[data-phase="active"] .omen-sigil {width:56px;height:64px;border-radius:0;box-shadow:none;background:url('/assets/omens/worldboss.svg') center/contain no-repeat;animation:none}
.omen[data-phase="active"] .omen-sigil {filter:sepia(.6) saturate(1.8)}
@media(prefers-reduced-motion:no-preference) {
  .omen-icon:not([data-omen="stillgrave"]) .portent-sigil {animation:portent-breathe 5s ease-in-out infinite}
  @keyframes portent-breathe {0%,100% {opacity:.82;transform:translateY(0)}50% {opacity:1;transform:translateY(-2px)}}
}
/* Lemp's seals (September 2026 art refresh) on the top bar omen icon, each omen in its own tone. */
.omen-icon {--portent-tone:rgb(var(--bone-73));border-color:rgb(var(--bone-40));background:radial-gradient(circle,rgb(var(--stone-26) / .5),rgb(var(--stone-17)))}
.omen-icon:hover,.omen-icon[aria-expanded="true"] {border-color:var(--portent-tone)}
.omen-icon .portent-sigil {display:block;width:28px;height:28px;background:url('/assets/omens/stillgrave.svg') center/contain no-repeat}
.omen-icon[data-omen="bloodmoon"] {--portent-tone:rgb(var(--ember-75));border-color:rgb(var(--blood-38));background:radial-gradient(circle,rgb(var(--stone-26)),rgb(var(--stone-17)))}
.omen-icon[data-omen="gravefog"] {--portent-tone:rgb(var(--spirit-76))}
.omen-icon[data-omen="soulharvest"] {--portent-tone:rgb(var(--moss-76))}
.omen-icon[data-omen="ironrain"] {--portent-tone:rgb(var(--spirit-76))}
.omen-icon[data-omen="restless"] {--portent-tone:rgb(var(--arcane-72))}
.omen-icon[data-omen="bloodmoon"] .portent-sigil {background-image:url('/assets/omens/bloodmoon.svg')}
.omen-icon[data-omen="gravefog"] .portent-sigil {background-image:url('/assets/omens/gravefog.svg')}
.omen-icon[data-omen="soulharvest"] .portent-sigil {background-image:url('/assets/omens/soulharvest.svg')}
.omen-icon[data-omen="ironrain"] .portent-sigil {background-image:url('/assets/omens/ironrain.svg')}
.omen-icon[data-omen="restless"] .portent-sigil {background-image:url('/assets/omens/restless.svg')}
.info-note .omen-tip-eyebrow {color:var(--portent-tone, rgb(var(--arcane-72)))}
.info-note .omen-tip-boon {color:rgb(var(--moss-83))}
.info-note .omen-tip-bane {color:rgb(var(--ember-75))}
/* The admin sandbox: a violet frame around the page and a bar that says nothing here is kept. */
body.in-sandbox::after {content:'';position:fixed;inset:0;border:3px solid rgb(var(--arcane-62));pointer-events:none;z-index:40}
.sandbox-bar {position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:41;display:flex;align-items:center;gap:14px;width:max-content;max-width:calc(100% - 24px);padding:10px 12px 10px 16px;border:1px solid rgb(var(--arcane-62));border-radius:4px;background:rgb(var(--stone-20) / .95);box-shadow:0 8px 28px rgb(var(--stone-0) / .8);color:var(--ink);font-size:14px;line-height:1.4}
.sandbox-bar b {color:rgb(var(--arcane-82));letter-spacing:1.5px;margin-right:6px}
.sandbox-bar .secondary {flex-shrink:0;border-color:rgb(var(--arcane-62))}
.sandbox-actions {display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0}
.admin-sandbox {display:grid;gap:10px;justify-items:start;margin:12px 0 18px;border-color:rgb(var(--arcane-62))!important}
/* Above the phone's bottom tab bar. */
@media(max-width:720px) {.sandbox-bar {left:10px;right:10px;width:auto;max-width:none;transform:none;bottom:calc(62px + env(safe-area-inset-bottom));font-size:13px;gap:8px;padding:8px 10px;flex-wrap:wrap}.sandbox-bar .sandbox-actions {margin-left:auto}.sandbox-bar .secondary {padding:6px 10px}.sandbox-more {display:none}}

/* The Coffin Hunt's crypt (docs/artwork.md): nine hand-drawn coffins on a torchlit flagstone floor, the hoard chest
   the pot piles into, and a candle for every trail held. public/coffin-hunt.js only switches classes and data
   attributes; lids, loot and the hoard move by transform and opacity, and only when motion is welcome. The same
   coffins lie in the coffin spirit's dialog. */
.coffins-panel {container:coffin-hunt/inline-size}
/* The crypt's layers are <i> elements: undo the page's green-dot look for them, without outranking any class. */
:where(.hunt-crypt) i {display:block;width:auto;height:auto;border-radius:0;background:none;box-shadow:none}
/* The crypt clips (not hides) what spills past it, the torchlight pool under the coffins, so nothing can scroll it
   sideways when a button inside takes the focus. */
.hunt-crypt {position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:1fr auto 1fr;grid-template-areas:". plot hoard" "trail plot hoard" ". plot hoard";column-gap:36px;row-gap:14px;margin:12px 16px 14px;padding:34px 28px 26px;border:1px solid rgb(var(--bone-55));overflow:hidden;overflow:clip;background:rgb(var(--stone-15));box-shadow:inset 0 0 0 1px rgb(var(--stone-0))}
.hunt-crypt::after {content:'';position:absolute;inset:5px;z-index:4;border:1px solid rgb(var(--gold-66) / .18);pointer-events:none}
/* A red breath over the whole crypt when a Mimic bites. */
.hunt-crypt::before {content:'';position:absolute;inset:0;z-index:3;box-shadow:inset 0 0 90px 18px rgb(var(--blood-53));opacity:0;pointer-events:none}
/* Without motion the red stays while the Mimic is on show; with it, the breath flashes and fades (below). */
.hunt-crypt[data-phase="mimic"]::before {opacity:.5}
.hunt-backdrop {position:absolute;inset:0;z-index:-1;overflow:hidden;overflow:clip;pointer-events:none}
.hunt-backdrop>i {position:absolute;display:block}
/* Flagstones tipped back into the dark, the back wall a strip of the Abandoned Crypt's painting. */
.hunt-floor {left:-80%;right:-80%;bottom:0;height:250%;background:url('/assets/coffins/floor.svg') 50% 100%/180px 180px;transform-origin:50% 100%;transform:perspective(800px) rotateX(45deg)}
.hunt-wall {left:0;right:0;top:0;height:30%;background:linear-gradient(rgb(var(--stone-15) / .88),rgb(var(--stone-15) / .5) 50%,rgb(var(--stone-15) / 0)),url('/assets/illustrations/abandoned-crypt.jpg') 50% 42%/max(100%,1100px) auto no-repeat;-webkit-mask:linear-gradient(rgb(var(--stone-0)) 60%,transparent);mask:linear-gradient(rgb(var(--stone-0)) 60%,transparent);opacity:.8}
.hunt-backdrop::after {content:'';position:absolute;inset:0;background:radial-gradient(ellipse 72% 66% at 50% 60%,rgb(var(--stone-15) / 0) 35%,rgb(var(--stone-15) / .85) 100%),linear-gradient(rgb(var(--stone-15)) 0,rgb(var(--stone-15) / 0) 22%,rgb(var(--stone-15) / 0) 82%,rgb(var(--stone-15) / .7))}
/* Two torches on the back wall, and the light they throw across the floor. */
.hunt-torch {--x:8%;inset:0;z-index:1;background:radial-gradient(circle at var(--x) 44px,rgb(var(--gold-82) / .3),rgb(var(--ember-71) / .13) 70px,rgb(var(--ember-71) / 0) 170px),radial-gradient(ellipse 36% 78% at var(--x) 14%,rgb(var(--ember-71) / .16),rgb(var(--ember-71) / .05) 55%,rgb(var(--ember-71) / 0))}
.hunt-torch+.hunt-torch {--x:92%}
.hunt-torch::before {content:'';position:absolute;left:calc(var(--x) - 15px);top:44px;width:30px;height:75px;background:url('/assets/coffins/torch.svg') 0 0/100% 100% no-repeat}
.hunt-torch::after {content:'';position:absolute;left:calc(var(--x) - 10px);top:26px;width:20px;height:33px;border-radius:50% 50% 45% 45%/62% 62% 38% 38%;background:radial-gradient(ellipse 50% 60% at 50% 72%,rgb(var(--stone-100)),rgb(var(--gold-83)) 38%,rgb(var(--ember-71)) 70%,rgb(var(--ember-71) / 0));transform-origin:50% 90%}
.hunt-flash {inset:0;z-index:1;background:radial-gradient(ellipse 60% 55% at 50% 55%,rgb(var(--blood-53) / .45),rgb(var(--blood-53) / 0) 72%);opacity:0}
.hunt-crypt[data-phase="left"] .hunt-flash,.hunt-crypt[data-phase="cleared"] .hunt-flash {background:radial-gradient(ellipse 60% 55% at 50% 55%,rgb(var(--gold-82) / .32),rgb(var(--gold-82) / 0) 72%)}

/* The plot: nine coffins, each laid a little crooked, in a pool of torchlight. */
.hunt-plot {grid-area:plot;position:relative;display:grid;align-content:center;justify-content:center}
.hunt-plot::before {content:'';position:absolute;inset:-4% -16%;z-index:-1;background:radial-gradient(closest-side,rgb(var(--gold-76) / .11),rgb(var(--gold-76) / 0));pointer-events:none}
.hunt-crypt .coffin-grid {--coffin:104px;gap:6px 20px}
.coffin-grid>.coffin {--lid-x:0%}
.coffin-grid>.coffin:nth-child(2),.coffin-grid>.coffin:nth-child(4),.coffin-grid>.coffin:nth-child(9) {--lid-x:50%}
.coffin-grid>.coffin:nth-child(3),.coffin-grid>.coffin:nth-child(5),.coffin-grid>.coffin:nth-child(7) {--lid-x:100%}
.coffin-grid>.coffin:nth-child(1) {rotate:-1.4deg}
.coffin-grid>.coffin:nth-child(2) {rotate:.8deg}
.coffin-grid>.coffin:nth-child(3) {rotate:-.4deg}
.coffin-grid>.coffin:nth-child(4) {rotate:1.2deg}
.coffin-grid>.coffin:nth-child(5) {rotate:-.9deg}
.coffin-grid>.coffin:nth-child(6) {rotate:.5deg}
.coffin-grid>.coffin:nth-child(7) {rotate:.9deg}
.coffin-grid>.coffin:nth-child(8) {rotate:-1.2deg}
.coffin-grid>.coffin:nth-child(9) {rotate:.6deg}
.coffin-art {position:absolute;inset:0;pointer-events:none;perspective:430px}
.coffin-art>i {position:absolute;inset:0;display:block;background-repeat:no-repeat;background-size:100% 100%}
.coffin-art>.coffin-box {background-image:url('/assets/coffins/coffin.svg')}
.coffin-art>.coffin-loot {background-image:url('/assets/coffins/loot.svg');opacity:0}
.coffin-art>.coffin-maw {background-image:url('/assets/coffins/mimic.svg');opacity:0}
/* The glow spills past the coffin onto the floor. */
.coffin-art>.coffin-glow {inset:-14% -30%;background-image:radial-gradient(closest-side at 54% 49%,rgb(var(--gold-87) / .6),rgb(var(--gold-76) / .22) 50%,rgb(var(--gold-76) / 0));opacity:0;mix-blend-mode:screen}
.coffin-art>.coffin-lid {background-image:url('/assets/coffins/lids.svg');background-size:300% 100%;background-position:var(--lid-x) 0;transform-origin:4.5% 50%;filter:drop-shadow(0 2px 2px rgb(var(--stone-0) / .8))}
/* Waiting for a trail, the coffins lie dim under a veil cut to their shape. */
.coffin-art::after {content:'';position:absolute;inset:0;background:rgb(var(--stone-15));opacity:0;-webkit-mask:url('/assets/coffins/coffin.svg') 0 0/100% 100% no-repeat,url('/assets/coffins/lids.svg') var(--lid-x) 0/300% 100% no-repeat;mask:url('/assets/coffins/coffin.svg') 0 0/100% 100% no-repeat,url('/assets/coffins/lids.svg') var(--lid-x) 0/300% 100% no-repeat}
.coffin-grid.waiting .coffin-art::after {opacity:.55}
.coffin-grid>.coffin[data-coffin]:not([aria-disabled]) {cursor:pointer}
/* A coffin the pointer or the keyboard rests on cracks its lid, and ghostlight seeps out: it could be either. */
@media(hover:hover) {
  .coffin-grid>.coffin[data-coffin]:not([aria-disabled]):hover .coffin-lid {transform:rotateY(-22deg)}
  .coffin-grid>.coffin[data-coffin]:not([aria-disabled]):hover .coffin-glow {opacity:.7;background-image:radial-gradient(closest-side at 50% 52%,rgb(var(--moss-90) / .4),rgb(var(--moss-73) / .14) 55%,rgb(var(--moss-73) / 0))}
}
.coffin-grid>.coffin[data-coffin]:focus-visible .coffin-lid {transform:rotateY(-22deg)}
.coffin-grid>.coffin[data-coffin]:focus-visible .coffin-glow {opacity:.7;background-image:radial-gradient(closest-side at 50% 52%,rgb(var(--moss-90) / .4),rgb(var(--moss-73) / .14) 55%,rgb(var(--moss-73) / 0))}
/* A safe coffin swings its lid aside on Dark Energy loot; a Mimic shows its teeth, and after the last safe coffin the
   two left shut are seen for what they are. */
.coffin-grid>.coffin.opened .coffin-lid {transform:rotateY(-68deg)}
.coffin-grid>.coffin.opened .coffin-loot {opacity:1}
.coffin-grid>.coffin.opened .coffin-glow {opacity:.55}
.coffin-grid>.coffin.mimic .coffin-lid {transform:rotateY(-62deg)}
.coffin-grid>.coffin.lurking .coffin-lid {transform:rotateY(-32deg)}
.coffin-grid>.coffin:is(.mimic,.lurking) .coffin-maw {opacity:1}
.coffin-grid>.coffin:is(.mimic,.lurking) .coffin-glow {background-image:radial-gradient(closest-side at 54% 47%,rgb(var(--ember-68) / .8),rgb(var(--blood-53) / .32) 50%,rgb(var(--blood-53) / 0));opacity:.8}
.coffin-grid>.coffin.lurking .coffin-glow {opacity:.45}
.coffin-grid>.coffin:is(.fresh,.mimic) {z-index:1}
.coffin-take {position:absolute;left:50%;bottom:5%;z-index:2;transform:translateX(-50%);padding:1px 7px 2px;border:1px solid rgb(var(--gold-46));border-radius:2px;background:rgb(var(--stone-15) / .88);box-shadow:0 2px 6px rgb(var(--stone-0) / .67);color:rgb(var(--gold-87));font:700 13.5px/1.25 Georgia,'Times New Roman',serif;white-space:nowrap;text-shadow:0 1px 2px rgb(var(--stone-0))}
.coffin-take:empty {display:none}
.coffin-gain {position:absolute;left:50%;top:28%;z-index:3;transform:translateX(-50%);color:rgb(var(--bone-96));font:700 20px/1 Georgia,'Times New Roman',serif;white-space:nowrap;text-shadow:0 0 10px rgb(var(--gold-76)),0 2px 3px rgb(var(--stone-0));opacity:0;pointer-events:none}

/* The trail: a candle for every trail the hold keeps, lit while it waits, burnt down once followed, on stone ledges.
   It keeps the Follow button's row while the button hides, so nothing slides under the pointer. */
.hunt-trail {grid-area:trail;display:grid;grid-template-rows:auto auto minmax(46px,auto);justify-items:center;gap:16px}
.hunt-tally {display:grid;justify-items:center;gap:8px}
/* The count the candles tally, set like the Delve's muster. */
.hunt-tally-count {font:700 14px/1.2 Georgia,'Times New Roman',serif;letter-spacing:1.5px;color:rgb(var(--stone-88));font-variant-numeric:tabular-nums;text-shadow:0 1px 4px rgb(var(--stone-0)),0 0 12px rgb(var(--stone-15));white-space:nowrap}
.hunt-tally-count:empty {display:none}
.hunt-candles {--candle:24px;--row:calc(var(--candle) * 8 / 3);display:flex;flex-wrap:wrap;justify-content:center;column-gap:calc(var(--candle) / 3);width:calc(6 * var(--candle) + 5 * var(--candle) / 3 + 20px);max-width:100%;padding:0 10px;background:repeating-linear-gradient(rgb(var(--bone-40) / 0) 0 calc(var(--row) - 5px),rgb(var(--bone-40) / .53) calc(var(--row) - 5px) calc(var(--row) - 4px),rgb(var(--stone-26)) calc(var(--row) - 4px) calc(var(--row) - 1px),rgb(var(--stone-15)) calc(var(--row) - 1px) var(--row))}
.hunt-candles:has(>:nth-child(13)) {--candle:17px;width:calc(9 * var(--candle) + 8 * var(--candle) / 3 + 20px)}
.hunt-candle {position:relative;display:block;flex:none;width:var(--candle);height:var(--row);background:url('/assets/coffins/candle.svg') 100% 0/200% 100% no-repeat;--flick:2.2s;--flick-at:0s}
.hunt-candle:nth-child(2n) {--flick:1.7s;--flick-at:-.4s}
.hunt-candle:nth-child(3n) {--flick:2.6s;--flick-at:-1.1s}
.hunt-candle.lit,.hunt-candle.next {background-position:0 0}
.hunt-candle::before {content:'';position:absolute;left:35%;top:1%;width:30%;height:20%;border-radius:50% 50% 45% 45%/65% 65% 35% 35%;background:radial-gradient(ellipse 50% 60% at 50% 70%,rgb(var(--stone-100)),rgb(var(--gold-87)) 35%,rgb(var(--ember-71)) 66%,rgb(var(--ember-71) / 0));opacity:0;transform-origin:50% 90%}
.hunt-candle::after {content:'';position:absolute;left:-80%;top:-22%;width:260%;height:70%;border-radius:50%;background:radial-gradient(closest-side,rgb(var(--gold-82) / .3),rgb(var(--gold-82) / .07) 60%,rgb(var(--gold-82) / 0));opacity:0;pointer-events:none}
.hunt-candle.lit::before,.hunt-candle.lit::after {opacity:1}
/* The next trail's candle: an ember that grows as its trail comes. */
.hunt-candle.next::before {opacity:calc(.2 + var(--kindle, 0) * .5);transform:scale(calc(.3 + var(--kindle, 0) * .45))}
.hunt-trail .hunt-follow {width:100%;max-width:250px;padding:12px 16px;white-space:normal;line-height:1.3}

/* The hoard: an iron-bound chest the pot piles up in, heap by heap, and the pot counting beside it. */
/* It keeps the leave button's row too, so the chest stays put when the button hides. */
.hunt-hoard {grid-area:hoard;align-self:center;display:grid;grid-template-rows:auto auto minmax(46px,auto);justify-items:center;gap:10px;text-align:center}
.hunt-chest {position:relative;display:block;width:min(100%,232px);aspect-ratio:200/170}
.hunt-chest>i,.hunt-chest-well {position:absolute;inset:0;display:block}
.hunt-chest>i {background-repeat:no-repeat;background-size:100% 100%}
.hunt-chest>.hunt-chest-back {background-image:url('/assets/coffins/chest.svg');opacity:0}
.hunt-chest>.hunt-chest-front {background-image:url('/assets/coffins/chest-front.svg')}
.hunt-chest>.hunt-chest-lid {background-image:url('/assets/coffins/chest-lid.svg')}
.hunt-chest-well {bottom:17.65%;overflow:hidden;overflow:clip;opacity:0}
.hunt-chest-heap {position:absolute;left:0;right:0;top:0;display:block;height:121.43%;background:url('/assets/coffins/hoard.svg') 0 0/100% 100% no-repeat;transform:translateY(61.2%)}
.hunt-chest[data-level="1"] .hunt-chest-heap {transform:translateY(22.35%)}
.hunt-chest[data-level="2"] .hunt-chest-heap {transform:translateY(18.6%)}
.hunt-chest[data-level="3"] .hunt-chest-heap {transform:translateY(14.9%)}
.hunt-chest[data-level="4"] .hunt-chest-heap {transform:translateY(11.2%)}
.hunt-chest[data-level="5"] .hunt-chest-heap {transform:translateY(7.45%)}
.hunt-chest[data-level="6"] .hunt-chest-heap {transform:translateY(3.7%)}
.hunt-chest[data-level="7"] .hunt-chest-heap {transform:none}
.hunt-chest[data-state="open"]>.hunt-chest-back,.hunt-chest[data-state="open"]>.hunt-chest-well {opacity:1}
.hunt-chest[data-state="open"]>.hunt-chest-lid {opacity:0;transform:translateY(-14%)}
.hunt-chest-coins {position:absolute;left:30%;right:30%;top:26%;height:24%;pointer-events:none}
.hunt-chest-coins i {position:absolute;left:50%;top:50%;display:block;width:14px;height:9px;margin:-4.5px 0 0 -7px;border-radius:50%;background:radial-gradient(ellipse at 40% 35%,rgb(var(--bone-96)),rgb(var(--gold-83)) 45%,rgb(var(--gold-55)));box-shadow:0 1px 1px rgb(var(--stone-0) / .53);opacity:0}
.hunt-chest-coins i:nth-child(1) {--dx:-38px;--dy:-44px}
.hunt-chest-coins i:nth-child(2) {--dx:-14px;--dy:-62px}
.hunt-chest-coins i:nth-child(3) {--dx:10px;--dy:-54px}
.hunt-chest-coins i:nth-child(4) {--dx:34px;--dy:-40px}
.hunt-chest-coins i:nth-child(5) {--dx:-2px;--dy:-34px}
.hunt-hoard-gain {position:absolute;left:50%;top:6%;z-index:2;transform:translateX(-50%);color:rgb(var(--bone-96));font:700 22px/1 Georgia,'Times New Roman',serif;white-space:nowrap;text-shadow:0 0 12px rgb(var(--gold-76)),0 2px 3px rgb(var(--stone-0));opacity:0;pointer-events:none}
.hunt-chest:is([data-state="left"],[data-state="cleared"],[data-state="mimic"]) .hunt-hoard-gain {opacity:1}
.hunt-chest[data-state="mimic"] .hunt-hoard-gain {color:rgb(var(--ember-75));text-shadow:0 0 12px rgb(var(--blood-53)),0 2px 3px rgb(var(--stone-0))}
.hunt-pot-line {display:flex;align-items:center;justify-content:center;gap:10px;min-height:40px}
.hunt-pot-line .icon {width:24px;height:30px;color:var(--green);filter:drop-shadow(0 0 8px rgb(var(--moss-74) / .4))}
.hunt-pot {color:var(--gold-bright);font:400 34px/1 Georgia,'Times New Roman',serif;font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgb(var(--gold-76) / .3),0 2px 4px rgb(var(--stone-0))}
.hunt-pot-line:has(.hunt-pot:empty) {visibility:hidden}
.hunt-crypt[data-phase="mimic"] .hunt-pot {color:rgb(var(--ember-60))}
.hunt-hoard .hunt-leave {width:100%;max-width:250px;padding:12px 16px;border-color:rgb(var(--moss-59));background:linear-gradient(rgb(var(--moss-44)),rgb(var(--bone-32)));color:rgb(var(--moss-97));font-size:14.5px;white-space:normal;line-height:1.3}
/* Dark Energy on its way from a safe coffin to the hoard: coins and a wisp of soulfire, flown by public/coffin-hunt.js. */
.hunt-motes {position:absolute;inset:0;z-index:2;overflow:hidden;overflow:clip;pointer-events:none}
.hunt-motes>.hunt-mote {position:absolute;left:0;top:0;width:15px;height:10px;margin:-5px 0 0 -7.5px;border-radius:50%;background:radial-gradient(ellipse at 40% 35%,rgb(var(--bone-96)),rgb(var(--gold-83)) 45%,rgb(var(--gold-55)));box-shadow:0 0 9px 1px rgb(var(--gold-87) / .55);opacity:0}
.hunt-motes>.hunt-mote.hunt-wisp {width:12px;height:18px;margin:-9px 0 0 -6px;border-radius:50% 50% 45% 45%/62% 62% 38% 38%;background:radial-gradient(ellipse 50% 60% at 50% 68%,rgb(var(--bone-96)),rgb(var(--moss-84)) 38%,rgb(var(--moss-64) / .6) 62%,rgb(var(--moss-64) / 0));box-shadow:none}

/* The coffin streak (schema 67): under the crypt, the multiplier set large in gold, the pot, what cashing out pays and
   what the next safe coffin would make it, and the Risk it all button. Before three safe coffins it waits dimmed. */
.coffin-streak {display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"head facts risk" "mult facts risk" "note note note";align-items:center;gap:6px 22px;margin:0 16px 14px;padding:14px 18px;border:1px solid rgb(var(--gold-55));border-radius:3px;background:radial-gradient(ellipse 60% 120% at 12% 50%,rgb(var(--gold-76) / .14),rgb(var(--gold-76) / 0)),rgb(var(--stone-17));box-shadow:inset 0 0 0 1px rgb(var(--stone-0)),inset 0 0 26px rgb(var(--gold-76) / .08)}
.coffin-streak[data-mode="locked"] {border-color:var(--line);background:rgb(var(--stone-17));box-shadow:inset 0 0 0 1px rgb(var(--stone-0))}
.coffin-streak[data-mode="locked"] .streak-mult {opacity:.45}
.streak-head {grid-area:head;display:flex;align-items:center;gap:6px}
.streak-title {margin:0;font-size:12px;font-weight:700;line-height:1.2;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold)}
.streak-mult {grid-area:mult;margin:0;line-height:1}
.streak-facts {grid-area:facts;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 16px;margin:0}
.streak-facts:empty {display:none}
.streak-facts>div {min-width:0}
.streak-facts dt {font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.streak-facts dd {margin:2px 0 0;color:var(--ink);font:700 17px/1.25 Georgia,'Times New Roman',serif;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.streak-note {grid-area:note;margin:0;font-size:13.5px;color:rgb(var(--bone-83))}
.streak-risk {grid-area:risk;padding:12px 18px;border-color:rgb(var(--blood-53));background:linear-gradient(rgb(var(--blood-38)),rgb(var(--blood-27)));color:rgb(var(--bone-96));white-space:normal;line-height:1.3;max-width:220px}
.streak-risk:disabled {border-color:var(--line);background:rgb(var(--stone-20));color:var(--muted)}
@container coffin-hunt (max-width:699px) {
  .coffin-streak {grid-template-columns:auto minmax(0,1fr);grid-template-areas:"head head" "mult risk" "facts facts" "note note";gap:8px 14px;margin:0 10px 12px;padding:12px}
  .streak-mult {--mult-size:40px}
  .streak-facts dd {font-size:15px}
  .streak-risk {justify-self:end;padding:11px 12px}
}

/* The spirit's dialog: the same coffins, a smaller crypt. */
.hunt-crypt.hunt-crypt-spirit {display:block;margin:0;padding:20px 12px 16px}
.hunt-crypt-spirit .coffin-grid {--coffin:min(92px,calc((100vw - 136px) / 3));gap:2px 12px}
@media(max-width:560px) {.hunt-crypt-spirit .hunt-torch::before,.hunt-crypt-spirit .hunt-torch::after {display:none}}

@container coffin-hunt (min-width:1500px) {.hunt-crypt .coffin-grid {--coffin:116px}}
@container coffin-hunt (max-width:1099px) {
  .hunt-crypt {column-gap:18px;margin:12px 12px 14px;padding:30px 14px 22px}
  .hunt-crypt .coffin-grid {--coffin:92px;column-gap:14px}
  .hunt-candles {--candle:20px}
  .hunt-chest {width:min(100%,180px)}
  .hunt-pot {font-size:30px}
  .hunt-trail .hunt-follow,.hunt-hoard .hunt-leave {padding:11px 12px}
}
/* Too narrow for a column each side: the trail and, under it, the hoard share one beside the coffins. The rows kept
   for the buttons fall below the chest while the crypt waits, and between the two while a hunt runs. */
@container coffin-hunt (max-width:769px) {
  .hunt-crypt {grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;grid-template-areas:"plot ." "plot trail" "plot hoard" "plot .";column-gap:20px}
  .hunt-chest {width:min(100%,160px)}
}
/* A phone: the trail along the back wall, where the player arrives, the coffins across the whole crypt under it and
   the hoard in front. Neither strip comes or goes with a hunt, and the buttons keep their rows, so a tap never lands
   on a button that moved in under it. */
@container coffin-hunt (max-width:699px) {
  .hunt-crypt {grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"trail" "plot" "hoard";row-gap:16px;margin:10px 10px 12px;padding:18px 10px 16px}
  .hunt-crypt .coffin-grid {--coffin:min(82px,calc((100cqi - 88px) / 3));gap:0 14px}
  .hunt-hoard {grid-template-columns:auto minmax(0,190px);grid-template-rows:auto minmax(46px,auto);grid-template-areas:"chest pot" "chest leave";justify-content:center;align-items:center;column-gap:14px;row-gap:8px}
  .hunt-crypt[data-phase="waiting"] .hunt-hoard {grid-template-columns:auto;grid-template-areas:"chest" "chest"}
  .hunt-crypt[data-phase="waiting"] .hunt-pot-line {display:none}
  .hunt-chest {grid-area:chest;width:112px}
  .hunt-pot-line {grid-area:pot}
  .hunt-hoard .hunt-leave {grid-area:leave}
  .hunt-candles,.hunt-candles:has(>:nth-child(13)) {--candle:14px;width:calc(12 * var(--candle) + 11 * var(--candle) / 3 + 20px)}
  .hunt-trail {gap:12px}
  .hunt-torch::before,.hunt-torch::after {display:none}
}

@media(prefers-reduced-motion:no-preference) {
  .coffin-art>.coffin-lid {transition:transform .62s cubic-bezier(.3,1.45,.55,1)}
  .coffin-grid>.coffin[data-coffin]:is(:hover,:focus-visible) .coffin-lid {transition-duration:.28s}
  .coffin-art>.coffin-loot,.coffin-art>.coffin-maw,.coffin-art>.coffin-glow,.coffin-art::after {transition:opacity .45s ease}
  .coffin-grid>.coffin.fresh .coffin-glow {animation:coffin-burst 1.5s ease-out both}
  .coffin-grid>.coffin.fresh .coffin-loot {animation:coffin-rise .9s cubic-bezier(.2,1.3,.5,1) both}
  .coffin-grid>.coffin.fresh .coffin-gain {animation:coffin-gain 1.5s ease-out .12s both}
  .coffin-grid>.coffin.prying .coffin-lid {animation:coffin-pry .5s ease-in-out infinite}
  .coffin-grid>.coffin.mimic .coffin-lid {animation:coffin-bite 1.25s ease-in-out both}
  .coffin-grid>.coffin.mimic .coffin-maw {animation:coffin-maw 1.25s ease-out both}
  .coffin-grid>.coffin.mimic .coffin-art {animation:coffin-lunge .55s cubic-bezier(.2,1.5,.4,1) both,coffin-shake .5s linear .1s 2}
  .coffin-grid>.coffin.lurking .coffin-lid {animation:coffin-growl 1.7s ease-in-out infinite}
  .hunt-crypt[data-phase="mimic"]::before {animation:hunt-bite-flash 2.2s ease-out both}
  .hunt-crypt[data-phase="mimic"] .hunt-plot {animation:hunt-quake .45s linear .12s 2}
  .hunt-crypt:is([data-phase="mimic"],[data-phase="left"],[data-phase="cleared"]) .hunt-flash {animation:hunt-flash 1.4s ease-out both}
  .hunt-torch {animation:hunt-torch 3.4s ease-in-out infinite alternate}
  .hunt-torch+.hunt-torch {animation-duration:2.9s;animation-delay:-1.2s}
  .hunt-torch::after {animation:hunt-flicker 1.6s ease-in-out infinite}
  .hunt-torch+.hunt-torch::after {animation-duration:1.9s;animation-delay:-.7s}
  .hunt-candle::before {transition:opacity .4s ease,transform .4s ease}
  .hunt-candle.lit::before {animation:hunt-flicker var(--flick) ease-in-out var(--flick-at) infinite}
  .hunt-candle.lit::after {animation:hunt-glow var(--flick) ease-in-out var(--flick-at) infinite}
  .hunt-candle.kindled.lit::before {animation:hunt-kindle 1.3s ease-out both}
  .hunt-candle.snuffed {background-position:0 0}
  .hunt-candle.snuffed::before {animation:hunt-snuff .5s ease-in both}
  .hunt-candle.snuffed::after {left:0;top:-30%;width:100%;height:50%;background:radial-gradient(closest-side,rgb(var(--bone-69) / .6),rgb(var(--bone-69) / 0));animation:hunt-smoke 1.3s ease-out both}
  .hunt-chest>i,.hunt-chest-well {transition:opacity .4s ease,transform .5s ease}
  .hunt-chest-heap {transition:transform .7s cubic-bezier(.25,1.4,.5,1)}
  /* Grown by a coffin, the heap rises and splashes as the coffin's first mote lands (LAND_MS in coffin-hunt.js). */
  .hunt-chest.growing .hunt-chest-heap {transition-delay:.95s}
  .hunt-chest[data-state="mimic"] .hunt-chest-heap {transition:transform .35s ease-in}
  /* At a hunt's end the lid comes down by keyframes alone: a transition would outrank them. */
  .hunt-chest:is([data-state="mimic"],[data-state="left"],[data-state="cleared"])>:is(i,.hunt-chest-well) {transition:none}
  .hunt-chest[data-state="mimic"]>.hunt-chest-lid {animation:hunt-lid-slam .3s cubic-bezier(.55,0,.8,.2) .42s both}
  .hunt-chest[data-state="mimic"]>:is(.hunt-chest-back,.hunt-chest-well) {animation:hunt-fade-out .22s linear .42s both}
  .hunt-chest[data-state="mimic"] {animation:hunt-chest-shake .36s linear .74s 2}
  .hunt-chest:is([data-state="left"],[data-state="cleared"])>.hunt-chest-lid {animation:hunt-lid-slam .4s cubic-bezier(.55,0,.8,.2) .25s both}
  .hunt-chest:is([data-state="left"],[data-state="cleared"])>:is(.hunt-chest-back,.hunt-chest-well) {animation:hunt-fade-out .28s linear .25s both}
  .hunt-chest:is([data-state="left"],[data-state="cleared"]) .hunt-hoard-gain {animation:hunt-gain 1.6s ease-out .35s both}
  /* The eaten pot sinks away from the slammed chest. */
  .hunt-chest[data-state="mimic"] .hunt-hoard-gain {animation:hunt-loss 1.9s ease-in .5s both}
  /* Every safe coffin open: the lid waits for the last coffin's motes to land and the heap to crown. */
  .hunt-chest[data-state="cleared"]>.hunt-chest-lid,.hunt-chest[data-state="cleared"]>:is(.hunt-chest-back,.hunt-chest-well) {animation-delay:1.7s}
  .hunt-chest[data-state="cleared"] .hunt-hoard-gain {animation-delay:1.8s}
  .hunt-chest.growing .hunt-chest-coins i {animation:hunt-coin .9s cubic-bezier(.3,.7,.5,1) .95s both}
  .hunt-chest.growing .hunt-chest-coins i:nth-child(2) {animation-delay:1.01s}
  .hunt-chest.growing .hunt-chest-coins i:nth-child(3) {animation-delay:1.07s}
  .hunt-chest.growing .hunt-chest-coins i:nth-child(4) {animation-delay:.98s}
  .hunt-chest.growing .hunt-chest-coins i:nth-child(5) {animation-delay:1.13s}
  /* The first drawing shows things as they already are. */
  .hunt-still .coffin-art>i,.hunt-still .coffin-art::after,.hunt-still .hunt-chest>i,.hunt-still .hunt-chest-well,.hunt-still .hunt-chest-heap,.hunt-still .hunt-candle::before {transition:none}
  @keyframes coffin-burst {0% {opacity:0;transform:scale(.6)} 25% {opacity:1;transform:scale(1.15)} 100% {opacity:.55;transform:none}}
  @keyframes coffin-rise {0% {opacity:0;transform:translateY(9%) scale(.94)} 60% {opacity:1} 100% {opacity:1;transform:none}}
  @keyframes coffin-gain {0% {opacity:0;transform:translate(-50%,10px) scale(.6)} 16% {opacity:1;transform:translate(-50%,-6px) scale(1.18)} 55% {opacity:1;transform:translate(-50%,-26px) scale(1)} 100% {opacity:0;transform:translate(-50%,-58px)}}
  @keyframes coffin-pry {0%,100% {transform:rotateY(-2deg)} 50% {transform:rotateY(-12deg)}}
  @keyframes coffin-bite {0% {transform:rotateY(-6deg)} 14% {transform:rotateY(-84deg)} 30% {transform:rotateY(-16deg)} 46% {transform:rotateY(-76deg)} 62% {transform:rotateY(-22deg)} 80% {transform:rotateY(-68deg)} 100% {transform:rotateY(-62deg)}}
  @keyframes coffin-maw {0% {opacity:0} 12% {opacity:1} 100% {opacity:1}}
  @keyframes coffin-lunge {0% {scale:1} 30% {scale:1.17} 100% {scale:1.05}}
  @keyframes coffin-shake {0%,100% {translate:0 0} 20% {translate:-3px 1px} 40% {translate:3px -1px} 60% {translate:-2px 0} 80% {translate:2px 1px}}
  @keyframes coffin-growl {0%,100% {transform:rotateY(-30deg)} 50% {transform:rotateY(-40deg)}}
  @keyframes hunt-flash {0% {opacity:0} 12% {opacity:1} 100% {opacity:0}}
  @keyframes hunt-bite-flash {0% {opacity:0} 8% {opacity:1} 45% {opacity:.75} 100% {opacity:0}}
  @keyframes hunt-quake {0%,100% {translate:0 0} 25% {translate:-4px 2px} 50% {translate:4px -1px} 75% {translate:-3px -2px}}
  @keyframes hunt-torch {0% {opacity:.8} 35% {opacity:1} 60% {opacity:.86} 100% {opacity:.97}}
  @keyframes hunt-flicker {0%,100% {transform:scale(1) rotate(-1deg)} 25% {transform:scale(.92,1.08) rotate(2deg)} 50% {transform:scale(1.05,.94) rotate(-2deg)} 75% {transform:scale(.96,1.05) rotate(1deg)}}
  @keyframes hunt-glow {0%,100% {opacity:.8} 50% {opacity:1}}
  @keyframes hunt-kindle {0% {opacity:0;transform:scale(.1)} 45% {opacity:1;transform:scale(1.5,1.7)} 100% {opacity:1;transform:none}}
  @keyframes hunt-snuff {0% {opacity:1;transform:none} 100% {opacity:0;transform:scale(.2,.4)}}
  @keyframes hunt-smoke {0% {opacity:0;transform:translateY(20%) scale(.5)} 25% {opacity:.8} 100% {opacity:0;transform:translateY(-70%) scale(1.5)}}
  @keyframes hunt-lid-slam {0% {opacity:0;transform:translateY(-20%)} 30% {opacity:1} 100% {opacity:1;transform:none}}
  @keyframes hunt-fade-out {0% {opacity:1} 100% {opacity:0}}
  @keyframes hunt-chest-shake {0%,100% {translate:0 0} 25% {translate:-3px 0} 50% {translate:3px 0} 75% {translate:-2px 0}}
  @keyframes hunt-coin {0% {opacity:0;transform:translate(0,14px) scale(.6)} 18% {opacity:1} 55% {opacity:1;transform:translate(var(--dx),var(--dy)) rotate(200deg)} 100% {opacity:0;transform:translate(calc(var(--dx) * 1.25),10px) rotate(420deg)}}
  @keyframes hunt-loss {0% {opacity:0;transform:translate(-50%,-14px) scale(1.25)} 14% {opacity:1;transform:translate(-50%,0) scale(1)} 65% {opacity:1;transform:translate(-50%,14px)} 100% {opacity:0;transform:translate(-50%,34px)}}
  @keyframes hunt-gain {0% {opacity:0;transform:translate(-50%,12px) scale(.7)} 18% {opacity:1;transform:translate(-50%,-4px) scale(1.12)} 70% {opacity:1;transform:translate(-50%,-22px) scale(1)} 100% {opacity:0;transform:translate(-50%,-44px)}}
}
/* Grave Games tomb doors (the Grave Games panel): each door is layers of art from public/assets/games/ on
   one 200 x 240 grid, scaled by --h (the door's height): the game's scene behind the opening, two oak
   leaves hinged at the jambs, the stone arch with its iron tracery, and the chains or the wax seal on the
   leaves. Unsealing cracks the seal and swings the leaves in by transition, so only a real change of
   state moves them; the kept elements (see renderGames) never restart it. */
.game-card {--h:276px;--tomb-haze:rgb(var(--bone-83) / .22);--tomb-spill:rgb(var(--gold-87))}
.game-card[data-game="delve"] {--tomb-scene:url('/assets/games/delve.svg');--tomb-haze:rgb(var(--moss-84) / .29);--tomb-spill:rgb(var(--moss-90))}
.game-card[data-game="lottery"] {--tomb-scene:url('/assets/games/lottery.svg');--tomb-haze:rgb(var(--gold-82) / .27);--tomb-spill:rgb(var(--gold-83))}
.game-card[data-game="coffins"] {--tomb-scene:url('/assets/games/coffins.svg');--tomb-haze:rgb(var(--moss-80) / .25);--tomb-spill:rgb(var(--moss-86))}
.game-card[data-game="garden"] {--tomb-scene:url('/assets/games/garden.svg');--tomb-haze:rgb(var(--spirit-92) / .25);--tomb-spill:rgb(var(--bone-96))}
/* The light of an open door on the wall around it. */
.game-card::before {content:'';position:absolute;z-index:-1;left:50%;top:calc(var(--h)*-.05);width:calc(var(--h)*1.45);height:calc(var(--h)*1.5);translate:-50% 0;background:radial-gradient(closest-side,var(--tomb-haze),rgb(var(--stone-0) / 0));opacity:0;pointer-events:none}
.tomb-door {grid-row:2;position:relative;width:calc(var(--h)*200/240);height:var(--h);perspective:calc(var(--h)*1.7);perspective-origin:50% 68%;transform-origin:50% 100%}
.tomb-door>span {position:absolute;display:block;background-repeat:no-repeat;background-size:100% 100%}
.tomb-scene {left:calc(var(--h)/6);top:calc(var(--h)*27/240);width:calc(var(--h)/2);height:calc(var(--h)*197/240);background-image:var(--tomb-scene)}
.tomb-door>.tomb-leaf {left:calc(var(--h)/6);top:calc(var(--h)*104/240);width:calc(var(--h)/4);height:calc(var(--h)/2);background-image:url('/assets/games/door.svg');background-size:200% 100%;transform-origin:0 50%}
.tomb-door>.tomb-leaf+.tomb-leaf {left:calc(var(--h)*100/240);background-position:100% 0;transform-origin:100% 50%}
.tomb-leaf::after {content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgb(var(--stone-0) / 0),rgb(var(--stone-0) / .87));opacity:0}
.tomb-leaf+.tomb-leaf::after {background:linear-gradient(270deg,rgb(var(--stone-0) / 0),rgb(var(--stone-0) / .87))}
.tomb-arch {inset:0;background-image:url('/assets/games/arch.svg')}
/* Each scene's own light (in the scene's 120 x 197 opening): the Delve's far arch, the Gravekeeper's
   altar candles, the Mimic's eye in the gap of its lid, the pale bloom over the grave. */
.tomb-scene::after {content:'';position:absolute;opacity:0;mix-blend-mode:screen}
.game-card[data-game="delve"] .tomb-scene::after {left:22%;top:43%;width:56%;height:35%;background:radial-gradient(closest-side,rgb(var(--moss-97)),rgb(var(--moss-84) / .44) 45%,rgb(var(--stone-0) / 0))}
.game-card[data-game="lottery"] .tomb-scene::after {left:8%;top:55%;width:84%;height:30%;background:radial-gradient(closest-side,rgb(var(--gold-87)),rgb(var(--gold-76) / .33) 50%,rgb(var(--stone-0) / 0))}
.game-card[data-game="coffins"] .tomb-scene::after {left:32%;top:27%;width:22%;height:13.4%;background:radial-gradient(closest-side,rgb(var(--bone-96)),rgb(var(--gold-87) / .6) 22%,rgb(var(--stone-0) / 0) 60%),radial-gradient(50% 7% at 50% 50%,rgb(var(--bone-96)),rgb(var(--stone-0) / 0)),radial-gradient(7% 50% at 50% 50%,rgb(var(--bone-96)),rgb(var(--stone-0) / 0))}
.game-card[data-game="garden"] .tomb-scene::after {left:26%;top:52%;width:48%;height:28%;background:radial-gradient(closest-side,rgb(var(--stone-100)),rgb(var(--moss-87) / .4) 45%,rgb(var(--stone-0) / 0))}
/* The light an open door spills across its sill. */
.tomb-arch::after {content:'';position:absolute;left:0;right:0;top:calc(var(--h)*224/240);height:calc(var(--h)*16/240);clip-path:polygon(20% 0,80% 0,91% 100%,9% 100%);background:linear-gradient(var(--tomb-spill),rgb(var(--stone-0) / 0) 110%);opacity:0;mix-blend-mode:screen}
.tomb-chain {left:calc(var(--h)/6);top:calc(var(--h)*104/240);width:calc(var(--h)/2);height:calc(var(--h)/2);background-image:url('/assets/games/chain.svg');opacity:0}
.tomb-seal {left:calc(var(--h)/3);top:calc(var(--h)*122/240);width:calc(var(--h)/6);height:calc(var(--h)*52/240);opacity:0;transform-origin:50% 38.46%}
.tomb-seal>span {position:absolute;top:0;left:0;width:50%;height:100%;background:url('/assets/games/seal.svg') 0 0/200% 100% no-repeat}
.tomb-seal>span+span {left:50%;background-position:100% 0}
.tomb-seal>b {position:absolute;left:50%;top:38.46%;transform:translate(-50%,-50%);font:700 12px/1 Georgia,'Times New Roman',serif;letter-spacing:.2px;color:rgb(var(--gold-87));text-shadow:0 1px 1px rgb(var(--stone-20)),0 0 3px rgb(var(--blood-27));white-space:nowrap}
/* A glow held under the wax once its price is in hand. */
.tomb-seal::before {content:'';position:absolute;left:-40%;right:-40%;top:0;height:78%;border-radius:50%;background:radial-gradient(closest-side,rgb(var(--gold-83) / .4),rgb(var(--stone-0) / 0));opacity:0}
/* The shadow a far door stands back in: a veil cut to the door's own outline (the arch's and the opening's),
   so dimming it is only a change of opacity. */
.tomb-veil {inset:0;background:rgb(var(--stone-15));opacity:0;mask:url('/assets/games/arch.svg') 0 0/100% 100% no-repeat,var(--tomb-scene) calc(var(--h)/6) calc(var(--h)*27/240)/calc(var(--h)/2) calc(var(--h)*197/240) no-repeat}
.tomb-door::after {content:'';position:absolute;left:-8%;right:-8%;top:40%;bottom:-14%;pointer-events:none;background:radial-gradient(ellipse 62% 30% at 50% 84%,rgb(var(--spirit-76) / .32),rgb(var(--stone-0) / 0) 74%);opacity:0}
/* Sealed: the leaves shut under the wax. */
.game-card.sealed .tomb-seal,.game-card.ready .tomb-seal::before {opacity:1}
/* A hand on a door in reach, or on its step (or the step in focus): the leaves strain and the wax swells. */
.game-card.ready:is(:hover,:focus-within) .tomb-leaf {transform:rotateY(4deg)}
.game-card.ready:is(:hover,:focus-within) .tomb-leaf+.tomb-leaf {transform:rotateY(-4deg)}
.game-card.ready:is(:hover,:focus-within) .tomb-seal {transform:scale(1.1)}
/* Far: a door still out of reach stands back in the dark, chained and padlocked, mist at its sill. */
.game-card.far .tomb-door {transform:scale(.9)}
.game-card.far .tomb-chain,.game-card.far .tomb-door::after {opacity:1}
@supports (mask-image:none) {.game-card.far .tomb-veil {opacity:.42}}
@supports not (mask-image:none) {.game-card.far .tomb-door {filter:brightness(.62) saturate(.6)}}
.game-card.far .game-body .line {opacity:.72}
/* Unsealed: the leaves swung in and the game's own light spilled over the sill, the step and the wall. */
.game-card.unsealed::before {opacity:.7}
.game-card.unsealed .tomb-arch::after {opacity:.5}
.game-card.unsealed .tomb-scene::after {opacity:.6}
.game-card.unsealed[data-game="coffins"] .tomb-scene::after {opacity:0}
.game-card.unsealed .tomb-leaf {transform:rotateY(74deg)}
.game-card.unsealed .tomb-leaf+.tomb-leaf {transform:rotateY(-74deg)}
.game-card.unsealed .tomb-leaf::after {opacity:.55}
.game-card.unsealed .tomb-seal>span {transform:translate(-95%,40%) rotate(-32deg);opacity:0}
.game-card.unsealed .tomb-seal>span+span {transform:translate(95%,40%) rotate(32deg)}
.game-card.unsealed .tomb-seal>b {opacity:0}
.game-card.unsealed .tomb-door::after {background:radial-gradient(ellipse 50% 42% at 50% 64%,var(--tomb-haze),rgb(var(--stone-0) / 0) 76%);mix-blend-mode:screen;opacity:.85}
.game-card.unsealed:is(:hover,:focus-within) .tomb-door::after,.game-card.unsealed:is(:hover,:focus-within)::before {opacity:1}
@media(prefers-reduced-motion:no-preference) {
  .game-card::before {transition:opacity 1.4s .8s}
  .tomb-door {transition:transform .9s cubic-bezier(.3,.1,.2,1)}
  .tomb-leaf {transition:transform 1.5s cubic-bezier(.45,.05,.25,1) .4s}
  .tomb-leaf::after {transition:opacity 1.5s .4s}
  .tomb-seal {transition:opacity .3s .6s,transform .35s cubic-bezier(.3,1.5,.5,1)}
  .tomb-seal>span {transition:transform .6s cubic-bezier(.2,.7,.4,1),opacity .4s .3s}
  .tomb-seal>b {transition:opacity .15s}
  .tomb-chain {transition:opacity .7s}
  .tomb-veil {transition:opacity .9s cubic-bezier(.3,.1,.2,1)}
  .tomb-door::after {transition:opacity 1.2s .8s}
  .tomb-arch::after {transition:opacity 1.2s 1s}
  .game-card.ready .tomb-seal::before {animation:tomb-ready 2.8s ease-in-out infinite}
  @keyframes tomb-ready {0%,100% {opacity:.45}50% {opacity:1}}
  /* An open door's light lives: the Delve's breathes, the Gravekeeper's candles gutter, the bloom pulses
     slowly, and the Mimic's eye glints now and then, even through the tracery of a sealed door. */
  .game-card.unsealed .tomb-scene::after {animation:tomb-breathe 6s ease-in-out infinite}
  .game-card.unsealed[data-game="garden"] .tomb-scene::after {animation-duration:8s;animation-delay:-3s}
  .game-card.unsealed[data-game="lottery"] .tomb-scene::after {animation:tomb-gutter 3.4s linear infinite}
  .game-card:is(.sealed,.unsealed)[data-game="coffins"] .tomb-scene::after {animation:tomb-glint 7s ease-out infinite}
  @keyframes tomb-breathe {0%,100% {opacity:.35}50% {opacity:.85}}
  @keyframes tomb-gutter {0% {opacity:.6}14% {opacity:.72}23% {opacity:.55}37% {opacity:.7}51% {opacity:.62}64% {opacity:.78}78% {opacity:.58}89% {opacity:.68}}
  @keyframes tomb-glint {0%,84% {opacity:0;transform:scale(.5)}88% {opacity:1;transform:scale(1)}94% {opacity:.35;transform:scale(.8)}100% {opacity:0;transform:scale(.5)}}
}
@container (max-width:1000px) {.game-card {--h:244px}}
/* On a phone each door stands at the left of its row on its own step, and an open door's light pools on
   the step under it. */
@container (max-width:560px) {
  .game-card {--h:138px}
  .game-card::before {display:none}
  .tomb-door {grid-column:1;grid-row:1/3;align-self:end;margin-bottom:-12px}
  .tomb-seal>b {display:none}
  .game-card.unsealed .game-body .small-button {background:radial-gradient(calc(var(--h)*.5) 46px at calc(var(--h)*100/240) 0,var(--tomb-haze),rgb(var(--stone-0) / 0) 75%),linear-gradient(rgb(var(--gold-46)),rgb(var(--bone-36)) 40%,rgb(var(--stone-26)))}
}
/* The narrowest phones give the words the room: a smaller door and a tighter tablet. */
@container (max-width:320px) {
  .game-card {--h:112px;column-gap:12px}
  .game-body p {padding:9px 11px 10px}
}
/* The Games tab's jump bar wears each game's door in small (the tg- symbols in index.html): lit with the
   entry being read, shut under its seal while the game is sealed. */
.view-jumps.jump-bar a.active .tomb-glyph {filter:drop-shadow(0 0 4px rgb(var(--gold-87) / .44))}
.view-jumps.jump-bar a.locked .tomb-glyph {opacity:.8}
/* The Bone Garden refresh (September 2026): a burial plot beside the Old Mausoleum. A grave is a weathered
   headstone at the head of a stone kerb, its bed of earth a bare mound or a heap of turned earth; its plant
   is a strip of three frames (seedling, growing, ripe) stepped by data-stage, and every size inside a grave
   is in cqw of that grave. Art in public/assets/garden, provenance in docs/artwork.md. Seeds are packets
   in a pouch; the garden log is a herbarium of pressed specimens. */
.garden-panel [data-species="gravebloom"] {--garden-art:url('/assets/garden/gravebloom.svg')}
.garden-panel [data-species="marrowroot"] {--garden-art:url('/assets/garden/marrowroot.svg')}
.garden-panel [data-species="soulcap"] {--garden-art:url('/assets/garden/soulcap.svg')}
.garden-panel [data-species="widowlily"] {--garden-art:url('/assets/garden/widowlily.svg')}
.garden-panel [data-species="ossuaryvine"] {--garden-art:url('/assets/garden/ossuaryvine.svg')}
.garden-panel [data-species="wraithorchid"] {--garden-art:url('/assets/garden/wraithorchid.svg')}
.garden-panel [data-species="lichcrown"] {--garden-art:url('/assets/garden/lichcrown.svg')}
.garden-panel [data-species="deathlessrose"] {--garden-art:url('/assets/garden/deathlessrose.svg')}
.garden-panel [data-species="ghostmoss"] {--garden-art:url('/assets/garden/ghostmoss.svg')}
.garden-panel [data-species="cryptcreeper"] {--garden-art:url('/assets/garden/cryptcreeper.svg')}
.garden-panel [data-species="corpsecandle"] {--garden-art:url('/assets/garden/corpsecandle.svg')}
.garden-panel [data-species="palehemlock"] {--garden-art:url('/assets/garden/palehemlock.svg')}
.garden-panel [data-species="bloodthorn"] {--garden-art:url('/assets/garden/bloodthorn.svg')}
.garden-panel [data-species="hangmansivy"] {--garden-art:url('/assets/garden/hangmansivy.svg')}
.garden-panel [data-species="mourningveil"] {--garden-art:url('/assets/garden/mourningveil.svg')}
.garden-panel [data-species="bansheebell"] {--garden-art:url('/assets/garden/bansheebell.svg')}
.garden-panel [data-species="wyrmroot"] {--garden-art:url('/assets/garden/wyrmroot.svg')}
.garden-panel [data-species="midnightshade"] {--garden-art:url('/assets/garden/midnightshade.svg')}
.garden-panel [data-species="carrionlotus"] {--garden-art:url('/assets/garden/carrionlotus.svg')}
.garden-panel [data-species="phantomfern"] {--garden-art:url('/assets/garden/phantomfern.svg')}
.garden-panel [data-species="soulwillow"] {--garden-art:url('/assets/garden/soulwillow.svg')}
.garden-panel [data-species="bonetree"] {--garden-art:url('/assets/garden/bonetree.svg')}
.garden-panel [data-species="nightmarebloom"] {--garden-art:url('/assets/garden/nightmarebloom.svg')}
.garden-panel [data-species="everbloom"] {--garden-art:url('/assets/garden/everbloom.svg')}
/* The plot: the graveyard painting on the horizon, the Old Mausoleum and the moon above a wrought iron
   railing (a lower strip of it on a phone), then dark crypt earth under a little moonlight. */
.garden-scene {--garden-horizon:168px;position:relative;isolation:isolate;margin:12px 16px 0;padding:calc(var(--garden-horizon) - 14px) 12px 14px;border:1px solid rgb(var(--bone-36));border-radius:4px;overflow:hidden;
  background:radial-gradient(ellipse 95% 50% at 50% 106%,rgb(var(--stone-15)) 0,transparent 72%),radial-gradient(ellipse 80% 30% at 50% var(--garden-horizon),rgb(var(--bone-36) / .36) 0,transparent 74%),radial-gradient(ellipse 70% 40% at 46% 52%,rgb(var(--stone-88) / .05) 0,transparent 78%),url('/assets/garden/grain.svg') 0 0/180px 180px,linear-gradient(rgb(var(--stone-26)),rgb(var(--stone-20)) 50%,rgb(var(--stone-17)));
  background-blend-mode:normal,normal,normal,soft-light,normal;box-shadow:inset 0 0 40px rgb(var(--stone-0) / .67)}
.garden-scene::before {content:'';position:absolute;z-index:-1;inset:0 0 auto;height:calc(var(--garden-horizon) + 30px);background:url('/assets/reference/graveyard.jpg') 50% 30%/cover no-repeat;filter:sepia(.42) saturate(.78) brightness(.72) contrast(1.08);-webkit-mask-image:linear-gradient(rgb(var(--stone-0)) 40%,transparent);mask-image:linear-gradient(rgb(var(--stone-0)) 40%,transparent)}
.garden-scene::after {content:'';position:absolute;z-index:-1;left:0;right:0;top:calc(var(--garden-horizon) - 40px);height:40px;background:url('/assets/garden/railing.svg') 0 100%/auto 100% repeat-x}
/* Ground mist drifting over the plot, and a low bank of it along the railing behind the first graves. */
.garden-plot::before {content:'';position:absolute;z-index:-1;left:-12%;right:-12%;top:14%;height:70%;pointer-events:none;background:radial-gradient(ellipse 42% 24% at 28% 34%,rgb(var(--stone-88) / .07),transparent),radial-gradient(ellipse 36% 20% at 74% 70%,rgb(var(--stone-88) / .06),transparent)}
.garden-plot::after {content:'';position:absolute;z-index:-1;left:-8%;right:-8%;top:-34px;height:62px;pointer-events:none;background:radial-gradient(ellipse 50% 50% at 30% 50%,rgb(var(--stone-88) / .1),transparent 72%),radial-gradient(ellipse 45% 46% at 76% 56%,rgb(var(--stone-88) / .08),transparent 72%)}
/* One grave: headstone, kerbed bed of earth, and whatever grows or waits in it. */
.garden-ground {position:relative;display:block;width:100%;height:84cqw;flex-shrink:0;pointer-events:none}
.garden-stone {position:absolute;left:32cqw;top:3cqw;width:36cqw;height:45cqw;transform-origin:50% 100%;background:url('/assets/garden/headstones.svg') 0 0/300% 100% no-repeat}
.grave:nth-child(2) .garden-stone,.grave:nth-child(6) .garden-stone,.grave:nth-child(7) .garden-stone {background-position:100% 0}
.grave:nth-child(3) .garden-stone,.grave:nth-child(4) .garden-stone,.grave:nth-child(8) .garden-stone {background-position:50% 0}
.grave:nth-child(2) .garden-stone {rotate:-2.5deg}
.grave:nth-child(4) .garden-stone {rotate:1.5deg;translate:-1.5cqw 0}
.grave:nth-child(6) .garden-stone {rotate:2deg}
.grave:nth-child(7) .garden-stone {rotate:-1.5deg;translate:1.5cqw 0}
.grave:nth-child(9) .garden-stone {rotate:1deg}
.garden-mound {position:absolute;left:5cqw;bottom:0;width:90cqw;height:48cqw;background:url('/assets/garden/mound.svg') 0 0/200% 100% no-repeat}
.grave:not(.empty) .garden-mound {background-position:100% 0}
/* The plant stands on the crest of its heap. A seedling and a growing plant are drawn small in their
   frames, so each stage is shown a little larger, and within a stage the plant grows by --garden-grow. */
.garden-plant {--garden-stage:1;position:absolute;left:20cqw;top:-8cqw;width:60cqw;height:72cqw;transform-origin:50% 93.33%;scale:calc(var(--garden-stage) * (.86 + .14 * var(--garden-grow, 1)))}
.grave[data-stage="0"] .garden-plant {--garden-stage:1.42}
.grave[data-stage="1"] .garden-plant {--garden-stage:1.1}
.garden-plant::after {content:'';position:absolute;inset:0;background:var(--garden-art) 0 0/300% 100% no-repeat}
.grave.empty .garden-plant {display:none}
.grave[data-stage="1"] .garden-plant::after {background-position:50% 0}
.grave.ripe .garden-plant::after {background-position:100% 0}
.garden-caption {display:flex;flex-direction:column;align-items:center;margin-top:3px;font:15px/1.25 Georgia,serif;color:rgb(var(--bone-83))}
.garden-caption small {font:14px/1.3 'Segoe UI',Arial,sans-serif;color:rgb(var(--bone-62))}
.grave-pick:hover .garden-mound,.grave-pick:focus-visible .garden-mound {filter:brightness(1.18)}
.grave-pick:hover .garden-caption {color:var(--gold-bright)}
/* A grave picked by hand is marked out in gold round its kerb, as if pegged for digging. */
.grave.chosen .garden-mound {filter:drop-shadow(0 0 1px rgb(var(--gold-87))) drop-shadow(0 0 6px rgb(var(--gold-78) / .66))}
.grave.chosen .garden-caption {color:var(--gold-bright)}
/* The spade stands in the grave the next seed goes into. */
.grave.garden-target .garden-mound::before {content:'';position:absolute;left:57%;top:-22%;width:13.2cqw;height:31.7cqw;rotate:11deg;transform-origin:50% 100%;background:url('/assets/garden/spade.svg') 50% 100%/contain no-repeat;filter:drop-shadow(-2px 2px 2px rgb(var(--stone-0) / .67))}
/* A ripe plant glows ghost-green and lights the earth round it; a sprouted one is a wonder: a gilded
   stone with a glint, and a golden air about the grave. */
.grave.ripe .garden-plant::before {content:'';position:absolute;left:-16%;right:-16%;top:2%;bottom:2%;border-radius:50%;background:radial-gradient(closest-side,rgb(var(--moss-90) / .32),rgb(var(--moss-84) / .12) 55%,transparent)}
.grave.ripe .garden-ground::before {content:'';position:absolute;left:-4cqw;right:-4cqw;bottom:-6cqw;height:46cqw;border-radius:50%;background:radial-gradient(closest-side,rgb(var(--moss-84) / .15),rgb(var(--moss-84) / .04) 60%,transparent)}
.grave.ripe .garden-when {color:rgb(var(--moss-86))}
.grave.sprouted .garden-ground::before {content:'';position:absolute;left:0;right:0;top:-12cqw;bottom:-4cqw;height:auto;border-radius:50%;background:radial-gradient(closest-side,rgb(var(--gold-83) / .19),rgb(var(--gold-76) / .07) 58%,transparent)}
.grave.sprouted.ripe .garden-ground::before {background:radial-gradient(closest-side,rgb(var(--gold-83) / .19),rgb(var(--moss-86) / .13) 50%,transparent)}
.grave.sprouted .garden-stone {filter:sepia(.62) saturate(1.5) brightness(1.08)}
.grave.sprouted .garden-stone::after {content:'';position:absolute;right:2%;top:6%;width:26%;aspect-ratio:1;background:radial-gradient(circle,rgb(var(--stone-100)) 0 10%,rgb(var(--gold-87)) 20%,rgb(var(--gold-78) / 0) 64%);clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%)}
/* The seed pouch: a stitched leather satchel of paper packets, each with its plant drawn on the front. */
.garden-pouch {container:garden-pouch/inline-size;position:relative;margin:12px 16px 0;padding:14px;border:1px solid rgb(var(--bone-40));border-radius:4px;
  background:radial-gradient(ellipse 90% 50% at 50% 0,rgb(var(--bone-36) / .17),transparent 70%),url('/assets/garden/grain.svg') 0 0/180px 180px,linear-gradient(rgb(var(--stone-26)),rgb(var(--stone-20)));background-blend-mode:normal,soft-light,normal;box-shadow:inset 0 1px rgb(var(--gold-78) / .08),0 3px 10px rgb(var(--stone-0) / .33)}
.garden-pouch::before {content:'';position:absolute;inset:5px;border:1px dashed rgb(var(--gold-46) / .48);border-radius:3px;pointer-events:none}
.garden-pouch .relic-note {font-size:14px;color:rgb(var(--bone-69));margin:0 2px}
.garden-packets {display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:12px 10px}
.garden-packet {position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;padding:22px 10px 10px;border:1px solid rgb(var(--bone-40));border-radius:2px 2px 5px 5px;background:linear-gradient(rgb(var(--stone-26)),rgb(var(--stone-20)) 70%);box-shadow:0 4px 10px rgb(var(--stone-0) / .47),inset 0 1px rgb(var(--gold-87) / .08);text-align:center}
.garden-packet::before {content:'';position:absolute;left:0;right:0;top:0;height:18px;background:linear-gradient(rgb(var(--bone-40)),rgb(var(--bone-32)));clip-path:polygon(0 0,100% 0,50% 100%)}
.garden-portrait {display:block;width:92px;height:110px;flex-shrink:0;border:1px solid rgb(var(--gold-46));border-radius:46px 46px 3px 3px;background:var(--garden-art) 100% 100%/300% auto no-repeat,radial-gradient(ellipse at 50% 70%,rgb(var(--bone-40)),rgb(var(--stone-20)) 76%)}
.garden-packet>div {display:flex;flex-direction:column;gap:3px;min-width:0}
.garden-packet strong {font:15px/1.25 Georgia,serif;color:rgb(var(--stone-88));overflow-wrap:anywhere}
.garden-packet small {font-size:14px;line-height:1.35;color:rgb(var(--bone-69))}
.garden-packet .secondary {margin-top:auto;width:100%;gap:6px}
.garden-packet .secondary .icon {width:15px;height:15px;flex-shrink:0;color:rgb(var(--gold-78))}
/* A wide pouch (a large screen) holds its packets four to a row, or three to a row when four would leave
   one packet alone (five or six of them) or a gap (three), and draws each plant a little larger. */
@container garden-pouch (min-width:780px) {
  .garden-packets {grid-template-columns:repeat(4,minmax(0,1fr))}
  .garden-packets:not(:has(>:nth-child(4))),.garden-packets:has(>:nth-child(5)):not(:has(>:nth-child(7))) {grid-template-columns:repeat(3,minmax(0,1fr))}
  .garden-portrait {width:110px;height:132px;border-radius:55px 55px 3px 3px}
}
@container garden-pouch (max-width:460px) {
  .garden-packets {grid-template-columns:minmax(0,1fr);gap:10px}
  .garden-packet {display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:4px 12px;padding:10px 10px 10px 16px;text-align:left}
  .garden-packet::before {inset:0 auto 0 0;width:7px;height:auto;clip-path:none;background:linear-gradient(90deg,rgb(var(--bone-36)),rgb(var(--stone-26)))}
  .garden-portrait {grid-row:1/span 2;width:58px;height:70px;border-radius:29px 29px 2px 2px}
  .garden-packet .secondary {grid-column:2;justify-self:start;margin-top:4px;width:auto}
}
/* The herbarium: each species pressed on a slip of old paper; unknown ones are only a dark shape. */
.garden-herbarium {container:garden-herbarium/inline-size;position:relative;margin:12px 16px 16px;padding:14px;border:1px solid rgb(var(--bone-36));border-radius:4px;
  background:radial-gradient(ellipse 80% 40% at 50% 0,rgb(var(--bone-32) / .2),transparent 70%),url('/assets/garden/grain.svg') 0 0/180px 180px,linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-20)));background-blend-mode:normal,soft-light,normal;box-shadow:inset 0 0 0 4px rgb(var(--stone-17)),inset 0 0 0 5px rgb(var(--bone-32))}
.garden-herbarium .garden-title {margin-left:4px}
.garden-specimen {position:relative;display:block;height:142px;flex-shrink:0}
.garden-specimen::before {content:'';position:absolute;left:50%;top:10px;width:108px;height:124px;translate:-50% 0;rotate:-1.5deg;border-radius:1px;box-shadow:0 3px 8px rgb(var(--stone-0) / .67);
  background:linear-gradient(rgb(var(--bone-96) / .69),rgb(var(--bone-96) / .69)) 5px 3px/22px 8px no-repeat,linear-gradient(rgb(var(--bone-96) / .69),rgb(var(--bone-96) / .69)) calc(100% - 5px) 3px/22px 8px no-repeat,radial-gradient(ellipse at 45% 35%,rgb(var(--bone-83)),rgb(var(--bone-73)) 60%,rgb(var(--bone-62)))}
.garden-specimen::after {content:'';position:absolute;left:50%;top:12px;width:100px;height:120px;translate:-50% 0;rotate:-1.5deg;background:var(--garden-art) 100% 0/300% 100% no-repeat}
.garden-log li:nth-child(2n) .garden-specimen::before,.garden-log li:nth-child(2n) .garden-specimen::after {rotate:1.2deg}
.garden-log li:nth-child(3n) .garden-specimen::before,.garden-log li:nth-child(3n) .garden-specimen::after {rotate:-.5deg}
.garden-log li:not(.found) .garden-specimen::after {filter:brightness(0);opacity:.62}
.garden-label {display:flex;flex-direction:column;gap:3px;padding:6px 10px 0;min-width:0}
.garden-log b {font:15px/1.25 Georgia,serif;color:var(--ink)}
.garden-log li:not(.found) b {color:rgb(var(--bone-62))}
/* Across a whole large-screen panel the eight specimens hang in one row, each name above its count. */
@container garden-herbarium (min-width:1400px) {
  .garden-log {grid-template-columns:repeat(8,minmax(0,1fr))}
  .garden-log .line {flex-direction:column;align-items:flex-start;gap:0}
}
@container garden-herbarium (max-width:900px) {.garden-log {grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Narrower, each specimen sits beside its label: two to a row on a small tablet, one to a row on a phone. */
@container garden-herbarium (max-width:640px) {
  .garden-log {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .garden-log li {flex-direction:row;align-items:flex-start;padding:8px 10px 10px 4px}
  .garden-specimen {width:72px;height:88px}
  .garden-specimen::before {top:2px;width:64px;height:78px}
  .garden-specimen::after {top:4px;width:60px;height:72px}
  .garden-label {flex:1;padding:2px 0 0 4px}
  .garden-log .line {flex-direction:column;align-items:flex-start;gap:0}
}
@container garden-herbarium (max-width:460px) {
  .garden-log {grid-template-columns:minmax(0,1fr)}
  .garden-specimen {width:84px;height:100px}
  .garden-specimen::before {width:76px;height:92px}
  .garden-specimen::after {width:72px;height:86px}
  .garden-log .line {flex-direction:row;align-items:baseline;gap:2px 8px}
}
/* A narrow grave (a phone) puts Harvest under its caption, so the button hides none of the plant. */
@container garden-grave (max-width:150px) {.grave .primary {position:static;translate:none;margin-top:5px}}
/* Sprawling Graves (the Grimoire's Grave Games) widen the garden to 4×4, 5×5 and 6×6: narrower graves,
   smaller words, and the harvest button under the plant. */
.garden-plot.garden-plot-4 {grid-template-columns:repeat(4,minmax(0,1fr));max-width:720px}
.garden-plot.garden-plot-5 {grid-template-columns:repeat(5,minmax(0,1fr));max-width:820px;gap:8px 8px}
.garden-plot.garden-plot-6 {grid-template-columns:repeat(6,minmax(0,1fr));max-width:900px;gap:6px 6px}
.garden-plot-5 .grave:nth-child(n+10) .garden-stone,.garden-plot-6 .grave:nth-child(n+10) .garden-stone {rotate:0deg;translate:none}
@container garden-grave (max-width:110px) {.grave b,.garden-caption {font-size:12.5px;line-height:1.2}.grave small,.grave .text-button {font-size:12px}.grave .primary {padding:3px 7px;font-size:12.5px}.garden-caption small {display:none}}
@container garden-grave (max-width:72px) {.grave b,.garden-caption {display:none}.grave .garden-when {font-size:10.5px;line-height:1.15}.grave .text-button {font-size:10.5px}.grave .primary {padding:2px 5px;font-size:11px}}
.garden-hint {font-style:italic;color:rgb(var(--bone-73))}
.garden-log .garden-boon {color:rgb(var(--moss-87))}
@media(max-width:720px) {
  .garden-scene {--garden-horizon:74px;margin:10px 10px 0;padding-left:6px;padding-right:6px}
  .garden-plot {gap:8px 6px}
  .grave b,.garden-caption {font-size:14px}
  .grave .primary {padding:5px 10px;font-size:14px}
  .garden-pouch,.garden-herbarium {margin-left:10px;margin-right:10px}
}
/* Motion only for those who have not asked for less: the mist drifts, ripe plants breathe and shed
   wisps, a wonder glints, and a grave that changes plays a short effect. Transform and opacity only. */
@media(prefers-reduced-motion:no-preference) {
  .garden-plot::before {animation:garden-mist 28s ease-in-out infinite alternate}
  .garden-plot::after {animation:garden-bank 40s ease-in-out infinite alternate}
  .grave.ripe .garden-plant::before {animation:garden-breathe 3.8s ease-in-out infinite}
  .grave.ripe .garden-mound::after {content:'';position:absolute;left:28%;right:28%;bottom:40%;height:42cqw;pointer-events:none;animation:garden-wisp 4.2s ease-out infinite;
    background:radial-gradient(circle at 18% 88%,rgb(var(--moss-97)) 0,rgb(var(--moss-90) / .3) 1cqw,transparent 1.9cqw),radial-gradient(circle at 70% 70%,rgb(var(--moss-97)) 0,rgb(var(--moss-90) / .25) .8cqw,transparent 1.6cqw),radial-gradient(circle at 46% 96%,rgb(var(--moss-97)) 0,rgb(var(--moss-90) / .23) .9cqw,transparent 1.7cqw)}
  .grave.sprouted .garden-stone::after {animation:garden-twinkle 3.2s ease-in-out infinite}
  .garden-sown .garden-plant {animation:garden-sprout .9s cubic-bezier(.2,.9,.3,1.25) both}
  .garden-grew .garden-plant {animation:garden-pop .7s ease-out}
  .garden-ripened .garden-plant {animation:garden-pop .9s ease-out}
  .garden-sown .garden-ground::after,.garden-ripened .garden-ground::after,.garden-reaped .garden-ground::after {content:'';position:absolute;left:14cqw;right:14cqw;top:22cqw;height:56cqw;border-radius:50%;pointer-events:none}
  .garden-sown .garden-ground::after {animation:garden-dirt .7s ease-out both;background:radial-gradient(circle at 30% 80%,rgb(var(--gold-46)) 0 1.4cqw,transparent 1.6cqw),radial-gradient(circle at 68% 76%,rgb(var(--bone-40)) 0 1.2cqw,transparent 1.4cqw),radial-gradient(circle at 50% 70%,rgb(var(--bone-55) / .6) 0 1cqw,transparent 1.2cqw)}
  .garden-ripened .garden-ground::after {animation:garden-flash 1.1s ease-out both;background:radial-gradient(closest-side,rgb(var(--moss-97) / .4),rgb(var(--moss-84) / .13) 50%,transparent)}
  .garden-reaped .garden-ground::after {animation:garden-reap 1.4s ease-out both;
    background:radial-gradient(circle at 30% 80%,rgb(var(--moss-97)) 0,rgb(var(--moss-90) / .4) 1.4cqw,transparent 2.4cqw),radial-gradient(circle at 62% 70%,rgb(var(--moss-97)) 0,rgb(var(--moss-90) / .33) 1.2cqw,transparent 2.2cqw),radial-gradient(circle at 48% 90%,rgb(var(--moss-97)) 0,rgb(var(--moss-90) / .33) 1.6cqw,transparent 2.6cqw),radial-gradient(closest-side,rgb(var(--moss-90) / .2),transparent)}
  @keyframes garden-mist {to {translate:5% 2%;opacity:.55}}
  @keyframes garden-bank {to {translate:-6% 0;opacity:.6}}
  @keyframes garden-breathe {50% {opacity:.6;scale:1.07}}
  @keyframes garden-wisp {0% {opacity:0;translate:0 0}30% {opacity:1}100% {opacity:0;translate:0 -14cqw}}
  @keyframes garden-twinkle {0%,100% {opacity:.55;scale:.8}50% {opacity:1;scale:1.1}}
  @keyframes garden-sprout {from {opacity:0;transform:scale(.25)}}
  @keyframes garden-pop {35% {transform:scale(1.08)}}
  @keyframes garden-dirt {from {opacity:1;scale:.6}to {opacity:0;scale:1.25;translate:0 -3cqw}}
  @keyframes garden-flash {from {opacity:0;scale:.6}35% {opacity:1}to {opacity:0;scale:1.3}}
  @keyframes garden-reap {from {opacity:1;translate:0 4cqw}to {opacity:0;translate:0 -26cqw}}
}
/* The Deeds tab (art refresh, 2026-09-29): a crypt's hall of record. The Path of the Deathlord is a gilt-ruled
   ledger, Dark Achievements a wall of struck medallions and the Hall of the Damned a stepped podium before the
   crypt stair; every tab row is a notched stone slab, the chosen tab set with a gold point. */
/* The Path: a seal on every line, a groove of bones that fills as the deed is done, and a claim plate that
   lights once it is ready. A claim rises out of its line as the reward it paid (#objectives holds it). */
#objectives {position:relative}
#goals>.panel-description {padding:20px 16px 20px 76px;font:italic 14.5px/1.5 Georgia,serif;color:rgb(var(--bone-69))}
.goal h3::first-letter {color:var(--gold-bright);font-size:1.3em;line-height:1;text-shadow:0 0 10px rgb(var(--gold-78) / .4),0 1px 0 rgb(var(--stone-0))}
.goal.claimed h3::first-letter {color:rgb(var(--gold-78));text-shadow:0 1px 0 rgb(var(--stone-0))}
/* Chinese keeps its first character gilded but at the title's own size, since every character is the same square. */
.goal h3:lang(zh)::first-letter {font-size:1em}
.goal.ready::before {content:'';position:absolute;inset:5px -16px 5px 61px;z-index:-1;background:linear-gradient(90deg,rgb(var(--moss-74) / .15),rgb(var(--moss-74) / .05) 50%,transparent 92%);transform-origin:left;pointer-events:none}
.goal.ready .goal-symbol {box-shadow:0 0 0 1px rgb(var(--moss-74) / .6),0 0 10px rgb(var(--moss-74) / .35)}
.goal.ready .goal-symbol::after {content:'';position:absolute;inset:-11px;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgb(var(--moss-74) / .55) 60%,rgb(var(--moss-74) / 0));pointer-events:none}
.goal button:hover:not(:disabled) {border-color:rgb(var(--gold-83));color:rgb(var(--bone-96));box-shadow:inset 0 0 0 1px rgb(var(--stone-15)),inset 0 0 0 2px rgb(var(--gold-87) / .32),0 0 24px rgb(var(--gold-78) / .4)}
.goal button::after {content:'';position:absolute;top:0;bottom:0;left:-45%;width:36%;background:linear-gradient(100deg,transparent,rgb(var(--bone-96) / .28),transparent);opacity:0;pointer-events:none}
.deed-bones {display:flex;gap:3px;width:min(100%,236px);margin-top:9px;padding:3px 5px;border-radius:2px;background:rgb(var(--stone-15));box-shadow:inset 0 1px 2px rgb(var(--stone-0)),inset 0 0 0 1px rgb(var(--stone-0) / .6),0 1px 0 rgb(var(--stone-100) / .05)}
.deed-bones i {--hi:rgb(var(--bone-32));--lo:rgb(var(--stone-20));display:block;flex:1 1 0;min-width:0;height:10px;border-radius:0;box-shadow:none;background:radial-gradient(circle at 3.4px 3px,var(--hi) .8px,var(--lo) 2.8px,rgb(var(--stone-0) / 0) 3.2px),radial-gradient(circle at 3.4px 7px,var(--hi) .8px,var(--lo) 2.8px,rgb(var(--stone-0) / 0) 3.2px),radial-gradient(circle at calc(100% - 3.4px) 3px,var(--hi) .8px,var(--lo) 2.8px,rgb(var(--stone-0) / 0) 3.2px),radial-gradient(circle at calc(100% - 3.4px) 7px,var(--hi) .8px,var(--lo) 2.8px,rgb(var(--stone-0) / 0) 3.2px),linear-gradient(var(--hi),var(--lo)) 50% 50%/calc(100% - 8px) 4px no-repeat}
.deed-bones i.full {--hi:rgb(var(--bone-96));--lo:rgb(var(--bone-73))}
.goal.ready .deed-bones {box-shadow:inset 0 1px 2px rgb(var(--stone-0)),inset 0 0 0 1px rgb(var(--stone-0) / .6),0 0 12px rgb(var(--moss-74) / .28)}
.goal.ready .deed-bones i.full {--hi:rgb(var(--stone-100));--lo:rgb(var(--moss-76))}
.goal.claimed .deed-bones i.full {--hi:rgb(var(--gold-87));--lo:rgb(var(--gold-55))}
.goal-tabs span {display:inline-block}
.goal-tabs button:hover:not([aria-pressed="true"]) {color:rgb(var(--bone-83));background:linear-gradient(rgb(var(--bone-32)),rgb(var(--stone-20)))}
.goal-tabs button[aria-pressed="true"]::after {content:'';position:absolute;left:50%;bottom:-3px;width:7px;height:7px;margin-left:-3.5px;background:linear-gradient(135deg,rgb(var(--gold-87)),rgb(var(--gold-66)));transform:rotate(45deg);box-shadow:0 0 6px rgb(var(--gold-78) / .6);pointer-events:none}
@media(max-width:720px) {
  #goals {margin:10px 10px 12px;padding-right:12px;background:linear-gradient(90deg,transparent 45px,rgb(var(--gold-55) / .4) 45px 46px,transparent 46px 49px,rgb(var(--gold-55) / .23) 49px 50px,transparent 50px),radial-gradient(ellipse at 28% 0,rgb(var(--bone-32) / .28),transparent 62%),linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-17)))}
  .goal {grid-template-columns:46px minmax(0,1fr) auto;gap:0 12px;padding:14px 0;background-image:linear-gradient(90deg,transparent 50px,rgb(var(--bone-36) / .44) 50px)}
  .goal:last-child {background-image:none}
  .goal.ready::before {inset:5px -12px 5px 51px}
  .goal-symbol {width:34px;height:34px;font-size:14px}
  .goal h3 {font-size:16px}
  .goal button {min-width:74px;padding:8px 12px}
  #goals>.panel-description {padding:18px 12px 18px 62px}
  .goal-tabs {margin:10px 10px 2px}
}
/* A ready seal breathes and its claim catches the light; a line that comes ready while the player watches
   pops the first time it is seen, a claimed seal is stamped gold, and the Finished count bumps (deed-fade and
   deed-ring-out are the medallions' own, below). */
@media(prefers-reduced-motion:no-preference) {
  .goal.ready .goal-symbol::after {animation:deed-breathe 2.8s ease-in-out infinite}
  .goal.ready button::after {animation:deed-sheen 4.2s ease-in-out infinite}
  .goal button:active:not(:disabled),.goal-tabs button:active {filter:brightness(.85)}
  .goal.deed-fresh::before {animation:deed-sweep .9s ease-out}
  .goal.deed-fresh .goal-symbol {animation:deed-pop .7s cubic-bezier(.3,1.6,.5,1)}
  .goal.deed-fresh button {animation:deed-pop .8s cubic-bezier(.3,1.6,.5,1) .15s both}
  .goal.deed-fresh .deed-bones i.full {animation:deed-fade .6s ease-out .1s both}
  .goal.deed-stamped .goal-symbol {animation:deed-stamp .6s cubic-bezier(.2,.9,.3,1.3)}
  .goal.deed-stamped .goal-symbol::before {content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid rgb(var(--gold-87));box-shadow:0 0 14px rgb(var(--gold-87));opacity:0;animation:deed-ring-out .9s ease-out .3s;pointer-events:none}
  .goal-tabs button.deed-bump span {animation:deed-bump .9s cubic-bezier(.3,1.6,.5,1)}
  @keyframes deed-breathe {0%,100% {opacity:.5;transform:scale(.9)}50% {opacity:1;transform:scale(1.08)}}
  @keyframes deed-sheen {0%,58% {opacity:0;transform:translateX(0) skewX(-18deg)}64% {opacity:1}100% {opacity:0;transform:translateX(460%) skewX(-18deg)}}
  @keyframes deed-sweep {from {opacity:0;transform:scaleX(.1)}to {opacity:1;transform:scaleX(1)}}
  @keyframes deed-pop {from {opacity:0;transform:scale(.4)}to {opacity:1;transform:scale(1)}}
  @keyframes deed-stamp {0% {opacity:0;transform:scale(1.9) rotate(-14deg)}60% {opacity:1;transform:scale(.92) rotate(2deg)}100% {transform:none}}
  @keyframes deed-bump {35% {transform:scale(1.5)}}
}
/* Dark Achievements: a medallion per deed, its group's sigil struck into a stone seal and ringed by a thin
   line of ghostlight as it nears; seal and sigil tarnish to gold once earned. */
.deed-seal {position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:start;padding:15px 15px 16px 13px;background:radial-gradient(ellipse at 18% 0,rgb(var(--stone-26) / .35),transparent 70%),linear-gradient(165deg,rgb(var(--stone-20)),rgb(var(--stone-17)));box-shadow:inset 0 1px 0 rgb(var(--stone-100) / .04),inset 0 -1px 0 rgb(var(--stone-0) / .62)}
.deed-seal.earned {background:radial-gradient(ellipse at 14% 34%,rgb(var(--gold-78) / .16),transparent 58%),linear-gradient(165deg,rgb(var(--stone-26)),rgb(var(--stone-17)));box-shadow:inset 0 1px 0 rgb(var(--gold-87) / .2),inset 0 -1px 0 rgb(var(--stone-0))}
.deed-medal {position:relative;width:64px;height:64px}
.deed-medal::before {content:'';position:absolute;inset:4px;background:url('/assets/deeds/seal-stone.svg') center/contain no-repeat}
.deed-seal.earned .deed-medal::before {background-image:url('/assets/deeds/seal-gold.svg');filter:drop-shadow(0 0 7px rgb(var(--gold-78) / .3))}
.deed-sigil {position:absolute;inset:14px;display:block;width:auto;height:auto;border-radius:0;box-shadow:none;background:center/contain no-repeat;filter:grayscale(1) brightness(.62) contrast(1.2) drop-shadow(0 1px 0 rgb(var(--stone-100) / .12)) drop-shadow(0 -1px 0 rgb(var(--stone-0) / .87))}
.deed-seal.earned .deed-sigil {filter:drop-shadow(0 1px 1px rgb(var(--stone-0))) drop-shadow(0 0 6px rgb(var(--gold-87) / .22))}
.deed-medal[data-group="ritual"] .deed-sigil {background-image:url('/assets/deeds/ritual.svg')}
.deed-medal[data-group="dominion"] .deed-sigil {background-image:url('/assets/deeds/dominion.svg')}
.deed-medal[data-group="delve"] .deed-sigil {background-image:url('/assets/deeds/delve.svg')}
.deed-medal[data-group="garden"] .deed-sigil {background-image:url('/assets/deeds/garden.svg')}
.deed-medal[data-group="lottery"] .deed-sigil {background-image:url('/assets/deeds/lottery.svg')}
.deed-ring {position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;transform:rotate(-90deg)}
.deed-ring-groove {stroke:rgb(var(--stone-0));stroke-opacity:.6;stroke-width:2.8}
.deed-ring-fill {stroke:rgb(var(--moss-74));stroke-width:1.8}
.deed-ring-head {fill:rgb(var(--bone-96));stroke:rgb(var(--moss-74));stroke-opacity:.45;stroke-width:2.6}
.deed-seal.earned .deed-ring-groove {stroke:rgb(var(--bone-32));stroke-opacity:1}
.deed-seal.earned .deed-ring-fill {stroke:rgb(var(--gold-78));stroke-opacity:.55;stroke-width:1}
.deed-seal-words {min-width:0}
.deed-seal-head {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 10px}
.deed-seal-tally {font:600 13.5px Georgia,serif;color:rgb(var(--bone-69));font-variant-numeric:tabular-nums;white-space:nowrap}
.deed-seal.earned .rarity {color:rgb(var(--bone-73))}
.deed-seal.earned .deed-seal-tally {color:var(--gold-bright);text-shadow:0 0 8px rgb(var(--gold-87) / .35)}
.deed-seal h3 {margin-top:4px;font:16px/1.3 Georgia,serif;color:rgb(var(--bone-83))}
.deed-seal p {margin-top:3px;font-size:14px;line-height:1.45;color:rgb(var(--bone-62))}
.deed-seal small {position:relative;display:block;margin-top:7px;padding-left:14px;font-size:14px;line-height:1.4}
.goal p,.deed-seal p,.deed-seal small,.board-season {text-wrap:pretty}
.deed-seal small::before {content:'';position:absolute;left:2px;top:.52em;width:5px;height:5px;background:rgb(var(--moss-44));transform:rotate(45deg)}
.deed-seal.earned small::before {background:rgb(var(--gold-78));box-shadow:0 0 6px rgb(var(--gold-87) / .67)}
@media(max-width:720px) {
  .achievement-list {margin:10px 10px 14px}
  .deed-seal {grid-template-columns:56px minmax(0,1fr);gap:12px;padding:12px 12px 13px 10px}
  .deed-seal h3 {margin-top:2px}
  .deed-seal small {margin-top:5px}
  .deed-medal {width:56px;height:56px}
  .deed-sigil {inset:12px}
}
/* A deed earned while the player watches is struck: the medallion lands, a gold ring spreads from it. */
@media(prefers-reduced-motion:no-preference) {
  .deed-seal.deed-struck .deed-medal {animation:deed-strike 1.1s cubic-bezier(.2,.9,.3,1.2)}
  .deed-seal.deed-struck .deed-medal::after {content:'';position:absolute;inset:2px;border-radius:50%;border:2px solid rgb(var(--gold-87));box-shadow:0 0 18px rgb(var(--gold-87));opacity:0;animation:deed-ring-out 1.2s ease-out .45s;pointer-events:none}
  .deed-seal.deed-struck .deed-seal-words {animation:deed-fade .9s ease-out .25s both}
  @keyframes deed-strike {0% {opacity:0;transform:scale(1.6) rotate(-24deg)}55% {opacity:1;transform:scale(.94) rotate(3deg)}100% {transform:none}}
  @keyframes deed-fade {from {opacity:0}to {opacity:1}}
  @keyframes deed-ring-out {0% {opacity:.9;transform:scale(1)}100% {opacity:0;transform:scale(2.1)}}
}
/* The Hall of the Damned: the crypt stair painted behind a stepped podium (and behind the empty board's line),
   gold, silver and bronze plates on plinths with the first three names, the crown on the first; the rest
   are the engraved roll, and the player's own place is lit. The list stays in rank order for screen readers
   and the keyboard; the podium only stands second, first, third. */
.goal-tabs.board-tabs button:not(:first-child) {flex:1 1 22%;padding:9px 12px 10px;white-space:nowrap}
.board-list::before {content:'';grid-row:1;grid-column:1/-1;align-self:stretch;min-height:232px;margin:0 -13px;background:linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-20) / 0) 24%,rgb(var(--stone-20) / 0) 62%,rgb(var(--stone-20) / .8) 90%,rgb(var(--stone-20))),linear-gradient(90deg,rgb(var(--stone-20) / .9),rgb(var(--stone-20) / 0) 26%,rgb(var(--stone-20) / 0) 74%,rgb(var(--stone-20) / .9)),radial-gradient(ellipse at 50% 42%,rgb(var(--stone-15) / 0) 25%,rgb(var(--stone-15) / .6) 80%),url('/assets/illustrations/abandoned-crypt.jpg') 64% 40%/cover no-repeat}
.board-list:empty::before {content:none}
.board-list li.deed-place {grid-row:1;z-index:1;align-self:end;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"name" "value" "rank";gap:0;padding:0;border:0;text-align:center;filter:drop-shadow(0 8px 10px rgb(var(--stone-0) / .65))}
.board-list li.deed-place[data-place="1"] {grid-column:3;padding-top:46px;background:url('/assets/deeds/dominion.svg') 50% 2px/40px no-repeat;--plate:linear-gradient(172deg,rgb(var(--gold-87)),rgb(var(--gold-76)) 36%,rgb(var(--gold-55)) 70%,rgb(var(--gold-66)));--etch:rgb(var(--bone-32));--etch-hi:rgb(var(--bone-96) / .6);--plinth-h:78px;--numeral:40px}
.board-list li.deed-place[data-place="2"] {grid-column:2;--plate:linear-gradient(172deg,rgb(var(--stone-88)),rgb(var(--bone-77)) 36%,rgb(var(--bone-55)) 70%,rgb(var(--bone-69)));--etch:rgb(var(--stone-26));--etch-hi:rgb(var(--stone-100) / .45);--plinth-h:56px;--numeral:32px}
.board-list li.deed-place[data-place="3"] {grid-column:4;--plate:linear-gradient(172deg,rgb(var(--bone-83)),rgb(var(--gold-66)) 36%,rgb(var(--gold-46)) 70%,rgb(var(--gold-55)));--etch:rgb(var(--stone-26));--etch-hi:rgb(var(--gold-87) / .45);--plinth-h:42px;--numeral:28px}
.deed-place::before {content:'';grid-area:1/1/3/2;align-self:stretch;z-index:-1;margin:0 5px;background:repeating-linear-gradient(90deg,rgb(var(--stone-100) / .06) 0 1px,transparent 1px 3px),var(--plate);clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%,0 8px);box-shadow:inset 0 0 0 1px rgb(var(--stone-0) / .35),inset 0 0 0 3px rgb(var(--stone-100) / .12),inset 0 -6px 10px rgb(var(--stone-0) / .3)}
.board-list .deed-place button.board-name {grid-area:name;margin:0 5px;padding:11px 10px 0;font:700 15px/1.25 Georgia,serif;color:var(--etch);text-align:center;text-decoration:none;text-shadow:0 1px 0 var(--etch-hi);white-space:normal;overflow-wrap:anywhere;text-wrap:balance}
.board-list .deed-place button.board-name:hover,.board-list .deed-place button.board-name:focus-visible {color:rgb(var(--stone-0));text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.board-list .deed-place button.board-name:focus-visible {outline-color:rgb(var(--stone-20));outline-offset:-2px}
.board-list .deed-place b {grid-area:value;margin:0 5px;padding:2px 8px 10px;font:600 13px Georgia,serif;color:var(--etch);text-align:center;text-shadow:0 1px 0 var(--etch-hi);text-wrap:balance}
/* Each plinth is a weathered block on one shared footing, its numeral cut into the stone and gilded. */
.board-list .deed-place .board-rank {--face:linear-gradient(rgb(var(--bone-32)),rgb(var(--stone-26)) 16%,rgb(var(--stone-20)));grid-area:rank;height:var(--plinth-h);padding-top:10px;border-top:1px solid rgb(var(--gold-46));background:linear-gradient(0deg,rgb(var(--stone-15)) 0 6px,rgb(var(--bone-40)) 6px 7px,rgb(var(--stone-0) / 0) 7px),radial-gradient(ellipse 55% 45% at 24% 72%,rgb(var(--stone-0) / .25),rgb(var(--stone-0) / 0)),radial-gradient(ellipse 40% 35% at 76% 34%,rgb(var(--stone-100) / .04),rgb(var(--stone-100) / 0)),var(--face);box-shadow:inset 0 1px rgb(var(--stone-100) / .13),inset 1px 0 rgb(var(--stone-100) / .05),inset -1px 0 rgb(var(--stone-0) / .62);font:700 var(--numeral)/1 Georgia,serif;color:var(--gold);text-align:center;text-shadow:0 -1px 0 rgb(var(--stone-0)),0 1px 0 rgb(var(--stone-100) / .11),0 0 16px rgb(var(--gold-78) / .36)}
.board-list .deed-place[data-place="1"] .board-rank {--face:linear-gradient(rgb(var(--bone-36)),rgb(var(--stone-26)) 16%,rgb(var(--stone-20)));color:var(--gold-bright)}
.board-list .deed-vacant::before {min-height:48px;background:rgb(var(--stone-15) / .45);box-shadow:inset 0 0 0 1px rgb(var(--gold-78) / .15);clip-path:none}
.board-list .deed-vacant .board-rank {color:rgb(var(--bone-55));text-shadow:0 1px 0 rgb(var(--stone-0))}
.board-list .deed-place.you::after {content:'';grid-area:1/1/3/2;align-self:stretch;z-index:-2;margin:-3px 2px 0;background:linear-gradient(rgb(var(--moss-97)),rgb(var(--moss-74)) 45%,rgb(var(--moss-59)));clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%,0 10px);pointer-events:none}
.board-list li.deed-roll {padding:9px 12px 9px 8px;background:linear-gradient(90deg,rgb(var(--stone-20)),rgb(var(--stone-20)) 55%,rgb(var(--stone-20) / 0))}
.board-list li.deed-place+li.deed-roll {margin-top:14px;border-top:1px solid rgb(var(--bone-40))}
.board-list li.deed-roll.you {background:linear-gradient(90deg,rgb(var(--moss-74) / .16),rgb(var(--moss-74) / .05) 60%,transparent);box-shadow:inset 3px 0 rgb(var(--moss-74))}
.board-list li.deed-roll.you b {color:var(--gold-bright)}
#board-you.deed-ranked {border-color:rgb(var(--gold-46));color:var(--gold-bright);background:radial-gradient(ellipse at 0 50%,rgb(var(--moss-74) / .14),transparent 62%),linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-17)));box-shadow:inset 3px 0 rgb(var(--moss-74)),inset 0 1px rgb(var(--gold-87) / .12)}
.board-last::before {content:'';display:inline-block;width:22px;height:22px;margin-right:7px;vertical-align:-5px;background:url('/assets/deeds/dominion.svg') center/contain no-repeat}
@media(max-width:720px) {
  .board-list {margin:10px 10px 0}
  .board-list::before {margin:0 -10px;min-height:204px}
  .board-list li {grid-template-columns:32px minmax(0,1fr) auto}
  .board-list li.deed-place[data-place="1"] {padding-top:40px;background-size:34px;--plinth-h:60px;--numeral:32px}
  .board-list li.deed-place[data-place="2"] {--plinth-h:44px;--numeral:26px}
  .board-list li.deed-place[data-place="3"] {--plinth-h:37px;--numeral:22px}
  .board-list .deed-place[data-place="3"] .board-rank {padding-top:8px}
  .deed-place::before,.board-list .deed-place button.board-name,.board-list .deed-place b {margin:0 3px}
  .board-list .deed-place.you::after {margin:-3px 0 0}
  .board-list .deed-place button.board-name {padding:10px 6px 0;font-size:14px}
  .board-list .deed-place b {padding:1px 4px 9px}
  #board-you,.board-last {margin-inline:10px}
}
/* Another board or season raises its podium, second and third a beat after the first, and the roll follows. */
@media(prefers-reduced-motion:no-preference) {
  .board-list.deed-rise .deed-place {animation:deed-rise .7s cubic-bezier(.2,.8,.3,1) both}
  .board-list.deed-rise .deed-place[data-place="2"] {animation-delay:.12s}
  .board-list.deed-rise .deed-place[data-place="3"] {animation-delay:.22s}
  .board-list.deed-rise .deed-roll {animation:deed-roll-in .5s ease-out .3s both}
  @keyframes deed-rise {from {opacity:0;transform:translateY(34px)}to {opacity:1;transform:none}}
  @keyframes deed-roll-in {from {opacity:0;transform:translateX(-12px)}to {opacity:1;transform:none}}
}
/* A necromancer of record, the profile a name in the Hall opens: the crypt's painting behind the name, the
   deeds in an engraved ledger whose dotted leaders run from each deed to its total (half drawn by the deed,
   half by its total, meeting in the middle), a record not yet set in quiet italic, and past honours marked
   with gold, silver and bronze. */
.profile {overflow-x:hidden}
.profile::before {content:'';position:absolute;inset:0 0 auto;height:156px;background:linear-gradient(rgb(var(--stone-17) / 0) 30%,rgb(var(--stone-20))),linear-gradient(90deg,rgb(var(--stone-17) / .85),rgb(var(--stone-17) / .25) 45%,rgb(var(--stone-17) / .25) 65%,rgb(var(--stone-17) / .85)),url('/assets/illustrations/abandoned-crypt.jpg') 64% 40%/cover no-repeat;pointer-events:none}
.profile form {position:relative}
.profile .eyebrow {color:rgb(var(--bone-83));text-shadow:0 1px 4px rgb(var(--stone-0))}
.profile #profile-title {font-size:27px;text-shadow:0 2px 10px rgb(var(--stone-0)),0 0 18px rgb(var(--gold-78) / .25)}
.profile .ledger {gap:6px 0;align-items:baseline;border-color:rgb(var(--bone-36));background:rgb(var(--stone-15) / .8);box-shadow:inset 0 0 0 3px rgb(var(--stone-15)),inset 0 0 0 4px rgb(var(--stone-26))}
.profile .ledger dt,.profile .ledger dd {display:flex;align-items:baseline;min-width:0}
.profile .ledger dt::after,.profile .ledger dd::before {content:'';flex:1 1 0;min-width:0;border-bottom:1px dotted rgb(var(--bone-40))}
.profile .ledger dt::after {margin-left:7px}
.profile .ledger dd::before {margin-right:8px}
.profile .ledger dd {color:rgb(var(--stone-88))}
.profile .ledger dd.deed-unset {font-weight:400;font-style:italic;color:rgb(var(--bone-62))}
.profile #profile-honours {color:rgb(var(--bone-83))}
.profile #profile-honours li[data-rank] {padding-left:23px;text-indent:-23px}
.profile #profile-honours li[data-rank]::before {content:'';display:inline-block;width:14px;height:14px;margin-right:9px;border-radius:50%;vertical-align:-2px;background:radial-gradient(circle at 35% 30%,rgb(var(--bone-96)),rgb(var(--gold-78)) 45%,rgb(var(--gold-55)));box-shadow:0 0 0 1px rgb(var(--stone-20)),0 0 8px rgb(var(--gold-78) / .35)}
.profile #profile-honours li[data-rank="2"]::before {background:radial-gradient(circle at 35% 30%,rgb(var(--stone-100)),rgb(var(--bone-77)) 45%,rgb(var(--gold-46)));box-shadow:0 0 0 1px rgb(var(--stone-20))}
.profile #profile-honours li[data-rank="3"]::before {background:radial-gradient(circle at 35% 30%,rgb(var(--bone-96)),rgb(var(--gold-66)) 45%,rgb(var(--bone-40)));box-shadow:0 0 0 1px rgb(var(--stone-20))}
/* The Revival Pit and the Forge rosters (September 2026 art refresh).
   The pit: each Revived stands in an arched niche over its soul-lit pit. Wisps of Souls rise out of the pit, one
   to five by the Souls it gathers each second; a stone plate of ten notches beneath the arch carries its level, the
   notch it holds brightest; the epitaph and the ledger follow, and Strengthen is the plinth. Three and two niches
   on a wide panel, two by two with the last across the foot on the desktop column, one by one on a phone. */
.revival {container-type:inline-size}
.revival .panel-heading .eyebrow {display:inline-flex;align-items:center;gap:7px;color:rgb(var(--moss-83))}
.revival .panel-heading .eyebrow::before,.pit-rate::before {content:'';flex:none;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle,rgb(var(--stone-100)) 0 22%,rgb(var(--spirit-92)) 45%,rgb(var(--spirit-92) / 0) 70%)}
.revival-grid {grid-template-columns:repeat(6,minmax(0,1fr));gap:14px 12px;padding:14px 18px 20px;background:radial-gradient(ellipse 70% 40% at 50% 100%,rgb(var(--moss-85) / .07),rgb(var(--moss-85) / 0) 72%)}
.revival-grid>.pit-niche {grid-column:span 3}
@container (min-width:700px) {
  .revival-grid>.pit-niche {grid-column:span 2}
  .revival-grid>.pit-niche:nth-child(n+4) {grid-column:span 3}
}
@container (max-width:480px) {.revival-grid>.pit-niche {grid-column:1/-1}}
@media(max-width:720px) {.revival-grid {padding-inline:12px}}
.pit-niche {position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid rgb(var(--bone-36));border-radius:3px;background:linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-17)) 58%);box-shadow:inset 0 1px rgb(var(--gold-78) / .08),0 3px 10px rgb(var(--stone-0) / .53)}
.pit-portrait {position:relative;container-type:inline-size;aspect-ratio:2/1;margin:10px 10px 0;overflow:hidden;border-radius:50% 50% 2px 2px/26% 26% 2px 2px;background:rgb(var(--stone-15));box-shadow:0 0 0 1px rgb(var(--bone-40)),0 0 0 4px rgb(var(--stone-20)),0 0 0 5px rgb(var(--stone-26))}
.pit-portrait img {display:block;width:100%;height:100%;object-fit:cover}
.pit-portrait::after {content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgb(var(--gold-78) / .12),inset 0 0 24px rgb(var(--stone-0) / .8)}
.pit-niche.sleeping .pit-portrait img {opacity:.5;filter:grayscale(.85) brightness(.6)}
/* Soul wisps: motes with a faint trail, rising out of the pit mouth; standing still in a rising column when the
   player asks for reduced motion. */
.pit-flow {position:absolute;inset:0;z-index:1;pointer-events:none}
.pit-flow i {position:absolute;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:radial-gradient(circle,rgb(var(--stone-100)) 0 24%,rgb(var(--spirit-92)) 48%,rgb(var(--spirit-92) / 0) 72%)}
.pit-flow i::after {content:'';position:absolute;left:50%;top:62%;width:2px;height:15px;margin-left:-1px;border-radius:1px;background:linear-gradient(rgb(var(--spirit-92) / .6),rgb(var(--spirit-92) / 0))}
.pit-flow i:nth-child(1) {left:46%;bottom:36%}
.pit-flow i:nth-child(2) {left:57%;bottom:50%}
.pit-flow i:nth-child(3) {left:41%;bottom:62%}
.pit-flow i:nth-child(4) {left:62%;bottom:72%}
.pit-flow i:nth-child(5) {left:51%;bottom:82%}
.pit-flow[data-flow="0"] i,.pit-flow[data-flow="1"] i:nth-child(n+2),.pit-flow[data-flow="2"] i:nth-child(n+3),.pit-flow[data-flow="3"] i:nth-child(n+4),.pit-flow[data-flow="4"] i:nth-child(n+5) {display:none}
/* The level plate: ten notches cut in five and five, lit from the first up to the level, the one it holds brightest. */
.pit-track {position:relative;z-index:3;align-self:center;display:flex;align-items:center;gap:3px;margin:-11px 0 0;padding:5px 8px;border:1px solid rgb(var(--bone-40));border-radius:2px;background:linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-15)));box-shadow:0 0 0 2px rgb(var(--stone-17)),0 4px 10px rgb(var(--stone-0) / .8),inset 0 1px rgb(var(--gold-87) / .13)}
.pit-track i {display:block;width:5px;height:14px;border-radius:2px;background:rgb(var(--stone-26));box-shadow:inset 0 1px 1px rgb(var(--stone-0))}
.pit-track i:nth-child(6) {margin-left:5px}
.pit-track i.lit {background:linear-gradient(rgb(var(--spirit-92)),rgb(var(--moss-64)));box-shadow:none}
.pit-track i.top {background:rgb(var(--stone-100));box-shadow:0 0 6px 1px rgb(var(--moss-85) / .7)}
.pit-epitaph {padding:10px 14px 12px;text-align:center}
.pit-epitaph .eyebrow {display:block;font-size:12px;letter-spacing:2px;color:rgb(var(--moss-83));text-wrap:balance}
.pit-niche h3 {margin:3px 0 5px;font:21px Georgia,serif;font-weight:400;color:rgb(var(--stone-88));letter-spacing:.3px}
.pit-niche p {margin:0 auto;max-width:34em;font-size:14px;line-height:1.45;color:rgb(var(--bone-69));text-wrap:pretty}
.pit-ledger {display:flex;flex-direction:column;align-items:center;gap:3px;margin:auto 14px 0;padding:10px 0 0;border-top:1px solid rgb(var(--stone-26));text-align:center}
.pit-rate {font-size:14px;color:rgb(var(--moss-87));text-wrap:balance}
.pit-rate::before {display:inline-block;margin-right:6px;vertical-align:1px}
.pit-ledger small {font-size:13px;color:rgb(var(--bone-62));text-wrap:balance}
.ledger-part {white-space:nowrap}
.pit-niche>button {margin:12px 0 0;padding:11px 14px;border-width:1px 0 0;border-radius:0;white-space:normal;overflow-wrap:anywhere;text-wrap:balance}
.pit-niche>button:focus-visible {outline-offset:-4px}
.pit-niche.sleeping .pit-epitaph .eyebrow {color:rgb(var(--bone-62))}
.pit-niche.sleeping h3 {color:rgb(var(--bone-83))}
.pit-max {border-color:rgb(var(--gold-55));box-shadow:inset 0 1px rgb(var(--gold-87) / .18),0 0 0 1px rgb(var(--gold-78) / .08),0 3px 12px rgb(var(--stone-0) / .6)}
.pit-max .pit-portrait {box-shadow:0 0 0 1px rgb(var(--gold-66)),0 0 0 4px rgb(var(--stone-20)),0 0 0 5px rgb(var(--bone-40))}
.pit-max .pit-track {border-color:rgb(var(--gold-55))}
.pit-max .pit-track i.lit {background:linear-gradient(rgb(var(--bone-96)),rgb(var(--gold-66)))}
.pit-max .pit-track i.top {background:rgb(var(--bone-96));box-shadow:0 0 6px 1px rgb(var(--gold-87) / .6)}
.pit-max .pit-epitaph .eyebrow {color:var(--gold)}
.pit-max>button:disabled {opacity:1;filter:none;cursor:default;color:var(--gold-bright);background:linear-gradient(rgb(var(--stone-26)),rgb(var(--stone-20)));font:15px Georgia,serif;letter-spacing:.5px}
@media (prefers-reduced-motion:no-preference) {
  .pit-flow i {bottom:18%;opacity:0;animation:pit-wisp var(--rise,4.8s) cubic-bezier(.3,.6,.5,1) infinite}
  .pit-flow i:nth-child(1) {left:47%;bottom:18%;--sway:2cqw;animation-delay:-.4s}
  .pit-flow i:nth-child(2) {left:55%;bottom:18%;--sway:-2.4cqw;animation-delay:-1.4s}
  .pit-flow i:nth-child(3) {left:42%;bottom:18%;--sway:1.4cqw;animation-delay:-2.4s}
  .pit-flow i:nth-child(4) {left:60%;bottom:18%;--sway:-1.6cqw;animation-delay:-3.3s}
  .pit-flow i:nth-child(5) {left:51%;bottom:18%;--sway:2.8cqw;animation-delay:-4.2s}
  .pit-flow[data-flow="4"],.pit-flow[data-flow="5"] {--rise:3.8s}
  @keyframes pit-wisp {0% {opacity:0;transform:translate(0,0) scale(.55)} 12% {opacity:1} 70% {opacity:.85} 100% {opacity:0;transform:translate(var(--sway,0),-34cqw) scale(1)}}
  .revival .panel-heading .eyebrow::before {animation:pit-breath 3.2s ease-in-out infinite}
  @keyframes pit-breath {0%,100% {opacity:.55;transform:translateY(1px) scale(.85)} 50% {opacity:1;transform:translateY(-2px) scale(1)}}
  /* A monster just raised or strengthened: the pit surges once and its new notch settles into the plate. */
  .pit-rising .pit-portrait::before {content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 58% 72% at 50% 90%,rgb(var(--spirit-92) / .7),rgb(var(--moss-85) / .25) 45%,rgb(var(--moss-85) / 0) 72%);transform-origin:50% 100%;animation:pit-surge 1.6s ease-out forwards}
  .pit-rising .pit-track i.top {animation:pit-notch 1.2s ease-out}
  @keyframes pit-surge {0% {opacity:0;transform:scaleY(.55)} 28% {opacity:1} 100% {opacity:0;transform:scaleY(1.2)}}
  @keyframes pit-notch {0% {opacity:0;transform:scaleY(2.2)} 45% {opacity:1} 100% {opacity:1;transform:scaleY(1)}}
}
/* The last niche across the foot of the two-column pit: the portrait on the left, the plate, epitaph and plinth on the right. */
@container (min-width:481px) and (max-width:699px) {
  .revival-grid>.pit-niche:last-child:nth-child(odd) {grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr auto}
  .revival-grid>.pit-niche:last-child:nth-child(odd) .pit-portrait {grid-column:1;grid-row:1/-1;aspect-ratio:auto;min-height:170px;margin:10px 0 10px 10px}
  .revival-grid>.pit-niche:last-child:nth-child(odd) .pit-track {grid-column:2;grid-row:1;justify-self:start;margin:16px 0 0 16px}
  .revival-grid>.pit-niche:last-child:nth-child(odd) .pit-epitaph {grid-column:2;grid-row:2;padding:10px 16px 0;text-align:left}
  .revival-grid>.pit-niche:last-child:nth-child(odd) p {margin:0}
  .revival-grid>.pit-niche:last-child:nth-child(odd) .pit-ledger {grid-column:2;grid-row:3;align-self:end;align-items:flex-start;margin:12px 16px 0;text-align:left}
  .revival-grid>.pit-niche:last-child:nth-child(odd)>button {grid-column:2;grid-row:4;margin-left:14px;border-left-width:1px;border-top-left-radius:3px}
}
/* The Forge rosters: each golem or commander a small diorama. Its portrait stands in an arched alcove with a plate
   of pips at its foot (a golem's tier as rivets, a commander's rank as lozenges); the legions it can join hang as
   woven banners from a gilt rail, the one it serves unfurled in tarnished gold; Reforge or Promote is the foot, its
   act in the serif ahead of its price. The banners hang down the right of a wide roster, beside the name on the
   desktop column and across the card on a phone. */
.golem-roster {gap:10px;container-type:inline-size}
.golem-roster .roster-diorama {position:relative;display:grid;align-items:start;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto auto auto 1fr auto;grid-template-areas:"portrait name banners" "portrait meta banners" "portrait ability banners" "portrait dust banners" "portrait stats banners" "foot foot foot";gap:0 14px;padding:12px 12px 0;border:1px solid rgb(var(--bone-36));border-radius:3px;background:radial-gradient(ellipse 110px 80% at 42px 38%,rgb(var(--gold-76) / .11),rgb(var(--gold-76) / 0) 72%),linear-gradient(100deg,rgb(var(--stone-20)),rgb(var(--stone-17)) 46%,rgb(var(--stone-17)));box-shadow:inset 0 1px rgb(var(--gold-78) / .1),0 2px 8px rgb(var(--stone-0) / .4);font-size:14px}
.roster-diorama .golem-name {display:contents}
.golem-roster .roster-diorama .golem-name>b {grid-area:name;font:18px/1.25 Georgia,serif;color:rgb(var(--stone-88))}
.roster-diorama .roster-meta {grid-area:meta;font-size:12.5px;line-height:1.45;color:rgb(var(--bone-62))}
.golem-roster .roster-diorama .golem-ability {grid-area:ability;margin-top:5px;font-size:13px;line-height:1.4;color:rgb(var(--bone-77));text-wrap:pretty}
.golem-roster .roster-diorama .golem-ability b {font:14px Georgia,serif;color:var(--gold-bright)}
.golem-roster .roster-diorama .golem-dust {grid-area:dust;margin-top:1px;font-size:13px;line-height:1.4;color:rgb(var(--moss-83));text-wrap:pretty}
.roster-diorama .unit-stats {grid-area:stats;margin-top:6px}
.golem-roster .roster-portrait {grid-area:portrait;position:relative;display:grid;justify-items:center;gap:0;margin-bottom:8px}
.golem-roster .roster-portrait .unit-portrait {width:60px;height:75px;border-color:rgb(var(--gold-46));border-radius:50% 50% 2px 2px/28% 28% 2px 2px;box-shadow:0 0 0 2px rgb(var(--stone-15)),0 0 0 3px rgb(var(--gold-78) / .2),0 5px 12px rgb(var(--stone-0) / .8)}
.roster-pips {position:absolute;left:50%;bottom:-8px;display:flex;justify-content:center;gap:4px;padding:3px 5px;border-radius:2px;background:linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-15)));box-shadow:0 0 0 1px rgb(var(--bone-36)),0 0 0 2px rgb(var(--stone-15)),0 2px 5px rgb(var(--stone-0) / .73);transform:translateX(-50%)}
.roster-pips i {display:block;width:7px;height:7px;background:rgb(var(--stone-26));box-shadow:inset 0 0 0 1px rgb(var(--bone-36))}
.roster-rivets i {border-radius:50%}
.roster-rivets i.lit {background:radial-gradient(circle at 35% 35%,rgb(var(--bone-96)),rgb(var(--gold-78)) 45%,rgb(var(--gold-46)));box-shadow:0 0 4px rgb(var(--gold-78) / .4)}
.roster-lozenges {gap:3px}
.roster-lozenges i {width:8px;height:10px;background:rgb(var(--bone-32));clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.roster-lozenges i.lit {background:linear-gradient(135deg,rgb(var(--bone-96)) 20%,rgb(var(--gold-78)) 50%,rgb(var(--gold-55)))}
/* The banners: a gilt rail with a cloth per legion, woven as its share of the army bar. */
.golem-roster .roster-banners {grid-area:banners;display:flex;flex-direction:column;align-items:flex-end;gap:3px;margin:0}
.golem-roster .roster-banners .legion-label {margin:0;font-size:11px;letter-spacing:1.4px;color:rgb(var(--bone-62))}
.roster-rail {position:relative;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px 2px;padding-top:3px}
.roster-rail::before {content:'';position:absolute;top:-1px;left:-5px;right:-5px;height:5px;background:radial-gradient(circle at 2.5px 50%,rgb(var(--gold-87)) 0 1.6px,rgb(var(--gold-55)) 2.2px,rgb(var(--stone-0) / 0) 2.6px),radial-gradient(circle at calc(100% - 2.5px) 50%,rgb(var(--gold-87)) 0 1.6px,rgb(var(--gold-55)) 2.2px,rgb(var(--stone-0) / 0) 2.6px),linear-gradient(rgb(var(--stone-0) / 0) 1px,rgb(var(--gold-78)) 1px,rgb(var(--bone-40)) 4px,rgb(var(--stone-0) / 0) 4px) 4px 0/calc(100% - 8px) 100% no-repeat;filter:drop-shadow(0 1px 1px rgb(var(--stone-0) / .8))}
.golem-roster .roster-banner {--cloth:rgb(var(--stone-26));position:relative;isolation:isolate;display:flex;align-items:flex-start;justify-content:center;width:27px;min-width:0;height:36px;padding:5px 0 0;border:0;border-radius:0;background:none;color:rgb(var(--bone-69));font:600 13px Georgia,serif;text-shadow:0 1px 2px rgb(var(--stone-0));transform-origin:50% 0;transition:transform .2s,color .15s}
.golem-roster .roster-banner::before {content:'';position:absolute;z-index:-1;inset:0 2px 7px;background:var(--cloth);box-shadow:inset 0 -12px 10px -8px rgb(var(--stone-0) / .53);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);transition:filter .15s}
.golem-roster .roster-banner[aria-pressed="true"] {--cloth:rgb(var(--gold-46));color:rgb(var(--bone-96))}
.golem-roster .roster-banner[aria-pressed="true"]::before {bottom:0;background:linear-gradient(rgb(var(--gold-55)),rgb(var(--bone-40)))}
.golem-roster .roster-banner:hover:not(:disabled) {color:var(--gold-bright)}
.golem-roster .roster-banner:hover:not(:disabled)::before {filter:brightness(1.35)}
.golem-roster .roster-banner:focus-visible {outline-offset:1px}
.roster-banner.legion-2::before,.roster-flag.legion-2 {background:repeating-linear-gradient(135deg,rgb(var(--stone-0) / 0) 0 3px,rgb(var(--stone-0) / .4) 3px 5px),var(--cloth)}
.roster-banner.legion-3::before,.roster-flag.legion-3 {background:repeating-linear-gradient(45deg,rgb(var(--stone-0) / 0) 0 3px,rgb(var(--stone-0) / .4) 3px 5px),var(--cloth)}
.roster-banner.legion-4::before,.roster-flag.legion-4 {background:repeating-linear-gradient(90deg,rgb(var(--stone-0) / 0) 0 3px,rgb(var(--stone-0) / .47) 3px 4px),var(--cloth)}
.roster-banner.legion-5::before,.roster-flag.legion-5 {background:radial-gradient(rgb(var(--stone-0) / .47) 1px,rgb(var(--stone-0) / 0) 1.5px) 0 0/4px 4px,var(--cloth)}
.roster-banner.legion-6::before,.roster-flag.legion-6 {background:repeating-linear-gradient(0deg,rgb(var(--stone-0) / 0) 0 3px,rgb(var(--stone-0) / .47) 3px 4px),var(--cloth)}
.roster-banner.legion-7::before,.roster-flag.legion-7 {background:repeating-linear-gradient(45deg,rgb(var(--stone-0) / .4) 0 1px,rgb(var(--stone-0) / 0) 1px 4px),repeating-linear-gradient(135deg,rgb(var(--stone-0) / .4) 0 1px,rgb(var(--stone-0) / 0) 1px 4px),var(--cloth)}
.golem-roster .roster-banners.solo {flex-direction:row;align-items:center;gap:8px}
.roster-flag {--cloth:rgb(var(--gold-46));display:block;flex:none;width:16px;height:22px;border-top:3px solid rgb(var(--gold-66));background:var(--cloth);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%)}
/* The foot: the act in the serif, then its price, each part of the price kept on one line. */
.golem-roster .roster-diorama .golem-upgrade {grid-area:foot;display:block;margin:12px -12px 0;padding:9px 12px 10px;border:0;border-top:1px solid rgb(var(--bone-32));border-radius:0;background:linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-17)));box-shadow:none;font-size:13px;font-weight:400;line-height:1.4;color:rgb(var(--bone-73));text-align:left;white-space:normal;text-wrap:balance}
.golem-roster .roster-diorama .golem-upgrade:focus-visible {outline-offset:-4px}
.roster-act {font:15px Georgia,serif;color:var(--gold-bright)}
.roster-sep {color:rgb(var(--gold-46))}
.golem-roster .roster-diorama .golem-max {grid-area:foot;display:block;margin:12px -12px 0;padding:9px 12px 10px;border-top:1px solid rgb(var(--bone-32));background:linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-17)));font:15px Georgia,serif;letter-spacing:.4px;color:var(--gold-bright)}
/* A mid roster (the desktop column): the banners hang beside the name only, the lines below run the full width. */
@container (max-width:639px) {
  .golem-roster .roster-diorama {grid-template-areas:"portrait name banners" "portrait meta banners" "portrait ability ability" "portrait dust dust" "portrait stats stats" "foot foot foot"}
}
/* A narrow roster (a phone): name, number and stats beside the portrait, the ability and the rest under it, and
   the banners on their rail across the card with the label before them. */
@container (max-width:439px) {
  .golem-roster .roster-diorama {grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr auto auto auto auto;grid-template-areas:"portrait name" "portrait meta" "portrait stats" "ability ability" "dust dust" "banners banners" "foot foot";column-gap:12px}
  .golem-roster .roster-portrait .unit-portrait {width:50px;height:64px}
  .golem-roster .roster-pips {bottom:-7px;padding:2px 4px;gap:3px}
  .golem-roster .roster-rivets i {width:6px;height:6px}
  .golem-roster .roster-lozenges i {width:7px;height:9px}
  .golem-roster .roster-diorama .golem-ability {margin-top:9px}
  /* A commander has no stats line, so its gift stands beside the portrait. */
  .golem-roster .roster-commander {grid-template-rows:auto auto 1fr auto auto;grid-template-areas:"portrait name" "portrait meta" "portrait ability" "banners banners" "foot foot"}
  .golem-roster .roster-commander .golem-ability {margin-top:5px}
  .roster-diorama .unit-stats {margin-top:4px;flex-wrap:wrap;gap:2px 8px}
  .golem-roster .roster-banners {flex-direction:row;flex-wrap:wrap;align-items:flex-start;justify-content:flex-start;column-gap:10px;margin-top:8px}
  .golem-roster .roster-banners .legion-label {margin-top:1px}
  .golem-roster .roster-banner {width:25px;height:32px;padding-top:4px}
  .golem-roster .roster-diorama .golem-upgrade,.golem-roster .roster-diorama .golem-max {margin-top:9px;padding:8px 12px 9px}
}

/* The Lands tab's two side panels (September 2026 art refresh). The Endless Dark is a stair cut down
   through the rock beneath the Kingdom of Ash: every depth broken is a step lit by its own bone candle, the
   next depth is the dark step ahead with a little gold light on it, and the stair falls away into the dark.
   Land Lore is a lorebook of painted plates, two to a row wherever the panel is wide enough. */
.endless-panel,.lore-panel {container-type:inline-size}
/* The Endless Dark. The stair is a framed picture in the Delve's frame; the next depth hangs on an engraved
   plaque in its empty upper right when there is room and under it on a phone, and what the deep has given is
   an inscription on the footstone beneath it. */
.endless-body {padding:2px 16px 16px;display:flex;flex-direction:column;gap:12px}
.endless-stair {display:grid;grid-template-columns:minmax(0,1fr);border:1px solid rgb(var(--bone-36));background:rgb(var(--stone-15));box-shadow:inset 0 0 0 1px rgb(var(--stone-0)),0 3px 12px rgb(var(--stone-0) / .6)}
.endless-shaft {position:relative;aspect-ratio:4/3;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 28% 18%,rgb(var(--stone-20)),rgb(var(--stone-15)) 72%)}
.endless-shaft svg {position:absolute;inset:0;width:100%;height:100%;display:block}
.endless-shaft::before {content:'';position:absolute;inset:0;z-index:1;box-shadow:inset 0 0 46px 8px rgb(var(--stone-0) / .87),inset 0 0 0 1px rgb(var(--stone-0) / .6);pointer-events:none}
.endless-shaft::after {content:'';position:absolute;inset:0;z-index:2;background:url('/assets/endless/stone-grain.svg') 0 0/256px 256px;mix-blend-mode:overlay;opacity:.55;pointer-events:none}
.endless-next {position:relative;padding:12px 16px 13px;border:1px solid rgb(var(--gold-46));border-radius:2px;background:repeating-linear-gradient(0deg,rgb(var(--stone-100) / .02) 0 1px,rgb(var(--stone-0) / 0) 1px 3px),linear-gradient(rgb(var(--stone-20) / .96),rgb(var(--stone-17) / .96));box-shadow:inset 0 0 0 1px rgb(var(--stone-0) / .67),inset 0 0 0 3px rgb(var(--stone-26)),inset 0 0 0 4px rgb(var(--gold-78) / .11),0 8px 22px rgb(var(--stone-0) / .87)}
.endless-stair>.endless-next {margin:-1px 0 0;border-left:0;border-right:0}
.endless-next::before {content:'';position:absolute;inset:4px;pointer-events:none;background:radial-gradient(circle,rgb(var(--gold-83)) 0 1.1px,rgb(var(--bone-40)) 1.7px,rgb(var(--stone-0) / 0) 2.3px) left top/6px 6px no-repeat,radial-gradient(circle,rgb(var(--gold-83)) 0 1.1px,rgb(var(--bone-40)) 1.7px,rgb(var(--stone-0) / 0) 2.3px) right top/6px 6px no-repeat,radial-gradient(circle,rgb(var(--gold-83)) 0 1.1px,rgb(var(--bone-40)) 1.7px,rgb(var(--stone-0) / 0) 2.3px) left bottom/6px 6px no-repeat,radial-gradient(circle,rgb(var(--gold-83)) 0 1.1px,rgb(var(--bone-40)) 1.7px,rgb(var(--stone-0) / 0) 2.3px) right bottom/6px 6px no-repeat}
.endless-next h3 {margin:0;font:23px/1.15 Georgia,serif;letter-spacing:.4px;color:var(--gold-bright);text-shadow:0 -1px 0 rgb(var(--stone-0) / .8),0 1px 0 rgb(var(--gold-87) / .12),0 0 14px rgb(var(--gold-78) / .19)}
.endless-next small {display:block;margin-top:3px;color:rgb(var(--bone-69));font-size:14px;letter-spacing:.3px;overflow-wrap:anywhere}
.endless-next p {margin:8px 0 0;padding-top:8px;border-top:1px solid rgb(var(--bone-32));font-size:14.5px;color:rgb(var(--bone-83));line-height:1.45;overflow-wrap:anywhere}
.endless-next b {color:var(--gold-bright);font-weight:600}
.endless-next b.short {color:rgb(var(--bone-73));text-decoration:underline dotted rgb(var(--gold-55));text-underline-offset:3px}
.endless-inscription {position:relative;margin:0;padding:13px 16px 12px;border-top:1px solid rgb(var(--bone-36));background:linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-17)));text-align:center;font:italic 14.5px/1.5 Georgia,'Times New Roman',serif;color:rgb(var(--bone-77));text-shadow:0 1px 0 rgb(var(--stone-0)),0 -1px 0 rgb(var(--stone-100) / .04)}
.endless-inscription::before {content:'';position:absolute;left:50%;top:-5px;width:8px;height:8px;background:rgb(var(--stone-20));border:1px solid rgb(var(--gold-55));transform:translateX(-50%) rotate(45deg)}
.endless-milestones {display:block;margin-top:5px;font-size:13.5px;font-style:normal;color:rgb(var(--moss-76))}
@container (min-width:540px) {
  .endless-stair {grid-template-areas:"scene" "foot"}
  .endless-shaft {grid-area:scene;aspect-ratio:auto;height:clamp(250px,50cqw,330px)}
  .endless-stair>.endless-next {grid-area:scene;z-index:3;align-self:start;justify-self:end;width:min(264px,45%);margin:16px;border:1px solid rgb(var(--gold-46))}
  .endless-inscription {grid-area:foot}
}
/* The picture's parts, drawn by endlessStair() in app.js: the shaft's wall, the ledge the stair leaves from,
   and one stone per step with its tread, riser and worn nosing, lit, next or deep, and the bone candles. */
.endless-wall {fill:rgb(var(--stone-20))}
.endless-wall.w1 {fill:rgb(var(--stone-20))}
.endless-wall.w2 {fill:rgb(var(--stone-17))}
.endless-wall.w3 {fill:rgb(var(--stone-20))}
.endless-edge {fill:none;stroke:rgb(var(--bone-32));stroke-width:.8;stroke-opacity:.55}
.endless-seam {fill:none;stroke:rgb(var(--stone-15));stroke-width:1.2;stroke-opacity:.7}
.endless-crack {fill:none;stroke:rgb(var(--stone-15));stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:.8}
.endless-streak {fill:none;stroke:rgb(var(--stone-15));stroke-width:3;stroke-linecap:round;stroke-opacity:.4}
.endless-streak.wet {stroke:rgb(var(--bone-32));stroke-width:1;stroke-opacity:.35;transform:translateX(1.5px)}
.endless-cast {fill:none;stroke:rgb(var(--stone-0));stroke-width:18;stroke-opacity:.3}
.endless-cast.near {stroke-width:8;stroke-opacity:.35}
.endless-rock {fill:rgb(var(--stone-15))}
.endless-block {fill:rgb(var(--stone-26))}
.endless-block.b1 {fill:rgb(var(--stone-26))}
.endless-block.b2 {fill:rgb(var(--stone-20))}
.endless-block.b3 {fill:rgb(var(--stone-26))}
.endless-step {fill:rgb(var(--stone-26));stroke:rgb(var(--stone-15));stroke-width:1}
.endless-step.lit {fill:url(#endless-paint-lit)}
.endless-step.next {fill:url(#endless-paint-next);stroke:rgb(var(--bone-36))}
.endless-step.deep {fill:rgb(var(--stone-20))}
.endless-tread {fill:rgb(var(--bone-32))}
.endless-tread.lit {fill:rgb(var(--moss-59))}
.endless-tread.next {fill:rgb(var(--bone-32))}
.endless-tread.deep {fill:rgb(var(--stone-26))}
.endless-tread.landing {fill:rgb(var(--bone-32))}
.endless-riser {fill:rgb(var(--stone-26))}
.endless-riser.lit {fill:rgb(var(--bone-36))}
.endless-riser.next {fill:rgb(var(--stone-26))}
.endless-riser.deep {fill:rgb(var(--stone-20))}
.endless-riser.landing {fill:rgb(var(--stone-20))}
.endless-nosing {fill:none;stroke:rgb(var(--gold-46));stroke-width:1}
.endless-nosing.lit {stroke:rgb(var(--moss-87));stroke-opacity:.75}
.endless-nosing.next {stroke:rgb(var(--gold-83));stroke-width:1.4}
.endless-nosing.deep {stroke:rgb(var(--bone-69));stroke-opacity:.6}
.endless-nosing.landing {stroke:rgb(var(--gold-46))}
.endless-wear {fill:rgb(var(--stone-0));fill-opacity:.15}
.endless-chip {fill:rgb(var(--stone-17));fill-opacity:.85}
.endless-numeral {font:600 17px Georgia,'Times New Roman',serif;text-anchor:middle;paint-order:stroke;stroke:rgb(var(--stone-0));stroke-width:2px;stroke-opacity:.6}
.endless-numeral.lit {fill:rgb(var(--moss-87));fill-opacity:.8}
.endless-numeral.next {fill:var(--gold-bright);font-size:20px}
.endless-arch {fill:rgb(var(--stone-26));stroke:rgb(var(--bone-40));stroke-width:1.2}
.endless-door {fill:rgb(var(--bone-36))}
.endless-pool {fill:rgb(var(--stone-88));fill-opacity:.55}
.endless-candle {fill:rgb(var(--bone-83));stroke:rgb(var(--gold-46));stroke-width:.5}
.endless-drip {fill:none;stroke:rgb(var(--bone-96));stroke-width:.9;stroke-linecap:round;stroke-opacity:.8}
.endless-core {fill:rgb(var(--stone-100))}
.endless-spark {fill:rgb(var(--moss-97));fill-opacity:.8}
.endless-far {opacity:.7}
.endless-fire,.endless-core {transform-box:fill-box;transform-origin:50% 100%}
.endless-halo,.endless-flame {transform-box:fill-box;transform-origin:50% 50%}
/* Each legion's row: a numeral seal, its name, Descend once it meets all three needs (or where it is away),
   and three carved gauges as long as the next depth's needs, filled with ghost-light when a need is met. On
   a phone each gauge is a line of its own; wider, the three stand side by side under the name. */
.endless-legions {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.endless-legion {display:grid;grid-template-columns:32px minmax(0,1fr) auto;grid-template-areas:"seal name act" "needs needs needs";align-items:center;gap:8px 10px;padding:9px 11px 11px;border:1px solid rgb(var(--stone-26));border-radius:2px;background:linear-gradient(90deg,rgb(var(--stone-20)),rgb(var(--stone-17)) 70%);box-shadow:inset 0 1px rgb(var(--stone-100) / .03),inset 0 -1px rgb(var(--stone-0) / .6),0 1px 3px rgb(var(--stone-0) / .4)}
.endless-legion.ready {border-color:rgb(var(--moss-59));background:linear-gradient(90deg,rgb(var(--stone-26)),rgb(var(--stone-20)) 72%);box-shadow:inset 3px 0 rgb(var(--moss-76)),inset 0 1px rgb(var(--moss-87) / .07),0 0 16px rgb(var(--moss-80) / .11)}
.endless-legion>b {grid-area:name;min-width:0;font:16px/1.2 Georgia,'Times New Roman',serif;color:rgb(var(--stone-88));overflow-wrap:anywhere}
.endless-legion>small {grid-area:act;font-size:13.5px;color:rgb(var(--bone-69));font-style:italic;text-align:right}
.endless-legion>button {grid-area:act;padding:7px 16px}
.endless-legion.lent .endless-needs {opacity:.5}
.endless-legion>.endless-host-legions {grid-column:1 / -1;margin:2px 0 0}
.endless-legion>.endless-host-legions[hidden] {display:none}
.endless-seal {grid-area:seal;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;border:1px solid rgb(var(--gold-46));background:radial-gradient(circle at 38% 32%,rgb(var(--bone-32)),rgb(var(--stone-17)) 72%);font:600 12.5px/1 Georgia,'Times New Roman',serif;letter-spacing:.3px;color:var(--gold);box-shadow:inset 0 0 0 2px rgb(var(--stone-0) / .53),inset 0 0 0 3px rgb(var(--gold-78) / .08),0 1px 3px rgb(var(--stone-0) / .8)}
.endless-legion.ready .endless-seal {border-color:rgb(var(--moss-76));color:rgb(var(--bone-96));background:radial-gradient(circle at 38% 32%,rgb(var(--moss-44)),rgb(var(--stone-20)) 74%);box-shadow:inset 0 0 0 2px rgb(var(--stone-0) / .53),0 0 12px rgb(var(--moss-80) / .35)}
.endless-needs {grid-area:needs;display:grid;gap:6px;font-variant-numeric:tabular-nums}
.endless-gauge {display:grid;grid-template-columns:34px minmax(0,1fr) 7.2em;align-items:center;gap:10px;min-width:0;font-size:13.5px}
.endless-gauge-label {font-size:11.5px;font-weight:600;letter-spacing:1.3px;color:rgb(var(--bone-62))}
.endless-gauge-text {text-align:right;white-space:nowrap;color:rgb(var(--bone-77));line-height:1.25}
.endless-gauge.met .endless-gauge-label {color:rgb(var(--moss-80))}
.endless-gauge.met .endless-gauge-text {color:rgb(var(--moss-87))}
.endless-gauge-slot {position:relative;height:8px;border-radius:1px;background:rgb(var(--stone-15));box-shadow:inset 0 1px 2px rgb(var(--stone-0)),0 1px rgb(var(--stone-100) / .07);overflow:hidden}
.endless-gauge-slot::after {content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgb(var(--stone-0) / 0) 0 calc(25% - 1px),rgb(var(--stone-0) / .67) calc(25% - 1px) 25%)}
.endless-gauge-fill {position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(rgb(var(--gold-66)),rgb(var(--gold-46)) 55%,rgb(var(--bone-36)))}
.endless-gauge.met .endless-gauge-fill {background:linear-gradient(rgb(var(--moss-97)),rgb(var(--moss-74)) 50%,rgb(var(--moss-59)))}
.endless-gauge.met .endless-gauge-slot {box-shadow:inset 0 1px 2px rgb(var(--stone-0)),0 0 8px rgb(var(--moss-80) / .25)}
@container (min-width:540px) {
  .endless-legion {grid-template-columns:36px minmax(0,1fr) auto;grid-template-areas:"seal name act" "seal needs needs";gap:7px 14px;padding:10px 14px 12px 12px}
  .endless-seal {width:34px;height:34px}
  .endless-needs {grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 18px}
  .endless-gauge {grid-template-columns:auto minmax(0,1fr);grid-template-areas:"label text" "slot slot";gap:5px 8px}
  .endless-gauge-label {grid-area:label}
  .endless-gauge-text {grid-area:text}
  .endless-gauge-slot {grid-area:slot}
}
/* Land Lore. The Lore Pool is an inkwell whose ink rises with the pool (--lore-fill, set by renderLore),
   beside its gauge and the pour field. */
.lore-pool {display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-areas:"well head" "well pour" "hint hint";align-items:center;gap:8px 16px;padding:14px 16px;border-bottom:1px solid rgb(var(--bone-32));background:radial-gradient(ellipse 150px 90px at 48px 50%,rgb(var(--moss-80) / .07),transparent),linear-gradient(rgb(var(--stone-0) / 0),rgb(var(--stone-15) / .35))}
.lore-well {grid-area:well;position:relative;width:64px;height:80px}
.lore-well-ink {position:absolute;inset:0;clip-path:path('M25 32.6C17.4 33.6 12.4 38.8 12.4 48.5c0 8.2 1.1 13.5 4.2 17.8h30.8c3.1-4.3 4.2-9.6 4.2-17.8C51.6 38.8 46.6 33.6 39 32.6z');background:rgb(var(--stone-15))}
.lore-well-ink span {position:absolute;left:0;right:0;top:32px;bottom:13px;transform:translateY(calc((1 - var(--lore-fill, 0)) * 100%));background:linear-gradient(rgb(var(--moss-87)) 0 1px,rgb(var(--moss-64)) 1px,rgb(var(--moss-44)) 20%,rgb(var(--stone-26)) 62%,rgb(var(--stone-20)))}
.lore-well::after {content:'';position:absolute;inset:0;background:url('/assets/lore/inkwell.svg') 0 0/64px 80px no-repeat}
.lore-pool-head {grid-area:head;display:flex;align-items:baseline;gap:6px 12px;flex-wrap:wrap;min-width:0}
.lore-pool-head .rarity {color:rgb(var(--moss-80));letter-spacing:2px}
.lore-pool-head strong {color:rgb(var(--stone-88));font:19px Georgia,serif;letter-spacing:.3px;font-variant-numeric:tabular-nums}
.lore-pool-head progress {flex:1 1 100%;width:100%;height:9px;margin:2px 0 0;appearance:none;-webkit-appearance:none;border:1px solid rgb(var(--stone-26));border-radius:5px;background:rgb(var(--stone-15));box-shadow:inset 0 1px 3px rgb(var(--stone-0)),0 1px rgb(var(--stone-100) / .05);overflow:hidden}
.lore-pool-head progress::-webkit-progress-bar {background:transparent}
.lore-pool-head progress::-webkit-progress-value {background:linear-gradient(90deg,rgb(var(--bone-32)),rgb(var(--moss-64)) 70%,rgb(var(--moss-86)));border-radius:4px;box-shadow:0 0 8px rgb(var(--moss-80) / .33)}
.lore-pool-head progress::-moz-progress-bar {background:linear-gradient(90deg,rgb(var(--bone-32)),rgb(var(--moss-64)) 70%,rgb(var(--moss-86)));border-radius:4px}
.lore-pour {grid-area:pour;display:flex;flex-wrap:wrap;gap:8px;align-items:end}
.lore-pour label {display:flex;flex-direction:column;align-items:flex-start;gap:4px 10px;font-size:13px;color:rgb(var(--bone-69));letter-spacing:.08em;text-transform:uppercase}
.lore-pour input {width:132px;min-width:0;background:rgb(var(--stone-15));color:rgb(var(--stone-88));border:1px solid rgb(var(--bone-36));border-radius:3px;padding:7px 10px;font:inherit;font-size:15px;box-shadow:inset 0 1px 4px rgb(var(--stone-0) / .8);letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.lore-hint {grid-area:hint;display:block;font-size:14px;color:rgb(var(--bone-62));line-height:1.45}
.lore-list {list-style:none;margin:0;padding:14px 16px 16px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@container (min-width:540px) {
  .lore-pool {grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"well head pour" "well hint hint"}
  .lore-list {grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* A land's plate: its painting (the land card's own crop) under its ring, name and level. */
.lore-card {position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;min-width:0;border:1px solid rgb(var(--bone-32));border-radius:3px;background:rgb(var(--stone-17));overflow:hidden;isolation:isolate;box-shadow:inset 0 1px rgb(var(--gold-78) / .08),0 3px 10px rgb(var(--stone-0) / .47)}
.lore-card.locked {border-style:dashed;border-color:rgb(var(--bone-32))}
.lore-card-art {grid-area:1/1;position:relative;border-bottom:1px solid rgb(var(--stone-26));background:rgb(var(--stone-20)) center/cover no-repeat}
.lore-card-art::after {content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgb(var(--stone-15) / .92),rgb(var(--stone-15) / .72) 42%,rgb(var(--stone-15) / .16)),linear-gradient(rgb(var(--stone-15) / 0) 60%,rgb(var(--stone-15) / .65))}
.lore-card.locked .lore-card-art {filter:grayscale(.9) brightness(.55)}
.lore-card[data-land="forgotten-graveyard"] .lore-card-art {background-image:url('/assets/reference/graveyard.jpg')}
.lore-card[data-land="abandoned-crypt"] .lore-card-art {background-image:url('/assets/illustrations/abandoned-crypt.jpg')}
.lore-card[data-land="old-mausoleum"] .lore-card-art {background-image:url('/assets/reference/lair.jpg')}
.lore-card[data-land="forsaken-battlefield"] .lore-card-art {background-image:url('/assets/reference/battlefield.jpg')}
.lore-card[data-land="spirit-hollow"] .lore-card-art {background-image:url('/assets/reference/wasteland.jpg')}
.lore-card[data-land="blood-marshes"] .lore-card-art {background-image:url('/assets/reference/ritual.jpg')}
.lore-card[data-land="hollow-cathedral"] .lore-card-art {background-image:url('/assets/reference/altar.jpg')}
.lore-card[data-land="weeping-fen"] .lore-card-art {background-image:url('/assets/reference/wasteland.jpg');background-position:center bottom}
.lore-card[data-land="gallows-hill"] .lore-card-art {background:url('/assets/endless/stone-grain.svg') 0 0/256px 256px,radial-gradient(ellipse at 72% 30%,rgb(var(--stone-26)),rgb(var(--stone-20)) 75%);background-blend-mode:overlay,normal}
.lore-card[data-land="warded-abbey"] .lore-card-art {background-image:url('/assets/reference/altar.jpg');background-position:right center}
.lore-card[data-land="pit-of-the-fallen"] .lore-card-art {background-image:url('/assets/reference/bones.jpg')}
.lore-card[data-land="ashen-ramparts"] .lore-card-art {background-image:url('/assets/reference/kingdom.jpg');background-position:left top}
.lore-card[data-land="cinder-garrison"] .lore-card-art {background-image:url('/assets/reference/lava-golem.jpg')}
.lore-card[data-land="kingdom-of-ash"] .lore-card-art {background-image:url('/assets/reference/kingdom.jpg')}
.lore-head {grid-area:1/1;position:relative;display:grid;grid-template-columns:50px minmax(0,1fr);grid-template-areas:"ring name" "ring level";align-items:center;gap:1px 11px;padding:14px 12px 13px}
.lore-head h3 {grid-area:name;align-self:end;font:18px/1.2 Georgia,serif;color:rgb(var(--stone-88));margin:0;text-shadow:0 1px 2px rgb(var(--stone-0)),0 0 10px rgb(var(--stone-0))}
.lore-head .rarity {grid-area:level;align-self:start;color:rgb(var(--bone-77));font-size:12px;letter-spacing:1.5px;text-shadow:0 1px 2px rgb(var(--stone-0))}
.lore-card.locked .lore-head .rarity {color:rgb(var(--bone-62))}
.lore-ring {grid-area:ring;position:relative;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:radial-gradient(circle,rgb(var(--stone-20)) 0 57%,rgb(var(--stone-15)) 60%);box-shadow:0 0 0 1px rgb(var(--stone-0) / .67),0 3px 8px rgb(var(--stone-0) / .8)}
.lore-ring svg:not(.icon) {position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.lore-ring-track {fill:none;stroke:rgb(var(--stone-26));stroke-width:4.5}
.lore-ring-arc {fill:none;stroke:var(--gold);stroke-width:4.5}
.lore-ring b {position:relative;font:600 17px/1 Georgia,'Times New Roman',serif;color:var(--gold-bright);font-variant-numeric:tabular-nums;text-shadow:0 1px 2px rgb(var(--stone-0))}
.lore-ring.sealed {color:rgb(var(--bone-62))}
.lore-ring.sealed .icon {width:20px;height:20px}
.lore-card.warden {border-color:rgb(var(--gold-55));box-shadow:inset 0 1px rgb(var(--gold-87) / .14),0 0 18px rgb(var(--gold-78) / .14),0 3px 10px rgb(var(--stone-0) / .47)}
.lore-card.warden .lore-ring-arc {stroke:var(--gold-bright)}
.lore-card.warden .lore-ring {box-shadow:0 0 0 1px rgb(var(--stone-0) / .67),0 0 14px rgb(var(--gold-87) / .4)}
/* Its page: Lore to the next level, ten checkpoint seals in wax, the next checkpoint, the level-50 reward
   cut as an inscription, and Fill and Pour at its foot. */
.lore-card-body {grid-row:2;display:flex;flex-direction:column;gap:7px;padding:10px 12px 11px}
.lore-card small {font-size:13.5px;color:rgb(var(--bone-69));font-variant-numeric:tabular-nums}
.lore-card .lore-title {font:italic 15px/1.35 Georgia,serif;color:rgb(var(--gold-87));text-shadow:0 0 10px rgb(var(--gold-78) / .25)}
.lore-card p {font-size:14px;color:rgb(var(--bone-69));line-height:1.45;margin:0}
.lore-card .research-next {color:rgb(var(--moss-80))}
.lore-pips {display:flex;flex-wrap:wrap;gap:5px;margin:1px 0}
.lore-pips i {position:relative;display:block;width:17px;height:17px;border-radius:50%;border:1px solid rgb(var(--bone-32));background:radial-gradient(circle at 50% 38%,rgb(var(--stone-15)),rgb(var(--stone-20)) 72%);box-shadow:inset 0 1px 2px rgb(var(--stone-0)),0 1px rgb(var(--stone-100) / .06)}
.lore-pips i.seal {border-color:rgb(var(--gold-46));background:radial-gradient(circle at 50% 38%,rgb(var(--stone-17)),rgb(var(--stone-26)) 72%)}
/* A checkpoint reached is a blob of red wax pressed with the skull, spilling a little past its hollow; a
   reward checkpoint's wax is gold. */
.lore-pips i.lit {width:21px;height:21px;margin:-2px;border:0;border-radius:0;background:url('/assets/lore/seal-red.svg') center/100% 100% no-repeat;box-shadow:none}
.lore-pips i.seal.lit {background-image:url('/assets/lore/seal-gold.svg');filter:drop-shadow(0 0 4px rgb(var(--gold-87) / .35))}
.lore-pips i::after {content:'';position:absolute;inset:4px;border-radius:50%}
.lore-pips i.lit::after {content:none}
.lore-pips i.due {border-color:rgb(var(--moss-64))}
.lore-pips i.due::after {inset:-4px;border:1px solid rgb(var(--moss-80) / .7);opacity:.75}
.lore-card .lore-reward {position:relative;margin-top:5px;padding:10px 6px 0;border-top:1px solid rgb(var(--stone-26));text-align:center;font:italic 14px/1.45 Georgia,'Times New Roman',serif;color:rgb(var(--bone-69));text-shadow:0 1px 0 rgb(var(--stone-0))}
.lore-card .lore-reward::before {content:'';position:absolute;left:50%;top:-4px;width:7px;height:7px;background:rgb(var(--stone-17));border:1px solid rgb(var(--bone-40));transform:translateX(-50%) rotate(45deg)}
.lore-card .lore-reward b {display:block;margin-bottom:2px;font:600 12px/1.4 'Segoe UI',Arial,sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:rgb(var(--bone-73))}
.lore-card .lore-reward.lit {color:rgb(var(--gold-87))}
.lore-card .lore-reward.lit::before {border-color:var(--gold);background:rgb(var(--bone-32));box-shadow:0 0 8px rgb(var(--gold-78) / .5)}
.lore-card .lore-reward.lit b {color:rgb(var(--gold-87));text-shadow:0 0 10px rgb(var(--gold-78) / .33)}
.lore-actions {grid-row:3;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;margin-top:auto;padding:8px 12px 10px;border-top:1px solid rgb(var(--stone-26));background:linear-gradient(rgb(var(--stone-15)),rgb(var(--stone-20)))}
.lore-actions .secondary {padding:7px 10px}
/* One plate to a row on a phone: a little tighter, so fourteen lands do not run on forever. */
@container (max-width:539px) {
  .lore-head {grid-template-columns:44px minmax(0,1fr);gap:1px 10px;padding:10px 12px}
  .lore-ring {width:44px;height:44px}
  .lore-ring b {font-size:16px}
  .lore-card-body {gap:6px;padding:9px 12px 10px}
  .lore-card .lore-reward {margin-top:3px;padding-top:9px}
  .lore-actions {padding:7px 12px 9px}
}
/* Motion only for players who allow it: the candles flicker, the step ahead breathes, mist drifts over the
   deep and its far lights waver, a depth broken walks the stair one step and lights its candles, a gauge
   fills, the ink rises, a checkpoint reached is pressed into the wax, and a level gained flares on its ring. */
@media(prefers-reduced-motion:no-preference) {
  .endless-fire {animation:endless-flicker 2.1s ease-in-out infinite}
  .endless-halo {animation:endless-glow 3.4s ease-in-out infinite}
  .endless-flame.f1 .endless-fire {animation-duration:2.6s;animation-delay:-.8s}
  .endless-flame.f2 .endless-fire {animation-duration:1.8s;animation-delay:-1.3s}
  .endless-flame.f3 .endless-fire {animation-duration:2.9s;animation-delay:-.4s}
  .endless-halo.f1 {animation-delay:-1.1s}
  .endless-halo.f2 {animation-delay:-2.2s}
  .endless-halo.f3 {animation-delay:-.6s}
  .endless-beckon {animation:endless-glow 4.6s ease-in-out infinite}
  .endless-mist.drift {animation:endless-drift 23s ease-in-out infinite alternate}
  .endless-far {animation:endless-waver 5.3s ease-in-out infinite}
  .endless-far.f1 {animation-duration:6.7s;animation-delay:-2.4s}
  .endless-far.f2 {animation-duration:4.4s;animation-delay:-1.1s}
  .endless-far.f3 {animation-duration:7.9s;animation-delay:-4.6s}
  .endless-flight.descended {animation:endless-descend 1.2s cubic-bezier(.3,.7,.3,1)}
  .endless-flame.lit-now {animation:endless-ignite 1.6s ease-out}
  .endless-halo.lit-now {animation:endless-kindle 1.6s ease-out}
  .endless-gauge-fill {transition:transform .7s ease}
  .lore-well-ink span {transition:transform .9s ease}
  .lore-pips i.due::after {animation:lore-due 2.4s ease-in-out infinite}
  .lore-pips i.stamped {animation:lore-stamp .7s cubic-bezier(.2,.8,.3,1.3)}
  .lore-ring.leveled::after {content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--gold-bright);box-shadow:0 0 16px rgb(var(--gold-87) / .67);opacity:0;animation:lore-flare 1.3s ease-out}
  @keyframes endless-flicker {0%,100% {transform:none}22% {transform:scale(.94,1.08)}47% {transform:scale(1.05,.93) skewX(-3deg)}71% {transform:scale(.97,1.05) skewX(2deg)}}
  @keyframes endless-glow {0%,100% {opacity:.72}50% {opacity:1}}
  @keyframes endless-descend {from {transform:translate(52px,30px)}to {transform:none}}
  @keyframes endless-drift {from {transform:translateX(-26px)}to {transform:translateX(30px)}}
  @keyframes endless-waver {0%,100% {opacity:.7}38% {opacity:.34}52% {opacity:.95}}
  @keyframes endless-ignite {0% {opacity:0;transform:scale(.4)}35% {opacity:1;transform:scale(1.25)}100% {opacity:1;transform:none}}
  @keyframes endless-kindle {0% {opacity:0;transform:scale(.3)}100% {opacity:.72;transform:none}}
  @keyframes lore-due {0%,100% {opacity:0;transform:scale(.8)}50% {opacity:1;transform:none}}
  @keyframes lore-stamp {0% {opacity:0;transform:scale(1.9) rotate(-18deg)}55% {opacity:1;transform:scale(.88)}100% {opacity:1;transform:none}}
  @keyframes lore-flare {0% {opacity:1;transform:scale(.8)}100% {opacity:0;transform:scale(1.35)}}
}
/* The reset sandbox's resource grants: a scrolling list above the sandbox bar, one +x row per resource. */
.sandbox-grants {position:fixed;bottom:74px;left:50%;transform:translateX(-50%);z-index:41;width:min(520px,calc(100% - 24px));max-height:min(60vh,520px);display:grid;grid-template-rows:auto 1fr auto;gap:8px;padding:12px 14px;border:1px solid rgb(var(--arcane-62));border-radius:4px;background:rgb(var(--stone-20) / .97);box-shadow:0 8px 28px rgb(var(--stone-0) / .8);color:var(--ink);font-size:14px}
.sandbox-grants header {display:grid;gap:2px}
.sandbox-grants header b {color:rgb(var(--arcane-82));letter-spacing:1px}
.sandbox-grants header span, .sandbox-grant-message {color:var(--muted,rgb(var(--spirit-76)));font-size:13px;margin:0}
.sandbox-grant-list {overflow-y:auto;display:grid;gap:4px;padding-right:4px}
.sandbox-grant {display:grid;grid-template-columns:1fr auto 110px auto;align-items:center;gap:8px;padding:3px 0;border-bottom:1px solid rgb(var(--arcane-62) / .2)}
.sandbox-grant .grant-have {font-variant-numeric:tabular-nums;color:rgb(var(--arcane-82));text-align:right}
.sandbox-grant input {width:100%;min-width:0;padding:5px 6px}
.sandbox-grant .secondary {padding:5px 12px;border-color:rgb(var(--arcane-62))}
/* The sandbox's worldboss panel: the six bosses as portrait buttons, then the one standing now. */
.sandbox-bosses {grid-template-rows:auto auto auto auto auto;overflow-y:auto}
.sandbox-boss-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.sandbox-boss-list button {display:flex;align-items:center;gap:8px;min-width:0;padding:5px 8px;text-align:left;border-color:rgb(var(--arcane-62))}
.sandbox-boss-list img {flex-shrink:0;width:40px;height:40px;border-radius:3px}
.sandbox-boss-list span {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sandbox-omen {display:flex;align-items:center;gap:8px;font-size:14px}
.sandbox-boss-standing {display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0}
.sandbox-boss-standing .secondary {padding:5px 12px;border-color:rgb(var(--arcane-62))}
@media(max-width:720px) {.sandbox-boss-list button {gap:6px;padding:4px 6px;font-size:13px}.sandbox-boss-list img {width:30px;height:30px}}
@media(max-width:720px) {.sandbox-grants {left:10px;right:10px;width:auto;transform:none;bottom:calc(172px + env(safe-area-inset-bottom));max-height:48vh}.sandbox-grant {grid-template-columns:1fr auto 80px auto;font-size:13px}}

/* Manage your legion leaves the top bar uncovered, so the balances stay readable while it is open. */
.legion-manager {top:var(--masthead-height,0px);max-height:calc(100dvh - var(--masthead-height,0px) - 24px)}
.legion-manager::backdrop {background:linear-gradient(transparent var(--masthead-height,0px),rgb(var(--stone-0) / .8) var(--masthead-height,0px))}
@media(max-width:720px) {.legion-manager {height:calc(100dvh - var(--masthead-height,0px));max-height:calc(100dvh - var(--masthead-height,0px));margin-top:0}}

/* The Reaper's Hand (Lemp, 2026-09-29): every land's Restless Touch and the studies learned by hand, on their
   own tab. A strength ring and ledger up top, a card per land with its rank ring, then the two studies. */
.reaper .panel-heading .eyebrow {color:rgb(var(--moss-86))}
.reaper-body {display:grid;gap:14px;padding:4px 16px 18px}
.reaper-hero {position:relative;display:grid;grid-template-columns:auto minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:18px 22px;padding:18px 20px;border:1px solid rgb(var(--bone-40));border-radius:6px;overflow:hidden;
  background:radial-gradient(circle at 70px 50%,rgb(var(--moss-64) / .2),transparent 150px),radial-gradient(ellipse at 100% 0,rgb(var(--ember-71) / .12),transparent 60%),repeating-linear-gradient(0deg,rgb(var(--stone-0) / 0) 0 38px,rgb(var(--stone-100) / .02) 38px 39px),linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-17)));box-shadow:inset 0 0 0 1px rgb(var(--stone-0) / .53),inset 0 0 40px rgb(var(--stone-0) / .73),0 6px 18px rgb(var(--stone-0) / .47)}
.reaper-hero:before {content:'';position:absolute;inset:6px;border:1px solid rgb(var(--gold-78) / .09);border-radius:3px;pointer-events:none}
.reaper-strength {position:relative;width:118px;height:118px;display:grid;place-items:center}
.strength-ring {position:absolute;inset:0;width:100%;height:100%}
.strength-ring .ring-track {fill:rgb(var(--stone-15));stroke:rgb(var(--stone-26));stroke-width:9}
.strength-ring .ring-value {fill:none;stroke:rgb(var(--moss-80));stroke-width:9;stroke-linecap:round;filter:drop-shadow(0 0 5px rgb(var(--moss-80) / .6));transition:stroke-dasharray .6s}
.reaper-hero.weary .strength-ring .ring-value {stroke:rgb(var(--ember-75));filter:drop-shadow(0 0 5px rgb(var(--ember-75) / .53))}
.strength-value {position:relative;display:flex;flex-direction:column;align-items:center;line-height:1}
.strength-value b {font:28px Georgia,serif;color:var(--gold-bright);font-variant-numeric:tabular-nums;text-shadow:0 2px 6px rgb(var(--stone-0))}
.strength-value small {max-width:64px;margin-top:5px;font-size:10.5px;line-height:1.15;letter-spacing:.8px;text-align:center;text-transform:uppercase;color:var(--muted)}
.reaper-ledger {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin:0}
.reaper-ledger div {padding-left:10px;border-left:2px solid rgb(var(--gold-46))}
.reaper-ledger dt {font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.reaper-ledger dd {margin:3px 0 0;font:24px Georgia,serif;color:var(--gold-bright);font-variant-numeric:tabular-nums}
.reaper-ledger dd small {font:14px 'Segoe UI',sans-serif;color:var(--muted)}
.reaper-next {align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:12px 14px;border:1px solid rgb(var(--bone-36));border-radius:4px;background:linear-gradient(rgb(var(--stone-20) / .8),rgb(var(--stone-17) / .8))}
.reaper-next .eyebrow {font-size:11.5px;letter-spacing:1.4px;color:rgb(var(--moss-86))}
.reaper-next p {margin:0;color:var(--ink);font-size:14.5px;line-height:1.35}
.reaper-next small {color:var(--gold);font-variant-numeric:tabular-nums}
.reaper-bar {position:relative;display:block;height:7px;border-radius:4px;background:rgb(var(--stone-15));box-shadow:inset 0 1px 2px rgb(var(--stone-0)),0 0 0 1px rgb(var(--bone-32));overflow:hidden}
.reaper-bar-fill {position:absolute;left:0;top:0;bottom:0;width:0;border-radius:4px;background:linear-gradient(90deg,rgb(var(--moss-59)),rgb(var(--moss-86)));box-shadow:0 0 8px rgb(var(--moss-80) / .53);transition:width .4s}
.reaper-title {display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:10px 0 0;padding-bottom:8px;border-bottom:1px solid rgb(var(--bone-32));font:19px Georgia,serif;color:var(--gold-bright);letter-spacing:.5px}
.reaper-title .icon {width:18px;height:18px;color:var(--gold);align-self:center}
.reaper-title small {flex:1 1 260px;font:13.5px 'Segoe UI',sans-serif;color:var(--muted);letter-spacing:0}
.reaper-chapter h3 {margin:4px 0 8px;font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold)}
.reaper-lands {display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.reaper-land {position:relative;display:flex;flex-direction:column;border:1px solid rgb(var(--bone-36));border-radius:6px;background:linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-15)));overflow:hidden;box-shadow:0 4px 12px rgb(var(--stone-0) / .4);transition:border-color .2s,box-shadow .2s}
.reaper-land:hover {border-color:rgb(var(--gold-55))}
.reaper-art {position:relative;isolation:isolate;display:grid;place-items:center;aspect-ratio:16/10;width:100%;padding:0;border:0;border-radius:0;background:rgb(var(--stone-17));color:inherit;cursor:pointer;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.reaper-art:before {content:'';position:absolute;inset:0;z-index:-2;opacity:.85;transition:opacity .2s,transform .4s}
.reaper-art:after {content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 50% 46%,rgb(var(--stone-15) / .6) 0,rgb(var(--stone-15) / .33) 34%,transparent 60%),linear-gradient(0deg,rgb(var(--stone-15) / .94) 0%,rgb(var(--stone-15) / .19) 55%,rgb(var(--stone-15) / .25) 100%)}
.reaper-art[data-land="gallows-hill"]:before {background:url('/assets/reference/graveyard.jpg') center top/cover}
.reaper-art:hover:before,.reaper-art:focus-visible:before {opacity:1;transform:scale(1.04)}
.reaper-art:active {box-shadow:inset 0 0 0 2px var(--green)}
.reaper-art:focus-visible {outline:2px solid var(--gold-bright);outline-offset:-4px}
.reaper-art[aria-disabled="true"] {cursor:default}
.reaper-art[aria-disabled="true"] .touch-ring {filter:brightness(.8)}
.touch-ring {width:86px;height:86px;overflow:visible;filter:drop-shadow(0 3px 6px rgb(var(--stone-0)))}
.touch-ring .ring-well {fill:rgb(var(--stone-15) / .9);stroke:rgb(var(--gold-46));stroke-width:1}
.touch-ring .ring-arc {fill:none;stroke:rgb(var(--stone-100) / .14);stroke-width:5}
.touch-ring .ring-arc.lit {stroke:rgb(var(--gold-83));filter:drop-shadow(0 0 3px rgb(var(--gold-83) / .67))}
.touch-ring .ring-fill {fill:none;stroke:rgb(var(--moss-86));stroke-width:5;filter:drop-shadow(0 0 3px rgb(var(--moss-86) / .67))}
.touch-ring text {font:600 17px Georgia,serif;fill:var(--gold-bright);letter-spacing:.5px}
.reaper-tap {position:absolute;left:0;right:0;bottom:7px;text-align:center;font-size:12px;letter-spacing:.4px;color:rgb(var(--bone-83));text-shadow:0 1px 3px rgb(var(--stone-0))}
.reaper-art .harvest-reward {top:40%}
.reaper-info {display:flex;flex-direction:column;gap:6px;padding:10px 12px 12px}
.reaper-info h4 {margin:0;font:16px Georgia,serif;color:var(--gold-bright);letter-spacing:.3px}
.reaper-speed {margin:0;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.reaper-speed b {color:rgb(var(--moss-86));font-weight:600}
.reaper-goal {display:flex;justify-content:space-between;gap:8px;margin:0;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.reaper-goal span:first-child {color:var(--gold);white-space:nowrap}
.reaper-goal span:last-child {text-align:right}
.reaper-goal.mastered {justify-content:center;color:var(--gold-bright);letter-spacing:.6px;text-transform:uppercase;font-size:12px}
.reaper-land.mastered {border-color:rgb(var(--gold-66));box-shadow:0 0 0 1px rgb(var(--gold-78) / .2),0 0 18px rgb(var(--gold-78) / .2),0 4px 12px rgb(var(--stone-0) / .4)}
.reaper-land.mastered .touch-ring .ring-well {stroke:rgb(var(--gold-83));stroke-width:1.5}
.reaper-land.open .reaper-art:before {filter:saturate(.5)}
.reaper-land.marching .reaper-tap {color:rgb(var(--moss-87))}
.reaper-land.sealed .reaper-art:before {opacity:.4;filter:grayscale(1)}
.reaper-land.sealed .reaper-info h4,.reaper-land.sealed .reaper-speed {color:rgb(var(--bone-62))}
.reaper-land.open .touch-ring,.reaper-land.sealed .touch-ring {opacity:.6}
.reaper-land.ranked {animation:reaper-rank 1.6s ease-out}
.reaper-land.ranked .touch-ring {animation:reaper-ring 1.2s ease-out}
@keyframes reaper-rank {0% {box-shadow:0 0 0 2px rgb(var(--gold-87)),0 0 30px rgb(var(--gold-87) / .67)} 100% {box-shadow:0 4px 12px rgb(var(--stone-0) / .4)}}
@keyframes reaper-ring {0% {transform:scale(1.25)} 40% {transform:scale(.95)} 100% {transform:scale(1)}}
.reaper-later {margin:0;font-size:13.5px;color:var(--muted);text-align:center}
.reaper-studies {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.reaper-study {display:flex;flex-direction:column;gap:9px;padding:14px 16px;border:1px solid rgb(var(--bone-36));border-radius:6px;background:radial-gradient(ellipse at 0 0,rgb(var(--ember-71) / .08),transparent 60%),linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-15)));box-shadow:0 4px 12px rgb(var(--stone-0) / .4)}
.reaper-study header {display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}
.reaper-sigil {display:grid;place-items:center;width:46px;height:46px;border:1px solid rgb(var(--gold-55));border-radius:50%;background:radial-gradient(circle,rgb(var(--bone-32)),rgb(var(--stone-17)));box-shadow:inset 0 0 10px rgb(var(--stone-0)),0 0 10px rgb(var(--gold-78) / .13);color:var(--gold-bright)}
.reaper-sigil .icon {width:22px;height:22px}
.reaper-study h4 {margin:0;font:17px Georgia,serif;color:var(--gold-bright)}
.reaper-study header p {margin:2px 0 0;font-size:13px;line-height:1.35}
.reaper-study header strong {font:26px Georgia,serif;color:var(--gold-bright);font-variant-numeric:tabular-nums}
.reaper-study header strong small {font:14px 'Segoe UI',sans-serif;color:var(--muted)}
.reaper-pips {display:flex;gap:3px}
.reaper-pips i {flex:1;height:6px;border-radius:2px;background:rgb(var(--stone-100) / .08);box-shadow:inset 0 1px 1px rgb(var(--stone-0))}
.reaper-pips i.lit {background:linear-gradient(rgb(var(--gold-87)),rgb(var(--gold-66)));box-shadow:0 0 5px rgb(var(--gold-83) / .53)}
.reaper-effect {margin:0;font-size:13.5px}
.reaper-effect b {color:rgb(var(--moss-86));font-weight:600}
.reaper-study .hand-objectives li {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px}
.reaper-study .hand-objectives li .reaper-bar {grid-column:1/-1;height:5px}
.reaper-study .hand-objectives .more {display:block}
.harvest-touch {display:inline-grid;place-items:center;vertical-align:.12em;min-width:22px;height:20px;margin-right:6px;padding:0 5px;border:1px solid rgb(var(--gold-66));border-radius:10px;background:rgb(var(--stone-15) / .85);font:600 11.5px/1 Georgia,serif;color:var(--gold-bright);box-shadow:0 0 8px rgb(var(--gold-78) / .27)}
@media(max-width:900px) {.reaper-hero {grid-template-columns:auto minmax(0,1fr)}.reaper-next {grid-column:1/-1}}
@media(max-width:720px) {
  .reaper-body {padding:2px 10px 14px;gap:12px}
  .reaper .panel-heading {flex-wrap:wrap;row-gap:2px}
  .reaper .panel-heading h2 {flex:1 0 100%}
  .reaper-goal span:last-child {text-align:left}
  .strength-value small {font-size:10px}
  .reaper-hero {gap:14px;padding:14px}
  .reaper-strength {width:96px;height:96px}
  .strength-value b {font-size:23px}
  .reaper-ledger {gap:8px 12px}
  .reaper-ledger dd {font-size:20px}
  .reaper-lands {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .touch-ring {width:70px;height:70px}
  .reaper-info {padding:8px 9px 10px;gap:5px}
  .reaper-info h4 {font-size:14.5px}
  .reaper-speed {font-size:12.5px}
  .reaper-goal {flex-direction:column;gap:1px;font-size:12px}
  .reaper-studies {grid-template-columns:1fr}
  .harvest-touch {min-width:18px;height:17px;margin-right:4px;padding:0 3px;font-size:10px}
}
@media(prefers-reduced-motion:reduce) {.reaper-land.ranked,.reaper-land.ranked .touch-ring {animation:none}.reaper-art:before,.reaper-bar-fill,.strength-ring .ring-value {transition:none}}

/* A land tapped too soon (Lemp, 2026-09-29): a red flash and a shudder, and the lost harvest floats off in red. */
.harvest-land.mistap,.reaper-art.mistap {animation:mistap-shake .45s ease-out}
.harvest-land.mistap:after,.reaper-art.mistap:after {background:radial-gradient(circle at 50% 50%,rgb(var(--blood-53) / .4),rgb(var(--blood-27) / .53) 70%),linear-gradient(0deg,rgb(var(--stone-15) / .94) 0%,rgb(var(--stone-15) / .19) 55%)}
.harvest-reward.lost {color:rgb(var(--ember-75));font-weight:600}
@keyframes mistap-shake {0%,100% {transform:translateX(0)} 20% {transform:translateX(-5px)} 40% {transform:translateX(4px)} 60% {transform:translateX(-3px)} 80% {transform:translateX(2px)}}
/* A bone ward (server/watch.js): a small cursed skull lying on the spot a clockwork hand always taps. */
.bone-ward {position:absolute;z-index:3;display:grid;place-items:center;width:30px;height:30px;transform:translate(-50%,-50%);border:1px solid rgb(var(--ember-60));border-radius:50%;background:radial-gradient(circle,rgb(var(--blood-27)),rgb(var(--stone-17)));box-shadow:0 0 10px rgb(var(--ember-60) / .6),inset 0 0 6px rgb(var(--stone-0));color:rgb(var(--bone-83));cursor:not-allowed;animation:bone-ward 1.6s ease-in-out infinite}
.bone-ward .icon {width:17px;height:17px}
@keyframes bone-ward {0%,100% {box-shadow:0 0 8px rgb(var(--ember-60) / .53),inset 0 0 6px rgb(var(--stone-0))} 50% {box-shadow:0 0 16px rgb(var(--ember-68) / .8),inset 0 0 6px rgb(var(--stone-0))}}
@media(prefers-reduced-motion:reduce) {.harvest-land.mistap,.reaper-art.mistap,.bone-ward {animation:none}}
/* Your next move leaves the player at the step's own button, lit for a moment. */
.move-spotlight {border-radius:5px;box-shadow:0 0 0 2px rgb(var(--gold-76)),0 0 18px rgb(var(--gold-76) / .53);transition:box-shadow .3s}
/* Simplified Chinese (public/i18n.js sets lang="zh-Hans"): fonts with Simplified glyphs, so no
   character falls back to a Japanese face, and no slanted text, since Chinese has no true italics. */
html:lang(zh) {font-family:'Segoe UI',Arial,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC','Noto Sans CJK SC','Source Han Sans SC','WenQuanYi Micro Hei','WenQuanYi Zen Hei',sans-serif}
html:lang(zh) h1,html:lang(zh) h2,html:lang(zh) h3 {font-family:Georgia,'Songti SC','STSong','Noto Serif SC','Noto Serif CJK SC','Source Han Serif SC','SimSun',serif}
html:lang(zh) * {font-style:normal!important}
/* Conquer while the legions fall short: still pressable (it opens the guide to what closes the gap), but it reads as not yet. */
.conquest-line button.weak {opacity:.72;border-style:dashed}
/* The legal notice (/impressum): a quiet link under the sign-in, in the footer and in Options. */
.auth-legal {display:block;text-align:center;margin-top:18px;font-size:13.5px;color:var(--muted,rgb(var(--bone-69)));text-underline-offset:3px}
.footer-legal {color:rgb(var(--bone-62));text-underline-offset:3px}
.option-legal {font-size:14.5px}
.option-legal a {color:var(--gold-bright,rgb(var(--gold-87)))}

/* Home's hold gauges (coffin trails, lottery tickets): a small vial that fills, with its count beside it.
   Low reads dim, half warm, nearly full gold and shimmering, full red and pulsing (a full hold earns nothing more). */
.overview-row[data-look="coffin-hunt"] {--tone:rgb(var(--blood-67));--art:url('/assets/reference/graveyard.jpg')}
.overview-row[data-look="lottery"] {--tone:rgb(var(--blood-67));--art:url('/assets/reference/altar.jpg')}
.overview-gauge {--fill:rgb(var(--bone-62));display:inline-flex;align-items:center;gap:6px;margin-right:8px;vertical-align:-1px}
.overview-gauge b {color:var(--fill);font:normal 700 12px/1 system-ui,sans-serif;font-variant-numeric:tabular-nums}
.gauge-bar {display:block;width:46px;height:8px;border-radius:5px;background:rgb(var(--stone-20));box-shadow:inset 0 0 0 1px rgb(var(--bone-32))}
.overview-gauge i {display:block;height:100%;width:0;border-radius:5px;background:var(--fill);box-shadow:0 0 6px color-mix(in srgb,var(--fill) 60%,transparent);transition:width .6s ease}
.overview-gauge[data-level="low"] {--fill:rgb(var(--bone-55))}
.overview-gauge[data-level="half"] {--fill:rgb(var(--gold-76))}
.overview-gauge[data-level="high"] {--fill:rgb(var(--gold-83))}
.overview-gauge[data-level="full"] {--fill:rgb(var(--blood-67))}
.overview-gauge[data-level="high"] i {background:linear-gradient(90deg,var(--fill) 0 40%,rgb(var(--bone-96)) 50%,var(--fill) 60% 100%) 0 0/300% 100%}
@media(prefers-reduced-motion:no-preference) {
  .overview-gauge[data-level="high"] i {animation:gauge-shimmer 2.4s linear infinite}
  .overview-gauge[data-level="full"] .gauge-bar {animation:gauge-full 1.4s ease-in-out infinite}
  @keyframes gauge-shimmer {0% {background-position:100% 0} 100% {background-position:-100% 0}}
  @keyframes gauge-full {50% {box-shadow:inset 0 0 0 1px rgb(var(--blood-67)),0 0 10px rgb(var(--blood-67) / .6)}}
}

/* The Grave Lottery as a popup over Home: its panel moves into this dialog, which scrolls on short screens. */
.briefing.lottery-popup {width:min(760px,calc(100% - 24px));max-height:calc(100dvh - 32px);overflow:auto}
.lottery-popup form {padding:0 0 16px}
.lottery-popup .panel {margin:0;border:0;background:none;box-shadow:none}
.lottery-popup form {padding-bottom:0}
.lottery-popup .briefing-actions {position:sticky;bottom:0;z-index:2;margin:0;padding:10px 16px;background:linear-gradient(transparent,rgb(var(--stone-17)) 35%)}

/* A relic card shows its name and price and is picked with a tap; its ? note holds the Deathless odds and blessing. */
.relic-title {display:flex;align-items:center;gap:6px;min-width:0}
.info-note .relic-tip-line {display:block;font-size:14px}
.info-note .relic-boon {color:rgb(var(--gold-78));margin-top:2px}

.info-note .relic-tip-odds {color:rgb(var(--gold-83));font-weight:600}
.relic-card {cursor:pointer}
.relic-card:focus-visible {outline:2px solid var(--gold-bright);outline-offset:2px}
.relic-card.picked {border-color:rgb(var(--gold-83));box-shadow:0 0 0 1px rgb(var(--gold-83)),0 0 18px rgb(var(--gold-83) / .25)}
.relic-card.dear .relic-price {color:rgb(var(--bone-69))}
/* One Draw and one Speed draw, under the stage, stake the picked relic. */
.lottery-draw-bar {display:flex;flex-wrap:wrap;gap:10px;margin:12px 16px 0}
.lottery-draw-bar button {flex:1 1 140px;min-height:44px;font-size:15px}
/* The stage before a draw: the picked relic's five rarities and what each pays. */
.lottery-pick {padding:20px 16px}
.lottery-pick strong {margin:8px 0 4px}
.lottery-pick p {font-size:15px;color:rgb(var(--bone-83));margin-bottom:12px}
.pick-rarities {list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;max-width:640px}
.pick-rarities li {display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border:1px solid color-mix(in srgb,var(--tone) 45%,transparent);border-radius:4px;background:color-mix(in srgb,var(--tone) 8%,rgb(var(--stone-17)))}
.pick-rarities li i {width:8px;height:8px;background:var(--tone);transform:rotate(45deg)}
.pick-rarities li span {font-size:11px;letter-spacing:1px}
.pick-rarities li b {font:normal 700 15px/1.2 system-ui,sans-serif;color:var(--ink);letter-spacing:0;font-variant-numeric:tabular-nums}
.pick-rarities li small {font-size:12px;letter-spacing:0;color:var(--muted);text-transform:none}
@media(max-width:560px) {.pick-rarities {grid-template-columns:repeat(2,minmax(0,1fr))}.pick-rarities li.gold {grid-column:1/-1}}
/* The header rank's quick Hall: the top five on Dark Energy gained, then the places around the player. */
.hall-quick-you {margin:-4px 0 0;font:italic 15px/1.45 Georgia,serif;color:rgb(var(--bone-83))}
.hall-quick-list {display:grid;gap:0;margin:0;padding:4px 0;list-style:none;border:1px solid rgb(var(--bone-32));border-radius:3px;background:rgb(var(--stone-15) / .55)}
.hall-quick-list li {display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:7px 12px;font-size:15px;color:rgb(var(--bone-83))}
.hall-quick-list li+li {border-top:1px solid rgb(var(--stone-26))}
.hall-quick-list .hq-rank {font:600 17px/1 Georgia,serif;color:var(--gold);text-align:right;font-variant-numeric:tabular-nums}
.hall-quick-list li[data-place="1"] .hq-rank {color:var(--gold-bright);text-shadow:0 0 10px rgb(var(--gold-78) / .4)}
.hall-quick-list .hq-name {min-width:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;text-decoration:underline dotted rgb(var(--gold-46));text-underline-offset:3px}
.hall-quick-list .hq-name:hover,.hall-quick-list .hq-name:focus-visible {color:var(--gold-bright)}
.hall-quick-list b {font:600 14px Georgia,serif;color:rgb(var(--bone-83));text-align:right;font-variant-numeric:tabular-nums}
.hall-quick-list li.you {background:linear-gradient(90deg,rgb(var(--bone-40) / .4),rgb(var(--bone-40) / 0));color:var(--gold-bright)}
.hall-quick-list li.you b {color:var(--green)}
.hall-quick-list li.hq-gap {display:block;padding:2px 12px;text-align:center;color:rgb(var(--gold-46));font-size:15px;letter-spacing:4px}
.hall-quick-list li.hq-empty {display:block;padding:18px 12px;text-align:center;font:italic 15px/1.5 Georgia,serif;color:rgb(var(--bone-83))}
@media (max-width:560px) {
  .hall-quick form {padding:20px 16px}
  .hall-quick-list li {grid-template-columns:30px minmax(0,1fr) auto;gap:8px;padding:7px 10px}
  .hall-quick .briefing-actions button {flex:1 1 auto}
}

/* ——— The chat (public/chat.js) ——— a glass pane over the game: moved, resized and restyled by the player. */
.chat {--chat-font:15px;--chat-alpha:.9;position:fixed;z-index:30;left:16px;bottom:16px;width:400px;height:300px;display:flex;flex-direction:column;min-width:0;
  border:1px solid rgb(var(--gold-46));border-radius:10px;overflow:hidden;color:var(--ink);font-size:var(--chat-font);line-height:1.4;
  background:linear-gradient(180deg,rgb(var(--stone-26) / calc(var(--chat-alpha) * .9)),rgb(var(--stone-15) / var(--chat-alpha)) 40%);
  box-shadow:0 14px 40px rgb(var(--stone-0) / .6),inset 0 1px rgb(var(--gold-87) / .12),0 0 0 1px rgb(var(--stone-0) / .5);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2)}
.chat[data-face="serif"] .chat-log,.chat[data-face="serif"] .chat-form input {font-family:Georgia,'Times New Roman',serif}
.chat[data-face="mono"] .chat-log,.chat[data-face="mono"] .chat-form input {font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-size:calc(var(--chat-font) * .93)}
.chat.dragging {user-select:none;box-shadow:0 20px 50px rgb(var(--stone-0) / .75),0 0 0 1px rgb(var(--gold-66))}
.chat.offline .chat-head:after {content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,rgb(var(--ember-71)),transparent);background-size:200% 100%;animation:chat-wait 1.4s linear infinite}
@keyframes chat-wait {to {background-position:-200% 0}}
.chat-head {position:relative;display:grid;gap:4px;padding:5px 6px 6px 4px;border-bottom:1px solid rgb(var(--gold-46) / .6);cursor:grab;touch-action:none;
  background:linear-gradient(180deg,rgb(var(--bone-36) / .55),rgb(var(--stone-20) / .3))}
.chat.dragging .chat-head {cursor:grabbing}
.chat-bar {display:flex;align-items:center;gap:6px;min-width:0}
.chat-title {display:inline-flex;align-items:center;gap:6px;font:16px Georgia,serif;color:var(--gold-bright);letter-spacing:.4px}
.chat-title .icon {width:17px;height:17px;color:var(--gold)}
.chat-grip {color:rgb(var(--bone-55));display:flex}
.chat-grip .icon {width:16px;height:16px}
.chat-tabs {display:flex;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none;padding-left:2px}
.chat-tabs::-webkit-scrollbar {display:none}
.chat-tab {flex:none;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border:1px solid transparent;border-radius:14px;background:none;color:rgb(var(--bone-77));font-size:13px;white-space:nowrap;cursor:pointer}
.chat-tab:hover {color:var(--gold-bright);background:rgb(var(--gold-78) / .08)}
.chat-tab[aria-selected="true"] {color:var(--gold-bright);border-color:rgb(var(--gold-55));background:rgb(var(--gold-78) / .14);box-shadow:inset 0 0 10px rgb(var(--gold-78) / .12)}
.chat-count {display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:rgb(var(--bone-40));color:rgb(var(--stone-88));font:600 11px 'Segoe UI',Arial,sans-serif}
.chat-count:empty {display:none}
.chat-count-hot {background:rgb(var(--arcane-62));color:rgb(var(--stone-100));box-shadow:0 0 8px rgb(var(--arcane-67) / .7)}
.chat-tools {display:flex;align-items:center;gap:2px;flex:none;margin:0 8px 0 auto}
.chat-online {font-size:12px;color:rgb(var(--moss-74));padding:0 4px;white-space:nowrap}
.chat-online:empty {display:none}
.chat-tool {position:relative;display:inline-flex;align-items:center;gap:4px;height:28px;min-width:28px;padding:0 5px;border:1px solid transparent;border-radius:6px;background:none;color:rgb(var(--bone-77));cursor:pointer}
.chat-tool .icon {width:17px;height:17px}
.chat-tool:hover,.chat-toggle[aria-expanded="true"] {color:var(--gold-bright);border-color:rgb(var(--gold-46));background:rgb(var(--gold-78) / .1)}
.chat-tool:active {filter:brightness(.85)}
.chat-commands span {font-size:12.5px;font-weight:600;letter-spacing:.3px}
.chat-tool .chat-count {position:absolute;top:-3px;right:-4px;min-width:15px;height:15px;font-size:11px;padding:0 3px;background:rgb(var(--moss-64));color:rgb(var(--stone-15))}
.chat-ticker {display:none;align-items:center;gap:8px;width:100%;height:40px;padding:0 10px;border:0;background:none;color:rgb(var(--bone-83));font-size:14px;text-align:left;cursor:pointer}
.chat-ticker>span {flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-ticker .icon {width:18px;height:18px;color:var(--gold)}
.chat-ticker:hover {color:var(--gold-bright)}
.chat.minimized {border-radius:20px}
.chat.minimized>*:not(.chat-ticker) {display:none!important}
.chat.minimized .chat-ticker {display:flex}
.chat-body {position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.chat-log {flex:1;min-height:0;margin:0;padding:6px 10px 8px;list-style:none;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgb(var(--bone-40)) transparent}
.chat-line {padding:2px 4px;margin:0 -4px;border-radius:4px;overflow-wrap:anywhere;animation:chat-in .25s ease-out}
@keyframes chat-in {from {opacity:0;transform:translateY(4px)}}
.chat-line:hover {background:rgb(var(--stone-88) / .04)}
.chat-time {white-space:nowrap;margin-right:6px;font-size:calc(var(--chat-font) * .78);color:rgb(var(--bone-55));font-variant-numeric:tabular-nums}
.chat-badge {width:calc(var(--chat-font) * 1.2);height:calc(var(--chat-font) * 1.2);margin-right:3px;vertical-align:-.3em}
.chat-badge-premium {filter:drop-shadow(0 0 3px rgb(var(--arcane-67) / .8));animation:chat-gem 3.5s ease-in-out infinite}
.chat-badge-owner {filter:drop-shadow(0 0 3px rgb(var(--gold-83) / .7))}
.chat-badge-admin {filter:drop-shadow(0 0 3px rgb(var(--moss-78) / .7))}
@keyframes chat-gem {50% {filter:drop-shadow(0 0 6px rgb(var(--arcane-78)))}}
.chat-name {padding:0;border:0;background:none;color:var(--gold-bright);font:inherit;font-weight:600;cursor:pointer}
.chat-name:hover {text-decoration:underline;text-underline-offset:3px}
.chat-sep {color:rgb(var(--bone-62))}
.chat-text {color:rgb(var(--stone-88))}
.chat-me .chat-text,.chat-me .chat-name {font-style:italic}
.chat-me .chat-text {color:rgb(var(--bone-83))}
.chat-whisper,.chat-whisper .chat-text,.chat-friends .chat-text,.chat-friends-out .chat-text {color:rgb(var(--arcane-82))}
.chat-whisper .chat-name,.chat-friends .chat-name {color:rgb(var(--arcane-90))}
.chat-dir {color:rgb(var(--arcane-72));font-size:.9em}
.chat-friends-out .chat-dir,.chat-friends .chat-dir {color:rgb(var(--moss-74))}
.chat-system .chat-text,.chat-ban .chat-text {color:var(--gold)}
.chat-ban {border-left:2px solid rgb(var(--blood-53));padding-left:8px}
.chat-notice .chat-text,.chat-event .chat-text,.chat-presence .chat-text {color:rgb(var(--bone-69));font-style:italic}
/* System tab: the game's event log (state.activity) in the chat's own type, newest at the bottom. */
.chat-game .chat-text {color:rgb(var(--bone-83))}
.chat-game:last-child .chat-text {color:rgb(var(--moss-87))}
body.chat-events #chronicle {display:none}
.chat-error .chat-text {color:rgb(var(--blood-67))}
.chat-mention {background:rgb(var(--gold-78) / .1);box-shadow:inset 2px 0 rgb(var(--gold-76))}
.chat-gift {display:flex;gap:10px;align-items:center;margin:4px -4px;padding:8px 10px;border:1px solid rgb(var(--arcane-50));border-radius:8px;
  background:linear-gradient(115deg,rgb(var(--arcane-37) / .7),rgb(var(--stone-20) / .6) 60%,rgb(var(--arcane-37) / .5));box-shadow:0 0 16px rgb(var(--arcane-52) / .35)}
.chat-gift-icon {flex:none;filter:drop-shadow(0 0 6px rgb(var(--arcane-67)))}
.chat-gift-card {display:grid;gap:2px}
.chat-gift-card b {color:rgb(var(--arcane-90));font-weight:600}
.chat-gift-card q,.chat-ban q {color:rgb(var(--stone-88));font-style:italic}
.chat-empty {padding:18px 8px;color:rgb(var(--bone-62));font-style:italic;text-align:center}
.chat-jump {position:absolute;left:50%;bottom:8px;transform:translateX(-50%);padding:4px 12px;border:1px solid rgb(var(--gold-55));border-radius:14px;background:rgb(var(--stone-20));color:var(--gold-bright);font-size:13px;cursor:pointer}
.chat-panel {position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;gap:8px;padding:10px 12px;overflow-y:auto;background:rgb(var(--stone-17) / .97)}
.chat-panel header {display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.chat-panel header b {font:17px Georgia,serif;color:var(--gold-bright);font-weight:400}
.chat-panel header>span {font-size:12px;color:var(--muted)}
.chat-panel-actions {display:flex;gap:6px}
.chat-panel .small-button {padding:5px 10px;font-size:13px}
.chat-panel-note {font-size:13px;margin-top:auto}
.chat-friend-list {list-style:none;margin:0;padding:0;display:grid;gap:4px}
.chat-friend {display:grid;grid-template-columns:auto auto auto 1fr auto;align-items:center;gap:7px;padding:5px 6px;border:1px solid rgb(var(--bone-32));border-radius:6px;background:rgb(var(--stone-20) / .6)}
.chat-friend-place {color:rgb(var(--bone-62));font-size:13px;min-width:2ch;text-align:right}
.chat-dot {width:8px;height:8px;border-radius:50%;background:rgb(var(--bone-40))}
.chat-friend.online .chat-dot {background:rgb(var(--moss-78));box-shadow:0 0 6px rgb(var(--moss-78))}
.chat-friend-note {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0;border:0;background:none;color:rgb(var(--bone-77));font-size:13px;font-style:italic;text-align:left;cursor:pointer}
.chat-friend-note.empty {color:rgb(var(--bone-55))}
.chat-friend-note:hover {color:var(--gold-bright)}
.chat-setting {display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;color:rgb(var(--bone-83))}
.chat-setting input[type="range"] {flex:1;max-width:170px;accent-color:rgb(var(--gold-66))}
.chat-check {justify-content:flex-start}
.chat-check input {accent-color:rgb(var(--gold-66))}
.chat-steps {display:inline-flex;align-items:center;gap:6px}
.chat-steps output {min-width:3ch;text-align:center;color:var(--gold-bright)}
.chat-steps [aria-pressed="true"] {border-color:var(--gold-bright);color:var(--gold-bright)}
/* Chat settings: a floating card beside the chat window (placed by placeOptions in chat.js), so changes show live. */
.chat-options {position:fixed;z-index:31;left:16px;top:16px;width:290px;max-height:calc(100vh - 16px);overflow-y:auto;display:flex;flex-direction:column;gap:9px;padding:10px 12px 12px;
  border:1px solid rgb(var(--gold-46));border-radius:10px;background:linear-gradient(180deg,rgb(var(--stone-26)),rgb(var(--stone-15)) 45%);box-shadow:0 12px 32px rgb(var(--stone-0) / .55);color:var(--ink);font-size:14px}
.chat-options[hidden] {display:none}
.chat-options header {display:flex;align-items:center;gap:8px}
.chat-options header b {font:17px Georgia,serif;color:var(--gold-bright);font-weight:400}
.chat-options header>span {flex:1;font-size:12px;color:var(--muted)}
.chat-options .small-button {padding:5px 10px;font-size:13px}
.chat-options-note {margin:0;font-size:13px;color:rgb(var(--bone-62))}
@media (max-width: 720px) {
  .chat-options {left:8px!important;right:8px;top:calc(8px + env(safe-area-inset-top))!important;width:auto;z-index:18;
    max-height:calc(100dvh - min(58vh,480px) - 57px - 24px - env(safe-area-inset-bottom) - env(safe-area-inset-top))}
}
.chat-guest,.chat-banned {display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-top:1px solid rgb(var(--gold-46) / .6);font-size:13.5px;color:rgb(var(--bone-83))}
.chat-banned {color:rgb(var(--blood-67));background:rgb(var(--blood-27) / .5)}
.chat-form {display:flex;align-items:center;gap:6px;padding:6px;border-top:1px solid rgb(var(--gold-46) / .6);background:rgb(var(--stone-15) / .6)}
.chat-form input {flex:1;min-width:0;height:34px;padding:0 10px;border:1px solid rgb(var(--bone-36));border-radius:17px;background:rgb(var(--stone-15) / .9);color:var(--ink);font-size:var(--chat-font)}
.chat-form input:focus {outline:none;border-color:rgb(var(--gold-66));box-shadow:0 0 0 3px rgb(var(--gold-78) / .15)}
.chat-form input:disabled {opacity:.5}
.chat-plus,.chat-send {flex:none;display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid rgb(var(--gold-55));border-radius:50%;background:linear-gradient(rgb(var(--bone-36)),rgb(var(--stone-20)));color:var(--gold-bright);cursor:pointer}
.chat-send {background:linear-gradient(rgb(var(--gold-55)),rgb(var(--gold-46)))}
.chat-plus .icon,.chat-send .icon {width:17px;height:17px}
.chat-plus:hover,.chat-send:hover,.chat-plus[aria-expanded="true"] {filter:brightness(1.2);border-color:var(--gold-bright)}
.chat-plus:active,.chat-send:active {filter:brightness(.85)}
.chat-target {flex:none;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 9px;border:1px solid rgb(var(--arcane-50));border-radius:14px;background:rgb(var(--arcane-37) / .6);color:rgb(var(--arcane-90));font-size:13px;cursor:pointer}
.chat-suggest,.chat-actions {position:absolute;left:6px;right:6px;bottom:48px;z-index:3;display:grid;max-height:60%;overflow-y:auto;padding:4px;border:1px solid rgb(var(--gold-55));border-radius:8px;background:rgb(var(--stone-17) / .98);box-shadow:0 -8px 24px rgb(var(--stone-0) / .6)}
.chat-suggestion {display:grid;gap:1px;padding:6px 8px;border:0;border-radius:5px;background:none;text-align:left;cursor:pointer;color:rgb(var(--bone-77));font-size:13px}
.chat-suggestion code {color:var(--gold-bright);font-size:14px}
.chat-suggestion[aria-selected="true"],.chat-suggestion:hover {background:rgb(var(--gold-78) / .12)}
.chat-actions {grid-template-columns:1fr 1fr;gap:2px}
.chat-menu {position:fixed;z-index:35;display:grid;min-width:190px;padding:5px;border:1px solid rgb(var(--gold-55));border-radius:8px;background:rgb(var(--stone-17) / .98);box-shadow:0 12px 32px rgb(var(--stone-0) / .7)}
.chat-menu-title {padding:5px 9px 7px;margin-bottom:3px;border-bottom:1px solid rgb(var(--bone-32));font:17px Georgia,serif;color:var(--gold-bright);font-weight:400}
.chat-menu-item {padding:7px 9px;border:0;border-radius:5px;background:none;color:rgb(var(--stone-88));font-size:14px;text-align:left;cursor:pointer}
.chat-menu-item:hover,.chat-menu-item:focus-visible {background:rgb(var(--gold-78) / .12);color:var(--gold-bright);outline:none}
.chat-menu-gift {color:rgb(var(--arcane-82))}
.chat-menu-danger {color:rgb(var(--blood-67))}
.chat-resize {position:absolute;right:0;top:0;width:14px;height:14px;cursor:nesw-resize;touch-action:none;background:linear-gradient(225deg,rgb(var(--gold-66)) 0 2px,transparent 2px 5px,rgb(var(--gold-66) / .6) 5px 6px,transparent 6px)}
.chat.phone .chat-resize,.chat.phone .chat-grip {display:none}
/* Docked: the chat runs the length of one edge and the game makes room (body padding from --chat-<side>). */
.chat[class*="docked-"] {border-radius:0;box-shadow:0 0 28px rgb(var(--stone-0) / .6)}
.chat.docked-left {border-width:0 1px 0 0}
.chat.docked-right {border-width:0 0 0 1px}
.chat.docked-top {border-width:0 0 1px}
.chat.docked-bottom {border-width:1px 0 0}
.chat[class*="docked-"] .chat-resize {z-index:3;background:none}
.chat[class*="docked-"] .chat-resize:hover,.chat[class*="docked-"].dragging .chat-resize {background:rgb(var(--gold-66) / .45)}
.chat.docked-left .chat-resize,.chat.docked-right .chat-resize {top:0;width:7px;height:100%;cursor:ew-resize}
.chat.docked-left .chat-resize {right:0}
.chat.docked-right .chat-resize {left:0;right:auto}
.chat.docked-top .chat-resize,.chat.docked-bottom .chat-resize {left:0;width:100%;height:7px;cursor:ns-resize}
.chat.docked-top .chat-resize {top:auto;bottom:0}
.chat.docked-bottom .chat-resize {top:0}
.chat-snap {position:fixed;z-index:29;border:2px dashed rgb(var(--gold-76));background:rgb(var(--gold-66) / .12);pointer-events:none}
.chat-snap[hidden] {display:none}
.chat-snap[data-side="left"] {left:0;top:0;bottom:0;width:380px}
.chat-snap[data-side="right"] {right:0;top:0;bottom:0;width:380px}
.chat-snap[data-side="top"] {left:0;right:0;top:0;height:260px}
.chat-snap[data-side="bottom"] {left:0;right:0;bottom:0;height:260px}
.chat-dock-row {flex-wrap:wrap}
.chat-sides {flex-wrap:wrap}
.chat-sides [aria-pressed="true"] {border-color:var(--gold-bright);color:var(--gold-bright)}
.chat-options.phone .chat-dock-row {display:none}
/* Phones: a bar along the bottom that opens into a sheet; the page makes room for it. */
/* It sits on the tab bar that phones keep along the bottom (57px). */
.chat.phone {left:0!important;right:0;bottom:calc(57px + env(safe-area-inset-bottom));top:auto!important;width:auto!important;height:min(58vh,480px)!important;border-radius:14px 14px 0 0;border-bottom:0;z-index:17}
.chat.phone.minimized {height:44px!important;border-radius:0}
.chat.phone .chat-head {cursor:default}
.chat.phone .chat-commands span {display:none}
.chat.phone .chat-form input {font-size:16px}
body.chat-docked-phone .game-shell {padding-bottom:calc(110px + env(safe-area-inset-bottom))}
body.chat-docked-phone .toast {bottom:120px}
.chat-help {width:min(680px,calc(100% - 24px))}
.chat-help-list {display:grid;gap:14px;margin:14px 0;max-height:58vh;overflow-y:auto;padding-right:4px}
.chat-help-group h3 {font-size:17px;color:var(--gold-bright);margin-bottom:6px}
.chat-help-group dl {display:grid;grid-template-columns:230px 1fr;gap:6px 14px;margin:0}
.chat-help-find {margin:12px 0 0}
@media(max-width:560px) {.chat-help-group dl {grid-template-columns:1fr;gap:2px}.chat-help-group dd {margin-bottom:8px}}
.chat-help-group dt {display:grid;gap:2px;align-content:start}
.chat-help-group dt small {font-size:12px;color:rgb(var(--bone-62))}
.chat-help-group dd {margin:0;font-size:14px;color:rgb(var(--bone-83))}
.chat-help-use {justify-self:start;padding:3px 8px;border:1px solid rgb(var(--gold-46));border-radius:5px;background:rgb(var(--stone-15));cursor:pointer}
.chat-help-use code {color:var(--gold-bright);font-size:14px}
.chat-help-use:hover {border-color:var(--gold-bright)}
.chat-badge-key {display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:6px 0 0;padding:0;font-size:14px;color:rgb(var(--bone-83))}
.chat-badge-key li {display:flex;align-items:center;gap:6px}
.chat-field {display:grid;gap:4px;margin-top:10px;font-size:14px;color:rgb(var(--bone-83))}
.chat-field input {height:38px;padding:0 10px;border:1px solid rgb(var(--bone-36));border-radius:4px;background:rgb(var(--stone-15));color:var(--ink);font-size:15px}
.chat-minutes {display:flex;flex-wrap:wrap;align-items:end;gap:6px;margin-top:10px}
.chat-minutes-field {margin-top:0}
.chat-minutes-field input {width:110px}
.chat-error {min-height:1.4em;margin-top:8px;color:rgb(var(--blood-67));font-size:14px}
.chat-gift-dialog {width:min(460px,calc(100% - 24px));border-color:rgb(var(--arcane-50));box-shadow:0 0 60px rgb(var(--arcane-52) / .35),0 18px 60px rgb(var(--stone-0) / .87)}
.chat-gift-art {display:grid;place-items:center;margin-bottom:6px}
.chat-gift-art img {filter:drop-shadow(0 0 16px rgb(var(--arcane-67)));animation:chat-gem 3.5s ease-in-out infinite}
.chat-gift-plans {display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.chat-gift-plan {display:grid;gap:2px;padding:9px;border:1px solid rgb(var(--arcane-50));border-radius:6px;background:rgb(var(--arcane-37) / .35);cursor:pointer;text-align:center}
.chat-gift-plan input {justify-self:center;accent-color:rgb(var(--arcane-62))}
.chat-gift-plan:has(input:checked) {border-color:rgb(var(--arcane-82));box-shadow:0 0 12px rgb(var(--arcane-62) / .5)}
.chat-gift-plan strong {color:rgb(var(--arcane-90));font-weight:600;font-size:14px}
.chat-gift-plan small {color:var(--muted);font-size:12px}
.chat-gift-sign {display:flex;gap:16px;margin:12px 0 0;padding:8px 10px;border:1px solid rgb(var(--bone-32));border-radius:6px;font-size:14px}
.chat-gift-sign legend {padding:0 4px;color:var(--muted);font-size:13px}
.chat-gift-sign label {display:flex;align-items:center;gap:6px}
.chat-gift-preview {margin-top:10px;padding:8px 10px;border-left:2px solid rgb(var(--arcane-62));background:rgb(var(--arcane-37) / .3);font-style:italic;font-size:14px;color:rgb(var(--arcane-90))}
@media (prefers-reduced-motion: reduce) {.chat-line,.chat-badge-premium,.chat-gift-art img {animation:none}}
.admin-chat-reports {list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.admin-chat-report {display:grid;gap:6px;padding:10px;border:1px solid rgb(var(--bone-32));border-radius:5px;background:rgb(var(--stone-15) / .6)}
.admin-chat-head {display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:14px;color:var(--muted)}
.admin-chat-head b {color:var(--gold-bright);font-size:15px}
.admin-chat-banned {color:rgb(var(--blood-67))}
.admin-chat-report q {font-style:italic;color:rgb(var(--stone-88));font-size:14px}
.admin-chat-lines {list-style:none;margin:0;padding:6px 8px;display:grid;gap:2px;max-height:160px;overflow-y:auto;border-left:2px solid rgb(var(--bone-36));font-size:13.5px;color:rgb(var(--bone-83))}
.admin-chat-channel {color:rgb(var(--bone-62));font-size:12px}
.admin-chat-actions {display:flex;gap:8px;flex-wrap:wrap}

/* The coffin streak's multiplier as a showpiece (public/coffin-mult.js): a gilded number in a glowing seal that
   burns hotter by tier (gold, ember, blood, arcane), punches out with a ring and sparks on each rise, and shimmers. */
.mult-seal {--mult-size:54px;--hot:var(--gold-83);--glow:var(--gold-76);--deep:var(--gold-55);position:relative;display:inline-grid;place-items:center;min-width:calc(var(--mult-size) * 3.2);padding:calc(var(--mult-size) * .22) calc(var(--mult-size) * .4);isolation:isolate}
.mult-seal[data-tier="2"] {--hot:var(--ember-75);--glow:var(--ember-68);--deep:var(--ember-48)}
.mult-seal[data-tier="3"] {--hot:var(--blood-67);--glow:var(--blood-67);--deep:var(--blood-38)}
.mult-seal[data-tier="4"] {--hot:var(--arcane-78);--glow:var(--arcane-67);--deep:var(--arcane-37)}
.mult-aura {position:absolute;inset:0;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgb(var(--glow) / .38),rgb(var(--glow) / .12) 55%,rgb(var(--glow) / 0))}
.mult-value {display:flex;align-items:baseline;gap:2px;font:900 var(--mult-size)/1 Georgia,'Times New Roman',serif;font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap;
  background:linear-gradient(180deg,rgb(var(--bone-96)) 0 18%,rgb(var(--hot)) 48%,rgb(var(--deep)) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgb(var(--stone-0))) drop-shadow(0 0 14px rgb(var(--glow) / .65))}
.mult-x {font-size:.55em;margin-left:2px}
.mult-ring {position:absolute;left:50%;top:50%;width:calc(var(--mult-size) * 2);height:calc(var(--mult-size) * 2);margin:calc(var(--mult-size) * -1) 0 0 calc(var(--mult-size) * -1);border:3px solid rgb(var(--hot));border-radius:50%;opacity:0;pointer-events:none}
.mult-sparks {position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.mult-sparks i {position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:rgb(var(--bone-96));box-shadow:0 0 8px 2px rgb(var(--hot));opacity:0}
.mult-sparks i:nth-child(1) {--a:0deg}
.mult-sparks i:nth-child(2) {--a:36deg}
.mult-sparks i:nth-child(3) {--a:72deg}
.mult-sparks i:nth-child(4) {--a:108deg}
.mult-sparks i:nth-child(5) {--a:144deg}
.mult-sparks i:nth-child(6) {--a:180deg}
.mult-sparks i:nth-child(7) {--a:216deg}
.mult-sparks i:nth-child(8) {--a:252deg}
.mult-sparks i:nth-child(9) {--a:288deg}
.mult-sparks i:nth-child(10) {--a:324deg}
.coffin-streak[data-mode="locked"] .mult-seal,.coffin-streak[data-mode="offer"] .mult-seal {filter:saturate(.35) brightness(.8)}
@media(prefers-reduced-motion:no-preference) {
  .mult-seal[data-tier="3"] .mult-aura,.mult-seal[data-tier="4"] .mult-aura {animation:mult-throb 1.6s ease-in-out infinite}
  .mult-seal[data-tier="4"] .mult-value {animation:mult-hue 3s linear infinite}
  .mult-seal.rise .mult-value {animation:mult-punch .7s cubic-bezier(.2,1.8,.4,1)}
  .mult-seal[data-tier="4"].rise .mult-value {animation:mult-punch .7s cubic-bezier(.2,1.8,.4,1),mult-hue 3s linear infinite}
  .mult-seal.rise .mult-ring {animation:mult-ring .8s ease-out}
  .mult-seal.rise .mult-sparks i {animation:mult-spark .9s ease-out}
  .mult-seal.rise .mult-aura {animation:mult-flare .9s ease-out}
  @keyframes mult-punch {0% {transform:scale(1)} 30% {transform:scale(1.45) rotate(-4deg)} 55% {transform:scale(.94) rotate(2deg)} 100% {transform:none}}
  @keyframes mult-ring {0% {opacity:.9;transform:scale(.3)} 100% {opacity:0;transform:scale(1.6)}}
  @keyframes mult-spark {0% {opacity:1;transform:rotate(var(--a)) translateX(10px) scale(1.2)} 100% {opacity:0;transform:rotate(var(--a)) translateX(calc(var(--mult-size) * 1.6)) scale(.3)}}
  @keyframes mult-flare {0% {transform:scale(1.5);opacity:1} 100% {transform:none}}
  @keyframes mult-throb {50% {transform:scale(1.15);opacity:.75}}
  @keyframes mult-hue {50% {filter:drop-shadow(0 2px 0 rgb(var(--stone-0))) drop-shadow(0 0 22px rgb(var(--spirit-76) / .8))}}
}
/* In the popup the streak stands between the words and the coffins: the seal, then what cashing out pays. */
.coffin-popup-streak {display:grid;justify-items:center;gap:6px;padding:8px 10px 12px;border:1px solid rgb(var(--gold-55));border-radius:3px;background:radial-gradient(ellipse 70% 90% at 50% 40%,rgb(var(--gold-76) / .12),rgb(var(--gold-76) / 0)),rgb(var(--stone-17))}
.coffin-popup-streak .mult-seal {--mult-size:58px}
.coffin-popup-streak .streak-facts {grid-area:auto;width:100%;text-align:center}
@media(max-width:560px) {.coffin-popup-streak .mult-seal {--mult-size:46px}.coffin-popup-streak .streak-facts dd {font-size:14px}}
/* The golem plates (Your golems at the Forge). Each golem is a forged iron plate lit in its element's colour
   (--gp: Iron steel, Fire ember, Blood red, Frost ice): an arched portrait with its tier as a gold medallion,
   the four tiers as a track, its gift, its stats as gauges (the pale end of a gauge is what the next reforge
   adds, the whole gauge its final tier), the banners it may march under, and the anvil tray at its foot.
   Every rule starts at .golem-plates so none of the commanders' roster dioramas change. */
.golem-plates {gap:12px;container-type:inline-size}
.golem-plates>.gp {--gp:var(--spirit-76);position:relative;isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"portrait head" "portrait ability" "stats stats" "strip strip" "forge forge";align-items:start;gap:0 16px;padding:16px 16px 0;overflow:hidden;border:1px solid rgb(var(--bone-36));border-radius:4px;
  background:radial-gradient(ellipse 150px 130px at 64px 70px,rgb(var(--gp) / .2),rgb(var(--gp) / 0) 70%),radial-gradient(ellipse 60% 90% at 100% 0,rgb(var(--gp) / .06),rgb(var(--gp) / 0) 70%),repeating-linear-gradient(115deg,rgb(var(--stone-100) / .012) 0 2px,rgb(var(--stone-0) / 0) 2px 7px),linear-gradient(170deg,rgb(var(--stone-20)),rgb(var(--stone-15)) 70%);
  box-shadow:inset 0 1px rgb(var(--gp) / .22),inset 0 0 0 1px rgb(var(--stone-0) / .5),inset 0 -30px 40px -30px rgb(var(--stone-0) / .7),0 3px 12px rgb(var(--stone-0) / .55);font-size:14px}
.golem-plates>.gp[data-kind="fire"] {--gp:var(--ember-71)}
.golem-plates>.gp[data-kind="blood"] {--gp:var(--blood-53)}
.golem-plates>.gp[data-kind="frost"] {--gp:var(--spirit-89)}
/* A hot seam along the top edge and four rivets in the corners. */
.golem-plates>.gp::before {content:'';position:absolute;z-index:-1;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,rgb(var(--gp) / 0),rgb(var(--gp) / .75) 18%,rgb(var(--gp) / .2) 60%,rgb(var(--gp) / 0))}
.golem-plates>.gp::after {content:'';position:absolute;z-index:-1;inset:6px;pointer-events:none;
  background:radial-gradient(circle at 3px 3px,rgb(var(--bone-62)) 0 1px,rgb(var(--bone-36)) 1.6px,rgb(var(--stone-0) / 0) 2.6px) 0 0/7px 7px no-repeat,radial-gradient(circle at 3px 3px,rgb(var(--bone-62)) 0 1px,rgb(var(--bone-36)) 1.6px,rgb(var(--stone-0) / 0) 2.6px) 100% 0/7px 7px no-repeat}
.golem-plates>.gp:hover {border-color:rgb(var(--bone-40))}

/* The portrait: an arched alcove ringed in gold, the element's light behind it, the tier as a medallion. */
.golem-plates .gp-portrait {grid-area:portrait;position:relative;display:block;margin-bottom:18px}
.golem-plates .gp-portrait .unit-portrait {width:96px;height:120px;border:1px solid rgb(var(--gold-55));border-radius:48px 48px 3px 3px/40px 40px 3px 3px;object-position:center 22%;
  box-shadow:0 0 0 3px rgb(var(--stone-15)),0 0 0 4px rgb(var(--gold-46) / .9),0 0 22px 2px rgb(var(--gp) / .28),0 8px 16px rgb(var(--stone-0) / .85);filter:saturate(1.08) contrast(1.05)}
.golem-plates .gp-portrait::after {content:'';position:absolute;inset:0;border-radius:48px 48px 3px 3px/40px 40px 3px 3px;background:linear-gradient(rgb(var(--stone-0) / 0) 55%,rgb(var(--stone-0) / .55)),radial-gradient(ellipse 70% 40% at 50% 100%,rgb(var(--gp) / .3),rgb(var(--gp) / 0));pointer-events:none}
.golem-plates .gp-medal {position:absolute;z-index:1;left:50%;bottom:-15px;display:grid;place-items:center;width:34px;height:34px;margin-left:-17px;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,rgb(var(--gold-87)),rgb(var(--gold-66)) 42%,rgb(var(--gold-46)) 78%);box-shadow:0 0 0 2px rgb(var(--stone-15)),0 0 0 3px rgb(var(--gold-55)),0 3px 8px rgb(var(--stone-0) / .8),0 0 12px rgb(var(--gp) / .35);
  color:rgb(var(--stone-15));font:700 13px/1 Georgia,serif;letter-spacing:-.3px;text-shadow:0 1px rgb(var(--gold-87) / .6)}

/* Name, number, tier title and the track of four tiers. */
.golem-plates .gp-head {grid-area:head;display:grid;gap:2px;min-width:0}
.golem-plates .gp-name {display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.golem-plates .gp-name b {font:21px/1.15 Georgia,serif;color:rgb(var(--stone-88));text-shadow:0 1px 2px rgb(var(--stone-0))}
.golem-plates .gp-no {flex:none;padding:1px 7px;border:1px solid rgb(var(--bone-36));border-radius:2px;background:rgb(var(--stone-0) / .3);font:12px Georgia,serif;letter-spacing:.6px;color:rgb(var(--bone-62))}
.golem-plates .gp-title {font:italic 15px Georgia,serif;color:rgb(var(--gp))}
.golem-plates .gp-track {position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:280px;margin:8px 0 0;padding:0;list-style:none}
.golem-plates .gp-track li {position:relative;display:grid;justify-items:center;gap:3px;padding:0;border:0;border-radius:0;background:none}
.golem-plates .gp-track li+li::before {content:'';position:absolute;z-index:0;top:6px;right:50%;width:100%;height:2px;margin-right:7px;background:rgb(var(--bone-32))}
.golem-plates .gp-track li:is(.done,.now)+li::before {background:linear-gradient(90deg,rgb(var(--gold-66)),rgb(var(--gold-46)))}
.golem-plates .gp-track li:is(.done,.now)+li:is(.done,.now)::before {background:rgb(var(--gold-66))}
.golem-plates .gp-track i {position:relative;z-index:1;width:10px;height:10px;margin-top:1px;border:1px solid rgb(var(--bone-40));background:rgb(var(--stone-15));transform:rotate(45deg)}
.golem-plates .gp-track .done i {border-color:rgb(var(--gold-66));background:rgb(var(--gold-55))}
.golem-plates .gp-track .now i {width:12px;height:12px;margin-top:0;border-color:rgb(var(--gold-87));background:radial-gradient(circle,rgb(var(--bone-96)),rgb(var(--gold-76)) 60%);box-shadow:0 0 8px rgb(var(--gold-78) / .7),0 0 16px rgb(var(--gp) / .5)}
.golem-plates .gp-track .next i {border-color:rgb(var(--gold-55));border-style:dashed}
.golem-plates .gp-track span {font:11px Georgia,serif;letter-spacing:.5px;color:rgb(var(--bone-55))}
.golem-plates .gp-track :is(.done,.now) span {color:rgb(var(--gold-78))}

/* The gift: its glyph in a small socket, its name in gold. */
.golem-plates .gp-ability {grid-area:ability;display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding:8px 10px;border:1px solid rgb(var(--bone-32));border-left:2px solid rgb(var(--gp) / .8);border-radius:2px;background:linear-gradient(90deg,rgb(var(--gp) / .09),rgb(var(--stone-0) / .15));font-size:14px;line-height:1.4;color:rgb(var(--bone-77));text-wrap:pretty}
.golem-plates .gp-ability b {font:15px Georgia,serif;color:var(--gold-bright)}
.golem-plates .gp-glyph {width:20px;height:20px;margin-top:1px;color:rgb(var(--gp));filter:drop-shadow(0 0 4px rgb(var(--gp) / .5))}

/* Stats as gauges: the bright part is now, the pale part the next reforge, the whole gauge the final tier. */
.golem-plates .gp-stats {grid-area:stats;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 22px;margin-top:16px;padding-top:14px;border-top:1px solid rgb(var(--bone-32))}
.golem-plates .gp-stat {--fill:0;--next:0;display:grid;grid-template-columns:34px minmax(0,1fr) 5ch;align-items:center;gap:8px}
.golem-plates .gp-stat small {font:600 11px 'Segoe UI',Arial,sans-serif;letter-spacing:1.2px;color:rgb(var(--bone-62))}
.golem-plates .gp-stat b {font:16px Georgia,serif;color:rgb(var(--stone-88));text-align:right;font-variant-numeric:tabular-nums}
.golem-plates .gp-bar {position:relative;height:9px;overflow:hidden;border:1px solid rgb(var(--stone-0) / .8);border-radius:1px;background:repeating-linear-gradient(90deg,rgb(var(--stone-0) / 0) 0 calc(25% - 1px),rgb(var(--stone-0) / .7) calc(25% - 1px) 25%),rgb(var(--stone-15));box-shadow:0 1px rgb(var(--bone-32) / .6)}
.golem-plates .gp-bar i {position:absolute;left:0;top:0;bottom:0;transform-origin:0 50%}
.golem-plates .gp-bar-next {width:100%;transform:scaleX(var(--next));background:repeating-linear-gradient(135deg,rgb(var(--gp) / .28) 0 2px,rgb(var(--gp) / .12) 2px 4px)}
.golem-plates .gp-bar-now {width:100%;transform:scaleX(var(--fill));background:linear-gradient(rgb(var(--gold-87)),rgb(var(--gold-76)) 45%,rgb(var(--gold-55)))}

/* The strip: the Bonedust it crushes, and the banners of the legions it can march with. */
.golem-plates .gp-strip {grid-area:strip;display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;margin-top:14px}
.golem-plates .gp-dust {display:flex;align-items:center;gap:7px;max-width:300px;font-size:13px;line-height:1.35;color:rgb(var(--moss-83));text-wrap:pretty}
.golem-plates .gp-dust .icon {width:18px;height:18px;padding:3px;border:1px solid rgb(var(--moss-59) / .5);border-radius:50%;background:rgb(var(--moss-44) / .15);box-sizing:content-box}
.golem-plates .roster-banners {display:flex;flex-direction:column;align-items:flex-end;gap:3px;margin:0}
.golem-plates .roster-banners.solo {flex-direction:row;align-items:center;gap:8px}

/* The anvil tray: what the next tier is called and gives, what it costs (short prices in red), and Reforge. */
.golem-plates .gp-forge {grid-area:forge;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"icon text button" "icon costs button";align-items:center;gap:6px 12px;margin:16px -16px 0;padding:12px 16px 14px;border-top:1px solid rgb(var(--bone-36));
  background:radial-gradient(ellipse 120px 60px at 30px 50%,rgb(var(--ember-60) / .14),rgb(var(--ember-60) / 0) 80%),linear-gradient(rgb(var(--stone-0) / .35),rgb(var(--stone-0) / .15));box-shadow:inset 0 1px rgb(var(--stone-0) / .6)}
.golem-plates .gp-forge-icon {grid-area:icon;width:30px;height:30px;color:rgb(var(--ember-71));filter:drop-shadow(0 0 6px rgb(var(--ember-60) / .6))}
.golem-plates .gp-forge-text {grid-area:text;display:grid;gap:1px;min-width:0}
.golem-plates .gp-eyebrow {font:600 11px 'Segoe UI',Arial,sans-serif;letter-spacing:1.4px;color:rgb(var(--bone-62));text-transform:uppercase}
.golem-plates .gp-forge-text b {font:17px Georgia,serif;color:var(--gold-bright)}
.golem-plates .gp-gain {font-size:13px;color:rgb(var(--moss-83))}
.golem-plates .gp-costs {grid-area:costs;display:flex;flex-wrap:wrap;gap:6px}
.golem-plates .gp-cost {display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 8px;border:1px solid rgb(var(--bone-36));border-radius:13px;background:rgb(var(--stone-15));font-size:13px;color:rgb(var(--bone-83));font-variant-numeric:tabular-nums;white-space:nowrap}
.golem-plates .gp-cost .icon {width:15px;height:15px;color:rgb(var(--gold-66))}
.golem-plates .gp-cost .item-image {width:20px;height:20px;margin-left:-4px}
.golem-plates .gp-cost b {font-weight:600;color:rgb(var(--stone-88))}
.golem-plates .gp-cost.short {border-color:rgb(var(--blood-38));background:rgb(var(--blood-27) / .45);color:rgb(var(--blood-67))}
.golem-plates .gp-cost.short b,.golem-plates .gp-cost.short .icon {color:rgb(var(--blood-67))}
.golem-plates .gp-reforge {grid-area:button;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.golem-plates .gp-reforge .icon {width:18px;height:18px}
.golem-plates .gp-final {grid-template-areas:"icon text";grid-template-columns:auto minmax(0,1fr);background:radial-gradient(ellipse 160px 60px at 30px 50%,rgb(var(--gold-76) / .16),rgb(var(--gold-76) / 0) 80%),linear-gradient(rgb(var(--stone-0) / .35),rgb(var(--stone-0) / .15))}
.golem-plates .gp-final .gp-forge-icon {color:var(--gold-bright);filter:drop-shadow(0 0 6px rgb(var(--gold-78) / .6))}
.golem-plates .gp-final .gp-gain {color:rgb(var(--bone-62))}

/* A plate that was just reforged flares once in its element's light. */
.golem-plates>.gp.gp-reforged {animation:gp-reforged 1.4s ease-out}
.golem-plates>.gp.gp-reforged .gp-medal {animation:gp-medal 1.4s ease-out}
@keyframes gp-reforged {0% {box-shadow:inset 0 0 0 1px rgb(var(--gold-87)),0 0 28px rgb(var(--gp) / .8)} 100% {box-shadow:inset 0 1px rgb(var(--gp) / .22),inset 0 0 0 1px rgb(var(--stone-0) / .5),0 3px 12px rgb(var(--stone-0) / .55)}}
@keyframes gp-medal {0%,20% {box-shadow:0 0 0 2px rgb(var(--stone-15)),0 0 0 3px rgb(var(--gold-87)),0 0 24px 6px rgb(var(--gold-82) / .9)} 100% {box-shadow:0 0 0 2px rgb(var(--stone-15)),0 0 0 3px rgb(var(--gold-55)),0 3px 8px rgb(var(--stone-0) / .8)}}
@media(prefers-reduced-motion:reduce) {.golem-plates>.gp.gp-reforged,.golem-plates>.gp.gp-reforged .gp-medal {animation:none}}

@container (max-width:479px) {
  .golem-plates>.gp {gap:0 12px;padding:12px 12px 0;background-size:auto}
  .golem-plates .gp-portrait {margin-bottom:16px}
  .golem-plates .gp-portrait .unit-portrait,.golem-plates .gp-portrait::after {width:76px;height:95px;border-radius:38px 38px 3px 3px/32px 32px 3px 3px}
  .golem-plates .gp-medal {width:30px;height:30px;margin-left:-15px;bottom:-13px;font-size:12px}
  .golem-plates>.gp {grid-template-areas:"portrait head" "ability ability" "stats stats" "strip strip" "forge forge"}
  .golem-plates .gp-name b {font-size:19px}
  .golem-plates .gp-stats {grid-template-columns:minmax(0,1fr);margin-top:12px;padding-top:12px}
  .golem-plates .gp-strip {flex-direction:column;align-items:flex-start}
  .golem-plates .roster-banners {flex-direction:row;flex-wrap:wrap;align-items:flex-start;column-gap:10px}
  .golem-plates .roster-banner {width:25px;height:32px;padding-top:4px}
  .golem-plates .gp-forge {grid-template-columns:auto minmax(0,1fr);grid-template-areas:"icon text" "costs costs" "button button";margin:14px -12px 0;padding:12px}
  .golem-plates .gp-reforge {justify-content:center}
  .golem-plates .gp-final {grid-template-areas:"icon text"}
}

/* Summoning Altar (public/altar-stage.js, prefix sa-): a stage where the chosen boss stands in its rune circle
   beside the Summon buttons, so a fight plays where it was pressed; the offering tray above it and the roster of
   boss seals below. Figures come from assets/illustrations/bosses.png (3 x 2), mirrored to face the stage. */
.summoning-panel {container:altar/inline-size}
.summoning-panel .sa-tray {display:flex;flex-wrap:wrap;gap:6px;margin:14px 18px 0;padding:0}
.summoning-panel .sa-socket {display:flex;align-items:center;gap:6px;flex:none;padding:4px 10px 4px 5px;border:1px solid rgb(var(--bone-32));border-radius:3px;background:linear-gradient(rgb(var(--stone-15)),rgb(var(--stone-20)));box-shadow:inset 0 2px 4px rgb(var(--stone-0) / .6),0 1px rgb(var(--gold-78) / .06);transition:border-color .2s,box-shadow .2s}
.summoning-panel .sa-socket .item-image {width:26px;height:26px}
.summoning-panel .sa-socket b {font:19px Georgia,serif;color:rgb(var(--bone-83));font-weight:400}
.summoning-panel .sa-socket.empty {opacity:.5}
.summoning-panel .sa-socket.empty img {filter:grayscale(1)}
.summoning-panel .sa-socket.needed {border-color:rgb(var(--gold-55));box-shadow:inset 0 2px 4px rgb(var(--stone-0) / .6),0 0 10px rgb(var(--gold-78) / .2)}
.summoning-panel .sa-socket.needed b {color:var(--gold-bright)}
.summoning-panel .sa-socket.short {border-color:rgb(var(--blood-38));box-shadow:inset 0 2px 4px rgb(var(--stone-0) / .6),0 0 10px rgb(var(--blood-53) / .2)}
.summoning-panel .sa-socket.short b {color:rgb(var(--blood-67))}

.sa-stage {--tier:rgb(var(--gold-78));--rune:rgb(var(--gold-76));position:relative;display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);grid-template-areas:"scene side" "actions actions";margin:12px 18px 0;border:1px solid rgb(var(--gold-46));border-radius:4px;overflow:hidden;background:radial-gradient(ellipse 50% 60% at 23% 82%,rgb(var(--blood-38) / .3),transparent 70%),radial-gradient(ellipse 70% 50% at 50% 0,rgb(var(--bone-40) / .16),transparent 70%),linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-15)));box-shadow:inset 0 1px rgb(var(--gold-76) / .14),inset 0 0 0 1px rgb(var(--stone-0) / .5),0 6px 18px rgb(var(--stone-0) / .55);transition:border-color .3s,box-shadow .3s}
.sa-stage::before {content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 70% at 23% 75%,rgb(var(--ember-48) / .35),transparent 70%);opacity:0;transition:opacity .35s}
/* The scene: the rune circle laid on the floor, the boss standing in it, the drop that rises when it falls. */
.sa-scene {grid-area:scene;position:relative;min-height:284px;overflow:hidden;isolation:isolate;cursor:default}
.sa-scene::before {content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 34% 80% at 50% -10%,rgb(var(--bone-77) / .13),transparent 75%)}
.sa-scene::after {content:'';position:absolute;inset:auto 0 0;height:42%;background:linear-gradient(transparent,rgb(var(--stone-15) / .85));pointer-events:none;z-index:3}
.sa-circle {position:absolute;left:50%;bottom:12px;width:min(92%,250px);aspect-ratio:1;transform:translateX(-50%) perspective(500px) rotateX(70deg);transform-origin:50% 75%;z-index:1}
.sa-runes {width:100%;height:100%;overflow:visible;fill:none;stroke:var(--rune);stroke-width:1.6;filter:drop-shadow(0 0 4px rgb(var(--gold-76) / .55));opacity:.7;transition:opacity .3s,stroke .3s}
.sa-runes .sa-glyphs {stroke-width:5;stroke-dasharray:2 5 7 4 3 6;opacity:.8}
.sa-runes polygon {stroke-width:1.2;opacity:.75}
.sa-runes .sa-core {fill:rgb(var(--gold-76) / .12)}
.sa-ring-outer,.sa-ring-inner {transform-box:fill-box;transform-origin:center}
.sa-glow {position:absolute;left:50%;bottom:26px;width:min(80%,220px);height:60px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgb(var(--gold-76) / .28),transparent);z-index:1;transition:background .3s}
.sa-figure {position:absolute;left:50%;bottom:22px;width:min(92%,236px);aspect-ratio:1;transform:translateX(-50%);z-index:2;display:grid;place-items:center;transition:filter .4s,opacity .4s}
.sa-figure[data-figure]::before {content:'';position:absolute;inset:0;background:url('/assets/illustrations/bosses.png') no-repeat;background-size:300% 200%;transform:scaleX(-1);filter:drop-shadow(0 10px 8px rgb(var(--stone-0) / .85))}
.sa-figure[data-figure="0"]::before {background-position:0 0}
.sa-figure[data-figure="1"]::before {background-position:50% 0}
.sa-figure[data-figure="2"]::before {background-position:100% 0}
.sa-figure[data-figure="3"]::before {background-position:0 100%}
.sa-figure[data-figure="4"]::before {background-position:50% 100%}
.sa-figure[data-figure="5"]::before {background-position:100% 100%}
.sa-figure .relic-art,.sa-figure .item-image {width:58%;height:auto;aspect-ratio:1;border:1px solid rgb(var(--gold-46));border-radius:4px;box-shadow:0 10px 18px rgb(var(--stone-0) / .7)}
.sa-relic {position:absolute;left:50%;bottom:58px;width:min(52%,130px);aspect-ratio:1;transform:translateX(-50%);z-index:4;opacity:0;pointer-events:none;display:grid;place-items:center}
.sa-relic .relic-art,.sa-relic .item-image {width:100%;height:100%;border:1px solid var(--tier);border-radius:5px;box-shadow:0 0 0 1px rgb(var(--stone-0) / .6),0 0 24px var(--tier)}
.sa-slash {position:absolute;left:50%;top:22%;width:62%;height:52%;transform:translateX(-50%);z-index:5;pointer-events:none;opacity:0;background:linear-gradient(135deg,transparent 46%,rgb(var(--bone-96) / .95) 49%,rgb(var(--blood-53)) 51%,transparent 54%)}
.sa-stage[data-blow="1"] .sa-slash {background:linear-gradient(45deg,transparent 46%,rgb(var(--bone-96) / .95) 49%,rgb(var(--blood-53)) 51%,transparent 54%)}
.sa-stage[data-blow="2"] .sa-slash {background:linear-gradient(170deg,transparent 46%,rgb(var(--bone-96) / .95) 49%,rgb(var(--blood-53)) 51%,transparent 54%)}
.sa-embers {position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .3s}
.sa-embers i {position:absolute;bottom:34px;width:4px;height:4px;border-radius:50%;background:rgb(var(--ember-71));box-shadow:0 0 6px rgb(var(--ember-68))}
.sa-embers i:nth-child(1) {left:24%}.sa-embers i:nth-child(2) {left:36%}.sa-embers i:nth-child(3) {left:47%}.sa-embers i:nth-child(4) {left:58%}.sa-embers i:nth-child(5) {left:68%}.sa-embers i:nth-child(6) {left:77%}
/* The banner over the boss: it rises, BATTLE while the blows land, then slain. */
.sa-banner {position:absolute;top:10px;left:50%;z-index:6;transform:translateX(-50%);width:max-content;max-width:calc(100% - 20px);margin:0;padding:5px 14px 5px 12px;display:flex;align-items:center;gap:8px;border:1px solid rgb(var(--blood-53));border-radius:2px;background:linear-gradient(rgb(var(--blood-27)),rgb(var(--stone-15)));box-shadow:0 0 16px rgb(var(--blood-53) / .45),inset 0 1px rgb(var(--blood-67) / .3);font:600 14px 'Segoe UI',Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;color:rgb(var(--bone-96));text-align:center;line-height:1.3}
.sa-banner::before {content:'';flex:none;width:9px;height:9px;border-radius:50%;background:rgb(var(--blood-53));box-shadow:0 0 8px rgb(var(--blood-53))}
.sa-banner.slain {border-color:rgb(var(--gold-55));background:linear-gradient(rgb(var(--stone-26)),rgb(var(--stone-15)));box-shadow:0 0 14px rgb(var(--gold-78) / .3);color:var(--gold-bright)}
.sa-banner.slain::before {background:var(--gold-bright);box-shadow:0 0 8px rgb(var(--gold-87))}
/* The side: the brief while the boss waits, the fight's readout and then its drop. */
.sa-side {grid-area:side;min-width:0;padding:16px 16px 14px 6px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1}
.sa-brief {display:grid;gap:8px;min-width:0}
.sa-stage:not([data-state="idle"]) .sa-brief {display:none}
.sa-name {display:flex;align-items:center;min-width:0}
.sa-name h3 {font-size:23px;line-height:1.15;color:var(--gold-bright);text-shadow:0 2px 3px rgb(var(--stone-0))}
.sa-star {margin-left:8px;color:var(--gold-bright);font:16px Georgia,serif;text-shadow:0 0 8px rgb(var(--gold-82) / .6)}
.sa-epithet {margin-top:-6px;font:italic 15px Georgia,serif;color:rgb(var(--bone-73))}
.sa-row {display:grid;grid-template-columns:104px minmax(0,1fr) auto;align-items:center;gap:8px;min-width:0}
.sa-label {font-size:12px;font-weight:600;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;white-space:nowrap}
.sa-drop {display:flex;align-items:center;gap:6px;min-width:0;grid-column:2/4}
.sa-drop .item-image {width:24px;height:24px;flex:none}
.sa-drop b {font:15px Georgia,serif;font-weight:400;color:rgb(var(--bone-83));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-gauge {display:block;height:6px;border-radius:3px;background:rgb(var(--stone-15));box-shadow:inset 0 1px 2px rgb(var(--stone-0));overflow:hidden}
.sa-gauge i {display:block;height:100%;width:0;border-radius:3px;box-shadow:none;background:linear-gradient(90deg,rgb(var(--gold-55)),rgb(var(--gold-83)))}
.sa-best {min-width:52px;text-align:right;font:16px Georgia,serif;font-weight:400;color:var(--gold-bright)}
.sa-offer {grid-template-columns:minmax(0,1fr);gap:6px}
.sa-needs {display:flex;flex-wrap:wrap;gap:5px}
.sa-need {display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 3px;border:1px solid rgb(var(--blood-38));border-radius:3px;background:rgb(var(--blood-27) / .35);font-variant-numeric:tabular-nums}
.sa-need .item-image {width:22px;height:22px}
.sa-need b {font:16px Georgia,serif;font-weight:400;color:rgb(var(--blood-67))}
.sa-need small {font-size:12px;color:var(--muted)}
.sa-need.met {border-color:rgb(var(--gold-46));background:rgb(var(--stone-15) / .6)}
.sa-need.met b {color:var(--gold-bright)}
.sa-need:not(.met) .item-image {filter:grayscale(1) brightness(.75)}
.sa-ready {display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin-top:2px;padding-top:8px;border-top:1px solid rgb(var(--bone-32) / .6);font-size:14px;color:rgb(var(--moss-74))}
.sa-ready b {font:20px Georgia,serif;font-weight:400;color:rgb(var(--moss-80))}
.sa-ready.short {color:rgb(var(--blood-67))}
.sa-ready small {font-size:14px;color:var(--muted)}
.sa-show {display:grid;gap:10px;min-width:0;cursor:pointer}
.sa-stage[data-state="done"] .sa-show {cursor:default}
.sa-hud-line,.sa-loot-line {display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 8px;min-width:0}
.sa-hud-line b {font:21px Georgia,serif;font-weight:400;color:var(--gold-bright);min-width:0}
.sa-count {font-size:14px;font-weight:600;letter-spacing:1px;color:rgb(var(--blood-67));white-space:nowrap}
.sa-stage[data-state="rolling"] .sa-count,.sa-stage[data-state="done"] .sa-count,.sa-stage[data-state="fallen"] .sa-count {color:var(--muted)}
.sa-hp {position:relative;height:14px;border:1px solid rgb(var(--blood-38));border-radius:2px;background:rgb(var(--stone-15));box-shadow:inset 0 1px 3px rgb(var(--stone-0));overflow:hidden}
.sa-stage:is([data-state="rolling"],[data-state="done"]) .sa-hp {display:none}
.sa-hp i {display:block;height:100%;width:0;border-radius:0;background:linear-gradient(rgb(var(--blood-67)),rgb(var(--blood-53)) 45%,rgb(var(--blood-38)));box-shadow:inset 0 1px rgb(var(--bone-96) / .25);transition:width .16s ease-out}
.sa-pips {display:flex;flex-wrap:wrap;gap:2px}
.sa-pips i {display:block;width:7px;height:7px;border-radius:1px;box-shadow:none;background:rgb(var(--bone-62))}
.sa-pips i.tier-average {background:rgb(var(--stone-88))}
.sa-pips i.tier-good {background:rgb(var(--spirit-69))}
.sa-pips i.tier-great {background:rgb(var(--moss-78))}
.sa-pips i.tier-perfect {background:rgb(var(--gold-87));box-shadow:0 0 5px rgb(var(--gold-87))}
.sa-loot {display:grid;gap:6px;padding-top:10px;border-top:1px solid rgb(var(--bone-32) / .6)}
.sa-loot-line {justify-content:flex-start}
.sa-loot-line b {font:16px Georgia,serif;font-weight:400;color:rgb(var(--bone-83));min-width:0}
.sa-loot-line small {font:italic 14px Georgia,serif;color:var(--muted);white-space:nowrap}
.sa-tier {font:26px Georgia,serif;letter-spacing:2px;color:var(--tier);text-shadow:0 0 14px var(--tier)}
.sa-rollrow {display:flex;align-items:center;gap:10px}
.sa-roll {flex:1;height:10px;border-radius:2px;background:rgb(var(--stone-15));box-shadow:inset 0 1px 2px rgb(var(--stone-0));overflow:hidden}
.sa-roll i {display:block;height:100%;width:0;border-radius:0;background:var(--tier);box-shadow:0 0 10px var(--tier)}
.sa-pct {min-width:58px;text-align:right;font:600 18px Georgia,serif;color:var(--tier)}
.sa-loot-foot {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px}
.sa-loot-foot:has(.sa-badges:empty):has(.sa-reward:empty) {display:none}
.sa-badges {display:flex;flex-wrap:wrap;gap:5px}
.sa-badge {font-size:13px;font-weight:700;letter-spacing:1px;padding:2px 7px;border:1px solid currentColor;border-radius:2px}
.sa-badge.perfect {color:rgb(var(--gold-87));box-shadow:0 0 10px rgb(var(--gold-87) / .35)}
.sa-badge.best {color:rgb(var(--moss-78))}
.sa-badge.burned {color:rgb(var(--arcane-78))}
.sa-reward {font:600 17px Georgia,serif;color:var(--gold-bright);white-space:nowrap}
.sa-summary {font-size:14px;color:var(--muted)}
.sa-summary:empty {display:none}
.sa-close {position:absolute;top:8px;right:8px;width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid rgb(var(--bone-40));border-radius:50%;background:rgb(var(--stone-15) / .8);color:var(--muted);font:20px/1 Georgia,serif;transition:color .15s,border-color .15s,filter .15s}
.sa-close:hover {color:var(--gold-bright);border-color:rgb(var(--gold-55))}
.sa-close:active {filter:brightness(.85)}
.sa-stage[data-state="done"] .sa-hud-line {padding-right:34px}
.sa-stage[data-tier="average"] {--tier:rgb(var(--stone-88))}
.sa-stage[data-tier="low"] {--tier:rgb(var(--bone-62))}
.sa-stage[data-tier="good"] {--tier:rgb(var(--spirit-69))}
.sa-stage[data-tier="great"] {--tier:rgb(var(--moss-78))}
.sa-stage[data-tier="perfect"] {--tier:rgb(var(--gold-87))}
/* The buttons run along the stage's foot, Summon twice the width of the others. */
.sa-actions {grid-area:actions;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:8px;padding:12px 16px 14px;border-top:1px solid rgb(var(--gold-46) / .6);background:linear-gradient(rgb(var(--stone-15) / .5),rgb(var(--stone-15)));position:relative;z-index:1}
.sa-actions button {padding:12px 10px;font-size:16px}
.sa-actions .sa-summon {letter-spacing:1.5px;text-transform:uppercase;border-color:rgb(var(--gold-66));background:linear-gradient(rgb(var(--gold-46)),rgb(var(--bone-36)) 55%,rgb(var(--stone-26)));box-shadow:inset 0 1px rgb(var(--gold-87) / .3),0 0 14px rgb(var(--gold-76) / .18),0 2px 5px rgb(var(--stone-0) / .4)}
.sa-actions .sa-summon .icon {width:20px;height:20px}

/* The fight: the stage's frame and circle turn to blood and fire; the boss shakes under each blow. */
.sa-stage:is([data-state="rising"],[data-state="fighting"]) {border-color:rgb(var(--blood-53));box-shadow:inset 0 1px rgb(var(--blood-67) / .2),inset 0 0 0 1px rgb(var(--stone-0) / .5),0 0 26px rgb(var(--blood-53) / .35)}
.sa-stage:is([data-state="rising"],[data-state="fighting"])::before {opacity:1}
.sa-stage:is([data-state="rising"],[data-state="fighting"]) {--rune:rgb(var(--ember-68))}
.sa-stage:is([data-state="rising"],[data-state="fighting"]) .sa-runes {opacity:1;filter:drop-shadow(0 0 6px rgb(var(--ember-68)))}
.sa-stage:is([data-state="rising"],[data-state="fighting"]) .sa-glow {background:radial-gradient(closest-side,rgb(var(--ember-68) / .5),transparent)}
.sa-stage:is([data-state="rising"],[data-state="fighting"]) .sa-embers {opacity:1}
.sa-stage:is([data-state="fallen"],[data-state="rolling"],[data-state="done"]) .sa-figure {filter:grayscale(1) brightness(.35);opacity:.35}
.sa-stage:is([data-state="rolling"],[data-state="done"]) .sa-relic {opacity:1}
.sa-stage:is([data-state="rolling"],[data-state="done"]) {--rune:var(--tier)}
.sa-stage[data-state="done"] {border-color:var(--tier)}
.sa-stage[data-state="done"][data-tier="perfect"] {box-shadow:inset 0 0 0 1px rgb(var(--stone-0) / .5),0 0 28px rgb(var(--gold-87) / .4)}

/* The roster: every reachable boss as a seal with its figure's head; the chosen one is on the stage. */
.sa-roster {display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,168px),1fr));gap:8px;padding:12px 18px 16px}
.sa-seal {position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:10px;min-width:0;padding:6px 10px 6px 6px;border:1px solid rgb(var(--bone-32));border-radius:3px;background:linear-gradient(rgb(var(--stone-20)),rgb(var(--stone-17)));box-shadow:inset 0 1px rgb(var(--gold-78) / .07);color:var(--ink);text-align:left;transition:border-color .15s,box-shadow .15s,filter .15s}
.sa-seal:hover {border-color:rgb(var(--gold-55));filter:brightness(1.12)}
.sa-seal:active {filter:brightness(.85)}
.sa-seal.chosen {border-color:rgb(var(--gold-66));background:radial-gradient(ellipse at 0 50%,rgb(var(--gold-46) / .3),transparent 70%),linear-gradient(rgb(var(--stone-26)),rgb(var(--stone-17)));box-shadow:inset 0 1px rgb(var(--gold-87) / .2),0 0 12px rgb(var(--gold-76) / .16)}
.sa-seal-art {position:relative;width:52px;height:52px;border:1px solid rgb(var(--bone-36));border-radius:26px 26px 3px 3px;overflow:hidden;background:radial-gradient(ellipse at 50% 90%,rgb(var(--blood-38) / .55),rgb(var(--stone-15)) 75%);display:grid;place-items:center}
.sa-seal-art[data-figure]::before {content:'';position:absolute;inset:0;background:url('/assets/illustrations/bosses.png') no-repeat;background-size:var(--sa-zoom-x,690%) var(--sa-zoom-y,460%);background-position:var(--sa-head);transform:scaleX(-1)}
.sa-seal-art[data-figure="0"] {--sa-head:9.9% 0%}
.sa-seal-art[data-figure="1"] {--sa-head:42.1% 1.3%}
.sa-seal-art[data-figure="2"] {--sa-head:80.1% 0%}
.sa-seal-art[data-figure="3"] {--sa-head:3.9% 65.8%}
.sa-seal-art[data-figure="4"] {--sa-head:46.6% 63.9%}
.sa-seal-art[data-figure="5"] {--sa-head:78% 70.9%}
.sa-seal-art .relic-art,.sa-seal-art .item-image {width:100%;height:100%}
.sa-seal.chosen .sa-seal-art {border-color:rgb(var(--gold-66))}
.sa-seal-text {display:grid;gap:2px;min-width:0}
.sa-seal-text b {font:15.5px Georgia,serif;font-weight:400;line-height:1.2;color:rgb(var(--gold-87))}
.sa-seal-text small {font-size:13px;color:rgb(var(--moss-74))}
.sa-seal.unready .sa-seal-text small {color:var(--muted)}
.sa-seal.unready .sa-seal-art::before {filter:grayscale(.7) brightness(.7)}
.sa-seal-star {position:absolute;top:4px;right:6px;font:13px Georgia,serif;color:var(--gold-bright);text-shadow:0 0 6px rgb(var(--gold-82) / .6)}
.sa-seal.fighting {border-color:rgb(var(--blood-53));box-shadow:0 0 12px rgb(var(--blood-53) / .4)}
.sa-seal.fighting .sa-seal-text small {color:rgb(var(--blood-67));font-weight:600;letter-spacing:1px;text-transform:uppercase}
.sa-waiting {margin:-4px 18px 16px;font-size:14px;color:var(--muted)}

@container altar (max-width:520px) {
  .sa-stage {grid-template-columns:minmax(0,1fr);grid-template-areas:"scene" "actions" "side";margin-inline:12px}
  .sa-actions {border-bottom:1px solid rgb(var(--gold-46) / .6)}
  .sa-scene {min-height:262px}
  .sa-figure {width:min(80%,232px);bottom:18px}
  .sa-side {padding:14px 14px 16px}
  .sa-name h3 {font-size:22px}
  .summoning-panel .sa-tray {margin-inline:12px}
  .sa-roster {grid-template-columns:repeat(2,minmax(0,1fr));padding:12px 12px 14px}
  .sa-seal {grid-template-columns:44px minmax(0,1fr);gap:8px;padding:5px 8px 5px 5px}
  .sa-seal-art {width:44px;height:44px}
  .sa-waiting {margin-inline:12px}
  .sa-actions {padding:10px 12px 12px}
  .sa-actions button {padding:12px 6px;font-size:15px}
  .sa-actions .sa-summon {letter-spacing:.5px;gap:6px}
}
@container altar (max-width:400px) {
  .sa-actions .sa-summon .icon {display:none}
}

@media(prefers-reduced-motion:no-preference) {
  .sa-ring-outer {animation:sa-spin 60s linear infinite}
  .sa-ring-inner {animation:sa-spin 90s linear infinite reverse}
  .sa-stage:is([data-state="rising"],[data-state="fighting"]) .sa-ring-outer {animation-duration:5s}
  .sa-stage:is([data-state="rising"],[data-state="fighting"]) .sa-ring-inner {animation-duration:7s}
  @keyframes sa-spin {to {transform:rotate(360deg)}}
  .sa-figure[data-figure] {animation:sa-breathe 5s ease-in-out infinite}
  @keyframes sa-breathe {0%,100% {transform:translateX(-50%) translateY(0)} 50% {transform:translateX(-50%) translateY(-3px)}}
  .sa-stage[data-state="rising"] .sa-figure {animation:sa-rise .65s cubic-bezier(.2,.8,.3,1)}
  @keyframes sa-rise {0% {transform:translateX(-50%) translateY(38%) scale(.86);opacity:0;filter:brightness(3) sepia(1) hue-rotate(-30deg)} 60% {opacity:1} 100% {transform:translateX(-50%) translateY(0);filter:none}}
  .sa-stage.sa-struck .sa-figure {animation:sa-struck .22s ease-out}
  @keyframes sa-struck {0% {transform:translateX(-50%);filter:none} 25% {transform:translateX(calc(-50% + 7px)) rotate(1.5deg);filter:brightness(2.2) sepia(1) saturate(4) hue-rotate(-40deg)} 60% {transform:translateX(calc(-50% - 4px)) rotate(-1deg)} 100% {transform:translateX(-50%);filter:none}}
  .sa-stage.sa-struck .sa-slash {animation:sa-slash .22s ease-out}
  @keyframes sa-slash {0% {opacity:0;transform:translateX(-50%) scale(.6)} 30% {opacity:1} 100% {opacity:0;transform:translateX(-50%) scale(1.15)}}
  .sa-stage.sa-struck .sa-scene {animation:sa-quake .22s ease-out}
  @keyframes sa-quake {25% {transform:translate(2px,-1px)} 55% {transform:translate(-2px,1px)} 100% {transform:none}}
  .sa-stage[data-state="fallen"] .sa-figure {animation:sa-fall .5s ease-in forwards}
  @keyframes sa-fall {0% {transform:translateX(-50%);filter:brightness(1.6)} 100% {transform:translateX(-50%) translateY(10%) scaleY(.94);filter:grayscale(1) brightness(.35)}}
  .sa-stage[data-state="rolling"] .sa-relic {animation:sa-relic .8s cubic-bezier(.2,.8,.3,1)}
  @keyframes sa-relic {0% {opacity:0;transform:translateX(-50%) translateY(30px) scale(.7)} 100% {opacity:1;transform:translateX(-50%)}}
  .sa-embers i {animation:sa-ember 1.6s ease-out infinite}
  .sa-embers i:nth-child(2) {animation-delay:.5s}.sa-embers i:nth-child(3) {animation-delay:1.1s}.sa-embers i:nth-child(4) {animation-delay:.3s}.sa-embers i:nth-child(5) {animation-delay:.8s}.sa-embers i:nth-child(6) {animation-delay:1.3s}
  @keyframes sa-ember {0% {transform:translateY(0);opacity:0} 20% {opacity:1} 100% {transform:translateY(-170px) translateX(12px);opacity:0}}
  .sa-banner {animation:sa-banner .35s ease-out}
  @keyframes sa-banner {from {transform:translateX(-50%) translateY(-24px);opacity:0} to {transform:translateX(-50%);opacity:1}}
  .sa-stage:is([data-state="rising"],[data-state="fighting"]) .sa-banner::before {animation:sa-beat .7s ease-in-out infinite}
  @keyframes sa-beat {50% {transform:scale(1.5);opacity:.5}}
  .sa-stage.sa-landed {animation:sa-landed .6s ease-out}
  .sa-stage[data-tier="perfect"].sa-landed {animation:sa-landed .6s ease-out 3}
  @keyframes sa-landed {40% {box-shadow:0 0 34px var(--tier),inset 0 0 26px var(--tier)}}
  .sa-stage[data-state="done"] .sa-tier,.sa-stage[data-state="done"] .sa-badge {animation:sa-pop .3s ease-out}
  @keyframes sa-pop {from {transform:scale(1.45);opacity:0} to {transform:none;opacity:1}}
  .sa-pips i {animation:sa-pip .2s ease-out}
  @keyframes sa-pip {from {transform:scale(2.2);opacity:0} to {transform:none;opacity:1}}
  .sa-seal.fighting .sa-seal-art {animation:sa-seal-beat .8s ease-in-out infinite}
  @keyframes sa-seal-beat {50% {box-shadow:0 0 10px rgb(var(--blood-53))}}

/* The worldboss battle scene (docs/worldboss-3d.md): once the 3D battle or the painted stage draws, it shows
   the boss itself, so the portrait stand-in and the CSS embers step aside. The damage numbers stay on top. */
.battle-scene canvas.battle-3d {z-index:0}
.battle-scene canvas.battle-3d[hidden] {display:none}
.battle-scene[data-render] .battle-boss {display:none}
.battle-scene[data-render] .battle-embers:before {display:none}
.battle-scene[data-render="3d"] .battle-hits {right:auto;left:52%;width:30%;height:70%;bottom:auto;top:8%}

/* ——— The Sacrificial Altar (2026-09-30) ——— a crypt chapel you look into. The apse, the altar, its rune ring,
   the fire and the binding seal are drawn in public/assets/altar/; the page layers them and lights them in the
   ritual's colour of the moment: embers while dormant, soulfire green while it burns, violet from 2x
   (.ritual-empowered), blood-gold from 5x (.ritual-ascendant). renderRitual() sets --alt-heat (0 at 1x, 1 from
   10x: the fire climbs and the multiplier swells), --alt-crack (the seal's cracks), --alt-risk (the collapse
   dial) and the ticker --alt-charge (the ring filling toward the next surge). altarFlash() plays one surge
   (.alt-surging), claim (.alt-claimed) or collapse (.alt-collapsed). Every rule is prefixed .alt- or starts at
   #altar / .altar-panel. */
.altar-panel {--alt-heat:0;--alt-crack:0;--alt-risk:0;--alt-charge:0;--hot:var(--ember-71);--glow:var(--ember-48);--deep:var(--blood-27);container:alt / inline-size;position:relative;
  background:radial-gradient(ellipse 90% 300px at 50% 0,rgb(var(--glow) / .09),rgb(var(--glow) / 0) 70%),repeating-linear-gradient(115deg,rgb(var(--stone-100) / .012) 0 2px,rgb(var(--stone-0) / 0) 2px 7px),linear-gradient(175deg,rgb(var(--stone-20)),rgb(var(--stone-15)) 80%)}
.altar-panel.ritual-burning {--hot:var(--moss-84);--glow:var(--moss-73);--deep:var(--moss-44)}
.altar-panel.ritual-empowered {--hot:var(--arcane-78);--glow:var(--arcane-67);--deep:var(--arcane-37)}
.altar-panel.ritual-ascendant {--hot:var(--gold-82);--glow:var(--ember-68);--deep:var(--blood-38)}
/* A claim floods the chapel with gold, a collapse with blood, whatever the tier was. */
.altar-panel.alt-claimed {--hot:var(--gold-87);--glow:var(--gold-76);--deep:var(--gold-46)}
.altar-panel.alt-collapsed {--hot:var(--blood-67);--glow:var(--blood-53);--deep:var(--blood-27)}
/* A seam of the ritual's light along the top edge. */
.altar-panel::before {content:'';position:absolute;z-index:2;left:0;right:0;top:0;height:2px;pointer-events:none;background:linear-gradient(90deg,rgb(var(--hot) / 0),rgb(var(--hot) / .7) 30%,rgb(var(--hot) / .7) 70%,rgb(var(--hot) / 0));opacity:.35}
.altar-panel.ritual-burning::before {opacity:1}
.altar-panel .panel-description {padding:12px 16px 12px}

/* The ritual's title bar. */
#altar .ritual {border-top:1px solid rgb(var(--bone-32));padding-top:0}
#altar .ritual-heading {margin:0;padding:10px 16px;gap:8px;white-space:nowrap;background:linear-gradient(rgb(var(--stone-0) / .35),rgb(var(--stone-0) / 0))}
#altar .ritual-heading .rarity {min-width:0;overflow:hidden;text-overflow:ellipsis;font:600 12px 'Segoe UI',Arial,sans-serif;letter-spacing:2px;color:var(--gold)}
#altar .ritual-heading .ritual-mute {margin-left:auto;margin-right:4px}
#altar .ritual-heading strong {flex:none;padding:3px 9px;border:1px solid rgb(var(--hot) / .55);border-radius:2px;background:rgb(var(--deep) / .35);font:600 12px 'Segoe UI',Arial,sans-serif;letter-spacing:2px;color:rgb(var(--hot));text-shadow:0 0 8px rgb(var(--glow) / .6)}
.altar-panel:not(.ritual-burning) .ritual-heading strong {border-color:rgb(var(--bone-40));background:rgb(var(--stone-0) / .3);color:rgb(var(--bone-62));text-shadow:none}

/* The chapel: every layer sized from the altar's width (--aw), so the scene holds together from phone to desktop. */
.alt-stage {--aw:min(50cqw,290px);--ah:calc(var(--aw) * .5455);--ab:10px;--slab:calc(var(--ab) + var(--ah) * .8);--ring:min(70cqw,224px);--cy:42%;position:relative;height:290px;overflow:hidden;isolation:isolate;border-top:1px solid rgb(var(--stone-0));border-bottom:1px solid rgb(var(--bone-32));background:rgb(var(--stone-15))}
.alt-scene {position:absolute;inset:0}
.alt-scene>span {position:absolute;pointer-events:none}
.alt-sanctum {inset:0;background:url('/assets/altar/sanctum.svg') 50% 100%/cover no-repeat,rgb(var(--stone-15));filter:brightness(calc(.62 + var(--alt-heat) * .5)) saturate(.9);transition:filter .8s}
.altar-panel.ritual-burning .alt-sanctum {filter:brightness(calc(.8 + var(--alt-heat) * .45)) saturate(1)}
/* The light the fire throws on the apse. */
.alt-glow {left:50%;bottom:0;width:calc(var(--ring) * 1.9);height:calc(var(--ring) * 1.5);margin-left:calc(var(--ring) * -.95);background:radial-gradient(closest-side,rgb(var(--glow) / .5),rgb(var(--glow) / .16) 50%,rgb(var(--glow) / 0));opacity:calc(.25 + var(--alt-heat) * .75);mix-blend-mode:screen;transition:opacity .8s}
.altar-panel:not(.ritual-burning) .alt-glow {opacity:.18}
/* The rune ring standing behind the altar, filled with the ritual's colour and turning. */
.alt-runes {left:50%;top:calc(var(--cy) - var(--ring) * .5);width:var(--ring);height:var(--ring);margin-left:calc(var(--ring) * -.5);filter:drop-shadow(0 0 5px rgb(var(--glow) / .8));opacity:.22;transition:opacity .8s}
.alt-runes i {position:absolute;inset:0;width:100%;height:100%;border-radius:0;box-shadow:none;background:linear-gradient(rgb(var(--hot)),rgb(var(--glow)));-webkit-mask:url('/assets/altar/runes.svg') center/contain no-repeat;mask:url('/assets/altar/runes.svg') center/contain no-repeat}
.altar-panel.ritual-burning .alt-runes {opacity:calc(.6 + var(--alt-heat) * .4)}
.alt-altar {left:50%;bottom:var(--ab);width:var(--aw);height:var(--ah);margin-left:calc(var(--aw) * -.5);background:url('/assets/altar/altar.svg') center/100% 100% no-repeat;filter:drop-shadow(0 6px 10px rgb(var(--stone-0) / .8))}
/* The offering laid on the slab, dark against its own fire. */
.alt-pyre {left:50%;bottom:calc(var(--slab) - 4px);width:calc(var(--aw) * .24);height:calc(var(--aw) * .24);margin-left:calc(var(--aw) * -.12);display:grid;place-items:end center;z-index:1}
.alt-pyre>* {width:100%;height:100%;object-fit:contain;filter:brightness(.8) drop-shadow(0 0 6px rgb(var(--glow) / .7))}
.alt-pyre .relic-art {border-radius:50%;border:1px solid rgb(var(--gold-55))}
.alt-pyre .icon {width:60%;height:60%;color:rgb(var(--bone-77))}
/* The fire: two masked flames (a coloured body and a white-hot core) rising higher as the multiplier climbs. */
.alt-fire {left:50%;bottom:calc(var(--slab) - 6px);width:calc(var(--aw) * .46);height:calc(var(--aw) * (.42 + var(--alt-heat) * .5));margin-left:calc(var(--aw) * -.23);z-index:2;opacity:0;transform-origin:50% 100%;mix-blend-mode:screen;transition:opacity .6s,height .8s}
.altar-panel.ritual-burning .alt-fire {opacity:1}
.alt-flame {position:absolute;left:0;top:0;width:100%;height:100%;border-radius:0;box-shadow:none;background:linear-gradient(0deg,rgb(var(--deep)),rgb(var(--glow)) 30%,rgb(var(--hot)) 60%,rgb(var(--hot) / 0));-webkit-mask:url('/assets/altar/flame.svg') 50% 100%/100% 100% no-repeat;mask:url('/assets/altar/flame.svg') 50% 100%/100% 100% no-repeat;transform-origin:50% 100%}
.alt-flame-core {left:26%;top:34%;width:48%;height:66%;background:linear-gradient(0deg,rgb(var(--stone-100) / .3),rgb(var(--bone-96)) 30%,rgb(var(--hot) / .9) 70%,rgb(var(--hot) / 0))}
/* Embers: dormant, a smoulder on the slab; burning, sparks that climb out of the fire. */
.alt-embers {left:50%;bottom:calc(var(--slab) - 2px);width:calc(var(--aw) * .5);height:calc(var(--ring) * .95);margin-left:calc(var(--aw) * -.25);z-index:3}
.alt-embers::before {content:'';position:absolute;left:18%;right:18%;bottom:-3px;height:8px;border-radius:50%;background:radial-gradient(closest-side,rgb(var(--hot) / .85),rgb(var(--glow) / .35) 60%,rgb(var(--glow) / 0));filter:blur(1px)}
.alt-embers i {--x:50%;--d:2.4s;--o:0s;--drift:10px;position:absolute;left:var(--x);bottom:0;width:3px;height:3px;border-radius:50%;background:rgb(var(--bone-96));box-shadow:0 0 6px 2px rgb(var(--hot));opacity:0}
.alt-embers i:nth-child(1) {--x:12%;--d:2.6s;--o:-.3s;--drift:-14px}
.alt-embers i:nth-child(2) {--x:24%;--d:2.1s;--o:-1.4s;--drift:8px}
.alt-embers i:nth-child(3) {--x:36%;--d:2.9s;--o:-2.2s;--drift:-6px}
.alt-embers i:nth-child(4) {--x:46%;--d:2.3s;--o:-.8s;--drift:16px}
.alt-embers i:nth-child(5) {--x:54%;--d:2.7s;--o:-1.9s;--drift:-18px}
.alt-embers i:nth-child(6) {--x:62%;--d:2s;--o:-.1s;--drift:12px}
.alt-embers i:nth-child(7) {--x:72%;--d:3.1s;--o:-2.6s;--drift:-10px}
.alt-embers i:nth-child(8) {--x:82%;--d:2.5s;--o:-1.1s;--drift:6px}
.alt-embers i:nth-child(9) {--x:30%;--d:3.3s;--o:-.6s;--drift:22px}
.alt-embers i:nth-child(10) {--x:68%;--d:2.2s;--o:-1.6s;--drift:-22px}
.altar-panel.ritual-burning .alt-embers i {opacity:.8}
/* The shock ring of a surge and the verdict of a claim or collapse. */
.alt-shock {left:50%;top:var(--cy);width:calc(var(--ring) * .7);height:calc(var(--ring) * .7);margin:calc(var(--ring) * -.35) 0 0 calc(var(--ring) * -.35);border:3px solid rgb(var(--hot));border-radius:50%;opacity:0;z-index:4;box-shadow:0 0 18px rgb(var(--glow)),inset 0 0 18px rgb(var(--glow))}
.alt-verdict {left:0;right:0;top:calc(var(--cy) - 27px);z-index:6;text-align:center;font:900 54px/1 Georgia,'Times New Roman',serif;letter-spacing:-.02em;opacity:0;color:rgb(var(--gold-87));text-shadow:0 2px 0 rgb(var(--stone-0)),0 0 18px rgb(var(--gold-76)),0 0 40px rgb(var(--ember-68) / .6)}
.altar-panel.alt-collapsed .alt-verdict {color:rgb(var(--blood-67));text-decoration:line-through 4px rgb(var(--blood-53));text-shadow:0 2px 0 rgb(var(--stone-0)),0 0 18px rgb(var(--blood-53)),0 0 36px rgb(var(--blood-38))}

/* The multiplier: a gilded number at the heart of the ring, ringed by the charge toward the next surge. It
   swells with the heat and burns hotter by tier. Hidden while the altar is dormant. */
.alt-sigil {position:absolute;left:50%;top:var(--cy);z-index:5;display:grid;place-items:center;width:calc(var(--ring) * .56);height:calc(var(--ring) * .56);margin:calc(var(--ring) * -.28) 0 0 calc(var(--ring) * -.28)}
.altar-panel:not(.ritual-burning) .alt-sigil {display:none}
.alt-sigil::before {content:'';position:absolute;inset:18% 4%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgb(var(--stone-0) / .5),rgb(var(--stone-0) / 0))}
.alt-charge {position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgb(var(--hot)) calc(var(--alt-charge) * 360deg),rgb(var(--stone-100) / .08) 0);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 4px),rgb(var(--stone-0)) calc(100% - 3px));mask:radial-gradient(closest-side,transparent calc(100% - 4px),rgb(var(--stone-0)) calc(100% - 3px));filter:drop-shadow(0 0 4px rgb(var(--glow)))}
.altar-panel .alt-sigil .ritual-percent {margin:0;display:block;font:900 clamp(40px,12cqw,62px)/1 Georgia,'Times New Roman',serif;letter-spacing:-.02em;white-space:nowrap;scale:calc(1 + var(--alt-heat) * .28);transition:scale .6s cubic-bezier(.3,1.6,.5,1);
  background:linear-gradient(180deg,rgb(var(--bone-96)) 0 20%,rgb(var(--hot)) 52%,rgb(var(--deep)) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;
  filter:drop-shadow(0 0 1px rgb(var(--stone-0))) drop-shadow(0 2px 0 rgb(var(--stone-0))) drop-shadow(0 0 calc(8px + var(--alt-heat) * 18px) rgb(var(--glow) / .8))}

/* The ledger of the lit ritual: the reward to claim, what is safe, the surges so far and the collapse dial. */
.altar-panel .ritual-copy {margin:12px 16px;font-size:14px;color:rgb(var(--bone-69))}
#altar #ritual-copy {padding:10px 12px;border-left:2px solid rgb(var(--ember-48) / .8);background:linear-gradient(90deg,rgb(var(--ember-48) / .08),rgb(var(--stone-0) / 0))}
#altar .ritual-stats {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"reward reward risk" "guar surges risk";gap:8px;margin:14px 16px 12px;font-size:14px;letter-spacing:0}
.alt-stat {display:grid;align-content:center;gap:2px;min-width:0;padding:8px 10px;border:1px solid rgb(var(--bone-32));border-radius:2px;background:linear-gradient(rgb(var(--stone-0) / .35),rgb(var(--stone-0) / .15));box-shadow:inset 0 1px rgb(var(--stone-0) / .6)}
.alt-stat:nth-child(2) {grid-area:guar}
.alt-stat:nth-child(3) {grid-area:surges}
.alt-stat small {font:600 11px 'Segoe UI',Arial,sans-serif;letter-spacing:1.4px;color:rgb(var(--bone-62));overflow-wrap:anywhere;hyphens:auto}
#altar .alt-stat b {margin:0;font:17px/1.2 Georgia,serif;color:rgb(var(--stone-88));overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.alt-stat-reward {grid-area:reward;border-color:rgb(var(--hot) / .45);background:radial-gradient(ellipse 80% 120% at 0 50%,rgb(var(--glow) / .14),rgb(var(--glow) / 0)),linear-gradient(rgb(var(--stone-0) / .35),rgb(var(--stone-0) / .15))}
#altar .alt-stat-reward b {font-size:26px;color:var(--gold-bright);text-shadow:0 0 12px rgb(var(--gold-76) / .35)}
/* The collapse dial: a half gauge from bone through ember to blood, its needle at the chance of collapse. */
.alt-stat-risk {grid-area:risk;justify-items:center;text-align:center;min-width:112px;padding:8px 10px}
.alt-dial {position:relative;display:block;width:88px;height:46px;overflow:hidden;border-radius:0;background:none;box-shadow:none}
.alt-dial::before {content:'';position:absolute;left:0;top:0;width:88px;height:88px;border-radius:50%;background:conic-gradient(from -90deg,rgb(var(--bone-55)) 0deg,rgb(var(--gold-66)) 60deg,rgb(var(--ember-60)) 110deg,rgb(var(--blood-53)) 150deg,rgb(var(--blood-38)) 180deg,rgb(var(--stone-0) / 0) 180deg);-webkit-mask:radial-gradient(closest-side,transparent 66%,rgb(var(--stone-0)) 68%);mask:radial-gradient(closest-side,transparent 66%,rgb(var(--stone-0)) 68%);opacity:.9}
.alt-dial::after {content:'';position:absolute;left:39px;top:39px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgb(var(--gold-87)),rgb(var(--gold-46)));box-shadow:0 0 0 2px rgb(var(--stone-15))}
.alt-needle {position:absolute;left:43px;top:8px;width:2px;height:36px;border-radius:1px;background:linear-gradient(rgb(var(--bone-96)),rgb(var(--bone-73)));transform-origin:50% 36px;transform:rotate(calc(-90deg + var(--alt-risk) * 180deg));transition:transform .7s cubic-bezier(.3,1.5,.5,1);box-shadow:0 0 6px rgb(var(--stone-0))}
#altar .alt-stat-risk b {font-size:19px}
.altar-panel[data-risk="mid"] .alt-stat-risk b {color:rgb(var(--ember-75))}
.altar-panel[data-risk="high"] .alt-stat-risk {border-color:rgb(var(--blood-53) / .7);background:radial-gradient(ellipse at 50% 30%,rgb(var(--blood-53) / .22),rgb(var(--blood-53) / 0) 70%),linear-gradient(rgb(var(--stone-0) / .35),rgb(var(--stone-0) / .15))}
.altar-panel[data-risk="high"] .alt-stat-risk b {color:rgb(var(--blood-67));text-shadow:0 0 10px rgb(var(--blood-53) / .7)}

/* Stability as the binding seal: wax that cracks from its centre as stability falls, beside its channel. */
.alt-binding {display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;margin:0 16px 12px}
.alt-seal {position:relative;width:54px;height:54px;background:url('/assets/altar/seal.svg') center/contain no-repeat;filter:drop-shadow(0 3px 5px rgb(var(--stone-0) / .8)) drop-shadow(0 0 calc(var(--alt-crack) * 12px) rgb(var(--ember-68) / .8))}
.alt-cracks {position:absolute;inset:0;width:100%;height:100%;border-radius:0;box-shadow:none;background:url('/assets/altar/cracks.svg') center/contain no-repeat;clip-path:circle(calc(var(--alt-crack) * 80%) at 50% 50%);transition:clip-path .6s ease-out}
.alt-binding-bar {display:grid;gap:5px;min-width:0}
.alt-binding-label {font:italic 14px Georgia,serif;color:rgb(var(--bone-77))}
#altar .alt-binding #ritual-stability {width:100%;height:10px;margin:0;border:1px solid rgb(var(--stone-0) / .9);border-radius:1px;background:repeating-linear-gradient(90deg,rgb(var(--stone-0) / 0) 0 calc(10% - 1px),rgb(var(--stone-0) / .8) calc(10% - 1px) 10%),rgb(var(--stone-15));box-shadow:0 1px rgb(var(--bone-32) / .6)}
#altar .alt-binding #ritual-stability::-webkit-progress-bar {background:transparent}
#altar .alt-binding #ritual-stability::-webkit-progress-value {border-radius:0;background:linear-gradient(rgb(var(--blood-67)),rgb(var(--blood-53)) 45%,rgb(var(--blood-38)));box-shadow:0 0 8px rgb(var(--blood-53) / .5)}
#altar .alt-binding #ritual-stability::-moz-progress-bar {background:linear-gradient(rgb(var(--blood-67)),rgb(var(--blood-53)) 45%,rgb(var(--blood-38)))}

/* The fuse to the next surge, and the omen of the last one. */
#altar .ritual-next {margin:0 16px 4px;font-size:13px;color:rgb(var(--bone-62));letter-spacing:.5px}
#altar .ritual-pulse {width:calc(100% - 32px);height:4px;margin:0 16px 10px;border-radius:2px;background:rgb(var(--stone-0) / .6)}
#altar .ritual-pulse::-webkit-progress-bar {background:transparent}
#altar .ritual-pulse::-webkit-progress-value {background:linear-gradient(90deg,rgb(var(--deep)),rgb(var(--glow)) 70%,rgb(var(--bone-96)));box-shadow:0 0 8px rgb(var(--glow) / .7);border-radius:2px}
#altar .ritual-pulse::-moz-progress-bar {background:linear-gradient(90deg,rgb(var(--deep)),rgb(var(--glow)) 70%,rgb(var(--bone-96)))}
#altar #ritual-event {margin:0 16px 14px;padding:8px 12px;border:1px solid rgb(var(--hot) / .25);border-left:2px solid rgb(var(--hot) / .8);border-radius:2px;background:linear-gradient(90deg,rgb(var(--glow) / .1),rgb(var(--stone-0) / 0));font:italic 14.5px/1.45 Georgia,serif;color:rgb(var(--bone-83))}
#altar #ritual-event:empty {display:none}

/* Claim: the climax. A slab of gold leaf across the panel that breathes in the ritual's light. */
#altar .altar-actions {margin:0 16px 16px}
#altar #ritual-claim {position:relative;width:100%;min-height:58px;overflow:hidden;border:1px solid rgb(var(--gold-87));border-radius:2px;
  background:linear-gradient(rgb(var(--gold-87)),rgb(var(--gold-76)) 40%,rgb(var(--gold-55)) 100%);color:rgb(var(--stone-15));font:700 18px/1.2 Georgia,'Times New Roman',serif;letter-spacing:.3px;white-space:normal;text-shadow:0 1px rgb(var(--gold-87) / .7);
  box-shadow:inset 0 1px rgb(var(--bone-96) / .8),inset 0 -3px rgb(var(--gold-46) / .8),0 0 0 3px rgb(var(--stone-15)),0 0 0 4px rgb(var(--gold-55) / .8),0 0 22px rgb(var(--glow) / .45)}
#altar #ritual-claim::after {content:'';position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,rgb(var(--stone-100) / 0),rgb(var(--stone-100) / .45),rgb(var(--stone-100) / 0));transform:skewX(-18deg);pointer-events:none;opacity:0}
#altar.ritual-empowered #ritual-claim {border-color:rgb(var(--arcane-90));background:linear-gradient(rgb(var(--arcane-82)),rgb(var(--arcane-62)) 45%,rgb(var(--arcane-37)));color:rgb(var(--stone-15));text-shadow:0 1px rgb(var(--arcane-90) / .6)}
#altar.ritual-ascendant #ritual-claim {border-color:rgb(var(--bone-96));background:linear-gradient(rgb(var(--gold-87)),rgb(var(--gold-82)) 35%,rgb(var(--ember-68)) 75%,rgb(var(--blood-53)));color:rgb(var(--stone-15));text-shadow:0 1px rgb(var(--gold-87) / .7)}

/* The Bound Altar: an iron plate held by chains, its claim target set in gold. */
#altar .ritual-automation {margin:0 16px 16px;padding:12px 14px;border:1px solid rgb(var(--bone-36));border-radius:2px;font-size:14px;
  background:repeating-linear-gradient(90deg,rgb(var(--bone-40) / .5) 0 6px,rgb(var(--stone-0) / 0) 6px 10px) 0 0/100% 2px no-repeat,linear-gradient(rgb(var(--stone-0) / .3),rgb(var(--stone-0) / .1));box-shadow:inset 0 0 0 1px rgb(var(--stone-0) / .5)}
#altar .ritual-automation label {font:15px Georgia,serif;color:var(--gold-bright);gap:9px}
#altar #auto-ritual {appearance:none;-webkit-appearance:none;display:grid;place-items:center;width:20px;height:20px;margin:0;border:1px solid rgb(var(--gold-55));border-radius:2px;background:rgb(var(--stone-15));box-shadow:inset 0 1px 3px rgb(var(--stone-0))}
#altar #auto-ritual::after {content:'';width:10px;height:10px;transform:scale(0) rotate(45deg);background:linear-gradient(135deg,rgb(var(--gold-87)),rgb(var(--gold-66)));box-shadow:0 0 6px rgb(var(--gold-76) / .8);transition:transform .15s}
#altar #auto-ritual:checked {border-color:var(--gold-bright)}
#altar #auto-ritual:checked::after {transform:scale(1) rotate(45deg)}
#altar .auto-target-field input {border-radius:2px;background:rgb(var(--stone-15))}
#altar .auto-targets button {min-width:58px;font-family:Georgia,serif}

/* The offerings: a card for each stack, its drawing in an arched alcove, framed by what one of it is worth. */
#altar .offering-ledger {margin:0;padding:0 16px 16px;border-top:1px solid rgb(var(--bone-32));background:linear-gradient(rgb(var(--stone-0) / .25),rgb(var(--stone-0) / 0) 80px)}
#altar .offering-ledger-heading {padding:14px 0 12px;flex-wrap:wrap}
#altar .offering-ledger-heading h3 {font:21px Georgia,serif;color:var(--gold-bright)}
#altar .offering-ledger-heading>span {font-size:14px;color:rgb(var(--bone-69))}
#altar .offering-columns {display:none}
#altar .offering-ledger .relic-list {display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,232px),1fr));gap:10px;max-height:min(70vh,560px);margin:0;padding:2px 4px 4px 2px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgb(var(--gold-46)) rgb(var(--stone-0) / .3)}
#altar .relic-list>.relic-note {grid-column:1/-1;padding:18px 14px;border:1px dashed rgb(var(--bone-36));border-radius:2px;text-align:center;font:italic 14.5px Georgia,serif}
#altar .offering-row {--g:var(--bone-55);position:relative;isolation:isolate;display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-areas:"art name" "art count" "art worth" "act act";align-items:center;gap:2px 12px;padding:12px 12px 12px;border:1px solid rgb(var(--g) / .55);border-radius:3px;font-size:14px;
  background:radial-gradient(ellipse 90px 80px at 44px 44px,rgb(var(--g) / .16),rgb(var(--g) / 0) 70%),linear-gradient(170deg,rgb(var(--stone-20)),rgb(var(--stone-15)) 80%);box-shadow:inset 0 1px rgb(var(--g) / .25),inset 0 0 0 1px rgb(var(--stone-0) / .5),0 3px 10px rgb(var(--stone-0) / .5)}
#altar .offering-row[data-grade="gold"] {--g:var(--gold-66)}
#altar .offering-row[data-grade="ember"] {--g:var(--ember-60)}
#altar .offering-row[data-grade="mythic"] {--g:var(--arcane-62)}
#altar .offering-row .offering-name {display:contents}
#altar .alt-card-art {grid-area:art;position:relative;display:grid;place-items:center;width:64px;height:76px;border:1px solid rgb(var(--gold-55));border-radius:32px 32px 3px 3px/28px 28px 3px 3px;
  background:radial-gradient(ellipse at 50% 70%,rgb(var(--g) / .35),rgb(var(--stone-0) / 0) 70%),rgb(var(--stone-15));box-shadow:0 0 0 2px rgb(var(--stone-15)),0 0 0 3px rgb(var(--g) / .6),0 6px 12px rgb(var(--stone-0) / .7)}
#altar .offering-row[data-heap="pile"] .alt-card-art {box-shadow:0 0 0 2px rgb(var(--stone-15)),0 0 0 3px rgb(var(--g) / .6),5px -4px 0 1px rgb(var(--stone-20)),5px -4px 0 2px rgb(var(--g) / .35),0 6px 12px rgb(var(--stone-0) / .7)}
#altar .offering-row[data-heap="heap"] .alt-card-art {box-shadow:0 0 0 2px rgb(var(--stone-15)),0 0 0 3px rgb(var(--g) / .6),5px -4px 0 1px rgb(var(--stone-20)),5px -4px 0 2px rgb(var(--g) / .35),10px -8px 0 1px rgb(var(--stone-17)),10px -8px 0 2px rgb(var(--g) / .2),0 6px 12px rgb(var(--stone-0) / .7)}
#altar .alt-card-art .offering-art {width:56px;height:56px;margin-top:8px;border:0;border-radius:0;object-fit:contain;filter:drop-shadow(0 3px 3px rgb(var(--stone-0) / .7))}
#altar .alt-card-art .relic-art.offering-art {width:50px;height:50px;margin-top:4px;border-radius:50%;border:1px solid rgb(var(--gold-55))}
#altar .alt-card-art .icon {width:30px;height:30px;color:var(--gold)}
#altar .offering-row .offering-name strong {grid-area:name;align-self:end;font:17px/1.2 Georgia,serif;color:rgb(var(--stone-88));text-shadow:0 1px 2px rgb(var(--stone-0))}
#altar .offering-row .offering-count {grid-area:count;text-align:left;font:15px Georgia,serif;color:rgb(var(--bone-77));overflow-wrap:anywhere}
#altar .offering-row .offering-worth {grid-area:worth;display:flex;align-items:center;gap:5px;align-self:start;text-align:left;font-size:14.5px;font-weight:600;color:rgb(var(--moss-80));overflow-wrap:anywhere;min-width:0}
#altar .offering-row .offering-worth::before {content:'';flex:none;width:11px;height:15px;background:linear-gradient(rgb(var(--moss-86)),rgb(var(--moss-64)));-webkit-mask:url('/assets/altar/flame.svg') center/contain no-repeat;mask:url('/assets/altar/flame.svg') center/contain no-repeat;filter:drop-shadow(0 0 3px rgb(var(--moss-73)))}
#altar .offering-row button {grid-area:act;width:100%;margin-top:10px;padding:8px 10px;border-color:rgb(var(--g) / .8);color:var(--gold-bright);font-size:14.5px;letter-spacing:.5px;background:linear-gradient(rgb(var(--ember-48) / .5),rgb(var(--blood-27) / .85));box-shadow:inset 0 1px rgb(var(--ember-75) / .25),0 2px 5px rgb(var(--stone-0) / .4)}
#altar .offering-note {margin:10px 0 0;padding:8px 12px;border-left:2px solid rgb(var(--hot) / .8);background:rgb(var(--glow) / .08);font-size:14px;color:rgb(var(--bone-77))}

/* The finds that bring the next offering. */
#altar .encounter {padding:12px 16px 14px;border-top:1px solid rgb(var(--bone-32));background:linear-gradient(rgb(var(--stone-0) / .35),rgb(var(--stone-0) / .15))}
#altar .encounter .small {font-size:13.5px;color:rgb(var(--bone-73))}
#altar .encounter strong {font:15px Georgia,serif;color:var(--gold)}
#altar #encounter-bar {height:6px;margin-top:8px;border:1px solid rgb(var(--stone-0) / .9);border-radius:1px}

/* Motion, for players who allow it. */
@media (prefers-reduced-motion:no-preference) {
  .alt-runes i {animation:alt-turn 60s linear infinite}
  .altar-panel.ritual-burning .alt-runes i {animation-duration:24s}
  .altar-panel.ritual-empowered .alt-runes i {animation-duration:12s}
  .altar-panel.ritual-ascendant .alt-runes i {animation-duration:6s}
  .alt-flame {animation:alt-lick 1.4s ease-in-out infinite alternate}
  .alt-flame-core {animation-duration:.9s;animation-delay:-.4s}
  .altar-panel.ritual-ascendant .alt-flame {animation-duration:.8s}
  .alt-embers::before {animation:alt-smoulder 3.2s ease-in-out infinite}
  .altar-panel.ritual-burning .alt-embers i {animation:alt-ember var(--d) linear var(--o) infinite}
  .altar-panel.ritual-empowered .alt-embers i,.altar-panel.ritual-ascendant .alt-embers i {animation-duration:calc(var(--d) * .6)}
  .altar-panel.ritual-ascendant .alt-glow {animation:alt-throb 1.3s ease-in-out infinite}
  .altar-panel[data-risk="high"] .alt-stat-risk {animation:alt-danger 1.1s ease-in-out infinite}
  .altar-panel[data-risk="high"] .alt-needle {animation:alt-quiver .18s linear infinite alternate}
  #altar #ritual-claim:not(:disabled) {animation:alt-breathe 2.2s ease-in-out infinite}
  #altar #ritual-claim:not(:disabled)::after {animation:alt-sheen 3.4s ease-in-out infinite}
  /* A surge: the ring punches out, the number jumps, the fire flares; a stability loss shakes the seal. */
  .altar-panel.alt-surging .alt-shock {animation:alt-shock .9s ease-out}
  .altar-panel.alt-surging .alt-sigil .ritual-percent {animation:alt-punch .7s cubic-bezier(.2,1.8,.4,1)}
  .altar-panel.alt-surging .alt-fire {animation:alt-flare .9s ease-out}
  .altar-panel.alt-surging[data-flash="fading"] .alt-seal,.altar-panel.alt-surging[data-flash="surge"] .alt-seal {animation:alt-shake .5s ease-out}
  .altar-panel.alt-surging[data-flash="soulstorm"] .alt-glow {animation:alt-storm .9s ease-out}
  /* A claim: a column of light and the multiplier won, rising. A collapse: the chapel shakes red. */
  .altar-panel.alt-claimed .alt-verdict {animation:alt-verdict 2.4s ease-out}
  .altar-panel.alt-claimed .alt-glow {animation:alt-claim-light 2.2s ease-out}
  .altar-panel.alt-collapsed .alt-verdict {animation:alt-verdict 2.4s ease-out}
  .altar-panel.alt-collapsed .alt-scene {animation:alt-quake .7s cubic-bezier(.36,.07,.19,.97)}
  .altar-panel.alt-collapsed .alt-stage::after {animation:alt-bloodflash 1.4s ease-out}
  @keyframes alt-turn {to {rotate:360deg}}
  @keyframes alt-lick {0% {transform:scale(1,1) skewX(0)} 35% {transform:scale(.94,1.06) skewX(-2deg)} 70% {transform:scale(1.05,.95) skewX(2deg)} 100% {transform:scale(.97,1.08) skewX(-1deg)}}
  @keyframes alt-smoulder {50% {opacity:.55}}
  @keyframes alt-ember {0% {opacity:0;transform:translate(0,0) scale(1)} 12% {opacity:.95} 100% {opacity:0;transform:translate(var(--drift),calc(var(--ring) * -.9)) scale(.4)}}
  @keyframes alt-throb {50% {opacity:.7}}
  @keyframes alt-danger {50% {box-shadow:inset 0 1px rgb(var(--stone-0) / .6),0 0 14px rgb(var(--blood-53) / .55)}}
  @keyframes alt-quiver {to {transform:rotate(calc(-88deg + var(--alt-risk) * 180deg))}}
  @keyframes alt-breathe {50% {box-shadow:inset 0 1px rgb(var(--bone-96) / .8),inset 0 -3px rgb(var(--gold-46) / .8),0 0 0 3px rgb(var(--stone-15)),0 0 0 4px rgb(var(--gold-76)),0 0 34px rgb(var(--glow) / .75)}}
  @keyframes alt-sheen {0%,55% {left:-40%;opacity:0} 60% {opacity:1} 90%,100% {left:120%;opacity:0}}
  @keyframes alt-shock {0% {opacity:.95;transform:scale(.55)} 100% {opacity:0;transform:scale(1.9)}}
  @keyframes alt-punch {0% {transform:scale(1)} 30% {transform:scale(1.32) rotate(-3deg)} 60% {transform:scale(.95) rotate(1deg)} 100% {transform:none}}
  @keyframes alt-flare {0% {transform:scale(1.25,1.45)} 100% {transform:none}}
  @keyframes alt-shake {0%,100% {transform:none} 20% {transform:translateX(-4px) rotate(-6deg)} 40% {transform:translateX(4px) rotate(5deg)} 60% {transform:translateX(-3px) rotate(-3deg)} 80% {transform:translateX(2px)}}
  @keyframes alt-storm {0% {opacity:1;transform:scale(1.2)} 100% {transform:none}}
  @keyframes alt-verdict {0% {opacity:0;transform:translateY(24px) scale(.6)} 15% {opacity:1;transform:translateY(0) scale(1.12)} 30% {transform:scale(1)} 75% {opacity:1} 100% {opacity:0;transform:translateY(-34px)}}
  @keyframes alt-claim-light {0% {opacity:1;transform:scale(1.6,2.4)} 100% {transform:none}}
  @keyframes alt-quake {0%,100% {transform:none} 15% {transform:translate(-8px,3px) rotate(-.8deg)} 30% {transform:translate(7px,-3px) rotate(.7deg)} 45% {transform:translate(-5px,2px)} 60% {transform:translate(4px,-1px)} 80% {transform:translate(-2px,1px)}}
  @keyframes alt-bloodflash {0% {opacity:.85} 100% {opacity:0}}
}
.alt-stage::after {content:'';position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 60%,rgb(var(--blood-53) / .55),rgb(var(--blood-27) / .8))}
/* Without motion the verdict simply shows for the moment the class is on. */
@media (prefers-reduced-motion:reduce) {
  .altar-panel.alt-claimed .alt-verdict,.altar-panel.alt-collapsed .alt-verdict {opacity:1}
  .altar-panel .alt-sigil .ritual-percent,.alt-needle,.alt-cracks,.alt-fire {transition:none}
}

/* Narrow panels (phones): a shorter chapel, the collapse dial under the reward. */
@container alt (max-width:520px) {
  .alt-stage {--aw:min(60cqw,280px);--ring:min(58cqw,210px);--cy:40%;height:262px}
  #altar .ritual-heading .rarity,#altar .ritual-heading strong {letter-spacing:1.2px}
  .alt-verdict {font-size:44px}
  /* The collapse dial takes a band of its own under the reward, the dial beside its words. */
  #altar .ritual-stats {grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"reward reward" "risk risk" "guar surges";gap:6px}
  .alt-stat-risk {grid-template-columns:auto auto;justify-content:center;column-gap:14px;min-width:0}
  .alt-stat-risk .alt-dial {grid-row:span 2}
  #altar .alt-stat-reward b {font-size:24px}
  #altar #ritual-claim {font-size:17px;min-height:54px}
  /* One card to a row: the Sacrifice button stands at the card's right instead of under it. */
  #altar .offering-row {grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"art name act" "art count act" "art worth act";column-gap:10px}
  #altar .offering-row button {width:auto;margin:0;padding:10px 12px}
}
@container alt (max-width:360px) {
  #altar .offering-row {grid-template-columns:64px minmax(0,1fr);grid-template-areas:"art name" "art count" "art worth" "act act"}
  #altar .offering-row button {width:100%;margin-top:10px}
}