:root{
  --bg:#071026; /* night blue */
  --card:#071827;
  --accent:#1f6fa5; /* cold blue */
  --accent2:#4fd4e6; /* cyan */
  --muted:#94a3b8;
  --glass: rgba(255,255,255,0.03);
  --ok: #2dd4bf;
  --bad:#ff7b7b;
  --radius:14px;
  --gap:14px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body,#app{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg), #02040a);
  color:#e6eef9;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  font-size:16px;
}

.screen{display:none; width:100%; max-width:520px;}
.screen.active{display:block}

.card{
  background:linear-gradient(180deg,var(--card), rgba(10,20,30,0.6));
  border-radius:var(--radius);
  padding:18px;
  box-shadow: 0 6px 18px rgba(4,8,14,0.6);
  backdrop-filter: blur(6px);
}

.start-card{padding:20px; text-align:left}
.title{margin:0; font-size:20px; letter-spacing:0.2px}
.subtitle{margin:6px 0 12px; color:var(--muted)}
.narrative{color:#cfe7f7; margin:10px 0; line-height:1.3; max-height:9.6em; overflow:hidden}

.actions{display:flex; gap:10px; margin-top:12px}
.btn{
  padding:12px 14px; border-radius:10px; border:0; cursor:pointer; min-height:44px; font-weight:600;
  background:transparent; color:var(--accent2);
}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#02101a; box-shadow: 0 6px 14px rgba(31,111,165,0.12);}
.btn.ghost{background:transparent; border:1px solid rgba(255,255,255,0.04); color:#d8eefb}
.btn.small{padding:8px 10px; min-height:36px; font-size:14px}

.how{margin-top:12px; color:var(--muted)}
.how.hidden{display:none}

.top{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
.progress{font-size:13px; color:var(--muted)}
.station-indicator{font-size:13px; color:var(--muted)}

.content{display:flex; flex-direction:column; gap:12px; margin-top:6px}
.station-card{min-height:220px; display:flex; flex-direction:column; justify-content:space-between}
.station-title{font-size:18px; margin:0 0 6px}
.station-body{color:#cfe7f7; margin-bottom:8px}
.challenge{background:var(--glass); padding:12px; border-radius:10px}
.options{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px}
.option{padding:10px; border-radius:10px; background:transparent; border:1px solid rgba(255,255,255,0.03); color:#eaf6ff; text-align:center; cursor:pointer}
.option.selected{outline:2px solid rgba(79,212,230,0.13); background:linear-gradient(90deg, rgba(31,111,165,0.12), rgba(79,212,230,0.06))}
.feedback{margin-top:10px; min-height:30px; font-size:14px}

.timer{font-weight:700; color:var(--muted)}

.controls{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:6px}

.collection.small{margin-top:6px}
.clauses-row{display:flex; gap:8px; flex-wrap:wrap}
.clause-chip{padding:8px 10px; border-radius:10px; background:rgba(255,255,255,0.02); color:var(--muted); font-size:13px; min-width:86px; text-align:center}
.clause-chip.unlocked{background:linear-gradient(90deg, rgba(31,111,165,0.12), rgba(79,212,230,0.06)); color:#eaf6ff; box-shadow:0 6px 14px rgba(31,111,165,0.06)}

.collection-list{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:10px}
.clause-card{padding:10px; border-radius:10px; background:rgba(255,255,255,0.02)}
.clause-locked{opacity:0.45; display:flex; flex-direction:column; gap:6px}
.icon-locked{font-size:18px; color:var(--muted)}

.final-card{display:flex; flex-direction:column; gap:10px; align-items:stretch}
.input{padding:10px; border-radius:10px; border:1px solid rgba(255,255,255,0.04); background:transparent; color:inherit}
.diploma{margin-top:12px; padding:12px; border-radius:10px; background:linear-gradient(180deg,#022737, #052031); color:#cfeef6}
.diploma.hidden{display:none}
.share-row{margin-top:8px}

.small-text{font-size:13px; color:var(--muted)}

.hidden{display:none !important}

/* micro animations */
@keyframes pop {
  0%{transform:scale(0.92); opacity:0}
  60%{transform:scale(1.04); opacity:1}
  100%{transform:scale(1)}
}

.unlocked-anim{animation:pop .26s ease-out}