:root {
  --bg: #05070a;
  --panel: rgba(9, 13, 17, 0.93);
  --panel-soft: rgba(15, 19, 24, 0.94);
  --iron: #3b4148;
  --iron-light: #7f8993;
  --line: rgba(134, 154, 174, 0.3);
  --soul: #55cfff;
  --soul-pale: #bcf1ff;
  --violet: #826dff;
  --ember: #e76625;
  --ember-hot: #ff9a3d;
  --text: #e9eef2;
  --muted: #a8b0b9;
  --ink: #111821;
  --archive: #b9b0a2;
  --archive-light: #d2ccc2;
  --shell: 1030px;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: "Trebuchet MS", Arial, sans-serif;
  background:
    radial-gradient(circle at 50% -10%, rgba(38, 112, 155, .18), transparent 38%),
    radial-gradient(circle at 87% 25%, rgba(126, 44, 19, .13), transparent 23%),
    linear-gradient(#06090d, #020305 72%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background:
    repeating-linear-gradient(120deg, transparent 0 70px, rgba(255,255,255,.012) 71px 72px),
    radial-gradient(circle at 25% 50%, rgba(76, 160, 204, .08), transparent 23%);
}

a { color: inherit; }

.ambient {
  position: fixed;
  border-radius: 50%;
  filter: blur(75px);
  pointer-events: none;
  opacity: .25;
}

.ambient-a {
  width: 260px; height: 260px;
  left: -90px; top: 170px;
  background: #167aa9;
  animation: driftA 10s ease-in-out infinite alternate;
}

.ambient-b {
  width: 210px; height: 210px;
  right: -80px; top: 390px;
  background: #9c3a15;
  animation: driftB 13s ease-in-out infinite alternate;
}

@keyframes driftA {
  to { transform: translate(45px, 55px) scale(1.08); opacity: .32; }
}
@keyframes driftB {
  to { transform: translate(-45px, -35px) scale(.95); opacity: .18; }
}

.site-shell {
  width: min(var(--shell), calc(100% - 20px));
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  background:
    linear-gradient(90deg, rgba(0,0,0,.78), rgba(12,17,22,.92) 8%, rgba(10,14,19,.88) 92%, rgba(0,0,0,.78));
  border-left: 1px solid rgba(111, 141, 163, .22);
  border-right: 1px solid rgba(111, 141, 163, .22);
  box-shadow: 0 0 90px #000;
}

.masthead {
  position: relative;
  padding: 8px 20px 3px;
  text-align: center;
}

.login-link {
  position: absolute;
  z-index: 3;
  right: 26px;
  top: 17px;
  color: var(--soul-pale);
  font: 700 12px Georgia, serif;
  text-decoration: none;
  letter-spacing: .7px;
}

.login-link:hover { color: white; text-shadow: 0 0 12px var(--soul); }

.brand-art {
  display: block;
  width: min(760px, 89%);
  height: auto;
  margin: -18px auto -22px;
  mix-blend-mode: screen;
  filter: drop-shadow(0 16px 22px #000);
  mask-image: linear-gradient(to bottom, black 0%, black 86%, transparent 100%);
}

.player-count {
  position: relative;
  z-index: 2;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 15px;
  padding: 7px 14px;
  color: #c8d2db;
  background: rgba(5, 9, 13, .72);
  border: 1px solid rgba(88, 176, 217, .18);
  box-shadow: inset 0 0 16px rgba(59, 166, 218, .05);
  font: 12px Georgia, serif;
}

.player-count strong {
  color: var(--soul-pale);
  text-shadow: 0 0 8px rgba(75, 198, 255, .8);
}

.soul-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--soul);
  box-shadow: 0 0 6px var(--soul), 0 0 13px var(--violet);
  animation: soulPulse 1.7s ease-in-out infinite;
}

@keyframes soulPulse {
  50% { opacity: .45; transform: scale(.75); }
}

.portal-layout {
  display: grid;
  grid-template-columns: 215px 1fr;
  gap: 28px;
  padding: 8px 34px 30px;
}

.nav-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.iron-panel {
  position: relative;
  padding: 16px 13px 12px;
  background:
    linear-gradient(150deg, rgba(37, 43, 49, .4), transparent 25%),
    linear-gradient(#10151b, #080b0f);
  border: 1px solid #414b53;
  box-shadow:
    inset 0 0 0 1px #11171c,
    inset 0 0 24px rgba(72, 170, 218, .025),
    0 5px 13px rgba(0,0,0,.55);
}

.iron-panel::before,
.iron-panel::after {
  content: "";
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #252d33;
  border: 1px solid #59626a;
  top: 7px;
}

.iron-panel::before { left: 7px; }
.iron-panel::after { right: 7px; }

.iron-panel h2 {
  margin: -9px 0 9px;
  color: #c8d4dc;
  text-align: center;
  font: 700 12px Georgia, serif;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.iron-panel a {
  display: block;
  padding: 5px 4px;
  color: #b8c0c8;
  text-decoration: none;
  font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,.035);
}

.iron-panel a:last-child { border-bottom: 0; }

.iron-panel a:hover {
  color: var(--soul-pale);
  background: linear-gradient(90deg, rgba(69, 187, 238, .10), transparent);
  text-shadow: 0 0 9px rgba(73, 199, 255, .45);
}

.iron-panel a span {
  display: inline-block;
  width: 23px;
  color: #6ed6ff;
  text-align: center;
}

.main-column { min-width: 0; }

.play-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
  margin-bottom: 18px;
}

.play-card {
  position: relative;
  min-height: 112px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 17px 22px 17px 72px;
  color: white;
  text-decoration: none;
  background:
    radial-gradient(circle at 12% 45%, rgba(77, 199, 255, .16), transparent 26%),
    linear-gradient(135deg, #161c22, #090c10);
  border: 1px solid #56636c;
  box-shadow:
    inset 0 0 0 1px #11171d,
    0 8px 18px rgba(0,0,0,.52);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.play-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.045), transparent 65%);
  transform: translateX(-100%);
  transition: transform .45s ease;
}

.play-card:hover {
  transform: translateY(-2px);
  border-color: #76bfdb;
  box-shadow:
    inset 0 0 25px rgba(80, 195, 241, .06),
    0 10px 22px rgba(0,0,0,.7);
}

.play-card:hover::after { transform: translateX(100%); }

.play-card.member {
  background:
    radial-gradient(circle at 12% 45%, rgba(225, 91, 31, .15), transparent 26%),
    linear-gradient(135deg, #1c1714, #0b0c0f);
}

.play-card.member:hover { border-color: #a96b48; }

.sigil {
  position: absolute;
  left: 21px;
  color: var(--soul);
  font: 42px Georgia, serif;
  text-shadow: 0 0 14px rgba(74, 199, 255, .75);
}

.member .sigil {
  color: var(--ember-hot);
  text-shadow: 0 0 14px rgba(240, 89, 28, .6);
}

.play-title {
  font: 700 20px Georgia, serif;
}

.play-sub {
  margin-top: 5px;
  color: #89959f;
  font-size: 11px;
  letter-spacing: .35px;
}

.hero-panel {
  min-height: 252px;
  display: grid;
  grid-template-columns: 1fr 190px;
  align-items: center;
  gap: 16px;
  padding: 31px 32px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 48%, rgba(58, 177, 230, .11), transparent 29%),
    radial-gradient(circle at 87% 64%, rgba(188, 64, 25, .10), transparent 34%),
    linear-gradient(135deg, rgba(22, 28, 34, .96), rgba(6, 8, 11, .99));
  border: 1px solid #3b454d;
  box-shadow:
    inset 0 0 55px rgba(0,0,0,.55),
    0 9px 22px rgba(0,0,0,.48);
}

.kicker,
.section-kicker {
  color: #6fcbef;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}

.hero-copy h1 {
  max-width: 500px;
  margin: 8px 0 12px;
  color: #eef4f7;
  font: 700 31px/1.12 Georgia, serif;
}

.hero-copy p {
  max-width: 530px;
  margin: 0;
  color: #9ca7af;
  font: 13px/1.58 Georgia, serif;
}

.chronicle {
  width: calc(100% - 120px);
  max-width: 735px;
  margin: 0 auto 30px;
}

.chronicle-top,
.chronicle-bottom {
  height: 12px;
  background: linear-gradient(90deg, #31383e, #65717a 8%, #242a2f 20%, #49545d 50%, #242a2f 80%, #65717a 92%, #31383e);
  border: 1px solid #151a1e;
  box-shadow: 0 4px 9px rgba(0,0,0,.55);
}

.chronicle-body {
  position: relative;
  padding: 27px 42px 31px;
  color: #1a2025;
  background:
    radial-gradient(circle at 70% 20%, rgba(255,255,255,.19), transparent 30%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.012) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, #8e887e, var(--archive-light) 8%, #c9c2b7 50%, var(--archive-light) 92%, #8e887e);
  border-left: 1px solid #444b50;
  border-right: 1px solid #444b50;
  box-shadow: inset 0 0 40px rgba(48, 58, 65, .16);
}

.chronicle-body::before {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border: 1px solid rgba(47, 62, 71, .18);
}

.section-kicker {
  text-align: center;
  color: #3f6678;
}

.chronicle h2 {
  margin: 5px 0 17px;
  color: #1d2b32;
  text-align: center;
  font: 700 29px Georgia, serif;
}

.news-entry {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid rgba(31, 45, 53, .22);
}

.news-entry time {
  width: 50px;
  height: 53px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #cceeff;
  background: linear-gradient(#24313a, #12191e);
  border: 1px solid #59636a;
  box-shadow: inset 0 0 12px rgba(73, 194, 245, .08);
}

.news-day {
  font: 700 20px/1 Georgia, serif;
}

.news-month {
  margin-top: 4px;
  color: #78bedb;
  font-size: 9px;
  letter-spacing: 1px;
}

.news-entry h3 {
  margin: 0 0 5px;
  color: #24343d;
  font: 700 18px Georgia, serif;
}

.news-entry p {
  margin: 0 0 7px;
  color: #343c41;
  font: 13px/1.5 Georgia, serif;
}

.news-entry a {
  color: #245f7a;
  font: 700 11px Georgia, serif;
}

footer {
  display: flex;
  justify-content: center;
  gap: 9px;
  padding: 8px 20px 26px;
  color: #68737c;
  font-size: 10px;
}

footer a {
  color: #86939c;
  text-decoration: none;
}

@media (max-width: 780px) {
  .brand-art {
    width: 100%;
    margin-top: 2px;
  }

  .portal-layout {
    grid-template-columns: 1fr;
    padding-left: 17px;
    padding-right: 17px;
  }

  .nav-stack {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .hero-panel {
    grid-template-columns: 1fr;
  }

  .alignment-orb {
    display: none;
  }

  .chronicle {
    width: calc(100% - 34px);
  }
}

@media (max-width: 560px) {
  .login-link {
    right: 15px;
    top: 10px;
  }

  .player-count {
    font-size: 10px;
  }

  .nav-stack,
  .play-grid {
    grid-template-columns: 1fr;
  }

  .hero-panel {
    padding: 25px 22px;
  }

  .hero-copy h1 {
    font-size: 26px;
  }

  .chronicle-body {
    padding-left: 25px;
    padding-right: 25px;
  }
}




/* Soulfire hero art — fire-like version */
.soulfire-stage {
  width: 214px;
  height: 224px;
  margin: auto;
  position: relative;
  display: grid;
  place-items: center;
  overflow: visible;
  filter: drop-shadow(0 0 22px rgba(74, 201, 255, .23));
}

.soulfire-stage::before {
  content: "";
  position: absolute;
  inset: 34px 36px 28px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 58%, rgba(158, 238, 255, .24), rgba(99, 90, 255, .12) 38%, transparent 72%);
  filter: blur(16px);
  animation: soulGlowFlicker 2.1s ease-in-out infinite;
}

.soulfire-stage::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 82%, rgba(75, 191, 255, .12), transparent 55%);
  filter: blur(24px);
  opacity: .65;
  animation: hearthPulse 3.2s ease-in-out infinite;
}

.soulfire-halo {
  position: absolute;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  border: 1px solid rgba(109, 216, 255, .16);
  box-shadow:
    0 0 22px rgba(87, 202, 255, .17),
    inset 0 0 24px rgba(126, 82, 255, .07);
  animation: slowSoulSpin 9s linear infinite;
}

.soulfire-art {
  position: relative;
  z-index: 3;
  width: 190px;
  height: 190px;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  transform-origin: 50% 78%;
  filter:
    saturate(1.14)
    drop-shadow(0 0 8px rgba(105, 224, 255, .34))
    drop-shadow(0 0 18px rgba(91, 91, 255, .16));
  animation: soulFlameBurn 2.2s ease-in-out infinite;
}

.soulfire-stage .soulfire-echo,
.soulfire-stage .soulfire-echo-two {
  position: absolute;
  width: 182px;
  height: 182px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  opacity: .26;
  mix-blend-mode: screen;
  filter: blur(4px) saturate(1.1);
  transform-origin: 50% 78%;
}

.soulfire-stage .soulfire-echo {
  z-index: 1;
  animation: soulFlameEcho 1.7s ease-in-out infinite;
}

.soulfire-stage .soulfire-echo-two {
  z-index: 2;
  opacity: .18;
  filter: blur(10px) saturate(1.2);
  animation: soulFlameEchoTwo 2.6s ease-in-out infinite;
}

.soul-mote {
  position: absolute;
  z-index: 4;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d7f9ff;
  box-shadow: 0 0 8px #61d9ff, 0 0 16px #695cff;
  opacity: .7;
}

.mote-a { animation: moteRiseA 4.8s linear infinite; }
.mote-b { animation: moteRiseB 5.6s linear infinite -1.4s; }
.mote-c { animation: moteRiseC 6.3s linear infinite -2.6s; }

@keyframes soulFlameBurn {
  0%   { transform: translateY(4px) scaleX(.97) scaleY(.95) rotate(-1deg); opacity: .93; }
  16%  { transform: translateY(0px) scaleX(1.00) scaleY(1.04) rotate(0deg); opacity: 1; }
  32%  { transform: translateY(-5px) scaleX(.96) scaleY(1.08) rotate(1deg); }
  50%  { transform: translateY(-7px) scaleX(1.02) scaleY(1.02) rotate(-0.6deg); }
  68%  { transform: translateY(-3px) scaleX(.98) scaleY(1.09) rotate(0.8deg); }
  84%  { transform: translateY(1px) scaleX(1.01) scaleY(.98) rotate(-0.5deg); opacity: .98; }
  100% { transform: translateY(4px) scaleX(.97) scaleY(.95) rotate(-1deg); opacity: .93; }
}

@keyframes soulFlameEcho {
  0%   { transform: translateY(7px) translateX(-2px) scaleX(.94) scaleY(.92); opacity: .16; }
  30%  { transform: translateY(-1px) translateX(2px) scaleX(1.00) scaleY(1.08); opacity: .26; }
  55%  { transform: translateY(-7px) translateX(-1px) scaleX(.95) scaleY(1.12); opacity: .22; }
  100% { transform: translateY(7px) translateX(-2px) scaleX(.94) scaleY(.92); opacity: .16; }
}

@keyframes soulFlameEchoTwo {
  0%   { transform: translateY(10px) scaleX(.98) scaleY(.90); opacity: .10; }
  45%  { transform: translateY(-3px) scaleX(1.03) scaleY(1.10); opacity: .18; }
  70%  { transform: translateY(-10px) scaleX(.96) scaleY(1.16); opacity: .14; }
  100% { transform: translateY(10px) scaleX(.98) scaleY(.90); opacity: .10; }
}

@keyframes soulGlowFlicker {
  0%,100% { opacity: .52; transform: scale(.94); }
  20%     { opacity: .76; transform: scale(1.02); }
  46%     { opacity: .60; transform: scale(.98); }
  61%     { opacity: .82; transform: scale(1.06); }
  82%     { opacity: .58; transform: scale(.97); }
}

@keyframes hearthPulse {
  0%,100% { opacity: .50; transform: scale(.92); }
  50%     { opacity: .80; transform: scale(1.06); }
}

@keyframes slowSoulSpin {
  to { transform: rotate(360deg); }
}

@keyframes moteRiseA {
  0%   { transform: translate(-44px, 58px) scale(.7); opacity: 0; }
  12%  { opacity: .55; }
  60%  { opacity: .85; }
  100% { transform: translate(-72px, -82px) scale(1.22); opacity: 0; }
}

@keyframes moteRiseB {
  0%   { transform: translate(38px, 64px) scale(.7); opacity: 0; }
  15%  { opacity: .45; }
  68%  { opacity: .75; }
  100% { transform: translate(76px, -72px) scale(1.12); opacity: 0; }
}

@keyframes moteRiseC {
  0%   { transform: translate(0px, 70px) scale(.6); opacity: 0; }
  18%  { opacity: .42; }
  72%  { opacity: .66; }
  100% { transform: translate(16px, -92px) scale(1.06); opacity: 0; }
}

@media (max-width: 780px) {
  .soulfire-stage {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .soulfire-art,
  .soulfire-stage::before,
  .soulfire-stage::after,
  .soulfire-halo,
  .soul-mote,
  .soulfire-stage .soulfire-echo,
  .soulfire-stage .soulfire-echo-two {
    animation: none !important;
  }
}


/* v5: actual looping Soulfire video */
.soulfire-stage {
  overflow: hidden;
  border-radius: 46%;
  isolation: isolate;
  background: #030609;
}
.soulfire-video {
  position: relative;
  z-index: 3;
  width: 210px;
  height: 210px;
  object-fit: cover;
  mix-blend-mode: screen;
  filter:
    saturate(1.22)
    contrast(1.08)
    drop-shadow(0 0 10px rgba(97, 224, 255, .38))
    drop-shadow(0 0 24px rgba(83, 111, 255, .20));
}
.soulfire-art,
.soulfire-echo,
.soulfire-echo-two,
.soulfire-halo {
  display: none !important;
}

/* Functional inner pages */
.inner-masthead {
  min-height: 154px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(100, 157, 187, .15);
}
.mini-brand {
  display: block;
  width: min(560px, 74%);
  margin-top: -24px;
}
.mini-brand img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
  filter: drop-shadow(0 10px 18px #000);
  mask-image: linear-gradient(to bottom, #000 0 75%, transparent 100%);
}
.inner-layout {
  padding-top: 26px;
  min-height: 560px;
}
.content-panel {
  min-height: 460px;
  padding: 30px 34px 38px;
  background:
    radial-gradient(circle at 90% 5%, rgba(67, 177, 224, .08), transparent 28%),
    linear-gradient(145deg, rgba(20, 27, 34, .96), rgba(7, 10, 13, .98));
  border: 1px solid #3d4851;
  box-shadow: inset 0 0 45px rgba(0,0,0,.36), 0 9px 22px rgba(0,0,0,.38);
}
.content-panel > h1 {
  margin: 6px 0 24px;
  font: 700 34px Georgia, serif;
  color: #edf6f9;
}
.lead {
  color: #aeb8bf;
  font: 15px/1.65 Georgia, serif;
}
.status-banner {
  padding: 14px 16px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid rgba(98, 210, 255, .26);
  background: rgba(62, 144, 180, .07);
  color: #bbdce9;
}
.status-banner strong { color: #e2f7ff; }
.game-slot {
  min-height: 320px;
  display: grid;
  place-items: center;
  border: 1px solid #34434d;
  background:
    radial-gradient(circle at 50% 44%, rgba(67, 183, 230, .09), transparent 28%),
    #05080b;
  box-shadow: inset 0 0 60px rgba(0,0,0,.8);
}
.game-slot-inner {
  max-width: 480px;
  text-align: center;
  color: #88969f;
}
.game-slot-sigil {
  display: block;
  color: #6bdcff;
  font: 46px Georgia, serif;
  text-shadow: 0 0 18px #3c8fc8;
}
.game-slot h2 { color: #d9ebf2; font-family: Georgia, serif; }
.game-slot code {
  display: inline-block;
  margin-top: 8px;
  color: #72c7e8;
  background: #070d11;
  border: 1px solid #26343c;
  padding: 8px 12px;
}
.info-grid, .support-grid, .account-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.support-grid { grid-template-columns: repeat(3, 1fr); }
.info-card, .membership-card {
  padding: 18px;
  background: rgba(5, 9, 12, .64);
  border: 1px solid #303b43;
}
.info-card h3, .membership-card h2 { margin-top: 0; color: #d8edf5; font-family: Georgia, serif; }
.info-card p, .membership-card p { margin-bottom: 0; color: #8f9ca4; line-height: 1.55; font-size: 13px; }
.world-table, .score-table { margin-top: 22px; border: 1px solid #34424b; }
.world-row, .score-row {
  display: grid;
  gap: 8px;
  padding: 11px 13px;
  border-top: 1px solid rgba(255,255,255,.05);
  color: #aeb8be;
  font-size: 12px;
}
.world-row { grid-template-columns: 1fr 1fr 1fr 1fr; }
.score-row { grid-template-columns: .7fr 1.7fr 1fr .7fr 1fr; }
.world-row.header, .score-row.header {
  border-top: 0;
  color: #d6ebf3;
  background: #111920;
  font-weight: 700;
}
.status-offline { color: #ad6d5c; }
.search-mock { display: flex; gap: 8px; margin-top: 20px; }
.search-mock input, .auth-form input {
  width: 100%;
  padding: 11px 12px;
  color: #dce9ee;
  background: #070b0e;
  border: 1px solid #374650;
}
.search-mock button, .auth-form button, .inline-button {
  padding: 10px 20px;
  color: #dfeff5;
  background: #17242c;
  border: 1px solid #3b5968;
  text-decoration: none;
}
.empty-state { margin-top: 12px; padding: 30px; text-align: center; color: #66747d; border: 1px dashed #2c3a42; }
.archive-post { padding: 20px 0; border-top: 1px solid rgba(255,255,255,.08); }
.archive-post:first-of-type { border-top: 0; }
.archive-post time { color: #5bc9ef; font-size: 10px; letter-spacing: 1.5px; }
.archive-post h2 { margin: 6px 0; color: #dcebf1; font: 700 21px Georgia, serif; }
.archive-post p { color: #97a3aa; line-height: 1.55; }
.forum-list { border: 1px solid #34424b; }
.forum-row { padding: 15px; border-top: 1px solid rgba(255,255,255,.05); display: flex; flex-direction: column; gap: 4px; }
.forum-row:first-child { border-top: 0; }
.forum-row strong { color: #d5e9f1; }
.forum-row span { color: #83919a; font-size: 12px; }
.roadmap { display: grid; gap: 12px; }
.road-step { padding: 16px; border-left: 3px solid #3a5663; background: #090e12; }
.road-step.done { border-left-color: #56ccef; }
.road-step b { display: block; color: #d7eaf1; margin-bottom: 5px; }
.road-step span { color: #8f9ca4; font-size: 12px; }
.rules-list { color: #aeb7bd; line-height: 1.7; }
.muted-note { color: #6f7b82; font-size: 12px; }
.account-grid { grid-template-columns: repeat(3, 1fr); }
.account-action {
  display: flex; flex-direction: column; gap: 5px;
  padding: 20px;
  color: #d8edf5;
  text-decoration: none;
  background: #0a1014;
  border: 1px solid #34434c;
}
.account-action:hover { border-color: #5caccb; }
.account-action span { color: #80909a; font-size: 11px; }
.auth-form { max-width: 430px; display: grid; gap: 14px; }
.auth-form label { display: grid; gap: 6px; color: #b9c8cf; font-size: 12px; }
.auth-form p { color: #74828a; font-size: 11px; }
.auth-form button[disabled], .search-mock button[disabled] { opacity: .55; cursor: not-allowed; }

@media (max-width: 700px) {
  .support-grid, .account-grid, .info-grid { grid-template-columns: 1fr; }
  .world-row, .score-row { font-size: 10px; }
}


/* v6 — richer animated banner and framed living soulfire */
.masthead {
  min-height: 290px;
  overflow: hidden;
  padding: 6px 20px 10px;
}
.masthead::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 8%, rgba(97, 216, 255, .10), transparent 30%),
    linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.brand-stack {
  position: relative;
  width: min(820px, 96%);
  margin: 0 auto;
  min-height: 228px;
}
.brand-art {
  position: relative;
  z-index: 2;
  width: min(760px, 89%);
  margin: -12px auto 0;
  animation: brandBreathe 6.2s ease-in-out infinite;
}
@keyframes brandBreathe {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.01); }
}

.dust-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.dust {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(197, 220, 231, .7);
  box-shadow: 0 0 12px rgba(134, 207, 240, .35);
  filter: blur(.15px);
  opacity: 0;
}
.dust-1 { top: 62px; left: -2%; animation: driftDust1 12s linear infinite; }
.dust-2 { top: 94px; left: -5%; width: 2px; height: 2px; animation: driftDust2 10s linear infinite 1.3s; }
.dust-3 { top: 118px; left: -7%; width: 3px; height: 3px; animation: driftDust3 14s linear infinite .4s; }
.dust-4 { top: 58px; left: -3%; width: 2px; height: 2px; animation: driftDust4 9.2s linear infinite 2.2s; }
.dust-5 { top: 138px; left: -9%; animation: driftDust5 12.8s linear infinite .8s; }
.dust-6 { top: 83px; left: -4%; width: 2px; height: 2px; animation: driftDust6 11.6s linear infinite 3.1s; }
.dust-7 { top: 146px; left: -8%; width: 3px; height: 3px; animation: driftDust2 15s linear infinite 4.4s; }
.dust-8 { top: 106px; left: -10%; width: 2px; height: 2px; animation: driftDust4 13.4s linear infinite 5.2s; }

@keyframes driftDust1 { 0%{transform:translate(-20px,0) scale(.5);opacity:0;} 10%{opacity:.5;} 100%{transform:translate(1100px, -24px) scale(1.2);opacity:0;} }
@keyframes driftDust2 { 0%{transform:translate(-20px,8px) scale(.4);opacity:0;} 12%{opacity:.35;} 100%{transform:translate(1080px,-18px) scale(1.1);opacity:0;} }
@keyframes driftDust3 { 0%{transform:translate(-20px,-6px) scale(.5);opacity:0;} 14%{opacity:.55;} 100%{transform:translate(1120px,-36px) scale(1.2);opacity:0;} }
@keyframes driftDust4 { 0%{transform:translate(-20px,10px) scale(.3);opacity:0;} 8%{opacity:.28;} 100%{transform:translate(1090px,-10px) scale(1);opacity:0;} }
@keyframes driftDust5 { 0%{transform:translate(-20px,0) scale(.45);opacity:0;} 10%{opacity:.45;} 100%{transform:translate(1110px,-28px) scale(1.14);opacity:0;} }
@keyframes driftDust6 { 0%{transform:translate(-20px,-2px) scale(.38);opacity:0;} 11%{opacity:.34;} 100%{transform:translate(1105px,-22px) scale(1.02);opacity:0;} }

.stone-frame {
  position: relative;
  border-radius: 34px;
  border: 3px solid #5b5f66;
  background:
    radial-gradient(circle at 50% 24%, rgba(89, 97, 109, .42), transparent 32%),
    linear-gradient(145deg, #2c3138, #0e1115 56%, #2a2f35);
  box-shadow:
    inset 0 0 0 2px #2a3037,
    inset 0 0 0 5px #707781,
    inset 0 0 24px rgba(0, 0, 0, .58),
    0 12px 26px rgba(0,0,0,.52);
}
.stone-frame::before,
.stone-frame::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(#87909c, #40474e);
  box-shadow: inset 0 1px 3px rgba(255,255,255,.25), 0 0 0 2px #1b2127;
  top: 12px;
}
.stone-frame::before { left: 12px; }
.stone-frame::after { right: 12px; }

.frame-inner-glow {
  position: absolute;
  inset: 14px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 70%, rgba(84, 211, 255, .16), transparent 48%),
    radial-gradient(circle at 50% 26%, rgba(255,255,255,.06), transparent 25%);
  box-shadow: inset 0 0 28px rgba(64, 115, 170, .22);
  pointer-events: none;
}

.banner-spirit-frame {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: 124px;
  height: 124px;
  z-index: 3;
  animation: bannerFrameHover 5s ease-in-out infinite;
}
@keyframes bannerFrameHover {
  0%,100% { transform: translateX(-50%) translateY(0px); }
  50% { transform: translateX(-50%) translateY(-4px); }
}
.banner-soulfire {
  position: absolute;
  inset: 18px;
  width: calc(100% - 36px);
  height: calc(100% - 36px);
  object-fit: cover;
  mix-blend-mode: screen;
  border-radius: 32px;
}
.soul-video-base {
  filter:
    saturate(1.18)
    contrast(1.08)
    blur(.2px)
    drop-shadow(0 0 8px rgba(99, 218, 255, .44));
}
.soul-video-fat {
  opacity: .46;
  transform: scale(1.16);
  filter:
    saturate(1.32)
    blur(7px)
    brightness(1.1)
    drop-shadow(0 0 22px rgba(95, 130, 255, .34));
}

.living-soul {
  width: 252px;
  height: 252px;
  margin: auto;
  overflow: hidden;
  border-radius: 42px;
}
.hero-panel .stone-frame {
  justify-self: center;
}
.soulfire-stage::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 74%, rgba(106, 222, 255, .18), transparent 52%),
    radial-gradient(circle at 52% 20%, rgba(255,255,255,.06), transparent 24%);
  filter: blur(2px);
}
.soulfire-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 18%),
    radial-gradient(circle at 50% 88%, rgba(41, 88, 132, .22), transparent 44%);
  pointer-events: none;
}

.soulfire-video,
.banner-soulfire {
  background: #020406;
}
.soul-video-back,
.soul-video-main,
.soul-video-fat {
  position: absolute;
  inset: 24px;
  width: calc(100% - 48px);
  height: calc(100% - 48px);
  object-fit: cover;
  mix-blend-mode: screen;
  border-radius: 999px;
}
.soul-video-back {
  opacity: .42;
  transform: scale(1.30);
  filter: blur(12px) saturate(1.28) brightness(1.12);
}
.soul-video-fat {
  opacity: .58;
  transform: scale(1.18);
  filter: blur(5px) saturate(1.34) brightness(1.12);
}
.soul-video-main {
  z-index: 3;
  filter:
    saturate(1.26)
    contrast(1.1)
    brightness(1.03)
    drop-shadow(0 0 12px rgba(87, 221, 255, .36))
    drop-shadow(0 0 26px rgba(76, 100, 255, .22));
}

.spirit-eye {
  position: absolute;
  z-index: 4;
  top: 43%;
  width: 13px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(242,255,255,1) 0 28%, rgba(129,238,255,.95) 46%, rgba(85,132,255,.15) 70%, transparent 72%);
  box-shadow: 0 0 12px rgba(111, 239, 255, .95), 0 0 24px rgba(81, 121, 255, .32);
  opacity: .42;
  animation: eyeFlicker 4.8s ease-in-out infinite;
}
.eye-left { left: 39%; transform: translateX(-18px); }
.eye-right { right: 39%; transform: translateX(18px); animation-delay: .45s; }

@keyframes eyeFlicker {
  0%, 18%, 24%, 58%, 100% { opacity: .34; }
  20%, 22%, 60%, 62% { opacity: .06; }
  72% { opacity: .52; }
}

.soul-mote {
  z-index: 5;
}
.mote-a { animation-duration: 4.4s; }
.mote-b { animation-duration: 5.4s; }
.mote-c { animation-duration: 6.1s; }

.chronicle-body {
  background:
    radial-gradient(circle at 70% 20%, rgba(255,255,255,.14), transparent 30%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.012) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, #827a6d, #d1cabf 8%, #cfc8be 50%, #d4cdc2 92%, #877d70);
}
.news-entry h3 {
  color: #1e333e;
}
.news-entry p {
  color: #2e3940;
}

@media (max-width: 780px) {
  .masthead { min-height: 230px; }
  .banner-spirit-frame { width: 102px; height: 102px; bottom: 14px; }
  .brand-stack { min-height: 190px; }
}
@media (max-width: 560px) {
  .dust-field { display: none; }
  .banner-spirit-frame { width: 92px; height: 92px; bottom: 18px; }
  .brand-stack { min-height: 170px; }
  .living-soul { width: 210px; height: 210px; }
  .soul-video-back, .soul-video-main, .soul-video-fat { inset: 22px; width: calc(100% - 44px); height: calc(100% - 44px); }
}


/* v7 — stronger banner animation and circular framed living souls */
.masthead {
  min-height: 300px;
}

.banner-motion {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.banner-mist {
  position: absolute;
  filter: blur(20px);
  opacity: .42;
  mix-blend-mode: screen;
}
.mist-left {
  left: -6%;
  top: 10px;
  width: 38%;
  height: 220px;
  background:
    radial-gradient(circle at 30% 50%, rgba(102, 209, 255, .18), transparent 42%),
    radial-gradient(circle at 70% 30%, rgba(255, 128, 64, .08), transparent 34%);
  animation: driftMistLeft 11s ease-in-out infinite alternate;
}
.mist-right {
  right: -8%;
  top: 6px;
  width: 42%;
  height: 240px;
  background:
    radial-gradient(circle at 60% 40%, rgba(106, 215, 255, .15), transparent 40%),
    radial-gradient(circle at 38% 58%, rgba(255, 120, 60, .08), transparent 26%);
  animation: driftMistRight 13s ease-in-out infinite alternate;
}
.mist-center {
  left: 31%;
  top: 34px;
  width: 38%;
  height: 170px;
  background:
    radial-gradient(circle at 50% 52%, rgba(122, 225, 255, .12), transparent 34%),
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.05), transparent 18%);
  animation: driftMistCenter 8.2s ease-in-out infinite alternate;
}

@keyframes driftMistLeft {
  0% { transform: translateX(-24px) translateY(6px) scale(1); opacity: .26; }
  100% { transform: translateX(34px) translateY(-9px) scale(1.08); opacity: .48; }
}
@keyframes driftMistRight {
  0% { transform: translateX(28px) translateY(-4px) scale(1.02); opacity: .24; }
  100% { transform: translateX(-34px) translateY(10px) scale(1.1); opacity: .44; }
}
@keyframes driftMistCenter {
  0% { transform: translateY(4px) scale(.94); opacity: .16; }
  100% { transform: translateY(-7px) scale(1.08); opacity: .32; }
}

.brand-stack {
  min-height: 250px;
  z-index: 2;
}

.brand-art {
  position: relative;
  z-index: 2;
  width: min(760px, 90%);
  margin: -8px auto 0;
  animation: brandBreathe 5.8s ease-in-out infinite;
}

.dust {
  position: absolute;
  border-radius: 999px;
  background: rgba(201, 232, 243, .88);
  box-shadow: 0 0 12px rgba(120, 214, 255, .45), 0 0 24px rgba(74, 110, 255, .14);
  opacity: 0;
}

.dust-1 { top: 76px; left: -3%; width: 4px; height: 4px; animation: strongDustA 8.5s linear infinite; }
.dust-2 { top: 118px; left: -6%; width: 2px; height: 2px; animation: strongDustB 6.8s linear infinite .8s; }
.dust-3 { top: 144px; left: -8%; width: 3px; height: 3px; animation: strongDustC 9.7s linear infinite 1.2s; }
.dust-4 { top: 94px; left: -5%; width: 2px; height: 2px; animation: strongDustD 7.3s linear infinite 2s; }
.dust-5 { top: 56px; left: -7%; width: 3px; height: 3px; animation: strongDustA 10.2s linear infinite 3.2s; }
.dust-6 { top: 166px; left: -9%; width: 2px; height: 2px; animation: strongDustB 8.6s linear infinite 2.4s; }
.dust-7 { top: 132px; left: -10%; width: 4px; height: 4px; animation: strongDustC 11.3s linear infinite 4.3s; }
.dust-8 { top: 82px; left: -4%; width: 2px; height: 2px; animation: strongDustD 8.1s linear infinite 5.0s; }
.dust-9 { top: 154px; left: -6%; width: 3px; height: 3px; animation: strongDustB 10.8s linear infinite 6.4s; }
.dust-10 { top: 104px; left: -5%; width: 2px; height: 2px; animation: strongDustA 9.4s linear infinite 4.9s; }

@keyframes strongDustA {
  0% { transform: translateX(-40px) translateY(6px) scale(.5); opacity: 0; }
  12% { opacity: .65; }
  100% { transform: translateX(1220px) translateY(-34px) scale(1.2); opacity: 0; }
}
@keyframes strongDustB {
  0% { transform: translateX(-40px) translateY(-4px) scale(.4); opacity: 0; }
  12% { opacity: .5; }
  100% { transform: translateX(1210px) translateY(-18px) scale(1.1); opacity: 0; }
}
@keyframes strongDustC {
  0% { transform: translateX(-40px) translateY(10px) scale(.5); opacity: 0; }
  15% { opacity: .72; }
  100% { transform: translateX(1230px) translateY(-42px) scale(1.28); opacity: 0; }
}
@keyframes strongDustD {
  0% { transform: translateX(-40px) translateY(0px) scale(.45); opacity: 0; }
  10% { opacity: .44; }
  100% { transform: translateX(1190px) translateY(-26px) scale(.96); opacity: 0; }
}

/* Circular stone frame shared look */
.circular-stone-frame {
  border-radius: 999px;
  border: 4px solid #6f7780;
  background:
    radial-gradient(circle at 50% 20%, rgba(141,149,160,.40), transparent 30%),
    radial-gradient(circle at 50% 85%, rgba(17, 22, 28, .88), rgba(7,10,14,.98) 64%),
    linear-gradient(145deg, #3a4048, #12161a 58%, #333942);
  box-shadow:
    inset 0 0 0 2px #20262d,
    inset 0 0 0 6px #8a9199,
    inset 0 0 26px rgba(0,0,0,.62),
    0 10px 28px rgba(0,0,0,.56),
    0 0 34px rgba(91, 204, 255, .06);
}
.circular-stone-frame::before,
.circular-stone-frame::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 12px;
  border-radius: 999px;
  background: linear-gradient(#9098a3, #47515a);
  box-shadow: inset 0 1px 3px rgba(255,255,255,.25), 0 0 0 2px #1a2025;
  z-index: 6;
}
.circular-stone-frame::before { left: 16px; }
.circular-stone-frame::after { right: 16px; }

.banner-spirit-frame {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: 126px;
  height: 126px;
  z-index: 4;
  animation: bannerFrameHover 6s ease-in-out infinite;
}
.banner-spirit-frame .frame-inner-glow {
  inset: 16px;
  border-radius: 999px;
}
.banner-soulfire {
  position: absolute;
  inset: 22px;
  width: calc(100% - 44px);
  height: calc(100% - 44px);
  object-fit: cover;
  border-radius: 999px;
  mix-blend-mode: screen;
}
.banner-soulfire.soul-video-base {
  opacity: .95;
  filter: saturate(1.1) contrast(1.05) brightness(.98) drop-shadow(0 0 8px rgba(98, 215, 255, .46));
}
.banner-soulfire.soul-video-fat {
  opacity: .36;
  transform: scale(1.12);
  filter: blur(5px) saturate(1.18) brightness(1.06);
}
.slow-burn {
  animation: bannerBurnMotion 7.2s ease-in-out infinite;
}
@keyframes bannerBurnMotion {
  0%,100% { transform: scale(1) translateY(1px); }
  25% { transform: scale(1.02,1.03) translateY(-1px); }
  50% { transform: scale(.99,1.04) translateY(-2px); }
  75% { transform: scale(1.02,.99) translateY(0px); }
}

.hero-panel {
  grid-template-columns: 1fr 240px;
}

.living-soul {
  width: 222px;
  height: 222px;
  border-width: 5px;
  overflow: hidden;
  border-radius: 999px;
  justify-self: center;
}
.living-soul .frame-inner-glow {
  inset: 18px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 72%, rgba(107, 222, 255, .22), transparent 56%),
    radial-gradient(circle at 50% 22%, rgba(255,255,255,.08), transparent 18%);
}
.living-soul::before,
.living-soul::after {
  top: 14px;
}
.soulfire-stage {
  background: transparent;
}
.soulfire-stage::before,
.soulfire-stage::after {
  display: none;
}
.soul-video-back,
.soul-video-main,
.soul-video-fat {
  position: absolute;
  inset: 24px;
  width: calc(100% - 48px);
  height: calc(100% - 48px);
  object-fit: cover;
  border-radius: 999px;
  mix-blend-mode: screen;
}
.soul-video-back {
  opacity: .42;
  transform: scale(1.32);
  filter: blur(12px) saturate(1.3) brightness(1.12);
}
.soul-video-fat {
  opacity: .62;
  transform: scale(1.18);
  filter: blur(5px) saturate(1.38) brightness(1.1);
}
.soul-video-main {
  z-index: 3;
  filter:
    saturate(1.28)
    contrast(1.08)
    brightness(1.04)
    drop-shadow(0 0 14px rgba(100, 231, 255, .44))
    drop-shadow(0 0 28px rgba(75, 99, 255, .22));
}
.fast-burn {
  animation: forgeSoulMotion 3.2s ease-in-out infinite;
}
@keyframes forgeSoulMotion {
  0%,100% { transform: scale(1) translateY(1px); }
  18% { transform: scale(1.03,1.06) translateY(-2px); }
  40% { transform: scale(.98,1.08) translateY(-5px); }
  62% { transform: scale(1.04,1.02) translateY(-1px); }
  80% { transform: scale(.99,1.05) translateY(-3px); }
}

.spirit-eye {
  top: 44%;
}
.living-soul .eye-left { left: 37%; transform: translateX(-14px); }
.living-soul .eye-right { right: 37%; transform: translateX(14px); }
.banner-spirit-frame .eye-left { left: 36%; transform: translateX(-10px); }
.banner-spirit-frame .eye-right { right: 36%; transform: translateX(10px); }
.banner-spirit-frame .spirit-eye {
  width: 10px;
  height: 6px;
  opacity: .28;
}

@media (max-width: 780px) {
  .brand-stack { min-height: 220px; }
  .banner-spirit-frame { width: 108px; height: 108px; bottom: 18px; }
  .hero-panel { grid-template-columns: 1fr; }
  .living-soul { display: none; }
}
@media (max-width: 560px) {
  .banner-motion { display: none; }
  .banner-spirit-frame { width: 96px; height: 96px; bottom: 20px; }
}


/* v8 — correct banner flame placement + animated banner atmosphere + real stone-framed hero soul */

/* Remove the duplicate framed soul from older revisions if any remnants remain */
.banner-spirit-frame,
.circular-stone-frame.living-soul-fast,
.circular-stone-frame.living-soul {
  display: none !important;
}

.masthead {
  min-height: 292px;
  overflow: hidden;
  padding-top: 8px;
}

.brand-stack {
  position: relative;
  width: min(820px, 96%);
  min-height: 232px;
  margin: 0 auto;
  z-index: 2;
}

.brand-art {
  position: relative;
  z-index: 2;
  width: min(760px, 90%);
  margin: -12px auto 0;
  animation: brandBreathe 6s ease-in-out infinite;
}

/* Banner flame belongs inside the ring already present in the banner art */
.banner-ring-fire {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 3px;
  width: 188px;
  height: 188px;
  transform: translateX(-50%);
  border-radius: 999px;
  overflow: hidden;
  mix-blend-mode: screen;
  pointer-events: none;
  filter: drop-shadow(0 0 12px rgba(97, 219, 255, .26));
}
.banner-flame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
  mix-blend-mode: screen;
}
.flame-main {
  opacity: .95;
  filter: saturate(1.14) contrast(1.04) brightness(1.01);
  animation: bannerFlameSlow 7.4s ease-in-out infinite;
}
.flame-glow {
  opacity: .34;
  transform: scale(1.12);
  filter: blur(7px) saturate(1.18) brightness(1.08);
  animation: bannerFlameSlowGlow 8.8s ease-in-out infinite;
}

@keyframes bannerFlameSlow {
  0%,100% { transform: translateY(1px) scale(1.00,1.00); }
  25% { transform: translateY(-1px) scale(1.01,1.03); }
  50% { transform: translateY(-2px) scale(.99,1.04); }
  75% { transform: translateY(0px) scale(1.02,.99); }
}
@keyframes bannerFlameSlowGlow {
  0%,100% { transform: scale(1.12) translateY(0px); opacity:.28; }
  50% { transform: scale(1.18) translateY(-3px); opacity:.44; }
}

/* Endless smoke / dust / debris rolling through the banner */
.banner-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

.smoke {
  position: absolute;
  border-radius: 999px;
  mix-blend-mode: screen;
  filter: blur(20px);
  opacity: .36;
}
.smoke-a {
  left: -8%;
  top: 26px;
  width: 36%;
  height: 138px;
  background: radial-gradient(circle at 30% 50%, rgba(145, 171, 190, .20), transparent 54%),
              radial-gradient(circle at 70% 44%, rgba(121, 208, 255, .12), transparent 40%);
  animation: billowA 8.8s ease-in-out infinite;
}
.smoke-b {
  right: -10%;
  top: 44px;
  width: 38%;
  height: 152px;
  background: radial-gradient(circle at 55% 50%, rgba(150, 161, 170, .18), transparent 54%),
              radial-gradient(circle at 30% 44%, rgba(255, 120, 48, .08), transparent 28%);
  animation: billowB 11.2s ease-in-out infinite;
}
.smoke-c {
  left: 14%;
  bottom: 18px;
  width: 44%;
  height: 122px;
  background: radial-gradient(circle at 50% 50%, rgba(146, 164, 181, .16), transparent 58%);
  animation: rollSmokeLeft 9.3s linear infinite;
}
.smoke-d {
  right: 9%;
  bottom: 6px;
  width: 41%;
  height: 136px;
  background: radial-gradient(circle at 50% 50%, rgba(154, 161, 168, .16), transparent 58%);
  animation: rollSmokeRight 10.6s linear infinite;
}

@keyframes billowA {
  0%,100% { transform: translateX(-28px) translateY(8px) scale(1); opacity:.22; }
  50% { transform: translateX(34px) translateY(-8px) scale(1.10); opacity:.42; }
}
@keyframes billowB {
  0%,100% { transform: translateX(26px) translateY(-2px) scale(1); opacity:.20; }
  50% { transform: translateX(-40px) translateY(9px) scale(1.13); opacity:.38; }
}
@keyframes rollSmokeLeft {
  0% { transform: translateX(-120px) translateY(8px) scale(.96); opacity:.10; }
  15% { opacity:.28; }
  100% { transform: translateX(270px) translateY(-18px) scale(1.14); opacity:0; }
}
@keyframes rollSmokeRight {
  0% { transform: translateX(120px) translateY(10px) scale(.96); opacity:.10; }
  15% { opacity:.28; }
  100% { transform: translateX(-280px) translateY(-14px) scale(1.15); opacity:0; }
}

.ash {
  position: absolute;
  border-radius: 999px;
  background: rgba(225, 238, 245, .88);
  box-shadow: 0 0 12px rgba(121, 214, 255, .38), 0 0 24px rgba(67, 91, 255, .12);
  opacity: 0;
}
.ash-1 { top: 40px; left: -4%; width: 2px; height: 2px; animation: ashBlastA 7.6s linear infinite; }
.ash-2 { top: 62px; left: -6%; width: 3px; height: 3px; animation: ashBlastB 9.1s linear infinite .8s; }
.ash-3 { top: 88px; left: -8%; width: 2px; height: 2px; animation: ashBlastA 8.2s linear infinite 1.3s; }
.ash-4 { top: 118px; left: -7%; width: 4px; height: 4px; animation: ashBlastC 9.8s linear infinite 2.4s; }
.ash-5 { top: 140px; left: -5%; width: 2px; height: 2px; animation: ashBlastB 7.4s linear infinite 3.2s; }
.ash-6 { top: 52px; left: 100%; width: 2px; height: 2px; animation: ashBlastRightA 10.2s linear infinite .6s; }
.ash-7 { top: 98px; left: 102%; width: 3px; height: 3px; animation: ashBlastRightB 8.8s linear infinite 1.6s; }
.ash-8 { top: 132px; left: 104%; width: 2px; height: 2px; animation: ashBlastRightA 9.9s linear infinite 2.8s; }
.ash-9 { top: 148px; left: 101%; width: 4px; height: 4px; animation: ashBlastRightB 11.1s linear infinite 3.7s; }
.ash-10 { top: 76px; left: -3%; width: 2px; height: 2px; animation: ashBlastC 8.7s linear infinite 4.2s; }

@keyframes ashBlastA {
  0% { transform: translateX(-40px) translateY(4px) scale(.5); opacity:0; }
  12% { opacity:.48; }
  100% { transform: translateX(1200px) translateY(-34px) scale(1.1); opacity:0; }
}
@keyframes ashBlastB {
  0% { transform: translateX(-40px) translateY(12px) scale(.5); opacity:0; }
  12% { opacity:.58; }
  100% { transform: translateX(1180px) translateY(-26px) scale(1.2); opacity:0; }
}
@keyframes ashBlastC {
  0% { transform: translateX(-40px) translateY(-6px) scale(.4); opacity:0; }
  15% { opacity:.64; }
  100% { transform: translateX(1220px) translateY(-42px) scale(1.28); opacity:0; }
}
@keyframes ashBlastRightA {
  0% { transform: translateX(40px) translateY(4px) scale(.5); opacity:0; }
  12% { opacity:.34; }
  100% { transform: translateX(-1180px) translateY(-22px) scale(1.1); opacity:0; }
}
@keyframes ashBlastRightB {
  0% { transform: translateX(40px) translateY(10px) scale(.45); opacity:0; }
  12% { opacity:.42; }
  100% { transform: translateX(-1220px) translateY(-28px) scale(1.22); opacity:0; }
}

/* Mid-screen living soul in an actual circular stone frame */
.hero-panel {
  grid-template-columns: 1fr 248px;
}

.stone-soul-ring {
  position: relative;
  width: 216px;
  height: 216px;
  margin: auto;
  border-radius: 999px;
  overflow: hidden;
  border: 5px solid #727a84;
  background:
    radial-gradient(circle at 50% 22%, rgba(158, 166, 177, .44), transparent 24%),
    radial-gradient(circle at 50% 80%, rgba(11, 15, 20, .96), rgba(2,4,8,.98) 66%),
    linear-gradient(145deg, #404750, #11161b 58%, #353c45);
  box-shadow:
    inset 0 0 0 2px #20262d,
    inset 0 0 0 7px #9097a0,
    inset 0 0 28px rgba(0,0,0,.64),
    0 10px 28px rgba(0,0,0,.54);
}
.stone-soul-ring::before,
.stone-soul-ring::after {
  content: "";
  position: absolute;
  z-index: 7;
  width: 16px;
  height: 16px;
  top: 14px;
  border-radius: 999px;
  background: linear-gradient(#99a1ab, #47505a);
  box-shadow: inset 0 1px 3px rgba(255,255,255,.26), 0 0 0 2px #1b2027;
}
.stone-soul-ring::before { left: 18px; }
.stone-soul-ring::after { right: 18px; }

.stone-soul-inner {
  position: absolute;
  inset: 18px;
  z-index: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 74%, rgba(113, 223, 255, .26), transparent 55%),
    radial-gradient(circle at 50% 22%, rgba(255,255,255,.08), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(8, 22, 60, .82), rgba(2,8,18,.98) 70%);
  box-shadow: inset 0 0 22px rgba(97, 198, 255, .16);
}

.hero-flame {
  position: absolute;
  width: 132px;
  height: 132px;
  left: 50%;
  top: 50%;
  margin-left: -66px;
  margin-top: -46px;
  object-fit: cover;
  border-radius: 999px;
  mix-blend-mode: screen;
  transform-origin: 50% 75%;
}
.hero-flame-back {
  z-index: 2;
  opacity: .40;
  transform: translateY(4px) scale(1.42);
  filter: blur(12px) saturate(1.32) brightness(1.14);
  animation: heroBurnBack 3.8s ease-in-out infinite;
}
.hero-flame-main {
  z-index: 4;
  opacity: .98;
  filter: saturate(1.28) contrast(1.08) brightness(1.03) drop-shadow(0 0 14px rgba(104, 233, 255, .44));
  animation: heroBurnMain 3.1s ease-in-out infinite;
}
.hero-flame-glow {
  z-index: 3;
  opacity: .52;
  transform: scale(1.18);
  filter: blur(6px) saturate(1.36) brightness(1.10);
  animation: heroBurnGlow 3.5s ease-in-out infinite;
}

@keyframes heroBurnBack {
  0%,100% { transform: translateY(3px) scale(1.36,1.14); opacity:.32; }
  38% { transform: translateY(-2px) scale(1.46,1.20); opacity:.44; }
  68% { transform: translateY(-6px) scale(1.40,1.26); opacity:.38; }
}
@keyframes heroBurnMain {
  0%,100% { transform: translateY(1px) scale(1.00,.98); }
  20% { transform: translateY(-3px) scale(1.03,1.09); }
  42% { transform: translateY(-8px) scale(.98,1.16); }
  64% { transform: translateY(-2px) scale(1.05,1.05); }
  82% { transform: translateY(-5px) scale(.99,1.12); }
}
@keyframes heroBurnGlow {
  0%,100% { transform: translateY(2px) scale(1.14); opacity:.40; }
  50% { transform: translateY(-5px) scale(1.22,1.28); opacity:.58; }
}

.stone-soul-ring .spirit-eye {
  z-index: 6;
  top: 46%;
  width: 11px;
  height: 7px;
  opacity: .36;
}
.stone-soul-ring .eye-left { left: 38%; transform: translateX(-12px); }
.stone-soul-ring .eye-right { right: 38%; transform: translateX(12px); }

.stone-soul-ring .soul-mote {
  z-index: 6;
}

@media (max-width: 780px) {
  .banner-ring-fire {
    width: 150px;
    height: 150px;
    top: 7px;
  }
  .hero-panel {
    grid-template-columns: 1fr;
  }
  .stone-soul-ring {
    display: none;
  }
}
@media (max-width: 560px) {
  .brand-stack {
    min-height: 188px;
  }
  .banner-ring-fire {
    width: 122px;
    height: 122px;
    top: 11px;
  }
}


/* v10 — restore clean animated blue flame and give it a clear circular stone frame */
.hero-panel {
  grid-template-columns: 1fr 250px;
}

/* Hide any old living-entity styling if present */
.living-entity,
.entity-head,
.entity-body,
.entity-arm,
.entity-eye {
  display: none !important;
}

.clean-flame-display {
  position: relative;
  width: 224px;
  height: 224px;
  margin: auto;
  border-radius: 999px;
  overflow: visible;
  background: transparent;
  border: none;
  box-shadow: none;
  justify-self: center;
}

/* Outer stone ring */
.clean-flame-display::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 24%, rgba(170,177,186,.48), transparent 10%),
    radial-gradient(circle at 69% 20%, rgba(102,108,116,.35), transparent 11%),
    radial-gradient(circle at 79% 49%, rgba(155,161,169,.24), transparent 10%),
    radial-gradient(circle at 28% 78%, rgba(117,123,130,.24), transparent 10%),
    conic-gradient(from 0deg,
      #5f6670,
      #969ea8 8%,
      #4f565f 16%,
      #7f8791 28%,
      #484f58 40%,
      #9098a1 54%,
      #4a5159 68%,
      #7b848d 84%,
      #59616a 100%);
  box-shadow:
    inset 0 0 0 2px #252c33,
    inset 0 0 0 8px #8f98a2,
    inset 0 0 28px rgba(0,0,0,.68),
    0 12px 28px rgba(0,0,0,.56);
}

/* Inner rim / cavity */
.clean-flame-display::after {
  content: "";
  position: absolute;
  inset: 13px;
  z-index: 1;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 5px rgba(31, 36, 42, .95),
    inset 0 0 0 8px rgba(116, 124, 133, .62),
    inset 0 0 26px rgba(77, 183, 255, .08);
}

.stone-soul-inner {
  position: absolute;
  inset: 18px;
  z-index: 2;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 78%, rgba(91, 214, 255, .20), transparent 52%),
    radial-gradient(circle at 50% 24%, rgba(255,255,255,.07), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(11, 23, 57, .88), rgba(3,8,18,.99) 70%);
  box-shadow:
    inset 0 0 18px rgba(98, 190, 255, .12),
    0 0 28px rgba(84, 198, 255, .10);
}

/* Small stone lugs to make the frame obviously stone/metalwork */
.stone-lug {
  position: absolute;
  z-index: 5;
  width: 26px;
  height: 20px;
  border-radius: 10px;
  background: linear-gradient(145deg, #9098a1, #4b535b 58%, #30363d);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.18), 0 0 0 2px rgba(23,29,34,.95);
}
.lug-1 { top: 10px; left: 36px; transform: rotate(-24deg); }
.lug-2 { top: 8px; right: 38px; transform: rotate(23deg); }
.lug-3 { top: 55px; right: -1px; transform: rotate(84deg); }
.lug-4 { bottom: 18px; right: 22px; transform: rotate(144deg); }
.lug-5 { bottom: 18px; left: 22px; transform: rotate(-144deg); }
.lug-6 { top: 55px; left: -1px; transform: rotate(-84deg); }

/* Flame layers */
.clean-flame-display .hero-flame {
  position: absolute;
  width: 132px;
  height: 146px;
  left: 50%;
  top: 50%;
  margin-left: -66px;
  margin-top: -56px;
  object-fit: cover;
  border-radius: 50%;
  mix-blend-mode: screen;
  transform-origin: 50% 78%;
}

.clean-flame-display .hero-flame-back {
  z-index: 2;
  opacity: .38;
  filter: blur(12px) saturate(1.34) brightness(1.14);
  animation: heroBurnBack 4.0s ease-in-out infinite;
}

.clean-flame-display .hero-flame-glow {
  z-index: 3;
  opacity: .56;
  filter: blur(6px) saturate(1.40) brightness(1.10);
  animation: heroBurnGlow 3.8s ease-in-out infinite;
}

.clean-flame-display .hero-flame-main {
  z-index: 4;
  opacity: .96;
  filter:
    saturate(1.26)
    contrast(1.08)
    brightness(1.03)
    drop-shadow(0 0 14px rgba(102, 233, 255, .42))
    drop-shadow(0 0 30px rgba(75, 99, 255, .20));
  animation: heroBurnMain 3.1s ease-in-out infinite;
}

@keyframes heroBurnBack {
  0%,100% { transform: translateY(3px) scale(1.34,1.12); opacity: .30; }
  38% { transform: translateY(-2px) scale(1.42,1.18); opacity: .42; }
  68% { transform: translateY(-6px) scale(1.38,1.24); opacity: .36; }
}
@keyframes heroBurnGlow {
  0%,100% { transform: translateY(2px) scale(1.14); opacity: .40; }
  50% { transform: translateY(-5px) scale(1.22,1.28); opacity: .58; }
}
@keyframes heroBurnMain {
  0%,100% { transform: translateY(1px) scale(1.00,.98); }
  20% { transform: translateY(-3px) scale(1.03,1.09); }
  42% { transform: translateY(-8px) scale(.98,1.16); }
  64% { transform: translateY(-2px) scale(1.05,1.05); }
  82% { transform: translateY(-5px) scale(.99,1.12); }
}

.clean-flame-display .soul-mote {
  z-index: 6;
}

@media (max-width: 780px) {
  .hero-panel {
    grid-template-columns: 1fr;
  }
  .clean-flame-display {
    display: none;
  }
}


/* v11 — remove banner flame overlay; make the mid-screen flame sit inside a full stone ring */

/* Banner: kill the misplaced extra flame entirely */
.banner-ring-fire,
.banner-flame,
.flame-main,
.flame-glow {
  display: none !important;
}

/* Mid-screen flame: no floating rocks / lugs */
.clean-flame-display .stone-lug,
.stone-lug {
  display: none !important;
}

/* Rebuild the hero display as a complete circular stone frame */
.clean-flame-display,
.stone-soul-ring.clean-flame-display {
  position: relative;
  width: 228px;
  height: 228px;
  margin: auto;
  border-radius: 50%;
  overflow: visible;
  background: transparent;
  border: none;
  box-shadow: none;
  justify-self: center;
}

/* Complete outer stone ring */
.clean-flame-display::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 24% 22%, rgba(177,184,191,.46), transparent 10%),
    radial-gradient(circle at 73% 18%, rgba(95,101,110,.34), transparent 10%),
    radial-gradient(circle at 80% 48%, rgba(158,164,171,.24), transparent 10%),
    radial-gradient(circle at 32% 77%, rgba(120,126,133,.24), transparent 10%),
    conic-gradient(from 0deg,
      #535a63,
      #6c737c 7%,
      #9098a1 14%,
      #4c535c 24%,
      #767e88 35%,
      #3f464e 45%,
      #8b939c 58%,
      #565d66 70%,
      #7c848d 82%,
      #4f565f 92%,
      #676e77 100%);
  box-shadow:
    inset 0 0 0 2px #252c33,
    inset 0 0 0 10px #8a929b,
    inset 0 0 0 16px #3a4048,
    inset 0 0 24px rgba(0,0,0,.72),
    0 12px 28px rgba(0,0,0,.56);
}

/* Inner carved stone lip */
.clean-flame-display::after {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: 2;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 66%, rgba(122,130,139,.32) 71%, rgba(32,38,44,.96) 78%, rgba(0,0,0,0) 79%);
  box-shadow:
    inset 0 0 0 3px rgba(28,34,39,.95),
    inset 0 0 0 6px rgba(123,131,139,.55),
    inset 0 0 18px rgba(78, 183, 255, .08);
}

/* The inner cavity the flame lives inside */
.clean-flame-display .stone-soul-inner {
  position: absolute;
  inset: 28px;
  z-index: 2;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 78%, rgba(91,214,255,.18), transparent 52%),
    radial-gradient(circle at 50% 24%, rgba(255,255,255,.06), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(11,23,57,.88), rgba(3,8,18,.99) 72%);
  box-shadow:
    inset 0 0 0 2px rgba(44,53,60,.92),
    inset 0 0 14px rgba(98,190,255,.12),
    0 0 24px rgba(84,198,255,.08);
}

/* Flame placement inside the ring */
.clean-flame-display .hero-flame {
  position: absolute;
  width: 132px;
  height: 148px;
  left: 50%;
  top: 50%;
  margin-left: -66px;
  margin-top: -58px;
  object-fit: cover;
  border-radius: 50%;
  mix-blend-mode: screen;
  transform-origin: 50% 78%;
}

.clean-flame-display .hero-flame-back {
  z-index: 3;
  opacity: .34;
  filter: blur(12px) saturate(1.34) brightness(1.14);
  animation: heroBurnBack 4.0s ease-in-out infinite;
}

.clean-flame-display .hero-flame-glow {
  z-index: 4;
  opacity: .52;
  filter: blur(6px) saturate(1.40) brightness(1.10);
  animation: heroBurnGlow 3.8s ease-in-out infinite;
}

.clean-flame-display .hero-flame-main {
  z-index: 5;
  opacity: .96;
  filter:
    saturate(1.26)
    contrast(1.08)
    brightness(1.03)
    drop-shadow(0 0 14px rgba(102, 233, 255, .42))
    drop-shadow(0 0 30px rgba(75, 99, 255, .20));
  animation: heroBurnMain 3.1s ease-in-out infinite;
}

/* Make sure the soul motes stay inside the framed display area */
.clean-flame-display .soul-mote {
  z-index: 6;
}

@media (max-width: 780px) {
  .clean-flame-display {
    display: none;
  }
}


/* v12 — keep the flame itself, stop the bobbing, remove the bubble feel, and place a real stone ring on top */

/* Mid-screen soul container */
.clean-flame-display,
.stone-soul-ring.clean-flame-display {
  width: 232px;
  height: 232px;
  overflow: visible;
  border-radius: 50%;
  background: transparent !important;
  box-shadow: none !important;
}

/* Remove the soft glowing bubble look */
.clean-flame-display .stone-soul-inner {
  position: absolute;
  inset: 34px;
  z-index: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(8, 18, 48, .92), rgba(2, 7, 16, .99) 76%);
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, .72),
    0 0 0 rgba(0,0,0,0);
}

/* Kill any floating lugs/rocks entirely */
.clean-flame-display .stone-lug,
.stone-lug {
  display: none !important;
}

/* Put a full stone ring OVER the flame, with a transparent center hole */
.clean-flame-display::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%,
      transparent 0 56%,
      rgba(31, 37, 43, .98) 56.8% 58.6%,
      rgba(140, 149, 158, .94) 58.8% 63.2%,
      rgba(72, 79, 86, .98) 63.4% 70.8%,
      rgba(156, 164, 172, .96) 71.2% 75.4%,
      rgba(56, 62, 69, 1) 75.8% 83%,
      transparent 83.2%);
  box-shadow:
    0 12px 28px rgba(0,0,0,.55),
    inset 0 0 0 2px rgba(30, 36, 42, .95);
}

/* Stone texture / roughness / cracks on top of the ring */
.clean-flame-display::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 11;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 24% 24%, rgba(198, 205, 212, .35) 0 5%, transparent 6%),
    radial-gradient(circle at 76% 22%, rgba(180, 186, 194, .24) 0 4%, transparent 5%),
    radial-gradient(circle at 72% 68%, rgba(28, 34, 40, .34) 0 6%, transparent 7%),
    radial-gradient(circle at 34% 76%, rgba(188, 195, 202, .18) 0 5%, transparent 6%),
    conic-gradient(from 4deg,
      transparent 0 6%,
      rgba(0,0,0,.18) 6.4% 6.8%,
      transparent 7.1% 16%,
      rgba(255,255,255,.07) 16.2% 16.9%,
      transparent 17.2% 31%,
      rgba(0,0,0,.2) 31.5% 32%,
      transparent 32.3% 44%,
      rgba(255,255,255,.06) 44.4% 45%,
      transparent 45.3% 58%,
      rgba(0,0,0,.22) 58.3% 58.8%,
      transparent 59.1% 73%,
      rgba(255,255,255,.05) 73.2% 74%,
      transparent 74.3% 88%,
      rgba(0,0,0,.16) 88.3% 88.8%,
      transparent 89.1% 100%);
  -webkit-mask:
    radial-gradient(circle at 50% 50%, transparent 0 58%, #000 58.8% 81%, transparent 81.2%);
  mask:
    radial-gradient(circle at 50% 50%, transparent 0 58%, #000 58.8% 81%, transparent 81.2%);
  filter: blur(.2px);
}

/* Flame sits inside the stone ring; no bobbing, no extra motion except the actual fire video */
.clean-flame-display .hero-flame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 124px;
  height: 144px;
  margin-left: -62px;
  margin-top: -56px;
  border-radius: 50%;
  object-fit: cover;
  mix-blend-mode: screen;
  transform: none !important;
  animation: none !important;
  transform-origin: 50% 78%;
}

.clean-flame-display .hero-flame-back {
  z-index: 2;
  opacity: .30;
  filter: blur(12px) saturate(1.26) brightness(1.08);
}

.clean-flame-display .hero-flame-glow {
  z-index: 3;
  opacity: .44;
  filter: blur(7px) saturate(1.30) brightness(1.08);
}

.clean-flame-display .hero-flame-main {
  z-index: 4;
  opacity: .97;
  filter:
    saturate(1.18)
    contrast(1.04)
    brightness(1.01)
    drop-shadow(0 0 10px rgba(102, 233, 255, .28))
    drop-shadow(0 0 20px rgba(75, 99, 255, .12));
}

/* Keep motes subtle and inside */
.clean-flame-display .soul-mote {
  z-index: 5;
  opacity: .7;
}

@media (max-width: 780px) {
  .clean-flame-display {
    display: none;
  }
}


/* v13 — make the stone ring unmistakably visible */
.clean-flame-display,
.stone-soul-ring.clean-flame-display {
  width: 244px;
  height: 244px;
}

/* Big obvious stone ring */
.clean-flame-display::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%,
      transparent 0 48%,
      #222830 48.6% 50.8%,
      #a6afb8 51.2% 56.4%,
      #646d77 56.8% 65.4%,
      #bcc4cb 65.8% 69.6%,
      #4c545d 70.0% 82.0%,
      transparent 82.4%);
  box-shadow:
    inset 0 0 0 2px rgba(28,34,39,.95),
    0 12px 28px rgba(0,0,0,.55);
}

/* Stone texture/cracks on the ring itself */
.clean-flame-display::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 11;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, rgba(235,240,244,.24) 0 4%, transparent 4.5%),
    radial-gradient(circle at 76% 18%, rgba(255,255,255,.15) 0 3.2%, transparent 3.8%),
    radial-gradient(circle at 80% 64%, rgba(0,0,0,.18) 0 4.2%, transparent 4.8%),
    radial-gradient(circle at 33% 78%, rgba(255,255,255,.10) 0 3.6%, transparent 4.2%),
    conic-gradient(from 12deg,
      transparent 0 4%,
      rgba(0,0,0,.28) 4.2% 4.8%,
      transparent 5.1% 13%,
      rgba(255,255,255,.10) 13.2% 13.8%,
      transparent 14.1% 27%,
      rgba(0,0,0,.24) 27.3% 27.8%,
      transparent 28.1% 41%,
      rgba(255,255,255,.08) 41.2% 41.8%,
      transparent 42.1% 55%,
      rgba(0,0,0,.24) 55.2% 55.8%,
      transparent 56.1% 69%,
      rgba(255,255,255,.07) 69.2% 69.8%,
      transparent 70.1% 83%,
      rgba(0,0,0,.22) 83.3% 83.8%,
      transparent 84.1% 100%);
  -webkit-mask:
    radial-gradient(circle at 50% 50%, transparent 0 50.8%, #000 51.2% 82%, transparent 82.4%);
  mask:
    radial-gradient(circle at 50% 50%, transparent 0 50.8%, #000 51.2% 82%, transparent 82.4%);
  filter: blur(.1px);
}

/* Make the inner opening smaller so the ring reads thick and solid */
.clean-flame-display .stone-soul-inner {
  inset: 44px;
  z-index: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(9, 22, 58, .90), rgba(2, 7, 16, .99) 76%);
  box-shadow: inset 0 0 18px rgba(0,0,0,.72);
}

/* Recenter flame inside the now-thicker ring */
.clean-flame-display .hero-flame {
  width: 118px;
  height: 138px;
  margin-left: -59px;
  margin-top: -53px;
}


/* v14 — use the actual banner stone ring image as the frame */
.clean-flame-display,
.stone-soul-ring.clean-flame-display {
  position: relative;
  width: 281px;
  height: 243px;
  max-width: 244px;
  max-height: 211px;
  margin: auto;
  border-radius: 0;
  overflow: visible;
  background: transparent !important;
  box-shadow: none !important;
  justify-self: center;
}

.clean-flame-display::before,
.clean-flame-display::after {
  display: none !important;
  content: none !important;
}

.clean-flame-display .stone-soul-inner {
  position: absolute;
  z-index: 1;
  left: 18.5%;
  top: 10.5%;
  width: 63%;
  height: 63%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(8, 18, 48, .90), rgba(2, 7, 16, .99) 76%);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, .78);
}

.clean-flame-display .hero-flame {
  position: absolute;
  left: 50%;
  top: 39%;
  width: 42%;
  height: 54%;
  margin-left: -21%;
  margin-top: -15%;
  border-radius: 50%;
  object-fit: cover;
  mix-blend-mode: screen;
  transform: none !important;
  animation: none !important;
  transform-origin: 50% 78%;
}

.clean-flame-display .hero-flame-back {
  z-index: 2;
  opacity: .30;
  filter: blur(12px) saturate(1.26) brightness(1.08);
}

.clean-flame-display .hero-flame-glow {
  z-index: 3;
  opacity: .44;
  filter: blur(7px) saturate(1.30) brightness(1.08);
}

.clean-flame-display .hero-flame-main {
  z-index: 4;
  opacity: .97;
  filter:
    saturate(1.18)
    contrast(1.04)
    brightness(1.01)
    drop-shadow(0 0 10px rgba(102, 233, 255, .28))
    drop-shadow(0 0 20px rgba(75, 99, 255, .12));
}

.clean-flame-display .soul-mote {
  z-index: 5;
}

.clean-flame-display .hero-stone-ring {
  position: absolute;
  inset: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 780px) {
  .clean-flame-display {
    display: none;
  }
}


/* v15 — polish and resize the stone frame so it properly surrounds the live flame */
.clean-flame-display,
.stone-soul-ring.clean-flame-display {
  width: 280px;
  height: 250px;
  max-width: 280px;
  max-height: 250px;
  justify-self: center;
  position: relative;
  overflow: visible;
}

.clean-flame-display .stone-soul-inner {
  /* dark cavity behind the flame, aligned to the ring opening */
  left: 25%;
  top: 15%;
  width: 50%;
  height: 50%;
  inset: auto;
  z-index: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(10, 24, 64, .82), rgba(2, 7, 16, .98) 72%);
  box-shadow:
    inset 0 0 16px rgba(0, 0, 0, .75),
    0 0 18px rgba(78, 174, 255, .10);
}

.clean-flame-display .hero-flame {
  /* center the animated soulfire inside the stone opening */
  left: 50%;
  top: 39%;
  width: 36%;
  height: 48%;
  margin-left: -18%;
  margin-top: -14%;
  z-index: 4;
}

.clean-flame-display .hero-flame-back {
  opacity: .24;
  filter: blur(11px) saturate(1.22) brightness(1.06);
}

.clean-flame-display .hero-flame-glow {
  opacity: .34;
  filter: blur(6px) saturate(1.24) brightness(1.05);
}

.clean-flame-display .hero-flame-main {
  opacity: .98;
  filter:
    saturate(1.14)
    contrast(1.03)
    brightness(1.00)
    drop-shadow(0 0 8px rgba(102, 233, 255, .22))
    drop-shadow(0 0 16px rgba(75, 99, 255, .10));
}

.clean-flame-display .hero-stone-ring {
  /* use the cleaned ring asset and size it to fully surround the flame */
  content: url("assets/banner_stone_ring_refined.png");
  position: absolute;
  left: 50%;
  top: 50%;
  width: 281px;
  height: 243px;
  max-width: 100%;
  max-height: 100%;
  transform: translate(-50%, -50%) scale(0.90);
  transform-origin: center center;
  z-index: 10;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.38));
}

/* keep the decorative motes contained and subtle */
.clean-flame-display .soul-mote {
  z-index: 5;
  opacity: .55;
}

@media (max-width: 780px) {
  .clean-flame-display {
    display: none;
  }
}


/* v16 — fix the missing stone frame by using the actual ring image directly */
.clean-flame-display,
.stone-soul-ring.clean-flame-display {
  width: 286px;
  height: 248px;
  max-width: 286px;
  max-height: 248px;
  position: relative;
  overflow: visible;
  justify-self: center;
}

.clean-flame-display::before,
.clean-flame-display::after {
  display: none !important;
  content: none !important;
}

.clean-flame-display .stone-soul-inner {
  left: 25.5%;
  top: 15.5%;
  width: 49%;
  height: 49%;
  inset: auto;
  z-index: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(10, 24, 64, .82), rgba(2, 7, 16, .98) 72%);
  box-shadow:
    inset 0 0 16px rgba(0, 0, 0, .75),
    0 0 18px rgba(78, 174, 255, .10);
}

.clean-flame-display .hero-flame {
  left: 50%;
  top: 39%;
  width: 35%;
  height: 47%;
  margin-left: -17.5%;
  margin-top: -13.5%;
  z-index: 4;
}

.clean-flame-display .hero-stone-ring {
  position: absolute !important;
  left: 50%;
  top: 50%;
  width: 281px;
  height: 243px;
  max-width: 100%;
  max-height: 100%;
  transform: translate(-50%, -50%) scale(0.90);
  transform-origin: center center;
  z-index: 10;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  display: block !important;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.38));
}

@media (max-width: 780px) {
  .clean-flame-display {
    display: none;
  }
}


/* v17 — remove failed stone frame entirely; keep only the clean animated blue flame */
.hero-stone-ring,
.stone-soul-inner,
.stone-lug,
.clean-flame-display::before,
.clean-flame-display::after,
.stone-soul-ring::before,
.stone-soul-ring::after {
  display: none !important;
}

.clean-flame-only {
  position: relative;
  width: 220px;
  height: 220px;
  margin: auto;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 55%, rgba(18, 43, 97, .50), rgba(2, 7, 16, .96) 72%);
  box-shadow:
    inset 0 0 26px rgba(48, 121, 196, .18),
    0 0 30px rgba(84, 198, 255, .10);
}

.clean-flame-only .hero-flame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 148px;
  height: 164px;
  margin-left: -74px;
  margin-top: -62px;
  border-radius: 50%;
  object-fit: cover;
  mix-blend-mode: screen;
  transform: none !important;
  animation: none !important;
}

.clean-flame-only .hero-flame-back {
  z-index: 1;
  opacity: .30;
  filter: blur(12px) saturate(1.26) brightness(1.08);
}

.clean-flame-only .hero-flame-glow {
  z-index: 2;
  opacity: .44;
  filter: blur(7px) saturate(1.30) brightness(1.08);
}

.clean-flame-only .hero-flame-main {
  z-index: 3;
  opacity: .98;
  filter:
    saturate(1.18)
    contrast(1.04)
    brightness(1.01)
    drop-shadow(0 0 10px rgba(102, 233, 255, .28))
    drop-shadow(0 0 20px rgba(75, 99, 255, .12));
}

.clean-flame-only .soul-mote {
  z-index: 4;
}

@media (max-width: 780px) {
  .clean-flame-only {
    display: none;
  }
}

/* v19 accounts */
.auth-form input:not([disabled]){color:#dce9ee;background:#070b0e;border:1px solid #374650}
.auth-form button:not([disabled]){cursor:pointer;color:#e7f6fb;background:linear-gradient(#1b3440,#10232c);border:1px solid #4f8297}
.auth-form button:not([disabled]):hover{border-color:#68c9ed;box-shadow:0 0 12px rgba(90,204,247,.14)}
.auth-form a{color:#6ed7ff}.account-error{border-color:rgba(255,107,74,.35);background:rgba(116,42,27,.16);color:#f2c0b4}
.account-profile{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}
@media(max-width:700px){.account-profile{grid-template-columns:1fr}}