@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=Figtree:wght@400..800&display=swap');

:root{
  --ink:#1D1B2F;
  --cream:#FFF6EA;
  --coral:#FF6B4A;
  --mint:#2ED3A6;
  --yellow:#FFC83D;
  --violet:#9B85FF;
  --blue:#5CB8FF;
  --pink:#FF8CC2;
  --line:#EADFCF;
  --muted:#5E5A73;
  --dashed:#CDBFA9;
  --placeholder:#A99D8A;
  --input-border:#DCCFBC;
  --dup-bg:#FFE3DB;
  --dup-fg:#B3341A;
  --panel-line:#F1E7D8;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Figtree',sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
button{font-family:inherit;cursor:pointer;background:none;color:var(--ink)}
button:disabled{cursor:not-allowed}
input{font-family:inherit}
input::placeholder{color:var(--placeholder)}
a{color:var(--ink)}
a:hover{color:var(--coral)}
.heading{font-family:'Bricolage Grotesque',sans-serif;font-weight:800}

@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.05);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes popSoft{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes rise{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@keyframes drop{0%{transform:translateY(-60px);opacity:0}70%{transform:translateY(4px);opacity:1}100%{transform:none;opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes tick{0%,100%{transform:scale(1)}40%{transform:scale(1.09)}}
@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes toastIn{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
@keyframes fall{0%{transform:translateY(-5vh) rotate(0)}100%{transform:translateY(110vh) rotate(720deg)}}
@keyframes spin{to{transform:rotate(360deg)}}

.btn-primary{
  width:100%;height:62px;border-radius:18px;border:2.5px solid var(--ink);
  background:var(--coral);color:var(--ink);box-shadow:0 5px 0 var(--ink);
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px;
  letter-spacing:.04em;transition:transform .1s,box-shadow .1s,background .12s;
}
.btn-primary:hover:not(:disabled){background:#FF5636;transform:translateY(-2px);box-shadow:0 7px 0 var(--ink)}
.btn-primary:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.btn-primary:disabled{border-color:var(--dashed);background:var(--panel-line);color:#8C8171;box-shadow:none}

.btn-secondary{
  width:100%;height:54px;border-radius:16px;border:2px solid var(--ink);
  background:#fff;color:var(--ink);box-shadow:0 4px 0 var(--ink);
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:18px;
  letter-spacing:.04em;transition:transform .1s,box-shadow .1s,background .12s;
}
.btn-secondary:hover{background:var(--cream);transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.btn-secondary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}

.icon-btn{
  width:44px;height:44px;border-radius:14px;border:2px solid var(--ink);
  background:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  transition:background .12s,transform .1s;
}
.icon-btn:hover{background:var(--cream);transform:translateY(-2px)}
.icon-btn:active{transform:translateY(1px)}
@media (hover:none){
  .btn-primary:hover:not(:disabled){background:var(--coral);transform:none;box-shadow:0 5px 0 var(--ink)}
  .btn-secondary:hover{background:#fff;transform:none;box-shadow:0 4px 0 var(--ink)}
  .icon-btn:hover{background:#fff;transform:none}
}

.card{background:#fff;border:2px solid var(--ink);border-radius:24px;box-shadow:0 4px 0 var(--ink)}

.press-card{color:var(--ink);box-shadow:0 5px 0 var(--ink);transition:transform .15s cubic-bezier(.3,1.5,.5,1),box-shadow .15s}
.press-card:hover{transform:translateY(-5px);box-shadow:0 9px 0 var(--ink)}
.press-card:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
@media (hover:none){.press-card:hover{transform:none;box-shadow:0 5px 0 var(--ink)}}

.sticky-bottom{
  position:sticky;bottom:0;margin:auto -20px 0;padding:24px 20px 20px;
  background:linear-gradient(to top,var(--cream) 72%,rgba(255,246,234,0));
  display:flex;flex-direction:column;gap:10px;z-index:5;
}

.screen{max-width:720px;margin:0 auto;min-height:100vh;padding:28px 20px 24px;display:flex;flex-direction:column;gap:18px}
.screen-wide{max-width:1080px}
.screen-narrow{max-width:620px}

.top-bar{display:flex;align-items:center;gap:12px}

.toasts{
  position:fixed;top:14px;left:0;right:0;z-index:90;display:flex;flex-direction:column;
  align-items:center;gap:8px;pointer-events:none;padding:0 16px;
}
.toast{
  display:flex;align-items:center;gap:10px;padding:10px 18px 10px 12px;border-radius:999px;
  background:var(--ink);color:var(--cream);font-weight:800;font-size:15px;
  box-shadow:0 6px 20px rgba(29,27,47,.25);animation:toastIn .3s cubic-bezier(.3,1.5,.5,1) both;
}
.toast-dot{width:12px;height:12px;border-radius:50%}

.modal-overlay{
  position:fixed;inset:0;z-index:80;background:rgba(29,27,47,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.modal{
  width:100%;max-width:440px;max-height:calc(100vh - 40px);overflow:auto;
  background:var(--cream);border:2.5px solid var(--ink);border-radius:28px;box-shadow:0 8px 0 var(--ink);
  padding:24px;display:flex;flex-direction:column;gap:18px;animation:pop .4s cubic-bezier(.3,1.5,.5,1) both;
}

.spinner{
  width:18px;height:18px;border-radius:50%;border:3px solid rgba(29,27,47,.25);
  border-top-color:var(--ink);animation:spin .8s linear infinite;
}

.field-input{
  width:100%;height:60px;border-radius:16px;border:2px solid var(--input-border);background:#fff;
  padding:0 96px 0 58px;font-family:'Figtree',sans-serif;font-size:20px;font-weight:700;color:var(--ink);
  outline:none;transition:border-color .15s,box-shadow .15s;
}
.field-input:focus{box-shadow:0 0 0 4px rgba(255,107,74,.28)}

@media (max-width:480px){
  .screen{padding:22px 14px 20px}
}

/* Final-results screen: ranking (podium + list, one block) truly centered
   on the page — flanked by two equal grid tracks — with the stat cards
   pushed out to the right edge of the far track instead of just sitting
   next to the ranking. Real breakpoint (not flex-wrap) so it stays
   strictly side-by-side on desktop no matter how tall either column is. */
.final-layout{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:24px;margin-top:12px}
.final-ranking{grid-column:2;width:100%;max-width:460px;display:flex;flex-direction:column;align-items:center;gap:20px}
.final-stats{grid-column:3;justify-self:end;width:100%;max-width:280px;display:flex;flex-direction:column;gap:12px}
@media (max-width:900px){
  .final-layout{grid-template-columns:1fr;gap:24px}
  .final-ranking{grid-column:1;max-width:460px;margin:0 auto}
  .final-stats{grid-column:1;justify-self:center;max-width:460px}
}