/* ============================================================
   Theme Variables
   ============================================================ */

:root, [data-theme="dark"] {
  --bg-card: rgba(255,255,255,0.03);
  --bg-card-hover: rgba(255,255,255,0.05);
  --bg-card-solid: #141420;
  --bg-elevated: rgba(255,255,255,0.08);
  --bg-overlay: rgba(0,0,0,0.85);
  --bg-input: rgba(0,0,0,0.3);
  --text-primary: #fff;
  --text-secondary: rgba(255,255,255,0.6);
  --text-tertiary: rgba(255,255,255,0.4);
  --text-faint: rgba(255,255,255,0.15);
  --border-subtle: rgba(255,255,255,0.08);
  --border-medium: rgba(255,255,255,0.1);
  --border-strong: rgba(255,255,255,0.2);
  --bar-bg: rgba(255,255,255,0.08);
  --header-bg: rgba(0,0,0,0.95);
  --nav-active: rgba(255,255,255,0.95);
  --nav-inactive: rgba(255,255,255,0.5);
  --font-display: 'Cinzel', serif;
}


/* ============================================================
   Base Styles
   ============================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

button, input, select, textarea {
  border: none;
  outline: none;
  text-decoration: none;
  font-family: inherit;
}

html {
  background: #0a0a0a;
}

body {
  font-family: var(--font-body, 'Cinzel', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  background:
    radial-gradient(at 5% 10%, #0c0c0c 0%, transparent 50%),
    radial-gradient(at 35% 5%, #080808 0%, transparent 45%),
    radial-gradient(at 70% 8%, #0a0a0a 0%, transparent 50%),
    radial-gradient(at 95% 15%, #090909 0%, transparent 45%),
    radial-gradient(at 15% 40%, #070707 0%, transparent 50%),
    radial-gradient(at 50% 35%, #0b0b0b 0%, transparent 55%),
    radial-gradient(at 85% 45%, #060606 0%, transparent 45%),
    radial-gradient(at 10% 65%, #0a0a0a 0%, transparent 50%),
    radial-gradient(at 40% 60%, #080808 0%, transparent 45%),
    radial-gradient(at 75% 70%, #090909 0%, transparent 50%),
    radial-gradient(at 95% 75%, #070707 0%, transparent 45%),
    radial-gradient(at 20% 90%, #0b0b0b 0%, transparent 50%),
    radial-gradient(at 55% 85%, #060606 0%, transparent 45%),
    radial-gradient(at 80% 95%, #0a0a0a 0%, transparent 50%),
    radial-gradient(at 50% 50%, #080808 0%, transparent 60%),
    #030303;
  color: var(--text-primary);
  min-height: 100vh;
  overscroll-behavior: none;
}


.enchant-ui-btn {
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: opacity 0.2s;
  color: var(--text-primary);
}
.enchant-ui-btn:hover { opacity: 0.85; }
.enchant-ui-btn:active { opacity: 0.6; }
.enchant-ui-btn--primary { color: rgba(146, 254, 157, 0.9); }
.enchant-ui-btn--secondary { color: rgba(168, 139, 250, 0.9); }
.enchant-ui-btn--socket { color: #c9a0dc; }
.enchant-ui-btn--reroll { color: #ace1af; }
.enchant-ui-btn--danger { color: rgba(255, 100, 100, 0.9); }
.enchant-ui-btn--warning { color: rgba(255, 215, 0, 0.9); }
.enchant-ui-btn--info { color: rgba(91, 197, 255, 0.9); }
.enchant-tab.enchant-ui-btn { opacity: 0.4; background: none; }
.enchant-tab.enchant-ui-btn.active { opacity: 1; background: none; border-bottom: 2px solid currentColor; }

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

@keyframes loadingFill {
  0% { width: 0%; }
  100% { width: 100%; }
}

@keyframes loadingCrawl {
  0% { width: 0%; }
  30% { width: 40%; }
  60% { width: 65%; }
  100% { width: 80%; }
}

@keyframes tapPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@keyframes surveyGlow {
  0%   { text-shadow: 0 0 8px #ff6b9d, 0 0 16px #ff6b9d; color: #ff6b9d; }
  25%  { text-shadow: 0 0 8px #ffffff, 0 0 16px #ffffff; color: #ffffff; }
  50%  { text-shadow: 0 0 8px #38bdf8, 0 0 16px #38bdf8; color: #38bdf8; }
  75%  { text-shadow: 0 0 8px #ff4444, 0 0 16px #ff4444; color: #ff4444; }
  100% { text-shadow: 0 0 8px #ff6b9d, 0 0 16px #ff6b9d; color: #ff6b9d; }
}

@keyframes surveyArrows {
  0%, 100% { transform: translateX(0); opacity: 0.6; }
  50% { transform: translateX(3px); opacity: 1; }
}

@keyframes surveyArrowsLeft {
  0%, 100% { transform: translateX(0); opacity: 0.6; }
  50% { transform: translateX(-3px); opacity: 1; }
}

/* Portrait Borders */
.portrait-glow-green {
  box-shadow: inset 0 0 0 3px rgba(146, 254, 157, 1), 0 0 15px rgba(146, 254, 157, 0.8);
}
.portrait-glow-purple {
  box-shadow: inset 0 0 0 3px rgba(147, 51, 234, 1), 0 0 15px rgba(147, 51, 234, 0.8);
}
.portrait-glow-gold {
  box-shadow: inset 0 0 0 3px rgba(255, 215, 0, 1), 0 0 15px rgba(255, 215, 0, 0.8);
}
.portrait-glow-red {
  box-shadow: inset 0 0 0 3px rgba(255, 69, 58, 1), 0 0 15px rgba(255, 69, 58, 0.8);
}
.portrait-glow-cyan {
  box-shadow: inset 0 0 0 3px rgba(100, 210, 255, 1), 0 0 15px rgba(100, 210, 255, 0.8);
}
.portrait-glow-pink {
  box-shadow: inset 0 0 0 3px rgba(255, 105, 180, 1), 0 0 15px rgba(255, 105, 180, 0.8);
}
.portrait-glow-bronze {
  box-shadow: inset 0 0 0 3px rgba(205, 127, 50, 1), 0 0 15px rgba(205, 127, 50, 0.8);
}
.portrait-glow-silver {
  box-shadow: inset 0 0 0 3px rgba(192, 192, 192, 1), 0 0 15px rgba(192, 192, 192, 0.8);
}
.portrait-glow-orange {
  box-shadow: inset 0 0 0 3px rgba(255, 140, 0, 1), 0 0 15px rgba(255, 140, 0, 0.8);
}
.portrait-glow-teal {
  box-shadow: inset 0 0 0 3px rgba(0, 128, 128, 1), 0 0 15px rgba(0, 128, 128, 0.8);
}
.portrait-glow-indigo {
  box-shadow: inset 0 0 0 3px rgba(75, 0, 130, 1), 0 0 15px rgba(75, 0, 130, 0.8);
}
.portrait-glow-lime {
  box-shadow: inset 0 0 0 3px rgba(50, 205, 50, 1), 0 0 15px rgba(50, 205, 50, 0.8);
}
.portrait-glow-coral {
  box-shadow: inset 0 0 0 3px rgba(255, 127, 80, 1), 0 0 15px rgba(255, 127, 80, 0.8);
}
.portrait-glow-violet {
  box-shadow: inset 0 0 0 3px rgba(138, 43, 226, 1), 0 0 15px rgba(138, 43, 226, 0.8);
}
.portrait-glow-sky {
  box-shadow: inset 0 0 0 3px rgba(135, 206, 235, 1), 0 0 15px rgba(135, 206, 235, 0.8);
}
.portrait-glow-peach {
  box-shadow: inset 0 0 0 3px rgba(255, 218, 185, 1), 0 0 15px rgba(255, 218, 185, 0.8);
}
.portrait-glow-mint {
  box-shadow: inset 0 0 0 3px rgba(152, 255, 152, 1), 0 0 15px rgba(152, 255, 152, 0.8);
}
.portrait-glow-steel {
  box-shadow: inset 0 0 0 3px rgba(176, 196, 222, 1), 0 0 15px rgba(176, 196, 222, 0.8);
}
.portrait-glow-wine {
  box-shadow: inset 0 0 0 3px rgba(128, 0, 32, 1), 0 0 15px rgba(128, 0, 32, 0.8);
}
.portrait-glow-honey {
  box-shadow: inset 0 0 0 3px rgba(235, 177, 52, 1), 0 0 15px rgba(235, 177, 52, 0.8);
}
.portrait-glow-lavender {
  box-shadow: inset 0 0 0 3px rgba(180, 150, 255, 1), 0 0 15px rgba(180, 150, 255, 0.8);
}
.portrait-glow-charcoal {
  box-shadow: inset 0 0 0 3px rgba(80, 80, 80, 1), 0 0 15px rgba(80, 80, 80, 0.8);
}
.portrait-glow-seafoam {
  box-shadow: inset 0 0 0 3px rgba(159, 226, 191, 1), 0 0 15px rgba(159, 226, 191, 0.8);
}
.portrait-glow-rust {
  box-shadow: inset 0 0 0 3px rgba(183, 65, 14, 1), 0 0 15px rgba(183, 65, 14, 0.8);
}
.portrait-glow-ivory {
  box-shadow: inset 0 0 0 3px rgba(255, 255, 240, 1), 0 0 15px rgba(255, 255, 240, 0.8);
}
.portrait-glow-plum {
  box-shadow: inset 0 0 0 3px rgba(142, 69, 133, 1), 0 0 15px rgba(142, 69, 133, 0.8);
}
.portrait-glow-sage {
  box-shadow: inset 0 0 0 3px rgba(138, 154, 91, 1), 0 0 15px rgba(138, 154, 91, 0.8);
}
.portrait-glow-rose {
  box-shadow: inset 0 0 0 3px rgba(183, 110, 121, 1), 0 0 15px rgba(183, 110, 121, 0.8);
}
.portrait-glow-electric {
  box-shadow: inset 0 0 0 3px rgba(0, 191, 255, 1), 0 0 15px rgba(0, 191, 255, 0.8);
}
.portrait-glow-tan {
  box-shadow: inset 0 0 0 3px rgba(210, 180, 140, 1), 0 0 15px rgba(210, 180, 140, 0.8);
}
.portrait-glow-cherry {
  box-shadow: inset 0 0 0 3px rgba(222, 49, 99, 1), 0 0 15px rgba(222, 49, 99, 0.8);
}
.portrait-glow-moss {
  box-shadow: inset 0 0 0 3px rgba(75, 100, 50, 1), 0 0 15px rgba(75, 100, 50, 0.8);
}
.portrait-glow-snow {
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 1), 0 0 15px rgba(255, 255, 255, 0.8);
}
.portrait-glow-cobalt {
  box-shadow: inset 0 0 0 3px rgba(0, 71, 171, 1), 0 0 15px rgba(0, 71, 171, 0.8);
}
.portrait-glow-marigold {
  box-shadow: inset 0 0 0 3px rgba(234, 162, 33, 1), 0 0 15px rgba(234, 162, 33, 0.8);
}
.portrait-glow-ash {
  box-shadow: inset 0 0 0 3px rgba(140, 130, 120, 1), 0 0 15px rgba(140, 130, 120, 0.8);
}
.portrait-glow-fern {
  box-shadow: inset 0 0 0 3px rgba(79, 121, 66, 1), 0 0 15px rgba(79, 121, 66, 0.8);
}
.portrait-glow-blush {
  box-shadow: inset 0 0 0 3px rgba(222, 165, 164, 1), 0 0 15px rgba(222, 165, 164, 0.8);
}
.portrait-glow-copper {
  box-shadow: inset 0 0 0 3px rgba(184, 115, 51, 1), 0 0 15px rgba(184, 115, 51, 0.8);
}
.portrait-glow-slate {
  box-shadow: inset 0 0 0 3px rgba(112, 128, 144, 1), 0 0 15px rgba(112, 128, 144, 0.8);
}
.portrait-glow-lilac {
  box-shadow: inset 0 0 0 3px rgba(200, 162, 200, 1), 0 0 15px rgba(200, 162, 200, 0.8);
}
.portrait-glow-ember-glow {
  box-shadow: inset 0 0 0 3px rgba(207, 106, 50, 1), 0 0 15px rgba(207, 106, 50, 0.8);
}
.portrait-glow-ocean-blue {
  box-shadow: inset 0 0 0 3px rgba(0, 48, 73, 1), 0 0 15px rgba(0, 48, 73, 0.8);
}
.portrait-glow-sunset {
  border: 3px solid transparent;
  background:
    linear-gradient(#030303, #030303) padding-box,
    linear-gradient(90deg, #FF4500, #FF6347, #FF1493, #FF4500, #FF4500) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: portraitGlowTricolorMove 3s linear infinite;
}
.portrait-glow-ocean {
  border: 3px solid transparent;
  background:
    linear-gradient(#030303, #030303) padding-box,
    linear-gradient(90deg, #0077B6, #00B4D8, #90E0EF, #0077B6, #0077B6) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: portraitGlowTricolorMove 3s linear infinite;
}
.portrait-glow-fire {
  border: 3px solid transparent;
  background:
    linear-gradient(#030303, #030303) padding-box,
    linear-gradient(90deg, #FF0000, #FF4500, #FFD700, #FF0000, #FF0000) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: portraitGlowTricolorMove 3s linear infinite;
}
.portrait-glow-ice {
  border: 3px solid transparent;
  background:
    linear-gradient(#030303, #030303) padding-box,
    linear-gradient(90deg, #FFFFFF, #B0E0E6, #4169E1, #FFFFFF, #FFFFFF) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: portraitGlowTricolorMove 3s linear infinite;
}
.portrait-glow-shadow {
  border: 3px solid transparent;
  background:
    linear-gradient(#030303, #030303) padding-box,
    linear-gradient(90deg, #9B59B6, #2C003E, #9B59B6, #9B59B6) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: portraitGlowTricolorMove 3s linear infinite;
}
.portrait-glow-blood {
  border: 3px solid transparent;
  background:
    linear-gradient(#030303, #030303) padding-box,
    linear-gradient(90deg, #8B0000, #DC143C, #8B0000, #8B0000) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: portraitGlowTricolorMove 3s linear infinite;
}
.portrait-glow-aurora {
  border: 3px solid transparent;
  background:
    linear-gradient(#030303, #030303) padding-box,
    linear-gradient(90deg, #00FF7F, #7B68EE, #00FF7F, #00FF7F) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: portraitGlowTricolorMove 3s linear infinite;
}
.portrait-glow-sandstorm {
  border: 3px solid transparent;
  background:
    linear-gradient(#030303, #030303) padding-box,
    linear-gradient(90deg, #C2B280, #D2691E, #C2B280, #C2B280) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: portraitGlowTricolorMove 3s linear infinite;
}
.portrait-glow-toxic {
  border: 3px solid transparent;
  background:
    linear-gradient(#030303, #030303) padding-box,
    linear-gradient(90deg, #39FF14, #ADFF2F, #39FF14, #39FF14) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: portraitGlowTricolorMove 3s linear infinite;
}
.portrait-glow-royal {
  border: 3px solid transparent;
  background:
    linear-gradient(#030303, #030303) padding-box,
    linear-gradient(90deg, #FFD700, #4B0082, #FFD700, #FFD700) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: portraitGlowTricolorMove 3s linear infinite;
}
.portrait-glow-dusk {
  border: 3px solid transparent;
  background:
    linear-gradient(#030303, #030303) padding-box,
    linear-gradient(90deg, #FF6B35, #9B59B6, #FF6B35, #FF6B35) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: portraitGlowTricolorMove 3s linear infinite;
}
.portrait-glow-nebula {
  border: 3px solid transparent;
  background:
    linear-gradient(#030303, #030303) padding-box,
    linear-gradient(90deg, #FF69B4, #4169E1, #FF69B4, #FF69B4) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: portraitGlowTricolorMove 3s linear infinite;
}
.portrait-glow-forest {
  border: 3px solid transparent;
  background:
    linear-gradient(#030303, #030303) padding-box,
    linear-gradient(90deg, #013220, #228B22, #013220, #013220) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: portraitGlowTricolorMove 3s linear infinite;
}
.portrait-glow-lava {
  border: 3px solid transparent;
  background:
    linear-gradient(#030303, #030303) padding-box,
    linear-gradient(90deg, #1A0000, #FF4500, #1A0000, #1A0000) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: portraitGlowTricolorMove 3s linear infinite;
}
.portrait-glow-arctic {
  border: 3px solid transparent;
  background:
    linear-gradient(#030303, #030303) padding-box,
    linear-gradient(90deg, #E0FFFF, #00CED1, #E0FFFF, #E0FFFF) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: portraitGlowTricolorMove 3s linear infinite;
}
.portrait-glow-ember-fade {
  border: 3px solid transparent;
  background:
    linear-gradient(#030303, #030303) padding-box,
    linear-gradient(90deg, #8B0000, #FF4500, #2C0000, #8B0000) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: portraitGlowTricolorMove 3s linear infinite;
}
.portrait-glow-spring {
  border: 3px solid transparent;
  background:
    linear-gradient(#030303, #030303) padding-box,
    linear-gradient(90deg, #FF69B4, #98FB98, #FF69B4, #FF69B4) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: portraitGlowTricolorMove 3s linear infinite;
}
.portrait-glow-storm {
  border: 3px solid transparent;
  background:
    linear-gradient(#030303, #030303) padding-box,
    linear-gradient(90deg, #FFD700, #2F4F4F, #FFD700, #FFD700) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: portraitGlowTricolorMove 3s linear infinite;
}
.portrait-glow-candy {
  border: 3px solid transparent;
  background:
    linear-gradient(#030303, #030303) padding-box,
    linear-gradient(90deg, #FF69B4, #87CEEB, #FF69B4, #FF69B4) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: portraitGlowTricolorMove 3s linear infinite;
}
.portrait-glow-midnight-sun {
  border: 3px solid transparent;
  background:
    linear-gradient(#030303, #030303) padding-box,
    linear-gradient(90deg, #191970, #FFD700, #191970, #191970) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: portraitGlowTricolorMove 3s linear infinite;
}
.portrait-glow-tricolor {
  border: 3px solid transparent;
  background:
    linear-gradient(#030303, #030303) padding-box,
    linear-gradient(90deg, #8AC6D1, #FF4545, #667899, #8AC6D1, #8AC6D1) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: portraitGlowTricolorMove 3s linear infinite;
}
.portrait-glow-nature {
  border: 3px solid transparent;
  background:
    linear-gradient(#030303, #030303) padding-box,
    linear-gradient(90deg, #228B22, #9ACD32, #006400, #228B22, #228B22) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: portraitGlowNatureMove 3s linear infinite;
}
.portrait-glow-neon {
  border: 3px solid transparent;
  background:
    linear-gradient(#030303, #030303) padding-box,
    linear-gradient(90deg, #FF1493, #00BFFF, #39FF14, #FF1493, #FF1493) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: portraitGlowNeonMove 3s linear infinite;
}
.portrait-glow-referral {
  border: 3px solid transparent;
  background:
    linear-gradient(#030303, #030303) padding-box,
    linear-gradient(90deg, #FFFFFF, #FFD700, #FFF8DC, #FFD700, #FFFFFF) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: portraitGlowReferralMove 2.5s linear infinite;
}

@keyframes portraitGlowReferralMove {
  0% { background-position: 0% 0%, 0% 0%; }
  100% { background-position: 0% 0%, 300% 0%; }
}

@keyframes portraitGlowTricolorMove {
  0% { background-position: 0% 0%, 0% 0%; }
  100% { background-position: 0% 0%, 300% 0%; }
}
@keyframes portraitGlowNatureMove {
  0% { background-position: 0% 0%, 0% 0%; }
  100% { background-position: 0% 0%, 300% 0%; }
}
@keyframes portraitGlowNeonMove {
  0% { background-position: 0% 0%, 0% 0%; }
  100% { background-position: 0% 0%, 300% 0%; }
}

/* Changelog */
.changelog-content h1 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 12px;
}
.changelog-content h2 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 20px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle);
}
.changelog-content h3 {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 12px 0 4px;
}
.changelog-content strong {
  color: var(--text-primary);
}
.changelog-content ul {
  padding-left: 18px;
  margin: 4px 0 8px;
}
.changelog-content li {
  margin-bottom: 3px;
  color: var(--text-secondary);
}
.changelog-content p {
  margin: 4px 0;
}
.changelog-content code {
  background: var(--bg-elevated);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.75rem;
}