/* cert.css — name/serial gate + Certificate of Completion.
   Palette matches the player's :root vars (navy/dark + gold accent). */

.cert-overlay{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(8,6,4,.86);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  font:16px/1.6 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:#ece4d8;
}

/* ---------- Gate ---------- */
.cert-gate-card{
  width:100%; max-width:440px;
  background:#1d1813; border:1px solid #332a20; border-radius:14px;
  padding:32px 30px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.cert-gate-kick{
  font-size:11.5px; letter-spacing:1.6px; text-transform:uppercase;
  color:#c08a3e; font-weight:700;
}
.cert-gate-title{
  font-size:24px; line-height:1.25; margin:8px 0 10px; color:#e0b069; font-weight:700;
}
.cert-gate-lead{ font-size:14px; color:#9a8f80; margin:0 0 22px; }
.cert-field{ display:block; margin-bottom:16px; }
.cert-field>span{
  display:block; font-size:12px; letter-spacing:.6px; text-transform:uppercase;
  color:#9a8f80; margin-bottom:6px; font-weight:600;
}
.cert-field input{
  width:100%; padding:11px 13px; font-size:15px;
  background:#14110e; color:#ece4d8;
  border:1px solid #332a20; border-radius:8px; outline:none;
}
.cert-field input:focus{ border-color:#c08a3e; box-shadow:0 0 0 2px rgba(192,138,62,.25); }

.cert-btn{
  display:inline-block; margin-top:6px;
  background:#241e18; color:#ece4d8;
  border:1px solid #332a20; border-radius:8px;
  padding:11px 22px; font-size:14px; font-weight:600; cursor:pointer;
}
.cert-btn:hover:not(:disabled){ border-color:#c08a3e; }
.cert-btn-primary{ background:#c08a3e; color:#1a140d; border-color:#c08a3e; width:100%; }
.cert-btn-primary:hover:not(:disabled){ background:#e0b069; }
.cert-btn:disabled{ opacity:.4; cursor:not-allowed; }

/* ---------- Certificate ---------- */
.cert-overlay-cert{ flex-direction:column; overflow-y:auto; }
.cert-card{
  width:100%; max-width:720px;
  background:#fbf6ea; color:#1a140d;
  border:2px solid #c08a3e; border-radius:6px;
  padding:10px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.cert-inner{
  border:1px solid #c9a25a; border-radius:4px;
  padding:46px 40px; text-align:center;
}
.cert-eyebrow{
  font-size:12px; letter-spacing:2.4px; text-transform:uppercase;
  color:#9a6f28; font-weight:700;
}
.cert-headline{
  font-family:Georgia,"Times New Roman",serif;
  font-size:34px; letter-spacing:1px; color:#2a2014; font-weight:700;
  margin:12px 0 26px; text-transform:uppercase;
}
.cert-presented{ font-size:14px; color:#5a4a33; margin:14px 0 6px; }
.cert-name{
  font-family:Georgia,"Times New Roman",serif;
  font-size:40px; line-height:1.15; color:#1a140d; font-weight:700;
  margin:4px 0 4px;
  border-bottom:2px solid #c08a3e; display:inline-block; padding:0 18px 8px;
}
.cert-serial{ font-size:13px; color:#5a4a33; margin-top:10px; letter-spacing:.5px; }
.cert-module{
  font-family:Georgia,"Times New Roman",serif;
  font-size:24px; color:#2a2014; font-weight:700; margin:6px 0 4px;
}
.cert-hours{
  display:inline-block; margin-top:14px;
  font-size:14px; font-weight:700; letter-spacing:.5px;
  color:#9a6f28; border:1px solid #c9a25a; border-radius:30px; padding:5px 16px;
}
.cert-footer{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-top:38px; padding-top:18px; border-top:1px solid #d8c79e;
}
.cert-date{ font-size:15px; color:#2a2014; }
.cert-label{
  display:block; font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase;
  color:#9a6f28; margin-bottom:3px; font-weight:700;
}
.cert-seal{ font-size:34px; color:#c08a3e; line-height:1; }

.cert-actions{ display:flex; gap:12px; margin-top:20px; }
.cert-actions .cert-btn-primary{ width:auto; }

/* ---------- Mobile (<=430px) — additive; desktop layout unchanged ---------- */
@media(max-width:430px){
  .cert-overlay{ padding:14px; align-items:flex-start; overflow-y:auto; }

  /* gate card: tighter padding, inputs >=44px and 16px font (no iOS zoom) */
  .cert-gate-card{ padding:24px 20px; }
  .cert-gate-title{ font-size:21px; }
  .cert-field input{ font-size:16px; padding:13px; min-height:46px; }
  .cert-btn{ min-height:46px; padding:13px 20px; }

  /* certificate: shrink the serif headline/name so they never overflow,
     ease the inner padding, and let the footer row stack */
  .cert-card{ padding:8px; }
  .cert-inner{ padding:30px 18px; }
  .cert-headline{ font-size:23px; letter-spacing:.5px; margin:10px 0 18px; }
  .cert-name{ font-size:28px; padding:0 10px 6px; }
  .cert-module{ font-size:19px; }
  .cert-footer{ flex-direction:column; align-items:flex-start; gap:16px; margin-top:26px; }
  .cert-actions{ flex-direction:column; }
  .cert-actions .cert-btn-primary{ width:100%; }
}

/* ---------- Print: clean certificate on white paper ---------- */
@media print{
  /* hide everything that is not the certificate overlay */
  body > *:not(.cert-overlay-cert){ display:none !important; }
  .cert-overlay-cert{
    position:static; inset:auto; padding:0; display:block;
    background:#fff !important; -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .cert-actions{ display:none !important; }
  .cert-card{
    max-width:none; width:100%;
    box-shadow:none; border:2px solid #b8902f;
    background:#fff !important; color:#000 !important;
  }
  .cert-headline,.cert-name,.cert-module,.cert-date{ color:#000 !important; }
  @page{ margin:14mm; }
}