/* Quiz-platform additions: the access-code / identity entry form and a few
   result tweaks. Reuses the variables defined in styles.css, with fallbacks
   so it degrades gracefully if a variable name differs. */

.start-form {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 1rem;
  text-align: left;
}

.start-form label {
  font-size: 0.82rem;
  font-weight: 600;
  opacity: 0.8;
  margin-top: 0.4rem;
}

.start-form input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 0.85rem;
  font-size: 1rem;
  border-radius: 12px;
  border: 1.5px solid var(--line, rgba(124, 58, 237, 0.25));
  background: var(--card, rgba(255, 255, 255, 0.6));
  color: var(--text, inherit);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.start-form input:focus {
  outline: none;
  border-color: var(--accent, #7c3aed);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}

.code-input {
  font-size: 1.7rem !important;
  letter-spacing: 0.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.start-btn {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent, #7c3aed);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.08s, filter 0.15s;
}
.start-btn:hover { filter: brightness(1.07); }
.start-btn:active { transform: translateY(1px); }
.start-btn:disabled { opacity: 0.6; cursor: default; }

.form-msg {
  min-height: 1.2em;
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  color: var(--wrong, #d23b57);
  text-align: center;
}

.result-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--accent, #7c3aed);
  color: #fff;
  font-size: 1.8rem;
}

/* Leaderboard polish: slightly larger names + medals, and a touch more space
   below the "Top performers" header before the first row. */
.lb-list { margin-top: 10px; }            /* gap under the header */
.lb-name { font-size: 0.92rem; }          /* names slightly larger */
.lb-rank { font-size: 1.05rem; }          /* medals / rank numbers slightly larger */

/* Spectra + structures inside questions (VCE 4.1 structures, 4.2.2.6 spectra) */
.spec { max-width: 100%; height: auto; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.figblock { margin: 10px 0; }
.figcap { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--muted); margin-bottom: 3px; }
/* The 4.2.2.6 stem stacks several spectra vertically */
.visual .figblock + .figblock { margin-top: 12px; }
/* Structures shown inside an answer option: cap height so options stay tidy */
.opt .opt-body .struct { max-height: 86px; width: auto; }
.opt .opt-body .visual { margin: 2px 0; justify-content: flex-start; }