:root {
  --yellow: #ffc04b;
  --gold: #947434;
  --gold-dark: #47391c;
  --sand: #494643;
  --white-1: #ffffff;
  --light: #dfdfdf;
  --grey-text: #9b9b9b;
  --grey-stroke: #8d8d8d;
  --grey: #464443;
  --dark-grey: #181717;
}
/* Tvingar bort de blå linjerna på sidorna i Webflow-formulär */
  .w-input:focus, 
  .w-input[data-name]:focus,
  .w-select:focus,
  .submit-button:focus-visible {
    border-color: var(--yellow, #ffc04b) !important; /* Ändra färg eller osynlig */
    box-shadow: none !important;               /* Tar bort eventuell blå glöd */
  }
  
  /* 2. Change the text selection highlight color site-wide */
  ::selection {
    background-color: var(--yellow, #ffc04b);
    color: #111111; /* Makes the text dark when highlighted so it's readable against the yellow/orange */
  }

  /* Fallback for older Firefox browsers */
  ::-moz-selection {
    background-color: var(--yellow, #ffc04b);
    color: #111111;
  }
  
/* Disable text selection everywhere by default */
* {
  user-select: none;
  -webkit-user-select: none;
}

/* Remove default browser focus outline globally */
*:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Re-enable selection/interaction only where it makes sense */
input,
textarea,
[contenteditable],
.w-input,
.w-select,
.form-block-contact,
.submit-button {
  user-select: text !important;
  -webkit-user-select: text !important;
  pointer-events: auto !important;
}

/* Tvinga knappar och inputs att alltid fungera */
input, textarea, button, .w-button, #submit-btn-vanilla {
  user-select: text !important;
  -webkit-user-select: text !important;
  pointer-events: auto !important;
}

/* 1. Avstavning och Mobil-fixar */
* {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  -webkit-tap-highlight-color: transparent;

  /* Tvingar fram mjukare text i Chrome på 1080p-skärmar */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Göm scrollbar för både clipping och games-grid-clip */
.clipping, 
.games-grid-clip {
  -ms-overflow-style: none;  /* IE/Edge */
  scrollbar-width: none;     /* Firefox */
}

.clipping::-webkit-scrollbar, 
.games-grid-clip::-webkit-scrollbar { 
  display: none;             /* Chrome/Safari */
}

/* Games mask */
.games-grid-clip {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 11%,
    black 21%,
    black 90%,
    transparent 100
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 11%,
    black 21%,
    black 90%,
    transparent 100%
  );
}
  
/* Den nya masken som aktiveras när menyn är öppen */
body .games-grid-clip.is-skewed {
  -webkit-mask-image: 
    linear-gradient(50deg, black 30%, transparent 76%),
    linear-gradient(to bottom, transparent 11%, black 21%, black 90%, transparent 100%);
  
  mask-image: 
    linear-gradient(50deg, black 30%, transparent 76%),
    linear-gradient(to bottom, transparent 11%, black 21%, black 90%, transparent 100%);
  
  -webkit-mask-composite: source-in;
  mask-composite: intersect;        
  
  transition: -webkit-mask-image 400ms ease, mask-image 400ms ease;
}

/* ── LJUDKNAPP (Containern) ── */
#toggle-audio {
  position: relative; 
  display: flex !important;
  justify-content: center;
  align-items: center;
  cursor: pointer !important;
  
  /* Bas-tillstånd: använd 'scale' egenskapen */
  scale: 1;
  transition: scale 150ms ease-out, opacity 1s ease !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#toggle-audio.is-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ── HOVER (Nu använder vi 'scale' egenskapen, inte transform) ── */
#toggle-audio:hover {
  scale: 1.2;
}

/* ── KLICK-ANIMATION (Här kör vi transform, som läggs PÅ TOPPEN) ── */
@keyframes clickStretch {
  0% { transform: scale(1); } /* Startar från 1 relativt till hovern */
  50% { transform: scale(1.3, 1); } /* Bred stretch */
  100% { transform: scale(1); }
}

#toggle-audio.is-clicked {
  /* Här kör vi animationen. Den kommer att "stretchas" utöver din hover-skala */
  animation: clickStretch 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ── IKON-ANIMATION ── */
/* 1. Puls */
@keyframes iconPulse {
  0%, 100% { scale: 1; }
  50% { scale: 1.2; }
}

/* 2. Gung */
@keyframes iconSwing {
  0%, 100% { rotate: -7deg; }
  50% { rotate: 7deg; }
}

.sound-icon-on {
  position: absolute;
  /* Vi använder EGENSKAPERNA scale/rotate, inte transform */
  transition: opacity 0.3s ease;
  transform-origin: center center;
}

/* ── LOGIK ── */
#toggle-audio:not(.is-muted) .sound-icon-on {
  opacity: 1 !important;
  pointer-events: auto;
  /* Här kör vi två oberoende animationer. De krockar inte med något annat! */
  animation: 
    iconPulse 1s ease-in-out infinite, 
    iconSwing 4s ease-in-out infinite;
}

#toggle-audio.is-muted .sound-icon-on { opacity: 0 !important; pointer-events: none; animation: none; }
#toggle-audio.is-muted .sound-icon-off { opacity: 1 !important; pointer-events: auto; }
#toggle-audio:not(.is-muted) .sound-icon-off { opacity: 0 !important; pointer-events: none; }

  /* ── NOISE-BILDER (Gör dem osynliga och absolut positionerade) ── */
.noise-big, 
.noise-small {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: none; /* Vi styr allt via animation */
}

/* ── ANIMATION FÖR NOISE (Flashar till) ── */
@keyframes noiseFlash {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

#toggle-audio.is-animating .noise-big { 
  animation: noiseFlash 0.2s ease-in-out 0.1s forwards; 
}

#toggle-audio.is-animating .noise-small { 
  animation: noiseFlash 0.2s ease-in-out 0.3s forwards; 
}

/* ── HOVER-SCALE SYSTEM STOR (1.15) ── */
.js-hover-scale {
  transition: scale 0.14s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.js-hover-scale.is-hovered {
  scale: 1.15;
}

/* ── HOVER-SCALE SYSTEM SUBTIL (1.08) ── */
.js-hover-scale-sm {
  transition: scale 0.14s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.js-hover-scale-sm.is-hovered {
  scale: 1.08;
}
 
/* ── PRESS-SCALE / "BLOW UP" SYSTEM (ersätter click-scale-interactions) ── */
.js-press-scale {
  transition: scale 0.11s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* ≈ Power1 Out */
}
/* Touch/penna: skalar UPP (blow up), som tidigare */
.js-press-scale.is-pressed-up {
  scale: 1.3;
}
/* Mus: skalar NER istället - klassisk "button press"-känsla. Justera värdet efter smak */
.js-press-scale.is-pressed-down {
  scale: 0.85;
}
/* ── SCROLL-PULSE SYSTEM ── */
.button-wrapper .button,
.button-wrapper .button-link {
  opacity: 0;
}
.button-wrapper .button.is-pulsing,
.button-wrapper .button-link.is-pulsing {
  animation: scrollPulse 2.12s linear infinite;
}
@keyframes scrollPulse {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}
/* Lottie-spelare ska ALDRIG fånga klick/hover - släpp igenom till föräldern */
.js-hover-scale lottie-player,
.js-hover-scale-sm lottie-player,
.js-press-scale lottie-player {
  pointer-events: none;
}

a.button-link,
a.button-link:visited,
a.button-link:hover {
  color: inherit !important; /* eller din önskade färg */
}

#cp-username-input {
  white-space: nowrap !important; /* Förhindrar att texten hoppar ner på ny rad */
  overflow: hidden !important;    /* Döljer allt som går utanför bredden */
}

.cp-submit-btn {
    color: var(--grey-text, #9b9b9b);
    background-color: var(--gold-dark, #47391c);
    transition: background-color 0.14s cubic-bezier(0.455, 0.03, 0.515, 0.955),
                color 0.14s cubic-bezier(0.455, 0.03, 0.515, 0.955),
                scale 0.14s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.cp-submit-btn.is-active {
    color: var(--white-1, #ffffff);
    background-color: var(--gold, #947434);
}