/* Gamenite på TV. Allt mäts i vw så att samma layout fungerar på 720p, 1080p och 4K. */
/* Variabelt typsnitt (vikt 300–700, latin inkl. åäö): en fil på 30 kB i stället för fyra TTF på 200 kB */
@font-face { font-family: Fredoka; font-weight: 300 700; font-display: swap; src: url(fonts/fredoka-latin.99d6c78e04.woff2) format('woff2'); }

:root {
  --bg-top: #1B0B3A;
  --bg-bottom: #3A0C4F;
  --text: #FFFFFF;
  --muted: rgba(255, 255, 255, 0.68);
  --faint: rgba(255, 255, 255, 0.45);
  --glass: rgba(255, 255, 255, 0.10);
  --glass-strong: rgba(255, 255, 255, 0.16);
  --glass-border: rgba(255, 255, 255, 0.18);
  --pink: #FF3EA5;
  --violet: #8B5CF6;
  --cyan: #22D3EE;
  --lime: #A3E635;
  --yellow: #FFD23F;
  --danger: #FF5470;
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: none;
}

body {
  font-family: Fredoka, sans-serif;
  color: var(--text);
  background: linear-gradient(160deg, var(--bg-top), var(--bg-bottom));
}

.blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(8vw);
  opacity: 0.45;
  animation: drift 18s ease-in-out infinite alternate;
}
.blob-pink { width: 38vw; height: 38vw; background: #FF3EA5; top: -12vw; left: -10vw; }
.blob-violet { width: 44vw; height: 44vw; background: #7B2FF7; bottom: -18vw; right: -12vw; animation-delay: -6s; }
.blob-cyan { width: 26vw; height: 26vw; background: #00D1FF; top: 30%; right: 30%; opacity: 0.22; animation-delay: -12s; }

@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(4vw, 3vw) scale(1.12); }
}

#app {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 3.5vw 4.5vw;
  display: flex;
  flex-direction: column;
}

/* Gemensamt */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vw;
}
.logo { height: 4.2vw; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6vw;
  padding: 0.6vw 1.4vw;
  border-radius: 999px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  font-size: 1.5vw;
  font-weight: 600;
}
.chip strong { color: var(--yellow); letter-spacing: 0.15vw; }
.card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 2vw;
  padding: 2.4vw;
}
.center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.muted { color: var(--muted); }
.hero { font-size: 4.4vw; font-weight: 700; line-height: 1.1; }
.lead { font-size: 2vw; font-weight: 500; color: var(--muted); margin-top: 1vw; }

.enter { animation: pop 0.55s cubic-bezier(.2, 1.4, .4, 1) both; }
.enter-late { animation: pop 0.55s 0.15s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes pop {
  from { opacity: 0; transform: scale(0.85) rotate(-2deg); }
  to { opacity: 1; transform: none; }
}

/* Parkoppling */
.pair-code {
  display: flex;
  gap: 1.2vw;
  margin: 3vw 0 2.4vw;
}
.pair-code span {
  width: 9vw;
  height: 11vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7vw;
  font-weight: 700;
  border-radius: 1.6vw;
  background: var(--glass-strong);
  border: 0.25vw solid var(--yellow);
  color: var(--yellow);
}
.steps { font-size: 1.9vw; color: var(--muted); line-height: 1.6; }
.steps b { color: var(--text); }

/* Lobby */
.lobby {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 3vw;
  margin-top: 2.5vw;
  min-height: 0;
}
.join {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.join .label { font-size: 2vw; color: var(--muted); font-weight: 500; }
.join .code { font-size: 8.5vw; font-weight: 700; color: var(--yellow); letter-spacing: 0.6vw; line-height: 1; margin: 0.6vw 0 2.4vw; }
.mode {
  display: flex;
  align-items: center;
  gap: 1.6vw;
}
.mode img { width: 8vw; height: 8vw; border-radius: 1.4vw; object-fit: cover; }
.mode .name { font-size: 2.6vw; font-weight: 700; }
.mode .sub { font-size: 1.6vw; color: var(--muted); }

.players {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6vw;
  align-content: start;
}
.player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8vw;
}
.player .name { font-size: 1.5vw; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar {
  width: 8vw;
  height: 8vw;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.2vw;
  font-weight: 700;
  background-size: cover;
  background-position: center;
  border: 0.25vw solid rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}
.avatar.sm { width: 4vw; height: 4vw; font-size: 1.6vw; border-width: 0.15vw; }
.crown { font-size: 1.3vw; color: var(--yellow); }
.waiting { font-size: 1.8vw; color: var(--faint); margin-top: 1.6vw; }

/* Frågor */
.progress { font-size: 1.7vw; font-weight: 600; color: var(--muted); }
.statement {
  margin-top: 2.5vw;
  padding: 3vw 4vw;
  text-align: center;
  background: var(--glass-strong);
}
.statement .prefix { font-size: 2vw; color: var(--muted); font-weight: 500; }
.statement .text { font-size: 3.8vw; font-weight: 700; line-height: 1.2; margin-top: 0.6vw; }

.timer {
  width: 7vw;
  height: 7vw;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3vw;
  font-weight: 700;
  border: 0.35vw solid var(--yellow);
  color: var(--yellow);
}
.timer.low { border-color: var(--danger); color: var(--danger); }

.versus {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8vw;
}
.contender {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2vw;
  transition: transform 0.4s;
}
.contender > .avatar { width: 11vw; height: 11vw; font-size: 4.4vw; }
.contender .name { font-size: 2.6vw; font-weight: 700; }
.contender .votes { font-size: 2vw; font-weight: 600; color: var(--yellow); }
.contender.winner { transform: scale(1.12); }
.contender.winner > .avatar { border-color: var(--yellow); box-shadow: 0 0 4vw rgba(255, 210, 63, 0.6); }
.contender.loser { opacity: 0.55; }
.vs { font-size: 4vw; font-weight: 700; color: var(--pink); }
.voters { display: flex; gap: 0.6vw; flex-wrap: wrap; justify-content: center; max-width: 30vw; }

.footer {
  display: flex;
  justify-content: center;
  font-size: 1.9vw;
  color: var(--muted);
  font-weight: 500;
}
.expose {
  font-size: 2vw;
  font-weight: 700;
  color: var(--pink);
  text-align: center;
  margin-top: 1vw;
}

/* Trivia */
.question { font-size: 3.4vw; font-weight: 700; line-height: 1.25; text-align: center; margin: 2.4vw 0 2.6vw; }
.options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6vw;
  flex: 1;
  align-content: center;
}
.option {
  display: flex;
  align-items: center;
  gap: 1.4vw;
  padding: 1.6vw 2vw;
  border-radius: 1.6vw;
  font-size: 2.2vw;
  font-weight: 600;
  min-height: 7vw;
  transition: opacity 0.4s, transform 0.4s;
}
.option .letter {
  width: 3.6vw;
  height: 3.6vw;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.option .letter svg { width: 55%; height: 55%; }
.option .who { margin-left: auto; display: flex; gap: 0.4vw; }
.option:nth-child(1) { background: #FF3EA5; }
.option:nth-child(2) { background: #8B5CF6; }
.option:nth-child(3) { background: #0E7490; }
.option:nth-child(4) { background: #B45309; }
.option.wrong { opacity: 0.3; }
.options.compact { flex: 0; gap: 1vw; }
.options.compact .option { min-height: 5vw; padding: 1vw 1.6vw; font-size: 1.8vw; }
.option.right { background: #4D7C0F; transform: scale(1.04); box-shadow: 0 0 0 0.35vw var(--lime), 0 0 3vw rgba(163, 230, 53, 0.5); }

/* Countdown */
.countdown { font-size: 18vw; font-weight: 700; color: var(--yellow); line-height: 1; }

/* Poängtavla */
.scores {
  width: 60vw;
  display: flex;
  flex-direction: column;
  gap: 1vw;
  margin-top: 2.4vw;
}
.score-row {
  display: flex;
  align-items: center;
  gap: 1.4vw;
  padding: 1vw 1.6vw;
  border-radius: 1.4vw;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  font-size: 2vw;
  font-weight: 600;
}
.score-row .place { width: 3vw; font-weight: 700; color: var(--muted); }
.score-row .points { margin-left: auto; font-weight: 700; color: var(--yellow); }
.score-row.first { background: rgba(255, 210, 63, 0.18); border-color: var(--yellow); }

.status {
  position: fixed;
  right: 2vw;
  bottom: 1.6vw;
  font-size: 1.1vw;
  color: var(--faint);
}

/* Topplista efter varje triviafråga */
.leaders {
  display: flex;
  justify-content: center;
  gap: 1.2vw;
  margin: 2vw 0 1vw;
}
.leader {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5vw;
  width: 12vw;
  padding: 1.2vw 0.8vw;
  border-radius: 1.4vw;
  background: var(--glass);
  border: 1px solid var(--glass-border);
}
.leader.top { border-color: var(--yellow); background: rgba(255, 210, 63, 0.16); }
.leader-name { font-size: 1.4vw; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-score { font-size: 2vw; font-weight: 700; color: var(--yellow); }
.leader-gain {
  position: absolute;
  top: -1vw;
  right: -0.6vw;
  padding: 0.2vw 0.8vw;
  border-radius: 999px;
  background: var(--lime);
  color: #1B0B3A;
  font-size: 1.3vw;
  font-weight: 700;
  animation: pop 0.5s 0.4s cubic-bezier(.2, 1.4, .4, 1) both;
}

/* Webbläsarläge (tv.gamenite.eu): startknapp för ljud, helskärm och skärmlås */
html.browser, body.browser { cursor: default; }
.start-button {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: 3vw;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1vw;
  padding: 1.1vw 2.4vw;
  border: 0;
  border-radius: 999px;
  background: var(--pink);
  box-shadow: 0 0.4vw 0 #C21877;
  color: var(--text);
  font-family: Fredoka, sans-serif;
  font-size: 1.8vw;
  font-weight: 700;
  cursor: pointer;
}
.start-button small { font-size: 1.2vw; font-weight: 500; opacity: 0.8; }
.start-button:focus { outline: 0.3vw solid var(--yellow); outline-offset: 0.3vw; }