.profile-page
{
  position: relative;
  background: radial-gradient(circle at 50% 14%, var(--color-border-soft), transparent 38rem), linear-gradient(180deg, var(--color-background), var(--color-background) 72%);
}

.popup-dialog
{
  width: min(620px, calc(100% - 32px));
  padding: 34px;
  border: 1px solid var(--color-cyan);
  color: var(--color-white);
  background: linear-gradient(145deg, var(--color-blue-dark), var(--color-background));
  box-shadow: 0 24px 90px var(--color-background);
  max-height: calc(100svh - 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.popup-dialog::backdrop
{
  background: var(--color-overlay-dark-60);
  backdrop-filter: blur(8px);
}

.popup-dialog__close
{
  float: right;
  border: 0;
  color: var(--color-cyan-pale);
  background: transparent;
  font-size: 32px;
  line-height: 1;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
}

.popup-dialog__close:focus,
.popup-dialog__close:focus-visible
{
  outline: none;
  box-shadow: none;
}

.popup-dialog__eyebrow
{
  color: var(--color-cyan);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.popup-dialog h2
{
  margin: 18px 0 12px;
  color: var(--color-gold);
  font: 600 36px/1 "Cormorant Garamond", serif;
}

.popup-dialog p
{
  margin: 0 0 24px;
  color: var(--color-cyan-pale);
  font-size: 17px;
  line-height: 1.5;
}

.profile-main
{
  position: relative;
  z-index: 1;
  width:min(1540px,calc(100% - 36px));
  margin:0 auto;
  padding:18px 0;
}

.profile-frame
{
  position:relative;
  isolation:isolate;
  padding:16px;
  border:2px solid var(--color-muted);
  outline:1px solid var(--color-gold-40);
  outline-offset:-7px;
  background: linear-gradient(135deg, var(--color-white-50), transparent 22%), linear-gradient(155deg,var(--color-background),var(--color-background) 58%,var(--color-background));
  box-shadow: 0 34px 100px var(--color-surface-dark), inset 0 0 0 4px var(--color-background), inset 0 0 0 5px var(--color-border-soft), inset 0 0 90px var(--color-overlay-dark-20);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}

.profile-frame:before,.profile-frame:after
{
  content:"";
  position:absolute;
  left:36px;
  right:36px;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--color-brown) 18%,var(--color-muted) 50%,var(--color-brown) 82%,transparent);
}

.profile-frame:before
{
  top:5px
}

.profile-frame:after
{
  bottom:5px
}

.profile-corner
{
  position:absolute;
  z-index: 5;
  width:30px;
  height:30px;
  border-color:var(--color-brown);
  opacity:.88
}

.corner-tl
{
  left:10px;
  top:10px;
  border-left:1px solid;
  border-top:1px solid
}

.corner-tr
{
  right:10px;
  top:10px;
  border-right:1px solid;
  border-top:1px solid
}

.corner-bl
{
  left:10px;
  bottom:10px;
  border-left:1px solid;
  border-bottom:1px solid
}

.corner-br
{
  right:10px;
  bottom:10px;
  border-right:1px solid;
  border-bottom:1px solid
}

.profile-heading
{
  position: relative;
  display:grid;
  grid-template-columns:minmax(280px,auto) minmax(280px,620px) 82px;
  gap:24px;
  align-items:center;
  min-height:76px;
  padding:12px 24px 13px;
  border:1px solid var(--color-border-soft);
  border-bottom-color:var(--color-gold-60);
  background: linear-gradient(90deg, var(--color-overlay-dark-20), transparent 52%, var(--color-overlay-dark-20)), var(--color-background);
  box-shadow: inset 0 -12px 24px var(--color-overlay-dark-20), 0 7px 14px var(--color-overlay-dark-20);
}

.profile-next-mission
{
  position: relative;
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 13px 20px;
  border: 1px solid var(--color-cyan-50);
  color: var(--color-cyan-pale);
  background: linear-gradient(90deg, var(--color-mint-soft), var(--color-overlay-dark-20));
  text-align: center;
  text-decoration: none;
  box-shadow: inset 0 0 24px var(--palette-fcc9432053);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.profile-next-mission:not(.is-complete)
{
  overflow: hidden;
  animation: current-mission-breathe 3.8s ease-in-out infinite;
}

.profile-next-mission:not(.is-complete)::after
{
  content: "";
  position: absolute;
  inset: -70% auto -70% -28%;
  width: 18%;
  background: linear-gradient(90deg, transparent, var(--color-mint-soft), transparent);
  filter: blur(5px);
  pointer-events: none;
  transform: skewX(-18deg);
  animation: current-mission-glimmer 5.4s ease-in-out infinite;
}

.profile-next-mission > *
{
  position: relative;
  z-index: 1;
}

.profile-next-mission:hover,.profile-next-mission:focus-visible
{
  border-color: var(--color-cyan);
  box-shadow: inset 0 0 24px var(--color-mint-soft),0 0 18px var(--color-mint-soft);
  outline: none;
}

#profile_butt {
  background-image: linear-gradient(var(--color-teal-48), var(--color-teal-48)), url('/static/high-ticket-test/panel_frame.png'), url('/static/high-ticket-test/stone_texture.png');
  width:100%;
  margin-top: 20px;
}

.profile-next-mission span
{
  color: var(--color-mint);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.profile-next-mission strong
{
  overflow: hidden;
  color: var(--color-white);
  font: 600 18px/1.1 "Cormorant Garamond",serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-next-mission.is-complete strong
{
  color: var(--color-beige);
}

@keyframes current-mission-breathe
{
  0%,100%
  {
    border-color: var(--color-cyan-50);
    box-shadow: inset 0 0 24px var(--color-mint-soft),0 0 0 var(--color-cyan-05);
  }

  50%
  {
    border-color: var(--color-cyan-50);
    box-shadow: inset 0 0 30px var(--color-mint-soft),0 0 20px var(--color-mint-soft);
  }

}

@keyframes current-mission-glimmer
{
  0%,25%
  {
    left: -28%;
    opacity: 0;
  }

  36%
  {
    opacity: 1;
  }

  62%,100%
  {
    left: 112%;
    opacity: 0;
  }

}

@media (prefers-reduced-motion: reduce)
{
  .profile-next-mission:not(.is-complete), .profile-next-mission:not(.is-complete)::after
  {
    animation: none;
  }

}

/* Mana drains from the top of the orb and leaves the remaining charge glowing below. */
.profile-mana > i
{
  inset: 0;
  height: auto;
  clip-path: circle(34% at 50% 44%);
  background: linear-gradient(to bottom, var(--color-surface-dark) 0, var(--color-overlay-dark-60) calc(var(--mana-surface) - 3%), var(--color-overlay-dark-20) var(--mana-surface), transparent calc(var(--mana-surface) + 3%));
  transition: background .55s ease;
}

.profile-mana > i::after
{
  content: "";
  position: absolute;
  top: var(--mana-surface);
  left: 18%;
  width: 64%;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--color-cyan-50), var(--color-violet-20) 45%, transparent 72%);
  filter: blur(1px);
  transform: translateY(-50%);
  box-shadow: 0 2px 9px var(--color-violet-20);
  transition: top .55s ease;
}

.profile-mana > span
{
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

.profile-mana small, .profile-mana strong, .profile-mana strong b
{
  color: var(--color-white);
}

.profile-kicker
{
  color:var(--color-cyan);
  font-size:10px;
  font-weight:700;
  letter-spacing:.28em
}

.profile-heading h1
{
  margin:5px 0 0;
  color:var(--color-white);
  font:500 clamp(32px,4vw,48px)/1 "Cormorant Garamond",serif;
  letter-spacing:.01em
}

.profile-name-row
{
  display:flex;
  min-width:0;
  align-items:center;
  gap:12px;
}

.profile-name-row h1
{
  min-width:0;
}

.profile-name-settings
{
  display:grid;
  width:32px;
  height:32px;
  place-items:center;
  flex:0 0 auto;
  border:0;
  color:var(--color-cyan);
  background:transparent;
  font-size:17px;
  text-decoration:none;
  opacity:.72;
  transition:opacity 160ms ease,filter 160ms ease;
}

.profile-name-settings svg
{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.45;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.profile-name-settings:hover,.profile-name-settings:focus-visible
{
  opacity:1;
  outline:none;
  filter:drop-shadow(0 0 7px var(--color-cyan-50));
}

.profile-level
{
  position: relative;
  display:grid;
  width:82px;
  min-height:64px;
  place-content:center;
  text-align:center;
  border:1px solid var(--color-muted);
  background:linear-gradient(165deg,var(--color-brown-dark),var(--color-brown-black) 72%);
  box-shadow:inset 0 0 0 3px var(--color-brown-black),inset 0 0 0 4px var(--color-border-soft),0 5px 12px var(--color-overlay-dark-20);
  clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% 82%,50% 100%,0 82%,0 8px)
}

.profile-level
{
  text-decoration:none;
}

.profile-level span
{
  color:var(--color-white);
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.12em
}

.profile-level strong
{
  color:var(--color-white);
  font:600 32px/.9 "Cormorant Garamond",serif;
}

.profile-layout
{
  display:grid;
  grid-template-columns:220px minmax(620px,1fr) 280px;
  gap:12px;
  padding-top:12px
}

.profile-journal-link
{
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
  padding: 4px 12px;
  border: 1px solid var(--color-gold-60);
  color: var(--color-white);
  background: linear-gradient(145deg,var(--color-border-soft),var(--color-surface-dark));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: inset 0 0 22px var(--color-overlay-dark-20);
}

.profile-experience
{
  padding-bottom: 4px;
}

.profile-journal-link span
{
  color: var(--color-cyan);
}

.profile-journal-link:hover,.profile-journal-link:focus-visible
{
  border-color: var(--color-cyan);
  color: var(--color-white);
  outline: none;
}

.profile-mana
{
  position:absolute;
  z-index:6;
  right:16px;
  bottom:16px;
  width:150px;
  aspect-ratio:1;
  padding:0;
  overflow:hidden;
  border:1px solid var(--color-cyan-50);
  color:var(--color-cyan-pale);
  background:var(--color-background);
  cursor:pointer;
  box-shadow:0 12px 35px var(--color-overlay-dark-60)
}

.profile-mana:disabled
{
  cursor:default;
  filter:grayscale(1) brightness(.35)
}

.profile-mana img
{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:filter .3s,transform .3s
}

.profile-mana.is-unlocked:hover img,.profile-mana.is-unlocked:focus-visible img
{
  transform:scale(1.025);
  filter:brightness(1.1)
}

.profile-mana:focus-visible
{
  outline:1px solid var(--color-cyan);
  outline-offset:2px
}

.profile-mana>span
{
  position:absolute;
  z-index:3;
  top:8px;
  right:8px;
  left:8px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  padding:6px 8px;
  border:1px solid var(--color-cyan-50);
  background:var(--color-surface-dark);
  backdrop-filter:blur(5px)
}

.profile-mana small
{
  color:var(--color-sage-light);
  font:700 8px/1 Inter,sans-serif;
  letter-spacing:.15em;
  text-transform:uppercase
}

.profile-mana strong
{
  font:600 15px/1 "Cormorant Garamond",serif
}

.profile-mana strong b
{
  color:var(--palette-89ed6d559e);
  font-weight:600
}

.profile-mana>i
{
  position:absolute;
  z-index:2;
  right:0;
  bottom:0;
  left:0;
  height:calc(100% - var(--mana-level));
  background:var(--color-overlay-dark-60);
  pointer-events:none;
  transition:height .5s ease
}

.recovery-dialog
{
  width:min(760px,calc(100% - 28px));
  max-height:min(820px,calc(100svh - 28px));
  padding:30px;
  border:1px solid var(--color-cyan-50);
  color:var(--color-gold);
  background:linear-gradient(145deg,var(--color-background),var(--color-background));
  box-shadow:0 28px 100px var(--color-background);
  overflow:auto
}

.recovery-dialog::backdrop
{
  background:var(--color-surface-dark);
  backdrop-filter:blur(7px)
}

.recovery-dialog__close
{
  position:absolute;
  top:14px;
  right:16px;
  border:0;
  color:var(--color-silver-muted);
  background:transparent;
  font-size:28px;
  cursor:pointer
}

.recovery-dialog header>span
{
  color:var(--color-cyan);
  font:700 10px/1 Inter,sans-serif;
  letter-spacing:.22em;
  text-transform:uppercase
}

.recovery-dialog h2
{
  margin:8px 0 6px;
  font:600 34px/1 "Cormorant Garamond",serif
}

.recovery-dialog header p
{
  margin:0;
  color:var(--color-cyan-pale);
  line-height:1.5
}

.energy-checkin
{
  margin:24px 0;
  padding:20px;
  border:1px solid var(--color-border-soft);
  background:var(--color-border-soft)
}

.energy-checkin[hidden]
{
  display:none
}

.energy-checkin h3,.recovery-actions h3
{
  margin:0 0 13px;
  color:var(--palette-9f7a110f19);
  font:600 18px/1.1 "Cormorant Garamond",serif
}

.energy-checkin div
{
  display:flex;
  flex-wrap:wrap;
  gap:8px
}

.energy-checkin button,.recovery-actions button,.recovery-empty a
{
  padding:5px 10px;
  border:1px solid var(--color-cyan-50);
  color:var(--color-white);
  background:var(--color-cyan-05);
  font:600 14px/1.2 Inter,sans-serif;
  cursor:pointer;
  text-decoration:none;
  align-items: center;
}

.recovery-actions
{
  display:grid;
  gap:22px;
  margin-top:24px
}

.recovery-actions section>div
{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px
}

.recovery-actions button
{
  display:flex;
  justify-content:space-between;
  gap:12px;
  text-align:left
}

.recovery-actions button b
{
  color:var(--color-cyan)
}

.recovery-actions button:disabled
{
  opacity:.32;
  cursor:default
}



.recovery-dialog__status
{
  min-height:18px;
  color:var(--color-cyan);
  font-size:12px
}

@media(max-width:620px)
{
  .recovery-dialog
  {
    padding:22px 16px
  }

  .recovery-actions section>div
  {
    grid-template-columns:1fr
  }

}

.profile-skill-panel
{
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.profile-skill-matrix
{
  position: relative;
  display: block;
  padding: 22px 14px 18px;
  border: 1px solid var(--color-muted);
  outline: 1px solid var(--color-gold-40);
  outline-offset: -5px;
  color: var(--color-silver-muted);
  background: linear-gradient(145deg,var(--color-background),var(--color-background));
  box-shadow: inset 0 0 35px var(--color-overlay-dark-60),0 6px 18px var(--color-overlay-dark-20);
  text-decoration: none;
}

.profile-skill-matrix h2
{
  margin:0 0 20px;
  color:var(--color-beige);
  font:600 17px/1 "Cormorant Garamond",serif;
  letter-spacing:.1em;
  text-align:center;
  text-transform:uppercase
}

.profile-skill-matrix__lanes
{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px
}

.profile-skill-lane header
{
  display:grid;
  grid-template-rows:26px 32px;
  align-items:start;
  min-height:58px;
  text-align:center
}

.profile-skill-lane header span
{
  display:block;
  height:26px;
  font-size:18px;
  line-height:22px
}

.profile-skill-lane h3
{
  align-self:start;
  margin:0;
  font:600 9px/1.08 "Cormorant Garamond",serif;
  letter-spacing:.035em;
  text-transform:uppercase
}

.profile-skill-lane:nth-child(1) header,.profile-skill-lane:nth-child(3) header
{
  color:var(--color-gold)
}

.profile-skill-lane:nth-child(2) header,.profile-skill-lane:nth-child(4) header
{
  color:var(--color-mint)
}

.profile-skill-path
{
  position:relative;
  display:grid;
  justify-items:center;
  gap:22px;
  padding:8px 0
}

.profile-skill-path i
{
  position:relative;
  z-index:1;
  display:grid;
  width:46px;
  height:46px;
  place-items:center;
  border:1px solid var(--color-muted);
  color:var(--color-muted);
  background:radial-gradient(circle,var(--color-blue-dark),var(--color-background) 72%);
  box-shadow:inset 0 0 0 4px var(--color-background)
}

.profile-skill-path i:not(:last-child)::after
{
  content:"";
  position:absolute;
  z-index:0;
  top:100%;
  left:50%;
  width:1px;
  height:22px;
  background:var(--color-muted);
  transform:translateX(-50%)
}

.profile-skill-path i.is-open:not(:last-child)::after
{
  background:var(--color-cyan);
  box-shadow:0 0 7px var(--color-cyan-50)
}

.profile-skill-path i.is-current:not(:last-child)::after
{
  background:var(--color-gold);
  box-shadow:0 0 7px var(--color-gold-40)
}

.profile-skill-path i span
{
  display:grid;
  width:28px;
  height:28px;
  place-items:center;
  color:inherit
}

.profile-skill-path i svg
{
  display:block;
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}

.profile-skill-path i.is-open
{
  border-color:var(--color-cyan);
  color:var(--color-mint);
  background:radial-gradient(circle,var(--color-teal),var(--color-background) 72%);
  box-shadow:inset 0 0 0 4px var(--color-background),0 0 10px var(--color-cyan-50)
}

.profile-skill-path i.is-current
{
  border-color:var(--color-gold);
  color:var(--color-gold);
  background:radial-gradient(circle,var(--color-brown),var(--color-brown-dark) 70%);
  box-shadow:inset 0 0 0 4px var(--color-brown-black),0 0 13px var(--color-gold-60)
}

.profile-skill-matrix:hover,.profile-skill-matrix:focus-visible
{
  border-color:var(--color-cyan)
}

.profile-skill-retake
{
  display:none;
  margin:0
}

.profile-skill-panel.has-result .profile-skill-retake
{
  display:block
}

@media(max-width:1250px)
{
  .profile-layout
  {
    grid-template-columns:220px minmax(0,1fr)
  }

  .profile-skill-panel
  {
    grid-column:1/-1
  }

}

.profile-stats
{
  position:relative;
  padding:22px 18px;
  border:1px solid var(--color-muted);
  outline:1px solid var(--color-gold-40);
  outline-offset:-5px;
  background: radial-gradient(circle at 100% 0,var(--color-border-soft),transparent 42%), linear-gradient(145deg,var(--color-background),var(--color-background));
  box-shadow:inset 0 0 35px var(--color-overlay-dark-60),0 6px 18px var(--color-overlay-dark-20)
}

.profile-stats h2,.inventory h2
{
  margin:0;
  color:var(--color-beige);
  font:600 17px/1 "Cormorant Garamond",serif;
  letter-spacing:.1em;
  text-transform:uppercase
}

.profile-stats dl
{
  display:grid;
  grid-template-rows:repeat(4,minmax(0,1fr));
  height:auto;
  margin:16px 0 0
}

.profile-stats dl div
{
  display:flex;
  justify-content:space-between;
  min-height:0;
  align-items:center;
  padding:12px 3px;
  border-bottom:1px solid var(--color-border-soft)
}

.profile-stats dt
{
  color:var(--color-silver-muted);
  font:500 16px/1 "Cormorant Garamond",serif;
  letter-spacing:.02em
}

.profile-stats dd
{
  margin:0;
  color:var(--color-gold);
  font-weight:600
}

.profile-experience
{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--color-border-soft)
}

.profile-experience__heading
{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px
}

.profile-experience__heading h3
{
  margin:0;
  color:var(--color-beige);
  font:600 16px/1 "Cormorant Garamond",serif;
  letter-spacing:.1em;
  text-transform:uppercase
}

.profile-experience__heading span
{
  color:var(--color-silver-muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em
}

.profile-experience__segments
{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:5px;
  margin-top:12px;
  margin-bottom: 12px;
}

.profile-experience__segments span
{
  height:13px;
  border:1px solid var(--color-muted);
  background:linear-gradient(180deg,var(--color-background),var(--color-background));
  box-shadow:inset 0 1px 3px var(--color-surface-dark);
  transform:skewX(-8deg);
  overflow:hidden
}

.profile-experience__segments span.is-filled
{
  border-color:var(--color-teal);
  background:linear-gradient(180deg,var(--color-mint) 0%,var(--color-cyan) 24%,var(--color-teal) 100%);
  box-shadow:0 0 9px var(--color-cyan-50),inset 0 1px var(--color-white-50)
}



.profile-stat-action
{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.profile-stat-action strong
{
  min-width: 2ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.profile-stat-action a
{
  position: relative;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--color-gold-60);
  color: var(--color-gold);
  background: linear-gradient(145deg, var(--color-gold-40), var(--color-surface-dark));
  box-shadow: inset 0 0 0 1px var(--color-border-soft), inset 0 -5px 10px var(--color-overlay-dark-20), 0 2px 6px var(--color-overlay-dark-20);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease, filter .18s ease, transform .18s ease;
}

.profile-stat-action a::after
{
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--color-border-soft);
  pointer-events: none;
}

.profile-stat-action a span
{
  transform: translateY(-1px);
  font: 500 19px/1 Georgia, serif;
}

.profile-stat-action a:hover, .profile-stat-action a:focus-visible
{
  border-color: var(--color-gold);
  color: var(--color-white);
  filter: brightness(1.18) drop-shadow(0 0 7px var(--color-gold-40));
  transform: translateY(-1px);
  outline: none;
}

.profile-stat-action a:active
{
  transform: translateY(1px);
  filter: brightness(.9);
}

.profile-progress span,.profile-progress small
{
  font-size:10px;
  color:var(--color-silver-muted)
}

.profile-progress>div
{
  height:6px;
  margin:8px 0;
  background:var(--color-background);
  border:1px solid var(--color-mint-soft)
}

.profile-progress i
{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--color-muted),var(--color-cyan))
}

.character-board
{
  position:relative;
  display:grid;
  grid-template-columns:92px minmax(280px,1fr) 92px;
  gap:10px;
  height:clamp(460px,calc(100svh - 260px),720px);
  min-height:0;
  padding:12px;
  border:1px solid var(--color-muted);
  outline:1px solid var(--color-gold-40);
  outline-offset:-5px;
  box-shadow:inset 0 0 45px var(--color-surface-dark),0 6px 18px var(--color-overlay-dark-20);
}

.character-board::before, .character-board::after
{
  content:"";
  position:absolute;
  z-index:3;
  width:54px;
  height:54px;
  pointer-events:none;
  border-color:var(--color-gold-60)
}

.character-board::before
{
  top:5px;
  left:5px;
  border-top:2px solid;
  border-left:2px solid
}

.character-board::after
{
  right:5px;
  bottom:5px;
  border-right:2px solid;
  border-bottom:2px solid
}

.equipment-column
{
  display:grid;
  grid-template-rows:repeat(4,minmax(0,1fr));
  align-content:center;
  gap:12px;
  z-index:2
}

.equipment-slot,.inventory-slot
{
  position:relative;
  border:1px solid var(--color-gold-60);
  outline:1px solid var(--color-surface-dark);
  outline-offset:-4px;
  background: radial-gradient(circle at 48% 42%,var(--color-border-soft),transparent 52%), linear-gradient(145deg,var(--color-background),var(--color-background) 70%);
  box-shadow:inset 0 0 24px var(--color-surface-dark),0 3px 8px var(--color-overlay-dark-20);
  clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px)
}

.equipment-slot
{
  width:100%;
  height:min(100%,92px);
  min-height:0;
  display:grid;
  place-items:center;
  padding:8px;
  color:var(--color-muted);
  transition:border-color .18s ease,color .18s ease,filter .18s ease
}

.equipment-slot span
{
  color:var(--color-silver-muted);
  font:400 26px/1 Georgia,serif;
}

.equipment-slot small
{
  color:var(--color-muted);
  font-size:7px;
  text-transform:uppercase;
  letter-spacing:.07em
}

.equipment-slot:hover
{
  border-color:var(--color-brown);
  color:var(--color-gold);
  filter:brightness(1.2) drop-shadow(0 0 6px var(--color-border-soft))
}

.artifact-slot
{
  overflow: hidden;
  cursor: default;
  text-decoration: none;
}

a.artifact-slot
{
  cursor: pointer;
}

.artifact-slot.is-active
{
  border-color: var(--color-gold-60);
  box-shadow: inset 0 0 24px var(--color-surface-dark),0 0 14px var(--color-gold-60);
  filter:brightness(1.12) drop-shadow(0 0 6px var(--color-border-soft));
  background: radial-gradient(circle at 48% 42%,var(--color-border-soft),transparent 52%), linear-gradient(145deg,var(--color-gold-60),var(--color-background) 70%);
}

.artifact-slot.is-active img
{
  filter: none;
  opacity: 1;
}

.artifact-slot img
{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  transition: filter .25s ease, opacity .25s ease, transform .25s ease;
}

.artifact-slot--unavailable img
{
  opacity: .5 !important;
}

.artifact-slot.is-dormant img
{
  filter: grayscale(0.4) saturate(0.5) brightness(.8) contrast(1.12);
  opacity: .8;
}

.artifact-slot--unavailable
{
  border-color: var(--color-teal-48);
  color: inherit;
  opacity: 1;
}

.artifact-slot--unavailable:hover
{
  border-color: var(--color-teal-48);
  filter: none;
}

.equipment-slot .artifact-slot__lock
{
  position:absolute;
  top:7px;
  right:7px;
  z-index:3;
  display:grid;
  width:22px;
  height:22px;
  place-items:center;
  border:1px solid var(--color-cyan-50);
  color:var(--color-cyan-50);
  background:var(--color-surface-dark);
}

.artifact-slot__lock svg
{
  width:13px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.equipment-slot .artifact-slot__tooltip
{
  position:absolute;
  inset:auto 6px 6px;
  z-index:4;
  padding:6px 5px;
  border:1px solid var(--color-cyan-50);
  color:var(--color-cyan-pale);
  background:var(--color-background);
  font:600 8px/1.2 Inter,sans-serif;
  letter-spacing:.08em;
  text-align:center;
  text-transform:uppercase;
  opacity:0;
  pointer-events:none;
  transform:translateY(4px);
  transition:opacity .16s ease,transform .16s ease;
}

.artifact-slot--unavailable:hover .artifact-slot__tooltip, .artifact-slot--unavailable:focus .artifact-slot__tooltip
{
  opacity:1;
  transform:translateY(0);
}

.artifact-slot--unavailable:focus-visible
{
  border-color:var(--color-cyan-50);
  outline:1px solid var(--color-cyan-50);
  outline-offset:2px;
}

.character-stage
{
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid var(--color-gold-40);
  outline:1px solid var(--color-forest);
  outline-offset:-5px;
  background: radial-gradient(ellipse at center bottom,var(--color-border-soft),transparent 48%), radial-gradient(ellipse at 50% 30%,var(--color-mint-soft),transparent 52%), linear-gradient(180deg,var(--color-background),var(--palette-f955694a06) 82%);
  box-shadow:inset 0 0 70px var(--color-surface-dark)
}

.character-stage:after
{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  bottom:6%;
  height:12%;
  border-radius:50%;
  background:radial-gradient(ellipse,var(--color-border-soft),transparent 68%);
  filter:blur(10px)
}

.character-glow
{
  position:absolute;
  width:70%;
  height:86%;
  border-radius:50%;
  background:radial-gradient(ellipse,var(--color-border-soft),transparent 67%);
  filter:blur(20px)
}

.inventory
{
  position:relative;
  margin-top:12px;
  padding:44px 16px 16px;
  border:1px solid var(--color-muted);
  outline:1px solid var(--color-gold-40);
  outline-offset:-5px;
  background:linear-gradient(145deg,var(--color-background),var(--color-background));
  box-shadow:inset 0 0 42px var(--color-overlay-dark-60),0 6px 18px var(--color-overlay-dark-20)
}

.inventory-heading
{
  position:absolute;
  top:-1px;
  left:50%;
  min-width:180px;
  min-height:34px;
  display:flex;
  transform:translateX(-50%);
  justify-content:space-between;
  align-items:center;
  gap:22px;
  padding:0 16px;
  border:1px solid var(--color-gold-60);
  background:linear-gradient(180deg,var(--color-brown-dark),var(--color-brown-black));
  box-shadow:inset 0 0 0 3px var(--color-overlay-dark-20),0 4px 8px var(--color-overlay-dark-20);
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% 100%,0 100%,0 6px)
}

.inventory-heading span
{
  color:var(--color-beige);
  font-size:9px
}

.inventory-grid
{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:5px;
  padding:6px;
  border:1px solid var(--color-border-soft);
  background:var(--color-overlay-dark-20)
}

.inventory-slot
{
  height:clamp(48px,5vw,70px);
  min-width:0
}

.inventory-slot:hover
{
  border-color:var(--color-brown);
  background:radial-gradient(circle,var(--color-border-soft),var(--color-background) 72%)
}

@media(max-width:900px)
{
  .profile-heading
  {
    grid-template-columns:minmax(0,1fr) 82px;
  }

  .profile-next-mission
  {
    grid-column:1 / -1;
    grid-row:2;
  }

  .profile-layout
  {
    grid-template-columns:1fr
  }

  .profile-stats
  {
    order:2
  }

  .character-board
  {
    min-height:460px
  }

  .inventory-grid
  {
    grid-template-columns:repeat(6,1fr)
  }

}

/* Final mana fill layer: only the blue orb changes, never the hands or frame. */
.profile-mana > i
{
  inset: 0;
  height: auto;
  clip-path: circle(34% at 50% 44%);
  background: linear-gradient(to bottom, var(--color-surface-dark) 0, var(--color-overlay-dark-60) calc(var(--mana-surface) - 3%), var(--color-overlay-dark-20) var(--mana-surface), transparent calc(var(--mana-surface) + 3%));
  transition: background .55s ease;
}

.profile-mana > i::after
{
  content: "";
  position: absolute;
  top: var(--mana-surface);
  left: 18%;
  width: 64%;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--color-cyan-50), var(--color-violet-20) 45%, transparent 72%);
  filter: blur(1px);
  transform: translateY(-50%);
  box-shadow: 0 2px 9px var(--color-violet-20);
  transition: top .55s ease;
}

@media(max-width:620px)
{
  .profile-main
  {
    width:min(100% - 20px,1180px);
    padding-top:18px
  }

  .profile-frame
  {
    padding:18px 12px
  }

  .profile-heading
  {
    grid-template-columns:minmax(0,1fr) 68px;
    gap:12px;
    align-items:flex-start
  }

  .profile-next-mission
  {
    padding-inline:12px;
  }

  .profile-next-mission strong
  {
    font-size:16px;
  }

  .profile-layout
  {
    gap:14px
  }

  .character-board
  {
    grid-template-columns:64px minmax(160px,1fr) 64px;
    gap:7px;
    min-height:390px
  }

  .equipment-column
  {
    gap:8px
  }

  .equipment-slot small
  {
    display:none
  }

  .inventory-grid
  {
    grid-template-columns:repeat(4,1fr)
  }

}

/* Animated GLB character */
.character-stage
{
  min-width:0;
  min-height:0;
  isolation:isolate;
}

.character-canvas
{
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity .45s ease;
  pointer-events:none;
  touch-action:none;
}

.character-video
{
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}

.character-stage.is-loaded .character-canvas
{
  opacity:1;
}

.character-stage.is-loaded .character-glow
{
  opacity:.72;
}

.character-stage {
  background: var(--color-bg-dark);
}


.character-loader
{
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-content: end center;
  justify-items: center;
  gap: 10px;
  padding-bottom: 12%;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 100%, var(--color-border-soft), transparent 42%), linear-gradient(180deg, var(--color-background), var(--color-surface-dark));
  opacity: 1;
  visibility: visible;
  transition: opacity .7s ease, visibility 0s linear .7s;
}

.character-stage.is-loaded .character-loader
{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.character-loader::before
{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 76%;
  height: 22%;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, var(--color-white-50), var(--color-border-soft) 38%, transparent 72%);
  filter: blur(5px);
  animation: stream-ground 2.6s ease-in-out infinite;
}

.character-loader__stream
{
  position: absolute;
  inset: 4% 16% 0;
  overflow: hidden;
  filter: drop-shadow(0 0 20px var(--color-border-soft));
  -webkit-mask-image: linear-gradient(to top, var(--color-background) 0 82%, transparent 100%);
  mask-image: linear-gradient(to top, var(--color-background) 0 82%, transparent 100%);
}

.character-loader__stream::before, .character-loader__stream::after
{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12%;
  width: 34%;
  height: 112%;
  border-radius: 50%;
  transform: translateX(-50%);
  background: linear-gradient(to top, var(--color-white-50), var(--color-border-soft) 48%, transparent 88%);
  filter: blur(16px);
  animation: stream-pulse 2.8s ease-in-out infinite;
}

.character-loader__stream::after
{
  width: 9%;
  background: linear-gradient(to top, var(--color-white-74), var(--color-border-soft) 50%, transparent 92%);
  filter: blur(7px);
  animation-delay: -1.1s;
}

.character-loader__veil
{
  position: absolute;
  left: 50%;
  bottom: -18%;
  width: 42%;
  height: 118%;
  border-radius: 48% 52% 35% 65%;
  border-left: 2px solid var(--color-gold-40);
  border-right: 1px solid var(--color-gold-40);
  filter: blur(2px);
  opacity: .7;
  animation: stream-rise 3.6s ease-in-out infinite;
}

.character-loader__veil--one
{
  transform: translateX(-50%) rotate(8deg);
}

.character-loader__veil--two
{
  width: 62%;
  animation-delay: -1.2s;
  animation-duration: 4.4s;
}

.character-loader__veil--three
{
  width: 28%;
  animation-delay: -2.4s;
  animation-duration: 3.1s;
}

.character-loader__spark
{
  --spark-x: 50%;
  --spark-delay: 0s;
  --spark-size: 3px;
  position: absolute;
  left: var(--spark-x);
  bottom: 2%;
  width: var(--spark-size);
  height: var(--spark-size);
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 0 9px 2px var(--color-gold-40);
  opacity: 0;
  animation: stream-spark 3s var(--spark-delay) ease-out infinite;
}

.character-loader__spark:nth-of-type(4)
{
  --spark-x: 28%;
  --spark-delay: -.3s;
  --spark-size: 2px;
}

.character-loader__spark:nth-of-type(5)
{
  --spark-x: 63%;
  --spark-delay: -1.7s;
}

.character-loader__spark:nth-of-type(6)
{
  --spark-x: 42%;
  --spark-delay: -.9s;
  --spark-size: 4px;
}

.character-loader__spark:nth-of-type(7)
{
  --spark-x: 72%;
  --spark-delay: -2.2s;
  --spark-size: 2px;
}

.character-loader__spark:nth-of-type(8)
{
  --spark-x: 35%;
  --spark-delay: -2.7s;
}

.character-loader__spark:nth-of-type(9)
{
  --spark-x: 56%;
  --spark-delay: -1.1s;
  --spark-size: 2px;
}

.character-loader__spark:nth-of-type(10)
{
  --spark-x: 77%;
  --spark-delay: -.5s;
}

.character-loader__spark:nth-of-type(11)
{
  --spark-x: 20%;
  --spark-delay: -2s;
  --spark-size: 4px;
}

.character-loader__text
{
  position: relative;
  z-index: 2;
  color: var(--color-white-74);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  animation: stream-text 2.4s ease-in-out infinite;
}

.character-stage.has-load-error .character-loader__stream
{
  filter: grayscale(.6) opacity(.55);
}

#raise-button {
  min-width: 100px;
}

@keyframes stream-pulse
{
  0%, 100%
  {
    transform: translateX(-50%) scaleX(.72);
    opacity: .48;
  }

  50%
  {
    transform: translateX(-50%) scaleX(1.18);
    opacity: .94;
  }

}

@keyframes stream-rise
{
  0%, 100%
  {
    transform: translateX(-50%) translateY(7%) skewX(-7deg);
    opacity: .28;
  }

  50%
  {
    transform: translateX(-50%) translateY(-5%) skewX(9deg);
    opacity: .82;
  }

}

@keyframes stream-spark
{
  0%
  {
    transform: translate(0, 0) scale(.4);
    opacity: 0;
  }

  14%
  {
    opacity: 1;
  }

  65%
  {
    opacity: .65;
  }

  100%
  {
    transform: translate(18px, -360px) scale(0);
    opacity: 0;
  }

}

@keyframes stream-ground
{
  50%
  {
    transform: translateX(-50%) scaleX(1.12);
    opacity: .62;
  }

}

@keyframes stream-text
{
  50%
  {
    opacity: .45;
  }

}

@media (prefers-reduced-motion: reduce)
{
  .character-loader::before, .character-loader__stream::before, .character-loader__stream::after, .character-loader__veil, .character-loader__spark, .character-loader__text
  {
    animation: none;
  }

}

/* Empty recovery state follows the centered action pattern. */
.recovery-empty
{
  text-align:center;
  margin-top:24px;
  padding:22px;
  border:1px solid var(--color-cyan-50);
}

.recovery-empty p
{
  margin:0 auto 18px;
  max-width:760px;
  color:var(--color-cyan-pale);
  font:400 16px/1.5 Inter,sans-serif
}

/* Keep the mana label clean and legible directly over the artwork. */
.profile-mana > span
{
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

.profile-mana small, .profile-mana strong, .profile-mana strong b
{
  color: var(--color-white);
}

.recovery-actions b {
  border: none;
}