:root{
  --offwhite:#f7f7f4;
  --black:#121212;
  --dark-blue:#0a2540;
  --green:#16a34a;
  --red:#dc2626;
  --muted:#8a8f98;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
  color:var(--black);
  background:var(--offwhite);
}
.app{
  min-height:100%;
  display:flex;
  flex-direction:column;
}
.app-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px clamp(16px,4vw,40px);
  border-bottom:1px solid #e9e9e4;
}
.app-header h1{font-size:clamp(20px,3.2vw,32px); margin:0; font-weight:700; letter-spacing:-0.02em}
.player-setup{display:flex;gap:12px; align-items:center}
.player-setup input{
  padding:10px 12px; border:1px solid #ddd; border-radius:10px; background:#fff; min-width:180px;
}
button{cursor:pointer; border:none; border-radius:10px; padding:10px 14px; font-weight:600}
button.primary{background:var(--dark-blue); color:#fff}
button.secondary{background:#fff; color:var(--dark-blue); border:1px solid var(--dark-blue)}
button.ghost{background:transparent; color:var(--dark-blue); border:1px dashed var(--dark-blue)}
button:disabled{opacity:.5; cursor:not-allowed}

.game{flex:1; padding:32px clamp(16px,4vw,40px); max-width:1000px; width:100%; margin:0 auto}
.status{display:flex; gap:16px; align-items:center}
.score{font-weight:700}
.progress{flex:1; height:10px; background:#e8ecf2; border-radius:999px; overflow:hidden}
.progress-bar{height:100%; background:linear-gradient(90deg, var(--dark-blue), #1d4ed8); width:0%; transition:width .4s ease}

.stage{margin-top:28px; display:flex; flex-direction:column; gap:20px}
.sample-wrap{display:grid; place-items:center; padding:28px; border:1px dashed #d7dbe2; background:#fff; border-radius:16px}
.sample{font-size:clamp(28px,6.5vw,72px); line-height:1.1; text-align:center;}
.options{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px}
.options button{padding:14px; background:#fff; border:1px solid #dde3ea; text-align:center}
.options button.correct{border-color:var(--green); background:#ecfdf5}
.options button.wrong{border-color:var(--red); background:#fef2f2}
.actions{display:flex; gap:12px; justify-content:flex-end}
.feedback{min-height:24px; color:var(--muted)}

.unlock{position:fixed; inset:0; background:rgba(0,0,0,.5); display:grid; place-items:center}
.unlock.hidden{display:none}
.unlock-card{background:#fff; border-radius:16px; padding:24px; width:min(920px, 92vw); box-shadow:0 10px 40px rgba(10,37,64,.25)}
.unlock-card h2{margin:0 0 6px 0}
.postcard{width:100%; height:auto; display:block; border-radius:12px; background:#fff; border:1px solid #d7dbe2}
.unlock-actions{display:flex; gap:12px; justify-content:flex-end; margin-top:16px}

.app-footer{padding:16px clamp(16px,4vw,40px); color:var(--muted); border-top:1px solid #e9e9e4}

@keyframes pulseWin{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}}
.correct-anim{animation:pulseWin .35s ease}
@keyframes shakeLose{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.wrong-anim{animation:shakeLose .4s ease}