/* Critical shared loading skin: available before the game module starts. */
@font-face { font-family: 'Cinzel'; font-weight: 400 900; font-display: swap; src: url('/fonts/cinzel.woff2') format('woff2'); }
html, body { margin: 0; height: 100%; background: #07080a; }
.ve-loader {
  --ve-gilt: #b99a5b; --ve-parch: #eee0bb;
  position: fixed; inset: 0; z-index: 1000; overflow: hidden;
  color: var(--ve-parch); background: #101b20; font-family: Georgia, serif;
  transition: opacity .4s ease-out, visibility 0s linear .4s;
  isolation: isolate;
}
.ve-loader.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.ve-backdrop { position: absolute; inset: 0; z-index: -2; background: #101b20 url('/loading/gloaming.webp') center 48% / cover no-repeat; }
.ve-loader::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(#03080b66, transparent 30%, transparent 58%, #03070cda 90%, #03070c), radial-gradient(ellipse at center, transparent 40%, #02060988); }
.ve-loader::after { content: ''; position: absolute; inset: 12px; border: 1px solid #c6a76d55; box-shadow: 0 0 0 5px #060b0b77, inset 0 0 0 3px #05090955; pointer-events: none; }
.ve-brand { position: absolute; top: clamp(28px, 6vh, 72px); left: 50%; transform: translateX(-50%); width: min(450px, 75vw); text-align: center; filter: drop-shadow(0 4px 6px #000); }
.ve-brand::before, .ve-brand::after { content: ''; position: absolute; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, #c6a76d, #f4e5ba, #c6a76d, transparent); }
.ve-brand::before { top: 0; } .ve-brand::after { bottom: 0; }
.ve-crest { display: block; width: 42px; height: 42px; margin: -22px auto 2px; }
.ve-logo { margin: 0; font: 800 clamp(24px, 3.5vw, 46px)/1.1 'Cinzel', Georgia, serif; letter-spacing: .025em; text-transform: uppercase; color: #ead097; text-shadow: 0 2px #503813, 0 -1px #fff0c5, 2px 3px #030707; }
.ve-edition { display: block; padding: 8px 0 12px; font: 600 11px/1 'Cinzel', Georgia, serif; text-transform: uppercase; letter-spacing: .32em; color: #b8d3ce; }
.ve-core { position: absolute; bottom: max(5vh, 28px); left: 50%; transform: translateX(-50%); width: min(660px, calc(100vw - 100px)); text-align: center; }
.ve-title { margin: 0 0 4px; font: 600 clamp(18px, 2.2vw, 27px)/1.3 'Cinzel', Georgia, serif; color: #f2e5c6; text-shadow: 0 2px 4px #000; }
.ve-sub { margin: 0 0 16px; font: 12px/1.4 'Cinzel', Georgia, serif; letter-spacing: .12em; color: #c1c7b9; }
.ve-tip { min-height: 2.8em; max-width: 600px; margin: 0 auto 38px; font: 14px/1.4 Georgia, serif; color: #eadfc8; text-shadow: 0 2px 3px #000; transition: opacity .2s ease; }
.ve-tip.fade { opacity: 0; }
.ve-bar { position: relative; height: 116px; padding: 19px 0; box-sizing: border-box; }
.ve-wayglass {
  position: relative; isolation: isolate; width: 100%; height: 78px;
  filter: drop-shadow(0 8px 11px #020905b8) drop-shadow(0 0 9px #ff9a3c22);
}
.ve-wayglass::before, .ve-wayglass::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  clip-path: polygon(0 50%, 3.4% 27%, 9% 15%, 13% 22%, 28% 19%, 42% 14%, 48% 17%, 50% 4%, 53% 17%, 70% 14%, 78% 20%, 91% 16%, 96.5% 26%, 100% 50%, 97% 72%, 91% 84%, 77% 80%, 68% 86%, 53% 82%, 50% 96%, 47% 82%, 32% 86%, 25% 80%, 10% 85%, 4% 74%);
}
.ve-wayglass::before {
  z-index: 0;
  background:
    linear-gradient(180deg, #e2d29a 0%, #806333 10%, #352b1c 23%, #b69a60 35%, #594526 49%, #211d15 62%, #94794a 78%, #ead7a0 87%, #493820 100%),
    linear-gradient(90deg, #5d4525, #dcc88e 12%, #5c482a 50%, #e0cc94 88%, #624a28);
  box-shadow: inset 0 1px #fff2c4, inset 0 -2px #080d08;
}
.ve-wayglass::after {
  z-index: 1; inset: 4px;
  background:
    linear-gradient(180deg, #1c1814 0%, #71613b 13%, #28241c 25%, #453d28 48%, #1a1612 72%, #8b7746 87%, #1e1a14 100%),
    linear-gradient(90deg, #1a1612, #6f5c37 10%, #2a241c 50%, #6f5b36 90%, #1a1612);
  opacity: .96;
}
.ve-track {
  position: absolute; z-index: 2; top: 23px; left: 4.8%; right: 4.8%; height: 32px;
  overflow: hidden; isolation: isolate;
  clip-path: polygon(0 50%, 1.2% 12%, 98.8% 12%, 100% 50%, 98.8% 88%, 1.2% 88%);
  background: linear-gradient(180deg, #070606, #1a1410 23%, #080605 55%, #15100c);
}
.ve-track::before {
  content: ''; position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: .25;
  background:
    linear-gradient(90deg, transparent 24.75%, #c7d9a866 25%, transparent 25.25%),
    linear-gradient(90deg, transparent 49.75%, #e2d39a77 50%, transparent 50.25%),
    linear-gradient(90deg, transparent 74.75%, #c7d9a866 75%, transparent 75.25%),
    linear-gradient(180deg, #d3f9c722, transparent 38%, #0008);
}
.ve-track::after {
  content: ''; position: absolute; z-index: 4; left: 0; top: 0; height: 100%;
  width: var(--ve-progress, 0%); pointer-events: none; opacity: .88; mix-blend-mode: screen;
  background: linear-gradient(90deg,
    #b8430c 0%, #fff0c0 7%, #ffb347 14%, #9a3408 23%, #ffd88a 34%,
    #ff8a2a 44%, #fff6d8 51%, #ffc25a 60%, #8a2c06 70%, #ffdca0 82%,
    #ff9a3c 92%, #a83a0a 100%);
  background-size: 220% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 9%, #000 17%, #000 26%, transparent 41%, transparent 59%, #000 74%, #000 83%, transparent 91%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, transparent 9%, #000 17%, #000 26%, transparent 41%, transparent 59%, #000 74%, #000 83%, transparent 91%, transparent 100%);
  filter: drop-shadow(0 0 2px #ffd27a) drop-shadow(0 0 6px #ff7a1a);
  animation: ve-plasma-flow 1.8s linear infinite, ve-plasma-throb 1.05s ease-in-out infinite alternate;
}
.ve-fill {
  position: absolute; z-index: 0; inset: 0; transform-origin: left; transform: scaleX(0);
  background:
    linear-gradient(180deg, #fff2cc90 0%, #ffd8903b 15%, #ffb05a10 35%, transparent 53%, #2a0c02b0 100%),
    radial-gradient(ellipse at 24% 48%, #ffb04a4a, transparent 58%),
    linear-gradient(90deg, #5a1c04 0%, #a8400c 34%, #d8701a 66%, #ffc25a 100%);
  box-shadow: inset 0 1px #fff0c8b8, inset 0 -2px #2a0c02, inset 0 0 12px #ffad6124;
}
.ve-fill::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(112deg, transparent 0%, transparent 39%, #ffe2c320 46%, #fff4cd76 50%, #ffdcba28 54%, transparent 62%),
    repeating-linear-gradient(118deg, transparent 0 11px, #ffdcc712 12px, #fff0dd21 13px, transparent 16px);
  background-size: 240% 100%, 100% 100%; mix-blend-mode: screen;
  animation: ve-wayglass-sheen 4.2s linear infinite;
}
.ve-fill::after {
  content: ''; position: absolute; right: -1px; top: 50%; width: 10px; height: 20px;
  transform: translateY(-50%); clip-path: polygon(50% 0, 100% 28%, 70% 50%, 100% 72%, 50% 100%, 0 70%, 26% 50%, 0 30%);
  background: linear-gradient(180deg, #fff6d0, #ffc25a 52%, #b98c4d);
  filter: drop-shadow(0 0 5px #ffb04a);
}
.ve-particle-canvas { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@keyframes ve-wayglass-sheen { from { background-position: 100% 0, 0 0; } to { background-position: -140% 0, -48px 0; } }
@keyframes ve-plasma-flow { from { background-position: 100% 50%; } to { background-position: -120% 50%; } }
@keyframes ve-plasma-throb { from { opacity: .58; } to { opacity: .98; } }
.ve-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 13px 0; font: 13px/1.4 Georgia, serif; color: #d8ceba; text-shadow: 0 2px 3px #000; }
.ve-stage { text-align: left; overflow-wrap: anywhere; }
.ve-pct { flex: none; font-variant-numeric: tabular-nums; color: #efe5ce; }
.ve-detail { display: none; margin: 10px 13px 0; font: 13px/1.5 Georgia, serif; overflow-wrap: anywhere; color: #ffceae; }
.ve-error .ve-detail { display: block; }
.ve-error .ve-stage { color: #ffceae; }
.ve-error .ve-fill { background: linear-gradient(#d59172, #913d30 50%, #542a28); }
@media (max-width: 600px) {
  .ve-core { width: calc(100vw - 68px); bottom: max(24px, env(safe-area-inset-bottom)); }
  .ve-brand { top: 42px; } .ve-loader::after { inset: 8px; }
  .ve-tip { font-size: 12px; } .ve-sub { font-size: 10px; }
}
@media (max-height: 520px) {
  .ve-brand { top: 24px; width: 300px; } .ve-logo { font-size: 26px; }
  .ve-crest { width: 30px; height: 30px; margin-top: -15px; }
  .ve-core { bottom: 20px; } .ve-sub { margin-bottom: 6px; }
  .ve-tip { margin-bottom: 8px; min-height: 1.4em; font-size: 12px; }
  .ve-bar { height: 103px; padding: 12px 0; }
  .ve-wayglass { height: 76px; }
  .ve-track { top: 22px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .ve-loader, .ve-tip { transition: none; }
  .ve-fill::before, .ve-track::after { animation: none; }
}