* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  background: #1a1230;
  font-family: "Trebuchet MS", "Comic Sans MS", system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
}

.menu {
  min-height: 100vh;
  background: linear-gradient(160deg, #4b2c8f 0%, #7e3ff2 45%, #f0793b 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 6px 20px;
}

.menu-head {
  text-align: center;
  margin-bottom: 12px;
}

.menu-title {
  font-size: clamp(40px, 8vw, 80px);
  color: #fff;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
  letter-spacing: 1px;
}

/* Karusellbehållaren måste fylla hela bredden — annars krymper den
   (i flex-kolumnen med align-items: center) till innehållets bredd och
   sidospelen kläms bort utanför kanten. */
#carousel {
  width: 100%;
}

/* Tightare luft i menyns karusell — postgame-karusellen rörs inte. */
.menu .carousel { gap: 10px; }
.menu .carousel-stage { height: clamp(300px, 40vh, 420px); }
.menu .carousel-foot { gap: 6px; }
.menu .carousel-foot .arm-meter { width: 76px; height: 76px; }

/* Armmätaren + tipset visas först när kameran är igång. Före aktivering
   ligger startknappen på samma plats; när kameran startar flyttar
   js/menu.js över .carousel-foot till .cam-controls så armmätaren tar
   knappens plats mellan om-boxen och statistiken.
   Postgame-karusellen påverkas inte (där är kameran redan på). */
.menu .carousel > .carousel-foot { display: none; }

/* Bottensektionen: kamerakontroller + statistik. Staplas vertikalt på
   små skärmar; ligger sida vid sida på breda så hela menyn ryms utan
   scroll. */
.menu-bottom {
  margin-top: 16px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.cam-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* "Om sidan"-box: korta länkar till informationssidan, framförallt för
   att Google ska indexera och förstå sajten. */
.about-box {
  width: min(440px, 92vw);
  padding: 16px 20px 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.18);
  color: #fff;
}

.about-title {
  font-size: clamp(13px, 1.8vw, 15px);
  font-weight: bold;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
}

.about-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.about-links a {
  display: block;
  padding: 6px 0;
  color: #fff;
  text-decoration: none;
  font-size: clamp(15px, 2.2vw, 17px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.about-links li:last-child a { border-bottom: none; }
.about-links a:hover { color: #ffd84d; border-bottom-color: rgba(255, 216, 77, 0.6); }

/* Knapp för att slå på rörelsestyrning (kamera). */
.cam-btn {
  padding: 16px 30px;
  border: 3px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font: inherit;
  font-size: clamp(17px, 3vw, 22px);
  cursor: pointer;
  transition: transform 0.1s ease, background 0.1s ease;
}

.cam-btn:hover { background: rgba(255, 255, 255, 0.26); }
.cam-btn:active { transform: scale(0.97); }
.cam-btn:disabled { opacity: 0.6; cursor: default; }

.cam-note {
  min-height: 1.4em;
  font-size: clamp(14px, 2.6vw, 19px);
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
}

/* Total speltid över alla besökare — ett mjukt, halvgenomskinligt kort
   som ligger längst ner i menyn (eller bredvid kameraknappen på breda
   skärmar). */
.stats {
  width: min(440px, 92vw);
  padding: 20px 24px 22px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  text-align: center;
}

/* Breda skärmar: tre kolumner — om-box | kamerakontroller | statistik —
   så hela menyn ryms utan att man behöver scrolla. Stats-kortet
   komprimeras lite så det inte sprängar höjden. */
@media (min-width: 1000px) {
  .menu-bottom {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 28px;
    margin-top: 8px;
  }
  .menu-bottom .about-box {
    width: min(280px, 24vw);
    padding: 14px 18px 16px;
  }
  .menu-bottom .cam-controls {
    align-self: center;
  }
  .menu-bottom .stats {
    width: min(320px, 28vw);
    padding: 12px 18px 14px;
  }
  .menu-bottom .stats-total { font-size: clamp(26px, 3.6vw, 36px); margin-top: 2px; }
  .menu-bottom .stats-list { margin-top: 10px; gap: 5px; }
  .menu-bottom .stats-list li { padding: 5px 10px; font-size: clamp(14px, 2.2vw, 17px); }
}

.stats.hidden { display: none; }

.stats-title {
  font-size: clamp(15px, 2.6vw, 19px);
  font-weight: normal;
  color: rgba(255, 255, 255, 0.85);
}

.stats-total {
  margin-top: 6px;
  font-size: clamp(30px, 6vw, 46px);
  font-weight: bold;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.22);
}

.stats-list {
  list-style: none;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stats-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.14);
  font-size: clamp(15px, 2.8vw, 19px);
}

.stats-emoji { font-size: 1.4em; line-height: 1; }
.stats-name { flex: 1; text-align: left; }
.stats-time { font-weight: bold; white-space: nowrap; }