:root{
  --bg:#f7f3ef;
  --card:#fffdfb;
  --ink:#3f3a36;
  --muted:#857b73;
  --line:#e4d9d1;
  --accent:#b99a86;
  --accent-soft:#eee3db;
  --blue:#78b6eb;
  --blue-soft:#dff0ff;
  --shadow:0 18px 55px rgba(70,58,50,.12);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}
body{
  font-family: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(circle at 15% -10%, #fff 0 20%, transparent 45%),
    radial-gradient(circle at 100% 0%, #efe4dc 0 14%, transparent 38%),
    linear-gradient(180deg,#fbf8f5 0%,#f5efea 100%);
}
button{font:inherit}
.app{width:min(100%,560px);min-height:100vh;margin:auto;padding:22px 18px 34px;position:relative;z-index:2}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.brand{font-size:14px;font-weight:800;letter-spacing:.03em}
.subbrand,.step{font-size:12px;color:var(--muted);margin-top:3px}
.step{white-space:nowrap;font-weight:700}
.progress{height:5px;background:#e9dfd8;border-radius:999px;margin:16px 0 22px;overflow:hidden}
.progress__bar{height:100%;width:20%;background:linear-gradient(90deg,#b99a86,#d4b9a7);transition:width .35s ease;border-radius:999px}
.card{
  background:rgba(255,253,251,.94);
  border:1px solid rgba(185,154,134,.2);
  border-radius:28px;
  box-shadow:var(--shadow);
  padding:30px 22px;
  text-align:center;
  backdrop-filter: blur(8px);
}
.kicker{text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:900;color:var(--accent);margin-bottom:12px}
.icon{font-size:54px;line-height:1;margin:6px 0 18px}
h1,h2{font-family: Georgia, "Times New Roman", serif;font-weight:500;margin:0;color:#3e3833}
h1{font-size:36px;line-height:1.08}
h2{font-size:28px;line-height:1.14}
p{font-size:17px;line-height:1.55;color:#5c544e;margin:14px 0}
.small{font-size:13px;color:var(--muted)}
.btn{
  width:100%;border:0;border-radius:999px;padding:15px 18px;margin-top:16px;
  font-weight:900;cursor:pointer;transition:transform .12s ease,opacity .2s ease;
}
.btn:active{transform:scale(.985)}
.btn--primary{background:var(--ink);color:white}
.btn--soft{background:white;border:1px solid var(--line);color:var(--ink)}
.answers{display:grid;gap:10px;margin-top:20px}
.answer{
  width:100%;border:1px solid var(--line);background:white;border-radius:18px;
  padding:15px 14px;text-align:left;cursor:pointer;font-weight:700;
}
.answer:hover{background:#fffaf6}
.answer.selected{outline:3px solid rgba(185,154,134,.16);border-color:#c7aa97}
.memory{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px
}
.tile{
  aspect-ratio:1;border:0;border-radius:17px;background:linear-gradient(145deg,#e5d9d0,#f2e9e3);
  color:#6b625b;font-size:28px;font-weight:900;box-shadow:inset 0 0 0 1px rgba(110,90,78,.05);
  cursor:pointer;transition:transform .18s ease,background .18s ease;
}
.tile.open{background:white;transform:rotateY(180deg)}
.tile.matched{background:#f1e7df;opacity:.65}
.counter{font-size:13px;color:var(--muted);margin-top:14px;font-weight:700}
.lock{
  width:80px;height:80px;border-radius:24px;margin:12px auto 18px;background:var(--accent-soft);
  display:grid;place-items:center;font-size:40px
}
.countdown{font-size:82px;font-weight:1000;line-height:1;margin:12px 0;font-family:Georgia,serif}
.final{
  background:
    radial-gradient(circle at 50% 0%,rgba(120,182,235,.28),transparent 35%),
    linear-gradient(160deg,#ffffff 0%,#eef8ff 100%);
  border-color:rgba(120,182,235,.36);
}
.final-badge{
  display:inline-flex;align-items:center;gap:8px;background:var(--blue-soft);color:#2e6c9f;
  padding:8px 12px;border-radius:999px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.1em
}
.final .boy{font-size:76px;margin:10px 0}
.final h1{font-size:44px;color:#2a6c9f}
.final p{color:#45677f}
.sparkle{animation:pulse 1.2s ease-in-out infinite alternate}
@keyframes pulse{to{transform:scale(1.035)}}
.fade{animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:10}
.confetti-piece{
  position:absolute;top:-10vh;width:10px;height:18px;border-radius:3px;
  animation:fall linear forwards;
}
@keyframes fall{
  to{transform:translate3d(var(--drift),115vh,0) rotate(720deg)}
}
@media (max-width:380px){
  .card{padding:26px 17px;border-radius:24px}
  h1{font-size:32px} h2{font-size:25px}
  .memory{gap:7px}.tile{border-radius:14px}
}