/* "Mission St. Louis" — passt zum Logbuch-Design der Hauptseite */
:root{
  --paper:#efe7d4;
  --paper-deep:#e3d7bb;
  --paper-card:#f5eedb;
  --ink:#2b2418;
  --ink-soft:#5a4f3e;
  --sea:#2a4a64;
  --sea-deep:#162a3c;
  --sea-foam:#a8bccd;
  --rust:#a8522d;
  --rust-soft:#c87a52;
  --border:#c7b89a;

  --font-display:"Cormorant Garamond","Times New Roman",serif;
  --font-body:"Lora",Georgia,serif;
  --font-mono:"Special Elite","Courier New",monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:
    radial-gradient(at 20% 10%, rgba(200,170,110,.35), transparent 50%),
    radial-gradient(at 80% 90%, rgba(180,150,90,.25), transparent 50%),
    var(--paper);
  line-height:1.7;
}
a{text-decoration:none;color:inherit}

/* Hero */
.hero{
  min-height:70vh;
  padding:24px;
  position:relative;
  border-bottom:1px solid var(--border);
  background:
    linear-gradient(rgba(239,231,212,.55), rgba(239,231,212,.92)),
    radial-gradient(circle at top, rgba(42,74,100,.18), transparent 60%);
  overflow:hidden;
}
.hero:after{
  content:"MISSION";
  position:absolute;
  right:5vw;
  bottom:5vh;
  font-family:var(--font-display);
  font-size:clamp(4rem,13vw,11rem);
  font-weight:500;
  letter-spacing:-.04em;
  color:rgba(43,36,24,.05);
  font-style:italic;
}

nav{
  max-width:1100px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
  z-index:2;
}
.logo{
  font-family:var(--font-mono);
  font-size:.85rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--ink-soft);
  background:transparent;
  border:none;
  padding:0;
}
.nav-links{display:flex;gap:18px;flex-wrap:wrap}
.nav-links a{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding:6px 0;
  border:none;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.nav-links a:hover{color:var(--rust);border-bottom-color:var(--rust)}

.hero-card{
  max-width:780px;
  margin:80px auto 0;
  text-align:center;
  background:transparent;
  border:none;
  box-shadow:none;
  padding:30px 20px;
  position:relative;
  z-index:2;
}
.eyebrow{
  font-family:var(--font-mono);
  color:var(--rust);
  text-transform:uppercase;
  font-size:.65rem;
  letter-spacing:.3em;
  font-weight:400;
  margin:0;
}
h1{
  font-family:var(--font-display);
  font-size:clamp(3rem,8vw,6rem);
  line-height:.95;
  margin:18px 0 22px;
  letter-spacing:-.02em;
  font-weight:500;
  color:var(--ink);
}
h2{
  font-family:var(--font-display);
  font-size:clamp(1.8rem,4vw,2.6rem);
  margin:0 0 16px;
  line-height:1.1;
  font-weight:500;
  letter-spacing:-.01em;
}
h3{
  font-family:var(--font-display);
  font-size:1.6rem;
  margin-top:0;
  font-weight:500;
  letter-spacing:-.005em;
}
h4{font-family:var(--font-display);font-weight:500}
.hero-card p{
  max-width:620px;
  margin:0 auto;
  color:var(--ink-soft);
  font-size:1.1rem;
  font-style:italic;
}

/* Buttons */
.btn,button{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  border:1px solid var(--ink);
  border-radius:2px;
  padding:12px 20px;
  font-weight:400;
  cursor:pointer;
  background:var(--ink);
  color:var(--paper);
  transition:background .2s, color .2s, border-color .2s;
  box-shadow:none;
}
.btn:hover,button:hover{
  background:var(--rust);
  border-color:var(--rust);
  color:var(--paper);
  transform:none;
}
button.locked{opacity:.55;cursor:not-allowed}
button.correct{
  background:#3e6b4a !important;
  border-color:#3e6b4a !important;
  color:var(--paper) !important;
}
button.wrong{
  background:#8b3a3a !important;
  border-color:#8b3a3a !important;
  color:var(--paper) !important;
}
.primary{
  display:inline-block;
  margin-top:24px;
  background:var(--rust);
  border-color:var(--rust);
}
.primary:hover{background:var(--ink);border-color:var(--ink)}

main{max-width:1000px;margin:auto;padding:48px 24px}
section{margin:72px 0}

.glass,.intro,.card,.step,.character-grid article{
  background:var(--paper-card);
  border:1px solid var(--border);
  box-shadow:0 1px 0 rgba(43,36,24,.03);
  backdrop-filter:none;
}
.intro{padding:30px;border-radius:2px}
.intro p{color:var(--ink-soft);font-size:1.05rem}
.section-title{margin-bottom:28px;border-bottom:1px solid var(--border);padding-bottom:14px}
.card{border-radius:2px;padding:32px}
.hidden{display:none!important}

/* Role grid */
.role-grid,.character-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
}
.role{
  text-align:left;
  min-height:108px;
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--border);
  font-family:var(--font-body);
  font-size:.95rem;
  text-transform:none;
  letter-spacing:0;
  padding:18px;
  line-height:1.4;
}
.role:hover{
  background:var(--paper-deep);
  border-color:var(--rust);
  color:var(--ink);
}
.role.secret{
  background:var(--sea-deep);
  color:var(--paper);
  border-color:var(--sea-deep);
}
.role.secret:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.role span{
  display:block;
  margin-top:6px;
  color:var(--ink-soft);
  font-family:var(--font-mono);
  font-size:.65rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.role.secret span{color:var(--sea-foam)}

/* Stats */
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px;
  margin-bottom:20px;
}
.stats div{
  background:var(--paper);
  border:1px solid var(--border);
  padding:12px 14px;
  border-radius:2px;
}
.stats span{
  display:block;
  color:var(--ink-soft);
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.stats strong{
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:500;
}

.bar-wrap{display:grid;gap:12px;margin:18px 0 28px}
.bar-wrap label{
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.bar{
  height:6px;
  background:var(--paper-deep);
  border:1px solid var(--border);
  border-radius:0;
  overflow:hidden;
  margin-top:4px;
}
.bar div{width:50%;height:100%;background:var(--sea);transition:width .3s ease}
.bar.danger div{background:var(--rust)}

.event-box{
  margin:20px 0;
  padding:16px 18px;
  border-left:3px solid var(--rust);
  background:var(--paper);
  border-radius:0;
  color:var(--ink);
  font-style:italic;
  font-size:.95rem;
}
blockquote{
  margin:20px 0;
  padding:18px 22px;
  border-left:3px solid var(--sea);
  background:var(--paper);
  border-radius:0;
  color:var(--ink);
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.15rem;
  line-height:1.5;
}

.options{display:grid;gap:10px;margin-top:18px}
.options button{
  text-align:left;
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--border);
  font-family:var(--font-body);
  font-size:1rem;
  text-transform:none;
  letter-spacing:0;
  padding:14px 18px;
  line-height:1.5;
}
.options button:hover{
  border-color:var(--rust);
  background:var(--paper-deep);
  color:var(--ink);
}

.feedback{
  font-weight:400;
  font-style:italic;
  min-height:32px;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:0;
  padding:14px;
  margin-top:16px;
  font-size:.95rem;
}
.feedback:empty{display:none}

/* Timeline */
.timeline{display:grid;gap:14px}
.step{
  display:grid;
  grid-template-columns:54px 1fr;
  gap:18px;
  border-radius:2px;
  padding:20px;
}
.step span{
  width:42px;height:42px;border-radius:50%;
  background:transparent;
  border:1px solid var(--ink);
  color:var(--ink);
  display:grid;place-items:center;
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.1rem;
}
.step h3,.step p{margin:0}
.step p{color:var(--ink-soft);font-size:.95rem;margin-top:4px}

.character-grid article{border-radius:2px;padding:22px}
.character-grid p{color:var(--ink-soft);font-size:.95rem;margin:6px 0 0}

footer{
  text-align:center;
  padding:40px 20px;
  color:var(--ink-soft);
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  border-top:1px solid var(--border);
  margin-top:60px;
}
footer em{font-style:italic;text-transform:none;letter-spacing:0;font-family:var(--font-body);font-size:.85rem}

@media(max-width:650px){
  nav{flex-direction:column;gap:14px}
  .nav-links{justify-content:center}
  .hero-card{margin-top:40px}
}