/* Fantasy Theme Variables */
:root {
  --primary-gold: #d4af37;
  --primary-gold-light: #f4d03f;
  --primary-gold-dark: #b8860b;
  --secondary-blue: #1e3a8a;
  --accent-purple: #8b5cf6;
  --accent-emerald: #78C841;
  --accent-red: #ef4444;
  --background-dark: #0e1625;
  --background-mid: #192841;
  --background-light: #203354;
  --surface-glass: rgba(255, 255, 255, 0.1);
  --surface-glass-hover: rgba(255, 255, 255, 0.15);
  --text-light: #f8fafc;
  --text-gold: #fbbf24;
  --text-muted: rgba(248, 250, 252, 0.7);
  --border-gold: #eab308;
  --shadow-premium: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
  --shadow-glow: 0 0 30px rgba(212, 175, 55, 0.3);
  --gradient-gold: linear-gradient(135deg, rgba(225, 200, 110, 1) 0%, rgba(200, 160, 55, 1) 50%, rgba(145, 100, 20, 1) 100%);
  --gradient-surface: linear-gradient(135deg, #0e1625 35%, #192841 75%, #203354 100%);
  --glass-border: 1px solid rgba(255, 255, 255, 0.2);
}

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

body {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background-color: #0e1625;
  background-image: url('./attached_assets/background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text-light);
  min-height: 100vh;
  overflow-x: hidden;
  position: static;
  /* Remove isolation that might interfere with fixed positioning */
  margin: 0;
  padding: 0;
}

.hidden {
  display: none !important;
}

/* Lazy Loading Indicator */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(14, 22, 37, 0.8);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.loading-content {
  text-align: center;
  color: var(--text-light);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--surface-glass);
  border-top: 3px solid var(--primary-gold);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

.loading-text {
  font-size: 1.1rem;
  color: var(--text-gold);
  font-weight: 500;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Glassmorphism utility classes */
.glass {
  background: var(--surface-glass);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: var(--glass-border);
}

.glass-hover:hover {
  background: var(--surface-glass-hover);
}

/* Premium button styles */
.btn-premium {
  background: var(--gradient-gold);
  color: var(--background-dark);
  border: none;
  padding: 0.875rem 2rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-premium);
  position: relative;
  overflow: hidden;
}

.btn-premium:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-glow), var(--shadow-premium);
}

.btn-premium:active {
  transform: translateY(-1px) scale(0.98);
}

/* Splash Screen */
.splash-screen {
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.splash-image {
  max-width: 100%;
  position: absolute;
  bottom: 0;
}

.logo {
  position: fixed;
  bottom: 25vw;
  left: 50%;
  transform: translateX(-50%);
  max-width: 60%;
  filter: drop-shadow(0 10px 30px rgba(212, 175, 55, 0.4));
  animation: logoFloat 6s ease-in-out infinite;
}

@keyframes logoFloat {

  0%,
  100% {
    transform: translateX(-50%) translateY(0px);
  }

  50% {
    transform: translateX(-50%) translateY(-10px);
  }
}

.gem {
  position: fixed;
  bottom: 130vw;
  right: 7vw;
  max-width: 20%;
  filter: drop-shadow(0 0 1rem rgb(0, 128, 192));
}

.gem:hover {
  -webkit-animation: rotate 1s;
  -moz-animation: rotate 1s;
  animation: rotate .9s;
  filter: drop-shadow(0 0 1rem rgb(128, 255, 255));
}

@-moz-keyframes rotate {
  100% {
    -moz-transform: rotateY(360deg);
  }
}

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotateY(360deg);
  }
}

@keyframes rotate {
  100% {
    -webkit-transform: rotateY(2160deg);
    transform: rotateY(2160deg);
  }
}

#reset-wizard {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  border: var(--glass-border);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

#reset-wizard:hover {
  transform: translateY(-3px) scale(1.1);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.4),
    var(--shadow-glow);
}

#play-button {
  position: absolute;
  bottom: 10vw;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gradient-gold);
  color: var(--background-dark);
  padding: .75rem 3rem;
  border: none;
  border-radius: 25px;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 0 0 0 rgba(212, 175, 55, 0.7);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow:
      0 20px 40px rgba(0, 0, 0, 0.3),
      0 0 0 0 rgba(212, 175, 55, 0.7);
  }

  50% {
    box-shadow:
      0 20px 40px rgba(0, 0, 0, 0.3),
      0 0 0 20px rgba(212, 175, 55, 0);
  }

  100% {
    box-shadow:
      0 20px 40px rgba(0, 0, 0, 0.3),
      0 0 0 20px rgba(212, 175, 55, 0);
  }
}

#play-button:hover {
  transform: translateX(-50%) translateY(-5px) scale(1.05);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.4),
    var(--shadow-glow);
}

/* Wizard - Premium Redesign */
#wizard {
  position: fixed;
  inset: 0;
  background: var(--gradient-surface);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 2rem;
}

.wizard-progress {
  display: flex;
  margin-bottom: 3rem;
  gap: 1rem;
}

.wizard-progress .step {
  width: 16px;
  height: 16px;
  border: 2px solid var(--text-gold);
  border-radius: 50%;
  background: transparent;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.wizard-progress .step.active {
  background: var(--primary-gold);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
  transform: scale(1.2);
}

.wizard-progress .step.active::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid var(--primary-gold);
  border-radius: 50%;
  animation: stepRipple 2s ease-out infinite;
}

@keyframes stepRipple {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

.wizard-step {
  display: none;
  width: 100%;
  max-width: 500px;
  color: var(--text-light);
  text-align: center;
  animation: stepFadeIn 0.6s ease-out;
}

.wizard-step.active {
  display: block;
}

@keyframes stepFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wizard-step h2 {
  font-family: "Cinzel Decorative", serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--text-gold);
  margin-bottom: 2rem;
  text-shadow: 0 2px 10px rgba(212, 175, 55, 0.3);
}

#name-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

#name-input {
  width: 100%;
  max-width: 300px;
  padding: 1rem;
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  border: var(--glass-border);
  border-radius: 12px;
  color: var(--text-light);
  font-size: 1.1rem;
  text-align: center;
  transition: all 0.3s ease;
}

#name-input:focus {
  outline: none;
  border-color: var(--primary-gold);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

#name-input::placeholder {
  color: var(--text-muted);
}

#name-generate {
  padding: 0.75rem 1.5rem;
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  border: var(--glass-border);
  border-radius: 8px;
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.3s ease;
}

#name-generate:hover {
  background: var(--surface-glass-hover);
  color: var(--primary-gold);
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
  max-width: 600px;
}

.option-card {
  background: var(--surface-glass);
  backdrop-filter: blur(15px);
  border: var(--glass-border);
  border-radius: 16px;
  padding: 1.25rem;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.option-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
  transition: left 0.6s ease;
}

.option-card:hover::before {
  left: 100%;
}

.option-card:hover {
  transform: translateY(-8px) scale(1.02);
  background: var(--surface-glass-hover);
  box-shadow: var(--shadow-glow);
}

.option-card.selected {
  background: rgba(212, 175, 55, 0.2);
  border-color: var(--primary-gold);
  box-shadow: var(--shadow-glow);
  transform: translateY(-4px);
}

.wizard-nav {
  margin-top: 3rem;
  display: flex;
  gap: 1rem;
}

.wizard-nav button {
  padding: 0.875rem 2rem;
  border: none;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

#wiz-back {
  background: var(--surface-glass);
  color: var(--text-light);
  border: var(--glass-border);
}

#wiz-back:hover:not(:disabled) {
  background: var(--surface-glass-hover);
}

#wiz-back:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#wiz-next {
  background: var(--gradient-gold);
  color: var(--background-dark);
  box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3);
}

#wiz-next:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}

/* Game Interface */
.game-interface {
  scrollbar-width: none;
  max-width: 100vw;
  margin: 0;
  padding: 0;
  scrollbar-width: none;
}

.game-interface::-webkit-scrollbar {
  display: none;
  /* optional: hides scrollbars in Chrome/Safari */
}

.header {
  width: 100vw;
  position: relative;
}

.header-bg {
  position: relative;
  display: block;
  width: 100vw;
  height: 60vh;
  min-height: 400px;
  max-height: 600px;
  z-index: 1;
  object-fit: cover;
  top: 0;
  border-bottom: 3px solid var(--border-gold);
  box-shadow: var(--shadow-premium);
}

/* Move header down on tasks and wellness pages */
body:has(#tasks-page.active) .header .header-bg,
body:has(#wellness-page.active) .header .header-bg {
  padding-top: 85px;
}

.character-avatar img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  bottom: 2vw;
  height: auto;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(-15px 10px 3px rgba(0, 0, 0, 0.3));
}

#header-avatar-container[data-race="dragonborn"] img {
  max-height: 90vw;
}

#header-avatar-container[data-race="half-orc"] img {
  max-height: 86vw;
}

#header-avatar-container[data-race="tiefling"] img {
  max-height: 81vw;
}

#header-avatar-container[data-race="half-elf"] img {
  max-height: 80vw;
}

#header-avatar-container[data-race="human"] img {
  max-height: 79vw;
}

#header-avatar-container[data-race="elf"] img {
  max-height: 76vw;
}

#header-avatar-container[data-race="dwarf"] img {
  max-height: 62vw;
}

#header-avatar-container[data-race="gnome"] img {
  max-height: 54vw;
}

#header-avatar-container[data-race="halfling"] img {
  max-height: 52vw;
}

/* Main Content Section */
.main-content-section {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
}

.left-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stats-container {
  display: flex;
  position: absolute;
  top: 0px;
  z-index: 11;
  flex-direction: column;
  align-items: center;
  padding: 1.75rem 1.5rem 1.25rem;
  width: 100%;
  height: auto;
  background: var(--gradient-surface);
  backdrop-filter: blur(2px);
  box-shadow: var(--shadow-premium);
}

/* Character Info Section */
.character-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: flex-start;
  max-width: 100%;
  width: 100%;
}

.level-column {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  font-style: italic;
}

.left-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.level-label {
  text-transform: uppercase;
  font-size: .8rem;
  font-weight: bold;
  color: #b8860b;
}

.level-number {
  font-size: 2.5rem;
  color: #b8860b;
  line-height: .75;
}

.name-column .character-name {
  font-family: "Cinzel Decorative", serif;
  font-size: 1.25rem;
  font-weight: bold;
  margin-top: -0.75rem;
}

.details-column .character-details {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.95rem;
  margin-top: -0.75rem;
}

/* Currency Section */
.currency-column {
  flex-shrink: 0;
  width: auto;
  height: 100%;
}

.currency-column .currency-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem .5rem;
  text-align: right;
}

.currency-item {
  font-size: 1rem;
  font-family: "Roboto", sans-serif;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
}

.currency-amount {
  color: var(--text-gold);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1;
}

.currency-type {
  font-weight: 400;
  line-height: 1;
}

/* XP Section */
.xp-section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  font-style: italic;
  position: relative;
}

.xp-label {
  font-size: 0.8rem;
  font-weight: 500;
}

.xp-bar-container {
  flex: 1;
  position: relative;
}

.xp-bar {
  height: 12px;
  background: rgb(234, 179, 8, 0.3);
  border-radius: 6px;
  overflow: hidden;
}

.xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981 0%, #096245 100%);
  border-radius: 5px;
  width: 0%;
}

.xp-text {
  position: absolute;
  bottom: -14px;
  right: 0;
  color: var(--text-gold);
  font-weight: 600;
  filter: drop-shadow(0 1px 2px rgb(0, 0, 0, .9));
  ;
}

#user-xp {
  font-weight: 600;
  font-size: 1.5rem;
  color: #059669;
}

/* Streak Section */
.streak-section {
  text-align: center;
  font-family: "Cinzel Decorative", serif;
}

.streak-label {
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
}

.streak-number {
  color: #22c55e;
  font-weight: 700;
  font-size: 1.4rem;
}

.main-content {
  padding-bottom: 100px;
  min-height: calc(100vh - 200px);
}

.page {
  display: none;
}

.page.active {
  display: block;
  animation: pageSlideIn 0.5s ease-out;
}

@keyframes pageSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.task-section {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  padding: 1rem 1.5rem;
}

.task-section h2,
.card-section h2,
.dice-section h2 {
  font-family: "Cinzel Decorative", serif;
  color: var(--text-gold);
  padding: 1rem;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 600;
  text-shadow: 0 2px 10px rgba(212, 175, 55, 0.3);
}

/* Hamburger Menu Styles */
.hamburger-menu {
  position: absolute;
  top: 0;
  left: 1rem;
  transform: scale(.8);
  z-index: 200;
}

/* Button becomes a simple wrapper for the SVG */
.hamburger-btn {
  background: rgba(212, 175, 55, 0.0);
  border: none;
  padding: .35rem 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease;
}

.hamburger-btn:hover { transform: scale(1.05); }

.hamburger-svg { width: 34px; height: auto; display: block; }

.hamburger-svg .line {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .4s ease, opacity .25s ease;
}

.hamburger-btn.active .line.top {
  transform: translateY(10px) rotate(45deg) scale(.9);
}

.hamburger-btn.active .line.middle {
  opacity: 0;
}

.hamburger-btn.active .line.bottom {
  transform: translateY(-10px) rotate(-45deg) scale(.9);
}

.hamburger-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--surface-glass);
  backdrop-filter: blur(5px);
  border: var(--glass-border);
  border-radius: 12px;
  min-width: 225px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  text-transform: uppercase;
  font-size:   1.1rem;
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  margin-top: 0.75rem;
  z-index: 201;
}

.hamburger-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s, 0s, 0s;  /* show instantly */
}

.hamburger-dropdown a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  color: white;
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  transition: background .2s ease, color .2s ease;
}

.hamburger-dropdown a:last-child { border-bottom: none; border-radius: 0 0 10px 10px; }

.hamburger-dropdown a:first-child { border-radius: 10px 10px 0 0; }

.hamburger-dropdown a:hover {
  background: var(--surface-glass-hover);
backdrop-filter: blur(5px);
}

.hamburger-dropdown .menu-icon img {
  width: 1.75rem;
  height: auto;
}

/* Hide hamburger menu on non-base pages */
.page:not(#tasks-page).active~* .hamburger-menu {
  display: none;
}

/* Task Management */
.task-input-container {
  position: relative;
  display: block;
  margin-bottom: 1rem;
}

#task-input {
  margin-left: 4rem;
  padding: .5rem;
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 1rem;
}

task-input {
  width: 100%;
  padding: 1rem;
  background: var(--surface-glass);
  backdrop-filter: blur(5px);
  border: var(--glass-border);
  border-radius: 12px;
  color: var(--text-light);
  font-size: 1rem;
}

#task-input:focus {
  outline: none;
  border-color: var(--primary-gold);
}

#task-input::placeholder {
  color: var(--text-muted);
}

#add-task-btn {
  position: absolute;
  right: 1.5rem;
  color: var(--background-mid);
  background: var(--gradient-gold);
  border: none;
  padding: 1px 5px 2px;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 900;
  font-size: 1.25rem;
  cursor: pointer;
}

#add-task-btn:hover {
  transform: scale(1.05);
}

.task-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.task-item {
  background: var(--surface-glass);
  backdrop-filter: blur(2px);
  border: var(--glass-border);
  border-radius: 12px;
  padding: .75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.task-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
  transition: left 0.8s ease;
}

.task-item:hover::before {
  left: 100%;
}

.task-item:hover {
  background: var(--surface-glass-hover);
  transform: translateX(8px);
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.2);
}

.task-text {
  flex: 1;
  margin-right: 1rem;
  font-weight: 500;
}

.complete-btn {
  background: linear-gradient(135deg, var(--accent-emerald), #059669);
  color: white;
  border: none;
  padding: 0.35rem .9rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 900;
  font-size: 1.5rem;
  box-shadow: 0 4px #047857;
}

.complete-btn:hover {
  background: linear-gradient(135deg, #059669, #047857);
  transform: translateY(-2px) scale(1.05);
}

/* Avatar Customization */
.avatar-section {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  padding: 1rem 1.5rem;
}

.avatar-container {
  display: none;
}

.layered-item {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
}

.base-avatar {
  height: 100%;
  z-index: 2;
}

.armor-layer {
  z-index: 3;
}

.boots-layer {
  z-index: 3;
}

.weapon-layer {
  z-index: 4;
}

.cape-layer,
#avatar-cape {
  z-index: 1 !important;
}

/* Equipment Tabs */
.equipment-tabs {
  margin-top: 1.5rem;
}

.tab-buttons {
  display: flex;
  border-bottom: 2px solid var(--primary-gold);
  overflow-x: auto;
  scrollbar-width: none;
}

.tab-buttons::-webkit-scrollbar {
  display: none;
}

.equipment-tab-button {
  flex: 1;
  min-width: 80px;
  padding: 0.75rem 0.5rem;
  background: rgba(212, 175, 55, 0.1);
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-light);
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 12px 12px 0 0;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.equipment-tab-button:last-child {
  border-right: none;
}

.equipment-tab-button.active {
  background: var(--primary-gold);
  color: var(--background-dark);
  box-shadow: 0 -2px 10px rgba(212, 175, 55, 0.3);
}

.equipment-tab-button:hover:not(.active) {
  background: rgba(212, 175, 55, 0.2);
}

.equipment-tab-content {
  background: var(--surface-glass);
  backdrop-filter: blur(2px);
  border: var(--glass-border);
  border-radius: 0 0 16px 16px;
  padding: 1.5rem;
  min-height: 200px;
}

.equipment-tab {
  display: none;
}

.equipment-tab.active {
  display: block;
}

.equipment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 1rem;
}

.equipment-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  background: rgba(212, 175, 55, 0.1);
  border: 2px solid rgba(212, 175, 55, 0.3);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.equipment-item:hover {
  background: rgba(212, 175, 55, 0.2);
  border-color: var(--primary-gold);
  transform: translateY(-2px);
}

.equipment-item.selected {
  background: rgba(212, 175, 55, 0.3);
  border-color: var(--primary-gold);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}

.equipment-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  border-radius: 8px;
  overflow: hidden;
}

.equipment-icon img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
}

.equipment-icon.empty {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

.equipment-icon.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  border-radius: 8px;
  position: relative;
}

.equipment-icon.placeholder[data-color] {
  background-color: var(--color, #666);
}

.equipment-icon.placeholder[data-color="#8b5a3c"] {
  background-color: #8b5a3c;
  color: white;
}

.equipment-icon.placeholder[data-color="#d4af37"] {
  background-color: #d4af37;
  color: black;
}

.equipment-icon.placeholder[data-color="#8b4513"] {
  background-color: #8b4513;
  color: white;
}

.equipment-icon.placeholder[data-color="#8b5cf6"] {
  background-color: #8b5cf6;
  color: white;
}

.equipment-icon.placeholder[data-color="#c0c0c0"] {
  background-color: #c0c0c0;
  color: black;
}

.equipment-icon.placeholder[data-color="#4b0082"] {
  background-color: #4b0082;
  color: white;
}

.equipment-icon.placeholder[data-color="#7c3aed"] {
  background-color: #7c3aed;
  color: white;
}

.equipment-icon.placeholder[data-color="#059669"] {
  background-color: #059669;
  color: white;
}

.placeholder-text {
  font-size: 1.8rem;
  line-height: 1;
}

.equipment-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Header avatar armor overlay */
#header-avatar-container #avatar-armor {
  position: absolute;
  top: 50%;
  z-index: 10;
}

/* Race-specific scaling for header armor - Matching avatar customization */
#header-avatar-container[data-race="dragonborn"] #avatar-armor {
  transform: translate(-50%, -50%) scale(0.44, 0.45) translateY(24%);
}

#header-avatar-container[data-race="half-orc"] #avatar-armor {
  transform: translate(-50%, -50%) scale(0.41, 0.47) translateY(-0.5%);
}

#header-avatar-container[data-race="tiefling"] #avatar-armor {
  transform: translate(-50%, -50%) scale(0.50, 0.54) translateY(-1%);
}

#header-avatar-container[data-race="half-elf"] #avatar-armor {
  transform: translate(-50%, -50%) scale(0.53, 0.53) translateY(-0.5%);
}

#header-avatar-container[data-race="human"] #avatar-armor {
  transform: translate(-50%, -50%) scale(0.53, 0.53) translateY(-0.5%);
}

#header-avatar-container[data-race="elf"] #avatar-armor {
  transform: translate(-50%, -50%) scale(0.50, 0.54) translateY(-1%);
}

#header-avatar-container[data-race="dwarf"] #avatar-armor {
  transform: translate(-50%, -50%) scale(0.59, 0.46) translateY(8%);
}

#header-avatar-container[data-race="gnome"] #avatar-armor {
  transform: translate(-50%, -50%) scale(0.46, 0.44) translateY(12%);
}

#header-avatar-container[data-race="halfling"] #avatar-armor {
  transform: translate(-50%, -50%) scale(0.44, 0.46) translateY(143%);
}

/* Default header armor sizing */
#header-avatar-container #avatar-armor {
  transform: translate(-50%, -50%) scale(0.50, 0.50);
}

/* Header avatar boots overlay */
#header-avatar-container #avatar-boots {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
}

/* Race-specific scaling for header boots - Matching avatar customization */
#header-avatar-container[data-race="dragonborn"] #avatar-boots {
  transform: translate(-50%, -50%) scale(0.18, 0.19) translateY(300%);
}

#header-avatar-container[data-race="half-orc"] #avatar-boots {
  transform: translate(-50%, -50%) scale(0.19, 0.19) translateY(260%);
}

#header-avatar-container[data-race="tiefling"] #avatar-boots {
  transform: translate(-50%, -50%) scale(0.15, 0.16) translateY(140%);
}

#header-avatar-container[data-race="half-elf"] #avatar-boots {
  transform: translate(-50%, -50%) scale(0.16, 0.16) translateY(145%);
}

#header-avatar-container[data-race="human"] #avatar-boots {
  transform: translate(-50%, -50%) scale(0.16, 0.16) translateY(145%);
}

#header-avatar-container[data-race="elf"] #avatar-boots {
  transform: translate(-50%, -50%) scale(0.15, 0.16) translateY(140%);
}

#header-avatar-container[data-race="dwarf"] #avatar-boots {
  transform: translate(-50%, -50%) scale(0.18, 0.14) translateY(160%);
}

#header-avatar-container[data-race="gnome"] #avatar-boots {
  transform: translate(-50%, -50%) scale(0.14, 0.13) translateY(170%);
}

#header-avatar-container[data-race="halfling"] #avatar-boots {
  transform: translate(-50%, -50%) scale(0.2, 0.16) translateY(662%);

}

/* Default header boots sizing */
#header-avatar-container #avatar-boots {
  transform: translate(-50%, -50%) scale(0.15, 0.15) translateY(150%);
}

/* Header avatar cape overlay */
#header-avatar-container #avatar-cape {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
}

/* Race-specific scaling for header cape - Matching avatar customization */
#header-avatar-container[data-race="dragonborn"] #avatar-cape {
  transform: translate(-50%, -50%) scale(0.6, 0.6) translateY(35%);
}

#header-avatar-container[data-race="half-orc"] #avatar-cape {
  transform: translate(-50%, -50%) scale(0.41, 0.47) translateY(-0.5%);
}

#header-avatar-container[data-race="tiefling"] #avatar-cape {
  transform: translate(-50%, -50%) scale(0.50, 0.54) translateY(-1%);
}

#header-avatar-container[data-race="half-elf"] #avatar-cape {
  transform: translate(-50%, -50%) scale(0.53, 0.53) translateY(-0.5%);
}

#header-avatar-container[data-race="human"] #avatar-cape {
  transform: translate(-50%, -50%) scale(0.53, 0.53) translateY(-0.5%);
}

#header-avatar-container[data-race="elf"] #avatar-cape {
  transform: translate(-50%, -50%) scale(0.50, 0.54) translateY(-1%);
}

#header-avatar-container[data-race="dwarf"] #avatar-cape {
  transform: translate(-50%, -50%) scale(0.59, 0.46) translateY(8%);
}

#header-avatar-container[data-race="gnome"] #avatar-cape {
  transform: translate(-50%, -50%) scale(0.46, 0.44) translateY(12%);
}

#header-avatar-container[data-race="halfling"] #avatar-cape {
  transform: translate(-50%, -50%) scale(0.44, 0.46) translateY(143%);
}

/* Default header cape sizing */
#header-avatar-container #avatar-cape {
  transform: translate(-50%, -50%) scale(0.50, 0.50);
}

/* Avatar page adjustments for header cape positioning */
body:has(#avatar-page.active) .header #header-avatar-container[data-race="dragonborn"] #avatar-cape {
  transform: translate(-50%, -50%) scale(0.6, 0.6) translateY(12%);
}

body:has(#avatar-page.active) .header #header-avatar-container[data-race="half-orc"] #avatar-cape {
  transform: translate(-50%, -50%) scale(0.41, 0.47) translateY(21.5%);
}

body:has(#avatar-page.active) .header #header-avatar-container[data-race="tiefling"] #avatar-cape {
  transform: translate(-50%, -50%) scale(0.50, 0.54) translateY(21%);
}

body:has(#avatar-page.active) .header #header-avatar-container[data-race="half-elf"] #avatar-cape {
  transform: translate(-50%, -50%) scale(0.53, 0.53) translateY(21.5%);
}

body:has(#avatar-page.active) .header #header-avatar-container[data-race="human"] #avatar-cape {
  transform: translate(-50%, -50%) scale(0.53, 0.53) translateY(21.5%);
}

body:has(#avatar-page.active) .header #header-avatar-container[data-race="elf"] #avatar-cape {
  transform: translate(-50%, -50%) scale(0.50, 0.54) translateY(21%);
}

body:has(#avatar-page.active) .header #header-avatar-container[data-race="dwarf"] #avatar-cape {
  transform: translate(-50%, -50%) scale(0.59, 0.46) translateY(30%);
}

body:has(#avatar-page.active) .header #header-avatar-container[data-race="gnome"] #avatar-cape {
  transform: translate(-50%, -50%) scale(0.46, 0.44) translateY(34%);
}

body:has(#avatar-page.active) .header #header-avatar-container[data-race="halfling"] #avatar-cape {
  transform: translate(-50%, -50%) scale(0.44, 0.46) translateY(95%);
}

/* Avatar page adjustments for header armor positioning */
body:has(#avatar-page.active) .header #header-avatar-container[data-race="dragonborn"] #avatar-armor {
  transform: translate(-50%, -50%) scale(0.44, 0.45) translateY(-6%);
}

body:has(#avatar-page.active) .header #header-avatar-container[data-race="half-orc"] #avatar-armor {
  transform: translate(-50%, -50%) scale(0.41, 0.47) translateY(21.5%);
}

body:has(#avatar-page.active) .header #header-avatar-container[data-race="tiefling"] #avatar-armor {
  transform: translate(-50%, -50%) scale(0.50, 0.54) translateY(21%);
}

body:has(#avatar-page.active) .header #header-avatar-container[data-race="half-elf"] #avatar-armor {
  transform: translate(-50%, -50%) scale(0.53, 0.53) translateY(21.5%);
}

body:has(#avatar-page.active) .header #header-avatar-container[data-race="human"] #avatar-armor {
  transform: translate(-50%, -50%) scale(0.53, 0.53) translateY(21.5%);
}

body:has(#avatar-page.active) .header #header-avatar-container[data-race="elf"] #avatar-armor {
  transform: translate(-50%, -50%) scale(0.50, 0.54) translateY(21%);
}

body:has(#avatar-page.active) .header #header-avatar-container[data-race="dwarf"] #avatar-armor {
  transform: translate(-50%, -50%) scale(0.59, 0.46) translateY(30%);
}

body:has(#avatar-page.active) .header #header-avatar-container[data-race="gnome"] #avatar-armor {
  transform: translate(-50%, -50%) scale(0.46, 0.44) translateY(34%);
}

body:has(#avatar-page.active) .header #header-avatar-container[data-race="halfling"] #avatar-armor {
  transform: translate(-50%, -50%) scale(0.44, 0.46) translateY(95%);
}

/* Avatar page adjustments for header boots positioning */
body:has(#avatar-page.active) .header #header-avatar-container[data-race="dragonborn"] #avatar-boots {
  transform: translate(-50%, -50%) scale(0.18, 0.19) translateY(232%);
}

body:has(#avatar-page.active) .header #header-avatar-container[data-race="half-orc"] #avatar-boots {
  transform: translate(-50%, -50%) scale(0.19, 0.19) translateY(282%);
}

body:has(#avatar-page.active) .header #header-avatar-container[data-race="tiefling"] #avatar-boots {
  transform: translate(-50%, -50%) scale(0.15, 0.16) translateY(92%);
}

body:has(#avatar-page.active) .header #header-avatar-container[data-race="half-elf"] #avatar-boots {
  transform: translate(-50%, -50%) scale(0.16, 0.16) translateY(167%);
}

body:has(#avatar-page.active) .header #header-avatar-container[data-race="human"] #avatar-boots {
  transform: translate(-50%, -50%) scale(0.16, 0.16) translateY(167%);
}

body:has(#avatar-page.active) .header #header-avatar-container[data-race="elf"] #avatar-boots {
  transform: translate(-50%, -50%) scale(0.15, 0.16) translateY(162%);
}

body:has(#avatar-page.active) .header #header-avatar-container[data-race="dwarf"] #avatar-boots {
  transform: translate(-50%, -50%) scale(0.18, 0.14) translateY(182%);
}

body:has(#avatar-page.active) .header #header-avatar-container[data-race="gnome"] #avatar-boots {
  transform: translate(-50%, -50%) scale(0.14, 0.13) translateY(192%);
}

body:has(#avatar-page.active) .header #header-avatar-container[data-race="halfling"] #avatar-boots {
  transform: translate(-50%, -50%) scale(0.2, 0.16) translateY(518%);
}

/* Dice Section */
.dice-section h2 {
  margin-top: 1.5rem;
}

.dice-container {
  text-align: center;
}

.dice-display {
  width: 320px;
  height: 300px;
  margin: 0 auto 2rem;
  background: var(--surface-glass);
  backdrop-filter: blur(15px);
  border: 2px solid var(--border-gold);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow-premium);
  font-size: 4rem;
  position: relative;
}

.dice-display::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(45deg, var(--primary-gold), transparent, var(--accent-purple), transparent, var(--primary-gold));
  border-radius: 20px;
  z-index: -1;
  animation: borderRotate 4s linear infinite;
}

@keyframes borderRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

#roll-dice-btn {
  background: linear-gradient(135deg, var(--accent-red), #dc2626);
  color: white;
  border: none;
  padding: 1.25rem 2.5rem;
  border-radius: 16px;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 15px 35px rgba(239, 68, 68, 0.4);
  position: relative;
  overflow: hidden;
}

#roll-dice-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}

#roll-dice-btn:hover::before {
  left: 100%;
}

#roll-dice-btn:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: var(--shadow-glow), 0 20px 40px rgba(239, 68, 68, 0.5);
}

.dice-result {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--surface-glass);
  backdrop-filter: blur(15px);
  border: var(--glass-border);
  border-radius: 16px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-gold);
  text-align: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Bottom Navigation */
.bottom-nav {
  z-index: 1000;
  position: fixed;
  inset: auto 0% 0%;
  background: var(--gradient-surface);
  backdrop-filter: blur(20px);
  border-top: 3px solid var(--primary-gold);
  border-radius: 24px 24px 0 0;
  display: flex;
  justify-content: space-evenly;
  padding: 0.25rem 0.5rem;
  box-shadow: var(--shadow-premium);
  min-height: 80px;
}

/* Hide navigation bar when splash screen or wizard is visible */
body:has(.splash-screen:not(.hidden)) .bottom-nav,
body:has(#wizard:not(.hidden)) .bottom-nav {
  display: none;
}

.nav-item {
  text-decoration: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0.25rem;
  padding-bottom: 0.5rem;
  border-radius: 15px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.nav-item.active .nav-icon {
  background: rgb(230, 198, 80, 0.3);
  border-radius: 15px;
}

.nav-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background 0.3s ease;
}

.nav-icon img {
  width: 75%;
  height: auto;
}

.nav-label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-light);
  text-align: center;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
}

/* Card Collection */
.card-section {
  position: relative;
  padding: 1rem 1.5rem 6rem;
  background: rgba(10, 10, 15, 0.5);
}

.card-stats {
  text-align: center;
  margin-bottom: 1.5rem;
  color: var(--text-gold);
  font-weight: 600;
  font-size: 1.1rem;
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.5rem;
  padding: 1rem;
  margin: 0 0.5rem;
}

.collection-grid::-webkit-scrollbar {
  width: 8px;
}

.collection-grid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.collection-grid::-webkit-scrollbar-thumb {
  background: var(--primary-gold);
  border-radius: 4px;
}

/* Cards */
.card {
  background: var(--surface-glass);
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
  border: 2px solid;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.8s ease;
}

.card:hover::before {
  left: 100%;
}

.card:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.card.common {
  border-color: #64748b;
  box-shadow: 0 8px 25px rgba(100, 116, 139, 0.3);
}

.card.uncommon {
  border-color: #10b981;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}

.card.rare {
  border-color: #3b82f6;
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.card.epic {
  border-color: #8b5cf6;
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
}

.card.legendary {
  border-color: #f59e0b;
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
  animation: legendaryGlow 3s ease-in-out infinite;
}

@keyframes legendaryGlow {

  0%,
  100% {
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
  }

  50% {
    box-shadow: 0 8px 35px rgba(245, 158, 11, 0.7), 0 0 20px rgba(245, 158, 11, 0.3);
  }
}

.card-name {
  font-family: "Cinzel Decorative", serif;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  color: var(--text-gold);
  text-shadow: 0 2px 10px rgba(212, 175, 55, 0.3);
}

.card-rarity {
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.9;
}

.card-effect {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
  font-weight: 500;
}

.card-image {
  width: 100%;
  height: 120px;
  border-radius: 12px;
  margin-bottom: 1rem;
  object-fit: cover;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Card Actions */
.card-actions {
  position: absolute;
  top: 5px;
  right: 5px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover .card-actions {
  opacity: 1;
}

.card-delete-btn {
  background: rgba(220, 38, 38, 0.8);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  color: white;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

.card-delete-btn:hover {
  background: rgba(220, 38, 38, 1);
  transform: scale(1.1);
}

/* Card Details Modal */
.card-details-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: modalFadeIn 0.4s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.card-details-content {
  background: var(--gradient-surface);
  backdrop-filter: blur(25px);
  padding: 1.5rem;
  border-radius: 16px;
  border: 2px solid var(--primary-gold);
  text-align: center;
  max-width: 320px;
  width: 85%;
  box-shadow: var(--shadow-premium);
  animation: modalSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.card-details-header h2 {
  font-family: "Cinzel Decorative", serif;
  color: var(--text-gold);
  font-size: 1.2rem;
  font-weight: 700;
  text-shadow: 0 4px 20px rgba(212, 175, 55, 0.4);
  margin: 0;
}

.close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.close-btn:hover {
  color: var(--primary-gold);
}

.card-details-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.card-details-image img {
  width: 100%;
  max-width: 120px;
  height: auto;
  border-radius: 8px;
  margin: 0 auto;
  display: block;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.no-image {
  width: 100%;
  max-width: 120px;
  height: 60px;
  background: var(--surface-glass);
  border: 2px dashed var(--text-muted);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.8rem;
  margin: 0 auto;
}

.card-details-info {
  text-align: left;
}

.detail-item {
  margin-bottom: 0.5rem;
}

.detail-item strong {
  color: var(--text-gold);
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.85rem;
}

.rarity-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rarity-badge.common {
  background: #64748b;
  color: white;
}

.rarity-badge.uncommon {
  background: #10b981;
  color: white;
}

.rarity-badge.rare {
  background: #3b82f6;
  color: white;
}

.rarity-badge.epic {
  background: #8b5cf6;
  color: white;
}

.rarity-badge.legendary {
  background: #f59e0b;
  color: white;
}

.card-effect-full {
  color: var(--text-light);
  line-height: 1.4;
  margin: 0;
  font-size: 0.8rem;
}

.card-description {
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
  font-size: 0.75rem;
}

.card-details-footer {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1rem;
}

.discard-btn {
  background: linear-gradient(135deg, var(--accent-red), #dc2626);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
  font-size: 0.8rem;
}

.discard-btn:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4);
}

.close-modal-btn {
  background: var(--gradient-gold);
  color: var(--background-dark);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
  font-size: 0.8rem;
}

.close-modal-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-content h3 {
  text-align: center;
  font-family: "Cinzel Decorative", serif;
  color: var(--text-gold);
  margin-bottom: 1.5rem;
  font-size: 2rem;
  font-weight: 700;
  text-shadow: 0 4px 20px rgba(212, 175, 55, 0.4);
}

.reward-details {
  text-align: center;
  margin: 1.5rem 0;
  font-size: 1.1rem;
  line-height: 1.6;
  font-weight: 500;
}

.new-card {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: var(--surface-glass);
  backdrop-filter: blur(15px);
  border-radius: 16px;
  border: var(--glass-border);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.modal-content button {
  background: var(--gradient-gold);
  color: var(--background-dark);
  border: none;
  padding: 1.25rem 1.75rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  margin: 0 auto;
  display: block;
}

.modal-content button:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: var(--shadow-glow);
}

/* Loading and transition effects */
.fade-in {
  animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scale-in {
  animation: scaleIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Settings Section */
.settings-section {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  padding: 1rem 1.5rem;
  background: rgba(10, 10, 15, 0.5);
}

.settings-section h2 {
  font-family: "Cinzel Decorative", serif;
  color: var(--text-gold);
  margin: 1rem;
  text-align: center;
  font-size: 1.8rem;
  font-weight: 600;
  text-shadow: 0 2px 10px rgba(212, 175, 55, 0.3);
}

.settings-group {
  background: var(--surface-glass);
  backdrop-filter: blur(15px);
  border: var(--glass-border);
  border-radius: 16px;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.settings-group h3 {
  font-family: "Cinzel Decorative", serif;
  color: var(--text-gold);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: .5rem;
  letter-spacing: 1px;
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.setting-item label {
  color: var(--text-light);
  font-weight: 600;
  font-size: 1rem;
  flex: 1;
  min-width: 150px;
}

.setting-item input[type="range"] {
  flex: 1;
  max-width: 150px;
  margin: 0 1rem;
  background: var(--surface-glass);
  border-radius: 8px;
  height: 8px;
  appearance: none;
  outline: none;
}

.setting-item input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary-gold);
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.setting-item input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary-gold);
  cursor: pointer;
  border: none;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.setting-item input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--primary-gold);
  cursor: pointer;
}

.setting-item span {
  color: var(--text-gold);
  font-weight: 600;
  min-width: 50px;
  text-align: right;
}

.setting-description {
  width: 100%;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 0.5rem;
  line-height: 1.4;
}

.btn-danger {
  background: linear-gradient(135deg, var(--accent-red), #dc2626);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-danger:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4);
}

.btn-secondary {
  background: var(--surface-glass);
  color: var(--text-light);
  border: var(--glass-border);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.btn-secondary:hover {
  background: var(--surface-glass-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
}

/* Floating notification styles */
.floating-message {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  color: white;
  font-weight: 600;
  z-index: 1001;
  box-shadow: var(--shadow-premium);
  backdrop-filter: blur(15px);
  animation: slideInRight 0.4s ease-out;
  max-width: 300px;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.floating-message.success {
  background: linear-gradient(135deg, #10b981, #059669);
  border: 1px solid #34d399;
}

.floating-message.error {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border: 1px solid #f87171;
}

.floating-message.info {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border: 1px solid #60a5fa;
}


/* Streak Modal Styles */
.streak-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
  backdrop-filter: blur(10px);
}

.streak-modal-content {
  background: linear-gradient(135deg, #2a2a4e 0%, #0e1625 100%);
  border: 3px solid #d4af37;
  border-radius: 20px;
  padding: 2.5rem;
  max-width: 600px;
  width: 90%;
  color: white;
  text-align: center;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8);
  animation: streakModalSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes streakModalSlideIn {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.streak-modal-content h2 {
  color: #d4af37;
  font-family: "Cinzel Decorative", serif;
  font-size: 2.2rem;
  margin-bottom: 2rem;
  text-shadow: 0 4px 20px rgba(212, 175, 55, 0.4);
}

.streak-display {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  border: 2px solid #8b5cf6;
  border-radius: 20px;
  padding: 2rem;
  margin: 2rem 0;
  position: relative;
  overflow: hidden;
}

.streak-display::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

.streak-number {
  font-size: 4rem;
  font-weight: 900;
  color: white;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  margin-bottom: 0.5rem;
}

.streak-label {
  font-size: 1.3rem;
  font-weight: 600;
  color: #e5e7eb;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.streak-warning {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border: 2px solid #f87171;
  border-radius: 15px;
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.streak-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: 2px solid #34d399;
  border-radius: 15px;
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.rest-option {
  margin: 1rem 0;
}

.rest-btn {
  background: linear-gradient(135deg, #d4af37 0%, #b8941f 100%);
  color: #0e1625;
  border: 2px solid #eab308;
  padding: 1rem 2rem;
  border-radius: 12px;
  font-weight: bold;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 0.5rem;
  display: block;
  width: 100%;
}

.rest-btn:hover {
  background: linear-gradient(135deg, #b8941f 0%, #9c7a1a 100%);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(212, 175, 55, 0.4);
}

.short-rest {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border-color: #60a5fa;
  color: white;
}

.short-rest:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.long-rest {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  border-color: #a855f7;
  color: white;
}

.long-rest:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}

.rest-unavailable {
  background: rgba(107, 114, 128, 0.3);
  border: 2px solid #6b7280;
  border-radius: 12px;
  padding: 1rem;
  color: #9ca3af;
}

.rest-status {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  backdrop-filter: blur(10px);
}

.rest-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.rest-count {
  color: #d4af37;
  font-weight: bold;
  font-size: 1.1rem;
}

.rest-reset {
  font-size: 0.9rem;
  color: #9ca3af;
  font-style: italic;
  text-align: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.streak-buttons {
  margin-top: 2rem;
}

.streak-buttons button {
  background: linear-gradient(135deg, #d4af37 0%, #b8941f 100%);
  color: #0e1625;
  border: 2px solid #eab308;
  padding: 1rem 2.5rem;
  border-radius: 12px;
  font-weight: bold;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.streak-buttons button:hover {
  background: linear-gradient(135deg, #b8941f 0%, #9c7a1a 100%);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(212, 175, 55, 0.4);
}

/* Wellness Modal Styles */
.wellness-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.wellness-modal-content {
  background: linear-gradient(135deg, #2a2a4e 0%, #0e1625 100%);
  border: 2px solid #d4af37;
  border-radius: 12px;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  color: white;
  text-align: center;
}

.wellness-modal-content h2 {
  color: #d4af37;
  margin-bottom: 1rem;
}

.wellness-section {
  padding: 2rem 2rem 5rem 2rem;
  max-width: 800px;
  margin: 0 auto;
  min-height: calc(100vh - 120px);
  overflow-y: auto;
}

.wellness-section h2 {
  color: #d4af37;
  text-align: center;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.wellness-section h3 {
  color: #d4af37;
  text-align: center;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.wellness-section h4 {
  color: #d4af37;
  text-align: center;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.wellness-checkboxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
  text-align: left;
}

.wellness-checkboxes label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 8px;
  background: rgba(212, 175, 55, 0.1);
  cursor: pointer;
  transition: background 0.3s ease;
}

.wellness-checkboxes label:hover {
  background: rgba(212, 175, 55, 0.2);
}

.wellness-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.5rem;
}

.wellness-buttons button {
  padding: 0.75rem 1.5rem;
  border: 2px solid #d4af37;
  background: linear-gradient(135deg, #d4af37 0%, #b8941f 100%);
  color: #0e1625;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.wellness-buttons button:hover {
  background: linear-gradient(135deg, #b8941f 0%, #9c7a1a 100%);
  transform: translateY(-2px);
}

/* Wellness Page Styles */
.wellness-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: linear-gradient(135deg, #2a2a4e 0%, #0e1625 100%);
  border: 2px solid #d4af37;
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
}

.stat-card h4 {
  color: #d4af37;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.stat-bar {
  background: rgba(0, 0, 0, 0.3);
  height: 15px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.stat-fill {
  height: 100%;
  transition: width 0.3s ease;
  border-radius: 8px;
}

.stress-fill {
  background: linear-gradient(90deg, #22c55e 0%, #fbbf24 50%, #ef4444 100%);
}

.energy-fill {
  background: linear-gradient(90deg, #3b82f6 0%, #22c55e 100%);
}

.mood-fill {
  background: linear-gradient(90deg, #8b5cf6 0%, #ec4899 100%);
}

.mindfulness-fill {
  background: linear-gradient(90deg, #06b6d4 0%, #10b981 100%);
}

/* Self-Care Section */
.self-care-section {
  margin: 2rem 0;
}

.self-care-section h2 {
  color: #d4af37;
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
}

.self-care-card h3 {
  color: #e5e7eb;
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
}

.self-care-section h4 {
  color: #d4af37;
  margin-bottom: 1rem;
}

.self-care-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.self-care-btn {
  padding: 1rem;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  border: 2px solid #8b5cf6;
  border-radius: 8px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.self-care-btn:hover {
  background: linear-gradient(135deg, #6d28d9 0%, #9333ea 100%);
  transform: translateY(-2px);
}

.stat-text {
  font-size: 0.9rem;
  color: #9ca3af;
  font-style: italic;
}

.self-care-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.self-care-card {
  background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);
  border: 2px solid #8b5cf6;
  border-radius: 15px;
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
}

.self-care-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
  border-color: #a855f7;
}

.activity-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

/* Meditation Timer Modal */
.meditation-timer-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Walking Timer Modal */
.walking-timer-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.walking-timer-content {
  background: linear-gradient(135deg, #065f46 0%, #059669 100%);
  border: 2px solid #10b981;
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  color: white;
  max-width: 450px;
  width: 90%;
}

.walking-timer-content h2 {
  color: #e5e7eb;
  margin-bottom: 1rem;
  font-size: 1.8rem;
}

.walking-display {
  text-align: center;
  padding: 1rem 0;
}

.walking-stats {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 1.5rem;
  gap: 2rem;
}

.walking-stats .timer-circle {
  width: 120px;
  height: 120px;
  border: 3px solid #10b981;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #047857 0%, #059669 100%);
  box-shadow: 0 8px 32px rgba(16, 185, 129, 0.3);
}

.walking-stats .timer-text {
  font-size: 1.8rem;
  font-weight: bold;
  color: white;
  font-family: 'Courier New', monospace;
}

.step-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 1rem;
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.step-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.step-count {
  font-size: 2rem;
  font-weight: bold;
  color: #a7f3d0;
  font-family: 'Courier New', monospace;
  margin-bottom: 0.25rem;
}

.step-label {
  font-size: 0.8rem;
  color: #d1fae5;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.walking-prompt {
  font-style: italic;
  color: #e5e7eb;
  margin: 1.5rem 0;
  font-size: 1.1rem;
  min-height: 2rem;
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.1);
  padding: 1rem;
  border-radius: 10px;
  backdrop-filter: blur(10px);
}

.walking-controls {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1rem;
}

.walking-controls .pause-btn,
.walking-controls .stop-btn {
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  border: 2px solid;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.walking-controls .pause-btn {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
  border-color: #92400e;
  color: white;
}

.walking-controls .pause-btn:hover {
  background: linear-gradient(135deg, #b45309 0%, #d97706 100%);
}

.walking-controls .stop-btn {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  border-color: #991b1b;
  color: white;
}

.walking-controls .stop-btn:hover {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
}

.walking-timer-modal .close-timer-btn {
  padding: 0.8rem 1.5rem;
  background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%);
  border: 2px solid #4b5563;
  border-radius: 8px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 1rem;
}

.walking-timer-modal .close-timer-btn:hover {
  background: linear-gradient(135deg, #4b5563 0%, #6b7280 100%);
}

.meditation-timer-content {
  background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);
  border: 2px solid #8b5cf6;
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  color: white;
  max-width: 400px;
  width: 90%;
}

.meditation-timer-content h2 {
  color: #e5e7eb;
  margin-bottom: 1rem;
  font-size: 1.8rem;
}

.timer-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}

.timer-btn {
  padding: 1rem;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  border: 2px solid #065f46;
  border-radius: 10px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
}

.timer-btn:hover {
  background: linear-gradient(135deg, #047857 0%, #059669 100%);
  transform: translateY(-2px);
}

.meditation-display {
  text-align: center;
  padding: 1rem 0;
}

.timer-circle {
  width: 200px;
  height: 200px;
  border: 4px solid #8b5cf6;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 1rem;
  background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%);
  box-shadow: 0 8px 32px rgba(139, 92, 246, 0.3);
}

.timer-text {
  font-size: 3rem;
  font-weight: bold;
  color: white;
  font-family: 'Courier New', monospace;
}

.meditation-quote {
  font-style: italic;
  color: #e5e7eb;
  margin: 1.5rem 0;
  font-size: 1.1rem;
  min-height: 2rem;
  opacity: 0.9;
}

.pause-btn,
.stop-btn {
  margin: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  border: 2px solid;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.pause-btn {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
  border-color: #92400e;
  color: white;
}

.pause-btn:hover {
  background: linear-gradient(135deg, #b45309 0%, #d97706 100%);
}

.stop-btn {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  border-color: #991b1b;
  color: white;
}

.stop-btn:hover {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
}

.close-timer-btn {
  padding: 0.8rem 1.5rem;
  background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%);
  border: 2px solid #4b5563;
  border-radius: 8px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 1rem;
}

.close-timer-btn:hover {
  background: linear-gradient(135deg, #4b5563 0%, #6b7280 100%);
}

/* Notification Settings */
.wellness-notifications {
  margin: 2rem 0;
  padding: 1.5rem;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  border: 2px solid #4c1d95;
  border-radius: 10px;
}

.wellness-notifications h4 {
  color: #d4af37;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.toggle-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: bold;
  color: white;
}

.toggle-input {
  display: none;
}

.toggle-slider {
  width: 50px;
  height: 24px;
  background: #4b5563;
  border-radius: 12px;
  margin-right: 10px;
  position: relative;
  transition: background 0.3s ease;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.3s ease;
}

.toggle-input:checked+.toggle-slider {
  background: #d4af37;
}

.toggle-input:checked+.toggle-slider::before {
  transform: translateX(26px);
}

.notification-settings {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #4c1d95;
}

.settings-select {
  padding: 0.5rem;
  background: #374151;
  border: 1px solid #6b7280;
  border-radius: 5px;
  color: white;
  width: 100%;
}

.quiet-hours {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.5rem 0;
}

.time-input {
  padding: 0.5rem;
  background: #374151;
  border: 1px solid #6b7280;
  border-radius: 5px;
  color: white;
}

.activity-toggles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.activity-toggle {
  display: flex;
  align-items: center;
  color: white;
  cursor: pointer;
}

.activity-toggle input {
  margin-right: 0.5rem;
  accent-color: #d4af37;
}

.self-care-card p {
  color: #d1d5db;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.benefits {
  background: rgba(255, 255, 255, 0.1);
  padding: 0.5rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: bold;
  color: #a7f3d0;
}

.wellness-tips {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  border: 2px solid #d4af37;
  border-radius: 15px;
  padding: 2rem;
  text-align: center;
}

.wellness-tips h2 {
  color: #d4af37;
  margin-bottom: 1.5rem;
  font-size: 1.6rem;
}

.tip-scroll {
  max-height: 200px;
  overflow-y: auto;
}

.tip-scroll p {
  color: #e5e7eb;
  font-style: italic;
  margin-bottom: 1rem;
  padding: 1rem;
  background: rgba(212, 175, 55, 0.1);
  border-radius: 8px;
  border-left: 4px solid #d4af37;
}

/* Modal styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Greeting Modal Styles */
.greeting-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
  animation: modalFadeIn 0.5s ease-out;
}

.greeting-modal-content {
  background: var(--gradient-surface);
  backdrop-filter: blur(25px);
  border: 3px solid var(--primary-gold);
  border-radius: 20px;
  padding: 2rem;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  color: var(--text-light);
  text-align: center;
  box-shadow: var(--shadow-premium);
  animation: modalSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.greeting-modal-content h2 {
  font-family: "Cinzel Decorative", serif;
  color: var(--primary-gold);
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  text-shadow: 0 4px 20px rgba(212, 175, 55, 0.4);
}

.greeting-features {
  text-align: left;
  margin: 2rem 0;
}

.feature-item {
  background: rgba(212, 175, 55, 0.1);
  border-left: 4px solid var(--primary-gold);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.feature-item:hover {
  background: rgba(212, 175, 55, 0.15);
  transform: translateX(5px);
}

.feature-item strong {
  color: var(--primary-gold);
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.feature-item p {
  color: var(--text-light);
  line-height: 1.4;
  margin: 0;
}

.greeting-buttons {
  margin-top: 2rem;
}

.greeting-buttons button {
  background: var(--gradient-gold);
  color: var(--background-dark);
  border: none;
  padding: 1rem 2rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 25px rgba(212, 175, 55, 0.3);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.greeting-buttons button:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: var(--shadow-glow);
}

@keyframes modalFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Help Section Improvements */
.help-section {
  margin-top: 1rem;
}

.help-search-container {
  position: relative;
  margin-bottom: 1.5rem;
}

.help-search {
  width: 100%;
  padding: 1rem 1rem 1rem 3rem;
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  border: var(--glass-border);
  border-radius: 12px;
  color: var(--text-light);
  font-size: 1rem;
  transition: all 0.3s ease;
}

.help-search:focus {
  outline: none;
  border-color: var(--primary-gold);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

.help-search::placeholder {
  color: var(--text-muted);
}

.search-results-count {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-style: italic;
}

.help-content {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.help-content::-webkit-scrollbar {
  width: 6px;
}

.help-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.help-content::-webkit-scrollbar-thumb {
  background: var(--primary-gold);
  border-radius: 3px;
}

.help-item {
  background: var(--surface-glass);
  backdrop-filter: blur(15px);
  border: var(--glass-border);
  border-left: 4px solid var(--primary-gold);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.help-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
  transition: left 0.6s ease;
}

.help-item:hover::before {
  left: 100%;
}

.help-item:hover {
  background: var(--surface-glass-hover);
  transform: translateX(5px);
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.2);
}

.help-item h4 {
  font-family: "Cinzel Decorative", serif;
  color: var(--primary-gold);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  text-shadow: 0 2px 10px rgba(212, 175, 55, 0.3);
}

.help-description {
  color: var(--text-light);
}

.help-description p {
  line-height: 1.6;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}

.help-tip {
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px;
  padding: 0.75rem;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-light);
}

.help-tip strong {
  color: var(--primary-gold);
}

.help-item.hidden {
  display: none;
}

/* Mobile app optimizations */
html,
body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Prevent zoom on inputs */
input,
textarea,
select {
  font-size: 16px;
}

/* Safe area support for notched devices */
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Mobile optimizations */
@media (max-width: 768px) {
  /* Currency section mobile layout */
  .currency-column .currency-section {
    justify-content: center;
    gap: 1rem .5rem;
    text-align: center;
  }

  .currency-item {
    align-items: center;
    gap: 0.1rem;
  }

  /* XP section mobile adjustments */
  .xp-section {
    gap: 0.5rem;
    font-size: 0.85rem;
  }

  .xp-text {
    font-size: 0.75rem;
  }

  /* Navigation icons and labels responsive sizing */
  .nav-icon {
    width: 52px;
    height: 52px;
  }

  .nav-label {
    font-size: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .wellness-stats {
    grid-template-columns: 1fr 1fr;
  }

  .self-care-grid {
    grid-template-columns: 1fr;
  }

  /* Card collection mobile adjustments */
  .collection-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0.5rem;
    margin: 0;
  }

  .card-section {
    padding: 0.75rem 1rem 6rem;
  }
}

/* Wellness Page Styles */
.wellness-section {
  padding: 2rem 2rem 5rem 2rem;
  max-width: 800px;
  margin: 0 auto;
  min-height: calc(100vh - 120px);
  overflow-y: auto;
}

.wellness-intro {
  text-align: center;
  font-style: italic;
  color: var(--text-light);
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

.wellness-management {
  gap: 1rem;
  padding-bottom: 2rem;
}

.wellness-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.wellness-actions button {
  flex: 1;
  min-width: 200px;
}