* { margin:0; padding:0; box-sizing:border-box; }
body { overflow:hidden; background:#000; font-family:system-ui,sans-serif; }
canvas { display:block; }
#overlay {
  position:fixed; inset:0; z-index:100;
  pointer-events:none;
  display:flex; flex-direction:column;
  justify-content:space-between;
  padding:24px;
}
#overlay.hidden { display:none; }
#card {
  pointer-events:auto;
  background:#fff; border-radius:14px;
  padding:20px; max-width:320px;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  border:1px solid #e2e8f0;
}
#card h1   { font-size:17px; color:#1e293b; margin-bottom:6px; }
#card .sub { font-size:12px; color:#5c6370; margin-bottom:16px; }
#card h2   { font-size:11px; color:#2d6a4f; text-transform:uppercase; letter-spacing:.7px; margin:14px 0 8px; font-weight:700; }
#card p    { font-size:13px; color:#475569; line-height:1.6; margin-bottom:8px; }
#btns {
  align-self:center; pointer-events:auto;
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
}
.btn {
  padding:12px 20px; border:none; border-radius:10px;
  font-size:14px; font-weight:600; cursor:pointer; color:#fff;
  transition:filter .15s, transform .1s;
}
.btn:active { transform:scale(.96); }
.btn-blue  { background:#2d6a4f; } .btn-blue:hover  { filter:brightness(1.15); }
.btn-slate { background:#64748b; } .btn-slate:hover { filter:brightness(1.2);  }
.btn-green { background:#c45d3e; } .btn-green:hover { filter:brightness(1.15); }
.load-error { color:red; padding:40px; }