:root { color-scheme: dark; --bg: #090d17; --ink: #edf0fa; --muted: #9aa6bf; --border: #293550; --accent: #9cadde; --scale-color: #6387d0; }
* { box-sizing: border-box; }
body { margin: 0; padding: 40px 18px 80px; min-height: 100vh; color: var(--ink); font-family: Georgia, 'Times New Roman', serif; background: radial-gradient(ellipse at 50% 36%, #17213e 0, #0c1221 44%, #080b12 85%); }
.altar-page { width: min(1100px, 100%); margin: auto; }
.altar-page * { border-radius: 0 !important; }
.altar-page .user-avatar { border-radius: 50% !important; }
.altar-page .altar-contributor-avatar { border-radius: 50% !important; }
.altar-sanctum { position: relative; }
.altar-lock-overlay { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, .72); }
.altar-lock-message { max-width: 420px; text-align: center; }
.altar-lock-message img { object-fit: contain; margin-bottom: 16px; }
.altar-lock-message h2 { font-size: clamp(20px, 3vw, 28px); font-weight: normal; color: #edf0fa; }
.altar-lock-message p { color: #b9c4dc; font-size: 14px; line-height: 1.7; }
.altar-page [hidden] { display: none !important; }
.altar-heading { position: relative; overflow: visible; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 210px; text-align: center; padding: 32px 24px; margin: 28px 0 24px; border: 1px solid #334566; background: #101b31; box-shadow: 0 12px 35px #0004; }
.altar-heading > .buff-slots { justify-content: center; flex-wrap: wrap; max-width: 100%; margin-top: 18px; }
/* Keep the heading background below the statues while tooltips float above both. */
.altar-heading > h1, .altar-heading > p { position: relative; z-index: 1; }
.altar-heading .buff-time { font-weight: 700; }
.altar-heading::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url('/static/Waage_hand_right_1_d.png') center 12% / cover no-repeat; filter: grayscale(.6) saturate(.5); opacity: .55; }
.altar-heading::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, #070e1dd9, #0c1a3647 52%, #070e1dbf), linear-gradient(0deg, #0a1222cc, transparent 65%); }
.altar-eyebrow { color: #a3b2d1; font: 10px/1.5 Arial, sans-serif; letter-spacing: .22em; }
.altar-heading h1 { font-size: clamp(36px, 6vw, 58px); font-weight: normal; letter-spacing: .12em; margin: 12px 0; }
.altar-heading h1, .altar-heading p { text-shadow: 0 2px 12px #000; }
.altar-heading > p { color: #c3cee5; font-size: 15px; margin: 0; line-height: 1.6; }
.altar-phases { position: relative; z-index: 1; margin: 0 0 24px; border: 1px solid #334566; background: #0e182b; box-shadow: 0 12px 35px #0004; }
.altar-phase-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.altar-phase { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; padding: 22px 8px; color: #93a1bc; font-size: clamp(12px, 2vw, 17px); text-align: center; }
.altar-phase + .altar-phase { border-left: 1px solid #334566; }
.altar-phase.is-active { color: #edf2ff; background: linear-gradient(180deg, #243d72, #16284e); box-shadow: inset 0 0 24px #456acb44, inset 0 -3px #7c9ce8, 0 0 18px #3456a647; text-shadow: 0 0 12px #91b3ff99; }
/* Seat the bowls (72% down the image) on the border; the wings hang below it.
   Account for the transparent sides while keeping visible artwork on mobile. */
.altar-phase-statue { position: absolute; bottom: 100%; width: clamp(64px, 18vw, 140px); height: auto; display: block; pointer-events: none; user-select: none; filter: drop-shadow(0 5px 6px #0005); }
.altar-phase-statue-left { left: 0; transform: translate(-32%, 28%) scale(1.6); transform-origin: 63% 72%; }
.altar-phase-statue-right { right: 0; transform: translate(32%, 28%) scale(1.6); transform-origin: 37% 72%; }
.altar-sanctum { --might-dark: #172c68; --might: #3054a6; --might-light: #587bd2; border: 1px solid #26334b; border-radius: 20px; overflow: visible; background: radial-gradient(ellipse at 50% 20%, #1b2b5045, transparent 65%), #0b111cf5; box-shadow: 0 24px 90px #0005; }
.altar-sanctum > [data-altar-content] { overflow: hidden; }
/* Align the stone edges, accounting for the transparent margins in both images. */
.altar-sanctum::before, .altar-sanctum::after { content: ''; position: absolute; top: -1px; z-index: 6; width: clamp(80px, 15vw, 150px); aspect-ratio: 1; background: center / contain no-repeat; pointer-events: none; }
.altar-sanctum::before { left: -1px; background-image: url('/static/upper_left_corner.png'); transform: translate(-14%, -9.7%); }
.altar-sanctum::after { right: -1px; background-image: url('/static/upper_right_corner.png'); transform: translate(14%, -9.7%); }
.altar-number { font-family: Arial, sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; }
.ritual-stage { position: relative; max-width: 1000px; margin: auto; padding: 222px 100px 24px; }
.ritual-arc { position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; overflow: visible; }
.ritual-arc path { fill: none; }
.ritual-orbit { stroke: #53618540; stroke-width: 1; stroke-dasharray: 2 10; }
.ritual-track { stroke: #202b43; stroke-width: 12; }
.ritual-fill { stroke: url('#might-arc-gradient'); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .8s ease; }
.ritual-stage.is-charged .ritual-fill { filter: drop-shadow(0 0 8px #476ddf) drop-shadow(0 0 20px #27458d); animation: altar-glow 2.5s ease-in-out infinite alternate; }
.ritual-summary { position: absolute; top: 94px; left: 15%; right: 15%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; }
.ritual-total { font-size: clamp(17px, 3vw, 28px); }
.ritual-countdown { font-size: 25px; color: #a0b6ff; }
.ritual-countdown:empty { display: none; }
.ritual-status { color: #a5b1c9; font-size: 12px; }
.altar-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; position: relative; }
.altar-pillar { text-align: center; min-width: 0; }
.pillar-buff { min-height: 190px; display: flex; flex-direction: column; align-items: center; }
.buff-halo { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #5670ae60; background: radial-gradient(circle, #314a8166, transparent 70%); box-shadow: 0 0 28px #29498326; }
.buff-halo img { width: 54px; height: 54px; object-fit: contain; }
.buff-halo.is-empty { background: #000; border-color: #26334b; box-shadow: none; }
.buff-halo.is-empty img { visibility: hidden; }
.pillar-buff h2 { font-size: 18px; font-weight: normal; margin: 12px 0 7px; color: #e7ebfb; }
.pillar-buff p { font-size: 12px; line-height: 1.5; margin: 0 0 8px; color: #9eaac4; }
.buff-duration { font-size: 11px; color: #8293b8; margin-top: auto; padding-bottom: 12px; }
.pillar-cap, .pillar-base { height: 15px; margin: 0 2%; border: 1px solid #61749c; border-radius: 3px; background: linear-gradient(#475674, #202a40); box-shadow: 0 4px 12px #0006; }
.pillar-base { height: 22px; margin: 0; border-bottom: 4px solid #151e31; }
.pillar-shaft { position: relative; height: 220px; margin: 0 9%; overflow: hidden; display: flex; flex-direction: column; align-items: center; border-inline: 2px solid #455677; background: repeating-linear-gradient(90deg, #172137 0, #172137 12%, #293550 13%, #151e31 17%); }
.pillar-energy { position: absolute; bottom: 0; width: 100%; height: 0; background: linear-gradient(0deg, #12275be8, #3054a6dc); border-top: 1px solid #6587e1; box-shadow: 0 -8px 28px #315bb24d; transition: height .8s ease; }
.pillar-shaft > :not(.pillar-energy) { position: relative; z-index: 1; text-shadow: 0 2px 6px #000; }
.pillar-numeral { color: #adbde0; font-size: 28px; margin-top: 22px; }
.pillar-chance { font-size: clamp(20px, 3vw, 32px); margin-top: 23px; }
.pillar-chance-label, .pillar-might-label { font: 10px Arial, sans-serif; color: #b5c2de; margin-top: 5px; }
.pillar-amount { font-size: 13px; margin-top: 21px; overflow-wrap: anywhere; }
.altar-invest { width: 100%; margin-top: 20px; padding: 13px 7px; font: 12px/1.4 Arial, sans-serif; color: #ecf1ff; background: linear-gradient(#294986, #192f60); border: 1px solid #526daf; border-radius: 5px; cursor: pointer; box-shadow: 0 5px 16px #0004; }
.altar-invest:hover:not(:disabled) { background: #34569b; box-shadow: 0 0 20px #3b5ba24d; }
.altar-invest:disabled { opacity: .4; cursor: not-allowed; }
.altar-invest:focus-visible, #altar-amount:focus-visible { outline: 2px solid #a9bfff; outline-offset: 4px; }
.altar-pillar.is-winner .buff-halo { box-shadow: 0 0 30px #547be88c; border-color: #98b0ec; }
.altar-controls { text-align: center; padding: 12px 24px 32px; }
#altar-invest-form label { display: block; margin-bottom: 12px; color: #bac6e3; font-size: 17px; }
.might-input-wrap { display: flex; width: 235px; margin: auto; align-items: center; border: 1px solid #50659b; border-radius: 6px; background: linear-gradient(#101d36b3, #101d36b3), url('/static/altar_hand.png') center 38% / cover no-repeat, #101d36; }
#altar-amount { width: 158px; background: transparent; color: #e6edff; font-size: 25px; border: 0; padding: 14px; min-width: 0; }
.might-input-wrap > span { color: #9aaed8; font-size: 13px; }
.altar-input-hint, .altar-rules { color: #8594b3; font-size: 12px; line-height: 1.7; }
.altar-feedback { min-height: 20px; color: #bfd0fc; font: 13px/1.5 Arial, sans-serif; margin: 12px 0; }
.altar-feedback.is-error { color: #ffb8a8; }
.personal-might { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.might-total { font-size: 19px; }
.might-gauge-wrap { display: flex; align-items: center; gap: 16px; width: min(380px, 100%); margin: 5px 0; }
.might-gauge { position: relative; height: 32px; flex: 1; min-width: 0; border: 1px solid #536b9e; overflow: hidden; background: #101728; box-shadow: inset 0 0 12px #0008; }
.might-gauge-fill { position: absolute; left: 0; top: 0; width: 0; height: 100%; background: linear-gradient(0deg, #192d68, #3f61b5, #203976); transition: width .6s ease; }
.might-gauge-lines { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(20% - 1px), #94acdf44 calc(20% - 1px), #94acdf44 20%); }
.overcharge-marker { position: relative; flex: none; max-width: 120px; display: flex; align-items: center; gap: 9px; color: #aac1ff; text-align: left; font: 10px Arial, sans-serif; letter-spacing: .04em; }
.overcharge-marker::before { content: ''; position: absolute; left: -8px; top: 4px; bottom: 4px; width: 3px; background: #6f94f1; box-shadow: 0 0 12px #456ed6; }
.overcharge-sigil { font-size: 29px; text-shadow: 0 0 15px #688fea; }
.overcharge-marker strong { display: block; font-size: 13px; margin-top: 5px; letter-spacing: normal; overflow-wrap: anywhere; }
.might-regeneration { color: #8b9bbc; font-size: 12px; margin: 0; }
.altar-rules { max-width: 480px; margin: 25px auto 0; }
.altar-login, .altar-login a { color: #c5d5ff; }
.altar-notice { text-align: center; color: #c5d5ff; }
.altar-contributors { margin-top: 24px; padding: 24px; border: 1px solid #334566; background: #0e182b; }
.altar-contributors h2 { margin: 0 0 18px; font-size: 21px; font-weight: normal; }
.altar-contributors-empty { color: #9aa6bf; font-size: 14px; }
.altar-contributor-list { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.altar-contributor-card { display: grid; grid-template-columns: 36px 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid #2c3c5b; background: #101d34; }
.altar-contributor-rank { color: #a7bce8; font-size: 16px; }
.altar-contributor-avatar { width: 40px; height: 40px; object-fit: cover; border: 1px solid #506b9e; }
.altar-contributor-name { overflow-wrap: anywhere; color: #e0e8f8; font: 14px/1.4 Arial, sans-serif; }
.altar-contributor-might { display: flex; flex-direction: column; gap: 4px; text-align: right; color: #b6caff; }
.altar-contributor-might strong { font-size: 16px; }
.altar-contributor-might > span { font: 10px Arial, sans-serif; color: #9aa6bf; }
.altar-contributors-toggle { display: block; margin: 18px auto 0; padding: 10px 20px; border: 1px solid #526daf; background: #192f60; color: #ecf1ff; font: 13px Arial, sans-serif; cursor: pointer; }
.altar-contributors-toggle:hover { background: #294986; }
.altar-contributors-toggle:focus-visible { outline: 2px solid #a9bfff; outline-offset: 4px; }
@keyframes altar-glow { to { filter: drop-shadow(0 0 13px #5c82f2) drop-shadow(0 0 28px #375ac2); } }
@media (max-width: 700px) {
  body { padding: 20px 10px 65px; }
  .altar-heading { min-height: 180px; padding: 24px 16px 40px; margin: 20px 0; }
  .altar-phase { padding: 18px 4px; gap: 4px; }
  .altar-contributors { padding: 18px 12px; }
  .altar-contributor-card { grid-template-columns: 24px 32px minmax(0, 1fr) auto; gap: 8px; padding: 10px 8px; }
  .altar-contributor-avatar { width: 32px; height: 32px; }
  .altar-contributor-might strong { font-size: 13px; }
  .altar-heading::before { background-size: auto 260%; background-position: 52% 9%; }
  .altar-eyebrow { font-size: 9px; letter-spacing: .12em; }
  .ritual-stage { padding: 170px 20px 20px; }
  .ritual-summary { top: 65px; left: 7%; right: 7%; gap: 5px; }
  .ritual-arc { top: 8px; }
  .altar-pillars { gap: 12px; }
  .pillar-buff { min-height: 200px; }
  .buff-halo { width: 58px; height: 58px; }
  .buff-halo img { width: 43px; height: 43px; }
  .pillar-buff h2 { font-size: 14px; }
  .pillar-buff p { font-size: 11px; }
  .pillar-shaft { height: 195px; margin-inline: 6%; }
  .pillar-numeral { font-size: 24px; }
  .pillar-chance { font-size: 22px; }
  .altar-invest { font-size: 11px; padding: 10px 4px; min-height: 52px; }
  .ritual-countdown { font-size: 20px; }
  .overcharge-marker { gap: 5px; }
}
@media (max-width: 380px) {
  .ritual-stage { padding-inline: 10px; }
  .altar-pillars { gap: 8px; }
  .pillar-buff { min-height: 222px; }
  .pillar-chance { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .altar-sanctum * { animation: none !important; transition: none !important; } }