:root {
  --vault-gold: #edcc91;
  --vault-brass: #b1905c;
  --vault-edge: #8e7652;
}
.page-heading .chapter { color: #d4bd95; }
.page-heading .chapter svg { color: #e6bf7d; }
.stage-slot { position: relative; isolation: isolate; overflow-anchor: none; }
.vault-stage {
  position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden;
  min-height: clamp(530px, 64vh, 610px); padding: 17px 22px 20px; border: 1px solid var(--vault-edge); border-radius: 14px;
  background: #0c1528 url("/assets/observatory.svg") center / cover; box-shadow: 0 15px 42px #02061375;
}
.vault-scenery, .vault-matte { position: absolute; pointer-events: none; }
.vault-scenery { inset: 0; z-index: -3; }
.vault-scenery img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 56%; }
.vault-weather {
  position: absolute; inset: 33% 12% 22%; z-index: -2; overflow: hidden; pointer-events: none;
  mask-image: radial-gradient(ellipse at 50% 58%, #000 27%, #0009 54%, transparent 76%);
}
.vault-weather i {
  position: absolute; left: -30%; width: 148%; height: 48%;
  background: url("/assets/dusk-mist.webp") center / 100% 100% no-repeat;
  animation: valley-drift 45s ease-in-out infinite alternate;
}
.vault-weather .mist-far { top: 11%; opacity: .33; animation-duration: 69s; animation-direction: alternate-reverse; }
.vault-weather .mist-near { top: 39%; opacity: .68; }
@keyframes valley-drift {
  from { transform: translate3d(-9%, 3%, 0) scale(1.04); }
  to { transform: translate3d(26%, -8%, 0) scale(1.17); }
}
.vault-hall-backdrop {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3;
  object-fit: cover; pointer-events: none;
}
.has-hall-backdrop .vault-scenery { visibility: hidden; }
.has-live-vault-hall .vault-weather i { animation-play-state: paused; }
.vault-matte {
  inset: 0; z-index: -2;
  background: linear-gradient(180deg, #060a15a6 0%, #070d2112 40%, transparent 64%, #090e1edb 95%),
    radial-gradient(ellipse at 50% 45%, transparent 44%, #060910ad 100%);
}
.vault-bar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.vault-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 13px;
  border: 1px solid #8e7654; border-radius: 5px; color: #f4e0bc;
  background: linear-gradient(180deg, #202c45, #0b1323 51%, #111d30);
  box-shadow: inset 0 0 0 2px #090d19, inset 0 0 0 3px #d0b17b34, 0 2px 7px #02050c66;
  font: 700 12px/1.2 var(--vault-display); white-space: nowrap;
}
.vault-link:hover { color: #fff0d1; border-color: #d2af74; box-shadow: inset 0 0 0 2px #090d19, inset 0 0 0 3px #d0b17b63, 0 2px 7px #02050c66; }
.vault-link svg { width: 14px; height: 14px; color: #d7b77e; }
.vault-title { text-align: center; margin: 12px 0 2px; }
.vault-title h2 { margin: 3px 0 4px; color: #fff1d0; font: 700 clamp(33px, 3.35vw, 51px)/1.15 var(--serif); letter-spacing: .14em; padding-left: .14em; text-shadow: 0 2px 5px #030913, 0 0 22px #b98e5745; }
.vault-title p { color: #e5e8f1; font-size: 13px; text-shadow: 0 1px 4px #000, 0 1px 12px #000; }
.vault-altar { display: grid; place-items: center; position: relative; isolation: isolate; flex: 1 0 247px; min-height: 247px; }
.vault-pack { position: relative; z-index: 2; width: clamp(153px, 14vw, 205px); aspect-ratio: 450 / 646; margin-bottom: 6px; transform: rotate(-5deg); filter: drop-shadow(0 20px 13px #020611bd); }
.pack-front, .pack-fragment { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.vault-pack .pack-front { animation: pack-hover 4.5s ease-in-out 2; }
@keyframes pack-hover { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(1.8deg); } }
.pack-fragment { opacity: 0; }
.fragment-cap { clip-path: polygon(0 0,100% 0,100% 17%,85% 14%,72% 17%,54% 14%,36% 16%,18% 14%,0 17%); }
.fragment-base { clip-path: polygon(0 17%,18% 14%,36% 16%,54% 14%,72% 17%,85% 14%,100% 17%,100% 100%,0 100%); }
.pack-seam { position: absolute; top: 15%; left: 9%; right: 9%; height: 2px; transform: scaleX(0); opacity: 0; background: #fff6dc; box-shadow: 0 0 13px 4px #ffe6a6; }
.altar-orbit {
  position: absolute; bottom: 2%; width: min(54%, 460px); height: clamp(43px, 5.7vw, 82px); border-radius: 50%;
  border: 1px solid #f1cf8159; background: radial-gradient(ellipse, #a2daff31, #f4ba5812 49%, transparent 70%);
  box-shadow: 0 0 18px #eed29626; transform: rotate(-.5deg);
}
.altar-flare { position: absolute; z-index: 1; inset: -5% 7%; opacity: 0; background: radial-gradient(ellipse at 50% 57%, #fff0be9c, #d3a05b56 19%, #78bafa23 38%, transparent 68%); pointer-events: none; }
.vault-stage.opening .vault-pack { animation: raise-pack 690ms cubic-bezier(.3,.06,.4,1) both; }
.vault-stage.opening .pack-front { animation: seal-fade 690ms linear both; }
.vault-stage.opening .fragment-cap { animation: tear-cap 690ms cubic-bezier(.15,.7,.2,1) both; }
.vault-stage.opening .fragment-base { animation: tear-base 690ms cubic-bezier(.15,.7,.2,1) both; }
.vault-stage.opening .pack-seam { animation: tear-seam 690ms ease both; }
.vault-stage.opening .altar-orbit { animation: wake-orbit 690ms ease-out both; }
.vault-stage.opening .altar-flare { animation: open-light 690ms ease both; }
@keyframes raise-pack { 0% { transform: rotate(-5deg); } 35% { transform: translateY(-12px) scale(1.045) rotate(3deg); } 62%,100% { transform: translateY(-14px) scale(1.07) rotate(0); } }
@keyframes seal-fade { 0%,59% { opacity: 1; } 60%,100% { opacity: 0; } }
@keyframes tear-cap { 0%,59% { opacity: 0; transform: none; } 60% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(-47%, -52%) rotate(-46deg) scale(.8); } }
@keyframes tear-base { 0%,59% { opacity: 0; transform: none; } 60% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(16%, 14%) rotate(15deg) scale(.88); } }
@keyframes tear-seam { 0%,39% { opacity: 0; transform: scaleX(.1); } 60% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(2.8); } }
@keyframes wake-orbit { 0% { opacity: .4; transform: scale(.7); } 60% { opacity: 1; } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes open-light { 0% { opacity: 0; transform: scale(.62); } 45% { opacity: .36; } 67% { opacity: .92; } 100% { opacity: .28; transform: scale(1.18); } }
.vault-controls { display: flex; flex-direction: column; align-items: center; gap: 7px; padding-top: 7px; }
.vault-controls p { color: #d9deeb; font-size: 12px; text-align: center; }
.pack-plaque {
  --plaque-height: clamp(50px, min(7.4dvh, 15.7vw), 64px);
  --plaque-cap: calc(var(--plaque-height) * .96);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: clamp(9px, 1vw, 12px);
  width: max-content; min-width: clamp(238px, 20vw, 328px); max-width: calc(100vw - 28px);
  min-height: var(--plaque-height); padding: 4px calc(var(--plaque-cap) + 2px);
  border: 0; border-radius: 5px; background: transparent;
  color: #fff1cf; text-shadow: 0 1px 3px #000; text-align: center;
  font: 800 clamp(14px, 3.65vw, 18px)/1.16 var(--vault-display);
}
.pack-plaque:lang(zh) { letter-spacing: .07em; }
.pack-plaque::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  border: 1px solid transparent;
  border-image: url("/assets/ui/dusk-action-plaque.webp") 0 15.4% fill / 0 var(--plaque-cap) stretch;
  background: linear-gradient(#172849, #0b162c) center / 74% 74% no-repeat;
  filter: drop-shadow(0 3px 7px #03050fb0);
  transition: filter 160ms ease;
}
.pack-plaque-emblem {
  display: block; flex: none; width: auto; height: calc(var(--plaque-height) * .63);
  filter: drop-shadow(0 2px 3px #030712d9) drop-shadow(0 0 5px #719bdf57);
}
.pack-plaque > svg { width: clamp(19px, 4.8vw, 23px); height: clamp(19px, 4.8vw, 23px); color: #e6c184; }
.pack-plaque:disabled, .pack-trigger:disabled .pack-plaque { color: #dbd0ba; }
.pack-plaque:disabled::before, .pack-trigger:disabled .pack-plaque::before { filter: saturate(.46) brightness(.68); }
.pack-plaque:disabled .pack-plaque-emblem, .pack-trigger:disabled .pack-plaque-emblem { opacity: .54; }
@media (hover: hover) {
  button.pack-plaque:hover:not(:disabled)::before,
  .pack-trigger:hover:not(:disabled) .pack-plaque::before { filter: brightness(1.16) drop-shadow(0 0 7px #e6b26059); }
}
button.pack-plaque:active:not(:disabled)::before,
.pack-trigger:active:not(:disabled) .pack-plaque::before { filter: brightness(.89) drop-shadow(0 1px 3px #03050fb0); }
.pack-plaque:focus-visible, .vault-link:focus-visible { outline-color: #f8d398; }
.pack-trigger:focus-visible .pack-trigger-caption { outline: 2px solid #f8d398; outline-offset: 3px; }
.vault-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  padding: 0 17px; border: 1px solid #ac956f75; border-radius: 7px;
  background: #10192dde; color: #e6d8bb; font-weight: 720; white-space: nowrap;
}
.vault-secondary:hover { color: #fff1d1; border-color: #dbc08d; background: #273147; }

.vault-reveal .vault-matte {
  background: linear-gradient(180deg, #070c1ab5 0%, #080f2291 44%, #0b1326be 76%, #080e1af5), radial-gradient(ellipse at 50% 50%, transparent 18%, #090e20a3 100%);
}
.vault-reveal .vault-title h2, .vault-summary .vault-title h2 { font-size: clamp(29px, 3vw, 43px); letter-spacing: .09em; }
.vault-summary .best-word { margin-left: 8px; color: #fff0d4; font-family: var(--serif); font-size: 15px; overflow-wrap: anywhere; }
.pack-switch { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin: 12px auto 2px; width: min(100%, 420px); }
.pack-chip { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 32px; min-width: 0; padding: 0 4px; border: 1px solid #a58c606e; border-radius: 5px; background: #111b2fde; color: #dbd3c5; font-size: 11px; white-space: nowrap; }
.pack-chip svg { width: 13px; height: 13px; }
.pack-chip:hover, .pack-chip.current { border-color: #dfbc81; background: #413724; color: #fff0cd; }
.reveal-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); align-items: stretch; gap: clamp(7px, 1vw, 14px); width: min(100%, 805px); margin: auto; padding: 17px 0; }
.reveal-actions { flex-direction: row; justify-content: center; gap: 8px; padding: 2px 0 0; }
.dealing .reveal-grid > .face-down { animation: deal-card 360ms cubic-bezier(.17,.83,.32,1.08) backwards; }
.dealing .reveal-grid > :nth-child(2) { animation-delay: 45ms; }
.dealing .reveal-grid > :nth-child(3) { animation-delay: 90ms; }
.dealing .reveal-grid > :nth-child(4) { animation-delay: 135ms; }
.dealing .reveal-grid > :nth-child(5) { animation-delay: 180ms; }
@keyframes deal-card { from { opacity: 0; transform: translateY(19px) scale(.84) rotate(-5deg); } to { opacity: 1; transform: none; } }
.loot-grid { width: min(94%, 530px); display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin: auto; padding-block: 21px; }
.loot-item { display: grid; place-items: center; gap: 3px; padding: 16px 4px 12px; border: 1px solid rgba(var(--tier-rgb), .42); border-radius: 8px; background: #0b1429df; color: var(--tier); box-shadow: 0 6px 20px #0206108f; }
.loot-item > svg { width: 24px; height: 24px; }
.loot-item strong { font-size: 27px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.loot-item span { font-size: 12px; }

.reveal-ceremony {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; color: inherit; background: transparent;
  overflow: hidden; overscroll-behavior: contain; container-type: inline-size;
  --ceremony-rgb: 170, 116, 255; --ceremony-text: #f1dcff;
  --ribbon-angle: -17deg; --turn-start: 188deg; --turn-lean: -9deg;
}
.reveal-ceremony::backdrop { background: transparent; }
.stage-slot:has(.reveal-ceremony[open]) .vault-phase-status { visibility: hidden; }
.ceremony-held:not(.ceremony-returning) { cursor: pointer; }
.ceremony-legendary {
  --ceremony-rgb: 251, 172, 74; --ceremony-text: #fff1c3;
  --ribbon-angle: -28deg; --turn-start: 198deg; --turn-lean: 12deg;
}
.ceremony-common.ceremony-sss {
  --ceremony-rgb: 190, 213, 238; --ceremony-text: #f1f7ff;
}
.ceremony-rare.ceremony-sss {
  --ceremony-rgb: 78, 159, 255; --ceremony-text: #dbf2ff;
}
.ceremony-golden:is(.ceremony-common, .ceremony-rare):not(.ceremony-sss) {
  --ceremony-rgb: 245, 188, 93; --ceremony-text: #fff0c2;
  --ribbon-angle: -26deg; --turn-start: 199deg; --turn-lean: 12deg;
}
.ceremony-golden .ceremony-title { color: #fff0bc; }
.ceremony-visual, .ceremony-wash { position: absolute; inset: 0; }
.ceremony-wash {
  background: radial-gradient(ellipse at 50% 52%, rgba(var(--ceremony-rgb), .14), transparent 54%),
    radial-gradient(ellipse at 50% 51%, #06081369, #040610dc 92%);
  animation: ceremony-wash var(--ceremony-duration) ease both;
}
.ceremony-sss .ceremony-wash {
  background: radial-gradient(ellipse at 50% 52%, rgba(var(--ceremony-rgb), .26), transparent 62%),
    radial-gradient(ellipse at 50% 51%, #06081376, #040610ee 92%);
}
@keyframes ceremony-wash {
  0% { opacity: 0; }
  19%, 69% { opacity: 1; }
  100% { opacity: .9; }
}
.ceremony-ribbon, .ceremony-wave {
  position: absolute; top: 52%; left: 50%; translate: -50% -50%;
  mix-blend-mode: screen;
}
.ceremony-ribbon {
  width: 162vmax; height: 29vmin;
  background: linear-gradient(180deg, transparent 0%, rgba(var(--ceremony-rgb), .12) 29%, rgba(var(--ceremony-rgb), .58) 47%,
    var(--ceremony-text) 49.75%, rgba(var(--ceremony-rgb), .7) 51%, rgba(var(--ceremony-rgb), .19) 61%, transparent 97%);
  animation: reveal-ribbon var(--afterglow-duration) cubic-bezier(.18,.64,.32,1) var(--impact-delay) both;
}
@keyframes reveal-ribbon {
  0% { opacity: 0; transform: rotate(var(--ribbon-angle)) scale(.03,.16); }
  9% { opacity: .96; transform: rotate(var(--ribbon-angle)) scale(1,.65); }
  34% { opacity: .65; transform: rotate(calc(var(--ribbon-angle) + 9deg)) scale(1.08,1.15); }
  79%, 100% { opacity: 0; transform: rotate(calc(var(--ribbon-angle) + 24deg)) scale(1.14,1.47); }
}
.ceremony-wave {
  width: 155vmax; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid rgba(var(--ceremony-rgb), .8);
  box-shadow: inset 0 0 46px rgba(var(--ceremony-rgb), .45), 0 0 34px rgba(var(--ceremony-rgb), .58);
  animation: reveal-wave calc(var(--afterglow-duration) * .72) cubic-bezier(.15,.65,.31,1) var(--impact-delay) both;
}
.ceremony-wave.wave-echo { animation-delay: calc(var(--impact-delay) + 250ms); opacity: .65; }
@keyframes reveal-wave {
  0% { opacity: 0; transform: scale(.04); }
  16% { opacity: 1; }
  76%, 100% { opacity: 0; transform: scale(1.1); }
}
.ceremony-score-echo {
  position: absolute; top: 52%; left: 50%; translate: -50% -50%;
  width: 142vmax; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid rgba(var(--ceremony-rgb), .6);
  box-shadow: 0 0 42px rgba(var(--ceremony-rgb), .43), inset 0 0 32px rgba(var(--ceremony-rgb), .27);
  animation: reveal-wave 1480ms cubic-bezier(.14,.54,.36,1) var(--accent-delay) both;
}
.ceremony-golden-orbit {
  position: absolute; top: 52%; left: 50%; translate: -50% -50%;
  width: min(101vmin, 755px); aspect-ratio: 1;
  background: conic-gradient(from 0deg, transparent 1%, #e58d2d85 14%, #ffdf90 28%, #fff4cc 35%, transparent 40%,
    transparent 54%, #a7591a58 66%, #f3b35b 79%, #fff2c3 86%, transparent 89%);
  mask-image: radial-gradient(circle closest-side, transparent 93%, #000 94% 96%, transparent 97% 97.7%, #000 98.1% 98.7%, transparent 99.3%);
  filter: drop-shadow(0 0 6px #f4a245);
  --orbit-angle: -24deg;
  animation: gilded-orbit var(--ceremony-duration) cubic-bezier(.19,.54,.27,1) both;
}
.ceremony-golden-orbit.orbit-cross { --orbit-angle: 24deg; width: min(86vmin, 635px); }
@keyframes gilded-orbit {
  0% { opacity: 0; transform: rotate(var(--orbit-angle)) rotateX(67deg) rotateZ(-98deg) scale(.38); }
  21% { opacity: .8; }
  65% { opacity: .85; transform: rotate(var(--orbit-angle)) rotateX(52deg) rotateZ(72deg) scale(1.16); }
  100% { opacity: .48; transform: rotate(var(--orbit-angle)) rotateX(58deg) rotateZ(134deg) scale(.92); }
}
.ceremony-golden-petals { position: absolute; inset: 0; pointer-events: none; }
.ceremony-golden-petals i {
  position: absolute; left: 50%; top: 56%; width: clamp(6px, 1.9vmin, 15px); aspect-ratio: .77;
  border-radius: 65% 45% 62% 18%;
  background: linear-gradient(136deg, #fff0b4, #e5a447 54%, #923720);
  box-shadow: 0 0 7px #ffbd6773;
  animation: golden-petal 2160ms cubic-bezier(.15,.57,.28,1) calc(var(--impact-delay) + var(--petal-delay)) both;
}
.ceremony-golden-petals i:nth-child(4n) { animation-delay: calc(var(--accent-delay, var(--impact-delay)) + var(--petal-delay)); }
@keyframes golden-petal {
  0% { opacity: 0; transform: rotate(var(--angle)) translateX(11vmin) rotateY(70deg) scale(.4); }
  15%, 56% { opacity: .94; }
  67% { transform: rotate(calc(var(--angle) + 48deg)) translateX(var(--drift)) rotateY(220deg); }
  100% { opacity: 0; transform: translateY(8vmin) rotate(calc(var(--angle) + 82deg)) translateX(var(--drift)) rotateY(360deg) scale(.7); }
}
.ceremony-pillar {
  position: absolute; inset: 0; mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent 5%, #dc681433 29%, #ed9b4555 40%, #ffbc7599 47%,
    #fff5d5 49.8%, #ffbc7599 52%, #ed9b4555 59%, #dc681433 70%, transparent 95%);
  animation: reveal-pillar var(--afterglow-duration) cubic-bezier(.16,.68,.32,1) var(--impact-delay) both;
}
@keyframes reveal-pillar {
  0% { opacity: 0; transform: scale(.035, .25); }
  10% { opacity: .94; transform: scale(.35, 1); }
  33% { opacity: .64; transform: scale(.88, 1); }
  80%, 100% { opacity: 0; transform: scale(1.25, 1); }
}
.ceremony-sss-dial, .ceremony-sss-orbit {
  position: absolute; top: 52%; left: 50%; translate: -50% -50%;
  width: min(78vmin, 590px); aspect-ratio: 1; border-radius: 50%;
  pointer-events: none; mix-blend-mode: screen;
}
.ceremony-sss-dial {
  background: repeating-conic-gradient(from -7deg, rgba(var(--ceremony-rgb), .84) 0 1.4deg, transparent 1.4deg 15deg);
  mask-image: radial-gradient(circle, transparent 61%, #000 62% 69%, transparent 70%);
  animation: sss-dial var(--ceremony-duration) cubic-bezier(.17,.62,.3,1) both;
}
.ceremony-sss-orbit {
  border: 2px solid rgba(var(--ceremony-rgb), .7);
  box-shadow: 0 0 28px rgba(var(--ceremony-rgb), .7), inset 0 0 38px rgba(var(--ceremony-rgb), .28);
  animation: sss-orbit var(--afterglow-duration) cubic-bezier(.16,.67,.28,1) var(--impact-delay) both;
}
.ceremony-sss:is(.ceremony-epic, .ceremony-legendary) .ceremony-sss-dial {
  width: min(96vmin, 790px);
}
@keyframes sss-dial {
  0% { opacity: 0; transform: rotate(-68deg) scale(.12); }
  25% { opacity: .8; }
  61% { opacity: .68; transform: rotate(24deg) scale(1.12); }
  100% { opacity: 0; transform: rotate(57deg) scale(1.38); }
}
@keyframes sss-orbit {
  0% { opacity: 0; transform: rotateX(62deg) rotateZ(-28deg) scale(.15); }
  12% { opacity: .95; }
  78%, 100% { opacity: 0; transform: rotateX(18deg) rotateZ(29deg) scale(1.62); }
}
.ceremony-card, .ceremony-title, .ceremony-ambience { --reveal-card-width: min(43cqw, 34dvh, 312px); }
.ceremony-ambience {
  position: absolute; z-index: 1; top: 52%; left: 50%; pointer-events: none;
  width: min(calc(var(--reveal-card-width) * 3.1), 118cqw); height: calc(var(--reveal-card-width) * 2.16);
  transform: translate(-50%, -50%); visibility: hidden; opacity: 0;
  transition: opacity 520ms ease-out, transform 440ms cubic-bezier(.24,.66,.3,1);
  --ambience-play: paused;
}
:is(.ceremony-revealed, .ceremony-held) .ceremony-ambience {
  visibility: visible; opacity: 1; --ambience-play: running;
}
.ceremony-returning .ceremony-ambience {
  opacity: 0; transform: translate(-50%, -50%) scale(.73); transition-duration: 430ms;
}
.ceremony-ambience-glow {
  position: absolute; inset: -9% -1%;
  background: radial-gradient(ellipse, rgba(var(--ceremony-rgb), .3), rgba(var(--ceremony-rgb), .16) 40%, transparent 69%);
  animation: ceremony-ambience-breathe 4.8s ease-in-out infinite alternate var(--ambience-play);
}
.ceremony-ambience-orbit {
  position: absolute; top: 50%; left: 50%; width: 87%; aspect-ratio: 1;
  border: 1px solid rgba(var(--ceremony-rgb), .48); border-radius: 50%;
  box-shadow: 0 0 17px rgba(var(--ceremony-rgb), .3), inset 0 0 12px rgba(var(--ceremony-rgb), .17);
  transform: translate(-50%, -50%) rotate(-21deg) scaleY(.59);
}
.ceremony-ambience-orbit.orbit-cross {
  width: 78%; opacity: .68; transform: translate(-50%, -50%) rotate(22deg) scaleY(.67);
}
.ceremony-ambience-orbit::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit;
  background: conic-gradient(transparent 7%, rgba(var(--ceremony-rgb), .8) 18%, var(--ceremony-text) 20%,
    transparent 23% 59%, rgba(var(--ceremony-rgb), .63) 71%, var(--ceremony-text) 73%, transparent 76%);
  mask-image: radial-gradient(circle closest-side, transparent calc(100% - 6px),
    #000 calc(100% - 4px) calc(100% - 1px), transparent);
  animation: ceremony-ambience-spin 12s linear infinite var(--ambience-play);
}
.ceremony-ambience-orbit.orbit-cross::after {
  animation-duration: 16s; animation-direction: reverse; animation-delay: -6s;
}
.ceremony-ambience-dial {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: min(72%, calc(var(--reveal-card-width) * 2.23)); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(var(--ceremony-rgb), .56);
  background: repeating-conic-gradient(rgba(var(--ceremony-rgb), .64) 0 1deg, transparent 1deg 12deg);
  mask-image: radial-gradient(circle closest-side, transparent 90%, #000 91% 99%, transparent);
  animation: ceremony-ambience-spin 32s linear infinite var(--ambience-play);
}
.ceremony-ambience-sparks {
  position: absolute; inset: 0;
  --spark: var(--ceremony-text) 0 1px, rgba(var(--ceremony-rgb), .7) 1.8px, transparent 5px;
  background: radial-gradient(circle at 12% 34%, var(--spark)), radial-gradient(circle at 19% 73%, var(--spark)),
    radial-gradient(circle at 28% 18%, var(--spark)), radial-gradient(circle at 32% 86%, var(--spark)),
    radial-gradient(circle at 73% 17%, var(--spark)), radial-gradient(circle at 80% 39%, var(--spark)),
    radial-gradient(circle at 72% 83%, var(--spark)), radial-gradient(circle at 89% 65%, var(--spark));
  animation: ceremony-ambience-drift 6s ease-in-out infinite alternate var(--ambience-play);
}
@keyframes ceremony-ambience-spin { to { transform: rotate(360deg); } }
@keyframes ceremony-ambience-breathe {
  from { opacity: .66; transform: scale(.97); }
  to { opacity: 1; transform: scale(1.06); }
}
@keyframes ceremony-ambience-drift {
  from { opacity: .58; transform: translate(-7px, 8px); }
  to { opacity: .96; transform: translate(8px, -14px); }
}
.ceremony-card {
  position: absolute; z-index: 3; top: calc(52% - var(--reveal-card-width) * var(--card-height) / 2);
  left: calc(50% - var(--reveal-card-width) * .5); width: var(--reveal-card-width); aspect-ratio: 1 / var(--card-height);
  padding: 0; border: 0; border-radius: 10px; background: transparent; touch-action: manipulation; pointer-events: none;
}
.ceremony-ready:not(.ceremony-3d, .ceremony-held) .ceremony-card {
  perspective: 880px;
  animation: lift-card var(--turn-duration) cubic-bezier(.22,.64,.31,1) both;
}
.ceremony-card:focus-visible { outline-color: var(--ceremony-text); }
.ceremony-ready:not(.ceremony-3d, .ceremony-held) .card-turn-model {
  animation: ceremony-turn var(--turn-duration) linear both;
}
.ceremony-float {
  position: absolute; inset: 0; border-radius: inherit; transform-style: preserve-3d;
}
.ceremony-ready:not(.ceremony-held) .card-turn-side { pointer-events: auto; cursor: default; }
.ceremony-held:not(.ceremony-returning) .ceremony-float { pointer-events: auto; }
:is(.ceremony-revealed, .ceremony-held):not(.ceremony-returning) .ceremony-float {
  animation: ceremony-hover 4.8s ease-in-out infinite;
}
@keyframes ceremony-hover { 50% { translate: 0 -8px; } }
:is(.ceremony-revealed, .ceremony-held) .ceremony-float::before {
  content: ""; position: absolute; inset: 5% 4%; border-radius: 11%; pointer-events: none;
  box-shadow: 0 9px 22px #06040fbc, 0 0 25px rgba(var(--ceremony-rgb), .46);
}
.ceremony-card .card-face .word-meta { gap: .53cqw; }
.ceremony-card .card-face .word-meta > strong {
  color: var(--ceremony-text);
  font-size: clamp(9px, 10cqw, 33px);
  line-height: 1.05;
  -webkit-line-clamp: 1;
}
.ceremony-card .card-face .word-meta > :is(.word-phrase, .ceremony-long-word) {
  font-size: clamp(8px, 6cqw, 24px);
  -webkit-line-clamp: 2;
}
.ceremony-card .card-face .word-definition {
  display: block; flex: none; white-space: nowrap; text-overflow: ellipsis;
  font: 500 clamp(7px, 4.25cqw, 15px)/1.16 var(--font);
}
.ceremony-card .card-face .tier-badge { font-size: clamp(6px, 3.4cqw, 11px); }
:is(.ceremony-revealed, .ceremony-held) .ceremony-card .word-art::before {
  content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none;
  background: linear-gradient(117deg, transparent 39%, #fff0dd54 50%, transparent 63%);
  animation: card-glint 5.8s ease-in-out infinite;
  transition: opacity 360ms ease-out;
}
.ceremony-returning .ceremony-card .word-art::before { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ceremony-golden.ceremony-revealed .card-face.is-golden::after {
    content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 34%, #ffca7566 44%, #fff9d9d9 50%, #ffd07673 54%, transparent 66%);
    background-size: 295% 100%; mix-blend-mode: screen;
    mask-image: var(--card-frame-image), linear-gradient(90deg, #000 2%, transparent 9% 91%, #000 98%),
      linear-gradient(180deg, #000 4%, transparent 14% 89%, #000 97%);
    mask-size: 100% 100%; mask-repeat: no-repeat; mask-composite: intersect, add;
    animation: gilded-frame-sweep 1570ms ease-out both;
  }
}
@keyframes gilded-frame-sweep {
  0% { opacity: 0; background-position: 100% 0; }
  26%, 63% { opacity: .79; }
  100% { opacity: 0; background-position: 0 0; }
}
@keyframes lift-card {
  0% { opacity: .16; transform: translate(var(--card-start-x, 0px), var(--card-start-y, 20px)) scale(var(--card-start-scale, .63)); }
  18% { opacity: 1; }
  26% { transform: translateY(-4%) scale(1.05); }
  58%, 100% { opacity: 1; transform: none; }
}
@keyframes ceremony-turn {
  0% { transform: rotateY(var(--turn-start)) rotateX(-17deg) rotateZ(var(--turn-lean)); }
  32% { transform: rotateY(172deg) rotateX(-9deg) rotateZ(var(--turn-lean)); }
  55% { transform: rotateY(88deg) rotateX(8deg) rotateZ(2deg); }
  72% { transform: rotateY(-13deg) rotateX(3deg); }
  100% { transform: rotateY(0deg) rotateX(0deg); }
}
@keyframes card-glint {
  0%, 100% { transform: translateX(-90%); }
  50% { transform: translateX(90%); }
}
.ceremony-title {
  position: absolute; z-index: 3; top: calc(52% - var(--reveal-card-width) * var(--card-height) / 2 - 27px);
  left: 50%; width: min(82%, 570px);
  translate: -50% -50%; display: grid; justify-items: center; color: var(--ceremony-text);
  animation: prize-title var(--afterglow-duration) ease var(--impact-delay) both;
}
.ceremony-title > span {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 clamp(17px, 2.3vw, 29px)/1.2 var(--serif); letter-spacing: .045em; text-align: center;
  text-shadow: 0 2px 6px #050611, 0 0 22px rgba(var(--ceremony-rgb), .73);
}
.ceremony-title svg { width: 16px; height: 16px; }
.ceremony-golden .ceremony-title > span::before, .ceremony-golden .ceremony-title > span::after {
  content: ""; width: clamp(12px, 5vmin, 46px); height: 1px; flex: none;
  background: linear-gradient(90deg, transparent, #f1c570);
}
.ceremony-golden .ceremony-title > span::after { transform: scaleX(-1); }
@media (min-width: 741px) {
  .ceremony-golden .ceremony-title { top: calc(52% - var(--reveal-card-width) * var(--card-height) / 2 - 42px); }
}
@keyframes prize-title {
  0% { opacity: 0; transform: translateY(8px); }
  18%, 100% { opacity: 1; transform: translateY(0); }
}
.ceremony-held :is(.ceremony-wash, .ceremony-title) { animation: none; }
.ceremony-held .ceremony-wash { opacity: .9; }
.ceremony-held .ceremony-effects { display: none; }
.ceremony-returning :is(.ceremony-title, .ceremony-wash) { animation: ceremony-return 440ms ease-out both; }
@keyframes ceremony-return { to { opacity: 0; } }

@media (max-width: 1100px) {
  .vault-stage { padding-inline: 15px; }
  .vault-pack { width: clamp(148px, 17vw, 180px); }
}
@media (max-width: 800px), (hover: none) and (pointer: coarse) and (max-width: 1080px) {
  .vault-stage { min-height: 490px; }
  .vault-altar { flex-basis: 225px; min-height: 225px; }
}
@media (max-width: 600px) {
  .vault-stage { min-height: 430px; padding: 12px 11px 14px; border-radius: 11px; }
  .vault-scenery img { object-position: 50% 64%; }
  .vault-title { margin-top: 13px; }
  .vault-title h2 { font-size: 36px; }
  .vault-title p { font-size: 12px; }
  .vault-bar { gap: 4px; }
  .vault-plaque { padding: 4px 6px; font-size: 10px; }
  .vault-links { gap: 4px; }
  .vault-link { padding-inline: 10px; font-size: 11px; }
  .vault-link svg { width: 12px; height: 12px; }
  .vault-altar { min-height: 188px; flex-basis: 188px; }
  .vault-pack { width: clamp(110px, 33vw, 145px); margin-bottom: 1px; }
  .altar-orbit { width: 69%; bottom: 4%; }
  .vault-launch { width: 100%; flex-direction: column; gap: 6px; align-items: center; }
  .vault-controls { gap: 5px; padding-top: 3px; }
  .vault-controls p { font-size: 10px; }
  .reveal-grid { grid-template-columns: repeat(6, minmax(0,1fr)); gap: 7px; padding: 11px 0 12px; }
  .reveal-grid > * { grid-column: span 2; }
  .reveal-grid > :nth-child(4) { grid-column: 2 / span 2; }
  .reveal-grid > :nth-child(5) { grid-column: 4 / span 2; }
  .vault-reveal .vault-title h2, .vault-summary .vault-title h2 { font-size: 30px; }
  .pack-chip { min-height: 31px; font-size: 10px; }
  .pack-chip svg { width: 11px; height: 11px; }
  .reveal-actions .vault-secondary { padding-inline: 10px; font-size: 12px; }
  .loot-grid { width: 100%; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .vault-pack .pack-front, .vault-stage.opening *, .dealing .reveal-grid > *, .reveal-ceremony * { animation: none !important; }
  .ceremony-ambience, .ceremony-card .word-art::before { display: none; }
}

.at-observatory {
  --observatory-top: 76px;
  background: #070e19;
}
.at-observatory .topbar {
  position: absolute; inset: 0 0 auto; border: 0;
  padding-top: env(safe-area-inset-top);
  background: linear-gradient(180deg, #060a12eb, #060a12a6 56%, transparent);
}
.at-observatory .topbar-inner {
  width: calc(100% - 2 * clamp(18px, 3.2vw, 64px)); height: var(--observatory-top);
}
.at-observatory .brand strong {
  font-size: clamp(16px, 1.6vw, 25px);
}
.at-observatory .header-actions button { border-color: #b99e6c53; color: #f3e5ca; background: #080e1a80; }
.at-observatory .header-actions button:hover { border-color: #e5c587; color: #fff2d6; background: #262721; }
.at-observatory .site-footer { display: none; }
.at-observatory .pack-counter {
  display: grid; gap: 5px; min-width: 114px; padding: 5px 9px 6px;
  border: 1px solid #b39a615e; border-radius: 6px; color: #dbc9a8; background: #080f1be3;
  white-space: nowrap;
}
.pack-counter-main { display: flex; align-items: center; gap: 8px; }
.pack-counter svg { width: 16px; height: 16px; color: #dcb978; }
.pack-counter-main > div { display: grid; gap: 1px; }
.pack-counter span { font-size: 10px; line-height: 1.15; }
#pack-progress { color: #ffe6b2; font-size: 14px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pack-refill { display: flex; align-items: center; gap: 6px; }
#pack-countdown { min-width: 5ch; text-align: right; color: #d8c4a0; font-variant-numeric: tabular-nums; }
#pack-countdown[data-offline="true"] { color: #a49a88; }
#pack-meter {
  appearance: none; display: block; flex: 1; width: 55px; min-width: 40px; height: 4px;
  border: 0; border-radius: 3px; background: #3a383a;
}
#pack-meter::-webkit-progress-bar { background: #3a383a; border-radius: 3px; }
#pack-meter::-webkit-progress-value {
  border-radius: 3px; background: linear-gradient(90deg, #886642, #f9d79b);
  box-shadow: 0 0 6px #d6a75b59; transition: width .45s linear;
}
#pack-meter[data-reset]::-webkit-progress-value { transition: none; }
#pack-meter::-moz-progress-bar { border-radius: 3px; background: linear-gradient(90deg, #886642, #f9d79b); }
.workspace.vault-workspace { width: 100%; margin: 0; padding: 0; }
.vault-workspace .vault-stage {
  --room-height: 100dvh;
  --slot-width: min(17vw, max(83px, calc(var(--room-height) * .28)), 248px);
  --pack-center: 45%;
  --pack-size: min(40vw, 28dvh, 244px);
  min-height: max(390px, var(--room-height));
  padding: calc(var(--observatory-top) + env(safe-area-inset-top) + 12px) clamp(14px, 3.2vw, 58px)
    max(25px, env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.vault-workspace .vault-stage:focus { outline: none; }
.vault-workspace .vault-scenery img { object-position: 50% 55%; scale: 1.037; transform-origin: 50% 55%; }
.vault-workspace .vault-stage:not(.vault-lobby) .vault-matte {
  background: linear-gradient(180deg, #060a16b0, #09152a1c 28%, #08122533 66%, #070c19ea),
    radial-gradient(ellipse at 50% 49%, transparent 26%, #080d1bbc);
}
.vault-workspace .vault-bar { position: relative; z-index: 1; }
.vault-workspace .vault-title { margin: clamp(10px, 3vh, 32px) 0 4px; }
.vault-workspace .vault-title h2 { font-size: clamp(24px, 3.35vw, 48px); letter-spacing: .045em; }
.vault-workspace .vault-title p { margin-top: 8px; font-variant-numeric: tabular-nums; }
.vault-phase-status {
  position: relative; align-self: center; display: grid; justify-items: center; gap: 6px;
  margin: 10px 0 3px; padding: 7px 17px 8px;
  border: 1px solid #ab8a59; border-radius: 5px;
  background: radial-gradient(ellipse at 50% 0%, #263653, #0a1427 80%);
  box-shadow: inset 0 0 0 2px #090f1d, inset 0 0 0 3px #c0a27335, 0 3px 10px #02071188;
  color: #f1dfbd; font: 700 12px/1.3 var(--vault-display);
}
.vault-phase-status::before, .vault-phase-status::after {
  content: ""; position: absolute; top: 50%; width: clamp(17px, 3.6vw, 58px); height: 1px;
  background: linear-gradient(90deg, transparent, #cfad739e); pointer-events: none;
}
.vault-phase-status::before { right: calc(100% + 4px); }
.vault-phase-status::after { left: calc(100% + 4px); scale: -1 1; }
.vault-status-copy { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.vault-status-copy svg { align-self: center; width: 13px; height: 13px; color: #e6c184; }
.vault-status-count { color: #ffebbd; font-size: 18px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.vault-progress-notches { display: flex; align-items: center; gap: 9px; height: 8px; }
.vault-progress-notches i {
  width: 6px; height: 6px; rotate: 45deg; border: 1px solid #ba996b;
  background: linear-gradient(90deg, #ffe4aa var(--notch-fill), #152239 var(--notch-fill));
}
.vault-workspace .vault-opening .vault-pack {
  position: absolute; top: var(--pack-center); left: 50%; translate: -50% -50%;
  width: var(--pack-size); margin: 0;
}
.vault-workspace .vault-opening .vault-altar { position: absolute; inset: 0; display: block; pointer-events: none; }
.vault-workspace .vault-opening .altar-orbit { bottom: 20%; left: 50%; translate: -50% 0; }
.vault-workspace .pack-switch { display: flex; width: min(100%, 440px); justify-content: center; }
.vault-workspace .pack-chip { flex: 1 1 0; min-width: 0; max-width: 84px; padding-inline: 6px; }
.vault-workspace .reveal-grid {
  width: min(100%, 1380px);
  flex: 1;
  grid-template-columns: repeat(5, minmax(0, var(--slot-width)));
  justify-content: center;
  align-content: center;
  align-items: center;
  gap: clamp(8px, 1.45vw, 23px);
  padding-block: 17px 20px;
}
.vault-workspace .reveal-grid > :is(:first-child, :last-child) { margin-top: clamp(14px, 5dvh, 53px); }
.vault-workspace .reveal-grid > :is(:nth-child(2), :nth-child(4)) { margin-top: clamp(7px, 2.4dvh, 23px); }
.vault-workspace .reveal-grid .word-card[aria-busy="true"] > :is(.card-face, .card-turn-model) { opacity: 0; }
.vault-workspace .reveal-actions { flex-wrap: wrap; }
.film-dealing :is(.pack-switch, .reveal-grid, .reveal-actions) { visibility: hidden; }
.vault-webgl { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.vault-webgl.observatory-canvas { z-index: 0; visibility: hidden; }
.has-live-observatory .observatory-canvas { visibility: visible; }
.vault-lobby .vault-matte {
  background: linear-gradient(180deg, #05091248, transparent 30%, transparent 65%, #050911e8),
    radial-gradient(ellipse at 50% 46%, transparent 42%, #05081073);
}
.vault-lobby.has-live-vault-hall .vault-matte { z-index: 1; }
.pack-trigger {
  position: absolute; z-index: 2; top: var(--pack-center); left: 50%; translate: -50% -50%;
  display: grid; place-items: center; width: calc(var(--pack-size) * 1.148 + 18px);
  height: calc(var(--pack-size) * 1.65 + 18px); padding: 0;
  border: 0; border-radius: 18px; background: transparent;
}
.pack-trigger::before {
  content: ""; position: absolute; inset: -10%; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse, #ffcc7742, transparent 69%); transition: opacity 180ms ease;
}
.pack-trigger:focus-visible { outline: 2px solid #f8d398; outline-offset: 4px; }
.pack-trigger:focus-visible::before { opacity: .5; }
@media (hover: hover) { .pack-trigger:hover:not(:disabled)::before { opacity: .58; } }
.pack-trigger .pack-front {
  position: relative; inset: auto; width: calc(var(--pack-size) * 1.148); height: auto;
  transform: rotate(4deg); filter: brightness(.96) drop-shadow(0 20px 16px #02060c9c);
}
.observatory-static .pack-trigger .pack-front { animation: lobby-hover 4.9s ease-in-out infinite; }
.has-live-observatory .pack-trigger .pack-front { visibility: hidden; }
@keyframes lobby-hover {
  0%, 100% { transform: translateY(0) rotate(4deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}
.stage-load-error { position: absolute; inset: 82px 12px auto; z-index: 5; margin: auto; max-width: 520px; }
.reveal-ceremony .vault-webgl { z-index: 2; transition: opacity 430ms ease-out; }
.ceremony-returning .vault-webgl { opacity: 0; }
.ceremony-3d :is(.ceremony-effects, .ceremony-ambience) { display: none; }
.reveal-ceremony:not(.ceremony-ready, .ceremony-held) .ceremony-card { visibility: hidden; }
.reveal-ceremony:not(.ceremony-ready, .ceremony-held) .ceremony-visual * { animation-play-state: paused; }

@media (max-width: 800px), (hover: none) and (pointer: coarse) and (max-width: 1080px) {
  .at-observatory { --observatory-top: 58px; }
}
@media (max-width: 740px) {
  .at-observatory .pack-counter {
    position: absolute; top: calc(var(--observatory-top) + env(safe-area-inset-top) + 3px);
    right: calc(clamp(13px, 3.2vw, 20px) + env(safe-area-inset-right));
  }
  .vault-workspace .vault-bar { justify-content: flex-start; }
  .vault-weather { inset-inline: 5%; }
  .vault-workspace .vault-stage {
    --slot-width: min(32vw, max(72px, calc((var(--room-height) - 172px) / var(--card-height) / 2 - 8px)), 143px);
    min-height: max(465px, var(--room-height));
    padding-inline: 14px;
  }
  .vault-workspace .vault-title { margin-top: clamp(10px, 2.6vh, 24px); }
  .vault-workspace .vault-title h2 { font-size: clamp(23px, 6.9vw, 35px); }
  .vault-workspace .reveal-grid { grid-template-columns: repeat(6, minmax(0, calc(var(--slot-width) / 2))); gap: 8px; padding-block: 11px; }
  .vault-workspace .reveal-grid > * { grid-column: span 2; }
  .vault-workspace .reveal-grid > :nth-child(n) { margin-top: 0; }
  .vault-workspace .reveal-grid > :nth-child(4) { grid-column: 2 / span 2; }
  .vault-workspace .reveal-grid > :nth-child(5) { grid-column: 4 / span 2; }
  .ceremony-card, .ceremony-title, .ceremony-ambience { --reveal-card-width: min(70cqw, 34dvh, 248px); }
}
@media (max-width: 540px) {
  .at-observatory .topbar-inner { width: calc(100% - 26px); }
  .at-observatory .brand strong { font-size: clamp(12px, 3.6vw, 18px); }
  .at-observatory .brand img { width: 32px; height: 32px; }
  .vault-workspace .vault-lobby { min-height: max(392px, 100dvh); }
}
@media (orientation: landscape) and (max-height: 490px) {
  .at-observatory { --observatory-top: 51px; }
  .vault-workspace .vault-lobby { min-height: max(310px, 100dvh); }
}
@media (prefers-reduced-motion: reduce) {
  .observatory-static .pack-trigger .pack-front, .vault-weather i { animation: none; }
  #pack-meter::-webkit-progress-value { transition: none; }
  .pack-plaque::before { transition: none; }
}
@media (max-width: 400px) {
  .vault-workspace .pack-chip svg { display: none; }
}