@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@500;700;900&family=VT323&display=swap');

:root {
  --u: min(1vw, 0.5625vh);
  --ink: #fff;
  --shadow: 0 calc(var(--u) * 0.6) 0 rgba(0, 0, 0, 0.35);
  --toast-h: calc(var(--u) * 8);
  --toast-gap: calc(var(--u) * 1);
  --t: calc(var(--toast-h) / 10);
}

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

html, body { height: 100%; background: transparent; overflow: hidden; }

body {
  display: grid;
  place-items: center;
  font-family: 'Rubik', system-ui, sans-serif;
  color: var(--ink);
}

body.preview { background: radial-gradient(120% 80% at 50% 0%, #2b2f5a 0%, #0e0f1f 60%, #05050c 100%); }

#app {
  position: relative;
  width: calc(var(--u) * 100);
  height: calc(var(--u) * 177.78);
  display: flex;
  flex-direction: column;
  padding: calc(var(--u) * 4);
  gap: calc(var(--u) * 2);
}

.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 3);
}

.game-title {
  min-width: 0;
  font-size: calc(var(--u) * min(6.2, 74 / var(--len)));
  white-space: nowrap;
  font-weight: 900;
  letter-spacing: calc(var(--u) * 0.3);
  line-height: 1;
  text-shadow: var(--shadow);
  background: linear-gradient(180deg, #fff 30%, #ffd84d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 calc(var(--u) * 0.6) 0 rgba(0, 0, 0, 0.45));
}

.game-timer {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.6);
  padding: calc(var(--u) * 1) calc(var(--u) * 2.4) calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 3);
  background: rgba(0, 0, 0, 0.55);
  border: calc(var(--u) * 0.6) solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.timer-label { font-size: calc(var(--u) * 2.6); font-weight: 700; opacity: 0.7; letter-spacing: calc(var(--u) * 0.4); }
.timer-value { font-size: calc(var(--u) * 6.6); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }

.timer-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--u) * 1);
  background: #ffd84d;
  transform-origin: left;
}

.game-timer[data-size='hours'] .timer-value { font-size: calc(var(--u) * 5.6); }
.game-timer[data-size='days'] .timer-label { display: none; }
.game-timer[data-size='days'] .timer-value { font-size: calc(var(--u) * 5.4); }

.game-timer.urgent { animation: urgent 0.5s ease-in-out infinite alternate; border-color: #ff3b30; }
.game-timer.urgent .timer-value { color: #ff5a4f; }
.game-timer.urgent .timer-bar { background: #ff3b30; }

@keyframes urgent { to { transform: scale(1.08); } }

.music {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.8);
  padding: calc(var(--u) * 1.2) calc(var(--u) * 2.2);
  border-radius: calc(var(--u) * 2.6);
  background: rgba(0, 0, 0, 0.5);
  border: calc(var(--u) * 0.5) solid rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.music-head { display: flex; align-items: center; gap: calc(var(--u) * 1.4); font-size: calc(var(--u) * 2.8); font-weight: 700; }
.music-note { color: #ffd84d; font-size: calc(var(--u) * 3.6); animation: sway 1.4s ease-in-out infinite alternate; }

@keyframes sway { from { transform: rotate(-12deg); } to { transform: rotate(12deg) translateY(calc(var(--u) * -0.4)); } }

.music-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }
.music-hint { flex: none; padding: 0 calc(var(--u) * 1.4); border-radius: calc(var(--u) * 2); background: #ffd84d; color: #111; font-size: calc(var(--u) * 2.3); font-weight: 900; }

.music-poll { display: flex; align-items: center; gap: calc(var(--u) * 1.2); font-weight: 900; }
.music-side { font-size: calc(var(--u) * 2.6); letter-spacing: calc(var(--u) * 0.2); }
.music-side.skip, .music-count.skip { color: #ff6b6b; }
.music-side.keep, .music-count.keep { color: #3ddc84; }
.music-count { min-width: calc(var(--u) * 3); font-size: calc(var(--u) * 3.4); text-align: center; font-variant-numeric: tabular-nums; }

.music-bar {
  flex: 1;
  height: calc(var(--u) * 2.4);
  border-radius: calc(var(--u) * 2);
  background: #3ddc84;
  overflow: hidden;
}

.music-fill { width: 50%; height: 100%; background: #ff6b6b; box-shadow: calc(var(--u) * 0.4) 0 0 #fff; transition: width 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); }
.music-goal { flex: none; min-width: calc(var(--u) * 13); font-size: calc(var(--u) * 2.4); font-weight: 700; text-align: right; opacity: 0.85; }

.music.locked .music-bar, .music.locked .music-count, .music.locked .music-side { opacity: 0.35; }
.music.empty .music-poll, .music.empty .music-hint { display: none; }

.music-banner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(90deg, #7b6cff, #fe2c55);
  font-size: calc(var(--u) * 4.6);
  font-weight: 900;
  letter-spacing: calc(var(--u) * 0.3);
  text-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
}

.music-banner.show { animation: banner var(--banner) ease-in-out forwards; }

@keyframes banner {
  0% { opacity: 0; transform: scale(1.4); }
  8%, 85% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

.game-stage { position: relative; flex: 1; display: flex; flex-direction: column; gap: calc(var(--u) * 2); }

.toast-layer {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  gap: var(--toast-gap);
  height: calc(var(--toast-max) * var(--toast-h) + (var(--toast-max) - 1) * var(--toast-gap));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  flex: none;
  gap: calc(var(--t) * 2);
  height: var(--toast-h);
  padding: 0 calc(var(--t) * 2.2) 0 calc(var(--t) * 1.2);
  border-radius: calc(var(--t) * 10);
  background: linear-gradient(90deg, var(--accent), rgba(0, 0, 0, 0.75));
  border: calc(var(--t) * 0.5) solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 calc(var(--t) * 1) calc(var(--t) * 3) rgba(0, 0, 0, 0.45);
  transform: translateX(-120%) scale(0.8);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.2, 1.6, 0.4, 1), opacity 0.3s;
}

.toast.in { transform: none; opacity: 1; }
.toast.big { animation: glow 0.6s ease-in-out infinite alternate; }

@keyframes glow { to { box-shadow: 0 0 calc(var(--t) * 5) var(--accent); } }

.toast-avatar {
  display: grid;
  place-items: center;
  width: calc(var(--t) * 7);
  height: calc(var(--t) * 7);
  border-radius: 50%;
  background: #fff center / cover;
  color: var(--accent);
  font-size: calc(var(--t) * 4.4);
  font-weight: 900;
  flex: none;
}

.toast-avatar[style*='background-image'] { color: transparent; }

.toast-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.05; }
.toast-name { font-size: calc(var(--t) * 3.4); font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast-action { font-size: calc(var(--t) * 2.7); font-weight: 700; opacity: 0.9; }

.toast-gift { flex: none; width: calc(var(--t) * 7); height: calc(var(--t) * 7); object-fit: contain; animation: wiggle 0.6s ease-in-out infinite alternate; }

@keyframes wiggle { to { transform: rotate(10deg) scale(1.1); } }

.toast-badge {
  padding: calc(var(--t) * 0.6) calc(var(--t) * 2);
  border-radius: calc(var(--t) * 2);
  background: #fff;
  color: var(--accent);
  font-size: calc(var(--t) * 5);
  font-weight: 900;
  line-height: 1.1;
}

.gift-tag { display: inline-flex; align-items: center; gap: calc(var(--u) * 0.5); }
.gift-img { width: calc(var(--u) * 5.6); height: calc(var(--u) * 5.6); object-fit: contain; filter: drop-shadow(0 0 calc(var(--u) * 0.4) rgba(255, 255, 255, 0.6)); }

.result {
  position: absolute;
  inset: calc(var(--u) * -2);
  display: grid;
  place-items: center;
  border-radius: calc(var(--u) * 4);
  background: rgba(0, 0, 0, 0.78);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
  z-index: 30;
  overflow: hidden;
}

.result.show { opacity: 1; }

.result-box { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.6); transform: scale(0.5); transition: transform 0.6s cubic-bezier(0.2, 1.6, 0.4, 1); }
.result.show .result-box { transform: none; }

.result-name { font-size: calc(var(--u) * 6); font-weight: 900; text-shadow: var(--shadow); }
.result-head { font-size: calc(var(--u) * 15); font-weight: 900; color: #ffd84d; text-shadow: var(--shadow); animation: pulse 0.6s ease-in-out infinite alternate; }
.result-score { display: flex; flex-wrap: wrap; justify-content: center; max-width: calc(var(--u) * 92); gap: calc(var(--u) * 1.6) calc(var(--u) * 2); font-size: calc(var(--u) * 4); font-weight: 700; }

.score-chip {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.4);
  padding: calc(var(--u) * 0.6) calc(var(--u) * 2.4) calc(var(--u) * 0.6) calc(var(--u) * 0.6);
  border-radius: calc(var(--u) * 4);
  background: var(--accent);
}

.score-chip b { padding: 0 calc(var(--u) * 1.4); border-radius: calc(var(--u) * 3); background: #fff; color: var(--accent); }
.result-next { font-size: calc(var(--u) * 3.2); opacity: 0.7; }

.confetti-layer { position: absolute; inset: 0; pointer-events: none; }

.confetti {
  position: absolute;
  top: -5%;
  left: var(--x);
  width: calc(var(--u) * 1.6);
  height: calc(var(--u) * 2.6);
  background: var(--c);
  animation: fall 2.6s linear var(--d) infinite;
}

@keyframes fall { to { transform: translateY(calc(var(--u) * 190)) rotate(var(--r)); } }

@keyframes bump { 30% { transform: scale(1.35); color: #ffd84d; } }

@keyframes pulse { to { transform: scale(1.2) rotate(-6deg); } }

@keyframes pop {
  0% { transform: translateY(0) scale(0.4); opacity: 0; }
  20% { transform: translateY(calc(var(--u) * -4)) scale(1.2); opacity: 1; }
  100% { transform: translateY(calc(var(--u) * -18)) scale(1); opacity: 0; }
}