/* ================================
   RPG THEME (with background image)
   ================================ */

:root {
  --rpg-bg-1: #1b0f1a;
  --rpg-bg-2: #3a1432;
  --rpg-ink:  #f7e9f2;
  --rpg-fade:#d7b8c7;

  --rpg-accent: #ff4f8b;   /* roos/romantisch */
  --rpg-accent-2:#c23a6a;  /* diep roze/paars */
  --rpg-gold:   #f2c14e;   /* goud accenten */
  --rpg-emerald:#3ddc97;   /* secundaire heldere highlight */

  --rpg-panel:  #2a1830;   /* leather/parchment mix */
  --rpg-border: #d1a85e;   /* warm goud voor randen */

  --radius-lg:  18px;
  --radius-md:  12px;
}

/* Magische, gelaagde achtergrond met afbeelding + vignette + nevel */
body {
  height: 100vh;
  background:
    url('/images/bg.png') center center / cover no-repeat,
    radial-gradient(1200px 700px at 18% 12%, rgba(247, 233, 242, .06), transparent 60%),
    radial-gradient(900px 600px at 82% 85%, rgba(255, 79, 139, .12), transparent 60%),
    radial-gradient(800px 500px at 75% 30%, rgba(200, 0, 60, .08), transparent 60%),
    radial-gradient(700px 450px at 25% 80%, rgba(120, 0, 20, .08), transparent 65%),
    radial-gradient(1600px 900px at 50% 50%, rgba(0,0,0,.45), rgba(0,0,0,.85)),
    linear-gradient(135deg, var(--rpg-bg-1), var(--rpg-bg-2));
  color: var(--rpg-ink);
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  margin: 0;
  overflow: hidden;
  background-attachment: fixed;
}

/* Subtiele ‘glitter’ particles */
body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.12), transparent 40%),
    radial-gradient(1px 1px at 80% 30%, rgba(255,255,255,.10), transparent 40%),
    radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,.10), transparent 40%),
    radial-gradient(1px 1px at 60% 40%, rgba(255,255,255,.10), transparent 40%);
  pointer-events: none;
  z-index: 0;
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { 0% {opacity:.5; filter:blur(.4px)} 100% {opacity:.9; filter:blur(0)} }

/* ===== Login paneel (direct gecentreerd; iets hoger) ===== */
.login-container {
  position: fixed;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -54%); /* iets hoger dan exact midden */
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    linear-gradient(145deg, rgba(242,193,78,.08), rgba(255,79,139,.05));
  border-radius: var(--radius-lg);
  padding: 2rem;
  max-width: 420px;
  width: 100%;
  z-index: 10; /* boven particles */
  box-shadow:
    0 24px 60px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.06);
  border: 1px solid rgba(209,168,94,.45);
}

/* Als het scherm te laag is: paneel los in de flow en scrollbaar */
@media (max-height: 720px) {
  body { overflow: auto; }
  .login-container {
    position: relative;
    left: auto; top: auto; transform: none;
    margin: 40px auto;
  }
}

/* Decoratieve bovenrand (gouden band) */
.login-container::before {
  content: "";
  position: absolute; left: 16px; right: 16px; top: -6px; height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--rpg-gold), transparent);
  filter: blur(.4px);
}

/* Koppen met reliëf */
.login-header h2 {
  font-weight: 800;
  letter-spacing: .5px;
  margin: 0 0 .5rem 0;
  color: #ffe7a3;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

/* Inputs – transparant, direct witte tekst/caret, ook op focus & autofill */
.form-control {
  border-radius: var(--radius-md);
  border: 1px solid rgba(209,168,94,.35);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  background-color: transparent !important;
  color: var(--rpg-ink) !important;
  -webkit-text-fill-color: var(--rpg-ink); /* Safari */
  caret-color: var(--rpg-ink) !important;
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.25),
    0 1px 0 rgba(255,255,255,.06);
}
.form-control:focus {
  background-color: transparent !important;
  color: var(--rpg-ink) !important;
  -webkit-text-fill-color: var(--rpg-ink);
  outline: none;
  border-color: var(--rpg-gold);
  box-shadow:
    0 0 0 3px rgba(242,193,78,.25),
    inset 0 2px 6px rgba(0,0,0,.25);
}
/* Chrome/Edge autofill: geen gele wash + juiste tekstkleur */
input.form-control:-webkit-autofill,
input.form-control:-webkit-autofill:hover,
input.form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px rgba(255,255,255,0) inset !important;
  -webkit-text-fill-color: var(--rpg-ink) !important;
  caret-color: var(--rpg-ink) !important;
}

/* Witte placeholders */
.form-control::placeholder { color: rgba(255,255,255,.85); opacity: 1; }

/* Primaire knop */
.btn-primary {
  cursor: pointer;
  background: linear-gradient(90deg, #c11b2b 0%, #ff4f4f 50%, #f7c66b 100%);
  border: none;
  border-radius: var(--radius-md);
  padding: 0.95rem 1rem;
  font-weight: 800;
  color: #fffdf3;
  text-transform: uppercase;
  letter-spacing: .4px;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  box-shadow:
    0 0 12px rgba(255, 79, 79, 0.45),
    inset 0 0 6px rgba(255, 255, 255, 0.18);
  transition: transform .12s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-primary:hover {
  filter: saturate(1.06);
  background: linear-gradient(90deg, #ff2d55 0%, #ff6a4b 50%, #ffd37a 100%);
  box-shadow:
    0 0 18px rgba(255, 79, 79, .65),
    inset 0 0 8px rgba(255,255,255,.22);
  transform: translateY(-2px);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow:
    0 0 12px rgba(255, 79, 79, .5),
    inset 0 0 6px rgba(255,255,255,.18);
}
.btn-primary:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(242,193,78,.25),
    0 0 18px rgba(255,79,79,.55),
    inset 0 0 6px rgba(255,255,255,.18);
}

/* Verbeterde tab-buttons */
.tab-toggle {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 1.6rem;
}
.tab-toggle button {
  background: linear-gradient(180deg, rgba(63, 38, 53, .9), rgba(52, 28, 45, .9));
  border: 1px solid rgba(209,168,94,.35);
  color: #f8e7f0;
  padding: 0.6rem 1.2rem;
  font-size: 15px;
  font-weight: 700;
  border-radius: 8px;
  transition: all 0.25s ease;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 3px 8px rgba(0,0,0,.4);
}
.tab-toggle button:hover {
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 79, 139, .35), rgba(63, 38, 53, .9));
  box-shadow: 0 0 8px rgba(255,79,139,.5);
}
.tab-toggle .active {
  background: linear-gradient(180deg, #5b2d3f, #3a152f);
  border: 1px solid var(--rpg-gold);
  color: #fff;
  box-shadow:
    0 0 12px rgba(242,193,78,.35),
    inset 0 0 6px rgba(255,255,255,.08);
}

/* Links */
.form-check-label, a { color: #f0cfe0; }
a:hover { color: #fff; }

/* Mascot overlay & bubble */
.mascot-overlay {
  position: fixed; inset: 0;
  background: radial-gradient(circle at center, rgba(60, 0, 0, .65), rgba(0, 0, 0, .8));
  backdrop-filter: blur(4px);
  z-index: 9998;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.mascot-bubble {
  position: fixed; right: 18px; bottom: 0;
  max-width: 480px; width: calc(100% - 36px);
  display: flex; gap: 12px; align-items: flex-end;
  z-index: 9999; transform: translateY(20px); opacity: 0;
  transition: transform .3s ease, opacity .3s ease; padding-bottom: 4px;
}
.mascot-avatar {
  width: 150px; height: 185px; flex: 0 0 150px;
  background: url('/images/hero.png') bottom center / contain no-repeat;
  align-self: flex-end; margin-bottom: -4px;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .35));
}
.mascot-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)),
    linear-gradient(145deg, rgba(242,193,78,.05), rgba(255,79,139,.03));
  color: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  position: relative;
  margin-bottom: 14px;
  border: 1px solid rgba(209,168,94,.45);
  box-shadow:
    0 10px 24px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.06);
}
.mascot-card::before {
  content: "";
  position: absolute; right: 100%; bottom: 34px;
  border: 8px solid transparent;
  border-right-color: rgba(209,168,94,.45);
}
.mascot-title { font-weight: 800; margin: 0 24px 4px 0; font-size: 16px; color: #ffe7a3; }
.mascot-text  { margin: 0; font-size: 14px; line-height: 1.45; color: #f3d9e7; }
.mascot-close { position: absolute; top:8px; right:8px; width:28px; height:28px; border:0; border-radius:999px; background: rgba(255,255,255,.10); color:#fff; cursor:pointer; transition: background .2s ease; }
.mascot-close:hover { background: rgba(255,255,255,.18); }
.mascot-actions { margin-top:14px; display:flex; justify-content:space-between; gap:10px; }
.mascot-btn { flex:1; border:none; border-radius:10px; padding:10px 0; font-weight:700; font-size:14px; text-align:center; transition: all .2s ease; text-decoration:none; }
.mascot-btn-primary { background: linear-gradient(180deg, var(--rpg-accent), var(--rpg-accent-2)); color:#fff; border:1px solid rgba(255,255,255,.12); }
.mascot-btn-primary:hover { filter: saturate(1.1); }

/* Show states */
.mascot-overlay.is-visible,
.mascot-bubble.is-visible { opacity: 1; pointer-events: auto; }
.mascot-bubble.is-visible  { transform: translateY(0); }

/* Toasts */
#toastContainer { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.toast { background:#3b273f; color:#fff; padding:14px 22px; border-radius:30px; font-size:15px; opacity:0; transform: translateY(20px); transition: all .3s ease; max-width:90vw; text-align:center; border:1px solid rgba(209,168,94,.35); }
.toast.show { opacity:1; transform: translateY(0); }
.toast.success { background: linear-gradient(180deg,#3ddc97,#25a06d); }
.toast.error   { background: linear-gradient(180deg,#e04973,#a12b4a); }
.toast.info    { background: linear-gradient(180deg,#8b5cf6,#5b21b6); }

/* ===== Alleen LOGIN-foutmeldingen in RPG-stijl ===== */
/* Gebruik een van deze class-combinaties in je markup:
   <div class="alert auth-error">..., of .alert.alert-danger, of .alert.auth-alert */
.login-container .alert.auth-error,
.login-container .alert.auth-alert,
.login-container .alert.alert-danger {
  border: 1px solid rgba(209,168,94,.45);
  border-radius: 12px;
  padding: 12px 16px;
  color: #fff;
  background: linear-gradient(180deg, #5a1220 0%, #8f1f33 55%, #c23e59 100%);
  backdrop-filter: blur(4px);
  box-shadow:
    0 10px 24px rgba(143,31,51,.35),
    inset 0 0 0 1px rgba(255,255,255,.06);
  text-align: center;
  font-weight: 700;
  margin-top: 14px;
}
.login-container .alert.auth-error a,
.login-container .alert.auth-alert a,
.login-container .alert.alert-danger a {
  color: #ffe7f1;
  text-decoration: underline;
}
.login-container .alert.auth-error a:hover,
.login-container .alert.auth-alert a:hover,
.login-container .alert.alert-danger a:hover {
  color: #ffffff;
}

/* Mobile tweaks */
@media (max-width: 420px) {
  .mascot-avatar { width:115px; height:135px; flex-basis:115px; margin-bottom:-6px; }
  .mascot-card   { margin-bottom:10px; }
  .mascot-card::before { bottom:26px; }
  .mascot-btn { font-size:13px; padding:8px 0; }
}

/* ===== VUUR PARTICLES – subtiel zwevend effect ===== */
.fire-particles {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 5; /* boven achtergrond, onder UI */
}
.fire-particles::before,
.fire-particles::after {
  content: "";
  position: absolute;
  width: 3px; height: 3px; border-radius: 50%;
  background: radial-gradient(circle, #ffb347 0%, #ff5722 60%, transparent 100%);
  box-shadow:
    0 0 8px 2px rgba(255, 120, 40, 0.35),
    0 0 16px 6px rgba(255, 60, 0, 0.15);
  animation: fireFloat 6s linear infinite;
}
.fire-particles::before {
  animation-duration: 8s;
  box-shadow:
    100px 800px rgba(255,140,60,.6),
    250px 700px rgba(255,120,40,.7),
    450px 950px rgba(255,100,20,.55),
    620px 830px rgba(255,160,80,.5),
    800px 900px rgba(255,200,100,.4),
    950px 860px rgba(255,140,60,.65),
    1100px 870px rgba(255,180,80,.45);
}
.fire-particles::after {
  animation-delay: 3s;
  box-shadow:
    150px 900px rgba(255,120,40,.7),
    330px 950px rgba(255,100,30,.5),
    580px 880px rgba(255,160,90,.6),
    770px 950px rgba(255,120,40,.75),
    930px 900px rgba(255,200,110,.5),
    1050px 950px rgba(255,150,70,.55),
    1200px 880px rgba(255,130,50,.65);
}
@keyframes fireFloat {
  0% { transform: translateY(0) scale(1); opacity: .4; }
  25%{ transform: translateY(-150px) scale(1.1); opacity: .8; }
  50%{ transform: translateY(-300px) scale(.9); opacity: .7; }
  75%{ transform: translateY(-450px) scale(1.2); opacity: .6; }
  100%{transform: translateY(-600px) scale(.8); opacity: 0; }
}