/* ===== Start screen overlay ===== */
.startscreen{
  position:fixed;inset:0;z-index:20;
  overflow-y:auto;               /* scrolls if the card is taller than the screen */
  padding:clamp(20px,6vh,64px) clamp(16px,4vw,24px);
  background:radial-gradient(circle at 50% 35%, rgba(18,33,58,.9), rgba(1,10,19,.97));
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  transition:opacity .35s;
}
.startscreen.hide{opacity:0;pointer-events:none}
/* plain block centring — no flex, can't shrink-wrap */
.start-card{text-align:center;max-width:470px;margin:0 auto;padding:clamp(16px,4vw,22px)}
/* hook + objective + visual grade scale */
.start-tagline{
  margin:clamp(12px,3vw,16px) auto 10px;max-width:420px;
  font-size:clamp(15px,4vw,18px);line-height:1.5;color:var(--gold-bright);
}
.start-tagline b{color:var(--blue)}
.start-goal{
  margin:0 auto 16px;max-width:400px;
  font-size:clamp(12.5px,3.3vw,14px);line-height:1.55;color:var(--gold);opacity:.9;
}
.start-goal b{color:var(--gold-bright)}
.grade-scale{display:flex;justify-content:center;gap:clamp(6px,2vw,9px);flex-wrap:wrap;margin:0 auto 10px}
.gs{
  display:flex;flex-direction:column;align-items:center;
  min-width:62px;padding:7px 8px;border-radius:8px;
  background:rgba(255,255,255,.03);border:1px solid rgba(200,170,110,.22);
  font-size:16px;font-weight:bold;font-variant-numeric:tabular-nums;line-height:1;
}
.gs small{font-size:9.5px;font-weight:normal;letter-spacing:1px;text-transform:uppercase;opacity:.85;margin-top:3px}
.gs-jackpot{color:var(--gold-bright);border-color:rgba(240,230,210,.55);box-shadow:0 0 16px rgba(240,220,140,.28)}
.gs-perfect{color:#8be36b}
.gs-good{color:var(--blue)}
.gs-bof{color:var(--gold);opacity:.72}
.gs-nul{color:#8a8f99;opacity:.7}
.start-fail{
  margin:0 auto clamp(18px,4vw,24px);
  font-size:11px;letter-spacing:.3px;color:var(--danger);opacity:.7;
}
.startbtn{
  cursor:pointer;font-family:inherit;font-size:clamp(17px,4.6vw,20px);letter-spacing:4px;font-weight:bold;
  color:#04101c;padding:clamp(13px,3.6vw,16px) clamp(32px,9vw,46px);border-radius:6px;border:2px solid var(--gold-bright);
  background:linear-gradient(180deg,#f0e6d2,#c8aa6e);
  box-shadow:0 0 30px rgba(200,170,110,.4);
  transition:transform .1s, box-shadow .2s;
}
.startbtn:hover{box-shadow:0 0 46px rgba(200,170,110,.7);transform:translateY(-2px)}
.startbtn:active{transform:scale(.96)}
.pseudo-input{
  display:block;margin:0 auto clamp(12px,3vw,14px);width:230px;max-width:82%;
  padding:11px 14px;border-radius:6px;text-align:center;
  font-family:inherit;font-size:15px;letter-spacing:1px;
  color:var(--gold-bright);background:#0a1a2a;
  border:2px solid var(--gold);transition:border-color .2s, box-shadow .2s;
}
.pseudo-input::placeholder{color:var(--gold);opacity:.5}
.pseudo-input:focus{border-color:var(--gold-bright);box-shadow:0 0 14px rgba(200,170,110,.35)}

.start-keys{margin-top:clamp(16px,4vw,22px);font-size:12px;letter-spacing:1px;color:var(--gold);opacity:.7}
.start-keys b{color:var(--gold-bright)}