body {
  font-family: "Carrois Gothic SC", sans-serif;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #0a0a0a 100%);
  background-attachment: fixed;
  background-color: #0a0a0a;
  color: #eee;
  min-height: 100vh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

a {
  color: gold;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: darkgoldenrod;
}

nav {
  font-size: 3em;
}
nav a {
  color: white;
}
nav .btn-dark {
  background: linear-gradient(180deg, rgba(80, 80, 80, 0.6) 0%, rgba(40, 40, 40, 0.6) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  transition: all 0.2s ease;
}
nav .btn-dark:hover {
  background: linear-gradient(180deg, rgba(100, 100, 100, 0.7) 0%, rgba(60, 60, 60, 0.7) 100%);
  border-color: rgba(255, 215, 0, 0.3);
}

h1 {
  font-size: 3em;
  text-align: center;
}

h2 {
  font-size: 3em;
  text-align: center;
  margin-top: 1em;
  margin-bottom: 2em;
}

h3 {
  font-size: 2em;
  margin-top: 1em;
  margin-bottom: 0.4em;
  color: gold;
}

.main-list a {
  font-size: 3em;
}

.card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.card .card-header {
  background: linear-gradient(180deg, rgba(30, 30, 30, 0.9) 0%, rgba(20, 20, 20, 0.85) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.card .card-header h5 {
  margin-top: 0.5em;
  text-align: center;
}
.card .card-body {
  background: rgba(15, 15, 15, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.card .card-footer {
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.85) 0%, rgba(30, 30, 30, 0.9) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.oscar-list {
  margin: 1em auto;
}
.oscar-list p {
  text-align: center;
}

hr {
  width: 80%;
}

.card.oscar {
  margin-bottom: 10em;
  text-align: center;
}
.card.oscar .card-header {
  background: linear-gradient(180deg, rgba(30, 30, 30, 0.9) 0%, rgba(20, 20, 20, 0.85) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.card.oscar .card-body {
  background: rgba(10, 10, 10, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 0.6em;
}

.nominee {
  font-size: 2em;
  margin: 0.6em;
}

input.answer {
  display: none;
}

.checked {
  color: gold;
  background: rgba(255, 215, 0, 0.1);
  border-radius: 6px;
  padding: 0.2em 0.6em;
}

.winner {
  background: linear-gradient(180deg, rgba(100, 210, 100, 0.7) 0%, rgba(60, 170, 60, 0.6) 100%);
  font-weight: 900;
  border-radius: 6px;
  padding: 0.2em 0.6em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

label {
  padding-left: 1em;
  padding-right: 1em;
  border-radius: 6px;
  transition: all 0.2s ease;
  cursor: pointer;
}
label:hover {
  background: rgba(255, 215, 0, 0.08);
}

.button-holder {
  text-align: center;
  text-decoration: none;
  margin-top: 5em;
  margin-bottom: 8em;
}
.button-holder .submit {
  font-size: 4em;
}

.submit {
  font-size: 4em;
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.3) 0%, rgba(184, 134, 11, 0.3) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 12px;
  color: gold;
  padding: 0.2em 0.8em;
  cursor: pointer;
  transition: all 0.2s ease;
}
.submit:hover {
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.45) 0%, rgba(184, 134, 11, 0.4) 100%);
  border-color: rgba(255, 215, 0, 0.5);
  text-decoration: none;
  color: #fff;
}

.helptext {
  display: none;
}

#id_user-email:after {
  content: "\a";
  white-space: pre;
}

form * {
  display: block;
  font-family: arial;
}

.registration-form * {
  font-size: 1em;
}

/* Groups */
.group-card {
  margin-bottom: 2em;
  padding-bottom: 1.5em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.group-card:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.invite-code {
  font-family: monospace;
  font-size: 1.2em;
  color: gold;
  background: rgba(255, 215, 0, 0.1);
  padding: 0.2em 0.6em;
  border-radius: 4px;
  user-select: all;
}

.copy-btn {
  background: none;
  border: 1px solid rgba(255, 215, 0, 0.3);
  color: gold;
  border-radius: 4px;
  padding: 0.1em 0.4em;
  cursor: pointer;
  font-size: 0.8em;
  font-family: arial;
  display: inline;
}

.group-input {
  background: rgba(30, 30, 30, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #eee;
  border-radius: 6px;
  padding: 0.5em;
  font-size: 1em;
  width: 100%;
}

.alert-msg {
  text-align: center;
  font-size: 1.5em;
  padding: 0.5em 1em;
  border-radius: 8px;
}
.alert-error {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.3);
}
.alert-success {
  color: #6dd26d;
  background: rgba(100, 210, 100, 0.1);
  border: 1px solid rgba(100, 210, 100, 0.3);
}

.leaderboard-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.5em;
}
.leaderboard-table td,
.leaderboard-table th {
  padding: 0.8em 1em;
  text-align: center;
  font-size: 1.5em;
}
.leaderboard-table th:first-child,
.leaderboard-table td:first-child {
  width: 3em;
}
.leaderboard-table td:nth-child(2) {
  text-align: left;
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leaderboard-row {
  background: rgba(15, 15, 15, 0.8);
  backdrop-filter: blur(12px);
}
.leaderboard-row.current-user {
  border: 1px solid rgba(255, 215, 0, 0.3);
}
.leaderboard-row.first-place {
  background: rgba(255, 215, 0, 0.08);
}

@media (max-width: 576px) {
  .leaderboard-table {
    border-spacing: 0 0.3em;
  }
  .leaderboard-table td,
  .leaderboard-table th {
    padding: 0.5em 0.4em;
    font-size: 1em;
  }
  .leaderboard-table th:first-child,
  .leaderboard-table td:first-child {
    width: 2em;
  }
  .card.oscar {
    margin-bottom: 3em;
  }
  .nominee {
    font-size: 1.4em;
    margin: 0.4em 0.2em;
  }
}

.pick-correct {
  color: #6dd26d;
}
.pick-wrong {
  color: #aaa;
}
.pick-none {
  color: #555;
  font-style: italic;
}