/* Spelkarusellen — delas av menyn och av slutskärmen i varje spel. */

.carousel {
  --arm: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.carousel-head {
  font-size: clamp(26px, 4.5vw, 44px);
  color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
  text-align: center;
}

/* --- Scenen där rutorna glider --- */
.carousel-stage {
  position: relative;
  width: 100%;
  height: clamp(380px, 56vh, 560px);
  overflow: hidden;
}

.carousel-track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 32px);
  will-change: transform;
  transition: transform 0.38s cubic-bezier(0.3, 0.85, 0.3, 1);
}

/* Vid det osynliga hoppet "runt" stängs alla övergångar av en bildruta. */
.carousel.instant .carousel-track,
.carousel.instant .ctile-inner { transition: none; }

/* En spelruta. Lådan har samma bredd för alla rutor så uträkningen av
   mitten (och det osynliga varv-hoppet) blir exakt — det är innehållet
   (.ctile-inner) som skalas upp och ner. */
.ctile {
  flex: 0 0 auto;
  width: clamp(200px, 33vw, 440px);
  display: flex;
  justify-content: center;
  cursor: pointer;
}

.ctile-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 24px 24px;
  background: rgba(255, 255, 255, 0.16);
  border: 4px solid rgba(255, 255, 255, 0.55);
  border-radius: 36px;
  backdrop-filter: blur(6px);
  transition: transform 0.38s cubic-bezier(0.3, 0.85, 0.3, 1), opacity 0.38s ease,
    box-shadow 0.2s ease;
}

/* Sidorutorna syns nästan helt — de visar bild, namn och beskrivning så
   barnet ser vilka andra spel som finns. Mittrutan är störst. */
.ctile.is-near .ctile-inner { transform: scale(0.8); opacity: 0.92; }

/* Längre bort ligger bara extrakopior (för att karusellen ska gå runt)
   — de göms helt så samma spel inte syns dubbelt. */
.ctile.is-far .ctile-inner { transform: scale(0.66); opacity: 0; }

/* Med fyra spel eller fler: låt rutan på avstånd 2 kika fram en bit vid
   kanten, så barnet ser att det finns fler spel åt det hållet. */
.carousel.peek .ctile.is-edge .ctile-inner { transform: scale(0.7); opacity: 0.5; }

/* Lys upp en sidoruta helt när man pekar/hovrar på den. */
.ctile.is-near:hover .ctile-inner { opacity: 1; }

.ctile.is-center .ctile-inner {
  /* växer lite medan armarna laddar upp starten */
  transform: scale(calc(1 + var(--arm) * 0.05));
  box-shadow: 0 0 0 calc(var(--arm) * 8px) rgba(255, 216, 77, 0.55),
    0 16px 36px rgba(0, 0, 0, 0.3);
}

/* Resultat och start-uppmaning visas bara på mittrutan. */
.ctile:not(.is-center) .ctile-results,
.ctile:not(.is-center) .ctile-go { display: none; }

.ctile-emoji {
  font-size: clamp(64px, 12vw, 104px);
  line-height: 1;
}

.ctile-title {
  margin-top: 8px;
  font-size: clamp(26px, 4vw, 36px);
  color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.22);
}

.ctile-desc {
  margin-top: 10px;
  font-size: clamp(15px, 2.4vw, 19px);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
}

.ctile-results { margin-top: 8px; }

.ctile-go {
  margin-top: 16px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255, 216, 77, 0.95);
  color: #c2410c;
  font-size: clamp(14px, 2.4vw, 18px);
  font-weight: bold;
}

/* --- Pilar i sidled --- */
.lean-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(calc(1 + var(--glow, 0) * 0.25));
  z-index: 5;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 44px;
  line-height: 1;
  cursor: pointer;
  opacity: calc(0.3 + var(--glow, 0) * 0.7);
  box-shadow: 0 0 calc(var(--glow, 0) * 26px) rgba(255, 216, 77, 0.9);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.lean-left { left: 10px; }
.lean-right { right: 10px; }

/* --- "Ställ dig så kameran ser dig" --- */
.carousel-nobody {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  margin: 0;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: clamp(15px, 2.6vw, 20px);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.carousel-nobody.show { opacity: 1; }

/* --- Fot: armmätare + tips --- */
.carousel-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.arm-meter {
  position: relative;
  width: 96px;
  height: 96px;
  opacity: 0.45;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.arm-meter.charging {
  opacity: 1;
  transform: scale(1.08);
}

.arm-meter svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.arm-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.25);
  stroke-width: 8;
}

.arm-fill {
  fill: none;
  stroke: #ffd84d;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 289;
  stroke-dashoffset: 289;
  transition: stroke-dashoffset 0.08s linear;
}

.arm-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
}

.carousel-hint {
  margin: 0;
  font-size: clamp(14px, 2.5vw, 19px);
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
}

/* Liten spegelbild i hörnet så barnet ser att rörelsen fångas. */
.carousel-selfie {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: clamp(120px, 18vw, 180px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  border: 3px solid rgba(255, 255, 255, 0.6);
  background: #000;
  transform: scaleX(-1); /* spegelvänd som en spegel */
  z-index: 30;
}

.carousel.launching { animation: launch 0.3s ease forwards; }

@keyframes launch {
  to { transform: scale(1.04); opacity: 0.85; }
}

/* --- Rörelsestyrning på spelens startskärm --- */

/* Armmätaren som läggs in på startkortet. */
.start-gesture {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.start-gesture-text {
  font-size: clamp(15px, 2.6vw, 19px);
  color: rgba(255, 255, 255, 0.92);
}

/* Ring runt bakåtknappen — fylls när man lutar sig åt vänster. */
.back-meter {
  position: fixed;
  top: 8px;
  left: 8px;
  width: 84px;
  height: 84px;
  z-index: 25;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.back-meter.show { opacity: 1; }

.back-meter svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.back-fill {
  fill: none;
  stroke: #ffd84d;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 289;
  stroke-dashoffset: 289;
}