@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/outfit/Outfit-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* "Friendly" Color Schema */
  --bg-color: #f7f9fc;
  --text-primary: #2d3748;
  --text-secondary: #718096;
  --text-muted: #a0aec0;
  --text-disabled: #cbd5e0;
  --accent-color: #38b2ac;
  /* Teal-400 - Friendly, inviting */
  --accent-hover: #319795;
  --glass-bg: color-mix(in srgb, white 85%, transparent);
  --glass-border: color-mix(in srgb, white 50%, transparent);
  --white: #ffffff;
  --shadow-soft:
    0 4px 6px -1px color-mix(in srgb, black 10%, transparent),
    0 2px 4px -1px color-mix(in srgb, black 6%, transparent);
  --shadow-lg:
    0 10px 15px -3px color-mix(in srgb, black 10%, transparent),
    0 4px 6px -2px color-mix(in srgb, black 5%, transparent);

  /* Semantic colors */
  --border-color: #e2e8f0;
  --border-color-light: #edf2f7;
  --success-color: #38a169;
  --success-hover: #276749;
  --success-bg: #f0fff4;
  --warning-color: #dd6b20;
  --error-color: #e53e3e;
  --error-hover: #c53030;
  --error-bg: #fff5f5;
  --surface-secondary: #f0f4f8;

  /* Dice icon colors */
  --dice-d2-fill: #c0c0c0;
  --dice-d2-stroke: #999999;
  --dice-d4-fill: #f5d16f;
  --dice-d4-stroke: #c9a84c;
  --dice-d6-fill: #7ee0c2;
  --dice-d6-stroke: #4fc9a6;
  --dice-d8-fill: #7cb7ff;
  --dice-d8-stroke: #5a9ae0;
  --dice-d10-fill: #e18bff;
  --dice-d10-stroke: #c060e0;
  --dice-d12-fill: #ff9f7a;
  --dice-d12-stroke: #d97a55;
  --dice-d20-fill: #6ae1ff;
  --dice-d20-stroke: #42b8d9;

  /* Dice selection glow colors */
  --dice-selection-blue: #63b3ed;
  --dice-selection-purple: #9f7aea;

  /* Gold accent for Gegenstand badges */
  --gold-accent: #ffd764;

  /* Overlay & Modal Backgrounds */
  --overlay-backdrop: color-mix(in srgb, black 70%, transparent);
  --overlay-shadow: 0 25px 50px color-mix(in srgb, black 30%, transparent);
  --portrait-overlay: color-mix(in srgb, black 40%, transparent);

  /* Canvas background */
  --canvas-background: #1a1a2e;

  /* Dice Lab dark theme */
  --dice-lab-bg: #0d1a24;
  --dice-lab-backdrop-start: #20526d;
  --dice-lab-backdrop-end: #132740;
  --dice-lab-glow-green: #6fffcb;
  --dice-lab-glow-blue: #77b6ff;
  --dice-lab-text: #eaf7ff;
  --dice-lab-text-highlight: #8fffd6;
  --dice-lab-text-accent: #a1c9ff;
  --dice-lab-surface: #0d1620;

  /* Dice Lab 3D scene */
  --dice-lab-scene-bg: #0b1118;
  --dice-lab-label-text: #0a0a0a;
  --dice-lab-sparkle: #9ef7ff;
  --dice-lab-hold-sparkle: #c7f0ff;

  /* Dice roll overlay */
  --dice-overlay-smoke: #b4b4b4;
  --dice-overlay-crack: #333333;

  /* Confetti colors */
  --confetti-gold: #ffd700;
  --confetti-red: #ff6b6b;
  --confetti-green: #6bcb77;
  --confetti-blue: #4d96ff;
  --confetti-pink: #ff8fe0;
  --confetti-orange: #ffa552;
  --confetti-purple: #b983ff;
  --confetti-cyan: #6ae1ff;

  --font-main: "Outfit", sans-serif;
  --transition-speed: 0.2s;
}

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

body {
  background-color: var(--bg-color);
  color: var(--text-primary);
  font-family: var(--font-main);
  line-height: 1.6;
  overflow-x: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-speed);
}

/* Glass Panel Utility */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
}

/* Header & Navigation */
.main-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  padding: 1rem 2rem;
}

.nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

/* Nav Sections */
.nav-section {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav-center {
  justify-content: center;
}

.nav-right {
  justify-content: flex-end;
}

/* Logo */
.logo {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--accent-color);
  letter-spacing: -0.5px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition: transform var(--transition-speed);
}

.logo:hover {
  transform: scale(1.15);
}

/* Nav Items */
.nav-item {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--text-primary);
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.nav-item:hover {
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
}

/* Dropdown */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background-color: var(--white);
  min-width: 100%;
  border-radius: 12px;
  padding: 0.5rem;
  z-index: 10;
  flex-direction: column;
  margin-top: 0.5rem;
}

/* Invisible bridge to prevent closing when moving cursor over the gap */
.dropdown-content::before {
  content: "";
  position: absolute;
  top: -1rem;
  left: 0;
  width: 100%;
  height: 1rem;
  background: transparent;
}

.dropdown:hover .dropdown-content {
  display: flex;
}

.dropdown-content a {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  text-align: right;
}

.dropdown-content a:hover {
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
  color: var(--accent-color);
}

/* Buttons */
.btn-primary {
  background: var(--accent-color);
  color: var(--white);
  padding: 0.6rem 1.5rem;
  border-radius: 50px;
  font-weight: 600;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-color) 40%, transparent);
}

.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.btn-lg {
  padding: 1rem 3rem;
  font-size: 1.1rem;
}

/* Main Content */
.main-content {
  margin-top: 80px;
  /* Header height */
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  position: relative;
  z-index: 10;
}

.main-content.wide-layout {
  align-items: stretch;
  justify-content: flex-start;
  padding: 1.5rem;
}

.hero-section {
  text-align: center;
  max-width: 800px;
}

h1 {
  font-size: 4rem;
  line-height: 1.1;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
}

.subtitle {
  font-size: 1.5rem;
  color: var(--text-secondary);
  margin-bottom: 3rem;
}

/* 404 Page */
.not-found-icon {
  font-size: 5rem;
  margin-bottom: 1rem;
}

.not-found-details {
  margin-bottom: 2.5rem;
}

.not-found-path {
  display: inline-block;
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
  color: var(--accent-color);
  padding: 0.4rem 1.2rem;
  border-radius: 8px;
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

.not-found-hint {
  color: var(--text-secondary);
  font-size: 1.1rem;
}

.cta-group {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

/* Auth Error Page */
.login-error {
  color: var(--error-color);
  background: var(--error-bg);
  padding: 0.8rem 1.5rem;
  border-radius: 10px;
  margin-bottom: 1.5rem;
  font-size: 1rem;
}

/* Animations */
.animate-fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

.animate-fade-in-delay {
  animation: fadeIn 0.8s ease-out 0.2s backwards;
}

.animate-fade-in-delay-2 {
  animation: fadeIn 0.8s ease-out 0.4s backwards;
}

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

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