:root {
  --nas-rouge: #991B17;
  --nas-bordeaux: #71131B;
  --nas-moutarde: #F0A303;
  --nas-orange: #E18805;
  --nas-creme: #F4E9D9;
  --nas-noir: #141114;
}

@font-face {
  font-family: "Jackport";
  src: url("/fonts/JackportCollegeNCV.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Bangers";
  src: url("/fonts/Bangers.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Delight";
  src: url("/fonts/delight-regular.otf") format("opentype");
  font-display: swap;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--nas-creme);
  color: var(--nas-noir);
  font-family: "Delight", -apple-system, BlinkMacSystemFont, sans-serif;
}

.topbar {
  background: var(--nas-rouge);
  color: var(--nas-creme);
  padding: 1rem 1.25rem;
  font-family: "Jackport", sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}
.topbar em { color: var(--nas-moutarde); font-style: normal; }

main {
  max-width: 480px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

.screen h1 {
  font-family: "Jackport", sans-serif;
  color: var(--nas-bordeaux);
  font-size: 1.6rem;
  margin: 0 0 0.4rem;
}

.hint { color: #5a4f45; font-size: 0.92rem; margin: 0 0 1.25rem; }

.field { display: block; margin-bottom: 1.1rem; }
.field span { display: block; font-weight: 700; margin-bottom: 0.35rem; font-size: 0.9rem; }

.field input, #gate-code {
  width: 100%;
  padding: 0.85rem 0.9rem;
  font-size: 1rem;
  font-family: inherit;
  border: 2px solid var(--nas-bordeaux);
  border-radius: 10px;
  background: #fff;
  color: var(--nas-noir);
}

#gate-code { margin-bottom: 0.9rem; }

.btn-primary {
  display: block;
  width: 100%;
  padding: 1rem;
  margin-top: 0.5rem;
  border: none;
  border-radius: 12px;
  background: var(--nas-rouge);
  color: var(--nas-creme);
  font-family: "Jackport", sans-serif;
  font-size: 1.15rem;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.02em;
  min-height: 52px;
  cursor: pointer;
}
.btn-primary:active { background: var(--nas-bordeaux); }
.btn-primary:disabled { opacity: 0.5; }

#progress-wrap {
  margin-top: 1.1rem;
  height: 10px;
  border-radius: 6px;
  background: #e4d7c3;
  overflow: hidden;
}
#progress-bar {
  height: 100%;
  width: 0%;
  background: var(--nas-moutarde);
  transition: width 0.2s ease;
}

.error { color: var(--nas-rouge); font-weight: 700; margin-top: 0.75rem; }

[hidden] { display: none !important; }