:root {
  --bg: #040208;
  --panel: rgba(18, 13, 36, 0.82);
  --panel-strong: rgba(28, 19, 55, 0.94);
  --text: #fff7ff;
  --muted: #c5b7dc;
  --pink: #ff2fb2;
  --red: #ff3148;
  --orange: #ff9b20;
  --yellow: #ffe83d;
  --green: #36f56a;
  --blue: #20b7ff;
  --purple: #a84cff;
  --glow: 0 0 26px rgba(255, 47, 178, 0.38), 0 0 54px rgba(32, 183, 255, 0.18);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at 50% 0%, #211052 0, #070411 40%, #020105 100%);
  overflow-x: hidden;
}

button, textarea, select { font: inherit; }
button { cursor: pointer; }
a.primary-button,
a.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

button,
a,
[data-enter-app],
[data-view],
[data-view-link],
.primary-button,
.secondary-button,
.nav-button,
.zone-grid button,
.zone-grid a {
  pointer-events: auto;
  touch-action: manipulation;
  position: relative;
  z-index: 30;
}

button::before,
button::after,
a::before,
a::after,
.primary-button::before,
.primary-button::after,
.secondary-button::before,
.secondary-button::after,
.nav-button::before,
.nav-button::after {
  pointer-events: none;
}

.stars, .aurora {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.stars {
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255,47,178,.75) 1px, transparent 1.7px),
    radial-gradient(circle, rgba(32,183,255,.8) 1px, transparent 1.7px);
  background-size: 86px 86px, 132px 132px, 176px 176px;
  opacity: .58;
  animation: drift 26s linear infinite;
}

.aurora {
  background:
    radial-gradient(circle at 10% 80%, rgba(255,49,72,.28), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(32,183,255,.24), transparent 32%),
    radial-gradient(circle at 48% 108%, rgba(54,245,106,.17), transparent 30%);
  filter: blur(8px);
}

@keyframes drift {
  from { transform: translateY(0); }
  to { transform: translateY(-90px); }
}

@keyframes rainbowFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes pulseStart {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 0 18px rgba(255,47,178,.55), 0 0 34px rgba(32,183,255,.34);
  }
  50% {
    transform: translateY(-3px) scale(1.035);
    box-shadow: 0 0 28px rgba(255,232,61,.72), 0 0 62px rgba(255,47,178,.5), 0 0 86px rgba(32,183,255,.36);
  }
}

@keyframes shineSweep {
  0%, 35% { transform: translateX(-90%) rotate(10deg); }
  70%, 100% { transform: translateX(90%) rotate(10deg); }
}

.screen {
  display: none;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.screen.active { display: flex; }

body:has(#app-screen:target) #start-screen,
body:has(.view:target) #start-screen {
  display: none;
}

body:has(#app-screen:target) #app-screen,
body:has(.view:target) #app-screen {
  display: flex;
}

/* JavaScript owns the active view. A stale :target must not override navigation. */

.start-screen {
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.hero-card {
  width: min(1120px, 100%);
  padding: clamp(18px, 4vw, 34px);
  border-radius: 32px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(145deg, rgba(5,3,12,.9), rgba(27,15,57,.82));
  box-shadow: var(--glow);
  text-align: center;
  backdrop-filter: blur(18px);
}

.bx3-hero {
  display: block;
  width: min(420px, 92%);
  max-height: 230px;
  object-fit: contain;
  margin: 0 auto 8px;
  border-radius: 22px;
  filter: drop-shadow(0 0 22px rgba(255,47,178,.55));
}

.app-hero-logo {
  width: min(390px, 88%);
  max-height: 360px;
  border-radius: 28px;
}

.hero-card h1 {
  margin: 6px auto 10px;
  font-size: clamp(2.05rem, 7vw, 4.25rem);
  line-height: .9;
  letter-spacing: -0.075em;
  text-transform: none;
  background: linear-gradient(90deg, var(--pink), var(--orange), var(--yellow), var(--green), var(--blue), var(--purple), var(--pink));
  background-size: 260% 260%;
  -webkit-background-clip: text;
  color: transparent;
  animation: rainbowFlow 5s ease infinite;
  text-shadow: 0 0 18px rgba(255,255,255,.16), 0 0 34px rgba(255,47,178,.28);
  white-space: nowrap;
}

.rlvg-title span {
  color: #fff;
  text-shadow: 0 0 16px var(--pink), 0 0 30px var(--blue);
}

.rlvg-title .initial-r {
  color: var(--red);
  text-shadow: 0 0 12px var(--red), 0 0 28px var(--red);
}

.rlvg-title .initial-l {
  color: var(--yellow);
  text-shadow: 0 0 12px var(--yellow), 0 0 28px var(--orange);
}

.rlvg-title .initial-v {
  color: var(--green);
  text-shadow: 0 0 12px var(--green), 0 0 28px var(--green);
}

.rlvg-title .initial-g {
  color: var(--blue);
  text-shadow: 0 0 12px var(--blue), 0 0 28px var(--blue);
}

.hero-line {
  max-width: min(820px, 96vw);
  margin: 12px auto 0;
  font-size: clamp(.78rem, 2.9vw, 1.38rem);
  color: #ffeafd;
  font-weight: 850;
  text-shadow: 0 0 12px rgba(255,47,178,.55);
  white-space: nowrap;
  letter-spacing: -0.035em;
}

.hero-line-two {
  max-width: min(860px, 97vw);
  margin-top: 7px;
  margin-bottom: 20px;
  color: transparent;
  background: linear-gradient(90deg, var(--yellow), var(--green), var(--blue), var(--purple), var(--pink));
  background-size: 220% 220%;
  -webkit-background-clip: text;
  animation: rainbowFlow 4.5s ease infinite;
  font-size: clamp(.58rem, 2.15vw, 1.06rem);
  white-space: nowrap;
  letter-spacing: -0.07em;
}

.microcopy {
  font-weight: 800;
}

.microcopy {
  max-width: 940px;
  margin: 14px auto 0;
  color: transparent;
  background: linear-gradient(90deg, #fff, var(--yellow), var(--pink), var(--blue), #fff);
  background-size: 240% 240%;
  -webkit-background-clip: text;
  animation: rainbowFlow 6s ease infinite;
  font-size: clamp(.68rem, 1.9vw, 1rem);
  line-height: 1.22;
}

.microcopy span {
  display: block;
}

.opening-world-banner {
  display: block;
  width: min(980px, 100%);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: 20px auto 0;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 0 28px rgba(255,47,178,.3), 0 0 54px rgba(32,183,255,.18);
}

.early-login-card {
  width: min(780px, 100%);
  margin: 18px auto 0;
  padding: 16px;
  border-radius: 24px;
  text-align: left;
  background:
    radial-gradient(circle at 8% 0%, rgba(255,255,255,.18), transparent 36%),
    linear-gradient(135deg, rgba(255,47,178,.18), rgba(32,183,255,.12)),
    rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 0 28px rgba(255,47,178,.16);
}

.early-login-card h2 {
  margin: 0 0 7px;
  font-size: clamp(1.25rem, 4vw, 2rem);
}

.early-login-card p:not(.eyebrow) {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.4;
}

.login-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(86px, .32fr) auto auto;
  gap: 8px;
  align-items: center;
}

.login-row input {
  margin-top: 0;
}

.early-login-card small {
  display: block;
  margin-top: 9px;
  color: rgba(255,255,255,.72);
  line-height: 1.35;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--yellow);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.primary-button, .secondary-button, .nav-button, .zone-grid button, .zone-grid a {
  border: 0;
  color: var(--text);
}

.primary-button {
  padding: 15px 26px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--red), var(--orange), var(--yellow), var(--green), var(--blue), var(--purple), var(--pink), var(--red));
  background-size: 300% 300%;
  box-shadow: 0 0 20px rgba(255,47,178,.5);
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
  animation: rainbowFlow 3s ease infinite;
}

.start-screen .primary-button {
  position: relative;
  overflow: hidden;
  max-width: min(96vw, 640px);
  border: 1px solid rgba(255,255,255,.42);
  color: #05030b;
  text-shadow: 0 1px 0 rgba(255,255,255,.36);
  white-space: nowrap;
  font-size: clamp(.7rem, 2.9vw, 1rem);
  letter-spacing: .025em;
  animation: rainbowFlow 2.2s ease infinite, pulseStart 1.7s ease-in-out infinite;
}

.start-screen .primary-button::after {
  content: "";
  position: absolute;
  inset: -45% -20%;
  background: linear-gradient(120deg, transparent 34%, rgba(255,255,255,.72), transparent 66%);
  transform: translateX(-90%) rotate(10deg);
  animation: shineSweep 2.4s ease-in-out infinite;
}

.primary-button.small, .secondary-button {
  padding: 11px 16px;
  font-size: .88rem;
}

.secondary-button, .zone-grid button, .zone-grid a {
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
}

.app-screen { min-height: 100vh; }

.sidebar {
  width: 230px;
  padding: 18px;
  background: rgba(3,2,10,.72);
  border-right: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
}

.mini-logo { margin-bottom: 22px; }

.mini-logo img {
  display: block;
  width: 142px;
  max-width: 100%;
  border-radius: 14px;
  filter: drop-shadow(0 0 16px rgba(255,47,178,.65));
}

.mini-logo small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.nav-button {
  width: 100%;
  display: block;
  margin: 6px 0;
  padding: 12px 13px;
  border: 0;
  border-radius: 15px;
  text-align: left;
  background: transparent;
  color: var(--muted);
  text-decoration: none;
}

.nav-button.active, .nav-button:hover {
  color: var(--text);
  background: linear-gradient(90deg, rgba(255,47,178,.28), rgba(32,183,255,.13));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}

.nav-button.love { color: #ffd6f5; }

.mobile-nav { display: none; }

.content {
  flex: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}

.topbar h2 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.35rem);
}

.level-pill {
  min-width: 145px;
  padding: 12px 15px;
  border-radius: 22px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.14);
  text-align: right;
}

.level-pill span, .level-pill small { display: block; }
.level-pill small { color: var(--muted); }

.coin-pill {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.28), transparent 26%),
    linear-gradient(135deg, rgba(255,232,61,.22), rgba(255,47,178,.16), rgba(32,183,255,.14));
  box-shadow: 0 0 22px rgba(255,232,61,.18);
}

.coin-pill strong,
#coin-bank-total,
#reward-coin-total {
  color: var(--yellow);
  text-shadow: 0 0 12px rgba(255,232,61,.65);
}

.xp-bar {
  height: 12px;
  margin-bottom: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.xp-bar div {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--yellow), var(--green), var(--blue), var(--pink));
  box-shadow: 0 0 18px rgba(54,245,106,.6);
  transition: width .35s ease;
}

.view { display: none; }
.view.active { display: block; }

.grid {
  display: grid;
  gap: 16px;
}

.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.panel, .quest-card {
  padding: 20px;
  border-radius: 26px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 30px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
}

.panel h3, .quest-card h3 {
  margin: 0 0 9px;
  font-size: 1.35rem;
}

.panel p, .quest-card p {
  color: var(--muted);
  line-height: 1.52;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(220px, 420px) 1fr;
  gap: 18px;
  align-items: center;
  padding: 12px 18px 12px 12px;
  margin-bottom: 16px;
}

.home-hero img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  object-position: center;
  border-radius: 21px;
}

.home-hero .home-bx3-logo {
  object-fit: contain;
  padding: 18px;
  background: rgba(0, 0, 0, .48);
  filter: drop-shadow(0 0 18px rgba(255,47,178,.55));
}

.home-hero .home-level-banner {
  object-fit: cover;
  object-position: center;
  padding: 0;
  background: rgba(0, 0, 0, .48);
  filter: drop-shadow(0 0 18px rgba(255,47,178,.35));
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}

.stat {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border-radius: 21px;
  background: var(--panel-strong);
  border: 1px solid rgba(255,255,255,.13);
}

.stat::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18% 0%, rgba(255,255,255,.18), transparent 36%);
  pointer-events: none;
}

.stat > * {
  position: relative;
  z-index: 1;
}

.stat span, .stat small { display: block; }
.stat span {
  font-size: clamp(1.45rem, 4.2vw, 2.35rem);
  font-weight: 1000;
  line-height: .92;
  letter-spacing: -.07em;
  text-transform: uppercase;
}
.stat small {
  margin-top: 14px;
  color: rgba(255,255,255,.82);
  line-height: 1.35;
}
.mind { box-shadow: inset 0 0 28px rgba(32,183,255,.2), 0 0 18px rgba(32,183,255,.08); }
.mind span { color: #7fe3ff; text-shadow: 0 0 16px rgba(32,183,255,.45); }
.body { box-shadow: inset 0 0 28px rgba(54,245,106,.2), 0 0 18px rgba(54,245,106,.08); }
.body span { color: #8cff9f; text-shadow: 0 0 16px rgba(54,245,106,.42); }
.heart { box-shadow: inset 0 0 28px rgba(255,47,178,.24), 0 0 18px rgba(255,47,178,.1); }
.heart span { color: #ff8bdb; text-shadow: 0 0 16px rgba(255,47,178,.48); }
.spirit { box-shadow: inset 0 0 28px rgba(168,76,255,.24), 0 0 18px rgba(168,76,255,.1); }
.spirit span { color: #d3a6ff; text-shadow: 0 0 16px rgba(168,76,255,.5); }

.player-summary {
  display: flex;
  align-items: center;
  gap: 18px;
}

.avatar {
  position: relative;
  flex: 0 0 auto;
  width: 136px;
  height: 176px;
  --skin: #d89a67;
  --skin-light: #ffd9bb;
  --hair: #24120d;
  --hair-shine: rgba(255,255,255,.12);
  --outfit-a: var(--pink);
  --outfit-b: var(--blue);
  --aura: rgba(255,47,178,.45);
  filter: drop-shadow(0 0 16px var(--aura));
}

.avatar-svg {
  display: grid;
  place-items: center;
  width: 124px;
  height: 158px;
  filter: drop-shadow(0 0 18px rgba(255,47,178,.35));
}

.avatar-svg.big {
  width: min(230px, 100%);
  height: 292px;
}

.avatar-svg svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.photo-avatar {
  width: 132px;
  height: auto;
  filter: none;
}

.photo-avatar.big {
  width: min(270px, 100%);
  height: auto;
}

.photo-avatar-card {
  width: 100%;
  padding: 10px;
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.04)),
    rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 0 26px var(--avatar-aura), inset 0 0 0 1px rgba(255,255,255,.08);
  position: relative;
  text-align: center;
}

.photo-avatar-frame {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 26px;
  border: 3px solid rgba(255,255,255,.48);
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.16), rgba(0,0,0,.6));
  position: relative;
}

.photo-avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.35) contrast(1.08) brightness(1.04);
  transform: scale(1.02);
}

.photo-style-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.28), transparent 28%, transparent 68%, rgba(255,255,255,.12)),
    radial-gradient(circle at 50% 105%, var(--avatar-aura), transparent 42%);
  mix-blend-mode: screen;
}

.photo-placeholder {
  height: 100%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .08em;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.2), transparent 30%),
    linear-gradient(135deg, rgba(255,47,178,.45), rgba(32,183,255,.32));
}

.avatar-badge {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(5,3,12,.78);
  border: 1px solid rgba(255,255,255,.34);
  box-shadow: 0 0 14px rgba(255,47,178,.35);
  font-size: .95rem;
  font-weight: 1000;
}

.photo-avatar.big .avatar-badge {
  min-width: 46px;
  height: 46px;
  font-size: 1.25rem;
}

.accessory-badge {
  left: 2px;
  top: 2px;
  color: var(--yellow);
}

.accessory-badge:empty {
  display: none;
}

.companion-badge {
  right: -4px;
  top: 42%;
  transform: translateY(-50%);
}

.avatar-card-name {
  margin: 9px 0 1px;
  color: #fff;
  font-weight: 1000;
  text-shadow: 0 0 10px rgba(255,47,178,.55);
}

.photo-avatar-card small {
  color: var(--muted);
}

.photo-avatar.style-anime-glow img {
  filter: saturate(1.55) contrast(1.12) brightness(1.08);
}

.photo-avatar.style-bitmoji-game img {
  filter: saturate(1.25) contrast(1.18) brightness(1.05);
}

.photo-avatar.style-comic-hero img {
  filter: saturate(1.5) contrast(1.28);
}

.photo-avatar.style-arcade-legend img {
  filter: saturate(1.7) contrast(1.12) hue-rotate(8deg);
}

input[type="file"] {
  padding: 10px;
}

.micro-note {
  margin: 6px 0 14px;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.4;
}

.generate-avatar-button {
  width: 100%;
  margin: 4px 0 10px;
}

.generation-status {
  min-height: 42px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 14px;
  color: #dff7ff;
  background: rgba(32,183,255,.08);
  border: 1px solid rgba(32,183,255,.2);
  font-size: .86rem;
  line-height: 1.4;
}

.avatar.big {
  width: 234px;
  height: 292px;
  margin: 0 auto 16px;
}

.avatar-aura {
  position: absolute;
  z-index: 0;
  inset: 0 3px 4px;
  border-radius: 45% 45% 38% 38%;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,.2), transparent 22%),
    radial-gradient(circle at 50% 50%, var(--aura), transparent 68%);
  filter: blur(5px);
}

.avatar-head {
  position: absolute;
  z-index: 4;
  top: 28px;
  left: 24px;
  width: 84px;
  height: 94px;
  border-radius: 48% 48% 46% 46% / 42% 42% 56% 56%;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,.35), transparent 18%),
    linear-gradient(145deg, var(--skin-light), var(--skin));
  border: 3px solid rgba(255,255,255,.72);
  box-shadow:
    -8px 40px 0 -27px var(--skin),
    8px 40px 0 -27px var(--skin),
    0 0 18px rgba(255,47,178,.42),
    inset 0 -10px 16px rgba(0,0,0,.08);
}

.avatar-hair {
  position: absolute;
  z-index: 5;
  top: 13px;
  left: 21px;
  width: 94px;
  height: 50px;
  border-radius: 52px 52px 22px 22px;
  background: var(--hair);
  box-shadow: inset 0 -8px 0 var(--hair-shine);
}

.avatar-hair::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -13px;
  height: 28px;
  border-radius: 0 0 38px 38px;
  background: var(--hair);
  clip-path: polygon(0 0, 18% 100%, 36% 14%, 55% 95%, 76% 10%, 100% 72%, 100% 0);
}

.avatar-face {
  position: absolute;
  inset: 0;
}

.avatar-face::before,
.avatar-face::after {
  content: "";
  position: absolute;
  top: 37px;
  width: 10px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff 0 18%, #161017 22%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.08);
}

.avatar-face::before { left: 24px; }
.avatar-face::after { right: 24px; }

.avatar-head::after {
  content: "";
  position: absolute;
  left: 32px;
  bottom: 22px;
  width: 22px;
  height: 9px;
  border-bottom: 3px solid #171018;
  border-radius: 0 0 18px 18px;
}

.avatar-nose {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 8px;
  border-radius: 999px;
  background: rgba(95, 53, 31, .26);
  transform: translate(-50%, -50%);
}

.avatar-cheeks::before,
.avatar-cheeks::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 57px;
  width: 12px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 79, 160, .34);
  filter: blur(.2px);
}

.avatar-cheeks::before { left: 16px; }
.avatar-cheeks::after { right: 16px; }

.avatar-head::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -7px;
  top: 39px;
  width: 12px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--skin-light), var(--skin));
  box-shadow: 86px 0 0 var(--skin);
}

.avatar-body {
  position: absolute;
  z-index: 2;
  top: 116px;
  left: 34px;
  width: 68px;
  height: 56px;
  border-radius: 28px 28px 22px 22px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.2), transparent 34%, rgba(255,255,255,.16)),
    linear-gradient(135deg, var(--outfit-a), var(--outfit-b));
  border: 3px solid rgba(255,255,255,.28);
  box-shadow: 0 0 18px rgba(32,183,255,.42);
}

.avatar-body::before,
.avatar-body::after {
  content: "";
  position: absolute;
  top: 6px;
  width: 17px;
  height: 62px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 48% 28%, rgba(255,255,255,.28), transparent 20%),
    linear-gradient(145deg, var(--skin-light), var(--skin) 62%, rgba(96,52,30,.95));
  border: 2px solid rgba(255,255,255,.24);
}

.avatar-body::before {
  left: -18px;
  transform: rotate(12deg);
}

.avatar-body::after {
  right: -18px;
  transform: rotate(-12deg);
}

.avatar-body .avatar-accessory,
.avatar-accessory {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 15px;
  transform: translateX(-50%);
  color: #fff;
  font-weight: 1000;
  text-shadow: 0 0 8px rgba(255,255,255,.9);
}

.avatar.big .avatar-head {
  top: 45px;
  left: 60px;
  width: 114px;
  height: 128px;
  border-width: 4px;
}

.avatar.big .avatar-hair {
  top: 25px;
  left: 51px;
  width: 132px;
  height: 70px;
}

.avatar.big .avatar-face::before,
.avatar.big .avatar-face::after {
  top: 53px;
  width: 14px;
  height: 19px;
}

.avatar.big .avatar-face::before { left: 35px; }
.avatar.big .avatar-face::after { right: 35px; }

.avatar.big .avatar-head::after {
  left: 43px;
  bottom: 31px;
  width: 32px;
  height: 13px;
}

.avatar.big .avatar-body {
  top: 190px;
  left: 69px;
  width: 96px;
  height: 82px;
  border-radius: 34px 34px 28px 28px;
}

.avatar.big .avatar-nose {
  width: 8px;
  height: 12px;
}

.avatar.big .avatar-cheeks::before,
.avatar.big .avatar-cheeks::after {
  top: 78px;
  width: 16px;
  height: 9px;
}

.avatar.big .avatar-cheeks::before { left: 23px; }
.avatar.big .avatar-cheeks::after { right: 23px; }

.avatar.big .avatar-head::before {
  left: -11px;
  top: 56px;
  width: 16px;
  height: 24px;
  box-shadow: 119px 0 0 var(--skin);
}

.companion {
  position: absolute;
  z-index: 8;
  right: -2px;
  top: 18px;
  width: 42px;
  height: 42px;
  display: block;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 16px rgba(255,232,61,.62), inset 0 0 0 2px rgba(255,255,255,.35);
}

.companion::before,
.companion::after {
  content: "";
  position: absolute;
}

.avatar.big .companion {
  right: 3px;
  top: 39px;
  width: 58px;
  height: 58px;
}

.avatar.skin-warm-glow { --skin: #d89a67; --skin-light: #ffd9bb; }
.avatar.skin-deep-bronze { --skin: #8b4d2e; --skin-light: #c78358; }
.avatar.skin-golden { --skin: #c88445; --skin-light: #ffd19c; }
.avatar.skin-rose-light { --skin: #f0b394; --skin-light: #ffe1d0; }
.avatar.skin-mocha { --skin: #5f351f; --skin-light: #ad7350; }

.avatar.hair-short-fade .avatar-hair { height: 40px; border-radius: 48px 48px 16px 16px; }
.avatar.hair-short-fade .avatar-hair::after { height: 14px; bottom: -4px; }
.avatar.hair-curly-crown .avatar-hair { top: 6px; height: 66px; border-radius: 50%; box-shadow: -14px 12px 0 -2px var(--hair), 14px 12px 0 -2px var(--hair), -5px -1px 0 2px var(--hair), 5px -1px 0 2px var(--hair), 0 20px 0 -16px rgba(255,255,255,.16); }
.avatar.hair-curly-crown .avatar-hair::after { display: none; }
.avatar.hair-long-flow .avatar-hair { top: 10px; height: 106px; border-radius: 54px 54px 44px 44px; }
.avatar.hair-long-flow .avatar-hair::after { left: -3px; right: -3px; bottom: -18px; height: 42px; clip-path: none; border-radius: 0 0 44px 44px; }
.avatar.hair-long-side-hair .avatar-hair {
  top: 8px;
  left: 19px;
  width: 100px;
  height: 122px;
  border-radius: 58px 58px 48px 48px;
  background:
    linear-gradient(105deg, transparent 0 46%, rgba(255,255,255,.14) 47% 54%, transparent 55%),
    var(--hair);
}
.avatar.hair-long-side-hair .avatar-hair::after {
  display: block;
  left: 48px;
  right: -12px;
  bottom: -10px;
  height: 95px;
  border-radius: 10px 42px 46px 28px;
  background: var(--hair);
  clip-path: polygon(12% 0, 100% 0, 100% 88%, 58% 100%, 28% 72%, 0 42%);
}
.avatar.hair-long-side-hair .avatar-hair::before {
  content: "";
  position: absolute;
  z-index: 7;
  left: 10px;
  top: 18px;
  width: 48px;
  height: 88px;
  border-radius: 42px 16px 30px 42px;
  background: var(--skin);
  clip-path: ellipse(44% 48% at 54% 43%);
}
.avatar.hair-high-puff .avatar-hair { top: -5px; left: 38px; width: 62px; height: 62px; border-radius: 50%; box-shadow: 0 34px 0 -12px var(--hair), -18px 15px 0 -8px var(--hair), 18px 15px 0 -8px var(--hair); }
.avatar.hair-high-puff .avatar-hair::after { display: none; }
.avatar.hair-buzz-cut .avatar-hair { top: 25px; height: 24px; border-radius: 50px 50px 8px 8px; }
.avatar.hair-buzz-cut .avatar-hair::after { display: none; }

.avatar.hair-color-dark-brown { --hair: #24120d; --hair-shine: rgba(255,255,255,.12); }
.avatar.hair-color-black { --hair: #050407; --hair-shine: rgba(255,255,255,.1); }
.avatar.hair-color-blonde { --hair: #f2c84b; --hair-shine: rgba(255,255,255,.22); }
.avatar.hair-color-auburn { --hair: #a63d1f; --hair-shine: rgba(255,229,190,.2); }
.avatar.hair-color-pink { --hair: #ff4fba; --hair-shine: rgba(255,255,255,.28); }
.avatar.hair-color-blue { --hair: #22b7ff; --hair-shine: rgba(255,255,255,.25); }
.avatar.hair-color-rainbow {
  --hair: linear-gradient(90deg, var(--red), var(--orange), var(--yellow), var(--green), var(--blue), var(--purple), var(--pink));
  --hair-shine: rgba(255,255,255,.3);
}

.avatar.outfit-neon-hoodie { --outfit-a: var(--pink); --outfit-b: var(--blue); }
.avatar.outfit-quest-armor { --outfit-a: #343bff; --outfit-b: #b7c7ff; }
.avatar.outfit-creator-jacket { --outfit-a: #ff7a22; --outfit-b: #ff2fb2; }
.avatar.outfit-cosmic-robe { --outfit-a: #712cff; --outfit-b: #27d9ff; }
.avatar.outfit-wellness-set { --outfit-a: #23db73; --outfit-b: #ffe83d; }

.avatar.aura-heart-aura { --aura: rgba(255,47,178,.5); }
.avatar.aura-cosmic-blue { --aura: rgba(32,183,255,.54); }
.avatar.aura-solar-gold { --aura: rgba(255,232,61,.52); }
.avatar.aura-green-growth { --aura: rgba(54,245,106,.5); }
.avatar.aura-royal-violet { --aura: rgba(168,76,255,.54); }

.avatar.accessory-headphones .avatar-head { box-shadow: 0 0 18px rgba(255,47,178,.42), -13px 34px 0 -6px #111, 13px 34px 0 -6px #111; }
.avatar.accessory-headphones .avatar-hair::before { content: ""; position: absolute; left: 9px; right: 9px; top: 28px; height: 28px; border-top: 4px solid #111; border-radius: 50% 50% 0 0; }
.avatar.accessory-crown .avatar-accessory::before { content: "♛"; position: relative; top: -80px; color: var(--yellow); font-size: 1.35rem; filter: drop-shadow(0 0 7px var(--yellow)); }
.avatar.accessory-glasses .avatar-head { box-shadow: 0 0 18px rgba(255,47,178,.42), inset 19px 36px 0 -16px transparent; }
.avatar.accessory-glasses .avatar-face { border-top: 3px solid #111; width: 48px; height: 18px; left: 15px; top: 31px; border-radius: 999px; box-shadow: 0 0 0 3px transparent; }
.avatar.accessory-glasses .avatar-face::before { left: 3px; top: 0; width: 17px; height: 13px; border-radius: 7px; background: transparent; border: 3px solid #111; box-shadow: 25px 0 0 -3px transparent, 25px 0 0 0 #111; }
.avatar.accessory-glasses .avatar-face::after { display: none; }
.avatar.accessory-quest-chain .avatar-accessory::before { content: "XP"; position: relative; top: 0; color: var(--yellow); font-size: .9rem; background: rgba(0,0,0,.38); border-radius: 999px; padding: 2px 6px; }

.companion.companion-star { clip-path: polygon(50% 0%, 62% 34%, 98% 35%, 69% 56%, 79% 91%, 50% 70%, 21% 91%, 31% 56%, 2% 35%, 38% 34%); }
.companion.companion-dog { background: #d28a4b; border-radius: 44% 44% 50% 50%; }
.companion.companion-dog::before { left: -5px; top: 4px; width: 15px; height: 20px; border-radius: 50%; background: #8b552d; box-shadow: 36px 0 0 #8b552d; }
.companion.companion-dog::after { left: 13px; top: 19px; width: 16px; height: 8px; border-radius: 999px; background: #1a1010; box-shadow: -6px -8px 0 -3px #111, 6px -8px 0 -3px #111; }
.companion.companion-dragon { background: linear-gradient(135deg, #34f56a, #20b7ff); clip-path: polygon(50% 0, 62% 28%, 94% 14%, 77% 46%, 100% 68%, 66% 66%, 52% 100%, 38% 66%, 4% 68%, 27% 46%, 6% 14%, 38% 28%); }
.companion.companion-camera { background: #1d49ff; border-radius: 10px; }
.companion.companion-camera::before { left: 11px; top: 11px; width: 20px; height: 20px; border-radius: 50%; background: #05030b; box-shadow: inset 0 0 0 5px #fff; }
.companion.companion-camera::after { left: 7px; top: -5px; width: 18px; height: 9px; border-radius: 7px 7px 2px 2px; background: #fff; }
.companion.companion-balloon { background: var(--pink); }
.companion.companion-balloon::after { left: 20px; top: 39px; width: 2px; height: 24px; background: #fff; }

.section-intro { margin-bottom: 14px; }
.section-intro h3 { margin: 0; font-size: 1.5rem; }

.quest-list { display: grid; gap: 12px; }

.quest-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}

.quest-card.completed { opacity: .64; }
.quest-card.quest-pop {
  animation: quest-pop .7s ease both;
}

.quest-card.empty-board {
  text-align: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(54,245,106,.2), transparent 38%),
    rgba(255,255,255,.06);
}

.custom-quest-panel,
.coin-bank-panel,
.coin-shop-panel {
  margin-bottom: 16px;
}

.custom-quest-form {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) minmax(180px, 1.7fr) minmax(120px, .7fr) minmax(100px, .6fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}

.custom-quest-form input,
.custom-quest-form select {
  margin-top: 0;
}

.coin-action-grid,
.coin-pack-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 8px;
}

.coin-bank-panel {
  background:
    radial-gradient(circle at 12% 0%, rgba(255,232,61,.2), transparent 34%),
    radial-gradient(circle at 90% 12%, rgba(32,183,255,.18), transparent 32%),
    rgba(255,255,255,.06);
}

.quest-meta, .chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.quest-meta span, .chip-wrap span {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  color: #f9eaff;
  font-size: .82rem;
}

.zone-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.zone-grid button, .zone-grid a {
  min-height: 128px;
  padding: 18px;
  border-radius: 24px;
  text-align: left;
  background:
    radial-gradient(circle at 15% 0%, rgba(255,255,255,.16), transparent 40%),
    linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.15);
}

.world-view {
  padding-bottom: 32px;
}

.zone-grid strong, .zone-grid span { display: block; }
.zone-grid strong { font-size: 1.05rem; margin-bottom: 8px; }
.zone-grid span { color: var(--muted); line-height: 1.35; }

textarea, select, input {
  width: 100%;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.07);
  color: var(--text);
  border-radius: 17px;
  outline: none;
}

textarea {
  min-height: 170px;
  resize: vertical;
  padding: 15px;
}

.journal-grid {
  align-items: start;
}

.journal-prompt {
  margin: 12px 0 14px;
  padding: 16px;
  border-radius: 22px;
  color: #fff;
  font-weight: 900;
  line-height: 1.45;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(135deg, rgba(255,47,178,.18), rgba(32,183,255,.13));
  border: 1px solid rgba(255,255,255,.15);
}

.journal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.journal-history {
  display: grid;
  gap: 12px;
  max-height: 520px;
  overflow: auto;
  padding-right: 4px;
}

.journal-entry-card {
  padding: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
}

.journal-entry-card h4 {
  margin: 0 0 8px;
  color: #fff;
}

.journal-entry-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.journal-entry-card small {
  display: block;
  margin-top: 10px;
  color: rgba(255,255,255,.54);
}

select, input {
  margin-top: 7px;
  padding: 12px;
}

select option {
  color: #090616;
}

input::placeholder {
  color: rgba(255,255,255,.42);
}

.controls label {
  display: block;
  margin-bottom: 14px;
  color: var(--muted);
  font-weight: 800;
}

.becoming-line {
  margin: 4px 0 8px;
  color: #dff7ff;
  font-weight: 800;
}

.saved-note { min-height: 24px; }

.early-access-note {
  margin-top: 16px;
  padding: 13px 14px;
  border-radius: 18px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(255,47,178,.2), rgba(32,183,255,.13)),
    rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 0 20px rgba(255,47,178,.12);
}

.cosmic-form,
.feedback-form {
  margin-top: 16px;
  text-align: left;
}

.cosmic-output .muted,
.feedback-output .muted {
  color: var(--muted);
}

.cosmic-card,
.feedback-card {
  padding: 15px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 0 0, rgba(168,76,255,.2), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 0 22px rgba(168,76,255,.12);
}

.cosmic-card h4,
.feedback-card h4 {
  margin: 4px 0 12px;
  color: #fff;
}

.cosmic-code-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.cosmic-code-grid span {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 16px;
  color: #fff;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.14);
}

.cosmic-code-grid strong {
  color: var(--yellow);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.release-list {
  margin: 12px 0 18px;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.7;
}

.feedback-card p {
  color: var(--muted);
}

.feedback-card strong {
  color: #fff;
}

.coach-card, .love-core, .player-detail { text-align: center; }

.coach-grid {
  align-items: start;
}

.coach-form {
  margin-top: 18px;
  text-align: left;
}

.coach-form textarea {
  min-height: 128px;
}

.coach-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0;
}

.coach-form .secondary-button {
  width: 100%;
  margin-top: 10px;
}

.coach-output-panel {
  min-height: 100%;
}

.coach-plan .muted {
  color: var(--muted);
}

.coach-readout {
  padding: 14px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,47,178,.16), rgba(32,183,255,.1)),
    rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  color: #eaf9ff;
  font-weight: 750;
}

.coach-readout p {
  margin: 0 0 10px;
}

.coach-readout p:last-child {
  margin-bottom: 0;
}

.coach-quest-stack {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.coach-quest-card {
  padding: 14px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 0 0, rgba(255,232,61,.16), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 0 20px rgba(32,183,255,.08);
}

.coach-quest-card h4 {
  margin: 2px 0 8px;
  color: #fff;
}

.coach-quest-card p:not(.eyebrow) {
  margin-bottom: 12px;
  color: var(--muted);
}

.love-logo {
  display: block;
  width: min(440px, 92%);
  margin: 0 auto 18px;
  border-radius: 22px;
  filter: drop-shadow(0 0 22px rgba(255,47,178,.7));
}

.reward.unlocked { box-shadow: 0 0 24px rgba(54,245,106,.18); }
.reward.locked { filter: grayscale(.45); opacity: .75; }

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 10;
  max-width: 340px;
  padding: 13px 15px;
  border-radius: 18px;
  background: rgba(10,8,25,.95);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: var(--glow);
  transform: translateY(120px);
  opacity: 0;
  transition: .25s ease;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.daily-reward-modal {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5,3,12,.74);
  backdrop-filter: blur(12px);
}

.daily-reward-modal[hidden] {
  display: none;
}

.daily-reward-card {
  width: min(440px, 100%);
  padding: 24px;
  border-radius: 30px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,232,61,.28), transparent 34%),
    linear-gradient(145deg, rgba(31,16,66,.96), rgba(7,5,18,.98));
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 0 42px rgba(255,47,178,.34), 0 0 70px rgba(32,183,255,.18);
}

.daily-reward-card h2 {
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 8vw, 2.35rem);
}

.daily-reward-card p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.45;
}

.mystery-chest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 18px 0;
}

.mystery-chest {
  min-height: 132px;
  padding: 12px 8px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 24px;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 12%, rgba(255,232,61,.24), transparent 36%),
    linear-gradient(145deg, rgba(255,47,178,.2), rgba(32,183,255,.14)),
    rgba(255,255,255,.07);
  box-shadow: 0 0 22px rgba(255,47,178,.2);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  animation: chestBounce 1.6s ease-in-out infinite;
}

.mystery-chest:nth-child(2) { animation-delay: .14s; }
.mystery-chest:nth-child(3) { animation-delay: .28s; }

.mystery-chest:hover,
.mystery-chest:focus-visible {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 0 30px rgba(255,232,61,.34), 0 0 42px rgba(255,47,178,.22);
  outline: none;
}

.mystery-chest .chest-icon {
  display: block;
  font-size: 3.15rem;
  filter: drop-shadow(0 0 16px rgba(255,232,61,.55));
}

.mystery-chest strong,
.mystery-chest small {
  display: block;
}

.mystery-chest small {
  margin-top: 4px;
  color: var(--muted);
  font-weight: 800;
}

.mystery-chest.chosen {
  background:
    radial-gradient(circle at 50% 10%, rgba(255,232,61,.42), transparent 42%),
    linear-gradient(145deg, rgba(54,245,106,.26), rgba(255,232,61,.18)),
    rgba(255,255,255,.1);
  border-color: rgba(255,232,61,.72);
  box-shadow: 0 0 34px rgba(255,232,61,.46), 0 0 56px rgba(54,245,106,.24);
  animation: giftOpen .72s cubic-bezier(.19, 1, .22, 1) both;
}

.mystery-chest.unchosen {
  opacity: .55;
  filter: grayscale(.35);
}

.mystery-chest.opening .chest-icon {
  animation: giftIconPop .72s cubic-bezier(.19, 1, .22, 1) both;
}

.daily-reward-status {
  min-height: 26px;
  margin: 2px auto 14px;
  color: rgba(255,255,255,.86);
  font-weight: 900;
}

.daily-reward-status strong {
  color: var(--yellow);
  text-shadow: 0 0 12px rgba(255,232,61,.65);
}

.daily-reward-status span {
  color: var(--green);
  text-shadow: 0 0 12px rgba(54,245,106,.65);
}

@keyframes chestBounce {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-7px) rotate(1.5deg); }
}

@keyframes giftOpen {
  0% { transform: scale(1); }
  35% { transform: scale(1.12) rotate(-2deg); }
  68% { transform: scale(.97) rotate(1deg); }
  100% { transform: scale(1.04); }
}

@keyframes giftIconPop {
  0% { transform: scale(.85) rotate(0); filter: drop-shadow(0 0 10px rgba(255,232,61,.45)); }
  45% { transform: scale(1.45) rotate(-8deg); filter: drop-shadow(0 0 30px rgba(255,232,61,.9)); }
  100% { transform: scale(1.15) rotate(4deg); filter: drop-shadow(0 0 22px rgba(54,245,106,.8)); }
}

.celebration-layer {
  position: fixed;
  inset: 0;
  z-index: 220;
  pointer-events: none;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.celebration-layer:empty { display: none; }

.celebration-card {
  width: min(420px, calc(100vw - 34px));
  padding: 24px 20px 22px;
  border-radius: 30px;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.26), transparent 34%),
    linear-gradient(145deg, rgba(255,47,178,.92), rgba(32,183,255,.84) 54%, rgba(54,245,106,.82));
  border: 2px solid rgba(255,255,255,.55);
  box-shadow: 0 0 34px rgba(255,47,178,.78), 0 0 86px rgba(32,183,255,.42);
  transform: scale(.78) translateY(22px);
  animation: celebration-card 2.35s cubic-bezier(.19, 1, .22, 1) forwards;
}

.celebration-card.level-up {
  width: min(520px, 92vw);
  padding: clamp(24px, 6vw, 36px);
  background:
    radial-gradient(circle at 50% -8%, rgba(255,255,255,.48), transparent 32%),
    radial-gradient(circle at 12% 16%, rgba(255,232,61,.5), transparent 28%),
    radial-gradient(circle at 88% 22%, rgba(32,183,255,.4), transparent 30%),
    linear-gradient(135deg, #ff3148, #ffe83d 25%, #36f56a 48%, #20b7ff 70%, #a84cff 88%, #ff2fb2);
  box-shadow: 0 0 54px rgba(255,232,61,.84), 0 0 130px rgba(168,76,255,.62), 0 0 190px rgba(32,183,255,.24);
  animation-duration: 4.35s;
  position: relative;
  overflow: hidden;
}

.celebration-card.level-up::before,
.celebration-card.level-up::after {
  content: "";
  position: absolute;
  inset: -45%;
  background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.72), transparent, rgba(32,183,255,.7), transparent, rgba(255,47,178,.74), transparent);
  animation: level-spin 2.25s linear infinite;
  opacity: .56;
}

.celebration-card.level-up::after {
  inset: 8px;
  border-radius: 24px;
  background: rgba(6,2,13,.72);
  animation: none;
  opacity: 1;
}

.celebration-card.level-up > * {
  position: relative;
  z-index: 2;
}

.celebration-card .burst {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 12px rgba(255,255,255,.76));
  animation: burst-bounce 1.05s ease infinite alternate;
}

.level-sigil {
  width: 128px;
  height: 128px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #08030d;
  background:
    radial-gradient(circle at 50% 40%, #fff 0 18%, #ffe83d 19% 36%, #36f56a 37% 54%, #20b7ff 55% 72%, #a84cff 73%);
  border: 4px solid rgba(255,255,255,.92);
  box-shadow: 0 0 28px rgba(255,255,255,.86), 0 0 52px rgba(255,232,61,.7);
  animation: sigil-pulse 1.05s ease-in-out infinite alternate;
}

.level-sigil span,
.level-sigil strong {
  display: block;
  line-height: .82;
  font-weight: 1000;
  letter-spacing: -.08em;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

.level-sigil span { font-size: 1.15rem; }
.level-sigil strong { font-size: 2.8rem; }

.celebration-prize {
  width: min(320px, 100%);
  margin: 16px auto 0;
  padding: 14px 16px;
  border-radius: 22px;
  color: #07020c;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.72), transparent 32%),
    linear-gradient(135deg, #fff4a8, #ffe83d, #36f56a);
  border: 2px solid rgba(255,255,255,.86);
  box-shadow: 0 0 26px rgba(255,232,61,.72), inset 0 0 18px rgba(255,255,255,.42);
}

.celebration-prize span,
.celebration-prize strong,
.celebration-prize small {
  display: block;
}

.celebration-prize span {
  font-size: .72rem;
  font-weight: 1000;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.celebration-prize strong {
  margin-top: 2px;
  font-size: clamp(1.7rem, 7vw, 2.25rem);
  line-height: 1;
  font-weight: 1000;
}

.celebration-prize small {
  margin-top: 5px;
  font-weight: 900;
  opacity: .75;
}

.celebration-card h2 {
  margin: 0;
  font-size: clamp(2rem, 9vw, 3.5rem);
  line-height: .92;
  letter-spacing: -.05em;
  text-transform: uppercase;
  text-shadow: 0 4px 18px rgba(0,0,0,.36);
}

.celebration-card p {
  margin: 10px auto 0;
  max-width: 31ch;
  color: rgba(255,255,255,.94);
  font-weight: 900;
}

.celebration-xp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  padding: 9px 15px;
  border-radius: 999px;
  color: #08030d;
  background: #fff;
  font-weight: 1000;
  box-shadow: 0 0 24px rgba(255,255,255,.55);
}

.confetti-piece {
  position: fixed;
  top: -20px;
  left: var(--x);
  width: 10px;
  height: 18px;
  border-radius: 4px;
  background: var(--c);
  box-shadow: 0 0 16px var(--c);
  animation: confetti-fall var(--d) ease-in forwards;
}

.firework-burst {
  position: fixed;
  left: var(--fx);
  top: var(--fy);
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--c);
  box-shadow:
    0 0 0 0 var(--c),
    0 0 22px 8px color-mix(in srgb, var(--c), transparent 45%),
    28px 0 0 -2px var(--c),
    -28px 0 0 -2px var(--c),
    0 28px 0 -2px var(--c),
    0 -28px 0 -2px var(--c),
    20px 20px 0 -3px var(--c),
    -20px 20px 0 -3px var(--c),
    20px -20px 0 -3px var(--c),
    -20px -20px 0 -3px var(--c);
  animation: firework-pop 1.4s ease-out var(--delay) forwards;
  opacity: 0;
}

@keyframes quest-pop {
  0% { transform: scale(1); box-shadow: var(--glow); }
  38% { transform: scale(1.025); box-shadow: 0 0 36px rgba(54,245,106,.48), 0 0 70px rgba(255,232,61,.24); }
  100% { transform: scale(1); }
}

@keyframes celebration-card {
  0% { opacity: 0; transform: scale(.72) translateY(30px); }
  18% { opacity: 1; }
  72% { opacity: 1; transform: scale(1.04) translateY(0); }
  100% { opacity: 0; transform: scale(.98) translateY(-18px); }
}

@keyframes burst-bounce {
  from { transform: translateY(0) rotate(-4deg) scale(1); }
  to { transform: translateY(-7px) rotate(4deg) scale(1.08); }
}

@keyframes level-spin {
  to { transform: rotate(360deg); }
}

@keyframes sigil-pulse {
  from { transform: scale(.96) rotate(-3deg); }
  to { transform: scale(1.07) rotate(3deg); }
}

@keyframes confetti-fall {
  to {
    transform: translateY(112vh) rotate(740deg);
    opacity: 0;
  }
}

@keyframes firework-pop {
  0% { transform: scale(.2); opacity: 0; }
  18% { opacity: 1; }
  72% { transform: scale(1.65); opacity: .95; }
  100% { transform: scale(2.2); opacity: 0; }
}

button:disabled {
  cursor: default;
  opacity: .7;
  pointer-events: none;
  filter: grayscale(.18);
}

@media (max-width: 980px) {
  .app-screen { padding-bottom: 84px; }
  .app-screen.active,
  body:has(#app-screen:target) #app-screen,
  body:has(.view:target) #app-screen {
    display: block;
  }
  .sidebar { display: none; }
  .mobile-nav {
    position: fixed;
    z-index: 80;
    left: 8px;
    right: 8px;
    bottom: 9px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    padding: 10px;
    border-radius: 30px;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(255,255,255,.9);
    backdrop-filter: blur(18px);
    box-shadow: 0 12px 34px rgba(0,0,0,.34), 0 0 22px rgba(255,255,255,.34);
  }
  .mobile-nav .nav-button {
    margin: 0;
    padding: 13px 6px;
    text-align: center;
    color: #09040e;
    font-size: .82rem;
    font-weight: 1000;
    border-radius: 20px;
  }
  .mobile-nav .nav-button.active,
  .mobile-nav .nav-button:hover {
    color: #09040e;
    background: linear-gradient(135deg, rgba(255,232,61,.9), rgba(54,245,106,.72), rgba(32,183,255,.72), rgba(255,47,178,.68));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), 0 0 14px rgba(255,47,178,.22);
  }
  .content { padding: 14px; }
  .topbar { align-items: flex-start; }
  .custom-quest-form {
    grid-template-columns: 1fr 1fr;
  }
  .custom-quest-form input:first-child,
  .custom-quest-form input:nth-child(2),
  .custom-quest-form button {
    grid-column: 1 / -1;
  }
  .home-hero { grid-template-columns: 1fr; padding: 10px; }
  .home-hero img { max-height: 190px; }
  .home-hero .home-level-banner { max-height: 230px; }
  .zone-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .start-screen { padding: 12px; align-items: flex-start; }
  .hero-card { margin-top: 10px; border-radius: 26px; padding: 16px 10px; }
  .bx3-hero { max-height: 170px; width: 94%; }
  .app-hero-logo { max-height: 300px; width: 88%; }
  .hero-card h1 { font-size: clamp(1.58rem, 8.2vw, 2.8rem); letter-spacing: -0.08em; }
  .hero-line {
    max-width: 98vw;
    font-size: clamp(.66rem, 3.05vw, .9rem);
    letter-spacing: -0.07em;
  }
  .hero-line-two {
    max-width: 99vw;
    white-space: nowrap;
    font-size: clamp(.48rem, 2.5vw, .72rem);
    letter-spacing: -0.085em;
  }
  .start-screen .primary-button {
    max-width: 99vw;
    padding: 13px 15px;
    font-size: clamp(.58rem, 2.65vw, .78rem);
    letter-spacing: .01em;
  }
  .microcopy {
    max-width: 98vw;
    font-size: clamp(.56rem, 2.48vw, .76rem);
    letter-spacing: -0.055em;
  }
  .opening-world-banner {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: 14px;
    border-radius: 16px;
  }
  .early-login-card {
    padding: 13px;
    border-radius: 18px;
  }
  .login-row {
    grid-template-columns: 1fr 1fr;
  }
  .login-row input {
    grid-column: 1 / -1;
  }
  .topbar { flex-direction: column; }
  .level-pill { width: 100%; text-align: left; }
  .mystery-chest-grid { grid-template-columns: 1fr; }
  .mystery-chest { min-height: 96px; }
  .custom-quest-form { grid-template-columns: 1fr; }
  .custom-quest-form input:first-child,
  .custom-quest-form input:nth-child(2),
  .custom-quest-form button {
    grid-column: auto;
  }
  .grid.two, .stat-grid, .zone-grid { grid-template-columns: 1fr; }
  .world-view {
    min-height: calc(100svh - 120px);
    padding-bottom: 150px;
  }
  .world-view .section-intro {
    margin-bottom: 14px;
  }
  .world-view .zone-grid {
    gap: 13px;
  }
  .world-view .zone-grid a {
    min-height: 23svh;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 24px;
    touch-action: pan-y;
  }
  .world-view .zone-grid strong {
    font-size: 1.18rem;
  }
  .world-view .zone-grid span {
    font-size: .94rem;
    line-height: 1.38;
  }
  .stat-grid { gap: 9px; }
  .stat { display: block; padding: 16px; }
  .player-summary { align-items: flex-start; }
  .coach-controls { grid-template-columns: 1fr; }
  .quest-card { display: block; }
  .quest-card .primary-button { width: 100%; margin-top: 12px; }
  .panel, .quest-card { padding: 16px; border-radius: 22px; }
  .love-logo { width: 96%; }
}