:root {
  --fenra-primary: #b3e5fc;
  --fenra-accent: #ffd1dc;
  --fenra-glitter: #fceef5;
  --fenra-font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji";
  --fenra-font-size: 16px;
  --fenra-shine-duration: 2.2s;
  --fenra-radius: 16px;
  --fenra-shadow: 0 10px 30px rgba(255, 182, 193, 0.35);
  --fenra-btn-radius: 999px;
  --fenra-btn-shadow: 0 6px 16px rgba(255, 182, 193, 0.45);
  /* Extras de personalización */
  --fenra-container-max-width: 720px;
  --fenra-container-min-height: 360px;
  --fenra-grid-columns: 3;
  --fenra-border-color: #e6cfe0;
  --fenra-border-width: 0px;
  --fenra-btn-border-color: #e6cfe0;
  --fenra-btn-border-width: 0px;
  --fenra-shine-opacity: 0.6;
  --fenra-sparkle-size: 8px;
  /* Estado activo del botón */
  --fenra-btn-active-accent: var(--fenra-accent);
}

#fenra-bot-root {
  font-family: var(--fenra-font-family);
  color: #3b3b3b;
  font-size: var(--fenra-font-size);
}

.fenra-container {
  max-width: var(--fenra-container-max-width);
  margin: 24px auto;
  padding: 24px;
  border-radius: var(--fenra-radius);
  background: linear-gradient(135deg, var(--fenra-primary), var(--fenra-accent));
  box-shadow: var(--fenra-shadow);
  position: relative;
  overflow: hidden;
  min-height: var(--fenra-container-min-height);
  border: var(--fenra-border-width) solid var(--fenra-border-color);
}

.fenra-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.fenra-header img {
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* Emoji de lobo como alternativa al ícono */
.fenra-header .wolf-emoji {
  font-size: 44px;
  line-height: 1;
  display: inline-block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.fenra-title {
  font-weight: 700;
  font-size: 1.1rem;
}

.fenra-actions {
  margin-top: 16px;
}

.fenra-btn {
  display: inline-block;
  padding: 12px 18px;
  border-radius: var(--fenra-btn-radius);
  background: var(--fenra-accent);
  color: #333;
  border: var(--fenra-btn-border-width) solid var(--fenra-btn-border-color);
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
  box-shadow: var(--fenra-btn-shadow);
  position: relative;
  overflow: hidden;
}

.fenra-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.fenra-btn:hover { transform: translateY(-1px); }

/* Estado activo del botón cuando el formulario está válido */
.fenra-btn.active {
  background: var(--fenra-btn-active-accent, var(--fenra-accent));
  box-shadow: 0 8px 18px rgba(255, 182, 193, 0.55);
}

.fenra-form { margin-top: 16px; }
.fenra-form label { display:block; margin: 8px 0 4px; font-weight:600; }
.fenra-form input, .fenra-form select {
  width: 100%; padding: 10px; border-radius: 10px; border: 1px solid #e6cfe0;
}

.fenra-hint { font-size: 0.9rem; margin-top: 8px; }
.fenra-grid { display: grid; grid-template-columns: repeat(var(--fenra-grid-columns), 1fr); gap: 10px; margin-top: 12px; }
.fenra-emotion { 
  display:flex; align-items:center; gap:8px; padding:10px; border-radius:12px; background:#fff7fb; cursor:pointer;
  border:2px solid transparent; transition:border-color 160ms ease, transform 160ms ease; user-select:none;
}
.fenra-emotion:hover { transform: translateY(-1px); }
.fenra-emotion.selected { border-color:#ffb3c6; box-shadow: 0 6px 14px rgba(255, 182, 193, 0.3); }

.fenra-output {
  margin-top: 18px; padding: 16px; background: #ffffffcc; border-radius: 12px; box-shadow: inset 0 0 0 2px #f6d6e7;
}

/* Purpurina / brillo */
.sparkle-container { position: absolute; inset: 0; pointer-events: none; }
.sparkle {
  position: absolute; width: var(--fenra-sparkle-size); height: var(--fenra-sparkle-size); background: var(--fenra-glitter);
  border-radius: 50%; box-shadow: 0 0 12px var(--fenra-glitter);
  animation: sparkle-fly 700ms ease-out forwards;
}
@keyframes sparkle-fly {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--x, 40px), var(--y, -40px)) scale(0.2); opacity: 0; }
}

/* Brillo en botones */
.fenra-btn::after {
  content:""; position:absolute; top:0; left:-40%; width:40%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: skewX(-20deg); animation: shine var(--fenra-shine-duration) infinite; opacity: var(--fenra-shine-opacity);
}
@keyframes shine {
  0% { left:-40%; }
  100% { left:120%; }
}