/* ====================================================================
   TALMONSTRENE — Stylesheet
   ==================================================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Georgia', serif;
  -webkit-user-select: none;
  user-select: none;
}

body {
  background: #1a1640;
  color: #fff;
  /* Centrér app-vinduet på brede skærme */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  /* Subtil gradient i sidekanten på store skærme — gør "tomheden" til en feature */
  background: radial-gradient(ellipse at center, #2a1f5a 0%, #1a1640 60%, #0a0820 100%);
}

/* ====================================================================
   APP-CONTAINER
   ==================================================================== */

#app {
  position: relative;
  width: 100vw;
  height: 100vh;
  max-width: 1200px;
  max-height: 100vh;
  /* Sikrer at app-containeren altid har et fornuftigt forhold */
  aspect-ratio: 16 / 10;
  overflow: hidden;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.6);
}

/* På smalle skærme (telefon): bryd aspect-ratio så den fylder hele skærmen */
@media (max-width: 768px) {
  #app {
    aspect-ratio: auto;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
  }
}

/* På meget brede skærme: behold højden ift. bredden */
@media (min-aspect-ratio: 16/9) {
  #app {
    height: 100vh;
    width: auto;
    max-width: min(1200px, 90vw);
  }
}

.scene {
  position: absolute;
  inset: 0;
  display: none;
  transition: opacity 0.4s ease;
}

.scene.active {
  display: block;
}

.scene.fading-out {
  opacity: 0;
}

/* ====================================================================
   ANIMATIONER
   ==================================================================== */

@keyframes float-slow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes float-med { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes twinkle { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes glow-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } }
@keyframes leaf-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes bounce-happy { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-12px) scale(1.05); } }
@keyframes shake-no { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes shine-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes coin-rise { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(0, -60px) scale(0.6); opacity: 0; } }
@keyframes fade-in-up { 0% { transform: translateY(10px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes pulse-soft { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes wild-monster-glow { 0%, 100% { box-shadow: 0 0 20px rgba(255,215,0,0.5); } 50% { box-shadow: 0 0 40px rgba(255,215,0,0.9); } }

.monster-floater { animation: float-slow 3.5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.monster-bouncer { animation: bounce-happy 0.6s ease-in-out infinite; transform-origin: center bottom; transform-box: fill-box; }
.monster-shaker { animation: shake-no 0.4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.twinkler { animation: twinkle 2.5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.glower { animation: glow-pulse 3s ease-in-out infinite; }
.leaves { animation: leaf-sway 5s ease-in-out infinite; transform-origin: center bottom; transform-box: fill-box; }

/* ====================================================================
   HUD (TOP-BAR) — Sofias kort, mønter, hjerter
   ==================================================================== */

.hud-top {
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 10;
  pointer-events: auto;
}

.avatar-card {
  background: rgba(20, 14, 40, 0.78);
  border: 1.5px solid rgba(255, 215, 0, 0.45);
  border-radius: 12px;
  padding: 8px 14px 8px 8px;
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar-image {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffc7da, #b85a7a);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255, 215, 0, 0.6);
  overflow: hidden;
}

.avatar-info { display: flex; flex-direction: column; }
.avatar-name { color: #fff; font-size: 13px; font-weight: 700; line-height: 1; }
.avatar-title { color: #ffd700; font-size: 10px; margin-top: 3px; letter-spacing: 1px; }

.hud-right {
  display: flex;
  gap: 8px;
}

.hud-pill {
  background: rgba(20, 14, 40, 0.78);
  border-radius: 10px;
  padding: 6px 12px;
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  gap: 6px;
}

.hud-pill.moenter { border: 1.5px solid rgba(255, 215, 0, 0.45); }
.hud-pill.hjerter { border: 1.5px solid rgba(255, 100, 130, 0.45); gap: 3px; }

.moenter-tal { color: #ffd700; font-size: 15px; font-weight: 700; }

/* ====================================================================
   FREMGANGSLINJE (UNDER HUD)
   ==================================================================== */

.dagens-maal {
  position: absolute;
  top: 76px;
  left: 18px;
  z-index: 10;
  background: rgba(20, 14, 40, 0.65);
  border: 1px solid rgba(159, 225, 203, 0.35);
  border-radius: 8px;
  padding: 5px 12px;
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  gap: 8px;
}

.dagens-maal-label { font-size: 10px; color: #9fe1cb; letter-spacing: 1.5px; }
.dagens-maal-bar { width: 110px; height: 7px; background: rgba(0,0,0,0.5); border-radius: 4px; overflow: hidden; border: 0.5px solid rgba(159, 225, 203, 0.3); }
.dagens-maal-fill { height: 100%; background: linear-gradient(90deg, #9fe1cb, #3a7050); border-radius: 4px; transition: width 0.5s ease; }
.dagens-maal-tal { color: #c0dd97; font-size: 11px; font-weight: 700; }

/* ====================================================================
   BUND-NAVIGATION
   ==================================================================== */

.hud-bund {
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 10;
}

.bund-knapper-venstre { display: flex; gap: 8px; }

.bund-knap {
  background: linear-gradient(180deg, rgba(60, 40, 100, 0.9), rgba(40, 20, 70, 0.9));
  border: 1.5px solid rgba(255, 215, 0, 0.4);
  border-radius: 12px;
  padding: 6px 10px;
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 54px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bund-knap:hover { transform: translateY(-3px) scale(1.04); filter: brightness(1.15); }
.bund-knap:active { transform: translateY(0) scale(0.96); }

.bund-knap-label { font-size: 9px; margin-top: 2px; font-weight: 600; }

.spil-knap {
  background: linear-gradient(180deg, #ffd700, #c89020);
  border: 2px solid #fff;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.spil-knap:hover { transform: translateY(-3px) scale(1.05); filter: brightness(1.1); }
.spil-knap:active { transform: translateY(0) scale(0.95); }

.spil-knap-label {
  color: #5a2010;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-top: -3px;
}

.bund-knapper-hoejre { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }

.ikon-knap {
  background: rgba(20, 14, 40, 0.8);
  border: 1.5px solid rgba(200, 168, 255, 0.4);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  cursor: pointer;
}

/* ====================================================================
   OPGAVE-SKÆRM
   ==================================================================== */

.opgave-scene {
  background: linear-gradient(180deg, #2a1a5e 0%, #4a2e8a 50%, #3a2a70 100%);
}

.opgave-monster-container {
  position: absolute;
  bottom: 140px;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 180px;
  z-index: 5;
}

.opgave-tale-wrapper {
  position: absolute;
  top: 145px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
  padding: 0 10%;
  will-change: contents;
  contain: layout style;
}

.opgave-tale-boble {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #ed93b1;
  border-radius: 16px;
  padding: 14px 26px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
  position: relative;
  text-align: center;
  max-width: 90%;
  pointer-events: auto;
  /* Animation kun på opacity — ingen transform eller positions-ændring */
  animation: tale-boble-fade-in 0.4s ease-out;
  will-change: opacity;
}

@keyframes tale-boble-fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.opgave-tale-boble::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid #ed93b1;
}

.opgave-tale-boble::before {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgba(255, 255, 255, 0.95);
  z-index: 1;
}

.opgave-label {
  color: #b85a7a;
  font-size: 10px;
  letter-spacing: 2px;
  margin-bottom: 4px;
}

.opgave-sporg {
  color: #2a1a3a;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 2px;
}

/* Svar-knapper */
.svar-container {
  position: absolute;
  bottom: 100px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 14px;
  z-index: 5;
}

.svar-knap {
  background: linear-gradient(180deg, #5a8acc, #1a3870);
  border: 2px solid #b5d4f4;
  border-radius: 14px;
  padding: 12px 28px;
  min-width: 80px;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  font-family: Georgia, serif;
}

.svar-knap:hover { transform: translateY(-4px) scale(1.04); filter: brightness(1.15); }
.svar-knap:active { transform: translateY(0) scale(0.96); }
.svar-knap.deaktiv { pointer-events: none; opacity: 0.4; }
.svar-knap.rigtigt {
  background: linear-gradient(180deg, #7ac49a, #3a7050);
  border-color: #c0dd97;
  box-shadow: 0 0 20px rgba(159, 225, 203, 0.6);
}
.svar-knap.forkert {
  background: linear-gradient(180deg, #c46060, #803030);
  border-color: #f0a0a0;
  opacity: 0.7;
}

/* Feedback banner */
.feedback-banner {
  position: absolute;
  bottom: 330px;
  left: 50%;
  padding: 10px 28px;
  border-radius: 20px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1.5px;
  z-index: 20;
  pointer-events: none;
  animation: feedback-fade-in 0.4s ease-out;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  transform: translateX(-50%);
  white-space: nowrap;
}

@keyframes feedback-fade-in {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.7); }
  60%  { opacity: 1; transform: translateX(-50%) scale(1.1); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

.feedback-banner.rigtigt {
  background: linear-gradient(180deg, rgba(159, 225, 203, 0.95), rgba(58, 112, 80, 0.9));
  border: 2px solid #fff;
  color: #fff;
  box-shadow: 0 8px 20px rgba(58, 112, 80, 0.5);
}

.feedback-banner.forkert {
  background: linear-gradient(180deg, rgba(244, 192, 209, 0.95), rgba(184, 90, 122, 0.9));
  border: 2px solid #fff;
  color: #fff;
  box-shadow: 0 8px 20px rgba(184, 90, 122, 0.5);
}

/* Stigende mønter */
.stigende-moent {
  position: absolute;
  width: 24px;
  height: 24px;
  animation: coin-rise 1.2s ease-out forwards;
  pointer-events: none;
  z-index: 15;
}

/* Stjerne-stråler ved rigtigt svar */
.shine-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  /* Brug translate-property og rotate-property separat — undgår transform-konflikt */
  translate: -50% -50%;
  animation: shine-rotate-fixed 4s linear;
  pointer-events: none;
  z-index: 6;
}

@keyframes shine-rotate-fixed {
  0%   { rotate: 0deg; }
  100% { rotate: 360deg; }
}

/* ====================================================================
   FANG-MONSTER OVERLAY
   ==================================================================== */

.fang-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 14, 40, 0.92);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  animation: fade-in-up 0.5s ease-out;
}

.fang-overlay.active { display: flex; }

.fang-modal {
  background: linear-gradient(180deg, #4a2e8a, #2a1a5e);
  border: 2px solid #ffd700;
  border-radius: 20px;
  padding: 28px;
  max-width: 460px;
  text-align: center;
  box-shadow: 0 0 40px rgba(255, 215, 0, 0.4);
}

.fang-titel {
  color: #ffd700;
  font-size: 20px;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.fang-monster-navn {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
}

.fang-monster-billede {
  width: 180px;
  height: 180px;
  margin: 12px auto;
  animation: wild-monster-glow 2s ease-in-out infinite;
  border-radius: 50%;
  padding: 10px;
}

.fang-besked {
  color: #c8a8ff;
  font-size: 14px;
  margin-bottom: 18px;
  line-height: 1.5;
}

.fang-knap {
  background: linear-gradient(180deg, #ffd700, #c89020);
  border: 2px solid #fff;
  border-radius: 12px;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 700;
  color: #5a2010;
  cursor: pointer;
  font-family: Georgia, serif;
  transition: all 0.18s ease;
}

.fang-knap:hover { transform: translateY(-2px) scale(1.04); }
.fang-knap.afvis {
  background: rgba(60, 40, 100, 0.9);
  border-color: #c8a8ff;
  color: #c8a8ff;
  margin-right: 10px;
}

/* ====================================================================
   GALLERI
   ==================================================================== */

.galleri-scene {
  background: linear-gradient(180deg, #1a1640, #2d1b4e);
  overflow-y: auto;
  display: none;
}

.galleri-scene.active { display: block; }

.galleri-header {
  position: sticky;
  top: 0;
  background: rgba(26, 22, 64, 0.95);
  padding: 18px;
  z-index: 10;
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.galleri-header h2 {
  color: #f4c0d1;
  font-size: 22px;
  text-align: center;
  margin: 0;
}

.galleri-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
  padding: 18px;
}

.galleri-kort {
  background: linear-gradient(180deg, rgba(60, 40, 100, 0.6), rgba(40, 20, 70, 0.6));
  border: 1.5px solid rgba(255, 215, 0, 0.3);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  transition: all 0.3s ease;
}

.galleri-kort:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 215, 0, 0.6);
}

.galleri-kort.laast {
  opacity: 0.3;
  filter: grayscale(80%);
}

.galleri-navn {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  margin-top: 8px;
}

.galleri-stadie {
  color: #ffd700;
  font-size: 9px;
  letter-spacing: 1.5px;
  margin-top: 2px;
}

/* ====================================================================
   AVATAR I HUD
   ==================================================================== */

.avatar-image svg {
  width: 36px;
  height: 36px;
  margin-top: 4px;
}

/* ====================================================================
   STARTSCENE — Velkommen
   ==================================================================== */

.start-scene {
  background: linear-gradient(180deg, #2a1a5e 0%, #4a2e8a 50%, #3a2a70 100%);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
}

.start-scene.active { display: flex; }

.start-titel {
  font-size: 42px;
  color: #f4c0d1;
  margin-bottom: 20px;
  text-align: center;
  font-weight: 700;
  letter-spacing: 2px;
  text-shadow: 0 4px 20px rgba(244, 192, 209, 0.4);
}

.start-undertitel {
  color: #c8a8ff;
  font-size: 16px;
  margin-bottom: 30px;
  font-style: italic;
}

.start-input {
  background: rgba(20, 14, 40, 0.78);
  border: 2px solid rgba(255, 215, 0, 0.4);
  border-radius: 12px;
  padding: 12px 20px;
  font-size: 18px;
  color: #fff;
  text-align: center;
  margin-bottom: 20px;
  width: 250px;
  font-family: Georgia, serif;
}

.start-knap {
  background: linear-gradient(180deg, #ffd700, #c89020);
  border: 2px solid #fff;
  border-radius: 16px;
  padding: 14px 36px;
  font-size: 18px;
  font-weight: 700;
  color: #5a2010;
  cursor: pointer;
  font-family: Georgia, serif;
  transition: all 0.2s ease;
}

.start-knap:hover { transform: translateY(-3px) scale(1.05); }

/* ====================================================================
   RESPONSIVE
   ==================================================================== */

@media (max-width: 600px) {
  .opgave-sporg { font-size: 28px; }
  .svar-knap { font-size: 22px; padding: 10px 22px; min-width: 70px; }
  .start-titel { font-size: 32px; }
}

/* ====================================================================
   BUTIK & PÅKLÆDNING
   ==================================================================== */

.butik-scene, .paaklaedning-scene {
  background: linear-gradient(180deg, #1a1640, #2d1b4e);
  overflow-y: auto;
  display: none;
}
.butik-scene.active, .paaklaedning-scene.active { display: block; }

.butik-header {
  position: sticky;
  top: 0;
  background: rgba(26, 22, 64, 0.95);
  padding: 16px 20px;
  z-index: 10;
  border-bottom: 1px solid rgba(255, 215, 0, 0.3);
  display: flex;
  align-items: center;
  backdrop-filter: blur(6px);
}

.butik-header h2 {
  font-size: 22px;
  margin: 0;
  letter-spacing: 1px;
}

.butik-kategorier {
  display: flex;
  gap: 6px;
  padding: 14px 20px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.butik-kategori-knap, .paaklaedning-kategori-knap {
  background: rgba(40, 25, 70, 0.7);
  border: 1.5px solid rgba(200, 168, 255, 0.3);
  color: #c8a8ff;
  padding: 8px 18px;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: Georgia, serif;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.butik-kategori-knap:hover, .paaklaedning-kategori-knap:hover {
  border-color: #ffd700;
  color: #fff;
}

.butik-kategori-knap.aktiv, .paaklaedning-kategori-knap.aktiv {
  background: linear-gradient(180deg, #ffd700, #c89020);
  color: #5a2010;
  border-color: #fff;
}

.butik-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  padding: 18px 20px 100px;
}

.butik-kort {
  background: linear-gradient(180deg, rgba(60, 40, 100, 0.7), rgba(40, 20, 70, 0.7));
  border: 2px solid;
  border-radius: 14px;
  padding: 14px 12px;
  text-align: center;
  transition: all 0.2s ease;
  position: relative;
}

.butik-kort:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.butik-kort.ejer { opacity: 0.6; }
.butik-kort.ikke-raad .butik-kort-koeb { opacity: 0.4; }

.butik-kort-preview {
  width: 80px;
  height: 80px;
  margin: 0 auto 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.butik-kort-preview svg { width: 100%; height: 100%; }

.butik-kort-navn {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.butik-kort-sjaeldenhed {
  font-size: 11px;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.butik-kort-koeb {
  background: linear-gradient(180deg, #ffd700, #c89020);
  border: 2px solid #fff;
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #5a2010;
  cursor: pointer;
  font-family: Georgia, serif;
  width: 100%;
}

.butik-kort-koeb.deaktiv { cursor: not-allowed; }
.butik-kort-koeb:not(.deaktiv):hover { transform: scale(1.04); }

.butik-kort-ejer {
  background: rgba(60, 100, 80, 0.7);
  border: 1.5px solid #9fe1cb;
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #c0dd97;
  text-align: center;
}

/* Påklædning */

.paaklaedning-display {
  background: radial-gradient(ellipse at center bottom, rgba(244, 192, 209, 0.15), transparent);
  padding: 30px 20px 20px;
  display: flex;
  justify-content: center;
}

.paaklaedning-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
  padding: 18px 20px 100px;
}

.paaklaedning-item {
  background: linear-gradient(180deg, rgba(60, 40, 100, 0.7), rgba(40, 20, 70, 0.7));
  border: 2px solid rgba(200, 168, 255, 0.3);
  border-radius: 12px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.paaklaedning-item:hover {
  border-color: #ffd700;
  transform: translateY(-2px);
}

.paaklaedning-item.aktiv {
  border-color: #ffd700;
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.25), rgba(200, 144, 32, 0.2));
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.4);
}

.paaklaedning-item-preview {
  width: 60px;
  height: 60px;
  margin: 0 auto 6px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  overflow: hidden;
}

.paaklaedning-item-preview svg { width: 100%; height: 100%; }

.paaklaedning-item-navn {
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}

/* ====================================================================
   MONSTRE I MONSTERHJEM-SCENEN
   — Skal være klikbare selvom container har pointer-events: none
   ==================================================================== */

.hjem-monster {
  pointer-events: auto;
  transition: transform 0.2s ease;
}

.hjem-monster:hover {
  transform: translate(-50%, -50%) scale(1.08) !important;
  z-index: 5;
}

.hjem-monster:active {
  transform: translate(-50%, -50%) scale(0.95) !important;
}

/* ====================================================================
   KLÆD-PÅ-KNAP I GALLERI
   ==================================================================== */

.galleri-klaed-knap {
  display: block;
  width: 100%;
  margin-top: 10px;
  background: linear-gradient(180deg, #ffd700, #c89020);
  border: 2px solid #fff;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #5a2010;
  cursor: pointer;
  font-family: Georgia, serif;
  letter-spacing: 1px;
  transition: all 0.18s ease;
}

.galleri-klaed-knap:hover {
  transform: scale(1.04);
  filter: brightness(1.1);
}

.galleri-klaed-knap:active {
  transform: scale(0.96);
}

/* ====================================================================
   KØB-FEJRING BANNER MED KNAPPER
   ==================================================================== */

/* Køb-fejring bruger overlay-wrapper-mønstret */
.koeb-fejring-banner {
  background: linear-gradient(180deg, #ffe18a, #ffd700);
  border: 3px solid #fff;
  border-radius: 20px;
  padding: 24px 30px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(255, 215, 0, 0.5), 0 0 80px rgba(255, 215, 0, 0.3);
  animation: pop-in 0.4s cubic-bezier(0.2, 0.8, 0.4, 1.2);
  max-width: 320px;
  pointer-events: auto;
}

@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.7); }
  60%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

.koeb-fejring-knap {
  display: block;
  width: 100%;
  margin: 6px 0;
  background: linear-gradient(180deg, #d32030, #801020);
  border: 2px solid #fff;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  font-family: Georgia, serif;
  letter-spacing: 1px;
  transition: all 0.18s ease;
}

.koeb-fejring-knap.sekundaer {
  background: transparent;
  border-color: #5a2010;
  color: #5a2010;
}

.koeb-fejring-knap:hover {
  transform: scale(1.03);
  filter: brightness(1.05);
}

.koeb-fejring-knap:active {
  transform: scale(0.97);
}

/* ====================================================================
   MODAL (NULSTIL OG LIGNENDE)
   ==================================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 14, 40, 0.85);
  backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fade-in-up 0.3s ease-out;
  padding: 20px;
}

.modal-boks {
  background: linear-gradient(180deg, #4a2e8a, #2a1a5e);
  border: 2px solid #c8a8ff;
  border-radius: 18px;
  padding: 28px 26px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  /* Pop-in animation — transform er sikker her fordi wrapper'en bruger flexbox */
  animation: pop-in 0.4s cubic-bezier(0.2, 0.8, 0.4, 1.2);
}

.modal-titel {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 14px;
  font-family: Georgia, serif;
}

.modal-tekst {
  color: #c8a8ff;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 22px;
}

.modal-knapper {
  display: flex;
  gap: 10px;
  flex-direction: column;
}

.modal-knap {
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  font-family: Georgia, serif;
  letter-spacing: 0.5px;
  transition: all 0.18s ease;
  border: 2px solid;
}

.modal-knap-bekraeft {
  background: linear-gradient(180deg, #d32030, #801020);
  border-color: #ff8090;
  color: #fff;
}

.modal-knap-afbryd {
  background: rgba(60, 40, 100, 0.5);
  border-color: #c8a8ff;
  color: #c8a8ff;
}

.modal-knap:hover { transform: translateY(-2px); filter: brightness(1.1); }
.modal-knap:active { transform: translateY(0); }

/* ====================================================================
   SVAR-FEEDBACK ANIMATIONER
   ==================================================================== */

/* Konfetti-partikel der flyver ud fra monstret */
@keyframes konfetti-fly {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1);
    opacity: 0;
  }
}

.konfetti-partikel {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 8;
  animation: konfetti-fly 1.4s cubic-bezier(0.15, 0.5, 0.4, 1) forwards;
}

/* Grøn glød pulse omkring monstret når svaret er rigtigt */
@keyframes succes-glow {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  35%  { opacity: 0.7; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}

.succes-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(159, 225, 203, 0.65) 0%, rgba(58, 112, 80, 0.3) 50%, transparent 70%);
  pointer-events: none;
  z-index: 4;
  animation: succes-glow 1.1s ease-out forwards;
}

/* Trist-tilstand på monstret når svaret er forkert */
@keyframes monster-trist {
  0%   { filter: none; transform: translateY(0) scale(1) rotate(0deg); }
  20%  { filter: saturate(0.5) brightness(0.85); transform: translateY(4px) scale(0.95) rotate(-3deg); }
  60%  { filter: saturate(0.5) brightness(0.85); transform: translateY(6px) scale(0.94) rotate(2deg); }
  100% { filter: none; transform: translateY(0) scale(1) rotate(0deg); }
}

.monster-trist {
  animation: monster-trist 1.6s ease-in-out;
  transform-origin: center bottom;
  transform-box: fill-box;
}

/* Empati-tåre (lille blå dråbe) der dukker op et øjeblik */
@keyframes empati-taare {
  0%   { opacity: 0; transform: translate(-50%, -10px) scale(0.5); }
  30%  { opacity: 0.85; transform: translate(-50%, 0) scale(1); }
  80%  { opacity: 0.85; transform: translate(-50%, 14px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, 24px) scale(0.8); }
}

.empati-taare {
  position: absolute;
  left: 50%;
  top: 35%;
  width: 14px;
  height: 18px;
  pointer-events: none;
  z-index: 7;
  animation: empati-taare 1.6s ease-in-out forwards;
}

/* Rødt rygt-pulse (subtilt) for forkert */
@keyframes fejl-puls {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  30%  { opacity: 0.35; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
}

.fejl-puls {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 192, 209, 0.45) 0%, rgba(184, 90, 122, 0.2) 50%, transparent 70%);
  pointer-events: none;
  z-index: 4;
  animation: fejl-puls 1.3s ease-out forwards;
}

/* ====================================================================
   SVÆVENDE MONSTRE I MONSTERHJEM
   — Får en blødere, længere svæve-bevægelse end de der står på jorden
   ==================================================================== */

@keyframes svaeve-luft {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}

.hjem-monster-svaevende {
  animation: svaeve-luft 4.5s ease-in-out infinite;
}

.hjem-monster-svaevende:hover {
  animation-play-state: paused;
}

/* ====================================================================
   STRUKTURELT MØNSTER FOR CENTREREDE OVERLAYS
   --------------------------------------------------------------------
   Et generelt fix: alle popups, bannere og dialoger skal bruge dette
   mønster i stedet for transform-baseret centrering.

   Wrapper'en centrerer indholdet via flexbox, så indholdet er FRIT til
   at bruge transform i sine animationer uden at ødelægge sin position.

   BRUG:
   <div class="overlay-wrapper">
     <div class="overlay-indhold-fri-animation">...</div>
   </div>

   ELLER for inline-styling, gør parent flex og lad child animere frit.
   ==================================================================== */

.overlay-wrapper {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  pointer-events: none;
  padding: 20px;
}

.overlay-wrapper.med-baggrund {
  background: rgba(20, 14, 40, 0.85);
  backdrop-filter: blur(6px);
  pointer-events: auto;
  animation: overlay-baggrund-fade 0.3s ease-out;
}

@keyframes overlay-baggrund-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.overlay-indhold {
  pointer-events: auto;
  max-width: 100%;
  /* Indholdet kan nu trygt bruge transform til animation */
}

/* ====================================================================
   BUTIK MONSTER-TABS
   ==================================================================== */

#butik-monster-tabs {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  overflow-x: auto;
  scrollbar-width: thin;
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.butik-monster-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(40, 25, 80, 0.5);
  border: 2px solid rgba(200, 168, 255, 0.3);
  border-radius: 12px;
  padding: 6px 10px;
  cursor: pointer;
  min-width: 70px;
  transition: all 0.2s ease;
  font-family: inherit;
}

.butik-monster-tab:hover {
  border-color: rgba(255, 215, 0, 0.5);
  transform: translateY(-2px);
}

.butik-monster-tab.aktiv {
  background: rgba(80, 50, 140, 0.7);
  border-color: #ffd700;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.butik-monster-tab-ikon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.butik-monster-tab-navn {
  color: #fff;
  font-size: 10px;
  margin-top: 2px;
  text-align: center;
  white-space: nowrap;
}