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

html, body {
  height: 100%;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: #14152b;
  color: #f4f4f8;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#app { height: 100%; }

.screen { display: none; height: 100%; }
.screen.active { display: flex; flex-direction: column; align-items: center; }

.hidden { display: none !important; }

.logo {
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: -1px;
  margin: 4vh 0 2vh;
  color: #ffd166;
  text-shadow: 3px 3px 0 #e63946;
}
.logo span { color: #06d6a0; }

h2 { margin: 2vh 0 1vh; }

button {
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  border: none;
  border-radius: 14px;
  padding: 14px 26px;
  cursor: pointer;
  touch-action: manipulation;
}

button.primary {
  background: #06d6a0;
  color: #0d2b23;
  box-shadow: 0 4px 0 #059f77;
}
button.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #059f77; }

button.secondary {
  background: #2b2d55;
  color: #cfd2ff;
  box-shadow: 0 3px 0 #1d1e3e;
}

.error { color: #ff5d8f; min-height: 1.4em; margin-top: 8px; font-weight: 600; }
.hint { color: #8f92b8; font-size: 0.85rem; margin-top: 10px; }

.code-chip {
  background: #2b2d55;
  border-radius: 8px;
  padding: 2px 10px;
  letter-spacing: 3px;
  font-weight: 900;
  color: #ffd166;
}

.roster { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 12px; }
.roster-chip {
  background: #2b2d55;
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
  animation: chip-in 0.25s ease-out;
}
.roster-chip.big { font-size: 1.3rem; padding: 12px 22px; }
.roster-chip.gone { opacity: 0.35; }
@keyframes chip-in { from { transform: scale(0.6); opacity: 0; } }

.toast {
  position: fixed;
  top: 12vh;
  left: 50%;
  transform: translateX(-50%);
  background: #ffd166;
  color: #3d2b00;
  font-weight: 800;
  padding: 10px 22px;
  border-radius: 999px;
  z-index: 90;
  animation: toast-in 1.4s ease-out forwards;
  pointer-events: none;
}
@keyframes toast-in {
  0% { transform: translate(-50%, -18px); opacity: 0; }
  12% { transform: translate(-50%, 0); opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}